diff --git a/src/components/Navbar/signup/FormInput.js b/src/components/Navbar/signup/FormInput.js
index ff7ec946..bd19e140 100644
--- a/src/components/Navbar/signup/FormInput.js
+++ b/src/components/Navbar/signup/FormInput.js
@@ -12,7 +12,7 @@ function FormInput({ name, label,inputType, validation  }) {
     const password = watch("password");
 
     return (
-        <div className={`${name}-container`}>
+        <div className="{`${name}-container`} text-center md:text-left">
             <label className="form__label" htmlFor={name}>
                 {label}
             </label>
diff --git a/src/components/Navbar/signup/SignUpForm.js b/src/components/Navbar/signup/SignUpForm.js
index 589cbf5d..02c646e1 100644
--- a/src/components/Navbar/signup/SignUpForm.js
+++ b/src/components/Navbar/signup/SignUpForm.js
@@ -1,3 +1,4 @@
+
 import React from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
@@ -14,7 +15,7 @@ function SignUpForm() {
     };
 
     return (
-        <div className="form">
+        <div className="form ">
             <FormProvider {...methods}>
                 <form onSubmit={methods.handleSubmit(onSubmit)} className="form-body">
                     <FormInput
@@ -49,8 +50,8 @@ function SignUpForm() {
                             validate: (value) => value === methods.watch("password") || "Passwords do not match",
                         }}
                     />
-                    <div className="footer">
-                        <button className="submit btn" type="submit">Submit</button>
+                    <div className="footer flex flex-col md:flex-row md:items-center justify-between">
+                        <button className="submit btn mb-4 md:mb-0 md:mr-4" type="submit">Submit</button>
                         <button className="login btn" onClick={() => navigate('/')}>Login</button>
                     </div>
                 </form>
@@ -62,4 +63,3 @@ function SignUpForm() {
 export default SignUpForm;
 
 
-
diff --git a/src/components/Navbar/signup/index.js b/src/components/Navbar/signup/index.js
index e13b9a3a..133d7112 100644
--- a/src/components/Navbar/signup/index.js
+++ b/src/components/Navbar/signup/index.js
@@ -4,15 +4,15 @@ import './style.css'
 
 
 function SignUp() {
+
+
   return (
     <div>
       <header className="header" style={{ height: "25vh" }}>
-        <span><h1 className="head">Welcome To Jira App</h1></span>
-        <span>
-          <h2 className="head">Sign Up</h2>
+        <span className="flex flex-col items-center h-full justify-center">
+          <h1 className="text-2xl font-semibold mb-4">Welcome To Jira App</h1>
+          <h2 className="text-2xl font-semibold  text-blue-500">Sign Up</h2>
         </span>
-
-
       </header>
       <SignUpForm />
     </div>
diff --git a/src/pages/loginpage/index.js b/src/pages/loginpage/index.js
index 25a042f8..9d23bf4b 100644
--- a/src/pages/loginpage/index.js
+++ b/src/pages/loginpage/index.js
@@ -33,12 +33,12 @@ const LoginPage = () => {
   };
 
   return (
-    <div className="login-container">
+    <div className="login-container flex justify-center items-center h-screen ">
       <h1> {language === 'en' ? 'Login to Jira' : 'Connexion à Jira'}</h1>
 
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit(onSubmit)}>
-          <FormInput
+          <FormInput className = " text-center md:text-left"
             name="username"
             label={language === 'en' ? 'Username:' : 'Nom d\'utilisateur :'}
             validation={{