diff --git a/src/Components/All Routes/AllRoutes.jsx b/src/Components/All Routes/AllRoutes.jsx
index 681d4c5..9e17e40 100644
--- a/src/Components/All Routes/AllRoutes.jsx	
+++ b/src/Components/All Routes/AllRoutes.jsx	
@@ -13,7 +13,7 @@ import Profile from "../Profile/Profile";
 import Login from "../Profile/Login";
 import Supplier from "../Supplier/Supplier";
 import Footer from "../Footer/Footer";
-
+import StartSellingLogin from "../Supplier/StartSelling_LoginPage";
 export default function AllRoutes() {
   return (
     <>
@@ -26,6 +26,7 @@ export default function AllRoutes() {
         <Route path="/profile" element={<Profile />} />
         <Route path="/login" element={<Login />} />
         <Route path="/supplier" element={<Supplier />} />
+        <Route path="/StartSellingLogin" element={<StartSellingLogin />} />
       </Routes>
       <Routes>
         <Route path="/checkout" element={<Checkout />} />
diff --git a/src/Components/Supplier/StartSelling_LoginPage.css b/src/Components/Supplier/StartSelling_LoginPage.css
new file mode 100644
index 0000000..84c098e
--- /dev/null
+++ b/src/Components/Supplier/StartSelling_LoginPage.css
@@ -0,0 +1,46 @@
+.StartSelling_Main_Division {
+  display: flex;
+  justify-content: flex-start;
+  width: 100vw;
+  height: 100vh;
+  border: 2px solid red;
+}
+.StartSelling_Login_First_Div_Meesho_Background {
+  height: 100%;
+  width: 50%;
+}
+.StartSelling_Login_First_Div_image {
+  height: 100%;
+  width: 100%;
+}
+.StartSellingLoginForm {
+  display: flex;
+  justify-content: center;
+  width: 50%;
+}
+.StartSellingLoginForm_Box {
+  text-align: center;
+  border: 2px solid whitesmoke;
+  width: 80%;
+  height: 70%;
+  margin-top: 10%;
+}
+.StartSellingLoginForm_Email {
+  text-align: center;
+  min-width: 80%;
+  min-height: 3rem;
+  margin-bottom: 10%;
+}
+.LoginForm_Submission {
+  display: flex;
+  justify-content: space-evenly;
+}
+.Blue-colour-text {
+  color: rgb(55, 43, 226);
+}
+.Login_FormSubmit {
+  background-color: rgb(75, 75, 134);
+  color: white;
+  min-width: 5rem;
+  min-height: 2.2rem;
+}
diff --git a/src/Components/Supplier/StartSelling_LoginPage.jsx b/src/Components/Supplier/StartSelling_LoginPage.jsx
new file mode 100644
index 0000000..6891d60
--- /dev/null
+++ b/src/Components/Supplier/StartSelling_LoginPage.jsx
@@ -0,0 +1,70 @@
+import React from "react";
+import meesho from "./meesho_full_background.jpg";
+import "./StartSelling_LoginPage.css";
+import { useState } from "react";
+const StartSellingLogin = () => {
+  let success = "Login Successful!";
+  let fail = "Login Failed Please Enter the Correct Details";
+  const [email, setEmail] = useState("");
+  const [pass, setPass] = useState("");
+  const myFunction = () => {
+    var x = document.getElementById("myInput");
+    if (x.type === "password") {
+      x.type = "text";
+    } else {
+      x.type = "password";
+    }
+  };
+  const handleSubmit = e => {
+    e.preventDefault();
+    let mail = localStorage.getItem("Email").replace(/"/g, "");
+    let pa = localStorage.getItem("Password").replace(/"/g, "");
+    alert(pass == pa && mail == email ? success : fail);
+  };
+  return (
+    <div className="StartSelling_Main_Division">
+      <div className="StartSelling_Login_First_Div_Meesho_Background">
+        <img
+          src={meesho}
+          alt=""
+          className="StartSelling_Login_First_Div_image"
+        ></img>
+      </div>
+      <div className="StartSellingLoginForm">
+        <div className="StartSellingLoginForm_Box">
+          <form onSubmit={handleSubmit}>
+            <h2>Login to your supplier panel</h2>
+            <br />
+            <input
+              type="email"
+              className="StartSellingLoginForm_Email"
+              placeholder="Email"
+              value={email}
+              onChange={event => setEmail(event.target.value)}
+            />
+            <br />
+            <input
+              type="password"
+              id="myInput"
+              className="StartSellingLoginForm_Email"
+              placeholder="Password"
+              value={pass}
+              onChange={event => setPass(event.target.value)}
+            />
+            <br />
+            <input type="checkbox" onClick={myFunction} />
+            Show Password
+            <br />
+            <br />
+            <br />
+            <div className="LoginForm_Submission">
+              <div className="Blue-colour-text">Forgot Password ?</div>
+              <button className="Login_FormSubmit">Log In</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default StartSellingLogin;
diff --git a/src/Components/Supplier/Supplier.jsx b/src/Components/Supplier/Supplier.jsx
index e9e52a2..7f23d77 100644
--- a/src/Components/Supplier/Supplier.jsx
+++ b/src/Components/Supplier/Supplier.jsx
@@ -6,6 +6,8 @@ import img3 from "./main-img-3.png";
 import img4 from "./main-img-4.png";
 import img5 from "./main-img-5.png";
 import numimg from "./numbers.png";
+import SupplierForm from "./SupplierForm";
+
 import "./supplier.css";
 let images = [img1, img1, img2, img3, img4, img5];
 let data = [
@@ -42,6 +44,7 @@ let data = [
 ];
 export default function Supplier() {
   let [ind, setInd] = React.useState(0);
+  let [show, setShow] = React.useState(true);
   return (
     <>
       <main id="supplier-navigation">
@@ -70,26 +73,36 @@ export default function Supplier() {
             <p onClick={() => setInd(4)}> Shipping &amp; Returns</p>
             <p onClick={() => setInd(5)}>Grow Business</p>
           </div>
-          <button>Login</button>
-          <button>Start Selling</button>
+          <Link to="/StartSellingLogin">
+            <button>Login</button>
+          </Link>
+          <button onClick={() => setShow(!show)}>Start Selling</button>
         </nav>
         <h1>Meesho Supplier Page</h1>
       </main>
-      <article id="supplier-form">
-        <div>
-          {" "}
-          <h1>
-            {data[ind][0]} <span>{data[ind][1]}</span>
-          </h1>
-          <p style={{ lineHeight: "150%", fontSize: "14px" }}>{data[ind][2]}</p>
-          <p id="form-para">
-            +91 <input type="text" placeholder="Enter Your Mobile Number" />{" "}
-            <button>Start Selling</button>
-          </p>
-        </div>
-        <img src={images[ind]} alt="" />
-      </article>
-      <img src={numimg} alt="" />
+      {show ? (
+        <>
+          <article id="supplier-form">
+            <div>
+              {" "}
+              <h1>
+                {data[ind][0]} <span>{data[ind][1]}</span>
+              </h1>
+              <p style={{ lineHeight: "150%", fontSize: "14px" }}>
+                {data[ind][2]}
+              </p>
+              <p id="form-para">
+                +91 <input type="text" placeholder="Enter Your Mobile Number" />{" "}
+                <button>Start Selling</button>
+              </p>
+            </div>
+            <img src={images[ind]} alt="" />
+          </article>
+          <img src={numimg} alt="" />{" "}
+        </>
+      ) : (
+        <SupplierForm />
+      )}
     </>
   );
 }
diff --git a/src/Components/Supplier/SupplierForm.jsx b/src/Components/Supplier/SupplierForm.jsx
new file mode 100644
index 0000000..ec2186a
--- /dev/null
+++ b/src/Components/Supplier/SupplierForm.jsx
@@ -0,0 +1,208 @@
+import React from "react";
+import { FaLock } from "react-icons/fa";
+import styled from "styled-components";
+import img from "./form-img.png";
+
+export default function SupplierForm() {
+  let [inp, setInp] = React.useState("");
+  const inpHandler = e => {
+    if (inp === "") {
+      setInp("+91 - " + e.target.value);
+      return;
+    }
+    setInp(e.target.value);
+  };
+  console.log(inp.length);
+  return (
+    <>
+      <Section>
+        <article id="first-article">
+          <form action="">
+            <h1 id="selling-form-h1">Welcome to Meesho</h1>
+            <p>Create your account to start selling</p>
+            <div id="selling-form-inp">
+              <input
+                type="text"
+                placeholder="Mobile Number"
+                value={inp}
+                onChange={inpHandler}
+                maxLength={16}
+              />
+              <button className={inp.length > 15 ? "active" : ""}>
+                Send OTP
+              </button>
+            </div>
+            <input type="text" placeholder="Enter OTP" className="input-text" />
+            <input type="text" placeholder="Email ID" className="input-text" />
+            <div id="selling-form-password">
+              <input type="password" placeholder="Set Password" />
+              <FaLock />
+            </div>
+            <ul>
+              <li>Minimum 8 Characters</li>
+              <li>1 Special Characters (@#$%!^&amp;*)</li>
+              <li>1 Capital letter</li>
+              <li>1 Number</li>
+            </ul>
+            <input type="checkbox" name="box" id="box" />{" "}
+            <label htmlFor="box">
+              I want to receive important updates on <span>Whatsapp</span>
+            </label>
+            <button>Create Account</button>
+            <p>
+              By clicking you agree to our <span>Terms &amp; Conditions</span>{" "}
+              and <span>Privacy Policy</span>
+            </p>
+          </form>
+        </article>
+        <article id="second-article">
+          <h3>Grow your business faster by selling on Meesho</h3>
+          <img src={img} alt="" />
+          <h4>All you need to sell on Meesho is </h4>
+          <p>
+            <svg
+              stroke="currentColor"
+              fill="currentColor"
+              stroke-width="0"
+              viewBox="0 0 1024 1024"
+              height="1em"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+              style={{ color: "rgb(56, 185, 122)", fontSize: "20px" }}
+            >
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path>
+            </svg>
+            GSTIN
+          </p>
+          <p>
+            {" "}
+            <svg
+              stroke="currentColor"
+              fill="currentColor"
+              stroke-width="0"
+              viewBox="0 0 1024 1024"
+              height="1em"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+              style={{ color: "rgb(56, 185, 122)", fontSize: "20px" }}
+            >
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path>
+            </svg>
+            Bank Account
+          </p>
+        </article>
+      </Section>
+      <img
+        src="https://supplier.meesho.com/panel/v2/new/static/c1763d1ca9a9043ec6abf7c8b0802a9f.png"
+        alt=""
+        id="footer-image"
+      />
+    </>
+  );
+}
+
+let Section = styled.section`
+  display: flex;
+  position: relative;
+  justify-content: space-evenly;
+  padding: 50px;
+  flex-wrap: wrap;
+  + #footer-image {
+    height: 150px;
+    width: 99vw;
+  }
+  article {
+    width: 420px;
+    padding: 10px;
+    margin: 0 50px;
+    #selling-form-h1 {
+      font-size: 28px;
+      + p {
+        font-size: 14.5px;
+        margin: 8px 0 15px;
+      }
+    }
+    #selling-form-inp {
+      display: flex;
+      margin: 12px 0;
+      button {
+        color: #f43397;
+        background-color: #fff;
+        border: 1px solid #f43397;
+        padding: 7px 10px;
+      }
+    }
+    #selling-form-inp input {
+      flex-grow: 1;
+      margin-right: 15px;
+      padding: 7px 9px;
+    }
+    .input-text {
+      width: 94.6%;
+      padding: 7px 9px;
+      margin: 12px 0;
+    }
+    #selling-form-password {
+      border: 1px solid #000;
+      /* width: 79.2%; */
+      padding: 8px 9px;
+      margin: 12px 0;
+      display: flex;
+      input {
+        border: none;
+        flex-grow: 1;
+        &:focus {
+          outline: none;
+        }
+      }
+    }
+  }
+  ul {
+    font-size: 13px;
+    padding-left: 20px;
+    margin-bottom: 12px;
+    li {
+      margin: 7px 0;
+    }
+  }
+
+  #box + label {
+    font-size: 14px;
+    span {
+      color: #f43397;
+      font-weight: bold;
+    }
+  }
+  label + button {
+    margin: 50px 0 15px;
+    width: 100%;
+    font-weight: 500;
+    padding: 13px 0;
+    color: white;
+    background-color: #f43397;
+    border: none;
+    + p {
+      font-size: 10px;
+      text-align: center;
+      span {
+        color: #f43397;
+        font-weight: 500;
+      }
+    }
+  }
+  .active {
+    background-color: #f43397 !important;
+    color: white !important;
+  }
+  img {
+    width: 140%;
+    margin: 50px 0;
+  }
+  h4 {
+    margin: 15px 0;
+  }
+  p > svg {
+    margin-right: 10px;
+    transform: translateY(4px);
+  }
+`;
diff --git a/src/Components/Supplier/form-img.png b/src/Components/Supplier/form-img.png
new file mode 100644
index 0000000..285ff05
Binary files /dev/null and b/src/Components/Supplier/form-img.png differ
diff --git a/src/Components/Supplier/meesho_full_background.jpg b/src/Components/Supplier/meesho_full_background.jpg
new file mode 100644
index 0000000..c7a1d83
Binary files /dev/null and b/src/Components/Supplier/meesho_full_background.jpg differ