diff --git a/frontend/.idea/codeStyles/Project.xml b/frontend/.idea/codeStyles/Project.xml
index 29abe77..61cc8b2 100644
--- a/frontend/.idea/codeStyles/Project.xml
+++ b/frontend/.idea/codeStyles/Project.xml
@@ -1,5 +1,6 @@
 <component name="ProjectCodeStyleConfiguration">
   <code_scheme name="Project" version="173">
+    <option name="LINE_SEPARATOR" value="&#10;" />
     <option name="RIGHT_MARGIN" value="80" />
     <JSCodeStyleSettings version="0">
       <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
@@ -8,6 +9,13 @@
       <option name="FORCE_QUOTE_STYlE" value="true" />
       <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
     </JSCodeStyleSettings>
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
+    </TypeScriptCodeStyleSettings>
     <codeStyleSettings language="JavaScript">
       <indentOptions>
         <option name="INDENT_SIZE" value="2" />
@@ -15,5 +23,12 @@
         <option name="TAB_SIZE" value="2" />
       </indentOptions>
     </codeStyleSettings>
+    <codeStyleSettings language="TypeScript">
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
   </code_scheme>
 </component>
\ No newline at end of file
diff --git a/frontend/app.vue b/frontend/app.vue
index ffef11e..6cd33d1 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -6,7 +6,7 @@
 
       <nav>
         <NuxtLink to="/patrons">Patrons</NuxtLink>
-        <NuxtLink to="/catalog">Catalog</NuxtLink>
+        <NuxtLink to="/medias">Catalog</NuxtLink>
         <NuxtLink to="/account">Account</NuxtLink>
       </nav>
     </header>
diff --git a/frontend/data/medias.ts b/frontend/data/medias.ts
index c592144..4da2bb6 100644
--- a/frontend/data/medias.ts
+++ b/frontend/data/medias.ts
@@ -1,20 +1,94 @@
-const medias = {
-    books: [
-        {id: 1, title: 'The Small Backs of Children', author: 'Lidia Yuknavitch', copies: 1, checkedOut: 0, holds: []},
-        {id: 2, title: 'Beauty Queens', author: 'Libby Bray', copies: 2, checkedOut: 1, holds: []},
-        {id: 3, title: 'Pride and Prejudice', author: 'Jane Austen', copies: 5, checkedOut: 5, holds: [1]},
-        {id: 4, title: 'Audacious', author: 'Gabrielle Prendergast', copies: 1, checkedOut: 1, holds: [3, 7]}
-    ],
-    movies: [
-        {id: 1, title: 'Itty Bitty Titty Committee', director: 'Yaela Howard', copies: 1, checkedOut: 0, holds: []},
-        {id: 2, title: 'Sing!', director: 'Tom Ford', copies: 2, checkedOut: 2, holds: [2]},
-        {id: 3, title: 'Barbie', director: 'Greta Greenwood', copies: 0, checkedOut: 0, holds: [6, 3, 9]},
-    ],
-    music: [
-        {id: 1, title: 'Fearless', artist: 'Taylor Swift', copies: 2, checkedOut: 1, holds: []},
-        {id: 2, title: 'Gag Order', artist: 'Kesha', copies: 1, checkedOut: 1, holds: [5]},
-        {id: 3, title: 'Speak Now', artist: 'Taylor Swift', copies: 3, checkedOut: 1, holds: []}
-    ]
-}
+const medias = [
+  {
+    id: 1,
+    type: 'book',
+    title: 'The Small Backs of Children',
+    name: 'Lidia Yuknavitch',
+    copies: 1,
+    checkedOut: 0,
+    holds: [],
+  },
+  {
+    id: 2,
+    type: 'book',
+    title: 'Beauty Queens',
+    name: 'Libby Bray',
+    copies: 2,
+    checkedOut: 1,
+    holds: [],
+  },
+  {
+    id: 3,
+    type: 'book',
+    title: 'Pride and Prejudice',
+    name: 'Jane Austen',
+    copies: 5,
+    checkedOut: 5,
+    holds: [1],
+  },
+  {
+    id: 4,
+    type: 'book',
+    title: 'Audacious',
+    name: 'Gabrielle Prendergast',
+    copies: 1,
+    checkedOut: 1,
+    holds: [3, 7],
+  },
+  {
+    id: 5,
+    type: 'film',
+    title: 'Itty Bitty Titty Committee',
+    name: 'Yaela Howard',
+    copies: 1,
+    checkedOut: 0,
+    holds: [],
+  },
+  {
+    id: 6,
+    type: 'film',
+    title: 'Sing!',
+    name: 'Tom Ford',
+    copies: 2,
+    checkedOut: 2,
+    holds: [2],
+  },
+  {
+    id: 7,
+    type: 'film',
+    title: 'Barbie',
+    name: 'Greta Greenwood',
+    copies: 0,
+    checkedOut: 0,
+    holds: [6, 3, 9],
+  },
+  {
+    id: 8,
+    type: 'album',
+    title: 'Fearless',
+    name: 'Taylor Swift',
+    copies: 2,
+    checkedOut: 1,
+    holds: [],
+  },
+  {
+    id: 9,
+    type: 'album',
+    title: 'Gag Order',
+    name: 'Kesha',
+    copies: 1,
+    checkedOut: 1,
+    holds: [5],
+  },
+  {
+    id: 10,
+    type: 'album',
+    title: 'Speak Now',
+    name: 'Taylor Swift',
+    copies: 3,
+    checkedOut: 1,
+    holds: [],
+  },
+]
 
 export default medias
diff --git a/frontend/pages/medias/index.vue b/frontend/pages/medias/index.vue
new file mode 100644
index 0000000..0710424
--- /dev/null
+++ b/frontend/pages/medias/index.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import medias from '@data/medias'
+
+const mediaList = computed(() => {
+  return medias.filter((m) => m.type === 'book')
+})
+</script>
+
+<template>
+  <section>
+    <Table>
+      <TableThead>
+        <tr>
+          <TableTh>Title</TableTh>
+          <TableTh>Copies</TableTh>
+          <TableTh>Checked Out</TableTh>
+          <TableTh actions>
+            <PrimaryButton>Add New</PrimaryButton>
+          </TableTh>
+        </tr>
+      </TableThead>
+
+      <TableTbody>
+        <tr v-for="(media, index) in mediaList" :key="index">
+          <TableTd>
+            <div>{{ media.title }}</div>
+            <SecondaryInfo>{{ media.name }}</SecondaryInfo>
+          </TableTd>
+
+          <TableTd>{{ media.copies }}</TableTd>
+
+          <TableTd>
+            <div>{{ media.checkedOut }}</div>
+            <SecondaryInfo>{{ media.holds.length }} on hold</SecondaryInfo>
+          </TableTd>
+
+          <TableTd actions>
+            <NuxtLink :to="`/medias/${media.id}/checkout`">Check Out</NuxtLink>
+            <NuxtLink :to="`/medias/${media.id}`">View</NuxtLink>
+            <NuxtLink :to="`/medias/${media.id}/edit`">Edit</NuxtLink>
+          </TableTd>
+        </tr>
+      </TableTbody>
+    </Table>
+  </section>
+</template>
+
+<style scoped lang="postcss">
+
+</style>