diff --git a/public/index.html b/public/index.html
index 41235286..7a90a450 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
diff --git a/src/components/BootswatchThemeSelect.vue b/src/components/BootswatchThemeSelect.vue
new file mode 100644
index 00000000..9dc05db7
--- /dev/null
+++ b/src/components/BootswatchThemeSelect.vue
@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <!-- <img :src="theme.thumbnail" style="height: 30px;" /> -->
+    <b-nav-item-dropdown
+      id="my-nav-dropdown"
+      text="Theme"
+      toggle-class="nav-link-custom"
+      right
+      lazy
+    >
+      <b-dropdown-item-button
+        v-for="(theme, key) in themes"
+        :key="key"
+        @click="handleClick"
+        :value="theme.cssCdn"
+        :active="activeTheme === theme.cssCdn"
+        :disabled="activeTheme === theme.cssCdn"
+        >{{ theme.name }}
+      </b-dropdown-item-button>
+    </b-nav-item-dropdown>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  data() {
+    return {
+      activeTheme: '',
+      themes: [],
+      supportsLocalStorage: false,
+    };
+  },
+  name: 'BootswatchThemeSelect',
+  created() {
+    console.log('Calling bootswatch api');
+    this.fetchApi();
+  },
+  mounted() {
+    this.supportsLocalStorage = window.localStorage.length > 0;
+  },
+  updated() {
+    if (this.supportsLocalStorage) {
+      const { theme } = window.localStorage;
+      console.log('theme', window.localStorage.theme);
+      if (theme) {
+        console.log('Theme found in localstorage', theme);
+        this.setTheme(theme);
+      }
+    }
+  },
+  methods: {
+    handleClick(e) {
+      this.setTheme(e.target.value);
+    },
+    setTheme(theme) {
+      // Change the stylesheet to a different cdn
+      if (this.activeTheme === theme) {
+        return;
+      }
+      const stylesheet = document.querySelector(
+        'link[rel="stylesheet"][href$="/bootstrap.min.css"]',
+      );
+      if (stylesheet) {
+        stylesheet.href = theme;
+      } else {
+        const link = document.createElement('link');
+        link.href = theme;
+        link.rel = 'stylesheet';
+        link.title = 'bootswatch-theme';
+        document.body.append(link);
+      }
+
+      // Save the theme as localstorage
+      if (this.supportsLocalStorage) {
+        console.log('Setting new theme as ', theme);
+        window.localStorage.theme = theme;
+      }
+      this.activeTheme = theme;
+    },
+    fetchApi() {
+      axios
+        .get('https://bootswatch.com/api/4.json')
+        .then((res) => {
+          const { themes } = res.data;
+          this.themes = themes;
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+  },
+};
+</script>
+
+<style></style>
diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue
index 0a7b6be4..011b7ae6 100644
--- a/src/components/layout/NavBar.vue
+++ b/src/components/layout/NavBar.vue
@@ -12,8 +12,8 @@
         <b-navbar-nav>
           <b-nav-item to="/trade">Trade</b-nav-item>
           <b-nav-item to="/about">About</b-nav-item>
+          <BootswatchThemeSelect />
         </b-navbar-nav>
-
         <!-- Right aligned nav items -->
         <b-navbar-nav class="ml-auto">
           <li class="nav-item" v-if="loggedIn">
@@ -38,10 +38,11 @@
 <script>
 import { mapActions, mapState } from 'vuex';
 import Login from '@/views/Login.vue';
+import BootswatchThemeSelect from '../BootswatchThemeSelect.vue';
 
 export default {
   name: 'NavBar',
-  components: { Login },
+  components: { Login, BootswatchThemeSelect },
   computed: {
     ...mapState('user', ['loggedIn']),
   },
