diff --git a/src/components/button/Primary.vue b/src/components/button/Primary.vue
index aaada44..7ca3b98 100644
--- a/src/components/button/Primary.vue
+++ b/src/components/button/Primary.vue
@@ -2,7 +2,7 @@
   <HoppSmartLink
     :to="to"
     :blank="blank"
-    class="relative inline-flex items-center justify-center whitespace-nowrap py-2 font-semibold transition focus:outline-none focus-visible:bg-accentDark"
+    class="relative inline-flex items-center justify-center py-2 font-semibold whitespace-nowrap transition focus:outline-none focus-visible:bg-accentDark"
     :exact="exact"
     :class="[
       color
diff --git a/src/components/smart/Anchor.vue b/src/components/smart/Anchor.vue
index b6bf558..c680e10 100644
--- a/src/components/smart/Anchor.vue
+++ b/src/components/smart/Anchor.vue
@@ -8,7 +8,7 @@
       color
         ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
         : 'hover:text-secondaryDark focus-visible:text-secondaryDark',
-      { 'opacity-75 cursor-not-allowed': disabled },
+      { 'cursor-not-allowed opacity-75': disabled },
       { 'flex-row-reverse': reverse },
     ]"
     :disabled="disabled"
@@ -50,6 +50,6 @@ withDefaults(
     color: "",
     disabled: false,
     reverse: false,
-  }
+  },
 )
 </script>
diff --git a/src/components/smart/Checkbox.vue b/src/components/smart/Checkbox.vue
index ddbc26b..50b65e5 100644
--- a/src/components/smart/Checkbox.vue
+++ b/src/components/smart/Checkbox.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="inline-flex items-center justify-center transition cursor-pointer flex-nowrap group hover:text-secondaryDark"
+    class="inline-flex items-center justify-center cursor-pointer group flex-nowrap transition hover:text-secondaryDark"
     role="checkbox"
     :aria-checked="on"
     @click="emit('change')"
diff --git a/src/components/smart/Expand.vue b/src/components/smart/Expand.vue
index 18f82aa..1ed6343 100644
--- a/src/components/smart/Expand.vue
+++ b/src/components/smart/Expand.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative flex flex-col space-y-2 overflow-hidden"
+    class="relative flex flex-col overflow-hidden space-y-2"
     :class="expand ? 'h-full' : 'max-h-32'"
   >
     <slot name="body"></slot>
@@ -41,6 +41,6 @@ withDefaults(
   {
     less: "Less",
     more: "More",
-  }
+  },
 )
 </script>
diff --git a/src/components/smart/FileChip.vue b/src/components/smart/FileChip.vue
index 5af9f27..c09e717 100644
--- a/src/components/smart/FileChip.vue
+++ b/src/components/smart/FileChip.vue
@@ -1,9 +1,9 @@
 <template>
   <span
-    class="inline-flex items-center space-x-1 justify-center rounded px-2 bg-primaryDark"
+    class="inline-flex items-center justify-center px-2 rounded space-x-1 bg-primaryDark"
   >
     <IconLucideFile class="opacity-75 svg-icons" />
-    <span class="truncate max-w-[16rem]"><slot></slot></span>
+    <span class="max-w-[16rem] truncate"><slot></slot></span>
   </span>
 </template>
 
diff --git a/src/components/smart/Modal.vue b/src/components/smart/Modal.vue
index 0f47410..d658a16 100644
--- a/src/components/smart/Modal.vue
+++ b/src/components/smart/Modal.vue
@@ -31,7 +31,7 @@
         >
         <Transition name="bounce" appear>
           <div
-            class="inline-block w-full transform overflow-hidden border-dividerDark bg-primary text-left align-bottom shadow-lg transition-all sm:rounded-xl sm:border sm:align-middle"
+            class="inline-block w-full overflow-hidden text-left align-bottom shadow-lg transform border-dividerDark bg-primary transition-all sm:rounded-xl sm:border sm:align-middle"
             :class="[{ 'mt-16 md:mb-8': placement === 'top' }, styles]"
           >
             <div
@@ -39,7 +39,7 @@
               class="flex items-center justify-between border-b border-dividerLight"
               :class="{ 'p-4': !fullWidth }"
             >
-              <div class="flex items-center flex-1 justify-start">
+              <div class="flex items-center justify-start flex-1">
                 <slot name="actions"></slot>
               </div>
               <div class="flex items-center justify-center">
@@ -47,7 +47,7 @@
                   {{ title }}
                 </h3>
               </div>
-              <div class="flex items-center flex-1 justify-end">
+              <div class="flex items-center justify-end flex-1">
                 <HoppButtonSecondary
                   v-if="dimissible"
                   v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
@@ -58,14 +58,14 @@
               </div>
             </div>
             <div
-              class="flex flex-col overflow-y-auto max-h-[55vh]"
+              class="flex max-h-[55vh] flex-col overflow-y-auto"
               :class="{ 'p-4': !fullWidth && !fullWidthBody }"
             >
               <slot name="body"></slot>
             </div>
             <div
               v-if="hasFooterSlot"
-              class="flex flex-1 items-center justify-between border-t border-dividerLight bg-primaryContrast"
+              class="flex items-center justify-between flex-1 border-t border-dividerLight bg-primaryContrast"
               :class="{ 'p-4': !fullWidth }"
             >
               <slot name="footer"></slot>
@@ -130,7 +130,7 @@ withDefaults(
     fullWidthBody: false,
     styles: "sm:max-w-lg",
     closeText: null,
-  }
+  },
 )
 
 const emit = defineEmits<{
diff --git a/src/components/smart/Picture.vue b/src/components/smart/Picture.vue
index 1c18e08..8c85afd 100644
--- a/src/components/smart/Picture.vue
+++ b/src/components/smart/Picture.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     tabindex="0"
-    class="relative rounded-full flex items-center justify-center cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
+    class="relative flex items-center justify-center rounded-full cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
   >
     <Avatar
       :size="size"
@@ -12,7 +12,7 @@
     />
     <span
       v-if="indicator"
-      class="border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
+      class="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full border-2 border-primary"
       :class="indicatorStyles"
     ></span>
   </div>
@@ -33,6 +33,6 @@ withDefaults(
     indicator: false,
     indicatorStyles: "bg-green-500",
     size: 22,
-  }
+  },
 )
 </script>
diff --git a/src/components/smart/Placeholder.vue b/src/components/smart/Placeholder.vue
index 613307d..2268d99 100644
--- a/src/components/smart/Placeholder.vue
+++ b/src/components/smart/Placeholder.vue
@@ -5,16 +5,16 @@
       :src="src"
       loading="lazy"
       class="inline-flex flex-col object-contain object-center"
-      :class="large ? 'w-32 h-32' : 'w-16 h-16'"
+      :class="large ? 'h-32 w-32' : 'h-16 w-16'"
       :alt="alt"
     />
     <slot name="icon"></slot>
-    <span v-if="heading" class="font-semibold mt-2 text-center">
+    <span v-if="heading" class="mt-2 font-semibold text-center">
       {{ heading }}
     </span>
     <span
       v-if="text"
-      class="max-w-sm mt-2 text-center whitespace-normal text-secondaryLight text-tiny"
+      class="max-w-sm mt-2 text-center whitespace-normal text-tiny text-secondaryLight"
     >
       {{ text }}
     </span>
@@ -38,7 +38,7 @@ withDefaults(
   {
     alt: "",
     text: "",
-  }
+  },
 )
 
 const slots = useSlots()
diff --git a/src/components/smart/SelectWrapper.vue b/src/components/smart/SelectWrapper.vue
index 8182b90..dc3e855 100644
--- a/src/components/smart/SelectWrapper.vue
+++ b/src/components/smart/SelectWrapper.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="select-wrapper">
-    <span class="down-icon text-xs">
+    <span class="text-xs down-icon">
       <IconChevronDown />
     </span>
     <slot />
@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import IconChevronDown from '~icons/lucide/chevron-down'
+import IconChevronDown from "~icons/lucide/chevron-down"
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/smart/Tab.vue b/src/components/smart/Tab.vue
index eb8c94c..7eb4c56 100644
--- a/src/components/smart/Tab.vue
+++ b/src/components/smart/Tab.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="shouldRender" v-show="active" class="flex flex-1 flex-col">
+  <div v-if="shouldRender" v-show="active" class="flex flex-col flex-1">
     <slot></slot>
   </div>
 </template>
@@ -30,7 +30,7 @@ const props = withDefaults(
     indicator: false,
     info: null,
     disabled: false,
-  }
+  },
 )
 
 const tabMeta = computed<TabMeta>(() => ({
diff --git a/src/components/smart/Table.vue b/src/components/smart/Table.vue
index 212f602..966b7e7 100644
--- a/src/components/smart/Table.vue
+++ b/src/components/smart/Table.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="overflow-auto rounded-md border border-dividerDark shadow-md">
+  <div class="overflow-auto border shadow-md rounded-md border-dividerDark">
     <table class="w-full">
       <thead>
         <slot name="head">
           <tr
-            class="text-secondary border-b border-dividerDark text-sm text-left bg-primaryLight"
+            class="text-sm text-left border-b border-dividerDark bg-primaryLight text-secondary"
           >
             <th v-for="th in headings" scope="col" class="px-6 py-3">
               {{ th.label ?? th.key }}
@@ -19,14 +19,14 @@
           <tr
             v-for="(rowData, rowIndex) in list"
             :key="rowIndex"
-            class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
+            class="rounded-xl text-secondaryDark hover:cursor-pointer hover:bg-divider"
             :class="{ 'divide-x divide-divider': showYBorder }"
           >
             <td
               v-for="cellHeading in headings"
               :key="cellHeading.key"
               @click="!cellHeading.preventClick && onRowClicked(rowData)"
-              class="max-w-[10rem] pl-6 py-1"
+              class="max-w-[10rem] py-1 pl-6"
             >
               <!-- Dynamic column slot -->
               <slot :name="cellHeading.key" :item="rowData">
diff --git a/src/components/smart/Tabs.vue b/src/components/smart/Tabs.vue
index 3f198f9..3cb0c38 100644
--- a/src/components/smart/Tabs.vue
+++ b/src/components/smart/Tabs.vue
@@ -1,15 +1,15 @@
 <template>
   <div
-    class="flex h-full flex-1 flex-nowrap"
+    class="flex flex-1 h-full flex-nowrap"
     :class="{ '!h-auto !flex-col': !vertical }"
   >
     <div
-      class="tabs relative border-dividerLight"
+      class="relative tabs border-dividerLight"
       :class="[vertical ? 'border-r' : 'border-b', styles]"
     >
       <div class="flex flex-1">
         <div
-          class="flex flex-1 justify-between"
+          class="flex justify-between flex-1"
           :class="{ 'flex-col': vertical }"
         >
           <div class="flex" :class="{ 'flex-col space-y-2 p-2': vertical }">
@@ -48,7 +48,7 @@
               </span>
               <span
                 v-if="tabMeta.indicator"
-                class="ml-2 h-1 w-1 rounded-full bg-accentLight"
+                class="w-1 h-1 ml-2 rounded-full bg-accentLight"
               ></span>
             </button>
           </div>
@@ -59,7 +59,7 @@
       </div>
     </div>
     <div
-      class="contents h-full w-full"
+      class="w-full h-full contents"
       :class="[
         {
           '!flex flex-1 flex-col overflow-y-auto': vertical,
@@ -136,7 +136,7 @@ const addTabEntry = (tabID: string, meta: TabMeta) => {
     tabEntries.value,
     O.fromPredicate(not(A.exists(([id]) => id === tabID))),
     O.map(A.append([tabID, meta] as [string, TabMeta])),
-    O.getOrElseW(() => throwError(`Tab with duplicate ID created: '${tabID}'`))
+    O.getOrElseW(() => throwError(`Tab with duplicate ID created: '${tabID}'`)),
   )
 }
 
@@ -147,10 +147,10 @@ const updateTabEntry = (tabID: string, newMeta: TabMeta) => {
     O.chain((index) =>
       pipe(
         tabEntries.value,
-        A.updateAt(index, [tabID, newMeta] as [string, TabMeta])
-      )
+        A.updateAt(index, [tabID, newMeta] as [string, TabMeta]),
+      ),
     ),
-    O.getOrElseW(() => throwError(`Failed to update tab entry: ${tabID}`))
+    O.getOrElseW(() => throwError(`Failed to update tab entry: ${tabID}`)),
   )
 }
 
@@ -159,7 +159,7 @@ const removeTabEntry = (tabID: string) => {
     tabEntries.value,
     A.findIndex(([id]) => id === tabID),
     O.chain((index) => pipe(tabEntries.value, A.deleteAt(index))),
-    O.getOrElseW(() => throwError(`Failed to remove tab entry: ${tabID}`))
+    O.getOrElseW(() => throwError(`Failed to remove tab entry: ${tabID}`)),
   )
 
   // If we tried to remove the active tabEntries, switch to first tab entry
diff --git a/src/components/smart/TreeBranch.vue b/src/components/smart/TreeBranch.vue
index 96a1d6e..9992a42 100644
--- a/src/components/smart/TreeBranch.vue
+++ b/src/components/smart/TreeBranch.vue
@@ -20,7 +20,7 @@
     ></div>
     <div
       v-if="childNodes.status === 'loaded' && childNodes.data.length > 0"
-      class="flex flex-1 flex-col truncate"
+      class="flex flex-col flex-1 truncate"
       :class="{
         'bg-divider': highlightNode,
       }"
@@ -58,14 +58,14 @@
 
     <div
       v-if="childNodes.status === 'loading'"
-      class="flex flex-1 flex-col items-center justify-center p-4"
+      class="flex flex-col items-center justify-center flex-1 p-4"
     >
       <SmartSpinner class="my-4" />
       <span class="text-secondaryLight">{{ t?.("state.loading") }}</span>
     </div>
     <div
       v-if="childNodes.status === 'loaded' && childNodes.data.length === 0"
-      class="flex flex-1 flex-col"
+      class="flex flex-col flex-1"
     >
       <slot name="emptyNode" :node="nodeItem"></slot>
     </div>
@@ -115,7 +115,7 @@ const highlightNode = ref(false)
  * Fetch the child nodes from the adapter by passing the node id of the current node
  */
 const childNodes = computed(
-  () => props.adapter.getChildren(props.nodeItem.id).value
+  () => props.adapter.getChildren(props.nodeItem.id).value,
 )
 
 const toggleNodeChildren = () => {
diff --git a/src/components/smart/Windows.vue b/src/components/smart/Windows.vue
index bb299bd..a957ff3 100644
--- a/src/components/smart/Windows.vue
+++ b/src/components/smart/Windows.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1 h-auto overflow-y-hidden flex-nowrap">
     <div
-      class="sticky top-0 z-10 flex-shrink-0 overflow-x-auto divide-x divide-dividerLight bg-primaryLight tabs group-tabs"
+      class="sticky top-0 z-10 flex-shrink-0 overflow-x-auto tabs group-tabs divide-x divide-dividerLight bg-primaryLight"
     >
       <div
         class="flex flex-1 flex-shrink-0 w-0 overflow-hidden"
@@ -17,7 +17,7 @@
               :list="tabEntries"
               :style="tabStyles"
               :item-key="'window-'"
-              class="flex flex-shrink-0 overflow-x-auto transition divide-x divide-dividerLight"
+              class="flex flex-shrink-0 overflow-x-auto divide-x divide-dividerLight transition"
               @sort="sortTabs"
             >
               <template #item="{ element: [tabID, tabMeta] }">
@@ -67,7 +67,7 @@
                       { active: modelValue === tabID },
                       {
                         flex: tabMeta.closeVisibility === 'always',
-                        'group-hover:flex hidden':
+                        'hidden group-hover:flex':
                           tabMeta.closeVisibility === 'hover',
                         hidden: tabMeta.closeVisibility === 'never',
                       },
@@ -81,17 +81,17 @@
             </draggable>
           </div>
           <div
-            class="sticky right-0 flex items-center justify-center flex-shrink-0 overflow-x-auto z-20"
+            class="sticky right-0 z-20 flex items-center justify-center flex-shrink-0 overflow-x-auto"
           >
             <span
               v-if="canAddNewTab"
-              class="flex items-center justify-center h-full px-3 bg-primaryLight z-[8]"
+              class="z-[8] flex h-full items-center justify-center bg-primaryLight px-3"
             >
               <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="newText ?? t?.('action.new') ?? 'New'"
                 :icon="IconPlus"
-                class="rounded create-new-tab !text-secondaryDark !p-1"
+                class="create-new-tab rounded !p-1 !text-secondaryDark"
                 filled
                 @click="addTab"
               />
@@ -193,7 +193,7 @@ const props = withDefaults(
     canAddNewTab: true,
     newText: null,
     closeText: null,
-  }
+  },
 )
 
 const emit = defineEmits<{
@@ -233,7 +233,7 @@ const addTabEntry = (tabID: string, meta: TabMeta) => {
     tabEntries.value,
     O.fromPredicate(not(A.exists(([id]) => id === tabID))),
     O.map(A.append([tabID, meta] as [string, TabMeta])),
-    O.getOrElseW(() => throwError(`Tab with duplicate ID created: '${tabID}'`))
+    O.getOrElseW(() => throwError(`Tab with duplicate ID created: '${tabID}'`)),
   )
 }
 const updateTabEntry = (tabID: string, newMeta: TabMeta) => {
@@ -243,10 +243,10 @@ const updateTabEntry = (tabID: string, newMeta: TabMeta) => {
     O.chain((index) =>
       pipe(
         tabEntries.value,
-        A.updateAt(index, [tabID, newMeta] as [string, TabMeta])
-      )
+        A.updateAt(index, [tabID, newMeta] as [string, TabMeta]),
+      ),
     ),
-    O.getOrElseW(() => throwError(`Failed to update tab entry: ${tabID}`))
+    O.getOrElseW(() => throwError(`Failed to update tab entry: ${tabID}`)),
   )
 }
 const removeTabEntry = (tabID: string) => {
@@ -254,7 +254,7 @@ const removeTabEntry = (tabID: string) => {
     tabEntries.value,
     A.findIndex(([id]) => id === tabID),
     O.chain((index) => pipe(tabEntries.value, A.deleteAt(index))),
-    O.getOrElseW(() => throwError(`Failed to remove tab entry: ${tabID}`))
+    O.getOrElseW(() => throwError(`Failed to remove tab entry: ${tabID}`)),
   )
 }
 const sortTabs = (e: {
@@ -333,7 +333,7 @@ watch(
 
       const changeThumbPosition: IntersectionObserverCallback = (
         entries,
-        observer
+        observer,
       ) => {
         entries.forEach((entry) => {
           if (entry.target === element && entry.intersectionRatio >= 1.0) {
@@ -361,7 +361,7 @@ watch(
       element?.scrollIntoView({ behavior: "smooth", inline: "center" })
     })
   },
-  { immediate: true }
+  { immediate: true },
 )
 </script>
 
diff --git a/src/stories/Table.story.vue b/src/stories/Table.story.vue
index baa0007..8fc8957 100644
--- a/src/stories/Table.story.vue
+++ b/src/stories/Table.story.vue
@@ -7,7 +7,7 @@
       <HoppSmartTable>
         <template #head>
           <tr
-            class="text-secondary border-b border-dividerDark text-sm text-left bg-primaryLight"
+            class="text-sm text-left border-b border-dividerDark bg-primaryLight text-secondary"
           >
             <th
               v-for="heading in headings"
@@ -24,12 +24,12 @@
           <tr
             v-for="item in list"
             :key="item.id"
-            class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
+            class="rounded-xl text-secondaryDark hover:cursor-pointer hover:bg-divider"
           >
             <td
               v-for="cellHeading in headings"
               :key="cellHeading.key"
-              class="max-w-[10rem] pl-6 py-1"
+              class="max-w-[10rem] py-1 pl-6"
             >
               {{ item[cellHeading.key] ?? "-" }}
             </td>
diff --git a/src/stories/Window.story.vue b/src/stories/Window.story.vue
index e1e7f8e..0693d01 100644
--- a/src/stories/Window.story.vue
+++ b/src/stories/Window.story.vue
@@ -1,10 +1,20 @@
 <template>
   <Story title="Window">
     <Variant title="Single">
-      <HoppSmartWindows :id="'my-window'" v-model="selectedWindow" @add-tab="openNewTab" @remove-tab="removeTab"
-        @sort="sortTabs">
-        <HoppSmartWindow v-for="window in tabs" :id="window.id" :key="'tab_' + window.id" :label="window.name"
-          :is-removable="window.removable">
+      <HoppSmartWindows
+        :id="'my-window'"
+        v-model="selectedWindow"
+        @add-tab="openNewTab"
+        @remove-tab="removeTab"
+        @sort="sortTabs"
+      >
+        <HoppSmartWindow
+          v-for="window in tabs"
+          :id="window.id"
+          :key="'tab_' + window.id"
+          :label="window.name"
+          :is-removable="window.removable"
+        >
         </HoppSmartWindow>
       </HoppSmartWindows>
     </Variant>
@@ -23,7 +33,8 @@
           :is-removable="window.removable"
         >
           <template #tabhead>
-            <icon-lucide-train class="svg-icons" /> <span class="truncate w-2"> - Lorem ipsum dolor sit amet</span>
+            <icon-lucide-train class="svg-icons" />
+            <span class="w-2 truncate"> - Lorem ipsum dolor sit amet</span>
           </template>
         </HoppSmartWindow>
       </HoppSmartWindows>