diff --git a/src/lib/ChatScreens/Chat.svelte b/src/lib/ChatScreens/Chat.svelte
index 4ba34b48..eb793c9b 100644
--- a/src/lib/ChatScreens/Chat.svelte
+++ b/src/lib/ChatScreens/Chat.svelte
@@ -243,7 +243,7 @@
             {#if MessageGenerationInfo && $DataBase.requestInfoInsideChat}
                 <div>
                     <button class="text-sm p-1 text-textcolor2 border-darkborderc float-end mr-2 my-2
-                                    hover:ring-borderc hover:ring rounded-md hover:text-textcolor transition-all flex justify-center items-center" 
+                                    hover:ring-darkbutton hover:ring rounded-md hover:text-textcolor transition-all flex justify-center items-center" 
                             on:click={() => {
                                 alertRequestData({
                                     genInfo: MessageGenerationInfo,
diff --git a/src/lib/Setting/Pages/AdvancedSettings.svelte b/src/lib/Setting/Pages/AdvancedSettings.svelte
index 036d9628..189da417 100644
--- a/src/lib/Setting/Pages/AdvancedSettings.svelte
+++ b/src/lib/Setting/Pages/AdvancedSettings.svelte
@@ -154,7 +154,7 @@
     on:click={async () => {
         alertMd(getRequestLog())
     }}
-    class="drop-shadow-lg p-3 border-borderc border-solid mt-6 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
+    class="drop-shadow-lg p-3 border-darkborderc border-solid mt-6 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
     {language.ShowLog}
 </button>
 {#if Capacitor.isNativePlatform()}
@@ -162,7 +162,7 @@
         on:click={async () => {
             estaStorage = await capStorageInvestigation()
         }}
-        class="drop-shadow-lg p-3 border-borderc border-solid mt-6 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
+        class="drop-shadow-lg p-3 border-darkborderc border-solid mt-6 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
         Investigate Storage
     </button>
 
@@ -182,7 +182,7 @@
         on:click={async () => {
             installPython()
         }}
-        class="drop-shadow-lg p-3 border-borderc border-solid mt-6 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
+        class="drop-shadow-lg p-3 border-darkbutton border-solid mt-6 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
         Test Python
     </button>
 {/if}
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/BotSettings.svelte b/src/lib/Setting/Pages/BotSettings.svelte
index 24a7a8a4..b25e6f36 100644
--- a/src/lib/Setting/Pages/BotSettings.svelte
+++ b/src/lib/Setting/Pages/BotSettings.svelte
@@ -63,12 +63,12 @@
 <div class="flex w-full mb-4">
     <button on:click={() => {
         $DataBase.advancedBotSettings = false
-    }} class="flex-1 border-solid  p-2 flex justify-center cursor-pointer rounded-l-lg bg-darkbg" class:bg-selected={!$DataBase.advancedBotSettings}>
+    }} class="flex-1 border-solid  p-2 flex justify-center cursor-pointer rounded-l-lg bg-darkbg" class:bg-darkbutton={!$DataBase.advancedBotSettings}>
         <span>{language.simple}</span>
     </button>
     <button on:click={() => {
         $DataBase.advancedBotSettings = true
-    }} class="flex-1 border-solid border-l-transparent p-2 flex justify-center cursor-pointer rounded-r-lg bg-darkbg" class:bg-selected={$DataBase.advancedBotSettings}>
+    }} class="flex-1 border-solid border-l-transparent p-2 flex justify-center cursor-pointer rounded-r-lg bg-darkbg" class:bg-darkbutton={$DataBase.advancedBotSettings}>
         <span>{language.advanced}</span>
     </button>
 </div>
diff --git a/src/lib/Setting/Pages/Communities.svelte b/src/lib/Setting/Pages/Communities.svelte
index eed1e69e..d65eb291 100644
--- a/src/lib/Setting/Pages/Communities.svelte
+++ b/src/lib/Setting/Pages/Communities.svelte
@@ -6,16 +6,16 @@
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.community}</h2>
 <button
     on:click={async () => {openURL("https://github.com/kwaroran/RisuAI")}}
-    class="drop-shadow-lg p-3 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
+    class="drop-shadow-lg p-3 border-darkbutton border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
     Github
 </button>
 <button
     on:click={async () => {openURL("https://discord.gg/JzP8tB9ZK8")}}
-    class="drop-shadow-lg p-3 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
+    class="drop-shadow-lg p-3 border-darkbutton border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
     Discord
 </button>
 <button
     on:click={async () => {openURL("https://www.patreon.com/RisuAI")}}
-    class="drop-shadow-lg p-3 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
+    class="drop-shadow-lg p-3 border-darkbutton border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
     Support Project
 </button>
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/FilesSettings.svelte b/src/lib/Setting/Pages/FilesSettings.svelte
index 5a352d9f..10657df6 100644
--- a/src/lib/Setting/Pages/FilesSettings.svelte
+++ b/src/lib/Setting/Pages/FilesSettings.svelte
@@ -21,7 +21,7 @@
             }
         }
     }}
-    class="drop-shadow-lg p-3 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
+    class="drop-shadow-lg p-3 border-darkborderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
     {language.savebackup}
 </button>
 
@@ -37,7 +37,7 @@
             }
         }
     }}
-    class="drop-shadow-lg p-3 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
+    class="drop-shadow-lg p-3 border-darkborderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
     {language.loadbackup}
 </button>
 
diff --git a/src/lib/SideBars/CharConfig.svelte b/src/lib/SideBars/CharConfig.svelte
index 649b1038..554beb21 100644
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -396,11 +396,9 @@
     {/if}
 
     {#if currentChar.type === 'group'}
-        <button
-            on:click={makeGroupImage}
-            class="drop-shadow-lg p-2 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected">
+        <Button on:click={makeGroupImage}>
             {language.createGroupImg}
-        </button>
+        </Button>
     {/if}
 
 
diff --git a/src/lib/SideBars/LoreBook/LoreBookData.svelte b/src/lib/SideBars/LoreBook/LoreBookData.svelte
index 1a9101d8..9b279142 100644
--- a/src/lib/SideBars/LoreBook/LoreBookData.svelte
+++ b/src/lib/SideBars/LoreBook/LoreBookData.svelte
@@ -27,7 +27,7 @@
 
 <div class="w-full flex flex-col pt-2 mt-2 border-t border-t-selected first:pt-0 first:mt-0 first:border-0" data-risu-idx={idx}>
     <div class="flex items-center transition-colors w-full p-1">
-        <button class="endflex valuer border-borderc" on:click={() => {
+        <button class="endflex valuer border-darkborderc" on:click={() => {
             value.secondkey = value.secondkey ?? ''
             open = !open
             if(open){
diff --git a/src/lib/UI/GUI/Button.svelte b/src/lib/UI/GUI/Button.svelte
index 62d26029..f63822d1 100644
--- a/src/lib/UI/GUI/Button.svelte
+++ b/src/lib/UI/GUI/Button.svelte
@@ -1,8 +1,8 @@
 <button
     on:click
     class="{
-        styled === 'primary' ? ((selected ? 'bg-borderc' : 'bg-darkbutton') + " hover:bg-borderc focus:ring-borderc border-darkborderc")
-        : styled === 'outlined' ? 'bg-transparent hover:bg-darkbg focus:ring-borderc border-darkborderc text-textcolor2'
+        styled === 'primary' ? ((selected ? 'bg-bg-selected' : 'bg-darkbutton') + " hover:bg-selected focus:ring-selected border-darkborderc")
+        : styled === 'outlined' ? 'bg-transparent hover:bg-darkbg focus:ring-selected border-darkborderc text-textcolor2'
         : ((selected ? 'bg-red-800' : 'bg-red-700') + ' hover:bg-red-500 focus:ring-red-600 border-red-600')
     } border text-textcolor rounded-md shadow-sm focus:outline-none focus:ring-2 transition-colors duration-200{className ? (" " + className) : ""}"
     class:px-4 = {size == "md"}
diff --git a/src/lib/UI/GUI/CheckInput.svelte b/src/lib/UI/GUI/CheckInput.svelte
index 03865b8b..6f440e45 100644
--- a/src/lib/UI/GUI/CheckInput.svelte
+++ b/src/lib/UI/GUI/CheckInput.svelte
@@ -28,7 +28,7 @@
         aria-labelledby="{name} {check ? 'abled' : 'disabled'}"
     />
     <span 
-        class="w-5 h-5 min-w-5 min-h-5 rounded-md border-2 border-darkborderc flex justify-center items-center {check ? 'bg-borderc' : 'bg-darkbutton'} transition-colors duration-200"
+        class="w-5 h-5 min-w-5 min-h-5 rounded-md border-2 border-darkborderc flex justify-center items-center {check ? 'bg-darkborderc' : 'bg-darkbutton'} transition-colors duration-200"
         aria-hidden="true"
         aria-describedby="{name} {check ? 'abled' : 'disabled'}"
         aria-labelledby="{name} {check ? 'abled' : 'disabled'}"
diff --git a/src/lib/UI/GUI/SliderInput.svelte b/src/lib/UI/GUI/SliderInput.svelte
index 9f00d73d..5a25e81d 100644
--- a/src/lib/UI/GUI/SliderInput.svelte
+++ b/src/lib/UI/GUI/SliderInput.svelte
@@ -12,6 +12,9 @@
 <div class="w-full" class:mb-4={marginBottom}>
   <div 
     class="relative w-full h-8 border-darkborderc border rounded-full cursor-pointer"
+    style:background={
+      `linear-gradient(to right, var(--risu-theme-darkbutton) 0%, var(--risu-theme-darkbutton) ${(value - min) / (max - min) * 100}%, var(--risu-theme-darkbg) ${(value - min) / (max - min) * 100}%, var(--risu-theme-darkbg) 100%)`
+    }
     on:mousedown={(event) => {
       mouseDown = true;
       changeValue(event);
@@ -32,11 +35,11 @@
     }}
     bind:this={slider}
   >
-    <div 
+    <!-- <div 
       class="absolute top-0 left-0 h-8 rounded-full bg-borderc transition-width duration-200"
       style="width: {(value - min) / (max - min) * 100}%;"
     >
-    </div>
+    </div> -->
     <span 
       class="absolute top-0 left-4 h-8 w-8 rounded-full items-center justify-center flex text-textcolor text-sm"
     >
diff --git a/src/lib/UI/ModelList.svelte b/src/lib/UI/ModelList.svelte
index d12d60ed..9e74a606 100644
--- a/src/lib/UI/ModelList.svelte
+++ b/src/lib/UI/ModelList.svelte
@@ -161,7 +161,7 @@
 {/if}
 
 <button on:click={() => {openOptions = true}}
-    class="mt-4 drop-shadow-lg p-3 flex justify-center items-center ml-2 mr-2 rounded-lg bg-selected mb-4">
+    class="mt-4 drop-shadow-lg p-3 flex justify-center items-center ml-2 mr-2 rounded-lg bg-darkbutton mb-4 border-darkborderc border">
         {getModelName(value)}
 </button>