diff --git a/.eslintrc.js b/.eslintrc.js
index 905c9140d1a8da094ddbecb2ebb7b6ff445285b3..f8e84179df5769ccf471de3314fff29efe32f8a5 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -13,6 +13,7 @@ module.exports = {
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/html-indent': 2
   }
 }
diff --git a/package.json b/package.json
index 8413005bbabce47f1e76266f79dc5f300777a607..112c031c3cc8623bf13b2506045c3b2aaa1d5b8a 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.24.0",
+    "bulma-helpers": "^0.4.2",
     "core-js": "^3.6.5",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
diff --git a/src/App.vue b/src/App.vue
index 3fa872e1c73a90b05f5afe9591ec2c7cdce0aac8..31c836ef7260e85bc73a0f215fae47b0f744dbb3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,6 @@
 <template>
   <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
+    <router-link to="/">War pigs</router-link>
   </div>
   <router-view/>
 </template>
diff --git a/src/api/auth.ts b/src/api/auth.ts
new file mode 100644
index 0000000000000000000000000000000000000000..df8f2faa166f210b7037b4cfabf2398c34945a74
--- /dev/null
+++ b/src/api/auth.ts
@@ -0,0 +1,5 @@
+import { restClient } from '@/plugins'
+
+export function login (params: any) {
+  return restClient.post('/login', params)
+}
diff --git a/src/api/index.ts b/src/api/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/assets/images/6jk524tfr3261.gif b/src/assets/images/6jk524tfr3261.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c7b36ae4e26c518bf8250275fc66d696bce261f1
Binary files /dev/null and b/src/assets/images/6jk524tfr3261.gif differ
diff --git a/src/assets/images/login-pig.png b/src/assets/images/login-pig.png
new file mode 100644
index 0000000000000000000000000000000000000000..bee9279641c858aa13b3cb4f627c8fb2053c0e80
Binary files /dev/null and b/src/assets/images/login-pig.png differ
diff --git a/src/components/PForm.vue b/src/components/PForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b0ee55d608a08c35988bc42d303418797b1c7d8c
--- /dev/null
+++ b/src/components/PForm.vue
@@ -0,0 +1,26 @@
+<template>
+  <form @submit.prevent="submit">
+    <slot></slot>
+  </form>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Form',
+  setup (_, { emit }) {
+    const submit = () => {
+      emit('submit')
+      console.log('submit')
+    }
+    return {
+      submit
+    }
+  }
+})
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/main.ts b/src/main.ts
index a92f2289480ee7c1ef1963c06ffd067c1f2f5641..95d36ac6bea96cb7bfa38ba4b45d7e478492d683 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,5 +2,12 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import './plugins'
+import 'bulma-helpers/css/bulma-helpers.min.css'
+import PForm from '@/components/PForm.vue'
 
-createApp(App).use(store).use(router).mount('#app')
+const app = createApp(App)
+
+app.component('p-form', PForm)
+
+app.use(store).use(router).mount('#app')
diff --git a/src/views/Home.vue b/src/pages/Home.vue
similarity index 100%
rename from src/views/Home.vue
rename to src/pages/Home.vue
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c096a934ff0b1470538fc2dbe3c66b2d471bbbf3
--- /dev/null
+++ b/src/pages/Login.vue
@@ -0,0 +1,39 @@
+<template>
+  <p-form @sumbit="auth">
+    <div class="flex-column align-items-center s">
+      <img :src="pigImg" style="width: 100px"/>
+      <div class="flex-column">
+        <input v-model="credentials.login" type="text" placeholder="Логин">
+        <input v-model="credentials.password" type="password" placeholder="Пароль">
+      </div>
+      <div class="flex justify-center">
+        <button type="submit">Let me in</button>
+      </div>
+    </div>
+  </p-form>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive } from 'vue'
+import { login } from '@/api/auth'
+
+export default defineComponent({
+  name: 'Login',
+  setup () {
+    const credentials = reactive({
+      login: '',
+      password: ''
+    })
+
+    const auth = async () => {
+      const res = await login(credentials)
+    }
+
+    return {
+      credentials,
+      auth,
+      pigImg: require('./../assets/images/6jk524tfr3261.gif')
+    }
+  }
+})
+</script>
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3f75fc1d1efa3974dea2d5cb53164dacd67def11
--- /dev/null
+++ b/src/plugins/index.ts
@@ -0,0 +1,5 @@
+import restClient from '@/plugins/restClient'
+
+export {
+  restClient
+}
diff --git a/src/plugins/restClient.ts b/src/plugins/restClient.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fb70e950ee68f314e06a652be34bd74d64b483f8
--- /dev/null
+++ b/src/plugins/restClient.ts
@@ -0,0 +1,8 @@
+import axios from 'axios'
+
+const restClient = axios.create({
+  baseURL: 'http://localhost:8080',
+  timeout: 5000
+})
+
+export default restClient
diff --git a/src/router/index.ts b/src/router/index.ts
index a6021e147c2a15388983009fc0036e8adfe323ae..2c87f14a3e166715d9675c49e272f389bd658d67 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
-import Home from '../views/Home.vue'
+import Home from '../pages/Home.vue'
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -8,12 +8,9 @@ const routes: Array<RouteRecordRaw> = [
     component: Home
   },
   {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    path: '/login',
+    name: 'Login',
+    component: () => import(/* webpackChunkName: "about" */ '../pages/Login.vue')
   }
 ]
 
diff --git a/src/store/index.ts b/src/store/index.ts
index 5f05f19391dba84eb4167b3d496bc8b716646fdc..db80895b63ebb4e515e43ecd40dd70487f4c974f 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -2,8 +2,21 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
+    userToken: localStorage.getItem('userToken') || null,
+    refreshToken: localStorage.getItem('refreshToken') || null
   },
   mutations: {
+    setTokens ({ userToken, refreshToken }, { newToken, newRefreshToken }) {
+      userToken = newToken
+      localStorage.setItem('userToken', newToken)
+      refreshToken = newRefreshToken
+      localStorage.setItem('refreshToken', newRefreshToken)
+    }
+  },
+  getters: {
+    token ({ userToken }) {
+      return userToken
+    }
   },
   actions: {
   },
diff --git a/src/views/About.vue b/src/views/About.vue
deleted file mode 100644
index 3fa28070de24f2055171ca2e20543881cb7fdf1c..0000000000000000000000000000000000000000
--- a/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/yarn.lock b/yarn.lock
index 0fac00af10f20a74cfc8bcb33e27b061347c36ed..9d679c21963d247633931d8bd3ab45d9f77446cb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2114,6 +2114,13 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
+axios@^0.24.0:
+  version "0.24.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
+  integrity sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==
+  dependencies:
+    follow-redirects "^1.14.4"
+
 babel-code-frame@^6.22.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -2431,6 +2438,11 @@ builtin-status-codes@^3.0.0:
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
   integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
 
+bulma-helpers@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/bulma-helpers/-/bulma-helpers-0.4.2.tgz#48ff73aab48155522485b80936c014650557c195"
+  integrity sha512-EAzZHoRbwujCsmtrBWzjI8087at0tIuk58HoR/j5R7n9iXVRJumRUWtRCO/J4Ft+fuxGoV9oZSISLC/neqrnjw==
+
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
@@ -4389,7 +4401,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.14.4:
   version "1.14.5"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.5.tgz#f09a5848981d3c772b5392309778523f8d85c381"
   integrity sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA==