diff --git a/src/resources/js/Layouts/AppLayout.vue b/src/resources/js/Layouts/AppLayout.vue
index eeeb34d..ee2cff6 100644
--- a/src/resources/js/Layouts/AppLayout.vue
+++ b/src/resources/js/Layouts/AppLayout.vue
@@ -1,290 +1,325 @@
+<script setup>
+import { ref } from 'vue'
+import { Head, Link } from '@inertiajs/inertia-vue3'
+import { Inertia } from '@inertiajs/inertia'
+import JetApplicationMark from '@/Jetstream/ApplicationMark.vue'
+import JetBanner from '@/Jetstream/Banner.vue'
+import JetDropdown from '@/Jetstream/Dropdown.vue'
+import JetDropdownLink from '@/Jetstream/DropdownLink.vue'
+import JetNavLink from '@/Jetstream/NavLink.vue'
+import JetResponsiveNavLink from '@/Jetstream/ResponsiveNavLink.vue'
+
+defineProps({
+  title: String,
+})
+
+// variables
+const showingNavigationDropdown = ref(false)
+
+// methods
+const switchToTeam = (team) => {
+  Inertia.put(route('current-team.update'), {
+    team_id: team.id,
+  }, {
+    preserveState: false,
+  })
+}
+
+const logout = () => {
+  Inertia.post(route('logout'))
+}
+</script>
+
 <template>
-    <div>
-        <Head :title="title" />
+    <JetBanner></JetBanner>
 
-        <div class="absolute top-0 mt-4 z-50">
-            <generic-notifications></generic-notifications>
-            <success-notifications></success-notifications>
-            <warning-notifications></warning-notifications>
-            <error-notifications></error-notifications>
-        </div>
+    <div class="min-h-screen bg-neutral-100">
+        <header class="bg-white shadow-lg">
+            <div class="max-w-7xl mx-auto">
+                <nav class="">
+                    <!-- Primary Navigation Menu -->
+                    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                        <div class="flex justify-between h-16">
+                            <div class="flex">
+                                <!-- Logo -->
+                                <div class="shrink-0 flex items-center">
+                                    <Link :href="route('home')">
+                                        <JetApplicationMark class="block h-9 w-auto"></JetApplicationMark>
+                                    </Link>
+                                </div>
 
-        <jet-banner />
-
-        <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
-            <div class="grid-container w-4/5 mx-auto grid">
-                <div class="nav">
-                    <div class="navh flex items-center justify-between lg:justify-center">
-                        <Link :href="route('dashboard')" class="flex flex-row items-center justify-center">
-                            <ApplicationMark class="block h-9 w-auto" />
-                            <span class="ml-3 font-bold text-xl dark:text-white">{{ $page.props.app_name }}</span>
-                        </Link>
-
-                        <div class="flex items-center lg:hidden">
-                            <button @click="showingNavigationDropdown = ! showingNavigationDropdown" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition">
-                                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                                    <path :class="{'hidden': showingNavigationDropdown, 'inline-flex': ! showingNavigationDropdown }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                                    <path :class="{'hidden': ! showingNavigationDropdown, 'inline-flex': showingNavigationDropdown }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-
-                    <nav class="navc">
-                        <div class="hidden lg:flex lg:flex-col">
-                            <SidenavLink :href="route('dashboard')" :active="route().current('dashboard')" :title="'Your Dashboard'">
-                                <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                                <span class="ml-2">Dashboard</span>
-                            </SidenavLink>
-                        </div>
-                        <!-- Responsive Navigation Menu -->
-                        <div :class="{'block': showingNavigationDropdown, 'hidden': ! showingNavigationDropdown}" class="lg:hidden">
-                            <div class="pt-2 pb-3 flex flex-col space-y-1">
-                                <Link :href="route('dashboard')" :active="route().current('dashboard')">
-                                    Dashboard
-                                </Link>
+                                <!-- Navigation Links -->
+                                <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
+                                    <JetNavLink :href="route('dashboard')" :active="route().current('dashboard')">
+                                        Dashboard
+                                    </JetNavLink>
+                                    <JetNavLink :href="route('dashboard.posts.index')" :active="route().current('dashboard.posts.*')">
+                                        Posts
+                                    </JetNavLink>
+                                    <JetNavLink :href="route('dashboard.categories.index')" :active="route().current('dashboard.categories.*')">
+                                        Categories
+                                    </JetNavLink>
+                                    <JetNavLink :href="route('dashboard.media.index')" :active="route().current('dashboard.media.*')">
+                                        Media
+                                    </JetNavLink>
+                                </div>
                             </div>
 
-                            <!-- Responsive Settings Options -->
-                            <div class="pt-4 pb-1 border-t border-gray-200">
-                                <div class="flex items-center px-4">
-                                    <div v-if="$page.props.jetstream.managesProfilePhotos" class="flex-shrink-0 mr-3" >
-                                        <img class="h-10 w-10 rounded-full object-cover" :src="$page.props.user.profile_photo_url" :alt="$page.props.user.name" />
-                                    </div>
+                            <div class="hidden sm:flex sm:items-center sm:ml-6">
+                                <div class="ml-3 relative">
+                                    <!-- Teams Dropdown -->
+                                    <JetDropdown v-if="$page.props.jetstream.hasTeamFeatures" align="right" width="60">
+                                        <template #trigger>
+                                            <span class="inline-flex rounded-md">
+                                                <button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition">
+                                                    {{ $page.props.user.current_team.name }}
 
-                                    <div>
-                                        <div class="font-medium text-base text-gray-800">{{ $page.props.user.name }}</div>
-                                        <div class="font-medium text-sm text-gray-500">{{ $page.props.user.email }}</div>
-                                    </div>
-                                </div>
-                                <div class="mt-3 flex flex-col space-y-1">
-                                    <ResponsiveNavLink :href="route('profile.show')" :active="route().current('profile.show')">
-                                        Profile
-                                    </ResponsiveNavLink>
+                                                    <svg
+                                                        class="ml-2 -mr-0.5 h-4 w-4"
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                        viewBox="0 0 20 20"
+                                                        fill="currentColor"
+                                                    >
+                                                        <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+                                                    </svg>
+                                                </button>
+                                            </span>
+                                        </template>
 
-                                    <ResponsiveNavLink :href="route('api-tokens.index')" :active="route().current('api-tokens.index')" v-if="$page.props.jetstream.hasApiFeatures">
-                                        API Tokens
-                                    </ResponsiveNavLink>
-
-                                    <!-- Authentication -->
-                                    <form method="POST" @submit.prevent="logout">
-                                        <ResponsiveNavLink as="button">
-                                            Log Out
-                                        </ResponsiveNavLink>
-                                    </form>
-
-                                    <!-- Team Management -->
-                                    <template v-if="$page.props.jetstream.hasTeamFeatures">
-                                        <div class="border-t border-gray-200"></div>
-
-                                        <div class="block px-4 py-2 text-xs text-gray-400">
-                                            Manage Team
-                                        </div>
-
-                                        <!-- Team Settings -->
-                                        <ResponsiveNavLink :href="route('teams.show', $page.props.user.current_team)" :active="route().current('teams.show')">
-                                            Team Settings
-                                        </ResponsiveNavLink>
-
-                                        <ResponsiveNavLink :href="route('teams.create')" :active="route().current('teams.create')" v-if="$page.props.jetstream.canCreateTeams">
-                                            Create New Team
-                                        </ResponsiveNavLink>
-
-                                        <div class="border-t border-gray-200"></div>
-
-                                        <!-- Team Switcher -->
-                                        <div class="block px-4 py-2 text-xs text-gray-400">
-                                            Switch Teams
-                                        </div>
-
-                                        <template v-for="team in $page.props.user.all_teams" :key="team.id">
-                                            <form @submit.prevent="switchToTeam(team)">
-                                                <ResponsiveNavLink as="button">
-                                                    <div class="flex items-center">
-                                                        <svg v-if="team.id == $page.props.user.current_team_id" class="mr-2 h-5 w-5 text-green-400" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-                                                        <div>{{ team.name }}</div>
+                                        <template #content>
+                                            <div class="w-60">
+                                                <!-- Team Management -->
+                                                <template v-if="$page.props.jetstream.hasTeamFeatures">
+                                                    <div class="block px-4 py-2 text-xs text-gray-400">
+                                                        Manage Team
                                                     </div>
-                                                </ResponsiveNavLink>
+
+                                                    <!-- Team Settings -->
+                                                    <JetDropdownLink :href="route('teams.show', $page.props.user.current_team)">
+                                                        Team Settings
+                                                    </JetDropdownLink>
+
+                                                    <JetDropdownLink v-if="$page.props.jetstream.canCreateTeams" :href="route('teams.create')">
+                                                        Create New Team
+                                                    </JetDropdownLink>
+
+                                                    <div class="border-t border-gray-100" />
+
+                                                    <!-- Team Switcher -->
+                                                    <div class="block px-4 py-2 text-xs text-gray-400">
+                                                        Switch Teams
+                                                    </div>
+
+                                                    <template v-for="team in $page.props.user.all_teams" :key="team.id">
+                                                        <form @submit.prevent="switchToTeam(team)">
+                                                            <JetDropdownLink as="button">
+                                                                <div class="flex items-center">
+                                                                    <svg
+                                                                        v-if="team.id == $page.props.user.current_team_id"
+                                                                        class="mr-2 h-5 w-5 text-green-400"
+                                                                        fill="none"
+                                                                        stroke-linecap="round"
+                                                                        stroke-linejoin="round"
+                                                                        stroke-width="2"
+                                                                        stroke="currentColor"
+                                                                        viewBox="0 0 24 24"
+                                                                    ><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                                                                    <div>{{ team.name }}</div>
+                                                                </div>
+                                                            </JetDropdownLink>
+                                                        </form>
+                                                    </template>
+                                                </template>
+                                            </div>
+                                        </template>
+                                    </JetDropdown>
+                                </div>
+
+                                <!-- Settings Dropdown -->
+                                <div class="ml-3 relative">
+                                    <JetDropdown align="right" width="48">
+                                        <template #trigger>
+                                            <button v-if="$page.props.jetstream.managesProfilePhotos" class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition">
+                                                <picture class="h-8 w-8 rounded-full">
+                                                    <source v-for="(path,codec) in $page.props.user.profile_photo_paths.paths" :key="codec" :srcset="$page.props.user.profile_photo_paths.urlBase+'/'+path" :type="'image/'+codec" height="32" width="32" class="h-8 w-8 rounded-full object-cover">
+                                                    <img :src="$page.props.user.profile_photo_url" :alt="$page.props.user.name" height="32" width="32" class="h-8 w-8 rounded-full object-cover">
+                                                </picture>
+                                            </button>
+
+                                            <span v-else class="inline-flex rounded-md">
+                                                <button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition">
+                                                    {{ $page.props.user.name }}
+
+                                                    <svg
+                                                        class="ml-2 -mr-0.5 h-4 w-4"
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                        viewBox="0 0 20 20"
+                                                        fill="currentColor"
+                                                    >
+                                                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                                                    </svg>
+                                                </button>
+                                            </span>
+                                        </template>
+
+                                        <template #content>
+                                            <!-- Account Management -->
+                                            <div class="block px-4 py-2 text-xs text-gray-400">
+                                                Manage Account
+                                            </div>
+
+                                            <JetDropdownLink :href="route('profile.show')">
+                                                Profile
+                                            </JetDropdownLink>
+
+                                            <JetDropdownLink v-if="$page.props.jetstream.hasApiFeatures" :href="route('api-tokens.index')">
+                                                API Tokens
+                                            </JetDropdownLink>
+
+                                            <div class="border-t border-gray-100" />
+
+                                            <!-- Authentication -->
+                                            <form @submit.prevent="logout">
+                                                <JetDropdownLink as="button">
+                                                    Log Out
+                                                </JetDropdownLink>
                                             </form>
                                         </template>
-                                    </template>
+                                    </JetDropdown>
                                 </div>
                             </div>
-                        </div>
-                    </nav>
-                </div>
-                <div class="main">
-                    <div class="mainh">
-                        <div class="flex items-center">
-                            <h2 class="font-semibold text-xl text-gray-800 dark:text-white leading-tight">
-                                <slot name="header"></slot>
-                            </h2>
-                        </div>
-                        <div class="flex flex-row items-center justify-end">
-                            <!-- <ThemeSwitcher></ThemeSwitcher> -->
 
-                            <div class="ml-3 relative">
-                                <!-- Teams Dropdown -->
-                                <jet-dropdown align="right" width="60" v-if="$page.props.jetstream.hasTeamFeatures">
-                                    <template #trigger>
-                                        <span class="inline-flex rounded-md">
-                                            <button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition">
-                                                {{ $page.props.user.current_team.name }}
-
-                                                <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                                    <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
-                                                </svg>
-                                            </button>
-                                        </span>
-                                    </template>
-
-                                    <template #content>
-                                        <div class="w-60">
-                                            <!-- Team Management -->
-                                            <template v-if="$page.props.jetstream.hasTeamFeatures">
-                                                <div class="block px-4 py-2 text-xs text-gray-400">
-                                                    Manage Team
-                                                </div>
-
-                                                <!-- Team Settings -->
-                                                <jet-dropdown-link :href="route('teams.show', $page.props.user.current_team)">
-                                                    Team Settings
-                                                </jet-dropdown-link>
-
-                                                <jet-dropdown-link :href="route('teams.create')" v-if="$page.props.jetstream.canCreateTeams">
-                                                    Create New Team
-                                                </jet-dropdown-link>
-
-                                                <div class="border-t border-gray-100"></div>
-
-                                                <!-- Team Switcher -->
-                                                <div class="block px-4 py-2 text-xs text-gray-400">
-                                                    Switch Teams
-                                                </div>
-
-                                                <template v-for="team in $page.props.user.all_teams" :key="team.id">
-                                                    <form @submit.prevent="switchToTeam(team)">
-                                                        <jet-dropdown-link as="button">
-                                                            <div class="flex items-center">
-                                                                <svg v-if="team.id == $page.props.user.current_team_id" class="mr-2 h-5 w-5 text-green-400" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-                                                                <div>{{ team.name }}</div>
-                                                            </div>
-                                                        </jet-dropdown-link>
-                                                    </form>
-                                                </template>
-                                            </template>
-                                        </div>
-                                    </template>
-                                </jet-dropdown>
-                            </div>
-
-                            <!-- Settings Dropdown -->
-                            <div class="ml-3 relative">
-                                <jet-dropdown align="right" width="48">
-                                    <template #trigger>
-                                        <button v-if="$page.props.jetstream.managesProfilePhotos" class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition">
-                                            <img class="h-8 w-8 rounded-full object-cover" :src="$page.props.user.profile_photo_url" :alt="$page.props.user.name" />
-                                        </button>
-
-                                        <span v-else class="inline-flex rounded-md">
-                                            <button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition">
-                                                {{ $page.props.user.name }}
-
-                                                <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-                                                </svg>
-                                            </button>
-                                        </span>
-                                    </template>
-
-                                    <template #content>
-                                        <!-- Account Management -->
-                                        <div class="block px-4 py-2 text-xs text-gray-400">
-                                            Manage Account
-                                        </div>
-
-                                        <jet-dropdown-link :href="route('profile.show')">
-                                            Profile
-                                        </jet-dropdown-link>
-
-                                        <jet-dropdown-link :href="route('api-tokens.index')" v-if="$page.props.jetstream.hasApiFeatures">
-                                            API Tokens
-                                        </jet-dropdown-link>
-
-                                        <div class="border-t border-gray-100"></div>
-
-                                        <!-- Authentication -->
-                                        <form @submit.prevent="logout">
-                                            <jet-dropdown-link as="button">
-                                                Log Out
-                                            </jet-dropdown-link>
-                                        </form>
-                                    </template>
-                                </jet-dropdown>
+                            <!-- Hamburger -->
+                            <div class="-mr-2 flex items-center sm:hidden">
+                                <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition" @click="showingNavigationDropdown = ! showingNavigationDropdown">
+                                    <svg
+                                        class="h-6 w-6"
+                                        stroke="currentColor"
+                                        fill="none"
+                                        viewBox="0 0 24 24"
+                                    >
+                                        <path
+                                            :class="{'hidden': showingNavigationDropdown, 'inline-flex': ! showingNavigationDropdown }"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            stroke-width="2"
+                                            d="M4 6h16M4 12h16M4 18h16"
+                                        />
+                                        <path
+                                            :class="{'hidden': ! showingNavigationDropdown, 'inline-flex': showingNavigationDropdown }"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            stroke-width="2"
+                                            d="M6 18L18 6M6 6l12 12"
+                                        />
+                                    </svg>
+                                </button>
                             </div>
                         </div>
                     </div>
-                    <main class="mainc">
-                        <slot></slot>
-                    </main>
-                </div>
+
+                    <!-- Responsive Navigation Menu -->
+                    <div :class="{'block': showingNavigationDropdown, 'hidden': ! showingNavigationDropdown}" class="sm:hidden">
+                        <div class="pt-2 pb-3 space-y-1">
+                            <JetResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')">
+                                Dashboard
+                            </JetResponsiveNavLink>
+                        </div>
+
+                        <!-- Responsive Settings Options -->
+                        <div class="pt-4 pb-1 border-t border-gray-200">
+                            <div class="flex items-center px-4">
+                                <div v-if="$page.props.jetstream.managesProfilePhotos" class="shrink-0 mr-3">
+                                    <img class="h-10 w-10 rounded-full object-cover" :src="$page.props.user.profile_photo_url" :alt="$page.props.user.name">
+                                </div>
+
+                                <div>
+                                    <div class="font-medium text-base text-gray-800">
+                                        {{ $page.props.user.name }}
+                                    </div>
+                                    <div class="font-medium text-sm text-gray-500">
+                                        {{ $page.props.user.email }}
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="mt-3 space-y-1">
+                                <JetResponsiveNavLink :href="route('profile.show')" :active="route().current('profile.show')">
+                                    Profile
+                                </JetResponsiveNavLink>
+
+                                <JetResponsiveNavLink v-if="$page.props.jetstream.hasApiFeatures" :href="route('api-tokens.index')" :active="route().current('api-tokens.index')">
+                                    API Tokens
+                                </JetResponsiveNavLink>
+
+                                <!-- Authentication -->
+                                <form method="POST" @submit.prevent="logout">
+                                    <JetResponsiveNavLink as="button">
+                                        Log Out
+                                    </JetResponsiveNavLink>
+                                </form>
+
+                                <!-- Team Management -->
+                                <template v-if="$page.props.jetstream.hasTeamFeatures">
+                                    <div class="border-t border-gray-200" />
+
+                                    <div class="block px-4 py-2 text-xs text-gray-400">
+                                        Manage Team
+                                    </div>
+
+                                    <!-- Team Settings -->
+                                    <JetResponsiveNavLink :href="route('teams.show', $page.props.user.current_team)" :active="route().current('teams.show')">
+                                        Team Settings
+                                    </JetResponsiveNavLink>
+
+                                    <JetResponsiveNavLink v-if="$page.props.jetstream.canCreateTeams" :href="route('teams.create')" :active="route().current('teams.create')">
+                                        Create New Team
+                                    </JetResponsiveNavLink>
+
+                                    <div class="border-t border-gray-200" />
+
+                                    <!-- Team Switcher -->
+                                    <div class="block px-4 py-2 text-xs text-gray-400">
+                                        Switch Teams
+                                    </div>
+
+                                    <template v-for="team in $page.props.user.all_teams" :key="team.id">
+                                        <form @submit.prevent="switchToTeam(team)">
+                                            <JetResponsiveNavLink as="button">
+                                                <div class="flex items-center">
+                                                    <svg
+                                                        v-if="team.id == $page.props.user.current_team_id"
+                                                        class="mr-2 h-5 w-5 text-green-400"
+                                                        fill="none"
+                                                        stroke-linecap="round"
+                                                        stroke-linejoin="round"
+                                                        stroke-width="2"
+                                                        stroke="currentColor"
+                                                        viewBox="0 0 24 24"
+                                                    ><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                                                    <div>{{ team.name }}</div>
+                                                </div>
+                                            </JetResponsiveNavLink>
+                                        </form>
+                                    </template>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                </nav>
+
+                <template v-if="$slots.header">
+                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+                        <slot name="header"></slot>
+                    </div>
+                </template>
+            </div>
+        </header>
+
+        <div class="py-12">
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+                <slot></slot>
             </div>
         </div>
     </div>
 </template>
-
-<script>
-import { defineComponent, ref } from 'vue'
-import { Head, Link } from '@inertiajs/inertia-vue3'
-import SuccessNotifications from '@/Components/Notifications/SuccessNotifications.vue'
-import ErrorNotifications from '@/Components/Notifications/ErrorNotifications.vue'
-import GenericNotifications from '@/Components/Notifications/GenericNotifications.vue'
-import WarningNotifications from '@/Components/Notifications/WarningNotifications.vue'
-import ApplicationMark from '@/Jetstream/ApplicationMark.vue'
-import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue'
-import SidenavLink from '@/Components/SidenavLink.vue'
-import JetBanner from '@/Jetstream/Banner.vue'
-import JetDropdown from '@/Jetstream/Dropdown.vue'
-import JetDropdownLink from '@/Jetstream/DropdownLink.vue'
-
-export default defineComponent({
-  props: {
-    title: String,
-  },
-
-  components: {
-    Head,
-    Link,
-    SuccessNotifications,
-    ErrorNotifications,
-    GenericNotifications,
-    WarningNotifications,
-    ApplicationMark,
-    ResponsiveNavLink,
-    SidenavLink,
-    JetBanner,
-    JetDropdown,
-    JetDropdownLink,
-  },
-
-  setup(props) {
-    let showingNavigationDropdown = ref(false)
-
-    return { showingNavigationDropdown }
-  },
-
-  methods: {
-    switchToTeam(team) {
-      this.$inertia.put(route('current-team.update'), {
-        'team_id': team.id
-      }, {
-        preserveState: false
-      })
-    },
-
-    logout() {
-      this.$inertia.post(route('logout'));
-    },
-  }
-})
-</script>
diff --git a/src/resources/js/Layouts/AuthLayout.vue b/src/resources/js/Layouts/AuthLayout.vue
new file mode 100644
index 0000000..dfa20e6
--- /dev/null
+++ b/src/resources/js/Layouts/AuthLayout.vue
@@ -0,0 +1,19 @@
+<script setup>
+import { Head } from '@inertiajs/inertia-vue3'
+
+defineProps({
+  title: String,
+})
+</script>
+
+<template>
+    <Head :title="title"></Head>
+
+    <div class="min-h-screen w-full bg-zinc-500">
+        <div class="grid items-center min-h-screen max-w-screen-lg mx-auto">
+            <div class="grid auto-rows-max gap-y-6">
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/resources/js/Layouts/BaseLayout.vue b/src/resources/js/Layouts/BaseLayout.vue
new file mode 100644
index 0000000..dfce5dd
--- /dev/null
+++ b/src/resources/js/Layouts/BaseLayout.vue
@@ -0,0 +1,15 @@
+<script setup>
+import { Head } from '@inertiajs/inertia-vue3'
+
+defineProps({
+  title: String,
+})
+</script>
+
+<template>
+    <Head :title="title"></Head>
+
+    <div class="min-h-screen bg-neutral-100">
+        <slot></slot>
+    </div>
+</template>
diff --git a/src/resources/js/Layouts/GuestLayout.vue b/src/resources/js/Layouts/GuestLayout.vue
new file mode 100644
index 0000000..e1fb686
--- /dev/null
+++ b/src/resources/js/Layouts/GuestLayout.vue
@@ -0,0 +1,59 @@
+<script setup>
+import { Head, Link } from '@inertiajs/inertia-vue3'
+import JetApplicationMark from '@/Jetstream/ApplicationMark.vue'
+
+defineProps({
+  title: String,
+})
+</script>
+
+<template>
+    <Head :title="title"></Head>
+
+    <div class="min-h-screen bg-neutral-100">
+        <header class="bg-white shadow-lg">
+            <div class="max-w-7xl mx-auto">
+                <nav class="">
+                    <div class="flex justify-between h-16">
+                        <div class="flex">
+                            <!-- Logo -->
+                            <div class="shrink-0 flex items-center">
+                                <Link :href="route('home')">
+                                    <JetApplicationMark class="block h-9 w-auto"></JetApplicationMark>
+                                </Link>
+                            </div>
+
+                            <!-- Navigation Links -->
+                            <nav class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
+                                <!-- <JetNavLink :href="route('categories')">Dashboard</JetNavLink> -->
+                            </nav>
+                        </div>
+                        <div class="hidden sm:flex sm:items-center sm:ml-6">
+                            <div class="ml-3 relative">
+                                <Link v-if="$page.props.user" :href="route('dashboard')" class="text-sm text-gray-700 underline">
+                                    Dashboard
+                                </Link>
+
+                                <template v-else>
+                                    <Link :href="route('login')" class="text-sm text-gray-700 underline">
+                                        Log in
+                                    </Link>
+
+                                    <Link v-if="$page.props.canRegister" :href="route('register')" class="ml-4 text-sm text-gray-700 underline">
+                                        Register
+                                    </Link>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                </nav>
+            </div>
+        </header>
+
+        <div class="py-12">
+            <div class="max-w-7xl mx-auto">
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>
