diff --git a/class_registration_app/package-lock.json b/class_registration_app/package-lock.json
index 77b9d05..7b9c703 100644
--- a/class_registration_app/package-lock.json
+++ b/class_registration_app/package-lock.json
@@ -12,6 +12,7 @@
         "ngrok": "^5.0.0-beta.2",
         "npm-run-all": "^4.1.5",
         "pinia": "^2.1.6",
+        "v-smooth-scroll": "^2.0.0-beta.2",
         "vue": "^3.3.4",
         "vue-router": "^4.2.4"
       },
@@ -19761,6 +19762,14 @@
         "uuid": "bin/uuid"
       }
     },
+    "node_modules/v-smooth-scroll": {
+      "version": "2.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/v-smooth-scroll/-/v-smooth-scroll-2.0.0-beta.2.tgz",
+      "integrity": "sha512-uGWjayzx3mY1QAlDFe+JVCyYPpUqec3NE3tBXq8leIkS23zPcuXmmF2R2MY1UT7uP5gEgEo/Y5blXq37fnXYJw==",
+      "peerDependencies": {
+        "vue": "^3.0.1"
+      }
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
diff --git a/class_registration_app/package.json b/class_registration_app/package.json
index 1222754..f5a1d90 100644
--- a/class_registration_app/package.json
+++ b/class_registration_app/package.json
@@ -17,6 +17,7 @@
     "ngrok": "^5.0.0-beta.2",
     "npm-run-all": "^4.1.5",
     "pinia": "^2.1.6",
+    "v-smooth-scroll": "^2.0.0-beta.2",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },
diff --git a/class_registration_app/src/assets/2000HuskyLogo.jpeg b/class_registration_app/src/assets/2000HuskyLogo.jpeg
new file mode 100644
index 0000000..18186d5
Binary files /dev/null and b/class_registration_app/src/assets/2000HuskyLogo.jpeg differ
diff --git a/class_registration_app/src/assets/base.css b/class_registration_app/src/assets/base.css
index 8816868..48db170 100644
--- a/class_registration_app/src/assets/base.css
+++ b/class_registration_app/src/assets/base.css
@@ -62,6 +62,7 @@ body {
   min-height: 100vh;
   color: var(--color-text);
   background: var(--color-background);
+  background-color: white;
   transition:
     color 0.5s,
     background-color 0.5s;
diff --git a/class_registration_app/src/assets/case.jpeg b/class_registration_app/src/assets/case.jpeg
new file mode 100644
index 0000000..850eec5
Binary files /dev/null and b/class_registration_app/src/assets/case.jpeg differ
diff --git a/class_registration_app/src/assets/currentLogo.png b/class_registration_app/src/assets/currentLogo.png
new file mode 100644
index 0000000..e4cf66e
Binary files /dev/null and b/class_registration_app/src/assets/currentLogo.png differ
diff --git a/class_registration_app/src/assets/fall.jpeg b/class_registration_app/src/assets/fall.jpeg
new file mode 100644
index 0000000..cbfdb83
Binary files /dev/null and b/class_registration_app/src/assets/fall.jpeg differ
diff --git a/class_registration_app/src/assets/health.jpeg b/class_registration_app/src/assets/health.jpeg
new file mode 100644
index 0000000..7fd3f49
Binary files /dev/null and b/class_registration_app/src/assets/health.jpeg differ
diff --git a/class_registration_app/src/assets/library.jpeg b/class_registration_app/src/assets/library.jpeg
new file mode 100644
index 0000000..80e73be
Binary files /dev/null and b/class_registration_app/src/assets/library.jpeg differ
diff --git a/class_registration_app/src/assets/main.css b/class_registration_app/src/assets/main.css
index cc51580..d5aaabe 100644
--- a/class_registration_app/src/assets/main.css
+++ b/class_registration_app/src/assets/main.css
@@ -1,8 +1,32 @@
 @import './base.css';
 
+@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,800|Roboto:400,700);*,:after,:before {
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+  --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+  --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+  --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+  --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+  --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+  --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+  --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+  --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+  --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+
+@font-face {
+  font-family: UConn;
+  font-style: normal;
+  font-weight: 400;
+  src: url(//uconn-cdn-files.s3.us-east-2.stackpathstorage.com/shared/fonts/uconn/uconn.eot);
+  src: url(//uconn-cdn-files.s3.us-east-2.stackpathstorage.com/shared/fonts/uconn/uconn.eot?#iefix) format("embedded-opentype"),url(//uconn-cdn-files.s3.us-east-2.stackpathstorage.com/shared/fonts/uconn/uconn.svg#uconnregular) format("svg"),url(//uconn-cdn-files.s3.us-east-2.stackpathstorage.com/shared/fonts/uconn/uconn.woff) format("woff"),url(//uconn-cdn-files.s3.us-east-2.stackpathstorage.com/shared/fonts/uconn/uconn.ttf) format("truetype")
+}
+
 #app {
   min-width: 100vw;
-  
   padding: 0rem;
 
   font-weight: normal;
@@ -19,7 +43,6 @@ a,
 
 @media (hover: hover) {
   a:hover {
-    background-color: hsla(226, 93%, 53%, 0.299);
     cursor:pointer;
   }
 }
@@ -93,21 +116,15 @@ a,
   padding: 1.2rem 3rem;
   position: relative;
   text-transform: uppercase;
-  transition: 0.2s;
+  transition: 0.4s;
+  font-size: 1vw;
 }
 .btn-97:hover {
   box-shadow: 0 6px 0 -4px #fff, 0 9px 0 -4px #aaa, 0 12px 0 -4px #000;
   transform: translateY(-5px);
 }
 
-.homehead{
-  background-color: #000e2f;
-  color: white;
-  font-size: 30px;
-  width: 100vw;
-  text-align: center;
-  padding: 12px;
-}
+
 
 
 .course-list-item {
diff --git a/class_registration_app/src/assets/union.jpeg b/class_registration_app/src/assets/union.jpeg
new file mode 100644
index 0000000..05ccbdf
Binary files /dev/null and b/class_registration_app/src/assets/union.jpeg differ
diff --git a/class_registration_app/src/assets/winter.jpeg b/class_registration_app/src/assets/winter.jpeg
new file mode 100644
index 0000000..304fce5
Binary files /dev/null and b/class_registration_app/src/assets/winter.jpeg differ
diff --git a/class_registration_app/src/assets/winter2.jpeg b/class_registration_app/src/assets/winter2.jpeg
new file mode 100644
index 0000000..dd7db22
Binary files /dev/null and b/class_registration_app/src/assets/winter2.jpeg differ
diff --git a/class_registration_app/src/components/CourseSearch.vue b/class_registration_app/src/components/CourseSearch.vue
index 1fdf0d5..3d9f68e 100644
--- a/class_registration_app/src/components/CourseSearch.vue
+++ b/class_registration_app/src/components/CourseSearch.vue
@@ -114,6 +114,9 @@ document.addEventListener("click", function() {
 
 
 <template>
+    <RouterLink to="./dashboard">
+      <button>Back</button>
+    </RouterLink>
     <div class="container" id="container">
         <h1 class="title">UConn Course Search</h1>
         <div class="search">
diff --git a/class_registration_app/src/components/DashBoard.vue b/class_registration_app/src/components/DashBoard.vue
index d7c01c3..e71cfab 100644
--- a/class_registration_app/src/components/DashBoard.vue
+++ b/class_registration_app/src/components/DashBoard.vue
@@ -2,13 +2,17 @@
 </script>
 
 <template>
-    <div class="homehead">
-        UConn&ensp;|&ensp;University of Connecticut
+    <div class="top">
+        <img class="logos" src="../assets/currentLogo.png">
+        <img class="logos" src="https://logos-world.net/wp-content/uploads/2022/01/UConn-Huskies-Logo-1970.png">
+        <h2 class="uconn">UCONN</h2>
+        <img class="logos" src="https://1000logos.net/wp-content/uploads/2017/08/UConn-Huskies-Logo-1959.png">
+        <img class="logos" src="../assets/2000HuskyLogo.jpeg">
      </div>
     <div class="dashboard">
         <div class="head2">
             Class Registration Dashboard
-            <RouterLink to="./login">
+            <RouterLink to="./">
                 <div class="signout">Sign Out</div>
             </RouterLink>
         </div>
@@ -52,7 +56,7 @@
 <style scoped>
 
 .dashboard {
-    
+    background-color: white;
     text-align: center;
     align-items: center;
 }
@@ -130,4 +134,37 @@ a{
     right: 10%;
     bottom:30%;
 }
+
+.top {
+    color:navy;
+    font-weight: 100;
+    height: 125px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    /*border:1px solid #000;*/
+    top: 0;
+    left: 50%;
+    transform: translate(-50%);
+    width: 100vw;
+    text-align: center;
+    background-color: white;
+    color: black;
+    border-bottom: solid 3px black;
+  
+    .uconn{
+        font-size: 100px;
+        float: center;
+        position:relative;
+        line-height: 120%;
+        color: #000e2f;
+        font-family: UConn,Roboto,sans-serif;
+        letter-spacing: 3px;
+        overflow: hidden;
+        text-transform: uppercase;
+        text-rendering: geometricPrecision;
+        -webkit-font-smoothing: antialiased;
+        padding-right: 0;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/class_registration_app/src/components/LoginPage.vue b/class_registration_app/src/components/LoginPage.vue
index ec1e2dd..988f743 100644
--- a/class_registration_app/src/components/LoginPage.vue
+++ b/class_registration_app/src/components/LoginPage.vue
@@ -1,19 +1,18 @@
 <template>
-  <body>
   <section class="form animated flipInX">
-    <h2>Login To Your Account</h2>
     <p class="valid">Valid. Please wait a moment.</p>
     <p class="error">Error. Please enter correct Username &amp; password.</p>
     <form class="loginbox" autocomplete="off">
-      <input placeholder="Username" type="text" id="username" v-model="data.username" />
-      <input placeholder="Password" type="password" id="password" v-model="data.password"/>
+      <input class="inputBox" placeholder="Username" type="text" id="username" v-model="data.username" />
+      <br/><br/>
+      <input class="inputBox" placeholder="Password" type="password" id="password" v-model="data.password"/>
+      <br/>
+      <br/>
       <!--<RouterLink to="./dashboard" @click.prevent="tryLogin"> use v-if here @click.prevent="tryLogin" -->
       <button @click.prevent="tryLogin" id="submit">Login</button>
     </form>
-    <RouterLink to="/">Back</RouterLink>
     <div id="test"></div>
   </section>
-</body>
 </template>
 
 <script setup lang="ts">
@@ -56,7 +55,7 @@ const tryLogin = async () => {
 
 </script>
     
-    <style scoped>
+  <style scoped>
     section {
         background-color: navy ;
         font-family: "Roboto";
@@ -77,13 +76,15 @@ const tryLogin = async () => {
       }
       .form {
         position: absolute;
-        top: 50%;
+        top: 70%;
         left: 50%;
-        background: #fff;
-        width: 285px;
-        margin: -140px 0 0 -182px;
-        padding: 40px;
-        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+        transform: translate(-50%, -50%);
+        background: transparent;
+        width: 80%;
+        height: 70%;
+        
+        
+        
         h2 {
           margin: 0 0 20px;
           line-height: 1;
@@ -92,16 +93,12 @@ const tryLogin = async () => {
           font-weight: 400;
         }
         input {
-          outline: none;
-          display: block;
-          width: 100%;
-          margin: 0 0 20px;
-          padding: 10px 15px;
+          
+          
           border: 1px solid #ccc;
           color: #ccc;
           font-family: "Roboto";
-          box-sizing: border-box;
-          font-size: 14px;
+          font-size: 19px;
           font-weight: 400;
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
@@ -125,17 +122,24 @@ const tryLogin = async () => {
         font-weight: 400;
       }
       
-      .error, .valid{display:none;}
+      .inputBox{
+        width:100%;
+        height:15%;
+        border: 1px solid #ccc;
+        color: black;
+        font-family: "Roboto";
+        font-size: 25px;
+        font-weight: 400;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        transition: 0.2s linear;
+        &input:focus {
+          color: #333;
+          border: 1px solid #44c4e7;
+        }
+      }
 
+      .error, .valid{display:none;}
 
-    </style>
 
-<style scoped>
-    body{
-      background-color: #000066;
-    }
-    #test{
-      font-size: 20px;
-      color: red
-    }
-</style>
\ No newline at end of file
+  </style>
diff --git a/class_registration_app/src/components/StartUp.vue b/class_registration_app/src/components/StartUp.vue
index 3d647e5..02e72e1 100644
--- a/class_registration_app/src/components/StartUp.vue
+++ b/class_registration_app/src/components/StartUp.vue
@@ -1,36 +1,61 @@
 <script setup lang="ts">
-import AppVue from '@/App.vue';
+    import AppVue from '@/App.vue';
+    import LoginPage from './LoginPage.vue';
+    import { ref } from 'vue';
 
+    let isVisible = ref(false);
+    
+    let loginType = ref("");
 
+    function openCloseLogin(type: string){
+        isVisible.value = !isVisible.value;
+        loginType.value = type;
+    }
 
 </script>
 
 <template>
-<!--
+
 <div class="backdrop">
     
+    <div v-if="isVisible" class="login-div">
+        <label class="typeOfLogin">{{loginType}}</label>
+        <button v-on:click="openCloseLogin('Student Login')" style="float: right;" class="btn-97">X</button>
+        <LoginPage></LoginPage>
+    </div>
     <div class="top">
         <img class="logos" src="https://logos-world.net/wp-content/uploads/2022/01/UConn-Huskies-Logo-1970.png">
         <div>
-            <h1 class="uconn">UCONN Class Registration</h1>
-            <h3>Welcome!</h3>
+            <h1 class="uconn">UCONN</h1>
+            <h3 class="class-reg">CLASS REGISTRATION</h3>
         </div>
         <img class="logos" src="https://1000logos.net/wp-content/uploads/2017/08/UConn-Huskies-Logo-1959.png">
 
     </div>
     
     <div class="login">
-        <a href="./login">
-            <button class="btn-97" style="position: absolute;top:42%;left:50%;transform:translate(-50%,-50%)">
-                Login with your netID here
-            </button>
-        </a>
         
-        <a style="position: absolute;top:80%;left:50%;transform:translate(-50%,-50%)">Forget your login?</a>
+        <button v-on:click="openCloseLogin('Student Login')" class="btn-97" style="position: absolute;top:40%;left:50%;transform:translate(-50%,-50%)">
+            Login as student
+        </button>
+        <button v-on:click="openCloseLogin('Faculty Login')" class="btn-97" style="background-color:black;position: absolute;top:80%;left:50%;transform:translate(-50%,-50%)">
+            Login as faculty
+        </button>
+        
+        
+
+        <a class="forgot" style="">Forget your login?</a>
     </div>
+
+    <footer>
+        <a href="https://uconn.edu/">Home Site</a>
+        <a href="https://uconn.edu/about-us/">About Us</a>
+        <a>Privacy Policy</a>
+        <a>Contact</a>
+    </footer>
 </div>
--->
 
+<!--
 <div class="homehead">
    UConn&ensp;|&ensp;University of Connecticut
 </div>
@@ -56,6 +81,7 @@ import AppVue from '@/App.vue';
         Professors
     </div>
 </div>
+-->
 </template>
 
 <style scoped>
@@ -131,39 +157,73 @@ a{
 }
 
 .forgot{
-    width: 40%;
-    margin: 5px auto;
-    background-color: #888;
-    color: black;
-    text-align: center;
-    border-radius: 10px;
-    transition: .3s cubic-bezier(0,1.5,1,1.5);
+    position: absolute;
+    top:120%;
+    left:50%;
+    transform:translate(-50%,-50%);
+    background-color: rgb(247, 253, 54);
+    color:black;
+    padding:4px;
+    border-radius: 999px;
+    transition: all .2s;
 }
+
 .forgot:hover{
-    width: 55%;
+    padding:6px;
 }
-
 .top {
     color:navy;
     font-weight: 100;
-    height: 20vh;
-    position: fixed;
+    height: 125px;
+    position: relative;
     display: flex;
     justify-content: center;
     /*border:1px solid #000;*/
-    top: 5%;
+    top: 0;
     left: 50%;
     transform: translate(-50%);
-    width: 50vw;
+    width: 100vw;
     text-align: center;
     background-color: white;
     color: black;
-    border-radius: 9999px;
-    border: solid 3px navy;
+    border-bottom: solid 3px black;
 
     .uconn{
-        font-weight: 600;
+        font-size: 100px;
+        float: left;
+        position:relative;
+        line-height: 120%;
+        color: #000e2f;
+        font-family: UConn,Roboto,sans-serif;
+        letter-spacing: 3px;
+        overflow: hidden;
+        text-transform: uppercase;
+        text-rendering: geometricPrecision;
+        -webkit-font-smoothing: antialiased;
+        padding-right: 40vw;
     }
+
+    .class-reg{
+        position: absolute;
+        padding-top: 30px;
+        right: 18%;
+        color: #000e2f;
+        font-family: Raleway,sans-serif;
+        font-weight: 800;
+        margin: 0;
+        font-size: 40px;
+    }
+
+    @media (max-width: 950px) {
+        .class-reg {
+          color:transparent;
+        }
+      }
+    
+    .logos {
+        
+    }
+
 }
 
 .login {
@@ -177,8 +237,6 @@ a{
     background-size: contain;
 
     border-radius: 9999px;
-
-   
 }
 
 .backdrop {
@@ -190,10 +248,96 @@ a{
     background-image: url("../assets/Aerial131009a125.jpeg");
     background-size:cover;
     background-repeat: no-repeat;
+    animation: change 20s infinite ease-in-out ;
+
 }
 
-.logos {
-    height: 20vh;
 
-}
+
+/* Apply styles to the footer element */
+footer {
+    background-color: #333; /* Background color */
+    color: #fff; /* Text color */
+    padding: 20px; /* Add space around content */
+    position:absolute;
+    bottom: 0;
+    width:100%;
+    display: flex;
+    justify-content: center;
+  }
+  
+  /* Style the links inside the footer */
+  footer a {
+    color: #fff; /* Link text color */
+    text-decoration: none; /* Remove underlines from links */
+    margin: 0 2.5vw; /* Add space between links */
+    font-size: 1.3vw;
+    transition: all .2
+  }
+
+  footer a:hover{
+    font-size: 1.5vw;
+  }
+  
+  
+  @keyframes change{
+    0%
+    {
+        /*Must include both jpegs to load the one before and prevent flicker*/
+        background-image: url("../assets/Aerial131009a125.jpeg"), url("../assets/winter2.jpeg");
+    }
+    20%
+    {
+        background-image: url("../assets/winter2.jpeg"), url("../assets/union.jpeg");
+    }
+    40%
+    {
+        background-image: url("../assets/union.jpeg"), url("../assets/case.jpeg");
+    }
+    60%
+    {
+        background-image: url("../assets/case.jpeg"), url("../assets/fall.jpeg");
+    }
+    80%
+    {
+        background-image: url("../assets/fall.jpeg");
+    }
+    100%
+    {
+        background-image: url("../assets/Aerial131009a125.jpeg");
+    }
+    }
+
+    .login-div{
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -43%);
+        height: 65vh;
+        width: 30vw;
+        background-color: white;
+        z-index: 9999;
+        border-radius: 99px;
+        animation: popup .5s linear;
+        border: solid 2px black;
+    }
+
+    @keyframes popup {
+        from{
+            opacity: 0%;
+        }
+
+        to{
+            opacity:100%;
+        }
+    }
+
+    .typeOfLogin{
+        position: absolute;
+        left: 50%;
+        transform: translate(-50%);
+        top: 15%;
+        font-size: 2vw;
+        color: black;
+    }
 </style>
\ No newline at end of file
diff --git a/class_registration_app/src/main.ts b/class_registration_app/src/main.ts
index cb3fecf..1c6e631 100644
--- a/class_registration_app/src/main.ts
+++ b/class_registration_app/src/main.ts
@@ -1,4 +1,5 @@
 import './assets/main.css'
+import VueSmoothScroll from 'v-smooth-scroll'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
@@ -11,7 +12,10 @@ import { Amplify, Auth } from "aws-amplify";
 //Amplify.configure(awsconfig);
 
 const app = createApp(App)
-
+app.use(VueSmoothScroll, {
+    duration: 400,
+    updateHistory: false,
+  })
 app.use(createPinia())
 app.use(router)