diff --git a/frontend/src/components/HomeComponents/Hero/CopyButton.tsx b/frontend/src/components/HomeComponents/Hero/CopyButton.tsx
index 1f498d49..9632d406 100644
--- a/frontend/src/components/HomeComponents/Hero/CopyButton.tsx
+++ b/frontend/src/components/HomeComponents/Hero/CopyButton.tsx
@@ -5,7 +5,7 @@ import { CopyButtonProps } from '@/components/utils/types';
 
 export const CopyButton = ({ text, label }: CopyButtonProps) => (
   <CopyToClipboard text={text} onCopy={() => showToast(label)}>
-    <button className="bg-blue-500 hover:bg-gray-900 text-white font-bold py-4 px-2 rounded ml-2">
+    <button className="bg-blue-500 hover:bg-gray-900 text-white font-bold py-3 md:py-4 px-3 md:px-4 rounded ml-2">
       <CopyIcon />
     </button>
   </CopyToClipboard>
diff --git a/frontend/src/components/HomeComponents/Hero/Hero.tsx b/frontend/src/components/HomeComponents/Hero/Hero.tsx
index 942eb775..d191d552 100644
--- a/frontend/src/components/HomeComponents/Hero/Hero.tsx
+++ b/frontend/src/components/HomeComponents/Hero/Hero.tsx
@@ -51,13 +51,13 @@ export const Hero = (props: Props) => {
             </div>
             <button
               onClick={() => setShowUuid(!showUuid)}
-              className="text-white font-bold p-2 rounded-full m-2"
+              className="text-white font-bold m-2 bg-gray-700 hover:bg-gray-600 p-3 sm:p-4 rounded flex-shrink-0"
               aria-label={showUuid ? 'Hide UUID' : 'Show UUID'}
             >
               {showUuid ? (
-                <EyeOff className="size-5" />
+                <EyeOff className="size-5 m-0.5" />
               ) : (
-                <Eye className="size-5" />
+                <Eye className="size-5 m-0.5" />
               )}
             </button>
             <CopyButton text={props.uuid} label="UUID" />
@@ -77,13 +77,13 @@ export const Hero = (props: Props) => {
             </div>
             <button
               onClick={() => setShowSecret(!showSecret)}
-              className="text-white font-bold p-2 rounded-full m-2"
+              className="text-white font-bold m-2 bg-gray-700 hover:bg-gray-600 p-3 sm:p-4 rounded flex-shrink-0"
               aria-label={showSecret ? 'Hide secret' : 'Show secret'}
             >
               {showSecret ? (
-                <EyeOff className="size-5" />
+                <EyeOff className="size-5 m-0.5" />
               ) : (
-                <Eye className="size-5" />
+                <Eye className="size-5 m-0.5" />
               )}
             </button>
             <CopyButton
diff --git a/frontend/src/components/HomeComponents/Hero/__tests__/__snapshots__/CopyButton.test.tsx.snap b/frontend/src/components/HomeComponents/Hero/__tests__/__snapshots__/CopyButton.test.tsx.snap
index e9f41fc8..569a99ca 100644
--- a/frontend/src/components/HomeComponents/Hero/__tests__/__snapshots__/CopyButton.test.tsx.snap
+++ b/frontend/src/components/HomeComponents/Hero/__tests__/__snapshots__/CopyButton.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`CopyButton Component using snapshot renders correctly 1`] = `
 <DocumentFragment>
   <button
-    class="bg-blue-500 hover:bg-gray-900 text-white font-bold py-4 px-2 rounded ml-2"
+    class="bg-blue-500 hover:bg-gray-900 text-white font-bold py-3 md:py-4 px-3 md:px-4 rounded ml-2"
   >
     <svg
       class="lucide lucide-copy "
diff --git a/frontend/src/components/HomeComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap b/frontend/src/components/HomeComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap
index 7d77e730..1147dc0c 100644
--- a/frontend/src/components/HomeComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap
+++ b/frontend/src/components/HomeComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap
@@ -70,10 +70,10 @@ exports[`Hero component using snapshot renders correctly 1`] = `
           </div>
           <button
             aria-label="Hide UUID"
-            class="text-white font-bold p-2 rounded-full m-2"
+            class="text-white font-bold m-2 bg-gray-700 hover:bg-gray-600 p-3 sm:p-4 rounded flex-shrink-0"
           >
             <svg
-              class="lucide lucide-eye-off size-5"
+              class="lucide lucide-eye-off size-5 m-0.5"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -127,10 +127,10 @@ exports[`Hero component using snapshot renders correctly 1`] = `
           </div>
           <button
             aria-label="Hide secret"
-            class="text-white font-bold p-2 rounded-full m-2"
+            class="text-white font-bold m-2 bg-gray-700 hover:bg-gray-600 p-3 sm:p-4 rounded flex-shrink-0"
           >
             <svg
-              class="lucide lucide-eye-off size-5"
+              class="lucide lucide-eye-off size-5 m-0.5"
               fill="none"
               height="24"
               stroke="currentColor"
diff --git a/frontend/src/components/HomeComponents/Navbar/NavbarDesktop.tsx b/frontend/src/components/HomeComponents/Navbar/NavbarDesktop.tsx
index 09dc1766..c836c709 100644
--- a/frontend/src/components/HomeComponents/Navbar/NavbarDesktop.tsx
+++ b/frontend/src/components/HomeComponents/Navbar/NavbarDesktop.tsx
@@ -166,14 +166,14 @@ export const NavbarDesktop = (
         </DialogHeader>
         <div className="flex justify-end gap-4 mt-4">
           <Button
-            className="bg-[#3B82F6] hover:bg-white focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none"
+            className="bg-[#3B82F6] hover:bg-[#3B82F6] focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none"
             onClick={handleExportTXT}
           >
             <FileText className="mr-2 h-4 w-4" />
             Download .txt
           </Button>
           <Button
-            className="bg-[#3B82F6]  hover:bg-white"
+            className="bg-[#3B82F6]  hover:bg-[#3B82F6]"
             onClick={handleExportJSON}
           >
             <FileJson className="mr-2 h-4 w-4" />