diff --git a/src/App.vue b/src/App.vue
index d2690c26..6c0f399f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -117,3 +117,7 @@ export default defineComponent({
 	},
 })
 </script>
+
+<style lang="scss">
+@import '@/styles/global.scss';
+</style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index dba5ebb8..3e68dd1c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -23,8 +23,6 @@ import {formatDate, formatDateShort, formatDateLong, formatDateSince} from '@/he
 // @ts-ignore
 import {VERSION} from './version.json'
 
-// Add CSS
-import './styles/vikunja.scss'
 // Notifications
 import Notifications from '@kyvg/vue3-notification'
 
diff --git a/src/styles/utilities/animations.scss b/src/styles/animations.scss
similarity index 100%
rename from src/styles/utilities/animations.scss
rename to src/styles/animations.scss
diff --git a/src/styles/components/_all.scss b/src/styles/components/_all.scss
deleted file mode 100644
index 2b4c19f4..00000000
--- a/src/styles/components/_all.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@import 'base/all';
-
-@import 'attachments';
-@import 'gantt';
-@import 'labels';
-@import 'list';
-@import 'reminders';
-@import 'switch-view';
-@import 'task';
-@import 'taskRelations';
-@import 'tasks';
-@import 'teams';
-@import 'migrator';
-@import 'comments';
-@import 'table-view';
-@import 'kanban';
-@import 'list-backgrounds';
-@import 'color-picker';
-@import 'namespaces';
-@import 'legal';
-@import 'keyboard-shortcuts';
-@import 'api-config';
-@import 'datepicker';
-@import 'notifications';
-@import 'quick-actions';
diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss
new file mode 100644
index 00000000..b8aa1e71
--- /dev/null
+++ b/src/styles/components/_index.scss
@@ -0,0 +1,26 @@
+@import "base";
+
+@import "attachments";
+@import "gantt";
+@import "tooltip";
+@import "labels";
+@import "list";
+@import "reminders";
+@import "switch-view";
+@import "task";
+@import "taskRelations";
+@import "tasks";
+@import "teams";
+@import "migrator";
+@import "comments";
+@import "table-view";
+@import "kanban";
+@import "list-backgrounds";
+@import "color-picker";
+@import "namespaces";
+@import "legal";
+@import "keyboard-shortcuts";
+@import "api-config";
+@import "datepicker";
+@import "notifications";
+@import "quick-actions";
\ No newline at end of file
diff --git a/src/styles/components/base/_all.scss b/src/styles/components/base/_index.scss
similarity index 60%
rename from src/styles/components/base/_all.scss
rename to src/styles/components/base/_index.scss
index 6f087b6e..477b27eb 100644
--- a/src/styles/components/base/_all.scss
+++ b/src/styles/components/base/_index.scss
@@ -1,5 +1,4 @@
 @import 'card';
 @import 'fancycheckbox';
 @import 'multiselect';
-@import 'scrollbars';
-@import 'tooltip';
+@import 'scrollbars';
\ No newline at end of file
diff --git a/src/styles/components/base/tooltip.scss b/src/styles/components/tooltip.scss
similarity index 100%
rename from src/styles/components/base/tooltip.scss
rename to src/styles/components/tooltip.scss
diff --git a/src/styles/theme/fonts.scss b/src/styles/fonts.scss
similarity index 100%
rename from src/styles/theme/fonts.scss
rename to src/styles/fonts.scss
diff --git a/src/styles/global.scss b/src/styles/global.scss
new file mode 100644
index 00000000..166c1fd6
--- /dev/null
+++ b/src/styles/global.scss
@@ -0,0 +1,18 @@
+@import "fonts";
+
+@import "transitions";
+@import "animations";
+
+// This imports are the same as in "bulma/bulma.sass"
+// with the expeption of the bulma utilities.
+// They are imported globally in variables.scss
+@import "bulma/sass/base/_all";
+@import "bulma/sass/elements/_all";
+@import "bulma/sass/form/_all";
+@import "bulma/sass/components/_all";
+@import "bulma/sass/grid/_all";
+@import "bulma/sass/helpers/_all";
+@import "bulma/sass/layout/_all";
+
+@import "theme";
+@import "components";
diff --git a/src/styles/theme/_all.scss b/src/styles/theme/_all.scss
deleted file mode 100644
index 1afff997..00000000
--- a/src/styles/theme/_all.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import 'theme';
-
-@import 'content';
-@import 'form';
-@import 'link-share';
-@import 'loading';
-@import 'navigation';
-@import 'notification';
-@import 'offline';
-@import 'update-notification';
-@import 'background';
diff --git a/src/styles/theme/_index.scss b/src/styles/theme/_index.scss
new file mode 100644
index 00000000..9f8d234e
--- /dev/null
+++ b/src/styles/theme/_index.scss
@@ -0,0 +1,11 @@
+@import "theme";
+
+@import "content";
+@import "form";
+@import "link-share";
+@import "loading";
+@import "navigation";
+@import "notification";
+@import "offline";
+@import "update-notification";
+@import "background";
\ No newline at end of file
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index 2004f44f..b92f1214 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -1,18 +1,3 @@
-// bulma utilities are imported in variables.scss
-@import "bulma/sass/utilities/_all";
-@import "bulma/sass/base/_all";
-@import "bulma/sass/elements/_all";
-@import "bulma/sass/form/_all";
-@import "bulma/sass/components/_all";
-@import "bulma/sass/grid/_all";
-@import "bulma/sass/helpers/_all";
-@import "bulma/sass/layout/_all";
-
-
-@import "fonts";
-
-@import "variables-derived";
-
 *,
 *:hover,
 *:active,
diff --git a/src/styles/theme/variables-derived.scss b/src/styles/theme/variables-derived.scss
deleted file mode 100644
index ee5c640f..00000000
--- a/src/styles/theme/variables-derived.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-// Variables that are derived from bulma variables need to be included after them
-$mobile: math.div($tablet, 2);
diff --git a/src/styles/utilities/transitions.scss b/src/styles/transitions.scss
similarity index 100%
rename from src/styles/utilities/transitions.scss
rename to src/styles/transitions.scss
diff --git a/src/styles/utilities/_all.scss b/src/styles/utilities/_all.scss
deleted file mode 100644
index 2d0c76de..00000000
--- a/src/styles/utilities/_all.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import 'animations';
-@import 'transitions';
diff --git a/src/styles/variables/_index.scss b/src/styles/variables/_index.scss
index ba1a8247..bef2ad0c 100644
--- a/src/styles/variables/_index.scss
+++ b/src/styles/variables/_index.scss
@@ -3,4 +3,10 @@
 @import "variables";
 
 // the default values get overwritten by the definitions above
-@import "bulma/sass/utilities/_all";
\ No newline at end of file
+@import "bulma/sass/utilities/_all";
+
+// this is needed so that the shared form variables are globally defined aswell 
+@import "bulma/sass/form/shared";
+
+// since $tablet is defined by bulma we can just define it after importing the utilities
+$mobile: math.div($tablet, 2);
\ No newline at end of file
diff --git a/src/styles/variables/variables.scss b/src/styles/variables/variables.scss
index 33f34407..678a2fa6 100644
--- a/src/styles/variables/variables.scss
+++ b/src/styles/variables/variables.scss
@@ -1,5 +1,3 @@
-@import 'colors';
-
 $white: #fff;
 $black: hsl(0, 0%, 4%) !default;
 $orange: #ff851b;
diff --git a/src/styles/vikunja.scss b/src/styles/vikunja.scss
deleted file mode 100644
index 44898538..00000000
--- a/src/styles/vikunja.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'theme/all';
-@import 'utilities/all';
-@import 'components/all';