diff --git a/Backend/.env_sample b/Backend/.env_sample
index 2beb315..2a9f43b 100644
--- a/Backend/.env_sample
+++ b/Backend/.env_sample
@@ -1,5 +1,5 @@
 MONGODB_URI=
-PORT=8080
+PORT=
 CLOUD_NAME
 CLOUD_API_KEY=
 CLOUD_API_KEY_SECRET=
diff --git a/Backend/controllers/user.controller.js b/Backend/controllers/user.controller.js
index 48df3fc..4890e34 100644
--- a/Backend/controllers/user.controller.js
+++ b/Backend/controllers/user.controller.js
@@ -93,12 +93,10 @@ export const loginUser = async (req, res) => {
     }
 
     // Respond with success message (add token logic if needed)
-    res
-      .status(200)
-      .json({
-        message: "Login successful",
-        user: { username: user.username, email: user.email },
-      });
+    res.status(200).json({
+      message: "Login successful",
+      user: { username: user.username, email: user.email },
+    });
   } catch (error) {
     res.status(500).json({ message: "Error logging in", error: error.message });
   }
diff --git a/Backend/package-lock.json b/Backend/package-lock.json
index b026d1a..79afb26 100644
--- a/Backend/package-lock.json
+++ b/Backend/package-lock.json
@@ -11,7 +11,7 @@
       "dependencies": {
         "bcrypt": "^5.1.1",
         "bcryptjs": "^2.4.3",
-        "cloudinary": "^2.5.0",
+        "cloudinary": "^1.21.0",
         "cookie-parser": "^1.4.6",
         "cors": "^2.8.5",
         "dotenv": "^16.4.5",
@@ -274,15 +274,16 @@
       }
     },
     "node_modules/cloudinary": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/cloudinary/-/cloudinary-2.5.0.tgz",
-      "integrity": "sha512-gPkyylFpyBAXiErAnMgZBlpwztHuZoik/OTLQM9oswjlzYHLMtQGoh0oisPBQvVHQxHmBUjcgwsAi393HDedqQ==",
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/cloudinary/-/cloudinary-1.21.0.tgz",
+      "integrity": "sha512-am8wpHbHl8bcpy9oGSlWrpWLNQ9szkW/jmhcJdEpMjaL23BYt05V1frWyrXDlo8Jt7aCo5NE6EO0CM9Zaynd5g==",
+      "license": "MIT",
       "dependencies": {
-        "lodash": "^4.17.21",
+        "lodash": "^4.17.11",
         "q": "^1.5.1"
       },
       "engines": {
-        "node": ">=9"
+        "node": ">=0.6"
       }
     },
     "node_modules/color-support": {
@@ -444,6 +445,7 @@
       "version": "16.4.5",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
       "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=12"
       },
@@ -1124,6 +1126,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/multer-storage-cloudinary/-/multer-storage-cloudinary-4.0.0.tgz",
       "integrity": "sha512-25lm9R6o5dWrHLqLvygNX+kBOxprzpmZdnVKH4+r68WcfCt8XV6xfQaMuAg+kUE5Xmr8mJNA4gE0AcBj9FJyWA==",
+      "license": "MIT",
       "peerDependencies": {
         "cloudinary": "^1.21.0"
       }
diff --git a/Backend/package.json b/Backend/package.json
index fc24478..9ecf472 100644
--- a/Backend/package.json
+++ b/Backend/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "bcrypt": "^5.1.1",
     "bcryptjs": "^2.4.3",
-    "cloudinary": "^2.5.0",
+    "cloudinary": "^1.21.0",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
diff --git a/Backend/utils/cloud.js b/Backend/utils/cloud.js
index 20d4b8e..16daec4 100644
--- a/Backend/utils/cloud.js
+++ b/Backend/utils/cloud.js
@@ -1,18 +1,38 @@
-import { v2 as cloudinary } from 'cloudinary';
-import { CloudinaryStorage } from 'multer-storage-cloudinary';
+// import { v2 as cloudinary } from 'cloudinary';
+// import { CloudinaryStorage } from 'multer-storage-cloudinary';
 
-cloudinary.config({
+// cloudinary.config({
+//   cloud_name: process.env.CLOUD_NAME,
+//   api_key: process.env.CLOUD_API_KEY,
+//   api_secret: process.env.CLOUD_API_KEY_SECRET
+// });
+
+// const storage = new CloudinaryStorage({
+//   cloudinary: cloudinary,
+//   params: {
+//     folder: 'wanderlust_dev',
+//     allowed_formats: ["png", "jpg", "jpeg"]
+//   }
+// });
+
+// export { cloudinary, storage };
+import cloudinary from "cloudinary";
+import { CloudinaryStorage } from "multer-storage-cloudinary";
+
+const { v2: cloudinaryV2 } = cloudinary;
+
+cloudinaryV2.config({
   cloud_name: process.env.CLOUD_NAME,
   api_key: process.env.CLOUD_API_KEY,
-  api_secret: process.env.CLOUD_API_KEY_SECRET
+  api_secret: process.env.CLOUD_API_KEY_SECRET,
 });
 
 const storage = new CloudinaryStorage({
-  cloudinary: cloudinary,
+  cloudinary: cloudinaryV2,
   params: {
-    folder: 'wanderlust_dev',
-    allowed_formats: ["png", "jpg", "jpeg"]
-  }
+    folder: "wanderlust_dev",
+    allowed_formats: ["png", "jpg", "jpeg"],
+  },
 });
 
-export { cloudinary, storage };
+export { cloudinaryV2 as cloudinary, storage };
diff --git a/src/App.jsx b/src/App.jsx
index 08bc914..c34129b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -10,13 +10,12 @@ import "./App.css";
 import Publish from "./pages/Publish";
 
 // import Footer from "./components/Footer";
-import Settings from './pages/settings';
+import Settings from "./pages/settings";
 
 import LandingPage from "./pages/LandingPage"; // Ensure this path is correct
 
 import Signup from "./pages/SignUp";
-
-
+import Login from "./pages/Login";
 
 function App() {
   return (
@@ -24,13 +23,14 @@ function App() {
       <Navbar />
       <div className="body-content">
         <Routes>
-          <Route path="/" element={<LandingPage/>} />
+          <Route path="/" element={<LandingPage />} />
           <Route path="/dashboard" element={<Dashboard />} />
           <Route path="/posts" element={<Publish />} />
           <Route path="/analytics" element={<Analytics />} />
           <Route path="/contributors" element={<Contributors />} />
-          <Route path="/settings" element={<Settings/>} />
-          <Route path="/signup" element={< Signup/>} />
+          <Route path="/settings" element={<Settings />} />
+          <Route path="/signup" element={<Signup />} />
+          <Route path="/login" element={<Login />} />
         </Routes>
       </div>
     </Router>
@@ -38,4 +38,3 @@ function App() {
 }
 
 export default App;
-
diff --git a/src/components/BasicNavbar.jsx b/src/components/BasicNavbar.jsx
index f9818fb..43d2dbd 100644
--- a/src/components/BasicNavbar.jsx
+++ b/src/components/BasicNavbar.jsx
@@ -5,10 +5,10 @@ import "../pages/LandingPage.css";
 const BasicNavbar = () => {
   return (
     <div className="landing-container">
-      <nav className="navbar" id="navbarr">
-        <div className="logo">
+      {/* <nav className="navbar" id="navbarr"> */}
+        {/* <div className="logo">
           <img src="\is14Logo.png" alt="Logo" />
-        </div>
+        </div> */}
         {/* <div className="nav-links">
           <button className="btn-login">Login</button>
           <button className="btn-signup">Sign Up</button>
@@ -25,7 +25,7 @@ const BasicNavbar = () => {
             </Link>
           </div>
         </div>
-      </nav>
+      {/* </nav> */}
     </div>
   );
 };
diff --git a/src/pages/LandingPage.css b/src/pages/LandingPage.css
index dd552fc..e91744b 100644
--- a/src/pages/LandingPage.css
+++ b/src/pages/LandingPage.css
@@ -6,53 +6,33 @@ body {
   }
   
   .landing-container {
-    height: auto;
-    display: flex;
-    border-radius: 5px;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
-    background-color: #f7f7f7;
-  }
+  display: flex;
+  justify-content: flex-end; /* Aligns content to the right end */
+  padding: 0.2rem; /* Adds some spacing around the navbar */
+  /* background-color: #ec2222; */
+  border-radius: 5px;
+  border-radius: 5px;
   
-  .navbar {
-    width: 100%;
-    display: flex;
-    /* justify-content: space-between; */
-    background-color: #4a90e2;
-    max-height:40px;
-  }
+}
 
-  #navbarr{
-    justify-content: space-between;
-  }
-  
-  .logo img {
-    position: absolute;
-    height: 40px;
-    width: auto;
-    padding-left: 8px;
-  }
-  
-  .nav-links {
-    margin-top: 2px;
-    display: flex;
-    gap: 15px;
-    margin-right: 35px;
-  }
-  
-  .btn-login,
-  .btn-signup,
-  .btn-get-started {
-     padding: 10px 20px; 
-    border: none;
-    cursor: pointer;
-    font-size: 16px;
-    border-radius: 5px;
-    transition: background 0.3s ease;
-  }
+.nav-links {
+  display: flex;
+  gap: 1rem; /* Adds spacing between the buttons */
   
-  .btn-login {
+}
+
+.btn-login, .btn-signup {
+  width: 110px;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  cursor: pointer;
+  border: none;
+  background-color: #2563eb !important; /* Adjust color as needed */
+  color: white !important;
+  border-radius: 5px;
+  transition: background-color 0.3s;
+}
+  /* .btn-login {
     background-color: white;
     color: #4a90e2;
   }
@@ -60,13 +40,13 @@ body {
   .btn-signup {
     background-color: #ffffff;
     color: #4a90e2;
-  }
+  } */
   
-  .btn-get-started {
+  /* .btn-get-started {
     background-color: #ff5e5e;
     color: white;
     font-size: 18px;
-  }
+  } */
   
   .btn-login:hover,
   .btn-signup:hover,
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
new file mode 100644
index 0000000..87ecd1a
--- /dev/null
+++ b/src/pages/Login.jsx
@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import axios from "axios";
+import "./login.css"; // Add your CSS file
+import BasicNavbar from "../components/BasicNavbar";
+
+const Login = () => {
+  const navigate = useNavigate();
+  const [formData, setFormData] = useState({
+    email: "",
+    password: "",
+  });
+  const [error, setError] = useState("");
+
+  // Handle input changes
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  // Handle login form submission
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const { email, password } = formData;
+
+    try {
+      const response = await axios.post("http://localhost:5000/api/users/login", {
+        email,
+        password,
+      });
+
+      if (response.data.message === "Login successful") {
+        // Navigate to the home/dashboard page upon successful login
+        navigate("/dashboard");
+      } else {
+        setError(response.data.message);
+      }
+    } catch (err) {
+      setError("Login failed. Please check your credentials and try again.");
+    }
+  };
+
+  return (
+    <div className="login-container">
+      <BasicNavbar />
+      <div className="login-form-container">
+        <h2>Login to Your Account</h2>
+        {error && <p className="error-message">{error}</p>}
+        <form onSubmit={handleSubmit} className="login-form">
+          <input
+            type="email"
+            name="email"
+            placeholder="Email"
+            value={formData.email}
+            onChange={handleChange}
+            required
+          />
+          <input
+            type="password"
+            name="password"
+            placeholder="Password"
+            value={formData.password}
+            onChange={handleChange}
+            required
+          />
+          <button type="submit" className="btn-login-submit">
+            Login
+          </button>
+        </form>
+        <p>
+          Don't have an account?{" "}
+          <Link to="/signup" className="signup-link">
+            Sign Up
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Login;
diff --git a/src/pages/login.css b/src/pages/login.css
new file mode 100644
index 0000000..e11749f
--- /dev/null
+++ b/src/pages/login.css
@@ -0,0 +1,97 @@
+
+
+/* Basic container styling */
+.login-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  
+  justify-content: center;
+  min-height: 50vh;
+  background-color: #f7f8fa;
+  padding: 20px;
+}
+
+/* Form container */
+.login-form-container {
+  background-color: #ffffff;
+  padding: 60px;
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 400px;
+  text-align: center;
+}
+
+/* Heading */
+.login-form-container h2 {
+  margin-bottom: 20px;
+  font-size: 1.8rem;
+  color: #333;
+}
+
+/* Input fields */
+.login-form input {
+  width: 100%;
+  padding: 12px 15px;
+  margin: 10px 0;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  font-size: 1rem;
+  box-sizing: border-box;
+}
+
+.login-form input:focus {
+  outline: none;
+  border-color: #007bff;
+}
+
+/* Submit button */
+.btn-login-submit {
+  width: 100%;
+  padding: 12px 15px;
+  margin-top: 15px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.btn-login-submit:hover {
+  background-color: #0056b3;
+}
+
+/* Error message */
+.error-message {
+  color: #ff4d4d;
+  margin-bottom: 15px;
+  font-size: 0.9rem;
+}
+
+/* Signup link */
+.signup-link {
+  color: #007bff;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.signup-link:hover {
+  text-decoration: underline;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .login-form-container {
+    padding: 30px;
+  }
+
+  .login-form input {
+    font-size: 0.9rem;
+  }
+
+  .btn-login-submit {
+    font-size: 0.9rem;
+  }
+}