diff --git a/src/components/ComposerSessionIndicator.vue b/src/components/ComposerSessionIndicator.vue
index 5a74344019..070a2205f2 100644
--- a/src/components/ComposerSessionIndicator.vue
+++ b/src/components/ComposerSessionIndicator.vue
@@ -97,7 +97,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '../../css/variables.scss';
+@use '../styles/variables.scss';
 
 .composer-session {
 	position: fixed;
diff --git a/src/components/Message.vue b/src/components/Message.vue
index b3479b199d..6adf598dd8 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -198,7 +198,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '../../css/variables.scss';
+@use '../styles/variables.scss';
 
 .v-popover > .trigger > .action-item {
 	border-radius: 22px;
diff --git a/src/components/MessageAttachment.vue b/src/components/MessageAttachment.vue
index e0679e0337..ebde6f1920 100644
--- a/src/components/MessageAttachment.vue
+++ b/src/components/MessageAttachment.vue
@@ -278,7 +278,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '../../css/variables.scss';
+@use '../styles/variables.scss';
 
 @media screen and (max-width: #{variables.$breakpoint-mobile}) {
 	.attachment{
diff --git a/src/components/MessageAttachments.vue b/src/components/MessageAttachments.vue
index f77e3669b9..715069794b 100644
--- a/src/components/MessageAttachments.vue
+++ b/src/components/MessageAttachments.vue
@@ -200,7 +200,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '../../css/variables.scss';
+@use '../styles/variables.scss';
 
 .attachments {
 	width: 100%;
diff --git a/src/components/MessageLoadingSkeleton.vue b/src/components/MessageLoadingSkeleton.vue
index 26a5e762f5..6132dabe84 100644
--- a/src/components/MessageLoadingSkeleton.vue
+++ b/src/components/MessageLoadingSkeleton.vue
@@ -35,7 +35,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '../../css/variables.scss';
+@use '../styles/variables.scss';
 
 /* skeleton */
 .message-loading-skeleton {
diff --git a/src/components/NewMessageModal.vue b/src/components/NewMessageModal.vue
index 225e74ff57..a66833908f 100644
--- a/src/components/NewMessageModal.vue
+++ b/src/components/NewMessageModal.vue
@@ -648,7 +648,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '../../css/variables.scss';
+@use '../styles/variables.scss';
 
 @media only screen and (max-width: 600px) {
 	:deep(.modal-container) {
diff --git a/src/components/NoMessageSelected.vue b/src/components/NoMessageSelected.vue
index 3ae4aa2ceb..be55c135c5 100644
--- a/src/components/NoMessageSelected.vue
+++ b/src/components/NoMessageSelected.vue
@@ -60,7 +60,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '../../css/fluid.scss';
+@use '../styles/fluid.scss';
 
 .no-message-selected {
 	display: flex;
diff --git a/src/components/PhishingWarning.vue b/src/components/PhishingWarning.vue
index 85c14dcab5..767c1ece3c 100644
--- a/src/components/PhishingWarning.vue
+++ b/src/components/PhishingWarning.vue
@@ -68,7 +68,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '../../css/variables.scss';
+@use '../styles/variables.scss';
 
 .phishing-warning {
 	background-color: rgba(var(--color-warning-rgb), 0.2);
diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index 2a9cc83eb8..5b5bf5e001 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -531,7 +531,7 @@ export default {
 </script>
 
 <style lang="scss">
-@use '../../css/variables.scss';
+@use '../styles/variables.scss';
 
 #mail-message {
 	width: 100%;
diff --git a/src/html-response.js b/src/html-response.js
index 8a89f907fa..aae7f0e411 100644
--- a/src/html-response.js
+++ b/src/html-response.js
@@ -4,7 +4,7 @@
  */
 
 // Extracted styles
-import '../css/html-response.scss'
+import './styles/html-response.scss'
 import '@iframe-resizer/child'
 
 // Fix width of some newsletter mails
diff --git a/css/fluid.scss b/src/styles/fluid.scss
similarity index 100%
rename from css/fluid.scss
rename to src/styles/fluid.scss
diff --git a/css/html-response.scss b/src/styles/html-response.scss
similarity index 100%
rename from css/html-response.scss
rename to src/styles/html-response.scss
diff --git a/css/mail.scss b/src/styles/mail.scss
similarity index 100%
rename from css/mail.scss
rename to src/styles/mail.scss
diff --git a/css/variables.scss b/src/styles/variables.scss
similarity index 100%
rename from css/variables.scss
rename to src/styles/variables.scss
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 907fe3b880..b0bd3ee0dd 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -29,7 +29,7 @@ import logger from '../logger.js'
 import { testAccountConnection } from '../service/AccountService.js'
 import useMainStore from '../store/mainStore.js'
 
-import '../../css/mail.scss'
+import '../styles/mail.scss'
 
 export default {
 	name: 'Home',
diff --git a/src/views/Setup.vue b/src/views/Setup.vue
index 138ce81f6d..f53c7e521f 100644
--- a/src/views/Setup.vue
+++ b/src/views/Setup.vue
@@ -93,7 +93,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '../../css/fluid.scss';
+@use '../styles/fluid.scss';
 
 .setup {
 	/* make sure the background image covers everything */