commit c4f6e57a52778e22f870e5f964839ab8fb9da9d0
Author: Adam Mištera <amistera@students.zcu.cz>
Date:   Fri Apr 17 18:50:48 2020 +0200

    Issue #7848 @3h
    [+] Vizualizace hlavní stránky

diff --git a/app/Http/Controllers/CategoriesController.php b/app/Http/Controllers/CategoriesController.php
index 314e60f..46b9c61 100644
--- a/app/Http/Controllers/CategoriesController.php
+++ b/app/Http/Controllers/CategoriesController.php
@@ -58,7 +58,7 @@ class CategoriesController extends Controller
             $categories = array();
             for($i = 1; $i <= $countCategory;$i++)
             {
-                array_push($categories, Category::where('category_id', $i)->get());
+                array_push($categories, Category::find($i)->get());
             }
             $clusters = $this->calculateClusters($categories);
 
diff --git a/public/css/app.css b/public/css/app.css
index f58a450..77de7b4 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -18,7 +18,7 @@
   --green: #38c172;
   --teal: #4dc0b5;
   --cyan: #6cb2eb;
-  --white: #fff;
+  --white: #ffff;
   --gray: #6c757d;
   --gray-dark: #343a40;
   --primary: #3490dc;
@@ -546,7 +546,7 @@ a > code {
 kbd {
   padding: 0.2rem 0.4rem;
   font-size: 87.5%;
-  color: #fff;
+  color: #ffff;
   background-color: #212529;
   border-radius: 0.2rem;
 }
@@ -2049,7 +2049,7 @@ pre code {
 }
 
 .table .thead-dark th {
-  color: #fff;
+  color: #ffff;
   background-color: #343a40;
   border-color: #454d55;
 }
@@ -2061,7 +2061,7 @@ pre code {
 }
 
 .table-dark {
-  color: #fff;
+  color: #ffff;
   background-color: #343a40;
 }
 
@@ -2080,7 +2080,7 @@ pre code {
 }
 
 .table-dark.table-hover tbody tr:hover {
-  color: #fff;
+  color: #ffff;
   background-color: rgba(255, 255, 255, 0.075);
 }
 
@@ -2156,7 +2156,7 @@ pre code {
   font-weight: 400;
   line-height: 1.6;
   color: #495057;
-  background-color: #fff;
+  background-color: #ffff;
   background-clip: padding-box;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
@@ -2181,7 +2181,7 @@ pre code {
 
 .form-control:focus {
   color: #495057;
-  background-color: #fff;
+  background-color: #ffff;
   border-color: #a1cbef;
   outline: 0;
   box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.25);
@@ -2220,7 +2220,7 @@ pre code {
 
 select.form-control:focus::-ms-value {
   color: #495057;
-  background-color: #fff;
+  background-color: #ffff;
 }
 
 .form-control-file,
@@ -2370,7 +2370,7 @@ textarea.form-control {
   margin-top: 0.1rem;
   font-size: 0.7875rem;
   line-height: 1.6;
-  color: #fff;
+  color: #ffff;
   background-color: rgba(56, 193, 114, 0.9);
   border-radius: 0.25rem;
 }
@@ -2408,7 +2408,7 @@ textarea.form-control.is-valid {
 .custom-select.is-valid {
   border-color: #38c172;
   padding-right: calc(0.75em + 2.3125rem);
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2338c172' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2338c172' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #ffff no-repeat center right 1.75rem/calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
 }
 
 .was-validated .custom-select:valid:focus,
@@ -2484,7 +2484,7 @@ textarea.form-control.is-valid {
   margin-top: 0.1rem;
   font-size: 0.7875rem;
   line-height: 1.6;
-  color: #fff;
+  color: #ffff;
   background-color: rgba(227, 52, 47, 0.9);
   border-radius: 0.25rem;
 }
@@ -2522,7 +2522,7 @@ textarea.form-control.is-invalid {
 .custom-select.is-invalid {
   border-color: #e3342f;
   padding-right: calc(0.75em + 2.3125rem);
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e3342f' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e3342f' stroke='none'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e3342f' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e3342f' stroke='none'/%3e%3c/svg%3e") #ffff no-repeat center right 1.75rem/calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
 }
 
 .was-validated .custom-select:invalid:focus,
@@ -2695,20 +2695,20 @@ fieldset:disabled a.btn {
 }
 
 .btn-primary {
-  color: #fff;
+  color: #ffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
 
 .btn-primary:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #227dc7;
   border-color: #2176bd;
 }
 
 .btn-primary:focus,
 .btn-primary.focus {
-  color: #fff;
+  color: #ffff;
   background-color: #227dc7;
   border-color: #2176bd;
   box-shadow: 0 0 0 0.2rem rgba(82, 161, 225, 0.5);
@@ -2716,7 +2716,7 @@ fieldset:disabled a.btn {
 
 .btn-primary.disabled,
 .btn-primary:disabled {
-  color: #fff;
+  color: #ffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
@@ -2724,7 +2724,7 @@ fieldset:disabled a.btn {
 .btn-primary:not(:disabled):not(.disabled):active,
 .btn-primary:not(:disabled):not(.disabled).active,
 .show > .btn-primary.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #2176bd;
   border-color: #1f6fb2;
 }
@@ -2736,20 +2736,20 @@ fieldset:disabled a.btn {
 }
 
 .btn-secondary {
-  color: #fff;
+  color: #ffff;
   background-color: #6c757d;
   border-color: #6c757d;
 }
 
 .btn-secondary:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #5a6268;
   border-color: #545b62;
 }
 
 .btn-secondary:focus,
 .btn-secondary.focus {
-  color: #fff;
+  color: #ffff;
   background-color: #5a6268;
   border-color: #545b62;
   box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
@@ -2757,7 +2757,7 @@ fieldset:disabled a.btn {
 
 .btn-secondary.disabled,
 .btn-secondary:disabled {
-  color: #fff;
+  color: #ffff;
   background-color: #6c757d;
   border-color: #6c757d;
 }
@@ -2765,7 +2765,7 @@ fieldset:disabled a.btn {
 .btn-secondary:not(:disabled):not(.disabled):active,
 .btn-secondary:not(:disabled):not(.disabled).active,
 .show > .btn-secondary.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #545b62;
   border-color: #4e555b;
 }
@@ -2777,20 +2777,20 @@ fieldset:disabled a.btn {
 }
 
 .btn-success {
-  color: #fff;
+  color: #ffff;
   background-color: #38c172;
   border-color: #38c172;
 }
 
 .btn-success:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #2fa360;
   border-color: #2d995b;
 }
 
 .btn-success:focus,
 .btn-success.focus {
-  color: #fff;
+  color: #ffff;
   background-color: #2fa360;
   border-color: #2d995b;
   box-shadow: 0 0 0 0.2rem rgba(86, 202, 135, 0.5);
@@ -2798,7 +2798,7 @@ fieldset:disabled a.btn {
 
 .btn-success.disabled,
 .btn-success:disabled {
-  color: #fff;
+  color: #ffff;
   background-color: #38c172;
   border-color: #38c172;
 }
@@ -2806,7 +2806,7 @@ fieldset:disabled a.btn {
 .btn-success:not(:disabled):not(.disabled):active,
 .btn-success:not(:disabled):not(.disabled).active,
 .show > .btn-success.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #2d995b;
   border-color: #2a9055;
 }
@@ -2824,14 +2824,14 @@ fieldset:disabled a.btn {
 }
 
 .btn-info:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #4aa0e6;
   border-color: #3f9ae5;
 }
 
 .btn-info:focus,
 .btn-info.focus {
-  color: #fff;
+  color: #ffff;
   background-color: #4aa0e6;
   border-color: #3f9ae5;
   box-shadow: 0 0 0 0.2rem rgba(97, 157, 206, 0.5);
@@ -2847,7 +2847,7 @@ fieldset:disabled a.btn {
 .btn-info:not(:disabled):not(.disabled):active,
 .btn-info:not(:disabled):not(.disabled).active,
 .show > .btn-info.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #3f9ae5;
   border-color: #3495e3;
 }
@@ -2900,20 +2900,20 @@ fieldset:disabled a.btn {
 }
 
 .btn-danger {
-  color: #fff;
+  color: #ffff;
   background-color: #e3342f;
   border-color: #e3342f;
 }
 
 .btn-danger:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #d0211c;
   border-color: #c51f1a;
 }
 
 .btn-danger:focus,
 .btn-danger.focus {
-  color: #fff;
+  color: #ffff;
   background-color: #d0211c;
   border-color: #c51f1a;
   box-shadow: 0 0 0 0.2rem rgba(231, 82, 78, 0.5);
@@ -2921,7 +2921,7 @@ fieldset:disabled a.btn {
 
 .btn-danger.disabled,
 .btn-danger:disabled {
-  color: #fff;
+  color: #ffff;
   background-color: #e3342f;
   border-color: #e3342f;
 }
@@ -2929,7 +2929,7 @@ fieldset:disabled a.btn {
 .btn-danger:not(:disabled):not(.disabled):active,
 .btn-danger:not(:disabled):not(.disabled).active,
 .show > .btn-danger.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #c51f1a;
   border-color: #b91d19;
 }
@@ -2982,20 +2982,20 @@ fieldset:disabled a.btn {
 }
 
 .btn-dark {
-  color: #fff;
+  color: #ffff;
   background-color: #343a40;
   border-color: #343a40;
 }
 
 .btn-dark:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #23272b;
   border-color: #1d2124;
 }
 
 .btn-dark:focus,
 .btn-dark.focus {
-  color: #fff;
+  color: #ffff;
   background-color: #23272b;
   border-color: #1d2124;
   box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
@@ -3003,7 +3003,7 @@ fieldset:disabled a.btn {
 
 .btn-dark.disabled,
 .btn-dark:disabled {
-  color: #fff;
+  color: #ffff;
   background-color: #343a40;
   border-color: #343a40;
 }
@@ -3011,7 +3011,7 @@ fieldset:disabled a.btn {
 .btn-dark:not(:disabled):not(.disabled):active,
 .btn-dark:not(:disabled):not(.disabled).active,
 .show > .btn-dark.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #1d2124;
   border-color: #171a1d;
 }
@@ -3028,7 +3028,7 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-primary:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
@@ -3047,7 +3047,7 @@ fieldset:disabled a.btn {
 .btn-outline-primary:not(:disabled):not(.disabled):active,
 .btn-outline-primary:not(:disabled):not(.disabled).active,
 .show > .btn-outline-primary.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
@@ -3064,7 +3064,7 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-secondary:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #6c757d;
   border-color: #6c757d;
 }
@@ -3083,7 +3083,7 @@ fieldset:disabled a.btn {
 .btn-outline-secondary:not(:disabled):not(.disabled):active,
 .btn-outline-secondary:not(:disabled):not(.disabled).active,
 .show > .btn-outline-secondary.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #6c757d;
   border-color: #6c757d;
 }
@@ -3100,7 +3100,7 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-success:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #38c172;
   border-color: #38c172;
 }
@@ -3119,7 +3119,7 @@ fieldset:disabled a.btn {
 .btn-outline-success:not(:disabled):not(.disabled):active,
 .btn-outline-success:not(:disabled):not(.disabled).active,
 .show > .btn-outline-success.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #38c172;
   border-color: #38c172;
 }
@@ -3208,7 +3208,7 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-danger:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #e3342f;
   border-color: #e3342f;
 }
@@ -3227,7 +3227,7 @@ fieldset:disabled a.btn {
 .btn-outline-danger:not(:disabled):not(.disabled):active,
 .btn-outline-danger:not(:disabled):not(.disabled).active,
 .show > .btn-outline-danger.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #e3342f;
   border-color: #e3342f;
 }
@@ -3280,7 +3280,7 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-dark:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #343a40;
   border-color: #343a40;
 }
@@ -3299,7 +3299,7 @@ fieldset:disabled a.btn {
 .btn-outline-dark:not(:disabled):not(.disabled):active,
 .btn-outline-dark:not(:disabled):not(.disabled).active,
 .show > .btn-outline-dark.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #343a40;
   border-color: #343a40;
 }
@@ -3435,7 +3435,7 @@ input[type=button].btn-block {
   color: #212529;
   text-align: left;
   list-style: none;
-  background-color: #fff;
+  background-color: #ffff;
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0.25rem;
@@ -3622,7 +3622,7 @@ input[type=button].btn-block {
 
 .dropdown-item.active,
 .dropdown-item:active {
-  color: #fff;
+  color: #ffff;
   text-decoration: none;
   background-color: #3490dc;
 }
@@ -3984,7 +3984,7 @@ input[type=button].btn-block {
 }
 
 .custom-control-input:checked ~ .custom-control-label::before {
-  color: #fff;
+  color: #ffff;
   border-color: #3490dc;
   background-color: #3490dc;
 }
@@ -3998,7 +3998,7 @@ input[type=button].btn-block {
 }
 
 .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
-  color: #fff;
+  color: #ffff;
   background-color: #cce3f6;
   border-color: #cce3f6;
 }
@@ -4028,7 +4028,7 @@ input[type=button].btn-block {
   height: 1rem;
   pointer-events: none;
   content: "";
-  background-color: #fff;
+  background-color: #ffff;
   border: #adb5bd solid 1px;
 }
 
@@ -4048,7 +4048,7 @@ input[type=button].btn-block {
 }
 
 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
 }
 
 .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
@@ -4057,7 +4057,7 @@ input[type=button].btn-block {
 }
 
 .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23ffff' d='M0 2h4'/%3e%3c/svg%3e");
 }
 
 .custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
@@ -4073,7 +4073,7 @@ input[type=button].btn-block {
 }
 
 .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffff'/%3e%3c/svg%3e");
 }
 
 .custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
@@ -4108,7 +4108,7 @@ input[type=button].btn-block {
 }
 
 .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
-  background-color: #fff;
+  background-color: #ffff;
   transform: translateX(0.75rem);
 }
 
@@ -4126,7 +4126,7 @@ input[type=button].btn-block {
   line-height: 1.6;
   color: #495057;
   vertical-align: middle;
-  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
+  background: #ffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
   -webkit-appearance: none;
@@ -4142,7 +4142,7 @@ input[type=button].btn-block {
 
 .custom-select:focus::-ms-value {
   color: #495057;
-  background-color: #fff;
+  background-color: #ffff;
 }
 
 .custom-select[multiple],
@@ -4228,7 +4228,7 @@ input[type=button].btn-block {
   font-weight: 400;
   line-height: 1.6;
   color: #495057;
-  background-color: #fff;
+  background-color: #ffff;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
 }
@@ -4495,7 +4495,7 @@ input[type=button].btn-block {
 
 .nav-pills .nav-link.active,
 .nav-pills .show > .nav-link {
-  color: #fff;
+  color: #ffff;
   background-color: #3490dc;
 }
 
@@ -4906,12 +4906,12 @@ input[type=button].btn-block {
 }
 
 .navbar-dark .navbar-brand {
-  color: #fff;
+  color: #ffff;
 }
 
 .navbar-dark .navbar-brand:hover,
 .navbar-dark .navbar-brand:focus {
-  color: #fff;
+  color: #ffff;
 }
 
 .navbar-dark .navbar-nav .nav-link {
@@ -4931,7 +4931,7 @@ input[type=button].btn-block {
 .navbar-dark .navbar-nav .active > .nav-link,
 .navbar-dark .navbar-nav .nav-link.show,
 .navbar-dark .navbar-nav .nav-link.active {
-  color: #fff;
+  color: #ffff;
 }
 
 .navbar-dark .navbar-toggler {
@@ -4948,12 +4948,12 @@ input[type=button].btn-block {
 }
 
 .navbar-dark .navbar-text a {
-  color: #fff;
+  color: #ffff;
 }
 
 .navbar-dark .navbar-text a:hover,
 .navbar-dark .navbar-text a:focus {
-  color: #fff;
+  color: #ffff;
 }
 
 .card {
@@ -4962,7 +4962,7 @@ input[type=button].btn-block {
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
-  background-color: #fff;
+  background-color: #ffff;
   background-clip: border-box;
   border: 1px solid rgba(0, 0, 0, 0.125);
   border-radius: 0.25rem;
@@ -5233,7 +5233,7 @@ input[type=button].btn-block {
   margin-left: -1px;
   line-height: 1.25;
   color: #3490dc;
-  background-color: #fff;
+  background-color: #ffff;
   border: 1px solid #dee2e6;
 }
 
@@ -5264,7 +5264,7 @@ input[type=button].btn-block {
 
 .page-item.active .page-link {
   z-index: 3;
-  color: #fff;
+  color: #ffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
@@ -5273,7 +5273,7 @@ input[type=button].btn-block {
   color: #6c757d;
   pointer-events: none;
   cursor: auto;
-  background-color: #fff;
+  background-color: #ffff;
   border-color: #dee2e6;
 }
 
@@ -5349,13 +5349,13 @@ a.badge:focus {
 }
 
 .badge-primary {
-  color: #fff;
+  color: #ffff;
   background-color: #3490dc;
 }
 
 a.badge-primary:hover,
 a.badge-primary:focus {
-  color: #fff;
+  color: #ffff;
   background-color: #2176bd;
 }
 
@@ -5366,13 +5366,13 @@ a.badge-primary.focus {
 }
 
 .badge-secondary {
-  color: #fff;
+  color: #ffff;
   background-color: #6c757d;
 }
 
 a.badge-secondary:hover,
 a.badge-secondary:focus {
-  color: #fff;
+  color: #ffff;
   background-color: #545b62;
 }
 
@@ -5383,13 +5383,13 @@ a.badge-secondary.focus {
 }
 
 .badge-success {
-  color: #fff;
+  color: #ffff;
   background-color: #38c172;
 }
 
 a.badge-success:hover,
 a.badge-success:focus {
-  color: #fff;
+  color: #ffff;
   background-color: #2d995b;
 }
 
@@ -5434,13 +5434,13 @@ a.badge-warning.focus {
 }
 
 .badge-danger {
-  color: #fff;
+  color: #ffff;
   background-color: #e3342f;
 }
 
 a.badge-danger:hover,
 a.badge-danger:focus {
-  color: #fff;
+  color: #ffff;
   background-color: #c51f1a;
 }
 
@@ -5468,13 +5468,13 @@ a.badge-light.focus {
 }
 
 .badge-dark {
-  color: #fff;
+  color: #ffff;
   background-color: #343a40;
 }
 
 a.badge-dark:hover,
 a.badge-dark:focus {
-  color: #fff;
+  color: #ffff;
   background-color: #1d2124;
 }
 
@@ -5677,7 +5677,7 @@ a.badge-dark.focus {
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
-  color: #fff;
+  color: #ffff;
   text-align: center;
   white-space: nowrap;
   background-color: #3490dc;
@@ -5746,7 +5746,7 @@ a.badge-dark.focus {
   position: relative;
   display: block;
   padding: 0.75rem 1.25rem;
-  background-color: #fff;
+  background-color: #ffff;
   border: 1px solid rgba(0, 0, 0, 0.125);
 }
 
@@ -5764,12 +5764,12 @@ a.badge-dark.focus {
 .list-group-item:disabled {
   color: #6c757d;
   pointer-events: none;
-  background-color: #fff;
+  background-color: #ffff;
 }
 
 .list-group-item.active {
   z-index: 2;
-  color: #fff;
+  color: #ffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
@@ -5957,7 +5957,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-primary.list-group-item-action.active {
-  color: #fff;
+  color: #ffff;
   background-color: #1b4b72;
   border-color: #1b4b72;
 }
@@ -5974,7 +5974,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-secondary.list-group-item-action.active {
-  color: #fff;
+  color: #ffff;
   background-color: #383d41;
   border-color: #383d41;
 }
@@ -5991,7 +5991,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-success.list-group-item-action.active {
-  color: #fff;
+  color: #ffff;
   background-color: #1d643b;
   border-color: #1d643b;
 }
@@ -6008,7 +6008,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-info.list-group-item-action.active {
-  color: #fff;
+  color: #ffff;
   background-color: #385d7a;
   border-color: #385d7a;
 }
@@ -6025,7 +6025,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-warning.list-group-item-action.active {
-  color: #fff;
+  color: #ffff;
   background-color: #857b26;
   border-color: #857b26;
 }
@@ -6042,7 +6042,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-danger.list-group-item-action.active {
-  color: #fff;
+  color: #ffff;
   background-color: #761b18;
   border-color: #761b18;
 }
@@ -6059,7 +6059,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-light.list-group-item-action.active {
-  color: #fff;
+  color: #ffff;
   background-color: #818182;
   border-color: #818182;
 }
@@ -6076,7 +6076,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-dark.list-group-item-action.active {
-  color: #fff;
+  color: #ffff;
   background-color: #1b1e21;
   border-color: #1b1e21;
 }
@@ -6087,7 +6087,7 @@ a.badge-dark.focus {
   font-weight: 700;
   line-height: 1;
   color: #000;
-  text-shadow: 0 1px 0 #fff;
+  text-shadow: 0 1px 0 #ffff;
   opacity: 0.5;
 }
 
@@ -6257,7 +6257,7 @@ a.close.disabled {
   flex-direction: column;
   width: 100%;
   pointer-events: auto;
-  background-color: #fff;
+  background-color: #ffff;
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 0.3rem;
@@ -6488,7 +6488,7 @@ a.close.disabled {
 .tooltip-inner {
   max-width: 200px;
   padding: 0.25rem 0.5rem;
-  color: #fff;
+  color: #ffff;
   text-align: center;
   background-color: #000;
   border-radius: 0.25rem;
@@ -6517,7 +6517,7 @@ a.close.disabled {
   line-break: auto;
   font-size: 0.7875rem;
   word-wrap: break-word;
-  background-color: #fff;
+  background-color: #ffff;
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 0.3rem;
@@ -6561,7 +6561,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=top] > .arrow::after {
   bottom: 1px;
   border-width: 0.5rem 0.5rem 0;
-  border-top-color: #fff;
+  border-top-color: #ffff;
 }
 
 .bs-popover-right,
@@ -6588,7 +6588,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=right] > .arrow::after {
   left: 1px;
   border-width: 0.5rem 0.5rem 0.5rem 0;
-  border-right-color: #fff;
+  border-right-color: #ffff;
 }
 
 .bs-popover-bottom,
@@ -6612,7 +6612,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=bottom] > .arrow::after {
   top: 1px;
   border-width: 0 0.5rem 0.5rem 0.5rem;
-  border-bottom-color: #fff;
+  border-bottom-color: #ffff;
 }
 
 .bs-popover-bottom .popover-header::before,
@@ -6651,7 +6651,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=left] > .arrow::after {
   right: 1px;
   border-width: 0.5rem 0 0.5rem 0.5rem;
-  border-left-color: #fff;
+  border-left-color: #ffff;
 }
 
 .popover-header {
@@ -6763,7 +6763,7 @@ a.close.disabled {
   align-items: center;
   justify-content: center;
   width: 15%;
-  color: #fff;
+  color: #ffff;
   text-align: center;
   opacity: 0.5;
   transition: opacity 0.15s ease;
@@ -6780,7 +6780,7 @@ a.close.disabled {
 .carousel-control-prev:focus,
 .carousel-control-next:hover,
 .carousel-control-next:focus {
-  color: #fff;
+  color: #ffff;
   text-decoration: none;
   outline: 0;
   opacity: 0.9;
@@ -6803,11 +6803,11 @@ a.close.disabled {
 }
 
 .carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
 }
 
 .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
 }
 
 .carousel-indicators {
@@ -6833,7 +6833,7 @@ a.close.disabled {
   margin-left: 3px;
   text-indent: -999px;
   cursor: pointer;
-  background-color: #fff;
+  background-color: #ffff;
   background-clip: padding-box;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
@@ -6859,7 +6859,7 @@ a.close.disabled {
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
-  color: #fff;
+  color: #ffff;
   text-align: center;
 }
 
@@ -7043,7 +7043,7 @@ button.bg-dark:focus {
 }
 
 .bg-white {
-  background-color: #fff !important;
+  background-color: #ffff !important;
 }
 
 .bg-transparent {
@@ -7123,7 +7123,7 @@ button.bg-dark:focus {
 }
 
 .border-white {
-  border-color: #fff !important;
+  border-color: #ffff !important;
 }
 
 .rounded-sm {
@@ -10664,7 +10664,7 @@ button.bg-dark:focus {
 }
 
 .text-white {
-  color: #fff !important;
+  color: #ffff !important;
 }
 
 .text-primary {
@@ -10857,7 +10857,7 @@ a.text-dark:focus {
 
   .table td,
   .table th {
-    background-color: #fff !important;
+    background-color: #ffff !important;
   }
 
   .table-bordered th,
@@ -10883,18 +10883,52 @@ a.text-dark:focus {
 }
 
 body {
+  font-family: "Nunito Sans", sans-serif;
   background-color: #272727;
 }
 
-.head-title.text-center h1 {
+body .head-title h1 {
   color: #ffffff;
-  font-family: Avenir;
   font-size: 60pt;
   font-weight: bold;
   letter-spacing: 3px;
 }
 
-.bouton-image:before {
+body .carousel .carousel-inner img {
+  -webkit-filter: grayscale(100%);
+          filter: grayscale(100%);
+}
+
+body .carousel .carousel-caption {
+  top: 20%;
+  bottom: 20%;
+  background-color: rgba(239, 218, 179, 0.5);
+}
+
+body .carousel .carousel-caption h2 {
+  font-size: 11pt;
+  letter-spacing: 3pt;
+  color: #ffff;
+}
+
+body .carousel .carousel-caption p {
+  font-size: 9pt;
+  color: #000;
+}
+
+body .button-square {
+  background-color: #000;
+  color: #ffff;
+  border: 1pt solid #ffff;
+  border-radius: 0;
+}
+
+body .button-image {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+body .button-image:before {
   content: "";
   width: 100px;
   height: 100px;
@@ -10906,40 +10940,35 @@ body {
   background-repeat: no-repeat;
 }
 
-.bouton-image {
-  background-color: transparent;
-  border-color: transparent;
-}
-
-.monBouton:before {
+body .monButton:before {
   background-image: url(/images/Button_Arrow_Small.png?a8cfe4b884bf46d3f59113e2a5fb1c4c);
 }
 
-.monBouton:hover {
+body .monButton:hover {
   background-color: transparent;
   border-color: #ead4b0;
 }
 
-.monBouton:focus {
+body .monButton:focus {
   background-color: transparent;
   border-color: #ead4b0;
   outline: none !important;
   box-shadow: none !important;
 }
 
-.monBouton:active {
+body .monButton:active {
   background-color: transparent !important;
   border-color: transparent !important;
   outline: none !important;
   box-shadow: none !important;
 }
 
-.content {
+body .content {
   position: relative;
 }
 
-.btn-circle.rounded-circle.btn-sm,
-.btn-group-sm > .btn-circle.rounded-circle.btn {
+body .content .btn-circle.rounded-circle.btn-sm,
+body .content .btn-group-sm > .btn-circle.rounded-circle.btn {
   position: absolute;
   width: 120px;
   height: 120px;
@@ -10955,8 +10984,8 @@ body {
   box-shadow: none !important;
 }
 
-.btn-circle.rounded-circle.btn-sm:active,
-.btn-group-sm > .btn-circle.rounded-circle.btn:active {
+body .content .btn-circle.rounded-circle.btn-sm:active,
+body .content .btn-group-sm > .btn-circle.rounded-circle.btn:active {
   background-color: #efdab3;
   border-color: #ead4b0;
   outline: none !important;
@@ -10964,11 +10993,11 @@ body {
   color: #272727;
 }
 
-.btn-circle.rounded-circle.btn-dm {
+body .content .btn-circle.rounded-circle.btn-dm {
   position: absolute;
   width: 240px;
   height: 240px;
-  padding: 6px 0px;
+  padding: 6px 0;
   border-radius: 15px;
   font-size: 16px;
   text-align: center;
@@ -10980,7 +11009,7 @@ body {
   box-shadow: none !important;
 }
 
-.btn-circle.rounded-circle.btn-dm:active {
+body .content .btn-circle.rounded-circle.btn-dm:active {
   background-color: #efdab3;
   border-color: #ead4b0;
   outline: none !important;
@@ -10988,7 +11017,7 @@ body {
   color: #272727;
 }
 
-.btn-circle.rounded-circle.btn-xl {
+body .content .btn-circle.rounded-circle.btn-xl {
   position: absolute;
   width: 360px;
   height: 360px;
@@ -11004,7 +11033,7 @@ body {
   box-shadow: none !important;
 }
 
-.btn-circle.rounded-circle.btn-xl:active {
+body .content .btn-circle.rounded-circle.btn-xl:active {
   background-color: #efdab3;
   border-color: #ead4b0;
   outline: none !important;
diff --git a/public/images/homepage/logo_1.jpg b/public/images/homepage/logo_1.jpg
new file mode 100644
index 0000000..5ebb783
Binary files /dev/null and b/public/images/homepage/logo_1.jpg differ
diff --git a/resources/sass/_custom.scss b/resources/sass/_custom.scss
index cda6f28..5ae02e3 100644
--- a/resources/sass/_custom.scss
+++ b/resources/sass/_custom.scss
@@ -1,145 +1,174 @@
 // Ready for custom styling
 
-body
-{
+body {
+    font-family: 'Nunito Sans', sans-serif;
     background-color: $cusBlack;
-}
-
-.head-title.text-center h1
-{
-    color: $cusWhite;
-    font-family: Avenir;
-    font-size: 60pt;
-    font-weight: bold;
-    letter-spacing: 3px;
-}
-
-.bouton-image:before
-{
-    content: "";
-    width: 100px;
-    height: 100px;
-    display: inline-block;
-    margin-right: 5px;
-    vertical-align: text-top;
-    background-color: transparent;
-    background-position : center center;
-    background-repeat:no-repeat;
-}
-
-.bouton-image
-{
-    background-color: transparent;
-    border-color: transparent;
-}
 
-.monBouton:before
-{
-    background-image : url(../images/Button_Arrow_Small.png);
-}
+    .head-title h1 {
+        color: $cusWhite;
+        font-size: 60pt;
+        font-weight: bold;
+        letter-spacing: 3px;
+    }
 
-.monBouton:hover
-{
-    background-color: transparent;
-    border-color: $cusBrown3;
-}
+    .carousel {
+        .carousel-inner {
+            img {
+                filter: grayscale(100%);
+            }
+        }
+
+        .carousel-caption {
+            top: 20%;
+            bottom: 20%;
+            background-color:  rgba(239, 218, 179, 0.5);
+
+            h2 {
+                font-size: 11pt;
+                letter-spacing: 3pt;
+                color: $white;
+
+            }
+
+            p {
+                font-size: 9pt;
+                color: $black;
+            }
+        }
+    }
 
-.monBouton:focus
-{
-    background-color: transparent;
-    border-color: $cusBrown3;
-    outline: none !important;
-    box-shadow: none !important;
-}
+    .button-square {
+        background-color: $black;
+        color: $white;
+        border: 1pt solid $white;
+        border-radius: 0;
+    }
 
-.monBouton:active
-{
-    background-color: transparent !important;
-    border-color: transparent !important;
-    outline: none !important;
-    box-shadow: none !important;
-}
+    .button-image {
+        background-color: transparent;
+        border-color: transparent;
+
+        &:before {
+            content: "";
+            width: 100px;
+            height: 100px;
+            display: inline-block;
+            margin-right: 5px;
+            vertical-align: text-top;
+            background-color: transparent;
+            background-position : center center;
+            background-repeat:no-repeat;
+        }
+    }
 
-.content {
-    position: relative;
-}
+    .monButton {
+
+        &:before {
+            background-image : url(../images/Button_Arrow_Small.png);
+        }
+
+        &:hover {
+            background-color: transparent;
+            border-color: $cusBrown3;
+        }
+
+        &:focus {
+            background-color: transparent;
+            border-color: $cusBrown3;
+            outline: none !important;
+            box-shadow: none !important;
+        }
+
+        &:active {
+            background-color: transparent !important;
+            border-color: transparent !important;
+            outline: none !important;
+            box-shadow: none !important;
+        }
+    }
 
-//Circle style button
-.btn-circle.rounded-circle.btn-sm
-{
-    position: absolute;
-    width: 120px;
-    height: 120px;
-    padding: 6px 0px;
-    border-radius: 15px;
-    font-size: 16px;
-    text-align: center;
-    background-color: $cusBlack;
-    border-color: $cusBrown3;
-    border-width: 5px;
-    color:$cusBrown3;
-    outline: none !important;
-    box-shadow: none !important;
-}
 
-.btn-circle.rounded-circle.btn-sm:active
-{
-    background-color: $cusBrown2;
-    border-color: $cusBrown3;
-    outline: none !important;
-    box-shadow: none !important;
-    color:$cusBlack;
+    .content {
+        position: relative;
+
+        //Circle style button
+        .btn-circle.rounded-circle.btn-sm {
+            position: absolute;
+            width: 120px;
+            height: 120px;
+            padding: 6px 0px;
+            border-radius: 15px;
+            font-size: 16px;
+            text-align: center;
+            background-color: $cusBlack;
+            border-color: $cusBrown3;
+            border-width: 5px;
+            color:$cusBrown3;
+            outline: none !important;
+            box-shadow: none !important;
+
+            &:active {
+                background-color: $cusBrown2;
+                border-color: $cusBrown3;
+                outline: none !important;
+                box-shadow: none !important;
+                color:$cusBlack;
+            }
+        }
+
+        .btn-circle.rounded-circle.btn-dm
+        {
+            position: absolute;
+            width: 240px;
+            height: 240px;
+            padding: 6px 0;
+            border-radius: 15px;
+            font-size: 16px;
+            text-align: center;
+            background-color: $cusBlack;
+            border-color: $cusBrown3;
+            color:$cusBrown3;
+            border-width: 5px;
+            outline: none !important;
+            box-shadow: none !important;
+
+            &:active {
+                background-color: $cusBrown2;
+                border-color: $cusBrown3;
+                outline: none !important;
+                box-shadow: none !important;
+                color:$cusBlack;
+            }
+        }
+
+        .btn-circle.rounded-circle.btn-xl
+        {
+            position: absolute;
+            width: 360px;
+            height: 360px;
+            padding: 6px 0px;
+            border-radius: 15px;
+            font-size: 16px;
+            text-align: center;
+            background-color: $cusBlack;
+            border-color: $cusBrown3;
+            color:$cusBrown3;
+            border-width: 5px;
+            outline: none !important;
+            box-shadow: none !important;
+
+            &:active {
+                background-color: $cusBrown2;
+                border-color: $cusBrown3;
+                outline: none !important;
+                box-shadow: none !important;
+                color:$cusBlack;
+            }
+        }
+    }
 }
 
-.btn-circle.rounded-circle.btn-dm
-{
-    position: absolute;
-    width: 240px;
-    height: 240px;
-    padding: 6px 0px;
-    border-radius: 15px;
-    font-size: 16px;
-    text-align: center;
-    background-color: $cusBlack;
-    border-color: $cusBrown3;
-    color:$cusBrown3;
-    border-width: 5px;
-    outline: none !important;
-    box-shadow: none !important;
-}
-.btn-circle.rounded-circle.btn-dm:active
-{
-    background-color: $cusBrown2;
-    border-color: $cusBrown3;
-    outline: none !important;
-    box-shadow: none !important;
-    color:$cusBlack;
-}
 
-.btn-circle.rounded-circle.btn-xl
-{
-    position: absolute;
-    width: 360px;
-    height: 360px;
-    padding: 6px 0px;
-    border-radius: 15px;
-    font-size: 16px;
-    text-align: center;
-    background-color: $cusBlack;
-    border-color: $cusBrown3;
-    color:$cusBrown3;
-    border-width: 5px;
-    outline: none !important;
-    box-shadow: none !important;
-}
-.btn-circle.rounded-circle.btn-xl:active
-{
-    background-color: $cusBrown2;
-    border-color: $cusBrown3;
-    outline: none !important;
-    box-shadow: none !important;
-    color:$cusBlack;
-}
 
 @media only screen and (max-width: 540px)
 {
diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss
index 9d4b848..4778cdd 100644
--- a/resources/sass/_variables.scss
+++ b/resources/sass/_variables.scss
@@ -17,6 +17,8 @@ $yellow: #ffed4a;
 $green: #38c172;
 $teal: #4dc0b5;
 $cyan: #6cb2eb;
+$white: #ffff;
+$black: #000;
 
 // Custom colors
 $cusWhite: #ffffff;
diff --git a/resources/views/categories/index.blade.php b/resources/views/categories/index.blade.php
index dbf2adb..b5962e8 100644
--- a/resources/views/categories/index.blade.php
+++ b/resources/views/categories/index.blade.php
@@ -6,7 +6,7 @@
     @if(isset($user))
         {{--<p><?php dd($categories); ?></p>--}}
         <div>
-            <button type="button" class="btn btn-primary bouton-image monBouton"></button>
+            <button type="button" class="btn btn-primary button-image monButton"></button>
         </div>
         <div class="head-title text-center">
             <h1>choose a few topics</h1>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index e796ff8..ea54383 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -14,7 +14,7 @@
 
     <!-- Fonts -->
     <link rel="dns-prefetch" href="//fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@900&display=swap" rel="stylesheet">
 
     <!-- Styles -->
     <link href="{{ asset('css/app.css') }}" rel="stylesheet">
diff --git a/resources/views/pages/index.blade.php b/resources/views/pages/index.blade.php
index 9f08f15..12c8fc1 100644
--- a/resources/views/pages/index.blade.php
+++ b/resources/views/pages/index.blade.php
@@ -7,22 +7,54 @@
 @endsection
 
 @section('content')
-    <div class="jumbotron">
-        <div class="text-center">
-            <h1>Welcome</h1>
-            <p>
-                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-                Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.
-                Fusce tellus odio, dapibus id fermentum quis, suscipit id erat.
-                Morbi scelerisque luctus velit. Vivamus porttitor turpis ac leo.
-                Morbi scelerisque luctus velit.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    <div class="text-center">
+        <img src=".." alt="upm">
+    </div>
+    <div id="homepage_carousel" class="carousel slide" data-ride="carousel">
+        <div class="row">
+            <div class="col-md-4">
+                <a href="">
+                    <img src=".." alt="facebook">
+                </a>
+            </div>
+            <div class="col-md-4 text-center">
+                <a href="">
+                    <img src=".." alt="instagram">
+                </a>
+            </div>
+            <div class="col-md-4 text-right">
+                <a href="">
+                    <img src=".." alt="wikipedia">
+                </a>
+            </div>
+        </div>
+
+
+        <div class="carousel-inner">
+            <div class="carousel-item active">
+                <img class="d-block w-100" src="{{ asset('images/homepage/logo_1.jpg') }}" alt="First slide">
+            </div>
+            <!-- <div class="carousel-item">
+                <img class="d-block w-100" src="{{ asset('images/homepage/logo_1.jpg') }}" alt="First slide">
+            </div> -->
+        </div>
+        <div class="carousel-caption d-md-block">
+            <h2 class="text-center">kaplicky</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis purus, volutpat quis libero aliquet, pulvinar accumsan erat.
+                Praesent porttitor eleifend hendrerit. Vestibulum dictum nunc et leo finibus condimentum.
+                Proin id tempor enim, eu ornare nisi. Phasellus ornare metus ut mi dapibus, varius elementum leo malesuada.
             </p>
-            <a class="btn btn-primary btn-lg" href="{{ url('/artefact') }}" role="button">Continue</a>
         </div>
+        <a class="carousel-control-prev" href="#homepage_carousel" role="button" data-slide="prev">
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="sr-only">Previous</span>
+        </a>
+        <a class="carousel-control-next" href="#homepage_carousel" role="button" data-slide="next">
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="sr-only">Next</span>
+        </a>
     </div>
-
-    <div class="logo">
-       <!-- Add logo here as link to next page -->
+    <div class="text-center mt-5">
+        <a class="btn button-square" href="{{ url('/artefact') }}" role="button">enter</a>
     </div>
 @endsection
