diff --git a/components/navbar.tsx b/components/navbar.tsx
index ed3a340..ed75564 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client";
 
-import { useState } from "react"
-import Link from "next/link"
-import { usePathname } from "next/navigation"
-import { Button } from "@/components/ui/button"
-import { ThemeToggle } from "@/components/theme-toggle"
-import { Menu, X } from 'lucide-react'
+import { useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { ThemeToggle } from "@/components/theme-toggle";
+import { Menu, X } from "lucide-react";
 
 const navItems = [
   { href: "/", label: "Home" },
@@ -13,13 +13,13 @@ const navItems = [
   { href: "/learn-more", label: "How it Works" },
   { href: "/FAQ", label: "FAQs" },
   // { href: "/blog", label: "Blog" },
-]
+];
 
 const Navbar1 = () => {
-  const [isMenuOpen, setIsMenuOpen] = useState(false)
-  const pathname = usePathname()
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const pathname = usePathname();
 
-  const toggleMenu = () => setIsMenuOpen(!isMenuOpen)
+  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
 
   return (
     <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
@@ -34,7 +34,9 @@ const Navbar1 = () => {
               key={item.href}
               href={item.href}
               className={`text-sm font-medium transition-colors hover:text-primary ${
-                pathname === item.href ? "text-primary" : "text-muted-foreground"
+                pathname === item.href
+                  ? "text-primary"
+                  : "text-muted-foreground"
               }`}
             >
               {item.label}
@@ -42,7 +44,10 @@ const Navbar1 = () => {
           ))}
         </div>
         <div className="hidden lg:flex items-center space-x-4">
-          <Link href="/auth/signin" className="text-sm font-medium text-muted-foreground hover:text-primary">
+          <Link
+            href="/auth/signin"
+            className="text-sm font-medium text-muted-foreground hover:text-primary"
+          >
             Log in
           </Link>
           <Button asChild>
@@ -55,19 +60,26 @@ const Navbar1 = () => {
           className="lg:hidden focus:outline-none"
           aria-label={isMenuOpen ? "Close menu" : "Open menu"}
         >
-          {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
+          {/* ADDED THEME TOGGLE ALONG WITH MENU  */}
+          <div className="flex flex-row justify-center items-center gap-2">
+            <ThemeToggle />
+            {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
+          </div>
         </button>
       </nav>
 
       {isMenuOpen && (
         <div className="lg:hidden">
-          <nav className="container flex flex-col space-y-4 py-4">
+          {/* ADDED X-PADDING TO MAKE IT FIT PROPERLY ON MOBILE SCREENS */}
+          <nav className="container flex flex-col space-y-4 py-4 px-4">
             {navItems.map((item) => (
               <Link
                 key={item.href}
                 href={item.href}
                 className={`text-sm font-medium transition-colors hover:text-primary ${
-                  pathname === item.href ? "text-primary" : "text-muted-foreground"
+                  pathname === item.href
+                    ? "text-primary"
+                    : "text-muted-foreground"
                 }`}
                 onClick={toggleMenu}
               >
@@ -75,25 +87,20 @@ const Navbar1 = () => {
               </Link>
             ))}
             <div className="flex flex-col space-y-4 pt-4 border-t">
-              <Link
-                href="/auth/signin"
-                className="text-sm font-medium text-muted-foreground hover:text-primary"
-                onClick={toggleMenu}
-              >
-                Log in
-              </Link>
+              {/* FORMATTED THE LOGIN BUTTON -> LOGIN TEXT IN CENTER AND BACKGROUND ADDED */}
+              <Button asChild className="bg-primary-foreground text-white">
+                <Link href="/auth/signin">Login</Link>
+              </Button>
               <Button asChild onClick={toggleMenu}>
                 <Link href="/auth/register">Sign up</Link>
               </Button>
-              <div className="flex justify-start">
-                <ThemeToggle />
-              </div>
+              <div className="flex justify-start"></div>
             </div>
           </nav>
         </div>
       )}
     </header>
-  )
-}
-export default Navbar1
+  );
+};
 
+export default Navbar1;
diff --git a/components/ui/shiny-button.tsx b/components/ui/shiny-button.tsx
deleted file mode 100644
index bd8455f..0000000
--- a/components/ui/shiny-button.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-"use client";
-
-import React from "react";
-import {
-  motion,
-  type AnimationProps,
-  type HTMLMotionProps,
-} from "motion/react";
-import { cn } from "@/lib/utils";
-
-const animationProps = {
-  initial: { "--x": "100%", scale: 0.8 },
-  animate: { "--x": "-100%", scale: 1 },
-  whileTap: { scale: 0.95 },
-  transition: {
-    repeat: Infinity,
-    repeatType: "loop",
-    repeatDelay: 1,
-    type: "spring",
-    stiffness: 20,
-    damping: 15,
-    mass: 2,
-    scale: {
-      type: "spring",
-      stiffness: 200,
-      damping: 5,
-      mass: 0.5,
-    },
-  },
-} as AnimationProps;
-
-interface ShinyButtonProps extends HTMLMotionProps<"button"> {
-  children: React.ReactNode;
-  className?: string;
-  ref?: React.Ref<HTMLButtonElement>;
-}
-
-const ShinyButton = React.forwardRef<HTMLButtonElement, ShinyButtonProps>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <motion.button
-        ref={ref}
-        {...animationProps}
-        {...props}
-        className={cn(
-          "relative rounded-lg px-6 py-2 font-medium backdrop-blur-xl transition-shadow duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,hsl(var(--primary)/10%)_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_hsl(var(--primary)/10%)]",
-          className,
-        )}
-      >
-        <span
-          className="relative block size-full text-sm uppercase tracking-wide text-[rgb(0,0,0,65%)] dark:font-light dark:text-[rgb(255,255,255,90%)]"
-          style={{
-            maskImage:
-              "linear-gradient(-75deg,hsl(var(--primary)) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),hsl(var(--primary)) calc(var(--x) + 100%))",
-          }}
-        >
-          {children}
-        </span>
-        <span
-          style={{
-            mask: "linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box,linear-gradient(rgb(0,0,0), rgb(0,0,0))",
-            maskComposite: "exclude",
-          }}
-          className="absolute inset-0 z-10 block rounded-[inherit] bg-[linear-gradient(-75deg,hsl(var(--primary)/10%)_calc(var(--x)+20%),hsl(var(--primary)/50%)_calc(var(--x)+25%),hsl(var(--primary)/10%)_calc(var(--x)+100%))] p-px"
-        ></span>
-      </motion.button>
-    );
-  },
-);
-
-ShinyButton.displayName = "ShinyButton";
-
-export default ShinyButton;
diff --git a/package-lock.json b/package-lock.json
index 8b0d727..76f7eb5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "embla-carousel-react": "^8.5.1",
-        "framer-motion": "^11.15.0",
+        "framer-motion": "^11.17.0",
         "lucide-react": "^0.469.0",
         "motion": "^11.17.0",
         "next": "15.1.2",
diff --git a/package.json b/package.json
index 5a773fc..e81e514 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.5.1",
-    "framer-motion": "^11.15.0",
+    "framer-motion": "^11.17.0",
     "lucide-react": "^0.469.0",
     "motion": "^11.17.0",
     "next": "15.1.2",