diff --git a/src/components/Card/HomeCard.tsx b/src/components/Card/HomeCard.tsx
index 80ecd54..3ab1260 100644
--- a/src/components/Card/HomeCard.tsx
+++ b/src/components/Card/HomeCard.tsx
@@ -21,7 +21,8 @@ const Container = styled.div<{ hasOnClick: boolean }>`
   display: flex;
   align-items: center;
   text-align: center;
-  background-color: white;
+  background-color: ${({ theme }) => theme.text};
+  color: ${({ theme }) => theme.bg};
   border-radius: 1rem;
   font-size: 1.6rem;
   justify-content: center;
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index dc43caf..86d2721 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -36,13 +36,13 @@ const Container = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: ${({ theme }) => theme['bg-70']};
-  opacity: 0.8;
+  background-color: ${({ theme }) => theme['modal-bg']};
+  color: ${({ theme }) => theme.text};
   z-index: 10;
 `;
 
 const ModalContent = styled.div`
-  background-color: ${({ theme }) => theme['bg-100']};
+  background-color: ${({ theme }) => theme.bg};
   border-radius: 2rem;
   text-align: center;
   margin: 0 auto;
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index def9ffc..861bbab 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -60,6 +60,7 @@ const Layout = ({ children }: PropsWithChildren) => {
 
 const AuthLayout = styled.div`
   padding: 2rem;
+  color: ${({ theme }) => theme.text};
   background-color: ${({ theme }) => theme.bg};
 `;