From 97990e05a0f66a695e24374a0420db9129ce6668 Mon Sep 17 00:00:00 2001
From: Aman koli <2025.amana@isu.ac.in>
Date: Sun, 29 Mar 2026 11:54:06 +0530
Subject: [PATCH] feat: #384 apply consistent PageBackground across all pages

- Refactor PageBackground.tsx to be a full-page wrapper (min-h-screen
  gradient + SVG network lines) matching the homepage design
- Refactor homepage (page.tsx) to use PageBackground instead of
  duplicated inline background markup
- Fix Faq/page.tsx: use PageBackground as root container instead of
  wrapping it in an outer div
- Fix login/page.tsx: replace solid bg-black with PageBackground
- Fix signin/page.tsx: replace solid bg-black with PageBackground
- Fix profilePage/page.tsx: replace bg-black with PageBackground
---
 frontend/src/app/Faq/page.tsx             | 130 +++---
 frontend/src/app/login/page.tsx           | 217 +++++-----
 frontend/src/app/page.tsx                 |  75 +---
 frontend/src/app/profilePage/page.tsx     | 502 +++++++++++-----------
 frontend/src/app/signin/page.tsx          | 237 +++++-----
 frontend/src/component/PageBackground.tsx |  94 ++--
 6 files changed, 607 insertions(+), 648 deletions(-)

diff --git a/frontend/src/app/Faq/page.tsx b/frontend/src/app/Faq/page.tsx
index 1c54fb01..94f9089e 100644
--- a/frontend/src/app/Faq/page.tsx
+++ b/frontend/src/app/Faq/page.tsx
@@ -52,80 +52,76 @@ export default function CryptoFAQ() {
   };
 
   return (
-    <div className="relative min-h-screen overflow-x-hidden text-white">
-      <PageBackground />
+    <PageBackground>
+      <Header />
 
-      <div className="relative z-10">
-        <Header />
+      <main className="max-w-5xl mx-auto px-6 pt-32 pb-20 text-white">
+        <section className="rounded-[2rem] border border-white/10 bg-[#111726]/85 p-6 shadow-[0_25px_80px_rgba(2,6,23,0.45)] backdrop-blur sm:p-10">
+          <div className="flex flex-col gap-5 border-b border-white/10 pb-8 sm:flex-row sm:items-end sm:justify-between">
+            <div className="space-y-3">
+              <p className="text-sm font-medium uppercase tracking-[0.28em] text-[#4FD1C5]">
+                Support
+              </p>
+              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
+                Frequently Asked Questions
+              </h1>
+              <p className="max-w-2xl text-base text-[#94a3b8]">
+                Find quick answers about crypto basics, tournaments, and how
+                to get started on InsightArena.
+              </p>
+            </div>
 
-        <main className="max-w-5xl mx-auto px-6 pt-32 pb-20">
-          <section className="rounded-[2rem] border border-white/10 bg-[#111726]/85 p-6 shadow-[0_25px_80px_rgba(2,6,23,0.45)] backdrop-blur sm:p-10">
-            <div className="flex flex-col gap-5 border-b border-white/10 pb-8 sm:flex-row sm:items-end sm:justify-between">
-              <div className="space-y-3">
-                <p className="text-sm font-medium uppercase tracking-[0.28em] text-[#4FD1C5]">
-                  Support
-                </p>
-                <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
-                  Frequently Asked Questions
-                </h1>
-                <p className="max-w-2xl text-base text-[#94a3b8]">
-                  Find quick answers about crypto basics, tournaments, and how
-                  to get started on InsightArena.
-                </p>
-              </div>
+            <Link
+              href="/"
+              className="inline-flex items-center gap-2 self-start rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-[#d8dee9] transition hover:bg-white/10 hover:text-white"
+            >
+              <ChevronLeft size={18} />
+              <span>Back to home</span>
+            </Link>
+          </div>
 
-              <Link
-                href="/"
-                className="inline-flex items-center gap-2 self-start rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-[#d8dee9] transition hover:bg-white/10 hover:text-white"
+          <div className="mt-8 space-y-4">
+            {faqItems.map((item) => (
+              <div
+                key={item.id}
+                className="overflow-hidden rounded-2xl border border-white/10 bg-[#0f172a]/90"
               >
-                <ChevronLeft size={18} />
-                <span>Back to home</span>
-              </Link>
-            </div>
-
-            <div className="mt-8 space-y-4">
-              {faqItems.map((item) => (
-                <div
-                  key={item.id}
-                  className="overflow-hidden rounded-2xl border border-white/10 bg-[#0f172a]/90"
+                <button
+                  type="button"
+                  className="flex w-full items-center justify-between gap-4 px-5 py-5 text-left transition hover:bg-white/5"
+                  onClick={() => toggleFAQ(item.id)}
                 >
-                  <button
-                    type="button"
-                    className="flex w-full items-center justify-between gap-4 px-5 py-5 text-left transition hover:bg-white/5"
-                    onClick={() => toggleFAQ(item.id)}
-                  >
-                    <h2 className="text-lg font-semibold text-white sm:text-xl">
-                      {item.id}. {item.question}
-                    </h2>
-                    <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#4FD1C5] text-[#0f172a]">
-                      {item.isOpen ? (
-                        <Minus size={18} />
-                      ) : (
-                        <Plus size={18} />
-                      )}
-                    </span>
-                  </button>
+                  <h2 className="text-lg font-semibold text-white sm:text-xl">
+                    {item.id}. {item.question}
+                  </h2>
+                  <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#4FD1C5] text-[#0f172a]">
+                    {item.isOpen ? (
+                      <Minus size={18} />
+                    ) : (
+                      <Plus size={18} />
+                    )}
+                  </span>
+                </button>
 
-                  {item.isOpen && (
-                    <div className="border-t border-white/10 px-5 py-5 text-[15px] leading-7 text-[#cbd5e1]">
-                      <p>{item.answer}</p>
-                    </div>
-                  )}
-                </div>
-              ))}
-            </div>
+                {item.isOpen && (
+                  <div className="border-t border-white/10 px-5 py-5 text-[15px] leading-7 text-[#cbd5e1]">
+                    <p>{item.answer}</p>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
 
-            <div className="mt-8 rounded-2xl border border-[#4FD1C5]/20 bg-[#0b1220] px-6 py-5">
-              <p className="text-sm leading-6 text-[#94a3b8]">
-                Still need help? Explore the platform from the homepage and
-                keep an eye on upcoming guides and community resources.
-              </p>
-            </div>
-          </section>
-        </main>
+          <div className="mt-8 rounded-2xl border border-[#4FD1C5]/20 bg-[#0b1220] px-6 py-5">
+            <p className="text-sm leading-6 text-[#94a3b8]">
+              Still need help? Explore the platform from the homepage and
+              keep an eye on upcoming guides and community resources.
+            </p>
+          </div>
+        </section>
+      </main>
 
-        <Footer />
-      </div>
-    </div>
+      <Footer />
+    </PageBackground>
   );
 }
diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx
index 24519d75..b2a13a7b 100644
--- a/frontend/src/app/login/page.tsx
+++ b/frontend/src/app/login/page.tsx
@@ -1,9 +1,10 @@
-"use client"
+"use client";
 import { useState } from "react";
 import type { NextPage } from "next";
 import Head from "next/head";
 import Link from "next/link";
 import { Github } from "lucide-react";
+import PageBackground from "@/component/PageBackground";
 
 const Login: NextPage = () => {
   const [formData, setFormData] = useState({
@@ -31,125 +32,127 @@ const Login: NextPage = () => {
         <title>Login</title>
         <meta name="description" content="Login to your account" />
       </Head>
-      <main className="flex min-h-screen items-center justify-center bg-black px-4">
-        <div className="w-full max-w-md p-6 space-y-8">
-          {/* Progress Indicators */}
-          <div className="flex justify-center space-x-4">
-            <div className="w-16 h-1 bg-purple-600 rounded"></div>
-            <div className="w-16 h-1 bg-purple-600 rounded"></div>
-            <div className="w-16 h-1 bg-gray-600 rounded"></div>
-            <div className="w-16 h-1 bg-gray-600 rounded"></div>
-          </div>
-
-          <div className="text-center">
-            <h1 className="text-2xl font-bold text-white">Login Account</h1>
-            <p className="mt-1 text-gray-400">
-              Entre you date to create your account
-            </p>
-          </div>
-
-          <div className="mt-8 space-y-6">
-            {/* OAuth Buttons */}
-            <div className="grid grid-cols-2 gap-4">
-              <button
-                type="button"
-                aria-label="Continue with Google"
-                className="flex items-center justify-center w-full py-2 px-4 bg-purple-800 text-white rounded-md hover:bg-purple-700 transition"
-              >
-                <img
-                  src="/google-logo.svg"
-                  alt="Google"
-                  className="w-5 h-5 mr-2"
-                />
-                Google
-              </button>
-              <button
-                type="button"
-                aria-label="Continue with GitHub"
-                className="flex items-center justify-center w-full py-2 px-4 bg-purple-800 text-white rounded-md hover:bg-purple-700 transition"
-              >
-                <Github className="w-5 h-5 mr-2" />
-                Git Hub
-              </button>
+      <PageBackground>
+        <main className="flex min-h-screen items-center justify-center px-4">
+          <div className="w-full max-w-md p-6 space-y-8">
+            {/* Progress Indicators */}
+            <div className="flex justify-center space-x-4">
+              <div className="w-16 h-1 bg-purple-600 rounded"></div>
+              <div className="w-16 h-1 bg-purple-600 rounded"></div>
+              <div className="w-16 h-1 bg-gray-600 rounded"></div>
+              <div className="w-16 h-1 bg-gray-600 rounded"></div>
             </div>
 
-            {/* Divider */}
-            <div className="relative">
-              <div className="absolute inset-0 flex items-center">
-                <div className="w-full border-t border-gray-700"></div>
-              </div>
-              <div className="relative flex justify-center text-sm">
-                <span className="px-2 bg-black text-gray-400">or</span>
-              </div>
+            <div className="text-center">
+              <h1 className="text-2xl font-bold text-white">Login Account</h1>
+              <p className="mt-1 text-gray-400">
+                Entre you date to create your account
+              </p>
             </div>
 
-            {/* Login Form */}
-            <form onSubmit={handleSubmit} className="space-y-4">
-              <div>
-                <label
-                  htmlFor="email"
-                  className="block text-sm font-medium text-white mb-1"
+            <div className="mt-8 space-y-6">
+              {/* OAuth Buttons */}
+              <div className="grid grid-cols-2 gap-4">
+                <button
+                  type="button"
+                  aria-label="Continue with Google"
+                  className="flex items-center justify-center w-full py-2 px-4 bg-purple-800 text-white rounded-md hover:bg-purple-700 transition"
+                >
+                  <img
+                    src="/google-logo.svg"
+                    alt="Google"
+                    className="w-5 h-5 mr-2"
+                  />
+                  Google
+                </button>
+                <button
+                  type="button"
+                  aria-label="Continue with GitHub"
+                  className="flex items-center justify-center w-full py-2 px-4 bg-purple-800 text-white rounded-md hover:bg-purple-700 transition"
                 >
-                  Email <span className="text-red-500">*</span>
-                </label>
-                <input
-                  id="email"
-                  name="email"
-                  type="email"
-                  required
-                  placeholder="john@example.com"
-                  autoComplete="email"
-                  className="w-full rounded border border-gray-600 bg-gray-700 p-2 text-white placeholder:text-gray-300"
-                  value={formData.email}
-                  onChange={handleChange}
-                />
+                  <Github className="w-5 h-5 mr-2" />
+                  Git Hub
+                </button>
               </div>
 
-              <div>
-                <label
-                  htmlFor="password"
-                  className="block text-sm font-medium text-white mb-1"
-                >
-                  Password <span className="text-red-500">*</span>
-                </label>
-                <input
-                  id="password"
-                  name="password"
-                  type="password"
-                  required
-                  placeholder="••••••••"
-                  autoComplete="current-password"
-                  className="w-full rounded border border-gray-600 bg-gray-700 p-2 text-white placeholder:text-gray-300"
-                  value={formData.password}
-                  onChange={handleChange}
-                />
-                <p className="mt-1 text-xs text-gray-400">
-                  Must be at least 8 character Long
-                </p>
+              {/* Divider */}
+              <div className="relative">
+                <div className="absolute inset-0 flex items-center">
+                  <div className="w-full border-t border-gray-700"></div>
+                </div>
+                <div className="relative flex justify-center text-sm">
+                  <span className="px-2 bg-transparent text-gray-400">or</span>
+                </div>
               </div>
 
-              <button
-                type="submit"
-                className="w-full py-3 px-4 bg-purple-700 hover:bg-purple-600 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-gray-900 mt-6"
-              >
-                Login
-              </button>
-            </form>
+              {/* Login Form */}
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div>
+                  <label
+                    htmlFor="email"
+                    className="block text-sm font-medium text-white mb-1"
+                  >
+                    Email <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    id="email"
+                    name="email"
+                    type="email"
+                    required
+                    placeholder="john@example.com"
+                    autoComplete="email"
+                    className="w-full rounded border border-gray-600 bg-gray-700/60 p-2 text-white placeholder:text-gray-300"
+                    value={formData.email}
+                    onChange={handleChange}
+                  />
+                </div>
 
-            <div className="text-center mt-4">
-              <p className="text-sm text-gray-400">
-                Already have an Account?{" "}
-                <Link
-                  href="/signup"
-                  className="text-purple-500 hover:text-purple-400"
+                <div>
+                  <label
+                    htmlFor="password"
+                    className="block text-sm font-medium text-white mb-1"
+                  >
+                    Password <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    id="password"
+                    name="password"
+                    type="password"
+                    required
+                    placeholder="••••••••"
+                    autoComplete="current-password"
+                    className="w-full rounded border border-gray-600 bg-gray-700/60 p-2 text-white placeholder:text-gray-300"
+                    value={formData.password}
+                    onChange={handleChange}
+                  />
+                  <p className="mt-1 text-xs text-gray-400">
+                    Must be at least 8 character Long
+                  </p>
+                </div>
+
+                <button
+                  type="submit"
+                  className="w-full py-3 px-4 bg-purple-700 hover:bg-purple-600 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-gray-900 mt-6"
                 >
-                  Sign Up
-                </Link>
-              </p>
+                  Login
+                </button>
+              </form>
+
+              <div className="text-center mt-4">
+                <p className="text-sm text-gray-400">
+                  Already have an Account?{" "}
+                  <Link
+                    href="/signup"
+                    className="text-purple-500 hover:text-purple-400"
+                  >
+                    Sign Up
+                  </Link>
+                </p>
+              </div>
             </div>
           </div>
-        </div>
-      </main>
+        </main>
+      </PageBackground>
     </>
   );
 };
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 7365463f..19bae00c 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -4,15 +4,14 @@ import Head from "next/head";
 import Header from "@/component/Header";
 import Footer from "@/component/Footer";
 import HeroSection from "@/component/Homepage/HeroSection";
-
 import HowItWorksSection from "@/component/Homepage/HowItWorksSection";
-
 import ReputationSection from "@/component/Homepage/ReputationSection";
 import Faq from "@/component/Homepage/Faq";
 import Feature from "@/component/Homepage/Feature";
 import ComparisonSection from "@/component/Homepage/ComparisonSection";
 import TransparentGrid from "@/component/Homepage/Transparent";
 import StatisticsSection from "@/component/Homepage/StatisticsSection";
+import PageBackground from "@/component/PageBackground";
 
 export default function Home() {
   return (
@@ -20,66 +19,18 @@ export default function Home() {
       <Head>
         <title>InsightArena | Decentralized Prediction Market</title>
       </Head>
-      <div className="relative min-h-screen bg-gradient-to-br from-gray-900 via-black to-gray-900 overflow-x-hidden">
-        {/* Global Network Lines Background */}
-        <div className="absolute inset-0 w-full h-full z-0 pointer-events-none">
-          <svg
-            className="w-full h-full opacity-15"
-            viewBox="0 0 1000 1000"
-            preserveAspectRatio="xMidYMid slice"
-          >
-            <defs>
-              <linearGradient
-                id="globalLineGradient"
-                x1="0%"
-                y1="0%"
-                x2="100%"
-                y2="100%"
-              >
-                <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.3" />
-                <stop offset="100%" stopColor="#06b6d4" stopOpacity="0.2" />
-              </linearGradient>
-            </defs>
-            <path
-              d="M100,200 Q300,100 500,200 T900,200"
-              stroke="url(#globalLineGradient)"
-              strokeWidth="2"
-              fill="none"
-            />
-            <path
-              d="M200,400 Q400,300 600,400 T1000,400"
-              stroke="url(#globalLineGradient)"
-              strokeWidth="2"
-              fill="none"
-            />
-            <path
-              d="M50,600 Q250,500 450,600 T850,600"
-              stroke="url(#globalLineGradient)"
-              strokeWidth="2"
-              fill="none"
-            />
-            <path
-              d="M150,800 Q350,700 550,800 T950,800"
-              stroke="url(#globalLineGradient)"
-              strokeWidth="2"
-              fill="none"
-            />
-          </svg>
-        </div>
-
-        <div className="relative z-10">
-          <Header />
-          <HeroSection />
-          <ReputationSection />
-          <Feature />
-          <HowItWorksSection />
-          <ComparisonSection />
-          <TransparentGrid />
-          <StatisticsSection />
-          <Faq />
-          <Footer />
-        </div>
-      </div>
+      <PageBackground>
+        <Header />
+        <HeroSection />
+        <ReputationSection />
+        <Feature />
+        <HowItWorksSection />
+        <ComparisonSection />
+        <TransparentGrid />
+        <StatisticsSection />
+        <Faq />
+        <Footer />
+      </PageBackground>
     </>
   );
 }
diff --git a/frontend/src/app/profilePage/page.tsx b/frontend/src/app/profilePage/page.tsx
index ebaaf1db..abac32f0 100644
--- a/frontend/src/app/profilePage/page.tsx
+++ b/frontend/src/app/profilePage/page.tsx
@@ -5,305 +5,307 @@ import { Button } from "@/component/ui/button"
 import { Card, CardContent } from "@/component/ui/card"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/component/ui/tabs"
 import { ChevronDown, ChevronLeft, ChevronRight, Clock, FileText, Moon, Shield } from "lucide-react"
+import PageBackground from "@/component/PageBackground"
 
 export default function CoursePage() {
   return (
-    <div className="min-h-screen bg-black text-white">
-      {/* Header */}
-      <header className="border-b border-zinc-800 px-4 py-3">
-        <div className="mx-auto flex max-w-7xl items-center justify-between">
-          <Link href="/" className="text-xl font-bold">
-            Stark Academy
-          </Link>
-          <nav className="hidden md:flex items-center space-x-6">
-            <div className="flex items-center">
-              <FileText className="mr-2 h-4 w-4" />
-              <span>Courses</span>
-              <ChevronDown className="ml-1 h-4 w-4" />
-            </div>
-            <div className="flex items-center">
-              <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                  d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-                <path
-                  d="M9 22V12H15V22"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
-              <span>Trading</span>
-            </div>
-            <div className="flex items-center">
-              <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                  d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
-              <span>Airdrops</span>
-            </div>
-            <div className="flex items-center">
-              <Shield className="mr-2 h-4 w-4" />
-              <span>Resources</span>
-            </div>
-          </nav>
-          <div className="flex items-center space-x-4">
-            <Button variant="ghost" size="icon" className="rounded-full">
-              <Moon className="h-5 w-5" />
-              <span className="sr-only">Toggle theme</span>
-            </Button>
-            <div className="h-8 w-8 rounded-full bg-purple-600 flex items-center justify-center">
-              <span className="text-sm font-medium">PH</span>
-            </div>
-            <Button variant="ghost" size="icon" className="md:hidden">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className="h-6 w-6"
-              >
-                <line x1="4" x2="20" y1="12" y2="12" />
-                <line x1="4" x2="20" y1="6" y2="6" />
-                <line x1="4" x2="20" y1="18" y2="18" />
-              </svg>
-            </Button>
-          </div>
-        </div>
-      </header>
-
-      {/* Main Content */}
-      <main className="mx-auto max-w-7xl px-4 py-8">
-        <div className="grid grid-cols-1 gap-8 lg:grid-cols-12">
-          {/* Left Sidebar */}
-          <div className="hidden lg:col-span-2 lg:block">
-            <div className="flex flex-col items-center">
-              <div className="relative h-24 w-24 overflow-hidden rounded-full border-2 border-purple-600">
-                <Image
-                  src="/placeholder.svg?height=96&width=96"
-                  alt="User avatar"
-                  width={96}
-                  height={96}
-                  className="object-cover"
-                />
+    <PageBackground>
+      <div className="text-white">
+        {/* Header */}
+        <header className="border-b border-zinc-800 px-4 py-3">
+          <div className="mx-auto flex max-w-7xl items-center justify-between">
+            <Link href="/" className="text-xl font-bold">
+              Stark Academy
+            </Link>
+            <nav className="hidden md:flex items-center space-x-6">
+              <div className="flex items-center">
+                <FileText className="mr-2 h-4 w-4" />
+                <span>Courses</span>
+                <ChevronDown className="ml-1 h-4 w-4" />
               </div>
-              <Link
-                href="/profile"
-                className="mt-4 w-full border-purple-800 bg-zinc-900 text-white hover:bg-zinc-800 flex items-center justify-center rounded-md border px-4 py-2 transition"
-              >
+              <div className="flex items-center">
                 <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path
-                    d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z"
+                    d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z"
                     stroke="currentColor"
                     strokeWidth="2"
                     strokeLinecap="round"
                     strokeLinejoin="round"
                   />
                   <path
-                    d="M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M16 3.13C16.8604 3.35031 17.623 3.85071 18.1676 4.55232C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89318 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88"
+                    d="M9 22V12H15V22"
                     stroke="currentColor"
                     strokeWidth="2"
                     strokeLinecap="round"
                     strokeLinejoin="round"
                   />
                 </svg>
-                View Profile
-              </Link>
-              <Button
-                variant="outline"
-                className="mt-2 w-full border-purple-800 bg-zinc-900 text-white hover:bg-zinc-800"
-              >
+                <span>Trading</span>
+              </div>
+              <div className="flex items-center">
                 <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path
-                    d="M19.5 12.5719L12 19.9999L4.5 12.5719C4.0053 12.0772 3.61534 11.4879 3.35462 10.8394C3.0939 10.191 2.96933 9.4964 2.98768 8.79862C3.00603 8.10083 3.16682 7.41407 3.46133 6.78053C3.75584 6.14699 4.17766 5.58359 4.7 5.12186C5.22235 4.66013 5.83431 4.30784 6.49709 4.08882C7.15987 3.8698 7.85908 3.78967 8.55455 3.85321C9.25002 3.91674 9.92089 4.12239 10.5222 4.45929C11.1235 4.79618 11.6428 5.25526 12.04 5.80586C12.4371 5.25526 12.9565 4.79618 13.5578 4.45929C14.1591 4.12239 14.83 3.91674 15.5254 3.85321C16.2209 3.78967 16.9201 3.8698 17.5829 4.08882C18.2457 4.30784 18.8576 4.66013 19.38 5.12186C19.9023 5.58359 20.3242 6.14699 20.6187 6.78053C20.9132 7.41407 21.074 8.10083 21.0923 8.79862C21.1107 9.4964 20.9861 10.191 20.7254 10.8394C20.4647 11.4879 20.0747 12.0772 19.58 12.5719H19.5Z"
+                    d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"
                     stroke="currentColor"
                     strokeWidth="2"
                     strokeLinecap="round"
                     strokeLinejoin="round"
                   />
                 </svg>
-                NFT Badges
+                <span>Airdrops</span>
+              </div>
+              <div className="flex items-center">
+                <Shield className="mr-2 h-4 w-4" />
+                <span>Resources</span>
+              </div>
+            </nav>
+            <div className="flex items-center space-x-4">
+              <Button variant="ghost" size="icon" className="rounded-full">
+                <Moon className="h-5 w-5" />
+                <span className="sr-only">Toggle theme</span>
+              </Button>
+              <div className="h-8 w-8 rounded-full bg-purple-600 flex items-center justify-center">
+                <span className="text-sm font-medium">PH</span>
+              </div>
+              <Button variant="ghost" size="icon" className="md:hidden">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="h-6 w-6"
+                >
+                  <line x1="4" x2="20" y1="12" y2="12" />
+                  <line x1="4" x2="20" y1="6" y2="6" />
+                  <line x1="4" x2="20" y1="18" y2="18" />
+                </svg>
               </Button>
             </div>
           </div>
+        </header>
 
-          {/* Main Content Area */}
-          <div className="lg:col-span-7">
-            <div className="mb-6">
-              <Button variant="ghost" className="mb-4 flex items-center text-zinc-400 hover:text-white">
-                <ChevronLeft className="mr-1 h-4 w-4" />
-                Back to courses
-              </Button>
-              <h1 className="mb-4 text-3xl font-bold">What is crypto?</h1>
-              <p className="text-zinc-400">
-                Learn The Core Concepts Of Blockchain Technology, Including Distributed Ledgers, Consensus Mechanisms,
-                And Cryptography.
-              </p>
-              <div className="mt-4 flex flex-wrap items-center gap-4">
-                <Badge variant="outline" className="rounded-full bg-zinc-900 text-zinc-400">
-                  Beginner
-                </Badge>
-                <div className="flex items-center text-zinc-400">
-                  <Clock className="mr-1 h-4 w-4" />
-                  <span>30min</span>
-                </div>
-                <div className="flex items-center text-zinc-400">
-                  <FileText className="mr-1 h-4 w-4" />
-                  <span>4 Lessons</span>
+        {/* Main Content */}
+        <main className="mx-auto max-w-7xl px-4 py-8">
+          <div className="grid grid-cols-1 gap-8 lg:grid-cols-12">
+            {/* Left Sidebar */}
+            <div className="hidden lg:col-span-2 lg:block">
+              <div className="flex flex-col items-center">
+                <div className="relative h-24 w-24 overflow-hidden rounded-full border-2 border-purple-600">
+                  <Image
+                    src="/placeholder.svg?height=96&width=96"
+                    alt="User avatar"
+                    width={96}
+                    height={96}
+                    className="object-cover"
+                  />
                 </div>
+                <Link
+                  href="/profile"
+                  className="mt-4 w-full border-purple-800 bg-zinc-900 text-white hover:bg-zinc-800 flex items-center justify-center rounded-md border px-4 py-2 transition"
+                >
+                  <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                    <path
+                      d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                    <path
+                      d="M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                    <path
+                      d="M16 3.13C16.8604 3.35031 17.623 3.85071 18.1676 4.55232C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89318 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                  View Profile
+                </Link>
+                <Button
+                  variant="outline"
+                  className="mt-2 w-full border-purple-800 bg-zinc-900 text-white hover:bg-zinc-800"
+                >
+                  <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M19.5 12.5719L12 19.9999L4.5 12.5719C4.0053 12.0772 3.61534 11.4879 3.35462 10.8394C3.0939 10.191 2.96933 9.4964 2.98768 8.79862C3.00603 8.10083 3.16682 7.41407 3.46133 6.78053C3.75584 6.14699 4.17766 5.58359 4.7 5.12186C5.22235 4.66013 5.83431 4.30784 6.49709 4.08882C7.15987 3.8698 7.85908 3.78967 8.55455 3.85321C9.25002 3.91674 9.92089 4.12239 10.5222 4.45929C11.1235 4.79618 11.6428 5.25526 12.04 5.80586C12.4371 5.25526 12.9565 4.79618 13.5578 4.45929C14.1591 4.12239 14.83 3.91674 15.5254 3.85321C16.2209 3.78967 16.9201 3.8698 17.5829 4.08882C18.2457 4.30784 18.8576 4.66013 19.38 5.12186C19.9023 5.58359 20.3242 6.14699 20.6187 6.78053C20.9132 7.41407 21.074 8.10083 21.0923 8.79862C21.1107 9.4964 20.9861 10.191 20.7254 10.8394C20.4647 11.4879 20.0747 12.0772 19.58 12.5719H19.5Z"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                  NFT Badges
+                </Button>
               </div>
             </div>
 
-            <Tabs defaultValue="lesson" className="mb-8">
-              <TabsList className="bg-zinc-900">
-                <TabsTrigger value="lesson" className="data-[state=active]:bg-purple-900">
-                  Lesson Content
-                </TabsTrigger>
-                <TabsTrigger value="resources" className="data-[state=active]:bg-purple-900">
-                  Resources
-                </TabsTrigger>
-              </TabsList>
-              <TabsContent value="lesson" className="mt-6">
-                <div className="space-y-6">
-                  <div>
-                    <h2 className="mb-2 text-xl font-semibold">Introduction to Crypto</h2>
-                    <p className="text-zinc-400">
-                      Understanding The Basics Of Blockchain Technology And Its Potential Applications.
-                    </p>
+            {/* Main Content Area */}
+            <div className="lg:col-span-7">
+              <div className="mb-6">
+                <Button variant="ghost" className="mb-4 flex items-center text-zinc-400 hover:text-white">
+                  <ChevronLeft className="mr-1 h-4 w-4" />
+                  Back to courses
+                </Button>
+                <h1 className="mb-4 text-3xl font-bold">What is crypto?</h1>
+                <p className="text-zinc-400">
+                  Learn The Core Concepts Of Blockchain Technology, Including Distributed Ledgers, Consensus Mechanisms,
+                  And Cryptography.
+                </p>
+                <div className="mt-4 flex flex-wrap items-center gap-4">
+                  <Badge variant="outline" className="rounded-full bg-zinc-900 text-zinc-400">
+                    Beginner
+                  </Badge>
+                  <div className="flex items-center text-zinc-400">
+                    <Clock className="mr-1 h-4 w-4" />
+                    <span>30min</span>
                   </div>
-                  <div>
-                    <p className="text-zinc-300">
-                      Cryptocurrency Is A Digital Form Of Money That Uses Blockchain Technology And Encryption To Secure
-                      Transactions. Bitcoin, Ethereum, And Starknet Are Popular Examples. Unlike Traditional Currencies,
-                      It's Not Controlled By A Central Authority.
-                    </p>
+                  <div className="flex items-center text-zinc-400">
+                    <FileText className="mr-1 h-4 w-4" />
+                    <span>4 Lessons</span>
                   </div>
-                  <div className="flex justify-between pt-4">
-                    <Button variant="outline" className="border-zinc-800 bg-zinc-900 hover:bg-zinc-800">
-                      Previous Lesson
-                    </Button>
-                    <Button className="bg-purple-600 hover:bg-purple-700">
-                      Next Lesson
-                      <ChevronRight className="ml-1 h-4 w-4" />
-                    </Button>
-                  </div>
-                </div>
-              </TabsContent>
-              <TabsContent value="resources" className="mt-6">
-                <div className="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
-                  <h3 className="mb-2 font-medium">Additional Resources</h3>
-                  <ul className="list-inside list-disc space-y-2 text-zinc-400">
-                    <li>Blockchain Technology Whitepaper</li>
-                    <li>Cryptocurrency Market Analysis</li>
-                    <li>Smart Contract Development Guide</li>
-                  </ul>
                 </div>
-              </TabsContent>
-            </Tabs>
+              </div>
 
-            <Card className="border-zinc-800 bg-zinc-900">
-              <CardContent className="p-6">
-                <div className="flex flex-col items-center">
-                  <Badge className="mb-2 bg-zinc-800 px-2 py-1 text-xs text-zinc-400">1</Badge>
-                  <h3 className="mb-4 text-center text-xl font-bold">NFT BADGE</h3>
-                  <div className="mb-4 h-24 w-24 overflow-hidden rounded-full border-4 border-zinc-700">
-                    <div className="h-full w-full bg-gradient-to-br from-blue-500 to-purple-600 p-4">
-                      <svg
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                        className="h-full w-full text-white"
-                      >
-                        <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" />
-                        <path
-                          d="M8 12L11 15L16 10"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                      </svg>
+              <Tabs defaultValue="lesson" className="mb-8">
+                <TabsList className="bg-zinc-900">
+                  <TabsTrigger value="lesson" className="data-[state=active]:bg-purple-900">
+                    Lesson Content
+                  </TabsTrigger>
+                  <TabsTrigger value="resources" className="data-[state=active]:bg-purple-900">
+                    Resources
+                  </TabsTrigger>
+                </TabsList>
+                <TabsContent value="lesson" className="mt-6">
+                  <div className="space-y-6">
+                    <div>
+                      <h2 className="mb-2 text-xl font-semibold">Introduction to Crypto</h2>
+                      <p className="text-zinc-400">
+                        Understanding The Basics Of Blockchain Technology And Its Potential Applications.
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-zinc-300">
+                        Cryptocurrency Is A Digital Form Of Money That Uses Blockchain Technology And Encryption To Secure
+                        Transactions. Bitcoin, Ethereum, And Starknet Are Popular Examples. Unlike Traditional Currencies,
+                        It's Not Controlled By A Central Authority.
+                      </p>
+                    </div>
+                    <div className="flex justify-between pt-4">
+                      <Button variant="outline" className="border-zinc-800 bg-zinc-900 hover:bg-zinc-800">
+                        Previous Lesson
+                      </Button>
+                      <Button className="bg-purple-600 hover:bg-purple-700">
+                        Next Lesson
+                        <ChevronRight className="ml-1 h-4 w-4" />
+                      </Button>
                     </div>
                   </div>
-                  <Button className="mt-2 bg-purple-600 hover:bg-purple-700">Claim Your Badge</Button>
-                </div>
-              </CardContent>
-            </Card>
+                </TabsContent>
+                <TabsContent value="resources" className="mt-6">
+                  <div className="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
+                    <h3 className="mb-2 font-medium">Additional Resources</h3>
+                    <ul className="list-inside list-disc space-y-2 text-zinc-400">
+                      <li>Blockchain Technology Whitepaper</li>
+                      <li>Cryptocurrency Market Analysis</li>
+                      <li>Smart Contract Development Guide</li>
+                    </ul>
+                  </div>
+                </TabsContent>
+              </Tabs>
 
-            <div className="mt-8 text-center text-sm text-zinc-500">
-              <p>It takes you to this point</p>
-            </div>
-          </div>
+              <Card className="border-zinc-800 bg-zinc-900">
+                <CardContent className="p-6">
+                  <div className="flex flex-col items-center">
+                    <Badge className="mb-2 bg-zinc-800 px-2 py-1 text-xs text-zinc-400">1</Badge>
+                    <h3 className="mb-4 text-center text-xl font-bold">NFT BADGE</h3>
+                    <div className="mb-4 h-24 w-24 overflow-hidden rounded-full border-4 border-zinc-700">
+                      <div className="h-full w-full bg-gradient-to-br from-blue-500 to-purple-600 p-4">
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="h-full w-full text-white"
+                        >
+                          <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" />
+                          <path
+                            d="M8 12L11 15L16 10"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <Button className="mt-2 bg-purple-600 hover:bg-purple-700">Claim Your Badge</Button>
+                  </div>
+                </CardContent>
+              </Card>
 
-          {/* Right Sidebar */}
-          <div className="lg:col-span-3">
-            <div className="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
-              <div className="mb-4 flex items-center justify-between">
-                <h3 className="text-lg font-medium">Course Progress</h3>
-                <ChevronDown className="h-4 w-4 text-zinc-400" />
+              <div className="mt-8 text-center text-sm text-zinc-500">
+                <p>It takes you to this point</p>
               </div>
-              <div className="mb-2 flex items-center justify-between">
-                <span className="text-sm text-zinc-400">Over All Progress</span>
-                <div className="flex h-16 w-16 items-center justify-center rounded-full border-4 border-zinc-800">
-                  <span className="text-lg font-bold">0%</span>
+            </div>
+
+            {/* Right Sidebar */}
+            <div className="lg:col-span-3">
+              <div className="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
+                <div className="mb-4 flex items-center justify-between">
+                  <h3 className="text-lg font-medium">Course Progress</h3>
+                  <ChevronDown className="h-4 w-4 text-zinc-400" />
+                </div>
+                <div className="mb-2 flex items-center justify-between">
+                  <span className="text-sm text-zinc-400">Over All Progress</span>
+                  <div className="flex h-16 w-16 items-center justify-center rounded-full border-4 border-zinc-800">
+                    <span className="text-lg font-bold">0%</span>
+                  </div>
                 </div>
-              </div>
-              {/* <Progress value={0} className="h-1 bg-zinc-800" indicatorClassName="bg-purple-600" /> */}
 
-              <div className="mt-8">
-                <h3 className="mb-4 text-lg font-medium">Course Content</h3>
-                <div className="space-y-4">
-                  {[1, 2, 3, 4].map((index) => (
-                    <div
-                      key={index}
-                      className="flex gap-3 rounded-md border border-zinc-800 bg-zinc-950 p-3 hover:bg-zinc-900"
-                    >
-                      <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-purple-600 text-xs font-medium">
-                        {index}
-                      </div>
-                      <div>
-                        <h4 className="font-medium text-purple-400">Introduction to Crypto</h4>
-                        <p className="text-xs text-zinc-400">
-                          Understanding The Basics Of Blockchain Technology And Its Potential Applications.
-                        </p>
+                <div className="mt-8">
+                  <h3 className="mb-4 text-lg font-medium">Course Content</h3>
+                  <div className="space-y-4">
+                    {[1, 2, 3, 4].map((index) => (
+                      <div
+                        key={index}
+                        className="flex gap-3 rounded-md border border-zinc-800 bg-zinc-950 p-3 hover:bg-zinc-900"
+                      >
+                        <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-purple-600 text-xs font-medium">
+                          {index}
+                        </div>
+                        <div>
+                          <h4 className="font-medium text-purple-400">Introduction to Crypto</h4>
+                          <p className="text-xs text-zinc-400">
+                            Understanding The Basics Of Blockchain Technology And Its Potential Applications.
+                          </p>
+                        </div>
                       </div>
-                    </div>
-                  ))}
+                    ))}
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-      </main>
-    </div>
+        </main>
+      </div>
+    </PageBackground>
   )
 }
diff --git a/frontend/src/app/signin/page.tsx b/frontend/src/app/signin/page.tsx
index 4e680ae5..1c179de2 100644
--- a/frontend/src/app/signin/page.tsx
+++ b/frontend/src/app/signin/page.tsx
@@ -1,17 +1,18 @@
-"use client"
-import { useState } from 'react';
-import type { NextPage } from 'next';
-import Head from 'next/head';
-import Link from 'next/link';
-import Image from 'next/image';
-import { Github } from 'lucide-react';
+"use client";
+import { useState } from "react";
+import type { NextPage } from "next";
+import Head from "next/head";
+import Link from "next/link";
+import Image from "next/image";
+import { Github } from "lucide-react";
+import PageBackground from "@/component/PageBackground";
 
 const SignUp: NextPage = () => {
   const [formData, setFormData] = useState({
-    firstName: '',
-    lastName: '',
-    email: '',
-    password: '',
+    firstName: "",
+    lastName: "",
+    email: "",
+    password: "",
   });
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -25,7 +26,7 @@ const SignUp: NextPage = () => {
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     // Handle form submission logic here
-    console.log('Form submitted:', formData);
+    console.log("Form submitted:", formData);
   };
 
   return (
@@ -34,135 +35,137 @@ const SignUp: NextPage = () => {
         <title>Sign Up</title>
         <meta name="description" content="Create your account" />
       </Head>
-      <main className="flex min-h-screen items-center justify-center bg-black px-4">
-        <div className="w-full max-w-md p-6 space-y-8">
-          <div className="text-center">
-            <h1 className="text-2xl font-bold text-white">Sign Up Account</h1>
-            <p className="mt-1 text-gray-400">Entre you date to create your account</p>
-          </div>
-
-          <div className="mt-8 space-y-6">
-            {/* OAuth Buttons */}
-            <div className="grid grid-cols-2 gap-4">
-              <button
-                type="button"
-                aria-label="Continue with Google"
-                className="flex items-center justify-center w-full py-2 px-4 bg-purple-800 text-white rounded-md hover:bg-purple-700 transition"
-              >
-                <Image src="/google-logo.svg" alt="Google" width={20} height={20} className="mr-2" />
-                Google
-              </button>
-              <button
-                type="button"
-                aria-label="Continue with GitHub"
-                className="flex items-center justify-center w-full py-2 px-4 bg-purple-800 text-white rounded-md hover:bg-purple-700 transition"
-              >
-                <Github className="w-5 h-5 mr-2" />
-                GitHub
-              </button>
+      <PageBackground>
+        <main className="flex min-h-screen items-center justify-center px-4">
+          <div className="w-full max-w-md p-6 space-y-8">
+            <div className="text-center">
+              <h1 className="text-2xl font-bold text-white">Sign Up Account</h1>
+              <p className="mt-1 text-gray-400">Entre you date to create your account</p>
             </div>
 
-            {/* Divider */}
-            <div className="relative">
-              <div className="absolute inset-0 flex items-center">
-                <div className="w-full border-t border-gray-700"></div>
+            <div className="mt-8 space-y-6">
+              {/* OAuth Buttons */}
+              <div className="grid grid-cols-2 gap-4">
+                <button
+                  type="button"
+                  aria-label="Continue with Google"
+                  className="flex items-center justify-center w-full py-2 px-4 bg-purple-800 text-white rounded-md hover:bg-purple-700 transition"
+                >
+                  <Image src="/google-logo.svg" alt="Google" width={20} height={20} className="mr-2" />
+                  Google
+                </button>
+                <button
+                  type="button"
+                  aria-label="Continue with GitHub"
+                  className="flex items-center justify-center w-full py-2 px-4 bg-purple-800 text-white rounded-md hover:bg-purple-700 transition"
+                >
+                  <Github className="w-5 h-5 mr-2" />
+                  GitHub
+                </button>
               </div>
-              <div className="relative flex justify-center text-sm">
-                <span className="px-2 bg-black text-gray-400">or</span>
+
+              {/* Divider */}
+              <div className="relative">
+                <div className="absolute inset-0 flex items-center">
+                  <div className="w-full border-t border-gray-700"></div>
+                </div>
+                <div className="relative flex justify-center text-sm">
+                  <span className="px-2 bg-transparent text-gray-400">or</span>
+                </div>
               </div>
-            </div>
 
-            {/* Sign Up Form */}
-            <form onSubmit={handleSubmit} className="space-y-4">
-              <div className="grid grid-cols-2 gap-4">
+              {/* Sign Up Form */}
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label htmlFor="firstName" className="block text-sm font-medium text-white mb-1">
+                      First Name <span className="text-red-500">*</span>
+                    </label>
+                    <input
+                      id="firstName"
+                      name="firstName"
+                      type="text"
+                      required
+                      placeholder="Ex: John"
+                      autoComplete="given-name"
+                      className="w-full rounded border border-gray-600 bg-gray-700/60 p-2 text-white placeholder:text-gray-300"
+                      value={formData.firstName}
+                      onChange={handleChange}
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="lastName" className="block text-sm font-medium text-white mb-1">
+                      Last Name <span className="text-red-500">*</span>
+                    </label>
+                    <input
+                      id="lastName"
+                      name="lastName"
+                      type="text"
+                      required
+                      placeholder="Ex: John"
+                      autoComplete="family-name"
+                      className="w-full rounded border border-gray-600 bg-gray-700/60 p-2 text-white placeholder:text-gray-300"
+                      value={formData.lastName}
+                      onChange={handleChange}
+                    />
+                  </div>
+                </div>
+
                 <div>
-                  <label htmlFor="firstName" className="block text-sm font-medium text-white mb-1">
-                    First Name <span className="text-red-500">*</span>
+                  <label htmlFor="email" className="block text-sm font-medium text-white mb-1">
+                    Email <span className="text-red-500">*</span>
                   </label>
                   <input
-                    id="firstName"
-                    name="firstName"
-                    type="text"
+                    id="email"
+                    name="email"
+                    type="email"
                     required
-                    placeholder="Ex: John"
-                    autoComplete="given-name"
-                    className="w-full rounded border border-gray-600 bg-gray-700 p-2 text-white placeholder:text-gray-300"
-                    value={formData.firstName}
+                    placeholder="john@example.com"
+                    autoComplete="email"
+                    className="w-full rounded border border-gray-600 bg-gray-700/60 p-2 text-white placeholder:text-gray-300"
+                    value={formData.email}
                     onChange={handleChange}
                   />
                 </div>
+
                 <div>
-                  <label htmlFor="lastName" className="block text-sm font-medium text-white mb-1">
-                    Last Name <span className="text-red-500">*</span>
+                  <label htmlFor="password" className="block text-sm font-medium text-white mb-1">
+                    Password <span className="text-red-500">*</span>
                   </label>
                   <input
-                    id="lastName"
-                    name="lastName"
-                    type="text"
+                    id="password"
+                    name="password"
+                    type="password"
                     required
-                    placeholder="Ex: John"
-                    autoComplete="family-name"
-                    className="w-full rounded border border-gray-600 bg-gray-700 p-2 text-white placeholder:text-gray-300"
-                    value={formData.lastName}
+                    placeholder="••••••••"
+                    autoComplete="new-password"
+                    className="w-full rounded border border-gray-600 bg-gray-700/60 p-2 text-white placeholder:text-gray-300"
+                    value={formData.password}
                     onChange={handleChange}
                   />
+                  <p className="mt-1 text-xs text-gray-400">Must be at least 8 character Long</p>
                 </div>
-              </div>
 
-              <div>
-                <label htmlFor="email" className="block text-sm font-medium text-white mb-1">
-                  Email <span className="text-red-500">*</span>
-                </label>
-                <input
-                  id="email"
-                  name="email"
-                  type="email"
-                  required
-                  placeholder="john@example.com"
-                  autoComplete="email"
-                  className="w-full rounded border border-gray-600 bg-gray-700 p-2 text-white placeholder:text-gray-300"
-                  value={formData.email}
-                  onChange={handleChange}
-                />
-              </div>
+                <button
+                  type="submit"
+                  className="w-full py-3 px-4 bg-purple-700 hover:bg-purple-600 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-gray-900 mt-6"
+                >
+                  Sign Up
+                </button>
+              </form>
 
-              <div>
-                <label htmlFor="password" className="block text-sm font-medium text-white mb-1">
-                  Password <span className="text-red-500">*</span>
-                </label>
-                <input
-                  id="password"
-                  name="password"
-                  type="password"
-                  required
-                  placeholder="••••••••"
-                  autoComplete="new-password"
-                  className="w-full rounded border border-gray-600 bg-gray-700 p-2 text-white placeholder:text-gray-300"
-                  value={formData.password}
-                  onChange={handleChange}
-                />
-                <p className="mt-1 text-xs text-gray-400">Must be at least 8 character Long</p>
+              <div className="text-center mt-4">
+                <p className="text-sm text-gray-400">
+                  Already have an Account?{" "}
+                  <Link href="/login" className="text-purple-500 hover:text-purple-400">
+                    Login
+                  </Link>
+                </p>
               </div>
-
-              <button
-                type="submit"
-                className="w-full py-3 px-4 bg-purple-700 hover:bg-purple-600 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-gray-900 mt-6"
-              >
-                Sign Up
-              </button>
-            </form>
-
-            <div className="text-center mt-4">
-              <p className="text-sm text-gray-400">
-                Already have an Account?{' '}
-                <Link href="/login" className="text-purple-500 hover:text-purple-400">
-                  Login
-                </Link>
-              </p>
             </div>
           </div>
-        </div>
-      </main>
+        </main>
+      </PageBackground>
     </>
   );
 };
diff --git a/frontend/src/component/PageBackground.tsx b/frontend/src/component/PageBackground.tsx
index 09a4514f..6b97b07d 100644
--- a/frontend/src/component/PageBackground.tsx
+++ b/frontend/src/component/PageBackground.tsx
@@ -8,51 +8,55 @@ type PageBackgroundProps = {
 
 export default function PageBackground({ children }: PageBackgroundProps) {
   return (
-    <div className="absolute inset-0 w-full h-full z-0 pointer-events-none">
-      <div className="absolute inset-0 bg-gradient-to-br from-gray-900 via-black to-gray-900" />
-      <svg
-        className="absolute inset-0 w-full h-full opacity-15"
-        viewBox="0 0 1000 1000"
-        preserveAspectRatio="xMidYMid slice"
-      >
-        <defs>
-          <linearGradient
-            id="pageBackgroundGradient"
-            x1="0%"
-            y1="0%"
-            x2="100%"
-            y2="100%"
-          >
-            <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.3" />
-            <stop offset="100%" stopColor="#06b6d4" stopOpacity="0.2" />
-          </linearGradient>
-        </defs>
-        <path
-          d="M100,200 Q300,100 500,200 T900,200"
-          stroke="url(#pageBackgroundGradient)"
-          strokeWidth="2"
-          fill="none"
-        />
-        <path
-          d="M200,400 Q400,300 600,400 T1000,400"
-          stroke="url(#pageBackgroundGradient)"
-          strokeWidth="2"
-          fill="none"
-        />
-        <path
-          d="M50,600 Q250,500 450,600 T850,600"
-          stroke="url(#pageBackgroundGradient)"
-          strokeWidth="2"
-          fill="none"
-        />
-        <path
-          d="M150,800 Q350,700 550,800 T950,800"
-          stroke="url(#pageBackgroundGradient)"
-          strokeWidth="2"
-          fill="none"
-        />
-      </svg>
-      {children}
+    <div className="relative min-h-screen bg-gradient-to-br from-gray-900 via-black to-gray-900 overflow-x-hidden">
+      {/* Global Network Lines Background */}
+      <div className="absolute inset-0 w-full h-full z-0 pointer-events-none">
+        <svg
+          className="w-full h-full opacity-15"
+          viewBox="0 0 1000 1000"
+          preserveAspectRatio="xMidYMid slice"
+        >
+          <defs>
+            <linearGradient
+              id="globalLineGradient"
+              x1="0%"
+              y1="0%"
+              x2="100%"
+              y2="100%"
+            >
+              <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.3" />
+              <stop offset="100%" stopColor="#06b6d4" stopOpacity="0.2" />
+            </linearGradient>
+          </defs>
+          <path
+            d="M100,200 Q300,100 500,200 T900,200"
+            stroke="url(#globalLineGradient)"
+            strokeWidth="2"
+            fill="none"
+          />
+          <path
+            d="M200,400 Q400,300 600,400 T1000,400"
+            stroke="url(#globalLineGradient)"
+            strokeWidth="2"
+            fill="none"
+          />
+          <path
+            d="M50,600 Q250,500 450,600 T850,600"
+            stroke="url(#globalLineGradient)"
+            strokeWidth="2"
+            fill="none"
+          />
+          <path
+            d="M150,800 Q350,700 550,800 T950,800"
+            stroke="url(#globalLineGradient)"
+            strokeWidth="2"
+            fill="none"
+          />
+        </svg>
+      </div>
+      <div className="relative z-10">
+        {children}
+      </div>
     </div>
   );
 }