diff --git a/changelog/unreleased/enhancement-login-screen-design.md b/changelog/unreleased/enhancement-login-screen-design.md
new file mode 100644
index 00000000000..27d904c10af
--- /dev/null
+++ b/changelog/unreleased/enhancement-login-screen-design.md
@@ -0,0 +1,6 @@
+Enhancement: Improve login screen design
+
+We've improved the design of the login screen to match with the general design used in Web.
+
+https://github.com/owncloud/ocis/pull/4500
+https://github.com/owncloud/web/issues/7552
diff --git a/services/idp/.DS_Store b/services/idp/.DS_Store
new file mode 100644
index 00000000000..5172429f264
Binary files /dev/null and b/services/idp/.DS_Store differ
diff --git a/services/idp/src/app.css b/services/idp/src/app.css
index 1a7f1d5fff2..531d4a056b0 100644
--- a/services/idp/src/app.css
+++ b/services/idp/src/app.css
@@ -1,6 +1,17 @@
 /* additional css on top of kpop */
+@font-face {
+  font-family: Inter;
+  src: url(./fonts/inter.ttf) format('truetype');
+  font-weight: 100 900;
+  font-style: oblique 0deg 12deg;
+}
+
+html {
+  font-feature-settings: "cv11";
+}
+
 body {
-  font-family: 'Open Sans', sans-serif;
+  font-family: Inter, 'Open Sans', sans-serif;
 }
 
 strong {
@@ -42,10 +53,9 @@ strong {
 }
 
 .oc-input {
-  background-color: #042047;
-  border: 1px solid rgba(78, 133, 200, 0.8);
+  background-color: #fff;
+  border: 1px solid #fff;
   border-radius: 3px;
-  color: rgba(255, 255, 255, 0.8);
   height: 40px;
   width: 300px;
   padding: 16px;
@@ -73,10 +83,6 @@ strong {
   border: 1px solid #fff;
 }
 
-.oc-input::placeholder {
-  color: rgba(78, 133, 200, 0.8);
-}
-
 .oc-input + .oc-input {
   margin-top: 15px;
 }
@@ -92,17 +98,12 @@ strong {
 
 .oc-button-primary {
   /* Needs to be important to overwrite material-ui */
-  background-color: #4a76ac !important;
+  width: 100%;
+  background: linear-gradient(to right, #2c588e, #4e85c8) -1px;
+  background-size: 103% !important;
   border: 1px solid transparent !important;
 }
 
-.oc-button-primary:hover,
-.oc-button-primary:focus {
-  /* Needs to be important to overwrite material-ui */
-  background-color: #4a76ac !important;
-  border: 1px solid white !important;
-}
-
 .oc-checkbox-dark svg {
   /* Needs to be important to overwrite material-ui */
   fill: white !important;
@@ -123,7 +124,7 @@ strong {
 
 /* Helpers */
 .oc-mt-l {
-  margin-top: 30px !important;
+  margin-top: 24px !important;
 }
 
 .oc-mb-m {
diff --git a/services/idp/src/containers/Login/Login.jsx b/services/idp/src/containers/Login/Login.jsx
index 89df22b48b3..f7bc31eaf0c 100644
--- a/services/idp/src/containers/Login/Login.jsx
+++ b/services/idp/src/containers/Login/Login.jsx
@@ -155,7 +155,6 @@ function Login(props) {
           {hasError && <Typography id="oc-login-error-message" variant="subtitle2" component="span" color="error" className={classes.message}>{errorMessage}</Typography>}
           <div className={classes.wrapper}>
             {loginFailed && passwordResetLink && <Link id="oc-login-password-reset" href={passwordResetLink} variant="subtitle2">{"Reset password?"}</Link>}
-            <br />
             <Button
               type="submit"
               color="primary"
diff --git a/services/idp/src/fonts/inter.ttf b/services/idp/src/fonts/inter.ttf
new file mode 100644
index 00000000000..ec3164efa8f
Binary files /dev/null and b/services/idp/src/fonts/inter.ttf differ