diff --git a/src/lib/components/search/advancedSearch/index.svelte b/src/lib/components/search/advancedSearch/index.svelte
new file mode 100644
index 0000000..d270a7e
--- /dev/null
+++ b/src/lib/components/search/advancedSearch/index.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { Checkbox } from 'carbon-components-svelte';
+  import { boredState } from '$lib/stores/boredState';
+  import { gameStore } from '$lib/stores/gameSearchStore';
+
+  async function handleSubmit(event: SubmitEvent) {
+    // submitting = true;
+    boredState.set({ loading: true });
+    const form = event.target as HTMLFormElement;
+    console.log('form', form);
+    const response = await fetch('/api/games', {
+      method: 'POST',
+      headers: { accept: 'application/json' },
+      body: new FormData(form)
+    });
+    const responseData = await response.json();
+    // submitting = false;
+    boredState.set({ loading: false });
+    gameStore.removeAll();
+    gameStore.addAll(responseData?.games);
+    // games = responseData?.games;
+  }
+
+  let submitting = $boredState?.loading;
+  let minAge = 0;
+  let minPlayers = 1;
+  let maxPlayers = 1;
+  let exactMinAge = false;
+  let exactMinPlayers = false;
+  let exactMaxPlayers = false;
+</script>
+
+<form on:submit|preventDefault={handleSubmit} method="post">
+  <fieldset aria-busy={submitting} disabled={submitting}>
+    <div>
+      <label htmlfor="minAge">
+        <input id="minAge" name="minAge" bind:value={minAge} type="number" min={0} max={120} />
+        Min Age
+      </label>
+    </div>
+    <div>
+      <label htmlfor="minPlayers">
+        <input
+          id="minPlayers"
+          name="minPlayers"
+          bind:value={minPlayers}
+          type="number"
+          min={0}
+          max={50}
+        />
+        Min Players
+      </label>
+      <Checkbox name="exactMinPlayers" labelText="Search exact?" bind:checked={exactMinPlayers} />
+    </div>
+    <div>
+      <label htmlfor="maxPlayers">
+        <input
+          id="maxPlayers"
+          name="maxPlayers"
+          bind:value={maxPlayers}
+          type="number"
+          min={0}
+          max={50}
+        />
+        Max Players
+      </label>
+      <label htmlfor="exactMaxPlayers">
+        <input
+          id="exactMaxPlayers"
+          type="checkbox"
+          name="exactMaxPlayers"
+          bind:checked={exactMaxPlayers}
+        />
+        <span>Search exact?</span>
+      </label>
+    </div>
+  </fieldset>
+  <button type="submit" disabled={submitting}>Submit</button>
+</form>
+
+<style lang="scss">
+  h1 {
+    width: 100%;
+  }
+  button {
+    border-radius: 10px;
+    margin: 0.5rem;
+    padding: 1rem;
+    color: var(--clr-input-txt);
+    background-color: var(--color-btn-primary-active);
+  }
+
+  fieldset {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  label {
+    display: grid;
+    margin: 1rem;
+  }
+</style>
diff --git a/src/lib/components/search/random/index.svelte b/src/lib/components/search/random/index.svelte
new file mode 100644
index 0000000..0edae18
--- /dev/null
+++ b/src/lib/components/search/random/index.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { boredState } from '$lib/stores/boredState';
+  import { gameStore } from '$lib/stores/gameSearchStore';
+
+  async function handleSubmit(event: SubmitEvent) {
+    // submitting = true;
+    boredState.set({ loading: true });
+    const form = event.target as HTMLFormElement;
+    console.log('form', form);
+    const response = await fetch('/api/games', {
+      method: 'POST',
+      headers: { accept: 'application/json' },
+      body: new FormData(form)
+    });
+    const responseData = await response.json();
+    // submitting = false;
+    boredState.set({ loading: false });
+    gameStore.removeAll();
+    gameStore.addAll(responseData?.games);
+    // games = responseData?.games;
+  }
+
+  let submitting = $boredState?.loading;
+</script>
+
+<form on:submit|preventDefault={handleSubmit} method="post">
+  <fieldset aria-busy={submitting} disabled={submitting}>
+    <input type="checkbox" id="random" name="random" hidden checked />
+    <button type="submit" disabled={submitting}>🎲</button>
+  </fieldset>
+</form>
+
+<style lang="scss">
+  h1 {
+    width: 100%;
+  }
+  button {
+    border-radius: 10px;
+    margin: 0.5rem;
+    padding: 1rem;
+    color: var(--clr-input-txt);
+    background-color: var(--color-btn-primary-active);
+  }
+
+  fieldset {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  label {
+    display: grid;
+    margin: 1rem;
+  }
+</style>
diff --git a/src/lib/components/search/textSearch/index.svelte b/src/lib/components/search/textSearch/index.svelte
new file mode 100644
index 0000000..8b28fe8
--- /dev/null
+++ b/src/lib/components/search/textSearch/index.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { boredState } from '$lib/stores/boredState';
+  import { gameStore } from '$lib/stores/gameSearchStore';
+
+  async function handleSearch(event: SubmitEvent) {
+    boredState.set({ loading: true });
+    const form = event.target as HTMLFormElement;
+    console.log('form', form);
+    const response = await fetch('/api/game', {
+      method: 'POST',
+      headers: { accept: 'application/json' },
+      body: new FormData(form)
+    });
+    const responseData = await response.json();
+    boredState.set({ loading: false });
+    gameStore.removeAll();
+    gameStore.addAll(responseData?.games);
+  }
+
+  let submitting = $boredState?.loading;
+  let name = '';
+</script>
+
+<form on:submit|preventDefault={handleSearch} method="post">
+  <fieldset aria-busy={submitting} disabled={submitting}>
+    <div>
+      <label htmlfor="name">
+        Search
+        <input id="name" name="name" bind:value={name} type="text" />
+      </label>
+    </div>
+  </fieldset>
+  <button type="submit" disabled={submitting}>Search</button>
+</form>
+
+<style lang="scss">
+  h1 {
+    width: 100%;
+  }
+  button {
+    border-radius: 10px;
+    margin: 0.5rem;
+    padding: 1rem;
+    color: var(--clr-input-txt);
+    background-color: var(--color-btn-primary-active);
+  }
+
+  fieldset {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  label {
+    display: grid;
+    margin: 1rem;
+  }
+</style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 030f1aa..7f112a4 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -6,55 +6,15 @@
   import Listbox from '$lib/components/listbox.svelte';
   import Loading from '$lib/components/loading.svelte';
   import Portal from '$lib/Portal.svelte';
+  import TextSearch from '$lib/components/search/textSearch/index.svelte';
+  import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
+  import RandomSearch from '$lib/components/search/random/index.svelte';
   import { gameStore } from '$lib/stores/gameSearchStore';
   import { boredState } from '$lib/stores/boredState';
   import { Checkbox } from 'carbon-components-svelte';
   // import { enhance } from "$lib/form";
 
   // let games: GameType[] = [];
-  let submitting = $boredState?.loading;
-
-  async function handleSubmit(event: SubmitEvent) {
-    // submitting = true;
-    boredState.set({ loading: true });
-    const form = event.target as HTMLFormElement;
-    console.log('form', form);
-    const response = await fetch('/api/games', {
-      method: 'POST',
-      headers: { accept: 'application/json' },
-      body: new FormData(form)
-    });
-    const responseData = await response.json();
-    // submitting = false;
-    boredState.set({ loading: false });
-    gameStore.removeAll();
-    gameStore.addAll(responseData?.games);
-    // games = responseData?.games;
-  }
-
-  async function handleSearch(event: SubmitEvent) {
-    boredState.set({ loading: true });
-    const form = event.target as HTMLFormElement;
-    console.log('form', form);
-    const response = await fetch('/api/game', {
-      method: 'POST',
-      headers: { accept: 'application/json' },
-      body: new FormData(form)
-    });
-    const responseData = await response.json();
-    // submitting = false;
-    boredState.set({ loading: false });
-    gameStore.removeAll();
-    gameStore.addAll(responseData?.games);
-  }
-
-  let name = '';
-  let minAge = 0;
-  let minPlayers = 1;
-  let maxPlayers = 1;
-  let exactMinAge = false;
-  let exactMinPlayers = false;
-  let exactMaxPlayers = false;
 </script>
 
 <svelte:head>
@@ -64,70 +24,9 @@
 <h1>Search Boardgames!</h1>
 <p>Input your requirements to search for board game that match your criteria</p>
 <div class="game-form">
-  <form on:submit|preventDefault={handleSearch} method="post">
-    <fieldset aria-busy={submitting} disabled={submitting}>
-      <div>
-        <label htmlfor="minAge">
-          Search
-          <input id="name" name="name" bind:value={name} type="text" />
-        </label>
-      </div>
-    </fieldset>
-    <button type="submit" disabled={submitting}>Search</button>
-  </form>
-  <form on:submit|preventDefault={handleSubmit} method="post">
-    <fieldset aria-busy={submitting} disabled={submitting}>
-      <div>
-        <label htmlfor="minAge">
-          <input id="minAge" name="minAge" bind:value={minAge} type="number" min={0} max={120} />
-          Min Age
-        </label>
-      </div>
-      <div>
-        <label htmlfor="minPlayers">
-          <input
-            id="minPlayers"
-            name="minPlayers"
-            bind:value={minPlayers}
-            type="number"
-            min={0}
-            max={50}
-          />
-          Min Players
-        </label>
-        <Checkbox name="exactMinPlayers" labelText="Search exact?" bind:checked={exactMinPlayers} />
-      </div>
-      <div>
-        <label htmlfor="maxPlayers">
-          <input
-            id="maxPlayers"
-            name="maxPlayers"
-            bind:value={maxPlayers}
-            type="number"
-            min={0}
-            max={50}
-          />
-          Max Players
-        </label>
-        <label htmlfor="exactMaxPlayers">
-          <input
-            id="exactMaxPlayers"
-            type="checkbox"
-            name="exactMaxPlayers"
-            bind:checked={exactMaxPlayers}
-          />
-          <span>Search exact?</span>
-        </label>
-      </div>
-    </fieldset>
-    <button type="submit" disabled={submitting}>Submit</button>
-  </form>
-  <form on:submit|preventDefault={handleSubmit} method="post">
-    <fieldset aria-busy={submitting} disabled={submitting}>
-      <input type="checkbox" id="random" name="random" hidden checked />
-      <button type="submit" disabled={submitting}>🎲</button>
-    </fieldset>
-  </form>
+  <TextSearch />
+  <AdvancedSearch />
+  <RandomSearch />
 </div>
 
 <!-- {#if submitting}