diff --git a/package-lock.json b/package-lock.json
index ce32514..e425c31 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,8 @@
       "dependencies": {
         "@auth0/auth0-vue": "^2.3.2",
         "@unocss/reset": "^0.56.5",
-        "axios": "^1.5.1",
+        "@websanova/vue-auth": "^4.2.1",
+        "axios": "^1.6.2",
         "vue": "^3.3.4",
         "vue-router": "^4.2.4"
       },
@@ -537,15 +538,20 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
       "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
     },
+    "node_modules/@websanova/vue-auth": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@websanova/vue-auth/-/vue-auth-4.2.1.tgz",
+      "integrity": "sha512-gc4WL3WzJMkj3wZmrBAP7U7WBAcVY0/a/YhCzMVR/iA1u/8QJlugq/320CRRbZ0Acz+qbGPhdm07IRE3U053yg=="
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/axios": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.1.tgz",
-      "integrity": "sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
       "dependencies": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
diff --git a/package.json b/package.json
index addc749..b234506 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
   "dependencies": {
     "@auth0/auth0-vue": "^2.3.2",
     "@unocss/reset": "^0.56.5",
-    "axios": "^1.5.1",
+    "@websanova/vue-auth": "^4.2.1",
+    "axios": "^1.6.2",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },
diff --git a/src/App.vue b/src/App.vue
index 132204a..390003b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,12 +14,14 @@ export default {
   data() {
     return {
       tabs: [
-        { path: '/', label: 'Home' },
-        { path: '/fetch', label: 'Create an Account' },
+        { path: '/home', label: 'Home' },
+        //{ path: '/fetch', label: 'Create an Account' },
         { path: { name: 'search' }, label: 'Course Search' },
         { path: '/schedule', label: 'Schedule View' },
         { path: '/admin/createcourse', label: 'Create Course' },
-        { path: '/login', label: 'Login' },
+        //{ path: '/login', label: 'Login' },
+        { path: '/', label: 'Login' },
+        { path: '/profile', label: 'Profile' },
       ]
     };
   },
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 44800f9..6070420 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -20,12 +20,14 @@ const title = 'Course Registration';
 
 const tabs = [
   { path: '/', label: 'Home' },
-  { path: '/fetch', label: 'Create an Account' },
+  //{ path: '/fetch', label: 'Create an Account' },
   { path: { name: 'search' }, label: 'Course Search' },
   { path: '/schedule', label: 'Schedule View' },
   { path: '/mycourses', label: 'Course View' },
   { path: '/admin/createcourse', label: 'Create Course' },
-  { path: '/login', label: 'Login' },
+  //{ path: '/login', label: 'Login' },
+  { path: '/test', label: 'Test'},
+  { path: '/profile', label: 'Profile' },
 ];
 
 const route = useRoute();
diff --git a/src/router/index.js b/src/router/index.js
index 7131e40..f4c9606 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,7 @@ import SignUp from "../views/SignUp.vue";
 import ScheduleView from "../views/ScheduleView.vue";
 import StudentCourseView from "../views/StudentCourseView.vue";
 import Test from "../views/Test.vue";
+import Profile from "../views/Profile.vue";
 
 const router = createRouter({
   // the history mode determines how vue router interacts with the url.
@@ -26,7 +27,7 @@ const router = createRouter({
   // and, most importantly, the component that should be rendered for the view
   routes: [
     {
-      path: "/",
+      path: "/home",
       name: "home",
       component: HomeView,
     },
@@ -61,10 +62,16 @@ const router = createRouter({
       component: StudentCourseView,
     },
     {
-      path: "/test",
-      name: "test",
+      path: "/",
+      name: "Test",
       component: Test,
     },
+    {
+      path: "/profile",
+      name: "Profile",
+      component: Profile,
+
+    },
   ],
 });
 
diff --git a/src/views/ClassSearch.vue b/src/views/ClassSearch.vue
index 6c95ae9..701d770 100644
--- a/src/views/ClassSearch.vue
+++ b/src/views/ClassSearch.vue
@@ -2,6 +2,8 @@
   <div>
     <!-- Search Form -->
     <section class="search-form">
+      <p>Name: {{ parsedName }}</p>
+      <p>Email: {{ parsedEmail }}</p>
       <h3>Class Search</h3>
       <form @submit.prevent="searchClasses">
         <label for="courseName">Course Name:</label>
@@ -31,6 +33,11 @@
               </div>
             </div>
           </div>
+
+          <!-- Enroll button -->
+          <div class="enroll-button">
+            <button @click="enrollClass">Enroll</button>
+          </div>
         </div>
       </div>
       <p v-else>No results found.</p>
@@ -39,6 +46,9 @@
 </template>
 
 <script>
+import { useAuth0 } from '@auth0/auth0-vue';
+import axios from 'axios';
+
 export default {
   data() {
     return {
@@ -74,8 +84,10 @@ export default {
       if (value && value.N) return value.N;
       // Add other types here if needed
       return value || 'N/A';
-    }
-  }
+    },
+    enrollClass() {
+    },
+  },
 };
 </script>
 
@@ -158,4 +170,20 @@ button {
   margin-right: 5px;
 }
 
+/* Styles for the enroll button */
+.enroll-button {
+  display: flex;
+  align-items: center;
+}
+
+.enroll-button button {
+  padding: 10px 20px;
+  margin-left: auto; /* Push the button to the right */
+  border: 1px solid #003366;
+  border-radius: 5px;
+  background-color: #003366;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+}
 </style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 37e5663..222a74a 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -5,6 +5,7 @@
       <div class="welcome-content">
         <h2>Welcome to Section 2 Group 3 University</h2>
         <p>Explore our vibrant academic community dedicated to excellence.</p>
+        
       </div>
     </section>
 
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
new file mode 100644
index 0000000..4ec8c1c
--- /dev/null
+++ b/src/views/Profile.vue
@@ -0,0 +1,60 @@
+<template>
+    <div>
+      <h2>User Profile</h2>
+      <div v-if="isAuthenticated">
+        <p>Name: {{ parsedName }}</p>
+        <p>Email: {{ parsedEmail }}</p>
+        <button @click="sendUserData">Send User Data</button>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { useAuth0 } from '@auth0/auth0-vue';
+  import axios from 'axios';
+  
+  export default {
+    setup() {
+      const { user, isAuthenticated } = useAuth0();
+  
+      // Save user data as a JSON string
+      const userJsonString = JSON.stringify(user, null, 2);
+  
+      // Parse userJsonString to get name and email
+      const parsedUser = JSON.parse(userJsonString);
+      const parsedName = parsedUser._value.name; // Access name from _value
+      const parsedEmail = parsedUser._value.email; // Access email from _value
+  
+      // Print name and email to the console
+      console.log('Parsed Name:', parsedName);
+      console.log('Parsed Email:', parsedEmail);
+  
+      // Function to send user data via POST request
+      const sendUserData = async () => {
+        try {
+          // Send POST request to the specified endpoint
+          const response = await axios.post('https://5ctsolryl1.execute-api.us-east-1.amazonaws.com/prod/create', {
+            name: parsedName,
+            email: parsedEmail
+          });
+  
+          // Log the response
+          console.log('POST Request Response:', response.data);
+        } catch (error) {
+          // Log any errors
+          console.error('Error sending POST request:', error);
+        }
+      };
+  
+      return {
+        user,
+        userJsonString,
+        isAuthenticated,
+        parsedName,
+        parsedEmail,
+        sendUserData
+      };
+    }
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/src/views/ScheduleView.vue b/src/views/ScheduleView.vue
index f290450..1a199ab 100644
--- a/src/views/ScheduleView.vue
+++ b/src/views/ScheduleView.vue
@@ -21,6 +21,8 @@
   </template>
   
   <script>
+  import { useAuth0 } from '@auth0/auth0-vue';
+  
   export default {
     data() {
       return {
diff --git a/src/views/Test.vue b/src/views/Test.vue
index 178e5c8..959195c 100644
--- a/src/views/Test.vue
+++ b/src/views/Test.vue
@@ -1,15 +1,17 @@
 <template>
-    <header>This is a test page</header>
+  <div>
+    <header>Login Page</header>
     <div>
-      <button @click="handleLogin">Log in</button>
+      <button v-if="!isAuthenticated" @click="handleLogin">Log in</button>
+      <button v-if="isAuthenticated" @click="handleLogout">Log out</button>
     </div>
-  </template>
+  </div>
+</template>
 
- <!--From Lab  -->
 <script setup>
 import { useAuth0 } from "@auth0/auth0-vue";
 
-const { loginWithRedirect } = useAuth0();
+const { isAuthenticated, loginWithRedirect, logout } = useAuth0();
 
 const handleLogin = () => {
   loginWithRedirect({
@@ -18,21 +20,10 @@ const handleLogin = () => {
     },
   });
 };
-</script>
 
-<!-- From Auth0 Quickstart Tutorial -->
-  <!-- <script>
-    import { useAuth0 } from '@auth0/auth0-vue';
-  
-    export default {
-      setup() {
-        const { loginWithRedirect } = useAuth0();
-  
-        return {
-          login: () => {
-            loginWithRedirect();
-          }
-        };
-      }
-    };
-  </script> -->
\ No newline at end of file
+const handleLogout = () => {
+  logout({
+    returnTo: window.location.origin,
+  });
+};
+</script>