diff --git a/backend/db.sqlite3 b/backend/db.sqlite3
index a29e8b32..0ffb8357 100644
Binary files a/backend/db.sqlite3 and b/backend/db.sqlite3 differ
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index b8bae0b9..37bec334 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,56 +1,26 @@
 <template>
   <v-app>
-    <v-app-bar density="comfortable" color="primary" v-if="!$route.meta.hideHeader">
-      <v-app-bar-title>My App, The Disaster Unfolding Before Our Very Eyes: The Sequel</v-app-bar-title>
-      <v-btn variant="text" to="/">Home</v-btn>
-      <v-btn varient="text" to="/dashboard">Dashboard</v-btn>
-      <v-btn varient="text" to="/item">Item</v-btn>
-      <v-btn varient="text" to="/kitchen-sink">Kitchen Sink</v-btn>
-      <v-btn varient="text" to="/copilot-test">Copilot Test</v-btn>
-      <v-btn icon @click="toggleTheme">
-        <v-icon>
-          {{ theme.global.current.value.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}
-        </v-icon>
-      </v-btn>
-      <v-menu>
-        <template #activator="{ props }">
-          <v-btn icon v-bind="props">
-            <v-avatar size="32">
-              <img src="https://mohamedahmedali2023.github.io/fake_portofolio/assets/img/home-bg2.jpg" alt="Profile" />
-            </v-avatar>
-          </v-btn>
-        </template>
+    <Header v-if="!$route.meta.hideHeader"/>
 
-        <v-list>
-          <v-list-item title="Profile" to="/profile"/>
-          <v-list-item title="Sign out" />
-        </v-list>
-      </v-menu>
-    </v-app-bar>
     <v-main>
       <v-container fluid>
         <router-view />
         <AppSnackbar ref="snackbar" />
       </v-container>
     </v-main>
+
+    <Footer  v-if="!$route.meta.hideFooter" />
   </v-app>
 </template>
 
 <script lang="ts" setup>
-  import HelloWorld from '@/components/HelloWorld.vue'
   import { useDisplay, useTheme } from 'vuetify'
   import { ref, provide } from 'vue'
-
-
-  const theme = useTheme()
-
-  function toggleTheme() {
-    theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
-  }
+  import Header from '@/components/Header.vue'
+  import Footer from '@/components/Footer.vue'
 
   // Snackbar
   import AppSnackbar from './components/AppSnackbar.vue'
-
   const snackbar = ref(null)
   provide('snackbar', snackbar)
 
diff --git a/frontend/src/components/AppSnackbar.vue b/frontend/src/components/AppSnackbar.vue
index 273e6f95..b7b4a840 100644
--- a/frontend/src/components/AppSnackbar.vue
+++ b/frontend/src/components/AppSnackbar.vue
@@ -6,7 +6,7 @@
     timer="bottom"
     variant="flat"
     theme="dark"
-    timer-color="green"
+    timer-color="dark-grey"
     location="bottom center"
     rounded="lg"
   >
@@ -27,7 +27,7 @@ function toast(message, opts = {}) {
 }
 
 // Shorthand helpers
-const success = (msg, opts = {}) => toast(msg, { color: 'blue-grey', icon: 'mdi-check-circle-outline',  ...opts })
+const success = (msg, opts = {}) => toast(msg, { color: 'success', icon: 'mdi-check-circle-outline',  ...opts })
 const error   = (msg, opts = {}) => toast(msg, { color: 'error',   icon: 'mdi-alert-circle-outline',  ...opts })
 const warning = (msg, opts = {}) => toast(msg, { color: 'warning', icon: 'mdi-alert-outline',         ...opts })
 const info    = (msg, opts = {}) => toast(msg, { color: 'info',    icon: 'mdi-information-outline',   ...opts })
diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
new file mode 100644
index 00000000..e4629eee
--- /dev/null
+++ b/frontend/src/components/Header.vue
@@ -0,0 +1,39 @@
+<template>
+    <v-app-bar density="comfortable" color="primary">
+        <v-app-bar-title>My App, The Disaster Unfolding Before Our Very Eyes: The Sequel</v-app-bar-title>
+        <v-btn variant="text" to="/">Home</v-btn>
+        <v-btn varient="text" to="/dashboard">Dashboard</v-btn>
+        <v-btn varient="text" to="/item">Item</v-btn>
+        <v-btn varient="text" to="/kitchen-sink">Kitchen Sink</v-btn>
+        <v-btn varient="text" to="/copilot-test">Copilot Test</v-btn>
+        <v-btn icon @click="toggleTheme">
+            <v-icon>
+            {{ theme.global.current.value.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}
+            </v-icon>
+        </v-btn>
+        <v-menu>
+            <template #activator="{ props }">
+            <v-btn icon v-bind="props">
+                <v-avatar size="32">
+                <img src="https://mohamedahmedali2023.github.io/fake_portofolio/assets/img/home-bg2.jpg" alt="Profile" />
+                </v-avatar>
+            </v-btn>
+            </template>
+
+            <v-list>
+            <v-list-item title="Profile" to="/profile"/>
+            <v-list-item title="Sign out" />
+            </v-list>
+        </v-menu>
+    </v-app-bar>
+</template>
+
+<script setup>
+    import { ref, watch, computed } from 'vue'
+    import { useTheme } from 'vuetify'
+    const theme = useTheme()
+
+    function toggleTheme() {
+        theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+    }
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/HelloWorld.vue b/frontend/src/components/HelloWorld.vue
index 96bf8e49..165331de 100644
--- a/frontend/src/components/HelloWorld.vue
+++ b/frontend/src/components/HelloWorld.vue
@@ -100,4 +100,18 @@
 </script>
 
 <style scoped>
+  @reference "../styles/tailwind.css";
+
+  /*
+    1. mixing helper classes and @apply for demonstration purposes only
+    2. the classes below are NOT wrapped in any CSS layer, so they "win" over everything else
+  */
+  .hero-card {
+    @apply py-3 md:pr-[120px] w-full transition-none;
+  }
+
+  :deep(.v-card) {
+    @apply bg-gray-200;
+    @apply dark:bg-black dark:bg-linear-to-r dark:from-primary/50 dark:to-primary/30 dark:text-white/80;
+  }
 </style>
diff --git a/frontend/src/styles/tailwind.css b/frontend/src/styles/tailwind.css
index 01738758..a1dd5a7d 100644
--- a/frontend/src/styles/tailwind.css
+++ b/frontend/src/styles/tailwind.css
@@ -7,6 +7,16 @@
   --font-body: "Roboto", sans-serif;
   --font-mono: "Roboto Mono", monospace;
 
+  --color-background: rgb(var(--v-theme-background));
+  --color-surface: rgb(var(--v-theme-surface));
+  --color-on-surface: rgb(var(--v-theme-on-surface));
+
+  --color-primary: rgb(var(--v-theme-primary));
+  --color-success: rgb(var(--v-theme-success));
+  --color-info: rgb(var(--v-theme-info));
+  --color-warning: rgb(var(--v-theme-warning));
+  --color-error: rgb(var(--v-theme-error));
+
   --breakpoint-*: initial;
   --breakpoint-xs: 0px;
   --breakpoint-sm: 600px;
@@ -67,14 +77,6 @@
 @source inline('elevation-{0,1,2,3,4,5}');
 
 @layer components {
-  .list {
-    @apply list-disc list-inside space-y-1.5 mx-8;
-  }
-
-  .header-1 {
-    @apply text-lg font-bold my-2
-  }
-
   .v-app-bar .v-toolbar__content {
     gap: 4px; 
   }
diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
index 94ae7995..f074b1dd 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -8,16 +8,15 @@
         <div class="text-body-2 text-medium-emphasis mt-1">Overview of all routed items</div>
       </v-col>
       <v-col cols="auto">
-        <v-btn-toggle v-model="viewMode" mandatory density="compact" variant="outlined" divided>
-          <v-btn value="cards" size="small">
-            <v-icon size="16" start>mdi-view-grid-outline</v-icon>
-            Cards
-          </v-btn>
-          <v-btn value="table" size="small">
-            <v-icon size="16" start>mdi-table</v-icon>
-            Table
-          </v-btn>
-        </v-btn-toggle>
+        <v-btn
+          color="primary"
+          prepend-icon="mdi-plus-circle-outline"
+          rounded="lg"
+          variant="flat"
+          @click="$router.push({ name: 'item', params: { mode: 'create' } })"
+        >
+          Submit item
+        </v-btn>
       </v-col>
     </v-row>
 
@@ -83,15 +82,16 @@
       </v-col>
       <v-spacer />
       <v-col cols="auto">
-        <v-btn
-          color="primary"
-          prepend-icon="mdi-plus-circle-outline"
-          rounded="lg"
-          variant="flat"
-          @click="$router.push({ name: 'item', params: { mode: 'create' } })"
-        >
-          Submit item
-        </v-btn>
+        <v-btn-toggle v-model="viewMode" mandatory density="compact" variant="outlined" divided>
+          <v-btn value="cards" size="small">
+            <v-icon size="16" start>mdi-view-grid-outline</v-icon>
+            Cards
+          </v-btn>
+          <v-btn value="table" size="small">
+            <v-icon size="16" start>mdi-table</v-icon>
+            Table
+          </v-btn>
+        </v-btn-toggle>
       </v-col>
     </v-row>
 
@@ -206,7 +206,6 @@
           :headers="tableHeaders"
           :items="tabItems"
           :search="search"
-          density="compact"
           item-value="id"
           hover
           @click:row="onRowClick"
@@ -255,23 +254,6 @@
             <span class="text-caption text-medium-emphasis">{{ item.updated }}</span>
           </template>
 
-          <!-- Row actions -->
-          <template #item.actions="{ item }">
-            <div class="d-flex ga-1 justify-end">
-              <v-btn
-                icon="mdi-eye-outline"
-                size="x-small"
-                variant="text"
-                @click.stop="$router.push({ name: 'item', params: { id: item.id, mode: 'view' } })"
-              />
-              <v-btn
-                icon="mdi-pencil-outline"
-                size="x-small"
-                variant="text"
-                @click.stop="$router.push({ name: 'item', params: { id: item.id, mode: 'edit' } })"
-              />
-            </div>
-          </template>
         </v-data-table>
       </v-card>
     </template>
diff --git a/frontend/src/views/Item.vue b/frontend/src/views/Item.vue
index 44b53562..fb8f17bc 100644
--- a/frontend/src/views/Item.vue
+++ b/frontend/src/views/Item.vue
@@ -12,7 +12,7 @@
         />
       </v-col>
       <v-col>
-        <div class="text-h5 font-weight-medium text-high-emphasis">{{ pageTitle }}</div>
+        <div class="text-xl font-weight-medium text-high-emphasis">{{ pageTitle }}</div>
         <div class="text-body-2 text-medium-emphasis mt-1">{{ pageSubtitle }}</div>
       </v-col>
       <v-col cols="auto" class="d-flex ga-2">
@@ -48,8 +48,8 @@
         </template>
 
         <!-- Create mode actions -->
-        <template v-else-if="mode === 'create'">
-          <v-btn variant="outlined" rounded="lg" @click="saveDraft">Save draft</v-btn>
+        <template density="comfortable" v-else-if="mode === 'create'">
+          <v-btn variant="outlined" rounded="lg" prepend-icon="mdi-content-save" @click="saveDraft">Save draft</v-btn>
           <v-btn color="primary" variant="flat" rounded="lg" prepend-icon="mdi-send-outline" @click="submitItem">Submit for routing</v-btn>
         </template>
 
diff --git a/frontend/src/views/SystemNotice.vue b/frontend/src/views/SystemNotice.vue
index 0dcccc64..a3d231fd 100644
--- a/frontend/src/views/SystemNotice.vue
+++ b/frontend/src/views/SystemNotice.vue
@@ -1,13 +1,13 @@
 <template>
-  <v-container class="flex items-center justify-center min-h-screen">
+  <v-container class="fill-height flex items-center justify-center ">
     <v-card class="pa-8">
-      <v-card-title>System Use Notice</v-card-title>
+      <v-card-title style="font-size: x-large">System Use Notice</v-card-title>
         <v-card-text>
-            <h1 class="header-1">Usage Agreement</h1>
+            <div style="font-size: large; font-weight: bold;">Usage Agreement</div>
             <p>
                 You are accessing a U.S. Government (USG) Information System (IS) that is provided for USG-authorized use only. By using this IS (which includes any device attached to this IS), you consent to the following conditions:
             </p>
-            <ul class="list">
+            <ul class="pl-8" style="list-style: disc">
                 <li>The USG routinely intercepts and monitors communications on this IS for purposes including, but not limited to, penetration testing, COMSEC monitoring, network operations and defense, personnel misconduct (PM), law enforcement (LE) and counterintelligence (CI) investigations.</li>
                 <li>At any time, the USG may inspect and seize data stored on this IS.</li>
                 <li>Communications using, or data stored on, this IS are not private, are subject to routine monitoring, interception, and search, and may be disclosed or used for any USG-authorized purpose.</li>
@@ -25,18 +25,18 @@
 </template>
 
 <script setup>
-import { useRouter, useRoute } from 'vue-router'
+    import { useRouter, useRoute } from 'vue-router'
 
-const router = useRouter()
-const route = useRoute()
+    const router = useRouter()
+    const route = useRoute()
 
-async function accept() {
-    await fetch('/api/accept-disclaimer/', {
-        method: 'POST',
-        credentials: 'include'
-    })
+    async function accept() {
+        await fetch('/api/accept-disclaimer/', {
+            method: 'POST',
+            credentials: 'include'
+        })
 
-  const redirect = route.query.redirect || '/'
-  router.push(redirect)
-}
+    const redirect = route.query.redirect || '/'
+    router.push(redirect)
+    }
 </script>