diff --git a/src/reports/templates/scrapbook/activity_chart.html b/src/reports/templates/scrapbook/activity_chart.html
index acff69a..d0c88ee 100644
--- a/src/reports/templates/scrapbook/activity_chart.html
+++ b/src/reports/templates/scrapbook/activity_chart.html
@@ -1,28 +1,34 @@
-{% for item in chart_data %}
-{% set color_var = 'var(--color-purple)' %}
-{% set width = '2%' %}
+<div class="chart-section-horizontal">
+    {% for item in chart_data %}
+    {% set bar_bg = 'var(--color-purple)' %}
+    {% set bar_height = '4px' %}
+    {% set bar_opacity = '1' %}
 
-{% if item.count == 0 %}
-{% set color_var = 'var(--color-purple)' %}
-{% set width = '2%' %}
-{% elif item.percentage >= 70 %}
-{% set color_var = 'var(--accent-orange)' %}
-{% set width = item.percentage ~ '%' %}
-{% elif item.percentage >= 30 %}
-{% set color_var = 'var(--color-green)' %}
-{% set width = item.percentage ~ '%' %}
-{% else %}
-{% set color_var = 'var(--color-blue)' %}
-{% set width = item.percentage ~ '%' %}
-{% endif %}
+    {% if item.count == 0 %}
+    {% set bar_bg = 'var(--ink-secondary)' %}
+    {% set bar_height = '4px' %}
+    {% set bar_opacity = '0.2' %}
+    {% elif item.percentage >= 70 %}
+    {% set bar_bg = 'var(--accent-orange)' %}
+    {% set bar_height = item.percentage ~ '%' %}
+    {% elif item.percentage >= 30 %}
+    {% set bar_bg = 'var(--color-green)' %}
+    {% set bar_height = item.percentage ~ '%' %}
+    {% else %}
+    {% set bar_bg = 'var(--color-blue)' %}
+    {% set bar_height = item.percentage ~ '%' %}
+    {% endif %}
 
-<div class="hand-chart-row">
-    <div class="chart-label">{{ "%02d" | format(item.hour) }}:00</div>
-    <div class="chart-bar-box">
-        <div class="crayon-bar" style="width: {{ width }}; background: {{ color_var }};"></div>
+    <div class="chart-column">
+        {% if item.count > 0 %}
+        <div class="chart-value-top">{{ item.count }}</div>
+        {% endif %}
+
+        {% set style_str = 'height: ' ~ bar_height ~ '; background: ' ~ bar_bg ~ '; opacity: ' ~ bar_opacity ~ ';
+        border-bottom: none;' %}
+        <div class="chart-bar-vertical" style="{{ style_str }}"></div>
+
+        <div class="chart-label-xaxis">{{ "%02d" | format(item.hour) }}</div>
     </div>
-    <div
-        style="margin-left: 10px; font-size: 0.7rem; font-family: var(--font-hand); color: var(--ink-secondary); min-width: 30px;">
-        {{ item.count }}</div>
-</div>
-{% endfor %}
\ No newline at end of file
+    {% endfor %}
+</div>
\ No newline at end of file
diff --git a/src/reports/templates/scrapbook/image_template.html b/src/reports/templates/scrapbook/image_template.html
index 6fec4af..92fcb65 100644
--- a/src/reports/templates/scrapbook/image_template.html
+++ b/src/reports/templates/scrapbook/image_template.html
@@ -309,6 +309,57 @@
             background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4L4 0' stroke='rgba(0,0,0,0.1)' stroke-width='1'/%3E%3C/svg%3E");
         }
 
+        /* ==================== Horizontal Chart Styles ==================== */
+        .chart-section-horizontal {
+            display: flex;
+            align-items: flex-end;
+            justify-content: space-between;
+            height: 220px;
+            padding: 20px 10px 5px 10px;
+            margin-top: 15px;
+            position: relative;
+            border-bottom: 2px solid var(--ink-secondary);
+        }
+
+        .chart-column {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: flex-end;
+            height: 100%;
+            flex: 1;
+            margin: 0 2px;
+            position: relative;
+        }
+
+        .chart-bar-vertical {
+            width: 100%;
+            border-radius: 5px 5px 0 0;
+            min-height: 4px;
+            position: relative;
+            box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
+            transition: height 0.3s ease;
+        }
+
+        .chart-label-xaxis {
+            margin-top: 8px;
+            font-size: 0.75rem;
+            color: var(--ink-secondary);
+            font-family: var(--font-hand);
+            text-align: center;
+        }
+
+        .chart-value-top {
+            position: absolute;
+            top: -20px;
+            font-size: 0.7rem;
+            font-weight: bold;
+            color: var(--ink-secondary);
+            font-family: var(--font-hand);
+            width: 100%;
+            text-align: center;
+        }
+
         /* ==================== 4. 活跃时段 ==================== */
         /* ==================== 4. 活跃时段 (新版) ==================== */
         .highlight-section {