diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 000000000..e0f23c27a
Binary files /dev/null and b/.DS_Store differ
diff --git a/frontend/__tests__/hello.tsx b/frontend/__tests__/hello.tsx
deleted file mode 100644
index 572451745..000000000
--- a/frontend/__tests__/hello.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { render } from '@testing-library/react';
-import { ThemeProvider } from 'styled-components';
-import { HomeIcon } from 'assets/icons';
-import Button from 'components/@common/Button/Button';
-import { theme } from 'styles/theme';
-
-describe('render 테스트', () => {
-  it('matches snapshot', () => {
-    render(
-      <ThemeProvider theme={theme}>
-        <Button icon={<HomeIcon />} />
-      </ThemeProvider>,
-    );
-  });
-});
diff --git a/frontend/src/apis/writings.ts b/frontend/src/apis/writings.ts
index 14bf3fb34..471fcaa89 100644
--- a/frontend/src/apis/writings.ts
+++ b/frontend/src/apis/writings.ts
@@ -9,6 +9,7 @@ import type {
   PublishWritingArgs,
   UpdateWritingTitleArgs,
   UpdateWritingOrderArgs,
+  GetHomeWritingsResponse,
 } from 'types/apis/writings';
 
 // 글 생성(글 업로드): POST
@@ -52,3 +53,7 @@ export const updateWritingTitle = ({ writingId, body }: UpdateWritingTitleArgs)
 // 글 제목 순서 변경: PATCH
 export const updateWritingOrder = ({ writingId, body }: UpdateWritingOrderArgs) =>
   http.patch(`${writingURL}/${writingId}`, { json: body });
+
+// 전체 글: GET
+export const getHomeWritings = (option: string): Promise<GetHomeWritingsResponse> =>
+  http.get(`${writingURL}/home${option}`);
diff --git a/frontend/src/assets/icons/home-border.svg b/frontend/src/assets/icons/home-border.svg
new file mode 100644
index 000000000..9d9caa42d
--- /dev/null
+++ b/frontend/src/assets/icons/home-border.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M12 2.1 1 12h3v9h7v-6h2v6h7v-9h3L12 2.1zm0 2.691 6 5.4V19h-3v-6H9v6H6v-8.809l6-5.4z"/></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/icons/index.ts b/frontend/src/assets/icons/index.ts
index f0d1f91fa..56cf0ed01 100644
--- a/frontend/src/assets/icons/index.ts
+++ b/frontend/src/assets/icons/index.ts
@@ -26,3 +26,4 @@ export { ReactComponent as NotionIcon } from './notion.svg';
 export { ReactComponent as DonggleIcon } from './donggle-logo.svg';
 export { ReactComponent as BlurBackgroundIcon } from './blur-background.svg';
 export { ReactComponent as HyperlinkIcon } from './hyperlink.svg';
+export { ReactComponent as HomeBorderIcon } from './home-border.svg';
diff --git a/frontend/src/components/@common/Pagination/Pagination.tsx b/frontend/src/components/@common/Pagination/Pagination.tsx
new file mode 100644
index 000000000..ffe4bdf63
--- /dev/null
+++ b/frontend/src/components/@common/Pagination/Pagination.tsx
@@ -0,0 +1,89 @@
+import styled from 'styled-components';
+
+type Props = {
+  pageLength: number;
+  activePage: number;
+  changeActivePage: (pageIndex: number) => void;
+};
+
+const Pagination = ({ pageLength, activePage, changeActivePage }: Props) => {
+  const isShowPrevious = activePage > 1;
+  const isShowNext = activePage < pageLength;
+
+  // 시작 페이지와 끝 페이지의 범위를 설정해주는 함수
+  const setPageRange = () => {
+    const isBetween1and4 = activePage < 5;
+    const isNearLast4Pages = activePage >= pageLength - 4;
+
+    if (isBetween1and4) return [1, Math.min(9, pageLength)];
+
+    if (isNearLast4Pages) return [Math.max(pageLength - 8, 1), pageLength];
+
+    return [activePage - 4, activePage + 4];
+  };
+
+  const [startPage, endPage] = setPageRange();
+
+  return (
+    <S.Container>
+      <S.PaginationButton $isShow={isShowPrevious} onClick={() => changeActivePage(activePage - 1)}>
+        {'<'}
+      </S.PaginationButton>
+      {Array.from({ length: endPage - startPage + 1 }, (_, index) => {
+        const pageIndex = startPage + index;
+
+        return (
+          <li key={pageIndex}>
+            <S.PageButton
+              $isActive={pageIndex === activePage}
+              onClick={() => changeActivePage(pageIndex)}
+            >
+              {pageIndex}
+            </S.PageButton>
+          </li>
+        );
+      })}
+      <S.PaginationButton $isShow={isShowNext} onClick={() => changeActivePage(activePage + 1)}>
+        {'>'}
+      </S.PaginationButton>
+    </S.Container>
+  );
+};
+
+export default Pagination;
+
+const S = {
+  Container: styled.div`
+    display: flex;
+    gap: 16px;
+  `,
+
+  PaginationButton: styled.button<{ $isShow: boolean }>`
+    width: 2.8rem;
+    height: 2.8rem;
+    border-radius: 4px;
+
+    font-size: 2rem;
+
+    opacity: ${({ $isShow }) => ($isShow ? 1 : 0)};
+    pointer-events: ${({ $isShow }) => ($isShow ? 'auto' : 'none')};
+
+    &:hover {
+      background-color: ${({ theme }) => theme.color.gray3};
+    }
+  `,
+
+  PageButton: styled.button<{ $isActive: boolean }>`
+    width: 2.8rem;
+    height: 2.8rem;
+    background-color: ${({ theme, $isActive }) => ($isActive ? theme.color.gray3 : 'inherit')};
+    border-radius: 4px;
+
+    font-size: 1.6rem;
+    font-weight: ${({ $isActive }) => ($isActive ? 600 : 400)};
+
+    &:hover {
+      background-color: ${({ theme }) => theme.color.gray3};
+    }
+  `,
+};
diff --git a/frontend/src/components/HomeButton/HomeButton.tsx b/frontend/src/components/HomeButton/HomeButton.tsx
new file mode 100644
index 000000000..641c7e11e
--- /dev/null
+++ b/frontend/src/components/HomeButton/HomeButton.tsx
@@ -0,0 +1,43 @@
+import { HomeBorderIcon } from 'assets/icons';
+import { NAVIGATE_PATH } from 'constants/path';
+import { usePageNavigate } from 'hooks/usePageNavigate';
+import { useLocation } from 'react-router-dom';
+import styled from 'styled-components';
+
+const HomeButton = () => {
+  const location = useLocation();
+  const { goSpacePage } = usePageNavigate();
+
+  return (
+    <S.Button onClick={goSpacePage} $isClicked={location.pathname === NAVIGATE_PATH.spacePage}>
+      <HomeBorderIcon />
+      <S.Title>전체 글</S.Title>
+    </S.Button>
+  );
+};
+
+export default HomeButton;
+
+const S = {
+  Button: styled.button<{ $isClicked: boolean }>`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    height: 3.6rem;
+    padding: 8px;
+    background-color: ${({ theme, $isClicked }) => $isClicked && theme.color.gray4};
+    border-radius: 4px;
+
+    text-align: start;
+
+    &:hover {
+      background-color: ${({ theme }) => theme.color.gray3};
+    }
+  `,
+
+  Title: styled.p`
+    font-size: 1.4rem;
+    font-weight: 500;
+  `,
+};
diff --git a/frontend/src/components/HomeTable/HomeTable.tsx b/frontend/src/components/HomeTable/HomeTable.tsx
new file mode 100644
index 000000000..9ca1ff895
--- /dev/null
+++ b/frontend/src/components/HomeTable/HomeTable.tsx
@@ -0,0 +1,130 @@
+import { Fragment } from 'react';
+import styled from 'styled-components';
+import { usePageNavigate } from 'hooks/usePageNavigate';
+import { dateFormatter } from 'utils/date';
+import { blogIcon } from 'components/WritingTable/WritingTable';
+import Pagination from 'components/@common/Pagination/Pagination';
+import { useHomeTable } from './useHomeTable';
+
+type Props = {
+  initialPageIndex?: number;
+};
+
+const HomeTable = ({ initialPageIndex = 1 }: Props) => {
+  const { content, totalPages, rowRef, activePage, changeActivePage } =
+    useHomeTable(initialPageIndex);
+  const { goWritingPage } = usePageNavigate();
+
+  if (!content || !totalPages) return null;
+
+  return (
+    <S.Container>
+      <S.HomeTable summary='카테고리 내부 글 목록을 나타낸다'>
+        <colgroup>
+          <col width='20%' />
+          <col width='40%' />
+          <col width='20%' />
+          <col width='20%' />
+        </colgroup>
+        <thead>
+          <tr ref={rowRef} tabIndex={0}>
+            <th>카테고리</th>
+            <th>글 제목</th>
+            <th>생성 날짜</th>
+            <th>발행한 블로그 플랫폼</th>
+          </tr>
+        </thead>
+        <tbody>
+          {content.map(
+            ({
+              id,
+              title,
+              publishedDetails,
+              createdAt,
+              category: { id: categoryId, categoryName },
+            }) => (
+              <tr
+                key={id}
+                onClick={() => goWritingPage({ categoryId, writingId: id })}
+                role='button'
+                tabIndex={0}
+              >
+                <td>{categoryName}</td>
+                <td>{title}</td>
+                <td>{dateFormatter(createdAt, 'YYYY.MM.DD.')}</td>
+                <td>
+                  <S.PublishedToIconContainer>
+                    {publishedDetails.map(({ blogName }, index) => (
+                      <Fragment key={index}>{blogIcon[blogName]}</Fragment>
+                    ))}
+                  </S.PublishedToIconContainer>
+                </td>
+              </tr>
+            ),
+          )}
+        </tbody>
+      </S.HomeTable>
+      <Pagination
+        pageLength={totalPages}
+        activePage={activePage}
+        changeActivePage={changeActivePage}
+      />
+    </S.Container>
+  );
+};
+
+export default HomeTable;
+
+const S = {
+  Container: styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 50px;
+  `,
+
+  HomeTable: styled.table`
+    width: 100%;
+    text-align: left;
+    font-size: 1.4rem;
+
+    th {
+      color: ${({ theme }) => theme.color.gray8};
+    }
+
+    td {
+      .publishedTo {
+        display: flex;
+        gap: 0.8rem;
+      }
+    }
+
+    th,
+    td {
+      padding: 1.1rem;
+      border: 1px solid ${({ theme }) => theme.color.gray5};
+    }
+
+    th:first-child,
+    td:first-child {
+      border-left: none;
+    }
+
+    th:last-child,
+    td:last-child {
+      border-right: none;
+    }
+
+    tbody tr:hover {
+      cursor: pointer;
+      transform: scale(1.01);
+      transition: all 300ms;
+    }
+  `,
+
+  PublishedToIconContainer: styled.div`
+    display: flex;
+    gap: 0.8rem;
+  `,
+};
diff --git a/frontend/src/components/HomeTable/useHomeTable.ts b/frontend/src/components/HomeTable/useHomeTable.ts
new file mode 100644
index 000000000..21a111169
--- /dev/null
+++ b/frontend/src/components/HomeTable/useHomeTable.ts
@@ -0,0 +1,40 @@
+import { useEffect, useRef, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+
+import { getHomeWritings } from 'apis/writings';
+import { GetHomeWritingsResponse } from 'types/apis/writings';
+
+export const useHomeTable = (initialPageIndex: number) => {
+  const [activePage, setActivePage] = useState(initialPageIndex);
+  const [fetchOption, setFetchOption] = useState(`?page=${activePage}&sort=createAt,desc`);
+  const { data } = useQuery<GetHomeWritingsResponse>(['homeWritings', fetchOption], () =>
+    getHomeWritings(fetchOption),
+  );
+  const rowRef = useRef<HTMLTableRowElement>(null);
+
+  const changeActivePage = (pageIndex: number) => {
+    setFetchOption(`?page=${pageIndex}&sort=createAt,desc`);
+    setActivePage(pageIndex);
+  };
+
+  useEffect(() => {
+    rowRef.current?.focus();
+  }, []);
+
+  return {
+    content: data?.content,
+    pageable: data?.pageable,
+    totalPages: data?.totalPages,
+    totalElements: data?.totalElements,
+    last: data?.last,
+    size: data?.size,
+    number: data?.number,
+    sort: data?.sort,
+    numberOfElements: data?.numberOfElements,
+    first: data?.first,
+    empty: data?.empty,
+    rowRef,
+    activePage,
+    changeActivePage,
+  };
+};
diff --git a/frontend/src/components/WritingTable/WritingTable.tsx b/frontend/src/components/WritingTable/WritingTable.tsx
index b0789acbb..d589a959c 100644
--- a/frontend/src/components/WritingTable/WritingTable.tsx
+++ b/frontend/src/components/WritingTable/WritingTable.tsx
@@ -11,7 +11,7 @@ type Props = {
   categoryId: number;
 };
 
-const blogIcon: Record<Blog, ReactElement> = {
+export const blogIcon: Record<Blog, ReactElement> = {
   MEDIUM: <MediumLogoIcon width='2.4rem' height='2.4rem' />,
   TISTORY: <TistoryLogoIcon width='2.4rem' height='2.4rem' />,
 };
@@ -34,8 +34,8 @@ const WritingTable = ({ writings, categoryId }: Props) => {
       <thead>
         <tr ref={rowRef} tabIndex={0}>
           <th>글 제목</th>
+          <th>생성 날짜</th>
           <th>발행한 블로그 플랫폼</th>
-          <th>발행 시간</th>
         </tr>
       </thead>
       <tbody>
diff --git a/frontend/src/constants/path.ts b/frontend/src/constants/path.ts
index 3f388b6ec..67558bd39 100644
--- a/frontend/src/constants/path.ts
+++ b/frontend/src/constants/path.ts
@@ -5,6 +5,7 @@ export const PATH = {
   myPage: 'my-page',
   connections: 'connections/*',
   space: 'space',
+  home: '',
   writingPage: 'writings/:categoryId/:writingId',
   writingTablePage: 'writings/:categoryId',
   trashCanPage: 'trash-can',
diff --git a/frontend/src/mocks/handlers/writing.ts b/frontend/src/mocks/handlers/writing.ts
index ceec85de0..094662b44 100644
--- a/frontend/src/mocks/handlers/writing.ts
+++ b/frontend/src/mocks/handlers/writing.ts
@@ -3,6 +3,7 @@ import { writingURL } from 'constants/apis/url';
 import { writingContentMock } from 'mocks/writingContentMock';
 import {
   GetDetailWritingsResponse,
+  GetHomeWritingsResponse,
   GetWritingPropertiesResponse,
   GetWritingResponse,
   UpdateWritingOrderArgs,
@@ -10,12 +11,17 @@ import {
 } from 'types/apis/writings';
 import { getWritingTableMock } from 'mocks/writingTableMock';
 import { hasDefinedField } from 'utils/typeGuard';
+import { getHomeWritingMock } from 'mocks/homeWritingMock';
 
 export const writingHandlers = [
   // 글 조회: GET
   rest.get(`${writingURL}/:writingId`, (req, res, ctx) => {
-    const writingId = Number(req.params.writingId);
+    const writingIdOrHome = req.params.writingId;
+
+    if (writingIdOrHome === 'home')
+      return res(ctx.delay(300), ctx.status(200), ctx.json(getHomeWritingMock()));
 
+    const writingId = Number(req.params.writingId);
     if (writingId === 200) {
       return res(
         ctx.delay(300),
@@ -139,4 +145,9 @@ export const writingHandlers = [
 
     return res(ctx.delay(3000), ctx.status(200));
   }),
+
+  // // 전체 글 조회
+  // rest.get(`${writingURL}/home`, (_, res, ctx) => {
+  //   return res(ctx.json<GetHomeWritingsResponse>(getHomeWritingMock()), ctx.status(200));
+  // }),
 ];
diff --git a/frontend/src/mocks/homeWritingMock.ts b/frontend/src/mocks/homeWritingMock.ts
new file mode 100644
index 000000000..cd84cc7ee
--- /dev/null
+++ b/frontend/src/mocks/homeWritingMock.ts
@@ -0,0 +1,63 @@
+import { GetHomeWritingsResponse } from 'types/apis/writings';
+
+export const getHomeWritingMock = (): GetHomeWritingsResponse => {
+  return {
+    content: [
+      {
+        id: 1,
+        title: '제목1',
+        category: {
+          id: 3,
+          categoryName: '기본',
+        },
+        createdAt: new Date('2023-07-11T06:55:46.922Z'),
+        publishedDetails: [
+          {
+            blogName: 'MEDIUM',
+            publishedAt: new Date('2023-07-11T06:55:46.922Z'),
+          },
+        ],
+      },
+      {
+        id: 2,
+        title: '제목2',
+        category: {
+          id: 3,
+          categoryName: '기본',
+        },
+        createdAt: new Date('2023-07-11T06:55:46.922Z'),
+        publishedDetails: [
+          {
+            blogName: 'MEDIUM',
+            publishedAt: new Date('2023-07-11T06:55:46.922Z'),
+          },
+        ],
+      },
+    ],
+    pageable: {
+      sort: {
+        empty: true,
+        sorted: false,
+        unsorted: true,
+      },
+      offset: 0,
+      pageNumber: 0,
+      pageSize: 20,
+      paged: true,
+      unpaged: false,
+    },
+    totalPages: 1,
+    totalElements: 20,
+    last: true,
+    size: 20,
+    number: 0,
+    sort: {
+      empty: true,
+      sorted: false,
+      unsorted: true,
+    },
+    numberOfElements: 20,
+    first: true,
+    empty: false,
+  };
+};
diff --git a/frontend/src/pages/HomePage/HomePage.tsx b/frontend/src/pages/HomePage/HomePage.tsx
new file mode 100644
index 000000000..fed63bac1
--- /dev/null
+++ b/frontend/src/pages/HomePage/HomePage.tsx
@@ -0,0 +1,28 @@
+import HomeTable from 'components/HomeTable/HomeTable';
+import styled from 'styled-components';
+
+const HomePage = () => {
+  return (
+    <S.Article>
+      <S.CategoryNameTitle>전체 글</S.CategoryNameTitle>
+      <HomeTable />
+    </S.Article>
+  );
+};
+
+export default HomePage;
+
+const S = {
+  Article: styled.article`
+    position: relative;
+    width: 100%;
+    padding: 8rem;
+
+    background-color: ${({ theme }) => theme.color.gray1};
+  `,
+
+  CategoryNameTitle: styled.h1`
+    font-size: 4rem;
+    margin-bottom: 5rem;
+  `,
+};
diff --git a/frontend/src/pages/Layout/Layout.tsx b/frontend/src/pages/Layout/Layout.tsx
index 90fb86153..8c525b755 100644
--- a/frontend/src/pages/Layout/Layout.tsx
+++ b/frontend/src/pages/Layout/Layout.tsx
@@ -11,6 +11,7 @@ import { useModal } from 'hooks/@common/useModal';
 import FileUploadModal from 'components/FileUploadModal/FileUploadModal';
 import Divider from 'components/@common/Divider/Divider';
 import TrashCan from 'components/TrashCan/TrashCan';
+import HomeButton from 'components/HomeButton/HomeButton';
 import HelpMenu from 'components/HelpMenu/HelpMenu';
 import { useGlobalStateValue } from '@yogjin/react-global-state';
 import { activeWritingInfoState } from 'globalState';
@@ -51,6 +52,8 @@ const Layout = () => {
           </Button>
           <FileUploadModal isOpen={isOpen} closeModal={closeModal} />
           <Divider />
+          <HomeButton />
+          <Divider />
           <CategorySection />
           <Divider />
           <TrashCan />
diff --git a/frontend/src/routes/Router.tsx b/frontend/src/routes/Router.tsx
index c60169b8f..ccfe5eb5a 100644
--- a/frontend/src/routes/Router.tsx
+++ b/frontend/src/routes/Router.tsx
@@ -18,6 +18,7 @@ import TrashCanPage from 'pages/TrashCanPage/TrashCanPage';
 import PrivateRouter from './PrivateRouter';
 
 import { Suspense, lazy } from 'react';
+import HomePage from 'pages/HomePage/HomePage';
 
 const IntroducePage = lazy(() => import('pages/IntroducePage/IntroducePage'));
 
@@ -34,6 +35,7 @@ export const Router = () => {
           <Route path={PATH.connections} element={<ConnectionPage />} />
 
           <Route path={PATH.space} element={<Layout />}>
+            <Route path={PATH.home} element={<HomePage />} />
             <Route path={PATH.writingPage} element={<WritingPage />} />
             <Route path={PATH.writingTablePage} element={<WritingTablePage />} />
             <Route path={PATH.trashCanPage} element={<TrashCanPage />} />
diff --git a/frontend/src/types/apis/writings.ts b/frontend/src/types/apis/writings.ts
index 83dc09222..9524201af 100644
--- a/frontend/src/types/apis/writings.ts
+++ b/frontend/src/types/apis/writings.ts
@@ -1,4 +1,5 @@
 import { Blog, PublishingPropertyData } from 'types/domain';
+import { CategoryResponse } from './category';
 
 export type AddWritingRequest = FormData;
 
@@ -59,3 +60,40 @@ export type UpdateWritingOrderArgs = {
     nextWritingId: number;
   };
 };
+
+type HomeContent = {
+  id: number;
+  title: string;
+  category: CategoryResponse;
+  createdAt: Date;
+  publishedDetails: Omit<PublishedDetail, 'tags' | 'publishedUrl'>[];
+};
+
+type Sort = {
+  empty: boolean;
+  sorted: boolean;
+  unsorted: boolean;
+};
+
+type Pageable = {
+  sort: Sort;
+  offset: number;
+  pageNumber: number;
+  pageSize: number;
+  paged: boolean;
+  unpaged: boolean;
+};
+
+export type GetHomeWritingsResponse = {
+  content: HomeContent[];
+  pageable: Pageable;
+  totalPages: number;
+  totalElements: number;
+  last: boolean;
+  size: number;
+  number: number;
+  sort: Sort;
+  numberOfElements: number;
+  first: boolean;
+  empty: boolean;
+};