diff --git a/src/components/Popup/Forgot.tsx b/src/components/Popup/Forgot.tsx
index 3dc76bf..7eec56e 100644
--- a/src/components/Popup/Forgot.tsx
+++ b/src/components/Popup/Forgot.tsx
@@ -9,14 +9,18 @@ import { resetWallet } from "../../utils/storage";
 // theme done!
 export default function Forgot({
   goBack,
-  theme
+  theme,
 }: {
   goBack: React.Dispatch<React.SetStateAction<boolean>>;
-  theme: "dark" | "light"
+  theme: "dark" | "light";
 }) {
   return (
     <>
-      <section className={`forgot-nav ${(theme == "light") && "!bg-white !text-black !border-slate-400"} select-none`}>
+      <section
+        className={`forgot-nav ${
+          theme == "light" && "!bg-white !text-black !border-slate-400"
+        } select-none`}
+      >
         <div
           className="forgot-close-btn !text-red-500 !ml-3 hover:!bg-slate-200 !rounded-full"
           onClick={() => goBack(false)}
@@ -24,19 +28,29 @@ export default function Forgot({
           <BiX size={24} />
         </div>
         <div className="forgot-w">
-          <p className={`${theme == "light" && "!text-black"}`}>Forgot Password</p>
+          <p className={`${theme == "light" && "!text-black"}`}>
+            Forgot Password
+          </p>
         </div>
         <div />
       </section>
 
-      <div className={`${theme=="light" && "!bg-white"} forgot-c-w !p-3`}>
+      <div className={`${theme == "light" && "!bg-white"} forgot-c-w !p-3`}>
         <div />
         <section className="forgot-c-s">
           <BiLockAlt
             size={128}
-            className={`!mb-3 p-6 bg-black/50 ${theme=="light" && "!text-black/70 !bg-slate-200/50"} rounded-full`}
+            className={`!mb-3 p-6 bg-black/50 ${
+              theme == "light" && "!text-black/70 !bg-slate-200/50"
+            } rounded-full`}
           />
-          <p className={`forgot-p-c-s-p ${theme == "light" && "!text-black"} !mb-2`}>Forgot Password</p>
+          <p
+            className={`forgot-p-c-s-p ${
+              theme == "light" && "!text-black"
+            } !mb-2`}
+          >
+            Forgot Password
+          </p>
           <p className={`f-p-c ${theme == "light" && "!text-slate-600"}`}>
             You can reset your password by entering your wallet's 24 word
             recovery phrase. Cesium cannot recover your password for you.
@@ -45,7 +59,9 @@ export default function Forgot({
 
         <div className="w-full">
           <button
-            className={`f-p-c-b ${(theme == 'light') && "!text-black/90"} hover:!bg-red-400`}
+            className={`f-p-c-b ${
+              theme == "light" && "!text-black/90"
+            } hover:!bg-red-400`}
             onClick={() => {
               resetWallet();
               return window.location.reload();
diff --git a/src/components/Popup/Initialize/Start.tsx b/src/components/Popup/Initialize/Start.tsx
index 28ed446..dbc73c9 100644
--- a/src/components/Popup/Initialize/Start.tsx
+++ b/src/components/Popup/Initialize/Start.tsx
@@ -3,7 +3,7 @@ import { Dispatch } from "react";
 
 export default function Start({
   setW,
-  theme
+  theme,
 }: {
   setW: Dispatch<React.SetStateAction<number>>;
   theme: "dark" | "light";
@@ -11,7 +11,11 @@ export default function Start({
   return (
     <div className="min-h-[554px]">
       <Navbar theme={theme} />
-      <div className={`${theme == "light" && "!bg-white !text-black"} flex flex-col justify-between align-center p-[20px] h-full`}>
+      <div
+        className={`${
+          theme == "light" && "!bg-white !text-black"
+        } flex flex-col justify-between align-center p-[20px] h-full`}
+      >
         <div className="init-wrapper">
           <div className="start-content">
             <div className="select-none items-center flex flex-col justify-center align-center w-full">
@@ -42,7 +46,11 @@ export default function Start({
                   </span>
                 </div>
               </div>
-              <p className={`${theme =="light" && "!text-slate-700"} start-content-text`}>
+              <p
+                className={`${
+                  theme == "light" && "!text-slate-700"
+                } start-content-text`}
+              >
                 To get started, create a new wallet or import one from a seed
                 phrase.
               </p>
@@ -51,7 +59,9 @@ export default function Start({
 
           <div className="buttons-wrapper">
             <div
-              className={`${theme=="light" && "!text-slate-200"} button-create`}
+              className={`${
+                theme == "light" && "!text-slate-200"
+              } button-create`}
               role="button"
               onClick={() => setW(1)}
             >
@@ -59,7 +69,10 @@ export default function Start({
             </div>
 
             <div
-              className={`${(theme=="light") && "!bg-slate-400 !text-slate-900 hover:!bg-slate-300"} button-restore`}
+              className={`${
+                theme == "light" &&
+                "!bg-slate-400 !text-slate-900 hover:!bg-slate-300"
+              } button-restore`}
               role="button"
               onClick={() => setW(4)}
             >
diff --git a/src/components/Popup/Initialize/create/Done.tsx b/src/components/Popup/Initialize/create/Done.tsx
index 79cfad5..c1a4f68 100644
--- a/src/components/Popup/Initialize/create/Done.tsx
+++ b/src/components/Popup/Initialize/create/Done.tsx
@@ -12,9 +12,11 @@ import cryptoWorker from "../../../../worker/crypto?worker&url";
 export default function Created({
   setW,
   prevStep,
+  theme,
 }: {
   setW: Dispatch<React.SetStateAction<number>>;
   prevStep?: number;
+  theme: "light" | "dark";
 }) {
   const [loading, setLoading] = useState<boolean>(true);
   const [password, setPassword] = useState<string>("");
@@ -65,7 +67,11 @@ export default function Created({
 
   return (
     <>
-      <div className="step-p-nav">
+      <div
+        className={`step-p-nav ${
+          theme == "light" && "!bg-white !text-black !border-slate-400"
+        }`}
+      >
         <div
           className="cursor-pointer text-slate-400 hover:text-slate-200"
           role="button"
@@ -80,12 +86,20 @@ export default function Created({
         </div>
       </div>
       {loading ? (
-        <div className="flex justify-center items-center h-full">
-          <RingLoader color={"#FFFFFF"} loading={loading} size={150} />
+        <div
+          className={`${
+            theme == "light" && "!bg-white !text-black"
+          } flex justify-center items-center h-full`}
+        >
+          <RingLoader color={"#0096FF"} loading={loading} size={150} />
         </div>
       ) : (
         <>
-          <div className="relative flex items-center align-center justify-center !min-h-[554px] h-full w-full">
+          <div
+            className={`relative flex items-center align-center justify-center !min-h-[554px] h-full w-full ${
+              theme == "light" && "!bg-white !text-black"
+            }`}
+          >
             <div className="flex flex-col p-2 items-center align-center justify-center select-none">
               <img
                 src="img/logo.svg"
@@ -93,7 +107,11 @@ export default function Created({
                 draggable={false}
               />
               <p className="mt-4 text-2xl">You're all done!</p>
-              <p className="mt-2 text-md text-slate-300">
+              <p
+                className={`mt-2 text-md text-slate-300 ${
+                  theme == "light" && "!text-slate-600"
+                }`}
+              >
                 You can now fully enjoy your wallet.
               </p>
 
diff --git a/src/components/Popup/Initialize/create/Mnemonic.tsx b/src/components/Popup/Initialize/create/Mnemonic.tsx
index cbe97e8..7ef73c1 100644
--- a/src/components/Popup/Initialize/create/Mnemonic.tsx
+++ b/src/components/Popup/Initialize/create/Mnemonic.tsx
@@ -11,7 +11,7 @@ import { setSessionValue } from "../../../../utils/storage";
 
 export default function Mnemonic({
   setW,
-  theme
+  theme,
 }: {
   setW: Dispatch<React.SetStateAction<number>>;
   theme: "light" | "dark";
@@ -25,7 +25,11 @@ export default function Mnemonic({
   }, []);
   return (
     <>
-      <div className={`step-p-nav ${theme=="light" && "!bg-white !text-black !border-slate-400"}`}>
+      <div
+        className={`step-p-nav ${
+          theme == "light" && "!bg-white !text-black !border-slate-400"
+        }`}
+      >
         <div
           className="cursor-pointer text-slate-400 hover:text-slate-200"
           role="button"
@@ -40,7 +44,11 @@ export default function Mnemonic({
         </div>
       </div>
 
-      <div className="step-m-wrapper">
+      <div
+        className={`step-m-wrapper ${
+          theme == "light" && "!bg-white !text-black"
+        }`}
+      >
         <form
           className="step-m-form"
           onSubmit={(e) => {
@@ -53,7 +61,9 @@ export default function Mnemonic({
         >
           <div className="step-m-c select-none">
             <div className="step-m-h">
-              <p className="step-m-hp">Secret Recovery Phrase</p>
+              <p className={`step-m-hp ${theme == "light" && "!text-black"}`}>
+                Secret Recovery Phrase
+              </p>
               <p className="step-m-hs">
                 This phrase is the ONLY way to recover your wallet. Do NOT share
                 it with anyone!
@@ -66,37 +76,56 @@ export default function Mnemonic({
               {mnemonic.split(" ").map((word, index) => (
                 <div
                   key={index}
-                  className="border p-2 text-xs bg-black/60 p-1 rounded-sm"
+                  className={`border p-2 text-xs bg-black/60 p-1 rounded-sm ${
+                    theme == "light" && "!bg-slate-400/60"
+                  }`}
                 >
-                  <span className="text-slate-400 select-none">
+                  <span
+                    className={`${
+                      theme == "light" && "!text-slate-900"
+                    } text-slate-400 select-none`}
+                  >
                     {index + 1}.{" "}
                   </span>
-                  <span>{word}</span>
+                  <span className={`${theme == "light" && "!text-slate-900"}`}>
+                    {word}
+                  </span>
                 </div>
               ))}
             </div>
 
             <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:hidden display-transition">
-              <BsEyeSlashFill size={64} />
+              <BsEyeSlashFill
+                size={64}
+                className={`${theme == "light" && "!text-slate-400"}`}
+              />
             </div>
           </div>
 
           <div className="step-m-confirm">
-            <div className="step-m-checkbox mr-2 ">
+            <div
+              className={`step-m-checkbox mr-2 ${
+                theme == "light" && "!border-slate-600"
+              }`}
+            >
               <input
                 type="checkbox"
-                className="custom-ch"
+                className={`custom-ch ${theme == "light" && "!bg-slate-300"}`}
                 onChange={(e) => setChecked(e.currentTarget.checked)}
               />
             </div>
-            <p className="step-m-p">I saved my Secret Recovery Phrase</p>
+            <p className={`step-m-p ${theme == "light" && "!text-slate-800"}`}>
+              I saved my Secret Recovery Phrase
+            </p>
           </div>
 
           <button
             className={`step-m-continue select-none !z-20 ${
               checked
                 ? "!cursor-pointer !bg-sky-600"
-                : "!opacity-60 !cursor-not-allowed"
+                : `!opacity-60 !cursor-not-allowed ${
+                    theme == "light" && "!text-slate-800"
+                  }`
             }`}
           >
             Continue
diff --git a/src/components/Popup/Initialize/create/Password.tsx b/src/components/Popup/Initialize/create/Password.tsx
index 96be3b0..35ed323 100644
--- a/src/components/Popup/Initialize/create/Password.tsx
+++ b/src/components/Popup/Initialize/create/Password.tsx
@@ -7,7 +7,7 @@ import { setSessionValue } from "../../../../utils/storage";
 
 export default function Password({
   setW,
-  theme
+  theme,
 }: {
   setW: Dispatch<React.SetStateAction<number>>;
   theme: "light" | "dark";
@@ -59,7 +59,11 @@ export default function Password({
 
   return (
     <div>
-      <div className={`${theme=="light" && "!bg-white !text-black !border-slate-400"} step-p-nav`}>
+      <div
+        className={`${
+          theme == "light" && "!bg-white !text-black !border-slate-400"
+        } step-p-nav`}
+      >
         <div
           className="cursor-pointer text-slate-400 hover:text-slate-200"
           role="button"
@@ -74,7 +78,11 @@ export default function Password({
         </div>
       </div>
 
-      <div className={`${theme == "light" && "!bg-white !text-black"} step-p-content select-none`}>
+      <div
+        className={`${
+          theme == "light" && "!bg-white !text-black"
+        } step-p-content select-none`}
+      >
         <form
           className="step-p-form !relative !min-h-[554px]"
           onSubmit={(e) => {
@@ -88,14 +96,27 @@ export default function Password({
         >
           <div className="step-p-form-m">
             <div className="step-p-form-c">
-              <p className={`${theme=="light" && "!text-slate-900"} step-p-form-d`}>Create a password</p>
-              <p className={`${theme=="light" && "!text-slate-700"} step-p-form-cc`}>
+              <p
+                className={`${
+                  theme == "light" && "!text-slate-900"
+                } step-p-form-d`}
+              >
+                Create a password
+              </p>
+              <p
+                className={`${
+                  theme == "light" && "!text-slate-700"
+                } step-p-form-cc`}
+              >
                 You will use this to unlock your wallet.
               </p>
             </div>
             <div className="step-p-p-wrapper">
               <input
-                className={`${theme=="light" && "!bg-slate-300 !text-slate-900 !border-slate-400"} step-p-input`}
+                className={`step-p-input ${
+                  theme == "light" &&
+                  "!bg-slate-300 !text-slate-900 !border-slate-400"
+                }`}
                 type="password"
                 placeholder="Password"
                 maxLength={48}
@@ -103,7 +124,10 @@ export default function Password({
               />
               <div className="relative w-full">
                 <input
-                  className={`${theme=="light" && "!bg-slate-300 !text-slate-900 !border-slate-400"} step-p-confirm`}
+                  className={`${
+                    theme == "light" &&
+                    "!bg-slate-300 !text-slate-900 !border-slate-400"
+                  } step-p-confirm`}
                   type="password"
                   placeholder="Confirm Password"
                   onChange={handleConfirmPasswordChange}
@@ -137,12 +161,30 @@ export default function Password({
             </button>
           </div>
 
-          <div className={`${theme == "light" && "bg-slate-400/60"} absolute top-0 flex items-center flex-col align-center justify-center w-full mt-8 p-3 bg-black/30 rounded-md`}>
-            <p className={`${theme =="light" && "!text-slate-600"} text-xs text-slate-400`}>
-              <span className={`${theme=="light" && "!text-slate-700"} font-bold text-slate-300`}>Never</span> share this
-              password
+          <div
+            className={`${
+              theme == "light" && "bg-slate-400/60"
+            } absolute top-0 flex items-center flex-col align-center justify-center w-full mt-8 p-3 bg-black/30 rounded-md`}
+          >
+            <p
+              className={`${
+                theme == "light" && "!text-slate-600"
+              } text-xs text-slate-400`}
+            >
+              <span
+                className={`${
+                  theme == "light" && "!text-slate-700"
+                } font-bold text-slate-300`}
+              >
+                Never
+              </span>{" "}
+              share this password
             </p>
-            <p className={`${theme =="light" && "!text-slate-600"} text-xs text-slate-400`}>
+            <p
+              className={`${
+                theme == "light" && "!text-slate-600"
+              } text-xs text-slate-400`}
+            >
               your seed is to be encrypted with it.
             </p>
           </div>
diff --git a/src/components/Popup/Initialize/index.tsx b/src/components/Popup/Initialize/index.tsx
index 8daff74..709c05b 100644
--- a/src/components/Popup/Initialize/index.tsx
+++ b/src/components/Popup/Initialize/index.tsx
@@ -9,18 +9,22 @@ import ImportPassword from "./restore/Password";
 
 import "../../../styles/initialize.css";
 
-export default function InitializeScreen({ theme }: { theme: "dark" | "light"}) {
+export default function InitializeScreen({
+  theme,
+}: {
+  theme: "dark" | "light";
+}) {
   const [wizardI, setWizardI] = useState<number>(0);
   return (
     <>
       {wizardI == 0 && <Start setW={setWizardI} theme={theme} />}
       {wizardI == 1 && <Password setW={setWizardI} theme={theme} />}
       {wizardI == 2 && <Mnemonic setW={setWizardI} theme={theme} />}
-      {wizardI == 3 && <Done setW={setWizardI} />}
+      {wizardI == 3 && <Done setW={setWizardI} theme={theme} />}
       {wizardI == 4 && <ImportPhrase setW={setWizardI} />}
       {wizardI == 5 && <ImportPassword setW={setWizardI} />}
 
-      {wizardI == 420 && <Done setW={setWizardI} prevStep={5} />}
+      {wizardI == 420 && <Done setW={setWizardI} prevStep={5} theme={theme} />}
     </>
   );
 }
diff --git a/src/components/Popup/Lock/Footer.tsx b/src/components/Popup/Lock/Footer.tsx
index 0bd6f29..faf4ebb 100644
--- a/src/components/Popup/Lock/Footer.tsx
+++ b/src/components/Popup/Lock/Footer.tsx
@@ -8,14 +8,13 @@ import { wallet } from "multi-nano-web";
 import cryptoWorker from "../../../worker/crypto?worker&url";
 import { getLocalStorage, setSessionValue } from "../../../utils/storage";
 
-
 // theme added
 export default function Footer({
   shouldCall,
   setShouldCall,
   setInvalidPass,
   setLoggedIn,
-  theme
+  theme,
 }: {
   shouldCall: boolean;
   setShouldCall: React.Dispatch<React.SetStateAction<boolean>>;
@@ -77,7 +76,11 @@ export default function Footer({
   }, [shouldCall]);
 
   return (
-    <div className={`lockscreen-footer ${theme == "light" && "!bg-white !text-black"}`}>
+    <div
+      className={`lockscreen-footer ${
+        theme == "light" && "!bg-white !text-black"
+      }`}
+    >
       <div className="w-full" tabIndex={0}>
         <button
           formTarget="unlock"
@@ -90,7 +93,7 @@ export default function Footer({
       </div>
       {loading && (
         <div className="absolute inset-0 !z-50 flex !h-screen !w-screen items-center justify-center bg-black/90">
-          <HashSpinner size={80} color="#ffffff" loading={loading} />
+          <HashSpinner size={80} color="#0096FF" loading={loading} />
         </div>
       )}
     </div>
diff --git a/src/components/Popup/Lock/Form.tsx b/src/components/Popup/Lock/Form.tsx
index 2b13179..f747722 100644
--- a/src/components/Popup/Lock/Form.tsx
+++ b/src/components/Popup/Lock/Form.tsx
@@ -1,13 +1,12 @@
 import { Dispatch, SetStateAction, useRef, useEffect } from "react";
 
-
 // theme added I guess?
 export default function Form({
   goForth,
   handleSubmit,
   invalidPass,
   setInvalidPass,
-  theme
+  theme,
 }: {
   goForth: Dispatch<SetStateAction<boolean>>;
   handleSubmit: () => any;
@@ -30,7 +29,11 @@ export default function Form({
   }, [setInvalidPass]);
 
   return (
-    <div className={`lockscreen-inner ${theme == "light" && "!bg-white !text-black"}`}>
+    <div
+      className={`lockscreen-inner ${
+        theme == "light" && "!bg-white !text-black"
+      }`}
+    >
       <form
         id="unlock"
         className="lockscreen-form"
@@ -51,13 +54,22 @@ export default function Form({
             <div className="unlock-form-blank" />
           </div>
 
-          <p className={`${theme == "light" && "!text-black/90"} unlock-form-label select-none`}>Enter your password</p>
+          <p
+            className={`${
+              theme == "light" && "!text-black/90"
+            } unlock-form-label select-none`}
+          >
+            Enter your password
+          </p>
           <div style={{ width: "100%", transform: "none" }}>
             <div className="w-full">
               <input
                 className={`relative select-text z-10 unlock-form-input ${
                   invalidPass && "invalid-password"
-                } ${theme == "light" && "!bg-slate-300 !text-slate-700 !border-slate-400"}`}
+                } ${
+                  theme == "light" &&
+                  "!bg-slate-300 !text-slate-700 !border-slate-400"
+                }`}
                 type="password"
                 id="unlock-pass"
                 placeholder="Password"
@@ -66,7 +78,9 @@ export default function Form({
               />
             </div>
             <p
-              className={`unlock-form-footer ${theme == "light" && "!text-slate-800 !hover:text-slate-600"} select-none`}
+              className={`unlock-form-footer ${
+                theme == "light" && "!text-slate-800 hover:!text-slate-500"
+              } select-none`}
               role="button"
               onClick={() => goForth(true)}
             >
diff --git a/src/components/Popup/Lock/Navbar.tsx b/src/components/Popup/Lock/Navbar.tsx
index 45426ce..d398555 100644
--- a/src/components/Popup/Lock/Navbar.tsx
+++ b/src/components/Popup/Lock/Navbar.tsx
@@ -1,10 +1,20 @@
 import { FaCircleQuestion } from "react-icons/fa6";
 
-export default function Navbar({ theme }: {theme: "dark" | "light";}) {
+export default function Navbar({ theme }: { theme: "dark" | "light" }) {
   return (
-    <section className={`${theme == "light" && "!bg-white !text-black !border-slate-400"} lockscreen-nav select-none`}>
+    <section
+      className={`${
+        theme == "light" && "!bg-white !text-black !border-slate-400"
+      } lockscreen-nav select-none`}
+    >
       <div style={{ width: "10px" }}></div>
-      <span className={`${theme =="light" && "text-slate-600"} text-slate-400 text-xl`}>cesium</span>
+      <span
+        className={`${
+          theme == "light" && "text-slate-600"
+        } text-slate-400 text-xl`}
+      >
+        cesium
+      </span>
       <div
         className="lockscreen-nav-q"
         role="button"
@@ -14,7 +24,9 @@ export default function Navbar({ theme }: {theme: "dark" | "light";}) {
       >
         <FaCircleQuestion
           size={16}
-          className={`text-slate-400 hover:text-slate-200 ${theme =="light" && "text-slate-600 hover:text-slate-400"}`}
+          className={`text-slate-400 hover:text-slate-200 ${
+            theme == "light" && "text-slate-600 hover:text-slate-400"
+          }`}
         />
       </div>
     </section>
diff --git a/src/components/Popup/Lock/index.tsx b/src/components/Popup/Lock/index.tsx
index e191946..7255062 100644
--- a/src/components/Popup/Lock/index.tsx
+++ b/src/components/Popup/Lock/index.tsx
@@ -11,7 +11,7 @@ import "../../../styles/login.css";
 
 export default function Lockscreen({
   setLoggedIn,
-  theme
+  theme,
 }: {
   setLoggedIn: React.Dispatch<React.SetStateAction<boolean>>;
   theme: "dark" | "light";
diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx
index ea0e572..7780e77 100644
--- a/src/components/Popup/Popup.tsx
+++ b/src/components/Popup/Popup.tsx
@@ -14,7 +14,7 @@ export default function Popup() {
   const [isLocked, setIsLocked] = useState<boolean>(true);
   const [isAppLoggedIn, setAppLoggedIn] = useState<boolean>(false);
   const [sessionMasterKey, setSessionMasterKey] = useState<string | null>(null);
-  const [theme, setTheme] = useState<"dark" | "light">("light");
+  const [theme, setTheme] = useState<"dark" | "light">("dark");
 
   useEffect(() => {
     if (isAppLoggedIn) {
@@ -43,7 +43,7 @@ export default function Popup() {
   }, []);
 
   return (
-    <PopupWrapper>
+    <PopupWrapper theme={theme}>
       {!isAppLoggedIn && (
         <>
           {isLocked ? (
@@ -64,7 +64,7 @@ export default function Popup() {
           ) : (
             <>
               <div className="absolute inset-0 !z-50 flex !h-screen !w-screen items-center justify-center bg-black">
-                <HashSpinner size={80} color="#ffffff" loading={true} />
+                <HashSpinner size={80} color="#0096FF" loading={true} />
               </div>
             </>
           )}
@@ -72,4 +72,4 @@ export default function Popup() {
       )}
     </PopupWrapper>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/Popup/Wrapper.tsx b/src/components/Popup/Wrapper.tsx
index f21d4cd..25a78ed 100644
--- a/src/components/Popup/Wrapper.tsx
+++ b/src/components/Popup/Wrapper.tsx
@@ -1,8 +1,18 @@
 import type { ReactNode } from "react";
 
-export default function PopupWrapper({ children }: { children: ReactNode }) {
+export default function PopupWrapper({
+  children,
+  theme,
+}: {
+  children: ReactNode;
+  theme: "light" | "dark";
+}) {
   return (
-    <div className="popup-wrapper tauri-regular">
+    <div
+      className={`popup-wrapper tauri-regular ${
+        theme == "light" && "!border-slate-700"
+      }`}
+    >
       <div className="popup-wrapper-2">
         <div className="popup-flexbox">{children}</div>
       </div>
diff --git a/src/styles/initialize.css b/src/styles/initialize.css
index 9cd394c..f21e193 100644
--- a/src/styles/initialize.css
+++ b/src/styles/initialize.css
@@ -90,12 +90,12 @@
 .step-p-input {
   width: 100%;
   padding: 14px !important;
-  background: rgb(12, 12, 16) !important; 
+  background: rgb(12, 12, 16); 
   border-width: 1px !important;
   border-style: solid !important;
-  border-color: rgb(47, 47, 47) !important;
+  border-color: rgb(47, 47, 47);
   border-radius: 6px !important;
-  color: white !important;
+  color: white;
   font-size: 16px !important;
   line-height: 19px !important;
   margin-bottom: 10px !important;
@@ -153,16 +153,20 @@
 .step-p-confirm {
   width: 100%;
   padding: 14px !important;
-  background: rgb(12, 12, 16) !important; 
+  background: rgb(12, 12, 16); 
   border-width: 1px !important;
   border-style: solid !important;
-  border-color: rgb(47, 47, 47) !important;
+  border-color: rgb(47, 47, 47);
   border-radius: 6px !important;
   color: white !important;
   font-size: 16px !important;
   line-height: 19px !important;
 }
 
+.step-p-confirm::-ms-reveal {
+  display: none !important;
+}
+
 .start-content {
   display: flex;
   flex-direction: column;
diff --git a/src/styles/mnemonic.css b/src/styles/mnemonic.css
index d1ff274..a3d0f2a 100644
--- a/src/styles/mnemonic.css
+++ b/src/styles/mnemonic.css
@@ -124,7 +124,7 @@
   width: 100% !important;
   height: 100% !important;
   border-radius: 6px !important;
-  background-color: inherit !important;
+  background-color: inherit;
   border: none !important;
   z-index: 1 !important;
   transition: background 0.2s ease;