diff --git a/src/app/(app)/issues/issues-list.tsx b/src/app/(app)/issues/issues-list.tsx
index 4462cf9c..2a2a974a 100644
--- a/src/app/(app)/issues/issues-list.tsx
+++ b/src/app/(app)/issues/issues-list.tsx
@@ -1,8 +1,20 @@
 'use client';
 
 import { useSearchParams, useRouter } from 'next/navigation';
-import { useState, useTransition, useCallback, useEffect, useRef } from 'react';
-import { Search, ExternalLink, ChevronLeft, ChevronRight, Copy, Check, X } from 'lucide-react';
+import { useState, useTransition, useCallback, useEffect } from 'react';
+import {
+  Search,
+  ExternalLink,
+  ChevronLeft,
+  ChevronRight,
+  Copy,
+  Check,
+  X,
+  Lock,
+  Unlock,
+  SlidersHorizontal,
+  ArrowRight,
+} from 'lucide-react';
 import {
   claimIssue,
   unclaimIssue,
@@ -12,23 +24,14 @@ import {
   type RepoOption,
 } from '@/app/actions/issues';
 
-const DIFFICULTY_LABEL: Record<string, string> = { E: 'L1', M: 'L2', H: 'L3' };
-const DIFFICULTY_COLOR: Record<string, string> = {
-  E: 'border-emerald-700 text-emerald-400',
-  M: 'border-yellow-700 text-yellow-400',
-  H: 'border-red-800 text-red-400',
-};
-
-const DIFFICULTY_FULL: Record<string, string> = {
-  E: 'Easy — good for first contributions, lower XP',
-  M: 'Medium — requires some codebase knowledge',
-  H: 'Hard — significant complexity, higher XP',
-};
-
 function timeAgo(dateStr: string): string {
   const diff = Date.now() - new Date(dateStr).getTime();
-  const days = Math.floor(diff / 86400000);
-  if (days === 0) return 'today';
+  const mins = Math.floor(diff / 60000);
+  if (mins <= 0) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
   if (days === 1) return '1d ago';
   if (days < 30) return `${days}d ago`;
   const months = Math.floor(days / 30);
@@ -57,7 +60,6 @@ function IssueDetailDrawer({
   const org = issue.repoFullName.split('/')[0] ?? '';
   const [copied, setCopied] = useState(false);
 
-  // Close on Escape key
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') onClose();
@@ -66,7 +68,6 @@ function IssueDetailDrawer({
     return () => window.removeEventListener('keydown', onKey);
   }, [onClose]);
 
-  // Prevent body scroll while drawer is open
   useEffect(() => {
     document.body.style.overflow = 'hidden';
     return () => {
@@ -80,44 +81,53 @@ function IssueDetailDrawer({
     setTimeout(() => setCopied(false), 1500);
   };
 
+  const difficultyText: Record<string, string> = { E: 'EASY', M: 'MEDIUM', H: 'HARD' };
+  const difficultyColor: Record<string, string> = {
+    E: 'border-emerald-800 text-emerald-400 bg-emerald-950/20',
+    M: 'border-amber-800 text-amber-400 bg-amber-950/20',
+    H: 'border-red-850 text-red-400 bg-red-950/20',
+  };
+
   return (
     <>
-      {/* Backdrop */}
-      <div className="fixed inset-0 z-40 bg-black/60" onClick={onClose} aria-hidden="true" />
+      <div
+        className="fixed inset-0 z-40 bg-black/80 backdrop-blur-sm"
+        onClick={onClose}
+        aria-hidden="true"
+      />
 
-      {/* Drawer panel */}
       <div
         role="dialog"
         aria-modal="true"
         aria-label={issue.title}
-        className="fixed right-0 top-0 z-50 flex h-full w-full max-w-xl flex-col border-l border-[#2d333b] bg-[#111318] shadow-2xl"
+        className="fixed right-0 top-0 z-50 flex h-full w-full max-w-xl animate-slide-in flex-col border-l border-zinc-800 bg-[#0D0E12] shadow-2xl"
       >
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-[#2d333b] px-6 py-4">
+        <div className="flex items-center justify-between border-b border-zinc-800 px-6 py-4">
           <div className="flex flex-wrap items-center gap-2">
-            <span className="border border-zinc-700 px-2 py-0.5 text-[10px] uppercase text-zinc-400">
+            <span className="border border-zinc-800 px-2 py-0.5 text-[10px] uppercase text-zinc-400">
               {org}
             </span>
-            <span className="text-[10px] uppercase tracking-widest text-zinc-500">/</span>
-            <span className="border border-zinc-700 px-2 py-0.5 text-[10px] uppercase text-zinc-400">
+            <span className="text-[10px] uppercase tracking-widest text-zinc-600">/</span>
+            <span className="border border-zinc-800 px-2 py-0.5 text-[10px] uppercase text-zinc-400">
               {repoName}
             </span>
             {issue.difficulty && (
               <span
-                className={`border px-2 py-0.5 text-[10px] font-bold uppercase ${DIFFICULTY_COLOR[issue.difficulty] ?? 'border-zinc-700 text-zinc-400'}`}
+                className={`rounded-full border px-2 py-0.5 text-[10px] font-bold uppercase ${difficultyColor[issue.difficulty]}`}
               >
-                {DIFFICULTY_LABEL[issue.difficulty] ?? issue.difficulty}
+                {difficultyText[issue.difficulty]}
               </span>
             )}
             {isClaimed && (
-              <span className="bg-purple-900/50 px-2 py-0.5 text-[10px] uppercase text-purple-300">
+              <span className="rounded-full border border-purple-800/50 bg-purple-900/30 px-2 py-0.5 text-[10px] uppercase text-purple-300">
                 CLAIMED
               </span>
             )}
           </div>
           <button
             onClick={onClose}
-            className="ml-4 shrink-0 text-zinc-500 transition-colors hover:text-white"
+            className="text-zinc-550 ml-4 shrink-0 transition-colors hover:text-white"
             aria-label="Close"
           >
             <X className="h-4 w-4" />
@@ -125,46 +135,44 @@ function IssueDetailDrawer({
         </div>
 
         {/* Scrollable body */}
-        <div className="flex-1 overflow-y-auto px-6 py-6">
-          {/* Title */}
-          <h2 className="mb-1 font-serif text-2xl leading-snug text-white">{issue.title}</h2>
-
-          {/* Meta */}
-          <p className="mb-6 text-[10px] uppercase tracking-widest text-zinc-600">
-            #{issue.githubIssueNumber} · {timeAgo(issue.fetchedAt)}
-          </p>
+        <div className="flex-1 space-y-6 overflow-y-auto px-6 py-6">
+          <div>
+            <h2 className="mb-2 font-serif text-2xl leading-snug text-white">{issue.title}</h2>
+            <p className="text-zinc-650 text-[10px] uppercase tracking-widest">
+              #{issue.githubIssueNumber} · {timeAgo(issue.fetchedAt)}
+            </p>
+          </div>
 
-          {/* Difficulty description */}
           {issue.difficulty && (
-            <div className="mb-6 border border-[#2d333b] bg-[#161b22] px-4 py-3">
+            <div className="rounded border border-zinc-800 bg-[#161b22]/20 px-4 py-3">
               <p className="mb-0.5 text-[10px] uppercase tracking-widest text-zinc-500">
                 Difficulty
               </p>
-              <p className="text-[11px] text-zinc-300">
-                {DIFFICULTY_FULL[issue.difficulty] ?? issue.difficulty}
+              <p
+                className={`text-xs font-bold ${(difficultyColor[issue.difficulty] ?? '').split(' ')[1] ?? 'text-zinc-300'}`}
+              >
+                {difficultyText[issue.difficulty]} Tier
               </p>
             </div>
           )}
 
-          {/* XP Reward */}
           {issue.xpReward && (
-            <div className="mb-6 border border-[#2d333b] bg-[#161b22] px-4 py-3">
+            <div className="rounded border border-zinc-800 bg-[#161b22]/20 px-4 py-3">
               <p className="mb-0.5 text-[10px] uppercase tracking-widest text-zinc-500">
                 XP Reward
               </p>
-              <p className="text-[11px] font-bold text-emerald-400">+{issue.xpReward} XP</p>
+              <p className="text-xs font-bold text-[#00FF87]">+{issue.xpReward} XP</p>
             </div>
           )}
 
-          {/* Labels */}
           {issue.labels && issue.labels.length > 0 && (
-            <div className="mb-6">
+            <div>
               <p className="mb-2 text-[10px] uppercase tracking-widest text-zinc-500">Labels</p>
               <div className="flex flex-wrap gap-2">
                 {issue.labels.map((label) => (
                   <span
                     key={label}
-                    className="border border-[#2d333b] px-2 py-0.5 text-[10px] text-zinc-400"
+                    className="rounded-sm border border-zinc-800 bg-zinc-900/30 px-2 py-0.5 text-[10px] text-zinc-400"
                   >
                     {label}
                   </span>
@@ -173,39 +181,46 @@ function IssueDetailDrawer({
             </div>
           )}
 
-          {/* State */}
-          <div className="mb-6 border border-[#2d333b] bg-[#161b22] px-4 py-3">
+          {issue.bodyExcerpt && (
+            <div>
+              <p className="mb-2 text-[10px] uppercase tracking-widest text-zinc-500">Excerpt</p>
+              <p className="text-zinc-450 rounded border border-zinc-800/40 bg-[#161b22]/10 p-4 text-xs leading-relaxed">
+                {issue.bodyExcerpt}
+              </p>
+            </div>
+          )}
+
+          <div className="rounded border border-zinc-800 bg-[#161b22]/20 px-4 py-3">
             <p className="mb-0.5 text-[10px] uppercase tracking-widest text-zinc-500">Status</p>
             <p
-              className={`text-[11px] font-bold uppercase ${issue.state === 'open' ? 'text-emerald-400' : 'text-zinc-500'}`}
+              className={`text-xs font-bold uppercase ${issue.state === 'open' ? 'text-[#00FF87]' : 'text-zinc-500'}`}
             >
               {issue.state}
             </p>
           </div>
 
-          {/* GitHub link */}
           <a
             href={issue.url}
             target="_blank"
             rel="noopener noreferrer"
-            className="mb-6 flex items-center gap-2 border border-[#2d333b] px-4 py-3 text-[11px] uppercase tracking-widest text-zinc-300 transition-colors hover:border-zinc-500 hover:bg-[#161b22]"
+            className="flex items-center justify-center gap-2 rounded border border-zinc-800 bg-[#161b22]/30 px-4 py-3 text-[11px] uppercase tracking-widest text-zinc-300 transition-colors hover:border-zinc-700 hover:bg-[#161b22]/50"
           >
-            <ExternalLink className="h-3 w-3 shrink-0" />
+            <ExternalLink className="h-3.5 w-3.5 shrink-0" />
             VIEW ON GITHUB
           </a>
         </div>
 
         {/* Footer actions */}
-        <div className="border-t border-[#2d333b] px-6 py-4">
+        <div className="border-t border-zinc-800 bg-zinc-950/20 px-6 py-4">
           {isClaimed ? (
             <div className="flex flex-wrap items-center gap-3">
-              <span className="text-[10px] uppercase tracking-widest text-purple-400">
-                YOUR ISSUE
+              <span className="mr-auto text-[10px] font-bold uppercase tracking-widest text-purple-400">
+                YOUR CLAIMED ISSUE
               </span>
 
               <button
                 onClick={handleCopy}
-                className="flex items-center gap-1 border border-zinc-700 px-3 py-1.5 text-[10px] uppercase tracking-widest text-zinc-300 transition-colors hover:bg-zinc-800"
+                className="text-zinc-350 flex items-center gap-1 border border-zinc-800 bg-zinc-900/50 px-3 py-1.5 text-[10px] uppercase tracking-widest transition-colors hover:bg-zinc-800"
               >
                 {copied ? (
                   <>
@@ -221,7 +236,7 @@ function IssueDetailDrawer({
               <button
                 onClick={() => issue.userRecId && onUnclaim(issue.userRecId, issue.id)}
                 disabled={actionPending || !issue.userRecId}
-                className="border border-zinc-700 px-3 py-1.5 text-[10px] uppercase tracking-widest text-zinc-500 transition-colors hover:border-red-800 hover:text-red-400 disabled:cursor-not-allowed disabled:opacity-40"
+                className="border border-zinc-800 px-3 py-1.5 text-[10px] uppercase tracking-widest text-zinc-500 transition-colors hover:border-red-950 hover:text-red-400 disabled:cursor-not-allowed disabled:opacity-40"
               >
                 {actionPending ? '...' : 'UNCLAIM'}
               </button>
@@ -231,14 +246,14 @@ function IssueDetailDrawer({
               <button
                 onClick={() => onClaim(issue.id)}
                 disabled={actionPending}
-                className="border border-zinc-600 px-4 py-1.5 text-[10px] uppercase tracking-widest text-zinc-300 transition-colors hover:border-white hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
+                className="border-zinc-750 rounded border bg-[#00FF87]/5 px-4 py-1.5 text-[10px] font-bold uppercase tracking-widest text-[#00FF87] transition-colors hover:bg-[#00FF87]/15 disabled:cursor-not-allowed disabled:opacity-40"
               >
                 {actionPending ? 'CLAIMING...' : 'CLAIM ISSUE'}
               </button>
 
               <button
                 onClick={handleCopy}
-                className="flex items-center gap-1 text-[10px] uppercase tracking-widest text-zinc-500 transition-colors hover:text-zinc-300"
+                className="ml-auto flex items-center gap-1 text-[10px] uppercase tracking-widest text-zinc-500 transition-colors hover:text-zinc-300"
               >
                 {copied ? (
                   <>
@@ -279,154 +294,71 @@ function IssueCard({
   const repoName = issue.repoFullName.split('/')[1] ?? issue.repoFullName;
   const org = issue.repoFullName.split('/')[0] ?? '';
 
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(issue.url);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1500);
+  const difficultyText: Record<string, string> = { E: 'EASY', M: 'MEDIUM', H: 'HARD' };
+  const difficultyColor: Record<string, string> = {
+    E: 'border-emerald-800/60 text-emerald-400 bg-emerald-950/20',
+    M: 'border-amber-800/60 text-amber-400 bg-amber-950/20',
+    H: 'border-red-800/60 text-red-400 bg-red-950/20',
   };
 
   return (
-    <div className="border-b border-[#2d333b] py-6 last:border-0">
-      <div className="mb-3 flex items-start justify-between gap-4">
-        <div className="flex flex-wrap items-center gap-2">
-          <span className="border border-zinc-700 px-2 py-0.5 text-[10px] uppercase text-zinc-400">
-            {org}
-          </span>
-          <span className="text-[10px] uppercase tracking-widest text-zinc-500">/</span>
-          <span className="border border-zinc-700 px-2 py-0.5 text-[10px] uppercase text-zinc-400">
-            {repoName}
-          </span>
-          {issue.difficulty && (
-            <span
-              className={`border px-2 py-0.5 text-[10px] font-bold uppercase ${DIFFICULTY_COLOR[issue.difficulty] ?? 'border-zinc-700 text-zinc-400'}`}
-              title={
-                issue.difficulty === 'E'
-                  ? 'Easy — good for first contributions, lower XP'
-                  : issue.difficulty === 'M'
-                    ? 'Medium — requires some codebase knowledge'
-                    : issue.difficulty === 'H'
-                      ? 'Hard — significant complexity, higher XP'
-                      : ''
-              }
-            >
-              {DIFFICULTY_LABEL[issue.difficulty] ?? issue.difficulty}
-            </span>
-          )}
-          {isClaimed && (
-            <span className="bg-purple-900/50 px-2 py-0.5 text-[10px] uppercase text-purple-300">
-              CLAIMED
-            </span>
-          )}
+    <div className="space-y-4 rounded-lg border border-zinc-800 bg-[#161b22]/10 p-5 transition-all duration-300 hover:border-zinc-700">
+      {/* Monospace Repo and Number + Time */}
+      <div className="flex items-center justify-between gap-4 font-mono text-[11px] text-zinc-400">
+        <div className="flex items-center gap-1.5">
+          <span className="font-bold text-zinc-300">{org}</span>
+          <span className="text-zinc-600">/</span>
+          <span className="font-bold text-zinc-300">{repoName}</span>
+          <span className="text-zinc-600">•</span>
+          <span className="font-mono text-zinc-500">#{issue.githubIssueNumber}</span>
         </div>
-
-        <span className="shrink-0 text-[10px] uppercase tracking-widest text-zinc-600">
-          {timeAgo(issue.fetchedAt)}
-        </span>
+        <span className="text-[10px] text-zinc-500">{timeAgo(issue.fetchedAt)}</span>
       </div>
 
-      {/* Title now opens the detail drawer instead of navigating to GitHub */}
-      <button
-        onClick={() => onOpenDetail(issue)}
-        className="mb-3 block w-full text-left font-serif text-xl leading-snug text-white hover:text-zinc-300"
-      >
-        {issue.title}
-      </button>
-
-      {issue.labels && issue.labels.length > 0 && (
-        <div className="mb-4 flex flex-wrap gap-2">
-          {issue.labels.slice(0, 4).map((label) => (
-            <span
-              key={label}
-              className="border border-[#2d333b] px-2 py-0.5 text-[10px] text-zinc-500"
-            >
-              {label}
-            </span>
-          ))}
-        </div>
-      )}
-
-      <div className="flex items-center gap-3">
-        {isClaimed ? (
-          <>
-            <span className="text-[10px] uppercase tracking-widest text-purple-400">
-              YOUR ISSUE
-            </span>
-
-            <a
-              href={issue.url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center gap-1 border border-zinc-700 px-3 py-1.5 text-[10px] uppercase tracking-widest text-zinc-300 transition-colors hover:bg-zinc-800"
-            >
-              VIEW <ExternalLink className="h-3 w-3" />
-            </a>
-
-            <button
-              onClick={handleCopy}
-              className="flex items-center gap-1 border border-zinc-700 px-3 py-1.5 text-[10px] uppercase tracking-widest text-zinc-300 transition-colors hover:bg-zinc-800"
-            >
-              {copied ? (
-                <>
-                  COPIED <Check className="h-3 w-3" />
-                </>
-              ) : (
-                <>
-                  COPY <Copy className="h-3 w-3" />
-                </>
-              )}
-            </button>
-
-            <button
-              onClick={() => issue.userRecId && onUnclaim(issue.userRecId, issue.id)}
-              disabled={actionPending || !issue.userRecId}
-              className="border border-zinc-700 px-3 py-1.5 text-[10px] uppercase tracking-widest text-zinc-500 transition-colors hover:border-red-800 hover:text-red-400 disabled:cursor-not-allowed disabled:opacity-40"
-            >
-              {actionPending ? '...' : 'UNCLAIM'}
-            </button>
-          </>
+      {/* Badges */}
+      <div className="flex flex-wrap items-center gap-2">
+        {issue.difficulty ? (
+          <span
+            className={`rounded-full border px-2.5 py-0.5 text-[9px] font-bold ${difficultyColor[issue.difficulty]}`}
+          >
+            {difficultyText[issue.difficulty]}
+          </span>
         ) : (
-          <>
-            <button
-              onClick={() => onClaim(issue.id)}
-              disabled={actionPending}
-              className="border border-zinc-600 px-4 py-1.5 text-[10px] uppercase tracking-widest text-zinc-300 transition-colors hover:border-white hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
-            >
-              {actionPending ? 'CLAIMING...' : 'CLAIM ISSUE'}
-            </button>
-
-            <a
-              href={issue.url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center gap-1 text-[10px] uppercase tracking-widest text-zinc-500 transition-colors hover:text-zinc-300"
-            >
-              VIEW <ExternalLink className="h-3 w-3" />
-            </a>
-
-            <button
-              onClick={handleCopy}
-              className="flex items-center gap-1 text-[10px] uppercase tracking-widest text-zinc-500 transition-colors hover:text-zinc-300"
-            >
-              {copied ? (
-                <>
-                  COPIED <Check className="h-3 w-3" />
-                </>
-              ) : (
-                <>
-                  COPY <Copy className="h-3 w-3" />
-                </>
-              )}
-            </button>
-          </>
+          <span className="rounded-full border border-zinc-800 bg-zinc-950/20 px-2.5 py-0.5 text-[9px] font-bold text-zinc-500">
+            STARTER
+          </span>
         )}
-
-        {issue.xpReward && (
-          <span className="ml-auto text-[10px] uppercase tracking-widest text-emerald-600">
-            +{issue.xpReward} XP
+        {isClaimed && (
+          <span className="rounded-full border border-purple-800/60 bg-purple-950/20 px-2.5 py-0.5 text-[9px] font-bold text-purple-300">
+            CLAIMED
           </span>
         )}
+        {issue.xpReward && (
+          <span className="ml-auto text-xs font-bold text-[#00FF87]">+{issue.xpReward} XP</span>
+        )}
+      </div>
+
+      {/* Title & Description */}
+      <div className="space-y-2">
+        <button
+          onClick={() => onOpenDetail(issue)}
+          className="text-left font-serif text-xl font-medium leading-snug text-white transition-colors hover:text-[#00FF87]"
+        >
+          {issue.title}
+        </button>
+        {issue.bodyExcerpt && (
+          <p className="text-zinc-450 line-clamp-2 text-xs leading-relaxed">{issue.bodyExcerpt}</p>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between border-t border-zinc-800/50 pt-3">
+        <button
+          onClick={() => onOpenDetail(issue)}
+          className="ml-auto flex items-center gap-1 text-[11px] font-bold text-[#00FF87] hover:underline"
+        >
+          View Issue <ArrowRight className="h-3 w-3" />
+        </button>
       </div>
     </div>
   );
@@ -440,10 +372,14 @@ export function IssuesList({
   initialData,
   initialFilters,
   repoOptions,
+  completedCount,
+  currentUserLevel,
 }: {
   initialData: IssuesPageResult;
   initialFilters: IssueFilter;
   repoOptions: RepoOption[];
+  completedCount: number;
+  currentUserLevel: number;
 }) {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -457,17 +393,13 @@ export function IssuesList({
   const [repo, setRepo] = useState<string>(initialFilters.repo ?? '');
   const [showClaimed, setShowClaimed] = useState(initialFilters.showClaimed ?? false);
   const [sort, setSort] = useState<string>(initialFilters.sort ?? 'newest');
+  const [category, setCategory] = useState<string>(initialFilters.category ?? 'all');
 
-  // Detail drawer state
+  // Drawer & Mobile menu states
   const [selectedIssue, setSelectedIssue] = useState<IssueWithStatus | null>(null);
+  const [isMobileFiltersOpen, setIsMobileFiltersOpen] = useState(false);
 
-  // Keep drawer in sync when the underlying list refreshes (e.g. after claim/unclaim)
-  useEffect(() => {
-    if (!selectedIssue) return;
-    const updated = initialData.issues.find((i) => i.id === selectedIssue.id);
-    if (updated) setSelectedIssue(updated);
-  }, [initialData.issues]);
-
+  // Sync state with filters
   useEffect(() => {
     setSearch(initialFilters.search ?? '');
     setState(initialFilters.state ?? 'open');
@@ -475,8 +407,16 @@ export function IssuesList({
     setRepo(initialFilters.repo ?? '');
     setShowClaimed(initialFilters.showClaimed ?? false);
     setSort(initialFilters.sort ?? 'newest');
+    setCategory(initialFilters.category ?? 'all');
   }, [initialFilters]);
 
+  // Keep drawer details updated
+  useEffect(() => {
+    if (!selectedIssue) return;
+    const updated = initialData.issues.find((i) => i.id === selectedIssue.id);
+    if (updated) setSelectedIssue(updated);
+  }, [initialData.issues]);
+
   const navigate = useCallback(
     (
       overrides: Partial<{
@@ -487,16 +427,18 @@ export function IssuesList({
         claimed: string;
         page: string;
         sort: string;
+        category: string;
       }>,
     ) => {
       const params = new URLSearchParams(searchParams.toString());
-      const q = overrides.q ?? search;
-      const st = overrides.state ?? state;
-      const diff = overrides.difficulty ?? difficulty;
-      const r = overrides.repo ?? repo;
-      const sc = overrides.claimed ?? String(showClaimed);
+      const q = overrides.q !== undefined ? overrides.q : search;
+      const st = overrides.state !== undefined ? overrides.state : state;
+      const diff = overrides.difficulty !== undefined ? overrides.difficulty : difficulty;
+      const r = overrides.repo !== undefined ? overrides.repo : repo;
+      const sc = overrides.claimed !== undefined ? overrides.claimed : String(showClaimed);
       const srt = overrides.sort !== undefined ? overrides.sort : sort;
-      const pg = overrides.page ?? '1';
+      const pg = overrides.page !== undefined ? overrides.page : '1';
+      const cat = overrides.category !== undefined ? overrides.category : category;
 
       if (q) {
         params.set('q', q);
@@ -534,6 +476,12 @@ export function IssuesList({
         params.delete('sort');
       }
 
+      if (cat && cat !== 'all') {
+        params.set('category', cat);
+      } else {
+        params.delete('category');
+      }
+
       if (pg && pg !== '1') {
         params.set('page', pg);
       } else {
@@ -544,7 +492,7 @@ export function IssuesList({
         router.push(`/issues${params.size > 0 ? `?${params.toString()}` : ''}`);
       });
     },
-    [router, searchParams, search, state, difficulty, repo, showClaimed, sort],
+    [router, searchParams, search, state, difficulty, repo, showClaimed, sort, category],
   );
 
   const handleClaim = async (issueId: number) => {
@@ -574,81 +522,199 @@ export function IssuesList({
   const totalPages = Math.ceil(initialData.total / initialData.pageSize);
   const currentPage = initialData.page;
 
-  return (
-    <div>
-      {/* Filters */}
-      <div className="mb-10 flex flex-wrap items-center gap-3">
-        <div className="relative min-w-[180px] flex-1">
-          <Search className="absolute left-3 top-1/2 h-3 w-3 -translate-y-1/2 text-zinc-500" />
-          <input
-            type="text"
-            placeholder="SEARCH ISSUES"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            onKeyDown={(e) => e.key === 'Enter' && navigate({ q: search, page: '1' })}
-            className="w-full border border-[#2d333b] bg-[#161b22] py-2 pl-9 pr-4 text-[11px] uppercase tracking-widest text-zinc-300 placeholder-zinc-600 outline-none focus:border-zinc-500"
-          />
+  const targetUnlock = completedCount < 3 ? 3 : completedCount < 7 ? 7 : 15;
+  const nextLevelLabel = completedCount < 3 ? 'L1' : completedCount < 7 ? 'L2' : 'L3';
+
+  // Toggle helpers for multi-select
+  const handleDifficultyToggle = (diff: string) => {
+    const activeDiffs = difficulty ? difficulty.split(',').filter(Boolean) : [];
+    let nextDiffs: string[];
+    if (activeDiffs.includes(diff)) {
+      nextDiffs = activeDiffs.filter((d) => d !== diff);
+    } else {
+      nextDiffs = [...activeDiffs, diff];
+    }
+    const nextVal = nextDiffs.join(',');
+    setDifficulty(nextVal);
+    navigate({ difficulty: nextVal, page: '1' });
+  };
+
+  const handleRepoToggle = (repoValue: string) => {
+    const activeRepos = repo ? repo.split(',').filter(Boolean) : repoOptions.map((o) => o.value);
+    let nextRepos: string[];
+    if (activeRepos.includes(repoValue)) {
+      nextRepos = activeRepos.filter((r) => r !== repoValue);
+    } else {
+      nextRepos = [...activeRepos, repoValue];
+    }
+    const nextVal = nextRepos.length === repoOptions.length ? '' : nextRepos.join(',');
+    setRepo(nextVal);
+    navigate({ repo: nextVal, page: '1' });
+  };
+
+  // Reusable Sidebar content component
+  const SidebarContent = () => (
+    <div className="space-y-6">
+      {/* Progress widget */}
+      <div className="space-y-4 rounded-lg border border-zinc-800 bg-[#161b22]/20 p-5">
+        <div className="flex items-center justify-between">
+          <span className="font-mono text-[11px] font-bold uppercase tracking-widest text-zinc-400">
+            {completedCount < 3
+              ? 'L0 Progress'
+              : completedCount < 7
+                ? 'L1 Progress'
+                : completedCount < 15
+                  ? 'L2 Progress'
+                  : 'L3 Achieved'}
+          </span>
+          <span className="font-mono text-xs font-bold text-[#00FF87]">
+            {completedCount >= 15
+              ? `${completedCount} Solved`
+              : `Solved ${completedCount}/${targetUnlock}`}
+          </span>
+        </div>
+        {completedCount < 15 && (
+          <div className="h-1.5 w-full overflow-hidden rounded-full border border-zinc-800/50 bg-zinc-950">
+            <div
+              className="h-full rounded-full bg-[#00FF87] shadow-[0_0_8px_rgba(0,255,135,0.4)] transition-all duration-500"
+              style={{ width: `${(completedCount / targetUnlock) * 100}%` }}
+            />
+          </div>
+        )}
+        <div className="font-mono text-[10px] uppercase tracking-wider text-zinc-500">
+          {completedCount < 15
+            ? `${targetUnlock - completedCount} issues away from ${nextLevelLabel} unlock`
+            : 'All levels unlocked!'}
         </div>
+      </div>
 
-        {repoOptions.length > 0 && (
-          <select
-            value={repo}
-            onChange={(e) => {
-              setRepo(e.target.value);
-              navigate({ repo: e.target.value, page: '1' });
+      {/* Segmented Status Switcher */}
+      <div className="space-y-2">
+        <label className="font-mono text-[10px] font-bold uppercase tracking-widest text-zinc-500">
+          Issue Status
+        </label>
+        <div className="grid grid-cols-2 rounded-md border border-zinc-800 bg-zinc-950/60 p-1">
+          <button
+            onClick={() => {
+              setState('open');
+              navigate({ state: 'open', page: '1' });
             }}
-            className="border border-[#2d333b] bg-[#161b22] px-3 py-2 text-[11px] uppercase tracking-widest text-zinc-300 outline-none focus:border-zinc-500"
+            className={`rounded py-1.5 font-mono text-[11px] font-bold uppercase tracking-wider transition-all ${
+              state === 'open'
+                ? 'bg-zinc-800 text-white shadow-sm'
+                : 'text-zinc-500 hover:text-zinc-300'
+            }`}
           >
-            <option value="">ALL REPOS</option>
-            {repoOptions.map((opt) => (
-              <option key={opt.value} value={opt.value}>
-                {opt.label}
-              </option>
-            ))}
-          </select>
-        )}
+            Open
+          </button>
+          <button
+            onClick={() => {
+              setState('closed');
+              navigate({ state: 'closed', page: '1' });
+            }}
+            className={`rounded py-1.5 font-mono text-[11px] font-bold uppercase tracking-wider transition-all ${
+              state === 'closed'
+                ? 'bg-zinc-800 text-white shadow-sm'
+                : 'text-zinc-500 hover:text-zinc-300'
+            }`}
+          >
+            Closed
+          </button>
+        </div>
+      </div>
 
-        <select
-          value={difficulty}
-          onChange={(e) => {
-            setDifficulty(e.target.value);
-            navigate({ difficulty: e.target.value, page: '1' });
-          }}
-          className="border border-[#2d333b] bg-[#161b22] px-3 py-2 text-[11px] uppercase tracking-widest text-zinc-300 outline-none focus:border-zinc-500"
-        >
-          <option value="">ALL LEVELS</option>
-          <option value="E">L1 — EASY</option>
-          <option value="M">L2 — MEDIUM</option>
-          <option value="H">L3 — HARD</option>
-        </select>
+      {/* Difficulty Filter */}
+      <div className="space-y-2">
+        <label className="font-mono text-[10px] font-bold uppercase tracking-widest text-zinc-500">
+          Difficulty
+        </label>
+        <div className="flex flex-col gap-2">
+          {[
+            {
+              value: 'E',
+              label: 'EASY',
+              color: 'border-emerald-800/60 text-emerald-400 bg-emerald-950/20',
+            },
+            {
+              value: 'M',
+              label: 'MEDIUM',
+              color: 'border-amber-800/60 text-amber-400 bg-amber-950/20',
+            },
+            { value: 'H', label: 'HARD', color: 'border-red-800/60 text-red-400 bg-red-950/20' },
+          ].map((opt) => {
+            const activeDiffs = difficulty ? difficulty.split(',').filter(Boolean) : [];
+            const isActive = activeDiffs.includes(opt.value);
+            return (
+              <button
+                key={opt.value}
+                onClick={() => handleDifficultyToggle(opt.value)}
+                className={`flex items-center justify-between rounded-md border px-4 py-2.5 font-mono text-xs font-bold tracking-wider transition-all ${
+                  isActive
+                    ? `${opt.color} shadow-sm`
+                    : 'border-zinc-800 bg-[#161b22]/20 text-zinc-400 hover:border-zinc-700 hover:text-white'
+                }`}
+              >
+                <span>{opt.label}</span>
+                {isActive && <Check className="h-3.5 w-3.5" />}
+              </button>
+            );
+          })}
+        </div>
+      </div>
 
-        <select
-          value={state}
-          onChange={(e) => {
-            const v = e.target.value as 'open' | 'closed';
-            setState(v);
-            navigate({ state: v, page: '1' });
-          }}
-          className="border border-[#2d333b] bg-[#161b22] px-3 py-2 text-[11px] uppercase tracking-widest text-zinc-300 outline-none focus:border-zinc-500"
-        >
-          <option value="open">OPEN</option>
-          <option value="closed">CLOSED</option>
-        </select>
+      {/* Repositories checklist */}
+      {repoOptions.length > 0 && (
+        <div className="space-y-2">
+          <label className="font-mono text-[10px] font-bold uppercase tracking-widest text-zinc-500">
+            Repositories
+          </label>
+          <div className="max-h-60 space-y-2 divide-y divide-zinc-800/40 overflow-y-auto rounded-md border border-zinc-800 bg-[#161b22]/10 p-3">
+            {repoOptions.map((opt) => {
+              const activeRepos = repo
+                ? repo.split(',').filter(Boolean)
+                : repoOptions.map((o) => o.value);
+              const isChecked = activeRepos.includes(opt.value);
+              return (
+                <label
+                  key={opt.value}
+                  className="flex cursor-pointer items-start gap-2.5 pt-2 text-xs text-zinc-300 transition-colors first:pt-0 hover:text-white"
+                >
+                  <input
+                    type="checkbox"
+                    checked={isChecked}
+                    onChange={() => handleRepoToggle(opt.value)}
+                    className="mt-0.5 rounded border-zinc-800 bg-zinc-950 text-[#00FF87] accent-[#00FF87] focus:outline-none focus:ring-0 focus:ring-offset-0"
+                  />
+                  <span className="break-all font-mono">{opt.label}</span>
+                </label>
+              );
+            })}
+          </div>
+        </div>
+      )}
 
+      {/* Sort selection */}
+      <div className="space-y-2">
+        <label className="font-mono text-[10px] font-bold uppercase tracking-widest text-zinc-500">
+          Sort By
+        </label>
         <select
           value={sort}
           onChange={(e) => {
             setSort(e.target.value);
             navigate({ sort: e.target.value, page: '1' });
           }}
-          className="border border-[#2d333b] bg-[#161b22] px-3 py-2 text-[11px] uppercase tracking-widest text-zinc-300 outline-none focus:border-zinc-500"
+          className="w-full rounded border border-zinc-800 bg-zinc-950/60 p-2 font-mono text-xs tracking-wider text-zinc-300 outline-none focus:border-zinc-700"
         >
           <option value="newest">NEWEST</option>
           <option value="xp_desc">HIGHEST XP</option>
           <option value="xp_asc">LOWEST XP</option>
         </select>
+      </div>
 
-        <label className="flex cursor-pointer items-center gap-2 text-[11px] uppercase tracking-widest text-zinc-400">
+      {/* Claimed toggle */}
+      <div className="pt-2">
+        <label className="flex cursor-pointer items-center gap-2 font-mono text-xs text-zinc-400 transition-colors hover:text-white">
           <input
             type="checkbox"
             checked={showClaimed}
@@ -656,67 +722,224 @@ export function IssuesList({
               setShowClaimed(e.target.checked);
               navigate({ claimed: String(e.target.checked), page: '1' });
             }}
-            className="accent-purple-500"
+            className="rounded border-zinc-800 bg-zinc-950 text-[#00FF87] accent-[#00FF87] focus:outline-none focus:ring-0 focus:ring-offset-0"
           />
-          SHOW CLAIMED
+          <span className="uppercase tracking-wider">Show Claimed Issues</span>
         </label>
       </div>
+    </div>
+  );
 
-      {actionError && (
-        <div className="mb-6 border border-red-800 bg-red-900/20 px-4 py-3 text-[11px] uppercase tracking-widest text-red-400">
-          {actionError}
-        </div>
-      )}
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-12">
+        {/* Left/Center main stream (8 columns) */}
+        <div className="space-y-6 lg:col-span-8">
+          {actionError && (
+            <div className="rounded-md border border-red-800 bg-red-900/20 px-4 py-3 text-[11px] uppercase tracking-widest text-red-400">
+              {actionError}
+            </div>
+          )}
 
-      {/* Count */}
-      <div className="mb-6 text-[11px] uppercase tracking-widest text-zinc-500">
-        {isPending ? 'LOADING...' : `${initialData.total} ISSUES`}
-      </div>
+          {/* Search and Category chips */}
+          <div className="space-y-4">
+            <div className="relative">
+              <Search className="absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-500" />
+              <input
+                type="text"
+                placeholder="SEARCH ISSUES BY TITLE, LABELS, REPOS..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && navigate({ q: search, page: '1' })}
+                className="placeholder-zinc-650 w-full rounded-md border border-zinc-800 bg-[#161b22]/30 py-3 pl-11 pr-4 font-mono text-xs tracking-widest text-zinc-300 outline-none transition-all focus:border-zinc-700 focus:bg-[#161b22]/50"
+              />
+            </div>
 
-      {/* List */}
-      <div className={isPending ? 'opacity-50 transition-opacity' : ''}>
-        {initialData.issues.length === 0 ? (
-          <div className="py-12 text-center text-[11px] uppercase tracking-widest text-zinc-600">
-            No issues found.
+            {/* Category chips */}
+            <div className="flex flex-wrap gap-2">
+              {['all', 'bugs', 'docs', 'feature', 'tests'].map((cat) => {
+                const isActive = category === cat;
+                return (
+                  <button
+                    key={cat}
+                    onClick={() => {
+                      setCategory(cat);
+                      navigate({ category: cat, page: '1' });
+                    }}
+                    className={`rounded-full border px-4 py-1.5 font-mono text-[10px] font-bold uppercase tracking-wider transition-all ${
+                      isActive
+                        ? 'border-[#00FF87] bg-[#00FF87]/10 text-[#00FF87] shadow-[0_0_12px_rgba(0,255,135,0.15)]'
+                        : 'border-zinc-800 bg-transparent text-zinc-400 hover:border-zinc-700 hover:text-white'
+                    }`}
+                  >
+                    {cat}
+                  </button>
+                );
+              })}
+            </div>
           </div>
-        ) : (
-          initialData.issues.map((issue) => (
-            <IssueCard
-              key={issue.id}
-              issue={issue}
-              onClaim={handleClaim}
-              onUnclaim={handleUnclaim}
-              actionPending={actionIssueId === issue.id}
-              onOpenDetail={setSelectedIssue}
-            />
-          ))
-        )}
+
+          {/* Level Tabs Row */}
+          <div className="flex flex-col justify-between gap-4 border-b border-zinc-800 pb-3 font-mono sm:flex-row sm:items-center">
+            {/* Tabs */}
+            <div className="flex items-center gap-2">
+              {['L0', 'L1', 'L2', 'L3'].map((tier) => {
+                const tierReq: Record<string, number> = { L0: 0, L1: 3, L2: 7, L3: 15 };
+                const isUnlocked = completedCount >= tierReq[tier]!;
+                const diffMap: Record<string, string> = { L0: 'L0', L1: 'E', L2: 'M', L3: 'H' };
+                const activeDiffs = difficulty.split(',').filter(Boolean);
+                const isActive = activeDiffs.includes(diffMap[tier]!) && activeDiffs.length === 1;
+
+                return (
+                  <button
+                    key={tier}
+                    disabled={!isUnlocked}
+                    onClick={() => {
+                      const targetDiff = diffMap[tier]!;
+                      setDifficulty(targetDiff);
+                      navigate({ difficulty: targetDiff, page: '1' });
+                    }}
+                    className={`flex items-center gap-1.5 border-b-2 px-3 py-1.5 text-xs font-bold transition-all ${
+                      !isUnlocked
+                        ? 'cursor-not-allowed border-transparent text-zinc-600 opacity-40'
+                        : isActive
+                          ? 'border-[#00FF87] bg-[#00FF87]/5 font-black text-[#00FF87]'
+                          : 'border-transparent text-zinc-400 hover:text-white'
+                    }`}
+                  >
+                    {!isUnlocked && <Lock className="h-3 w-3 text-zinc-600" />}
+                    {tier}
+                  </button>
+                );
+              })}
+            </div>
+
+            {/* Right progress hint */}
+            <div className="text-zinc-550 flex items-center gap-2 font-mono text-[11px] uppercase tracking-wider">
+              {completedCount < 3 ? (
+                <>
+                  <Unlock className="h-3.5 w-3.5 text-[#00FF87]" />
+                  <span>Solve {3 - completedCount} more to unlock L1</span>
+                </>
+              ) : completedCount < 7 ? (
+                <>
+                  <Unlock className="h-3.5 w-3.5 text-[#00FF87]" />
+                  <span>Solve {7 - completedCount} more to unlock L2</span>
+                </>
+              ) : completedCount < 15 ? (
+                <>
+                  <Unlock className="h-3.5 w-3.5 text-[#00FF87]" />
+                  <span>Solve {15 - completedCount} more to unlock L3</span>
+                </>
+              ) : (
+                <>
+                  <Unlock className="h-3.5 w-3.5 text-[#00FF87]" />
+                  <span>All levels unlocked!</span>
+                </>
+              )}
+            </div>
+          </div>
+
+          {/* Mobile Filter Button */}
+          <div className="lg:hidden">
+            <button
+              onClick={() => setIsMobileFiltersOpen(true)}
+              className="flex w-full items-center justify-center gap-2 border border-zinc-800 bg-[#161b22]/30 px-4 py-2.5 text-xs text-zinc-300 transition-colors hover:bg-[#161b22]/50 hover:text-white"
+            >
+              <SlidersHorizontal className="h-4 w-4 text-[#00FF87]" />
+              Filter & Sort
+            </button>
+          </div>
+
+          <div className="mb-4 font-mono text-[11px] uppercase tracking-widest text-zinc-500">
+            {isPending ? 'LOADING...' : `${initialData.total} ISSUES`}
+          </div>
+
+          {/* Cards Stream */}
+          <div className={isPending ? 'opacity-50 transition-opacity' : ''}>
+            {initialData.issues.length === 0 ? (
+              <div className="rounded-lg border border-dashed border-zinc-800 py-16 text-center text-xs uppercase tracking-widest text-zinc-600">
+                No issues found.
+              </div>
+            ) : (
+              <div className="space-y-4">
+                {initialData.issues.map((issue) => (
+                  <IssueCard
+                    key={issue.id}
+                    issue={issue}
+                    onClaim={handleClaim}
+                    onUnclaim={handleUnclaim}
+                    actionPending={actionIssueId === issue.id}
+                    onOpenDetail={setSelectedIssue}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <div className="mt-10 flex items-center justify-between border-t border-zinc-800 pt-6 font-mono">
+              <button
+                disabled={currentPage <= 1}
+                onClick={() => navigate({ page: String(currentPage - 1) })}
+                className="flex items-center gap-2 text-[11px] uppercase tracking-widest text-zinc-400 transition-colors hover:text-white disabled:cursor-not-allowed disabled:opacity-30"
+              >
+                <ChevronLeft className="h-3.5 w-3.5" /> PREV
+              </button>
+              <span className="text-[11px] uppercase tracking-widest text-zinc-500">
+                {currentPage} / {totalPages}
+              </span>
+              <button
+                disabled={currentPage >= totalPages}
+                onClick={() => navigate({ page: String(currentPage + 1) })}
+                className="flex items-center gap-2 text-[11px] uppercase tracking-widest text-zinc-400 transition-colors hover:text-white disabled:cursor-not-allowed disabled:opacity-30"
+              >
+                NEXT <ChevronRight className="h-3.5 w-3.5" />
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Right Filtering Sidebar (4 columns, visible only on lg screens) */}
+        <div className="hidden space-y-6 lg:col-span-4 lg:block">
+          <SidebarContent />
+        </div>
       </div>
 
-      {/* Pagination */}
-      {totalPages > 1 && (
-        <div className="mt-10 flex items-center justify-between border-t border-[#2d333b] pt-6">
-          <button
-            disabled={currentPage <= 1}
-            onClick={() => navigate({ page: String(currentPage - 1) })}
-            className="flex items-center gap-2 text-[11px] uppercase tracking-widest text-zinc-400 transition-colors hover:text-white disabled:cursor-not-allowed disabled:opacity-30"
-          >
-            <ChevronLeft className="h-3 w-3" /> PREV
-          </button>
-          <span className="text-[11px] uppercase tracking-widest text-zinc-500">
-            {currentPage} / {totalPages}
-          </span>
-          <button
-            disabled={currentPage >= totalPages}
-            onClick={() => navigate({ page: String(currentPage + 1) })}
-            className="flex items-center gap-2 text-[11px] uppercase tracking-widest text-zinc-400 transition-colors hover:text-white disabled:cursor-not-allowed disabled:opacity-30"
-          >
-            NEXT <ChevronRight className="h-3 w-3" />
-          </button>
+      {/* Mobile Drawer (Backdrop + Slideout Panel) */}
+      {isMobileFiltersOpen && (
+        <div className="fixed inset-0 z-50 flex justify-end lg:hidden">
+          {/* Backdrop */}
+          <div
+            className="fixed inset-0 bg-black/85 backdrop-blur-sm transition-opacity"
+            onClick={() => setIsMobileFiltersOpen(false)}
+          />
+
+          {/* Slide-out drawer */}
+          <div className="relative flex h-full w-80 max-w-full animate-slide-in flex-col border-l border-zinc-800 bg-[#0D0E12] shadow-2xl">
+            {/* Header */}
+            <div className="flex items-center justify-between border-b border-zinc-800 p-6">
+              <h2 className="font-mono text-sm font-bold uppercase tracking-wider text-white">
+                Filters & Sorting
+              </h2>
+              <button
+                onClick={() => setIsMobileFiltersOpen(false)}
+                className="text-zinc-550 hover:text-white"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            {/* Scrollable content */}
+            <div className="flex-1 space-y-6 overflow-y-auto p-6">
+              <SidebarContent />
+            </div>
+          </div>
         </div>
       )}
 
-      {/* Issue Detail Drawer */}
+      {/* Drawer */}
       {selectedIssue && (
         <IssueDetailDrawer
           issue={selectedIssue}
diff --git a/src/app/(app)/issues/page.tsx b/src/app/(app)/issues/page.tsx
index e34b3dda..9f1f9fd0 100644
--- a/src/app/(app)/issues/page.tsx
+++ b/src/app/(app)/issues/page.tsx
@@ -16,6 +16,7 @@ type SearchParams = {
   claimed?: string;
   page?: string;
   sort?: string;
+  category?: string;
 };
 
 export default async function IssuesPage({
@@ -27,7 +28,7 @@ export default async function IssuesPage({
   const sb = await getServerSupabase();
   if (!sb)
     return (
-      <div className="min-h-screen bg-[#111318] p-12 font-mono text-white">Not configured</div>
+      <div className="min-h-screen bg-[#0D0E12] p-12 font-mono text-white">Not configured</div>
     );
 
   const {
@@ -38,27 +39,35 @@ export default async function IssuesPage({
   const filters = {
     search: resolvedSearchParams.q,
     state: (resolvedSearchParams.state === 'closed' ? 'closed' : 'open') as 'open' | 'closed',
-    difficulty: (['E', 'M', 'H'].includes(resolvedSearchParams.difficulty ?? '')
-      ? resolvedSearchParams.difficulty
-      : undefined) as 'E' | 'M' | 'H' | undefined,
+    difficulty: resolvedSearchParams.difficulty,
     repo: resolvedSearchParams.repo,
     showClaimed: resolvedSearchParams.claimed === 'true',
     page: Math.max(1, parseInt(resolvedSearchParams.page ?? '1') || 1),
     sort: (['newest', 'xp_desc', 'xp_asc'].includes(resolvedSearchParams.sort ?? '')
       ? resolvedSearchParams.sort
       : undefined) as 'newest' | 'xp_desc' | 'xp_asc' | undefined,
+    category: (['all', 'bugs', 'docs', 'feature', 'tests'].includes(
+      resolvedSearchParams.category ?? '',
+    )
+      ? resolvedSearchParams.category
+      : 'all') as 'all' | 'bugs' | 'docs' | 'feature' | 'tests',
   };
 
   const service = getServiceSupabase();
 
   let currentUserLevel = 0;
+  let completedCount = 0;
   if (service) {
-    const { data: profile } = await service
-      .from('profiles')
-      .select('level')
-      .eq('id', user.id)
-      .single();
+    const [{ data: profile }, { count }] = await Promise.all([
+      service.from('profiles').select('level').eq('id', user.id).single(),
+      service
+        .from('recommendations')
+        .select('id', { count: 'exact', head: true })
+        .eq('user_id', user.id)
+        .eq('status', 'completed'),
+    ]);
     currentUserLevel = profile?.level ?? 0;
+    completedCount = count ?? 0;
   }
 
   const maintainedRepoNames = new Set<string>();
@@ -144,10 +153,10 @@ export default async function IssuesPage({
   const repoOptions: RepoOption[] = repoResult.ok ? repoResult.data : [];
 
   return (
-    <div className="min-h-screen bg-[#111318] p-12 font-mono text-white">
-      <div className="mx-auto max-w-6xl">
-        <header className="mb-12 border-b border-[#2d333b] pb-6">
-          <div className="mb-4 text-[11px] uppercase tracking-widest text-zinc-500">
+    <div className="min-h-screen bg-[#0D0E12] p-8 font-mono text-white lg:p-12">
+      <div className="mx-auto max-w-7xl">
+        <header className="mb-12 border-b border-zinc-800 pb-6">
+          <div className="mb-4 text-[11px] uppercase tracking-widest text-[#00FF87]">
             02 / ISSUES
           </div>
           <h1 className="font-serif text-4xl text-white">Browse Issues</h1>
@@ -160,7 +169,13 @@ export default async function IssuesPage({
           />
         )}
 
-        <IssuesList initialData={pageData} initialFilters={filters} repoOptions={repoOptions} />
+        <IssuesList
+          initialData={pageData}
+          initialFilters={filters}
+          repoOptions={repoOptions}
+          completedCount={completedCount}
+          currentUserLevel={currentUserLevel}
+        />
       </div>
     </div>
   );
diff --git a/src/app/(app)/nav-items.tsx b/src/app/(app)/nav-items.tsx
index d00ece80..1d363e17 100644
--- a/src/app/(app)/nav-items.tsx
+++ b/src/app/(app)/nav-items.tsx
@@ -6,10 +6,10 @@ import {
   LayoutDashboard,
   CheckCircle2,
   GitPullRequest,
+  Shield,
   User,
   Trophy,
   Inbox,
-  Shield,
   Activity,
   Settings,
 } from 'lucide-react';
@@ -18,7 +18,7 @@ import { isActiveRoute } from '@/lib/nav-utils';
 const CORE_NAV = [
   { name: 'DASHBOARD', href: '/dashboard', icon: LayoutDashboard },
   { name: 'ISSUES', href: '/issues', icon: CheckCircle2 },
-  { name: 'MY PRS', href: '/my-prs', icon: GitPullRequest },
+  { name: 'PULL REQUESTS', href: '/my-prs', icon: GitPullRequest },
 ];
 
 export function NavItems({
diff --git a/src/app/(app)/pipelines/page.tsx b/src/app/(app)/pipelines/page.tsx
new file mode 100644
index 00000000..bb7ea0cf
--- /dev/null
+++ b/src/app/(app)/pipelines/page.tsx
@@ -0,0 +1,15 @@
+export default function PipelinesPage() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-[#0D0E12] p-8 font-mono text-white lg:p-12">
+      <div className="max-w-md rounded-lg border border-zinc-800 bg-[#161b22]/30 p-8 text-center shadow-xl">
+        <h1 className="mb-4 font-serif text-3xl text-white">Pipelines</h1>
+        <p className="mb-6 text-sm text-zinc-400">
+          Track test suites, compilation, and deployment pipelines.
+        </p>
+        <span className="inline-block border border-[#00FF87]/20 bg-[#00FF87]/5 px-3 py-1.5 font-mono text-[10px] uppercase tracking-widest text-[#00FF87]">
+          Under Construction
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(app)/repositories/page.tsx b/src/app/(app)/repositories/page.tsx
new file mode 100644
index 00000000..cea0bf58
--- /dev/null
+++ b/src/app/(app)/repositories/page.tsx
@@ -0,0 +1,15 @@
+export default function RepositoriesPage() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-[#0D0E12] p-8 font-mono text-white lg:p-12">
+      <div className="max-w-md rounded-lg border border-zinc-800 bg-[#161b22]/30 p-8 text-center shadow-xl">
+        <h1 className="mb-4 font-serif text-3xl text-white">Repositories</h1>
+        <p className="mb-6 text-sm text-zinc-400">
+          Browse and manage your linked repositories and organizations.
+        </p>
+        <span className="inline-block border border-[#00FF87]/20 bg-[#00FF87]/5 px-3 py-1.5 font-mono text-[10px] uppercase tracking-widest text-[#00FF87]">
+          Under Construction
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(app)/security/page.tsx b/src/app/(app)/security/page.tsx
new file mode 100644
index 00000000..e8a55fc5
--- /dev/null
+++ b/src/app/(app)/security/page.tsx
@@ -0,0 +1,15 @@
+export default function AppSecurityPage() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-[#0D0E12] p-8 font-mono text-white lg:p-12">
+      <div className="max-w-md rounded-lg border border-zinc-800 bg-[#161b22]/30 p-8 text-center shadow-xl">
+        <h1 className="mb-4 font-serif text-3xl text-white">Security</h1>
+        <p className="mb-6 text-sm text-zinc-400">
+          Review repository security scans, dependency updates, and alerts.
+        </p>
+        <span className="inline-block border border-[#00FF87]/20 bg-[#00FF87]/5 px-3 py-1.5 font-mono text-[10px] uppercase tracking-widest text-[#00FF87]">
+          Under Construction
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/actions/issues.ts b/src/app/actions/issues.ts
index 2078c306..f9cd85a9 100644
--- a/src/app/actions/issues.ts
+++ b/src/app/actions/issues.ts
@@ -9,15 +9,22 @@ import { repoFilterPattern } from './issues-helpers';
 import { getInstallOctokit } from '@/lib/github/app';
 
 const PAGE_SIZE = 10;
+const DIFFICULTY_VALUES = ['E', 'M', 'H'] as const;
+type DifficultyValue = (typeof DIFFICULTY_VALUES)[number];
+
+function isDifficultyValue(value: string): value is DifficultyValue {
+  return (DIFFICULTY_VALUES as readonly string[]).includes(value);
+}
 
 export type IssueFilter = {
   search?: string;
   state?: 'open' | 'closed';
-  difficulty?: 'E' | 'M' | 'H';
+  difficulty?: string;
   repo?: string;
   showClaimed?: boolean;
   page?: number;
   sort?: 'newest' | 'xp_desc' | 'xp_asc';
+  category?: 'all' | 'bugs' | 'docs' | 'feature' | 'tests';
 };
 
 export type IssueWithStatus = {
@@ -25,6 +32,7 @@ export type IssueWithStatus = {
   repoFullName: string;
   githubIssueNumber: number;
   title: string;
+  bodyExcerpt: string | null;
   difficulty: 'E' | 'M' | 'H' | null;
   xpReward: number | null;
   labels: string[] | null;
@@ -160,7 +168,13 @@ export async function getIssuesPage(filters: IssueFilter): Promise<Result<Issues
   if (!repoOptionsRes.ok) {
     return err(repoOptionsRes.error.code, repoOptionsRes.error.message);
   }
-  const allowedRepos = repoOptionsRes.data.map((opt) => opt.value);
+  let allowedRepos = repoOptionsRes.data.map((opt) => opt.value);
+  if (filters.repo) {
+    const selectedRepos = filters.repo.split(',').filter(Boolean);
+    if (selectedRepos.length > 0) {
+      allowedRepos = allowedRepos.filter((r) => selectedRepos.includes(r));
+    }
+  }
   if (allowedRepos.length === 0) {
     return ok({
       issues: [],
@@ -177,7 +191,7 @@ export async function getIssuesPage(filters: IssueFilter): Promise<Result<Issues
 
   query = query
     .select(
-      'id, repo_full_name, github_issue_number, title, difficulty, xp_reward, labels, state, url, fetched_at',
+      'id, repo_full_name, github_issue_number, title, body_excerpt, difficulty, xp_reward, labels, state, url, fetched_at',
       { count: 'exact' },
     )
     .eq('state', filters.state ?? 'open')
@@ -195,11 +209,33 @@ export async function getIssuesPage(filters: IssueFilter): Promise<Result<Issues
   }
 
   if (filters.difficulty) {
-    query = query.eq('difficulty', filters.difficulty);
+    const diffs = filters.difficulty.split(',').filter(Boolean);
+    const standardDiffs = diffs.filter(isDifficultyValue);
+    const diffParts: string[] = [];
+    if (standardDiffs.length > 0) {
+      diffParts.push(`difficulty.in.(${standardDiffs.join(',')})`);
+    }
+    if (diffs.includes('L0')) {
+      diffParts.push('difficulty.is.null');
+    }
+    if (diffParts.length > 0) {
+      query = query.or(diffParts.join(','));
+    }
   }
-  const repoPattern = repoFilterPattern(filters.repo);
-  if (repoPattern) {
-    query = query.ilike('repo_full_name', repoPattern);
+
+  if (filters.category && filters.category !== 'all') {
+    const cat = filters.category;
+    if (cat === 'bugs') {
+      query = query.or('labels.cs.{"bug","bugs","kind/bug"},title.ilike.%bug%');
+    } else if (cat === 'docs') {
+      query = query.or(
+        'labels.cs.{"documentation","docs","doc","kind/documentation"},title.ilike.%doc%',
+      );
+    } else if (cat === 'feature') {
+      query = query.or('labels.cs.{"feature","enhancement","kind/feature"},title.ilike.%feature%');
+    } else if (cat === 'tests') {
+      query = query.or('labels.cs.{"test","tests","testing","kind/test"},title.ilike.%test%');
+    }
   }
 
   const { data, count, error } = await query;
@@ -210,6 +246,7 @@ export async function getIssuesPage(filters: IssueFilter): Promise<Result<Issues
     repo_full_name: string;
     github_issue_number: number;
     title: string;
+    body_excerpt: string | null;
     difficulty: string | null;
     xp_reward: number | null;
     labels: string[] | null;
@@ -238,6 +275,7 @@ export async function getIssuesPage(filters: IssueFilter): Promise<Result<Issues
       repoFullName: i.repo_full_name,
       githubIssueNumber: i.github_issue_number,
       title: i.title,
+      bodyExcerpt: i.body_excerpt,
       difficulty: i.difficulty as 'E' | 'M' | 'H' | null,
       xpReward: i.xp_reward,
       labels: i.labels,