diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 80cc288..b740e4e 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,9 +6,12 @@
   <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/admin/showings.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/admin/showings.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/types/showing.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/types/showing.ts" 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" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -64,7 +67,7 @@
     &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;showings-updates&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;,
diff --git a/src/components/admin/search.vue b/src/components/admin/search.vue
index 638f4ea..daa24e6 100644
--- a/src/components/admin/search.vue
+++ b/src/components/admin/search.vue
@@ -32,7 +32,6 @@ 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();
diff --git a/src/components/admin/showings.vue b/src/components/admin/showings.vue
index 711c64b..d77e2ad 100644
--- a/src/components/admin/showings.vue
+++ b/src/components/admin/showings.vue
@@ -9,111 +9,78 @@
           <li class="pb-2">
             <span class="mb-3">{{ formatDate(showing.showtime) }} </span>
           </li>
-          <button
-            class="btn p-1 rounded"
-            type="button"
-            @click="deleteShowing(showing.id)"
-          >
-            Delete
-          </button>
+          <button class="btn p-1 rounded" type="button" @click="deleteShowing(showing.id)">Delete</button>
         </ul>
       </li>
     </ul>
   </div>
 </template>
 
-<script lang="ts" setup>
-import type { Showing } from "~/types/showing";
-import { useCookie } from "#app";
-import type { Schedule } from "~/types/schedule";
+<script>
+export default {
+  name: "showings",
+  data: () => ({
+    showings: [],
+    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
+  }),
+  mounted() {
+    this.getShowings()
+  },
+  methods: {
+    formatDate: function (date_string) {
+      let parsed_date = new Date(Date.parse(date_string));
+      let month = this.months[parsed_date.getMonth()];
 
-const showings = defineModel<Showing[]>("showings", { default: [] });
-const previous_showings = defineModel<Showing[]>("previous_showings", {
-  default: [],
-});
-const got_previous = ref(false);
-const months = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December",
-];
-
-onMounted(() => {
-  getShowings();
-});
-
-const formatDate = function (date_string: string) {
-  let parsed_date = new Date(Date.parse(date_string));
-  let month = months[parsed_date.getMonth()];
-
-  return `${month} ${parsed_date.getDate()}, ${parsed_date.getFullYear()}`;
-};
-
-const deleteShowing = function (showing_id: number) {
-  let config = useRuntimeConfig();
-  let confirmed = confirm("Delete showing?");
-
-  if (!confirmed) {
-    return false;
-  }
-
-  fetch(`${config.public.apiURL}/showings/${showing_id}/`, {
-    method: "DELETE",
-    headers: {
-      "Content-type": "application/json",
-      Authorization: `Token ${useCookie("token").value}`,
+      return `${month} ${parsed_date.getDate()}, ${parsed_date.getFullYear()}`
     },
-  })
-    .then((_json) => {
-      showings.value = showings.value.filter((showing) => {
-        return showing.id !== showing_id;
-      });
-    })
-    .catch((err) => console.log(err));
-};
+    deleteShowing: function (showing_id) {
+      let config = useRuntimeConfig();
+      let confirmed = confirm("Delete showing?");
 
-const getShowings = function (previous = false) {
-  let config = useRuntimeConfig();
-  let params = "";
-  if (previous) params = "?previous=true";
-
-  const { data, error } = useFetch<Schedule>(
-    `${config.public.apiURL}/schedules/1${params}`,
-    {
-      method: "GET",
-      headers: {
-        "Content-type": "application/json",
-        Authorization: `Token ${useCookie("token").value}`,
-      },
-    },
-  );
-
-  if (error.value) {
-    if (error.value.statusCode === 401) {
-      alert("Unauthorized");
-    }
-  } else {
-    if (!data.value) {
-      alert("No showings found for schedule.");
-    } else {
-      if (previous) {
-        got_previous.value = true;
-        previous_showings.value = data.value.showings;
-      } else {
-        showings.value = data.value.showings;
+      if (!confirmed) {
+        return false;
       }
+
+      return fetch(`${config.public.apiURL}/schedules/${showing_id}`, {
+        credentials: "include",
+        method: "DELETE",
+        headers: {
+          "Content-type": "application/json",
+          "token": useCookie("token").value
+        }
+      })
+          .then(response => response.json())
+          .then(json => {
+            this.showings = this.showings.filter((showing) => {
+              return showing.id !== showing_id
+            })
+          });
+    },
+    getShowings: function (previous = false) {
+      let config = useRuntimeConfig();
+      let params = "";
+      if (previous) params = "?previous=true";
+
+      return fetch(`${config.public.apiURL}/schedules/1${params}`, {
+        method: "GET",
+        headers: {"Content-type": "application/json"}
+      })
+          .then(response => response.json())
+          .then(showings => {
+
+            if (previous) {
+              this.got_previous = true;
+              this.previous_showings = showings;
+            } else {
+              this.showings = showings
+            }
+          })
+          .catch(err => console.log(err));
     }
   }
-};
+}
 </script>
 
-<style scoped></style>
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/forms/ScheduleMovie.vue b/src/components/forms/ScheduleMovie.vue
index b2bf788..4e28763 100644
--- a/src/components/forms/ScheduleMovie.vue
+++ b/src/components/forms/ScheduleMovie.vue
@@ -1,69 +1,58 @@
 <template>
   <div>
-    <form
-      id="schedule-form"
-      class="visually-hidden"
-      method="post"
-      onsubmit="return false"
-    >
+    <form id="schedule-form" class="visually-hidden" method="post" onsubmit="return false">
       <!-- SCHEDULE -->
-      <label class="pb-1 text-start font-bold" for="schedule-date">Date</label
-      ><br />
-      <input
-        id="schedule-input"
-        class="rounded-l p-1"
-        name="schedule-date"
-        type="date"
-      />
-      <button
-        class="btn mt-5 sm:mt-0 p-1 rounded sm:rounded-none sm:rounded-r"
-        type="button"
-        @click="schedule"
-      >
-        Schedule
+      <label class="pb-1 text-start font-bold" for="schedule-date">Date</label><br/>
+      <input id="schedule-input" class="rounded-l p-1" name="schedule-date"
+             type="date"/>
+      <button class="btn mt-5 sm:mt-0 p-1 rounded sm:rounded-none sm:rounded-r" type="button" @click="schedule">Schedule
       </button>
     </form>
   </div>
 </template>
 
-<script lang="ts" setup>
-const props = defineProps(["movie"]);
-const emits = defineEmits(["closeModal"]);
+<script>
+export default {
+  name: "ScheduleMovie",
+  methods: {
+    schedule: function (e) {
+      const config = useRuntimeConfig();
+      e.preventDefault();
 
-const schedule = function (e: Event) {
-  const config = useRuntimeConfig();
-  e.preventDefault();
+      let showtime_input = document.getElementById("schedule-input").value;
+      if (!showtime_input) {
+        alert("Please set showtime.");
+        return false;
+      }
+      let showtime = showtime_input + " " + "00:00:00";
 
-  let showtime_input = (
-    document.getElementById("schedule-input") as HTMLInputElement
-  ).value;
-
-  if (!showtime_input) {
-    alert("Please set showtime.");
-    return false;
-  }
-
-  const date = new Date(`${showtime_input}T00:00:00`);
-
-  fetch(`${config.public.apiURL}/showings/`, {
-    method: "POST",
-    body: JSON.stringify({
-      schedule: 1,
-      movie: props.movie.id,
-      showtime: date.toISOString(),
-      public: "False",
-    }),
-    headers: {
-      "Content-type": "application/json",
-      Authorization: `Token ${useCookie("token").value}`,
-    },
-  })
-    .then((response) => response.json())
-    .then((_json) => {
-      emits("closeModal");
-    })
-    .catch((err) => alert("Unable to schedule movie. Error:\n" + err));
-};
+      fetch(`${config.public.apiURL}/schedules/movie`, {
+        credentials: "include",
+        method: "POST",
+        body: JSON.stringify({
+          "schedule_id": 1,
+          "movie_id": this.movie.id,
+          "showtime": showtime,
+          "owner": 1,
+          "public": false
+        }),
+        headers: {
+          "Content-type": "application/json",
+          "token": useCookie("token").value,
+        }
+      })
+          .then(response => response.json())
+          .then(_json => {
+                this.$parent.$parent.closeModal();
+              }
+          )
+          .catch(err => alert("Unable to schedule movie. Error:\n" + err))
+    }
+  },
+  props: ["movie"]
+}
 </script>
 
-<style scoped></style>
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/modal-content/ShowMovie.vue b/src/components/modal-content/ShowMovie.vue
index 2d5105b..57dbde5 100644
--- a/src/components/modal-content/ShowMovie.vue
+++ b/src/components/modal-content/ShowMovie.vue
@@ -5,38 +5,36 @@
         {{ movie.title }} ({{ movie.year }})
       </h2>
       <div class="sm:inline-flex sm:space-x-5">
-        <img
-          :src="movie.poster"
-          alt="movie poster"
-          class="mx-auto sm:mx-0 neon-border"
-        />
+        <img :src="movie.poster" alt="movie poster" class="mx-auto sm:mx-0 neon-border"/>
         <div class="pt-5 sm:pt-0">
           <p>{{ movie.plot }}</p>
-          <ScheduleMovie
-            v-if="logged_in"
-            :movie="movie"
-            class="mt-5"
-            @close-modal="$emit('close-modal')"
-          />
+          <ScheduleMovie v-if="logged_in" :movie="movie" class="mt-5"/>
         </div>
       </div>
     </div>
+
   </div>
 </template>
 
-<script lang="ts" setup>
+<script>
 import ScheduleMovie from "~/components/forms/ScheduleMovie.vue";
 
-const props = defineProps(["movie"]);
-const emits = defineEmits(["close-modal"]);
-const logged_in = ref(false);
-
-onMounted(() => {
-  const token = useCookie("token").value;
-  if (token) {
-    logged_in.value = true;
+export default {
+  name: "ShowMovie",
+  data: () => ({
+    logged_in: false,
+  }),
+  components: {ScheduleMovie},
+  props: ["movie"],
+  mounted() {
+    const token = useCookie("token").value;
+    if (token) {
+      this.logged_in = true;
+    }
   }
-});
+}
 </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 f59be6e..788d2e7 100644
--- a/src/pages/lists/[id].vue
+++ b/src/pages/lists/[id].vue
@@ -1,11 +1,7 @@
 <template>
   <div v-if="list_id !== 0" class="p-5 sm:p-0">
     <Modal ref="movie_modal">
-      <ShowMovie
-        v-if="modal_movie"
-        :movie="modal_movie"
-        @close-modal="closeModal"
-      ></ShowMovie>
+      <ShowMovie v-if="modal_movie" :movie="modal_movie"></ShowMovie>
     </Modal>
     <h2 class="text-xl font-bold pb-5">{{ list.name }}</h2>
     <div class="grid grid-cols-2 rounded movie-card neon-border p-5">
@@ -70,6 +66,8 @@ 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: [] });
 const modal_movie: Ref<Movie | null> = ref(null);
@@ -184,11 +182,6 @@ const showModal = function (movie: Movie) {
   movie_modal.value?.toggleModal();
 };
 
-const movie_modal = ref<InstanceType<typeof Modal> | null>(null);
-const closeModal = function (movie: Movie) {
-  movie_modal.value?.toggleModal();
-};
-
 onMounted(() => {
   const route = useRoute();
   if (typeof route.params.id === "string") {
diff --git a/src/pages/schedule/index.vue b/src/pages/schedule/index.vue
index c373596..88a56de 100644
--- a/src/pages/schedule/index.vue
+++ b/src/pages/schedule/index.vue
@@ -83,10 +83,10 @@ const months = [
 ];
 
 const formatDate = function (date_string: string) {
-  let date = new Date(date_string);
-  let month = months[date.getMonth()];
+  let parsed_date = new Date(Date.parse(date_string));
+  let month = months[parsed_date.getMonth()];
 
-  return `${month} ${date.getDate()}, ${date.getFullYear()}`;
+  return `${month} ${parsed_date.getDate()}, ${parsed_date.getFullYear()}`;
 };
 
 const getSchedule = async function (previous = false) {
diff --git a/src/types/showing.ts b/src/types/showing.ts
index ab689c9..daa29f6 100644
--- a/src/types/showing.ts
+++ b/src/types/showing.ts
@@ -1,10 +1,8 @@
 import type { Movie } from "~/types/movie";
 
 export type Showing = {
-  id: number;
   owner: number;
   public: boolean;
-  title: string;
   movie: Movie;
   showtime: string;
 };