diff --git a/frontend/src/helperComponents/Anime.svelte b/frontend/src/helperComponents/Anime.svelte
index 92c0ffd..353076b 100644
--- a/frontend/src/helperComponents/Anime.svelte
+++ b/frontend/src/helperComponents/Anime.svelte
@@ -6,26 +6,26 @@
         malLoggedIn,
         simklAnime,
         simklLoggedIn,
-    } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
-    import { push } from "svelte-spa-router";
-    import { Button } from "flowbite-svelte";
-    import type { AniListGetSingleAnime } from "../anilist/types/AniListCurrentUserWatchListType";
-    import Rating from "./Rating.svelte";
-    import convertAniListDateToString from "../helperFunctions/convertAniListDateToString";
-    import AnimeTable from "./AnimeTable.svelte";
+    } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"
+    import { push } from "svelte-spa-router"
+    import { Button } from "flowbite-svelte"
+    import type { AniListGetSingleAnime } from "../anilist/types/AniListCurrentUserWatchListType"
+    import Rating from "./Rating.svelte"
+    import convertAniListDateToString from "../helperFunctions/convertAniListDateToString"
+    import AnimeTable from "./AnimeTable.svelte"
     import type {
         MALAnime,
         MalListStatus,
         MALUploadStatus,
-    } from "../mal/types/MALTypes";
-    import type { SimklAnime } from "../simkl/types/simklTypes";
-    import { writable } from "svelte/store";
+    } from "../mal/types/MALTypes"
+    import type { SimklAnime } from "../simkl/types/simklTypes"
+    import { writable } from "svelte/store"
     import type {
         StatusOption,
         StatusOptions,
-    } from "../helperTypes/StatusTypes";
-    import type { AniListUpdateVariables } from "../anilist/types/AniListTypes";
-    import convertDateStringToAniList from "../helperFunctions/convertDateStringToAniList";
+    } from "../helperTypes/StatusTypes"
+    import type { AniListUpdateVariables } from "../anilist/types/AniListTypes"
+    import convertDateStringToAniList from "../helperFunctions/convertDateStringToAniList"
     import {
         AniListDeleteEntry,
         AniListUpdateEntry,
@@ -35,32 +35,32 @@
         SimklSyncRating,
         SimklSyncRemove,
         SimklSyncStatus,
-    } from "../../wailsjs/go/main/App";
-    import { AddAnimeServiceToTable } from "../helperModules/AddAnimeServiceToTable.svelte";
-    import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
+    } from "../../wailsjs/go/main/App"
+    import { AddAnimeServiceToTable } from "../helperModules/AddAnimeServiceToTable.svelte"
+    import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte"
 
-    let isAniListLoggedIn: boolean;
-    let isMalLoggedIn: boolean;
-    let isSimklLoggedIn: boolean;
-    let currentAniListAnime: AniListGetSingleAnime;
-    let currentMalAnime: MALAnime;
-    let currentSimklAnime: SimklAnime;
-    let submitting = writable(false);
-    let isSubmitting: boolean;
-    let submitSuccess = writable(false);
+    let isAniListLoggedIn: boolean
+    let isMalLoggedIn: boolean
+    let isSimklLoggedIn: boolean
+    let currentAniListAnime: AniListGetSingleAnime
+    let currentMalAnime: MALAnime
+    let currentSimklAnime: SimklAnime
+    let submitting = writable(false)
+    let isSubmitting: boolean
+    let submitSuccess = writable(false)
 
-    aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
-    malLoggedIn.subscribe((value) => (isMalLoggedIn = value));
-    simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
-    aniListAnime.subscribe((value) => (currentAniListAnime = value));
-    malAnime.subscribe((value) => (currentMalAnime = value));
-    simklAnime.subscribe((value) => (currentSimklAnime = value));
-    submitting.subscribe((value) => (isSubmitting = value));
+    aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value))
+    malLoggedIn.subscribe((value) => (isMalLoggedIn = value))
+    simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value))
+    aniListAnime.subscribe((value) => (currentAniListAnime = value))
+    malAnime.subscribe((value) => (currentMalAnime = value))
+    simklAnime.subscribe((value) => (currentSimklAnime = value))
+    submitting.subscribe((value) => (isSubmitting = value))
 
     const title =
         currentAniListAnime.data.MediaList.media.title.english !== ""
             ? currentAniListAnime.data.MediaList.media.title.english
-            : currentAniListAnime.data.MediaList.media.title.romaji;
+            : currentAniListAnime.data.MediaList.media.title.romaji
     const statusOptions: StatusOptions = [
         { id: 0, aniList: "CURRENT", mal: "watching", simkl: "watching" },
         {
@@ -73,21 +73,21 @@
         { id: 3, aniList: "DROPPED", mal: "dropped", simkl: "dropped" },
         { id: 4, aniList: "PAUSED", mal: "on_hold", simkl: "hold" },
         { id: 5, aniList: "REPEATING", mal: "rewatching", simkl: "watching" },
-    ];
+    ]
     let startingAnilistStatusOption: StatusOption = statusOptions.filter(
         (option) =>
             currentAniListAnime.data.MediaList.status === option.aniList,
-    )[0];
+    )[0]
     const startedAtDate = convertAniListDateToString(
         currentAniListAnime.data.MediaList.startedAt,
-    );
+    )
     const completedAtDate = convertAniListDateToString(
         currentAniListAnime.data.MediaList.completedAt,
-    );
+    )
 
     if (isAniListLoggedIn)
         AddAnimeServiceToTable({
-            id: currentAniListAnime.data.MediaList.mediaId,
+            id: `a-${currentAniListAnime.data.MediaList.mediaId}`,
             title,
             service: "AniList",
             progress: currentAniListAnime.data.MediaList.progress,
@@ -101,11 +101,11 @@
             score: currentAniListAnime.data.MediaList.score,
             repeat: currentAniListAnime.data.MediaList.repeat,
             notes: currentAniListAnime.data.MediaList.notes,
-        });
+        })
 
     if (isMalLoggedIn)
         AddAnimeServiceToTable({
-            id: currentMalAnime.id,
+            id: `m-${currentMalAnime.id}`,
             title: currentMalAnime.title,
             service: "MyAnimeList",
             progress: currentMalAnime.my_list_status.num_episodes_watched,
@@ -115,11 +115,11 @@
             score: currentMalAnime.my_list_status.score,
             repeat: currentMalAnime.my_list_status.num_times_rewatched,
             notes: currentMalAnime.my_list_status.comments,
-        });
+        })
 
     if (isSimklLoggedIn && Object.keys(currentSimklAnime).length > 0)
         AddAnimeServiceToTable({
-            id: currentSimklAnime.show.ids.simkl,
+            id: `s-${currentSimklAnime.show.ids.simkl}`,
             title: currentSimklAnime.show.title,
             service: "Simkl",
             progress: currentSimklAnime.watched_episodes_count,
@@ -129,18 +129,18 @@
             score: currentSimklAnime.user_rating,
             repeat: 0,
             notes: "",
-        });
+        })
 
     const handleSubmit = async (e: any) => {
-        submitting.set(true);
+        submitting.set(true)
         let submitData: {
-            rating: number;
-            episodes: number;
-            status: StatusOption;
-            startedAt: string;
-            completedAt: string;
-            repeat: number;
-            notes: string;
+            rating: number
+            episodes: number
+            status: StatusOption
+            startedAt: string
+            completedAt: string
+            repeat: number
+            notes: string
         } = {
             rating: 0,
             episodes: 0,
@@ -154,27 +154,27 @@
             completedAt: "",
             repeat: 0,
             notes: "",
-        };
-        const formData = new FormData(e.target);
+        }
+        const formData = new FormData(e.target)
         for (let field of formData) {
-            const [key, value] = field;
+            const [key, value] = field
             if (key === "rating") {
-                submitData.rating = Number(value) * 2;
-                continue;
+                submitData.rating = Number(value) * 2
+                continue
             }
             if (key === "episodes") {
-                submitData.episodes = Number(value);
-                continue;
+                submitData.episodes = Number(value)
+                continue
             }
             if (key === "repeat") {
-                submitData.repeat = Number(value);
-                continue;
+                submitData.repeat = Number(value)
+                continue
             }
             if (key === "status") {
-                submitData.status = startingAnilistStatusOption;
-                continue;
+                submitData.status = startingAnilistStatusOption
+                continue
             }
-            submitData[key] = value;
+            submitData[key] = value
         }
 
         if (
@@ -190,18 +190,18 @@
                 notes: submitData.notes,
                 startedAt: convertDateStringToAniList(submitData.startedAt),
                 completedAt: convertDateStringToAniList(submitData.completedAt),
-            };
+            }
             await AniListUpdateEntry(body).then(
                 (value: AniListGetSingleAnime) => {
                     // in future when you inevitably add tags to typescript, until Anilist fixes the api bug
                     // where tags break the SaveMediaListEntry return, you'll want to use this delete line
                     // delete value.data.MediaList.media.tags
                     aniListAnime.update((newValue) => {
-                        newValue = value;
-                        return newValue;
-                    });
+                        newValue = value
+                        return newValue
+                    })
                     AddAnimeServiceToTable({
-                        id: currentAniListAnime.data.MediaList.mediaId,
+                        id: `a-${currentAniListAnime.data.MediaList.mediaId}`,
                         title,
                         service: "AniList",
                         progress: currentAniListAnime.data.MediaList.progress,
@@ -215,9 +215,9 @@
                         score: currentAniListAnime.data.MediaList.score,
                         repeat: currentAniListAnime.data.MediaList.repeat,
                         notes: currentAniListAnime.data.MediaList.notes,
-                    });
+                    })
                 },
-            );
+            )
         }
 
         if (malLoggedIn && currentMalAnime.id !== 0) {
@@ -228,24 +228,24 @@
                 num_watched_episodes: submitData.episodes,
                 num_times_rewatched: submitData.repeat,
                 comments: submitData.notes,
-            };
+            }
 
             await MyAnimeListUpdate(currentMalAnime, body).then(
                 (malAnimeReturn: MalListStatus) => {
                     malAnime.update((value) => {
-                        value.my_list_status.status = malAnimeReturn.status;
+                        value.my_list_status.status = malAnimeReturn.status
                         value.my_list_status.is_rewatching =
-                            malAnimeReturn.is_rewatching;
-                        value.my_list_status.score = malAnimeReturn.score;
+                            malAnimeReturn.is_rewatching
+                        value.my_list_status.score = malAnimeReturn.score
                         value.my_list_status.num_episodes_watched =
-                            malAnimeReturn.num_episodes_watched;
+                            malAnimeReturn.num_episodes_watched
                         value.my_list_status.num_times_rewatched =
-                            malAnimeReturn.num_times_rewatched;
-                        value.my_list_status.comments = malAnimeReturn.comments;
-                        return value;
-                    });
+                            malAnimeReturn.num_times_rewatched
+                        value.my_list_status.comments = malAnimeReturn.comments
+                        return value
+                    })
                     AddAnimeServiceToTable({
-                        id: currentMalAnime.id,
+                        id: `m-${currentMalAnime.id}`,
                         title: currentMalAnime.title,
                         service: "MyAnimeList",
                         progress:
@@ -257,9 +257,9 @@
                         repeat: currentMalAnime.my_list_status
                             .num_times_rewatched,
                         notes: currentMalAnime.my_list_status.comments,
-                    });
+                    })
                 },
-            );
+            )
         }
 
         if (simklLoggedIn && currentSimklAnime.show.ids.simkl !== 0) {
@@ -271,7 +271,7 @@
                     submitData.episodes,
                 ).then((value: SimklAnime) => {
                     AddAnimeServiceToTable({
-                        id: value.show.ids.simkl,
+                        id: `s-${value.show.ids.simkl}`,
                         title: value.show.title,
                         service: "Simkl",
                         progress: value.watched_episodes_count,
@@ -281,12 +281,12 @@
                         score: value.user_rating,
                         repeat: 0,
                         notes: "",
-                    });
+                    })
                     simklAnime.update((newValue) => {
-                        newValue = value;
-                        return newValue;
-                    });
-                });
+                        newValue = value
+                        return newValue
+                    })
+                })
             }
 
             if (currentSimklAnime.user_rating !== submitData.rating) {
@@ -295,7 +295,7 @@
                     submitData.rating,
                 ).then((value) => {
                     AddAnimeServiceToTable({
-                        id: value.show.ids.simkl,
+                        id: `s-${value.show.ids.simkl}`,
                         title: value.show.title,
                         service: "Simkl",
                         progress: value.watched_episodes_count,
@@ -305,12 +305,12 @@
                         score: value.user_rating,
                         repeat: 0,
                         notes: "",
-                    });
+                    })
                     simklAnime.update((newValue) => {
-                        newValue = value;
-                        return newValue;
-                    });
-                });
+                        newValue = value
+                        return newValue
+                    })
+                })
             }
 
             if (currentSimklAnime.status !== submitData.status.simkl) {
@@ -319,7 +319,7 @@
                     submitData.status.simkl,
                 ).then((value) => {
                     AddAnimeServiceToTable({
-                        id: value.show.ids.simkl,
+                        id: `s-${value.show.ids.simkl}`,
                         title: value.show.title,
                         service: "Simkl",
                         progress: value.watched_episodes_count,
@@ -329,29 +329,29 @@
                         score: value.user_rating,
                         repeat: 0,
                         notes: "",
-                    });
+                    })
                     simklAnime.update((newValue) => {
-                        newValue = value;
-                        return newValue;
-                    });
-                });
+                        newValue = value
+                        return newValue
+                    })
+                })
             }
         }
 
-        submitting.set(false);
-        submitSuccess.set(true);
-        setTimeout(() => submitSuccess.set(false), 2000);
-    };
+        submitting.set(false)
+        submitSuccess.set(true)
+        setTimeout(() => submitSuccess.set(false), 2000)
+    }
 
     const deleteEntries = async () => {
-        submitting.set(true);
+        submitting.set(true)
         if (
             isAniListLoggedIn &&
             currentAniListAnime.data.MediaList.mediaId !== 0
         ) {
-            await AniListDeleteEntry(currentAniListAnime.data.MediaList.id);
+            await AniListDeleteEntry(currentAniListAnime.data.MediaList.id)
             AddAnimeServiceToTable({
-                id: currentAniListAnime.data.MediaList.mediaId,
+                id: `a-${currentAniListAnime.data.MediaList.mediaId}`,
                 title,
                 service: "AniList",
                 progress: 0,
@@ -361,12 +361,12 @@
                 score: 0,
                 repeat: 0,
                 notes: "",
-            });
+            })
         }
         if (malLoggedIn && currentMalAnime.id !== 0) {
-            await DeleteMyAnimeListEntry(currentMalAnime.id);
+            await DeleteMyAnimeListEntry(currentMalAnime.id)
             AddAnimeServiceToTable({
-                id: currentMalAnime.id,
+                id: `m-${currentMalAnime.id}`,
                 title: currentMalAnime.title,
                 service: "MyAnimeList",
                 progress: 0,
@@ -376,12 +376,12 @@
                 score: 0,
                 repeat: 0,
                 notes: "",
-            });
+            })
         }
         if (simklLoggedIn && currentSimklAnime.show.ids.simkl !== 0) {
-            await SimklSyncRemove(currentSimklAnime);
+            await SimklSyncRemove(currentSimklAnime)
             AddAnimeServiceToTable({
-                id: currentSimklAnime.show.ids.simkl,
+                id: `s-${currentSimklAnime.show.ids.simkl}`,
                 title: currentSimklAnime.show.title,
                 service: "Simkl",
                 progress: 0,
@@ -391,15 +391,18 @@
                 score: 0,
                 repeat: 0,
                 notes: "",
-            });
+            })
         }
-        submitting.set(false);
-        submitSuccess.set(true);
-        setTimeout(() => submitSuccess.set(false), 2000);
-    };
+        submitting.set(false)
+        submitSuccess.set(true)
+        setTimeout(() => submitSuccess.set(false), 2000)
+    }
 </script>
 
-<form on:submit|preventDefault={handleSubmit} class="container py-10">
+<form on:submit|preventDefault={handleSubmit} class="container pt-3 pb-10">
+    <h1 class="text-white font-bold text-left text-xl pb-3">
+        {title}
+    </h1>
     <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
@@ -592,10 +595,9 @@
             <Button
                 disabled={isSubmitting}
                 id="delete-button"
-                class="text-white bg-red-700 {$submitSuccess ?
-                    'bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 focus:ring-4 focus:ring-green-800 dark:focus:ring-green-800' :
-                    'bg-red-600 dark:bg-red-600 hover:bg-red-700 dark:hover:bg-red-700 focus:ring-4 focus:ring-red-800 dark:focus:ring-red-800'
-                    } font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
+                class="text-white bg-red-700 {$submitSuccess
+                    ? 'bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 focus:ring-4 focus:ring-green-800 dark:focus:ring-green-800'
+                    : 'bg-red-600 dark:bg-red-600 hover:bg-red-700 dark:hover:bg-red-700 focus:ring-4 focus:ring-red-800 dark:focus:ring-red-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
                 on:click={deleteEntries}
             >
                 <svg
@@ -627,10 +629,9 @@
             <Button
                 disabled={isSubmitting}
                 id="sync-button"
-                class="text-white {$submitSuccess ?
-                    'bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 focus:ring-4 focus:ring-green-800 dark:focus:ring-green-800' :
-                    'bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-800 dark:focus:ring-blue-800'
-                    } font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
+                class="text-white {$submitSuccess
+                    ? 'bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 focus:ring-4 focus:ring-green-800 dark:focus:ring-green-800'
+                    : 'bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-800 dark:focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
                 type="submit"
             >
                 <svg
@@ -660,8 +661,8 @@
                     focus:ring-gray-700 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={async () => {
-                    await CheckIfAniListLoggedInAndLoadWatchList();
-                    return push("/");
+                    await CheckIfAniListLoggedInAndLoadWatchList()
+                    return push("/")
                 }}
             >
                 Go Home
@@ -674,4 +675,3 @@
         <p>{@html currentAniListAnime.data.MediaList.media.description}</p>
     </div>
 </form>
-
diff --git a/frontend/src/helperComponents/AnimeTable.svelte b/frontend/src/helperComponents/AnimeTable.svelte
index 272593c..8aa25b9 100644
--- a/frontend/src/helperComponents/AnimeTable.svelte
+++ b/frontend/src/helperComponents/AnimeTable.svelte
@@ -1,15 +1,22 @@
 <script lang="ts">
-    import { createTable, Render, Subscribe } from "svelte-headless-table";
+    import {
+        createRender,
+        createTable,
+        Render,
+        Subscribe,
+    } from "svelte-headless-table"
     // @ts-ignore
-    import { addSortBy } from "svelte-headless-table/plugins";
-    import { tableItems } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
+    import { addSortBy } from "svelte-headless-table/plugins"
+    import { tableItems } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"
+    import WebsiteLink from "./WebsiteLink.svelte"
 
     //when adding sort here is code { sort: addSortBy() }
-    const table = createTable(tableItems, { sort: addSortBy() });
+    const table = createTable(tableItems, { sort: addSortBy() })
 
     const columns = table.createColumns([
         table.column({
             header: "Service Id",
+            cell: ({ value }) => createRender(WebsiteLink, {id: value}),
             accessor: "id",
         }),
         table.column({
@@ -48,11 +55,11 @@
             header: "Notes",
             accessor: "notes",
         }),
-    ]);
+    ])
 
     //add pluginStates when add sort back
     const { headerRows, rows, tableAttrs, tableBodyAttrs } =
-        table.createViewModel(columns);
+        table.createViewModel(columns)
 </script>
 
 <div class="relative overflow-x-auto rounded-lg mb-5">
diff --git a/frontend/src/helperComponents/WebsiteLink.svelte b/frontend/src/helperComponents/WebsiteLink.svelte
new file mode 100644
index 0000000..4d21d50
--- /dev/null
+++ b/frontend/src/helperComponents/WebsiteLink.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import {BrowserOpenURL} from "../../wailsjs/runtime"
+
+  export let id: string
+  let url = ""
+  let isAniList = false
+  let isMAL = false
+  let isSimkl = false
+  let newId = id
+  let re = /[ams]?-?(.*)/
+  if (id !== undefined && id.length > 0) {
+    isAniList = id.includes("a-")
+    isMAL = id.includes("m-")
+    isSimkl = id.includes("s-")
+    newId = id.match(re)[1]
+  }
+
+
+  if (isAniList) url = `https://anilist.co/anime/${newId}`
+  if (isMAL) url = `https://myanimelist.net/anime/${newId}`
+  if (isSimkl) url = `https://simkl.com/anime/${newId}`
+</script>
+
+{#if url.length > 0}
+  <button class="underline underline-offset-2 px-4 py-1" on:click={() => BrowserOpenURL(url)}>{newId}</button>
+{:else}
+  {id}
+{/if}
diff --git a/frontend/src/helperTypes/TableTypes.ts b/frontend/src/helperTypes/TableTypes.ts
index d2d5f35..16f4519 100644
--- a/frontend/src/helperTypes/TableTypes.ts
+++ b/frontend/src/helperTypes/TableTypes.ts
@@ -1,7 +1,7 @@
 export type TableItems = TableItem[]
 
 export type TableItem = {
-    id: number
+    id: string
     title: string
     service: string
     progress: number
@@ -11,4 +11,4 @@ export type TableItem = {
     score: number
     repeat: number
     notes: string
-}
\ No newline at end of file
+}