diff --git a/frontend/src/components/UserSettings/DeleteAccount.tsx b/frontend/src/components/UserSettings/DeleteAccount.tsx
index 09c640e..257b99d 100644
--- a/frontend/src/components/UserSettings/DeleteAccount.tsx
+++ b/frontend/src/components/UserSettings/DeleteAccount.tsx
@@ -22,13 +22,7 @@ const DeleteAccount: React.FC = () => {
           Permanently delete your data and everything associated with your
           account.
         </Text>
-        <Button
-          bg="ui.danger"
-          color="white"
-          _hover={{ opacity: 0.8 }}
-          mt={4}
-          onClick={confirmationModal.onOpen}
-        >
+        <Button variant="danger" mt={4} onClick={confirmationModal.onOpen}>
           Delete
         </Button>
         <DeleteConfirmation
diff --git a/frontend/src/routes/login.tsx b/frontend/src/routes/login.tsx
index 4a82cca..59e7ca5 100644
--- a/frontend/src/routes/login.tsx
+++ b/frontend/src/routes/login.tsx
@@ -127,13 +127,7 @@ function Login() {
             Forgot password?
           </Link>
         </Center>
-        <Button
-          bg="ui.main"
-          color="white"
-          _hover={{ opacity: 0.8 }}
-          type="submit"
-          isLoading={isSubmitting}
-        >
+        <Button variant="primary" type="submit" isLoading={isSubmitting}>
           Log In
         </Button>
       </Container>
diff --git a/frontend/src/routes/recover-password.tsx b/frontend/src/routes/recover-password.tsx
index 38c998d..661c180 100644
--- a/frontend/src/routes/recover-password.tsx
+++ b/frontend/src/routes/recover-password.tsx
@@ -82,13 +82,7 @@ function RecoverPassword() {
           <FormErrorMessage>{errors.email.message}</FormErrorMessage>
         )}
       </FormControl>
-      <Button
-        bg="ui.main"
-        color="white"
-        _hover={{ opacity: 0.8 }}
-        type="submit"
-        isLoading={isSubmitting}
-      >
+      <Button variant="primary" type="submit" isLoading={isSubmitting}>
         Continue
       </Button>
     </Container>
diff --git a/frontend/src/routes/reset-password.tsx b/frontend/src/routes/reset-password.tsx
index 55f4d49..9e6e51d 100644
--- a/frontend/src/routes/reset-password.tsx
+++ b/frontend/src/routes/reset-password.tsx
@@ -124,12 +124,7 @@ function ResetPassword() {
           <FormErrorMessage>{errors.confirm_password.message}</FormErrorMessage>
         )}
       </FormControl>
-      <Button
-        bg="ui.main"
-        color="white"
-        _hover={{ opacity: 0.8 }}
-        type="submit"
-      >
+      <Button variant="primary" type="submit">
         Reset Password
       </Button>
     </Container>