diff --git a/Site/BaseFront/Front/src/baselistmodel.cpp b/Site/BaseFront/Front/src/baselistmodel.cpp
deleted file mode 100644
index b3f8c12..0000000
--- a/Site/BaseFront/Front/src/baselistmodel.cpp
+++ /dev/null
@@ -1,32 +0,0 @@
-#include "baselistmodel.h"
-namespace BaseFront {
-
-BaseListModel::BaseListModel(QObject *ptr):
-    QAbstractListModel(ptr) {
-
-}
-
-bool BaseListModel::canFetchMore(const QModelIndex &) const {
-    return false /*_itemCount != rowCount()*/;
-}
-
-void BaseListModel::fetchMore(const QModelIndex &) {
-//    int remainder = rowCount() - _itemCount;
-//    int itemsToFetch = qMin(100, remainder);
-
-//    if (itemsToFetch < 0) {
-//        beginRemoveRows(QModelIndex(), 0, 0 - itemsToFetch - 1 );
-
-//        _itemCount += itemsToFetch;
-
-//        endRemoveRows();
-//    } else if (itemsToFetch > 0) {
-//        beginInsertRows(QModelIndex(), _itemCount, _itemCount + itemsToFetch - 1);
-
-//        _itemCount += itemsToFetch;
-
-//        endInsertRows();
-//    }
-
-}
-}
diff --git a/Site/BaseFront/Front/src/baselistmodel.h b/Site/BaseFront/Front/src/baselistmodel.h
deleted file mode 100644
index 3e58e6f..0000000
--- a/Site/BaseFront/Front/src/baselistmodel.h
+++ /dev/null
@@ -1,23 +0,0 @@
-#ifndef BASELISTMODEL_H
-#define BASELISTMODEL_H
-#include "BaseFront_global.h"
-#include <QAbstractListModel>
-
-namespace BaseFront {
-
-class BASEFRONT_LIBRARYSHARED_EXPORT BaseListModel: public QAbstractListModel
-{
-    Q_OBJECT
-
-public:
-    BaseListModel(QObject* ptr = nullptr);
-
-    bool canFetchMore(const QModelIndex & /* index */) const;
-    void fetchMore(const QModelIndex & /* index */);
-
-private:
-    int _itemCount = 0;
-};
-
-}
-#endif // BASELISTMODEL_H
diff --git a/Site/BaseFront/Front/src/listviewmodel.cpp b/Site/BaseFront/Front/src/listviewmodel.cpp
deleted file mode 100644
index 42d2d84..0000000
--- a/Site/BaseFront/Front/src/listviewmodel.cpp
+++ /dev/null
@@ -1,102 +0,0 @@
-#include "listviewmodel.h"
-namespace BaseFront {
-
-ListViewModel::ListViewModel(QObject *ptr):
-    BaseListModel(ptr){
-
-}
-
-ListViewModel::~ListViewModel() {
-    clear();
-}
-
-int ListViewModel::rowCount(const QModelIndex &) const {
-    if (external())
-        return _externalData->size();
-
-    return _data.size();
-}
-
-QVariant ListViewModel::data(const QModelIndex &index, int role) const {
-
-    if (index.row() < rowCount(index)) {
-        if (static_cast<ListViewModelRoles>(role) == ListViewModelRoles::Blok) {
-            QObject *item = (external())? _externalData->value(index.row()) : _data.value(index.row());
-            return QVariant::fromValue(item);
-        }
-    }
-
-    return {};
-}
-
-QHash<int, QByteArray> ListViewModel::roleNames() const {
-    QHash<int, QByteArray> roles;
-    roles[static_cast<int>(ListViewModelRoles::Blok)] = "block";
-
-    return roles;
-}
-
-void ListViewModel::setExternalSource(const QList<InfoBlock *> *newData) {
-    if (external()) {
-        beginResetModel();
-        _externalData = newData;
-        endResetModel();
-    } else {
-        _externalData = newData;
-    }
-
-    setExternal(true);
-
-}
-
-void ListViewModel::setSource(const QList<InfoBlock*> &newData) {
-
-    if (!external()) {
-        beginResetModel();
-
-        clear(true);
-        _data = newData;
-
-        endResetModel();
-    } else {
-        clear(true);
-        _data = newData;
-    }
-
-    setExternal(false);
-}
-
-void ListViewModel::addSource(InfoBlock* data) {
-    if (!external()) {
-        beginInsertRows(QModelIndex(), rowCount(), rowCount());
-        _data.push_back(data);
-        endInsertRows();
-    } else {
-        _data.push_back(data);
-    }
-}
-
-void ListViewModel::clear(bool fast) {
-    for (auto i : _data) {
-        if (fast) {
-            i->deleteLater();
-        } else {
-            delete i;
-        }
-    }
-
-    _data.clear();
-}
-
-bool ListViewModel::external() const {
-    return _external;
-}
-
-void ListViewModel::setExternal(bool external) {
-    if (external != _external) {
-        beginResetModel();
-        _external = external;
-        endResetModel();
-    }
-}
-}
diff --git a/Site/BaseFront/Front/src/listviewmodel.h b/Site/BaseFront/Front/src/listviewmodel.h
deleted file mode 100644
index 591fe4f..0000000
--- a/Site/BaseFront/Front/src/listviewmodel.h
+++ /dev/null
@@ -1,42 +0,0 @@
-#ifndef LISTVIEWMODEL_H
-#define LISTVIEWMODEL_H
-#include "BaseFront_global.h"
-#include "infoblock.h"
-#include "baselistmodel.h"
-
-
-namespace BaseFront {
-
-enum class ListViewModelRoles {
-    Blok = Qt::UserRole
-};
-
-class BASEFRONT_LIBRARYSHARED_EXPORT ListViewModel: public BaseListModel
-{
-    Q_OBJECT
-public:
-    ListViewModel(QObject *ptr = nullptr);
-    ~ListViewModel();
-
-    int rowCount(const QModelIndex &parent =  QModelIndex()) const;
-    QVariant data(const QModelIndex &index, int role) const;
-    QHash<int, QByteArray> roleNames() const;
-
-    void setExternalSource(const QList<InfoBlock*>* newData);
-    void setSource(const QList<InfoBlock*>& newData);
-    void addSource(InfoBlock *data);
-
-    void clear(bool fast = false);
-
-    bool external() const;
-
-private:
-    void setExternal(bool external);
-
-    bool _external = false;
-    QList<InfoBlock*> _data;
-    const QList<InfoBlock*> *_externalData = nullptr;
-
-};
-}
-#endif // LISTVIEWMODEL_H
diff --git a/Site/BaseFront/Front/src/pageinfo.cpp b/Site/BaseFront/Front/src/pageinfo.cpp
new file mode 100644
index 0000000..ebaa10b
--- /dev/null
+++ b/Site/BaseFront/Front/src/pageinfo.cpp
@@ -0,0 +1,44 @@
+#include "pageinfo.h"
+namespace BaseFront {
+
+PageInfo::PageInfo() {
+
+}
+
+QString PageInfo::banner() const {
+    return m_banner;
+}
+
+QString PageInfo::shortCut() const {
+    return m_shortCut;
+}
+
+QString PageInfo::page() const {
+    return m_page;
+}
+
+void PageInfo::setBanner(QString banner) {
+    if (m_banner == banner)
+        return;
+
+    m_banner = banner;
+    emit bannerChanged(m_banner);
+}
+
+void BaseFront::PageInfo::setShortCut(QString shortCut) {
+    if (m_shortCut == shortCut)
+        return;
+
+    m_shortCut = shortCut;
+    emit shortCutChanged(m_shortCut);
+}
+
+void PageInfo::setPage(QString page) {
+    if (m_page == page)
+        return;
+
+    m_page = page;
+    emit pageChanged(m_page);
+}
+
+}
diff --git a/Site/BaseFront/Front/src/pageinfo.h b/Site/BaseFront/Front/src/pageinfo.h
new file mode 100644
index 0000000..55c3dc5
--- /dev/null
+++ b/Site/BaseFront/Front/src/pageinfo.h
@@ -0,0 +1,38 @@
+#ifndef PAGEINFO_H
+#define PAGEINFO_H
+
+#include <QObject>
+namespace BaseFront {
+class PageInfo : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(QString banner READ banner WRITE setBanner NOTIFY bannerChanged)
+    Q_PROPERTY(QString shortCut READ shortCut WRITE setShortCut NOTIFY shortCutChanged)
+    Q_PROPERTY(QString page READ page WRITE setPage NOTIFY pageChanged)
+
+public:
+    PageInfo();
+    QString banner() const;
+    QString shortCut() const;
+
+    QString page() const;
+
+public slots:
+    void setBanner(QString banner);
+    void setShortCut(QString shortCut);
+
+    void setPage(QString page);
+
+signals:
+    void bannerChanged(QString banner);
+    void shortCutChanged(QString shortCut);
+    void pageChanged(QString page);
+
+private:
+    QString m_banner;
+    QString m_shortCut;
+    QString m_page;
+};
+
+}
+#endif // PAGEINFO_H
diff --git a/Site/deployWasm.json b/Site/deployWasm.json
index c813ab8..ca5dd0c 100644
--- a/Site/deployWasm.json
+++ b/Site/deployWasm.json
@@ -6,6 +6,10 @@
         "./src/Wrapper/qtloader.js",
         "./src/Wrapper/index.html"
     ],
+    "extraPlugin": [
+        "./src/html",
+        "./src/images"
+    ],
     "binOut": "/",
     "clear": true,
     "libOut": "/",
diff --git a/Site/src/Models/abstractpage.cpp b/Site/src/Models/abstractpage.cpp
new file mode 100644
index 0000000..00bd3d3
--- /dev/null
+++ b/Site/src/Models/abstractpage.cpp
@@ -0,0 +1,22 @@
+#include "abstractpage.h"
+#include <infoblock.h>
+#include <quasarapp.h>
+
+AbstractPage::AbstractPage()
+{
+
+}
+
+QObject * AbstractPage::makeBlok() const {
+    auto block = new BaseFront::InfoBlock();
+
+    block->setTitle(title());
+    block->setSourceText(data());
+    block->setBakcBroundPicture(backgroud());
+
+    return block;
+}
+
+QString AbstractPage::resourcesPath() const {
+    return QuasarAppUtils::Params::getCurrentExecutableDir() + "/plugins/images";
+}
diff --git a/Site/src/Models/abstractpage.h b/Site/src/Models/abstractpage.h
new file mode 100644
index 0000000..1e6c606
--- /dev/null
+++ b/Site/src/Models/abstractpage.h
@@ -0,0 +1,51 @@
+#ifndef ABSTRACTPAGE_H
+#define ABSTRACTPAGE_H
+
+#include <QObject>
+#include <QString>
+
+/**
+ * @brief The AbstractPage class - This is interface of all text pages on cpp.
+ */
+class AbstractPage: public QObject
+{
+    Q_OBJECT
+public:
+    AbstractPage();
+
+    /**
+     * @brief data This is base method for get text data of page.
+     * All data must be use the tr method of qt.
+     * @return transalted text.
+     */
+    virtual QString data() const = 0;
+
+    /**
+     * @brief title This method return title of page.
+     * @return title of page.
+     */
+    virtual QString title() const = 0;
+
+    /**
+     * @brief backgroud This is path to image or video of background.
+     * @return path to backgroud.
+     */
+    virtual QString backgroud() const = 0;
+
+
+    /**
+     * @brief makeBlok This method build infoblock from available data.
+     * @return the page data
+     */
+    QObject *makeBlok() const;
+
+protected:
+    /**
+     * @brief resourcesPath This method return path to resources of site.
+     * By Default this is plugins folder.
+     * @return path tot resources.
+     */
+    QString resourcesPath() const;
+};
+
+#endif // ABSTRACTPAGE_H
diff --git a/Site/src/Models/mainmodel.cpp b/Site/src/Models/mainmodel.cpp
index f0c6c68..96028c0 100644
--- a/Site/src/Models/mainmodel.cpp
+++ b/Site/src/Models/mainmodel.cpp
@@ -1,16 +1,39 @@
 #include "mainmodel.h"
+#include "quasarapppage.h"
 #include "reader.h"
+#include <qasarapporder.h>
 #include <quasarapp.h>
+#include <quasarappsupportplatforms.h>
 
 MainModel::MainModel(QObject *parent) : QObject(parent) {
-    setListModel(new ViewSolutions::ListViewModel(this));
+    setPageModel(new ViewSolutions::ListViewModel(this));
+    setPageListModel(new ViewSolutions::ListViewModel(this));
+    _reader = new BaseFront::Reader();
     initQuasarApp();
 }
 
+void MainModel::clearPages() {
+    for (auto value : _QuasarAppPages) {
+        if (value) {
+            for (auto object: *value) {
+                delete object;
+            }
+            value->clear();
+        }
+    }
+    _QuasarAppPages.clear();
+}
+
+MainModel::~MainModel() {
+    delete _reader;
+    clearPages();
+}
+
 bool MainModel::openPage(const QString &url) {
 
-    if (url == "QuasarApp") {
-        _listModel->setExternalSource(_QuasarAppPage);
+    auto list = _QuasarAppPages.value(url, nullptr);
+    if (list) {
+        _pageModel->setExternalSource(list);
         return true;
     }
 
@@ -42,76 +65,51 @@ void MainModel::changeLanguage(int code) {
     }
 }
 
-QObject *MainModel::listModel() const {
-    return _listModel;
+QObject *MainModel::pageModel() const {
+    return _pageModel;
 }
 
-void MainModel::setListModel(QObject *listModel) {
-    auto model = dynamic_cast<ViewSolutions::ListViewModel*>(listModel);
-    if (!model || _listModel == model)
+QObject *MainModel::pageListModel() const {
+    return _pageListModel;
+}
+
+void MainModel::setPageModel(QObject *pageModel) {
+    auto model = dynamic_cast<ViewSolutions::ListViewModel*>(pageModel);
+
+    if (!model || _pageModel == model)
         return;
 
-    _listModel = model;
-    emit listModelChanged(_listModel);
+    _pageModel = model;
+    emit pageModelChanged(_pageModel);
+}
+
+void MainModel::setPageListModel(QObject *pageListModel) {
+    auto model = dynamic_cast<ViewSolutions::ListViewModel*>(pageListModel);
+
+    if (!model || _pageListModel == model)
+        return;
+
+    _pageListModel = model;
+    emit pageListModelChanged(_pageListModel);
+}
+
+template<class Type>
+void makePage(QList<QObject *> *page, const Type& blockData) {
+    page->push_back(blockData.makeBlok());
+}
+
+template<class Type, class ... Types>
+void makePage(QList<QObject *> *page, const Type& blockData, const Types& ... data) {
+    if (page) {
+        page->push_back(blockData.makeBlok());
+        makePage(page, data...);
+    }
 }
 
 void MainModel::initQuasarApp() {
-    if (_QuasarAppPage) {
-        return;
-    }
-
-    _QuasarAppPage = new QList<QObject*>();
-
-    auto block = new BaseFront::InfoBlock(this);
-    _QuasarAppPage->push_back(block);
-
-    block->setTitle(tr("QuasarApp Group"));
-
-    QString sourceText = tr("The <b>QuasarApp</b> is developing open source mobile and desktop applications.<br><br>"
-                            "Our company has ben created on 2017 year and have experians of develepment android and desctop applications and games."
-                            "<br><br>");
-
-    sourceText += tr("During our existence, we have accumulated more than 40 software components and ready-made solutions for the most diverse tasks.<br>"
-                     "This approach allows us now to create final products with impressive speed. If you have an idea for the application, we will hear you."
-                     );
-
-    block->setSourceText(sourceText);
-    block->setBakcBroundPicture("qrc:/img/images/LOGO.png");
-
-
-    block = new BaseFront::InfoBlock(this);
-    _QuasarAppPage->push_back(block);
-
-    block->setTitle(tr("Supported Platforms"));
-
-    sourceText = tr("At the moment, we can offer support for our solutions for the following platforms:<br><br>");
-
-    sourceText += tr("- <i> Linux </i><br>"
-                     "- <i> Windows </i><br>"
-                     "- <i> Android </i><br>"
-                     "- <i> Web </i>");
-
-    block->setSourceText(sourceText);
-    block->setBakcBroundPicture("qrc:/img/images/crossplatforms.png");
-
-    block = new BaseFront::InfoBlock(this);
-    _QuasarAppPage->push_back(block);
-
-    block->setTitle(tr("Order a project."));
-
-    sourceText = tr("We are always happy to help you realize your best and most fantastic ideas."
-                    "<br><br>"
-                    "If you have an idea for the application, then you can leave a request to create a project with us on GitHub."
-                    " All that is required of you is a detailed description of what needs to be done. Further,"
-                    " our specialists will decide when work will begin on the project and how much resources will be allocated to the project."
-                    "<br><br>"
-                    "That how many resources will be allocated for the development depends on how much this project will collect cash donations."
-                    "<br><br>"
-                    "You can also request a private project exclusively for you, but such a project can no longer be free.");
-
-    block->setSourceText(sourceText);
-    block->setBakcBroundPicture("qrc:/img/images/startup.png");
-
+    auto page = new QList<QObject*>();
+    makePage(page, QuasarAppPage{}, QuasarAppSupportPlatforms{}, QasarAppOrder{});
+    _QuasarAppPages.insert("QuasarApp", page);
 
 }
 
diff --git a/Site/src/Models/mainmodel.h b/Site/src/Models/mainmodel.h
index c17b074..e843f5c 100644
--- a/Site/src/Models/mainmodel.h
+++ b/Site/src/Models/mainmodel.h
@@ -10,30 +10,44 @@ enum class Languages {
     RU
 };
 
+class AbstractPage;
+namespace BaseFront {
+class Reader;
+}
+
 class MainModel : public QObject
 {
     Q_OBJECT
 
-    Q_PROPERTY(QObject* listModel READ listModel WRITE setListModel NOTIFY listModelChanged)
+    Q_PROPERTY(QObject* pageModel READ pageModel WRITE setPageModel NOTIFY pageModelChanged)
+    Q_PROPERTY(QObject* pageListModel READ pageListModel WRITE setPageListModel NOTIFY pageListModelChanged)
 
 public:
     explicit MainModel(QObject *parent = nullptr);
+    ~MainModel();
     Q_INVOKABLE bool openPage(const QString& url);
     Q_INVOKABLE void changeLanguage(int code);
 
-    QObject* listModel() const;
+
+    QObject* pageModel() const;
+    QObject* pageListModel() const;
 
 public slots:
-    void setListModel(QObject* listModel);
+    void setPageModel(QObject* pageModel);
+    void setPageListModel(QObject* pageListModel);
 
 signals:
-
-    void listModelChanged(QObject* listModel);
+    void pageModelChanged(QObject* pageModel);
+    void pageListModelChanged(QObject* pageListModel);
 
 private:
     void initQuasarApp();
-    QList<QObject*> * _QuasarAppPage = nullptr;
-    ViewSolutions::ListViewModel *_listModel = nullptr;
+    void clearPages();
+
+    QHash<QString, QList<QObject*>*> _QuasarAppPages;
+    ViewSolutions::ListViewModel *_pageModel = nullptr;
+    ViewSolutions::ListViewModel *_pageListModel = nullptr;
+    BaseFront::Reader * _reader;
 };
 
 #endif // MAINPAGE_H
diff --git a/Site/src/Models/pagemaker.h b/Site/src/Models/pagemaker.h
new file mode 100644
index 0000000..a763d80
--- /dev/null
+++ b/Site/src/Models/pagemaker.h
@@ -0,0 +1,12 @@
+#ifndef PAGEMAKER_H
+#define PAGEMAKER_H
+
+
+class PageMaker
+{
+public:
+    PageMaker();
+
+};
+
+#endif // PAGEMAKER_H
diff --git a/Site/src/Models/qasarapporder.cpp b/Site/src/Models/qasarapporder.cpp
new file mode 100644
index 0000000..3f21d4c
--- /dev/null
+++ b/Site/src/Models/qasarapporder.cpp
@@ -0,0 +1,28 @@
+#include "qasarapporder.h"
+
+QasarAppOrder::QasarAppOrder()
+{
+
+}
+
+QString QasarAppOrder::data() const {
+    auto sourceText = tr("We are always happy to help you realize your best and most fantastic ideas."
+                    "<br><br>"
+                    "If you have an idea for the application, then you can leave a request to create a project with us on GitHub."
+                    " All that is required of you is a detailed description of what needs to be done. Further,"
+                    " our specialists will decide when work will begin on the project and how much resources will be allocated to the project."
+                    "<br><br>"
+                    "That how many resources will be allocated for the development depends on how much this project will collect cash donations."
+                    "<br><br>"
+                    "You can also request a private project exclusively for you, but such a project can no longer be free.");
+
+    return sourceText;
+}
+
+QString QasarAppOrder::title() const {
+    return tr("Order a project.");
+}
+
+QString QasarAppOrder::backgroud() const {
+    return resourcesPath() + "/startup.png";
+}
diff --git a/Site/src/Models/qasarapporder.h b/Site/src/Models/qasarapporder.h
new file mode 100644
index 0000000..ba4ea9e
--- /dev/null
+++ b/Site/src/Models/qasarapporder.h
@@ -0,0 +1,20 @@
+#ifndef QASARAPPORDER_H
+#define QASARAPPORDER_H
+
+#include <abstractpage.h>
+
+
+
+class QasarAppOrder: public AbstractPage
+{
+public:
+    QasarAppOrder();
+
+    // AbstractPage interface
+public:
+    QString data() const override;
+    QString title() const override;
+    QString backgroud() const override;
+};
+
+#endif // QASARAPPORDER_H
diff --git a/Site/src/Models/quasarapppage.cpp b/Site/src/Models/quasarapppage.cpp
new file mode 100644
index 0000000..aeff38d
--- /dev/null
+++ b/Site/src/Models/quasarapppage.cpp
@@ -0,0 +1,30 @@
+#include "quasarapppage.h"
+
+QuasarAppPage::QuasarAppPage() {
+
+}
+
+QString QuasarAppPage::data() const {
+
+    auto sourceText = tr("The <b>QuasarApp</b> is developing open source mobile and desktop"
+                         " applications.<br><br>"
+                         "Our company has been created on 2017 year and have"
+                         " experians of develepment android and desctop applications and games."
+                         "<br><br>");
+
+    sourceText += tr("During our existence,"
+                     " we have accumulated more than 40 software components and ready-made solutions"
+                     " for the most diverse tasks.<br>"
+                     "This approach allows us now to create final products with impressive speed."
+                     " If you have an idea for the application, we will hear you."
+                     );
+    return sourceText;
+}
+
+QString QuasarAppPage::title() const {
+    return tr("QuasarApp Group");
+}
+
+QString QuasarAppPage::backgroud() const {
+    return resourcesPath() + "/LOGO.png";
+}
diff --git a/Site/src/Models/quasarapppage.h b/Site/src/Models/quasarapppage.h
new file mode 100644
index 0000000..7c069eb
--- /dev/null
+++ b/Site/src/Models/quasarapppage.h
@@ -0,0 +1,21 @@
+#ifndef QUASARAPPPAGE_H
+#define QUASARAPPPAGE_H
+
+#include "abstractpage.h"
+
+/**
+ * @brief The QuasarAppPage class - This is page about QuasarApp
+ */
+class QuasarAppPage: public AbstractPage
+{
+public:
+    QuasarAppPage();
+
+    // AbstractPage interface
+    QString data() const override;
+    QString title() const override;
+    QString backgroud() const override;
+
+};
+
+#endif // QUASARAPPPAGE_H
diff --git a/Site/src/Models/quasarappsupportplatforms.cpp b/Site/src/Models/quasarappsupportplatforms.cpp
new file mode 100644
index 0000000..0771164
--- /dev/null
+++ b/Site/src/Models/quasarappsupportplatforms.cpp
@@ -0,0 +1,25 @@
+#include "quasarappsupportplatforms.h"
+
+QuasarAppSupportPlatforms::QuasarAppSupportPlatforms()
+{
+
+}
+
+QString QuasarAppSupportPlatforms::data() const {
+    auto sourceText = tr("At the moment, we can offer support for our solutions for the following platforms:<br><br>");
+
+    sourceText += tr("- <i> Linux </i><br>"
+                     "- <i> Windows </i><br>"
+                     "- <i> Android </i><br>"
+                     "- <i> Web </i>");
+
+    return sourceText;
+}
+
+QString QuasarAppSupportPlatforms::title() const {
+    return tr("Supported Platforms");
+}
+
+QString QuasarAppSupportPlatforms::backgroud() const {
+    return resourcesPath() + "/crossplatforms.png";
+}
diff --git a/Site/src/Models/quasarappsupportplatforms.h b/Site/src/Models/quasarappsupportplatforms.h
new file mode 100644
index 0000000..f1873dc
--- /dev/null
+++ b/Site/src/Models/quasarappsupportplatforms.h
@@ -0,0 +1,18 @@
+#ifndef QUASARAPPSUPPORTPLATFORMS_H
+#define QUASARAPPSUPPORTPLATFORMS_H
+
+#include <abstractpage.h>
+
+class QuasarAppSupportPlatforms: public AbstractPage
+{
+public:
+    QuasarAppSupportPlatforms();
+
+    // AbstractPage interface
+public:
+    QString data() const override;
+    QString title() const override;
+    QString backgroud() const override;
+};
+
+#endif // QUASARAPPSUPPORTPLATFORMS_H
diff --git a/Site/src/View/Header.qml b/Site/src/View/Header.qml
index 956bd39..62c1cfb 100644
--- a/Site/src/View/Header.qml
+++ b/Site/src/View/Header.qml
@@ -1,14 +1,15 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Controls.Material 2.14
-import QtQuick.Controls.Universal 2.14
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Controls.Material 2.15
+import QtQuick.Controls.Universal 2.15
 import ViewSolutionsModule 1.0
-import QtQuick.Layouts 1.14
+import QtQuick.Layouts 1.15
 
 
 ToolBar {
 
     property string currentPage: privateRoot.pages[privateRoot.currentItem]
+    signal sideBar()
 
     RowLayout {
         id: privateRoot
@@ -16,92 +17,106 @@ ToolBar {
         property var pages: [
             "QuasarApp"
         ]
-        ImageView {
-            background: (0 == privateRoot.currentItem)? Material.accent : "#00000000"
-            Layout.fillHeight: true
-            Layout.preferredWidth: height * 1
-            soucre : "qrc:/img/images/LOGO.png"
-            toolTip: qsTr("Back to main page");
-            power: 1.9
 
-            onClicked: {
-                privateRoot.currentItem = 0
-            }
+        ToolButton {
+            action: navigateBackAction
+            text: "☰"
+            font.pointSize: 20
         }
 
-        ImageView {
-            background: (1 == privateRoot.currentItem)? Material.accent : "#00000000"
-            Layout.fillHeight: true
-            Layout.preferredWidth: height * 1
-            soucre : "qrc:/img/images/CQtDeployer logo.png"
-            toolTip: qsTr("Crossplatform tool for deploying cpp applications." +
-                          " The CQtDeployer is application for extract all depends library of executable and create launch script for your application.");
+//        ImageView {
+//            background: (0 == privateRoot.currentItem)? Material.accent : "#00000000"
+//            Layout.fillHeight: true
+//            Layout.preferredWidth: height * 1
+//            soucre : "qrc:/img/images/LOGO.png"
+//            toolTip: qsTr("Back to main page");
+//            power: 1.9
 
-            power: 1.9
-            onClicked: {
-                privateRoot.currentItem = 1
-            }
-        }
+//            onClicked: {
+//                privateRoot.currentItem = 0
+//            }
+//        }
 
-        ImageView {
-            background: (2 == privateRoot.currentItem)? Material.accent : "#00000000"
-            Layout.fillHeight: true
-            Layout.preferredWidth: height * 1
-            soucre : "qrc:/img/images/Qt-Secret Logo.png"
-            toolTip: qsTr("Fast encryption library supporting RSA and AES algorithms.");
+//        ImageView {
+//            background: (1 == privateRoot.currentItem)? Material.accent : "#00000000"
+//            Layout.fillHeight: true
+//            Layout.preferredWidth: height * 1
+//            soucre : "qrc:/img/images/CQtDeployer logo.png"
+//            toolTip: qsTr("Crossplatform tool for deploying cpp applications." +
+//                          " The CQtDeployer is application for extract all depends library of executable and create launch script for your application.");
 
-            power: 1.9
-            onClicked: {
-                privateRoot.currentItem = 2
-            }
-        }
+//            power: 1.9
+//            onClicked: {
+//                privateRoot.currentItem = 1
+//            }
+//        }
 
-        ImageView {
-            background: (3 == privateRoot.currentItem)? Material.accent : "#00000000"
-            Layout.fillHeight: true
-            Layout.preferredWidth: height * 1
-            soucre : "qrc:/img/images/HanoiTowers.png"
-            toolTip: qsTr("Simple Crossplatform game");
+//        ImageView {
+//            background: (2 == privateRoot.currentItem)? Material.accent : "#00000000"
+//            Layout.fillHeight: true
+//            Layout.preferredWidth: height * 1
+//            soucre : "qrc:/img/images/Qt-Secret Logo.png"
+//            toolTip: qsTr("Fast encryption library supporting RSA and AES algorithms.");
 
-            power: 1.9
-            onClicked: {
-                privateRoot.currentItem = 3
-            }
-        }
+//            power: 1.9
+//            onClicked: {
+//                privateRoot.currentItem = 2
+//            }
+//        }
 
-        ImageView {
-            background: (4 == privateRoot.currentItem)? Material.accent : "#00000000"
-            Layout.fillHeight: true
-            Layout.preferredWidth: height * 1
-            soucre : "qrc:/img/images/QtBigint Logo.png"
-            toolTip: qsTr("QtBigInt - Arbitrary-sized integer class for C++ and build system qmake and cmake. Power by minigmp.");
+//        ImageView {
+//            background: (3 == privateRoot.currentItem)? Material.accent : "#00000000"
+//            Layout.fillHeight: true
+//            Layout.preferredWidth: height * 1
+//            soucre : "qrc:/img/images/HanoiTowers.png"
+//            toolTip: qsTr("Simple Crossplatform game");
 
-            power: 1.9
-            onClicked: {
-                privateRoot.currentItem = 4
-            }
-        }
+//            power: 1.9
+//            onClicked: {
+//                privateRoot.currentItem = 3
+//            }
+//        }
+
+//        ImageView {
+//            background: (4 == privateRoot.currentItem)? Material.accent : "#00000000"
+//            Layout.fillHeight: true
+//            Layout.preferredWidth: height * 1
+//            soucre : "qrc:/img/images/QtBigint Logo.png"
+//            toolTip: qsTr("QtBigInt - Arbitrary-sized integer class for C++ and build system qmake and cmake. Power by minigmp.");
+
+//            power: 1.9
+//            onClicked: {
+//                privateRoot.currentItem = 4
+//            }
+//        }
         Item {
             Layout.fillWidth: true
 
         }
 
-        ColumnLayout {
-            Languages {
-                Layout.fillHeight: true
-                itemHeigh: privateRoot.height * 0.4
-            }
+        Languages {
+            Layout.fillHeight: true
+            itemHeigh: privateRoot.height
+        }
 
-            Switch {
-                text: qsTr("Dark Mode")
+        Switch {
+            text: qsTr("Dark Mode")
 
-                onCheckedChanged: {
-                    applicationRoot.Material.theme = (checked)? Material.Dark: Material.Light
-                }
+            onCheckedChanged: {
+                applicationRoot.Material.theme = (checked)? Material.Dark: Material.Light
             }
         }
 
+
         anchors.fill: parent
     }
 
+    Action {
+        id: navigateBackAction
+        onTriggered: {
+            sideBar()
+        }
+    }
+
+
 }
diff --git a/Site/src/View/Languages.qml b/Site/src/View/Languages.qml
index c013a4c..eb6cc46 100644
--- a/Site/src/View/Languages.qml
+++ b/Site/src/View/Languages.qml
@@ -1,14 +1,14 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Controls.Material 2.14
-import QtQuick.Controls.Universal 2.14
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Controls.Material 2.15
+import QtQuick.Controls.Universal 2.15
 import ViewSolutionsModule 1.0
 import QtQuick.Layouts 1.14
 
 RowLayout {
     id: root
     property int currentItem : 0;
-    property int itemHeigh : root.parent.height * 0.4;
+    property int itemHeigh : root.parent.height ;
 
     onCurrentItemChanged: {
         mainModel.changeLanguage(currentItem);
diff --git a/Site/src/View/ListViewer.qml b/Site/src/View/ListViewer.qml
index 513b506..d801fd3 100644
--- a/Site/src/View/ListViewer.qml
+++ b/Site/src/View/ListViewer.qml
@@ -1,7 +1,7 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Controls.Material 2.14
-import QtQuick.Controls.Universal 2.14
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Controls.Material 2.15
+import QtQuick.Controls.Universal 2.15
 import QtQuick.Layouts 1.14
 
 import ViewSolutionsModule 1.0
diff --git a/Site/src/View/SideBar.qml b/Site/src/View/SideBar.qml
new file mode 100644
index 0000000..d22c8fd
--- /dev/null
+++ b/Site/src/View/SideBar.qml
@@ -0,0 +1,31 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Controls.Material 2.15
+import QtQuick.Window 2.15
+
+import ViewSolutionsModule 1.0
+
+Drawer {
+    id: root
+    width: Math.max(parent.width * 0.3, 50 * Screen.pixelDensity)
+    height: parent.height
+
+    ListView {
+        id: viewPort
+        property real globalPos: 0
+
+        delegate: Component {
+            ImageView {
+                property var data: modelData
+
+                anchors.fill: parent
+                soucre:  "qrc:/img/res/LOGO.png"
+                text: "QuasarApp"
+                toolTip: "QuasarApp Group"
+                anchors.margins: 20
+                borderColor: "#00a4e1"
+            }
+        }
+
+    }
+}
diff --git a/Site/src/View/main.qml b/Site/src/View/main.qml
index 841cf93..46e1aaa 100644
--- a/Site/src/View/main.qml
+++ b/Site/src/View/main.qml
@@ -1,7 +1,7 @@
-import QtQuick 2.14
-import QtQuick.Window 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Controls.Material 2.14
+import QtQuick 2.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Controls.Material 2.15
 import ViewSolutionsModule 1.0
 
 ApplicationWindow {
@@ -9,34 +9,37 @@ ApplicationWindow {
     visible: true
     width: 1280
     height: 720
-    title: qsTr("Hello World")
+    title: qsTr("QuasarApp Docs")
 
     Material.theme: Material.Light
     Material.accent: Material.LightBlue
-//    Material.background: Material.Teal
-//    Material.foreground: Material.Pink
     Material.primary: "#404142"
 
     header: Header {
-        height: 50 * Screen.pixelDensity
+        height: 15 * Screen.pixelDensity
         width: applicationRoot.width
 
+        Connections {
+            target: header
+            function onSideBar() {
+                drawer.open()
+            }
+        }
+
         onCurrentPageChanged: {
             mainModel.openPage(currentPage);
         }
     }
 
-    contentData: StackView {
-        id: stackView
-        initialItem: ListViewer {
-            id: sourceList
-            model: (mainModel)? mainModel.listModel: null
-            anchors.fill: parent
-        }
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.top: parent.top
-        anchors.bottom: parent.bottom
-        width: Math.min(parent.width, 1200)
+    contentData:
+        ListViewer {
+        id: sourceList
+        model: (mainModel)? mainModel.pageModel: null
+        anchors.fill: parent
+    }
+
+    SideBar {
+        id: drawer
 
     }
 
diff --git a/Site/src/qml.qrc b/Site/src/qml.qrc
index 3830d4a..aaf0c73 100644
--- a/Site/src/qml.qrc
+++ b/Site/src/qml.qrc
@@ -4,6 +4,7 @@
         <file>View/Header.qml</file>
         <file>View/ListViewer.qml</file>
         <file>View/Languages.qml</file>
+        <file>View/SideBar.qml</file>
     </qresource>
     <qresource prefix="/img">
         <file>images/HanoiTowers.png</file>
diff --git a/Site/src/translations/Site_ru_RU.ts b/Site/src/translations/Site_ru_RU.ts
index aeba6f5..708c280 100644
--- a/Site/src/translations/Site_ru_RU.ts
+++ b/Site/src/translations/Site_ru_RU.ts
@@ -4,32 +4,27 @@
 <context>
     <name>Header</name>
     <message>
-        <location filename="../View/Header.qml" line="24"/>
         <source>Back to main page</source>
-        <translation>Вернуться на главную страницу</translation>
+        <translation type="vanished">Вернуться на главную страницу</translation>
     </message>
     <message>
-        <location filename="../View/Header.qml" line="37"/>
         <source>Crossplatform tool for deploying cpp applications. The CQtDeployer is application for extract all depends library of executable and create launch script for your application.</source>
-        <translation>Кроссплатформенный инструмент для развертывания приложений cpp. CQtDeployer - это приложение для извлечения всех зависимых библиотек исполняемых файлов и создания сценария запуска для вашего приложения.</translation>
+        <translation type="vanished">Кроссплатформенный инструмент для развертывания приложений cpp. CQtDeployer - это приложение для извлечения всех зависимых библиотек исполняемых файлов и создания сценария запуска для вашего приложения.</translation>
     </message>
     <message>
-        <location filename="../View/Header.qml" line="51"/>
         <source>Fast encryption library supporting RSA and AES algorithms.</source>
-        <translation>Быстрая библиотека шифрования с поддержкой алгоритмов RSA и AES.</translation>
+        <translation type="vanished">Быстрая библиотека шифрования с поддержкой алгоритмов RSA и AES.</translation>
     </message>
     <message>
-        <location filename="../View/Header.qml" line="64"/>
         <source>Simple Crossplatform game</source>
-        <translation>Простая кросс-платформенная игра</translation>
+        <translation type="vanished">Простая кросс-платформенная игра</translation>
     </message>
     <message>
-        <location filename="../View/Header.qml" line="77"/>
         <source>QtBigInt - Arbitrary-sized integer class for C++ and build system qmake and cmake. Power by minigmp.</source>
-        <translation>QtBigInt -  Класс  для работы  с числами произвольного размера для C ++ и систем сборок qmake и cmake. Основоно но minigmp.</translation>
+        <translation type="vanished">QtBigInt -  Класс  для работы  с числами произвольного размера для C ++ и систем сборок qmake и cmake. Основоно но minigmp.</translation>
     </message>
     <message>
-        <location filename="../View/Header.qml" line="96"/>
+        <location filename="../View/Header.qml" line="103"/>
         <source>Dark Mode</source>
         <translation>Темный режим</translation>
     </message>
@@ -50,57 +45,85 @@
 <context>
     <name>MainModel</name>
     <message>
-        <location filename="../Models/mainmodel.cpp" line="68"/>
-        <source>QuasarApp Group</source>
-        <translation></translation>
-    </message>
-    <message>
-        <location filename="../Models/mainmodel.cpp" line="70"/>
         <source>The &lt;b&gt;QuasarApp&lt;/b&gt; is developing open source mobile and desktop applications.&lt;br&gt;&lt;br&gt;Our company has ben created on 2017 year and have experians of develepment android and desctop applications and games.&lt;br&gt;&lt;br&gt;</source>
-        <translation>&lt;B&gt; QuasarApp &lt;/b&gt; разрабатывает мобильные и настольные приложения с открытым исходным кодом. &lt;br&gt; &lt;br&gt; Наша была компания создана в 2017 году и имеет опыт разработки приложений и игр для android и настольных систем. &lt;br&gt; &lt;br&gt;</translation>
+        <translation type="vanished">&lt;B&gt; QuasarApp &lt;/b&gt; разрабатывает мобильные и настольные приложения с открытым исходным кодом. &lt;br&gt; &lt;br&gt; Наша была компания создана в 2017 году и имеет опыт разработки приложений и игр для android и настольных систем. &lt;br&gt; &lt;br&gt;</translation>
     </message>
     <message>
-        <location filename="../Models/mainmodel.cpp" line="74"/>
         <source>During our existence, we have accumulated more than 40 software components and ready-made solutions for the most diverse tasks.&lt;br&gt;This approach allows us now to create final products with impressive speed. If you have an idea for the application, we will hear you.</source>
-        <translation>За время нашего существования мы накопили более 40 программных компонентов и готовых решений для самых разных задач. &lt;br&gt; Такой подход позволяет нам  создавать с максимальной скоростью конечные продукты. Если у вас есть идея для приложения, мы с радостью воплотим ее в жизнь.</translation>
+        <translation type="vanished">За время нашего существования мы накопили более 40 программных компонентов и готовых решений для самых разных задач. &lt;br&gt; Такой подход позволяет нам  создавать с максимальной скоростью конечные продукты. Если у вас есть идея для приложения, мы с радостью воплотим ее в жизнь.</translation>
     </message>
     <message>
-        <location filename="../Models/mainmodel.cpp" line="85"/>
         <source>Supported Platforms</source>
-        <translation>Поддерживаемые платформы</translation>
+        <translation type="vanished">Поддерживаемые платформы</translation>
     </message>
     <message>
-        <location filename="../Models/mainmodel.cpp" line="87"/>
+        <location filename="../Models/mainmodel.cpp" line="109"/>
         <source>At the moment, we can offer support for our solutions for the following platforms:&lt;br&gt;&lt;br&gt;</source>
         <translation>На данный момент мы можем предложить поддержку наших решений для следующих платформ: &lt;br&gt; &lt;br&gt;</translation>
     </message>
     <message>
-        <location filename="../Models/mainmodel.cpp" line="89"/>
+        <location filename="../Models/mainmodel.cpp" line="111"/>
         <source>- &lt;i&gt; Linux &lt;/i&gt;&lt;br&gt;- &lt;i&gt; Windows &lt;/i&gt;&lt;br&gt;- &lt;i&gt; Android &lt;/i&gt;&lt;br&gt;- &lt;i&gt; Web &lt;/i&gt;</source>
         <translation></translation>
     </message>
     <message>
-        <location filename="../Models/mainmodel.cpp" line="100"/>
+        <location filename="../Models/mainmodel.cpp" line="122"/>
         <source>Order a project.</source>
         <translation>Заказать проект.</translation>
     </message>
     <message>
-        <location filename="../Models/mainmodel.cpp" line="102"/>
+        <location filename="../Models/mainmodel.cpp" line="124"/>
         <source>We are always happy to help you realize your best and most fantastic ideas.&lt;br&gt;&lt;br&gt;If you have an idea for the application, then you can leave a request to create a project with us on GitHub. All that is required of you is a detailed description of what needs to be done. Further, our specialists will decide when work will begin on the project and how much resources will be allocated to the project.&lt;br&gt;&lt;br&gt;That how many resources will be allocated for the development depends on how much this project will collect cash donations.&lt;br&gt;&lt;br&gt;You can also request a private project exclusively for you, but such a project can no longer be free.</source>
         <translation>Мы всегда рады помочь вам реализовать ваши лучшие и самые фантастические идеи. &lt;br&gt; &lt;br&gt; Если у вас есть идея для приложения, вы можете оставить заявку на создание проекта у нас на GitHub. Все, что от вас требуется, - это подробное описание того, что нужно сделать. Далее наши специалисты решат, когда начнется работа над проектом и сколько ресурсов будет выделено для проекта. &lt;br&gt; &lt;br&gt; То, сколько ресурсов будет выделено на разработку, зависит от того, сколько этот проект собирет денежными пожертвованиями. . &lt;br&gt; &lt;br&gt; Вы также можете запросить частный проект исключительно для вас, но такой проект больше не может быть бесплатным.</translation>
     </message>
 </context>
 <context>
-    <name>main</name>
+    <name>QuasarAppPage</name>
     <message>
-        <location filename="../View/main.qml" line="12"/>
-        <source>Hello World</source>
-        <translation></translation>
+        <location filename="../Models/quasarapppage.cpp" line="9"/>
+        <source>The &lt;b&gt;QuasarApp&lt;/b&gt; is developing open source mobile and desktop applications.&lt;br&gt;&lt;br&gt;Our company has been created on 2017 year and have experians of develepment android and desctop applications and games.&lt;br&gt;&lt;br&gt;</source>
+        <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="../Models/quasarapppage.cpp" line="15"/>
+        <source>During our existence, we have accumulated more than 40 software components and ready-made solutions for the most diverse tasks.&lt;br&gt;This approach allows us now to create final products with impressive speed. If you have an idea for the application, we will hear you.</source>
+        <translation type="unfinished">За время нашего существования мы накопили более 40 программных компонентов и готовых решений для самых разных задач. &lt;br&gt; Такой подход позволяет нам  создавать с максимальной скоростью конечные продукты. Если у вас есть идея для приложения, мы с радостью воплотим ее в жизнь.</translation>
+    </message>
+    <message>
+        <location filename="../Models/quasarapppage.cpp" line="25"/>
+        <source>QuasarApp Group</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
+<context>
+    <name>QuasarAppSupportPlatforms</name>
+    <message>
+        <location filename="../Models/quasarappsupportplatforms.cpp" line="9"/>
+        <source>At the moment, we can offer support for our solutions for the following platforms:&lt;br&gt;&lt;br&gt;</source>
+        <translation type="unfinished">На данный момент мы можем предложить поддержку наших решений для следующих платформ: &lt;br&gt; &lt;br&gt;</translation>
+    </message>
+    <message>
+        <location filename="../Models/quasarappsupportplatforms.cpp" line="11"/>
+        <source>- &lt;i&gt; Linux &lt;/i&gt;&lt;br&gt;- &lt;i&gt; Windows &lt;/i&gt;&lt;br&gt;- &lt;i&gt; Android &lt;/i&gt;&lt;br&gt;- &lt;i&gt; Web &lt;/i&gt;</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="../Models/quasarappsupportplatforms.cpp" line="20"/>
+        <source>Supported Platforms</source>
+        <translation type="unfinished">Поддерживаемые платформы</translation>
+    </message>
+</context>
+<context>
+    <name>main</name>
     <message>
         <location filename="../../ViewSolutions/Examples/src/main.qml" line="112"/>
         <source>Examples of View Solutions</source>
         <translation>Примеры решений View</translation>
     </message>
+    <message>
+        <location filename="../View/main.qml" line="12"/>
+        <source>QuasarApp Docs</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 </TS>