diff --git a/backend/middleware/authMiddleware.js b/backend/middleware/authMiddleware.js
new file mode 100644
index 0000000..b16c7f2
--- /dev/null
+++ b/backend/middleware/authMiddleware.js
@@ -0,0 +1,16 @@
+import jwt from "jsonwebtoken";
+
+const JWT_SECRET = process.env.JWT_SECRET || "supersecretkey";
+
+export const authMiddleware = (req, res, next) => {
+  const token = req.headers.authorization?.split(" ")[1]; // Bearer token
+  if (!token) return res.status(401).json({ msg: "No token provided" });
+
+  try {
+    const decoded = jwt.verify(token, JWT_SECRET);
+    req.user = decoded;
+    next();
+  } catch (err) {
+    res.status(401).json({ msg: "Invalid token" });
+  }
+};
diff --git a/backend/models/user.js b/backend/models/user.js
new file mode 100644
index 0000000..83eca67
--- /dev/null
+++ b/backend/models/user.js
@@ -0,0 +1,8 @@
+import mongoose from "mongoose";
+
+const userSchema = new mongoose.Schema({
+  username: { type: String, required: true, unique: true },
+  password: { type: String, required: true }, // hashed
+});
+
+export default mongoose.model("User", userSchema);
diff --git a/backend/routes/authRoutes.js b/backend/routes/authRoutes.js
new file mode 100644
index 0000000..0fe7600
--- /dev/null
+++ b/backend/routes/authRoutes.js
@@ -0,0 +1,11 @@
+import express from "express";
+import { register, login, protectedRoute } from "../controllers/authController.js";
+import { authMiddleware } from "../middleware/authMiddleware.js";
+
+const router = express.Router();
+
+router.post("/register", register);
+router.post("/login", login);
+router.get("/protected", authMiddleware, protectedRoute);
+
+export default router;
diff --git a/src/index.css b/src/index.css
index 30da0d3..5d09cb4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -17,12 +17,6 @@ html, body {
   font-family: 'Lexend', system-ui, Avenir, Helvetica, Arial, sans-serif; /* apply Lexend globally */
 }
 
-body {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
 /* Optional: style scrollbar for future if needed */
 ::-webkit-scrollbar {
   width: 6px;
@@ -78,3 +72,70 @@ body {
 .scrollbar-thin::-webkit-scrollbar-thumb:hover {
   background-color: rgba(100, 100, 100, 0.7);
 }
+/* Small devices: phones (up to 640px) */
+@media (max-width: 640px) {
+  header {
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+  }
+
+  main {
+    padding: 1rem;
+  }
+
+  footer {
+    padding: 1rem 0.5rem;
+    font-size: 0.8rem;
+  }
+}
+
+/* Medium devices: tablets (641px to 768px) */
+@media (min-width: 641px) and (max-width: 768px) {
+  header {
+    padding: 1rem 2rem;
+    font-size: 1rem;
+  }
+
+  main {
+    padding: 1.5rem;
+  }
+
+  footer {
+    padding: 1.5rem;
+    font-size: 0.9rem;
+  }
+}
+
+/* Large devices: laptops (769px to 1024px) */
+@media (min-width: 769px) and (max-width: 1024px) {
+  header {
+    padding: 1.5rem 3rem;
+    font-size: 1.1rem;
+  }
+
+  main {
+    padding: 2rem;
+  }
+
+  footer {
+    padding: 2rem;
+    font-size: 1rem;
+  }
+}
+
+/* Extra large devices: desktops (1025px and up) */
+@media (min-width: 1025px) {
+  header {
+    padding: 2rem 4rem;
+    font-size: 1.2rem;
+  }
+
+  main {
+    padding: 2.5rem;
+  }
+
+  footer {
+    padding: 2.5rem;
+    font-size: 1rem;
+  }
+}
diff --git a/src/layout/MainLayout.jsx b/src/layout/MainLayout.jsx
index d651db5..a14120d 100644
--- a/src/layout/MainLayout.jsx
+++ b/src/layout/MainLayout.jsx
@@ -4,20 +4,20 @@ import Footer from "../components/Footer";
 
 const MainLayout = ({ children }) => {
   const location = useLocation();
-  const hideFooterPaths = ["/about", "/chat"]; // Add any other routes where footer should be hidden
+  const hideFooterPaths = ["/about"];
   const hideFooter = hideFooterPaths.includes(location.pathname);
 
   return (
-    <div className="bg-surface-light dark:bg-surface-dark text-text-light dark:text-text-dark transition-colors duration-300 min-h-screen flex flex-col">
+    <div className="min-h-screen flex flex-col bg-surface-light dark:bg-surface-dark text-text-light dark:text-text-dark transition-colors duration-300">
       {/* Fixed Header */}
       <Header />
 
       {/* Page Content */}
-      <main className="container mx-auto px-4 pt-20 pb-8 flex-1">
+      <main className="flex-1 container mx-auto px-4 pt-20 pb-8">
         {children}
       </main>
 
-      {/* Footer that scrolls with page */}
+      {/* Footer */}
       {!hideFooter && <Footer />}
     </div>
   );
diff --git a/src/pages/AddNew.jsx b/src/pages/AddNew.jsx
new file mode 100644
index 0000000..5cafdd6
--- /dev/null
+++ b/src/pages/AddNew.jsx
@@ -0,0 +1,106 @@
+import { useState } from "react";
+import { Navigate } from "react-router-dom";
+import fetcher from "../hooks/useFetcher";
+
+export default function AddNew() {
+  // Check auth → (you can replace this with JWT/Context-based check later)
+  const token = localStorage.getItem("authToken");
+  if (!token) {
+    return <Navigate to="/login" replace />;
+  }
+
+  const [type, setType] = useState("projects");
+  const [formData, setFormData] = useState({});
+  const [message, setMessage] = useState("");
+
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const res = await fetcher.post(`${type}`, formData, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (res) {
+        setMessage("✅ Item added successfully!");
+        setFormData({});
+      }
+    } catch (err) {
+      setMessage("❌ Error adding item.");
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex justify-center items-center bg-gradient-to-br from-purple-600 via-pink-500 to-orange-400 p-6">
+      <div className="bg-white dark:bg-gray-900 p-8 rounded-xl shadow-xl w-full max-w-2xl transition-all duration-300">
+        <h1 className="text-3xl font-bold text-center text-gray-800 dark:text-white mb-6">
+          Add New Item
+        </h1>
+
+        {/* Select type */}
+        <div className="mb-4">
+          <label className="block text-gray-700 dark:text-gray-300 mb-2 font-semibold">
+            Select Type
+          </label>
+          <select
+            value={type}
+            onChange={(e) => setType(e.target.value)}
+            className="w-full border rounded-lg px-3 py-2 dark:bg-gray-800 dark:text-white"
+          >
+            <option value="projects">Project</option>
+            <option value="skills">Skill</option>
+            <option value="experience">Experience</option>
+            <option value="certifications">Certification</option>
+          </select>
+        </div>
+
+        {/* Dynamic form fields */}
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <input
+            type="text"
+            name="title"
+            placeholder="Title / Name"
+            value={formData.title || ""}
+            onChange={handleChange}
+            className="w-full border rounded-lg px-3 py-2 dark:bg-gray-800 dark:text-white"
+          />
+
+          <textarea
+            name="description"
+            placeholder="Description"
+            value={formData.description || ""}
+            onChange={handleChange}
+            className="w-full border rounded-lg px-3 py-2 dark:bg-gray-800 dark:text-white"
+          />
+
+          <input
+            type="text"
+            name="link"
+            placeholder="Link (if any)"
+            value={formData.link || ""}
+            onChange={handleChange}
+            className="w-full border rounded-lg px-3 py-2 dark:bg-gray-800 dark:text-white"
+          />
+
+          <button
+            type="submit"
+            className="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 rounded-lg transition duration-300"
+          >
+            Add {type}
+          </button>
+        </form>
+
+        {message && (
+          <p className="mt-4 text-center text-lg font-medium text-gray-700 dark:text-gray-300">
+            {message}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Certifications.jsx b/src/pages/Certifications.jsx
new file mode 100644
index 0000000..14feb91
--- /dev/null
+++ b/src/pages/Certifications.jsx
@@ -0,0 +1,59 @@
+import useFetcher from "../hooks/useFetcher";
+
+export default function Certifications() {
+  const { data: certifications, error, loading } = useFetcher("certifications");
+  if(loading)
+    return (
+      <p className="text-center text-text-light dark:text-text-dark text-lg py-16">
+        Loading certifications...
+      </p>
+    );
+    if(error || !certifications)
+    return (
+      <p className="text-center text-red-500 text-lg py-16">
+        {error || "Failed to load certifications"}
+      </p>
+    );
+  return (
+    <div className="p-6 mt-16">
+      <h1 className="text-3xl font-bold text-heading-light dark:text-heading-dark mb-6">
+        Certifications
+      </h1>
+
+      {certifications.length === 0 ? (
+        <p className="text-text-light dark:text-text-dark">No certifications yet.</p>
+      ) : (
+        <ul className="space-y-4">
+          {certifications.map((cert) => (
+            <li
+              key={cert._id}
+              className="p-4 rounded-lg border border-primary-light/20 dark:border-primary-dark/20
+                         bg-surface-light dark:bg-surface-dark shadow-sm hover:shadow-md transition"
+            >
+              <h2 className="text-xl font-semibold text-primary-light dark:text-primary-dark">
+                {cert.title}
+              </h2>
+              <p className="text-text-light dark:text-text-dark">Issued By{cert.issuer}</p>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Issued Date{cert.date}
+              </p>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Expiry Date{cert.expiry}
+              </p>
+              {cert.link && (
+                <a
+                  href={cert.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-accent-light dark:text-accent-dark hover:underline"
+                >
+                  View Certificate
+                </a>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
new file mode 100644
index 0000000..54c99bf
--- /dev/null
+++ b/src/pages/Login.jsx
@@ -0,0 +1,74 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+const Login = () => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const navigate = useNavigate();
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    // For now, mock auth (replace with API later)
+    if (username === "admin" && password === "password") {
+      localStorage.setItem("authToken", "sample-token");
+      navigate("/add-new");
+    } else {
+      alert("Invalid credentials");
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-surface text-text transition-colors duration-300">
+      <div className="w-full max-w-md p-8 rounded-lg shadow-lg bg-surface/90">
+        <h1 className="text-3xl font-bold text-heading mb-6 text-center">
+          Login
+        </h1>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label
+              htmlFor="username"
+              className="block text-sm font-medium text-text/80"
+            >
+              Username
+            </label>
+            <input
+              id="username"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className="w-full mt-1 px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary bg-surface text-text"
+              required
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="password"
+              className="block text-sm font-medium text-text/80"
+            >
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full mt-1 px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary bg-surface text-text"
+              required
+            />
+          </div>
+
+          <button
+            type="submit"
+            className="w-full py-2 px-4 bg-primary-light text-white font-semibold rounded-md hover:bg-primary/90 transition"
+          >
+            Login
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Login;