diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index d470aa9..e440edf 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -18,10 +18,11 @@ const isLoggedIn = true
       </HeaderNav>
     </header>
   </div>
+  <div>
+    <SideBar />
 
-  <Siderbar />
-
-  <RouterView />
+    <RouterView />
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/frontend/src/components/SideBar.vue b/frontend/src/components/SideBar.vue
index ede4f3f..bdab2cc 100644
--- a/frontend/src/components/SideBar.vue
+++ b/frontend/src/components/SideBar.vue
@@ -2,20 +2,25 @@
 import Drawer from 'primevue/drawer'
 import { ref } from 'vue'
 
-var elements: ['Max', 'Anna', 'Tom']
+var elements = ['doulrion', 'Anna', 'Tom']
 var visible = ref(true)
+var closeIcon = ref(false)
 </script>
 
 <template>
-  <div class="card flex justify-center">
-    <Drawer v-model:visible="visible" header="Drawer">
-      <div>
-        <ul>
-          <li v-for="item in elements">
-            <p>{{ item }}</p>
-          </li>
-        </ul>
-      </div>
-    </Drawer>
-  </div>
+  <Drawer
+    v-model:visible="visible"
+    :showCloseIcon="closeIcon"
+    :modal="false"
+    :dismissable="false"
+    header=""
+  >
+    <div>
+      <ul>
+        <li v-for="item in elements">
+          <a url="twitch.tv/{{ item }}">{{ item }}</a>
+        </li>
+      </ul>
+    </div>
+  </Drawer>
 </template>