diff --git a/webapp/public/icon-discord-grey.svg b/webapp/public/icon-discord-grey.svg
new file mode 100644
index 0000000..79942ce
--- /dev/null
+++ b/webapp/public/icon-discord-grey.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M41.625,10.77C37.645,7.566 31.348,7.023 31.078,7.004C30.66,6.969 30.262,7.203 30.09,7.59C30.074,7.613 29.938,7.93 29.785,8.422C32.418,8.867 35.652,9.762 38.578,11.578C39.047,11.867 39.191,12.484 38.902,12.953C38.711,13.262 38.387,13.43 38.051,13.43C37.871,13.43 37.688,13.379 37.523,13.277C32.492,10.156 26.211,10 25,10C23.789,10 17.504,10.156 12.477,13.277C12.008,13.57 11.391,13.426 11.102,12.957C10.809,12.484 10.953,11.871 11.422,11.578C14.348,9.766 17.582,8.867 20.215,8.426C20.063,7.93 19.926,7.617 19.914,7.59C19.738,7.203 19.344,6.961 18.922,7.004C18.652,7.023 12.355,7.566 8.32,10.813C6.215,12.762 2,24.152 2,34C2,34.176 2.047,34.344 2.133,34.496C5.039,39.605 12.973,40.941 14.781,41L14.813,41C15.133,41 15.434,40.848 15.621,40.59L17.449,38.074C12.516,36.801 9.996,34.637 9.852,34.508C9.438,34.145 9.398,33.512 9.766,33.098C10.129,32.684 10.762,32.645 11.176,33.008C11.234,33.063 15.875,37 25,37C34.141,37 38.781,33.047 38.828,33.008C39.242,32.648 39.871,32.684 40.238,33.102C40.602,33.516 40.563,34.145 40.148,34.508C40.004,34.637 37.484,36.801 32.551,38.074L34.379,40.59C34.566,40.848 34.867,41 35.188,41L35.219,41C37.027,40.941 44.961,39.605 47.867,34.496C47.953,34.344 48,34.176 48,34C48,24.152 43.785,12.762 41.625,10.77ZM18.5,30C16.566,30 15,28.211 15,26C15,23.789 16.566,22 18.5,22C20.434,22 22,23.789 22,26C22,28.211 20.434,30 18.5,30ZM31.5,30C29.566,30 28,28.211 28,26C28,23.789 29.566,22 31.5,22C33.434,22 35,23.789 35,26C35,28.211 33.434,30 31.5,30Z" style="fill:rgb(122,122,122);fill-rule:nonzero;"/>
+</svg>
diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 07124ad..70293d3 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -54,7 +54,7 @@ const contributeItems = [
 ]
 
 const metaItems = [
-  { title: 'Discord', customIcon: '/icon-discord.svg', customIconDark: '/icon-discord-white.svg', href: 'https://discord.gg/aV7v4R3sKT'},
+  { title: 'Discord', customIcon: '/icon-discord.svg', customIconDark: '/icon-discord-white.svg', customIconGrey: '/icon-discord-grey.svg', href: 'https://discord.gg/aV7v4R3sKT'},
   { title: 'Contact', icon: 'mdi-email-outline', to: '/contact' },
   { title: 'GitHub', icon: 'mdi-github', href: 'https://github.com/frillweeman/deflock'},
   { title: 'Donate', icon: 'mdi-heart', to: '/donate'},
@@ -80,8 +80,14 @@ watch(() => theme.global.name.value, (newTheme) => {
         flat
         prominent
       >
-        <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+        <!-- Mobile hamburger menu -->
+        <v-app-bar-nav-icon 
+          variant="text" 
+          @click.stop="drawer = !drawer"
+          class="d-md-none"
+        ></v-app-bar-nav-icon>
 
+        <!-- Logo -->
         <v-toolbar-title style="flex: unset;">
           <div style="display: flex; align-items: center; cursor: pointer;" @click="router.push('/')">
             <v-img height="36" width="36" src="/favicons/apple-icon-144x144.png" />
@@ -89,16 +95,103 @@ watch(() => theme.global.name.value, (newTheme) => {
           </div>
         </v-toolbar-title>
 
-        <v-spacer></v-spacer>
+        <!-- Desktop horizontal navigation -->
+        <div class="d-none d-md-flex ml-8 flex-grow-1">
+          <!-- Main navigation items -->
+          <div class="d-flex align-center">
+            <v-btn 
+              v-for="item in items.slice(1)" 
+              :key="item.title"
+              :to="item.to"
+              variant="text"
+              class="mx-1"
+              :prepend-icon="item.icon"
+            >
+              {{ item.title }}
+            </v-btn>
+          </div>
+
+          <v-spacer></v-spacer>
+
+          <!-- Contribute section -->
+          <div class="d-flex align-center">
+            <v-menu offset-y>
+              <template v-slot:activator="{ props }">
+                <v-btn
+                  variant="text"
+                  v-bind="props"
+                  append-icon="mdi-chevron-down"
+                  class="mx-1"
+                >
+                  Contribute
+                </v-btn>
+              </template>
+              <v-list>
+                <v-list-item
+                  v-for="item in contributeItems"
+                  :key="item.title"
+                  :to="item.to"
+                  link
+                >
+                  <template v-slot:prepend>
+                    <v-icon>{{ item.icon }}</v-icon>
+                  </template>
+                  <v-list-item-title>{{ item.title }}</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+
+            <!-- Get Involved section -->
+            <v-menu offset-y>
+              <template v-slot:activator="{ props }">
+                <v-btn
+                  variant="text"
+                  v-bind="props"
+                  append-icon="mdi-chevron-down"
+                  class="mx-1"
+                >
+                  Get Involved
+                </v-btn>
+              </template>
+              <v-list>
+                <v-list-item
+                  v-for="item in metaItems"
+                  :key="item.title"
+                  :to="item.to"
+                  :href="item.href"
+                  :target="item.href ? '_blank' : undefined"
+                  link
+                >
+                  <template v-slot:prepend>
+                    <v-icon v-if="item.icon">{{ item.icon }}</v-icon>
+                    <v-img 
+                      v-else-if="item.customIcon"
+                      class="mr-8"
+                      contain 
+                      width="24" 
+                      height="24" 
+                      :src="isDark ? item.customIconDark : item.customIconGrey" 
+                    />
+                  </template>
+                  <v-list-item-title>{{ item.title }}</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </div>
+        </div>
+
+        <v-spacer class="d-md-none" />
 
         <v-btn icon>
           <v-icon @click="toggleTheme">mdi-theme-light-dark</v-icon>
         </v-btn>
       </v-app-bar>
 
+      <!-- Mobile navigation drawer -->
       <v-navigation-drawer
         v-model="drawer"
         temporary
+        class="d-md-none"
       >
         <v-list nav>
           <v-list-item