diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index b844c05..9372133 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,11 +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/nuxt.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/nuxt.config.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/src/package-lock.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/src/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/index.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/tsconfig.json" beforeDir="false" afterPath="$PROJECT_DIR$/src/tsconfig.json" 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" />
@@ -25,6 +21,7 @@
       <list>
         <option value="CSS File" />
         <option value="Vue Single File Component" />
+        <option value="TypeScript File" />
       </list>
     </option>
   </component>
@@ -130,7 +127,7 @@
       <workItem from="1673397538637" duration="47416000" />
       <workItem from="1673508732689" duration="1316000" />
       <workItem from="1673547794038" duration="2346000" />
-      <workItem from="1743904898331" duration="4240000" />
+      <workItem from="1743904898331" duration="10658000" />
     </task>
     <servers />
   </component>
diff --git a/src/pages/lists/index.vue b/src/pages/lists/index.vue
index 6cd2c88..bf2010f 100644
--- a/src/pages/lists/index.vue
+++ b/src/pages/lists/index.vue
@@ -13,30 +13,32 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "index",
-  data: () => ({
-    lists: [],
-  }),
-  methods: {
-    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))
+<script lang="ts" setup>
+import type { MovieList } from "~/types/movielist";
+
+const lists = defineModel<MovieList[]>("movie_list", { default: [] });
+const updateLists = async function () {
+  let config = useRuntimeConfig();
+  const { data, status, error } = await useFetch<MovieList[]>(
+    `${config.public.apiURL}/lists`,
+    {
+      method: "GET",
+      headers: { "Content-type": "application/json" },
     },
-  },
-  mounted() {
-    this.getLists()
+  );
+
+  if (error) {
+    if (error.value?.statusCode === 401) {
+      console.log("unauthorized");
+    }
+  } else {
+    lists.value = data.value || [];
   }
-}
+};
+
+onMounted(() => {
+  updateLists();
+});
 </script>
 
-<style scoped>
-
-</style>
\ No newline at end of file
+<style scoped></style>
diff --git a/src/types/movielist.ts b/src/types/movielist.ts
new file mode 100644
index 0000000..38337bf
--- /dev/null
+++ b/src/types/movielist.ts
@@ -0,0 +1,6 @@
+export type MovieList = {
+  id: number;
+  name: string;
+  public: boolean;
+  movie_count: number;
+};