diff --git a/index.html b/index.html
index 3f33488..d9ad47e 100644
--- a/index.html
+++ b/index.html
@@ -21,6 +21,15 @@
     <div id="rectangle6"></div>
     <div id="header-background"></div>
     <img src="./resources/images/logo1.svg" id="logo1">
+
+    <div id="intro-landing">
+      <div class="intro-quote">
+        WELCOME TO EASY-SELL!
+      </div>
+      <img src="resources/images/siteLogo.png" alt="Self Image" class="intro-image"/>
+    </div>
+    <script src="resources/javascript/loaderScreen.js"></script>
+
     <i class="fa fa-2x fa-bars" id="bars" onclick="show_hide()"> </i>
     <nav class="nav">
 
diff --git a/resources/css/landingpage.css b/resources/css/landingpage.css
index 3d19d86..605a14c 100644
--- a/resources/css/landingpage.css
+++ b/resources/css/landingpage.css
@@ -15,83 +15,82 @@ body {
 }
 
 #rectangle1 {
-    position: absolute;
-    width: 17.552083333333332%;
-    height: 432.9722222222222px;
-    left: 0%;
-    top: 27px;
-    z-index: -2;
-    background: rgba(138, 222, 155, 0.2);
+  position: absolute;
+  width: 17.552083333333332%;
+  height: 432.9722222222222px;
+  left: 0%;
+  top: 27px;
+  z-index: -2;
+  background: rgba(138, 222, 155, 0.2);
 }
 
 #rectangle2 {
-    position: absolute;
-    width: 11.197916666666668%;
-    height: 277.77777777777777px;
-    left: 62.291666666666664%;
-    top: 157px;
-    z-index: -2;
-    background: rgba(138, 222, 155, 0.2);
+  position: absolute;
+  width: 11.197916666666668%;
+  height: 277.77777777777777px;
+  left: 62.291666666666664%;
+  top: 157px;
+  z-index: -2;
+  background: rgba(138, 222, 155, 0.2);
 }
 
 #rectangle3 {
-    z-index: -2;
-    position: absolute;
-    width: 15.102083333333332%;
-    height: 435.00000000000006px;
-    left: 84.94791666666667%;
-    top: 33px;
-    background: rgba(138, 222, 155, 0.2);
+  z-index: -2;
+  position: absolute;
+  width: 15.102083333333332%;
+  height: 435.00000000000006px;
+  left: 84.94791666666667%;
+  top: 33px;
+  background: rgba(138, 222, 155, 0.2);
 }
 
 #rectangle4 {
-    position: absolute;
-    width: 15.312500000000002%;
-    height: 378.00000000000006px;
-    left: 3.125%;
-    top: 613px;
-    z-index: -2;
-    background: rgba(138, 222, 155, 0.2);
+  position: absolute;
+  width: 15.312500000000002%;
+  height: 378.00000000000006px;
+  left: 3.125%;
+  top: 613px;
+  z-index: -2;
+  background: rgba(138, 222, 155, 0.2);
 }
 
 #rectangle5 {
-    position: absolute;
-    width: 11.197916666666668%;
-    height: 277.77777777777777px;
-    left: 34.166666666666664%;
-    top: 613px;
-    z-index: -2;
-    background: rgba(138, 222, 155, 0.2);
+  position: absolute;
+  width: 11.197916666666668%;
+  height: 277.77777777777777px;
+  left: 34.166666666666664%;
+  top: 613px;
+  z-index: -2;
+  background: rgba(138, 222, 155, 0.2);
 }
 
 #rectangle6 {
-    position: absolute;
-    width: 11.979166666666668%;
-    height: 297.00000000000006px;
-    left: 72.96875%;
-    top: 572px;
-    z-index: -2;
-    background: rgba(138, 222, 155, 0.2);
+  position: absolute;
+  width: 11.979166666666668%;
+  height: 297.00000000000006px;
+  left: 72.96875%;
+  top: 572px;
+  z-index: -2;
+  background: rgba(138, 222, 155, 0.2);
 }
 
 .fa-bars {
-    display: none;
+  display: none;
 }
 
 #rectangle7 {
-    position: relative;
-    width: 46.041666666666664%;
-    background: #D2F3DE;
-    border-radius: 12px;
-
+  position: relative;
+  width: 46.041666666666664%;
+  background: #d2f3de;
+  border-radius: 12px;
 }
 
 .container10 {
-    padding-top: 178px;
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    margin-bottom: 250px;
+  padding-top: 178px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 250px;
 }
 
 #header-background {
@@ -131,9 +130,9 @@ nav {
 }
 
 .main-nav {
-    flex: 1;
-    text-align: right;
-    justify-content: right;
+  flex: 1;
+  text-align: right;
+  justify-content: right;
 }
 
 nav ul {
@@ -147,26 +146,59 @@ nav li {
     position: relative;
 }
 
-#scrollTOP{
-   
-    position: fixed;
-    right: 15px;
-    bottom: 15px;
-    width: 40px;
-    height: 40px;
-    display: grid;
-    place-content: center;
-    border-radius: 50%;
-    background: #01AF57;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
-    color: #ffffff;
-    border: none;
-    outline: none;
-    cursor: pointer;
-}
-
-#scrollTOP:active{
-    background-color: #328543;
+#intro-landing {
+  min-width: 135px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  background: rgb(12, 36, 17);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  padding-right: 25px;
+  padding-left: 36px;
+}
+
+.intro-image {
+  scale: 0.6;
+  z-index: 10;
+  position: relative;
+}
+
+.intro-quote {
+  position: relative;
+  color: white;
+  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+  font-size: 2rem;
+  font-weight: bold;
+  text-align: center;
+  z-index: 10;
+  padding-left: 29px;
+}
+
+#scrollTOP {
+  position: fixed;
+  right: 15px;
+  bottom: 15px;
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-content: center;
+  border-radius: 50%;
+  background: #01af57;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+  color: #ffffff;
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+
+#scrollTOP:active {
+  background-color: #328543;
 }
 
 #li3 {
@@ -184,20 +216,20 @@ nav li a {
 }
 
 #try {
-    color: #F6FFFA;
-    background: #01AF57;
-    border-radius: 20px;
+  color: #f6fffa;
+  background: #01af57;
+  border-radius: 20px;
 }
 
 .container1 {
-    margin-top: 300px;
-    width: 100%;
-    height: auto;
-    display: flex;
-    flex-flow: column;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 433px;
+  margin-top: 300px;
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 433px;
 }
 
 #box1 {
@@ -233,13 +265,13 @@ nav li a {
 }
 
 .container2 {
-    position: relative;
-    width: 35%;
-    display: flex;
-    flex-flow: column;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin-left: 60px;
+  position: relative;
+  width: 35%;
+  display: flex;
+  flex-flow: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-left: 60px;
 }
 
 .box3{
@@ -280,13 +312,13 @@ nav li a {
 }
 
 .container3 {
-    position: relative;
-    width: 20%;
-    height: auto;
-    background: #01AF57;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  position: relative;
+  width: 20%;
+  height: auto;
+  background: #01af57;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .container3 p {
@@ -296,16 +328,16 @@ nav li a {
 }
 
 .container11 {
-    display: block;
-    position: relative;
-    width: 80%;
-    padding-bottom: 97px;
+  display: block;
+  position: relative;
+  width: 80%;
+  padding-bottom: 97px;
 }
 
 .container311 {
-    display: flex;
-    position: relative;
-    width: 100%;
+  display: flex;
+  position: relative;
+  width: 100%;
 }
 
 #box7 {
@@ -338,130 +370,132 @@ nav li a {
 }
 
 .container12 {
-    padding-top: 100px;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
+  padding-top: 100px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
 }
 
 #rev1,
 #rev2,
 #rev3,
 #rev4 {
-    position: relative;
-    margin: 30px;
-    padding: 30px;
+  position: relative;
+  margin: 30px;
+  padding: 30px;
 }
 
-#q1:hover, #q2:hover, #q3:hover, #q4:hover{
-    scale: 1.07;
-    transition-duration: 0.2s;
+#q1:hover,
+#q2:hover,
+#q3:hover,
+#q4:hover {
+  scale: 1.07;
+  transition-duration: 0.2s;
 }
 
 #q1,
 #q2,
 #q3,
 #q4 {
-    display: flex;
+  display: flex;
 }
 
 #qq1,
 #qq2,
 #qq3,
 #qq4 {
-    color: #01AF57;
-    z-index: 2;
+  color: #01af57;
+  z-index: 2;
 }
 
 #qq1,
 #qq3 {
-    position: relative;
-    right: -240px;
-    top: 10px;
+  position: relative;
+  right: -240px;
+  top: 10px;
 }
 
 #qq2,
 #qq4 {
-    position: relative;
-    top: 10px;
-    right: -70px;
+  position: relative;
+  top: 10px;
+  right: -70px;
 }
 
 #rev1,
 #rev2,
 #rev3,
 #rev4 {
-    display: grid;
-    grid-template-columns: 130fr 358fr;
-    grid-template-rows: 6fr 1fr 1fr;
-    background: rgba(31, 36, 32, 0.9);
-    border-radius: 12px;
-    font-size: 18px;
-    color: #F6FFFA;
-    flex-grow: 1;
+  display: grid;
+  grid-template-columns: 130fr 358fr;
+  grid-template-rows: 6fr 1fr 1fr;
+  background: rgba(31, 36, 32, 0.9);
+  border-radius: 12px;
+  font-size: 18px;
+  color: #f6fffa;
+  flex-grow: 1;
 }
 
 #rev1,
 #rev3 {
-    margin-left: 200px;
+  margin-left: 200px;
 }
 
 #rev2,
 #rev4 {
-    margin-right: 200px;
+  margin-right: 200px;
 }
 
 .chillguy {
-    align-self: flex-end;
-    color: #4D5B50;
-    font-size: 20px;
+  align-self: flex-end;
+  color: #4d5b50;
+  font-size: 20px;
 }
 
 .produ {
-    color: #4D5B50;
+  color: #4d5b50;
 }
 
 .pfp {
-    justify-self: center;
-    width: 80%;
-    max-width: 100px;
-    min-width: 30px;
-    padding-right: 20px;
+  justify-self: center;
+  width: 80%;
+  max-width: 100px;
+  min-width: 30px;
+  padding-right: 20px;
 }
 
 #rectangle9 {
-    display: flex;
-    flex-direction: row;
-    position: relative;
-    width: 6.666666666666667%;
-    height: 12px;
-    margin-top: 64px;
-    background: #D2F3DE;
-    border-radius: 30px;
-    margin-left: 49%;
-    min-width: 90px;
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  width: 6.666666666666667%;
+  height: 12px;
+  margin-top: 64px;
+  background: #d2f3de;
+  border-radius: 30px;
+  margin-left: 49%;
+  min-width: 90px;
 }
 
 #rectangle10 {
-    position: relative;
-    width: 35%;
-    background: #01AF57;
-    border-radius: 30px;
+  position: relative;
+  width: 35%;
+  background: #01af57;
+  border-radius: 30px;
 }
 
 .container5 {
-    display: none;
-    position: relative;
-    width: 100%;
-    display: flex;
+  display: none;
+  position: relative;
+  width: 100%;
+  display: flex;
 }
 
 .cont5-text {
-    width: 50%;
-    position: relative;
+  width: 50%;
+  position: relative;
 }
 
-
 #faq {
     position: relative;
     margin-top: 415px;
@@ -510,14 +544,14 @@ nav li a {
 }
 
 .container6 {
-    position: relative;
-    width: 50%;
-    display: flex;
-    flex-flow: column;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin-top: 262px;
-    margin-bottom: 346px;
+  position: relative;
+  width: 50%;
+  display: flex;
+  flex-flow: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 262px;
+  margin-bottom: 346px;
 }
 
 .ans{
@@ -562,133 +596,147 @@ nav li a {
 }
 
 .icon1 {
-    width: 28px;
-    padding-top: 6px;
-    margin: 6px;
+  width: 28px;
+  padding-top: 6px;
+  margin: 6px;
 }
 
-
 .container7,
 .container72 {
-    position: relative;
-    background: #1F2420;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
+  position: relative;
+  background: #1f2420;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
 }
 
 .container72 {
-    display: none;
+  display: none;
 }
 
 .row1 {
-    margin-top: 20px;
-    width: 30%;
-    display: grid;
-    grid-template-columns: 1fr 8fr;
-    grid-template-rows: 1fr 1fr 1fr;
-    margin-left: 60px;
+  margin-top: 20px;
+  width: 30%;
+  display: grid;
+  grid-template-columns: 1fr 8fr;
+  grid-template-rows: 1fr 1fr 1fr;
+  margin-left: 60px;
 }
 
 .abc {
-    display: flex;
-    justify-content: center;
-    border-radius: 50px;
-    background: #344137;
-    margin: 10px;
-    padding: 10px;
+  display: flex;
+  justify-content: center;
+  border-radius: 50px;
+  background: #344137;
+  margin: 10px;
+  padding: 10px;
 }
 
-.abc:hover{
-    background: #01AF57;
-    scale: 1.2;
-    transition-duration: 0.3s;
+.abc:hover {
+  background: #01af57;
+  scale: 1.2;
+  transition-duration: 0.3s;
 }
 
 .def {
-    padding-top: 10px;
-    padding-bottom: 10px;
-    color: #F6FFFA;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  color: #f6fffa;
 }
 
 #logo2 {
-    width: 40px;
+  width: 40px;
 }
 
 .contact {
-    align-self: center;
+  align-self: center;
 }
 
 .row1 ul {
-    list-style-type: none;
+  list-style-type: none;
 }
 
 .row2 {
-    display: flex;
-    flex-direction: column;
-    width: 40%;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  width: 40%;
+  align-items: center;
 }
 
 .row3 {
-    width: 30%
+  width: 30%;
 }
 
 #logo2 {
-    width: 40%;
+  width: 40%;
 }
 
 .hasell {
-    display: flex;
-    margin-right: 30px;
+  display: flex;
+  margin-right: 30px;
 }
 
 #sell {
-    color: white;
-    font-size: 30px;
+  color: white;
+  font-size: 30px;
 }
 
 .social {
-    margin-top: 10px;
-    display: flex;
-    width: 100%;
-    justify-content: center;
+  margin-top: 10px;
+  display: flex;
+  width: 100%;
+  justify-content: center;
 }
 
 .ijk {
-    margin: 5px;
-    padding: 5px;
-    border-radius: 50px;
-    background: #344137;
+  margin: 5px;
+  padding: 5px;
+  border-radius: 50px;
+  background: #344137;
 }
 
-.ijk:hover{
-    background: #01AF57;
-    scale: 1.2;
-    transition-duration: 0.3s;
+.ijk:hover {
+  background: #01af57;
+  scale: 1.2;
+  transition-duration: 0.3s;
 }
 
 .row3 {
-    display: flex;
-    flex-direction: column;
-    margin-right: 40px;
+  display: flex;
+  flex-direction: column;
+  margin-right: 40px;
 }
 
 .umm {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
 }
 
 #abo {
-    color: #8FA898;
-    font-size: 24px;
+  color: #8fa898;
+  font-size: 24px;
 }
 
 #lor {
-    color: #fff;
-    font-size: 20px;
+  color: #fff;
+  font-size: 20px;
 }
 
+@media(max-width: 570px){
+    #intro-landing {
+        overflow-x: hidden;
+        display: inline;
+      }
+
+    .intro-image {
+        padding-top: 115px;
+        scale: 0.4;
+    }
+    .intro-quote {
+        padding-right: 100px;
+        padding-top: 115px;
+    }
+}
 
 @media (max-width:1250px) {
 
@@ -697,22 +745,22 @@ nav li a {
         font-size: 20px;
     }
 
-    #rev1,
-    #rev2,
-    #rev3,
-    #rev4 {
-        font-size: 14px;
-    }
+  #rev1,
+  #rev2,
+  #rev3,
+  #rev4 {
+    font-size: 14px;
+  }
 
-    #rev1,
-    #rev3 {
-        margin-left: 60px;
-    }
+  #rev1,
+  #rev3 {
+    margin-left: 60px;
+  }
 
-    #rev2,
-    #rev4 {
-        margin-right: 60px;
-    }
+  #rev2,
+  #rev4 {
+    margin-right: 60px;
+  }
 
     #ques1{
         font-size: 20px;
@@ -723,28 +771,27 @@ nav li a {
         margin-right: 100px;
     }
 
-    #qq1,
-    #qq3 {
-        right: -100px;
-    }
+  #qq1,
+  #qq3 {
+    right: -100px;
+  }
 }
 
-@media(max-width:800px) {
-
-    .nav {
-        justify-content: flex-end;
-        padding-left: 80%;
-    }
+@media (max-width: 800px) {
+  .nav {
+    justify-content: flex-end;
+    padding-left: 80%;
+  }
 
-    .main-nav {
-        display: none;
-        flex-direction: column;
-        text-align: center;
-        padding-top: 2px;
-        padding-bottom: 2px;
-        background: #01AF57;
-        z-index: 10;
-    }
+  .main-nav {
+    display: none;
+    flex-direction: column;
+    text-align: center;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    background: #01af57;
+    z-index: 10;
+  }
 
     #li3 {
         position: absolute;
@@ -755,176 +802,175 @@ nav li a {
         color: #000000;
     }
 
-    #bars {
-        padding-top: 10px;
-        margin: auto;
-        width: 90%;
-        display: flex;
-        justify-content: flex-end;
-    }
-
-    #rectangle1 {
-        width: 28.974358974358978%;
-        height: 200px;
-
-    }
-
-    #rectangle2 {
-        width: 14.102564102564102%;
-        height: 71px;
-        left: 50%;
-        top: 225px;
-    }
-
-    #rectangle3 {
-        width: 15%;
-        height: 165px;
-    }
-
-    #rectangle4 {
-        width: 23.846153846153847%;
-        height: 119px;
-        top: 500px;
-    }
-
-    #rectangle5 {
-        width: 14.102564102564102%;
-        height: 71px;
-        top: 400px;
-    }
-
-    #rectangle6 {
-        width: 20%;
-        height: 90px;
-        top: 500px;
-    }
-
-    .container1 {
-        margin-top: 220px;
-        margin-bottom: 300px;
-    }
-
-    #box1 {
-        font-size: 28px;
-        width: 91%;
-    }
-
-    #box2 {
-        font-size: 16px;
-        width: 91%;
-    }
-
-    .container10 {
-        padding-top: 72px;
-        flex-direction: column;
-        align-items: center;
-        margin-bottom: 50px;
-    }
+  #bars {
+    padding-top: 10px;
+    margin: auto;
+    width: 90%;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  #rectangle1 {
+    width: 28.974358974358978%;
+    height: 200px;
+  }
+
+  #rectangle2 {
+    width: 14.102564102564102%;
+    height: 71px;
+    left: 50%;
+    top: 225px;
+  }
+
+  #rectangle3 {
+    width: 15%;
+    height: 165px;
+  }
+
+  #rectangle4 {
+    width: 23.846153846153847%;
+    height: 119px;
+    top: 500px;
+  }
+
+  #rectangle5 {
+    width: 14.102564102564102%;
+    height: 71px;
+    top: 400px;
+  }
+
+  #rectangle6 {
+    width: 20%;
+    height: 90px;
+    top: 500px;
+  }
 
-    #rectangle7 {
-        height: 300px;
-        width: 91%;
-        margin-bottom: 36px;
-    }
+  .container1 {
+    margin-top: 220px;
+    margin-bottom: 300px;
+  }
 
-    .container2 {
-        width: 91%;
-        margin: auto;
-    }
+  #box1 {
+    font-size: 28px;
+    width: 91%;
+  }
 
-    .container311 {
-        flex-direction: column;
-    }
+  #box2 {
+    font-size: 16px;
+    width: 91%;
+  }
 
-    .container3 {
-        background: #fff;
-        width: 91%;
-        margin: auto;
-    }
+  .container10 {
+    padding-top: 72px;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 50px;
+  }
 
-    .container3 p {
-        color: #000000;
-        transform: rotate(0deg);
-        font-size: 40px;
-    }
+  #rectangle7 {
+    height: 300px;
+    width: 91%;
+    margin-bottom: 36px;
+  }
 
-    .container11 {
-        width: 91%;
-        margin: auto;
-    }
+  .container2 {
+    width: 91%;
+    margin: auto;
+  }
 
-    #box7 {
-        padding-top: 10px;
-        margin: auto;
-        font-size: 24px;
-    }
+  .container311 {
+    flex-direction: column;
+  }
 
-    #box8 {
-        font-size: 22px;
-        margin: auto;
-    }
+  .container3 {
+    background: #fff;
+    width: 91%;
+    margin: auto;
+  }
 
-    #q2,
-    #q4 {
-        display: none;
-    }
+  .container3 p {
+    color: #000000;
+    transform: rotate(0deg);
+    font-size: 40px;
+  }
 
-    #qq1,
-    #qq3 {
-        right: -40px;
-    }
+  .container11 {
+    width: 91%;
+    margin: auto;
+  }
 
-    #rev1,
-    #rev3 {
-        margin: auto;
-        margin-top: 25px;
-        margin-bottom: 25px;
-        font-size: 12px;
-    }
+  #box7 {
+    padding-top: 10px;
+    margin: auto;
+    font-size: 24px;
+  }
 
-    .container12 {
-        grid-template-columns: 1fr;
-        padding-top: 70px;
-    }
+  #box8 {
+    font-size: 22px;
+    margin: auto;
+  }
 
-    #rectangle9 {
-        width: 30%;
-        margin: auto;
-        margin-top: 64px;
-    }
+  #q2,
+  #q4 {
+    display: none;
+  }
+
+  #qq1,
+  #qq3 {
+    right: -40px;
+  }
+
+  #rev1,
+  #rev3 {
+    margin: auto;
+    margin-top: 25px;
+    margin-bottom: 25px;
+    font-size: 12px;
+  }
+
+  .container12 {
+    grid-template-columns: 1fr;
+    padding-top: 70px;
+  }
+
+  #rectangle9 {
+    width: 30%;
+    margin: auto;
+    margin-top: 64px;
+  }
 
-    .container5 {
-        flex-direction: column;
-    }
+  .container5 {
+    flex-direction: column;
+  }
 
-    .cont5-text {
-        width: 100%;
-    }
+  .cont5-text {
+    width: 100%;
+  }
 
-    #faq {
-        margin-top: 0px;
-        width: 91%;
-        font-size: 30px;
-        margin: auto;
-        left: 0px;
-        justify-content: center;
-    }
+  #faq {
+    margin-top: 0px;
+    width: 91%;
+    font-size: 30px;
+    margin: auto;
+    left: 0px;
+    justify-content: center;
+  }
 
-    #faq2 {
-        max-width: 91%;
-        font-size: 20px;
-        margin: auto;
-        justify-content: center;
-        text-align: center;
-        left: 0px;
-    }
+  #faq2 {
+    max-width: 91%;
+    font-size: 20px;
+    margin: auto;
+    justify-content: center;
+    text-align: center;
+    left: 0px;
+  }
 
-    .container6 {
-        padding-top: 20px;
-        width: 91%;
-        margin: auto;
-        margin-bottom: 50px;
-    }
+  .container6 {
+    padding-top: 20px;
+    width: 91%;
+    margin: auto;
+    margin-bottom: 50px;
+  }
 
     #ques1{
         margin-right: 0px;
@@ -939,37 +985,37 @@ nav li a {
         margin: 0.5rem;
     }
 
-    .container72 {
-        position: relative;
-        background: #1F2420;
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-        flex-direction: column;
-    }
-
-    .row1 {
-        padding-top: 20px;
-        width: auto;
-        margin: 20px;
-        font-size: 16px;
-    }
-
-    .row2 {
-        padding-top: 30px;
-        width: 300px;
-    }
-
-    .row3 {
-        padding-top: 40px;
-        margin: auto;
-        width: 90%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
+  .container72 {
+    position: relative;
+    background: #1f2420;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+  }
+
+  .row1 {
+    padding-top: 20px;
+    width: auto;
+    margin: 20px;
+    font-size: 16px;
+  }
+
+  .row2 {
+    padding-top: 30px;
+    width: 300px;
+  }
+
+  .row3 {
+    padding-top: 40px;
+    margin: auto;
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 
-    #lor {
-        font-size: 16px;
-    }
+  #lor {
+    font-size: 16px;
+  }
 }
diff --git a/resources/images/siteLogo.png b/resources/images/siteLogo.png
new file mode 100644
index 0000000..d68d712
Binary files /dev/null and b/resources/images/siteLogo.png differ
diff --git a/resources/javascript/loaderScreen.js b/resources/javascript/loaderScreen.js
new file mode 100644
index 0000000..a893064
--- /dev/null
+++ b/resources/javascript/loaderScreen.js
@@ -0,0 +1,27 @@
+window.addEventListener("load", function () {
+    const introLanding = document.getElementById("intro-landing");
+    const mainContent = document.querySelector(".main-content");
+    // Start the slide-away animation
+    introLanding.style.animation = "slideAway 2.5s ease-out 2s forwards";
+    // After the animation, hide the intro and show the main content
+    setTimeout(() => {
+      introLanding.style.display = "none";
+      mainContent.style.display = "block"; // Show the main content
+      document.body.style.overflow = "auto"; // Restore scrolling
+    }, 5000); // Match the animation duration (5 seconds)
+  });
+  // Inline keyframe animation
+  const style = document.createElement("style");
+  style.innerHTML = `
+  @keyframes slideAway {
+    0% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+    100% {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+  }
+`;
+  document.head.appendChild(style);
\ No newline at end of file