diff --git a/package-lock.json b/package-lock.json
index 95ff8de..d7b316a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-icons": "^5.3.0",
+        "react-responsive": "^10.0.0",
         "react-router-dom": "^6.26.1",
         "styled-components": "^6.1.12",
         "zustand": "^4.5.5"
@@ -5401,6 +5402,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q=="
+    },
     "node_modules/css-to-react-native": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
@@ -6926,6 +6932,11 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz",
+      "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw=="
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -7665,6 +7676,14 @@
         "react": ">= 0.14.0"
       }
     },
+    "node_modules/matchmediaquery": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.4.2.tgz",
+      "integrity": "sha512-wrZpoT50ehYOudhDjt/YvUJc6eUzcdFPdmbizfgvswCKNHD1/OBOHYJpHie+HXpu6bSkEGieFMYk6VuutaiRfA==",
+      "dependencies": {
+        "css-mediaquery": "^0.1.2"
+      }
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -10466,7 +10485,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10998,7 +11016,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -11008,8 +11025,7 @@
     "node_modules/prop-types/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==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
@@ -11219,6 +11235,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-responsive": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-10.0.0.tgz",
+      "integrity": "sha512-N6/UiRLGQyGUqrarhBZmrSmHi2FXSD++N5VbSKsBBvWfG0ZV7asvUBluSv5lSzdMyEVjzZ6Y8DL4OHABiztDOg==",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.4.2",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.26.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz",
@@ -11689,6 +11722,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/shallow-equal": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-3.1.0.tgz",
+      "integrity": "sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg=="
+    },
     "node_modules/shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
diff --git a/package.json b/package.json
index f4dad3e..3b62894 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
+    "react-responsive": "^10.0.0",
     "react-router-dom": "^6.26.1",
     "styled-components": "^6.1.12",
     "zustand": "^4.5.5"
diff --git a/src/components/home/homeRecentTales/HomeRecentTales.styled.ts b/src/components/home/homeRecentTales/HomeRecentTales.styled.ts
index 3b5b29a..c84d5fb 100644
--- a/src/components/home/homeRecentTales/HomeRecentTales.styled.ts
+++ b/src/components/home/homeRecentTales/HomeRecentTales.styled.ts
@@ -30,15 +30,24 @@ export const CardWrapper = styled.div`
   justify-content: center;
   align-items: flex-end;
   @media (max-width: 710px) {
-    flex-direction: column;
-    align-items: center;
+    margin-top: 2rem;
     flex-wrap: wrap;
-    gap: 1.5rem;
+    gap: 1rem;
   }
 `;
 
+export const ShelfWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+`;
+
 export const Shelf = styled.img`
   @media (max-width: 710px) {
+    width: 550px;
+  }
+  @media (max-width: 450px) {
     display: none;
   }
 `;
diff --git a/src/components/home/homeRecentTales/HomeRecentTales.tsx b/src/components/home/homeRecentTales/HomeRecentTales.tsx
index 3b1a41f..c2e8bd2 100644
--- a/src/components/home/homeRecentTales/HomeRecentTales.tsx
+++ b/src/components/home/homeRecentTales/HomeRecentTales.tsx
@@ -5,8 +5,13 @@ import { getRecentTale } from "@apis/createTales";
 import { useEffect, useState } from "react";
 import { CardProps } from "@type/card";
 import { useNavigate } from "react-router-dom";
+import { getToken } from "@apis/login";
+import { useMediaQuery } from "react-responsive";
 
 const HomeRecentTales = () => {
+  const mediaQuery = useMediaQuery({ query: "(max-width: 710px)" });
+
+  getToken();
   const [tales, setTales] = useState<CardProps[]>([]);
   const navigate = useNavigate();
 
@@ -17,6 +22,7 @@ const HomeRecentTales = () => {
     };
     recentTales();
   }, []);
+  // const sliceTales = tales.slice(0, 9);
 
   const chunkedTales = [];
   const sliceTales = tales.slice(0, 9);
@@ -40,9 +46,25 @@ const HomeRecentTales = () => {
           {"더보기 >"}
         </div>
       </S.TitleWrapper>
-      {chunkedTales.map((taleGroup, index) => (
-        <>
-          <div key={index}>
+      {mediaQuery ? (
+        <S.CardWrapper>
+          {sliceTales.map((tale, index) => (
+            <>
+              <Card
+                taleId={tale.taleId}
+                title={tale.title}
+                createdAt={tale.createdAt}
+                readFunction={() => goRead(tale)}
+              />
+              {(index + 1) % 2 === 0 && index !== sliceTales.length - 1 && (
+                <S.Shelf src="shelf.png" key={`shelf-${index}`} />
+              )}
+            </>
+          ))}
+        </S.CardWrapper>
+      ) : (
+        chunkedTales.map((taleGroup) => (
+          <>
             <S.CardWrapper>
               {taleGroup.map((tale) => (
                 <Card
@@ -54,10 +76,10 @@ const HomeRecentTales = () => {
                 />
               ))}
             </S.CardWrapper>
-          </div>
-          <S.Shelf src="shelf.png" />
-        </>
-      ))}
+            <S.Shelf src="shelf.png" />
+          </>
+        ))
+      )}
     </S.Wrapper>
   );
 };