diff --git a/ledger/static/ledger/record.css b/ledger/static/ledger/css/record.css
similarity index 90%
rename from ledger/static/ledger/record.css
rename to ledger/static/ledger/css/record.css
index 1bcc8a5..6c5fc74 100644
--- a/ledger/static/ledger/record.css
+++ b/ledger/static/ledger/css/record.css
@@ -47,30 +47,30 @@
   box-sizing: border-box;
 }
 
-body.ledger-page {
-  margin: 0;
-  background: var(--bg);
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
+.ledger-screen {
+  width: 100%;
   color: var(--text-main);
   display: flex;
-  justify-content: center;
-}
+  flex-direction: column;
+  flex: 1;
 
-.ledger-screen {
-  width: 100%;
-  max-width: 420px;
-  min-height: 100vh;
-  background: var(--card-bg);
-  border-left: 1px solid var(--border);
-  border-right: 1px solid var(--border);
-  padding: 20px 20px 32px;
 }
 
 .ledger-topbar {
   display: flex;
   align-items: center;
-  gap: 12px;
+  justify-content: space-between;
   margin-bottom: 20px;
+  padding-top: 30px;
+  position: relative;
+}
+
+.ledger-title {
+  font-size: var(--fs-md);
+  font-weight: 700;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .ledger-back {
@@ -208,18 +208,19 @@ body.ledger-page {
 .timer-circle-wrap {
   display: flex;
   justify-content: center;
-  margin-bottom: 28px;
+  margin-bottom: 20px;
 }
 
 .timer-circle {
-  width: 200px;
-  height: 200px;
+  width: 170px;
+  height: 170px;
   border-radius: 50%;
   border: 2px solid var(--border);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
 }
 
 .timer-circle-time {
@@ -241,6 +242,17 @@ body.ledger-page {
   margin-top: 12px;
 }
 
+#earn-form {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+#result-panel {
+  flex-direction: column;
+  flex: 1;
+}
+
 .btn {
   flex: 1;
   padding: 15px 0;
@@ -302,15 +314,6 @@ body.ledger-page {
 }
 .manual-time-field input:focus { outline: none; }
 
-.earn-preview {
-  background: var(--earn-bg);
-  color: var(--earn-accent-dark);
-  border-radius: var(--radius-sm);
-  padding: 10px 12px;
-  font-size: var(--fs-sm);
-  font-weight: 600;
-  margin-bottom: 20px;
-}
 
 /* 적립 결과 카드 (수입 종료 후 적립 화면) */
 .result-summary {
@@ -344,6 +347,10 @@ body.ledger-page {
   margin-bottom: 12px;
 }
 
+.field-block + .footer-actions {
+    margin-top: 70px;
+}
+
 .field-label {
   font-size: var(--fs-sm);
   color: var(--text-sub);
@@ -351,26 +358,35 @@ body.ledger-page {
   display: block;
 }
 
-.toggle-pair {
+.field-block--readonly {
+  background: var(--bg); /* 카드 배경과 살짝 다르게 -> "조작 불가 영역"이라는 시각적 힌트 */
+}
+
+.readonly-badge-row {
   display: flex;
   gap: 8px;
 }
 
-.toggle-pill {
+.readonly-badge {
   flex: 1;
   text-align: center;
   padding: 8px 0;
   border-radius: 999px;
   font-size: var(--fs-sm);
-  font-weight: 700;
-  border: 1px solid var(--border);
-  color: var(--text-sub);
+  font-weight: 600;
+  border: 1px solid var(--text-faint);
+  color: var(--text-faint);
+  background: transparent;
+  /* 버튼처럼 안 보이게: 그림자·hover·cursor 전부 제거 */
+  cursor: default;
+  user-select: none;
 }
 
-.toggle-pill.is-selected {
+.readonly-badge.is-selected {
   background: var(--earn-accent);
   border-color: var(--earn-accent);
   color: #fff;
+  font-weight: 700;
 }
 
 .field-note {
diff --git a/ledger/templates/ledger/earn_record_form.html b/ledger/templates/ledger/earn_record_form.html
index 2a095f8..13eb775 100644
--- a/ledger/templates/ledger/earn_record_form.html
+++ b/ledger/templates/ledger/earn_record_form.html
@@ -1,3 +1,4 @@
+{% extends "base.html" %}
 {% comment %}
 와이어프레임 3장(수입기록-타이머 / 수입기록-수동입력 / 수입 종료 후 적립) 통합 화면
 동작 방식 (views.py earn_record_create 기준):
@@ -7,267 +8,274 @@
 
 주의: activity <option>에 data-rate 속성을 심어서, JS에서 "예상 적립 분" 미리보기를 계산함.
     이건 화면 미리보기용이고, 실제 earn_min은 forms.py save()의 calculate_earn_minutes()가 계산함.
+
+[디자인 피드백 반영 - 8/5]
+    - 수동입력의 별도 미리보기 배너(.earn-preview)를 없애고 result-panel 하나로 통일 (중복 정보 제거)
+    - 인증 방식(.toggle-pill)은 사용자가 못 바꾸는 값이라 버튼처럼 안 보이게 읽기전용 스타일로 변경
+    - "인증 사진"/"인증 사진 URL" 라벨 중복 -> 필드가 photo_url 하나뿐이라 라벨 하나로 통일
+
+프레임(크기·배경·중앙정렬)은 base.html + common.css가 담당하므로
+    이 파일엔 <html>/<head>/<body> 없이 content 블록만 채움.
+    (기존엔 extends 하면서 <html> 전체도 같이 남아있던 버그가 있었음 - 제거함)
 {% endcomment %}
 {% load static %}
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>도파민 알바 - 도파민 가계부</title>
-    <link rel="stylesheet" href="{% static 'ledger/record.css' %}">
-</head>
-<body class="ledger-page">
-    <main class="ledger-screen">
-        <div class="ledger-topbar">
-            <a href="javascript:history.back()" class="ledger-back" aria-label="뒤로가기">&lsaquo;</a>
-            <span class="ledger-title">도파민 알바</span>
-        </div>
 
-        <form method="post" action="{% url 'ledger:earn_record_create' %}" id="earn-form">
-            {% csrf_token %}
+{% block title %}도파민 알바 - 도파민 가계부{% endblock %}
 
-            {% if form.non_field_errors %}
-                <ul class="form-errors">
-                    {% for error in form.non_field_errors %}
-                        <li>{{ error }}</li>
-                    {% endfor %}
-                </ul>
-            {% endif %}
+{% block extra_css %}
+    <link rel="stylesheet" href="{% static 'ledger/css/record.css' %}">
+{% endblock %}
+
+{% block content %}
+<div class="ledger-screen">
+    <div class="ledger-topbar">
+        <a href="javascript:history.back()" class="ledger-back" aria-label="뒤로가기">&lsaquo;</a>
+        <span class="ledger-title">도파민 알바</span>
+    </div>
 
-            {# entry_mode: 사용자가 조작 못 함. URL(mode 파라미터)에서 뷰가 initial로 내려준 값을 그대로 hidden 전송 #}
-            <input type="hidden" name="entry_mode" id="id_entry_mode" value="{{ form.entry_mode.value|default:'timer' }}">
+    <form method="post" action="{% url 'ledger:earn_record_create' %}" id="earn-form">
+        {% csrf_token %}
 
-            <!-- 활동 종류 탭: 유저 소유 활동만 노출 (forms.py __init__에서 이미 필터링된 쿼리셋) -->
-            <div class="activity-tabs" role="tablist" aria-label="활동 종류 선택">
-                {% for choice in form.activity.field.queryset %}
-                    <button type="button"
-                            class="activity-tab {% if forloop.first %}is-active{% endif %}"
-                            data-activity-id="{{ choice.id }}"
-                            data-rate="{{ choice.rate }}"
-                            role="tab">
-                        {{ choice.activity_type }}
-                    </button>
-                {% empty %}
-                    <p class="field-note">등록된 활동이 없어요. 설정에서 먼저 활동을 추가해주세요.</p>
+        {% if form.non_field_errors %}
+            <ul class="form-errors">
+                {% for error in form.non_field_errors %}
+                    <li>{{ error }}</li>
                 {% endfor %}
-            </div>
-            {# 실제 전송되는 select는 화면에서 숨기고 탭 클릭으로만 조작 (name은 forms.py Meta.fields의 'activity') #}
-            <select name="activity" id="id_activity" style="display:none;">
-                {% for choice in form.activity.field.queryset %}
-                    <option value="{{ choice.id }}">{{ choice.activity_type }}</option>
+            </ul>
+        {% endif %}
+
+        {# entry_mode: 사용자가 조작 못 함. URL(mode 파라미터)에서 뷰가 initial로 내려준 값을 그대로 hidden 전송 #}
+        <input type="hidden" name="entry_mode" id="id_entry_mode" value="{{ form.entry_mode.value|default:'timer' }}">
+
+        <!-- 활동 종류 탭: 유저 소유 활동만 노출 (forms.py __init__에서 이미 필터링된 쿼리셋) -->
+        <div class="activity-tabs" role="tablist" aria-label="활동 종류 선택">
+            {% for choice in form.activity.field.queryset %}
+                <button type="button"
+                        class="activity-tab {% if forloop.first %}is-active{% endif %}"
+                        data-activity-id="{{ choice.id }}"
+                        data-rate="{{ choice.rate }}"
+                        role="tab">
+                    {{ choice.activity_type }}
+                </button>
+            {% empty %}
+                <p class="field-note">등록된 활동이 없어요. 설정에서 먼저 활동을 추가해주세요.</p>
+            {% endfor %}
+        </div>
+        {# 실제 전송되는 select는 화면에서 숨기고 탭 클릭으로만 조작 (name은 forms.py Meta.fields의 'activity') #}
+        <select name="activity" id="id_activity" style="display:none;">
+            {% for choice in form.activity.field.queryset %}
+                <option value="{{ choice.id }}">{{ choice.activity_type }}</option>
+            {% endfor %}
+        </select>
+        {% if form.activity.errors %}
+            <ul class="form-errors">
+                {% for error in form.activity.errors %}
+                    <li>{{ error }}</li>
                 {% endfor %}
-            </select>
-            {% if form.activity.errors %}
+            </ul>
+        {% endif %}
+
+        <!-- ============ 타이머 모드 ============ -->
+        <div id="timer-mode-panel" style="display:none;">
+            <div class="timer-circle-wrap">
+                <div class="timer-circle">
+                    <span class="timer-circle-time" id="timer-display">00:00</span>
+                    <span class="timer-circle-caption">시작을 눌러주세요</span>
+                </div>
+            </div>
+            <div class="button-row">
+                <button type="button" class="btn btn-ghost" id="timer-start-btn">시작</button>
+                <button type="button" class="btn btn-primary-earn" id="timer-stop-btn" disabled>종료</button>
+            </div>
+            <p class="time-caption" style="margin-top:12px;">시간을 직접 입력하려면 <a href="?mode=manual">여기</a></p>
+
+            {# 타이머로 계산된 시작/종료 시각이 여기에 JS로 채워짐 (forms.py timer_start/timer_end) #}
+            <input type="hidden" name="timer_start" id="id_timer_start">
+            <input type="hidden" name="timer_end" id="id_timer_end">
+        </div>
+
+        <!-- ============ 수동입력 모드 ============ -->
+        <div id="manual-mode-panel" style="display:none;">
+            <p class="manual-form-title">직접입력</p>
+            <div class="manual-time-row">
+                <div class="manual-time-field">
+                    <label for="id_hours">시간</label>
+                    <input type="number" name="hours" id="id_hours" min="0" max="23"
+                           value="{{ form.hours.value|default:'0' }}" inputmode="numeric">
+                </div>
+                <div class="manual-time-field">
+                    <label for="id_minutes">분</label>
+                    <input type="number" name="minutes" id="id_minutes" min="0" max="59"
+                           value="{{ form.minutes.value|default:'30' }}" inputmode="numeric">
+                </div>
+            </div>
+            {% if form.hours.errors or form.minutes.errors %}
                 <ul class="form-errors">
-                    {% for error in form.activity.errors %}
+                    {% for error in form.hours.errors %}
+                        <li>{{ error }}</li>
+                    {% endfor %}
+                    {% for error in form.minutes.errors %}
                         <li>{{ error }}</li>
                     {% endfor %}
                 </ul>
             {% endif %}
+            {# earn-preview 배너 삭제: result-panel이 같은 정보(적립 예정 분)를 이미 보여줘서 중복이었음 #}
+        </div>
 
-            <!-- ============ 타이머 모드 ============ -->
-            <div id="timer-mode-panel" style="display:none;">
-                <div class="timer-circle-wrap">
-                    <div class="timer-circle">
-                        <span class="timer-circle-time" id="timer-display">00:00</span>
-                        <span class="timer-circle-caption">시작을 눌러주세요</span>
-                    </div>
-                </div>
-                <div class="button-row">
-                    <button type="button" class="btn btn-ghost" id="timer-start-btn">시작</button>
-                    <button type="button" class="btn btn-primary-earn" id="timer-stop-btn" disabled>종료</button>
-                </div>
-                <p class="time-caption" style="margin-top:16px;">시간을 직접 입력하려면 <a href="?mode=manual">여기</a></p>
-
-                {# 타이머로 계산된 시작/종료 시각이 여기에 JS로 채워짐 (forms.py timer_start/timer_end) #}
-                <input type="hidden" name="timer_start" id="id_timer_start">
-                <input type="hidden" name="timer_end" id="id_timer_end">
+        <!-- ============ 공통: 종료 후 적립 확인 영역 ============ -->
+        <div id="result-panel" style="display:none;">
+            <div class="result-summary">
+                <div class="result-activity" id="result-activity-name">활동</div>
+                <div class="result-duration" id="result-duration">0분</div>
+                <div class="result-rate-note" id="result-rate-note">환율 -분/시간 기준</div>
             </div>
 
-            <!-- ============ 수동입력 모드 ============ -->
-            <div id="manual-mode-panel" style="display:none;">
-                <p class="manual-form-title">직접입력</p>
-                <div class="manual-time-row">
-                    <div class="manual-time-field">
-                        <label for="id_hours">시간</label>
-                        <input type="number" name="hours" id="id_hours" min="0" max="23"
-                               value="{{ form.hours.value|default:'0' }}" inputmode="numeric">
-                    </div>
-                    <div class="manual-time-field">
-                        <label for="id_minutes">분</label>
-                        <input type="number" name="minutes" id="id_minutes" min="0" max="59"
-                               value="{{ form.minutes.value|default:'30' }}" inputmode="numeric">
-                    </div>
+            {# 인증 방식: 사용자가 못 바꾸는 값 -> 버튼처럼 안 보이게 읽기전용 뱃지 스타일로 변경 #}
+            <div class="field-block field-block--readonly">
+                <span class="field-label">인증 방식</span>
+                <div class="readonly-badge-row">
+                    <span class="readonly-badge" id="pill-timer">타이머</span>
+                    <span class="readonly-badge" id="pill-manual">수동입력</span>
                 </div>
-                {% if form.hours.errors or form.minutes.errors %}
-                    <ul class="form-errors">
-                        {% for error in form.hours.errors %}
-                            <li>{{ error }}</li>
-                        {% endfor %}
-                        {% for error in form.minutes.errors %}
-                            <li>{{ error }}</li>
-                        {% endfor %}
-                    </ul>
-                {% endif %}
-
-                <!-- 실시간 미리보기: "+운동 25분 적립 예정" (클라이언트 계산, 실제 값은 서버가 재계산) -->
-                <div class="earn-preview" id="manual-preview">+ 0분 적립 예정</div>
+                <p class="field-note">입력 경로에 따라 자동으로 기록돼요 (변경 불가)</p>
             </div>
 
-            <!-- ============ 공통: 종료 후 적립 확인 영역 ============ -->
-            <div id="result-panel" style="display:none;">
-                <div class="result-summary">
-                    <div class="result-activity" id="result-activity-name">활동</div>
-                    <div class="result-duration" id="result-duration">0분</div>
-                    <div class="result-rate-note" id="result-rate-note">환율 -분/시간 기준</div>
-                </div>
-
-                <div class="field-block">
-                    <span class="field-label">인증 방식</span>
-                    <div class="toggle-pair">
-                        <span class="toggle-pill" id="pill-timer">타이머</span>
-                        <span class="toggle-pill" id="pill-manual">수동입력</span>
-                    </div>
-                    <p class="field-note">타이머/수동 중 실제 입력 경로에 따라 자동으로 선택돼요 (변경 불가)</p>
-                </div>
-
-                <div class="field-block">
-                    <span class="field-label">인증 사진 (선택)</span>
-                    <input type="url" name="photo_url" id="id_photo_url" class="photo-upload-input"
-                           placeholder="인증 사진 URL (선택)" value="{{ form.photo_url.value|default:'' }}">
-                    {% if form.photo_url.errors %}
-                        <p class="field-note" style="color:var(--warning-text);">{{ form.photo_url.errors.0 }}</p>
-                    {% endif %}
-                </div>
+            {# photo_url 필드 하나뿐이라 라벨도 하나로 통일 #}
+            <div class="field-block">
+                <span class="field-label">인증 사진 URL (선택)</span>
+                <input type="url" name="photo_url" id="id_photo_url" class="photo-upload-input"
+                       placeholder="https://..." value="{{ form.photo_url.value|default:'' }}">
+                {% if form.photo_url.errors %}
+                    <p class="field-note" style="color:var(--warning-text);">{{ form.photo_url.errors.0 }}</p>
+                {% endif %}
+            </div>
 
-                <div class="button-row" style="margin-top: 24px;">
+            <div class="footer-actions">
+                <div class="button-row" style="margin-top: 20px;">
                     <button type="submit" class="btn btn-primary-earn" id="submit-btn">적립하기</button>
                 </div>
                 <div class="button-row">
                     <a href="{% url 'ledger:record_choice' %}" class="btn btn-ghost" style="text-decoration:none;">기록 취소</a>
                 </div>
             </div>
-        </form>
-    </main>
+        </div>
+    </form>
+</div>
+{% endblock %}
+{% block nav %}{% endblock %}
+{% block extra_js %}
+<script>
+    /*
+        화면 흐름 제어 스크립트.
+        1) entry_mode(hidden input)에 따라 타이머 패널 / 수동입력 패널 중 하나만 노출
+        2) 활동 탭 클릭 -> 숨겨진 select(id_activity) 값 동기화 + rate 저장
+        3) 타이머: 시작 누르면 현재 시각 기록 + 1초마다 화면 갱신, 종료 누르면 종료 시각 기록 후 result-panel 노출
+        4) 수동입력: 시/분 바뀔 때마다 result-panel 갱신 (별도 미리보기 배너는 제거됨)
+    */
+    (function () {
+        const entryMode = document.getElementById('id_entry_mode').value;
+        const timerPanel = document.getElementById('timer-mode-panel');
+        const manualPanel = document.getElementById('manual-mode-panel');
+        const resultPanel = document.getElementById('result-panel');
 
-    <script>
-        /*
-            화면 흐름 제어 스크립트.
-            1) entry_mode(hidden input)에 따라 타이머 패널 / 수동입력 패널 중 하나만 노출
-            2) 활동 탭 클릭 -> 숨겨진 select(id_activity) 값 동기화 + rate 저장
-            3) 타이머: 시작 누르면 현재 시각 기록 + 1초마다 화면 갱신, 종료 누르면 종료 시각 기록 후 result-panel 노출
-            4) 수동입력: 시/분 바뀔 때마다 "+N분 적립 예정" 미리보기 갱신, 값 있으면 result-panel도 같이 갱신
-        */
-        (function () {
-            const entryMode = document.getElementById('id_entry_mode').value;
-            const timerPanel = document.getElementById('timer-mode-panel');
-            const manualPanel = document.getElementById('manual-mode-panel');
-            const resultPanel = document.getElementById('result-panel');
+        const tabs = document.querySelectorAll('.activity-tab');
+        const activitySelect = document.getElementById('id_activity');
+        let currentRate = tabs.length ? parseFloat(tabs[0].dataset.rate) : 0;
+        let currentActivityName = tabs.length ? tabs[0].textContent.trim() : '활동';
 
-            const tabs = document.querySelectorAll('.activity-tab');
-            const activitySelect = document.getElementById('id_activity');
-            let currentRate = tabs.length ? parseFloat(tabs[0].dataset.rate) : 0;
-            let currentActivityName = tabs.length ? tabs[0].textContent.trim() : '활동';
+        function selectActivity(tabEl) {
+            tabs.forEach((t) => t.classList.remove('is-active'));
+            tabEl.classList.add('is-active');
+            activitySelect.value = tabEl.dataset.activityId;
+            currentRate = parseFloat(tabEl.dataset.rate);
+            currentActivityName = tabEl.textContent.trim();
+            document.getElementById('result-activity-name').textContent = currentActivityName;
+        }
 
-            function selectActivity(tabEl) {
-                tabs.forEach((t) => t.classList.remove('is-active'));
-                tabEl.classList.add('is-active');
-                activitySelect.value = tabEl.dataset.activityId;
-                currentRate = parseFloat(tabEl.dataset.rate);
-                currentActivityName = tabEl.textContent.trim();
-                document.getElementById('result-activity-name').textContent = currentActivityName;
-            }
+        tabs.forEach((tab) => {
+            tab.addEventListener('click', () => selectActivity(tab));
+        });
 
-            tabs.forEach((tab) => {
-                tab.addEventListener('click', () => selectActivity(tab));
-            });
+        // ---- 결과 요약 갱신 (분 단위, rate는 "1시간당 N분" 표기로 환산해서 보여줌) ----
+        function updateResultPanel(durationMin) {
+            const earnMin = Math.round(durationMin * currentRate * 100) / 100;
+            document.getElementById('result-duration').textContent = durationMin + '분';
+            document.getElementById('result-rate-note').innerHTML =
+                '환율 ' + Math.round(currentRate * 60) + '분/시간 기준 · <strong>+' + earnMin + '분 적립</strong>';
+            resultPanel.style.display = 'block';
+        }
+
+        // ---- 타이머 모드 ----
+        if (entryMode === 'timer') {
+            timerPanel.style.display = 'block';
+            const startBtn = document.getElementById('timer-start-btn');
+            const stopBtn = document.getElementById('timer-stop-btn');
+            const display = document.getElementById('timer-display');
+            let startTime = null;
+            let tickHandle = null;
 
-            // ---- 결과 요약 갱신 (분 단위, rate는 "1시간당 N분" 표기로 환산해서 보여줌) ----
-            function updateResultPanel(durationMin) {
-                const earnMin = Math.round(durationMin * currentRate * 100) / 100;
-                document.getElementById('result-duration').textContent = durationMin + '분';
-                document.getElementById('result-rate-note').innerHTML =
-                    '환율 ' + Math.round(currentRate * 60) + '분/시간 기준 · <strong>+' + earnMin + '분 적립</strong>';
-                resultPanel.style.display = 'block';
+            function formatMMSS(totalSeconds) {
+                // 1시간(3600초) 넘어가면 h:mm:ss 형태로, 아니면 기존처럼 mm:ss로 표시
+                const h = Math.floor(totalSeconds / 3600);
+                const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
+                const s = String(totalSeconds % 60).padStart(2, '0');
+                return h > 0 ? `${h}:${m}:${s}` : `${m}:${s}`;
             }
 
-            // ---- 타이머 모드 ----
-            if (entryMode === 'timer') {
-                timerPanel.style.display = 'block';
-                const startBtn = document.getElementById('timer-start-btn');
-                const stopBtn = document.getElementById('timer-stop-btn');
-                const display = document.getElementById('timer-display');
-                let startTime = null;
-                let tickHandle = null;
+            startBtn.addEventListener('click', () => {
+                startTime = new Date();
+                document.getElementById('id_timer_start').value = startTime.toISOString();
+                startBtn.disabled = true;
+                stopBtn.disabled = false;
+                document.querySelector('.timer-circle-caption').textContent = '측정 중...';
+                tickHandle = setInterval(() => {
+                    const elapsed = Math.floor((new Date() - startTime) / 1000);
+                    display.textContent = formatMMSS(elapsed);
+                }, 1000);
+            });
 
-                function formatMMSS(totalSeconds) {
-                    // 1시간(3600초) 넘어가면 h:mm:ss 형태로, 아니면 기존처럼 mm:ss로 표시
-                    const h = Math.floor(totalSeconds / 3600);
-                    const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
-                    const s = String(totalSeconds % 60).padStart(2, '0');
-                    return h > 0 ? `${h}:${m}:${s}` : `${m}:${s}`;
-                }
+            stopBtn.addEventListener('click', () => {
+                clearInterval(tickHandle);
+                const endTime = new Date();
+                document.getElementById('id_timer_end').value = endTime.toISOString();
+                const durationMin = Math.round((endTime - startTime) / 60000);
+                stopBtn.disabled = true;
+                updateResultPanel(durationMin);
+                document.getElementById('pill-timer').classList.add('is-selected');
+            });
+        }
 
-                startBtn.addEventListener('click', () => {
-                    startTime = new Date();
-                    document.getElementById('id_timer_start').value = startTime.toISOString();
-                    startBtn.disabled = true;
-                    stopBtn.disabled = false;
-                    document.querySelector('.timer-circle-caption').textContent = '측정 중...';
-                    tickHandle = setInterval(() => {
-                        const elapsed = Math.floor((new Date() - startTime) / 1000);
-                        display.textContent = formatMMSS(elapsed);
-                    }, 1000);
-                });
+        // ---- 수동입력 모드 ----
+        if (entryMode === 'manual') {
+            manualPanel.style.display = 'block';
+            const hoursInput = document.getElementById('id_hours');
+            const minutesInput = document.getElementById('id_minutes');
 
-                stopBtn.addEventListener('click', () => {
-                    clearInterval(tickHandle);
-                    const endTime = new Date();
-                    document.getElementById('id_timer_end').value = endTime.toISOString();
-                    const durationMin = Math.round((endTime - startTime) / 60000);
-                    // 시작/종료 버튼 다시 초기화(재기록 방지 위해 시작 비활성 유지)
-                    stopBtn.disabled = true;
+            function updatePreview() {
+                const h = parseInt(hoursInput.value, 10) || 0;
+                const m = parseInt(minutesInput.value, 10) || 0;
+                const durationMin = h * 60 + m;
+                if (durationMin > 0) {
                     updateResultPanel(durationMin);
-                    document.getElementById('pill-timer').classList.add('is-selected');
-                });
+                } else {
+                    resultPanel.style.display = 'none';
+                }
             }
 
-            // ---- 수동입력 모드 ----
-            if (entryMode === 'manual') {
-                manualPanel.style.display = 'block';
-                const hoursInput = document.getElementById('id_hours');
-                const minutesInput = document.getElementById('id_minutes');
-                const preview = document.getElementById('manual-preview');
+            hoursInput.addEventListener('input', updatePreview);
+            minutesInput.addEventListener('input', updatePreview);
+            document.getElementById('pill-manual').classList.add('is-selected');
+            updatePreview();
+        }
 
-                function updatePreview() {
-                    const h = parseInt(hoursInput.value, 10) || 0;
-                    const m = parseInt(minutesInput.value, 10) || 0;
-                    const durationMin = h * 60 + m;
-                    const earnMin = Math.round(durationMin * currentRate * 100) / 100;
-                    preview.textContent = '+ ' + currentActivityName + ' ' + earnMin + '분 적립 예정';
-                    if (durationMin > 0) {
-                        updateResultPanel(durationMin);
-                    } else {
-                        resultPanel.style.display = 'none';
-                    }
+        // 활동 탭을 나중에 바꾸면 진행 중이던 미리보기도 다시 계산
+        tabs.forEach((tab) => {
+            tab.addEventListener('click', () => {
+                if (entryMode === 'manual') {
+                    document.getElementById('id_hours').dispatchEvent(new Event('input'));
                 }
-
-                hoursInput.addEventListener('input', updatePreview);
-                minutesInput.addEventListener('input', updatePreview);
-                document.getElementById('pill-manual').classList.add('is-selected');
-                updatePreview();
-            }
-
-            // 활동 탭을 나중에 바꾸면 진행 중이던 미리보기도 다시 계산
-            tabs.forEach((tab) => {
-                tab.addEventListener('click', () => {
-                    if (entryMode === 'manual') {
-                        document.getElementById('id_hours').dispatchEvent(new Event('input'));
-                    }
-                });
             });
-        })();
-    </script>
-</body>
-</html>
\ No newline at end of file
+        });
+    })();
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/ledger/templates/ledger/record_choice.html b/ledger/templates/ledger/record_choice.html
index b67621c..bc3eb6c 100644
--- a/ledger/templates/ledger/record_choice.html
+++ b/ledger/templates/ledger/record_choice.html
@@ -1,41 +1,44 @@
+{% extends "base.html" %}
 {% comment %}
 와이어프레임 "기록하기-지출/수입 선택 시트" 기준 화면.
 - 별도 폼 없이 링크 두 개만 있는 단순 진입 화면.
 - '지출' 클릭 시 spend_record_create(뷰)로, '수입' 클릭 시 earn_record_create(뷰)로 이동.
 - URL name은 프로젝트 urls.py 컨벤션(ledger:xxx)에 맞춰뒀으니 실제 이름 다르면 바꿔줘야 함.
+
+프레임(크기·배경·중앙정렬)은 base.html + common.css가 담당하므로
+    이 파일엔 <html>/<head>/<body> 없이 content 블록만 채움.
 {% endcomment %}
 {% load static %}
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>무엇을 기록할까요? - 도파민 가계부</title>
-    <link rel="stylesheet" href="{% static 'ledger/record.css' %}">
-</head>
-<body class="ledger-page">
-    <main class="ledger-screen">
-        <div class="ledger-topbar">
-            <a href="javascript:history.back()" class="ledger-back" aria-label="뒤로가기">&lsaquo;</a>
-        </div>
 
-        <h1 class="ledger-heading">무엇을 기록할까요?</h1>
+{% block title %}무엇을 기록할까요? - 도파민 가계부{% endblock %}
+
+{% block extra_css %}
+    <link rel="stylesheet" href="{% static 'ledger/css/record.css' %}">
+{% endblock %}
+
+{% block content %}
+<div class="ledger-screen">
+    <div class="ledger-topbar">
+        <a href="javascript:history.back()" class="ledger-back" aria-label="뒤로가기">&lsaquo;</a>
+    </div>
+
+    <h1 class="ledger-heading">무엇을 기록할까요?</h1>
 
-        <div class="choice-grid">
-            <!-- 지출: 숏폼 사용 시간 기록 -->
-            <a href="{% url 'ledger:spend_record_create' %}" class="choice-card is-spend">
-                <div class="choice-icon" aria-hidden="true">📱</div>
-                <div class="choice-label">지출</div>
-                <div class="choice-sub">숏폼</div>
-            </a>
+    <div class="choice-grid">
+        <!-- 지출: 숏폼 사용 시간 기록 -->
+        <a href="{% url 'ledger:spend_record_create' %}" class="choice-card is-spend">
+            <div class="choice-icon" aria-hidden="true">📱</div>
+            <div class="choice-label">지출</div>
+            <div class="choice-sub">숏폼</div>
+        </a>
 
-            <!-- 수입: 오프라인 활동(독서/운동/산책 등) 기록 -->
-            <a href="{% url 'ledger:earn_record_create' %}?mode=timer" class="choice-card is-earn">
-                <div class="choice-icon" aria-hidden="true">📖</div>
-                <div class="choice-label">수입</div>
-                <div class="choice-sub">독서 · 운동 · 산책</div>
-            </a>
-        </div>
-    </main>
-</body>
-</html>
\ No newline at end of file
+        <!-- 수입: 오프라인 활동(독서/운동/산책 등) 기록 -->
+        <a href="{% url 'ledger:earn_record_create' %}?mode=timer" class="choice-card is-earn">
+            <div class="choice-icon" aria-hidden="true">📖</div>
+            <div class="choice-label">수입</div>
+            <div class="choice-sub">독서 · 운동 · 산책</div>
+        </a>
+    </div>
+</div>
+{% endblock %}
+{% block nav %}{% endblock %}
\ No newline at end of file
diff --git a/ledger/templates/ledger/spend_record_form.html b/ledger/templates/ledger/spend_record_form.html
index 22940e0..da3c6c3 100644
--- a/ledger/templates/ledger/spend_record_form.html
+++ b/ledger/templates/ledger/spend_record_form.html
@@ -1,3 +1,4 @@
+{% extends "base.html" %}
 {% comment %}
 와이어프레임 "(MVP) 지출 선택 화면" 기준
 SpendRecordForm 필드 대응:
@@ -7,93 +8,97 @@
 
 주의: forms.CATEGORY_CHOICES의 첫 번째 값('short_form')과 아래 hidden input value가
 일치해야 함. 카테고리가 늘어나면 이 화면도 선택 UI로 바꿔야 함.
+
+프레임(크기·배경·중앙정렬)은 base.html + common.css가 담당하므로
+    이 파일엔 <html>/<head>/<body> 없이 content 블록만 채움.
 {% endcomment %}
 {% load static %}
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>숏폼 지출 기록 - 도파민 가계부</title>
-    <link rel="stylesheet" href="{% static 'ledger/record.css' %}">
-</head>
-<body class="ledger-page">
-    <main class="ledger-screen">
-        <div class="ledger-topbar">
-            <a href="javascript:history.back()" class="ledger-back" aria-label="뒤로가기">&lsaquo;</a>
-            <span class="ledger-title">숏폼 지출 기록</span>
-        </div>
 
-        {# 잔액 0 이하일 때 뷰에서 context로 내려주는 플래그 #}
-        {% if budget_exhausted %}
-            <div class="budget-warning">⚠ 이번 주 예산을 다 썼어요</div>
-        {% endif %}
+{% block title %}숏폼 지출 기록 - 도파민 가계부{% endblock %}
 
-        <form method="post" action="{% url 'ledger:spend_record_create' %}" id="spend-form">
-            {% csrf_token %}
+{% block extra_css %}
+    <link rel="stylesheet" href="{% static 'ledger/css/record.css' %}">
+{% endblock %}
 
-            {# Django 폼 전체 에러(clean()에서 던지는 ValidationError 등) #}
-            {% if form.non_field_errors %}
-                <ul class="form-errors">
-                    {% for error in form.non_field_errors %}
-                        <li>{{ error }}</li>
-                    {% endfor %}
-                </ul>
-            {% endif %}
+{% block content %}
+<div class="ledger-screen">
+    <div class="ledger-topbar">
+        <a href="javascript:history.back()" class="ledger-back" aria-label="뒤로가기">&lsaquo;</a>
+        <span class="ledger-title">숏폼 지출 기록</span>
+    </div>
 
-            {# MVP: 카테고리는 숏폼 고정. 실제 select UI 없이 hidden으로만 전송 #}
-            <input type="hidden" name="category" value="short_form">
+    {# 잔액 0 이하일 때 뷰에서 context로 내려주는 플래그 #}
+    {% if budget_exhausted %}
+        <div class="budget-warning">⚠ 이번 주 예산을 다 썼어요</div>
+    {% endif %}
 
-            <div class="time-display">
-                <div class="time-display-inputs">
-                    {# name 속성이 forms.py의 hours/minutes와 정확히 일치해야 폼이 파싱함 #}
-                    <input type="number" name="hours" id="id_hours" min="0" max="23"
-                           value="{{ form.hours.value|default:'00' }}" inputmode="numeric" aria-label="시간">
-                    <span class="colon">:</span>
-                    <input type="number" name="minutes" id="id_minutes" min="0" max="59"
-                           value="{{ form.minutes.value|default:'30' }}" inputmode="numeric" aria-label="분">
-                </div>
-            </div>
+    <form method="post" action="{% url 'ledger:spend_record_create' %}" id="spend-form">
+        {% csrf_token %}
+
+        {# Django 폼 전체 에러(clean()에서 던지는 ValidationError 등) #}
+        {% if form.non_field_errors %}
+            <ul class="form-errors">
+                {% for error in form.non_field_errors %}
+                    <li>{{ error }}</li>
+                {% endfor %}
+            </ul>
+        {% endif %}
 
-            <p class="time-caption">
-                = 잔여 시간에서 <strong id="duration-caption">30분</strong> 차감
-            </p>
+        {# MVP: 카테고리는 숏폼 고정. 실제 select UI 없이 hidden으로만 전송 #}
+        <input type="hidden" name="category" value="short_form">
 
-            {% if form.hours.errors or form.minutes.errors %}
-                <ul class="form-errors">
-                    {% for error in form.hours.errors %}<li>{{ error }}</li>{% endfor %}
-                    {% for error in form.minutes.errors %}<li>{{ error }}</li>{% endfor %}
-                </ul>
-            {% endif %}
+        <div class="time-display">
+            <div class="time-display-inputs">
+                {# name 속성이 forms.py의 hours/minutes와 정확히 일치해야 폼이 파싱함 #}
+                <input type="number" name="hours" id="id_hours" min="0" max="23"
+                       value="{{ form.hours.value|default:'00' }}" inputmode="numeric" aria-label="시간">
+                <span class="colon">:</span>
+                <input type="number" name="minutes" id="id_minutes" min="0" max="59"
+                       value="{{ form.minutes.value|default:'30' }}" inputmode="numeric" aria-label="분">
+            </div>
+        </div>
+
+        <p class="time-caption">
+            = 잔여 시간에서 <strong id="duration-caption">30분</strong> 차감
+        </p>
 
+        {% if form.hours.errors or form.minutes.errors %}
+            <ul class="form-errors">
+                {% for error in form.hours.errors %}<li>{{ error }}</li>{% endfor %}
+                {% for error in form.minutes.errors %}<li>{{ error }}</li>{% endfor %}
+            </ul>
+        {% endif %}
+        <div class="footer-actions">
             <div class="button-row" style="margin-top: 40px;">
                 <button type="submit" class="btn btn-primary-spend">기록하기</button>
             </div>
             <div class="button-row">
                 <a href="javascript:history.back()" class="btn btn-ghost" style="text-decoration:none;">기록 취소</a>
             </div>
-        </form>
-    </main>
-
-    <script>
-        // 시:분 입력이 바뀔 때마다 "= 잔여 시간에서 N분 차감" 문구를 실시간으로 갱신
-        // (서버 계산과 별개로 화면 미리보기용. 실제 duration_min 계산은 forms.py clean()에서 처리)
-        (function () {
-            const hoursInput = document.getElementById('id_hours');
-            const minutesInput = document.getElementById('id_minutes');
-            const caption = document.getElementById('duration-caption');
+        </div>
+    </form>
+</div>
+{% endblock %}
+{% block nav %}{% endblock %}
+{% block extra_js %}
+<script>
+    // 시:분 입력이 바뀔 때마다 "= 잔여 시간에서 N분 차감" 문구를 실시간으로 갱신
+    // (서버 계산과 별개로 화면 미리보기용. 실제 duration_min 계산은 forms.py clean()에서 처리)
+    (function () {
+        const hoursInput = document.getElementById('id_hours');
+        const minutesInput = document.getElementById('id_minutes');
+        const caption = document.getElementById('duration-caption');
 
-            function updateCaption() {
-                const h = parseInt(hoursInput.value, 10) || 0;
-                const m = parseInt(minutesInput.value, 10) || 0;
-                const total = h * 60 + m;
-                caption.textContent = total + '분';
-            }
+        function updateCaption() {
+            const h = parseInt(hoursInput.value, 10) || 0;
+            const m = parseInt(minutesInput.value, 10) || 0;
+            const total = h * 60 + m;
+            caption.textContent = total + '분';
+        }
 
-            hoursInput.addEventListener('input', updateCaption);
-            minutesInput.addEventListener('input', updateCaption);
-            updateCaption();
-        })();
-    </script>
-</body>
-</html>
\ No newline at end of file
+        hoursInput.addEventListener('input', updateCaption);
+        minutesInput.addEventListener('input', updateCaption);
+        updateCaption();
+    })();
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/static/css/common.css b/static/css/common.css
new file mode 100644
index 0000000..c4eaad3
--- /dev/null
+++ b/static/css/common.css
@@ -0,0 +1,105 @@
+body.app-shell {
+    margin: 0;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    background: #f4f4f4;
+    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
+}
+
+.phone-frame {
+    width: 393px;
+    min-height: 852px;     /* 852px 고정 대신 브라우저 창 높이만큼 */
+    background: #fdfcf9;
+    border: 1px solid #70737c;
+    border-radius: 28px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+/* ==========================================================================
+   하단바 아이콘 색상 통일
+   - SVG는 stroke="currentColor"라 <img> 태그로는 색 상속이 안 됨
+   - mask-image로 아이콘 모양만 따서 background-color로 색을 입히는 방식
+   - 기본색 #70737C, 활성 탭은 --spend-accent(#ff7a00)로 덮어씀
+   ========================================================================== */
+
+.nav-item__icon {
+    width: 24px;
+    height: 24px;
+    display: block;
+
+    background-color: #70737C;         /* 아이콘 기본 색 */
+
+    -webkit-mask-image: var(--icon-src);
+    mask-image: var(--icon-src);
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+
+.nav-item--active .nav-item__icon {
+    background-color: #ff7a00;         /* 활성 탭일 때 색 */
+}
+
+/* ===== 본문 영역 (헤더/네비 제외한 콘텐츠) ===== */
+.app-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    padding: 10px 33px 20px;
+
+}
+
+/* ===== 하단 네비게이션 ===== */
+.bottom-nav {
+    border-top: 1px solid #c7c7c7;
+    padding: 10px 30px;
+    position: sticky;
+    bottom: 0;
+    background: #fdfcf9;   /* main_progress.css엔 #ffffff였는데 --bg 토큰(#fdfcf9)으로 통일 */
+}
+
+.bottom-nav__list {
+    list-style: none;
+    display: flex;
+    justify-content: center;
+    gap: 45px;
+    margin: 0;
+    padding: 0;
+}
+
+.nav-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    width: 30px;
+}
+
+.nav-item__link {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    text-decoration: none;
+    color: inherit;
+}
+
+.nav-item__label {
+    font-size: 13px;
+    font-weight: 400;
+    color: #70737c;
+}
+
+.nav-item--active .nav-item__label {
+    font-weight: 600;
+    color: #ff7a00;
+}
\ No newline at end of file
diff --git a/static/images/icon-crew.svg b/static/images/icon-crew.svg
new file mode 100644
index 0000000..9110627
--- /dev/null
+++ b/static/images/icon-crew.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users-icon lucide-users"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><path d="M16 3.128a4 4 0 0 1 0 7.744"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><circle cx="9" cy="7" r="4"/></svg>
\ No newline at end of file
diff --git a/static/images/icon-deadline.svg b/static/images/icon-deadline.svg
new file mode 100644
index 0000000..05d65a4
--- /dev/null
+++ b/static/images/icon-deadline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-icon lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
\ No newline at end of file
diff --git a/static/images/icon-home.svg b/static/images/icon-home.svg
new file mode 100644
index 0000000..6e9d928
--- /dev/null
+++ b/static/images/icon-home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house-icon lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
\ No newline at end of file
diff --git a/static/images/icon-setting.svg b/static/images/icon-setting.svg
new file mode 100644
index 0000000..af0e02a
--- /dev/null
+++ b/static/images/icon-setting.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings2-icon lucide-settings-2"><path d="M14 17H5"/><path d="M19 7h-9"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/></svg>
\ No newline at end of file
diff --git a/static/images/icon-settlement.svg b/static/images/icon-settlement.svg
new file mode 100644
index 0000000..c8b9514
--- /dev/null
+++ b/static/images/icon-settlement.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-no-axes-column-increasing-icon lucide-chart-no-axes-column-increasing"><path d="M5 21v-6"/><path d="M12 21V9"/><path d="M19 21V3"/></svg>
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..ed60070
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,68 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}도파민 가계부{% endblock %}</title>
+    <link rel="stylesheet" href="{% static 'css/common.css' %}">
+    {% block extra_css %}{% endblock %}
+</head>
+<body class="app-shell">
+    <div class="phone-frame">
+        {% block header %}{% endblock %}
+
+        <main class="app-content">
+            {% block content %}{% endblock %}
+        </main>
+
+        {% block nav %}
+        <nav class="bottom-nav">
+            <ul class="bottom-nav__list">
+                <li class="nav-item {% if active_tab == 'home' %}nav-item--active{% endif %}">
+                    <a class="nav-item__link" href="{% url 'ledger:main_progress' %}">
+                        <img class="nav-item__icon"
+                             style="--icon-src: url('{% static "images/icon-home.svg" %}')"
+                             src="{% static 'images/icon-home.svg' %}" alt="홈">
+                        <span class="nav-item__label">홈</span>
+                    </a>
+                </li>
+                <li class="nav-item {% if active_tab == 'crew' %}nav-item--active{% endif %}">
+                    <a class="nav-item__link" href="#">
+                        <img class="nav-item__icon"
+                             style="--icon-src: url('{% static "images/icon-crew.svg" %}')"
+                             src="{% static 'images/icon-crew.svg' %}" alt="크루">
+                        <span class="nav-item__label">크루</span>
+                    </a>
+                </li>
+                <li class="nav-item {% if active_tab == 'deadline' %}nav-item--active{% endif %}">
+                    <a class="nav-item__link" href="#">
+                        <img class="nav-item__icon"
+                             style="--icon-src: url('{% static "images/icon-deadline.svg" %}')"
+                             src="{% static 'images/icon-deadline.svg' %}" alt="마감">
+                        <span class="nav-item__label">마감</span>
+                    </a>
+                </li>
+                <li class="nav-item {% if active_tab == 'settlement' %}nav-item--active{% endif %}">
+                    <a class="nav-item__link" href="#">
+                        <img class="nav-item__icon"
+                             style="--icon-src: url('{% static "images/icon-settlement.svg" %}')"
+                             src="{% static 'images/icon-settlement.svg' %}" alt="결산">
+                        <span class="nav-item__label">결산</span>
+                    </a>
+                </li>
+                <li class="nav-item {% if active_tab == 'setting' %}nav-item--active{% endif %}">
+                    <a class="nav-item__link" href="#">
+                        <img class="nav-item__icon"
+                             style="--icon-src: url('{% static "images/icon-setting.svg" %}')"
+                             src="{% static 'images/icon-setting.svg' %}" alt="설정">
+                        <span class="nav-item__label">설정</span>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+        {% endblock %}
+    </div>
+    {% block extra_js %}{% endblock %}
+</body>
+</html>
\ No newline at end of file