diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 5f09747..d671866 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,10 +1,10 @@
 <script>
   import { _ } from 'svelte-i18n'
-	import NavigationBar from './components/NavigationBar.svelte';
-  import Clock from './components/Clock.svelte'
+	import NavigationBar from './components/General/NavigationBar.svelte';
+  import Clock from './components/General/Clock.svelte'
   import Preparation from './components/Preparation.svelte';
   import Animation from './components/Animation.svelte';
-  import Settings from './components/Settings.svelte';
+  import Settings from './components/Settings/Settings.svelte';
   import Devices from './components/Devices.svelte';
   import Show from './components/Show.svelte';
   import GeneralConsole from './components/GeneralConsole.svelte';
diff --git a/frontend/src/components/Clock.svelte b/frontend/src/components/General/Clock.svelte
similarity index 94%
rename from frontend/src/components/Clock.svelte
rename to frontend/src/components/General/Clock.svelte
index 9f9037e..2e588d1 100644
--- a/frontend/src/components/Clock.svelte
+++ b/frontend/src/components/General/Clock.svelte
@@ -1,7 +1,7 @@
 
 <script>
     import { onDestroy } from 'svelte';
-    import * as SoftwareVariables from '../stores.js';
+    import * as SoftwareVariables from '../../stores.js';
 
     // Import the main colors from the store
     let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor
diff --git a/frontend/src/components/NavigationBar.svelte b/frontend/src/components/General/NavigationBar.svelte
similarity index 96%
rename from frontend/src/components/NavigationBar.svelte
rename to frontend/src/components/General/NavigationBar.svelte
index e7025d3..52b5c08 100644
--- a/frontend/src/components/NavigationBar.svelte
+++ b/frontend/src/components/General/NavigationBar.svelte
@@ -2,7 +2,7 @@
     import RoundIconButton from './RoundIconButton.svelte';
     import Toggle from './Toggle.svelte';
     import { createEventDispatcher, onDestroy } from 'svelte';
-    import * as SoftwareVariables from '../stores.js';
+    import * as SoftwareVariables from '../../stores.js';
     import { _ } from 'svelte-i18n'
 
     // Import the main colors from the store
diff --git a/frontend/src/components/RoundIconButton.svelte b/frontend/src/components/General/RoundIconButton.svelte
similarity index 95%
rename from frontend/src/components/RoundIconButton.svelte
rename to frontend/src/components/General/RoundIconButton.svelte
index 41fbcb8..7538217 100644
--- a/frontend/src/components/RoundIconButton.svelte
+++ b/frontend/src/components/General/RoundIconButton.svelte
@@ -2,7 +2,7 @@
 
 <script>
     import { createEventDispatcher, onDestroy } from 'svelte';
-    import * as SoftwareVariables from '../stores.js';
+    import * as SoftwareVariables from '../../stores.js';
     import Tooltip from './Tooltip.svelte';
     import { _ } from 'svelte-i18n'
 
diff --git a/frontend/src/components/RoundedButton.svelte b/frontend/src/components/General/RoundedButton.svelte
similarity index 95%
rename from frontend/src/components/RoundedButton.svelte
rename to frontend/src/components/General/RoundedButton.svelte
index c37bb4f..b177455 100644
--- a/frontend/src/components/RoundedButton.svelte
+++ b/frontend/src/components/General/RoundedButton.svelte
@@ -1,6 +1,6 @@
 <script lang=ts>
     import { createEventDispatcher, onDestroy } from 'svelte';
-    import * as SoftwareVariables from '../stores.js';
+    import * as SoftwareVariables from '../../stores.js';
     import Tooltip from './Tooltip.svelte';
 
     export let text = 'Default button';
diff --git a/frontend/src/components/Tab.svelte b/frontend/src/components/General/Tab.svelte
similarity index 94%
rename from frontend/src/components/Tab.svelte
rename to frontend/src/components/General/Tab.svelte
index e8810d0..2653cf8 100644
--- a/frontend/src/components/Tab.svelte
+++ b/frontend/src/components/General/Tab.svelte
@@ -1,7 +1,7 @@
 <script lang=ts>
     import RoundedButton from "./RoundedButton.svelte";
     import { onDestroy } from 'svelte';
-    import * as SoftwareVariables from '../stores.js';
+    import * as SoftwareVariables from '../../stores.js';
 
     export let tabs = [];
 
diff --git a/frontend/src/components/Toggle.svelte b/frontend/src/components/General/Toggle.svelte
similarity index 98%
rename from frontend/src/components/Toggle.svelte
rename to frontend/src/components/General/Toggle.svelte
index 0749c27..13fa6c0 100644
--- a/frontend/src/components/Toggle.svelte
+++ b/frontend/src/components/General/Toggle.svelte
@@ -2,7 +2,7 @@
 
 <script lang=ts>
     import { createEventDispatcher, onDestroy } from 'svelte';
-    import * as SoftwareVariables from '../stores.js';
+    import * as SoftwareVariables from '../../stores.js';
     import Tooltip from './Tooltip.svelte';
     import { _ } from 'svelte-i18n'
 
diff --git a/frontend/src/components/Tooltip.svelte b/frontend/src/components/General/Tooltip.svelte
similarity index 91%
rename from frontend/src/components/Tooltip.svelte
rename to frontend/src/components/General/Tooltip.svelte
index c2bed92..a88518e 100644
--- a/frontend/src/components/Tooltip.svelte
+++ b/frontend/src/components/General/Tooltip.svelte
@@ -2,7 +2,7 @@
     export let message = "Default tooltip"
     export let show = false
 
-    import * as SoftwareVariables from '../stores.js';
+    import * as SoftwareVariables from '../../stores.js';
     import { onDestroy } from 'svelte';
 
     // Import the main colors from the store
diff --git a/frontend/src/components/Settings/InputsOutputsContent.svelte b/frontend/src/components/Settings/InputsOutputsContent.svelte
new file mode 100644
index 0000000..652a6b5
--- /dev/null
+++ b/frontend/src/components/Settings/InputsOutputsContent.svelte
@@ -0,0 +1,9 @@
+<script lang=ts>
+
+</script>
+
+<button>You can change your hardware settings here</button>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Settings/ProjectPropertiesContent.svelte b/frontend/src/components/Settings/ProjectPropertiesContent.svelte
new file mode 100644
index 0000000..decd810
--- /dev/null
+++ b/frontend/src/components/Settings/ProjectPropertiesContent.svelte
@@ -0,0 +1,9 @@
+<script lang=ts>
+
+</script>
+
+<button>You can change your project properties here</button>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Settings.svelte b/frontend/src/components/Settings/Settings.svelte
similarity index 51%
rename from frontend/src/components/Settings.svelte
rename to frontend/src/components/Settings/Settings.svelte
index d4a5fc2..6501c98 100644
--- a/frontend/src/components/Settings.svelte
+++ b/frontend/src/components/Settings/Settings.svelte
@@ -1,12 +1,14 @@
 <script lang=ts>
-    import RoundedButton from "./RoundedButton.svelte";
-    import Clock from "./Clock.svelte";
-    import Tab from "./Tab.svelte";
+    import RoundedButton from "../General/RoundedButton.svelte";
+    import ProjectPropertiesContent from "./ProjectPropertiesContent.svelte";
+    import InputsOutputsContent from "./InputsOutputsContent.svelte";
+    import Clock from "../General/Clock.svelte";
+    import Tab from "../General/Tab.svelte";
     import { _ } from 'svelte-i18n'
 
     const tabs = [
-        { title: $_("projectPropertiesTab"), icon: 'bxs-info-circle', tooltip: $_("projectPropertiesTooltip"), component: RoundedButton },
-        { title: $_("projectInputOutputTab"), icon: 'bxs-plug', tooltip: $_("projectInputOutputTooltip"), component: Clock },
+        { title: $_("projectPropertiesTab"), icon: 'bxs-info-circle', tooltip: $_("projectPropertiesTooltip"), component: ProjectPropertiesContent },
+        { title: $_("projectInputOutputTab"), icon: 'bxs-plug', tooltip: $_("projectInputOutputTooltip"), component: InputsOutputsContent },
     ];
 
 </script>