diff --git a/class_registration_app/src/assets/bookimage.png b/class_registration_app/src/assets/bookimage.png
new file mode 100644
index 0000000..2a5fb74
Binary files /dev/null and b/class_registration_app/src/assets/bookimage.png differ
diff --git a/class_registration_app/src/assets/calenderimage.png b/class_registration_app/src/assets/calenderimage.png
new file mode 100644
index 0000000..5488f9f
Binary files /dev/null and b/class_registration_app/src/assets/calenderimage.png differ
diff --git a/class_registration_app/src/assets/magimage.png b/class_registration_app/src/assets/magimage.png
new file mode 100644
index 0000000..37ee2d9
Binary files /dev/null and b/class_registration_app/src/assets/magimage.png differ
diff --git a/class_registration_app/src/assets/main.css b/class_registration_app/src/assets/main.css
index 5352f54..4fe1cb1 100644
--- a/class_registration_app/src/assets/main.css
+++ b/class_registration_app/src/assets/main.css
@@ -26,17 +26,17 @@ a,
 
 
 @media (min-width: 100vw) {
-
+ /*
   body {
     display: flex;
-    place-items: center;
+    place-items: center; 
   }
 
   #app {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 auto;
-  }
+    grid-template-columns: 1fr 1fr; 
+    padding: 0 auto
+  } */
 }
 
 
@@ -100,6 +100,16 @@ a,
   transform: translateY(-5px);
 }
 
+.homehead{
+  background-color: #000e2f;
+  color: white;
+  font-size: 30px;
+  width: 100vw;
+  text-align: center;
+  padding: 12px;
+}
+
+
 .course-list-item {
   padding: 20px;
   display: flex;
@@ -119,4 +129,5 @@ a,
 .course-location {
   margin-left: 1vh;
 
-}
\ No newline at end of file
+}
+
diff --git a/class_registration_app/src/assets/personimage.png b/class_registration_app/src/assets/personimage.png
new file mode 100644
index 0000000..62e3930
Binary files /dev/null and b/class_registration_app/src/assets/personimage.png differ
diff --git a/class_registration_app/src/components/DashBoard.vue b/class_registration_app/src/components/DashBoard.vue
index b4d7210..d7c01c3 100644
--- a/class_registration_app/src/components/DashBoard.vue
+++ b/class_registration_app/src/components/DashBoard.vue
@@ -2,21 +2,49 @@
 </script>
 
 <template>
+    <div class="homehead">
+        UConn&ensp;|&ensp;University of Connecticut
+     </div>
     <div class="dashboard">
-        <h1>Class Registration Dashboard</h1>
-        <div class="button-container">
+        <div class="head2">
+            Class Registration Dashboard
             <RouterLink to="./login">
-            <button class="uconn-button">Sign Out</button>
+                <div class="signout">Sign Out</div>
             </RouterLink>
+        </div>
+        <div class="button-container">
             <RouterLink to="./schedule_viewer">
-            <button class="uconn-button">Schedule Viewer</button>
+            <button class="uconn-button">
+                Schedule Viewer
+                <img src="../assets/calenderimage.png" class="icon">
+            </button>
+            </RouterLink>
+            <RouterLink to="./courses">
+            <button class="uconn-button">
+                Course Search
+                <img src="../assets/magimage.png" class="icon">
+            </button>
+            </RouterLink>
+            <RouterLink to="./my_courses">
+                <button class="uconn-button">
+                    Current Classes
+                    <img src="../assets/bookimage.png" class="icon">
+                </button>
+            </RouterLink>
+            <RouterLink to="./courses">
+                <button class="uconn-button">Profile
+                    <img src="../assets/personimage.png" class="icon">
+                </button>
+
             </RouterLink>
             <RouterLink to="./courses">
-            <button class="uconn-button">Course Search</button>
+                <button class="uconn-button">Placeholder</button>
             </RouterLink>
+
             <RouterLink to="./my_courses">
-            <button class="uconn-button">Current Classes</button>
+              <button class="uconn-button">Current Classes</button>
             </RouterLink>
+
         </div>
     </div>
 </template>
@@ -24,11 +52,9 @@
 <style scoped>
 
 .dashboard {
+    
     text-align: center;
-    position:absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    align-items: center;
 }
 
 h1 {
@@ -46,6 +72,9 @@ h1 {
     margin: 10px;
     cursor: pointer;
     transition: background-color 0.3s ease;
+    width: 80%;
+    height: 80%;
+    position: relative;
 }
 
 .uconn-button:hover {
@@ -54,9 +83,51 @@ h1 {
 }
 
 .button-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    padding: 20px;
+    display: grid;
+    grid-template-columns: [c1] 33% [c2] 33% [c3] 34%;
+    grid-template-rows: [r1] 100px [r2] 100px;
+    margin: 0 auto;
+}
+
+.head2{
+    background-color: #227bc9;
+    text-align: center;
+    font-size: 25px;
+    width: 100vw;
+    padding: 5px;
+    color: white;
+    position: relative;
+}
+
+a{
+    text-decoration: none;
+    text-shadow: none;
+}
+
+.signout{
+    background-color: #000066; 
+    width: 15%;
+    position: absolute;
+    right: 10px;
+    top: 10%;
+    bottom: 20%;
+    font-size: 18px;
+    border-radius: 15px;
+    transition: .6s;
 }
 
+.signout:hover{
+    background-color: white;
+    color: #000066; 
+}
+
+.icon{
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    size: cover;
+    right: 10%;
+    bottom:30%;
+}
 </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 a2ab6bf..ec1e2dd 100644
--- a/class_registration_app/src/components/LoginPage.vue
+++ b/class_registration_app/src/components/LoginPage.vue
@@ -1,4 +1,5 @@
 <template>
+  <body>
   <section class="form animated flipInX">
     <h2>Login To Your Account</h2>
     <p class="valid">Valid. Please wait a moment.</p>
@@ -10,7 +11,9 @@
       <button @click.prevent="tryLogin" id="submit">Login</button>
     </form>
     <RouterLink to="/">Back</RouterLink>
+    <div id="test"></div>
   </section>
+</body>
 </template>
 
 <script setup lang="ts">
@@ -39,6 +42,11 @@ const tryLogin = async () => {
     if (authenticationValid === true) {
       router.push({path: './dashboard'});
     }
+    else{
+      let err = document.getElementById('test');
+      if(err){
+        err.innerText = "Login info is incorrect"}
+    }
 
   } catch (error) {
     console.error(error);
@@ -120,4 +128,14 @@ const tryLogin = async () => {
       .error, .valid{display:none;}
 
 
-    </style>
\ No newline at end of file
+    </style>
+
+<style scoped>
+    body{
+      background-color: #000066;
+    }
+    #test{
+      font-size: 20px;
+      color: red
+    }
+</style>
\ No newline at end of file
diff --git a/class_registration_app/src/components/ScheduleView.vue b/class_registration_app/src/components/ScheduleView.vue
index 4711f2b..8adcf74 100644
--- a/class_registration_app/src/components/ScheduleView.vue
+++ b/class_registration_app/src/components/ScheduleView.vue
@@ -44,7 +44,8 @@
   background-color: #888;
   text-align: center;
   vertical-align: middle;
-  border: 1px solid;
+  border: 2px solid;
+  color: black;
 }
 
 .time{
@@ -53,6 +54,7 @@
   text-align: center;
   vertical-align: middle;
   border: 1px solid;
+  color: black;
 }
 
 #time-column{
@@ -119,21 +121,29 @@ const class_slots = [
 
 const colors = ['rgb(120,255,150)', 'rgb(120,150,255)','rgb(255,120,150)','rgb(255,255,120)']
 
+if(grid.childElementCount==6){
 for (var i = 0; i <18;i++){
 
     let time = document.createElement('div');
-    time.classList.add('time');
+
+    time.style.backgroundColor = "#888";
+    time.style.fontSize = "15px";
+    time.style.textAlign = "center";
+    time.style.verticalAlign = "middle";
+    time.style.border = "1px solid";
+    time.style.color = "black";
+
     time.innerHTML = time_times[i];
     grid.appendChild(time);
 
     for (var j=0; j<5; j++){
-        let child = document.createElement('div');
-        child.classList.add('class')
+        let child = document.createElement('div')
+        child.style.backgroundColor = "#dfd"
         child.id = 'slot' + (5*i+j)
         grid.appendChild(child);
     }
 }
-
+}
 const classes1 = [
     {
         "period": "2",
diff --git a/class_registration_app/src/components/StartUp.vue b/class_registration_app/src/components/StartUp.vue
index 0b50e38..3d647e5 100644
--- a/class_registration_app/src/components/StartUp.vue
+++ b/class_registration_app/src/components/StartUp.vue
@@ -6,6 +6,7 @@ import AppVue from '@/App.vue';
 </script>
 
 <template>
+<!--
 <div class="backdrop">
     
     <div class="top">
@@ -28,7 +29,33 @@ import AppVue from '@/App.vue';
         <a style="position: absolute;top:80%;left:50%;transform:translate(-50%,-50%)">Forget your login?</a>
     </div>
 </div>
+-->
 
+<div class="homehead">
+   UConn&ensp;|&ensp;University of Connecticut
+</div>
+<div class="head2">
+    Course Registration System
+</div>
+
+<div class="backdrop2">
+    <div class="login2">
+        <a href="./login">
+            <div class="signin">Login to Course Registration</div>
+        </a>
+        <div class="forgot">Forgot Login?</div>
+    </div>
+</div>
+
+<div class="support">
+    Support
+    <div class="supp">
+        Student
+    </div>
+    <div class="supp">
+        Professors
+    </div>
+</div>
 </template>
 
 <style scoped>
@@ -36,6 +63,86 @@ import AppVue from '@/App.vue';
     font-family: 'Gotham';
     src: url('../assets/Gotham/Gotham\ Ultra/Gotham\ Ultra.otf') format('opentype');
   }
+
+a{
+    text-decoration: none;
+    text-shadow: none;
+}
+
+.head2{
+    background-color: #227bc9;
+    text-align: center;
+    font-size: 25px;
+    width: 100vw;
+    padding: 5px;
+    color: white;
+}
+
+.support{
+    background-color: #ddd;
+    text-align: center;
+    font-size: 25px;
+    color: black;
+}
+.supp{
+    font-size: 18px;
+    background-color: #888;
+    width: 10%;
+    margin: 10px auto;
+    border: 2px black;
+    transition: .5s;
+}
+
+.supp:hover{
+    background-color: #999;
+}
+.login2{
+    position: relative;
+    height: 25%;
+    width: 30%;
+    background-color: rgba(200,200,200,.85);
+    left: 55%;
+    top: 40%;
+    padding: 5px;
+    border-radius: 20px;
+}
+
+.signin{
+    background-color: #ffae2b;
+    width: 75%;
+    margin: 5px auto;
+    font-size: 20px;
+    color: black;
+    text-align: center;
+    padding: 2px;
+    border-radius: 30px;
+    transition: .3s;
+}
+.signin:hover{
+    background-color: #ef9e0b; 
+    width: 85%;
+}
+
+.backdrop2{
+    background-image: url("../assets/Aerial131009a125.jpeg");
+    background-size:cover;
+    width: 100%;
+    height: 500px;
+}
+
+.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);
+}
+.forgot:hover{
+    width: 55%;
+}
+
 .top {
     color:navy;
     font-weight: 100;