diff --git a/apps/spectator/package.json b/apps/spectator/package.json
index 8eb6ca99..2593699d 100644
--- a/apps/spectator/package.json
+++ b/apps/spectator/package.json
@@ -20,6 +20,7 @@
     "@hcc/api-base": "workspace:*",
     "@hcc/icons": "workspace:*",
     "@hcc/style": "workspace:*",
+    "@hcc/ui": "workspace:*",
     "@vercel/analytics": "^1.5.0",
     "next": "^15.4.6",
     "react": "^19.1.1",
diff --git a/apps/spectator/src/app/landingpage/_components/TabNavigation.tsx b/apps/spectator/src/app/landingpage/_components/TabNavigation.tsx
new file mode 100644
index 00000000..68fe9b02
--- /dev/null
+++ b/apps/spectator/src/app/landingpage/_components/TabNavigation.tsx
@@ -0,0 +1,39 @@
+import { Button } from '@hcc/ui';
+
+interface TabNavigationProps {
+  activeTab: string;
+  onTabClick: (tabID: string) => void;
+}
+
+export const TabNavigation = ({ activeTab, onTabClick }: TabNavigationProps) => {
+  const tabs = [
+    { id: 'previous', label: '이전 대회' },
+    { id: 'recent', label: '최근 대회' },
+    { id: 'teams', label: '팀별 보기' },
+  ];
+
+  return (
+    <div className="w-full border-gray-200 border-b bg-white pt-5">
+      <div className="flex justify-center">
+        <div role="tablist" aria-label="대회 탭" className="flex gap-8">
+          {tabs.map(tab => (
+            <Button
+              key={tab.id}
+              role="tab"
+              aria-selected={activeTab === tab.id}
+              className={`-mb-px relative border-b-2 px-4 pb-4 font-medium transition-all duration-150 ease-out ${
+                activeTab === tab.id
+                  ? 'border-neutral-900 text-neutral-900'
+                  : 'border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700'
+              }`}
+              variant="subtle"
+              onClick={() => onTabClick(tab.id)}
+            >
+              {tab.label}
+            </Button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/spectator/src/app/landingpage/page.tsx b/apps/spectator/src/app/landingpage/page.tsx
new file mode 100644
index 00000000..5e9e7a9d
--- /dev/null
+++ b/apps/spectator/src/app/landingpage/page.tsx
@@ -0,0 +1,14 @@
+'use client';
+import { TabNavigation } from '~/app/landingpage/_components/TabNavigation';
+import { useState } from 'react';
+
+const Page = () => {
+  const [activeTab, setActiveTab] = useState('recent');
+  return (
+    <>
+      <TabNavigation activeTab={activeTab} onTabClick={setActiveTab} />
+      {/**내용* - 클릭한 tab에 대한 내용 랜더링*/}
+    </>
+  );
+};
+export default Page;
diff --git a/apps/spectator/src/app/page.tsx b/apps/spectator/src/app/page.tsx
index fe3c775b..6709410d 100644
--- a/apps/spectator/src/app/page.tsx
+++ b/apps/spectator/src/app/page.tsx
@@ -1,5 +1,5 @@
 const Page = () => {
-  return <div>Home</div>;
+  return <div />;
 };
 
 export default Page;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9f103ebb..a471eaa7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -108,6 +108,9 @@ importers:
       '@hcc/style':
         specifier: workspace:*
         version: link:../../packages/style
+      '@hcc/ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
       '@vercel/analytics':
         specifier: ^1.5.0
         version: 1.5.0(next@15.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react@19.1.1)