diff --git a/bun.lockb b/bun.lockb
index 78e15b1c3..405f64aff 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 021970136..4a71a4515 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@ant-design/cssinjs": "^1.18.4",
+    "@ctrl/tinycolor": "^4.2.0",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.1",
     "@langchain/community": "^0.0.41",
diff --git a/src/assets/backgrounds/blob-scene.svg b/src/assets/backgrounds/blob-scene.svg
new file mode 100644
index 000000000..6b4cc2ff4
--- /dev/null
+++ b/src/assets/backgrounds/blob-scene.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="{{color1}}"></rect><defs><linearGradient id="grad1_0" x1="33.3%" y1="0%" x2="100%" y2="100%"><stop offset="20%" stop-color="{{color2}}" stop-opacity="1"></stop><stop offset="80%" stop-color="{{color3}}" stop-opacity="1"></stop></linearGradient></defs><defs><linearGradient id="grad2_0" x1="0%" y1="0%" x2="66.7%" y2="100%"><stop offset="20%" stop-color="{{color4}}" stop-opacity="1"></stop><stop offset="80%" stop-color="{{color5}}" stop-opacity="1"></stop></linearGradient></defs><g transform="translate(900, 0)"><path d="M0 486.7C-32.8 449.2 -65.7 411.7 -109 406.7C-152.3 401.6 -206 429.1 -242 419.2C-278 409.2 -296.1 362 -329.5 329.5C-362.9 297.1 -411.5 279.4 -421.5 243.4C-431.6 207.3 -403.2 152.9 -407.6 109.2C-412.1 65.6 -449.4 32.8 -486.7 0L0 0Z" fill="{{color6}}"></path></g><g transform="translate(0, 600)"><path d="M0 -486.7C40.3 -469.3 80.5 -451.9 116.7 -435.6C153 -419.4 185.1 -404.2 227 -393.2C268.9 -382.1 320.4 -375.1 344.2 -344.2C368 -313.3 364.2 -258.4 378.5 -218.5C392.7 -178.6 425.2 -153.5 446.3 -119.6C467.3 -85.6 477 -42.8 486.7 0L0 0Z" fill="{{color7}}"></path></g></svg>
\ No newline at end of file
diff --git a/src/assets/backgrounds/blurry-gradient.svg b/src/assets/backgrounds/blurry-gradient.svg
new file mode 100644
index 000000000..becb2cc73
--- /dev/null
+++ b/src/assets/backgrounds/blurry-gradient.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><defs><filter id="blur1" x="-10%" y="-10%" width="120%" height="120%"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="161" result="effect1_foregroundBlur"></feGaussianBlur></filter></defs><rect width="900" height="600" fill="{{color1}}"></rect><g filter="url(#blur1)"><circle cx="879" cy="457" fill="{{color2}}" r="357"></circle><circle cx="759" cy="129" fill="{{color3}}" r="357"></circle><circle cx="97" cy="413" fill="{{color4}}" r="357"></circle><circle cx="260" cy="118" fill="{{color5}}" r="357"></circle><circle cx="556" cy="117" fill="{{color6}}" r="357"></circle><circle cx="274" cy="566" fill="{{color7}}" r="357"></circle></g></svg>
\ No newline at end of file
diff --git a/src/assets/backgrounds/layered-waves.svg b/src/assets/backgrounds/layered-waves.svg
new file mode 100644
index 000000000..6e0b6bc0a
--- /dev/null
+++ b/src/assets/backgrounds/layered-waves.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="{{color1}}"></rect><path d="M0 393L21.5 397.2C43 401.3 86 409.7 128.8 411C171.7 412.3 214.3 406.7 257.2 399.2C300 391.7 343 382.3 385.8 383.7C428.7 385 471.3 397 514.2 395.3C557 393.7 600 378.3 642.8 380.5C685.7 382.7 728.3 402.3 771.2 416.2C814 430 857 438 878.5 442L900 446L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="{{color2}}"></path><path d="M0 426L21.5 425C43 424 86 422 128.8 417.8C171.7 413.7 214.3 407.3 257.2 416.2C300 425 343 449 385.8 454C428.7 459 471.3 445 514.2 432.3C557 419.7 600 408.3 642.8 402.7C685.7 397 728.3 397 771.2 401C814 405 857 413 878.5 417L900 421L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="{{color3}}"></path><path d="M0 464L21.5 459.8C43 455.7 86 447.3 128.8 445.8C171.7 444.3 214.3 449.7 257.2 458.2C300 466.7 343 478.3 385.8 484.3C428.7 490.3 471.3 490.7 514.2 484C557 477.3 600 463.7 642.8 464.3C685.7 465 728.3 480 771.2 480.5C814 481 857 467 878.5 460L900 453L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="{{color4}}"></path><path d="M0 532L21.5 531C43 530 86 528 128.8 523.3C171.7 518.7 214.3 511.3 257.2 505C300 498.7 343 493.3 385.8 495.7C428.7 498 471.3 508 514.2 510.8C557 513.7 600 509.3 642.8 509.2C685.7 509 728.3 513 771.2 509.8C814 506.7 857 496.3 878.5 491.2L900 486L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="{{color5}}"></path><path d="M0 570L21.5 568.8C43 567.7 86 565.3 128.8 562.3C171.7 559.3 214.3 555.7 257.2 551C300 546.3 343 540.7 385.8 543.8C428.7 547 471.3 559 514.2 565.2C557 571.3 600 571.7 642.8 566.8C685.7 562 728.3 552 771.2 551.8C814 551.7 857 561.3 878.5 566.2L900 571L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="{{color6}}"></path></svg>
\ No newline at end of file
diff --git a/src/assets/backgrounds/plain.svg b/src/assets/backgrounds/plain.svg
new file mode 100644
index 000000000..16a8cf0d5
--- /dev/null
+++ b/src/assets/backgrounds/plain.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="{{color1}}"></rect><g transform="translate(-29.75 36.63994561796553)"></g></svg>
\ No newline at end of file
diff --git a/src/components/Common/Playground/DocumentChip.tsx b/src/components/Common/Playground/DocumentChip.tsx
index 043b698ca..7a198adc6 100644
--- a/src/components/Common/Playground/DocumentChip.tsx
+++ b/src/components/Common/Playground/DocumentChip.tsx
@@ -15,7 +15,7 @@ export const DocumentChip: React.FC<DocumentChipProps> = ({ document }) => {
       href={document.url}
       target="_blank"
       rel="noreferrer"
-      className="inline-flex items-center gap-2 bg-surface-50 dark:bg-[#242424] border border-neutral-200 dark:border-[#2a2a2a] rounded-2xl px-3 py-1.5 mr-2 mb-2">
+      className="inline-flex items-center gap-2 bg-surface-50 dark:bg-surface-900 border border-neutral-200 dark:border-[#2a2a2a] rounded-2xl px-3 py-1.5 mr-2 mb-2">
       <div className="flex items-center gap-2 flex-1 min-w-0">
         <div className="flex-shrink-0">
           {document.favIconUrl ? (
diff --git a/src/components/Common/Playground/Message.tsx b/src/components/Common/Playground/Message.tsx
index 891ca7c76..0f714e3cc 100644
--- a/src/components/Common/Playground/Message.tsx
+++ b/src/components/Common/Playground/Message.tsx
@@ -351,7 +351,7 @@ export const PlaygroundMessage = (props: Props) => {
                         })
                       }
                     }}
-                    className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-[#242424] border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                    className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-surface-900 border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                     {!isSpeaking ? (
                       <Volume2Icon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                     ) : (
@@ -376,7 +376,7 @@ export const PlaygroundMessage = (props: Props) => {
                         setIsBtnPressed(false)
                       }, 2000)
                     }}
-                    className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-[#242424] border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                    className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-surface-900 border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                     {!isBtnPressed ? (
                       <CopyIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                     ) : (
@@ -395,7 +395,7 @@ export const PlaygroundMessage = (props: Props) => {
                       title={t("generationInfo")}>
                       <button
                         aria-label={t("generationInfo")}
-                        className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-[#242424] border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                        className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-surface-900 border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                         <InfoIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                       </button>
                     </Popover>
@@ -406,7 +406,7 @@ export const PlaygroundMessage = (props: Props) => {
                       <button
                         aria-label={t("regenerate")}
                         onClick={props.onRengerate}
-                        className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-[#242424] border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                        className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-surface-900 border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                         <RotateCcw className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                       </button>
                     </Tooltip>
@@ -417,7 +417,7 @@ export const PlaygroundMessage = (props: Props) => {
                       <button
                         aria-label={t("newBranch")}
                         onClick={props?.onNewBranch}
-                        className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-[#242424] border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                        className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-surface-900 border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                         <GitBranchIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                       </button>
                     </Tooltip>
@@ -428,7 +428,7 @@ export const PlaygroundMessage = (props: Props) => {
                       <button
                         aria-label={t("continue")}
                         onClick={props?.onContinue}
-                        className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-[#242424] border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                        className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-surface-900 border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                         <PlayCircle className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                       </button>
                     </Tooltip>
@@ -440,7 +440,7 @@ export const PlaygroundMessage = (props: Props) => {
                   <button
                     onClick={() => setEditMode(true)}
                     aria-label={t("edit")}
-                    className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-[#242424] border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                    className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-surface-900 border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                     <Pen className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                   </button>
                 </Tooltip>
@@ -449,7 +449,7 @@ export const PlaygroundMessage = (props: Props) => {
           ) : (
             // add invisible div to prevent layout shift
             <div className="invisible">
-              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-[#242424] border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></div>
+              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-surface-900 border border-gray-300 dark:border-none hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></div>
             </div>
           )}
         </div>
diff --git a/src/components/Common/Playground/PlaygroundUserMessage.tsx b/src/components/Common/Playground/PlaygroundUserMessage.tsx
index 4192217b7..143760154 100644
--- a/src/components/Common/Playground/PlaygroundUserMessage.tsx
+++ b/src/components/Common/Playground/PlaygroundUserMessage.tsx
@@ -96,7 +96,7 @@ export const PlaygroundUserMessageBubble: React.FC<Props> = (props) => {
         <div
           dir="auto"
           data-is-not-editable={!editMode}
-          className={`message-bubble bg-surface-50 dark:bg-[#242424] rounded-3xl prose dark:prose-invert break-words text-primary min-h-7 prose-p:opacity-95 prose-strong:opacity-100 bg-foreground border border-input-border max-w-[100%] sm:max-w-[90%] px-4 py-2.5 rounded-br-lg dark:border-[#2a2a2a] ${
+          className={`message-bubble bg-surface-50 dark:bg-surface-900 rounded-3xl prose dark:prose-invert break-words text-primary min-h-7 prose-p:opacity-95 prose-strong:opacity-100 bg-foreground border border-input-border max-w-[100%] sm:max-w-[90%] px-4 py-2.5 rounded-br-lg dark:border-[#2a2a2a] ${
             props.message_type && !editMode ? "italic" : ""
           }`}>
           <HumanMessage message={props.message} />
@@ -161,7 +161,7 @@ export const PlaygroundUserMessageBubble: React.FC<Props> = (props) => {
                     })
                   }
                 }}
-                className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-[#242424] hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-100 dark:bg-surface-900 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                 {!isSpeaking ? (
                   <PlayIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                 ) : (
@@ -181,7 +181,7 @@ export const PlaygroundUserMessageBubble: React.FC<Props> = (props) => {
                     setIsBtnPressed(false)
                   }, 2000)
                 }}
-                className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-50 dark:bg-[#242424] hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-50 dark:bg-surface-900 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                 {!isBtnPressed ? (
                   <CopyIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                 ) : (
@@ -196,7 +196,7 @@ export const PlaygroundUserMessageBubble: React.FC<Props> = (props) => {
               <button
                 onClick={() => setEditMode(true)}
                 aria-label={t("edit")}
-                className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-50 dark:bg-[#242424] hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-50 dark:bg-surface-900 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                 <Pen className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
               </button>
             </Tooltip>
@@ -205,7 +205,7 @@ export const PlaygroundUserMessageBubble: React.FC<Props> = (props) => {
       ) : (
         // add invisible div to prevent layout shift
         <div className="invisible">
-          <div className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-50 dark:bg-[#242424] hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></div>
+          <div className="flex items-center justify-center w-6 h-6 rounded-full bg-surface-50 dark:bg-surface-900 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></div>
         </div>
       )}
     </div>
diff --git a/src/components/Option/Playground/Playground.tsx b/src/components/Option/Playground/Playground.tsx
index de5eb55bf..19dd558e0 100644
--- a/src/components/Option/Playground/Playground.tsx
+++ b/src/components/Option/Playground/Playground.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import { PlaygroundForm } from "./PlaygroundForm"
 import { PlaygroundChat } from "./PlaygroundChat"
 import { useMessageOption } from "@/hooks/useMessageOption"
@@ -15,6 +15,9 @@ import { ChevronDown } from "lucide-react"
 import { useStorage } from "@plasmohq/storage/hook"
 import { Storage } from "@plasmohq/storage"
 import { otherUnsupportedTypes } from "../Knowledge/utils/unsupported-types"
+import { useTheme } from "@/hooks/useTheme"
+
+
 export const Playground = () => {
   const drop = React.useRef<HTMLDivElement>(null)
   const [dropedFile, setDropedFile] = React.useState<File | undefined>()
@@ -25,6 +28,8 @@ export const Playground = () => {
     })
   })
 
+  const { themeName, getThemedSVGUri } = useTheme();
+
   const {
     selectedKnowledge,
     messages,
@@ -38,10 +43,20 @@ export const Playground = () => {
   const { containerRef, isAutoScrollToBottom, autoScrollToBottom } =
     useSmartScroll(messages, streaming, 120)
 
+  const [backgroundImage, setBackgroundImage] = useState(null);
+
   const [dropState, setDropState] = React.useState<
     "idle" | "dragging" | "error"
   >("idle")
 
+   React.useEffect(() => {
+    async function loadBackground() {
+      setBackgroundImage(getThemedSVGUri());
+    }
+    loadBackground();
+  }, [themeName]);
+  
+
   React.useEffect(() => {
     if (selectedKnowledge) {
       return
@@ -162,6 +177,12 @@ export const Playground = () => {
 
       <div
         ref={containerRef}
+        style={{
+          height: '100vh',
+          backgroundImage: backgroundImage ? `url("${backgroundImage}")` : 'none',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }}
         className="custom-scrollbar flex h-full w-full flex-col items-center overflow-x-hidden overflow-y-auto px-5 relative z-10">
         <PlaygroundChat />
       </div>
diff --git a/src/components/Option/Playground/PlaygroundForm.tsx b/src/components/Option/Playground/PlaygroundForm.tsx
index 242d57fdd..a6dca8bba 100644
--- a/src/components/Option/Playground/PlaygroundForm.tsx
+++ b/src/components/Option/Playground/PlaygroundForm.tsx
@@ -348,7 +348,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
           <div
             data-istemporary-chat={temporaryChat}
             data-checkwidemode={checkWideMode}
-            className={` bg-surface-50  dark:bg-surface-800 relative w-full max-w-[48rem] p-1 backdrop-blur-lg duration-100 border border-gray-300 rounded-t-xl  dark:border-[#404040] data-[istemporary-chat='true']:bg-surface-200 data-[istemporary-chat='true']:dark:bg-surface-900 data-[checkwidemode='true']:max-w-none`}>
+            className={`relative w-full max-w-[48rem] p-1 border rounded-t-xl backdrop-blur-lg bg-white/30 dark:bg-gray-800/30 border-gray-300 dark:border-[#404040] duration-100 data-[istemporary-chat='true']:bg-white/50 data-[istemporary-chat='true']:dark:bg-gray-900/50 data-[checkwidemode='true']:max-w-none`}>
             <div
               className={`border-b border-gray-200 dark:border-[#404040] relative ${
                 form.values.image.length === 0 ? "hidden" : "block"
diff --git a/src/components/Option/Settings/background-switcher.tsx b/src/components/Option/Settings/background-switcher.tsx
new file mode 100644
index 000000000..3232b35e8
--- /dev/null
+++ b/src/components/Option/Settings/background-switcher.tsx
@@ -0,0 +1,26 @@
+import { Select } from "antd"
+import { useTheme } from "@/hooks/useTheme"
+
+const { Option } = Select
+
+export function BackgroundSwitcher({ className }: { className?: string }) {
+  const { backgroundName, setBackground } = useTheme()
+
+  return (
+    <div className="flex flex-col ml-2">
+      <span className="text-gray-500">Background:</span>
+
+    <Select
+      value={backgroundName}
+      onChange={(value) => setBackground(value)}
+      style={{ width: 160 }}
+      className={`${className}`}
+    >
+      <Option value="plain">Plain</Option>
+      <Option value="blurryGradient">Blurry Gradient</Option>
+      <Option value="layeredWaves">Layered Waves</Option>
+      <Option value="blobScene">Blob Scene</Option>
+    </Select>
+    </div>
+  )
+}
diff --git a/src/components/Option/Settings/general-settings.tsx b/src/components/Option/Settings/general-settings.tsx
index 5cf4bdaca..9856ee8dd 100644
--- a/src/components/Option/Settings/general-settings.tsx
+++ b/src/components/Option/Settings/general-settings.tsx
@@ -11,6 +11,7 @@ import { SSTSettings } from "./sst-settings"
 import { BetaTag } from "@/components/Common/Beta"
 import { getDefaultOcrLanguage, ocrLanguages } from "@/data/ocr-language"
 import { ThemeSwitcher } from "./theme-switcher"
+import { BackgroundSwitcher } from "./background-switcher"
 
 export const GeneralSettings = () => {
   const [userChatBubble, setUserChatBubble] = useStorage("userChatBubble", true)
@@ -373,9 +374,10 @@ export const GeneralSettings = () => {
 
         <div className="flex flex-row items-center">
           <ThemeSwitcher />
+          <BackgroundSwitcher />
           <button
             onClick={toggleDarkMode}
-            className={`ml-2 inline-flex items-center rounded-md border border-transparent bg-surface-900 px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm  dark:bg-surface-50 dark:text-gray-800 disabled:opacity-50 `}>
+            className={`ml-2 inline-flex items-center rounded-md border border-transparent bg-surface-900 px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm  dark:bg-surface-50 dark:text-gray-800 disabled:opacity-50 mt-4`}>
             {mode === "dark" ? (
               <SunIcon className="w-4 h-4 mr-2" />
             ) : (
diff --git a/src/components/Option/Settings/theme-switcher.tsx b/src/components/Option/Settings/theme-switcher.tsx
index 1f863dae1..316fee479 100644
--- a/src/components/Option/Settings/theme-switcher.tsx
+++ b/src/components/Option/Settings/theme-switcher.tsx
@@ -7,15 +7,18 @@ export function ThemeSwitcher({ className }: { className?: string }) {
   const { themeName, setTheme } = useTheme()
 
   return (
-    <Select
-      value={themeName}
-      onChange={(value) => setTheme(value)}
-      style={{ width: 160 }}
-      className={`${className}`}
-    >
-      <Option value="default">Default</Option>
-      <Option value="moss">Moss</Option>
-      <Option value="commodore">Commodore</Option>
-    </Select>
+    <div className="flex flex-col">
+      <span className="text-gray-500">Color:</span>
+      <Select
+        value={themeName}
+        onChange={(value) => setTheme(value)}
+        style={{ width: 160 }}
+        className={`${className}`}
+      >
+        <Option value="default">Default</Option>
+        <Option value="moss">Moss</Option>
+        <Option value="commodore">Commodore</Option>
+      </Select>
+    </div>
   )
 }
diff --git a/src/components/Option/Sidebar.tsx b/src/components/Option/Sidebar.tsx
index 240ce12c6..430107713 100644
--- a/src/components/Option/Sidebar.tsx
+++ b/src/components/Option/Sidebar.tsx
@@ -389,7 +389,7 @@ export const Sidebar = ({
                     className={`flex py-2 px-2 items-center gap-3 relative rounded-md truncate hover:pr-4 group transition-opacity duration-300 ease-in-out border ${
                       historyId === chat.id
                         ? "bg-surface-200 dark:bg-[#454242] border-gray-400 dark:border-gray-600 text-gray-900 dark:text-gray-100"
-                        : "bg-surface-50 dark:bg-[#242424] dark:text-gray-100 text-gray-800 border-gray-300 dark:border-[#404040] hover:bg-surface-200 dark:hover:bg-surface-800"
+                        : "bg-surface-50 dark:bg-surface-900 dark:text-gray-100 text-gray-800 border-gray-300 dark:border-[#404040] hover:bg-surface-200 dark:hover:bg-surface-800"
                     }`}>
                     {chat?.message_source === "copilot" && (
                       <BotIcon className="size-3 text-gray-500 dark:text-gray-400" />
diff --git a/src/hooks/useTheme.tsx b/src/hooks/useTheme.tsx
index 519460a28..aff730265 100644
--- a/src/hooks/useTheme.tsx
+++ b/src/hooks/useTheme.tsx
@@ -1,11 +1,25 @@
 
 import { useEffect } from "react"
-import { themes, Theme } from "@/assets/colors"
+import { themes } from "@/assets/colors"
 import { useThemeStore } from "@/store/theme"
+import { TinyColor } from '@ctrl/tinycolor';
+import plainSVG from "@/assets/backgrounds/plain.svg?raw"; 
+import layeredWavesSVG from "@/assets/backgrounds/layered-waves.svg?raw"; 
+import blurryGradientSVG from "@/assets/backgrounds/blurry-gradient.svg?raw"; 
+import blobSceneSVG from "@/assets/backgrounds/blob-scene.svg?raw"; 
+
+
+import { useDarkMode } from "./useDarkmode";
+
+export type BackgroundType = "plain" | "blurryGradient" | "layeredWaves" | "blobScene"
 
 export function useTheme() {
   const themeName = useThemeStore((state) => state.themeName)
   const setTheme = useThemeStore((state) => state.setTheme)
+  const backgroundName = useThemeStore((state) => state.backgroundName)
+  const setBackground = useThemeStore((state) => state.setBackground)
+
+  const { mode } = useDarkMode()
 
   useEffect(() => {
     const themeObj = themes[themeName ?? "default"];
@@ -19,7 +33,96 @@ export function useTheme() {
     });
   }, [themeName]);
 
-  return { themeName, setTheme }
+  const generatePlain = () : string => {
+    const svgText = plainSVG
+
+    const customizedSVG = svgText
+      .replace(/{{color1}}/g, themes[themeName].surface[mode == "dark" ? 900: 200])
+
+    return customizedSVG
+  }
+
+  const generateLayeredWaves = () : string => {
+    const svgText = layeredWavesSVG
+
+    const color = new TinyColor(themes[themeName].primary[mode == "dark" ? 900: 200]);
+
+    const customizedSVG = svgText
+      .replace(/{{color1}}/g, themes[themeName].surface[mode == "dark" ? 900: 100])
+      .replace(/{{color2}}/g, color.clone().lighten(5).toHexString())
+      .replace(/{{color3}}/g, color.toHexString())
+      .replace(/{{color4}}/g, color.clone().spin(2).darken(5).toHexString())
+      .replace(/{{color5}}/g, color.clone().spin(-2).darken(7).toHexString())
+      .replace(/{{color6}}/g, color.clone().spin(2).darken(10).toHexString())
+
+    return customizedSVG
+  }
+
+  const generateBlobScene = () : string => {
+    const svgText = blobSceneSVG
+
+    const color = new TinyColor(themes[themeName].primary[mode == "dark" ? 800: 200]);
+
+    const customizedSVG = svgText
+      .replace(/{{color1}}/g, themes[themeName].surface[mode == "dark" ? 900: 100])
+      .replace(/{{color2}}/g, color.clone().lighten(5).toHexString())
+      .replace(/{{color3}}/g, color.toHexString())
+      .replace(/{{color4}}/g, color.clone().spin(3).darken(5).toHexString())
+      .replace(/{{color5}}/g, color.clone().spin(-2).darken(7).toHexString())
+      .replace(/{{color6}}/g, color.clone().spin(2).darken(4).toHexString())
+      .replace(/{{color7}}/g, color.clone().spin(-4).darken(3).toHexString())
+
+    return customizedSVG
+  }
+
+  const generateBlurryGradient = () : string => {
+    const svgText = blurryGradientSVG
+
+    const color = new TinyColor(themes[themeName].primary[mode == "dark" ? 800: 200]);
+
+    const customizedSVG = svgText
+      .replace(/{{color1}}/g, themes[themeName].surface[mode == "dark" ? 800: 100])
+      .replace(/{{color2}}/g, color.clone().lighten(7).toHexString())
+      .replace(/{{color3}}/g, color.toHexString())
+      .replace(/{{color4}}/g, color.clone().spin(2).lighten(3).toHexString())
+      .replace(/{{color5}}/g, color.clone().spin(-2).darken(3).toHexString())
+      .replace(/{{color6}}/g, color.clone().spin(2).lighten(7).toHexString())
+      .replace(/{{color7}}/g, color.clone().spin(-6).lighten(3).toHexString())
+
+    return customizedSVG;
+  }
+
+  const getThemedSVGUri = () : string => {
+    let customizedSVG = "";
+    switch(backgroundName){
+      case "blurryGradient":
+        customizedSVG = generateBlurryGradient();
+        break;
+      case "layeredWaves":
+        customizedSVG = generateLayeredWaves();
+        break;
+      case "blobScene":
+        customizedSVG = generateBlobScene();
+        break;
+      case "plain":
+        customizedSVG = generatePlain();
+        break;
+      default:
+        customizedSVG = generatePlain();
+        break;
+    }
+    return svgToDataURI(customizedSVG);
+  }
+
+  return { themeName, setTheme, backgroundName, setBackground, getThemedSVGUri }
+}
+
+function svgToDataURI(svgString) {
+  const encoded = encodeURIComponent(svgString)
+    .replace(/'/g, '%27')
+    .replace(/"/g, '%22');
+
+  return `data:image/svg+xml,${encoded}`;
 }
 
 // Utility: Convert hex to R, G, B (no alpha)
diff --git a/src/store/theme.tsx b/src/store/theme.tsx
index 4163ecfea..55eeebaf3 100644
--- a/src/store/theme.tsx
+++ b/src/store/theme.tsx
@@ -1,9 +1,13 @@
 import { create } from "zustand";
 import { Theme } from "@/assets/colors";
+import { BackgroundType } from "@/hooks/useTheme";
+export const backgroundTypes: BackgroundType[] = ["plain", "blurryGradient", "layeredWaves", "blobScene"]
 
 interface ThemeState {
   themeName: Theme;
   setTheme: (theme: Theme) => void;
+  backgroundName: BackgroundType;
+  setBackground: (background: BackgroundType) => void;
 }
 
 const getInitialTheme = (): Theme => {
@@ -11,10 +15,20 @@ const getInitialTheme = (): Theme => {
   return saved && ["default", "moss", "commodore"].includes(saved) ? saved : "default";
 };
 
+const getInitialBackground = (): BackgroundType => {
+  const saved = localStorage.getItem("backgroundName") as BackgroundType | null;
+  return saved && backgroundTypes.includes(saved) ? saved : "plain";
+};
+
 export const useThemeStore = create<ThemeState>((set) => ({
   themeName: getInitialTheme(),
   setTheme: (theme) => {
     localStorage.setItem("themeName", theme);
     set({ themeName: theme });
   },
+  backgroundName: getInitialBackground(),
+  setBackground: (background) => {
+    localStorage.setItem("backgroundName", background);
+    set({backgroundName: background})
+  }
 }));