diff --git a/src/codec-components/EditCodec/CAccountId.tsx b/src/codec-components/EditCodec/CAccountId.tsx
index d11295b..b288ebf 100644
--- a/src/codec-components/EditCodec/CAccountId.tsx
+++ b/src/codec-components/EditCodec/CAccountId.tsx
@@ -87,7 +87,7 @@ export const CAccountId: EditAccountId = ({ value, onValueChanged }) => {
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="flex w-64 justify-between overflow-hidden px-2"
+          className="flex w-64 justify-between overflow-hidden px-2 border border-border bg-input"
           forceSvgSize={false}
         >
           {value !== NOTIN ? (
diff --git a/src/codec-components/EditCodec/CStruct.tsx b/src/codec-components/EditCodec/CStruct.tsx
index 5a5590f..0c91b74 100644
--- a/src/codec-components/EditCodec/CStruct.tsx
+++ b/src/codec-components/EditCodec/CStruct.tsx
@@ -27,7 +27,7 @@ const StructItem: React.FC<{
     <li
       className={twMerge(
         "flex flex-col transition-all duration-300",
-        isActive && "bg-secondary/80",
+        isActive && "bg-secondary/20",
       )}
       onMouseEnter={() => setHovered({ id: pathStr, hover: true })}
       onMouseLeave={() => setHovered({ id: pathStr, hover: false })}
diff --git a/src/codec-components/EditCodec/Tree/ListComponents.tsx b/src/codec-components/EditCodec/Tree/ListComponents.tsx
index d3f8353..5808956 100644
--- a/src/codec-components/EditCodec/Tree/ListComponents.tsx
+++ b/src/codec-components/EditCodec/Tree/ListComponents.tsx
@@ -103,7 +103,7 @@ export const ListDisplay: React.FC<
   )
 }
 
-const noop = () => { }
+const noop = () => {}
 const ListItem: FC<
   PropsWithChildren<{
     idx: number
@@ -124,106 +124,107 @@ const ListItem: FC<
   onZoom,
   onNavigate,
 }) => {
-    const [titleElement, setTitleElement] = useState<HTMLElement | null>(null)
-    const [binaryStatus, setBinaryStatus] = useState<BinaryStatus>()
-    const ref = useHeightObserver(drag?.onMeasure ?? noop)
-    const [isDragging, setIsDragging] = useState(false)
-    const isCollapsed = useStateObservable(isCollapsedRoot$(path))
+  const [titleElement, setTitleElement] = useState<HTMLElement | null>(null)
+  const [binaryStatus, setBinaryStatus] = useState<BinaryStatus>()
+  const ref = useHeightObserver(drag?.onMeasure ?? noop)
+  const [isDragging, setIsDragging] = useState(false)
+  const isCollapsed = useStateObservable(isCollapsedRoot$(path))
 
-    const startDrag = (evt: React.MouseEvent) => {
-      if (!drag || isDragging) return
+  const startDrag = (evt: React.MouseEvent) => {
+    if (!drag || isDragging) return
 
-      setIsDragging(true)
-      drag.onDragStart()
+    setIsDragging(true)
+    drag.onDragStart()
 
-      const start = evt.pageY
-      const mouseMoveHandler = (evt: MouseEvent) => {
-        drag.onDragMove(evt.pageY - start)
-      }
-      const mouseUpHandler = (evt: MouseEvent) => {
-        document.removeEventListener("mouseup", mouseUpHandler)
-        document.removeEventListener("mousemove", mouseMoveHandler)
-        drag.onDragEnd(evt.pageY - start)
-        setIsDragging(false)
-      }
-      document.addEventListener("mousemove", mouseMoveHandler)
-      document.addEventListener("mouseup", mouseUpHandler)
+    const start = evt.pageY
+    const mouseMoveHandler = (evt: MouseEvent) => {
+      drag.onDragMove(evt.pageY - start)
     }
-
-    return (
-      <div
-        ref={drag ? ref : undefined}
-        className={twMerge(
-          "hover:bg-polkadot-800 hover:bg-opacity-60 border-l border-polkadot-700 last:border-0 last:before:block last:before:absolute last:before:border-l last:before:h-4 last:before:border-polkadot-700",
-          drag?.rearranging && "relative",
-          isDragging && "none select-none z-10 bg-polkadot-800 bg-opacity-70 last:border-l last:before:border-0",
-          !isDragging && drag?.rearranging && "transition-transform",
-        )}
-        style={{
-          transform: drag?.translation
-            ? `translateY(${drag.translation}px)`
-            : undefined,
-        }}
-      >
-        <ItemTitle
-          path={path}
-          icon={TypeIcons.list}
-          titleRef={setTitleElement}
-          onZoom={onZoom}
-          onNavigate={onNavigate}
-          binaryStatus={binaryStatus}
-          className={isCollapsed ? "opacity-65" : ""}
-          actions={
-            <>
-              {onDelete && (
-                <button
-                  className={twMerge(
-                    "hover:text-polkadot-500",
-                    editable ? "cursor-pointer" : "opacity-50"
-                  )}
-                  disabled={!editable}
-                  onClick={onDelete}
-                >
-                  <Trash2 size={15} />
-                </button>
-              )}
-              {drag && (
-                <div
-                  className={twMerge(
-                    "hover:text-polkadot-500 -ml-1",
-                    editable
-                      ? isDragging
-                        ? "cursor-grabbing"
-                        : "cursor-grab"
-                      : "opacity-50"
-                  )}
-                  onMouseDown={startDrag}
-                >
-                  <GripVertical size={15} />
-                </div>
-              )}
-            </>
-          }
-        >
-          {idx + 1}
-        </ItemTitle>
-        <div
-          className={twMerge(
-            "pl-6 pb-1 transition-opacity",
-            isCollapsed && "opacity-65",
-          )}
-        >
-          <ChildrenProviders
-            titleElement={titleElement}
-            onValueChange={setBinaryStatus}
-          >
-            {children}
-          </ChildrenProviders>
-        </div>
-      </div>
-    )
+    const mouseUpHandler = (evt: MouseEvent) => {
+      document.removeEventListener("mouseup", mouseUpHandler)
+      document.removeEventListener("mousemove", mouseMoveHandler)
+      drag.onDragEnd(evt.pageY - start)
+      setIsDragging(false)
+    }
+    document.addEventListener("mousemove", mouseMoveHandler)
+    document.addEventListener("mouseup", mouseUpHandler)
   }
 
+  return (
+    <div
+      ref={drag ? ref : undefined}
+      className={twMerge(
+        "hover:bg-secondary/80 hover:bg-opacity-60 border-l border-polkadot-700 last:border-0 last:before:block last:before:absolute last:before:border-l last:before:h-4 last:before:border-polkadot-700",
+        drag?.rearranging && "relative",
+        isDragging &&
+          "none select-none z-10 bg-secondary/80 bg-opacity-70 last:border-l last:before:border-0",
+        !isDragging && drag?.rearranging && "transition-transform",
+      )}
+      style={{
+        transform: drag?.translation
+          ? `translateY(${drag.translation}px)`
+          : undefined,
+      }}
+    >
+      <ItemTitle
+        path={path}
+        icon={TypeIcons.list}
+        titleRef={setTitleElement}
+        onZoom={onZoom}
+        onNavigate={onNavigate}
+        binaryStatus={binaryStatus}
+        className={isCollapsed ? "opacity-65" : ""}
+        actions={
+          <>
+            {onDelete && (
+              <button
+                className={twMerge(
+                  "hover:text-primary",
+                  editable ? "cursor-pointer" : "opacity-50",
+                )}
+                disabled={!editable}
+                onClick={onDelete}
+              >
+                <Trash2 size={15} />
+              </button>
+            )}
+            {drag && (
+              <div
+                className={twMerge(
+                  "hover:text-primary -ml-1",
+                  editable
+                    ? isDragging
+                      ? "cursor-grabbing"
+                      : "cursor-grab"
+                    : "opacity-50",
+                )}
+                onMouseDown={startDrag}
+              >
+                <GripVertical size={15} />
+              </div>
+            )}
+          </>
+        }
+      >
+        {idx + 1}
+      </ItemTitle>
+      <div
+        className={twMerge(
+          "pl-6 pb-1 transition-opacity",
+          isCollapsed && "opacity-65",
+        )}
+      >
+        <ChildrenProviders
+          titleElement={titleElement}
+          onValueChange={setBinaryStatus}
+        >
+          {children}
+        </ChildrenProviders>
+      </div>
+    </div>
+  )
+}
+
 const useDrag = (
   rearrange: boolean,
   props: EditComplexCodecComponentProps<unknown[]>,
@@ -234,8 +235,8 @@ const useDrag = (
   // react stuff... We don't want to keep recreating ResizeObservers on each render, so we prefer having a stable reference.
   const measureCallbacks = useRef<Array<(height: number) => void>>([])
   const onMeasure = (idx: number) =>
-  (measureCallbacks.current[idx] ??= (height) =>
-    (itemHeights.current[idx] = height))
+    (measureCallbacks.current[idx] ??= (height) =>
+      (itemHeights.current[idx] = height))
 
   if (!rearrange) {
     return undefined
@@ -245,9 +246,9 @@ const useDrag = (
     // if we return undefined, then we will miss the "onMeasure" callback of when
     // each item is initialized, so we just return the function to capture measurements
     return (idx: number) => ({
-      onDragEnd() { },
-      onDragMove() { },
-      onDragStart() { },
+      onDragEnd() {},
+      onDragMove() {},
+      onDragStart() {},
       onMeasure: onMeasure(idx),
       translation: translations[idx] ?? 0,
       rearranging: translations.some((t) => t !== 0),
@@ -313,7 +314,7 @@ const useDrag = (
       })
       setTranslations(translations)
     },
-    onDragStart() { },
+    onDragStart() {},
     onMeasure: onMeasure(idx),
     translation: translations[idx] ?? 0,
     rearranging: translations.some((t) => t !== 0),
diff --git a/src/codec-components/EditCodec/codec-components.tsx b/src/codec-components/EditCodec/codec-components.tsx
index 439d9f6..5631cf2 100644
--- a/src/codec-components/EditCodec/codec-components.tsx
+++ b/src/codec-components/EditCodec/codec-components.tsx
@@ -123,7 +123,7 @@ export const TextInputField: FC<{
       {children(
         <input
           className={twMerge(
-            "px-4 py-2 border border-border leading-tight text-foreground bg-background",
+            "px-4 py-2 border border-border leading-tight text-foreground rounded bg-input",
             warn ? "border-yellow-400" : null,
             error ? "border-red-500" : null,
             className,
diff --git a/src/components/BinaryInput.tsx b/src/components/BinaryInput.tsx
index a70fad5..54b44a6 100644
--- a/src/components/BinaryInput.tsx
+++ b/src/components/BinaryInput.tsx
@@ -71,13 +71,13 @@ export const BinaryInput: React.FC<{
       {(input) => (
         <div
           className={twMerge(
-            "px-4 py-2 border border-slate-500 leading-tight text-white focus-within:outline focus-within:outline-1 flex items-center gap-2",
+            "px-4 py-2 border border-border rounded leading-tight focus-within:outline focus-within:outline-1 flex items-center gap-2 bg-input",
             warn ? "border-orange-400" : null,
             uploadError ? "border-red-600" : null,
           )}
         >
           {input}
-          <label title="Load from file" className="text-slate-200">
+          <label title="Load from file" className="text-foreground/80">
             <FileUp size={16} />
             <BinaryFileInput
               validate={validateFile}
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 1606b01..993cef9 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -29,7 +29,7 @@ export const SearchableSelect = <T,>({
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="flex w-52 justify-between overflow-hidden"
+          className="flex w-52 justify-between overflow-hidden bg-input border border-border"
         >
           {value ? (
             <span className="text-ellipsis overflow-hidden">
diff --git a/src/components/TextInputField.tsx b/src/components/TextInputField.tsx
index 51c31ac..f7dd8b1 100644
--- a/src/components/TextInputField.tsx
+++ b/src/components/TextInputField.tsx
@@ -27,7 +27,7 @@ export const TextInputField: FC<{
       {children(
         <input
           className={twMerge(
-            "px-4 py-2 border border-slate-500 leading-tight text-white",
+            "px-4 py-2 border border-border leading-tight text-foreground",
             warn ? "border-orange-400" : null,
             error ? "border-red-600" : null,
             className,
diff --git a/src/index.css b/src/index.css
index 6bbd193..c551c1f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -59,7 +59,7 @@ dialog {
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
     --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
+    --input: 240 5.9% 95%;
     --ring: 328 100% 45%;
     --radius: 0.5rem;
     --chart-1: 12 76% 61%;
@@ -87,7 +87,7 @@ dialog {
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 85.7% 97.3%;
     --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
+    --input: 240 3.7% 6.9%;
     --ring: 328 100% 45%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
diff --git a/src/pages/Header.tsx b/src/pages/Header.tsx
index 795f398..347c9b6 100644
--- a/src/pages/Header.tsx
+++ b/src/pages/Header.tsx
@@ -4,7 +4,7 @@ import { FC, PropsWithChildren } from "react"
 import { twMerge } from "tailwind-merge"
 
 export const Header = () => (
-  <div className="flex p-4 pb-2 items-center flex-shrink-0 gap-2">
+  <div className="flex p-4 pb-2 items-center flex-shrink-0 gap-2 border-b">
     <div className="flex flex-1 items-center flex-row gap-2">
       <img
         className="w-14 min-w-14 hidden dark:inline-block"
diff --git a/src/pages/Network/Network.tsx b/src/pages/Network/Network.tsx
index 4a36bf5..7773550 100644
--- a/src/pages/Network/Network.tsx
+++ b/src/pages/Network/Network.tsx
@@ -66,7 +66,7 @@ export function NetworkSwitcher() {
       <DialogTrigger asChild>
         <Button
           variant="outline"
-          className="w-[200px] gap-0 justify-between text-base px-3"
+          className="w-[200px] gap-0 justify-between text-base px-3 border border-border bg-input"
         >
           {selectedNetwork.display}
           <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />