diff --git a/resources/js/Pages/About.vue b/resources/js/Pages/About.vue
index 6964e9c..a329372 100644
--- a/resources/js/Pages/About.vue
+++ b/resources/js/Pages/About.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {Head} from '@inertiajs/vue3'
+import { Head } from '@inertiajs/vue3'
 import PrimaryLayout from '@/Layouts/PrimaryLayout.vue'
 import * as TeamMemberCards from '@/Components/Card/Team'
 import Section from '@/Layouts/Section.vue'
@@ -59,7 +59,7 @@ const teamMembers = [
 </script>
 
 <template>
-    <Head title="About"/>
+    <Head title="About" />
 
     <PrimaryLayout>
         <div id="intro">
diff --git a/resources/js/Pages/Gallery.vue b/resources/js/Pages/Gallery.vue
index a08d6ee..47aefef 100644
--- a/resources/js/Pages/Gallery.vue
+++ b/resources/js/Pages/Gallery.vue
@@ -1,15 +1,13 @@
 <script setup>
-import {Head} from '@inertiajs/vue3'
+import { Head } from '@inertiajs/vue3'
 import PrimaryLayout from '@/Layouts/PrimaryLayout.vue'
 import GalleryCard from '@/Components/Gallery/GalleryCard.vue'
-
 </script>
 
 <template>
-    <Head title="Gallery"/>
+    <Head title="Gallery" />
 
     <PrimaryLayout>
         Temporary (remove for production) -> Fully integrate with admin side of things
-
     </PrimaryLayout>
 </template>
diff --git a/resources/js/Pages/Services/Framing.vue b/resources/js/Pages/Services/Framing.vue
index c073396..2f1d4ff 100644
--- a/resources/js/Pages/Services/Framing.vue
+++ b/resources/js/Pages/Services/Framing.vue
@@ -1,8 +1,8 @@
 <script setup>
-import {Head} from '@inertiajs/vue3'
+import { Head } from '@inertiajs/vue3'
 import PrimaryLayout from '@/Layouts/PrimaryLayout.vue'
 import Section from '@/Layouts/Section.vue'
-import {ArrowDownIcon} from '@heroicons/vue/20/solid/index.js'
+import { ArrowDownIcon } from '@heroicons/vue/20/solid/index.js'
 import {
     ClipboardDocumentListIcon,
     QueueListIcon,
@@ -19,11 +19,11 @@ import Service from '@/Components/Card/Services/Service.vue'
 import Image from '@/Components/Image.vue'
 
 const scrollToContent = () =>
-    document.getElementById('custom').scrollIntoView({behavior: 'smooth'})
+    document.getElementById('custom').scrollIntoView({ behavior: 'smooth' })
 </script>
 
 <template>
-    <Head title="Framing"/>
+    <Head title="Framing" />
 
     <PrimaryLayout>
         <Section>
@@ -33,7 +33,7 @@ const scrollToContent = () =>
             <template #subtitle>
                 <div @click="scrollToContent()" class="flex cursor-pointer">
                     <span> View our broad range </span>
-                    <ArrowDownIcon class="w-8 h-8"/>
+                    <ArrowDownIcon class="w-8 h-8" />
                 </div>
             </template>
             <template #content>
@@ -85,7 +85,7 @@ const scrollToContent = () =>
                         <div class="flex-wrap md:flex my-4 sm:my-2">
                             <div class="flex my-auto md:w-3/5 px-0 sm:px-8">
                                 <div class="p-4">
-                                    <ClipboardDocumentListIcon class="w-8 h-8"/>
+                                    <ClipboardDocumentListIcon class="w-8 h-8" />
                                 </div>
                                 <div>
                                     <p>
@@ -98,7 +98,7 @@ const scrollToContent = () =>
                                 </div>
                             </div>
                             <div class="w-1/2 md:w-2/5 mx-auto my-6">
-                                <Image src="framing/flinders.webp" alt="flinders range framed"/>
+                                <Image src="framing/flinders.webp" alt="flinders range framed" />
                             </div>
                         </div>
 
@@ -111,7 +111,7 @@ const scrollToContent = () =>
                             </div>
                             <div class="flex my-auto md:w-3/5 px-0 sm:px-8">
                                 <div class="p-4">
-                                    <ListBulletIcon class="w-8 h-8"/>
+                                    <ListBulletIcon class="w-8 h-8" />
                                 </div>
                                 <div>
                                     <p>
@@ -128,7 +128,7 @@ const scrollToContent = () =>
                         <div class="flex-wrap md:flex my-4 sm:my-2">
                             <div class="flex my-auto md:w-3/5 px-0 sm:px-8">
                                 <div class="p-4">
-                                    <QueueListIcon class="w-8 h-8"/>
+                                    <QueueListIcon class="w-8 h-8" />
                                 </div>
                                 <div>
                                     <div>
@@ -164,7 +164,7 @@ const scrollToContent = () =>
                             </div>
                             <div class="flex my-auto md:w-3/5 px-0 sm:px-8">
                                 <div class="p-4">
-                                    <QueueListIcon class="w-8 h-8"/>
+                                    <QueueListIcon class="w-8 h-8" />
                                 </div>
                                 <div>
                                     <p>
@@ -179,7 +179,7 @@ const scrollToContent = () =>
                         <div class="flex-wrap md:flex my-4 sm:my-2">
                             <div class="flex my-auto md:w-3/5 px-0 sm:px-8">
                                 <div class="p-4">
-                                    <CheckCircleIcon class="w-8 h-8"/>
+                                    <CheckCircleIcon class="w-8 h-8" />
                                 </div>
                                 <div>
                                     <p>
diff --git a/resources/js/Pages/Services/Framing/Acrylic.vue b/resources/js/Pages/Services/Framing/Acrylic.vue
index 0fc92df..a5f3ee1 100644
--- a/resources/js/Pages/Services/Framing/Acrylic.vue
+++ b/resources/js/Pages/Services/Framing/Acrylic.vue
@@ -1,12 +1,12 @@
 <script setup>
-import {Head} from '@inertiajs/vue3'
+import { Head } from '@inertiajs/vue3'
 import Section from '@/Layouts/Section.vue'
 import PrimaryLayout from '@/Layouts/PrimaryLayout.vue'
 import Image from '@/Components/Image.vue'
 </script>
 
 <template>
-    <Head title="Acrylic"/>
+    <Head title="Acrylic" />
 
     <PrimaryLayout>
         <Section>
@@ -34,9 +34,9 @@ import Image from '@/Components/Image.vue'
                 </div>
 
                 <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-2 mx-8 my-8">
-                    <Image src="acrylic/football.webp" alt="Football in case" class="my-auto"/>
-                    <Image src="acrylic/boot.webp" alt="Boot in case" class="my-auto"/>
-                    <Image src="acrylic/shovel.webp" alt="Golden Shovel in case" class="my-auto"/>
+                    <Image src="acrylic/football.webp" alt="Football in case" class="my-auto" />
+                    <Image src="acrylic/boot.webp" alt="Boot in case" class="my-auto" />
+                    <Image src="acrylic/shovel.webp" alt="Golden Shovel in case" class="my-auto" />
                 </div>
             </template>
         </Section>
diff --git a/resources/js/Pages/Services/Framing/HandCrafted.vue b/resources/js/Pages/Services/Framing/HandCrafted.vue
index 018961d..03acc57 100644
--- a/resources/js/Pages/Services/Framing/HandCrafted.vue
+++ b/resources/js/Pages/Services/Framing/HandCrafted.vue
@@ -1,12 +1,12 @@
 <script setup>
-import {Head} from '@inertiajs/vue3'
+import { Head } from '@inertiajs/vue3'
 import Section from '@/Layouts/Section.vue'
 import PrimaryLayout from '@/Layouts/PrimaryLayout.vue'
 import Image from '@/Components/Image.vue'
 </script>
 
 <template>
-    <Head title="Tapestries and Needlework"/>
+    <Head title="Tapestries and Needlework" />
 
     <PrimaryLayout>
         <Section>
@@ -26,7 +26,7 @@ import Image from '@/Components/Image.vue'
                             traditional craftsmanship.
                         </div>
                         <div class="sm:w-1/2 sm:w-full mt-4 sm:mt-0">
-                            <Image src="handcrafted/pressed.webp" class="w-3/4 mx-auto"/>
+                            <Image src="handcrafted/pressed.webp" class="w-3/4 mx-auto" />
                         </div>
                     </div>
                 </div>
diff --git a/resources/js/Pages/Services/Framing/Jigsaw.vue b/resources/js/Pages/Services/Framing/Jigsaw.vue
index b15cbd9..cdb4b58 100644
--- a/resources/js/Pages/Services/Framing/Jigsaw.vue
+++ b/resources/js/Pages/Services/Framing/Jigsaw.vue
@@ -1,12 +1,12 @@
 <script setup>
-import {Head} from '@inertiajs/vue3'
+import { Head } from '@inertiajs/vue3'
 import Section from '@/Layouts/Section.vue'
 import PrimaryLayout from '@/Layouts/PrimaryLayout.vue'
 import Image from '@/Components/Image.vue'
 </script>
 
 <template>
-    <Head title="Jigsaw"/>
+    <Head title="Jigsaw" />
 
     <PrimaryLayout>
         <Section>
@@ -21,7 +21,7 @@ import Image from '@/Components/Image.vue'
                         for framing jigsaw puzzles.
                     </div>
                     <div class="sm:w-1/2 sm:w-full mt-4 sm:mt-0">
-                        <Image src="jigsaw/giraffe.webp" class="w-1/2 mx-auto"/>
+                        <Image src="jigsaw/giraffe.webp" class="w-1/2 mx-auto" />
                     </div>
                 </div>
             </template>
@@ -38,7 +38,7 @@ import Image from '@/Components/Image.vue'
                 <div class="mt-8">
                     <div class="sm:flex my-4">
                         <div class="sm:w-1/2 sm:w-full my-auto">
-                            <Image src="jigsaw/initial-stage.webp"/>
+                            <Image src="jigsaw/initial-stage.webp" />
                         </div>
                         <div class="sm:w-1/2 sm:w-full p-6">
                             <h1 class="text-xl font-bold">First Steps</h1>
@@ -60,7 +60,7 @@ import Image from '@/Components/Image.vue'
                             </p>
                         </div>
                         <div class="sm:w-1/2 sm:w-full my-auto">
-                            <Image src="jigsaw/frame.webp" class="sm:w-3/4 mx-auto"/>
+                            <Image src="jigsaw/frame.webp" class="sm:w-3/4 mx-auto" />
                         </div>
                     </div>
                     <div class="sm:flex my-4">
@@ -86,7 +86,7 @@ import Image from '@/Components/Image.vue'
                     </div>
                     <div class="sm:flex my-4">
                         <div class="sm:w-1/2 sm:w-full my-auto">
-                            <Image src="jigsaw/final-product.webp" class="sm:w-3/4 mx-auto"/>
+                            <Image src="jigsaw/final-product.webp" class="sm:w-3/4 mx-auto" />
                         </div>
                         <div class="sm:w-1/2 sm:w-full p-6">
                             <h1 class="text-xl font-bold">Final Product</h1>
diff --git a/resources/js/Pages/Services/Framing/Memorabilia.vue b/resources/js/Pages/Services/Framing/Memorabilia.vue
index 39bf187..4fe1175 100644
--- a/resources/js/Pages/Services/Framing/Memorabilia.vue
+++ b/resources/js/Pages/Services/Framing/Memorabilia.vue
@@ -1,12 +1,12 @@
 <script setup>
-import {Head} from '@inertiajs/vue3'
+import { Head } from '@inertiajs/vue3'
 import PrimaryLayout from '@/Layouts/PrimaryLayout.vue'
 import Section from '@/Layouts/Section.vue'
 import Image from '@/Components/Image.vue'
 </script>
 
 <template>
-    <Head title="Memorabilia"/>
+    <Head title="Memorabilia" />
 
     <PrimaryLayout>
         <Section>
@@ -38,7 +38,7 @@ import Image from '@/Components/Image.vue'
                     autographed garments, costumes, and rare signed correspondence.
                 </p>
                 <div class="sm:w-3/4 mx-auto my-2">
-                    <Image src="memorabilia/memorabilia-3.webp" alt="Collectables"/>
+                    <Image src="memorabilia/memorabilia-3.webp" alt="Collectables" />
                 </div>
             </template>
         </Section>
@@ -87,7 +87,7 @@ import Image from '@/Components/Image.vue'
                     within just one week.
                 </p>
                 <div class="sm:w-3/4 mx-auto my-2">
-                    <Image src="memorabilia/jerseys.webp" alt="Framed Sport Jerseys"/>
+                    <Image src="memorabilia/jerseys.webp" alt="Framed Sport Jerseys" />
                 </div>
             </template>
         </Section>
diff --git a/resources/js/Pages/Services/Framing/PrintsPostersAndPhotos.vue b/resources/js/Pages/Services/Framing/PrintsPostersAndPhotos.vue
index eaecd0a..72ef1ff 100644
--- a/resources/js/Pages/Services/Framing/PrintsPostersAndPhotos.vue
+++ b/resources/js/Pages/Services/Framing/PrintsPostersAndPhotos.vue
@@ -1,12 +1,12 @@
 <script setup>
-import {Head} from '@inertiajs/vue3'
+import { Head } from '@inertiajs/vue3'
 import Section from '@/Layouts/Section.vue'
 import PrimaryLayout from '@/Layouts/PrimaryLayout.vue'
 import Image from '@/Components/Image.vue'
 </script>
 
 <template>
-    <Head title="Prints, Posters and Photos"/>
+    <Head title="Prints, Posters and Photos" />
 
     <PrimaryLayout>
         <Section>
@@ -27,9 +27,9 @@ import Image from '@/Components/Image.vue'
                 </div>
 
                 <div class="grid grid-cols-1 sm:grid-cols-3 w-3/4 mx-auto gap-x-6 gap-y-6 my-8">
-                    <Image src="prints-photos/picture-2.webp"/>
-                    <Image src="prints-photos/picture-1.webp" class="my-auto"/>
-                    <Image src="prints-photos/poster-1.webp"/>
+                    <Image src="prints-photos/picture-2.webp" />
+                    <Image src="prints-photos/picture-1.webp" class="my-auto" />
+                    <Image src="prints-photos/poster-1.webp" />
                 </div>
             </template>
         </Section>
diff --git a/resources/js/Pages/Services/Other/MatboardCutting.vue b/resources/js/Pages/Services/Other/MatboardCutting.vue
index 832c1ff..4d2f6bb 100644
--- a/resources/js/Pages/Services/Other/MatboardCutting.vue
+++ b/resources/js/Pages/Services/Other/MatboardCutting.vue
@@ -1,12 +1,12 @@
 <script setup>
-import {Head} from '@inertiajs/vue3'
+import { Head } from '@inertiajs/vue3'
 import Image from '@/Components/Image.vue'
 import PrimaryLayout from '@/Layouts/PrimaryLayout.vue'
 import Section from '@/Layouts/Section.vue'
 </script>
 
 <template>
-    <Head title="Matboard Cutting"/>
+    <Head title="Matboard Cutting" />
 
     <PrimaryLayout>
         <Section>
@@ -56,7 +56,7 @@ import Section from '@/Layouts/Section.vue'
                 colours.
 
                 <div class="grid grid-cols-3 gap-x-4 my-12">
-                    <Image src="matboards/record.webp" alt="Metallica Record" class="my-auto"/>
+                    <Image src="matboards/record.webp" alt="Metallica Record" class="my-auto" />
                     <Image
                         src="matboards/gymnastics.webp"
                         alt="Gymnastics frame with multiple cutouts for medals"
diff --git a/resources/js/Pages/Services/Other/ReadyMade.vue b/resources/js/Pages/Services/Other/ReadyMade.vue
index 037c0b9..d3e75d8 100644
--- a/resources/js/Pages/Services/Other/ReadyMade.vue
+++ b/resources/js/Pages/Services/Other/ReadyMade.vue
@@ -1,12 +1,12 @@
 <script setup>
-import {Head} from '@inertiajs/vue3'
+import { Head } from '@inertiajs/vue3'
 import Section from '@/Layouts/Section.vue'
 import PrimaryLayout from '@/Layouts/PrimaryLayout.vue'
 import Image from '@/Components/Image.vue'
 </script>
 
 <template>
-    <Head title="Ready Made"/>
+    <Head title="Ready Made" />
 
     <PrimaryLayout>
         <Section>
diff --git a/resources/js/Pages/Services/Printing.vue b/resources/js/Pages/Services/Printing.vue
index af7ecb0..67e9cc2 100644
--- a/resources/js/Pages/Services/Printing.vue
+++ b/resources/js/Pages/Services/Printing.vue
@@ -1,18 +1,18 @@
 <script setup>
-import {Head} from '@inertiajs/vue3'
+import { Head } from '@inertiajs/vue3'
 import PrimaryLayout from '@/Layouts/PrimaryLayout.vue'
 import Section from '@/Layouts/Section.vue'
 import PricingTable from '@/Components/Card/PricingTable.vue'
 import Image from '@/Components/Image.vue'
 
 const squareCanvas = [
-    {inches: '12"x12"', cm: '30cm x 30cm', pricing: '$70.00'},
-    {inches: '16"x16"', cm: '40cm x 40cm', pricing: '$90.00'},
-    {inches: '20"x20"', cm: '51cm x 51cm', pricing: '$140.00'},
-    {inches: '24"x24"', cm: '61cm x 61cm', pricing: '$150.00'},
-    {inches: '30"x30"', cm: '76cm x 76cm', pricing: '$260.00'},
-    {inches: '36"x36"', cm: '91cm x 91cm', pricing: '$300.00'},
-    {inches: '40"x40"', cm: '102cm x 102cm', pricing: '$330.00'},
+    { inches: '12"x12"', cm: '30cm x 30cm', pricing: '$70.00' },
+    { inches: '16"x16"', cm: '40cm x 40cm', pricing: '$90.00' },
+    { inches: '20"x20"', cm: '51cm x 51cm', pricing: '$140.00' },
+    { inches: '24"x24"', cm: '61cm x 61cm', pricing: '$150.00' },
+    { inches: '30"x30"', cm: '76cm x 76cm', pricing: '$260.00' },
+    { inches: '36"x36"', cm: '91cm x 91cm', pricing: '$300.00' },
+    { inches: '40"x40"', cm: '102cm x 102cm', pricing: '$330.00' },
 ]
 
 const canvasSquares = {
@@ -109,7 +109,7 @@ const config = [
 </script>
 
 <template>
-    <Head title="Printing"/>
+    <Head title="Printing" />
 
     <PrimaryLayout>
         <Section>
@@ -147,7 +147,7 @@ const config = [
             <template #content>
                 {{ item.description }}
                 <div class="mt-8 flow-root" v-if="item.data">
-                    <PricingTable v-for="data in item.data" :data="data"/>
+                    <PricingTable v-for="data in item.data" :data="data" />
                 </div>
             </template>
         </Section>
