diff --git a/components/Sidebar.vue b/components/Sidebar.vue
index 50cafbd..68983aa 100644
--- a/components/Sidebar.vue
+++ b/components/Sidebar.vue
@@ -3,7 +3,7 @@
     .sidebar
       template(v-for='category in categories')
         nuxt-link(:to='category.slug') {{ category.title }}
-      div(@click="toggleCardsShown")
+      div(class="toggleWrapper" @click="toggleCardsShown")
         div(class="viewToggle" :class="{active: cardsShown}") Cards
         div(class="viewToggle" :class="{active: !cardsShown}") Table
 </template>
@@ -44,14 +44,23 @@ export default {
     padding: 0.5rem 1rem 0.5rem 1rem;
     font-weight: 600;
   }
-	.viewToggle {
-		background-color: yellow;
+	.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: green;
+		background-color: #08e5ff;
+		color: #232331;
 	}
 }