diff --git a/client/components/App.vue b/client/components/App.vue
index 5eeca45b..a6e0c4c0 100644
--- a/client/components/App.vue
+++ b/client/components/App.vue
@@ -1,8 +1,9 @@
 <template>
-    <el-container>
-        <el-aside v-if="showAsideBar" :width="asideWidth">
+    <q-layout view="lhr lpr lfr">
+        <q-drawer v-model="showAsideBar" :width="asideWidth">
             <div class="app-name"><span v-html="appName"></span></div>
-            <el-button class="el-button-collapse" @click="toggleCollapse" :icon="buttonCollapseIcon"></el-button>
+            <q-btn class="el-button-collapse" @click="toggleCollapse"></q-btn>
+
             <el-menu class="el-menu-vertical" :default-active="rootRoute" :collapse="isCollapse" router>
               <el-menu-item index="/cardindex">
                 <i class="el-icon-search"></i>
@@ -33,14 +34,14 @@
                 <span :class="itemTitleClass('/help')" slot="title">{{ this.itemRuText['/help'] }}</span>
               </el-menu-item>
             </el-menu>
-        </el-aside>
+        </q-drawer>
 
-        <el-main v-if="showMain" :style="{padding: (isReaderActive ? 0 : '5px')}">
+        <q-page-container>
             <keep-alive>
                 <router-view></router-view>
             </keep-alive>
-        </el-main>
-    </el-container>
+        </q-page-container>
+    </q-layout>
 </template>
 
 <script>
@@ -137,9 +138,9 @@ class App extends Vue {
 
     get asideWidth() {
         if (this.uistate.asideBarCollapse) {
-            return '64px';
+            return 64;
         } else {
-            return '170px';
+            return 170;
         }
     }
 
@@ -197,10 +198,6 @@ class App extends Vue {
         return this.rootRoute == '/reader';
     }
 
-    get showMain() {
-        return (this.showAsideBar || this.isReaderActive);
-    }
-
     redirectIfNeeded() {
         if ((this.mode == 'reader' || this.mode == 'omnireader') && (!this.isReaderActive)) {
             //старый url
@@ -228,52 +225,6 @@ class App extends Vue {
     line-height: 140%;
     font-weight: bold;
 }
-
-.bold-font {
-    font-weight: bold;
-}
-
-.el-container {
-    height: 100%;
-}
-
-.el-aside {
-    line-height: 1;
-    background-color: #ccc;
-    color: #000;
-}
-
-.el-main {
-    padding: 0;
-    background-color: #E6EDF4;
-    color: #000;
-}
-
-.el-menu-vertical:not(.el-menu--collapse) {
-    background-color: inherit;
-    color: inherit;
-    text-align: left;
-    width: 100%;
-    border: 0;
-}
-
-.el-menu--collapse {
-    background-color: inherit;
-    color: inherit;
-    border: 0;
-}
-
-.el-button-collapse, .el-button-collapse:focus, .el-button-collapse:active, .el-button-collapse:hover {
-    background-color: inherit;
-    color: inherit;
-    margin-top: 5px;
-    width: 100%;
-    height: 64px;
-    border: 0;
-}
-.el-menu-item {
-    font-size: 85%;
-}
 </style>
 
 <style>
diff --git a/client/components/CardIndex/Book/Book.vue b/client/components/CardIndex/Book/Book.vue
index 2bfe4c5c..0ed31bb5 100644
--- a/client/components/CardIndex/Book/Book.vue
+++ b/client/components/CardIndex/Book/Book.vue
@@ -1,7 +1,7 @@
 <template>
-    <el-container>
+    <div>
         Раздел Book в разработке
-    </el-container>
+    </div>
 </template>
 
 <script>
diff --git a/client/components/CardIndex/Card/Card.vue b/client/components/CardIndex/Card/Card.vue
index 2b0b72b5..2982bbf0 100644
--- a/client/components/CardIndex/Card/Card.vue
+++ b/client/components/CardIndex/Card/Card.vue
@@ -1,7 +1,7 @@
 <template>
-    <el-container>
+    <div>
         Раздел Card в разработке
-    </el-container>
+    </div>
 </template>
 
 <script>
diff --git a/client/components/CardIndex/CardIndex.vue b/client/components/CardIndex/CardIndex.vue
index 4b608c00..1e9c798d 100644
--- a/client/components/CardIndex/CardIndex.vue
+++ b/client/components/CardIndex/CardIndex.vue
@@ -1,15 +1,9 @@
 <template>
-    <el-container direction="vertical">
-        <el-tabs type="border-card" style="height: 100%;" v-model="selectedTab">
-            <el-tab-pane label="Поиск"></el-tab-pane>
-            <el-tab-pane label="Автор"></el-tab-pane>
-            <el-tab-pane label="Книга"></el-tab-pane>
-            <el-tab-pane label="История"></el-tab-pane>
-            <keep-alive>
-                <router-view></router-view>
-            </keep-alive>
-        </el-tabs>
-    </el-container>
+    <q-page>
+        <keep-alive>
+            <router-view></router-view>
+        </keep-alive>
+    </q-page>
 </template>
 
 <script>
diff --git a/client/components/CardIndex/History/History.vue b/client/components/CardIndex/History/History.vue
index 91ecd6cc..22d8cd90 100644
--- a/client/components/CardIndex/History/History.vue
+++ b/client/components/CardIndex/History/History.vue
@@ -1,7 +1,7 @@
 <template>
-    <el-container>
+    <div>
         Раздел History в разработке
-    </el-container>
+    </div>
 </template>
 
 <script>
diff --git a/client/components/CardIndex/Search/Search.vue b/client/components/CardIndex/Search/Search.vue
index 978492c4..5ae5d345 100644
--- a/client/components/CardIndex/Search/Search.vue
+++ b/client/components/CardIndex/Search/Search.vue
@@ -1,7 +1,7 @@
 <template>
-    <el-container>
+    <div>
         Раздел Search в разработке
-    </el-container>
+    </div>
 </template>
 
 <script>
diff --git a/client/components/Help/Help.vue b/client/components/Help/Help.vue
index 034eda42..becfe562 100644
--- a/client/components/Help/Help.vue
+++ b/client/components/Help/Help.vue
@@ -1,7 +1,7 @@
 <template>
-    <el-container>
+    <q-page>
         Раздел Help в разработке
-    </el-container>
+    </q-page>
 </template>
 
 <script>
diff --git a/client/components/Income/Income.vue b/client/components/Income/Income.vue
index 5dc9200e..5de23dca 100644
--- a/client/components/Income/Income.vue
+++ b/client/components/Income/Income.vue
@@ -1,7 +1,7 @@
 <template>
-    <el-container>
+    <q-page>
         Раздел Income в разработке
-    </el-container>
+    </q-page>
 </template>
 
 <script>
diff --git a/client/components/NotFound404/NotFound404.vue b/client/components/NotFound404/NotFound404.vue
index 3ba5df9c..ce7342df 100644
--- a/client/components/NotFound404/NotFound404.vue
+++ b/client/components/NotFound404/NotFound404.vue
@@ -1,7 +1,7 @@
 <template>
-    <el-container>
+    <q-page>
         Страница не найдена
-    </el-container>
+    </q-page>
 </template>
 
 <script>
diff --git a/client/components/Reader/Reader.vue b/client/components/Reader/Reader.vue
index 6276f506..6b1a6cd2 100644
--- a/client/components/Reader/Reader.vue
+++ b/client/components/Reader/Reader.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-container>
+    <q-page>
         <el-header v-show="toolBarActive" height='50px'>
             <div ref="header" class="header">
                 <el-tooltip content="Загрузить книгу" :open-delay="1000" effect="light">
@@ -138,7 +138,7 @@
             </el-dialog>
 
         </el-main>
-    </el-container>
+    </q-page>
 </template>
 
 <script>
diff --git a/client/components/Settings/Settings.vue b/client/components/Settings/Settings.vue
index 838abf6b..39f9565d 100644
--- a/client/components/Settings/Settings.vue
+++ b/client/components/Settings/Settings.vue
@@ -1,7 +1,7 @@
 <template>
-    <el-container>
+    <q-page>
         Раздел Settings в разработке
-    </el-container>
+    </q-page>
 </template>
 
 <script>
diff --git a/client/components/Sources/Sources.vue b/client/components/Sources/Sources.vue
index 18142e92..e0985fe7 100644
--- a/client/components/Sources/Sources.vue
+++ b/client/components/Sources/Sources.vue
@@ -1,7 +1,7 @@
 <template>
-    <el-container>
+    <q-page>
         Раздел Sources в разработке
-    </el-container>
+    </q-page>
 </template>
 
 <script>
diff --git a/client/quasar.js b/client/quasar.js
index 0ba4a46d..f8c4aad5 100644
--- a/client/quasar.js
+++ b/client/quasar.js
@@ -4,6 +4,10 @@ import 'quasar/dist/quasar.css';
 import Quasar from 'quasar/src/vue-plugin.js'
 
 //components
+import {QLayout} from 'quasar/src/components/layout';
+import {QPageContainer, QPage} from 'quasar/src/components/page';
+import {QDrawer} from 'quasar/src/components/drawer';
+
 import {QCircularProgress} from 'quasar/src/components/circular-progress';
 import {QInput} from 'quasar/src/components/input';
 import {QBtn} from 'quasar/src/components/btn';
@@ -22,6 +26,7 @@ import AppFullscreen from 'quasar/src/plugins/AppFullscreen';
 const config = {};
 
 const components = {
+    QLayout, QPageContainer, QPage, QDrawer,
     QCircularProgress,
     QInput,
     QBtn,