diff --git a/login.php b/login.php
index 8e88650..58ba849 100644
--- a/login.php
+++ b/login.php
@@ -206,7 +206,7 @@ echo'
         </div>
 
         <div class="login-visual">
-            <img src="https://dev.veliti.nl/assets/images/emergencyplug-auto-in-licht.jpg" alt="Login Visual">
+           
         </div>
     </div>
 </body>
diff --git a/reset.php b/reset.php
index b778b92..954290a 100644
--- a/reset.php
+++ b/reset.php
@@ -260,7 +260,7 @@ echo'
         </div>
 
         <div class="login-visual">
-            <img src="https://dev.veliti.nl/assets/images/emergencyplug-auto-in-licht.jpg" alt="Login Visual">
+           
         </div>
     </div>
 </body>
diff --git a/style/admin_login.css b/style/admin_login.css
index 2b3739f..2b0e576 100644
--- a/style/admin_login.css
+++ b/style/admin_login.css
@@ -63,6 +63,11 @@ body {
   width: 55%;
   position: relative;
   overflow: hidden;
+  background-image: url(/assets/images/emergencyplug-auto-in-licht.jpg);
+  background-position: center center;
+  background-size: 100% 100%; 
+  min-height: 100vh;
+  background-repeat: no-repeat;
 }
 
 .login-visual img {
diff --git a/style/admin_reset.css b/style/admin_reset.css
index 2b3739f..2b0e576 100644
--- a/style/admin_reset.css
+++ b/style/admin_reset.css
@@ -63,6 +63,11 @@ body {
   width: 55%;
   position: relative;
   overflow: hidden;
+  background-image: url(/assets/images/emergencyplug-auto-in-licht.jpg);
+  background-position: center center;
+  background-size: 100% 100%; 
+  min-height: 100vh;
+  background-repeat: no-repeat;
 }
 
 .login-visual img {
diff --git a/style/soveliti/soveliti_login.css b/style/soveliti/soveliti_login.css
index b4c7993..f367737 100644
--- a/style/soveliti/soveliti_login.css
+++ b/style/soveliti/soveliti_login.css
@@ -1,172 +1,232 @@
+:root {
+  --color-white: #FFFFFF;
+  --color-light-blue: #344fd5c2;
+  --color-blue: #0b1054;
+  --color-red: #a75151;
+  --text-color: #333333;
+  --error-background: #f3c3c3;
+}
+
+
 * {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: "Open Sans", Helvetica, sans-serif;
-  accent-color: #005655c2;
+  accent-color: var(--color-blue);
 }
 
 body {
-  background-color: #fff;
-  font-family: sans-serif;
-  background-color:#0b1054;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: var(--color-white);
+  padding: 20px;
+}
+
+.login-container {
+  display: flex;
+  width: 100%;
+  max-width: 1200px;
+  height: calc(100vh - 40px);
+  background-color: var(--color-white);
+  border-radius: 16px;
+  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+  overflow: hidden;
+}
+
+.login-form {
+  width: 45%;
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+}
+
+.logo {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background-image: url(VeLiTi-Logo2.png);
+  background-repeat: no-repeat;
+  opacity: inherit;
+  width: 85px;
+  height: 120px;
+  margin: 0 auto;
+  -webkit-filter: drop-shadow(5px 5px 5px #222);
+  filter: drop-shadow(5px 5px 5px #222);
+}
+
+.login-visual {
+  width: 55%;
+  position: relative;
+  overflow: hidden;
   background-image: url(veliti_intro.png);
   background-position: center center;
-  background-size: 100% 100%; 
+  background-size: 100% 100%;
+  background-color: var(--color-light-blue);
   min-height: 100vh;
   background-repeat: no-repeat;
 }
 
-.logon {
-  margin: 0;
+.login-visual img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.register-link {
   position: absolute;
-  top: 40%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  top: 20px;
+  right: 20px;
+  text-decoration: none;
+  color: var(--text-color);
 }
 
-#imagelogon {
-background-image: url(VeLiTi-Logo2.png);
-background-repeat: no-repeat;
-opacity: inherit;
-width: 85px;
-height: 150px;
-margin: 0 auto;
-position: relative;
-top: 87px;
--webkit-filter: drop-shadow(5px 5px 5px #222);
-filter: drop-shadow(5px 5px 5px #222);
+.header {
+  margin-bottom: 30px;
 }
 
-.login-box{
-    width: 350px;
-    height: 330px;
-    background-color:#344fd5c2;
-    padding: 55px 30px;
-    border-radius: 10px;
-    text-align: center;
-    -webkit-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.75);
-    -moz-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.75);
-    box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.75);
-  
-  }
-  
-  .login-box h1{
-    font-weight: 500;
-    color: #fff;
-  }
-  
-  .login-box input[type="text"],
-  .login-box input[type="password"]{
-    width: 75%;
-    margin-bottom: 10px;
-  }
-  
-  .login-box input[type="text"],
-  .login-box input[type="password"]{
-    border-radius: 10px;
-    //background: transparent;
-    border: none;
-    outline: none;
-    border: 2px solid #0b1054;
-    font-size: 13px;
-    height: 40px;
-    text-align: center;
-    transition: 0.27s;
-  }
-  .login-box input[type="text"]:focus,
-  .login-box input[type="password"]:focus{
-  width: 80%;
-  border-color:#ececec;
-  }
-  
-  .login-box input[type="submit"]{
-    width: 60%;
-    border: none;
-    outline: none;
-    background: #0b1054;
-    padding: 10px 0;
-    border-radius: 10px;
-    color: #ffffff;
-    font-weight: 500;
-    text-transform: uppercase;
-    cursor: pointer;
-    margin-bottom: 20px;
-    position: relative;
-    bottom: -12px;
-    font-style: italic;
-  }
-  
-  .login-box input[type="submit"]:hover{
-    background:#ececec;
-   transition: .2s;
-  }
-
-  .login-box input[type="submit"]:focus{
-    transform: scaleX(1.1);
-  }
-  
-  .login-box a {
-    text-decoration: none;
-    font-size: 12px;
-    color: #00bcd4;
-  }
-  
-  .login-box a:hover{
-    color: #ececec;
-  }
-
-  #reset a {
-    text-decoration: none;
-    font-size: 10px;
-    color: #00bcd4;
-  }
-
-  #reset {
-  margin-top: -10px;
-  }
-
-  #message p {
-    font-size: 15px;
-    color: #ffffff;;
-  }
-
-  /* Slide 5 */
-.slider-checkbox {
-	width: 3em;
-	height: 1.5em;
-	margin: 20px auto;
+.header h1 {
+  font-size: 24px;
+  margin-bottom: 10px;
 }
 
-.slider-checkbox * {
-	transition: 250ms;
-	box-sizing: border-box;
+.header p {
+  color: #666;
 }
 
-.slider-checkbox input[type="checkbox"] {
-	display: none;
+.input-group {
+  margin-bottom: 15px;
+  position: relative;
 }
 
-.slider-checkbox label {
-	display: inline-block;
-	width: 100%;
-	height: 95%;
-	background: #005655c2;
-	border-radius: 0.7em;
-	padding-top: 0.2em;
-	padding-left: 0.2em;
+.input-group input {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
 }
 
-.slider-checkbox span {
-	display: inline-block;
-	width: 1em;
-	height: 1em;
-	background: #FFF;
-	border: none;
-	border-radius: 2em;
+.input-group input[type="email"] {
+  padding-left: 40px;
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>') no-repeat left 10px center;
 }
 
-.slider-checkbox input[type="checkbox"]:checked ~ label {
-	background: #93ed49;
-	padding-left: 1.7em;
+.input-group input[type="password"] {
+  padding-left: 40px;
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>') no-repeat left 10px center;
+}
+
+.forgot-password {
+  color: var(--text-color);
+  text-decoration: none;
+  text-align: right;
+  margin-top: 5px;
+  float: right;
+  font-size: 12px;
+}
+
+.remember-me {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.remember-me input {
+  margin-right: 10px;
+}
+
+.maintenance {
+  padding: 5px;
+}
+
+.message p {
+  margin-top: 5px;
+  background-color: var(--error-background);
+  border-left: 4px solid  var(--color-red);
+  color:  var(--color-red);
+  padding: 5px;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.login-btn {
+  width: 100%;
+  padding: 12px;
+  background-color: var(--color-light-blue);
+  color: var(--color-white);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.login-btn:hover {
+  background-color: var(--color-blue);
+}
+
+.trademark {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  color: var(--text-color);
+  font-size: 12px;
+}
+
+.language-selector {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  color: var(--text-color);
+}
+
+.language-selector select {
+  margin-left: 10px;
+  border: none;
+  background: transparent;
+}
+
+/* Responsive Design */
+@media screen and (max-width: 1024px) {
+  .login-container {
+      flex-direction: column;
+      height: auto;
+      max-width: 500px;
+  }
+
+  .login-form, .login-visual {
+      width: 100%;
+      height: auto;
+  }
+
+  .login-visual {
+      height: 300px;
+  }
+
+  .logo {
+      position: static;
+      margin: 20px auto;
+      margin-bottom: 0;
+  }
+
+  .trademark, .language-selector {
+      position: static;
+      text-align: center;
+      margin: 20px 0;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .login-form {
+      padding: 20px;
+  }
+
+  .header h1 {
+      font-size: 20px;
+  }
 }
\ No newline at end of file
diff --git a/style/soveliti/soveliti_reset.css b/style/soveliti/soveliti_reset.css
index b4c7993..46c0609 100644
--- a/style/soveliti/soveliti_reset.css
+++ b/style/soveliti/soveliti_reset.css
@@ -1,172 +1,232 @@
+:root {
+  --color-white: #FFFFFF;
+  --color-light-blue: #344fd5c2;
+  --color-blue: #0b1054;
+  --color-red: #a75151;
+  --text-color: #333333;
+  --error-background: #f3c3c3;
+}
+
+
 * {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: "Open Sans", Helvetica, sans-serif;
-  accent-color: #005655c2;
+  accent-color: var(--color-blue);
 }
 
 body {
-  background-color: #fff;
-  font-family: sans-serif;
-  background-color:#0b1054;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: var(--color-white);
+  padding: 20px;
+}
+
+.login-container {
+  display: flex;
+  width: 100%;
+  max-width: 1200px;
+  height: calc(100vh - 40px);
+  background-color: var(--color-white);
+  border-radius: 16px;
+  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+  overflow: hidden;
+}
+
+.login-form {
+  width: 45%;
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+}
+
+.logo {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background-image: url(VeLiTi-Logo2.png);
+  background-repeat: no-repeat;
+  opacity: inherit;
+  width: 85px;
+  height: 120px;
+  margin: 0 auto;
+  -webkit-filter: drop-shadow(5px 5px 5px #222);
+  filter: drop-shadow(5px 5px 5px #222);
+}
+
+.login-visual {
+  width: 55%;
+  position: relative;
+  overflow: hidden;
   background-image: url(veliti_intro.png);
   background-position: center center;
   background-size: 100% 100%; 
+  background-color: var(--color-light-blue);
   min-height: 100vh;
   background-repeat: no-repeat;
 }
 
-.logon {
-  margin: 0;
+.login-visual img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.register-link {
   position: absolute;
-  top: 40%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  top: 20px;
+  right: 20px;
+  text-decoration: none;
+  color: var(--text-color);
 }
 
-#imagelogon {
-background-image: url(VeLiTi-Logo2.png);
-background-repeat: no-repeat;
-opacity: inherit;
-width: 85px;
-height: 150px;
-margin: 0 auto;
-position: relative;
-top: 87px;
--webkit-filter: drop-shadow(5px 5px 5px #222);
-filter: drop-shadow(5px 5px 5px #222);
+.header {
+  margin-bottom: 30px;
 }
 
-.login-box{
-    width: 350px;
-    height: 330px;
-    background-color:#344fd5c2;
-    padding: 55px 30px;
-    border-radius: 10px;
-    text-align: center;
-    -webkit-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.75);
-    -moz-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.75);
-    box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.75);
-  
-  }
-  
-  .login-box h1{
-    font-weight: 500;
-    color: #fff;
-  }
-  
-  .login-box input[type="text"],
-  .login-box input[type="password"]{
-    width: 75%;
-    margin-bottom: 10px;
-  }
-  
-  .login-box input[type="text"],
-  .login-box input[type="password"]{
-    border-radius: 10px;
-    //background: transparent;
-    border: none;
-    outline: none;
-    border: 2px solid #0b1054;
-    font-size: 13px;
-    height: 40px;
-    text-align: center;
-    transition: 0.27s;
-  }
-  .login-box input[type="text"]:focus,
-  .login-box input[type="password"]:focus{
-  width: 80%;
-  border-color:#ececec;
-  }
-  
-  .login-box input[type="submit"]{
-    width: 60%;
-    border: none;
-    outline: none;
-    background: #0b1054;
-    padding: 10px 0;
-    border-radius: 10px;
-    color: #ffffff;
-    font-weight: 500;
-    text-transform: uppercase;
-    cursor: pointer;
-    margin-bottom: 20px;
-    position: relative;
-    bottom: -12px;
-    font-style: italic;
-  }
-  
-  .login-box input[type="submit"]:hover{
-    background:#ececec;
-   transition: .2s;
-  }
-
-  .login-box input[type="submit"]:focus{
-    transform: scaleX(1.1);
-  }
-  
-  .login-box a {
-    text-decoration: none;
-    font-size: 12px;
-    color: #00bcd4;
-  }
-  
-  .login-box a:hover{
-    color: #ececec;
-  }
-
-  #reset a {
-    text-decoration: none;
-    font-size: 10px;
-    color: #00bcd4;
-  }
-
-  #reset {
-  margin-top: -10px;
-  }
-
-  #message p {
-    font-size: 15px;
-    color: #ffffff;;
-  }
-
-  /* Slide 5 */
-.slider-checkbox {
-	width: 3em;
-	height: 1.5em;
-	margin: 20px auto;
+.header h1 {
+  font-size: 24px;
+  margin-bottom: 10px;
 }
 
-.slider-checkbox * {
-	transition: 250ms;
-	box-sizing: border-box;
+.header p {
+  color: #666;
 }
 
-.slider-checkbox input[type="checkbox"] {
-	display: none;
+.input-group {
+  margin-bottom: 15px;
+  position: relative;
 }
 
-.slider-checkbox label {
-	display: inline-block;
-	width: 100%;
-	height: 95%;
-	background: #005655c2;
-	border-radius: 0.7em;
-	padding-top: 0.2em;
-	padding-left: 0.2em;
+.input-group input {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
 }
 
-.slider-checkbox span {
-	display: inline-block;
-	width: 1em;
-	height: 1em;
-	background: #FFF;
-	border: none;
-	border-radius: 2em;
+.input-group input[type="email"] {
+  padding-left: 40px;
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>') no-repeat left 10px center;
 }
 
-.slider-checkbox input[type="checkbox"]:checked ~ label {
-	background: #93ed49;
-	padding-left: 1.7em;
+.input-group input[type="password"] {
+  padding-left: 40px;
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>') no-repeat left 10px center;
+}
+
+.forgot-password {
+  color: var(--text-color);
+  text-decoration: none;
+  text-align: right;
+  margin-top: 5px;
+  float: right;
+  font-size: 12px;
+}
+
+.remember-me {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.remember-me input {
+  margin-right: 10px;
+}
+
+.maintenance {
+  padding: 5px;
+}
+
+.message p {
+  margin-top: 5px;
+  background-color: var(--error-background);
+  border-left: 4px solid  var(--color-red);
+  color:  var(--color-red);
+  padding: 5px;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.login-btn {
+  width: 100%;
+  padding: 12px;
+  background-color: var(--color-light-blue);
+  color: var(--color-white);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.login-btn:hover {
+  background-color: var(--color-blue);
+}
+
+.trademark {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  color: var(--text-color);
+  font-size: 12px;
+}
+
+.language-selector {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  color: var(--text-color);
+}
+
+.language-selector select {
+  margin-left: 10px;
+  border: none;
+  background: transparent;
+}
+
+/* Responsive Design */
+@media screen and (max-width: 1024px) {
+  .login-container {
+      flex-direction: column;
+      height: auto;
+      max-width: 500px;
+  }
+
+  .login-form, .login-visual {
+      width: 100%;
+      height: auto;
+  }
+
+  .login-visual {
+      height: 300px;
+  }
+
+  .logo {
+      position: static;
+      margin: 20px auto;
+      margin-bottom: 0;
+  }
+
+  .trademark, .language-selector {
+      position: static;
+      text-align: center;
+      margin: 20px 0;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .login-form {
+      padding: 20px;
+  }
+
+  .header h1 {
+      font-size: 20px;
+  }
 }
\ No newline at end of file