diff --git a/client/src/components/WidgetPopover.vue b/client/src/components/WidgetPopover.vue
index cb1fa16e..42f50974 100644
--- a/client/src/components/WidgetPopover.vue
+++ b/client/src/components/WidgetPopover.vue
@@ -18,59 +18,5 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
 
-  .widget-popover {
-    position: absolute;
-    right: 0;
-    display: flex;
-    flex-direction: column;
-    background-color: $color-white;
-    padding: 0;
-    z-index: 100;
-    @include widget-shadow;
-
-    &--mobile {
-      left: 0;
-      right: inherit;
-    }
-  }
-
-  .popover-links {
-
-    list-style: none;
-    display: grid;
-
-    &__link {
-      cursor: pointer;
-      padding: 0 $medium-spacing;
-
-      & > a {
-        display: inline-block;
-        color: $color-silver-dark;
-        font-family: $sans-serif-font-family;
-        font-size: toRem(14px);
-        line-height: 1.5;
-        padding: 5px 0;
-        cursor: pointer;
-      }
-
-      &--large {
-        line-height: 40px;
-        padding: $small-spacing $medium-spacing;
-        & > a, & {
-          @include small-text;
-        }
-      }
-      &--emph {
-        @include regular-text;
-        font-weight: 600;
-      }
-    }
-
-    &__divider {
-      border-top: 1px solid $color-silver-dark;
-    }
-  }
 </style>
diff --git a/client/src/components/school-class/ClassSelectionWidget.vue b/client/src/components/school-class/ClassSelectionWidget.vue
index 4681441c..5972ef91 100644
--- a/client/src/components/school-class/ClassSelectionWidget.vue
+++ b/client/src/components/school-class/ClassSelectionWidget.vue
@@ -20,11 +20,14 @@
       <li class="popover-links__link popover-links__link--large popover-links__divider"
           v-if="me.isTeacher"
           data-cy="create-class-link" @click="closeSidebar">
-        <router-link tag="span" :to="{name: 'create-class'}">Klasse erfassen</router-link>
+        <router-link tag="span" class="popover-links__link-with-icon" :to="{name: 'create-class'}">
+          <add-icon class="popover-links__icon"/>
+          <span>Klasse erfassen</span>
+        </router-link>
       </li>
-<!--      <li class="popover-links__link popover-links__link&#45;&#45;large popover-links__divider" @click="closeSidebar">-->
-<!--        <router-link tag="span" :to="{name: 'old-classes'}">Alte Klassen anzeigen</router-link>-->
-<!--      </li>-->
+      <!--      <li class="popover-links__link popover-links__link&#45;&#45;large popover-links__divider" @click="closeSidebar">-->
+      <!--        <router-link tag="span" :to="{name: 'old-classes'}">Alte Klassen anzeigen</router-link>-->
+      <!--      </li>-->
     </widget-popover>
   </div>
 </template>
@@ -33,6 +36,7 @@
   import WidgetPopover from '@/components/WidgetPopover';
   import ChevronDown from '@/components/icons/ChevronDown';
   import CurrentClass from '@/components/school-class/CurrentClass';
+  import AddIcon from '@/components/icons/AddIcon';
 
   import updateSelectedClassMixin from '@/mixins/updateSelectedClass';
   import sidebarMixin from '@/mixins/sidebar';
@@ -42,7 +46,8 @@
     components: {
       WidgetPopover,
       ChevronDown,
-      CurrentClass
+      CurrentClass,
+      AddIcon
     },
 
     props: {
@@ -97,6 +102,7 @@
       left: 0;
       transform: translateY($small-spacing);
     }
+
   }
 
   .selected-class {
diff --git a/client/src/styles/_widget-popover.scss b/client/src/styles/_widget-popover.scss
new file mode 100644
index 00000000..19c346d8
--- /dev/null
+++ b/client/src/styles/_widget-popover.scss
@@ -0,0 +1,67 @@
+@import "variables";
+@import "mixins";
+
+.widget-popover {
+  position: absolute;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: $color-white;
+  padding: 0;
+  z-index: 100;
+  @include widget-shadow;
+
+  &--mobile {
+    left: 0;
+    right: inherit;
+  }
+}
+
+.popover-links {
+  list-style: none;
+  display: grid;
+
+  &__icon {
+    width: 25px;
+    height: 25px;
+    margin-right: $small-spacing;
+  }
+
+  &__link-with-icon {
+    display: flex;
+    align-items: center;
+  }
+
+  &__link {
+    cursor: pointer;
+    padding: 0 $medium-spacing;
+
+    & > a {
+      display: inline-block;
+      color: $color-silver-dark;
+      font-family: $sans-serif-font-family;
+      font-size: toRem(14px);
+      line-height: 1.5;
+      padding: 5px 0;
+      cursor: pointer;
+    }
+
+    &--large {
+      line-height: 40px;
+      padding: $small-spacing $medium-spacing;
+
+      & > a, & {
+        @include small-text;
+      }
+    }
+
+    &--emph {
+      @include regular-text;
+      font-weight: 600;
+    }
+  }
+
+  &__divider {
+    border-top: 1px solid $color-silver-dark;
+  }
+}
diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss
index e4b996ec..9493d8dd 100644
--- a/client/src/styles/main.scss
+++ b/client/src/styles/main.scss
@@ -24,3 +24,4 @@
 @import "module-activity";
 @import "book-subnavigation";
 @import "simple-list";
+@import "widget-popover";