diff --git a/jsconfig.json b/jsconfig.json
index 676c23b..877e89b 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -6,6 +6,7 @@
 			"$layout": ["src/lib/components/layout"],
 			"$layouts": ["src/lib/layouts"],
 			"$lib": ["src/lib"],
+			"$utils": ["src/lib/utils"],
 			"$styles": ["src/lib/styles"],
 			"$stores": ["src/lib/stores"]
 		}
diff --git a/src/lib/components/ComponentIndex/ArrowButton.svelte b/src/lib/components/ComponentIndex/ArrowButton.svelte
index cf9eb01..0c63e5f 100644
--- a/src/lib/components/ComponentIndex/ArrowButton.svelte
+++ b/src/lib/components/ComponentIndex/ArrowButton.svelte
@@ -8,23 +8,23 @@
   div {
     font-size: 1rem;
     border: 2px solid var(--dark-gray);
-    border-radius: 5px;
+    border-radius: 3px;
+    height: 100%;
     background-color: white;
     color: var(--dark-gray);
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 5px 15px;
+    padding: var(--s-2);
     position: relative;
   }
   div.small {
     font-size: var(--font-100);
-    padding: 3px 10px;
   }
   div:hover {
     cursor: pointer;
-    border-color: var(--primary);
-    color: var(--primary);
+    border-color: var(--secondary);
+    color: var(--secondary);
   }
 
   .arrow {
@@ -35,7 +35,7 @@
     background-color: var(--dark-gray);
   }
   div:hover .arrow {
-    background-color: var(--dark-gray);
+    background-color: var(--secondary);
   }
   .arrow.active {
     background-color: var(--dark-gray);
@@ -52,7 +52,7 @@
     z-index: 100;
     margin: 0;
     padding: 0;
-    border: 2px solid var(--primary);
+    border: 2px solid var(--secondary);
     border-radius: 5px;
     background: white;
   }
diff --git a/src/lib/components/Select.svelte b/src/lib/components/Select.svelte
index 10d1d09..d3218ef 100644
--- a/src/lib/components/Select.svelte
+++ b/src/lib/components/Select.svelte
@@ -17,14 +17,12 @@
 		font-size: 0.875rem;
 	}
 	.themed {
-		--inputFontSize: 0.875rem;
-		--multiItemActiveBG: var(--color);
-		--height: 1rem;
-		--borderHoverColor: var(--color);
-		--borderFocusColor: var(--color);
-		--itemHoverBG: var(--color-shadow);
-		--itemIsActiveBG: var(--color);
-		--indicatorTop: calc(50% - 13px);
+		/* --inputFontSize: 0.875rem; */
+		--multiItemActiveBG: var(--secondary);
+		--borderHoverColor: var(--secondary);
+		--borderFocusColor: var(--secondary);
+		--itemIsActiveBG: var(--secondary);
+		/* --indicatorTop: calc(50% - 13px); */
 
 		position: relative;
 		display: flex;
@@ -35,7 +33,7 @@
 		cursor: pointer;
 		flex: 1;
 		align-items: center;
-		padding: 1rem;
+		padding: var(--s-2);
 		gap: 10px;
 		min-width: 150px;
 		min-height: 3rem;
@@ -44,12 +42,12 @@
 	.themed :global(.multiSelectItem) {
 		font-size: 0.875rem;
 		align-items: center;
-		--multiItemBorderRadius: var(--radius-100);
+		--multiItemBorderRadius: var(--s-1);
 		--multiItemHeight: 1.25rem;
 		--multiItemMargin: 0;
 		--multiItemPadding: 0.2rem 0.3rem;
 		--multiClearBG: transparent;
-		--multiClearFill: var(--color-text-secondary);
+		--multiClearFill: var(--secondary);
 		--multiClearHoverBG: transparent;
 		--multiClearHoverFill: var(--color-bg);
 		--multiLabelMargin: 1px 5px 0 0;
@@ -65,7 +63,4 @@
 		cursor: pointer;
 	}
 
-	.themed :global(.listItem) {
-		--height: 1.4rem;
-	}
 </style>
diff --git a/src/lib/layouts/SearchLayout.svelte b/src/lib/layouts/SearchLayout.svelte
new file mode 100644
index 0000000..029df76
--- /dev/null
+++ b/src/lib/layouts/SearchLayout.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let title;
+</script>
+
+<h1>{title}</h1>
+<slot name="controls" />
+<hr />
+<slot name="items" />
diff --git a/src/lib/styles/globals.css b/src/lib/styles/globals.css
index 78ea4c6..4b3361b 100644
--- a/src/lib/styles/globals.css
+++ b/src/lib/styles/globals.css
@@ -93,3 +93,107 @@ li {
 	place-items: center;
 	place-content: center;
 }
+
+/***********TEMPLATES & COMPONENTS STYLES***********/
+hr {
+	margin-block: 4rem;
+}
+.submit {
+	position: absolute;
+	top: calc(100% + 1rem);
+	left: 0;
+}
+.controls {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	font-family: Overpass;
+	position: relative;
+}
+.inputs {
+	display: grid;
+	grid-template-columns: repeat(4, auto);
+	grid-gap: 0.5rem;
+	margin-right: 2rem;
+}
+.searchbar {
+	align-self: flex-start;
+	width: 35%;
+	font-family: Overpass;
+	border-width: 0;
+	background: #f3f6f9 url(/images/search-icon.svg) 98% no-repeat;
+	margin: 0;
+	padding: 10px 15px;
+	border: 1px solid transparent;
+}
+.searchbar:focus {
+	outline: none;
+	border: 1px solid var(--secondary);
+}
+.searchbar-count {
+	position: absolute;
+	top: calc(100% + 1rem);
+	right: 0;
+}
+ul.popin {
+	padding: 0.5ex;
+	margin: 0;
+	font-size: 0.7em;
+	max-height: 50vh;
+	overflow-y: auto;
+}
+ul.popin li {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	text-transform: capitalize;
+}
+ul.popin li:hover {
+	background: #eee;
+	border-radius: 3px;
+}
+ul.popin li.tag-search {
+	position: sticky;
+	top: -0.5ex;
+	margin: 0 -0.5ex;
+	padding: 0.5ex;
+	border-radius: 4px;
+	background: white;
+}
+ul.popin li.tag-search input {
+	margin: 0;
+	background: #f3f6f9;
+	width: 100%;
+	min-width: 15ch;
+}
+ul.popin li.tag-search:hover {
+	background: white;
+}
+ul.popin.no-wrap li {
+	white-space: nowrap;
+}
+ul.popin li label {
+	display: flex;
+	align-items: center;
+	line-height: 0.7rem;
+	padding: 0.8ex;
+}
+ul.popin li input {
+	flex: 0;
+	margin: 0 1ex 0 0;
+}
+@media screen and (max-width: 1024px) {
+	.controls {
+		flex-flow: column-reverse;
+		align-items: stretch;
+	}
+	.inputs {
+		grid-template-columns: auto;
+		width: 100%;
+	}
+	.searchbar {
+		align-self: flex-start;
+		margin-bottom: 1ex;
+		width: var(--s-full);
+	}
+}
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index aef22fe..55271fe 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -30,10 +30,4 @@
   main {
     padding: var(--s-10) var(--s-5) var(--s-20);
   }
-
-  @media (min-width: 1024px) {
-    main {
-      padding: var(--s-20) 0 var(--s-40);
-    }
-  }
 </style>
\ No newline at end of file
diff --git a/src/routes/components/index.svelte b/src/routes/components/index.svelte
index e3d8d1a..978a1e4 100644
--- a/src/routes/components/index.svelte
+++ b/src/routes/components/index.svelte
@@ -1,18 +1,16 @@
 <script>
+	import SearchLayout from '$layouts/SearchLayout.svelte';
 	import ComponentCard from '$lib/components/ComponentIndex/Card.svelte';
-	import List from '$lib/components/ComponentIndex/CardList.svelte';
-	import Button from '$lib/components/ComponentIndex/ArrowButton.svelte';
+	import List from '$components/ComponentIndex/CardList.svelte';
+	import Button from '$components/ComponentIndex/ArrowButton.svelte';
 	import components from './components.json';
 	import { compare, selectSortItems } from '$lib/utils/sort';
 	import Select from '$components/Select.svelte';
-
 	let searchValue;
-
 	const tags = Array.from(new Set(components.map((item) => item.tags).flat()));
 	const tagItems = tags.map((t) => ({ label: t, value: t }));
 	let filterTag = [];
 	let selectedTags = null;
-
 	const allCategories = Array.from(new Set(components.map((item) => item.category).flat()));
 	const categoryItems = [
 		{ label: 'All', value: null },
@@ -20,22 +18,17 @@
 	];
 	let selectedCategory = null;
 	let filterCategory = null;
-
 	let sorting = 'stars_desc';
 	let selectedSorting = { value: 'stars_desc', label: 'Stars Desc' };
 	$: sorting = selectedSorting?.value || 'stars_desc';
-
 	let packageManager = 'npm';
-
 	const intersection = (array1, array2) => {
 		return array1.filter((item) => array2.includes(item));
 	};
-
 	$: filterCategory = selectedCategory?.value || null;
 	$: dataToDisplay = components
 		.filter((component) => {
 			if (!searchValue && filterTag.length === 0 && filterCategory === null) return true;
-
 			if (
 				(searchValue &&
 					!(
@@ -47,11 +40,9 @@
 			) {
 				return false;
 			}
-
 			return true;
 		})
 		.sort(compare(sorting));
-
 	$: categories = Array.from(new Set(dataToDisplay.map((item) => item.category)));
 	$: filterTag = selectedTags?.map((obj) => obj.value) || [];
 </script>
@@ -60,193 +51,58 @@
 	<title>Components - Svelte Society</title>
 </svelte:head>
 
-<main class="wrapper">
-  <h1>Components</h1>
-  <div class="controls">
-    <div class="inputs">
-      <Button active={filterTag.length > 0}>
-        Tags {#if filterTag.length > 0}<small>({filterTag.length})</small>{/if}
-        <ul slot="menu" role="menu" class="popin">
-          <li class="tag-search"><input placeholder="Search for tags..." bind:value={searchTag} /></li>
-          {#each tagSearchResult as tag}
-            <li><label><input type="checkbox" bind:group={filterTag} value={tag}> {tag}</label></li>
-          {/each}
-        </ul>
-      </Button>
-      <Button active={filterCategory !== null}>
-        Categories
-        <ul slot="menu" role="menu" class="popin">
-          <li><label><input type="radio" bind:group={filterCategory} value={null}> All</label></li>
-          {#each allCategories as category}
-            <li><label><input type="radio" bind:group={filterCategory} value={category}> {category||"Unclassified"}</label></li>
-          {/each}
-        </ul>
-      </Button>
-      
-      <Button active={sorting !== ''}>
-        Sort
-        <ul slot="menu" role="menu" class="popin no-wrap">
-            <li><label><input type="radio" bind:group={sorting} value="added_desc"> Last Added first</label></li>
-            <li><label><input type="radio" bind:group={sorting} value="added_asc"> Oldest first</label></li>
-            <li><label><input type="radio" bind:group={sorting} value="stars_desc"> Stars Desc</label></li>
-            <li><label><input type="radio" bind:group={sorting} value="stars_asc"> Stars Asc</label></li>
-            <li><label><input type="radio" bind:group={sorting} value="name_asc"> Name Asc</label></li>
-            <li><label><input type="radio" bind:group={sorting} value="name_desc"> Name Desc</label></li>
-        </ul>
-      </Button>
-      <Button small active={packageManager !== ''}>
-        Package Manager
-        <ul slot="menu" role="menu" class="popin no-wrap">
-          <li><label><input type="radio" bind:group={packageManager} value="npm"> NPM</label></li>
-          <li><label><input type="radio" bind:group={packageManager} value="pnpm"> PNPM</label></li>
-          <li><label><input type="radio" bind:group={packageManager} value="yarn"> Yarn</label></li>
-        </ul>
-      </Button>
-      <a href = "/help/components" class="submit">Submit a component</a>
-    </div>
+<SearchLayout title="Components">
+	<section class="controls" slot="controls">
+		<div class="inputs">
+			<Select bind:value={selectedTags} items={tagItems} isMulti label="Tags" />
+			<Select
+				label="Category"
+				bind:value={selectedCategory}
+				items={categoryItems}
+				placeholder="Category"
+				isClearable={false}
+				showIndicator
+			/>
+			<Select
+				items={selectSortItems}
+				bind:value={selectedSorting}
+				label="Sorting"
+				showIndicator
+				isClearable={false}
+			/>
 
-    <input
-      class="searchbar"
-      type="text"
-      placeholder="Search for components..."
-      bind:value={searchValue} />
-    <span class="searchbar-count">{dataToDisplay.length} result{#if dataToDisplay.length !== 1}s{/if}</span>
-  </div>
-  <hr />
-  {#each categories as category}
-    <List title={category||"Unclassified"}>
-      {#each dataToDisplay.filter(d => d.category === category) as data}
-        <ComponentCard {...data} manager={packageManager} />
-      {/each}
-    </List>
-  {/each}
-</main>
-
-<style>
-  
-  .submit {
-    align-self: flex-end;
-  }
-
-	hr {
-		margin-block: 4rem;
-	}
-
-	.controls {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		font-family: Overpass;
-		position: relative;
-	}
-
-	.inputs {
-		display: grid;
-		grid-template-columns: repeat(4, auto);
-		grid-gap: 0.5rem;
-		margin-right: 2rem;
-	}
-
-	.searchbar {
-		height: 100%;
-		width: 35%;
-		font-family: Overpass;
-		border-width: 0;
-		background: #f3f6f9 url(/images/search-icon.svg) 98% no-repeat;
-		margin: 0;
-		padding: 10px 15px;
-	}
-
-	.searchbar-count {
-		position: absolute;
-		top: 100%;
-		right: 0;
-	}
-
-	ul.popin {
-		padding: 0.5ex;
-		margin: 0;
-		font-size: 0.7em;
-		max-height: 50vh;
-		overflow-y: auto;
-	}
-
-	ul.popin li {
-		list-style: none;
-		padding: 0;
-		margin: 0;
-		text-transform: capitalize;
-	}
-	ul.popin li:hover {
-		background: #eee;
-		border-radius: 3px;
-	}
-	ul.popin li.tag-search {
-		position: sticky;
-		top: -0.5ex;
-		margin: 0 -0.5ex;
-		padding: 0.5ex;
-		border-radius: 4px;
-		background: white;
-	}
-	ul.popin li.tag-search input {
-		margin: 0;
-		background: #f3f6f9;
-		width: 100%;
-		min-width: 15ch;
-	}
-	ul.popin li.tag-search:hover {
-		background: white;
-	}
-	ul.popin.no-wrap li {
-		white-space: nowrap;
-	}
-
-	ul.popin li label {
-		display: flex;
-		align-items: center;
-		line-height: 0.7rem;
-		padding: 0.8ex;
-	}
-
-	ul.popin li input {
-		flex: 0;
-		margin: 0 1ex 0 0;
-	}
-
-	@media screen and (max-width: 1024px) {
-		.controls {
-			flex-flow: column-reverse;
-		}
-
-		.inputs {
-			align-self: flex-start;
-			width: 100%;
-			grid-template-columns: repeat(3, auto);
-		}
-
-		.searchbar {
-			align-self: flex-end;
-			margin-bottom: 1ex;
-		}
-	}
-
-	@media screen and (max-width: 700px) {
-		.controls {
-			align-items: stretch;
-		}
-
-		.inputs {
-			grid-template-columns: auto;
-		}
-
-		.searchbar {
-			width: auto;
-			align-self: stretch;
-		}
-
-		:global(.select-container) {
-			width: 100%;
-		}
-	}
-</style>
+			<Button small active={packageManager !== ''}>
+				Package Manager
+				<ul slot="menu" role="menu" class="popin no-wrap">
+					<li><label><input type="radio" bind:group={packageManager} value="npm" /> NPM</label></li>
+					<li>
+						<label><input type="radio" bind:group={packageManager} value="pnpm" /> PNPM</label>
+					</li>
+					<li>
+						<label><input type="radio" bind:group={packageManager} value="yarn" /> Yarn</label>
+					</li>
+				</ul>
+			</Button>
+		</div>
+    
+		<a href="/help/components" class="submit">Submit a component</a>
+		<input
+			class="searchbar"
+			type="text"
+			placeholder="Search for components..."
+			bind:value={searchValue}
+		/>
+		<span class="searchbar-count"
+			>{dataToDisplay.length} result{#if dataToDisplay.length !== 1}s{/if}</span
+		>
+	</section>
+	<section slot="items">
+		{#each categories as category}
+			<List title={category || 'Unclassified'}>
+				{#each dataToDisplay.filter((d) => d.category === category) as data}
+					<ComponentCard {...data} manager={packageManager} />
+				{/each}
+			</List>
+		{/each}
+	</section>
+</SearchLayout>
diff --git a/src/routes/templates/index.svelte b/src/routes/templates/index.svelte
index e2b2f77..6cd26c2 100644
--- a/src/routes/templates/index.svelte
+++ b/src/routes/templates/index.svelte
@@ -1,10 +1,10 @@
 <script>
 	import ComponentCard from '$lib/components/ComponentIndex/Card.svelte';
 	import List from '$lib/components/ComponentIndex/CardList.svelte';
-	import Button from '$lib/components/ComponentIndex/ArrowButton.svelte';
 	import components from './templates.json';
 	import { compare, selectSortItems } from '$lib/utils/sort';
 	import Select from '$lib/components/Select.svelte';
+import SearchLayout from '$lib/layouts/SearchLayout.svelte';
 
 	let searchValue;
 
@@ -57,9 +57,8 @@
 	<title>Templates - Svelte Society</title>
 </svelte:head>
 
-<main class="wrapper">
-	<h1>Templates</h1>
-	<div class="controls">
+<SearchLayout title="Templates">
+	<section class="controls" slot="controls">
 		<div class="inputs">
 			<Select bind:value={selectedTags} items={tagItems} isMulti label="Tags" />
 			<Select
@@ -78,20 +77,20 @@
 				isClearable={false}
 			/>
 
-			<Button on:click={() => (location.href = '/help/components')}>Submit a template</Button>
-		</div>
-
+      <a href='/help/components' class="submit">Submit a template</a>
+    </div>
+    
 		<input
-			class="searchbar"
-			type="text"
-			placeholder="Search for templates..."
-			bind:value={searchValue}
+    class="searchbar"
+    type="text"
+    placeholder="Search for templates..."
+    bind:value={searchValue}
 		/>
 		<span class="searchbar-count"
-			>{dataToDisplay.length} result{#if dataToDisplay.length !== 1}s{/if}</span
+    >{dataToDisplay.length} result{#if dataToDisplay.length !== 1}s{/if}</span
 		>
-	</div>
-	<hr />
+</section>
+<section slot="items">
 	{#each categories as category}
 		<List title={category || 'Unclassified'}>
 			{#each dataToDisplay.filter((d) => d.category === category) as data}
@@ -99,81 +98,6 @@
 			{/each}
 		</List>
 	{/each}
-</main>
+</section>
+</SearchLayout>
 
-<style>
-	h1 {
-		@apply text-5xl;
-	}
-
-	hr {
-		margin-block: 4rem;
-	}
-
-	.controls {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		font-family: Overpass;
-		position: relative;
-	}
-
-	.inputs {
-		display: grid;
-		grid-template-columns: repeat(4, auto);
-		grid-gap: 0.5rem;
-		margin-right: 2rem;
-		padding-top: 1rem;
-	}
-
-	.searchbar {
-		height: 100%;
-		width: 35%;
-		font-family: Overpass;
-		border-width: 0;
-		background: #f3f6f9 url(/images/search-icon.svg) 98% no-repeat;
-		margin: 0;
-		padding: 10px 15px;
-	}
-
-	.searchbar-count {
-		position: absolute;
-		top: 100%;
-		right: 0;
-	}
-
-	@media screen and (max-width: 1024px) {
-		.controls {
-			flex-flow: column-reverse;
-		}
-		.inputs {
-			align-self: flex-start;
-			width: 100%;
-			grid-template-columns: repeat(3, auto);
-		}
-
-		.searchbar {
-			align-self: flex-end;
-			margin-bottom: 1ex;
-		}
-	}
-
-	@media screen and (max-width: 700px) {
-		.controls {
-			align-items: stretch;
-		}
-
-		.inputs {
-			grid-template-columns: auto;
-		}
-
-		.searchbar {
-			width: auto;
-			align-self: stretch;
-		}
-
-		:global(.select-container) {
-			width: 100%;
-		}
-	}
-</style>
diff --git a/src/routes/tooling/index.svelte b/src/routes/tooling/index.svelte
index a79298e..803083c 100644
--- a/src/routes/tooling/index.svelte
+++ b/src/routes/tooling/index.svelte
@@ -1,7 +1,7 @@
 <script>
 	import ComponentCard from '$lib/components/ComponentIndex/Card.svelte';
 	import List from '$lib/components/ComponentIndex/CardList.svelte';
-	import Button from '$lib/components/ComponentIndex/ArrowButton.svelte';
+  import SearchLayout from '$layouts/SearchLayout.svelte';
 	import tools from './tools.json';
 	import Select from '$lib/components/Select.svelte';
 	import { compare, selectSortItems } from '$lib/utils/sort';
@@ -56,9 +56,8 @@
 	<title>Tooling - Svelte Society</title>
 </svelte:head>
 
-<main class="wrapper">
-	<h1>Tooling</h1>
-	<div class="controls">
+<SearchLayout title="Tooling">
+	<section slot="controls" class="controls">
 		<div class="inputs">
 			<Select bind:value={selectedTags} items={tagItems} isMulti label="Tags" />
 			<Select
@@ -76,7 +75,7 @@
 				showIndicator
 				isClearable={false}
 			/>
-			<Button on:click={() => (location.href = '/help/components')}>Submit a tool</Button>
+      <a href="/help/components" class="submit">Submit a tool</a>
 		</div>
 
 		<input
@@ -88,8 +87,8 @@
 		<span class="searchbar-count"
 			>{dataToDisplay.length} result{#if dataToDisplay.length !== 1}s{/if}</span
 		>
-	</div>
-	<hr />
+	</section>
+	<section slot="items">
 	{#each categories as category}
 		<List title={category || 'Unclassified'}>
 			{#each dataToDisplay.filter((d) => d.category === category) as data}
@@ -97,81 +96,6 @@
 			{/each}
 		</List>
 	{/each}
-</main>
 
-<style>
-	h1 {
-		@apply text-5xl;
-	}
-
-	hr {
-		margin-block: 4rem;
-	}
-
-	.controls {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		font-family: Overpass;
-		position: relative;
-	}
-
-	.inputs {
-		display: grid;
-		grid-template-columns: repeat(4, auto);
-		grid-gap: 0.5rem;
-		margin-right: 2rem;
-	}
-
-	.searchbar {
-		height: 100%;
-		width: 35%;
-		font-family: Overpass;
-		border-width: 0;
-		background: #f3f6f9 url(/images/search-icon.svg) 98% no-repeat;
-		margin: 0;
-		padding: 10px 15px;
-	}
-
-	.searchbar-count {
-		position: absolute;
-		top: 100%;
-		right: 0;
-	}
-
-	@media screen and (max-width: 1024px) {
-		.controls {
-			flex-flow: column-reverse;
-		}
-
-		.inputs {
-			align-self: flex-start;
-			width: 100%;
-			grid-template-columns: repeat(3, auto);
-		}
-
-		.searchbar {
-			align-self: flex-end;
-			margin-bottom: 1ex;
-		}
-	}
-
-	@media screen and (max-width: 700px) {
-		.controls {
-			align-items: stretch;
-		}
-
-		.inputs {
-			grid-template-columns: auto;
-		}
-
-		.searchbar {
-			width: auto;
-			align-self: stretch;
-		}
-
-		:global(.select-container) {
-			width: 100%;
-		}
-	}
-</style>
+</section>
+</SearchLayout>
diff --git a/svelte.config.js b/svelte.config.js
index 696a946..f353b7c 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -34,6 +34,7 @@ const config = {
 					$components: path.resolve('./src/lib/components'),
 					$layout: path.resolve('./src/lib/components/layout'),
 					$layouts: path.resolve('./src/lib/layouts'),
+					$utils: path.resolve('./src/lib/utils'),
 					$styles: path.resolve('./src/lib/styles'),
 					$stores: path.resolve('./src/lib/stores')
 				}