diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index b45d041a..c494485d 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -9,7 +9,7 @@ require("@rails/activestorage").start()
 require("channels")
 
 require("./bootstrap_custom")
-require("../stylesheets/application")
+require("../stylesheets/main")
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
diff --git a/app/javascript/stylesheets/forms.scss b/app/javascript/stylesheets/general/_form.scss
similarity index 100%
rename from app/javascript/stylesheets/forms.scss
rename to app/javascript/stylesheets/general/_form.scss
diff --git a/app/javascript/stylesheets/icons.scss b/app/javascript/stylesheets/general/_icons.scss
similarity index 100%
rename from app/javascript/stylesheets/icons.scss
rename to app/javascript/stylesheets/general/_icons.scss
diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/general/_index.scss
similarity index 65%
rename from app/javascript/stylesheets/application.scss
rename to app/javascript/stylesheets/general/_index.scss
index e4f0a69b..494e78e2 100644
--- a/app/javascript/stylesheets/application.scss
+++ b/app/javascript/stylesheets/general/_index.scss
@@ -1,7 +1,7 @@
-@import './bootstrap_custom.scss';
-@import './navbar.scss';
-@import './forms.scss';
-@import './icons.scss';
+/*
+  This stylesheet contains styles that are general and
+  could not be grouped in a file of their own
+*/
 
 .container {
   max-width: 920px;
diff --git a/app/javascript/stylesheets/navbar.scss b/app/javascript/stylesheets/general/_navbar.scss
similarity index 100%
rename from app/javascript/stylesheets/navbar.scss
rename to app/javascript/stylesheets/general/_navbar.scss
diff --git a/app/javascript/stylesheets/main.scss b/app/javascript/stylesheets/main.scss
new file mode 100644
index 00000000..22a96369
--- /dev/null
+++ b/app/javascript/stylesheets/main.scss
@@ -0,0 +1,12 @@
+@import 'vendors/bootstrap_custom';
+
+@import 'general/index';
+@import 'general/navbar';
+@import 'general/form';
+@import 'general/icons';
+
+/*
+  Components stylesheets are not imported here. Instead,
+  they are imported in the specific React components
+  that use them
+*/
\ No newline at end of file
diff --git a/app/javascript/stylesheets/bootstrap_custom.scss b/app/javascript/stylesheets/vendors/bootstrap_custom.scss
similarity index 100%
rename from app/javascript/stylesheets/bootstrap_custom.scss
rename to app/javascript/stylesheets/vendors/bootstrap_custom.scss