From 269629be0ae27143f8f229d40a8606ca7f2ae864 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Thu, 28 Sep 2023 20:53:58 +0200
Subject: [PATCH] Add tabs

---
 .../user-account-access.html                  |  32 +-
 .../user-account-membership.component.ts      |   1 +
 .../user-account-membership.html              | 133 +++----
 .../user-account-settings.html                | 362 ++++++++----------
 .../user-account-page-routing.module.ts       |  20 +
 .../user-account-page.component.ts            |  40 +-
 .../pages/user-account/user-account-page.html |  39 +-
 .../user-account/user-account-page.module.ts  |   8 +-
 .../pages/user-account/user-account-page.scss |   4 +
 9 files changed, 336 insertions(+), 303 deletions(-)

diff --git a/apps/client/src/app/components/user-account-access/user-account-access.html b/apps/client/src/app/components/user-account-access/user-account-access.html
index 64667fe93..c3aa485cd 100644
--- a/apps/client/src/app/components/user-account-access/user-account-access.html
+++ b/apps/client/src/app/components/user-account-access/user-account-access.html
@@ -1,19 +1,17 @@
 <div class="container">
-  <div class="row">
-    <div class="col">
-      <h2 class="align-items-center d-flex h3 justify-content-center mb-3">
-        <span i18n>Granted Access</span>
-        <gf-premium-indicator
-          *ngIf="user?.subscription?.type === 'Basic'"
-          class="ml-1"
-        ></gf-premium-indicator>
-      </h2>
-      <gf-access-table
-        [accesses]="accesses"
-        [hasPermissionToCreateAccess]="hasPermissionToCreateAccess"
-        [showActions]="hasPermissionToDeleteAccess"
-        (accessDeleted)="onDeleteAccess($event)"
-      ></gf-access-table>
-    </div>
-  </div>
+  <h1
+    class="align-items-center d-none d-sm-flex h3 justify-content-center mb-3 text-center"
+  >
+    <span i18n>Granted Access</span>
+    <gf-premium-indicator
+      *ngIf="user?.subscription?.type === 'Basic'"
+      class="ml-1"
+    ></gf-premium-indicator>
+  </h1>
+  <gf-access-table
+    [accesses]="accesses"
+    [hasPermissionToCreateAccess]="hasPermissionToCreateAccess"
+    [showActions]="hasPermissionToDeleteAccess"
+    (accessDeleted)="onDeleteAccess($event)"
+  ></gf-access-table>
 </div>
diff --git a/apps/client/src/app/components/user-account-membership/user-account-membership.component.ts b/apps/client/src/app/components/user-account-membership/user-account-membership.component.ts
index 4428a3514..13d7495a9 100644
--- a/apps/client/src/app/components/user-account-membership/user-account-membership.component.ts
+++ b/apps/client/src/app/components/user-account-membership/user-account-membership.component.ts
@@ -34,6 +34,7 @@ export class UserAccountMembershipComponent implements OnDestroy, OnInit {
   public hasPermissionToUpdateUserSettings: boolean;
   public price: number;
   public priceId: string;
+  public routerLinkPricing = ['/' + $localize`pricing`];
   public snackBarRef: MatSnackBarRef<TextOnlySnackBar>;
   public trySubscriptionMail =
     'mailto:hi@ghostfol.io?Subject=Ghostfolio Premium Trial&body=Hello%0D%0DI am interested in Ghostfolio Premium. Can you please send me a coupon code to try it for some time?%0D%0DKind regards';
diff --git a/apps/client/src/app/components/user-account-membership/user-account-membership.html b/apps/client/src/app/components/user-account-membership/user-account-membership.html
index 808b793aa..1681e3e16 100644
--- a/apps/client/src/app/components/user-account-membership/user-account-membership.html
+++ b/apps/client/src/app/components/user-account-membership/user-account-membership.html
@@ -1,86 +1,69 @@
 <div class="container">
+  <h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Membership</h1>
   <div class="row">
     <div class="col">
-      <h2 class="h3 mb-3 text-center" i18n>Membership</h2>
-    </div>
-  </div>
-  <div *ngIf="user?.settings" class="mb-5 row">
-    <div class="col">
-      <mat-card appearance="outlined" class="mb-3">
-        <mat-card-content>
-          <div *ngIf="user?.subscription" class="d-flex py-1">
-            <div class="pr-1 w-50" i18n>Membership</div>
-            <div class="pl-1 w-50">
-              <div class="align-items-center d-flex mb-1">
-                <a [routerLink]="routerLinkPricing"
-                  >{{ user?.subscription?.type }}</a
+      <div class="d-flex">
+        <div class="mx-auto">
+          <div class="align-items-center d-flex mb-1">
+            <a [routerLink]="routerLinkPricing"
+              >{{ user?.subscription?.type }}</a
+            >
+            <gf-premium-indicator
+              *ngIf="user?.subscription?.type === 'Premium'"
+              class="ml-1"
+            ></gf-premium-indicator>
+          </div>
+          <div *ngIf="user?.subscription?.type === 'Premium'">
+            <ng-container i18n>Valid until</ng-container> {{
+            user?.subscription?.expiresAt | date: defaultDateFormat }}
+          </div>
+          <div *ngIf="user?.subscription?.type === 'Basic'">
+            <ng-container
+              *ngIf="hasPermissionForSubscription && hasPermissionToUpdateUserSettings"
+            >
+              <button color="primary" mat-flat-button (click)="onCheckout()">
+                <ng-container *ngIf="user.subscription.offer === 'default'" i18n
+                  >Upgrade</ng-container
                 >
-                <gf-premium-indicator
-                  *ngIf="user?.subscription?.type === 'Premium'"
-                  class="ml-1"
-                ></gf-premium-indicator>
-              </div>
-              <div *ngIf="user?.subscription?.type === 'Premium'">
-                <ng-container i18n>Valid until</ng-container> {{
-                user?.subscription?.expiresAt | date: defaultDateFormat }}
-              </div>
-              <div *ngIf="user?.subscription?.type === 'Basic'">
-                <ng-container
-                  *ngIf="hasPermissionForSubscription && hasPermissionToUpdateUserSettings"
+                <ng-container *ngIf="user.subscription.offer === 'renewal'" i18n
+                  >Renew</ng-container
                 >
-                  <button
-                    color="primary"
-                    mat-flat-button
-                    (click)="onCheckout()"
-                  >
-                    <ng-container
-                      *ngIf="user.subscription.offer === 'default'"
-                      i18n
-                      >Upgrade</ng-container
-                    >
-                    <ng-container
-                      *ngIf="user.subscription.offer === 'renewal'"
-                      i18n
-                      >Renew</ng-container
-                    >
-                  </button>
-                  <div *ngIf="price" class="mt-1">
-                    <ng-container *ngIf="coupon"
-                      ><del class="text-muted"
-                        >{{ baseCurrency }}&nbsp;{{ price }}</del
-                      >&nbsp;{{ baseCurrency }}&nbsp;{{ price - coupon
-                      }}</ng-container
-                    >
-                    <ng-container *ngIf="!coupon"
-                      >{{ baseCurrency }}&nbsp;{{ price }}</ng-container
-                    >&nbsp;<span i18n>per year</span>
-                  </div>
-                </ng-container>
-                <a
-                  *ngIf="!user?.subscription?.expiresAt"
-                  class="mr-2 my-2"
-                  mat-stroked-button
-                  [href]="trySubscriptionMail"
-                  ><span i18n>Try Premium</span>
-                  <gf-premium-indicator
-                    class="d-inline-block ml-1"
-                    [enableLink]="false"
-                  ></gf-premium-indicator
-                ></a>
-                <a
-                  *ngIf="hasPermissionToUpdateUserSettings"
-                  class="mr-2 my-2"
-                  i18n
-                  mat-stroked-button
-                  [routerLink]=""
-                  (click)="onRedeemCoupon()"
-                  >Redeem Coupon</a
+              </button>
+              <div *ngIf="price" class="mt-1">
+                <ng-container *ngIf="coupon"
+                  ><del class="text-muted"
+                    >{{ baseCurrency }}&nbsp;{{ price }}</del
+                  >&nbsp;{{ baseCurrency }}&nbsp;{{ price - coupon
+                  }}</ng-container
                 >
+                <ng-container *ngIf="!coupon"
+                  >{{ baseCurrency }}&nbsp;{{ price }}</ng-container
+                >&nbsp;<span i18n>per year</span>
               </div>
-            </div>
+            </ng-container>
+            <a
+              *ngIf="!user?.subscription?.expiresAt"
+              class="mr-2 my-2"
+              mat-stroked-button
+              [href]="trySubscriptionMail"
+              ><span i18n>Try Premium</span>
+              <gf-premium-indicator
+                class="d-inline-block ml-1"
+                [enableLink]="false"
+              ></gf-premium-indicator
+            ></a>
+            <a
+              *ngIf="hasPermissionToUpdateUserSettings"
+              class="mr-2 my-2"
+              i18n
+              mat-stroked-button
+              [routerLink]=""
+              (click)="onRedeemCoupon()"
+              >Redeem Coupon</a
+            >
           </div>
-        </mat-card-content>
-      </mat-card>
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/apps/client/src/app/components/user-account-settings/user-account-settings.html b/apps/client/src/app/components/user-account-settings/user-account-settings.html
index 2bf365bd4..12f3da458 100644
--- a/apps/client/src/app/components/user-account-settings/user-account-settings.html
+++ b/apps/client/src/app/components/user-account-settings/user-account-settings.html
@@ -1,221 +1,197 @@
 <div class="container">
+  <h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Settings</h1>
   <div class="row">
     <div class="col">
-      <h2 class="h3 mb-3 text-center" i18n>Settings</h2>
-    </div>
-  </div>
-  <div *ngIf="user?.settings" class="mb-5 row">
-    <div class="col">
-      <mat-card appearance="outlined" class="mb-3">
-        <mat-card-content>
-          <div class="align-items-center d-flex mt-4 py-1">
-            <div class="pr-1 w-50">
-              <div i18n>Presenter View</div>
-              <div class="hint-text text-muted" i18n>
-                Protection for sensitive information like absolute performances
-                and quantity values
-              </div>
+      <div class="align-items-center d-flex py-1">
+        <div class="pr-1 w-50">
+          <div i18n>Presenter View</div>
+          <div class="hint-text text-muted" i18n>
+            Protection for sensitive information like absolute performances and
+            quantity values
+          </div>
+        </div>
+        <div class="pl-1 w-50">
+          <mat-checkbox
+            color="primary"
+            [checked]="user.settings.isRestrictedView"
+            [disabled]="!hasPermissionToUpdateUserSettings"
+            (change)="onRestrictedViewChange($event)"
+          ></mat-checkbox>
+        </div>
+      </div>
+      <div class="d-flex mt-4 py-1">
+        <form #changeUserSettingsForm="ngForm" class="w-100">
+          <div class="d-flex mb-2">
+            <div class="align-items-center d-flex pt-1 pt-1 w-50">
+              <ng-container i18n>Base Currency</ng-container>
             </div>
             <div class="pl-1 w-50">
-              <mat-checkbox
-                color="primary"
-                [checked]="user.settings.isRestrictedView"
-                [disabled]="!hasPermissionToUpdateUserSettings"
-                (change)="onRestrictedViewChange($event)"
-              ></mat-checkbox>
+              <mat-form-field appearance="outline" class="w-100 without-hint">
+                <mat-select
+                  name="baseCurrency"
+                  [disabled]="!hasPermissionToUpdateUserSettings"
+                  [value]="user.settings.baseCurrency"
+                  (selectionChange)="onChangeUserSetting('baseCurrency', $event.value)"
+                >
+                  <mat-option
+                    *ngFor="let currency of currencies"
+                    [value]="currency"
+                    >{{ currency }}</mat-option
+                  >
+                </mat-select>
+              </mat-form-field>
             </div>
           </div>
-          <div class="d-flex mt-4 py-1">
-            <form #changeUserSettingsForm="ngForm" class="w-100">
-              <div class="d-flex mb-2">
-                <div class="align-items-center d-flex pt-1 pt-1 w-50">
-                  <ng-container i18n>Base Currency</ng-container>
-                </div>
-                <div class="pl-1 w-50">
-                  <mat-form-field
-                    appearance="outline"
-                    class="w-100 without-hint"
+          <div class="align-items-center d-flex mb-2">
+            <div class="pr-1 w-50">
+              <div i18n>Language</div>
+            </div>
+            <div class="pl-1 w-50">
+              <mat-form-field appearance="outline" class="w-100 without-hint">
+                <mat-select
+                  name="language"
+                  [disabled]="!hasPermissionToUpdateUserSettings"
+                  [value]="language"
+                  (selectionChange)="onChangeUserSetting('language', $event.value)"
+                >
+                  <mat-option [value]="null"></mat-option>
+                  <mat-option value="de">Deutsch</mat-option>
+                  <mat-option value="en">English</mat-option>
+                  <mat-option value="es"
+                    >Español (<ng-container i18n>Community</ng-container
+                    >)</mat-option
                   >
-                    <mat-select
-                      name="baseCurrency"
-                      [disabled]="!hasPermissionToUpdateUserSettings"
-                      [value]="user.settings.baseCurrency"
-                      (selectionChange)="onChangeUserSetting('baseCurrency', $event.value)"
-                    >
-                      <mat-option
-                        *ngFor="let currency of currencies"
-                        [value]="currency"
-                        >{{ currency }}</mat-option
-                      >
-                    </mat-select>
-                  </mat-form-field>
-                </div>
-              </div>
-              <div class="align-items-center d-flex mb-2">
-                <div class="pr-1 w-50">
-                  <div i18n>Language</div>
-                </div>
-                <div class="pl-1 w-50">
-                  <mat-form-field
-                    appearance="outline"
-                    class="w-100 without-hint"
+                  <mat-option value="fr"
+                    >Français (<ng-container i18n>Community</ng-container
+                    >)</mat-option
                   >
-                    <mat-select
-                      name="language"
-                      [disabled]="!hasPermissionToUpdateUserSettings"
-                      [value]="language"
-                      (selectionChange)="onChangeUserSetting('language', $event.value)"
-                    >
-                      <mat-option [value]="null"></mat-option>
-                      <mat-option value="de">Deutsch</mat-option>
-                      <mat-option value="en">English</mat-option>
-                      <mat-option value="es"
-                        >Español (<ng-container i18n>Community</ng-container
-                        >)</mat-option
-                      >
-                      <mat-option value="fr"
-                        >Français (<ng-container i18n>Community</ng-container
-                        >)</mat-option
-                      >
-                      <mat-option value="it"
-                        >Italiano (<ng-container i18n>Community</ng-container
-                        >)</mat-option
-                      >
-                      <mat-option value="nl"
-                        >Nederlands (<ng-container i18n>Community</ng-container
-                        >)</mat-option
-                      >
-                      <mat-option value="pt"
-                        >Português (<ng-container i18n>Community</ng-container
-                        >)</mat-option
-                      >
-                      <mat-option value="tr"
-                        >Türkçe (<ng-container i18n>Community</ng-container
-                        >)</mat-option
-                      >
-                    </mat-select>
-                  </mat-form-field>
-                </div>
-              </div>
-              <div class="align-items-center d-flex mb-2">
-                <div class="pr-1 w-50">
-                  <div i18n>Locale</div>
-                  <div class="hint-text text-muted">
-                    <ng-container i18n>Date and number format</ng-container>
-                  </div>
-                </div>
-                <div class="pl-1 w-50">
-                  <mat-form-field
-                    appearance="outline"
-                    class="w-100 without-hint"
+                  <mat-option value="it"
+                    >Italiano (<ng-container i18n>Community</ng-container
+                    >)</mat-option
                   >
-                    <mat-select
-                      name="locale"
-                      [disabled]="!hasPermissionToUpdateUserSettings"
-                      [value]="user.settings.locale"
-                      (selectionChange)="onChangeUserSetting('locale', $event.value)"
-                    >
-                      <mat-option [value]="null"></mat-option>
-                      <mat-option
-                        *ngFor="let locale of locales"
-                        [value]="locale"
-                        >{{ locale }}</mat-option
-                      >
-                    </mat-select>
-                  </mat-form-field>
-                </div>
-              </div>
-              <div class="d-flex">
-                <div class="align-items-center d-flex pr-1 pt-1 w-50">
-                  <ng-container i18n>Appearance</ng-container>
-                </div>
-                <div class="pl-1 w-50">
-                  <mat-form-field
-                    appearance="outline"
-                    class="w-100 without-hint"
+                  <mat-option value="nl"
+                    >Nederlands (<ng-container i18n>Community</ng-container
+                    >)</mat-option
                   >
-                    <mat-select
-                      class="with-placeholder-as-option"
-                      name="colorScheme"
-                      [disabled]="!hasPermissionToUpdateUserSettings"
-                      [placeholder]="appearancePlaceholder"
-                      [value]="user?.settings?.colorScheme"
-                      (selectionChange)="onChangeUserSetting('colorScheme', $event.value)"
-                    >
-                      <mat-option i18n [value]="null">Auto</mat-option>
-                      <mat-option i18n value="LIGHT">Light</mat-option>
-                      <mat-option i18n value="DARK">Dark</mat-option>
-                    </mat-select>
-                  </mat-form-field>
-                </div>
-              </div>
-            </form>
-          </div>
-          <div class="d-flex mt-4 py-1">
-            <div class="pr-1 w-50">
-              <div i18n>Zen Mode</div>
-              <div class="hint-text text-muted" i18n>
-                Distraction-free experience for turbulent times
-              </div>
-            </div>
-            <div class="pl-1 w-50">
-              <mat-checkbox
-                color="primary"
-                [checked]="user.settings.viewMode === 'ZEN'"
-                [disabled]="!hasPermissionToUpdateViewMode"
-                (change)="onViewModeChange($event)"
-              ></mat-checkbox>
+                  <mat-option value="pt"
+                    >Português (<ng-container i18n>Community</ng-container
+                    >)</mat-option
+                  >
+                  <mat-option value="tr"
+                    >Türkçe (<ng-container i18n>Community</ng-container
+                    >)</mat-option
+                  >
+                </mat-select>
+              </mat-form-field>
             </div>
           </div>
-          <div class="align-items-center d-flex mt-4 py-1">
+          <div class="align-items-center d-flex mb-2">
             <div class="pr-1 w-50">
-              <div i18n>Biometric Authentication</div>
-              <div class="hint-text text-muted" i18n>
-                Sign in with fingerprint
+              <div i18n>Locale</div>
+              <div class="hint-text text-muted">
+                <ng-container i18n>Date and number format</ng-container>
               </div>
             </div>
             <div class="pl-1 w-50">
-              <mat-checkbox
-                #toggleSignInWithFingerprintEnabledElement
-                color="primary"
-                [disabled]="!hasPermissionToUpdateUserSettings"
-                (change)="onSignInWithFingerprintChange($event)"
-              ></mat-checkbox>
+              <mat-form-field appearance="outline" class="w-100 without-hint">
+                <mat-select
+                  name="locale"
+                  [disabled]="!hasPermissionToUpdateUserSettings"
+                  [value]="user.settings.locale"
+                  (selectionChange)="onChangeUserSetting('locale', $event.value)"
+                >
+                  <mat-option [value]="null"></mat-option>
+                  <mat-option *ngFor="let locale of locales" [value]="locale"
+                    >{{ locale }}</mat-option
+                  >
+                </mat-select>
+              </mat-form-field>
             </div>
           </div>
-          <div
-            *ngIf="hasPermissionToUpdateUserSettings"
-            class="align-items-center d-flex mt-4 py-1"
-          >
-            <div class="pr-1 w-50">
-              <div i18n>Experimental Features</div>
-              <div class="hint-text text-muted" i18n>
-                Sneak peek at upcoming functionality
-              </div>
+          <div class="d-flex">
+            <div class="align-items-center d-flex pr-1 pt-1 w-50">
+              <ng-container i18n>Appearance</ng-container>
             </div>
             <div class="pl-1 w-50">
-              <mat-checkbox
-                color="primary"
-                [checked]="user.settings.isExperimentalFeatures"
-                [disabled]="!hasPermissionToUpdateUserSettings"
-                (change)="onExperimentalFeaturesChange($event)"
-              ></mat-checkbox>
+              <mat-form-field appearance="outline" class="w-100 without-hint">
+                <mat-select
+                  class="with-placeholder-as-option"
+                  name="colorScheme"
+                  [disabled]="!hasPermissionToUpdateUserSettings"
+                  [placeholder]="appearancePlaceholder"
+                  [value]="user?.settings?.colorScheme"
+                  (selectionChange)="onChangeUserSetting('colorScheme', $event.value)"
+                >
+                  <mat-option i18n [value]="null">Auto</mat-option>
+                  <mat-option i18n value="LIGHT">Light</mat-option>
+                  <mat-option i18n value="DARK">Dark</mat-option>
+                </mat-select>
+              </mat-form-field>
             </div>
           </div>
-          <div class="align-items-center d-flex mt-4 py-1">
-            <div class="pr-1 w-50" i18n>User ID</div>
-            <div class="pl-1 text-monospace w-50">{{ user?.id }}</div>
+        </form>
+      </div>
+      <div class="d-flex mt-4 py-1">
+        <div class="pr-1 w-50">
+          <div i18n>Zen Mode</div>
+          <div class="hint-text text-muted" i18n>
+            Distraction-free experience for turbulent times
           </div>
-          <div class="align-items-center d-flex py-1">
-            <div class="pr-1 w-50"></div>
-            <div class="pl-1 text-monospace w-50">
-              <button color="primary" mat-flat-button (click)="onExport()">
-                <span i18n>Export Data</span>
-              </button>
-            </div>
+        </div>
+        <div class="pl-1 w-50">
+          <mat-checkbox
+            color="primary"
+            [checked]="user.settings.viewMode === 'ZEN'"
+            [disabled]="!hasPermissionToUpdateViewMode"
+            (change)="onViewModeChange($event)"
+          ></mat-checkbox>
+        </div>
+      </div>
+      <div class="align-items-center d-flex mt-4 py-1">
+        <div class="pr-1 w-50">
+          <div i18n>Biometric Authentication</div>
+          <div class="hint-text text-muted" i18n>Sign in with fingerprint</div>
+        </div>
+        <div class="pl-1 w-50">
+          <mat-checkbox
+            #toggleSignInWithFingerprintEnabledElement
+            color="primary"
+            [disabled]="!hasPermissionToUpdateUserSettings"
+            (change)="onSignInWithFingerprintChange($event)"
+          ></mat-checkbox>
+        </div>
+      </div>
+      <div
+        *ngIf="hasPermissionToUpdateUserSettings"
+        class="align-items-center d-flex mt-4 py-1"
+      >
+        <div class="pr-1 w-50">
+          <div i18n>Experimental Features</div>
+          <div class="hint-text text-muted" i18n>
+            Sneak peek at upcoming functionality
           </div>
-        </mat-card-content>
-      </mat-card>
+        </div>
+        <div class="pl-1 w-50">
+          <mat-checkbox
+            color="primary"
+            [checked]="user.settings.isExperimentalFeatures"
+            [disabled]="!hasPermissionToUpdateUserSettings"
+            (change)="onExperimentalFeaturesChange($event)"
+          ></mat-checkbox>
+        </div>
+      </div>
+      <div class="align-items-center d-flex mt-4 py-1">
+        <div class="pr-1 w-50" i18n>User ID</div>
+        <div class="pl-1 text-monospace w-50">{{ user?.id }}</div>
+      </div>
+      <div class="align-items-center d-flex py-1">
+        <div class="pr-1 w-50"></div>
+        <div class="pl-1 text-monospace w-50">
+          <button color="primary" mat-flat-button (click)="onExport()">
+            <span i18n>Export Data</span>
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/apps/client/src/app/pages/user-account/user-account-page-routing.module.ts b/apps/client/src/app/pages/user-account/user-account-page-routing.module.ts
index f52591d21..568095009 100644
--- a/apps/client/src/app/pages/user-account/user-account-page-routing.module.ts
+++ b/apps/client/src/app/pages/user-account/user-account-page-routing.module.ts
@@ -1,5 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { UserAccountAccessComponent } from '@ghostfolio/client/components/user-account-access/user-account-access.component';
+import { UserAccountMembershipComponent } from '@ghostfolio/client/components/user-account-membership/user-account-membership.component';
+import { UserAccountSettingsComponent } from '@ghostfolio/client/components/user-account-settings/user-account-settings.component';
 import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 
 import { UserAccountPageComponent } from './user-account-page.component';
@@ -7,6 +10,23 @@ import { UserAccountPageComponent } from './user-account-page.component';
 const routes: Routes = [
   {
     canActivate: [AuthGuard],
+    children: [
+      {
+        path: '',
+        component: UserAccountSettingsComponent,
+        title: $localize`Settings`
+      },
+      {
+        path: 'membership',
+        component: UserAccountMembershipComponent,
+        title: $localize`Membership`
+      },
+      {
+        path: 'access',
+        component: UserAccountAccessComponent,
+        title: $localize`Access`
+      }
+    ],
     component: UserAccountPageComponent,
     path: '',
     title: $localize`My Ghostfolio`
diff --git a/apps/client/src/app/pages/user-account/user-account-page.component.ts b/apps/client/src/app/pages/user-account/user-account-page.component.ts
index 25c2e60d7..970dadd6a 100644
--- a/apps/client/src/app/pages/user-account/user-account-page.component.ts
+++ b/apps/client/src/app/pages/user-account/user-account-page.component.ts
@@ -1,30 +1,60 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
-import { User } from '@ghostfolio/common/interfaces';
+import { TabConfiguration, User } from '@ghostfolio/common/interfaces';
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-  host: { class: 'page' },
+  host: { class: 'page has-tabs' },
   selector: 'gf-user-account-page',
   styleUrls: ['./user-account-page.scss'],
   templateUrl: './user-account-page.html'
 })
 export class UserAccountPageComponent implements OnDestroy, OnInit {
+  public deviceType: string;
+  public tabs: TabConfiguration[] = [];
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor(private userService: UserService) {
+  public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private deviceService: DeviceDetectorService,
+    private userService: UserService
+  ) {
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((state) => {
         if (state?.user) {
           this.user = state.user;
+
+          this.tabs = [
+            {
+              iconName: 'cog-outline',
+              label: $localize`Settings`,
+              path: ['/account']
+            },
+            {
+              iconName: 'diamond-outline',
+              label: $localize`Membership`,
+              path: ['/account/membership'],
+              showCondition: !!this.user?.subscription
+            },
+            {
+              iconName: 'share-social-outline',
+              label: $localize`Access`,
+              path: ['/account', 'access']
+            }
+          ];
+
+          this.changeDetectorRef.markForCheck();
         }
       });
   }
 
-  public ngOnInit() {}
+  public ngOnInit() {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+  }
 
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
diff --git a/apps/client/src/app/pages/user-account/user-account-page.html b/apps/client/src/app/pages/user-account/user-account-page.html
index d1195f690..d3fbca534 100644
--- a/apps/client/src/app/pages/user-account/user-account-page.html
+++ b/apps/client/src/app/pages/user-account/user-account-page.html
@@ -1,10 +1,29 @@
-<div class="container">
-  <div class="row">
-    <div class="col">
-      <h2 class="h3 mb-3 text-center" i18n>Account</h2>
-      <gf-user-account-membership *ngIf="user?.subscription" />
-      <gf-user-account-settings />
-      <gf-user-account-access />
-    </div>
-  </div>
-</div>
+<mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
+  <router-outlet></router-outlet>
+</mat-tab-nav-panel>
+
+<nav
+  mat-align-tabs="center"
+  mat-tab-nav-bar
+  [disablePagination]="true"
+  [tabPanel]="tabPanel"
+>
+  <ng-container *ngFor="let tab of tabs">
+    <a
+      #rla="routerLinkActive"
+      *ngIf="tab.showCondition !== false"
+      class="px-3"
+      mat-tab-link
+      routerLinkActive
+      [active]="rla.isActive"
+      [routerLink]="tab.path"
+      [routerLinkActiveOptions]="{ exact: true }"
+    >
+      <ion-icon
+        [name]="tab.iconName"
+        [size]="deviceType === 'mobile' ? 'large': 'small'"
+      ></ion-icon>
+      <div class="d-none d-sm-block ml-2">{{ tab.label }}</div>
+    </a>
+  </ng-container>
+</nav>
diff --git a/apps/client/src/app/pages/user-account/user-account-page.module.ts b/apps/client/src/app/pages/user-account/user-account-page.module.ts
index 97cc82003..3c6670af4 100644
--- a/apps/client/src/app/pages/user-account/user-account-page.module.ts
+++ b/apps/client/src/app/pages/user-account/user-account-page.module.ts
@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { MatTabsModule } from '@angular/material/tabs';
+import { GfUserAccountAccessModule } from '@ghostfolio/client/components/user-account-access/user-account-access.module';
+import { GfUserAccountMembershipModule } from '@ghostfolio/client/components/user-account-membership/user-account-membership.module';
+import { GfUserAccountSettingsModule } from '@ghostfolio/client/components/user-account-settings/user-account-settings.module';
 
 import { UserAccountPageRoutingModule } from './user-account-page-routing.module';
 import { UserAccountPageComponent } from './user-account-page.component';
-import { GfUserAccountSettingsModule } from '@ghostfolio/client/components/user-account-settings/user-account-settings.module';
-import { GfUserAccountAccessModule } from '@ghostfolio/client/components/user-account-access/user-account-access.module';
-import { GfUserAccountMembershipModule } from '@ghostfolio/client/components/user-account-membership/user-account-membership.module';
 
 @NgModule({
   declarations: [UserAccountPageComponent],
@@ -14,6 +15,7 @@ import { GfUserAccountMembershipModule } from '@ghostfolio/client/components/use
     GfUserAccountAccessModule,
     GfUserAccountMembershipModule,
     GfUserAccountSettingsModule,
+    MatTabsModule,
     UserAccountPageRoutingModule
   ]
 })
diff --git a/apps/client/src/app/pages/user-account/user-account-page.scss b/apps/client/src/app/pages/user-account/user-account-page.scss
index 705139659..6a0b74854 100644
--- a/apps/client/src/app/pages/user-account/user-account-page.scss
+++ b/apps/client/src/app/pages/user-account/user-account-page.scss
@@ -1,5 +1,9 @@
+@import 'apps/client/src/styles/ghostfolio-style';
+
 :host {
+  color: rgb(var(--dark-primary-text));
 }
 
 :host-context(.is-dark-theme) {
+  color: rgb(var(--light-primary-text));
 }