diff --git a/index.html b/index.html
index 9a053f5..6dbb705 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
     <!-- Put your HTML here -->
 
     <div class="wrapper">
-      <div id="user-interface" class="centered"></div>
+      <div id="user-interface" class="centered hidden"></div>
     </div>
 
     <!-- your data -->
diff --git a/public/style.css b/public/style.css
index 987aca2..57e1558 100644
--- a/public/style.css
+++ b/public/style.css
@@ -413,3 +413,12 @@ input[type='text'] {
     grid-column: 1;
   }
 }
+
+.hidden {
+  opacity: 0;
+}
+
+#user-interface.loaded {
+  opacity: 1;
+  transition: opacity 0.03s ease;
+}
diff --git a/src/pages/welcomePage.js b/src/pages/welcomePage.js
index 07a283c..4b49da5 100644
--- a/src/pages/welcomePage.js
+++ b/src/pages/welcomePage.js
@@ -11,6 +11,7 @@ import { initTimer } from '../utilities/timerPage.js';
 
 export const initWelcomePage = () => {
   const userInterface = document.getElementById(USER_INTERFACE_ID);
+  userInterface.classList.add('loaded');
   userInterface.innerHTML = '';
 
   const welcomeElement = createWelcomeElement();