diff --git a/resources/js/Components/DashboardLayout/TopbarDropdown.vue b/resources/js/Components/DashboardLayout/TopbarDropdown.vue
index 6edd373..3525768 100644
--- a/resources/js/Components/DashboardLayout/TopbarDropdown.vue
+++ b/resources/js/Components/DashboardLayout/TopbarDropdown.vue
@@ -16,15 +16,21 @@ const logout = () => Inertia.post(route('logout'))
 }
 
 .slide-enter-from, .slide-leave-to {
-  right: -15rem;
+  right: -100vw;
+}
+
+@media (min-width: 669px) {
+  .slide-enter-from, .slide-leave-to {
+    right: -15rem;
+  }
 }
 </style>
 
 <template>
-  <div ref="container" class="flex-none flex items-center justify-between space-x-2 w-full max-w-xs h-14 px-3">
-    <img :src="user.profile_photo_url" :alt="user.name" class="flex-none rounded-full w-10 h-10">
+  <div ref="container" class="flex-none flex items-center justify-end sm:justify-between space-x-2 sm:w-full sm:max-w-xs h-14 sm:px-3">
+    <img :src="user.profile_photo_url" :alt="user.name" class="hidden sm:block flex-none rounded-full w-10 h-10">
 
-    <p class="font-semibold lowercase first-letter:capitalize truncate w-full">{{ user.name }}</p>
+    <p class="hidden sm:inline font-semibold lowercase first-letter:capitalize truncate w-full">{{ user.name }}</p>
 
     <div class="flex-none w-14 h-14 p-3">
       <button @click.prevent="open = ! open" class="rounded-md border dark:border-gray-600 w-full h-full text-white dark:text-gray-700 transition-all ease-in-out duration-150 hover:border-gray-700 hover:text-gray-900">
@@ -34,7 +40,7 @@ const logout = () => Inertia.post(route('logout'))
   </div>
 
   <transition name="slide">
-    <div v-if="open" class="fixed sm:right-4 top-12 w-full max-w-xl sm:w-48 bg-white dark:bg-gray-700 rounded-md shadow-xl">
+    <div v-if="open" class="fixed right-0 sm:right-4 top-12 w-full sm:max-w-xl sm:w-48 bg-white dark:bg-gray-700 rounded-md shadow-xl">
       <Link :href="route('profile.show')" as="button" class="w-full border-l-8 border-transparent dark:hover:border-gray-600 px-4 py-2 rounded-t-md transition-all ease-linear duration-150 hover:bg-gray-800">
         <div class="flex items-center space-x-2 dark:text-white font-semibold">
           <Icon name="user" />
diff --git a/resources/js/Layouts/DashboardLayout.vue b/resources/js/Layouts/DashboardLayout.vue
index b0a7005..ea78505 100644
--- a/resources/js/Layouts/DashboardLayout.vue
+++ b/resources/js/Layouts/DashboardLayout.vue
@@ -30,13 +30,15 @@ onMounted(() => window.addEventListener('resize', () => open.value = window.inne
   <div class="flex bg-gray-200 dark:bg-gray-900 w-full h-screen max-h-screen font-sans">
     <Head :title="title" />
 
-    <div class="flex-none flex flex-col transition-all ease-in-out duration-300" :class="`${themes().get('sidebar', 'bg-gray-700 text-gray-200 hover:bg-gray-800 hover:text-gray-100 transition-all ease-in-out duration-150').replace(/hover:(bg|text)-(.*?)-(\d+)/)} ${open ? 'w-60' : 'w-0'}`">
-      <div class="flex-none flex items-center justify-between w-full h-14 px-2" :class="themes().get('topbar', 'bg-cyan-500 text-gray-700 hover:bg-cyan-600 hover:text-gray-800 transition-all ease-in-out duration-150').replace(/hover:(bg|text)-(.*?)-(\d+)/, '')">
+    <div ref="sidebar" class="fixed sm:static flex-none flex flex-col h-full transition-all ease-in-out duration-300 z-10" :class="`${themes().get('sidebar', 'bg-gray-700 text-gray-200 hover:bg-gray-800 hover:text-gray-100 transition-all ease-in-out duration-100').replace(/hover:(bg|text)-(.*?)-(\d+)/)} ${open ? 'w-full sm:w-60' : 'w-0'}`">
+      <div v-if="open" class="flex-none flex items-center justify-between w-full h-14 px-2" :class="themes().get('topbar', 'bg-cyan-500 text-gray-700 hover:bg-cyan-600 hover:text-gray-800 transition-all ease-in-out duration-150').replace(/hover:(bg|text)-(.*?)-(\d+)/, '')">
         <Toggler @toggle="open = ! open" class="sm:hidden" />
 
         <h1 class="text-2xl text-center font-bold w-full">Template</h1>
 
-        <Toggler class="sm:hidden" />
+        <div class="flex-none sm:hidden">
+          <TopbarDropdown />
+        </div>
       </div>
 
       <Sidebar v-if="open" />
