diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 663136a..c4eadde 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -204,11 +204,12 @@ header {
   font-weight: 300;
   font-size: 16px;
   padding: 0 8px;
-  transition: 0.3s color ease;
+  border-radius: 30px;
+  transition: 0.3s background-color ease;
 }
 
 .link:hover {
-  color: red;
+  background-color: #eb9d63;
 }
 
 .logo {
diff --git a/src/views/Cart.vue b/src/views/Cart.vue
index 2509c86..574aaca 100644
--- a/src/views/Cart.vue
+++ b/src/views/Cart.vue
@@ -12,13 +12,14 @@
             <span>{{ item.quantity }}</span>
             <button @click="updateCartQuantity({ product: item, quantity: item.quantity + 1 })">+</button>
           </div>
-          <button @click="removeFromCart(item)">Remove</button>
+          <button @click="removeFromCart(item)" class="remove-item">Remove</button>
         </div>
       </div>
       <div class="cart-summary">
         <h2>Cart Summary</h2>
         <p>Total Items: {{ cartItemCount }}</p>
         <p>Total Price: {{ cartTotal | currency }}</p>
+        <button class="checkout-button">Checkout</button>
       </div>
     </div>
     <div v-else class="empty-cart">
@@ -41,16 +42,31 @@ export default {
 </script>
 
 <style scoped>
+body {
+  font-family: 'Courier New', Courier, monospace;
+  background-color: #f8f8f8;
+  margin: 0;
+  padding: 0;
+}
+
 .cart {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
+  padding: 40px;
+  max-width: 650px;
+  margin: 20px auto;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  font-family: 'Courier New', Courier, monospace;
+  background-color: beige;
+
 }
 
 h1 {
-  font-size: 2.5rem;
+  font-size: 2rem;
   margin-bottom: 20px;
   text-align: center;
+  font-family: 'Courier New', Courier, monospace;
 }
 
 .cart-content {
@@ -62,15 +78,12 @@ h1 {
 .cart-item {
   display: flex;
   align-items: center;
-  padding: 20px;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  background-color: #fff;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  padding: 10px;
+  border-bottom: 1px dashed #ddd;
 }
 
 .cart-item-image {
-  width: 100px;
+  width: 80px;
   height: auto;
   margin-right: 20px;
 }
@@ -80,13 +93,13 @@ h1 {
 }
 
 .cart-item-details h2 {
-  font-size: 1.5rem;
-  margin: 0 0 10px 0;
+  font-size: 1.2rem;
+  margin: 0 0 5px 0;
 }
 
-.cart-item-details p {
+.cart-item-details .price {
   font-size: 1rem;
-  color: #555;
+  color: #333;
   margin: 5px 0;
 }
 
@@ -97,36 +110,51 @@ h1 {
 }
 
 .quantity-controls button {
-  background-color: #e91e63;
+  background-color: #333;
   color: #fff;
   border: none;
-  padding: 5px 10px;
+  padding: 5px;
   font-size: 1rem;
   cursor: pointer;
-  border-radius: 5px;
+  border-radius: 3px;
 }
 
 .quantity-controls span {
   margin: 0 10px;
-  font-size: 1.2rem;
+  font-size: 1rem;
 }
 
 .remove-item {
   background-color: transparent;
   border: none;
-  font-size: 1.5rem;
+  font-size: 1rem;
   color: #e91e63;
   cursor: pointer;
+  margin-top: 10px;
+  padding: 5px;
 }
 
 .cart-summary {
-  text-align: right;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
   margin-top: 20px;
 }
 
 .cart-summary h2 {
-  font-size: 1.8rem;
-  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 400px;
+  font-size: 1.5rem;
+  margin-bottom: 10px;
+}
+
+.cart-summary p {
+  font-size: 1rem;
+  margin: 5px 0;
 }
 
 .checkout-button {
@@ -134,18 +162,27 @@ h1 {
   color: #fff;
   border: none;
   padding: 10px 20px;
-  font-size: 1.2rem;
+  font-size: 1rem;
   cursor: pointer;
+  max-width: 300px;
   border-radius: 5px;
+  margin-top: 20px;
+  display: block;
+  width: 100%;
+}
+
+.checkout-button:hover {
+  background-color: #d81b60;
 }
 
 .empty-cart {
-  display: flex;
-  flex-direction: column;
   text-align: center;
   font-size: 1.5rem;
   color: #555;
-  justify-content: center;
   height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 </style>
+
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 5ec1efb..6fb4568 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -18,12 +18,18 @@
         <div v-show='error' class="error">{{ this.errorMsg }}</div>
       </div>
       <router-link class='forgot-password' :to='{ name: "ForgotPassword" }'>Forgot your password?</router-link>
-      <button @click.prevent='signin'>Sign in</button>
+      <button @click.prevent='signin' :disabled="loading">
+        <span v-if="!loading">Sign in</span>
+        <span v-else class="spinner"></span>
+      </button>
+      <button @click.prevent='googleSignIn' :disabled="loading" class="google-button">
+        <span v-if="!loading">Sign in with Google</span>
+        <span v-else class="spinner"></span>
+      </button>
     </form>
   </div>
 </template>
 
-
 <script>
 import firebase from 'firebase/app';
 import email from '../assets/Icons/envelope-regular.svg';
@@ -32,31 +38,50 @@ import 'firebase/auth';
 
 export default {
   name: "Login",
-  components: { email , password},
+  components: { email, password },
   data() {
     return {
       email: '',
       password: '',
       error: false,
-      errorMsg: ''
+      errorMsg: '',
+      loading: false,
     }
   },
   methods: {
-    signin() {
-      firebase.auth().signInWithEmailAndPassword(this.email, this.password)
-        .then(() => {
-          this.$router.push({ name: 'Home' });
-          this.error = false;
-          this.errorMsg = '';
-        })
-        .catch((err) => {
-          this.error = true;
-          this.errorMsg = err.message;
-        });
+    async signin() {
+      this.loading = true;
+      this.error = false;
+      this.errorMsg = '';
+      try {
+        await firebase.auth().signInWithEmailAndPassword(this.email, this.password);
+        this.$router.push({ name: 'Home' });
+      } catch (err) {
+        this.error = true;
+        this.errorMsg = err.message;
+      } finally {
+        this.loading = false;
+      }
+    },
+    async googleSignIn() {
+      this.loading = true;
+      this.error = false;
+      this.errorMsg = '';
+      try {
+        const provider = new firebase.auth.GoogleAuthProvider();
+        await firebase.auth().signInWithPopup(provider);
+        this.$router.push({ name: 'Home' });
+      } catch (err) {
+        this.error = true;
+        this.errorMsg = err.message;
+      } finally {
+        this.loading = false;
+      }
     }
   }
 }
 </script>
+
 <style lang='scss'>
 .form-wrap {
   display: flex;
@@ -152,11 +177,43 @@ form {
     cursor: pointer;
     transition: background-color 0.3s;
     margin-top: 14px;
-  
+    padding: 10px 20px;
+    width: 100%;
+    font-size: 1rem;
+
     &:hover {
       background-color: #2980b9;
     }
+
+    &:disabled {
+      background-color: #b0c4de;
+      cursor: not-allowed;
+    }
+
+    .spinner {
+      width: 20px;
+      height: 20px;
+      border: 2px solid #fff;
+      border-top: 2px solid transparent;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+  }
+
+  .google-button {
+    background-color: #db4437;
+
+    &:hover {
+      background-color: #c33d2e;
+    }
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
   }
 }
 </style>
 
+
diff --git a/src/views/Register.vue b/src/views/Register.vue
index 2aab646..aedfb48 100644
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -1,37 +1,42 @@
 <template>
-   <div class='form-wrap'>
+  <div class='form-wrap'>
     <form action=" " class="register">
       <p class="login-register">
-        Already have an account? 
-        <router-link class="router-link" :to="{ name:'Login'} ">Login</router-link>
+        Already have an account?
+        <router-link class="router-link" :to="{ name: 'Login' }">Login</router-link>
       </p>
       <h2>Create your BFR Account</h2>
       <div class="inputs">
         <div class="input">
           <input type="text" placeholder='First Name' v-model='firstName'>
-          <user class='icon'/>
+          <user class='icon' />
         </div>
         <div class="input">
           <input type="text" placeholder='Last Name' v-model='lastName'>
-          <user class='icon'/>
+          <user class='icon' />
         </div>
         <div class="input">
           <input type="text" placeholder='Username' v-model='userName'>
-          <user class='icon'/>
+          <user class='icon' />
         </div>
         <div class="input">
           <input type="email" placeholder='E-mail' v-model='email'>
-          <email class='icon'/>
+          <email class='icon' />
         </div>
         <div class="input">
-          <input type="text" placeholder='Password' v-model='password'>
-          <password class='icon'/>
+          <input type="password" placeholder='Password' v-model='password'>
+          <password class='icon' />
         </div>
-        <div v-if='error' class="error">{{this.errorMsg}}</div>
+        <div v-if='error' class="error">{{ this.errorMsg }}</div>
       </div>
-     
-      <button @click.prevent='register'>Sign Up</button>
-      
+      <button @click.prevent='register' :disabled="loading">
+        <span v-if="!loading">Sign Up</span>
+        <span v-else class="spinner"></span>
+      </button>
+      <button @click.prevent='googleSignIn' :disabled="loading" class="google-button">
+        <span v-if="!loading">Sign Up with Google</span>
+        <span v-else class="spinner"></span>
+      </button>
     </form>
   </div>
 </template>
@@ -42,57 +47,197 @@ import password from '../assets/Icons/lock-alt-solid.svg';
 import user from '../assets/Icons/user-alt-light.svg';
 import firebase from 'firebase/app';
 import 'firebase/auth';
-import db from '../firebase/firebaseInit'
+import db from '../firebase/firebaseInit';
+
 export default {
-  name:'Register',
-  components: { email , password , user },
-  data(){
-    return{
+  name: 'Register',
+  components: { email, password, user },
+  data() {
+    return {
       firstName: "",
       lastName: "",
       userName: "",
       email: "",
       password: "",
-      error: "",
+      error: false,
       errorMsg: "",
+      loading: false,
     };
   },
-  methods:{
-    async register(){
-      if(
-        this.firstName !== '' &&
-        this.lastName !== '' &&
-        this.userName !== '' &&
-        this.email !== '' &&
-        this.password !== ''
-      ) {
+  methods: {
+    async register() {
+      if (this.firstName && this.lastName && this.userName && this.email && this.password) {
         this.error = false;
         this.errorMsg = '';
-        const firebaseAuth = await firebase.auth()
-        const createUser = await firebaseAuth.createUserWithEmailAndPassword(this.email , this.password);
-        const result = await createUser;
-        const database = db.collection('users').doc(result.user.uid);
-        await database.set({
-          firstName: this.firstName,
-          lastName: this.lastName,
-          userName: this.userName,
-          email : this.email,
-          password: this.password
-        })
-        this.$router.push({name: "Home"})
-        return;
+        this.loading = true;
+        try {
+          const firebaseAuth = await firebase.auth();
+          const createUser = await firebaseAuth.createUserWithEmailAndPassword(this.email, this.password);
+          const result = await createUser;
+          const database = db.collection('users').doc(result.user.uid);
+          await database.set({
+            firstName: this.firstName,
+            lastName: this.lastName,
+            userName: this.userName,
+            email: this.email,
+            password: this.password
+          });
+          this.$router.push({ name: "Home" });
+        } catch (error) {
+          this.error = true;
+          this.errorMsg = error.message;
+        } finally {
+          this.loading = false;
+        }
+      } else {
+        this.error = true;
+        this.errorMsg = 'Please fill out all the fields';
       }
-      this.error = true;
-      this.errorMsg = 'Please fill out all the fields';
-      return;
     },
+    async googleSignIn() {
+      this.loading = true;
+      try {
+        const provider = new firebase.auth.GoogleAuthProvider();
+        const result = await firebase.auth().signInWithPopup(provider);
+        const user = result.user;
+        const database = db.collection('users').doc(user.uid);
+        await database.set({
+          firstName: user.displayName.split(' ')[0],
+          lastName: user.displayName.split(' ')[1],
+          userName: user.displayName,
+          email: user.email,
+        });
+        this.$router.push({ name: "Home" });
+      } catch (error) {
+        this.error = true;
+        this.errorMsg = error.message;
+      } finally {
+        this.loading = false;
+      }
+    }
   }
-}
+};
 </script>
 
 <style lang='scss' scoped>
-h2{
-  max-width: 350px;
+.form-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100%;
+  background-color: #f9f9f9;
+}
+
+form {
+  background: #fff;
+  padding: 40px 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  max-width: 400px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  h2 {
+    font-size: 24px;
+    color: #333;
+    margin-bottom: 20px;
+  }
+
+  .login-register {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 20px;
+
+    .router-link {
+      color: #3498db;
+      text-decoration: none;
+    }
+  }
+
+  .inputs {
+    width: 100%;
+
+    .input {
+      position: relative;
+      margin-bottom: 20px;
+
+      input {
+        width: 100%;
+        padding: 10px 10px 10px 40px;
+        border: 1px solid #ccc;
+        border-radius: 20px;
+        background-color: #f2f7f6;
+
+        &:focus {
+          outline: none;
+          border-color: #3498db;
+        }
+      }
+
+      .icon {
+        position: absolute;
+        left: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+
+  .error {
+    color: red;
+    font-size: 14px;
+    margin-bottom: 20px;
+    text-align: center;
+  }
+
+  button {
+    background-color: #3498db;
+    color: #fff;
+    border: none;
+    border-radius: 20px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    margin-top: 14px;
+    padding: 10px 20px;
+    width: 100%;
+    font-size: 1rem;
+
+    &:hover {
+      background-color: #2980b9;
+    }
+
+    &:disabled {
+      background-color: #b0c4de;
+      cursor: not-allowed;
+    }
+
+    .spinner {
+      width: 20px;
+      height: 20px;
+      border: 2px solid #fff;
+      border-top: 2px solid transparent;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+  }
+
+  .google-button {
+    background-color: #db4437;
+
+    &:hover {
+      background-color: #c33d2e;
+    }
+  }
 }
 
-</style>
\ No newline at end of file
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>