diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 8990db0..1f8e32a 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -23,9 +23,8 @@ import "../../styles/signup.scss";
 const SignupPage = () => {
   const navigate = useNavigate();
   const [notice, setNotice] = useState("");
-
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 440);
   const fieldsChunkSize = 2;
-
   const [isBusy, setIsBusy] = useState(false);
   const [data, setData] = useState(getFormDataDefaults(signupfields));
 
@@ -113,6 +112,63 @@ const SignupPage = () => {
     }
   };
 
+  const MobileForm = () => {
+    return splitEvery(
+      Object.keys(signupfields).slice(0, -2),
+      fieldsChunkSize
+    ).map((names, j) => (
+      <Col key={`row${j}`}>
+        {names.map((name, i) => (
+          <Col
+            key={`${name}${i + fieldsChunkSize * j}`}
+            className="signup-mobile-column"
+          >
+            <TextInput
+              name={name}
+              value={data[name].value}
+              onChange={(e) => handleChangeInput(e, name)}
+              error={data[name].error}
+              message={data[name].message}
+              label={
+                data[name].value.length === 0 ? signupfields[name].label : ""
+              }
+              type={signupfields[name].type}
+              values={signupfields[name].values}
+              disabled={isBusy}
+            />
+          </Col>
+        ))}
+      </Col>
+    ));
+  };
+
+  const DesktopForm = () => {
+    return splitEvery(
+      Object.keys(signupfields).slice(0, -2),
+      fieldsChunkSize
+    ).map((names, j) => (
+      <Row key={`row${j}`}>
+        {names.map((name, i) => (
+          <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
+            <TextInput
+              name={name}
+              value={data[name].value}
+              onChange={(e) => handleChangeInput(e, name)}
+              error={data[name].error}
+              message={data[name].message}
+              label={
+                data[name].value.length === 0 ? signupfields[name].label : ""
+              }
+              type={signupfields[name].type}
+              values={signupfields[name].values}
+              disabled={isBusy}
+            />
+          </Col>
+        ))}
+      </Row>
+    ));
+  };
+
   return (
     <div className="signup-super-container">
       <div className="signup-sub-container">
@@ -120,32 +176,7 @@ const SignupPage = () => {
           <h1 className="signup-header-text">Create a Novodraft account</h1>
         </div>
         <Form className="signup-form">
-          {splitEvery(
-            Object.keys(signupfields).slice(0, -2),
-            fieldsChunkSize
-          ).map((names, j) => (
-            <Row key={`row${j}`}>
-              {names.map((name, i) => (
-                <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
-                  <TextInput
-                    name={name}
-                    value={data[name].value}
-                    onChange={(e) => handleChangeInput(e, name)}
-                    error={data[name].error}
-                    message={data[name].message}
-                    label={
-                      data[name].value.length === 0
-                        ? signupfields[name].label
-                        : ""
-                    }
-                    type={signupfields[name].type}
-                    values={signupfields[name].values}
-                    disabled={isBusy}
-                  />
-                </Col>
-              ))}
-            </Row>
-          ))}
+          {isMobile ? <MobileForm /> : <DesktopForm />}
           <Row>
             <Col className="mb-3">
               <TextInput
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index cf3ac59..63c5277 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -45,3 +45,33 @@
 .signup-btn {
   width: 150px;
 }
+
+@media only screen and (max-width: 430px) {
+  .signup-sub-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 25px;
+    width: 420px;
+    border-radius: 10px;
+    background-color: rgb(240, 247, 250);
+    border: 1px solid #e9e9e9;
+  }
+  .signup-header-text {
+    font-size: 1.5rem;
+  }
+
+  .signup-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-right: auto;
+    margin-left: auto;
+    width: 390px;
+  }
+
+  .signup-mobile-column {
+    width: 340px;
+  }
+}