diff --git a/.gitignore b/.gitignore
index 529d85c..97c9eb4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -62,4 +62,9 @@ buck-out/
 
 
 # 인증 키 등
-.env
\ No newline at end of file
+.env
+
+
+
+# 디자인시스템
+zDesign.txt
\ No newline at end of file
diff --git a/src/assets/DesignSystem.tsx b/src/assets/DesignSystem.tsx
new file mode 100644
index 0000000..13fb199
--- /dev/null
+++ b/src/assets/DesignSystem.tsx
@@ -0,0 +1,112 @@
+import {StyleSheet} from 'react-native';
+// import {DesignSystem} from '../../assets/DesignSystem';
+
+export const DesignSystem = StyleSheet.create({
+  centerArrange: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  h1SB: {
+    fontSize: 24,
+    fontFamily: 'Pretendard-SemiBold',
+  },
+  h2SB: {
+    fontSize: 17,
+    fontFamily: 'Pretendard-SemiBold',
+  },
+  h3SB: {
+    fontSize: 14,
+    fontFamily: 'Pretendard-SemiBold',
+  },
+  subtitle1: {
+    fontSize: 23,
+    fontFamily: 'Pretendard-SemiBold',
+  },
+  subtitle2: {
+    fontSize: 19,
+    fontFamily: 'Pretendard-Medium',
+  },
+  title1SB: {
+    fontSize: 18,
+    fontFamily: 'Pretendard-SemiBold',
+  },
+  title2Regular: {
+    fontSize: 16,
+    fontFamily: 'Pretendard-Regular',
+  },
+  title3SB: {
+    fontSize: 16,
+    fontFamily: 'Pretendard-SemiBold',
+  },
+  title4Md: {
+    fontSize: 16,
+    fontFamily: 'Pretendard-Medium',
+  },
+  body1Lt: {
+    fontSize: 16,
+    fontFamily: 'Pretendard-Light',
+  },
+  body2Lt: {
+    fontSize: 14,
+    fontFamily: 'Pretendard-Light',
+  },
+  caption1Lt: {
+    fontSize: 12,
+    fontFamily: 'Pretendard-Light',
+  },
+  caption2Lt: {
+    fontSize: 10,
+    fontFamily: 'Pretendard-Light',
+  },
+  grey1: {
+    color: '#FCFCFC',
+  },
+  grey2: {
+    color: '#F5F5F5',
+  },
+  grey3: {
+    color: '#EFEFEF',
+  },
+  grey4: {
+    color: '#E8E8E8',
+  },
+  grey5: {
+    color: '#DFDFDF',
+  },
+  grey6: {
+    color: '#C8C8C8',
+  },
+  grey7: {
+    color: '#B7B7B7',
+  },
+  grey8: {
+    color: '#949494',
+  },
+  grey9: {
+    color: '#777777',
+  },
+  grey10: {
+    color: '#616161',
+  },
+  grey11: {
+    color: '#555555',
+  },
+  grey12: {
+    color: '#3F3F3F',
+  },
+  grey13: {
+    color: '#383838',
+  },
+  grey14: {
+    color: '#2A2A2A',
+  },
+  grey15: {
+    color: '#1F1F1F',
+  },
+  grey16: {
+    color: '#1A1A1A',
+  },
+  grey17: {
+    color: '#111111',
+  },
+});
diff --git a/src/assets/images/banks/1.png b/src/assets/images/banks/1.png
index dc864a8..efe5ec3 100644
Binary files a/src/assets/images/banks/1.png and b/src/assets/images/banks/1.png differ
diff --git a/src/assets/images/banks/10.png b/src/assets/images/banks/10.png
index 833ebd9..ae5a9df 100644
Binary files a/src/assets/images/banks/10.png and b/src/assets/images/banks/10.png differ
diff --git a/src/assets/images/banks/11.png b/src/assets/images/banks/11.png
index 70bac2b..4335c75 100644
Binary files a/src/assets/images/banks/11.png and b/src/assets/images/banks/11.png differ
diff --git a/src/assets/images/banks/12.png b/src/assets/images/banks/12.png
index 9a0e916..56e18cc 100644
Binary files a/src/assets/images/banks/12.png and b/src/assets/images/banks/12.png differ
diff --git a/src/assets/images/banks/13.png b/src/assets/images/banks/13.png
index 759504a..85bcc49 100644
Binary files a/src/assets/images/banks/13.png and b/src/assets/images/banks/13.png differ
diff --git a/src/assets/images/banks/14.png b/src/assets/images/banks/14.png
index 585ae27..59c0c71 100644
Binary files a/src/assets/images/banks/14.png and b/src/assets/images/banks/14.png differ
diff --git a/src/assets/images/banks/15.png b/src/assets/images/banks/15.png
index 77d7870..4502bed 100644
Binary files a/src/assets/images/banks/15.png and b/src/assets/images/banks/15.png differ
diff --git a/src/assets/images/banks/16.png b/src/assets/images/banks/16.png
index f936f8a..ee86c03 100644
Binary files a/src/assets/images/banks/16.png and b/src/assets/images/banks/16.png differ
diff --git a/src/assets/images/banks/17.png b/src/assets/images/banks/17.png
index 2d1e06e..7ba0b1d 100644
Binary files a/src/assets/images/banks/17.png and b/src/assets/images/banks/17.png differ
diff --git a/src/assets/images/banks/18.png b/src/assets/images/banks/18.png
index 1110130..2476059 100644
Binary files a/src/assets/images/banks/18.png and b/src/assets/images/banks/18.png differ
diff --git a/src/assets/images/banks/19.png b/src/assets/images/banks/19.png
index c3411b9..7edf1d8 100644
Binary files a/src/assets/images/banks/19.png and b/src/assets/images/banks/19.png differ
diff --git a/src/assets/images/banks/2.png b/src/assets/images/banks/2.png
index 71dd924..740b515 100644
Binary files a/src/assets/images/banks/2.png and b/src/assets/images/banks/2.png differ
diff --git a/src/assets/images/banks/20.png b/src/assets/images/banks/20.png
index f72e4bd..56e18cc 100644
Binary files a/src/assets/images/banks/20.png and b/src/assets/images/banks/20.png differ
diff --git a/src/assets/images/banks/21.png b/src/assets/images/banks/21.png
index 42fa907..ee86c03 100644
Binary files a/src/assets/images/banks/21.png and b/src/assets/images/banks/21.png differ
diff --git a/src/assets/images/banks/22.png b/src/assets/images/banks/22.png
index 06bf6cb..3459ba8 100644
Binary files a/src/assets/images/banks/22.png and b/src/assets/images/banks/22.png differ
diff --git a/src/assets/images/banks/3.png b/src/assets/images/banks/3.png
index d8a377b..08f0977 100644
Binary files a/src/assets/images/banks/3.png and b/src/assets/images/banks/3.png differ
diff --git a/src/assets/images/banks/4.png b/src/assets/images/banks/4.png
index 65f622c..3459ba8 100644
Binary files a/src/assets/images/banks/4.png and b/src/assets/images/banks/4.png differ
diff --git a/src/assets/images/banks/5.png b/src/assets/images/banks/5.png
index 2bec4b5..f99f882 100644
Binary files a/src/assets/images/banks/5.png and b/src/assets/images/banks/5.png differ
diff --git a/src/assets/images/banks/6.png b/src/assets/images/banks/6.png
index 691c09a..04ab61a 100644
Binary files a/src/assets/images/banks/6.png and b/src/assets/images/banks/6.png differ
diff --git a/src/assets/images/banks/7.png b/src/assets/images/banks/7.png
index e78d603..55bdf4d 100644
Binary files a/src/assets/images/banks/7.png and b/src/assets/images/banks/7.png differ
diff --git a/src/assets/images/banks/8.png b/src/assets/images/banks/8.png
index 52fdac1..b99986f 100644
Binary files a/src/assets/images/banks/8.png and b/src/assets/images/banks/8.png differ
diff --git a/src/assets/images/banks/9.png b/src/assets/images/banks/9.png
index 9334ae9..750e777 100644
Binary files a/src/assets/images/banks/9.png and b/src/assets/images/banks/9.png differ
diff --git a/src/components/My/MyHeader.tsx b/src/components/My/MyHeader.tsx
index 1c35810..8c0aa5a 100644
--- a/src/components/My/MyHeader.tsx
+++ b/src/components/My/MyHeader.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import type {FC} from 'react';
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {DesignSystem} from '../../assets/DesignSystem';
 
 export type MyHeaderProps = {
   goBack: () => void;
@@ -18,7 +19,7 @@ export const MyHeader: FC<MyHeaderProps> = ({goBack, title, save}) => {
         </View>
       </TouchableOpacity>
       <View>
-        <Text style={[styles.headerText]}>{title}</Text>
+        <Text style={[DesignSystem.title4Md, {color: 'black'}]}>{title}</Text>
       </View>
       {save !== undefined ? (
         <TouchableOpacity onPress={save}>
@@ -49,13 +50,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginLeft: 16,
   },
-  headerText: {
-    fontSize: 17,
-    color: 'black',
-    marginLeft: 16,
-    marginRight: 16,
-    // fontWeight: '600',
-  },
   saveButton: {
     marginRight: 16,
     color: '#6C69FF',
diff --git a/src/components/My/MyInquiryListDetails.tsx b/src/components/My/MyInquiryListDetails.tsx
index b96cbc8..8bf9c9a 100644
--- a/src/components/My/MyInquiryListDetails.tsx
+++ b/src/components/My/MyInquiryListDetails.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import type {FC} from 'react';
 import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
+import {DesignSystem} from '../../assets/DesignSystem';
 
 export type MyInquiryDetailsProps = {
   title: string;
@@ -19,11 +20,11 @@ export const MyInquiryDetails: FC<MyInquiryDetailsProps> = ({title, body, date,
     <View style={{flex: 1}}>
         <TouchableOpacity onPress={handleReviewPress} style={[styles.listDetailsWrap]}>
             <View style={[styles.listLeftWrap]}>
-                <Text style={[styles.titleText, styles.title4Md]}>{title}</Text>
-                <Text style={[styles.dateText]}>{date.slice(0,4)}-{date.slice(5,7)}-{date.slice(8,10)}</Text>
+                <Text style={[styles.titleText, DesignSystem.title4Md]}>{title}</Text>
+                <Text style={[DesignSystem.body2Lt, {color: '#949494'}]}>{date.slice(0,4)}-{date.slice(5,7)}-{date.slice(8,10)}</Text>
             </View>
             <View>
-                <Text style={[styles.statusText]}>{status}</Text>
+                <Text style={[DesignSystem.body1Lt, {color: '#777777'}]}>{status}</Text>
             </View>
         </TouchableOpacity>
     </View>
@@ -35,11 +36,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontFamily: 'Pretendard-Medium',
   },
-  dateText: {
-    color: '#949494',
-    fontSize: 14,
-    fontFamily: 'Pretendard-Light',
-  },
   listDetailsWrap: {
     flex: 1,
     flexDirection: 'row',
@@ -54,9 +50,4 @@ const styles = StyleSheet.create({
     color: '#000000',
     marginBottom: 8,
   },
-  statusText: {
-    color: '#777777',
-    fontSize: 16,
-    fontFamily: 'Pretendard-Light',
-  },
 });
diff --git a/src/components/My/MyInquiryMakeButton.tsx b/src/components/My/MyInquiryMakeButton.tsx
index 2381266..9f50a70 100644
--- a/src/components/My/MyInquiryMakeButton.tsx
+++ b/src/components/My/MyInquiryMakeButton.tsx
@@ -1,6 +1,7 @@
 import React, {FC} from 'react';
 import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {DesignSystem} from '../../assets/DesignSystem';
 
 export type goWriteProps = {
   goWrite: () => void;
@@ -10,7 +11,7 @@ export const MyInquiryMakeButton: FC<goWriteProps> = ({goWrite}) => {
   return (
     <View style={[styles.progressRow]}>
       <TouchableOpacity style={[styles.progressToggle]} onPress={goWrite}>
-        <Text style={[styles.buttonText]}>문의 남기기 </Text>
+        <Text style={[DesignSystem.body1Lt, {color: 'white'}]}>문의 남기기 </Text>
         <Icon name="pencil" size={18} color="white" />
       </TouchableOpacity>
     </View>
@@ -37,9 +38,4 @@ const styles = StyleSheet.create({
     backgroundColor: '#2A2A2A',
     flexDirection: 'row',
   },
-  buttonText: {
-    color: 'white',
-    fontSize: 16,
-    fontFamily: 'Pretendard-Light',
-  },
 });
diff --git a/src/components/My/MyNotificationsSwitch.tsx b/src/components/My/MyNotificationsSwitch.tsx
index 7582a53..4cdbcab 100644
--- a/src/components/My/MyNotificationsSwitch.tsx
+++ b/src/components/My/MyNotificationsSwitch.tsx
@@ -1,6 +1,7 @@
 import React, {useState} from 'react';
 import type {FC} from 'react';
 import {StyleSheet, Text, TouchableOpacity, Switch, View, Image} from 'react-native';
+import {DesignSystem} from '../../assets/DesignSystem';
 
 export type MyNotificationsSwitchProps = {
   text: string;
@@ -11,7 +12,7 @@ export type MyNotificationsSwitchProps = {
 export const MyNotificationsSwitch: FC<MyNotificationsSwitchProps> = ({text, value, onValueChange}) => {
   return (
     <View>
-      <Text style={{marginLeft: 21.87, color: '#000000', fontSize: 16}}>{text}</Text>
+      <Text style={[DesignSystem.body1Lt, {marginLeft: 21.88, color: '#000000'}]}>{text}</Text>
       <Switch
         value={value}
         trackColor={{false: '#DFDFDF', true: '#6C69FF'}}
diff --git a/src/components/My/MyPointList.tsx b/src/components/My/MyPointList.tsx
index 8263f0b..a874c13 100644
--- a/src/components/My/MyPointList.tsx
+++ b/src/components/My/MyPointList.tsx
@@ -1,6 +1,7 @@
 import React, {useState, useEffect} from 'react';
 import {View, StyleSheet, Text, TouchableOpacity, Image} from 'react-native';
 import moment from 'moment';
+import {DesignSystem} from '../../assets/DesignSystem';
 
 //prettier-ignore
 export const MyPointList = () => {
@@ -17,19 +18,19 @@ export const MyPointList = () => {
   return (
     <View style={[styles.listWrap]}>
         <View style={[styles.listDayWrap]}>
-            <Text style={[styles.dateText, styles.title33B16]}>{month}.{day}</Text>
+            <Text style={[styles.dateText, DesignSystem.title3SB]}>{month}.{day}</Text>
         </View>
         <View style={[styles.listDetailsWrap]}>
             <View style={[styles.listMissionWrap]}>
-                <Text style={[styles.storeNameText, styles.title33B16]}>{title}</Text>
+                <Text style={[styles.storeNameText, DesignSystem.title3SB]}>{title}</Text>
                 <Text style={[styles.missionText], {fontFamily: 'Pretendard-Light'}}>{subTitle}</Text>
                 {/* <Text style={[styles.missionText], {point > 0 ? fontFamily: 'Pretendard-Light' : fontFamily: 'Pretendard-Light' }}>{subTitle}</Text> */}
             </View>
             <View style={[styles.listPointWrap]}>
                 {point > 0 ?
-                <Text style={[styles.title33B16, {color: '#6C69FF'}]}>{point.toString().replace(/\B(?=(\d{3})(?!\d))/g, ',')}P</Text>
+                <Text style={[DesignSystem.title3SB, {color: '#6C69FF'}]}>{point.toString().replace(/\B(?=(\d{3})(?!\d))/g, ',')}P</Text>
                 :
-                <Text style={[styles.title33B16, {color: '#B7B7B7'}]}>{point.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}P</Text>
+                <Text style={[DesignSystem.title3SB, {color: '#B7B7B7'}]}>{point.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}P</Text>
                 }
             </View>
 
@@ -39,10 +40,6 @@ export const MyPointList = () => {
 };
 
 const styles = StyleSheet.create({
-  title33B16: {
-    fontSize: 16,
-    fontFamily: 'Pretendard-SemiBold',
-  },
   listWrap: {
     flexDirection: 'row',
   },
diff --git a/src/components/My/MyUser.tsx b/src/components/My/MyUser.tsx
index 4986f8a..8f01845 100644
--- a/src/components/My/MyUser.tsx
+++ b/src/components/My/MyUser.tsx
@@ -3,6 +3,8 @@ import type {FC} from 'react';
 import {View, StyleSheet, Text, TouchableOpacity, Image} from 'react-native';
 import {Colors} from 'react-native-paper';
 import {useNavigation} from '@react-navigation/native';
+import {DesignSystem} from '../../assets/DesignSystem';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 
 export type MyUserProps = {
   authentication: boolean;
@@ -13,7 +15,7 @@ export type MyUserProps = {
 
 //prettier-ignore
 export const MyUser: FC<MyUserProps> = ({authentication, email, name, point }) => {
-  const [statusMessage, setMessage] = useState("");
+  const [statusMessage, setMessage] = useState('');
   useEffect(()=>{
     if (!authentication) {setMessage('미인증')}
     else {setMessage('')}
@@ -22,40 +24,40 @@ export const MyUser: FC<MyUserProps> = ({authentication, email, name, point }) =
 
   return (
     <View style={[styles.userInfo]}>
-      <View style={[styles.userCard]}>
-        <View style={[styles.profileWrap]}>
+      <View style={{marginLeft: 16, marginRight:16}}>
+        <View style={[styles.userCard]}>
           <Image
             style={[styles.profileImg]}
             source={require('../../assets/images/bobProfile.png')} //
           />
-        </View>
-        <View style={[styles.userWrap]}>
-          <View style={[styles.username]}>
-            <Text style={[styles.usernameText]}>{name}님</Text>
-            <Text style={[styles.userauthText]}>{statusMessage}</Text>
+          <View style={[styles.userWrap]}>
+            <View style={[styles.username]}>
+              <Text style={[DesignSystem.title3SB, styles.usernameText]}>{name}님</Text>
+              <Text style={[DesignSystem.caption1Lt, styles.userauthText]}>{statusMessage}</Text>
+            </View>
+            <Text style={[DesignSystem.caption1Lt, styles.userEmail]}>{email}</Text>
           </View>
-          <Text style={[styles.userEmail]}>{email}</Text>
+          <TouchableOpacity onPress={() => navigation.navigate('MyEditUserInfo', {username: name})}>
+            <View style={[styles.editUserInfo]}>
+              <Text style={[DesignSystem.caption1Lt, {color: '#6C69FF'}]}>회원정보 수정</Text>
+              <Image
+                style={{width: 24}}
+                source={require('../../assets/images/arrowGrey8.png')} //
+              />
+            </View>
+          </TouchableOpacity>
         </View>
-        <TouchableOpacity onPress={() => navigation.navigate('MyEditUserInfo', {username: name})}>
-          <View style={[styles.editUserInfo]}>
-            <Text style={{color: '#6C69FF', fontSize: 12}}>회원정보 수정</Text>
-            <Image
+        <TouchableOpacity onPress={() => navigation.navigate('MyPoint', {point: point})} style={[styles.userPointWrap]}>
+          <View style={[DesignSystem.centerArrange, {flexDirection: 'row' }]}>
+            <Text style={[DesignSystem.body2Lt, {marginLeft: 20, marginRight: 16}]}>내 포인트</Text>
+            <Text style={[DesignSystem.title4Md, {color: '#111111'}]}>{point.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</Text>
+          </View>
+          <Image
               style={[styles.MyNextImg]}
-              source={require('../../assets/images/arrowGrey8.png')} //
+              source={require('../../assets/images/arrowGrey10.png')} //
             />
-          </View>
         </TouchableOpacity>
-      </View>
-      <TouchableOpacity onPress={() => navigation.navigate('MyPoint', {point: point})} style={[styles.userPoint]}>
-        <View style={{flexDirection: 'row'}}>
-          <Text style={{marginLeft: 20, color: '#616161', fontSize: 14}}>내 포인트</Text>
-          <Text style={{marginLeft: 16, color: '#111111', fontSize: 14}}>{point.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</Text>
         </View>
-        <Image
-            style={[styles.MyNextImg]}
-            source={require('../../assets/images/arrowGrey10.png')} //
-          />
-      </TouchableOpacity>
     </View>
   );
 };
@@ -73,15 +75,11 @@ const styles = StyleSheet.create({
     marginTop: 16,
     marginBottom: 18,
   },
-  profileWrap: {
-    marginLeft: 16,
-    marginRight: 16,
-  },
   profileImg: {
     width: 48,
     height: 48,
     borderRadius: 24,
-    // marginBottom: 8,
+    marginRight: 16,
   },
   userWrap: {
     flex: 1,
@@ -95,16 +93,12 @@ const styles = StyleSheet.create({
   },
   usernameText: {
     color: '#111111',
-    fontSize: 16,
     marginRight: 8,
-    fontWeight: 'bold',
   },
   userauthText: {
-    fontSize: 12,
     color: '#E03D32',
   },
   userEmail: {
-    fontSize: 12,
     color: '#616161',
   },
   statusWrap: {
@@ -117,13 +111,10 @@ const styles = StyleSheet.create({
   },
   editUserInfo: {
     flexDirection: 'row',
-    marginRight: 16,
     justifyContent: 'center',
     alignItems: 'center',
   },
-  userPoint: {
-    marginLeft: 16,
-    marginRight: 16,
+  userPointWrap: {
     backgroundColor: '#F6F6FE',
     borderRadius: 10,
     height: 48,
diff --git a/src/components/My/MyWriteInquiry.tsx b/src/components/My/MyWriteInquiry.tsx
index d052404..b4038e0 100644
--- a/src/components/My/MyWriteInquiry.tsx
+++ b/src/components/My/MyWriteInquiry.tsx
@@ -26,7 +26,10 @@ export const MyWriteInquiry = () => {
             onFocus={() => setFocusedTitle(true)}
           />
           <TouchableOpacity onPress={() => setTitle('')} style={[styles.titleXView]}>
-            <Image source={require('../../assets/images/closeCircle.png')} style={[styles.titleX]} />
+            <Image
+              source={require('../../assets/images/closeCircle.png')}
+              style={[styles.titleX]}
+            />
           </TouchableOpacity>
         </View>
         <View style={[styles.bodyWrap]}>
@@ -72,6 +75,7 @@ const styles = StyleSheet.create({
   },
   titleWrap: {
     flexDirection: 'row',
+    alignItems: 'center',
   },
   nameInput: {
     width: '100%',
@@ -93,6 +97,7 @@ const styles = StyleSheet.create({
   titleXView: {
     width: 18,
     height: 18,
+    right: 26,
   },
   titleX: {
     width: 18,
diff --git a/src/modal/MyBankFeeModal.tsx b/src/modal/MyBankFeeModal.tsx
new file mode 100644
index 0000000..397ecb1
--- /dev/null
+++ b/src/modal/MyBankFeeModal.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import type {FC} from 'react';
+import {
+  Modal,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  TouchableWithoutFeedback,
+  Dimensions,
+} from 'react-native';
+import {useNavigation} from '@react-navigation/native';
+
+type MyBankFeeModalProps = {
+  visible: boolean;
+  closeBankFeeModal: () => void;
+};
+
+const MyBankModal: FC<MyBankFeeModalProps> = ({visible, closeBankFeeModal}) => {
+  const MARGINBOTTOM = Dimensions.get('screen').height / 2 - 80;
+  const navigation = useNavigation();
+
+  return (
+    <Modal visible={visible} transparent statusBarTranslucent animationType="fade">
+      <View style={[styles.overlay]}>
+        <TouchableWithoutFeedback onPress={closeBankFeeModal}>
+          <View style={styles.background} />
+        </TouchableWithoutFeedback>
+        <View style={[styles.modalContainer, {marginBottom: MARGINBOTTOM}]}>
+          <View style={[styles.contentWrap]}>
+            <View style={[styles.textWrap]}>
+              <Text style={[styles.title1SB]}>입금신청 안내</Text>
+              <Text style={[styles.body1Lt, {marginTop: 10, marginBottom: 10}]}>입금시 수수료 500포인트가 차감됩니다.</Text>
+            </View>
+            <View style={[styles.buttonWrap]}>
+              <TouchableOpacity style={[styles.buttonStyle, styles.cancelButton]} onPress={closeBankFeeModal}>
+                <Text style={{color: '#616161', fontFamily: 'Pretendard-Regular', fontSize: 16}}>취소</Text>
+              </TouchableOpacity>
+              <TouchableOpacity style={[styles.buttonStyle, styles.okButton]} onPress={() => navigation.navigate('MyChangePointDone')}>
+                <Text style={[styles.body1Lt, {color: '#FFFFFF', fontFamily: 'Pretendard-Medium', fontSize: 16}]}>확인</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default MyBankModal;
+
+const styles = StyleSheet.create({
+  body1Lt: {
+    color: '#616161',
+    fontFamily: 'Pretendard-Light',
+    fontSize: 16,
+  },
+  title1SB: {
+    color: '#111111',
+    fontFamily: 'Pretendard-SemiBold',
+    fontSize: 18,
+  },
+  overlay: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+  },
+  background: {
+    flex: 1,
+  },
+  modalContainer: {
+    width: 334,
+    height: 160,
+    marginLeft: 20,
+    marginRight: 20,
+    justifyContent: 'center',
+    backgroundColor: 'white',
+    borderRadius: 15,
+  },
+  contentWrap: {
+    margin: 20,
+    flexDirection: 'column',
+  },
+  textWrap: {
+
+  },
+  buttonWrap: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  buttonStyle: {
+    width: '47%',
+    height: 48,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 8,
+  },
+  cancelButton: {
+    borderWidth: 1,
+    borderColor: '#949494',
+  },
+  okButton: {
+    backgroundColor: '#6C69FF',
+  },
+});
diff --git a/src/modal/MyBankModal.tsx b/src/modal/MyBankModal.tsx
index a1ffa89..6144827 100644
--- a/src/modal/MyBankModal.tsx
+++ b/src/modal/MyBankModal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import type {FC} from 'react';
 import {
   Modal,
@@ -13,17 +13,20 @@ import {
 } from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
-type ReviewModalProps = {
+type MyBankModalProps = {
   visible: boolean;
   closeBankModal: () => void;
+  selectedBank: string;
+  setSelectedBank: (i: string) => void;
 };
 //prettier-ignore
 const BANKIMAGES = [
-    require('../assets/images/banks/1.png'), require('../assets/images/banks/2.png'), require('../assets/images/banks/3.png'), require('../assets/images/banks/4.png'), require('../assets/images/banks/5.png'), require('../assets/images/banks/6.png'), require('../assets/images/banks/7.png'), require('../assets/images/banks/8.png'), require('../assets/images/banks/9.png'), require('../assets/images/banks/10.png'),
-     require('../assets/images/banks/11.png'), require('../assets/images/banks/12.png'), require('../assets/images/banks/13.png'), require('../assets/images/banks/14.png'), require('../assets/images/banks/15.png'), require('../assets/images/banks/16.png'), require('../assets/images/banks/17.png'), require('../assets/images/banks/18.png'), require('../assets/images/banks/19.png'), require('../assets/images/banks/20.png'),
-     require('../assets/images/banks/21.png'), require('../assets/images/banks/22.png'),
+    {name: 'KB국민', imgSrc: require('../assets/images/banks/1.png')}, {name: 'IBK기업', imgSrc: require('../assets/images/banks/2.png')}, {name: 'NH농협', imgSrc: require('../assets/images/banks/3.png')}, {name: '신한', imgSrc: require('../assets/images/banks/4.png')}, {name: '우리', imgSrc: require('../assets/images/banks/5.png')}, {name: '한국시티', imgSrc: require('../assets/images/banks/6.png')}, {name: '토스뱅크', imgSrc: require('../assets/images/banks/7.png')}, {name: '카카오뱅크', imgSrc: require('../assets/images/banks/8.png')}, {name: 'SC제일', imgSrc: require('../assets/images/banks/9.png')}, {name: '하나', imgSrc: require('../assets/images/banks/10.png')},
+    {name: '대구', imgSrc: require('../assets/images/banks/11.png')}, {name: '경남', imgSrc: require('../assets/images/banks/12.png')}, {name: 'KDB산업', imgSrc: require('../assets/images/banks/13.png')}, {name: '우체국', imgSrc: require('../assets/images/banks/14.png')}, {name: '수협', imgSrc: require('../assets/images/banks/15.png')}, {name: '광주', imgSrc: require('../assets/images/banks/16.png')}, {name: 'SBI저축은행', imgSrc: require('../assets/images/banks/17.png')}, {name: '새마을금고', imgSrc: require('../assets/images/banks/18.png')}, {name: '케이뱅크', imgSrc: require('../assets/images/banks/19.png')}, {name: '부산', imgSrc: require('../assets/images/banks/20.png')},
+    {name: '전북', imgSrc: require('../assets/images/banks/21.png')}, {name: '제주', imgSrc: `require('../assets/images/banks/22.png')`},
 ];
-const MyBankModal: FC<ReviewModalProps> = ({visible, closeBankModal}) => {
+
+const MyBankModal: FC<MyBankModalProps> = ({visible, closeBankModal, selectedBank, setSelectedBank}) => {
   const height = Dimensions.get('screen').height;
   const modalWidth = Dimensions.get('screen').width - 33;
   const insets = useSafeAreaInsets();
@@ -48,8 +51,16 @@ const MyBankModal: FC<ReviewModalProps> = ({visible, closeBankModal}) => {
             showsHorizontalScrollIndicator={false}
             showsVerticalScrollIndicator={false}
             renderItem={({item, index}) => (
-              <TouchableOpacity key={index} onPress={() => console.log(index)}>
-                <Image source={item} style={{width: 103, height: 69}} />
+              <TouchableOpacity key={index} onPress={() => setSelectedBank(item['name'])}>
+                {/* //closeBankModal도해야하는데... */}
+                <View
+                  style={[styles.banksWrap, selectedBank === item.name && styles.selectedBanksWrap]}
+                >
+                  <Image source={item['imgSrc']} style={{marginBottom: 4}} />
+                  <Text style={{color: '#383838', fontFamily: 'Pretendard-Medium', fontSize: 14}}>
+                    {item.name}
+                  </Text>
+                </View>
               </TouchableOpacity>
             )}
             ItemSeparatorComponent={() => <View style={{marginTop: 16}} />}
@@ -98,4 +109,18 @@ const styles = StyleSheet.create({
     color: '#111111',
     fontSize: 22,
   },
+  banksWrap: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 103,
+    height: 69,
+    borderWidth: 1,
+    borderRadius: 10,
+    borderColor: '#DFDFDF',
+  },
+  selectedBanksWrap: {
+    borderColor: '#6C69FF',
+    backgroundColor: '#F6F6FE',
+  },
 });
diff --git a/src/nav/MyNavigator.tsx b/src/nav/MyNavigator.tsx
index cffd538..feb3e44 100644
--- a/src/nav/MyNavigator.tsx
+++ b/src/nav/MyNavigator.tsx
@@ -8,6 +8,7 @@ import {MyEditUserInfo} from '../screens/MyEditUserInfo';
 import {MyPoint} from '../screens/MyPoint';
 import {getFocusedRouteNameFromRoute} from '@react-navigation/native';
 import {MyChangePoint} from '../screens/MyChangePoint';
+import {MyChangePointDone} from '../screens/MyChangePointDone';
 
 export type MyStackParamList = {
   MyPage: undefined;
@@ -17,6 +18,7 @@ export type MyStackParamList = {
   MyNotificationsSetting: undefined;
   MyInquiry: undefined;
   MyChangePoint: undefined;
+  MyChangePointDone: undefined;
 };
 
 const Stack = createStackNavigator<MyStackParamList>();
@@ -30,7 +32,8 @@ export const MyNavigator = ({navigation, route}) => {
       routeName === 'MyReview' ||
       routeName === 'MyNotificationsSetting' ||
       routeName === 'MyInquiry' ||
-      routeName === 'MyChangePoint'
+      routeName === 'MyChangePoint' ||
+      routeName === 'MyChangePointDone'
     ) {
       navigation.setOptions({tabBarStyle: {display: 'none'}});
     } else {
@@ -49,6 +52,7 @@ export const MyNavigator = ({navigation, route}) => {
       <Stack.Screen name="MyNotificationsSetting" component={MyNotificationsSetting} />
       <Stack.Screen name="MyInquiry" component={MyInquiry} />
       <Stack.Screen name="MyChangePoint" component={MyChangePoint} />
+      <Stack.Screen name="MyChangePointDone" component={MyChangePointDone} />
     </Stack.Navigator>
   );
 };
diff --git a/src/screens/MyChangePoint.tsx b/src/screens/MyChangePoint.tsx
index c015af8..9bef1f2 100644
--- a/src/screens/MyChangePoint.tsx
+++ b/src/screens/MyChangePoint.tsx
@@ -6,6 +6,7 @@ import {MyStackParamList} from '../nav/MyNavigator';
 import {MyHeader} from '../components/My/MyHeader';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import MyBankModal from '../modal/MyBankModal';
+import MyBankFeeModal from '../modal/MyBankFeeModal';
 
 type Props = NativeStackScreenProps<MyStackParamList, 'MyChangePoint'>;
 
@@ -17,90 +18,131 @@ export const MyChangePoint = ({navigation, route}: Props) => {
   const [inputName, setInputName] = useState('');
   const [focusedAccounts, setFocusedAccounts] = useState(false);
   const [inputAccounts, setInputAccounts] = useState('');
+  const [selectedBank, setSelectedBank] = useState('');
+  const [openBankModal, setOpenBankModal] = useState(false);
+  const [fillDone, setFillDone] = useState(false);
 
   const goBack = () => {
     navigation.goBack();
   };
-  const [openBankModal, setOpenBankModal] = useState(false);
+  const handleSubmit = () => {
+    console.log('입금신청', inputName, inputPoint, inputAccounts);
+    setFillDone(true);
+  };
+
   return (
     <SafeAreaView style={[styles.flex, {backgroundColor: 'white'}]}>
       <MyHeader goBack={goBack} title={'포인트 전환 신청'} />
       <View style={[styles.totalWrap]}>
-        <View style={[styles.titleNinput]}>
-          <Text style={[styles.title4Md]}>전환할 포인트</Text>
-          <View style={{flexDirection: 'row-reverse'}}>
-            <Text style={{marginRight: 8,color: '#6C69FF',fontFamily: 'Pretendard-Regular',fontSize: 12}}>
-              내 포인트 {point.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}P
+        <View style={{flex: 1}}>
+          <View style={[styles.titleNinput]}>
+            <Text style={[styles.title4Md]}>전환할 포인트</Text>
+            <View style={{flexDirection: 'row-reverse'}}>
+              <Text style={{marginRight: 8,color: '#6C69FF',fontFamily: 'Pretendard-Regular',fontSize: 12}}>
+                내 포인트 {point.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}P
+              </Text>
+            </View>
+            <View style={{flexDirection: 'row', alignItems: 'center', marginBottom: 4}}>
+              <TextInput
+                style={[
+                  styles.inputText,
+                  focusedPoint ? styles.focusBorder : styles.unfocusBorder,
+                  {paddingRight: 32},
+                ]}
+                onChangeText={(text) => {
+                  setInputPoint(text);
+                }}
+                value={inputPoint.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+                textAlign="right"
+                onBlur={() => setFocusedPoint(false)}
+                onFocus={() => setFocusedPoint(true)}
+              />
+              <Text style={{position: 'relative', right: 22, color: '#949494', fontFamily: 'Pretendard-Light', fontSize: 16}}>
+                원
+              </Text>
+            </View>
+            <Text style={[styles.caption1Light, {color: '#949494'}]}>
+              포인트는 5000P 부터 5,000원 단위로 전환 가능합니다.
             </Text>
+            <Text style={[styles.caption1Light]}>또한, 송금 수수료 500P가 차감됩니다.</Text>
           </View>
-          <View style={{flexDirection: 'row', alignItems: 'center', marginBottom: 4}}>
+          <View style={[styles.titleNinput]}>
+            <Text style={[styles.title4Md, {marginBottom: 8}]}>예금주</Text>
             <TextInput
+              style={[styles.inputText, focusedName ? styles.focusBorder : styles.unfocusBorder]}
+              onChangeText={(text) => {
+                setInputName(text);
+              }}
+              value={inputName}
+              placeholder="예금주명 입력"
+              onBlur={() => setFocusedName(false)}
+              onFocus={() => setFocusedName(true)}
+            />
+          </View>
+          <View style={[styles.titleNinput]}>
+            <Text style={[styles.title4Md, {marginBottom: 8}]}>은행</Text>
+            <TouchableOpacity
+              onPress={() => setOpenBankModal(true)}
               style={[
                 styles.inputText,
-                focusedPoint ? styles.focusBorder : styles.unfocusBorder,
-                {paddingRight: 32},
+                styles.unfocusBorder,
+                {flexDirection: 'row', justifyContent: 'space-between'},
               ]}
+            >
+              <Text style={{color: '#949494', fontFamily: 'Pretendard-Light', fontSize: 16}}>
+                {selectedBank === '' ? '은행 선택' : selectedBank}
+              </Text>
+              <Icon name="menu-down" size={24} color="black" />
+            </TouchableOpacity>
+          </View>
+          <View style={[styles.titleNinput]}>
+            <Text style={[styles.title4Md, {marginBottom: 8}]}>계좌 번호</Text>
+            <TextInput
+              style={[styles.inputText, focusedAccounts ? styles.focusBorder : styles.unfocusBorder]}
               onChangeText={(text) => {
-                setInputPoint(text);
+                setInputAccounts(text);
               }}
-              value={inputPoint.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
-              textAlign="right"
-              onBlur={() => setFocusedPoint(false)}
-              onFocus={() => setFocusedPoint(true)}
+              value={inputAccounts}
+              placeholder="숫자로만 입력 (-제외)"
+              onBlur={() => setFocusedAccounts(false)}
+              onFocus={() => setFocusedAccounts(true)}
             />
-            <Text style={{position: 'relative', right: 22, color: '#949494', fontFamily: 'Pretendard-Light', fontSize: 16}}>
-              원
-            </Text>
           </View>
-          <Text style={[styles.caption1Light, {color: '#949494'}]}>
-            포인트는 5000P 부터 5,000원 단위로 전환 가능합니다.
-          </Text>
-          <Text style={[styles.caption1Light]}>또한, 송금 수수료 500P가 차감됩니다.</Text>
-        </View>
-        <View style={[styles.titleNinput]}>
-          <Text style={[styles.title4Md, {marginBottom: 8}]}>예금주</Text>
-          <TextInput
-            style={[styles.inputText, focusedName ? styles.focusBorder : styles.unfocusBorder]}
-            onChangeText={(text) => {
-              setInputName(text);
-            }}
-            value={inputName}
-            placeholder="예금주명 입력"
-            onBlur={() => setFocusedName(false)}
-            onFocus={() => setFocusedName(true)}
-          />
-        </View>
-        <View style={[styles.titleNinput]}>
-          <Text style={[styles.title4Md, {marginBottom: 8}]}>은행</Text>
-          <TouchableOpacity
-            onPress={() => setOpenBankModal(true)}
-            style={[
-              styles.inputText,
-              styles.unfocusBorder,
-              {flexDirection: 'row', justifyContent: 'space-between'},
-            ]}
-          >
-            <Text style={{color: '#949494', fontFamily: 'Pretendard-Light', fontSize: 16}}>
-              은행 선택
-            </Text>
-            <Icon name="menu-down" size={24} color="black" />
-          </TouchableOpacity>
-        </View>
-        <View style={[styles.titleNinput]}>
-          <Text style={[styles.title4Md, {marginBottom: 8}]}>계좌 번호</Text>
-          <TextInput
-            style={[styles.inputText, focusedAccounts ? styles.focusBorder : styles.unfocusBorder]}
-            onChangeText={(text) => {
-              setInputAccounts(text);
-            }}
-            value={inputAccounts}
-            placeholder="숫자로만 입력 (-제외)"
-            onBlur={() => setFocusedAccounts(false)}
-            onFocus={() => setFocusedAccounts(true)}
-          />
         </View>
+        <TouchableOpacity
+          onPress={handleSubmit}
+          style={[styles.buttonWrap]}
+          disabled={
+            inputPoint !== '' && inputName !== '' && selectedBank !== '' && inputAccounts !== ''
+              ? false
+              : true
+          }
+        >
+          {inputPoint !== '' && inputName !== '' && selectedBank !== '' && inputAccounts !== '' ? (
+            <View style={[styles.buttonStyle, styles.activeButton]}>
+              <Text style={[styles.activeButtonText]}>입금신청</Text>
+            </View>
+          ) : (
+            <View style={[styles.buttonStyle, styles.inactiveButton]}>
+              <Text style={[styles.inactiveButtonText]}>입금신청</Text>
+            </View>
+          )}
+        </TouchableOpacity>
       </View>
-      <MyBankModal visible={openBankModal} closeBankModal={() => setOpenBankModal(false)} />
+      <MyBankModal
+        visible={openBankModal}
+        closeBankModal={() => setOpenBankModal(false)}
+        selectedBank={selectedBank}
+        setSelectedBank={(bankName: string) => setSelectedBank(bankName)}
+      />
+      {fillDone && (
+        <MyBankFeeModal
+          visible={
+            inputPoint !== '' && inputName !== '' && selectedBank !== '' && inputAccounts !== ''
+          }
+          closeBankFeeModal={() => setFillDone(false)}
+        />
+      )}
     </SafeAreaView>
   );
 };
@@ -120,6 +162,7 @@ const styles = StyleSheet.create({
     marginTop: 20,
     marginLeft: 16,
     marginRight: 16,
+    flex: 1,
   },
   titleNinput: {
     marginBottom: 24,
@@ -136,4 +179,24 @@ const styles = StyleSheet.create({
   },
   focusBorder: {borderColor: '#6C69FF', borderWidth: 1},
   unfocusBorder: {borderColor: '#DFDFDF', borderWidth: 1},
+  buttonWrap: {justifyContent: 'center', alignItems: 'center', marginBottom: 20},
+  buttonStyle: {
+    width: '100%',
+    height: 56,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 10,
+  },
+  activeButton: {backgroundColor: '#6C69FF'},
+  inactiveButton: {backgroundColor: '#E8E8E8'},
+  activeButtonText: {
+    fontSize: 18,
+    fontFamily: 'Pretendard-Medium',
+    color: '#FFFFFF',
+  },
+  inactiveButtonText: {
+    fontSize: 18,
+    fontFamily: 'Pretendard-Medium',
+    color: '#C8C8C8',
+  },
 });
diff --git a/src/screens/MyChangePointDone.tsx b/src/screens/MyChangePointDone.tsx
new file mode 100644
index 0000000..b2ca918
--- /dev/null
+++ b/src/screens/MyChangePointDone.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+//prettier-ignore
+import {View, StyleSheet, Text, TouchableOpacity, SafeAreaView} from 'react-native';
+import type {NativeStackScreenProps} from '@react-navigation/native-stack';
+import {MyStackParamList} from '../nav/MyNavigator';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+type Props = NativeStackScreenProps<MyStackParamList, 'MyChangePointDone'>;
+export const MyChangePointDone = ({navigation, route}: Props) => {
+  const goMain = () => {
+    navigation.navigate('MyPage');
+    navigation.navigate('Main');
+  };
+
+  return (
+    <SafeAreaView style={[styles.flex, {backgroundColor: 'white'}]}>
+      <View style={[styles.totalWrap]}>
+        <View style={[styles.contentWrap]}>
+          <Icon name="check" size={71} color="#6C69FF" />
+          <Text style={[styles.title4Md, {marginTop: 46, marginBottom: 6}]}>입금 신청이 완료되었습니다.</Text>
+          <Text style={[styles.body2Lt]}>입금은 심사 후 매주 수요일에 일괄 송금됩니다.</Text>
+        </View>
+        <TouchableOpacity onPress={goMain} style={[styles.buttonWrap]}>
+          <View style={[styles.buttonStyle, styles.activeButton]}>
+            <Text style={[styles.activeButtonText]}>홈으로 돌아가기</Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex: {flex: 1},
+  title4Md: {
+    color: '#111111',
+    fontSize: 16,
+    fontFamily: 'Pretendard-Medium',
+  },
+  body2Lt: {
+    color: '#616161',
+    fontSize: 14,
+    fontFamily: 'Pretendard-Light',
+  },
+  caption1Light: {
+    fontSize: 12,
+    fontFamily: 'Pretendard-Light',
+  },
+  totalWrap: {
+    marginTop: 20,
+    marginLeft: 16,
+    marginRight: 16,
+    flex: 1,
+  },
+  contentWrap: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonWrap: {justifyContent: 'center', alignItems: 'center', marginBottom: 20},
+  buttonStyle: {
+    width: '100%',
+    height: 56,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 10,
+  },
+  activeButton: {backgroundColor: '#6C69FF'},
+  activeButtonText: {
+    fontSize: 18,
+    fontFamily: 'Pretendard-Medium',
+    color: '#FFFFFF',
+  },
+});
diff --git a/src/screens/MyInquiry.tsx b/src/screens/MyInquiry.tsx
index 9a2fa62..23b280a 100644
--- a/src/screens/MyInquiry.tsx
+++ b/src/screens/MyInquiry.tsx
@@ -6,6 +6,7 @@ import {MyHeader} from '../components/My/MyHeader';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {MyWriteInquiry} from '../components/My/MyWriteInquiry';
 import {MyInquiryList} from '../components/My/MyInquiryList';
+import {DesignSystem} from '../assets/DesignSystem';
 
 type Props = NativeStackScreenProps<MyStackParamList, 'MyInquiry'>;
 
@@ -22,13 +23,29 @@ export const MyInquiry = ({navigation}: Props) => {
           style={[styles.inquiryMenu, nowWrite && styles.now]}
           onPress={() => setNowWrite(true)}
         >
-          <Text style={[nowWrite && styles.fontTitle4Md]}>문의하기</Text>
+          <Text
+            style={
+              nowWrite
+                ? [DesignSystem.title3SB, {color: '#6C69FF'}]
+                : [DesignSystem.body1Lt, DesignSystem.grey8]
+            }
+          >
+            문의하기
+          </Text>
         </TouchableOpacity>
         <TouchableOpacity
           style={[styles.inquiryMenu, !nowWrite && styles.now]}
           onPress={() => setNowWrite(false)}
         >
-          <Text style={[!nowWrite && styles.fontTitle4Md]}>나의 문의 내역</Text>
+          <Text
+            style={
+              !nowWrite
+                ? [DesignSystem.title3SB, {color: '#6C69FF'}]
+                : [DesignSystem.body1Lt, DesignSystem.grey8]
+            }
+          >
+            나의 문의 내역
+          </Text>
         </TouchableOpacity>
       </View>
       {nowWrite ? <MyWriteInquiry /> : <MyInquiryList setNowWrite={setNowWrite} />}
@@ -38,11 +55,6 @@ export const MyInquiry = ({navigation}: Props) => {
 
 const styles = StyleSheet.create({
   flex: {flex: 1},
-  fontTitle4Md: {
-    fontFamily: 'Pretendard-Medium',
-    fontSize: 16,
-    color: '#6C69FF',
-  },
   menuView: {
     flexDirection: 'row',
     justifyContent: 'space-around',
diff --git a/src/screens/MyPoint.tsx b/src/screens/MyPoint.tsx
index 9d4542b..31826c8 100644
--- a/src/screens/MyPoint.tsx
+++ b/src/screens/MyPoint.tsx
@@ -4,6 +4,7 @@ import type {NativeStackScreenProps} from '@react-navigation/native-stack';
 import {MyStackParamList} from '../nav/MyNavigator';
 import {MyHeader} from '../components/My/MyHeader';
 import {MyPointList} from '../components/My/MyPointList';
+import {DesignSystem} from '../assets/DesignSystem';
 
 type Props = NativeStackScreenProps<MyStackParamList, 'MyPoint'>;
 const dummyMission = [
@@ -47,13 +48,13 @@ export const MyPoint = ({navigation, route}: Props) => {
     navigation.goBack();
   };
   return (
-    <SafeAreaView style={[styles.flex]}>
+    <SafeAreaView style={[styles.flex, {backgroundColor: 'white'}]}>
       <MyHeader goBack={goBack} title={'내 포인트'} />
       <View style={{backgroundColor: '#FFFFFF'}}>
         <View style={[styles.marginLR, styles.myPointWrap]}>
           <View style={[styles.myPointView]}>
-            <Text style={{color: '#616161', fontFamily: 'Pretendard-Light'}}>내 포인트</Text>
-            <Text style={{color: '#111111', fontWeight: 'bold', fontSize: 24}}>
+            <Text style={[DesignSystem.body1Lt, {color: '#616161'}]}>내 포인트</Text>
+            <Text style={{color: '#111111', fontWeight: 'bold', fontFamily: 'Pretendard-SemiBold', fontSize: 24}}>
               {point.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}P
             </Text>
           </View>
@@ -69,26 +70,20 @@ export const MyPoint = ({navigation, route}: Props) => {
       </View>
       {/* 포인트내역 */}
       <View style={[styles.pointListWrap]}>
-        <View style={[styles.marginLR]}>
-          <Text
-            style={{marginTop: 16, color: '#111111', fontFamily: 'Pretendard-Medium', fontSize: 19}}
-          >
-            포인트 내역
-          </Text>
-          <FlatList
-            style={{marginTop: 12}}
-            showsVerticalScrollIndicator={false}
-            contentContainerStyle={{paddingBottom: 60}}
-            scrollEventThrottle={10}
-            data={dummyMission}
-            renderItem={() => (
-              <>
-                <MyPointList />
-              </>
-            )}
-            ItemSeparatorComponent={() => <View style={{marginTop: 32}} />}
-          />
-        </View>
+        <Text style={[DesignSystem.subtitle2, {marginTop: 16, color: '#111111'}]}>포인트 내역</Text>
+        <FlatList
+          style={{marginTop: 12}}
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={{paddingBottom: 60}}
+          scrollEventThrottle={10}
+          data={dummyMission}
+          renderItem={() => (
+            <>
+              <MyPointList />
+            </>
+          )}
+          ItemSeparatorComponent={() => <View style={{marginTop: 32}} />}
+        />
       </View>
     </SafeAreaView>
   );
@@ -119,6 +114,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   pointListWrap: {
+    marginLeft: 16,
+    marginRight: 16,
     backgroundColor: 'white',
     flex: 1,
   },