diff --git a/backend/src/server/routes/v1/secret-sharing-router.ts b/backend/src/server/routes/v1/secret-sharing-router.ts
index 7a5361049..22279d8ea 100644
--- a/backend/src/server/routes/v1/secret-sharing-router.ts
+++ b/backend/src/server/routes/v1/secret-sharing-router.ts
@@ -1,5 +1,5 @@
+import bcrypt from "bcrypt";
 import { z } from "zod";
-import bcrypt from "bcrypt"
 
 import { SecretSharingSchema } from "@app/db/schemas";
 import { SecretSharingAccessType } from "@app/lib/types";
@@ -124,11 +124,11 @@ export const registerSecretSharingRouter = async (server: FastifyZodProvider) =>
         hashedHex,
         orgId: req.permission?.orgId
       });
-  
+
       if (!sharedSecret) {
         return { isValid: false };
       }
-  
+
       if (sharedSecret.password) {
         const isMatch = await bcrypt.compare(password, sharedSecret.password);
         return { isValid: isMatch };
diff --git a/frontend/src/hooks/api/secretSharing/queries.ts b/frontend/src/hooks/api/secretSharing/queries.ts
index d8aee233c..02aa20f4a 100644
--- a/frontend/src/hooks/api/secretSharing/queries.ts
+++ b/frontend/src/hooks/api/secretSharing/queries.ts
@@ -77,19 +77,20 @@ export const useValidateSecretPassword = ({
   hashedHex: string;
   userPassword: string;
 }) => {
-  return useQuery({
-    enabled: Boolean(sharedSecretId) && Boolean(userPassword),
-    queryKey: `validateSecretPass-${sharedSecretId}`,
-    queryFn: async () => {
-      const { data, isLoading, refetch } = await apiRequest.post<ValidateSecretPassword>(
+  return useQuery(
+    [`validateSecretPass-${sharedSecretId}`],
+    async () => {
+      const { data } = await apiRequest.post<ValidateSecretPassword>(
         `/api/v1/secret-sharing/public/${sharedSecretId}/validate`,
         {
           hashedHex,
           password: userPassword
         }
       );
-
-      return { data, isLoading, refetch }
+      return data;
+    },
+    {
+      enabled: Boolean(sharedSecretId) && Boolean(userPassword),
     }
-  })
+  )
 }
diff --git a/frontend/src/views/ShareSecretPublicPage/components/ShareSecretForm.tsx b/frontend/src/views/ShareSecretPublicPage/components/ShareSecretForm.tsx
index 87dc34ad6..f4a647fb2 100644
--- a/frontend/src/views/ShareSecretPublicPage/components/ShareSecretForm.tsx
+++ b/frontend/src/views/ShareSecretPublicPage/components/ShareSecretForm.tsx
@@ -160,7 +160,7 @@ export const ShareSecretForm = ({ isPublic, value }: Props) => {
             isError={Boolean(error)}
             errorText={error?.message}
           >
-            <Input {...field} placeholder="Password" type="text" />
+            <Input {...field} placeholder="Password" type="password" />
           </FormControl>
         )}
       />
diff --git a/frontend/src/views/ViewSecretPublicPage/ViewSecretPublicPage.tsx b/frontend/src/views/ViewSecretPublicPage/ViewSecretPublicPage.tsx
index 7352235da..620195910 100644
--- a/frontend/src/views/ViewSecretPublicPage/ViewSecretPublicPage.tsx
+++ b/frontend/src/views/ViewSecretPublicPage/ViewSecretPublicPage.tsx
@@ -60,7 +60,7 @@ export const ViewSecretPublicPage = () => {
         </div>
         {secret && (
           !passMatches && secret.password ? (
-            <PasswordContainer secretId={id} hashedHex={hashedHex} handlePassMatch={handlePassMatch} />
+            <PasswordContainer secretId={id as string} hashedHex={hashedHex} handlePassMatch={handlePassMatch} />
           ) : (
             key && <SecretContainer secret={secret} secretKey={key} />
           )
diff --git a/frontend/src/views/ViewSecretPublicPage/components/PasswordContainer.tsx b/frontend/src/views/ViewSecretPublicPage/components/PasswordContainer.tsx
index 6a0ea649b..c433bf1fe 100644
--- a/frontend/src/views/ViewSecretPublicPage/components/PasswordContainer.tsx
+++ b/frontend/src/views/ViewSecretPublicPage/components/PasswordContainer.tsx
@@ -1,7 +1,7 @@
 import { useState, ChangeEvent } from "react";
 
-import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon, faSpinner } from "@fortawesome/react-fontawesome";
+import { faArrowRight, faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { Button, IconButton, Input } from "@app/components/v2";
 import { useValidateSecretPassword } from "@app/hooks/api/secretSharing";
@@ -27,10 +27,12 @@ export const PasswordContainer = ({ secretId, hashedHex, handlePassMatch }: Prop
   }
 
   const validatePassword = async () => {
+    setLoading(true);
+
     try {
       const { data: freshData } = await refetch();
 
-      if (freshData.data.isValid === true) {
+      if (freshData?.isValid === true) {
         handlePassMatch(true);
       } else {
         createNotification({
@@ -62,7 +64,10 @@ export const PasswordContainer = ({ secretId, hashedHex, handlePassMatch }: Prop
               validatePassword()
             }}
           >
-            <FontAwesomeIcon icon={isLoading ? faSpinner : faArrowRight} />
+            <FontAwesomeIcon 
+              className={isLoading ? 'fa-spin' : ''} 
+              icon={isLoading ? faSpinner : faArrowRight} 
+            />
           </IconButton>
         </div>
       </div>