diff --git a/resources/js/Components/Container.vue b/resources/js/Components/Container.vue
index 39c12c60..3c04204e 100644
--- a/resources/js/Components/Container.vue
+++ b/resources/js/Components/Container.vue
@@ -1,11 +1,21 @@
 <script setup>
-defineProps({
-    spacedMobile: {
+const props = defineProps({
+    fluid: {
         type: Boolean,
-        default: true,
+        default: false,
         required: false,
     },
-    fluid: {
+    vertical: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    flushMobile: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    vertical: {
         type: Boolean,
         default: false,
         required: false,
@@ -14,11 +24,16 @@ defineProps({
 </script>
 
 <template>
-    <div :class="[
-        { 'max-w-(--breakpoint-2xl) mx-auto': !fluid },
-        spacedMobile ? 'px-4' : 'px-0',
-        'md:px-8',
-    ]">
+    <div
+        class="md:px-8"
+        :class="[
+            {
+                'max-w-(--breakpoint-2xl) mx-auto': !props.fluid,
+                'py-4 md:py-8 space-y-4 md:space-y-8': props.vertical
+            },
+            props.flushMobile ? 'px-0' : 'px-4',
+        ]"
+    >
         <slot />
     </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/resources/js/Layouts/Admin/Partials/DrawerMenu.vue b/resources/js/Components/Layout/Admin/DrawerMenu.vue
similarity index 100%
rename from resources/js/Layouts/Admin/Partials/DrawerMenu.vue
rename to resources/js/Components/Layout/Admin/DrawerMenu.vue
diff --git a/resources/js/Components/Layout/Admin/Footer.vue b/resources/js/Components/Layout/Admin/Footer.vue
new file mode 100644
index 00000000..be9099f2
--- /dev/null
+++ b/resources/js/Components/Layout/Admin/Footer.vue
@@ -0,0 +1,7 @@
+<template>
+    <div class="w-full border-t dynamic-border">
+        <div class="flex flex-col items-center justify-center text-center dynamic-bg py-6 px-3">
+            <p>Your Company - {{ new Date().getFullYear() }}</p>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Layouts/Admin/Partials/MobileSidebarNavDrawer.vue b/resources/js/Components/Layout/Admin/MobileSidebarNavDrawer.vue
similarity index 100%
rename from resources/js/Layouts/Admin/Partials/MobileSidebarNavDrawer.vue
rename to resources/js/Components/Layout/Admin/MobileSidebarNavDrawer.vue
diff --git a/resources/js/Layouts/Admin/Partials/SideMenuItems.vue b/resources/js/Components/Layout/Admin/SideMenuItems.vue
similarity index 78%
rename from resources/js/Layouts/Admin/Partials/SideMenuItems.vue
rename to resources/js/Components/Layout/Admin/SideMenuItems.vue
index dc6ebcec..46d9c630 100644
--- a/resources/js/Layouts/Admin/Partials/SideMenuItems.vue
+++ b/resources/js/Components/Layout/Admin/SideMenuItems.vue
@@ -1,30 +1,40 @@
 <script setup>
+import { computed } from 'vue';
+import { usePage } from '@inertiajs/vue3';
 import LinksPanelMenu from '@/Components/PrimeVue/LinksPanelMenu.vue';
 
+const page = usePage();
+const currentRoute = computed(() => {
+    // Access page.url to trigger re-computation on navigation.
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    const url = page.url;
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+    return route().current();
+});
+
 // Nav Items
-const currentRoute = route().current();
-const homeMenuItems = [
+const homeMenuItems = computed(() => [
     {
         label: 'Welcome',
         icon: 'pi pi-home',
         route: route('welcome'),
-        active: currentRoute == 'welcome',
+        active: currentRoute.value == 'welcome',
     },
     {
         label: 'Dashboard',
         icon: 'pi pi-th-large',
         route: route('admin.dashboard'),
-        active: currentRoute == 'admin.dashboard',
+        active: currentRoute.value == 'admin.dashboard',
     },
-];
-const analyticsMenuItems = [
+]);
+const analyticsMenuItems = computed(() => [
     {
         label: 'Users',
         icon: 'pi pi-user',
         route: route('admin.users.index'),
-        active: currentRoute == 'admin.users.index',
+        active: currentRoute.value == 'admin.users.index',
     },
-];
+]);
 const exampleNestedMenuItems = [
     {
         label: 'Files',
diff --git a/resources/js/Layouts/Admin/Partials/TopNav.vue b/resources/js/Components/Layout/Admin/TopNav.vue
similarity index 83%
rename from resources/js/Layouts/Admin/Partials/TopNav.vue
rename to resources/js/Components/Layout/Admin/TopNav.vue
index 48ff718b..66816ad6 100644
--- a/resources/js/Layouts/Admin/Partials/TopNav.vue
+++ b/resources/js/Components/Layout/Admin/TopNav.vue
@@ -14,7 +14,7 @@ const userMenu = useTemplateRef('user-menu');
 const userMenuItems = [
     {
         label: 'Profile',
-        url: route('admin.profile.edit'),
+        route: route('admin.profile.edit'),
         icon: 'pi pi-fw pi-user',
     },
     {
@@ -32,15 +32,11 @@ const toggleUserMenu = (event) => {
 
 <template>
     <nav class="dynamic-bg border-b dynamic-border">
-        <Container :fluid="true">
-            <LinksMenuBar :pt="{
-                root: {
-                    class: 'px-0 py-3 border-0 rounded-none dynamic-bg',
-                },
-                button: {
-                    class: 'hidden',
-                },
-            }">
+        <Container fluid>
+            <LinksMenuBar
+                pt:root:class="px-0 py-3 border-0 rounded-none dynamic-bg"
+                pt:button:class="hidden"
+            >
                 <template #start>
                     <div class="flex items-center">
                         <div class="shrink-0 flex items-center">
@@ -49,11 +45,7 @@ const toggleUserMenu = (event) => {
                                 outlined
                                 severity="secondary"
                                 icon="pi pi-bars"
-                                :pt="{
-                                    icon: {
-                                        class: 'text-xl',
-                                    },
-                                }"
+                                pt:icon:class="text-xl"
                                 @click="emit('open-nav')"
                             />
                             <InertiaLink
@@ -73,28 +65,28 @@ const toggleUserMenu = (event) => {
                         <div>
                             <ToggleDarkModeButton
                                 severity="secondary"
-                                text
                                 rounded
+                                text
                             />
                         </div>
                         <!-- User Dropdown Menu -->
                         <div class="flex flex-col">
                             <Button
                                 id="user-menu-btn"
-                                text
                                 severity="secondary"
                                 :label="$page.props.auth.user.name"
                                 class="hidden sm:flex"
                                 icon="pi pi-angle-down"
                                 iconPos="right"
+                                text
                                 @click="toggleUserMenu($event)"
                             />
                             <Button
                                 class="flex sm:hidden"
                                 icon="pi pi-user"
-                                text
                                 rounded
                                 severity="secondary"
+                                text
                                 @click="toggleUserMenu($event)"
                             />
                             <div
@@ -105,12 +97,8 @@ const toggleUserMenu = (event) => {
                                 ref="user-menu"
                                 appendTo="#user-menu-append"
                                 :model="userMenuItems"
+                                pt:root:class="left-auto! top-0! right-0"
                                 popup
-                                :pt="{
-                                    root: {
-                                        class: 'left-auto! top-0! right-0',
-                                    },
-                                }"
                             />
                         </div>
                     </div>
diff --git a/resources/js/Components/PageTitleSection.vue b/resources/js/Components/PageTitleSection.vue
new file mode 100644
index 00000000..d3cdd607
--- /dev/null
+++ b/resources/js/Components/PageTitleSection.vue
@@ -0,0 +1,16 @@
+<template>
+    <section>
+        <div class="flex items-end justify-between flex-wrap gap-2 md:gap-4">
+            <div>
+                <h1 class="font-bold text-2xl md:text-3xl leading-tight">
+                    <slot name="title" />
+                </h1>
+            </div>
+            <div>
+                <div v-if="$slots.end">
+                    <slot name="end" />
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
diff --git a/resources/js/Layouts/Admin/AuthenticatedLayout.vue b/resources/js/Layouts/Admin/AuthenticatedLayout.vue
index 5899a1ad..cb2e1c87 100644
--- a/resources/js/Layouts/Admin/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/Admin/AuthenticatedLayout.vue
@@ -1,10 +1,10 @@
 <script setup>
 import { ref, useTemplateRef, onMounted } from 'vue';
 import LinksBreadcrumb from '@/Components/PrimeVue/LinksBreadcrumb.vue';
-import MobileSidebarNavDrawer from './Partials/MobileSidebarNavDrawer.vue';
-import TopNav from './Partials/TopNav.vue';
-import Footer from './Partials/Footer.vue';
-import SideMenuItems from './Partials/SideMenuItems.vue';
+import MobileSidebarNavDrawer from '@/Components/Layout/Admin/MobileSidebarNavDrawer.vue';
+import TopNav from '@/Components/Layout/Admin/TopNav.vue';
+import Footer from '@/Components/Layout/Admin/Footer.vue';
+import SideMenuItems from '@/Components/Layout/Admin/SideMenuItems.vue';
 
 defineProps({
     pageTitle: {
@@ -45,14 +45,14 @@ onMounted(() => {
 </script>
 
 <template>
-    <Teleport to="body">
-        <Toast position="top-center" />
-        <MobileSidebarNavDrawer v-model="navDrawerOpen">
-            <SideMenuItems />
-        </MobileSidebarNavDrawer>
-    </Teleport>
-
     <div class="h-screen flex flex-col">
+        <Teleport to="body">
+            <Toast position="top-center" />
+            <MobileSidebarNavDrawer v-model="navDrawerOpen">
+                <SideMenuItems />
+            </MobileSidebarNavDrawer>
+        </Teleport>
+
         <header
             id="site-header"
             ref="site-header"
@@ -62,7 +62,7 @@ onMounted(() => {
             <TopNav @open-nav="navDrawerOpen = true" />
         </header>
 
-        <main class="flex-1">
+        <div class="flex-1">
             <!-- Desktop Sidebar -->
             <aside :class="[
                 'w-[18rem] inset-0 hidden lg:block fixed overflow-y-auto overflow-x-hidden dynamic-bg border-r dynamic-border',
@@ -83,59 +83,26 @@ onMounted(() => {
                     v-if="breadcrumbs.length"
                     class="dynamic-bg border-b dynamic-border"
                 >
-                    <Container :fluid="true">
-                        <div class="flex items-center justify-between flex-wrap">
-                            <div>
-                                <LinksBreadcrumb
-                                    :model="breadcrumbs"
-                                    class="py-3 lg:py-5"
-                                />
-                            </div>
-                            <div>
-                                <div
-                                    v-if="$slots.headerEnd"
-                                    class="py-3"
-                                >
-                                    <slot name="headerEnd" />
-                                </div>
-                            </div>
-                        </div>
+                    <Container fluid>
+                        <LinksBreadcrumb
+                            :model="breadcrumbs"
+                            class="py-4"
+                        />
                     </Container>
                 </nav>
 
-                <!-- Page Title -->
-                <section v-if="pageTitle">
-                    <Container
-                        :fluid="true"
-                        class="my-4 md:my-8"
-                    >
-                        <div class="flex items-end justify-between flex-wrap">
-                            <div>
-                                <h1 class="font-bold text-2xl md:text-3xl leading-tight">
-                                    {{ pageTitle }}
-                                </h1>
-                            </div>
-                            <div>
-                                <div v-if="$slots.titleEnd">
-                                    <slot name="titleEnd" />
-                                </div>
-                            </div>
-                        </div>
-                    </Container>
-                </section>
-
                 <!-- Page Content -->
-                <section
+                <main
                     id="page-content"
                     class="grow"
                 >
                     <slot />
-                </section>
+                </main>
 
                 <footer>
                     <Footer />
                 </footer>
             </div>
-        </main>
+        </div>
     </div>
 </template>
diff --git a/resources/js/Layouts/Admin/Partials/Footer.vue b/resources/js/Layouts/Admin/Partials/Footer.vue
deleted file mode 100644
index 37f61805..00000000
--- a/resources/js/Layouts/Admin/Partials/Footer.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <div class="pt-4 md:pt-8">
-        <div class="w-full border-t dynamic-border">
-            <div class="flex flex-col items-center justify-center text-center dynamic-bg py-6 px-3">
-                <p>Your Company - {{ new Date().getFullYear() }}</p>
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index 478c42c4..65bdef89 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -1,26 +1,34 @@
 <script setup>
-import { ref, useTemplateRef, onMounted, onUnmounted, watchEffect } from 'vue';
-import { useForm } from '@inertiajs/vue3';
+import { ref, computed, useTemplateRef, onMounted, onUnmounted, watchEffect } from 'vue';
+import { usePage, useForm } from '@inertiajs/vue3';
 import ApplicationLogo from '@/Components/ApplicationLogo.vue';
 import LinksMenu from '@/Components/PrimeVue/LinksMenu.vue';
 import LinksMenuBar from '@/Components/PrimeVue/LinksMenuBar.vue';
 import LinksPanelMenu from '@/Components/PrimeVue/LinksPanelMenu.vue';
 import ToggleDarkModeButton from '@/Components/ToggleDarkModeButton.vue';
 
-const currentRoute = route().current();
+const page = usePage();
+const currentRoute = computed(() => {
+    // Access page.url to trigger re-computation on navigation.
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    const url = page.url;
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+    return route().current();
+});
+
 const logoutForm = useForm({});
 function logout() {
     logoutForm.post(route('logout'));
 }
 
 // Main menu
-const mainMenuItems = [
+const mainMenuItems = computed(() => [
     {
         label: 'Dashboard',
         route: route('dashboard'),
-        active: currentRoute == 'dashboard',
+        active: currentRoute.value == 'dashboard',
     },
-];
+]);
 
 // User menu (desktop)
 const userMenu = useTemplateRef('user-menu');
@@ -43,18 +51,18 @@ const toggleUserMenu = (event) => {
 };
 
 // Mobile menu (Drawer)
-const homeMobileMenuItems = ref([
+const homeMobileMenuItems = computed(() => [
     {
         label: 'Welcome',
         icon: 'pi pi-home',
         route: route('welcome'),
-        active: currentRoute == 'welcome',
+        active: currentRoute.value == 'welcome',
     },
     {
         label: 'Dashboard',
         icon: 'pi pi-th-large',
         route: route('dashboard'),
-        active: currentRoute == 'dashboard',
+        active: currentRoute.value == 'dashboard',
     },
 ]);
 const mobileMenuOpen = ref(false);
@@ -78,15 +86,12 @@ watchEffect(() => {
 <template>
     <div>
         <div class="min-h-screen">
-            <nav
-                class="dynamic-bg border-b"
-                :class="$slots.header ? 'dynamic-border' : 'shadow-sm'"
-            >
+            <nav class="dynamic-bg shadow-sm">
                 <!-- Primary Navigation Menu -->
                 <Container>
                     <LinksMenuBar
                         :model="mainMenuItems"
-                        pt:root:class="px-0 py-3 border-0 rounded-none dynamic-bg"
+                        pt:root:class="px-0 py-4 border-0 rounded-none dynamic-bg"
                         pt:button:class="hidden"
                     >
                         <template #start>
@@ -114,7 +119,7 @@ watchEffect(() => {
                                         id="user-menu-btn"
                                         text
                                         severity="secondary"
-                                        :label="$page.props.auth.user.name"
+                                        :label="page.props.auth.user.name"
                                         icon="pi pi-angle-down"
                                         iconPos="right"
                                         @click="toggleUserMenu($event)"
@@ -201,18 +206,6 @@ watchEffect(() => {
                 </Drawer>
             </nav>
 
-            <!-- Page Heading -->
-            <header
-                v-if="$slots.header"
-                class="dynamic-bg shadow-sm"
-            >
-                <Container>
-                    <div class="py-6">
-                        <slot name="header" />
-                    </div>
-                </Container>
-            </header>
-
             <!-- Page Content -->
             <Toast position="top-center" />
             <main>
diff --git a/resources/js/Pages/Admin/Dashboard.vue b/resources/js/Pages/Admin/Dashboard.vue
index 2876e572..7291a728 100644
--- a/resources/js/Pages/Admin/Dashboard.vue
+++ b/resources/js/Pages/Admin/Dashboard.vue
@@ -1,17 +1,21 @@
+<script setup>
+import AuthenticatedAdminLayout from '@/Layouts/Admin/AuthenticatedLayout.vue';
+
+defineOptions({ layout: AuthenticatedAdminLayout });
+</script>
+
 <template>
     <InertiaHead title="Dashboard" />
-    <AuthenticatedAdminLayout>
-        <Container
-            :fluid="true"
-            class="py-4 md:py-8"
-        >
-            <div>
-                <Card>
-                    <template #content>
-                        <p class="m-0">You are logged in as an Admin!</p>
-                    </template>
-                </Card>
-            </div>
-        </Container>
-    </AuthenticatedAdminLayout>
+    <Container
+        vertical
+        fluid
+    >
+        <div>
+            <Card>
+                <template #content>
+                    <p class="m-0">You are logged in as an Admin!</p>
+                </template>
+            </Card>
+        </div>
+    </Container>
 </template>
diff --git a/resources/js/Pages/Admin/Profile/Edit.vue b/resources/js/Pages/Admin/Profile/Edit.vue
index 43b5ae14..21735e2e 100644
--- a/resources/js/Pages/Admin/Profile/Edit.vue
+++ b/resources/js/Pages/Admin/Profile/Edit.vue
@@ -1,3 +1,18 @@
+<script>
+import AuthenticatedAdminLayout from '@/Layouts/Admin/AuthenticatedLayout.vue';
+
+const pageTitle = 'Profile';
+const breadcrumbs = [
+    { label: 'Dashboard', route: route('admin.dashboard') },
+    { label: pageTitle, route: route('admin.profile.edit') },
+    { label: 'Edit' },
+];
+
+export default {
+    layout: (h, page) => h(AuthenticatedAdminLayout, { breadcrumbs }, () => page)
+}
+</script>
+
 <script setup>
 import DeleteUserForm from './Partials/DeleteUserForm.vue';
 import UpdatePasswordForm from './Partials/UpdatePasswordForm.vue';
@@ -12,83 +27,66 @@ defineProps({
         type: String,
     },
 });
-
-const pageTitle = 'Profile';
-const breadcrumbs = [
-    { label: 'Dashboard', route: route('admin.dashboard') },
-    { label: pageTitle, route: route('admin.profile.edit') },
-    { label: 'Edit' },
-];
 </script>
 
 <template>
     <InertiaHead :title="pageTitle" />
 
-    <AuthenticatedAdminLayout
-        :page-title="pageTitle"
-        :breadcrumbs="breadcrumbs"
+    <Container
+        vertical
+        fluid
     >
-        <Container :fluid="true">
-            <div class="space-y-4 md:space-y-8">
-                <Card :pt="{
-                    body: {
-                        class: 'max-w-2xl space-y-3',
-                    },
-                    caption: {
-                        class: 'space-y-1',
-                    },
-                }">
-                    <template #title>Profile Information</template>
-                    <template #subtitle>
-                        Update your account's profile information and email
-                        address.
-                    </template>
-                    <template #content>
-                        <UpdateProfileInformationForm
-                            :must-verify-email="mustVerifyEmail"
-                            :status="status"
-                        />
-                    </template>
-                </Card>
+        <PageTitleSection>
+            <template #title>
+                {{ pageTitle }}
+            </template>
+        </PageTitleSection>
+
+        <Card
+            pt:body:class="max-w-2xl space-y-3"
+            pt:caption:class="space-y-1"
+        >
+            <template #title>Profile Information</template>
+            <template #subtitle>
+                Update your account's profile information and email
+                address.
+            </template>
+            <template #content>
+                <UpdateProfileInformationForm
+                    :must-verify-email="mustVerifyEmail"
+                    :status="status"
+                />
+            </template>
+        </Card>
 
-                <Card :pt="{
-                    body: {
-                        class: 'max-w-2xl space-y-3',
-                    },
-                    caption: {
-                        class: 'space-y-1',
-                    },
-                }">
-                    <template #title>Update Password</template>
-                    <template #subtitle>
-                        Ensure your account is using a long, random password to
-                        stay secure.
-                    </template>
-                    <template #content>
-                        <UpdatePasswordForm />
-                    </template>
-                </Card>
+        <Card
+            pt:body:class="max-w-2xl space-y-3"
+            pt:caption:class="space-y-1"
+        >
+            <template #title>Update Password</template>
+            <template #subtitle>
+                Ensure your account is using a long, random password to
+                stay secure.
+            </template>
+            <template #content>
+                <UpdatePasswordForm />
+            </template>
+        </Card>
 
-                <Card :pt="{
-                    body: {
-                        class: 'max-w-2xl space-y-3',
-                    },
-                    caption: {
-                        class: 'space-y-1',
-                    },
-                }">
-                    <template #title>Delete Account</template>
-                    <template #subtitle>
-                        Once your account is deleted, all of its resources and
-                        data will be permanently deleted. Before deleting your
-                        account, please download any data or information that
-                        you wish to retain.
-                    </template>
-                    <template #content>
-                        <DeleteUserForm />
-                    </template>
-                </Card>
-            </div>
-        </Container>
-    </AuthenticatedAdminLayout>
+        <Card
+            pt:body:class="max-w-2xl space-y-3"
+            pt:caption:class="space-y-1"
+        >
+            <template #title>Delete Account</template>
+            <template #subtitle>
+                Once your account is deleted, all of its resources and
+                data will be permanently deleted. Before deleting your
+                account, please download any data or information that
+                you wish to retain.
+            </template>
+            <template #content>
+                <DeleteUserForm />
+            </template>
+        </Card>
+    </Container>
 </template>
diff --git a/resources/js/Pages/Admin/Users/Index.vue b/resources/js/Pages/Admin/Users/Index.vue
index abc31057..3d7eb671 100644
--- a/resources/js/Pages/Admin/Users/Index.vue
+++ b/resources/js/Pages/Admin/Users/Index.vue
@@ -1,3 +1,18 @@
+<script>
+import AuthenticatedAdminLayout from '@/Layouts/Admin/AuthenticatedLayout.vue';
+
+const pageTitle = 'Users';
+const breadcrumbs = [
+    { label: 'Dashboard', route: route('admin.dashboard') },
+    { label: pageTitle, route: route('admin.users.index') },
+    { label: 'List' },
+];
+
+export default {
+    layout: (h, page) => h(AuthenticatedAdminLayout, { breadcrumbs }, () => page)
+}
+</script>
+
 <script setup>
 import { ref, useTemplateRef } from 'vue';
 import { useLazyDataTable } from '@/Composables/useLazyDataTable';
@@ -8,13 +23,6 @@ const props = defineProps({
     users: Object,
 });
 
-const pageTitle = 'Users';
-const breadcrumbs = [
-    { label: 'Dashboard', route: route('admin.dashboard') },
-    { label: pageTitle, route: route('admin.users.index') },
-    { label: 'List' },
-];
-
 // User context menu
 const userContextMenu = useTemplateRef('user-context-menu');
 const userContextMenuItems = ref([]);
@@ -54,121 +62,122 @@ const {
 <template>
     <InertiaHead :title="pageTitle" />
 
-    <AuthenticatedAdminLayout
-        :page-title="pageTitle"
-        :breadcrumbs="breadcrumbs"
+    <Container
+        vertical
+        fluid
     >
-        <template #titleEnd>
-            <Button
-                v-if="filteredOrSorted"
-                severity="secondary"
-                type="button"
-                icon="pi pi-filter-slash"
-                label="Clear Filters"
-                outlined
-                @click="hardReset"
-            />
-        </template>
+        <PageTitleSection>
+            <template #title>
+                {{ pageTitle }}
+            </template>
+            <template #end>
+                <Button
+                    v-if="filteredOrSorted"
+                    severity="secondary"
+                    type="button"
+                    icon="pi pi-filter-slash"
+                    label="Clear Filters"
+                    outlined
+                    @click="hardReset"
+                />
+            </template>
+        </PageTitleSection>
 
-        <Container :fluid="true">
-            <div>
-                <Card pt:body:class="p-3">
-                    <template #content>
-                        <Menu
-                            ref="user-context-menu"
-                            class="shadow-sm"
-                            :model="userContextMenuItems"
-                            popup
-                        />
-                        <DataTable
-                            ref="dataTable"
-                            v-model:filters="filters"
-                            lazy
-                            paginator
-                            removableSort
-                            resizableColumns
-                            columnResizeMode="fit"
-                            :loading="processing"
-                            :value="users.data"
-                            :totalRecords="users.total"
-                            filterDisplay="row"
-                            :sortField="sorting.field"
-                            :sortOrder="sorting.order"
-                            :rows="users.per_page"
-                            :rowsPerPageOptions="[10, 20, 50, 100]"
-                            :first="firstDatasetIndex"
-                            paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
-                            currentPageReportTemplate="Showing {first} to {last} of {totalRecords} records"
-                            @filter="filter"
-                            @sort="sort"
-                            @page="paginate"
-                        >
-                            <template #empty>
-                                <div class="flex justify-center">
-                                    <Message
-                                        severity="warn"
-                                        icon="pi pi-exclamation-circle"
-                                        class="grow text-center flex justify-center"
-                                    >
-                                        No Users found.
-                                    </Message>
-                                </div>
-                            </template>
-                            <Column
-                                field="name"
-                                header="Name"
-                                sortable
-                                :showFilterMenu="false"
-                            >
-                                <template #filter="{ filterModel, filterCallback }">
-                                    <InputText
-                                        v-model="filterModel.value"
-                                        type="text"
-                                        placeholder="Search by name"
-                                        fluid
-                                        @input="debounceInputFilter(filterCallback)"
-                                    />
-                                </template>
-                                <template #body="slotProps">
-                                    {{ slotProps.data.name }}
-                                </template>
-                            </Column>
-                            <Column
-                                field="email"
-                                header="Email"
-                                sortable
-                                :showFilterMenu="false"
+        <Card pt:body:class="p-3">
+            <template #content>
+                <Menu
+                    ref="user-context-menu"
+                    class="shadow-sm"
+                    :model="userContextMenuItems"
+                    popup
+                />
+                <DataTable
+                    ref="dataTable"
+                    v-model:filters="filters"
+                    lazy
+                    paginator
+                    removableSort
+                    resizableColumns
+                    columnResizeMode="fit"
+                    :loading="processing"
+                    :value="users.data"
+                    :totalRecords="users.total"
+                    filterDisplay="row"
+                    :sortField="sorting.field"
+                    :sortOrder="sorting.order"
+                    :rows="users.per_page"
+                    :rowsPerPageOptions="[10, 20, 50, 100]"
+                    :first="firstDatasetIndex"
+                    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} records"
+                    @filter="filter"
+                    @sort="sort"
+                    @page="paginate"
+                >
+                    <template #empty>
+                        <div class="flex justify-center">
+                            <Message
+                                severity="warn"
+                                icon="pi pi-exclamation-circle"
+                                class="grow text-center flex justify-center"
                             >
-                                <template #filter="{ filterModel, filterCallback }">
-                                    <InputText
-                                        v-model="filterModel.value"
-                                        type="text"
-                                        placeholder="Search by Email"
-                                        fluid
-                                        @input="debounceInputFilter(filterCallback)"
-                                    />
-                                </template>
-                                <template #body="slotProps">
-                                    {{ slotProps.data.email }}
-                                </template>
-                            </Column>
-                            <Column header="Action">
-                                <template #body="{ data }">
-                                    <Button
-                                        v-tooltip.top="'Show User Actions'"
-                                        type="button"
-                                        severity="secondary"
-                                        text
-                                        rounded
-                                        icon="pi pi-ellipsis-v"
-                                        @click="toggleUserContextMenu($event, data)"
-                                    />
-                                </template>
-                            </Column>
-                        </DataTable>
+                                No Users found.
+                            </Message>
+                        </div>
                     </template>
-                </Card>
-            </div>
-        </Container>
-    </AuthenticatedAdminLayout>
+                    <Column
+                        field="name"
+                        header="Name"
+                        sortable
+                        :showFilterMenu="false"
+                    >
+                        <template #filter="{ filterModel, filterCallback }">
+                            <InputText
+                                v-model="filterModel.value"
+                                type="text"
+                                placeholder="Search by name"
+                                fluid
+                                @input="debounceInputFilter(filterCallback)"
+                            />
+                        </template>
+                        <template #body="slotProps">
+                            {{ slotProps.data.name }}
+                        </template>
+                    </Column>
+                    <Column
+                        field="email"
+                        header="Email"
+                        sortable
+                        :showFilterMenu="false"
+                    >
+                        <template #filter="{ filterModel, filterCallback }">
+                            <InputText
+                                v-model="filterModel.value"
+                                type="text"
+                                placeholder="Search by Email"
+                                fluid
+                                @input="debounceInputFilter(filterCallback)"
+                            />
+                        </template>
+                        <template #body="slotProps">
+                            {{ slotProps.data.email }}
+                        </template>
+                    </Column>
+                    <Column header="Action">
+                        <template #body="{ data }">
+                            <Button
+                                v-tooltip.top="'Show User Actions'"
+                                type="button"
+                                severity="secondary"
+                                icon="pi pi-ellipsis-v"
+                                rounded
+                                text
+                                @click="toggleUserContextMenu($event, data)"
+                            />
+                        </template>
+                    </Column>
+                </DataTable>
+            </template>
+        </Card>
+    </Container>
 </template>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index ee6fe6b4..e6972812 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -1,17 +1,17 @@
+<script setup>
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+
+defineOptions({ layout: AuthenticatedLayout });
+</script>
+
 <template>
     <InertiaHead title="Dashboard" />
-    <AuthenticatedLayout>
-        <template #header>
-            <h1 class="font-bold text-2xl leading-tight">Dashboard</h1>
-        </template>
-        <Container>
-            <div class="py-4 md:py-8">
-                <Card>
-                    <template #content>
-                        <p class="m-0">You are logged in!</p>
-                    </template>
-                </Card>
-            </div>
-        </Container>
-    </AuthenticatedLayout>
+
+    <Container vertical>
+        <Card>
+            <template #content>
+                <p class="m-0">You are logged in!</p>
+            </template>
+        </Card>
+    </Container>
 </template>
diff --git a/resources/js/Pages/Profile/Edit.vue b/resources/js/Pages/Profile/Edit.vue
index eb8568d3..f37446df 100644
--- a/resources/js/Pages/Profile/Edit.vue
+++ b/resources/js/Pages/Profile/Edit.vue
@@ -1,4 +1,5 @@
 <script setup>
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import DeleteUserForm from './Partials/DeleteUserForm.vue';
 import UpdatePasswordForm from './Partials/UpdatePasswordForm.vue';
 import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm.vue';
@@ -11,67 +12,65 @@ defineProps({
         type: String,
     },
 });
+
+defineOptions({ layout: AuthenticatedLayout });
 </script>
 
 <template>
     <InertiaHead title="Profile" />
 
-    <AuthenticatedLayout>
-        <template #header>
-            <h1 class="font-bold text-2xl leading-tight">Profile</h1>
-        </template>
+    <Container vertical>
+        <PageTitleSection>
+            <template #title>
+                Profile
+            </template>
+        </PageTitleSection>
 
-        <Container>
-            <div class="py-4 md:py-8">
-                <div class="space-y-4 md:space-y-8">
-                    <Card
-                        pt:body:class="max-w-2xl space-y-3"
-                        pt:caption:class="space-y-1"
-                    >
-                        <template #title>Profile Information</template>
-                        <template #subtitle>
-                            Update your account's profile information and email
-                            address.
-                        </template>
-                        <template #content>
-                            <UpdateProfileInformationForm
-                                :must-verify-email="mustVerifyEmail"
-                                :status="status"
-                            />
-                        </template>
-                    </Card>
+        <Card
+            pt:body:class="max-w-2xl space-y-3"
+            pt:caption:class="space-y-1"
+        >
+            <template #title>Profile Information</template>
+            <template #subtitle>
+                Update your account's profile information and email
+                address.
+            </template>
+            <template #content>
+                <UpdateProfileInformationForm
+                    :must-verify-email="mustVerifyEmail"
+                    :status="status"
+                />
+            </template>
+        </Card>
 
-                    <Card
-                        pt:body:class="max-w-2xl space-y-3"
-                        pt:caption:class="space-y-1"
-                    >
-                        <template #title>Update Password</template>
-                        <template #subtitle>
-                            Ensure your account is using a long, random password
-                            to stay secure.
-                        </template>
-                        <template #content>
-                            <UpdatePasswordForm />
-                        </template>
-                    </Card>
+        <Card
+            pt:body:class="max-w-2xl space-y-3"
+            pt:caption:class="space-y-1"
+        >
+            <template #title>Update Password</template>
+            <template #subtitle>
+                Ensure your account is using a long, random password
+                to stay secure.
+            </template>
+            <template #content>
+                <UpdatePasswordForm />
+            </template>
+        </Card>
 
-                    <Card
-                        pt:body:class="max-w-2xl space-y-3"
-                        pt:caption:class="space-y-1"
-                    >
-                        <template #title>Delete Account</template>
-                        <template #subtitle>
-                            Once your account is deleted, all of its resources
-                            and data will be permanently deleted. Before
-                            deleting your account, please download any data or
-                            information that you wish to retain.
-                        </template>
-                        <template #content>
-                            <DeleteUserForm />
-                        </template>
-                    </Card>
-                </div>
-            </div>
-        </Container>
-    </AuthenticatedLayout>
+        <Card
+            pt:body:class="max-w-2xl space-y-3"
+            pt:caption:class="space-y-1"
+        >
+            <template #title>Delete Account</template>
+            <template #subtitle>
+                Once your account is deleted, all of its resources
+                and data will be permanently deleted. Before
+                deleting your account, please download any data or
+                information that you wish to retain.
+            </template>
+            <template #content>
+                <DeleteUserForm />
+            </template>
+        </Card>
+    </Container>
 </template>
diff --git a/resources/js/Pages/Welcome.vue b/resources/js/Pages/Welcome.vue
index ecccd296..8583acb9 100644
--- a/resources/js/Pages/Welcome.vue
+++ b/resources/js/Pages/Welcome.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue';
+import { usePage } from '@inertiajs/vue3';
 import ToggleDarkModeButton from '@/Components/ToggleDarkModeButton.vue';
 
 const props = defineProps({
@@ -25,6 +26,7 @@ const props = defineProps({
 const dashboardRoute = computed(() => {
     return props.isAdmin ? route('admin.dashboard') : route('dashboard');
 });
+const page = usePage();
 </script>
 
 <template>
@@ -57,7 +59,7 @@ const dashboardRoute = computed(() => {
                                 class="underline text-primary hover:text-color"
                             >PrimeVue</a>.
                         </p>
-                        <template v-if="$page.props.auth.user">
+                        <template v-if="page.props.auth.user">
                             <InertiaLink :href="dashboardRoute">
                                 <Button
                                     label="Dashboard"
diff --git a/resources/js/app.js b/resources/js/app.js
index 9b7e32d9..b11e7002 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -11,9 +11,8 @@ import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
 import Tooltip from 'primevue/tooltip';
 
-import AuthenticatedAdminLayout from '@/Layouts/Admin/AuthenticatedLayout.vue';
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import Container from '@/Components/Container.vue';
+import PageTitleSection from '@/Components/PageTitleSection.vue';
 
 import customThemePreset from '@/theme/noir-preset';
 import { useDark } from '@vueuse/core';
@@ -49,9 +48,8 @@ createInertiaApp({
             .component('InertiaHead', Head)
             .component('InertiaLink', Link)
             .directive('tooltip', Tooltip)
-            .component('AuthenticatedAdminLayout', AuthenticatedAdminLayout)
-            .component('AuthenticatedLayout', AuthenticatedLayout)
             .component('Container', Container)
+            .component('PageTitleSection', PageTitleSection)
             .mount(el);
     },
     progress: {