diff --git a/app/Http/Controllers/ComputerController.php b/app/Http/Controllers/ComputerController.php
index 4beb41c..133e1d6 100644
--- a/app/Http/Controllers/ComputerController.php
+++ b/app/Http/Controllers/ComputerController.php
@@ -32,7 +32,7 @@ class ComputerController extends Controller
         ]);
 
         $computer = Computer::create($request->all());
-        return response()->json($wish, 201);
+        return response()->json($computer, 201);
     }
 
     public function update(Request $request)
diff --git a/app/Http/Controllers/JobController.php b/app/Http/Controllers/JobController.php
index efa3c10..245260a 100644
--- a/app/Http/Controllers/JobController.php
+++ b/app/Http/Controllers/JobController.php
@@ -7,59 +7,50 @@ use Illuminate\Http\Request;
 
 class JobController extends Controller
 {
-    /**
-     * Display a listing of the resource.
-     */
     public function index()
     {
-        //
+        return Job::select()->get();
     }
 
-    /**
-     * Show the form for creating a new resource.
-     */
-    public function create()
-    {
-        //
+    public function getByComputerId(Request $request){
+        return Job::select()->where('computer_id', '=', $request->get('computer_id'))->get();
     }
 
-    /**
-     * Store a newly created resource in storage.
-     */
-    public function store(Request $request)
+    public function create(Request $request)
     {
-        //
+        $request->validate([
+            'computer_id' => 'required|exists:computers,id',
+            'description' => 'required|string|max:256',
+            'status' => 'nullable|boolean'
+        ]);
+
+        $job = Job::create($request->all());
+        return response()->json($job, 201);
     }
 
-    /**
-     * Display the specified resource.
-     */
-    public function show(Job $job)
+    public function update(Request $request)
     {
-        //
+        $request->validate([
+            'id' => 'required|exists:jobs,id',
+            'computer_id' => 'required|exists:computers,id',
+            'description' => 'required|string|max:256',
+            'status' => 'nullable|boolean'
+        ]);
+
+        $job = Job::find($request->get('id'));
+        $job->computer_id = $request->get('computer_id');
+        $job->description = $request->get('description');
+        $job->status = $request->get('status');
+        $job->save();
+        return response()->json($job);
     }
 
-    /**
-     * Show the form for editing the specified resource.
-     */
-    public function edit(Job $job)
+    public function destroy(Request $request)
     {
-        //
-    }
-
-    /**
-     * Update the specified resource in storage.
-     */
-    public function update(Request $request, Job $job)
-    {
-        //
-    }
-
-    /**
-     * Remove the specified resource from storage.
-     */
-    public function destroy(Job $job)
-    {
-        //
+        $request->validate([
+            'id' => 'required|exists:jobs,id',
+        ]);
+        $destroyed = Job::destroy($request->get('id'));
+        return response()->json($destroyed, 204);
     }
 }
diff --git a/resources/App.vue b/resources/App.vue
index 5147bf8..27502af 100644
--- a/resources/App.vue
+++ b/resources/App.vue
@@ -27,13 +27,18 @@
             </div>
             <v-sheet
                 v-if="isWide || menuOpen"
-                class="d-flex justify-end rounded-lg main-bg h-auto mr-10 ml-10"
-                :class="menuOpen ? 'mt-2 mb-2 pa-2' : 'mt-10 mb-3 pa-5'"
+                class="d-flex justify-space-between rounded-lg main-bg h-auto mr-10 ml-10 align-center"
+                :class="menuOpen ? 'mt-2 mb-2 pa-2 flex-column' : 'mt-10 mb-3 pa-5'"
             >
-                <p class="ml-3 mr-3" :class="menuOpen ? 'text-body-1' : 'text-h6'"><RouterLink to="/" class="nav-link text-decoration-none">Главная</RouterLink></p>
-                <p v-if="!authenticated" class="ml-3 mr-3" :class="menuOpen ? 'text-body-1' : 'text-h6'"><RouterLink to="/login" class="nav-link text-decoration-none">Войти</RouterLink></p>
-                <p v-if="!authenticated" class="ml-3 mr-3" :class="menuOpen ? 'text-body-1' : 'text-h6'"><RouterLink to="/register" class="nav-link text-decoration-none">Регистрация</RouterLink></p>
-                <p v-if="authenticated" class="ml-3 mr-3" :class="menuOpen ? 'text-body-1' : 'text-h6'"><a href="#" class="nav-link text-decoration-none" @click="logout">Выйти</a></p>
+                <div class="d-flex justify-center rounded-lg main-bg h-auto mr-10 ml-10">
+                    <v-label class="text-h6 h-auto w-auto pa-2">Welcome {{ authenticated ? userStore.user['name'] : 'guest' }}!</v-label><br>
+                </div>
+                <div class="d-flex" :class="menuOpen ? 'justify-center' : 'justify-end'">
+                    <p class="ml-3 mr-3" :class="menuOpen ? 'text-body-1' : 'text-h6'"><RouterLink to="/" class="nav-link text-decoration-none">Главная</RouterLink></p>
+                    <p v-if="!authenticated" class="ml-3 mr-3" :class="menuOpen ? 'text-body-1' : 'text-h6'"><RouterLink to="/login" class="nav-link text-decoration-none">Войти</RouterLink></p>
+                    <p v-if="!authenticated" class="ml-3 mr-3" :class="menuOpen ? 'text-body-1' : 'text-h6'"><RouterLink to="/register" class="nav-link text-decoration-none">Регистрация</RouterLink></p>
+                    <p v-if="authenticated" class="ml-3 mr-3" :class="menuOpen ? 'text-body-1' : 'text-h6'"><a href="#" class="nav-link text-decoration-none" @click="logout">Выйти</a></p>
+                </div>
             </v-sheet>
             <v-sheet class="rounded-lg main-bg h-100 mt-3 mr-10 ml-10 mb-10 pa-5">
                 <RouterView v-slot="{ Component }">
diff --git a/resources/app.js b/resources/app.js
index eadab36..f453819 100644
--- a/resources/app.js
+++ b/resources/app.js
@@ -7,7 +7,8 @@ import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 import '@mdi/font/css/materialdesignicons.css'
 import Login from "./views/Login.vue";
-import About from "./views/About.vue";
+import ComputersList from "./views/ComputersList.vue";
+import JobsList from "./views/JobsList.vue";
 import Register from "./views/Register.vue";
 import {createMemoryHistory, createRouter} from "vue-router";
 import { createPinia } from 'pinia';
@@ -15,9 +16,10 @@ import { createPinia } from 'pinia';
 const pinia = createPinia();
 
 const routes = [
-    {path: '/', component: About, props: true},
+    {path: '/', component: ComputersList, props: true},
     {path: '/login', component: Login, props: true},
-    {path: '/register', component: Register, props: true}
+    {path: '/register', component: Register, props: true},
+    {path: '/jobs', component: JobsList, props: true},
 ]
 
 const router = createRouter({
diff --git a/resources/css/app.css b/resources/css/app.css
index 56ea6d5..ede7952 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -4,6 +4,14 @@
     text-decoration-color: #e0e0e0!important;
 }
 
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.text-decoration-none {
+    text-decoration: none;
+}
+
 .bg-gradient {
     background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff)!important;
     background-size: 200% 200%!important;
@@ -204,7 +212,7 @@
     stroke-dashoffset: -64px;
 }
 .ham8.active .middle {
-//stroke-dashoffset: -20px;
+/*stroke-dashoffset: -20px;*/
     transform: rotate(90deg);
 }
 .ham8.active .bottom {
diff --git a/resources/js/rules.js b/resources/js/rules.js
new file mode 100644
index 0000000..1b0d344
--- /dev/null
+++ b/resources/js/rules.js
@@ -0,0 +1,18 @@
+export const rules = {
+    email: value => {
+        const pattern = /^[A-Za-z0-9\._]+@{1}[A-Za-z0-9]+\.[a-z]+$/
+        return pattern.test(value) || 'Неверный email'
+    },
+    notNull: value => {
+        return (value !== null && value !== undefined && value !== '') || 'Поле не может быть пустым';
+    },
+    id: value => {
+        return (value !== null && value !== undefined && typeof value == 'number') || 'Неверный id';
+    },
+    price: value => {
+        return (typeof value == 'number' || typeof value == 'undefined' || value === null) || 'Стоимость должна быть числом';
+    },
+    isNumber: value => {
+        return /^\d+[\.,\,]?\d*$/.test(value);
+    }
+}
diff --git a/resources/store/computers.js b/resources/store/computers.js
new file mode 100644
index 0000000..173c5f6
--- /dev/null
+++ b/resources/store/computers.js
@@ -0,0 +1,38 @@
+import {defineStore} from 'pinia'
+import axios from "axios";
+import {useUserStore} from "./auth.js";
+
+export const useComputersStore = defineStore('computers', {
+    state: () => ({
+        computers: [],
+        token: null,
+    }),
+    actions: {
+        setToken(token) {
+            this.token = token;
+            localStorage.setItem('auth_token', token);
+        },
+        checkToken(){
+            this.token = this.useUserStore().token;
+        },
+        async getComputerList(user_id){
+            if (this.token === null){
+                this.checkToken();
+            }
+            await axios.get(
+                '/api/data/computers/byUser',
+                {
+                    headers: {
+                        Authorization: `Bearer ${this.token}`,
+                        token: this.token
+                    },
+                    params: {
+                        user_id: user_id
+                    }
+                }
+            ).then((response)=>{
+                this.computers = response.data;
+            })
+        }
+    },
+})
diff --git a/resources/views/About.vue b/resources/views/About.vue
deleted file mode 100644
index e9b720e..0000000
--- a/resources/views/About.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script>
-import { watch } from 'vue';
-import { useUserStore } from '../store/auth.js';
-export default {
-    name: "About",
-    data() {
-        return {
-            userStore: useUserStore(),
-            authenticated: false,
-            username: 'guest'
-        };
-    },
-    methods: {
-        logout() {
-            this.userStore.logout();
-            this.$router.push('/login');
-        },
-        setStored(stored){
-            this.userStored = stored;
-        }
-    },
-    mounted() {
-        this.userStore.checkUser();
-        watch(this.userStore, (newStore)=>{
-            this.authenticated = newStore.user !== null && newStore.user !== undefined;
-        });
-    }
-}
-</script>
-
-<template>
-    <div class="d-flex justify-center">
-        <v-label class="text-h3 h-auto w-auto pa-2">Welcome {{ authenticated ? userStore.user['name'] : 'guest' }}!</v-label><br>
-    </div>
-</template>
-
-<style scoped>
-
-</style>
diff --git a/resources/views/ComputersList.vue b/resources/views/ComputersList.vue
new file mode 100644
index 0000000..706c976
--- /dev/null
+++ b/resources/views/ComputersList.vue
@@ -0,0 +1,94 @@
+<script>
+import { watch } from 'vue';
+import { useUserStore } from '../store/auth.js';
+import {useComputersStore} from "../store/computers.js";
+import {rules} from "../js/rules.js";
+export default {
+    name: "About",
+    data() {
+        return {
+            userStore: useUserStore(),
+            computersStore: useComputersStore(),
+            computerList: [],
+            createDialogShow: false,
+            editDialogShow: false,
+            fetching: false,
+            authenticated: false,
+            computerName: null,
+            computerCpu: null,
+            computerMotherboard: null,
+            computerGpu: null,
+            computerAdditional: null,
+        };
+    },
+    methods: {
+        showCreateDialog(){
+            this.createDialogShow = true;
+        },
+        showEditDialog(){
+            this.editDialogShow = true;
+        }
+    },
+    mounted() {
+        this.userStore.checkUser();
+        watch(this.userStore, (newStore)=>{
+            this.fetching = true;
+            this.authenticated = newStore.user !== null && newStore.user !== undefined;
+            this.computersStore.setToken(this.userStore.token);
+            this.computersStore.getComputerList(this.userStore.user['id']).then(()=>{
+                this.computerList = this.computersStore.computers;
+                this.fetching = false;
+            })
+        });
+    }
+}
+</script>
+
+<template>
+    <div class="d-flex flex-column justify-center w-100">
+        <v-skeleton-loader v-if="fetching" color="grey-darken-3" class="w-100" type="card"/>
+        <div v-if="!fetching" class="w-100 h-100">
+            <div class="d-flex align-center justify-space-between w-100 h-100" v-for="computer in computerList">
+                <router-link :to="`/jobs?id=${computer['id']}`" class="text-decoration-none w-100 mr-2" >
+                    <v-card class="card-bg text-decoration-none cursor-pointer w-100">
+                        <v-card-title>{{ computer['name'] }}</v-card-title>
+                        <v-card-text class="d-flex flex-column cursor-pointer">
+                            <v-label class="cursor-pointer">CPU: {{ computer['cpu'] }}</v-label>
+                            <v-label class="cursor-pointer">Motherboard: {{ computer['motherboard'] }}</v-label>
+                            <v-label class="cursor-pointer">GPU: {{ computer['gpu'] }}</v-label>
+                            <v-label class="cursor-pointer">Дополнительная информация: {{ computer['additional_info'] }}</v-label>
+                        </v-card-text>
+                    </v-card>
+                </router-link>
+                <div @click="showEditDialog" class="card-bg align-self-stretch pa-2 d-flex justify-center align-center rounded-sm">
+                    <v-icon icon="mdi-pencil"></v-icon>
+                </div>
+            </div>
+        </div>
+        <div class="w-100 pa-5" v-if="!fetching">
+            <v-btn class="w-100" color="#F0A068FF" @click="showCreateDialog" rounded="xs">
+                <v-icon icon="mdi-plus-thick"></v-icon>
+            </v-btn>
+        </div>
+    </div>
+    <v-dialog :model-value="createDialogShow">
+        <v-card class="main-bg">
+            <v-card-title>Создание нового компьютера</v-card-title>
+            <v-card-text>
+                <v-text-field label="Название" :model-value="computerName" placeholder="Мой компьютер"></v-text-field>
+                <v-text-field label="CPU" :model-value="computerCpu" placeholder="Intel Core i5-12400F"></v-text-field>
+                <v-text-field label="Материнская плата" :model-value="computerMotherboard" placeholder="Asus ROG B650"></v-text-field>
+                <v-text-field label="Gpu" :model-value="computerGpu" placeholder="Nvidia RTX 3060ti"></v-text-field>
+                <v-textarea label="Дополнительная информация" :model-value="computerAdditional"></v-textarea>
+                <v-btn>Создать</v-btn>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+</template>
+
+<style scoped>
+.card-bg {
+    background-color: #272727 !important;
+    color: white;
+}
+</style>
diff --git a/resources/views/JobsList.vue b/resources/views/JobsList.vue
new file mode 100644
index 0000000..8329039
--- /dev/null
+++ b/resources/views/JobsList.vue
@@ -0,0 +1,36 @@
+<script>
+import {useUserStore} from "../store/auth.js";
+import {useComputersStore} from "../store/computers.js";
+
+export default {
+    name: "JobsList",
+    data() {
+        return {
+            userStore: useUserStore(),
+            computersStore: useComputersStore(),
+            computerId: null,
+            fetching: false,
+            authenticated: false
+        };
+    },
+    mounted() {
+        this.computerId = this.$route.query.id;
+    }
+}
+</script>
+
+<template>
+    <div>
+        <router-link to="/">
+            <v-btn color="#F0A068FF">Назад</v-btn>
+        </router-link>
+        <v-skeleton-loader v-if="fetching" color="grey-darken-3" class="w-100" type="card"/>
+        <div v-if="!fetching">
+
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/routes/api.php b/routes/api.php
index 194ab4d..eb287aa 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -2,6 +2,7 @@
 
 use App\Http\Controllers\API\AuthController;
 use App\Http\Controllers\ComputerController;
+use App\Http\Controllers\JobController;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 
@@ -31,8 +32,20 @@ Route::group(['prefix' => 'auth'], function () {
 });
 
 Route::group(['prefix' => 'data'], function () {
-    Route::get('computers/all', [ComputerController::class, 'index']);
-    Route::post('computers/create', [ComputerController::class, 'create']);
-    Route::post('computers/save', [ComputerController::class, 'update']);
-    Route::post('computers/delete', [ComputerController::class, 'destroy']);
-});
\ No newline at end of file
+    Route::group(['middleware' => 'auth:sanctum'], function() {
+        Route::group(['prefix' => 'computers'], function () {
+            Route::get('all', [ComputerController::class, 'index']);
+            Route::get('byUser', [ComputerController::class, 'getByUserId']);
+            Route::post('create', [ComputerController::class, 'create']);
+            Route::post('save', [ComputerController::class, 'update']);
+            Route::post('delete', [ComputerController::class, 'destroy']);
+        });
+        Route::group(['prefix' => 'jobs'], function () {
+            Route::get('all', [JobController::class, 'index']);
+            Route::get('byComputer', [JobController::class, 'getByComputerId']);
+            Route::post('create', [JobController::class, 'create']);
+            Route::post('save', [JobController::class, 'update']);
+            Route::post('delete', [JobController::class, 'destroy']);
+        });
+    });
+});