diff --git a/frontend/src/components/v2/Input/Input.tsx b/frontend/src/components/v2/Input/Input.tsx
index f8814f464..019c80614 100644
--- a/frontend/src/components/v2/Input/Input.tsx
+++ b/frontend/src/components/v2/Input/Input.tsx
@@ -126,7 +126,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           )}
         />
         {warningMessage && !rightIcon && (
-          <Tooltip className="w-full max-w-64" content={warningMessage}>
+          <Tooltip className="w-full max-w-72" content={warningMessage}>
             <FontAwesomeIcon icon={faWarning} className="absolute right-0 mr-3 text-yellow-500" />
           </Tooltip>
         )}
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
index af6876de9..2dc1ddcb0 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
@@ -222,9 +222,11 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
               <div>
                 Secret key contains whitespaces.
                 <br />
-                <br /> If this is the desired format, you need to encode it with{" "}
-                <code className="rounded-md bg-mineshaft-500 px-1 py-0.5">%20</code> when making API
-                requests.
+                <br /> If this is the desired format, you need to provide it as{" "}
+                <code className="rounded-md bg-mineshaft-500 px-1 py-0.5">
+                  {secretKey.trim().replaceAll(" ", "%20")}
+                </code>{" "}
+                when making API requests.
               </div>
             ) : undefined
           }
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CreateSecretForm/CreateSecretForm.tsx
index 3378dee01..82cc6b5e0 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CreateSecretForm/CreateSecretForm.tsx
@@ -183,9 +183,11 @@ export const CreateSecretForm = ({
               <div>
                 Secret key contains whitespaces.
                 <br />
-                <br /> If this is the desired format, you need to encode it with{" "}
-                <code className="rounded-md bg-mineshaft-500 px-1 py-0.5">%20</code> when making API
-                requests.
+                <br /> If this is the desired format, you need to provide it as{" "}
+                <code className="rounded-md bg-mineshaft-500 px-1 py-0.5">
+                  {secretKey.trim().replaceAll(" ", "%20")}
+                </code>{" "}
+                when making API requests.
               </div>
             ) : undefined
           }
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
index 594899474..20c4c34b4 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
@@ -488,13 +488,15 @@ export const SecretItem = memo(
                     isError={Boolean(error)}
                     onKeyUp={() => trigger("key")}
                     warningMessage={
-                      field.value.includes(" ") ? (
+                      field.value?.includes(" ") ? (
                         <div>
                           Secret key contains whitespaces.
                           <br />
-                          <br /> If this is the desired format, you need to encode it with{" "}
-                          <code className="rounded-md bg-mineshaft-500 px-1 py-0.5">%20</code> when
-                          making API requests.
+                          <br /> If this is the desired format, you need to provide it as{" "}
+                          <code className="rounded-md bg-mineshaft-500 px-1 py-0.5">
+                            {field.value.trim().replaceAll(" ", "%20")}
+                          </code>{" "}
+                          when making API requests.
                         </div>
                       ) : undefined
                     }