diff --git a/src/components/RecommendFeedCard/RecommendFeedCard.styles.tsx b/src/components/RecommendFeedCard/RecommendFeedCard.styles.tsx
index e9974ef7..e2aa615b 100644
--- a/src/components/RecommendFeedCard/RecommendFeedCard.styles.tsx
+++ b/src/components/RecommendFeedCard/RecommendFeedCard.styles.tsx
@@ -4,10 +4,11 @@ import {StyleSheet} from 'react-native';
 import {heightPercentage, widthPercentage} from 'src/styles/ScreenResponse';
 
 export const FeedCardContainer = styled.View({
-  width: widthPercentage(164),
+  width: widthPercentage(166),
   height: heightPercentage(220),
-  borderRadius: 12,
   backgroundColor: '#F6F6F6',
+  marginHorizontal: widthPercentage(5.5),
+  marginVertical: heightPercentage(16),
 });
 
 export const IconContainer = styled.View({
@@ -23,6 +24,7 @@ export const IconContainer = styled.View({
 
 export const styles = StyleSheet.create({
   photoStyle: {
+    borderRadius: 12,
     flex: 1,
     zIndex: 2,
   },
diff --git a/src/components/RecommendPreviewFourCard/RecommendPreviewFourCard.styles.tsx b/src/components/RecommendPreviewFourCard/RecommendPreviewFourCard.styles.tsx
new file mode 100644
index 00000000..f1b8c263
--- /dev/null
+++ b/src/components/RecommendPreviewFourCard/RecommendPreviewFourCard.styles.tsx
@@ -0,0 +1,8 @@
+import styled from '@emotion/native';
+
+import {heightPercentage} from 'src/styles/ScreenResponse';
+
+export const PreviewFourCardView = styled.View({
+  alignSelf: 'center',
+  height: heightPercentage(472),
+});
diff --git a/src/components/RecommendPreviewFourCard/RecommendPreviewFourCard.tsx b/src/components/RecommendPreviewFourCard/RecommendPreviewFourCard.tsx
new file mode 100644
index 00000000..41b2dd48
--- /dev/null
+++ b/src/components/RecommendPreviewFourCard/RecommendPreviewFourCard.tsx
@@ -0,0 +1,36 @@
+import React, {useCallback} from 'react';
+import {FlatList} from 'react-native';
+
+import RecommendFeedCard from '../RecommendFeedCard';
+import {PreviewFourCardView} from './RecommendPreviewFourCard.styles';
+
+interface Props {
+  data: ReadonlyArray<renderItemList['item']>;
+}
+
+type renderItemList = {
+  item: {
+    url: string;
+    id: string;
+    title: string;
+  };
+};
+
+const RecommendPreviewFourCard = ({data}: Props) => {
+  const renderItem = useCallback(({item}: renderItemList) => {
+    return <RecommendFeedCard imgUrl={item.url} />;
+  }, []);
+  return (
+    <PreviewFourCardView>
+      <FlatList
+        data={data}
+        numColumns={2}
+        keyExtractor={o => o.url}
+        renderItem={renderItem}
+        scrollEnabled={false}
+      />
+    </PreviewFourCardView>
+  );
+};
+
+export default RecommendPreviewFourCard;
diff --git a/src/components/RecommendPreviewFourCard/index.tsx b/src/components/RecommendPreviewFourCard/index.tsx
new file mode 100644
index 00000000..d25963e6
--- /dev/null
+++ b/src/components/RecommendPreviewFourCard/index.tsx
@@ -0,0 +1,2 @@
+import RecommendPreviewFourCard from './RecommendPreviewFourCard';
+export default RecommendPreviewFourCard;