diff --git a/composer.json b/composer.json
index fe2a4b6..f5ad155 100644
--- a/composer.json
+++ b/composer.json
@@ -4,7 +4,7 @@
     "minimum-stability": "stable",
     "prefer-stable": true,
     "require": {
-        "php": "^8.0",
+        "php": "^8.1",
         "ext-ctype": "*",
         "ext-curl": "*",
         "ext-iconv": "*",
diff --git a/public/style/style.css b/public/style/style.css
new file mode 100644
index 0000000..a0cff78
--- /dev/null
+++ b/public/style/style.css
@@ -0,0 +1,47 @@
+html {
+    height: 20%;
+}
+body {
+    font-family: 'Montserrat', sans-serif;
+    height: 100%;
+    background-color: #e9dcd1;
+}
+
+.p {
+    line-height: 1.5;
+}
+
+.grid {
+    display: inline-grid;
+    border: #1111 1px solid;
+    box-shadow: 0 0 5px -1px rgb(0 0 0 / 30%), 0 0 15px -1px rgb(0 0 0 / 25%), 0 0 20px -1px rgb(0 0 0 / 15%);
+    margin: 4vw 0 0 4vw;
+    height: 25vh;
+    width: 20vh;
+    border-radius: 10%;
+    background-color: #e9dcd1;
+}
+
+.grid:active {
+    box-shadow: 0 0 5px -1px rgb(0 0 0 / 30%), 0 0 15px -1px rgb(0 0 0 / 25%), 0 0 20px -1px rgb(0 0 0 / 15%);
+    transform: translateY(10px) translateX(10px);
+}
+
+.meal-name {
+    color: #b5191f !important;
+    text-decoration: none;
+    text-align: center;
+    margin-top: 2vh;
+}
+
+.image {
+    margin-top: 5vh;
+    height: 10vh;
+}
+
+.text {
+    margin-left: 2vw;
+}
+h1 {
+    font-size: 4rem;
+}
diff --git a/src/Controller/MealController.php b/src/Controller/MealController.php
index 79b90f8..cccadfe 100644
--- a/src/Controller/MealController.php
+++ b/src/Controller/MealController.php
@@ -19,12 +19,18 @@ public function getMealCategories(MealMatcherService $mealMatcherService): Respo
         return $this->render('categories/index.html.twig', ['meals' => $mealMatcherService->getParentMealCategories()]);
     }
 
+    /**
+     * @throws \GuzzleHttp\Exception\GuzzleException
+     */
     #[Route('/{parentId}', name: 'meal_categories_for_parent')]
     public function getCategoriesForParent(int $parentId, MealMatcherService $mealMatcherService)
     {
         return $this->render('categories/index.html.twig', ['meals' => $mealMatcherService->getCategoriesForParent($parentId)]);
     }
 
+    /**
+     * @throws \GuzzleHttp\Exception\GuzzleException
+     */
     #[Route('/meals/{categoryId}', name: 'meals_for_category')]
     public function getMealsForCategory(int $categoryId, MealMatcherService $mealMatcherService)
     {
diff --git a/src/Service/MealMatcherService.php b/src/Service/MealMatcherService.php
index ef33852..2886dda 100644
--- a/src/Service/MealMatcherService.php
+++ b/src/Service/MealMatcherService.php
@@ -28,7 +28,10 @@ public function getMealsCategories()
         return $categories;
     }
 
-    public function getParentMealCategories()
+    /**
+     * @throws \GuzzleHttp\Exception\GuzzleException
+     */
+    public function getParentMealCategories(): array
     {
         $categories = $this->getMealsCategories();
         $parentCategories = [];
@@ -44,7 +47,10 @@ public function getParentMealCategories()
         return $parentCategories;
     }
 
-    public function getCategoriesForParent(int $parentId)
+    /**
+     * @throws \GuzzleHttp\Exception\GuzzleException
+     */
+    public function getCategoriesForParent(int $parentId): array
     {
         $categories = $this->getMealsCategories();
         $childCategories = [];
@@ -60,11 +66,13 @@ public function getCategoriesForParent(int $parentId)
         return $childCategories;
     }
 
+    /**
+     * @throws \GuzzleHttp\Exception\GuzzleException
+     */
     public function getMealsForCategory(int $categoryId)
     {
-        $response = $this->client->request('GET', '/meals/category/'.$categoryId);
+        $response = $this->client->request('GET', '/meals/category/' . $categoryId);
 
-        $meals = json_decode($response->getBody()->getContents());
-        return $meals;
+        return json_decode($response->getBody()->getContents());
     }
 }
\ No newline at end of file
diff --git a/templates/categories/index.html.twig b/templates/categories/index.html.twig
index 571b0ee..c66feec 100644
--- a/templates/categories/index.html.twig
+++ b/templates/categories/index.html.twig
@@ -1,38 +1,47 @@
 {% extends 'base.html.twig' %}
 
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ asset('style/style.css') }}">
+{% endblock %}
+
 {% block title %}Hello MealController!{% endblock %}
 
 {% block body %}
-    <style>
-        .example-wrapper {
-            margin: 1em auto;
-            max-width: 800px;
-            width: 95%;
-            font: 18px/1.5 sans-serif;
-        }
-
-        .example-wrapper code {
-            background: #F5F5F5;
-            padding: 2px 6px;
-        }
-    </style>
-
-    <div class="example-wrapper">
-        <h1>Welkom bij de online sommelier</h1>
-        <p>Hier kunt u uw gerecht kiezen en dan worden er bijpassende wijnen gezocht.</p>
-    </div>
-    <div class="meals">
-        {% for meal in meals %}
-            {% if meal.parent is null %}
-                <p><a href="{{ path('meal_categories_for_parent', {parentId: meal.categoryId}) }}"> {{ meal.name }}</a>
-                </p>
-            {% else %}
-                <p><a href="{{ path('meals_for_category', {categoryId: meal.categoryId}) }}"> {{ meal.name }}</a>
-                </p>
-            {% endif %}
-        {% endfor %}
-    </div>
+<style>
+    .example-wrapper {
+        margin: 1em auto;
+        max-width: 800px;
+        width: 95%;
+        font: 18px/1.5 sans-serif;
+    }
+
+    .example-wrapper code {
+        background: #F5F5F5;
+        padding: 2px 6px;
+    }
+</style>
+
+<div class="text">
+    <h1>U het gerecht en wij adviseren de wijn!</h1>
+    <p class="p"></p>
+</div>
+{% for meal in meals %}
+    <section class="grid">
+        {% if meal.parent is null %}
+        <a href="{{ path('meal_categories_for_parent', {parentId: meal.categoryId}) }}" class="meal-name">
+            <div class="item">{{ meal.name }}</div>
+            <img src="https://www.grandcruwijnen.nl/static/version1634749600/frontend/Grandcruwijnen/default/nl_NL/Grandcruwijnen_SmartSommelier/images/93.svg"
+                 alt="" class="image">
+        </a>
 
+{#            <section class="grid2"> #}
+        {% else %}
+            <a href="{{ path('meals_for_category', {categoryId: meal.categoryId}) }}" class="meal-name">
+                <div class="item">{{ meal.name }}</div>
+            </a>
+        {% endif %}
+    </section>
+    {% endfor %}
 {% endblock %}
 
 
diff --git a/templates/meals/index.html.twig b/templates/meals/index.html.twig
index e79b122..e16b175 100644
--- a/templates/meals/index.html.twig
+++ b/templates/meals/index.html.twig
@@ -1,32 +1,42 @@
 {% extends 'base.html.twig' %}
 
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ asset('style/style.css') }}">
+{% endblock %}
+
+
 {% block title %}Hello MealController!{% endblock %}
 
+
 {% block body %}
-    <style>
-        .example-wrapper {
-            margin: 1em auto;
-            max-width: 800px;
-            width: 95%;
-            font: 18px/1.5 sans-serif;
-        }
-
-        .example-wrapper code {
-            background: #F5F5F5;
-            padding: 2px 6px;
-        }
-    </style>
-{#https://mealmatcher.grandcruwijnen.nl/meals/%7B12de8bb3-8ce2-43a9-8b09-d56161365ebc%7D#}
-    <div class="example-wrapper">
-        <h1>Welkom bij de online sommelier</h1>
-        <p>Hier kunt u uw gerecht kiezen en dan worden er bijpassende wijnen gezocht.</p>
-    </div>
-        {% for meal in meals %}
-            <p>{{ meal.name }}</p>
-            <img src="https://mealmatcher.grandcruwijnen.nl/meals/{{ meal.id }}" alt="">
-        {% endfor %}
+<style>
+    .example-wrapper {
+        margin: 1em auto;
+        max-width: 800px;
+        width: 95%;
+        font: 18px/1.5 sans-serif;
+    }
 
+    .example-wrapper code {
+        background: #F5F5F5;
+        padding: 2px 6px;
+    }
+</style>
+{# https://mealmatcher.grandcruwijnen.nl/meals/%7B12de8bb3-8ce2-43a9-8b09-d56161365ebc%7D #}
 
-{% endblock %}
+<div class="example-wrapper">
+    <h1>Welkom bij de online sommelier</h1>
+    <p>Hier kunt u uw gerecht kiezen en dan worden er bijpassende wijnen gezocht.</p>
+</div>
+
+
+<div class="grid-row main-categories">
+    {% for meal in meals %}
+        <p>{{ meal.name }}</p>
+        <img src="https://mealmatcher.grandcruwijnen.nl/meals/{{ meal.id }}" alt="">
+    {% endfor %}
+</div>
+
+    {% endblock %}