Index: app/(app)/profile/edit/page.tsx
===================================================================
--- app/(app)/profile/edit/page.tsx	(revision 2893f8d750f6a7f00ad4b7558f197889a69077e4)
+++ app/(app)/profile/edit/page.tsx	(revision 2893f8d750f6a7f00ad4b7558f197889a69077e4)
@@ -0,0 +1,56 @@
+import { auth } from '@/auth';
+import { redirect } from 'next/navigation';
+import { poppins } from '@/app/ui/fonts';
+import { ProfileUpdateForm, PasswordUpdateForm } from '../profile-forms';
+import Link from 'next/link';
+
+
+export default async function EditProfilePage() {
+    const session = await auth();
+    if (!session?.user) {
+        redirect('/login');
+    }
+
+    return (
+        <div className="w-full px-6 pt-10 space-y-10 pb-10">
+
+            {/* Back */}
+            <div className="max-w-md mx-auto">
+                <Link
+                    href="/profile"
+                    className="inline-flex items-center text-white/60 hover:text-white/80 transition"
+                >
+                    <span className={`${poppins.className} text-sm`}>← Back</span>
+                </Link>
+            </div>
+
+            <h1
+                className={`${poppins.className}
+                    text-[40px]
+                    leading-tight
+                    tracking-tight
+                    font-semibold
+                    text-center
+                    text-white
+                `}
+            >
+                Edit profile
+            </h1>
+
+            <div className="max-w-md mx-auto space-y-8 pb-10">
+                {/* Account Info */}
+                <section className="rounded-3xl bg-white/5 backdrop-blur-md border border-white/10 p-6 space-y-5">
+                    <ProfileUpdateForm
+                        defaultName={session.user.name ?? ''}
+                        defaultEmail={session.user.email ?? ''}
+                    />
+                </section>
+
+                {/* Security */}
+                <section className="rounded-3xl bg-white/5 backdrop-blur-md border border-white/10 p-6 space-y-5">
+                    <PasswordUpdateForm />
+                </section>
+            </div>
+        </div>
+    );
+}
Index: app/(app)/profile/page.tsx
===================================================================
--- app/(app)/profile/page.tsx	(revision 82cef6ab997fdcac4747fa881f82b9117036e544)
+++ app/(app)/profile/page.tsx	(revision 2893f8d750f6a7f00ad4b7558f197889a69077e4)
@@ -1,23 +1,25 @@
+import Link from 'next/link';
 import { auth, signOut } from '@/auth';
 import { redirect } from 'next/navigation';
+import { ChevronRightIcon } from '@heroicons/react/24/outline';
 import { poppins } from '@/app/ui/fonts';
-import { ProfileUpdateForm, PasswordUpdateForm } from './profile-forms';
 
 export default async function ProfilePage() {
     const session = await auth();
-    if (!session?.user) {
-        redirect('/login');
-    }
+    if (!session?.user) redirect('/login');
+
+    const name = session.user.name ?? 'Account name';
+    const email = session.user.email ?? 'account email';
 
     return (
-        <div className="w-full px-6 pt-10 space-y-10">
+        <div className="w-full px-6 pt-6 pb-10">
+            {/* Top title */}
             <h1
                 className={`${poppins.className}
                     text-[40px]
-                    leading-tight
-                    tracking-tight
                     font-semibold
                     text-center
-                    text-white
+                    text-white/90
+                    mt-2
                 `}
             >
@@ -25,19 +27,63 @@
             </h1>
 
-            <div className="max-w-md mx-auto space-y-8 pb-10">
-                {/* Account Info */}
-                <section className="rounded-3xl bg-white/5 backdrop-blur-md border border-white/10 p-6 space-y-5">
-                    <ProfileUpdateForm
-                        defaultName={session.user.name ?? ''}
-                        defaultEmail={session.user.email ?? ''}
-                    />
-                </section>
+            {/* Center identity */}
+            <div className="mt-24 text-center">
+                <div
+                    className={`${poppins.className}
+                        text-[52px]
+                        leading-[1.05]
+                        font-semibold
+                        text-white
+                        tracking-tight
+                    `}
+                >
+                    {name}
+                </div>
 
-                {/* Security */}
-                <section className="rounded-3xl bg-white/5 backdrop-blur-md border border-white/10 p-6 space-y-5">
-                    <PasswordUpdateForm />
-                </section>
+                <div className="mt-6 text-white/45 text-lg">
+                    {email}
+                </div>
+            </div>
 
-                {/* Logout */}
+            {/* Action list */}
+            <div className="mt-24 space-y-4 max-w-md mx-auto">
+                <Link
+                    href="/profile/edit"
+                    className="
+                        flex items-center justify-between
+                        h-14
+                        rounded-2xl
+                        border border-white/35
+                        bg-white/5
+                        px-5
+                        text-white/55
+                        backdrop-blur-md
+                        transition
+                        hover:bg-white/10
+                    "
+                >
+                    <span className={`${poppins.className} text-base`}>Edit Profile</span>
+                    <ChevronRightIcon className="h-5 w-5 text-white/35" />
+                </Link>
+
+                <Link
+                    href="/profile/settings"
+                    className="
+                        flex items-center justify-between
+                        h-14
+                        rounded-2xl
+                        border border-white/35
+                        bg-white/5
+                        px-5
+                        text-white/55
+                        backdrop-blur-md
+                        transition
+                        hover:bg-white/10
+                    "
+                >
+                    <span className={`${poppins.className} text-base`}>Settings</span>
+                    <ChevronRightIcon className="h-5 w-5 text-white/35" />
+                </Link>
+
                 <form
                     action={async () => {
@@ -46,6 +92,24 @@
                     }}
                 >
-                    <button className="w-full bg-red-600/90 hover:bg-red-500 rounded-2xl py-3 text-white font-medium transition">
-                        Logout
+                    <button
+                        type="submit"
+                        className="
+                            w-full
+                            flex items-center justify-between
+                            h-14
+                            rounded-2xl
+                            border border-white/35
+                            bg-white/5
+                            px-5
+                            backdrop-blur-md
+                            transition
+                            hover:bg-white/10
+                        "
+                    >
+                        <span className={`${poppins.className} text-base text-red-300`}>
+                            Sign Out
+                        </span>
+                        {/* no chevron in the screenshot, but if you want it remove the next line */}
+                        <span className="w-5" />
                     </button>
                 </form>
Index: app/(app)/profile/settings/page.tsx
===================================================================
--- app/(app)/profile/settings/page.tsx	(revision 2893f8d750f6a7f00ad4b7558f197889a69077e4)
+++ app/(app)/profile/settings/page.tsx	(revision 2893f8d750f6a7f00ad4b7558f197889a69077e4)
@@ -0,0 +1,75 @@
+import Link from 'next/link';
+import { poppins } from '@/app/ui/fonts';
+
+export default function ProfileSettingsPage() {
+    return (
+        <div className="w-full px-6 pt-6 pb-10">
+            {/* Back */}
+            <div className="max-w-md mx-auto">
+                <Link
+                    href="/profile"
+                    className="inline-flex items-center text-white/60 hover:text-white/80 transition"
+                >
+                    <span className={`${poppins.className} text-sm`}>← Back</span>
+                </Link>
+            </div>
+
+            {/* Title */}
+            <h1
+                className={`${poppins.className}
+                    text-[40px]
+                    leading-tight
+                    tracking-tight
+                    font-semibold
+                    text-center
+                    text-white
+                    mt-6
+                `}
+            >
+                Settings
+            </h1>
+
+            <div className="mt-10 max-w-md mx-auto space-y-4">
+                <div className="rounded-2xl border border-white/35 bg-white/5 backdrop-blur-md px-5 py-4 text-white/70">
+                    (coming soon)
+                </div>
+
+                <div className="rounded-2xl border border-white/35 bg-white/5 backdrop-blur-md px-5 py-4 text-white/70">
+                    (coming soon)
+                </div>
+
+                <div className="rounded-2xl border border-white/35 bg-white/5 backdrop-blur-md px-5 py-4 text-white/70">
+                    (coming soon)
+                </div>
+
+                <div className="rounded-2xl border border-white/35 bg-white/5 backdrop-blur-md px-5 py-4 text-white/70">
+                    (coming soon)
+                </div>
+
+                <div className="rounded-2xl border border-white/35 bg-white/5 backdrop-blur-md px-5 py-4 text-white/70">
+                    (coming soon)
+                </div>
+
+                <div className="rounded-2xl border border-white/35 bg-white/5 backdrop-blur-md px-5 py-4 text-white/70">
+                    (coming soon)
+                </div>
+
+                <div className="rounded-2xl border border-white/35 bg-white/5 backdrop-blur-md px-5 py-4 text-white/70">
+                    (coming soon)
+                </div>
+
+                <div className="rounded-2xl border border-white/35 bg-white/5 backdrop-blur-md px-5 py-4 text-white/70">
+                    (coming soon)
+                </div>
+
+                <div className="rounded-2xl border border-white/35 bg-white/5 backdrop-blur-md px-5 py-4 text-white/70">
+                    (coming soon)
+                </div>
+
+                <div className="rounded-2xl border border-white/35 bg-white/5 backdrop-blur-md px-5 py-4 text-white/70">
+                    (coming soon)
+                </div>
+            </div>
+        </div>
+    );
+}