diff --git a/frontend/src/components/EmbeddingSelection/GenericOpenAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/GenericOpenAiOptions/index.jsx
index e1ee62192b3..a1ad27939bd 100644
--- a/frontend/src/components/EmbeddingSelection/GenericOpenAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/GenericOpenAiOptions/index.jsx
@@ -3,11 +3,20 @@ import { CaretDown, CaretUp } from "@phosphor-icons/react";
 
 export default function GenericOpenAiEmbeddingOptions({ settings }) {
   const [showAdvancedControls, setShowAdvancedControls] = useState(false);
+  const [maxChunkLength, setMaxChunkLength] = useState(
+    settings?.EmbeddingModelMaxChunkLength || 8192
+  );
+
+  const handleMaxChunkLengthChange = (e) => {
+    setMaxChunkLength(Number(e.target.value));
+  };
+
+  const estimatedTokens = Math.round(maxChunkLength / 4.2);
   return (
     <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="w-full flex items-start 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">
+          <label className="text-white text-sm font-semibold block mb-2">
             Base URL
           </label>
           <input
@@ -22,7 +31,7 @@ export default function GenericOpenAiEmbeddingOptions({ settings }) {
           />
         </div>
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-3">
+          <label className="text-white text-sm font-semibold block mb-2">
             Embedding Model
           </label>
           <input
@@ -36,9 +45,9 @@ export default function GenericOpenAiEmbeddingOptions({ settings }) {
             spellCheck={false}
           />
         </div>
-        <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-3">
-            Max embedding chunk length
+        <div className="flex flex-col w-80">
+          <label className="text-white text-sm font-semibold block mb-2">
+            Max Embedding Chunk Length (Characters)
           </label>
           <input
             type="number"
@@ -46,16 +55,25 @@ export default function GenericOpenAiEmbeddingOptions({ settings }) {
             className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="8192"
             min={1}
+            value={maxChunkLength}
+            onChange={handleMaxChunkLengthChange}
             onScroll={(e) => e.target.blur()}
-            defaultValue={settings?.EmbeddingModelMaxChunkLength}
             required={false}
             autoComplete="off"
           />
+          <div className="mt-2 space-y-1">
+            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
+              Maximum length of text chunks in characters for embedding.
+            </p>
+            <p className="text-xs leading-[18px] font-base text-blue-400">
+              Estimated tokens: ~{estimatedTokens} (chars ÷ 4.2)
+            </p>
+          </div>
         </div>
       </div>
       <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">
+          <div className="flex flex-col gap-y-1 mb-2">
             <label className="text-white text-sm font-semibold flex items-center gap-x-2">
               API Key <p className="!text-xs !italic !font-thin">optional</p>
             </label>
diff --git a/frontend/src/components/EmbeddingSelection/LMStudioOptions/index.jsx b/frontend/src/components/EmbeddingSelection/LMStudioOptions/index.jsx
index 1fdf39650c1..511ab79908d 100644
--- a/frontend/src/components/EmbeddingSelection/LMStudioOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/LMStudioOptions/index.jsx
@@ -27,13 +27,15 @@ export default function LMStudioEmbeddingOptions({ settings }) {
     setMaxChunkLength(Number(e.target.value));
   };
 
+  const estimatedTokens = Math.round(maxChunkLength / 4.2);
+
   return (
     <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">
+        <div className="flex flex-col w-80">
           <label className="text-white text-sm font-semibold block mb-2">
-            Max Embedding Chunk Length
+            Max Embedding Chunk Length (Characters)
           </label>
           <input
             type="number"
@@ -47,9 +49,14 @@ export default function LMStudioEmbeddingOptions({ settings }) {
             required={true}
             autoComplete="off"
           />
-          <p className="text-xs leading-[18px] font-base text-white text-opacity-60 mt-2">
-            Maximum length of text chunks for embedding.
-          </p>
+          <div className="mt-2 space-y-1">
+            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
+              Maximum length of text chunks in characters for embedding.
+            </p>
+            <p className="text-xs leading-[18px] font-base text-blue-400">
+              Estimated tokens: ~{estimatedTokens} (chars ÷ 4.2)
+            </p>
+          </div>
         </div>
       </div>
       <div className="flex justify-start mt-4">
@@ -153,7 +160,7 @@ function LMStudioModelSelection({ settings, basePath = null }) {
           className="border-none bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
-            {!!basePath
+            {basePath
               ? "--loading available models--"
               : "Enter LM Studio URL first"}
           </option>
diff --git a/frontend/src/components/EmbeddingSelection/LiteLLMOptions/index.jsx b/frontend/src/components/EmbeddingSelection/LiteLLMOptions/index.jsx
index 37ed233a4a3..e18186f5cf7 100644
--- a/frontend/src/components/EmbeddingSelection/LiteLLMOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/LiteLLMOptions/index.jsx
@@ -8,12 +8,21 @@ export default function LiteLLMOptions({ settings }) {
   const [basePath, setBasePath] = useState(settings?.LiteLLMBasePath);
   const [apiKeyValue, setApiKeyValue] = useState(settings?.LiteLLMAPIKey);
   const [apiKey, setApiKey] = useState(settings?.LiteLLMAPIKey);
+  const [maxChunkLength, setMaxChunkLength] = useState(
+    settings?.EmbeddingModelMaxChunkLength || 8192
+  );
+
+  const handleMaxChunkLengthChange = (e) => {
+    setMaxChunkLength(Number(e.target.value));
+  };
+
+  const estimatedTokens = Math.round(maxChunkLength / 4.2);
 
   return (
     <div className="w-full flex flex-col gap-y-7">
-      <div className="w-full flex items-center gap-[36px] mt-1.5">
+      <div className="w-full flex items-start gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-3">
+          <label className="text-white text-sm font-semibold block mb-2">
             Base URL
           </label>
           <input
@@ -34,9 +43,9 @@ export default function LiteLLMOptions({ settings }) {
           basePath={basePath}
           apiKey={apiKey}
         />
-        <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-3">
-            Max embedding chunk length
+        <div className="flex flex-col w-80">
+          <label className="text-white text-sm font-semibold block mb-2">
+            Max Embedding Chunk Length (Characters)
           </label>
           <input
             type="number"
@@ -44,16 +53,25 @@ export default function LiteLLMOptions({ settings }) {
             className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="8192"
             min={1}
+            value={maxChunkLength}
+            onChange={handleMaxChunkLengthChange}
             onScroll={(e) => e.target.blur()}
-            defaultValue={settings?.EmbeddingModelMaxChunkLength}
             required={false}
             autoComplete="off"
           />
+          <div className="mt-2 space-y-1">
+            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
+              Maximum length of text chunks in characters for embedding.
+            </p>
+            <p className="text-xs leading-[18px] font-base text-blue-400">
+              Estimated tokens: ~{estimatedTokens} (chars ÷ 4.2)
+            </p>
+          </div>
         </div>
       </div>
       <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">
+          <div className="flex flex-col gap-y-1 mb-2">
             <label className="text-white text-sm font-semibold flex items-center gap-x-2">
               API Key <p className="!text-xs !italic !font-thin">optional</p>
             </label>
@@ -101,7 +119,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-3">
+        <label className="text-white text-sm font-semibold block mb-2">
           Embedding Model Selection
         </label>
         <select
@@ -122,7 +140,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-3">
+        <label className="text-white text-sm font-semibold block mb-2">
           Embedding Model Selection
         </label>
         <EmbeddingModelTooltip />
diff --git a/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
index ce81ebe3ad6..07e3954f6d1 100644
--- a/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
@@ -20,18 +20,27 @@ export default function LocalAiOptions({ settings }) {
   });
   const [apiKeyValue, setApiKeyValue] = useState(settings?.LocalAiApiKey);
   const [apiKey, setApiKey] = useState(settings?.LocalAiApiKey);
+  const [maxChunkLength, setMaxChunkLength] = useState(
+    settings?.EmbeddingModelMaxChunkLength || 1000
+  );
+
+  const handleMaxChunkLengthChange = (e) => {
+    setMaxChunkLength(Number(e.target.value));
+  };
+
+  const estimatedTokens = Math.round(maxChunkLength / 4.2);
 
   return (
     <div className="w-full flex flex-col gap-y-7">
-      <div className="w-full flex items-center gap-[36px] mt-1.5">
+      <div className="w-full flex items-start gap-[36px] mt-1.5">
         <LocalAIModelSelection
           settings={settings}
           apiKey={apiKey}
           basePath={basePath.value}
         />
-        <div className="flex flex-col w-60">
+        <div className="flex flex-col w-80">
           <label className="text-white text-sm font-semibold block mb-2">
-            Max embedding chunk length
+            Max Embedding Chunk Length (Characters)
           </label>
           <input
             type="number"
@@ -39,11 +48,20 @@ export default function LocalAiOptions({ settings }) {
             className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="1000"
             min={1}
+            value={maxChunkLength}
+            onChange={handleMaxChunkLengthChange}
             onScroll={(e) => e.target.blur()}
-            defaultValue={settings?.EmbeddingModelMaxChunkLength}
             required={false}
             autoComplete="off"
           />
+          <div className="mt-2 space-y-1">
+            <p className="text-xs font-base text-white text-opacity-60">
+              Maximum length of text chunks in characters for embedding.
+            </p>
+            <p className="text-xs font-base text-blue-400">
+              Estimated tokens: ~{estimatedTokens} (chars ÷ 4.2)
+            </p>
+          </div>
         </div>
         <div className="flex flex-col w-60">
           <div className="flex flex-col gap-y-1 mb-2">
diff --git a/frontend/src/components/EmbeddingSelection/OllamaOptions/index.jsx b/frontend/src/components/EmbeddingSelection/OllamaOptions/index.jsx
index 10c20b3fc4b..5aed152b68a 100644
--- a/frontend/src/components/EmbeddingSelection/OllamaOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/OllamaOptions/index.jsx
@@ -27,6 +27,8 @@ export default function OllamaEmbeddingOptions({ settings }) {
     setMaxChunkLength(Number(e.target.value));
   };
 
+  const estimatedTokens = Math.round(maxChunkLength / 4.2);
+
   return (
     <div className="w-full flex flex-col gap-y-7">
       <div className="w-full flex items-start gap-[36px] mt-1.5">
@@ -34,9 +36,9 @@ export default function OllamaEmbeddingOptions({ settings }) {
           settings={settings}
           basePath={basePath.value}
         />
-        <div className="flex flex-col w-60">
+        <div className="flex flex-col w-80">
           <label className="text-white text-sm font-semibold block mb-2">
-            Max Embedding Chunk Length
+            Max Embedding Chunk Length (Characters)
           </label>
           <input
             type="number"
@@ -50,9 +52,14 @@ export default function OllamaEmbeddingOptions({ settings }) {
             required={true}
             autoComplete="off"
           />
-          <p className="text-xs leading-[18px] font-base text-white text-opacity-60 mt-2">
-            Maximum length of text chunks for embedding.
-          </p>
+          <div className="mt-2 space-y-1">
+            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
+              Maximum length of text chunks in characters for embedding.
+            </p>
+            <p className="text-xs leading-[18px] font-base text-blue-400">
+              Estimated tokens: ~{estimatedTokens} (chars ÷ 4.2)
+            </p>
+          </div>
         </div>
       </div>
       <div className="flex justify-start mt-4">
@@ -152,7 +159,7 @@ function OllamaEmbeddingModelSelection({ settings, basePath = null }) {
           className="border-none bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
-            {!!basePath
+            {basePath
               ? "--loading available models--"
               : "Enter Ollama URL first"}
           </option>