diff --git a/StudentFunctions.py b/StudentFunctions.py
index c4b494d..8436878 100644
--- a/StudentFunctions.py
+++ b/StudentFunctions.py
@@ -10,7 +10,8 @@ def createStudent(studentID, studentPWD, enrolledCourses = []):
         Item = {
             'StudentId' : studentID,
             'StudentPWD' : studentPWD,
-            'EnrolledCourses' : enrolledCourses
+            'EnrolledCourses' : enrolledCourses,
+            'AuthToken' : None
         }
     )
 
@@ -19,4 +20,4 @@ def createStudent(studentID, studentPWD, enrolledCourses = []):
 
 
 if __name__ == "__main__":
-    createStudent("awp10101", "myPassword")
\ No newline at end of file
+    createStudent("testUser", "myNewPassword")
\ No newline at end of file
diff --git a/class_registration_app/ngrok 2 b/class_registration_app/ngrok 2
new file mode 100755
index 0000000..bfb7c9a
Binary files /dev/null and b/class_registration_app/ngrok 2 differ
diff --git a/class_registration_app/src/assets/main.css b/class_registration_app/src/assets/main.css
index bbb7c6c..5352f54 100644
--- a/class_registration_app/src/assets/main.css
+++ b/class_registration_app/src/assets/main.css
@@ -38,6 +38,9 @@ a,
     padding: 0 auto;
   }
 }
+
+
+
 */
 .btn-97,
 .btn-97 *,
@@ -97,3 +100,23 @@ a,
   transform: translateY(-5px);
 }
 
+.course-list-item {
+  padding: 20px;
+  display: flex;
+  margin-top: 10px;
+  margin-bottom: 40px;
+  min-width: 80vw;
+  background-color: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.course-name {
+  margin-left: 1vw;
+  font-weight: 500;
+}
+
+.course-location {
+  margin-left: 1vh;
+
+}
\ No newline at end of file
diff --git a/class_registration_app/src/components/CourseSearch.vue b/class_registration_app/src/components/CourseSearch.vue
index a2018d0..bda871f 100644
--- a/class_registration_app/src/components/CourseSearch.vue
+++ b/class_registration_app/src/components/CourseSearch.vue
@@ -1,59 +1,125 @@
 <script setup lang="ts">
-import axios from 'axios';
-//arn:aws:execute-api:us-east-1:671289147354:5prodolbi7/*/GET/courses
-const apiUrl = 'https://5prodolbi7.execute-api.us-east-1.amazonaws.com/Beta';
-
-// Make a GET request
-axios.get(`${apiUrl}/courses`, {
-  params: {
-    // Query parameters, if any
+import { defineAsyncComponent } from 'vue';
+const AsyncComponent = defineAsyncComponent(() =>
+  import('./CourseSearch.vue')
+);
+
+function handleSearch() {
+  const elementsToRemove = document.querySelectorAll(`.${"course-list-item"}`);
+      elementsToRemove.forEach(element => {
+        element.remove();
+      });
+
+
+  console.log("button clicked");
+  //arn:aws:execute-api:us-east-1:671289147354:5prodolbi7/*/GET/courses
+  const apiUrl = 'https://5prodolbi7.execute-api.us-east-1.amazonaws.com/Beta';
+
+
+  let courseJson = fetch(`${apiUrl}/courses`)
+    .then(response => {
+      if (response.ok) {
+        return response.json()
+      } else{
+        throw "Error"
+      }
+    }).then(response => {
+      console.log(response.Items);
+
+      let searchbar = document.getElementById("search");
+
+      let filteredCourses = response.Items.filter(function (str: string) { return str.CourseId.includes(searchbar.value.toUpperCase())} );
+      filteredCourses.forEach((Course: { CourseId: string; CourseLocation: string;}) => {
+        let container = document.getElementById("container");
+        let div = document.createElement("div");
+        let course_name = document.createElement('h2');
+        let course_location = document.createElement('h2');
+        // Set class or any other attributes for the div
+        div.className = "course-list-item"; // You can set class name here
+
+        // Set content or any other properties for the div
+        course_name.className = "course-name";
+        course_name.textContent = Course.CourseId + " -"; // You can set content here
+
+        course_location.className = "course-location";
+        course_location.textContent = Course.CourseLocation;
+
+        // Append the div to the container
+        if (container != null){
+          container.appendChild(div);
+          div.appendChild(course_name);
+          div.appendChild(course_location);
+        }
+        
+        return response;
+      })
+    })
+}
+document.addEventListener("click", function() {
+  // Get the button element by its ID
+  
+  const button = document.getElementById("searchButton");
+
+
+// Check if the button element exists
+  if (button) {
+  // Assign the handleClick function to the button's onclick property
+    button.addEventListener("click", handleSearch);
   }
-})
-.then(response => {
-  // Handle the response
-  console.log(response.data);
-})
-.catch(error => {
-  // Handle errors
-  console.error(error);
 });
-</script>
 
 
-// Your API Gateway endpoint URL
+
+</script>
+
 
 
 <template>
-    <div class="container">
-        <h1>UConn Course Search</h1>
-        <input type="text" class="search-bar" placeholder="Enter course name or code">
+    <div class="container" id="container">
+        <h1 class="title">UConn Course Search</h1>
+        <div class="search">
+          <input type="text" id="search" class="search-bar" placeholder="Enter course name or code">
+          <button id="searchButton" class="btn-97">Search</button>
+        </div>
         <ul class="course-list">
-            <li class="course-list-item">CSE 101 - Introduction to Computer Science</li>
-            <li class="course-list-item">ENG 101 - English Composition</li>
-            <li class="course-list-item">MAT 115 - Calculus I</li>
-            <li class="course-list-item">CHEM 111 - General Chemistry</li>
-            <li class="course-list-item">HIST 200 - U.S. History</li>
+            
         </ul>
     </div>
 </template>
 
 <style scoped>
 .container {
-    max-width: 600px;
-    margin: 0 auto;
+    min-width: 80vw;
+    left: 50%;
+    top: 5%;
+    position: absolute;
+    transform: translate(-50%);
     padding: 20px;
     background-color: #ffffff;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    overflow-y: auto;
+}
+
+.title {
+  position:relative;
+  font-weight: 700;  
+}
+
+.search {
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .search-bar {
-    width: 100%;
+    width: 30%;
     padding: 10px;
+    margin-right: 1vw;
     margin-bottom: 20px;
     border: none;
     border-radius: 5px;
     font-size: 16px;
+    border: solid 1px navy;
 }
 
 .course-list {
@@ -61,7 +127,10 @@ axios.get(`${apiUrl}/courses`, {
     padding: 0;
 }
 
-.course-list-item {
-    margin-bottom: 10px;
+button {
+  line-height: 0;
+  height: 30px;
 }
+
+
 </style>
\ No newline at end of file
diff --git a/class_registration_app/src/components/DashBoard.vue b/class_registration_app/src/components/DashBoard.vue
index aab5dc0..b4d7210 100644
--- a/class_registration_app/src/components/DashBoard.vue
+++ b/class_registration_app/src/components/DashBoard.vue
@@ -14,7 +14,9 @@
             <RouterLink to="./courses">
             <button class="uconn-button">Course Search</button>
             </RouterLink>
+            <RouterLink to="./my_courses">
             <button class="uconn-button">Current Classes</button>
+            </RouterLink>
         </div>
     </div>
 </template>
diff --git a/class_registration_app/src/components/EnrolledCourseList.vue b/class_registration_app/src/components/EnrolledCourseList.vue
new file mode 100644
index 0000000..697cc61
--- /dev/null
+++ b/class_registration_app/src/components/EnrolledCourseList.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <div class="container">
+        <h1>My Classes</h1>
+    </div>
+
+</template>
+
+<style scoped>
+</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 1ea4c91..c5c689f 100644
--- a/class_registration_app/src/components/LoginPage.vue
+++ b/class_registration_app/src/components/LoginPage.vue
@@ -1,22 +1,58 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
-    <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"/>
-          <input placeholder="Password" type="password" id="password"/>
-      <RouterLink to="./dashboard">
-        <button  id="submit">Login</button>
+  <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"/>
+      <RouterLink v-if="!authenticationFailed" to="./dashboard" @click.prevent="tryLogin"> <!--use v-if here-->
+        <button id="submit">Login</button>
       </RouterLink>
-      </form>
-      <RouterLink to="/">Back</RouterLink>
-      </section>
+    </form>
+    <RouterLink to="/">Back</RouterLink>
+  </section>
 </template>
+
+<script setup lang="ts">
+import router from '@/router';
+import axios from 'axios';
+import { reactive } from 'vue';
+
+const data = reactive({
+  username: '',
+  password: '',
+});
+
+let authenticationFailed = false;
+
+const tryLogin = async () => {
+  const apiUrl = `https://yqoa0pwe5b.execute-api.us-east-1.amazonaws.com/login/get-list?username=${data.username}&password=${data.password}`;
+  try {
+    const response = await axios.get(apiUrl, {
+      params: {
+        // Enter query parameters here
+      },
+    });
+    console.log(response.data);
+    const res = response.data;
+
+    if (authenticationSucceeds(res)) {
+      await router.push({path: '/dashboard'});
+    } else {
+      authenticationFailed = true;
+    }
+
+  } catch (error) {
+    console.error(error);
+    authenticationFailed = true;
+  }
+};
+
+const authenticationSucceeds = (response) => {
+  return response.data && response.data.statusCode === 200;
+};
+</script>
     
     <style scoped>
     section {
@@ -73,17 +109,18 @@
             border: 1px solid #44c4e7;
           }
         }
-        button {
-          cursor: pointer;
-          background: #44c4e7;
-          width: 100%;
-          padding: 10px 15px;
-          border: 0;
-          color: #fff;
-          font-family: "Roboto";
-          font-size: 14px;
-          font-weight: 400;
-        }
+      }
+
+      button {
+        cursor: pointer;
+        background: #44c4e7;
+        width: 100%;
+        padding: 10px 15px;
+        border: 0;
+        color: #fff;
+        font-family: "Roboto";
+        font-size: 14px;
+        font-weight: 400;
       }
       
       .error, .valid{display:none;}
diff --git a/class_registration_app/src/router/index.ts b/class_registration_app/src/router/index.ts
index b56c908..cfd7ba8 100644
--- a/class_registration_app/src/router/index.ts
+++ b/class_registration_app/src/router/index.ts
@@ -5,6 +5,7 @@ import RegisterAccount from '../components/RegisterAccount.vue'
 import CourseSearch from '../components/CourseSearch.vue'
 import ScheduleView from '../components/ScheduleView.vue'
 import DashBoard from '../components/DashBoard.vue'
+import EnrolledCourseList from '../components/EnrolledCourseList.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -41,6 +42,11 @@ const router = createRouter({
       path: '/schedule_viewer',
       name: 'Schedule Viewer',
       component: ScheduleView
+    },
+    {
+      path: '/my_courses',
+      name: 'My Courses',
+      component: EnrolledCourseList
     }
 
   ]