diff --git a/modules/desktop/package.json b/modules/desktop/package.json
index 78b3112..046bcc8 100644
--- a/modules/desktop/package.json
+++ b/modules/desktop/package.json
@@ -4,7 +4,7 @@
 	"private": true,
 	"description": "tea gui app",
 	"author": "tea.xyz",
-  "main": "src/electron.cjs",
+	"main": "src/electron.cjs",
 	"scripts": {
 		"package": "pnpm build && electron-builder --config electron-builder.config.json",
 		"dev:package": "pnpm build && electron-builder --config electron-builder.config.json --dir",
diff --git a/modules/gui/src/components/BigBlackSpace/BigBlackSpace.svelte b/modules/gui/src/components/BigBlackSpace/BigBlackSpace.svelte
index 5aa397a..051bab1 100644
--- a/modules/gui/src/components/BigBlackSpace/BigBlackSpace.svelte
+++ b/modules/gui/src/components/BigBlackSpace/BigBlackSpace.svelte
@@ -2,4 +2,4 @@
 	import '$appcss';
 </script>
 
-<section class="h-56 border border-gray bg-black" />
+<section class="border-gray h-56 border bg-black" />
diff --git a/modules/gui/src/components/CategorizedPackages/CategorizedPackages.svelte b/modules/gui/src/components/CategorizedPackages/CategorizedPackages.svelte
index 7124972..f88ffe3 100644
--- a/modules/gui/src/components/CategorizedPackages/CategorizedPackages.svelte
+++ b/modules/gui/src/components/CategorizedPackages/CategorizedPackages.svelte
@@ -14,9 +14,9 @@
 
 {#each categories as category}
 	<PanelHeader ctaLabel={category.cta_label} ctaLink={'#'} title={category.label} />
-	<ul class="grid grid-cols-3 border border-r-0 border-gray bg-black">
+	<ul class="border-gray grid grid-cols-3 border border-r-0 bg-black">
 		{#each category.packages as pkg}
-			<div class="border border-t-0 border-l-0 border-gray p-4">
+			<div class="border-gray border border-t-0 border-l-0 p-4">
 				<MiniPackageCard {pkg} ctaLabel="DETAILS" link={`/packages/${pkg.slug}`} />
 			</div>
 		{/each}
diff --git a/modules/gui/src/components/CliBanner/CliBanner.svelte b/modules/gui/src/components/CliBanner/CliBanner.svelte
index d268cb7..680ce72 100644
--- a/modules/gui/src/components/CliBanner/CliBanner.svelte
+++ b/modules/gui/src/components/CliBanner/CliBanner.svelte
@@ -10,14 +10,14 @@
 	};
 </script>
 
-<section class="mt-4 border border-gray bg-black">
+<section class="border-gray mt-4 border bg-black">
 	<header class="flex flex-col items-center py-8">
 		<figure>
 			<img alt="tea" src="/images/tea-icon.png" class="rounded-md" />
 		</figure>
 		<p class="text-primary">tea.cli ver. 0.6.0</p>
 	</header>
-	<footer class="flex h-20 border-t border-gray text-white">
+	<footer class="border-gray flex h-20 border-t text-white">
 		<input class="flex-grow bg-black pl-4" disabled value="sh <(curl tea.xyz)>" />
 		<Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button>
 		<Button class="w-56 border-0 border-l-2 text-sm" onClick={() => console.log('cli')}
diff --git a/modules/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte b/modules/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte
index 29272fe..786082c 100644
--- a/modules/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte
+++ b/modules/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte
@@ -18,7 +18,7 @@
 {#if courses.length}
 	<Posts posts={courses} linkTarget="_blank" />
 {:else}
-	<section class="h-64 border border-gray bg-black p-4">
+	<section class="border-gray h-64 border bg-black p-4">
 		<Preloader />
 	</section>
 {/if}
diff --git a/modules/gui/src/components/FooterLinks/FooterLinks.svelte b/modules/gui/src/components/FooterLinks/FooterLinks.svelte
index 4e69983..b6d4a7e 100644
--- a/modules/gui/src/components/FooterLinks/FooterLinks.svelte
+++ b/modules/gui/src/components/FooterLinks/FooterLinks.svelte
@@ -2,34 +2,34 @@
 	import Button from '@tea/ui/Button/Button.svelte';
 </script>
 
-<footer class="relative h-auto w-full bg-black font-machina">
+<footer class="font-machina relative h-auto w-full bg-black">
 	<section class="p-4 px-16 py-16">
-		<h3 class="mb-5 text-2xl text-primary">QUICK LINKS</h3>
+		<h3 class="text-primary mb-5 text-2xl">QUICK LINKS</h3>
 		<menu class="flex gap-4">
-			<div class="flex-grow border border-l-0 border-r-0 border-gray">
+			<div class="border-gray flex-grow border border-l-0 border-r-0">
 				<a href="/">
 					<Button>
-						<div class="flex justify-between text-primary hover:text-black">
+						<div class="text-primary flex justify-between hover:text-black">
 							<div class="uppercase">About the tea store</div>
 							<div>&#8594</div>
 						</div>
 					</Button>
 				</a>
 			</div>
-			<div class="flex-grow border border-l-0 border-r-0 border-gray">
+			<div class="border-gray flex-grow border border-l-0 border-r-0">
 				<a href="/">
 					<Button>
-						<div class="flex justify-between text-primary hover:text-black">
+						<div class="text-primary flex justify-between hover:text-black">
 							<div class="uppercase">REPORT A PROBLEM</div>
 							<div>&#8594</div>
 						</div>
 					</Button>
 				</a>
 			</div>
-			<div class="flex-grow border border-l-0 border-r-0 border-gray">
+			<div class="border-gray flex-grow border border-l-0 border-r-0">
 				<a href="https://tea.xyz" target="_blank" rel="noreferrer">
 					<Button>
-						<div class="flex justify-between text-primary hover:text-black">
+						<div class="text-primary flex justify-between hover:text-black">
 							<div class="uppercase">VISIT TEA.XYZ</div>
 							<div>&#8594</div>
 						</div>
@@ -39,8 +39,8 @@
 		</menu>
 	</section>
 
-	<section class="h-16 border border-r-0 border-gray p-4 px-16">
-		<div class="flex gap-4 text-xs text-gray">
+	<section class="border-gray h-16 border border-r-0 p-4 px-16">
+		<div class="text-gray flex gap-4 text-xs">
 			<a
 				href="https://tea.xyz/terms-of-use/"
 				target="_blank"
diff --git a/modules/gui/src/components/GettingStarted/GettingStarted.svelte b/modules/gui/src/components/GettingStarted/GettingStarted.svelte
index 11a1a7a..2da8bd6 100644
--- a/modules/gui/src/components/GettingStarted/GettingStarted.svelte
+++ b/modules/gui/src/components/GettingStarted/GettingStarted.svelte
@@ -7,9 +7,9 @@
 	};
 </script>
 
-<header class="border border-gray bg-black p-4 text-primary">GETTING STARTED WITH TEA</header>
+<header class="border-gray text-primary border bg-black p-4">GETTING STARTED WITH TEA</header>
 <section class="grid grid-cols-3 bg-black">
-	<div class="border border-gray p-4">
+	<div class="border-gray border p-4">
 		<ArticleCard
 			content={{
 				title: 'installing tea',
@@ -20,7 +20,7 @@
 			}}
 		/>
 	</div>
-	<div class="border border-gray p-4">
+	<div class="border-gray border p-4">
 		<ArticleCard
 			content={{
 				title: 'authenticating',
@@ -32,7 +32,7 @@
 			onClick={doStuff}
 		/>
 	</div>
-	<div class="border border-gray p-4">
+	<div class="border-gray border p-4">
 		<ArticleCard
 			content={{
 				title: 'give us a star',
diff --git a/modules/gui/src/components/InstalledPackages/InstalledPackages.svelte b/modules/gui/src/components/InstalledPackages/InstalledPackages.svelte
index 691df16..bc21028 100644
--- a/modules/gui/src/components/InstalledPackages/InstalledPackages.svelte
+++ b/modules/gui/src/components/InstalledPackages/InstalledPackages.svelte
@@ -15,10 +15,10 @@
 
 <PanelHeader title="My installs" ctaLabel="Check for updates >" ctaLink="#" />
 
-<ul class="grid grid-cols-3 border border-r-0 border-gray bg-black">
+<ul class="border-gray grid grid-cols-3 border border-r-0 bg-black">
 	{#if packages.length > 0}
 		{#each packages as pkg}
-			<div class="border border-t-0 border-l-0 border-gray p-4">
+			<div class="border-gray border border-t-0 border-l-0 p-4">
 				<MiniPackageCard
 					{pkg}
 					ctaLabel="DETAILS"
@@ -30,7 +30,7 @@
 		{/each}
 	{:else}
 		{#each Array(12) as _}
-			<section class="h-50 border border-gray p-4">
+			<section class="h-50 border-gray border p-4">
 				<Preloader />
 			</section>
 		{/each}
diff --git a/modules/gui/src/components/News/News.svelte b/modules/gui/src/components/News/News.svelte
index 7b24eed..eab21a8 100644
--- a/modules/gui/src/components/News/News.svelte
+++ b/modules/gui/src/components/News/News.svelte
@@ -15,7 +15,7 @@
 {#if news.length}
 	<Posts posts={news} linkTarget="_blank" />
 {:else}
-	<section class="h-64 border border-gray bg-black p-4">
+	<section class="border-gray h-64 border bg-black p-4">
 		<Preloader />
 	</section>
 {/if}
diff --git a/modules/gui/src/components/PackageBanner/PackageBanner.svelte b/modules/gui/src/components/PackageBanner/PackageBanner.svelte
index ed6d5a4..f1e7dd4 100644
--- a/modules/gui/src/components/PackageBanner/PackageBanner.svelte
+++ b/modules/gui/src/components/PackageBanner/PackageBanner.svelte
@@ -27,22 +27,22 @@
 	});
 </script>
 
-<section class="mt-4 border border-gray bg-black">
+<section class="border-gray mt-4 border bg-black">
 	<header class="flex p-2">
 		<figure class="grow-1 w-1/3">
 			<img width={260} src={pkg.thumb_image_url} alt={pkg.full_name} />
 		</figure>
 		<article class="w-2/3 p-4 pt-8">
-			<h3 class="text-3xl text-primary">{pkg.full_name}</h3>
+			<h3 class="text-primary text-3xl">{pkg.full_name}</h3>
 			<h3>&#x2022; {pkg.maintainer || ''}{pkg.maintainer ? ' |' : ''} {bottles.length} bottles</h3>
 			<div class="mt-4">
 				<StarRating maxRating={5} rating={packageRating} />
 			</div>
-			<p class="mt-4 font-sono text-sm">{pkg.desc}</p>
+			<p class="font-sono mt-4 text-sm">{pkg.desc}</p>
 		</article>
 	</header>
 
-	<footer class="flex h-20 border-t border-gray text-white">
+	<footer class="border-gray flex h-20 border-t text-white">
 		<input class="click-copy flex-grow bg-black pl-4" disabled value={copyValue} />
 		<Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button>
 		<Button class="w-56 border-0 border-l-2 text-sm" onClick={() => console.log('cli')}
diff --git a/modules/gui/src/components/PackageReviews/PackageReviews.svelte b/modules/gui/src/components/PackageReviews/PackageReviews.svelte
index d7d6a11..8f9e65c 100644
--- a/modules/gui/src/components/PackageReviews/PackageReviews.svelte
+++ b/modules/gui/src/components/PackageReviews/PackageReviews.svelte
@@ -28,21 +28,21 @@
 	// ideally they should work like metro-ui to not have extreme height diff between columns
 </script>
 
-<header class="border border-gray bg-black p-4 text-primary">REVIEWS ({reviews.length})</header>
-<section class="flex flex-row flex-wrap bg-black font-machina">
-	<div class="w-1/3 border-0 border-l-2 border-b-2 border-gray p-4">
+<header class="border-gray text-primary border bg-black p-4">REVIEWS ({reviews.length})</header>
+<section class="font-machina flex flex-row flex-wrap bg-black">
+	<div class="border-gray w-1/3 border-0 border-l-2 border-b-2 p-4">
 		{#each col1 as review}
 			<ReviewCard {review} />
 			<div class="mt-4" />
 		{/each}
 	</div>
-	<div class="w-1/3 border-0 border-l-2 border-b-2 border-gray p-4">
+	<div class="border-gray w-1/3 border-0 border-l-2 border-b-2 p-4">
 		{#each col2 as review}
 			<ReviewCard {review} />
 			<div class="mt-4" />
 		{/each}
 	</div>
-	<div class="w-1/3 border-0 border-x-2 border-b-2 border-gray p-4">
+	<div class="border-gray w-1/3 border-0 border-x-2 border-b-2 p-4">
 		{#each col3 as review}
 			<ReviewCard {review} />
 			<div class="mt-4" />
@@ -50,7 +50,7 @@
 	</div>
 </section>
 {#if showLimit <= reviews.length && showMore === false}
-	<footer class="border border-gray bg-black p-4">
+	<footer class="border-gray border bg-black p-4">
 		<button on:click={() => (showMore = true)}>SHOW MORE</button>
 	</footer>
 {/if}
diff --git a/modules/gui/src/components/Packages/Packages.svelte b/modules/gui/src/components/Packages/Packages.svelte
index 69d7cbe..cbb8d37 100644
--- a/modules/gui/src/components/Packages/Packages.svelte
+++ b/modules/gui/src/components/Packages/Packages.svelte
@@ -30,7 +30,7 @@
 	});
 </script>
 
-<header class="flex items-center justify-between border border-gray bg-black p-4 text-primary">
+<header class="border-gray text-primary flex items-center justify-between border bg-black p-4">
 	<span>{title}</span>
 	<a href="/packages" class="font-sono text-sm underline">View all packages</a>
 </header>
@@ -56,7 +56,7 @@
 		{/each}
 	{:else}
 		{#each Array(9) as _}
-			<section class="h-50 border border-gray p-4">
+			<section class="h-50 border-gray border p-4">
 				<Preloader />
 			</section>
 		{/each}
diff --git a/modules/gui/src/components/PageHeader/PageHeader.svelte b/modules/gui/src/components/PageHeader/PageHeader.svelte
index 4674a48..fbf71b9 100644
--- a/modules/gui/src/components/PageHeader/PageHeader.svelte
+++ b/modules/gui/src/components/PageHeader/PageHeader.svelte
@@ -4,11 +4,11 @@
 	export { clazz as class };
 </script>
 
-<figure class={`relative mb-8 h-32 w-full font-machina uppercase ${clazz}`}>
+<figure class={`font-machina relative mb-8 h-32 w-full uppercase ${clazz}`}>
 	{#if coverUrl}
 		<img src={coverUrl} class="absolute z-0 h-32 w-full object-cover" alt="cover" />
 	{/if}
-	<div class="absolute bottom-0 z-10 text-6xl leading-[32px] text-primary">
+	<div class="text-primary absolute bottom-0 z-10 text-6xl leading-[32px]">
 		<slot />
 	</div>
 </figure>
diff --git a/modules/gui/src/components/Preflight/Preflight.svelte b/modules/gui/src/components/Preflight/Preflight.svelte
index 53c2f7d..2575d96 100644
--- a/modules/gui/src/components/Preflight/Preflight.svelte
+++ b/modules/gui/src/components/Preflight/Preflight.svelte
@@ -7,13 +7,13 @@
 </script>
 
 <div class="card social-box" style="width: 100%; float:right;">
-	<header class="border-b border-gray pt-7 pb-7 pl-5 text-primary">PRE-FLIGHT</header>
-	<div class="listbox-item border-b border-gray p-6">
+	<header class="border-gray text-primary border-b pt-7 pb-7 pl-5">PRE-FLIGHT</header>
+	<div class="listbox-item border-gray border-b p-6">
 		<a href="/cli">
 			<p>Install Tea</p>
 		</a>
 	</div>
-	<div class="listbox-item border-b border-gray p-6">
+	<div class="listbox-item border-gray border-b p-6">
 		<div>
 			<p>Authenticate</p>
 		</div>
diff --git a/modules/gui/src/components/ProfileBanner/ProfileBanner.svelte b/modules/gui/src/components/ProfileBanner/ProfileBanner.svelte
index 3cf7154..8d741ec 100644
--- a/modules/gui/src/components/ProfileBanner/ProfileBanner.svelte
+++ b/modules/gui/src/components/ProfileBanner/ProfileBanner.svelte
@@ -10,18 +10,18 @@
 </script>
 
 {#if user}
-	<section class="border-2 border-gray bg-black p-2">
-		<div class="profile_banner container flex border border-gray bg-black">
+	<section class="border-gray border-2 bg-black p-2">
+		<div class="profile_banner border-gray container flex border bg-black">
 			<img class="w-1/5" src={user.avatar_url || '/images/bored-ape.png'} alt="profile" />
 			<div class="flex w-4/5 items-center p-5">
 				<div class="w-1/2 pl-5">
-					<p class="uppercase text-gray">Authenticated with GitHub</p>
+					<p class="text-gray uppercase">Authenticated with GitHub</p>
 					<p />
-					<p class="text-4xl text-primary">@{user.login}</p>
+					<p class="text-primary text-4xl">@{user.login}</p>
 				</div>
-				<div class="h-full border-l border-gray" />
+				<div class="border-gray h-full border-l" />
 				<div class="w-1/2 pl-10">
-					<p class="uppercase leading-loose text-gray">
+					<p class="text-gray uppercase leading-loose">
 						Country: <span>{user?.country}</span><br />Wallet:
 						{#if user.wallet}
 							<span>{user.wallet}</span>
diff --git a/modules/gui/src/components/SearchPackages/SearchPackages.svelte b/modules/gui/src/components/SearchPackages/SearchPackages.svelte
index f18230b..7593716 100644
--- a/modules/gui/src/components/SearchPackages/SearchPackages.svelte
+++ b/modules/gui/src/components/SearchPackages/SearchPackages.svelte
@@ -61,13 +61,13 @@
 	packagesStore.subscribe(setPackages);
 </script>
 
-<div class="border border-gray bg-black">
+<div class="border-gray border bg-black">
 	<section class="flex items-center justify-between">
 		<div>
 			<SearchInput size="medium" {onSearch} />
 		</div>
 		<div class="pr-4">
-			<section class="h-12 w-48 border border-gray">
+			<section class="border-gray h-12 w-48 border">
 				<SortingButtons {onSort} />
 			</section>
 		</div>
@@ -94,7 +94,7 @@
 			{/each}
 		{:else}
 			{#each Array(12) as _}
-				<section class="h-50 border border-gray p-4">
+				<section class="h-50 border-gray border p-4">
 					<Preloader />
 				</section>
 			{/each}
diff --git a/modules/gui/src/components/SearchPackages/SortingButtons.svelte b/modules/gui/src/components/SearchPackages/SortingButtons.svelte
index e529e6e..34424c3 100644
--- a/modules/gui/src/components/SearchPackages/SortingButtons.svelte
+++ b/modules/gui/src/components/SearchPackages/SortingButtons.svelte
@@ -20,7 +20,7 @@
 	};
 </script>
 
-<section class="sorting-container bg-black font-machina text-white">
+<section class="sorting-container font-machina bg-black text-white">
 	<div class="dropdown">
 		<div class="dropdown-title">SORT ORDER</div>
 		<ul class="dropdown-content column flex">
diff --git a/modules/gui/src/components/SearchPopupResults/SearchPopupResults.svelte b/modules/gui/src/components/SearchPopupResults/SearchPopupResults.svelte
index 74189dc..c616793 100644
--- a/modules/gui/src/components/SearchPopupResults/SearchPopupResults.svelte
+++ b/modules/gui/src/components/SearchPopupResults/SearchPopupResults.svelte
@@ -55,18 +55,18 @@
 <section class={term ? 'show' : ''}>
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<figure on:click={onClose} />
-	<div class="z-20 border border-gray bg-black">
+	<div class="border-gray z-20 border bg-black">
 		<header class="flex justify-between p-4">
-			<div class="text-2xl text-primary">Showing search results for `{term}`</div>
+			<div class="text-primary text-2xl">Showing search results for `{term}`</div>
 
 			<button on:click={onClose}>&#x2715</button>
 		</header>
-		<menu class="flex h-8 w-full gap-4 bg-accent px-4 text-xs">
+		<menu class="bg-accent flex h-8 w-full gap-4 px-4 text-xs">
 			<button>packages ({packages.length})</button>
 			<button>articles ({articles.length})</button>
 			<button>workshops ({workshops.length})</button>
 		</menu>
-		<header class="p-4 text-lg text-primary">
+		<header class="text-primary p-4 text-lg">
 			Top Package Results ({packages.length})
 		</header>
 		<ul class="grid grid-cols-3">
@@ -91,29 +91,29 @@
 				{/each}
 			{:else if loading}
 				{#each Array(12) as _}
-					<section class="h-50 border border-gray p-4">
+					<section class="h-50 border-gray border p-4">
 						<Preloader />
 					</section>
 				{/each}
 			{/if}
 		</ul>
-		<header class="p-4 text-lg text-primary">
+		<header class="text-primary p-4 text-lg">
 			Top Article Results ({articles.length})
 		</header>
 		{#if articles.length}
 			<Posts posts={articles} linkTarget="_blank" />
 		{:else if loading}
-			<section class="h-64 border border-gray bg-black p-4">
+			<section class="border-gray h-64 border bg-black p-4">
 				<Preloader />
 			</section>
 		{/if}
-		<header class="p-4 text-lg text-primary">
+		<header class="text-primary p-4 text-lg">
 			Top Workshop Results ({workshops.length})
 		</header>
 		{#if workshops.length}
 			<Posts posts={workshops} linkTarget="_blank" />
 		{:else if loading}
-			<section class="h-64 border border-gray bg-black p-4">
+			<section class="border-gray h-64 border bg-black p-4">
 				<Preloader />
 			</section>
 		{/if}
diff --git a/modules/gui/src/components/SuggestedPackages/SuggestedPackages.svelte b/modules/gui/src/components/SuggestedPackages/SuggestedPackages.svelte
index 3e024ba..3ac5d73 100644
--- a/modules/gui/src/components/SuggestedPackages/SuggestedPackages.svelte
+++ b/modules/gui/src/components/SuggestedPackages/SuggestedPackages.svelte
@@ -30,7 +30,7 @@
 	});
 </script>
 
-<header class="flex items-center justify-between border border-gray bg-black p-4 text-primary">
+<header class="border-gray text-primary flex items-center justify-between border bg-black p-4">
 	<span>MORE LIKE THIS</span>
 </header>
 <ul class="grid grid-cols-3 bg-black">
@@ -55,7 +55,7 @@
 		{/each}
 	{:else}
 		{#each Array(9) as _}
-			<section class="h-50 border border-gray p-4">
+			<section class="h-50 border-gray border p-4">
 				<Preloader />
 			</section>
 		{/each}
diff --git a/modules/gui/src/components/TopBar/ProfileNavButton.svelte b/modules/gui/src/components/TopBar/ProfileNavButton.svelte
index 7a79823..9f1db1f 100644
--- a/modules/gui/src/components/TopBar/ProfileNavButton.svelte
+++ b/modules/gui/src/components/TopBar/ProfileNavButton.svelte
@@ -23,7 +23,7 @@
 	<a href="/profile">
 		<section class="flex">
 			<img width="40" height="40" src={user.avatar_url || '/images/bored-ape.png'} alt="profile" />
-			<div class="p-2 text-gray">@{user.login}</div>
+			<div class="text-gray p-2">@{user.login}</div>
 		</section>
 	</a>
 {:else}
@@ -32,6 +32,6 @@
 		<figure class="p-2">
 			<img width="28" height="28" src="/images/github.png" alt="profile" />
 		</figure>
-		<div class="p-2 text-gray">Login</div>
+		<div class="text-gray p-2">Login</div>
 	</section>
 {/if}
diff --git a/modules/gui/src/components/TopBar/TopBar.svelte b/modules/gui/src/components/TopBar/TopBar.svelte
index 26e1d39..dc76a70 100644
--- a/modules/gui/src/components/TopBar/TopBar.svelte
+++ b/modules/gui/src/components/TopBar/TopBar.svelte
@@ -19,11 +19,11 @@
 	});
 </script>
 
-<header class="flex w-full border border-l-0 border-r-0 border-gray">
+<header class="border-gray flex w-full border border-l-0 border-r-0">
 	<a href="/">
 		<img width="40" height="40" src="/images/tea-icon.png" alt="tea" />
 	</a>
-	<ul class="flex h-10 gap-4 pl-4 align-middle leading-10 text-gray">
+	<ul class="text-gray flex h-10 gap-4 pl-4 align-middle leading-10">
 		<button on:click={navStore.back} class={$prevPath ? 'active' : ''}>&#8592</button>
 		<button on:click={navStore.next} class={$nextPath ? 'active' : ''}>&#8594</button>
 	</ul>
@@ -33,7 +33,7 @@
 		placeholder="search the tea store"
 		{onSearch}
 	/>
-	<ul class="flex gap-4 pr-4 pt-2 align-middle text-gray">
+	<ul class="text-gray flex gap-4 pr-4 pt-2 align-middle">
 		<button class="icon-filter hover:text-white" />
 		<button class="icon-share hover:text-white" />
 		<button class="icon-star-empty hover:text-white" />
@@ -41,7 +41,7 @@
 	<ProfileNavButton />
 </header>
 <menu
-	class="flex h-10 gap-4 border border-l-0 border-r-0 border-t-0 border-gray pl-4 align-middle leading-10 text-gray"
+	class="border-gray text-gray flex h-10 gap-4 border border-l-0 border-r-0 border-t-0 pl-4 align-middle leading-10"
 >
 	<a href="/cli" class={currentPath === '/cli' ? 'active' : ''}>install teaCli</a>
 	<a href="/documentation" class={currentPath === '/documentation' ? 'active' : ''}>documentation</a
diff --git a/modules/gui/src/routes/+layout.svelte b/modules/gui/src/routes/+layout.svelte
index 1da402c..92e894c 100644
--- a/modules/gui/src/routes/+layout.svelte
+++ b/modules/gui/src/routes/+layout.svelte
@@ -30,7 +30,7 @@
 			<!-- all pages get inserted in this slot -->
 			<slot />
 		</div>
-		<footer class="mt-8 w-full border border-r-0 border-gray bg-black">
+		<footer class="border-gray mt-8 w-full border border-r-0 bg-black">
 			<FooterLinks />
 		</footer>
 		<SearchPopupResults />