diff --git a/client/src/App.css b/client/src/App.css
index b5c61c9..e69de29 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/client/src/componetnts/Navbar.jsx b/client/src/componetnts/Navbar.jsx
index 0dd1a56..5a8fc02 100644
--- a/client/src/componetnts/Navbar.jsx
+++ b/client/src/componetnts/Navbar.jsx
@@ -37,7 +37,7 @@ const Navbar = () => {
         {token ? (
           <>
             <div className="flex justify-center items-center">
-              <h2 className="text-white font-mono ">
+              <h2 className="text-white font-roboto">
                 Please Don't Refresh the Page!!
               </h2>
             </div>
@@ -45,9 +45,9 @@ const Navbar = () => {
         ) : (
           <>
             <div className="text-center">
-              <a href="https://glideride.online/">
+              <a href="https://glideride.online">
                 <button
-                  className="hover:bg-blue-500"
+                  className="hover:bg-blue-500 font-roboto"
                   style={{ ...buttonStyle }}
                   onMouseEnter={(e) => {
                     e.target.style.backgroundColor =
@@ -63,7 +63,7 @@ const Navbar = () => {
               </a>
               <a href="https://www.instagram.com/glideride.online/">
                 <button
-                  className="hover:bg-blue-500"
+                  className="hover:bg-blue-500 font-roboto"
                   style={{ ...buttonStyle }}
                   onMouseEnter={(e) => {
                     e.target.style.backgroundColor =
diff --git a/client/src/index.css b/client/src/index.css
index bd6213e..e1c447b 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap");
+
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
diff --git a/client/src/pages/Booking.jsx b/client/src/pages/Booking.jsx
index 35dd894..77037ce 100644
--- a/client/src/pages/Booking.jsx
+++ b/client/src/pages/Booking.jsx
@@ -63,10 +63,10 @@ const Booking = ({ showUi }) => {
               >
                 <div className=" bg-opacity-10 min-h-screen flex items-center justify-center">
                   <div className="text-center" style={textStyle}>
-                    <h1 className="text-4xl font-bold mb-4">
+                    <h1 className="text-4xl font-roboto mb-4">
                       Book your ride within 2 mins
                     </h1>
-                    <p className="text-lg">
+                    <p className="text-lg font-roboto">
                       Explore our affordable bike rental service
                     </p>
 
@@ -80,7 +80,8 @@ const Booking = ({ showUi }) => {
                       onMouseEnter={() => setIsHovered(true)}
                       onMouseLeave={() => setIsHovered(false)}
                     >
-                      <i className="fab fa-google mr-2"></i> Proceed with Google
+                      <i className="font-robot fab fa-google mr-2"></i> Proceed
+                      with Google
                     </button>
                   </div>
                 </div>
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 5a66654..0da7ffa 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -4,7 +4,11 @@ module.exports = {
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        roboto: ['Roboto Slab', 'serif'],
+      }
+    },
   },
   plugins: [],
 }
\ No newline at end of file