diff --git a/clients/web/src/components/navigation.tsx b/clients/web/src/components/navigation.tsx
index eacc2a8c..02bc4658 100644
--- a/clients/web/src/components/navigation.tsx
+++ b/clients/web/src/components/navigation.tsx
@@ -30,7 +30,7 @@ export function Navigation() {
   const { monitorData } = useMonitor();
   return (
     <nav>
-      <ul class="flex border-b flex-start border-b-slate-900">
+      <ul class="flex flex-start">
         <For each={TABS}>
           {(tab) => (
             <Show
diff --git a/clients/web/src/components/span/span-list.tsx b/clients/web/src/components/span/span-list.tsx
index c4c16c0a..439cdc32 100644
--- a/clients/web/src/components/span/span-list.tsx
+++ b/clients/web/src/components/span/span-list.tsx
@@ -87,6 +87,7 @@ export function SpanList() {
         <tr class="text-left">
           <For each={columns}>
             {(column) => {
+              console.log(column);
               return (
                 <th
                   tabIndex="0"
@@ -96,7 +97,13 @@ export function SpanList() {
                     }
                   }}
                   onClick={() => column.isSortable && sortColumn(column.name)}
-                  class="p-1 cursor-pointer hover:bg-[#ffffff09]"
+                  class={`p-1 cursor-pointer hover:bg-[#ffffff09] ${
+                    column.name === "time" || column.name === "initiated"
+                      ? "w-2/12" // time and initiated
+                      : column.name === "name"
+                      ? "w-3/12" // name
+                      : "w-5/12" // waterfall
+                  }`}
                 >
                   <div class="flex uppercase select-none items-center gap-2">
                     {column.name}
diff --git a/clients/web/src/components/tauri/configuration-view.tsx b/clients/web/src/components/tauri/configuration-view.tsx
index b7854e11..f7227252 100644
--- a/clients/web/src/components/tauri/configuration-view.tsx
+++ b/clients/web/src/components/tauri/configuration-view.tsx
@@ -7,6 +7,7 @@ import { useParams } from "@solidjs/router";
 import { ConfigurationErrors } from "./configuration-errors";
 import { MissingConfigurationParameterDialog } from "./dialogs/missing-configuration-parameter-dialog";
 import { MissingConfigurationDialog } from "./dialogs/missing-configuration-dialog";
+import { Heading } from "../heading";
 
 export function ConfigurationView() {
   const params = useParams<{
diff --git a/clients/web/src/styles.css b/clients/web/src/css/global.css
similarity index 98%
rename from clients/web/src/styles.css
rename to clients/web/src/css/global.css
index 36d936e9..643357b1 100644
--- a/clients/web/src/styles.css
+++ b/clients/web/src/css/global.css
@@ -1,4 +1,4 @@
-@import "./css/slider.css";
+@import "./slider.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/clients/web/src/render-client.tsx b/clients/web/src/render-client.tsx
index eb60ea83..dd2b7be3 100644
--- a/clients/web/src/render-client.tsx
+++ b/clients/web/src/render-client.tsx
@@ -1,5 +1,5 @@
 import { render } from "solid-js/web";
-import "./styles.css";
+import "~/css/global.css";
 import Entry from "./entry";
 import * as Sentry from "@sentry/browser";
 import { DEV } from "solid-js";