diff --git a/packages/frontend/src/Account.tsx b/packages/frontend/src/Account.tsx
index 4756fae..c4944c3 100644
--- a/packages/frontend/src/Account.tsx
+++ b/packages/frontend/src/Account.tsx
@@ -1,16 +1,10 @@
-import { Link } from "react-router-dom";
+import { SettingsPageLayout } from "@/components/settings-page-layout";
 
 function Account() {
     return (
-        <main className="w-full h-[100vh] flex flex-col items-start gap-4 p-4">
-            <h1 className="text-3xl font-600">Account</h1>
-
-            <p className="text-muted-foreground">Account page here</p>
-
-            <Link to="/" className="">
-                Go to Home
-            </Link>
-        </main>
+        <SettingsPageLayout title="Account">
+            <p className="font-400">Account page here</p>
+        </SettingsPageLayout>
     );
 }
 
diff --git a/packages/frontend/src/Organisations.tsx b/packages/frontend/src/Organisations.tsx
index 14d2112..05a9d6e 100644
--- a/packages/frontend/src/Organisations.tsx
+++ b/packages/frontend/src/Organisations.tsx
@@ -1,16 +1,10 @@
-import { Link } from "react-router-dom";
+import { SettingsPageLayout } from "@/components/settings-page-layout";
 
 function Organisations() {
     return (
-        <main className="w-full h-[100vh] flex flex-col items-start gap-4 p-4">
-            <h1 className="text-3xl font-600">Organisations</h1>
-
-            <p className="text-muted-foreground">Organisations page here</p>
-
-            <Link to="/" className="">
-                Go to Home
-            </Link>
-        </main>
+        <SettingsPageLayout title="Organisations">
+            <p className="font-400">Organisations page here</p>
+        </SettingsPageLayout>
     );
 }
 
diff --git a/packages/frontend/src/components/settings-page-layout.tsx b/packages/frontend/src/components/settings-page-layout.tsx
new file mode 100644
index 0000000..a2637ea
--- /dev/null
+++ b/packages/frontend/src/components/settings-page-layout.tsx
@@ -0,0 +1,22 @@
+import { Home } from "lucide-react";
+import type { ReactNode } from "react";
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+
+export function SettingsPageLayout({ title, children }: { title: string; children?: ReactNode }) {
+    return (
+        <main className="w-full min-h-[100vh] flex flex-col items-start">
+            <div className="flex items-center gap-4 w-full border-b px-2 py-2">
+                <Button asChild variant="ghost" size="icon">
+                    <Link to="/">
+                        <Home />
+                    </Link>
+                </Button>
+
+                <h1 className="text-3xl font-600">{title}</h1>
+            </div>
+
+            <div className="w-full px-4 py-4 text-md">{children}</div>
+        </main>
+    );
+}