diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue
index 12273cba3..363150ab5 100644
--- a/vue-app/src/App.vue
+++ b/vue-app/src/App.vue
@@ -1,7 +1,21 @@
 <template>
   <div id="app">
-    <div id="nav-bar">
-      <img class="logo" alt="clr.fund" src="@/assets/clr.svg" />
+    <div id="nav-bar" :class="{'collapsed': navBarCollapsed}">
+      <div id="nav-header">
+        <img
+          class="menu-btn"
+          alt="nav"
+          src="@/assets/menu.svg"
+          @click="toggleNavBar()"
+        >
+        <img class="logo" alt="clr.fund" src="@/assets/clr.svg" />
+        <img
+          class="cart-btn"
+          alt="cart"
+          src="@/assets/cart.svg"
+          @click="toggleUserBar()"
+        >
+      </div>
       <div id="nav-menu">
         <router-link to="/">Projects</router-link>
         <router-link to="/about">About</router-link>
@@ -12,7 +26,7 @@
     <div id="content">
       <router-view />
     </div>
-    <div id="user-bar">
+    <div id="user-bar" :class="{'collapsed': userBarCollapsed}">
       <Profile />
       <Cart />
     </div>
@@ -22,10 +36,11 @@
 <script lang="ts">
 import Vue from 'vue'
 import Component from 'vue-class-component'
+import { Watch } from 'vue-property-decorator'
 
 import Cart from '@/components/Cart.vue'
 import Profile from '@/components/Profile.vue'
-import { LOAD_ROUND_INFO } from '@/store/action-types'
+import { LOAD_USER_INFO, LOAD_ROUND_INFO } from '@/store/action-types'
 
 @Component({
   name: 'clr.fund',
@@ -40,13 +55,35 @@ import { LOAD_ROUND_INFO } from '@/store/action-types'
 })
 export default class App extends Vue {
 
+  // Only for small screens
+  navBarCollapsed = true
+  userBarCollapsed = true
+
   created() {
     this.$store.dispatch(LOAD_ROUND_INFO)
     setInterval(() => {
       this.$store.dispatch(LOAD_ROUND_INFO)
     }, 60 * 1000)
+    setInterval(() => {
+      this.$store.dispatch(LOAD_USER_INFO)
+    }, 60 * 1000)
+  }
+
+  toggleNavBar() {
+    this.userBarCollapsed = true
+    this.navBarCollapsed = !this.navBarCollapsed
+  }
+
+  toggleUserBar() {
+    this.navBarCollapsed = true
+    this.userBarCollapsed = !this.userBarCollapsed
   }
 
+  @Watch('$route', { immediate: true, deep: true })
+  onNavigation() {
+    this.navBarCollapsed = true
+    this.userBarCollapsed = true
+  }
 }
 </script>
 
@@ -137,13 +174,22 @@ a {
   border-right: $border;
   box-sizing: border-box;
   flex-shrink: 0;
+  min-width: 150px;
+  max-width: 350px;
   padding: $content-space;
-  width: 300px;
+  width: 25%;
 
   .logo {
+    display: block;
     margin-left: 15%;
+    min-width: 150px - 2 * $content-space;
     max-width: 50%;
   }
+
+  .menu-btn,
+  .cart-btn {
+    display: none;
+  }
 }
 
 #nav-menu {
@@ -203,8 +249,9 @@ a {
 #user-bar {
   background-color: $bg-light-color;
   flex-shrink: 0;
-  min-width: 300px;
-  width: 20%;
+  min-width: 250px;
+  max-width: 350px;
+  width: 25%;
 }
 
 .vm--modal {
@@ -244,4 +291,80 @@ a {
     transform: rotate(360deg);
   }
 }
+
+@media (max-width: 900px) {
+  #app {
+    flex-direction: column;
+  }
+
+  #nav-bar {
+    bottom: $profile-image-size + $content-space * 2; /* offset for profile block */
+    border-right: none;
+    max-width: 100%;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 2;
+
+    .logo {
+      height: $nav-header-height-sm;
+      margin: 0 auto;
+    }
+
+    .menu-btn,
+    .cart-btn {
+      display: block;
+      min-width: 25px;
+      max-width: 20%;
+      width: 25px;
+    }
+
+    .menu-btn {
+      margin-right: 5%;
+    }
+
+    .cart-btn {
+      margin-left: 5%;
+    }
+
+    &.collapsed {
+      bottom: auto;
+
+      #nav-menu {
+        display: none;
+      }
+    }
+  }
+
+  #nav-header {
+    display: flex;
+  }
+
+  #content {
+    margin-bottom: $profile-image-size + $content-space * 2; /* offset for profile block */
+    margin-top: $nav-header-height-sm + $content-space * 2; /* offset for nav header */
+  }
+
+  #user-bar {
+    bottom: 0;
+    max-width: none;
+    overflow-y: scroll;
+    position: fixed;
+    top: $nav-header-height-sm + $content-space * 2; /* offset for nav header */
+    width: 100%;
+    z-index: 1;
+
+    .cart {
+      min-height: auto;
+    }
+
+    &.collapsed {
+      top: auto;
+
+      .cart {
+        display: none;
+      }
+    }
+  }
+}
 </style>
diff --git a/vue-app/src/assets/cart.svg b/vue-app/src/assets/cart.svg
new file mode 100644
index 000000000..4eba08844
--- /dev/null
+++ b/vue-app/src/assets/cart.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 463.8 416.2" style="enable-background:new 0 0 463.8 416.2;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M277,336.1c-27.4,0-54.5,0-82.2,0c6.3,14.9,7.1,29.7,1.2,44.5c-4.2,10.7-11.1,19.3-20.7,25.7
+	c-19.1,12.9-44,12.8-63-0.3c-11.3-7.8-18.7-18.3-22.3-31.5c-3.6-13-2.2-25.7,3.2-38.1c-8.6-0.5-16.8-0.3-24.7-1.5
+	c-26.1-4-45.7-27.5-45.9-54.5c-0.3-26.8,19.2-50.7,45.1-55.3c2.9-0.5,5.9-0.9,9.2-1.4C65.5,159.8,54.2,96.1,42.7,31.9
+	c-8.9,0-17.7,0.1-26.5,0C4,31.7-3.6,19.7,1.7,9.1c2.9-5.7,7.7-8.8,14-8.9c13.5-0.2,27-0.2,40.5,0c8.1,0.1,14.2,5.4,15.6,13.4
+	c2,11.3,3.9,22.6,6,34.5c2.2,0,4.3,0,6.5,0c119.6,0,239.3,0,358.9,0c1.5,0,3,0,4.5,0c11,0.3,18.3,9.6,15.4,20.2
+	c-15.8,58.4-31.8,116.9-47.7,175.3c-2.4,8.7-8.1,12.4-18.1,12.4c-105.3,0-210.6,0-316,0c-12.6,0-21.8,6.8-24.8,18.3
+	c-3.7,14.3,6.9,28.9,21.6,29.8c1.8,0.1,3.7,0.1,5.5,0.1c112.2,0,224.3,0,336.5,0c2.2,0,4.4-0.1,6.5,0.3c8.1,1.4,13.8,8.8,13.2,16.9
+	c-0.7,8.1-7.2,14.5-15.6,14.6c-13.2,0.2-26.3,0.1-39.5,0.1c-1.8,0-3.6,0-5.7,0c10.3,29.3,4.6,53.7-21.4,71.3
+	c-19.2,13-44.8,11.4-63.3-2.5C273.9,389.1,268.3,367.5,277,336.1z M388,223.7c13.1-48,26.1-95.7,39.2-143.7
+	c-114.7,0-228.8,0-343.5,0c8.6,48.1,17.1,95.8,25.6,143.7C202.3,223.7,294.9,223.7,388,223.7z M144.4,335.8
+	c-13.4-0.1-24.3,10.6-24.4,23.9c-0.1,13.2,10.4,24,23.5,24.3c13.4,0.2,24.5-10.4,24.6-23.6C168.3,346.9,157.7,336,144.4,335.8z
+	 M328,335.8c-13.3,0-24.1,10.9-24,24.3c0.1,13.1,10.8,23.8,23.9,23.9c13.4,0.1,24.2-10.7,24.3-24C352.2,346.6,341.4,335.8,328,335.8
+	z"/>
+</svg>
diff --git a/vue-app/src/assets/menu.svg b/vue-app/src/assets/menu.svg
new file mode 100644
index 000000000..ece758a9d
--- /dev/null
+++ b/vue-app/src/assets/menu.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 624.4 416.2" style="enable-background:new 0 0 624.4 416.2;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<rect x="0" y="0.5" class="st0" width="624.4" height="45"/>
+<rect x="0" y="185.8" class="st0" width="624.4" height="45"/>
+<rect x="0" y="371" class="st0" width="624.4" height="45"/>
+</svg>
diff --git a/vue-app/src/components/Cart.vue b/vue-app/src/components/Cart.vue
index 347ba37be..4a86e406d 100644
--- a/vue-app/src/components/Cart.vue
+++ b/vue-app/src/components/Cart.vue
@@ -143,10 +143,13 @@ export default class Cart extends Vue {
     )
     this.refreshContributor()
 
-    // Check verification and token balance every minute
-    setInterval(() => {
-      this.$store.dispatch(LOAD_USER_INFO)
-    }, 60 * 1000)
+    // Reload user info when round info loads or changes
+    this.$store.watch(
+      (state) => state.currentRound?.fundingRoundAddress,
+      () => {
+        this.$store.dispatch(LOAD_USER_INFO)
+      },
+    )
   }
 
   private refreshCart() {
@@ -376,7 +379,7 @@ export default class Cart extends Vue {
 .cart {
   display: flex;
   flex-direction: column;
-  min-height: calc(100vh - 110px);
+  min-height: calc(100vh - #{$profile-image-size + 2 * $content-space});
 }
 
 .cart-item {
diff --git a/vue-app/src/components/Profile.vue b/vue-app/src/components/Profile.vue
index 0c85da19c..279783ba2 100644
--- a/vue-app/src/components/Profile.vue
+++ b/vue-app/src/components/Profile.vue
@@ -140,7 +140,11 @@ export default class Profile extends Vue {
 @import '../styles/vars';
 
 .profile {
+  align-items: center;
   background-color: #23212f;
+  display: flex;
+  height: $profile-image-size;
+  justify-content: center;
   padding: $content-space;
 }
 
@@ -158,6 +162,7 @@ export default class Profile extends Vue {
   align-items: center;
   display: flex;
   flex-direction: row;
+  width: 100%;
 
   .profile-name {
     flex: 1;
@@ -169,10 +174,10 @@ export default class Profile extends Vue {
     border: 4px solid $button-color;
     border-radius: 25px;
     box-sizing: border-box;
-    height: 50px;
+    height: $profile-image-size;
     margin-left: 20px;
     overflow: hidden;
-    width: 50px;
+    width: $profile-image-size;
 
     img {
       height: 100%;
diff --git a/vue-app/src/main.ts b/vue-app/src/main.ts
index 7ee9917ab..805e39ead 100644
--- a/vue-app/src/main.ts
+++ b/vue-app/src/main.ts
@@ -8,7 +8,9 @@ import Meta from 'vue-meta'
 import VModal from 'vue-js-modal'
 
 Vue.use(Meta)
-Vue.use(VModal)
+Vue.use(VModal, {
+  dynamicDefaults: { adaptive: true },
+})
 
 Vue.config.productionTip = false
 
diff --git a/vue-app/src/styles/_vars.scss b/vue-app/src/styles/_vars.scss
index 59dfbe3bf..9a2e9d35f 100644
--- a/vue-app/src/styles/_vars.scss
+++ b/vue-app/src/styles/_vars.scss
@@ -11,3 +11,6 @@ $error-color: #BD6B5E;
 
 $border: 2px solid $border-color;
 $content-space: 30px;
+
+$nav-header-height-sm: 40px;
+$profile-image-size: 50px;
diff --git a/vue-app/src/views/ProjectList.vue b/vue-app/src/views/ProjectList.vue
index 24c927d10..3c9590049 100644
--- a/vue-app/src/views/ProjectList.vue
+++ b/vue-app/src/views/ProjectList.vue
@@ -103,32 +103,32 @@ export default class ProjectList extends Vue {
   flex-wrap: wrap;
   font-size: 12px;
   margin-bottom: $content-space;
+}
 
-  .round-info-item {
-    border-right: $border;
-    border-top: $border;
-    box-sizing: border-box;
-    flex: 0 0 25%;
-    overflow: hidden;
-    padding: 10px $content-space;
-
-    &:nth-child(4n + 1) {
-      padding-left: 0;
-    }
+.round-info-item {
+  border-right: $border;
+  border-top: $border;
+  box-sizing: border-box;
+  flex: 0 0 25%;
+  overflow: hidden;
+  padding: 10px $content-space;
 
-    &:nth-child(4n + 0) {
-      border-right: none;
-    }
+  &:nth-child(4n + 1) {
+    padding-left: 0;
   }
 
-  .round-info-title {
-    margin-bottom: 5px;
+  &:nth-child(4n + 0) {
+    border-right: none;
   }
+}
 
-  .round-info-value {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+.round-info-title {
+  margin-bottom: 5px;
+}
+
+.round-info-value {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .project-list {
@@ -136,4 +136,18 @@ export default class ProjectList extends Vue {
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: $content-space;
 }
+
+@media (max-width: 1150px) {
+  .round-info-item {
+    flex: 0 0 50%;
+
+    &:nth-child(2n+1) {
+      padding-left: 0;
+    }
+
+    &:nth-child(2n) {
+      border-right: none;
+    }
+  }
+}
 </style>