diff --git a/src/app/features/home/home.component.scss b/src/app/features/home/home.component.scss
index a8578ddfd..36555c7a2 100644
--- a/src/app/features/home/home.component.scss
+++ b/src/app/features/home/home.component.scss
@@ -186,6 +186,8 @@
   }
 
   .tablet {
+    margin: 0;
+
     .quick-search-container {
       padding-left: 2.57rem;
       padding-right: 2.57rem;
diff --git a/src/app/features/settings/account-settings/account-settings.component.html b/src/app/features/settings/account-settings/account-settings.component.html
index 0cc076f96..4c3b2af68 100644
--- a/src/app/features/settings/account-settings/account-settings.component.html
+++ b/src/app/features/settings/account-settings/account-settings.component.html
@@ -1,7 +1,8 @@
-<section class="header">
-  <i class="osf-icon-settings"></i>
-  <h1>Account settings</h1>
-</section>
+<osf-sub-header
+  [showButton]="false"
+  [title]="'Account settings'"
+  [icon]="'settings'"
+/>
 
 <section class="content">
   <section class="account-setting">
diff --git a/src/app/features/settings/account-settings/account-settings.component.scss b/src/app/features/settings/account-settings/account-settings.component.scss
index 9c670a463..db8c5e9db 100644
--- a/src/app/features/settings/account-settings/account-settings.component.scss
+++ b/src/app/features/settings/account-settings/account-settings.component.scss
@@ -5,7 +5,6 @@
   display: flex;
   flex-direction: column;
   flex: 1;
-  gap: 1.7rem;
   color: var(--dark-blue-1);
 
   .header {
diff --git a/src/app/features/settings/account-settings/account-settings.component.ts b/src/app/features/settings/account-settings/account-settings.component.ts
index 6c22e0822..13ced1dd2 100644
--- a/src/app/features/settings/account-settings/account-settings.component.ts
+++ b/src/app/features/settings/account-settings/account-settings.component.ts
@@ -13,6 +13,7 @@ import { Message } from 'primeng/message';
 import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { AddEmailComponent } from '@osf/features/settings/account-settings/add-email/add-email.component';
 import { DeactivateAccountComponent } from '@osf/features/settings/account-settings/deactivate-account/deactivate-account/deactivate-account.component';
+import { SubHeaderComponent } from '@shared/components/sub-header/sub-header.component';
 
 @Component({
   selector: 'osf-account-settings',
@@ -23,6 +24,7 @@ import { DeactivateAccountComponent } from '@osf/features/settings/account-setti
     ReactiveFormsModule,
     InputText,
     Message,
+    SubHeaderComponent,
   ],
   providers: [DialogService],
   templateUrl: './account-settings.component.html',
diff --git a/src/app/features/settings/addons/addons.component.ts b/src/app/features/settings/addons/addons.component.ts
index 56db17acb..ea9609bbc 100644
--- a/src/app/features/settings/addons/addons.component.ts
+++ b/src/app/features/settings/addons/addons.component.ts
@@ -17,11 +17,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { IS_XSMALL } from '@shared/utils/breakpoints.tokens';
 import { DropdownModule } from 'primeng/dropdown';
 import { FormsModule } from '@angular/forms';
-
-interface TabOption {
-  label: string;
-  value: number;
-}
+import { TabOption } from '@osf/shared/entities/tab-option.interface';
 
 @Component({
   selector: 'osf-addons',
diff --git a/src/app/features/settings/profile-settings/entities/user-position.entity.ts b/src/app/features/settings/profile-settings/entities/user-position.entity.ts
new file mode 100644
index 000000000..d7d449a8b
--- /dev/null
+++ b/src/app/features/settings/profile-settings/entities/user-position.entity.ts
@@ -0,0 +1,8 @@
+export interface UserPosition {
+  jobTitle: string;
+  department: string;
+  institution: string;
+  startDate: Date | null;
+  endDate: Date | null;
+  presentlyEmployed: boolean;
+}
diff --git a/src/app/features/settings/profile-settings/profile-settings.component.html b/src/app/features/settings/profile-settings/profile-settings.component.html
index 6e60bf7a1..8e6a034a9 100644
--- a/src/app/features/settings/profile-settings/profile-settings.component.html
+++ b/src/app/features/settings/profile-settings/profile-settings.component.html
@@ -5,15 +5,30 @@
 />
 
 <div class="flex-column flex flex-1 w-full">
-  <p-tabs [value]="defaultTabValue" class="flex-1">
-    <p-tablist class="pr-5 pl-5">
-      <p-tab [value]="0">Name</p-tab>
-      <p-tab [value]="1">Social</p-tab>
-      <p-tab [value]="2">Employment</p-tab>
-      <p-tab [value]="3">Education</p-tab>
-    </p-tablist>
+  <p-tabs
+    [value]="selectedTab"
+    (valueChange)="onTabChange(+$event)"
+    class="flex-1"
+  >
+    @if (!isMobile()) {
+      <p-tablist class="pr-5 pl-5">
+        <p-tab [value]="0">Name</p-tab>
+        <p-tab [value]="1">Social</p-tab>
+        <p-tab [value]="2">Employment</p-tab>
+        <p-tab [value]="3">Education</p-tab>
+      </p-tablist>
+    }
 
     <p-tabpanels class="p-3 sm:p-5 flex-1">
+      @if (isMobile()) {
+        <p-select
+          class="w-full mb-4"
+          [options]="tabOptions"
+          optionLabel="label"
+          optionValue="value"
+          [(ngModel)]="selectedTab"
+        ></p-select>
+      }
       <!--NAME-->
       <p-tabpanel [value]="0" class="flex flex-column gap-4 flex-1">
         <div class="border-1 border-round-lg p-3 sm:p-5 name-container">
@@ -23,9 +38,9 @@ <h3 class="font-normal">
             the "Auto-fill" button to automatically infer your first name, last
             name, etc., or edit the fields directly below.
           </h3>
-          <div class="flex flex-column row-gap-4 mt-4">
+          <div class="flex flex-column row-gap-2 md:row-gap-4 mt-4">
             <div
-              class="flex flex-column row-gap-2 xl:flex-row xl:align-items-end xl:column-gap-3 w-full mb-3"
+              class="flex flex-column row-gap-2 xl:flex-row xl:align-items-end xl:column-gap-3 w-full md:0 md:mb-3"
             >
               <div class="w-full xl:w-6">
                 <label for="full-name" class="font-normal xl:font-light"
@@ -90,7 +105,7 @@ <h3>Doe, J. T.</h3>
                 </div>
               </div>
 
-              <div class="flex flex-row column-gap-5">
+              <div class="flex column-gap-5">
                 <div class="flex flex-column style-wrapper">
                   <h3>Style:</h3>
                   <h3>Citation format:</h3>
@@ -105,10 +120,15 @@ <h3>Doe, John T.</h3>
         </div>
 
         <div
-          class="flex flex-row align-items-end column-gap-2 ml-auto h-3rem mt-2"
+          class="flex justify-content-between align-items-end column-gap-2 md:ml-auto h-3rem mt-2"
         >
-          <p-button label="Discard Changes" severity="info" disabled="true" />
-          <div class="wide-m-button">
+          <p-button
+            class="w-6 btn-full-width md:w-auto"
+            label="Discard Changes"
+            severity="info"
+            disabled="true"
+          />
+          <div class="w-6 btn-full-width md:w-auto wide-m-button">
             <p-button label="Save" disabled="true" />
           </div>
         </div>
@@ -132,8 +152,8 @@ <h2>Social Link {{ index + 1 }}</h2>
                   @if (index !== 0) {
                     <div class="ml-auto remove-button">
                       <p-button class="ml-auto" (click)="removeLink(index)"
-                        >Remove</p-button
-                      >
+                        >Remove
+                      </p-button>
                     </div>
                   }
                 </div>
@@ -154,9 +174,9 @@ <h2>Social Link {{ index + 1 }}</h2>
                   <div class="w-full md:w-8">
                     <p class="font-light mb-1">Web Address</p>
                     <p-inputgroup class="addon-input">
-                      <p-inputgroup-addon>{{
-                        getDomain(index)
-                      }}</p-inputgroup-addon>
+                      <p-inputgroup-addon
+                        >{{ getDomain(index) }}
+                      </p-inputgroup-addon>
                       <input
                         pInputText
                         placeholder="{{ getPlaceholder(index) }}"
@@ -173,15 +193,20 @@ <h2>Social Link {{ index + 1 }}</h2>
         <p-button
           label="Add One More"
           severity="secondary"
-          class="ml-auto"
+          class="ml-auto w-6 btn-full-width md:w-auto"
           (click)="addLink()"
         />
 
         <div
-          class="flex flex-row align-items-end column-gap-2 ml-auto h-3rem mt-2"
+          class="flex justify-content-between align-items-end column-gap-2 md:ml-auto h-3rem mt-2"
         >
-          <p-button label="Discard Changes" severity="info" disabled="true" />
-          <div class="wide-m-button">
+          <p-button
+            class="w-6 btn-full-width md:w-auto"
+            label="Discard Changes"
+            severity="info"
+            disabled="true"
+          />
+          <div class="w-6 btn-full-width md:w-auto wide-m-button">
             <p-button label="Save" disabled="true" />
           </div>
         </div>
@@ -189,7 +214,146 @@ <h2>Social Link {{ index + 1 }}</h2>
 
       <!--Employment-->
       <p-tabpanel [value]="2" class="flex flex-column gap-5">
-        employment
+        <form [formGroup]="employmentForm">
+          <div formArrayName="positions" class="flex flex-column row-gap-4">
+            @for (
+              position of positions.controls;
+              track position.value;
+              let index = $index
+            ) {
+              <div
+                [formGroupName]="index"
+                class="flex flex-column border-1 border-round-lg p-4 name-container row-gap-4"
+              >
+                <div class="flex flex-row">
+                  <h2>Position {{ index + 1 }}</h2>
+                  @if (index !== 0) {
+                    <div class="ml-auto remove-button">
+                      <p-button class="ml-auto" (click)="removePosition(index)"
+                        >Remove
+                      </p-button>
+                    </div>
+                  }
+                </div>
+
+                <div class="flex flex-column row-gap-4">
+                  <div class="w-full">
+                    <label for="job-title-{{ index }}" class="mb-1"
+                      >Job Title</label
+                    >
+                    <input
+                      pInputText
+                      [id]="'job-title-' + index"
+                      class="w-full"
+                      formControlName="jobTitle"
+                    />
+                  </div>
+
+                  <div
+                    class="flex w-full column-gap-3 row-gap-4 flex-wrap lg:flex-nowrap"
+                  >
+                    <div class="w-full lg:w-6">
+                      <label for="department-{{ index }}" class="mb-1"
+                        >Department / Institute (Optional)</label
+                      >
+                      <input
+                        pInputText
+                        [id]="'department-' + index"
+                        class="w-full"
+                        formControlName="department"
+                      />
+                    </div>
+                    <div class="w-full lg:w-6">
+                      <label for="institution-{{ index }}" class="mb-1"
+                        >Institution / Employer</label
+                      >
+                      <input
+                        pInputText
+                        [id]="'institution-' + index"
+                        class="w-full"
+                        formControlName="institution"
+                      />
+                    </div>
+                  </div>
+
+                  <div
+                    class="flex gap-5 flex-column align-items-start md:flex-row md:align-items-end lg:align-items-center lg:gap-3"
+                  >
+                    <div
+                      class="w-full md:w-6 flex column-gap-3 row-gap-4 flex-wrap lg:flex-nowrap"
+                    >
+                      <div class="w-full lg:w-6">
+                        <label for="start-date-{{ index }}" class="mb-1"
+                          >Start Date</label
+                        >
+                        <p-datepicker
+                          [id]="'start-date-' + index"
+                          formControlName="startDate"
+                          dateFormat="mm/dd/yy"
+                          [iconDisplay]="'input'"
+                          [showIcon]="true"
+                        ></p-datepicker>
+                      </div>
+                      <div class="w-full lg:w-6">
+                        <label for="end-date-{{ index }}" class="mb-1"
+                          >End Date</label
+                        >
+                        <p-datepicker
+                          [id]="'end-date-' + index"
+                          formControlName="endDate"
+                          dateFormat="mm/dd/yy"
+                          [iconDisplay]="'input'"
+                          [showIcon]="true"
+                        ></p-datepicker>
+                      </div>
+                    </div>
+
+                    <div
+                      class="flex align-items-center w-full md:w-6 md:mb-3 lg:mb-0 lg:mt-4"
+                    >
+                      <p-checkbox
+                        [binary]="true"
+                        formControlName="presentlyEmployed"
+                        [inputId]="'presently-employed-' + index"
+                        name="presently-employed"
+                      ></p-checkbox>
+                      <label
+                        [for]="'presently-employed-' + index"
+                        class="ml-2 mb-0 cursor-pointer"
+                        >Presently employed</label
+                      >
+                    </div>
+                  </div>
+                </div>
+              </div>
+            }
+          </div>
+        </form>
+
+        <p-button
+          label="Add Position"
+          severity="secondary"
+          class="ml-auto w-6 btn-full-width md:w-auto"
+          (click)="addPosition()"
+        />
+
+        <div
+          class="flex justify-content-between align-items-end column-gap-2 md:ml-auto h-3rem mt-2"
+        >
+          <p-button
+            class="w-6 btn-full-width md:w-auto"
+            label="Discard Changes"
+            severity="info"
+            disabled="true"
+          />
+          <div class="w-6 btn-full-width md:w-auto wide-m-button">
+            <p-button
+              label="Save"
+              disabled="true"
+              (click)="handleSavePositions()"
+            />
+          </div>
+        </div>
       </p-tabpanel>
 
       <!--Education-->
diff --git a/src/app/features/settings/profile-settings/profile-settings.component.ts b/src/app/features/settings/profile-settings/profile-settings.component.ts
index 917397434..528d43042 100644
--- a/src/app/features/settings/profile-settings/profile-settings.component.ts
+++ b/src/app/features/settings/profile-settings/profile-settings.component.ts
@@ -13,12 +13,20 @@ import { UserSocialLink } from '@osf/features/settings/profile-settings/entities
 import {
   FormArray,
   FormBuilder,
+  FormsModule,
   ReactiveFormsModule,
   Validators,
 } from '@angular/forms';
 import { InputGroup } from 'primeng/inputgroup';
 import { InputGroupAddon } from 'primeng/inputgroupaddon';
 import { socials } from '@osf/features/settings/profile-settings/data';
+import { Checkbox } from 'primeng/checkbox';
+import { DatePicker } from 'primeng/datepicker';
+import { UserPosition } from '@osf/features/settings/profile-settings/entities/user-position.entity';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { IS_XSMALL } from '@osf/shared/utils/breakpoints.tokens';
+import { TabOption } from '@osf/shared/entities/tab-option.interface';
+import { Select } from 'primeng/select';
 
 @Component({
   selector: 'osf-profile-settings',
@@ -35,6 +43,10 @@ import { socials } from '@osf/features/settings/profile-settings/data';
     ReactiveFormsModule,
     InputGroup,
     InputGroupAddon,
+    Checkbox,
+    DatePicker,
+    Select,
+    FormsModule,
   ],
   templateUrl: './profile-settings.component.html',
   styleUrl: './profile-settings.component.scss',
@@ -46,16 +58,38 @@ export class ProfileSettingsComponent implements OnInit {
   socials = socials;
 
   userSocialLinks: UserSocialLink[] = [];
+  userPositions: UserPosition[] = [];
   socialLinksForm = this.#fb.group({
     links: this.#fb.array([]),
   });
 
+  employmentForm = this.#fb.group({
+    positions: this.#fb.array([]),
+  });
+  protected readonly isMobile = toSignal(inject(IS_XSMALL));
+  protected readonly tabOptions: TabOption[] = [
+    { label: 'Name', value: 0 },
+    { label: 'Social', value: 1 },
+    { label: 'Employment', value: 2 },
+    { label: 'Education', value: 3 },
+  ];
+  protected selectedTab = this.defaultTabValue;
+
+  onTabChange(index: number): void {
+    this.selectedTab = index;
+  }
+
   ngOnInit(): void {
     if (!this.userSocialLinks.length) {
       this.addLink();
     }
+
+    if (!this.userPositions.length) {
+      this.addPosition();
+    }
   }
 
+  // Social links methods
   get links(): FormArray {
     return this.socialLinksForm.get('links') as FormArray;
   }
@@ -80,4 +114,30 @@ export class ProfileSettingsComponent implements OnInit {
   getPlaceholder(index: number): string {
     return this.links.at(index).get('socialOutput')?.value.placeholder;
   }
+
+  // Employment methods
+  get positions(): FormArray {
+    return this.employmentForm.get('positions') as FormArray;
+  }
+
+  addPosition(): void {
+    const positionGroup = this.#fb.group({
+      jobTitle: ['', Validators.required],
+      department: [''],
+      institution: ['', Validators.required],
+      startDate: [null, Validators.required],
+      endDate: [null, Validators.required],
+      presentlyEmployed: [false],
+    });
+
+    this.positions.push(positionGroup);
+  }
+
+  removePosition(index: number): void {
+    this.positions.removeAt(index);
+  }
+
+  handleSavePositions(): void {
+    // TODO: Implement save positions
+  }
 }
diff --git a/src/app/shared/entities/tab-option.interface.ts b/src/app/shared/entities/tab-option.interface.ts
new file mode 100644
index 000000000..ab36de5b5
--- /dev/null
+++ b/src/app/shared/entities/tab-option.interface.ts
@@ -0,0 +1,4 @@
+export interface TabOption {
+  label: string;
+  value: number;
+}
diff --git a/src/assets/styles/overrides/datepicker.scss b/src/assets/styles/overrides/datepicker.scss
new file mode 100644
index 000000000..ede25d9fc
--- /dev/null
+++ b/src/assets/styles/overrides/datepicker.scss
@@ -0,0 +1,55 @@
+@use "../variables" as var;
+@use "../mixins" as mix;
+
+.p-datepicker {
+  width: 100%;
+
+  .p-datepicker-header {
+    .p-button {
+      background: none;
+      color: var.$grey-2;
+      padding: 0;
+    }
+
+    .p-button-icon-only {
+      width: auto;
+    }
+
+    .p-datepicker-title {
+      button {
+        font-size: 16px;
+        padding: 0;
+        color: var.$dark-blue-1;
+      }
+    }
+  }
+
+  .p-datepicker-day:hover {
+    background: var.$bg-blue-3;
+  }
+
+  .p-datepicker-today > .p-datepicker-day {
+    background: none;
+    color: var.$pr-blue-1;
+    font-weight: 700;
+
+    &:hover {
+      background: var.$pr-blue-2;
+      color: white;
+    }
+  }
+
+  .p-datepicker-day-selected {
+    background: var.$pr-blue-1;
+
+    &:hover {
+      background: var.$pr-blue-2;
+      color: white;
+    }
+  }
+
+  .p-datepicker-today > .p-datepicker-day-selected {
+    background: var.$pr-blue-1;
+    color: white;
+  }
+}
diff --git a/src/assets/styles/overrides/select.scss b/src/assets/styles/overrides/select.scss
new file mode 100644
index 000000000..7ec5107d2
--- /dev/null
+++ b/src/assets/styles/overrides/select.scss
@@ -0,0 +1,35 @@
+@use "assets/styles/variables" as var;
+@use "assets/styles/mixins" as mix;
+
+.p-select {
+  height: 3.125rem;
+  border: 1px solid var(--grey-2);
+  border-radius: 0.57rem;
+  outline: none;
+  font-size: 16px;
+  color: var.$dark-blue-1;
+
+  .p-select-label {
+    @include mix.flex-align-center;
+    width: 100%;
+    justify-content: center;
+    padding-left: 2.6rem;
+    font-weight: 700;
+  }
+
+  .p-select-option {
+    color: var.$dark-blue-1;
+
+    &:hover {
+      background: var.$bg-blue-3;
+    }
+
+    &.p-select-option-selected {
+      background: var.$bg-blue-2;
+    }
+
+    &.p-select-option-selected.p-focus {
+      background: var.$bg-blue-2;
+    }
+  }
+}
diff --git a/src/assets/styles/styles.scss b/src/assets/styles/styles.scss
index 8a09902d7..1fde6e6d3 100644
--- a/src/assets/styles/styles.scss
+++ b/src/assets/styles/styles.scss
@@ -19,7 +19,8 @@
 @use "./overrides/confirmation-dialog";
 @use "./overrides/input-group-addon";
 @use "./overrides/iconfield";
-
+@use "./overrides/datepicker";
+@use "./overrides/select";
 
 @layer base, primeng, reset;