diff --git a/src/webapp/components/navigation/navbar/Navbar.tsx b/src/webapp/components/navigation/navbar/Navbar.tsx
index 3beb45e5..2a55da1b 100644
--- a/src/webapp/components/navigation/navbar/Navbar.tsx
+++ b/src/webapp/components/navigation/navbar/Navbar.tsx
@@ -16,6 +16,7 @@ import {
 import { LuLibrary } from 'react-icons/lu';
 import { MdOutlineEmojiNature } from 'react-icons/md';
 import { FaRegNoteSticky } from 'react-icons/fa6';
+import { TbSettings } from 'react-icons/tb';
 import Link from 'next/link';
 import SembleLogo from '@/assets/semble-logo.svg';
 import ProfileMenu from '@/features/profile/components/profileMenu/ProfileMenu';
@@ -62,6 +63,11 @@ export default function Navbar() {
               label="Cards"
               icon={<FaRegNoteSticky size={25} />}
             />
+            <NavItem
+              href={`/settings`}
+              label="Settings"
+              icon={<TbSettings size={25} />}
+            />
           </Stack>
         </Stack>
 
-- 
2.51.2


From 694e882c215262aa4b4d23393d050b7065052359 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 20 Nov 2025 14:36:38 -0800
Subject: [PATCH 02/14] feat: settings route and layout

---
 .../app/(dashboard)/settings/layout.tsx       | 24 +++++++++++++++++++
 src/webapp/app/(dashboard)/settings/page.tsx  |  9 +++++++
 2 files changed, 33 insertions(+)
 create mode 100644 src/webapp/app/(dashboard)/settings/layout.tsx
 create mode 100644 src/webapp/app/(dashboard)/settings/page.tsx

diff --git a/src/webapp/app/(dashboard)/settings/layout.tsx b/src/webapp/app/(dashboard)/settings/layout.tsx
new file mode 100644
index 00000000..aff26ced
--- /dev/null
+++ b/src/webapp/app/(dashboard)/settings/layout.tsx
@@ -0,0 +1,24 @@
+import BackButton from '@/components/navigation/backButton/BackButton';
+import Header from '@/components/navigation/header/Header';
+import type { Metadata } from 'next';
+import { Fragment } from 'react';
+
+export const metadata: Metadata = {
+  title: 'Settings',
+  description: 'Settings',
+};
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export default function Layout(props: Props) {
+  return (
+    <Fragment>
+      <Header>
+        <BackButton href="/home">Home</BackButton>
+      </Header>
+      {props.children}
+    </Fragment>
+  );
+}
diff --git a/src/webapp/app/(dashboard)/settings/page.tsx b/src/webapp/app/(dashboard)/settings/page.tsx
new file mode 100644
index 00000000..cef1cba0
--- /dev/null
+++ b/src/webapp/app/(dashboard)/settings/page.tsx
@@ -0,0 +1,9 @@
+import { verifySessionOnServer } from '@/lib/auth/dal.server';
+import { redirect } from 'next/navigation';
+
+export default async function Page() {
+  const session = await verifySessionOnServer();
+  if (!session) redirect('/login');
+
+  return <></>;
+}
-- 
2.51.2


From 6edbc60a43c4c0f84b13b00d3a5067c699724b44 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 20 Nov 2025 14:36:50 -0800
Subject: [PATCH 03/14] feat: account summary

---
 .../accountSummary/AccountSummary.tsx         | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 src/webapp/features/settings/components/accountSummary/AccountSummary.tsx

diff --git a/src/webapp/features/settings/components/accountSummary/AccountSummary.tsx b/src/webapp/features/settings/components/accountSummary/AccountSummary.tsx
new file mode 100644
index 00000000..5e3aa420
--- /dev/null
+++ b/src/webapp/features/settings/components/accountSummary/AccountSummary.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import useMyProfile from '@/features/profile/lib/queries/useMyProfile';
+import { useAuth } from '@/hooks/useAuth';
+import { Avatar, Button, Card, Group, Stack, Text } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import { IoMdLogOut } from 'react-icons/io';
+
+export default function AccountSummary() {
+  const { data: profile } = useMyProfile();
+  const { logout } = useAuth();
+  const router = useRouter();
+
+  const handleLogout = async () => {
+    try {
+      await logout();
+      router.push('/');
+    } catch (error) {
+      console.error('Error logging out:', error);
+    }
+  };
+
+  return (
+    <Card p={'xs'} radius={'lg'} withBorder>
+      <Group gap={'xs'} justify="space-between">
+        <Group gap={'xs'}>
+          <Avatar
+            src={profile.avatarUrl}
+            alt={`${profile.name}'s' avatar`}
+            size={'lg'}
+          />
+          <Stack gap={0}>
+            <Text fw={600} fz={'xl'} c={'bright'}>
+              {profile.name}
+            </Text>
+            <Text fw={600} c={'gray'}>
+              {profile.handle}
+            </Text>
+          </Stack>
+        </Group>
+
+        <Button
+          leftSection={<IoMdLogOut size={22} />}
+          variant="light"
+          color="red"
+          onClick={handleLogout}
+        >
+          Log out
+        </Button>
+      </Group>
+    </Card>
+  );
+}
-- 
2.51.2


From db9376e538c30c321c0e01141f26e96ffb701f80 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 20 Nov 2025 15:19:01 -0800
Subject: [PATCH 04/14] feat: account summary

---
 .../accountSummary/AccountSummary.tsx         | 25 +------------------
 1 file changed, 1 insertion(+), 24 deletions(-)

diff --git a/src/webapp/features/settings/components/accountSummary/AccountSummary.tsx b/src/webapp/features/settings/components/accountSummary/AccountSummary.tsx
index 5e3aa420..a0ad846f 100644
--- a/src/webapp/features/settings/components/accountSummary/AccountSummary.tsx
+++ b/src/webapp/features/settings/components/accountSummary/AccountSummary.tsx
@@ -1,24 +1,10 @@
 'use client';
 
 import useMyProfile from '@/features/profile/lib/queries/useMyProfile';
-import { useAuth } from '@/hooks/useAuth';
-import { Avatar, Button, Card, Group, Stack, Text } from '@mantine/core';
-import { useRouter } from 'next/navigation';
-import { IoMdLogOut } from 'react-icons/io';
+import { Avatar, Card, Group, Stack, Text } from '@mantine/core';
 
 export default function AccountSummary() {
   const { data: profile } = useMyProfile();
-  const { logout } = useAuth();
-  const router = useRouter();
-
-  const handleLogout = async () => {
-    try {
-      await logout();
-      router.push('/');
-    } catch (error) {
-      console.error('Error logging out:', error);
-    }
-  };
 
   return (
     <Card p={'xs'} radius={'lg'} withBorder>
@@ -38,15 +24,6 @@ export default function AccountSummary() {
             </Text>
           </Stack>
         </Group>
-
-        <Button
-          leftSection={<IoMdLogOut size={22} />}
-          variant="light"
-          color="red"
-          onClick={handleLogout}
-        >
-          Log out
-        </Button>
       </Group>
     </Card>
   );
-- 
2.51.2


From 8e3e1a2da931fa52a554d70ddc18ef175267b583 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 20 Nov 2025 15:47:06 -0800
Subject: [PATCH 05/14] feat: appearance container

---
 .../AppearanceContainer.tsx                   | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/webapp/features/settings/containers/appearanceContainer/AppearanceContainer.tsx

diff --git a/src/webapp/features/settings/containers/appearanceContainer/AppearanceContainer.tsx b/src/webapp/features/settings/containers/appearanceContainer/AppearanceContainer.tsx
new file mode 100644
index 00000000..d41843ab
--- /dev/null
+++ b/src/webapp/features/settings/containers/appearanceContainer/AppearanceContainer.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { Container, Stack, Title, SegmentedControl } from '@mantine/core';
+import { useMantineColorScheme } from '@mantine/core';
+
+export default function AppearanceContainer() {
+  const { colorScheme, setColorScheme } = useMantineColorScheme();
+
+  return (
+    <Container p="xs" size="xs">
+      <Stack gap="xl">
+        <Title order={1}>Appearance</Title>
+
+        <SegmentedControl
+          size="md"
+          value={colorScheme}
+          onChange={(value) =>
+            setColorScheme(value as 'light' | 'dark' | 'auto')
+          }
+          data={[
+            { label: 'Light', value: 'light' },
+            { label: 'Dark', value: 'dark' },
+            { label: 'Auto', value: 'auto' },
+          ]}
+        />
+      </Stack>
+    </Container>
+  );
+}
-- 
2.51.2


From 4338bc8bbbc086d1774a3f7fe278d00153d198cc Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 20 Nov 2025 15:47:15 -0800
Subject: [PATCH 06/14] feat: setting item

---
 .../components/settingItem/SettingItem.tsx    | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/webapp/features/settings/components/settingItem/SettingItem.tsx

diff --git a/src/webapp/features/settings/components/settingItem/SettingItem.tsx b/src/webapp/features/settings/components/settingItem/SettingItem.tsx
new file mode 100644
index 00000000..52404d71
--- /dev/null
+++ b/src/webapp/features/settings/components/settingItem/SettingItem.tsx
@@ -0,0 +1,32 @@
+import type { IconType } from 'react-icons/lib';
+import { Button } from '@mantine/core';
+import Link from 'next/link';
+import { isValidElement } from 'react';
+
+interface Props {
+  href: string;
+  icon: IconType | React.ReactElement;
+  children: React.ReactNode;
+}
+export default function SettingItem(props: Props) {
+  const renderIcon = () => {
+    if (isValidElement(props.icon)) return props.icon;
+
+    const IconComponent = props.icon as IconType;
+    return <IconComponent size={22} />;
+  };
+
+  return (
+    <Button
+      component={Link}
+      href={props.href}
+      variant="default"
+      size="md"
+      justify="start"
+      radius={'lg'}
+      leftSection={renderIcon()}
+    >
+      {props.children}
+    </Button>
+  );
+}
-- 
2.51.2


From daed613ae327c4681e4e636df1a6a8df27f30862 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 20 Nov 2025 15:47:34 -0800
Subject: [PATCH 07/14] feat: basic settings page

---
 .../settings/appearance/layout.tsx            | 15 +++++++++
 .../(dashboard)/settings/appearance/page.tsx  |  5 +++
 src/webapp/app/(dashboard)/settings/page.tsx  |  3 +-
 .../settingsContainer/SettingsContainer.tsx   | 31 +++++++++++++++++++
 4 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 src/webapp/app/(dashboard)/settings/appearance/layout.tsx
 create mode 100644 src/webapp/app/(dashboard)/settings/appearance/page.tsx
 create mode 100644 src/webapp/features/settings/containers/settingsContainer/SettingsContainer.tsx

diff --git a/src/webapp/app/(dashboard)/settings/appearance/layout.tsx b/src/webapp/app/(dashboard)/settings/appearance/layout.tsx
new file mode 100644
index 00000000..7f0ecec2
--- /dev/null
+++ b/src/webapp/app/(dashboard)/settings/appearance/layout.tsx
@@ -0,0 +1,15 @@
+import type { Metadata } from 'next';
+import { Fragment } from 'react';
+
+export const metadata: Metadata = {
+  title: 'Appearance',
+  description: 'Appearance',
+};
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export default function Layout(props: Props) {
+  return <Fragment>{props.children}</Fragment>;
+}
diff --git a/src/webapp/app/(dashboard)/settings/appearance/page.tsx b/src/webapp/app/(dashboard)/settings/appearance/page.tsx
new file mode 100644
index 00000000..faee726d
--- /dev/null
+++ b/src/webapp/app/(dashboard)/settings/appearance/page.tsx
@@ -0,0 +1,5 @@
+import AppearanceContainer from '@/features/settings/containers/appearanceContainer/AppearanceContainer';
+
+export default function Page() {
+  return <AppearanceContainer />;
+}
diff --git a/src/webapp/app/(dashboard)/settings/page.tsx b/src/webapp/app/(dashboard)/settings/page.tsx
index cef1cba0..2bae3d67 100644
--- a/src/webapp/app/(dashboard)/settings/page.tsx
+++ b/src/webapp/app/(dashboard)/settings/page.tsx
@@ -1,3 +1,4 @@
+import SettingsContainer from '@/features/settings/containers/settingsContainer/SettingsContainer';
 import { verifySessionOnServer } from '@/lib/auth/dal.server';
 import { redirect } from 'next/navigation';
 
@@ -5,5 +6,5 @@ export default async function Page() {
   const session = await verifySessionOnServer();
   if (!session) redirect('/login');
 
-  return <></>;
+  return <SettingsContainer />;
 }
diff --git a/src/webapp/features/settings/containers/settingsContainer/SettingsContainer.tsx b/src/webapp/features/settings/containers/settingsContainer/SettingsContainer.tsx
new file mode 100644
index 00000000..3cee2fb7
--- /dev/null
+++ b/src/webapp/features/settings/containers/settingsContainer/SettingsContainer.tsx
@@ -0,0 +1,31 @@
+import { ButtonGroup, Container, Stack, Title } from '@mantine/core';
+import AccountSummary from '../../components/accountSummary/AccountSummary';
+import SettingItem from '../../components/settingItem/SettingItem';
+import {
+  IoMdColorPalette,
+  IoMdHelpCircle,
+  IoMdInformationCircle,
+} from 'react-icons/io';
+
+export default function SettingsContainer() {
+  return (
+    <Container p={'xs'} size={'xs'}>
+      <Stack gap={'xl'}>
+        <Title order={1}>Settings</Title>
+
+        <AccountSummary />
+        <ButtonGroup orientation="vertical">
+          <SettingItem href="/settings/appearance" icon={IoMdColorPalette}>
+            Appearance
+          </SettingItem>
+          <SettingItem href="/settings/help" icon={IoMdHelpCircle}>
+            Help
+          </SettingItem>
+          <SettingItem href="/settings/about" icon={IoMdInformationCircle}>
+            About
+          </SettingItem>
+        </ButtonGroup>
+      </Stack>
+    </Container>
+  );
+}
-- 
2.51.2


From 3939525bc104fc0a9eea98a7482084bef6f482ef Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 20 Nov 2025 15:48:29 -0800
Subject: [PATCH 08/14] feat: lighter colour on setting item

---
 .../features/settings/components/settingItem/SettingItem.tsx     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/webapp/features/settings/components/settingItem/SettingItem.tsx b/src/webapp/features/settings/components/settingItem/SettingItem.tsx
index 52404d71..263a471d 100644
--- a/src/webapp/features/settings/components/settingItem/SettingItem.tsx
+++ b/src/webapp/features/settings/components/settingItem/SettingItem.tsx
@@ -24,6 +24,7 @@ export default function SettingItem(props: Props) {
       size="md"
       justify="start"
       radius={'lg'}
+      c="gray"
       leftSection={renderIcon()}
     >
       {props.children}
-- 
2.51.2


From 49b1ba38e96ba042673393c278e8c6895e242991 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 20 Nov 2025 15:53:50 -0800
Subject: [PATCH 09/14] rename "auto" theme to "system"

---
 .../features/profile/components/profileMenu/ProfileMenu.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx b/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
index 9eb22e2f..33ba10a9 100644
--- a/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
+++ b/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
@@ -16,8 +16,8 @@ import {
   MdBugReport,
   MdDarkMode,
   MdLightMode,
-  MdAutoAwesome,
   MdCollectionsBookmark,
+  MdOutlineSmartphone,
 } from 'react-icons/md';
 import { TbStackForward } from 'react-icons/tb';
 import { useAuth } from '@/hooks/useAuth';
@@ -102,7 +102,7 @@ export default function ProfileMenu() {
             color="gray"
             leftSection={
               colorScheme === 'auto' ? (
-                <MdAutoAwesome size={22} />
+                <MdOutlineSmartphone size={22} />
               ) : computedColorScheme === 'dark' ? (
                 <MdDarkMode size={22} />
               ) : (
@@ -112,7 +112,7 @@ export default function ProfileMenu() {
             closeMenuOnClick={false}
             onClick={handleThemeToggle}
           >
-            Theme: {colorScheme}
+            Theme: {colorScheme === 'auto' ? 'system' : colorScheme}
           </Menu.Item>
 
           <Menu.Divider />
-- 
2.51.2


From fc695e845b6f136187fe813271f45385e81ff907 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 20 Nov 2025 15:54:02 -0800
Subject: [PATCH 10/14] feat: appearance control icon

---
 .../AppearanceContainer.tsx                   | 39 +++++++++++++++++--
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/webapp/features/settings/containers/appearanceContainer/AppearanceContainer.tsx b/src/webapp/features/settings/containers/appearanceContainer/AppearanceContainer.tsx
index d41843ab..c29fce4b 100644
--- a/src/webapp/features/settings/containers/appearanceContainer/AppearanceContainer.tsx
+++ b/src/webapp/features/settings/containers/appearanceContainer/AppearanceContainer.tsx
@@ -1,7 +1,14 @@
 'use client';
 
-import { Container, Stack, Title, SegmentedControl } from '@mantine/core';
+import {
+  Container,
+  Stack,
+  Title,
+  SegmentedControl,
+  Center,
+} from '@mantine/core';
 import { useMantineColorScheme } from '@mantine/core';
+import { MdDarkMode, MdLightMode, MdOutlineSmartphone } from 'react-icons/md';
 
 export default function AppearanceContainer() {
   const { colorScheme, setColorScheme } = useMantineColorScheme();
@@ -18,9 +25,33 @@ export default function AppearanceContainer() {
             setColorScheme(value as 'light' | 'dark' | 'auto')
           }
           data={[
-            { label: 'Light', value: 'light' },
-            { label: 'Dark', value: 'dark' },
-            { label: 'Auto', value: 'auto' },
+            {
+              label: (
+                <Center style={{ gap: 10 }}>
+                  <MdLightMode />
+                  <span>Light</span>
+                </Center>
+              ),
+              value: 'light',
+            },
+            {
+              label: (
+                <Center style={{ gap: 10 }}>
+                  <MdDarkMode />
+                  <span>Dark</span>
+                </Center>
+              ),
+              value: 'dark',
+            },
+            {
+              label: (
+                <Center style={{ gap: 10 }}>
+                  <MdOutlineSmartphone />
+                  <span>System</span>
+                </Center>
+              ),
+              value: 'auto',
+            },
           ]}
         />
       </Stack>
-- 
2.51.2


From a40de4fe89b33ba3ef2a7d791153ab87e7ae23ee Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 20 Nov 2025 16:26:40 -0800
Subject: [PATCH 11/14] feat: about page

---
 .../app/(dashboard)/settings/about/layout.tsx | 15 ++++++++++
 .../app/(dashboard)/settings/about/page.tsx   |  5 ++++
 .../aboutContainer/AboutContainer.tsx         | 29 +++++++++++++++++++
 3 files changed, 49 insertions(+)
 create mode 100644 src/webapp/app/(dashboard)/settings/about/layout.tsx
 create mode 100644 src/webapp/app/(dashboard)/settings/about/page.tsx
 create mode 100644 src/webapp/features/settings/containers/aboutContainer/AboutContainer.tsx

diff --git a/src/webapp/app/(dashboard)/settings/about/layout.tsx b/src/webapp/app/(dashboard)/settings/about/layout.tsx
new file mode 100644
index 00000000..32b1e417
--- /dev/null
+++ b/src/webapp/app/(dashboard)/settings/about/layout.tsx
@@ -0,0 +1,15 @@
+import type { Metadata } from 'next';
+import { Fragment } from 'react';
+
+export const metadata: Metadata = {
+  title: 'About',
+  description: 'About',
+};
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export default function Layout(props: Props) {
+  return <Fragment>{props.children}</Fragment>;
+}
diff --git a/src/webapp/app/(dashboard)/settings/about/page.tsx b/src/webapp/app/(dashboard)/settings/about/page.tsx
new file mode 100644
index 00000000..a17bffec
--- /dev/null
+++ b/src/webapp/app/(dashboard)/settings/about/page.tsx
@@ -0,0 +1,5 @@
+import AboutContainer from '@/features/settings/containers/aboutContainer/AboutContainer';
+
+export default function Page() {
+  return <AboutContainer />;
+}
diff --git a/src/webapp/features/settings/containers/aboutContainer/AboutContainer.tsx b/src/webapp/features/settings/containers/aboutContainer/AboutContainer.tsx
new file mode 100644
index 00000000..65e8b433
--- /dev/null
+++ b/src/webapp/features/settings/containers/aboutContainer/AboutContainer.tsx
@@ -0,0 +1,29 @@
+import { ButtonGroup, Container, Stack, Title } from '@mantine/core';
+import SettingItem from '../../components/settingItem/SettingItem';
+import { MdSpeakerNotes } from 'react-icons/md';
+import { FaGithub } from 'react-icons/fa6';
+
+export default function AboutContainer() {
+  return (
+    <Container p="xs" size="xs">
+      <Stack gap="xl">
+        <Title order={1}>About</Title>
+        <ButtonGroup orientation="vertical">
+          <SettingItem
+            href="https://blog.cosmik.network/"
+            icon={MdSpeakerNotes}
+          >
+            Follow our blog for updates
+          </SettingItem>
+
+          <SettingItem
+            href="https://github.com/cosmik-network/semble"
+            icon={FaGithub}
+          >
+            View source code
+          </SettingItem>
+        </ButtonGroup>
+      </Stack>
+    </Container>
+  );
+}
-- 
2.51.2


From 550fa290cb3aae32533559f0b967fcc1d2ef92f8 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 20 Nov 2025 16:26:46 -0800
Subject: [PATCH 12/14] feat: help page

---
 .../app/(dashboard)/settings/help/layout.tsx  | 15 +++++++++
 .../app/(dashboard)/settings/help/page.tsx    |  5 +++
 .../helpContainer/HelpContainer.tsx           | 31 +++++++++++++++++++
 3 files changed, 51 insertions(+)
 create mode 100644 src/webapp/app/(dashboard)/settings/help/layout.tsx
 create mode 100644 src/webapp/app/(dashboard)/settings/help/page.tsx
 create mode 100644 src/webapp/features/settings/containers/helpContainer/HelpContainer.tsx

diff --git a/src/webapp/app/(dashboard)/settings/help/layout.tsx b/src/webapp/app/(dashboard)/settings/help/layout.tsx
new file mode 100644
index 00000000..c7ca49a9
--- /dev/null
+++ b/src/webapp/app/(dashboard)/settings/help/layout.tsx
@@ -0,0 +1,15 @@
+import type { Metadata } from 'next';
+import { Fragment } from 'react';
+
+export const metadata: Metadata = {
+  title: 'Help',
+  description: 'Help',
+};
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export default function Layout(props: Props) {
+  return <Fragment>{props.children}</Fragment>;
+}
diff --git a/src/webapp/app/(dashboard)/settings/help/page.tsx b/src/webapp/app/(dashboard)/settings/help/page.tsx
new file mode 100644
index 00000000..ca1a3279
--- /dev/null
+++ b/src/webapp/app/(dashboard)/settings/help/page.tsx
@@ -0,0 +1,5 @@
+import HelpContainer from '@/features/settings/containers/helpContainer/HelpContainer';
+
+export default function Page() {
+  return <HelpContainer />;
+}
diff --git a/src/webapp/features/settings/containers/helpContainer/HelpContainer.tsx b/src/webapp/features/settings/containers/helpContainer/HelpContainer.tsx
new file mode 100644
index 00000000..663b56d1
--- /dev/null
+++ b/src/webapp/features/settings/containers/helpContainer/HelpContainer.tsx
@@ -0,0 +1,31 @@
+import { Container, Stack, Title, ButtonGroup } from '@mantine/core';
+import { FaDiscord } from 'react-icons/fa6';
+import SettingItem from '../../components/settingItem/SettingItem';
+import { MdBugReport, MdMenuBook } from 'react-icons/md';
+
+export default function HelpContainer() {
+  return (
+    <Container p="xs" size="xs">
+      <Stack gap="xl">
+        <Title order={1}>Help</Title>
+        <ButtonGroup orientation="vertical">
+          <SettingItem
+            href="https://docs.cosmik.network/semble"
+            icon={MdMenuBook}
+          >
+            Semble Docs
+          </SettingItem>
+          <SettingItem
+            href="https://tangled.org/@cosmik.network/semble/issues"
+            icon={MdBugReport}
+          >
+            Submit an issue
+          </SettingItem>
+          <SettingItem href="https://discord.gg/SHvvysb73e" icon={FaDiscord}>
+            Join our discord community
+          </SettingItem>
+        </ButtonGroup>
+      </Stack>
+    </Container>
+  );
+}
-- 
2.51.2


From 8ac8f1555c36d90eb475c4b28e1a99589d4c9dac Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 20 Nov 2025 17:17:04 -0800
Subject: [PATCH 13/14] feat: settings skeleton

---
 .../(dashboard)/settings/about/loading.tsx    |   5 ++
 .../settings/appearance/loading.tsx           |   5 ++
 .../app/(dashboard)/settings/help/loading.tsx |   5 ++
 .../app/(dashboard)/settings/loading.tsx      |   5 ++
 src/webapp/assets/cosmik-bg-banner-small.webp | Bin 0 -> 3500 bytes
 .../accountSummary/AccountSummary.tsx         |  38 ++++-----
 .../Skeleton.AccountSummary.tsx               |  13 +++
 .../components/settingItem/SettingItem.tsx    |   7 +-
 .../settingItem/Skeleton.SettingItem.tsx      |  17 ++++
 .../settingLogoutItem/SettingLogoutItem.tsx   |  35 +++++++++
 .../aboutContainer/AboutContainer.tsx         |  59 +++++++++++++-
 .../Skeleton.AboutContainer.tsx               |  74 ++++++++++++++++++
 .../Skeleton.AppearanceContainer.tsx          |  14 ++++
 .../helpContainer/HelpContainer.tsx           |   8 +-
 .../helpContainer/Skeleton.HelpContainer.tsx  |  17 ++++
 .../settingsContainer/SettingsContainer.tsx   |  26 +++---
 .../Skeleton.SettingsContainer.tsx            |  23 ++++++
 17 files changed, 317 insertions(+), 34 deletions(-)
 create mode 100644 src/webapp/app/(dashboard)/settings/about/loading.tsx
 create mode 100644 src/webapp/app/(dashboard)/settings/appearance/loading.tsx
 create mode 100644 src/webapp/app/(dashboard)/settings/help/loading.tsx
 create mode 100644 src/webapp/app/(dashboard)/settings/loading.tsx
 create mode 100644 src/webapp/assets/cosmik-bg-banner-small.webp
 create mode 100644 src/webapp/features/settings/components/accountSummary/Skeleton.AccountSummary.tsx
 create mode 100644 src/webapp/features/settings/components/settingItem/Skeleton.SettingItem.tsx
 create mode 100644 src/webapp/features/settings/components/settingLogoutItem/SettingLogoutItem.tsx
 create mode 100644 src/webapp/features/settings/containers/aboutContainer/Skeleton.AboutContainer.tsx
 create mode 100644 src/webapp/features/settings/containers/appearanceContainer/Skeleton.AppearanceContainer.tsx
 create mode 100644 src/webapp/features/settings/containers/helpContainer/Skeleton.HelpContainer.tsx
 create mode 100644 src/webapp/features/settings/containers/settingsContainer/Skeleton.SettingsContainer.tsx

diff --git a/src/webapp/app/(dashboard)/settings/about/loading.tsx b/src/webapp/app/(dashboard)/settings/about/loading.tsx
new file mode 100644
index 00000000..a62a9ac3
--- /dev/null
+++ b/src/webapp/app/(dashboard)/settings/about/loading.tsx
@@ -0,0 +1,5 @@
+import AboutContainerSkeleton from '@/features/settings/containers/aboutContainer/Skeleton.AboutContainer';
+
+export default function Loading() {
+  return <AboutContainerSkeleton />;
+}
diff --git a/src/webapp/app/(dashboard)/settings/appearance/loading.tsx b/src/webapp/app/(dashboard)/settings/appearance/loading.tsx
new file mode 100644
index 00000000..db72794b
--- /dev/null
+++ b/src/webapp/app/(dashboard)/settings/appearance/loading.tsx
@@ -0,0 +1,5 @@
+import AppearanceContainerSkeleton from '@/features/settings/containers/appearanceContainer/Skeleton.AppearanceContainer';
+
+export default function Loading() {
+  return <AppearanceContainerSkeleton />;
+}
diff --git a/src/webapp/app/(dashboard)/settings/help/loading.tsx b/src/webapp/app/(dashboard)/settings/help/loading.tsx
new file mode 100644
index 00000000..5e487e0a
--- /dev/null
+++ b/src/webapp/app/(dashboard)/settings/help/loading.tsx
@@ -0,0 +1,5 @@
+import HelpContainerSkeleton from '@/features/settings/containers/helpContainer/Skeleton.HelpContainer';
+
+export default function Loading() {
+  return <HelpContainerSkeleton />;
+}
diff --git a/src/webapp/app/(dashboard)/settings/loading.tsx b/src/webapp/app/(dashboard)/settings/loading.tsx
new file mode 100644
index 00000000..6fcf2a4b
--- /dev/null
+++ b/src/webapp/app/(dashboard)/settings/loading.tsx
@@ -0,0 +1,5 @@
+import SettingsContainerSkeleton from '@/features/settings/containers/settingsContainer/Skeleton.SettingsContainer';
+
+export default function Loading() {
+  return <SettingsContainerSkeleton />;
+}
diff --git a/src/webapp/assets/cosmik-bg-banner-small.webp b/src/webapp/assets/cosmik-bg-banner-small.webp
new file mode 100644
index 0000000000000000000000000000000000000000..f50bfce2a6d9fc570a379578a817ddb0d220e553
GIT binary patch
literal 3500
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

literal 0
HcmV?d00001

diff --git a/src/webapp/features/settings/components/accountSummary/AccountSummary.tsx b/src/webapp/features/settings/components/accountSummary/AccountSummary.tsx
index a0ad846f..91b3b916 100644
--- a/src/webapp/features/settings/components/accountSummary/AccountSummary.tsx
+++ b/src/webapp/features/settings/components/accountSummary/AccountSummary.tsx
@@ -2,29 +2,29 @@
 
 import useMyProfile from '@/features/profile/lib/queries/useMyProfile';
 import { Avatar, Card, Group, Stack, Text } from '@mantine/core';
+import Link from 'next/link';
 
 export default function AccountSummary() {
   const { data: profile } = useMyProfile();
 
   return (
-    <Card p={'xs'} radius={'lg'} withBorder>
-      <Group gap={'xs'} justify="space-between">
-        <Group gap={'xs'}>
-          <Avatar
-            src={profile.avatarUrl}
-            alt={`${profile.name}'s' avatar`}
-            size={'lg'}
-          />
-          <Stack gap={0}>
-            <Text fw={600} fz={'xl'} c={'bright'}>
-              {profile.name}
-            </Text>
-            <Text fw={600} c={'gray'}>
-              {profile.handle}
-            </Text>
-          </Stack>
-        </Group>
-      </Group>
-    </Card>
+    <Stack gap={'xs'} align="center">
+      <Avatar
+        component={Link}
+        href={`/profile/${profile.handle}`}
+        src={profile.avatarUrl}
+        alt={`${profile.name}'s' avatar`}
+        size={'xl'}
+        radius={'lg'}
+      />
+      <Stack gap={0} align="center">
+        <Text fw={600} fz={'h3'} c={'bright'}>
+          {profile.name}
+        </Text>
+        <Text fw={500} fz={'h4'} c={'gray'}>
+          @{profile.handle}
+        </Text>
+      </Stack>
+    </Stack>
   );
 }
diff --git a/src/webapp/features/settings/components/accountSummary/Skeleton.AccountSummary.tsx b/src/webapp/features/settings/components/accountSummary/Skeleton.AccountSummary.tsx
new file mode 100644
index 00000000..5752d058
--- /dev/null
+++ b/src/webapp/features/settings/components/accountSummary/Skeleton.AccountSummary.tsx
@@ -0,0 +1,13 @@
+import { Stack, Avatar, Skeleton } from '@mantine/core';
+
+export default function AccountSummarySkeleton() {
+  return (
+    <Stack align="center">
+      <Avatar size={'xl'} radius={'lg'} />
+      <Stack gap={'xs'} align="center">
+        <Skeleton w={100} h={18} />
+        <Skeleton w={80} h={16} />
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/src/webapp/features/settings/components/settingItem/SettingItem.tsx b/src/webapp/features/settings/components/settingItem/SettingItem.tsx
index 263a471d..caebbad5 100644
--- a/src/webapp/features/settings/components/settingItem/SettingItem.tsx
+++ b/src/webapp/features/settings/components/settingItem/SettingItem.tsx
@@ -5,6 +5,7 @@ import { isValidElement } from 'react';
 
 interface Props {
   href: string;
+  openInNewTab?: boolean;
   icon: IconType | React.ReactElement;
   children: React.ReactNode;
 }
@@ -20,12 +21,14 @@ export default function SettingItem(props: Props) {
     <Button
       component={Link}
       href={props.href}
-      variant="default"
+      target={props.openInNewTab ? '_blank' : '_self'}
+      variant="light"
       size="md"
       justify="start"
       radius={'lg'}
-      c="gray"
+      color="gray"
       leftSection={renderIcon()}
+      my={1}
     >
       {props.children}
     </Button>
diff --git a/src/webapp/features/settings/components/settingItem/Skeleton.SettingItem.tsx b/src/webapp/features/settings/components/settingItem/Skeleton.SettingItem.tsx
new file mode 100644
index 00000000..bd548abf
--- /dev/null
+++ b/src/webapp/features/settings/components/settingItem/Skeleton.SettingItem.tsx
@@ -0,0 +1,17 @@
+import { Button } from '@mantine/core';
+
+export default function SettingItemSkeleton() {
+  return (
+    <Button
+      variant="light"
+      c={'gra'}
+      w={'100%'}
+      h={42}
+      radius={'lg'}
+      color="gray"
+      my={1}
+      loaderProps={{ type: 'dots' }}
+      loading
+    />
+  );
+}
diff --git a/src/webapp/features/settings/components/settingLogoutItem/SettingLogoutItem.tsx b/src/webapp/features/settings/components/settingLogoutItem/SettingLogoutItem.tsx
new file mode 100644
index 00000000..4ec0f981
--- /dev/null
+++ b/src/webapp/features/settings/components/settingLogoutItem/SettingLogoutItem.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import { useAuth } from '@/hooks/useAuth';
+import { Button } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import { IoMdLogOut } from 'react-icons/io';
+
+export default function SettingLogoutItem() {
+  const { logout } = useAuth();
+  const router = useRouter();
+
+  const handleLogout = async () => {
+    try {
+      await logout();
+      router.push('/');
+    } catch (error) {
+      console.error('Error logging out:', error);
+    }
+  };
+
+  return (
+    <Button
+      variant="light"
+      size="md"
+      justify="start"
+      radius={'lg'}
+      color="red"
+      leftSection={<IoMdLogOut size={22} />}
+      onClick={handleLogout}
+      my={1}
+    >
+      Log out
+    </Button>
+  );
+}
diff --git a/src/webapp/features/settings/containers/aboutContainer/AboutContainer.tsx b/src/webapp/features/settings/containers/aboutContainer/AboutContainer.tsx
index 65e8b433..c7411727 100644
--- a/src/webapp/features/settings/containers/aboutContainer/AboutContainer.tsx
+++ b/src/webapp/features/settings/containers/aboutContainer/AboutContainer.tsx
@@ -1,7 +1,19 @@
-import { ButtonGroup, Container, Stack, Title } from '@mantine/core';
+import {
+  ButtonGroup,
+  Card,
+  Container,
+  Stack,
+  Image,
+  Title,
+  Text,
+  Group,
+} from '@mantine/core';
 import SettingItem from '../../components/settingItem/SettingItem';
 import { MdSpeakerNotes } from 'react-icons/md';
 import { FaGithub } from 'react-icons/fa6';
+import CosmikLogo from '@/assets/cosmik-logo-full.svg';
+import CosmikLogoWhite from '@/assets/cosmik-logo-full-white.svg';
+import CosmikBanner from '@/assets/cosmik-bg-banner-small.webp';
 
 export default function AboutContainer() {
   return (
@@ -11,6 +23,7 @@ export default function AboutContainer() {
         <ButtonGroup orientation="vertical">
           <SettingItem
             href="https://blog.cosmik.network/"
+            openInNewTab
             icon={MdSpeakerNotes}
           >
             Follow our blog for updates
@@ -18,11 +31,55 @@ export default function AboutContainer() {
 
           <SettingItem
             href="https://github.com/cosmik-network/semble"
+            openInNewTab
             icon={FaGithub}
           >
             View source code
           </SettingItem>
         </ButtonGroup>
+        <Card
+          component="a"
+          href="https://cosmik.network/"
+          target="_blank"
+          p="sm"
+          radius="lg"
+          withBorder
+          style={{
+            backgroundImage: `url(${CosmikBanner.src})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            backgroundRepeat: 'no-repeat',
+            position: 'relative',
+            overflow: 'hidden',
+          }}
+        >
+          <Group
+            gap="md"
+            wrap="nowrap"
+            style={{ position: 'relative', zIndex: 1 }}
+          >
+            <Stack gap="xs">
+              <Image
+                src={CosmikLogo.src}
+                alt="Cosmik logo"
+                w={92}
+                h={28.4}
+                darkHidden
+              />
+              {/* dark logo */}
+              <Image
+                src={CosmikLogoWhite.src}
+                alt="Cosmik logo white"
+                w={92}
+                h={28.4}
+                lightHidden
+              />
+              <Text fw={500}>
+                Semble is lovingly built by the team at Cosmik Network
+              </Text>
+            </Stack>
+          </Group>
+        </Card>
       </Stack>
     </Container>
   );
diff --git a/src/webapp/features/settings/containers/aboutContainer/Skeleton.AboutContainer.tsx b/src/webapp/features/settings/containers/aboutContainer/Skeleton.AboutContainer.tsx
new file mode 100644
index 00000000..1dd0419d
--- /dev/null
+++ b/src/webapp/features/settings/containers/aboutContainer/Skeleton.AboutContainer.tsx
@@ -0,0 +1,74 @@
+import {
+  ButtonGroup,
+  Card,
+  Container,
+  Stack,
+  Image,
+  Title,
+  Text,
+  Group,
+} from '@mantine/core';
+import SettingItem from '../../components/settingItem/SettingItem';
+import { MdSpeakerNotes } from 'react-icons/md';
+import { FaGithub } from 'react-icons/fa6';
+import CosmikLogo from '@/assets/cosmik-logo-full.svg';
+import CosmikLogoWhite from '@/assets/cosmik-logo-full-white.svg';
+import CosmikBanner from '@/assets/cosmik-bg-banner-small.webp';
+import SettingItemSkeleton from '../../components/settingItem/Skeleton.SettingItem';
+
+export default function AboutContainerSkeleton() {
+  return (
+    <Container p="xs" size="xs">
+      <Stack gap="xl">
+        <Title order={1}>Loading</Title>
+        <ButtonGroup orientation="vertical">
+          <SettingItemSkeleton />
+          <SettingItemSkeleton />
+        </ButtonGroup>
+        <Card
+          component="a"
+          href="https://cosmik.network/"
+          target="_blank"
+          p="sm"
+          radius="lg"
+          withBorder
+          style={{
+            backgroundImage: `url(${CosmikBanner.src})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            backgroundRepeat: 'no-repeat',
+            position: 'relative',
+            overflow: 'hidden',
+          }}
+        >
+          <Group
+            gap="md"
+            wrap="nowrap"
+            style={{ position: 'relative', zIndex: 1 }}
+          >
+            <Stack gap="xs">
+              <Image
+                src={CosmikLogo.src}
+                alt="Cosmik logo"
+                w={92}
+                h={28.4}
+                darkHidden
+              />
+              {/* dark logo */}
+              <Image
+                src={CosmikLogoWhite.src}
+                alt="Cosmik logo white"
+                w={92}
+                h={28.4}
+                lightHidden
+              />
+              <Text fw={500}>
+                Semble is lovingly built by the team at Cosmik Network
+              </Text>
+            </Stack>
+          </Group>
+        </Card>
+      </Stack>
+    </Container>
+  );
+}
diff --git a/src/webapp/features/settings/containers/appearanceContainer/Skeleton.AppearanceContainer.tsx b/src/webapp/features/settings/containers/appearanceContainer/Skeleton.AppearanceContainer.tsx
new file mode 100644
index 00000000..171a5880
--- /dev/null
+++ b/src/webapp/features/settings/containers/appearanceContainer/Skeleton.AppearanceContainer.tsx
@@ -0,0 +1,14 @@
+'use client';
+
+import { Container, Stack, Title, Skeleton } from '@mantine/core';
+
+export default function AppearanceContainerSkeleton() {
+  return (
+    <Container p="xs" size="xs">
+      <Stack gap="xl">
+        <Title order={1}>Appearance</Title>
+        <Skeleton w={'100%'} h={42} />
+      </Stack>
+    </Container>
+  );
+}
diff --git a/src/webapp/features/settings/containers/helpContainer/HelpContainer.tsx b/src/webapp/features/settings/containers/helpContainer/HelpContainer.tsx
index 663b56d1..27285faa 100644
--- a/src/webapp/features/settings/containers/helpContainer/HelpContainer.tsx
+++ b/src/webapp/features/settings/containers/helpContainer/HelpContainer.tsx
@@ -11,17 +11,23 @@ export default function HelpContainer() {
         <ButtonGroup orientation="vertical">
           <SettingItem
             href="https://docs.cosmik.network/semble"
+            openInNewTab
             icon={MdMenuBook}
           >
             Semble Docs
           </SettingItem>
           <SettingItem
             href="https://tangled.org/@cosmik.network/semble/issues"
+            openInNewTab
             icon={MdBugReport}
           >
             Submit an issue
           </SettingItem>
-          <SettingItem href="https://discord.gg/SHvvysb73e" icon={FaDiscord}>
+          <SettingItem
+            href="https://discord.gg/SHvvysb73e"
+            openInNewTab
+            icon={FaDiscord}
+          >
             Join our discord community
           </SettingItem>
         </ButtonGroup>
diff --git a/src/webapp/features/settings/containers/helpContainer/Skeleton.HelpContainer.tsx b/src/webapp/features/settings/containers/helpContainer/Skeleton.HelpContainer.tsx
new file mode 100644
index 00000000..bd2ca93d
--- /dev/null
+++ b/src/webapp/features/settings/containers/helpContainer/Skeleton.HelpContainer.tsx
@@ -0,0 +1,17 @@
+import { Container, Stack, Title, ButtonGroup } from '@mantine/core';
+import SettingItemSkeleton from '../../components/settingItem/Skeleton.SettingItem';
+
+export default function HelpContainerSkeleton() {
+  return (
+    <Container p="xs" size="xs">
+      <Stack gap="xl">
+        <Title order={1}>Help</Title>
+        <ButtonGroup orientation="vertical">
+          <SettingItemSkeleton />
+          <SettingItemSkeleton />
+          <SettingItemSkeleton />
+        </ButtonGroup>
+      </Stack>
+    </Container>
+  );
+}
diff --git a/src/webapp/features/settings/containers/settingsContainer/SettingsContainer.tsx b/src/webapp/features/settings/containers/settingsContainer/SettingsContainer.tsx
index 3cee2fb7..20e70573 100644
--- a/src/webapp/features/settings/containers/settingsContainer/SettingsContainer.tsx
+++ b/src/webapp/features/settings/containers/settingsContainer/SettingsContainer.tsx
@@ -6,6 +6,7 @@ import {
   IoMdHelpCircle,
   IoMdInformationCircle,
 } from 'react-icons/io';
+import SettingLogoutItem from '../../components/settingLogoutItem/SettingLogoutItem';
 
 export default function SettingsContainer() {
   return (
@@ -14,17 +15,20 @@ export default function SettingsContainer() {
         <Title order={1}>Settings</Title>
 
         <AccountSummary />
-        <ButtonGroup orientation="vertical">
-          <SettingItem href="/settings/appearance" icon={IoMdColorPalette}>
-            Appearance
-          </SettingItem>
-          <SettingItem href="/settings/help" icon={IoMdHelpCircle}>
-            Help
-          </SettingItem>
-          <SettingItem href="/settings/about" icon={IoMdInformationCircle}>
-            About
-          </SettingItem>
-        </ButtonGroup>
+        <Stack>
+          <ButtonGroup orientation="vertical">
+            <SettingItem href="/settings/appearance" icon={IoMdColorPalette}>
+              Appearance
+            </SettingItem>
+            <SettingItem href="/settings/help" icon={IoMdHelpCircle}>
+              Help
+            </SettingItem>
+            <SettingItem href="/settings/about" icon={IoMdInformationCircle}>
+              About
+            </SettingItem>
+          </ButtonGroup>
+          <SettingLogoutItem />
+        </Stack>
       </Stack>
     </Container>
   );
diff --git a/src/webapp/features/settings/containers/settingsContainer/Skeleton.SettingsContainer.tsx b/src/webapp/features/settings/containers/settingsContainer/Skeleton.SettingsContainer.tsx
new file mode 100644
index 00000000..325e8b0f
--- /dev/null
+++ b/src/webapp/features/settings/containers/settingsContainer/Skeleton.SettingsContainer.tsx
@@ -0,0 +1,23 @@
+import { ButtonGroup, Container, Stack, Title } from '@mantine/core';
+import AccountSummarySkeleton from '../../components/accountSummary/Skeleton.AccountSummary';
+import SettingItemSkeleton from '../../components/settingItem/Skeleton.SettingItem';
+
+export default function SettingsContainerSkeleton() {
+  return (
+    <Container p={'xs'} size={'xs'}>
+      <Stack gap={'xl'}>
+        <Title order={1}>Settings</Title>
+
+        <AccountSummarySkeleton />
+        <Stack>
+          <ButtonGroup orientation="vertical">
+            <SettingItemSkeleton />
+            <SettingItemSkeleton />
+            <SettingItemSkeleton />
+          </ButtonGroup>
+          <SettingItemSkeleton />
+        </Stack>
+      </Stack>
+    </Container>
+  );
+}
-- 
2.51.2


From d56ab7dedab8e8fa5a75af903bc3f390914566cc Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 20 Nov 2025 17:20:31 -0800
Subject: [PATCH 14/14] feat: headers on settings pages

---
 src/webapp/app/(dashboard)/settings/about/layout.tsx | 11 ++++++++++-
 .../app/(dashboard)/settings/appearance/layout.tsx   | 11 ++++++++++-
 src/webapp/app/(dashboard)/settings/help/layout.tsx  | 11 ++++++++++-
 src/webapp/app/(dashboard)/settings/layout.tsx       |  9 +--------
 src/webapp/app/(dashboard)/settings/page.tsx         | 12 +++++++++++-
 5 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/webapp/app/(dashboard)/settings/about/layout.tsx b/src/webapp/app/(dashboard)/settings/about/layout.tsx
index 32b1e417..78ad4d83 100644
--- a/src/webapp/app/(dashboard)/settings/about/layout.tsx
+++ b/src/webapp/app/(dashboard)/settings/about/layout.tsx
@@ -1,3 +1,5 @@
+import BackButton from '@/components/navigation/backButton/BackButton';
+import Header from '@/components/navigation/header/Header';
 import type { Metadata } from 'next';
 import { Fragment } from 'react';
 
@@ -11,5 +13,12 @@ interface Props {
 }
 
 export default function Layout(props: Props) {
-  return <Fragment>{props.children}</Fragment>;
+  return (
+    <Fragment>
+      <Header>
+        <BackButton href="/settings">Settings</BackButton>
+      </Header>
+      {props.children}
+    </Fragment>
+  );
 }
diff --git a/src/webapp/app/(dashboard)/settings/appearance/layout.tsx b/src/webapp/app/(dashboard)/settings/appearance/layout.tsx
index 7f0ecec2..14cd9a5b 100644
--- a/src/webapp/app/(dashboard)/settings/appearance/layout.tsx
+++ b/src/webapp/app/(dashboard)/settings/appearance/layout.tsx
@@ -1,3 +1,5 @@
+import BackButton from '@/components/navigation/backButton/BackButton';
+import Header from '@/components/navigation/header/Header';
 import type { Metadata } from 'next';
 import { Fragment } from 'react';
 
@@ -11,5 +13,12 @@ interface Props {
 }
 
 export default function Layout(props: Props) {
-  return <Fragment>{props.children}</Fragment>;
+  return (
+    <Fragment>
+      <Header>
+        <BackButton href="/settings">Settings</BackButton>
+      </Header>
+      {props.children}
+    </Fragment>
+  );
 }
diff --git a/src/webapp/app/(dashboard)/settings/help/layout.tsx b/src/webapp/app/(dashboard)/settings/help/layout.tsx
index c7ca49a9..442872df 100644
--- a/src/webapp/app/(dashboard)/settings/help/layout.tsx
+++ b/src/webapp/app/(dashboard)/settings/help/layout.tsx
@@ -1,3 +1,5 @@
+import BackButton from '@/components/navigation/backButton/BackButton';
+import Header from '@/components/navigation/header/Header';
 import type { Metadata } from 'next';
 import { Fragment } from 'react';
 
@@ -11,5 +13,12 @@ interface Props {
 }
 
 export default function Layout(props: Props) {
-  return <Fragment>{props.children}</Fragment>;
+  return (
+    <Fragment>
+      <Header>
+        <BackButton href="/settings">Settings</BackButton>
+      </Header>
+      {props.children}
+    </Fragment>
+  );
 }
diff --git a/src/webapp/app/(dashboard)/settings/layout.tsx b/src/webapp/app/(dashboard)/settings/layout.tsx
index aff26ced..7bc1ee7f 100644
--- a/src/webapp/app/(dashboard)/settings/layout.tsx
+++ b/src/webapp/app/(dashboard)/settings/layout.tsx
@@ -13,12 +13,5 @@ interface Props {
 }
 
 export default function Layout(props: Props) {
-  return (
-    <Fragment>
-      <Header>
-        <BackButton href="/home">Home</BackButton>
-      </Header>
-      {props.children}
-    </Fragment>
-  );
+  return <Fragment>{props.children}</Fragment>;
 }
diff --git a/src/webapp/app/(dashboard)/settings/page.tsx b/src/webapp/app/(dashboard)/settings/page.tsx
index 2bae3d67..bcd1a1a3 100644
--- a/src/webapp/app/(dashboard)/settings/page.tsx
+++ b/src/webapp/app/(dashboard)/settings/page.tsx
@@ -1,10 +1,20 @@
+import BackButton from '@/components/navigation/backButton/BackButton';
+import Header from '@/components/navigation/header/Header';
 import SettingsContainer from '@/features/settings/containers/settingsContainer/SettingsContainer';
 import { verifySessionOnServer } from '@/lib/auth/dal.server';
 import { redirect } from 'next/navigation';
+import { Fragment } from 'react';
 
 export default async function Page() {
   const session = await verifySessionOnServer();
   if (!session) redirect('/login');
 
-  return <SettingsContainer />;
+  return (
+    <Fragment>
+      <Header>
+        <BackButton href="/home">Home</BackButton>
+      </Header>
+      <SettingsContainer />
+    </Fragment>
+  );
 }