diff --git a/src/@types/emotion.d.ts b/src/@types/emotion.d.ts
index 40f0e21..00867d6 100644
--- a/src/@types/emotion.d.ts
+++ b/src/@types/emotion.d.ts
@@ -13,5 +13,6 @@ declare module '@emotion/react' {
     green: string;
     white: string;
     gray: string;
+    'modal-bg': string;
   }
 }
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};
 `;
 
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 02d0015..8af8afc 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -60,6 +60,6 @@ const ItemIndex = styled.div`
   width: 3rem;
 `;
 const ItemLink = styled.a`
-  color: black;
+  color: ${({ theme }) => theme.text};
   text-decoration: none;
 `;
diff --git a/src/styles/ThemeStyle.tsx b/src/styles/ThemeStyle.tsx
index 3d75aa8..b93dce0 100644
--- a/src/styles/ThemeStyle.tsx
+++ b/src/styles/ThemeStyle.tsx
@@ -10,6 +10,7 @@ interface Theme {
   green: string;
   white: string;
   gray: string;
+  'modal-bg': string;
 }
 
 interface Themes {
@@ -30,6 +31,7 @@ const themes: Themes = {
     green: '#31b65b',
     white: '#ffffff',
     gray: '#aaaaaa',
+    'modal-bg': '#d9d9d9a1',
   },
 
   dark: {
@@ -44,6 +46,7 @@ const themes: Themes = {
     green: '#31b65b',
     white: '#ffffff',
     gray: '#aaaaaa',
+    'modal-bg': '#060505a1',
   },
 };