diff --git a/com-dict-client/src/components/Login/index.js b/com-dict-client/src/components/Login/index.js
index 370d313..b4f448a 100644
--- a/com-dict-client/src/components/Login/index.js
+++ b/com-dict-client/src/components/Login/index.js
@@ -92,26 +92,29 @@ function App(props) {
                 backgroundColor: "#FFFFFF ",
                 border: 0,
                 padding: "1vmin",
-                width: "100%",
+                width: "100%"
               }}
               headStyle={{
                 backgroundColor: "#FFFFFF ",
                 fontSize: "6vmin",
                 color: "#black",
                 border: 0,
-                textAlign: "center",
+                textAlign: "left",
+                paddingLeft: "28%"
+
               }}
               bodyStyle={{ backgroundColor: "#FFFFFF", border: 0 }}
             >
-              <NormalLoginForm />
-
+              <div style={{marginLeft: "16%"}}>
+              <NormalLoginForm/>
+              </div>
               <Divider> OR </Divider>
 
               <SocialLogin />
             </Card>
 
             <div style={{ textAlign: "center" }}>
-              <Text strong>Don't have an account?</Text>
+              <Text strong>Don't have an account?&nbsp;</Text>
               <a href="/signup">Sign Up here</a>
             </div>
           </Col>
diff --git a/com-dict-client/src/components/Login/loginForm.js b/com-dict-client/src/components/Login/loginForm.js
index aa8be62..e20bebe 100644
--- a/com-dict-client/src/components/Login/loginForm.js
+++ b/com-dict-client/src/components/Login/loginForm.js
@@ -23,9 +23,11 @@ const NormalLoginForm = () => {
         remember: true,
       }}
       onFinish={onSubmit}
+      style={{width: '80%',margin:' 0 10%'}}
     >
       <Form.Item
         name="email"
+        style={{width: '80%'}}
         rules={[
           {
             required: true,
@@ -40,6 +42,7 @@ const NormalLoginForm = () => {
       </Form.Item>
       <Form.Item
         name="password"
+        style={{width: '80%'}}
         rules={[
           {
             required: true,
@@ -53,18 +56,18 @@ const NormalLoginForm = () => {
           placeholder="Password"
         />
       </Form.Item>
-      <Form.Item>
+      <Form.Item style={{marginLeft:'20px'}}>
         <Form.Item name="remember" valuePropName="checked" noStyle>
           <Checkbox>Remember me</Checkbox>
         </Form.Item>
 
-        <a href="#1" className="login-form-forgot">
+        <a href="#1" className="login-form-forgot" style={{marginRight:'120px'}}>
           Forgot password
         </a>
       </Form.Item>
 
-      <Form.Item>
-        <Button type="primary" htmlType="submit" className="login-form-button">
+      <Form.Item style={{textAlign:'center',paddingRight: "20%"}}>
+        <Button type="primary" htmlType="submit" className="login-form-button" style={{maxWidth: '200px',width:'50%',paddingBottom:'10px',borderRadius:'10px',}}>
           Sign in
         </Button>
       </Form.Item>
diff --git a/com-dict-client/src/components/Login/socialLogin.js b/com-dict-client/src/components/Login/socialLogin.js
index c77d20e..54b9976 100644
--- a/com-dict-client/src/components/Login/socialLogin.js
+++ b/com-dict-client/src/components/Login/socialLogin.js
@@ -24,9 +24,9 @@ function SocialLogin() {
     await signInWithProviderID(provider)(firebase, history);
   };
   return (
-    <div>
+    <div style={{width:'80%',paddingLeft:'20%' }}>
       <Row gutter={[16, 16]}>
-        <Col span={24} style={{ textAlign: "center" }}>
+        <Col span={24} style={{ textAlign: "center",paddingBottom:'5px' }}>
           <Text strong>Login using your social media account</Text>
         </Col>
       </Row>
@@ -38,11 +38,11 @@ function SocialLogin() {
           md={24}
           sm={24}
           xs={24}
-          style={{ textAlign: "center" }}
+          style={{ textAlign: "center"}}
         >
           <Button
             className="social_btn"
-            style={{ backgroundColor: "#0284E1", width: "100%" }}
+            style={{ backgroundColor: "#0284E1", width: "80%",paddingBottom:'10px',borderRadius:'10px' }}
             icon={<FacebookFilled />}
             // size="large"
             onClick={() => loginWithProviderID("facebook")}
@@ -60,7 +60,7 @@ function SocialLogin() {
         >
           <Button
             className="social_btn"
-            style={{ backgroundColor: "#64CFF6", width: "100%" }}
+            style={{ backgroundColor: "#64CFF6", width: "80%",paddingBottom:'10px',borderRadius:'10px'}}
             icon={<TwitterOutlined />}
             // size="large"
             onClick={() => loginWithProviderID("twitter")}
@@ -78,7 +78,7 @@ function SocialLogin() {
         >
           <Button
             className="social_btn"
-            style={{ backgroundColor: "#F4414B", width: "100%" }}
+            style={{ backgroundColor: "#F4414B", width: "80%",paddingBottom:'10px',borderRadius:'10px'}}
             icon={<GoogleOutlined />}
             onClick={loginWithGoogle}
             // size="large"
diff --git a/com-dict-client/src/components/Signup/SignUp.js b/com-dict-client/src/components/Signup/SignUp.js
index b190fc9..7c973b2 100644
--- a/com-dict-client/src/components/Signup/SignUp.js
+++ b/com-dict-client/src/components/Signup/SignUp.js
@@ -86,7 +86,7 @@ const RegistrationForm = () => {
     <Row>
       <Row>
         <Col span={1}></Col>
-        <Col span={23}>
+        <Col span={20} style={{ textAlign: "center" }}>
           <span style={{ textAlign: "center" }}>
             <Title level={1}>BECOME A PART OF OUR COMMUNITY TODAY!!!</Title>
           </span>
@@ -98,7 +98,7 @@ const RegistrationForm = () => {
           <Row align="middle">
             <img
               alt="signup"
-              style={{ maxWidth: "120%", paddingTop: "5%" }}
+              style={{ maxWidth: "120%", paddingTop: "5%",paddingLeft: "25%" }}
               src={signup}
             />
           </Row>
@@ -113,6 +113,7 @@ const RegistrationForm = () => {
             name="register"
             onFinish={onFinish}
             scrollToFirstError
+            style={{ maxWidth: "80%",marginLeft:'30%'}}
           >
             <Form.Item
               name="email"
@@ -235,12 +236,13 @@ const RegistrationForm = () => {
 
             <Row gutter={8}>
               <Col span={6}></Col>
-              <Col span={18}>
-                <Form.Item>
+              <Col span={10}>
+                <Form.Item style={{textAlign:'center'}}>
                   <Button
                     type="primary"
                     htmlType="submit"
                     className="register-form-button"
+                    style={{borderRadius: '5px',padding:'5px',textAlign: 'center'}}
                   >
                     Register
                   </Button>
diff --git a/com-dict-client/src/components/Signup/index.js b/com-dict-client/src/components/Signup/index.js
index 917dc0b..05215e5 100644
--- a/com-dict-client/src/components/Signup/index.js
+++ b/com-dict-client/src/components/Signup/index.js
@@ -50,7 +50,7 @@ const formItemLayout = {
       span: 16,
     },
     lg: {
-      span: 18,
+      span: 2,
     },
   },
 };
@@ -96,16 +96,16 @@ const RegistrationForm = () => {
           </span>
         </Col>
       </Row>
-      <Row style={{ paddingTop: "3vmin" }}>
+      <Row style={{ paddingTop: "3vmin",textAlign:'center' }}>
         <Col xl={1} lg={0}></Col>
         <Col xl={7} lg={8} md={0} sm={0} xs={0} style={{ textAlign: "center" }}>
           <Row align="middle">
-            <img style={{ maxWidth: "120%", paddingTop: "5%" }} src={signup} />
+            <img style={{ maxWidth: "120%", paddingTop: "50% !important"  }} src={signup} alt='signup'/>
           </Row>
         </Col>
         <Col xl={0} lg={1} md={1} sm={1} xs={1}></Col>
         <Row></Row>
-        <Col xl={14} lg={12} md={22} sm={22} xs={22}>
+        <Col xl={10} lg={2} md={2} sm={2} xs={2}>
           <Form
             {...formItemLayout}
             form={form}
@@ -116,6 +116,7 @@ const RegistrationForm = () => {
             <Form.Item
               name="email"
               label="E-mail"
+              style={{ maxWidth: "1%"}}
               rules={[
                 {
                   type: "email",
@@ -127,7 +128,7 @@ const RegistrationForm = () => {
                 },
               ]}
             >
-              <Input />
+              <Input style={{ maxWidth: "1%"}}/>
             </Form.Item>
 
             <Form.Item
diff --git a/com-dict-client/src/containers/home/arrow.css b/com-dict-client/src/containers/home/arrow.css
index fbc4b05..cfe3b23 100644
--- a/com-dict-client/src/containers/home/arrow.css
+++ b/com-dict-client/src/containers/home/arrow.css
@@ -1,63 +1,62 @@
 .arrows {
-    position: relative;
-    width: 12vmin;
-    height: 12vmin;
-    transform: translate(-50%, -50%);
+  position: relative;
+  width: 12vmin;
+  height: 12vmin;
+  transform: translate(-50%, -50%);
+}
+
+.arrows:before {
+  content: '';
+  position: absolute;
+  margin-top: 10vmin;
+  width: 100%;
+  height: 100%;
+  border-left: 26.66667px solid rgba(0, 0, 0, 0.7);
+  border-bottom: 26.66667px solid rgba(0, 0, 0, 0.7);
+  transform: translate(26.66667px, 106.66667px) rotate(-45deg);
+  animation: arrows 2s linear infinite;
+}
+
+.arrows:after {
+  content: '';
+  position: absolute;
+  margin-top: 10vmin;
+  width: 100%;
+  height: 100%;
+  border-left: 26.66667px solid rgba(0, 0, 0, 0.7);
+  border-bottom: 26.66667px solid rgba(0, 0, 0, 0.7);
+  transform: translate(53.33333px, 0px) rotate(-45deg);
+  animation: arrows 2s linear infinite -1s;
+}
+
+@keyframes arrows {
+  0% {
+    border-left: 26.66667px solid transparent;
+    border-bottom: 26.66667px solid transparent;
+    transform: translate(-13.33333px, -53.33333px) rotate(-45deg);
   }
-  
-  .arrows:before {
-    content: '';
-    position: absolute;
-    margin-top: 10vmin;
-    width: 100%;
-    height: 100%;
-    border-left: 26.66667px solid rgba(0, 0, 0, 0.7);
-    border-bottom: 26.66667px solid rgba(0, 0, 0, 0.7);
-    transform: translate(26.66667px, 106.66667px) rotate(-45deg);
-    animation: arrows 2s linear infinite;
+  10%, 90% {
+    border-left: 26.66667px solid transparent;
+    border-bottom: 26.66667px solid transparent;
   }
-  
-  .arrows:after {
-    content: '';
-    position: absolute;
-    margin-top: 10vmin;
-    width: 100%;
-    height: 100%;
+  50% {
     border-left: 26.66667px solid rgba(0, 0, 0, 0.7);
     border-bottom: 26.66667px solid rgba(0, 0, 0, 0.7);
-    transform: translate(53.33333px, 0px) rotate(-45deg);
-    animation: arrows 2s linear infinite -1s;
+    transform: translate(-13.33333px, 0px) rotate(-45deg);
   }
-  
-  @keyframes arrows {
-    0% {
-      border-left: 26.66667px solid transparent;
-      border-bottom: 26.66667px solid transparent;
-      transform: translate(-13.33333px, -53.33333px) rotate(-45deg);
-    }
-    10%, 90% {
-      border-left: 26.66667px solid transparent;
-      border-bottom: 26.66667px solid transparent;
-    }
-    50% {
-      border-left: 26.66667px solid rgba(0, 0, 0, 0.7);
-      border-bottom: 26.66667px solid rgba(0, 0, 0, 0.7);
-      transform: translate(-13.33333px, 0px) rotate(-45deg);
-    }
-    100% {
-      border-left: 26.66667px solid transparent;
-      border-bottom: 26.66667px solid transparent;
-      transform: translate(-13.33333px, 53.33333px) rotate(-45deg);
-    }
+  100% {
+    border-left: 26.66667px solid transparent;
+    border-bottom: 26.66667px solid transparent;
+    transform: translate(-13.33333px, 53.33333px) rotate(-45deg);
   }
+}
 
-  #rotate-text {
-    padding-top: 20vmin;
-    margin-left: -30vmin;
-    line-height: 2vmin;
-    width: 40vmin;
-    /* display:block; */
-    transform: rotate(-90deg); 
-    transform: rotate(-90deg); 
- }
- 
\ No newline at end of file
+#rotate-text {
+  padding-top: 20vmin;
+  margin-left: -30vmin;
+  line-height: 2vmin;
+  width: 40vmin;
+  /* display:block; */
+  transform: rotate(-90deg); 
+  transform: rotate(-90deg); 
+}