diff --git a/src/components/pages/HomePage.tsx b/src/components/pages/HomePage.tsx
index db19ce4..7fc1695 100644
--- a/src/components/pages/HomePage.tsx
+++ b/src/components/pages/HomePage.tsx
@@ -8,6 +8,7 @@ const HomePage = () => {
   useEffect(() => {
     const $homepage = document.querySelector<HTMLDivElement>('#homepage');
     if ($homepage) {
+      $homepage.style.display = 'flex'; // ?overrides the {display: none} on 'HomePage.scss'. This is to prevent the homepage from showing before animation is applied.
       $homepage.classList.add('blend-in-out');
     }
   });
diff --git a/src/styles/pages/HomePage.scss b/src/styles/pages/HomePage.scss
index 66de874..b20d654 100644
--- a/src/styles/pages/HomePage.scss
+++ b/src/styles/pages/HomePage.scss
@@ -6,6 +6,9 @@
 @import '../_mixins.scss';
 
 .homepage {
+  display: none;
+  flex-direction: column;
+
   @include component-code-snippet('const HomePage = () => {');
 
   user-select: none;
@@ -57,7 +60,7 @@
   }
 
   @media (min-width: 768px) {
-    display: flex;
+    flex-direction: row;
     justify-content: space-between;
     align-items: center;
     height: 100vh;