diff --git a/src/components/ImageList.vue b/src/components/ImageList.vue
index f946de6160fe211798bf20afbff7d8c42a659610..4c2cc81758c21dab024fd678a0e614d9c41665e9 100644
--- a/src/components/ImageList.vue
+++ b/src/components/ImageList.vue
@@ -1,13 +1,29 @@
 <template>
-  <section id="list-container">
-    <div
-      id="item-container"
-      v-for="(hash, index) in stateHashArray"
-      :key="index"
-    >
-      <ImageItem :hash="hash" @checked="appendToDeleteArray"></ImageItem>
+  <section class="w-full">
+    <div class="w-full flex flex-row flex-wrap relative">
+      <div
+        v-for="(hash, index) in stateHashArray"
+        :key="index"
+        class="max-w-xs flex flex-col"
+      >
+        <ImageItem :hash="hash" @checked="appendToDeleteArray"></ImageItem>
+      </div>
+    </div>
+    <div class="mx-auto max-w-max">
+      <button
+        v-for="(page, index) in pages"
+        :key="index"
+        class="mr-2"
+        @click="pageUpdate(page)"
+      >
+        {{ page }}
+      </button>
     </div>
-    <button v-show="deleteArray.length" @click="deleteImages(deleteArray)">
+    <button
+      v-show="deleteArray.length"
+      @click="deleteImages(deleteArray)"
+      class="fixed bottom-0 right-0 p-1 bg-blue-300"
+    >
       Delete
     </button>
   </section>
@@ -23,22 +39,62 @@ export default {
   data: () => {
     return {
       deleteArray: [],
+      currentPage: 1,
+      lastPage: 1,
+      pages: [],
     };
   },
   computed: {
     ...mapState(["stateUser", "stateHashArray"]),
   },
-  created() {
-    this.updateHashArray();
+  async created() {
+    this.setStateHashArray(await this.getHashArray(this.currentPage - 1));
+    this.lastPage = Number(await this.getTotalPages());
+    this.paginationHandler();
   },
   methods: {
-    async updateHashArray() {
-      const response = await fetch("../api/image");
-      const data = await response.json();
-      if (data) {
-        this.setStateHashArray(data);
-        console.log("Set State Hash Array");
+    // TODO: Write this handler better, piece of shit code.
+    paginationHandler() {
+      for (let i = this.currentPage - 1; i < this.currentPage + 2; i++) {
+        if (i === 0) continue;
+        if (i === this.lastPage) break;
+        this.pages.push(i);
+      }
+      if (!this.pages.includes(1)) {
+        this.pages.unshift(1);
+      }
+      if (!this.pages.includes(this.lastPage)) {
+        this.pages.push(this.lastPage);
       }
+      // if (this.currentPage - 1 > 2) {
+      //   this.pages.splice(1, 0, "...");
+      // }
+      // if (this.lastPage - this.currentPage > 2) {
+      //   this.pages.splice(this.pages.length - 1, 0, "...");
+      // }
+    },
+    async pageUpdate(pageNumber) {
+      this.currentPage = pageNumber;
+      this.setStateHashArray(await this.getHashArray(this.currentPage - 1));
+    },
+    async getHashArray(pageEntry) {
+      const response = await fetch(`/api/page/${pageEntry}/image`);
+      const imageEntries = await response.json();
+      if (imageEntries === null) {
+        return;
+      }
+      let hashArray = [];
+      imageEntries.forEach((imageEntry) => {
+        if (imageEntry.hash !== "") {
+          hashArray.unshift(imageEntry.hash);
+        }
+      });
+      return hashArray;
+    },
+    async getTotalPages() {
+      const response = await fetch("/api/page");
+      const totalPages = await response.text();
+      return totalPages;
     },
     appendToDeleteArray(...args) {
       const [checked, hash] = args;
@@ -59,27 +115,4 @@ export default {
     ...mapActions(["setStateHashArray"]),
   },
 };
-</script>
-
-<style scoped>
-#list-container {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  position: relative;
-}
-#item-container {
-  max-width: 20%;
-  display: flex;
-  flex-direction: column;
-}
-button {
-  position: fixed;
-  bottom: 1em;
-  right: 1em;
-  padding: 1em 1em;
-  background: lightblue;
-  color: rgb(47, 42, 42);
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file