diff --git a/frontend/.yarnrc.yml b/frontend/.yarnrc.yml
new file mode 100644
index 0000000..063ed60
--- /dev/null
+++ b/frontend/.yarnrc.yml
@@ -0,0 +1,8 @@
+approvedGitRepositories:
+  - "**"
+
+enableScripts: true
+
+nodeLinker: node-modules
+
+npmMinimalAgeGate: 0
diff --git a/frontend/src/App.css b/frontend/src/App.css
index e69de29..3fc8113 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -0,0 +1,7 @@
+#root {
+    height: 100%;
+    box-shadow: 1px 1px 20px 1px rgba(68, 68, 68, 0.5);
+    border-radius: 40px;
+    border: 1px solid #444;
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/frontend/src/assets/LOGO.png b/frontend/src/assets/LOGO.png
new file mode 100644
index 0000000..dd873a7
Binary files /dev/null and b/frontend/src/assets/LOGO.png differ
diff --git a/frontend/src/assets/PC.png b/frontend/src/assets/PC.png
new file mode 100644
index 0000000..7a2613d
Binary files /dev/null and b/frontend/src/assets/PC.png differ
diff --git a/frontend/src/assets/bg_login.png b/frontend/src/assets/bg_login.png
new file mode 100644
index 0000000..11695f1
Binary files /dev/null and b/frontend/src/assets/bg_login.png differ
diff --git a/frontend/src/assets/graphics.png b/frontend/src/assets/graphics.png
new file mode 100644
index 0000000..d7b9856
Binary files /dev/null and b/frontend/src/assets/graphics.png differ
diff --git a/frontend/src/assets/paper.png b/frontend/src/assets/paper.png
new file mode 100644
index 0000000..6ae78e9
Binary files /dev/null and b/frontend/src/assets/paper.png differ
diff --git a/frontend/src/features/auth/components/AuthComponent.css b/frontend/src/features/auth/components/AuthComponent.css
index e69de29..21dc39c 100644
--- a/frontend/src/features/auth/components/AuthComponent.css
+++ b/frontend/src/features/auth/components/AuthComponent.css
@@ -0,0 +1,144 @@
+form {
+    display: flex;
+    flex-direction: column;
+    background-color: whitesmoke;
+    width: 100%;
+    padding: 10%;
+    justify-content: space-between;
+    height: 100%;
+}
+.Title {
+    font-size: 32px;
+    font-weight: bold;
+    text-align: left;
+    line-height: 45px;
+    letter-spacing: 1.2px;
+
+}
+.Description{
+    font-size: medium;
+    font-size: 20px;
+    line-height: 30px;
+
+}
+.Fields {
+    line-height: 40px;
+    font-weight: bold;
+    font-size: 20px;
+
+}
+.wrapper_1 {
+    background-color: whitesmoke;
+    width: 40%;
+}
+input {
+    line-height: 40px;
+    border-radius: 16px;
+    border: 1px solid rgba(68, 68, 68, 0.3);
+    font-size: large;
+}
+
+.footer{
+    display: flex;
+    padding-top: 10%;
+    justify-content: space-between;
+}
+
+
+.submitbtn {
+    display: flex;
+    justify-content: center;
+    padding-top: 10%;
+    padding-bottom: 20px;
+}
+#submit {
+    background-color: #087A55;
+    height: 50px;
+    width: 100%;
+    color: white;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    font-size: larger;
+    font-weight: 500;
+}
+.submit-arrow {
+    width: 30px;
+    height: 30px;
+}
+.email-icon, .pass-icon {
+    height: 25px;
+    position: absolute;
+    left: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+}
+.email_field, .pass_field {
+    position: relative;
+    width: 100%;
+}
+.email_field input, .pass_field input {
+    width: 100%;
+    padding: 12px 15px 12px 45px;
+    transition: padding-left 0.2s ease;
+}
+.pass_field input {
+    padding-right: 45px;
+}
+.toggle-password {
+    position: absolute;
+    right: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+.toggle-password svg {
+    width: 22px;
+    height: 22px;
+}
+.email_field input:focus,
+.email_field input:not(:placeholder-shown) {
+    padding-left: 15px;
+}
+.email_field input:focus + .email-icon,
+.email_field input:not(:placeholder-shown) + .email-icon {
+    opacity: 0;
+} 
+
+.pass_field input:focus,
+.pass_field input:not(:placeholder-shown) {
+    padding-left: 15px;
+}
+.pass_field input:focus + .pass-icon,
+.pass_field input:not(:placeholder-shown) + .pass-icon {
+    opacity: 0;
+} 
+.forgot_link {
+    color: #087A55;
+    font-weight: 600;
+
+}
+
+label {
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+    accent-color: #087A55;
+
+}
+label input[type="checkbox"] {
+    width: 25px;
+    height: 25px;
+    border-radius: 10px;
+}
diff --git a/frontend/src/features/auth/components/AuthComponent.tsx b/frontend/src/features/auth/components/AuthComponent.tsx
index 322af52..2f0771a 100644
--- a/frontend/src/features/auth/components/AuthComponent.tsx
+++ b/frontend/src/features/auth/components/AuthComponent.tsx
@@ -6,33 +6,86 @@ export function Auth():ReactElement {
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
     const [rememberMe, setRememberMe] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
 
     return (
-        <form>
-            <input
-                type="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                placeholder="Email"
-                required
-            />
-            <input
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="Password"
-                required
-            />
-            <label>
+        <>
+        <div className="wrapper_1">
+            <form>
+            <h1 className="Title"> Добро Пожаловать <br /> в The DisExcel Project </h1>
+            <p className="Description">Войдите в систему, чтобы продолжить работу с вашими процессами</p>
+                <p className="Fields">Email</p>
+                <div className="email_field">
+                    <input
+                        type="email"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        placeholder="Email"
+                        required
+                    />
+                     <svg className="email-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+                        <rect x="3" y="5" width="18" height="14" rx="2.5" stroke="#72879A" stroke-width="1.8"/>
+                        <path d="m4.5 7 7.5 6 7.5-6" stroke="#72879A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </div>
+                <p className="Fields">Password</p>
+                <div className="pass_field">
+
                 <input
-                    type="checkbox"
-                    checked={rememberMe}
-                    onChange={(e) => setRememberMe(e.target.checked)}
+                    type={showPassword ? "text" : "password"}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="Password"
+                    required
                 />
-                Запомнить меня
-            </label>
-            <Link to="/forgot-password">Забыли пароль?</Link>
-            <button type="submit">Войти</button>
-        </form>
+                <svg className="pass-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+                <rect x="4" y="10" width="16" height="11" rx="2.5" stroke="#72879A" stroke-width="1.8"/>
+                <path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="#72879A" stroke-width="1.8" stroke-linecap="round"/>
+                </svg>
+                <button
+                    type="button"
+                    className="toggle-password"
+                    onClick={() => setShowPassword((v) => !v)}
+                    aria-label={showPassword ? "Скрыть пароль" : "Показать пароль"}
+                >
+                    {showPassword ? (
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+                            <path d="M3 3l18 18" stroke="#72879A" strokeWidth="1.8" strokeLinecap="round"/>
+                            <path d="M10.6 5.2A10.6 10.6 0 0 1 12 5c5 0 9 4 10 7-.4 1.1-1.2 2.4-2.3 3.6M6.4 6.4C4.4 7.8 2.9 9.7 2 12c1 3 5 7 10 7 1.4 0 2.7-.3 3.9-.8" stroke="#72879A" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+                            <path d="M9.9 10a3 3 0 0 0 4.2 4.2" stroke="#72879A" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+                        </svg>
+                    ) : (
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+                            <path d="M2 12c1-3 5-7 10-7s9 4 10 7c-1 3-5 7-10 7s-9-4-10-7Z" stroke="#72879A" strokeWidth="1.8" strokeLinejoin="round"/>
+                            <circle cx="12" cy="12" r="3" stroke="#72879A" strokeWidth="1.8"/>
+                        </svg>
+                    )}
+                </button>
+                </div>
+                <div className="footer">
+                    <div className="remember-me">
+                        <label>
+                            <input
+                                type="checkbox"
+                                checked={rememberMe}
+                                onChange={(e) => setRememberMe(e.target.checked)}
+                            />
+                            Запомнить меня
+                        </label>
+                    </div>
+                    <Link to="/forgot-password" className="forgot_link">Забыли пароль?</Link>
+                </div>
+                <div className="submitbtn">
+                <button id="submit" type="submit">
+                    Войти
+                    <svg className="submit-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+                        <path d="M4 12h14" stroke="white" strokeWidth="2" strokeLinecap="round"/>
+                        <path d="m13 6 6 6-6 6" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                    </svg>
+                </button>
+                </div>
+            </form>
+        </div>
+        </>
     );
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index e69de29..28b1f8e 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,19 @@
+*{padding: 0;margin: 0;border: 0;}
+*,*:before,*:after{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
+:focus,:active{outline: none;}
+a:focus,a:active{outline: none;}
+nav,footer,header,aside{display: block;}
+html,body{
+  height:100%;width:100%;
+  font-size:100%;line-height:1;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
+input,button,textarea{font-family:inherit;}
+input::-ms-clear{display: none;}
+button{cursor: pointer;}
+button::-moz-focus-inner{padding:0;border:0;}
+a,a:visited{text-decoration: none;}
+a:hover{text-decoration: none;}
+ul li{list-style: none;}
+img{vertical-align: top;}
+h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: inherit;}
+a{color:inherit;}
+
diff --git a/frontend/src/pages/LoginPage.css b/frontend/src/pages/LoginPage.css
new file mode 100644
index 0000000..195dc58
--- /dev/null
+++ b/frontend/src/pages/LoginPage.css
@@ -0,0 +1,112 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
+
+body {
+  font-family: 'Manrope', sans-serif;
+}
+html, body {
+    padding: 0;
+    margin: 0;
+    height: 100%;
+    width: 100%;
+    padding: 30px;
+    user-select: none
+}
+
+.wrapper {
+    display: flex;
+    flex-direction: row;
+    min-height: auto;
+    width: 100%;
+    overflow: hidden;
+    height: 100%;
+}
+.left_side {
+    width: 60%;
+    background-image: url("../assets/bg_login.png");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-right: 1px solid rgba(68, 68, 68, 0.3);
+}
+
+.container {
+    padding: 40px 20px;
+    padding-bottom: 20px;
+}
+.img_logo {
+    width: 133px;
+    height: 82px;
+}
+.header_top {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.header_title {
+    font-size: 36px;
+    font-weight: 900;
+}
+.header_heading {
+    font-size: 28px;
+    color: rgba(0, 0, 0, 0.5);
+}
+.header_bottom {
+    font-size: 20px;
+    color: rgba(0, 0, 0, 0.8);
+    line-height: 30px;
+    padding-top: 20px;
+    padding-left: 30px;
+}
+.main_item_img {
+    width: 75%;
+    height: 70%;
+}
+.main_items {
+    display: flex;
+    justify-content: space-between; 
+}
+.main {
+}
+.main_item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.main_item_title {
+    font-size: 20px;
+    font-weight: 600;
+}
+.main_item_p {
+    padding-top: 10px;
+    font-size: 16px;
+    width: 50%;
+    text-align: center;
+    line-height: 25px;
+}
+.section_item > svg {
+    width: 40px;
+    height: 40px;
+    margin-bottom: 15px;
+}
+.section_items {
+    display: flex;
+    justify-content: space-between;
+}
+.section {
+    padding: 7% 40px 0px 0px;
+}
+.section_item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 25%;
+    line-height: 25px;
+    font-weight: 900;
+    font-size: 16px;
+}
+.section_line {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+}
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 4cb3751..73c1ea8 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -1,9 +1,111 @@
 import { Auth } from "../features/auth/components/AuthComponent";
+import "./LoginPage.css"
+import logo from "../assets/LOGO.png"
+import img_1 from "../assets/paper.png"
+import img_2 from "../assets/PC.png"
+import img_3 from "../assets/graphics.png"
 
 export function LoginPage(){
     return(
         <>
+            <div className="wrapper">
+            <div className="left_side">
+                <header className="header">
+                    <div className="container">
+                        <div className="header_top">
+                        <img className="img_logo" src={logo} alt="LOGO" />
+                        <p className="header_text">
+                        <div className="header_title">
+                            The DisExcel
+                        </div>
+                        <div className="header_heading">
+                            Project
+                        </div>
+                        </p>
+                        </div>
+                        <div className="header_bottom">
+                            <p>
+                                Избавляем от ручной работы. <br />
+                                Переводим процессы из бумаги в Excel, <br />
+                                а из Excel - в 1С и отчеты.
+                            </p>
+                        </div>
+                    </div>
+                </header>
+                <main className="main">
+                    <div className="contain">
+                        <div className="main_items">
+                            {/* 1 */}
+                            <div className="main_item">
+                                <img className="main_item_img" src={img_1} alt="img" />
+                                <div className="main_item_title">Бумага</div>
+                                <div className="main_item_p">
+                                    Ручная работа, ошибки, потери
+                                </div>
+                            </div>
+                            <div className="main_i"></div>
+                            {/* 2 */}
+                            <div className="main_item">
+                                <img className="main_item_img" src={img_2} alt="img" />
+                                <div className="main_item_title">Excel</div>
+                                <div className="main_item_p">
+                                    Структура, формулы, автоматизация
+                                </div>
+                            </div>
+                            <div className="main_i"></div>
+                            {/* 3 */}
+                            <div className="main_item">
+                                <img className="main_item_img" src={img_3} alt="img" />
+                                <div className="main_item_title">1С / Отчеты</div>
+                                <div className="main_item_p">
+                                    Готовые процессы, аналитика, контроль
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </main>
+                <section className="section">
+                    <div className="section_items">
+                        {/* 1 */}
+                        <div className="section_item"> 
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
+                        <circle cx="24" cy="24" r="16" stroke="#087A55" stroke-width="3"/>
+                        <path d="M24 14v11l7 4" stroke="#087A55" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                        Экономим <br /> время
+                        </div>
+                        <div className="section_line"></div>
+                        {/* 2 */}
+                        <div className="section_item"> 
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
+                        <path d="M24 6 38 11v11c0 9-5.8 15.2-14 20-8.2-4.8-14-11-14-20V11z" stroke="#087A55" stroke-width="3" stroke-linejoin="round"/>
+                        <path d="m17 24 5 5 10-11" stroke="#087A55" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                        Снижаем <br /> ошибки
+                        </div>
+                        <div className="section_line"></div>
+                        {/* 3 */}
+                        <div className="section_item"> 
+                        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path stroke="#087A55" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.5.5 0 0 0 .12-.63l-1.92-3.32a.5.5 0 0 0-.6-.22l-2.39.96a7.03 7.03 0 0 0-1.62-.94l-.36-2.54a.5.5 0 0 0-.5-.43h-3.84a.5.5 0 0 0-.5.43l-.36 2.54c-.59.24-1.13.56-1.62.94l-2.39-.96a.5.5 0 0 0-.6.22L2.66 8.85a.5.5 0 0 0 .12.63l2.03 1.58c-.05.3-.08.63-.08.94s.02.64.07.94l-2.03 1.58a.5.5 0 0 0-.12.63l1.92 3.32a.5.5 0 0 0 .6.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54a.5.5 0 0 0 .5.43h3.84a.5.5 0 0 0 .5-.43l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96a.5.5 0 0 0 .6-.22l1.92-3.32a.5.5 0 0 0-.12-.63l-2.03-1.58Z"/>
+                        <circle cx="12" cy="12" r="3.5" stroke="#087A55" stroke-width="1.6"/>
+                        </svg>
+                        Автоматизируем <br /> процессы
+                        </div>
+                        <div className="section_line"></div>
+                        {/* 4 */}
+                        <div className="section_item"> 
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
+                        <path d="M24 6 38 11v11c0 9-5.8 15.2-14 20-8.2-4.8-14-11-14-20V11z" stroke="#087A55" stroke-width="3" stroke-linejoin="round"/>
+                        <path d="m17 24 5 5 10-11" stroke="#087A55" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                        Делаем <br /> бизнес эффективнее
+                        </div>
+                    </div>
+                </section>
+            </div>
             <Auth />
+            </div>
         </>
     );
 }
\ No newline at end of file