diff --git a/src/App.tsx b/src/App.tsx
index e9fecc8..b5b43aa 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,8 @@ import viteLogo from '/vite.svg'
 import {useQuery} from "@tanstack/react-query";
 import resolveURL from "./api/fetch.ts";
 import './assets/css/App.css'
+import LoginFormComponent from './components/LoginFormComponent.tsx';
+import LoginImage from './components/LoginImage.tsx';
 
 function App() {
   const [count, setCount] = useState(0)
@@ -35,6 +37,9 @@ function App() {
       <p className="read-the-docs">
         Click on the Vite and React logos to learn more
       </p>
+
+      <LoginFormComponent />
+      <LoginImage />
     </>
   )
 }
diff --git a/src/assets/css/LoginFormComponent.module.css b/src/assets/css/LoginFormComponent.module.css
index 998c8cf..c82f6fe 100644
--- a/src/assets/css/LoginFormComponent.module.css
+++ b/src/assets/css/LoginFormComponent.module.css
@@ -1,17 +1,23 @@
+@import url('https://fonts.cdnfonts.com/css/dm-sans');
+
 .login {
-    height: 240px;
-    width: 220px;
+    height: 591px;
+    width: 480px;
     padding: 0;
 
     display: flex;
     flex-direction: column;
     align-items: center;
+
+    font-family: 'DM Sans', sans-serif;
 }
 
 .login > p {
-    font-size: 1.2rem;
-    font-weight: 600;
-    margin: 0.5rem;
+    font-size: 50px;
+    font-size: 50px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
 }
 
 .login > input {
@@ -19,27 +25,42 @@
     border: none;
 
     font-size: 0.6rem;
-    height: 1.8rem;
-    width: 80%;
-    padding: 0.2rem 0.6rem;
-    margin-bottom: 0.5rem;
-    border-radius: 0.3rem;
-    background-color: #dbdcdc;
+    height: 69px;
+    width: 400px;
+    border-radius: 7px;
+    padding-left: 21px;
+    margin-bottom: 45px;
+    background-color: #D9D9D9;
+
+    font-family: "DM Sans";
+    font-size: 26px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
 }
 
 .login > input::placeholder {
-    color: #fff;
-    opacity: 1; /* Firefox */
+    color: #FFF;
+    font-family: "DM Sans";
+    font-size: 26px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
 }
 
 .forgot-password {
-    color: inherit;
-    font-size: 0.6rem;
+    color: #151515;
+    font-family: "DM Sans";
+    font-size: 26px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
     text-decoration: underline;
 }
 
 .login-button-container {
-    width: 50%;
-    height: 1.8rem;
+    width: 227px;
+    height: 69px;
+    border-radius: 7px;
     margin: auto;
 }
\ No newline at end of file
diff --git a/src/assets/css/LoginImage.module.css b/src/assets/css/LoginImage.module.css
index 62176c5..f63f22f 100644
--- a/src/assets/css/LoginImage.module.css
+++ b/src/assets/css/LoginImage.module.css
@@ -1,4 +1,4 @@
 .login-image {
-    height: 240px;
-    width: 240px;
+    height: 591px;
+    width: 577px;
 }
\ No newline at end of file
diff --git a/src/assets/css/SignInButton.module.css b/src/assets/css/SignInButton.module.css
index 333eb44..9e6eb98 100644
--- a/src/assets/css/SignInButton.module.css
+++ b/src/assets/css/SignInButton.module.css
@@ -1,13 +1,16 @@
+@import url('https://fonts.cdnfonts.com/css/dm-sans');
+
 .sign-in-button {
     /* put in container */
     height: 100%; 
     width: 100%;
     padding: 0;
 
-    background-color: #213547;
-    border-radius: 0.3rem;
-    
-    text-align: center;
-    font-size: 0.6rem;
-    color: #fff;
+    color: #FFF;
+    background-color: #0C1747;
+    font-family: "DM Sans";
+    font-size: 26px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
 }
\ No newline at end of file