diff --git a/frontend/public/auth-bg.png b/frontend/public/auth-bg.png
new file mode 100644
index 0000000..48750db
Binary files /dev/null and b/frontend/public/auth-bg.png differ
diff --git a/frontend/public/owner.jpg b/frontend/public/owner.jpg
new file mode 100644
index 0000000..75e08cd
Binary files /dev/null and b/frontend/public/owner.jpg differ
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 396efb3..b069021 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -9,6 +9,7 @@ import Sprite from "./pages/Sprite";
 import ShakeBeer from "./pages/ShakeBeer";
 import Admin from "./pages/Admin";
 import AuthForm from "./pages/AuthForm";
+import OurStory from "./pages/OurStory";
 
 function App() {
   return (
@@ -22,6 +23,7 @@ function App() {
         <Route path="/ShakeBeer" element={<ShakeBeer />} />
         <Route path="/Admin" element={<Admin />} />
         <Route path="/auth" element={<AuthForm />} />
+        <Route path="/ourstory" element={<OurStory />} />
       </Routes>
       <Footer />
     </Router>
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index dfe771f..a555f7a 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -18,10 +18,11 @@ const Navbar = () => {
           LOGO
         </h1>
 
+
         {/* Desktop Menu */}
         <ul className="hidden md:flex space-x-6 text-lg font-semibold">
           <li className="hover:text-orange-500 cursor-pointer" onClick={() => navigate("/")}>HOME</li>
-          <li className="hover:text-orange-500 cursor-pointer" onClick={() => navigate("/about")}>ABOUT</li>
+          <li className="hover:text-orange-500 cursor-pointer" onClick={() => navigate("/ourstory")}>ABOUT</li>
           <li className="hover:text-orange-500 cursor-pointer" onClick={() => navigate("/contact")}>CONTACT</li>
         </ul>
 
@@ -51,7 +52,7 @@ const Navbar = () => {
               </button>
               <button
                 className="block px-4 py-2 w-full text-left hover:bg-gray-200"
-                onClick={() => navigate("/register")}
+                onClick={() => navigate("/auth")}
               >
                 Register
               </button>
diff --git a/frontend/src/components/about.jsx b/frontend/src/components/about.jsx
index a58fa6e..c4b8947 100644
--- a/frontend/src/components/about.jsx
+++ b/frontend/src/components/about.jsx
@@ -3,30 +3,30 @@ import React from "react";
 const About = () => {
   return (
     <section className="flex flex-col md:flex-row items-center justify-center    bg-black">
-      
-    
+
+
       <div className="w-full md:w-1/2">
-        <img 
-          src="/background.png" 
-          alt="About Us" 
+        <img
+          src="/background.png"
+          alt="About Us"
           className="w-full h-auto rounded-lg shadow-lg"
         />
       </div>
 
-    
+
       <div className="w-full  pr-6 mr-6 md:w-1/2 md:pl-12 mt-6 md:mt-0 text-center md:text-left">
-        <h2 className="text-3xl md:text-4xl font-bold text-white mb-4 text-center">ABOUT US</h2>
+        {/* <h2 className="text-3xl md:text-4xl font-bold text-white mb-4 text-center">ABOUT US</h2> */}
         <p className="text-white text-lg  p-1 leading-relaxed text-center">
-          We are a passionate team dedicated to delivering the best products and services. 
-          Our mission is to create meaningful experiences for our customers through 
+          We are a passionate team dedicated to delivering the best products and services.
+          Our mission is to create meaningful experiences for our customers through
           innovation, quality, and commitment.
         </p>
         <p className="text-white text-lg mt-4 text-center">
-          Established in 2020, we have been serving our clients with utmost dedication. 
+          Established in 2020, we have been serving our clients with utmost dedication.
           Join us in our journey and be a part of something amazing!
         </p>
       </div>
-      
+
     </section>
   );
 };
diff --git a/frontend/src/pages/AuthForm.jsx b/frontend/src/pages/AuthForm.jsx
index 84aadfd..2a18734 100644
--- a/frontend/src/pages/AuthForm.jsx
+++ b/frontend/src/pages/AuthForm.jsx
@@ -3,50 +3,134 @@ import { FaUser, FaLock, FaEnvelope } from "react-icons/fa";
 
 const AuthForm = () => {
     const [isSignIn, setIsSignIn] = useState(true);
+    const [formData, setFormData] = useState({
+        firstName: "",
+        lastName: "",
+        email: "",
+        username: "",
+        password: "",
+    });
+
+    const [errors, setErrors] = useState({});
+
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData({ ...formData, [name]: value });
+        setErrors({ ...errors, [name]: "" }); // clear error on change
+    };
+
+    const validateForm = () => {
+        const newErrors = {};
+        if (!formData.username.trim()) newErrors.username = "Username is required";
+        if (!formData.password.trim()) newErrors.password = "Password is required";
+
+        if (!isSignIn) {
+            if (!formData.firstName.trim()) newErrors.firstName = "First name is required";
+            if (!formData.lastName.trim()) newErrors.lastName = "Last name is required";
+            if (!formData.email.trim()) {
+                newErrors.email = "Email is required";
+            } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+                newErrors.email = "Invalid email format";
+            }
+        }
+
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (validateForm()) {
+            console.log("Form submitted:", formData);
+            // Proceed with submission or API call here
+        }
+    };
 
     return (
         <div
             className="min-h-screen bg-cover bg-center flex items-center justify-center"
-            style={{ backgroundImage: "url('/bg.jpg')" }}
+            style={{ backgroundImage: "url('/auth-bg.png')" }}
         >
-            <div className="bg-[#2c0f0f]/90 p-8 rounded-2xl w-full max-w-md text-white shadow-2xl backdrop-blur transition-all duration-300 h-[540px] flex flex-col">
+            <div className="bg-[#2c0f0f]/90 p-0 rounded-2xl w-full max-w-md text-white shadow-2xl backdrop-blur transition-all duration-300 h-[540px] flex flex-col">
                 {/* Tabs */}
-                <div className="flex justify-between border-b border-orange-500 mb-6">
+                <div className="flex justify-between bg-[#1e0a0a] rounded-t-2xl">
                     <button
-                        className={`w-1/2 text-lg font-semibold py-2 ${isSignIn
-                            ? "border-b-2 border-orange-500 text-white"
-                            : "text-gray-400"
+                        className={`w-1/2 text-lg font-semibold py-3 relative transition-colors duration-300 ${isSignIn ? "text-white" : "text-gray-400"
                             }`}
-                        onClick={() => setIsSignIn(true)}
+                        onClick={() => {
+                            setIsSignIn(true);
+                            setErrors({});
+                        }}
                     >
                         Sign in
+                        {isSignIn && (
+                            <span className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1/3 h-[3px] bg-orange-500 rounded-full" />
+                        )}
                     </button>
                     <button
-                        className={`w-1/2 text-lg font-semibold py-2 ${!isSignIn
-                            ? "border-b-2 border-orange-500 text-white"
-                            : "text-gray-400"
+                        className={`w-1/2 text-lg font-semibold py-3 relative transition-colors duration-300 ${!isSignIn ? "text-white" : "text-gray-400"
                             }`}
-                        onClick={() => setIsSignIn(false)}
+                        onClick={() => {
+                            setIsSignIn(false);
+                            setErrors({});
+                        }}
                     >
                         Sign up
+                        {!isSignIn && (
+                            <span className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1/3 h-[3px] bg-orange-500 rounded-full" />
+                        )}
                     </button>
                 </div>
 
-                {/* Form Content - Centered */}
-                <div className="transition-all duration-300 flex-1 flex flex-col justify-center">
+                {/* Form */}
+                <form onSubmit={handleSubmit} className="p-8 flex-1 flex flex-col justify-center">
                     {!isSignIn && (
                         <>
-                            <InputBox icon={<FaUser />} placeholder="First Name" />
-                            <InputBox icon={<FaUser />} placeholder="Last Name" />
-                            <InputBox icon={<FaEnvelope />} placeholder="Email" type="email" />
+                            <InputBox
+                                icon={<FaUser />}
+                                placeholder="First Name"
+                                name="firstName"
+                                value={formData.firstName}
+                                onChange={handleInputChange}
+                                error={errors.firstName}
+                            />
+                            <InputBox
+                                icon={<FaUser />}
+                                placeholder="Last Name"
+                                name="lastName"
+                                value={formData.lastName}
+                                onChange={handleInputChange}
+                                error={errors.lastName}
+                            />
+                            <InputBox
+                                icon={<FaEnvelope />}
+                                placeholder="Email"
+                                type="email"
+                                name="email"
+                                value={formData.email}
+                                onChange={handleInputChange}
+                                error={errors.email}
+                            />
                         </>
                     )}
 
                     <InputBox
                         icon={<FaUser />}
                         placeholder={isSignIn ? "User Name" : "Username"}
+                        name="username"
+                        value={formData.username}
+                        onChange={handleInputChange}
+                        error={errors.username}
+                    />
+                    <InputBox
+                        icon={<FaLock />}
+                        placeholder="Password"
+                        type="password"
+                        name="password"
+                        value={formData.password}
+                        onChange={handleInputChange}
+                        error={errors.password}
                     />
-                    <InputBox icon={<FaLock />} placeholder="Password" type="password" />
 
                     {/* Options */}
                     {isSignIn ? (
@@ -68,36 +152,53 @@ const AuthForm = () => {
                         </div>
                     )}
 
-                    {/* Action */}
-                    <button className="w-full bg-orange-500 text-white py-2 rounded-full font-semibold hover:bg-orange-600 transition">
+                    <button
+                        type="submit"
+                        className="w-full bg-orange-500 text-white py-2 rounded-full font-semibold hover:bg-orange-600 transition"
+                    >
                         {isSignIn ? "Sign in" : "Create Account"}
                     </button>
 
-                    {/* Toggle Form */}
                     <button
                         onClick={() => setIsSignIn(!isSignIn)}
+                        type="button"
                         className="text-sm mt-4 text-center block w-full text-gray-300 hover:text-white"
                     >
                         {isSignIn
                             ? "Don’t have an account?"
                             : "Already have an account?"}
                     </button>
-                </div>
+                </form>
             </div>
         </div>
     );
 };
 
-const InputBox = ({ icon, placeholder, type = "text", marginBottom = "mb-4" }) => (
-    <div className={`flex items-center gap-3 bg-white/10 rounded-full px-4 py-2 ${marginBottom}`}>
-        <span className="text-white">{icon}</span>
-        <input
-            type={type}
-            placeholder={placeholder}
-            className="bg-transparent outline-none text-white w-full placeholder-gray-300"
-        />
+// Reusable InputBox component
+const InputBox = ({
+    icon,
+    placeholder,
+    type = "text",
+    name,
+    value,
+    onChange,
+    error,
+    marginBottom = "mb-4",
+}) => (
+    <div className={`${marginBottom}`}>
+        <div className={`flex items-center gap-3 bg-white/10 rounded-full px-4 py-2`}>
+            <span className="text-white">{icon}</span>
+            <input
+                type={type}
+                name={name}
+                value={value}
+                onChange={onChange}
+                placeholder={placeholder}
+                className="bg-transparent outline-none text-white w-full placeholder-gray-300"
+            />
+        </div>
+        {error && <p className="text-sm text-red-400 mt-1 ml-2">{error}</p>}
     </div>
 );
 
-
 export default AuthForm;
diff --git a/frontend/src/pages/OurStory.jsx b/frontend/src/pages/OurStory.jsx
new file mode 100644
index 0000000..4fe594c
--- /dev/null
+++ b/frontend/src/pages/OurStory.jsx
@@ -0,0 +1,110 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+const timelineItems = [
+    { year: "2003", text: "De Silva Wine Store is established in Welimada." },
+    { year: "2010", text: "Second branch opened in Bandarawela." },
+    { year: "2018", text: "Expanded product range and services." },
+    { year: "2023", text: "Opened new branch in Badulla." },
+];
+
+const branches = [
+    {
+        name: "Welimada (Main Branch)",
+        description: "Heart of the hill country, our origin and flagship store.",
+        mapUrl: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12674.83081233136!2d81.1002124!3d6.9904296!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae4ef85b86e9c33%3A0x81e71d7d64eebb1f!2sWelimada!5e0!3m2!1sen!2slk!4v1618729162304!5m2!1sen!2slk"
+    },
+    {
+        name: "Bandarawela",
+        description: "Serving the bustling town with premium service.",
+        mapUrl: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3952.774179434003!2d80.989807!3d6.830641!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae3b1f65ad7ce97%3A0x3441f4126e1f1c9d!2sBandarawela!5e0!3m2!1sen!2slk!4v1618732944569!5m2!1sen!2slk"
+    },
+    {
+        name: "Badulla",
+        description: "Our newest branch, delivering convenience and excellence.",
+        mapUrl: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12670.902637697166!2d81.056915!3d6.991065!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae4f8dc2f8d79f7%3A0x4e47e671a8b5ae42!2sBadulla!5e0!3m2!1sen!2slk!4v1618733123121!5m2!1sen!2slk"
+    }
+];
+
+function OurStory() {
+    return (
+        <div className="min-h-screen bg-black text-gray-100 px-6 pt-28 pb-12">
+            <div className="max-w-6xl mx-auto space-y-20">
+
+                {/* Header */}
+                <div className="text-center">
+                    <h1 className="text-5xl font-extrabold text-orange-500 mb-4">Our Story</h1>
+                    <p className="text-lg text-gray-300">Welcome to De Silva Wine Store – Welimada</p>
+                </div>
+
+                {/* Owner & History in one row */}
+                <section className="flex flex-col md:flex-row gap-10">
+
+                    {/* About the Owner */}
+                    <div className="bg-zinc-900 p-8 rounded-2xl shadow-xl flex-1 flex flex-col items-center text-center md:items-start md:text-left">
+                        <div className="w-full flex justify-center md:justify-start mb-6">
+                            <img
+                                src="/owner.jpg" // need to replace with the actual  image
+                                alt="Owner - Mr. De Silva"
+                                className="w-44 h-44 rounded-full object-cover border-4 border-orange-400 shadow-md"
+                            />
+                        </div>
+                        <h2 className="text-3xl font-semibold text-orange-400 mb-4">About the Owner</h2>
+                        <p className="text-gray-300 text-lg leading-relaxed">
+                            Founded by Mr. De Silva, a visionary entrepreneur with over 20 years in the beverage industry.
+                            He’s known for his deep commitment to quality, community, and outstanding service.
+                        </p>
+                    </div>
+
+
+                    {/* Our History */}
+                    <div className="bg-zinc-900 p-8 rounded-2xl shadow-xl flex-1">
+                        <h2 className="text-3xl font-semibold text-orange-400 mb-6 text-center md:text-left">Our History</h2>
+                        <div className="space-y-6 pl-4 border-l-4 border-orange-500">
+                            {timelineItems.map((item, index) => (
+                                <motion.div
+                                    key={index}
+                                    initial={{ opacity: 0, x: -40 }}
+                                    whileInView={{ opacity: 1, x: 0 }}
+                                    transition={{ delay: index * 0.2 }}
+                                    viewport={{ once: true }}
+                                >
+                                    <h4 className="text-xl font-bold text-white">{item.year}</h4>
+                                    <p className="text-gray-300 text-md">{item.text}</p>
+                                </motion.div>
+                            ))}
+                        </div>
+                    </div>
+
+                </section>
+
+                {/* Our Branches */}
+                <section className="space-y-12">
+                    <h2 className="text-3xl font-semibold text-orange-400 text-center mb-10">Our Branches</h2>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
+                        {branches.map((branch, index) => (
+                            <div key={index} className="bg-zinc-800 p-6 rounded-2xl shadow-lg space-y-4">
+                                <h3 className="text-2xl font-bold text-white">{branch.name}</h3>
+                                <p className="text-gray-400 text-md">{branch.description}</p>
+                                <div className="w-full aspect-square overflow-hidden rounded-xl border-2 border-orange-300">
+                                    <iframe
+                                        className="w-full h-full"
+                                        src={branch.mapUrl}
+                                        allowFullScreen=""
+                                        loading="lazy"
+                                        referrerPolicy="no-referrer-when-downgrade"
+                                        title={`Map of ${branch.name}`}
+                                    ></iframe>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </section>
+
+            </div>
+        </div>
+    );
+}
+
+
+export default OurStory;