diff --git a/Fitmo_backend/app/Http/Controllers/ProductController.php b/Fitmo_backend/app/Http/Controllers/ProductController.php
index 0285dc0..0d2affb 100644
--- a/Fitmo_backend/app/Http/Controllers/ProductController.php
+++ b/Fitmo_backend/app/Http/Controllers/ProductController.php
@@ -22,27 +22,44 @@ class ProductController extends Controller
      *
      * @return \Illuminate\Http\Response
      */
-   public function index()
+public function index(Request $request)
 {
     $products = Product::select(
-            'prices.*', 
-            'product_states.*', 
-            'categories.name as category_name', 
-            'colors.*', 
+            'prices.*',
+            'product_states.*',
+            'categories.name as category_name',
+            'colors.*',
             'products.*',
             'product_categories.category_id as category_id'
-        )->with('categories')
-         ->selectRaw('(SELECT GROUP_CONCAT(image_path) FROM images WHERE images.product_id = products.id AND images.is_main = 1) AS image_urls')
-         ->leftJoin('prices', 'products.id', '=', 'prices.product_id')
+        )->with(['categories', 'children' => function($query) {
+            $query->select(
+                'prices.*',
+                'product_states.*',
+                'categories.name as category_name',
+                'colors.*',
+                'products.*',
+                'product_categories.category_id as category_id'
+            )
+            ->leftJoin('prices', 'products.id', '=', 'prices.product_id')
+            ->join('product_states', 'products.id', '=', 'product_states.product_id')
+            ->join('product_categories', 'products.id', '=', 'product_categories.product_id')
+            ->join('categories', 'categories.id', '=', 'product_categories.category_id')
+            ->leftJoin('colors', 'products.color_id', '=', 'colors.id')
+            ->selectRaw('(SELECT GROUP_CONCAT(image_path) FROM images WHERE images.product_id = products.id AND images.is_main = 1) AS image_urls')
+            ->where('products.parent_id', '!=', 0);
+        }])
+        ->leftJoin('prices', 'products.id', '=', 'prices.product_id')
         ->join('product_states', 'products.id', '=', 'product_states.product_id')
         ->join('product_categories', 'products.id', '=', 'product_categories.product_id')
-        ->join('categories', 'categories.id', '=', 'product_categories.category_id') 
+        ->join('categories', 'categories.id', '=', 'product_categories.category_id')
         ->leftJoin('colors', 'products.color_id', '=', 'colors.id')
+        ->selectRaw('(SELECT GROUP_CONCAT(image_path) FROM images WHERE images.product_id = products.id AND images.is_main = 1) AS image_urls')
         ->orderBy('products.created_at', 'desc')
-       // ->paginated(20)
-        ->get();
+        ->where('products.parent_id', 0)
+        ->paginate(20, ['*'], 'page', $request->page ?? 1);
+
 
-    $products = $this->formatProducts($products);
+    $products = $this->formatProducts($products, true);
     return $products;
 }
 
@@ -53,7 +70,7 @@ public function getSingleProduct($product_url_name)
             ->leftJoin('prices', 'products.id', '=', 'prices.product_id')
             ->join('product_states', 'products.id', '=', 'product_states.product_id')
           ->join('product_categories', 'products.id', '=', 'product_categories.product_id')
-           ->join('categories', 'categories.id', '=', 'product_categories.category_id') 
+           ->join('categories', 'categories.id', '=', 'product_categories.category_id')
             ->join('map_table', 'product_categories.category_id', '=', 'map_table.category_id')
             ->leftJoin('colors', 'products.color_id', '=', 'colors.id')
             ->orderBy('products.created_at', "desc")
@@ -111,12 +128,16 @@ public function getSearchedItems($query)
 
     public function getAllProducts()
     {
-        return Product::select('colors.*', 'prices.*', 'product_states.*', 'products.*')
+        $products = Product::select('colors.*', 'prices.*', 'product_states.*', 'products.*')
             ->selectRaw('(SELECT GROUP_CONCAT(image_path) FROM images WHERE images.product_id = products.id AND images.is_main = 1) AS image_urls')
             ->leftJoin('prices', 'products.id', '=', 'prices.product_id')
             ->leftJoin('colors', 'products.color_id', '=', 'colors.id')
             ->join('product_states', 'products.id', '=', 'product_states.product_id')
             ->get();
+            foreach ($products as $product) {
+                $product->image_urls = explode(',', $product->image_urls);
+            }
+        return $products;
     }
 
     public function setUrlNames()
@@ -134,28 +155,28 @@ public function getMainProducts()
         return Product::select('categories.*', 'products.*')->join('product_categories', 'products.id', '=', 'product_categories.product_id')
         ->join('categories', 'categories.id', '=', 'product_categories.category_id')->orderBy("products.name")->where("products.parent_id", 0)->with('categories')->get();
     }
-    public function formatProducts($products)
+    public function formatProducts($products, $shouldWorkWithChildren = false)
     {
+    $newProducts = [];
         foreach ($products as $product) {
-            $product->image_urls = explode(',', $product->image_urls);
-            $product->categoryPath = str_replace([","], "", Str::ascii(Str::kebab(strtolower(($product["category_name"])))));
-        }
-        $newProducts = [];
-        foreach ($products as $product) {
-            $temp = [];
-            $product->isActive = 0;
-            if ($product["parent_id"] === 0) {
-                $product->isActive = 1;
-                $temp[] = $product;
-
-                foreach ($products as $tempProduct) {
-                    if ($product["id"] === $tempProduct["parent_id"]) {
-                        $temp[] = $tempProduct;
-                    }
-                }
-                $newProducts[] = $temp;
-            }
-        }
+        $temp = [];
+        $product->isActive = 1; // Activate the product
+        $temp[] = $product; // Add the product to the array
+               // Format parent product
+               $product->image_urls = explode(',', $product->image_urls);
+               $product->categoryPath = str_replace([","], "", Str::ascii(Str::kebab(strtolower(($product["category_name"])))));
+
+               // Check if the product has children and format them
+               if ($shouldWorkWithChildren && $product->children->isNotEmpty()) {
+                   foreach ($product->children as $child) {
+                       $child->image_urls = explode(',', $child->image_urls);
+                       $child->categoryPath = str_replace([","], "", Str::ascii(Str::kebab(strtolower(($child["category_name"])))));
+                        $child->isActive = 0; // Activate the product
+                   $temp[] = $child;
+                   }
+               }
+           $newProducts[] = $temp;
+           }
 
         return $newProducts;
     }
@@ -216,7 +237,7 @@ public function getCategoryProducts($categoryName)
             ->selectRaw('(SELECT GROUP_CONCAT(image_path) FROM images WHERE images.product_id = products.id AND images.is_main = 1) AS image_urls')
             ->leftJoin('prices', 'products.id', '=', 'prices.product_id')
              ->join('product_categories', 'products.id', '=', 'product_categories.product_id')
-        ->join('categories', 'categories.id', '=', 'product_categories.category_id') 
+        ->join('categories', 'categories.id', '=', 'product_categories.category_id')
             ->join('product_states', 'products.id', '=', 'product_states.product_id')
             ->leftJoin('colors', 'products.color_id', '=', 'colors.id')
             ->whereIn('category_id', $categoriesToSearch)
@@ -331,7 +352,7 @@ public function store(Request $request)
         $newProduct->name = $request->name;
         $newProduct->description = $request->subName;
         $newProduct->variant = $request->variant;
-  
+
         $newProduct->parent_id = $request->parent["id"];
         $newProduct->url_name = str_replace(" ", "-", (strtolower(str_replace([","], "",  Str::ascii($request["name"])))));
         if ($request->colors["colorName"]) {
@@ -347,13 +368,13 @@ public function store(Request $request)
                 $newProductCategories->category_id = $category["categoryId"];
                 $newProductCategories->save();
             }
-            
+
         }
         else{
             foreach ($request->parent["categories"] as $category) {
                 $newProductCategories = new ProductCategory();
                 $newProductCategories->product_id = $newProduct->id;
-                $newProductCategories->category_id = $category["id"]; 
+                $newProductCategories->category_id = $category["id"];
                 $newProductCategories->save();
         }
     }
diff --git a/Fitmo_backend/app/Models/Product.php b/Fitmo_backend/app/Models/Product.php
index 8f1669d..e723478 100644
--- a/Fitmo_backend/app/Models/Product.php
+++ b/Fitmo_backend/app/Models/Product.php
@@ -8,7 +8,7 @@
 class Product extends Model
 {
     use HasFactory;
-    
+
       public function orders()
     {
         return $this->belongsToMany(Order::class)->withTimestamps();
@@ -24,4 +24,8 @@ public function color()
     {
         return $this->belongsTo(Color::class);
     }
+ public function children()
+    {
+        return $this->hasMany(Product::class, 'parent_id');
+    }
 }
diff --git a/Fitmo_frontend/package-lock.json b/Fitmo_frontend/package-lock.json
index f8926c2..76a99fe 100644
--- a/Fitmo_frontend/package-lock.json
+++ b/Fitmo_frontend/package-lock.json
@@ -38,6 +38,7 @@
                 "vue3-quill": "^0.3.1",
                 "vue3-snackbar": "^2.2.0",
                 "vuedraggable": "^4.1.0",
+                "vuestic-ui": "^1.9.12",
                 "vuex": "^4.1.0",
                 "yup": "^1.3.2"
             },
@@ -369,6 +370,63 @@
                 "node": ">=12"
             }
         },
+        "node_modules/@floating-ui/core": {
+            "version": "1.6.4",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.4.tgz",
+            "integrity": "sha512-a4IowK4QkXl4SCWTGUR0INAfEOX3wtsYw3rKK5InQEHMGObkR8Xk44qYQD9P4r6HHw0iIfK6GUKECmY8sTkqRA==",
+            "dependencies": {
+                "@floating-ui/utils": "^0.2.4"
+            }
+        },
+        "node_modules/@floating-ui/dom": {
+            "version": "1.6.7",
+            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.7.tgz",
+            "integrity": "sha512-wmVfPG5o2xnKDU4jx/m4w5qva9FWHcnZ8BvzEe90D/RpwsJaTAVYPEPdQ8sbr/N8zZTAHlZUTQdqg8ZUbzHmng==",
+            "dependencies": {
+                "@floating-ui/core": "^1.6.0",
+                "@floating-ui/utils": "^0.2.4"
+            }
+        },
+        "node_modules/@floating-ui/utils": {
+            "version": "0.2.4",
+            "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.4.tgz",
+            "integrity": "sha512-dWO2pw8hhi+WrXq1YJy2yCuWoL20PddgGaqTgVe4cOS9Q6qklXCiA1tJEqX6BEwRNSCP84/afac9hd4MS+zEUA=="
+        },
+        "node_modules/@floating-ui/vue": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.1.tgz",
+            "integrity": "sha512-cyawjk9etPZPl/RVtMRnWrwtAhWbPVSrRVYARgOzhLIqxr0k2up1APrrFjqP9QwRQ0AwjKSvbWg4YC6jESutow==",
+            "dependencies": {
+                "@floating-ui/dom": "^1.0.0",
+                "@floating-ui/utils": "^0.2.4",
+                "vue-demi": ">=0.13.0"
+            }
+        },
+        "node_modules/@floating-ui/vue/node_modules/vue-demi": {
+            "version": "0.14.8",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+            "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@fortawesome/fontawesome-common-types": {
             "version": "6.4.2",
             "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
@@ -703,6 +761,11 @@
             "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
             "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="
         },
+        "node_modules/@types/lodash": {
+            "version": "4.17.6",
+            "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.6.tgz",
+            "integrity": "sha512-OpXEVoCKSS3lQqjx9GGGOapBeuW5eUboYHRlHP9urXPX25IKZ6AnP5ZRxtVf63iieUbsHxLn8NQ5Nlftc6yzAA=="
+        },
         "node_modules/@types/mime": {
             "version": "1.3.5",
             "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
@@ -1992,6 +2055,11 @@
                 "node": ">= 10.0"
             }
         },
+        "node_modules/cleave.js": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/cleave.js/-/cleave.js-1.6.0.tgz",
+            "integrity": "sha512-ivqesy3j5hQVG3gywPfwKPbi/7ZSftY/UNp5uphnqjr25yI2CP8FS2ODQPzuLXXnNLi29e2+PgPkkiKUXLs/Nw=="
+        },
         "node_modules/cli-cursor": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
@@ -2130,6 +2198,11 @@
             "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
             "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w=="
         },
+        "node_modules/colortranslator": {
+            "version": "1.10.2",
+            "resolved": "https://registry.npmjs.org/colortranslator/-/colortranslator-1.10.2.tgz",
+            "integrity": "sha512-+vAnjWTdI0Vh6fT3I+dA6DAtnLfo91TzYKjewYeZ2dHdhF8Yo5OMo47inNJdJOXwjJ9lPD0LkNeQOLU/8yyfZA=="
+        },
         "node_modules/combined-stream": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -8040,6 +8113,21 @@
                 "vue": "^3.0.1"
             }
         },
+        "node_modules/vuestic-ui": {
+            "version": "1.9.12",
+            "resolved": "https://registry.npmjs.org/vuestic-ui/-/vuestic-ui-1.9.12.tgz",
+            "integrity": "sha512-YIcNBLbpryIQS8dGyNnxQ+1RgTPbm0rJ9biywei4+fVxMIcNGVs/qC2muAKwd9Od3GCJVbx/+uGxedjxXV1vLA==",
+            "dependencies": {
+                "@floating-ui/vue": "^1.0.1",
+                "@types/lodash": "^4.14.161",
+                "cleave.js": "^1.6.0",
+                "colortranslator": "^1.9.2",
+                "lodash": "^4.17.21"
+            },
+            "peerDependencies": {
+                "vue": "^3.0.4"
+            }
+        },
         "node_modules/vuex": {
             "version": "4.1.0",
             "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
diff --git a/Fitmo_frontend/package.json b/Fitmo_frontend/package.json
index 9e4f0c6..7c72ed7 100644
--- a/Fitmo_frontend/package.json
+++ b/Fitmo_frontend/package.json
@@ -37,6 +37,7 @@
         "vue3-quill": "^0.3.1",
         "vue3-snackbar": "^2.2.0",
         "vuedraggable": "^4.1.0",
+        "vuestic-ui": "^1.9.12",
         "vuex": "^4.1.0",
         "yup": "^1.3.2"
     },
diff --git a/Fitmo_frontend/src/components/Product.vue b/Fitmo_frontend/src/components/Product.vue
index 64d6dbb..115cb80 100644
--- a/Fitmo_frontend/src/components/Product.vue
+++ b/Fitmo_frontend/src/components/Product.vue
@@ -40,7 +40,6 @@
             "
             alt=""
           />
-
           <img
             v-if="product.image_urls[1] && product.color_id === null"
             :src="
diff --git a/Fitmo_frontend/src/components/admin/AllOrders.vue b/Fitmo_frontend/src/components/admin/AllOrders.vue
index 0414688..6a107f7 100644
--- a/Fitmo_frontend/src/components/admin/AllOrders.vue
+++ b/Fitmo_frontend/src/components/admin/AllOrders.vue
@@ -1,129 +1,127 @@
 <template>
-  <div>
-    <div class="row actions">
-      <select v-model="this.activeAction">
-        <option value="vytvorena">Změnit na Vytvořena</option>
-        <option value="zpracovavaSe">Změnit na Expedice</option>
-        <option value="expedice">Změnit na Předána přepravci</option>
-        <option value="naCesteKZakaznikovi">
-          Změnit na Na cestě k zákazánovi
-        </option>
-        <option value="casoveOkno">Změnit na Časové okno</option>
-        <option value="dorucena">Změnit na Doručena</option>
-      </select>
-      <input
-        type="submit"
-        value="Použít"
-        class="btn-yellow"
-        :onClick="() => provideAction(activeAction)"
-      />
-    </div>
-    <table class="collapsed-border">
-      <thead>
+  <div class="row actions">
+    <select v-model="this.activeAction">
+      <option value="vytvorena">Změnit na Vytvořena</option>
+      <option value="zpracovavaSe">Změnit na Expedice</option>
+      <option value="expedice">Změnit na Předána přepravci</option>
+      <option value="naCesteKZakaznikovi">
+        Změnit na Na cestě k zákazánovi
+      </option>
+      <option value="casoveOkno">Změnit na Časové okno</option>
+      <option value="dorucena">Změnit na Doručena</option>
+    </select>
+    <input
+      type="submit"
+      value="Použít"
+      class="btn-yellow"
+      :onClick="() => provideAction(activeAction)"
+    />
+  </div>
+  <table class="collapsed-border">
+    <thead>
+      <tr>
+        <div></div>
+        <th>Akce</th>
+        <th>Status</th>
+        <th>Celková částka</th>
+        <th>Delivery</th>
+        <th>Delivery Price</th>
+        <th>Payment</th>
+        <th>Payment Price</th>
+        <th>Fakturační adresa</th>
+        <th>Dodací adresa</th>
+        <th>Kdo objednal</th>
+      </tr>
+    </thead>
+    <tbody>
+      <template v-for="order in orders" :key="order.id">
         <tr>
+          <td>
+            <input type="checkbox" v-model="order.isActive" />
+          </td>
+          <td
+            @click="
+              {
+                order.showProducts = !order.showProducts;
+              }
+            "
+          >
+            <font-awesome-icon
+              :rotation="order.showProducts ? 180 : 0"
+              v-if="order.products.length > 0"
+              :icon="['fa', 'angle-down']"
+              :size="'2x'"
+            />
+          </td>
+          <td>{{ order.status }}</td>
+          <td>{{ order.total_price }}</td>
+          <td>{{ order.delivery_type.name }}</td>
+          <td>{{ order.delivery_price }}</td>
+          <td>{{ order.payment_type.name }}</td>
+          <td>{{ order.payment_price }}</td>
+          <td>
+            {{
+              order.billing_address.street +
+              ", " +
+              order.billing_address.city +
+              " " +
+              order.billing_address.zip +
+              " - " +
+              order.billing_address.country
+            }}
+          </td>
+          <td>
+            {{
+              order.delivery_address.street +
+              ", " +
+              order.delivery_address.city +
+              " " +
+              order.delivery_address.zip +
+              " - " +
+              order.delivery_address.country
+            }}
+          </td>
+          <td style="display: flex; flex-direction: column">
+            <p>{{ order.user.name }}</p>
+            <p>{{ order.user.email }}</p>
+            <p>{{ order.user.prePhone }}{{ order.user.phone }}</p>
+          </td>
+        </tr>
+        <tr v-if="order.showProducts">
+          <div></div>
           <div></div>
-          <th>Akce</th>
-          <th>Status</th>
-          <th>Celková částka</th>
-          <th>Delivery</th>
-          <th>Delivery Price</th>
-          <th>Payment</th>
-          <th>Payment Price</th>
-          <th>Fakturační adresa</th>
-          <th>Dodací adresa</th>
-          <th>Kdo objednal</th>
+          <th>Název</th>
+          <th>Počet</th>
+          <th>Cena</th>
+          <th>Cena se slevou</th>
+          <th>% sleva</th>
+          <th>Barva/varianta</th>
         </tr>
-      </thead>
-      <tbody>
-        <template v-for="order in orders" :key="order.id">
-          <tr>
-            <td>
-              <input type="checkbox" v-model="order.isActive" />
-            </td>
-            <td
-              @click="
-                {
-                  order.showProducts = !order.showProducts;
-                }
-              "
-            >
-              <font-awesome-icon
-                :rotation="order.showProducts ? 180 : 0"
-                v-if="order.products.length > 0"
-                :icon="['fa', 'angle-down']"
-                :size="'2x'"
-              />
-            </td>
-            <td>{{ order.status }}</td>
-            <td>{{ order.total_price }}</td>
-            <td>{{ order.delivery_type.name }}</td>
-            <td>{{ order.delivery_price }}</td>
-            <td>{{ order.payment_type.name }}</td>
-            <td>{{ order.payment_price }}</td>
-            <td>
-              {{
-                order.billing_address.street +
-                ", " +
-                order.billing_address.city +
-                " " +
-                order.billing_address.zip +
-                " - " +
-                order.billing_address.country
-              }}
-            </td>
-            <td>
-              {{
-                order.delivery_address.street +
-                ", " +
-                order.delivery_address.city +
-                " " +
-                order.delivery_address.zip +
-                " - " +
-                order.delivery_address.country
-              }}
-            </td>
-            <td style="display: flex; flex-direction: column">
-              <p>{{ order.user.name }}</p>
-              <p>{{ order.user.email }}</p>
-              <p>{{ order.user.prePhone }}{{ order.user.phone }}</p>
-            </td>
-          </tr>
-          <tr v-if="order.showProducts">
-            <div></div>
-            <div></div>
-            <th>Název</th>
-            <th>Počet</th>
-            <th>Cena</th>
-            <th>Cena se slevou</th>
-            <th>% sleva</th>
-            <th>Barva/varianta</th>
-          </tr>
-          <tr
-            v-if="order.showProducts"
-            v-for="product in order.products"
-            :key="product.id"
-          >
-            <div></div>
-            <div></div>
-            <td>{{ product.name }}</td>
-            <td>{{ product.pivot.product_count }}</td>
-            <td>{{ product.price }}</td>
-            <td>{{ product.discounted }}</td>
-            <td>{{ product.discountedPercent }}</td>
-            <td>
-              {{
-                product.color
-                  ? product.color.color_name
-                  : product.variant
-                  ? product.variant
-                  : ""
-              }}
-            </td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </div>
+        <tr
+          v-if="order.showProducts"
+          v-for="product in order.products"
+          :key="product.id"
+        >
+          <div></div>
+          <div></div>
+          <td>{{ product.name }}</td>
+          <td>{{ product.pivot.product_count }}</td>
+          <td>{{ product.price }}</td>
+          <td>{{ product.discounted }}</td>
+          <td>{{ product.discountedPercent }}</td>
+          <td>
+            {{
+              product.color
+                ? product.color.color_name
+                : product.variant
+                ? product.variant
+                : ""
+            }}
+          </td>
+        </tr>
+      </template>
+    </tbody>
+  </table>
 </template>
 
 <script>
diff --git a/Fitmo_frontend/src/components/admin/AllProducts.vue b/Fitmo_frontend/src/components/admin/AllProducts.vue
index 5a799df..a394350 100644
--- a/Fitmo_frontend/src/components/admin/AllProducts.vue
+++ b/Fitmo_frontend/src/components/admin/AllProducts.vue
@@ -4,6 +4,29 @@
     <ul class="productsList">
       <template v-for="product in products">
         <li v-if="!product.isChildren" :key="product.id">
+          <img
+            :src="
+              product.color_name
+                ? this.imagesBasePath +
+                  product.name +
+                  '-' +
+                  product.color_name +
+                  '/' +
+                  product.image_urls[0]
+                : product.variant
+                ? this.imagesBasePath +
+                  product.name +
+                  '-' +
+                  product.variant +
+                  '/' +
+                  product.image_urls[0]
+                : this.imagesBasePath +
+                  product.name +
+                  '/' +
+                  product.image_urls[0]
+            "
+            alt=""
+          />
           <span class="productsList__name__wrapper">
             <span class="productsList__name">
               {{
@@ -18,15 +41,38 @@
               <router-link :to="'/edit/' + product.id">Editovat</router-link>
               <li v-on:click="deleteProduct(product.id)">Smazat</li>
               <font-awesome-icon
-                v-if="product.children.length > 0"
+                v-if="product.children?.length > 0"
                 :icon="['fa', 'angle-down']"
                 :size="'2x'"
                 v-on:click="product.showChildren = !product.showChildren"
-                :class="{ 'rotated': product.showChildren }"
+                :class="{ rotated: product.showChildren }"
               />
             </ul>
             <template v-if="product.showChildren">
               <li v-for="child in product.children" :key="child.id">
+                <img
+                  :src="
+                    child.color_name
+                      ? this.imagesBasePath +
+                        child.name +
+                        '-' +
+                        child.color_name +
+                        '/' +
+                        product.image_urls[0]
+                      : child.variant
+                      ? this.imagesBasePath +
+                        child.name +
+                        '-' +
+                        child.variant +
+                        '/' +
+                        child.image_urls[0]
+                      : this.imagesBasePath +
+                        child.name +
+                        '/' +
+                        child.image_urls[0]
+                  "
+                  alt=""
+                />
                 <span class="productsList__name__wrapper">
                   <span class="productsList__name">
                     {{
@@ -58,7 +104,10 @@ import axios from "../../api";
 export default {
   components: {},
   data() {
-    return { products: [] };
+    return {
+      products: [],
+      imagesBasePath: process.env.VUE_APP_FITMO_BACKEND_URL + "/products/",
+    };
   },
 
   methods: {
@@ -110,12 +159,24 @@ export default {
   gap: 1rem;
   display: flex;
   flex-direction: column;
-  .rotated{
+
+  img {
+    width: 80px;
+    object-fit: contain;
+    object-position: top;
+  }
+
+  .rotated {
     transform: rotateX(180deg);
   }
   & > li {
     border-bottom: 1px solid $gray-second;
     padding: 1rem 0;
+    display: flex;
+
+    li {
+      display: flex;
+    }
   }
   &__name {
     font-weight: 500;
diff --git a/Fitmo_frontend/src/main.js b/Fitmo_frontend/src/main.js
index d0d27d2..1c3ec73 100644
--- a/Fitmo_frontend/src/main.js
+++ b/Fitmo_frontend/src/main.js
@@ -1,31 +1,36 @@
 import { createApp } from "vue";
 import App from "./App.vue";
-import store from './store'
+import store from "./store";
 import router from "./router";
 import VueNumberInput from "@chenfengyuan/vue-number-input";
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { far } from '@fortawesome/free-regular-svg-icons';
-import { fas } from '@fortawesome/free-solid-svg-icons';
-import { fab } from '@fortawesome/free-brands-svg-icons';
-import 'quill/dist/quill.core.css'
-import 'quill/dist/quill.snow.css'
-import 'quill/dist/quill.bubble.css'
-import VueQuillEditor from 'vue-quill-editor';
-import '@vueup/vue-quill/dist/vue-quill.snow.css';
+import { far } from "@fortawesome/free-regular-svg-icons";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { fab } from "@fortawesome/free-brands-svg-icons";
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+import VueQuillEditor from "vue-quill-editor";
+import "@vueup/vue-quill/dist/vue-quill.snow.css";
+import "@vueup/vue-quill/dist/vue-quill.bubble.css";
+import "@vueup/vue-quill/dist/vue-quill.core.css";
+
 import {
-    faAngleDown,
-    faBars,
-    faCheck,
-    faFile,
-    faSignOut,
-    faSpinner,
-    faStar,
-    faXmark,
+  faAngleDown,
+  faBars,
+  faCheck,
+  faFile,
+  faSignOut,
+  faSpinner,
+  faStar,
+  faXmark,
 } from "@fortawesome/free-solid-svg-icons";
-import VueGoogleAutocomplete from 'vue-google-autocomplete';
+import VueGoogleAutocomplete from "vue-google-autocomplete";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { SnackbarService } from "vue3-snackbar";
 import "vue3-snackbar/styles";
+import { createVuestic } from "vuestic-ui";
+
 library.add(far, fas, fab);
 library.add(faBars);
 library.add(faXmark);
@@ -38,11 +43,12 @@ library.add(faSpinner);
 library.add(faFile);
 
 createApp(App)
-    .use(router)
-    .use(SnackbarService)
-    .use(store)
-    .use(VueQuillEditor)
-    .component('vue-google-autocomplete', VueGoogleAutocomplete)
-    .component(VueNumberInput.name, VueNumberInput)
-    .component("font-awesome-icon", FontAwesomeIcon)
-    .mount("#app");
\ No newline at end of file
+  .use(router)
+  .use(SnackbarService)
+  .use(store)
+  .use(createVuestic())
+  .use(VueQuillEditor)
+  .component("vue-google-autocomplete", VueGoogleAutocomplete)
+  .component(VueNumberInput.name, VueNumberInput)
+  .component("font-awesome-icon", FontAwesomeIcon)
+  .mount("#app");
diff --git a/Fitmo_frontend/src/views/Home.vue b/Fitmo_frontend/src/views/Home.vue
index 5bd93a3..6624f71 100644
--- a/Fitmo_frontend/src/views/Home.vue
+++ b/Fitmo_frontend/src/views/Home.vue
@@ -86,12 +86,15 @@
           :products="product"
         />
       </div>
-      <button class="btn-gray">Zobrazit další produkty</button>
-      <div class="banners">
-        <img src="../../public/assets/banners/banner pc.jpg" alt="" />
-        <img src="../../public/assets/banners/banner tablet .jpg" alt="" />
-        <img src="../../public/assets/banners/banner mobil 1+1.jpg" alt="" />
-      </div>
+      <button class="btn-gray" :onClick="() => getProducts()">
+        <VaProgressCircle v-show="this.isLoading" indeterminate />
+        <span v-show="!this.isLoading">Zobrazit další produkty</span>
+      </button>
+      <!--      <div class="banners">-->
+      <!--        <img src="../../public/assets/banners/banner pc.jpg" alt="" />-->
+      <!--        <img src="../../public/assets/banners/banner tablet .jpg" alt="" />-->
+      <!--        <img src="../../public/assets/banners/banner mobil 1+1.jpg" alt="" />-->
+      <!--      </div>-->
     </div>
     <div class="home__gray_banner"></div>
     <CustomMade></CustomMade>
@@ -116,9 +119,11 @@ export default {
 
   data() {
     return {
+      page: 0,
       categories: [],
       ratings: [],
       products: [],
+      isLoading: false,
       imagesBasePath: `${process.env.VUE_APP_FITMO_BACKEND_URL}/categories/`,
     };
   },
@@ -164,11 +169,15 @@ export default {
       }
     },
     async getProducts() {
+      this.isLoading = true;
+      this.page++;
       try {
-        const response = await axios.get("/api/products");
-        this.products = response.data;
+        const response = await axios.get(`/api/products?page=${this.page}`);
+        this.products = [...this.products, ...response.data];
       } catch (error) {
         console.log(error);
+      } finally {
+        this.isLoading = false;
       }
     },
   },
@@ -184,8 +193,10 @@ export default {
 .Home {
   max-height: none;
 }
+
 .home {
   background: $gray-third;
+
   &__header {
     max-width: 1140px;
     width: 90%;
@@ -196,10 +207,12 @@ export default {
       height: 50rem;
       border: 1px solid black;
       margin: 7rem 0;
+
       img {
         object-fit: cover;
       }
     }
+
     h2 {
       font-size: 3rem;
     }
@@ -223,6 +236,7 @@ export default {
           position: relative;
           max-width: 30rem;
           transition: 0.3s ease all;
+
           &:hover {
             box-shadow: 2px 3px 18px rgba(0, 0, 0, 0.07);
           }
@@ -246,6 +260,7 @@ export default {
             display: flex;
             align-items: flex-end;
           }
+
           ul {
             display: flex;
             flex-wrap: wrap;
@@ -256,8 +271,10 @@ export default {
             li {
               padding-right: 0.9rem;
               position: relative;
+
               a {
                 position: relative;
+
                 &::before {
                   content: "";
                   display: block;
@@ -289,6 +306,7 @@ export default {
               }
             }
           }
+
           & > a {
             width: 18rem;
             margin: auto 0 2rem 0;
@@ -297,6 +315,7 @@ export default {
       }
     }
   }
+
   &__trailer {
     color: $white;
     font-weight: 400;
@@ -305,11 +324,13 @@ export default {
 
     .row > div {
       position: relative;
+
       > img {
         padding: 0.5rem;
         object-fit: cover;
         min-height: 100%;
       }
+
       .img_text_wrapper {
         display: flex;
         justify-content: center;
@@ -325,6 +346,7 @@ export default {
           height: 12rem;
           filter: drop-shadow(2px 4px 16px black);
         }
+
         span {
           font-weight: 700;
           font-size: 1.6rem;
@@ -333,11 +355,13 @@ export default {
       }
     }
   }
+
   &__eshop {
     max-width: 1520px;
     margin: auto;
     justify-content: space-between;
     padding: 0 5%;
+    margin-bottom: 4rem;
 
     .btn-gray {
       color: #525358;
@@ -347,13 +371,16 @@ export default {
       font-size: 12px;
       text-decoration: underline;
     }
+
     & > img {
       margin: 6rem 0 20rem 0;
     }
+
     h3 {
       font-size: 3.2rem;
       margin: 13.4rem 0 4rem 0;
     }
+
     &__wrapper {
       background: $white;
       border-radius: 2rem;
@@ -370,6 +397,7 @@ export default {
         position: absolute;
         z-index: 2;
       }
+
       &::after {
         content: "";
         right: 0;
@@ -380,6 +408,7 @@ export default {
         position: absolute;
         z-index: 2;
       }
+
       &__img_wrapper {
         position: relative;
         width: 100%;
@@ -387,6 +416,7 @@ export default {
         display: flex;
         align-items: center;
         flex-direction: column;
+
         &__subProducts {
           display: flex;
           border-radius: 50%;
@@ -406,6 +436,7 @@ export default {
             border-color: $black-headers;
             border-width: 3px;
           }
+
           & > div {
             display: block;
             height: 2.2rem;
@@ -419,6 +450,7 @@ export default {
           height: 100%;
           margin: 0 auto;
         }
+
         img:nth-of-type(2) {
           position: absolute;
           top: 0;
@@ -458,12 +490,14 @@ export default {
           max-width: 80%;
           margin: auto;
         }
+
         img {
           margin: 0 auto;
           object-fit: contain;
           height: 25rem;
           max-height: 25rem;
         }
+
         &::before {
           content: "";
           position: absolute;
@@ -473,6 +507,7 @@ export default {
           top: 0;
           left: 10%;
         }
+
         &:nth-child(odd) {
           &::after {
             content: "";
@@ -491,6 +526,7 @@ export default {
         line-height: 2rem;
         min-height: 1.8rem;
       }
+
       &__price {
         font-weight: 700;
         font-size: 1.6rem;
@@ -502,6 +538,7 @@ export default {
         & > * {
           margin: 0 0.2rem;
         }
+
         &__trough {
           font-size: 1.1rem;
           font-weight: 400;
@@ -517,10 +554,12 @@ export default {
             position: absolute;
           }
         }
+
         &__discount {
           color: $yellow;
         }
       }
+
       &__discounts {
         margin-top: 0.4rem;
         min-height: 2.8rem;
@@ -538,6 +577,7 @@ export default {
       }
     }
   }
+
   &__gray_banner {
     height: 73.8rem;
     background: $black-second;
@@ -552,6 +592,7 @@ export default {
       padding: 1.5rem 4rem;
       font-size: 15px;
     }
+
     &__wrapper {
       & > div {
         h4 {
@@ -565,12 +606,15 @@ export default {
         width: 6.5rem;
         font-size: 2rem;
       }
+
       &__name {
         font-size: 1.7rem;
         margin-top: 0.3rem;
       }
+
       &__price {
         font-size: 1.9rem;
+
         &__trough {
           font-size: 1.4rem;
           font-weight: 400;
@@ -579,24 +623,29 @@ export default {
     }
   }
 }
+
 @media screen and (min-width: $screen-md-min) {
   .home {
     &__header {
       padding-top: 11.1rem;
     }
+
     &__trailer {
       .center {
         display: block;
       }
+
       .row > div .img_text_wrapper span {
         font-size: 1.8rem;
       }
     }
+
     &__eshop__wrapper {
       &__item_discount {
         top: 3rem;
         right: 3rem;
       }
+
       &__discounts {
         span {
           font-size: 1.2rem;
@@ -615,6 +664,7 @@ export default {
     &:nth-child(odd) {
       justify-content: flex-end;
     }
+
     &:nth-child(even) {
       justify-content: flex-start;
     }
@@ -627,10 +677,12 @@ export default {
       > img {
         padding-left: 0.5rem;
       }
+
       .img_text_wrapper {
         span {
           font-size: 2rem;
         }
+
         img {
         }
       }
@@ -639,24 +691,29 @@ export default {
     &__eshop {
       &__wrapper {
         padding: 0;
+
         & > div {
           &:hover {
             -webkit-box-shadow: 2px 3px 18px rgba(0, 0, 0, 0.29);
             -moz-box-shadow: 2px 3px 18px rgba(0, 0, 0, 0.29);
             box-shadow: 2px 3px 18px rgba(0, 0, 0, 0.29);
             z-index: 99;
+
             .home__eshop__wrapper__img_wrapper {
               img:first-of-type {
                 opacity: 0;
               }
+
               img:last-of-type {
                 opacity: 1;
               }
             }
           }
+
           &:nth-child(n + 7) {
             display: flex;
           }
+
           &::after {
             content: "";
             position: absolute;
@@ -671,12 +728,15 @@ export default {
     }
   }
 }
+
 @media screen and (min-width: $screen-xl-min) {
   .home {
     &__eshop {
     }
+
     &__trailer .row > div {
       min-height: 28rem;
+
       .img_text_wrapper {
         span {
           font-size: 2.2rem;
@@ -685,25 +745,32 @@ export default {
         }
       }
     }
+
     &__header {
       padding-top: 18.3rem;
       max-width: 1484px;
+
       h2 {
         font-size: 3.96rem;
         line-height: 4.3rem;
       }
+
       .row > div {
         padding: 1.6rem;
+
         .category_wrapper {
           max-width: unset;
+
           h3 {
             font-size: 2.88rem;
             margin-bottom: 2.2rem;
           }
+
           ul {
             font-size: 1.44rem;
             margin-bottom: 4.5rem;
           }
+
           > a {
             font-size: 1.44rem;
             white-space: nowrap;