diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 653b58882c..337e40a211 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -72,13 +72,6 @@ export default {
 @import 'src/scss/global';
 @import '~@mdi/font/css/materialdesignicons.css';
 
-.v-btn.ec-drawer-open,
-.v-btn.ec-drawer-collapse {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-}
-
 @media #{map-get($display-breakpoints, 'xs-only')} {
   html,
   body,
diff --git a/frontend/src/components/navigation/SideBar.vue b/frontend/src/components/navigation/SideBar.vue
index f218d68465..76fabace94 100644
--- a/frontend/src/components/navigation/SideBar.vue
+++ b/frontend/src/components/navigation/SideBar.vue
@@ -11,48 +11,21 @@
     :width="$vuetify.breakpoint.xl || (!mini && !$vuetify.breakpoint.mdAndUp) ? 350 : 256"
     :color="!title || mini ? 'blue-grey lighten-4' : null"
   >
-    <template v-if="title">
-      <v-list class="py-0">
-        <v-list-item v-if="mini" class="py-1" @click.stop="overrideExpanded = true">
-          <v-icon>{{ icon }}</v-icon>
-        </v-list-item>
-        <v-list-item v-else class="py-1 pr-2">
-          <v-list-item-title class="subtitle-1 font-weight-bold">
-            {{ title }}
-          </v-list-item-title>
-          <v-btn icon @click.stop="overrideExpanded = false">
-            <v-icon>mdi-chevron-left</v-icon>
-          </v-btn>
-        </v-list-item>
-      </v-list>
-      <v-divider />
-      <slot v-if="!mini" />
-    </template>
-    <template v-else>
-      <v-btn
-        v-if="mini"
-        icon
-        class="ec-drawer-open mr-1"
-        @click.stop="overrideExpanded = true"
-      >
-        <v-icon>mdi-format-list-bulleted-type</v-icon>
-      </v-btn>
-      <v-spacer />
-      <v-btn
-        v-if="!mini"
-        icon
-        fixed
-        class="ec-drawer-collapse mr-1"
-        style="z-index: 10"
-        right
-        @click.stop="overrideExpanded = false"
-      >
-        <v-icon>mdi-chevron-left</v-icon>
-      </v-btn>
-
-      <v-divider />
-      <slot v-if="!mini" />
-    </template>
+    <v-list class="py-0">
+      <v-list-item v-if="mini" class="py-1" @click.stop="overrideExpanded = true">
+        <v-icon>{{ icon }}</v-icon>
+      </v-list-item>
+      <v-list-item v-else class="py-1 pr-2">
+        <v-list-item-title class="subtitle-1 font-weight-bold">
+          {{ title }}
+        </v-list-item-title>
+        <v-btn icon @click.stop="overrideExpanded = false">
+          <v-icon>mdi-chevron-left</v-icon>
+        </v-btn>
+      </v-list-item>
+    </v-list>
+    <v-divider />
+    <slot v-if="!mini" />
   </v-navigation-drawer>
 </template>
 
@@ -60,7 +33,7 @@
 export default {
   name: 'SideBar',
   props: {
-    title: { type: String, default: null },
+    title: { type: String, required: true },
     icon: { type: String, default: 'mdi-format-list-bulleted-type' },
   },
   data() {
diff --git a/frontend/src/views/activity/SideBarProgram.vue b/frontend/src/views/activity/SideBarProgram.vue
index db8b12149f..14c0b651df 100644
--- a/frontend/src/views/activity/SideBarProgram.vue
+++ b/frontend/src/views/activity/SideBarProgram.vue
@@ -1,38 +1,35 @@
 <template>
-  <side-bar>
-    <content-card>
-      <v-subheader class="text-uppercase subtitle-2">
-        {{ $tc('views.activity.sideBarProgram.title') }}
-      </v-subheader>
-      <schedule-entries :period="period" :show-button="false">
-        <template #default="slotProps">
-          <v-skeleton-loader v-if="slotProps.loading" class="ma-3" type="list-item@6" />
-          <picasso
-            v-else
-            :schedule-entries="slotProps.scheduleEntries"
-            :period="period()"
-            :start="currentDayAsString"
-            :interval-height="36"
-            :end="currentDayAsString"
-            type="day"
-          />
-        </template>
-      </schedule-entries>
-    </content-card>
-  </side-bar>
+  <SideBar
+    :title="$tc('views.activity.sideBarProgram.title')"
+    icon="mdi-format-list-numbered"
+  >
+    <ScheduleEntries :period="period" :show-button="false">
+      <template #default="slotProps">
+        <v-skeleton-loader v-if="slotProps.loading" class="ma-3" type="list-item@6" />
+        <Picasso
+          v-else
+          :schedule-entries="slotProps.scheduleEntries"
+          :period="period()"
+          :start="currentDayAsString"
+          :interval-height="36"
+          :end="currentDayAsString"
+          type="day"
+        />
+      </template>
+    </ScheduleEntries>
+  </SideBar>
 </template>
 
 <script>
 import Picasso from '@/components/program/picasso/Picasso.vue'
 import SideBar from '@/components/navigation/SideBar.vue'
-import ContentCard from '@/components/layout/ContentCard.vue'
 import ScheduleEntries from '@/components/program/ScheduleEntries.vue'
 
 import { HTML5_FMT } from '@/common/helpers/dateFormat.js'
 
 export default {
   name: 'SideBarProgram',
-  components: { ContentCard, SideBar, Picasso, ScheduleEntries },
+  components: { SideBar, Picasso, ScheduleEntries },
   props: {
     day: { type: Function, required: true },
   },
diff --git a/frontend/src/views/admin/SideBarAdmin.vue b/frontend/src/views/admin/SideBarAdmin.vue
index 14b55ee991..4fdf5cbd37 100644
--- a/frontend/src/views/admin/SideBarAdmin.vue
+++ b/frontend/src/views/admin/SideBarAdmin.vue
@@ -1,5 +1,5 @@
 <template>
-  <side-bar :title="$tc('global.navigation.admin.title')" icon="mdi-menu">
+  <SideBar :title="$tc('global.navigation.admin.title')" icon="mdi-menu">
     <v-list class="py-0">
       <SidebarListItem
         :to="adminRoute(camp(), 'info')"
@@ -28,7 +28,7 @@
         icon="mdi-file-outline"
       />
     </v-list>
-  </side-bar>
+  </SideBar>
 </template>
 
 <script>
diff --git a/frontend/src/views/material/SideBarMaterialLists.vue b/frontend/src/views/material/SideBarMaterialLists.vue
index a6b2cc8c9e..3478e8e189 100644
--- a/frontend/src/views/material/SideBarMaterialLists.vue
+++ b/frontend/src/views/material/SideBarMaterialLists.vue
@@ -1,21 +1,18 @@
 <template>
-  <side-bar>
-    <content-card>
-      <v-list-item exact color="secondary" class="text-uppercase subtitle-2">
-        {{ $tc('views.material.sideBarMaterialLists.title') }}
-      </v-list-item>
-      <MaterialLists :camp="camp" />
-    </content-card>
-  </side-bar>
+  <SideBar
+    :title="$tc('views.material.sideBarMaterialLists.title')"
+    icon="mdi-format-list-checkbox"
+  >
+    <MaterialLists :camp="camp" />
+  </SideBar>
 </template>
 
 <script>
 import SideBar from '@/components/navigation/SideBar.vue'
-import ContentCard from '@/components/layout/ContentCard.vue'
 import MaterialLists from '@/components/material/MaterialLists.vue'
 export default {
   name: 'SideBarMaterialLists',
-  components: { MaterialLists, ContentCard, SideBar },
+  components: { MaterialLists, SideBar },
   props: {
     camp: { type: Function, required: true },
   },