diff --git a/fclauncher/frontend/src/App.svelte b/fclauncher/frontend/src/App.svelte
index e9ad329..83de59f 100644
--- a/fclauncher/frontend/src/App.svelte
+++ b/fclauncher/frontend/src/App.svelte
@@ -11,6 +11,7 @@
 	import Instancepage from './Instancepage.svelte'
     import { set_attributes, set_style } from 'svelte/internal';
 	import {GetInstances} from '../wailsjs/go/main/InstanceManager.js'
+    import Settingspage from './Settingspage.svelte';
 
 	let width: number = 10
 	let navMargin = document.getElementById("body") as HTMLElement;
@@ -74,6 +75,10 @@
 		<div transition:slide="{{duration:100}}" class="central">
   		<Modpacks UpdateInstances={UpdateInstances} />
 		</div>
+		{:else if $currentPage == 4}
+		<div transition:slide="{{duration:100}}" class="central">
+  		<Settingspage on:change-theme = {setcolor} on:change-theme-back = {initialColor} />
+		</div>
 	{/if}
   	</body>	
 	</div>
diff --git a/fclauncher/frontend/src/Navbar.svelte b/fclauncher/frontend/src/Navbar.svelte
index 71ef5d0..fb6a633 100644
--- a/fclauncher/frontend/src/Navbar.svelte
+++ b/fclauncher/frontend/src/Navbar.svelte
@@ -56,7 +56,7 @@ function unextend(){
 
         </li>
         <li class="nav-item">
-            <a href="#" class="nav-link">
+            <a href="#" class="nav-link" on:click={() => {$currentPage = 4}}>
                 <svg xmlns="http://www.w3.org/2000/svg" class="nav-icon" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>
 
                 <span class="link-text">Settings</span>
diff --git a/fclauncher/frontend/src/Settingspage.svelte b/fclauncher/frontend/src/Settingspage.svelte
new file mode 100644
index 0000000..8dc94b2
--- /dev/null
+++ b/fclauncher/frontend/src/Settingspage.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+import {instances, loading, navMargin} from './global'
+import {InstallVanilla, LaunchInstance, GetInstances, InstallForge, InstallQuilt, InstallFabric, CheckUpdate} from '../wailsjs/go/main/InstanceManager.js'
+import {GetVersions} from '../wailsjs/go/main/App.js'
+import {onMount, createEventDispatcher} from 'svelte'
+
+var r = document.querySelector('main');
+const dispatch = createEventDispatcher()
+
+function changetheme(){
+        dispatch('change-theme');
+    }
+
+function changethemeback(){
+        dispatch('change-theme-back');
+    }
+
+
+</script>
+<main>
+    <div class="container">
+        <button class="theme-button" on:click={changetheme}>Change Theme</button>
+        <button class="theme-button" on:click={changethemeback}>Change Theme Again</button>
+
+    </div>
+
+</main>
+<style>
+.container{
+    display: flex;
+    justify-content: center;
+    margin: 3rem;
+}
+.theme-button{
+    margin: 1rem;
+}
+</style>
\ No newline at end of file