diff --git a/.prettierrc b/.prettierrc
index 0967ef4..ac0d128 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1 +1,6 @@
-{}
+{
+    "singleAttributePerLine": false,
+    "vueIndentScriptAndStyle": true,
+    "bracketSameLine": true,
+    "semi": false,
+}
diff --git a/package.json b/package.json
index 66497ca..a0ecd71 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,6 @@
     "vite": "^5.0.8"
   },
   "lint-staged": {
-    "*.{js,css,md}": "prettier --write src/ --no-semi --bracket-same-line --vue-indent-script-and-style"
+    "*.{js,css,md}": "prettier --write src/"
   }
 }
diff --git a/src/components/main/Main.vue b/src/components/main/Main.vue
index af6fe4b..a8f6f56 100644
--- a/src/components/main/Main.vue
+++ b/src/components/main/Main.vue
@@ -1,57 +1,56 @@
 <script setup>
-import Header from "./blocks/header/Header.vue"
-import Hero from "./blocks/hero/Hero.vue"
-import Services from "./blocks/services/Services.vue"
-import messageBanner from "./blocks/messageBanner/messageBanner.vue"
-import Pricing from "./pages/Pricing.vue"
+  import Header from "./blocks/header/Header.vue"
+  import Hero from "./blocks/hero/Hero.vue"
+  import Services from "./blocks/services/Services.vue"
+  import messageBanner from "./blocks/messageBanner/messageBanner.vue"
+  import Pricing from "./pages/Pricing.vue"
 
-import { ref, computed, onMounted } from "vue"
+  import { ref, computed, onMounted } from "vue"
 
-const brightness = ref(3)
+  const brightness = ref(3)
 
-const props = defineProps({
-  component: String,
-})
+  const props = defineProps({
+    component: String,
+  })
 
-const handleBrightnessUpdate = (value) => {
-  brightness.value = Number(value)
-  let localStorage = window.localStorage
-  localStorage.setItem("brightness", brightness.value)
-}
-
-const brightnessClass = computed(() => {
-  switch (brightness.value) {
-    case 5:
-      return "bg-gradient-to-br from-sky-300 to-sky-500"
-    case 4:
-      return "bg-gradient-to-br from-sky-400 to-sky-600"
-    case 3:
-      return "bg-gradient-to-br from-slate-400 to-slate-600"
-    case 2:
-      return "bg-gradient-to-br from-sky-800 to-slate-800"
-    case 1:
-      return "bg-gradient-to-br from-slate-700 to-slate-900"
-    default:
-      return ""
-  }
-})
-
-onMounted(() => {
-  let localStorage = window.localStorage
-  if (localStorage.getItem("brightness")) {
-    brightness.value = Number(localStorage.getItem("brightness"))
-  } else {
+  const handleBrightnessUpdate = (value) => {
+    brightness.value = Number(value)
+    let localStorage = window.localStorage
     localStorage.setItem("brightness", brightness.value)
   }
-})
+
+  const brightnessClass = computed(() => {
+    switch (brightness.value) {
+      case 5:
+        return "bg-gradient-to-br from-sky-300 to-sky-500"
+      case 4:
+        return "bg-gradient-to-br from-sky-400 to-sky-600"
+      case 3:
+        return "bg-gradient-to-br from-slate-400 to-slate-600"
+      case 2:
+        return "bg-gradient-to-br from-sky-800 to-slate-800"
+      case 1:
+        return "bg-gradient-to-br from-slate-700 to-slate-900"
+      default:
+        return ""
+    }
+  })
+
+  onMounted(() => {
+    let localStorage = window.localStorage
+    if (localStorage.getItem("brightness")) {
+      brightness.value = Number(localStorage.getItem("brightness"))
+    } else {
+      localStorage.setItem("brightness", brightness.value)
+    }
+  })
 </script>
 
 <template>
   <main
     :class="['w-dvw', brightnessClass]"
     class="md:p-7 sm:p-5"
-    style="min-height: 100vh; overflow-x: hidden"
-  >
+    style="min-height: 100vh; overflow-x: hidden">
     <Header @update:brightness="handleBrightnessUpdate" />
 
     <div class="flex justify-center w-full md:px-10 sm:px-5 mt-5">
@@ -64,8 +63,7 @@ onMounted(() => {
           'bg-slate-800': brightness == 2,
           'bg-slate-900': brightness == 1,
         }"
-        v-if="component == 'pricing'"
-      >
+        v-if="component == 'pricing'">
         <Pricing :brightness="brightness" />
       </div>
 
@@ -78,8 +76,7 @@ onMounted(() => {
           'bg-slate-800': brightness == 2,
           'bg-slate-900': brightness == 1,
         }"
-        v-if="component == 'home'"
-      >
+        v-if="component == 'home'">
         <Hero :brightness="brightness" />
       </div>
     </div>
@@ -94,8 +91,7 @@ onMounted(() => {
           'bg-slate-800': brightness == 2,
           'bg-slate-900': brightness == 1,
         }"
-        v-if="component == 'home'"
-      >
+        v-if="component == 'home'">
         <Services :brightness="brightness" />
       </div>
     </div>
diff --git a/src/components/main/blocks/Hero/Hero.vue b/src/components/main/blocks/Hero/Hero.vue
index fd46126..f0399ac 100644
--- a/src/components/main/blocks/Hero/Hero.vue
+++ b/src/components/main/blocks/Hero/Hero.vue
@@ -1,80 +1,80 @@
 <script setup>
-import {
-  ref,
-  computed,
-  onMounted,
-  onBeforeUpdate,
-  watch,
-  onUnmounted,
-} from "vue"
+  import {
+    ref,
+    computed,
+    onMounted,
+    onBeforeUpdate,
+    watch,
+    onUnmounted,
+  } from "vue"
 
-const props = defineProps({
-  brightness: Number,
-})
+  const props = defineProps({
+    brightness: Number,
+  })
 
-const headlines = ref([
-  "super fast",
-  "responsive",
-  "beautiful",
-  "secure",
-  "accessible",
-  "easy to use",
-  "efficient",
-  "ultra-functional",
-  "simple to use",
-  "powerful",
-  "optimized",
-  "SEO-optimized",
-  "lightning fast",
-  "lightweight",
-  "perfectly customized",
-  "perfectly tailored",
-  "blazing fast",
-  "extremely secure",
-  "beautifully designed",
-  "high-quality",
-  "precisely optimized",
-  "precisely tailored",
-  "your dream",
-  "your perfect",
-  "your ideal",
-  "your projects'",
-])
+  const headlines = ref([
+    "super fast",
+    "responsive",
+    "beautiful",
+    "secure",
+    "accessible",
+    "easy to use",
+    "efficient",
+    "ultra-functional",
+    "simple to use",
+    "powerful",
+    "optimized",
+    "SEO-optimized",
+    "lightning fast",
+    "lightweight",
+    "perfectly customized",
+    "perfectly tailored",
+    "blazing fast",
+    "extremely secure",
+    "beautifully designed",
+    "high-quality",
+    "precisely optimized",
+    "precisely tailored",
+    "your dream",
+    "your perfect",
+    "your ideal",
+    "your projects'",
+  ])
 
-let index = ref(0)
-let isAnimating = ref(false)
+  let index = ref(0)
+  let isAnimating = ref(false)
 
-onMounted(() => {
-  headlines.value = headlines.value.sort(() => Math.random() - 0.5)
-  setInterval(() => {
-    if (!isAnimating.value) {
-      isAnimating.value = true
-      index.value = (index.value + 1) % headlines.value.length
-    }
-  }, 4000)
+  onMounted(() => {
+    headlines.value = headlines.value.sort(() => Math.random() - 0.5)
+    setInterval(() => {
+      if (!isAnimating.value) {
+        isAnimating.value = true
+        index.value = (index.value + 1) % headlines.value.length
+      }
+    }, 4000)
 
-  const handleMouseDown = () => {
-    isAnimating.value = false
-  }
+    const handleMouseDown = () => {
+      isAnimating.value = false
+    }
 
-  const handleMouseUp = () => {
-    isAnimating.value = true
-  }
+    const handleMouseUp = () => {
+      isAnimating.value = true
+    }
 
-  window.addEventListener("mousedown", handleMouseDown)
-  window.addEventListener("mouseup", handleMouseUp)
+    window.addEventListener("mousedown", handleMouseDown)
+    window.addEventListener("mouseup", handleMouseUp)
 
-  onUnmounted(() => {
-    window.removeEventListener("mousedown", handleMouseDown)
-    window.removeEventListener("mouseup", handleMouseUp)
+    onUnmounted(() => {
+      window.removeEventListener("mousedown", handleMouseDown)
+      window.removeEventListener("mouseup", handleMouseUp)
+    })
   })
-})
 
-onBeforeUpdate(() => {
-  isAnimating.value = false
-})
+  onBeforeUpdate(() => {
+    isAnimating.value = false
+  })
 
-const currentHeadline = computed(() => headlines.value[index.value])
+  const currentHeadline = computed(() => headlines.value[index.value])
 </script>
 
 <template>
@@ -87,8 +87,7 @@ const currentHeadline = computed(() => headlines.value[index.value])
         'text-slate-300': brightness == 3,
         'text-slate-200': brightness == 2,
         'text-slate-400': brightness == 1,
-      }"
-    >
+      }">
       I make
       <div class="inline-block relative">
         <span
@@ -103,8 +102,7 @@ const currentHeadline = computed(() => headlines.value[index.value])
             'border-orange-200': brightness == 3,
             'border-orange-500': brightness == 2,
             'border-orange-400': brightness == 1,
-          }"
-        ></div>
+          }"></div>
       </div>
       websites.
     </h1>
@@ -116,8 +114,7 @@ const currentHeadline = computed(() => headlines.value[index.value])
         'text-slate-400': brightness == 3,
         'text-slate-300': brightness == 2,
         'text-slate-500': brightness == 1,
-      }"
-    >
+      }">
       Hi, I'm Joseph. I'm a full-stack web developer. What can I do for you?
     </p>
     <div class="flex py-5 justify-center gap-3 w-full">
@@ -128,8 +125,7 @@ const currentHeadline = computed(() => headlines.value[index.value])
           'bg-slate-500': brightness == 3,
           'bg-orange-600': brightness == 2,
           'bg-orange-500': brightness == 1,
-        }"
-      >
+        }">
         Portfolio
       </button>
       <a href="/pricing"
@@ -139,8 +135,7 @@ const currentHeadline = computed(() => headlines.value[index.value])
             'bg-slate-700': brightness >= 4,
             'bg-slate-500': brightness == 3,
             'bg-slate-400': brightness <= 2,
-          }"
-        >
+          }">
           Get a Quote
         </button></a
       >
@@ -149,22 +144,22 @@ const currentHeadline = computed(() => headlines.value[index.value])
 </template>
 
 <script>
-export default {
-  directives: {
-    typewriter: {
-      beforeUpdate(el, binding) {
-        if (binding.oldValue !== binding.value) {
-          let text = binding.value
-          let delay = Math.random() * 100 + 25
-          el.textContent = ""
-          text.split("").forEach((char, i) => {
-            setTimeout(() => {
-              el.textContent += char
-            }, delay * i)
-          })
-        }
+  export default {
+    directives: {
+      typewriter: {
+        beforeUpdate(el, binding) {
+          if (binding.oldValue !== binding.value) {
+            let text = binding.value
+            let delay = Math.random() * 100 + 25
+            el.textContent = ""
+            text.split("").forEach((char, i) => {
+              setTimeout(() => {
+                el.textContent += char
+              }, delay * i)
+            })
+          }
+        },
       },
     },
-  },
-}
+  }
 </script>
diff --git a/src/components/main/blocks/blueprint/Blueprint.vue b/src/components/main/blocks/blueprint/Blueprint.vue
index 5008a49..ab297ab 100644
--- a/src/components/main/blocks/blueprint/Blueprint.vue
+++ b/src/components/main/blocks/blueprint/Blueprint.vue
@@ -1,6 +1,6 @@
 <script setup>
-import alignImage from "@/assets/main/align_these.png"
-import "./script.js"
+  import alignImage from "@/assets/main/align_these.png"
+  import "./script.js"
 </script>
 
 <template>
@@ -20,8 +20,7 @@ import "./script.js"
         top: -40px;
         opacity: 0.5;
         pointer-events: none;
-      "
-    />
+      " />
 
     <div
       style="
@@ -32,8 +31,7 @@ import "./script.js"
         left: 240px;
         z-index: 6;
       "
-      id="square1-over"
-    >
+      id="square1-over">
       <p
         style="
           padding: 2rem;
@@ -41,8 +39,7 @@ import "./script.js"
           font-family: sans-serif;
           font-size: 1.5rem;
           pointer-events: none;
-        "
-      >
+        ">
         This is a square
       </p>
     </div>
@@ -56,8 +53,7 @@ import "./script.js"
         left: 480px;
         z-index: 6;
       "
-      id="square2-over"
-    >
+      id="square2-over">
       <p
         style="
           padding: 2rem;
@@ -65,8 +61,7 @@ import "./script.js"
           font-family: sans-serif;
           pointer-events: none;
           font-size: 1.5rem;
-        "
-      >
+        ">
         This is also a square
       </p>
     </div>
@@ -80,8 +75,7 @@ import "./script.js"
         left: 730px;
         z-index: 6;
       "
-      id="square4-over"
-    ></div>
+      id="square4-over"></div>
 
     <div
       id="square-target"
@@ -92,8 +86,7 @@ import "./script.js"
         bottom: 40px;
         right: 40px;
         z-index: 6;
-      "
-    ></div>
+      "></div>
 
     <div id="line">
       <div id="line-cover" style="background-color: black; z-index: 3"></div>
@@ -102,59 +95,59 @@ import "./script.js"
 </template>
 
 <style scoped>
-#line,
-#line-cover {
-  transition: opacity 0.3s ease;
-}
+  #line,
+  #line-cover {
+    transition: opacity 0.3s ease;
+  }
 
-.blueprint {
-  background-color: rgb(10, 154, 251);
-  overflow: hidden;
-  width: 100vw;
-  height: 100vh;
-}
+  .blueprint {
+    background-color: rgb(10, 154, 251);
+    overflow: hidden;
+    width: 100vw;
+    height: 100vh;
+  }
 
-#square1-over,
-#square2-over,
-#square3-over,
-#square4-over,
-#square-target {
-  border-radius: 4px;
-  border: 3px dashed #f2f2f2;
-  transition: border 0.3s ease-out;
-  box-sizing: border-box;
-  background-color: transparent;
-}
+  #square1-over,
+  #square2-over,
+  #square3-over,
+  #square4-over,
+  #square-target {
+    border-radius: 4px;
+    border: 3px dashed #f2f2f2;
+    transition: border 0.3s ease-out;
+    box-sizing: border-box;
+    background-color: transparent;
+  }
 
-#back,
-#back2,
-#back3 {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: rgb(10, 154, 251);
-  background-size:
-    40px 40px,
-    120px 120px,
-    120px 120px;
-  background-image: radial-gradient(
-      circle,
-      rgba(242, 242, 242, 0.2) 2px,
-      rgba(0, 0, 0, 0) 1px
-    ),
-    linear-gradient(to right, rgba(242, 242, 242, 0.1) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(242, 242, 242, 0.1) 1px, transparent 1px);
-  background-position:
-    0 0,
-    -20px -20px,
-    -20px -20px;
-}
+  #back,
+  #back2,
+  #back3 {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgb(10, 154, 251);
+    background-size:
+      40px 40px,
+      120px 120px,
+      120px 120px;
+    background-image: radial-gradient(
+        circle,
+        rgba(242, 242, 242, 0.2) 2px,
+        rgba(0, 0, 0, 0) 1px
+      ),
+      linear-gradient(to right, rgba(242, 242, 242, 0.1) 1px, transparent 1px),
+      linear-gradient(to bottom, rgba(242, 242, 242, 0.1) 1px, transparent 1px);
+    background-position:
+      0 0,
+      -20px -20px,
+      -20px -20px;
+  }
 
-#back2,
-#back3 {
-  z-index: 4;
-}
+  #back2,
+  #back3 {
+    z-index: 4;
+  }
 </style>
diff --git a/src/components/main/blocks/blueprint/index.html b/src/components/main/blocks/blueprint/index.html
index 63e43c2..ba6efac 100644
--- a/src/components/main/blocks/blueprint/index.html
+++ b/src/components/main/blocks/blueprint/index.html
@@ -22,8 +22,7 @@
         top: -40px;
         opacity: 0.5;
         pointer-events: none;
-      "
-    />
+      " />
 
     <div
       style="
@@ -34,8 +33,7 @@
         left: 240px;
         z-index: 6;
       "
-      id="square1-over"
-    >
+      id="square1-over">
       <p
         style="
           padding: 2rem;
@@ -43,8 +41,7 @@
           font-family: sans-serif;
           font-size: 1.5rem;
           pointer-events: none;
-        "
-      >
+        ">
         This is a square
       </p>
     </div>
@@ -58,8 +55,7 @@
         left: 480px;
         z-index: 6;
       "
-      id="square2-over"
-    >
+      id="square2-over">
       <p
         style="
           padding: 2rem;
@@ -67,8 +63,7 @@
           font-family: sans-serif;
           pointer-events: none;
           font-size: 1.5rem;
-        "
-      >
+        ">
         This is also a square
       </p>
     </div>
@@ -82,8 +77,7 @@
         left: 730px;
         z-index: 6;
       "
-      id="square4-over"
-    ></div>
+      id="square4-over"></div>
 
     <div
       id="square-target"
@@ -94,8 +88,7 @@
         bottom: 40px;
         right: 40px;
         z-index: 6;
-      "
-    ></div>
+      "></div>
 
     <div id="line">
       <div id="line-cover" style="background-color: black; z-index: 3"></div>
diff --git a/src/components/main/blocks/ctaForm/ctaForm.vue b/src/components/main/blocks/ctaForm/ctaForm.vue
index e580c3c..0d2656b 100644
--- a/src/components/main/blocks/ctaForm/ctaForm.vue
+++ b/src/components/main/blocks/ctaForm/ctaForm.vue
@@ -1,19 +1,19 @@
 <script setup>
-const props = defineProps({
-  brightness: Number,
-})
+  const props = defineProps({
+    brightness: Number,
+  })
 
-const pClass = (brightness) => {
-  if (brightness >= 4) {
-    return "text-slate-800"
-  } else if (brightness == 3) {
-    return "text-slate-200"
-  } else if (brightness == 2) {
-    return "text-slate-300"
-  } else if (brightness == 1) {
-    return "text-slate-300"
+  const pClass = (brightness) => {
+    if (brightness >= 4) {
+      return "text-slate-800"
+    } else if (brightness == 3) {
+      return "text-slate-200"
+    } else if (brightness == 2) {
+      return "text-slate-300"
+    } else if (brightness == 1) {
+      return "text-slate-300"
+    }
   }
-}
 </script>
 
 <template>
@@ -25,8 +25,7 @@ const pClass = (brightness) => {
       'bg-slate-500': brightness == 3,
       'bg-slate-700': brightness == 2,
       'bg-slate-800': brightness == 1,
-    }"
-  >
+    }">
     <div class="prose text-center">
       <h4 class="text-2xl" :class="pClass(brightness)">
         Piqued your interest?<br />
@@ -40,8 +39,7 @@ const pClass = (brightness) => {
             'bg-orange-700': brightness == 3,
             'bg-orange-600': brightness == 2,
             'bg-orange-500': brightness == 1,
-          }"
-        >
+          }">
           I already have a site
         </button></a
       >
@@ -59,8 +57,7 @@ const pClass = (brightness) => {
             'bg-slate-600': brightness == 3,
             'bg-slate-800': brightness == 2,
             'bg-slate-900': brightness == 1,
-          }"
-        />
+          }" />
         <input
           type="email"
           placeholder="Email"
@@ -71,8 +68,7 @@ const pClass = (brightness) => {
             'bg-slate-600': brightness == 3,
             'bg-slate-800': brightness == 2,
             'bg-slate-900': brightness == 1,
-          }"
-        />
+          }" />
         <textarea
           placeholder="Message"
           class="rounded p-2 w-full mt-3"
@@ -82,8 +78,7 @@ const pClass = (brightness) => {
             'bg-slate-600': brightness == 3,
             'bg-slate-800': brightness == 2,
             'bg-slate-900': brightness == 1,
-          }"
-        ></textarea>
+          }"></textarea>
         <button
           type="submit"
           class="rounded px-5 py-2 text-white font-semibold w-full mt-2"
@@ -92,8 +87,7 @@ const pClass = (brightness) => {
             'bg-slate-400': brightness == 3,
             'bg-orange-600': brightness == 2,
             'bg-orange-500': brightness == 1,
-          }"
-        >
+          }">
           Contact Me
         </button>
       </form>
diff --git a/src/components/main/blocks/header/Header.vue b/src/components/main/blocks/header/Header.vue
index 836c67d..73efd95 100644
--- a/src/components/main/blocks/header/Header.vue
+++ b/src/components/main/blocks/header/Header.vue
@@ -1,39 +1,39 @@
 <script setup>
-import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue"
-import {
-  GalleryThumbnails,
-  ChevronDown,
-  ChevronUp,
-  Library,
-  Search,
-  Sun,
-  Moon,
-  CloudDrizzle,
-  Terminal,
-  CloudSun,
-  MoonStar,
-} from "lucide-vue-next"
-import { ref, onMounted } from "vue"
+  import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue"
+  import {
+    GalleryThumbnails,
+    ChevronDown,
+    ChevronUp,
+    Library,
+    Search,
+    Sun,
+    Moon,
+    CloudDrizzle,
+    Terminal,
+    CloudSun,
+    MoonStar,
+  } from "lucide-vue-next"
+  import { ref, onMounted } from "vue"
 
-const brightness = ref(5)
+  const brightness = ref(5)
 
-const emit = defineEmits(["update:brightness"])
+  const emit = defineEmits(["update:brightness"])
 
-const updateBrightness = (event) => {
-  brightness.value = event.target.value
-  emit("update:brightness", brightness.value)
-}
-
-onMounted(() => {
-  let localStorage = window.localStorage
-  if (localStorage.getItem("brightness")) {
-    brightness.value = Number(localStorage.getItem("brightness"))
+  const updateBrightness = (event) => {
+    brightness.value = event.target.value
+    emit("update:brightness", brightness.value)
   }
-})
 
-const goHome = () => {
-  window.location.href = "/"
-}
+  onMounted(() => {
+    let localStorage = window.localStorage
+    if (localStorage.getItem("brightness")) {
+      brightness.value = Number(localStorage.getItem("brightness"))
+    }
+  })
+
+  const goHome = () => {
+    window.location.href = "/"
+  }
 </script>
 
 <template>
@@ -48,8 +48,7 @@ const goHome = () => {
         'bg-slate-600': brightness == 3,
         'bg-slate-800': brightness == 2,
         'bg-slate-900': brightness == 1,
-      }"
-    >
+      }">
       <div class="flex justify-between gap-2 w-full content-center">
         <div class="flex gap-1 p-2">
           <Terminal
@@ -59,8 +58,7 @@ const goHome = () => {
               'text-orange-500': brightness == 2,
               'text-orange-400': brightness == 1,
             }"
-            stroke-width="3"
-          />
+            stroke-width="3" />
 
           <p
             :class="{
@@ -71,8 +69,7 @@ const goHome = () => {
             }"
             class="font-monospace font-bold cursor-pointer"
             @click="goHome"
-            id="logoText"
-          >
+            id="logoText">
             josephhansen.dev
           </p>
         </div>
@@ -86,8 +83,7 @@ const goHome = () => {
               'text-slate-300': brightness == 3,
               'text-slate-200': brightness == 2,
               'text-slate-400': brightness == 1,
-            }"
-          >
+            }">
             Web Portfolio
           </h6>
 
@@ -99,8 +95,7 @@ const goHome = () => {
               'text-slate-300': brightness == 3,
               'text-slate-200': brightness == 2,
               'text-slate-400': brightness == 1,
-            }"
-          >
+            }">
             Web Services
           </h6>
 
@@ -113,8 +108,7 @@ const goHome = () => {
                 'text-slate-300': brightness == 3,
                 'text-slate-200': brightness == 2,
                 'text-slate-400': brightness == 1,
-              }"
-            >
+              }">
               Creative Projects<ChevronDown />
             </PopoverButton>
             <PopoverPanel
@@ -125,14 +119,12 @@ const goHome = () => {
                 'bg-slate-500': brightness == 3,
                 'bg-slate-700': brightness == 2,
                 'bg-slate-800': brightness == 1,
-              }"
-            >
+              }">
               <div
                 class="py-1"
                 role="menu"
                 aria-orientation="vertical"
-                aria-labelledby="options-menu"
-              >
+                aria-labelledby="options-menu">
                 <a
                   href="#"
                   class="block px-4 py-2"
@@ -197,8 +189,7 @@ const goHome = () => {
               'text-slate-300': brightness == 3,
               'text-slate-200': brightness == 2,
               'text-slate-400': brightness == 1,
-            }"
-          >
+            }">
             About Me
           </h6>
         </div>
@@ -211,8 +202,7 @@ const goHome = () => {
               'bg-orange-600': brightness == 2,
               'bg-orange-500': brightness == 1,
             }"
-            class="py-2 px-3 rounded text-white"
-          >
+            class="py-2 px-3 rounded text-white">
             Contact
           </button>
 
@@ -225,8 +215,7 @@ const goHome = () => {
               'text-slate-200': brightness == 2,
               'text-slate-400': brightness == 1,
             }"
-            stroke-width="2"
-          />
+            stroke-width="2" />
         </div>
       </div>
     </div>
@@ -240,8 +229,7 @@ const goHome = () => {
         'bg-slate-600': brightness == 3,
         'bg-slate-800': brightness == 2,
         'bg-slate-900': brightness == 1,
-      }"
-    >
+      }">
       <Popover>
         <PopoverButton
           class="rounded mt-2 px-2"
@@ -251,8 +239,7 @@ const goHome = () => {
             'bg-slate-600': brightness == 3,
             'bg-slate-800': brightness == 2,
             'bg-slate-900': brightness == 1,
-          }"
-        >
+          }">
           <Sun v-if="brightness == 5" class="text-slate-900" />
           <CloudSun v-else-if="brightness == 4" class="text-slate-800" />
           <CloudDrizzle v-else-if="brightness == 3" class="text-slate-300" />
@@ -269,8 +256,7 @@ const goHome = () => {
                 v-model="brightness"
                 @input="updateBrightness"
                 class="slider w-20 mx-auto"
-                id="myRange"
-              />
+                id="myRange" />
             </div>
           </div>
         </PopoverPanel>
@@ -281,7 +267,7 @@ const goHome = () => {
 </template>
 
 <style scoped>
-#logoText {
-  transition: all 0.2s ease-in-out;
-}
+  #logoText {
+    transition: all 0.2s ease-in-out;
+  }
 </style>
diff --git a/src/components/main/blocks/messageBanner/messageBanner.vue b/src/components/main/blocks/messageBanner/messageBanner.vue
index 55d9b1b..b4f0066 100644
--- a/src/components/main/blocks/messageBanner/messageBanner.vue
+++ b/src/components/main/blocks/messageBanner/messageBanner.vue
@@ -1,38 +1,38 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from "vue"
-const props = defineProps({
-  brightness: Number,
-})
+  import { ref, computed, onMounted, onUnmounted } from "vue"
+  const props = defineProps({
+    brightness: Number,
+  })
 
-const isRevealed = ref(false)
+  const isRevealed = ref(false)
 
-onMounted(() => {
-  const checkScroll = () => {
-    isRevealed.value = window.scrollY > 200
-    let url = window.location.href
-    if (url.includes("pricing")) {
-      isRevealed.value = false
+  onMounted(() => {
+    const checkScroll = () => {
+      isRevealed.value = window.scrollY > 200
+      let url = window.location.href
+      if (url.includes("pricing")) {
+        isRevealed.value = false
+      }
     }
-  }
 
-  window.addEventListener("scroll", checkScroll)
+    window.addEventListener("scroll", checkScroll)
 
-  onUnmounted(() => {
-    window.removeEventListener("scroll", checkScroll)
+    onUnmounted(() => {
+      window.removeEventListener("scroll", checkScroll)
+    })
   })
-})
 
-const pClass = (brightness) => {
-  if (brightness >= 4) {
-    return "text-slate-800"
-  } else if (brightness == 3) {
-    return "text-slate-200"
-  } else if (brightness == 2) {
-    return "text-slate-300"
-  } else if (brightness == 1) {
-    return "text-slate-300"
+  const pClass = (brightness) => {
+    if (brightness >= 4) {
+      return "text-slate-800"
+    } else if (brightness == 3) {
+      return "text-slate-200"
+    } else if (brightness == 2) {
+      return "text-slate-300"
+    } else if (brightness == 1) {
+      return "text-slate-300"
+    }
   }
-}
 </script>
 
 <template>
@@ -47,8 +47,7 @@ const pClass = (brightness) => {
       'bg-slate-800': brightness == 1,
       'opacity-0': !isRevealed,
       'opacity-100': isRevealed,
-    }"
-  >
+    }">
     <p class="text-center" :class="pClass(brightness)">
       Get a free site speed audit with recommendations for optimizing. My gift
       to you.
@@ -61,8 +60,7 @@ const pClass = (brightness) => {
           'bg-orange-700': brightness == 3,
           'bg-orange-600': brightness == 2,
           'bg-orange-500': brightness == 1,
-        }"
-      >
+        }">
         Get a Free Audit
       </button></a
     >
diff --git a/src/components/main/blocks/pricing/servicesCalculator/servicesCalculator.vue b/src/components/main/blocks/pricing/servicesCalculator/servicesCalculator.vue
index 4315cd0..ebb8656 100644
--- a/src/components/main/blocks/pricing/servicesCalculator/servicesCalculator.vue
+++ b/src/components/main/blocks/pricing/servicesCalculator/servicesCalculator.vue
@@ -1,406 +1,406 @@
 <script setup>
-import { ref, computed, onMounted } from "vue"
-import {
-  ShieldCheck,
-  GaugeCircle,
-  ShowerHead,
-  PencilRuler,
-  Frame,
-  EyeOff,
-} from "lucide-vue-next"
-const props = defineProps({
-  brightness: Number,
-})
-const iconClass = (brightness) => {
-  if (brightness >= 4) {
-    return "text-emerald-500"
-  } else if (brightness == 3) {
-    return "text-orange-200"
-  } else if (brightness == 2) {
-    return "text-orange-500"
-  } else if (brightness == 1) {
-    return "text-orange-400"
+  import { ref, computed, onMounted } from "vue"
+  import {
+    ShieldCheck,
+    GaugeCircle,
+    ShowerHead,
+    PencilRuler,
+    Frame,
+    EyeOff,
+  } from "lucide-vue-next"
+  const props = defineProps({
+    brightness: Number,
+  })
+  const iconClass = (brightness) => {
+    if (brightness >= 4) {
+      return "text-emerald-500"
+    } else if (brightness == 3) {
+      return "text-orange-200"
+    } else if (brightness == 2) {
+      return "text-orange-500"
+    } else if (brightness == 1) {
+      return "text-orange-400"
+    }
   }
-}
-
-const chartClass = (brightness) => {
-  if (brightness >= 4) {
-    return "text-emerald-500 bg-emerald-950"
-  } else if (brightness == 3) {
-    return "text-orange-200 bg-orange-950"
-  } else if (brightness == 2) {
-    return "text-orange-500 bg-orange-950"
-  } else if (brightness == 1) {
-    return "text-orange-400 bg-orange-950"
+
+  const chartClass = (brightness) => {
+    if (brightness >= 4) {
+      return "text-emerald-500 bg-emerald-950"
+    } else if (brightness == 3) {
+      return "text-orange-200 bg-orange-950"
+    } else if (brightness == 2) {
+      return "text-orange-500 bg-orange-950"
+    } else if (brightness == 1) {
+      return "text-orange-400 bg-orange-950"
+    }
   }
-}
-
-const ringClass = (brightness) => {
-  if (brightness >= 4) {
-    return "border-emerald-500"
-  } else if (brightness == 3) {
-    return "border-orange-200"
-  } else if (brightness == 2) {
-    return "border-orange-500"
-  } else if (brightness == 1) {
-    return "border-orange-400"
+
+  const ringClass = (brightness) => {
+    if (brightness >= 4) {
+      return "border-emerald-500"
+    } else if (brightness == 3) {
+      return "border-orange-200"
+    } else if (brightness == 2) {
+      return "border-orange-500"
+    } else if (brightness == 1) {
+      return "border-orange-400"
+    }
   }
-}
-
-const pClass = (brightness) => {
-  if (brightness >= 4) {
-    return "text-slate-800"
-  } else if (brightness == 3) {
-    return "text-slate-200"
-  } else if (brightness == 2) {
-    return "text-slate-300"
-  } else if (brightness == 1) {
-    return "text-slate-300"
+
+  const pClass = (brightness) => {
+    if (brightness >= 4) {
+      return "text-slate-800"
+    } else if (brightness == 3) {
+      return "text-slate-200"
+    } else if (brightness == 2) {
+      return "text-slate-300"
+    } else if (brightness == 1) {
+      return "text-slate-300"
+    }
   }
-}
 
-const pricing = ref({
-  speed: {
-    audit: {
-      price: 0,
-      title: "Detailed speed audit (100% free)",
-      enabled: true,
+  const pricing = ref({
+    speed: {
+      audit: {
+        price: 0,
+        title: "Detailed speed audit (100% free)",
+        enabled: true,
+      },
+      optimize: {
+        price: 300,
+        title: "Optimize your website for speed",
+        enabled: true,
+      },
+      caching: {
+        price: 300,
+        title: "Setup efficient caching and always online",
+        enabled: true,
+      },
+      images: {
+        price: 150,
+        title: "Optimize images for speed and efficiency",
+        enabled: true,
+      },
     },
-    optimize: {
-      price: 300,
-      title: "Optimize your website for speed",
-      enabled: true,
+    security: {
+      audit: {
+        price: 100,
+        title: "Detailed security audit and report",
+        enabled: false,
+      },
+      protection: {
+        price: 500,
+        title: "Top-of-the-line bot protection and attack shielding",
+        enabled: false,
+      },
+      ddosprotection: {
+        price: 100,
+        title: "DDoS protection",
+        enabled: false,
+      },
     },
-    caching: {
-      price: 300,
-      title: "Setup efficient caching and always online",
-      enabled: true,
-    },
-    images: {
-      price: 150,
-      title: "Optimize images for speed and efficiency",
-      enabled: true,
-    },
-  },
-  security: {
-    audit: {
-      price: 100,
-      title: "Detailed security audit and report",
-      enabled: false,
-    },
-    protection: {
-      price: 500,
-      title: "Top-of-the-line bot protection and attack shielding",
-      enabled: false,
+    accessibility: {
+      audit: {
+        price: 200,
+        title: "Accessibility audit and report",
+        enabled: false,
+      },
+      levelA: {
+        price: 300,
+        title: "Level A accessibility, across your site",
+        enabled: false,
+      },
+      levelAA: {
+        price: 300,
+        title: "Level AA accessibility, across your site",
+        enabled: false,
+      },
     },
-    ddosprotection: {
-      price: 100,
-      title: "DDoS protection",
-      enabled: false,
-    },
-  },
-  accessibility: {
-    audit: {
-      price: 200,
-      title: "Accessibility audit and report",
-      enabled: false,
-    },
-    levelA: {
-      price: 300,
-      title: "Level A accessibility, across your site",
-      enabled: false,
-    },
-    levelAA: {
-      price: 300,
-      title: "Level AA accessibility, across your site",
-      enabled: false,
-    },
-  },
-  designOverhaul: {
     designOverhaul: {
-      price: 1000,
-      title: "Design overhaul",
-      enabled: false,
+      designOverhaul: {
+        price: 1000,
+        title: "Design overhaul",
+        enabled: false,
+      },
     },
-  },
-})
-
-const speedDiscount = computed(() => {
-  if (
-    pricing.value.speed.audit.enabled &&
-    pricing.value.speed.optimize.enabled &&
-    pricing.value.speed.caching.enabled &&
-    pricing.value.speed.images.enabled
-  ) {
-    return 2 / 3
-  } else {
-    return 3 / 3
-  }
-})
-
-const securityDiscount = computed(() => {
-  if (
-    pricing.value.security.audit.enabled &&
-    pricing.value.security.ddosprotection.enabled &&
-    pricing.value.security.protection.enabled
-  ) {
-    return 5 / 7
-  } else {
-    return 3 / 3
-  }
-})
-
-const accessibilityDiscount = computed(() => {
-  if (
-    pricing.value.accessibility.audit.enabled &&
-    pricing.value.accessibility.levelA.enabled &&
-    pricing.value.accessibility.levelAA.enabled
-  ) {
-    return 3 / 4
-  } else {
+  })
+
+  const speedDiscount = computed(() => {
+    if (
+      pricing.value.speed.audit.enabled &&
+      pricing.value.speed.optimize.enabled &&
+      pricing.value.speed.caching.enabled &&
+      pricing.value.speed.images.enabled
+    ) {
+      return 2 / 3
+    } else {
+      return 3 / 3
+    }
+  })
+
+  const securityDiscount = computed(() => {
+    if (
+      pricing.value.security.audit.enabled &&
+      pricing.value.security.ddosprotection.enabled &&
+      pricing.value.security.protection.enabled
+    ) {
+      return 5 / 7
+    } else {
+      return 3 / 3
+    }
+  })
+
+  const accessibilityDiscount = computed(() => {
+    if (
+      pricing.value.accessibility.audit.enabled &&
+      pricing.value.accessibility.levelA.enabled &&
+      pricing.value.accessibility.levelAA.enabled
+    ) {
+      return 3 / 4
+    } else {
+      return 3 / 3
+    }
+  })
+
+  const designOverhaulDiscount = computed(() => {
     return 3 / 3
-  }
-})
-
-const designOverhaulDiscount = computed(() => {
-  return 3 / 3
-})
-
-const speedPrice = computed(() => {
-  return (
-    Object.values(pricing.value.speed).reduce(
-      (total, service) => total + (service.enabled ? service.price : 0),
-      0,
-    ) * speedDiscount.value
-  )
-})
-
-const securityPrice = computed(() => {
-  return (
-    Object.values(pricing.value.security).reduce(
-      (total, service) => total + (service.enabled ? service.price : 0),
-      0,
-    ) * securityDiscount.value
-  )
-})
-
-const accessibilityPrice = computed(() => {
-  return (
-    Object.values(pricing.value.accessibility).reduce(
-      (total, service) => total + (service.enabled ? service.price : 0),
-      0,
-    ) * accessibilityDiscount.value
-  )
-})
-
-const designOverhaulPrice = computed(() => {
-  return (
-    Object.values(pricing.value.designOverhaul).reduce(
-      (total, service) => total + (service.enabled ? service.price : 0),
-      0,
-    ) * designOverhaulDiscount.value
-  )
-})
-
-const fullSpeedPrice = computed(() => {
-  let price = 0
-  for (const [key, value] of Object.entries(pricing.value.speed)) {
-    if (value.enabled) {
-      price += value.price
+  })
+
+  const speedPrice = computed(() => {
+    return (
+      Object.values(pricing.value.speed).reduce(
+        (total, service) => total + (service.enabled ? service.price : 0),
+        0,
+      ) * speedDiscount.value
+    )
+  })
+
+  const securityPrice = computed(() => {
+    return (
+      Object.values(pricing.value.security).reduce(
+        (total, service) => total + (service.enabled ? service.price : 0),
+        0,
+      ) * securityDiscount.value
+    )
+  })
+
+  const accessibilityPrice = computed(() => {
+    return (
+      Object.values(pricing.value.accessibility).reduce(
+        (total, service) => total + (service.enabled ? service.price : 0),
+        0,
+      ) * accessibilityDiscount.value
+    )
+  })
+
+  const designOverhaulPrice = computed(() => {
+    return (
+      Object.values(pricing.value.designOverhaul).reduce(
+        (total, service) => total + (service.enabled ? service.price : 0),
+        0,
+      ) * designOverhaulDiscount.value
+    )
+  })
+
+  const fullSpeedPrice = computed(() => {
+    let price = 0
+    for (const [key, value] of Object.entries(pricing.value.speed)) {
+      if (value.enabled) {
+        price += value.price
+      }
     }
-  }
-  return price
-})
-
-const fullSecurityPrice = computed(() => {
-  let price = 0
-  for (const [key, value] of Object.entries(pricing.value.security)) {
-    if (value.enabled) {
-      price += value.price
+    return price
+  })
+
+  const fullSecurityPrice = computed(() => {
+    let price = 0
+    for (const [key, value] of Object.entries(pricing.value.security)) {
+      if (value.enabled) {
+        price += value.price
+      }
     }
-  }
-  return price
-})
-
-const fullAccessibilityPrice = computed(() => {
-  let price = 0
-  for (const [key, value] of Object.entries(pricing.value.accessibility)) {
-    if (value.enabled) {
-      price += value.price
+    return price
+  })
+
+  const fullAccessibilityPrice = computed(() => {
+    let price = 0
+    for (const [key, value] of Object.entries(pricing.value.accessibility)) {
+      if (value.enabled) {
+        price += value.price
+      }
     }
-  }
-  return price
-})
-
-const fullDesignOverhaulPrice = computed(() => {
-  let price = 0
-  for (const [key, value] of Object.entries(pricing.value.designOverhaul)) {
-    if (value.enabled) {
-      price += value.price
+    return price
+  })
+
+  const fullDesignOverhaulPrice = computed(() => {
+    let price = 0
+    for (const [key, value] of Object.entries(pricing.value.designOverhaul)) {
+      if (value.enabled) {
+        price += value.price
+      }
+    }
+    return price
+  })
+
+  const toggleAllSpeed = () => {
+    if (
+      pricing.value.speed.audit.enabled &&
+      pricing.value.speed.optimize.enabled &&
+      pricing.value.speed.caching.enabled &&
+      pricing.value.speed.images.enabled
+    ) {
+      pricing.value.speed.audit.enabled = false
+      pricing.value.speed.optimize.enabled = false
+      pricing.value.speed.caching.enabled = false
+      pricing.value.speed.images.enabled = false
+    } else {
+      pricing.value.speed.audit.enabled = true
+      pricing.value.speed.optimize.enabled = true
+      pricing.value.speed.caching.enabled = true
+      pricing.value.speed.images.enabled = true
     }
   }
-  return price
-})
-
-const toggleAllSpeed = () => {
-  if (
-    pricing.value.speed.audit.enabled &&
-    pricing.value.speed.optimize.enabled &&
-    pricing.value.speed.caching.enabled &&
-    pricing.value.speed.images.enabled
-  ) {
-    pricing.value.speed.audit.enabled = false
-    pricing.value.speed.optimize.enabled = false
-    pricing.value.speed.caching.enabled = false
-    pricing.value.speed.images.enabled = false
-  } else {
-    pricing.value.speed.audit.enabled = true
-    pricing.value.speed.optimize.enabled = true
-    pricing.value.speed.caching.enabled = true
-    pricing.value.speed.images.enabled = true
-  }
-}
-
-const toggleAllSecurity = () => {
-  if (
-    pricing.value.security.audit.enabled &&
-    pricing.value.security.ddosprotection.enabled &&
-    pricing.value.security.protection.enabled
-  ) {
-    pricing.value.security.audit.enabled = false
-    pricing.value.security.ddosprotection.enabled = false
-    pricing.value.security.protection.enabled = false
-  } else {
-    pricing.value.security.audit.enabled = true
-    pricing.value.security.ddosprotection.enabled = true
-    pricing.value.security.protection.enabled = true
-  }
-}
-
-const toggleAllAccessibility = () => {
-  if (
-    pricing.value.accessibility.audit.enabled &&
-    pricing.value.accessibility.levelA.enabled &&
-    pricing.value.accessibility.levelAA.enabled
-  ) {
-    pricing.value.accessibility.audit.enabled = false
-    pricing.value.accessibility.levelA.enabled = false
-    pricing.value.accessibility.levelAA.enabled = false
-  } else {
-    pricing.value.accessibility.audit.enabled = true
-    pricing.value.accessibility.levelA.enabled = true
-    pricing.value.accessibility.levelAA.enabled = true
+
+  const toggleAllSecurity = () => {
+    if (
+      pricing.value.security.audit.enabled &&
+      pricing.value.security.ddosprotection.enabled &&
+      pricing.value.security.protection.enabled
+    ) {
+      pricing.value.security.audit.enabled = false
+      pricing.value.security.ddosprotection.enabled = false
+      pricing.value.security.protection.enabled = false
+    } else {
+      pricing.value.security.audit.enabled = true
+      pricing.value.security.ddosprotection.enabled = true
+      pricing.value.security.protection.enabled = true
+    }
   }
-}
 
-const toggleAllDesignOverhaul = () => {
-  if (pricing.value.designOverhaul.designOverhaul.enabled) {
-    pricing.value.designOverhaul.designOverhaul.enabled = false
-  } else {
-    pricing.value.designOverhaul.designOverhaul.enabled = true
+  const toggleAllAccessibility = () => {
+    if (
+      pricing.value.accessibility.audit.enabled &&
+      pricing.value.accessibility.levelA.enabled &&
+      pricing.value.accessibility.levelAA.enabled
+    ) {
+      pricing.value.accessibility.audit.enabled = false
+      pricing.value.accessibility.levelA.enabled = false
+      pricing.value.accessibility.levelAA.enabled = false
+    } else {
+      pricing.value.accessibility.audit.enabled = true
+      pricing.value.accessibility.levelA.enabled = true
+      pricing.value.accessibility.levelAA.enabled = true
+    }
   }
-}
-
-const toggleAll = (block) => {
-  if (block.title == "Speed") {
-    toggleAllSpeed()
-  } else if (block.title == "Security") {
-    toggleAllSecurity()
-  } else if (block.title == "Accessibility") {
-    toggleAllAccessibility()
-  } else if (block.title == "Design Overhaul") {
-    toggleAllDesignOverhaul()
+
+  const toggleAllDesignOverhaul = () => {
+    if (pricing.value.designOverhaul.designOverhaul.enabled) {
+      pricing.value.designOverhaul.designOverhaul.enabled = false
+    } else {
+      pricing.value.designOverhaul.designOverhaul.enabled = true
+    }
   }
-}
-
-const blockEnabled = (block) => {
-  return Object.values(block.services).some((service) => service.enabled)
-}
-
-const blocks = ref([
-  {
-    title: "Speed",
-    services: pricing.value.speed,
-    enabled: true,
-    discount: speedDiscount.value,
-  },
-  {
-    title: "Security",
-    services: pricing.value.security,
-    enabled: false,
-    discount: securityDiscount.value,
-  },
-  {
-    title: "Accessibility",
-    services: pricing.value.accessibility,
-    enabled: false,
-    discount: accessibilityDiscount.value,
-  },
-  {
-    title: "Design Overhaul",
-    services: pricing.value.designOverhaul,
-    enabled: false,
-    discount: designOverhaulDiscount.value,
-  },
-])
-
-const getBlockPrice = (block) => {
-  if (block.title === "Speed") {
-    return speedPrice.value
-  } else if (block.title === "Security") {
-    return securityPrice.value
-  } else if (block.title === "Accessibility") {
-    return accessibilityPrice.value
-  } else if (block.title === "Design Overhaul") {
-    return designOverhaulPrice.value
+
+  const toggleAll = (block) => {
+    if (block.title == "Speed") {
+      toggleAllSpeed()
+    } else if (block.title == "Security") {
+      toggleAllSecurity()
+    } else if (block.title == "Accessibility") {
+      toggleAllAccessibility()
+    } else if (block.title == "Design Overhaul") {
+      toggleAllDesignOverhaul()
+    }
   }
-}
-
-const getBlockFullPrice = (block) => {
-  if (block.title === "Speed") {
-    return fullSpeedPrice.value
-  } else if (block.title === "Security") {
-    return fullSecurityPrice.value
-  } else if (block.title === "Accessibility") {
-    return fullAccessibilityPrice.value
-  } else if (block.title === "Design Overhaul") {
-    return fullDesignOverhaulPrice.value
+
+  const blockEnabled = (block) => {
+    return Object.values(block.services).some((service) => service.enabled)
   }
-}
-
-const total = computed(() => {
-  return (
-    getBlockPrice(blocks.value[0]) +
-    getBlockPrice(blocks.value[1]) +
-    getBlockPrice(blocks.value[2]) +
-    getBlockPrice(blocks.value[3])
-  )
-})
-
-const selectedServicesList = computed(() => {
-  let list = []
-  for (const [key, value] of Object.entries(pricing.value.speed)) {
-    if (value.enabled) {
-      list.push(value.title)
+
+  const blocks = ref([
+    {
+      title: "Speed",
+      services: pricing.value.speed,
+      enabled: true,
+      discount: speedDiscount.value,
+    },
+    {
+      title: "Security",
+      services: pricing.value.security,
+      enabled: false,
+      discount: securityDiscount.value,
+    },
+    {
+      title: "Accessibility",
+      services: pricing.value.accessibility,
+      enabled: false,
+      discount: accessibilityDiscount.value,
+    },
+    {
+      title: "Design Overhaul",
+      services: pricing.value.designOverhaul,
+      enabled: false,
+      discount: designOverhaulDiscount.value,
+    },
+  ])
+
+  const getBlockPrice = (block) => {
+    if (block.title === "Speed") {
+      return speedPrice.value
+    } else if (block.title === "Security") {
+      return securityPrice.value
+    } else if (block.title === "Accessibility") {
+      return accessibilityPrice.value
+    } else if (block.title === "Design Overhaul") {
+      return designOverhaulPrice.value
     }
   }
-  for (const [key, value] of Object.entries(pricing.value.security)) {
-    if (value.enabled) {
-      list.push(value.title)
+
+  const getBlockFullPrice = (block) => {
+    if (block.title === "Speed") {
+      return fullSpeedPrice.value
+    } else if (block.title === "Security") {
+      return fullSecurityPrice.value
+    } else if (block.title === "Accessibility") {
+      return fullAccessibilityPrice.value
+    } else if (block.title === "Design Overhaul") {
+      return fullDesignOverhaulPrice.value
     }
   }
-  for (const [key, value] of Object.entries(pricing.value.accessibility)) {
-    if (value.enabled) {
-      list.push(value.title)
+
+  const total = computed(() => {
+    return (
+      getBlockPrice(blocks.value[0]) +
+      getBlockPrice(blocks.value[1]) +
+      getBlockPrice(blocks.value[2]) +
+      getBlockPrice(blocks.value[3])
+    )
+  })
+
+  const selectedServicesList = computed(() => {
+    let list = []
+    for (const [key, value] of Object.entries(pricing.value.speed)) {
+      if (value.enabled) {
+        list.push(value.title)
+      }
     }
-  }
-  for (const [key, value] of Object.entries(pricing.value.designOverhaul)) {
-    if (value.enabled) {
-      list.push(value.title)
+    for (const [key, value] of Object.entries(pricing.value.security)) {
+      if (value.enabled) {
+        list.push(value.title)
+      }
     }
-  }
-  return list
-})
+    for (const [key, value] of Object.entries(pricing.value.accessibility)) {
+      if (value.enabled) {
+        list.push(value.title)
+      }
+    }
+    for (const [key, value] of Object.entries(pricing.value.designOverhaul)) {
+      if (value.enabled) {
+        list.push(value.title)
+      }
+    }
+    return list
+  })
 </script>
 
 <template>
@@ -408,8 +408,7 @@ const selectedServicesList = computed(() => {
     <div class="prose py-5 flex-col w-full">
       <h2
         class="text-5xl text-center text-semibold"
-        :class="pClass(props.brightness)"
-      >
+        :class="pClass(props.brightness)">
         Services Pricing
       </h2>
       <p class="text-center" :class="pClass(props.brightness)">
@@ -437,22 +436,19 @@ const selectedServicesList = computed(() => {
           'bg-slate-800': brightness == 1,
         },
         ringClass(brightness))
-      "
-    >
+      ">
       <div class="flex">
         <div class="w-6/12">
           <div
             class="text-4xl text-left text-bold flex items-center gap-3"
-            :class="pClass(props.brightness)"
-          >
+            :class="pClass(props.brightness)">
             <input
               type="checkbox"
               :name="block.title"
               :checked="blockEnabled(block)"
               @click="toggleAll(block)"
               class="rounded bg-gray-200 border-transparent focus:border-transparent focus:bg-gray-200 size-5 focus:ring-1 focus:ring-offset-2 focus:ring-gray-500"
-              :class="iconClass(brightness)"
-            />
+              :class="iconClass(brightness)" />
             <h3>{{ block.title }}</h3>
           </div>
         </div>
@@ -460,8 +456,7 @@ const selectedServicesList = computed(() => {
         <div class="w-6/12">
           <h3
             class="text-4xl text-bold text-right"
-            :class="iconClass(props.brightness)"
-          >
+            :class="iconClass(props.brightness)">
             <span
               class="text-slate-50 opacity-25 line-through pr-2"
               v-if="
@@ -479,8 +474,7 @@ const selectedServicesList = computed(() => {
         <div
           v-for="(service, serviceIndex) in block.services"
           :key="serviceIndex"
-          class="flex w-full items-center justify-between pb-4"
-        >
+          class="flex w-full items-center justify-between pb-4">
           <div class="flex items-center">
             <input
               type="checkbox"
@@ -488,8 +482,7 @@ const selectedServicesList = computed(() => {
               :checked="service.enabled"
               @click="service.enabled = !service.enabled"
               class="rounded bg-gray-200 border-transparent focus:border-transparent focus:bg-gray-200 size-5 focus:ring-1 focus:ring-offset-2 focus:ring-gray-500 mr-4"
-              :class="iconClass(brightness)"
-            />
+              :class="iconClass(brightness)" />
             <p class="" :class="pClass(props.brightness)">
               <b v-if="service.title == 'Detailed speed audit (100% free)'"
                 ><em>{{ service.title }}</em></b
@@ -500,8 +493,7 @@ const selectedServicesList = computed(() => {
           <div class="">
             <h3
               class="text-bold text-right"
-              :class="iconClass(props.brightness)"
-            >
+              :class="iconClass(props.brightness)">
               <span
                 class="text-slate-50 opacity-25 line-through pr-2"
                 v-if="
@@ -541,15 +533,13 @@ const selectedServicesList = computed(() => {
           required
           placeholder="Email"
           class="rounded p-5 w-full bg-gray-200 border-transparent focus:border-transparent focus:bg-gray-200 size-5 focus:ring-1 focus:ring-offset-2 focus:ring-gray-500 mb-4"
-          :class="iconClass(brightness)"
-        />
+          :class="iconClass(brightness)" />
         <input
           type="text"
           name="name"
           placeholder="Name"
           class="rounded p-5 w-full bg-gray-200 border-transparent focus:border-transparent focus:bg-gray-200 size-5 focus:ring-1 focus:ring-offset-2 focus:ring-gray-500 mb-4"
-          :class="iconClass(brightness)"
-        />
+          :class="iconClass(brightness)" />
       </div>
       <div class="flex gap-4">
         <input
@@ -558,14 +548,12 @@ const selectedServicesList = computed(() => {
           required
           placeholder="Website"
           class="rounded p-5 w-full bg-gray-200 border-transparent focus:border-transparent focus:bg-gray-200 size-5 focus:ring-1 focus:ring-offset-2 focus:ring-gray-500 mb-4"
-          :class="iconClass(brightness)"
-        />
+          :class="iconClass(brightness)" />
         <textarea
           name="notes"
           placeholder="Notes"
           class="rounded p-5 w-full h-24 bg-gray-200 border-transparent focus:border-transparent focus:bg-gray-200 size-5 focus:ring-1 focus:ring-offset-2 focus:ring-gray-500 mb-4"
-          :class="iconClass(brightness)"
-        />
+          :class="iconClass(brightness)" />
       </div>
       <button
         type="submit"
@@ -575,8 +563,7 @@ const selectedServicesList = computed(() => {
           'bg-orange-700': brightness == 3,
           'bg-orange-600': brightness == 2,
           'bg-orange-500': brightness == 1,
-        }"
-      >
+        }">
         Submit
       </button>
     </form>
@@ -594,9 +581,9 @@ const selectedServicesList = computed(() => {
 </template>
 
 <style scoped>
-.prose {
-  max-width: 100% !important;
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
+  .prose {
+    max-width: 100% !important;
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
 </style>
diff --git a/src/components/main/blocks/services/PanelAccessibility.vue b/src/components/main/blocks/services/PanelAccessibility.vue
index 366330c..a15e742 100644
--- a/src/components/main/blocks/services/PanelAccessibility.vue
+++ b/src/components/main/blocks/services/PanelAccessibility.vue
@@ -1,103 +1,101 @@
 <script setup>
-import { ref, computed, onMounted, watch } from "vue"
-const props = defineProps({
-  brightness: Number,
-})
-import ctaForm from "../ctaForm/ctaForm.vue"
-import chroma from "chroma-js"
-import { EyeOff, EarOff, Accessibility, Eye, Check, X } from "lucide-vue-next"
-
-const iconClass = (brightness) => {
-  if (brightness >= 4) {
-    return "text-emerald-500"
-  } else if (brightness == 3) {
-    return "text-orange-200"
-  } else if (brightness == 2) {
-    return "text-orange-500"
-  } else if (brightness == 1) {
-    return "text-orange-400"
-  }
-}
-
-const redGreenColorBlindMode = ref(false)
-const testSuccessButtonClass = computed(() => {
-  if (redGreenColorBlindMode.value) {
-    return "bg-emerald-500 hover:bg-emerald-600"
-  } else {
-    return "bg-gray-500 hover:bg-gray-600"
+  import { ref, computed, onMounted, watch } from "vue"
+  const props = defineProps({
+    brightness: Number,
+  })
+  import ctaForm from "../ctaForm/ctaForm.vue"
+  import chroma from "chroma-js"
+  import { EyeOff, EarOff, Accessibility, Eye, Check, X } from "lucide-vue-next"
+
+  const iconClass = (brightness) => {
+    if (brightness >= 4) {
+      return "text-emerald-500"
+    } else if (brightness == 3) {
+      return "text-orange-200"
+    } else if (brightness == 2) {
+      return "text-orange-500"
+    } else if (brightness == 1) {
+      return "text-orange-400"
+    }
   }
-})
 
-const testFailButtonClass = computed(() => {
-  if (redGreenColorBlindMode.value) {
-    return "bg-red-500 hover:bg-red-600"
-  } else {
-    return "bg-gray-500 hover:bg-gray-600"
-  }
-})
-
-const pClass = (brightness) => {
-  if (brightness >= 4) {
-    return "text-slate-800"
-  } else if (brightness == 3) {
-    return "text-slate-200"
-  } else if (brightness == 2) {
-    return "text-slate-300"
-  } else if (brightness == 1) {
-    return "text-slate-300"
-  }
-}
-
-const alternateTableRowColors = (brightness) => {
-  let rows = document.querySelectorAll("tr")
-
-  let currentBackground
-  if (brightness == 5) {
-    currentBackground = chroma("#e2e8f0")
-  } else if (brightness == 4) {
-    currentBackground = chroma("#cbd5e1")
-  } else if (brightness == 3) {
-    currentBackground = chroma("#475569")
-  } else if (brightness == 2) {
-    currentBackground = chroma("#1e293b")
-  } else if (brightness == 1) {
-    currentBackground = chroma("#0f172a")
-  }
-  for (let i = 1; i < rows.length; i++) {
-    if (i % 2 == 0) {
-      rows[i].style.backgroundColor = currentBackground.brighten(0.0)
+  const redGreenColorBlindMode = ref(false)
+  const testSuccessButtonClass = computed(() => {
+    if (redGreenColorBlindMode.value) {
+      return "bg-emerald-500 hover:bg-emerald-600"
     } else {
-      rows[i].style.backgroundColor = currentBackground.brighten(0.2)
+      return "bg-gray-500 hover:bg-gray-600"
+    }
+  })
+
+  const testFailButtonClass = computed(() => {
+    if (redGreenColorBlindMode.value) {
+      return "bg-red-500 hover:bg-red-600"
+    } else {
+      return "bg-gray-500 hover:bg-gray-600"
+    }
+  })
+
+  const pClass = (brightness) => {
+    if (brightness >= 4) {
+      return "text-slate-800"
+    } else if (brightness == 3) {
+      return "text-slate-200"
+    } else if (brightness == 2) {
+      return "text-slate-300"
+    } else if (brightness == 1) {
+      return "text-slate-300"
     }
   }
-}
 
-const toggleRedGreenColorBlindMode = () => {
-  redGreenColorBlindMode.value = !redGreenColorBlindMode.value
-  if (redGreenColorBlindMode.value) {
+  const alternateTableRowColors = (brightness) => {
+    let rows = document.querySelectorAll("tr")
+
+    let currentBackground
+    if (brightness == 5) {
+      currentBackground = chroma("#e2e8f0")
+    } else if (brightness == 4) {
+      currentBackground = chroma("#cbd5e1")
+    } else if (brightness == 3) {
+      currentBackground = chroma("#475569")
+    } else if (brightness == 2) {
+      currentBackground = chroma("#1e293b")
+    } else if (brightness == 1) {
+      currentBackground = chroma("#0f172a")
+    }
+    for (let i = 1; i < rows.length; i++) {
+      if (i % 2 == 0) {
+        rows[i].style.backgroundColor = currentBackground.brighten(0.0)
+      } else {
+        rows[i].style.backgroundColor = currentBackground.brighten(0.2)
+      }
+    }
+  }
+
+  const toggleRedGreenColorBlindMode = () => {
+    redGreenColorBlindMode.value = !redGreenColorBlindMode.value
+    if (redGreenColorBlindMode.value) {
+    }
   }
-}
-
-onMounted(() => {
-  alternateTableRowColors(props.brightness)
-})
-
-watch(
-  () => props.brightness,
-  (newValue, oldValue) => {
-    alternateTableRowColors(newValue)
-  },
-)
+
+  onMounted(() => {
+    alternateTableRowColors(props.brightness)
+  })
+
+  watch(
+    () => props.brightness,
+    (newValue, oldValue) => {
+      alternateTableRowColors(newValue)
+    },
+  )
 </script>
 
 <template>
   <div
-    class="flex w-full gap-4 md:p-8 sm:p-4 items-center justify-center flex-col"
-  >
+    class="flex w-full gap-4 md:p-8 sm:p-4 items-center justify-center flex-col">
     <div
       class="prose md:w-10/12 sm:w-12/12 mt-8"
-      style="max-width: 84ch !important"
-    >
+      style="max-width: 84ch !important">
       <h2 class="text-5xl" :class="pClass(brightness)">
         98% of websites don’t comply with the Web Content Accessibility
         Guidelines.
@@ -143,8 +141,7 @@ watch(
             'bg-orange-500 text-slate-800': brightness == 1,
           }"
           class="text-xl font-semibold rounded px-5 py-2 w-full flex align-middle"
-          @click="toggleRedGreenColorBlindMode"
-        >
+          @click="toggleRedGreenColorBlindMode">
           <EyeOff v-if="redGreenColorBlindMode" />
           <Eye v-if="!redGreenColorBlindMode" />
           Toggle red/green color blind/screen reader mode
@@ -154,8 +151,7 @@ watch(
         <div class="w-6/12">
           <button
             class="rounded px-5 py-2 w-full"
-            :class="testSuccessButtonClass"
-          >
+            :class="testSuccessButtonClass">
             <Check v-if="redGreenColorBlindMode" />
           </button>
         </div>
@@ -180,8 +176,7 @@ watch(
               'bg-orange-600 text-slate-800': brightness == 2,
               'bg-orange-500 text-slate-800': brightness == 1,
             }"
-            aria-label="Submit"
-          >
+            aria-label="Submit">
             Submit
             <Check />
           </button>
@@ -196,8 +191,7 @@ watch(
               'bg-orange-600 text-slate-800': brightness == 2,
               'bg-orange-500 text-slate-800': brightness == 1,
             }"
-            aria-label="Cancel"
-          >
+            aria-label="Cancel">
             Cancel
             <X />
           </button>
diff --git a/src/components/main/blocks/services/PanelDesign.vue b/src/components/main/blocks/services/PanelDesign.vue
index 01255f2..6b55149 100644
--- a/src/components/main/blocks/services/PanelDesign.vue
+++ b/src/components/main/blocks/services/PanelDesign.vue
@@ -1,81 +1,80 @@
 <script setup>
-import { ref, computed, onMounted, watch } from "vue"
-const props = defineProps({
-  brightness: Number,
-})
-import ctaForm from "../ctaForm/ctaForm.vue"
-import chroma from "chroma-js"
-import { MoveRight } from "lucide-vue-next"
+  import { ref, computed, onMounted, watch } from "vue"
+  const props = defineProps({
+    brightness: Number,
+  })
+  import ctaForm from "../ctaForm/ctaForm.vue"
+  import chroma from "chroma-js"
+  import { MoveRight } from "lucide-vue-next"
 
-import bazaarFigma from "@/assets/main/bazaarFigma.webp"
-import bazaarHero from "@/assets/main/bazaarHero.webp"
+  import bazaarFigma from "@/assets/main/bazaarFigma.webp"
+  import bazaarHero from "@/assets/main/bazaarHero.webp"
 
-const iconClass = (brightness) => {
-  if (brightness >= 4) {
-    return "text-emerald-500"
-  } else if (brightness == 3) {
-    return "text-orange-200"
-  } else if (brightness == 2) {
-    return "text-orange-500"
-  } else if (brightness == 1) {
-    return "text-orange-400"
+  const iconClass = (brightness) => {
+    if (brightness >= 4) {
+      return "text-emerald-500"
+    } else if (brightness == 3) {
+      return "text-orange-200"
+    } else if (brightness == 2) {
+      return "text-orange-500"
+    } else if (brightness == 1) {
+      return "text-orange-400"
+    }
   }
-}
 
-const pClass = (brightness) => {
-  if (brightness >= 4) {
-    return "text-slate-800"
-  } else if (brightness == 3) {
-    return "text-slate-200"
-  } else if (brightness == 2) {
-    return "text-slate-300"
-  } else if (brightness == 1) {
-    return "text-slate-300"
+  const pClass = (brightness) => {
+    if (brightness >= 4) {
+      return "text-slate-800"
+    } else if (brightness == 3) {
+      return "text-slate-200"
+    } else if (brightness == 2) {
+      return "text-slate-300"
+    } else if (brightness == 1) {
+      return "text-slate-300"
+    }
   }
-}
 
-const alternateTableRowColors = (brightness) => {
-  let rows = document.querySelectorAll("tr")
+  const alternateTableRowColors = (brightness) => {
+    let rows = document.querySelectorAll("tr")
 
-  let currentBackground
-  if (brightness == 5) {
-    currentBackground = chroma("#e2e8f0")
-  } else if (brightness == 4) {
-    currentBackground = chroma("#cbd5e1")
-  } else if (brightness == 3) {
-    currentBackground = chroma("#475569")
-  } else if (brightness == 2) {
-    currentBackground = chroma("#1e293b")
-  } else if (brightness == 1) {
-    currentBackground = chroma("#0f172a")
-  }
-  for (let i = 1; i < rows.length; i++) {
-    if (i % 2 == 0) {
-      rows[i].style.backgroundColor = currentBackground.brighten(0.0)
-    } else {
-      rows[i].style.backgroundColor = currentBackground.brighten(0.2)
+    let currentBackground
+    if (brightness == 5) {
+      currentBackground = chroma("#e2e8f0")
+    } else if (brightness == 4) {
+      currentBackground = chroma("#cbd5e1")
+    } else if (brightness == 3) {
+      currentBackground = chroma("#475569")
+    } else if (brightness == 2) {
+      currentBackground = chroma("#1e293b")
+    } else if (brightness == 1) {
+      currentBackground = chroma("#0f172a")
+    }
+    for (let i = 1; i < rows.length; i++) {
+      if (i % 2 == 0) {
+        rows[i].style.backgroundColor = currentBackground.brighten(0.0)
+      } else {
+        rows[i].style.backgroundColor = currentBackground.brighten(0.2)
+      }
     }
   }
-}
 
-onMounted(() => {
-  alternateTableRowColors(props.brightness)
-})
+  onMounted(() => {
+    alternateTableRowColors(props.brightness)
+  })
 
-watch(
-  () => props.brightness,
-  (newValue, oldValue) => {
-    alternateTableRowColors(newValue)
-  },
-)
+  watch(
+    () => props.brightness,
+    (newValue, oldValue) => {
+      alternateTableRowColors(newValue)
+    },
+  )
 </script>
 
 <template>
   <div class="flex flex-col w-full">
     <div
       class="flex w-full gap-4 p-8 items-center justify-center"
-      id="panelSpeed"
-    >
+      id="panelSpeed">
       <h2 class="text-left text-5xl" :class="pClass(brightness)">
         Looking for a beautiful design?
       </h2>
@@ -86,8 +85,7 @@ watch(
         <img
           :src="bazaarFigma"
           class="rounded"
-          style="height: 500px; width: auto"
-        />
+          style="height: 500px; width: auto" />
       </div>
 
       <div class="w-auto p-3 items-center flex">
@@ -98,8 +96,7 @@ watch(
         <img
           :src="bazaarHero"
           class="rounded"
-          style="height: 500px; width: auto"
-        />
+          style="height: 500px; width: auto" />
       </div>
     </div>
   </div>
diff --git a/src/components/main/blocks/services/PanelDesignOverhaul.vue b/src/components/main/blocks/services/PanelDesignOverhaul.vue
index 876c168..8dbe760 100644
--- a/src/components/main/blocks/services/PanelDesignOverhaul.vue
+++ b/src/components/main/blocks/services/PanelDesignOverhaul.vue
@@ -1,68 +1,68 @@
 <script setup>
-import { ref, computed, onMounted, watch } from "vue"
-import chroma from "chroma-js"
-const props = defineProps({
-  brightness: Number,
-})
+  import { ref, computed, onMounted, watch } from "vue"
+  import chroma from "chroma-js"
+  const props = defineProps({
+    brightness: Number,
+  })
 
-const iconClass = (brightness) => {
-  if (brightness >= 4) {
-    return "text-emerald-500"
-  } else if (brightness == 3) {
-    return "text-orange-200"
-  } else if (brightness == 2) {
-    return "text-orange-500"
-  } else if (brightness == 1) {
-    return "text-orange-400"
+  const iconClass = (brightness) => {
+    if (brightness >= 4) {
+      return "text-emerald-500"
+    } else if (brightness == 3) {
+      return "text-orange-200"
+    } else if (brightness == 2) {
+      return "text-orange-500"
+    } else if (brightness == 1) {
+      return "text-orange-400"
+    }
   }
-}
 
-const pClass = (brightness) => {
-  if (brightness >= 4) {
-    return "text-slate-800"
-  } else if (brightness == 3) {
-    return "text-slate-200"
-  } else if (brightness == 2) {
-    return "text-slate-300"
-  } else if (brightness == 1) {
-    return "text-slate-300"
+  const pClass = (brightness) => {
+    if (brightness >= 4) {
+      return "text-slate-800"
+    } else if (brightness == 3) {
+      return "text-slate-200"
+    } else if (brightness == 2) {
+      return "text-slate-300"
+    } else if (brightness == 1) {
+      return "text-slate-300"
+    }
   }
-}
 
-const alternateTableRowColors = (brightness) => {
-  let rows = document.querySelectorAll("tr")
+  const alternateTableRowColors = (brightness) => {
+    let rows = document.querySelectorAll("tr")
 
-  let currentBackground
-  if (brightness == 5) {
-    currentBackground = chroma("#e2e8f0")
-  } else if (brightness == 4) {
-    currentBackground = chroma("#cbd5e1")
-  } else if (brightness == 3) {
-    currentBackground = chroma("#475569")
-  } else if (brightness == 2) {
-    currentBackground = chroma("#1e293b")
-  } else if (brightness == 1) {
-    currentBackground = chroma("#0f172a")
-  }
-  for (let i = 1; i < rows.length; i++) {
-    if (i % 2 == 0) {
-      rows[i].style.backgroundColor = currentBackground.brighten(0.0)
-    } else {
-      rows[i].style.backgroundColor = currentBackground.brighten(0.2)
+    let currentBackground
+    if (brightness == 5) {
+      currentBackground = chroma("#e2e8f0")
+    } else if (brightness == 4) {
+      currentBackground = chroma("#cbd5e1")
+    } else if (brightness == 3) {
+      currentBackground = chroma("#475569")
+    } else if (brightness == 2) {
+      currentBackground = chroma("#1e293b")
+    } else if (brightness == 1) {
+      currentBackground = chroma("#0f172a")
+    }
+    for (let i = 1; i < rows.length; i++) {
+      if (i % 2 == 0) {
+        rows[i].style.backgroundColor = currentBackground.brighten(0.0)
+      } else {
+        rows[i].style.backgroundColor = currentBackground.brighten(0.2)
+      }
     }
   }
-}
 
-onMounted(() => {
-  alternateTableRowColors(props.brightness)
-})
+  onMounted(() => {
+    alternateTableRowColors(props.brightness)
+  })
 
-watch(
-  () => props.brightness,
-  (newValue, oldValue) => {
-    alternateTableRowColors(newValue)
-  },
-)
+  watch(
+    () => props.brightness,
+    (newValue, oldValue) => {
+      alternateTableRowColors(newValue)
+    },
+  )
 </script>
 
 <template></template>
diff --git a/src/components/main/blocks/services/PanelDevelopment.vue b/src/components/main/blocks/services/PanelDevelopment.vue
index 698e817..30612f6 100644
--- a/src/components/main/blocks/services/PanelDevelopment.vue
+++ b/src/components/main/blocks/services/PanelDevelopment.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { ref, computed, onMounted } from "vue"
-const props = defineProps({
-  brightness: Number,
-})
+  import { ref, computed, onMounted } from "vue"
+  const props = defineProps({
+    brightness: Number,
+  })
 </script>
 
 <template></template>
diff --git a/src/components/main/blocks/services/PanelSecurity.vue b/src/components/main/blocks/services/PanelSecurity.vue
index 00a792a..a7dc2a4 100644
--- a/src/components/main/blocks/services/PanelSecurity.vue
+++ b/src/components/main/blocks/services/PanelSecurity.vue
@@ -1,70 +1,68 @@
 <script setup>
-import { ref, computed, onMounted } from "vue"
-import bazaarLogo from "@/assets/main/bazaar-600px.webp"
-import { ShieldCheck, Send } from "lucide-vue-next"
-import ctaForm from "../ctaForm/ctaForm.vue"
+  import { ref, computed, onMounted } from "vue"
+  import bazaarLogo from "@/assets/main/bazaar-600px.webp"
+  import { ShieldCheck, Send } from "lucide-vue-next"
+  import ctaForm from "../ctaForm/ctaForm.vue"
 
-const props = defineProps({
-  brightness: Number,
-})
-const attacks = ref(9274)
-const AttacksPerMonth = ref(4709)
-const startDate = ref(new Date("2023-10-01"))
-const currentDate = ref(new Date())
+  const props = defineProps({
+    brightness: Number,
+  })
+  const attacks = ref(9274)
+  const AttacksPerMonth = ref(4709)
+  const startDate = ref(new Date("2023-10-01"))
+  const currentDate = ref(new Date())
 
-const attacksTotalSinceStart = computed(() => {
-  let monthsBetweenStartAndCurrent =
-    (currentDate.value.getFullYear() - startDate.value.getFullYear()) * 12 +
-    (currentDate.value.getMonth() - startDate.value.getMonth())
-  return monthsBetweenStartAndCurrent * AttacksPerMonth.value
-})
+  const attacksTotalSinceStart = computed(() => {
+    let monthsBetweenStartAndCurrent =
+      (currentDate.value.getFullYear() - startDate.value.getFullYear()) * 12 +
+      (currentDate.value.getMonth() - startDate.value.getMonth())
+    return monthsBetweenStartAndCurrent * AttacksPerMonth.value
+  })
 
-const roundToMillions = (number) => {
-  if (number > 1000000) {
-    let numberString = Math.round(number / 1000000).toString()
-    return numberString + "m"
-  } else {
-    return number
+  const roundToMillions = (number) => {
+    if (number > 1000000) {
+      let numberString = Math.round(number / 1000000).toString()
+      return numberString + "m"
+    } else {
+      return number
+    }
   }
-}
 
-const iconClass = (brightness) => {
-  if (brightness >= 4) {
-    return "text-emerald-500"
-  } else if (brightness == 3) {
-    return "text-orange-200"
-  } else if (brightness == 2) {
-    return "text-orange-500"
-  } else if (brightness == 1) {
-    return "text-orange-400"
+  const iconClass = (brightness) => {
+    if (brightness >= 4) {
+      return "text-emerald-500"
+    } else if (brightness == 3) {
+      return "text-orange-200"
+    } else if (brightness == 2) {
+      return "text-orange-500"
+    } else if (brightness == 1) {
+      return "text-orange-400"
+    }
   }
-}
 
-const pClass = (brightness) => {
-  if (brightness >= 4) {
-    return "text-slate-800"
-  } else if (brightness == 3) {
-    return "text-slate-200"
-  } else if (brightness == 2) {
-    return "text-slate-300"
-  } else if (brightness == 1) {
-    return "text-slate-300"
+  const pClass = (brightness) => {
+    if (brightness >= 4) {
+      return "text-slate-800"
+    } else if (brightness == 3) {
+      return "text-slate-200"
+    } else if (brightness == 2) {
+      return "text-slate-300"
+    } else if (brightness == 1) {
+      return "text-slate-300"
+    }
   }
-}
 </script>
 
 <template>
   <div
-    class="flex w-full gap-4 md:p-8 sm:p-4 items-center justify-center flex-wrap"
-  >
+    class="flex w-full gap-4 md:p-8 sm:p-4 items-center justify-center flex-wrap">
     <div class="lg:w-6/12 sm:w-12/12">
       <h2 class="text-left text-5xl" :class="pClass(brightness)">
         I can secure your website.
       </h2>
       <p
         class="text-left text-sm italic opacity-50 mt-3"
-        :class="pClass(brightness)"
-      >
+        :class="pClass(brightness)">
         Website already secure?
         <b><a href="" :class="iconClass(brightness)">How sure</a> are you?</b>
       </p>
@@ -87,14 +85,12 @@ const pClass = (brightness) => {
             'bg-slate-500': brightness == 3,
             'bg-slate-700': brightness == 2,
             'bg-slate-800': brightness == 1,
-          }"
-        >
+          }">
           <div class="flex items-center w-full">
             <ShieldCheck
               class="mr-2"
               size="2rem"
-              :class="iconClass(brightness)"
-            />
+              :class="iconClass(brightness)" />
             <h4 class="font-bold m-0" :class="pClass(brightness)">
               WordPress Protection
             </h4>
@@ -118,14 +114,12 @@ const pClass = (brightness) => {
             'bg-slate-500': brightness == 3,
             'bg-slate-700': brightness == 2,
             'bg-slate-800': brightness == 1,
-          }"
-        >
+          }">
           <div class="flex items-center w-full">
             <ShieldCheck
               size="2rem"
               class="mr-2"
-              :class="iconClass(brightness)"
-            />
+              :class="iconClass(brightness)" />
             <h4 class="font-bold m-0" :class="pClass(brightness)">
               DDoS/Malicious Bots Shielding
             </h4>
@@ -149,14 +143,12 @@ const pClass = (brightness) => {
             'bg-slate-500': brightness == 3,
             'bg-slate-700': brightness == 2,
             'bg-slate-800': brightness == 1,
-          }"
-        >
+          }">
           <div class="flex items-center w-full">
             <ShieldCheck
               class="mr-2"
               size="2rem"
-              :class="iconClass(brightness)"
-            />
+              :class="iconClass(brightness)" />
             <h4 class="font-bold m-0" :class="pClass(brightness)">
               JavaScript/PHP Vulnerabilities
             </h4>
@@ -182,13 +174,11 @@ const pClass = (brightness) => {
           'bg-slate-500': brightness == 3,
           'bg-slate-700': brightness == 2,
           'bg-slate-800': brightness == 1,
-        }"
-      >
+        }">
         <div class="prose text-center">
           <h3
             class="text-5xl font-monospace mt-6"
-            :class="iconClass(brightness)"
-          >
+            :class="iconClass(brightness)">
             {{ roundToMillions(attacksTotalSinceStart) }}+
           </h3>
           <h3 class="text-xl" :class="pClass(brightness)">
diff --git a/src/components/main/blocks/services/PanelSpeed.vue b/src/components/main/blocks/services/PanelSpeed.vue
index c81627c..9eaae23 100644
--- a/src/components/main/blocks/services/PanelSpeed.vue
+++ b/src/components/main/blocks/services/PanelSpeed.vue
@@ -1,119 +1,118 @@
 <script setup>
-import { ref, computed, onMounted, watch } from "vue"
-import { Turtle, Rabbit } from "lucide-vue-next"
-import chroma from "chroma-js"
-import ctaForm from "../ctaForm/ctaForm.vue"
+  import { ref, computed, onMounted, watch } from "vue"
+  import { Turtle, Rabbit } from "lucide-vue-next"
+  import chroma from "chroma-js"
+  import ctaForm from "../ctaForm/ctaForm.vue"
 
-const props = defineProps({
-  brightness: Number,
-})
+  const props = defineProps({
+    brightness: Number,
+  })
 
-const iconClass = (brightness) => {
-  if (brightness >= 4) {
-    return "text-emerald-500"
-  } else if (brightness == 3) {
-    return "text-orange-200"
-  } else if (brightness == 2) {
-    return "text-orange-500"
-  } else if (brightness == 1) {
-    return "text-orange-400"
+  const iconClass = (brightness) => {
+    if (brightness >= 4) {
+      return "text-emerald-500"
+    } else if (brightness == 3) {
+      return "text-orange-200"
+    } else if (brightness == 2) {
+      return "text-orange-500"
+    } else if (brightness == 1) {
+      return "text-orange-400"
+    }
   }
-}
 
-const chartClass = (brightness) => {
-  if (brightness >= 4) {
-    return "text-emerald-500 bg-emerald-950"
-  } else if (brightness == 3) {
-    return "text-orange-200 bg-orange-950"
-  } else if (brightness == 2) {
-    return "text-orange-500 bg-orange-950"
-  } else if (brightness == 1) {
-    return "text-orange-400 bg-orange-950"
+  const chartClass = (brightness) => {
+    if (brightness >= 4) {
+      return "text-emerald-500 bg-emerald-950"
+    } else if (brightness == 3) {
+      return "text-orange-200 bg-orange-950"
+    } else if (brightness == 2) {
+      return "text-orange-500 bg-orange-950"
+    } else if (brightness == 1) {
+      return "text-orange-400 bg-orange-950"
+    }
   }
-}
 
-const ringClass = (brightness) => {
-  if (brightness >= 4) {
-    return "border-emerald-500"
-  } else if (brightness == 3) {
-    return "border-orange-200"
-  } else if (brightness == 2) {
-    return "border-orange-500"
-  } else if (brightness == 1) {
-    return "border-orange-400"
+  const ringClass = (brightness) => {
+    if (brightness >= 4) {
+      return "border-emerald-500"
+    } else if (brightness == 3) {
+      return "border-orange-200"
+    } else if (brightness == 2) {
+      return "border-orange-500"
+    } else if (brightness == 1) {
+      return "border-orange-400"
+    }
   }
-}
 
-const pClass = (brightness) => {
-  if (brightness >= 4) {
-    return "text-slate-800"
-  } else if (brightness == 3) {
-    return "text-slate-200"
-  } else if (brightness == 2) {
-    return "text-slate-300"
-  } else if (brightness == 1) {
-    return "text-slate-300"
+  const pClass = (brightness) => {
+    if (brightness >= 4) {
+      return "text-slate-800"
+    } else if (brightness == 3) {
+      return "text-slate-200"
+    } else if (brightness == 2) {
+      return "text-slate-300"
+    } else if (brightness == 1) {
+      return "text-slate-300"
+    }
   }
-}
 
-const strokeColor = computed(() => {
-  switch (props.brightness) {
-    case 5:
-      return "#10B981"
-    case 4:
-      return "#10B981"
-    case 3:
-      return "#F59E0B"
-    case 2:
-      return "#F59E0B"
-    case 1:
-      return "#F59E0B"
-    default:
-      return ""
-  }
-})
+  const strokeColor = computed(() => {
+    switch (props.brightness) {
+      case 5:
+        return "#10B981"
+      case 4:
+        return "#10B981"
+      case 3:
+        return "#F59E0B"
+      case 2:
+        return "#F59E0B"
+      case 1:
+        return "#F59E0B"
+      default:
+        return ""
+    }
+  })
 
-const alternateTableRowColors = (brightness) => {
-  let rows = document.querySelectorAll("tr")
+  const alternateTableRowColors = (brightness) => {
+    let rows = document.querySelectorAll("tr")
 
-  let currentBackground
-  if (brightness == 5) {
-    currentBackground = chroma("#e2e8f0")
-  } else if (brightness == 4) {
-    currentBackground = chroma("#cbd5e1")
-  } else if (brightness == 3) {
-    currentBackground = chroma("#475569")
-  } else if (brightness == 2) {
-    currentBackground = chroma("#1e293b")
-  } else if (brightness == 1) {
-    currentBackground = chroma("#0f172a")
-  }
-  for (let i = 1; i < rows.length; i++) {
-    if (i % 2 == 0) {
-      rows[i].style.backgroundColor = currentBackground.brighten(0.0)
-    } else {
-      rows[i].style.backgroundColor = currentBackground.brighten(0.2)
+    let currentBackground
+    if (brightness == 5) {
+      currentBackground = chroma("#e2e8f0")
+    } else if (brightness == 4) {
+      currentBackground = chroma("#cbd5e1")
+    } else if (brightness == 3) {
+      currentBackground = chroma("#475569")
+    } else if (brightness == 2) {
+      currentBackground = chroma("#1e293b")
+    } else if (brightness == 1) {
+      currentBackground = chroma("#0f172a")
+    }
+    for (let i = 1; i < rows.length; i++) {
+      if (i % 2 == 0) {
+        rows[i].style.backgroundColor = currentBackground.brighten(0.0)
+      } else {
+        rows[i].style.backgroundColor = currentBackground.brighten(0.2)
+      }
     }
   }
-}
 
-onMounted(() => {
-  alternateTableRowColors(props.brightness)
-})
+  onMounted(() => {
+    alternateTableRowColors(props.brightness)
+  })
 
-watch(
-  () => props.brightness,
-  (newValue, oldValue) => {
-    alternateTableRowColors(newValue)
-  },
-)
+  watch(
+    () => props.brightness,
+    (newValue, oldValue) => {
+      alternateTableRowColors(newValue)
+    },
+  )
 </script>
 
 <template>
   <div
     class="flex w-full gap-4 md:p-8 sm:p-4 items-center justify-center"
-    id="panelSpeed"
-  >
+    id="panelSpeed">
     <div class="flex flex-col items-center justify-center w-full">
       <div id="perfChart" :class="chartClass(brightness)">
         <svg viewBox="0 0 36 36" class="chart">
@@ -125,8 +124,7 @@ watch(
             fill="none"
             stroke="none"
             stroke-width="0"
-            stroke-linecap="round"
-          />
+            stroke-linecap="round" />
 
           <path
             class="circle"
@@ -139,14 +137,12 @@ watch(
             stroke-width="2"
             stroke-linecap="round"
             :stroke-dasharray="circumference + ' ' + circumference"
-            :stroke-dashoffset="dashoffset"
-          />
+            :stroke-dashoffset="dashoffset" />
         </svg>
         <div
           id="chartInner"
           class="font-monospace text-6xl"
-          :class="iconClass(brightness)"
-        >
+          :class="iconClass(brightness)">
           98
         </div>
       </div>
@@ -158,8 +154,7 @@ watch(
       <div
         class="prose md:w-10/12 sm:w-12/12 mt-8"
         style="max-width: 84ch !important"
-        :class="pClass(brightness)"
-      >
+        :class="pClass(brightness)">
         <h2 class="text-2xl m-0" :class="pClass(brightness)">
           I can make your website
         </h2>
@@ -193,8 +188,7 @@ watch(
                     <Turtle
                       size="3rem"
                       :class="iconClass(brightness)"
-                      class="inline mb-1"
-                    ></Turtle>
+                      class="inline mb-1"></Turtle>
                   </h4>
                 </div>
               </th>
@@ -205,8 +199,7 @@ watch(
                     <Rabbit
                       size="3rem"
                       :class="iconClass(brightness)"
-                      class="inline mb-1"
-                    ></Rabbit>
+                      class="inline mb-1"></Rabbit>
                   </h4>
                 </div>
               </th>
@@ -258,53 +251,53 @@ watch(
 </template>
 
 <script>
-export default {
-  // Rest of your component
-  data() {
-    return {
-      radius: 16,
-      circumference: 2 * Math.PI * 16,
-      percentage: 97,
-    }
-  },
-  computed: {
-    dashoffset() {
-      let percent = this.percentage / 100
-      return this.circumference * (1 - percent)
+  export default {
+    // Rest of your component
+    data() {
+      return {
+        radius: 16,
+        circumference: 2 * Math.PI * 16,
+        percentage: 97,
+      }
+    },
+    computed: {
+      dashoffset() {
+        let percent = this.percentage / 100
+        return this.circumference * (1 - percent)
+      },
     },
-  },
-}
+  }
 </script>
 
 <style scoped>
-#perfChart {
-  height: 200px;
-  width: 200px;
-  position: relative;
-  border-radius: 100%;
-}
+  #perfChart {
+    height: 200px;
+    width: 200px;
+    position: relative;
+    border-radius: 100%;
+  }
 
-.chart {
-  height: 100%;
-  width: 100%;
-}
+  .chart {
+    height: 100%;
+    width: 100%;
+  }
 
-.circle-bg,
-.circle {
-  stroke-width: 2;
-  stroke-linecap: round;
-}
+  .circle-bg,
+  .circle {
+    stroke-width: 2;
+    stroke-linecap: round;
+  }
 
-#chartInner {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
+  #chartInner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 
-@media screen and (max-width: 1024px) {
-  #speedTable {
-    display: none;
+  @media screen and (max-width: 1024px) {
+    #speedTable {
+      display: none;
+    }
   }
-}
 </style>
diff --git a/src/components/main/blocks/services/Services.vue b/src/components/main/blocks/services/Services.vue
index fb5fb61..67041f4 100644
--- a/src/components/main/blocks/services/Services.vue
+++ b/src/components/main/blocks/services/Services.vue
@@ -1,120 +1,120 @@
 <script setup>
-const props = defineProps({
-  brightness: Number,
-})
-import {
-  ref,
-  computed,
-  onMounted,
-  onBeforeUpdate,
-  watch,
-  onUnmounted,
-} from "vue"
-import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue"
-import {
-  ShieldCheck,
-  GaugeCircle,
-  ShowerHead,
-  PencilRuler,
-  Frame,
-  EyeOff,
-} from "lucide-vue-next"
-import PanelDesign from "./PanelDesign.vue"
-import PanelDevelopment from "./PanelDevelopment.vue"
-import PanelSpeed from "./PanelSpeed.vue"
-import PanelSecurity from "./PanelSecurity.vue"
-import PanelDesignOverhaul from "./PanelDesignOverhaul.vue"
-import PanelAccessibility from "./PanelAccessibility.vue"
+  const props = defineProps({
+    brightness: Number,
+  })
+  import {
+    ref,
+    computed,
+    onMounted,
+    onBeforeUpdate,
+    watch,
+    onUnmounted,
+  } from "vue"
+  import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue"
+  import {
+    ShieldCheck,
+    GaugeCircle,
+    ShowerHead,
+    PencilRuler,
+    Frame,
+    EyeOff,
+  } from "lucide-vue-next"
+  import PanelDesign from "./PanelDesign.vue"
+  import PanelDevelopment from "./PanelDevelopment.vue"
+  import PanelSpeed from "./PanelSpeed.vue"
+  import PanelSecurity from "./PanelSecurity.vue"
+  import PanelDesignOverhaul from "./PanelDesignOverhaul.vue"
+  import PanelAccessibility from "./PanelAccessibility.vue"
 
-const tabs = ref([
-  {
-    id: 1,
-    title: "Speed Optimization",
-    icon: "GaugeCircle",
-  },
-  { id: 0, title: "Security Overhaul", icon: "ShieldCheck" },
+  const tabs = ref([
+    {
+      id: 1,
+      title: "Speed Optimization",
+      icon: "GaugeCircle",
+    },
+    { id: 0, title: "Security Overhaul", icon: "ShieldCheck" },
 
-  {
-    id: 2,
-    title: "Design Overhaul",
-    icon: "ShowerHead",
-  },
-  {
-    id: 3,
-    title: "Web Development",
-    icon: "PencilRuler",
-  },
-  {
-    id: 4,
-    title: "Web Design",
-    icon: "Frame",
-  },
-  {
-    id: 5,
-    title: "Accessibility",
-    icon: "EyeOff",
-  },
-])
+    {
+      id: 2,
+      title: "Design Overhaul",
+      icon: "ShowerHead",
+    },
+    {
+      id: 3,
+      title: "Web Development",
+      icon: "PencilRuler",
+    },
+    {
+      id: 4,
+      title: "Web Design",
+      icon: "Frame",
+    },
+    {
+      id: 5,
+      title: "Accessibility",
+      icon: "EyeOff",
+    },
+  ])
 
-let hoveredTab = ref(0)
+  let hoveredTab = ref(0)
 
-const getTabClass = (brightness, selected, hoveredTab, tabId) => {
-  if (selected) {
-    if (brightness == 5) {
-      return hoveredTab === tabId ? "bg-emerald-600" : "bg-emerald-500"
-    } else if (brightness == 4) {
-      return hoveredTab === tabId ? "bg-emerald-600" : "bg-emerald-500"
-    } else if (brightness == 3 || brightness == 1) {
-      return hoveredTab === tabId ? "bg-orange-500" : "bg-orange-400"
-    } else if (brightness == 2) {
-      return hoveredTab === tabId ? "bg-orange-600" : "bg-orange-600"
-    }
-  } else if (hoveredTab === tabId) {
-    if (brightness == 5) {
-      return "bg-slate-300"
-    } else if (brightness == 4) {
-      return "bg-slate-400"
-    } else if (brightness == 3) {
-      return "bg-slate-700"
-    } else if (brightness == 2) {
-      return "bg-slate-900"
-    } else if (brightness == 1) {
-      return "bg-black"
-    }
-  } else {
-    if (brightness == 5) {
-      return "bg-slate-200"
-    } else if (brightness == 4) {
-      return "bg-slate-300"
-    } else if (brightness == 3) {
-      return "bg-slate-600"
-    } else if (brightness == 2) {
-      return "bg-slate-800"
-    } else if (brightness == 1) {
-      return "bg-slate-900"
+  const getTabClass = (brightness, selected, hoveredTab, tabId) => {
+    if (selected) {
+      if (brightness == 5) {
+        return hoveredTab === tabId ? "bg-emerald-600" : "bg-emerald-500"
+      } else if (brightness == 4) {
+        return hoveredTab === tabId ? "bg-emerald-600" : "bg-emerald-500"
+      } else if (brightness == 3 || brightness == 1) {
+        return hoveredTab === tabId ? "bg-orange-500" : "bg-orange-400"
+      } else if (brightness == 2) {
+        return hoveredTab === tabId ? "bg-orange-600" : "bg-orange-600"
+      }
+    } else if (hoveredTab === tabId) {
+      if (brightness == 5) {
+        return "bg-slate-300"
+      } else if (brightness == 4) {
+        return "bg-slate-400"
+      } else if (brightness == 3) {
+        return "bg-slate-700"
+      } else if (brightness == 2) {
+        return "bg-slate-900"
+      } else if (brightness == 1) {
+        return "bg-black"
+      }
+    } else {
+      if (brightness == 5) {
+        return "bg-slate-200"
+      } else if (brightness == 4) {
+        return "bg-slate-300"
+      } else if (brightness == 3) {
+        return "bg-slate-600"
+      } else if (brightness == 2) {
+        return "bg-slate-800"
+      } else if (brightness == 1) {
+        return "bg-slate-900"
+      }
     }
   }
-}
 
-const iconClass = (brightness, selected) => {
-  if (selected) {
-    if (brightness >= 3) {
-      return "text-slate-200"
+  const iconClass = (brightness, selected) => {
+    if (selected) {
+      if (brightness >= 3) {
+        return "text-slate-200"
+      } else {
+        return "text-slate-800"
+      }
     } else {
-      return "text-slate-800"
-    }
-  } else {
-    if (brightness >= 4) {
-      return "text-emerald-500"
-    } else if (brightness == 3) {
-      return "text-orange-200"
-    } else if (brightness == 2) {
-      return "text-orange-500"
-    } else if (brightness == 1) {
-      return "text-orange-400"
+      if (brightness >= 4) {
+        return "text-emerald-500"
+      } else if (brightness == 3) {
+        return "text-orange-200"
+      } else if (brightness == 2) {
+        return "text-orange-500"
+      } else if (brightness == 1) {
+        return "text-orange-400"
+      }
     }
   }
-}
 </script>
 
 <template>
@@ -125,62 +125,53 @@ const iconClass = (brightness, selected) => {
         v-for="tab in tabs"
         :key="tab.id"
         class="flex gap-2 p-2 rounded focus:outline-none active:outline-none outline-none"
-        style="transition: all 0.2s"
-      >
+        style="transition: all 0.2s">
         <div
           class="flex flex-col justify-center gap-1 align-middle items-center rounded focus:outline-none active:outline-none outline-none p-3"
           style="transition: all 0.2s"
           :class="getTabClass(brightness, selected, hoveredTab, tab.id)"
           @mouseover="hoveredTab = tab.id"
-          @mouseleave="hoveredTab = null"
-        >
+          @mouseleave="hoveredTab = null">
           <ShieldCheck
             size="3rem"
             v-if="tab.id == 0"
             style="transition: all 0.2s"
-            :class="iconClass(brightness, selected)"
-          />
+            :class="iconClass(brightness, selected)" />
 
           <GaugeCircle
             size="3rem"
             v-if="tab.id == 1"
             style="transition: all 0.2s"
-            :class="iconClass(brightness, selected)"
-          />
+            :class="iconClass(brightness, selected)" />
 
           <ShowerHead
             size="3rem"
             v-if="tab.id == 2"
             style="transition: all 0.2s"
-            :class="iconClass(brightness, selected)"
-          />
+            :class="iconClass(brightness, selected)" />
 
           <PencilRuler
             size="3rem"
             v-if="tab.id == 3"
             style="transition: all 0.2s"
-            :class="iconClass(brightness, selected)"
-          />
+            :class="iconClass(brightness, selected)" />
 
           <Frame
             size="3rem"
             v-if="tab.id == 4"
             style="transition: all 0.2s"
-            :class="iconClass(brightness, selected)"
-          />
+            :class="iconClass(brightness, selected)" />
 
           <EyeOff
             size="3rem"
             v-if="tab.id == 5"
             style="transition: all 0.2s"
-            :class="iconClass(brightness, selected)"
-          />
+            :class="iconClass(brightness, selected)" />
 
           <p
             class="font-semibold cursor-pointer"
             style="transition: all 0.2s"
-            :class="iconClass(brightness, selected)"
-          >
+            :class="iconClass(brightness, selected)">
             {{ tab.title }}
           </p>
         </div>
diff --git a/src/components/main/pages/Pricing.vue b/src/components/main/pages/Pricing.vue
index 3e9511a..782714c 100644
--- a/src/components/main/pages/Pricing.vue
+++ b/src/components/main/pages/Pricing.vue
@@ -1,9 +1,9 @@
 <script setup>
-import serviceCalculator from "../blocks/pricing/servicesCalculator/servicesCalculator.vue"
+  import serviceCalculator from "../blocks/pricing/servicesCalculator/servicesCalculator.vue"
 
-const props = defineProps({
-  brightness: Number,
-})
+  const props = defineProps({
+    brightness: Number,
+  })
 </script>
 
 <template>