diff --git a/src/styles/components/labels.scss b/src/styles/components/labels.scss
index 2037afb75..ee06d3f2e 100644
--- a/src/styles/components/labels.scss
+++ b/src/styles/components/labels.scss
@@ -1,3 +1,4 @@
+// FIXME: adapt lables.vue so that it can be used for this aswell 
 .labels-list {
   a, a:hover {
     text-decoration: none;
@@ -7,6 +8,7 @@
     margin: .5rem 0 .5rem .5rem;
     background: $grey-200;
 
+    // FIXME: only used in ListLabels.vue
     &.disabled {
       opacity: 0.7;
 
diff --git a/src/styles/components/list.scss b/src/styles/components/list.scss
index a681b42df..fadf0201d 100644
--- a/src/styles/components/list.scss
+++ b/src/styles/components/list.scss
@@ -1,3 +1,10 @@
+// FIXME: should be a component <FilterContainer>
+// used in
+// - gantt-component.vue
+// - Kanban.vue
+// - List.vue
+// - Table.vue
+
 $filter-container-top-default: -59px;
 $filter-container-top-link-share-gantt: -138px;
 $filter-container-top-link-share-list: -47px;
diff --git a/src/styles/components/namespaces.scss b/src/styles/components/namespaces.scss
index e244793ce..caead25e8 100644
--- a/src/styles/components/namespaces.scss
+++ b/src/styles/components/namespaces.scss
@@ -1,3 +1,4 @@
+// FIXME: used in navigation.vue and in ListNamespaces.vue
 .namespaces-list.loader-container.is-loading {
 	min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
 }
\ No newline at end of file
diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss
index 732865e33..f66d4da19 100644
--- a/src/styles/components/task.scss
+++ b/src/styles/components/task.scss
@@ -1,7 +1,14 @@
+// FIXME: should be in TaskDetailView.vue
 .link-share-container:not(.has-background) .task-view {
   background: transparent;
 }
 
+// FIXME: create <Done> component
+// used in
+// - heading.vue
+// - kanban-card.vue
+// - Kanban.vue
+// - Table.vue
 .is-done {
   background: $green;
   color: $white;
@@ -14,6 +21,7 @@
   text-align: center;
 }
 
+// FIXME: should be a prop of TaskDetailView.vue
 .modal-container .task-view {
   border-radius: $radius;
   padding: 1rem;
diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index 049587661..ca8aeaf58 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -1,3 +1,6 @@
+// FIXME: These classes are used all over.
+// very hard to untangle
+// they have many overwrites at different positions
 .tasks {
 	margin-top: 1rem;
 	padding: 0;
@@ -43,6 +46,9 @@
 
 }
 
+// FIXME: seems only necessary for
+// - relatedTasks.vue
+// - singleTaskInList.vue
 .is-menu-enabled .tasks .task {
 	span:not(.tag), a {
 		.tasktext,
@@ -60,6 +66,10 @@
 	}
 }
 
+// FIXME: is only used where <edit-task> is used aswell:
+// - gantt-component.vue
+// - List.vue
+// -> Move the <card> wrapper including this class definition inside <edit-task>
 .is-max-width-desktop .tasks .task {
 	max-width: $desktop;
 }
\ No newline at end of file
diff --git a/src/styles/components/tooltip.scss b/src/styles/components/tooltip.scss
index a31b61466..20acf5792 100644
--- a/src/styles/components/tooltip.scss
+++ b/src/styles/components/tooltip.scss
@@ -1,3 +1,5 @@
+// FIXME: https://www.bram.us/2021/09/13/dont-attach-tooltips-to-document-body/
+
 .tooltip {
   visibility: collapse;
   z-index: 10000;
diff --git a/src/styles/theme/form.scss b/src/styles/theme/form.scss
index b1be6fa9b..0796abd0a 100644
--- a/src/styles/theme/form.scss
+++ b/src/styles/theme/form.scss
@@ -1,3 +1,8 @@
+// FIXME:
+// this should be moved to button.vue
+// what prevents this currently is that the class is also used
+// on a <select> element in userTeam.vue
+// -> Maybe create a mixin and import in both components?
 .button {
   transition: all $transition;
   border: 0;
@@ -105,6 +110,9 @@
   margin-right: 0.05rem !important;
 }
 
+// FIXME: used for
+// - the <h1> in heading.vue
+// - the <h2> in Kanban.vue
 // Contenteditable form
 .input.title {
   font-size: 1.8rem;
diff --git a/src/styles/theme/loading.scss b/src/styles/theme/loading.scss
index 8bb0fb52e..a4a76a4c4 100644
--- a/src/styles/theme/loading.scss
+++ b/src/styles/theme/loading.scss
@@ -1,3 +1,4 @@
+// FIXME: move to loading.vue 
 .loader-container.is-loading {
 	position: relative;
 	pointer-events: none;
@@ -14,6 +15,7 @@
 	}
 }
 
+// FIXME: move to ShowTasks.vue 
 .spinner.is-loading {
 	pointer-events: none;
 
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index 455eb2261..894ef2e12 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -1,3 +1,5 @@
+// FIXME: create <MenuButton> component
+
 .menu-hide-button,
 .menu-show-button {
 	display: none;
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index 3369146bd..b2549db73 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -64,6 +64,7 @@ h6 {
 	}
 }
 
+// FIXME: these helpers should be mixins
 .has-no-border {
   border: none !important;
 }
@@ -81,6 +82,7 @@ h6 {
 	overflow-x: auto;
 }
 
+// FIXME: this should be moved in a Avatar component
 .image.is-avatar {
   border-radius: 100%;
 }
@@ -89,6 +91,8 @@ button.table {
   margin-bottom: 0 !important;
 }
 
+// FIXME: merge with dropdown-item.vue
+// for this to happen the component has to be used everywhere
 .dropdown-item {
   display: flex;
   align-items: center;