diff --git a/frontend/src/app/components/application-banner/application-banner.component.scss b/frontend/src/app/components/application-banner/application-banner.component.scss
index a41af17526..d3d7f0f18a 100644
--- a/frontend/src/app/components/application-banner/application-banner.component.scss
+++ b/frontend/src/app/components/application-banner/application-banner.component.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use 'variables';
 
 .header-content {
   padding-left: 1.5rem;
diff --git a/frontend/src/app/components/application-top-bar/application-top-bar.component.scss b/frontend/src/app/components/application-top-bar/application-top-bar.component.scss
index 5b7fe60e8d..109d9045cb 100644
--- a/frontend/src/app/components/application-top-bar/application-top-bar.component.scss
+++ b/frontend/src/app/components/application-top-bar/application-top-bar.component.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use 'variables';
 
 #top-bar-height {
   height: variables.$top-bar-height;
diff --git a/frontend/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.scss b/frontend/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.scss
index a16cc9bc91..27edef7157 100644
--- a/frontend/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.scss
+++ b/frontend/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use 'variables';
 
 .submit {
   background-color: variables.$pz-dark-blue;
diff --git a/frontend/src/app/components/key-result-detail/key-result-detail.component.scss b/frontend/src/app/components/key-result-detail/key-result-detail.component.scss
index adfe8471fe..703dd55a24 100644
--- a/frontend/src/app/components/key-result-detail/key-result-detail.component.scss
+++ b/frontend/src/app/components/key-result-detail/key-result-detail.component.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use 'variables';
 
 :host {
   flex: 1;
diff --git a/frontend/src/app/components/key-result-type/key-result-type.component.scss b/frontend/src/app/components/key-result-type/key-result-type.component.scss
index b00b7381aa..a0d92454bd 100644
--- a/frontend/src/app/components/key-result-type/key-result-type.component.scss
+++ b/frontend/src/app/components/key-result-type/key-result-type.component.scss
@@ -1,4 +1,4 @@
-@use "custom_bootstrap";
+@use 'custom_bootstrap';
 
 .active {
   border-left: #909090 1px solid;
diff --git a/frontend/src/app/components/key-result/key-result.component.scss b/frontend/src/app/components/key-result/key-result.component.scss
index 4431ff6b44..52dc03ab4b 100644
--- a/frontend/src/app/components/key-result/key-result.component.scss
+++ b/frontend/src/app/components/key-result/key-result.component.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use 'variables';
 .key-result {
   background-color: variables.$soft-grey;
   border: 1px solid variables.$dark-grey-border;
diff --git a/frontend/src/app/components/objective/objective.component.scss b/frontend/src/app/components/objective/objective.component.scss
index efbb97c5cb..c5687f42a1 100644
--- a/frontend/src/app/components/objective/objective.component.scss
+++ b/frontend/src/app/components/objective/objective.component.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use 'variables';
 
 .objective {
   max-width: 750px;
diff --git a/frontend/src/app/shared/custom/dialog-template-core/dialog-template-core.component.scss b/frontend/src/app/shared/custom/dialog-template-core/dialog-template-core.component.scss
index 8ffdf959f4..0aa09a2749 100644
--- a/frontend/src/app/shared/custom/dialog-template-core/dialog-template-core.component.scss
+++ b/frontend/src/app/shared/custom/dialog-template-core/dialog-template-core.component.scss
@@ -1,5 +1,5 @@
-@use "variables";
-@use "bootstrap";
+@use 'variables';
+@use 'bootstrap';
 
 mat-dialog-content {
   //scrollbar-gutter: stable both-edges;
diff --git a/frontend/src/app/shared/side-panel/side-panel.component.scss b/frontend/src/app/shared/side-panel/side-panel.component.scss
index a0722009f3..8cbb873a52 100644
--- a/frontend/src/app/shared/side-panel/side-panel.component.scss
+++ b/frontend/src/app/shared/side-panel/side-panel.component.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use 'variables';
 .sidebar__content {
   padding: 32px;
 }
diff --git a/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.scss b/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.scss
index cb7092d90e..e259363614 100644
--- a/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.scss
+++ b/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use 'variables';
 
 mat-select {
   outline: 1px solid #a4a4af;
diff --git a/frontend/src/app/team-management/edit-okr-champion/edit-okr-champion.component.scss b/frontend/src/app/team-management/edit-okr-champion/edit-okr-champion.component.scss
index 0483bfb3fc..f144a86112 100644
--- a/frontend/src/app/team-management/edit-okr-champion/edit-okr-champion.component.scss
+++ b/frontend/src/app/team-management/edit-okr-champion/edit-okr-champion.component.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use 'variables';
 
 :host {
   height: 40px;
diff --git a/frontend/src/app/team-management/member-list/member-list-mobile/member-list-mobile.component.scss b/frontend/src/app/team-management/member-list/member-list-mobile/member-list-mobile.component.scss
index 0b7035d88d..36c6187dbd 100644
--- a/frontend/src/app/team-management/member-list/member-list-mobile/member-list-mobile.component.scss
+++ b/frontend/src/app/team-management/member-list/member-list-mobile/member-list-mobile.component.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use 'variables';
 
 :host {
   padding-top: 2rem;
diff --git a/frontend/src/app/team-management/member-list/member-list-table/member-list-table.component.scss b/frontend/src/app/team-management/member-list/member-list-table/member-list-table.component.scss
index 05f4e50cae..e9e7ba5cac 100644
--- a/frontend/src/app/team-management/member-list/member-list-table/member-list-table.component.scss
+++ b/frontend/src/app/team-management/member-list/member-list-table/member-list-table.component.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use 'variables';
 
 .mat-column-icon {
   width: 40px;
diff --git a/frontend/src/app/team-management/member-list/member-list.component.scss b/frontend/src/app/team-management/member-list/member-list.component.scss
index 6fcb3c72dc..50adf0d362 100644
--- a/frontend/src/app/team-management/member-list/member-list.component.scss
+++ b/frontend/src/app/team-management/member-list/member-list.component.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use 'variables';
 
 :host {
   width: 100%;
diff --git a/frontend/src/app/team-management/team-list/team-list.component.scss b/frontend/src/app/team-management/team-list/team-list.component.scss
index 9ce8e5c9b3..87a6ff431b 100644
--- a/frontend/src/app/team-management/team-list/team-list.component.scss
+++ b/frontend/src/app/team-management/team-list/team-list.component.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use 'variables';
 
 :host {
   width: 100%;
diff --git a/frontend/src/app/team-management/team-management-banner/team-management-banner.component.scss b/frontend/src/app/team-management/team-management-banner/team-management-banner.component.scss
index 02bfd65c99..e532a409e4 100644
--- a/frontend/src/app/team-management/team-management-banner/team-management-banner.component.scss
+++ b/frontend/src/app/team-management/team-management-banner/team-management-banner.component.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use 'variables';
 
 #okr-banner {
   position: relative;
diff --git a/frontend/src/style/_custom_angular.components.scss b/frontend/src/style/_custom_angular.components.scss
index 8509145b81..24cc4a5078 100644
--- a/frontend/src/style/_custom_angular.components.scss
+++ b/frontend/src/style/_custom_angular.components.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use 'variables';
 
 .mdc-button {
   border-radius: 0.5rem !important;
diff --git a/frontend/src/style/_custom_angular.scss b/frontend/src/style/_custom_angular.scss
index 11814376b7..bf85b00f2d 100644
--- a/frontend/src/style/_custom_angular.scss
+++ b/frontend/src/style/_custom_angular.scss
@@ -1,6 +1,6 @@
-@use "@angular/material" as mat;
-@use "variables";
-@use "custom_angular.components";
+@use '@angular/material' as mat;
+@use 'variables';
+@use 'custom_angular.components';
 
 $my-primary: mat.m2-define-palette(variables.$pz-dark-blue-palette, 500);
 $my-accent: mat.m2-define-palette(mat.$m2-grey-palette, 900);
diff --git a/frontend/src/style/_custom_bootstrap.scss b/frontend/src/style/_custom_bootstrap.scss
index 29652efb9f..a838c7427d 100644
--- a/frontend/src/style/_custom_bootstrap.scss
+++ b/frontend/src/style/_custom_bootstrap.scss
@@ -1,11 +1,11 @@
-@use "variables";
-@use "bootstrap" with (
+@use 'variables';
+@use 'bootstrap' with (
   $theme-colors: (
-    "pz-dark-blue": variables.$pz-dark-blue,
-    "eggshell": variables.$eggshell,
-    "display-element": variables.$display-element,
-    "keyResult-attribute": variables.$keyResult-attribute-bg,
-    "error": variables.$error,
+    'pz-dark-blue': variables.$pz-dark-blue,
+    'eggshell': variables.$eggshell,
+    'display-element': variables.$display-element,
+    'keyResult-attribute': variables.$keyResult-attribute-bg,
+    'error': variables.$error,
   )
 );
 $enable-negative-margins: true;
diff --git a/frontend/src/style/_variables.scss b/frontend/src/style/_variables.scss
index 0db0f3ef87..4537a767bb 100644
--- a/frontend/src/style/_variables.scss
+++ b/frontend/src/style/_variables.scss
@@ -1,4 +1,4 @@
-@use "sass:color";
+@use 'sass:color';
 //Get color palette for color https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
 
 $pz-dark-blue: #1e5a96;
diff --git a/frontend/src/style/styles.scss b/frontend/src/style/styles.scss
index cc12dda8d4..0dd8191075 100644
--- a/frontend/src/style/styles.scss
+++ b/frontend/src/style/styles.scss
@@ -1,9 +1,9 @@
-@use "custom_angular";
-@use "variables";
-@use "fonts/Roboto";
-@use "fonts/MaterialIcons";
-@use "custom_bootstrap";
-@use "bootstrap";
+@use 'custom_angular';
+@use 'variables';
+@use 'fonts/Roboto';
+@use 'fonts/MaterialIcons';
+@use 'custom_bootstrap';
+@use 'bootstrap';
 
 html,
 body.okr {