diff --git a/app/Http/Controllers/highlightsController.php b/app/Http/Controllers/highlightsController.php
index 11aaa1bf..42eebf16 100644
--- a/app/Http/Controllers/highlightsController.php
+++ b/app/Http/Controllers/highlightsController.php
@@ -80,8 +80,8 @@ public function landing(): View
         $periods = Highlights::getPeriods();
         $periods = $this->group_by("period_assigned", $periods['data']);
         $contexts = HighlightPages::getContexts();
-        $context = $this->group_by("section", $contexts['data']);
-        return view('highlights.landing', compact('pharos', 'periods', 'context', 'page'));
+        $contexts = $this->group_by("section", $contexts['data']);
+        return view('highlights.landing', compact('pharos', 'periods', 'contexts', 'page'));
     }
 
     /**
diff --git a/app/View/Components/carouselSlide.php b/app/View/Components/carouselSlide.php
new file mode 100644
index 00000000..d4c74e06
--- /dev/null
+++ b/app/View/Components/carouselSlide.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace App\View\Components;
+
+use Illuminate\View\Component;
+
+class carouselSlide extends Component
+{
+    public array $slides;
+    public string $class;
+    public string $imageObject;
+    public string $title;
+    public string $route;
+    public string $param;
+    public bool $slugify;
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(array $slides, string $class, string $imageObject, string $title, string $route, string $param, bool $slugify)
+    {
+        $this->slides = $slides;
+        $this->class = $class;
+        $this->imageObject = $imageObject;
+        $this->title = $title;
+        $this->route = $route;
+        $this->param = $param;
+        $this->slugify = $slugify;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.carousel-slide');
+    }
+}
diff --git a/package-lock.json b/package-lock.json
index 57e79e0c..f2bf45bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
                 "@fortawesome/fontawesome-free": "^6.1.1",
                 "@popperjs/core": "^2.11.5",
                 "@xmldom/xmldom": "^0.8.2",
-                "autoprefixer": "^10.4.5",
+                "autoprefixer": "^10.4.7",
                 "clean-css": "^5.3.0",
                 "leaflet-iiif": "^3.0.0",
                 "minimist": ">=1.2.6",
@@ -3131,9 +3131,9 @@
             }
         },
         "node_modules/autoprefixer": {
-            "version": "10.4.5",
-            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.5.tgz",
-            "integrity": "sha512-Fvd8yCoA7lNX/OUllvS+aS1I7WRBclGXsepbvT8ZaPgrH24rgXpZzF0/6Hh3ZEkwg+0AES/Osd196VZmYoEFtw==",
+            "version": "10.4.7",
+            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
+            "integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -3145,8 +3145,8 @@
                 }
             ],
             "dependencies": {
-                "browserslist": "^4.20.2",
-                "caniuse-lite": "^1.0.30001332",
+                "browserslist": "^4.20.3",
+                "caniuse-lite": "^1.0.30001335",
                 "fraction.js": "^4.2.0",
                 "normalize-range": "^0.1.2",
                 "picocolors": "^1.0.0",
@@ -15851,12 +15851,12 @@
             "peer": true
         },
         "autoprefixer": {
-            "version": "10.4.5",
-            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.5.tgz",
-            "integrity": "sha512-Fvd8yCoA7lNX/OUllvS+aS1I7WRBclGXsepbvT8ZaPgrH24rgXpZzF0/6Hh3ZEkwg+0AES/Osd196VZmYoEFtw==",
+            "version": "10.4.7",
+            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
+            "integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
             "requires": {
-                "browserslist": "^4.20.2",
-                "caniuse-lite": "^1.0.30001332",
+                "browserslist": "^4.20.3",
+                "caniuse-lite": "^1.0.30001335",
                 "fraction.js": "^4.2.0",
                 "normalize-range": "^0.1.2",
                 "picocolors": "^1.0.0",
diff --git a/package.json b/package.json
index c0ea7e0a..e995cf6f 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
         "@fortawesome/fontawesome-free": "^6.1.1",
         "@popperjs/core": "^2.11.5",
         "@xmldom/xmldom": "^0.8.2",
-        "autoprefixer": "^10.4.5",
+        "autoprefixer": "^10.4.7",
         "clean-css": "^5.3.0",
         "leaflet-iiif": "^3.0.0",
         "minimist": ">=1.2.6",
diff --git a/resources/views/components/carousel-slide.blade.php b/resources/views/components/carousel-slide.blade.php
new file mode 100644
index 00000000..2a5462c5
--- /dev/null
+++ b/resources/views/components/carousel-slide.blade.php
@@ -0,0 +1,67 @@
+<div class="carousel-item {{ $class }}">
+    <div class="row">
+        @foreach($slides as $slide)
+            @if(array_key_exists('0',$slide))
+                <div class="col-md-4 mb-3">
+                    <div class="card">
+                        @if($slugify)
+                            <a href="{{ route($route, Str::slug($slide[0][$param],'-')) }}" class="stretched-link">
+                                <img class="card-img-top" alt="{{$slide[0][$title]}}"
+                                     src="{{ $slide[0][$imageObject]['data']['thumbnails'][13]['url'] }}">
+                            </a>
+                        @else
+                            <a href="{{ route($route, $slide[0][$param]) }}" class="stretched-link">
+                                <img class="card-img-top" alt="{{$slide[0][$title]}}"
+                                     src="{{ $slide[0][$imageObject]['data']['thumbnails'][13]['url'] }}">
+                            </a>
+                        @endif
+                        <div class="card-body">
+                            <h3 class="card-title">
+                                @if($slugify)
+                                    <a href="{{ route($route, Str::slug($slide[0][$param],'-')) }}"
+                                       class="stretched-link">
+                                        {{ ucfirst(str_replace('-',' ', $slide[0][$title])) }}
+                                    </a>
+                                @else
+                                    <a href="{{ route($route, $slide[0][$param]) }}" class="stretched-link">
+                                        {{ ucfirst(str_replace('-',' ', $slide[0][$title])) }}
+                                    </a>
+                                @endif
+                            </h3>
+                        </div>
+                    </div>
+                </div>
+            @else
+                <div class="col-md-4 mb-3">
+                    <div class="card">
+                        @if($slugify)
+                            <a href="{{ route($route, Str::slug($slide[$param],'-')) }}" class="stretched-link">
+                                <img class="card-img-top" alt="{{$slide[$title]}}"
+                                     src="{{ $slide[$imageObject]['data']['thumbnails'][13]['url'] }}">
+                            </a>
+                        @else
+                            <a href="{{ route($route, $slide[$param]) }}" class="stretched-link">
+                                <img class="card-img-top" alt="{{$slide[$title]}}"
+                                     src="{{ $slide[$imageObject]['data']['thumbnails'][13]['url'] }}">
+
+                            </a>
+                        @endif
+                        <div class="card-body">
+                            <h3 class="card-title">
+                                @if($slugify)
+                                    <a href="{{ route($route, Str::slug($slide[$param],'-')) }}" class="stretched-link">
+                                        {{ ucfirst(str_replace('-',' ', $slide[$title])) }}
+                                    </a>
+                                @else
+                                    <a href="{{ route($route, $slide[$param]) }}" class="stretched-link">
+                                        {{ ucfirst(str_replace('-',' ', $slide[$title])) }}
+                                    </a>
+                                @endif
+                            </h3>
+                        </div>
+                    </div>
+                </div>
+            @endif
+        @endforeach
+    </div>
+</div>
diff --git a/resources/views/highlights/landing.blade.php b/resources/views/highlights/landing.blade.php
index 2cd93ea4..5e5215c8 100644
--- a/resources/views/highlights/landing.blade.php
+++ b/resources/views/highlights/landing.blade.php
@@ -116,203 +116,153 @@
 @endsection
 
 @section('theme-carousel')
-    <div class="container-fluid py-2 bg-white">
-        <h3>Explore highlights by theme</h3>
-        <div class="row mb-2">
-            <div id="carouselThemes" class="carousel slide sliders" data-ride="carousel" data-interval="false">
-                <div class="carousel-inner row w-100 mx-auto">
-                    @php
-                        $slides = $pharos['data'];
-                        $count = sizeof($slides);
-                        $first = array_slice($slides,0,1);
-                        $rest = array_slice($slides, 1, $count)
-                    @endphp
-
-                    @foreach($first as $record)
-                        <div class="carousel-item  active">
-                            <div class="col-md-4">
-                                <div class="card card-fitz h-100">
-                                    @if(!is_null($record['hero_image']))
-                                        <a href="{{ route('theme', [$record['slug']]) }}">
-                                            <img class="card-img-top"
-                                                 src="{{ $record[ 'hero_image']['data']['thumbnails'][4]['url']}}"
-                                                 alt="{{ $record[ 'hero_image']['title'] }}" loading="lazy"/>
-                                        </a>
-                                    @endif
-                                    <div class="card-body h-100">
-                                        <h3>
-                                            <a href="{{ route('theme', [$record['slug']]) }}">{!! ucfirst(str_replace('-',' ', $record['title'])) !!}</a>
-                                        </h3>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    @endforeach
-                    @foreach($rest as $record)
-                        <div class="carousel-item">
-                            <div class="col-md-4">
-                                <div class="card card-fitz">
-                                    @if(!is_null($record['hero_image']))
-                                        <a href="{{ route('theme', [$record['slug']]) }}"><img class="img-fluid"
-                                                                                               src="{{ $record[ 'hero_image']['data']['thumbnails'][4]['url']}}"
-                                                                                               alt="{{ $record[ 'hero_image']['title'] }}"
-                                                                                               loading="lazy"/></a>
-                                    @endif
-                                    <div class="card-body">
-                                        <h3>
-                                            <a href="{{ route('theme', [$record['slug']]) }}">{!! ucfirst(str_replace('-',' ', $record['title'])) !!}</a>
-                                        </h3>
-                                    </div>
-                                </div>
-                            </div>
+    <section class="pt-3 pb-2">
+        <div class="container-fluid bg-grey">
+            <div class="row">
+                <div class="col-6">
+                    <h3 class="my-3">Explore Highlights by theme</h3>
+                </div>
+                <div class="col-12">
+                    <div id="pharos" class="carousel slide"  data-bs-ride="carousel" data-bs-interval="false">
+                        <div class="carousel-inner">
+                            @foreach(array_chunk($pharos['data'],3,true) as $slides)
+                                @if($loop->first)
+                                    <x-carousel-slide
+                                        :slides="$slides"
+                                        :class="'active'"
+                                        :imageObject="'hero_image'"
+                                        :title="'title'"
+                                        :route="'theme'"
+                                        :param="'slug'"
+                                        :slugify="'false'"
+                                    />
+                                @else
+                                    <x-carousel-slide
+                                        :slides="$slides"
+                                        :class="''"
+                                        :imageObject="'hero_image'"
+                                        :title="'title'"
+                                        :route="'theme'"
+                                        :param="'slug'"
+                                        :slugify="'false'"
+                                    />
+                                @endif
+                            @endforeach
                         </div>
-                    @endforeach
+                        <button class="carousel-control-prev" type="button" data-bs-target="#pharos" data-bs-slide="prev">
+                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                            <span class="visually-hidden">Previous</span>
+                        </button>
+                        <button class="carousel-control-next" type="button" data-bs-target="#pharos" data-bs-slide="next">
+                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                            <span class="visually-hidden">Next</span>
+                        </button>
+                    </div>
                 </div>
-                <a class="carousel-control-prev" href="#carouselThemes" 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="#carouselThemes" role="button" data-slide="next">
-                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                    <span class="sr-only">Next</span>
-                </a>
             </div>
         </div>
-    </div>
+    </section>
 @endsection
 
 @section('period-carousel')
-    <div class="container-fluid py-2 bg-white">
-        <h3>Explore highlights by period</h3>
-        <div class="row mb-2">
-            <div id="carouselPeriods" class="carousel slide sliders" data-ride="carousel"
-                 data-interval="false" data-pause="hover">
-                <div class="carousel-inner row w-100 mx-auto">
-                    @php
-                        $slides = $periods;
-                        $count = sizeof($slides);
-                        $first = array_slice($slides,0,1);
-                        $rest = array_slice($slides, 1, $count)
-                    @endphp
-
-                    @foreach($first as $record)
-                        <div class="carousel-item active">
-                            <div class="col-md-4 ">
-                                <div class="card card-fitz h-100 ">
-                                    @if(!is_null($record[0]['image']))
-                                        <a href="{{ route('period', [Str::slug($record[0]['period_assigned'],'-')]) }}/"><img
-                                                class="img-fluid"
-                                                src="{{ $record[0][ 'image']['data']['thumbnails'][4]['url']}}"
-                                                alt="{{ $record[0]['period_assigned'] }}" loading="lazy"/></a>
-                                    @endif
-                                    <div class="card-body">
-                                        <h3>
-                                            <a href="{{ route('period', [Str::slug($record[0]['period_assigned'],'-')]) }}">{!! ucfirst(str_replace('-',' ', $record[0]['period_assigned'])) !!}</a>
-                                        </h3>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    @endforeach
-                    @foreach($rest as $record)
-                        <div class="carousel-item">
-                            <div class="col-md-4">
-                                <div class="card card-fitz h-100">
-                                    @if(!is_null($record[0][ 'image']))
-                                        <a href="{{ route('period', [Str::slug($record[0]['period_assigned'],'-')]) }}">
-                                            <img class="img-fluid"
-                                                 src="{{ $record[0][ 'image']['data']['thumbnails'][4]['url']}}"
-                                                 alt="{{ $record[0]['period_assigned'] }}" loading="lazy"/>
-                                        </a>
-                                    @endif
-                                    <div class="card-body">
-                                        <h3>
-                                            <a href="{{ route('period', [Str::slug($record[0]['period_assigned'],'-')]) }}">{!! ucfirst(str_replace('-',' ', $record[0]['period_assigned'])) !!}</a>
-                                        </h3>
-                                    </div>
-                                </div>
-                            </div>
+    <section class="pt-5 pb-5">
+        <div class="container-fluid bg-pastel">
+            <div class="row">
+                <div class="col-6">
+                    <h3 class="my-3">Explore periods</h3>
+                </div>
+                <div class="col-12">
+                    <div id="periods" class="carousel slide"  data-bs-ride="carousel" data-bs-interval="false">
+                        <div class="carousel-inner">
+                            @foreach(array_chunk($periods,3,true) as $slides)
+                                @if($loop->first)
+                                    <x-carousel-slide
+                                        :slides="$slides"
+                                        :class="'active'"
+                                        :imageObject="'image'"
+                                        :title="'period_assigned'"
+                                        :route="'period'"
+                                        :param="'period_assigned'"
+                                        :slugify="'true'"
+                                    />
+                                @else
+                                    <x-carousel-slide
+                                        :slides="$slides"
+                                        :class="''"
+                                        :imageObject="'image'"
+                                        :title="'period_assigned'"
+                                        :route="'period'"
+                                        :param="'period_assigned'"
+                                        :slugify="true"
+                                    />
+                                @endif
+                            @endforeach
                         </div>
-                    @endforeach
+                        <button class="carousel-control-prev" type="button" data-bs-target="#periods" data-bs-slide="prev">
+                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                            <span class="visually-hidden">Previous</span>
+                        </button>
+                        <button class="carousel-control-next" type="button" data-bs-target="#periods" data-bs-slide="next">
+                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                            <span class="visually-hidden">Next</span>
+                        </button>
+                    </div>
                 </div>
-                <a class="carousel-control-prev" href="#carouselPeriods" 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="#carouselPeriods" role="button" data-slide="next">
-                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                    <span class="sr-only">Next</span>
-                </a>
             </div>
         </div>
-    </div>
+    </section>
+
 @endsection
 
 @section('context-carousel')
-    <div class="container-fluid py-2 bg-white">
-        <h3>Explore object contexts</h3>
-        <div class="row">
-            <div id="carouselContexts" class="carousel slide sliders" data-ride="carousel"
-                 data-interval="false" data-pause="hover">
-                <div class="carousel-inner row w-100 mx-auto">
-                    @php
-                        $slides = $context;
-                        $count = sizeof($slides);
-                        $first = array_slice($slides,0,1);
-                        $rest = array_slice($slides, 1, $count)
-                    @endphp
+    <section class="pt-2 pb-2">
+        <div class="container-fluid bg-gdbo">
+            <div class="row">
+                <div class="col-6">
+                    <h3 class="my-3">Explore Contexts</h3>
+                </div>
 
-                    @foreach($first as $record)
-                        <div class="carousel-item active">
-                            <div class="col-md-4 ">
-                                <div class="card card-fitz h-100 ">
-                                    @if(!is_null($record[0]['hero_image']))
-                                        <a href="{{ route('context-sections',[$record[0]['section']]) }}"><img
-                                                class="img-fluid"
-                                                src="{{ $record[0][ 'hero_image']['data']['thumbnails'][4]['url']}}"
-                                                alt="{{ $record[0][ 'hero_image_alt_text'] }}" loading="lazy"/></a>
-                                    @endif
-                                    <div class="card-body">
-                                        <h3>
-                                            <a href="{{ route('context-sections',[$record[0]['section']]) }}">{!! ucfirst(str_replace('-',' ', $record[0]['section'])) !!}</a>
-                                        </h3>
-                                    </div>
-                                </div>
-                            </div>
+                <div class="col-12">
+                    <div id="contexts" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
+                        <div class="carousel-inner">
+                            @foreach(array_chunk($contexts,3,true) as $slides)
+                                @if($loop->first)
+                                    <x-carousel-slide
+                                        :slides="$slides"
+                                        :class="'active'"
+                                        :imageObject="'hero_image'"
+                                        :title="'section'"
+                                        :route="'context-sections'"
+                                        :param="'section'"
+                                        :slugify="'false'"
+                                    />
+                                @else
+                                    <x-carousel-slide
+                                        :slides="$slides"
+                                        :class="''"
+                                        :imageObject="'hero_image'"
+                                        :title="'section'"
+                                        :route="'context-sections'"
+                                        :param="'section'"
+                                        :slugify="'false'"
+                                    />
+                                @endif
+                            @endforeach
                         </div>
-                    @endforeach
-                    @foreach($rest as $record)
-                        <div class="carousel-item">
-                            <div class="col-md-4">
-                                <div class="card card-fitz h-100">
-                                    @if(!is_null($record[0]['hero_image']))
-                                        <a href="{{ route('context-sections',[$record[0]['section']]) }}">
-                                            <img class="img-fluid"
-                                                 src="{{ $record[0]['hero_image']['data']['thumbnails'][4]['url']}}"
-                                                 alt="{{ $record[0][ 'hero_image_alt_text'] }}" loading="lazy"/>
-                                        </a>
-                                    @endif
-                                    <div class="card-body">
-                                        <h3>
-                                            <a href="{{ route('context-sections',[$record[0]['section']]) }}">
-                                                {!! ucfirst(str_replace('-',' ', $record[0]['section'])) !!}
-                                            </a>
-                                        </h3>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    @endforeach
+                        <button class="carousel-control-prev" type="button" data-bs-target="#contexts" data-bs-slide="prev">
+                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                            <span class="visually-hidden">Previous</span>
+                        </button>
+                        <button class="carousel-control-next" type="button" data-bs-target="#contexts" data-bs-slide="next">
+                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                            <span class="visually-hidden">Next</span>
+                        </button>
+                    </div>
                 </div>
-                <a class="carousel-control-prev" href="#carouselContexts" 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="#carouselContexts" role="button" data-slide="next">
-                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                    <span class="sr-only">Next</span>
-                </a>
             </div>
         </div>
-    </div>
+    </section>
+
 @endsection
+
+
diff --git a/resources/views/includes/css/css.blade.php b/resources/views/includes/css/css.blade.php
index 92f3ad0d..aaddb41c 100644
--- a/resources/views/includes/css/css.blade.php
+++ b/resources/views/includes/css/css.blade.php
@@ -18,6 +18,4 @@
 }
 @include('includes.css.parallax')
 </style>
-@hasSection('theme-carousel')
-  <link href="{{ URL::to('/css/cards-carousel.css') }}" rel="stylesheet" media="screen">
-@endif
+
diff --git a/resources/views/includes/scripts/javascript.blade.php b/resources/views/includes/scripts/javascript.blade.php
index cdcbf009..12cd6998 100644
--- a/resources/views/includes/scripts/javascript.blade.php
+++ b/resources/views/includes/scripts/javascript.blade.php
@@ -2,29 +2,6 @@
 
 <script src="/js/backtotop.js"></script>
 
-@hasSection('theme-carousel')
-  <script src="/js/carousel-themes.js"></script>
-  <script>
-  $('.carousel .carousel-item').each(function(){
-    var minPerSlide = 3;
-    var next = $(this).next();
-    if (!next.length) {
-      next = $(this).siblings(':first');
-    }
-    next.children(':first-child').clone().appendTo($(this));
-
-    for (var i=0;i<minPerSlide;i++) {
-      next=next.next();
-      if (!next.length) {
-        next = $(this).siblings(':first');
-      }
-
-      next.children(':first-child').clone().appendTo($(this));
-    }
-  });
-</script>
-@endif
-
 <!-- Cookie management -->
 <script defer type="text/javascript" src="/js/config.js"></script>
 <script defer type="text/javascript" src="/js/klaro.js"></script>
diff --git a/resources/views/includes/structure/nav.blade.php b/resources/views/includes/structure/nav.blade.php
index 1622468e..97581d2c 100644
--- a/resources/views/includes/structure/nav.blade.php
+++ b/resources/views/includes/structure/nav.blade.php
@@ -1,5 +1,5 @@
 <!-- Nav bars -->
-<nav class="navbar navbar-expand-lg navbar-dark bg-maroon fixed-top">
+<nav class="navbar navbar-expand-lg navbar-dark bg-black fixed-top">
     <div class="container-fluid">
 
         <a class="navbar-brand" href="{{ route('home') }}">