From 377178531f5f38bb142f6faece4f06424749fec9 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 26 Jun 2024 16:16:42 -0700
Subject: [PATCH 1/7] fix indentation of citations

---
 .../WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx
index de4c4f72d7a..4a4e12b1c27 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx
@@ -57,7 +57,7 @@ export default function Citations({ sources = [] }) {
         />
       </button>
       {open && (
-        <div className="flex flex-wrap md:flex-row flex-col md:items-center gap-4 overflow-x-scroll mt-1 doc__source">
+        <div className="flex flex-wrap md:flex-row md:items-center gap-4 overflow-x-scroll mt-1 doc__source ml-14">
           {combineLikeSources(sources).map((source) => (
             <Citation
               key={v4()}

From c8f318fb379d650c908b243abdede80207d16264 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 26 Jun 2024 16:54:53 -0700
Subject: [PATCH 2/7] fix outlines of input fields to be consistent

---
 .../AzureAiOptions/index.jsx                   |  6 +++---
 .../EmbeddingSelection/CohereOptions/index.jsx |  2 +-
 .../GenericOpenAiOptions/index.jsx             |  8 ++++----
 .../LMStudioOptions/index.jsx                  |  4 ++--
 .../LiteLLMOptions/index.jsx                   |  6 +++---
 .../LocalAiOptions/index.jsx                   |  6 +++---
 .../EmbeddingSelection/OllamaOptions/index.jsx |  4 ++--
 .../EmbeddingSelection/OpenAiOptions/index.jsx |  2 +-
 .../VoyageAiOptions/index.jsx                  |  2 +-
 .../LLMSelection/AnthropicAiOptions/index.jsx  |  2 +-
 .../LLMSelection/AzureAiOptions/index.jsx      | 10 +++++-----
 .../LLMSelection/CohereAiOptions/index.jsx     |  2 +-
 .../LLMSelection/GeminiLLMOptions/index.jsx    |  2 +-
 .../GenericOpenAiOptions/index.jsx             | 10 +++++-----
 .../LLMSelection/GroqAiOptions/index.jsx       |  2 +-
 .../LLMSelection/HuggingFaceOptions/index.jsx  |  6 +++---
 .../LLMSelection/KoboldCPPOptions/index.jsx    |  4 ++--
 .../LLMSelection/LMStudioOptions/index.jsx     |  4 ++--
 .../LLMSelection/LiteLLMOptions/index.jsx      |  6 +++---
 .../LLMSelection/LocalAiOptions/index.jsx      |  6 +++---
 .../LLMSelection/MistralOptions/index.jsx      |  2 +-
 .../LLMSelection/NativeLLMOptions/index.jsx    |  2 +-
 .../LLMSelection/OllamaLLMOptions/index.jsx    |  4 ++--
 .../LLMSelection/OpenAiOptions/index.jsx       |  2 +-
 .../LLMSelection/OpenRouterOptions/index.jsx   |  2 +-
 .../LLMSelection/PerplexityOptions/index.jsx   |  2 +-
 .../LLMSelection/TextGenWebUIOptions/index.jsx |  6 +++---
 .../LLMSelection/TogetherAiOptions/index.jsx   |  2 +-
 .../Modals/DisplayRecoveryCodeModal/index.jsx  |  2 +-
 .../Connectors/Confluence/index.jsx            |  6 +++---
 .../DataConnectors/Connectors/Github/index.jsx |  6 +++---
 .../Connectors/WebsiteDepth/index.jsx          |  6 +++---
 .../Connectors/Youtube/index.jsx               |  2 +-
 .../ManageWorkspace/DataConnectors/index.jsx   |  2 +-
 .../src/components/Modals/NewWorkspace.jsx     |  2 +-
 .../Modals/Password/MultiUserAuth.jsx          |  6 +++---
 .../Modals/Password/SingleUserAuth.jsx         |  2 +-
 .../TextToSpeech/ElevenLabsOptions/index.jsx   |  2 +-
 .../TextToSpeech/OpenAiOptions/index.jsx       |  2 +-
 .../OpenAiOptions/index.jsx                    |  2 +-
 .../VectorDBSelection/AstraDBOptions/index.jsx |  4 ++--
 .../ChromaDBOptions/index.jsx                  |  6 +++---
 .../MilvusDBOptions/index.jsx                  |  6 +++---
 .../PineconeDBOptions/index.jsx                |  4 ++--
 .../QDrantDBOptions/index.jsx                  |  4 ++--
 .../WeaviateDBOptions/index.jsx                |  4 ++--
 .../ZillizCloudOptions/index.jsx               |  4 ++--
 .../PromptInput/StopGenerationButton/index.jsx |  4 ++--
 .../NewConnectionModal.jsx                     | 14 +++++++-------
 .../SearchProviderOptions/index.jsx            | 12 ++++++------
 .../Admin/Agents/WebSearchSelection/index.jsx  |  6 +++---
 .../FooterCustomization/NewIconForm/index.jsx  |  4 ++--
 .../GeneralSettings/AudioPreference/stt.jsx    |  6 +++---
 .../GeneralSettings/AudioPreference/tts.jsx    |  6 +++---
 .../EmbedRow/CodeSnippetModal/index.jsx        |  2 +-
 .../EmbedConfigs/NewEmbedModal/index.jsx       |  4 ++--
 .../EmbeddingPreference/index.jsx              |  6 +++---
 .../EmbeddingTextSplitterPreference/index.jsx  |  6 +++---
 .../GeneralSettings/LLMPreference/index.jsx    |  6 +++---
 .../pages/GeneralSettings/Security/index.jsx   |  6 +++---
 .../TranscriptionPreference/index.jsx          |  6 +++---
 .../GeneralSettings/VectorDatabase/index.jsx   |  6 +++---
 .../Steps/LLMPreference/index.jsx              |  2 +-
 .../OnboardingFlow/Steps/UserSetup/index.jsx   |  6 +++---
 .../AgentLLMSelection/AgentLLMItem/index.jsx   |  2 +-
 .../AgentConfig/AgentLLMSelection/index.jsx    |  6 +++---
 .../AgentConfig/WebSearchSelection/index.jsx   |  6 +++---
 .../WorkspaceLLMItem/index.jsx                 |  2 +-
 .../WorkspaceLLMSelection/index.jsx            |  6 +++---
 .../Members/AddMemberModal/index.jsx           |  2 +-
 frontend/tailwind.config.js                    | 18 +++++++++---------
 71 files changed, 166 insertions(+), 166 deletions(-)

diff --git a/frontend/src/components/EmbeddingSelection/AzureAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/AzureAiOptions/index.jsx
index 209c0aa21f3..c46be12e0a2 100644
--- a/frontend/src/components/EmbeddingSelection/AzureAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/AzureAiOptions/index.jsx
@@ -9,7 +9,7 @@ export default function AzureAiOptions({ settings }) {
           <input
             type="url"
             name="AzureOpenAiEndpoint"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="https://my-azure.openai.azure.com"
             defaultValue={settings?.AzureOpenAiEndpoint}
             required={true}
@@ -25,7 +25,7 @@ export default function AzureAiOptions({ settings }) {
           <input
             type="password"
             name="AzureOpenAiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Azure OpenAI API Key"
             defaultValue={settings?.AzureOpenAiKey ? "*".repeat(20) : ""}
             required={true}
@@ -41,7 +41,7 @@ export default function AzureAiOptions({ settings }) {
           <input
             type="text"
             name="AzureOpenAiEmbeddingModelPref"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Azure OpenAI embedding model deployment name"
             defaultValue={settings?.AzureOpenAiEmbeddingModelPref}
             required={true}
diff --git a/frontend/src/components/EmbeddingSelection/CohereOptions/index.jsx b/frontend/src/components/EmbeddingSelection/CohereOptions/index.jsx
index 7cb09237409..9274a6b7093 100644
--- a/frontend/src/components/EmbeddingSelection/CohereOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/CohereOptions/index.jsx
@@ -9,7 +9,7 @@ export default function CohereEmbeddingOptions({ settings }) {
           <input
             type="password"
             name="CohereApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Cohere API Key"
             defaultValue={settings?.CohereApiKey ? "*".repeat(20) : ""}
             required={true}
diff --git a/frontend/src/components/EmbeddingSelection/GenericOpenAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/GenericOpenAiOptions/index.jsx
index 8d4870f0700..dc10c51b710 100644
--- a/frontend/src/components/EmbeddingSelection/GenericOpenAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/GenericOpenAiOptions/index.jsx
@@ -9,7 +9,7 @@ export default function GenericOpenAiEmbeddingOptions({ settings }) {
           <input
             type="url"
             name="EmbeddingBasePath"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="https://api.openai.com/v1"
             defaultValue={settings?.EmbeddingBasePath}
             required={true}
@@ -24,7 +24,7 @@ export default function GenericOpenAiEmbeddingOptions({ settings }) {
           <input
             type="text"
             name="EmbeddingModelPref"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="text-embedding-ada-002"
             defaultValue={settings?.EmbeddingModelPref}
             required={true}
@@ -39,7 +39,7 @@ export default function GenericOpenAiEmbeddingOptions({ settings }) {
           <input
             type="number"
             name="EmbeddingModelMaxChunkLength"
-            className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="8192"
             min={1}
             onScroll={(e) => e.target.blur()}
@@ -59,7 +59,7 @@ export default function GenericOpenAiEmbeddingOptions({ settings }) {
           <input
             type="password"
             name="GenericOpenAiEmbeddingApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="sk-mysecretkey"
             defaultValue={
               settings?.GenericOpenAiEmbeddingApiKey ? "*".repeat(20) : ""
diff --git a/frontend/src/components/EmbeddingSelection/LMStudioOptions/index.jsx b/frontend/src/components/EmbeddingSelection/LMStudioOptions/index.jsx
index 8a18fb999eb..dc1151d8c41 100644
--- a/frontend/src/components/EmbeddingSelection/LMStudioOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/LMStudioOptions/index.jsx
@@ -38,7 +38,7 @@ export default function LMStudioEmbeddingOptions({ settings }) {
           <input
             type="number"
             name="EmbeddingModelMaxChunkLength"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="8192"
             min={1}
             value={maxChunkLength}
@@ -94,7 +94,7 @@ export default function LMStudioEmbeddingOptions({ settings }) {
             <input
               type="url"
               name="EmbeddingBasePath"
-              className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+              className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
               placeholder="http://localhost:1234/v1"
               value={basePathValue.value}
               required={true}
diff --git a/frontend/src/components/EmbeddingSelection/LiteLLMOptions/index.jsx b/frontend/src/components/EmbeddingSelection/LiteLLMOptions/index.jsx
index d5586c883df..e6263a4e3f2 100644
--- a/frontend/src/components/EmbeddingSelection/LiteLLMOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/LiteLLMOptions/index.jsx
@@ -19,7 +19,7 @@ export default function LiteLLMOptions({ settings }) {
           <input
             type="url"
             name="LiteLLMBasePath"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="http://127.0.0.1:4000"
             defaultValue={settings?.LiteLLMBasePath}
             required={true}
@@ -41,7 +41,7 @@ export default function LiteLLMOptions({ settings }) {
           <input
             type="number"
             name="EmbeddingModelMaxChunkLength"
-            className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="8192"
             min={1}
             onScroll={(e) => e.target.blur()}
@@ -61,7 +61,7 @@ export default function LiteLLMOptions({ settings }) {
           <input
             type="password"
             name="LiteLLMAPIKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="sk-mysecretkey"
             defaultValue={settings?.LiteLLMAPIKey ? "*".repeat(20) : ""}
             autoComplete="off"
diff --git a/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
index 8c611cd31ae..97462941f5e 100644
--- a/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
@@ -19,7 +19,7 @@ export default function LocalAiOptions({ settings }) {
           <input
             type="url"
             name="EmbeddingBasePath"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="http://localhost:8080/v1"
             defaultValue={settings?.EmbeddingBasePath}
             onChange={(e) => setBasePathValue(e.target.value)}
@@ -41,7 +41,7 @@ export default function LocalAiOptions({ settings }) {
           <input
             type="number"
             name="EmbeddingModelMaxChunkLength"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="1000"
             min={1}
             onScroll={(e) => e.target.blur()}
@@ -62,7 +62,7 @@ export default function LocalAiOptions({ settings }) {
           <input
             type="password"
             name="LocalAiApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="sk-mysecretkey"
             defaultValue={settings?.LocalAiApiKey ? "*".repeat(20) : ""}
             autoComplete="off"
diff --git a/frontend/src/components/EmbeddingSelection/OllamaOptions/index.jsx b/frontend/src/components/EmbeddingSelection/OllamaOptions/index.jsx
index fca1ae7553f..99c4ca7a4a6 100644
--- a/frontend/src/components/EmbeddingSelection/OllamaOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/OllamaOptions/index.jsx
@@ -41,7 +41,7 @@ export default function OllamaEmbeddingOptions({ settings }) {
           <input
             type="number"
             name="EmbeddingModelMaxChunkLength"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="8192"
             min={1}
             value={maxChunkLength}
@@ -97,7 +97,7 @@ export default function OllamaEmbeddingOptions({ settings }) {
             <input
               type="url"
               name="EmbeddingBasePath"
-              className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+              className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
               placeholder="http://127.0.0.1:11434"
               value={basePathValue.value}
               required={true}
diff --git a/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx
index af266d5e276..f68d5a97905 100644
--- a/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx
@@ -9,7 +9,7 @@ export default function OpenAiOptions({ settings }) {
           <input
             type="password"
             name="OpenAiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="OpenAI API Key"
             defaultValue={settings?.OpenAiKey ? "*".repeat(20) : ""}
             required={true}
diff --git a/frontend/src/components/EmbeddingSelection/VoyageAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/VoyageAiOptions/index.jsx
index 33ce693db40..5a59d02b8c2 100644
--- a/frontend/src/components/EmbeddingSelection/VoyageAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/VoyageAiOptions/index.jsx
@@ -9,7 +9,7 @@ export default function VoyageAiOptions({ settings }) {
           <input
             type="password"
             name="VoyageAiApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Voyage AI API Key"
             defaultValue={settings?.VoyageAiApiKey ? "*".repeat(20) : ""}
             required={true}
diff --git a/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx b/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx
index ec72347ffa6..0e49f1669ac 100644
--- a/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx
@@ -9,7 +9,7 @@ export default function AnthropicAiOptions({ settings }) {
           <input
             type="password"
             name="AnthropicApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Anthropic Claude-2 API Key"
             defaultValue={settings?.AnthropicApiKey ? "*".repeat(20) : ""}
             required={true}
diff --git a/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx b/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx
index 224582eb83b..d4d81a0fde2 100644
--- a/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx
@@ -9,7 +9,7 @@ export default function AzureAiOptions({ settings }) {
           <input
             type="url"
             name="AzureOpenAiEndpoint"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="https://my-azure.openai.azure.com"
             defaultValue={settings?.AzureOpenAiEndpoint}
             required={true}
@@ -25,7 +25,7 @@ export default function AzureAiOptions({ settings }) {
           <input
             type="password"
             name="AzureOpenAiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Azure OpenAI API Key"
             defaultValue={settings?.AzureOpenAiKey ? "*".repeat(20) : ""}
             required={true}
@@ -41,7 +41,7 @@ export default function AzureAiOptions({ settings }) {
           <input
             type="text"
             name="AzureOpenAiModelPref"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Azure OpenAI chat model deployment name"
             defaultValue={settings?.AzureOpenAiModelPref}
             required={true}
@@ -59,7 +59,7 @@ export default function AzureAiOptions({ settings }) {
           <select
             name="AzureOpenAiTokenLimit"
             defaultValue={settings?.AzureOpenAiTokenLimit || 4096}
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             required={true}
           >
             <option value={4096}>4,096 (gpt-3.5-turbo)</option>
@@ -77,7 +77,7 @@ export default function AzureAiOptions({ settings }) {
           <input
             type="text"
             name="AzureOpenAiEmbeddingModelPref"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Azure OpenAI embedding model deployment name"
             defaultValue={settings?.AzureOpenAiEmbeddingModelPref}
             required={true}
diff --git a/frontend/src/components/LLMSelection/CohereAiOptions/index.jsx b/frontend/src/components/LLMSelection/CohereAiOptions/index.jsx
index a20c8b81f07..328ea61d27e 100644
--- a/frontend/src/components/LLMSelection/CohereAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/CohereAiOptions/index.jsx
@@ -9,7 +9,7 @@ export default function CohereAiOptions({ settings }) {
           <input
             type="password"
             name="CohereApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Cohere API Key"
             defaultValue={settings?.CohereApiKey ? "*".repeat(20) : ""}
             required={true}
diff --git a/frontend/src/components/LLMSelection/GeminiLLMOptions/index.jsx b/frontend/src/components/LLMSelection/GeminiLLMOptions/index.jsx
index cc25ae958ab..8ffad16490e 100644
--- a/frontend/src/components/LLMSelection/GeminiLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/GeminiLLMOptions/index.jsx
@@ -9,7 +9,7 @@ export default function GeminiLLMOptions({ settings }) {
           <input
             type="password"
             name="GeminiLLMApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Google Gemini API Key"
             defaultValue={settings?.GeminiLLMApiKey ? "*".repeat(20) : ""}
             required={true}
diff --git a/frontend/src/components/LLMSelection/GenericOpenAiOptions/index.jsx b/frontend/src/components/LLMSelection/GenericOpenAiOptions/index.jsx
index d1088063b34..a5b121f52c8 100644
--- a/frontend/src/components/LLMSelection/GenericOpenAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/GenericOpenAiOptions/index.jsx
@@ -9,7 +9,7 @@ export default function GenericOpenAiOptions({ settings }) {
           <input
             type="url"
             name="GenericOpenAiBasePath"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="eg: https://proxy.openai.com"
             defaultValue={settings?.GenericOpenAiBasePath}
             required={true}
@@ -24,7 +24,7 @@ export default function GenericOpenAiOptions({ settings }) {
           <input
             type="password"
             name="GenericOpenAiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Generic service API Key"
             defaultValue={settings?.GenericOpenAiKey ? "*".repeat(20) : ""}
             required={false}
@@ -39,7 +39,7 @@ export default function GenericOpenAiOptions({ settings }) {
           <input
             type="text"
             name="GenericOpenAiModelPref"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Model id used for chat requests"
             defaultValue={settings?.GenericOpenAiModelPref}
             required={true}
@@ -55,7 +55,7 @@ export default function GenericOpenAiOptions({ settings }) {
           <input
             type="number"
             name="GenericOpenAiTokenLimit"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Content window limit (eg: 4096)"
             min={1}
             onScroll={(e) => e.target.blur()}
@@ -71,7 +71,7 @@ export default function GenericOpenAiOptions({ settings }) {
           <input
             type="number"
             name="GenericOpenAiMaxTokens"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Max tokens per request (eg: 1024)"
             min={1}
             defaultValue={settings?.GenericOpenAiMaxTokens || 1024}
diff --git a/frontend/src/components/LLMSelection/GroqAiOptions/index.jsx b/frontend/src/components/LLMSelection/GroqAiOptions/index.jsx
index 2b02e14bc79..ef37b74b155 100644
--- a/frontend/src/components/LLMSelection/GroqAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/GroqAiOptions/index.jsx
@@ -8,7 +8,7 @@ export default function GroqAiOptions({ settings }) {
         <input
           type="password"
           name="GroqApiKey"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="Groq API Key"
           defaultValue={settings?.GroqApiKey ? "*".repeat(20) : ""}
           required={true}
diff --git a/frontend/src/components/LLMSelection/HuggingFaceOptions/index.jsx b/frontend/src/components/LLMSelection/HuggingFaceOptions/index.jsx
index c93a9457fa5..d20757861bb 100644
--- a/frontend/src/components/LLMSelection/HuggingFaceOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/HuggingFaceOptions/index.jsx
@@ -9,7 +9,7 @@ export default function HuggingFaceOptions({ settings }) {
           <input
             type="url"
             name="HuggingFaceLLMEndpoint"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="https://example.endpoints.huggingface.cloud"
             defaultValue={settings?.HuggingFaceLLMEndpoint}
             required={true}
@@ -24,7 +24,7 @@ export default function HuggingFaceOptions({ settings }) {
           <input
             type="password"
             name="HuggingFaceLLMAccessToken"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="HuggingFace Access Token"
             defaultValue={
               settings?.HuggingFaceLLMAccessToken ? "*".repeat(20) : ""
@@ -41,7 +41,7 @@ export default function HuggingFaceOptions({ settings }) {
           <input
             type="number"
             name="HuggingFaceLLMTokenLimit"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="4096"
             min={1}
             onScroll={(e) => e.target.blur()}
diff --git a/frontend/src/components/LLMSelection/KoboldCPPOptions/index.jsx b/frontend/src/components/LLMSelection/KoboldCPPOptions/index.jsx
index 7e5e20aef3a..16cd0fb944e 100644
--- a/frontend/src/components/LLMSelection/KoboldCPPOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/KoboldCPPOptions/index.jsx
@@ -16,7 +16,7 @@ export default function KoboldCPPOptions({ settings }) {
         <input
           type="url"
           name="KoboldCPPBasePath"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="http://127.0.0.1:5000/v1"
           defaultValue={settings?.KoboldCPPBasePath}
           required={true}
@@ -34,7 +34,7 @@ export default function KoboldCPPOptions({ settings }) {
         <input
           type="number"
           name="KoboldCPPTokenLimit"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="4096"
           min={1}
           onScroll={(e) => e.target.blur()}
diff --git a/frontend/src/components/LLMSelection/LMStudioOptions/index.jsx b/frontend/src/components/LLMSelection/LMStudioOptions/index.jsx
index d3e1df58f9e..cc83420b557 100644
--- a/frontend/src/components/LLMSelection/LMStudioOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/LMStudioOptions/index.jsx
@@ -56,7 +56,7 @@ export default function LMStudioOptions({ settings, showAlert = false }) {
           <input
             type="number"
             name="LMStudioTokenLimit"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="4096"
             defaultChecked="4096"
             min={1}
@@ -113,7 +113,7 @@ export default function LMStudioOptions({ settings, showAlert = false }) {
             <input
               type="url"
               name="LMStudioBasePath"
-              className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+              className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
               placeholder="http://localhost:1234/v1"
               value={basePathValue.value}
               required={true}
diff --git a/frontend/src/components/LLMSelection/LiteLLMOptions/index.jsx b/frontend/src/components/LLMSelection/LiteLLMOptions/index.jsx
index 6199ba26df0..09a6eead991 100644
--- a/frontend/src/components/LLMSelection/LiteLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/LiteLLMOptions/index.jsx
@@ -17,7 +17,7 @@ export default function LiteLLMOptions({ settings }) {
           <input
             type="url"
             name="LiteLLMBasePath"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="http://127.0.0.1:4000"
             defaultValue={settings?.LiteLLMBasePath}
             required={true}
@@ -39,7 +39,7 @@ export default function LiteLLMOptions({ settings }) {
           <input
             type="number"
             name="LiteLLMTokenLimit"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="4096"
             min={1}
             onScroll={(e) => e.target.blur()}
@@ -59,7 +59,7 @@ export default function LiteLLMOptions({ settings }) {
           <input
             type="password"
             name="LiteLLMAPIKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="sk-mysecretkey"
             defaultValue={settings?.LiteLLMAPIKey ? "*".repeat(20) : ""}
             autoComplete="off"
diff --git a/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx b/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx
index 1304c9e1ba5..7faeb0e0f09 100644
--- a/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx
@@ -36,7 +36,7 @@ export default function LocalAiOptions({ settings, showAlert = false }) {
           <input
             type="url"
             name="LocalAiBasePath"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="http://localhost:1234/v1"
             defaultValue={settings?.LocalAiBasePath}
             required={true}
@@ -60,7 +60,7 @@ export default function LocalAiOptions({ settings, showAlert = false }) {
               <input
                 type="number"
                 name="LocalAiTokenLimit"
-                className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                 placeholder="4096"
                 min={1}
                 onScroll={(e) => e.target.blur()}
@@ -84,7 +84,7 @@ export default function LocalAiOptions({ settings, showAlert = false }) {
           <input
             type="password"
             name="LocalAiApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="sk-mysecretkey"
             defaultValue={settings?.LocalAiApiKey ? "*".repeat(20) : ""}
             autoComplete="off"
diff --git a/frontend/src/components/LLMSelection/MistralOptions/index.jsx b/frontend/src/components/LLMSelection/MistralOptions/index.jsx
index 4daadcff15d..c1a3d27602d 100644
--- a/frontend/src/components/LLMSelection/MistralOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/MistralOptions/index.jsx
@@ -14,7 +14,7 @@ export default function MistralOptions({ settings }) {
         <input
           type="password"
           name="MistralApiKey"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="Mistral API Key"
           defaultValue={settings?.MistralApiKey ? "*".repeat(20) : ""}
           required={true}
diff --git a/frontend/src/components/LLMSelection/NativeLLMOptions/index.jsx b/frontend/src/components/LLMSelection/NativeLLMOptions/index.jsx
index bb46c9c965c..33dbc4d8361 100644
--- a/frontend/src/components/LLMSelection/NativeLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/NativeLLMOptions/index.jsx
@@ -88,7 +88,7 @@ function NativeModelSelection({ settings }) {
         <input
           type="number"
           name="NativeLLMTokenLimit"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="4096"
           min={1}
           onScroll={(e) => e.target.blur()}
diff --git a/frontend/src/components/LLMSelection/OllamaLLMOptions/index.jsx b/frontend/src/components/LLMSelection/OllamaLLMOptions/index.jsx
index 841943937ad..e30f5971b67 100644
--- a/frontend/src/components/LLMSelection/OllamaLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/OllamaLLMOptions/index.jsx
@@ -41,7 +41,7 @@ export default function OllamaLLMOptions({ settings }) {
           <input
             type="number"
             name="OllamaLLMTokenLimit"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="4096"
             defaultChecked="4096"
             min={1}
@@ -98,7 +98,7 @@ export default function OllamaLLMOptions({ settings }) {
             <input
               type="url"
               name="OllamaLLMBasePath"
-              className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+              className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
               placeholder="http://127.0.0.1:11434"
               value={basePathValue.value}
               required={true}
diff --git a/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx b/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx
index 67f7d291b6f..05e19b9d783 100644
--- a/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx
@@ -14,7 +14,7 @@ export default function OpenAiOptions({ settings }) {
         <input
           type="password"
           name="OpenAiKey"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="OpenAI API Key"
           defaultValue={settings?.OpenAiKey ? "*".repeat(20) : ""}
           required={true}
diff --git a/frontend/src/components/LLMSelection/OpenRouterOptions/index.jsx b/frontend/src/components/LLMSelection/OpenRouterOptions/index.jsx
index 94ae320a27c..5556b3f164f 100644
--- a/frontend/src/components/LLMSelection/OpenRouterOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/OpenRouterOptions/index.jsx
@@ -11,7 +11,7 @@ export default function OpenRouterOptions({ settings }) {
         <input
           type="password"
           name="OpenRouterApiKey"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="OpenRouter API Key"
           defaultValue={settings?.OpenRouterApiKey ? "*".repeat(20) : ""}
           required={true}
diff --git a/frontend/src/components/LLMSelection/PerplexityOptions/index.jsx b/frontend/src/components/LLMSelection/PerplexityOptions/index.jsx
index 9b53cd1919b..3270fa00b77 100644
--- a/frontend/src/components/LLMSelection/PerplexityOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/PerplexityOptions/index.jsx
@@ -11,7 +11,7 @@ export default function PerplexityOptions({ settings }) {
         <input
           type="password"
           name="PerplexityApiKey"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="Perplexity API Key"
           defaultValue={settings?.PerplexityApiKey ? "*".repeat(20) : ""}
           required={true}
diff --git a/frontend/src/components/LLMSelection/TextGenWebUIOptions/index.jsx b/frontend/src/components/LLMSelection/TextGenWebUIOptions/index.jsx
index 50bb841545b..866418e1f68 100644
--- a/frontend/src/components/LLMSelection/TextGenWebUIOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/TextGenWebUIOptions/index.jsx
@@ -8,7 +8,7 @@ export default function TextGenWebUIOptions({ settings }) {
         <input
           type="url"
           name="TextGenWebUIBasePath"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="http://127.0.0.1:5000/v1"
           defaultValue={settings?.TextGenWebUIBasePath}
           required={true}
@@ -23,7 +23,7 @@ export default function TextGenWebUIOptions({ settings }) {
         <input
           type="number"
           name="TextGenWebUITokenLimit"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="Content window limit (eg: 4096)"
           min={1}
           onScroll={(e) => e.target.blur()}
@@ -39,7 +39,7 @@ export default function TextGenWebUIOptions({ settings }) {
         <input
           type="password"
           name="TextGenWebUIAPIKey"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="TextGen Web UI API Key"
           defaultValue={settings?.TextGenWebUIAPIKey ? "*".repeat(20) : ""}
           autoComplete="off"
diff --git a/frontend/src/components/LLMSelection/TogetherAiOptions/index.jsx b/frontend/src/components/LLMSelection/TogetherAiOptions/index.jsx
index a5947a3ef54..cdc095fb866 100644
--- a/frontend/src/components/LLMSelection/TogetherAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/TogetherAiOptions/index.jsx
@@ -11,7 +11,7 @@ export default function TogetherAiOptions({ settings }) {
         <input
           type="password"
           name="TogetherAiApiKey"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="Together AI API Key"
           defaultValue={settings?.TogetherAiApiKey ? "*".repeat(20) : ""}
           required={true}
diff --git a/frontend/src/components/Modals/DisplayRecoveryCodeModal/index.jsx b/frontend/src/components/Modals/DisplayRecoveryCodeModal/index.jsx
index 1f1c1fd8b56..4a3751385e6 100644
--- a/frontend/src/components/Modals/DisplayRecoveryCodeModal/index.jsx
+++ b/frontend/src/components/Modals/DisplayRecoveryCodeModal/index.jsx
@@ -68,7 +68,7 @@ export default function RecoveryCodeModal({
       <div className="flex w-full justify-center items-center p-3 space-x-2 rounded-b border-gray-500/50 -mt-4 mb-4">
         <button
           type="button"
-          className="transition-all duration-300 text-xs md:w-[500px] md:h-[34px] h-[48px] w-full m-2 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-[#46C8FF] hover:text-white whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)] flex justify-center items-center gap-x-2"
+          className="transition-all duration-300 text-xs md:w-[500px] md:h-[34px] h-[48px] w-full m-2 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-primary-button hover:text-white whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)] flex justify-center items-center gap-x-2"
           onClick={downloadClicked ? handleClose : downloadRecoveryCodes}
         >
           {downloadClicked ? (
diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Confluence/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Confluence/index.jsx
index 05d6eabdc9f..3cb2c4f82af 100644
--- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Confluence/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Confluence/index.jsx
@@ -65,7 +65,7 @@ export default function ConfluenceOptions() {
                 <input
                   type="url"
                   name="pageUrl"
-                  className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                  className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="https://example.atlassian.net/wiki/spaces/~7120208c08555d52224113949698b933a3bb56/pages/851969/Test+anythingLLM+page"
                   required={true}
                   autoComplete="off"
@@ -84,7 +84,7 @@ export default function ConfluenceOptions() {
                 <input
                   type="email"
                   name="username"
-                  className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                  className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="jdoe@example.com"
                   required={true}
                   autoComplete="off"
@@ -132,7 +132,7 @@ export default function ConfluenceOptions() {
                 <input
                   type="password"
                   name="accessToken"
-                  className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                  className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="abcd1234"
                   required={true}
                   autoComplete="off"
diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Github/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Github/index.jsx
index 82d0a0a6bfb..8b10f664be0 100644
--- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Github/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Github/index.jsx
@@ -77,7 +77,7 @@ export default function GithubOptions() {
                 <input
                   type="url"
                   name="repo"
-                  className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                  className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="https://github.com/Mintplex-Labs/anything-llm"
                   required={true}
                   autoComplete="off"
@@ -102,7 +102,7 @@ export default function GithubOptions() {
                 <input
                   type="text"
                   name="accessToken"
-                  className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                  className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="github_pat_1234_abcdefg"
                   required={false}
                   autoComplete="off"
@@ -135,7 +135,7 @@ export default function GithubOptions() {
                 classNames={{
                   tag: "bg-blue-300/10 text-zinc-800",
                   input:
-                    "flex bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white",
+                    "flex bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none",
                 }}
               />
             </div>
diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/WebsiteDepth/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/WebsiteDepth/index.jsx
index 79cc6f254e4..f0017dab967 100644
--- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/WebsiteDepth/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/WebsiteDepth/index.jsx
@@ -64,7 +64,7 @@ export default function WebsiteDepthOptions() {
                 <input
                   type="url"
                   name="url"
-                  className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                  className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="https://example.com"
                   required={true}
                   autoComplete="off"
@@ -84,7 +84,7 @@ export default function WebsiteDepthOptions() {
                   name="depth"
                   min="1"
                   max="5"
-                  className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                  className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   required={true}
                   defaultValue="1"
                 />
@@ -102,7 +102,7 @@ export default function WebsiteDepthOptions() {
                   type="number"
                   name="maxLinks"
                   min="1"
-                  className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                  className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   required={true}
                   defaultValue="20"
                 />
diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Youtube/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Youtube/index.jsx
index 97a34f0f660..d0e68249e56 100644
--- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Youtube/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Youtube/index.jsx
@@ -59,7 +59,7 @@ export default function YoutubeOptions() {
                 <input
                   type="url"
                   name="url"
-                  className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                  className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="https://youtube.com/watch?v=abc123"
                   required={true}
                   autoComplete="off"
diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/index.jsx
index 5a03e19c189..c2c14dff383 100644
--- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/index.jsx
@@ -56,7 +56,7 @@ export default function DataConnectors() {
           <input
             type="text"
             placeholder="Search data connectors"
-            className="border-none bg-zinc-600 z-20 pl-10 h-[38px] rounded-full w-full px-4 py-1 text-sm border-2 border-slate-300/40 outline-none focus:border-white text-white"
+            className="border-none bg-zinc-600 z-20 pl-10 h-[38px] rounded-full w-full px-4 py-1 text-sm border-2 border-slate-300/40 outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white"
             autoComplete="off"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
diff --git a/frontend/src/components/Modals/NewWorkspace.jsx b/frontend/src/components/Modals/NewWorkspace.jsx
index ed00f6fe63a..01f37063317 100644
--- a/frontend/src/components/Modals/NewWorkspace.jsx
+++ b/frontend/src/components/Modals/NewWorkspace.jsx
@@ -52,7 +52,7 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
                     name="name"
                     type="text"
                     id="name"
-                    className="bg-zinc-900 w-full text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                    className="bg-zinc-900 w-full text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                     placeholder="My Workspace"
                     required={true}
                     autoComplete="off"
diff --git a/frontend/src/components/Modals/Password/MultiUserAuth.jsx b/frontend/src/components/Modals/Password/MultiUserAuth.jsx
index c9a6536e4c9..ca56f3c8e71 100644
--- a/frontend/src/components/Modals/Password/MultiUserAuth.jsx
+++ b/frontend/src/components/Modals/Password/MultiUserAuth.jsx
@@ -82,7 +82,7 @@ const RecoveryForm = ({ onSubmit, setShowRecoveryForm }) => {
       <div className="flex items-center md:p-12 md:px-0 px-6 mt-12 md:mt-0 space-x-2 border-gray-600 w-full flex-col gap-y-8">
         <button
           type="submit"
-          className="md:text-primary-button md:bg-transparent md:w-[300px] text-dark-text text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-[#46C8FF] md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-primary-button bg-primary-button focus:z-10 w-full"
+          className="md:text-primary-button md:bg-transparent md:w-[300px] text-dark-text text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-primary-button md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-primary-button bg-primary-button focus:z-10 w-full"
         >
           Reset Password
         </button>
@@ -151,7 +151,7 @@ const ResetPasswordForm = ({ onSubmit }) => {
       <div className="flex items-center md:p-12 md:px-0 px-6 mt-12 md:mt-0 space-x-2 border-gray-600 w-full flex-col gap-y-8">
         <button
           type="submit"
-          className="md:text-primary-button md:bg-transparent md:w-[300px] text-dark-text text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-[#46C8FF] md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-primary-button bg-primary-button focus:z-10 w-full"
+          className="md:text-primary-button md:bg-transparent md:w-[300px] text-dark-text text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-primary-button md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-primary-button bg-primary-button focus:z-10 w-full"
         >
           Reset Password
         </button>
@@ -322,7 +322,7 @@ export default function MultiUserAuth() {
             <button
               disabled={loading}
               type="submit"
-              className="md:text-primary-button md:bg-transparent text-dark-text text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-[#46C8FF] md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-primary-button bg-primary-button focus:z-10 w-full"
+              className="md:text-primary-button md:bg-transparent text-dark-text text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-primary-button md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-primary-button bg-primary-button focus:z-10 w-full"
             >
               {loading
                 ? t("login.multi-user.validating")
diff --git a/frontend/src/components/Modals/Password/SingleUserAuth.jsx b/frontend/src/components/Modals/Password/SingleUserAuth.jsx
index 66dcdb8f351..0b1730ce888 100644
--- a/frontend/src/components/Modals/Password/SingleUserAuth.jsx
+++ b/frontend/src/components/Modals/Password/SingleUserAuth.jsx
@@ -107,7 +107,7 @@ export default function SingleUserAuth() {
             <button
               disabled={loading}
               type="submit"
-              className="md:text-primary-button md:bg-transparent text-dark-text text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-[#46C8FF] md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-primary-button bg-primary-button focus:z-10 w-full"
+              className="md:text-primary-button md:bg-transparent text-dark-text text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-primary-button md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-primary-button bg-primary-button focus:z-10 w-full"
             >
               {loading ? "Validating..." : "Login"}
             </button>
diff --git a/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx b/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx
index 4a5e1160ce4..c7d0961b377 100644
--- a/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx
+++ b/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx
@@ -14,7 +14,7 @@ export default function ElevenLabsOptions({ settings }) {
         <input
           type="password"
           name="TTSElevenLabsKey"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="ElevenLabs API Key"
           defaultValue={settings?.TTSElevenLabsKey ? "*".repeat(20) : ""}
           required={true}
diff --git a/frontend/src/components/TextToSpeech/OpenAiOptions/index.jsx b/frontend/src/components/TextToSpeech/OpenAiOptions/index.jsx
index 7982520569d..176b4ad8944 100644
--- a/frontend/src/components/TextToSpeech/OpenAiOptions/index.jsx
+++ b/frontend/src/components/TextToSpeech/OpenAiOptions/index.jsx
@@ -16,7 +16,7 @@ export default function OpenAiTextToSpeechOptions({ settings }) {
         <input
           type="password"
           name="TTSOpenAIKey"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="OpenAI API Key"
           defaultValue={apiKey ? "*".repeat(20) : ""}
           required={true}
diff --git a/frontend/src/components/TranscriptionSelection/OpenAiOptions/index.jsx b/frontend/src/components/TranscriptionSelection/OpenAiOptions/index.jsx
index aa48363e9d3..4f8a3a8cd4b 100644
--- a/frontend/src/components/TranscriptionSelection/OpenAiOptions/index.jsx
+++ b/frontend/src/components/TranscriptionSelection/OpenAiOptions/index.jsx
@@ -13,7 +13,7 @@ export default function OpenAiWhisperOptions({ settings }) {
         <input
           type="password"
           name="OpenAiKey"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="OpenAI API Key"
           defaultValue={settings?.OpenAiKey ? "*".repeat(20) : ""}
           required={true}
diff --git a/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx
index f3eca41ac55..531239f01e5 100644
--- a/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx
@@ -9,7 +9,7 @@ export default function AstraDBOptions({ settings }) {
           <input
             type="url"
             name="AstraDBEndpoint"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Astra DB API endpoint"
             defaultValue={settings?.AstraDBEndpoint}
             required={true}
@@ -25,7 +25,7 @@ export default function AstraDBOptions({ settings }) {
           <input
             type="password"
             name="AstraDBApplicationToken"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="AstraCS:..."
             defaultValue={
               settings?.AstraDBApplicationToken ? "*".repeat(20) : ""
diff --git a/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx
index 6287e1ee316..8114c5a45bb 100644
--- a/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx
@@ -9,7 +9,7 @@ export default function ChromaDBOptions({ settings }) {
           <input
             type="url"
             name="ChromaEndpoint"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="http://localhost:8000"
             defaultValue={settings?.ChromaEndpoint}
             required={true}
@@ -27,7 +27,7 @@ export default function ChromaDBOptions({ settings }) {
             autoComplete="off"
             type="text"
             defaultValue={settings?.ChromaApiHeader}
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="X-Api-Key"
           />
         </div>
@@ -41,7 +41,7 @@ export default function ChromaDBOptions({ settings }) {
             autoComplete="off"
             type="password"
             defaultValue={settings?.ChromaApiKey ? "*".repeat(20) : ""}
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="sk-myApiKeyToAccessMyChromaInstance"
           />
         </div>
diff --git a/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx
index 5db49859392..00dd539d5d7 100644
--- a/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx
@@ -9,7 +9,7 @@ export default function MilvusDBOptions({ settings }) {
           <input
             type="text"
             name="MilvusAddress"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="http://localhost:19530"
             defaultValue={settings?.MilvusAddress}
             required={true}
@@ -25,7 +25,7 @@ export default function MilvusDBOptions({ settings }) {
           <input
             type="text"
             name="MilvusUsername"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="username"
             defaultValue={settings?.MilvusUsername}
             autoComplete="off"
@@ -39,7 +39,7 @@ export default function MilvusDBOptions({ settings }) {
           <input
             type="password"
             name="MilvusPassword"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="password"
             defaultValue={settings?.MilvusPassword ? "*".repeat(20) : ""}
             autoComplete="off"
diff --git a/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx
index c651e7f7994..4feb866c307 100644
--- a/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx
@@ -9,7 +9,7 @@ export default function PineconeDBOptions({ settings }) {
           <input
             type="password"
             name="PineConeKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Pinecone API Key"
             defaultValue={settings?.PineConeKey ? "*".repeat(20) : ""}
             required={true}
@@ -24,7 +24,7 @@ export default function PineconeDBOptions({ settings }) {
           <input
             type="text"
             name="PineConeIndex"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="my-index"
             defaultValue={settings?.PineConeIndex}
             required={true}
diff --git a/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx
index db4b4c5b9a9..716c48ed58e 100644
--- a/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx
@@ -9,7 +9,7 @@ export default function QDrantDBOptions({ settings }) {
           <input
             type="url"
             name="QdrantEndpoint"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="http://localhost:6633"
             defaultValue={settings?.QdrantEndpoint}
             required={true}
@@ -25,7 +25,7 @@ export default function QDrantDBOptions({ settings }) {
           <input
             type="password"
             name="QdrantApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="wOeqxsYP4....1244sba"
             defaultValue={settings?.QdrantApiKey}
             autoComplete="off"
diff --git a/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx
index 5f7cda17c81..e2f5e57fca6 100644
--- a/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx
@@ -9,7 +9,7 @@ export default function WeaviateDBOptions({ settings }) {
           <input
             type="url"
             name="WeaviateEndpoint"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="http://localhost:8080"
             defaultValue={settings?.WeaviateEndpoint}
             required={true}
@@ -25,7 +25,7 @@ export default function WeaviateDBOptions({ settings }) {
           <input
             type="password"
             name="WeaviateApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="sk-123Abcweaviate"
             defaultValue={settings?.WeaviateApiKey}
             autoComplete="off"
diff --git a/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx b/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx
index edcc11e7a89..1253c47c99f 100644
--- a/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx
@@ -9,7 +9,7 @@ export default function ZillizCloudOptions({ settings }) {
           <input
             type="text"
             name="ZillizEndpoint"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="https://sample.api.gcp-us-west1.zillizcloud.com"
             defaultValue={settings?.ZillizEndpoint}
             required={true}
@@ -25,7 +25,7 @@ export default function ZillizCloudOptions({ settings }) {
           <input
             type="password"
             name="ZillizApiToken"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Zilliz cluster API Token"
             defaultValue={settings?.ZillizApiToken ? "*".repeat(20) : ""}
             autoComplete="off"
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/StopGenerationButton/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/StopGenerationButton/index.jsx
index 6c3d16dbf4d..6d0f0919352 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/StopGenerationButton/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/StopGenerationButton/index.jsx
@@ -24,14 +24,14 @@ export default function StopGenerationButton() {
           xmlns="http://www.w3.org/2000/svg"
         >
           <circle
-            className="group-hover:stroke-[#46C8FF] stroke-white"
+            className="group-hover:stroke-primary-button stroke-white"
             cx="10"
             cy="10.562"
             r="9"
             strokeWidth="2"
           />
           <rect
-            className="group-hover:fill-[#46C8FF] fill-white"
+            className="group-hover:fill-primary-button fill-white"
             x="6.3999"
             y="6.96204"
             width="7.2"
diff --git a/frontend/src/pages/Admin/Agents/SQLConnectorSelection/NewConnectionModal.jsx b/frontend/src/pages/Admin/Agents/SQLConnectorSelection/NewConnectionModal.jsx
index 4b25ce09168..6633b6429f3 100644
--- a/frontend/src/pages/Admin/Agents/SQLConnectorSelection/NewConnectionModal.jsx
+++ b/frontend/src/pages/Admin/Agents/SQLConnectorSelection/NewConnectionModal.jsx
@@ -140,7 +140,7 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
                 <input
                   type="text"
                   name="name"
-                  className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                  className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="a unique name to identify this SQL connection"
                   required={true}
                   autoComplete="off"
@@ -156,7 +156,7 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
                   <input
                     type="text"
                     name="username"
-                    className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                    className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                     placeholder="root"
                     required={true}
                     autoComplete="off"
@@ -170,7 +170,7 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
                   <input
                     type="text"
                     name="password"
-                    className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                    className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                     placeholder="password123"
                     required={true}
                     autoComplete="off"
@@ -187,7 +187,7 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
                   <input
                     type="text"
                     name="host"
-                    className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                    className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                     placeholder="the hostname or endpoint for your database"
                     required={true}
                     autoComplete="off"
@@ -201,7 +201,7 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
                   <input
                     type="text"
                     name="port"
-                    className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                    className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                     placeholder="3306"
                     required={false}
                     autoComplete="off"
@@ -217,7 +217,7 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
                 <input
                   type="text"
                   name="database"
-                  className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                  className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="the database the agent will interact with"
                   required={true}
                   autoComplete="off"
@@ -239,7 +239,7 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
               <button
                 type="submit"
                 form="sql-connection-form"
-                className="border-none text-xs px-2 py-1 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-[#46C8FF] hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
+                className="border-none text-xs px-2 py-1 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-primary-button hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
               >
                 Save connection
               </button>
diff --git a/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderOptions/index.jsx b/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderOptions/index.jsx
index c5ccd2607bf..86f0871b59b 100644
--- a/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderOptions/index.jsx
+++ b/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderOptions/index.jsx
@@ -20,7 +20,7 @@ export function GoogleSearchOptions({ settings }) {
           <input
             type="text"
             name="env::AgentGoogleSearchEngineId"
-            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Google Search Engine Id"
             defaultValue={settings?.AgentGoogleSearchEngineId}
             required={true}
@@ -35,7 +35,7 @@ export function GoogleSearchOptions({ settings }) {
           <input
             type="password"
             name="env::AgentGoogleSearchEngineKey"
-            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Google Search Engine API Key"
             defaultValue={
               settings?.AgentGoogleSearchEngineKey ? "*".repeat(20) : ""
@@ -72,7 +72,7 @@ export function SerperDotDevOptions({ settings }) {
           <input
             type="password"
             name="env::AgentSerperApiKey"
-            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Serper.dev API Key"
             defaultValue={settings?.AgentSerperApiKey ? "*".repeat(20) : ""}
             required={true}
@@ -107,7 +107,7 @@ export function BingSearchOptions({ settings }) {
           <input
             type="password"
             name="env::AgentBingSearchApiKey"
-            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Bing Web Search API Key"
             defaultValue={settings?.AgentBingSearchApiKey ? "*".repeat(20) : ""}
             required={true}
@@ -170,7 +170,7 @@ export function SerplySearchOptions({ settings }) {
           <input
             type="password"
             name="env::AgentSerplyApiKey"
-            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Serply API Key"
             defaultValue={settings?.AgentSerplyApiKey ? "*".repeat(20) : ""}
             required={true}
@@ -193,7 +193,7 @@ export function SearXNGOptions({ settings }) {
         <input
           type="url"
           name="env::AgentSearXNGApiUrl"
-          className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+          className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="SearXNG API Key"
           defaultValue={settings?.AgentSearXNGApiUrl}
           required={true}
diff --git a/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx b/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx
index 438be111404..7a1d23554b3 100644
--- a/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx
+++ b/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx
@@ -159,7 +159,7 @@ export default function AgentWebSearchSelection({
               />
             )}
             {searchMenuOpen ? (
-              <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
+              <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
                 <div className="w-full flex flex-col gap-y-1">
                   <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
                     <MagnifyingGlass
@@ -172,7 +172,7 @@ export default function AgentWebSearchSelection({
                       name="web-provider-search"
                       autoComplete="off"
                       placeholder="Search available web-search providers"
-                      className="border-none -ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:border-white text-white placeholder:text-white placeholder:font-medium"
+                      className="border-none -ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white placeholder:text-white placeholder:font-medium"
                       onChange={(e) => setSearchQuery(e.target.value)}
                       ref={searchInputRef}
                       onKeyDown={(e) => {
@@ -202,7 +202,7 @@ export default function AgentWebSearchSelection({
               </div>
             ) : (
               <button
-                className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
+                className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
                 type="button"
                 onClick={() => setSearchMenuOpen(true)}
               >
diff --git a/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx
index 41a1c8f2dee..9f504f29a2f 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx
@@ -56,7 +56,7 @@ export default function NewIconForm({ icon, url, onSave, onRemove }) {
     <form onSubmit={handleSubmit} className="flex items-center gap-x-1.5">
       <div className="relative" ref={dropdownRef}>
         <div
-          className="h-[34px] w-[34px] bg-dark-highlight rounded-full flex items-center justify-center cursor-pointer"
+          className="h-[34px] w-[34px] bg-dark-highlight rounded-full flex items-center justify-center cursor-pointer hover:outline-primary-button hover:outline"
           onClick={() => setIsDropdownOpen(!isDropdownOpen)}
         >
           {React.createElement(ICON_COMPONENTS[selectedIcon] || Plus, {
@@ -87,7 +87,7 @@ export default function NewIconForm({ icon, url, onSave, onRemove }) {
         value={selectedUrl}
         onChange={handleUrlChange}
         placeholder="https://example.com"
-        className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-[300px] h-[32px]"
+        className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-[300px] h-[32px] focus:outline-primary-button active:outline-primary-button outline-none"
         required
       />
       {selectedIcon !== "Plus" && (
diff --git a/frontend/src/pages/GeneralSettings/AudioPreference/stt.jsx b/frontend/src/pages/GeneralSettings/AudioPreference/stt.jsx
index b45aaa22a9c..c9104cb3bc5 100644
--- a/frontend/src/pages/GeneralSettings/AudioPreference/stt.jsx
+++ b/frontend/src/pages/GeneralSettings/AudioPreference/stt.jsx
@@ -109,7 +109,7 @@ export default function SpeechToTextProvider({ settings }) {
             />
           )}
           {searchMenuOpen ? (
-            <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
+            <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
               <div className="w-full flex flex-col gap-y-1">
                 <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
                   <MagnifyingGlass
@@ -122,7 +122,7 @@ export default function SpeechToTextProvider({ settings }) {
                     name="stt-provider-search"
                     autoComplete="off"
                     placeholder="Search speech to text providers"
-                    className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:border-white text-white placeholder:text-white placeholder:font-medium"
+                    className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white placeholder:text-white placeholder:font-medium"
                     onChange={(e) => setSearchQuery(e.target.value)}
                     ref={searchInputRef}
                     onKeyDown={(e) => {
@@ -153,7 +153,7 @@ export default function SpeechToTextProvider({ settings }) {
             </div>
           ) : (
             <button
-              className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
+              className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
               type="button"
               onClick={() => setSearchMenuOpen(true)}
             >
diff --git a/frontend/src/pages/GeneralSettings/AudioPreference/tts.jsx b/frontend/src/pages/GeneralSettings/AudioPreference/tts.jsx
index e3213b63dc5..77d89e8245d 100644
--- a/frontend/src/pages/GeneralSettings/AudioPreference/tts.jsx
+++ b/frontend/src/pages/GeneralSettings/AudioPreference/tts.jsx
@@ -124,7 +124,7 @@ export default function TextToSpeechProvider({ settings }) {
             />
           )}
           {searchMenuOpen ? (
-            <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
+            <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
               <div className="w-full flex flex-col gap-y-1">
                 <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
                   <MagnifyingGlass
@@ -137,7 +137,7 @@ export default function TextToSpeechProvider({ settings }) {
                     name="tts-provider-search"
                     autoComplete="off"
                     placeholder="Search text to speech providers"
-                    className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:border-white text-white placeholder:text-white placeholder:font-medium"
+                    className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white placeholder:text-white placeholder:font-medium"
                     onChange={(e) => setSearchQuery(e.target.value)}
                     ref={searchInputRef}
                     onKeyDown={(e) => {
@@ -168,7 +168,7 @@ export default function TextToSpeechProvider({ settings }) {
             </div>
           ) : (
             <button
-              className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
+              className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
               type="button"
               onClick={() => setSearchMenuOpen(true)}
             >
diff --git a/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/CodeSnippetModal/index.jsx b/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/CodeSnippetModal/index.jsx
index 3133d63d8f1..22d4e9c6742 100644
--- a/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/CodeSnippetModal/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/CodeSnippetModal/index.jsx
@@ -98,7 +98,7 @@ const ScriptTag = ({ embed }) => {
       <button
         disabled={copied}
         onClick={handleClick}
-        className="disabled:border disabled:border-green-300 border border-transparent relative w-full font-mono flex bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white p-2.5"
+        className="disabled:border disabled:border-green-300 border border-transparent relative w-full font-mono flex bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none p-2.5"
       >
         <div
           className="flex w-full text-left flex-col gap-y-1 pr-6 pl-4 whitespace-pre-line"
diff --git a/frontend/src/pages/GeneralSettings/EmbedConfigs/NewEmbedModal/index.jsx b/frontend/src/pages/GeneralSettings/EmbedConfigs/NewEmbedModal/index.jsx
index b89e4c557f5..44d2ea8e5c2 100644
--- a/frontend/src/pages/GeneralSettings/EmbedConfigs/NewEmbedModal/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedConfigs/NewEmbedModal/index.jsx
@@ -274,7 +274,7 @@ export const PermittedDomains = ({ defaultValue = [] }) => {
         classNames={{
           tag: "bg-blue-300/10 text-zinc-800 m-1",
           input:
-            "flex bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white p-2.5",
+            "flex bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none p-2.5",
         }}
       />
     </div>
@@ -293,7 +293,7 @@ export const NumberInput = ({ name, title, hint, defaultValue = 0 }) => {
       <input
         type="number"
         name={name}
-        className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-[15rem] p-2.5"
+        className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-[15rem] p-2.5"
         min={0}
         defaultValue={defaultValue}
         onScroll={(e) => e.target.blur()}
diff --git a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
index ec8c2b8bd90..251d8f64683 100644
--- a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
@@ -266,7 +266,7 @@ export default function GeneralEmbeddingPreference() {
                   />
                 )}
                 {searchMenuOpen ? (
-                  <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
+                  <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
                     <div className="w-full flex flex-col gap-y-1">
                       <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
                         <MagnifyingGlass
@@ -279,7 +279,7 @@ export default function GeneralEmbeddingPreference() {
                           name="embedder-search"
                           autoComplete="off"
                           placeholder="Search all embedding providers"
-                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:border-white text-white placeholder:text-white placeholder:font-medium"
+                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white placeholder:text-white placeholder:font-medium"
                           onChange={(e) => setSearchQuery(e.target.value)}
                           ref={searchInputRef}
                           onKeyDown={(e) => {
@@ -310,7 +310,7 @@ export default function GeneralEmbeddingPreference() {
                   </div>
                 ) : (
                   <button
-                    className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
+                    className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
                     type="button"
                     onClick={() => setSearchMenuOpen(true)}
                   >
diff --git a/frontend/src/pages/GeneralSettings/EmbeddingTextSplitterPreference/index.jsx b/frontend/src/pages/GeneralSettings/EmbeddingTextSplitterPreference/index.jsx
index 1f30f71a2c9..f1f2df3e43f 100644
--- a/frontend/src/pages/GeneralSettings/EmbeddingTextSplitterPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbeddingTextSplitterPreference/index.jsx
@@ -124,7 +124,7 @@ export default function EmbeddingTextSplitterPreference() {
                     min={1}
                     max={settings?.max_embed_chunk_size || 1000}
                     onWheel={(e) => e?.currentTarget?.blur()}
-                    className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                    className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                     placeholder="maximum length of vectorized text"
                     defaultValue={
                       isNullOrNaN(settings?.text_splitter_chunk_size)
@@ -134,7 +134,7 @@ export default function EmbeddingTextSplitterPreference() {
                     required={true}
                     autoComplete="off"
                   />
-                  <p className="text-xs text-white/40">
+                  <p className="text-xs text-white/40 mt-2">
                     {t("text.size.recommend")}{" "}
                     {numberWithCommas(settings?.max_embed_chunk_size || 1000)}.
                   </p>
@@ -156,7 +156,7 @@ export default function EmbeddingTextSplitterPreference() {
                     name="text_splitter_chunk_overlap"
                     min={0}
                     onWheel={(e) => e?.currentTarget?.blur()}
-                    className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                    className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                     placeholder="maximum length of vectorized text"
                     defaultValue={
                       isNullOrNaN(settings?.text_splitter_chunk_overlap)
diff --git a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
index d38a9938307..7bbc5bb6b92 100644
--- a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
@@ -340,7 +340,7 @@ export default function GeneralLLMPreference() {
                   />
                 )}
                 {searchMenuOpen ? (
-                  <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
+                  <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
                     <div className="w-full flex flex-col gap-y-1">
                       <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
                         <MagnifyingGlass
@@ -353,7 +353,7 @@ export default function GeneralLLMPreference() {
                           name="llm-search"
                           autoComplete="off"
                           placeholder="Search all LLM providers"
-                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:border-white text-white placeholder:text-white placeholder:font-medium"
+                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white placeholder:text-white placeholder:font-medium"
                           onChange={(e) => setSearchQuery(e.target.value)}
                           ref={searchInputRef}
                           onKeyDown={(e) => {
@@ -387,7 +387,7 @@ export default function GeneralLLMPreference() {
                   </div>
                 ) : (
                   <button
-                    className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
+                    className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
                     type="button"
                     onClick={() => setSearchMenuOpen(true)}
                   >
diff --git a/frontend/src/pages/GeneralSettings/Security/index.jsx b/frontend/src/pages/GeneralSettings/Security/index.jsx
index 9cab9650980..c014b327431 100644
--- a/frontend/src/pages/GeneralSettings/Security/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Security/index.jsx
@@ -146,7 +146,7 @@ function MultiUserMode() {
                       <input
                         name="username"
                         type="text"
-                        className="bg-zinc-900 text-white text-sm rounded-lg focus:border-blue-500 block w-full p-2.5 placeholder:text-white/20 focus:ring-blue-500"
+                        className="bg-zinc-900 text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5 placeholder:text-white/20 focus:ring-blue-500"
                         placeholder="Your admin username"
                         minLength={2}
                         required={true}
@@ -165,7 +165,7 @@ function MultiUserMode() {
                       <input
                         name="password"
                         type="text"
-                        className="bg-zinc-900 text-white text-sm rounded-lg focus:border-blue-500 block w-full p-2.5 placeholder:text-white/20 focus:ring-blue-500"
+                        className="bg-zinc-900 text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5 placeholder:text-white/20 focus:ring-blue-500"
                         placeholder="Your admin password"
                         minLength={8}
                         required={true}
@@ -318,7 +318,7 @@ function PasswordProtection() {
                       <input
                         name="password"
                         type="text"
-                        className="bg-zinc-900 text-white text-sm rounded-lg focus:border-blue-500 block w-full p-2.5 placeholder:text-white/20 focus:ring-blue-500"
+                        className="bg-zinc-900 text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5 placeholder:text-white/20"
                         placeholder="Your Instance Password"
                         minLength={8}
                         required={true}
diff --git a/frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx b/frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx
index 07c5ecae837..8c84c3e9d7b 100644
--- a/frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx
@@ -148,7 +148,7 @@ export default function TranscriptionModelPreference() {
                   />
                 )}
                 {searchMenuOpen ? (
-                  <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
+                  <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
                     <div className="w-full flex flex-col gap-y-1">
                       <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
                         <MagnifyingGlass
@@ -161,7 +161,7 @@ export default function TranscriptionModelPreference() {
                           name="provider-search"
                           autoComplete="off"
                           placeholder="Search audio transcription providers"
-                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:border-white text-white placeholder:text-white placeholder:font-medium"
+                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white placeholder:text-white placeholder:font-medium"
                           onChange={(e) => setSearchQuery(e.target.value)}
                           ref={searchInputRef}
                           onKeyDown={(e) => {
@@ -192,7 +192,7 @@ export default function TranscriptionModelPreference() {
                   </div>
                 ) : (
                   <button
-                    className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
+                    className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
                     type="button"
                     onClick={() => setSearchMenuOpen(true)}
                   >
diff --git a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
index 48c1c971f7d..0e59814d79b 100644
--- a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
+++ b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
@@ -224,7 +224,7 @@ export default function GeneralVectorDatabase() {
                   />
                 )}
                 {searchMenuOpen ? (
-                  <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
+                  <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
                     <div className="w-full flex flex-col gap-y-1">
                       <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
                         <MagnifyingGlass
@@ -237,7 +237,7 @@ export default function GeneralVectorDatabase() {
                           name="vdb-search"
                           autoComplete="off"
                           placeholder="Search all vector database providers"
-                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:border-white text-white placeholder:text-white placeholder:font-medium"
+                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white placeholder:text-white placeholder:font-medium"
                           onChange={(e) => setSearchQuery(e.target.value)}
                           ref={searchInputRef}
                           onKeyDown={(e) => {
@@ -268,7 +268,7 @@ export default function GeneralVectorDatabase() {
                   </div>
                 ) : (
                   <button
-                    className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
+                    className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
                     type="button"
                     onClick={() => setSearchMenuOpen(true)}
                   >
diff --git a/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx
index 25b465229a6..5d2ec337f50 100644
--- a/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx
@@ -271,7 +271,7 @@ export default function LLMPreference({
               <input
                 type="text"
                 placeholder="Search LLM providers"
-                className="bg-zinc-600 z-20 pl-10 h-[38px] rounded-full w-full px-4 py-1 text-sm border-2 border-slate-300/40 outline-none focus:border-white text-white"
+                className="bg-zinc-600 z-20 pl-10 h-[38px] rounded-full w-full px-4 py-1 text-sm border-2 border-slate-300/40 outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white"
                 onChange={(e) => setSearchQuery(e.target.value)}
                 autoComplete="off"
                 onKeyDown={(e) => {
diff --git a/frontend/src/pages/OnboardingFlow/Steps/UserSetup/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/UserSetup/index.jsx
index 6cc41428aff..7e938076af5 100644
--- a/frontend/src/pages/OnboardingFlow/Steps/UserSetup/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/Steps/UserSetup/index.jsx
@@ -197,7 +197,7 @@ const JustMe = ({
             <input
               name="password"
               type="password"
-              className="bg-zinc-900 text-white text-sm rounded-lg block w-full p-2.5"
+              className="bg-zinc-900 text-white text-sm rounded-lg block w-full p-2.5 focus:outline-primary-button active:outline-primary-button outline-none"
               placeholder="Your admin password"
               minLength={6}
               required={true}
@@ -280,7 +280,7 @@ const MyTeam = ({ setMultiUserLoginValid, myTeamSubmitRef, navigate }) => {
                 <input
                   name="username"
                   type="text"
-                  className="bg-zinc-900 text-white text-sm rounded-lg block w-full p-2.5"
+                  className="bg-zinc-900 text-white text-sm rounded-lg block w-full p-2.5 focus:outline-primary-button active:outline-primary-button outline-none"
                   placeholder="Your admin username"
                   minLength={6}
                   required={true}
@@ -298,7 +298,7 @@ const MyTeam = ({ setMultiUserLoginValid, myTeamSubmitRef, navigate }) => {
                 <input
                   name="password"
                   type="password"
-                  className="bg-zinc-900 text-white text-sm rounded-lg block w-full p-2.5"
+                  className="bg-zinc-900 text-white text-sm rounded-lg block w-full p-2.5 focus:outline-primary-button active:outline-primary-button outline-none"
                   placeholder="Your admin password"
                   minLength={8}
                   required={true}
diff --git a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx
index 64784c08479..e9cb295e4a6 100644
--- a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx
@@ -137,7 +137,7 @@ function SetupProvider({
               <button
                 type="submit"
                 form="provider-form"
-                className="border-none text-xs px-2 py-1 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-[#46C8FF] hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
+                className="border-none text-xs px-2 py-1 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-primary-button hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
               >
                 Save {LLMOption.name} settings
               </button>
diff --git a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/index.jsx b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/index.jsx
index ac507e92986..dfa7a2998a5 100644
--- a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/index.jsx
@@ -120,7 +120,7 @@ export default function AgentLLMSelection({
           />
         )}
         {searchMenuOpen ? (
-          <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
+          <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
             <div className="w-full flex flex-col gap-y-1">
               <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
                 <MagnifyingGlass
@@ -133,7 +133,7 @@ export default function AgentLLMSelection({
                   name="llm-search"
                   autoComplete="off"
                   placeholder="Search available LLM providers"
-                  className="border-none -ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:border-white text-white placeholder:text-white placeholder:font-medium"
+                  className="border-none -ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white placeholder:text-white placeholder:font-medium"
                   onChange={(e) => setSearchQuery(e.target.value)}
                   ref={searchInputRef}
                   onKeyDown={(e) => {
@@ -165,7 +165,7 @@ export default function AgentLLMSelection({
           </div>
         ) : (
           <button
-            className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
+            className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
             type="button"
             onClick={() => setSearchMenuOpen(true)}
           >
diff --git a/frontend/src/pages/WorkspaceSettings/AgentConfig/WebSearchSelection/index.jsx b/frontend/src/pages/WorkspaceSettings/AgentConfig/WebSearchSelection/index.jsx
index 09eba16b502..bd22f473169 100644
--- a/frontend/src/pages/WorkspaceSettings/AgentConfig/WebSearchSelection/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/AgentConfig/WebSearchSelection/index.jsx
@@ -127,7 +127,7 @@ export default function AgentWebSearchSelection({
             />
           )}
           {searchMenuOpen ? (
-            <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-[#18181B] rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
+            <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-[#18181B] rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
               <div className="w-full flex flex-col gap-y-1">
                 <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-[#18181B]">
                   <MagnifyingGlass
@@ -140,7 +140,7 @@ export default function AgentWebSearchSelection({
                     name="web-provider-search"
                     autoComplete="off"
                     placeholder="Search available web-search providers"
-                    className="border-none -ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:border-white text-white placeholder:text-white placeholder:font-medium"
+                    className="border-none -ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white placeholder:text-white placeholder:font-medium"
                     onChange={(e) => setSearchQuery(e.target.value)}
                     ref={searchInputRef}
                     onKeyDown={(e) => {
@@ -170,7 +170,7 @@ export default function AgentWebSearchSelection({
             </div>
           ) : (
             <button
-              className="w-full max-w-[640px] h-[64px] bg-[#18181B] rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
+              className="w-full max-w-[640px] h-[64px] bg-[#18181B] rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
               type="button"
               onClick={() => setSearchMenuOpen(true)}
             >
diff --git a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx
index 48131196391..610298ee096 100644
--- a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx
@@ -137,7 +137,7 @@ function SetupProvider({
               <button
                 type="submit"
                 form="provider-form"
-                className="text-xs px-2 py-1 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-[#46C8FF] hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
+                className="text-xs px-2 py-1 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-primary-button hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
               >
                 Save {LLMOption.name} settings
               </button>
diff --git a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/index.jsx b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/index.jsx
index 7542f2d76c8..e80e55491b5 100644
--- a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/index.jsx
@@ -80,7 +80,7 @@ export default function WorkspaceLLMSelection({
           />
         )}
         {searchMenuOpen ? (
-          <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
+          <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
             <div className="w-full flex flex-col gap-y-1">
               <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
                 <MagnifyingGlass
@@ -93,7 +93,7 @@ export default function WorkspaceLLMSelection({
                   name="llm-search"
                   autoComplete="off"
                   placeholder={t("chat.llm.search")}
-                  className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:border-white text-white placeholder:text-white placeholder:font-medium"
+                  className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white placeholder:text-white placeholder:font-medium"
                   onChange={(e) => setSearchQuery(e.target.value)}
                   ref={searchInputRef}
                   onKeyDown={(e) => {
@@ -125,7 +125,7 @@ export default function WorkspaceLLMSelection({
           </div>
         ) : (
           <button
-            className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
+            className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
             type="button"
             onClick={() => setSearchMenuOpen(true)}
           >
diff --git a/frontend/src/pages/WorkspaceSettings/Members/AddMemberModal/index.jsx b/frontend/src/pages/WorkspaceSettings/Members/AddMemberModal/index.jsx
index 383ef8cd8b9..a7a48efcd9c 100644
--- a/frontend/src/pages/WorkspaceSettings/Members/AddMemberModal/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/Members/AddMemberModal/index.jsx
@@ -152,7 +152,7 @@ export default function AddMemberModal({ closeModal, workspace, users }) {
             </div>
             <button
               type="submit"
-              className="transition-all duration-300 text-xs px-2 py-1 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-[#46C8FF] hover:text-white h-[32px] w-[68px] -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
+              className="transition-all duration-300 text-xs px-2 py-1 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-primary-button hover:text-white h-[32px] w-[68px] -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
             >
               Save
             </button>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 098486b23c9..e5131be3cb6 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: 'false',
+  darkMode: "false",
   content: {
     relative: true,
     files: [
@@ -11,7 +11,7 @@ export default {
       "./src/utils/**/*.js",
       "./src/*.jsx",
       "./index.html",
-      './node_modules/@tremor/**/*.{js,ts,jsx,tsx}'
+      "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}"
     ]
   },
   theme: {
@@ -101,30 +101,30 @@ export default {
     {
       pattern:
         /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-      variants: ['hover', 'ui-selected'],
+      variants: ["hover", "ui-selected"]
     },
     {
       pattern:
         /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-      variants: ['hover', 'ui-selected'],
+      variants: ["hover", "ui-selected"]
     },
     {
       pattern:
         /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-      variants: ['hover', 'ui-selected'],
+      variants: ["hover", "ui-selected"]
     },
     {
       pattern:
-        /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+        /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/
     },
     {
       pattern:
-        /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+        /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/
     },
     {
       pattern:
-        /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-    },
+        /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/
+    }
   ],
   plugins: []
 }

From 4cbcaf4bf8b139967450e76a1b9edc801655c65c Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 26 Jun 2024 17:24:06 -0700
Subject: [PATCH 3/7] remove red from trash icons

---
 frontend/src/pages/GeneralSettings/ApiKeys/ApiKeyRow/index.jsx  | 2 +-
 frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx      | 2 +-
 frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/GeneralSettings/ApiKeys/ApiKeyRow/index.jsx b/frontend/src/pages/GeneralSettings/ApiKeys/ApiKeyRow/index.jsx
index 6b970bf3ef7..17ca0250650 100644
--- a/frontend/src/pages/GeneralSettings/ApiKeys/ApiKeyRow/index.jsx
+++ b/frontend/src/pages/GeneralSettings/ApiKeys/ApiKeyRow/index.jsx
@@ -65,7 +65,7 @@ export default function ApiKeyRow({ apiKey }) {
           </button>
           <button
             onClick={handleDelete}
-            className="font-medium text-red-300 px-2 py-1 rounded-lg hover:bg-red-800 hover:bg-opacity-20"
+            className="font-medium px-2 py-1 rounded-lg hover:bg-sidebar-gradient text-white hover:text-white/80 hover:bg-opacity-20"
           >
             <Trash className="h-5 w-5" />
           </button>
diff --git a/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx b/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx
index 5c0744f12f3..d487994e7e9 100644
--- a/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx
@@ -53,7 +53,7 @@ export default function ChatRow({ chat, onDelete }) {
         <td className="px-6 py-4 flex items-center gap-x-6">
           <button
             onClick={handleDelete}
-            className="font-medium text-red-300 px-2 py-1 rounded-lg hover:bg-red-800 hover:bg-opacity-20"
+            className="font-medium px-2 py-1 rounded-lg hover:bg-sidebar-gradient text-white hover:text-white/80 hover:bg-opacity-20"
           >
             <Trash className="h-5 w-5" />
           </button>
diff --git a/frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx b/frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx
index a9c125cf4fa..208dfc7bd7f 100644
--- a/frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx
@@ -66,7 +66,7 @@ export default function ChatRow({ chat, onDelete }) {
         <td className="px-6 py-4 flex items-center gap-x-6">
           <button
             onClick={handleDelete}
-            className="font-medium text-red-300 px-2 py-1 rounded-lg hover:bg-red-800 hover:bg-opacity-20"
+            className="font-medium px-2 py-1 rounded-lg hover:bg-sidebar-gradient text-white hover:text-white/80 hover:bg-opacity-20"
           >
             <Trash className="h-5 w-5" />
           </button>

From 13b7b5238e5974e641e1caaec1364525565d26b9 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 26 Jun 2024 17:35:04 -0700
Subject: [PATCH 4/7] fix margin from input title

---
 .../EmbeddingSelection/AzureAiOptions/index.jsx      |  6 +++---
 .../EmbeddingSelection/CohereOptions/index.jsx       |  4 ++--
 .../GenericOpenAiOptions/index.jsx                   |  6 +++---
 .../EmbeddingSelection/LiteLLMOptions/index.jsx      |  8 ++++----
 .../EmbeddingSelection/LocalAiOptions/index.jsx      |  8 ++++----
 .../EmbeddingSelection/OpenAiOptions/index.jsx       |  4 ++--
 .../EmbeddingSelection/VoyageAiOptions/index.jsx     |  4 ++--
 .../LLMSelection/AnthropicAiOptions/index.jsx        |  4 ++--
 .../components/LLMSelection/AzureAiOptions/index.jsx | 10 +++++-----
 .../LLMSelection/CohereAiOptions/index.jsx           |  4 ++--
 .../LLMSelection/GeminiLLMOptions/index.jsx          |  6 +++---
 .../LLMSelection/GenericOpenAiOptions/index.jsx      | 10 +++++-----
 .../components/LLMSelection/GroqAiOptions/index.jsx  |  4 ++--
 .../LLMSelection/HuggingFaceOptions/index.jsx        |  6 +++---
 .../LLMSelection/KoboldCPPOptions/index.jsx          |  8 ++++----
 .../components/LLMSelection/LiteLLMOptions/index.jsx |  8 ++++----
 .../components/LLMSelection/LocalAiOptions/index.jsx |  8 ++++----
 .../components/LLMSelection/MistralOptions/index.jsx |  6 +++---
 .../LLMSelection/NativeLLMOptions/index.jsx          |  6 +++---
 .../components/LLMSelection/OpenAiOptions/index.jsx  |  6 +++---
 .../LLMSelection/OpenRouterOptions/index.jsx         |  6 +++---
 .../LLMSelection/PerplexityOptions/index.jsx         |  6 +++---
 .../LLMSelection/TextGenWebUIOptions/index.jsx       |  6 +++---
 .../LLMSelection/TogetherAiOptions/index.jsx         |  6 +++---
 .../TextToSpeech/ElevenLabsOptions/index.jsx         |  6 +++---
 .../components/TextToSpeech/OpenAiOptions/index.jsx  |  4 ++--
 .../NativeTranscriptionOptions/index.jsx             |  2 +-
 .../TranscriptionSelection/OpenAiOptions/index.jsx   |  4 ++--
 .../VectorDBSelection/AstraDBOptions/index.jsx       |  4 ++--
 .../VectorDBSelection/ChromaDBOptions/index.jsx      |  6 +++---
 .../VectorDBSelection/MilvusDBOptions/index.jsx      |  6 +++---
 .../VectorDBSelection/PineconeDBOptions/index.jsx    |  4 ++--
 .../VectorDBSelection/QDrantDBOptions/index.jsx      |  4 ++--
 .../VectorDBSelection/WeaviateDBOptions/index.jsx    |  4 ++--
 .../VectorDBSelection/ZillizCloudOptions/index.jsx   |  4 ++--
 .../SQLConnectorSelection/NewConnectionModal.jsx     | 12 ++++++------
 .../SearchProviderOptions/index.jsx                  | 12 ++++++------
 37 files changed, 111 insertions(+), 111 deletions(-)

diff --git a/frontend/src/components/EmbeddingSelection/AzureAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/AzureAiOptions/index.jsx
index c46be12e0a2..d5ceae6b8d9 100644
--- a/frontend/src/components/EmbeddingSelection/AzureAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/AzureAiOptions/index.jsx
@@ -3,7 +3,7 @@ export default function AzureAiOptions({ settings }) {
     <div className="w-full flex flex-col gap-y-4">
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Azure Service Endpoint
           </label>
           <input
@@ -19,7 +19,7 @@ export default function AzureAiOptions({ settings }) {
         </div>
 
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             API Key
           </label>
           <input
@@ -35,7 +35,7 @@ export default function AzureAiOptions({ settings }) {
         </div>
 
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Embedding Deployment Name
           </label>
           <input
diff --git a/frontend/src/components/EmbeddingSelection/CohereOptions/index.jsx b/frontend/src/components/EmbeddingSelection/CohereOptions/index.jsx
index 9274a6b7093..cbc0d9cd37c 100644
--- a/frontend/src/components/EmbeddingSelection/CohereOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/CohereOptions/index.jsx
@@ -3,7 +3,7 @@ export default function CohereEmbeddingOptions({ settings }) {
     <div className="w-full flex flex-col gap-y-4">
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             API Key
           </label>
           <input
@@ -18,7 +18,7 @@ export default function CohereEmbeddingOptions({ settings }) {
           />
         </div>
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Model Preference
           </label>
           <select
diff --git a/frontend/src/components/EmbeddingSelection/GenericOpenAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/GenericOpenAiOptions/index.jsx
index dc10c51b710..ea9d9c2bc2f 100644
--- a/frontend/src/components/EmbeddingSelection/GenericOpenAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/GenericOpenAiOptions/index.jsx
@@ -3,7 +3,7 @@ export default function GenericOpenAiEmbeddingOptions({ settings }) {
     <div className="w-full flex flex-col gap-y-4">
       <div className="w-full flex items-center gap-4 flex-wrap">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Base URL
           </label>
           <input
@@ -18,7 +18,7 @@ export default function GenericOpenAiEmbeddingOptions({ settings }) {
           />
         </div>
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Embedding Model
           </label>
           <input
@@ -33,7 +33,7 @@ export default function GenericOpenAiEmbeddingOptions({ settings }) {
           />
         </div>
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Max embedding chunk length
           </label>
           <input
diff --git a/frontend/src/components/EmbeddingSelection/LiteLLMOptions/index.jsx b/frontend/src/components/EmbeddingSelection/LiteLLMOptions/index.jsx
index e6263a4e3f2..349a3d536bc 100644
--- a/frontend/src/components/EmbeddingSelection/LiteLLMOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/LiteLLMOptions/index.jsx
@@ -13,7 +13,7 @@ export default function LiteLLMOptions({ settings }) {
     <div className="w-full flex flex-col gap-y-4">
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Base URL
           </label>
           <input
@@ -35,7 +35,7 @@ export default function LiteLLMOptions({ settings }) {
           apiKey={apiKey}
         />
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Max embedding chunk length
           </label>
           <input
@@ -101,7 +101,7 @@ function LiteLLMModelSelection({ settings, basePath = null, apiKey = null }) {
   if (loading || customModels.length == 0) {
     return (
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Embedding Model Selection
         </label>
         <select
@@ -122,7 +122,7 @@ function LiteLLMModelSelection({ settings, basePath = null, apiKey = null }) {
   return (
     <div className="flex flex-col w-60">
       <div className="flex items-center">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Embedding Model Selection
         </label>
         <EmbeddingModelTooltip />
diff --git a/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
index 97462941f5e..8a4c1979d4d 100644
--- a/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
@@ -13,7 +13,7 @@ export default function LocalAiOptions({ settings }) {
     <div className="w-full flex flex-col gap-y-4">
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             LocalAI Base URL
           </label>
           <input
@@ -35,7 +35,7 @@ export default function LocalAiOptions({ settings }) {
           basePath={basePath}
         />
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Max embedding chunk length
           </label>
           <input
@@ -102,7 +102,7 @@ function LocalAIModelSelection({ settings, apiKey = null, basePath = null }) {
   if (loading || customModels.length == 0) {
     return (
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Embedding Model Name
         </label>
         <select
@@ -122,7 +122,7 @@ function LocalAIModelSelection({ settings, apiKey = null, basePath = null }) {
 
   return (
     <div className="flex flex-col w-60">
-      <label className="text-white text-sm font-semibold block mb-4">
+      <label className="text-white text-sm font-semibold block mb-3">
         Embedding Model Name
       </label>
       <select
diff --git a/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx
index f68d5a97905..e97c01fd03f 100644
--- a/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx
@@ -3,7 +3,7 @@ export default function OpenAiOptions({ settings }) {
     <div className="w-full flex flex-col gap-y-4">
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             API Key
           </label>
           <input
@@ -18,7 +18,7 @@ export default function OpenAiOptions({ settings }) {
           />
         </div>
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Model Preference
           </label>
           <select
diff --git a/frontend/src/components/EmbeddingSelection/VoyageAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/VoyageAiOptions/index.jsx
index 5a59d02b8c2..0d9233f8cb8 100644
--- a/frontend/src/components/EmbeddingSelection/VoyageAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/VoyageAiOptions/index.jsx
@@ -3,7 +3,7 @@ export default function VoyageAiOptions({ settings }) {
     <div className="w-full flex flex-col gap-y-4">
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             API Key
           </label>
           <input
@@ -18,7 +18,7 @@ export default function VoyageAiOptions({ settings }) {
           />
         </div>
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Model Preference
           </label>
           <select
diff --git a/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx b/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx
index 0e49f1669ac..dbbd296332d 100644
--- a/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx
@@ -3,7 +3,7 @@ export default function AnthropicAiOptions({ settings }) {
     <div className="w-full flex flex-col">
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Anthropic API Key
           </label>
           <input
@@ -20,7 +20,7 @@ export default function AnthropicAiOptions({ settings }) {
 
         {!settings?.credentialsOnly && (
           <div className="flex flex-col w-60">
-            <label className="text-white text-sm font-semibold block mb-4">
+            <label className="text-white text-sm font-semibold block mb-3">
               Chat Model Selection
             </label>
             <select
diff --git a/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx b/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx
index d4d81a0fde2..09580963c45 100644
--- a/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx
@@ -3,7 +3,7 @@ export default function AzureAiOptions({ settings }) {
     <div className="w-full flex flex-col gap-y-4">
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Azure Service Endpoint
           </label>
           <input
@@ -19,7 +19,7 @@ export default function AzureAiOptions({ settings }) {
         </div>
 
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             API Key
           </label>
           <input
@@ -35,7 +35,7 @@ export default function AzureAiOptions({ settings }) {
         </div>
 
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Chat Deployment Name
           </label>
           <input
@@ -53,7 +53,7 @@ export default function AzureAiOptions({ settings }) {
 
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Chat Model Token Limit
           </label>
           <select
@@ -71,7 +71,7 @@ export default function AzureAiOptions({ settings }) {
         </div>
 
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Embedding Deployment Name
           </label>
           <input
diff --git a/frontend/src/components/LLMSelection/CohereAiOptions/index.jsx b/frontend/src/components/LLMSelection/CohereAiOptions/index.jsx
index 328ea61d27e..23fdae060ab 100644
--- a/frontend/src/components/LLMSelection/CohereAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/CohereAiOptions/index.jsx
@@ -3,7 +3,7 @@ export default function CohereAiOptions({ settings }) {
     <div className="w-full flex flex-col">
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Cohere API Key
           </label>
           <input
@@ -18,7 +18,7 @@ export default function CohereAiOptions({ settings }) {
           />
         </div>
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Chat Model Selection
           </label>
           <select
diff --git a/frontend/src/components/LLMSelection/GeminiLLMOptions/index.jsx b/frontend/src/components/LLMSelection/GeminiLLMOptions/index.jsx
index 8ffad16490e..07dead19880 100644
--- a/frontend/src/components/LLMSelection/GeminiLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/GeminiLLMOptions/index.jsx
@@ -3,7 +3,7 @@ export default function GeminiLLMOptions({ settings }) {
     <div className="w-full flex flex-col">
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Google AI API Key
           </label>
           <input
@@ -21,7 +21,7 @@ export default function GeminiLLMOptions({ settings }) {
         {!settings?.credentialsOnly && (
           <>
             <div className="flex flex-col w-60">
-              <label className="text-white text-sm font-semibold block mb-4">
+              <label className="text-white text-sm font-semibold block mb-3">
                 Chat Model Selection
               </label>
               <select
@@ -45,7 +45,7 @@ export default function GeminiLLMOptions({ settings }) {
               </select>
             </div>
             <div className="flex flex-col w-60">
-              <label className="text-white text-sm font-semibold block mb-4">
+              <label className="text-white text-sm font-semibold block mb-3">
                 Safety Setting
               </label>
               <select
diff --git a/frontend/src/components/LLMSelection/GenericOpenAiOptions/index.jsx b/frontend/src/components/LLMSelection/GenericOpenAiOptions/index.jsx
index a5b121f52c8..0287fdc39a6 100644
--- a/frontend/src/components/LLMSelection/GenericOpenAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/GenericOpenAiOptions/index.jsx
@@ -3,7 +3,7 @@ export default function GenericOpenAiOptions({ settings }) {
     <div className="flex flex-col gap-y-4">
       <div className="flex gap-4 flex-wrap">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Base URL
           </label>
           <input
@@ -18,7 +18,7 @@ export default function GenericOpenAiOptions({ settings }) {
           />
         </div>
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             API Key
           </label>
           <input
@@ -33,7 +33,7 @@ export default function GenericOpenAiOptions({ settings }) {
           />
         </div>
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Chat Model Name
           </label>
           <input
@@ -49,7 +49,7 @@ export default function GenericOpenAiOptions({ settings }) {
       </div>
       <div className="flex gap-x-4 flex-wrap">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Token context window
           </label>
           <input
@@ -65,7 +65,7 @@ export default function GenericOpenAiOptions({ settings }) {
           />
         </div>
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Max Tokens
           </label>
           <input
diff --git a/frontend/src/components/LLMSelection/GroqAiOptions/index.jsx b/frontend/src/components/LLMSelection/GroqAiOptions/index.jsx
index ef37b74b155..0bfe000586f 100644
--- a/frontend/src/components/LLMSelection/GroqAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/GroqAiOptions/index.jsx
@@ -2,7 +2,7 @@ export default function GroqAiOptions({ settings }) {
   return (
     <div className="flex gap-x-4">
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Groq API Key
         </label>
         <input
@@ -19,7 +19,7 @@ export default function GroqAiOptions({ settings }) {
 
       {!settings?.credentialsOnly && (
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Chat Model Selection
           </label>
           <select
diff --git a/frontend/src/components/LLMSelection/HuggingFaceOptions/index.jsx b/frontend/src/components/LLMSelection/HuggingFaceOptions/index.jsx
index d20757861bb..1a92885c561 100644
--- a/frontend/src/components/LLMSelection/HuggingFaceOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/HuggingFaceOptions/index.jsx
@@ -3,7 +3,7 @@ export default function HuggingFaceOptions({ settings }) {
     <div className="w-full flex flex-col">
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             HuggingFace Inference Endpoint
           </label>
           <input
@@ -18,7 +18,7 @@ export default function HuggingFaceOptions({ settings }) {
           />
         </div>
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             HuggingFace Access Token
           </label>
           <input
@@ -35,7 +35,7 @@ export default function HuggingFaceOptions({ settings }) {
           />
         </div>
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Model Token Limit
           </label>
           <input
diff --git a/frontend/src/components/LLMSelection/KoboldCPPOptions/index.jsx b/frontend/src/components/LLMSelection/KoboldCPPOptions/index.jsx
index 16cd0fb944e..5b5fe790e68 100644
--- a/frontend/src/components/LLMSelection/KoboldCPPOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/KoboldCPPOptions/index.jsx
@@ -10,7 +10,7 @@ export default function KoboldCPPOptions({ settings }) {
   return (
     <div className="flex gap-4 flex-wrap">
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Base URL
         </label>
         <input
@@ -28,7 +28,7 @@ export default function KoboldCPPOptions({ settings }) {
       </div>
       <KoboldCPPModelSelection settings={settings} basePath={basePath} />
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Token context window
         </label>
         <input
@@ -69,7 +69,7 @@ function KoboldCPPModelSelection({ settings, basePath = null }) {
   if (loading || customModels.length === 0) {
     return (
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Chat Model Selection
         </label>
         <select
@@ -89,7 +89,7 @@ function KoboldCPPModelSelection({ settings, basePath = null }) {
 
   return (
     <div className="flex flex-col w-60">
-      <label className="text-white text-sm font-semibold block mb-4">
+      <label className="text-white text-sm font-semibold block mb-3">
         Chat Model Selection
       </label>
       <select
diff --git a/frontend/src/components/LLMSelection/LiteLLMOptions/index.jsx b/frontend/src/components/LLMSelection/LiteLLMOptions/index.jsx
index 09a6eead991..f087ba5a61c 100644
--- a/frontend/src/components/LLMSelection/LiteLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/LiteLLMOptions/index.jsx
@@ -11,7 +11,7 @@ export default function LiteLLMOptions({ settings }) {
     <div className="w-full flex flex-col gap-y-4">
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Base URL
           </label>
           <input
@@ -33,7 +33,7 @@ export default function LiteLLMOptions({ settings }) {
           apiKey={apiKey}
         />
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Token context window
           </label>
           <input
@@ -99,7 +99,7 @@ function LiteLLMModelSelection({ settings, basePath = null, apiKey = null }) {
   if (loading || customModels.length == 0) {
     return (
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Chat Model Selection
         </label>
         <select
@@ -119,7 +119,7 @@ function LiteLLMModelSelection({ settings, basePath = null, apiKey = null }) {
 
   return (
     <div className="flex flex-col w-60">
-      <label className="text-white text-sm font-semibold block mb-4">
+      <label className="text-white text-sm font-semibold block mb-3">
         Chat Model Selection
       </label>
       <select
diff --git a/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx b/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx
index 7faeb0e0f09..9af456a8bee 100644
--- a/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx
@@ -30,7 +30,7 @@ export default function LocalAiOptions({ settings, showAlert = false }) {
       )}
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Local AI Base URL
           </label>
           <input
@@ -54,7 +54,7 @@ export default function LocalAiOptions({ settings, showAlert = false }) {
               apiKey={apiKey}
             />
             <div className="flex flex-col w-60">
-              <label className="text-white text-sm font-semibold block mb-4">
+              <label className="text-white text-sm font-semibold block mb-3">
                 Token context window
               </label>
               <input
@@ -124,7 +124,7 @@ function LocalAIModelSelection({ settings, basePath = null, apiKey = null }) {
   if (loading || customModels.length == 0) {
     return (
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Chat Model Selection
         </label>
         <select
@@ -144,7 +144,7 @@ function LocalAIModelSelection({ settings, basePath = null, apiKey = null }) {
 
   return (
     <div className="flex flex-col w-60">
-      <label className="text-white text-sm font-semibold block mb-4">
+      <label className="text-white text-sm font-semibold block mb-3">
         Chat Model Selection
       </label>
       <select
diff --git a/frontend/src/components/LLMSelection/MistralOptions/index.jsx b/frontend/src/components/LLMSelection/MistralOptions/index.jsx
index c1a3d27602d..f97add16580 100644
--- a/frontend/src/components/LLMSelection/MistralOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/MistralOptions/index.jsx
@@ -8,7 +8,7 @@ export default function MistralOptions({ settings }) {
   return (
     <div className="flex gap-x-4">
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Mistral API Key
         </label>
         <input
@@ -56,7 +56,7 @@ function MistralModelSelection({ apiKey, settings }) {
   if (loading || customModels.length == 0) {
     return (
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Chat Model Selection
         </label>
         <select
@@ -76,7 +76,7 @@ function MistralModelSelection({ apiKey, settings }) {
 
   return (
     <div className="flex flex-col w-60">
-      <label className="text-white text-sm font-semibold block mb-4">
+      <label className="text-white text-sm font-semibold block mb-3">
         Chat Model Selection
       </label>
       <select
diff --git a/frontend/src/components/LLMSelection/NativeLLMOptions/index.jsx b/frontend/src/components/LLMSelection/NativeLLMOptions/index.jsx
index 33dbc4d8361..5bc0210d055 100644
--- a/frontend/src/components/LLMSelection/NativeLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/NativeLLMOptions/index.jsx
@@ -37,7 +37,7 @@ function NativeModelSelection({ settings }) {
   if (loading || customModels.length == 0) {
     return (
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Model Selection
         </label>
         <select
@@ -56,7 +56,7 @@ function NativeModelSelection({ settings }) {
   return (
     <>
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Model Selection
         </label>
         <select
@@ -82,7 +82,7 @@ function NativeModelSelection({ settings }) {
         </select>
       </div>
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Token context window
         </label>
         <input
diff --git a/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx b/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx
index 05e19b9d783..a31a8e93212 100644
--- a/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx
@@ -8,7 +8,7 @@ export default function OpenAiOptions({ settings }) {
   return (
     <div className="flex gap-x-4">
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           API Key
         </label>
         <input
@@ -60,7 +60,7 @@ function OpenAIModelSelection({ apiKey, settings }) {
   if (loading) {
     return (
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Chat Model Selection
         </label>
         <select
@@ -78,7 +78,7 @@ function OpenAIModelSelection({ apiKey, settings }) {
 
   return (
     <div className="flex flex-col w-60">
-      <label className="text-white text-sm font-semibold block mb-4">
+      <label className="text-white text-sm font-semibold block mb-3">
         Chat Model Selection
       </label>
       <select
diff --git a/frontend/src/components/LLMSelection/OpenRouterOptions/index.jsx b/frontend/src/components/LLMSelection/OpenRouterOptions/index.jsx
index 5556b3f164f..26b8d799722 100644
--- a/frontend/src/components/LLMSelection/OpenRouterOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/OpenRouterOptions/index.jsx
@@ -5,7 +5,7 @@ export default function OpenRouterOptions({ settings }) {
   return (
     <div className="flex gap-x-4">
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           OpenRouter API Key
         </label>
         <input
@@ -52,7 +52,7 @@ function OpenRouterModelSelection({ settings }) {
   if (loading || Object.keys(groupedModels).length === 0) {
     return (
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Chat Model Selection
         </label>
         <select
@@ -70,7 +70,7 @@ function OpenRouterModelSelection({ settings }) {
 
   return (
     <div className="flex flex-col w-60">
-      <label className="text-white text-sm font-semibold block mb-4">
+      <label className="text-white text-sm font-semibold block mb-3">
         Chat Model Selection
       </label>
       <select
diff --git a/frontend/src/components/LLMSelection/PerplexityOptions/index.jsx b/frontend/src/components/LLMSelection/PerplexityOptions/index.jsx
index 3270fa00b77..8e247582bf1 100644
--- a/frontend/src/components/LLMSelection/PerplexityOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/PerplexityOptions/index.jsx
@@ -5,7 +5,7 @@ export default function PerplexityOptions({ settings }) {
   return (
     <div className="flex gap-x-4">
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Perplexity API Key
         </label>
         <input
@@ -43,7 +43,7 @@ function PerplexityModelSelection({ settings }) {
   if (loading || customModels.length == 0) {
     return (
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Chat Model Selection
         </label>
         <select
@@ -61,7 +61,7 @@ function PerplexityModelSelection({ settings }) {
 
   return (
     <div className="flex flex-col w-60">
-      <label className="text-white text-sm font-semibold block mb-4">
+      <label className="text-white text-sm font-semibold block mb-3">
         Chat Model Selection
       </label>
       <select
diff --git a/frontend/src/components/LLMSelection/TextGenWebUIOptions/index.jsx b/frontend/src/components/LLMSelection/TextGenWebUIOptions/index.jsx
index 866418e1f68..c69c065e1df 100644
--- a/frontend/src/components/LLMSelection/TextGenWebUIOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/TextGenWebUIOptions/index.jsx
@@ -2,7 +2,7 @@ export default function TextGenWebUIOptions({ settings }) {
   return (
     <div className="flex gap-4 flex-wrap">
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Base URL
         </label>
         <input
@@ -17,7 +17,7 @@ export default function TextGenWebUIOptions({ settings }) {
         />
       </div>
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Token context window
         </label>
         <input
@@ -33,7 +33,7 @@ export default function TextGenWebUIOptions({ settings }) {
         />
       </div>
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           API Key (Optional)
         </label>
         <input
diff --git a/frontend/src/components/LLMSelection/TogetherAiOptions/index.jsx b/frontend/src/components/LLMSelection/TogetherAiOptions/index.jsx
index cdc095fb866..b9cfe35cdc4 100644
--- a/frontend/src/components/LLMSelection/TogetherAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/TogetherAiOptions/index.jsx
@@ -5,7 +5,7 @@ export default function TogetherAiOptions({ settings }) {
   return (
     <div className="flex gap-x-4">
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Together AI API Key
         </label>
         <input
@@ -52,7 +52,7 @@ function TogetherAiModelSelection({ settings }) {
   if (loading || Object.keys(groupedModels).length === 0) {
     return (
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Chat Model Selection
         </label>
         <select
@@ -70,7 +70,7 @@ function TogetherAiModelSelection({ settings }) {
 
   return (
     <div className="flex flex-col w-60">
-      <label className="text-white text-sm font-semibold block mb-4">
+      <label className="text-white text-sm font-semibold block mb-3">
         Chat Model Selection
       </label>
       <select
diff --git a/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx b/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx
index c7d0961b377..d1a0d48b0ce 100644
--- a/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx
+++ b/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx
@@ -8,7 +8,7 @@ export default function ElevenLabsOptions({ settings }) {
   return (
     <div className="flex gap-x-4">
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           API Key
         </label>
         <input
@@ -60,7 +60,7 @@ function ElevenLabsModelSelection({ apiKey, settings }) {
   if (loading) {
     return (
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Chat Model Selection
         </label>
         <select
@@ -78,7 +78,7 @@ function ElevenLabsModelSelection({ apiKey, settings }) {
 
   return (
     <div className="flex flex-col w-60">
-      <label className="text-white text-sm font-semibold block mb-4">
+      <label className="text-white text-sm font-semibold block mb-3">
         Chat Model Selection
       </label>
       <select
diff --git a/frontend/src/components/TextToSpeech/OpenAiOptions/index.jsx b/frontend/src/components/TextToSpeech/OpenAiOptions/index.jsx
index 176b4ad8944..490e8486a11 100644
--- a/frontend/src/components/TextToSpeech/OpenAiOptions/index.jsx
+++ b/frontend/src/components/TextToSpeech/OpenAiOptions/index.jsx
@@ -10,7 +10,7 @@ export default function OpenAiTextToSpeechOptions({ settings }) {
   return (
     <div className="flex gap-x-4">
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           API Key
         </label>
         <input
@@ -25,7 +25,7 @@ export default function OpenAiTextToSpeechOptions({ settings }) {
         />
       </div>
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Voice Model
         </label>
         <select
diff --git a/frontend/src/components/TranscriptionSelection/NativeTranscriptionOptions/index.jsx b/frontend/src/components/TranscriptionSelection/NativeTranscriptionOptions/index.jsx
index 1ffad8ddefb..dd14fb855cd 100644
--- a/frontend/src/components/TranscriptionSelection/NativeTranscriptionOptions/index.jsx
+++ b/frontend/src/components/TranscriptionSelection/NativeTranscriptionOptions/index.jsx
@@ -11,7 +11,7 @@ export default function NativeTranscriptionOptions({ settings }) {
       <LocalWarning model={model} />
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             {t("common.selection")}
           </label>
           <select
diff --git a/frontend/src/components/TranscriptionSelection/OpenAiOptions/index.jsx b/frontend/src/components/TranscriptionSelection/OpenAiOptions/index.jsx
index 4f8a3a8cd4b..e10fa4f6641 100644
--- a/frontend/src/components/TranscriptionSelection/OpenAiOptions/index.jsx
+++ b/frontend/src/components/TranscriptionSelection/OpenAiOptions/index.jsx
@@ -7,7 +7,7 @@ export default function OpenAiWhisperOptions({ settings }) {
   return (
     <div className="flex gap-x-4">
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           API Key
         </label>
         <input
@@ -24,7 +24,7 @@ export default function OpenAiWhisperOptions({ settings }) {
         />
       </div>
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           Whisper Model
         </label>
         <select
diff --git a/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx
index 531239f01e5..cd5196e1e0b 100644
--- a/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx
@@ -3,7 +3,7 @@ export default function AstraDBOptions({ settings }) {
     <div className="w-full flex flex-col gap-y-4">
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Astra DB Endpoint
           </label>
           <input
@@ -19,7 +19,7 @@ export default function AstraDBOptions({ settings }) {
         </div>
 
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Astra DB Application Token
           </label>
           <input
diff --git a/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx
index 8114c5a45bb..62b8fde83c5 100644
--- a/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx
@@ -3,7 +3,7 @@ export default function ChromaDBOptions({ settings }) {
     <div className="w-full flex flex-col gap-y-4">
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Chroma Endpoint
           </label>
           <input
@@ -19,7 +19,7 @@ export default function ChromaDBOptions({ settings }) {
         </div>
 
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             API Header
           </label>
           <input
@@ -33,7 +33,7 @@ export default function ChromaDBOptions({ settings }) {
         </div>
 
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             API Key
           </label>
           <input
diff --git a/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx
index 00dd539d5d7..44c53f78e6b 100644
--- a/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx
@@ -3,7 +3,7 @@ export default function MilvusDBOptions({ settings }) {
     <div className="w-full flex flex-col gap-y-4">
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Milvus DB Address
           </label>
           <input
@@ -19,7 +19,7 @@ export default function MilvusDBOptions({ settings }) {
         </div>
 
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Milvus Username
           </label>
           <input
@@ -33,7 +33,7 @@ export default function MilvusDBOptions({ settings }) {
           />
         </div>
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Milvus Password
           </label>
           <input
diff --git a/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx
index 4feb866c307..1b9060208ac 100644
--- a/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx
@@ -3,7 +3,7 @@ export default function PineconeDBOptions({ settings }) {
     <div className="w-full flex flex-col gap-y-4">
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Pinecone DB API Key
           </label>
           <input
@@ -18,7 +18,7 @@ export default function PineconeDBOptions({ settings }) {
           />
         </div>
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Pinecone Index Name
           </label>
           <input
diff --git a/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx
index 716c48ed58e..b96e8eed36f 100644
--- a/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx
@@ -3,7 +3,7 @@ export default function QDrantDBOptions({ settings }) {
     <div className="w-full flex flex-col gap-y-4">
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             QDrant API Endpoint
           </label>
           <input
@@ -19,7 +19,7 @@ export default function QDrantDBOptions({ settings }) {
         </div>
 
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             API Key
           </label>
           <input
diff --git a/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx
index e2f5e57fca6..d74c4d99b9f 100644
--- a/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx
@@ -3,7 +3,7 @@ export default function WeaviateDBOptions({ settings }) {
     <div className="w-full flex flex-col gap-y-4">
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Weaviate Endpoint
           </label>
           <input
@@ -19,7 +19,7 @@ export default function WeaviateDBOptions({ settings }) {
         </div>
 
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             API Key
           </label>
           <input
diff --git a/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx b/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx
index 1253c47c99f..132e2a5b687 100644
--- a/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx
@@ -3,7 +3,7 @@ export default function ZillizCloudOptions({ settings }) {
     <div className="w-full flex flex-col gap-y-4">
       <div className="w-full flex items-center gap-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Cluster Endpoint
           </label>
           <input
@@ -19,7 +19,7 @@ export default function ZillizCloudOptions({ settings }) {
         </div>
 
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             API Token
           </label>
           <input
diff --git a/frontend/src/pages/Admin/Agents/SQLConnectorSelection/NewConnectionModal.jsx b/frontend/src/pages/Admin/Agents/SQLConnectorSelection/NewConnectionModal.jsx
index 6633b6429f3..e5f4c301627 100644
--- a/frontend/src/pages/Admin/Agents/SQLConnectorSelection/NewConnectionModal.jsx
+++ b/frontend/src/pages/Admin/Agents/SQLConnectorSelection/NewConnectionModal.jsx
@@ -134,7 +134,7 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
               </div>
 
               <div className="flex flex-col w-full">
-                <label className="text-white text-sm font-semibold block mb-4">
+                <label className="text-white text-sm font-semibold block mb-3">
                   Connection name
                 </label>
                 <input
@@ -150,7 +150,7 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
 
               <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                 <div className="flex flex-col">
-                  <label className="text-white text-sm font-semibold block mb-4">
+                  <label className="text-white text-sm font-semibold block mb-3">
                     Database user
                   </label>
                   <input
@@ -164,7 +164,7 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
                   />
                 </div>
                 <div className="flex flex-col">
-                  <label className="text-white text-sm font-semibold block mb-4">
+                  <label className="text-white text-sm font-semibold block mb-3">
                     Database user password
                   </label>
                   <input
@@ -181,7 +181,7 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
 
               <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
                 <div className="sm:col-span-2">
-                  <label className="text-white text-sm font-semibold block mb-4">
+                  <label className="text-white text-sm font-semibold block mb-3">
                     Server endpoint
                   </label>
                   <input
@@ -195,7 +195,7 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
                   />
                 </div>
                 <div>
-                  <label className="text-white text-sm font-semibold block mb-4">
+                  <label className="text-white text-sm font-semibold block mb-3">
                     Port
                   </label>
                   <input
@@ -211,7 +211,7 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
               </div>
 
               <div className="flex flex-col">
-                <label className="text-white text-sm font-semibold block mb-4">
+                <label className="text-white text-sm font-semibold block mb-3">
                   Database
                 </label>
                 <input
diff --git a/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderOptions/index.jsx b/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderOptions/index.jsx
index 86f0871b59b..f7ad09c0341 100644
--- a/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderOptions/index.jsx
+++ b/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderOptions/index.jsx
@@ -14,7 +14,7 @@ export function GoogleSearchOptions({ settings }) {
       </p>
       <div className="flex gap-x-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Search engine ID
           </label>
           <input
@@ -29,7 +29,7 @@ export function GoogleSearchOptions({ settings }) {
           />
         </div>
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             Programmatic Access API Key
           </label>
           <input
@@ -66,7 +66,7 @@ export function SerperDotDevOptions({ settings }) {
       </p>
       <div className="flex gap-x-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             API Key
           </label>
           <input
@@ -101,7 +101,7 @@ export function BingSearchOptions({ settings }) {
       </p>
       <div className="flex gap-x-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             API Key
           </label>
           <input
@@ -164,7 +164,7 @@ export function SerplySearchOptions({ settings }) {
       </p>
       <div className="flex gap-x-4">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-4">
+          <label className="text-white text-sm font-semibold block mb-3">
             API Key
           </label>
           <input
@@ -187,7 +187,7 @@ export function SearXNGOptions({ settings }) {
   return (
     <div className="flex gap-x-4">
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-4">
+        <label className="text-white text-sm font-semibold block mb-3">
           SearXNG API base URL
         </label>
         <input

From 3a0b5279029470d7bdad71b2217f6ade6d7f292e Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 26 Jun 2024 17:43:31 -0700
Subject: [PATCH 5/7] remove unused component and remove borders on provider
 search inputs

---
 .../Admin/Agents/WebSearchSelection/index.jsx |   2 +-
 .../GeneralSettings/AudioPreference/stt.jsx   |   2 +-
 .../GeneralSettings/AudioPreference/tts.jsx   |   2 +-
 .../EmbeddingPreference/index.jsx             |   2 +-
 .../GeneralSettings/LLMPreference/index.jsx   |   2 +-
 .../GeneralSettings/VectorDatabase/index.jsx  |   2 +-
 .../AgentConfig/AgentLLMSelection/index.jsx   |   2 +-
 .../AgentConfig/WebSearchSelection/index.jsx  | 204 ------------------
 8 files changed, 7 insertions(+), 211 deletions(-)
 delete mode 100644 frontend/src/pages/WorkspaceSettings/AgentConfig/WebSearchSelection/index.jsx

diff --git a/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx b/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx
index 7a1d23554b3..c1f14cc6ae2 100644
--- a/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx
+++ b/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx
@@ -172,7 +172,7 @@ export default function AgentWebSearchSelection({
                       name="web-provider-search"
                       autoComplete="off"
                       placeholder="Search available web-search providers"
-                      className="border-none -ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white placeholder:text-white placeholder:font-medium"
+                      className="border-none -ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-white placeholder:text-white placeholder:font-medium"
                       onChange={(e) => setSearchQuery(e.target.value)}
                       ref={searchInputRef}
                       onKeyDown={(e) => {
diff --git a/frontend/src/pages/GeneralSettings/AudioPreference/stt.jsx b/frontend/src/pages/GeneralSettings/AudioPreference/stt.jsx
index c9104cb3bc5..85a9acd17fd 100644
--- a/frontend/src/pages/GeneralSettings/AudioPreference/stt.jsx
+++ b/frontend/src/pages/GeneralSettings/AudioPreference/stt.jsx
@@ -122,7 +122,7 @@ export default function SpeechToTextProvider({ settings }) {
                     name="stt-provider-search"
                     autoComplete="off"
                     placeholder="Search speech to text providers"
-                    className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white placeholder:text-white placeholder:font-medium"
+                    className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-white placeholder:text-white placeholder:font-medium"
                     onChange={(e) => setSearchQuery(e.target.value)}
                     ref={searchInputRef}
                     onKeyDown={(e) => {
diff --git a/frontend/src/pages/GeneralSettings/AudioPreference/tts.jsx b/frontend/src/pages/GeneralSettings/AudioPreference/tts.jsx
index 77d89e8245d..dee8a844432 100644
--- a/frontend/src/pages/GeneralSettings/AudioPreference/tts.jsx
+++ b/frontend/src/pages/GeneralSettings/AudioPreference/tts.jsx
@@ -137,7 +137,7 @@ export default function TextToSpeechProvider({ settings }) {
                     name="tts-provider-search"
                     autoComplete="off"
                     placeholder="Search text to speech providers"
-                    className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white placeholder:text-white placeholder:font-medium"
+                    className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-white placeholder:text-white placeholder:font-medium"
                     onChange={(e) => setSearchQuery(e.target.value)}
                     ref={searchInputRef}
                     onKeyDown={(e) => {
diff --git a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
index 251d8f64683..d95c6b11285 100644
--- a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
@@ -279,7 +279,7 @@ export default function GeneralEmbeddingPreference() {
                           name="embedder-search"
                           autoComplete="off"
                           placeholder="Search all embedding providers"
-                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white placeholder:text-white placeholder:font-medium"
+                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-white placeholder:text-white placeholder:font-medium"
                           onChange={(e) => setSearchQuery(e.target.value)}
                           ref={searchInputRef}
                           onKeyDown={(e) => {
diff --git a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
index 7bbc5bb6b92..2baa0c6c83c 100644
--- a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
@@ -353,7 +353,7 @@ export default function GeneralLLMPreference() {
                           name="llm-search"
                           autoComplete="off"
                           placeholder="Search all LLM providers"
-                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white placeholder:text-white placeholder:font-medium"
+                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-white placeholder:text-white placeholder:font-medium"
                           onChange={(e) => setSearchQuery(e.target.value)}
                           ref={searchInputRef}
                           onKeyDown={(e) => {
diff --git a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
index 0e59814d79b..e35dc320881 100644
--- a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
+++ b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
@@ -237,7 +237,7 @@ export default function GeneralVectorDatabase() {
                           name="vdb-search"
                           autoComplete="off"
                           placeholder="Search all vector database providers"
-                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white placeholder:text-white placeholder:font-medium"
+                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-white placeholder:text-white placeholder:font-medium"
                           onChange={(e) => setSearchQuery(e.target.value)}
                           ref={searchInputRef}
                           onKeyDown={(e) => {
diff --git a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/index.jsx b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/index.jsx
index dfa7a2998a5..3998e06267d 100644
--- a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/index.jsx
@@ -133,7 +133,7 @@ export default function AgentLLMSelection({
                   name="llm-search"
                   autoComplete="off"
                   placeholder="Search available LLM providers"
-                  className="border-none -ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white placeholder:text-white placeholder:font-medium"
+                  className="border-none -ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-white placeholder:text-white placeholder:font-medium"
                   onChange={(e) => setSearchQuery(e.target.value)}
                   ref={searchInputRef}
                   onKeyDown={(e) => {
diff --git a/frontend/src/pages/WorkspaceSettings/AgentConfig/WebSearchSelection/index.jsx b/frontend/src/pages/WorkspaceSettings/AgentConfig/WebSearchSelection/index.jsx
deleted file mode 100644
index bd22f473169..00000000000
--- a/frontend/src/pages/WorkspaceSettings/AgentConfig/WebSearchSelection/index.jsx
+++ /dev/null
@@ -1,204 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import AnythingLLMIcon from "@/media/logo/anything-llm-icon.png";
-import GoogleSearchIcon from "./icons/google.png";
-import SerperDotDevIcon from "./icons/serper.png";
-import BingSearchIcon from "./icons/bing.png";
-import { CaretUpDown, MagnifyingGlass, X } from "@phosphor-icons/react";
-import SearchProviderItem from "./SearchProviderItem";
-import {
-  SerperDotDevOptions,
-  GoogleSearchOptions,
-  BingSearchOptions,
-} from "./SearchProviderOptions";
-import { useTranslation } from "react-i18next";
-
-const SEARCH_PROVIDERS = [
-  {
-    name: "Please make a selection",
-    value: "none",
-    logo: AnythingLLMIcon,
-    options: () => <React.Fragment />,
-    description:
-      "Web search will be disabled until a provider and keys are provided.",
-  },
-  {
-    name: "Google Search Engine",
-    value: "google-search-engine",
-    logo: GoogleSearchIcon,
-    options: (settings) => <GoogleSearchOptions settings={settings} />,
-    description:
-      "Web search powered by a custom Google Search Engine. Free for 100 queries per day.",
-  },
-  {
-    name: "Serper.dev",
-    value: "serper-dot-dev",
-    logo: SerperDotDevIcon,
-    options: (settings) => <SerperDotDevOptions settings={settings} />,
-    description:
-      "Serper.dev web-search. Free account with a 2,500 calls, but then paid.",
-  },
-  {
-    name: "Bing Search",
-    value: "bing-search",
-    logo: BingSearchIcon,
-    options: (settings) => <BingSearchOptions settings={settings} />,
-    description:
-      "Web search powered by the Bing Search API. Free for 1000 queries per month.",
-  },
-];
-
-export default function AgentWebSearchSelection({
-  skill,
-  settings,
-  toggleSkill,
-  enabled = false,
-}) {
-  const searchInputRef = useRef(null);
-  const [filteredResults, setFilteredResults] = useState([]);
-  const [selectedProvider, setSelectedProvider] = useState("none");
-  const [searchQuery, setSearchQuery] = useState("");
-  const [searchMenuOpen, setSearchMenuOpen] = useState(false);
-  const { t } = useTranslation();
-  function updateChoice(selection) {
-    setSearchQuery("");
-    setSelectedProvider(selection);
-    setSearchMenuOpen(false);
-  }
-
-  function handleXButton() {
-    if (searchQuery.length > 0) {
-      setSearchQuery("");
-      if (searchInputRef.current) searchInputRef.current.value = "";
-    } else {
-      setSearchMenuOpen(!searchMenuOpen);
-    }
-  }
-
-  useEffect(() => {
-    const filtered = SEARCH_PROVIDERS.filter((provider) =>
-      provider.name.toLowerCase().includes(searchQuery.toLowerCase())
-    );
-    setFilteredResults(filtered);
-  }, [searchQuery, selectedProvider]);
-
-  useEffect(() => {
-    setSelectedProvider(settings?.preferences?.agent_search_provider ?? "none");
-  }, [settings?.preferences?.agent_search_provider]);
-
-  const selectedSearchProviderObject = SEARCH_PROVIDERS.find(
-    (provider) => provider.value === selectedProvider
-  );
-
-  return (
-    <div className="border-b border-white/40 pb-4">
-      <div className="flex flex-col">
-        <div className="flex w-full justify-between items-center">
-          <label htmlFor="name" className="block input-label">
-            {t("agent.skill.web.title")}
-          </label>
-          <label className="border-none relative inline-flex cursor-pointer items-center mt-2">
-            <input
-              type="checkbox"
-              className="peer sr-only"
-              checked={enabled}
-              onClick={() => toggleSkill(skill)}
-            />
-            <div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
-            <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"></span>
-          </label>
-        </div>
-        <p className="text-white text-opacity-60 text-xs font-medium py-1.5">
-          {t("agent.skill.web.desc-start")}
-          <br />
-          {t("agent.skill.web.desc-end")}
-        </p>
-      </div>
-      <div hidden={!enabled}>
-        <div className="relative">
-          <input
-            type="hidden"
-            name="system::agent_search_provider"
-            value={selectedProvider}
-          />
-          {searchMenuOpen && (
-            <div
-              className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-70 backdrop-blur-sm z-10"
-              onClick={() => setSearchMenuOpen(false)}
-            />
-          )}
-          {searchMenuOpen ? (
-            <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-[#18181B] rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
-              <div className="w-full flex flex-col gap-y-1">
-                <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-[#18181B]">
-                  <MagnifyingGlass
-                    size={20}
-                    weight="bold"
-                    className="absolute left-4 z-30 text-white -ml-4 my-2"
-                  />
-                  <input
-                    type="text"
-                    name="web-provider-search"
-                    autoComplete="off"
-                    placeholder="Search available web-search providers"
-                    className="border-none -ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white placeholder:text-white placeholder:font-medium"
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    ref={searchInputRef}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter") e.preventDefault();
-                    }}
-                  />
-                  <X
-                    size={20}
-                    weight="bold"
-                    className="cursor-pointer text-white hover:text-[#9CA3AF]"
-                    onClick={handleXButton}
-                  />
-                </div>
-                <div className="flex-1 pl-4 pr-2 flex flex-col gap-y-1 overflow-y-auto white-scrollbar pb-4">
-                  {filteredResults.map((provider) => {
-                    return (
-                      <SearchProviderItem
-                        provider={provider}
-                        key={provider.name}
-                        checked={selectedProvider === provider.value}
-                        onClick={() => updateChoice(provider.value)}
-                      />
-                    );
-                  })}
-                </div>
-              </div>
-            </div>
-          ) : (
-            <button
-              className="w-full max-w-[640px] h-[64px] bg-[#18181B] rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
-              type="button"
-              onClick={() => setSearchMenuOpen(true)}
-            >
-              <div className="flex gap-x-4 items-center">
-                <img
-                  src={selectedSearchProviderObject.logo}
-                  alt={`${selectedSearchProviderObject.name} logo`}
-                  className="w-10 h-10 rounded-md"
-                />
-                <div className="flex flex-col text-left">
-                  <div className="text-sm font-semibold text-white">
-                    {selectedSearchProviderObject.name}
-                  </div>
-                  <div className="mt-1 text-xs text-[#D2D5DB]">
-                    {selectedSearchProviderObject.description}
-                  </div>
-                </div>
-              </div>
-              <CaretUpDown size={24} weight="bold" className="text-white" />
-            </button>
-          )}
-        </div>
-        {selectedProvider !== "none" && (
-          <div className="mt-4 flex flex-col gap-y-1">
-            {selectedSearchProviderObject.options(settings)}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

From 89aa1c15813ed3e41bf5486fec58f7507be71ecf Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 26 Jun 2024 17:52:14 -0700
Subject: [PATCH 6/7] make back arrow less opacity in onboarding to highlight
 next arrow

---
 frontend/src/pages/OnboardingFlow/Steps/index.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/OnboardingFlow/Steps/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/index.jsx
index 61afe83f6f2..2d990a8fd3a 100644
--- a/frontend/src/pages/OnboardingFlow/Steps/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/Steps/index.jsx
@@ -93,11 +93,11 @@ export function OnboardingLayout({ children }) {
           <button
             disabled={backBtn.disabled}
             onClick={backBtn.onClick}
-            className="group p-2 rounded-lg border-2 border-zinc-300 disabled:border-zinc-600 h-fit w-fit disabled:not-allowed hover:bg-zinc-100 disabled:hover:bg-transparent"
+            className="group p-2 rounded-lg border-2 border-zinc-600 h-fit w-fit disabled:cursor-not-allowed hover:bg-zinc-100 disabled:hover:bg-transparent"
             aria-label="Back"
           >
             <ArrowLeft
-              className="text-white group-hover:text-black group-disabled:text-gray-500"
+              className="group-hover:text-black text-gray-500"
               size={30}
             />
           </button>
@@ -121,7 +121,7 @@ export function OnboardingLayout({ children }) {
           <button
             disabled={forwardBtn.disabled}
             onClick={forwardBtn.onClick}
-            className="group p-2 rounded-lg border-2 border-zinc-300 disabled:border-zinc-600 h-fit w-fit disabled:not-allowed hover:bg-zinc-100 disabled:hover:bg-transparent"
+            className="group p-2 rounded-lg border-2 border-zinc-300 disabled:border-zinc-600 h-fit w-fit disabled:cursor-not-allowed hover:bg-zinc-100 disabled:hover:bg-transparent"
             aria-label="Continue"
           >
             <ArrowRight

From d46ebeabe7c2b5c7cc84749f42715d566c1f86a3 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 26 Jun 2024 18:22:32 -0700
Subject: [PATCH 7/7] fix spacing on all provider options (llm, vectordb,
 embedder

---
 .../components/EmbeddingSelection/AzureAiOptions/index.jsx  | 2 +-
 .../components/EmbeddingSelection/CohereOptions/index.jsx   | 2 +-
 .../EmbeddingSelection/GenericOpenAiOptions/index.jsx       | 6 +++---
 .../components/EmbeddingSelection/LMStudioOptions/index.jsx | 4 ++--
 .../components/EmbeddingSelection/LiteLLMOptions/index.jsx  | 6 +++---
 .../components/EmbeddingSelection/LocalAiOptions/index.jsx  | 6 +++---
 .../components/EmbeddingSelection/OllamaOptions/index.jsx   | 4 ++--
 .../components/EmbeddingSelection/OpenAiOptions/index.jsx   | 2 +-
 .../components/EmbeddingSelection/VoyageAiOptions/index.jsx | 2 +-
 .../components/LLMSelection/AnthropicAiOptions/index.jsx    | 2 +-
 .../src/components/LLMSelection/AzureAiOptions/index.jsx    | 6 +++---
 .../src/components/LLMSelection/CohereAiOptions/index.jsx   | 2 +-
 .../src/components/LLMSelection/GeminiLLMOptions/index.jsx  | 2 +-
 .../components/LLMSelection/GenericOpenAiOptions/index.jsx  | 6 +++---
 .../src/components/LLMSelection/GroqAiOptions/index.jsx     | 2 +-
 .../components/LLMSelection/HuggingFaceOptions/index.jsx    | 2 +-
 .../src/components/LLMSelection/KoboldCPPOptions/index.jsx  | 2 +-
 .../src/components/LLMSelection/LMStudioOptions/index.jsx   | 6 +++---
 .../src/components/LLMSelection/LiteLLMOptions/index.jsx    | 6 +++---
 .../src/components/LLMSelection/LocalAiOptions/index.jsx    | 4 ++--
 .../src/components/LLMSelection/MistralOptions/index.jsx    | 2 +-
 .../src/components/LLMSelection/NativeLLMOptions/index.jsx  | 2 +-
 .../src/components/LLMSelection/OllamaLLMOptions/index.jsx  | 4 ++--
 .../src/components/LLMSelection/OpenAiOptions/index.jsx     | 2 +-
 .../src/components/LLMSelection/OpenRouterOptions/index.jsx | 2 +-
 .../src/components/LLMSelection/PerplexityOptions/index.jsx | 2 +-
 .../components/LLMSelection/TextGenWebUIOptions/index.jsx   | 2 +-
 .../src/components/LLMSelection/TogetherAiOptions/index.jsx | 2 +-
 .../TranscriptionSelection/OpenAiOptions/index.jsx          | 2 +-
 .../components/VectorDBSelection/AstraDBOptions/index.jsx   | 4 ++--
 .../components/VectorDBSelection/ChromaDBOptions/index.jsx  | 4 ++--
 .../components/VectorDBSelection/MilvusDBOptions/index.jsx  | 4 ++--
 .../VectorDBSelection/PineconeDBOptions/index.jsx           | 4 ++--
 .../components/VectorDBSelection/QDrantDBOptions/index.jsx  | 4 ++--
 .../VectorDBSelection/WeaviateDBOptions/index.jsx           | 4 ++--
 .../VectorDBSelection/ZillizCloudOptions/index.jsx          | 2 +-
 36 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/frontend/src/components/EmbeddingSelection/AzureAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/AzureAiOptions/index.jsx
index d5ceae6b8d9..6a15e1ab628 100644
--- a/frontend/src/components/EmbeddingSelection/AzureAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/AzureAiOptions/index.jsx
@@ -1,7 +1,7 @@
 export default function AzureAiOptions({ settings }) {
   return (
     <div className="w-full flex flex-col gap-y-4">
-      <div className="w-full flex items-center gap-4">
+      <div className="w-full flex items-center gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             Azure Service Endpoint
diff --git a/frontend/src/components/EmbeddingSelection/CohereOptions/index.jsx b/frontend/src/components/EmbeddingSelection/CohereOptions/index.jsx
index cbc0d9cd37c..ba54bb9a585 100644
--- a/frontend/src/components/EmbeddingSelection/CohereOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/CohereOptions/index.jsx
@@ -1,7 +1,7 @@
 export default function CohereEmbeddingOptions({ settings }) {
   return (
     <div className="w-full flex flex-col gap-y-4">
-      <div className="w-full flex items-center gap-4">
+      <div className="w-full flex items-center gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             API Key
diff --git a/frontend/src/components/EmbeddingSelection/GenericOpenAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/GenericOpenAiOptions/index.jsx
index ea9d9c2bc2f..f37161c208a 100644
--- a/frontend/src/components/EmbeddingSelection/GenericOpenAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/GenericOpenAiOptions/index.jsx
@@ -1,7 +1,7 @@
 export default function GenericOpenAiEmbeddingOptions({ settings }) {
   return (
-    <div className="w-full flex flex-col gap-y-4">
-      <div className="w-full flex items-center gap-4 flex-wrap">
+    <div className="w-full flex flex-col gap-y-7">
+      <div className="w-full flex items-center gap-[36px] mt-1.5 flex-wrap">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             Base URL
@@ -49,7 +49,7 @@ export default function GenericOpenAiEmbeddingOptions({ settings }) {
           />
         </div>
       </div>
-      <div className="w-full flex items-center gap-4">
+      <div className="w-full flex items-center gap-[36px]">
         <div className="flex flex-col w-60">
           <div className="flex flex-col gap-y-1 mb-4">
             <label className="text-white text-sm font-semibold flex items-center gap-x-2">
diff --git a/frontend/src/components/EmbeddingSelection/LMStudioOptions/index.jsx b/frontend/src/components/EmbeddingSelection/LMStudioOptions/index.jsx
index dc1151d8c41..9b31add9134 100644
--- a/frontend/src/components/EmbeddingSelection/LMStudioOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/LMStudioOptions/index.jsx
@@ -28,8 +28,8 @@ export default function LMStudioEmbeddingOptions({ settings }) {
   };
 
   return (
-    <div className="w-full flex flex-col gap-y-4">
-      <div className="w-full flex items-start gap-4">
+    <div className="w-full flex flex-col gap-y-7">
+      <div className="w-full flex items-start gap-[36px] mt-1.5">
         <LMStudioModelSelection settings={settings} basePath={basePath.value} />
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-2">
diff --git a/frontend/src/components/EmbeddingSelection/LiteLLMOptions/index.jsx b/frontend/src/components/EmbeddingSelection/LiteLLMOptions/index.jsx
index 349a3d536bc..22b2f5caedc 100644
--- a/frontend/src/components/EmbeddingSelection/LiteLLMOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/LiteLLMOptions/index.jsx
@@ -10,8 +10,8 @@ export default function LiteLLMOptions({ settings }) {
   const [apiKey, setApiKey] = useState(settings?.LiteLLMAPIKey);
 
   return (
-    <div className="w-full flex flex-col gap-y-4">
-      <div className="w-full flex items-center gap-4">
+    <div className="w-full flex flex-col gap-y-7">
+      <div className="w-full flex items-center gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             Base URL
@@ -51,7 +51,7 @@ export default function LiteLLMOptions({ settings }) {
           />
         </div>
       </div>
-      <div className="w-full flex items-center gap-4">
+      <div className="w-full flex items-center gap-[36px]">
         <div className="flex flex-col w-60">
           <div className="flex flex-col gap-y-1 mb-4">
             <label className="text-white text-sm font-semibold flex items-center gap-x-2">
diff --git a/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
index 8a4c1979d4d..d75da68b8c0 100644
--- a/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
@@ -10,8 +10,8 @@ export default function LocalAiOptions({ settings }) {
   const [apiKey, setApiKey] = useState(settings?.LocalAiApiKey);
 
   return (
-    <div className="w-full flex flex-col gap-y-4">
-      <div className="w-full flex items-center gap-4">
+    <div className="w-full flex flex-col gap-y-7">
+      <div className="w-full flex items-center gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             LocalAI Base URL
@@ -51,7 +51,7 @@ export default function LocalAiOptions({ settings }) {
           />
         </div>
       </div>
-      <div className="w-full flex items-center gap-4">
+      <div className="w-full flex items-center gap-[36px]">
         <div className="flex flex-col w-60">
           <div className="flex flex-col gap-y-1 mb-4">
             <label className="text-white text-sm font-semibold flex items-center gap-x-2">
diff --git a/frontend/src/components/EmbeddingSelection/OllamaOptions/index.jsx b/frontend/src/components/EmbeddingSelection/OllamaOptions/index.jsx
index 99c4ca7a4a6..a182c6daa55 100644
--- a/frontend/src/components/EmbeddingSelection/OllamaOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/OllamaOptions/index.jsx
@@ -28,8 +28,8 @@ export default function OllamaEmbeddingOptions({ settings }) {
   };
 
   return (
-    <div className="w-full flex flex-col gap-y-4">
-      <div className="w-full flex items-start gap-4">
+    <div className="w-full flex flex-col gap-y-7">
+      <div className="w-full flex items-start gap-[36px] mt-1.5">
         <OllamaEmbeddingModelSelection
           settings={settings}
           basePath={basePath.value}
diff --git a/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx
index e97c01fd03f..79cb2dc5d18 100644
--- a/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx
@@ -1,7 +1,7 @@
 export default function OpenAiOptions({ settings }) {
   return (
     <div className="w-full flex flex-col gap-y-4">
-      <div className="w-full flex items-center gap-4">
+      <div className="w-full flex items-center gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             API Key
diff --git a/frontend/src/components/EmbeddingSelection/VoyageAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/VoyageAiOptions/index.jsx
index 0d9233f8cb8..ca5b53f316d 100644
--- a/frontend/src/components/EmbeddingSelection/VoyageAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/VoyageAiOptions/index.jsx
@@ -1,7 +1,7 @@
 export default function VoyageAiOptions({ settings }) {
   return (
     <div className="w-full flex flex-col gap-y-4">
-      <div className="w-full flex items-center gap-4">
+      <div className="w-full flex items-center gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             API Key
diff --git a/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx b/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx
index dbbd296332d..08b2838135c 100644
--- a/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx
@@ -1,7 +1,7 @@
 export default function AnthropicAiOptions({ settings }) {
   return (
     <div className="w-full flex flex-col">
-      <div className="w-full flex items-center gap-4">
+      <div className="w-full flex items-center gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             Anthropic API Key
diff --git a/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx b/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx
index 09580963c45..cb663df091e 100644
--- a/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx
@@ -1,7 +1,7 @@
 export default function AzureAiOptions({ settings }) {
   return (
-    <div className="w-full flex flex-col gap-y-4">
-      <div className="w-full flex items-center gap-4">
+    <div className="w-full flex flex-col gap-y-7 mt-1.5">
+      <div className="w-full flex items-center gap-[36px]">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             Azure Service Endpoint
@@ -51,7 +51,7 @@ export default function AzureAiOptions({ settings }) {
         </div>
       </div>
 
-      <div className="w-full flex items-center gap-4">
+      <div className="w-full flex items-center gap-[36px]">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             Chat Model Token Limit
diff --git a/frontend/src/components/LLMSelection/CohereAiOptions/index.jsx b/frontend/src/components/LLMSelection/CohereAiOptions/index.jsx
index 23fdae060ab..1a564b69ae1 100644
--- a/frontend/src/components/LLMSelection/CohereAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/CohereAiOptions/index.jsx
@@ -1,7 +1,7 @@
 export default function CohereAiOptions({ settings }) {
   return (
     <div className="w-full flex flex-col">
-      <div className="w-full flex items-center gap-4">
+      <div className="w-full flex items-center gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             Cohere API Key
diff --git a/frontend/src/components/LLMSelection/GeminiLLMOptions/index.jsx b/frontend/src/components/LLMSelection/GeminiLLMOptions/index.jsx
index 07dead19880..5a2affb4fcf 100644
--- a/frontend/src/components/LLMSelection/GeminiLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/GeminiLLMOptions/index.jsx
@@ -1,7 +1,7 @@
 export default function GeminiLLMOptions({ settings }) {
   return (
     <div className="w-full flex flex-col">
-      <div className="w-full flex items-center gap-4">
+      <div className="w-full flex items-center gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             Google AI API Key
diff --git a/frontend/src/components/LLMSelection/GenericOpenAiOptions/index.jsx b/frontend/src/components/LLMSelection/GenericOpenAiOptions/index.jsx
index 0287fdc39a6..a00db7c02e8 100644
--- a/frontend/src/components/LLMSelection/GenericOpenAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/GenericOpenAiOptions/index.jsx
@@ -1,7 +1,7 @@
 export default function GenericOpenAiOptions({ settings }) {
   return (
-    <div className="flex flex-col gap-y-4">
-      <div className="flex gap-4 flex-wrap">
+    <div className="flex flex-col gap-y-7">
+      <div className="flex gap-[36px] mt-1.5 flex-wrap">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             Base URL
@@ -47,7 +47,7 @@ export default function GenericOpenAiOptions({ settings }) {
           />
         </div>
       </div>
-      <div className="flex gap-x-4 flex-wrap">
+      <div className="flex gap-[36px] flex-wrap">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             Token context window
diff --git a/frontend/src/components/LLMSelection/GroqAiOptions/index.jsx b/frontend/src/components/LLMSelection/GroqAiOptions/index.jsx
index 0bfe000586f..9f6f38f2718 100644
--- a/frontend/src/components/LLMSelection/GroqAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/GroqAiOptions/index.jsx
@@ -1,6 +1,6 @@
 export default function GroqAiOptions({ settings }) {
   return (
-    <div className="flex gap-x-4">
+    <div className="flex gap-[36px] mt-1.5">
       <div className="flex flex-col w-60">
         <label className="text-white text-sm font-semibold block mb-3">
           Groq API Key
diff --git a/frontend/src/components/LLMSelection/HuggingFaceOptions/index.jsx b/frontend/src/components/LLMSelection/HuggingFaceOptions/index.jsx
index 1a92885c561..d4c2fa349b7 100644
--- a/frontend/src/components/LLMSelection/HuggingFaceOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/HuggingFaceOptions/index.jsx
@@ -1,7 +1,7 @@
 export default function HuggingFaceOptions({ settings }) {
   return (
     <div className="w-full flex flex-col">
-      <div className="w-full flex items-center gap-4">
+      <div className="w-full flex items-center gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             HuggingFace Inference Endpoint
diff --git a/frontend/src/components/LLMSelection/KoboldCPPOptions/index.jsx b/frontend/src/components/LLMSelection/KoboldCPPOptions/index.jsx
index 5b5fe790e68..98c70785c51 100644
--- a/frontend/src/components/LLMSelection/KoboldCPPOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/KoboldCPPOptions/index.jsx
@@ -8,7 +8,7 @@ export default function KoboldCPPOptions({ settings }) {
   const [basePath, setBasePath] = useState(settings?.KoboldCPPBasePath);
 
   return (
-    <div className="flex gap-4 flex-wrap">
+    <div className="flex gap-[36px] mt-1.5 flex-wrap">
       <div className="flex flex-col w-60">
         <label className="text-white text-sm font-semibold block mb-3">
           Base URL
diff --git a/frontend/src/components/LLMSelection/LMStudioOptions/index.jsx b/frontend/src/components/LLMSelection/LMStudioOptions/index.jsx
index cc83420b557..2f0d95f6e52 100644
--- a/frontend/src/components/LLMSelection/LMStudioOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/LMStudioOptions/index.jsx
@@ -29,7 +29,7 @@ export default function LMStudioOptions({ settings, showAlert = false }) {
   };
 
   return (
-    <div className="w-full flex flex-col">
+    <div className="w-full flex flex-col gap-y-7">
       {showAlert && (
         <div className="flex flex-col md:flex-row md:items-center gap-x-2 text-white mb-6 bg-blue-800/30 w-fit rounded-lg px-4 py-2">
           <div className="gap-x-2 flex items-center">
@@ -47,7 +47,7 @@ export default function LMStudioOptions({ settings, showAlert = false }) {
           </a>
         </div>
       )}
-      <div className="w-full flex items-start gap-4">
+      <div className="w-full flex items-start gap-[36px] mt-1.5">
         <LMStudioModelSelection settings={settings} basePath={basePath.value} />
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-2">
@@ -89,7 +89,7 @@ export default function LMStudioOptions({ settings, showAlert = false }) {
       </div>
 
       <div hidden={!showAdvancedControls}>
-        <div className="w-full flex items-start gap-4 mt-4">
+        <div className="w-full flex items-start gap-4">
           <div className="flex flex-col w-60">
             <div className="flex justify-between items-center mb-2">
               <label className="text-white text-sm font-semibold">
diff --git a/frontend/src/components/LLMSelection/LiteLLMOptions/index.jsx b/frontend/src/components/LLMSelection/LiteLLMOptions/index.jsx
index f087ba5a61c..2e8792ba96f 100644
--- a/frontend/src/components/LLMSelection/LiteLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/LiteLLMOptions/index.jsx
@@ -8,8 +8,8 @@ export default function LiteLLMOptions({ settings }) {
   const [apiKey, setApiKey] = useState(settings?.LiteLLMAPIKey);
 
   return (
-    <div className="w-full flex flex-col gap-y-4">
-      <div className="w-full flex items-center gap-4">
+    <div className="w-full flex flex-col gap-y-7 mt-1.5">
+      <div className="w-full flex items-center gap-[36px]">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             Base URL
@@ -49,7 +49,7 @@ export default function LiteLLMOptions({ settings }) {
           />
         </div>
       </div>
-      <div className="w-full flex items-center gap-4">
+      <div className="w-full flex items-center gap-[36px]">
         <div className="flex flex-col w-60">
           <div className="flex flex-col gap-y-1 mb-4">
             <label className="text-white text-sm font-semibold flex items-center gap-x-2">
diff --git a/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx b/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx
index 9af456a8bee..868e3a0bf12 100644
--- a/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx
@@ -10,7 +10,7 @@ export default function LocalAiOptions({ settings, showAlert = false }) {
   const [apiKey, setApiKey] = useState(settings?.LocalAiApiKey);
 
   return (
-    <div className="w-full flex flex-col gap-y-4">
+    <div className="w-full flex flex-col gap-y-7">
       {showAlert && (
         <div className="flex flex-col md:flex-row md:items-center gap-x-2 text-white mb-6 bg-blue-800/30 w-fit rounded-lg px-4 py-2">
           <div className="gap-x-2 flex items-center">
@@ -28,7 +28,7 @@ export default function LocalAiOptions({ settings, showAlert = false }) {
           </a>
         </div>
       )}
-      <div className="w-full flex items-center gap-4">
+      <div className="w-full flex items-center gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             Local AI Base URL
diff --git a/frontend/src/components/LLMSelection/MistralOptions/index.jsx b/frontend/src/components/LLMSelection/MistralOptions/index.jsx
index f97add16580..d0172fa5373 100644
--- a/frontend/src/components/LLMSelection/MistralOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/MistralOptions/index.jsx
@@ -6,7 +6,7 @@ export default function MistralOptions({ settings }) {
   const [mistralKey, setMistralKey] = useState(settings?.MistralApiKey);
 
   return (
-    <div className="flex gap-x-4">
+    <div className="flex gap-[36px] mt-1.5">
       <div className="flex flex-col w-60">
         <label className="text-white text-sm font-semibold block mb-3">
           Mistral API Key
diff --git a/frontend/src/components/LLMSelection/NativeLLMOptions/index.jsx b/frontend/src/components/LLMSelection/NativeLLMOptions/index.jsx
index 5bc0210d055..5e5548d3a3b 100644
--- a/frontend/src/components/LLMSelection/NativeLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/NativeLLMOptions/index.jsx
@@ -13,7 +13,7 @@ export default function NativeLLMOptions({ settings }) {
           </p>
         </div>
       </div>
-      <div className="w-full flex items-center gap-4">
+      <div className="w-full flex items-center gap-[36px]">
         <NativeModelSelection settings={settings} />
       </div>
     </div>
diff --git a/frontend/src/components/LLMSelection/OllamaLLMOptions/index.jsx b/frontend/src/components/LLMSelection/OllamaLLMOptions/index.jsx
index e30f5971b67..0aa2900d97d 100644
--- a/frontend/src/components/LLMSelection/OllamaLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/OllamaLLMOptions/index.jsx
@@ -28,8 +28,8 @@ export default function OllamaLLMOptions({ settings }) {
   };
 
   return (
-    <div className="w-full flex flex-col gap-y-4">
-      <div className="w-full flex items-start gap-4">
+    <div className="w-full flex flex-col gap-y-7">
+      <div className="w-full flex items-start gap-[36px] mt-1.5">
         <OllamaLLMModelSelection
           settings={settings}
           basePath={basePath.value}
diff --git a/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx b/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx
index a31a8e93212..f52965cd4c0 100644
--- a/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx
@@ -6,7 +6,7 @@ export default function OpenAiOptions({ settings }) {
   const [openAIKey, setOpenAIKey] = useState(settings?.OpenAiKey);
 
   return (
-    <div className="flex gap-x-4">
+    <div className="flex gap-[36px] mt-1.5">
       <div className="flex flex-col w-60">
         <label className="text-white text-sm font-semibold block mb-3">
           API Key
diff --git a/frontend/src/components/LLMSelection/OpenRouterOptions/index.jsx b/frontend/src/components/LLMSelection/OpenRouterOptions/index.jsx
index 26b8d799722..470340d2ff3 100644
--- a/frontend/src/components/LLMSelection/OpenRouterOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/OpenRouterOptions/index.jsx
@@ -3,7 +3,7 @@ import { useState, useEffect } from "react";
 
 export default function OpenRouterOptions({ settings }) {
   return (
-    <div className="flex gap-x-4">
+    <div className="flex gap-[36px] mt-1.5">
       <div className="flex flex-col w-60">
         <label className="text-white text-sm font-semibold block mb-3">
           OpenRouter API Key
diff --git a/frontend/src/components/LLMSelection/PerplexityOptions/index.jsx b/frontend/src/components/LLMSelection/PerplexityOptions/index.jsx
index 8e247582bf1..8f4d1d05bfb 100644
--- a/frontend/src/components/LLMSelection/PerplexityOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/PerplexityOptions/index.jsx
@@ -3,7 +3,7 @@ import { useState, useEffect } from "react";
 
 export default function PerplexityOptions({ settings }) {
   return (
-    <div className="flex gap-x-4">
+    <div className="flex gap-[36px] mt-1.5">
       <div className="flex flex-col w-60">
         <label className="text-white text-sm font-semibold block mb-3">
           Perplexity API Key
diff --git a/frontend/src/components/LLMSelection/TextGenWebUIOptions/index.jsx b/frontend/src/components/LLMSelection/TextGenWebUIOptions/index.jsx
index c69c065e1df..55e9c86fcb0 100644
--- a/frontend/src/components/LLMSelection/TextGenWebUIOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/TextGenWebUIOptions/index.jsx
@@ -1,6 +1,6 @@
 export default function TextGenWebUIOptions({ settings }) {
   return (
-    <div className="flex gap-4 flex-wrap">
+    <div className="flex gap-[36px] mt-1.5 flex-wrap">
       <div className="flex flex-col w-60">
         <label className="text-white text-sm font-semibold block mb-3">
           Base URL
diff --git a/frontend/src/components/LLMSelection/TogetherAiOptions/index.jsx b/frontend/src/components/LLMSelection/TogetherAiOptions/index.jsx
index b9cfe35cdc4..ef1651c8956 100644
--- a/frontend/src/components/LLMSelection/TogetherAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/TogetherAiOptions/index.jsx
@@ -3,7 +3,7 @@ import { useState, useEffect } from "react";
 
 export default function TogetherAiOptions({ settings }) {
   return (
-    <div className="flex gap-x-4">
+    <div className="flex gap-[36px] mt-1.5">
       <div className="flex flex-col w-60">
         <label className="text-white text-sm font-semibold block mb-3">
           Together AI API Key
diff --git a/frontend/src/components/TranscriptionSelection/OpenAiOptions/index.jsx b/frontend/src/components/TranscriptionSelection/OpenAiOptions/index.jsx
index e10fa4f6641..014da9d9d4a 100644
--- a/frontend/src/components/TranscriptionSelection/OpenAiOptions/index.jsx
+++ b/frontend/src/components/TranscriptionSelection/OpenAiOptions/index.jsx
@@ -5,7 +5,7 @@ export default function OpenAiWhisperOptions({ settings }) {
   const [_openAIKey, setOpenAIKey] = useState(settings?.OpenAiKey);
 
   return (
-    <div className="flex gap-x-4">
+    <div className="flex gap-x-7 gap-[36px] mt-1.5">
       <div className="flex flex-col w-60">
         <label className="text-white text-sm font-semibold block mb-3">
           API Key
diff --git a/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx
index cd5196e1e0b..07a370d0ed2 100644
--- a/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx
@@ -1,7 +1,7 @@
 export default function AstraDBOptions({ settings }) {
   return (
-    <div className="w-full flex flex-col gap-y-4">
-      <div className="w-full flex items-center gap-4">
+    <div className="w-full flex flex-col gap-y-7">
+      <div className="w-full flex items-center gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             Astra DB Endpoint
diff --git a/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx
index 62b8fde83c5..dd3257aafc3 100644
--- a/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx
@@ -1,7 +1,7 @@
 export default function ChromaDBOptions({ settings }) {
   return (
-    <div className="w-full flex flex-col gap-y-4">
-      <div className="w-full flex items-center gap-4">
+    <div className="w-full flex flex-col gap-y-7">
+      <div className="w-full flex items-center gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             Chroma Endpoint
diff --git a/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx
index 44c53f78e6b..4985d670766 100644
--- a/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx
@@ -1,7 +1,7 @@
 export default function MilvusDBOptions({ settings }) {
   return (
-    <div className="w-full flex flex-col gap-y-4">
-      <div className="w-full flex items-center gap-4">
+    <div className="w-full flex flex-col gap-y-7">
+      <div className="w-full flex items-center gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             Milvus DB Address
diff --git a/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx
index 1b9060208ac..a3ffdb410c9 100644
--- a/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx
@@ -1,7 +1,7 @@
 export default function PineconeDBOptions({ settings }) {
   return (
-    <div className="w-full flex flex-col gap-y-4">
-      <div className="w-full flex items-center gap-4">
+    <div className="w-full flex flex-col gap-y-7">
+      <div className="w-full flex items-center gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             Pinecone DB API Key
diff --git a/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx
index b96e8eed36f..523f3e5b539 100644
--- a/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx
@@ -1,7 +1,7 @@
 export default function QDrantDBOptions({ settings }) {
   return (
-    <div className="w-full flex flex-col gap-y-4">
-      <div className="w-full flex items-center gap-4">
+    <div className="w-full flex flex-col gap-y-7">
+      <div className="w-full flex items-center gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             QDrant API Endpoint
diff --git a/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx
index d74c4d99b9f..6ce60570739 100644
--- a/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx
@@ -1,7 +1,7 @@
 export default function WeaviateDBOptions({ settings }) {
   return (
-    <div className="w-full flex flex-col gap-y-4">
-      <div className="w-full flex items-center gap-4">
+    <div className="w-full flex flex-col gap-y-7">
+      <div className="w-full flex items-center gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             Weaviate Endpoint
diff --git a/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx b/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx
index 132e2a5b687..bd08687bb91 100644
--- a/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx
@@ -1,7 +1,7 @@
 export default function ZillizCloudOptions({ settings }) {
   return (
     <div className="w-full flex flex-col gap-y-4">
-      <div className="w-full flex items-center gap-4">
+      <div className="w-full flex items-center gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-3">
             Cluster Endpoint