diff --git a/src/pages/LoginPage/Login.tsx b/src/pages/LoginPage/Login.tsx
index 7f19f1f..e5346cf 100644
--- a/src/pages/LoginPage/Login.tsx
+++ b/src/pages/LoginPage/Login.tsx
@@ -57,72 +57,73 @@ export default () => {
   return (
     <>
       <Page alignment="column">
-        <Row content="split">
-          <Link to="/">
-            <Row content="left" gap={2}>
-              <Logo size={200} />
-              <h1>OCBO e-Sign</h1>
-            </Row>
-          </Link>
-
-          <Link to="/">
-            <Row content="right">
-              <IoChevronBack size={45} />
-              <span class="back-button-text">Back</span>
-            </Row>
-          </Link>
-        </Row>
-
-        <Padding top={2} left={0} right={0} bottom={0}>
-          <Row>
-            <Box curved thickness={2} padding={2} color="#2f465cd7" background="#04040642">
-              <Row>
-                <span
-                  class="box-title"
-                  onClick={() => {
-                    console.log(name())
-                  }}
-                >
-                  Login
-                </span>
+        <Padding left={4.75} right={4.75} top={0} bottom={0}>
+          <Row content="split">
+            <Link to="/">
+              <Row content="left" gap={2}>
+                <Logo size={200} />
+                <h1>OCBO e-Sign</h1>
               </Row>
+            </Link>
 
-              <Padding top={2} left={2} right={2} bottom={0}>
-                <Row>
-                  <Radio data={roles} value={role()} onChange={setRole} gap={10} />
-                </Row>
-              </Padding>
-              <h4>Name</h4>
-              <Show when={role() !== 'Approver'}>
-                <Combobox options={assessors} placeholder="Select your name" value={name()} onChange={setName} />
-              </Show>
-              <Show when={role() === 'Approver'}>
-                <span class="approver-name">{APPROVERNAME}</span>
-              </Show>
-              <h4>Password</h4>
-              <Input value={password()} onChange={setPassword}></Input>
-
-              <Padding top={2} left={0} right={0} bottom={0}>
-                <Show when={password() && name()}>
-                  <Row>
-                    <Button edges="curved" design="bo-primary" label="Login" wide onClick={login}></Button>
-                  </Row>
-                </Show>
-
-                <Show when={!password() && name()}>
-                  <Row>
-                    <span class="required">Required password</span>
-                  </Row>
-                </Show>
-
-                <Show when={!password() && !name()}>
-                  <Row>
-                    <span class="required">Required name and password</span>
-                  </Row>
-                </Show>
-              </Padding>
-            </Box>
+            <Link to="/">
+              <Row content="right">
+                <IoChevronBack size={45} />
+                <span class="back-button-text">Back</span>
+              </Row>
+            </Link>
           </Row>
+
+          <Padding top={2} left={0} right={0} bottom={0}>
+            <Row>
+              <Box curved thickness={2} padding={2} color="#2f465cd7" background="#04040654">
+                <Row>
+                  <span class="box-title">Login</span>
+                </Row>
+
+                <Padding top={2} left={2} right={2} bottom={0}>
+                  <Row>
+                    <Radio data={roles} value={role()} onChange={setRole} gap={10} />
+                  </Row>
+                </Padding>
+                <h4>Name</h4>
+                <Show when={role() !== 'Approver'}>
+                  <Combobox options={assessors} placeholder="Select your name" value={name()} onChange={setName} />
+                </Show>
+                <Show when={role() === 'Approver'}>
+                  <span class="approver-name">{APPROVERNAME}</span>
+                </Show>
+                <h4>Password</h4>
+                <Input value={password()} onChange={setPassword}></Input>
+
+                <Padding top={2} left={0} right={0} bottom={0}>
+                  <Show when={password() && name()}>
+                    <Row>
+                      <Button edges="curved" design="bo-primary" label="Login" wide onClick={login}></Button>
+                    </Row>
+                  </Show>
+
+                  <Show when={!password() && name()}>
+                    <Row>
+                      <span class="required">Required password</span>
+                    </Row>
+                  </Show>
+
+                  <Show when={!password() && !name()}>
+                    <Row>
+                      <span class="required">Required name and password</span>
+                    </Row>
+                  </Show>
+
+                  <Show when={password() && !name()}>
+                    <Row>
+                      <span class="required">Required name</span>
+                    </Row>
+                  </Show>
+                </Padding>
+              </Box>
+            </Row>
+          </Padding>
         </Padding>
       </Page>
 
diff --git a/src/pages/RegisterPage/Register.tsx b/src/pages/RegisterPage/Register.tsx
index b1cbda5..43ddf86 100644
--- a/src/pages/RegisterPage/Register.tsx
+++ b/src/pages/RegisterPage/Register.tsx
@@ -161,7 +161,7 @@ export default () => {
 
           <Padding top={2} left={0} right={0} bottom={0}>
             <Row>
-              <Box curved thickness={2} padding={2} color="#2f465cd7" background="#04040642">
+              <Box curved thickness={2} padding={2} color="#2f465cd7" background="#04040654">
                 <Row>
                   <span class="box-title">Registration</span>
                 </Row>
@@ -202,19 +202,19 @@ export default () => {
 
                       <Show when={!file() && !password()}>
                         <Row>
-                          <span class="already-registered">Need password and signature</span>
+                          <span class="already-registered">Required password and signature</span>
                         </Row>
                       </Show>
 
                       <Show when={file() && !password()}>
                         <Row>
-                          <span class="already-registered">Need password</span>
+                          <span class="already-registered">Required password</span>
                         </Row>
                       </Show>
 
                       <Show when={!file() && password()}>
                         <Row>
-                          <span class="already-registered">Need signature</span>
+                          <span class="already-registered">Required signature</span>
                         </Row>
                       </Show>
                     </Padding>
@@ -261,7 +261,7 @@ export default () => {
 
                       <Show when={!file()}>
                         <Row>
-                          <span class="already-registered">Need signature</span>
+                          <span class="already-registered">Required signature</span>
                         </Row>
                       </Show>
                     </Padding>