commit b323292bc778608eee7a1fed189f7ff809877fe2
Author: Marek Lovčí <mareklovci@gmail.com>
Date:   Sat May 2 22:18:46 2020 +0200

    Merge branch 'develop'

diff --git a/app/ArtefactCategory.php b/app/ArtefactCategory.php
new file mode 100644
index 0000000..d69aaab
--- /dev/null
+++ b/app/ArtefactCategory.php
@@ -0,0 +1,22 @@
+<?php
+
+
+namespace App;
+
+
+use Illuminate\Database\Eloquent\Model;
+
+class ArtefactCategory extends Model
+{
+    // Table Name
+    protected $table = 'artefact_category';
+    // Primary Key
+    public $primaryKey = 'artefact_id';
+
+    /**
+     * Indicates if the model should be timestamped.
+     *
+     * @var bool
+     */
+    public $timestamps = false;
+}
diff --git a/app/ArtefactUser.php b/app/ArtefactUser.php
new file mode 100644
index 0000000..4514152
--- /dev/null
+++ b/app/ArtefactUser.php
@@ -0,0 +1,20 @@
+<?php
+
+
+namespace App;
+
+
+class ArtefactUser extends Model
+{
+    // Table Name
+    protected $table = 'artefact_user';
+    // Primary Key
+    public $primaryKey = 'artefact_id';
+
+    /**
+     * Indicates if the model should be timestamped.
+     *
+     * @var bool
+     */
+    public $timestamps = false;
+}
diff --git a/app/Http/Controllers/ArtefactController.php b/app/Http/Controllers/ArtefactController.php
index 867d976..8f18ee1 100644
--- a/app/Http/Controllers/ArtefactController.php
+++ b/app/Http/Controllers/ArtefactController.php
@@ -3,6 +3,8 @@
 namespace App\Http\Controllers;
 
 use App\Artefact;
+use App\ArtefactCategory;
+use App\Category;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\DB;
 
@@ -25,6 +27,30 @@ class ArtefactController extends Controller
         return view('artefact.default', ['artefacts' => $artefacts]);
     }
 
+    /**
+     * Returns view of artefacts related to the chosen category
+     *
+     * @param $id       id of the category
+     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
+     */
+    public function showCategory($id)
+    {
+        $cateogryArtefacts = ArtefactCategory::where('category_id', $id)->get();
+        if(count($cateogryArtefacts) > 0)
+        {
+            $artefacts = array();
+            foreach($cateogryArtefacts as $ar)
+            {
+                array_push($artefacts, Artefact::where('id', $ar->artefact_id)->get());
+            }
+            return view('artefact.category', ['artefacts' => $artefacts]);
+        }
+        else
+        {
+            return view('artefact.category', ['artefacts' => array()]);
+        }
+    }
+
     /**
      * Returns view of single artefact given by its id.
      *
@@ -34,6 +60,7 @@ class ArtefactController extends Controller
     public function view($id)
     {
         $artefact = Artefact::find($id);
+        $artefact['likes'] = Artefact::find($id)->users()->count();
 
         return view('artefact.view', ['artefact' => $artefact]);
     }
diff --git a/app/Http/Controllers/CategoriesController.php b/app/Http/Controllers/CategoriesController.php
index 3f3b486..0bdebe6 100644
--- a/app/Http/Controllers/CategoriesController.php
+++ b/app/Http/Controllers/CategoriesController.php
@@ -14,34 +14,6 @@ class CategoriesController extends Controller
         $this->middleware('auth');
     }
 
-    public function calculateClusters($categoriesCount)
-    {
-        if(isset($categoriesCount))
-        {
-            $min = PHP_INT_MAX;
-            $max = PHP_INT_MIN;
-            foreach($categoriesCount as $category)
-            {
-                $c = count($category);
-                if($c < $min)
-                {
-                    $min = $c;
-                }
-
-                if($c > $max)
-                {
-                    $max = $c;
-                }
-            }
-            $center = $min + (($max - $min)/2);
-            return array($min, $center, $max);
-        }
-        else
-        {
-            return null;
-        }
-    }
-
     /**
      * Display a listing of the resource.
      *
@@ -53,46 +25,13 @@ class CategoriesController extends Controller
         {
             $userId = Auth::user()->id;
 
-            $categoryNames = Category::all();
+            $categoryNames = Category::orderBy('id')->get();
             $countCategory = count($categoryNames);
-            $categories = array();
-            for($i = 1; $i <= $countCategory;$i++)
-            {
-                array_push($categories, Category::find($i)->artefacts()->get());
-            }
-            $clusters = $this->calculateClusters($categories);
-
-            $categorySizes = array();
-            if(isset($clusters))
-            {
-                foreach($categories as $category)
-                {
-                    $c = count($category);
-                    $type1 = abs($clusters['0'] - $c);
-                    $type2 = abs($clusters['1'] - $c);
-                    $type3 = abs($clusters['2'] - $c);
-
-                    if($type1 <= $type2 && $type1 <= $type3)
-                    {
-                        array_push($categorySizes, 1);
-                    }
-                    else if($type2 <= $type1 && $type2 <= $type3)
-                    {
-                        array_push($categorySizes, 2);
-                    }
-                    else
-                    {
-                        array_push($categorySizes, 3);
-                    }
-                }
-            }
 
             $data = array(
                 'title' => 'Categories',
                 'user' => User::find($userId),
                 'count' => $countCategory,
-                'categories' => $categories,
-                'categorySizes' => $categorySizes,
                 'categoryNames' => $categoryNames
             );
             return view('categories.index') -> with($data);
diff --git a/app/Http/Controllers/FavoriteMetadataController.php b/app/Http/Controllers/FavoriteMetadataController.php
index 0532f86..0597ec7 100644
--- a/app/Http/Controllers/FavoriteMetadataController.php
+++ b/app/Http/Controllers/FavoriteMetadataController.php
@@ -9,6 +9,8 @@ use Illuminate\Support\Facades\Auth;
 
 class FavoriteMetadataController extends Controller
 {
+    const ORDER_COLUMN = 'page';
+
     public function __construct()
     {
         $this->middleware('auth');
@@ -16,7 +18,11 @@ class FavoriteMetadataController extends Controller
 
     public function index()
     {
-        $metadata = User::find(Auth::id())->likesMetadata()->get();
+        $metadata = User::find(Auth::id())->likesMetadata()->orderBy(self::ORDER_COLUMN)->get();
+        foreach($metadata as $item)
+        {
+            $item['artefact'] = Metadata::find($item->id)->artefact()->first();
+        }
 
         return view('favmetadata.index', ['metadata' => $metadata]);
     }
diff --git a/public/css/app.css b/public/css/app.css
index e6a65ba..2eb50e9 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -1,4 +1,4 @@
-@import url(https://fonts.googleapis.com/css?family=Nunito);@import url(https://db.onlinewebfonts.com/c/2090551770be22b09600a40b0b4673b7?family=Avenir+Medium);@import url(https://db.onlinewebfonts.com/c/275de2221d9f0c4c9257d17f5a1e4006?family=Avenir+Black);@import url(https://db.onlinewebfonts.com/c/1a045963159927274c92b0444fb83c17?family=Avenir);@charset "UTF-8";
+@import url(https://fonts.googleapis.com/css?family=Nunito);@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap);@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap);@charset "UTF-8";
 
 /*!
  * Bootstrap v4.4.1 (https://getbootstrap.com/)
@@ -34,7 +34,7 @@
   --breakpoint-md: 768px;
   --breakpoint-lg: 992px;
   --breakpoint-xl: 1200px;
-  --font-family-sans-serif: "Nunito", sans-serif;
+  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
@@ -66,7 +66,7 @@ section {
 
 body {
   margin: 0;
-  font-family: "Nunito", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 0.9rem;
   font-weight: 400;
   line-height: 1.6;
@@ -6376,7 +6376,7 @@ a.close.disabled {
   z-index: 1070;
   display: block;
   margin: 0;
-  font-family: "Nunito", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-style: normal;
   font-weight: 400;
   line-height: 1.6;
@@ -6501,7 +6501,7 @@ a.close.disabled {
   z-index: 1060;
   display: block;
   max-width: 276px;
-  font-family: "Nunito", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-style: normal;
   font-weight: 400;
   line-height: 1.6;
@@ -10882,33 +10882,36 @@ a.text-dark:focus {
   }
 }
 
-@font-face {
-  font-family: "Avenir Black LINK";
-  src: url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.eot");
-  src: url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.woff") format("woff"), url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.svg#Avenir Black") format("svg");
-}
-
-@font-face {
-  font-family: "Avenir Roman LINK";
-  src: url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.eot");
-  src: url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.woff") format("woff"), url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.svg#Avenir") format("svg");
-}
-
-@font-face {
-  font-family: "Avenir Medium LINK";
-  src: url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.eot");
-  src: url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.woff") format("woff"), url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.svg#Avenir Medium") format("svg");
-}
-
 body {
   background-color: #272727;
+  font-family: Nunito;
+  /*.form-control:focus {
+      background-color: $theme-color-five;
+      margin-top: -1px;
+      border-top-color: $theme-color-five;
+      border-left-color: $theme-color-five;
+      border-right-color: $theme-color-five;
+      border-bottom-color: 0.5pt $theme-color-one;
+      color: $theme-color-one;
+      box-shadow: none;
+      font-size: 8pt;
+  }*/
+  /*footer {
+      background: $theme-color-four;
+      color: $theme-color-five;
+      display: block;
+      height: 50px;
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+  }*/
 }
 
 body .head-title h1 {
   color: #ffffff;
-  font-family: Avenir;
+  font-weight: 400;
   font-size: 60pt;
-  font-weight: bold;
   letter-spacing: 3px;
 }
 
@@ -10952,13 +10955,6 @@ body .carousel .carousel-caption {
   bottom: auto;
   transform: translateY(-50%);
   background-color: rgba(239, 218, 179, 0.5);
-  /*h2 {
-      font-family: Avenir Black;
-      font-size: 11pt;
-      letter-spacing: 3pt;
-      color: $white;
-
-  }*/
 }
 
 body .carousel .carousel-caption p {
@@ -10967,46 +10963,58 @@ body .carousel .carousel-caption p {
 }
 
 body .text {
-  font-family: Avenir Roman;
+  font-weight: 400;
   font-size: 8pt;
   line-height: 9pt;
 }
 
 body .text2 {
-  font-family: Avenir Medium;
+  font-weight: 600;
   font-size: 8pt;
 }
 
 body .kaplicky {
   color: #ffffff;
   font-size: 11pt;
-  font-family: Avenir Black;
+  font-weight: 900;
   letter-spacing: 3pt;
 }
 
 body .text-author {
-  font-family: Avenir Roman;
+  font-weight: 400;
   font-size: 7pt;
   color: #ead4b0;
 }
 
 body .text-number {
-  font-family: Avenir Medium;
+  font-weight: 600;
   font-size: 5pt;
   color: #ead4b0;
 }
 
 body .text-headline {
-  font-family: Avenir Medium;
+  font-weight: 600;
   font-size: 12pt;
   color: #ead4b0;
 }
 
 body .text-page {
-  font-family: Avenir Medium;
+  font-weight: 600;
   font-size: 7pt;
 }
 
+body .black {
+  color: #272727;
+}
+
+body .white {
+  color: #ffffff;
+}
+
+body .colored {
+  color: #ead4b0;
+}
+
 body .auth .card {
   border: none;
   text-align: center;
@@ -11022,11 +11030,12 @@ body .auth .col-form-label {
 body .auth .form-control {
   padding: 0px;
   height: 17pt;
+  border-radius: 0%;
 }
 
 body .card-body {
   background-color: #272727;
-  font-family: Avenir Roman;
+  font-weight: 400;
   color: #ead4b0;
 }
 
@@ -11042,7 +11051,9 @@ body .form-control {
   font-size: 8pt;
 }
 
-body .form-control:focus {
+body .form-control:active,
+body .form-control:focus,
+body .form-control:visited {
   background-color: #272727;
   margin-top: -1px;
   border-top-color: #272727;
@@ -11051,7 +11062,19 @@ body .form-control:focus {
   border-bottom-color: 0.5pt #ffffff;
   color: #ffffff;
   box-shadow: none;
-  font-size: 8pt;
+}
+
+body .form-control.is-invalid {
+  box-shadow: none;
+  border-color: #ead4b0;
+  background-image: none;
+}
+
+body .form-control.is-invalid:active,
+body .form-control.is-invalid:focus,
+body .form-control.is-invalid:visited {
+  box-shadow: none;
+  border-color: #ead4b0;
 }
 
 body .button-square {
@@ -11062,7 +11085,7 @@ body .button-square {
   border-radius: 0;
   width: 6.5rem;
   height: 2rem;
-  font-family: Avenir Roman;
+  font-weight: 400;
 }
 
 body .button-square:active,
@@ -11072,6 +11095,42 @@ body .button-square:visited {
   box-shadow: none;
 }
 
+body .pin-left:before {
+  content: "";
+  position: relative;
+  height: 0.35433rem;
+  width: 0.35433rem;
+  background-color: #ffffff;
+  border-radius: 50%;
+  display: inline-block;
+  top: -0.35433rem;
+  left: -0.2rem;
+}
+
+body .pin-left {
+  border-left: 0.5pt solid #ead4b0;
+  display: inline-block;
+  margin: 10rem 50px 0px -5rem;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  text-align: left;
+  width: 100%;
+}
+
+body .pin-left .text {
+  margin-left: 0.5rem;
+}
+
+body .pin-left p {
+  margin-top: 0pt;
+  margin-bottom: 0pt;
+}
+
+body li {
+  list-style-type: none;
+}
+
 body .button-image {
   background-color: transparent;
   border-color: transparent;
@@ -11089,62 +11148,72 @@ body .button-image:before {
   background-repeat: no-repeat;
 }
 
-body .artefacts-area h5 {
+body .artefacts-area h5,
+body .artefact-area h5 {
   color: #ddd1b9;
-  font-family: "Avenir Medium LINK";
+  font-weight: 600;
   line-height: 20pt;
   font-size: 21pt;
 }
 
-body .artefacts-area h6 {
+body .artefacts-area h6,
+body .artefact-area h6 {
   color: #ddd1b9;
   font-size: 14pt;
-  font-weight: lighter;
-  font-family: "Avenir Roman LINK";
+  font-weight: 400;
 }
 
-body .artefacts-area img {
+body .artefacts-area img,
+body .artefact-area img {
   border: transparent;
   border-radius: 1px;
 }
 
-body .artefacts-area .card {
+body .artefacts-area .card,
+body .artefact-area .card {
   margin: 10px;
   border: none !important;
 }
 
-body .artefacts-area .left_panel_info {
+body .artefacts-area .left_panel_info,
+body .artefact-area .left_panel_info {
   margin-top: 15px;
   margin-left: -10px;
   max-width: 250px;
 }
 
-body .artefacts-area .right_panel_info {
+body .artefacts-area .right_panel_info,
+body .artefact-area .right_panel_info {
   margin-top: 15px;
   margin-right: -15px;
 }
 
-body .artefacts-area .card-cus-bottom {
+body .artefacts-area .card-cus-bottom,
+body .artefact-area .card-cus-bottom {
   background-color: #272727;
 }
 
-body .artefacts-area .inter_info:before {
+body .artefacts-area .inter_info:before,
+body .artefact-area .inter_info:before {
   background-image: url(/images/Button_Info_50.png?cf6e509b9294d4138459f1846c7effdf);
   width: 60px;
   height: 60px;
 }
 
-body .artefacts-area .inter_like {
+body .artefacts-area .inter_like,
+body .artefact-area .inter_like {
   display: none;
 }
 
-body .artefacts-area .inter_like:before {
+body .artefacts-area .inter_like:before,
+body .artefact-area .inter_like:before {
   background-image: url(/images/Hearth_Empty_50.png?d969cd4d381634ef975e503608b3ab48);
   width: 60px;
   height: 60px;
 }
 
-body .artefacts-area .inter_like_filled:before {
+body .artefacts-area .inter_like_filled:before,
+body .artefact-area .inter_like_filled:before {
   background-image: url(/images/Hearth_Filled_50.png?77bb26c3aba063c00aba1a2f07059d71);
   width: 60px;
   height: 60px;
@@ -11152,7 +11221,10 @@ body .artefacts-area .inter_like_filled:before {
 
 body .artefacts-area .inter_info,
 body .artefacts-area .inter_like,
-body .artefacts-area .inter_like_filled {
+body .artefacts-area .inter_like_filled,
+body .artefact-area .inter_info,
+body .artefact-area .inter_like,
+body .artefact-area .inter_like_filled {
   padding: 0;
 }
 
@@ -11164,30 +11236,173 @@ body .artefacts-area .inter_like:active,
 body .artefacts-area .inter_like:hover,
 body .artefacts-area .inter_like_filled:focus,
 body .artefacts-area .inter_like_filled:active,
-body .artefacts-area .inter_like_filled:hover {
+body .artefacts-area .inter_like_filled:hover,
+body .artefact-area .inter_info:focus,
+body .artefact-area .inter_info:active,
+body .artefact-area .inter_info:hover,
+body .artefact-area .inter_like:focus,
+body .artefact-area .inter_like:active,
+body .artefact-area .inter_like:hover,
+body .artefact-area .inter_like_filled:focus,
+body .artefact-area .inter_like_filled:active,
+body .artefact-area .inter_like_filled:hover {
   background-color: transparent !important;
   border-color: transparent !important;
   outline: none !important;
   box-shadow: none !important;
 }
 
-body .monButton:before {
-  background-image: url(/images/Button_Arrow_Small.png?a8cfe4b884bf46d3f59113e2a5fb1c4c);
+body .artefact-area .card-cus-bottom .left_panel_info,
+body .artefact-area .card-cus-bottom .right_panel_info {
+  margin: 0.9375rem 0 0 0;
 }
 
-body .monButton:hover {
-  background-color: transparent;
-  border-color: #ead4b0;
+body .artefact-area .card-cus-bottom .right_panel_info .float-right {
+  margin-right: -0.35rem;
 }
 
-body .monButton:focus {
-  background-color: transparent;
-  border-color: #ead4b0;
-  outline: none !important;
-  box-shadow: none !important;
+body .artefact-area .artefact-name {
+  font-weight: 600;
+  font-size: 8pt;
+  line-height: 10pt;
+  margin-bottom: 0;
+}
+
+body .artefact-area .artefact-author {
+  font-size: 7pt;
+  line-height: 8pt;
+}
+
+body .artefact-area .inter_like {
+  display: block;
+}
+
+body .artefact-area .inter_like:before {
+  background-image: url(/images/Hearth_Empty_Small.png?252b4c7a69920aa18f2fc75a93aaa90a);
+  width: 25px;
+  height: 19px;
+}
+
+body .artefact-area .inter_info {
+  padding-right: 1rem;
+}
+
+body .artefact-area .inter_info:before {
+  background-image: url(/images/Button_Info_Small.png?9bc35ac07e9ec5a6b75d9af964e80512);
+  width: 29px;
+  height: 29px;
+}
+
+body .artefact-area .artefact-likes {
+  font-weight: 600;
+  font-size: 5pt;
+  padding-right: 0.25rem;
+}
+
+body .metadata-area h2 {
+  font-weight: 600;
+  font-size: 12pt;
+}
+
+body .metadata-area .arrow-down {
+  position: fixed;
+  top: 0.25rem;
+  right: 0;
+  margin: 2rem;
+  width: 0;
+  height: 0;
+  border-left: 0.59055rem solid transparent;
+  border-right: 0.59055rem solid transparent;
+  border-top: 0.59055rem solid #ddd1b9;
+}
+
+body .metadata-area .pin-horizontal {
+  color: #ddd1b9;
+  border-bottom: 0.042rem solid #ddd1b9;
+  display: inline-block;
+  margin: 3.35rem 3.125rem 0 0;
+}
+
+body .metadata-area .pin-horizontal:before {
+  content: "";
+  background-color: #ddd1b9;
+  position: relative;
+  height: 0.5rem;
+  width: 0.5rem;
+  border-radius: 50%;
+  display: inline-block;
+  top: 1.5rem;
+  left: 50vw;
 }
 
-body .monButton:active {
+body .metadata-area .pin-horizontal .metadata {
+  position: relative;
+  display: flex;
+  align-items: baseline;
+}
+
+body .metadata-area .pin-horizontal .metadata span {
+  font-weight: 600;
+}
+
+body .metadata-area .pin-horizontal .metadata .arrow-down {
+  position: relative;
+  top: 0;
+  right: 0;
+  width: 0;
+  height: 0;
+  border-left: 0.25rem solid transparent;
+  border-right: 0.25rem solid transparent;
+  border-top: 0.25rem solid #ddd1b9;
+  margin: 0 0.5rem 0 0.5rem;
+}
+
+body .metadata-area .white-pin {
+  color: #ffffff;
+  border-bottom: 0.042rem solid #ffffff;
+}
+
+body .metadata-area .white-pin:before {
+  content: "";
+  background-color: #ffffff;
+}
+
+body .metadata-area .white-pin .metadata .arrow-down {
+  border-top: 0.25rem solid #ffffff;
+}
+
+body .metadata-area .metadata-text {
+  font-size: 8pt;
+  color: #ffffff;
+  padding-top: 10px;
+  padding-left: 25px;
+  padding-right: 25px;
+}
+
+body .metadata-area .metadata-text .artefact-info {
+  color: #ddd1b9;
+  margin-top: 10px;
+}
+
+body .metadata-area .metadata-text .artefact-info .artefact-name {
+  font-weight: 600;
+  font-size: 8pt;
+}
+
+body .metadata-area .metadata-text .artefact-info .artefact-author {
+  font-weight: 400;
+  font-size: 7pt;
+}
+
+body .metadata-area .metadata-text .artefact-info .inter_like_filled:before {
+  background-image: url(/images/Hearth_Filled_50.png?77bb26c3aba063c00aba1a2f07059d71);
+  width: 50px;
+  height: 50px;
+}
+
+body .metadata-area .metadata-text .artefact-info .inter_like_filled:hover,
+body .metadata-area .metadata-text .artefact-info .inter_like_filled:focus,
+body .metadata-area .metadata-text .artefact-info .inter_like_filled:active {
   background-color: transparent !important;
   border-color: transparent !important;
   outline: none !important;
@@ -11212,7 +11427,7 @@ body .content .btn-categories {
   color: #ead4b0;
   outline: none !important;
   box-shadow: none !important;
-  font-family: Avenir Medium;
+  font-weight: 600;
 }
 
 body .content .btn-categories:active {
@@ -11223,25 +11438,118 @@ body .content .btn-categories:active {
   color: #272727;
 }
 
-body .content .btn-sm,
-body .content .btn-group-sm > .btn {
-  width: 120px;
-  height: 120px;
+body .cat-col-md-2 {
+  margin: 2%;
 }
 
-body .content .btn-dm {
-  width: 240px;
-  height: 240px;
+body .btn.btn-dark.cat-tile {
+  border-color: #ead4b0;
+  border-radius: 0;
+  border-style: solid;
+  border-width: 2px;
+  color: #ead4b0;
+  background-color: #272727;
+  text-align: center;
+  outline: none !important;
+  box-shadow: none !important;
+  font-size: 8mm;
+  word-wrap: break-word;
+  height: 40mm;
+  width: 100%;
 }
 
-body .content .btn-xl {
-  width: 360px;
-  height: 360px;
+body .btn.btn-dark.cat-tile:active,
+body .btn.btn-dark.cat-tile:focus {
+  background-color: #efdab3;
+  border-color: #ead4b0;
+  outline: none !important;
+  box-shadow: none !important;
+  color: #272727;
+}
+
+body .category-h2 {
+  color: #ead4b0;
+}
+
+.arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  margin: 2rem;
+  cursor: pointer;
+  border: 0.59055rem solid transparent;
+}
+
+.arrow-left {
+  margin-left: 80%;
+  border-right: 0.59055rem solid #272727;
+  background-color: #ead4b0 !important;
+}
+
+.arrow-right {
+  border-left: 0.59055rem solid #ead4b0;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+}
+
+.sidenav {
+  height: 100%;
+  width: 0;
+  width: 250px;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: #ead4b0;
+  overflow-x: hidden;
+  transition: 0.5s;
+}
+
+.sidenav a {
+  text-decoration: none;
+  color: #272727;
+  display: block;
+  transition: 0.3s;
+}
+
+.sidenav a:hover {
+  color: #ead4b0;
+  background-color: #ffffff;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav a {
+    font-size: 18px;
+  }
+}
+
+@media (max-width: 990px) {
+  body {
+    /*.pin-left {
+        margin-left: -15rem;
+        margin-top: 11rem;
+    }*/
+  }
+}
+
+@media (max-width: 770px) {
+  body .pin-left {
+    margin-left: -33vw;
+    margin-top: 12rem;
+  }
 }
 
 @media only screen and (max-width: 540px) {
+  .sidenav {
+    width: 0;
+  }
+
   .head-title.text-center h1 {
-    font-size: 45pt;
+    font-size: 23pt;
+    padding-top: 50pt;
+    white-space: nowrap;
   }
 
   .btn-circle.rounded-circle.btn-sm,
diff --git a/public/images/Button_Info_Small.png b/public/images/Button_Info_Small.png
new file mode 100644
index 0000000..1b56981
Binary files /dev/null and b/public/images/Button_Info_Small.png differ
diff --git a/public/images/Hearth_Empty_Small.png b/public/images/Hearth_Empty_Small.png
new file mode 100644
index 0000000..5fe5a23
Binary files /dev/null and b/public/images/Hearth_Empty_Small.png differ
diff --git a/public/js/app.js b/public/js/app.js
index 4606f58..fb62752 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -37052,7 +37052,17 @@ module.exports = function(module) {
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(/*! ./bootstrap */ "./resources/js/bootstrap.js");
+__webpack_require__(/*! ./bootstrap */ "./resources/js/bootstrap.js"); // Center metadata page text
+
+
+$(document).ready(function () {
+  var display_width = $(window).width();
+  $(".metadata").each(function () {
+    var metadata = $(this);
+    var width = metadata.width();
+    metadata.css("margin-left", display_width / 2 - width);
+  });
+});
 
 /***/ }),
 
diff --git a/resources/images/interface/Button_Info_Small.png b/resources/images/interface/Button_Info_Small.png
new file mode 100644
index 0000000..1b56981
Binary files /dev/null and b/resources/images/interface/Button_Info_Small.png differ
diff --git a/resources/images/interface/Hearth_Empty_Small.png b/resources/images/interface/Hearth_Empty_Small.png
new file mode 100644
index 0000000..5fe5a23
Binary files /dev/null and b/resources/images/interface/Hearth_Empty_Small.png differ
diff --git a/resources/images/interface/Hearth_Filled_Small.png b/resources/images/interface/Hearth_Filled_Small.png
new file mode 100644
index 0000000..9cb65bd
Binary files /dev/null and b/resources/images/interface/Hearth_Filled_Small.png differ
diff --git a/resources/js/app.js b/resources/js/app.js
index 40c55f6..d6dd869 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1 +1,14 @@
 require('./bootstrap');
+
+// Center metadata page text
+$(document).ready(function () {
+    let display_width = $(window).width();
+
+    $(".metadata").each(function() {
+        let metadata = $(this);
+        let width = metadata.width();
+
+        metadata.css("margin-left", (display_width / 2)  - width);
+    });
+
+});
diff --git a/resources/sass/_custom.scss b/resources/sass/_custom.scss
index a42b4ba..f615f54 100644
--- a/resources/sass/_custom.scss
+++ b/resources/sass/_custom.scss
@@ -59,11 +59,6 @@ body {
             bottom: auto;
             transform: translateY(-50%);
             background-color:  rgba(239, 218, 179, 0.5);
-
-            p {
-                font-size: 8pt;
-                color: $theme-color-five;
-            }
         }
     }
 
@@ -138,13 +133,13 @@ body {
 
         .col-form-label{
             text-align: left;
-            padding-top: 0px;
-            padding-bottom: 0px;
+            padding-top: 0;
+            padding-bottom: 0;
         }
         .form-control{
-            padding: 0px;
+            padding: 0;
             height: 17pt;
-            border-radius: 0%;
+            border-radius: 0;
         }
     }
 
@@ -152,7 +147,6 @@ body {
     	background-color: $theme-color-five;
     	font-weight: $font-weight-one;
     	color: $theme-color-four;
-
 	}
 
 	.form-control {
@@ -188,18 +182,6 @@ body {
         }
     }
 
-    /*.form-control:focus {
-        background-color: $theme-color-five;
-        margin-top: -1px;
-        border-top-color: $theme-color-five;
-        border-left-color: $theme-color-five;
-        border-right-color: $theme-color-five;
-        border-bottom-color: 0.5pt $theme-color-one;
-        color: $theme-color-one;
-        box-shadow: none;
-        font-size: 8pt;
-    }*/
-
     .button-square {
         font-size: 8pt;
         background-color: $theme-color-five;
@@ -227,43 +209,28 @@ body {
         display: inline-block;
         top: -0.35433rem;
         left: -0.2rem;
-
     }
 
     .pin-left {
         border-left: .5pt solid $theme-color-four;
         display: inline-block;
-        //margin: 50px;
-        //margin-bottom: 0pt;
         margin: 10rem 50px 0px -5rem;
-        //min-height: 75vh;
-        //height: auto;
         position: fixed;
         top: 0;
         bottom: 0;
         text-align: left;
         width: 100%;
         .text{
-            //padding-top: 5rem;//0.35433rem;
-            //margin-top: 5rem;
-            //top: 5rem;
             margin-left: 0.5rem;
         }
         p{
-            margin-top: 0pt;
-            margin-bottom: 0pt;
+            margin-top: 0;
+            margin-bottom: 0;
         }
     }
 
-    footer {
-        background: $theme-color-four;
-        color: $theme-color-five;
-        display: block;
-        height: 50px;
-        position: fixed;
-        left: 0;
-        bottom: 0;
-        width: 100%;
+    li{
+        list-style-type: none;
     }
 
     .button-image {
@@ -283,7 +250,7 @@ body {
         }
     }
 
-    .artefacts-area {
+    .artefacts-area, .artefact-area {
 
         h5 {
             color: $theme-color-two;
@@ -360,39 +327,181 @@ body {
         }
     }
 
-    .monButton {
 
-        &:before {
-            background-image : url(../images/Button_Arrow_Small.png);
-            //height: 0.9685rem;
-            //width: 0.59055rem;
+    .artefact-area {
+
+        .card-cus-bottom {
+            .left_panel_info, .right_panel_info {
+                margin: 0.9375rem 0 0 0;
+            }
+
+            .right_panel_info {
+                .float-right {
+                    margin-right: -0.35rem;
+                }
+            }
         }
 
-        &:hover {
-            background-color: transparent;
-            border-color: $theme-color-four;
+        .artefact-name {
+            font-weight: $font-weight-two;
+            font-size: 8pt;
+            line-height: 10pt;
+            margin-bottom: 0;
         }
 
-        &:focus {
-            background-color: transparent;
-            border-color: $theme-color-four;
-            outline: none !important;
-            box-shadow: none !important;
+        .artefact-author {
+            font-size: 7pt;
+            line-height: 8pt;
         }
 
-        &:active {
-            background-color: transparent !important;
-            border-color: transparent !important;
-            outline: none !important;
-            box-shadow: none !important;
+        .inter_like {
+            display: block;
+
+            &:before {
+                background-image: url(../images/interface/Hearth_Empty_Small.png);
+                width: 25px;
+                height: 19px;
+            }
+        }
+
+        .inter_info {
+
+            padding-right: 1rem;
+            &:before {
+                background-image: url(../images/interface/Button_Info_Small.png);
+                width: 29px;
+                height: 29px;
+            }
+        }
+
+        .artefact-likes {
+            font-weight: $font-weight-two;
+            font-size: 5pt;
+            padding-right: 0.25rem;
+        }
+    }
+
+    // Metadata area
+    .metadata-area {
+
+        h2 {
+            font-weight: $font-weight-two;
+            font-size: 12pt;
+        }
+
+        .arrow-down {
+            position: fixed;
+            top: 0.25rem;
+            right: 0;
+            margin: 2rem;
+            width: 0;
+            height: 0;
+            border-left: 0.59055rem solid transparent;
+            border-right: 0.59055rem solid transparent;
+            border-top: 0.59055rem solid $theme-color-two;
+        }
+
+        .pin-horizontal {
+            color: $theme-color-two;
+            border-bottom: .042rem solid $theme-color-two;
+            display: inline-block;
+            margin: 3.35rem 3.125rem 0 0;
+
+            &:before {
+                content: '';
+                background-color: $theme-color-two;
+                position: relative;
+                height: .5rem;
+                width: .5rem;
+                border-radius: 50%;
+                display: inline-block;
+                top: 1.5rem;
+                left: 50vw;
+            }
+
+            .metadata {
+                position: relative;
+                display: flex;
+                align-items: baseline;
+
+                span {
+                    font-weight: $font-weight-two;
+                }
+
+                .arrow-down {
+                    position: relative;
+                    top: 0;
+                    right: 0;
+                    width: 0;
+                    height: 0;
+                    border-left: 0.25rem solid transparent;
+                    border-right: 0.25rem solid transparent;
+                    border-top: 0.25rem solid $theme-color-two;
+                    margin: 0 0.5rem 0 0.5rem;
+                }
+            }
+        }
+
+        .white-pin {
+            color: $theme-color-one;
+            border-bottom: .042rem solid $theme-color-one;
+
+            &:before {
+                content: '';
+                background-color: $theme-color-one;
+            }
+
+            .metadata {
+                .arrow-down {
+                    border-top: 0.25rem solid $theme-color-one;
+                }
+            }
+        }
+
+        .metadata-text {
+            font-size: 8pt;
+            color: $theme-color-one;
+            padding-top: 10px;
+            padding-left: 25px;
+            padding-right: 25px;
+
+            .artefact-info {
+                color: $theme-color-two;
+                margin-top: 10px;
+
+                .artefact-name {
+                    font-weight: $font-weight-two;
+                    font-size: 8pt;
+                }
+
+                .artefact-author {
+                    font-weight: $font-weight-one;
+                    font-size: 7pt;
+                }
+
+                .inter_like_filled {
+
+                    &:before {
+                        background-image : url(../images/interface/Hearth_Filled_50.png);
+                        width: 50px;
+                        height: 50px;
+                    }
+
+                    &:hover, &:focus, &:active {
+                        background-color: transparent !important;
+                        border-color: transparent !important;
+                        outline: none !important;
+                        box-shadow: none !important;
+                    }
+                }
+            }
         }
     }
 
-    .content {
+    /*.content {
         position: relative;
 
         //Circle style button
-            //Toto možná nebude zcela optimální pro ostatní circle buttony. Nehodící se propagujte do btn-categories.
         .btn-circle.rounded-circle {
             padding: 6px 0px;
             font-size: 16px;
@@ -418,23 +527,52 @@ body {
                 color:$theme-color-five;
             }
         }
+    }*/
 
-        .btn-sm
-        {
-            width: 120px;
-            height: 120px;
-        }
-        .btn-dm
-        {
-            width: 240px;
-            height: 240px;
-        }
-        .btn-xl
+
+
+    //CATEGORIES - ROW BLOCK
+    .cat-col-md-2
+    {
+        margin: 2%;
+    }
+
+    //CATEGORIES - TILES
+    .btn.btn-dark.cat-tile
+    {
+        //STYLING
+        border-color: $theme-color-four;
+        border-radius: 0;
+        border-style: solid;
+        border-width: 2px;
+        color: $theme-color-four;
+        background-color: $theme-color-five;
+        text-align: center;
+        outline: none !important;
+        box-shadow: none !important;
+
+        //FONT
+        font-size: 8mm;
+        word-wrap: break-word;
+
+        //SPACING
+        height: 40mm;
+        width: 100%;
+
+        &:active, &:focus
         {
-            width: 360px;
-            height: 360px;
+            background-color: $theme-color-three;
+            border-color: $theme-color-four;
+            outline: none !important;
+            box-shadow: none !important;
+            color: $theme-color-five;
         }
+    }
 
+    //CATEGORY/{id} -h2 title NO ARTEFACTS
+    .category-h2
+    {
+        color: $theme-color-four;
     }
 }
 
@@ -465,7 +603,8 @@ body {
 
 .sidenav {
     height: 100%;
-    width: 0;
+    //width: 0;
+    width: 250px;
     position: fixed;
     z-index: 1;
     top: 0;
@@ -488,18 +627,10 @@ body {
 }
 
 @media screen and (max-height: 450px) {
-    //.sidenav {padding-top: 15px;}
     .sidenav a {font-size: 18px;}
 }
 
-@media (max-width: 990px) {
-    body {
-        /*.pin-left {
-            margin-left: -15rem;
-            margin-top: 11rem;
-        }*/
-    }
-}
+@media (max-width: 990px) {}//Ponecháno pro případ, že se bude měnit login
 
 @media (max-width: 770px) {
     body {
@@ -513,12 +644,18 @@ body {
 
 @media only screen and (max-width: 540px)
 {
+    .sidenav{
+        width: 0;
+    }
     .head-title.text-center h1
     {
-        font-size: 45pt;
+        font-size: 23pt;
+        padding-top: 50pt;
+        white-space: nowrap;
+
     }
 
-    .btn-circle.rounded-circle.btn-sm
+    /*.btn-circle.rounded-circle.btn-sm
     {
         width: 90px;
         height: 90px;
@@ -534,7 +671,7 @@ body {
     {
         width: 180px;
         height: 180px;
-    }
+    }*/
 
     body{
         .carousel {
diff --git a/resources/views/artefact/category.blade.php b/resources/views/artefact/category.blade.php
new file mode 100644
index 0000000..714e3a0
--- /dev/null
+++ b/resources/views/artefact/category.blade.php
@@ -0,0 +1,54 @@
+@extends('layouts.app')
+
+@section('title', 'Artefacts')
+
+@section('breadcrumb')
+    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
+    <li class="breadcrumb-item active" aria-current="page">Artefacts</li>
+@endsection
+
+
+@section('content')
+    <div class="container">
+        <div class="jumbotron mt-5">
+            <div class="text-center">
+                <h1>Artefact list</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.
+                </p>
+            </div>
+        </div>
+
+        @if (count($artefacts) === 0)
+            <div class="text-center category-h2">
+                <h2>Currently no artefacts available.</h2>
+            </div>
+        @else
+            @foreach($artefacts as $artefact)
+                <div class="artefacts-area mb-5">
+                    <div class="card">
+                        <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="45%" y="50%" fill="#dee2e6" dy=".3em">Artefact image</text></svg>
+                        <div class="card-body">
+                            <h5 class="card-title"><a href="{{ url('/artefact/' . $artefact[0]->id) }}">{{$artefact[0]->name}}</a> - {{$artefact[0]->author}}</h5>
+                            <h6 class="card-subtitle mb-2 text-muted">{{$artefact[0]->year}}, {{$artefact[0]->pages}} pages</h6>
+                            <p class="card-text">
+                                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.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            @endforeach
+        @endif
+    </div>
+
+@endsection
diff --git a/resources/views/artefact/view.blade.php b/resources/views/artefact/view.blade.php
index 0732dd2..5ab4326 100644
--- a/resources/views/artefact/view.blade.php
+++ b/resources/views/artefact/view.blade.php
@@ -10,21 +10,7 @@
 
 
 @section('content')
-    <div class="container">
-        <div class="jumbotron mt-5">
-            <div class="text-center">
-                <h1>Artefact</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.
-                </p>
-            </div>
-        </div>
-
+    <div class="container py-4">
         @if (is_null($artefact))
             <div class="text-center">
                 <h2>Currently no artefacts available.</h2>
@@ -32,23 +18,23 @@
         @else
             <div class="artefact-area mb-5">
                 <div class="card">
-                    <div class="card-body">
-                        <h2 class="text-uppercase card-title">{{$artefact->name}}</h2>
-                        <h5>{{$artefact->author}}</h5>
-                        <h6 class="card-subtitle mb-2 text-muted">{{$artefact->year}}, {{$artefact->pages}} pages</h6>
-                        <p class="card-text">
-                            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.
-                        </p>
-                        <p>
-                            @if (count($artefact->metadata) > 0)
-                                <a href="{{ url('/detail/' . $artefact->id) }}">Notes related to artefact</a>
-                            @endif
-                        </p>
+                    <a href="{{ url('/artefact/' . $artefact->id) }}">
+                        <img class="card-img-top" src="{{asset('images/artefacts/book_cover_01.jpg')}}" width="100%" height=auto alt="book_cover">
+                    </a>
+                    <div class="card-cus-bottom">
+                        <div class="col-xs-2 float-left left_panel_info">
+                            <h5 class="artefact-name">{{$artefact->name}}</h5>
+                            <h6 class="artefact-author">{{$artefact->author}}</h6>
+                        </div>
+                        <div class="col-xs-2 float-right right_panel_info">
+                            <div class="float-left">
+                                <button id="info_butt_{{$artefact->id}}" type="button" class="btn btn-primary button-image inter_info"></button>
+                            </div>
+                            <div class="float-right text-center">
+                                <button id="like_butt_{{$artefact->id}}" type="button" class="btn btn-primary button-image inter_like"></button>
+                                <h6 class="artefact-likes">{{$artefact->likes}}</h6>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/resources/views/categories/index.blade.php b/resources/views/categories/index.blade.php
index a5430ee..2f9fd51 100644
--- a/resources/views/categories/index.blade.php
+++ b/resources/views/categories/index.blade.php
@@ -1,148 +1,31 @@
-@extends('layouts.art')
+@extends('layouts.app')
 
 @section('title', 'Categories')
 
 @section('content')
     @if(isset($user))
         {{--<p><?php dd($categories); ?></p>--}}
-        <div>
-            <button type="button" class="btn btn-primary button-image monButton"></button>
-        </div>
-        <div class="head-title text-center">
-            <h1>choose a few topics</h1>
-        </div>
-        <div class="content" id="canvas">
+        <div class="cat-main-div" onclick="resetEnter()">
+            <div class="head-title text-center">
+                <h1>choose a topic</h1>
+            </div>
             {{--@for($k = 1; $k <= count($categories);$k++)--}}
-            @for($k = 1; $k <= 10;$k++)
-                @if($categorySizes[$k-1] == 1)
-                        <button type="button" class="btn btn-circle rounded-circle btn-categories btn-sm" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
-                @elseif($categorySizes[$k-1] == 2)
-                        <button type="button" class="btn btn-circle rounded-circle btn-categories btn-dm" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
-                @else
-                        <button type="button" class="btn btn-circle rounded-circle btn-categories btn-xl" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
+            @for($k = 0; $k < $count;$k++)
+                @if($k % 6 == 0)
+                    <div class="row">
+                @endif
+                    <div class="col-md-2 cat-col-md-2">
+                        <a href="{{ url('/category/' . $categoryNames[$k]->id) }}">
+                            <button class="btn btn-dark cat-tile">
+                                {{$categoryNames[$k]->nameCZ}}
+                            </button>
+                        </a>
+                    </div>
+                @if($k % 6 == 5 || $k + 1 == $count)
+                    </div>
                 @endif
             @endfor
         </div>
-        <script>
-            function randomCategoryPos(name, countButtons)
-            {
-                var DISTANCE = 360;
-                var MAX_DISTANCE = 3.5 * DISTANCE;
-                var sWidth = screen.width;
-                var positionsX = [];
-                var positionsY = [];
-                var types = [];
-                var offset = 50;
-
-                if(sWidth <= 540)
-                {
-                    sWidth -= 100;
-                    DISTANCE = 190;
-                    MAX_DISTANCE = 3.5 * DISTANCE;
-                    offset = 25;
-                }
-                else
-                {
-                    if(sWidth > 720)
-                    {
-                        sWidth = 720;
-                    }
-                }
-                console.log(DISTANCE+ "dis\n");
-                console.log(MAX_DISTANCE+ "max_dis\n");
-                for(var i = 0; i < countButtons; i++)
-                {
-                    var size = document.getElementById(name + (i+1)).className;
-                    var type;
-                    if(size.includes("btn-sm"))
-                    {
-                        if(sWidth <= 540)
-                        {
-                            type = 45;
-                        }
-                        else
-                        {
-                            type = 60;
-                        }
-                    }
-                    else if(size.includes("btn-dm"))
-                    {
-                        if(sWidth <= 540)
-                        {
-                            type = 65;
-                        }
-                        else
-                        {
-                            type = 120;
-                        }
-                    }
-                    else
-                    {
-                        if(sWidth <= 540)
-                        {
-                            type = 90;
-                        }
-                        else
-                        {
-                            type = 180;
-                        }
-                    }
-                    console.log(type + "<br>");
-                    //document.write(type + "<br>");
-
-                    var done = true;
-                    var topS;
-                    var rightS;
-                    while(done)
-                    {
-                        if(i == 0)
-                        {
-                            topS = offset + type;
-                        }
-                        else
-                        {
-                            topS = (Math.floor(Math.random() * 2048) + offset) + type;
-                        }
-                        rightS = (Math.floor(Math.random() * sWidth) + 1) + type;
-                        console.log(topS + " " + rightS + "nn<br>");
-
-                        //Check distancing from other circles
-                        var okay = true;
-                        for(var k = 0; k < positionsX.length; k++)
-                        {
-                            var powX = Math.abs(positionsX[k] - topS);
-                            var powY = Math.abs(positionsY[k] - rightS);
-                            var tmp = Math.sqrt((powX*powX) + (powY*powY));
-                            console.log(tmp+ "tmp<br>");
-                            if(tmp < DISTANCE)
-                            {
-                                okay = false;
-                                break;
-                            }
-                        }
-
-                        if(okay)
-                        {
-                            done = false;
-                        }
-                    }
-
-                    //document.write("<br>");
-                    positionsX.push(topS);
-                    positionsY.push(rightS);
-                    types.push(type);
-                }
-
-                for(var i = 1; i <= countButtons; i++)
-                {
-                    document.getElementById(name + i).style.top = (positionsX[i-1] - types[i-1]) + "px";
-                    document.getElementById(name + i).style.right = (positionsY[i-1] - types[i-1]) + "px";
-                }
-            }
-
-            var countButtons = document.getElementById("canvas").getElementsByTagName('button').length;
-            randomCategoryPos("cat-", countButtons);
-        </script>
     @else
         <ul class="list-group">
             <li class="list-group-item">
diff --git a/resources/views/favartefacts/index.blade.php b/resources/views/favartefacts/index.blade.php
index 74c9700..2e4a828 100644
--- a/resources/views/favartefacts/index.blade.php
+++ b/resources/views/favartefacts/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.art')
+@extends('layouts.app')
 
 @section('title', 'Favorite artefacts')
 
diff --git a/resources/views/favmetadata/index.blade.php b/resources/views/favmetadata/index.blade.php
index f7011e4..de5d33c 100644
--- a/resources/views/favmetadata/index.blade.php
+++ b/resources/views/favmetadata/index.blade.php
@@ -9,40 +9,57 @@
 
 @section('content')
     <div class="container">
-        <div class="jumbotron mt-5">
-            <div class="text-center">
-                <h1>Favorite metadata</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.
-                </p>
+        <div class="metadata-area">
+            <div class="text-center mt-5">
+                <h2>notes</h2>
             </div>
-        </div>
+            <span class="arrow-down"></span>
 
-        <div class="metadata-area">
             @if(count($metadata) > 0)
-                <ul class="list-group">
-                    @foreach($metadata as $meta)
-                        <div class="note-area mb-3">
-                            <li class="list-group-item">
-                                On {{$meta->page}} page:<br>
-                                {{$meta->noteCZ}}<br>
-                                {{$meta->noteEN}}<br>
-                            </li>
+                @foreach($metadata as $meta)
+                    <div  id="row_{{$meta->id}}" class="row text-page">
+                        <div class="pin-horizontal">
+                            <div class="metadata">
+                                <span>page {{$meta->page}}</span>
+                                <a href="#meta_{{$meta->id}}" class="arrow-down" data-toggle="collapse" data-target="#meta_{{$meta->id}}" onclick="openNote('#row_{{$meta->id}}')"></a>
+                            </div>
+                        </div>
+                        <div id="meta_{{$meta->id}}" class="metadata-text collapse">
+                            {{$meta->noteEN}}
+                            <div class="artefact-info">
+                                <div class="artefact-name">
+                                    {{$meta->artefact->name}}
+                                </div>
+                                <div class="artefact-author">
+                                    {{$meta->artefact->author}}
+                                </div>
+                                <div class="text-center">
+                                    <button id="like_butt_{{$meta->id}}" type="button" class="btn btn-primary button-image inter_like_filled"></button>
+                                </div>
+                            </div>
                         </div>
-                    @endforeach
-                </ul>
+                    </div>
+                @endforeach
             @else
-                <ul class="list-group">
-                    <li class="list-group-item">
-                        <h3>No notes for this BOOK were found!</h3>
-                    </li>
-                </ul>
+                <h2>No favourite metadata yet!</h2>
             @endif
         </div>
     </div>
+
+    <script>
+        function openNote(element) {
+            let metadata = $(element);
+            let showed = metadata.find(".metadata-text").hasClass('show');
+
+            if (showed === false)
+            {
+                metadata.find('.pin-horizontal').addClass("white-pin");
+            }
+            else
+            {
+                metadata.find('.pin-horizontal').removeClass("white-pin");
+            }
+
+        }
+    </script>
 @endsection
diff --git a/resources/views/inc/sidebar.blade.php b/resources/views/inc/sidebar.blade.php
index 7fbfb2e..deac31f 100644
--- a/resources/views/inc/sidebar.blade.php
+++ b/resources/views/inc/sidebar.blade.php
@@ -1,9 +1,9 @@
-<div id="mySidenav" class="sidenav">
+<div id="sidebar" class="sidenav">
     <a href="javascript:void(0)" class="arrow arrow-left" s onclick="closeNav()"></a>
-    <li class="nav-item"></li>
-    <li class="nav-item"></li>
-    <li class="nav-item"></li>
-    <li class="nav-item"></li>
+    <li class="nav-item"> &#160;</li>
+    <li class="nav-item"> &#160;</li>
+    <li class="nav-item"> &#160;</li>
+    <li class="nav-item"> &#160;</li>
         @guest
         <li class="nav-item">
             <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
@@ -15,22 +15,21 @@
         @endif
         @else
         <li class="nav-item dropdown">
-           {{-- <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
-                {{ Auth::user()->name }} <span class="caret"></span>
-            </a>
-
-            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">--}}
             <a class="dropdown-item text-headline" href="{{ url('/') }}">home</a>
 
             <a class="dropdown-item text-headline" href="{{ url('/categories') }}">topics</a>
 
             <a class="dropdown-item text-headline" href="{{ url('/artefact') }}">books</a>
 
+            <a class="dropdown-item text-headline" href="{{ url('/favartefacts') }}">my books</a>
+
+                <a class="dropdown-item text-headline" href="{{ url('/favmetadata') }}">my notes</a>
+
 
 
-                <a class="dropdown-item text-headline" href="{{ url('/favmetadata') }}">notes</a>
+            <a class="dropdown-item text-headline" href="{{ url('/charts') }}">charts</a>
+
 
-                <a class="dropdown-item text-headline" href="{{ url('/favartefacts') }}">charts</a>
 
                 <a class="dropdown-item text-headline" href="{{ route('logout') }}"
                    onclick="event.preventDefault();
@@ -41,27 +40,32 @@
                 <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                     @csrf
                 </form>
-            {{-- </div>--}}
         </li>
         @endguest
 
 </div>
 
+
 <span class="arrow arrow-right" onclick="openNav()"></span>
+{{--<label for="logo" class="col-md-12 kaplicky" style="display: inline-block; text-align: center; padding: 1.25rem; padding-bottom: 0">{{ __('kaplicky') }}</label>
+{{--<label for="logo" class="col-md-4 kaplicky">{{ __('kaplicky') }}</label>--}}
+{{--<a class="navbar-brand kaplicky" href="{{ url('/') }}">
+    {{  __('kaplicky') }}
+</a>--}}
 
 <script>
     function openNav() {
         var x = window.matchMedia("(max-width: 540px)")
         if(x.matches){
-            document.getElementById("mySidenav").style.width = "50vw";
+            document.getElementById("sidebar").style.width = "50vw";
         }
         else{
-            document.getElementById("mySidenav").style.width = "250px";
+            document.getElementById("sidebar").style.width = "250px";
         }
 
     }
 
     function closeNav() {
-        document.getElementById("mySidenav").style.width = "0";
+        document.getElementById("sidebar").style.width = "0";
     }
 </script>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index ec98893..8cd0faf 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -13,25 +13,19 @@
     <script src="{{ asset('js/app.js') }}" defer></script>
 
     <!-- Fonts -->
-    <link rel="dns-prefetch" href="//fonts.gstatic.com">
-    <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">
+    
 </head>
 <body>
-    <div id="app">
+
         @if(!Request::is('/'))
             @include('inc/sidebar')
         @endif
 
-        <main class="py">
-            <div class="custom-container">
-                <div class="content-area">
+
                     @yield('content')
-                </div>
-            </div>
-        </main>
-    </div>
+
 </body>
 </html>
diff --git a/resources/views/pages/index.blade.php b/resources/views/pages/index.blade.php
index 26add30..2527552 100644
--- a/resources/views/pages/index.blade.php
+++ b/resources/views/pages/index.blade.php
@@ -39,7 +39,7 @@
         </div>
         <div class="carousel-caption d-md-block">
             <h2 class="text-center kaplicky">kaplicky</h2>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis purus, volutpat quis libero aliquet, pulvinar accumsan erat.
+            <p class="text black">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>
diff --git a/routes/web.php b/routes/web.php
index 994b0dc..0a1d100 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -17,11 +17,13 @@ Route::get('/', 'PagesController@index');
 
 Route::get('/artefact', 'ArtefactController@default');
 Route::get('/artefact/{id}', 'ArtefactController@view');
+Route::get('/category/{id}', 'ArtefactController@showCategory');
 Route::resource('/detail', 'DetailsController', array('only' => array('index', 'show')));
 Route::resource('/categories', 'CategoriesController', array('only' => array('index')));
-Route::resource('/favartefacts', 'FavoriteArtefactsController', array('only' => array('index', 'show')));
+Route::resource('/favartefacts', 'FavoriteArtefactsController', array('only' => array('index', 'show', 'store')));
 Route::get('/favmetadata', 'FavoriteMetadataController@index');
 
+
 Auth::routes();
 
 Route::get('/home', 'HomeController@index')->name('home');
