diff --git a/src/components/ToolCard.astro b/src/components/ToolCard.astro
index 70ce3cf..879ce86 100644
--- a/src/components/ToolCard.astro
+++ b/src/components/ToolCard.astro
@@ -38,10 +38,10 @@ const hasValidProjectUrl = tool.projectUrl !== undefined &&
 const hasKnowledgebase = tool.knowledgebase === true;
 
 // Determine card styling based on type and hosting status
-const cardClass = isConcept ? 'card card-concept tool-card' :
-                  isMethod ? 'card card-method tool-card' : 
-                  hasValidProjectUrl ? 'card card-hosted tool-card' : 
-                  (tool.license !== 'Proprietary' ? 'card card-oss tool-card' : 'card tool-card');
+const cardClass = isConcept ? 'card card-concept tool-card cursor-pointer' :
+                  isMethod ? 'card card-method tool-card cursor-pointer' : 
+                  hasValidProjectUrl ? 'card card-hosted tool-card cursor-pointer' : 
+                  (tool.license !== 'Proprietary' ? 'card card-oss tool-card cursor-pointer' : 'card tool-card cursor-pointer');
 
 // ENHANCED: Data attributes for filtering
 const toolDataAttributes = {
@@ -60,92 +60,92 @@ const toolDataAttributes = {
 <div 
   class={cardClass} 
   {...toolDataAttributes}
-  style="cursor: pointer;" 
   onclick={`window.showToolDetails('${tool.name}')`}
 >
-  <!-- Card Header with Fixed Height -->
-  <div class="tool-card-header">
-    <h3>
-      {tool.icon && <span style="margin-right: 0.5rem; font-size: 1.125rem;">{tool.icon}</span>}
-      {tool.name}
-    </h3>
-    <div class="tool-card-badges">
-      <!-- Only show CC24-Server and Knowledgebase badges -->
-      {!isMethod && hasValidProjectUrl && <span class="badge badge-primary">CC24-Server</span>}
-      {hasKnowledgebase && <span class="badge badge-error">📖</span>}
-      <ShareButton toolName={tool.name} context="card" size="small" />
-    </div>
+<!-- Card Header with Fixed Height -->
+<div class="tool-card-header">
+  <h3>
+    {tool.icon && <span class="mr-2 text-lg">{tool.icon}</span>}
+    {tool.name}
+  </h3>
+  <div class="tool-card-badges">
+    <!-- Only show CC24-Server and Knowledgebase badges -->
+    {!isMethod && hasValidProjectUrl && <span class="badge badge-primary">CC24-Server</span>}
+    {hasKnowledgebase && <span class="badge badge-error">📖</span>}
+    <ShareButton toolName={tool.name} context="card" size="small" />
+  </div>
+</div>
+
+<!-- Description - Truncated to 2 lines -->
+<p class="text-muted">
+  {tool.description}
+</p>
+
+<!-- Metadata - Compact Icons with Better Alignment -->
+<div class="tool-card-metadata flex items-center gap-4 mb-3" style="line-height: 1;">
+  <div class="metadata-item flex items-center gap-2 text-xs text-secondary flex-shrink-1 min-w-0">
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0">
+      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+      <line x1="9" y1="9" x2="15" y2="9"></line>
+      <line x1="9" y1="15" x2="15" y2="15"></line>
+    </svg>
+    <span class="overflow-hidden min-w-0" style="text-overflow: ellipsis; white-space: nowrap;">
+      {tool.platforms.slice(0, 2).join(', ')}{tool.platforms.length > 2 ? '...' : ''}
+    </span>
   </div>
   
-  <!-- Description - Truncated to 2 lines -->
-  <p class="text-muted">
-    {tool.description}
-  </p>
-  
-  <!-- Metadata - Compact Icons with Better Alignment -->
-  <div class="tool-card-metadata" style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; line-height: 1;">
-    <div class="metadata-item" style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--color-text-secondary); flex-shrink: 1; min-width: 0;">
-      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink: 0;">
-        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-        <line x1="9" y1="9" x2="15" y2="9"></line>
-        <line x1="9" y1="15" x2="15" y2="15"></line>
-      </svg>
-      <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;">
-        {tool.platforms.slice(0, 2).join(', ')}{tool.platforms.length > 2 ? '...' : ''}
-      </span>
-    </div>
-    
-    <div class="metadata-item" style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--color-text-secondary); flex-shrink: 1; min-width: 0;">
-      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink: 0;">
-        <circle cx="12" cy="12" r="10"></circle>
-        <path d="M12 6v6l4 2"></path>
-      </svg>
-      <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;">
-        {tool.skillLevel}
-      </span>
-    </div>
-    
-    <div class="metadata-item" style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--color-text-secondary); flex-shrink: 1; min-width: 0;">
-      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink: 0;">
-        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-        <polyline points="14 2 14 8 20 8"></polyline>
-      </svg>
-      <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;">
-        {isConcept ? 'Konzept' : isMethod ? 'Methode' : tool.license === 'Proprietary' ? 'Prop.' : tool.license?.split(' ')[0]}
-      </span>
-    </div>
+  <div class="metadata-item flex items-center gap-2 text-xs text-secondary flex-shrink-1 min-w-0">
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0">
+      <circle cx="12" cy="12" r="10"></circle>
+      <path d="M12 6v6l4 2"></path>
+    </svg>
+    <span class="overflow-hidden min-w-0" style="text-overflow: ellipsis; white-space: nowrap;">
+      {tool.skillLevel}
+    </span>
   </div>
   
-  <!-- Tags - Two Lines with Fade -->
-  <div class="tool-tags-container">
-    {tool.tags.slice(0, 8).map(tag => (
-      <span class="tag">{tag}</span>
-    ))}
+  <div class="metadata-item flex items-center gap-2 text-xs text-secondary flex-shrink-1 min-w-0">
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0">
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+      <polyline points="14 2 14 8 20 8"></polyline>
+    </svg>
+    <span class="overflow-hidden min-w-0" style="text-overflow: ellipsis; white-space: nowrap;">
+      {isConcept ? 'Konzept' : isMethod ? 'Methode' : tool.license === 'Proprietary' ? 'Prop.' : tool.license?.split(' ')[0]}
+    </span>
   </div>
-  
-  <!-- Buttons - Fixed at Bottom (NO EDIT BUTTONS - Available in modals) -->
-  <div class="tool-card-buttons" onclick="event.stopPropagation();">
-    {isConcept ? (
-      <a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary single-button" style="background-color: var(--color-concept); border-color: var(--color-concept);">
-        Mehr erfahren
+  </div>
+
+<!-- Tags - Two Lines with Fade -->
+<div class="tool-tags-container">
+  {tool.tags.slice(0, 8).map(tag => (
+    <span class="tag">{tag}</span>
+  ))}
+</div>
+
+<!-- Buttons - Fixed at Bottom (NO EDIT BUTTONS - Available in modals) -->
+<div class="tool-card-buttons" onclick="event.stopPropagation();">
+  {isConcept ? (
+    <a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary single-button" style="background-color: var(--color-concept); border-color: var(--color-concept);">
+      Mehr erfahren
+    </a>
+  ) : isMethod ? (
+    <a href={tool.projectUrl || tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary single-button" style="background-color: var(--color-method); border-color: var(--color-method);">
+      Zur Methode
+    </a>
+  ) : hasValidProjectUrl ? (
+    <div class="button-row">
+      <a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-secondary">
+        Homepage
       </a>
-    ) : isMethod ? (
-      <a href={tool.projectUrl || tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary single-button" style="background-color: var(--color-method); border-color: var(--color-method);">
-        Zur Methode
+      <a href={tool.projectUrl} target="_blank" rel="noopener noreferrer" class="btn btn-primary">
+        Zugreifen
       </a>
-    ) : hasValidProjectUrl ? (
-      <div class="button-row">
-        <a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-secondary">
-          Homepage
-        </a>
-        <a href={tool.projectUrl} target="_blank" rel="noopener noreferrer" class="btn btn-primary">
-          Zugreifen
-        </a>
-      </div>
-    ) : (
-      <a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary single-button">
-        Software-Homepage
-      </a>
-    )}
-  </div>
+    </div>
+  ) : (
+    <a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary single-button">
+      Software-Homepage
+    </a>
+  )}
+</div>
+</div>
 </div>
\ No newline at end of file
diff --git a/src/components/ToolMatrix.astro b/src/components/ToolMatrix.astro
index 17c10ce..f311769 100644
--- a/src/components/ToolMatrix.astro
+++ b/src/components/ToolMatrix.astro
@@ -2,8 +2,6 @@
 import { getToolsData } from '../utils/dataService.js';
 import ShareButton from './ShareButton.astro';
 
-
-
 // Load tools data
 const data = await getToolsData();
 
@@ -37,17 +35,17 @@ domains.forEach((domain: any) => {
 <div id="matrix-container" class="matrix-wrapper" style="display: none;">
   <!-- Domain-Agnostic Software Sections -->
   {domainAgnosticTools.map((sectionData: any, index: number) => (
-    <div id={`domain-agnostic-section-${sectionData.section.id}`} class="card collaboration-section-collapsed" style="margin-bottom: 1.5rem; border-left: 4px solid var(--color-accent);">
-      <div class="collaboration-header" onclick={`toggleDomainAgnosticSection('${sectionData.section.id}')`} style="cursor: pointer; display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.1rem;">
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2" style="margin-right: 0.5rem;">
+    <div id={`domain-agnostic-section-${sectionData.section.id}`} class="card collaboration-section-collapsed mb-6 border-l-4" style="border-left-color: var(--color-accent);">
+      <div class="collaboration-header cursor-pointer flex items-center gap-3" onclick={`toggleDomainAgnosticSection('${sectionData.section.id}')`} style="margin-bottom: 0.1rem;">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2" class="mr-2">
           <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
           <circle cx="8.5" cy="7" r="4"/>
           <line x1="20" y1="8" x2="20" y2="14"/>
           <line x1="23" y1="11" x2="17" y2="11"/>
         </svg>
-        <h3 style="margin: 0; color: var(--color-accent); font-size: 1.125rem;">
+        <h3 class="m-0 text-lg" style="color: var(--color-accent);">
           {sectionData.section.name}
-          <span id={`count-${sectionData.section.id}`} class="badge" style="background-color: var(--color-text-secondary); color: var(--color-bg); margin-left: 0.5rem; font-size: 0.75rem;">
+          <span id={`count-${sectionData.section.id}`} class="badge text-xs" style="background-color: var(--color-text-secondary); color: var(--color-bg); margin-left: 0.5rem;">
             {sectionData.tools.length}
           </span>
         </h3>
@@ -65,14 +63,14 @@ domains.forEach((domain: any) => {
                                       tool.projectUrl !== "" && 
                                       tool.projectUrl.trim() !== "";
             return (
-              <div class={`collaboration-tool-compact ${hasValidProjectUrl ? 'hosted' : tool.license !== 'Proprietary' ? 'oss' : ''}`}
+              <div class={`collaboration-tool-compact cursor-pointer ${hasValidProjectUrl ? 'hosted' : tool.license !== 'Proprietary' ? 'oss' : ''}`}
                    onclick={`window.showToolDetails('${tool.name}')`}>
                 <div class="tool-compact-header">
-                  <h4 style="margin: 0; font-size: 0.875rem; font-weight: 600;">
-                    {tool.icon && <span style="margin-right: 0.5rem;">{tool.icon}</span>}
+                  <h4 class="m-0 text-sm font-semibold">
+                    {tool.icon && <span class="mr-2">{tool.icon}</span>}
                     {tool.name}
                   </h4>
-                  <div style="display: flex; gap: 0.25rem;">
+                  <div class="flex gap-1">
                     {hasValidProjectUrl && <span class="badge badge--mini badge-primary">CC24-Server</span>}
                     {tool.knowledgebase === true && <span class="badge badge--mini badge-error">📖</span>}
                   </div>
@@ -80,7 +78,7 @@ domains.forEach((domain: any) => {
                 <p class="text-muted">              
                   {tool.description}
                 </p>
-                <div style="display: flex; gap: 0.75rem; font-size: 0.6875rem; color: var(--color-text-secondary);">
+                <div class="flex gap-3 text-xs" style="color: var(--color-text-secondary);">
                   <span>{tool.platforms.join(', ')}</span>
                   <span>•</span>
                   <span>{tool.skillLevel}</span>
@@ -95,7 +93,7 @@ domains.forEach((domain: any) => {
 
   <!-- DFIR Tools Matrix -->
   <div id="dfir-matrix-section">
-    <h2 style="margin-bottom: 1rem; color: var(--color-text);">MATRIX</h2>
+    <h2 class="mb-4" style="color: var(--color-text);">MATRIX</h2>
     <table class="matrix-table">
       <thead>
         <tr>
@@ -128,7 +126,7 @@ domains.forEach((domain: any) => {
                     title={`${tool.name}${tool.knowledgebase === true ? ' (KB verfügbar)' : ''}`}
                   >
                     {tool.name}
-                    {tool.knowledgebase === true && <span style="margin-left: 0.25rem; font-size: 0.6875rem;">📖</span>}
+                    {tool.knowledgebase === true && <span class="text-xs" style="margin-left: 0.25rem;">📖</span>}
                   </span>
                 );
               })}
@@ -146,9 +144,9 @@ domains.forEach((domain: any) => {
 
 <!-- Primary Modal -->
 <div class="tool-details" id="tool-details-primary">
-  <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 1rem;">
-    <h2 id="tool-name-primary" style="margin: 0;">Tool Name</h2>
-    <div style="display: flex; align-items: center; gap: 0.5rem;">
+  <div class="flex justify-between items-start mb-4">
+    <h2 id="tool-name-primary" class="m-0">Tool Name</h2>
+    <div class="flex items-center gap-2">
       <div id="share-button-primary" style="display: none;">
         <!-- Share button will be populated by JavaScript -->
       </div>
@@ -166,20 +164,20 @@ domains.forEach((domain: any) => {
   
   <p id="tool-description-primary" class="text-muted"></p>
   
-  <div id="tool-badges-primary" style="display: flex; gap: 0.5rem; margin-bottom: 1rem;"></div>
+  <div id="tool-badges-primary" class="flex gap-2 mb-4"></div>
   
-  <div id="tool-metadata-primary" style="margin-bottom: 1rem;"></div>
+  <div id="tool-metadata-primary" class="mb-4"></div>
   
-  <div id="tool-tags-primary" style="margin-bottom: 1rem;"></div>
+  <div id="tool-tags-primary" class="mb-4"></div>
   
-  <div id="tool-links-primary" style="display: flex; gap: 0.5rem; flex-direction: column;"></div>
+  <div id="tool-links-primary" class="flex flex-col gap-2"></div>
 </div>
 
 <!-- Secondary Modal -->
 <div class="tool-details" id="tool-details-secondary">
-  <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 1rem;">
-    <h2 id="tool-name-secondary" style="margin: 0;">Tool Name</h2>
-    <div style="display: flex; align-items: center; gap: 0.5rem;">
+  <div class="flex justify-between items-start mb-4">
+    <h2 id="tool-name-secondary" class="m-0">Tool Name</h2>
+    <div class="flex items-center gap-2">
       <div id="share-button-secondary" style="display: none;">
         <!-- Share button will be populated by JavaScript -->
       </div>
@@ -197,13 +195,13 @@ domains.forEach((domain: any) => {
   
   <p id="tool-description-secondary" class="text-muted"></p>
   
-  <div id="tool-badges-secondary" style="display: flex; gap: 0.5rem; margin-bottom: 1rem;"></div>
+  <div id="tool-badges-secondary" class="flex gap-2 mb-4"></div>
   
-  <div id="tool-metadata-secondary" style="margin-bottom: 1rem;"></div>
+  <div id="tool-metadata-secondary" class="mb-4"></div>
   
-  <div id="tool-tags-secondary" style="margin-bottom: 1rem;"></div>
+  <div id="tool-tags-secondary" class="mb-4"></div>
   
-  <div id="tool-links-secondary" style="display: flex; gap: 0.5rem; flex-direction: column;"></div>
+  <div id="tool-links-secondary" class="flex flex-col gap-2"></div>
 </div>
 
 <script define:vars={{ toolsData: tools, domainAgnosticSoftware, domainAgnosticTools }}>
@@ -284,11 +282,6 @@ domains.forEach((domain: any) => {
     }
   }
 
-  // ===== SHARING FUNCTIONALITY =====
-  
-  // REMOVED: createToolSlug function - now using window.createToolSlug
-  // REMOVED: findTool function - now using window.findToolByIdentifier
-
   // Generate share URLs
   function generateShareURL(toolName, view, modal = null) {
     const toolSlug = window.createToolSlug(toolName);
@@ -345,10 +338,18 @@ domains.forEach((domain: any) => {
       backdrop = document.createElement('div');
       backdrop.id = 'share-modal-backdrop';
       backdrop.style.cssText = `
-        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
-        background: rgba(0, 0, 0, 0.5); z-index: 9999;
-        display: flex; align-items: center; justify-content: center;
-        opacity: 0; transition: opacity 0.2s ease;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 1000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transition: opacity 0.2s ease;
       `;
       document.body.appendChild(backdrop);
     }
@@ -356,21 +357,27 @@ domains.forEach((domain: any) => {
     // Create share dialog
     const dialog = document.createElement('div');
     dialog.style.cssText = `
-      background: var(--color-bg); border: 1px solid var(--color-border);
-      border-radius: 0.75rem; padding: 1.5rem; max-width: 400px; width: 90%;
-      box-shadow: var(--shadow-lg); transform: scale(0.9); transition: transform 0.2s ease;
+      background-color: var(--color-bg);
+      border: 1px solid var(--color-border);
+      border-radius: 0.5rem;
+      padding: 1.5rem;
+      max-width: 28rem;
+      width: 90%;
+      box-shadow: var(--shadow-lg);
+      transform: scale(0.9);
+      transition: transform 0.2s ease;
     `;
     
     dialog.innerHTML = `
       <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;">
-        <h3 style="margin: 0; color: var(--color-primary);">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem; vertical-align: middle;">
+        <h3 style="margin: 0; color: var(--color-primary); display: flex; align-items: center;">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
             <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
             <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
           </svg>
           ${toolName} teilen
         </h3>
-        <button id="close-share-dialog" style="background: none; border: none; cursor: pointer; padding: 0.25rem;color: var(--color-text-secondary)">
+        <button id="close-share-dialog" class="btn-icon">
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
           </svg>
@@ -378,44 +385,54 @@ domains.forEach((domain: any) => {
       </div>
       
       <div style="display: flex; flex-direction: column; gap: 0.75rem;">
-        <button class="share-option-btn" data-url="${generateShareURL(toolName, 'grid')}" 
-                style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: 0.5rem; background: var(--color-bg); cursor: pointer; transition: var(--transition-fast); text-align: left; width: 100%;">
-          <div style="width: 32px; height: 32px; background: var(--color-primary); border-radius: 0.25rem; display: flex; align-items: center; justify-content: center;">
+        <button class="share-option-btn" data-url="${generateShareURL(toolName, 'grid')}" style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: 0.5rem; background-color: var(--color-bg); cursor: pointer; transition: var(--transition-fast); text-align: left; width: 100%;" onmouseover="this.style.backgroundColor='var(--color-bg-secondary)'" onmouseout="this.style.backgroundColor='var(--color-bg)'">
+          <div style="width: 2rem; height: 2rem; background-color: var(--color-primary); border-radius: 0.25rem; display: flex; align-items: center; justify-content: center;">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
-              <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
-              <rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
+              <rect x="3" y="3" width="7" height="7"/>
+              <rect x="14" y="3" width="7" height="7"/>
+              <rect x="14" y="14" width="7" height="7"/>
+              <rect x="3" y="14" width="7" height="7"/>
             </svg>
           </div>
           <div>
-            <div style="font-weight: 500; margin-bottom: 0.25rem;color: var(--color-text-secondary)">Kachelansicht</div>
-            <div style="font-size: 0.8125rem; color: var(--color-text-secondary);">Scrollt zur Karte in der Übersicht</div>
+            <div style="font-weight: 500; margin-bottom: 0.25rem; color: var(--color-text);">Kachelansicht</div>
+            <div style="font-size: 0.875rem; color: var(--color-text-secondary);">Scrollt zur Karte in der Übersicht</div>
           </div>
         </button>
         
-        <button class="share-option-btn" data-url="${generateShareURL(toolName, 'matrix')}" 
-                style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: 0.5rem; background: var(--color-bg); cursor: pointer; transition: var(--transition-fast); text-align: left; width: 100%;">
-          <div style="width: 32px; height: 32px; background: var(--color-accent); border-radius: 0.25rem; display: flex; align-items: center; justify-content: center;">
+        <button class="share-option-btn" data-url="${generateShareURL(toolName, 'matrix')}" style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: 0.5rem; background-color: var(--color-bg); cursor: pointer; transition: var(--transition-fast); text-align: left; width: 100%;" onmouseover="this.style.backgroundColor='var(--color-bg-secondary)'" onmouseout="this.style.backgroundColor='var(--color-bg)'">
+          <div style="width: 2rem; height: 2rem; background-color: var(--color-accent); border-radius: 0.25rem; display: flex; align-items: center; justify-content: center;">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
-              <path d="M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z"/>
+              <rect x="3" y="3" width="4" height="4"/>
+              <rect x="10" y="3" width="4" height="4"/>
+              <rect x="17" y="3" width="4" height="4"/>
+              <rect x="3" y="10" width="4" height="4"/>
+              <rect x="10" y="10" width="4" height="4"/>
+              <rect x="17" y="10" width="4" height="4"/>
+              <rect x="3" y="17" width="4" height="4"/>
+              <rect x="10" y="17" width="4" height="4"/>
+              <rect x="17" y="17" width="4" height="4"/>
             </svg>
           </div>
           <div>
-            <div style="font-weight: 500; margin-bottom: 0.25rem;color: var(--color-text-secondary)">Matrix-Ansicht</div>
-            <div style="font-size: 0.8125rem; color: var(--color-text-secondary);">Zeigt Tool-Position in der Matrix</div>
+            <div style="font-weight: 500; margin-bottom: 0.25rem; color: var(--color-text);">Matrix-Ansicht</div>
+            <div style="font-size: 0.875rem; color: var(--color-text-secondary);">Zeigt Tool-Position in der Matrix</div>
           </div>
         </button>
         
-        <button class="share-option-btn" data-url="${generateShareURL(toolName, 'modal', 'primary')}" 
-                style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: 0.5rem; background: var(--color-bg); cursor: pointer; transition: var(--transition-fast); text-align: left; width: 100%;">
-          <div style="width: 32px; height: 32px; background: var(--color-warning); border-radius: 0.25rem; display: flex; align-items: center; justify-content: center;">
+        <button class="share-option-btn" data-url="${generateShareURL(toolName, 'modal', 'primary')}" style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: 0.5rem; background-color: var(--color-bg); cursor: pointer; transition: var(--transition-fast); text-align: left; width: 100%;" onmouseover="this.style.backgroundColor='var(--color-bg-secondary)'" onmouseout="this.style.backgroundColor='var(--color-bg)'">
+          <div style="width: 2rem; height: 2rem; background-color: var(--color-warning); border-radius: 0.25rem; display: flex; align-items: center; justify-content: center;">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
               <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
               <polyline points="14 2 14 8 20 8"/>
+              <line x1="16" y1="13" x2="8" y2="13"/>
+              <line x1="16" y1="17" x2="8" y2="17"/>
+              <polyline points="10 9 9 9 8 9"/>
             </svg>
           </div>
           <div>
-            <div style="font-weight: 500; margin-bottom: 0.25rem;color: var(--color-text-secondary)">Tool-Details</div>
-            <div style="font-size: 0.8125rem; color: var(--color-text-secondary);">Öffnet Detail-Fenster direkt</div>
+            <div style="font-weight: 500; margin-bottom: 0.25rem; color: var(--color-text);">Tool-Details</div>
+            <div style="font-size: 0.875rem; color: var(--color-text-secondary);">Öffnet Detail-Fenster direkt</div>
           </div>
         </button>
       </div>
@@ -448,16 +465,6 @@ domains.forEach((domain: any) => {
     
     // Share option handlers
     dialog.querySelectorAll('.share-option-btn').forEach(btn => {
-      btn.addEventListener('mouseover', () => {
-        btn.style.backgroundColor = 'var(--color-bg-secondary)';
-        btn.style.borderColor = 'var(--color-primary)';
-      });
-      
-      btn.addEventListener('mouseout', () => {
-        btn.style.backgroundColor = 'var(--color-bg)';
-        btn.style.borderColor = 'var(--color-border)';
-      });
-      
       btn.addEventListener('click', () => {
         const url = btn.getAttribute('data-url');
         copyToClipboard(url, btn);
@@ -498,7 +505,7 @@ domains.forEach((domain: any) => {
     }
     
     // Update modal content
-    const iconHtml = tool.icon ? `<span style="margin-right: 0.75rem; font-size: 1.5rem;">${tool.icon}</span>` : '';
+    const iconHtml = tool.icon ? `<span class="mr-3 text-xl">${tool.icon}</span>` : '';
     elements.name.innerHTML = `${iconHtml}${tool.name}`;
     elements.description.textContent = tool.description;
 
@@ -524,7 +531,7 @@ domains.forEach((domain: any) => {
     const domainsText = domains.length > 0 ? domains.join(', ') : 'Domain-agnostic';
     const phasesText = phases.join(', ');
     
-    let metadataHTML = `<div style="display: grid; gap: 0.5rem;">`;
+    let metadataHTML = `<div class="grid gap-2">`;
     
     if (!isConcept) {
       metadataHTML += `
@@ -547,7 +554,7 @@ domains.forEach((domain: any) => {
     // Tags and Related Concepts
     const tags = tool.tags || [];
     let tagsHTML = `
-      <div style="display: flex; flex-wrap: wrap; gap: 0.25rem;">
+      <div class="flex flex-wrap gap-1">
         ${tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
       </div>
     `;
@@ -558,14 +565,14 @@ domains.forEach((domain: any) => {
       const conceptLinks = relatedConcepts.map(conceptName => {
         const concept = toolsData.find(t => t.name === conceptName && t.type === 'concept');
         if (concept) {
-          return `<button class="tag" style="cursor: pointer; background-color: var(--color-concept-bg); border: 1px solid var(--color-concept); color: var(--color-concept); transition: var(--transition-fast); margin: 0.125rem;" 
+          return `<button class="tag cursor-pointer" style="background-color: var(--color-concept-bg); border: 1px solid var(--color-concept); color: var(--color-concept); transition: var(--transition-fast);" 
                     onclick="event.stopPropagation(); window.showToolDetails('${conceptName}', 'secondary')" 
                     onmouseover="this.style.backgroundColor='var(--color-concept)'; this.style.color='white';"
                     onmouseout="this.style.backgroundColor='var(--color-concept-bg)'; this.style.color='var(--color-concept)';">
                     ${conceptName}
                   </button>`;
         }
-        return `<span class="tag" style="background-color: var(--color-bg-tertiary); color: var(--color-text-secondary); margin: 0.125rem;">${conceptName}</span>`;
+        return `<span class="tag" style="background-color: var(--color-bg-tertiary); color: var(--color-text-secondary);">${conceptName}</span>`;
       }).join('');
 
       // Check if mobile device
@@ -573,18 +580,18 @@ domains.forEach((domain: any) => {
       const collapseOnMobile = isMobile && relatedConcepts.length > 2;
 
       tagsHTML += `
-        <div style="margin-top: 1rem;">
-          <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
+        <div class="mt-4">
+          <div class="flex items-center gap-2 mb-2">
             <strong style="color: var(--color-text);">Verwandte Konzepte:</strong>
             ${collapseOnMobile ? `
               <button id="concepts-toggle-${modalType}" 
                       onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === '▼' ? '▲' : '▼';"
-                      style="background: none; border: 1px solid var(--color-border); border-radius: 0.25rem; padding: 0.25rem 0.5rem; cursor: pointer; font-size: 0.75rem;">
+                      class="btn-icon text-xs">
                 ▼
               </button>
             ` : ''}
           </div>
-          <div ${collapseOnMobile ? 'style="display: none;"' : ''} style="display: flex; flex-wrap: wrap; gap: 0.25rem;">
+          <div ${collapseOnMobile ? 'style="display: none;"' : ''} class="flex flex-wrap gap-1">
             ${conceptLinks}
           </div>
         </div>
@@ -598,30 +605,30 @@ domains.forEach((domain: any) => {
 
     if (isConcept) {
       linksHTML += `
-        <a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%; background-color: var(--color-concept); border-color: var(--color-concept);">
+        <a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-primary w-full" style="background-color: var(--color-concept); border-color: var(--color-concept);">
           Mehr erfahren
         </a>
       `;
     } else if (isMethod) {
       linksHTML += `
-        <a href="${tool.projectUrl || tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%; background-color: var(--color-method); border-color: var(--color-method);">
+        <a href="${tool.projectUrl || tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-primary w-full" style="background-color: var(--color-method); border-color: var(--color-method);">
           Zur Methode
         </a>
       `;
     } else if (hasValidProjectUrl) {
       linksHTML += `
-        <div style="display: flex; gap: 0.5rem;">
-          <a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary" style="flex: 1;">
+        <div class="flex gap-2">
+          <a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary flex-1">
             Homepage
           </a>
-          <a href="${tool.projectUrl}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="flex: 1;">
+          <a href="${tool.projectUrl}" target="_blank" rel="noopener noreferrer" class="btn btn-primary flex-1">
             Zugreifen
           </a>
         </div>
       `;
     } else {
       linksHTML += `
-        <a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%;">
+        <a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-primary w-full">
           Software-Homepage
         </a>
       `;
@@ -630,8 +637,8 @@ domains.forEach((domain: any) => {
     if (tool.knowledgebase === true) {
       const kbId = window.createToolSlug(tool.name);
       linksHTML += `
-        <a href="/knowledgebase#kb-${kbId}" class="btn btn-secondary" style="width: 100%; margin-top: 0.5rem;">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
+        <a href="/knowledgebase#kb-${kbId}" class="btn btn-secondary w-full mt-2">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2">
             <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
             <polyline points="14 2 14 8 20 8"/>
             <line x1="16" y1="13" x2="8" y2="13"/>
@@ -728,7 +735,6 @@ domains.forEach((domain: any) => {
         if (shareButtonSecondary) shareButtonSecondary.style.display = 'none';
         if (contributeButtonSecondary) contributeButtonSecondary.style.display = 'none';
       }
-      // ... rest of existing code
     } else if (modalType === 'primary' && primaryModal) {
       primaryModal.classList.remove('active');
       const shareButtonPrimary = document.getElementById('share-button-primary');
diff --git a/src/styles/global.css b/src/styles/global.css
index 6c3178d..226c9d8 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1738,6 +1738,7 @@ This will literally assault the user's retinas. They'll need sunglasses to look
 .flex-wrap { flex-wrap: wrap; }
 .flex-1 { flex: 1; }
 .flex-shrink-0 { flex-shrink: 0; }
+.flex-shrink-1 { flex-shrink: 1; }
 
 /* Alignment */
 .items-center { align-items: center; }