diff --git a/web/src/ui/components/AppBackdrop.vue b/web/src/ui/components/AppBackdrop.vue
index 17625098..15ae937a 100644
--- a/web/src/ui/components/AppBackdrop.vue
+++ b/web/src/ui/components/AppBackdrop.vue
@@ -14,7 +14,7 @@ const close = () => {
 </script>
 
 <template>
-  <div v-if="open" class="z-20 fixed inset-0 bg-black opacity-50" @click="close" />
+  <div v-if="open" class="z-30 fixed inset-0 bg-black opacity-50" @click="close" />
 </template>
 
 <style scoped></style>
diff --git a/web/src/ui/components/AppButton.vue b/web/src/ui/components/AppButton.vue
index 5bbabad9..82c0791f 100644
--- a/web/src/ui/components/AppButton.vue
+++ b/web/src/ui/components/AppButton.vue
@@ -19,7 +19,7 @@ const computedClasses = computed(() => {
 </script>
 
 <template>
-  <div :class="containerClass">
+  <div :class="containerClass" class="lg:px-0">
     <RouterLink v-if="props.type === 'link'" :to="props.to as string" :class="computedClasses">
       <slot />
     </RouterLink>
diff --git a/web/src/ui/components/AppList.vue b/web/src/ui/components/AppList.vue
index 5d5f3bfc..9f8bc3dd 100644
--- a/web/src/ui/components/AppList.vue
+++ b/web/src/ui/components/AppList.vue
@@ -25,6 +25,7 @@ const onFetch = async () => {
 <style scoped>
 ul {
   @apply divide-y divide-gray-100 bg-white border-t border-b border-gray-200 mb-4;
+  @apply lg:rounded-md lg:border-x;
 
   li.fetching {
     @apply h-16 flex justify-center items-center text-gray-800;
diff --git a/web/src/ui/components/AppListItemInput.vue b/web/src/ui/components/AppListItemInput.vue
index 91bbdd79..4c714fee 100644
--- a/web/src/ui/components/AppListItemInput.vue
+++ b/web/src/ui/components/AppListItemInput.vue
@@ -43,5 +43,6 @@ const onChange = () => {
 <style scoped>
 input {
   @apply block w-full border-0 bg-white px-4 py-5 text-gray-900 focus:ring-0 placeholder:text-gray-400 font-medium;
+  @apply lg:rounded-md;
 }
 </style>
diff --git a/web/src/ui/components/NavigationMobile.vue b/web/src/ui/components/AppNavBottom.vue
similarity index 69%
rename from web/src/ui/components/NavigationMobile.vue
rename to web/src/ui/components/AppNavBottom.vue
index f4c90830..cf32efee 100644
--- a/web/src/ui/components/NavigationMobile.vue
+++ b/web/src/ui/components/AppNavBottom.vue
@@ -39,22 +39,27 @@ const navigation = [
 
 <template>
   <nav>
-    <RouterLink v-for="item in navigation" :key="item.href" :to="item.href" class="relative">
-      <component :is="isActive(item.href) ? item.iconActive : item.icon" class="h-6 w-6" />
-      <span
-        v-if="item.href === '/notifications' && notificationStore.unreadCount > 0"
-        class="badge"
-      >
-        {{ notificationStore.unreadCount }}
-      </span>
-    </RouterLink>
+    <div class="container">
+      <RouterLink v-for="item in navigation" :key="item.href" :to="item.href" class="relative">
+        <component :is="isActive(item.href) ? item.iconActive : item.icon" class="h-6 w-6" />
+        <span
+          v-if="item.href === '/notifications' && notificationStore.unreadCount > 0"
+          class="badge"
+        >
+          {{ notificationStore.unreadCount }}
+        </span>
+      </RouterLink>
+    </div>
   </nav>
 </template>
 
 <style scoped>
 nav {
-  @apply fixed w-full bottom-0 z-10 h-16 px-8 bg-white border-t-2 border-gray-200;
-  @apply lg:hidden flex justify-between items-center;
+  @apply fixed w-full bottom-0 z-10 bg-white border-t-2 border-gray-200;
+
+  .container {
+    @apply flex justify-between items-center max-w-7xl h-16 px-8 mx-auto;
+  }
 }
 
 .badge {
diff --git a/web/src/ui/components/AppNavTop.vue b/web/src/ui/components/AppNavTop.vue
new file mode 100644
index 00000000..a9aacd2b
--- /dev/null
+++ b/web/src/ui/components/AppNavTop.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { type User } from '@/proto/api/v1/shared_pb.ts'
+import { nextTick, ref } from 'vue'
+import { searchUsers } from '@/http/requests.ts'
+import { usePageTitleStore } from '@/stores/pageTitle.ts'
+import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
+import { XMarkIcon } from '@heroicons/vue/24/outline'
+
+const searchBarOpen = ref(false)
+const input = ref<HTMLInputElement | null>(null)
+const users = ref(Array<User>())
+
+const pageTitleStore = usePageTitleStore()
+const openSearchBar = () => {
+  searchBarOpen.value = true
+  nextTick(() => {
+    input.value?.focus()
+  })
+}
+
+const closeSearchBar = () => {
+  users.value = []
+  searchBarOpen.value = false
+}
+
+const onSearchUsers = async () => {
+  if (!input.value) return
+
+  if ((input.value.value?.length ?? 0) < 3) {
+    users.value = []
+    return
+  }
+
+  const res = await searchUsers(input.value.value, new Uint8Array(0))
+  if (!res) return
+
+  users.value = res.users
+}
+</script>
+
+<template>
+  <nav>
+    <div class="container">
+      <template v-if="searchBarOpen">
+        <form class="w-full">
+          <input
+            ref="input"
+            type="text"
+            class="w-full text-sm border-none focus:ring-0"
+            placeholder="Search users"
+            @keyup="onSearchUsers"
+          />
+        </form>
+        <ul
+          v-if="users.length > 0"
+          class="absolute bg-gray-100 border-b-white border-b-2 left-0 right-0 top-16 divide-y divide-white max-w-7xl mx-auto lg:rounded-b-md"
+        >
+          <li v-for="user in users" :key="user.id" @click="closeSearchBar">
+            <RouterLink :to="`/users/${user.id}`" class="block px-5 py-5 text-sm font-medium">
+              {{ user.firstName }} {{ user.lastName }}
+            </RouterLink>
+          </li>
+        </ul>
+        <XMarkIcon class="w-8 h-6 cursor-pointer" @click="closeSearchBar" />
+      </template>
+      <template v-else>
+        <RouterLink to="/">
+          <img class="h-auto w-8" src="/favicon.png" />
+        </RouterLink>
+        <div class="flex flex-1 gap-x-4 justify-center">
+          <p class="uppercase text-sm font-semibold text-gray-900">
+            {{ pageTitleStore.pageTitle }}
+          </p>
+        </div>
+        <MagnifyingGlassIcon class="w-8 h-6 cursor-pointer" @click="openSearchBar" />
+      </template>
+    </div>
+  </nav>
+  <div
+    v-if="searchBarOpen"
+    class="fixed z-20 top-0 left-0 right-0 bottom-0 bg-black opacity-50"
+    @click="closeSearchBar"
+  />
+</template>
+
+<style scoped>
+nav {
+  @apply sticky top-0 z-30  border-b-2 border-gray-200 bg-white;
+
+  .container {
+    @apply flex items-center justify-between max-w-7xl mx-auto  gap-x-4  px-4 h-16;
+  }
+}
+</style>
diff --git a/web/src/ui/components/CardWorkout.vue b/web/src/ui/components/CardWorkout.vue
index cebb5625..f6e41ccb 100644
--- a/web/src/ui/components/CardWorkout.vue
+++ b/web/src/ui/components/CardWorkout.vue
@@ -60,9 +60,9 @@ const formatComment = computed(() => {
 <template>
   <div
     v-if="!workoutDeleted"
-    class="divide-y divide-gray-100 bg-white mb-4 border-t border-b border-gray-200"
+    class="divide-y divide-gray-100 bg-white mb-4 border-t border-b border-gray-200 lg:rounded-md lg:border-x"
   >
-    <div class="px-4 py-3">
+    <div class="px-4 py-4">
       <div class="flex items-center justify-between">
         <div class="flex items-center">
           <UserCircleIcon class="size-10 text-gray-900" />
@@ -76,7 +76,7 @@ const formatComment = computed(() => {
         <DropdownButton v-if="workout.user?.id === authStore.userID" :items="dropdownItems" />
       </div>
     </div>
-    <div class="pl-16 pr-4 py-3">
+    <div class="pl-16 pr-4 py-4">
       <CardWorkoutExercise
         v-for="exerciseSet in workout.exerciseSets"
         :key="exerciseSet.exercise?.id"
@@ -85,7 +85,7 @@ const formatComment = computed(() => {
         :sets="exerciseSet.sets"
       />
     </div>
-    <div class="pl-16 pr-4 py-3">
+    <div class="pl-16 pr-4 py-4">
       <RouterLink
         :to="`/workouts/${workout.id}`"
         class="pl-1 text-sm text-gray-900 uppercase font-medium"
@@ -93,7 +93,7 @@ const formatComment = computed(() => {
         {{ workout.comments.length }} {{ formatComment }}
       </RouterLink>
     </div>
-    <div v-if="!compact" class="px-4 py-3">
+    <div v-if="!compact" class="px-4 py-4">
       <CardWorkoutComment
         v-for="comment in comments"
         :key="comment.id"
diff --git a/web/src/ui/components/UserDashboard.vue b/web/src/ui/components/UserDashboard.vue
index ccdab91f..b0fd549b 100644
--- a/web/src/ui/components/UserDashboard.vue
+++ b/web/src/ui/components/UserDashboard.vue
@@ -1,237 +1,23 @@
 <script setup lang="ts">
-import type { User } from '@/proto/api/v1/shared_pb.ts'
-
-import { computed, nextTick, ref } from 'vue'
-import { searchUsers } from '@/http/requests.ts'
-import { RouterView, useRoute } from 'vue-router'
+import { RouterView } from 'vue-router'
 import AppAlert from '@/ui/components/AppAlert.vue'
-import { usePageTitleStore } from '@/stores/pageTitle.ts'
-import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
-import NavigationMobile from '@/ui/components/NavigationMobile.vue'
-import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
-import {
-  ArrowPathRoundedSquareIcon,
-  BellIcon,
-  BookOpenIcon,
-  HomeIcon,
-  UserIcon,
-  XMarkIcon,
-} from '@heroicons/vue/24/outline'
-
-const navigation = [
-  { href: '/home', icon: HomeIcon, name: 'Home' },
-  { href: '/routines', icon: ArrowPathRoundedSquareIcon, name: 'Routines' },
-  { href: '/exercises', icon: BookOpenIcon, name: 'Exercises' },
-  { href: '/notifications', icon: BellIcon, name: 'Notifications' },
-  { href: '/profile', icon: UserIcon, name: 'Profile' },
-]
-
-const sidebarOpen = ref(false)
-const searchBarOpen = ref(false)
-const input = ref<HTMLInputElement | null>(null)
-const route = useRoute()
-const users = ref(Array<User>())
-
-const isActive = (basePath: string) => computed(() => route.path.startsWith(basePath))
-
-const pageTitleStore = usePageTitleStore()
-const openSearchBar = () => {
-  searchBarOpen.value = true
-  nextTick(() => {
-    input.value?.focus()
-  })
-}
-
-const closeSearchBar = () => {
-  users.value = []
-  searchBarOpen.value = false
-}
-
-const onSearchUsers = async () => {
-  if (!input.value) return
-
-  if ((input.value.value?.length ?? 0) < 3) {
-    users.value = []
-    return
-  }
-
-  const res = await searchUsers(input.value.value, new Uint8Array(0))
-  if (!res) return
-
-  users.value = res.users
-}
+import AppNavBottom from '@/ui/components/AppNavBottom.vue'
+import AppNavTop from '@/ui/components/AppNavTop.vue'
 </script>
 
 <template>
   <div class="pb-12">
-    <TransitionRoot as="template" :show="sidebarOpen">
-      <Dialog class="relative z-50 lg:hidden" @close="sidebarOpen = false">
-        <TransitionChild
-          as="template"
-          enter="transition-opacity ease-linear duration-300"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="transition-opacity ease-linear duration-300"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <div class="fixed inset-0 bg-gray-900/80" />
-        </TransitionChild>
-
-        <div class="fixed inset-0 flex">
-          <TransitionChild
-            as="template"
-            enter="transition ease-in-out duration-300 transform"
-            enter-from="-translate-x-full"
-            enter-to="translate-x-0"
-            leave="transition ease-in-out duration-300 transform"
-            leave-from="translate-x-0"
-            leave-to="-translate-x-full"
-          >
-            <DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
-              <TransitionChild
-                as="template"
-                enter="ease-in-out duration-300"
-                enter-from="opacity-0"
-                enter-to="opacity-100"
-                leave="ease-in-out duration-300"
-                leave-from="opacity-100"
-                leave-to="opacity-0"
-              >
-                <div class="absolute left-full top-0 flex w-16 justify-center pt-5">
-                  <button type="button" class="-m-2.5 p-2.5" @click="sidebarOpen = false">
-                    <XMarkIcon class="h-6 w-6 text-white" />
-                  </button>
-                </div>
-              </TransitionChild>
-              <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 px-6 pb-4">
-                <div class="flex h-16 shrink-0 items-center">
-                  <img class="h-8 w-auto" src="/favicon.png" alt="GetStronger" />
-                </div>
-                <nav class="flex flex-1 flex-col">
-                  <ul role="list" class="flex flex-1 flex-col gap-y-7">
-                    <li>
-                      <ul role="list" class="-mx-2 space-y-1">
-                        <li v-for="item in navigation" :key="item.name">
-                          <RouterLink
-                            :to="item.href"
-                            :class="[
-                              isActive(item.href).value
-                                ? 'bg-indigo-700 text-white'
-                                : 'text-indigo-200 hover:bg-indigo-700 hover:text-white',
-                              'group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold',
-                            ]"
-                            @click="sidebarOpen = false"
-                          >
-                            <component
-                              :is="item.icon"
-                              :class="[
-                                isActive(item.href).value
-                                  ? 'text-white'
-                                  : 'text-indigo-200 group-hover:text-white',
-                                'h-6 w-6 shrink-0',
-                              ]"
-                            />
-                            {{ item.name }}
-                          </RouterLink>
-                        </li>
-                      </ul>
-                    </li>
-                  </ul>
-                </nav>
-              </div>
-            </DialogPanel>
-          </TransitionChild>
-        </div>
-      </Dialog>
-    </TransitionRoot>
-
-    <!-- Static sidebar for desktop -->
-    <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
-      <!-- Sidebar component, swap this element with another sidebar if you like -->
-      <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 px-6 pb-4">
-        <div class="flex h-16 shrink-0 items-center">
-          <img class="h-8 w-auto" src="/favicon.png" alt="GetStronger" />
-          <span class="ml-2 font-bold text-white">GetStronger</span>
-        </div>
-        <nav class="flex flex-1 flex-col">
-          <ul role="list" class="flex flex-1 flex-col gap-y-7">
-            <li>
-              <ul role="list" class="-mx-2 space-y-1">
-                <li v-for="item in navigation" :key="item.name">
-                  <RouterLink
-                    :to="item.href"
-                    :class="[
-                      isActive(item.href).value
-                        ? 'bg-indigo-700 text-white'
-                        : 'text-indigo-200 hover:bg-indigo-700 hover:text-white',
-                      'group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold',
-                    ]"
-                  >
-                    <component
-                      :is="item.icon"
-                      :class="[
-                        isActive(item.href).value
-                          ? 'text-white'
-                          : 'text-indigo-200 group-hover:text-white',
-                        'h-6 w-6 shrink-0',
-                      ]"
-                    />
-                    {{ item.name }}
-                  </RouterLink>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </nav>
-      </div>
-    </div>
-
-    <div class="lg:pl-72">
-      <div
-        class="sticky top-0 z-20 flex h-16 shrink-0 items-center gap-x-4 border-b-2 border-gray-200 bg-white px-4 sm:gap-x-6 sm:px-6 lg:px-8"
-      >
-        <form v-if="searchBarOpen" class="w-full">
-          <input
-            ref="input"
-            type="text"
-            class="w-full text-sm border-none focus:ring-0"
-            placeholder="Search users"
-            @keyup="onSearchUsers"
-          />
-        </form>
-        <ul
-          v-if="searchBarOpen && users.length > 0"
-          class="absolute bg-gray-100 border-b-white border-b-2 left-0 right-0 top-16 divide-y divide-white"
-        >
-          <li v-for="user in users" :key="user.id" @click="closeSearchBar">
-            <RouterLink :to="`/users/${user.id}`" class="block px-5 py-5 text-sm font-medium">
-              {{ user.firstName }} {{ user.lastName }}
-            </RouterLink>
-          </li>
-        </ul>
-        <img v-if="!searchBarOpen" class="h-auto w-8 lg:hidden" src="/favicon.png" />
-        <div v-if="!searchBarOpen" class="flex flex-1 gap-x-4 justify-center">
-          <p class="uppercase text-sm font-semibold text-gray-900 lg:hidden">
-            {{ pageTitleStore.pageTitle }}
-          </p>
-        </div>
-        <XMarkIcon v-if="searchBarOpen" class="w-8 h-6 cursor-pointer" @click="closeSearchBar" />
-        <MagnifyingGlassIcon v-else class="w-8 h-6 cursor-pointer" @click="openSearchBar" />
-      </div>
-
-      <AppAlert />
-
-      <main class="mx-auto max-w-7xl bg-gray-100 py-4">
-        <RouterView />
-      </main>
-    </div>
+    <AppNavTop />
+    <AppAlert />
+    <main>
+      <RouterView />
+    </main>
+    <AppNavBottom />
   </div>
-
-  <div
-    v-if="searchBarOpen"
-    class="fixed z-10 top-0 left-0 right-0 bottom-0 bg-black opacity-50"
-    @click="closeSearchBar"
-  />
-  <NavigationMobile v-else />
 </template>
+
+<style scoped>
+main {
+  @apply mx-auto max-w-7xl bg-gray-100 py-4;
+}
+</style>
diff --git a/web/src/ui/exercises/ViewExercise.vue b/web/src/ui/exercises/ViewExercise.vue
index 6ead5cb0..9c7af0a7 100644
--- a/web/src/ui/exercises/ViewExercise.vue
+++ b/web/src/ui/exercises/ViewExercise.vue
@@ -62,7 +62,7 @@ const onDeleteExercise = async () => {
   </div>
 
   <h6>Chart</h6>
-  <div class="bg-white border border-gray-200 px-4 py-4">
+  <div class="bg-white border border-gray-200 px-4 py-4 lg:rounded-md">
     <LineChart :sets="sets" />
   </div>