diff --git a/lib/util/getSideTabList.ts b/lib/util/getSideTabList.ts
index 7b8f691..3496f15 100644
--- a/lib/util/getSideTabList.ts
+++ b/lib/util/getSideTabList.ts
@@ -17,7 +17,7 @@ const getSideTabList = (id: number) => [
     link: `/project/${id}/kanban`,
     path: `/project/${id}/kanban`,
   },
-  { tab: SIDE_TAB.presentation, link: `/project/${id}/presentation`, path: '/presentation' },
+  { tab: SIDE_TAB.presentation, link: `/project/${id}/presentation`, path: `/project/${id}/presentation` },
 ];
 
 export default getSideTabList;
diff --git a/pages/project/[id]/presentation.tsx b/pages/project/[id]/presentation.tsx
index ad18203..c90512f 100644
--- a/pages/project/[id]/presentation.tsx
+++ b/pages/project/[id]/presentation.tsx
@@ -1,19 +1,35 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+
+import getSideTabList from '@/lib/util/getSideTabList';
 
 import AppLayoutMain from '@/components/common/Layout/AppLayoutMain';
 
 import PresentationVideo from '@/components/project/PresentationVideo';
 import Sidebar from '@/components/project/Sidebar';
+import SideTab from '@/components/project/Sidebar/TabList/SideTab';
 
 import * as Styled from '@/styles/pages/Project/presentation';
 
 const PresentationPage = () => {
+  const router = useRouter();
+
+  const [id, setId] = useState<number>();
+
+  useEffect(() => {
+    if (!router.isReady) return;
+
+    setId(parseInt(router.query.id as string, 10));
+  }, [router.isReady]);
+
   return (
     <AppLayoutMain height="100vh" bottom="-45vh">
-      <Styled.Container>
-        <Sidebar />
-        <PresentationVideo />
-      </Styled.Container>
+      {id && (
+        <Styled.Container>
+          <Sidebar TabList={<SideTab path={router.asPath} sideTabList={getSideTabList(id)} />} />
+          <PresentationVideo />
+        </Styled.Container>
+      )}
     </AppLayoutMain>
   );
 };