diff --git a/src/pages/popup/components/home/detail/modals/CreateEmailModal.tsx b/src/pages/popup/components/home/detail/modals/CreateEmailModal.tsx
index f3b1d06..983e4fe 100644
--- a/src/pages/popup/components/home/detail/modals/CreateEmailModal.tsx
+++ b/src/pages/popup/components/home/detail/modals/CreateEmailModal.tsx
@@ -108,13 +108,13 @@ export default function CreateEmailModal({
             <div className="p-3 space-y-4">
               <input
                 type="text"
-                className="w-full px-3 py-2 text-white bg-gray-700 rounded-md focus:bg-gray-600"
+                className="w-full px-3 py-2 text-white text-sm bg-gray-600 rounded-md focus:bg-gray-500 outline-none"
                 placeholder="Domain"
                 value={domain}
                 onChange={(e) => setDomain(e.target.value)}
               />
               <textarea
-                className="w-full px-3 py-2 text-white bg-gray-700 rounded-md focus:bg-gray-600"
+                className="w-full px-3 py-2 text-white text-sm bg-gray-600 rounded-md focus:bg-gray-500 outline-none resize-none"
                 placeholder="Description"
                 maxLength={127}
                 value={description}
@@ -125,7 +125,7 @@ export default function CreateEmailModal({
             <div className="flex items-center justify-end p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
               <button
                 type="button"
-                className="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
+                className="text-white hover:bg-french-blue bg-french-blue/[0.75] focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
                 onClick={handleCreate}
               >
                 Create
diff --git a/src/pages/popup/components/home/detail/modals/DeleteConfirmationModal.tsx b/src/pages/popup/components/home/detail/modals/DeleteConfirmationModal.tsx
index c26841e..cd5d56b 100644
--- a/src/pages/popup/components/home/detail/modals/DeleteConfirmationModal.tsx
+++ b/src/pages/popup/components/home/detail/modals/DeleteConfirmationModal.tsx
@@ -68,7 +68,7 @@ export default function DeleteConfirmationModal({
               <button
                 data-modal-hide="defaultModal"
                 type="button"
-                className="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
+                className="text-white hover:bg-red-600 bg-red-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
                 onClick={handleDelete}
               >
                 Delete
diff --git a/src/pages/popup/components/home/detail/modals/LogoutConfirmationModal.tsx b/src/pages/popup/components/home/detail/modals/LogoutConfirmationModal.tsx
index ba7e71e..ece30a4 100644
--- a/src/pages/popup/components/home/detail/modals/LogoutConfirmationModal.tsx
+++ b/src/pages/popup/components/home/detail/modals/LogoutConfirmationModal.tsx
@@ -56,7 +56,7 @@ export default function LogoutConfirmationModal({
             <div className="flex items-center justify-end p-4 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
               <button
                 type="button"
-                className="text-white bg-french-blue hover:bg-french-blue/[0.75] focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
+                className="text-white hover:bg-french-blue bg-french-blue/[0.75] focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
                 onClick={logout}
               >
                 Logout