diff --git a/index.html b/index.html
index f654223..90bae70 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
     rel="stylesheet">
 </head>
 
-<body class="dark text-polkadot-100 bg-black karla-400">
+<body class="dark text-polkadot-100 bg-polkadot-950 karla-400">
   <div id="root" class="flex justify-center"></div>
   <script type="module" src="/src/main.tsx"></script>
 </body>
diff --git a/src/codec-components/EditCodec/CSequence.tsx b/src/codec-components/EditCodec/CSequence.tsx
index 00088e9..77ea525 100644
--- a/src/codec-components/EditCodec/CSequence.tsx
+++ b/src/codec-components/EditCodec/CSequence.tsx
@@ -47,12 +47,12 @@ export const CSequence: EditSequence = ({
       </ul>
       <button
         className={clsx(
-          "flex flex-row gap-2 border rounded-2xl py-1 px-3 mt-3",
-          "hover:border-polkadot-400 hover:text-polkadot-400 hover:cursor-pointer",
+          "flex flex-row gap-2 border rounded-full py-1 pl-3 pr-1 mt-3 border-slate-500 text-slate-500",
+          "hover:border-polkadot-500 hover:text-polkadot-500 hover:cursor-pointer",
         )}
         onClick={addItem}
       >
-        add item <CirclePlus strokeWidth="1" />
+        add item <CirclePlus strokeWidth="1"/>
       </button>
     </div>
   )
diff --git a/src/codec-components/EditCodec/CStruct.tsx b/src/codec-components/EditCodec/CStruct.tsx
index 7ed3583..654599b 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 && "backdrop-brightness-150",
+        isActive && "bg-slate-900 bg-opacity-50",
       )}
       onMouseEnter={() => setHovered({ id: pathStr, hover: true })}
       onMouseLeave={() => setHovered({ id: pathStr, hover: false })}
diff --git a/src/codec-components/EditCodec/codec-components.tsx b/src/codec-components/EditCodec/codec-components.tsx
index 36dbcfa..0f1738d 100644
--- a/src/codec-components/EditCodec/codec-components.tsx
+++ b/src/codec-components/EditCodec/codec-components.tsx
@@ -123,9 +123,9 @@ export const TextInputField: FC<{
       {children(
         <input
           className={twMerge(
-            "text-sm border rounded p-2 border-polkadot-200 leading-tight text-white",
-            warn ? "border-orange-400" : null,
-            error ? "border-red-600" : null,
+            "px-4 py-2 border border-slate-500 leading-tight text-white",
+            warn ? "border-yellow-400" : null,
+            error ? "border-red-500" : null,
             className,
           )}
           value={value}
diff --git a/src/codec-components/ViewCodec/CStruct.tsx b/src/codec-components/ViewCodec/CStruct.tsx
index 92874e5..80006a9 100644
--- a/src/codec-components/ViewCodec/CStruct.tsx
+++ b/src/codec-components/ViewCodec/CStruct.tsx
@@ -66,7 +66,7 @@ const StructItem: React.FC<{
     <li
       className={twMerge(
         "flex flex-col transition-all duration-300",
-        isActive && "backdrop-brightness-150",
+        isActive && "bg-slate-900 bg-opacity-50",
       )}
       onMouseEnter={() => setHovered({ id: pathStr, hover: true })}
       onMouseLeave={() => setHovered({ id: pathStr, hover: false })}
diff --git a/src/codec-components/common/ListItem.tsx b/src/codec-components/common/ListItem.tsx
index 692a16f..2652363 100644
--- a/src/codec-components/common/ListItem.tsx
+++ b/src/codec-components/common/ListItem.tsx
@@ -67,7 +67,7 @@ export const ListItem: React.FC<{
     <li
       className={twMerge(
         "flex flex-col mb-1",
-        isActive && "backdrop-brightness-150",
+        isActive && "bg-slate-900 bg-opacity-50",
       )}
       onMouseEnter={() => setHovered({ id: pathStr, hover: true })}
       onMouseLeave={() => setHovered({ id: pathStr, hover: false })}
@@ -76,7 +76,7 @@ export const ListItem: React.FC<{
       {inline ? null : (
         <div
           className={clsx(
-            "flex-row p-2 items-center border border-polkadot-700",
+            "flex-row p-2 items-center border border-slate-500",
             isCollapsed ? "hidden" : "",
           )}
         >
diff --git a/src/components/BinaryInput.tsx b/src/components/BinaryInput.tsx
index a5e1d6f..a70fad5 100644
--- a/src/components/BinaryInput.tsx
+++ b/src/components/BinaryInput.tsx
@@ -71,7 +71,7 @@ export const BinaryInput: React.FC<{
       {(input) => (
         <div
           className={twMerge(
-            "border rounded p-2 border-polkadot-200 leading-tight text-white focus-within:outline focus-within:outline-1 flex items-center gap-2",
+            "px-4 py-2 border border-slate-500 leading-tight text-white focus-within:outline focus-within:outline-1 flex items-center gap-2",
             warn ? "border-orange-400" : null,
             uploadError ? "border-red-600" : null,
           )}
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 0ce8536..7b833a5 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -35,7 +35,7 @@ export const SearchableSelect = <T,>({
         onClose={() => setQuery("")}
         immediate
       >
-        <div className="flex flex-row px-4 py-2 border border-polkadot-200 text-white bg-black">
+        <div className="flex flex-row px-4 py-2 border border-slate-500 text-white bg-transparent">
           <ComboboxInput
             className="text-ellipsis overflow-hidden whitespace-nowrap focus:outline-none select-all"
             displayValue={(option: T) =>
diff --git a/src/components/TextInputField.tsx b/src/components/TextInputField.tsx
index fb05d3b..51c31ac 100644
--- a/src/components/TextInputField.tsx
+++ b/src/components/TextInputField.tsx
@@ -27,7 +27,7 @@ export const TextInputField: FC<{
       {children(
         <input
           className={twMerge(
-            "text-sm border rounded p-2 border-polkadot-200 leading-tight text-white",
+            "px-4 py-2 border border-slate-500 leading-tight text-white",
             warn ? "border-orange-400" : null,
             error ? "border-red-600" : null,
             className,
diff --git a/src/index.css b/src/index.css
index 9a8151c..724899b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,7 +4,7 @@
 
 input,
 dialog {
-  @apply bg-black;
+  @apply bg-transparent;
 }
 
 :root {
diff --git a/src/pages/Extrinsics/EditMode.tsx b/src/pages/Extrinsics/EditMode.tsx
index 70eeaa4..7410e3a 100644
--- a/src/pages/Extrinsics/EditMode.tsx
+++ b/src/pages/Extrinsics/EditMode.tsx
@@ -66,7 +66,7 @@ export const EditMode: React.FC<{
               </div>
             </div>
             <div className="flex-1">
-              <div className="p-2 rounded">
+              <div className="p-2">
                 <Marker id={[]} />
                 <EditCodec {...props} />
               </div>
diff --git a/src/pages/Header.tsx b/src/pages/Header.tsx
index 454cc21..59cfd21 100644
--- a/src/pages/Header.tsx
+++ b/src/pages/Header.tsx
@@ -2,19 +2,19 @@ import { Link } from "react-router-dom"
 import { NetworkSwitcher } from "./Network/Network"
 
 export const Header = () => (
-  <div className="flex p-4 pb-2 items-center flex-shrink-0">
+  <div className="flex p-4 pb-2 items-center flex-shrink-0 gap-2">
     <div className="flex flex-1 items-center flex-row gap-2">
       <img
         className="w-14 min-w-14"
         src="/papi_logo-dark.svg"
         alt="papi-logo"
       />
-      <h1 className="hidden lg:block poppins-regular text-xl">
+      <h1 className="hidden lg:block poppins-regular text-lg">
         papi <span className="poppins-extralight">console</span>
       </h1>
     </div>
     <NetworkSwitcher />
-    <div className="flex flex-row items-center justify-end bg-polkadot-800 px-1 py-1 rounded-full">
+    <div className="flex flex-row items-center justify-end bg-polkadot-800 px-1 py-1 rounded-full text-nowrap">
       <Link
         to="/explorer"
         className="cursor-pointer hover:text-polkadot-0 px-3 py-1 hover:bg-polkadot-500 rounded-full"
diff --git a/src/pages/Network/Network.tsx b/src/pages/Network/Network.tsx
index a2191ce..913e5ae 100644
--- a/src/pages/Network/Network.tsx
+++ b/src/pages/Network/Network.tsx
@@ -60,7 +60,7 @@ export function NetworkSwitcher() {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant="outline" className="w-[200px] justify-between">
+        <Button variant="outline" className="w-[200px] gap-0 justify-between text-base px-3">
           {selectedNetwork.display}
           <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>