diff --git a/Backend/controllers/pharmacyController.js b/Backend/controllers/pharmacyController.js
index dc89321f..0312ecc9 100644
--- a/Backend/controllers/pharmacyController.js
+++ b/Backend/controllers/pharmacyController.js
@@ -173,7 +173,9 @@ exports.toggleClosingStatus = async (req, res) => {
 // @desc post pharmacy Forgot password
 // @route POST /api/pharmacies/forgot-password
 exports.forgotPassword = async (req, res) => {
-  const pharmacy = await pharmacy.findOne({ email: req.body.email.trim().toLowerCase() });
+  const pharmacy = await pharmacy.findOne({
+    email: req.body.email.trim().toLowerCase(),
+  });
   if (!pharmacy) {
     return res.status(404).json({ message: "Pharmacy not found" });
   }
@@ -204,8 +206,7 @@ exports.forgotPassword = async (req, res) => {
       message: "Error sending email. Please try again later.",
     });
   }
-}
-
+};
 
 // @desc patch pharmacy reset password
 // @route PATCH /api/pharmacies/reset-password/:token
@@ -221,17 +222,17 @@ exports.resetPassword = async (req, res) => {
       passwordResetToken: hashedToken,
       passwordResetExpires: { $gt: Date.now() },
     });
-  
+
     if (!pharmacy) {
       return res.status(400).json({ message: "Invalid or expired token" });
     }
-  
+
     pharmacy.password = req.body.password;
     pharmacy.passwordResetToken = undefined;
     pharmacy.passwordResetExpires = undefined;
-  
+
     await pharmacy.save();
-  
+
     res.status(200).json({ message: "Password reset successful" });
     //login pharmacy
     const loginToken = generateToken(pharmacy);
@@ -240,6 +241,6 @@ exports.resetPassword = async (req, res) => {
       token: loginToken,
     });
   } catch (err) {
-    res.status(500).json({message: "Server error", error: err.message });
+    res.status(500).json({ message: "Server error", error: err.message });
   }
-}
\ No newline at end of file
+};
diff --git a/Frontend/.gitignore b/Frontend/.gitignore
index a547bf36..5c0b45a0 100644
--- a/Frontend/.gitignore
+++ b/Frontend/.gitignore
@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Ignore the .env file
+.env
diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx
index 1c2dbc0a..7eb1b5c8 100644
--- a/Frontend/src/App.jsx
+++ b/Frontend/src/App.jsx
@@ -17,11 +17,12 @@ import OrderSummary from "./pages/OrderSummary";
 // import ProfileSignup from "./pages/ProfileSignup";
 import FindMedsLoading from "./components/FindMedsLoading";
 import UpdatedCart from "./pages/UpdatedCart";
-import PhamarcySignUp from "./components/forms/PhamarcySignUp";
+import NewPharmarcySignUp from "./components/forms/NewPharmarcySignUp";
 import MedicineTable from "./components/MedicineTable";
 import UploadPrescription from "./pages/UploadPrescription";
 import PharmacyOtp from "./components/PharmacyOtp";
 import OtpConfirmed from "./components/OtpConfirmed";
+import Pharmarcysignin from "./components/forms/Pharmarcysignin";
 
 // Code splitted Components (Lazy Loading)...
 // N.B- Please do not touch if you're new to how lazy loading works..
@@ -133,7 +134,8 @@ function App() {
         {/* Pharmacy Routing */}
         <Route path="/dashboard" element={<Dashboard />} />
         <Route path="/pharmacist-profile" element={<PharmacistProfile />} />
-        <Route path="/pharmacy-signup" element={<PhamarcySignUp />} />
+        <Route path="/pharmacy-signup" element={<NewPharmarcySignUp />} />
+        <Route path="/pharmacy-signin" element={<Pharmarcysignin />} />
         <Route path="/medicine-table" element={<MedicineTable />} />
         <Route path="/upload-prescription" element={<UploadPrescription />} />
         <Route path="/pharmacy-otp" element={<PharmacyOtp />} />
diff --git a/Frontend/src/components/forms/NewPharmarcySignUp.jsx b/Frontend/src/components/forms/NewPharmarcySignUp.jsx
new file mode 100644
index 00000000..8ed1ad11
--- /dev/null
+++ b/Frontend/src/components/forms/NewPharmarcySignUp.jsx
@@ -0,0 +1,170 @@
+import React, { useState } from "react";
+import styles from "../../styles/newpharmacysignup.module.css";
+import caretleft from "../../assets/CaretLeft.png";
+import cancelicon from "../../assets/X.png";
+
+const InputField = ({ id, name, type, placeholder, value, onChange }) => (
+  <input
+    id={id}
+    name={name}
+    type={type}
+    placeholder={placeholder}
+    value={value}
+    onChange={onChange}
+  />
+);
+
+const NewPharmarcySignUp = () => {
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    password: "",
+    confirmPassword: "",
+    phone: "",
+    address: "",
+  });
+
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError("");
+    setSuccess(false);
+
+    // Basic validation
+    if (
+      !formData.name ||
+      !formData.email ||
+      !formData.password ||
+      !formData.confirmPassword ||
+      !formData.phone ||
+      !formData.address
+    ) {
+      setError("All fields are required.");
+      return;
+    }
+
+    if (formData.password !== formData.confirmPassword) {
+      setError("Passwords do not match.");
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const response = await fetch(
+        `${import.meta.env.VITE_API_URL}/pharmacies/signup`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(formData),
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error("Failed to sign up. Please try again.");
+      }
+
+      const data = await response.json();
+      setSuccess(true);
+      setFormData({
+        name: "",
+        email: "",
+        password: "",
+        confirmPassword: "",
+        phone: "",
+        address: "",
+      });
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <section className={styles.signupSection}>
+        <div className={styles.headerNav}>
+          <img src={caretleft} alt="go back" className={styles.backIcon} />
+          <h1 className={styles.headerText}>Create Account</h1>
+          <img src={cancelicon} alt="close" className={styles.closeIcon} />
+        </div>
+        <form onSubmit={handleSubmit}>
+          <InputField
+            id="name"
+            name="name"
+            type="text"
+            placeholder="Pharmacy Name"
+            value={formData.name}
+            onChange={handleChange}
+          />
+          <InputField
+            id="email"
+            name="email"
+            type="email"
+            placeholder="Email address"
+            value={formData.email}
+            onChange={handleChange}
+          />
+          <InputField
+            id="password"
+            name="password"
+            type="password"
+            placeholder="Password"
+            value={formData.password}
+            onChange={handleChange}
+          />
+          <InputField
+            id="confirmPassword"
+            name="confirmPassword"
+            type="password"
+            placeholder="Confirm Password"
+            value={formData.confirmPassword}
+            onChange={handleChange}
+          />
+          <InputField
+            id="phone"
+            name="phone"
+            type="tel"
+            placeholder="+234 800-123-4567"
+            value={formData.phone}
+            onChange={handleChange}
+            inputMode="numeric"
+            maxLength="13"
+          />
+          <InputField
+            id="address"
+            name="address"
+            type="text"
+            placeholder="Address"
+            value={formData.address}
+            onChange={handleChange}
+          />
+
+          {error && <p className={styles.error}>{error}</p>}
+          {success && <p className={styles.success}>Sign up successful!</p>}
+
+          <button type="submit" className={styles.signupbtn} disabled={loading}>
+            {loading ? "Signing Up..." : "Sign Up"}
+          </button>
+        </form>
+        <div className={styles.redirectLink}>
+          <p>Already have an account?</p>
+          <a href="/pharmacy-signin">Log in</a>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default NewPharmarcySignUp;
diff --git a/Frontend/src/components/forms/PhamarcySignUp.jsx b/Frontend/src/components/forms/PhamarcySignUp.jsx
deleted file mode 100644
index f9360ab5..00000000
--- a/Frontend/src/components/forms/PhamarcySignUp.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from "react";
-import "../../styles/pharmacysignup.css";
-import caretleft from "../../assets/CaretLeft.png";
-import cancelicon from "../../assets/X.png"
-const PhamarcySignUp = () => {
-  return (
-    <div className="pharmacy-signup-container">
-        <div className="direction-header">
-            <img src={caretleft} alt="caretleft" />
-            <img src={cancelicon} alt="caretleft" />
-        </div>
-      <form>
-        <label htmlFor="email">
-          <input type="email" />
-        </label>
-        <label htmlFor="password">
-          <input type="password" />
-        </label>
-
-        <label htmlFor="OTP">
-          <input
-            type="text"
-            pattern="[0-9]"
-            inputMode="numeric"
-            maxLength="6"
-          />
-        </label>
-        <button>Sign Up</button>
-      </form>
-      <div className="redirect-link">
-        {" "}
-        <p>Already have An Account</p>
-        <a href="">Login in</a>
-      </div>
-    </div>
-  );
-};
-
-export default PhamarcySignUp;
diff --git a/Frontend/src/components/forms/PharmacyLogin.jsx b/Frontend/src/components/forms/PharmacyLogin.jsx
deleted file mode 100644
index 53ed4ff9..00000000
--- a/Frontend/src/components/forms/PharmacyLogin.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import "./../../styles/pharmacylogin.css"
-import caretleft from "../../assets/CaretLeft.png";
-import cancelicon from "../../assets/X.png"
-const PharmacyLogin = () => {
-return (
-<div className='pharmacy-login-container'>
-<div className="direction-header">
-    <a href="/">
-    <img src={caretleft} alt="caretleft" />    
-    </a>
-<img src={cancelicon} alt="caretleft" />
-</div>
-<form>
-<label>
-<input type="email" placeholder="Email" required/>
-</label>
-<label>
-<input type="password" placeholder="Password" required/>
-</label>
-<button type="submit">Login</button>
-</form>
-<div className="redirect-link">
-<p>Don't have an account?</p>
-<a href="">Sign Up</a>
-</div>
-</div>
-)
-}
-
-export default PharmacyLogin
\ No newline at end of file
diff --git a/Frontend/src/components/forms/Pharmarcysignin.jsx b/Frontend/src/components/forms/Pharmarcysignin.jsx
new file mode 100644
index 00000000..cfeb306b
--- /dev/null
+++ b/Frontend/src/components/forms/Pharmarcysignin.jsx
@@ -0,0 +1,130 @@
+import React, { useState } from "react";
+import styles from "../../styles/pharmacysignin.module.css";
+import caretleft from "../../assets/CaretLeft.png";
+import cancelicon from "../../assets/X.png";
+import { useNavigate } from "react-router-dom";
+
+const Pharmarcysignin = () => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [rememberMe, setRememberMe] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleSignIn = async (e) => {
+    // Prevent Default submission
+    e.preventDefault();
+    setError("");
+
+    try {
+      const response = await fetch(
+        // "https://new-cura.onrender.com/api/pharmacies/signin",
+        `${import.meta.env.VITE_API_URL}/pharmacies/signin`,
+
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ email, password }),
+        }
+      );
+
+      const data = await response.json();
+
+      if (response.ok) {
+        localStorage.setItem("authtoken", data.token);
+        navigate("/dashboard");
+      } else if (response.status === 401) {
+        const data = await response.json();
+        setError(data.message || "Invalid email or password.");
+      } else if (response.status === 404) {
+        setError("Account not found. Please check your email.");
+      } else {
+        setError(data.message || "Sign-in failed. Please try again.");
+      }
+    } catch (error) {
+      setError("Network error. Please try again later.");
+      console.error("Sign-in error:", error);
+    }
+  };
+
+  const navigate = useNavigate();
+
+  const handleSignUp = () => {
+    navigate("/signup-email");
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+  };
+  return (
+    <div className={styles.container}>
+      <section className={styles.signupSection}>
+        <div className={styles.headerNav}>
+          <img src={caretleft} alt="go back" className={styles.backIcon} />
+          <h1 className={styles.headerText}>Log In</h1>
+          <img src={cancelicon} alt="close" className={styles.closeIcon} />
+        </div>
+        <form onSubmit={handleSubmit}>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            placeholder="Email address"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+          <input
+            id="password"
+            name="password"
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <div className={styles.options}>
+            <label>
+              <input
+                type="checkbox"
+                checked={rememberMe}
+                onChange={() => setRememberMe(!rememberMe)}
+              />
+              Remember Me
+            </label>
+            <a className={styles.forgot} href="#">
+              Forgot password?
+            </a>
+          </div>
+
+          <button
+            type="submit"
+            className={styles.signupbtn}
+            onClick={handleSignIn}
+          >
+            Sign In
+          </button>
+          {/* Error message */}
+          {error && (
+            <p
+              style={{
+                color: "red",
+                textAlign: "center",
+                marginBlockStart: "1rem",
+              }}
+            >
+              {error}
+            </p>
+          )}
+        </form>
+        <div className={styles.redirectLink}>
+          <p>Don't have an account?</p>
+          <a onClick={handleSignUp}>Sign up</a>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Pharmarcysignin;
diff --git a/Frontend/src/components/forms/SignIn.jsx b/Frontend/src/components/forms/SignIn.jsx
index bbc47f4a..19e3158c 100644
--- a/Frontend/src/components/forms/SignIn.jsx
+++ b/Frontend/src/components/forms/SignIn.jsx
@@ -16,7 +16,8 @@ const SignIn = () => {
 
     try {
       const response = await fetch(
-        "https://new-cura.onrender.com/api/patients/signin",
+        `${import.meta.env.VITE_API_URL}/patients/signin`,
+
         {
           method: "POST",
           headers: {
@@ -95,7 +96,7 @@ const SignIn = () => {
               />
               Remember Me
             </label>
-            <a href="/forgot-password">Forgot password?</a>
+            <a href="#">Forgot password?</a>
           </div>
 
           <button
diff --git a/Frontend/src/components/forms/SignUp.jsx b/Frontend/src/components/forms/SignUp.jsx
index e710d8a4..46fcf3a9 100644
--- a/Frontend/src/components/forms/SignUp.jsx
+++ b/Frontend/src/components/forms/SignUp.jsx
@@ -105,7 +105,9 @@ const SignUp = () => {
 
     try {
       const response = await fetch(
-        "https://new-cura.onrender.com/api/patients/signup",
+        // "https://new-cura.onrender.com/api/patients/signup",
+        `${import.meta.env.VITE_API_URL}/patients/signup`,
+
         {
           method: "POST",
           headers: {
diff --git a/Frontend/src/styles/newpharmacysignup.module.css b/Frontend/src/styles/newpharmacysignup.module.css
new file mode 100644
index 00000000..868dcc77
--- /dev/null
+++ b/Frontend/src/styles/newpharmacysignup.module.css
@@ -0,0 +1,63 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-image: url("../assets/Background.svg");
+  background-size: cover;
+  background-position: center;
+}
+.signupSection {
+  width: 100%;
+  max-width: 400px;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px 30px 20px 30px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1;
+
+  > .headerNav {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+  > form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    > input {
+      width: 100%;
+      padding: 10px;
+      border-radius: 4px;
+      border: 1px solid #110f0f;
+      font-size: 16px;
+    }
+    > .signupbtn {
+      width: 100%;
+      padding: 7px;
+      border-radius: 4px;
+      border: none;
+      outline: none;
+      font-size: 16px;
+      background-color: #83c0b9;
+      color: white;
+      cursor: pointer;
+      margin-bottom: 5px;
+      &:hover {
+        background-color: #6da8a0;
+      }
+    }
+  }
+  > .redirectLink {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    > a {
+      text-decoration: none;
+      color: #83c0b9;
+    }
+  }
+}
diff --git a/Frontend/src/styles/pharmacysignin.module.css b/Frontend/src/styles/pharmacysignin.module.css
new file mode 100644
index 00000000..04d8e9c0
--- /dev/null
+++ b/Frontend/src/styles/pharmacysignin.module.css
@@ -0,0 +1,83 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-image: url("../assets/Background.svg");
+  background-size: cover;
+  background-position: center;
+}
+
+.signupSection {
+  width: 100%;
+  max-width: 400px;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px 30px 20px 30px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1;
+
+  > .headerNav {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+  > form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    > input {
+      width: 100%;
+      padding: 10px;
+      border-radius: 4px;
+      border: 1px solid #110f0f;
+      font-size: 16px;
+    }
+    > .options {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      > label {
+        font-size: 16px;
+        color: #110f0f;
+        display: flex;
+        align-items: center;
+        > input[type="checkbox"] {
+          width: 14px;
+          cursor: pointer;
+        }
+      }
+      > .forgot {
+        text-decoration: none;
+        color: #110f0f;
+      }
+    }
+    > .signupbtn {
+      width: 100%;
+      padding: 7px;
+      border-radius: 4px;
+      border: none;
+      outline: none;
+      font-size: 16px;
+      background-color: #83c0b9;
+      color: white;
+      cursor: pointer;
+      margin-bottom: 5px;
+      &:hover {
+        background-color: #6da8a0;
+      }
+    }
+  }
+  > .redirectLink {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    > a {
+      text-decoration: none;
+      color: #83c0b9;
+    }
+  }
+}
diff --git a/Frontend/src/styles/pharmacysignup.css b/Frontend/src/styles/pharmacysignup.module.css
similarity index 74%
rename from Frontend/src/styles/pharmacysignup.css
rename to Frontend/src/styles/pharmacysignup.module.css
index f618b8e7..c7d69eb4 100644
--- a/Frontend/src/styles/pharmacysignup.css
+++ b/Frontend/src/styles/pharmacysignup.module.css
@@ -1,72 +1,67 @@
-
-
-.pharmacy-signup-container {
-    position: relative;
-  background-image: url("../assets/Background.svg");
-  width: 100%;
-  height: 150vh;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  z-index: -2;
-}
-
-
-.direction-header{
-    position: absolute;
-    top: 4em;
-    display: flex;
-    gap: 20rem;
-    }
-
-/* BEFORE YOU UNCOMMENT THIS CODE MAKE SURE YOU GIVE IT A CLASS SO IT STOPS AFFECTING OTHER PEOPLE'S CODE */
-/* form {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  max-width: 600px;
-  margin-top: -250px;
-  background: #f9fdfd;
-  border-radius: 10px;
-  padding: 20px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  width: 50rem;
-  height: 100vh;
-  z-index: -1;
-} */
-
-/* BEFORE YOU UNCOMMENT THIS CODE MAKE SURE YOU GIVE IT A CLASS SO IT STOPS AFFECTING OTHER PEOPLE'S CODE */
-/* input[type="text"],
-input[type="email"],
-input[type="password"] {
-  width: 100%;
-  padding: 10px 90px;
-  margin: 10px 0;
-  outline: none;
-  border-radius: 4px;
-  border: 2px solid #110f0f;
-  font-size: 16px;
-} */
-
-/* BEFORE YOU UNCOMMENT THIS CODE MAKE SURE YOU GIVE IT A CLASS SO IT STOPS AFFECTING OTHER PEOPLE'S CODE */
-/* button {
-  width: 50px 60px;
-  padding: 10px 150px;
-  border-radius: 4px;
-  border: 1px solid #0e0d0d;
-  font-size: 16px;
-  margin-top: 40px;
-} */
-
-.redirect-link {
-  margin-top: -50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-}
-
+.pharmacySignupContainer {
+  position: relative;
+  background-image: url("../assets/Background.svg");
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: -2;
+}
+
+.directionHeader {
+  top: 4em;
+  display: flex;
+  gap: 20rem;
+}
+
+/* BEFORE YOU UNCOMMENT THIS CODE MAKE SURE YOU GIVE IT A CLASS SO IT STOPS AFFECTING OTHER PEOPLE'S CODE */
+form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  width: 100%;
+  max-width: 500px;
+  margin-top: -250px;
+  background: #f9fdfd;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  z-index: -1;
+}
+
+/* BEFORE YOU UNCOMMENT THIS CODE MAKE SURE YOU GIVE IT A CLASS SO IT STOPS AFFECTING OTHER PEOPLE'S CODE */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="tel"],
+input[type="address"] {
+  width: 100%;
+  padding: 10px 90px;
+  outline: none;
+  border-radius: 4px;
+  border: 2px solid #110f0f;
+  font-size: 16px;
+}
+
+/* BEFORE YOU UNCOMMENT THIS CODE MAKE SURE YOU GIVE IT A CLASS SO IT STOPS AFFECTING OTHER PEOPLE'S CODE */
+button {
+  width: 50px 60px;
+  padding: 10px 150px;
+  border-radius: 4px;
+  border: 1px solid #0e0d0d;
+  font-size: 16px;
+  margin-top: 40px;
+}
+
+.redirectLink {
+  margin-top: -50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}