diff --git a/src/layouts/app/pages/Login/images/pet-and-dog__login-page.png b/src/layouts/app/pages/Login/images/pet-and-dog__login-page.png
new file mode 100644
index 00000000..0b6fa5dd
Binary files /dev/null and b/src/layouts/app/pages/Login/images/pet-and-dog__login-page.png differ
diff --git a/src/layouts/app/pages/Login/images/petdex-logo__login-page.png b/src/layouts/app/pages/Login/images/petdex-logo__login-page.png
new file mode 100644
index 00000000..05415bee
Binary files /dev/null and b/src/layouts/app/pages/Login/images/petdex-logo__login-page.png differ
diff --git a/src/layouts/app/pages/Login/index.js b/src/layouts/app/pages/Login/index.js
new file mode 100644
index 00000000..9990c768
--- /dev/null
+++ b/src/layouts/app/pages/Login/index.js
@@ -0,0 +1,34 @@
+import { Component } from 'pet-dex-utilities';
+import LoginForm from '../../../../components/LoginForm';
+import petdexLogo from './images/petdex-logo__login-page.png';
+import petAndDog from './images/pet-and-dog__login-page.png';
+import './index.scss';
+
+const html = `
+   <div data-select="container" class="login-page">
+            <div class="login-page__img-box">
+                        <div class="login-page__img-top"> 
+                              <img src="${petdexLogo}" class="login-page__img-logopetdex"/>
+                        </div>
+                        <div class="login-page__img-down">
+                              <img src="${petAndDog}" class="login-page__img-petanddog"/>
+                        </div>
+                        
+            </div>
+            <div class=login-page__login-box>
+
+                  <div class="login-page__login-form">
+                  </div>
+            </div>
+
+    </div>
+`;
+export default function LoginPage() {
+  Component.call(this, { html });
+
+  const $container = this.selected.get('container');
+  this.LoginForm = new LoginForm();
+  this.LoginForm.mount($container);
+}
+
+LoginPage.prototype = Object.assign(LoginPage.prototype, Component.prototype);
diff --git a/src/layouts/app/pages/Login/index.scss b/src/layouts/app/pages/Login/index.scss
new file mode 100644
index 00000000..191f45c2
--- /dev/null
+++ b/src/layouts/app/pages/Login/index.scss
@@ -0,0 +1,38 @@
+@use '~styles/colors.scss' as colors;
+@use '~styles/breakpoints.scss' as breakpoints;
+
+.login-page {
+  width: 100%;
+
+  display: flex;
+  gap: 5rem;
+
+  justify-content: center;
+
+  padding: 15rem;
+
+  background-color: colors.$primary600;
+}
+
+.login-page__img-box {
+  display: flex;
+  flex-direction: column;
+
+  align-items: center;
+}
+
+.login-page__img-box img {
+  display: block;
+
+  padding-right: 2rem;
+}
+
+.login-page__img-logopetdex {
+  width: 15.5rem;
+}
+
+.login-page__img-top {
+  width: 100%;
+
+  margin-bottom: 10rem;
+}
diff --git a/src/stories/Login.stories.js b/src/stories/Login.stories.js
new file mode 100644
index 00000000..4c85539e
--- /dev/null
+++ b/src/stories/Login.stories.js
@@ -0,0 +1,15 @@
+import LoginPage from '../layouts/app/pages/Login';
+
+export default {
+  title: 'Pages/Login',
+  render: () => {
+    const loginPage = new LoginPage();
+    const $container = document.createElement('div');
+
+    loginPage.mount($container);
+
+    return $container;
+  },
+};
+
+export const LoginPageStoryPage = {};