diff --git a/frontend/src/helperComponents/Sort.svelte b/frontend/src/helperComponents/Sort.svelte
index e69de29..62461ff 100644
--- a/frontend/src/helperComponents/Sort.svelte
+++ b/frontend/src/helperComponents/Sort.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+  import {
+    aniListSort,
+    watchListPage,
+    animePerPage,
+    aniListWatchlist,
+  } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
+  import { MediaListSort } from "../anilist/types/AniListTypes";
+  import { GetAniListUserWatchingList } from "../../wailsjs/go/main/App";
+
+  const sortTypes = [
+    { value: MediaListSort.MediaId, name: "Media Id Asc" },
+    { value: MediaListSort.MediaIdDesc, name: "Media Id Desc" },
+    { value: MediaListSort.Score, name: "Score Asc" },
+    { value: MediaListSort.ScoreDesc, name: "Score Desc" },
+    { value: MediaListSort.Status, name: "Status Asc" },
+    { value: MediaListSort.StatusDesc, name: "Status Desc" },
+    { value: MediaListSort.Progress, name: "Progress Asc" },
+    { value: MediaListSort.ProgressDesc, name: "Progress Desc" },
+    { value: MediaListSort.ProgressVolumes, name: "Progress Valumes Asc" },
+    { value: MediaListSort.ProgressVolumesDesc, name: "Progress Valumes Desc" },
+    { value: MediaListSort.Repeat, name: "Repeat Asc" },
+    { value: MediaListSort.RepeatDesc, name: "Repeat Desc" },
+    { value: MediaListSort.Priority, name: "Priority Asc" },
+    { value: MediaListSort.PriorityDesc, name: "Priority Desc" },
+    { value: MediaListSort.StartedOn, name: "Started On Asc" },
+    { value: MediaListSort.StartedOnDesc, name: "Started On Desc" },
+    { value: MediaListSort.FinishedOn, name: "Finished On Asc" },
+    { value: MediaListSort.FinishedOnDesc, name: "Finished On Desc" },
+    { value: MediaListSort.AddedTime, name: "Added Time Asc" },
+    { value: MediaListSort.AddedTimeDesc, name: "Added Time Desc" },
+    { value: MediaListSort.UpdatedTime, name: "Updated Time Asc" },
+    { value: MediaListSort.UpdatedTimeDesc, name: "Updated Time Desc" },
+    { value: MediaListSort.MediaTitleRomaji, name: "Media Title Romaji Asc" },
+    {
+      value: MediaListSort.MediaTitleRomajiDesc,
+      name: "Media Title Romaji Desc",
+    },
+    { value: MediaListSort.MediaTitleEnglish, name: "Media Title English Asc" },
+    {
+      value: MediaListSort.MediaTitleEnglishDesc,
+      name: "Media Title English Desc",
+    },
+    { value: MediaListSort.MediaTitleNative, name: "Media Title Native Asc" },
+    {
+      value: MediaListSort.MediaTitleNativeDesc,
+      name: "Media Title Native Desc",
+    },
+    { value: MediaListSort.MediaPopularity, name: "Media Popularity Asc" },
+    { value: MediaListSort.MediaPopularityDesc, name: "Media Popularity Desc" },
+  ];
+
+  let sort: string;
+  aniListSort.subscribe((value) => (sort = value));
+  console.log(sort);
+
+  async function changeWatchListSort() {
+    const result = await GetAniListUserWatchingList(
+      $watchListPage,
+      $animePerPage,
+      $aniListSort,
+    );
+    aniListWatchlist.set(result);
+  }
+</script>
+
+<select
+  id="sort"
+  class="border rounded-lg block p-1.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
+  bind:value={$aniListSort}
+  on:change={() => changeWatchListSort()}
+>
+  <option value="" disabled>Sort WatchList</option>
+  {#each sortTypes as sort}
+    <option value={sort.value}>{sort.name}</option>
+  {/each}
+</select>