diff --git a/src/components/layout/Modal.tsx b/src/components/layout/Modal.tsx
index d5a910c1..b3e7a22e 100644
--- a/src/components/layout/Modal.tsx
+++ b/src/components/layout/Modal.tsx
@@ -39,7 +39,7 @@ export function ModalCard(props: { className?: string; children?: ReactNode }) {
   return (
     <div
       className={[
-        "relative mx-2 w-[500px] overflow-hidden rounded-lg bg-denim-200 px-10 py-10 sm:w-[500px] md:w-[500px] lg:w-[1000px]",
+        "relative mx-2 w-[500px] overflow-hidden rounded-lg bg-denim-300 px-10 py-10 sm:w-[500px] md:w-[500px] lg:w-[1000px]",
         props.className ?? "",
       ].join(" ")}
     >
diff --git a/src/views/SettingsModal.tsx b/src/views/SettingsModal.tsx
index 49f06194..b3ba74ed 100644
--- a/src/views/SettingsModal.tsx
+++ b/src/views/SettingsModal.tsx
@@ -46,7 +46,7 @@ export default function SettingsModal(props: {
   ).toFixed(0);
   return (
     <Modal show={props.show}>
-      <ModalCard className="bg-ash-300 text-white">
+      <ModalCard className="text-white">
         <div className="flex flex-col gap-4">
           <div className="flex flex-row justify-between">
             <span className="text-xl font-bold">{t("settings.title")}</span>