diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 274a0e4..d470aa9 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,26 +1,27 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router';
-import HeaderNav from './components/HeaderNav.vue';
+import HeaderNav from './components/HeaderNav.vue'
+import SideBar from './components/SideBar.vue'
+import { RouterLink, RouterView } from 'vue-router'
 
 const isTeacher = false
 const isLoggedIn = true
-
 </script>
 
 <template>
-    <div class="sticky top-0">
+  <div class="sticky top-0">
     <header>
       <HeaderNav :isLoggedIn="isLoggedIn" :isTeacher="isTeacher">
         <template #left-icon>
-          <BoltIcon class="icon" /> <!--Hier dann ein richtiges Logo rein-->
+          <BoltIcon class="icon" />
+          <!--Hier dann ein richtiges Logo rein-->
         </template>
       </HeaderNav>
     </header>
   </div>
+
+  <Siderbar />
+
   <RouterView />
 </template>
 
-
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/frontend/src/components/ClassBar.vue b/frontend/src/components/ClassBar.vue
deleted file mode 100644
index e77540e..0000000
--- a/frontend/src/components/ClassBar.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import TieredMenu from 'primevue/tieredmenu';
-
-
-import { ref } from "vue";
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-const items = ref([
-    {
-        label: 'HomeViw',
-        //icon: 'pi pi-home',
-        route: '/'
-    },
-    {
-        label: 'Student',
-        //icon: 'pi pi-graduation-cap',
-        route: '/Student'
-    },
-    {
-        label: 'Programmatic',
-        //icon: 'pi pi-link'
-        command: () => {
-            router.push('/introduction');
-        }
-    },
-    {
-        label: 'External',
-        //icon: 'pi pi-home',
-        items: [
-            {
-                label: 'Vue.js',
-                url: 'https://vuejs.org/'
-            },
-            {
-                label: 'Vite.js',
-                url: 'https://vuejs.org/'
-            }
-        ]
-    }
-]);
-</script>
-
-
-<template>
-  <main>
-    <div class="card flex justify-center">
-        <TieredMenu :model="items">
-            <template #item="{ item, props, hasSubmenu }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span :class="item.icon" />
-                        <!--span class="ml-2">{{ item.label }}</span-->
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <!--span :class="item.icon" /-->
-                    <span class="ml-2">{{ item.label }}</span>
-                    <span v-if="hasSubmenu" class="pi pi-angle-right ml-auto" />
-                </a>
-            </template>
-        </TieredMenu>
-    </div>
-
-
-  </main>
-</template>
diff --git a/frontend/src/components/SideBar.vue b/frontend/src/components/SideBar.vue
new file mode 100644
index 0000000..41e57f0
--- /dev/null
+++ b/frontend/src/components/SideBar.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import Drawer from 'primevue/drawer'
+import { ref } from 'vue'
+
+var elements: ['Max', 'Anna', 'Tom']
+var visible = ref(true)
+</script>
+
+<template>
+  <div class="card flex justify-center">
+    <Drawer v-model:visible="visible" header="Drawer">
+      <div>
+        <table>
+          <tbody>
+            <tr v-for="(element, index) in elements" :key="index">
+              <td color="white">{{ element }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </Drawer>
+  </div>
+</template>