diff --git a/budget/services.py b/budget/services.py
index b7768a7..099346e 100644
--- a/budget/services.py
+++ b/budget/services.py
@@ -1,5 +1,12 @@
 from decimal import Decimal, ROUND_HALF_UP
 
+from datetime import datetime, time, timedelta
+from django.db.models import Sum
+from django.utils import timezone
+import zoneinfo
+
+KST = zoneinfo.ZoneInfo("Asia/Seoul")
+
 
 def calculate_earn_minutes(duration_min, rate):
     duration_min = Decimal(str(duration_min))
@@ -38,4 +45,166 @@ def convert_earn_to_unit(earn_minutes, conversion_rate):
     return converted_unit.quantize(
         Decimal("0.01"),
         rounding=ROUND_HALF_UP,
-    )
\ No newline at end of file
+    )
+
+
+
+
+
+def get_week_range(reference_dt=None):
+    """이번 주 (월요일 00:00, 다음 주 월요일 00:00) — Asia/Seoul.
+    잔액·마감·결산이 전부 이 함수를 임포트해서 같은 경계를 쓰게 함."""
+    if reference_dt is None:
+        reference_dt = timezone.now()
+    local = reference_dt.astimezone(KST)
+    monday_date = (local - timedelta(days=local.weekday())).date()
+    start = datetime.combine(monday_date, time.min, tzinfo=KST)
+    end = start + timedelta(days=7)
+    return start, end
+
+
+def get_today_kst():
+    return timezone.now().astimezone(KST).date()
+
+
+def get_current_balance(user, reference_dt=None):
+    """이번 주 잔액 = weekly_budget_min + Σearn_min - Σduration_min.
+    음수 허용. 저장 안 함 — 매번 집계."""
+    from ledger.models import EarnRecord, SpendRecord
+
+    start, end = get_week_range(reference_dt)
+    start_date, end_date = start.date(), end.date()
+
+    earned = EarnRecord.objects.filter(
+        users=user,
+        earn_date__gte=start_date, earn_date__lt=end_date,
+    ).aggregate(total=Sum('earn_min'))['total'] or Decimal('0')
+
+    spent_min = SpendRecord.objects.filter(
+        users=user,
+        spend_date__gte=start_date, spend_date__lt=end_date,
+    ).aggregate(total=Sum('duration_min'))['total'] or 0
+
+    return user.weekly_budget_min + earned - Decimal(spent_min)
+
+
+def get_week_summary(user, reference_dt=None):
+    """홈 화면 컨텍스트용. 표시 문자열은 view에서 별도 포맷."""
+    from ledger.models import EarnRecord, SpendRecord
+
+    start, end = get_week_range(reference_dt)
+    start_date, end_date = start.date(), end.date()
+
+    earned = EarnRecord.objects.filter(
+        users=user, earn_date__gte=start_date, earn_date__lt=end_date,
+    ).aggregate(total=Sum('earn_min'))['total'] or Decimal('0')
+
+    spent = Decimal(
+        SpendRecord.objects.filter(
+            users=user, spend_date__gte=start_date, spend_date__lt=end_date,
+        ).aggregate(total=Sum('duration_min'))['total'] or 0
+    )
+
+    budget = user.weekly_budget_min
+    balance = budget + earned - spent
+    total_available = budget + earned  # 게이지 분모: 이번 주에 쓸 수 있었던 총량
+    percent = (
+        int((spent / total_available) * 100) if total_available > 0 else 0
+    )
+    return {
+        'balance': balance,
+        'budget': budget,
+        'earned': earned,
+        'spent': spent,
+        'percent_used': min(percent, 999),        # 표시용(초과 시 999까지)
+        'percent_used_capped': min(percent, 100), # bar 너비용
+        'is_overspent': balance < 0,
+    }
+
+
+ #def is_overspent(user, reference_dt=None):
+ #  """지출 저장 직후 이걸로 판정해서 True면 크루 피드 이벤트 생성.
+ #   강성훈이 지출 저장 로직에서 호출."""
+ #   return get_current_balance(user, reference_dt) < 0
+
+# ---------- 표시 헬퍼 ----------
+
+def format_minutes_display(m):
+    """정수 분 → '1시간 30분' / '-30분'. 부호 그대로."""
+    m = int(m)
+    sign = "-" if m < 0 else ""
+    m = abs(m)
+    h, r = divmod(m, 60)
+    if h and r: return f"{sign}{h}시간 {r}분"
+    if h:      return f"{sign}{h}시간"
+    return f"{sign}{r}분"
+
+
+def format_unit_display(minutes, conversion_base, unit_label):
+    """분 → 환산 단위 (소수점 1자리). '3.8권' / '-0.5권'.
+    base가 없거나 0 이하면 시간 표시로 폴백."""
+    if not conversion_base or Decimal(str(conversion_base)) <= 0:
+        return format_minutes_display(minutes)
+    m = Decimal(str(minutes))
+    sign = "-" if m < 0 else ""
+    val = (abs(m) / Decimal(str(conversion_base))).quantize(
+        Decimal("0.1"), rounding=ROUND_HALF_UP,
+    )
+    return f"{sign}{val}{unit_label or ''}"
+
+
+# ---------- 표시용 카테고리 매핑 ----------
+# category에 실제 저장되는 영문 값 → 화면에 보여줄 한글 이름
+CATEGORY_DISPLAY_NAMES = {
+    'short_form': '숏폼',
+    # 다른 카테고리 값이 더 있으면 여기에 추가해주세요.
+}
+
+
+def get_category_display(category):
+    """매핑에 없는 값은 원래 값 그대로 반환(누락 방지용 안전장치)."""
+    return CATEGORY_DISPLAY_NAMES.get(category, category)
+
+
+# ---------- 오늘 기록 ----------
+
+def get_today_records(user):
+    """오늘의 지출·수입 기록을 시작 시각순 리스트로."""
+    from ledger.models import EarnRecord, SpendRecord
+
+    today = get_today_kst()
+    earns = EarnRecord.objects.filter(
+        users=user, earn_date=today
+    ).select_related('activity')
+    spends = SpendRecord.objects.filter(users=user, spend_date=today)
+
+    records = []
+    for e in earns:
+        records.append({
+            'label': e.activity.activity_type,          # "독서 30분" → "독서"
+            'signed_min': e.earn_min,
+            'is_positive': True,
+            'started_at': e.earn_start,
+        })
+    for s in spends:
+        records.append({
+            'label': get_category_display(s.category),  # "short_form 지출" → "숏폼"
+            'signed_min': Decimal(-s.duration_min),
+            'is_positive': False,
+            'started_at': s.spend_start,
+        })
+    records.sort(key=lambda r: r['started_at'])
+    return records
+
+
+def attach_value_displays(records, mode='minutes', conversion_base=None, unit_label=None):
+    """records에 value_display 붙임. mode='minutes' | 'unit'."""
+    for r in records:
+        if mode == 'unit':
+            val = format_unit_display(r['signed_min'], conversion_base, unit_label)
+        else:
+            val = format_minutes_display(r['signed_min'])
+        if r['signed_min'] > 0 and not val.startswith('+'):
+            val = '+' + val
+        r['value_display'] = val
+    return records
\ No newline at end of file
diff --git a/ledger/static/ledger/css/main_convert.css b/ledger/static/ledger/css/main_convert.css
index 67ef29d..175079c 100644
--- a/ledger/static/ledger/css/main_convert.css
+++ b/ledger/static/ledger/css/main_convert.css
@@ -1,56 +1,3 @@
-/* ===== 환산 카드 (도넛 차트 + 환산 값 + 예산 요약) ===== */
-.donut-card {
-  background: #ffffff;
-  border-radius: 15px;
-  padding: 20px 16px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 24px;
-}
-
-/* 도넛 차트 + 중앙 텍스트 오버레이 */
-.donut-card__chart-wrap {
-  position: relative;
-  width: 186px;
-  height: 186px;
-}
-
-.donut-card__chart {
-  width: 186px;
-  height: 186px;
-}
-
-.donut-card__center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-}
-
-.donut-card__value {
-  font-size: 24px;
-  font-weight: 700;
-  color: #000000;
-}
-
-.donut-card__unit-label {
-  font-size: 13px;
-  font-weight: 400;
-  color: #70737c;
-}
-
-.donut-card__switch {
-  font-size: 16px;
-  font-weight: 700;
-  color: #ff7a00;
-  text-decoration: none;
-}
-
 /* ===== 환산된 기록 리스트 (박스형 카드) ===== */
 .converted-record-list {
   list-style: none;
@@ -86,31 +33,4 @@
 
 .converted-record-list__value--negative {
   color: #ff7a00;
-}
-
-/* ===== 보기 방식 토글 ===== */
-.view-toggle {
-  background: #f0e5d5;
-  border-radius: 30px;
-  padding: 3px 4px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.view-toggle__option {
-  border: none;
-  background: none;
-  text-decoration: none;
-  font-size: 13px;
-  font-weight: 600;
-  color: #70737c;
-  padding: 13px 37px;
-  border-radius: 30px;
-  cursor: pointer;
-}
-
-.view-toggle__option--active {
-  background: #ff7a00;
-  color: #ffffff;
 }
\ No newline at end of file
diff --git a/ledger/static/ledger/css/main_progress.css b/ledger/static/ledger/css/main_progress.css
index 20745f6..d60ba11 100644
--- a/ledger/static/ledger/css/main_progress.css
+++ b/ledger/static/ledger/css/main_progress.css
@@ -1,27 +1,3 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  background: #f5f5f5;
-  font-family: 'Inter', sans-serif;
-}
-
-/* ===== 전체 컨테이너 ===== */
-.main-progress {
-  background: #fffefc;
-  border-radius: 28px;
-  border: 1px solid #70737c;
-  width: 393px;
-  min-height: 852px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
 /* ===== 상단 헤더 (로고 + 알림) ===== */
 .app-header {
   display: flex;
@@ -41,79 +17,97 @@ body {
   height: 24px;
 }
 
-/* ===== 본문 영역 ===== */
-.app-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  padding: 10px 33px 20px;
-}
-
-/* ===== 보기 방식 토글 ===== */
+/* ===== 보기 방식 토글 (카드 + 언더라인) ===== */
 .view-toggle {
-  background: #f0e5d5;
-  border-radius: 30px;
-  padding: 3px 4px;
+  background: #ffffff;
+  border: 1px solid #c7c7c7;
+  border-radius: 10px;
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  align-items: stretch;
+  overflow: hidden;
 }
 
+
 .view-toggle__option {
+  flex: 1;
+  box-sizing: border-box;
   border: none;
   background: none;
   text-decoration: none;
   font-size: 13px;
   font-weight: 600;
   color: #70737c;
-  padding: 13px 37px;
-  border-radius: 30px;
+  padding: 15px 10px;
+  text-align: center;
   cursor: pointer;
+  position: relative;
+}
+
+/* 두 번째 옵션 앞에 세로 구분선 (line-4 대체) */
+.view-toggle__option + .view-toggle__option {
+  border-left: 1px solid #c7c7c7;
 }
 
 .view-toggle__option--active {
+  color: #ff7a00;
+}
+
+/* 활성 옵션 하단 언더라인 (rectangle-27 대체) */
+.view-toggle__option--active::after {
+  content: '';
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  bottom: 0;
+  height: 2px;
   background: #ff7a00;
-  color: #ffffff;
+  border-radius: 10px;
 }
 
-/* ===== 오늘 남은 시간 ===== */
+/* ===== 이번 주 남은 시간 ===== */
 .remaining-time {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 14px;
+  gap: 0
 }
 
 .remaining-time__label {
   font-size: 13px;
   font-weight: 400;
   color: #000000;
+  padding: 0;
+  margin : 10 0 0 0;
 }
 
 .remaining-time__value {
   font-size: 32px;
   font-weight: 700;
   color: #000000;
+  padding: 0;
+  margin: 10px
 }
 
 /* ===== 예산 진행률 ===== */
-.budget-progress__bar-fill {
-  background: #ff7a00;
-  border-radius: 30px;
-  height: 8px;
-}
-
 .budget-progress__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 8px;
 }
 
 .budget-progress__desc {
   font-size: 13px;
   font-weight: 400;
   color: #70737c;
+  line-height: 1.45;
+}
+
+/* convert의 둘째 줄 강조 */
+.budget-progress__desc-strong {
+  font-weight: 700;
+  color: #70737c;
 }
 
 .budget-progress__percent {
@@ -122,32 +116,36 @@ body {
   color: #ff7a00;
 }
 
+/* 바깥 트랙: 안 채워진 부분 */
 .budget-progress__bar {
   background: #f0e5d5;
   border-radius: 30px;
   width: 100%;
   height: 8px;
+  overflow: hidden;              /* fill이 혹시라도 넘쳐도 트랙 밖으로 안 삐져나옴 */
 }
 
+/* 안쪽 채움: width는 HTML에서 style="width: {{ percent_used_capped }}%"로 주입 */
+/* 안쪽 채움: width는 HTML에서 style="width: {{ percent_used_capped }}%"로 주입 */
+/* 안쪽 채움: width는 extra_js의 스크립트가 data-percent를 읽어서 주입 */
+/* 안쪽 채움: width는 HTML의 인라인 style로 주입됨 */
 .budget-progress__bar-fill {
   background: #ff7a00;
   border-radius: 30px;
-  width: 50px; /* 사용률에 따라 JS로 동적 변경 예정 */
   height: 8px;
+  width: 0;                      /* 기본값. 인라인 style이 덮어씀 */
+  transition: width 0.4s ease;   /* 값이 바뀔 때 부드럽게 */
 }
-
-/* ===== 오늘 예산 / 사용 / 적립 요약 ===== */
+/* ===== 이번 주 예산 / 사용 / 적립 요약 ===== */
 .budget-summary {
-  border-top: 1px solid #c7c7c7;
-  border-bottom: 1px solid #c7c7c7;
-  padding: 10px 0;
+  padding: 0;
 }
 
 .budget-summary__list {
   list-style: none;
   display: flex;
-  justify-content: center;
-  gap: 44px;
+  justify-content: space-evenly;   /* 모든 간격(양쪽 끝 포함)이 동일하게 */
+  padding: 0;
 }
 
 .budget-summary__item {
@@ -155,13 +153,14 @@ body {
   flex-direction: column;
   align-items: center;
   gap: 7px;
-  width: 70px;
+  width: auto; /* 고정 70px 제거 */
 }
 
 .budget-summary__label {
   font-size: 13px;
   font-weight: 400;
   color: #70737c;
+  white-space: nowrap; 
 }
 
 .budget-summary__value {
@@ -200,6 +199,7 @@ body {
 
 .record-list {
   list-style: none;
+  padding: 0;
 }
 
 .record-list__item {
@@ -277,58 +277,21 @@ body {
   color: #ffffff;
   font-size: 16px;
   font-weight: 700;
+  height: 13px;  /* 높이 고정: padding만으로는 높이가 일정하지 않을 수 있어서 */
 }
 
-/* ===== 하단 네비게이션 ===== */
-.bottom-nav {
-  border-top: 1px solid #c7c7c7;
-  padding: 10px 30px;
-  position: sticky;
-  bottom: 0;
+/* ===== 진행률+요약 감싸는 흰 카드 (main_progress 전용) ===== */
+.budget-card {
   background: #ffffff;
-}
-
-.bottom-nav__list {
-  list-style: none;
-  display: flex;
-  justify-content: center;
-  gap: 45px;
-}
-
-.nav-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  width: 30px;
-}
-
-.nav-item__icon {
-  width: 24px;
-  height: 24px;
-  display: block;
-  overflow: hidden;
-  text-indent: 100%;
-  white-space: nowrap;
-  color: transparent; /* 일부 브라우저에서 alt 텍스트 색상에 영향 */
-}
-
-.nav-item__label {
-  font-size: 16px;
-  font-weight: 400;
-  color: #70737c;
-}
-
-.nav-item__link {
+  border-radius: 10px;
+  padding: 20px;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  text-decoration: none;
-  color: inherit; /* 링크 기본 파란색 상속 차단 */
+  gap: 20px;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
 }
 
-.nav-item--active .nav-item__label {
-  font-weight: 600;
-  color: #e2672a;
+.app-header__notification-link {
+  display: inline-flex;   /* 이미지 크기에 딱 맞춰서 불필요한 클릭 영역/여백 방지 */
+  line-height: 0;         /* 인라인 요소 특유의 하단 여백 제거 */
 }
\ No newline at end of file
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/static/ledger/images/icon-bell.svg b/ledger/static/ledger/images/icon-bell.svg
new file mode 100644
index 0000000..5dc4146
--- /dev/null
+++ b/ledger/static/ledger/images/icon-bell.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell-icon lucide-bell"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>
\ No newline at end of file
diff --git a/ledger/static/ledger/images/logo.png b/ledger/static/ledger/images/logo.png
new file mode 100644
index 0000000..a54e8f6
Binary files /dev/null and b/ledger/static/ledger/images/logo.png differ
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/main_convert.html b/ledger/templates/ledger/main_convert.html
index e22f86b..4998244 100644
--- a/ledger/templates/ledger/main_convert.html
+++ b/ledger/templates/ledger/main_convert.html
@@ -1,143 +1,85 @@
+{% extends 'base.html' %}
 {% 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>
-  <!-- 헤더·하단 네비·기록하기 버튼·경고 배너·예산 요약은 main_progress.css의 컴포넌트를 그대로 재사용 -->
-  <link rel="stylesheet" href="{% static 'ledger/css/main_progress.css' %}">
-  <link rel="stylesheet" href="{% static 'ledger/css/main_convert.css' %}">
-</head>
-<body>
 
-<div class="main-progress main-convert">
+{% block title %}도파민 가계부 - 변환해서 보기{% endblock %}
+
+{% block extra_css %}
+  <link rel="stylesheet" href="{% static 'ledger/css/main_progress.css' %}">
+{% endblock %}
 
+{% block header %}
   <header class="app-header">
     <img class="app-header__logo" src="{% static 'ledger/images/logo.png' %}" alt="도파민 가계부">
-    <img class="app-header__notification" src="{% static 'ledger/images/icons/icon-bell.svg' %}" alt="알림">
+    <a class="app-header__notification-link" href="#" aria-label="알림 보기">
+      <img class="app-header__notification" src="{% static 'ledger/images/icon-bell.svg' %}" alt="">
+    </a>
   </header>
-
-  <main class="app-content">
-
-        <!-- 시간으로 보기 / 변환해서 보기 토글 -->
-    <div class="view-toggle">
-      <a href="{% url 'ledger:main_progress' %}" class="view-toggle__option">시간으로 보기</a>
-      <button type="button" class="view-toggle__option view-toggle__option--active">변환해서 보기</button>
-    </div>
-
-    <!-- 환산 카드: 도넛 차트 + 환산 값 + 오늘 예산/사용/적립 요약 -->
-    <section class="donut-card">
-
-      <!-- 도넛 차트: 실제 비율 표시는 나중에 view 담당자가 채움 -->
-      <!-- TODO(view): 지금은 정적 이미지. 실제 사용률 반영하려면 conic-gradient 또는 SVG 동적 렌더링으로 교체 -->
-      <div class="donut-card__chart-wrap">
-        <img class="donut-card__chart" src="{% static 'ledger/images/donut-chart.svg' %}" alt="">
-        <div class="donut-card__center">
-          <!-- TODO(view): context 'converted_value'(예: "3.8권"), 'converted_unit_label'(예: "책으로 환산하면") -->
-          <p class="donut-card__value">3.8권</p>
-          <p class="donut-card__unit-label">책 몇 권</p>
-        </div>
+{% endblock %}
+
+{% block content %}
+
+  <!-- 시간으로 보기 / 변환해서 보기 토글 -->
+  <div class="view-toggle">
+    <a href="{% url 'ledger:main_progress' %}" class="view-toggle__option">시간으로 보기</a>
+    <button type="button" class="view-toggle__option view-toggle__option--active">변환해서 보기</button>
+  </div>
+
+  <!-- 큰 값: 남은 시간의 활동 환산 (예: "독서 50페이지") -->
+  <section class="remaining-time">
+    <p class="remaining-time__label">{{ converted_unit_label }}</p>
+    <p class="remaining-time__value">{{ balance_display }}</p>
+  </section>
+
+  <!-- 진행률 (카드 없음, 설명은 2줄 + 둘째 줄 강조) -->
+  <section class="budget-progress">
+    <div class="budget-progress__header">
+      <div class="budget-progress__desc">
+        <div>{{ desc_line1 }}</div>
+        <div class="budget-progress__desc-strong">{{ desc_line2 }}</div>
       </div>
+      <span class="budget-progress__percent">{{ percent_used }}%</span>
+    </div>
+    <div class="budget-progress__bar">
+      <div class="budget-progress__bar-fill" style="width: {{ percent_used_capped }}%"></div>
+    </div>
+  </section>
 
-      <!-- 오늘 예산 / 사용 / 적립 요약: main_progress와 동일 컴포넌트(budget-summary) 재사용 -->
-      <!-- TODO(view): context 값으로 교체 (daily_budget_display / total_spent_display / total_earned_display) -->
-      <ul class="budget-summary__list">
-        <li class="budget-summary__item">
-          <span class="budget-summary__label">오늘 예산</span>
-          <span class="budget-summary__value">4시간 0분</span>
-        </li>
-        <li class="budget-summary__item">
-          <span class="budget-summary__label">사용</span>
-          <span class="budget-summary__value budget-summary__value--negative">-30분</span>
-        </li>
-        <li class="budget-summary__item">
-          <span class="budget-summary__label">적립</span>
-          <span class="budget-summary__value budget-summary__value--positive">+33분</span>
-        </li>
-      </ul>
-
-      <!-- 시간으로 보기 화면으로 돌아가는 링크 -->
-      <a href="{% url 'ledger:main_progress' %}" class="donut-card__switch">지출 시간으로 보기</a>
-
-    </section>
+  {# 예산/사용/적립 요약은 convert에서는 표시 안 함 (디자인 변경) #}
 
-    <!-- 오늘의 기록 헤더: main_progress와 동일 컴포넌트(today-record__header) 재사용 -->
+  <!-- 오늘의 기록 (progress와 동일 구조) -->
+  <section class="today-record">
     <div class="today-record__header">
       <h2 class="today-record__title">오늘의 기록</h2>
-      <span class="today-record__count">2건</span>
+      <span class="today-record__count">{{ today_record_count }}건</span>
     </div>
-
-    <!-- 환산된 기록 리스트: progress 페이지의 record-list와 달리 각각 박스 형태 -->
-    <!--
-      TODO(view): 오늘의 지출/수입 기록을 순회하는 형태로 교체.
-      예시:
-        {% for record in converted_records %}
-          <li class="converted-record-list__item">...</li>
-        {% empty %}
-          <li>오늘 기록이 아직 없어요</li>
-        {% endfor %}
-    -->
-    <ul class="converted-record-list">
-      <li class="converted-record-list__item">
-        <span class="converted-record-list__label">독서 40분 완료</span>
-        <span class="converted-record-list__value converted-record-list__value--positive">+33분</span>
-      </li>
-      <li class="converted-record-list__item">
-        <span class="converted-record-list__label">숏폼 지출</span>
-        <span class="converted-record-list__value converted-record-list__value--negative">-30분</span>
-      </li>
+    <ul class="record-list">
+      {% for record in today_records %}
+        <li class="record-list__item">
+          <div class="record-list__info">
+            {% if record.is_positive %}
+              <img class="record-list__icon" src="{% static 'ledger/images/icon-earn.svg' %}" alt="">
+            {% else %}
+              <img class="record-list__icon" src="{% static 'ledger/images/icon-spend.svg' %}" alt="">
+            {% endif %}
+            <span class="record-list__label">{{ record.label }}</span>
+          </div>
+          <span class="record-list__value {% if record.is_positive %}record-list__value--positive{% else %}record-list__value--negative{% endif %}">{{ record.value_display }}</span>
+        </li>
+      {% empty %}
+        <li class="record-list__item">
+          <span class="record-list__label">오늘 기록이 아직 없어요</span>
+        </li>
+      {% endfor %}
     </ul>
+  </section>
 
-    <!-- 예산 소진 경고 배너: main_progress와 동일 컴포넌트(alert-banner) 재사용 -->
-    <!-- TODO(view): {% if is_budget_exhausted %} ... {% endif %}로 감싸서 조건부 표시 -->
+  {% if is_overspent %}
     <div class="alert-banner">
-      <img class="alert-banner__icon" src="{% static 'ledger/images/icons/icon-warning.svg' %}" alt="경고">
-      <p class="alert-banner__text">예산 시간을 다 썼어요</p>
+      <img class="alert-banner__icon" src="{% static 'ledger/images/icon-warning.svg' %}" alt="경고">
+      <p class="alert-banner__text">예산 시간을 다 썼어요. 초과분은 크루가 보고 있어요.</p>
     </div>
+  {% endif %}
 
-    <!-- 기록하기 버튼: main_progress와 동일 컴포넌트(btn-record) 재사용 -->
-    <a href="{% url 'ledger:record_choice' %}" class="btn-record">기록하기</a>
-
-  </main>
-
-  <!-- 하단 네비게이션: main_progress와 완전히 동일. '홈' 대신 활성 탭 없음(변환 화면은 홈의 하위 화면) -->
-  <nav class="bottom-nav">
-    <ul class="bottom-nav__list">
-      <li class="nav-item">
-        <a class="nav-item__link" href="{% url 'ledger:main_progress' %}">
-          <img class="nav-item__icon" src="{% static 'ledger/images/icons/icon-home.svg' %}" alt="홈">
-          <span class="nav-item__label">홈</span>
-        </a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-item__link" href="#">
-          <img class="nav-item__icon" src="{% static 'ledger/images/icons/icon-crew.svg' %}" alt="크루">
-          <span class="nav-item__label">크루</span>
-        </a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-item__link" href="#">
-          <img class="nav-item__icon" src="{% static 'ledger/images/icons/icon-deadline.svg' %}" alt="마감">
-          <span class="nav-item__label">마감</span>
-        </a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-item__link" href="#">
-          <img class="nav-item__icon" src="{% static 'ledger/images/icons/icon-settlement.svg' %}" alt="결산">
-          <span class="nav-item__label">결산</span>
-        </a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-item__link" href="#">
-          <img class="nav-item__icon" src="{% static 'ledger/images/icons/icon-setting.svg' %}" alt="설정">
-          <span class="nav-item__label">설정</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-
-</div>
+  <a href="{% url 'ledger:record_choice' %}" class="btn-record">기록하기</a>
 
-</body>
-</html>
\ No newline at end of file
+{% endblock %}
\ No newline at end of file
diff --git a/ledger/templates/ledger/main_progress.html b/ledger/templates/ledger/main_progress.html
index e17886f..f70bdc3 100644
--- a/ledger/templates/ledger/main_progress.html
+++ b/ledger/templates/ledger/main_progress.html
@@ -1,148 +1,99 @@
+{% extends 'base.html' %}
 {% 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/css/main_progress.css' %}">
-</head>
-<body>
 
-<div class="main-progress">
+{% block title %}도파민 가계부 - 홈{% endblock %}
+
+{% block extra_css %}
+  <link rel="stylesheet" href="{% static 'ledger/css/main_progress.css' %}">
+{% endblock %}
 
+{% block header %}
   <header class="app-header">
     <img class="app-header__logo" src="{% static 'ledger/images/logo.png' %}" alt="도파민 가계부">
-    <img class="app-header__notification" src="{% static 'ledger/images/icons/icon-bell.svg' %}" alt="알림">
+    <a class="app-header__notification-link" href="#" aria-label="알림 보기">
+      <img class="app-header__notification" src="{% static 'ledger/images/icon-bell.svg' %}" alt="">
+    </a>
   </header>
+{% endblock %}
 
-  <main class="app-content">
+{% block content %}
 
-    <!-- 시간으로 보기 / 변환해서 보기 토글 -->
-    <div class="view-toggle">
-      <button type="button" class="view-toggle__option view-toggle__option--active">시간으로 보기</button>
-      <a href="{% url 'ledger:main_convert' %}" class="view-toggle__option">변환해서 보기</a>
-    </div>
+  <!-- 시간으로 보기 / 변환해서 보기 토글 -->
+  <div class="view-toggle">
+    <button type="button" class="view-toggle__option view-toggle__option--active">시간으로 보기</button>
+    <a href="{% url 'ledger:main_convert' %}" class="view-toggle__option">변환해서 보기</a>
+  </div>
 
-    <!-- 오늘 남은 시간 -->
-    <!-- TODO(view): context 'remaining_display'로 교체 (예: {{ remaining_display }}) -->
-    <section class="remaining-time">
-      <p class="remaining-time__label">오늘 남은 숏폼 시간</p>
-      <p class="remaining-time__value">2시간 30분</p>
-    </section>
+  <!-- 이번 주 숏폼 시간 (잔액, 음수 가능) -->
+  <section class="remaining-time">
+    <p class="remaining-time__label">이번 주 숏폼 시간</p>
+    <p class="remaining-time__value">{{ balance_display }}</p>
+  </section>
 
-    <!-- 예산 진행률 -->
-    <!-- TODO(view): 'budget_desc', 'percent_used' context로 교체 -->
-    <section class="budget-progress">
+  <!-- 진행률 + 요약을 하나의 흰 카드로 -->
+  <section class="budget-card">
+    <div class="budget-progress">
       <div class="budget-progress__header">
-        <span class="budget-progress__desc">오늘 예산 4시간 중 30분 사용</span>
-        <span class="budget-progress__percent">12%</span>
+        <div class="budget-progress__desc">{{ budget_desc }}</div>
+        <span class="budget-progress__percent">{{ percent_used }}%</span>
       </div>
       <div class="budget-progress__bar">
-        <!-- 게이지 바 너비: 나중에 style="width: min({{ percent_used }}%, 100%);" 형태로 교체 -->
-        <div class="budget-progress__bar-fill"></div>
+        <div class="budget-progress__bar-fill" style="width: {{ percent_used_capped }}%"></div>
       </div>
-    </section>
+    </div>
 
-    <!-- 오늘 예산 / 사용 / 적립 요약 -->
-    <!-- TODO(view): 각각 context 값으로 교체 (daily_budget / total_spent / total_earned) -->
-    <section class="budget-summary">
+    <div class="budget-summary">
       <ul class="budget-summary__list">
         <li class="budget-summary__item">
-          <span class="budget-summary__label">오늘 예산</span>
-          <span class="budget-summary__value">4시간</span>
+          <span class="budget-summary__label">이번 주 예산</span>
+          <span class="budget-summary__value">{{ budget_display }}</span>
         </li>
         <li class="budget-summary__item">
           <span class="budget-summary__label">사용</span>
-          <span class="budget-summary__value budget-summary__value--negative">-30분</span>
+          <span class="budget-summary__value budget-summary__value--negative">-{{ spent_display }}</span>
         </li>
         <li class="budget-summary__item">
           <span class="budget-summary__label">적립</span>
-          <span class="budget-summary__value budget-summary__value--positive">+33분</span>
+          <span class="budget-summary__value budget-summary__value--positive">+{{ earned_display }}</span>
         </li>
       </ul>
-    </section>
+    </div>
+  </section>
 
-    <!-- 오늘의 기록 -->
-    <!--
-      TODO(view): 오늘의 지출/수입 기록을 리스트로 순회하는 형태로 교체.
-      예시:
-        {% for record in records %}
-          <li class="record-list__item">...</li>
-        {% empty %}
-          <li>오늘 기록이 아직 없어요</li>
-        {% endfor %}
-    -->
-    <section class="today-record">
-      <div class="today-record__header">
-        <h2 class="today-record__title">오늘의 기록</h2>
-        <span class="today-record__count">2건</span>
-      </div>
-      <ul class="record-list">
+  <!-- 오늘의 기록 -->
+  <section class="today-record">
+    <div class="today-record__header">
+      <h2 class="today-record__title">오늘의 기록</h2>
+      <span class="today-record__count">{{ today_record_count }}건</span>
+    </div>
+    <ul class="record-list">
+      {% for record in today_records %}
         <li class="record-list__item">
           <div class="record-list__info">
-            <img class="record-list__icon" src="{% static 'ledger/images/icons/icon-book.svg' %}" alt="독서">
-            <span class="record-list__label">독서 40분</span>
+            {% if record.is_positive %}
+              <img class="record-list__icon" src="{% static 'ledger/images/icon-earn.svg' %}" alt="">
+            {% else %}
+              <img class="record-list__icon" src="{% static 'ledger/images/icon-spend.svg' %}" alt="">
+            {% endif %}
+            <span class="record-list__label">{{ record.label }}</span>
           </div>
-          <span class="record-list__value record-list__value--positive">+33분</span>
+          <span class="record-list__value {% if record.is_positive %}record-list__value--positive{% else %}record-list__value--negative{% endif %}">{{ record.value_display }}</span>
         </li>
+      {% empty %}
         <li class="record-list__item">
-          <div class="record-list__info">
-            <img class="record-list__icon" src="{% static 'ledger/images/icons/icon-shortform.svg' %}" alt="숏폼">
-            <span class="record-list__label">숏폼 지출</span>
-          </div>
-          <span class="record-list__value record-list__value--negative">-30분</span>
+          <span class="record-list__label">오늘 기록이 아직 없어요</span>
         </li>
-      </ul>
-    </section>
+      {% endfor %}
+    </ul>
+  </section>
 
-    <!-- 예산 소진 경고 배너 -->
-    <!-- TODO(view): {% if is_budget_exhausted %} ... {% endif %}로 감싸서 조건부 표시 -->
+  {% if is_overspent %}
     <div class="alert-banner">
-      <img class="alert-banner__icon" src="{% static 'ledger/images/icons/icon-warning.svg' %}" alt="경고">
-      <p class="alert-banner__text">예산 시간을 다 썼어요</p>
+      <img class="alert-banner__icon" src="{% static 'ledger/images/icon-warning.svg' %}" alt="경고">
+      <p class="alert-banner__text">예산 시간을 다 썼어요. 초과분은 크루가 보고 있어요.</p>
     </div>
+  {% endif %}
 
-    <a href="{% url 'ledger:record_choice' %}" class="btn-record">기록하기</a>
-
-  </main>
-
-  <nav class="bottom-nav">
-    <ul class="bottom-nav__list">
-      <li class="nav-item nav-item--active">
-        <a class="nav-item__link" href="{% url 'ledger:main_progress' %}">
-          <img class="nav-item__icon" src="{% static 'ledger/images/icons/icon-home.svg' %}" alt="홈">
-          <span class="nav-item__label nav-item__label--active">홈</span>
-        </a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-item__link" href="#">
-          <img class="nav-item__icon" src="{% static 'ledger/images/icons/icon-crew.svg' %}" alt="크루">
-          <span class="nav-item__label">크루</span>
-        </a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-item__link" href="#">
-          <img class="nav-item__icon" src="{% static 'ledger/images/icons/icon-deadline.svg' %}" alt="마감">
-          <span class="nav-item__label">마감</span>
-        </a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-item__link" href="#">
-          <img class="nav-item__icon" src="{% static 'ledger/images/icons/icon-settlement.svg' %}" alt="결산">
-          <span class="nav-item__label">결산</span>
-        </a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-item__link" href="#">
-          <img class="nav-item__icon" src="{% static 'ledger/images/icons/icon-setting.svg' %}" alt="설정">
-          <span class="nav-item__label">설정</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-
-</div>
+  <a href="{% url 'ledger:record_choice' %}" class="btn-record">기록하기</a>
 
-</body>
-</html>
\ No newline at end of file
+{% 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/ledger/urls.py b/ledger/urls.py
index cf04e44..d0e7dbd 100644
--- a/ledger/urls.py
+++ b/ledger/urls.py
@@ -5,9 +5,9 @@
 app_name = 'ledger'
 
 urlpatterns = [
-    # 메인 화면 (홈) — 아직 뷰 없이 정적이라 TemplateView 유지 OK
-    path('', TemplateView.as_view(template_name='ledger/main_progress.html'), name='main_progress'),
-    path('convert/', TemplateView.as_view(template_name='ledger/main_convert.html'), name='main_convert'),
+        # 메인 화면 (홈)
+    path('', views.main_progress, name='main_progress'),
+    path('convert/', views.main_convert, name='main_convert'),
 
     # 기록하기 진입 화면 (정적이라 TemplateView OK)
     path('record/', TemplateView.as_view(template_name='ledger/record_choice.html'), name='record_choice'),
diff --git a/ledger/views.py b/ledger/views.py
index 28aa5fd..2f21d4f 100644
--- a/ledger/views.py
+++ b/ledger/views.py
@@ -1,8 +1,16 @@
+from decimal import Decimal, ROUND_HALF_UP
 from django.shortcuts import render, redirect
 from django.contrib.auth.decorators import login_required
 from .forms import SpendRecordForm, EarnRecordForm
 from .models import SpendRecord, EarnRecord
 
+from budget.services import (
+    get_week_summary,
+    get_today_records,
+    attach_value_displays,
+    format_minutes_display,
+    format_unit_display,
+)
 
 @login_required
 def spend_record_create(request):
@@ -72,4 +80,57 @@ def earn_record_list(request):
 @login_required
 def record_choice(request):
     """기록하기 진입 화면 - 지출/수입 선택만 보여주는 단순 뷰"""
-    return render(request, 'ledger/record_choice.html')
\ No newline at end of file
+    return render(request, 'ledger/record_choice.html')
+
+@login_required
+def main_progress(request):
+    """홈 — 시간으로 보기."""
+    summary = get_week_summary(request.user)
+    records = attach_value_displays(
+        get_today_records(request.user), mode='minutes',
+    )
+    context = {
+        **summary,
+        'balance_display':  format_minutes_display(summary['balance']),
+        'budget_display':   format_minutes_display(summary['budget']),
+        'spent_display':    format_minutes_display(summary['spent']),
+        'earned_display':   format_minutes_display(summary['earned']),
+        'budget_desc': (
+            f"이번 주 예산 {format_minutes_display(summary['budget'])} 중 "
+            f"{format_minutes_display(summary['spent'])} 사용"
+        ),
+        'today_records': records,
+        'today_record_count': len(records),
+    }
+    return render(request, 'ledger/main_progress.html', context)
+
+@login_required
+def main_convert(request):
+    """홈 — 변환해서 보기.
+    큰 잔액만 conversion_base로 환산해서 크게 표시하고,
+    이번 주 예산/사용/적립 요약은 main_progress와 동일하게 분(시간) 포맷으로 표시.
+    오늘의 기록도 main_progress와 동일하게 분 단위로 표시."""
+    user = request.user
+    summary = get_week_summary(user)
+    base = user.conversion_base
+    unit = user.conversion_unit or ''
+    activity = user.converting_activity or '환산 활동'
+
+    records = attach_value_displays(
+        get_today_records(user), mode='minutes',   # 'unit' → 'minutes'
+    )
+    context = {
+        **summary,
+        'balance_display':  format_unit_display(summary['balance'], base, unit),
+        'budget_display':   format_minutes_display(summary['budget']),
+        'spent_display':    format_minutes_display(summary['spent']),
+        'earned_display':   format_minutes_display(summary['earned']),
+        'budget_desc': (
+            f"이번 주 예산 {format_minutes_display(summary['budget'])} 중 "
+            f"{format_minutes_display(summary['spent'])} 사용"
+        ),
+        'converted_unit_label': f"이번 주 남은 {activity} 시간",
+        'today_records': records,
+        'today_record_count': len(records),
+    }
+    return render(request, 'ledger/main_convert.html', context)
\ No newline at end of file
diff --git a/static/css/common.css b/static/css/common.css
new file mode 100644
index 0000000..ccb992a
--- /dev/null
+++ b/static/css/common.css
@@ -0,0 +1,106 @@
+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)으로 통일 */
+    border-radius: 0 0 28px 28px; 
+}
+
+.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..bff9aa1
--- /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