diff --git a/pkgs/webview-ui/app/eslint.config.mjs b/pkgs/webview-ui/app/eslint.config.mjs
index 858cc8fec..6b35c3e35 100644
--- a/pkgs/webview-ui/app/eslint.config.mjs
+++ b/pkgs/webview-ui/app/eslint.config.mjs
@@ -3,7 +3,7 @@ import tseslint from "typescript-eslint";
 import tailwind from "eslint-plugin-tailwindcss";
 import pluginQuery from "@tanstack/eslint-plugin-query";
 
-export default tseslint.config(
+const config = tseslint.config(
   eslint.configs.recommended,
   ...pluginQuery.configs["flat/recommended"],
   ...tseslint.configs.strict,
@@ -30,3 +30,5 @@ export default tseslint.config(
     },
   },
 );
+
+export default config;
diff --git a/pkgs/webview-ui/app/src/Form/fieldset/index.tsx b/pkgs/webview-ui/app/src/Form/fieldset/index.tsx
index 2fc21cf4b..fa5ee953a 100644
--- a/pkgs/webview-ui/app/src/Form/fieldset/index.tsx
+++ b/pkgs/webview-ui/app/src/Form/fieldset/index.tsx
@@ -2,11 +2,11 @@ import { JSX } from "solid-js";
 
 import { Typography } from "@/src/components/Typography";
 
-type FieldsetProps = {
+interface FieldsetProps {
   legend?: string;
   children: JSX.Element;
   class?: string;
-};
+}
 
 export default function Fieldset(props: FieldsetProps) {
   return (
@@ -24,7 +24,7 @@ export default function Fieldset(props: FieldsetProps) {
           </Typography>
         </div>
       )}
-      <div class="flex flex-col gap-y-3 p-5 border border-secondary-200 bg-secondary-50 rounded-md">
+      <div class="flex flex-col gap-y-3 rounded-md border border-secondary-200 bg-secondary-50 p-5">
         {props.children}
       </div>
     </fieldset>
diff --git a/pkgs/webview-ui/app/src/Form/form/index.tsx b/pkgs/webview-ui/app/src/Form/form/index.tsx
index 70c2021d2..9083335f2 100644
--- a/pkgs/webview-ui/app/src/Form/form/index.tsx
+++ b/pkgs/webview-ui/app/src/Form/form/index.tsx
@@ -368,7 +368,7 @@ export function ListValueDisplay<T extends FieldValues, R extends ResponseData>(
   const bottomMost = () => props.idx === 0;
 
   return (
-    <div class="w-full px-2 pb-4 border-b border-secondary-200">
+    <div class="w-full border-b border-secondary-200 px-2 pb-4">
       <div class="flex w-full items-center gap-2">
         {props.children}
         <div class="ml-4 min-w-fit">
@@ -629,7 +629,7 @@ export function ArrayFields<T extends FieldValues, R extends ResponseData>(
                           )}
                         </For>
                         <Show when={fieldArray.error}>
-                          <span class="label-text-alt font-bold text-error-700">
+                          <span class="font-bold text-error-700">
                             {fieldArray.error}
                           </span>
                         </Show>
@@ -652,7 +652,7 @@ export function ArrayFields<T extends FieldValues, R extends ResponseData>(
                           // Button for adding new items
                           components={{
                             before: (
-                              <div class="w-full flex justify-end pb-2">
+                              <div class="flex w-full justify-end pb-2">
                                 <Button
                                   variant="ghost"
                                   type="submit"
diff --git a/pkgs/webview-ui/app/src/components/MachineListItem.tsx b/pkgs/webview-ui/app/src/components/MachineListItem.tsx
index edfb8df1b..947e7368b 100644
--- a/pkgs/webview-ui/app/src/components/MachineListItem.tsx
+++ b/pkgs/webview-ui/app/src/components/MachineListItem.tsx
@@ -110,18 +110,18 @@ export const MachineListItem = (props: MachineListItemProps) => {
     setUpdating(false);
   };
   return (
-    <div class="border rounded-lg border-def-2 p-3 m-2 w-64">
+    <div class="m-2 w-64 rounded-lg border p-3 border-def-2">
       <figure class="h-fit rounded-xl border bg-def-2 border-def-5">
         <RndThumbnail name={name} width={220} height={120} />
       </figure>
-      <div class="flex-row justify-between gap-4 pt-2 px-2">
+      <div class="flex-row justify-between gap-4 px-2 pt-2">
         <div class="flex flex-col">
           <A href={`/machines/${name}`}>
             <Typography hierarchy="title" size="m" weight="bold">
               {name}
             </Typography>
           </A>
-          <div class="text-slate-600 flex justify-between">
+          <div class="flex justify-between text-slate-600">
             <div class="flex flex-nowrap">
               <span class="h-4">
                 <Icon icon="Flash" class="h-4" font-size="inherit" />
@@ -138,7 +138,7 @@ export const MachineListItem = (props: MachineListItemProps) => {
                 popoverid={`menu-${props.name}`}
                 label={<Icon icon={"More"} />}
               >
-                <ul class="z-[1] w-64 p-2 shadow bg-white ">
+                <ul class="z-[1] w-64 bg-white p-2 shadow ">
                   <li>
                     <Button
                       variant="ghost"
diff --git a/pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx b/pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx
index 36dca305d..d355af032 100644
--- a/pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx
+++ b/pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx
@@ -1,6 +1,6 @@
 import { A } from "@solidjs/router";
-
 import { Typography } from "@/src/components/Typography";
+import "./css/sidebar.css";
 
 interface SidebarListItem {
   title: string;
@@ -11,7 +11,7 @@ export const SidebarListItem = (props: SidebarListItem) => {
   const { title, href } = props;
 
   return (
-    <li class="sidebar__list__item">
+    <li class="">
       <A class="sidebar__list__link" href={href}>
         <Typography
           class="sidebar__list__content"
diff --git a/pkgs/webview-ui/app/src/components/accordion/accordion.css b/pkgs/webview-ui/app/src/components/accordion/accordion.css
new file mode 100644
index 000000000..285d37137
--- /dev/null
+++ b/pkgs/webview-ui/app/src/components/accordion/accordion.css
@@ -0,0 +1,10 @@
+.accordion {
+  @apply flex flex-col gap-y-5;
+}
+
+.accordion__title {
+  @apply flex h-5 cursor-pointer items-center justify-end gap-x-0.5 px-1 font-medium;
+}
+
+.accordion__body {
+}
diff --git a/pkgs/webview-ui/app/src/components/accordion/index.tsx b/pkgs/webview-ui/app/src/components/accordion/index.tsx
index c253ec8f1..ddfd445bb 100644
--- a/pkgs/webview-ui/app/src/components/accordion/index.tsx
+++ b/pkgs/webview-ui/app/src/components/accordion/index.tsx
@@ -1,27 +1,21 @@
 import { createSignal, JSX, Show } from "solid-js";
-
 import Icon from "../icon";
-import { Typography } from "../Typography";
 import { Button } from "../button";
+import cx from "classnames";
+import "./accordion.css";
 
-type AccordionProps = {
+interface AccordionProps {
   title: string;
   children: JSX.Element;
   class?: string;
   initiallyOpen?: boolean;
-};
+}
 
 export default function Accordion(props: AccordionProps) {
   const [isOpen, setIsOpen] = createSignal(props.initiallyOpen ?? false);
   return (
-    <div
-      class={`accordion flex flex-col gap-y-5 ${props.class ?? ""}`}
-      tabindex="0"
-    >
-      <div
-        onClick={() => setIsOpen(!isOpen())}
-        class="accordion__title h-5 flex gap-x-0.5 items-center justify-end font-medium cursor-pointer px-1"
-      >
+    <div class={cx(`accordion`, props.class)} tabindex="0">
+      <div onClick={() => setIsOpen(!isOpen())} class="accordion__title">
         <Show
           when={isOpen()}
           fallback={
diff --git a/pkgs/webview-ui/app/src/components/button/css/index.css b/pkgs/webview-ui/app/src/components/button/css/index.css
index 1ac3a5700..33f69a263 100644
--- a/pkgs/webview-ui/app/src/components/button/css/index.css
+++ b/pkgs/webview-ui/app/src/components/button/css/index.css
@@ -2,7 +2,7 @@
 @import "./button-dark.css";
 
 .button {
-  @apply inline-flex items-center flex-shrink gap-1 justify-center p-4  font-semibold;
+  @apply inline-flex items-center flex-shrink gap-1 justify-center p-4 font-semibold;
   letter-spacing: 0.0275rem;
 }
 
diff --git a/pkgs/webview-ui/app/src/components/button/index.tsx b/pkgs/webview-ui/app/src/components/button/index.tsx
index 31ab19222..87756ad47 100644
--- a/pkgs/webview-ui/app/src/components/button/index.tsx
+++ b/pkgs/webview-ui/app/src/components/button/index.tsx
@@ -24,15 +24,12 @@ const variantColors: (
     !disabled && "button--light-hover", // Hover state
     !disabled && "button--light-focus", // Focus state
     !disabled && "button--light-active", // Active state
-
-    "button--light-disabled", // Disabled state
   ),
   ghost: cx(
     // "shadow-inner-secondary",
     !disabled && "hover:bg-secondary-200 hover:text-secondary-900", // Hover state
     !disabled && "focus:bg-secondary-200 focus:text-secondary-900", // Focus state
     !disabled && "button--light-active", // Active state
-    "button--light-disabled", // Disabled state
   ),
 });
 
diff --git a/pkgs/webview-ui/app/src/layout/header.tsx b/pkgs/webview-ui/app/src/layout/header.tsx
index 113bba0c6..9f6d9915a 100644
--- a/pkgs/webview-ui/app/src/layout/header.tsx
+++ b/pkgs/webview-ui/app/src/layout/header.tsx
@@ -9,7 +9,7 @@ interface HeaderProps {
 }
 export const Header = (props: HeaderProps) => {
   return (
-    <div class="sticky top-0 z-20 navbar border-b px-6 py-4 border-def-3 bg-white bg-opacity-80 backdrop-blur-md">
+    <div class="sticky top-0 z-20 border-b bg-white/80 px-6 py-4 backdrop-blur-md border-def-3">
       <div class="flex-none">
         {props.showBack && <BackButton />}
         <span class=" lg:hidden" data-tip="Menu">
diff --git a/pkgs/webview-ui/app/src/layout/layout.tsx b/pkgs/webview-ui/app/src/layout/layout.tsx
index d3486cf79..4185f9be1 100644
--- a/pkgs/webview-ui/app/src/layout/layout.tsx
+++ b/pkgs/webview-ui/app/src/layout/layout.tsx
@@ -17,12 +17,12 @@ export const Layout: Component<RouteSectionProps> = (props) => {
 
   return (
     <div class="h-screen w-full p-4 bg-def-2">
-      <div class="flex flex-row-reverse w-full h-full">
-        <div class="flex-1 my-2 ml-8 overflow-x-hidden overflow-y-scroll rounded-lg border bg-def-1 border-def-3">
+      <div class="flex size-full flex-row-reverse">
+        <div class="my-2 ml-8 flex-1 overflow-x-hidden overflow-y-scroll rounded-lg border bg-def-1 border-def-3">
           {props.children}
         </div>
         <Sidebar {...props} />
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/pkgs/webview-ui/app/src/routes/machines/create.tsx b/pkgs/webview-ui/app/src/routes/machines/create.tsx
index a515e3dd9..ee3b7f5ed 100644
--- a/pkgs/webview-ui/app/src/routes/machines/create.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/create.tsx
@@ -78,7 +78,7 @@ export function CreateMachine() {
         <div class="mt-4 w-full self-stretch px-8">
           <Form
             onSubmit={handleSubmit}
-            class="mx-auto w-full max-w-2xl flex flex-col gap-y-6"
+            class="mx-auto flex w-full max-w-2xl flex-col gap-y-6"
           >
             <Field
               name="opts.machine.name"
@@ -86,7 +86,7 @@ export function CreateMachine() {
             >
               {(field, props) => (
                 <>
-                  <div class="flex justify-center mb-4 pb-4 border-b">
+                  <div class="mb-4 flex justify-center border-b pb-4">
                     <MachineAvatar name={field.value} />
                   </div>
                 </>
@@ -165,7 +165,7 @@ export function CreateMachine() {
               </Fieldset>
             </Accordion>
 
-            <footer class="gap-y-3 pt-5 border-t border-secondary-200 flex justify-end">
+            <footer class="flex justify-end gap-y-3 border-t border-secondary-200 pt-5">
               <Button
                 type="submit"
                 disabled={formStore.submitting}
diff --git a/pkgs/webview-ui/app/src/routes/modules/list.tsx b/pkgs/webview-ui/app/src/routes/modules/list.tsx
index 4f10b9df1..9bf0c035f 100644
--- a/pkgs/webview-ui/app/src/routes/modules/list.tsx
+++ b/pkgs/webview-ui/app/src/routes/modules/list.tsx
@@ -80,7 +80,7 @@ const ModuleItem = (props: {
 
       <header class="flex flex-col gap-4">
         <A href={`/modules/details/${name}`}>
-          <div class="stat-value">
+          <div class="">
             <div class="flex flex-col">
               <Categories categories={info.categories} />
               <Typography hierarchy="title" size="m" weight="medium">
@@ -162,7 +162,7 @@ export const ModuleList = () => {
         <Match when={modulesQuery.isFetching}>Loading....</Match>
         <Match when={modulesQuery.data}>
           <div
-            class="p-6 grid gap-6"
+            class="grid gap-6 p-6"
             classList={{
               "grid-cols-1": view() === "list",
               "grid-cols-2": view() === "grid",