diff --git a/src/Hooks/usePill.js b/src/Hooks/usePill.js
index 656b442..4b7fcc6 100644
--- a/src/Hooks/usePill.js
+++ b/src/Hooks/usePill.js
@@ -54,7 +54,6 @@ export const useAddPillData = () => {
     // 성공이든 실패든 끝나면 항상 리패치합니다.
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ['pill-list'] });
-      console.log('성공');
     },
   });
 };
diff --git a/src/components/GraphicStatus.jsx b/src/components/GraphicStatus.jsx
index d9019da..924e885 100644
--- a/src/components/GraphicStatus.jsx
+++ b/src/components/GraphicStatus.jsx
@@ -3,11 +3,13 @@ import styled from '@emotion/native';
 import { COLORS } from '../shared/color';
 import { useUID } from '../Hooks/useAuth';
 import { useGetPillData } from '../Hooks/usePill';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import ConfettiCannon from 'react-native-confetti-cannon';
+import { ThemeContext } from '../context/Theme';
 
 const GraphicStatus = () => {
   const { data: uid } = useUID();
+  const { theme } = useContext(ThemeContext);
   const { isError, error, isLoading, data: pillList } = useGetPillData(uid);
 
   //응원글과 먹은 약 상태글 토글하기 위한 state
@@ -57,7 +59,7 @@ const GraphicStatus = () => {
     //0~1까지 비율에 따라 투명도 다르게 주기
     switch (true) {
       case opacity == 0:
-        color = 'white';
+        color = theme === 'light' ? 'white' : '#343639';
         break;
       case opacity > 0 && opacity <= 0.2:
         color = COLORS.POINT_COLOR_20;
@@ -89,7 +91,7 @@ const GraphicStatus = () => {
     let pop = Math.floor(Math.random() * supportArr.length);
 
     return (
-      <GraphicContainer>
+      <GraphicContainer theme={theme}>
         {opacity === 1 ? (
           <ConfettiCannon
             count={200}
@@ -103,16 +105,20 @@ const GraphicStatus = () => {
           </TouchableOpacity>
           <View style={{ display: message ? 'none' : 'flex' }}>
             {opacity === 0 ? (
-              <SupportTextContainer>
-                <SupportText>아직 하나도 먹지 않았어요!</SupportText>
+              <SupportTextContainer theme={theme}>
+                <SupportText theme={theme}>
+                  아직 하나도 먹지 않았어요!
+                </SupportText>
               </SupportTextContainer>
             ) : opacity === 1 ? (
               <SupportTextContainer>
-                <SupportText>축하합니다! 캐치필 달성!</SupportText>
+                <SupportText theme={theme}>
+                  축하합니다! 캐치필 달성!
+                </SupportText>
               </SupportTextContainer>
             ) : (
-              <SupportTextContainer>
-                <SupportText>
+              <SupportTextContainer theme={theme}>
+                <SupportText theme={theme}>
                   와! 벌써 <TakenPill>{isTakenNum}</TakenPill>개나 드셨네요!
                 </SupportText>
               </SupportTextContainer>
@@ -121,13 +127,13 @@ const GraphicStatus = () => {
 
           <SupportTextContainer style={{ display: message ? 'flex' : 'none' }}>
             {/* 랜덤으로 뽑아준 인덱스 이용해서 응원글 랜덤 뽑기 */}
-            <SupportText>{supportArr[pop]}</SupportText>
+            <SupportText theme={theme}>{supportArr[pop]}</SupportText>
           </SupportTextContainer>
         </Supports>
         <LeftPill style={{ ...styles.circleShadow, backgroundColor: color }}>
-          <LeftpillText1>남은 약:</LeftpillText1>
-          <LeftpillText2>{leftPillNum}</LeftpillText2>
-          <LeftpillText3>/{totalPillNum}</LeftpillText3>
+          <LeftpillText1 theme={theme}>남은 약:</LeftpillText1>
+          <LeftpillText2 theme={theme}>{leftPillNum}</LeftpillText2>
+          <LeftpillText3 theme={theme}>/{totalPillNum}</LeftpillText3>
         </LeftPill>
       </GraphicContainer>
     );
@@ -154,7 +160,8 @@ const SupportEmoji = styled.Text`
 const SupportTextContainer = styled.View`
   width: 280px;
   padding: 10px;
-  background-color: lightgrey;
+  background-color: ${(props) =>
+    props.theme === 'light' ? '#d3d3d3' : '#343639'};
   border-radius: 22px;
   font-size: 20px;
   overflow: hidden;
@@ -162,6 +169,7 @@ const SupportTextContainer = styled.View`
 
 const SupportText = styled.Text`
   text-align: center;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white ')};
 `;
 
 const TakenPill = styled.Text`
@@ -181,12 +189,14 @@ const LeftpillText1 = styled.Text`
   font-weight: 400;
   text-align: center;
   top: 10%;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
 `;
 const LeftpillText2 = styled.Text`
   font-size: 80px;
   font-weight: 600;
   top: 15%;
   text-align: center;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
 `;
 const LeftpillText3 = styled.Text`
   font-size: 50px;
@@ -194,6 +204,7 @@ const LeftpillText3 = styled.Text`
   position: absolute;
   bottom: 0;
   right: -15%;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
 `;
 
 const styles = StyleSheet.create({
diff --git a/src/components/ManageList.jsx b/src/components/ManageList.jsx
index 114a842..58288a4 100644
--- a/src/components/ManageList.jsx
+++ b/src/components/ManageList.jsx
@@ -3,10 +3,13 @@ import { COLORS } from '../shared/color';
 import { View, Alert, StyleSheet } from 'react-native';
 import { useDeletePillData } from '../Hooks/usePill';
 import TextButton from './TextButton';
+import { useContext } from 'react';
+import { ThemeContext } from '../context/Theme';
 
 // TODO: MyPage에 있는 약 목록을 삭제하는 기능을 구현합니다.
 const ManageList = ({ id, pillName, time, navigate }) => {
   const { mutate: deletePill } = useDeletePillData();
+  const { theme } = useContext(ThemeContext);
 
   const handleDeletePill = (id) => {
     Alert.alert(
@@ -29,12 +32,12 @@ const ManageList = ({ id, pillName, time, navigate }) => {
 
   return (
     <View style={styles.list}>
-      <ManageListContainer style={styles.list}>
-        <ManageListTitle>{pillName}</ManageListTitle>
+      <ManageListContainer theme={theme} style={styles.list}>
+        <ManageListTitle theme={theme}>{pillName}</ManageListTitle>
         <ButtonGroupContainer>
           <TextButton
             // 클릭하면 페이지 이동
-            buttonColor={COLORS.BLACK}
+            buttonColor={theme === 'light' ? COLORS.BLACK : 'white'}
             buttonText="편집"
             onPress={() =>
               navigate('Stacks', {
@@ -70,11 +73,14 @@ const ManageListContainer = styled.View`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
+  background-color: ${(props) =>
+    props.theme === 'light' ? 'white' : '#343639'};
 `;
 
 const ManageListTitle = styled.Text`
   font-size: 28px;
   text-overflow: ellipsis;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
 `;
 
 const ButtonGroupContainer = styled.View`
diff --git a/src/components/PageContainer.jsx b/src/components/PageContainer.jsx
index 5ff73f3..7e12f46 100644
--- a/src/components/PageContainer.jsx
+++ b/src/components/PageContainer.jsx
@@ -1,23 +1,30 @@
+import { useContext } from 'react';
 import { StyleSheet, SafeAreaView } from 'react-native';
+import { ThemeContext } from '../context/Theme';
 
 const PageContainer = ({ children }) => {
-  return <SafeAreaView style={styles.screenArea}>{children}</SafeAreaView>;
+  const { theme } = useContext(ThemeContext);
+  return (
+    <SafeAreaView
+      theme={theme}
+      style={{
+        ...Platform.select({
+          ios: {
+            flex: 1,
+            backgroundColor: 'white',
+          },
+          android: {
+            flex: 1,
+            paddingTop: 30,
+            backgroundColor: 'white',
+          },
+        }),
+        backgroundColor: theme === 'light' ? 'white' : 'black',
+      }}
+    >
+      {children}
+    </SafeAreaView>
+  );
 };
 
-const styles = StyleSheet.create({
-  screenArea: {
-    ...Platform.select({
-      ios: {
-        flex: 1,
-        backgroundColor: 'white',
-      },
-      android: {
-        flex: 1,
-        paddingTop: 30,
-        backgroundColor: 'white',
-      },
-    }),
-  },
-});
-
 export default PageContainer;
diff --git a/src/components/ToggleButton.jsx b/src/components/ToggleButton.jsx
index f66594f..3beec08 100644
--- a/src/components/ToggleButton.jsx
+++ b/src/components/ToggleButton.jsx
@@ -1,16 +1,22 @@
 import { COLORS } from '../shared/color';
 import { useToggleTakenPill } from '../Hooks/usePill';
 import styled from '@emotion/native';
+import { useContext } from 'react';
+import { ThemeContext } from '../context/Theme';
 
 const ToggleButton = ({ id, togglePayload }) => {
   const { mutate: toggleTaken } = useToggleTakenPill();
   const isTaken = togglePayload.isTaken;
+  const { theme } = useContext(ThemeContext);
+
   return (
     <ToggleButtonContainer
       isTaken={isTaken}
       onPress={() => toggleTaken({ id, togglePayload })}
     >
-      <ToggleButtonText>{isTaken ? '취소' : '먹었어요!'}</ToggleButtonText>
+      <ToggleButtonText theme={theme}>
+        {isTaken ? '취소' : '먹었어요!'}
+      </ToggleButtonText>
     </ToggleButtonContainer>
   );
 };
@@ -28,6 +34,7 @@ const ToggleButtonContainer = styled.TouchableOpacity`
 const ToggleButtonText = styled.Text`
   font-size: 20px;
   line-height: 24px;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
 `;
 
 export default ToggleButton;
diff --git a/src/components/ToggleList.jsx b/src/components/ToggleList.jsx
index 7014f8a..3d73ed1 100644
--- a/src/components/ToggleList.jsx
+++ b/src/components/ToggleList.jsx
@@ -3,19 +3,22 @@ import styled from '@emotion/native';
 import ToggleButton from './ToggleButton';
 import { strToObjTime, translateTime } from '../utils/transTime';
 import { View, StyleSheet } from 'react-native';
+import { useContext } from 'react';
+import { ThemeContext } from '../context/Theme';
 
 // TODO: 조건부 스타일링 isTaken값이 false랑 true에 따라 다른 UI가 보입니다.
 const ToggleList = ({ pillName, time, id, isTaken, uid }) => {
   const togglePayload = { pillName, time, isTaken, uid };
   const objTime = strToObjTime(time);
   const mainPageTime = translateTime(objTime);
+  const { theme } = useContext(ThemeContext);
 
   return (
     <View style={styles.list}>
-      <ToggleListItem isTaken={isTaken}>
+      <ToggleListItem theme={theme} isTaken={isTaken}>
         <ToggleListItemTextContainer>
-          <ToggleListItemTitle>{pillName}</ToggleListItemTitle>
-          <ToggleListItemTime>{mainPageTime}</ToggleListItemTime>
+          <ToggleListItemTitle theme={theme}>{pillName}</ToggleListItemTitle>
+          <ToggleListItemTime theme={theme}>{mainPageTime}</ToggleListItemTime>
         </ToggleListItemTextContainer>
         <ToggleButton id={id} togglePayload={togglePayload} />
       </ToggleListItem>
@@ -28,7 +31,11 @@ const ToggleListItem = styled.View`
   padding: 12px 16px;
   box-shadow: 0px 0px 8px rgba(202, 202, 202, 0.23);
   background-color: ${(props) =>
-    props.isTaken ? COLORS.POINT_COLOR_100 : 'white'};
+    props.isTaken
+      ? COLORS.POINT_COLOR_100
+      : props.theme === 'light'
+      ? 'white'
+      : '#343639'};
   margin: 8px 16px;
   border-radius: 16px;
   flex-direction: row;
@@ -44,14 +51,15 @@ const ToggleListItemTextContainer = styled.View`
 const ToggleListItemTitle = styled.Text`
   font-size: 28px;
   text-overflow: ellipsis;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
 `;
 
 const ToggleListItemTime = styled.Text`
   font-size: 16px;
   margin: 0 0 0 16px;
   text-overflow: ellipsis;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
 `;
-
 const styles = StyleSheet.create({
   list: {
     ...Platform.select({
diff --git a/src/context/Theme.jsx b/src/context/Theme.jsx
index 02b044b..f1aea61 100644
--- a/src/context/Theme.jsx
+++ b/src/context/Theme.jsx
@@ -1,16 +1,17 @@
 import { createContext, useContext, useState } from 'react';
 import { Text, TouchableOpacity } from 'react-native';
+import CustomButton from '../components/CustomButton';
 
 const ThemeContext = createContext();
 
 export const ToggleModeButton = () => {
   const { theme, setTheme } = useContext(ThemeContext);
   return (
-    <TouchableOpacity
+    <CustomButton
+      title="Login"
+      buttonText={theme === 'light' ? '🌕 다크 모드로' : '☀️ 라이트 모드로'}
       onPress={() => (theme === 'light' ? setTheme('dark') : setTheme('light'))}
-    >
-      <Text>{theme === 'light' ? '☀️' : '🌕'}</Text>
-    </TouchableOpacity>
+    ></CustomButton>
   );
 };
 
diff --git a/src/screen/EditPage.jsx b/src/screen/EditPage.jsx
index 3f029f3..48135dd 100644
--- a/src/screen/EditPage.jsx
+++ b/src/screen/EditPage.jsx
@@ -7,7 +7,7 @@ import {
   SafeAreaView,
   StyleSheet,
 } from 'react-native';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import styled from '@emotion/native';
 import { useAddPillData, useEditPillData } from '../Hooks/usePill';
 import { COLORS } from '../shared/color';
@@ -15,6 +15,7 @@ import { useUID } from '../Hooks/useAuth';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import { strToObjTime, translateTime } from '../utils/transTime';
 import { CustomButton } from '../components';
+import { ThemeContext } from '../context/Theme';
 
 const EditPage = ({ navigation: { navigate }, route: { params } }) => {
   // '편집'에서 EditPage 들어오면
@@ -87,11 +88,24 @@ const EditPage = ({ navigation: { navigate }, route: { params } }) => {
     setEdited(true);
   };
 
+  const { theme } = useContext(ThemeContext);
+
   return (
-    <SafeAreaView style={styles.screenArea}>
-      <EditPageContainer>
+    <SafeAreaView
+      style={{
+        flex: 1,
+        screenArea: {
+          ...Platform.select({
+            android: {
+              paddingTop: 20,
+            },
+          }),
+        },
+      }}
+    >
+      <EditPageContainer theme={theme}>
         {/* page 의 title */}
-        <EditPageTitle>나의 약 정보</EditPageTitle>
+        <EditPageTitle theme={theme}>나의 약 정보</EditPageTitle>
         {/* 수정 폼 */}
         <EditForm>
           {/* 약 이름 인풋 */}
@@ -184,7 +198,7 @@ const windowHeight = Dimensions.get('window').height;
 
 const EditPageContainer = styled.SafeAreaView`
   flex: 1;
-  background-color: white;
+  background-color: ${(props) => (props.theme === 'light' ? 'white' : 'black')};
 `;
 
 const EditPageTitle = styled.Text`
@@ -192,6 +206,7 @@ const EditPageTitle = styled.Text`
   font-weight: 700;
   line-height: 40px;
   margin: 20px 16px;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
 `;
 
 const EditForm = styled.View``;
@@ -245,12 +260,4 @@ const ModalCard = styled.KeyboardAvoidingView`
   background-color: white;
 `;
 
-const styles = StyleSheet.create({
-  screenArea: {
-    ...Platform.select({
-      android: {
-        paddingTop: 20,
-      },
-    }),
-  },
-});
+const styles = StyleSheet.create({});
diff --git a/src/screen/LoginPage.jsx b/src/screen/LoginPage.jsx
index b3bf551..8090561 100644
--- a/src/screen/LoginPage.jsx
+++ b/src/screen/LoginPage.jsx
@@ -1,9 +1,7 @@
-import { SafeAreaView, Text, TextInput, StyleSheet } from 'react-native';
 import styled from '@emotion/native';
 import { useState, useContext } from 'react';
 import { COLORS } from '../shared/color';
 import { ThemeContext } from '../context/Theme';
-import { ToggleModeButton } from '../context/Theme';
 import { useSignIn } from '../Hooks/useAuth';
 import CustomButton from '../components/CustomButton';
 import CustomInput from '../components/CustomInput';
@@ -55,7 +53,6 @@ const LoginPage = ({ navigation: { navigate } }) => {
   return (
     <PageContainer>
       <LoginContainer theme={theme}>
-        <ToggleModeButton />
         {/* 이메일 인풋 */}
         <CustomInput
           keyboardType="email-address"
diff --git a/src/screen/MyPage.jsx b/src/screen/MyPage.jsx
index cc39de7..39c8fea 100644
--- a/src/screen/MyPage.jsx
+++ b/src/screen/MyPage.jsx
@@ -4,10 +4,13 @@ import { ManageList, CustomButton } from '../components';
 import { useUID } from '../Hooks/useAuth';
 import { useGetPillData } from '../Hooks/usePill';
 import { PageContainer } from '../components/index';
+import { useContext } from 'react';
+import { ThemeContext } from '../context/Theme';
 
 const MyPage = ({ navigation: { navigate } }) => {
   const { data: uid } = useUID();
   const { isLoading, isError, error, data: pillList } = useGetPillData(uid);
+  const { theme } = useContext(ThemeContext);
 
   // 에러 핸들링: 통신 실패의 경우 보여주는 화면입니다.
   if (isError) {
@@ -38,7 +41,7 @@ const MyPage = ({ navigation: { navigate } }) => {
     <PageContainer>
       <FlatList
         data={pillList}
-        ListHeaderComponent={<PageTitle>나의 약관리</PageTitle>}
+        ListHeaderComponent={<PageTitle theme={theme}>나의 약관리</PageTitle>}
         keyExtractor={(item) => item.id}
         renderItem={({ item: { id, pillName, time } }) => (
           <ManageList
@@ -71,11 +74,18 @@ const MyPage = ({ navigation: { navigate } }) => {
   );
 };
 
+const MyPageContainer = styled.SafeAreaView`
+  flex: 1;
+  /* background-color: ${(props) =>
+    props.theme === 'light' ? 'white' : 'black'}; */
+`;
+
 const PageTitle = styled.Text`
   font-size: 36px;
   font-weight: 700;
   line-height: 40px;
   margin: 20px 16px;
+  color: ${(props) => (props.theme === 'light' ? 'black' : 'white')};
 `;
 
 const CustomButtonContainer = styled.View`
diff --git a/src/screen/SettingPage.jsx b/src/screen/SettingPage.jsx
index 98b0c4e..69e548c 100644
--- a/src/screen/SettingPage.jsx
+++ b/src/screen/SettingPage.jsx
@@ -1,3 +1,5 @@
+import { useContext } from 'react';
+import { ThemeContext, ToggleModeButton } from '../context/Theme';
 import { CustomButton, PageContainer } from '../components/';
 import styled from '@emotion/native';
 
@@ -10,7 +12,11 @@ const SettingPage = ({ navigation: { navigate } }) => {
           buttonText="로그아웃"
           onPress={() => navigate('Stacks', { screen: '로그인' })}
         />
-        <CustomButton title="Login" buttonText="다크 모드" />
+        <ToggleModeButton
+          title="Login"
+          buttonColor="aqua"
+          buttonText="다크 모드"
+        />
       </CustomButtonWrapper>
     </PageContainer>
   );
diff --git a/src/screen/SignupPage.jsx b/src/screen/SignupPage.jsx
index b809a57..25bcac8 100644
--- a/src/screen/SignupPage.jsx
+++ b/src/screen/SignupPage.jsx
@@ -1,11 +1,10 @@
 import styled from '@emotion/native';
 import { useContext, useState } from 'react';
-import { Platform, SafeAreaView, StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import { useSignup } from '../Hooks/useAuth';
 import { FontAwesome } from '@expo/vector-icons';
 import { COLORS } from '../shared/color';
 import { ThemeContext } from '../context/Theme';
-import { ToggleModeButton } from '../context/Theme';
 import { PageContainer } from '../components/index';
 
 const regex = {
@@ -71,7 +70,6 @@ const SignupPage = ({ navigation: { navigate } }) => {
             color={theme === 'light' ? 'black' : 'white'}
           />
         </BackToLoginPageButton>
-        <ToggleModeButton />
         <InputContainer>
           <LabelText theme={theme}>아이디</LabelText>
           <CustomInput