diff --git a/package.json b/package.json
index 2251e0b0..67f4d979 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,11 @@
     "@coreui/utils": "^1.3.1",
     "@coreui/vue": "^4.5.0",
     "@coreui/vue-chartjs": "2.0.1",
+    "@vuelidate/core": "^2.0.2",
+    "@vuelidate/validators": "^2.0.2",
+    "axios": "^1.4.0",
     "core-js": "^3.26.1",
+    "pinia": "^2.1.3",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
     "vuex": "^4.1.0"
diff --git a/src/App.vue b/src/App.vue
index 7502212d..be455ebb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,4 +5,5 @@
 <style lang="scss">
 // Import Main styles for this application
 @import 'styles/style';
+@import '../src/assets/main.css';
 </style>
diff --git a/src/assets/Mona-Sans.woff2 b/src/assets/Mona-Sans.woff2
new file mode 100644
index 00000000..8208a500
Binary files /dev/null and b/src/assets/Mona-Sans.woff2 differ
diff --git a/src/assets/SFProDisplay-Regular.woff2 b/src/assets/SFProDisplay-Regular.woff2
new file mode 100644
index 00000000..71b25501
Binary files /dev/null and b/src/assets/SFProDisplay-Regular.woff2 differ
diff --git a/src/assets/backround.jpg b/src/assets/backround.jpg
new file mode 100644
index 00000000..97d1d208
Binary files /dev/null and b/src/assets/backround.jpg differ
diff --git a/src/assets/main.css b/src/assets/main.css
new file mode 100644
index 00000000..2250696c
--- /dev/null
+++ b/src/assets/main.css
@@ -0,0 +1,74 @@
+.glassbackground form {
+  background: rgba( 255, 255, 255, 0.4 );
+  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+  backdrop-filter: blur( 20px );
+  -webkit-backdrop-filter: blur( 20px );
+  border-radius: 10px;
+  border: 1px solid rgba( 255, 255, 255, 0.18 );
+  text-align: center;
+  height: 450px;
+  width: 350px;
+}
+
+.glassbackground {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  width: 100vw;
+  min-height: 100vh;
+  background: url(backround.jpg) no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+*{
+  margin: 0; padding: 0;
+  box-sizing: border-box;
+  font-family: 'Mona Sans';
+  transition: all .2s linear;
+}
+
+
+@font-face {
+  font-family: 'Mona Sans';
+  src:
+    url('Mona-Sans.woff2') format('woff2 supports variations'),
+    url('Mona-Sans.woff2') format('woff2-variations');
+  font-weight: 200 900;
+  font-stretch: 75% 125%;
+}
+
+
+.glassbackground form input{
+  height: 40px;
+  width: 15vw;
+  margin:2px 0;
+  margin:auto;
+  align-items: center;
+  background: rgba(255, 254, 254, 0.644);
+  backdrop-filter: blur( 20px );
+  -webkit-backdrop-filter: blur( 20px );
+  border-radius: 10px;
+  border: 2px solid rgba( 255, 255, 255, 0.18 );
+  text-align: center;
+  
+}
+
+.glassbackground form button{
+  height: 40px;
+  width: 15vw;
+}
+
+a:link { text-decoration: none; }
+
+a:visited { text-decoration: none; }
+
+a:hover { text-decoration: none; }
+
+a:active { text-decoration: none; }
+
+@font-face{
+  font-family: 'Mona Sans';
+  src:url('./SFProDisplay-Regular.woff2');
+  unicode-range: U+0400-04FF;
+}
diff --git a/src/main.js b/src/main.js
index 5afc2d2d..648ae562 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,12 +2,13 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-
+import { createPinia } from 'pinia'
 import CoreuiVue from '@coreui/vue'
 import CIcon from '@coreui/icons-vue'
 import { iconsSet as icons } from '@/assets/icons'
 import DocsExample from '@/components/DocsExample'
 
+const pinia = createPinia()
 const app = createApp(App)
 app.use(store)
 app.use(router)
@@ -15,5 +16,5 @@ app.use(CoreuiVue)
 app.provide('icons', icons)
 app.component('CIcon', CIcon)
 app.component('DocsExample', DocsExample)
-
+app.use(pinia)
 app.mount('#app')
diff --git a/src/pages/login/Forgot.vue b/src/pages/login/Forgot.vue
new file mode 100644
index 00000000..782e386f
--- /dev/null
+++ b/src/pages/login/Forgot.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="glassbackground">
+    <form>
+      <br />
+      <h2>Забули пароль</h2>
+      <br />
+      <div class="form-outline mb-4">
+        <h5>Електронна пошта</h5>
+        <input
+          type="email"
+          id="loginmail"
+          class="form-control"
+          v-model="mail"
+          :class="{ 'is-invalid': v$?.mail?.$error }"
+          placeholder="example@gmail.com"
+          aria-describedby="forgotPassword"
+        />
+        <div id="forgotPassword" class="form-text">
+          Код буде надіслано на вашу електронну пошту
+        </div>
+      </div>
+      <br />
+      <button
+        type="button"
+        v-if="codeSent == false"
+        @click="resetpass"
+        class="btn btn-primary"
+      >
+        Надіслати код
+      </button>
+      <button
+        type="button"
+        v-if="codeSent == true"
+        @click="resetpass"
+        disabled
+        class="btn btn-primary"
+      >
+        Код було надіслано!
+      </button>
+    </form>
+  </div>
+</template>
+
+<script>
+import { useVuelidate } from '@vuelidate/core'
+import { email, required } from '@vuelidate/validators'
+
+export default {
+  setup() {
+    return { v$: useVuelidate() }
+  },
+  data() {
+    return {
+      mail: '',
+      codeSent: false,
+    }
+  },
+  validations() {
+    return {
+      mail: {
+        email,
+        required,
+      },
+    }
+  },
+  computed: {
+    mailErrors() {
+      const errors = []
+      if (!this.v$.$dirty) return errors
+      if (!this.v$.$invalid) return errors
+      if (!this.v$?.mail?.email)
+        errors.push('Please enter valid email address.')
+      if (!this.v$?.mail?.required) errors.push('Please fill this line.')
+      return errors
+    },
+  },
+  methods: {
+    resetpass() {
+      this.v$.$touch()
+      if (this.v$.$invalid) return
+      this.codeSent = true
+    },
+  },
+}
+</script>
diff --git a/src/pages/login/Login.vue b/src/pages/login/Login.vue
new file mode 100644
index 00000000..4600acc3
--- /dev/null
+++ b/src/pages/login/Login.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="glassbackground">
+    <form>
+      <br />
+      <h1>Ввійти</h1>
+      <br />
+      <div class="form-outline mb-4">
+        <h5>Електронна пошта</h5>
+        <input
+          type="email"
+          id="loginmail"
+          class="form-control"
+          v-model="mail"
+          :class="{ 'is-invalid': v$?.mail?.$error }"
+          placeholder="example@gmail.com"
+        />
+      </div>
+      <div class="form-outline mb-4">
+        <h4>Пароль</h4>
+        <input
+          type="password"
+          aria-label="password"
+          class="form-control"
+          v-model="password"
+          :class="{ 'is-invalid': v$?.password?.$error }"
+          placeholder="Вашпароль123"
+          aria-describedby="forgotPassword"
+        />
+        <div id="forgotPassword" class="form-text">
+          <a href="google.com">Скинути пароль</a>
+        </div>
+      </div>
+      <br />
+      <button type="button" @click="login" class="btn btn-primary">
+        Ввійти
+      </button>
+    </form>
+  </div>
+</template>
+
+<script>
+import { useVuelidate } from '@vuelidate/core'
+import {
+  minLength,
+  maxLength,
+  email,
+  required,
+  helpers,
+} from '@vuelidate/validators'
+
+export default {
+  setup() {
+    return { v$: useVuelidate() }
+  },
+  data() {
+    return {
+      mail: '',
+      password: '',
+    }
+  },
+  validations() {
+    return {
+      mail: {
+        email: helpers.withMessage('Please enter only valid mails!', email),
+        required: helpers.withMessage("This fill can't be empty", required),
+      },
+      password: {
+        minLength: minLength(6),
+        maxLength: maxLength(24),
+        required,
+      },
+    }
+  },
+  computed: {
+    mailErrors() {
+      const errors = []
+      if (!this.v$.$dirty) return errors
+      if (!this.v$.$invalid) return errors
+      if (!this.v$?.mail?.email)
+        errors.push('Please enter valid email address.')
+      if (!this.v$?.mail?.required) errors.push('Please fill this line.')
+      return errors
+    },
+    passwordErrors() {
+      const errors = []
+      if (!this.v$.$dirty) return errors
+      if (!this.v$.$invalid) return errors
+      if (!this.v$?.password?.minLength)
+        errors.push('Please enter at least 6 characters')
+      if (!this.v$?.password?.maxLength)
+        errors.push('Please enter at most 24 characters')
+      if (!this.v$?.password?.required) errors.push('Please fill this line.')
+      return errors
+    },
+  },
+  methods: {
+    login() {
+      this.v$.$touch()
+      if (this.v$.$invalid) return
+    },
+  },
+}
+</script>
diff --git a/src/pages/login/Recovery.vue b/src/pages/login/Recovery.vue
new file mode 100644
index 00000000..0df9b987
--- /dev/null
+++ b/src/pages/login/Recovery.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="glassbackground">
+    <form>
+      <br />
+      <h4>Password Recovery</h4>
+      <br />
+      <div class="form-outline mb-4">
+        <h5>Password</h5>
+        <input
+          type="password"
+          aria-label="password"
+          class="form-control"
+          v-model="password"
+          :class="{ 'is-invalid': v$?.password?.$error }"
+          placeholder="Password"
+        />
+      </div>
+      <div class="form-outline mb-4">
+        <h5>Confirm Password</h5>
+        <input
+          type="password"
+          aria-label="password"
+          class="form-control"
+          v-model="password1"
+          :class="{ 'is-invalid': v$?.password1?.$error }"
+          placeholder="Password"
+        />
+      </div>
+      <div class="text-danger" v-if="password1 != password">
+        <button type="button" class="btn btn-danger" disabled>
+          Passwords must be the same!
+        </button>
+      </div>
+      <br />
+      <button type="button" @click="changepass" class="btn btn-primary">
+        Change Password
+      </button>
+    </form>
+  </div>
+</template>
+
+<script>
+import { useVuelidate } from '@vuelidate/core'
+import { minLength, maxLength, sameAs, required } from '@vuelidate/validators'
+
+export default {
+  setup() {
+    return { v$: useVuelidate() }
+  },
+  data() {
+    return {
+      password: '',
+      password1: '',
+    }
+  },
+  validations() {
+    return {
+      password: {
+        minLength: minLength(6),
+        maxLength: maxLength(24),
+        required,
+      },
+      password1: {
+        minLength: minLength(6),
+        maxLength: maxLength(24),
+        sameAs: sameAs(this.password),
+        required,
+      },
+    }
+  },
+  computed: {
+    password1Errors() {
+      const errors = []
+      if (!this.v$.$dirty) return errors
+      if (!this.v$.$invalid) return errors
+      if (!this.v$?.password?.minLength)
+        errors.push('Please enter at least 6 characters')
+      if (!this.v$?.password?.maxLength)
+        errors.push('Please enter at most 24 characters')
+      if (!this.v$?.password?.required) errors.push('Please fill this line.')
+      return errors
+    },
+    passwordErrors() {
+      const errors = []
+      if (!this.v$.$dirty) return errors
+      if (!this.v$.$invalid) return errors
+      if (!this.v$?.password?.minLength)
+        errors.push('Please enter at least 6 characters')
+      if (!this.v$?.password?.maxLength)
+        errors.push('Please enter at most 24 characters')
+      if (!this.v$?.password?.required) errors.push('Please fill this line.')
+      if (!this.v$?.password?.sameAs) errors.push('Passwords must be the same!')
+      return errors
+    },
+  },
+  methods: {
+    changepass() {
+      this.v$.$touch()
+      if (this.v$.$invalid) return
+    },
+  },
+}
+</script>
diff --git a/src/router/index.js b/src/router/index.js
index 0a195eac..b78c4968 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,8 @@
 import { h, resolveComponent } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
+import Login from '../pages/login/Login.vue'
+import Forgot from '../pages/login/Forgot.vue'
+import Recovery from '../pages/login/Recovery.vue'
 
 import DefaultLayout from '@/layouts/DefaultLayout'
 
@@ -114,6 +117,18 @@ const routes = [
             name: 'Tooltips',
             component: () => import('@/views/base/Tooltips.vue'),
           },
+          {
+            path: '/login',
+            component: Login,
+          },
+          {
+            path: '/forgotpassword',
+            component: Forgot,
+          },
+          {
+            path: '/passwordrecovery',
+            component: Recovery,
+          },
         ],
       },
       {