diff --git a/src/app/modules/about/about-changelog.component.ts b/src/app/modules/about/about-changelog.component.ts
index d5c62655..56adf4e6 100644
--- a/src/app/modules/about/about-changelog.component.ts
+++ b/src/app/modules/about/about-changelog.component.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2021 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -18,6 +18,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'about-changelog',
   templateUrl: 'about-changelog.html',
-  styleUrls: ['about-changelog.scss'],
+  styleUrls: ['about-changelog.scss', './about-page/about-page.scss'],
 })
 export class AboutChangelogComponent {}
diff --git a/src/app/modules/about/about-changelog.html b/src/app/modules/about/about-changelog.html
index fae21138..e0f1aa09 100644
--- a/src/app/modules/about/about-changelog.html
+++ b/src/app/modules/about/about-changelog.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (C) 2021 StApps
+  ~ Copyright (C) 2023 StApps
   ~ This program is free software: you can redistribute it and/or modify it
   ~ under the terms of the GNU General Public License as published by the Free
   ~ Software Foundation, version 3.
@@ -22,6 +22,10 @@
     <!-- TODO: translation -->
   </ion-toolbar>
 </ion-header>
-<ion-content>
-  <markdown src="assets/about/CHANGELOG.md"></markdown>
+<ion-content class="ion-content-parallax">
+  <div>
+    <div class="about-changelog">
+      <markdown src="assets/about/CHANGELOG.md"></markdown>
+    </div>
+  </div>
 </ion-content>
diff --git a/src/app/modules/about/about-licenses.component.ts b/src/app/modules/about/about-licenses.component.ts
index 48be4fc9..79bab44d 100644
--- a/src/app/modules/about/about-licenses.component.ts
+++ b/src/app/modules/about/about-licenses.component.ts
@@ -1,16 +1,16 @@
 /*
- * Copyright (C) 2022 StApps
- *  This program is free software: you can redistribute it and/or modify it
- *  under the terms of the GNU General Public License as published by the Free
- *  Software Foundation, version 3.
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
  *
- *  This program is distributed in the hope that it will be useful, but WITHOUT
- *  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- *  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- *  more details.
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
  *
- *  You should have received a copy of the GNU General Public License along with
- *  this program. If not, see <https://www.gnu.org/licenses/>.
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component, OnInit} from '@angular/core';
 import {ModalController} from '@ionic/angular';
@@ -31,7 +31,7 @@ export interface License {
 @Component({
   selector: 'about-changelog',
   templateUrl: 'about-licenses.html',
-  styleUrls: ['about-licenses.scss'],
+  styleUrls: ['about-licenses.scss', './about-page/about-page.scss'],
 })
 export class AboutLicensesComponent implements OnInit {
   licenses: License[];
diff --git a/src/app/modules/about/about-licenses.html b/src/app/modules/about/about-licenses.html
index e001a6d5..9b5b2612 100644
--- a/src/app/modules/about/about-licenses.html
+++ b/src/app/modules/about/about-licenses.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2023 StApps
   ~ This program is free software: you can redistribute it and/or modify it
   ~ under the terms of the GNU General Public License as published by the Free
   ~ Software Foundation, version 3.
@@ -22,28 +22,32 @@
     <!-- TODO: translation -->
   </ion-toolbar>
 </ion-header>
-<cdk-virtual-scroll-viewport itemSize="130" minBufferPx="1500" maxBufferPx="2000">
-  <ion-card
-    *cdkVirtualFor="let license of licenses"
-    [href]="license.url || license.repository"
-    rel="external"
-    target="_blank"
-  >
-    <ion-card-header>
-      <ion-card-title>
-        {{ license.name }}
-        <ion-icon size="16" weight="300" class="supertext-icon" name="open_in_browser"></ion-icon>
-      </ion-card-title>
+<ion-content class="ion-content-parallax">
+  <div>
+    <div class="licenses-content">
+      <ion-card
+        *ngFor="let license of licenses"
+        [href]="license.url || license.repository"
+        rel="external"
+        target="_blank"
+      >
+        <ion-card-header>
+          <ion-card-title>
+            {{ license.name }}
+            <ion-icon size="16" weight="300" class="supertext-icon" name="open_in_browser"></ion-icon>
+          </ion-card-title>
 
-      <ion-card-subtitle *ngIf="license.authors || license.publisher">
-        {{ license.authors || license.publisher }}
-      </ion-card-subtitle>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-chip (click)="$event.preventDefault(); viewLicense(license)">
-        <ion-icon name="copyright"></ion-icon>
-        <ion-label>{{ license.licenses }} License</ion-label>
-      </ion-chip>
-    </ion-card-content>
-  </ion-card>
-</cdk-virtual-scroll-viewport>
+          <ion-card-subtitle *ngIf="license.authors || license.publisher">
+            {{ license.authors || license.publisher }}
+          </ion-card-subtitle>
+        </ion-card-header>
+        <ion-card-content>
+          <ion-chip (click)="$event.preventDefault(); viewLicense(license)">
+            <ion-icon name="copyright"></ion-icon>
+            <ion-label>{{ license.licenses }} License</ion-label>
+          </ion-chip>
+        </ion-card-content>
+      </ion-card>
+    </div>
+  </div>
+</ion-content>
diff --git a/src/app/modules/about/about-licenses.scss b/src/app/modules/about/about-licenses.scss
index 07ce2ede..00c9e63c 100644
--- a/src/app/modules/about/about-licenses.scss
+++ b/src/app/modules/about/about-licenses.scss
@@ -1,18 +1,22 @@
 /*!
- * Copyright (C) 2022 StApps
- *  This program is free software: you can redistribute it and/or modify it
- *  under the terms of the GNU General Public License as published by the Free
- *  Software Foundation, version 3.
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
  *
- *  This program is distributed in the hope that it will be useful, but WITHOUT
- *  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- *  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- *  more details.
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
  *
- *  You should have received a copy of the GNU General Public License along with
- *  this program. If not, see <https://www.gnu.org/licenses/>.
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
+ion-content > div {
+  height: 100%;
+}
+
 cdk-virtual-scroll-viewport {
   height: 100%;
   width: 100%;
diff --git a/src/app/modules/about/about-page/about-page-content.scss b/src/app/modules/about/about-page/about-page-content.scss
index 40ab8523..bc381711 100644
--- a/src/app/modules/about/about-page/about-page-content.scss
+++ b/src/app/modules/about/about-page/about-page-content.scss
@@ -1,5 +1,5 @@
 /*!
- * Copyright (C) 2021 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
diff --git a/src/app/modules/about/about-page/about-page.html b/src/app/modules/about/about-page/about-page.html
index 7c6e0f3a..3a4cc926 100644
--- a/src/app/modules/about/about-page/about-page.html
+++ b/src/app/modules/about/about-page/about-page.html
@@ -24,7 +24,11 @@
     </ng-template>
   </ion-toolbar>
 </ion-header>
-<ion-content *ngIf="content">
-  <ion-text color="primary">{{ appName }} v{{ version }}</ion-text>
-  <about-page-content *ngFor="let element of content.content" [content]="element"></about-page-content>
+<ion-content *ngIf="content" class="ion-content-parallax">
+  <div>
+    <ion-text color="light">{{ appName }} v{{ version }}</ion-text>
+    <div class="page-content">
+      <about-page-content *ngFor="let element of content.content" [content]="element"></about-page-content>
+    </div>
+  </div>
 </ion-content>
diff --git a/src/app/modules/about/about-page/about-page.scss b/src/app/modules/about/about-page/about-page.scss
index 2fd45777..a6e50828 100644
--- a/src/app/modules/about/about-page/about-page.scss
+++ b/src/app/modules/about/about-page/about-page.scss
@@ -1,5 +1,5 @@
 /*!
- * Copyright (C) 2021 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -12,8 +12,80 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
+@import 'src/theme/util/_mixins.scss';
 
-ion-content {
-  --padding-start: 8px;
-  --padding-top: 8px;
+ion-text {
+  margin-inline: var(--spacing-md);
+}
+
+:host ::ng-deep {
+  ion-card {
+    margin: 0;
+    box-shadow: none;
+    ion-card-content {
+      h1 {
+        margin: 0;
+      }
+      padding-bottom: 8px;
+    }
+    ion-card-header {
+      color: var(--ion-color-dark);
+      padding-top: 8px;
+      padding-bottom: 4px;
+      font-weight: bold;
+    }
+    ion-grid,
+    ion-col {
+      padding-inline-start: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+  ion-grid,
+  ion-col {
+    padding-inline-start: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  p,
+  h3,
+  h2,
+  h1 {
+    margin-inline: var(--spacing-md);
+  }
+
+  .about-changelog,
+  .licenses-content,
+  .page-content {
+    margin: var(--spacing-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    background: var(--ion-color-primary-contrast);
+    &.licenses-content {
+      background: var(--ion-color-light);
+    }
+
+    padding-block-end: var(--spacing-md);
+    @include border-radius-in-parallax(var(--border-radius-default));
+
+    & > * {
+      ion-card-subtitle {
+        font-size: var(--font-size-lg);
+        color: var(--ion-color-light-contrast);
+      }
+
+      display: block;
+      @include border-radius-in-parallax(var(--border-radius-default));
+      overflow: hidden;
+      position: relative;
+      background-color: var(--ion-color-primary-contrast);
+      margin: 0;
+
+      & > ion-thumbnail {
+        background: var(--ion-color-primary);
+      }
+    }
+  }
 }
diff --git a/src/app/modules/data/data.module.ts b/src/app/modules/data/data.module.ts
index 6c28d405..0b776138 100644
--- a/src/app/modules/data/data.module.ts
+++ b/src/app/modules/data/data.module.ts
@@ -227,6 +227,7 @@ import {browserFactory, SimpleBrowser} from '../../util/browser.factory';
     ArticleContentComponent,
     BookDetailContentComponent,
     PeriodicalDetailContentComponent,
+    TitleCardComponent,
   ],
 })
 export class DataModule {}
diff --git a/src/app/modules/feedback/feedback-page.html b/src/app/modules/feedback/feedback-page.html
index 7a45a7ba..280adf40 100644
--- a/src/app/modules/feedback/feedback-page.html
+++ b/src/app/modules/feedback/feedback-page.html
@@ -21,83 +21,107 @@
     <ion-title>{{ 'feedback.page.TITLE' | translate }}</ion-title>
   </ion-toolbar>
 </ion-header>
-<ion-content>
-  <form #feedbackForm="ngForm" (ngSubmit)="onSubmit()">
-    <ion-item>
-      <ion-label position="stacked">{{ 'feedback.form.name.label' | translate }}</ion-label>
-      <ion-input
-        placeholder="{{ 'feedback.form.name.placeholder' | translate }}"
-        [(ngModel)]="author.name"
-        name="name"
-      ></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label position="stacked">{{ 'feedback.form.type.label' | translate }}</ion-label>
-      <ion-select [(ngModel)]="message.name" value="comment" name="title" interface="popover" required="true">
-        <ion-select-option value="Comment">{{
-          'feedback.form.type.values.comment' | translate
-        }}</ion-select-option>
-        <ion-select-option value="Bug">{{ 'feedback.form.type.values.bug' | translate }}</ion-select-option>
-      </ion-select>
-    </ion-item>
-    <ion-item>
-      <ion-label position="stacked">{{ 'feedback.form.email.label' | translate }}</ion-label>
-      <ion-input
-        placeholder="{{ 'feedback.form.email.placeholder' | translate }}"
-        [(ngModel)]="author.email"
-        type="email"
-        name="email"
-        ngModel
-        email
-      ></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label position="stacked">{{ 'feedback.form.message.label' | translate }}</ion-label>
-      <ion-textarea
-        [(ngModel)]="message.messageBody"
-        placeholder="{{ 'feedback.form.message.placeholder' | translate: {number: MINIMUM_MESSAGE_SIZE} }}"
-        name="message"
-        required="true"
-        minlength="{{ MINIMUM_MESSAGE_SIZE }}"
-        autoGrow="true"
-      ></ion-textarea>
-    </ion-item>
-    <ion-item>
-      <ion-label class="ion-text-wrap"
-        >{{ 'feedback.form.termsAgree.0' | translate }}
-        <a [routerLink]="['/about/privacy']">{{ 'feedback.form.termsAgree.1' | translate }}</a
-        >.</ion-label
-      >
-      <ion-checkbox color="primary" slot="start" [(ngModel)]="termsAgree" name="termsAgree"></ion-checkbox>
-    </ion-item>
-    <ion-item>
-      <ion-label class="ion-text-wrap">{{ 'feedback.form.protocolDataAgree' | translate }}</ion-label>
-      <ion-checkbox
-        color="primary"
-        slot="start"
-        [(ngModel)]="protocolDataAgree"
-        name="protocolDataAgree"
-      ></ion-checkbox>
-    </ion-item>
-    <ion-card>
-      <ion-card-title>
-        <ion-button expand="block" fill="clear" (click)="toggleShowMetaData()">
-          <ng-container *ngIf="!showMetaData; else hide">{{
-            'feedback.form.protocolData.show' | translate
-          }}</ng-container>
-          <ng-template #hide>{{ 'feedback.form.protocolData.hide' | translate }}</ng-template>
-        </ion-button>
-      </ion-card-title>
-      <ion-card-content *ngIf="metaData && showMetaData">
-        <pre>{{ metaData | json }}</pre>
-      </ion-card-content>
-    </ion-card>
-    <ion-button
-      type="submit"
-      color="primary"
-      expand="block"
-      [disabled]="!feedbackForm.valid || !termsAgree || submitSuccess"
-      >{{ 'feedback.form.submit' | translate }}</ion-button
-    >
-  </form>
+<ion-content class="ion-content-parallax">
+  <div>
+    <div class="feedback-content">
+      <ion-card>
+        <form #feedbackForm="ngForm" (ngSubmit)="onSubmit()">
+          <ion-item>
+            <ion-label position="stacked">{{ 'feedback.form.name.label' | translate }}</ion-label>
+            <ion-input
+              placeholder="{{ 'feedback.form.name.placeholder' | translate }}"
+              [(ngModel)]="author.name"
+              name="name"
+            ></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-label position="stacked">{{ 'feedback.form.type.label' | translate }}</ion-label>
+            <ion-select
+              [(ngModel)]="message.name"
+              value="comment"
+              name="title"
+              interface="popover"
+              required="true"
+            >
+              <ion-select-option value="Comment">{{
+                'feedback.form.type.values.comment' | translate
+              }}</ion-select-option>
+              <ion-select-option value="Bug">{{
+                'feedback.form.type.values.bug' | translate
+              }}</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item>
+            <ion-label position="stacked">{{ 'feedback.form.email.label' | translate }}</ion-label>
+            <ion-input
+              placeholder="{{ 'feedback.form.email.placeholder' | translate }}"
+              [(ngModel)]="author.email"
+              type="email"
+              name="email"
+              ngModel
+              email
+            ></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-label position="stacked">{{ 'feedback.form.message.label' | translate }}</ion-label>
+            <ion-textarea
+              [(ngModel)]="message.messageBody"
+              placeholder="{{
+                'feedback.form.message.placeholder' | translate: {number: MINIMUM_MESSAGE_SIZE}
+              }}"
+              name="message"
+              required="true"
+              minlength="{{ MINIMUM_MESSAGE_SIZE }}"
+              autoGrow="true"
+            ></ion-textarea>
+          </ion-item>
+          <ion-item>
+            <ion-label class="ion-text-wrap">{{ 'feedback.form.termsAgree.0' | translate }} </ion-label>
+            <ion-checkbox
+              color="primary"
+              slot="start"
+              [(ngModel)]="termsAgree"
+              name="termsAgree"
+            ></ion-checkbox>
+          </ion-item>
+          <ion-item lines="none">
+            <ion-label
+              ><a style="display: contents" [routerLink]="['/about/privacy']">{{
+                'feedback.form.termsAgree.1' | translate
+              }}</a></ion-label
+            >
+          </ion-item>
+          <ion-item>
+            <ion-label class="ion-text-wrap">{{ 'feedback.form.protocolDataAgree' | translate }}</ion-label>
+            <ion-checkbox
+              color="primary"
+              slot="start"
+              [(ngModel)]="protocolDataAgree"
+              name="protocolDataAgree"
+            ></ion-checkbox>
+          </ion-item>
+          <ion-card>
+            <ion-card-title>
+              <ion-button expand="block" fill="clear" (click)="toggleShowMetaData()">
+                <ng-container *ngIf="!showMetaData; else hide">{{
+                  'feedback.form.protocolData.show' | translate
+                }}</ng-container>
+                <ng-template #hide>{{ 'feedback.form.protocolData.hide' | translate }}</ng-template>
+              </ion-button>
+            </ion-card-title>
+            <ion-card-content *ngIf="metaData && showMetaData">
+              <pre>{{ metaData | json }}</pre>
+            </ion-card-content>
+          </ion-card>
+          <ion-button
+            type="submit"
+            color="primary"
+            expand="block"
+            [disabled]="!feedbackForm.valid || !termsAgree || submitSuccess"
+            >{{ 'feedback.form.submit' | translate }}</ion-button
+          >
+        </form>
+      </ion-card>
+    </div>
+  </div>
 </ion-content>
diff --git a/src/app/modules/feedback/feedback-page.scss b/src/app/modules/feedback/feedback-page.scss
index 1050af59..8235c41c 100644
--- a/src/app/modules/feedback/feedback-page.scss
+++ b/src/app/modules/feedback/feedback-page.scss
@@ -1,6 +1,81 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
 pre {
   white-space: pre-wrap;
 }
 ion-button {
   margin: 10px;
 }
+
+@import 'src/theme/util/_mixins.scss';
+
+:host ::ng-deep {
+  ion-card {
+    margin: 0;
+    box-shadow: none;
+    ion-card-content {
+      h1 {
+        margin: 0;
+      }
+      padding-bottom: 8px;
+    }
+    ion-card-header {
+      color: var(--ion-color-dark);
+      padding-top: 8px;
+      padding-bottom: 4px;
+      font-weight: bold;
+    }
+    ion-grid,
+    ion-col {
+      padding-inline-start: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+  ion-grid,
+  ion-col {
+    padding-inline-start: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .feedback-content {
+    margin: var(--spacing-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    background: var(--ion-color-light);
+    @include border-radius-in-parallax(var(--border-radius-default));
+
+    & > * {
+      ion-card-subtitle {
+        font-size: var(--font-size-lg);
+        color: var(--ion-color-light-contrast);
+      }
+
+      display: block;
+      @include border-radius-in-parallax(var(--border-radius-default));
+      overflow: hidden;
+      position: relative;
+      background-color: var(--ion-color-primary-contrast);
+      margin: 0;
+
+      & > ion-thumbnail {
+        background: var(--ion-color-primary);
+      }
+    }
+  }
+}
diff --git a/src/app/modules/settings/item/settings-item.component.ts b/src/app/modules/settings/item/settings-item.component.ts
index b7fcc332..bd5ae2ac 100644
--- a/src/app/modules/settings/item/settings-item.component.ts
+++ b/src/app/modules/settings/item/settings-item.component.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -24,6 +24,7 @@ import {SettingsProvider} from '../settings.provider';
 @Component({
   selector: 'stapps-settings-item',
   templateUrl: 'settings-item.html',
+  styleUrls: ['settings-item.scss'],
 })
 export class SettingsItemComponent {
   /**
diff --git a/src/app/modules/settings/settings.scss b/src/app/modules/settings/item/settings-item.scss
similarity index 92%
rename from src/app/modules/settings/settings.scss
rename to src/app/modules/settings/item/settings-item.scss
index 6d67c768..bc381711 100644
--- a/src/app/modules/settings/settings.scss
+++ b/src/app/modules/settings/item/settings-item.scss
@@ -1,5 +1,5 @@
 /*!
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -12,6 +12,3 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-
-page-settings {
-}
diff --git a/src/app/modules/settings/page/settings-page.component.ts b/src/app/modules/settings/page/settings-page.component.ts
index 16c6a6e2..4745784e 100644
--- a/src/app/modules/settings/page/settings-page.component.ts
+++ b/src/app/modules/settings/page/settings-page.component.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -24,6 +24,7 @@ import {SettingsCache, SettingsProvider} from '../settings.provider';
 @Component({
   selector: 'stapps-settings-page',
   templateUrl: 'settings-page.html',
+  styleUrls: ['settings-page.scss'],
 })
 export class SettingsPageComponent implements OnInit {
   /**
diff --git a/src/app/modules/settings/page/settings-page.html b/src/app/modules/settings/page/settings-page.html
index 5b6d608f..cd013bf9 100644
--- a/src/app/modules/settings/page/settings-page.html
+++ b/src/app/modules/settings/page/settings-page.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2023 StApps
   ~ This program is free software: you can redistribute it and/or modify it
   ~ under the terms of the GNU General Public License as published by the Free
   ~ Software Foundation, version 3.
@@ -22,32 +22,38 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
-  <ion-list *ngFor="let categoryKey of categoriesOrder">
-    <div *ngIf="objectKeys(settingsCache).includes(categoryKey)">
-      <ion-item-divider>
-        <h5>
-          {{
-            'categories[0]'
-              | thingTranslate
-                : $any(
-                    settingsCache[categoryKey]?.settings[objectKeys(settingsCache[categoryKey]?.settings)[0]]
-                  )
-              | titlecase
-          }}
-        </h5>
-      </ion-item-divider>
-      <stapps-settings-item
-        *ngFor="let settingKeys of objectKeys(settingsCache[categoryKey].settings)"
-        [setting]="settingsCache[categoryKey].settings[settingKeys]"
-      ></stapps-settings-item>
+<ion-content class="ion-no-padding ion-content-parallax">
+  <div>
+    <div class="settings-content">
+      <ng-container *ngFor="let categoryKey of categoriesOrder">
+        <ion-list *ngIf="objectKeys(settingsCache).includes(categoryKey)">
+          <!-- <ion-item-divider>
+            <h2>
+              {{
+                'categories[0]'
+                  | thingTranslate
+                    : $any(
+                        settingsCache[categoryKey]?.settings[
+                          objectKeys(settingsCache[categoryKey]?.settings)[0]
+                        ]
+                      )
+                  | titlecase
+              }}
+            </h2>
+          </ion-item-divider> -->
+          <stapps-settings-item
+            *ngFor="let settingKeys of objectKeys(settingsCache[categoryKey].settings)"
+            [setting]="settingsCache[categoryKey].settings[settingKeys]"
+          ></stapps-settings-item>
+        </ion-list>
+      </ng-container>
+
+      <calendar-sync-settings></calendar-sync-settings>
+
+      <ion-button color="medium" expand="block" fill="outline" (click)="presentResetAlert()">
+        {{ 'settings.resetSettings' | translate }}
+        <ion-icon slot="start" name="device_reset"></ion-icon>
+      </ion-button>
     </div>
-  </ion-list>
-
-  <calendar-sync-settings></calendar-sync-settings>
-
-  <ion-button color="medium" expand="block" fill="outline" (click)="presentResetAlert()">
-    {{ 'settings.resetSettings' | translate }}
-    <ion-icon slot="start" name="device_reset"></ion-icon>
-  </ion-button>
+  </div>
 </ion-content>
diff --git a/src/app/modules/settings/page/settings-page.scss b/src/app/modules/settings/page/settings-page.scss
new file mode 100644
index 00000000..bb51ff33
--- /dev/null
+++ b/src/app/modules/settings/page/settings-page.scss
@@ -0,0 +1,73 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+@import 'src/theme/util/_mixins.scss';
+
+:host ::ng-deep {
+  ion-card {
+    margin: 0;
+    box-shadow: none;
+    ion-card-content {
+      h1 {
+        margin: 0;
+      }
+      padding-bottom: 8px;
+    }
+    ion-card-header {
+      color: var(--ion-color-dark);
+      padding-top: 8px;
+      padding-bottom: 4px;
+      font-weight: bold;
+    }
+    ion-grid,
+    ion-col {
+      padding-inline-start: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+  ion-grid,
+  ion-col {
+    padding-inline-start: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .settings-content {
+    margin: var(--spacing-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    background: var(--ion-color-light);
+    @include border-radius-in-parallax(var(--border-radius-default));
+
+    & > * {
+      ion-card-subtitle {
+        font-size: var(--font-size-lg);
+        color: var(--ion-color-light-contrast);
+      }
+
+      display: block;
+      @include border-radius-in-parallax(var(--border-radius-default));
+      overflow: hidden;
+      position: relative;
+      background-color: var(--ion-color-primary-contrast);
+      margin: 0;
+
+      & > ion-thumbnail {
+        background: var(--ion-color-primary);
+      }
+    }
+  }
+}
diff --git a/src/app/modules/settings/settings.module.ts b/src/app/modules/settings/settings.module.ts
index 04655e54..911f4978 100644
--- a/src/app/modules/settings/settings.module.ts
+++ b/src/app/modules/settings/settings.module.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.