diff --git a/frontend/docs/mustpass/stack-navigation.md b/frontend/docs/mustpass/stack-navigation.md
index 36c61de..8b0f923 100644
--- a/frontend/docs/mustpass/stack-navigation.md
+++ b/frontend/docs/mustpass/stack-navigation.md
@@ -78,4 +78,9 @@
 
 ## 데스크톱
 
-- [ ] PC 뷰포트에서도 화면·슬라이드 전환이 가운데 `max-w-md`(448px) 컨테이너 안에서만 일어난다.
+- [ ] `lg` 미만에서는 가운데 `max-w-md`(448px) 캔버스와 하단 5슬롯 내비게이션이 유지된다.
+- [ ] `lg` 이상에서는 앱 캔버스가 최대 1440px까지 확장되고, 홈·몽글라인·사람·설정과
+      기록 작성 슬롯이 같은 순서의 좌측 내비게이션으로 표시된다.
+- [ ] PC의 홈은 소개/기간과 관계 지도가 2열로, 몽글라인은 활동 흐름/필터와 피드가 2열로
+      표시되며 가로 넘침 없이 각각 스크롤·조작할 수 있다.
+- [ ] 상세·설정·기록 작성·사람 등록 화면은 넓은 캔버스에서도 읽기 좋은 중앙 폭을 유지한다.
diff --git a/frontend/src/components/home/relation-force-map.tsx b/frontend/src/components/home/relation-force-map.tsx
index 86bf8dd..1e72ce4 100644
--- a/frontend/src/components/home/relation-force-map.tsx
+++ b/frontend/src/components/home/relation-force-map.tsx
@@ -152,7 +152,7 @@ export function RelationForceMap({
 
   return (
     <div
-      className="relative mt-0 h-[480px] touch-pan-y overflow-hidden bg-background select-none"
+      className="relative mt-0 h-[480px] touch-pan-y overflow-hidden bg-background select-none lg:h-[min(72vh,660px)] lg:min-h-[520px] lg:rounded-[2rem] lg:border lg:border-border/70 lg:bg-card lg:shadow-[0_28px_70px_-42px_rgba(0,0,0,0.35)]"
       onPointerDown={(event) => {
         if (event.button !== 0) return
         if (isPersonNodeTarget(event.target)) return
diff --git a/frontend/src/components/timeline/timeline-event-card.tsx b/frontend/src/components/timeline/timeline-event-card.tsx
index 8421ad2..9d146e8 100644
--- a/frontend/src/components/timeline/timeline-event-card.tsx
+++ b/frontend/src/components/timeline/timeline-event-card.tsx
@@ -94,7 +94,7 @@ export function TimelineEventCard({ item }: { item: TimelineEventCardItem }) {
     <button
       type="button"
       onClick={() => push('EventDetail', { eventId: String(item.id) })}
-      className="block min-w-0 flex-1 text-left"
+      className="block w-full min-w-0 flex-1 text-left"
     >
       <Card className="relative overflow-hidden py-0 shadow-[0_10px_30px_rgba(0,0,0,0.045)] transition-all hover:-translate-y-0.5 hover:bg-muted/20 hover:shadow-[0_14px_36px_rgba(0,0,0,0.07)]">
         <CardContent className="p-4">
diff --git a/frontend/src/components/timeline/timeline-feed.tsx b/frontend/src/components/timeline/timeline-feed.tsx
index bd54f1e..30f13f0 100644
--- a/frontend/src/components/timeline/timeline-feed.tsx
+++ b/frontend/src/components/timeline/timeline-feed.tsx
@@ -33,7 +33,12 @@ export function TimelineFeed<T extends TimelineFeedItem>({
   if (items.length === 0) return null
 
   return (
-    <div className={cn('relative min-w-0 pb-20', scrollRootRef && 'pr-0.5')}>
+    <div
+      className={cn(
+        'relative min-w-0 pb-20 lg:pb-8',
+        scrollRootRef && 'pr-0.5',
+      )}
+    >
       {yearGroups.map((group) => (
         <section key={group.year} className="relative">
           <div
diff --git a/frontend/src/components/timeline/timeline-filter-drawer.tsx b/frontend/src/components/timeline/timeline-filter-drawer.tsx
index 0127015..5268bba 100644
--- a/frontend/src/components/timeline/timeline-filter-drawer.tsx
+++ b/frontend/src/components/timeline/timeline-filter-drawer.tsx
@@ -62,7 +62,7 @@ export function TimelineFilterDrawer({
 
       <DrawerContent
         aria-describedby={undefined}
-        className="mx-auto w-full max-w-md overflow-hidden border-x border-border bg-background shadow-2xl data-[vaul-drawer-direction=bottom]:rounded-t-[5rem]"
+        className="mx-auto w-full max-w-md overflow-hidden border-x border-border bg-background shadow-2xl data-[vaul-drawer-direction=bottom]:rounded-t-[5rem] lg:max-w-xl lg:data-[vaul-drawer-direction=bottom]:rounded-t-[2rem]"
       >
         <DrawerHeader className="px-5 pt-5 text-left">
           <DrawerTitle className="text-lg font-extrabold tracking-tight">
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 0ae2c31..3cf0c36 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -86,7 +86,7 @@ function AppBootstrap() {
     return (
       <ThemeProvider>
         <QueryClientProvider client={queryClient}>
-          <StackViewport>
+          <StackViewport desktop>
             <Suspense fallback={null}>
               <AppStack />
             </Suspense>
diff --git a/frontend/src/stackflow/README.md b/frontend/src/stackflow/README.md
index 5225941..42f42b4 100644
--- a/frontend/src/stackflow/README.md
+++ b/frontend/src/stackflow/README.md
@@ -33,13 +33,16 @@
   유지한다.
 - **딥링크**: 상세 URL 직접 진입 시 `defaultHistory`가 아래에 Main(해당 탭)을 깔아
   뒤로가기가 앱 이탈이 되지 않는다.
-- **데스크톱**: `main.tsx`가 스택 전체를 `mx-auto max-w-md`(448px) relative 컨테이너에
-  가둔다. basic-ui 화면은 fixed가 아니라 positioned 조상 기준 absolute라 슬라이드도 그 안에서만 일어난다.
+- **반응형 앱 캔버스**: 모바일·태블릿은 기존 `max-w-md`(448px) 캔버스와 하단 탭을
+  유지한다. 인증 완료 앱은 `lg`부터 최대 1440px 캔버스로 확장하고 좌측 내비게이션을 쓴다.
+  온보딩은 집중형 입력 흐름이라 448px 캔버스를 유지한다. basic-ui 화면은 fixed가 아니라
+  positioned 조상 기준 absolute라 슬라이드는 각 캔버스 안에서만 일어난다.
 - history-sync가 **생성하는 URL에는 항상 trailing slash가 붙는다**(`/home/`, 라이브러리
   하드코딩). 인바운드 매칭은 슬래시 유무 모두 허용하므로 동작엔 영향 없다.
 - 셸 컴포넌트: 탭 화면은 `components/tab-shell.tsx`, push 화면은
   `components/activity-shell.tsx` (구 AppShell의 대응물, dvh 대신 h-full 기준).
-  데스크톱 컨테이너는 `components/stack-viewport.tsx` (앱·온보딩 스택 공용).
+  반응형 컨테이너는 `components/stack-viewport.tsx` (앱·온보딩 스택 공용), 탭 위치 전환은
+  `components/stack-tab-bar.tsx`가 담당한다.
 
 ## 온보딩 퍼널 (`onboarding/`)
 
diff --git a/frontend/src/stackflow/activities/event-detail-activity.tsx b/frontend/src/stackflow/activities/event-detail-activity.tsx
index 8a60b23..c9aeaf3 100644
--- a/frontend/src/stackflow/activities/event-detail-activity.tsx
+++ b/frontend/src/stackflow/activities/event-detail-activity.tsx
@@ -72,7 +72,7 @@ export const EventDetailActivity: ActivityComponentType<'EventDetail'> = ({
   const memo = event.memo?.trim() ?? ''
 
   return (
-    <ActivityShell className="px-0">
+    <ActivityShell className="px-0 lg:px-0">
       <header className="grid shrink-0 grid-cols-3 items-center px-5 py-1">
         <button
           type="button"
diff --git a/frontend/src/stackflow/activities/main-activity.tsx b/frontend/src/stackflow/activities/main-activity.tsx
index c36ab98..4718b8f 100644
--- a/frontend/src/stackflow/activities/main-activity.tsx
+++ b/frontend/src/stackflow/activities/main-activity.tsx
@@ -16,8 +16,8 @@ const TAB_COMPONENTS: Record<MainTab, React.ComponentType> = {
   settings: SettingsTab,
 }
 
-// 하단 탭 4개를 품는 단일 activity. 탭 전환은 step(replaceStep)이라
-// 히스토리가 쌓이지 않고, 이 컴포넌트가 언마운트되지 않아 탭 상태가 보존된다.
+// 탭 4개와 반응형 내비게이션을 품는 단일 activity. 탭 전환은
+// step(replaceStep)이라 히스토리가 쌓이지 않고 탭 상태가 보존된다.
 export const MainActivity: ActivityComponentType<'Main'> = ({ params }) => {
   const tab: MainTab = isMainTab(params.tab) ? params.tab : 'home'
   // 방문한 탭만 마운트하고, 한 번 방문한 탭은 hidden으로 유지한다.
@@ -27,17 +27,21 @@ export const MainActivity: ActivityComponentType<'Main'> = ({ params }) => {
 
   return (
     <AppScreen>
-      <div className="relative flex h-full flex-col bg-background">
+      <div className="relative flex h-full flex-col bg-background lg:flex-row lg:bg-muted/35">
+        <StackTabBar activeTab={tab} />
         {MAIN_TABS.map((t) => {
           if (!visitedTabs.current.has(t)) return null
           const Tab = TAB_COMPONENTS[t]
           return (
-            <div key={t} hidden={t !== tab} className="relative min-h-0 flex-1">
+            <div
+              key={t}
+              hidden={t !== tab}
+              className="relative min-h-0 flex-1 bg-background"
+            >
               <Tab />
             </div>
           )
         })}
-        <StackTabBar activeTab={tab} />
       </div>
     </AppScreen>
   )
diff --git a/frontend/src/stackflow/activities/person-edit-activity.tsx b/frontend/src/stackflow/activities/person-edit-activity.tsx
index 01e95a0..0d0c18b 100644
--- a/frontend/src/stackflow/activities/person-edit-activity.tsx
+++ b/frontend/src/stackflow/activities/person-edit-activity.tsx
@@ -90,7 +90,7 @@ export const PersonEditActivity: ActivityComponentType<'PersonEdit'> = ({
   })
 
   return (
-    <ActivityShell layout="fixed" className="px-0">
+    <ActivityShell layout="fixed" className="px-0 lg:px-0">
       <FormPageHeader
         onBack={() => pop()}
         title="프로필 수정"
diff --git a/frontend/src/stackflow/activities/person-new-activity.tsx b/frontend/src/stackflow/activities/person-new-activity.tsx
index f4cb62b..41c3f0b 100644
--- a/frontend/src/stackflow/activities/person-new-activity.tsx
+++ b/frontend/src/stackflow/activities/person-new-activity.tsx
@@ -370,7 +370,7 @@ export const PersonNewActivity: ActivityComponentType<'PersonNew'> = () => {
 function PersonNewScreen({ children }: { children: React.ReactNode }) {
   return (
     <AppScreen>
-      <div className="mx-auto flex h-full max-w-md flex-col bg-background">
+      <div className="mx-auto flex h-full max-w-md flex-col bg-background lg:my-6 lg:h-[calc(100%-3rem)] lg:max-w-xl lg:overflow-hidden lg:rounded-[2rem] lg:border lg:border-border/70 lg:shadow-2xl">
         {children}
       </div>
     </AppScreen>
diff --git a/frontend/src/stackflow/activities/record-activity.tsx b/frontend/src/stackflow/activities/record-activity.tsx
index e802860..07389e5 100644
--- a/frontend/src/stackflow/activities/record-activity.tsx
+++ b/frontend/src/stackflow/activities/record-activity.tsx
@@ -680,7 +680,7 @@ function RecordScreen({
     <AppScreen
       CUPERTINO_ONLY_modalPresentationStyle={slideIn ? undefined : 'fullScreen'}
     >
-      <div className="mx-auto flex h-full max-w-md flex-col overflow-y-auto bg-background">
+      <div className="mx-auto flex h-full max-w-md flex-col overflow-y-auto bg-background lg:my-6 lg:h-[calc(100%-3rem)] lg:max-w-xl lg:rounded-[2rem] lg:border lg:border-border/70 lg:shadow-2xl">
         {children}
       </div>
     </AppScreen>
diff --git a/frontend/src/stackflow/components/activity-shell.tsx b/frontend/src/stackflow/components/activity-shell.tsx
index b07ff01..c936ff4 100644
--- a/frontend/src/stackflow/components/activity-shell.tsx
+++ b/frontend/src/stackflow/components/activity-shell.tsx
@@ -24,7 +24,7 @@ export function ActivityShell({
     >
       <div
         className={cn(
-          'relative bg-background px-5 pt-[max(1.5rem,env(safe-area-inset-top))]',
+          'relative bg-background px-5 pt-[max(1.5rem,env(safe-area-inset-top))] lg:mx-auto lg:w-full lg:max-w-3xl lg:border-x lg:border-border/70 lg:px-10 lg:pt-8',
           layout === 'fixed'
             ? 'flex h-full min-h-0 min-w-0 flex-col overflow-hidden pb-[max(0.5rem,env(safe-area-inset-bottom))]'
             : 'h-full overflow-y-auto pb-8 [-webkit-overflow-scrolling:touch]',
diff --git a/frontend/src/stackflow/components/stack-tab-bar.tsx b/frontend/src/stackflow/components/stack-tab-bar.tsx
index d8a77a6..2e837e7 100644
--- a/frontend/src/stackflow/components/stack-tab-bar.tsx
+++ b/frontend/src/stackflow/components/stack-tab-bar.tsx
@@ -1,5 +1,6 @@
 import { useFlow, useStepFlow } from '@stackflow/react'
 import { Clock, Home, Plus, Settings, Users } from 'lucide-react'
+import { MongleLogo } from '@/components/brand/mongle-logo'
 import { cn } from '@/lib/utils'
 import type { MainTab } from '@/stackflow/stackflow.config'
 
@@ -10,9 +11,8 @@ const tabs: Array<{ tab: MainTab; label: string; icon: typeof Home }> = [
   { tab: 'settings', label: '설정', icon: Settings },
 ]
 
-// BottomNav(components/layout/bottom-nav.tsx)의 스택 버전.
-// 탭 전환은 push가 아니라 replaceStep이라 히스토리가 쌓이지 않고,
-// Main activity가 언마운트되지 않으므로 탭 상태가 보존된다.
+// 모바일은 하단 탭, PC는 좌측 내비게이션으로 표시한다. 둘 다 같은
+// replaceStep을 사용하므로 히스토리와 탭 상태 보존 계약은 바뀌지 않는다.
 export function StackTabBar({ activeTab }: { activeTab: MainTab }) {
   const { replaceStep } = useStepFlow('Main')
   const { push } = useFlow()
@@ -24,8 +24,8 @@ export function StackTabBar({ activeTab }: { activeTab: MainTab }) {
   ]
 
   return (
-    <nav className="absolute right-0 bottom-0 left-0 z-50 border-t border-border bg-background">
-      <div className="mx-auto flex h-[calc(4.75rem+env(safe-area-inset-bottom))] max-w-md items-end justify-around px-2 pb-[calc(0.75rem+env(safe-area-inset-bottom))]">
+    <nav className="absolute right-0 bottom-0 left-0 z-50 border-t border-border bg-background lg:static lg:h-full lg:w-60 lg:shrink-0 lg:border-t-0 lg:border-r lg:bg-card/85 lg:backdrop-blur-xl">
+      <div className="mx-auto flex h-[calc(4.75rem+env(safe-area-inset-bottom))] max-w-md items-end justify-around px-2 pb-[calc(0.75rem+env(safe-area-inset-bottom))] lg:hidden">
         {items.map((item) => {
           if (item.kind === 'fab') {
             return (
@@ -47,6 +47,7 @@ export function StackTabBar({ activeTab }: { activeTab: MainTab }) {
               key={item.tab}
               type="button"
               onClick={() => replaceStep({ tab: item.tab })}
+              aria-current={activeTab === item.tab ? 'page' : undefined}
               className={cn(
                 'flex flex-col items-center gap-1 text-[11px] font-bold',
                 activeTab === item.tab
@@ -60,6 +61,53 @@ export function StackTabBar({ activeTab }: { activeTab: MainTab }) {
           )
         })}
       </div>
+
+      <div className="hidden h-full flex-col px-4 py-7 lg:flex">
+        <MongleLogo
+          className="px-3 text-foreground"
+          iconClassName="size-7"
+          textClassName="text-base"
+        />
+
+        <div className="mt-10 space-y-1.5">
+          {items.map((item) => {
+            if (item.kind === 'fab') {
+              return (
+                <button
+                  key="record"
+                  type="button"
+                  onClick={() => push('Record', {})}
+                  className="flex h-11 w-full items-center justify-center gap-2 rounded-xl border border-foreground bg-background text-sm font-extrabold text-foreground shadow-sm transition-colors hover:bg-foreground hover:text-background"
+                >
+                  <Plus className="size-[1.125rem]" />
+                  기록 작성
+                </button>
+              )
+            }
+
+            const Icon = item.icon
+            const isActive = activeTab === item.tab
+
+            return (
+              <button
+                key={item.tab}
+                type="button"
+                onClick={() => replaceStep({ tab: item.tab })}
+                aria-current={isActive ? 'page' : undefined}
+                className={cn(
+                  'flex h-11 w-full items-center gap-3 rounded-xl px-3 text-sm font-extrabold transition-colors',
+                  isActive
+                    ? 'bg-foreground text-background shadow-sm'
+                    : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+                )}
+              >
+                <Icon className="size-[1.125rem]" />
+                {item.label}
+              </button>
+            )
+          })}
+        </div>
+      </div>
     </nav>
   )
 }
diff --git a/frontend/src/stackflow/components/stack-viewport.tsx b/frontend/src/stackflow/components/stack-viewport.tsx
index 75391ec..6e3f0cc 100644
--- a/frontend/src/stackflow/components/stack-viewport.tsx
+++ b/frontend/src/stackflow/components/stack-viewport.tsx
@@ -1,9 +1,23 @@
-// PC에서도 모바일 폭(max-w-md) 안에서만 화면이 그려지고 슬라이드되도록
-// 스택 전체를 가운데 정렬된 컨테이너에 가둔다.
-// (basic-ui 화면은 fixed가 아니라 가장 가까운 positioned 조상 기준 absolute)
-export function StackViewport({ children }: { children: React.ReactNode }) {
+import { cn } from '@/lib/utils'
+
+// basic-ui 화면은 fixed가 아니라 가장 가까운 positioned 조상 기준 absolute다.
+// 모바일은 기존 448px 앱 캔버스를 유지하고, PC에서는 넓은 앱 캔버스 안에서
+// 좌측 내비게이션과 각 화면의 데스크톱 레이아웃을 함께 그린다.
+export function StackViewport({
+  children,
+  desktop = false,
+}: {
+  children: React.ReactNode
+  desktop?: boolean
+}) {
   return (
-    <div className="relative mx-auto h-dvh w-full max-w-md overflow-hidden bg-background sm:border-x sm:border-border">
+    <div
+      className={cn(
+        'relative mx-auto h-dvh w-full max-w-md overflow-hidden bg-background sm:border-x sm:border-border',
+        desktop &&
+          'lg:max-w-[1440px] lg:shadow-[0_0_80px_rgba(0,0,0,0.06)] dark:lg:shadow-[0_0_80px_rgba(0,0,0,0.24)]',
+      )}
+    >
       {children}
       <div
         id="stack-overlay-root"
diff --git a/frontend/src/stackflow/components/tab-shell.tsx b/frontend/src/stackflow/components/tab-shell.tsx
index 4d55955..741a810 100644
--- a/frontend/src/stackflow/components/tab-shell.tsx
+++ b/frontend/src/stackflow/components/tab-shell.tsx
@@ -1,7 +1,7 @@
 import { cn } from '@/lib/utils'
 
 // Main activity의 탭 슬롯 안에서 쓰는 공용 셸. 구 AppShell의 main 영역 대응물로,
-// 하단은 StackTabBar(오버레이)를 피할 만큼 패딩을 준다.
+// 모바일 하단은 StackTabBar 오버레이를 피하고 PC에서는 콘텐츠 여백으로 전환한다.
 // 탭마다 이 셸이 각자 스크롤 컨테이너를 가지므로 탭 전환 시 스크롤 위치도 보존된다.
 export function TabShell({
   children,
@@ -16,7 +16,7 @@ export function TabShell({
   return (
     <div
       className={cn(
-        'px-5 pt-[max(1.5rem,env(safe-area-inset-top))] pb-[calc(4.75rem+env(safe-area-inset-bottom))]',
+        'px-5 pt-[max(1.5rem,env(safe-area-inset-top))] pb-[calc(4.75rem+env(safe-area-inset-bottom))] lg:px-10 lg:pt-8 lg:pb-8 xl:px-12',
         layout === 'fixed'
           ? 'flex h-full min-h-0 min-w-0 flex-col overflow-hidden'
           : 'h-full overflow-y-auto [-webkit-overflow-scrolling:touch]',
diff --git a/frontend/src/stackflow/tabs/home-tab.tsx b/frontend/src/stackflow/tabs/home-tab.tsx
index 8417030..522ef89 100644
--- a/frontend/src/stackflow/tabs/home-tab.tsx
+++ b/frontend/src/stackflow/tabs/home-tab.tsx
@@ -62,36 +62,42 @@ export function HomeTab() {
 
   return (
     <TabShell>
-      <header className="mb-3">
-        <MongleLogo className="mb-5 text-foreground" />
-        <h1 className="text-[22px] font-black leading-tight tracking-tight text-foreground">
-          함께한 순간, <br /> 몽글몽글 쌓이는 중
-        </h1>
-      </header>
+      <div className="lg:grid lg:h-full lg:min-h-0 lg:grid-cols-[minmax(16rem,0.8fr)_minmax(22rem,1.2fr)] lg:items-center lg:gap-6 xl:grid-cols-[minmax(16rem,0.7fr)_minmax(30rem,1.3fr)] xl:gap-12">
+        <div className="lg:self-center">
+          <header className="mb-3 lg:mb-8">
+            <MongleLogo className="mb-5 text-foreground lg:hidden" />
+            <h1 className="text-[22px] font-black leading-tight tracking-tight text-foreground lg:text-[34px] lg:leading-[1.2] lg:tracking-[-0.035em]">
+              함께한 순간, <br /> 몽글몽글 쌓이는 중
+            </h1>
+          </header>
 
-      <section className="mb-4">
-        <HomePeriodToggle value={period} onChange={handlePeriodChange} />
-      </section>
+          <section className="mb-4 lg:mb-0 lg:max-w-sm">
+            <HomePeriodToggle value={period} onChange={handlePeriodChange} />
+          </section>
+        </div>
 
-      {mapQuery.isPending ? (
-        <p className="py-12 text-center text-sm text-muted-foreground">
-          관계 지도를 불러오는 중…
-        </p>
-      ) : mapQuery.isError || !mapData ? (
-        <p className="py-12 text-center text-sm text-destructive">
-          관계 지도를 불러오지 못했어요.
-        </p>
-      ) : (
-        <RelationForceMap
-          key={period}
-          me={mapData.me}
-          nodes={graphNodes}
-          edges={visibleEdges}
-        />
-      )}
+        <div className="min-w-0 lg:self-center">
+          {mapQuery.isPending ? (
+            <p className="py-12 text-center text-sm text-muted-foreground">
+              관계 지도를 불러오는 중…
+            </p>
+          ) : mapQuery.isError || !mapData ? (
+            <p className="py-12 text-center text-sm text-destructive">
+              관계 지도를 불러오지 못했어요.
+            </p>
+          ) : (
+            <RelationForceMap
+              key={period}
+              me={mapData.me}
+              nodes={graphNodes}
+              edges={visibleEdges}
+            />
+          )}
+        </div>
+      </div>
 
       {throwback && !throwbackDismissed ? (
-        <div className="pointer-events-none absolute right-4 bottom-[6.25rem] left-4 z-40">
+        <div className="pointer-events-none absolute right-4 bottom-[6.25rem] left-4 z-40 lg:right-12 lg:bottom-8 lg:left-auto lg:w-[26rem]">
           <div
             className={cn(
               'pointer-events-auto mx-auto w-full max-w-md',
diff --git a/frontend/src/stackflow/tabs/people-tab.tsx b/frontend/src/stackflow/tabs/people-tab.tsx
index 350fb13..d3e18f2 100644
--- a/frontend/src/stackflow/tabs/people-tab.tsx
+++ b/frontend/src/stackflow/tabs/people-tab.tsx
@@ -70,15 +70,15 @@ export function PeopleTab() {
   }
 
   return (
-    <TabShell layout="fixed">
+    <TabShell layout="fixed" className="lg:mx-auto lg:w-full lg:max-w-4xl">
       <header className="shrink-0 pb-4">
-        <MongleLogo className="mb-5 text-foreground" />
+        <MongleLogo className="mb-5 text-foreground lg:hidden" />
         <div className="flex items-start justify-between gap-3">
           <div>
-            <h1 className="text-[22px] font-black leading-tight tracking-tight text-foreground">
+            <h1 className="text-[22px] font-black leading-tight tracking-tight text-foreground lg:text-[30px]">
               사람
             </h1>
-            <p className="mt-2 text-[12px] font-medium text-muted-foreground">
+            <p className="mt-2 text-[12px] font-medium text-muted-foreground lg:text-sm">
               {totalCount > 0
                 ? `함께한 사람 ${totalCount}명`
                 : '함께한 사람을 찾고 관리해요'}
@@ -95,10 +95,10 @@ export function PeopleTab() {
         </div>
       </header>
 
-      <div className="min-h-0 min-w-0 flex-1 space-y-6 overflow-y-auto pb-24 [scrollbar-gutter:stable] [-webkit-overflow-scrolling:touch]">
+      <div className="min-h-0 min-w-0 flex-1 space-y-6 overflow-y-auto pb-24 [scrollbar-gutter:stable] [-webkit-overflow-scrolling:touch] lg:pb-0">
         <section>
-          <ListGroup>
-            <ListGroupItem>
+          <ListGroup className="lg:grid lg:grid-cols-[minmax(0,1fr)_18rem] lg:divide-x lg:divide-border/50">
+            <ListGroupItem className="lg:border-b-0">
               <ListGroupInset className="relative px-2 py-1">
                 <Search className="pointer-events-none absolute top-1/2 left-4 size-4 -translate-y-1/2 text-muted-foreground" />
                 <Input
diff --git a/frontend/src/stackflow/tabs/settings-tab.tsx b/frontend/src/stackflow/tabs/settings-tab.tsx
index aed189f..467118c 100644
--- a/frontend/src/stackflow/tabs/settings-tab.tsx
+++ b/frontend/src/stackflow/tabs/settings-tab.tsx
@@ -41,15 +41,15 @@ export function SettingsTab() {
   }
 
   return (
-    <TabShell layout="fixed">
+    <TabShell layout="fixed" className="lg:mx-auto lg:w-full lg:max-w-4xl">
       <header className="shrink-0 pb-4">
-        <MongleLogo className="mb-5 text-foreground" />
-        <h1 className="text-[22px] font-black leading-tight tracking-tight text-foreground">
+        <MongleLogo className="mb-5 text-foreground lg:hidden" />
+        <h1 className="text-[22px] font-black leading-tight tracking-tight text-foreground lg:text-[30px]">
           설정
         </h1>
       </header>
 
-      <div className="min-h-0 min-w-0 flex-1 space-y-6 overflow-y-auto pb-24 [scrollbar-gutter:stable] [-webkit-overflow-scrolling:touch]">
+      <div className="min-h-0 min-w-0 flex-1 space-y-6 overflow-y-auto pb-24 [scrollbar-gutter:stable] [-webkit-overflow-scrolling:touch] lg:grid lg:grid-cols-2 lg:content-start lg:items-start lg:gap-6 lg:space-y-0 lg:pb-0">
         <ListGroup>
           <SettingsNavigationItem
             label="홈 설정"
diff --git a/frontend/src/stackflow/tabs/timeline-tab.tsx b/frontend/src/stackflow/tabs/timeline-tab.tsx
index 572c3b1..50f767e 100644
--- a/frontend/src/stackflow/tabs/timeline-tab.tsx
+++ b/frontend/src/stackflow/tabs/timeline-tab.tsx
@@ -114,87 +114,93 @@ export function TimelineTab() {
   }
 
   return (
-    <TabShell layout="fixed">
+    <TabShell layout="fixed" className="lg:mx-auto lg:w-full lg:max-w-6xl">
       <TimelineScrollShell
         scrollRef={scrollRef}
         header={
           <>
-            <MongleLogo className="mb-5 text-foreground" />
-            <h1 className="text-[22px] font-extrabold tracking-tight">
+            <MongleLogo className="mb-5 text-foreground lg:hidden" />
+            <h1 className="text-[22px] font-extrabold tracking-tight lg:text-[30px]">
               나의 몽글라인
             </h1>
-            <p className="mt-1 text-xs text-muted-foreground">
+            <p className="mt-1 text-xs text-muted-foreground lg:text-sm">
               모든 사람과의 기록을 시간순으로
             </p>
           </>
         }
       >
-        {allTimelineQuery.data && persons.length > 0 ? (
-          <div className="mb-2">
-            <ActivityFlowChart
-              persons={persons}
-              records={flowRecords}
-              selectedPoint={flowSelection}
-              onSelectPoint={handleFlowSelection}
-            />
-          </div>
-        ) : null}
-
-        <div className="px-1 py-2">
-          <div className="flex items-center justify-between gap-3">
-            <p className="text-sm font-extrabold">필터</p>
-            <TimelineFilterDrawer
-              categoryChips={categoryChips}
-              persons={persons}
-              selectedCategoryIds={categoryFilter}
-              selectedPersonIds={personFilter}
-              activeFilterCount={activeFilterCount}
-              hasFilter={hasFilter}
-              onToggleCategory={toggleCategory}
-              onTogglePerson={togglePerson}
-              onReset={resetFilters}
-            />
+        <div className="lg:grid lg:grid-cols-[minmax(15rem,0.78fr)_minmax(24rem,1.22fr)] lg:items-start lg:gap-8 xl:grid-cols-[minmax(18rem,0.78fr)_minmax(28rem,1.22fr)]">
+          <aside className="min-w-0 lg:sticky lg:top-0">
+            {allTimelineQuery.data && persons.length > 0 ? (
+              <div className="mb-2 lg:mb-4">
+                <ActivityFlowChart
+                  persons={persons}
+                  records={flowRecords}
+                  selectedPoint={flowSelection}
+                  onSelectPoint={handleFlowSelection}
+                />
+              </div>
+            ) : null}
+
+            <div className="px-1 py-2 lg:rounded-2xl lg:border lg:border-border/70 lg:bg-card lg:px-4 lg:py-3">
+              <div className="flex items-center justify-between gap-3">
+                <p className="text-sm font-extrabold">필터</p>
+                <TimelineFilterDrawer
+                  categoryChips={categoryChips}
+                  persons={persons}
+                  selectedCategoryIds={categoryFilter}
+                  selectedPersonIds={personFilter}
+                  activeFilterCount={activeFilterCount}
+                  hasFilter={hasFilter}
+                  onToggleCategory={toggleCategory}
+                  onTogglePerson={togglePerson}
+                  onReset={resetFilters}
+                />
+              </div>
+            </div>
+          </aside>
+
+          <div className="min-w-0">
+            {filteredTimelineQuery.isPending ? (
+              <p className="py-12 text-center text-sm text-muted-foreground">
+                타임라인을 불러오는 중…
+              </p>
+            ) : filteredTimelineQuery.isError ? (
+              <p className="py-12 text-center text-sm text-destructive">
+                타임라인을 불러오지 못했어요.
+              </p>
+            ) : cards.length === 0 ? (
+              <div className="py-12 text-center">
+                <p className="text-sm text-muted-foreground">
+                  {hasFilter
+                    ? '이 조건에 맞는 기록이 없어요.'
+                    : persons.length === 0
+                      ? '먼저 함께한 사람을 추가해 주세요.'
+                      : '아직 함께한 기록이 없어요. 첫 순간을 새겨보세요.'}
+                </p>
+                <Button
+                  className="mt-4"
+                  variant="outline"
+                  onClick={() =>
+                    persons.length === 0
+                      ? push('PersonNew', {})
+                      : push('Record', {})
+                  }
+                >
+                  {persons.length === 0 ? '＋ 사람 추가' : '기록 작성'}
+                </Button>
+              </div>
+            ) : (
+              <TimelineFeed
+                scrollRootRef={scrollRef}
+                items={cards}
+                renderCard={(card) => (
+                  <TimelineEventCard item={fromTimelineCard(card)} />
+                )}
+              />
+            )}
           </div>
         </div>
-
-        {filteredTimelineQuery.isPending ? (
-          <p className="py-12 text-center text-sm text-muted-foreground">
-            타임라인을 불러오는 중…
-          </p>
-        ) : filteredTimelineQuery.isError ? (
-          <p className="py-12 text-center text-sm text-destructive">
-            타임라인을 불러오지 못했어요.
-          </p>
-        ) : cards.length === 0 ? (
-          <div className="py-12 text-center">
-            <p className="text-sm text-muted-foreground">
-              {hasFilter
-                ? '이 조건에 맞는 기록이 없어요.'
-                : persons.length === 0
-                  ? '먼저 함께한 사람을 추가해 주세요.'
-                  : '아직 함께한 기록이 없어요. 첫 순간을 새겨보세요.'}
-            </p>
-            <Button
-              className="mt-4"
-              variant="outline"
-              onClick={() =>
-                persons.length === 0
-                  ? push('PersonNew', {})
-                  : push('Record', {})
-              }
-            >
-              {persons.length === 0 ? '＋ 사람 추가' : '기록 작성'}
-            </Button>
-          </div>
-        ) : (
-          <TimelineFeed
-            scrollRootRef={scrollRef}
-            items={cards}
-            renderCard={(card) => (
-              <TimelineEventCard item={fromTimelineCard(card)} />
-            )}
-          />
-        )}
       </TimelineScrollShell>
     </TabShell>
   )
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 2952566..8722685 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -141,6 +141,12 @@
     scrollbar-color: oklch(0.78 0 0 / 0.45) transparent;
   }
 
+  @media (min-width: 64rem) {
+    body {
+      @apply bg-muted/30;
+    }
+  }
+
   * {
     scrollbar-width: thin;
     scrollbar-color: oklch(0.78 0 0 / 0.4) transparent;