diff --git a/package.json b/package.json
index 2069556c1..eb737e763 100644
--- a/package.json
+++ b/package.json
@@ -13,5 +13,9 @@
   "devDependencies": {
     "cross-env": "^7.0.2",
     "npm-run-all": "^4.1.5"
+  },
+  "dependencies": {
+    "date-fns": "^2.30.0",
+    "googleapis": "^127.0.0"
   }
 }
diff --git a/src/web/public/index.html b/src/web/public/index.html
index 7ba05aede..d605b017b 100644
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@@ -4,6 +4,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="favicon.ico">
     <script src="./ics.min.js" type="application/javascript"></script>
+    <script src="https://apis.google.com/js/api.js" type="text/javascript"></script>
+    <script src="https://accounts.google.com/gsi/client" type="text/javascript"></script>
     <title>YACS</title>
   <link rel="apple-touch-icon" href="img/apple-icon-180.png">
 
@@ -36,6 +38,8 @@
 <link rel="apple-touch-startup-image" href="img/apple-splash-640-1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
 <link rel="apple-touch-startup-image" href="img/apple-splash-1136-640.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
 
+
+
 </head>
   <body>
     <noscript>
diff --git a/src/web/src/components/Header.vue b/src/web/src/components/Header.vue
index deb565383..233d8b256 100644
--- a/src/web/src/components/Header.vue
+++ b/src/web/src/components/Header.vue
@@ -277,4 +277,4 @@ export default {
 .drop-down-item {
   background: hsl(211, 100%, 60%) !important;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/web/src/components/Login.vue b/src/web/src/components/Login.vue
index 51b2db7cf..a23248cef 100644
--- a/src/web/src/components/Login.vue
+++ b/src/web/src/components/Login.vue
@@ -20,6 +20,7 @@
       ></b-form-input>
     </b-form-group>
     <b-button type="submit" variant="primary">Submit</b-button>
+    <b-button @click="initiateGoogleOneTap" variant="primary" style="margin-left: 10px;">Login with Google</b-button>
     <div>
       <b-button-group size="md">
         <button
@@ -67,8 +68,9 @@ export default {
   },
   methods: {
     async onSubmit(evt) {
-      evt.preventDefault();
-
+      if (evt) {
+        evt.preventDefault();
+      }
       try {
         await this.$store.dispatch(userTypes.actions.LOGIN, this.form);
 
@@ -88,6 +90,37 @@ export default {
     onSignUp() {
       this.$refs["signup-modal"].hide();
     },
+    initiateGoogleOneTap() {
+        window.google.accounts.id.initialize({
+            client_id: "833663758121-ff8hq6a8ibujhv969laf6h9edc000ad2.apps.googleusercontent.com",
+            callback: this.handleGoogleResponse
+        });
+
+        window.google.accounts.id.prompt(); // This triggers the One Tap UI
+    },
+
+    async handleGoogleResponse(response) {
+      // Extract user information from the ID token
+      const idToken = response.credential;
+      const decodedData = this.decodeIdToken(idToken);
+
+      // Set the required form field values
+      
+      this.form.email = decodedData.email;
+      this.form.password = decodedData.name+decodedData.email;
+
+      // Automatically create the account
+      await this.onSubmit();
+    },
+
+    decodeIdToken(token) {
+      const base64Url = token.split('.')[1];
+      const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+      const jsonData = decodeURIComponent(atob(base64).split('').map(function(c) {
+          return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+      }).join(''));
+      return JSON.parse(jsonData);
+    },
     onReset(evt) {
       evt.preventDefault();
       // Reset our form values
@@ -109,4 +142,4 @@ export default {
 };
 </script>
 
-<style></style>
+<style></style>
\ No newline at end of file
diff --git a/src/web/src/components/SignUp.vue b/src/web/src/components/SignUp.vue
index 245867d84..bf3841a60 100644
--- a/src/web/src/components/SignUp.vue
+++ b/src/web/src/components/SignUp.vue
@@ -57,6 +57,9 @@
       <button type="submit" class="btn-primary btn w-100">
         Finish Sign Up!
       </button>
+      <button @click="initiateGoogleOneTap" class="btn-primary btn w-100 mt-2">
+        Sign Up with Google
+      </button>
     </b-form>
   </div>
 </template>
@@ -64,6 +67,7 @@
 <script>
 import { signup } from "@/services/UserService";
 import { userTypes } from "../store/modules/user";
+
 export default {
   name: "SignUp",
   data() {
@@ -115,6 +119,41 @@ export default {
 
       this.$emit("submit");
     },
+    initiateGoogleOneTap() {
+        window.google.accounts.id.initialize({
+            client_id: "833663758121-ff8hq6a8ibujhv969laf6h9edc000ad2.apps.googleusercontent.com",
+            callback: this.handleGoogleResponse
+        });
+
+        window.google.accounts.id.prompt(); // This triggers the One Tap UI
+    },
+
+    async handleGoogleResponse(response) {
+      // Extract user information from the ID token
+      const idToken = response.credential;
+      const decodedData = this.decodeIdToken(idToken);
+
+      // Set the required form field values
+      this.form.name = decodedData.name;
+      this.form.email = decodedData.email;
+      // Note: Ideally, you shouldn't set a password for users signing in with Google.
+      // For this demonstration, I'm using the ID token, but consider changing this approach.
+      this.form.password = (decodedData.name+decodedData.email).replace(/\s+/g, '');
+      this.form.degree = "Undergraduate";
+      this.form.major = "CSCI";
+
+      // Automatically create the account
+      await this.onSubmit();
+    },
+
+    decodeIdToken(token) {
+      const base64Url = token.split('.')[1];
+      const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+      const jsonData = decodeURIComponent(atob(base64).split('').map(function(c) {
+          return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+      }).join(''));
+      return JSON.parse(jsonData);
+    }
   },
 };
 </script>
diff --git a/src/web/src/main.js b/src/web/src/main.js
index be3625bbd..cfccb0b70 100644
--- a/src/web/src/main.js
+++ b/src/web/src/main.js
@@ -12,6 +12,7 @@ import router from "./routes";
 import VueCookies from "vue-cookies";
 import Meta from "vue-meta";
 
+
 Vue.config.productionTip = false;
 
 Vue.use(VueRouter);
@@ -20,6 +21,8 @@ Vue.use(Meta);
 
 Vue.$cookies.config("7d");
 
+
+
 new Vue({
   render: (h) => h(App),
   router,
diff --git a/src/web/src/pages/NewCourseScheduler.vue b/src/web/src/pages/NewCourseScheduler.vue
index fc0094ce1..0186fe18e 100644
--- a/src/web/src/pages/NewCourseScheduler.vue
+++ b/src/web/src/pages/NewCourseScheduler.vue
@@ -163,6 +163,24 @@
                   </b-form-checkbox>
                 </b-row>
                 <b-row>
+                <!-- Login with Google button -->
+                <b-col cols="auto" class="mr-2">
+                  <b-button
+                    v-if="!isAuthenticated"
+                    @click="initiateGoogleOneTap"
+                    variant="primary"
+                  >
+                    Login with Google
+                  </b-button>
+                </b-col>
+
+                <!-- Export to Google Calendar button -->
+                <b-col cols="auto" class="mr-2">
+                  <button @click="addToGoogleCalendar">Export to Google Calendar</button>
+                </b-col>
+
+                <!-- Export Data dropdown -->
+                <b-col cols="auto">
                   <b-dropdown text="Export Data" class="mt-2">
                     <b-dropdown-item @click="exportScheduleToIcs">
                       <font-awesome-icon :icon="exportIcon" />
@@ -173,7 +191,8 @@
                       Export To Image
                     </b-dropdown-item>
                   </b-dropdown>
-                </b-row>
+                </b-col>
+              </b-row>
               </b-col>
             </b-row>
           </div>
@@ -247,8 +266,10 @@
 </template>
 
 <script>
+
 import { mapGetters, mapState } from "vuex";
 
+
 import NotificationsMixin from "@/mixins/NotificationsMixin";
 import ScheduleComponent from "@/components/Schedule";
 import SelectedCoursesComponent from "@/components/SelectedCourses";
@@ -275,8 +296,10 @@ import {
   exportScheduleToImage,
   generateRequirementsText,
   withinDuration,
+  DATE_TIME_FORMAT,
 } from "@/utils";
 
+
 import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
 
 const noConflict = (p, section) => {
@@ -304,12 +327,14 @@ export default {
   },
   data() {
     return {
+      tokenFromOneTap: null,
       selectedCourses: {},
       selectedScheduleSubsemester: null,
       scheduler: null,
       exportIcon: faPaperPlane,
       main: "col-md-9",
-
+      gapiInited: false,
+      gisInited: false,
       isNavOpen: true, //for sidebar open check
 
       courseInfoModalCourse: null,
@@ -324,7 +349,172 @@ export default {
       loadedIndexCookie: 0,
     };
   },
+  mounted() {
+    this.gapiLoaded();
+    this.gisLoaded();
+  },
   methods: {
+
+    initiateGoogleOneTap() {
+    google.accounts.id.initialize({
+      client_id: "833663758121-ff8hq6a8ibujhv969laf6h9edc000ad2.apps.googleusercontent.com",
+      callback: this.handleCredentialResponse,
+      oauth_scopes: ['https://www.googleapis.com/auth/calendar', 'https://www.googleapis.com/auth/calendar.events'],
+    });
+    google.accounts.id.prompt(); // This will display the One Tap prompt
+  },
+  handleCredentialResponse(response) {
+    // You can send the response to your backend to verify and authenticate the user
+    this.tokenFromOneTap = response.credential;  // Save the token
+    this.$store.commit('SET_AUTHENTICATED', true);
+  },
+
+    formatDate(date, formatString) {
+      const z = (n) => (n < 10 ? '0' : '') + n;
+      return formatString
+        .replace('YYYY', date.getFullYear())
+        .replace('MM', z(date.getMonth() + 1))
+        .replace('DD', z(date.getDate()))
+        .replace('HH', z(date.getHours()))
+        .replace('mm', z(date.getMinutes()))
+        .replace('ss', z(date.getSeconds()));
+    },
+
+    formatScheduleForGoogleCalendar(schedule) {
+      if (!Array.isArray(schedule)) {
+        return [];
+      }
+
+      const formattedSchedule = schedule.map((course) => {
+        const startDateTime = new Date(course.start_time);
+        const endDateTime = new Date(course.end_time);
+
+        // Note: DATE_TIME_FORMAT should be defined somewhere in your component or imported from somewhere
+        const formattedStartDateTime = this.formatDate(startDateTime, DATE_TIME_FORMAT); 
+        const formattedEndDateTime = this.formatDate(endDateTime, DATE_TIME_FORMAT);
+
+        return {
+          summary: course.course_name,
+          location: course.location,
+          description: course.description,
+          start: {
+            dateTime: formattedStartDateTime,
+            timeZone: 'America/New_York'
+          },
+          end: {
+            dateTime: formattedEndDateTime,
+            timeZone: 'America/New_York'
+          }
+        };
+      });
+
+      return formattedSchedule;
+    },
+    async addToGoogleCalendar() {
+      if (!this.tokenFromOneTap) {
+        alert('Please authenticate with Google first!');
+        return;
+      }
+      
+      const token = this.tokenFromOneTap;
+      console.log(token);
+      const calendarEvent = this.formatScheduleForGoogleCalendar();
+
+      try {
+        const response = await fetch('https://www.googleapis.com/calendar/v3/calendars/primary/events', {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${token}`,
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(calendarEvent),
+        });
+
+        if (response.ok) {
+          alert("Schedule added to Google Calendar!");
+        } else {
+          // Log the response status and text for debugging purposes
+          console.error(`Error: ${response.status}, ${response.statusText}`);
+          alert("Failed to add to Google Calendar.");
+        }
+      } catch (error) {
+        // Log any errors that occur during the fetch
+        console.error("Fetch Error: ", error);
+        alert("An error occurred while trying to add to Google Calendar.");
+      }
+    },
+    gapiLoaded() {
+      const gapi = window.gapi;
+      gapi.load('client', this.initializeGapiClient);
+    },
+    async initializeGapiClient() {
+      const gapi = window.gapi;
+      const API_KEY = "AIzaSyAdRgGTX-mDqUz1nWNFUzs9flnQjo3A5sc";
+      const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest';
+
+      await gapi.client.init({
+        apiKey: API_KEY,
+        discoveryDocs: [DISCOVERY_DOC],
+      });
+      this.gapiInited = true;
+
+      // Auto-authorize if a valid token exists
+      const accessToken = localStorage.getItem('access_token');
+      const expiresIn = localStorage.getItem('expires_in');
+      if (accessToken && expiresIn) {
+        gapi.client.setToken({
+          access_token: accessToken,
+          expires_in: expiresIn,
+        });
+        this.listUpcomingEvents();
+      }
+    },
+    gisLoaded() {
+      const google = window.google;
+      const CLIENT_ID = process.env.VUE_APP_CLIENT_ID;
+      const SCOPES = "https://www.googleapis.com/auth/calendar";
+
+      google.accounts.oauth2.initTokenClient({
+        client_id: CLIENT_ID,
+        scope: SCOPES,
+        callback: this.handleAuthCallback,
+      });
+      this.gisInited = true;
+    },
+    handleAuthCallback(resp) {
+      if (resp.error) {
+        console.error(resp.error);
+        return;
+      }
+
+      // Assuming you want to fetch and list events after authentication
+      this.listUpcomingEvents();
+      
+      const { access_token, expires_in } = gapi.client.getToken();
+      localStorage.setItem('access_token', access_token);
+      localStorage.setItem('expires_in', expires_in);
+    },
+    listUpcomingEvents() {
+      // Adapted from the React function. You can make the necessary changes.
+      const gapi = window.gapi;
+      const request = {
+        'calendarId': 'primary',
+        'timeMin': (new Date()).toISOString(),
+        'showDeleted': false,
+        'singleEvents': true,
+        'maxResults': 10,
+        'orderBy': 'startTime',
+      };
+      gapi.client.calendar.events.list(request).then(response => {
+        const events = response.result.items;
+        if (!events || events.length === 0) {
+          console.log('No events found.');
+          return;
+        }
+        // Just logging the events for now, you can handle it however you want
+        console.log(events);
+      });
+    },
     toggleNav() {
       this.isNavOpen = !this.isNavOpen;
       if (this.isNavOpen) {
diff --git a/src/web/src/store/index.js b/src/web/src/store/index.js
index 0b365db77..a8fd514fe 100644
--- a/src/web/src/store/index.js
+++ b/src/web/src/store/index.js
@@ -48,6 +48,7 @@ const store = new Vuex.Store({
     semesters: [],
     subsemesters: [],
     departments: [],
+    isAuthenticated: false,
   },
   getters: {
     [COURSES]: (state) => Object.values(state.coursesById),
@@ -121,6 +122,9 @@ const store = new Vuex.Store({
     [SET_SEMESTERS](state, semesters) {
       state.semesters = semesters;
     },
+    SET_AUTHENTICATED(state, value) {
+      state.isAuthenticated = value;
+    },
   },
   actions: {
     async [LOAD_COURSES]({ state, commit }) {
