diff --git a/src/lib/components/inputs/TagFilter.svelte b/src/lib/components/inputs/TagFilter.svelte
index 4648fd1..e69de29 100644
--- a/src/lib/components/inputs/TagFilter.svelte
+++ b/src/lib/components/inputs/TagFilter.svelte
@@ -1,150 +0,0 @@
-<script lang="ts">
-    import crossUrl from "$lib/assets/cross.svg";
-
-    export let selectedTags: string[] = [];
-    export let tagFilter: string;
-    export let tagFilterElem;
-    export let filteredTags;
-    export let dropdownVisible: boolean;
-    export let deleteTag;
-    export let addTag;
-</script>
-
-<form>
-    <div class="tagDisplay">
-        {#each selectedTags as tagName (tagName)}
-            <button class="tag" onclick={deleteTag(tagName)} type="button">
-                {tagName}
-                <img src={crossUrl} alt="delete" /></button
-            >
-        {/each}
-        <input
-            type="text"
-            name="tagInput"
-            class="tagInput"
-            bind:value={tagFilter}
-            bind:this={tagFilterElem}
-            onfocus={() => {
-                dropdownVisible = true;
-            }}
-            onblur={() => {
-                dropdownVisible = false;
-            }}
-            onkeypress={(event) => {
-                if (event.key === "Enter") {
-                    const tag = filteredTags[0];
-                    if (tag) addTag(tag)();
-                }
-            }}
-            placeholder="Filter by tags..."
-        />
-        {#if dropdownVisible}
-            <div class="tagDropdown">
-                {#each filteredTags as avaliableTag (avaliableTag)}
-                    <button
-                        class="avaliableTag"
-                        onclick={addTag(avaliableTag)}
-                        onmousedown={(e) => {
-                            // Keep input focused
-                            e.preventDefault();
-                            e.stopPropagation();
-                        }}
-                        type="button"
-                    >
-                        {avaliableTag}
-                    </button>
-                {/each}
-            </div>
-        {/if}
-    </div>
-</form>
-
-<style>
-    form {
-        display: flex;
-        flex-direction: column;
-        padding: 1.5rem;
-        gap: 0.5rem;
-        max-width: 32rem;
-        margin: 0 auto;
-    }
-
-    .tagDisplay {
-        display: flex;
-        gap: 0.4rem;
-        flex-wrap: wrap;
-        align-items: left;
-        justify-content: left;
-        position: relative;
-        width: 100%;
-        height: auto;
-        padding: 0.5rem;
-        border-radius: 0.5rem;
-        border: 2px solid #eaffeb;
-        background: none;
-        color: #eaffeb;
-        font-size: 1rem;
-    }
-    .tagInput {
-        width: 100%;
-        height: 100%;
-        background: none;
-        color: #eaffeb;
-        font-size: 1rem;
-        border: none;
-        outline: none;
-    }
-    ::placeholder {
-        color: #859a90;
-        opacity: 1;
-    }
-    .tag {
-        display: flex;
-        align-items: center;
-        border-radius: 0.25rem;
-        background-color: #2e4653;
-        color: #eaffeb;
-        font-size: 0.9rem;
-        cursor: pointer;
-        border-width: 0rem;
-    }
-    .tag img {
-        width: 1rem;
-        height: 1rem;
-        margin-left: 0.2rem;
-    }
-
-    .tagDropdown {
-        width: 100%;
-        display: flex;
-        gap: 0.4rem;
-        flex-wrap: wrap;
-        position: absolute;
-        background-color: #2e4653;
-        box-shadow: 1px 1px 0.5rem rgba(0, 0, 0, 0.5);
-        border-radius: 0.5rem;
-        overflow-y: auto;
-        max-height: 10rem;
-        top: 100%;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-
-    .avaliableTag {
-        width: 100%;
-        text-align: left;
-        background: none;
-        border: none;
-        color: #eaffeb;
-        font-size: 0.9rem;
-        margin: 0%;
-        padding: 0 0.8rem 0.4rem;
-    }
-    .avaliableTag:first-child {
-        padding-top: 0.6rem;
-        background-color: hsl(201, 26%, 60%);
-    }
-    .avaliableTag:last-child {
-        padding-bottom: 0.6rem;
-    }
-</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8267264..cd0cd98 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,7 +3,6 @@
     import defaultImg from "$lib/assets/study_space.png";
     import crossUrl from "$lib/assets/cross.svg";
     import Navbar from "$lib/components/Navbar.svelte";
-    import TagFilter from "$lib/components/inputs/TagFilter.svelte";
     import { allTags } from "$lib";
 
     const { data } = $props();
@@ -59,15 +58,54 @@
 
 <main>
     <div class="tag-filter-container">
-        <TagFilter
-            {selectedTags}
-            {tagFilter}
-            {tagFilterElem}
-            {filteredTags}
-            {dropdownVisible}
-            {deleteTag}
-            {addTag}
-        />
+        <form>
+            <div class="tagDisplay">
+                {#each selectedTags as tagName (tagName)}
+                    <button class="tag" onclick={deleteTag(tagName)} type="button">
+                        {tagName}
+                        <img src={crossUrl} alt="delete" /></button
+                    >
+                {/each}
+                <input
+                    type="text"
+                    name="tagInput"
+                    class="tagInput"
+                    bind:value={tagFilter}
+                    bind:this={tagFilterElem}
+                    onfocus={() => {
+                        dropdownVisible = true;
+                    }}
+                    onblur={() => {
+                        dropdownVisible = false;
+                    }}
+                    onkeypress={(event) => {
+                        if (event.key === "Enter") {
+                            const tag = filteredTags[0];
+                            if (tag) addTag(tag)();
+                        }
+                    }}
+                    placeholder="Search by tags..."
+                />
+                {#if dropdownVisible}
+                    <div class="tagDropdown">
+                        {#each filteredTags as avaliableTag (avaliableTag)}
+                            <button
+                                class="avaliableTag"
+                                onclick={addTag(avaliableTag)}
+                                onmousedown={(e) => {
+                                    // Keep input focused
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                }}
+                                type="button"
+                            >
+                                {avaliableTag}
+                            </button>
+                        {/each}
+                    </div>
+                {/if}
+            </div>
+        </form>
     </div>
 
     {#each filteredStudySpaces() as studySpace (studySpace.id)}
@@ -109,6 +147,94 @@
         margin-bottom: 1rem;
     }
 
+    form {
+        display: flex;
+        flex-direction: column;
+        padding: 1.5rem;
+        gap: 0.5rem;
+        max-width: 32rem;
+        margin: 0 auto;
+    }
+
+    .tagDisplay {
+        display: flex;
+        gap: 0.4rem;
+        flex-wrap: wrap;
+        align-items: left;
+        justify-content: left;
+        position: relative;
+        width: 100%;
+        height: auto;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        border: 2px solid #eaffeb;
+        background: none;
+        color: #eaffeb;
+        font-size: 1rem;
+    }
+    .tagInput {
+        width: 100%;
+        height: 100%;
+        background: none;
+        color: #eaffeb;
+        font-size: 1rem;
+        border: none;
+        outline: none;
+    }
+    ::placeholder {
+        color: #859a90;
+        opacity: 1;
+    }
+    .tag {
+        display: flex;
+        align-items: center;
+        border-radius: 0.25rem;
+        background-color: #2e4653;
+        color: #eaffeb;
+        font-size: 0.9rem;
+        cursor: pointer;
+        border-width: 0rem;
+    }
+    .tag img {
+        width: 1rem;
+        height: 1rem;
+        margin-left: 0.2rem;
+    }
+
+    .tagDropdown {
+        width: 100%;
+        display: flex;
+        gap: 0.4rem;
+        flex-wrap: wrap;
+        position: absolute;
+        background-color: #2e4653;
+        box-shadow: 1px 1px 0.5rem rgba(0, 0, 0, 0.5);
+        border-radius: 0.5rem;
+        overflow-y: auto;
+        max-height: 10rem;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .avaliableTag {
+        width: 100%;
+        text-align: left;
+        background: none;
+        border: none;
+        color: #eaffeb;
+        font-size: 0.9rem;
+        margin: 0%;
+        padding: 0 0.8rem 0.4rem;
+    }
+    .avaliableTag:first-child {
+        padding-top: 0.6rem;
+        background-color: hsl(201, 26%, 60%);
+    }
+    .avaliableTag:last-child {
+        padding-bottom: 0.6rem;
+    }
+
     @media (max-width: 20rem) {
         main {
             grid-template-columns: 1fr;