diff --git a/src/Vue/Images/Logo.png b/src/Vue/Images/Logo.png
new file mode 100644
index 0000000..2a88f48
Binary files /dev/null and b/src/Vue/Images/Logo.png differ
diff --git a/src/Vue/css/reset.css b/src/Vue/css/reset.css
new file mode 100644
index 0000000..567ae4d
--- /dev/null
+++ b/src/Vue/css/reset.css
@@ -0,0 +1,82 @@
+/***
+ The new CSS reset - version 1.7.2 (last updated 23.6.2022)
+ GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+
+/*
+ Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+ - The "symbol *" part is to solve Firefox SVG sprite bug
+ */
+ *:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) {
+ display: revert;
+}
+
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+/* Reapply the pointer cursor for anchor tags */
+a, button {
+ cursor: revert;
+}
+
+/* Remove list styles (bullets/numbers) */
+ol, ul, menu {
+ list-style: none;
+}
+
+/* For images to not be able to exceed their container */
+img {
+ max-width: 100%;
+}
+
+/* removes spacing between cells in tables */
+table {
+ border-collapse: collapse;
+}
+
+/* Safari - solving issue when using user-select:none on the text input doesn't working */
+input, textarea {
+ -webkit-user-select: auto;
+}
+
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+ white-space: revert;
+}
+
+/* minimum style to allow to style meter element */
+meter {
+ -webkit-appearance: revert;
+ appearance: revert;
+}
+
+/* reset default text opacity of input placeholder */
+::placeholder {
+ color: unset;
+}
+
+/* fix the feature of 'hidden' attribute.
+ display:revert; revert to element instead of attribute */
+:where([hidden]) {
+ display: none;
+}
+
+/* revert for bug in Chromium browsers
+ - fix for the content editable attribute will work properly.
+ - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+:where([contenteditable]:not([contenteditable="false"])) {
+ -moz-user-modify: read-write;
+ -webkit-user-modify: read-write;
+ overflow-wrap: break-word;
+ -webkit-line-break: after-white-space;
+ -webkit-user-select: auto;
+}
+
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable="true"]) {
+ -webkit-user-drag: element;
+}
\ No newline at end of file
diff --git a/src/Vue/css/style.css b/src/Vue/css/style.css
new file mode 100644
index 0000000..be7d5b7
--- /dev/null
+++ b/src/Vue/css/style.css
@@ -0,0 +1,192 @@
+@import url("reset.css");
+
+@import url('https://fonts.googleapis.com/css2?family-Poppins:wght@400;600&display-swap');
+
+body {
+ font-family: 'Poppinq', sans-serif;
+ min-height: 100vh;
+ background: linear-gradient(to right, #ffffff,#38B6FF);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.model {
+ width: 450px;
+ background: rgba(255,255,255, .5);
+ padding: 4rem;
+ border-radius: 10px;
+ border-radius: relative;
+}
+
+.model::before {
+ content: '';
+ position: absolute;
+ background: rgba(255,255,255, .15);
+ inset: 0;
+ transform: rotate(-5deg);
+ z-index: -1;
+}
+
+.main-logo {
+ margin-bottom: 2rem;
+}
+
+.main-logo img {
+ width: 200px;
+}
+
+.main-logo, .login-card-header,.login-card-footer {
+ text-align: center;
+}
+
+.model a{
+ text-decoration: none;
+ color: #35339a;
+}
+
+.model a:hover {
+ text-decoration: underline;
+}
+
+.login-card-header {
+ margin-bottom: 2rem;
+}
+
+.login-card-header h1 {
+ font-size: 2rm;
+ font-weight: 600;
+ margin-bottom: .5rem;
+}
+
+.login-card-header h1 + div {
+ font-size: calc(1rem * .8);
+ opacity: .8;
+}
+
+.login-card-form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+}
+
+.login-card-form .form-item {
+ position: relative;
+}
+
+.login-card-form .form-item .form-item-icon {
+ position: absolute;
+ top:.82rem;
+ left: 1.4rem;
+ font-size: 1.3rem;
+ opacity: .4;
+}
+
+.login-card-form .checkbox{
+ display: flex;
+ align-items: center;
+ gap: 7px;
+}
+
+.login-card-form .form-item-other {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: calc(1rem*.8);
+ margin-bottom: .5rem;
+}
+
+.login-card-footer {
+ margin-top: 1.5rem;
+ font-size: calc(1rem*.8);
+}
+
+.model input[type="text"],
+.model input[type="password"],
+.model input[type="email"] {
+ border: none;
+ outline: none;
+ background: rgba(255,255,255,.3);
+ padding: 1rem 1.5rem;
+ padding-left: calc(1rem * 3.5);
+ border-radius: 100px;
+ width: 100%;
+ transition: background .5s;
+}
+
+.model input:focus {
+ background: white;
+}
+
+.model input[type="checkbox"] {
+ width: 16px;
+ height: 16px;
+ accent-color: black;
+}
+
+.model button {
+ background: #38b6ff;
+ color: white;
+ padding: 1rem;
+ border-radius: 100px;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ transition: background .5s;
+}
+
+.login-card-form button:hover {
+ background-color: rgba(84,192,255,.85);
+ cursor: pointer;
+}
+
+.social {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ text-align: center;
+ margin-top: 3rem;
+}
+
+.social > div {
+ opacity: .8;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ font-size: calc(1rem * .8);
+}
+
+.lesLogo {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 1rem;
+}
+
+.lesLogo a {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: black;
+ width: 50px;
+ height: 50px;
+ background: rgba(255, 255, 255, .6);
+ border-radius: 100px;
+ transition: all .5s;
+}
+
+.lesLogo a:hover {
+ background: white;
+ transform: scale(1.1);
+}
+
+/* Responsive */
+
+@media (max-width: 768px) {
+ body {
+ padding: 2rem 0;
+ }
+
+ .login-card {
+ width: 300px;
+ padding: 2rem;
+ }
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..e2766dd
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+ Login Page
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+