diff --git a/src/app/login/login.css b/src/app/login/login.css
new file mode 100644
index 0000000..6828469
--- /dev/null
+++ b/src/app/login/login.css
@@ -0,0 +1,196 @@
+
+*{
+    margin: 0px;
+    padding: 0px;
+}
+
+.area{
+    background: #4e54c8;  
+    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
+    width: 100%;
+    height:100vh;
+    
+   
+}
+
+.circles{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.circles li{
+    position: absolute;
+    display: block;
+    list-style: none;
+    width: 20px;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.2);
+    animation: animate 25s linear infinite;
+    bottom: -150px;
+    
+}
+
+.circles li:nth-child(1){
+    left: 25%;
+    width: 80px;
+    height: 80px;
+    animation-delay: 0s;
+}
+
+
+.circles li:nth-child(2){
+    left: 10%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 2s;
+    animation-duration: 12s;
+}
+
+.circles li:nth-child(3){
+    left: 70%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 4s;
+}
+
+.circles li:nth-child(4){
+    left: 40%;
+    width: 60px;
+    height: 60px;
+    animation-delay: 0s;
+    animation-duration: 18s;
+}
+
+.circles li:nth-child(5){
+    left: 65%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 0s;
+}
+
+.circles li:nth-child(6){
+    left: 75%;
+    width: 110px;
+    height: 110px;
+    animation-delay: 3s;
+}
+
+.circles li:nth-child(7){
+    left: 35%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 7s;
+}
+
+.circles li:nth-child(8){
+    left: 50%;
+    width: 25px;
+    height: 25px;
+    animation-delay: 15s;
+    animation-duration: 45s;
+}
+
+.circles li:nth-child(9){
+    left: 20%;
+    width: 15px;
+    height: 15px;
+    animation-delay: 2s;
+    animation-duration: 35s;
+}
+
+.circles li:nth-child(10){
+    left: 85%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 0s;
+    animation-duration: 11s;
+}
+
+
+
+@keyframes animate {
+
+    0%{
+        transform: translateY(0) rotate(0deg);
+        opacity: 1;
+        border-radius: 0;
+    }
+
+    100%{
+        transform: translateY(-1000px) rotate(720deg);
+        opacity: 0;
+        border-radius: 50%;
+    }
+
+}
+
+.login_background {
+  background-color: #fff;
+  display: block;
+  padding: 1rem;
+  max-width: 350px;
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.form-title {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+  text-align: center;
+  color: #000;
+}
+
+.input-container {
+  position: relative;
+}
+
+.input-container input, .form button {
+  outline: none;
+  border: 1px solid #0b0b0c;
+  margin: 8px 0;
+}
+
+.input-container input {
+  background-color: #161616;
+  padding: 1rem;
+  padding-right: 3rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  width: 300px;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.submit {
+  display: block;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  background-color: #030303;
+  color: #ffffff;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  width: 100%;
+  border-radius: 0.5rem;
+  text-transform: uppercase;
+}
+.signup-link {
+  color: #6B7280;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  text-align: center;
+}
+
+.signup-link a {
+  text-decoration: underline;
+}
+
+
+
diff --git a/src/app/login/page.js b/src/app/login/page.js
index fbc2ffe..51cbe77 100644
--- a/src/app/login/page.js
+++ b/src/app/login/page.js
@@ -5,6 +5,8 @@ import { useRouter } from "next/navigation";
 import styles from "../../app/page.module.css";
 import { useAuthContext } from "@/context/AuthContext";
 import Link from "next/link";
+import "./login.css";
+
 
 const LoginPage = () => {
   const [email, setEmail] = React.useState("");
@@ -31,11 +33,27 @@ const LoginPage = () => {
   };
 
   return (
-    <main className={styles.main}>
-      <div className="wrapper">
-        <div className="form-wrapper">
-          <h1 className="mt-60 mb-30">Login</h1>
+    <div className="area">
+      <ul className="circles">
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    </ul>
+              <main className={styles.main}>
+     <div className="login_background">
+      <p class="form-title">Logohu tek llogaria</p>
+      
+      
+          
           <form onSubmit={handleForm} className="form">
+          <div class="input-container">
             <label htmlFor="email">
               <p>Email</p>
               <input
@@ -46,7 +64,10 @@ const LoginPage = () => {
                 id="email"
                 placeholder="example@mail.com"
               />
+             
             </label>
+            </div>
+            <div class="input-container">
             <label htmlFor="password">
               <p>Password</p>
               <input
@@ -58,16 +79,22 @@ const LoginPage = () => {
                 placeholder="password"
               />
             </label>
-            <button type="submit">Log in</button>
+            </div>
+            <button type="submit" className="submit">Log in</button>
             <Link href="/"> Faqja Kryesore </Link> <br /> <br />
+            <p class="signup-link">
             <Link href="/register">
               Nuk ke akoma llogari? Regjistrohu pra ca pret{" "}
             </Link>
+            </p>
           </form>
         </div>
-      </div>
+      
+     
     </main>
+    </div>
   );
+ 
 };
 
 export default LoginPage;
diff --git a/src/app/register/page.js b/src/app/register/page.js
index 293860e..b6e2771 100644
--- a/src/app/register/page.js
+++ b/src/app/register/page.js
@@ -5,6 +5,8 @@ import { useRouter } from "next/navigation";
 import { useAuthContext } from "@/context/AuthContext";
 import Link from "next/link";
 import { setCustomUserClaims } from "firebase/auth";
+import "./register.css";
+import styles from "../../app/page.module.css";
 
 const RegisterPage = () => {
   const [email, setEmail] = React.useState("");
@@ -25,10 +27,25 @@ const RegisterPage = () => {
     return router.push("/dashboard");
   };
   return (
-    <div className="wrapper">
-      <div className="form-wrapper">
-        <h1 className="mt-60 mb-30">Regjistrohu</h1>
+    <div className="area">
+      <ul className="circles">
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    </ul>
+                    <main className={styles.main}>
+       <div className="login_background">
+      
+        <p1 className="form-title">Regjistrohu</p1>
         <form onSubmit={handleForm} className="form">
+        <div class="input-container">
           <label htmlFor="email">
             <p>Email</p>
             <input
@@ -40,6 +57,8 @@ const RegisterPage = () => {
               placeholder="example@mail.com"
             />
           </label>
+          </div>
+          <div class="input-container">
           <label htmlFor="password">
             <p>Password</p>
             <input
@@ -51,11 +70,14 @@ const RegisterPage = () => {
               placeholder="password"
             />
           </label>
-          <button type="submit">Register</button>
+          </div>
+          <button type="submit" className="submit">Register</button>
           <Link href="/"> Faqja Kryesore </Link>
         </form>
       </div>
+    </main>
     </div>
+  
   );
 };
 
diff --git a/src/app/register/register.css b/src/app/register/register.css
new file mode 100644
index 0000000..b73557f
--- /dev/null
+++ b/src/app/register/register.css
@@ -0,0 +1,195 @@
+*{
+    margin: 0px;
+    padding: 0px;
+}
+
+.area{
+    background: #4e54c8;  
+    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
+    width: 100%;
+    height:100vh;
+    
+   
+}
+
+.circles{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.circles li{
+    position: absolute;
+    display: block;
+    list-style: none;
+    width: 20px;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.2);
+    animation: animate 25s linear infinite;
+    bottom: -150px;
+    
+}
+
+.circles li:nth-child(1){
+    left: 25%;
+    width: 80px;
+    height: 80px;
+    animation-delay: 0s;
+}
+
+
+.circles li:nth-child(2){
+    left: 10%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 2s;
+    animation-duration: 12s;
+}
+
+.circles li:nth-child(3){
+    left: 70%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 4s;
+}
+
+.circles li:nth-child(4){
+    left: 40%;
+    width: 60px;
+    height: 60px;
+    animation-delay: 0s;
+    animation-duration: 18s;
+}
+
+.circles li:nth-child(5){
+    left: 65%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 0s;
+}
+
+.circles li:nth-child(6){
+    left: 75%;
+    width: 110px;
+    height: 110px;
+    animation-delay: 3s;
+}
+
+.circles li:nth-child(7){
+    left: 35%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 7s;
+}
+
+.circles li:nth-child(8){
+    left: 50%;
+    width: 25px;
+    height: 25px;
+    animation-delay: 15s;
+    animation-duration: 45s;
+}
+
+.circles li:nth-child(9){
+    left: 20%;
+    width: 15px;
+    height: 15px;
+    animation-delay: 2s;
+    animation-duration: 35s;
+}
+
+.circles li:nth-child(10){
+    left: 85%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 0s;
+    animation-duration: 11s;
+}
+
+
+
+@keyframes animate {
+
+    0%{
+        transform: translateY(0) rotate(0deg);
+        opacity: 1;
+        border-radius: 0;
+    }
+
+    100%{
+        transform: translateY(-1000px) rotate(720deg);
+        opacity: 0;
+        border-radius: 50%;
+    }
+
+}
+
+
+
+.login_background {
+    background-color: #fff;
+    display: block;
+    padding: 1rem;
+    max-width: 350px;
+    border-radius: 0.5rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  
+  .form-title {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+    font-weight: 600;
+    text-align: center;
+    color: #000;
+  }
+  
+  .input-container {
+    position: relative;
+  }
+  
+  .input-container input, .form button {
+    outline: none;
+    border: 1px solid #0b0b0c;
+    margin: 8px 0;
+  }
+  
+  .input-container input {
+    background-color: #161616;
+    padding: 1rem;
+    padding-right: 3rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    width: 300px;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  }
+  
+  .submit {
+    display: block;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+    background-color: #030303;
+    color: #ffffff;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    width: 100%;
+    border-radius: 0.5rem;
+    text-transform: uppercase;
+  }
+  .signup-link {
+    color: #6B7280;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    text-align: center;
+  }
+  
+  .signup-link a {
+    text-decoration: underline;
+  }
+  
\ No newline at end of file