diff --git a/package.json b/package.json
index f6ef7deb..c5138501 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "showdown": "^2.1.0",
     "sortablejs": "^1.15.2",
     "streamsaver": "^2.0.6",
+    "svelte-awesome-color-picker": "^3.1.0",
     "three": "^0.154.0",
     "tippy.js": "^6.3.7",
     "uuid": "^9.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d932918e..e36f08a1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -155,6 +155,9 @@ importers:
       streamsaver:
         specifier: ^2.0.6
         version: 2.0.6
+      svelte-awesome-color-picker:
+        specifier: ^3.1.0
+        version: 3.1.0(svelte@4.2.8)
       three:
         specifier: ^0.154.0
         version: 0.154.0
@@ -1386,6 +1389,9 @@ packages:
     resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
     engines: {node: '>=12.5.0'}
 
+  colord@2.9.3:
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
+
   combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
@@ -3247,6 +3253,16 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  svelte-awesome-color-picker@3.1.0:
+    resolution: {integrity: sha512-na9B9qLaV8XQ6W6eyP6vFyDV2TBF4qvGad6799D4GzbazkiFtoO+lbaFFViAWanz/eECwe/WUAUdg6Jy7LIKFw==}
+    peerDependencies:
+      svelte: ^3.55.1 || ^4.0.0
+
+  svelte-awesome-slider@1.1.0:
+    resolution: {integrity: sha512-MgY6ZdBON42HVZqNWNjq2HOgyDlC35q0TNbV/YO1l1/bcb5yhM8EE97h1AJ/7F6t6sLzXhQ3qPf5nGyCdDSnCg==}
+    peerDependencies:
+      svelte: ^3.54.0 || ^4.0.0
+
   svelte-check@3.6.3:
     resolution: {integrity: sha512-Q2nGnoysxUnB9KjnjpQLZwdjK62DHyW6nuH/gm2qteFnDk0lCehe/6z8TsIvYeKjC6luKaWxiNGyOcWiLLPSwA==}
     hasBin: true
@@ -4863,6 +4879,8 @@ snapshots:
       color-convert: 2.0.1
       color-string: 1.9.1
 
+  colord@2.9.3: {}
+
   combined-stream@1.0.8:
     dependencies:
       delayed-stream: 1.0.0
@@ -6851,6 +6869,16 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  svelte-awesome-color-picker@3.1.0(svelte@4.2.8):
+    dependencies:
+      colord: 2.9.3
+      svelte: 4.2.8
+      svelte-awesome-slider: 1.1.0(svelte@4.2.8)
+
+  svelte-awesome-slider@1.1.0(svelte@4.2.8):
+    dependencies:
+      svelte: 4.2.8
+
   svelte-check@3.6.3(postcss-load-config@4.0.2(postcss@8.4.33)(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@18.19.7)(typescript@5.3.3)))(postcss@8.4.33)(svelte@4.2.8):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.21
diff --git a/src/lib/Setting/Pages/DisplaySettings.svelte b/src/lib/Setting/Pages/DisplaySettings.svelte
index 377e5542..c8e4119f 100644
--- a/src/lib/Setting/Pages/DisplaySettings.svelte
+++ b/src/lib/Setting/Pages/DisplaySettings.svelte
@@ -10,9 +10,9 @@
     import { updateAnimationSpeed } from "src/ts/gui/animation";
     import { changeColorScheme, colorSchemeList, exportColorScheme, importColorScheme, updateColorScheme, updateTextTheme } from "src/ts/gui/colorscheme";
     import { DownloadIcon, FolderUpIcon } from "lucide-svelte";
-
     import { guiSizeText, updateGuisize } from "src/ts/gui/guisize";
-  import TextInput from "src/lib/UI/GUI/TextInput.svelte";
+    import TextInput from "src/lib/UI/GUI/TextInput.svelte";
+    import ColorInput from "src/lib/UI/GUI/ColorInput.svelte";
 
     const onSchemeInputChange = (e:Event) => {
         changeColorScheme((e.target as HTMLInputElement).value)
@@ -54,39 +54,39 @@
         <OptionInput value="dark">Dark</OptionInput>
     </SelectInput>
     <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.bgcolor} on:change={updateColorScheme}>
+        <ColorInput bind:value={$DataBase.colorScheme.bgcolor} on:input={updateColorScheme} />
         <span class="ml-2">Background</span>
     </div>
     <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.darkbg} on:change={updateColorScheme}>
+        <ColorInput bind:value={$DataBase.colorScheme.darkbg} on:input={updateColorScheme} />
         <span class="ml-2">Dark Background</span>
     </div>
     <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.borderc} on:change={updateColorScheme}>
+        <ColorInput bind:value={$DataBase.colorScheme.borderc} on:input={updateColorScheme} />
         <span class="ml-2">Color 1</span>
     </div>
     <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.selected} on:change={updateColorScheme}>
+        <ColorInput bind:value={$DataBase.colorScheme.selected} on:input={updateColorScheme} />
         <span class="ml-2">Color 2</span>
     </div>
     <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.draculared} on:change={updateColorScheme}>
+        <ColorInput bind:value={$DataBase.colorScheme.draculared} on:input={updateColorScheme} />
         <span class="ml-2">Color 3</span>
     </div>
     <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.darkBorderc} on:change={updateColorScheme}>
+        <ColorInput bind:value={$DataBase.colorScheme.darkBorderc} on:input={updateColorScheme} />
         <span class="ml-2">Color 4</span>
     </div>
     <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.darkbutton} on:change={updateColorScheme}>
+        <ColorInput bind:value={$DataBase.colorScheme.darkbutton} on:input={updateColorScheme} />
         <span class="ml-2">Color 5</span>
     </div>
     <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.textcolor} on:change={updateColorScheme}>
+        <ColorInput bind:value={$DataBase.colorScheme.textcolor} on:input={updateColorScheme} />
         <span class="ml-2">Text Color</span>
     </div>
     <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.textcolor2} on:change={updateColorScheme}>
+        <ColorInput bind:value={$DataBase.colorScheme.textcolor2} on:input={updateColorScheme} />
         <span class="ml-2">Text Color 2</span>
     </div>
     <div class="flex-grow flex justify-end">
@@ -113,27 +113,27 @@
 
 {#if $DataBase.textTheme === "custom"}
     <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorStandard} on:change={updateTextTheme}>
+        <ColorInput bind:value={$DataBase.customTextTheme.FontColorStandard} on:input={updateTextTheme} />
         <span class="ml-2">Normal Text</span>
     </div>
     <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorItalic} on:change={updateTextTheme}>
+        <ColorInput bind:value={$DataBase.customTextTheme.FontColorItalic} on:input={updateTextTheme} />
         <span class="ml-2">Italic Text</span>
     </div>
     <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorBold} on:change={updateTextTheme}>
+        <ColorInput bind:value={$DataBase.customTextTheme.FontColorBold} on:input={updateTextTheme} />
         <span class="ml-2">Bold Text</span>
     </div>
     <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorItalicBold} on:change={updateTextTheme}>
+        <ColorInput bind:value={$DataBase.customTextTheme.FontColorItalicBold} on:input={updateTextTheme} />
         <span class="ml-2">Italic Bold Text</span>
     </div>
     <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorQuote1} on:change={updateTextTheme}>
+        <ColorInput bind:value={$DataBase.customTextTheme.FontColorQuote1} on:input={updateTextTheme} />
         <span class="ml-2">Single Quote Text</span>
     </div>
     <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorQuote2} on:change={updateTextTheme}>
+        <ColorInput bind:value={$DataBase.customTextTheme.FontColorQuote2} on:input={updateTextTheme} />
         <span class="ml-2">Double Quote Text</span>
     </div>
 {/if}
diff --git a/src/lib/UI/GUI/ColorInput.svelte b/src/lib/UI/GUI/ColorInput.svelte
new file mode 100644
index 00000000..238c0cfb
--- /dev/null
+++ b/src/lib/UI/GUI/ColorInput.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import ColorPicker from 'svelte-awesome-color-picker';
+    export let value = '#000000';
+</script>
+
+<div class="cl rounded-full bg-white">
+    <ColorPicker
+        label="" bind:hex={value} on:input
+    />
+</div>
+
+<style>
+    .cl{
+        --cp-bg-color: var(--risu-theme-bgcolor);
+        --cp-border-color: var(--risu-theme-darkborderc);
+        --cp-text-color: var(--risu-theme-textcolor);
+        --cp-input-color: #555;
+        --cp-button-hover-color: #777;
+    }
+</style>
\ No newline at end of file