diff --git a/ccw/src/templates/dashboard-css/10-cli.css b/ccw/src/templates/dashboard-css/10-cli.css
index 4f1359e4..39410022 100644
--- a/ccw/src/templates/dashboard-css/10-cli.css
+++ b/ccw/src/templates/dashboard-css/10-cli.css
@@ -1719,3 +1719,312 @@
   overflow-y: auto;
   padding: 1.25rem;
 }
+
+.generic-modal.lg {
+  max-width: 640px;
+}
+
+/* ========================================
+ * Endpoint Tools Grid Styles
+ * ======================================== */
+.endpoint-tools-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 0.75rem;
+  padding: 0.75rem;
+}
+
+.endpoint-tool-card {
+  display: flex;
+  flex-direction: column;
+  padding: 0.875rem;
+  background: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-height: 100px;
+}
+
+.endpoint-tool-card:hover {
+  background: hsl(var(--hover));
+  border-color: hsl(var(--indigo) / 0.5);
+  box-shadow: 0 2px 8px hsl(var(--indigo) / 0.1);
+  transform: translateY(-1px);
+}
+
+.endpoint-tool-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.endpoint-tool-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: hsl(var(--indigo));
+  box-shadow: 0 0 6px hsl(var(--indigo) / 0.5);
+  flex-shrink: 0;
+}
+
+.endpoint-tool-name {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+  font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.endpoint-tool-desc {
+  font-size: 0.6875rem;
+  color: hsl(var(--muted-foreground));
+  line-height: 1.4;
+  flex: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin-bottom: 0.5rem;
+}
+
+.endpoint-tool-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: auto;
+}
+
+.endpoint-tool-params {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.625rem;
+  color: hsl(var(--muted-foreground));
+  background: hsl(var(--muted) / 0.5);
+  padding: 0.1875rem 0.375rem;
+  border-radius: 0.25rem;
+}
+
+.endpoint-tool-required {
+  font-size: 0.5625rem;
+  color: hsl(var(--warning));
+  background: hsl(var(--warning) / 0.1);
+  padding: 0.125rem 0.375rem;
+  border-radius: 9999px;
+  font-weight: 500;
+}
+
+/* ========================================
+ * Tool Detail Modal Styles
+ * ======================================== */
+.tool-detail-modal {
+  padding: 0.5rem 0;
+}
+
+.tool-detail-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.tool-detail-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  background: hsl(var(--indigo) / 0.1);
+  color: hsl(var(--indigo));
+  border-radius: 0.5rem;
+  flex-shrink: 0;
+}
+
+.tool-detail-title h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+  margin: 0 0 0.375rem 0;
+  font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
+}
+
+.tool-detail-badge {
+  font-size: 0.625rem;
+  font-weight: 500;
+  padding: 0.1875rem 0.5rem;
+  background: hsl(var(--indigo) / 0.1);
+  color: hsl(var(--indigo));
+  border-radius: 9999px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.tool-detail-desc {
+  font-size: 0.8125rem;
+  color: hsl(var(--muted-foreground));
+  line-height: 1.6;
+  margin-bottom: 1.25rem;
+}
+
+.tool-detail-params h4,
+.tool-detail-usage h4 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+  margin: 0 0 0.75rem 0;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.tool-detail-params h4 i,
+.tool-detail-usage h4 i {
+  color: hsl(var(--muted-foreground));
+}
+
+.tool-params-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  max-height: 280px;
+  overflow-y: auto;
+  padding-right: 0.5rem;
+}
+
+.tool-param-item {
+  padding: 0.75rem;
+  background: hsl(var(--muted) / 0.3);
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+}
+
+.tool-param-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.375rem;
+  flex-wrap: wrap;
+}
+
+.tool-param-name {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+  background: hsl(var(--muted));
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+}
+
+.tool-param-type {
+  font-size: 0.625rem;
+  color: hsl(var(--primary));
+  background: hsl(var(--primary) / 0.1);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
+}
+
+.tool-param-required {
+  font-size: 0.5625rem;
+  font-weight: 600;
+  color: hsl(var(--destructive));
+  background: hsl(var(--destructive) / 0.1);
+  padding: 0.125rem 0.375rem;
+  border-radius: 9999px;
+  text-transform: uppercase;
+}
+
+.tool-param-optional {
+  font-size: 0.5625rem;
+  font-weight: 500;
+  color: hsl(var(--muted-foreground));
+  background: hsl(var(--muted));
+  padding: 0.125rem 0.375rem;
+  border-radius: 9999px;
+}
+
+.tool-param-desc {
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+  line-height: 1.5;
+}
+
+.tool-param-default,
+.tool-param-enum {
+  font-size: 0.6875rem;
+  color: hsl(var(--muted-foreground));
+  margin-top: 0.25rem;
+}
+
+.tool-param-default code,
+.tool-param-enum code {
+  font-size: 0.6875rem;
+  background: hsl(var(--muted));
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  color: hsl(var(--foreground));
+}
+
+.tool-detail-no-params {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1.5rem;
+  background: hsl(var(--muted) / 0.3);
+  border: 1px dashed hsl(var(--border));
+  border-radius: 0.5rem;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.8125rem;
+}
+
+.tool-detail-usage {
+  margin-top: 1.25rem;
+}
+
+.tool-usage-code {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: hsl(var(--muted) / 0.5);
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  overflow-x: auto;
+}
+
+.tool-usage-code code {
+  font-size: 0.75rem;
+  font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+  flex: 1;
+}
+
+.tool-copy-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.375rem;
+  background: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.25rem;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+
+.tool-copy-btn:hover {
+  background: hsl(var(--hover));
+  color: hsl(var(--foreground));
+  border-color: hsl(var(--primary) / 0.3);
+}
diff --git a/ccw/src/templates/dashboard-js/views/cli-manager.js b/ccw/src/templates/dashboard-js/views/cli-manager.js
index 8c374bfa..53516d95 100644
--- a/ccw/src/templates/dashboard-js/views/cli-manager.js
+++ b/ccw/src/templates/dashboard-js/views/cli-manager.js
@@ -257,28 +257,25 @@ function renderCcwEndpointToolsSection() {
       '<i data-lucide="refresh-cw" class="w-3 h-3"></i> Refresh</button>' +
       '</div>';
   } else {
-    toolsHtml = '<div class="tools-list">' +
-      ccwEndpointTools.map(function(t) {
+    toolsHtml = '<div class="endpoint-tools-grid">' +
+      ccwEndpointTools.map(function(t, idx) {
         var name = t && t.name ? String(t.name) : 'unknown';
         var desc = t && t.description ? String(t.description) : '';
         var requiredCount = (t && t.parameters && Array.isArray(t.parameters.required)) ? t.parameters.required.length : 0;
         var propsCount = (t && t.parameters && t.parameters.properties) ? Object.keys(t.parameters.properties).length : 0;
+        var shortDesc = desc.length > 60 ? desc.substring(0, 60) + '...' : desc;
 
-        return '<div class="tool-item endpoint">' +
-          '<div class="tool-item-left">' +
-            '<span class="tool-status-dot status-available" style="background: hsl(var(--indigo)); box-shadow: 0 0 6px hsl(var(--indigo) / 0.45);"></span>' +
-            '<div class="tool-item-info">' +
-              '<div class="tool-item-name">' + escapeHtml(name) +
-                '<span class="tool-type-badge">endpoint</span>' +
-              '</div>' +
-              '<div class="tool-item-desc">' + escapeHtml(desc || '—') + '</div>' +
-            '</div>' +
+        return '<div class="endpoint-tool-card" onclick="showEndpointToolDetail(' + idx + ')">' +
+          '<div class="endpoint-tool-header">' +
+            '<span class="endpoint-tool-dot"></span>' +
+            '<span class="endpoint-tool-name">' + escapeHtml(name) + '</span>' +
           '</div>' +
-          '<div class="tool-item-right">' +
-            '<span class="tool-status-text muted">' +
-              '<i data-lucide="braces" class="w-3.5 h-3.5"></i> ' +
-              propsCount + ' params' + (requiredCount ? (' · ' + requiredCount + ' required') : '') +
+          '<div class="endpoint-tool-desc">' + escapeHtml(shortDesc || 'No description') + '</div>' +
+          '<div class="endpoint-tool-meta">' +
+            '<span class="endpoint-tool-params">' +
+              '<i data-lucide="braces" class="w-3 h-3"></i> ' + propsCount +
             '</span>' +
+            (requiredCount > 0 ? '<span class="endpoint-tool-required">' + requiredCount + ' required</span>' : '') +
           '</div>' +
         '</div>';
       }).join('') +
@@ -299,6 +296,108 @@ function renderCcwEndpointToolsSection() {
   if (window.lucide) lucide.createIcons();
 }
 
+// ========== Endpoint Tool Detail Modal ==========
+function showEndpointToolDetail(toolIndex) {
+  var tool = ccwEndpointTools[toolIndex];
+  if (!tool) return;
+
+  var name = tool.name || 'unknown';
+  var desc = tool.description || 'No description available';
+  var params = tool.parameters || {};
+  var properties = params.properties || {};
+  var required = params.required || [];
+
+  // Build parameters table
+  var paramsHtml = '';
+  var propKeys = Object.keys(properties);
+
+  if (propKeys.length > 0) {
+    paramsHtml = '<div class="tool-detail-params">' +
+      '<h4><i data-lucide="settings-2" class="w-4 h-4"></i> Parameters</h4>' +
+      '<div class="tool-params-list">';
+
+    for (var i = 0; i < propKeys.length; i++) {
+      var key = propKeys[i];
+      var prop = properties[key];
+      var isRequired = required.indexOf(key) !== -1;
+      var propType = prop.type || 'any';
+      var propDesc = prop.description || '';
+      var propDefault = prop.default !== undefined ? JSON.stringify(prop.default) : null;
+      var propEnum = prop.enum ? prop.enum.join(', ') : null;
+
+      paramsHtml += '<div class="tool-param-item">' +
+        '<div class="tool-param-header">' +
+          '<code class="tool-param-name">' + escapeHtml(key) + '</code>' +
+          '<span class="tool-param-type">' + escapeHtml(propType) + '</span>' +
+          (isRequired ? '<span class="tool-param-required">required</span>' : '<span class="tool-param-optional">optional</span>') +
+        '</div>' +
+        (propDesc ? '<div class="tool-param-desc">' + escapeHtml(propDesc) + '</div>' : '') +
+        (propDefault ? '<div class="tool-param-default">Default: <code>' + escapeHtml(propDefault) + '</code></div>' : '') +
+        (propEnum ? '<div class="tool-param-enum">Options: <code>' + escapeHtml(propEnum) + '</code></div>' : '') +
+      '</div>';
+    }
+
+    paramsHtml += '</div></div>';
+  } else {
+    paramsHtml = '<div class="tool-detail-no-params">' +
+      '<i data-lucide="info" class="w-4 h-4"></i>' +
+      '<span>This tool has no parameters</span>' +
+    '</div>';
+  }
+
+  // Usage example
+  var usageExample = 'ccw tool exec ' + name;
+  if (propKeys.length > 0) {
+    var exampleParams = {};
+    for (var j = 0; j < Math.min(propKeys.length, 2); j++) {
+      var k = propKeys[j];
+      var p = properties[k];
+      if (p.type === 'string') exampleParams[k] = '<value>';
+      else if (p.type === 'boolean') exampleParams[k] = true;
+      else if (p.type === 'number') exampleParams[k] = 0;
+      else exampleParams[k] = '<value>';
+    }
+    usageExample += " '" + JSON.stringify(exampleParams) + "'";
+  }
+
+  var modalContent = '<div class="tool-detail-modal">' +
+    '<div class="tool-detail-header">' +
+      '<div class="tool-detail-icon"><i data-lucide="terminal" class="w-6 h-6"></i></div>' +
+      '<div class="tool-detail-title">' +
+        '<h3>' + escapeHtml(name) + '</h3>' +
+        '<span class="tool-detail-badge">endpoint tool</span>' +
+      '</div>' +
+    '</div>' +
+    '<div class="tool-detail-desc">' + escapeHtml(desc) + '</div>' +
+    paramsHtml +
+    '<div class="tool-detail-usage">' +
+      '<h4><i data-lucide="terminal-square" class="w-4 h-4"></i> Usage Example</h4>' +
+      '<div class="tool-usage-code">' +
+        '<code>' + escapeHtml(usageExample) + '</code>' +
+        '<button class="tool-copy-btn" onclick="copyToolUsage(this, \'' + escapeHtml(usageExample.replace(/'/g, "\\'")) + '\')" title="Copy">' +
+          '<i data-lucide="copy" class="w-3.5 h-3.5"></i>' +
+        '</button>' +
+      '</div>' +
+    '</div>' +
+  '</div>';
+
+  showModal(name, modalContent, { size: 'lg' });
+}
+
+function copyToolUsage(btn, text) {
+  navigator.clipboard.writeText(text).then(function() {
+    var icon = btn.querySelector('i');
+    if (icon) {
+      icon.setAttribute('data-lucide', 'check');
+      if (window.lucide) lucide.createIcons();
+      setTimeout(function() {
+        icon.setAttribute('data-lucide', 'copy');
+        if (window.lucide) lucide.createIcons();
+      }, 2000);
+    }
+  });
+}
+
 // CCW Install Carousel State
 var ccwCarouselIndex = 0;