diff --git a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
index 4c464fa93..ec8b5c2f9 100644
--- a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+++ b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
@@ -108,10 +108,10 @@ export const SecretOverviewPage = () => {
   }, [isWorkspaceLoading, workspaceId, router.isReady]);
 
   const userAvailableEnvs = currentWorkspace?.environments || [];
-  const [visibleEnvs, setVisisbleEnvs] = useState(userAvailableEnvs);
+  const [visibleEnvs, setVisibleEnvs] = useState(userAvailableEnvs);
 
   useEffect(() => {
-    setVisisbleEnvs(userAvailableEnvs);
+    setVisibleEnvs(userAvailableEnvs);
   }, [userAvailableEnvs]);
 
   const {
@@ -212,9 +212,9 @@ export const SecretOverviewPage = () => {
 
   const handleEnvSelect = (envId: string) => {
     if (visibleEnvs.map((env) => env.id).includes(envId)) {
-      setVisisbleEnvs(visibleEnvs.filter((env) => env.id !== envId));
+      setVisibleEnvs(visibleEnvs.filter((env) => env.id !== envId));
     } else {
-      setVisisbleEnvs(visibleEnvs.concat(userAvailableEnvs.filter((env) => env.id === envId)));
+      setVisibleEnvs(visibleEnvs.concat(userAvailableEnvs.filter((env) => env.id === envId)));
     }
   };
 
@@ -401,7 +401,7 @@ export const SecretOverviewPage = () => {
                       ariaLabel="Environments"
                       variant="plain"
                       size="sm"
-                      className="mr-2 flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 hover:border-primary/60 hover:bg-primary/10"
+                      className="flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 hover:border-primary/60 hover:bg-primary/10"
                     >
                       <Tooltip content="Choose visible environments" className="mb-2">
                         <FontAwesomeIcon icon={faList} />
@@ -410,8 +410,8 @@ export const SecretOverviewPage = () => {
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end">
                     <DropdownMenuLabel>Choose visible environments</DropdownMenuLabel>
-                    {userAvailableEnvs.map((avaiableEnv) => {
-                      const { id: envId, name } = avaiableEnv;
+                    {userAvailableEnvs.map((availableEnv) => {
+                      const { id: envId, name } = availableEnv;
 
                       const isEnvSelected = visibleEnvs.map((env) => env.id).includes(envId);
                       return (
diff --git a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
index 36f8cfb27..8c305af1a 100644
--- a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
@@ -191,7 +191,10 @@ export const CreateSecretForm = ({
                         </span>
                         <span>
                           {getSecretByKey(env.slug, newSecretKey) && (
-                            <Tooltip content="Secret exists. Will be overwritten">
+                            <Tooltip
+                              className="max-w-[150px]"
+                              content="Secret already exists, and it will be overwritten"
+                            >
                               <FontAwesomeIcon icon={faWarning} className="ml-1 text-yellow-400" />
                             </Tooltip>
                           )}