diff --git a/website/src/App.tsx b/website/src/App.tsx
index 025513b..2eabf8d 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -367,7 +367,7 @@ function App() {
             {dataLoaded && kernels.length > 0 && !selectedIR && (
               <div className="flex space-x-4">
                 <button
-                  className={`px-3 py-2 text-sm font-medium rounded-md ${activeTab === "overview" ? "bg-gray-100 text-gray-900" : "text-gray-500 hover:text-gray-700"
+                  className={`px-3 py-2 text-sm font-medium rounded-md ${activeTab === "overview" ? "bg-blue-700 text-white shadow-md" : "bg-blue-100 text-blue-700 hover:bg-blue-200"
                     }`}
                   onClick={() => {
                     setActiveTab("overview");
@@ -384,7 +384,7 @@ function App() {
                   Kernel Overview
                 </button>
                 <button
-                  className={`px-3 py-2 text-sm font-medium rounded-md ${activeTab === "comparison" ? "bg-gray-100 text-gray-900" : "text-gray-500 hover:text-gray-700"
+                  className={`px-3 py-2 text-sm font-medium rounded-md ${activeTab === "comparison" ? "bg-blue-700 text-white shadow-md" : "bg-blue-100 text-blue-700 hover:bg-blue-200"
                     }`}
                   onClick={() => {
                     setActiveTab("comparison");
diff --git a/website/src/pages/KernelOverview.tsx b/website/src/pages/KernelOverview.tsx
index 0250c1d..b78ed05 100644
--- a/website/src/pages/KernelOverview.tsx
+++ b/website/src/pages/KernelOverview.tsx
@@ -91,18 +91,18 @@ const KernelOverview: React.FC<KernelOverviewProps> = ({
         <h2 className="text-xl font-semibold mb-4 text-gray-800">
           Available Kernels
         </h2>
-        <div className="grid grid-cols-1 gap-2">
+        <div className="flex flex-wrap gap-2">
           {kernels.map((k, index) => (
             <button
               key={index}
-              className={`p-3 text-left rounded-md transition-colors ${
+              className={`px-4 py-2 text-sm rounded-md transition-colors whitespace-nowrap ${
                 index === selectedKernel
-                  ? "bg-blue-100 border border-blue-300"
-                  : "bg-gray-50 border border-gray-200 hover:bg-blue-50"
+                  ? "bg-blue-100 border border-blue-300 text-blue-800"
+                  : "bg-gray-50 border border-gray-200 hover:bg-blue-50 text-gray-800"
               }`}
               onClick={() => onSelectKernel(index)}
             >
-              <div className="font-medium text-gray-800">{k.name}</div>
+              <div className="font-medium">{k.name}</div>
             </button>
           ))}
         </div>