commit 75508baf13ece3e1748bbd94699394595796897d
Author: Marek Lovčí <mareklovci@gmail.com>
Date:   Thu Jun 4 07:08:41 2020 +0200

    Merge origin/develop into master

diff --git a/README.md b/README.md
index 41e4b2e..2d2e929 100644
--- a/README.md
+++ b/README.md
@@ -38,9 +38,38 @@ Případně `php artisan migrate:refresh --seed`.
 
 Migrace dat z Mockaroo je tímto okamžikem obsolete.
 
+### Výchozí uživatel
+
+Je nadefinován výchozí (testovací) uživatel.
+
+**Login** admin@kaplicky.com **heslo** admin
+
 ## Jak zprovoznit bootstrap a kompilaci SASS souborů
 
 1. Ujistěte se, že v sekci **Run/Edit Configurations** máte nastavený **Document root** na složku `public` v kořenovém adresáři (jinak aplikace **nenajde** vygenerované css soubory).
 2. Spusťte `composer install` (soubor pro composer už by měl být updatován) pro nainstalování balíčku `laravel/ui`.
 3. Spusťte v terminálu příkaz `npm install && npm run dev`, příkaz zkompiluje všechny dostupné sass (`resources/sass`) do css souboru typicky do složky `public/css`.
     1. Nastavením příkazu `npm run watch` se sass automaticky překompiluje při detekci změny.
+
+## Nastavení Mailtrap účtu pro odesílání registračních zpráv
+
+Pro správné nastavení posílání emailů je nutné poupravit soubor `.env`. Najděte v souboru sekci `MAIL_...` a nahraďte je níže uvedenými hodnotami:
+
+```shell script
+MAIL_MAILER=smtp
+MAIL_HOST=smtp.mailtrap.io
+MAIL_PORT=2525
+MAIL_USERNAME=d1eae987fe913e
+MAIL_PASSWORD=d109bc15f3dc66
+MAIL_ENCRYPTION=tls
+MAIL_FROM_ADDRESS=merlot@merlot.org
+MAIL_FROM_NAME="${APP_NAME}"
+```
+
+Pro přístup k mail serveru je nutné se příhlásit na stránce https://mailtrap.io/ s níže přidanými přihlašovacími údaji:
+
+email:`jnohac@students.zcu.cz`
+heslo:`merlot2020Betammajl`
+
+Následně je konkrétní mail server přístupný z Inboxu `Demo inbox`.
+
diff --git a/app/Http/Controllers/ArtefactController.php b/app/Http/Controllers/ArtefactController.php
index 8f18ee1..a09aba7 100644
--- a/app/Http/Controllers/ArtefactController.php
+++ b/app/Http/Controllers/ArtefactController.php
@@ -5,63 +5,197 @@ namespace App\Http\Controllers;
 use App\Artefact;
 use App\ArtefactCategory;
 use App\Category;
-use Illuminate\Http\Request;
-use Illuminate\Support\Facades\DB;
+use App\User;
+use Illuminate\Contracts\View\Factory;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\View\View;
 
 class ArtefactController extends Controller
 {
+    const ORDER_COLUMN = 'page';
+
     public function __construct()
     {
         $this->middleware('auth');
     }
 
+    /**
+     * Prepare all necessary data for shown Artefact.
+     * These are current count of likes, if it set to
+     * a favorites by a logged user and all metadata
+     * connected to the artefact.
+     *
+     * @param       $artefacts  all artefacts
+     * @return      mixed       modified artefacts
+     */
+    public function prepData($artefacts)
+    {
+        foreach($artefacts as $artefact)
+        {
+            $artefact['likes'] = Artefact::find($artefact->id)->users()->count();
+            $artefact['favourite'] = is_null(User::find(Auth::id())->likesArtefacts()->find($artefact->id)) ? false : true;
+            $metadata = Artefact::find($artefact->id)->metadata()->orderBy(self::ORDER_COLUMN)->get();
+
+            foreach ($metadata as $item)
+            {
+                $item['favourite'] = is_null(User::find(Auth::id())->likesMetadata()->find($item->id)) ? false : true;
+            }
+
+            $artefact['metadata'] = $metadata;
+        }
+
+        return $artefacts;
+    }
+
     /**
      * Returns view of all artefacts.
      *
-     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
+     * @return Factory|View
      */
     public function default()
     {
-        $artefacts = Artefact::all();
-
+        $artefacts = Artefact::simplePaginate(1);
+        $artefacts = $this->prepData($artefacts);
         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
+     * @param $id id of the category
+     * @return Factory|View
      */
     public function showCategory($id)
     {
-        $cateogryArtefacts = ArtefactCategory::where('category_id', $id)->get();
-        if(count($cateogryArtefacts) > 0)
+        $artefacts = Category::find($id)->artefacts()->simplePaginate(1);
+        $artefacts = $this->prepData($artefacts);
+        return view('artefact.default', ['artefacts' => $artefacts]);
+    }
+
+    /**
+     * Returns view of artefacts related to the chosen categories
+     *
+     * @param $id string with categories ids
+     * @return Factory|View
+     */
+    public function showCategories($id)
+    {
+        //Parsing text for individual ids of categories
+        $textWithIds  = $id;
+        $pieces = explode(",", $textWithIds);
+        $arrStrToInt = array();
+        for($i = 0;$i < count($pieces); $i++)
         {
-            $artefacts = array();
-            foreach($cateogryArtefacts as $ar)
+            if($pieces[$i] == null || !strcmp($pieces[$i], ""))
             {
-                array_push($artefacts, Artefact::where('id', $ar->artefact_id)->get());
+                continue;
             }
-            return view('artefact.category', ['artefacts' => $artefacts]);
+
+            array_push($arrStrToInt, (int)$pieces[$i]);
         }
-        else
+
+        //Creating array of all artefacts ids
+        $arrArtIds = array();
+        foreach($arrStrToInt as $cat)
         {
-            return view('artefact.category', ['artefacts' => array()]);
+            $tmpArtefacts = Category::find($cat)->artefacts()->get();
+            foreach($tmpArtefacts as $art)
+            {
+                array_push($arrArtIds, $art->id);
+            }
         }
+
+        $artefacts = Artefact::whereIn('id', $arrArtIds)->simplePaginate(1);
+        $artefacts = $this->prepData($artefacts);
+        return view('artefact.default', ['artefacts' => $artefacts]);
     }
 
     /**
      * Returns view of single artefact given by its id.
      *
      * @param $id int id of the artefact
-     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
+     * @return Factory|View
      */
     public function view($id)
     {
+        $artefact = Artefact::where('id', $id)->simplePaginate(1);
+        $artefact = $this->prepData($artefact);
+        //return view('artefact.view', ['artefact' => $artefact]);
+        return view('artefact.default', ['artefacts' => $artefact]);
+    }
+
+    /**
+     * Likes artefact given by its id.
+     *
+     * @param $id int id of metadata
+     * @return RedirectResponse
+     */
+    public function like($id)
+    {
+        $user = User::find(Auth::id());
+        $artefact = Artefact::find($id);
+
+        $user->likesArtefacts()->attach($artefact);
+
+        return back()->withInput();
+    }
+
+    /**
+     * Unlikes artefact given by its id.
+     *
+     * @param $id int id of metadata
+     * @return RedirectResponse
+     */
+    public function unlike($id)
+    {
+        $user = User::find(Auth::id());
         $artefact = Artefact::find($id);
-        $artefact['likes'] = Artefact::find($id)->users()->count();
 
-        return view('artefact.view', ['artefact' => $artefact]);
+        $user->likesArtefacts()->detach($artefact);
+
+        return back()->withInput();
     }
+
+    /**
+     * Returns artefact given by its id.
+     *
+     * @param $id int id of artefact
+     * @return RedirectResponse
+     */
+    /*public function view($id)
+    {
+        //$user = User::find(Auth::id());
+        //$artefact = Artefact::find($id);
+
+        $artefacts = Artefact::withCount('users')->orderByDesc('users_count')->get()->take(10);
+
+
+            $currentPage = -1; // You can set this to any page you want to paginate to
+
+            for($i=0;$i<10;$i++){
+                if($artefacts[$i]->id==$id) $currentPage = $i+1;
+            }
+            // Make sure that you call the static method currentPageResolver()
+            // before querying users
+            \Illuminate\Pagination\Paginator::currentPageResolver(function () use ($currentPage) {
+                return $currentPage;
+            });
+
+
+
+        $artefacts = Artefact::withCount('users')->orderByDesc('users_count')->limit(10)->paginate(1);
+
+        $artefacts = ArtefactController::prepData($artefacts);
+        return view('artefact.default', ['artefacts' => $artefacts]);
+        /*foreach($artefacts as $item)
+        {
+            $id = $item->id;
+            $item['likes'] = Artefact::find($id)->users()->count();
+            $item['favourite'] = is_null(User::find(Auth::id())->likesArtefacts()->find($id)) ? false : true;
+        }*/
+
+
+        //return back()->withInput();
+    /*}*/
 }
diff --git a/app/Http/Controllers/Auth/RegisterController.php b/app/Http/Controllers/Auth/RegisterController.php
index 3746d74..d6ff69f 100644
--- a/app/Http/Controllers/Auth/RegisterController.php
+++ b/app/Http/Controllers/Auth/RegisterController.php
@@ -3,10 +3,13 @@
 namespace App\Http\Controllers\Auth;
 
 use App\Http\Controllers\Controller;
+use App\Mail\RegisterMail;
 use App\Providers\RouteServiceProvider;
 use App\User;
+use Illuminate\Routing\UrlGenerator;
 use Illuminate\Foundation\Auth\RegistersUsers;
 use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Facades\Mail;
 use Illuminate\Support\Facades\Validator;
 
 class RegisterController extends Controller
@@ -64,12 +67,18 @@ class RegisterController extends Controller
      */
     protected function create(array $data)
     {
-        //dd($data);
+        $stringH = Hash::make($data['email'] . $data['name']);
+        $vowels = array("/", "\\");
+        $stringHModified = str_replace($vowels, "", $stringH);
+
+        //Mail::to($data['email'])->send(new RegisterMail("http://localhost/verify/". $stringHModified));
+        Mail::to($data['email'])->send(new RegisterMail(url("/verify/") . "/" . $stringHModified));//http://localhost/register/verify/..
 
         return User::create([
             'name' => $data['name'],
             'email' => $data['email'],
             'password' => Hash::make($data['password']),
+            'register_hash' => $stringHModified,
         ]);
     }
 }
diff --git a/app/Http/Controllers/ChartsController.php b/app/Http/Controllers/ChartsController.php
new file mode 100644
index 0000000..20686d1
--- /dev/null
+++ b/app/Http/Controllers/ChartsController.php
@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\User;
+use Illuminate\Contracts\Foundation\Application;
+use Illuminate\Contracts\View\Factory;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Support\Facades\Auth;
+use App\Http\Controllers\Image;
+use Illuminate\View\View;
+use App\Artefact;
+
+class ChartsController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    /**
+     * Display a listing of the resource.
+     *
+     * @return Application|Factory|View
+     */
+    public function index()
+    {
+        if(Auth::check())
+        {
+            $artefacts = Artefact::withCount('users')->orderByDesc('users_count')->get()->take(10);
+            foreach($artefacts as $item)
+            {
+                $id = $item->id;
+                $item['likes'] = Artefact::find($id)->users()->count();
+                $item['favourite'] = is_null(User::find(Auth::id())->likesArtefacts()->find($id)) ? false : true;
+            }
+
+            $data = array(
+                'title' => 'Charts',
+                'artefacts' => $artefacts
+            );
+            return view('charts.index') -> with($data);
+        }
+        else
+        {
+            $data = array(
+                'title' => 'Welcome to the MERLOT page',
+            );
+            //return view('index', compact('title'));
+            return view('pages.index') -> with($data);
+        }
+    }
+
+
+}
diff --git a/app/Http/Controllers/DetailsController.php b/app/Http/Controllers/DetailsController.php
index c9e45f5..4cef5e3 100644
--- a/app/Http/Controllers/DetailsController.php
+++ b/app/Http/Controllers/DetailsController.php
@@ -3,12 +3,16 @@
 namespace App\Http\Controllers;
 
 use App\ArtefactUser;
+use App\User;
 use Illuminate\Http\Request;
 use App\Metadata;
 use App\Artefact;
+use Illuminate\Support\Facades\Auth;
 
 class DetailsController extends Controller
 {
+    const ORDER_COLUMN = 'page';
+
     public function __construct()
     {
         $this->middleware('auth');
@@ -32,17 +36,53 @@ class DetailsController extends Controller
      * Display the specified resource.
      *
      * @param  int  $id
-     * @return \Illuminate\Http\Response
+     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
      */
     public function show($id)
     {
-        $data = array(
-            'id' => $id,
-            'arrArtefact' => Artefact::find($id),
-            'likes' => Artefact::find($id)->users()->count(),
-            'metadata' => Metadata::where('artefact_id', $id)->get()
-        );
-        return view('detail.index') -> with($data);
+        if (is_null(Artefact::find($id)))
+        {
+            return view('detail.index', ['metadata' => []]);
+        }
+
+        $metadata = Artefact::find($id)->metadata()->orderBy(self::ORDER_COLUMN)->get();
+        foreach($metadata as $item)
+        {
+            $item['favourite'] = is_null(User::find(Auth::id())->likesMetadata()->find($item->id)) ? false : true;
+        }
+
+        return view('detail.index', ['metadata' => $metadata]);
     }
 
+    /**
+     * Likes metadata given by its id.
+     *
+     * @param $id int id of metadata
+     * @return \Illuminate\Http\RedirectResponse
+     */
+    public function like($id)
+    {
+        $user = User::find(Auth::id());
+        $metadata = Metadata::find($id);
+
+        $user->likesMetadata()->attach($metadata);
+
+        return back()->withInput();
+    }
+
+    /**
+     * Unlikes metadata given by its id.
+     *
+     * @param $id int id of metadata
+     * @return \Illuminate\Http\RedirectResponse
+     */
+    public function unlike($id)
+    {
+        $user = User::find(Auth::id());
+        $metadata = Metadata::find($id);
+
+        $user->likesMetadata()->detach($metadata);
+
+        return back()->withInput();
+    }
 }
diff --git a/app/Http/Controllers/FavoriteArtefactsController.php b/app/Http/Controllers/FavoriteArtefactsController.php
index c9b62ac..6d050d5 100644
--- a/app/Http/Controllers/FavoriteArtefactsController.php
+++ b/app/Http/Controllers/FavoriteArtefactsController.php
@@ -2,49 +2,65 @@
 
 namespace App\Http\Controllers;
 
-use App\ArtefactUser;
+use Illuminate\Contracts\Foundation\Application;
+use Illuminate\Contracts\View\Factory;
 use Illuminate\Support\Facades\Auth;
 use App\User;
 use App\Artefact;
 use App\Http\Controllers\Image;
+use Illuminate\View\View;
 
 class FavoriteArtefactsController extends Controller
 {
+    const ORDER_COLUMN = 'page';
+
     public function __construct()
     {
         $this->middleware('auth');
     }
 
+    /**
+     * Prepare all necessary data for shown Artefact.
+     * These are current count of likes, if it set to
+     * a favorites by a logged user and all metadata
+     * connected to the artefact.
+     *
+     * @param       $artefacts  all artefacts
+     * @return      mixed       modified artefacts
+     */
+    public function prepData($artefacts)
+    {
+        foreach($artefacts as $artefact)
+        {
+            $artefact['likes'] = Artefact::find($artefact->id)->users()->count();
+            $artefact['favourite'] = is_null(User::find(Auth::id())->likesArtefacts()->find($artefact->id)) ? false : true;
+            $metadata = Artefact::find($artefact->id)->metadata()->orderBy(self::ORDER_COLUMN)->get();
+            foreach ($metadata as $item)
+            {
+                $item['favourite'] = is_null(User::find(Auth::id())->likesMetadata()->find($item->id)) ? false : true;
+            }
+            $artefact['metadata'] = $metadata;
+        }
+        return $artefacts;
+    }
+
     /**
      * Display a listing of the resource.
      *
-     * @return \Illuminate\Http\Response
+     * @return Application|Factory|View
      */
     public function index()
     {
         if(Auth::check())
         {
             $id = Auth::id();
-            $artefacts = User::find($id)->likesArtefacts()->get();
-            foreach($artefacts as $item)
-            {
-                $item['likes'] = Artefact::find($item->id)->users()->count();
-            }
-
-            $data = array(
-                'title' => 'Favorite artefacts',
-                'user' => $id,
-                'artefacts' => $artefacts
-            );
-            return view('favartefacts.index') -> with($data);
+            $artefacts = User::find($id)->likesArtefacts()->simplePaginate(1);
+            $artefacts = $this->prepData($artefacts);
+            return view('artefact.default', ['artefacts' => $artefacts]);
         }
         else
         {
-            $data = array(
-                'title' => 'Welcome to the MERLOT page',
-            );
-            //return view('index', compact('title'));
-            return view('pages.index') -> with($data);
+            return view('pages.index');
         }
     }
 
@@ -52,25 +68,13 @@ class FavoriteArtefactsController extends Controller
      * Display the specified resource.
      *
      * @param  int  $id
-     * @return \Illuminate\Http\Response
+     * @return Application|Factory|View
      */
     public function show($id)
     {
-        $artefacts = User::find($id)->likesArtefacts()->get();
-        foreach($artefacts as $item)
-        {
-            $item['likes'] = Artefact::find($item->id)->users()->count();
-        }
-
-
-        $data = array(
-            'title' => 'Favorite artefacts',
-            'id' => $id,
-            'user' => User::find($id),
-            'userId' => Auth::id(),
-            'artefacts' => $artefacts
-        );
-        return view('favartefacts.index') -> with($data);
+        $artefacts = User::find($id)->likesArtefacts()->simplePaginate(1);
+        $artefacts = $this->prepData($artefacts);
+        return view('artefact.default', ['artefacts' => $artefacts]);
     }
 
 }
diff --git a/app/Http/Controllers/FavoriteMetadataController.php b/app/Http/Controllers/FavoriteMetadataController.php
index 0597ec7..00b5369 100644
--- a/app/Http/Controllers/FavoriteMetadataController.php
+++ b/app/Http/Controllers/FavoriteMetadataController.php
@@ -16,6 +16,11 @@ class FavoriteMetadataController extends Controller
         $this->middleware('auth');
     }
 
+    /**
+     * Show list of favourite metadata.
+     *
+     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
+     */
     public function index()
     {
         $metadata = User::find(Auth::id())->likesMetadata()->orderBy(self::ORDER_COLUMN)->get();
@@ -27,4 +32,20 @@ class FavoriteMetadataController extends Controller
         return view('favmetadata.index', ['metadata' => $metadata]);
     }
 
+    /**
+     * Unlike metadata given by its id.
+     *
+     * @param $id int id of metadata
+     * @return \Illuminate\Http\RedirectResponse
+     */
+    public function unlike($id)
+    {
+        $user = User::find(Auth::id());
+        $metadata = Metadata::find($id);
+
+        $user->likesMetadata()->detach($metadata);
+
+        return back()->withInput();
+    }
+
 }
diff --git a/app/Http/Controllers/VerifyRegisterController.php b/app/Http/Controllers/VerifyRegisterController.php
new file mode 100644
index 0000000..a061fb7
--- /dev/null
+++ b/app/Http/Controllers/VerifyRegisterController.php
@@ -0,0 +1,58 @@
+<?php
+
+
+namespace App\Http\Controllers;
+
+
+use App\User;
+use Illuminate\Contracts\View\Factory;
+use Illuminate\View\View;
+
+class VerifyRegisterController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    /**
+     * Verify registration link with time and user database,
+     * if the user exists. If everything checks out, the user's
+     * account will be activated.
+     *
+     * @param $id string hash of created user
+     * @return Factory|View
+     */
+    public function verifyUser($id)
+    {
+        $userV = User::where('register_hash', $id)->get();
+        $text = "";
+        if(!$userV->isEmpty())
+        {
+            $created = $userV[0]->created_at;
+            $now = date('Y-m-d h:i:s');
+            $interval = $created->diff($now);
+
+            if($interval->d >= 2)
+            {
+                $text = "Registration link expired!\n Need to create new account";
+                $userV[0]->delete();
+            }
+            else if(isset($userV[0]->email_verified_at))
+            {
+                $text = "Registration link already activated!";
+            }
+            else
+            {
+                $userV[0]->email_verified_at = date('Y-m-d h:i:s');
+                $userV[0]->save();
+                $text = "Registration of the user " . $userV[0]->name . " has been successful.";
+            }
+        }
+        else
+        {
+            $text = "The link is not valid!";
+        }
+        return view('verify.index', ['text' => $text]);
+    }
+}
diff --git a/app/Http/Kernel.php b/app/Http/Kernel.php
index c3640f3..5af7425 100644
--- a/app/Http/Kernel.php
+++ b/app/Http/Kernel.php
@@ -17,6 +17,8 @@ class Kernel extends HttpKernel
         \App\Http\Middleware\TrustProxies::class,
         \Fruitcake\Cors\HandleCors::class,
         \App\Http\Middleware\CheckForMaintenanceMode::class,
+        //\Illuminate\Session\Middleware\StartSession::class,
+        //\Illuminate\View\Middleware\ShareErrorsFromSession::class,
         \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
         \App\Http\Middleware\TrimStrings::class,
         \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
diff --git a/app/Mail/RegisterMail.php b/app/Mail/RegisterMail.php
new file mode 100644
index 0000000..cca8861
--- /dev/null
+++ b/app/Mail/RegisterMail.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Mail;
+
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Mail\Mailable;
+use Illuminate\Queue\SerializesModels;
+
+class RegisterMail extends Mailable
+{
+    use Queueable, SerializesModels;
+
+    public $stringHash;
+
+    /**
+     * Create a new message instance.
+     *
+     * @return void
+     */
+    public function __construct($stringH)
+    {
+        $this->stringHash = $stringH;
+    }
+
+    /**
+     * Build the message.
+     *
+     * @return $this
+     */
+    public function build()
+    {
+        return $this->markdown('email.register');
+    }
+}
diff --git a/app/User.php b/app/User.php
index da5cf4a..469eec2 100644
--- a/app/User.php
+++ b/app/User.php
@@ -20,7 +20,7 @@ class User extends Authenticatable
      * @var array
      */
     protected $fillable = [
-         'name', 'email', 'password'
+         'name', 'email', 'password', 'register_hash'
     ];
 
     /**
diff --git a/composer.json b/composer.json
index 381c5ba..468e98e 100644
--- a/composer.json
+++ b/composer.json
@@ -14,7 +14,8 @@
         "guzzlehttp/guzzle": "^6.3",
         "laravel/framework": "^7.0",
         "laravel/tinker": "^2.0",
-        "laravel/ui": "^2.0"
+        "laravel/ui": "^2.0",
+        "spatie/laravel-cookie-consent": "^2.12"
     },
     "require-dev": {
         "facade/ignition": "^2.0",
diff --git a/composer.lock b/composer.lock
index e293684..2c22fd4 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "f0dcbdc80776ca79d6311b8f92c5a4b5",
+    "content-hash": "f58cabd0613b5fb1c84929018285ce2e",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -1966,6 +1966,73 @@
             ],
             "time": "2020-02-21T04:36:14+00:00"
         },
+        {
+            "name": "spatie/laravel-cookie-consent",
+            "version": "2.12.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/spatie/laravel-cookie-consent.git",
+                "reference": "e455e6b45c68464ab8aad585ed51d1a098f967e4"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/spatie/laravel-cookie-consent/zipball/e455e6b45c68464ab8aad585ed51d1a098f967e4",
+                "reference": "e455e6b45c68464ab8aad585ed51d1a098f967e4",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/cookie": "~5.8.0|^6.0|^7.0",
+                "illuminate/support": "~5.8.0|^6.0|^7.0",
+                "illuminate/view": "~5.8.0|^6.0|^7.0",
+                "php": "^7.2"
+            },
+            "require-dev": {
+                "fzaninotto/faker": "~1.4",
+                "orchestra/testbench": "~3.8.0|^4.0|^5.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Spatie\\CookieConsent\\CookieConsentServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Spatie\\CookieConsent\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Freek Van der Herten",
+                    "email": "freek@spatie.be",
+                    "homepage": "https://spatie.be",
+                    "role": "Developer"
+                },
+                {
+                    "name": "Willem Van Bockstal",
+                    "email": "willem@spatie.be",
+                    "homepage": "https://spatie.be",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Make your Laravel app comply with the crazy EU cookie law",
+            "homepage": "https://github.com/spatie/cookie-consent",
+            "keywords": [
+                "comply",
+                "cookie",
+                "cookie-consent",
+                "eu",
+                "law",
+                "spatie"
+            ],
+            "time": "2020-05-14T16:57:04+00:00"
+        },
         {
             "name": "swiftmailer/swiftmailer",
             "version": "v6.2.3",
@@ -5506,6 +5573,5 @@
     "platform": {
         "php": "^7.2.5"
     },
-    "platform-dev": [],
-    "plugin-api-version": "1.1.0"
+    "platform-dev": []
 }
diff --git a/database/factories/ArtefactFactory.php b/database/factories/ArtefactFactory.php
index f074539..14366ea 100644
--- a/database/factories/ArtefactFactory.php
+++ b/database/factories/ArtefactFactory.php
@@ -10,7 +10,7 @@ use Illuminate\Database\Eloquent\Factory;
 
 $factory->define(Artefact::class, function ($faker) {
     return [
-        'name' => $faker->opera,
+        'name' => $faker->words($nb = 3, $asText = true),
         'author' => $faker->name,
         'made_in' => $faker->countryCode,
         'publisher' => $faker->company,
diff --git a/database/factories/UserFactory.php b/database/factories/UserFactory.php
index e9cbede..d0835e1 100644
--- a/database/factories/UserFactory.php
+++ b/database/factories/UserFactory.php
@@ -27,5 +27,6 @@ $factory->define(User::class, function (Faker $faker) {
         'remember_token' => Str::random(10),
         'created_at' => now(),
         'updated_at' => now(),
+        'register_hash' => Str::random(10),
     ];
 });
diff --git a/database/migrations/2020_04_06_000000_CreateUsersTable.php b/database/migrations/2020_04_06_000000_CreateUsersTable.php
index 89604d6..a7bdd89 100644
--- a/database/migrations/2020_04_06_000000_CreateUsersTable.php
+++ b/database/migrations/2020_04_06_000000_CreateUsersTable.php
@@ -23,6 +23,7 @@ class CreateUsersTable extends Migration
             $table->string('password');
             $table->rememberToken();
             $table->timestamps();
+            $table->string('register_hash');
         });
     }
 
diff --git a/database/seeds/DatabaseSeeder.php b/database/seeds/DatabaseSeeder.php
index d971dd6..bb769ec 100644
--- a/database/seeds/DatabaseSeeder.php
+++ b/database/seeds/DatabaseSeeder.php
@@ -21,6 +21,7 @@ class DatabaseSeeder extends Seeder
             'remember_token' => Str::random(10),
             'created_at' => now(),
             'updated_at' => now(),
+            'register_hash' => Str::random(10),
         ]);
 
         // Populate users
diff --git a/public/css/app.css b/public/css/app.css
index 2eb50e9..1570d5c 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -10885,26 +10885,36 @@ a.text-dark:focus {
 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%;
+  padding-top: 5.1rem;
+  /*.content {
+      position: relative;
+
+      //Circle style button
+      .btn-circle.rounded-circle {
+          padding: 6px 0px;
+          font-size: 16px;
+          text-align: center;
+      }
+      .btn-categories
+      {
+          position: absolute;
+          border-width: 5px;
+          background-color: $theme-color-five;
+          border-color: $theme-color-four;
+          color:$theme-color-four;
+          outline: none !important;
+          box-shadow: none !important;
+          font-weight: $font-weight-two;
+
+          &:active
+          {
+              background-color: $theme-color-three;
+              border-color: $theme-color-four;
+              outline: none !important;
+              box-shadow: none !important;
+              color:$theme-color-five;
+          }
+      }
   }*/
 }
 
@@ -10915,6 +10925,10 @@ body .head-title h1 {
   letter-spacing: 3px;
 }
 
+body .carousel {
+  margin-top: -5.1rem;
+}
+
 body .carousel .carousel-inner .museum-logo {
   display: flex;
   justify-content: center;
@@ -10924,9 +10938,13 @@ body .carousel .carousel-inner .museum-logo {
   z-index: 1;
 }
 
+body .carousel .carousel-inner .museum-logo img {
+  width: 7.5rem;
+}
+
 body .carousel .carousel-inner .social-logo {
   text-align: center;
-  justify-content: space-between;
+  justify-content: space-around;
   flex-wrap: nowrap;
   position: absolute;
   top: 25%;
@@ -10935,6 +10953,10 @@ body .carousel .carousel-inner .social-logo {
   z-index: 1;
 }
 
+body .carousel .carousel-inner .social-logo img {
+  width: 2.0625rem;
+}
+
 body .carousel .carousel-inner .carousel-button {
   bottom: 10%;
   left: 50%;
@@ -10953,15 +10975,12 @@ body .carousel .carousel-inner .carousel-item {
 body .carousel .carousel-caption {
   top: 50%;
   bottom: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
   transform: translateY(-50%);
   background-color: rgba(239, 218, 179, 0.5);
 }
 
-body .carousel .carousel-caption p {
-  font-size: 8pt;
-  color: #272727;
-}
-
 body .text {
   font-weight: 400;
   font-size: 8pt;
@@ -10998,6 +11017,12 @@ body .text-headline {
   color: #ead4b0;
 }
 
+body .text-headline-desktop {
+  font-weight: 600;
+  font-size: 24pt;
+  color: #ead4b0;
+}
+
 body .text-page {
   font-weight: 600;
   font-size: 7pt;
@@ -11023,14 +11048,37 @@ body .auth .card {
 
 body .auth .col-form-label {
   text-align: left;
-  padding-top: 0px;
-  padding-bottom: 0px;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 body .auth .form-control {
-  padding: 0px;
+  padding: 0;
   height: 17pt;
-  border-radius: 0%;
+  border-radius: 0;
+}
+
+body .auth .form-control:focus {
+  border-top-color: #272727;
+  border-left-color: #272727;
+  border-right-color: #272727;
+  border-bottom-color: 0.5pt #ffffff;
+  box-shadow: none;
+}
+
+body input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50px #272727 inset !important;
+  -webkit-text-fill-color: #ffffff;
+  background-color: #272727 !important;
+}
+
+body input:-webkit-autofill:active,
+body input:-webkit-autofill:focus,
+body input:-webkit-autofill:visited,
+body input:-webkit-autofill:hover {
+  -webkit-box-shadow: 0 0 0 50px #272727 inset !important;
+  -webkit-text-fill-color: #ffffff;
+  background-color: #272727 !important;
 }
 
 body .card-body {
@@ -11049,11 +11097,14 @@ body .form-control {
   color: #ffffff;
   box-shadow: none;
   font-size: 8pt;
+  outline: none;
 }
 
 body .form-control:active,
 body .form-control:focus,
-body .form-control:visited {
+body .form-control:visited,
+body .form-control:hover {
+  outline: none;
   background-color: #272727;
   margin-top: -1px;
   border-top-color: #272727;
@@ -11083,16 +11134,21 @@ body .button-square {
   color: #ffffff;
   border: 0.5pt solid #ffffff;
   border-radius: 0;
-  width: 6.5rem;
-  height: 2rem;
+  padding: 0.4675rem 2.475rem;
   font-weight: 400;
 }
 
 body .button-square:active,
 body .button-square:focus,
-body .button-square:visited {
+body .button-square:visited,
+body .button-square:hover {
   outline: none;
   box-shadow: none;
+  color: #ffffff;
+}
+
+body .button-square:hover {
+  color: #ead4b0;
 }
 
 body .pin-left:before {
@@ -11109,22 +11165,22 @@ body .pin-left:before {
 
 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%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 70%;
 }
 
 body .pin-left .text {
   margin-left: 0.5rem;
+  margin-bottom: 0.2rem;
 }
 
 body .pin-left p {
-  margin-top: 0pt;
-  margin-bottom: 0pt;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 body li {
@@ -11148,18 +11204,33 @@ body .button-image:before {
   background-repeat: no-repeat;
 }
 
+body .fav-cat-mybooks {
+  color: #ddd1b9;
+  text-align: center;
+  font-size: 1.9rem;
+}
+
+body .fav-cat-nofav {
+  text-align: center;
+  color: #efdab3;
+  background-color: #272727;
+  border-color: #efdab3;
+}
+
 body .artefacts-area h5,
 body .artefact-area h5 {
   color: #ddd1b9;
-  font-weight: 600;
-  line-height: 20pt;
-  font-size: 21pt;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  line-height: 0.9rem;
+  font-size: 1.1rem;
 }
 
 body .artefacts-area h6,
 body .artefact-area h6 {
   color: #ddd1b9;
-  font-size: 14pt;
+  font-size: 0.9rem;
   font-weight: 400;
 }
 
@@ -11178,26 +11249,31 @@ body .artefact-area .card {
 body .artefacts-area .left_panel_info,
 body .artefact-area .left_panel_info {
   margin-top: 15px;
-  margin-left: -10px;
-  max-width: 250px;
+  max-width: 70%;
 }
 
 body .artefacts-area .right_panel_info,
 body .artefact-area .right_panel_info {
   margin-top: 15px;
-  margin-right: -15px;
+}
+
+body .artefacts-area .likes_text,
+body .artefact-area .likes_text {
+  text-align: center;
 }
 
 body .artefacts-area .card-cus-bottom,
 body .artefact-area .card-cus-bottom {
   background-color: #272727;
+  padding-right: 0;
+  padding-left: 0;
 }
 
 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;
+  background-image: url(/images/Button_Info.svg?92f55a6c483b585543ec80f3fd3461de);
+  width: 8vw;
+  height: 8vw;
 }
 
 body .artefacts-area .inter_like,
@@ -11207,16 +11283,35 @@ body .artefact-area .inter_like {
 
 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;
+  background-image: url(/images/Heart_Empty.svg?974f069a126736e569df0f463d68c026);
+  width: 8vw;
+  height: 8vw;
 }
 
 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;
+  background-image: url(/images/Heart_Filled.svg?e5b962dc0fd67a2042277b9826016c9c);
+  width: 8vw;
+  height: 8vw;
+}
+
+body .artefacts-area .charts .inter_info,
+body .artefacts-area .charts .inter_like,
+body .artefacts-area .charts .inter_like_filled,
+body .artefact-area .charts .inter_info,
+body .artefact-area .charts .inter_like,
+body .artefact-area .charts .inter_like_filled {
+  display: inline;
+}
+
+body .artefacts-area .charts .inter_info:before,
+body .artefacts-area .charts .inter_like:before,
+body .artefacts-area .charts .inter_like_filled:before,
+body .artefact-area .charts .inter_info:before,
+body .artefact-area .charts .inter_like:before,
+body .artefact-area .charts .inter_like_filled:before {
+  width: 3rem;
+  height: 3rem;
 }
 
 body .artefacts-area .inter_info,
@@ -11278,9 +11373,15 @@ body .artefact-area .inter_like {
 }
 
 body .artefact-area .inter_like:before {
-  background-image: url(/images/Hearth_Empty_Small.png?252b4c7a69920aa18f2fc75a93aaa90a);
-  width: 25px;
-  height: 19px;
+  background-image: url(/images/Heart_Empty.svg?974f069a126736e569df0f463d68c026);
+  width: 1.563rem;
+  height: 1.25rem;
+}
+
+body .artefact-area .inter_like_filled:before {
+  background-image: url(/images/Heart_Filled.svg?e5b962dc0fd67a2042277b9826016c9c);
+  width: 1.563rem;
+  height: 1.25rem;
 }
 
 body .artefact-area .inter_info {
@@ -11288,9 +11389,9 @@ body .artefact-area .inter_info {
 }
 
 body .artefact-area .inter_info:before {
-  background-image: url(/images/Button_Info_Small.png?9bc35ac07e9ec5a6b75d9af964e80512);
-  width: 29px;
-  height: 29px;
+  background-image: url(/images/Button_Info.svg?92f55a6c483b585543ec80f3fd3461de);
+  width: 1.875rem;
+  height: 1.875rem;
 }
 
 body .artefact-area .artefact-likes {
@@ -11300,6 +11401,7 @@ body .artefact-area .artefact-likes {
 }
 
 body .metadata-area h2 {
+  color: #ddd1b9;
   font-weight: 600;
   font-size: 12pt;
 }
@@ -11320,19 +11422,19 @@ body .metadata-area .pin-horizontal {
   color: #ddd1b9;
   border-bottom: 0.042rem solid #ddd1b9;
   display: inline-block;
-  margin: 3.35rem 3.125rem 0 0;
+  margin: 2.75rem 3.125rem 0 0;
 }
 
-body .metadata-area .pin-horizontal:before {
+body .metadata-area .pin-horizontal:after {
   content: "";
   background-color: #ddd1b9;
   position: relative;
   height: 0.5rem;
   width: 0.5rem;
   border-radius: 50%;
-  display: inline-block;
-  top: 1.5rem;
-  left: 50vw;
+  display: block;
+  margin-left: auto;
+  top: 0.25rem;
 }
 
 body .metadata-area .pin-horizontal .metadata {
@@ -11341,7 +11443,12 @@ body .metadata-area .pin-horizontal .metadata {
   align-items: baseline;
 }
 
-body .metadata-area .pin-horizontal .metadata span {
+body .metadata-area .pin-horizontal .metadata a {
+  color: #ddd1b9;
+  text-decoration: none;
+}
+
+body .metadata-area .pin-horizontal .metadata a span {
   font-weight: 600;
 }
 
@@ -11362,11 +11469,15 @@ body .metadata-area .white-pin {
   border-bottom: 0.042rem solid #ffffff;
 }
 
-body .metadata-area .white-pin:before {
+body .metadata-area .white-pin:after {
   content: "";
   background-color: #ffffff;
 }
 
+body .metadata-area .white-pin .metadata a {
+  color: #ffffff;
+}
+
 body .metadata-area .white-pin .metadata .arrow-down {
   border-top: 0.25rem solid #ffffff;
 }
@@ -11394,10 +11505,27 @@ body .metadata-area .metadata-text .artefact-info .artefact-author {
   font-size: 7pt;
 }
 
+body .metadata-area .metadata-text .artefact-info .inter_like:before {
+  background-image: url(/images/Heart_Empty.svg?974f069a126736e569df0f463d68c026);
+  width: 3.125rem;
+  height: 3.125rem;
+  margin-right: 0;
+}
+
+body .metadata-area .metadata-text .artefact-info .inter_like:hover,
+body .metadata-area .metadata-text .artefact-info .inter_like:focus,
+body .metadata-area .metadata-text .artefact-info .inter_like:active {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
 body .metadata-area .metadata-text .artefact-info .inter_like_filled:before {
-  background-image: url(/images/Hearth_Filled_50.png?77bb26c3aba063c00aba1a2f07059d71);
-  width: 50px;
-  height: 50px;
+  background-image: url(/images/Heart_Filled.svg?e5b962dc0fd67a2042277b9826016c9c);
+  width: 3.125rem;
+  height: 3.125rem;
+  margin-right: 0;
 }
 
 body .metadata-area .metadata-text .artefact-info .inter_like_filled:hover,
@@ -11409,37 +11537,44 @@ body .metadata-area .metadata-text .artefact-info .inter_like_filled:active {
   box-shadow: none !important;
 }
 
-body .content {
-  position: relative;
+body .modal {
+  font-weight: 400;
+  color: #ddd1b9;
+  font-size: 8pt;
 }
 
-body .content .btn-circle.rounded-circle {
-  padding: 6px 0px;
-  font-size: 16px;
-  text-align: center;
+body .modal .modal-header {
+  border-bottom: 1px solid #ddd1b9;
 }
 
-body .content .btn-categories {
-  position: absolute;
-  border-width: 5px;
+body .modal .modal-header .close {
+  color: #ddd1b9;
+  text-shadow: none;
+}
+
+body .modal .modal-content {
   background-color: #272727;
-  border-color: #ead4b0;
-  color: #ead4b0;
-  outline: none !important;
-  box-shadow: none !important;
-  font-weight: 600;
 }
 
-body .content .btn-categories:active {
-  background-color: #efdab3;
-  border-color: #ead4b0;
-  outline: none !important;
-  box-shadow: none !important;
+body .modal .modal-footer {
+  border-top: 1px solid #ddd1b9;
+}
+
+body .modal .modal-footer .btn {
+  background-color: #ddd1b9;
   color: #272727;
 }
 
-body .cat-col-md-2 {
-  margin: 2%;
+body .image-modal .close {
+  font-size: 24pt;
+  color: #ddd1b9;
+  text-shadow: none;
+  position: absolute;
+  top: 1rem;
+  right: 0.125rem;
+  opacity: 1;
+  cursor: pointer;
+  pointer-events: initial;
 }
 
 body .btn.btn-dark.cat-tile {
@@ -11452,10 +11587,10 @@ body .btn.btn-dark.cat-tile {
   text-align: center;
   outline: none !important;
   box-shadow: none !important;
-  font-size: 8mm;
-  word-wrap: break-word;
-  height: 40mm;
-  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 22pt;
+  padding: 4rem 1rem;
 }
 
 body .btn.btn-dark.cat-tile:active,
@@ -11467,39 +11602,89 @@ body .btn.btn-dark.cat-tile:focus {
   color: #272727;
 }
 
+body .btn-dark:not(:disabled):not(.disabled).active {
+  background-color: #ead4b0;
+  color: white;
+  border-color: #272727;
+}
+
 body .category-h2 {
   color: #ead4b0;
 }
 
-.arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-  margin: 2rem;
-  cursor: pointer;
-  border: 0.59055rem solid transparent;
+body .head-title.text-center.cat-main-topic h1 {
+  font-size: 1.9rem;
+}
+
+body .cat-main-menu {
+  font-size: 1.75rem;
+  text-align: center;
+  margin-bottom: 30pt;
+}
+
+body .cat-main-menu a,
+body .cat-main-menu a:visited {
+  color: #ddd1b9;
+  text-decoration: none;
+}
+
+body .cat-main-menu a:hover {
+  color: #ead4b0;
 }
 
-.arrow-left {
-  margin-left: 80%;
-  border-right: 0.59055rem solid #272727;
-  background-color: #ead4b0 !important;
+body .cat-wrapper {
+  margin: auto;
+  display: block;
 }
 
-.arrow-right {
-  border-left: 0.59055rem solid #ead4b0;
+body .btn.button-square.cat-enter-butt {
+  border-radius: 0;
+  bottom: 5%;
   position: fixed;
-  z-index: 1;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+body .btn.button-square.cat-enter-butt:active,
+body .btn.button-square.cat-enter-butt:focus,
+body .btn.button-square.cat-enter-butt:visited,
+body .btn.button-square.cat-enter-butt:hover {
+  outline: none;
+  box-shadow: none;
+  color: #ffffff;
+}
+
+body .btn.button-square.cat-enter-butt:hover {
+  color: #ead4b0;
+}
+
+body .ver-text {
+  margin-top: 20pt;
+}
+
+body .ver-text h2 {
+  text-align: center;
+  color: #ddd1b9;
+}
+
+.top-bar {
+  background-color: #272727;
+  min-height: 5rem;
+  position: fixed;
+  width: 100%;
   top: 0;
-  left: 0;
+  z-index: 2;
+}
+
+.top-bar .shadow {
+  box-shadow: none;
 }
 
 .sidenav {
   height: 100%;
   width: 0;
-  width: 250px;
   position: fixed;
-  z-index: 1;
+  z-index: 4;
   top: 0;
   left: 0;
   background-color: #ead4b0;
@@ -11519,25 +11704,382 @@ body .category-h2 {
   background-color: #ffffff;
 }
 
+.sidenav a:active,
+.sidenav a:focus,
+.sidenav a .active {
+  color: #ffffff;
+  background-color: #ead4b0;
+}
+
+.bar-desktop {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  min-width: 100%;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.down {
+  position: absolute;
+  z-index: 5;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  margin-bottom: 3rem;
+}
+
+.menu-item {
+  padding: 0.25rem 1rem;
+  width: 100%;
+  border: 0;
+}
+
+.menu-item:active,
+.menu-item.active,
+.menu-item:focus {
+  color: #ffffff;
+  border: none;
+  outline: none;
+  box-shadow: none;
+}
+
+.logo-kaplicky {
+  text-align: center;
+  display: none;
+}
+
+.logo-kaplicky:active,
+.logo-kaplicky.active,
+.logo-kaplicky:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.navbar {
+  padding: unset;
+}
+
+.vertical-center {
+  margin-top: -5.1rem;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+}
+
+.error {
+  color: #ffffff;
+  font-size: xx-large;
+  display: block;
+  text-align: center;
+}
+
+.al {
+  margin-bottom: 3rem;
+}
+
+.js-cookie-consent {
+  position: fixed;
+  z-index: 9999;
+  text-align: center;
+  width: 100%;
+  bottom: 0px;
+  padding: 10px;
+  background: #ead4b0;
+}
+
+.js-cookie-consent-agree {
+  font-size: 8pt;
+  background-color: #272727;
+  color: #ffffff;
+  border: 0.5pt solid #ffffff;
+  border-radius: 0;
+  padding: 0.5rem 2rem;
+  font-weight: 400;
+}
+
+.js-cookie-consent-agree:active,
+.js-cookie-consent-agree:focus,
+.js-cookie-consent-agree:visited,
+.js-cookie-consent-agree:hover {
+  outline: none;
+  box-shadow: none;
+  color: #ffffff;
+}
+
+.js-cookie-consent-agree:hover {
+  color: #ead4b0;
+}
+
+.cookie-consent__message {
+  padding: 1rem;
+  display: inline-block;
+}
+
+.books-component .book-area .card-cus-bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.books-component .book-area .card-cus-bottom .book-arrow:after {
+  content: "";
+  bottom: 3rem;
+  position: absolute;
+  border-top: 1.25rem solid transparent;
+  border-bottom: 1.25rem solid transparent;
+}
+
+.books-component .book-area .card-cus-bottom .book-arrow-left:after {
+  left: 25%;
+  border-right: 1.25rem solid #ddd1b9;
+}
+
+.books-component .book-area .card-cus-bottom .book-arrow-right:after {
+  right: 25%;
+  border-left: 1.25rem solid #ddd1b9;
+}
+
+.books-component .book-area .card-cus-bottom .likes {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.books-component .book-area .card-cus-bottom .likes .inter_like,
+.books-component .book-area .card-cus-bottom .likes .inter_like_filled {
+  margin: 0 auto;
+}
+
+.books-component .book-area .card-cus-bottom .likes .inter_like:before,
+.books-component .book-area .card-cus-bottom .likes .inter_like_filled:before {
+  margin-right: 0;
+  height: 5rem;
+  width: 5rem;
+}
+
+.books-component .book-area .card-cus-bottom .likes .artefact-likes {
+  font-size: 12pt;
+  padding: 0;
+}
+
+.books-component .info-area {
+  color: #ddd1b9;
+  margin-top: 0.625rem;
+  padding-left: 5rem;
+  /* could be use to hide overflowing notes
+  max-height: 80vh;
+  overflow-y: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+      width: 0 !important
+  } */
+}
+
+.books-component .info-area h3 {
+  font-weight: 600;
+}
+
+.books-component .info-area .switch-view {
+  float: right;
+  color: #ffffff;
+  cursor: pointer;
+}
+
+.books-component .info-area .artefact-notes {
+  display: none;
+  color: #ddd1b9;
+}
+
+.books-component .info-area .artefact-notes .pin-horizontal {
+  border-bottom: 0.042rem solid #ddd1b9;
+  display: inline-block;
+  margin: 2.75rem 2rem 0 0;
+}
+
+.books-component .info-area .artefact-notes .pin-horizontal:after {
+  content: "";
+  background-color: #ddd1b9;
+  position: relative;
+  height: 0.5rem;
+  width: 0.5rem;
+  border-radius: 50%;
+  display: block;
+  margin-left: auto;
+  top: 0.25rem;
+}
+
+.books-component .info-area .artefact-notes .pin-horizontal .metadata {
+  position: relative;
+  display: flex;
+  align-items: baseline;
+}
+
+.books-component .info-area .artefact-notes .pin-horizontal .metadata span {
+  font-size: 12pt;
+  font-weight: 600;
+}
+
+.books-component .info-area .artefact-notes .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;
+}
+
+.books-component .info-area .artefact-notes .white-pin {
+  color: #ffffff;
+  border-bottom: 0.042rem solid #ffffff;
+}
+
+.books-component .info-area .artefact-notes .white-pin:after {
+  content: "";
+  background-color: #ffffff;
+}
+
+.books-component .info-area .artefact-notes .white-pin .metadata .arrow-down {
+  border-top: 0.25rem solid #ffffff;
+}
+
+.books-component .info-area .artefact-notes .metadata-text {
+  font-size: 12pt;
+  color: #ffffff;
+  padding-top: 10px;
+  padding-left: 25px;
+  padding-right: 25px;
+}
+
+.books-component .info-area .artefact-notes .metadata-text .inter_like:before {
+  background-image: url(/images/Heart_Empty.svg?974f069a126736e569df0f463d68c026);
+  width: 5rem;
+  height: 5rem;
+}
+
+.books-component .info-area .artefact-notes .metadata-text .inter_like:hover,
+.books-component .info-area .artefact-notes .metadata-text .inter_like:focus,
+.books-component .info-area .artefact-notes .metadata-text .inter_like:active {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.books-component .info-area .artefact-notes .metadata-text .inter_like_filled:before {
+  background-image: url(/images/Heart_Filled.svg?e5b962dc0fd67a2042277b9826016c9c);
+  width: 5rem;
+  height: 5rem;
+}
+
+.books-component .info-area .artefact-notes .metadata-text .inter_like_filled:hover,
+.books-component .info-area .artefact-notes .metadata-text .inter_like_filled:focus,
+.books-component .info-area .artefact-notes .metadata-text .inter_like_filled:active {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.books-component .info-area .inter_info {
+  float: right;
+  color: #ffffff;
+  padding-right: 1rem;
+}
+
+.books-component .info-area .inter_info:before {
+  background-image: url(/images/Button_Info_White.svg?eeeba6da4f02d7b457f5ed048a356fc6);
+  width: 1.875rem;
+  height: 1.875rem;
+}
+
+.books-component .info-area .inter_info:hover,
+.books-component .info-area .inter_info:focus,
+.books-component .info-area .inter_info:active {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+@media (max-width: 610px) {
+  .js-cookie-consent-agree {
+    margin-bottom: 1rem;
+  }
+}
+
 @media screen and (max-height: 450px) {
   .sidenav a {
     font-size: 18px;
   }
+
+  .down {
+    bottom: unset;
+    margin-bottom: unset;
+  }
 }
 
-@media (max-width: 990px) {
-  body {
-    /*.pin-left {
-        margin-left: -15rem;
-        margin-top: 11rem;
-    }*/
+@media (min-width: 1300px) {
+  .bar-desktop {
+    margin-left: 8vw;
+    margin-right: 8vw;
+    min-width: 84vw;
   }
 }
 
 @media (max-width: 770px) {
-  body .pin-left {
-    margin-left: -33vw;
-    margin-top: 12rem;
+  .logo-kaplicky {
+    margin: 0 auto;
+    display: block;
+  }
+
+  .arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin: 2rem;
+    cursor: pointer;
+    border: 0.59055rem solid transparent;
+  }
+
+  .arrow:active,
+  .arrow.active,
+  .arrow:focus {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .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: 3;
+    top: 0;
+    left: 0;
+  }
+
+  .bar-desktop {
+    display: none;
+  }
+
+  .menu-item:active,
+  .menu-item.active {
+    color: #272727;
+    background-color: #ffffff;
+  }
+
+  .books-component .info-area {
+    padding-left: 1.5625rem;
   }
 }
 
@@ -11552,21 +12094,23 @@ body .category-h2 {
     white-space: nowrap;
   }
 
-  .btn-circle.rounded-circle.btn-sm,
-  .btn-group-sm > .btn-circle.rounded-circle.btn {
-    width: 90px;
-    height: 90px;
+  /*.btn-circle.rounded-circle.btn-sm
+  {
+      width: 90px;
+      height: 90px;
   }
 
-  .btn-circle.rounded-circle.btn-dm {
-    width: 130px;
-    height: 130px;
+  .btn-circle.rounded-circle.btn-dm
+  {
+      width: 130px;
+      height: 130px;
   }
 
-  .btn-circle.rounded-circle.btn-xl {
-    width: 180px;
-    height: 180px;
-  }
+  .btn-circle.rounded-circle.btn-xl
+  {
+      width: 180px;
+      height: 180px;
+  }*/
 
   body .carousel .carousel-inner .social-logo {
     padding-left: 30px;
@@ -11580,3 +12124,123 @@ body .category-h2 {
   }
 }
 
+@media (min-width: 1024px) {
+  body .kaplicky {
+    text-align: left !important;
+    font-size: 30pt;
+    line-height: 24pt;
+    margin-bottom: 3rem;
+  }
+
+  body .pin-left:before {
+    height: 1.125rem;
+    width: 1.125rem;
+    top: -1.125rem;
+    left: -0.56rem;
+  }
+
+  body .pin-left {
+    left: 75%;
+    transform: translateX(-50%);
+    width: 70%;
+  }
+
+  body .text {
+    text-align: left;
+    font-size: 18pt;
+    line-height: 26pt;
+  }
+
+  body .text2 {
+    text-align: left;
+    font-size: 18pt;
+    line-height: 26pt;
+  }
+
+  body .carousel .carousel-inner .social-logo {
+    justify-content: center;
+    top: 90%;
+  }
+
+  body .carousel .carousel-inner .social-logo .logo {
+    margin-left: 10rem;
+  }
+
+  body .carousel .carousel-inner .social-logo .logo img {
+    width: 3.125rem;
+  }
+
+  body .carousel .carousel-inner .social-logo .logo:first-child {
+    margin-left: 0;
+  }
+
+  body .carousel .carousel-inner .carousel-button {
+    bottom: 15%;
+  }
+
+  body .carousel .carousel-caption {
+    padding: 3.75rem 6.25rem 5em;
+  }
+
+  body .carousel .carousel-caption h2 {
+    margin-bottom: 1rem;
+  }
+
+  body .button-square {
+    font-size: 18pt;
+    padding: 0.28125rem 3.7rem;
+  }
+
+  body .metadata-area .pin-horizontal {
+    margin: 5rem 3.125rem 0 0;
+  }
+
+  body .metadata-area .pin-horizontal .metadata {
+    margin-right: 0.5rem;
+  }
+
+  body .metadata-area .pin-horizontal .metadata .arrow-down {
+    border-left: 0.5rem solid transparent;
+    border-right: 0.5rem solid transparent;
+    border-top: 0.5rem solid #ddd1b9;
+  }
+
+  body .metadata-area .pin-horizontal .metadata a span {
+    font-size: 16pt;
+  }
+
+  body .metadata-area .pin-horizontal:after {
+    height: 0.75rem;
+    width: 0.75rem;
+    top: 0.375rem;
+  }
+
+  body .metadata-area .white-pin .metadata .arrow-down {
+    border-top: 0.5rem solid #ffffff;
+  }
+
+  body .metadata-area .metadata-text {
+    font-size: 19pt;
+    max-width: 50%;
+  }
+
+  body .metadata-area .metadata-text .artefact-info .artefact-name {
+    font-size: 16pt;
+  }
+
+  body .metadata-area .metadata-text .artefact-info .artefact-author {
+    font-size: 12pt;
+  }
+
+  body .metadata-area .metadata-text .artefact-info .inter_like_filled:before {
+    width: 5rem;
+    height: 5rem;
+  }
+}
+
+@media (min-width: 1575px) {
+  body .carousel .carousel-inner .carousel-button {
+    bottom: 20%;
+  }
+}
+
diff --git a/public/images/Button_Info.svg b/public/images/Button_Info.svg
new file mode 100644
index 0000000..432c2b1
--- /dev/null
+++ b/public/images/Button_Info.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.17 14.17"><defs><style>.cls-1{fill:#ead4b0;}.cls-2{fill:#1d1d1b;}</style></defs><title>Datový zdroj 1</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><circle class="cls-1" cx="7.09" cy="7.09" r="7.09"/><path class="cls-2" d="M6.47,4.1a.74.74,0,0,1,.24-.56.74.74,0,0,1,.56-.24.76.76,0,0,1,.56.24.73.73,0,0,1,.23.56.79.79,0,0,1-.79.79.73.73,0,0,1-.56-.23A.76.76,0,0,1,6.47,4.1Zm.11,1.4H8V9.93H6.58Z"/></g></g></svg>
\ No newline at end of file
diff --git a/public/images/Button_Info_White.svg b/public/images/Button_Info_White.svg
new file mode 100644
index 0000000..56a7620
--- /dev/null
+++ b/public/images/Button_Info_White.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.17 14.17"><defs><style>.cls-1{fill:#ffffff;}.cls-2{fill:#1d1d1b;}</style></defs><title>Datový zdroj 1</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><circle class="cls-1" cx="7.09" cy="7.09" r="7.09"/><path class="cls-2" d="M6.47,4.1a.74.74,0,0,1,.24-.56.74.74,0,0,1,.56-.24.76.76,0,0,1,.56.24.73.73,0,0,1,.23.56.79.79,0,0,1-.79.79.73.73,0,0,1-.56-.23A.76.76,0,0,1,6.47,4.1Zm.11,1.4H8V9.93H6.58Z"/></g></g></svg>
diff --git a/public/images/Heart_Empty.svg b/public/images/Heart_Empty.svg
new file mode 100644
index 0000000..bacaab8
--- /dev/null
+++ b/public/images/Heart_Empty.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.14 23.15"><defs><style>.cls-1{fill:none;stroke:#f7dbc0;stroke-miterlimit:10;}</style></defs><title>Datový zdroj 1</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M15.07,22.53s12.44-9.37,13.31-10.78c2.15-3.54,2-9.09-4-10.93-5.44-1.68-9.3,3.84-9.3,3.84S11.21-.86,5.77.82c-6,1.84-6.16,7.39-4,10.93C2.63,13.16,15.07,22.53,15.07,22.53Z"/></g></g></svg>
\ No newline at end of file
diff --git a/public/images/Heart_Filled.svg b/public/images/Heart_Filled.svg
new file mode 100644
index 0000000..36ca64b
--- /dev/null
+++ b/public/images/Heart_Filled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.14 22.03"><defs><style>.cls-1{fill:#f7dbc0;}</style></defs><title>Datový zdroj 2</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M14.57,22S27,12.66,27.88,11.25c2.15-3.54,2-9.09-4-10.93-5.44-1.68-9.3,3.84-9.3,3.84S10.71-1.36,5.27.32c-6,1.84-6.16,7.39-4,10.93C2.13,12.66,14.57,22,14.57,22Z"/></g></g></svg>
\ No newline at end of file
diff --git a/public/images/icons/facebook.svg b/public/images/icons/facebook.svg
new file mode 100644
index 0000000..43bc877
--- /dev/null
+++ b/public/images/icons/facebook.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#1c1c1a;}.cls-2{font-size:9px;fill:#c5c5c5;font-family:Avenir-Heavy, Avenir;font-weight:800;}</style></defs><title>Datový zdroj 1</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><circle class="cls-1" cx="8" cy="8" r="8"/><text class="cls-2" transform="translate(5.34 11.39)">f</text></g></g></svg>
\ No newline at end of file
diff --git a/public/images/icons/instagram.svg b/public/images/icons/instagram.svg
new file mode 100644
index 0000000..36f04a7
--- /dev/null
+++ b/public/images/icons/instagram.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#1c1c1a;}.cls-2{fill:none;stroke:#c5c5c5;stroke-miterlimit:10;stroke-width:0.5px;}.cls-3{fill:#c5c5c5;}</style></defs><title>Datový zdroj 2</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><circle class="cls-1" cx="8" cy="8" r="8"/><path class="cls-2" d="M9.86,3.42H6.36A3.28,3.28,0,0,0,3,6.57V9.85A3.28,3.28,0,0,0,6.36,13h3.5a3.28,3.28,0,0,0,3.38-3.15V6.57A3.28,3.28,0,0,0,9.86,3.42ZM8.12,10.81A2.74,2.74,0,0,1,5.3,8.17,2.74,2.74,0,0,1,8.12,5.54,2.74,2.74,0,0,1,11,8.17,2.74,2.74,0,0,1,8.12,10.81Z"/><circle class="cls-3" cx="11.5" cy="5.5" r="0.5"/></g></g></svg>
\ No newline at end of file
diff --git a/public/images/icons/upm-logo.svg b/public/images/icons/upm-logo.svg
new file mode 100644
index 0000000..9d76131
--- /dev/null
+++ b/public/images/icons/upm-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.63 33.54"><defs><style>.cls-1{fill:#1d1d1b;}.cls-1,.cls-2{fill-rule:evenodd;}.cls-2{fill:#b5ada5;}</style></defs><title>Datový zdroj 4</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M12.7,24.5a7.07,7.07,0,0,1-5.78,2.55C3,27.05,0,24.5,0,20.42V8.07H7V18.9c.08,1.82.51,3.73,2.67,3.73,3.44,0,3-3.78,3-4V8.07h7V21.78c0,1.62,0,2.72.21,4.72H12.78Z"/><path class="cls-2" d="M32.1,0C30.66,4.88,29,9.89,29,15s1.66,10.11,3.1,15H27.6c-1.91-4.88-4-9.68-4-15s2.12-10.15,4-15Z"/><path class="cls-2" d="M44.33,7.94A7.51,7.51,0,0,1,47,7.52c5.47,0,7.85,4.67,7.85,9.51,0,5.39-2.72,10-8.62,10a5.68,5.68,0,0,1-1.91-.34V23c2.93,0,3.35-3.39,3.35-5.73s-.42-5.73-3.35-5.73Zm-3.4,2.72H41a6.38,6.38,0,0,1,3.31-2.72v3.61h0c-2.93,0-3.4,3.4-3.4,5.73S41.4,23,44.33,23h0v3.7A7.47,7.47,0,0,1,41,24.29h-.09v9.25H34V8.07h7Z"/><path class="cls-2" d="M55.84,30c1.48-4.88,3.1-9.89,3-15s-1.61-10.15-3-15h4.54c1.91,4.88,4,9.68,4,15s-2.12,10.11-4,15Z"/><path class="cls-1" d="M75.12,11.13h0c1.31-2.55,3.73-3.49,6.49-3.49,2.21,0,4.76,1.15,5.52,3.4a7.61,7.61,0,0,1,6.54-3.52c4,0,6.92,2.59,6.92,6.66V26.5h-7V15.67c0-1.78-.51-3.74-2.68-3.74-3.44,0-3,3.78-3,4V26.5H81V15.67c-.09-1.78-.51-3.74-2.68-3.74-3.44,0-3,3.78-3,4V26.5h-7V12.82a39.23,39.23,0,0,0-.25-4.75H75Z"/></g></g></svg>
\ No newline at end of file
diff --git a/public/images/icons/wikipedia.svg b/public/images/icons/wikipedia.svg
new file mode 100644
index 0000000..268e895
--- /dev/null
+++ b/public/images/icons/wikipedia.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#1c1c1a;}.cls-2{font-size:8px;fill:#c5c5c5;font-family:Avenir-Heavy, Avenir;font-weight:800;}</style></defs><title>Datový zdroj 3</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><circle class="cls-1" cx="8" cy="8" r="8"/><text class="cls-2" transform="translate(3.96 11.2)">W</text></g></g></svg>
\ No newline at end of file
diff --git a/public/js/app.js b/public/js/app.js
index fb62752..1f5a858 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -37057,11 +37057,21 @@ __webpack_require__(/*! ./bootstrap */ "./resources/js/bootstrap.js"); // Center
 
 $(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);
-  });
+
+  if (display_width < 720) {
+    $(".metadata").each(function () {
+      var metadata = $(this);
+      var width = metadata.width();
+      metadata.css("margin-left", display_width / 2 - width);
+    });
+  } else {
+    display_width = $(".metadata-area").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.svg b/resources/images/interface/Button_Info.svg
new file mode 100644
index 0000000..432c2b1
--- /dev/null
+++ b/resources/images/interface/Button_Info.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.17 14.17"><defs><style>.cls-1{fill:#ead4b0;}.cls-2{fill:#1d1d1b;}</style></defs><title>Datový zdroj 1</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><circle class="cls-1" cx="7.09" cy="7.09" r="7.09"/><path class="cls-2" d="M6.47,4.1a.74.74,0,0,1,.24-.56.74.74,0,0,1,.56-.24.76.76,0,0,1,.56.24.73.73,0,0,1,.23.56.79.79,0,0,1-.79.79.73.73,0,0,1-.56-.23A.76.76,0,0,1,6.47,4.1Zm.11,1.4H8V9.93H6.58Z"/></g></g></svg>
\ No newline at end of file
diff --git a/resources/images/interface/Button_Info_White.svg b/resources/images/interface/Button_Info_White.svg
new file mode 100644
index 0000000..56a7620
--- /dev/null
+++ b/resources/images/interface/Button_Info_White.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.17 14.17"><defs><style>.cls-1{fill:#ffffff;}.cls-2{fill:#1d1d1b;}</style></defs><title>Datový zdroj 1</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><circle class="cls-1" cx="7.09" cy="7.09" r="7.09"/><path class="cls-2" d="M6.47,4.1a.74.74,0,0,1,.24-.56.74.74,0,0,1,.56-.24.76.76,0,0,1,.56.24.73.73,0,0,1,.23.56.79.79,0,0,1-.79.79.73.73,0,0,1-.56-.23A.76.76,0,0,1,6.47,4.1Zm.11,1.4H8V9.93H6.58Z"/></g></g></svg>
diff --git a/resources/images/interface/Heart_Empty.svg b/resources/images/interface/Heart_Empty.svg
new file mode 100644
index 0000000..bacaab8
--- /dev/null
+++ b/resources/images/interface/Heart_Empty.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.14 23.15"><defs><style>.cls-1{fill:none;stroke:#f7dbc0;stroke-miterlimit:10;}</style></defs><title>Datový zdroj 1</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M15.07,22.53s12.44-9.37,13.31-10.78c2.15-3.54,2-9.09-4-10.93-5.44-1.68-9.3,3.84-9.3,3.84S11.21-.86,5.77.82c-6,1.84-6.16,7.39-4,10.93C2.63,13.16,15.07,22.53,15.07,22.53Z"/></g></g></svg>
\ No newline at end of file
diff --git a/resources/images/interface/Heart_Filled.svg b/resources/images/interface/Heart_Filled.svg
new file mode 100644
index 0000000..36ca64b
--- /dev/null
+++ b/resources/images/interface/Heart_Filled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.14 22.03"><defs><style>.cls-1{fill:#f7dbc0;}</style></defs><title>Datový zdroj 2</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M14.57,22S27,12.66,27.88,11.25c2.15-3.54,2-9.09-4-10.93-5.44-1.68-9.3,3.84-9.3,3.84S10.71-1.36,5.27.32c-6,1.84-6.16,7.39-4,10.93C2.13,12.66,14.57,22,14.57,22Z"/></g></g></svg>
\ No newline at end of file
diff --git a/resources/js/app.js b/resources/js/app.js
index d6dd869..0923ec8 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -4,11 +4,24 @@ require('./bootstrap');
 $(document).ready(function () {
     let display_width = $(window).width();
 
-    $(".metadata").each(function() {
-        let metadata = $(this);
-        let width = metadata.width();
+    if (display_width < 720)
+    {
+        $(".metadata").each(function() {
+            let metadata = $(this);
+            let width = metadata.width();
 
-        metadata.css("margin-left", (display_width / 2)  - width);
-    });
+            metadata.css("margin-left", (display_width / 2)  - width);
+        });
+    }
+    else
+    {
+        display_width = $(".metadata-area").width();
 
+        $(".metadata").each(function() {
+            let metadata = $(this);
+            let width = metadata.width();
+
+            metadata.css("margin-left", (display_width / 2)  - width);
+        });
+    }
 });
diff --git a/resources/lang/cs/general.php b/resources/lang/cs/general.php
new file mode 100644
index 0000000..c5f72ef
--- /dev/null
+++ b/resources/lang/cs/general.php
@@ -0,0 +1,24 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Login Page Language Lines
+    |--------------------------------------------------------------------------
+    */
+
+    'email' => 'e-mail',
+    'password' => 'heslo',
+    'join' => 'vstoupit',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Error Page Language Lines
+    |--------------------------------------------------------------------------
+    */
+
+    'not_found' => 'Stránka nenalezena',
+    'server_error' => 'Něco se pokazilo',
+
+];
diff --git a/resources/lang/en/general.php b/resources/lang/en/general.php
new file mode 100644
index 0000000..fad59ad
--- /dev/null
+++ b/resources/lang/en/general.php
@@ -0,0 +1,57 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | General Language Lines
+    |--------------------------------------------------------------------------
+    */
+
+    'kaplicky' => 'kaplicky',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Sidebar Language Lines
+    |--------------------------------------------------------------------------
+    */
+
+    'cs' => 'česky',
+    'en' => 'english',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Sidebar Language Lines
+    |--------------------------------------------------------------------------
+    */
+
+    'home' => 'home',
+    'login' => 'login',
+    'logout' => 'logout',
+    'register' => 'register',
+    'topics' => 'topics',
+    'artefacts' => 'books',
+    'favourite_artefacts' => 'likes',
+    'favourite_metadata' => 'notes',
+    'charts' => 'best of',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Login Page Language Lines
+    |--------------------------------------------------------------------------
+    */
+
+    'email' => 'e-mail',
+    'password' => 'password',
+    'join' => 'join',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Error Page Language Lines
+    |--------------------------------------------------------------------------
+    */
+
+    'not_found' => 'Not Found',
+    'server_error' => 'Internal Server Error',
+
+];
diff --git a/resources/lang/vendor/cookieConsent/cs/texts.php b/resources/lang/vendor/cookieConsent/cs/texts.php
new file mode 100644
index 0000000..3b4472e
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/cs/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Tato stránka používá cookies na vylepšení vašeho uživatelského zážitku.',
+    'agree' => 'Souhlasím',
+];
diff --git a/resources/lang/vendor/cookieConsent/da/texts.php b/resources/lang/vendor/cookieConsent/da/texts.php
new file mode 100644
index 0000000..5227bf6
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/da/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Din oplevelse på dette websted vil blive forbedret ved at tillade cookies.',
+    'agree' => 'Tillad cookies',
+];
diff --git a/resources/lang/vendor/cookieConsent/de/texts.php b/resources/lang/vendor/cookieConsent/de/texts.php
new file mode 100644
index 0000000..8e9d6d6
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/de/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Diese Seite verwendet Cookies um das Nutzererlebnis zu steigern.',
+    'agree' => 'Akzeptieren',
+];
diff --git a/resources/lang/vendor/cookieConsent/el/texts.php b/resources/lang/vendor/cookieConsent/el/texts.php
new file mode 100644
index 0000000..8033813
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/el/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Η ιστοσελίδα μας χρησιμοποιεί cookies για να βελτιώσει την εμπειρία περιήγησής σας.',
+    'agree' => 'Αποδοχή',
+];
diff --git a/resources/lang/vendor/cookieConsent/en/texts.php b/resources/lang/vendor/cookieConsent/en/texts.php
new file mode 100644
index 0000000..fda470d
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/en/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Your experience on this site will be improved by allowing cookies.',
+    'agree' => 'Allow cookies',
+];
diff --git a/resources/lang/vendor/cookieConsent/eo/texts.php b/resources/lang/vendor/cookieConsent/eo/texts.php
new file mode 100644
index 0000000..3e2bcab
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/eo/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Tiu ĉi retejo uzas kuketojn por plibonigi vian sperton.',
+    'agree' => 'Akcepti kuketojn',
+];
diff --git a/resources/lang/vendor/cookieConsent/es/texts.php b/resources/lang/vendor/cookieConsent/es/texts.php
new file mode 100644
index 0000000..c78f1eb
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/es/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Su experiencia en este sitio será mejorada con el uso de cookies.',
+    'agree' => 'Aceptar',
+];
diff --git a/resources/lang/vendor/cookieConsent/et/texts.php b/resources/lang/vendor/cookieConsent/et/texts.php
new file mode 100644
index 0000000..ce88c21
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/et/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Sellel veebilehel on kasutusel cookies-failid teie kasutajaliidese parandamiseks.',
+    'agree' => 'Sain aru',
+];
diff --git a/resources/lang/vendor/cookieConsent/fr/texts.php b/resources/lang/vendor/cookieConsent/fr/texts.php
new file mode 100644
index 0000000..e68a3dc
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/fr/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => "Ce site nécessite l'autorisation de cookies pour fonctionner correctement.",
+    'agree' => 'Accepter',
+];
diff --git a/resources/lang/vendor/cookieConsent/hu/texts.php b/resources/lang/vendor/cookieConsent/hu/texts.php
new file mode 100644
index 0000000..4ff3101
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/hu/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'A megfelelő élmény biztosításához sütikre van szükség.',
+    'agree' => 'Sütik engedélyezése',
+];
diff --git a/resources/lang/vendor/cookieConsent/it/texts.php b/resources/lang/vendor/cookieConsent/it/texts.php
new file mode 100644
index 0000000..91831f8
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/it/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Questo sito utilizza i cookies per offrire un\'esperienza migliore all\'utente.',
+    'agree' => 'Consenti i cookies',
+];
diff --git a/resources/lang/vendor/cookieConsent/kr/texts.php b/resources/lang/vendor/cookieConsent/kr/texts.php
new file mode 100644
index 0000000..67447ef
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/kr/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => '보다 나은 사용자 경험을 위해 쿠키를 허용해 주십시요.',
+    'agree' => '쿠키 허용',
+];
diff --git a/resources/lang/vendor/cookieConsent/nb/texts.php b/resources/lang/vendor/cookieConsent/nb/texts.php
new file mode 100644
index 0000000..e68d758
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/nb/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Vi bruker informasjonskapsler (cookies) som lagres i nettleseren din når du besøker nettsiden vår. Ved å fortsette å besøke nettsiden vår eller bruke tjenestene våre, godtar du at vi bruker informasjonskapsler.',
+    'agree' => 'Jeg forstår',
+];
diff --git a/resources/lang/vendor/cookieConsent/nl/texts.php b/resources/lang/vendor/cookieConsent/nl/texts.php
new file mode 100644
index 0000000..b84fc61
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/nl/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Uw ervaring op deze site wordt verbeterd door het gebruik van cookies.',
+    'agree' => 'Sta cookies toe',
+];
diff --git a/resources/lang/vendor/cookieConsent/pl/texts.php b/resources/lang/vendor/cookieConsent/pl/texts.php
new file mode 100644
index 0000000..75b8bd3
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/pl/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Twoje doświadczenia na tej witrynie będą lepsze dzięki cookies.',
+    'agree' => 'Zezwalaj na cookie',
+];
diff --git a/resources/lang/vendor/cookieConsent/pt/texts.php b/resources/lang/vendor/cookieConsent/pt/texts.php
new file mode 100644
index 0000000..1d7a64b
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/pt/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Este site utiliza cookies. Ao navegar no site estará a consentir a sua utilização.',
+    'agree' => 'Aceitar',
+];
diff --git a/resources/lang/vendor/cookieConsent/ro/texts.php b/resources/lang/vendor/cookieConsent/ro/texts.php
new file mode 100644
index 0000000..5567afa
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/ro/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Experiența ta pe acest site va fi îmbunătățită dacă acceptați folosirea de cookie-uri.',
+    'agree' => 'Acceptă cookie',
+];
diff --git a/resources/lang/vendor/cookieConsent/ru/texts.php b/resources/lang/vendor/cookieConsent/ru/texts.php
new file mode 100644
index 0000000..dc4afb4
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/ru/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'На этом сайте используются файлы cookies для улучшения вашего пользовательского интерфейса.',
+    'agree' => 'Разрешить',
+];
diff --git a/resources/lang/vendor/cookieConsent/sk/texts.php b/resources/lang/vendor/cookieConsent/sk/texts.php
new file mode 100644
index 0000000..63d623e
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/sk/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Táto stránka používa cookies na vylepšenie vášho užívateľského zážitku.',
+    'agree' => 'Súhlasím',
+];
diff --git a/resources/lang/vendor/cookieConsent/sv/texts.php b/resources/lang/vendor/cookieConsent/sv/texts.php
new file mode 100644
index 0000000..0f51df7
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/sv/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Vi använder kakor (cookies) för att webbplatsen ska fungera på ett bra sätt för dig. Genom att surfa vidare godkänner du att vi använder kakor.',
+    'agree' => 'Jag förstår',
+];
diff --git a/resources/lang/vendor/cookieConsent/tr/texts.php b/resources/lang/vendor/cookieConsent/tr/texts.php
new file mode 100644
index 0000000..c819cab
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/tr/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Bu sitedeki deneyiminizi çerezlere izin vererek geliştirebilirsiniz.',
+    'agree' => 'Çerezlere izin ver',
+];
diff --git a/resources/sass/_custom.scss b/resources/sass/_custom.scss
index f615f54..a57ec11 100644
--- a/resources/sass/_custom.scss
+++ b/resources/sass/_custom.scss
@@ -4,6 +4,7 @@
 body {
     background-color: $theme-color-five;
     font-family: $font-family-one;
+    padding-top: 5.1rem;
 
     .head-title h1 {
         color: $theme-color-one;
@@ -14,6 +15,8 @@ body {
     }
 
     .carousel {
+        margin-top: - 5.1rem;
+
         .carousel-inner {
             .museum-logo {
                 display: flex;
@@ -22,17 +25,25 @@ body {
                 top: 5%;
                 width: 100%;
                 z-index: 1;
+
+                img {
+                    width: 7.5rem;
+                }
             }
 
             .social-logo {
                 text-align: center;
-                justify-content: space-between;
+                justify-content: space-around;
                 flex-wrap: nowrap;
                 position: absolute;
                 top: 25%;
                 padding-left: 25px;
                 width: 100%;
                 z-index: 1;
+
+                img {
+                    width: 2.0625rem;
+                }
             }
 
             .carousel-button {
@@ -57,8 +68,10 @@ body {
         .carousel-caption {
             top: 50%;
             bottom: auto;
+            padding-left: 1rem;
+            padding-right: 1rem;
             transform: translateY(-50%);
-            background-color:  rgba(239, 218, 179, 0.5);
+            background-color: rgba(239, 218, 179, 0.5);
         }
     }
 
@@ -71,96 +84,137 @@ body {
     }
 
     //text inputu a název artefaktů
-    .text2{
+    .text2 {
         font-weight: $font-weight-two;
         font-size: 8pt;
     }
 
     //název "kaplicky" a "choose a few" v categories (tam má jinou barvu)
-    .kaplicky{
+    .kaplicky {
         color: $theme-color-one;
         font-size: 11pt;
-        font-weight: $font-weight-three;
+        font-weight: $font-weight-two;
         letter-spacing: 3pt;
     }
 
     //autor artefaktu
-    .text-author{
+    .text-author {
         font-weight: $font-weight-one;
         font-size: 7pt;
         color: $theme-color-four;
     }
 
     //počet lajků
-    .text-number{
+    .text-number {
         font-weight: $font-weight-two;
         font-size: 5pt;
         color: $theme-color-four;
     }
 
     //notes u metadat, about v about, text levého menu
-    .text-headline{
+    .text-headline {
         font-weight: $font-weight-two;
         font-size: 12pt;
         color: $theme-color-four;
     }
 
+    //notes u metadat, about v about, text levého menu
+    .text-headline-desktop {
+        font-size: 24pt;
+        color: $theme-color-four;
+    }
+
     //název metadata, text pravého menu
-    .text-page{
+    .text-page {
         font-weight: $font-weight-two;
         font-size: 7pt;
     }
 
     ////color pro změnu jen barvy
-    .black{
+    .black {
         color: $theme-color-five;
     }
-    .white{
+
+    .white {
         color: $theme-color-one;
     }
-    .colored{
+
+    .colored {
         color: $theme-color-four;
     }
 
+    .highlight-white, .highlight-white {
+        &:hover, &:focus, &:active {
+            color: $theme-color-one;
+        }
+    }
+
 
     ////login
-    .auth{
-        .card{
+    .auth {
+        .card {
             border: none;
             text-align: center;
             font-size: 8pt;
         }
 
-        .col-form-label{
+        .col-form-label {
             text-align: left;
             padding-top: 0;
             padding-bottom: 0;
         }
-        .form-control{
+
+        .form-control {
             padding: 0;
             height: 17pt;
             border-radius: 0;
+
+            &:focus {
+                //border-color: $theme-color-one;
+                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;
+                -webkit-box-shadow: none;
+                box-shadow: none;
+            }
+        }
+    }
+
+    //Oprava barev pro Chrom
+    input:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0 50px $theme-color-five inset !important;
+        -webkit-text-fill-color: $theme-color-one;
+        background-color: $theme-color-five !important;
+        //outline: none !important;
+        &:active, &:focus, &:visited, &:hover {
+            -webkit-box-shadow: 0 0 0 50px $theme-color-five inset !important;
+            -webkit-text-fill-color: $theme-color-one;
+            background-color: $theme-color-five !important;
+            //outline: none !important;
         }
     }
 
     .card-body {
-    	background-color: $theme-color-five;
-    	font-weight: $font-weight-one;
-    	color: $theme-color-four;
-	}
-
-	.form-control {
-    	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;
+        background-color: $theme-color-five;
+        font-weight: $font-weight-one;
+        color: $theme-color-four;
+    }
+
+    .form-control {
+        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;
+        outline: none;
 
-        &:active, &:focus, &:visited{
+        &:active, &:focus, &:visited, &:hover {
+            outline: none;
             background-color: $theme-color-five;
             margin-top: -1px;
             border-top-color: $theme-color-five;
@@ -171,12 +225,14 @@ body {
             box-shadow: none;
         }
 
-	}
-    .form-control.is-invalid{
+    }
+
+    .form-control.is-invalid {
         box-shadow: none;
         border-color: $theme-color-four;
         background-image: none;
-        &:active, &:focus, &:visited{
+
+        &:active, &:focus, &:visited {
             box-shadow: none;
             border-color: $theme-color-four;
         }
@@ -188,13 +244,17 @@ body {
         color: $theme-color-one;
         border: 0.5pt solid $theme-color-one;
         border-radius: 0;
-        width: 6.5rem;
-        height: 2rem;
+        padding: 0.4675rem 2.475rem;
         font-weight: $font-weight-one;
 
-        &:active, &:focus, &:visited {
+        &:active, &:focus, &:visited, &:hover {
             outline: none;
             box-shadow: none;
+            color: $theme-color-one;
+        }
+
+        &:hover {
+            color: $theme-color-four;
         }
     }
 
@@ -213,23 +273,27 @@ body {
 
     .pin-left {
         border-left: .5pt solid $theme-color-four;
-        display: inline-block;
-        margin: 10rem 50px 0px -5rem;
         position: fixed;
-        top: 0;
         bottom: 0;
         text-align: left;
-        width: 100%;
-        .text{
+
+        // center fixed div
+        left: 50%;
+        transform: translateX(-50%);
+        width: 350px;
+
+        .text {
             margin-left: 0.5rem;
+            margin-bottom: 0.2rem; // looks fugly without margin
         }
-        p{
+
+        p {
             margin-top: 0;
             margin-bottom: 0;
         }
     }
 
-    li{
+    li {
         list-style-type: none;
     }
 
@@ -245,23 +309,39 @@ body {
             margin-right: 5px;
             vertical-align: text-top;
             background-color: transparent;
-            background-position : center center;
-            background-repeat:no-repeat;
+            background-position: center center;
+            background-repeat: no-repeat;
         }
     }
 
+    .fav-cat-mybooks {
+        color: $theme-color-two;
+        text-align: center;
+        font-size: 1.9rem;
+    }
+
+    .fav-cat-nofav {
+        text-align: center;
+        color: $theme-color-three;
+        background-color: $theme-color-five;
+        border-color: $theme-color-three;
+    }
+
     .artefacts-area, .artefact-area {
 
         h5 {
             color: $theme-color-two;
-            font-weight: $font-weight-two;
-            line-height: 20pt;
-            font-size: 21pt;
+            //font-weight: $font-weight-two;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            line-height: 0.9rem;
+            font-size: 1.1rem;
         }
 
         h6 {
             color: $theme-color-two;
-            font-size: 14pt;
+            font-size: 0.9rem;
             //font-weight: lighter;
             font-weight: $font-weight-one;
         }
@@ -278,56 +358,84 @@ body {
 
         .left_panel_info {
             margin-top: 15px;
-            margin-left: -10px;
-            max-width: 250px;
+            max-width: 70%; //250px
         }
 
         .right_panel_info {
             margin-top: 15px;
-            margin-right: -15px;
+        }
+
+        .likes_text {
+            text-align: center;
         }
 
         .card-cus-bottom {
             background-color: $theme-color-five;
+            padding-right: 0;
+            padding-left: 0;
         }
 
         .inter_info {
             &:before {
-                background-image: url(../images/interface/Button_Info_50.png);
-                width: 60px;
-                height: 60px;
+                //background-image: url(../images/interface/Button_Info_50.png);
+                background-image: url(../images/interface/Button_Info.svg);
+                //width: 60px;
+                //height: 60px;
+                width: 8vw;
+                height: 8vw;
             }
         }
 
         .inter_like {
             display: none;
+
             &:before {
-                background-image : url(../images/interface/Hearth_Empty_50.png);
-                width: 60px;
-                height: 60px;
+                //background-image: url(../images/interface/Hearth_Empty_50.png);
+                background-image: url(../images/interface/Heart_Empty.svg);
+                //width: 60px;
+                //height: 60px;
+                width: 8vw;
+                height: 8vw;
             }
         }
 
         .inter_like_filled {
             &:before {
-                background-image : url(../images/interface/Hearth_Filled_50.png);
-                width: 60px;
-                height: 60px;
+                //background-image: url(../images/interface/Hearth_Filled_50.png);
+                background-image: url(../images/interface/Heart_Filled.svg);
+                //width: 60px;
+                //height: 60px;
+                width: 8vw;
+                height: 8vw;
+            }
+        }
+
+        .charts {
+            .inter_info, .inter_like, .inter_like_filled {
+                display: inline;
+
+                &:before {
+                    width: 3rem;
+                    height: 3rem;
+                }
             }
+
         }
 
         .inter_info, .inter_like, .inter_like_filled {
             padding: 0;
+
             &:focus, &:active, &:hover {
                 background-color: transparent !important;
                 border-color: transparent !important;
                 outline: none !important;
                 box-shadow: none !important;
-            };
+            }
+        ;
         }
     }
 
-
+    // Artefact area
     .artefact-area {
 
         .card-cus-bottom {
@@ -358,19 +466,29 @@ body {
             display: block;
 
             &:before {
-                background-image: url(../images/interface/Hearth_Empty_Small.png);
-                width: 25px;
-                height: 19px;
+                background-image: url(../images/interface/Heart_Empty.svg);
+                width: 1.563rem;
+                height: 1.25rem;
+
+            }
+        }
+
+        .inter_like_filled {
+            &:before {
+                background-image: url(../images/interface/Heart_Filled.svg);
+                width: 1.563rem;
+                height: 1.25rem;
             }
         }
 
         .inter_info {
 
             padding-right: 1rem;
+
             &:before {
-                background-image: url(../images/interface/Button_Info_Small.png);
-                width: 29px;
-                height: 29px;
+                background-image: url(../images/interface/Button_Info.svg);
+                width: 1.875rem;
+                height: 1.875rem;
             }
         }
 
@@ -385,6 +503,7 @@ body {
     .metadata-area {
 
         h2 {
+            color: $theme-color-two;
             font-weight: $font-weight-two;
             font-size: 12pt;
         }
@@ -405,18 +524,18 @@ body {
             color: $theme-color-two;
             border-bottom: .042rem solid $theme-color-two;
             display: inline-block;
-            margin: 3.35rem 3.125rem 0 0;
+            margin: 2.75rem 3.125rem 0 0;
 
-            &:before {
+            &:after {
                 content: '';
-                background-color: $theme-color-two;
+                background-color: #ddd1b9;
                 position: relative;
                 height: .5rem;
                 width: .5rem;
                 border-radius: 50%;
-                display: inline-block;
-                top: 1.5rem;
-                left: 50vw;
+                display: block;
+                margin-left: auto;
+                top: .25rem;
             }
 
             .metadata {
@@ -424,8 +543,13 @@ body {
                 display: flex;
                 align-items: baseline;
 
-                span {
-                    font-weight: $font-weight-two;
+                a {
+                    color: $theme-color-two;
+                    text-decoration: none;
+
+                    span {
+                        font-weight: $font-weight-two;
+                    }
                 }
 
                 .arrow-down {
@@ -446,12 +570,16 @@ body {
             color: $theme-color-one;
             border-bottom: .042rem solid $theme-color-one;
 
-            &:before {
+            &:after {
                 content: '';
                 background-color: $theme-color-one;
             }
 
             .metadata {
+                a {
+                    color: $theme-color-one;
+                }
+
                 .arrow-down {
                     border-top: 0.25rem solid $theme-color-one;
                 }
@@ -479,12 +607,30 @@ body {
                     font-size: 7pt;
                 }
 
+                .inter_like {
+
+                    &:before {
+                        background-image: url(../images/interface/Heart_Empty.svg);
+                        width: 3.125rem;
+                        height: 3.125rem;
+                        margin-right: 0;
+                    }
+
+                    &:hover, &:focus, &:active {
+                        background-color: transparent !important;
+                        border-color: transparent !important;
+                        outline: none !important;
+                        box-shadow: none !important;
+                    }
+                }
+
                 .inter_like_filled {
 
                     &:before {
-                        background-image : url(../images/interface/Hearth_Filled_50.png);
-                        width: 50px;
-                        height: 50px;
+                        background-image: url(../images/interface/Heart_Filled.svg);
+                        width: 3.125rem;
+                        height: 3.125rem;
+                        margin-right: 0;
                     }
 
                     &:hover, &:focus, &:active {
@@ -498,6 +644,50 @@ body {
         }
     }
 
+    // Modal
+    .modal {
+        font-weight: $font-weight-one;
+        color: $theme-color-two;
+        font-size: 8pt;
+
+        .modal-header {
+            border-bottom: 1px solid $theme-color-two;
+
+            .close {
+                color: $theme-color-two;
+                text-shadow: none;
+            }
+        }
+
+        .modal-content {
+            background-color: $theme-color-five;
+        }
+
+        .modal-footer {
+            border-top: 1px solid $theme-color-two;
+
+            .btn {
+                background-color: $theme-color-two;
+                color: $theme-color-five;
+
+            }
+        }
+    }
+
+    .image-modal {
+        .close {
+            font-size: 24pt;
+            color: $theme-color-two;
+            text-shadow: none;
+            position: absolute;
+            top: 1rem;
+            right: 0.125rem;
+            opacity: 1;
+            cursor: pointer;
+            pointer-events: initial;
+        }
+    }
+
     /*.content {
         position: relative;
 
@@ -529,17 +719,8 @@ body {
         }
     }*/
 
-
-
-    //CATEGORIES - ROW BLOCK
-    .cat-col-md-2
-    {
-        margin: 2%;
-    }
-
     //CATEGORIES - TILES
-    .btn.btn-dark.cat-tile
-    {
+    .btn.btn-dark.cat-tile {
         //STYLING
         border-color: $theme-color-four;
         border-radius: 0;
@@ -551,16 +732,17 @@ body {
         outline: none !important;
         box-shadow: none !important;
 
+        //TEXT OVERFLOW
+        overflow: hidden;
+        text-overflow: ellipsis;
+
         //FONT
-        font-size: 8mm;
-        word-wrap: break-word;
+        font-size: 22pt;
 
         //SPACING
-        height: 40mm;
-        width: 100%;
+        padding: 4rem 1rem;
 
-        &:active, &:focus
-        {
+        &:active, &:focus {
             background-color: $theme-color-three;
             border-color: $theme-color-four;
             outline: none !important;
@@ -569,44 +751,80 @@ body {
         }
     }
 
+    .btn-dark:not(:disabled):not(.disabled).active {
+        background-color: $theme-color-four;
+        color: white;
+        border-color: $theme-color-five;
+    }
+
     //CATEGORY/{id} -h2 title NO ARTEFACTS
-    .category-h2
-    {
+    .category-h2 {
         color: $theme-color-four;
     }
-}
 
-.arrow{
-    position: absolute;
-    width: 0;
-    height: 0;
-    margin: 2rem;
-    cursor:pointer;
-    border: 0.59055rem solid transparent;
-}
+    .cat-main-div {
+        margin-top: 2.4rem;
+    }
 
-.arrow-left {
-    margin-left: 80%;
+    //CATEGORIES - Wrapper around Enter button
+    .cat-wrapper {
+        margin: auto;
+        display: block;
+        //align-content: center;
+        //margin:auto;
+        //display:block;
+    }
 
-    border-right:0.59055rem solid $theme-color-five;
-    background-color: $theme-color-four !important;
-}
+    //CATEGORIES - Enter button
+    .btn.button-square.cat-enter-butt {
+        border-radius: 0;
+        bottom: 5%;
+        position: fixed;
+        left: 50%;
+        transform: translateX(-50%);
+
+        &:active, &:focus, &:visited, &:hover {
+            outline: none;
+            box-shadow: none;
+            color: $theme-color-one;
+        }
+
+        &:hover {
+            color: $theme-color-four;
+        }
+    }
 
-.arrow-right {
-    border-left:0.59055rem solid $theme-color-four;
+    //VERIFY - main text
+    .ver-text {
 
+        margin-top: 50pt;
+
+        h2 {
+            text-align: center;
+            color: $theme-color-two;
+        }
+    }
+}
+
+.top-bar {
+    background-color: $theme-color-five;
+    min-height: 5rem;
     position: fixed;
-    z-index: 1;
+    width: 100%;
     top: 0;
-    left: 0;
+    z-index: 2;
+
+    .shadow {
+        box-shadow: none;
+    }
 }
 
 .sidenav {
     height: 100%;
-    //width: 0;
-    width: 250px;
+    width: 0;
+    //width: 250px;
     position: fixed;
-    z-index: 1;
+    z-index: 4;
     top: 0;
     left: 0;
     background-color: $theme-color-four;
@@ -619,42 +837,434 @@ body {
     color: $theme-color-five;
     display: block;
     transition: 0.3s;
+
+    &:hover {
+        color: $theme-color-four;
+        background-color: $theme-color-one;
+    }
+
+    &:active, &:focus, .active {
+        color: $theme-color-one;
+        background-color: $theme-color-four;
+    }
+}
+
+.bar-desktop {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    width: 100%;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+}
+
+.down {
+    position: absolute;
+    z-index: 5;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    margin-bottom: 3rem;
+}
+
+.menu-item {
+    padding: 0.25rem 1rem;
+    width: 100%;
+    border: 0;
+
+    &:active, &.active, &:focus {
+        color: $theme-color-one;
+        //background-color: $theme-color-five;
+        border: none;
+        outline: none;
+        box-shadow: none;
+    }
+}
+
+.logo-kaplicky {
+    text-align: center;
+    display: none;
+
+    &:active, &.active, &:focus {
+        outline: none;
+        box-shadow: none;
+    }
+}
+
+.navbar {
+    padding: unset;
+}
+
+.vertical-center {
+    margin-top: -5.1rem; // fixed navbar correction
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+}
+
+.error {
+    color: $theme-color-one;
+    font-size: xx-large;
+    display: block;
+    text-align: center;
+}
+
+// login and registration alert bottom margin
+.al {
+    margin-bottom: 3rem;
+}
+
+.js-cookie-consent {
+    position: fixed;
+    z-index: 9999;
+    text-align: center;
+    width: 100%;
+    bottom: 0px;
+    padding: 10px;
+    background: $theme-color-four;
+}
+
+.js-cookie-consent-agree {
+    font-size: 8pt;
+    background-color: $theme-color-five;
+    color: $theme-color-one;
+    border: 0.5pt solid $theme-color-one;
+    border-radius: 0;
+    padding: 0.5rem 2rem;
+    font-weight: $font-weight-one;
+
+    &:active, &:focus, &:visited, &:hover {
+        outline: none;
+        box-shadow: none;
+        color: $theme-color-one;
+    }
+
+    &:hover {
+        color: $theme-color-four;
+    }
+}
+
+.cookie-consent__message {
+    padding: 1rem;
+    display: inline-block;
+}
+
+.bar-desktop {
+    margin-left: 2rem;
+    margin-right: 2rem;
+}
+
+// books component
+.books-component {
+
+    .book-area {
+        .card-cus-bottom {
+
+            display: flex;
+            justify-content: space-between;
+            align-items: baseline;
+
+            .book-arrow {
+                &:after {
+                    content: '';
+                    bottom: 3rem;
+                    position: absolute;
+                    border-top: 1.25rem solid transparent;
+                    border-bottom: 1.25rem solid transparent;
+                }
+            }
+
+            .book-arrow-left {
+                &:after {
+                    left: 1.5625rem;
+                    border-right: 1.25rem solid $theme-color-two;
+                }
+            }
+
+            .book-arrow-right {
+                &:after {
+                    border-left: 1.25rem solid $theme-color-two;
+                }
+            }
+
+            .likes {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .inter_like, .inter_like_filled {
+                    margin: 0 auto;
+
+                    &:before {
+                        margin-right: 0;
+                        height: 5rem;
+                        width: 5rem;
+                    }
+
+                    &:hover, &:focus, &:active {
+                        background-color: transparent !important;
+                        border-color: transparent !important;
+                        outline: none !important;
+                        box-shadow: none !important;
+                    }
+                }
+
+                .inter_like {
+                    &:before{
+                        background-image: url(../images/interface/Heart_Empty.svg);
+                    }
+                }
+
+                .inter_like_filled {
+                    &:before{
+                        background-image: url(../images/interface/Heart_Filled.svg);
+                    }
+                }
+
+                .artefact-likes {
+                    color: $theme-color-two;
+                    font-size: 12pt;
+                    padding: 0;
+                }
+            }
+        }
+    }
+
+    .info-area {
+        color: $theme-color-two;
+        margin-top: 0.625rem;
+        padding-left: 5rem;
+
+        /* could be use to hide overflowing notes
+        max-height: 80vh;
+        overflow-y: scroll;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+
+        &::-webkit-scrollbar {
+            width: 0 !important
+        } */
+
+        h3 {
+            font-weight: $font-weight-two;
+        }
+
+        .switch-view {
+            float: right;
+            color: $theme-color-one;
+            cursor: pointer;
+        }
+
+        .artefact-notes {
+            display: none;
+            color: $theme-color-two;
+
+            .pin-horizontal {
+                border-bottom: .042rem solid $theme-color-two;
+                display: inline-block;
+                margin: 2.75rem 2rem 0 0;
+
+                &:after {
+                    content: '';
+                    background-color: #ddd1b9;
+                    position: relative;
+                    height: .5rem;
+                    width: .5rem;
+                    border-radius: 50%;
+                    display: block;
+                    margin-left: auto;
+                    top: .25rem;
+                }
+
+                .metadata {
+                    position: relative;
+                    display: flex;
+                    align-items: baseline;
+
+                    a {
+                        color: $theme-color-two;
+                        text-decoration: none;
+
+                        span {
+                            font-size: 12pt;
+                            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;
+
+                &:after {
+                    content: '';
+                    background-color: $theme-color-one;
+                }
+
+                .metadata {
+
+                    a {
+                        color: $theme-color-one;
+                    }
+
+                    .arrow-down {
+                        border-top: 0.25rem solid $theme-color-one;
+                    }
+                }
+            }
+
+            .metadata-text {
+                font-size: 12pt;
+                color: $theme-color-one;
+                padding-top: 10px;
+                padding-left: 25px;
+                padding-right: 25px;
+
+                .inter_like {
+
+                    &:before {
+                        background-image: url(../images/interface/Heart_Empty.svg);
+                        width: 5rem;
+                        height: 5rem;
+                    }
+
+                    &:hover, &:focus, &:active {
+                        background-color: transparent !important;
+                        border-color: transparent !important;
+                        outline: none !important;
+                        box-shadow: none !important;
+                    }
+                }
+
+                .inter_like_filled {
+
+                    &:before {
+                        background-image: url(../images/interface/Heart_Filled.svg);
+                        width: 5rem;
+                        height: 5rem;
+                    }
+
+                    &:hover, &:focus, &:active {
+                        background-color: transparent !important;
+                        border-color: transparent !important;
+                        outline: none !important;
+                        box-shadow: none !important;
+                    }
+                }
+            }
+        }
+
+        .inter_info {
+
+            float: right;
+            color: $theme-color-one;
+            padding-right: 1rem;
+
+            &:before {
+                background-image: url(../images/interface/Button_Info_White.svg);
+                width: 1.875rem;
+                height: 1.875rem;
+            }
+
+            &:hover, &:focus, &:active {
+                background-color: transparent !important;
+                border-color: transparent !important;
+                outline: none !important;
+                box-shadow: none !important;
+            }
+        }
+    }
 }
 
-.sidenav a:hover {
-    color: $theme-color-four;
-    background-color: $theme-color-one;
+@media (max-width: 610px) {
+    .js-cookie-consent-agree {
+        margin-bottom: 1rem;
+    }
 }
 
 @media screen and (max-height: 450px) {
-    .sidenav a {font-size: 18px;}
+    .sidenav a {
+        font-size: 18px;
+    }
+    .down {
+        bottom: unset;
+        margin-bottom: unset;
+    }
 }
 
-@media (max-width: 990px) {}//Ponecháno pro případ, že se bude měnit login
+@media (max-width: 990px) {
+    .bar-desktop {
+        display: none;
+    }
+    .logo-kaplicky {
+        margin: 0 auto;
+        display: block;
+    }
+    .arrow {
+        position: absolute;
+        width: 0;
+        height: 0;
+        margin: 2rem;
+        cursor: pointer;
+        border: 0.59055rem solid transparent;
+
+        &:active, &.active, &:focus {
+            outline: none;
+            box-shadow: none;
+        }
+    }
+    .arrow-left {
+        margin-left: 80%;
+
+        border-right: 0.59055rem solid $theme-color-five;
+        background-color: $theme-color-four !important;
+    }
+    .arrow-right {
+        border-left: 0.59055rem solid $theme-color-four;
+
+        position: fixed;
+        z-index: 3;
+        top: 0;
+        left: 0;
+    }
+    .menu-item:active, .menu-item.active {
+        color: $theme-color-five;
+        background-color: $theme-color-one;
+    }
+}
 
 @media (max-width: 770px) {
-    body {
-        .pin-left {
-            margin-left: -33vw;
-            margin-top: 12rem;
-            //left: 20vw;
+    .books-component {
+        .info-area {
+            padding-left: 1.5625rem;
         }
     }
 }
 
-@media only screen and (max-width: 540px)
-{
-    .sidenav{
+@media only screen and (max-width: 540px) {
+    .sidenav {
         width: 0;
     }
-    .head-title.text-center h1
-    {
+    .head-title.text-center h1 {
         font-size: 23pt;
         padding-top: 50pt;
         white-space: nowrap;
-
     }
 
+
     /*.btn-circle.rounded-circle.btn-sm
     {
         width: 90px;
@@ -673,7 +1283,7 @@ body {
         height: 180px;
     }*/
 
-    body{
+    body {
         .carousel {
             .carousel-inner {
                 .social-logo {
@@ -685,9 +1295,8 @@ body {
     }
 }
 
-@media (min-width: 330px) and (max-height: 900px)
-{
-    body{
+@media (min-width: 330px) and (max-height: 900px) {
+    body {
         .carousel {
             .carousel-inner {
                 .social-logo {
@@ -697,3 +1306,142 @@ body {
         }
     }
 }
+
+@media (min-width: 1024px) {
+
+    body {
+        .kaplicky {
+            text-align: center;
+            font-size: 30pt;
+            margin-bottom: 3rem;
+        }
+
+        .pin-left:before {
+            height: 1.125rem;
+            width: 1.125rem;
+            top: -1.125rem;
+            left: -0.56rem;
+        }
+
+        .text {
+            text-align: left;
+            font-size: 18pt;
+            line-height: 26pt;
+        }
+
+        .text2 {
+            text-align: left;
+            font-size: 18pt;
+            line-height: 26pt;
+        }
+
+        .carousel {
+            .carousel-inner {
+                .social-logo {
+                    justify-content: center;
+                    top: 90%;
+
+                    .logo {
+                        margin-left: 10rem;
+
+                        img {
+                            width: 3.125rem;
+                        }
+
+                        &:first-child {
+                            margin-left: 0;
+                        }
+                    }
+                }
+
+                .carousel-button {
+                    bottom: 15%;
+                }
+            }
+
+            .carousel-caption {
+                padding: 3.75rem 6.25rem 5em;
+
+                h2 {
+                    margin-bottom: 1rem;
+                }
+            }
+        }
+
+        .button-square {
+            font-size: 18pt;
+            padding: 0.28125rem 3.7rem;
+        }
+
+        .metadata-area {
+            .pin-horizontal {
+                margin: 5rem 3.125rem 0 0;
+
+                .metadata {
+
+                    margin-right: 0.5rem;
+
+                    .arrow-down {
+                        border-left: 0.5rem solid transparent;
+                        border-right: 0.5rem solid transparent;
+                        border-top: 0.5rem solid $theme-color-two;
+                    }
+
+                    a {
+                        span {
+                            font-size: 16pt;
+                        }
+                    }
+                }
+
+                &:after {
+                    height: 0.75rem;
+                    width: 0.75rem;
+                    top: 0.375rem;
+                }
+            }
+
+            .white-pin {
+                .metadata {
+                    .arrow-down {
+                        border-top: 0.5rem solid $theme-color-one;
+                    }
+                }
+            }
+
+            .metadata-text {
+                font-size: 19pt;
+                max-width: 50%;
+
+                .artefact-info {
+                    .artefact-name {
+                        font-size: 16pt;
+                    }
+
+                    .artefact-author {
+                        font-size: 12pt;
+                    }
+
+                    .inter_like_filled {
+                        &:before {
+                            width: 5rem;
+                            height: 5rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media (min-width: 1575px) {
+    body {
+        .carousel {
+            .carousel-inner {
+                .carousel-button {
+                    bottom: 20%;
+                }
+            }
+        }
+    }
+}
diff --git a/resources/views/artefact/default.blade.php b/resources/views/artefact/default.blade.php
index ac565b8..800d804 100644
--- a/resources/views/artefact/default.blade.php
+++ b/resources/views/artefact/default.blade.php
@@ -9,46 +9,6 @@
 
 
 @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">
-                <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->id) }}">{{$artefact->name}}</a> - {{$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>
-                        </div>
-                    </div>
-                </div>
-            @endforeach
-        @endif
-    </div>
-
+    @component('components/books', ['artefacts' => $artefacts])
+    @endcomponent
 @endsection
diff --git a/resources/views/artefact/view.blade.php b/resources/views/artefact/view.blade.php
index 5ab4326..2f61696 100644
--- a/resources/views/artefact/view.blade.php
+++ b/resources/views/artefact/view.blade.php
@@ -18,7 +18,7 @@
         @else
             <div class="artefact-area mb-5">
                 <div class="card">
-                    <a href="{{ url('/artefact/' . $artefact->id) }}">
+                    <a href="#imageModal" data-toggle="modal">
                         <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">
@@ -28,10 +28,18 @@
                         </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>
+                                <button type="button" class="btn btn-primary button-image inter_info" data-toggle="modal" data-target="#informationModal"></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>
+                                @if ($artefact->favourite)
+                                    <a href="{{  action('ArtefactController@unlike', ['id' => $artefact->id]) }}">
+                                        <button id="like_butt_{{$artefact->id}}" type="button" class="btn btn-primary button-image inter_like_filled"></button>
+                                    </a>
+                                @else
+                                    <a href="{{  action('ArtefactController@like', ['id' => $artefact->id]) }}">
+                                        <button id="like_butt_{{$artefact->id}}" type="button" class="btn btn-primary button-image inter_like"></button>
+                                    </a>
+                                @endif
                                 <h6 class="artefact-likes">{{$artefact->likes}}</h6>
                             </div>
                         </div>
@@ -40,4 +48,36 @@
             </div>
         @endif
     </div>
+
+    <!-- Image modal -->
+    <div class="modal image-modal fade" id="imageModal" tabindex="-1" role="dialog">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
+            <div class="modal-content">
+                <img class="card-img-top" src="{{asset('images/artefacts/book_cover_01.jpg')}}" width="100%" height=auto alt="book_cover">
+            </div>
+        </div>
+    </div>
+
+    <!-- Information modal -->
+    <div class="modal fade" id="informationModal" tabindex="-1" role="dialog">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">{{$artefact->name}} - {{$artefact->author}}</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    Addition information about book.
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
 @endsection
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 1ff43ce..913594b 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -2,81 +2,94 @@
 
 @section('title', 'Login')
 
-@section('breadcrumb')
+{{--@section('breadcrumb')
     <li class="breadcrumb-item active" aria-current="page">Login</li>
-@endsection
+@endsection--}}
 
 @section('content')
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
-            <div class="auth">
-            <div class="card">
-                {{--<div class="card-header">{{ __('Login') }}</div>--}}
+    <div class="vertical-center">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-sm-12">
+                    <div class="auth">
+                        <div class="card">
+                            {{--<div class="card-header">{{ __('Login') }}</div>--}}
 
-                <div class="card-body" style="padding-bottom: 0px">
-                    <form method="POST" action="{{ route('login') }}">
-                        @csrf
+                            <div class="card-body">
+                                <form method="POST" action="{{ route('login') }}">
+                                    @csrf
 
-                        <label for="logo" class="col-md-4 kaplicky">{{ __('kaplicky') }}</label>
+                                    <label for="logo" class="col-md-12 row kaplicky justify-content-center" >{{ __('kaplicky') }}</label>
 
-                        <div class="form-group row">
-                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('e-mail') }}</label>
+                                    {{--<label for="email" class="col-md-8 col-form-label text-md-left row justify-content-center">
+                                        {{ __('general.email') }}
+                                    </label>
+                                    <div class="col-md-4 offset-md-12 row justify-content-center">
+                                        <input id="email" type="email"
+                                               class="form-control text2 @error('email') is-invalid @enderror"
+                                               name="email"
+                                               value="{{ old('email') }}" --}}{{--required autocomplete="email" autofocus--}}{{-->
+                                    </div>--}}
+                                    <div class="form-group row ">
+                                        <label for="email" class="col-md-4 col-form-label text-md-right text">
+                                            {{ __('general.email') }}
+                                        </label>
 
-                            <div class="col-md-6">
-                                <input id="email" type="email" class="form-control text2 @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" {{--required autocomplete="email" autofocus--}}>
-                            </div>
-                        </div>
+                                        <div class="col-md-6">
+                                            <input id="email" type="email @error('email') is-invalid @enderror"
+                                                   class="form-control text2 @error('email') is-invalid @enderror"
+                                                   name="email"
+                                                   value="{{ old('email') }}" {{--required autocomplete="email" autofocus--}}>
+                                        </div>
+                                    </div>
 
-                        <div class="form-group row">
-                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('password') }}</label>
+                                    <div class="form-group row">
+                                        <label for="password" class="col-md-4 col-form-label text-md-right text">
+                                            {{ __('general.password') }}
+                                        </label>
 
-                            <div class="col-md-6">
-                                <input id="password" type="password" class="form-control text2 @error('password') is-invalid @enderror" name="password" {{--required autocomplete="current-password"--}}>
-                            </div>
-                        </div>
+                                        <div class="col-md-6">
+                                            <input id="password" type="password"
+                                                   class="form-control text2 @error('password') is-invalid @enderror"
+                                                   name="password" {{--required autocomplete="current-password"--}}>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-md-12">
+                                            <button type="submit" class="btn button-square">
+                                                {{ __('general.join') }}
+                                            </button>
+                                            {{-- @if (Route::has('password.request'))
+                                                <a class="btn btn-link" href="{{ route('password.request') }}">
+                                                    {{ __('Forgot Your Password?') }}
+                                                </a>
+                                            @endif --}}
+                                        </div>
+                                    </div>
 
-                        {{--<div class="form-group row">
-                            <div class="col-md-6 offset-md-4">
-                                <div class="form-check">
-                                    <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
+                                    @if($errors->any())
+                                        <div class="row">
+                                            <div class="col-md-12">
+                                                <div class="text white pin-left" role="alert">
+                                                    <div class="al">
+                                                        @error('email')
+                                                        <p class="text">{{ $message }}</p>
+                                                        @enderror
+                                                        @error('password')
+                                                        <p class="text">{{ $message }}</p>
+                                                        @enderror
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    @endif
 
-                                    <label class="form-check-label" for="remember">
-                                        {{ __('Remember Me') }}
-                                    </label>
-                                </div>
+                                </form>
                             </div>
-                        </div>--}}
-
-                            <div class="col-md-12">
-                                <button type="submit" class="btn button-square ">
-                                    {{ __('join') }}
-                                </button>
-                                {{-- @if (Route::has('password.request'))
-                                    <a class="btn btn-link" href="{{ route('password.request') }}">
-                                        {{ __('Forgot Your Password?') }}
-                                    </a>
-                                @endif --}}
-                            </div>
-
-                        @if($errors->any())
-                            <div class="col-md-6 offset-md-2">
-                                <span class="text white pin-left" role="alert">
-                                    <p> </p>
-                                    @error('email')
-                                             <p class="text">{{ $message }}</p>
-                                     @enderror
-                                    @error('password')
-                                             <p class="text">{{ $message }}</p>
-                                     @enderror
-                                </span>
-                            </div>
-                        @endif
-                    </form>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-        </div>
     </div>
-</div>
 @endsection
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index 8b20337..12f34c9 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -2,86 +2,106 @@
 
 @section('title', 'Register')
 
-@section('breadcrumb')
+{{--@section('breadcrumb')
     <li class="breadcrumb-item active" aria-current="page">Register</li>
-@endsection
+@endsection--}}
 
 @section('content')
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
-            <div class="auth">
-            <div class="card">
-                {{--<div class="card-header">{{ __('Register') }}</div>--}}
-
-                <div class="card-body" style="padding-bottom: 0px">
-                    <form method="POST" action="{{ route('register') }}">
-                        @csrf
-
-                        <label for="logo" class="col-md-4 kaplicky">{{ __('kaplicky') }}</label>
-                        <div class="form-group row">
-                            <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('name') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="name" type="text" class="form-control text2 @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" {{--required autocomplete="name" autofocus--}}>
-
+    <div class="vertical-center">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-md-8">
+                    <div class="auth">
+                        <div class="card">
+                            {{--<div class="card-header">{{ __('Register') }}</div>--}}
+
+                            <div class="card-body">
+                                <form method="POST" action="{{ route('register') }}">
+                                    @csrf
+
+                                    <label for="logo" class="col-md-4 kaplicky">{{ __('kaplicky') }}</label>
+                                    <div class="form-group row">
+                                        <label for="name"
+                                               class="col-md-4 col-form-label text text-md-right">{{ __('name') }}</label>
+
+                                        <div class="col-md-6">
+                                            <input id="name" type="text"
+                                                   class="form-control text2 @error('name') is-invalid @enderror"
+                                                   name="name"
+                                                   value="{{ old('name') }}" {{--required autocomplete="name" autofocus--}}>
+
+                                        </div>
+                                    </div>
+
+                                    <div class="form-group row">
+                                        <label for="email"
+                                               class="col-md-4 col-form-label text text-md-right">{{ __('e-mail') }}</label>
+
+                                        <div class="col-md-6">
+                                            <input id="email" type="email @error('email') is-invalid @enderror"
+                                                   class="form-control text2 @error('email') is-invalid @enderror"
+                                                   name="email"
+                                                   value="{{ old('email') }}" {{--required autocomplete="email"--}}>
+
+                                        </div>
+                                    </div>
+
+                                    <div class="form-group row">
+                                        <label for="password"
+                                               class="col-md-4 col-form-label text text-md-right">{{ __('password') }}</label>
+
+                                        <div class="col-md-6">
+                                            <input id="password" type="password"
+                                                   class="form-control text2 @error('password') is-invalid @enderror"
+                                                   name="password" {{--required autocomplete="new-password"--}}>
+
+                                        </div>
+                                    </div>
+
+                                    <div class="form-group row">
+                                        <label for="password-confirm"
+                                               class="col-md-4 col-form-label text text-md-right">{{ __('confirm password') }}</label>
+
+                                        <div class="col-md-6">
+                                            <input id="password-confirm" type="password" class="form-control text2"
+                                                   name="password_confirmation" {{--required autocomplete="new-password"--}}>
+                                        </div>
+                                    </div>
+
+                                    <div class="row">
+                                        <div class="col-md-12">
+                                            <button type="submit" class="btn button-square">
+                                                {{ __('general.register') }}
+                                            </button>
+                                        </div>
+                                    </div>
+
+                                    @if($errors->any())
+                                        <div class="row">
+                                            <div class="col-sm-12">
+                                                <div class="text white pin-left" role="alert">
+                                                    <div class="al">
+                                                        @error('name')
+                                                        <p class="text">{{ $message }}</p>
+                                                        @enderror
+                                                        @error('email')
+                                                        <p class="text">{{ $message }}</p>
+                                                        @enderror
+                                                        @error('password')
+                                                        <p class="text">{{ $message }}</p>
+                                                        @enderror
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    @endif
+
+                                </form>
                             </div>
                         </div>
-
-                        <div class="form-group row">
-                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('e-mail') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="email" type="email" class="form-control text2 @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" {{--required autocomplete="email"--}}>
-
-                            </div>
-                        </div>
-
-                        <div class="form-group row">
-                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('password') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" {{--required autocomplete="new-password"--}}>
-
-                            </div>
-                        </div>
-
-                        <div class="form-group row">
-                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('confirm password') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" {{--required autocomplete="new-password"--}}>
-                            </div>
-                        </div>
-
-                            <div class="col-md-12">
-                                <button type="submit" class="btn button-square">
-                                    {{ __('Register') }}
-                                </button>
-                            </div>
-
-                        @if($errors->any())
-                            <div class="col-md-6 offset-md-2">
-                                <span class="text white pin-left" role="alert">
-                                    <p> </p>
-                                    @error('email')
-                                             <p class="text">{{ $message }}</p>
-                                     @enderror
-                                    @error('password')
-                                             <p class="text">{{ $message }}</p>
-                                     @enderror
-                                    @error('name')
-                                             <p class="text">{{ $message }}</p>
-                                     @enderror
-                                </span>
-                            </div>
-                        @endif
-
-                    </form>
+                    </div>
                 </div>
             </div>
-            </div>
         </div>
     </div>
-</div>
 @endsection
diff --git a/resources/views/categories/index.blade.php b/resources/views/categories/index.blade.php
index 2f9fd51..6496501 100644
--- a/resources/views/categories/index.blade.php
+++ b/resources/views/categories/index.blade.php
@@ -3,34 +3,54 @@
 @section('title', 'Categories')
 
 @section('content')
-    @if(isset($user))
-        {{--<p><?php dd($categories); ?></p>--}}
-        <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 = 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">
+    <div class="container">
+        @if(isset($user))
+
+            <div class="cat-main-div" {{--onclick="resetEnter()"--}}>
+                <div class="d-flex flex-wrap justify-content-around btn-group" data-toggle="buttons">
+                    @for($k = 0; $k < $count;$k++)
+                        <div class="d-flex col-sm-12 col-md-6 col-lg-4 col-xl-3">
+                            <a id="cat-but-id{{$categoryNames[$k]->id}}"{{--href="{{ url('/category/' . $categoryNames[$k]->id) }}"--}}
+                                class="btn btn-dark cat-tile w-100 mt-4">
                                 {{$categoryNames[$k]->nameCZ}}
-                            </button>
-                        </a>
-                    </div>
-                @if($k % 6 == 5 || $k + 1 == $count)
-                    </div>
-                @endif
-            @endfor
+                            </a>
+                        </div>
+                    @endfor
+                </div>
+            </div>
+        @else
+            <ul class="list-group">
+                <li class="list-group-item">
+                    <h3>Not found the USER in the database with number id {{$user->id}}!</h3>
+                </li>
+            </ul>
+        @endif
+    </div>
+    <div class="cat-wrapper">
+        <a class="btn button-square cat-enter-butt" onclick="test()" role="button">enter</a>
+    </div>
+    <div class="row justify-content-md-center">
+        <div class="col-md-auto">
+{{--
+            <a class="btn button-square cat-enter-butt" onclick="test()" role="button">enter</a>
+--}}
         </div>
-    @else
-        <ul class="list-group">
-            <li class="list-group-item">
-                <h3>Not found the USER in the database with number id {{$user->id}}!</h3>
-            </li>
-        </ul>
-    @endif
+    </div>
+    <script>
+        function test()
+        {
+            var btns = $(".btn-dark:not(:disabled):not(.disabled).active");
+            if(btns.length > 0)
+            {
+                var text = "";
+                for(var i = 0; i < btns.length;i++)
+                {
+                    var idE =  btns[i].id;
+                    var num = idE.substring(10, idE.length);
+                    text += num + ",";
+                }
+                window.location.href = "{{url('/category/multi/')}}/" + text;
+            }
+        }
+    </script>
 @endsection
diff --git a/resources/views/charts/index.blade.php b/resources/views/charts/index.blade.php
new file mode 100644
index 0000000..1b3050d
--- /dev/null
+++ b/resources/views/charts/index.blade.php
@@ -0,0 +1,63 @@
+@extends('layouts.app')
+
+@section('title', 'Charts')
+
+@section('content')
+    <div class="container">
+        @if(isset($artefacts))
+            @if(count($artefacts) >= 1)
+                <div class="fav-cat-mybooks">
+                    <h1>Charts</h1>
+                </div>
+                @foreach($artefacts as $artefact)
+                    <div class="artefacts-area mb-5">
+                        <div class="card">
+                            <div class="container card-cus-bottom">
+                                <div class="d-flex flex-row row-list">
+                                    <div class="p-1 flex-fill bd-highlight left_panel_info">
+                                        <a href="{{ action('ArtefactController@view', ['id' => $artefact->id]) /*url('/artefact/' . $artefact->id) */}}">
+                                            <h5 class="card-title highlight-white">{{$artefact->name}}</h5>
+                                        </a>
+                                        <h6 class="card-title ">{{$artefact->author}}</h6>
+
+                                    </div>
+                                    <div class="p-1 flex-fill bd-highlight float-center">
+                                        <div class="text-center right_panel_info">
+
+                                            <div class="charts float-center">
+                                                @if (!$artefact->favourite)
+                                                    <a href="{{  action('ArtefactController@like', ['id' => $artefact->id]) }}">
+                                                        <button id="like_butt_{{$artefact->id}}" type="button"
+                                                                class="btn btn-primary button-image inter_like"></button>
+                                                    </a>
+                                                @else
+                                                    <a href="{{  action('ArtefactController@unlike', ['id' => $artefact->id]) }}">
+                                                        <button id="like_butt_{{$artefact->id}}" type="button"
+                                                                class="btn btn-primary button-image inter_like_filled"></button>
+                                                    </a>
+                                                @endif
+                                                <h6 class="artefact-likes">{{$artefact->likes}}</h6>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                @endforeach
+            @else
+                <ul class="list-group">
+                    <li class="list-group-item">
+                        <h3>No artefacts were added!</h3>
+                    </li>
+                </ul>
+            @endif
+        @else
+            <ul class="list-group">
+                <li class="list-group-item">
+                    <h3>Not found the USER in the database with number id {{$user->id}}!</h3>
+                </li>
+            </ul>
+        @endif
+    </div>
+@endsection
diff --git a/resources/views/components/books.blade.php b/resources/views/components/books.blade.php
new file mode 100644
index 0000000..947df66
--- /dev/null
+++ b/resources/views/components/books.blade.php
@@ -0,0 +1,150 @@
+@foreach($artefacts as $artefact)
+<div class="container books-component">
+    <div class="row mt-5">
+
+        <div class="col-md-6 book-area">
+            @if (!is_null($artefact))
+                <div class="artefact-area">
+                    <div class="card">
+                        <a href="#imageModal" data-toggle="modal">
+                            <img class="card-img-top" src="{{asset('images/artefacts/book_cover_01.jpg')}}" width="100%" height=auto alt="book_cover">
+                        </a>
+                    </div>
+                </div>
+            @endif
+        </div>
+
+        <div class="col-md-6 info-area">
+            <div class="artefact-info">
+                <h3 class="switch-view"><a onclick="switchView()">notes</a></h3>
+                <h3 class="artefact-name">{{$artefact->name}}</h3>
+                <h4 class="artefact-author">{{$artefact->author}}</h4>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt, ex id blandit placerat, dolor nibh venenatis dui, nec malesuada odio sem a leo. Nunc vulputate augue neque.
+                    Donec pulvinar sollicitudin arcu eget sagittis. Sed auctor, enim vel facilisis sodales, felis tellus rutrum quam, ac feugiat leo mauris ac purus. Nam placerat sed risus ut suscipit.
+                    Sed rutrum arcu eget mi fermentum ultrices. Donec egestas volutpat eros, ut tincidunt dolor pulvinar vitae.
+                </p>
+                <p>
+                    Curabitur sem elit, imperdiet ac laoreet vitae, rhoncus quis risus. Suspendisse varius dolor sem, at egestas massa suscipit non.
+                    Morbi sit amet dictum metus, sit amet sollicitudin nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis leo convallis aliquam scelerisque.
+                    Praesent vulputate porttitor quam at egestas. Proin eget orci ligula. Aenean malesuada, eros vitae convallis sagittis, neque leo ullamcorper ante, eu ultricies justo justo in lacus.
+                </p>
+            </div>
+
+            <div class="artefact-notes">
+                <button type="button" class="btn btn-primary button-image inter_info" onclick="switchView()"></button>
+                <h3 class="artefact-name">{{$artefact->name}}</h3>
+                <h4 class="artefact-author">{{$artefact->author}}</h4>
+                @if(count($artefact->metadata) > 0)
+                    @foreach($artefact->metadata as $meta)
+                        <div  id="row_{{$meta->id}}" class="row text-page">
+                            <div class="pin-horizontal">
+                                <div class="metadata">
+                                    <a href="#meta_{{$meta->id}}" data-toggle="collapse" data-target="#meta_{{$meta->id}}" onclick="openNote('#row_{{$meta->id}}')">
+                                        <span>page {{$meta->page}}</span>
+                                    </a>
+                                    <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">
+                                <p>
+                                    {{$meta->noteEN}}
+                                </p>
+                                <div class="text-center">
+                                    @if ($meta->favourite)
+                                        <a href="{{  action('DetailsController@unlike', ['id' => $meta->id]) }}">
+                                            <button id="like_butt_{{$meta->id}}" type="button" class="btn btn-primary button-image inter_like_filled"></button>
+                                        </a>
+                                    @else
+                                        <a href="{{  action('DetailsController@like', ['id' => $meta->id]) }}">
+                                            <button id="like_butt_{{$meta->id}}" type="button" class="btn btn-primary button-image inter_like"></button>
+                                        </a>
+                                    @endif
+                                </div>
+                            </div>
+                        </div>
+
+                    @endforeach
+                @else
+                    <h2>No metadata yet!</h2>
+                @endif
+            </div>
+        </div>
+
+        <div class="book-area col-md-12">
+            <div class="card-cus-bottom">
+                <a class="book-arrow book-arrow-left artefact-link previous-artefact {{$artefacts->onFirstPage() ? "invisible" : "visible"}}" href="{{$artefacts->previousPageUrl()}}"></a>
+                <div class="likes offset-7">
+                    @if ($artefact->favourite)
+                        <a href="{{  action('ArtefactController@unlike', ['id' => $artefact->id]) }}">
+                            <button id="like_butt_{{$artefact->id}}" type="button" class="btn btn-primary button-image inter_like_filled"></button>
+                        </a>
+                    @else
+                        <a href="{{  action('ArtefactController@like', ['id' => $artefact->id]) }}">
+                            <button id="like_butt_{{$artefact->id}}" type="button" class="btn btn-primary button-image inter_like"></button>
+                        </a>
+                    @endif
+                    <h6 class="artefact-likes">{{$artefact->likes}}</h6>
+                </div>
+                <a class="book-arrow book-arrow-right artefact-link next-artefact {{$artefacts->hasMorePages() ? "visible" : "invisible"}}" href="{{$artefacts->nextPageUrl()}}"></a>
+            </div>
+        </div>
+    </div>
+</div>
+@endforeach
+
+<!-- Image modal -->
+<div class="modal image-modal fade" id="imageModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+        </button>
+        <div class="modal-content">
+            <img class="card-img-top" src="{{asset('images/artefacts/book_cover_01.jpg')}}" width="100%" height=auto alt="book_cover">
+        </div>
+    </div>
+</div>
+
+<script>
+    function switchView()
+    {
+        let info = $('.artefact-info');
+        let notes = $('.artefact-notes');
+
+        if (notes.css('display') === 'none')
+        {
+            notes.css('display', 'block');
+            info.css('display', 'none');
+
+            let parent_width = notes.width();
+
+            $(".metadata").each(function() {
+                let metadata = $(this);
+                let width = metadata.width();
+
+                metadata.css("margin-left", (parent_width / 2)  - width);
+            });
+        }
+        else
+        {
+            notes.css('display', 'none');
+            info.css('display', 'block');
+        }
+    }
+
+    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>
diff --git a/resources/views/detail/index.blade.php b/resources/views/detail/index.blade.php
index 2ceba4e..1a812bb 100644
--- a/resources/views/detail/index.blade.php
+++ b/resources/views/detail/index.blade.php
@@ -2,57 +2,71 @@
 
 @section('title', 'Detail')
 
-@section('breadcrumb')
-    <li class="breadcrumb-item" aria-current="page"><a href="{{ url('/') }}">Home</a></li>
-    <li class="breadcrumb-item" aria-current="page"><a href="{{ url('/artefact') }}">Artefacts</a></li>
-    <li class="breadcrumb-item" aria-current="page"><a href="{{ url('/artefact/' . $id) }}">Artefact</a></li>
-    <li class="breadcrumb-item active" aria-current="page">Notes</li>
-@endsection
-
 @section('content')
     <div class="container">
-        <div class="jumbotron mt-5">
-            <div class="text-center">
-                @if (isset($arrArtefact))
-                    <h1>Notes 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>
-                @else
-                    <h2>Given artefact does not exist!</h2>
-                @endif
+        <div class="metadata-area">
+            <div class="text-center mt-5">
+                <h2>notes</h2>
             </div>
-        </div>
-        @if(isset($arrArtefact))
-            <div class="artefact-area text-center mb-4">
-                <h2>{{$arrArtefact->name}}</h2>
-                <h4>{{$arrArtefact->author}}, {{$arrArtefact->year}}</h4>
-                <h5 class="text-muted">{{$arrArtefact->pages}} pages, <i class="fas fa-thumbs-up"></i> {{$likes}}</h5>
-            </div>
-            @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>
+            <span class="arrow-down"></span>
+
+            @if(!empty($metadata) || count($metadata) > 0)
+                @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>
-                    @endforeach
-                </ul>
+                        <div id="meta_{{$meta->id}}" class="metadata-text collapse">
+                            <p>
+                                {{$meta->noteEN}}
+                            </p>
+                            <div class="artefact-info">
+                                <div class="artefact-name">
+                                    {{$meta->artefact->name}}
+                                </div>
+                                <div class="artefact-author">
+                                    {{$meta->artefact->author}}
+                                </div>
+                                <div class="text-center">
+                                    @if ($meta->favourite)
+                                        <a href="{{  action('DetailsController@unlike', ['id' => $meta->id]) }}">
+                                            <button id="like_butt_{{$meta->id}}" type="button" class="btn btn-primary button-image inter_like_filled"></button>
+                                        </a>
+                                    @else
+                                        <a href="{{  action('DetailsController@like', ['id' => $meta->id]) }}">
+                                            <button id="like_butt_{{$meta->id}}" type="button" class="btn btn-primary button-image inter_like"></button>
+                                        </a>
+                                    @endif
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                @endforeach
             @else
-                <ul class="list-group">
-                    <li class="list-group-item">
-                        <h3>No notes for this BOOK were found!</h3>
-                    </li>
-                </ul>
+                <div class="text-center mt-5">
+                    <h2>No metadata!</h2>
+                </div>
             @endif
-        @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/email/register.blade.php b/resources/views/email/register.blade.php
new file mode 100644
index 0000000..9b3604b
--- /dev/null
+++ b/resources/views/email/register.blade.php
@@ -0,0 +1,15 @@
+@component('mail::message')
+# Register email
+
+Hello and welcome to our page. This email was sent to you due to your registration on our page.
+To activate your account, please click the link below.<br>
+
+@component('mail::button', ['url' => $stringHash])
+Activate
+@endcomponent
+
+We much appreciate your initiative.
+
+Thanks,<br>
+{{ config('app.name') }}
+@endcomponent
diff --git a/resources/views/errors/404.blade.php b/resources/views/errors/404.blade.php
new file mode 100644
index 0000000..55160e6
--- /dev/null
+++ b/resources/views/errors/404.blade.php
@@ -0,0 +1,15 @@
+@extends('layouts.app')
+
+@section('content')
+
+    <div class="vertical-center">
+        <div class="container">
+            <div class="row">
+                <div class="col-sm-12">
+                    <span class="error">404 | {{ __('general.not_found') }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+@endsection
diff --git a/resources/views/errors/500.blade.php b/resources/views/errors/500.blade.php
new file mode 100644
index 0000000..af149be
--- /dev/null
+++ b/resources/views/errors/500.blade.php
@@ -0,0 +1,15 @@
+@extends('layouts.app')
+
+@section('content')
+
+    <div class="vertical-center">
+        <div class="container">
+            <div class="row">
+                <div class="col-sm-12">
+                    <span class="error">500 | {{ __('general.server_error') }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+@endsection
diff --git a/resources/views/favartefacts/index.blade.php b/resources/views/favartefacts/index.blade.php
index 2e4a828..670d533 100644
--- a/resources/views/favartefacts/index.blade.php
+++ b/resources/views/favartefacts/index.blade.php
@@ -4,9 +4,11 @@
 
 @section('content')
     <div class="container">
-        {{--<p>The id of the user is {{$user->id}}</p>--}}
         @if(isset($artefacts))
             @if(count($artefacts) >= 1)
+                <div class="fav-cat-mybooks">
+                    <h1>My books</h1>
+                </div>
                 @foreach($artefacts as $artefact)
                     <div class="artefacts-area mb-5">
                         <div class="card">
@@ -15,21 +17,29 @@
                             <img class="card-img-top" src="{{asset('images/artefacts/book_cover_01.jpg')}}" width="100%" height=auto>
                         </a>
                         <div class="container card-cus-bottom">
-                            <div class="flex-row row-list">
-                                <div class="col-xs-2 float-left left_panel_info">
+                            <div class="d-flex flex-row row-list">{{--<div class="flex-row row-list">--}}
+                                <div class="p-1 flex-fill bd-highlight left_panel_info">{{--<div class="col-xs-2 float-left left_panel_info">--}}
                                     <h5 class="card-title ">{{$artefact->name}}</h5>
                                     <h6 class="card-title">{{$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}}" onclick="myFunction({{$artefact->id}}, 1)" type="button" class="btn btn-primary button-image inter_like"></button>
-                                        <button id="like_butt2_{{$artefact->id}}" onclick="myFunction({{$artefact->id}}, 0)" type="button" class="btn btn-primary button-image inter_like_filled"></button>
-                                        <span class="likes_text">
-                                          <h6>{{$artefact->likes}}</h6>
-                                        </span>
+                                <div class="p-1 flex-fill bd-highlight float-right">{{--<div class="col-xs-2 float-right right_panel_info">--}}
+                                    <div class="text-right right_panel_info">{{--<div class="float-right text-center">--}}
+                                        <div class="float-left">
+                                            <button id="info_butt_{{$artefact->id}}" type="button" class="btn btn-primary float-left button-image inter_info"></button>
+                                        </div>
+                                        <div class="fav-cat-likes-t float-right">
+                                            <form method="POST" action="{{ url('/artefact/like/' . $artefact->id) }}">
+                                                @csrf
+                                                <button id="like_butt_{{$artefact->id}}" onclick="myFunction({{$artefact->id}}, 1)" type="submit" class="btn btn-primary button-image inter_like"></button>
+                                            </form>
+                                            <form method="POST" action="{{ url('/artefact/unlike/' . $artefact->id) }}">
+                                                @csrf
+                                                <button id="like_butt2_{{$artefact->id}}" onclick="myFunction({{$artefact->id}}, 0)" type="submit" class="btn btn-primary button-image inter_like_filled"></button>
+                                            </form>
+                                            <span class="likes_text">
+                                                <h6>{{$artefact->likes}}</h6>
+                                            </span>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -39,7 +49,7 @@
                 @endforeach
             @else
                 <ul class="list-group">
-                    <li class="list-group-item">
+                    <li class="list-group-item fav-cat-nofav">
                         <h3>No favorites were added!</h3>
                     </li>
                 </ul>
diff --git a/resources/views/favmetadata/index.blade.php b/resources/views/favmetadata/index.blade.php
index de5d33c..5e33774 100644
--- a/resources/views/favmetadata/index.blade.php
+++ b/resources/views/favmetadata/index.blade.php
@@ -10,9 +10,6 @@
 @section('content')
     <div class="container">
         <div class="metadata-area">
-            <div class="text-center mt-5">
-                <h2>notes</h2>
-            </div>
             <span class="arrow-down"></span>
 
             @if(count($metadata) > 0)
@@ -20,12 +17,16 @@
                     <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}}" data-toggle="collapse" data-target="#meta_{{$meta->id}}" onclick="openNote('#row_{{$meta->id}}')">
+                                    <span>page {{$meta->page}}</span>
+                                </a>
                                 <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}}
+                            <p>
+                                {{$meta->noteEN}}
+                            </p>
                             <div class="artefact-info">
                                 <div class="artefact-name">
                                     {{$meta->artefact->name}}
@@ -34,7 +35,9 @@
                                     {{$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>
+                                    <a href="{{  action('FavoriteMetadataController@unlike', ['id' => $meta->id]) }}">
+                                        <button id="like_butt_{{$meta->id}}" type="button" class="btn btn-primary button-image inter_like_filled"></button>
+                                    </a>
                                 </div>
                             </div>
                         </div>
@@ -59,7 +62,6 @@
             {
                 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 deac31f..4bbd9cb 100644
--- a/resources/views/inc/sidebar.blade.php
+++ b/resources/views/inc/sidebar.blade.php
@@ -1,52 +1,133 @@
 <div id="sidebar" class="sidenav">
-    <a href="javascript:void(0)" class="arrow arrow-left" s onclick="closeNav()"></a>
-    <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>
-        </li>
-        @if (Route::has('register'))
-        <li class="nav-item">
-            <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
-        </li>
-        @endif
+    <a href="javascript:void(0)" class="arrow arrow-left" onclick="closeNav()"></a>
+    <ul style="padding-left: 0; margin-top: 5rem;">
+        @if(Request::is('login')||Request::is('register'))
+            <li class="nav-item">
+                <a class="menu-item text-headline" href="{{ url('/') }}">
+                    {{ __('general.home') }}
+                </a>
+                <a class="menu-item text-headline" href="{{ route('login') }}">
+                    {{ __('general.login') }}
+                </a>
+            </li>
+            @if (Route::has('register'))
+                <li class="nav-item">
+                    <a class="menu-item text-headline" href="{{ route('register') }}">
+                        {{ __('general.register') }}
+                    </a>
+                </li>
+            @endif
         @else
-        <li class="nav-item dropdown">
-            <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>
+            <li class="nav-item">
+                <a class="menu-item text-headline" href="{{ url('/') }}">
+                    {{ __('general.home') }}
+                </a>
 
-                <a class="dropdown-item text-headline" href="{{ url('/favmetadata') }}">my notes</a>
+                <a class="menu-item text-headline" href="{{ url('/categories') }}">
+                    {{ __('general.topics') }}
+                </a>
 
+                <a class="menu-item text-headline" href="{{ url('/artefact') }}">
+                    {{ __('general.artefacts') }}
+                </a>
 
+                <a class="menu-item text-headline" href="{{ url('/favartefacts') }}">
+                    {{ __('general.favourite_artefacts') }}
+                </a>
 
-            <a class="dropdown-item text-headline" href="{{ url('/charts') }}">charts</a>
+                <a class="menu-item text-headline" href="{{ url('/favmetadata') }}">
+                    {{ __('general.favourite_metadata') }}
+                </a>
 
+                <a class="menu-item text-headline" href="{{ url('/charts') }}">
+                    {{ __('general.charts') }}
+                </a>
 
+            </li>
+            <li class="nav-item down">
+{{--                <a class="menu-item text-headline" href="{{ url('/czech') }}">--}}
+{{--                    {{ __('general.cs') }}--}}
+{{--                </a>--}}
+                @guest
+                @else
+                    <a class="menu-item text-headline" href="{{ route('logout') }}" onclick="
+            event.preventDefault();
+            document.getElementById('logout-form').submit();">
+                        {{ __('general.logout') }}
+                    </a>
+
+                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
+                        @csrf
+                    </form>
+                @endguest
+            </li>
+        @endif
+    </ul>
+</div>
 
-                <a class="dropdown-item text-headline" href="{{ route('logout') }}"
-                   onclick="event.preventDefault();
-                                                     document.getElementById('logout-form').submit();">
-                    {{ __('logout') }}
+<nav class="navbar navbar-expand-md navbar-light top-bar">
+    <span class="arrow arrow-right" onclick="openNav()"></span>
+    @if(!Request::is('login')&&!Request::is('register'))
+        <a for="logo" class="logo-kaplicky kaplicky" href="{{ url('/') }}">
+            {{ __('general.kaplicky') }}
+        </a>
+    @endif
+    <div class="bar-desktop">
+        @if(Request::is('login')||Request::is('register'))
+            <a class="menu-item text-headline-desktop" href="{{ url('/') }}">
+                {{ __('general.home') }}
+            </a>
+            <a class="menu-item text-headline-desktop" href="{{ route('login') }}">
+                {{ __('general.login') }}
+            </a>
+            @if (Route::has('register'))
+                <a class="menu-item text-headline-desktop" href="{{ route('register') }}">
+                    {{ __('general.register') }}
+                </a>
+            @endif
+        @else
+            <a class="menu-item text-headline-desktop" href="{{ url('/') }}">
+                {{ __('general.home') }}
+            </a>
+
+            <a class="menu-item text-headline-desktop" href="{{ url('/categories') }}">
+                {{ __('general.topics') }}
+            </a>
+
+            <a class="menu-item text-headline-desktop" href="{{ url('/artefact') }}">
+                {{ __('general.artefacts') }}
+            </a>
+
+            <a class="menu-item text-headline-desktop" href="{{ url('/favartefacts') }}">
+                {{ __('general.favourite_artefacts') }}
+            </a>
+
+            <a class="menu-item text-headline-desktop" href="{{ url('/favmetadata') }}">
+                {{ __('general.favourite_metadata') }}
+            </a>
+
+            <a class="menu-item text-headline-desktop" href="{{ url('/charts') }}">
+                {{ __('general.charts') }}
+            </a>
+
+{{--            <a class="menu-item text-headline-desktop" href="{{ url('/czech') }}">--}}
+{{--                {{ __('general.cs') }}--}}
+{{--            </a>--}}
+            @guest
+            @else
+                <a class="menu-item text-headline-desktop" href="{{ route('logout') }}" onclick="
+            event.preventDefault();
+            document.getElementById('logout-form').submit();">
+                    {{ __('general.logout') }}
                 </a>
 
                 <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                     @csrf
                 </form>
-        </li>
-        @endguest
-
-</div>
-
-
-<span class="arrow arrow-right" onclick="openNav()"></span>
+            @endguest
+        @endif
+    </div>
+</nav>
 {{--<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('/') }}">
@@ -56,16 +137,25 @@
 <script>
     function openNav() {
         var x = window.matchMedia("(max-width: 540px)")
-        if(x.matches){
+        if (x.matches) {
             document.getElementById("sidebar").style.width = "50vw";
-        }
-        else{
+        } else {
             document.getElementById("sidebar").style.width = "250px";
         }
-
     }
 
     function closeNav() {
         document.getElementById("sidebar").style.width = "0";
     }
 </script>
+
+<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
+<script>
+    $(function () {
+        $('a').each(function () {
+            if ($(this).prop('href') == window.location.href) {
+                $(this).addClass('active');// $(this).parents('a').addClass('active');
+            }
+        });
+    });
+</script>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 8cd0faf..5006a23 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -16,16 +16,19 @@
 
     <!-- Styles -->
     <link href="{{ asset('css/app.css') }}" rel="stylesheet">
-    
+
 </head>
 <body>
 
-        @if(!Request::is('/'))
-            @include('inc/sidebar')
-        @endif
+@if(!Request::is('/'))
+    @include('inc/sidebar')
+@endif
 
+@yield('content')
 
-                    @yield('content')
+@if(!Request::is('/'))
+    @include('cookieConsent::index')
+@endif
 
 </body>
 </html>
diff --git a/resources/views/pages/index.blade.php b/resources/views/pages/index.blade.php
index 2527552..b549cb5 100644
--- a/resources/views/pages/index.blade.php
+++ b/resources/views/pages/index.blade.php
@@ -9,23 +9,25 @@
             <div class="logos-overlay">
                 <div class="museum-logo">
                     <div class="text-center">
-                        <img src="{{ asset('images/icons/upm-logo.png') }}" alt="upm">
+                        <a href="https://www.upm.cz/">
+                            <img src="{{ asset('images/icons/upm-logo.svg') }}" alt="upm">
+                        </a>
                     </div>
                 </div>
                 <div class="row social-logo">
-                    <div class="col-md-4">
-                        <a href="">
-                            <img src="{{ asset('images/icons/facebook.png') }}" alt="facebook">
+                    <div class="logo">
+                        <a href="https://www.facebook.com/upmpraha/">
+                            <img src="{{ asset('images/icons/facebook.svg') }}" alt="facebook">
                         </a>
                     </div>
-                    <div class="col-md-4">
-                        <a href="">
-                            <img src="{{ asset('images/icons/instagram.png') }}" alt="instagram">
+                    <div class="logo">
+                        <a href="https://www.instagram.com/museumofdecorativeartsprague/">
+                            <img src="{{ asset('images/icons/instagram.svg') }}" alt="instagram">
                         </a>
                     </div>
-                    <div class="col-md-4">
-                        <a href="">
-                            <img src="{{ asset('images/icons/wikipedia.png') }}" alt="wikipedia">
+                    <div class="logo">
+                        <a href="https://cs.wikipedia.org/wiki/Um%C4%9Bleckopr%C5%AFmyslov%C3%A9_muzeum_v_Praze">
+                            <img src="{{ asset('images/icons/wikipedia.svg') }}" alt="wikipedia">
                         </a>
                     </div>
                 </div>
@@ -44,13 +46,13 @@
                 Proin id tempor enim, eu ornare nisi. Phasellus ornare metus ut mi dapibus, varius elementum leo malesuada.
             </p>
         </div>
-        <a class="carousel-control-prev" href="#homepage_carousel" role="button" data-slide="prev">
+        <!-- <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">
+        </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>
+        </a> -->
     </div>
 @endsection
diff --git a/resources/views/verify/index.blade.php b/resources/views/verify/index.blade.php
new file mode 100644
index 0000000..d2dfefd
--- /dev/null
+++ b/resources/views/verify/index.blade.php
@@ -0,0 +1,9 @@
+@extends('layouts.app')
+
+@section('title', 'Favorite artefacts')
+
+@section('content')
+    <div class="container ver-text">
+        <h2>{{$text}}</h2>
+    </div>
+@endsection
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
deleted file mode 100644
index 3fb48cc..0000000
--- a/resources/views/welcome.blade.php
+++ /dev/null
@@ -1,100 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-
-        <title>Laravel</title>
-
-        <!-- Fonts -->
-        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
-
-        <!-- Styles -->
-        <style>
-            html, body {
-                background-color: #fff;
-                color: #636b6f;
-                font-family: 'Nunito', sans-serif;
-                font-weight: 200;
-                height: 100vh;
-                margin: 0;
-            }
-
-            .full-height {
-                height: 100vh;
-            }
-
-            .flex-center {
-                align-items: center;
-                display: flex;
-                justify-content: center;
-            }
-
-            .position-ref {
-                position: relative;
-            }
-
-            .top-right {
-                position: absolute;
-                right: 10px;
-                top: 18px;
-            }
-
-            .content {
-                text-align: center;
-            }
-
-            .title {
-                font-size: 84px;
-            }
-
-            .links > a {
-                color: #636b6f;
-                padding: 0 25px;
-                font-size: 13px;
-                font-weight: 600;
-                letter-spacing: .1rem;
-                text-decoration: none;
-                text-transform: uppercase;
-            }
-
-            .m-b-md {
-                margin-bottom: 30px;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="flex-center position-ref full-height">
-            @if (Route::has('login'))
-                <div class="top-right links">
-                    @auth
-                        <a href="{{ url('/home') }}">Home</a>
-                    @else
-                        <a href="{{ route('login') }}">Login</a>
-
-                        @if (Route::has('register'))
-                            <a href="{{ route('register') }}">Register</a>
-                        @endif
-                    @endauth
-                </div>
-            @endif
-
-            <div class="content">
-                <div class="title m-b-md">
-                    Laravel
-                </div>
-
-                <div class="links">
-                    <a href="https://laravel.com/docs">Docs</a>
-                    <a href="https://laracasts.com">Laracasts</a>
-                    <a href="https://laravel-news.com">News</a>
-                    <a href="https://blog.laravel.com">Blog</a>
-                    <a href="https://nova.laravel.com">Nova</a>
-                    <a href="https://forge.laravel.com">Forge</a>
-                    <a href="https://vapor.laravel.com">Vapor</a>
-                    <a href="https://github.com/laravel/laravel">GitHub</a>
-                </div>
-            </div>
-        </div>
-    </body>
-</html>
diff --git a/routes/web.php b/routes/web.php
index 0a1d100..d8127ec 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -15,13 +15,22 @@ use Illuminate\Support\Facades\Route;
 
 Route::get('/', 'PagesController@index');
 
+Route::get('/verify/{id}', 'VerifyRegisterController@verifyUser');
 Route::get('/artefact', 'ArtefactController@default');
 Route::get('/artefact/{id}', 'ArtefactController@view');
+Route::get('/artefact/like/{id}', 'ArtefactController@like');
+Route::get('/artefact/unlike/{id}', 'ArtefactController@unlike');
 Route::get('/category/{id}', 'ArtefactController@showCategory');
+Route::get('/category/multi/{id}', 'ArtefactController@showCategories');
+Route::get('/detail/like/{id}', 'DetailsController@like');
+Route::get('/detail/unlike/{id}', 'DetailsController@unlike');
 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', 'store')));
+Route::resource('/charts', 'ChartsController', array('only' => array('index', 'show', 'store')));
 Route::get('/favmetadata', 'FavoriteMetadataController@index');
+Route::get('/favmetadata/unlike/{id}', 'FavoriteMetadataController@unlike');
+Route::get('/artefact/{id}', 'ArtefactController@view');
 
 
 Auth::routes();
