diff --git a/frontend/index.html b/frontend/index.html
index df210e7..4a0edb7 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -54,6 +54,23 @@ textarea { resize: vertical; min-height: 120px; }
.widget h3 { margin: 4px 0 8px; font-size: 13px; color: #7aa1c9; }
.event { padding: 8px 0; border-bottom: 1px solid #1b2d45; }
.event:last-child { border-bottom: 0; }
+.my-work { grid-column: 1 / -1; }
+.my-work-header { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
+.work-filters { display:flex; gap:8px; }
+.work-filter { min-height: 44px; }
+.work-filter[aria-pressed="true"] { border-color:var(--accent); background:#1d4f7a; }
+.my-work-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; }
+.my-work-card { min-height: 44px; display:block; padding:12px; border:1px solid #1f3a5f; border-radius:12px; background:#0f1d33; color:var(--text); }
+.my-work-card:hover { border-color:var(--accent); }
+.my-work-card-title { display:block; margin:5px 0; font-weight:650; }
+.my-work[data-stale="true"] { border-color:#fcd34d; }
+@media (max-width: 600px) {
+ header { align-items:flex-start; }
+ .my-work { margin:0; }
+ .my-work-list { grid-template-columns:1fr; }
+ .work-filters { width:100%; }
+ .work-filter { flex:1; }
+}
.obi { width:14px; height:14px; background: url('data:image/svg+xml;utf8,') center/contain no-repeat; display:inline-block; }
.footer { padding: 12px; text-align: center; color:#4e6b8a; font-size:12px; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@@ -72,6 +89,20 @@ textarea { resize: vertical; min-height: 120px; }
+