diff --git a/desktop/src/app.scss b/desktop/src/app.scss
index 2e47a6b446..c7ee7718b3 100644
--- a/desktop/src/app.scss
+++ b/desktop/src/app.scss
@@ -1,33 +1,33 @@
 @use 'sass:color';
 
 $mdi-font-path: 'fonts' !default;
-@import '../node_modules/@mdi/font/css/materialdesignicons';
-
-@import '@fontsource/open-sans/variable-full.css';
-@import "@fontsource/open-sans/variable-full-italic.css";
-
-@import 'app/components/variables';
-@import 'app/components/messages/messages';
-@import 'bootstrap';
-@import 'app/components/initialization';
-@import 'app/components/spinner';
-@import 'app/components/buttons';
-@import 'app/components/slider';
-@import 'app/components/navbar/navbar';
-@import 'app/components/default-page';
-@import 'app/components/resources/resources';
-@import 'app/components/import/import';
-@import 'app/components/export/export';
-@import 'app/components/settings/settings';
-@import 'app/components/viewmodal/view-modal';
-@import 'app/components/widgets/widgets';
-@import 'app/components/docedit/docedit';
-@import 'app/components/image/image';
-@import 'app/components/matrix/matrix-view';
-@import 'app/components/help/help';
-@import 'app/components/configuration/configuration';
-@import 'app/components/project/project';
-@import 'app/components/backup/backup';
+@use '../node_modules/@mdi/font/css/materialdesignicons';
+
+@use '@fontsource/open-sans/variable-full.css';
+@use "@fontsource/open-sans/variable-full-italic.css";
+
+@use 'bootstrap' as *;
+
+@use 'app/components/messages/messages';
+@use 'app/components/spinner';
+@use 'app/components/buttons';
+@use 'app/components/slider';
+@use 'app/components/navbar/navbar';
+@use 'app/components/default-page';
+@use 'app/components/resources/resources';
+@use 'app/components/import/import';
+@use 'app/components/export/export';
+@use 'app/components/settings/settings';
+@use 'app/components/viewmodal/view-modal';
+@use 'app/components/widgets/widgets';
+@use 'app/components/docedit/docedit';
+@use 'app/components/image/image';
+@use 'app/components/matrix/matrix-view';
+@use 'app/components/help/help';
+@use 'app/components/configuration/configuration';
+@use 'app/components/project/project';
+@use 'app/components/backup/backup';
+@use 'app/components/variables' as *;
 
 .search-help-tooltip {
   .tooltip-inner {
diff --git a/desktop/src/app/components/buttons.scss b/desktop/src/app/components/buttons.scss
index e0742bacf5..1ece615d93 100644
--- a/desktop/src/app/components/buttons.scss
+++ b/desktop/src/app/components/buttons.scss
@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use './variables' as *;
 
 .btn {
   cursor: default !important;
diff --git a/desktop/src/app/components/configuration/add/category/category-listing.scss b/desktop/src/app/components/configuration/add/category/category-listing.scss
index 64604033f0..fa406e2706 100644
--- a/desktop/src/app/components/configuration/add/category/category-listing.scss
+++ b/desktop/src/app/components/configuration/add/category/category-listing.scss
@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use '../../../variables' as *;
 
 category-listing {
   display: block;
diff --git a/desktop/src/app/components/configuration/add/field/field-listing.scss b/desktop/src/app/components/configuration/add/field/field-listing.scss
index f2797f8b84..56d6e974ca 100644
--- a/desktop/src/app/components/configuration/add/field/field-listing.scss
+++ b/desktop/src/app/components/configuration/add/field/field-listing.scss
@@ -1,3 +1,5 @@
+@use '../../../variables' as *;
+
 field-listing {
   display: block;
   width: 100%;
diff --git a/desktop/src/app/components/configuration/add/group/group-listing.scss b/desktop/src/app/components/configuration/add/group/group-listing.scss
index 3e41447086..1c39f71f30 100644
--- a/desktop/src/app/components/configuration/add/group/group-listing.scss
+++ b/desktop/src/app/components/configuration/add/group/group-listing.scss
@@ -1,3 +1,5 @@
+@use '../../../variables' as *;
+
 group-listing {
   display: block;
   width: 100%;
diff --git a/desktop/src/app/components/configuration/add/listing.scss b/desktop/src/app/components/configuration/add/listing.scss
index cac324ffb8..64808415f4 100644
--- a/desktop/src/app/components/configuration/add/listing.scss
+++ b/desktop/src/app/components/configuration/add/listing.scss
@@ -1,3 +1,5 @@
+@use '../../variables' as *;
+
 .listing {
   height: 100%;
   width: 100%;
diff --git a/desktop/src/app/components/configuration/add/valuelist/valuelist-listing.scss b/desktop/src/app/components/configuration/add/valuelist/valuelist-listing.scss
index fad47e61fc..a2b12ac05d 100644
--- a/desktop/src/app/components/configuration/add/valuelist/valuelist-listing.scss
+++ b/desktop/src/app/components/configuration/add/valuelist/valuelist-listing.scss
@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use '../../../variables' as *;
 
 valuelist-listing {
   display: block;
diff --git a/desktop/src/app/components/configuration/browse/configuration-category.scss b/desktop/src/app/components/configuration/browse/configuration-category.scss
index 332dcf15d8..7638af3a82 100644
--- a/desktop/src/app/components/configuration/browse/configuration-category.scss
+++ b/desktop/src/app/components/configuration/browse/configuration-category.scss
@@ -1,3 +1,5 @@
+@use '../../variables' as *;
+
 configuration-category {
   user-select: none;
 
diff --git a/desktop/src/app/components/configuration/browse/configuration-field-drag-element.scss b/desktop/src/app/components/configuration/browse/configuration-field-drag-element.scss
index e71aafbede..e8ec6c3c90 100644
--- a/desktop/src/app/components/configuration/browse/configuration-field-drag-element.scss
+++ b/desktop/src/app/components/configuration/browse/configuration-field-drag-element.scss
@@ -1,3 +1,5 @@
+@use '../../variables' as *;
+
 .field-drag-element {
   box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.2),
               0 9px 11px 2px rgba(0, 0, 0, 0.14),
diff --git a/desktop/src/app/components/configuration/browse/configuration-field.scss b/desktop/src/app/components/configuration/browse/configuration-field.scss
index 25e2037913..792bc613a8 100644
--- a/desktop/src/app/components/configuration/browse/configuration-field.scss
+++ b/desktop/src/app/components/configuration/browse/configuration-field.scss
@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use '../../variables' as *;
 
 configuration-field {
   .card {
diff --git a/desktop/src/app/components/configuration/browse/hierarchical-relations-info.scss b/desktop/src/app/components/configuration/browse/hierarchical-relations-info.scss
index 59987dbb97..c9254c8368 100644
--- a/desktop/src/app/components/configuration/browse/hierarchical-relations-info.scss
+++ b/desktop/src/app/components/configuration/browse/hierarchical-relations-info.scss
@@ -1,3 +1,5 @@
+@use 'bootstrap' as *;
+
 hierarchical-relations-info {
   .btn {
     position: relative;
diff --git a/desktop/src/app/components/configuration/configuration.scss b/desktop/src/app/components/configuration/configuration.scss
index ac49f1cde8..1ca7e3c53b 100644
--- a/desktop/src/app/components/configuration/configuration.scss
+++ b/desktop/src/app/components/configuration/configuration.scss
@@ -1,43 +1,44 @@
 @use 'sass:color';
 
-@import './browse/configuration-category';
-@import './browse/configuration-field';
-@import './browse/configuration-field-drag-element';
-@import './browse/hierarchical-relations-info';
-@import './editor/configuration-editor-modal';
-@import './editor/field/field-editor-modal';
-@import './editor/field/subfield-editor-modal';
-@import './editor/field/widgets/input-type-selector';
-@import './editor/field/widgets/valuelist-selector';
-@import './editor/field/widgets/subfields-section';
-@import './editor/category/category-editor-modal';
-@import './editor/valuelist/valuelist-editor-modal';
-@import './editor/valuelist/value-editor-modal';
-@import './editor/widgets/multi-language-input';
-@import './editor/widgets/references-input';
-@import './delete/delete-modal';
-@import './add/listing';
-@import './add/preview';
-@import './add/category/add-category-modal';
-@import './add/category/swap-category-form-modal';
-@import './add/category/category-listing';
-@import './add/category/category-preview';
-@import './add/field/add-field-modal';
-@import './add/field/field-listing';
-@import './add/field/field-preview';
-@import './add/group/add-group-modal';
-@import './add/group/group-listing';
-@import './add/valuelist/add-valuelist-modal';
-@import './add/valuelist/manage-valuelists-modal';
-@import './add/valuelist/valuelist-listing';
-@import './add/valuelist/valuelist-preview';
-@import './add/valuelist/valuelist-search-bar';
-@import './add/valuelist/extend-valuelist-modal';
-@import './widgets/valuelist-view';
-@import './notifications/configuration-change-notification-modal';
-@import './conflicts/configuration-conflicts-modal';
-@import './import/import-configuration-modal';
-@import './save/save-modal';
+@use './browse/configuration-category';
+@use './browse/configuration-field';
+@use './browse/configuration-field-drag-element';
+@use './browse/hierarchical-relations-info';
+@use './editor/configuration-editor-modal';
+@use './editor/field/field-editor-modal';
+@use './editor/field/subfield-editor-modal';
+@use './editor/field/widgets/input-type-selector';
+@use './editor/field/widgets/valuelist-selector';
+@use './editor/field/widgets/subfields-section';
+@use './editor/category/category-editor-modal';
+@use './editor/valuelist/valuelist-editor-modal';
+@use './editor/valuelist/value-editor-modal';
+@use './editor/widgets/multi-language-input';
+@use './editor/widgets/references-input';
+@use './delete/delete-modal';
+@use './add/listing';
+@use './add/preview';
+@use './add/category/add-category-modal';
+@use './add/category/swap-category-form-modal';
+@use './add/category/category-listing';
+@use './add/category/category-preview';
+@use './add/field/add-field-modal';
+@use './add/field/field-listing';
+@use './add/field/field-preview';
+@use './add/group/add-group-modal';
+@use './add/group/group-listing';
+@use './add/valuelist/add-valuelist-modal';
+@use './add/valuelist/manage-valuelists-modal';
+@use './add/valuelist/valuelist-listing';
+@use './add/valuelist/valuelist-preview';
+@use './add/valuelist/valuelist-search-bar';
+@use './add/valuelist/extend-valuelist-modal';
+@use './widgets/valuelist-view';
+@use './notifications/configuration-change-notification-modal';
+@use './conflicts/configuration-conflicts-modal';
+@use './import/import-configuration-modal';
+@use './save/save-modal';
+@use '../variables' as *;
 
 #configuration-loading-icon-container {
   width: 100%;
diff --git a/desktop/src/app/components/configuration/editor/configuration-editor-modal.scss b/desktop/src/app/components/configuration/editor/configuration-editor-modal.scss
index 640caca531..3ba9ed64d7 100644
--- a/desktop/src/app/components/configuration/editor/configuration-editor-modal.scss
+++ b/desktop/src/app/components/configuration/editor/configuration-editor-modal.scss
@@ -1,3 +1,6 @@
+@use 'bootstrap' as *;
+@use '../../variables' as *;
+
 .configuration-editor-modal-header {
   height: 54px;
   padding: 7px;
diff --git a/desktop/src/app/components/default-page.scss b/desktop/src/app/components/default-page.scss
index 2cc3eef97e..d590ecdf61 100644
--- a/desktop/src/app/components/default-page.scss
+++ b/desktop/src/app/components/default-page.scss
@@ -1,7 +1,7 @@
 .default-nav {
   position: relative;
   z-index: 1001;
-  border-bottom: 1px solid $gray-200;
+  border-bottom: 1px solid #e9ecef;
   height: 50px;
   padding-top: 5px;
 }
diff --git a/desktop/src/app/components/docedit/core/edit-form.scss b/desktop/src/app/components/docedit/core/edit-form.scss
index 43be2856fe..9751a0dae2 100644
--- a/desktop/src/app/components/docedit/core/edit-form.scss
+++ b/desktop/src/app/components/docedit/core/edit-form.scss
@@ -1,3 +1,5 @@
+@use '../../variables' as *;
+
 #document-edit-wrapper {
   main {
     .container-fluid {
diff --git a/desktop/src/app/components/docedit/core/forms/array-field/object-array-entry-modal.scss b/desktop/src/app/components/docedit/core/forms/array-field/object-array-entry-modal.scss
index e987dbd623..676df35bc8 100644
--- a/desktop/src/app/components/docedit/core/forms/array-field/object-array-entry-modal.scss
+++ b/desktop/src/app/components/docedit/core/forms/array-field/object-array-entry-modal.scss
@@ -1,3 +1,5 @@
+@use '../../../../variables' as *;
+
 .object-array-entry-modal {
     top: 55px;
   
diff --git a/desktop/src/app/components/docedit/core/forms/forms.scss b/desktop/src/app/components/docedit/core/forms/forms.scss
index 610e5d4c5a..f6ca438f12 100644
--- a/desktop/src/app/components/docedit/core/forms/forms.scss
+++ b/desktop/src/app/components/docedit/core/forms/forms.scss
@@ -1,3 +1,5 @@
+@use 'bootstrap' as *;
+
 form-field-dating,
 form-field-dimension,
 form-field-literature,
diff --git a/desktop/src/app/components/docedit/core/forms/identifier.scss b/desktop/src/app/components/docedit/core/forms/identifier.scss
index 21166b23ba..2d3285954f 100644
--- a/desktop/src/app/components/docedit/core/forms/identifier.scss
+++ b/desktop/src/app/components/docedit/core/forms/identifier.scss
@@ -1,3 +1,6 @@
+
+@use '../../../variables' as *;
+
 form-field-identifier {
   .identifier-prefix-label {
     height: 33px;
diff --git a/desktop/src/app/components/docedit/docedit.scss b/desktop/src/app/components/docedit/docedit.scss
index 0004d07a06..0be27a48d3 100644
--- a/desktop/src/app/components/docedit/docedit.scss
+++ b/desktop/src/app/components/docedit/docedit.scss
@@ -1,33 +1,34 @@
-@import 'relations';
-@import 'tabs/docedit-conflicts-tab';
-@import 'widgets/category-switcher-button';
-@import 'widgets/image-picker';
-@import 'widgets/relationpicker/relation-picker';
-@import 'widgets/relationpicker/relation-picker-group';
-@import 'core/edit-form';
-@import 'core/edit-form-group';
-@import 'core/forms/forms';
-@import 'core/forms/geometry';
-@import 'core/forms/date';
-@import 'core/forms/dropdown';
-@import 'core/forms/dropdown-range';
-@import 'core/forms/input';
-@import 'core/forms/multi-input';
-@import 'core/forms/valuelist-multi-input';
-@import 'core/forms/identifier';
-@import 'core/forms/type-relation/type-row';
-@import 'core/forms/type-relation/type-relation-picker';
-@import 'core/forms/array-field/object-array-entry-modal';
-@import 'core/forms/array-field/dating-entry-modal';
-@import 'core/forms/array-field/dimension-entry-modal';
-@import 'core/forms/array-field/literature-entry-modal';
-@import 'core/forms/array-field/composite/composite-entry-modal';
-@import 'core/forms/array-field/composite/composite';
-@import 'core/forms/widgets/outliers';
-@import 'core/forms/widgets/empty-valuelist-info';
-@import 'core/forms/widgets/invalid-field-data';
-@import 'core/forms/widgets/multi-language-text-field';
-@import 'dialog/duplicate-modal';
+@use 'relations';
+@use 'tabs/docedit-conflicts-tab';
+@use 'widgets/category-switcher-button';
+@use 'widgets/image-picker';
+@use 'widgets/relationpicker/relation-picker';
+@use 'widgets/relationpicker/relation-picker-group';
+@use 'core/edit-form';
+@use 'core/edit-form-group';
+@use 'core/forms/forms';
+@use 'core/forms/geometry';
+@use 'core/forms/date';
+@use 'core/forms/dropdown';
+@use 'core/forms/dropdown-range';
+@use 'core/forms/input';
+@use 'core/forms/multi-input';
+@use 'core/forms/valuelist-multi-input';
+@use 'core/forms/identifier';
+@use 'core/forms/type-relation/type-row';
+@use 'core/forms/type-relation/type-relation-picker';
+@use 'core/forms/array-field/object-array-entry-modal';
+@use 'core/forms/array-field/dating-entry-modal';
+@use 'core/forms/array-field/dimension-entry-modal';
+@use 'core/forms/array-field/literature-entry-modal';
+@use 'core/forms/array-field/composite/composite-entry-modal';
+@use 'core/forms/array-field/composite/composite';
+@use 'core/forms/widgets/outliers';
+@use 'core/forms/widgets/empty-valuelist-info';
+@use 'core/forms/widgets/invalid-field-data';
+@use 'core/forms/widgets/multi-language-text-field';
+@use 'dialog/duplicate-modal';
+@use '../variables' as *;
 
 #document-edit-wrapper {
   height: calc(100vh - 84px);
diff --git a/desktop/src/app/components/docedit/relations.scss b/desktop/src/app/components/docedit/relations.scss
index 510f144ac5..383228f31d 100644
--- a/desktop/src/app/components/docedit/relations.scss
+++ b/desktop/src/app/components/docedit/relations.scss
@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 .add-relation {
   display: block;
   width: 35px;
diff --git a/desktop/src/app/components/docedit/tabs/docedit-conflicts-tab.scss b/desktop/src/app/components/docedit/tabs/docedit-conflicts-tab.scss
index 5b471e710c..4bcc42cec9 100644
--- a/desktop/src/app/components/docedit/tabs/docedit-conflicts-tab.scss
+++ b/desktop/src/app/components/docedit/tabs/docedit-conflicts-tab.scss
@@ -1,4 +1,5 @@
-@import './revision-selector';
+@use './revision-selector';
+@use '../../variables' as *;
 
 #conflict-resolver {
   height: calc(100vh - 161px);
diff --git a/desktop/src/app/components/help/help.scss b/desktop/src/app/components/help/help.scss
index a28bd9d211..87969adddb 100644
--- a/desktop/src/app/components/help/help.scss
+++ b/desktop/src/app/components/help/help.scss
@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 /**
  * @author Thomas Kleinke
  */
diff --git a/desktop/src/app/components/image/grid/drop-area.scss b/desktop/src/app/components/image/grid/drop-area.scss
index a7fa731038..0f08ac9dc0 100644
--- a/desktop/src/app/components/image/grid/drop-area.scss
+++ b/desktop/src/app/components/image/grid/drop-area.scss
@@ -1,3 +1,5 @@
+@use '../../variables' as *;
+
 .droparea {
   height: 100%;
   color: gray;
diff --git a/desktop/src/app/components/image/grid/image-grid.scss b/desktop/src/app/components/image/grid/image-grid.scss
index 37a4bc688e..f5aea163f0 100644
--- a/desktop/src/app/components/image/grid/image-grid.scss
+++ b/desktop/src/app/components/image/grid/image-grid.scss
@@ -1,5 +1,6 @@
-@import 'image-grid-cell';
-@import 'drop-area';
+@use 'image-grid-cell';
+@use 'drop-area';
+@use '../../variables' as *;
 
 .image-grid {
   margin-top: 15px;
diff --git a/desktop/src/app/components/image/image.scss b/desktop/src/app/components/image/image.scss
index 27d7538e53..728ed329ed 100644
--- a/desktop/src/app/components/image/image.scss
+++ b/desktop/src/app/components/image/image.scss
@@ -1,5 +1,5 @@
-@import 'row/image-row';
-@import 'grid/image-grid';
-@import 'overview/image-overview';
-@import 'upload/image-upload';
-@import 'viewer/image-viewer';
+@use 'row/image-row';
+@use 'grid/image-grid';
+@use 'overview/image-overview';
+@use 'upload/image-upload';
+@use 'viewer/image-viewer';
diff --git a/desktop/src/app/components/image/overview/image-overview.scss b/desktop/src/app/components/image/overview/image-overview.scss
index 33c9f25d9f..ad4aba9579 100644
--- a/desktop/src/app/components/image/overview/image-overview.scss
+++ b/desktop/src/app/components/image/overview/image-overview.scss
@@ -1,5 +1,6 @@
-@import 'deletion/delete-modal';
-@import 'searchbar/image-overview-search-bar';
+@use 'deletion/delete-modal';
+@use 'searchbar/image-overview-search-bar';
+@use '../../variables' as *;
 
 .image-overview {
   .image-grid {
@@ -13,7 +14,7 @@
   .image-overview-nav {
     position: relative;
     z-index: 1001;
-    border-bottom: 1px solid $gray-200;
+    border-bottom: 1px solid #e9ecef;
     height: $toolbar-height;
     display: flex;
 
diff --git a/desktop/src/app/components/image/upload/image-upload.scss b/desktop/src/app/components/image/upload/image-upload.scss
index 6ad58f5ffc..2df43b88eb 100644
--- a/desktop/src/app/components/image/upload/image-upload.scss
+++ b/desktop/src/app/components/image/upload/image-upload.scss
@@ -1 +1 @@
-@import 'image-upload-metadata-modal.scss';
+@use 'image-upload-metadata-modal.scss';
diff --git a/desktop/src/app/components/matrix/matrix-view.scss b/desktop/src/app/components/matrix/matrix-view.scss
index 4992dcb0c1..41d55266d4 100644
--- a/desktop/src/app/components/matrix/matrix-view.scss
+++ b/desktop/src/app/components/matrix/matrix-view.scss
@@ -3,14 +3,14 @@
  * @author Daniel de Oliveira
  */
 
-@import 'graph';
-@import 'matrix-options-menu';
+@use 'graph';
+@use 'matrix-options-menu';
 
 #matrix-view {
   position: relative;
   height: 50px;
   padding: 6px;
-  border-bottom: 1px solid $gray-200;
+  border-bottom: 1px solid #e9ecef;
   z-index: 1001;
   user-select: none;
   cursor: default;
diff --git a/desktop/src/app/components/navbar/navbar-variables.scss b/desktop/src/app/components/navbar/navbar-variables.scss
new file mode 100644
index 0000000000..7e7a43b7cc
--- /dev/null
+++ b/desktop/src/app/components/navbar/navbar-variables.scss
@@ -0,0 +1,9 @@
+@use 'sass:color';
+@use '../variables' as *;
+
+$tab-bg-color: #f8f9fa;
+$tab-bg-color-hover: $navbar-default-bg;
+$tab-separator-color: color.adjust($navbar-default-bg, $lightness: -4%);
+$navbar-link-color: #343a40;
+$link-hover-color: color.adjust($navbar-link-color, $lightness: 30%);
+$border-radius: 4px;
diff --git a/desktop/src/app/components/navbar/navbar.scss b/desktop/src/app/components/navbar/navbar.scss
index 743a34edb6..405a0c52ce 100644
--- a/desktop/src/app/components/navbar/navbar.scss
+++ b/desktop/src/app/components/navbar/navbar.scss
@@ -1,14 +1,8 @@
 @use 'sass:color';
-
-$tab-bg-color: $gray-100;
-$tab-bg-color-hover: $navbar-default-bg;
-$tab-separator-color: color.adjust($navbar-default-bg, $lightness: -4%);
-$navbar-link-color: $gray-800;
-$link-hover-color: color.adjust($navbar-link-color, $lightness: 30%);
-$border-radius: 4px;
-
-@import 'taskbar';
-@import 'projects';
+@use '../variables' as *;
+@use 'navbar-variables' as *;
+@use 'taskbar';
+@use 'projects';
 
 .navbar {
   -webkit-app-region: drag;
diff --git a/desktop/src/app/components/navbar/taskbar-sync-status.scss b/desktop/src/app/components/navbar/taskbar-sync-status.scss
index d7c0c8cefe..fd38bd9aee 100644
--- a/desktop/src/app/components/navbar/taskbar-sync-status.scss
+++ b/desktop/src/app/components/navbar/taskbar-sync-status.scss
@@ -1,3 +1,5 @@
+@use 'navbar-variables' as *;
+
 taskbar-sync-status {
   #sync-status {
     position: relative;
diff --git a/desktop/src/app/components/navbar/taskbar-update.scss b/desktop/src/app/components/navbar/taskbar-update.scss
index d7829f8679..1afc963cad 100644
--- a/desktop/src/app/components/navbar/taskbar-update.scss
+++ b/desktop/src/app/components/navbar/taskbar-update.scss
@@ -1,3 +1,5 @@
+@use 'navbar-variables' as *;
+
 /**
  * @author Thomas Kleinke
  */
diff --git a/desktop/src/app/components/navbar/taskbar.scss b/desktop/src/app/components/navbar/taskbar.scss
index 6f69957d5b..2f3e71b695 100644
--- a/desktop/src/app/components/navbar/taskbar.scss
+++ b/desktop/src/app/components/navbar/taskbar.scss
@@ -1,10 +1,11 @@
-@import 'taskbar-update';
-@import 'taskbar-sync-status';
-@import 'warnings/taskbar-warnings';
-@import 'warnings/warnings-modal';
-@import 'warnings/modals/warnings-tool-modals';
-@import 'warnings/modals/select-new-category-modal';
-@import 'warnings/widgets/invalid-resource-view';
+@use 'navbar-variables' as *;
+@use 'taskbar-update';
+@use 'taskbar-sync-status';
+@use 'warnings/taskbar-warnings';
+@use 'warnings/warnings-modal';
+@use 'warnings/modals/warnings-tool-modals';
+@use 'warnings/modals/select-new-category-modal';
+@use 'warnings/widgets/invalid-resource-view';
 
 .taskbar {
   margin-top: 2px;
diff --git a/desktop/src/app/components/navbar/warnings/taskbar-warnings.scss b/desktop/src/app/components/navbar/warnings/taskbar-warnings.scss
index d168d96630..20f7e9b493 100644
--- a/desktop/src/app/components/navbar/warnings/taskbar-warnings.scss
+++ b/desktop/src/app/components/navbar/warnings/taskbar-warnings.scss
@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use '../navbar-variables' as *;
+@use '../../variables' as *;
 
 #warnings {
   position: relative;
diff --git a/desktop/src/app/components/navbar/warnings/warnings-modal.scss b/desktop/src/app/components/navbar/warnings/warnings-modal.scss
index 4a12605072..ef487441b7 100644
--- a/desktop/src/app/components/navbar/warnings/warnings-modal.scss
+++ b/desktop/src/app/components/navbar/warnings/warnings-modal.scss
@@ -1,3 +1,5 @@
+@use '../../variables' as *;
+
 .warnings-modal-header {
   height: 54px;
   padding: 7px;
diff --git a/desktop/src/app/components/project/project.scss b/desktop/src/app/components/project/project.scss
index bdf1afd1a9..519dd3454e 100644
--- a/desktop/src/app/components/project/project.scss
+++ b/desktop/src/app/components/project/project.scss
@@ -1,10 +1,10 @@
-@import 'create-project-modal';
-@import 'delete-project-modal';
-@import 'synchronization-modal';
-@import 'project-information-modal';
-@import 'download-project';
-@import 'download-project-progress-modal';
-@import 'cancel-modal';
+@use 'create-project-modal';
+@use 'delete-project-modal';
+@use 'synchronization-modal';
+@use 'project-information-modal';
+@use 'download-project';
+@use 'download-project-progress-modal';
+@use 'cancel-modal';
 
 
 .image-size-spinner {
diff --git a/desktop/src/app/components/resources/actions/edit-qr-code/qr-code-editor-modal.scss b/desktop/src/app/components/resources/actions/edit-qr-code/qr-code-editor-modal.scss
index bd0c060a51..1cc0353e67 100644
--- a/desktop/src/app/components/resources/actions/edit-qr-code/qr-code-editor-modal.scss
+++ b/desktop/src/app/components/resources/actions/edit-qr-code/qr-code-editor-modal.scss
@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use '../../../variables' as *;
 
 #qr-code-editor-modal-body {
   height: 412x;
diff --git a/desktop/src/app/components/resources/grid-list/grid-item.scss b/desktop/src/app/components/resources/grid-list/grid-item.scss
index 839a8833fb..23e9117f17 100644
--- a/desktop/src/app/components/resources/grid-list/grid-item.scss
+++ b/desktop/src/app/components/resources/grid-list/grid-item.scss
@@ -1,3 +1,5 @@
+@use '../../variables' as *;
+
 grid-item {
   .qr-code-icon {
     position: absolute;
diff --git a/desktop/src/app/components/resources/grid-list/grid-list.scss b/desktop/src/app/components/resources/grid-list/grid-list.scss
index 063ea80090..8086c6a528 100644
--- a/desktop/src/app/components/resources/grid-list/grid-list.scss
+++ b/desktop/src/app/components/resources/grid-list/grid-list.scss
@@ -1,3 +1,5 @@
+@use '../../variables' as *;
+
 /**
  * @author Thomas Kleinke
  */
diff --git a/desktop/src/app/components/resources/list/row.scss b/desktop/src/app/components/resources/list/row.scss
index acc4afa498..c612393225 100644
--- a/desktop/src/app/components/resources/list/row.scss
+++ b/desktop/src/app/components/resources/list/row.scss
@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use '../../variables' as *;
 
 .row-wrapper {
   display: grid;
diff --git a/desktop/src/app/components/resources/map/list/sidebar-list.scss b/desktop/src/app/components/resources/map/list/sidebar-list.scss
index cb78593f14..daac98e488 100644
--- a/desktop/src/app/components/resources/map/list/sidebar-list.scss
+++ b/desktop/src/app/components/resources/map/list/sidebar-list.scss
@@ -1,4 +1,4 @@
-$teaser-width: $resources-listing-item-slim-width;
+@use '../../../variables' as *;
 
 sidebar-list {
   #sidebar-viewport {
diff --git a/desktop/src/app/components/resources/map/map/layers/layer-menu.scss b/desktop/src/app/components/resources/map/map/layers/layer-menu.scss
index ee5e433162..674faccd97 100644
--- a/desktop/src/app/components/resources/map/map/layers/layer-menu.scss
+++ b/desktop/src/app/components/resources/map/map/layers/layer-menu.scss
@@ -2,6 +2,7 @@
  * @author: Thomas Kleinke
  */
 @use 'sass:color';
+@use '../../../../variables' as *;
 
 $layer-menu-button-color: #657faa;
 $layer-menu-button-inactive-color: grey;
diff --git a/desktop/src/app/components/resources/map/map/map.scss b/desktop/src/app/components/resources/map/map/map.scss
index 155f1902f8..0e44ef20a7 100644
--- a/desktop/src/app/components/resources/map/map/map.scss
+++ b/desktop/src/app/components/resources/map/map/map.scss
@@ -2,7 +2,8 @@
  * @author: Thomas Kleinke
  */
 
-@import './layers/layer-menu';
+@use './layers/layer-menu';
+@use '../../../variables' as *;
 
 #map-container {
   z-index: 1008;
diff --git a/desktop/src/app/components/resources/map/resources-map.scss b/desktop/src/app/components/resources/map/resources-map.scss
index 8c02a38aae..62c3b5cd8f 100644
--- a/desktop/src/app/components/resources/map/resources-map.scss
+++ b/desktop/src/app/components/resources/map/resources-map.scss
@@ -1,4 +1,4 @@
-@import 'list/sidebar-list';
+@use 'list/sidebar-list';
 
 #sidebar-list-container {
   padding: 0 !important;
diff --git a/desktop/src/app/components/resources/navigation/navigation.scss b/desktop/src/app/components/resources/navigation/navigation.scss
index 421e139c6a..323b3ccd4b 100644
--- a/desktop/src/app/components/resources/navigation/navigation.scss
+++ b/desktop/src/app/components/resources/navigation/navigation.scss
@@ -2,6 +2,8 @@
  * @author Thomas Kleinke
  */
 @use 'sass:color';
+@use 'bootstrap';
+@use '../../variables' as *;
 
 $active-navigation-button-background-color: #d5dfef;
 
diff --git a/desktop/src/app/components/resources/resources.scss b/desktop/src/app/components/resources/resources.scss
index e74fe0a4c9..a31b0495d7 100644
--- a/desktop/src/app/components/resources/resources.scss
+++ b/desktop/src/app/components/resources/resources.scss
@@ -3,26 +3,29 @@
  * @author Sebastian Cuy
  * @author Thomas Kleinke
  */
-@import 'plus-button';
-@import 'navigation/navigation';
-@import 'map/map/map';
-@import 'map/resources-map';
-@import 'list/list';
-@import 'list/row';
-@import 'actions/delete/delete-modal';
-@import 'actions/edit-qr-code/qr-code-editor-modal';
-@import 'actions/edit-qr-code/delete-qr-code-modal';
-@import 'actions/edit-qr-code/print-settings/print-settings-modal';
-@import 'actions/scan-storage-place/scan-storage-place-modal';
-@import 'grid-list/grid-list';
-@import 'grid-list/grid';
-@import 'grid-list/grid-item';
-@import 'grid-list/grid-item-icon';
-@import 'searchbar/resources-search-bar';
-@import 'searchbar/search-suggestions';
-@import 'widgets/list-button-group';
-@import 'widgets/popover-menu';
-
+@use 'bootstrap' as *;
+@use '../../../../node_modules/@mdi/font/css/materialdesignicons';
+@use '../variables' as *;
+
+@use 'plus-button';
+@use 'navigation/navigation';
+@use 'map/map/map';
+@use 'map/resources-map';
+@use 'list/list';
+@use 'list/row';
+@use 'actions/delete/delete-modal';
+@use 'actions/edit-qr-code/qr-code-editor-modal';
+@use 'actions/edit-qr-code/delete-qr-code-modal';
+@use 'actions/edit-qr-code/print-settings/print-settings-modal';
+@use 'actions/scan-storage-place/scan-storage-place-modal';
+@use 'grid-list/grid-list';
+@use 'grid-list/grid';
+@use 'grid-list/grid-item';
+@use 'grid-list/grid-item-icon';
+@use 'searchbar/resources-search-bar';
+@use 'searchbar/search-suggestions';
+@use 'widgets/list-button-group';
+@use 'widgets/popover-menu';
 
 $deactivated-button-color: lightgray;
 
diff --git a/desktop/src/app/components/resources/searchbar/search-suggestions.scss b/desktop/src/app/components/resources/searchbar/search-suggestions.scss
index 39ddca4b3f..214d05e168 100644
--- a/desktop/src/app/components/resources/searchbar/search-suggestions.scss
+++ b/desktop/src/app/components/resources/searchbar/search-suggestions.scss
@@ -1,3 +1,5 @@
+@use '../../variables' as *;
+
 /**
  * @author Thomas Kleinke
  */
diff --git a/desktop/src/app/components/resources/widgets/list-button-group.scss b/desktop/src/app/components/resources/widgets/list-button-group.scss
index 9900a4b017..7556acd24a 100644
--- a/desktop/src/app/components/resources/widgets/list-button-group.scss
+++ b/desktop/src/app/components/resources/widgets/list-button-group.scss
@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use '../../variables' as *;
 
 $activated-color: #868e96;
 $button-width: 24px;
diff --git a/desktop/src/app/components/resources/widgets/popover-menu.scss b/desktop/src/app/components/resources/widgets/popover-menu.scss
index 72ef1a30ff..f744510b9a 100644
--- a/desktop/src/app/components/resources/widgets/popover-menu.scss
+++ b/desktop/src/app/components/resources/widgets/popover-menu.scss
@@ -1,11 +1,12 @@
 @use 'sass:color';
+@use '../../variables' as *;
 
 #popover-menu {
   background-color: $popover-bg-color;
   position: absolute;
   left: $resources-listing-item-wide-width;
   height: 100%;
-  width: $teaser-width;
+  width: $resources-listing-item-slim-width;
   z-index: 1009;
   overflow: hidden;
 
diff --git a/desktop/src/app/components/settings/settings.scss b/desktop/src/app/components/settings/settings.scss
index 4f44a59c34..46214981da 100644
--- a/desktop/src/app/components/settings/settings.scss
+++ b/desktop/src/app/components/settings/settings.scss
@@ -3,8 +3,8 @@
  * @author: Thomas Kleinke
  */
 
-@import 'language-settings';
-@import 'update-username-modal';
+@use 'language-settings';
+@use 'update-username-modal';
 
 .settings {
   #save-settings-button:active,
diff --git a/desktop/src/app/components/slider.scss b/desktop/src/app/components/slider.scss
index 88acdee9a6..780e977ed5 100644
--- a/desktop/src/app/components/slider.scss
+++ b/desktop/src/app/components/slider.scss
@@ -1,3 +1,5 @@
+@use './variables' as *; 
+
 .switch {
   position: relative;
   display: inline-block;
diff --git a/desktop/src/app/components/spinner.scss b/desktop/src/app/components/spinner.scss
index 74ec726d20..700784936e 100644
--- a/desktop/src/app/components/spinner.scss
+++ b/desktop/src/app/components/spinner.scss
@@ -1,3 +1,5 @@
+@use './variables' as *; 
+
 .spinner {
   width: 40px;
   height: 40px;
diff --git a/desktop/src/app/components/viewmodal/image/view-modal-drop-area.scss b/desktop/src/app/components/viewmodal/image/view-modal-drop-area.scss
index 8b3dc49824..3f645e126c 100644
--- a/desktop/src/app/components/viewmodal/image/view-modal-drop-area.scss
+++ b/desktop/src/app/components/viewmodal/image/view-modal-drop-area.scss
@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use '../../variables' as *;
 
 .view-modal-drop-area-popover {
   .popover-body {
diff --git a/desktop/src/app/components/viewmodal/view-modal.scss b/desktop/src/app/components/viewmodal/view-modal.scss
index de8badba17..e8802fc567 100644
--- a/desktop/src/app/components/viewmodal/view-modal.scss
+++ b/desktop/src/app/components/viewmodal/view-modal.scss
@@ -1,7 +1,8 @@
-@import 'image/image-view-modal';
-@import 'image/image-view-edit';
-@import 'image/view-modal-drop-area';
-@import 'resource/resource-view-modal';
+@use 'image/image-view-modal';
+@use 'image/image-view-edit';
+@use 'image/view-modal-drop-area';
+@use 'resource/resource-view-modal';
+@use '../variables' as *;
 
 ngb-modal-window {
   overflow-y: hidden !important;
diff --git a/desktop/src/app/components/widgets/category-picker.scss b/desktop/src/app/components/widgets/category-picker.scss
index f6372a66cf..6384e06c87 100644
--- a/desktop/src/app/components/widgets/category-picker.scss
+++ b/desktop/src/app/components/widgets/category-picker.scss
@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use '../variables' as *;
 
 category-picker {
   .category-picker {
diff --git a/desktop/src/app/components/widgets/document-info/document-info.scss b/desktop/src/app/components/widgets/document-info/document-info.scss
index e328438d74..e0a9d280b3 100644
--- a/desktop/src/app/components/widgets/document-info/document-info.scss
+++ b/desktop/src/app/components/widgets/document-info/document-info.scss
@@ -1,10 +1,11 @@
 @use 'sass:color';
 
-@import 'depicts-relations-view';
-@import 'georeference-view';
-@import 'thumbnail';
-@import 'fields-view/fields-view';
-@import 'fields-view/field-view';
+@use 'depicts-relations-view';
+@use 'georeference-view';
+@use 'thumbnail';
+@use 'fields-view/fields-view';
+@use 'fields-view/field-view';
+@use '../../variables' as *;
 
 /**
  * @author Thomas Kleinke
diff --git a/desktop/src/app/components/widgets/document-info/fields-view/field-view.scss b/desktop/src/app/components/widgets/document-info/fields-view/field-view.scss
index 1167b39801..072b09ec17 100644
--- a/desktop/src/app/components/widgets/document-info/fields-view/field-view.scss
+++ b/desktop/src/app/components/widgets/document-info/fields-view/field-view.scss
@@ -1,3 +1,5 @@
+@use '../../../variables' as *;
+
 field-view {
   .field {
     margin-bottom: 10px;
diff --git a/desktop/src/app/components/widgets/document-info/fields-view/fields-view.scss b/desktop/src/app/components/widgets/document-info/fields-view/fields-view.scss
index 94f36a3fb3..7d5a3a0aa3 100644
--- a/desktop/src/app/components/widgets/document-info/fields-view/fields-view.scss
+++ b/desktop/src/app/components/widgets/document-info/fields-view/fields-view.scss
@@ -1,3 +1,5 @@
+@use '../../../variables' as *;
+
 /**
  * @author: Thomas Kleinke
  * @author: Sebastian Cuy
diff --git a/desktop/src/app/components/widgets/document-info/georeference-view.scss b/desktop/src/app/components/widgets/document-info/georeference-view.scss
index af2a23b39d..3e46683650 100644
--- a/desktop/src/app/components/widgets/document-info/georeference-view.scss
+++ b/desktop/src/app/components/widgets/document-info/georeference-view.scss
@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use '../../variables' as *;
 
 $add-georeference-color: #5572a1;
 $delete-georeference-color: #d9534f;
diff --git a/desktop/src/app/components/widgets/document-info/thumbnail.scss b/desktop/src/app/components/widgets/document-info/thumbnail.scss
index a5df5f45a7..41987ae200 100644
--- a/desktop/src/app/components/widgets/document-info/thumbnail.scss
+++ b/desktop/src/app/components/widgets/document-info/thumbnail.scss
@@ -1,3 +1,5 @@
+@use '../../variables' as *;
+
 /**
  * @author Thomas Kleinke
  * @author Sebastian Cuy
diff --git a/desktop/src/app/components/widgets/document-picker.scss b/desktop/src/app/components/widgets/document-picker.scss
index 8903adfcb7..f22d6edaf6 100644
--- a/desktop/src/app/components/widgets/document-picker.scss
+++ b/desktop/src/app/components/widgets/document-picker.scss
@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 #document-picker {
   &.has-search-results {
     border-bottom: 1px solid rgba(0, 0, 0, 0.125);
diff --git a/desktop/src/app/components/widgets/document-teaser.scss b/desktop/src/app/components/widgets/document-teaser.scss
index fec7c11548..cf9a1eb2c9 100644
--- a/desktop/src/app/components/widgets/document-teaser.scss
+++ b/desktop/src/app/components/widgets/document-teaser.scss
@@ -1,3 +1,6 @@
+@use 'bootstrap' as *;
+@use '../variables' as *;
+
 .document-teaser {
   @extend .d-flex;
   @extend .align-items-center;
diff --git a/desktop/src/app/components/widgets/languages/language-picker-modal.scss b/desktop/src/app/components/widgets/languages/language-picker-modal.scss
index 462e51d620..e402f8dfba 100644
--- a/desktop/src/app/components/widgets/languages/language-picker-modal.scss
+++ b/desktop/src/app/components/widgets/languages/language-picker-modal.scss
@@ -1,3 +1,5 @@
+@use '../../variables' as *;
+
 /**
  * @author Thomas Kleinke
  */
diff --git a/desktop/src/app/components/widgets/search-constraints.scss b/desktop/src/app/components/widgets/search-constraints.scss
index 979821ced9..040f0a0ae9 100644
--- a/desktop/src/app/components/widgets/search-constraints.scss
+++ b/desktop/src/app/components/widgets/search-constraints.scss
@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 /**
  * @author Thomas Kleinke
  */
diff --git a/desktop/src/app/components/widgets/searchable-select.scss b/desktop/src/app/components/widgets/searchable-select.scss
index 24a4bfbb1c..90f5b1d485 100644
--- a/desktop/src/app/components/widgets/searchable-select.scss
+++ b/desktop/src/app/components/widgets/searchable-select.scss
@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 /**
  * @author Thomas Kleinke
  */
diff --git a/desktop/src/app/components/widgets/widgets.scss b/desktop/src/app/components/widgets/widgets.scss
index e6c0342d32..dcd3a3dd22 100644
--- a/desktop/src/app/components/widgets/widgets.scss
+++ b/desktop/src/app/components/widgets/widgets.scss
@@ -1,18 +1,18 @@
-@import 'document-picker';
-@import 'document-teaser';
-@import 'loading-icon';
-@import 'search-bar';
-@import 'category-picker';
-@import 'zoom-buttons';
-@import 'process-modal';
-@import 'search-constraints';
-@import 'category-icon';
-@import 'paging-buttons';
-@import 'context-menu';
-@import 'edit-save-dialog';
-@import 'searchable-select';
-@import 'qr-code-scanner-modal';
-@import 'languages/language-picker-modal';
-@import 'languages/languages-list';
-@import 'document-info/document-info';
-@import 'move-modal/move-modal';
+@use 'document-picker';
+@use 'document-teaser';
+@use 'loading-icon';
+@use 'search-bar';
+@use 'category-picker';
+@use 'zoom-buttons';
+@use 'process-modal';
+@use 'search-constraints';
+@use 'category-icon';
+@use 'paging-buttons';
+@use 'context-menu';
+@use 'edit-save-dialog';
+@use 'searchable-select';
+@use 'qr-code-scanner-modal';
+@use 'languages/language-picker-modal';
+@use 'languages/languages-list';
+@use 'document-info/document-info';
+@use 'move-modal/move-modal';