diff --git a/packages/react/src/components/header/header.tsx b/packages/react/src/components/header/header.tsx
index 713db8053..7624784c4 100644
--- a/packages/react/src/components/header/header.tsx
+++ b/packages/react/src/components/header/header.tsx
@@ -31,7 +31,7 @@ export function Header({ id }: HeaderProps) {
   const { logout } = useAuth();
 
   return (
-    <header id={id} className="bg-base-2 z-40 flex items-center gap-4 px-2">
+    <header id={id} className="z-40 flex items-center gap-4 bg-base-2 px-2">
       <Button
         size="icon"
         variant="ghost"
@@ -45,7 +45,7 @@ export function Header({ id }: HeaderProps) {
       <Button
         size="icon"
         variant="ghost"
-        className="text-base-9 -ml-3 p-0"
+        className="-ml-3 p-0 text-base-9"
         onClick={() => toggle(!dark)}
       >
         <div className="i-heroicons:magnifying-glass h-full text-xl" />
@@ -53,7 +53,7 @@ export function Header({ id }: HeaderProps) {
       <Button
         size="icon"
         variant="ghost"
-        className="text-base-9 p-0"
+        className="p-0 text-base-9"
         onClick={() => toggle(!dark)}
       >
         <div className="i-heroicons:sun-20-solid h-full text-xl " />
diff --git a/packages/react/src/components/header/searchbar/QueryBadge.tsx b/packages/react/src/components/header/searchbar/QueryBadge.tsx
index 70a3c78a7..087814022 100644
--- a/packages/react/src/components/header/searchbar/QueryBadge.tsx
+++ b/packages/react/src/components/header/searchbar/QueryBadge.tsx
@@ -12,7 +12,7 @@ export function QueryBadge({ item }: { item: PrimitiveAtom<QueryItem> }) {
     <Badge key={queryItem.value} variant="primary">
       {queryItem.text}
       <button
-        className="ring-offset-base-2 focus:ring-primary-9 ml-1 rounded-full outline-none focus:ring-2 focus:ring-offset-2"
+        className="ml-1 rounded-full outline-none ring-offset-base-2 focus:ring-2 focus:ring-primary-9 focus:ring-offset-2"
         onKeyDown={(e) => {
           if (e.key === "Enter") {
             querySplitItemAction({ type: "remove", atom: item });
@@ -24,7 +24,7 @@ export function QueryBadge({ item }: { item: PrimitiveAtom<QueryItem> }) {
         }}
         onClick={() => querySplitItemAction({ type: "remove", atom: item })}
       >
-        <X className="text-base-8 hover:text-base-11 h-3 w-3" />
+        <X className="h-3 w-3 text-base-8 hover:text-base-11" />
       </button>
     </Badge>
   );
diff --git a/packages/react/src/components/header/searchbar/README.md b/packages/react/src/components/header/searchbar/README.md
index 05a80d27c..4a189b46b 100644
--- a/packages/react/src/components/header/searchbar/README.md
+++ b/packages/react/src/components/header/searchbar/README.md
@@ -115,4 +115,4 @@ watch(search, (newValue) => {
       }
     })
 
-```
\ No newline at end of file
+```