diff --git a/inspector/static/tailwind.config.js b/inspector/static/tailwind.config.js
new file mode 100644
index 0000000..591dc2b
--- /dev/null
+++ b/inspector/static/tailwind.config.js
@@ -0,0 +1,23 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./inspector/templates/**/*.{html,js}",
+    "./inspector/templates/*.html"
+  ],
+  theme: {
+    extend: {
+      colors: {
+        'python-blue': '#3776AB',
+        'python-yellow': '#FFD43B',
+        'python-blue-dark': '#2D5E8B',
+        'python-blue-light': '#4E8DC8',
+        'python-yellow-dark': '#FFCA00',
+        'python-yellow-light': '#FFE57F',
+      },
+      fontFamily: {
+        'mono': ['ui-monospace', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'monospace'],
+      }
+    },
+  },
+  plugins: [],
+}
\ No newline at end of file
diff --git a/inspector/static/tailwind.css b/inspector/static/tailwind.css
new file mode 100644
index 0000000..4b51adc
--- /dev/null
+++ b/inspector/static/tailwind.css
@@ -0,0 +1,69 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .btn-primary {
+    @apply bg-python-blue hover:bg-python-blue-dark text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200 shadow-md hover:shadow-lg;
+  }
+  
+  .btn-secondary {
+    @apply bg-python-yellow hover:bg-python-yellow-dark text-gray-900 font-semibold py-2 px-4 rounded-lg transition-colors duration-200 shadow-md hover:shadow-lg;
+  }
+  
+  .input-primary {
+    @apply border-2 border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:border-python-blue focus:ring-2 focus:ring-python-blue/20 transition-all duration-200;
+  }
+  
+  .table-custom {
+    @apply min-w-full divide-y divide-gray-200 shadow-sm rounded-lg overflow-hidden;
+  }
+  
+  .table-custom thead {
+    @apply bg-python-blue text-white;
+  }
+  
+  .table-custom th {
+    @apply px-6 py-3 text-left text-xs font-medium uppercase tracking-wider;
+  }
+  
+  .table-custom tbody {
+    @apply bg-white divide-y divide-gray-200;
+  }
+  
+  .table-custom td {
+    @apply px-6 py-4 whitespace-nowrap text-sm;
+  }
+  
+  .table-custom tbody tr:hover {
+    @apply bg-gray-50 transition-colors duration-150;
+  }
+  
+  .card {
+    @apply bg-white rounded-lg shadow-md p-6 border border-gray-200;
+  }
+  
+  .link-primary {
+    @apply text-python-blue hover:text-python-blue-dark underline transition-colors duration-200;
+  }
+  
+  .badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+  }
+  
+  .badge-success {
+    @apply bg-green-100 text-green-800;
+  }
+  
+  .badge-warning {
+    @apply bg-python-yellow-light text-gray-900;
+  }
+  
+  .badge-error {
+    @apply bg-red-100 text-red-800;
+  }
+  
+  .header-gradient {
+    @apply bg-gradient-to-r from-python-blue via-python-blue-dark to-python-blue;
+  }
+}
\ No newline at end of file
diff --git a/inspector/templates/404.html b/inspector/templates/404.html
index caa47e9..544698d 100644
--- a/inspector/templates/404.html
+++ b/inspector/templates/404.html
@@ -1,5 +1,24 @@
 {% extends 'base.html' %}
 
 {% block body %}
-<h1>NOT FOUND</h1>
+<div class="text-center py-12">
+  <div class="inline-flex items-center justify-center w-24 h-24 bg-red-100 rounded-full mb-6">
+    <svg class="w-12 h-12 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+    </svg>
+  </div>
+  
+  <h1 class="text-4xl font-bold text-gray-800 mb-4">404 - Page Not Found</h1>
+  <p class="text-lg text-gray-600 mb-8">The page or package you're looking for doesn't exist.</p>
+  
+  <div class="space-y-2">
+    <p class="text-gray-500">Try searching for a different package or</p>
+    <a href="/" class="inline-flex items-center px-6 py-3 bg-python-blue hover:bg-python-blue-dark text-white font-semibold rounded-lg transition-colors duration-200 shadow-md hover:shadow-lg">
+      <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+      </svg>
+      Return to Home
+    </a>
+  </div>
+</div>
 {% endblock %}
diff --git a/inspector/templates/base.html b/inspector/templates/base.html
index 87433a4..a7017ee 100644
--- a/inspector/templates/base.html
+++ b/inspector/templates/base.html
@@ -1,68 +1,161 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
-    {% block head %}{% endblock %}
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🕵️</text></svg>">
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PyPI Inspector</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🕵️</text></svg>">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              'python-blue': '#3776AB',
+              'python-yellow': '#FFD43B',
+              'python-blue-dark': '#2D5E8B',
+              'python-blue-light': '#4E8DC8',
+              'python-yellow-dark': '#FFCA00',
+              'python-yellow-light': '#FFE57F',
+            }
+          }
+        }
+      }
+    </script>
+    <style>
+      .header-gradient {
+        background: linear-gradient(135deg, #3776AB 0%, #2D5E8B 50%, #3776AB 100%);
+      }
+    </style>
+    {% block head %}{% endblock %}
   </head>
-  <body>
-    <main>
-      <h1><a href="/">Inspector</a></h1>
-      <form action="/">
-        {% if h2 %}
-          <input type="text" name="project" placeholder="Project name" value="{{ h2 }}" autocomplete="off">
-        {% else %}
-          <input type="text" name="project" placeholder="Project name" autocomplete="off">
-        {% endif %}
-        <input type="submit">
-      </form>
-      <hr>
+  <body class="min-h-screen bg-gray-50">
+    <!-- Header -->
+    <header class="header-gradient shadow-lg">
+      <div class="container mx-auto px-4 py-6">
+        <div class="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
+          <h1 class="text-3xl font-bold text-white flex items-center space-x-2">
+            <span class="text-4xl">🕵️</span>
+            <a href="/" class="hover:text-python-yellow transition-colors duration-200">PyPI Inspector</a>
+          </h1>
+          
+          <!-- Search Form -->
+          <form action="/" method="get" class="w-full md:w-auto">
+            <div class="flex space-x-2">
+              {% if h2 %}
+                <input type="text" name="project" placeholder="Enter project name..." 
+                       value="{{ h2 }}" autocomplete="off"
+                       class="px-4 py-2 rounded-lg border-2 border-white/20 bg-white/10 text-white placeholder-white/70 focus:outline-none focus:border-python-yellow focus:bg-white focus:text-gray-900 transition-all duration-200 w-64">
+              {% else %}
+                <input type="text" name="project" placeholder="Enter project name..." 
+                       autocomplete="off"
+                       class="px-4 py-2 rounded-lg border-2 border-white/20 bg-white/10 text-white placeholder-white/70 focus:outline-none focus:border-python-yellow focus:bg-white focus:text-gray-900 transition-all duration-200 w-64">
+              {% endif %}
+              <button type="submit" 
+                      class="bg-python-yellow hover:bg-python-yellow-dark text-gray-900 font-semibold py-2 px-6 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg">
+                Search
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
       {% block above_body %}{% endblock %}
-      {% if h2 %}
-      <h2>
-        {% if h2_link %}
-        <a href="{{ h2_link }}">{{ h2 }}</a>
-        {% else %}
-        {{ h2 }}
-        {% endif %}
-        {% if h2_paren_link %}
-        (<a href="{{ h2_paren_link }}">{{ h2_paren }}</a>)
-        {% endif %}
-      </h2>
-      {% endif %}
-      {% if h3 %}
-      <h3>
-        {% if h3_link %}
-        <a href="{{ h3_link }}">{{ h3 }}</a>
-        {% else %}
-        {{ h3 }}
-        {% endif %}
-        {% if h3_paren_link %}
-        (<a href="{{ h3_paren_link }}">{{ h3_paren }}</a>)
-        {% endif %}
-      </h3>
-      {% endif %}
-      {% if h4 %}
-      <h4>
-        {% if h4_link %}
-        <a href="{{ h4_link }}">{{ h4 }}</a>
-        {% else %}
-        {{ h4 }}
-        {% endif %}
-      </h4>
-      {% endif %}
-      {% if h5 %}
-      <h5>
-        {% if h5_link %}
-        <a href="{{ h5_link }}">{{ h5 }}</a>
-        {% else %}
-        {{ h5 }}
-        {% endif %}
-      </h5>
+      
+      <!-- Breadcrumb Navigation -->
+      {% if h2 or h3 or h4 or h5 %}
+      <nav class="mb-6">
+        <ol class="flex flex-wrap items-center space-x-2 text-sm">
+          <li><a href="/" class="text-python-blue hover:text-python-blue-dark transition-colors">Home</a></li>
+          
+          {% if h2 %}
+          <li class="flex items-center">
+            <svg class="w-4 h-4 mx-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+            </svg>
+            <span class="font-semibold text-gray-700">
+              {% if h2_link %}
+                <a href="{{ h2_link }}" class="text-python-blue hover:text-python-blue-dark transition-colors">{{ h2 }}</a>
+              {% else %}
+                {{ h2 }}
+              {% endif %}
+              {% if h2_paren_link %}
+                (<a href="{{ h2_paren_link }}" class="text-python-blue hover:text-python-blue-dark transition-colors">{{ h2_paren }}</a>)
+              {% endif %}
+            </span>
+          </li>
+          {% endif %}
+          
+          {% if h3 %}
+          <li class="flex items-center">
+            <svg class="w-4 h-4 mx-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+            </svg>
+            <span class="text-gray-600">
+              {% if h3_link %}
+                <a href="{{ h3_link }}" class="text-python-blue hover:text-python-blue-dark transition-colors">{{ h3 }}</a>
+              {% else %}
+                {{ h3 }}
+              {% endif %}
+              {% if h3_paren_link %}
+                (<a href="{{ h3_paren_link }}" class="text-python-blue hover:text-python-blue-dark transition-colors">{{ h3_paren }}</a>)
+              {% endif %}
+            </span>
+          </li>
+          {% endif %}
+          
+          {% if h4 %}
+          <li class="flex items-center">
+            <svg class="w-4 h-4 mx-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+            </svg>
+            <span class="text-gray-600">
+              {% if h4_link %}
+                <a href="{{ h4_link }}" class="text-python-blue hover:text-python-blue-dark transition-colors">{{ h4 }}</a>
+              {% else %}
+                {{ h4 }}
+              {% endif %}
+            </span>
+          </li>
+          {% endif %}
+          
+          {% if h5 %}
+          <li class="flex items-center">
+            <svg class="w-4 h-4 mx-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+            </svg>
+            <span class="text-gray-600">
+              {% if h5_link %}
+                <a href="{{ h5_link }}" class="text-python-blue hover:text-python-blue-dark transition-colors">{{ h5 }}</a>
+              {% else %}
+                {{ h5 }}
+              {% endif %}
+            </span>
+          </li>
+          {% endif %}
+        </ol>
+      </nav>
       {% endif %}
-      {% block body %}{% endblock %}
+      
+      <!-- Page Content -->
+      <div class="bg-white rounded-lg shadow-md p-6">
+        {% block body %}{% endblock %}
+      </div>
     </main>
-    <footer>
-      <small>Source: <a href="https://github.com/pypi/inspector">https://github.com/pypi/inspector</a></small>
+
+    <!-- Footer -->
+    <footer class="mt-16 py-8 bg-gray-100 border-t border-gray-200">
+      <div class="container mx-auto px-4 text-center">
+        <p class="text-gray-600 text-sm">
+          Source: <a href="https://github.com/pypi/inspector" 
+                     class="text-python-blue hover:text-python-blue-dark transition-colors">
+            github.com/pypi/inspector
+          </a>
+        </p>
+      </div>
     </footer>
   </body>
 </html>
diff --git a/inspector/templates/code.html b/inspector/templates/code.html
index 210e985..a6d0e03 100644
--- a/inspector/templates/code.html
+++ b/inspector/templates/code.html
@@ -2,25 +2,55 @@
 
 {% block head %}
 <link rel="stylesheet" type="text/css" href="/static/prism.css">
-<link rel="stylesheet" type="text/css" href="/static/style.css">
+<style>
+  pre[class*="language-"] {
+    background: #f8f9fa;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    margin: 1rem 0;
+  }
+  .line-numbers .line-numbers-rows {
+    border-right: 1px solid #ddd;
+  }
+</style>
 {% endblock %}
 
 {% block above_body %}
-    <fieldset class="analysis-summary">
-        <legend><strong>Summary</strong></legend>
-        <ul>
+    <div class="bg-gradient-to-r from-python-yellow to-python-yellow-dark rounded-lg p-6 mb-6 shadow-lg">
+        <h3 class="text-xl font-bold text-gray-900 mb-4">Analysis Summary</h3>
+        <ul class="space-y-2">
             {% for detail in file_details %}
-                <li>{{ detail|safe }}</li>
+                <li class="flex items-start">
+                    <svg class="w-5 h-5 text-gray-700 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                    <span class="text-gray-800">{{ detail|safe }}</span>
+                </li>
             {% endfor %}
         </ul>
-    </fieldset>
+    </div>
 {% endblock %}
 
 {% block body %}
-<a href="{{ mailto_report_link }}" class="report-anchor"> <strong>Report Malicious Package</strong> </a>
-<pre id="line" class="line-numbers linkable-line-numbers language-{{ name }}">
+<div class="space-y-4">
+    <div class="flex justify-end">
+        <a href="{{ mailto_report_link }}" class="inline-flex items-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg transition-colors duration-200 shadow-md hover:shadow-lg">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+            </svg>
+            Report Malicious Package
+        </a>
+    </div>
+    
+    <div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden">
+        <div class="bg-python-blue text-white px-4 py-2">
+            <span class="font-mono text-sm">{{ name|upper }} Code</span>
+        </div>
+        <pre id="line" class="line-numbers linkable-line-numbers language-{{ name }} m-0">
 {# Indenting the below <code> tag will cause rendering issues! #}
 <code class="language-{{ name }}">{{- code }}</code>
-</pre>
+        </pre>
+    </div>
+</div>
 <script src="/static/prism.js"></script>
 {% endblock %}
diff --git a/inspector/templates/disasm.html b/inspector/templates/disasm.html
index 0f9dc8c..acb88ec 100644
--- a/inspector/templates/disasm.html
+++ b/inspector/templates/disasm.html
@@ -2,58 +2,106 @@
 
 {% block head %}
     <link rel="stylesheet" type="text/css" href="/static/prism.css">
-    <link rel="stylesheet" type="text/css" href="/static/style.css">
+    <style>
+      pre[class*="language-"], pre code {
+        background: #f8f9fa;
+        border: 1px solid #e5e7eb;
+        border-radius: 0.5rem;
+        margin: 1rem 0;
+      }
+      .line-numbers .line-numbers-rows {
+        border-right: 1px solid #ddd;
+      }
+    </style>
 {% endblock %}
 
 {% block above_body %}
-    <fieldset class="analysis-summary">
-        <legend><strong>Summary</strong></legend>
-        <ul>
+    <div class="bg-gradient-to-r from-python-yellow to-python-yellow-dark rounded-lg p-6 mb-6 shadow-lg">
+        <h3 class="text-xl font-bold text-gray-900 mb-4">Analysis Summary</h3>
+        <ul class="space-y-2">
             {% for detail in file_details %}
-                <li>{{ detail|safe }}</li>
+                <li class="flex items-start">
+                    <svg class="w-5 h-5 text-gray-700 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                    <span class="text-gray-800">{{ detail|safe }}</span>
+                </li>
             {% endfor %}
         </ul>
-    </fieldset>
+    </div>
 {% endblock %}
 
 {% block body %}
-    <a href="{{ mailto_report_link }}" style="color:red"> <strong>Report Malicious Package</strong> </a>
-    <br>
-    <br>
-    <div>
-
-        <label for="disassembly-radio">Disassembly</label>
-        <input type="radio" id="disassembly-radio" name="view-mode" checked/>
-
-        <label for="decompilation-radio">Decompilation</label>
-        <input type="radio" id="decompilation-radio" name="view-mode"/>
-    </div>
-<pre id="disassembly">
+    <div class="space-y-4">
+        <div class="flex justify-between items-center">
+            <div class="bg-white border-2 border-gray-200 rounded-lg inline-flex p-1">
+                <button type="button" id="disassembly-btn" 
+                        class="px-4 py-2 rounded-md text-sm font-medium bg-python-blue text-white transition-all duration-200">
+                    Disassembly
+                </button>
+                <button type="button" id="decompilation-btn"
+                        class="px-4 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900 transition-all duration-200">
+                    Decompilation
+                </button>
+            </div>
+            
+            <a href="{{ mailto_report_link }}" class="inline-flex items-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg transition-colors duration-200 shadow-md hover:shadow-lg">
+                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+                </svg>
+                Report Malicious Package
+            </a>
+        </div>
+        
+        <div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden">
+            <div class="bg-python-blue text-white px-4 py-2">
+                <span class="font-mono text-sm" id="code-header">DISASSEMBLY</span>
+            </div>
+            <pre id="disassembly" class="m-0 p-4">
 {# Indenting the below <code> tags will cause rendering issues! #}
 <code>{{- disassembly }}</code>
-</pre>
-<pre id="decompilation" style="display: none" class="line-numbers linkable-line-numbers language-python">
+            </pre>
+            <pre id="decompilation" style="display: none" class="line-numbers linkable-line-numbers language-python m-0">
 {# Indenting the below <code> tags will cause rendering issues! #}
 <code class="language-python">{{- decompilation }}</code>
-</pre>
+            </pre>
+        </div>
+    </div>
 
     <script>
         let disassembly = document.getElementById("disassembly");
         let decompilation = document.getElementById("decompilation");
-        let disassemblyRadio = document.getElementById("disassembly-radio");
-        let decompilationRadio = document.getElementById("decompilation-radio");
+        let disassemblyBtn = document.getElementById("disassembly-btn");
+        let decompilationBtn = document.getElementById("decompilation-btn");
+        let codeHeader = document.getElementById("code-header");
 
-        disassemblyRadio.addEventListener("click", function () {
+        disassemblyBtn.addEventListener("click", function () {
             disassembly.style.display = "";
             decompilation.style.display = "none";
+            
+            disassemblyBtn.classList.add("bg-python-blue", "text-white");
+            disassemblyBtn.classList.remove("text-gray-700", "hover:text-gray-900");
+            decompilationBtn.classList.remove("bg-python-blue", "text-white");
+            decompilationBtn.classList.add("text-gray-700", "hover:text-gray-900");
+            
+            codeHeader.textContent = "DISASSEMBLY";
         });
 
-        decompilationRadio.addEventListener("click", function () {
+        decompilationBtn.addEventListener("click", function () {
             disassembly.style.display = "none";
             decompilation.style.display = "";
+            
+            decompilationBtn.classList.add("bg-python-blue", "text-white");
+            decompilationBtn.classList.remove("text-gray-700", "hover:text-gray-900");
+            disassemblyBtn.classList.remove("bg-python-blue", "text-white");
+            disassemblyBtn.classList.add("text-gray-700", "hover:text-gray-900");
+            
+            codeHeader.textContent = "DECOMPILATION";
 
             // line numbers get messed up when changing the display attribute, so we need to refresh them...
-            Prism.plugins.lineNumbers.resize(decompilation)
+            if (typeof Prism !== 'undefined' && Prism.plugins && Prism.plugins.lineNumbers) {
+                Prism.plugins.lineNumbers.resize(decompilation);
+            }
         });
     </script>
 
diff --git a/inspector/templates/index.html b/inspector/templates/index.html
index 21f5da2..28913c5 100644
--- a/inspector/templates/index.html
+++ b/inspector/templates/index.html
@@ -1 +1,45 @@
 {% extends 'base.html' %}
+
+{% block body %}
+<div class="text-center py-12">
+  <div class="mb-8">
+    <h2 class="text-4xl font-bold text-gray-800 mb-4">Welcome to PyPI Inspector</h2>
+    <p class="text-lg text-gray-600 max-w-2xl mx-auto">
+      Analyze and inspect Python packages from the Python Package Index (PyPI). 
+      Search for any package to view its releases, artifacts, and detailed information.
+    </p>
+  </div>
+  
+  <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
+    <div class="bg-gradient-to-br from-python-blue to-python-blue-dark rounded-lg p-6 text-white shadow-lg">
+      <svg class="w-12 h-12 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+      </svg>
+      <h3 class="text-xl font-semibold mb-2">Search Packages</h3>
+      <p class="text-sm opacity-90">Find any Python package by name</p>
+    </div>
+    
+    <div class="bg-gradient-to-br from-python-yellow to-python-yellow-dark rounded-lg p-6 text-gray-900 shadow-lg">
+      <svg class="w-12 h-12 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+      </svg>
+      <h3 class="text-xl font-semibold mb-2">View Releases</h3>
+      <p class="text-sm">Browse all versions and release history</p>
+    </div>
+    
+    <div class="bg-gradient-to-br from-python-blue to-python-blue-dark rounded-lg p-6 text-white shadow-lg">
+      <svg class="w-12 h-12 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
+      </svg>
+      <h3 class="text-xl font-semibold mb-2">Inspect Code</h3>
+      <p class="text-sm opacity-90">Analyze package contents and code</p>
+    </div>
+  </div>
+  
+  <div class="mt-12">
+    <p class="text-gray-500 text-sm">
+      Enter a package name in the search bar above to get started
+    </p>
+  </div>
+</div>
+{% endblock %}
diff --git a/inspector/templates/links.html b/inspector/templates/links.html
index 4c674fb..8430e96 100644
--- a/inspector/templates/links.html
+++ b/inspector/templates/links.html
@@ -1,9 +1,25 @@
 {% extends 'base.html' %}
 
 {% block body %}
-<ul>
-{% for link in links %}
-  <li><a href="{{ link }}">{{ link|unquote }}</a></li>
-{% endfor %}
-</ul>
+<div class="space-y-4">
+  <div class="bg-gradient-to-r from-python-blue to-python-blue-dark text-white rounded-lg p-6 shadow-lg">
+    <h2 class="text-2xl font-bold mb-2">Package Artifacts</h2>
+    <p class="opacity-90">Available files for download</p>
+  </div>
+  
+  <div class="bg-white rounded-lg shadow-md border border-gray-200 p-6">
+    <ul class="space-y-3">
+    {% for link in links %}
+      <li class="flex items-center p-3 hover:bg-gray-50 rounded-lg transition-colors duration-150">
+        <svg class="w-5 h-5 text-python-blue mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
+        </svg>
+        <a href="{{ link }}" class="text-python-blue hover:text-python-blue-dark font-mono text-sm transition-colors duration-200 break-all">
+          {{ link|unquote }}
+        </a>
+      </li>
+    {% endfor %}
+    </ul>
+  </div>
+</div>
 {% endblock %}
diff --git a/inspector/templates/releases.html b/inspector/templates/releases.html
index fa90ba5..2f805f7 100644
--- a/inspector/templates/releases.html
+++ b/inspector/templates/releases.html
@@ -1,45 +1,74 @@
 {% extends 'base.html' %}
 
-{% block head %}
-  <link rel="stylesheet" type="text/css" href="/static/style.css">
-{% endblock %}
-
 {% block body %}
-{% if releases|length != 1 %}
-  <p>Retrieved {{ releases|length }} versions.</p>
-{% else %}
-  <p>Retrieved 1 version.</p>
-{% endif %}
-
-<table>
-<colgroup>
-  <col style="width: 160px">
-  <col style="width: 160px">
-  <col style="width: 160px">
-</colgroup>
-<thead>
-<tr>
-  <th>Version</th>
-  <th>Upload Timestamp</th>
-  <th>Artifacts</th>
-</tr>
-</thead>
-{% for key, value in releases.items() %}
-  <tr>
-  {% if value|length > 0 %}
-    <td><a href="./{{ key }}">{{ key }}</a></td>
-    <td>{{ value[0]['upload_time'] }}</td>
-    <td>{{ value|length }}</td>
-  {% else %}
-    <td>{{ key }}</td>
-    <td><span class="no-entries"><i>Not Available</i></span></td>
-    <td><span class="no-entries"><i>Not Available</i></span></td>
-  {% endif %}
-  </tr>
-{% endfor %}
-<tbody>
-</tbody>
-
-</table>
+<div class="space-y-6">
+  <!-- Summary Card -->
+  <div class="bg-gradient-to-r from-python-blue to-python-blue-dark text-white rounded-lg p-6 shadow-lg">
+    <div class="flex items-center justify-between">
+      <div>
+        <h2 class="text-2xl font-bold mb-2">Package Releases</h2>
+        {% if releases|length != 1 %}
+          <p class="text-lg opacity-90">Retrieved {{ releases|length }} versions</p>
+        {% else %}
+          <p class="text-lg opacity-90">Retrieved 1 version</p>
+        {% endif %}
+      </div>
+      <svg class="w-16 h-16 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
+      </svg>
+    </div>
+  </div>
 
+  <!-- Releases Table -->
+  <div class="overflow-hidden shadow-lg rounded-lg border border-gray-200">
+    <table class="min-w-full divide-y divide-gray-200">
+      <thead class="bg-python-blue text-white">
+        <tr>
+          <th scope="col" class="px-6 py-4 text-left text-xs font-medium uppercase tracking-wider">
+            Version
+          </th>
+          <th scope="col" class="px-6 py-4 text-left text-xs font-medium uppercase tracking-wider">
+            Upload Timestamp
+          </th>
+          <th scope="col" class="px-6 py-4 text-left text-xs font-medium uppercase tracking-wider">
+            Artifacts
+          </th>
+        </tr>
+      </thead>
+      <tbody class="bg-white divide-y divide-gray-200">
+        {% for key, value in releases.items() %}
+        <tr class="hover:bg-gray-50 transition-colors duration-150">
+          {% if value|length > 0 %}
+            <td class="px-6 py-4 whitespace-nowrap">
+              <a href="./{{ key }}" class="text-python-blue hover:text-python-blue-dark font-semibold transition-colors duration-200">
+                {{ key }}
+              </a>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
+              {{ value[0]['upload_time'] }}
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                {{ value|length }} artifact{% if value|length != 1 %}s{% endif %}
+              </span>
+            </td>
+          {% else %}
+            <td class="px-6 py-4 whitespace-nowrap text-gray-500">
+              {{ key }}
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              <span class="text-gray-400 italic text-sm">Not Available</span>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-500">
+                N/A
+              </span>
+            </td>
+          {% endif %}
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</div>
 {% endblock %}