diff --git a/src/App.vue b/src/App.vue
index 7dd4952..dfaadf1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,70 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
+import Footer from "@/components/Footer.vue";
 import Sidebar from "@/components/Sidebar.vue";
 import TopBar from "@/components/TopBar.vue";
 </script>
 
 <template>
-  <div class="min-h-screen flex relative lg:static bg-surface-50 dark:bg-surface-950">
-    <Sidebar></Sidebar>
-    <main class="min-h-screen flex flex-col relative flex-auto">
-      <TopBar></TopBar>
-      <div class="p-0 sm:p-4">
-        <div class="border-2 border-dashed border-surface rounded-border bg-surface-0 dark:bg-surface-950 flex-auto">
-          <RouterView />
-        </div>
+  <div class="act-layout">
+    <TopBar class="act-header"></TopBar>
+    <div class="act-sidebar">
+      <Sidebar></Sidebar>
+    </div>
+    <div class="act-content">
+      <main class="">
+        <RouterView />
+      </main>
+      <div class="act-footer">
+        <Footer></Footer>
       </div>
-    </main>
+    </div>
   </div>
 </template>
 
 <style scoped lang="scss">
+$header-height: 60px !default;
+$footer-height: 90px !default;
+$footer-width: 100px !default;
+
+.act-layout {
+  // To scroll only in the middle, see https://jsfiddle.net/VNVqs/
+  margin-bottom: $footer-height; // for scrolling
+  margin-top: $header-height; // for scrolling
+  .act-footer {
+    display: none;
+  }
+  .act-sidebar {
+    bottom: 0;
+    height: $footer-height;
+    left: 0;
+    position: fixed;
+    right: 0;
+    z-index: 20;
+  }
+  .act-header {
+    height: $header-height;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 20;
+  }
+  @media (screen(sm)) {
+    margin-bottom: 0;
+    margin-left: $footer-width;
+    .act-footer {
+      display: block
+    }
+    .act-sidebar {
+      left: 0;
+      height: 100%;
+      position: fixed;
+      width: $footer-width;
+    }
+    .act-header {
+      left: $footer-width;
+    }
+  }
+}
 </style>
diff --git a/src/assets/main.css b/src/assets/main.css
index c816902..9e76b2b 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,2 +1,7 @@
 @import './base.css';
 @import 'primeicons/primeicons.css';
+
+body {
+    color: #111;
+    background-color: #F2F2F2;
+}
diff --git a/src/assets/nav-items.css b/src/assets/nav-items.css
index 53a0057..795dea3 100644
--- a/src/assets/nav-items.css
+++ b/src/assets/nav-items.css
@@ -1,5 +1,5 @@
 .nav-item {
-  @apply flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors;
+  @apply flex flex-col items-center p-4 lg:justify-center hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors;
   span {
     @apply font-medium inline text-base lg:text-xs lg:block;
   }
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..eafef07
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <footer>
+    footer
+  </footer>
+</template>
+
+<style scoped>
+@import "@/assets/nav-items.css";
+footer {
+  background-color: #E0E0E0;
+  color: #777;
+  padding: 20px;
+}
+@media (screen(sm)) {
+  aside {
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 7707ae3..ac395f8 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -1,46 +1,47 @@
+<script setup lang="ts">
+</script>
+
 <template>
-  <nav class="mt-4">
-    <ul class="list-none p-4 m-0">
-      <li>
-        <RouterLink
-          class="nav-item"
-          to="/">
-          <i class="pi pi-home nav-icon" />
-          <span>Home</span>
-        </RouterLink>
-      </li>
-      <li>
-        <RouterLink class="nav-item" to="/sticker">
-          <i class="pi pi-image nav-icon" />
-          <span>Sticker</span>
-        </RouterLink>
-      </li>
-      <li>
-        <a class="nav-item">
-          <i class="pi pi-users nav-icon" />
-          <span>Team</span>
-        </a>
-      </li>
-      <li>
-        <a class="nav-item">
-          <i class="pi pi-calendar nav-icon" />
-          <span>Events</span>
-        </a>
-      </li>
-      <li>
-        <RouterLink
-          class="nav-item"
-          to="/about">
-          <i class="pi pi-info-circle nav-icon" />
-          <span>About</span>
-        </RouterLink>
-      </li>
-    </ul>
+  <nav>
+    <RouterLink
+      class="nav-item"
+      to="/">
+      <i class="pi pi-home nav-icon" />
+      <span>Home</span>
+    </RouterLink>
+    <RouterLink class="nav-item" to="/sticker">
+      <i class="pi pi-image nav-icon" />
+      <span>Sticker</span>
+    </RouterLink>
+    <a class="nav-item">
+      <i class="pi pi-users nav-icon" />
+      <span>Team</span>
+    </a>
+    <a class="nav-item">
+      <i class="pi pi-calendar nav-icon" />
+      <span>Events</span>
+    </a>
+    <RouterLink
+      class="nav-item"
+      to="/about">
+      <i class="pi pi-info-circle nav-icon" />
+      <span>About</span>
+    </RouterLink>
   </nav>
 </template>
+
 <style scoped>
 @import "@/assets/nav-items.css";
 .nav-icon {
   @apply mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-lg;
 }
+nav {
+  display: flex;
+  flex-direction: row;
+}
+@media (screen(sm)) {
+  nav {
+    flex-direction: column;
+  }
+}
 </style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 03b3dbf..d47956d 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,26 +1,33 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import Navigation from "@/components/Navigation.vue";
 </script>
 
 <template>
-  <aside id="app-sidebar-5" class="bg-surface-900 h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-10 border-surface-800 w-36 lg:w-28 select-none">
-    <div class="flex flex-col h-full">
-      <div class="flex items-center justify-center flex-shrink-0 bg-primary h-[60px]">
-        Designer
-      </div>
-      <Navigation></Navigation>
-      <div class="mt-auto">
-        <hr class="mb-4 mx-4 border-t border-0 border-surface-800" />
-        <a class="m-4 nav-item">
-          <img
-            alt="user avatar"
-            src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/render/image/public/block.images/blocks/avatars/circle/avatar-f-1.png" class="mr-2 lg:mr-0 w-8 h-8" />
-          <span class="font-medium inline lg:hidden">Amy Elsner</span>
-        </a>
-      </div>
+  <aside>
+    <Navigation></Navigation>
+    <div class="mt-auto">
+      <hr class="mb-4 mx-4 border-t border-0 border-surface-800" />
+      <a class="m-4 nav-item">
+        <img
+          alt="user avatar"
+          src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/render/image/public/block.images/blocks/avatars/circle/avatar-f-1.png" class="mr-2 lg:mr-0 w-8 h-8" />
+        <span class="font-medium inline lg:hidden">Amy Elsner</span>
+      </a>
     </div>
   </aside>
 </template>
+
 <style scoped>
 @import "@/assets/nav-items.css";
+aside {
+  background-color: #333;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+}
+@media (screen(sm)) {
+  aside {
+    flex-direction: column;
+  }
+}
 </style>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index a28de11..72e2e7b 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -11,21 +11,8 @@ watch(() => route.meta, (newVal, oldVal) => {
 })
 </script>
 <template>
-  <header class="flex justify-between items-center px-4 bg-surface-0 dark:bg-surface-950 relative lg:static border-b border-surface h-[60px]">
+  <header class="flex justify-between items-center px-4">
     <div class="flex">
-      <a
-        v-styleclass="{
-                            selector: '#app-sidebar-5',
-                            enterFromClass: 'hidden',
-                            enterActiveClass: 'animate-fadeinleft',
-                            leaveToClass: 'hidden',
-                            leaveActiveClass: 'animate-fadeoutleft',
-                            hideOnOutsideClick: true
-                        }"
-        class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 mr-4 mt-2"
-      >
-        <i class="pi pi-bars text-4xl" />
-      </a>
       <span class="title">{{ page_title }}</span>
     </div>
     <a
@@ -43,7 +30,6 @@ watch(() => route.meta, (newVal, oldVal) => {
     </a>
     <ul
       class="list-none p-0 m-0 hidden lg:flex lg:items-center select-none lg:flex-row bg-surface-0 dark:bg-surface-950 border lg:border-0 border-surface right-0 top-full z-10 shadow lg:shadow-none absolute lg:static"
-      id="header-icons"
     >
       <li>
         <a>
@@ -78,10 +64,14 @@ watch(() => route.meta, (newVal, oldVal) => {
 .title {
   font-size: 160%;
 }
-#header-icons li a {
-  @apply flex p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer duration-150 transition-colors;
-  i {
-    @apply text-base lg:!text-2xl leading-none;
+header {
+  background-color: white;
+  border-bottom: 1px solid #BBB;
+  li a {
+    @apply flex p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer duration-150 transition-colors;
+    i {
+      @apply text-base lg:!text-2xl leading-none;
+    }
   }
 }
 </style>