diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
index ee6155ab2c..29d346333e 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
@@ -10,7 +10,6 @@ import {
   WarningOctagon,
   X,
 } from "@phosphor-icons/react";
-import { humanFileSize } from "@/utils/numbers";
 import { REMOVE_ATTACHMENT_EVENT } from "../../DnDWrapper";
 import { Tooltip } from "react-tooltip";
 
@@ -21,7 +20,7 @@ import { Tooltip } from "react-tooltip";
 export default function AttachmentManager({ attachments }) {
   if (attachments.length === 0) return null;
   return (
-    <div className="flex flex-wrap mt-4 mb-2 gap-y-2 gap-x-[0.5px]">
+    <div className="flex flex-wrap gap-2 mt-2 mb-4">
       {attachments.map((attachment) => (
         <AttachmentItem key={attachment.uid} attachment={attachment} />
       ))}
@@ -45,21 +44,22 @@ function AttachmentItem({ attachment }) {
 
   if (status === "in_progress") {
     return (
-      <div
-        className={`h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 light:bg-theme-bg-sidebar border border-white/20 w-[200px]`}
-      >
+      <div className="relative flex items-center gap-x-1 rounded-lg bg-theme-attachment-bg border-none w-[180px] group">
         <div
-          className={`${iconBgColor} rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
+          className={`bg-theme-attachment-icon-spinner-bg rounded-md flex items-center justify-center flex-shrink-0 h-[32px] w-[32px] m-1`}
         >
           <CircleNotch
-            size={30}
-            className="text-white light:text-white animate-spin"
+            size={18}
+            weight="bold"
+            className="text-theme-attachment-icon-spinner animate-spin"
           />
         </div>
-        <div className="flex flex-col w-[130px]">
-          <p className="text-white text-xs font-medium truncate">{file.name}</p>
-          <p className="text-white/60 text-xs font-medium">
-            {humanFileSize(file.size)}
+        <div className="flex flex-col w-[125px]">
+          <p className="text-theme-attachment-text text-xs font-semibold truncate">
+            {file.name}
+          </p>
+          <p className="text-theme-attachment-text-secondary text-[10px] leading-[14px] font-medium">
+            Uploading...
           </p>
         </div>
       </div>
@@ -72,29 +72,28 @@ function AttachmentItem({ attachment }) {
         <div
           data-tooltip-id={`attachment-uid-${uid}-error`}
           data-tooltip-content={error}
-          className={`relative h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-error/40 light:bg-error/30 border border-transparent w-[200px] group`}
+          className={`relative flex items-center gap-x-1 rounded-lg bg-theme-attachment-error-bg border-transparent w-[180px] group`}
         >
           <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
             <button
               onClick={removeFileFromQueue}
               type="button"
-              className="light:bg-white bg-zinc-700 hover:light:text-white hover:light:bg-red-400 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
+              className="bg-white hover:bg-error hover:text-theme-attachment-text rounded-full p-1 flex items-center justify-center hover:border-transparent border border-theme-attachment-bg"
             >
               <X size={10} className="flex-shrink-0" />
             </button>
           </div>
           <div
-            className={`bg-error rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
+            className={`bg-error rounded-md flex items-center justify-center flex-shrink-0 h-[32px] w-[32px] m-1`}
           >
-            <WarningOctagon size={30} className="text-white light:text-white" />
+            <WarningOctagon size={24} className="text-theme-attachment-icon" />
           </div>
-          <div className="flex flex-col w-[130px]">
-            <p className="text-white light:text-red-600 text-xs font-medium truncate">
+          <div className="flex flex-col w-[125px]">
+            <p className="text-theme-attachment-text text-xs font-semibold truncate">
               {file.name}
             </p>
-            <p className="text-red-100 light:text-red-600 text-xs truncate">
-              {error ?? "this file failed to upload"}. It will not be available
-              in the workspace.
+            <p className="text-theme-attachment-text-secondary text-[10px] leading-[14px] font-medium truncate">
+              {error ?? "File not embedded!"}
             </p>
           </div>
         </div>
@@ -114,34 +113,35 @@ function AttachmentItem({ attachment }) {
         <div
           data-tooltip-id={`attachment-uid-${uid}-success`}
           data-tooltip-content={`${file.name} will be attached to this prompt. It will not be embedded into the workspace permanently.`}
-          className={`relative h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 light:bg-theme-bg-sidebar border border-white/20 w-[200px] group`}
+          className={`relative flex items-center gap-x-1 rounded-lg bg-theme-attachment-success-bg border border-white/20 w-[180px] group`}
         >
           <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
             <button
               onClick={removeFileFromQueue}
               type="button"
-              className="bg-zinc-700 light:bg-white hover:light:text-white hover:light:bg-red-400 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
+              className="bg-white hover:bg-error hover:text-theme-attachment-text rounded-full p-1 flex items-center justify-center hover:border-transparent border border-theme-attachment-bg"
             >
               <X size={10} className="flex-shrink-0" />
             </button>
           </div>
           {contentString ? (
             <img
+              alt={`Preview of ${file.name}`}
               src={contentString}
-              className={`${iconBgColor} w-[30px] h-[30px] rounded-lg flex items-center justify-center`}
+              className={`${iconBgColor} w-[30px] h-[30px] rounded-lg flex items-center justify-center m-1`}
             />
           ) : (
             <div
-              className={`${iconBgColor} rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
+              className={`${iconBgColor} rounded-md flex items-center justify-center flex-shrink-0 h-[32px] w-[32px] m-1`}
             >
-              <Icon size={30} className="text-white light:text-white" />
+              <Icon size={24} className="text-theme-attachment-icon" />
             </div>
           )}
-          <div className="flex flex-col w-[130px]">
-            <p className="text-white text-xs font-medium truncate">
+          <div className="flex flex-col w-[125px]">
+            <p className="text-theme-attachment-text text-xs font-semibold truncate">
               {file.name}
             </p>
-            <p className="text-white/80 light:text-black/80 text-xs font-medium">
+            <p className="text-theme-attachment-text-secondary text-[10px] leading-[14px] font-medium">
               Image attached!
             </p>
           </div>
@@ -161,25 +161,31 @@ function AttachmentItem({ attachment }) {
       <div
         data-tooltip-id={`attachment-uid-${uid}-success`}
         data-tooltip-content={`${file.name} was uploaded and embedded into this workspace. It will be available for RAG chat now.`}
-        className={`relative h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 light:bg-theme-bg-sidebar border border-white/20 w-[200px] group`}
+        className={`relative flex items-center gap-x-1 rounded-lg bg-theme-attachment-bg border-none w-[180px] group`}
       >
         <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
           <button
             onClick={removeFileFromQueue}
             type="button"
-            className="bg-zinc-700 light:bg-white hover:light:text-white hover:light:bg-red-400 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
+            className="bg-white hover:bg-error hover:text-theme-attachment-text rounded-full p-1 flex items-center justify-center hover:border-transparent border border-theme-attachment-bg"
           >
             <X size={10} className="flex-shrink-0" />
           </button>
         </div>
         <div
-          className={`${iconBgColor} rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
+          className={`${iconBgColor} rounded-md flex items-center justify-center flex-shrink-0 h-[32px] w-[32px] m-1`}
         >
-          <Icon size={30} className="text-white light:text-white" />
+          <Icon
+            size={24}
+            weight="light"
+            className="text-theme-attachment-icon"
+          />
         </div>
-        <div className="flex flex-col w-[130px]">
-          <p className="text-white text-xs font-medium truncate">{file.name}</p>
-          <p className="text-white/80 light:text-black/80 text-xs font-medium">
+        <div className="flex flex-col w-[125px]">
+          <p className="text-white text-xs font-semibold truncate">
+            {file.name}
+          </p>
+          <p className="text-theme-attachment-text-secondary text-[10px] leading-[14px] font-medium">
             File embedded!
           </p>
         </div>
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
index fa1f08530e..14c1b17347 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
@@ -256,9 +256,9 @@ export default function PromptInput({
         className="flex flex-col gap-y-1 rounded-t-lg md:w-3/4 w-full mx-auto max-w-xl items-center"
       >
         <div className="flex items-center rounded-lg md:mb-4 md:w-full">
-          <div className="w-[95vw] md:w-[635px] bg-theme-bg-chat-input light:bg-white light:border-solid light:border-[1px] light:border-theme-chat-input-border shadow-sm rounded-2xl flex flex-col px-4 overflow-hidden">
+          <div className="w-[95vw] md:w-[635px] bg-theme-bg-chat-input light:bg-white light:border-solid light:border-[1px] light:border-theme-chat-input-border shadow-sm rounded-2xl flex flex-col px-2 overflow-hidden">
             <AttachmentManager attachments={attachments} />
-            <div className="flex items-center w-full border-b-2 border-theme-chat-input-border">
+            <div className="flex items-center border-b border-theme-chat-input-border mx-3">
               <textarea
                 ref={textareaRef}
                 onChange={handleChange}
@@ -311,7 +311,7 @@ export default function PromptInput({
                 </>
               )}
             </div>
-            <div className="flex justify-between py-3.5">
+            <div className="flex justify-between py-3.5 mx-3 mb-1">
               <div className="flex gap-x-2">
                 <AttachItem />
                 <SlashCommandsButton
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 38ddf1a158..7c9c547dce 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -85,6 +85,15 @@
 
   --theme-home-button-secondary-border: #acc1e6;
   --theme-home-button-secondary-border-hover: #293056;
+
+  --theme-attachment-bg: #18191a;
+  --theme-attachment-error-bg: rgba(180, 35, 24, 0.4);
+  --theme-attachment-success-bg: #18191a;
+  --theme-attachment-text: #ffffff;
+  --theme-attachment-text-secondary: rgba(255, 255, 255, 0.8);
+  --theme-attachment-icon: #ffffff;
+  --theme-attachment-icon-spinner: #ffffff;
+  --theme-attachment-icon-spinner-bg: #27282a;
 }
 
 [data-theme="light"] {
@@ -167,6 +176,17 @@
   --theme-checklist-button-text: #0ba5ec;
   --theme-checklist-button-hover-bg: rgba(11, 165, 236, 0.1);
   --theme-checklist-button-hover-border: rgba(11, 165, 236, 0.8);
+
+  --theme-home-button-secondary-border-hover: #293056;
+
+  --theme-attachment-bg: #edf2fa;
+  --theme-attachment-error-bg: rgba(180, 35, 24, 0.3);
+  --theme-attachment-success-bg: #eaeaea;
+  --theme-attachment-text: #0e0f0f;
+  --theme-attachment-text-secondary: rgba(0, 0, 0, 0.8);
+  --theme-attachment-icon: #ffffff;
+  --theme-attachment-icon-spinner: #7cd4fd;
+  --theme-attachment-icon-spinner-bg: #ffffff;
 }
 
 [data-theme="light"] .text-white {
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index fec041ba3d..b9cc37fe4a 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -100,6 +100,16 @@ export default {
           "file-picker": {
             hover: 'var(--theme-file-picker-hover)',
           },
+          attachment: {
+            bg: 'var(--theme-attachment-bg)',
+            'error-bg': 'var(--theme-attachment-error-bg)',
+            'success-bg': 'var(--theme-attachment-success-bg)',
+            text: 'var(--theme-attachment-text)',
+            'text-secondary': 'var(--theme-attachment-text-secondary)',
+            'icon': 'var(--theme-attachment-icon)',
+            'icon-spinner': 'var(--theme-attachment-icon-spinner)',
+            'icon-spinner-bg': 'var(--theme-attachment-icon-spinner-bg)',
+          },
           home: {
             text: 'var(--theme-home-text)',
             "text-secondary": 'var(--theme-home-text-secondary)',