few other changes

src/app/(pages)/dashboard/page.tsx

@@ -4,8 +4,6 @@ import { ReactElement } from "react";
 import { UserState } from "@/app/store/user-store";
 import { User } from "@/app/types/user/user";
 import { useUserContext } from "@/app/provider/user-provider";
-import { useOrganizationContext } from "@/app/provider/organization-provider";
-import { OrganizationState } from "@/app/store/organization-store";
 
 /**
  * The dashboard home page.
@@ -16,13 +14,9 @@ const DashboardPage = (): ReactElement => {
     const user: User | undefined = useUserContext(
         (state: UserState) => state.user
     );
-    const selectedOrganization: string | undefined = useOrganizationContext(
-        (state: OrganizationState) => state.selected
-    );
     return (
-        <main>
+        <main className="p-4">
-            PulseApp Dashboard, hello {user?.email}, selected org:{" "}
+            Hi there {user?.username}, welcome to Pulse App!
-            {selectedOrganization}
         </main>
     );
 };

src/app/(pages)/dashboard/user/billing/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { ReactElement } from "react";
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { User } from "@/app/types/user/user";
+import { useUserContext } from "@/app/provider/user-provider";
+import { UserState } from "@/app/store/user-store";
+import { Separator } from "@/components/ui/separator";
+
+/**
+ * The user billing page.
+ *
+ * @return the page jsx
+ */
+const UserBillingPage = (): ReactElement => (
+    <main className="w-[47rem] p-10 flex flex-col gap-5">
+        <Header />
+
+        {/* Content */}
+        <div className="flex flex-col gap-5">
+            <Separator className="opacity-65" />
+            Hello World
+        </div>
+    </main>
+);
+
+const Header = (): ReactElement => {
+    const user: User | undefined = useUserContext(
+        (state: UserState) => state.user
+    );
+    return (
+        <div className="flex flex-col gap-1.5 select-none">
+            <h1 className="text-2xl font-bold">Billing</h1>
+
+            <Breadcrumb>
+                <BreadcrumbList>
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="/dashboard">
+                            Dashboard
+                        </BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>{user?.username}</BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <BreadcrumbPage>Billing</BreadcrumbPage>
+                    </BreadcrumbItem>
+                </BreadcrumbList>
+            </Breadcrumb>
+        </div>
+    );
+};
+
+export default UserBillingPage;

src/app/(pages)/dashboard/user/settings/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { ReactElement } from "react";
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { User } from "@/app/types/user/user";
+import { useUserContext } from "@/app/provider/user-provider";
+import { UserState } from "@/app/store/user-store";
+import { Separator } from "@/components/ui/separator";
+
+/**
+ * The user settings page.
+ *
+ * @return the page jsx
+ */
+const UserSettingsPage = (): ReactElement => (
+    <main className="w-[47rem] p-10 flex flex-col gap-5">
+        <Header />
+
+        {/* Content */}
+        <div className="flex flex-col gap-5">
+            <Separator className="opacity-65" />
+            Hello World
+        </div>
+    </main>
+);
+
+const Header = (): ReactElement => {
+    const user: User | undefined = useUserContext(
+        (state: UserState) => state.user
+    );
+    return (
+        <div className="flex flex-col gap-1.5 select-none">
+            <h1 className="text-2xl font-bold">Settings</h1>
+
+            <Breadcrumb>
+                <BreadcrumbList>
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="/dashboard">
+                            Dashboard
+                        </BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>{user?.username}</BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <BreadcrumbPage>Settings</BreadcrumbPage>
+                    </BreadcrumbItem>
+                </BreadcrumbList>
+            </Breadcrumb>
+        </div>
+    );
+};
+
+export default UserSettingsPage;

src/components/dashboard/user/tier-setting.tsx

@@ -29,7 +29,7 @@ const TierSetting = (): ReactElement => {
 
             {/* Setting */}
             <div className="flex gap-10 items-center">
-                <span className="font-medium">
+                <span className="font-medium select-none pointer-events-none">
                     {capitalizeWords(user?.tier)}
                 </span>