diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 7a93d2b..c6f6acc 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -90,3 +90,8 @@ body {
 #cursive_4 {
   font-family: 'Cookie', cursive;
 }
+
+.dark .bg-gray-100 {
+  background-color: #38A169;
+  color: #ddd;
+}
diff --git a/src/components/partials/NavBar.vue b/src/components/partials/NavBar.vue
index e0f00a6..0f94dd5 100644
--- a/src/components/partials/NavBar.vue
+++ b/src/components/partials/NavBar.vue
@@ -38,6 +38,25 @@
         >Total Assets: {{ totalAssets }}</span
       >
     </div>
+    <div class="mt-2">
+      <label
+        class="relative inline-flex items-center cursor-pointer"
+        @click="toggleDarkMode"
+      >
+        <div
+          :class="{ 'bg-gray-600': darkMode, 'bg-blue-800': !darkMode }"
+          class="w-10 h-5 rounded-full transition-colors"
+        >
+          <span
+            :class="{ 'translate-x-full': darkMode }"
+            class="block w-5 h-5 bg-gray-200 rounded-full shadow transform transition-transform"
+          ></span>
+        </div>
+        <span class="ml-2">
+          {{ darkMode ? 'Light Mode' : 'Dark Mode' }}
+        </span>
+      </label>
+    </div>
   </nav>
 </template>
 
@@ -46,6 +65,11 @@ import { mapActions, mapGetters } from 'vuex'
 import * as SparkMD5 from 'spark-md5'
 export default {
   name: 'NavBar',
+  data() {
+    return {
+      darkMode: false
+    }
+  },
   computed: {
     ...mapGetters({
       menuType: 'menuType',
@@ -71,6 +95,15 @@ export default {
     ...mapActions(['changeMenuType']),
     logoutUser() {
       this.$store.dispatch('accounts/logout', this.user.id)
+    },
+    toggleDarkMode() {
+      this.darkMode = !this.darkMode
+
+      if (this.darkMode) {
+        document.body.classList.add('dark')
+      } else {
+        document.body.classList.remove('dark')
+      }
     }
   }
 }
diff --git a/src/components/partials/SideNav.vue b/src/components/partials/SideNav.vue
index 09ff123..72fb233 100644
--- a/src/components/partials/SideNav.vue
+++ b/src/components/partials/SideNav.vue
@@ -15,6 +15,12 @@
       </span>
       <span class="link-text">Settings</span>
     </router-link>
+    <router-link v-ripple to="/web3connect">
+      <span class="icon">
+        <web3-connect-icon :color="pathColor('web3connect')" />
+      </span>
+      <span class="link-text">Web3Connect</span>
+    </router-link>
     <router-link v-ripple to="/settings/user">
       <span class="icon">
         <settings-icon :color="pathColor('settings')" />
@@ -30,13 +36,15 @@ import { mapGetters } from 'vuex'
 import FilesIcon from '../icons/Files.vue'
 import SettingsIcon from '../icons/Settings.vue'
 import WalletIcon from '../icons/Wallet.vue'
+import Web3ConnectIcon from '../icons/Web3Connect.vue'
 
 export default {
   name: 'SideNav',
   components: {
     FilesIcon,
     SettingsIcon,
-    WalletIcon
+    WalletIcon,
+    Web3ConnectIcon
   },
   computed: {
     ...mapGetters(['menuType'])
diff --git a/src/router/index.js b/src/router/index.js
index cf9d272..ee4cbbc 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,6 +4,7 @@ import Home from '../views/Home.vue'
 import Directories from '../views/Directories.vue'
 import Test from '../views/Test.vue'
 import Settings from '../views/Settings.vue'
+import Web3Connect from '../views/Web3Connect.vue'
 
 Vue.use(VueRouter)
 
@@ -27,6 +28,11 @@ const routes = [
     path: '/settings/:activeTab',
     name: 'Settings',
     component: Settings
+  },
+  {
+    path: '/web3connect',
+    name: 'Web3Connect',
+    component: Web3Connect
   }
 ]