diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..2edeafb
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+20
\ No newline at end of file
diff --git a/resources/views/components/breadcrumbs/breadcrumb-ellipsis.blade.php b/resources/views/components/breadcrumbs/breadcrumb-ellipsis.blade.php
index 62d0b3b..fbac82b 100644
--- a/resources/views/components/breadcrumbs/breadcrumb-ellipsis.blade.php
+++ b/resources/views/components/breadcrumbs/breadcrumb-ellipsis.blade.php
@@ -2,6 +2,8 @@
     role="presentation"
     aria-hidden="true"
     {{ $attributes->merge(['class' => 'flex h-9 w-9 items-center justify-center']) }}>
-    <x-icons.ellipsis class="size-4"/>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
+    </svg>
     <span class="sr-only">More</span>
 </span>
diff --git a/resources/views/components/cards/arch.blade.php b/resources/views/components/cards/arch.blade.php
deleted file mode 100644
index 84c313b..0000000
--- a/resources/views/components/cards/arch.blade.php
+++ /dev/null
@@ -1,21 +0,0 @@
-@props(['href', 'src', 'title', 'alt', 'loading' => 'eager'])
-
-<a href="{{ $href }}" class="block w-full">
-    <div
-        class="relative rounded-3xl h-64 hover:scale-105 transition duration-1000 border border-secondary-300 overflow-hidden">
-        <x-image
-            src="{{ $src }}"
-            alt="{{ $alt }}"
-            loading="{{ $loading }}"
-            class="object-cover h-64 w-full rounded-none"
-        />
-
-        <div class="absolute inset-0 flex flex-col justify-end">
-            <div class="bg-black/50">
-                <div class="text-white text-md text-center p-2">
-                    {{ $title }}
-                </div>
-            </div>
-        </div>
-    </div>
-</a>
diff --git a/resources/views/components/cards/feature.blade.php b/resources/views/components/cards/feature.blade.php
new file mode 100644
index 0000000..4c6f4c5
--- /dev/null
+++ b/resources/views/components/cards/feature.blade.php
@@ -0,0 +1,41 @@
+@props(['image', 'content', 'title' => null, 'imagePosition' => 'right'])
+
+<div class="space-y-4 lg:relative lg:flex items-center justify-center">
+    @if ($imagePosition === 'right')
+        <x-section.content class="backdrop-blur-sm bg-white/90 lg:absolute right-1/3 z-10 rounded-xl border border-secondary-200">
+            @if ($title)
+                <x-slot name="title">
+                    {{ $title }}
+                </x-slot>
+            @endif
+
+            <x-slot name="content">
+                <div class="w-full border-l-4 border-primary-500 py-4 pl-5">
+                    {{ $content }}
+                </div>
+            </x-slot>
+        </x-section.content>
+
+        <div class="lg:w-1/3 lg:ml-auto lg:relative">
+            {{ $image }}
+        </div>
+    @else
+        <div class="lg:w-1/3 lg:relative mr-auto">
+            {{ $image }}
+        </div>
+
+        <x-section.content class="backdrop-blur-sm bg-white/90 lg:absolute left-1/3 z-10 rounded-xl border border-secondary-200">
+            @if ($title)
+                <x-slot name="title">
+                    {{ $title }}
+                </x-slot>
+            @endif
+
+            <x-slot name="content">
+                <div class="w-full border-l-4 border-primary-500 py-4 pl-5">
+                    {{ $content }}
+                </div>
+            </x-slot>
+        </x-section.content>
+    @endif
+</div>
diff --git a/resources/views/components/cards/image-content-left.blade.php b/resources/views/components/cards/image-content-left.blade.php
deleted file mode 100644
index 5bc47c6..0000000
--- a/resources/views/components/cards/image-content-left.blade.php
+++ /dev/null
@@ -1,20 +0,0 @@
-@props(['content', 'image', 'title' => null])
-<div class="space-y-4 lg:relative lg:flex items-center justify-center">
-    <x-section.content class="!bg-secondary-100 lg:absolute right-1/3 z-10 border-none">
-        @if ($title)
-            <x-slot name="title">
-                {{ $title }}
-            </x-slot>
-        @endif
-
-        <x-slot name="content">
-            <div class="w-full border-l-4 border-primary-500 py-2 pl-4">
-                {{$content}}
-            </div>
-        </x-slot>
-    </x-section.content>
-
-    <div class="lg:w-1/3 lg:ml-auto lg:relative">
-        {{ $image }}
-    </div>
-</div>
diff --git a/resources/views/components/cards/image-content-right.blade.php b/resources/views/components/cards/image-content-right.blade.php
deleted file mode 100644
index 4db4ab4..0000000
--- a/resources/views/components/cards/image-content-right.blade.php
+++ /dev/null
@@ -1,21 +0,0 @@
-@props(['image', 'content', 'title' => null])
-
-<div class="space-y-4 lg:relative lg:flex items-center justify-center">
-    <div class="lg:w-1/3 lg:relative mr-auto">
-        {{ $image }}
-    </div>
-
-    <x-section.content class="!bg-secondary-100 lg:absolute left-1/3 z-10 border-none">
-        @if ($title)
-            <x-slot name="title">
-                {{ $title  }}
-            </x-slot>
-        @endif
-
-        <x-slot name="content">
-            <div class="w-full border-l-4 border-primary-500 py-6 pl-4">
-                {{$content}}
-            </div>
-        </x-slot>
-    </x-section.content>
-</div>
diff --git a/resources/views/components/cards/image-link.blade.php b/resources/views/components/cards/image-link.blade.php
new file mode 100644
index 0000000..33ebc7c
--- /dev/null
+++ b/resources/views/components/cards/image-link.blade.php
@@ -0,0 +1,28 @@
+@props(['href', 'src', 'title', 'alt', 'loading' => 'lazy', 'size' => 'md'])
+
+@php
+$sizes = [
+    'sm' => 'h-44',
+    'md' => 'h-64',
+];
+$height = $sizes[$size] ?? $sizes['md'];
+@endphp
+
+<a href="{{ $href }}" class="group block w-full">
+    <div class="relative {{ $height }} rounded-2xl overflow-hidden border border-secondary-300 shadow-md hover:shadow-xl transition-shadow duration-300">
+        <x-image
+            src="{{ $src }}"
+            alt="{{ $alt }}"
+            loading="{{ $loading }}"
+            class="object-cover object-center {{ $height }} w-full rounded-none transition-transform duration-500 group-hover:scale-110"
+        />
+
+        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
+
+        <div class="absolute inset-0 flex flex-col justify-end">
+            <div class="text-white text-md text-center p-3 font-medium">
+                {{ $title }}
+            </div>
+        </div>
+    </div>
+</a>
diff --git a/resources/views/components/cards/item.blade.php b/resources/views/components/cards/item.blade.php
deleted file mode 100644
index 5fbc673..0000000
--- a/resources/views/components/cards/item.blade.php
+++ /dev/null
@@ -1,24 +0,0 @@
-@props(['href', 'src', 'title', 'alt', 'loading' => 'eager'])
-
-<a href="{{ $href }}" class="block w-full">
-    <div
-        class="relative rounded-3xl h-44 hover:scale-105 transition duration-500 border border-secondary-300 overflow-hidden">
-        <x-image
-            src="{{ $src }}"
-            alt="{{ $alt }}"
-            loading="{{ $loading }}"
-            class="object-cover object-center h-64 w-full rounded-none"
-        />
-
-        <div class="absolute inset-0 flex flex-col justify-end">
-            <div class="bg-black/50">
-                <div class="text-white text-md text-center p-2">
-                    {{ $title }}
-                </div>
-            </div>
-        </div>
-
-        <div class="absolute inset-0 hover:bg-black/10 transition duration-500">
-        </div>
-    </div>
-</a>
diff --git a/resources/views/components/cards/quote.blade.php b/resources/views/components/cards/quote.blade.php
deleted file mode 100644
index 30f7e3b..0000000
--- a/resources/views/components/cards/quote.blade.php
+++ /dev/null
@@ -1,17 +0,0 @@
-@props(['user'])
-
-<div class="bg-white rounded-lg overflow-hidden flex flex-col h-full">
-    <div class="w-3/4 mx-auto mt-4">
-        <span class="italic text-lg">
-            "{{ $slot }}"
-        </span>
-    </div>
-
-    <div class="flex-grow text-secondary-400">
-        <div class="h-full flex">
-            <span class="my-auto mx-auto">
-                - {{ $user }}
-            </span>
-        </div>
-    </div>
-</div>
diff --git a/resources/views/components/heading.blade.php b/resources/views/components/heading.blade.php
new file mode 100644
index 0000000..6a3b872
--- /dev/null
+++ b/resources/views/components/heading.blade.php
@@ -0,0 +1,42 @@
+@props(['variant' => 'default', 'tag' => 'h2'])
+
+@php
+$variants = [
+    'default' => [
+        'text' => 'text-black text-lg md:text-2xl tracking-tight',
+        'bar' => 'bg-black',
+    ],
+    'secondary' => [
+        'text' => 'text-secondary-700 text-md md:text-xl tracking-tight',
+        'bar' => 'bg-secondary-700',
+    ],
+    'overline' => [
+        'text' => 'text-primary-500 text-lg md:text-2xl tracking-tight',
+        'bar' => 'bg-primary-500',
+    ],
+    'strikethrough' => [
+        'text' => 'text-primary-500 text-lg md:text-2xl tracking-tight',
+        'bar' => 'bg-primary-500',
+    ],
+];
+
+$v = $variants[$variant] ?? $variants['default'];
+@endphp
+
+@if ($variant === 'strikethrough')
+    <div class="flex items-center gap-2">
+        <div class="flex-1 h-0.5 {{ $v['bar'] }}"></div>
+        <{{ $tag }} class="{{ $v['text'] }}">{{ $slot }}</{{ $tag }}>
+        <div class="flex-1 h-0.5 {{ $v['bar'] }}"></div>
+    </div>
+@elseif ($variant === 'overline')
+    <div>
+        <div class="w-16 h-0.5 mb-2 {{ $v['bar'] }}"></div>
+        <{{ $tag }} class="{{ $v['text'] }}">{{ $slot }}</{{ $tag }}>
+    </div>
+@else
+    <div>
+        <{{ $tag }} class="{{ $v['text'] }}">{{ $slot }}</{{ $tag }}>
+        <div class="w-16 h-0.5 mt-1 mb-2 {{ $v['bar'] }}"></div>
+    </div>
+@endif
diff --git a/resources/views/components/headings/secondary.blade.php b/resources/views/components/headings/secondary.blade.php
deleted file mode 100644
index e53cc99..0000000
--- a/resources/views/components/headings/secondary.blade.php
+++ /dev/null
@@ -1,10 +0,0 @@
-@props(['level' => 3])
-
-@php
-    $tag = 'h' . min(max((int) $level, 1), 6);
-@endphp
-
-<div>
-    <{{ $tag }} class="text-secondary-700 text-md md:text-xl">{{ $slot }}</{{ $tag }}>
-    <div class="w-24 h-[1px] mb-2 bg-secondary-700"></div>
-</div>
diff --git a/resources/views/components/headings/title-overline.blade.php b/resources/views/components/headings/title-overline.blade.php
deleted file mode 100644
index b6145c3..0000000
--- a/resources/views/components/headings/title-overline.blade.php
+++ /dev/null
@@ -1,10 +0,0 @@
-@props(['level' => null])
-
-@php
-    $tag = $level ? 'h' . min(max((int) $level, 1), 6) : 'p';
-@endphp
-
-<div>
-    <div class="w-24 h-0.5 mb-2 bg-primary-500"></div>
-    <{{ $tag }} class="text-primary-500 text-lg md:text-2xl">{{ $slot }}</{{ $tag }}>
-</div>
diff --git a/resources/views/components/headings/title-strikethrough.blade.php b/resources/views/components/headings/title-strikethrough.blade.php
deleted file mode 100644
index b8e449e..0000000
--- a/resources/views/components/headings/title-strikethrough.blade.php
+++ /dev/null
@@ -1,11 +0,0 @@
-@props(['title', 'level' => 2])
-
-@php
-    $tag = 'h' . min(max((int) $level, 1), 6);
-@endphp
-
-<div class="flex">
-    <div class="w-12 h-0.5 mr-2 bg-primary-500 my-auto"></div>
-    <{{ $tag }} class="text-primary-500 text-lg md:text-2xl">{{ $title }}</{{ $tag }}>
-    <div class="w-12 h-0.5 ml-2 bg-primary-500 my-auto"></div>
-</div>
diff --git a/resources/views/components/headings/title.blade.php b/resources/views/components/headings/title.blade.php
deleted file mode 100644
index e376cc5..0000000
--- a/resources/views/components/headings/title.blade.php
+++ /dev/null
@@ -1,10 +0,0 @@
-@props(['level' => 2])
-
-@php
-    $tag = 'h' . min(max((int) $level, 1), 6);
-@endphp
-
-<div>
-    <{{ $tag }} class="text-black text-lg md:text-2xl">{{ $slot }}</{{ $tag }}>
-    <div class="w-24 h-0.5 mb-2 bg-black"></div>
-</div>
diff --git a/resources/views/components/icons/elipsis.blade.php b/resources/views/components/icons/elipsis.blade.php
deleted file mode 100644
index cfa1bcc..0000000
--- a/resources/views/components/icons/elipsis.blade.php
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-    {{ $attributes->merge(['class' => '']) }}>
-    <path stroke-linecap="round" stroke-linejoin="round"
-          d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/>
-</svg>
diff --git a/resources/views/components/links/footer-nav.blade.php b/resources/views/components/links/footer-nav.blade.php
deleted file mode 100644
index bc10df2..0000000
--- a/resources/views/components/links/footer-nav.blade.php
+++ /dev/null
@@ -1,6 +0,0 @@
-<a
-    href="{{$href}}"
-    class="text-secondary-300 flex text-md my-2 items-center decoration-6 underline-offset-4 transition duration-200 ease-in-out hover:underline"
->
-    {{ $slot }}
-</a>
diff --git a/resources/views/components/links/underline.blade.php b/resources/views/components/links/underline.blade.php
deleted file mode 100644
index dc3c5af..0000000
--- a/resources/views/components/links/underline.blade.php
+++ /dev/null
@@ -1,31 +0,0 @@
-@props(['underline' => 'link-underline-white'])
-
-<span
-    {{ $attributes->merge(['class' => 'link link-underline ' . $underline]) }}
->
-    {{ $slot }}
-</span>
-
-<style>
-    .link-underline {
-        border-bottom-width: 0;
-        background-image: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
-        background-size: 0 3px;
-        background-position: 0 100%;
-        background-repeat: no-repeat;
-        transition: background-size .5s ease-in-out;
-    }
-
-    .link-underline-white {
-        background-image: linear-gradient(transparent, transparent), linear-gradient(#ffffff, #ffffff)
-    }
-
-    .link-underline-secondary {
-        background-image: linear-gradient(transparent, transparent), linear-gradient(rgb(168, 162, 158), rgb(168, 162, 158))
-    }
-
-    .link-underline:hover {
-        background-size: 100% 3px;
-        background-position: 0 100%
-    }
-</style>
diff --git a/resources/views/components/section/content.blade.php b/resources/views/components/section/content.blade.php
index 04c0ab7..25a73f6 100644
--- a/resources/views/components/section/content.blade.php
+++ b/resources/views/components/section/content.blade.php
@@ -2,7 +2,7 @@
 
 <div {{ $attributes->merge(['class' => 'p-1 sm:p-4 rounded-md']) }} id="{{$id}}">
     @if ($title)
-        <x-headings.title-strikethrough title="{{$title}}"/>
+        <x-heading variant="strikethrough">{{ $title }}</x-heading>
     @endif
 
     <div class="space-y-4 sm:px-4 text-secondary-500 leading-loose {{ $title ? 'mt-6 sm:mt-14 xl:mt-4' : '' }}">
diff --git a/resources/views/components/section/whats-on-this-page.blade.php b/resources/views/components/section/whats-on-this-page.blade.php
deleted file mode 100644
index 2355d33..0000000
--- a/resources/views/components/section/whats-on-this-page.blade.php
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="my-auto">
-    <x-headings.secondary> Whats on this page</x-headings.secondary>
-
-    <div class="ml-2">
-        <uL>
-            @foreach($links as $link)
-                <li class="my-4">
-                    <a href="{{ $link['href'] }}" class="flex w-fit">
-                    <span class="my-auto">
-                        <x-icons.plus/>
-                    </span>
-
-                        <p class="ml-4 my-auto">
-                            {{ $link['title'] }}
-                        </p>
-                    </a>
-                </li>
-            @endforeach
-        </uL>
-    </div>
-</div>
diff --git a/resources/views/components/table/standard.blade.php b/resources/views/components/table/standard.blade.php
index 26a23cb..925ac2a 100644
--- a/resources/views/components/table/standard.blade.php
+++ b/resources/views/components/table/standard.blade.php
@@ -1,5 +1,5 @@
 <div class="mt-6 overflow-x-auto">
-    <x-headings.secondary>{{ $data['title'] }}</x-headings.secondary>
+    <x-heading variant="secondary">{{ $data['title'] }}</x-heading>
 
     <div class="inline-block min-w-full py-2 align-middle">
         <table class="min-w-full divide-y divide-secondary-300">
diff --git a/resources/views/pages/contact.blade.php b/resources/views/pages/contact.blade.php
index f92ef2f..b216cf3 100644
--- a/resources/views/pages/contact.blade.php
+++ b/resources/views/pages/contact.blade.php
@@ -7,7 +7,7 @@
             <div class="md:flex gap-4 space-y-2 sm:space-y-0 sm:p-8">
                 <div class="md:w-1/2">
                     <div class="h-full">
-                        <x-headings.title> Get in touch</x-headings.title>
+                        <x-heading> Get in touch</x-heading>
 
                         <ul class="mt-6 text-sm sm:text-base text-secondary-600 space-y-6">
                             <li class="flex gap-1 sm:gap-2">
@@ -63,7 +63,7 @@ class="text-white cursor-pointer"
                 </div>
 
                 <div class="md:w-1/2">
-                    <x-headings.title> Opening Hours</x-headings.title>
+                    <x-heading> Opening Hours</x-heading>
 
                     <div class="mt-5 space-y-3 text-sm sm:text-base">
                         @foreach(config('framed.times') as $time)
diff --git a/resources/views/pages/custom-framing.blade.php b/resources/views/pages/custom-framing.blade.php
index 83975fa..767a727 100644
--- a/resources/views/pages/custom-framing.blade.php
+++ b/resources/views/pages/custom-framing.blade.php
@@ -44,7 +44,19 @@
                         </div>
 
                         <div class="lg:w-2/5 mt-6 lg:mt-0 flex justify-center">
-                            <x-section.whats-on-this-page :links="$links"/>
+                            <nav class="bg-white rounded-xl border border-secondary-200 p-4 w-full">
+                                <x-heading variant="secondary">What's on this page</x-heading>
+                                <ul class="mt-3 space-y-2">
+                                    @foreach($links as $link)
+                                        <li>
+                                            <a href="{{ $link['href'] }}" class="text-secondary-600 hover:text-primary-500 transition flex items-center gap-2">
+                                                <x-icons.plus class="size-4" />
+                                                {{ $link['title'] }}
+                                            </a>
+                                        </li>
+                                    @endforeach
+                                </ul>
+                            </nav>
                         </div>
                     </div>
                 </x-slot>
@@ -64,70 +76,70 @@
 
                     <div>
                         <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
-                            <x-cards.item
+                            <x-cards.image-link size="sm"
                                 src="/acrylic/football.webp"
                                 alt="Football in case"
                                 title="Acrylic"
                                 href="{{ route('services.framing.acrylic') }}"
                             />
 
-                            <x-cards.item
+                            <x-cards.image-link size="sm"
                                 src="/canvas/tiger-canvas.webp"
                                 alt="Tiger painting on a rectangle canvas"
                                 title="Canvas"
                                 href="{{ route('services.framing.canvas') }}"
                             />
 
-                            <x-cards.item
+                            <x-cards.image-link size="sm"
                                 src="/indigenous/indigenous.webp"
                                 alt="Indigenous print"
                                 title="Indigenous Art"
                                 href="{{ route('services.framing.indigenous') }}"
                             />
 
-                            <x-cards.item
+                            <x-cards.image-link size="sm"
                                 src="/jigsaw/giraffe.webp"
                                 alt="Completed Giraffe Jigsaw - not framed"
                                 title="Jigsaws"
                                 href="{{ route('services.framing.jigsaw') }}"
                             />
 
-                            <x-cards.item
+                            <x-cards.image-link size="sm"
                                 src="/matboards/gymnastics.webp"
                                 alt="Gymnastics frame with multiple cutouts for medals"
                                 title="Medals & Memorabilia"
                                 href="{{ route('services.framing.medals-memorabilia') }}"
                             />
 
-                            <x-cards.item
+                            <x-cards.image-link size="sm"
                                 src="/mirror/small-mirror.webp"
                                 alt="Mirror Framed"
                                 title="Mirror"
                                 href="{{ route('services.framing.mirror') }}"
                             />
 
-                            <x-cards.item
+                            <x-cards.image-link size="sm"
                                 src="/prints-photos/picture-2.webp"
                                 alt="Print of a mother & child in the safari"
                                 title="Prints, Posters & Photos"
                                 href="{{ route('services.framing.prints-posters') }}"
                             />
 
-                            <x-cards.item
+                            <x-cards.image-link size="sm"
                                 src="/handcrafted/pressed.webp"
                                 alt="Handcrafted piece of a person holding an umbrella with a light post & a couple in the background"
                                 title="Handcrafted"
                                 href="{{ route('services.framing.handcrafted') }}"
                             />
 
-                            <x-cards.item
+                            <x-cards.image-link size="sm"
                                 src="/restorations/reprint-and-frame.webp"
                                 alt="Reprinted and Frame of a old wedding photo"
                                 title="Restorations"
                                 href="{{ route('services.framing.restorations') }}"
                             />
 
-                            <x-cards.item
+                            <x-cards.image-link size="sm"
                                 src="/readyMade/graduation.webp"
                                 alt="Graduation frame"
                                 title="Other"
@@ -152,7 +164,7 @@
                     </p>
 
                     <div class="space-y-12">
-                        <x-cards.image-content-left>
+                        <x-cards.feature image-position="left">
                             <x-slot name="image">
                                 <x-image
                                     src="/framing/selection.webp"
@@ -169,9 +181,9 @@ class="h-96 mx-auto"
                                 we offer an extensive selection of frames that suits any style
                                 or project.
                             </x-slot>
-                        </x-cards.image-content-left>
+                        </x-cards.feature>
 
-                        <x-cards.image-content-right>
+                        <x-cards.feature image-position="right">
                             <x-slot name="image">
                                 <x-image
                                     src="/framing/glassChoices.webp"
@@ -194,9 +206,9 @@ class="mx-auto"
                                     <li>True Vue Classic Art Glass</li>
                                 </ul>
                             </x-slot>
-                        </x-cards.image-content-right>
+                        </x-cards.feature>
 
-                        <x-cards.image-content-left>
+                        <x-cards.feature image-position="left">
                             <x-slot name="image">
                                 <x-image
                                     src="/framing/matboards.webp"
@@ -211,9 +223,9 @@ class="mx-auto"
                                 Neilsen, Bainbridge, Alpha, Peterborough Museum Core, Artique
                                 conservation, Archival rag and Museum mats
                             </x-slot>
-                        </x-cards.image-content-left>
+                        </x-cards.feature>
 
-                        <x-cards.image-content-right>
+                        <x-cards.feature image-position="right">
                             <x-slot name="image">
                                 <x-image
                                     src="/framing/framing.webp"
@@ -230,7 +242,7 @@ class="mx-auto"
                                 selection of custom frames include brands such as Larson-Juhl
                                 and Antons Mouldings.
                             </x-slot>
-                        </x-cards.image-content-right>
+                        </x-cards.feature>
                     </div>
                 </x-slot>
             </x-section.content>
diff --git a/resources/views/pages/home.blade.php b/resources/views/pages/home.blade.php
index ae77db0..31d47b0 100644
--- a/resources/views/pages/home.blade.php
+++ b/resources/views/pages/home.blade.php
@@ -19,9 +19,9 @@ class="pl-2 text-primary-400">
 
                 <div class="md:flex px-6 md:px-16">
                     <div class="w-full md:w-1/2">
-                        <x-headings.title-overline>
+                        <x-heading variant="overline">
                             Your Custom Framers
-                        </x-headings.title-overline>
+                        </x-heading>
 
                         <h1 class="text-3xl sm:text-5xl md:text-6xl text-white mt-2"> Framed Just <br> For You</h1>
                     </div>
@@ -35,7 +35,7 @@ class="pl-2 text-primary-400">
 
     <x-section.section class="mt-12 !bg-secondary-50">
         <x-section.wrapper>
-            <x-cards.image-content-right>
+            <x-cards.feature image-position="right">
                 <x-slot name="title">
                     Why Us?
                 </x-slot>
@@ -55,7 +55,7 @@ class="object-cover w-full border-4 border-secondary-100 rounded"
                     experience, we have been the go-to destination
                     for custom framing on the Gold Coast.
                 </x-slot>
-            </x-cards.image-content-right>
+            </x-cards.feature>
         </x-section.wrapper>
     </x-section.section>
 
@@ -78,7 +78,7 @@ class="object-cover w-full border-4 border-secondary-100 rounded"
                         <x-section.divider/>
 
                         <div class="grid sm:grid-cols-2 md:grid-cols-3 lg:w-3/4 mx-auto gap-4">
-                            <x-cards.arch
+                            <x-cards.image-link
                                 src="/framing/flinders.webp"
                                 title="Custom Framing"
                                 alt="Custom Framing: Flinders Range"
@@ -86,7 +86,7 @@ class="object-cover w-full border-4 border-secondary-100 rounded"
                                 loading="lazy"
                             />
 
-                            <x-cards.arch
+                            <x-cards.image-link
                                 src="/canvas/tiger-canvas.webp"
                                 title="Printing & Canvas"
                                 alt="Printing & Canvas: Tiger on a canvas"
@@ -94,7 +94,7 @@ class="object-cover w-full border-4 border-secondary-100 rounded"
                                 loading="lazy"
                             />
 
-                            <x-cards.arch
+                            <x-cards.image-link
                                 src="/restorations/reprint-and-frame.webp"
                                 title="Restorations & Repairs"
                                 alt="Restorations & Repairs: Restored wedding photo"
@@ -115,7 +115,7 @@ class="object-cover w-full border-4 border-secondary-100 rounded"
     <x-section.section class="mt-12 !bg-secondary-50">
         <x-section.wrapper>
             <div class="lg:relative">
-                <x-cards.image-content-left>
+                <x-cards.feature image-position="left">
                     <x-slot name="image">
                         <x-image
                             src="/store/front.png"
@@ -131,7 +131,7 @@ class="object-cover w-full border-4 border-secondary-100 rounded"
                         We understand that art and design are constantly evolving, and we strive to stay at the
                         forefront of industry trends.
                     </x-slot>
-                </x-cards.image-content-left>
+                </x-cards.feature>
             </div>
         </x-section.wrapper>
         <!--        <x-section.wrapper>
diff --git a/resources/views/pages/printing.blade.php b/resources/views/pages/printing.blade.php
index 64b03a5..15ebf8e 100644
--- a/resources/views/pages/printing.blade.php
+++ b/resources/views/pages/printing.blade.php
@@ -10,7 +10,7 @@
                 </x-slot>
 
                 <x-slot name="content">
-                    <x-cards.image-content-left>
+                    <x-cards.feature image-position="left">
                         <x-slot name="image">
                             <x-image
                                 src="/printing/printer.webp"
@@ -27,7 +27,7 @@ class="object-cover h-[200px] md:h-[350px] hover:scale-105 transition duration-1
                             Allowing us to just about do photo on printing paper to go perfectly as a background to your
                             frame.
                         </x-slot>
-                    </x-cards.image-content-left>
+                    </x-cards.feature>
                 </x-slot>
             </x-section.content>
         </x-section.wrapper>
diff --git a/resources/views/pages/services/canvas.blade.php b/resources/views/pages/services/canvas.blade.php
index 2da771e..5bc6eab 100644
--- a/resources/views/pages/services/canvas.blade.php
+++ b/resources/views/pages/services/canvas.blade.php
@@ -34,7 +34,7 @@
                             *We offer a full guarantee against warping and sagging.
                         </p>
 
-                        <x-cards.image-content-left>
+                        <x-cards.feature image-position="left">
                             <x-slot name="content">
                                 If you're considering having an artwork or photograph on canvas stretched, it's
                                 essential to
@@ -55,7 +55,7 @@
                                     class="mx-auto z-20 object-center object-cover"
                                 />
                             </x-slot>
-                        </x-cards.image-content-left>
+                        </x-cards.feature>
                     </x-slot>
                 </x-section.content>
             </x-section.wrapper>
diff --git a/resources/views/pages/services/handcrafted.blade.php b/resources/views/pages/services/handcrafted.blade.php
index c3e5c77..882c1cb 100644
--- a/resources/views/pages/services/handcrafted.blade.php
+++ b/resources/views/pages/services/handcrafted.blade.php
@@ -24,7 +24,7 @@
                     </x-slot>
 
                     <x-slot name="content">
-                        <x-cards.image-content-left>
+                        <x-cards.feature image-position="left">
                             <x-slot name="image">
                                 <x-image
                                     src="/handcrafted/pressed.webp"
@@ -44,7 +44,7 @@ class="mx-auto"
                                 our handcrafted art collection is a testament to the beauty of
                                 traditional craftsmanship.
                             </x-slot>
-                        </x-cards.image-content-left>
+                        </x-cards.feature>
                     </x-slot>
                 </x-section.content>
             </x-section.wrapper>
diff --git a/resources/views/pages/services/indigenous.blade.php b/resources/views/pages/services/indigenous.blade.php
index efae91f..2a469c2 100644
--- a/resources/views/pages/services/indigenous.blade.php
+++ b/resources/views/pages/services/indigenous.blade.php
@@ -24,7 +24,7 @@
                     </x-slot>
 
                     <x-slot name="content">
-                        <x-cards.image-content-right>
+                        <x-cards.feature image-position="right">
                             <x-slot name="image">
                                 <x-image
                                     src="/indigenous/indigenous.webp"
@@ -43,7 +43,7 @@ class="mx-auto"
                                 framing
                                 transforms pictures into timeless masterpieces.
                             </x-slot>
-                        </x-cards.image-content-right>
+                        </x-cards.feature>
                     </x-slot>
                 </x-section.content>
             </x-section.wrapper>
diff --git a/resources/views/pages/services/jigsaw.blade.php b/resources/views/pages/services/jigsaw.blade.php
index e3d7327..2497e17 100644
--- a/resources/views/pages/services/jigsaw.blade.php
+++ b/resources/views/pages/services/jigsaw.blade.php
@@ -24,7 +24,7 @@
                     </x-slot>
 
                     <x-slot name="content">
-                        <x-cards.image-content-left>
+                        <x-cards.feature image-position="left">
                             <x-slot name="image">
                                 <x-image
                                     src="/jigsaw/giraffe.webp"
@@ -40,7 +40,7 @@ class="h-96 mx-auto"
                                 aspect of our work, and this dedication extends to our meticulous process
                                 for framing jigsaw puzzles.
                             </x-slot>
-                        </x-cards.image-content-left>
+                        </x-cards.feature>
                     </x-slot>
                 </x-section.content>
             </x-section.wrapper>
@@ -60,7 +60,7 @@ class="h-96 mx-auto"
                         the best materials and equipment, guaranteeing it is finished to the highest standards.
 
                         <div class="space-y-12 mt-4">
-                            <x-cards.image-content-left>
+                            <x-cards.feature image-position="left">
                                 <x-slot name="title">
                                     Step 1: Acquire & Solve a Jigsaw
                                 </x-slot>
@@ -78,9 +78,9 @@ class="mx-auto"
                                     jigsaw you currently own or a brand new one from the shops, we can make
                                     any jigsaw look like a million dollars!
                                 </x-slot>
-                            </x-cards.image-content-left>
+                            </x-cards.feature>
 
-                            <x-cards.image-content-right>
+                            <x-cards.feature image-position="right">
                                 <x-slot name="title">
                                     Step 2: Choose a frame
                                 </x-slot>
@@ -99,7 +99,7 @@ class="h-96 mx-auto"
                                     chosen a double frame, with a nice blue colour to accent the ocean
                                     waves a thicker frame to match the colour scheme.
                                 </x-slot>
-                            </x-cards.image-content-right>
+                            </x-cards.feature>
 
                             <x-section.content>
                                 <x-slot name="title">
@@ -124,7 +124,7 @@ class="h-96 mx-auto"
                                 </x-slot>
                             </x-section.content>
 
-                            <x-cards.image-content-right>
+                            <x-cards.feature image-position="right">
                                 <x-slot name="title">
                                     The final product
                                 </x-slot>
@@ -142,7 +142,7 @@ class="h-96 mx-auto"
                                     The result of this process helps ensure your framed jigsaw is fade
                                     resistant, preserved and easily maintained by simply wiping clean.
                                 </x-slot>
-                            </x-cards.image-content-right>
+                            </x-cards.feature>
                         </div>
                     </x-slot>
                 </x-section.content>
diff --git a/resources/views/pages/services/medals-and-memorabilia.blade.php b/resources/views/pages/services/medals-and-memorabilia.blade.php
index 5026683..5862f1e 100644
--- a/resources/views/pages/services/medals-and-memorabilia.blade.php
+++ b/resources/views/pages/services/medals-and-memorabilia.blade.php
@@ -54,7 +54,19 @@
                                 choose our services.
                             </div>
                             <div class="lg:w-2/5 mt-6 lg:mt-0 flex justify-center">
-                                <x-section.whats-on-this-page :links="$links"/>
+                                <nav class="bg-white rounded-xl border border-secondary-200 p-4 w-full">
+                                    <x-heading variant="secondary">What's on this page</x-heading>
+                                    <ul class="mt-3 space-y-2">
+                                        @foreach($links as $link)
+                                            <li>
+                                                <a href="{{ $link['href'] }}" class="text-secondary-600 hover:text-primary-500 transition flex items-center gap-2">
+                                                    <x-icons.plus class="size-4" />
+                                                    {{ $link['title'] }}
+                                                </a>
+                                            </li>
+                                        @endforeach
+                                    </ul>
+                                </nav>
                             </div>
                         </div>
                     </x-slot>
diff --git a/resources/views/pages/services/mirror.blade.php b/resources/views/pages/services/mirror.blade.php
index c47153e..1694797 100644
--- a/resources/views/pages/services/mirror.blade.php
+++ b/resources/views/pages/services/mirror.blade.php
@@ -24,7 +24,7 @@
                     </x-slot>
 
                     <x-slot name="content">
-                        <x-cards.image-content-left>
+                        <x-cards.feature image-position="left">
                             <x-slot name="image">
                                 <x-image
                                     src="/mirror/frame-bethany.webp"
@@ -42,7 +42,7 @@ class="h-96 mx-auto"
                                 upfront quote of
                                 the mirror as well!
                             </x-slot>
-                        </x-cards.image-content-left>
+                        </x-cards.feature>
                     </x-slot>
                 </x-section.content>
             </x-section.wrapper>
diff --git a/resources/views/pages/services/other.blade.php b/resources/views/pages/services/other.blade.php
index 5325f13..4b72083 100644
--- a/resources/views/pages/services/other.blade.php
+++ b/resources/views/pages/services/other.blade.php
@@ -50,7 +50,19 @@
                                 matboard, glass cutout, framing supplies or our ready made frames.
                             </div>
                             <div class="lg:w-2/5 mt-6 lg:mt-0 flex justify-center">
-                                <x-section.whats-on-this-page :links="$links"/>
+                                <nav class="bg-white rounded-xl border border-secondary-200 p-4 w-full">
+                                    <x-heading variant="secondary">What's on this page</x-heading>
+                                    <ul class="mt-3 space-y-2">
+                                        @foreach($links as $link)
+                                            <li>
+                                                <a href="{{ $link['href'] }}" class="text-secondary-600 hover:text-primary-500 transition flex items-center gap-2">
+                                                    <x-icons.plus class="size-4" />
+                                                    {{ $link['title'] }}
+                                                </a>
+                                            </li>
+                                        @endforeach
+                                    </ul>
+                                </nav>
                             </div>
                         </div>
                     </x-slot>
@@ -62,7 +74,7 @@
                     <x-slot name="title"> Ready Made Frames</x-slot>
 
                     <x-slot name="content">
-                        <x-cards.image-content-left>
+                        <x-cards.feature image-position="left">
                             <x-slot name="image">
                                 <x-image
                                     src="/readyMade/graduation.webp"
@@ -79,7 +91,7 @@ class="h-96 mx-auto"
                                 in custom framing yet still provides a great look or if you are in a
                                 rush for a frame.
                             </x-slot>
-                        </x-cards.image-content-left>
+                        </x-cards.feature>
                     </x-slot>
                 </x-section.content>
             </x-section.wrapper>