diff --git a/frontend-web/src/components/ai-elements/artifact.tsx b/frontend-web/src/components/ai-elements/artifact.tsx
index b5e89bd7..3acfc5c1 100644
--- a/frontend-web/src/components/ai-elements/artifact.tsx
+++ b/frontend-web/src/components/ai-elements/artifact.tsx
@@ -16,7 +16,7 @@ export type ArtifactProps = HTMLAttributes<HTMLDivElement>;
 export const Artifact = ({ className, ...props }: ArtifactProps) => (
   <div
     className={cn(
-      "flex flex-col overflow-hidden rounded-[1.35rem] border border-[#ece7dd] bg-white shadow-[0_24px_60px_-28px_rgba(15,23,42,0.16)] ring-1 ring-black/3",
+      "flex flex-col overflow-hidden rounded-[1.35rem] border border-border bg-background shadow-[0_24px_60px_-28px_rgba(15,23,42,0.16)] ring-1 ring-black/3",
       className,
     )}
     {...props}
@@ -31,7 +31,7 @@ export const ArtifactHeader = ({
 }: ArtifactHeaderProps) => (
   <div
     className={cn(
-      "flex items-center justify-between border-b border-[#efe9de] bg-white px-4 py-3",
+      "flex items-center justify-between border-b border-border bg-background px-4 py-3",
       className,
     )}
     {...props}
@@ -147,7 +147,7 @@ export const ArtifactContent = forwardRef<HTMLDivElement, ArtifactContentProps>(
     <div
       ref={ref}
       className={cn(
-        "min-h-0 flex-1 overflow-auto bg-white p-4",
+        "min-h-0 flex-1 overflow-auto bg-background p-4",
         className,
       )}
       {...props}
diff --git a/frontend-web/src/components/workspace/chats/chat-box.tsx b/frontend-web/src/components/workspace/chats/chat-box.tsx
index 9af9b39d..2a417145 100644
--- a/frontend-web/src/components/workspace/chats/chat-box.tsx
+++ b/frontend-web/src/components/workspace/chats/chat-box.tsx
@@ -362,14 +362,14 @@ const ChatBox: React.FC<{ children: React.ReactNode; threadId: string }> = ({
       />
       <ResizablePanel
         className={cn(
-          "bg-[#fffdfa] transition-all duration-300 ease-in-out",
+          "bg-background transition-all duration-300 ease-in-out",
           !sidePanelOpen && "opacity-0",
         )}
         id="artifacts"
       >
         <div
           className={cn(
-            "h-full bg-[#fffdfa] p-4 transition-transform duration-300 ease-in-out",
+            "h-full bg-background p-4 transition-transform duration-300 ease-in-out",
             sidePanelOpen ? "translate-x-0" : "translate-x-full",
           )}
         >