From f5001cff048159250e85ac9b5f8263da1f246b50 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jokeefe@fastmail.com>
Date: Wed, 4 Sep 2024 12:05:41 -0400
Subject: [PATCH] changed from modal to client-side router

---
 .../Simkl/Get Items/Get Anime Full Info.bru   |   2 +-
 frontend/package.json                         |   2 +-
 frontend/src/App.svelte                       | 103 +++---------
 .../{ => helperComponents}/AvatarMenu.svelte  |   4 +-
 .../GlobalVariablesAndHelperFunctions.svelte  |  15 +-
 .../src/{ => helperComponents}/Header.svelte  |  21 ++-
 .../{ => helperComponents}/Pagination.svelte  |   6 +-
 .../src/{ => helperComponents}/Search.svelte  |  22 ++-
 frontend/src/helperComponents/Spinner.svelte  |  11 ++
 .../src/helperComponents/WatchList.svelte     |  68 ++++++++
 frontend/src/helperFunctions/loader.ts        |  18 ++
 frontend/src/modal/Modal.svelte               | 155 ------------------
 frontend/src/modal/Modal.svelte.d.ts          |  77 ---------
 .../Anime.svelte}                             |  38 ++---
 frontend/src/routes/Home.svelte               |  25 +++
 frontend/src/star-rating/Stars.svelte         |  63 +++++++
 .../src/star-rating/components/Star.svelte    |  21 +++
 frontend/tailwind.config.js                   |  55 +++++--
 frontend/wailsjs/runtime/package.json         |   0
 frontend/wailsjs/runtime/runtime.d.ts         |   0
 frontend/wailsjs/runtime/runtime.js           |   0
 21 files changed, 327 insertions(+), 379 deletions(-)
 rename frontend/src/{ => helperComponents}/AvatarMenu.svelte (96%)
 rename frontend/src/{ => helperComponents}/GlobalVariablesAndHelperFunctions.svelte (92%)
 rename frontend/src/{ => helperComponents}/Header.svelte (89%)
 rename frontend/src/{ => helperComponents}/Pagination.svelte (97%)
 rename frontend/src/{ => helperComponents}/Search.svelte (82%)
 create mode 100644 frontend/src/helperComponents/Spinner.svelte
 create mode 100644 frontend/src/helperComponents/WatchList.svelte
 create mode 100644 frontend/src/helperFunctions/loader.ts
 delete mode 100644 frontend/src/modal/Modal.svelte
 delete mode 100644 frontend/src/modal/Modal.svelte.d.ts
 rename frontend/src/{ChangeDataDialogue.svelte => routes/Anime.svelte} (97%)
 create mode 100644 frontend/src/routes/Home.svelte
 create mode 100644 frontend/src/star-rating/Stars.svelte
 create mode 100644 frontend/src/star-rating/components/Star.svelte
 mode change 100755 => 100644 frontend/wailsjs/runtime/package.json
 mode change 100755 => 100644 frontend/wailsjs/runtime/runtime.d.ts
 mode change 100755 => 100644 frontend/wailsjs/runtime/runtime.js

diff --git a/bruno/AniTrack/Simkl/Get Items/Get Anime Full Info.bru b/bruno/AniTrack/Simkl/Get Items/Get Anime Full Info.bru
index 6a19d27..2e28fab 100644
--- a/bruno/AniTrack/Simkl/Get Items/Get Anime Full Info.bru	
+++ b/bruno/AniTrack/Simkl/Get Items/Get Anime Full Info.bru	
@@ -5,7 +5,7 @@ meta {
 }
 
 get {
-  url: https://api.simkl.com/anime/40398?extended=full
+  url: https://api.simkl.com/anime/862523?extended=full
   body: none
   auth: none
 }
diff --git a/frontend/package.json b/frontend/package.json
index 733b771..f78b56d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,7 @@
     "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
     "svelte-preprocess": "^4.10.7",
+    "svelte-spa-router": "^4.0.1",
     "tailwind-merge": "^2.4.0",
     "tailwindcss": "^3.4.6",
     "tslib": "^2.4.0",
@@ -24,7 +25,6 @@
     "vite": "^3.0.7"
   },
   "dependencies": {
-    "@ernane/svelte-star-rating": "^1.1.7",
     "@popperjs/core": "^2.11.8",
     "flowbite": "^2.4.1",
     "flowbite-svelte": "^0.46.15",
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 6bb1ec9..d62bcc8 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
     import {
         aniListLoggedIn,
-        anilistModal,
         aniListPrimary,
         aniListUser,
         aniListWatchlist,
         animePerPage,
-        GetAniListSingleItemAndOpenModal,
         malLoggedIn,
         malPrimary,
         malUser,
@@ -14,10 +12,11 @@
         simklLoggedIn,
         simklUser,
         simklWatchList,
-        title,
         watchListPage,
         simklPrimary,
-    } from "./GlobalVariablesAndHelperFunctions.svelte";
+        aniListAnime,
+        GetAniListSingleItem,
+    } from "./helperComponents/GlobalVariablesAndHelperFunctions.svelte";
     import {
         CheckIfAniListLoggedIn,
         CheckIfMyAnimeListLoggedIn,
@@ -30,24 +29,20 @@
         SimklGetUserWatchlist,
     } from "../wailsjs/go/main/App";
     import {MediaListSort} from "./anilist/types/AniListTypes";
-    import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"
-    import Header from "./Header.svelte";
-    import {Rating} from "flowbite-svelte";
-    import {default as Modal} from "./modal/Modal.svelte"
-    import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
     import {onMount} from "svelte";
-    import Pagination from "./Pagination.svelte";
+    import Router from "svelte-spa-router"
+    import Home from "./routes/Home.svelte";
+    import {wrap} from "svelte-spa-router/wrap";
+    import Spinner from "./helperComponents/Spinner.svelte";
+    import Anime from "./routes/Anime.svelte";
+    import Header from "./helperComponents/Header.svelte";
 
 
-    let isAniListLoggedIn: boolean
     let isAniListPrimary: boolean
     let isMalPrimary: boolean
     let isSimklPrimary: boolean
-    let aniListWatchListLoaded: AniListCurrentUserWatchList
 
-    aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
     aniListPrimary.subscribe((value) => isAniListPrimary = value)
-    aniListWatchlist.subscribe((value) => aniListWatchListLoaded = value)
     malPrimary.subscribe((value) => isMalPrimary = value)
     simklPrimary.subscribe(value => isSimklPrimary = value)
 
@@ -56,7 +51,6 @@
     let perPage: number
     watchListPage.subscribe(value => page = value)
     animePerPage.subscribe(value => perPage = value)
-    const size = "xl"
 
     onMount(async () => {
         await CheckIfAniListLoggedIn().then(loggedIn => {
@@ -113,67 +107,18 @@
     })
 </script>
 
-<Header/>
-
-<main>
-    {#if isAniListLoggedIn}
-        <div class="mx-auto max-w-2xl p-4 sm:p-6 lg:max-w-7xl lg:px-8 relative items-center">
-            <div id="spinner" role="status" class="fixed hidden -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2">
-                <svg aria-hidden="true"
-                     class="inline w-16 h-16 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
-                     viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-                          fill="currentColor"/>
-                    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-                          fill="currentFill"/>
-                </svg>
-                <span class="sr-only">Loading...</span>
-            </div>
-            <h1 class="text-left text-xl font-bold mb-4">Your AniList WatchList</h1>
-
-            <Pagination/>
-
-            <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 aniListWatchListLoaded.data.Page.mediaList as media}
-                    <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7">
-                        <div class="flex flex-col items-center group">
-                            <button on:click={() => {
-                                let spinner = document.querySelector("#spinner")
-                                spinner.classList.toggle("hidden", false)
-                                GetAniListSingleItemAndOpenModal(media.media.id, true).then(() => spinner.classList.toggle("hidden", true))
-                            }}>
-                                <img class="rounded-lg" src={media.media.coverImage.large} alt={
-                                media.media.title.english === "" ?
-                                    media.media.title.romaji :
-                                    media.media.title.english
-                            }/>
-                            </button>
-                            <Rating id="anime-rating" total={5} size={35} rating={media.score/2.0}/>
-                            <button class="mt-4 text-md font-semibold text-white-700"
-                                    on:click={() => GetAniListSingleItemAndOpenModal(media.media.id, true)}>
-                                {
-                                    media.media.title.english === "" ?
-                                        media.media.title.romaji :
-                                        media.media.title.english
-                                }
-                            </button>
-                            <p class="mt-1 text-lg font-medium text-white-900">{media.progress}
-                                / {media.media.nextAiringEpisode.episode !== 0 ?
-                                    media.media.nextAiringEpisode.episode - 1 : media.media.episodes}</p>
-                            {#if media.media.episodes > 0}
-                                <p class="mt-1 text-lg font-medium text-white-900">Total
-                                    Episodes: {media.media.episodes}</p>
-                            {/if}
-                        </div>
-                    </div>
-                {/each}
-            </div>
-
-            <Pagination/>
-        </div>
-    {/if}
-
-    <Modal title={$title} bind:open={$anilistModal} {size} autoclose={false}>
-        <ChangeDataDialogue/>
-    </Modal>
-</main>
+<Header />
+<Router routes={{
+    '/': Home,
+    '/anime/:id': wrap({
+        component: Anime,
+        conditions: [
+            async (detail) => {
+                await GetAniListSingleItem(Number(detail.params.id), true)
+                return Object.keys($aniListAnime).length!==0
+            },
+        ],
+        loadingComponent: Spinner
+    }),
+    // '*': "Not Found"
+}} />
diff --git a/frontend/src/AvatarMenu.svelte b/frontend/src/helperComponents/AvatarMenu.svelte
similarity index 96%
rename from frontend/src/AvatarMenu.svelte
rename to frontend/src/helperComponents/AvatarMenu.svelte
index e1880bc..cd886d4 100644
--- a/frontend/src/AvatarMenu.svelte
+++ b/frontend/src/helperComponents/AvatarMenu.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 
     import {Avatar} from "flowbite-svelte";
-    import type {AniListUser} from "./anilist/types/AniListTypes";
+    import type {AniListUser} from "../anilist/types/AniListTypes";
     import {aniListLoggedIn, aniListUser, malLoggedIn, simklLoggedIn, logoutOfAniList, logoutOfMAL, logoutOfSimkl} from "./GlobalVariablesAndHelperFunctions.svelte"
-    import * as runtime from "../wailsjs/runtime";
+    import * as runtime from "../../wailsjs/runtime";
 
     let currentAniListUser: AniListUser
     let isAniListLoggedIn: boolean
diff --git a/frontend/src/GlobalVariablesAndHelperFunctions.svelte b/frontend/src/helperComponents/GlobalVariablesAndHelperFunctions.svelte
similarity index 92%
rename from frontend/src/GlobalVariablesAndHelperFunctions.svelte
rename to frontend/src/helperComponents/GlobalVariablesAndHelperFunctions.svelte
index f1ecccb..a4a3817 100644
--- a/frontend/src/GlobalVariablesAndHelperFunctions.svelte
+++ b/frontend/src/helperComponents/GlobalVariablesAndHelperFunctions.svelte
@@ -11,19 +11,18 @@
         LogoutSimkl,
         SimklGetUserWatchlist,
         SimklSearch
-    } from "../wailsjs/go/main/App";
+    } from "../../wailsjs/go/main/App";
     import type {
         AniListCurrentUserWatchList,
         AniListGetSingleAnime
-    } from "./anilist/types/AniListCurrentUserWatchListType.js";
+    } from "../anilist/types/AniListCurrentUserWatchListType.js";
     import {writable} from 'svelte/store'
-    import type {SimklAnime, SimklUser, SimklWatchList} from "./simkl/types/simklTypes";
-    import {type AniListUser, MediaListSort} from "./anilist/types/AniListTypes";
-    import type {MALAnime, MALWatchlist, MyAnimeListUser} from "./mal/types/MALTypes";
+    import type {SimklAnime, SimklUser, SimklWatchList} from "../simkl/types/simklTypes";
+    import {type AniListUser, MediaListSort} from "../anilist/types/AniListTypes";
+    import type {MALAnime, MALWatchlist, MyAnimeListUser} from "../mal/types/MALTypes";
 
     export let aniListAnime = writable({} as AniListGetSingleAnime)
     export let title = writable("")
-    export let anilistModal = writable(false);
     export let aniListLoggedIn = writable(false)
     export let simklLoggedIn = writable(false)
     export let malLoggedIn = writable(false)
@@ -38,6 +37,7 @@
     export let malWatchList = writable({} as MALWatchlist)
     export let malAnime = writable({} as MALAnime)
     export let simklAnime = writable({} as SimklAnime)
+    export let loading = writable(false)
 
     export let watchListPage = writable(1)
     export let animePerPage = writable(20)
@@ -60,7 +60,7 @@
     aniListAnime.subscribe(value => currentAniListAnime = value)
 
 
-    export async function GetAniListSingleItemAndOpenModal(aniId: number, login: boolean): Promise<""> {
+    export async function GetAniListSingleItem(aniId: number, login: boolean): Promise<""> {
         await GetAniListItem(aniId, login).then(aniListResult => {
             let finalResult: AniListGetSingleAnime
             finalResult = aniListResult
@@ -92,7 +92,6 @@
                 simklAnime.set(value)
             })
         }
-        anilistModal.set(true)
         return ""
     }
 
diff --git a/frontend/src/Header.svelte b/frontend/src/helperComponents/Header.svelte
similarity index 89%
rename from frontend/src/Header.svelte
rename to frontend/src/helperComponents/Header.svelte
index 30d5d22..d0a738a 100644
--- a/frontend/src/Header.svelte
+++ b/frontend/src/helperComponents/Header.svelte
@@ -9,13 +9,14 @@
         malLoggedIn,
         malUser,
         simklLoggedIn,
-        simklUser
+        simklUser,
     } from "./GlobalVariablesAndHelperFunctions.svelte"
-    import type {AniListUser} from "./anilist/types/AniListTypes";
-    import type {SimklUser} from "./simkl/types/simklTypes";
-    import type {MyAnimeListUser} from "./mal/types/MALTypes";
+    import type {AniListUser} from "../anilist/types/AniListTypes";
+    import type {SimklUser} from "../simkl/types/simklTypes";
+    import type {MyAnimeListUser} from "../mal/types/MALTypes";
     import AvatarMenu from "./AvatarMenu.svelte";
-    import logo from "./assets/images/AniTrackLogo.svg"
+    import logo from "../assets/images/AniTrackLogo.svg"
+    import {location, pop} from "svelte-spa-router";
 
     let isAniListLoggedIn: boolean
     let isSimklLoggedIn: boolean
@@ -30,12 +31,20 @@
     aniListUser.subscribe((value) => currentAniListUser = value)
     simklUser.subscribe((value) => currentSimklUser = value)
     malUser.subscribe((value) => currentMALUser = value)
+
+    let currentLocation: any
+    location.subscribe(value => currentLocation = value)
+    console.log(currentLocation)
 </script>
 
 <nav class="bg-white border-gray-200 dark:bg-gray-900">
     <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
         <div class="flex items-center space-x-3 rtl:space-x-reverse">
-            <img src={logo} class="h-8" alt="AniTrack Logo"/>
+            {#if currentLocation === "/"}
+                <a href="/"><img src={logo} class="h-8" alt="AniTrack Logo"/></a>
+            {:else}
+                <button on:click={() => pop()}><img src={logo} class="h-8" alt="AniTrack Logo"/></button>
+            {/if}
         </div>
         <div class="flex items-center min-[950px]:order-2 space-x-3 min-[950px]:space-x-0 rtl:space-x-reverse">
             <div class="min-[950px]:block min-[950px]:mr-4">
diff --git a/frontend/src/Pagination.svelte b/frontend/src/helperComponents/Pagination.svelte
similarity index 97%
rename from frontend/src/Pagination.svelte
rename to frontend/src/helperComponents/Pagination.svelte
index 8b4235b..5ce8a23 100644
--- a/frontend/src/Pagination.svelte
+++ b/frontend/src/helperComponents/Pagination.svelte
@@ -6,9 +6,9 @@
         watchListPage,
     } from "./GlobalVariablesAndHelperFunctions.svelte";
 
-    import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"
-    import {GetAniListUserWatchingList} from "../wailsjs/go/main/App";
-    import {MediaListSort} from "./anilist/types/AniListTypes";
+    import type {AniListCurrentUserWatchList} from "../anilist/types/AniListCurrentUserWatchListType"
+    import {GetAniListUserWatchingList} from "../../wailsjs/go/main/App";
+    import {MediaListSort} from "../anilist/types/AniListTypes";
 
     let aniListWatchListLoaded: AniListCurrentUserWatchList
     let page: number
diff --git a/frontend/src/Search.svelte b/frontend/src/helperComponents/Search.svelte
similarity index 82%
rename from frontend/src/Search.svelte
rename to frontend/src/helperComponents/Search.svelte
index b108e50..f16d0cd 100644
--- a/frontend/src/Search.svelte
+++ b/frontend/src/helperComponents/Search.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 
-    import {AniListSearch} from "../wailsjs/go/main/App";
-    import type {AniSearchList} from "./anilist/types/AniListTypes";
-    import {GetAniListSingleItemAndOpenModal} from "./GlobalVariablesAndHelperFunctions.svelte";
+    import {AniListSearch} from "../../wailsjs/go/main/App";
+    import type {AniSearchList} from "../anilist/types/AniListTypes";
+    import {GetAniListSingleItem, loading} from "./GlobalVariablesAndHelperFunctions.svelte";
 
     let aniSearch = ""
     let aniListSearch: AniSearchList
@@ -55,18 +55,22 @@
                     <li class="w-full">
                         <div class="flex w-full items-start p-1 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white rounded-lg">
                             <button on:click={() => {
-                                let spinner = document.querySelector("#spinner")
-                                spinner.classList.toggle("hidden", false)
-                                GetAniListSingleItemAndOpenModal(media.id, false).then(() => spinner.classList.toggle("hidden", true))
+                                loading.set(true)
+                                GetAniListSingleItem(media.id, false).then(() => {
+                                    loading.set(false)
+                                    searchDropdown()
+                                })
                             }}
                                     >
                                 <img class="rounded-bl-lg rounded-tl-lg max-w-24 max-h-24" src={media.coverImage.large}
                                      alt="{media.title.english === '' || media.title.english === null ?  media.title.romaji : media.title.english} Cover">
                             </button>
                                 <button class="rounded-bl-lg rounded-tl-lg w-full h-24" on:click={() => {
-                                let spinner = document.querySelector("#spinner")
-                                spinner.classList.toggle("hidden", false)
-                                GetAniListSingleItemAndOpenModal(media.id, false).then(() => spinner.classList.toggle("hidden", true))
+                                loading.set(true)
+                                GetAniListSingleItem(media.id, false).then(() => {
+                                    loading.set(false)
+                                    searchDropdown()
+                                })
                             }} >{media.title.english === '' || media.title.english === null ? media.title.romaji : media.title.english }</button>
                         </div>
                     </li>
diff --git a/frontend/src/helperComponents/Spinner.svelte b/frontend/src/helperComponents/Spinner.svelte
new file mode 100644
index 0000000..5af4578
--- /dev/null
+++ b/frontend/src/helperComponents/Spinner.svelte
@@ -0,0 +1,11 @@
+<div id="spinner" role="status" class="fixed -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2">
+    <svg aria-hidden="true"
+         class="inline w-16 h-16 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
+         viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor"/>
+        <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill"/>
+    </svg>
+    <span class="sr-only">Loading...</span>
+</div>
\ No newline at end of file
diff --git a/frontend/src/helperComponents/WatchList.svelte b/frontend/src/helperComponents/WatchList.svelte
new file mode 100644
index 0000000..77cccff
--- /dev/null
+++ b/frontend/src/helperComponents/WatchList.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import {
+        aniListLoggedIn,
+        aniListWatchlist,
+        GetAniListSingleItem,
+        loading,
+    } from "./GlobalVariablesAndHelperFunctions.svelte";
+    import {push} from "svelte-spa-router";
+    import type {AniListCurrentUserWatchList} from "../anilist/types/AniListCurrentUserWatchListType"
+    import {Rating} from "flowbite-svelte";
+    import loader from '../helperFunctions/loader'
+
+
+    let isAniListLoggedIn: boolean
+    let aniListWatchListLoaded: AniListCurrentUserWatchList
+
+    aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
+    aniListWatchlist.subscribe((value) => aniListWatchListLoaded = value)
+
+</script>
+
+<div>
+    {#if isAniListLoggedIn}
+        <div class="mx-auto max-w-2xl p-4 sm:p-6 lg:max-w-7xl lg:px-8 relative items-center">
+            <h1 class="text-left text-xl font-bold mb-4">Your AniList WatchList</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 aniListWatchListLoaded.data.Page.mediaList as media}
+                    <div use:loader={loading} class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7">
+                        <div class="flex flex-col items-center group">
+                            <button on:click={() => {
+                                push(`#/anime/${media.media.id}`)
+                                // loading.set(true)
+                                // GetAniListSingleItem(media.media.id, true).then(() => {
+                                //     loading.set(false)
+                                //
+                                // })
+                            }}
+                            >
+                                <img class="rounded-lg" src={media.media.coverImage.large} alt={
+                                media.media.title.english === "" ?
+                                    media.media.title.romaji :
+                                    media.media.title.english
+                            }/>
+                            </button>
+                            <Rating id="anime-rating" total={5} size={35} rating={media.score/2.0}/>
+                            <button class="mt-4 text-md font-semibold text-white-700"
+                                    on:click={() => GetAniListSingleItem(media.media.id, true)}>
+                                {
+                                    media.media.title.english === "" ?
+                                        media.media.title.romaji :
+                                        media.media.title.english
+                                }
+                            </button>
+                            <p class="mt-1 text-lg font-medium text-white-900">{media.progress}
+                                / {media.media.nextAiringEpisode.episode !== 0 ?
+                                    media.media.nextAiringEpisode.episode - 1 : media.media.episodes}</p>
+                            {#if media.media.episodes > 0}
+                                <p class="mt-1 text-lg font-medium text-white-900">Total
+                                    Episodes: {media.media.episodes}</p>
+                            {/if}
+                        </div>
+                    </div>
+                {/each}
+            </div>
+        </div>
+    {/if}
+</div>
diff --git a/frontend/src/helperFunctions/loader.ts b/frontend/src/helperFunctions/loader.ts
new file mode 100644
index 0000000..5bb97fb
--- /dev/null
+++ b/frontend/src/helperFunctions/loader.ts
@@ -0,0 +1,18 @@
+import Spinner from '../helperComponents/Spinner.svelte';
+
+export default (node: any, loading: any) => {
+    let Spin: any
+    loading.subscribe((loading: any) => {
+        if(loading){
+            Spin = new Spinner({
+                target: node,
+                intro: true
+            })
+        } else {
+            if(Spin){
+                Spin?.$destroy?.()
+                Spin = undefined;
+            }
+        }
+    })
+}
\ No newline at end of file
diff --git a/frontend/src/modal/Modal.svelte b/frontend/src/modal/Modal.svelte
deleted file mode 100644
index 020edc9..0000000
--- a/frontend/src/modal/Modal.svelte
+++ /dev/null
@@ -1,155 +0,0 @@
-<script>import { twMerge } from "tailwind-merge";
-import { Frame } from "flowbite-svelte";
-import { createEventDispatcher } from "svelte";
-import {CloseButton} from "flowbite-svelte";
-import focusTrap from "../../node_modules/flowbite-svelte/dist/utils/focusTrap.js";
-export let open = false;
-export let title = "";
-export let size = "md";
-export let color = "default";
-export let placement = "center";
-export let autoclose = false;
-export let outsideclose = false;
-export let dismissable = true;
-export let backdropClass = "fixed inset-0 z-20 bg-gray-900 bg-opacity-50 dark:bg-opacity-80";
-export let classBackdrop = void 0;
-export let dialogClass = "fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-30 w-full p-4 flex";
-export let classDialog = void 0;
-export let defaultClass = "relative flex flex-col mx-auto";
-export let headerClass = "flex justify-between items-center p-4 md:p-5 rounded-t-lg";
-export let classHeader = void 0;
-export let bodyClass = "p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain";
-export let classBody = void 0;
-export let footerClass = "flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg";
-export let classFooter = void 0;
-const dispatch = createEventDispatcher();
-$: dispatch(open ? "open" : "close");
-function prepareFocus(node) {
-  const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);
-  let n;
-  while (n = walker.nextNode()) {
-    if (n instanceof HTMLElement) {
-      const el = n;
-      const [x, y] = isScrollable(el);
-      if (x || y) el.tabIndex = 0;
-    }
-  }
-  node.focus();
-}
-const getPlacementClasses = (placement2) => {
-  switch (placement2) {
-    case "top-left":
-      return ["justify-start", "items-start"];
-    case "top-center":
-      return ["justify-center", "items-start"];
-    case "top-right":
-      return ["justify-end", "items-start"];
-    case "center-left":
-      return ["justify-start", "items-center"];
-    case "center":
-      return ["justify-center", "items-center"];
-    case "center-right":
-      return ["justify-end", "items-center"];
-    case "bottom-left":
-      return ["justify-start", "items-end"];
-    case "bottom-center":
-      return ["justify-center", "items-end"];
-    case "bottom-right":
-      return ["justify-end", "items-end"];
-    default:
-      return ["justify-center", "items-center"];
-  }
-};
-const sizes = {
-  xs: "max-w-md",
-  sm: "max-w-lg",
-  md: "max-w-2xl",
-  lg: "max-w-4xl",
-  xl: "max-w-6xl"
-};
-const onAutoClose = (e) => {
-  const target = e.target;
-  if (autoclose && target?.tagName === "BUTTON") hide(e);
-};
-const onOutsideClose = (e) => {
-  const target = e.target;
-  if (outsideclose && target === e.currentTarget) hide(e);
-};
-const hide = (e) => {
-  e.preventDefault();
-  open = false;
-};
-const isScrollable = (e) => [e.scrollWidth > e.clientWidth && ["scroll", "auto"].indexOf(getComputedStyle(e).overflowX) >= 0, e.scrollHeight > e.clientHeight && ["scroll", "auto"].indexOf(getComputedStyle(e).overflowY) >= 0];
-function handleKeys(e) {
-  if (e.key === "Escape" && dismissable) return hide(e);
-}
-$: backdropCls = twMerge(backdropClass, classBackdrop);
-$: dialogCls = twMerge(dialogClass, classDialog, getPlacementClasses(placement));
-$: frameCls = twMerge(defaultClass, "w-full divide-y", $$props.class);
-$: headerCls = twMerge(headerClass, classHeader);
-$: bodyCls = twMerge(bodyClass, classBody);
-$: footerCls = twMerge(footerClass, classFooter);
-</script>
-
-{#if open}
-  <!-- backdrop -->
-  <div class={backdropCls}></div>
-  <!-- dialog -->
-  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-  <div on:keydown={handleKeys} on:wheel|preventDefault|nonpassive use:prepareFocus use:focusTrap on:click={onAutoClose} on:mousedown={onOutsideClose} class={dialogCls} tabindex="-1" aria-modal="true" role="dialog">
-    <div class="flex relative {sizes[size]} w-full max-h-full">
-      <!-- Modal content -->
-      <Frame rounded shadow {...$$restProps} class={frameCls} {color}>
-        <!-- Modal header -->
-        {#if $$slots.header || title}
-          <Frame class={headerCls} {color}>
-            <slot name="header">
-              <h3 class="text-xl font-semibold {color === 'default' ? '' : 'text-gray-900 dark:text-white'} p-0">
-                {title}
-              </h3>
-            </slot>
-            {#if dismissable}<CloseButton name="Close modal" {color} on:click={hide} />{/if}
-          </Frame>
-        {/if}
-        <!-- Modal body -->
-        <div class={bodyCls} role="document" on:keydown|stopPropagation={handleKeys} on:wheel|stopPropagation|passive>
-          {#if dismissable && !$$slots.header && !title}
-            <CloseButton name="Close modal" class="absolute top-3 end-2.5" {color} on:click={hide} />
-          {/if}
-          <slot></slot>
-        </div>
-        <!-- Modal footer -->
-        {#if $$slots.footer}
-          <Frame class={footerCls} {color}>
-            <slot name="footer"></slot>
-          </Frame>
-        {/if}
-      </Frame>
-    </div>
-  </div>
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let open: boolean = false;
-@prop export let title: string = '';
-@prop export let size: SizeType = 'md';
-@prop export let color: ComponentProps<Frame>['color'] = 'default';
-@prop export let placement: ModalPlacementType = 'center';
-@prop export let autoclose: boolean = false;
-@prop export let outsideclose: boolean = false;
-@prop export let dismissable: boolean = true;
-@prop export let backdropClass: string = 'fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
-@prop export let classBackdrop: string | undefined = undefined;
-@prop export let dialogClass: string = 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
-@prop export let classDialog: string | undefined = undefined;
-@prop export let defaultClass: string = 'relative flex flex-col mx-auto';
-@prop export let headerClass: string = 'flex justify-between items-center p-4 md:p-5 rounded-t-lg';
-@prop export let classHeader: string | undefined = undefined;
-@prop export let bodyClass: string = 'p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain';
-@prop export let classBody: string | undefined = undefined;
-@prop export let footerClass: string = 'flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg';
-@prop export let classFooter: string | undefined = undefined;
--->
diff --git a/frontend/src/modal/Modal.svelte.d.ts b/frontend/src/modal/Modal.svelte.d.ts
deleted file mode 100644
index 28eb9b7..0000000
--- a/frontend/src/modal/Modal.svelte.d.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Dismissable, SizeType } from '../types';
-import type { ModalPlacementType } from '../types';
-declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
-        tag?: string;
-        color?: import("../utils/Frame.svelte").FrameColor;
-        rounded?: boolean;
-        border?: boolean;
-        shadow?: boolean;
-        node?: HTMLElement | undefined;
-        use?: import("svelte/action").Action<HTMLElement, any>;
-        options?: object;
-        class?: string;
-        role?: string;
-        open?: boolean;
-        transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
-        params?: any;
-    } & Dismissable & {
-        open?: boolean;
-        title?: string;
-        size?: SizeType;
-        placement?: ModalPlacementType;
-        autoclose?: boolean;
-        outsideclose?: boolean;
-        backdropClass?: string;
-        classBackdrop?: string;
-        dialogClass?: string;
-        classDialog?: string;
-        defaultClass?: string;
-        headerClass?: string;
-        classHeader?: string;
-        bodyClass?: string;
-        classBody?: string;
-        footerClass?: string;
-        classFooter?: string;
-    };
-    events: {
-        wheel: WheelEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        header: {};
-        default: {};
-        footer: {};
-    };
-};
-export type ModalProps = typeof __propDef.props;
-export type ModalEvents = typeof __propDef.events;
-export type ModalSlots = typeof __propDef.slots;
-/**
- * [Go to docs](https://flowbite-svelte.com/)
- * ## Props
- * @prop export let open: boolean = false;
- * @prop export let title: string = '';
- * @prop export let size: SizeType = 'md';
- * @prop export let color: ComponentProps<Frame>['color'] = 'default';
- * @prop export let placement: ModalPlacementType = 'center';
- * @prop export let autoclose: boolean = false;
- * @prop export let outsideclose: boolean = false;
- * @prop export let dismissable: boolean = true;
- * @prop export let backdropClass: string = 'fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
- * @prop export let classBackdrop: string | undefined = undefined;
- * @prop export let dialogClass: string = 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
- * @prop export let classDialog: string | undefined = undefined;
- * @prop export let defaultClass: string = 'relative flex flex-col mx-auto';
- * @prop export let headerClass: string = 'flex justify-between items-center p-4 md:p-5 rounded-t-lg';
- * @prop export let classHeader: string | undefined = undefined;
- * @prop export let bodyClass: string = 'p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain';
- * @prop export let classBody: string | undefined = undefined;
- * @prop export let footerClass: string = 'flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg';
- * @prop export let classFooter: string | undefined = undefined;
- */
-export default class Modal extends SvelteComponentTyped<ModalProps, ModalEvents, ModalSlots> {
-}
-export {};
diff --git a/frontend/src/ChangeDataDialogue.svelte b/frontend/src/routes/Anime.svelte
similarity index 97%
rename from frontend/src/ChangeDataDialogue.svelte
rename to frontend/src/routes/Anime.svelte
index 2f333c2..8f35f3d 100644
--- a/frontend/src/ChangeDataDialogue.svelte
+++ b/frontend/src/routes/Anime.svelte
@@ -1,29 +1,29 @@
 <script lang="ts">
     import {
-        anilistModal,
         aniListLoggedIn,
         simklLoggedIn,
         malLoggedIn,
         malAnime,
         simklAnime,
         aniListAnime,
-    } from "./GlobalVariablesAndHelperFunctions.svelte";
+    } from "../helperComponents/GlobalVariablesAndHelperFunctions.svelte";
     import {Button} from "flowbite-svelte";
     // @ts-ignore
-    import StarRatting from "@ernane/svelte-star-rating"
+    import StarRatting from "../star-rating/Stars.svelte"
     import moment from 'moment'
     import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';
     import { writable } from 'svelte/store';
-    import type {SimklAnime} from "./simkl/types/simklTypes";
+    import type {SimklAnime} from "../simkl/types/simklTypes";
     import {
         AniListUpdateEntry, MyAnimeListUpdate,
         SimklSyncEpisodes,
         SimklSyncRating,
         SimklSyncStatus
-    } from "../wailsjs/go/main/App";
-    import type {MALAnime, MALUploadStatus, MyListStatus} from "./mal/types/MALTypes";
-    import type {AniListUpdateVariables} from "./anilist/types/AniListTypes";
-    import type {AniListGetSingleAnime} from "./anilist/types/AniListCurrentUserWatchListType";
+    } from "../../wailsjs/go/main/App";
+    import type {MALAnime, MALUploadStatus, MyListStatus} from "../mal/types/MALTypes";
+    import type {AniListUpdateVariables} from "../anilist/types/AniListTypes";
+    import type {AniListGetSingleAnime} from "../anilist/types/AniListCurrentUserWatchListType";
+    import {pop} from "svelte-spa-router";
 
     let isAniListLoggedIn: boolean
     let isMalLoggedIn: boolean
@@ -134,7 +134,6 @@
     const sortKey = writable('service'); // default sort key
     const sortDirection = writable(1); // default sort direction (ascending)
     const sortItems = writable(tableItems.slice()); // make a copy of the items array
-    console.log(tableItems[0])
 
     // Define a function to sort the items
     const sortTable = (key: any) => {
@@ -177,10 +176,6 @@
         10: "Masterpiece",
     }
 
-    const hide = () => {
-        anilistModal.set(false)
-    };
-
     const title = currentAniListAnime.data.MediaList.media.title.english !== "" ?
         currentAniListAnime.data.MediaList.media.title.english :
         currentAniListAnime.data.MediaList.media.title.romaji
@@ -195,7 +190,8 @@
         },
         score: currentAniListAnime.data.MediaList.score / 2,
         showScore: false,
-        name: "",
+        name: "rating",
+        scoreFormat: function(){ return `(${this.score.toFixed(0)}/${this.countStars})` },
         starConfig: {
             size: 32,
             fillColor: '#F9ED4F',
@@ -225,7 +221,7 @@
     let startedAtDate: string
     let completedAtDate: string
 
-    const changeRating = (e) => {
+    const changeRating = (e: any) => {
         config.score = e.target.valueAsNumber
         values.score = e.target.valueAsNumber * 2
     }
@@ -237,7 +233,7 @@
         startedAtDate = startedAtMoment.format('YYYY-MM-DD')
     }
 
-    const transformStartedAtDate = (e) => {
+    const transformStartedAtDate = (e: any) => {
         const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/
         const date = re.exec(e.target.value)
         values.startedAt.year = Number(date[1])
@@ -251,7 +247,7 @@
         completedAtDate = completedAtMoment.format('YYYY-MM-DD')
     }
 
-    const transformCompletedAtDate = (e) => {
+    const transformCompletedAtDate = (e: any) => {
         const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/
         const date = re.exec(e.target.value)
         values.completedAt.year = Number(date[1])
@@ -410,9 +406,9 @@
         isSubmitSuccess = true
         setTimeout(() => isSubmitSuccess = false, 2000)
     }
-</script>
 
-<div id="inapp-data">
+</script>
+<div class="container py-10">
     <div class="grid grid-cols-1 md:grid-cols-10 grid-flow-col gap-4">
         <div class="md:col-span-2 space-y-3">
             <img class="rounded-lg" src={currentAniListAnime.data.MediaList.media.coverImage.large} alt="{title} Cover Image">
@@ -591,8 +587,8 @@
                     class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4
                     focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white
                     dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
-                    on:click={hide}>
-                Cancel
+                    on:click={() => pop()}>
+                Back
             </Button>
         </div>
     </div>
diff --git a/frontend/src/routes/Home.svelte b/frontend/src/routes/Home.svelte
new file mode 100644
index 0000000..0a91b3d
--- /dev/null
+++ b/frontend/src/routes/Home.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+import Pagination from "../helperComponents/Pagination.svelte";
+import WatchList from "../helperComponents/WatchList.svelte";
+import {
+    aniListLoggedIn,
+    aniListPrimary,
+    loading,
+} from "../helperComponents/GlobalVariablesAndHelperFunctions.svelte";
+import loader from '../helperFunctions/loader'
+
+let isAniListPrimary: boolean
+let isAniListLoggedIn: boolean
+
+aniListPrimary.subscribe((value) => isAniListPrimary = value)
+aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
+</script>
+{#if isAniListLoggedIn && isAniListPrimary}
+<div class="container py-10">
+    <Pagination />
+    <WatchList />
+    <Pagination />
+</div>
+{:else}
+    <div use:loader={loading}></div>
+{/if}
\ No newline at end of file
diff --git a/frontend/src/star-rating/Stars.svelte b/frontend/src/star-rating/Stars.svelte
new file mode 100644
index 0000000..1f68b3d
--- /dev/null
+++ b/frontend/src/star-rating/Stars.svelte
@@ -0,0 +1,63 @@
+<!-- Originally from @ernane/svelte-star-rating. Wanted to give credit but could not use from the library without causing program crash. -->
+
+<script>
+    import Star from './components/Star.svelte';
+    export let config = {
+        readOnly: false,
+        countStars: 5,
+        range: { min: 0, max: 5, step: 0.001 },
+        score: 0.0,
+        showScore: true,
+        name: "stars",
+        scoreFormat: function(){ return `(${this.score.toFixed(0)}/${this.countStars})` },
+        starConfig: {
+            size: 30,
+            fillColor: '#F9ED4F',
+            strokeColor: "#BB8511",
+            unfilledColor: '#FFF',
+            strokeUnfilledColor: '#000'
+        }
+    }
+</script>
+
+<section class="stars-container">
+    <div class="range-stars">
+        <div class="stars">
+            {#each Array(config.countStars) as star, id}
+                {#if Math.floor(config.score) === id}
+                    <Star id={config.name + id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={config.score - Math.floor(config.score)}/>
+                {:else if Math.floor(config.score) > id}
+                    <Star id={config.name + id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={1}/>
+                {:else}
+                    <Star id={config.name + id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={0}/>
+                {/if}
+            {/each}
+        </div>
+        <input  name={config.name}
+                class="slider"
+                type="range"
+                min={config.readOnly ? config.score : config.range.min}
+                max={config.readOnly ? config.score : config.range.max}
+                step="{config.range.step}" bind:value={config.score}
+                on:change
+                on:click
+        >
+    </div>
+    {#if config.showScore}
+    <span class="show-score" style="font-size: {config.starConfig.size/2}px;">
+      {#if config.scoreFormat}
+        {config.scoreFormat()}
+      {:else}
+        ({((config.score/config.countStars)*100).toFixed(2)}%)
+      {/if}
+    </span>
+    {/if}
+</section>
+
+<style>
+    .stars-container{ position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem; }
+    .range-stars{ position: relative; }
+    .stars{ display: flex; align-items: center; justify-content: center; gap: .5rem; }
+    .slider{ opacity: 0; cursor: pointer; position: absolute; top: 0; left: 0; right: 0; height: 100%; }
+    .show-score{ user-select: none; color: #888 }
+</style>
\ No newline at end of file
diff --git a/frontend/src/star-rating/components/Star.svelte b/frontend/src/star-rating/components/Star.svelte
new file mode 100644
index 0000000..046cc19
--- /dev/null
+++ b/frontend/src/star-rating/components/Star.svelte
@@ -0,0 +1,21 @@
+<script>
+    export let id, readOnly, fillPercentage, starConfig;
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="{starConfig.size}" viewBox="0 -10 187.673 179.503" height="{starConfig.size}" >
+    {#if fillPercentage < 1 && fillPercentage > 0}
+        <defs>
+            <linearGradient id="linear-gradient-{id}" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" style="stop-color:{starConfig.fillColor};stop-opacity:1" />
+                <stop offset="{fillPercentage * 100}%" style="stop-color:{starConfig.fillColor};stop-opacity:1"/>
+                <stop offset="{fillPercentage * 100}%" style="stop-color:{starConfig.unfilledColor};stop-opacity:1" />
+            </linearGradient>
+        </defs>
+    {/if}
+    <path
+            opacity="{readOnly ? .7 : 1}"
+            stroke={fillPercentage > 0 ? starConfig.strokeColor : starConfig.strokeUnfilledColor}
+            fill={fillPercentage === 1 ? starConfig.fillColor : fillPercentage === 0 ? starConfig.unfilledColor : `url(#linear-gradient-${id})`}
+            d="M187.183 57.47a9.955 9.955 0 00-8.587-6.86l-54.167-4.918-21.42-50.134a9.978 9.978 0 00-9.172-6.052 9.972 9.972 0 00-9.172 6.061l-21.42 50.125L9.07 50.611a9.973 9.973 0 00-8.578 6.858 9.964 9.964 0 002.917 10.596l40.944 35.908-12.073 53.184a9.97 9.97 0 003.878 10.298A9.953 9.953 0 0042 169.357a9.937 9.937 0 005.114-1.424l46.724-27.925 46.707 27.925a9.936 9.936 0 0010.964-.478 9.979 9.979 0 003.88-10.298l-12.074-53.184 40.944-35.9a9.98 9.98 0 002.925-10.604zm0 0"
+    />
+</svg>
\ No newline at end of file
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 69576c6..f5a53e6 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,24 +1,45 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{svelte,js,ts,jsx,tsx}",
-    "./node_modules/flowbite/**/*.{html,js,svelte,ts}",
-    "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
-  ],
-  plugins: [
-    require('flowbite/plugin')
-  ],
+    content: [
+        "./index.html",
+        "./src/**/*.{svelte,js,ts,jsx,tsx}",
+        "./node_modules/flowbite/**/*.{html,js,svelte,ts}",
+        "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
+    ],
+    plugins: [
+        require('flowbite/plugin')
+    ],
 
-  darkMode: 'media',
+    darkMode: 'media',
 
-  theme: {
-    extend: {
-      colors: {
-        // flowbite-svelte
-        primary: { 50: '#FFF5F2', 100: '#FFF1EE', 200: '#FFE4DE', 300: '#FFD5CC', 400: '#FFBCAD', 500: '#FE795D', 600: '#EF562F', 700: '#EB4F27', 800: '#CC4522', 900: '#A5371B'},
-      }
+    theme: {
+        container: {
+            center: true,
+            padding: {
+                DEFAULT: '1rem',
+                sm: '2rem',
+                lg: '4rem',
+                xl: '5rem',
+                '2xl': '6rem',
+            },
+        },
+        extend: {
+            colors: {
+                // flowbite-svelte
+                primary: {
+                    50: '#FFF5F2',
+                    100: '#FFF1EE',
+                    200: '#FFE4DE',
+                    300: '#FFD5CC',
+                    400: '#FFBCAD',
+                    500: '#FE795D',
+                    600: '#EF562F',
+                    700: '#EB4F27',
+                    800: '#CC4522',
+                    900: '#A5371B'
+                },
+            }
+        }
     }
-  }
 }
 
diff --git a/frontend/wailsjs/runtime/package.json b/frontend/wailsjs/runtime/package.json
old mode 100755
new mode 100644
diff --git a/frontend/wailsjs/runtime/runtime.d.ts b/frontend/wailsjs/runtime/runtime.d.ts
old mode 100755
new mode 100644
diff --git a/frontend/wailsjs/runtime/runtime.js b/frontend/wailsjs/runtime/runtime.js
old mode 100755
new mode 100644