diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index b740e4e..3b56ba1 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,12 +6,7 @@
   <component name="ChangeListManager">
     <list default="true" id="5e320804-68c9-4504-97d5-d421de3438b2" name="Changes" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/Modal.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Modal.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/admin/search.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/admin/search.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/modal-content/AddMovie.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/modal-content/AddMovie.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/admin/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/admin/index.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/lists/[id].vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/lists/[id].vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/lists/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/lists/index.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/schedule/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/schedule/index.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -60,31 +55,31 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
-  &quot;keyToString&quot;: {
-    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
-    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
-    &quot;code.cleanup.on.save&quot;: &quot;true&quot;,
-    &quot;git-widget-placeholder&quot;: &quot;movie-search&quot;,
-    &quot;last_opened_file_path&quot;: &quot;/home/tiradoe/Projects/movie-night/web/src/types&quot;,
-    &quot;list.type.of.created.stylesheet&quot;: &quot;CSS&quot;,
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    &quot;node.js.detected.package.standard&quot;: &quot;true&quot;,
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    &quot;node.js.selected.package.standard&quot;: &quot;&quot;,
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
-    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
-    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;/home/tiradoe/Projects/movie-night/web/src/node_modules/prettier&quot;,
-    &quot;rearrange.code.on.save&quot;: &quot;true&quot;,
-    &quot;settings.editor.selected.configurable&quot;: &quot;settings.vue&quot;,
-    &quot;ts.external.directory.path&quot;: &quot;/home/tiradoe/Projects/movie-night/web/src/node_modules/typescript/lib&quot;,
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "RunOnceActivity.git.unshallow": "true",
+    "WebServerToolWindowFactoryState": "false",
+    "code.cleanup.on.save": "true",
+    "git-widget-placeholder": "schedule-page-updates",
+    "last_opened_file_path": "/home/tiradoe/Projects/movie-night/web/src/types",
+    "list.type.of.created.stylesheet": "CSS",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.standard": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.standard": "",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_package_manager_path": "npm",
+    "npm.dev.executor": "Run",
+    "prettierjs.PrettierConfiguration.Package": "/home/tiradoe/Projects/movie-night/web/src/node_modules/prettier",
+    "rearrange.code.on.save": "true",
+    "settings.editor.selected.configurable": "settings.vue",
+    "ts.external.directory.path": "/home/tiradoe/Projects/movie-night/web/src/node_modules/typescript/lib",
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
       <recent name="$PROJECT_DIR$/src/types" />
@@ -136,7 +131,6 @@
       <workItem from="1673547794038" duration="2346000" />
       <workItem from="1743904898331" duration="20256000" />
       <workItem from="1743998844137" duration="23268000" />
-      <workItem from="1744430699183" duration="32152000" />
     </task>
     <servers />
   </component>
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 23886af..e02b8d8 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -1,23 +1,23 @@
 <template>
-  <div v-show="visible" id="movie-modal" class="movie-modal movie-card p-5">
-    <span
-      class="hover-pointer font-bold w-full block text-right sm:pr-5 pb-3 pt-5"
-      @click="toggleModal()"
-    >
+  <div id="movie-modal" class="movie-modal movie-card hidden p-5">
+    <span class="hover-pointer font-bold w-full block text-right sm:pr-5 pb-3 pt-5" @click="closeModal()">
       X
     </span>
     <slot class=""></slot>
   </div>
 </template>
 
-<script lang="ts" setup>
-const visible = ref(false);
-
-const toggleModal = () => {
-  visible.value = !visible.value;
-};
-
-defineExpose({ toggleModal });
+<script>
+export default {
+  name: "Modal",
+  methods: {
+    closeModal: function () {
+      document.getElementById("movie-modal").classList.add("hidden")
+    },
+  },
+}
 </script>
 
-<style scoped></style>
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/admin/search.vue b/src/components/admin/search.vue
index daa24e6..f3f8ae8 100644
--- a/src/components/admin/search.vue
+++ b/src/components/admin/search.vue
@@ -1,70 +1,51 @@
 <template>
   <form class="py-3 p-sm-0 align-items-center" @submit="findMovies">
-    <label class="px-0" for="search-field">Search</label>
+    <label class="px-0 " for="search-field">Search</label>
     <div class="px-0 mx-0">
-      <input id="search-field" class="p-1" name="search-field" type="text" />
+      <input id="search-field" class="p-1" name="search-field" type="text"/>
       <button class="btn p-1" type="button" @click="findMovies">Submit</button>
     </div>
   </form>
   <ul class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-4">
     <li v-for="movie in movies" class="p-1 movie-card">
-      <img
-        :src="movie.poster"
-        alt="movie poster"
-        class="neon-border hover-pointer"
-        @click="showModal(movie)"
-      />
+      <img :src="movie.Poster" alt="movie poster" class="neon-border hover-pointer" @click="$parent.showModal(movie)"/>
       <div class="p-2">
-        <h5 class="text-center">{{ movie.title }} ({{ movie.year }})</h5>
+        <h5 class="text-center">{{ movie.Title }} {{ movie.year }}</h5>
       </div>
     </li>
   </ul>
+
 </template>
 
-<script lang="ts" setup>
-import type { Movie } from "~/types/movie";
+<script>
+export default {
+  name: "search",
+  data: () => ({
+    movies: [],
+  }),
+  methods: {
+    findMovies: function (e) {
+      let config = useRuntimeConfig();
+      e.preventDefault();
+      let searchTerm = document.getElementById('search-field').value
 
-const emit = defineEmits<{
-  (e: "show-modal", movie: Movie): void;
-}>();
-const movies = defineModel<Movie[]>("movie_list", { default: [] });
-
-const showModal = (movie: Movie) => {
-  emit("show-modal", movie);
-};
-const findMovies = async function (e: Event) {
-  let config = useRuntimeConfig();
-  e.preventDefault();
-  let searchTerm = (document.getElementById("search-field") as HTMLInputElement)
-    ?.value;
-
-  if (!searchTerm) {
-    return;
-  }
-
-  const { data, error } = await useFetch<Movie[]>(
-    `${config.public.apiURL}/movies/search?q=${searchTerm}`,
-    {
-      method: "GET",
-      headers: {
-        "Content-type": "application/json",
-        Authorization: `Token ${useCookie("token").value}`,
-      },
+      return fetch(`${config.public.apiURL}/movies/search/${searchTerm}`, {
+        method: "GET",
+        headers: {
+          "Content-type": "application/json",
+          "token": useCookie("token").value,
+        },
+      })
+          .then(response => response.json())
+          .then(json => {
+            this.movies = json;
+          })
+          .catch(err => console.log(err))
     },
-  );
-
-  if (error.value) {
-    if (error.value.statusCode === 401) {
-      alert("Unauthorized");
-    }
-  } else {
-    if (!data.value) {
-      alert("No movies found.");
-    } else {
-      movies.value = data.value || [];
-    }
   }
-};
+}
 </script>
 
-<style scoped></style>
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/modal-content/AddMovie.vue b/src/components/modal-content/AddMovie.vue
index 5a67020..da9007d 100644
--- a/src/components/modal-content/AddMovie.vue
+++ b/src/components/modal-content/AddMovie.vue
@@ -1,87 +1,75 @@
 <template>
-  <div v-if="props.movie != null" class="sm:m-5 p-10 movie-card neon-border">
+  <div v-if="movie != null" class="sm:m-5 p-10 movie-card neon-border">
     <div>
       <h2 id="modal-title" class="row pb-3">
-        {{ movie.title }} ({{ movie.year }})
+        {{ movie.Title }} ({{ movie.Year }})
       </h2>
 
       <div class="grid sm:grid-cols-2">
         <!-- MODAL POSTER -->
         <div class="text-end">
-          <img
-            id="modal-poster"
-            :src="movie.poster"
-            alt="poster"
-            class="pt-5"
-          />
+          <img id="modal-poster" :src="movie.Poster" alt="poster" class="pt-5"/>
         </div>
 
         <div class="pt-5">
-          <label class="" for="list-picker">Add To List</label><br />
+          <label class="" for="list-picker">Add To List</label><br/>
           <select id="list-picker" v-model="list_id" class="p-1 text-black">
-            <option v-for="list in lists" :value="list.id">
-              {{ list.name }}
-            </option>
+            <option v-for="list in lists" :value="list.id">{{ list.name }}</option>
           </select>
-          <button
-            class="modal-poster btn p-1"
-            type="button"
-            @click="addMovie(movie.imdb_id)"
-          >
+          <button class="modal-poster btn p-1" type="button" @click="addMovie(movie.imdbID)">
             Submit
           </button>
         </div>
       </div>
     </div>
   </div>
+
 </template>
 
-<script lang="ts" setup>
-import type { MovieList } from "~/types/movielist";
+<script>
+export default {
+  name: "AddMovie",
+  data: () => ({
+    list_id: 0,
+    lists: {}
+  }),
+  methods: {
+    addMovie: function (imdb_id) {
+      let config = useRuntimeConfig()
+      let list = parseInt(this.list_id)
 
-const props = defineProps(["movie"]);
-const list_id = ref(0);
-const lists = defineModel<MovieList[]>("lists", { default: [] });
-const emit = defineEmits<{
-  (e: "close-modal"): void;
-}>();
-
-const addMovie = function (imdb_id: string) {
-  if (typeof imdb_id === "undefined") {
-    console.log("No imdb id");
-  }
-  let config = useRuntimeConfig();
-
-  return fetch(
-    `${config.public.apiURL}/lists/${list_id.value}/movie/${imdb_id}/`,
-    {
-      method: "PUT",
-      body: `{ imdb_id: ${imdb_id}, list_id: ${list_id}}`,
-      headers: {
-        "Content-type": "application/json",
-        Authorization: `Token ${useCookie("token").value}`,
-      },
+      return fetch(`${config.public.apiURL}/lists/movie`, {
+        method: "POST",
+        body: JSON.stringify({imdb_id: imdb_id, list_id: list}),
+        headers: {
+          "Content-type": "application/json",
+          "token": useCookie("token").value,
+        }
+      })
+          .then(response => response.json())
+          .then(_json => {
+            this.$parent.closeModal()
+          })
+          .catch(err => console.log(err))
     },
-  )
-    .then((response) => response.json())
-    .then((_json) => {
-      emit("close-modal");
-    })
-    .catch((err) => console.log(err));
-};
-const getLists = function () {
-  let config = useRuntimeConfig();
-  fetch(`${config.public.apiURL}/lists`, {
-    method: "GET",
-    headers: { "Content-type": "application/json" },
-  })
-    .then((response) => response.json())
-    .then((json) => (lists.value = json))
-    .catch((err) => console.log(err));
-};
-onMounted(() => {
-  getLists();
-});
+    getLists: function () {
+      let config = useRuntimeConfig()
+      fetch(`${config.public.apiURL}/lists`, {
+        method: "GET",
+        headers: {"Content-type": "application/json",}
+      })
+          .then(response => response.json())
+          .then(json => this.lists = json)
+          .catch(err => console.log(err))
+    },
+  },
+  mounted() {
+    this.getLists();
+  },
+  props: ['movie']
+}
 </script>
 
-<style scoped></style>
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/pages/admin/index.vue b/src/pages/admin/index.vue
index 9ae521a..a6cdccd 100644
--- a/src/pages/admin/index.vue
+++ b/src/pages/admin/index.vue
@@ -1,46 +1,24 @@
 <template>
   <div class="p-5 sm:p-0">
-    <Modal ref="movie_modal">
-      <AddMovie
-        v-if="modal_movie"
-        :movie="modal_movie"
-        @close-modal="closeModal"
-      ></AddMovie>
+    <Modal>
+      <AddMovie v-if="modal_movie" :movie="modal_movie"></AddMovie>
     </Modal>
 
     <div class="text-center sm:text-left">
       <ul class="inline-flex space-x-5 pb-3">
-        <li
-          id="search-tab"
-          class="hover-pointer me-3 underline"
-          @click="toggleDisplay('search')"
-        >
-          Search
-        </li>
-        <li
-          id="showings-tab"
-          class="hover-pointer me-3"
-          @click="toggleDisplay('showings')"
-        >
-          Showings
-        </li>
-        <li
-          id="lists-tab"
-          class="hover-pointer"
-          @click="toggleDisplay('lists')"
-        >
-          Lists
-        </li>
+        <li id="search-tab" class="hover-pointer me-3 underline" @click="toggleDisplay('search')">Search</li>
+        <li id="showings-tab" class="hover-pointer me-3" @click="toggleDisplay('showings')">Showings</li>
+        <li id="lists-tab" class="hover-pointer" @click="toggleDisplay('lists')">Lists</li>
         <li id="logout" class="hover-pointer" @click="logout">Logout</li>
       </ul>
     </div>
 
     <div id="search">
-      <search @show-modal="showModal" />
+      <search/>
     </div>
 
     <div id="showings" class="hidden">
-      <showings />
+      <showings/>
     </div>
 
     <div id="lists" class="hidden">
@@ -49,67 +27,62 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script>
 import AddMovie from "~/components/modal-content/AddMovie.vue";
 import Search from "~/components/admin/search.vue";
 import Showings from "~/components/admin/showings.vue";
 import Lists from "~/components/admin/lists.vue";
-import type { MovieList } from "~/types/movielist";
-import { useCookie } from "#app";
-import type { Movie } from "~/types/movie";
-import Modal from "~/components/Modal.vue";
 
-const lists = defineModel<MovieList>("movie-lists", { default: [] });
-const modal_movie = defineModel<Movie>("#movie-modal");
-
-const movie_modal = ref<InstanceType<typeof Modal> | null>(null);
-
-const closeModal = function () {
-  movie_modal?.value?.toggleModal();
-};
-const showModal = function (movie: Movie) {
-  modal_movie.value = movie;
-  movie_modal?.value?.toggleModal();
-};
-const toggleDisplay = function (element_id: string) {
-  let tabs = ["search", "showings", "lists"];
-
-  tabs.forEach((value) => {
-    if (value === element_id) {
-      document.getElementById(element_id)?.classList.toggle("hidden");
-      document
-        .getElementById(element_id + "-tab")
-        ?.classList.toggle("underline");
-    } else if (!document.getElementById(value)?.classList.contains("hidden")) {
-      document.getElementById(value)?.classList.toggle("hidden");
-      document.getElementById(value + "-tab")?.classList.toggle("underline");
-    }
-  });
-};
-const logout = () => {
-  let config = useRuntimeConfig();
-  fetch(`${config.public.apiURL}/auth/logout/`, {
-    method: "POST",
-    headers: {
-      "Content-type": "application/json",
-      Authorization: `Token ${useCookie("token").value}`,
+export default {
+  name: "index",
+  components: {Lists, Showings, Search, AddMovie},
+  data: () => ({
+    lists: [],
+    modal_movie: null,
+  }),
+  methods: {
+    showModal: function (movie) {
+      this.modal_movie = movie;
+      document.getElementById("movie-modal").classList.remove("hidden");
     },
-  })
-    .then((response) => response)
-    .then((_json) => {
-      let token = useCookie("token");
-      token.value = null;
-      navigateTo("/");
-    })
-    .catch((err) => console.log(err));
-};
+    toggleDisplay: function (id) {
+      let tabs = ["search", "showings", "lists"];
 
-onMounted(() => {
-  const token = useCookie("token").value;
-  if (!token) {
-    navigateTo("/");
+      tabs.forEach((value) => {
+        if (value === id) {
+          document.getElementById(id).classList.toggle("hidden");
+          document.getElementById(id + "-tab").classList.toggle("underline");
+        } else if (!document.getElementById(value).classList.contains("hidden")) {
+          document.getElementById(value).classList.toggle("hidden");
+          document.getElementById(value + "-tab").classList.toggle("underline");
+        }
+      })
+    },
+    logout: () => {
+      let config = useRuntimeConfig()
+      let token = useCookie("token").value;
+      fetch(`${config.public.apiURL}/logout`, {
+        method: "PUT",
+        headers: {"Content-type": "application/json", "token": token},
+      })
+          .then(response => response.json())
+          .then(_json => {
+            let token = useCookie("token");
+            token.value = null;
+            window.location = "/";
+          })
+          .catch(err => console.log(err))
+    }
+  },
+  mounted() {
+    const token = useCookie("token").value;
+    if (!token) {
+      navigateTo("/")
+    }
   }
-});
+}
 </script>
 
-<style scoped></style>
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/pages/lists/[id].vue b/src/pages/lists/[id].vue
index 788d2e7..527fe99 100644
--- a/src/pages/lists/[id].vue
+++ b/src/pages/lists/[id].vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="list_id !== 0" class="p-5 sm:p-0">
-    <Modal ref="movie_modal">
+    <Modal>
       <ShowMovie v-if="modal_movie" :movie="modal_movie"></ShowMovie>
     </Modal>
     <h2 class="text-xl font-bold pb-5">{{ list.name }}</h2>
@@ -64,9 +64,6 @@ import ShowMovie from "~/components/modal-content/ShowMovie.vue";
 import "lazysizes";
 import type { MovieList } from "~/types/movielist";
 import type { Movie } from "~/types/movie";
-import Modal from "~/components/Modal.vue";
-
-const movie_modal = ref<InstanceType<typeof Modal> | null>(null);
 
 const list_id = ref(0);
 const list = defineModel<MovieList>("movie_list", { default: [] });
@@ -179,7 +176,7 @@ const filterMovies = function () {
 
 const showModal = function (movie: Movie) {
   modal_movie.value = movie;
-  movie_modal.value?.toggleModal();
+  document.getElementById("movie-modal")?.classList.remove("hidden");
 };
 
 onMounted(() => {
diff --git a/src/pages/lists/index.vue b/src/pages/lists/index.vue
index 55ede0e..44638fd 100644
--- a/src/pages/lists/index.vue
+++ b/src/pages/lists/index.vue
@@ -18,24 +18,18 @@
 
 <script lang="ts" setup>
 import type { MovieList } from "~/types/movielist";
-import { useCookie } from "#app";
 
 const lists = defineModel<MovieList[]>("movie_list", { default: [] });
 const updateLists = async function () {
   let config = useRuntimeConfig();
-  let headers: any = {
-    "Content-type": "application/json",
-  };
-
-  if (typeof useCookie("token").value !== "undefined") {
-    headers["Authorization"] = `Token ${useCookie("token").value}`;
-  }
-
   const { data, error } = await useFetch<MovieList[]>(
     `${config.public.apiURL}/lists`,
     {
       method: "GET",
-      headers: headers,
+      headers: {
+        "Content-type": "application/json",
+        Authorization: `Token ${useCookie("token").value}`,
+      },
     },
   );