diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..4ed42e6
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,8 @@
+# Claude Code Notes
+
+## Development Server
+
+Before starting the dev server, check if it's already running:
+- Use `lsof -i :6827` or check for existing background tasks
+- The dev server runs on port 6827 (may fall back to 6828 if port is in use)
+- Start with `bun run --cwd apps/publisher-dashboard dev` or `devenv up`
diff --git a/apps/publisher-dashboard/src/lib/components/dashboard/peak-traffic-chart.svelte b/apps/publisher-dashboard/src/lib/components/dashboard/peak-traffic-chart.svelte
index ddd1963..f4d4844 100644
--- a/apps/publisher-dashboard/src/lib/components/dashboard/peak-traffic-chart.svelte
+++ b/apps/publisher-dashboard/src/lib/components/dashboard/peak-traffic-chart.svelte
@@ -65,19 +65,19 @@ function hourToPercent(hour: number): number {
           {#each days as _, dayIndex}
             {@const thisMonth = thisMonthData[dayIndex]}
             {@const lastMonth = lastMonthData[dayIndex]}
-            <div class="relative">
-              <!-- This month bar (solid) -->
+            <div class="relative flex justify-center">
+              <!-- This month bar (solid) - rendered first, behind -->
               <div
-                class="absolute left-0 w-3 rounded-sm bg-muted-foreground/60"
+                class="absolute w-4 rounded-sm bg-muted-foreground/50"
                 style="
                   top: {hourToPercent(thisMonth.start)}%;
                   height: {hourToPercent(thisMonth.end - thisMonth.start)}%;
                 "
               ></div>
 
-              <!-- Last month bar (hatched) -->
+              <!-- Last month bar (hatched) - rendered second, overlaid on top -->
               <div
-                class="absolute left-4 w-3 overflow-hidden rounded-sm"
+                class="absolute w-4 overflow-hidden rounded-sm"
                 style="
                   top: {hourToPercent(lastMonth.start)}%;
                   height: {hourToPercent(lastMonth.end - lastMonth.start)}%;
@@ -92,7 +92,7 @@ function hourToPercent(hour: number): number {
                       height="4"
                       patternTransform="rotate(45)"
                     >
-                      <line x1="0" y1="0" x2="0" y2="4" stroke="currentColor" stroke-width="1.5" class="text-muted-foreground/50" />
+                      <line x1="0" y1="0" x2="0" y2="4" stroke="currentColor" stroke-width="1.5" class="text-muted-foreground/40" />
                     </pattern>
                   </defs>
                   <rect width="100%" height="100%" fill="url(#diagonal-{dayIndex})" />
@@ -114,11 +114,11 @@ function hourToPercent(hour: number): number {
     <!-- Legend -->
     <div class="mt-4 flex items-center justify-center gap-6">
       <div class="flex items-center gap-2">
-        <div class="h-3 w-3 rounded-sm bg-muted-foreground/60"></div>
-        <span class="text-[11px] text-muted-foreground">This month</span>
+        <div class="h-3 w-3 rounded-full bg-muted-foreground/60"></div>
+        <span class="text-xs text-muted-foreground">This month</span>
       </div>
       <div class="flex items-center gap-2">
-        <div class="relative h-3 w-3 overflow-hidden rounded-sm">
+        <div class="relative h-3 w-3 overflow-hidden rounded-full">
           <svg class="h-full w-full" preserveAspectRatio="none">
             <defs>
               <pattern
@@ -134,7 +134,7 @@ function hourToPercent(hour: number): number {
             <rect width="100%" height="100%" fill="url(#diagonal-legend)" />
           </svg>
         </div>
-        <span class="text-[11px] text-muted-foreground">Last month</span>
+        <span class="text-xs text-muted-foreground">Last month</span>
       </div>
     </div>
   </div>