diff --git a/.idea/dataSources.xml b/.idea/dataSources.xml
index 20bfd9a..ca9cd35 100644
--- a/.idea/dataSources.xml
+++ b/.idea/dataSources.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
-    <data-source source="LOCAL" name="restaraunt.db" uuid="85d06098-df88-4348-a6f1-58f095307534">
+    <data-source source="LOCAL" name="restaraunt.db" uuid="e0b4de3f-e69a-4bc9-a458-ab99070138fc">
       <driver-ref>sqlite.xerial</driver-ref>
       <synchronize>true</synchronize>
       <jdbc-driver>org.sqlite.JDBC</jdbc-driver>
diff --git a/__pycache__/implemented.cpython-312.pyc b/__pycache__/implemented.cpython-312.pyc
index 6719934..808a4af 100644
Binary files a/__pycache__/implemented.cpython-312.pyc and b/__pycache__/implemented.cpython-312.pyc differ
diff --git a/app.py b/app.py
index 7d62b14..8350572 100644
--- a/app.py
+++ b/app.py
@@ -5,7 +5,7 @@
 from setup_db import db
 from views.auths import auth_ns
 from views.users import user_ns
-
+from views.menu import category_ns
 
 
 def create_app(config_object: Config) -> Flask:
@@ -33,6 +33,7 @@ def register_extensions(app: Flask) -> None:
     api.init_app(app)
     api.add_namespace(user_ns)
     api.add_namespace(auth_ns)
+    api.add_namespace(category_ns)
     # Add namespaces
 
 
diff --git a/dao/__pycache__/menu.cpython-312.pyc b/dao/__pycache__/menu.cpython-312.pyc
new file mode 100644
index 0000000..751a614
Binary files /dev/null and b/dao/__pycache__/menu.cpython-312.pyc differ
diff --git a/dao/menu.py b/dao/menu.py
index e69de29..0eeaf4d 100644
--- a/dao/menu.py
+++ b/dao/menu.py
@@ -0,0 +1,78 @@
+
+from dao.model.menu import Categories_ID, Category
+
+# User's Functional
+class CategoryDao:
+
+    def __init__(self, session):
+        self.session = session
+
+    def registation(self, user_data):
+        category = Categories_ID(**user_data)
+        self.session.add(category)
+        self.session.commit()
+
+        print(category.categories_id)
+
+        return category
+
+    def crete_category(self, user_data):
+        category = Category(**user_data)
+        self.session.add(category)
+        self.session.commit()
+
+    def get_Category_one(self, user_id):
+
+        return self.session.query(Categories_ID).get(user_id)
+    def get_Category_name_one(self, user_id):
+        return self.session.query(Category).get(user_id)
+
+    def get_Category_name(self, user_id):
+
+        categories = self.session.query(Category).filter(Category.id == user_id).all()
+
+        return categories
+
+
+    def get_Category_all(self):
+        return self.session.query(Categories_ID).all()
+
+    def get_Category_all_type(self):
+        return self.session.query(Category).all()
+
+    def update_category(self, user_data):
+        category = self.get_Category_one(user_data.get("id"))
+
+        if user_data.get("img") is not None:
+            category.img = user_data.get("img")
+        if user_data.get("name") is not None:
+            category.name = user_data.get("name")
+        if user_data.get("price") is not None:
+            category.price = user_data.get("price")
+        if user_data.get("description") is not None:
+            category.description = user_data.get("description")
+        if user_data.get("categories_id") is not None:
+            category.categories_id = user_data.get("categories_id")
+
+        category.discount = user_data.get("discount")
+        print(category.discount)
+        self.session.add(category)
+        self.session.commit()
+
+    def update_category_name(self, user_data):
+        category = self.get_Category_name_one(user_data.get("id"))
+        if user_data.get("category_type") is not None:
+            category.category_type = user_data.get("category_type")
+
+        self.session.add(category)
+        self.session.commit()
+
+    def delete(self, user_id):
+        del_category = self.session.query(Categories_ID).get(user_id)
+        self.session.delete(del_category)
+        self.session.commit()
+
+    def delete_category(self, user_id):
+        del_category = self.session.query(Category).get(user_id)
+        self.session.delete(del_category)
+        self.session.commit()
\ No newline at end of file
diff --git a/dao/model/__pycache__/menu.cpython-312.pyc b/dao/model/__pycache__/menu.cpython-312.pyc
new file mode 100644
index 0000000..01bcbde
Binary files /dev/null and b/dao/model/__pycache__/menu.cpython-312.pyc differ
diff --git a/dao/model/menu.py b/dao/model/menu.py
index e69de29..6a5dd77 100644
--- a/dao/model/menu.py
+++ b/dao/model/menu.py
@@ -0,0 +1,38 @@
+from marshmallow import Schema, fields
+from setup_db import db
+
+
+class Categories_ID(db.Model):
+    __table_name__ = 'categories'
+    id = db.Column(db.Integer, primary_key=True)
+    img = db.Column(db.String(255))
+    name = db.Column(db.String(255))
+    price = db.Column(db.Integer)
+    discount = db.Column(db.Integer)
+    description = db.Column(db.String(255))
+    categories_id = db.Column(db.Integer(), db.ForeignKey('categories_id.id', ondelete='CASCADE'))
+
+
+
+class CategoriesIDSchema(Schema):
+    id = fields.Int()
+    img = fields.Str()
+    name = fields.Str()
+    price = fields.Int()
+    discount = fields.Int()
+    description = fields.Str()
+    categories_id = fields.Int()
+
+
+class Category(db.Model):
+    __tablename__ = 'category'
+    id = db.Column(db.Integer(), primary_key=True)
+    category_type = db.Column(db.String(255))
+
+
+class CategorySchema(Schema):
+    id = fields.Int()
+    category_type = fields.Str()
+
+
+
diff --git a/frontend/src/Main/css/style.css b/frontend/src/Main/css/style.css
new file mode 100644
index 0000000..feb7a74
--- /dev/null
+++ b/frontend/src/Main/css/style.css
@@ -0,0 +1,572 @@
+/* Global */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+
+}
+
+html {
+    font: normal 16px sans-serif;
+
+}
+
+body {
+    overflow-x: hidden;
+}
+
+ul,
+nav {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+    opacity: 0.75;
+    color: #fff;
+}
+
+a:hover {
+    opacity: 1;
+}
+
+h1,
+h2,
+h4,
+h5,
+h6 {
+    font-family: Poppins;
+}
+
+h3,
+p {
+    font-family: Roboto;
+}
+
+.highlight {
+    color: red;
+    font-weight: bold;
+}
+
+a.btn {
+    border-radius: 4px;
+    text-transform: uppercase;
+    font-weight: bold;
+    text-align: center;
+    color: #fff;
+}
+
+section {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    padding: 50px 80px;
+}
+
+@media all and (max-width: 768px) {
+    section {
+        padding: 50px 20px;
+    }
+}
+
+@media all and (max-width: 576px) {
+    section {
+        padding: 20px 10px;
+    }
+}
+
+.grid {
+    width: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+}
+
+hr {
+    width: 250px;
+    height: 3px;
+    background-color: red;
+    border: 0;
+    margin-bottom: 50px;
+}
+
+@media (max-width: 575px) {
+    hr {
+        margin-bottom: 20px;
+    }
+}
+
+section h1 {
+    text-transform: capitalize;
+    font-size: 35px;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 20px;
+    margin-top: 10px;
+}
+
+section h3 {
+    font-size: 30px;
+    margin-bottom: 25px;
+    text-align: center;
+    font-weight: 100;
+}
+
+@media (max-width: 575px) {
+    section h1 {
+        font-size: 30px;
+    }   
+    section h3 {
+        font-size: 25px;
+    }
+}
+
+/* Header */
+
+header {
+    position: absolute;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 35px 100px 0;
+    animation: 1s fadein 0.5s forwards;
+    opacity: 0;
+    z-index: 1;
+}
+
+header h2 {
+    font-size: 30px;
+}
+
+@keyframes fadein {
+    100% {
+        opacity: 1;
+    }
+}
+
+header nav ul {
+    display: flex;
+    margin-right: -15px;
+}
+
+header nav ul li {
+    margin: 0 15px;
+    font-size: 20px;
+}
+
+@media all and (max-width: 768px) {
+    header {
+        padding: 20px 50px;
+        flex-direction: column;
+    }
+    header h1 {
+        font-size: 28px;
+        margin-top: 50px;
+    }
+    header h2 {
+        font-size: 25px;
+        margin-bottom: 10px;
+    }
+    header nav ul {
+        align-items: center;
+    }
+    header nav ul a {
+        opacity: 1;   
+    }
+}
+
+@media all and (max-width: 576px) {
+    header {
+        padding: 20px 20px;
+    }
+    header nav ul li {
+        margin: 0 10px;
+    }
+    header nav ul a {
+        font-size: 15px;
+    }
+
+}
+
+/* Showcase */
+
+section#showcase {
+    background-color: #f3b57d;
+    position: relative;
+    justify-content: center;
+    text-align: center;
+    min-height: 100vh;
+}
+
+#showcase h1, #showcase h3, #showcase-image, #showcase a {
+    opacity: 0;
+    animation: 2s slidefade 1s forwards;
+}
+
+@keyframes slidefade {
+    100% {
+        opacity: 1;
+    }
+}
+
+#showcase h1,
+#showcase h3 {
+    color: #fff;
+}
+
+#showcase-image img {
+    width: 45%;
+    margin: 0 auto;
+}
+
+#showcase a.btn {
+    border: 2px solid #fff;
+    border-radius: 20px;
+    padding: 10px 20px;
+    margin: 35px 0 0 0;
+}
+
+#showcase a.btn:hover {
+    border: 2px solid red;
+    color: red;
+}
+
+/* Benefits */
+
+section#benefits {
+    background-color: #f3f3f3;
+}
+
+#benefits .grid {
+    flex-direction: row;
+}
+
+#benefits .grid #benefits-pizza-image {
+    flex-basis: 50%;
+    text-align: center;
+}
+
+#benefits-pizza-image img {
+    width: 80%;
+    margin: 0 auto;
+}
+
+#benefits .grid #benefits-list {
+    flex-basis: 50%;
+    padding: 40px 0;
+}
+
+@media all and (max-width: 576px) {
+    #benefits .grid #benefits-list {
+        padding: 10px 0;
+    }
+}
+
+#benefits-list p {
+    font-size: 20px;
+    line-height: 1.8;
+}
+
+#benefits-list .fa {
+    color: red;
+}
+
+@media (max-width: 1100px) {
+    #benefits-list p {
+        font-size: 17px;
+        line-height: 1.5;
+    }
+}
+
+@media (max-width: 768px) {
+    #benefits .grid #benefits-pizza-image, #benefits .grid #benefits-list {
+        flex-basis: 100%;
+    }
+}
+
+/* Customize (ingredients) */
+
+#customize .grid {
+    justify-content: space-around;
+}
+
+#customize .grid .ingredient-box {
+    position: relative;
+    width: 300px;
+    height: 300px;
+    text-align: center;
+    flex-basis: 30%;
+}
+
+@media all and (max-width: 576px) {
+    #customize .grid .ingredient-box {
+        width: 250px;
+        height: 250px;
+    }
+}
+
+.ingredient-box img {
+    height: 80%;
+}
+
+.ingredient-box img:hover {
+    opacity: 0.3;
+}
+
+li.ingredient-box * {
+    transition: all 1s ease-in-out;
+}
+
+p.ingredient-name {
+    font-size: 30px;
+    color: red;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    font-weight: 700;
+    /* initial scale */
+    transform: translate(-50%, -50%) scale(0);
+    /* transition after the hover */
+    transition: transform 1s 1s ease-in-out;
+}
+
+.ingredient-box:hover .ingredient-name {
+    transform: translate(-50%, -75%) scale(1);
+    transition: transform 1s 1s ease-in-out;
+}
+
+@media (max-width: 768px) {
+    #customize .grid .ingredient-box {
+        flex-basis: 50%;
+    }
+}
+
+@media (max-width: 575px) {
+    #customize .grid .ingredient-box {
+        flex-basis: 100%;
+    }
+}
+
+/* Cola */
+
+#add-cola {
+    background-color: #f3b57d;
+    color: #fff;
+}
+
+#add-cola .grid {
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+#pizza-cola, #cola-pizza {
+    flex-basis: 50%;
+    text-align: center;
+    min-height: 400px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+#pizza-cola img, #cola-pizza img {
+    width: 70%;
+    margin: 0 auto;
+}
+
+@media all and (max-width: 575px) {
+    #pizza-cola, #cola-pizza {
+        flex-basis: 100%;
+        min-height: 200px;
+    }
+}
+
+/* Testimonials */
+
+#testimonials {
+    background-color: #f3f3f3;
+}
+
+#testimonials .grid {
+    justify-content: space-between;
+}
+
+.testimonial-box {
+    flex-basis: 50%;
+    margin-top: 50px;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+}
+
+@media (max-width: 575px) {
+    .testimonial-box {
+        margin-top: 10px;
+    }
+}
+
+blockquote {
+    border-radius: 20px;
+    padding: 10px 20px;
+    font-size: 25px;
+    width: 90%;
+    font-family: 'Open Sans';
+    font-style: italic;
+    color: #000;
+    border-left: 8px solid #865d3d;
+    line-height: 1.6;
+    background: #f3b57d;
+}
+
+blockquote i {
+    color: #865d3d;
+}
+
+blockquote span {
+    display: block;
+    color: #333333;
+    font-style: normal;
+    font-weight: bold;
+    margin-top: 1em;
+}
+
+@media all and (max-width: 768px) {
+    .testimonial-box {
+        flex-basis: 100%;
+    }
+}
+
+/* Pricing tables */
+
+#pricing-tables .grid {
+    flex-direction: row;
+    justify-content: space-around;
+}
+
+#pricing-tables .col {
+    flex-basis: 30%;
+    padding: 8px;
+    text-align: center;
+}
+
+.price-box {
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+    background: #fff;
+    color: #333333;
+    list-style-type: none;
+    border: 1px solid #f3b57d;
+    margin: 0;
+    padding: 0;
+    transition: 1s;
+}
+
+.price-box p {
+    font-size: 30px;
+    font-weight: 100;
+    margin-top: 0;
+}
+
+.price-box:hover, .price-box.best {
+    box-shadow: 0 10px 15px 0 #865d3d;
+}
+
+.price-box .header {
+    background-color: #865d3d;
+    color: #fff;
+    font-size: 25px;
+    padding: 10px 0;
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+}
+
+.price-box .header.header-red {
+    background-color: red;
+}
+
+.price-box li {
+    padding: 20px;
+    border-bottom: 1px solid #f3b57d;
+}
+
+.price-box .emph {
+    background-color: #f4f4f4;
+    font-size: 20px;
+}
+
+.button {
+    background-color: #b83717;
+    border: none;
+    color: #fff;
+    padding: 10px 15px;
+    text-align: center;
+    text-decoration: none;
+    font-size: 18px;
+    border-radius: 10px;
+}
+
+.price-box .button:hover {
+    background-color: red;
+}
+
+@media all and (max-width: 768px) {
+    #pricing-tables .grid {
+        flex-direction: column;
+        justify-content: center;
+        align-items: stretch;
+    }
+    #pricing-tables .col {
+        flex-basis: 75%;
+    }
+}
+
+/* Footer */
+
+footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    background-color: #f3b57d;
+    padding: 20px 0;
+    text-align: center;
+    font-size: 20px;
+}
+
+footer p {
+    font-family: Poppins;
+}
+
+footer ul {
+    display: flex;
+}
+
+footer ul li {
+    margin-left: 25px;
+}
+
+@media (max-width: 768px) {
+    footer {
+        flex-direction: column;
+    }
+    footer ul li:first-of-type {
+        margin-left: 0;
+    }
+    footer p {
+        text-align: center;
+        margin-bottom: 20px;
+    }
+}
diff --git a/frontend/src/Main/img/ingredients/colapizza.png b/frontend/src/Main/img/ingredients/colapizza.png
new file mode 100644
index 0000000..952277d
Binary files /dev/null and b/frontend/src/Main/img/ingredients/colapizza.png differ
diff --git a/frontend/src/Main/img/ingredients/pizza1.png b/frontend/src/Main/img/ingredients/pizza1.png
new file mode 100644
index 0000000..4809e08
Binary files /dev/null and b/frontend/src/Main/img/ingredients/pizza1.png differ
diff --git a/frontend/src/Main/img/ingredients/pizza2.png b/frontend/src/Main/img/ingredients/pizza2.png
new file mode 100644
index 0000000..cac9f12
Binary files /dev/null and b/frontend/src/Main/img/ingredients/pizza2.png differ
diff --git a/frontend/src/Main/img/ingredients/pizza3.png b/frontend/src/Main/img/ingredients/pizza3.png
new file mode 100644
index 0000000..1175a53
Binary files /dev/null and b/frontend/src/Main/img/ingredients/pizza3.png differ
diff --git a/frontend/src/Main/img/ingredients/pizza4.png b/frontend/src/Main/img/ingredients/pizza4.png
new file mode 100644
index 0000000..6cb5aec
Binary files /dev/null and b/frontend/src/Main/img/ingredients/pizza4.png differ
diff --git a/frontend/src/Main/img/ingredients/pizza5.png b/frontend/src/Main/img/ingredients/pizza5.png
new file mode 100644
index 0000000..209a0a8
Binary files /dev/null and b/frontend/src/Main/img/ingredients/pizza5.png differ
diff --git a/frontend/src/Main/img/ingredients/pizza6.png b/frontend/src/Main/img/ingredients/pizza6.png
new file mode 100644
index 0000000..f6e55e3
Binary files /dev/null and b/frontend/src/Main/img/ingredients/pizza6.png differ
diff --git a/frontend/src/Main/img/ingredients/pizzacola.png b/frontend/src/Main/img/ingredients/pizzacola.png
new file mode 100644
index 0000000..8331a5a
Binary files /dev/null and b/frontend/src/Main/img/ingredients/pizzacola.png differ
diff --git a/frontend/src/Main/img/pizza-all.png b/frontend/src/Main/img/pizza-all.png
new file mode 100644
index 0000000..e2fe7a6
Binary files /dev/null and b/frontend/src/Main/img/pizza-all.png differ
diff --git a/frontend/src/Main/img/pizza-large.png b/frontend/src/Main/img/pizza-large.png
new file mode 100644
index 0000000..b6fb96a
Binary files /dev/null and b/frontend/src/Main/img/pizza-large.png differ
diff --git a/frontend/src/Main/img/pizza.png b/frontend/src/Main/img/pizza.png
new file mode 100644
index 0000000..8f6f9ab
Binary files /dev/null and b/frontend/src/Main/img/pizza.png differ
diff --git a/frontend/src/Main/index.html b/frontend/src/Main/index.html
new file mode 100644
index 0000000..aa04900
--- /dev/null
+++ b/frontend/src/Main/index.html
@@ -0,0 +1,315 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Pizza TM</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+
+    <header>
+        <h2>
+            <a href="#showcase">
+                <img src="img/pizza.png" alt="Pizza Image"> The
+                <span class="highlight">Pizza</span>
+            </a>
+        </h2>
+
+        <nav>
+            <ul>
+                <li class="current">
+                    <a href="#showcase">Home</a>
+                </li>
+                <li>
+                    <a href="#benefits">Benefits</a>
+                </li>
+                <li>
+                    <a href="#customize">Types</a>
+                </li>
+                <li>
+                    <a href="#testimonials">Quotes</a>
+                </li>
+                <li>
+                    <a href="#pricing-tables">
+                        <span class="highlight">Order Now</span>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+    </header>
+
+    <!-- Showcase -->
+    <section id="showcase">
+        <h1>Welcome to The Pizza Page</h1>
+        <h3>the cure to all hunger cravings is hidden inside
+            <span class="highlight">the Pizza&trade;</span>
+        </h3>
+
+        <div id="showcase-image">
+            <img src="img/pizza-large.png" alt="Pizza">
+        </div>
+        <a href="#benefits" class="btn">Read More...</a>
+
+    </section>
+    <!-- End of showcase -->
+
+    <!-- Benefits -->
+    <section id="benefits">
+
+        <h1 class="section-title">Benefits of eating
+            <span class="highlight">Pizza&trade;</span>
+        </h1>
+        <hr>
+
+        <div class="grid">
+            <div id="benefits-list" class="left">
+                <ul>
+                    <li>
+                        <p>
+                            <i class="fa fa-arrow-right"></i> Pizza is a good way to increase your
+                            <strong>calcium</strong> intake for the day.</p>
+                    </li>
+                    <li>
+                        <p>
+                            <i class="fa fa-arrow-right"></i> Eating pizza will also help you get the
+                            <strong>protein</strong> you need for building muscle and other tissues in your body.</p>
+                    </li>
+                    <li>
+                        <p>
+                            <i class="fa fa-arrow-right"></i> You should eat 2 to 3 cups of
+                            <strong>vegetables</strong> each day, and ordering a pizza loaded with vegetables is a delicious way
+                            to add to your day's vegetable intake.</p>
+                    </li>
+                    <li>
+                        <p>
+                            <i class="fa fa-arrow-right"></i> If you eat a pizza with a
+                            <strong>whole-grain</strong> crust, it will also help you meet your recommended intake of at least three
+                            servings of whole grains per day.</p>
+                    </li>
+                    <li>
+                        <p>
+                            <i class="fa fa-arrow-right"></i> There's a key ingredient in tomato sauce called lycopene, which can help
+                            <strong>fight cancer</strong>.</p>
+                    </li>
+                    <li>
+                        <p>
+                            <i class="fa fa-arrow-right"></i> The sauce is actually loaded with
+                            <strong>Vitamin C</strong>, which your body needs to prevent illnesses such as the common cold.</p>
+                    </li>
+                </ul>
+
+            </div>
+
+            <div id="benefits-pizza-image" class="right">
+                <img src="img/pizza-all.png" alt="Pizza Image">
+            </div>
+        </div>
+
+    </section>
+    <!-- End of benefits -->
+
+    <!-- Customize -->
+    <section id="customize">
+
+        <h1 class="section-title">Customise your
+            <span class="highlight">Pizza&trade;</span>
+        </h1>
+        <h3 class="section-subtitle">Choose your own toppings, create your own taste</h3>
+        <hr>
+
+        <ul class="grid">
+            <li class="ingredient-box">
+                <img src="img/ingredients/pizza1.png" alt="Ingredient">
+                <p class="ingredient-name">Pepper, Mushrooms, Corn</p>
+            </li>
+            <li class="ingredient-box">
+                <img src="img/ingredients/pizza2.png" alt="Ingredient">
+                <p class="ingredient-name">Meat, Olives, Corn</p>
+            </li>
+            <li class="ingredient-box">
+                <img src="img/ingredients/pizza3.png" alt="Ingredient">
+                <p class="ingredient-name">Tomatoes, Pepper</p>
+            </li>
+            <li class="ingredient-box">
+                <img src="img/ingredients/pizza4.png" alt="Ingredient">
+                <p class="ingredient-name">Pepper, Mushrooms, Olives</p>
+            </li>
+            <li class="ingredient-box">
+                <img src="img/ingredients/pizza5.png" alt="Ingredient">
+                <p class="ingredient-name">A bit of everything</p>
+            </li>
+            <li class="ingredient-box">
+                <img src="img/ingredients/pizza6.png" alt="Ingredient">
+                <p class="ingredient-name">Salami, Mushrooms, Corn</p>
+            </li>
+        </ul>
+
+    </section>
+    <!-- End of customize -->
+
+    <!-- Combine with Coke -->
+    <section id="add-cola">
+
+        <h1 class="section-title">It's best served with
+            <span class="highlight">Coca-Cola</span>
+        </h1>
+        <h3 class="section-subtitle">Trust us, there's no other combo like it!</h3>
+        <hr>
+
+        <div class="grid">
+            <div id="pizza-cola" class="left">
+                <img src="img/ingredients/pizzacola.png" alt="Pizza">
+            </div>
+            <div id="cola-pizza" class="right">
+                <img src="img/ingredients/colapizza.png" alt="Cola">
+            </div>
+        </div>
+
+    </section>
+    <!-- End of combine with Coke -->
+
+    <!-- Testimonials -->
+    <section id="testimonials">
+
+        <h1 class="section-title">Here's what famous people are saying about
+            <span class="highlight">Pizza&trade;</span>
+        </h1>
+        <h3 class="section-subtitle">And they definitely tried them all!</h3>
+        <hr>
+
+        <ul class="grid testimonials-list">
+            <li class="testimonial-box left">
+                <blockquote>
+                    <i class="fa fa-quote-left" aria-hidden="true"></i> There's no better feeling in the world than a warm pizza box on your lap.
+                    <span>Kevin James, Actor</span>
+                </blockquote>
+            </li>
+            <li class="testimonial-box right">
+                <blockquote>
+                    <i class="fa fa-quote-left" aria-hidden="true"></i> You better cut the pizza in four pieces because I'm not hungry enough to eat six.
+                    <span>Yogi Berra, Athlete</span>
+                </blockquote>
+            </li>
+            <li class="testimonial-box left">
+                <blockquote>
+                    <i class="fa fa-quote-left" aria-hidden="true"></i> I love pizza. I want to marry it, but it would just be to eat her family at the wedding.
+                    <span>Mike Birbiglia, Comedian</span>
+                </blockquote>
+            </li>
+            <li class="testimonial-box right">
+                <blockquote>
+                    <i class="fa fa-quote-left" aria-hidden="true"></i> Eat some pizza, play some Xbox, watch some TV. Gross? Maybe. Me? Yes.
+                    <span>Dustin Diamond, Actor</span>
+                </blockquote>
+            </li>
+        </ul>
+
+    </section>
+
+    <!-- End of testimonials -->
+
+    <!-- Pricing tables -->
+    <section id="pricing-tables">
+
+        <h1 class="section-title">Order today your
+            <span class="highlight">Pizza&trade;</span>
+        </h1>
+        <h3 class="section-subtitle">And don't forget to enjoy it!</h3>
+        <hr>
+
+        <div class="grid">
+            <div class="col order">
+                <ul class="price-box">
+                    <li class="header">Pizza for One</li>
+                    <li class="emph">
+                        <strong>$ 5.99</strong> / Pizza</li>
+                    <li>
+                        <strong>4</strong> Ingredients</li>
+                    <li>
+                        <strong>500g</strong> of the best taste</li>
+                    <li>
+                        <strong>1</strong> Sweet Sauce</li>
+                    <li>
+                        <strong>1</strong> Coca Cola</li>
+                    <li class="emph">
+                        <a href="#" class="button">Order now!</a>
+                    </li>
+                </ul>
+            </div>
+            <div class="col order">
+                <ul class="price-box best">
+                    <li class="header header-red">Couple's Pizza</li>
+                    <li class="emph">
+                        <strong>$ 8.99</strong> / Pizza</li>
+                    <li>
+                        <strong>8</strong> Ingredients</li>
+                    <li>
+                        <strong>750g</strong> of the best taste</li>
+                    <li>
+                        <strong>2</strong> Sweet Sauces</li>
+                    <li>
+                        <strong>2</strong> Coca Cola's</li>
+                    <li class="emph">
+                        <a href="#" class="button">Order now!</a>
+                    </li>
+                </ul>
+            </div>
+            <div class="col order">
+                <ul class="price-box">
+                    <li class="header">Pizza for Family</li>
+                    <li class="emph">
+                        <strong>$ 14.99</strong> / Pizza's</li>
+                    <li>
+                        <strong>12</strong> Ingredients</li>
+                    <li>
+                        <strong>1200g</strong> of the best taste</li>
+                    <li>
+                        <strong>3</strong> Sweet Sauce's</li>
+                    <li>
+                        <strong>4</strong> Coca Cola's</li>
+                    <li class="emph">
+                        <a href="#" class="button">Order now!</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+    </section>
+    <!-- End of pricing tables -->
+
+    <!-- Footer -->
+    <footer>
+        <p>
+            <span class="highlight">The Pizza&trade;</span> - Copyright &copy; 2018
+        </p>
+
+        <ul>
+            <li>
+                <a href="#">
+                    <i class="fa fa-twitter-square fa-2x"></i>
+                </a>
+            </li>
+            <li>
+                <a href="#">
+                    <i class="fa fa-facebook-square fa-2x"></i>
+                </a>
+            </li>
+            <li>
+                <a href="#">
+                    <i class="fa fa-snapchat-square fa-2x"></i>
+                </a>
+            </li>
+        </ul>
+    </footer>
+    <!-- End of footer -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
+    <script src="app.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/frontend/src/components/Main.js b/frontend/src/components/Main.js
index 6903bf3..60d3a07 100644
--- a/frontend/src/components/Main.js
+++ b/frontend/src/components/Main.js
@@ -1,7 +1,18 @@
 import React, {useState} from "react";
-import login from "../styles/Login.module.css";
-import axios from "axios";
 
+import axios from "axios";
+import main from '../styles/Main.module.css'
+import logo from '../Main/img/pizza.png'
+import pizza_large from '../Main/img/pizza-large.png'
+import pizza_all from '../Main/img/pizza-all.png'
+import pizza_1 from '../Main/img/ingredients/pizza1.png'
+import pizza_2 from '../Main/img/ingredients/pizza2.png'
+import pizza_3 from '../Main/img/ingredients/pizza3.png'
+import pizza_4 from '../Main/img/ingredients/pizza4.png'
+import pizza_5 from '../Main/img/ingredients/pizza5.png'
+import pizza_6 from '../Main/img/ingredients/pizza6.png'
+import cola from '../Main/img/ingredients/colapizza.png'
+import pizza_cola from '../Main/img/ingredients/pizzacola.png'
 
 const Main = () => {
     const [userField, setUserField] = useState({
@@ -40,32 +51,273 @@ const Main = () => {
     }
 
     return (
-         <body  className={login.body}>
-        <div className={login.wrapper}>
-            <div className={login.title}><span>Login Form</span></div>
-            <form action="#" method="post" id="loginform">
-                <div className={login.row}>
-                    <i className={`${login.fas} `}></i>
-                    <input name="email" type="text" placeholder="Email" required
-                           onChange={e => changeUserFieldHandler(e)}/>
-                </div>
-                <div className={login.row}>
-                    <i className={`${login.fas}`}></i>
-                    <input name="password" type="password" placeholder="Password" required
-                           onChange={e => changeUserFieldHandler(e)}/>
-                </div>
-                <div className={login.pass}><a href="#">Forgot password?</a></div>
-                <div className={`${login.button} ${login.row}`}>
-                    <input type="submit" value="Login" onClick={e => onSubmitChange(e)}/>
-                </div>
-                <div className={login.signuplink}>Not a member? <a href="/auth/register">Sign up now</a></div>
-            </form>
+        <body className={main.body}>
+        <header>
+        <h2>
+            <a href="/">
+                <img src={logo} alt="Pizza Image" /> The
+                <span className={`${main["highlight"]} ${main.red_naw}`}>Pizza</span>
+            </a>
+        </h2>
+            <nav>
+            <ul>
+                <li className="current">
+                    <a href="/">Home</a>
+                </li>
+                <li>
+                    <a href="#benefits">Benefits</a>
+                </li>
+                <li>
+                    <a href="#customize">Types</a>
+                </li>
+                <li>
+                    <a href="#testimonials">Quotes</a>
+                </li>
+                <li>
+                    <a href="/auth/login">
+                        <span className={`highlight ${main.red_naw}`}>Login</span>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+
+        </header>
 
+         <section className={main.section_margin}>
+        <h1 className={main.h1}>Welcome to The Pizza Page</h1>
+        <h3 className={main.h3}>the cure to all hunger cravings is hidden inside
+            <span className={main.red_naw}>the Pizza&trade;</span>
+        </h3>
+
+        <div id="showcase-image">
+            <img src={pizza_large} className={main.pizza} alt="Pizza"/>
         </div>
+        <a href="#benefits" className={main.button_more}>Read More...</a>
+
+    </section>
+
+        <section id="benefits" className={main.section_white}>
+
+        <h1 className={main.h1_night}>Benefits of eating
+            <span className={main.red_naw}>Pizza&trade;</span>
+        </h1>
+
+
+        <div className={main.grid}>
+        </div>
+        <div className={''}>
+  <div className={main.text}>
+     <div id="benefits-list" className={main.left}>
+                <ul>
+                    <li>
+                        <p className={main.h5_black}>
+                             Pizza is a good way to increase your
+                            <strong>calcium</strong> intake for the day.</p>
+                    </li>
+                    <li>
+                        <p className={main.h5_black}>
+                            <i className="fa fa-arrow-right"></i> Eating pizza will also help you get the
+                            <strong>protein</strong> you need for building muscle and other tissues in your body.</p>
+                    </li>
+                    <li>
+                        <p className={main.h5_black}>
+                            <i className="fa fa-arrow-right"></i> You should eat 2 to 3 cups of
+                            <strong>vegetables</strong> each day, and ordering a pizza loaded with vegetables is a delicious way
+                            to add to your day's vegetable intake.</p>
+                    </li>
+                    <li>
+                        <p className={main.h5_black}>
+                            <i className="fa fa-arrow-right"></i> If you eat a pizza with a
+                            <strong>whole-grain</strong> crust, it will also help you meet your recommended intake of at least three
+                            servings of whole grains per day.</p>
+                    </li>
+                    <li>
+                        <p className={main.h5_black}>
+                            <i className="fa fa-arrow-right"></i> There's a key ingredient in tomato sauce called lycopene, which can help
+                            <strong>fight cancer</strong>.</p>
+                    </li>
+                    <li>
+                        <p className={main.h5_black}>
+                            <i className="fa fa-arrow-right"></i> The sauce is actually loaded with
+                            <strong>Vitamin C</strong>, which your body needs to prevent illnesses such as the common cold.</p>
+                    </li>
+                </ul>
+
+            </div>
+  </div>
+
+  <div className={main.images}>
+    <img src={pizza_all}/>
+
+  </div>
+</div>
+    </section>
+
+            <section id="customize">
+                <div className={main['cards']}>
+            <div className={main["card"]}>
+
+
+                 <div className={main["card__top"]}>
+
+    <a href="#" className={main["card__image"]}>
+      <img
+        src={pizza_3}
+        alt="Pizza"
+        className={main.images_small}
+      />
+    </a>
+    <div className={main["card__label"]}>-10%</div>
+  </div>
+
+  <div className={main["card__bottom"]}>
+    <div className={main["card__prices"]}>
+      <div className={`${main.card__price} ${main['card__price--common']}`}>1 000</div>
+      <div className={`${main.card__price} ${main['card__price--discount']}`}>900</div>
+    </div>
+
+    <a href="#" className={main["card__title"]}>
+      Pepper, mushrooms, cheese
+    </a>
+
+    <button className={main["card__add"]}>В корзину</button>
+
+
+  </div>
+            </div>
+                   <div className={main["card"]}>
+
+
+                 <div className={main["card__top"]}>
+
+    <a href="#" className={main["card__image"]}>
+      <img
+        src={pizza_4}
+        alt="Pizza"
+        className={main.images_small}
+      />
+    </a>
+    <div className={main["card__label"]}>-15%</div>
+  </div>
+
+  <div className={main["card__bottom"]}>
+    <div className={main["card__prices"]}>
+      <div className={`${main.card__price} ${main['card__price--common']}`}>1 200</div>
+      <div className={`${main.card__price} ${main['card__price--discount']}`}>1 000</div>
+    </div>
+
+    <a href="#" className={main["card__title"]}>
+      Pepper, mushrooms, cheese
+    </a>
+
+    <button className={main["card__add"]}>В корзину</button>
+
+
+  </div>
+                   </div>
+                                   <div className={main["card"]}>
+
+
+                 <div className={main["card__top"]}>
+
+    <a href="#" className={main["card__image"]}>
+      <img
+        src={pizza_5}
+        alt=""
+        className={main.images_small}
+      />
+    </a>
+
+  </div>
+
+  <div className={main["card__bottom"]}>
+    <div className={main["card__prices"]}>
+      <div className={`${main.card__price} ${main['card__price--common']}`}>1 500</div>
+      <div className={`${main.card__price} ${main['card__price--discount']}`}>1 400</div>
+    </div>
+
+    <a href="#" className={main["card__title"]}>
+      Pepper, mushrooms, cheese
+    </a>
+
+    <button className={main["card__add"]}>В корзину</button>
+
+
+  </div>
+                   </div>
+                                   <div className={main["card"]}>
+
+
+                 <div className={main["card__top"]}>
+
+    <a href="#" className={main["card__image"]}>
+      <img
+        src={pizza_1    }
+        alt=""
+        className={main.images_small}
+      />
+    </a>
+    <div className={main["card__label"]}>-10%</div>
+  </div>
+
+  <div className={main["card__bottom"]}>
+    <div className={main["card__prices"]}>
+      <div className={`${main.card__price} ${main['card__price--common']}`}>1 500</div>
+      <div className={`${main.card__price} ${main['card__price--discount']}`}>1 300</div>
+    </div>
+
+    <a href="#" className={main["card__title"]}>
+      Pepper, mushrooms, cheese
+    </a>
+
+    <button className={main["card__add"]}>В корзину</button>
+
+
+  </div>
+                   </div>
+                                   <div className={main["card"]}>
+
+
+                 <div className={main["card__top"]}>
+
+    <a href="#" className={main["card__image"]}>
+      <img
+        src={pizza_6}
+        alt=""
+        className={main.images_small}
+      />
+    </a>
+    <div className={main["card__label"]}>-10%</div>
+  </div>
+
+  <div className={main["card__bottom"]}>
+    <div className={main["card__prices"]}>
+      <div className={`${main.card__price} ${main['card__price--common']}`}>1 350</div>
+      <div className={`${main.card__price} ${main['card__price--discount']}`}>1 200</div>
+    </div>
+
+    <a href="#" className={main["card__title"]}>
+      Pepper, mushrooms, cheese
+    </a>
+
+    <button className={main["card__add"]}>В корзину</button>
+
+
+  </div>
+                   </div>
+
+    </div>
+
+
+
+
+    </section>
+
+
         </body>
-    )
-};
 
 
+    )
+};
 export default Main;
 
diff --git a/frontend/src/components/View.js b/frontend/src/components/View.js
index 4a4eb27..e12378c 100644
--- a/frontend/src/components/View.js
+++ b/frontend/src/components/View.js
@@ -1,4 +1,4 @@
-import axios from 'axios';
+import  axios from 'axios';
 import React, {useState, useEffect} from 'react';
 import {useParams, useNavigate, NavLink} from 'react-router-dom';
 import admin from "../styles/admin.module.css";
diff --git a/frontend/src/styles/Main.module.css b/frontend/src/styles/Main.module.css
new file mode 100644
index 0000000..4bb2f58
--- /dev/null
+++ b/frontend/src/styles/Main.module.css
@@ -0,0 +1,839 @@
+/* Global */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+
+}
+
+html {
+    font: normal 16px sans-serif;
+
+
+}
+
+.body {
+    overflow-x: hidden;
+    background: #f3b57d;
+    font: normal 16px sans-serif;
+}
+
+ul,
+nav {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+    opacity: 0.75;
+    color: #fff;
+}
+.red_naw{
+    color: red;
+    font-weight: bold;
+    padding-left: 5px;
+}
+a:hover {
+    opacity: 1;
+}
+
+h1,
+h2,
+h4,
+h5,
+h6 {
+    font-family: Poppins;
+}
+
+h3,
+p {
+    font-family: Roboto;
+}
+
+.highlight {
+    color: red;
+    font-weight: bold;
+}
+
+a .btn {
+    border-radius: 4px;
+    text-transform: uppercase;
+    font-weight: bold;
+    text-align: center;
+    color: #fff;
+}
+
+section {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    padding: 50px 80px;
+}
+
+@media all and (max-width: 768px) {
+    section {
+        padding: 50px 20px;
+    }
+}
+
+@media all and (max-width: 576px) {
+    section {
+        padding: 20px 10px;
+    }
+}
+
+.grid {
+    width: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+}
+
+hr {
+    width: 250px;
+    height: 3px;
+    background-color: red;
+    border: 0;
+    margin-bottom: 50px;
+}
+
+@media (max-width: 575px) {
+    hr {
+        margin-bottom: 20px;
+    }
+}
+
+section h1 {
+    text-transform: capitalize;
+    font-size: 35px;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 20px;
+    margin-top: 10px;
+}
+
+section h3 {
+    font-size: 30px;
+    margin-bottom: 25px;
+    text-align: center;
+    font-weight: 100;
+}
+
+@media (max-width: 575px) {
+    section h1 {
+        font-size: 30px;
+    }   
+    section h3 {
+        font-size: 25px;
+    }
+}
+
+/* Header */
+
+header {
+    position: absolute;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 35px 100px 0;
+    animation: 1s fadein 0.5s forwards;
+    opacity: 0;
+    z-index: 1;
+}
+
+header h2 {
+    font-size: 30px;
+}
+
+@keyframes fadein {
+    100% {
+        opacity: 1;
+    }
+}
+
+header nav ul {
+    display: flex;
+    margin-right: -15px;
+}
+
+header nav ul li {
+    margin: 0 15px;
+    font-size: 20px;
+}
+
+@media all and (max-width: 768px) {
+    header {
+        padding: 20px 50px;
+        flex-direction: column;
+    }
+    header h1 {
+        font-size: 28px;
+        margin-top: 50px;
+    }
+    header h2 {
+        font-size: 25px;
+        margin-bottom: 10px;
+    }
+    header nav ul {
+        align-items: center;
+    }
+    header nav ul a {
+        opacity: 1;   
+    }
+}
+
+@media all and (max-width: 576px) {
+    header {
+        padding: 20px 20px;
+    }
+    header nav ul li {
+        margin: 0 10px;
+    }
+    header nav ul a {
+        font-size: 15px;
+    }
+
+}
+
+/* Showcase */
+
+section#showcase {
+    background-color: #f3b57d;
+    position: relative;
+    justify-content: center;
+    text-align: center;
+    min-height: 100vh;
+}
+
+#showcase h1, #showcase h3, #showcase-image, #showcase a {
+    opacity: 0;
+    animation: 2s slidefade 1s forwards;
+}
+
+@keyframes slidefade {
+    100% {
+        opacity: 1;
+    }
+}
+
+#showcase h1,
+#showcase h3 {
+    color: #fff;
+}
+
+#showcase-image img {
+    width: 45%;
+    margin: 0 auto;
+}
+
+#showcase a.btn {
+    border: 2px solid #fff;
+    border-radius: 20px;
+    padding: 10px 20px;
+    margin: 35px 0 0 0;
+}
+
+#showcase a.btn:hover {
+    border: 2px solid red;
+    color: red;
+}
+
+/* Benefits */
+
+section#benefits {
+    background-color: #f3f3f3;
+}
+
+#benefits .grid {
+    flex-direction: row;
+}
+
+#benefits .grid #benefits-pizza-image {
+    flex-basis: 50%;
+    text-align: center;
+}
+
+#benefits-pizza-image img {
+    width: 80%;
+    margin: 0 auto;
+}
+
+#benefits .grid #benefits-list {
+    flex-basis: 50%;
+    padding: 40px 0;
+}
+
+@media all and (max-width: 576px) {
+    #benefits .grid #benefits-list {
+        padding: 10px 0;
+    }
+}
+
+#benefits-list p {
+    font-size: 20px;
+    line-height: 1.8;
+}
+
+#benefits-list .fa {
+    color: red;
+}
+
+@media (max-width: 1100px) {
+    #benefits-list p {
+        font-size: 17px;
+        line-height: 1.5;
+    }
+}
+
+@media (max-width: 768px) {
+    #benefits .grid #benefits-pizza-image, #benefits .grid #benefits-list {
+        flex-basis: 100%;
+    }
+}
+
+/* Customize (ingredients) */
+
+#customize .grid {
+    justify-content: space-around;
+}
+
+#customize .grid .ingredient-box {
+    position: relative;
+    width: 300px;
+    height: 300px;
+    text-align: center;
+    flex-basis: 30%;
+}
+
+@media all and (max-width: 576px) {
+    #customize .grid .ingredient-box {
+        width: 250px;
+        height: 250px;
+    }
+}
+
+.ingredient-box img {
+    height: 80%;
+}
+
+.ingredient-box img:hover {
+    opacity: 0.3;
+}
+
+li.ingredient-box * {
+    transition: all 1s ease-in-out;
+}
+
+p.ingredient-name {
+    font-size: 30px;
+    color: red;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    font-weight: 700;
+    /* initial scale */
+    transform: translate(-50%, -50%) scale(0);
+    /* transition after the hover */
+    transition: transform 1s 1s ease-in-out;
+}
+
+.ingredient-box:hover .ingredient-name {
+    transform: translate(-50%, -75%) scale(1);
+    transition: transform 1s 1s ease-in-out;
+}
+
+@media (max-width: 768px) {
+    #customize .grid .ingredient-box {
+        flex-basis: 50%;
+    }
+}
+
+@media (max-width: 575px) {
+    #customize .grid .ingredient-box {
+        flex-basis: 100%;
+    }
+}
+
+/* Cola */
+
+#add-cola {
+    background-color: #f3b57d;
+    color: #fff;
+}
+
+#add-cola .grid {
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+#pizza-cola, #cola-pizza {
+    flex-basis: 50%;
+    text-align: center;
+    min-height: 400px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+#pizza-cola img, #cola-pizza img {
+    width: 70%;
+    margin: 0 auto;
+}
+
+@media all and (max-width: 575px) {
+    #pizza-cola, #cola-pizza {
+        flex-basis: 100%;
+        min-height: 200px;
+    }
+}
+
+/* Testimonials */
+
+#testimonials {
+    background-color: #f3f3f3;
+}
+
+#testimonials .grid {
+    justify-content: space-between;
+}
+
+.testimonial-box {
+    flex-basis: 50%;
+    margin-top: 50px;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+}
+
+@media (max-width: 575px) {
+    .testimonial-box {
+        margin-top: 10px;
+    }
+}
+
+blockquote {
+    border-radius: 20px;
+    padding: 10px 20px;
+    font-size: 25px;
+    width: 90%;
+    font-family: 'Open Sans';
+    font-style: italic;
+    color: #000;
+    border-left: 8px solid #865d3d;
+    line-height: 1.6;
+    background: #f3b57d;
+}
+
+blockquote i {
+    color: #865d3d;
+}
+
+blockquote span {
+    display: block;
+    color: #333333;
+    font-style: normal;
+    font-weight: bold;
+    margin-top: 1em;
+}
+
+@media all and (max-width: 768px) {
+    .testimonial-box {
+        flex-basis: 100%;
+    }
+}
+
+/* Pricing tables */
+
+#pricing-tables .grid {
+    flex-direction: row;
+    justify-content: space-around;
+}
+
+#pricing-tables .col {
+    flex-basis: 30%;
+    padding: 8px;
+    text-align: center;
+}
+
+.price-box {
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+    background: #fff;
+    color: #333333;
+    list-style-type: none;
+    border: 1px solid #f3b57d;
+    margin: 0;
+    padding: 0;
+    transition: 1s;
+}
+
+.price-box p {
+    font-size: 30px;
+    font-weight: 100;
+    margin-top: 0;
+}
+
+.price-box:hover, .price-box.best {
+    box-shadow: 0 10px 15px 0 #865d3d;
+}
+
+.price-box .header {
+    background-color: #865d3d;
+    color: #fff;
+    font-size: 25px;
+    padding: 10px 0;
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+}
+
+.price-box .header.header-red {
+    background: red;
+}
+
+.price-box li {
+    padding: 20px;
+    border-bottom: 1px solid #f3b57d;
+}
+
+.price-box .emph {
+    background-color: #f4f4f4;
+    font-size: 20px;
+}
+
+.button {
+    background-color: #b83717;
+    border: none;
+    color: #fff;
+    padding: 10px 15px;
+    text-align: center;
+    text-decoration: none;
+    font-size: 18px;
+    border-radius: 10px;
+}
+
+.price-box .button:hover {
+    background-color: red;
+}
+
+@media all and (max-width: 768px) {
+    #pricing-tables .grid {
+        flex-direction: column;
+        justify-content: center;
+        align-items: stretch;
+    }
+    #pricing-tables .col {
+        flex-basis: 75%;
+    }
+}
+
+/* Footer */
+
+footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    background-color: #f3b57d;
+    padding: 20px 0;
+    text-align: center;
+    font-size: 20px;
+}
+
+footer p {
+    font-family: Poppins;
+}
+
+footer ul {
+    display: flex;
+}
+
+footer ul li {
+    margin-left: 25px;
+}
+
+@media (max-width: 768px) {
+    footer {
+        flex-direction: column;
+    }
+    footer ul li:first-of-type {
+        margin-left: 0;
+    }
+    footer p {
+        text-align: center;
+        margin-bottom: 20px;
+    }
+}
+
+
+.section_margin{
+    margin-top: 250px;
+}
+
+.h1{
+    font-size: 40px;
+
+    font-family: Poppins;
+    color: #fff;
+}
+.h3{
+    font-size: 30px;
+    color: #fff;
+    font-family: Poppins;
+}
+
+.pizza{
+    width: 700px;
+    height: 400px;
+}
+
+.button_more{
+    padding: 10px 55px;
+    border: 3px solid white;
+    border-radius: 30px;
+    margin-top: 70px;
+}
+.button_more:hover{
+    border: 3px solid red;;
+    color: red;
+}
+
+.section_white{
+    background: white;
+}
+
+.h1_night{
+    font-size: 40px;
+    color: #000000;
+    font-family: Poppins;
+    padding-bottom: 10px;
+    border-bottom: 3px solid red;
+
+}
+
+
+.left{
+    padding-top: 10px;
+    text-align: left;
+    align: left;
+    text-indent: 40px;
+
+}
+
+.group:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.text {
+  float: left;
+  width: 60%;
+    padding-top: 100px;
+    margin-left: auto;
+    margin-right: auto;
+
+}
+
+.images {
+  float: right;
+  width: 35%;
+}
+
+.h5_black{
+    font-size: 20px;
+    color: #000000;
+    font-family: Poppins;
+    padding-top: 10px;
+
+}
+
+strong{
+    padding-left: 10px;
+}
+
+.images_small {
+  width: 100px;
+    height: 70px    ;
+
+}
+
+.h1_day{
+    font-size: 40px;
+    color: #fff;
+    font-family: Poppins;
+    padding-bottom: 10px;
+    border-bottom: 3px solid red;
+}
+
+.card {
+
+  width: 300px;
+  min-height: 450px;
+  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column; /* Размещаем элементы в колонку */
+  border-radius: 4px;
+  transition: 0.2s;
+  position: relative;
+
+}
+
+/* При наведении на карточку - меняем цвет тени */
+.card:hover {
+  box-shadow: 4px 8px 16px rgba(255, 102, 51, 0.2);
+}
+
+.card__top {
+  flex: 0 0 220px; /* Задаем высоту 220px, запрещаем расширение и сужение по высоте */
+  position: relative;
+  overflow: hidden; /* Скрываем, что выходит за пределы */
+}
+
+/* Контейнер для картинки */
+.card__image {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.card__image > img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain; /* Встраиваем картинку в контейнер card__image */
+  transition: 0.2s;
+}
+
+/* При наведении - увеличиваем картинку */
+.card__image:hover > img {
+  transform: scale(1.1);
+}
+
+/* Размещаем скидку на товар относительно изображения */
+.card__label {
+  padding: 4px 8px;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: #ff6633;
+  border-radius: 4px;
+  font-weight: 400;
+  font-size: 16px;
+  color: #fff;
+}
+
+.card__bottom {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto; /* Занимаем всю оставшуюся высоту карточки */
+  padding: 10px;
+
+}
+
+.card__prices {
+  display: block;
+  margin-bottom: 10px;
+  flex: 0 0 50%; /* Размещаем цены равномерно в две колонки */
+    
+}
+
+.card__price::after {
+    content: "₽";
+  margin-left: 5px;
+  position: relative;
+
+}
+
+.card__price--discount {
+  font-weight: 700;
+  font-size: 21px;
+  color: #ff0000;
+  display: block;
+  flex-wrap: wrap-reverse;
+}
+
+.card__price--discount::before {
+  content: "Со скидкой    ";
+  font-weight: 400;
+  font-size: 13px;
+  color: #ffffff;
+}
+
+.card__price--common {
+  font-weight: 400;
+  font-size: 19px;
+  color: #000000;
+  display: block;
+  flex-wrap: wrap-reverse;
+  justify-content: flex-end;
+}
+
+.card__price--common::before {
+  content: "Обычная ";
+  font-weight: 400;
+  font-size: 13px;
+  color: #ffffff;
+}
+
+.card__title {
+  display: block;
+  margin-bottom: 10px;
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 150%;
+  color: #414141;
+}
+
+.card__title:hover {
+  color: #ff6633;
+}
+
+.card__add {
+  display: block;
+  width: 100%;
+  font-weight: 400;
+  font-size: 17px;
+  color: #fa5959;
+  padding: 10px;
+  text-align: center;
+  border: 1px solid #ee422d;
+  border-radius: 4px;
+  cursor: pointer; /* Меняем курсор при наведении */
+  transition: 0.2s;
+  margin-top: auto; /* Прижимаем кнопку к низу карточки */
+}
+
+.card__add:hover {
+  border: 1px solid #ff6633;
+  background-color: #ff6633;
+  color: #fff;
+}
+
+.cards {
+  display: grid;
+  /* Автоматически заполняем на всю ширину grid-контейнера */
+  grid-template-columns: repeat(auto-fill, 225px);
+  width: 100%;
+  max-width: 100%; /* Ширина grid-контейнера */
+  justify-content: center;
+  justify-items: center; /* Размещаем карточку по центру */
+  column-gap: 100px; /* Отступ между колонками */
+  row-gap: 100px; /* Отступ между рядами */
+  margin: 0 auto;
+}
\ No newline at end of file
diff --git a/frontend/src/styles/admin.css b/frontend/src/styles/admin.css
index b390e16..3bfd7ab 100644
--- a/frontend/src/styles/admin.css
+++ b/frontend/src/styles/admin.css
@@ -1,5 +1,5 @@
 html,
-body {
+.body {
 	height: 100%;
 }
 .body {
diff --git a/implemented.py b/implemented.py
index 92c6da8..998b1bf 100644
--- a/implemented.py
+++ b/implemented.py
@@ -1,18 +1,20 @@
 
 from dao.user import UserDao
 from service.auth import AuthService
-
+from dao.menu import CategoryDao
 from service.user import UserService
 from setup_db import db
+from service.menu import CategoryService
 
 # Create DAO
 
 user_dao = UserDao(session=db.session)
-
+menu_dao = CategoryDao(session=db.session)
 
 # Create Service
 
 user_service = UserService(dao=user_dao)
 auth_service = AuthService(user_service)
+category_service = CategoryService(dao=menu_dao)
 
 
diff --git a/instance/restaraunt.db b/instance/restaraunt.db
index 1976059..3f73aa5 100644
Binary files a/instance/restaraunt.db and b/instance/restaraunt.db differ
diff --git a/service/__pycache__/menu.cpython-312.pyc b/service/__pycache__/menu.cpython-312.pyc
new file mode 100644
index 0000000..fa5782c
Binary files /dev/null and b/service/__pycache__/menu.cpython-312.pyc differ
diff --git a/service/menu.py b/service/menu.py
new file mode 100644
index 0000000..7e62771
--- /dev/null
+++ b/service/menu.py
@@ -0,0 +1,60 @@
+import base64
+import hashlib
+import hmac
+
+from constants import PWD_HASH_SALT, PWD_HASH_ITERATIONS
+from dao.menu import CategoryDao
+
+
+class CategoryService:
+    """
+    Category's CRUD class
+    """
+
+    def __init__(self, dao: CategoryDao):
+        self.dao = dao
+
+
+    def registration(self, user_data: dict):
+        """
+        Create User
+        """
+
+        user_id = self.dao.registation(user_data)
+
+
+        return "Product created", 201
+
+    def create_category(self, user_data:dict):
+        self.dao.crete_category(user_data)
+        return "Category created", 201
+
+    def get_all(self):
+        """
+        Return all users
+        """
+        return self.dao.get_Category_all()
+
+    def get_all_category_type(self):
+        return self.dao.get_Category_all_type()
+    def delete(self, user_id):
+        return self.dao.delete(user_id)
+
+    def get_user(self, category_name):
+        return self.dao.get_Category_one(category_name)
+
+    def get_one_name_category(self, category_id):
+        return self.dao.get_Category_name_one(category_id)
+
+    def update(self, user_data: dict):
+        """
+        Update user`s data
+        """
+
+        self.dao.update_category(user_data)
+
+    def update_category(self, user_data: dict):
+        self.dao.update_category_name(user_data)
+
+    def delete_category(self, category_id):
+        return self.dao.delete_category(category_id)
\ No newline at end of file
diff --git a/views/__pycache__/menu.cpython-312.pyc b/views/__pycache__/menu.cpython-312.pyc
new file mode 100644
index 0000000..a02656c
Binary files /dev/null and b/views/__pycache__/menu.cpython-312.pyc differ
diff --git a/views/menu.py b/views/menu.py
new file mode 100644
index 0000000..87f286d
--- /dev/null
+++ b/views/menu.py
@@ -0,0 +1,80 @@
+from flask import request
+from flask_restx import Resource, Namespace
+
+from dao.model.user import UserSchema, UserRoles, UserRolesSchema
+from dao.model.menu import *
+from decorators import auth_required, admin_required
+from implemented import category_service
+
+
+category_ns = Namespace("category")
+
+@category_ns.route("/", methods=['GET', 'POST'])
+class UsersViews(Resource):
+
+    def get(self):
+        categories = category_service.get_all()
+        users_schema = CategoriesIDSchema(many=True).dump(categories)
+
+        return users_schema, 200
+
+    def post(self):
+        request_json = request.json
+        msg, code = category_service.registration(request_json)
+
+        return msg, code
+
+@category_ns.route("/<int:category_name>", methods=['GET'])
+class UsersViews(Resource):
+
+    def get(self, category_name):
+        print(category_name)
+        categories = category_service.get_user(category_name)
+        print(categories)
+        users_schema = CategoriesIDSchema().dump(categories)
+
+        return users_schema, 200
+
+
+@category_ns.route("/product/<int:user_id>")
+class UsersViews(Resource):
+    def delete(self, user_id):
+            category_service.delete(user_id)
+            return "Deleted", 204
+
+    def patch(self, user_id):
+        req_json = request.json
+        req_json["id"] = user_id
+        category_service.update(req_json)
+        return "", 204
+@category_ns.route("/type", methods=['GET', 'POST'])
+class UsersViews(Resource):
+
+    def get(self):
+        categories = category_service.get_all_category_type()
+        print(categories)
+        users_schema = CategorySchema(many=True).dump(categories)
+
+        return users_schema, 200
+
+    def post(self):
+        request_json = request.json
+        msg, code = category_service.create_category(request_json)
+
+        return msg, code
+
+@category_ns.route("/type/<int:category_id>")
+class UsersViews(Resource):
+    def delete(self, category_id):
+            category_service.delete_category(category_id)
+            return "Deleted", 204
+
+    def get(self, category_id):
+        user = category_service.get_one_name_category(category_id)
+        users_schema = CategorySchema().dump(user)
+        return users_schema, 200
+    def patch(self, category_id):
+        req_json = request.json
+        req_json["id"] = category_id
+        category_service.update_category(req_json)
+        return "", 204
\ No newline at end of file