diff --git a/src/renderer/components/modal/modal-types/login-modal.component.tsx b/src/renderer/components/modal/modal-types/login-modal.component.tsx
new file mode 100644
index 00000000..acd82966
--- /dev/null
+++ b/src/renderer/components/modal/modal-types/login-modal.component.tsx
@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { ModalExitCode, ModalResponse } from "renderer/services/modale.service";
+import BeatImpatient from '../../../../../assets/beat-impatient.png'
+
+export function LoginModal({resolver}: {resolver: (x: ModalResponse) => void}) {
+
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [stay, setStay] = useState(false);
+
+    const loggin = () => resolver({exitCode: ModalExitCode.COMPLETED, data:{username, password, stay}});
+    const cancel = () => resolver({exitCode: ModalExitCode.CANCELED});
+
+  return (
+    <form className="p-4 bg-main-color-2 text-gray-200 overflow-hidden rounded-md shadow-lg shadow-black">
+        <h1 className="w-full text-center font-bold text-2xl">Connect to Steam</h1>
+        <div className="w-full flex justify-center content-center items-center">
+            <img className="aspect-square object-cover w-24" src={BeatImpatient} />
+        </div>
+        <div className="flex flex-col mb-2">
+            <label className="font-bold" htmlFor="username">Username</label>
+            <input className="bg-main-color-3 p-1 pr-2 pl-2 rounded-md" onChange={e => setUsername(e.target.value)} value={username} type="text" name="username" id="username" placeholder="Enter your username"/>
+        </div>
+        <div className="flex flex-col">
+            <label className="font-bold" htmlFor="password">Password</label>
+            <input className="bg-main-color-3 p-1 pr-2 pl-2 rounded-md" onChange={e => setPassword(e.target.value)} value={password} type="password" name="password" id="password" placeholder="Enter your password"/>
+        </div>
+        <div className="flex items-center content-center justify-start mt-2 mb-2">
+            <input onChange={e => setStay(e.target.checked)} checked={stay} className="mr-1" type="checkbox" name="stay" id="stay" />
+            <label htmlFor="stay">Stay connected</label>
+        </div>
+        <div className="w-full flex justify-center items-center content-center">
+            <button onClick={cancel} className="mr-4">Cancel</button>
+            <button onClick={loggin}>LogIn</button>
+        </div>
+    </form>
+  )
+}