diff --git a/frontend/src/components/compliance/ControlsTable.tsx b/frontend/src/components/compliance/ControlsTable.tsx
index 616c467..ba133b6 100644
--- a/frontend/src/components/compliance/ControlsTable.tsx
+++ b/frontend/src/components/compliance/ControlsTable.tsx
@@ -1,26 +1,42 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { ChevronDown, ChevronRight, Search, Filter } from "lucide-react";
+import { ChevronDown, ChevronRight, Search, Filter, ExternalLink } from "lucide-react";
 import type { ComplianceControlStatus } from "../../api/compliance";
 
 interface ControlsTableProps {
   controls: ComplianceControlStatus[];
 }
 
-const STATUS_COLORS: Record<string, { bg: string; text: string; dot: string }> = {
-  covered: { bg: "bg-green-500/10", text: "text-green-400", dot: "bg-green-500" },
-  partially_covered: { bg: "bg-yellow-500/10", text: "text-yellow-400", dot: "bg-yellow-500" },
-  not_covered: { bg: "bg-red-500/10", text: "text-red-400", dot: "bg-red-500" },
-  not_evaluated: { bg: "bg-gray-500/10", text: "text-gray-400", dot: "bg-gray-500" },
+const STATUS_COLORS: Record<string, { bg: string; text: string; dot: string; border: string }> = {
+  covered:          { bg: "bg-green-500/10",  text: "text-green-400",  dot: "bg-green-500",  border: "border-green-500/20" },
+  partially_covered:{ bg: "bg-yellow-500/10", text: "text-yellow-400", dot: "bg-yellow-500", border: "border-yellow-500/20" },
+  not_covered:      { bg: "bg-red-500/10",    text: "text-red-400",    dot: "bg-red-500",    border: "border-red-500/20" },
+  not_evaluated:    { bg: "bg-gray-500/10",   text: "text-gray-400",   dot: "bg-gray-500",   border: "border-gray-600/20" },
 };
 
 const STATUS_LABELS: Record<string, string> = {
-  covered: "Covered",
+  covered:           "Covered",
   partially_covered: "Partial",
-  not_covered: "Not Covered",
-  not_evaluated: "Not Evaluated",
+  not_covered:       "Not Covered",
+  not_evaluated:     "Not Evaluated",
 };
 
+function ScoreBar({ score }: { score: number }) {
+  const color =
+    score >= 70 ? "bg-green-500"
+    : score >= 30 ? "bg-yellow-500"
+    : score > 0  ? "bg-red-500"
+    : "bg-gray-700";
+  return (
+    <div className="flex items-center gap-2">
+      <div className="h-1.5 w-16 rounded-full bg-gray-800 overflow-hidden">
+        <div className={`h-full rounded-full ${color} transition-all`} style={{ width: `${score}%` }} />
+      </div>
+      <span className="text-xs font-medium text-gray-300 tabular-nums w-8">{score.toFixed(0)}</span>
+    </div>
+  );
+}
+
 export default function ControlsTable({ controls }: ControlsTableProps) {
   const navigate = useNavigate();
   const [expandedId, setExpandedId] = useState<string | null>(null);
@@ -28,10 +44,8 @@ export default function ControlsTable({ controls }: ControlsTableProps) {
   const [categoryFilter, setCategoryFilter] = useState<string>("all");
   const [search, setSearch] = useState("");
 
-  // Extract unique categories
   const categories = [...new Set(controls.map((c) => c.category).filter(Boolean))] as string[];
 
-  // Apply filters
   const filteredControls = controls.filter((c) => {
     if (statusFilter !== "all" && c.status !== statusFilter) return false;
     if (categoryFilter !== "all" && c.category !== categoryFilter) return false;
@@ -39,23 +53,20 @@ export default function ControlsTable({ controls }: ControlsTableProps) {
       const q = search.toLowerCase();
       return (
         c.control_id.toLowerCase().includes(q) ||
-        c.title.toLowerCase().includes(q)
+        c.title.toLowerCase().includes(q) ||
+        (c.category || "").toLowerCase().includes(q)
       );
     }
     return true;
   });
 
-  const toggleExpand = (controlId: string) => {
-    setExpandedId(expandedId === controlId ? null : controlId);
-  };
+  const toggleExpand = (id: string) => setExpandedId(expandedId === id ? null : id);
 
   return (
-    <div>
-      {/* Filters row */}
-      <div className="mb-4 flex flex-wrap items-center gap-3">
-        <div className="flex items-center gap-2">
-          <Filter className="h-4 w-4 text-gray-400" />
-        </div>
+    <div className="rounded-xl border border-gray-800 bg-gray-900">
+      {/* Filters */}
+      <div className="flex flex-wrap items-center gap-3 border-b border-gray-800 px-4 py-3">
+        <Filter className="h-3.5 w-3.5 shrink-0 text-gray-500" />
 
         <select
           value={statusFilter}
@@ -69,143 +80,159 @@ export default function ControlsTable({ controls }: ControlsTableProps) {
           <option value="not_evaluated">Not Evaluated</option>
         </select>
 
-        <select
-          value={categoryFilter}
-          onChange={(e) => setCategoryFilter(e.target.value)}
-          className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-xs text-gray-200 focus:border-cyan-500 focus:outline-none"
-        >
-          <option value="all">All Categories</option>
-          {categories.map((cat) => (
-            <option key={cat} value={cat}>
-              {cat}
-            </option>
-          ))}
-        </select>
+        {categories.length > 0 && (
+          <select
+            value={categoryFilter}
+            onChange={(e) => setCategoryFilter(e.target.value)}
+            className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-xs text-gray-200 focus:border-cyan-500 focus:outline-none"
+          >
+            <option value="all">All Categories</option>
+            {categories.map((cat) => (
+              <option key={cat} value={cat}>{cat}</option>
+            ))}
+          </select>
+        )}
 
-        <div className="relative flex-1 max-w-xs">
+        <div className="relative max-w-xs flex-1">
           <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-gray-500" />
           <input
             type="text"
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            placeholder="Search by ID or title..."
+            placeholder="Search ID or title…"
             className="w-full rounded-lg border border-gray-700 bg-gray-800 py-1.5 pl-8 pr-3 text-xs text-gray-200 placeholder-gray-500 focus:border-cyan-500 focus:outline-none"
           />
         </div>
 
         <span className="ml-auto text-xs text-gray-500">
-          {filteredControls.length} of {controls.length} controls
+          {filteredControls.length} / {controls.length}
         </span>
       </div>
 
       {/* Table */}
-      <div className="overflow-hidden rounded-xl border border-gray-800">
-        <table className="w-full">
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
           <thead>
-            <tr className="bg-gray-800/50 text-left text-xs text-gray-500 uppercase tracking-wider">
-              <th className="w-8 px-3 py-2.5" />
-              <th className="px-3 py-2.5">Control</th>
-              <th className="px-3 py-2.5">Title</th>
-              <th className="px-3 py-2.5 hidden lg:table-cell">Category</th>
-              <th className="px-3 py-2.5">Status</th>
-              <th className="px-3 py-2.5">Score</th>
-              <th className="px-3 py-2.5">Techniques</th>
+            <tr className="border-b border-gray-800 text-left text-xs text-gray-500 uppercase tracking-wider">
+              <th className="w-8 px-4 py-3" />
+              <th className="px-4 py-3 whitespace-nowrap">Control ID</th>
+              <th className="px-4 py-3">Title</th>
+              <th className="hidden px-4 py-3 lg:table-cell whitespace-nowrap">Category</th>
+              <th className="px-4 py-3">Status</th>
+              <th className="px-4 py-3 whitespace-nowrap">Score</th>
+              <th className="px-4 py-3 whitespace-nowrap">Techniques</th>
             </tr>
           </thead>
+
           <tbody className="divide-y divide-gray-800/50">
+            {filteredControls.length === 0 && (
+              <tr>
+                <td colSpan={7} className="px-4 py-10 text-center text-sm text-gray-500">
+                  No controls match the current filters.
+                </td>
+              </tr>
+            )}
+
             {filteredControls.map((control) => {
               const isExpanded = expandedId === control.control_id;
               const statusStyle = STATUS_COLORS[control.status] || STATUS_COLORS.not_evaluated;
 
               return (
-                <tbody key={control.control_id}>
+                <>
+                  {/* Main row */}
                   <tr
-                    className="cursor-pointer transition-colors hover:bg-gray-800/30"
+                    key={control.control_id}
+                    className={`cursor-pointer transition-colors hover:bg-gray-800/40 ${
+                      isExpanded ? "bg-gray-800/20" : ""
+                    }`}
                     onClick={() => toggleExpand(control.control_id)}
                   >
-                    <td className="px-3 py-2.5">
-                      {isExpanded ? (
-                        <ChevronDown className="h-3.5 w-3.5 text-gray-400" />
-                      ) : (
-                        <ChevronRight className="h-3.5 w-3.5 text-gray-400" />
-                      )}
+                    <td className="px-4 py-3">
+                      {isExpanded
+                        ? <ChevronDown className="h-4 w-4 text-cyan-400" />
+                        : <ChevronRight className="h-4 w-4 text-gray-500" />
+                      }
                     </td>
-                    <td className="px-3 py-2.5 font-mono text-xs font-medium text-cyan-400">
+                    <td className="px-4 py-3 font-mono text-xs font-semibold text-cyan-400 whitespace-nowrap">
                       {control.control_id}
                     </td>
-                    <td className="px-3 py-2.5 text-sm text-gray-200 truncate max-w-[200px]">
-                      {control.title}
+                    <td className="px-4 py-3 text-sm text-gray-200 max-w-[260px]">
+                      <span className="line-clamp-2">{control.title}</span>
                     </td>
-                    <td className="px-3 py-2.5 text-xs text-gray-500 hidden lg:table-cell">
-                      {control.category}
+                    <td className="hidden px-4 py-3 text-xs text-gray-400 lg:table-cell">
+                      {control.category || "—"}
                     </td>
-                    <td className="px-3 py-2.5">
+                    <td className="px-4 py-3">
                       <span
-                        className={`inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-medium ${statusStyle.bg} ${statusStyle.text}`}
+                        className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[10px] font-medium ${statusStyle.bg} ${statusStyle.text} ${statusStyle.border}`}
                       >
                         <span className={`h-1.5 w-1.5 rounded-full ${statusStyle.dot}`} />
-                        {STATUS_LABELS[control.status]}
+                        {STATUS_LABELS[control.status] ?? control.status}
                       </span>
                     </td>
-                    <td className="px-3 py-2.5 text-sm font-medium text-gray-300">
-                      {control.score.toFixed(1)}
+                    <td className="px-4 py-3">
+                      <ScoreBar score={control.score} />
                     </td>
-                    <td className="px-3 py-2.5 text-xs text-gray-400">
-                      {control.techniques_covered}/{control.techniques_count}
+                    <td className="px-4 py-3 text-xs text-gray-400 whitespace-nowrap">
+                      <span className={control.techniques_covered > 0 ? "text-gray-200" : "text-gray-600"}>
+                        {control.techniques_covered}
+                      </span>
+                      <span className="text-gray-600"> / {control.techniques_count}</span>
                     </td>
                   </tr>
 
-                  {/* Expanded row: technique details */}
-                  {isExpanded && control.techniques.length > 0 && (
-                    <tr>
-                      <td colSpan={7} className="bg-gray-800/20 px-6 py-3">
-                        <div className="space-y-1">
-                          <p className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500">
-                            Mapped Techniques
-                          </p>
-                          {control.techniques.map((tech) => {
-                            const techStatusColor =
-                              tech.score >= 70
-                                ? "text-green-400"
-                                : tech.score >= 30
-                                ? "text-yellow-400"
-                                : tech.score > 0
-                                ? "text-red-400"
-                                : "text-gray-500";
+                  {/* Expanded detail row */}
+                  {isExpanded && (
+                    <tr key={`${control.control_id}-expanded`} className="bg-gray-800/10">
+                      <td colSpan={7} className="px-6 pb-4 pt-2">
+                        {control.techniques.length === 0 ? (
+                          <p className="text-xs text-gray-500 italic">No techniques mapped to this control.</p>
+                        ) : (
+                          <div>
+                            <p className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500">
+                              Mapped Techniques ({control.techniques.length})
+                            </p>
+                            <div className="grid gap-1.5 sm:grid-cols-2 lg:grid-cols-3">
+                              {control.techniques.map((tech) => {
+                                const techStyle =
+                                  tech.score >= 70 ? "border-green-500/20 bg-green-500/5 text-green-400"
+                                  : tech.score >= 30 ? "border-yellow-500/20 bg-yellow-500/5 text-yellow-400"
+                                  : tech.score > 0  ? "border-red-500/20 bg-red-500/5 text-red-400"
+                                  : "border-gray-700 bg-gray-800/30 text-gray-500";
 
-                            return (
-                              <div
-                                key={tech.mitre_id}
-                                className="flex items-center justify-between rounded-lg bg-gray-900/50 px-3 py-1.5 cursor-pointer hover:bg-gray-900"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  navigate(`/techniques/${tech.mitre_id}`);
-                                }}
-                              >
-                                <div className="flex items-center gap-2">
-                                  <span className="font-mono text-xs text-cyan-400">
-                                    {tech.mitre_id}
-                                  </span>
-                                  <span className="text-xs text-gray-300">
-                                    {tech.name}
-                                  </span>
-                                </div>
-                                <div className="flex items-center gap-3">
-                                  <span className="text-[10px] text-gray-500">
-                                    {tech.status.replace(/_/g, " ")}
-                                  </span>
-                                  <span className={`text-xs font-medium ${techStatusColor}`}>
-                                    {tech.score.toFixed(1)}
-                                  </span>
-                                </div>
-                              </div>
-                            );
-                          })}
-                        </div>
+                                return (
+                                  <div
+                                    key={tech.mitre_id}
+                                    className={`flex items-center justify-between rounded-lg border px-3 py-2 cursor-pointer hover:brightness-125 transition-all ${techStyle}`}
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      navigate(`/techniques/${tech.mitre_id}`);
+                                    }}
+                                  >
+                                    <div className="flex items-center gap-2 min-w-0">
+                                      <span className="shrink-0 font-mono text-xs font-semibold text-cyan-400">
+                                        {tech.mitre_id}
+                                      </span>
+                                      <span className="truncate text-xs text-gray-300">
+                                        {tech.name}
+                                      </span>
+                                    </div>
+                                    <div className="flex shrink-0 items-center gap-2 pl-2">
+                                      <span className="text-[10px] text-gray-500 capitalize hidden sm:block">
+                                        {tech.status.replace(/_/g, " ")}
+                                      </span>
+                                      <ExternalLink className="h-3 w-3 text-gray-600" />
+                                    </div>
+                                  </div>
+                                );
+                              })}
+                            </div>
+                          </div>
+                        )}
                       </td>
                     </tr>
                   )}
-                </tbody>
+                </>
               );
             })}
           </tbody>