diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/AddPresetModal.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/AddPresetModal.jsx
index ee015210a0a..d727c416c99 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/AddPresetModal.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/AddPresetModal.jsx
@@ -25,87 +25,105 @@ export default function AddPresetModal({ isOpen, onClose, onSave }) {
 
   return (
     <ModalWrapper isOpen={isOpen}>
-      <form
-        onSubmit={handleSubmit}
-        className="relative w-full max-w-2xl max-h-full"
-      >
-        <div className="relative bg-main-gradient rounded-lg shadow">
-          <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
-            <h3 className="text-xl font-semibold text-white">Add New Preset</h3>
-            <button
-              onClick={onClose}
-              type="button"
-              className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-            >
-              <X className="text-gray-300 text-lg" />
-            </button>
+      <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="w-full flex gap-x-2 items-center">
+            <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+              Add New Preset
+            </h3>
           </div>
-          <div className="p-6 space-y-6 flex h-full w-full">
-            <div className="w-full flex flex-col gap-y-4">
-              <div>
-                <label className="block mb-2 text-sm font-medium text-white">
-                  Command
-                </label>
-                <div className="flex items-center">
-                  <span className="text-white text-sm mr-2 font-bold">/</span>
+          <button
+            onClick={onClose}
+            type="button"
+            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
+          >
+            <X size={24} weight="bold" className="text-white" />
+          </button>
+        </div>
+        <div
+          className="h-full w-full overflow-y-auto"
+          style={{ maxHeight: "calc(100vh - 200px)" }}
+        >
+          <form onSubmit={handleSubmit}>
+            <div className="py-7 px-9 space-y-2 flex-col">
+              <div className="w-full flex flex-col gap-y-4">
+                <div>
+                  <label
+                    htmlFor="command"
+                    className="block mb-2 text-sm font-medium text-white"
+                  >
+                    Command
+                  </label>
+                  <div className="flex items-center">
+                    <span className="text-white text-sm mr-2 font-bold">/</span>
+                    <input
+                      name="command"
+                      type="text"
+                      id="command"
+                      placeholder="your-command"
+                      value={command}
+                      onChange={handleCommandChange}
+                      maxLength={25}
+                      autoComplete="off"
+                      required={true}
+                      className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                    />
+                  </div>
+                </div>
+                <div>
+                  <label
+                    htmlFor="prompt"
+                    className="block mb-2 text-sm font-medium text-white"
+                  >
+                    Prompt
+                  </label>
+                  <textarea
+                    name="prompt"
+                    id="prompt"
+                    autoComplete="off"
+                    placeholder="This is the content that will be injected in front of your prompt."
+                    required={true}
+                    className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                  ></textarea>
+                </div>
+                <div>
+                  <label
+                    htmlFor="description"
+                    className="block mb-2 text-sm font-medium text-white"
+                  >
+                    Description
+                  </label>
                   <input
-                    name="command"
                     type="text"
-                    placeholder="your-command"
-                    value={command}
-                    onChange={handleCommandChange}
-                    maxLength={25}
+                    name="description"
+                    id="description"
+                    placeholder="Responds with a poem about LLMs."
+                    maxLength={80}
                     autoComplete="off"
                     required={true}
-                    className="border-none bg-zinc-900 placeholder:text-theme-settings-input-placeholder border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                    className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   />
                 </div>
               </div>
-              <div>
-                <label className="block mb-2 text-sm font-medium text-white">
-                  Prompt
-                </label>
-                <textarea
-                  name="prompt"
-                  autoComplete="off"
-                  placeholder="This is the content that will be injected in front of your prompt."
-                  required={true}
-                  className="border-none bg-zinc-900 placeholder:text-theme-settings-input-placeholder border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-                ></textarea>
-              </div>
-              <div>
-                <label className="border-none block mb-2 text-sm font-medium text-white">
-                  Description
-                </label>
-                <input
-                  type="text"
-                  name="description"
-                  placeholder="Responds with a poem about LLMs."
-                  maxLength={80}
-                  autoComplete="off"
-                  required={true}
-                  className="border-none bg-zinc-900 placeholder:text-theme-settings-input-placeholder border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-                />
-              </div>
             </div>
-          </div>
-          <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
-            <button
-              onClick={onClose}
-              type="button"
-              className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300"
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-            >
-              Save
-            </button>
-          </div>
+            <div className="flex w-full justify-end items-center p-6 space-x-2 border-t border-theme-modal-border rounded-b">
+              <button
+                onClick={onClose}
+                type="button"
+                className="transition-all duration-300 bg-transparent text-white hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+              >
+                Save
+              </button>
+            </div>
+          </form>
         </div>
-      </form>
+      </div>
     </ModalWrapper>
   );
 }
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/EditPresetModal.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/EditPresetModal.jsx
index 4f08fac2013..6715cbe20b9 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/EditPresetModal.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/EditPresetModal.jsx
@@ -47,105 +47,109 @@ export default function EditPresetModal({
 
   return (
     <ModalWrapper isOpen={isOpen}>
-      <form
-        onSubmit={handleSubmit}
-        className="relative w-full max-w-2xl max-h-full"
-      >
-        <div className="relative bg-main-gradient rounded-lg shadow">
-          <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
-            <h3 className="text-xl font-semibold text-white">Edit Preset</h3>
-            <button
-              onClick={onClose}
-              type="button"
-              className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-            >
-              <X className="text-gray-300 text-lg" />
-            </button>
+      <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="w-full flex gap-x-2 items-center">
+            <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+              Edit Preset
+            </h3>
           </div>
-          <div className="p-6 space-y-6 flex h-full w-full">
-            <div className="w-full flex flex-col gap-y-4">
-              <div>
-                <label
-                  htmlFor="command"
-                  className="block mb-2 text-sm font-medium text-white"
-                >
-                  Command
-                </label>
-                <div className="flex items-center">
-                  <span className="text-white text-sm mr-2 font-bold">/</span>
+          <button
+            onClick={onClose}
+            type="button"
+            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
+          >
+            <X size={24} weight="bold" className="text-white" />
+          </button>
+        </div>
+        <div
+          className="h-full w-full overflow-y-auto"
+          style={{ maxHeight: "calc(100vh - 200px)" }}
+        >
+          <form onSubmit={handleSubmit}>
+            <div className="py-7 px-9 space-y-2 flex-col">
+              <div className="w-full flex flex-col gap-y-4">
+                <div>
+                  <label
+                    htmlFor="command"
+                    className="block mb-2 text-sm font-medium text-white"
+                  >
+                    Command
+                  </label>
+                  <div className="flex items-center">
+                    <span className="text-white text-sm mr-2 font-bold">/</span>
+                    <input
+                      type="text"
+                      name="command"
+                      placeholder="your-command"
+                      value={command}
+                      onChange={handleCommandChange}
+                      required={true}
+                      className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                    />
+                  </div>
+                </div>
+                <div>
+                  <label
+                    htmlFor="prompt"
+                    className="block mb-2 text-sm font-medium text-white"
+                  >
+                    Prompt
+                  </label>
+                  <textarea
+                    name="prompt"
+                    placeholder="This is a test prompt. Please respond with a poem about LLMs."
+                    defaultValue={preset.prompt}
+                    required={true}
+                    className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                  ></textarea>
+                </div>
+                <div>
+                  <label
+                    htmlFor="description"
+                    className="block mb-2 text-sm font-medium text-white"
+                  >
+                    Description
+                  </label>
                   <input
                     type="text"
-                    name="command"
-                    placeholder="your-command"
-                    value={command}
-                    onChange={handleCommandChange}
+                    name="description"
+                    defaultValue={preset.description}
+                    placeholder="Responds with a poem about LLMs."
                     required={true}
-                    className="border-none bg-zinc-900 placeholder:text-theme-settings-input-placeholder border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                    className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   />
                 </div>
               </div>
-              <div>
-                <label
-                  htmlFor="prompt"
-                  className="block mb-2 text-sm font-medium text-white"
-                >
-                  Prompt
-                </label>
-                <textarea
-                  name="prompt"
-                  placeholder="This is a test prompt. Please respond with a poem about LLMs."
-                  defaultValue={preset.prompt}
-                  required={true}
-                  className="border-none bg-zinc-900 placeholder:text-theme-settings-input-placeholder border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-                ></textarea>
-              </div>
-              <div>
-                <label
-                  htmlFor="description"
-                  className="block mb-2 text-sm font-medium text-white"
-                >
-                  Description
-                </label>
-                <input
-                  type="text"
-                  name="description"
-                  defaultValue={preset.description}
-                  placeholder="Responds with a poem about LLMs."
-                  required={true}
-                  className="border-none bg-zinc-900 placeholder:text-theme-settings-input-placeholder border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-                />
-              </div>
             </div>
-          </div>
-          <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
-            <div className="flex flex-col space-y-2">
+            <div className="flex w-full justify-between items-center p-6 space-x-2 border-t border-theme-modal-border rounded-b">
               <button
                 disabled={deleting}
                 onClick={handleDelete}
                 type="button"
-                className="px-4 py-2 rounded-lg text-red-500 hover:bg-red-500/25 transition-all duration-300 disabled:opacity-50"
+                className="transition-all duration-300 bg-transparent text-red-500 hover:bg-red-500/25 px-4 py-2 rounded-lg text-sm disabled:opacity-50"
               >
                 {deleting ? "Deleting..." : "Delete Preset"}
               </button>
+              <div className="flex space-x-2">
+                <button
+                  onClick={onClose}
+                  type="button"
+                  className="transition-all duration-300 bg-transparent text-white hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+                >
+                  Save
+                </button>
+              </div>
             </div>
-            <div className="flex space-x-2">
-              <button
-                onClick={onClose}
-                type="button"
-                className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300"
-              >
-                Cancel
-              </button>
-              <button
-                type="submit"
-                className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-              >
-                Save
-              </button>
-            </div>
-          </div>
+          </form>
         </div>
-      </form>
+      </div>
     </ModalWrapper>
   );
 }