diff --git a/components/Folder/AddFolderButton.tsx b/components/Folder/AddFolderButton.tsx
index 5f48fb4..8366f0b 100644
--- a/components/Folder/AddFolderButton.tsx
+++ b/components/Folder/AddFolderButton.tsx
@@ -4,16 +4,24 @@ import useRerenderFolderList from "@/hooks/useRerenderFolderList";
 
 interface AddFolderButtonProps {
   setFolderList: React.Dispatch<React.SetStateAction<FolderData[]>>;
+  isModal?: boolean;
 }
 
-export const AddFolderButton = ({ setFolderList }: AddFolderButtonProps) => {
+export const AddFolderButton = ({
+  setFolderList,
+  isModal = false,
+}: AddFolderButtonProps) => {
   const { isOpen, openModal } = useModalStore();
 
   useRerenderFolderList(isOpen, setFolderList);
 
   return (
     <button
-      className="w-[79px] h-[19px] text-purple100"
+      className={
+        !isModal
+          ? "w-[100px] mt-auto text-purple100"
+          : "fixed-bottom w-[120px] h-[35px] rounded-[20px] bg-purple100 text-white hover:bg-purple50"
+      }
       onClick={() => openModal("AddFolderModal")}
     >
       폴더 추가 +
diff --git a/components/Folder/FolderActionsMenu.tsx b/components/Folder/FolderActionsMenu.tsx
index c54dcfd..5da2ef0 100644
--- a/components/Folder/FolderActionsMenu.tsx
+++ b/components/Folder/FolderActionsMenu.tsx
@@ -5,9 +5,15 @@ import useRerenderFolderList from "../../hooks/useRerenderFolderList";
 
 interface FolderActionsMenuProps {
   setFolderList: React.Dispatch<React.SetStateAction<FolderData[]>>;
+  folderId: string | string[] | undefined;
+  linkCount: number;
 }
 
-const FolderActionsMenu = ({ setFolderList }: FolderActionsMenuProps) => {
+const FolderActionsMenu = ({
+  setFolderList,
+  folderId,
+  linkCount,
+}: FolderActionsMenuProps) => {
   const { isOpen, openModal } = useModalStore();
 
   const handleModalOpen = (text: string) => {
@@ -16,10 +22,15 @@ const FolderActionsMenu = ({ setFolderList }: FolderActionsMenuProps) => {
         openModal("SNSModal");
         break;
       case "이름 변경":
-        openModal("EditModal");
+        openModal("EditModal", {
+          folderId: Number(folderId),
+        });
         break;
       case "삭제":
-        openModal("DeleteFolderModal");
+        openModal("DeleteFolderModal", {
+          folderId: Number(folderId),
+          linkCount: linkCount,
+        });
         break;
       default:
         break;
diff --git a/components/Folder/FolderTag.tsx b/components/Folder/FolderTag.tsx
index b4768c2..5d09465 100644
--- a/components/Folder/FolderTag.tsx
+++ b/components/Folder/FolderTag.tsx
@@ -6,23 +6,23 @@ const FolderTag = ({ folderList }: FolderListData) => {
   const { folder: currentFolderId } = router.query;
 
   const folderStyle =
-    "py-[8px] px-[12px] border border-purple100 rounded-md hover:bg-purple100 hover:text-white";
+    "w-[100px] h-[35px] px-[15px] text-sm whitespace-nowrap truncate border border-purple100 rounded-md hover:bg-purple100 hover:text-white";
 
-  const handleSubmit = (id: number | string) => {
+  const handleSubmit = (selectedFolderId: number | string) => {
     router.push({
       pathname: router.pathname,
-      query: id ? { folder: id } : {},
+      query: selectedFolderId ? { folder: selectedFolderId } : {},
     });
   };
 
   return (
-    <ul className="flex flex-wrap gap-[8px]">
+    <ul className="flex flex-wrap gap-[8px] lg:w-[80%] md:w-[80%]">
       <li>
         <button className={folderStyle} onClick={() => handleSubmit("")}>
           전체
         </button>
       </li>
-      {folderList.map((folder) => (
+      {folderList.slice(0, 8).map((folder) => (
         <li key={folder.id}>
           <button
             className={`${folderStyle} ${folder.id === Number(currentFolderId) && "bg-purple100 text-white"}`}
diff --git a/components/Link/LinkCard.tsx b/components/Link/LinkCard.tsx
index f5f40b1..e4468c2 100644
--- a/components/Link/LinkCard.tsx
+++ b/components/Link/LinkCard.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { putLinkFavorite } from "@/lib/api/link";
 import { useLinkCardStore } from "@/store/useLinkCardStore";
 import { ensureAbsoluteUrl } from "@/lib/utils";
-import timeAgo from "@/util/timAgo";
+import timeAgo from "@/util/timeAgo";
 import Image from "next/image";
 import Dropdown from "../Dropdown";
 import useModalStore from "@/store/useModalStore";
diff --git a/components/Link/RenderEmptyLinkMessage.tsx b/components/Link/RenderEmptyLinkMessage.tsx
new file mode 100644
index 0000000..274cb33
--- /dev/null
+++ b/components/Link/RenderEmptyLinkMessage.tsx
@@ -0,0 +1,9 @@
+const RenderEmptyLinkMessage = () => {
+  return (
+    <span className="w-full h-[200px] flex justify-center items-center">
+      저장된 링크가 없습니다.
+    </span>
+  );
+};
+
+export default RenderEmptyLinkMessage;
diff --git a/components/Search/SearchInput.tsx b/components/Search/SearchInput.tsx
index 36272a5..ca48a05 100644
--- a/components/Search/SearchInput.tsx
+++ b/components/Search/SearchInput.tsx
@@ -24,7 +24,7 @@ export const SearchInput = () => {
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex gap-[8px] w-[1024px] h-[54px] items-center px-[16px] py-[15px] bg-gray-100 rounded-[10px] md:w-[704px] md:h-[54px] sm:w-[325px] sm:h-[43px] transition-all"
+      className="flex gap-[8px] w-full h-[54px] items-center px-[16px] py-[15px] bg-gray-100 rounded-[10px] md:h-[54px] sm:h-[43px] transition-all"
     >
       <Image
         src="/icons/search.svg"
diff --git a/components/modal/DeleteFolderModal.tsx b/components/modal/DeleteFolderModal.tsx
index 332da90..2506cca 100644
--- a/components/modal/DeleteFolderModal.tsx
+++ b/components/modal/DeleteFolderModal.tsx
@@ -1,7 +1,7 @@
+import { deleteFolder } from "@/lib/api/folder";
 import useModalStore from "@/store/useModalStore";
 import SubmitButton from "../SubMitButton";
 import ModalContainer from "./modalComponents/ModalContainer";
-import { deleteFolder } from "@/lib/api/folder";
 import toast from "react-hot-toast";
 import toastMessages from "@/lib/toastMessage";
 
diff --git a/components/modal/modalManager/ModalManager.tsx b/components/modal/modalManager/ModalManager.tsx
index a24ae0f..48c399b 100644
--- a/components/modal/modalManager/ModalManager.tsx
+++ b/components/modal/modalManager/ModalManager.tsx
@@ -21,7 +21,6 @@ export type ModalKeysType = keyof typeof ModalType;
 
 export const Modal = () => {
   const { modalType, isOpen, props } = useModalStore();
-
   if (!modalType || !isOpen) return null;
 
   switch (modalType) {
diff --git a/hooks/useFetchLinks.tsx b/hooks/useFetchLinks.tsx
index 5e209b7..aca435a 100644
--- a/hooks/useFetchLinks.tsx
+++ b/hooks/useFetchLinks.tsx
@@ -1,38 +1,43 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { proxy } from "@/lib/api/axiosInstanceApi";
 import { LinkData } from "@/types/linkTypes";
-import { useRouter } from "next/router";
+import { ParsedUrlQuery } from "querystring";
+import useViewport from "./useViewport";
 
-// 링크페이지의 query가 바뀌면 새로운 리스트로 업데이트 해주는 훅
+// 링크페이지의 query가 바뀌면 그에 맞는 링크들을 보여주는 훅
 const useFetchLinks = (
-  setLinkCardList: (list: LinkData[], totalCount: number) => void
+  setLinkCardList: React.Dispatch<React.SetStateAction<LinkData[]>>,
+  setTotalCount?: React.Dispatch<React.SetStateAction<number>>,
+  query?: ParsedUrlQuery,
+  pathname?: string
 ) => {
-  const router = useRouter();
+  const { isTablet } = useViewport();
 
   useEffect(() => {
     const fetchLinks = async () => {
       // 경로에 따라 API 엔드포인트 분기
-      let endpoint = "/api/links";
-      const params: any = {
-        page: router.query.page,
-        pageSize: 6,
-        search: router.query.search,
-      };
+      let endpoint =
+        pathname === "/favorite"
+          ? "/api/favorites"
+          : query?.folder
+            ? `/api/folders/${query.folder}/links`
+            : "/api/links";
 
-      if (router.pathname === "/favorite") {
-        endpoint = "/api/favorites";
-      }
-
-      try {
-        const res = await proxy.get(endpoint, { params });
-        setLinkCardList(res.data.list, res.data.totalCount);
-      } catch (error) {
-        console.error("Error fetching links:", error);
+      const res = await proxy.get(endpoint, {
+        params: {
+          page: query?.page,
+          pageSize: isTablet ? 6 : 10,
+          search: query?.search,
+        },
+      });
+      console.log("query가 바뀌었을 때 다시 받아온 리스트:", res.data.list);
+      setLinkCardList(res.data.list);
+      {
+        setTotalCount && setTotalCount(res.data.totalCount);
       }
     };
-
-    if (router.query) fetchLinks();
-  }, [router.query, setLinkCardList, router.pathname]);
+    if (query) fetchLinks();
+  }, [setLinkCardList, query, isTablet]);
 };
 
 export default useFetchLinks;
diff --git a/hooks/useGetFolderInfo.tsx b/hooks/useGetFolderInfo.tsx
new file mode 100644
index 0000000..17112bd
--- /dev/null
+++ b/hooks/useGetFolderInfo.tsx
@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { getFolder } from "@/lib/api/folder";
+
+const useGetFolderInfo = () => {
+  const router = useRouter();
+  const folderId = router.query.folder;
+  const [folderName, setFolderName] = useState("폴더이름");
+
+  useEffect(() => {
+    if (!folderId) return;
+
+    const fetchFolderData = async () => {
+      const res = await getFolder(folderId);
+      if (res) setFolderName(res.data?.name);
+    };
+    fetchFolderData();
+  }, [folderId]);
+
+  return { folderName, folderId };
+};
+export default useGetFolderInfo;
diff --git a/lib/api/axiosInstanceApi.ts b/lib/api/axiosInstanceApi.ts
index e6cb791..3ab6fa6 100644
--- a/lib/api/axiosInstanceApi.ts
+++ b/lib/api/axiosInstanceApi.ts
@@ -5,7 +5,7 @@ const axiosInstance = axios.create({
 });
 
 export const proxy = axios.create({
-  // 배포 이후에는 배포된 URL로 변경해야 함.
+  // 배포 이후에는 배포된 URL로 변경해야 함.gi
   baseURL: "http://localhost:3000",
 });
 
diff --git a/lib/api/folder.ts b/lib/api/folder.ts
index 9f11160..aa4e40e 100644
--- a/lib/api/folder.ts
+++ b/lib/api/folder.ts
@@ -25,7 +25,7 @@ export const postFolders = async (body: folderApiProps) => {
 };
 
 // 폴더 조회
-export const getFolder = async (folderId: number) => {
+export const getFolder = async (folderId: string | string[] | undefined) => {
   try {
     const res = await axiosInstance.get(`/folders/${folderId}`);
     if (res.status >= 200 && res.status < 300) return res.data;
diff --git a/next.config.ts b/next.config.ts
index 0514225..f35ba41 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -2,7 +2,7 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
-  reactStrictMode: true,
+  reactStrictMode: false,
   // 외부 이미지 도메인 추가
   images: {
     remotePatterns: [
diff --git a/pages/api/folders/[folderId]/index.ts b/pages/api/folders/[folderId]/index.ts
index ab82904..b8c07b6 100644
--- a/pages/api/folders/[folderId]/index.ts
+++ b/pages/api/folders/[folderId]/index.ts
@@ -5,44 +5,37 @@ import { NextApiRequest, NextApiResponse } from "next";
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const token = req.cookies.accessToken;
   const { folderId } = req.query;
-  const id = Number(folderId);
 
   if (!token) {
     return res.status(401).json({ error: "사용자 정보를 찾을 수 없습니다." });
   }
 
-  if (isNaN(id)) {
+  if (!folderId) {
     return res.status(400).json({ error: "유효하지 않은 폴더 ID 입니다" });
   }
 
   switch (req.method) {
-    case "DELETE":
+    case "GET":
       try {
-        await axiosInstance.delete(`/folders/${id}`, {
+        const response = await axiosInstance.get(`/folders/${folderId}`, {
           headers: {
             Authorization: `Bearer ${token}`,
           },
         });
-        return res.status(204).json({ message: "폴더 삭제 성공" });
+        return res
+          .status(200)
+          .json({ message: "데이터 조회 성공", data: response.data });
       } catch (error) {
-        if (axios.isAxiosError(error)) {
-          console.error("Axios Error:", error); // 여기서 error 객체 전체를 확인
-          if (error.response) {
-            const status = error.response.status;
-            const message =
-              error.response.data?.message || "알 수 없는 오류 발생";
-            console.error("Error Response Data:", error.response.data);
-            return res.status(status).json({ message: message });
-          }
-          console.error("Unknown Error:", error); // Axios 오류가 아닌 경우
-          throw error;
+        if (axios.isAxiosError(error) && error.response) {
+          const status = error.response.status;
+          const message =
+            error.response.data?.message || "알 수 없는 오류 발생";
+          return res.status(status).json({ message });
         }
-        return res.status(500).json({ message: "서버 오류 발생" });
       }
-
     case "PUT":
       try {
-        await axiosInstance.put(`/folders/${id}`, req.body, {
+        await axiosInstance.put(`/folders/${folderId}`, req.body, {
           headers: {
             Authorization: `Bearer ${token}`,
           },
@@ -53,10 +46,34 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
           const status = error.response.status;
           const message =
             error.response.data?.message || "알 수 없는 오류 발생";
-          throw error;
           return res.status(status).json({ message });
         }
       }
+
+    case "DELETE":
+      console.log("너 왔니?");
+      try {
+        await axiosInstance.delete(`/folders/${folderId}`, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+        return res.status(204).json({ message: "폴더 삭제 성공" });
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          console.error("Axios Error:", error); // 여기서 error 객체 전체를 확인
+          if (error.response) {
+            const status = error.response.status;
+            const message =
+              error.response.data?.message || "알 수 없는 오류 발생";
+            console.error("Error Response Data:", error.response.data);
+            return res.status(status).json({ message: message });
+          }
+          console.error("Unknown Error:", error); // Axios 오류가 아닌 경우
+          throw error;
+        }
+        return res.status(500).json({ message: "서버 오류 발생" });
+      }
   }
 };
 export default handler;
diff --git a/pages/api/folders/[folderId]/links.ts b/pages/api/folders/[folderId]/links.ts
new file mode 100644
index 0000000..ee4da50
--- /dev/null
+++ b/pages/api/folders/[folderId]/links.ts
@@ -0,0 +1,40 @@
+import axiosInstance from "@/lib/api/axiosInstanceApi";
+import axios from "axios";
+import { NextApiRequest, NextApiResponse } from "next";
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  const token = req.cookies.accessToken;
+  const { page, pageSize, folderId } = req.query;
+
+  if (!token) {
+    return res.status(401).json({ error: "사용자 정보를 찾을 수 없습니다." });
+  }
+
+  if (!folderId) {
+    return res.status(400).json({ error: "유효하지 않은 폴더 ID 입니다" });
+  }
+
+  switch (req.method) {
+    case "GET":
+      try {
+        const response = await axiosInstance.get(`/folders/${folderId}/links`, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+          params: {
+            page: page,
+            pageSize: pageSize,
+          },
+        });
+        return res.status(200).json(response.data);
+      } catch (error) {
+        if (axios.isAxiosError(error) && error.response) {
+          const status = error.response.status;
+          const message =
+            error.response.data?.message || "알 수 없는 오류 발생";
+          return res.status(status).json({ message });
+        }
+      }
+  }
+};
+export default handler;
diff --git a/pages/link/index.tsx b/pages/link/index.tsx
index f32e911..16e3d57 100644
--- a/pages/link/index.tsx
+++ b/pages/link/index.tsx
@@ -1,14 +1,14 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";
+import { parse } from "cookie";
 import { LinkData } from "@/types/linkTypes";
 import { FolderData } from "@/types/folderTypes";
 import { Modal } from "@/components/modal/modalManager/ModalManager";
-import { useLinkCardStore } from "@/store/useLinkCardStore";
 import { SearchInput } from "../../components/Search/SearchInput";
+import axiosInstance from "@/lib/api/axiosInstanceApi";
 import useModalStore from "@/store/useModalStore";
 import Pagination from "@/components/Pagination";
-import useFetchLinks from "@/hooks/useFetchLinks";
 import AddLinkInput from "@/components/Link/AddLinkInput";
 import Container from "@/components/Layout/Container";
 import SearchResultMessage from "@/components/Search/SearchResultMessage";
@@ -17,7 +17,9 @@ import AddFolderButton from "@/components/Folder/AddFolderButton";
 import FolderActionsMenu from "@/components/Folder/FolderActionsMenu";
 import CardsLayout from "@/components/Layout/CardsLayout";
 import LinkCard from "@/components/Link/LinkCard";
-import fetchProxy from "@/lib/api/fetchProxy";
+import RenderEmptyLinkMessage from "@/components/Link/RenderEmptyLinkMessage";
+import useFetchLinks from "@/hooks/useFetchLinks";
+import useViewport from "@/hooks/useViewport";
 
 interface LinkPageProps {
   linkList: LinkData[];
@@ -30,10 +32,21 @@ export const getServerSideProps = async (
   context: GetServerSidePropsContext
 ) => {
   const { req } = context;
+  const cookies = parse(req.headers.cookie || "");
+  const accessToken = cookies.accessToken;
+
+  const fetchData = async (endpoint: string) => {
+    const res = await axiosInstance.get(endpoint, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+    return res.data;
+  };
 
   const [links, folders] = await Promise.all([
-    fetchProxy("/api/links", req),
-    fetchProxy("/api/folders", req),
+    fetchData("/links"),
+    fetchData("/folders"),
   ]);
 
   return {
@@ -48,21 +61,20 @@ export const getServerSideProps = async (
 const LinkPage = ({
   linkList: initialLinkList,
   folderList: initialFolderList,
-  totalCount,
+  totalCount: initialTotalCount,
 }: LinkPageProps) => {
   const router = useRouter();
-  const { search } = router.query;
-  const { linkCardList, setLinkCardList } = useLinkCardStore();
+  const { search, folder } = router.query;
   const { isOpen } = useModalStore();
+  const { isMobile } = useViewport();
+  const [linkCardList, setLinkCardList] = useState(initialLinkList);
   const [folderList, setFolderList] = useState(initialFolderList);
+  const [totalCount, setTotalCount] = useState(initialTotalCount);
 
   // 링크페이지의 query가 바뀌면 새로운 리스트로 업데이트 해주는 훅
-  useFetchLinks(setLinkCardList);
+  useFetchLinks(setLinkCardList, setTotalCount, router.query, router.pathname);
 
-  // 클라이언트에서 초기 목록을 설정
-  useEffect(() => {
-    setLinkCardList(initialLinkList, totalCount);
-  }, [initialLinkList, setLinkCardList]);
+  console.log(linkCardList);
 
   return (
     <>
@@ -75,20 +87,35 @@ const LinkPage = ({
           {search && <SearchResultMessage message={search} />}
           <div className="flex justify-between mt-[40px]">
             {folderList && <FolderTag folderList={folderList} />}
-            <AddFolderButton setFolderList={setFolderList} />
+            {!isMobile && <AddFolderButton setFolderList={setFolderList} />}
           </div>
           <div className="flex justify-between items-center my-[24px]">
             <h1 className="text-2xl ">유용한 글</h1>
-            <FolderActionsMenu setFolderList={setFolderList} />
+            {folder && (
+              <FolderActionsMenu
+                setFolderList={setFolderList}
+                folderId={folder}
+                linkCount={totalCount}
+              />
+            )}
           </div>
-          <CardsLayout>
-            {linkCardList.map((link) => (
-              <LinkCard key={link.id} info={link} />
-            ))}
-          </CardsLayout>
-          <Pagination totalCount={totalCount} />
+          {linkCardList ? (
+            <>
+              <CardsLayout>
+                {linkCardList.map((link) => (
+                  <LinkCard key={link.id} info={link} />
+                ))}
+              </CardsLayout>
+              <Pagination totalCount={totalCount} />
+            </>
+          ) : (
+            <RenderEmptyLinkMessage />
+          )}
         </Container>
         {isOpen && <Modal />}
+        {isMobile && (
+          <AddFolderButton setFolderList={setFolderList} isModal={true} />
+        )}
       </main>
     </>
   );
diff --git a/styles/globals.css b/styles/globals.css
index 45ab799..e1f5f55 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -48,6 +48,15 @@ em {
     background-clip: text;
     color: transparent;
   }
+
+  .fixed-bottom {
+    position: fixed;
+    bottom: 50px;
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: center;
+    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+  }
 }
 
 input {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 512ba02..fb7d7b1 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -26,6 +26,7 @@ const config: Config = {
         gray700: "#676767",
         gray800: "#CFCFCF",
         gray900: "#f7f7f7",
+        purple50: "#7D7AFF",
         purple100: "#6d6afe",
       },
       screens: {
diff --git a/util/timAgo.ts b/util/timeAgo.ts
similarity index 100%
rename from util/timAgo.ts
rename to util/timeAgo.ts