diff --git a/frontend/public/hero.jpg b/frontend/public/hero.jpg
new file mode 100644
index 00000000..e23dc6e6
Binary files /dev/null and b/frontend/public/hero.jpg differ
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 7297f214..271c09b6 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,15 +1,16 @@
 body {
   font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
 }
 
 body {
   display: grid;
   place-items: center;
-  height: 100vh;
-  margin: 0px;
-  background: linear-gradient(100deg, #83a4d4, #b6fbff);
-  background-attachment: fixed;
-
+  min-height: 100vh;
+  width: 100vw;
+  background-image: url('../public/hero.jpg');
+  background-size: cover;
+  background-position: center;
 }
 
 @media (min-width: 600px) {
@@ -62,6 +63,8 @@ body {
   width: 260px;
   height: 350px;
   padding: 10px;
+  backdrop-filter: blur(5px);
+
 }
 
 .login-page button{
@@ -192,10 +195,11 @@ textarea {
   margin: 0px 20px 20px 20px;
   padding: 10px;
   width: 300px;
-  border-radius: 10px;
   height: 200px;
-  background-color: azure;
   border-radius: 20px;
+  border: 2px solid white;
+  margin: 10px;
+  backdrop-filter: blur(10px);
 }
 
 .registration-link {
@@ -204,6 +208,7 @@ textarea {
   align-items: center;
   justify-content: center;
   margin: auto;
+
 }
 
 .nav-link {
@@ -295,12 +300,19 @@ textarea {
  
   .registration-page-header {
     text-align: center;
+    backdrop-filter: blur(100px);
+    border: 2px solid white;
+    border-radius: 20px;
+    padding: 20px;
+    margin: 10px;
+
   }
 
 .registration-form {
   display: flex;
   flex-direction: column;
-gap: 20px;
+  gap: 20px;
+  margin: 20px;
 }
 
 .registration-form button {
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0a4ac0fb..b56d15c6 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -18,6 +18,7 @@ function App() {
 
   const handleLogin = () => {
     setLoggedIn(true);
+    setRegistered(false);
   };
 
   const handleLogout = () => {
diff --git a/frontend/src/components/RegistrationLink.tsx b/frontend/src/components/RegistrationLink.tsx
index 995b26aa..fd0c2bf5 100644
--- a/frontend/src/components/RegistrationLink.tsx
+++ b/frontend/src/components/RegistrationLink.tsx
@@ -4,7 +4,6 @@ const RegistrationLink = (props: { onRegister: boolean }) => {
       <div className="registration-link">
         <h1>e-notes</h1>
       </div>
-      <div className="registration-link-container">
         {!props.onRegister ? (
           <div className="registration-link-container">
             <p>Welcome to the e-notes app</p>
@@ -20,7 +19,6 @@ const RegistrationLink = (props: { onRegister: boolean }) => {
             </div>
          
         )}
-      </div>
     </div>
   );
 };