diff --git a/frontend-reactive/app/components/account/header.hbs b/frontend-reactive/app/components/account/header.hbs
new file mode 100644
index 0000000..d401285
--- /dev/null
+++ b/frontend-reactive/app/components/account/header.hbs
@@ -0,0 +1,18 @@
+<div class="account-header">
+  <Account::Header::Profilepicture @meta={{@data.icon}} />
+  <div class="account-header-">
+
+  </div>
+</div>
+<div class="account-header">
+  <Account::Header::Profilepicture @meta={{@data.icon}} />
+  <div class="account-header-text">
+    <Note::Formatter
+      @classes="note-user-displayname"
+      @content={{@data.displayname}}
+      @server={{@data.originServer}}
+    />
+    <p class="note-user-displayname"></p>
+    <p class="note-user-handle">{{@data.originServer.id}}</p>
+  </div>
+</div>
\ No newline at end of file
diff --git a/frontend-reactive/app/components/account/header/profilepicture.hbs b/frontend-reactive/app/components/account/header/profilepicture.hbs
new file mode 100644
index 0000000..7f91ee8
--- /dev/null
+++ b/frontend-reactive/app/components/account/header/profilepicture.hbs
@@ -0,0 +1 @@
+<img class="profile-picture" src="{{@meta.url}}" alt="{{@meta.altText}}" />
\ No newline at end of file
diff --git a/frontend-reactive/app/components/account/overview.hbs b/frontend-reactive/app/components/account/overview.hbs
index fb5c4b1..26a0157 100644
--- a/frontend-reactive/app/components/account/overview.hbs
+++ b/frontend-reactive/app/components/account/overview.hbs
@@ -1 +1,3 @@
-{{yield}}
\ No newline at end of file
+<div class="profile-overview">
+  <Account::Header @data={{@data}} />
+</div>
\ No newline at end of file
diff --git a/frontend-reactive/app/models/account.ts b/frontend-reactive/app/models/account.ts
index 9057f97..309e471 100644
--- a/frontend-reactive/app/models/account.ts
+++ b/frontend-reactive/app/models/account.ts
@@ -1,36 +1,36 @@
-import Model, { attr, hasMany, type AsyncHasMany } from '@ember-data/model'
-import type CustomAccountFieldModel from './custom-account-field'
-import type MediaMetadataModel from './media-metadata'
-import type OriginServer from './origin-server'
+import Model, { attr, hasMany, type AsyncHasMany } from '@ember-data/model';
+import type CustomAccountFieldModel from './custom-account-field';
+import type MediaMetadataModel from './media-metadata';
+import type OriginServer from './origin-server';
 
 export default class Account extends Model {
-  @attr declare createdAt: Date
-  @attr declare updatedAt: Date
-  @attr declare username: string
-  @attr declare originServer: OriginServer
-  @attr declare originServerId: number
-  @attr declare displayName: string
+  @attr declare createdAt: Date;
+  @attr declare updatedAt: Date;
+  @attr declare username: string;
+  @attr declare originServer: OriginServer;
+  @attr declare originServerId: number;
+  @attr declare displayName: string;
   @hasMany('custom-account-field')
-  declare customFields: AsyncHasMany<CustomAccountFieldModel>
-  @attr declare customFieldIds: Array<number>
-  @attr declare isBot: boolean
-  @attr declare description: string
-  @attr declare icon: MediaMetadataModel
-  @attr declare iconId: string
-  @attr declare banner: MediaMetadataModel
-  @attr declare bannerId: string
-  @attr declare background: MediaMetadataModel
-  @attr declare backgroundId: string
-  @attr declare relationIds: Array<number>
-  @attr declare indexable: boolean
-  @attr declare restrictedFollow: boolean
-  @attr declare identifiesAs: Array<string>
-  @attr declare pronouns: Array<string>
-  @attr declare roles: Array<string>
+  declare customFields: AsyncHasMany<CustomAccountFieldModel>;
+  @attr declare customFieldIds: Array<number>;
+  @attr declare isBot: boolean;
+  @attr declare description: string;
+  @attr declare icon: MediaMetadataModel;
+  @attr declare iconId: string;
+  @attr declare banner: MediaMetadataModel;
+  @attr declare bannerId: string;
+  @attr declare background: MediaMetadataModel;
+  @attr declare backgroundId: string;
+  @attr declare relationIds: Array<number>;
+  @attr declare indexable: boolean;
+  @attr declare restrictedFollow: boolean;
+  @attr declare identifiesAs: Array<string>;
+  @attr declare pronouns: Array<string>;
+  @attr declare roles: Array<string>;
 }
 
 declare module 'ember-data/types/registries/model' {
   export default interface ModelRegistry {
-    account: Account
+    account: Account;
   }
 }
diff --git a/frontend-reactive/app/models/custom-account-field.ts b/frontend-reactive/app/models/custom-account-field.ts
index 73b7093..c263a0a 100644
--- a/frontend-reactive/app/models/custom-account-field.ts
+++ b/frontend-reactive/app/models/custom-account-field.ts
@@ -1,16 +1,16 @@
-import Model, { attr } from '@ember-data/model'
+import Model, { attr } from '@ember-data/model';
 
 export default class CustomAccountField extends Model {
-  @attr declare createdAt: Date
-  @attr declare updatedAt: Date
-  @attr declare key: string
-  @attr declare value: string
-  @attr declare verified?: boolean
-  @attr declare belongsToId: string
+  @attr declare createdAt: Date;
+  @attr declare updatedAt: Date;
+  @attr declare key: string;
+  @attr declare value: string;
+  @attr declare verified?: boolean;
+  @attr declare belongsToId: string;
 }
 
 declare module 'ember-data/types/registries/model' {
   export default interface ModelRegistry {
-    customAccountField: CustomAccountField
+    customAccountField: CustomAccountField;
   }
 }
diff --git a/frontend-reactive/app/models/emote.ts b/frontend-reactive/app/models/emote.ts
index abea37b..d30ab10 100644
--- a/frontend-reactive/app/models/emote.ts
+++ b/frontend-reactive/app/models/emote.ts
@@ -1,17 +1,17 @@
-import Model, { attr } from '@ember-data/model'
-import type MediaMetadataModel from './media-metadata'
-import type OriginServer from './origin-server'
+import Model, { attr } from '@ember-data/model';
+import type MediaMetadataModel from './media-metadata';
+import type OriginServer from './origin-server';
 
 export default class Emote extends Model {
-  @attr declare metadataId: string
-  @attr declare metadata: MediaMetadataModel
-  @attr declare name: string
-  @attr declare serverId: number
-  @attr declare server: OriginServer
+  @attr declare metadataId: string;
+  @attr declare metadata: MediaMetadataModel;
+  @attr declare name: string;
+  @attr declare serverId: number;
+  @attr declare server: OriginServer;
 }
 
 declare module 'ember-data/types/registries/model' {
   export default interface ModelRegistry {
-    emote: Emote
+    emote: Emote;
   }
 }
diff --git a/frontend-reactive/app/models/media-metadata.ts b/frontend-reactive/app/models/media-metadata.ts
index 7eea37b..fa3f880 100644
--- a/frontend-reactive/app/models/media-metadata.ts
+++ b/frontend-reactive/app/models/media-metadata.ts
@@ -1,18 +1,18 @@
-import Model, { attr } from '@ember-data/model'
+import Model, { attr } from '@ember-data/model';
 
 export default class MediaMetadata extends Model {
-  @attr declare createdAt: Date
-  @attr declare updatedAt: Date
-  @attr declare isRemote: boolean
-  @attr declare url: string
-  @attr declare mimeType: string
-  @attr declare name: string
-  @attr declare altText: string
-  @attr declare blurred: boolean
+  @attr declare createdAt: Date;
+  @attr declare updatedAt: Date;
+  @attr declare isRemote: boolean;
+  @attr declare url: string;
+  @attr declare mimeType: string;
+  @attr declare name: string;
+  @attr declare altText: string;
+  @attr declare blurred: boolean;
 }
 
 declare module 'ember-data/types/registries/model' {
   export default interface ModelRegistry {
-    mediaMetadata: MediaMetadata
+    mediaMetadata: MediaMetadata;
   }
 }
diff --git a/frontend-reactive/app/models/note.ts b/frontend-reactive/app/models/note.ts
index aad185c..f43c192 100644
--- a/frontend-reactive/app/models/note.ts
+++ b/frontend-reactive/app/models/note.ts
@@ -1,32 +1,32 @@
-import Model, { attr, hasMany, type AsyncHasMany } from '@ember-data/model'
-import type AccountModel from './account'
-import type MediaMetadataModel from './media-metadata'
-import type OriginServer from './origin-server'
+import Model, { attr, hasMany, type AsyncHasMany } from '@ember-data/model';
+import type AccountModel from './account';
+import type MediaMetadataModel from './media-metadata';
+import type OriginServer from './origin-server';
 
 export default class Note extends Model {
-  @attr declare content: string
-  @attr declare originServer: OriginServer
-  @attr declare originServerId: number
-  @attr declare reactionCount: number
-  @attr declare createdAt: Date
-  @attr declare updatedAt: Date
-  @attr declare author: AccountModel
-  @attr declare authorId: string
-  @attr declare contentWarning?: string
-  @attr declare inReplyToId?: string
-  @attr declare quotesId?: string
-  @attr declare emoteIds?: Array<string>
+  @attr declare content: string;
+  @attr declare originServer: OriginServer;
+  @attr declare originServerId: number;
+  @attr declare reactionCount: number;
+  @attr declare createdAt: Date;
+  @attr declare updatedAt: Date;
+  @attr declare author: AccountModel;
+  @attr declare authorId: string;
+  @attr declare contentWarning?: string;
+  @attr declare inReplyToId?: string;
+  @attr declare quotesId?: string;
+  @attr declare emoteIds?: Array<string>;
   @hasMany('media-metadata')
-  declare attachments: AsyncHasMany<MediaMetadataModel>
-  @attr declare attachmentIds: Array<string>
-  @attr declare accessLevel: number
-  @hasMany('account') declare pings?: AsyncHasMany<AccountModel>
-  @attr declare pingIds?: Array<string>
-  @attr declare reactionIds: Array<number>
+  declare attachments: AsyncHasMany<MediaMetadataModel>;
+  @attr declare attachmentIds: Array<string>;
+  @attr declare accessLevel: number;
+  @hasMany('account') declare pings?: AsyncHasMany<AccountModel>;
+  @attr declare pingIds?: Array<string>;
+  @attr declare reactionIds: Array<number>;
 }
 
 declare module 'ember-data/types/registries/model' {
   export default interface ModelRegistry {
-    note: Note
+    note: Note;
   }
 }
diff --git a/frontend-reactive/app/models/origin-server.ts b/frontend-reactive/app/models/origin-server.ts
index 58928a9..e553f7e 100644
--- a/frontend-reactive/app/models/origin-server.ts
+++ b/frontend-reactive/app/models/origin-server.ts
@@ -1,14 +1,14 @@
-import Model, { attr } from '@ember-data/model'
+import Model, { attr } from '@ember-data/model';
 
 export default class OriginServer extends Model {
-  @attr() declare serverType: string
-  @attr() declare name: string
-  @attr() declare iconUrl: string
-  @attr() declare isSelf: boolean
+  @attr() declare serverType: string;
+  @attr() declare name: string;
+  @attr() declare iconUrl: string;
+  @attr() declare isSelf: boolean;
 }
 
 declare module 'ember-data/types/registries/model' {
   export default interface ModelRegistry {
-    originServer: OriginServer
+    originServer: OriginServer;
   }
 }
diff --git a/frontend-reactive/app/models/reaction.ts b/frontend-reactive/app/models/reaction.ts
index 5a608f8..aa21433 100644
--- a/frontend-reactive/app/models/reaction.ts
+++ b/frontend-reactive/app/models/reaction.ts
@@ -1,15 +1,15 @@
-import Model, { attr } from '@ember-data/model'
-import type EmoteModel from './emote'
+import Model, { attr } from '@ember-data/model';
+import type EmoteModel from './emote';
 
 export default class Reaction extends Model {
-  @attr declare noteId: string
-  @attr declare reactorId: string
-  @attr declare emoteId: number
-  @attr declare emote: EmoteModel
+  @attr declare noteId: string;
+  @attr declare reactorId: string;
+  @attr declare emoteId: number;
+  @attr declare emote: EmoteModel;
 }
 
 declare module 'ember-data/types/registries/model' {
   export default interface ModelRegistry {
-    reaction: Reaction
+    reaction: Reaction;
   }
 }
diff --git a/frontend-reactive/app/models/relation.ts b/frontend-reactive/app/models/relation.ts
index c5b20f7..69046dd 100644
--- a/frontend-reactive/app/models/relation.ts
+++ b/frontend-reactive/app/models/relation.ts
@@ -1,16 +1,16 @@
-import Model, { attr } from '@ember-data/model'
+import Model, { attr } from '@ember-data/model';
 
 export default class Relation extends Model {
-  @attr declare createdAt: Date
-  @attr declare updatedAt: Date
-  @attr declare fromId: string
-  @attr declare toId: string
-  @attr declare requested: boolean
-  @attr declare accepted: boolean
+  @attr declare createdAt: Date;
+  @attr declare updatedAt: Date;
+  @attr declare fromId: string;
+  @attr declare toId: string;
+  @attr declare requested: boolean;
+  @attr declare accepted: boolean;
 }
 
 declare module 'ember-data/types/registries/model' {
   export default interface ModelRegistry {
-    relation: Relation
+    relation: Relation;
   }
 }
diff --git a/frontend-reactive/app/models/role.ts b/frontend-reactive/app/models/role.ts
index d4484fa..82b57ce 100644
--- a/frontend-reactive/app/models/role.ts
+++ b/frontend-reactive/app/models/role.ts
@@ -3,62 +3,62 @@
 import Model, { attr } from '@ember-data/model';
 
 export default class Role extends Model {
-  @attr() declare createdAt: Date
-  @attr() declare updatedAt: Date
-  @attr() declare name: string
-  @attr() declare priority: number
-  @attr() declare isUserRole: boolean
-  @attr() declare isBuiltIn: boolean
+  @attr() declare createdAt: Date;
+  @attr() declare updatedAt: Date;
+  @attr() declare name: string;
+  @attr() declare priority: number;
+  @attr() declare isUserRole: boolean;
+  @attr() declare isBuiltIn: boolean;
 
-  @attr() declare canSendCustomReactions?: boolean
-  @attr() declare autoCwPostsText?: string
-  @attr() declare withholdNotesRegexes?: Array<string>
-  @attr() declare canAssignRoles?: boolean
-  @attr() declare canSupressInteractionsBetweenUsers?: boolean
-  @attr() declare canSendCustomEmotes?: boolean
-  @attr() declare canOverwriteDisplayNames?: boolean
-  @attr() declare canManageCustomEmotes?: boolean
-  @attr() declare canDeleteNotes?: boolean
-  @attr() declare canManageAvatarDecorations?: boolean
-  @attr() declare canManageAds?: boolean
-  @attr() declare blockedUsers?: Array<string>
-  @attr() declare hasMentionCountLimit?: boolean
-  @attr() declare disallowInteractionsWith?: Array<string>
-  @attr() declare withholdNotesBasedOnRegex?: boolean
-  @attr() declare fullAdmin?: boolean
-  @attr() declare canSendAnnouncements?: boolean
-  @attr() declare autoNsfwMedia?: boolean
-  @attr() declare scanCreatedPublicNotes?: boolean
-  @attr() declare scanCreatedPrivateNotes?: boolean
-  @attr() declare canSendFollowerOnlyNotes?: boolean
-  @attr() declare canSendPrivateNotes?: boolean
-  @attr() declare canIncludeSurvey?: boolean
-  @attr() declare canChangeDisplayName?: boolean
-  @attr() declare canLogin?: boolean
-  @attr() declare canAffectOtherAdmins?: boolean
-  @attr() declare autoCwPosts?: boolean
-  @attr() declare scanCreatedFollowerOnlyNotes?: boolean
-  @attr() declare canViewDeletedNotes?: boolean
-  @attr() declare mentionLimit?: number
-  @attr() declare withholdNotesForManualApproval?: boolean
-  @attr() declare canConfirmWithheldNotes?: boolean
-  @attr() declare canSendMedia?: boolean
-  @attr() declare canSendPublicNotes?: boolean
-  @attr() declare canSendReplies?: boolean
-  @attr() declare canQuote?: boolean
-  @attr() declare canIncludeLinks?: boolean
-  @attr() declare canRecoverDeletedNotes?: boolean
-  @attr() declare canMentionOthers?: boolean
-  @attr() declare scanCreatedLocalNotes?: boolean
-  @attr() declare canSendLocalNotes?: boolean
-  @attr() declare canBoost?: boolean
-  @attr() declare canFederateFedi?: boolean
-  @attr() declare canFederateBsky?: boolean
-  @attr() declare canSubmitReports?: boolean
+  @attr() declare canSendCustomReactions?: boolean;
+  @attr() declare autoCwPostsText?: string;
+  @attr() declare withholdNotesRegexes?: Array<string>;
+  @attr() declare canAssignRoles?: boolean;
+  @attr() declare canSupressInteractionsBetweenUsers?: boolean;
+  @attr() declare canSendCustomEmotes?: boolean;
+  @attr() declare canOverwriteDisplayNames?: boolean;
+  @attr() declare canManageCustomEmotes?: boolean;
+  @attr() declare canDeleteNotes?: boolean;
+  @attr() declare canManageAvatarDecorations?: boolean;
+  @attr() declare canManageAds?: boolean;
+  @attr() declare blockedUsers?: Array<string>;
+  @attr() declare hasMentionCountLimit?: boolean;
+  @attr() declare disallowInteractionsWith?: Array<string>;
+  @attr() declare withholdNotesBasedOnRegex?: boolean;
+  @attr() declare fullAdmin?: boolean;
+  @attr() declare canSendAnnouncements?: boolean;
+  @attr() declare autoNsfwMedia?: boolean;
+  @attr() declare scanCreatedPublicNotes?: boolean;
+  @attr() declare scanCreatedPrivateNotes?: boolean;
+  @attr() declare canSendFollowerOnlyNotes?: boolean;
+  @attr() declare canSendPrivateNotes?: boolean;
+  @attr() declare canIncludeSurvey?: boolean;
+  @attr() declare canChangeDisplayName?: boolean;
+  @attr() declare canLogin?: boolean;
+  @attr() declare canAffectOtherAdmins?: boolean;
+  @attr() declare autoCwPosts?: boolean;
+  @attr() declare scanCreatedFollowerOnlyNotes?: boolean;
+  @attr() declare canViewDeletedNotes?: boolean;
+  @attr() declare mentionLimit?: number;
+  @attr() declare withholdNotesForManualApproval?: boolean;
+  @attr() declare canConfirmWithheldNotes?: boolean;
+  @attr() declare canSendMedia?: boolean;
+  @attr() declare canSendPublicNotes?: boolean;
+  @attr() declare canSendReplies?: boolean;
+  @attr() declare canQuote?: boolean;
+  @attr() declare canIncludeLinks?: boolean;
+  @attr() declare canRecoverDeletedNotes?: boolean;
+  @attr() declare canMentionOthers?: boolean;
+  @attr() declare scanCreatedLocalNotes?: boolean;
+  @attr() declare canSendLocalNotes?: boolean;
+  @attr() declare canBoost?: boolean;
+  @attr() declare canFederateFedi?: boolean;
+  @attr() declare canFederateBsky?: boolean;
+  @attr() declare canSubmitReports?: boolean;
 }
 
 declare module 'ember-data/types/registries/model' {
   export default interface ModelRegistry {
-    role: Role
+    role: Role;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend-reactive/tests/integration/components/account/header-test.ts b/frontend-reactive/tests/integration/components/account/header-test.ts
new file mode 100644
index 0000000..f103bd4
--- /dev/null
+++ b/frontend-reactive/tests/integration/components/account/header-test.ts
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | account/header', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Account::Header />`);
+
+    assert.dom().hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Account::Header>
+        template block text
+      </Account::Header>
+    `);
+
+    assert.dom().hasText('template block text');
+  });
+});
diff --git a/frontend-reactive/tests/integration/components/account/profilepicture-test.ts b/frontend-reactive/tests/integration/components/account/profilepicture-test.ts
new file mode 100644
index 0000000..76d1734
--- /dev/null
+++ b/frontend-reactive/tests/integration/components/account/profilepicture-test.ts
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit'
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers'
+import { render } from '@ember/test-helpers'
+import { hbs } from 'ember-cli-htmlbars'
+
+module('Integration | Component | account/profilepicture', function (hooks) {
+  setupRenderingTest(hooks)
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Account::Header::Profilepicture />`)
+
+    assert.dom().hasText('')
+
+    // Template block usage:
+    await render(hbs`
+      <Account::Profilepicture>
+        template block text
+      </Account::Profilepicture>
+    `)
+
+    assert.dom().hasText('template block text')
+  })
+})