diff --git a/frontend/index.html b/frontend/index.html
index 152c458..f1320c8 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -8,5 +8,6 @@
 <body>
 <div id="app"></div>
 <script src="./src/main.ts" type="module"></script>
+<script src="./node_modules/flowbite/dist/flowbite.js"></script>
 </body>
 </html>
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 0dbc9b1..dd79459 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import {GetAniListSingleItemAndOpenModal, anime, title, anilistModal} from "./GetAniListSingleItemAndOpenModal.svelte";
+    import {GetAniListSingleItemAndOpenModal, title, anilistModal} from "./GetAniListSingleItemAndOpenModal.svelte";
     import {
         AniListSearch,
         GetAniListUserWatchingList
@@ -11,22 +11,22 @@
 
     import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
 
-    let aniSearch = ""
-    let aniListSearch: AniSearchList
-    let aniListSearchActive = false
+    // let aniSearch = ""
+    // let aniListSearch: AniSearchList
+    // let aniListSearchActive = false
     let aniListLoggedIn = false
     let aniListWatchlist: AniListCurrentUserWatchList
     let page = 1
     let perPage = 20
     const size = "xl"
 
-
-    function runAniListSearch(): void {
-        AniListSearch(aniSearch).then(result => {
-            aniListSearch = result
-            aniListSearchActive = true
-        })
-    }
+    //
+    // function runAniListSearch(): void {
+    //     AniListSearch(aniSearch).then(result => {
+    //         aniListSearch = result
+    //         aniListSearchActive = true
+    //     })
+    // }
 
     function anilistGetUserWatchlist(): void {
         GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
@@ -41,32 +41,7 @@
 <Header />
 
 <main>
-    <div class="input-box" id="aniSearch">
-        <input autocomplete="off" bind:value={aniSearch} class="input text-black" id="aniSearchInput" type="text"/>
-        <button class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800" on:click={runAniListSearch}>Search AniList</button>
-    </div>
 
-    {#if aniListSearchActive}
-        <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
-            <h1>Your Search Results</h1>
-
-            <div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
-                {#each aniListSearch.data.Page.media as media}
-                    <button on:click={() => GetAniListSingleItemAndOpenModal(media.id)} class="group">
-                        <!--                    <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">-->
-                        <div class="justify-center rounded-lg bg-gray-200">
-                            <img src={media.coverImage.large} alt="anime cover"/>
-                        </div>
-                        <h3 class="mt-4 text-sm text-white-700">{
-                            media.title.english === "" ?
-                                media.title.romaji :
-                                media.title.english
-                        }</h3>
-                    </button>
-                {/each}
-            </div>
-        </div>
-    {/if}
 
     <button class="btn" on:click={anilistGetUserWatchlist}>Login to AniList</button>
     {#if aniListLoggedIn}
diff --git a/frontend/src/Header.svelte b/frontend/src/Header.svelte
index e3b8964..5460eea 100644
--- a/frontend/src/Header.svelte
+++ b/frontend/src/Header.svelte
@@ -9,14 +9,12 @@
         <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
             <a href="#" class="flex items-center">
                 <img src={logo} class="mr-3 h-6 sm:h-9" alt="AniTrack Logo" />
-<!--                <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">AniTrack</span>-->
             </a>
             <div class="flex items-center lg:order-2">
 
                 <Search />
 
                 <a href="#" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Log in AniList</a>
-<!--                <a href="#" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Get started</a>-->
                 <button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
                     <span class="sr-only">Open main menu</span>
                     <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
@@ -25,9 +23,9 @@
             </div>
             <div class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
                 <ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
-                    <li>
-                        <a href="#" class="block py-2 pr-4 pl-3 text-white rounded bg-blue-700 lg:bg-transparent lg:text-blue-700 lg:p-0 dark:text-white" aria-current="page">Home</a>
-                    </li>
+<!--                    <li>-->
+<!--                        <a href="#" class="block py-2 pr-4 pl-3 text-white rounded bg-blue-700 lg:bg-transparent lg:text-blue-700 lg:p-0 dark:text-white" aria-current="page">Home</a>-->
+<!--                    </li>-->
 <!--                    <li>-->
 <!--                        <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Company</a>-->
 <!--                    </li>-->
diff --git a/frontend/src/Search.svelte b/frontend/src/Search.svelte
index f41d32c..6c6c6a9 100644
--- a/frontend/src/Search.svelte
+++ b/frontend/src/Search.svelte
@@ -10,6 +10,7 @@
 
     function runAniListSearch(): void {
         AniListSearch(aniSearch).then(result => {
+            console.log(result)
             aniListSearch = result
             aniListSearchActive = true
         })
@@ -19,116 +20,45 @@
 
 
 <div>
-    <div class="input-box" id="aniSearch">
-        <input autocomplete="off" bind:value={aniSearch} class="input text-black" id="aniSearchInput" type="text"/>
-        <button class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800" on:click={runAniListSearch}>Search AniList</button>
-    </div>
-
-    {#if aniListSearchActive}
-        <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
-            <h1>Your Search Results</h1>
-
-            <div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
-                {#each aniListSearch.data.Page.media as media}
-                    <button on:click={() => GetAniListSingleItemAndOpenModal(media.id)} class="group">
-                        <div class="justify-center rounded-lg bg-gray-200">
-                            <img src={media.coverImage.large} alt="anime cover"/>
-                        </div>
-                        <h3 class="mt-4 text-sm text-white-700">{
-                            media.title.english === "" ?
-                                media.title.romaji :
-                                media.title.english
-                        }</h3>
-                    </button>
-                {/each}
-            </div>
-        </div>
-    {/if}
-
-
-    <form class="max-w-md mx-auto">
+    <div class="max-w-md mx-auto">
         <div class="flex">
-            <label for="anime-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Find Anime</label>
+            <label for="anime-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Find
+                Anime</label>
             <div class="relative w-full">
-                <input type="search" id="anime-search" class="rounded-s-lg block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-e-lg border-s-gray-50 border-s-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-s-gray-700  dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500" placeholder="Search for Anime" required />
-                <button type="submit" id="aniListSearchButton" data-dropdown-toggle="aniListSearch" data-dropdown-placement="bottom"
-                        class="absolute top-0 end-0 h-full p-2.5 text-sm font-medium text-white bg-blue-700 rounded-e-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-                    <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
+                <input type="search" id="anime-search" bind:value={aniSearch}
+                       class="rounded-s-lg block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-e-lg border-s-gray-50 border-s-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-s-gray-700  dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500"
+                       placeholder="Search for Anime" required/>
+                <button id="aniListSearchButton" data-dropdown-toggle="aniListSearch"
+                        data-dropdown-placement="bottom"
+                        class="absolute top-0 end-0 h-full p-2.5 text-sm font-medium text-white bg-blue-700 rounded-e-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+                        on:click={runAniListSearch}>
+                    <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                         viewBox="0 0 20 20">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
                     </svg>
                     <span class="sr-only">Search</span>
                 </button>
             </div>
         </div>
-    </form>
+    </div>
 
     <div id="aniListSearch" class="z-10 hidden bg-white rounded-lg shadow w-60 dark:bg-gray-700">
-        <ul class="h-48 py-2 overflow-y-auto text-gray-700 dark:text-gray-200" aria-labelledby="aniListSearchButton">
-            <li>
-                <a href="#"
-                   class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
-                    <img class="w-6 h-6 me-2 rounded-full" src="/docs/images/people/profile-picture-1.jpg"
-                         alt="Jese image">
-                    Jese Leos
-                </a>
-            </li>
-            <li>
-                <a href="#"
-                   class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
-                    <img class="w-6 h-6 me-2 rounded-full" src="/docs/images/people/profile-picture-2.jpg"
-                         alt="Jese image">
-                    Robert Gough
-                </a>
-            </li>
-            <li>
-                <a href="#"
-                   class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
-                    <img class="w-6 h-6 me-2 rounded-full" src="/docs/images/people/profile-picture-3.jpg"
-                         alt="Jese image">
-                    Bonnie Green
-                </a>
-            </li>
-            <li>
-                <a href="#"
-                   class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
-                    <img class="w-6 h-6 me-2 rounded-full" src="/docs/images/people/profile-picture-4.jpg"
-                         alt="Jese image">
-                    Leslie Livingston
-                </a>
-            </li>
-            <li>
-                <a href="#"
-                   class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
-                    <img class="w-6 h-6 me-2 rounded-full" src="/docs/images/people/profile-picture-5.jpg"
-                         alt="Jese image">
-                    Michael Gough
-                </a>
-            </li>
-            <li>
-                <a href="#"
-                   class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
-                    <img class="w-6 h-6 me-2 rounded-full" src="/docs/images/people/profile-picture-2.jpg"
-                         alt="Jese image">
-                    Joseph Mcfall
-                </a>
-            </li>
-            <li>
-                <a href="#"
-                   class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
-                    <img class="w-6 h-6 me-2 rounded-full" src="/docs/images/people/profile-picture-3.jpg"
-                         alt="Jese image">
-                    Roberta Casas
-                </a>
-            </li>
-            <li>
-                <a href="#"
-                   class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
-                    <img class="w-6 h-6 me-2 rounded-full" src="/docs/images/people/profile-picture-1.jpg"
-                         alt="Jese image">
-                    Neil Sims
-                </a>
-            </li>
-        </ul>
+        {#if aniListSearchActive}
+            <ul class="h-48 py-2 overflow-y-auto text-gray-700 dark:text-gray-200"
+                aria-labelledby="aniListSearchButton">
+                {#each aniListSearch.data.Page.media as media}
+                    <li>
+                        <button on:click={() => GetAniListSingleItemAndOpenModal(media.id)}
+                                class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+                            <img class="w-6 h-6 me-2 rounded-full" src={media.coverImage.large}
+                                 alt="{media.title.english === '' || media.title.english === null ?  media.title.romaji : media.title.english} Cover">
+                            <h3>{media.title.english === '' || media.title.english === null  ? media.title.romaji : media.title.english }</h3>
+                        </button>
+                    </li>
+                {/each}
+            </ul>
+        {/if}
         <a href="#"
            class="flex items-center p-3 text-sm font-medium text-blue-600 border-t border-gray-200 rounded-b-lg bg-gray-50 dark:border-gray-600 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-blue-500 hover:underline">
             <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
