diff --git a/components/organisms/UserSettingsPage/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx
index fcaffd9b14..c6a5bd0772 100644
--- a/components/organisms/UserSettingsPage/user-settings-page.tsx
+++ b/components/organisms/UserSettingsPage/user-settings-page.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef } from "react";
+import clsx from "clsx";
 
 import { RiArrowDownSLine, RiArrowUpSLine } from "react-icons/ri";
 import { User } from "@supabase/supabase-js";
@@ -64,8 +65,11 @@ const DeleteAccountModal = ({ open, setOpen, onDelete }: DeleteAccountModalProps
           <div className="flex gap-4">
             <Button
               type="submit"
-              className="w-max border-dark-red-8 bg-dark-red-8 text-white hover:border-dark-red-7 hover:bg-dark-red-7"
-              variant="primary"
+              className={clsx(
+                "bg-light-red-6 border border-light-red-8 hover:bg-light-red-7 text-light-red-10",
+                disabled && "cursor-not-allowed !bg-light-red-4 hover:!none !border-light-red-5 !text-light-red-8"
+              )}
+              variant="default"
               onClick={() => {
                 if (!disabled) {
                   onDelete();
@@ -517,8 +521,8 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
                   type="submit"
                   rel="noopener noreferrer"
                   target="_blank"
-                  className="w-max border-dark-red-8 bg-dark-red-8 text-white hover:border-dark-red-7 hover:bg-dark-red-7"
-                  variant="primary"
+                  className="w-max border bg-light-red-6 border-light-red-8 hover:bg-light-red-7 text-light-red-10"
+                  variant="default"
                 >
                   Delete Account
                 </Button>