diff --git a/frontend/components/SideBar.vue b/frontend/components/SideBar.vue
index fa9a209..c37fe2a 100644
--- a/frontend/components/SideBar.vue
+++ b/frontend/components/SideBar.vue
@@ -2,14 +2,26 @@
 defineProps<{
     championName: String
 }>()
+const emit = defineEmits<{
+    stateChange: [state: String]
+}>()
+
+const state = ref("runes")
+
+function handleStateChange(newState : string) {
+    state.value = newState;
+    emit('stateChange', newState)
+}
 </script>
 
 <template>
     <div class="sidebar-container">
         <Logo font-size="2.6rem" img-width="60" style="padding-left: 15px; padding-right: 15px; margin-top: 30px;"/>
         <h1 class="sidebar-link" style="margin-top: 30px; font-size: 2.4rem; padding-left: 20px;">{{ championName }}</h1>
-        <h2 class="sidebar-link" @click="$emit('stateChange', 'runes')" style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px;">Runes</h2>
-        <h2 class="sidebar-link" @click="$emit('stateChange', 'items')" style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px;">Items</h2>
+        <h2 :class="'sidebar-link ' + (state == 'runes' ? 'sidebar-link-selected' : '')" 
+            @click="handleStateChange('runes')" style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px;">Runes</h2>
+        <h2 :class="'sidebar-link ' + (state == 'items' ? 'sidebar-link-selected' : '')" 
+            @click="handleStateChange('items')" style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px;">Items</h2>
     </div>
 </template>
 
@@ -28,11 +40,14 @@ defineProps<{
     margin: 5px;
     padding-top: 5px;
     padding-bottom: 5px;
+    border-radius: 8px;
 }
 .sidebar-link:hover {
     cursor: pointer;
 
     background-color: var(--color-surface-darker);
-    border-radius: 8px;
+}
+.sidebar-link-selected {
+    background-color: var(--color-surface);
 }
 </style>
\ No newline at end of file