diff --git a/.env b/.env
new file mode 100644
index 0000000..50f186c
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+BACKEND_URL = 
\ No newline at end of file
diff --git a/App.tsx b/App.tsx
index 81790ab..0578346 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,35 +1,39 @@
 import React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import MyPage from "./screens/MyPage"; 
+import {NavigationContainer} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import MyPage from './screens/MyPage';
 import GuestHomeScreen from './screens/GuestHomeScreen';
-import { Image, View, StyleSheet } from 'react-native'; 
-import Login from './screens/Login'; 
+import {Image, View, StyleSheet} from 'react-native';
+import Login from './screens/Login';
 import DepositSearch from './screens/DepositSearch';
 import CardSearch from './screens/CardSearch';
+import RecommendMain from './screens/RecommendMain';
 
 const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator 
+      <Stack.Navigator
         initialRouteName="GuestHome"
         screenOptions={{
           headerTitle: () => (
-              <Image
-                source={require('./assets/logo1.png')} 
-                style={{ width: 100, height: 13 }} 
-                resizeMode="contain"
-              />
+            <Image
+              source={require('./assets/logo1.png')}
+              style={{width: 100, height: 13}}
+              resizeMode="contain"
+            />
           ),
-          headerBackTitleVisible: false, 
-          headerShadowVisible: false, 
+          headerBackTitleVisible: false,
+          headerShadowVisible: false,
           headerTitleAlign: 'center',
-          animation: 'none'
-        }}
-      >
-        <Stack.Screen name="GuestHome" component={GuestHomeScreen} options={{ headerShown: false }}/>
+          animation: 'none',
+        }}>
+        <Stack.Screen
+          name="GuestHome"
+          component={GuestHomeScreen}
+          options={{headerShown: false}}
+        />
         <Stack.Screen
           name="Login"
           component={Login}
@@ -52,7 +56,14 @@ export default function App() {
             headerShown: true,
           }}
         />
+        <Stack.Screen
+          name="RecommendMain"
+          component={RecommendMain}
+          options={{
+            headerShown: true,
+          }}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );
-}
\ No newline at end of file
+}
diff --git a/package-lock.json b/package-lock.json
index 5ba1b9d..a99b812 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,8 +10,12 @@
       "dependencies": {
         "@react-navigation/native": "^6.1.18",
         "@react-navigation/native-stack": "^6.11.0",
-        "react": "18.3.1",
-        "react-native": "0.75.4",
+        "axios": "^1.7.7",
+        "react": "^18.3.1",
+        "react-native": "^0.75.4",
+        "react-native-draggable-flatlist": "^4.0.1",
+        "react-native-gesture-handler": "^2.21.0",
+        "react-native-reanimated": "^3.16.1",
         "react-native-safe-area-context": "^4.12.0",
         "react-native-screens": "^3.35.0",
         "react-native-snap-carousel": "^3.9.1"
@@ -1946,6 +1950,17 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "node_modules/@egjs/hammerjs": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+      "dependencies": {
+        "@types/hammerjs": "^2.0.36"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -4382,6 +4397,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/hammerjs": {
+      "version": "2.0.46",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.46.tgz",
+      "integrity": "sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw=="
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -5019,6 +5039,11 @@
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -5034,6 +5059,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-core": {
       "version": "7.0.0-bridge.0",
       "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
@@ -5658,6 +5693,17 @@
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz",
       "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g=="
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/command-exists": {
       "version": "1.2.9",
       "resolved": "https://registry.npmjs.org/command-exists/-/command-exists-1.2.9.tgz",
@@ -6094,6 +6140,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/denodeify": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/denodeify/-/denodeify-1.2.1.tgz",
@@ -7505,6 +7559,25 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -7514,6 +7587,19 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -7871,6 +7957,19 @@
         "hermes-estree": "0.22.0"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -11926,6 +12025,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -12109,6 +12213,57 @@
         }
       }
     },
+    "node_modules/react-native-draggable-flatlist": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-native-draggable-flatlist/-/react-native-draggable-flatlist-4.0.1.tgz",
+      "integrity": "sha512-ZO1QUTNx64KZfXGXeXcBfql67l38X7kBcJ3rxUVZzPHt5r035GnGzIC0F8rqSXp6zgnwgUYMfB6zQc5PKmPL9Q==",
+      "dependencies": {
+        "@babel/preset-typescript": "^7.17.12"
+      },
+      "peerDependencies": {
+        "react-native": ">=0.64.0",
+        "react-native-gesture-handler": ">=2.0.0",
+        "react-native-reanimated": ">=2.8.0"
+      }
+    },
+    "node_modules/react-native-gesture-handler": {
+      "version": "2.21.0",
+      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.21.0.tgz",
+      "integrity": "sha512-8fR1a8EX1aP+TFGiF8pP3UJks2CcfEu7WZzctkJg1yu2DtbVu+uJB/kAPS1XuZxFBKn7pyJcwuQhzuhilzK4DA==",
+      "dependencies": {
+        "@egjs/hammerjs": "^2.0.17",
+        "hoist-non-react-statics": "^3.3.0",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-reanimated": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.16.1.tgz",
+      "integrity": "sha512-Wnbo7toHZ6kPLAD8JWKoKCTfNoqYOMW5vUEP76Rr4RBmJCrdXj6oauYP0aZnZq8NCbiP5bwwu7+RECcWtoetnQ==",
+      "dependencies": {
+        "@babel/plugin-transform-arrow-functions": "^7.0.0-0",
+        "@babel/plugin-transform-class-properties": "^7.0.0-0",
+        "@babel/plugin-transform-classes": "^7.0.0-0",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0",
+        "@babel/plugin-transform-optional-chaining": "^7.0.0-0",
+        "@babel/plugin-transform-shorthand-properties": "^7.0.0-0",
+        "@babel/plugin-transform-template-literals": "^7.0.0-0",
+        "@babel/plugin-transform-unicode-regex": "^7.0.0-0",
+        "@babel/preset-typescript": "^7.16.7",
+        "convert-source-map": "^2.0.0",
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "4.12.0",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.12.0.tgz",
diff --git a/package.json b/package.json
index 00f2f35..4718382 100644
--- a/package.json
+++ b/package.json
@@ -12,8 +12,12 @@
   "dependencies": {
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/native-stack": "^6.11.0",
-    "react": "18.3.1",
-    "react-native": "0.75.4",
+    "axios": "^1.7.7",
+    "react": "^18.3.1",
+    "react-native": "^0.75.4",
+    "react-native-draggable-flatlist": "^4.0.1",
+    "react-native-gesture-handler": "^2.21.0",
+    "react-native-reanimated": "^3.16.1",
     "react-native-safe-area-context": "^4.12.0",
     "react-native-screens": "^3.35.0",
     "react-native-snap-carousel": "^3.9.1"
diff --git a/screens/CardRecommendCard.tsx b/screens/CardRecommendCard.tsx
new file mode 100644
index 0000000..7c9bb1c
--- /dev/null
+++ b/screens/CardRecommendCard.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import {View, Text, StyleSheet, Image} from 'react-native';
+
+interface CardData {
+  cardId: number;
+  cardName: string;
+  bankColor: string;
+  bankName: string;
+}
+
+interface CardRecommendCardProps {
+  cardData: CardData;
+}
+
+const CardRecommendCard: React.FC<CardRecommendCardProps> = ({cardData}) => {
+  return (
+    <View style={[styles.card, {backgroundColor: cardData.bankColor}]}>
+      <Text style={styles.title}>{cardData.cardName}</Text>
+      <Image
+        source={require('../assets/character1.png')}
+        style={styles.image}
+        resizeMode="contain"
+      />
+      <Text style={styles.bankName}>{cardData.bankName}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    width: 140,
+    height: 140,
+    borderRadius: 16,
+    padding: 16,
+    marginVertical: 8,
+    marginHorizontal: 16,
+    shadowColor: '#000',
+    shadowOffset: {width: 0, height: 2},
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    color: '#121212',
+    marginBottom: 8,
+  },
+  image: {
+    width: 50,
+    height: 50,
+    marginBottom: 8,
+    right: 80,
+    top: 85,
+    position: 'absolute',
+  },
+  bankName: {
+    fontSize: 15,
+    left: 78,
+    top: 110,
+    color: '#fff',
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+});
+
+export default CardRecommendCard;
diff --git a/screens/DepositRecommendCard.tsx b/screens/DepositRecommendCard.tsx
new file mode 100644
index 0000000..bd151df
--- /dev/null
+++ b/screens/DepositRecommendCard.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import {View, Text, StyleSheet, Image} from 'react-native';
+
+interface DepositData {
+  depositId: number;
+  depositName: string;
+  bankColor: string;
+  bankName: string;
+}
+
+interface DepositRecommendCardProps {
+  depositData: DepositData;
+}
+
+const DepositRecommendCard: React.FC<DepositRecommendCardProps> = ({
+  depositData,
+}) => {
+  return (
+    <View style={[styles.card, {backgroundColor: depositData.bankColor}]}>
+      <Text style={styles.title}>{depositData.depositName}</Text>
+      <Image
+        source={require('../assets/character1.png')}
+        style={styles.image}
+        resizeMode="contain"
+      />
+      <Text style={styles.bankName}>{depositData.bankName}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    width: 140,
+    height: 140,
+    borderRadius: 16,
+    padding: 16,
+    marginVertical: 8,
+    marginHorizontal: 16,
+    shadowColor: '#000',
+    shadowOffset: {width: 0, height: 2},
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    color: '#121212',
+    marginBottom: 8,
+  },
+  image: {
+    width: 50,
+    height: 50,
+    marginBottom: 8,
+    right: 80,
+    top: 85,
+    position: 'absolute',
+  },
+  bankName: {
+    fontSize: 15,
+    left: 78,
+    top: 110,
+    color: '#fff',
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+});
+
+export default DepositRecommendCard;
diff --git a/screens/Login.tsx b/screens/Login.tsx
index 0f73300..de66fcf 100644
--- a/screens/Login.tsx
+++ b/screens/Login.tsx
@@ -1,26 +1,32 @@
-
 import React, {useState} from 'react';
-import { View, Text, Image, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
-import { NativeStackNavigationProp} from '@react-navigation/native-stack';
+import {
+  View,
+  Text,
+  Image,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native';
+import {useNavigation} from '@react-navigation/native';
+import {NativeStackNavigationProp} from '@react-navigation/native-stack';
 
 type RootStackParamList = {
   Signup: undefined;
+  RecommendMain: undefined;
 };
 
 const Login = () => {
-
   const [userId, setUserId] = useState('');
   const [password, setPassword] = useState('');
 
-  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
   return (
     <View style={styles.container}>
-
       <Image
-        source={require('../assets/logo1.png')} 
-        style={styles.logo} 
+        source={require('../assets/logo1.png')}
+        style={styles.logo}
         resizeMode="contain"
       />
 
@@ -38,19 +44,19 @@ const Login = () => {
         onChangeText={setPassword}
         secureTextEntry
       />
-      
-      <TouchableOpacity style={styles.loginButton}>
+
+      <TouchableOpacity
+        style={styles.loginButton}
+        onPress={() => navigation.navigate('RecommendMain')}>
         <Text style={styles.buttonText}>로그인</Text>
       </TouchableOpacity>
+
       <View style={styles.signupContainer}>
-        <Text >아직 AssetAid회원이 아니라면?</Text>
-        <TouchableOpacity
-          onPress={() => navigation.navigate('Signup')}
-        >
+        <Text>아직 AssetAid회원이 아니라면?</Text>
+        <TouchableOpacity onPress={() => navigation.navigate('Signup')}>
           <Text style={styles.signupText}>회원가입</Text>
         </TouchableOpacity>
       </View>
-      
     </View>
   );
 };
@@ -62,47 +68,46 @@ const styles = StyleSheet.create({
     padding: 16,
     backgroundColor: '#fff',
   },
-  logo:{
-    alignSelf: 'center', 
-    width:300,
-    marginTop:30,
-    marginBottom:40,
+  logo: {
+    alignSelf: 'center',
+    width: 300,
+    marginTop: 30,
+    marginBottom: 40,
   },
   input: {
-    width:320,
+    width: 320,
     height: 45,
     borderColor: '#ccc',
     borderWidth: 1,
     borderRadius: 9,
     paddingHorizontal: 10,
     marginBottom: 15,
-    alignSelf:'center',    
+    alignSelf: 'center',
   },
   loginButton: {
-    width:300,
+    width: 300,
     height: 50,
     backgroundColor: '#FC7900',
     borderRadius: 2,
-    alignSelf: 'center', 
+    alignSelf: 'center',
     justifyContent: 'center',
     alignItems: 'center',
-    marginTop:30,
-    marginBottom:5,
+    marginTop: 30,
+    marginBottom: 5,
   },
   buttonText: {
     color: '#fff',
     fontSize: 18,
   },
-  signupContainer:{
+  signupContainer: {
     alignSelf: 'center',
     flexDirection: 'row',
   },
   signupText: {
-    color:'#FC7900',
+    color: '#FC7900',
     textDecorationLine: 'underline',
-    marginLeft:10,
-
-  }
+    marginLeft: 10,
+  },
 });
 
 export default Login;
diff --git a/screens/RecommendMain.tsx b/screens/RecommendMain.tsx
new file mode 100644
index 0000000..5468a9d
--- /dev/null
+++ b/screens/RecommendMain.tsx
@@ -0,0 +1,161 @@
+import React, {useState} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Image,
+  TouchableOpacity,
+  Dimensions,
+} from 'react-native';
+import Carousel from 'react-native-snap-carousel';
+import DepositRecommendCard from './DepositRecommendCard';
+import SavingRecommendCard from './SavingRecommendCard';
+import CardRecommendCard from './CardRecommendCard';
+
+const {width} = Dimensions.get('window');
+
+const depositData = [
+  {
+    depositId: 831,
+    depositName: 'NH왈츠회전예금 II',
+    bankColor: '#FFD700',
+    bankName: '농협은행',
+  },
+  {
+    depositId: 988,
+    depositName: 'NH내가Green초록세상예금',
+    bankColor: '#32CD32',
+    bankName: '농협은행',
+  },
+];
+
+const savingData = [
+  {
+    savingId: 101,
+    savingName: 'NH내가Green저축',
+    bankColor: '#FFD700',
+    bankName: '농협은행',
+  },
+  {
+    savingId: 102,
+    savingName: 'NH올원e저축',
+    bankColor: '#FFD700',
+    bankName: '농협은행',
+  },
+];
+
+const cardData = [
+  {
+    cardId: 201,
+    cardName: 'NH올원카드',
+    bankColor: '#FFD700',
+    bankName: '농협은행',
+  },
+  {
+    cardId: 202,
+    cardName: 'NH내가Green카드',
+    bankColor: '#32CD32',
+    bankName: '농협은행',
+  },
+];
+
+const RecommendMain: React.FC = ({navigation}: any) => {
+  const renderItem = ({item}: any) => (
+    <View>
+      {item.depositId && <DepositRecommendCard depositData={item} />}
+      {item.savingId && <SavingRecommendCard savingData={item} />}
+      {item.cardId && <CardRecommendCard cardData={item} />}
+    </View>
+  );
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Image
+          source={require('../assets/logo1.png')}
+          style={styles.logo}
+          resizeMode="contain"
+        />
+        <TouchableOpacity onPress={() => navigation.navigate('MyPage')}>
+          <Image
+            source={require('../assets/mypageicon.png')}
+            style={styles.mypageIcon}
+            resizeMode="contain"
+          />
+        </TouchableOpacity>
+      </View>
+
+      {/* 예금 */}
+      <Text style={styles.sectionTitle}>예금</Text>
+      <Carousel
+        data={depositData}
+        renderItem={renderItem}
+        sliderWidth={width}
+        itemWidth={width * 0.8}
+        inactiveSlideScale={0.9}
+        inactiveSlideOpacity={0.7}
+        enableMomentum={true}
+        loop={true}
+      />
+
+      {/* 적금 */}
+      <Text style={styles.sectionTitle}>적금</Text>
+      <Carousel
+        data={savingData}
+        renderItem={renderItem}
+        sliderWidth={width}
+        itemWidth={width * 0.8}
+        inactiveSlideScale={0.9}
+        inactiveSlideOpacity={0.7}
+        enableMomentum={true}
+        loop={true}
+      />
+
+      {/* 카드 */}
+      <Text style={styles.sectionTitle}>카드</Text>
+      <Carousel
+        data={cardData}
+        renderItem={renderItem}
+        sliderWidth={width}
+        itemWidth={width * 0.8}
+        inactiveSlideScale={0.9}
+        inactiveSlideOpacity={0.7}
+        enableMomentum={true}
+        loop={true}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FFF',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: '#FFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#EEE',
+  },
+  logo: {
+    width: 120,
+    height: 40,
+  },
+  mypageIcon: {
+    width: 30,
+    height: 30,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginVertical: 8,
+    color: '#FF8C00',
+  },
+});
+
+export default RecommendMain;
diff --git a/screens/SavingRecommendCard.tsx b/screens/SavingRecommendCard.tsx
new file mode 100644
index 0000000..4c16539
--- /dev/null
+++ b/screens/SavingRecommendCard.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import {View, Text, StyleSheet, Image} from 'react-native';
+
+interface SavingData {
+  savingId: number;
+  savingName: string;
+  bankColor: string;
+  bankName: string;
+}
+
+interface SavingRecommendCardProps {
+  savingData: SavingData;
+}
+
+const SavingRecommendCard: React.FC<SavingRecommendCardProps> = ({
+  savingData,
+}) => {
+  return (
+    <View style={[styles.card, {backgroundColor: savingData.bankColor}]}>
+      <Text style={styles.title}>{savingData.savingName}</Text>
+      <Image
+        source={require('../assets/character1.png')}
+        style={styles.image}
+        resizeMode="contain"
+      />
+      <Text style={styles.bankName}>{savingData.bankName}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    width: 140,
+    height: 140,
+    borderRadius: 16,
+    padding: 16,
+    marginVertical: 8,
+    marginHorizontal: 16,
+    shadowColor: '#000',
+    shadowOffset: {width: 0, height: 2},
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    color: '#121212',
+    marginBottom: 8,
+  },
+  image: {
+    width: 50,
+    height: 50,
+    marginBottom: 8,
+    right: 80,
+    top: 85,
+    position: 'absolute',
+  },
+  bankName: {
+    fontSize: 15,
+    left: 78,
+    top: 110,
+    color: '#fff',
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+});
+
+export default SavingRecommendCard;
diff --git a/screens/token.tsx b/screens/token.tsx
new file mode 100644
index 0000000..8d85271
--- /dev/null
+++ b/screens/token.tsx
@@ -0,0 +1,20 @@
+// import axios from 'axios';
+
+// const axiosInstance = axios.create({
+//   baseURL: import env.BACKEND_URL,
+// });
+
+// axiosInstance.interceptors.request.use(
+//   config => {
+//     const token = localStorage.getItem('access_token');
+//     if (token) {
+//       config.headers.Authorization = `Bearer ${token}`;
+//     }
+//     return config;
+//   },
+//   error => {
+//     return Promise.reject(error);
+//   },
+// );
+
+// export default axiosInstance;