diff --git a/components/Sidebar.vue b/components/Sidebar.vue
index 2526a72..68983aa 100644
--- a/components/Sidebar.vue
+++ b/components/Sidebar.vue
@@ -3,7 +3,9 @@
     .sidebar
       template(v-for='category in categories')
         nuxt-link(:to='category.slug') {{ category.title }}
-      input(type='checkbox' :checked='cardsShown' @change="toggleCardsShown()")
+      div(class="toggleWrapper" @click="toggleCardsShown")
+        div(class="viewToggle" :class="{active: cardsShown}") Cards
+        div(class="viewToggle" :class="{active: !cardsShown}") Table
 </template>
 
 <script>
@@ -42,6 +44,24 @@ export default {
     padding: 0.5rem 1rem 0.5rem 1rem;
     font-weight: 600;
   }
+	.toggleWrapper {
+		display: grid;
+  	grid-template-columns: 1fr 1fr;
+		width: min-content;
+		border: 3px;
+		border-color: #08e5ff;
+		border-style: solid;
+		border-radius: .5rem;
+		overflow:hidden;
+	}
+	.viewToggle {
+		padding: 0 .2rem;
+		color: #008190;
+	}
+	.active {
+		background-color: #08e5ff;
+		color: #232331;
+	}
 }
 
 @media (max-width: 400px) {
diff --git a/pages/_category.vue b/pages/_category.vue
index 2f06ca9..22e2948 100644
--- a/pages/_category.vue
+++ b/pages/_category.vue
@@ -21,7 +21,6 @@ export default {
     return {
       categoryRouteTitle: this.$route.params.category,
       categories: store
-      // cardsShown: store.cardsShown,
     };
   },
   computed: {