diff --git a/frontend/src/components/AddRepoForm.tsx b/frontend/src/components/AddRepoForm.tsx
index b7fc56e..d160c60 100644
--- a/frontend/src/components/AddRepoForm.tsx
+++ b/frontend/src/components/AddRepoForm.tsx
@@ -24,7 +24,7 @@ export function AddRepoForm({ onAdd, loading }: AddRepoFormProps) {
     return (
       <button
         onClick={() => setShowForm(true)}
-        className="btn-primary"
+        className="px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white text-sm font-medium rounded-lg transition-all disabled:opacity-50"
         disabled={loading}
       >
         + Add Repository
@@ -33,22 +33,27 @@ export function AddRepoForm({ onAdd, loading }: AddRepoFormProps) {
   }
 
   return (
-    <div className="fixed inset-0 bg-black/20 backdrop-blur-sm flex items-center justify-center z-50">
-      <div className="bg-white rounded-lg shadow-lg w-full max-w-md mx-4">
-        <div className="flex items-center justify-between p-5 border-b border-gray-200">
-          <h3 className="text-base font-semibold text-gray-900">Add Repository</h3>
+    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50">
+      <div className="bg-[#111113] border border-white/10 rounded-2xl shadow-2xl w-full max-w-md mx-4">
+        {/* Header */}
+        <div className="flex items-center justify-between p-5 border-b border-white/5">
+          <div>
+            <h3 className="text-lg font-semibold text-white">Add Repository</h3>
+            <p className="text-sm text-gray-400 mt-0.5">Clone and index a Git repository</p>
+          </div>
           <button
             onClick={() => setShowForm(false)}
-            className="text-gray-400 hover:text-gray-600 text-xl leading-none"
+            className="w-8 h-8 flex items-center justify-center rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors"
             disabled={loading}
           >
-            ×
+            ✕
           </button>
         </div>
 
-        <form onSubmit={handleSubmit} className="p-5 space-y-4">
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="p-5 space-y-5">
           <div>
-            <label className="block text-sm font-medium mb-2 text-gray-700">
+            <label className="block text-sm font-medium mb-2 text-gray-300">
               Git URL
             </label>
             <input
@@ -56,14 +61,15 @@ export function AddRepoForm({ onAdd, loading }: AddRepoFormProps) {
               value={gitUrl}
               onChange={(e) => setGitUrl(e.target.value)}
               placeholder="https://github.com/username/repo"
-              className="input"
+              className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder:text-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/20 transition-all"
               required
               disabled={loading}
+              autoFocus
             />
           </div>
 
           <div>
-            <label className="block text-sm font-medium mb-2 text-gray-700">
+            <label className="block text-sm font-medium mb-2 text-gray-300">
               Branch
             </label>
             <input
@@ -71,23 +77,17 @@ export function AddRepoForm({ onAdd, loading }: AddRepoFormProps) {
               value={branch}
               onChange={(e) => setBranch(e.target.value)}
               placeholder="main"
-              className="input"
+              className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder:text-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/20 transition-all"
               required
               disabled={loading}
             />
-            <p className="mt-1.5 text-xs text-gray-500">
+            <p className="mt-2 text-xs text-gray-500">
               The repository will be cloned and automatically indexed
             </p>
           </div>
 
-          <div className="flex gap-2 pt-2">
-            <button
-              type="submit"
-              className="btn-primary flex-1"
-              disabled={loading}
-            >
-              {loading ? 'Adding...' : 'Add & Index'}
-            </button>
+          {/* Actions */}
+          <div className="flex gap-3 pt-2">
             <button
               type="button"
               onClick={() => {
@@ -95,11 +95,25 @@ export function AddRepoForm({ onAdd, loading }: AddRepoFormProps) {
                 setGitUrl('')
                 setBranch('main')
               }}
-              className="btn-secondary px-6"
+              className="flex-1 px-4 py-3 bg-white/5 border border-white/10 text-gray-300 font-medium rounded-xl hover:bg-white/10 transition-colors disabled:opacity-50"
               disabled={loading}
             >
               Cancel
             </button>
+            <button
+              type="submit"
+              className="flex-1 px-4 py-3 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-medium rounded-xl transition-all disabled:opacity-50 flex items-center justify-center gap-2"
+              disabled={loading}
+            >
+              {loading ? (
+                <>
+                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                  <span>Adding...</span>
+                </>
+              ) : (
+                'Add & Index'
+              )}
+            </button>
           </div>
         </form>
       </div>
diff --git a/frontend/src/components/RepoList.tsx b/frontend/src/components/RepoList.tsx
index 05b79ff..146bb7f 100644
--- a/frontend/src/components/RepoList.tsx
+++ b/frontend/src/components/RepoList.tsx
@@ -6,36 +6,55 @@ interface RepoListProps {
   onSelect: (repoId: string) => void
 }
 
+// Status indicator with glow effect
+const StatusIndicator = ({ status }: { status: string }) => {
+  const config = {
+    indexed: { color: 'green', label: 'Indexed', icon: '✓' },
+    cloned: { color: 'blue', label: 'Ready', icon: '✓' },
+    indexing: { color: 'yellow', label: 'Indexing', icon: '◌' },
+    cloning: { color: 'yellow', label: 'Cloning', icon: '◌' },
+    error: { color: 'red', label: 'Error', icon: '✗' },
+  }[status] || { color: 'gray', label: status, icon: '•' }
+
+  const colorClasses = {
+    green: 'bg-green-500/10 text-green-400 border-green-500/20',
+    blue: 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+    yellow: 'bg-yellow-500/10 text-yellow-400 border-yellow-500/20',
+    red: 'bg-red-500/10 text-red-400 border-red-500/20',
+    gray: 'bg-white/5 text-gray-400 border-white/10',
+  }[config.color]
+
+  const glowClasses = {
+    green: 'shadow-green-500/20',
+    blue: 'shadow-blue-500/20',
+    yellow: 'shadow-yellow-500/20',
+    red: 'shadow-red-500/20',
+    gray: '',
+  }[config.color]
+
+  return (
+    <span className={`inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium border rounded-full ${colorClasses} ${status === 'indexing' || status === 'cloning' ? 'animate-pulse' : ''}`}>
+      <span>{config.icon}</span>
+      <span>{config.label}</span>
+    </span>
+  )
+}
+
 export function RepoList({ repos, selectedRepo, onSelect }: RepoListProps) {
   if (repos.length === 0) {
     return (
-      <div className="card p-16 text-center">
-        <div className="w-20 h-20 mx-auto mb-4 rounded-full bg-gray-100 flex items-center justify-center">
+      <div className="bg-[#111113] border border-white/5 rounded-2xl p-16 text-center">
+        <div className="w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 border border-white/5 flex items-center justify-center">
           <span className="text-4xl">📦</span>
         </div>
-        <h3 className="text-base font-semibold mb-2 text-gray-900">No repositories yet</h3>
-        <p className="text-sm text-gray-600">Add your first repository to start searching code semantically</p>
+        <h3 className="text-lg font-semibold mb-2 text-white">No repositories yet</h3>
+        <p className="text-sm text-gray-400 max-w-sm mx-auto">
+          Add your first repository to start searching code semantically with AI
+        </p>
       </div>
     )
   }
 
-  const getStatusBadge = (status: string) => {
-    switch (status) {
-      case 'indexed':
-        return <span className="badge-success">✓ Indexed</span>
-      case 'cloned':
-        return <span className="badge-success">✓ Ready</span>
-      case 'indexing':
-        return <span className="badge-warning">🔄 Indexing</span>
-      case 'cloning':
-        return <span className="badge-warning">⏳ Cloning</span>
-      case 'error':
-        return <span className="badge-danger">✗ Error</span>
-      default:
-        return <span className="badge-neutral">{status}</span>
-    }
-  }
-
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
       {repos.map((repo) => {
@@ -45,40 +64,62 @@ export function RepoList({ repos, selectedRepo, onSelect }: RepoListProps) {
           <button
             key={repo.id}
             onClick={() => onSelect(repo.id)}
-            className={`text-left card p-5 transition-all hover:shadow-md ${
-              isSelected ? 'ring-2 ring-blue-500 shadow-md' : ''
-            }`}
+            className={`group relative text-left rounded-2xl p-5 transition-all duration-300 
+              bg-[#111113] border overflow-hidden
+              ${isSelected 
+                ? 'border-blue-500/50 shadow-lg shadow-blue-500/10' 
+                : 'border-white/5 hover:border-white/10 hover:bg-[#151518]'
+              }`}
           >
-            <div className="flex items-start justify-between mb-3">
-              <h3 className="font-semibold text-base text-gray-900 truncate pr-2">
-                {repo.name}
-              </h3>
-              {getStatusBadge(repo.status)}
-            </div>
-
-            <div className="space-y-2 text-sm">
-              <div className="flex items-center justify-between text-xs">
-                <span className="text-gray-500">Branch</span>
-                <span className="font-mono text-gray-700">{repo.branch}</span>
+            {/* Subtle gradient overlay on hover */}
+            <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-transparent to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+            
+            {/* Content */}
+            <div className="relative">
+              {/* Header */}
+              <div className="flex items-start justify-between mb-4">
+                <div className="flex items-center gap-3">
+                  <div className={`w-10 h-10 rounded-xl flex items-center justify-center text-lg
+                    ${isSelected 
+                      ? 'bg-blue-500/20 border border-blue-500/30' 
+                      : 'bg-white/5 border border-white/10 group-hover:bg-white/10'
+                    } transition-colors`}
+                  >
+                    📁
+                  </div>
+                  <div>
+                    <h3 className="font-semibold text-white truncate max-w-[140px]">
+                      {repo.name}
+                    </h3>
+                    <p className="text-xs text-gray-500 font-mono">{repo.branch}</p>
+                  </div>
+                </div>
+                <StatusIndicator status={repo.status} />
               </div>
 
-              {repo.file_count > 0 && (
-                <div className="flex items-center justify-between text-xs">
-                  <span className="text-gray-500">Functions</span>
-                  <span className="font-mono font-semibold text-blue-600">
-                    {repo.file_count.toLocaleString()}
-                  </span>
+              {/* Stats */}
+              <div className="space-y-3">
+                {repo.file_count > 0 && (
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-gray-500">Functions indexed</span>
+                    <span className="text-sm font-semibold text-blue-400 font-mono">
+                      {repo.file_count.toLocaleString()}
+                    </span>
+                  </div>
+                )}
+                
+                {/* Quick actions on hover */}
+                <div className={`flex items-center gap-2 pt-3 border-t border-white/5 transition-all duration-200
+                  ${isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}`}
+                >
+                  <span className="text-xs text-gray-500">Click to explore →</span>
                 </div>
-              )}
+              </div>
             </div>
 
+            {/* Selected indicator */}
             {isSelected && (
-              <div className="mt-4 pt-4 border-t border-gray-100">
-                <div className="flex items-center gap-2 text-xs text-blue-600 font-medium">
-                  <div className="w-1.5 h-1.5 rounded-full bg-blue-600" />
-                  Selected for search
-                </div>
-              </div>
+              <div className="absolute top-0 left-0 w-1 h-full bg-gradient-to-b from-blue-500 to-blue-600 rounded-l-2xl" />
             )}
           </button>
         )