diff --git a/bun.lockb b/bun.lockb
index 62b6e75..f6bc126 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 027ebe4..0fd3fa0 100644
--- a/package.json
+++ b/package.json
@@ -14,10 +14,13 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
     "axios": "^1.7.2",
+    "odometer": "^0.4.8",
     "pinia": "^2.1.7",
     "vue": "^3.4.29",
-    "vue-router": "^4.3.3"
+    "vue-router": "^4.3.3",
+    "vue3-odometer": "^0.1.3"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",
diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
index 178ef29..c7c907e 100644
--- a/src/components/Gallery.vue
+++ b/src/components/Gallery.vue
@@ -1,148 +1,41 @@
-<script setup>
-import Navigation from "./Navigation.vue";
-</script>
+<template>
+  <div class="masonry-container p-8 relative">
+    <div v-for="artwork in artworks" :key="artwork.id" class="masonry-item">
+      <img
+        :src="artwork.image_url"
+        :alt="artwork.title"
+        v-if="artwork.image_url"
+      />
+      <h2>{{ artwork.title }}</h2>
+      <p>Artist: {{ artwork.artist_title }}</p>
+    </div>
+
+    <div ref="bottom" class="bottom-detector"></div>
+  </div>
+</template>
 
 <script>
-import axios from "axios";
-
 export default {
-  data() {
-    return {
-      artworks: [],
-      loading: true,
-      error: null,
-      page: 1,
-      observer: null,
-      initialLoad: true,
-    };
-  },
-
+  props: ["artworks"],
   mounted() {
-    this.fetchArtworks();
     this.setupInfiniteScroll();
   },
-
   methods: {
-    async fetchArtworks() {
-      try {
-        const response = await axios.get(
-          "https://api.artic.edu/api/v1/artworks",
-          {
-            params: {
-              limit: 20,
-              page: this.page,
-              fields: "id,title,image_id,artist_title",
-            },
-          }
-        );
-        const newArtworks = response.data.data.map((artwork) => ({
-          ...artwork,
-          image_url: `https://www.artic.edu/iiif/2/${artwork.image_id}/full/843,/0/default.jpg`,
-          size: this.getRandomSize(),
-        }));
-        this.artworks = [...this.artworks, ...newArtworks];
-        this.page++;
-      } catch (error) {
-        this.error = "An error occurred while fetching artworks";
-        console.error("Error fetching artworks:", error);
-      } finally {
-        setTimeout(() => {
-          this.loading = false;
-          this.initialLoad = false;
-        }, 3000); // 3000ms to allow for fade-out of loader
-      }
-    },
-    getRandomSize() {
-      const sizes = ["small", "medium", "large"];
-      return sizes[Math.floor(Math.random() * sizes.length)];
-    },
     setupInfiniteScroll() {
-      this.observer = new IntersectionObserver(
+      const observer = new IntersectionObserver(
         ([entry]) => {
-          if (entry.isIntersecting && !this.loading) {
-            this.fetchArtworks();
+          if (entry.isIntersecting) {
+            this.$emit("load-more");
           }
         },
         { rootMargin: "200px" }
       );
-
-      this.$nextTick(() => {
-        this.observer.observe(this.$refs.bottom);
-      });
+      observer.observe(this.$refs.bottom);
     },
   },
-  beforeUnmount() {
-    if (this.observer) {
-      this.observer.disconnect();
-    }
-  },
 };
 </script>
-
-<template>
-  <div class="w-screen h-svh overflow-y-scroll relative bg-neutral-100">
-    <transition name="fade">
-      <div
-        v-if="loading && initialLoad"
-        key="loading"
-        class="w-screen h-screen flex bg-[#b50938]"
-      >
-        <div
-          class="my-auto mx-auto text-center justify-center w-full gap-2 flex"
-        >
-          <h1 class="text-8xl my-auto text-white font-medium">
-            Art Institute Chicago
-          </h1>
-          <h1
-            class="text-[16rem] tracking-tighter my-auto font-display text-white"
-          >
-            97%
-          </h1>
-        </div>
-      </div>
-    </transition>
-
-    <transition name="fade-second">
-      <div v-if="!loading && !initialLoad">
-        <div v-if="error">{{ error }}</div>
-        <div v-else>
-          <Navigation />
-          <div class="masonry-container p-8 relative">
-            <div v-for="artwork in artworks" :key="artwork.id">
-              <div class="masonry-item">
-                <img
-                  :src="artwork.image_url"
-                  :alt="artwork.title"
-                  v-if="artwork.image_url"
-                />
-                <h2>{{ artwork.title }}</h2>
-                <p>Artist: {{ artwork.artist_title }}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div ref="bottom" class="bottom-detector"></div>
-        <div v-if="loading && artworks.length > 0">Loading more...</div>
-      </div>
-    </transition>
-  </div>
-</template>
-
 <style scoped>
-.fade-enter-active,
-.fade-leave-active,
-.fade-second-enter-active,
-.fade-second-leave-active {
-  transition: opacity 1.5s;
-}
-
-.fade-enter-from,
-.fade-leave-to,
-.fade-second-enter-from,
-.fade-second-leave-to {
-  opacity: 0;
-}
-
 .masonry-container {
   column-count: 3; /* Adjust based on your preferred layout */
   column-gap: 3rem;
@@ -186,6 +79,19 @@ export default {
 @media (max-width: 800px) {
   .masonry-item {
     padding: 2rem;
+    animation: fadeSlideUp 1.5s forwards;
+    animation-delay: 6s;
+    opacity: 0; /* Ensure initial state is set correctly */
+  }
+}
+@keyframes fadeSlideUp {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index f2ed365..8324f0e 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -57,9 +57,12 @@
       >
         <a
           class="flex-p-8 my-auto mx-auto font-semibold text-sm lg:text-lg hover:bg-neutral-200 px-6 object-center w-full h-full text-center flex content-center transition-all"
-          href="/visit"
-          ><span class="mx-auto my-auto">Visit</span></a
+          href="https://www.artic.edu/visit"
+          target="_blank"
+          rel="noopener noreferrer"
         >
+          <span class="mx-auto my-auto">Visit</span>
+        </a>
         <a
           class="flex-p-8 my-auto mx-auto font-semibold text-sm lg:text-lg px-4 object-center w-full h-full text-center flex content-center"
           href="/about"
diff --git a/src/main.ts b/src/main.ts
index 4565996..73022de 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,6 +2,7 @@ import "./assets/style.css";
 
 import { createApp } from "vue";
 import { createPinia } from "pinia";
+import "animate.css";
 
 import App from "./App.vue";
 import router from "./router";
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index bbaf9dc..60b3c7e 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,11 +1,183 @@
-<script setup lang="ts">
-import Gallery from "../components/Gallery.vue";
+<template>
+  <div class="w-screen h-svh overflow-y-scroll bg-neutral-100">
+    <transition mode="out-in" name="fade">
+      <div
+        v-if="loading"
+        key="loading"
+        class="w-screen h-screen gap-2 flex bg-[#b50938]"
+      >
+        <div class="flex flex-col md:flex-row gap-2 mx-auto my-auto">
+          <h1 class="xl:text-8xl text-3xl flex-none text-white my-auto mx-auto">
+            Art Institute Chicago
+          </h1>
+
+          <div class="flex">
+            <div
+              class="custom-counter text-6xl md:text-8xl xl:text-[14rem] italic pr-3 text-white tracking-tighter overflow-hidden my-auto mx-auto flex font-display"
+            >
+              {{ formattedNumber }}
+              <h1
+                class="text-6xl md:text-8xl xl:text-[14rem] text-white italic tracking-tighter my-auto mx-auto font-display"
+              >
+                %
+              </h1>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else key="loaded">
+        <Navigation />
+
+        <Gallery :artworks="artworks" @load-more="loadMoreArtworks" />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
 import Navigation from "../components/Navigation.vue";
+import Gallery from "../components/Gallery.vue";
+import axios from "axios";
+import { ref, onMounted, computed } from "vue";
+
+export default {
+  components: { Navigation, Gallery },
+  setup() {
+    const number = ref(1);
+    const loading = ref(true);
+    const artworks = ref([]);
+    const page = ref(1);
+
+    const formattedNumber = computed(() => {
+      if (number.value >= 100) {
+        return number.value.toString();
+      } else {
+        return number.value.toString().padStart(2, " ");
+      }
+    });
+
+    const animateNumber = (target, duration) => {
+      const start = number.value;
+      const range = target - start;
+      const startTime = performance.now();
+
+      const updateNumber = (currentTime) => {
+        const elapsedTime = currentTime - startTime;
+        if (elapsedTime < duration) {
+          number.value = Math.round(start + (range * elapsedTime) / duration);
+          requestAnimationFrame(updateNumber);
+        } else {
+          number.value = target;
+        }
+      };
+
+      requestAnimationFrame(updateNumber);
+    };
+
+    onMounted(() => {
+      setTimeout(() => {
+        animateNumber(90, 2000);
+      }, 100);
+
+      setTimeout(() => {
+        animateNumber(100, 1000);
+      }, 2100);
+    });
+
+    const fetchArtworks = async () => {
+      loading.value = true;
+      try {
+        const response = await axios.get(
+          "https://api.artic.edu/api/v1/artworks",
+          {
+            params: {
+              limit: 20,
+              page: page.value,
+              fields: "id,title,image_id,artist_title",
+            },
+          }
+        );
+
+        const newArtworks = response.data.data.map((artwork) => ({
+          ...artwork,
+          image_url: `https://www.artic.edu/iiif/2/${artwork.image_id}/full/843,/0/default.jpg`,
+        }));
+        artworks.value = newArtworks;
+        page.value++;
+      } catch (error) {
+        console.error("Error fetching artworks:", error);
+      } finally {
+        setTimeout(() => {
+          loading.value = false;
+        }, 3000);
+      }
+    };
+
+    const loadMoreArtworks = async () => {
+      try {
+        const response = await axios.get(
+          "https://api.artic.edu/api/v1/artworks",
+          {
+            params: {
+              limit: 20,
+              page: page.value,
+              fields: "id,title,image_id,artist_title",
+            },
+          }
+        );
+
+        const newArtworks = response.data.data.map((artwork) => ({
+          ...artwork,
+          image_url: `https://www.artic.edu/iiif/2/${artwork.image_id}/full/843,/0/default.jpg`,
+        }));
+
+        artworks.value = [...artworks.value, ...newArtworks];
+        page.value++;
+      } catch (error) {
+        console.error("Error loading more artworks:", error);
+      }
+    };
+
+    onMounted(fetchArtworks);
+
+    return {
+      loading,
+      artworks,
+      formattedNumber,
+      loadMoreArtworks,
+    };
+  },
+};
 </script>
 
-<template>
-  <main class="overflow-hidden">
-    <!-- <Navigation /> -->
-    <Gallery />
-  </main>
-</template>
+<style scoped>
+/* ************************ */
+/* ************************ */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 1.5s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* ******************************* */
+/* GALLERY TRANSITION */
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+.list-enter-from,
+.list-leave-to {
+  transition-delay: 10s;
+  opacity: 0;
+  transform: translateY(30px);
+}
+/* GALLERY TRANSITION */
+/* ******************************* */
+/* .custom-counter {
+  width: 24rem;
+  text-align: right;
+} */
+</style>