diff --git a/@types/mjml-template.d.ts b/@types/mjml-template.d.ts
index aa05b0123..50637b84a 100644
--- a/@types/mjml-template.d.ts
+++ b/@types/mjml-template.d.ts
@@ -1,4 +1,4 @@
 declare module '*.mjml?raw' {
   const content: string
   export default content
-}
\ No newline at end of file
+}
diff --git a/@types/pagedjs.d.ts b/@types/pagedjs.d.ts
index 6580d1c86..cd2b27003 100644
--- a/@types/pagedjs.d.ts
+++ b/@types/pagedjs.d.ts
@@ -19,4 +19,4 @@ declare module 'pagedjs' {
   }
 
   export const registeredHandlers: PagedJsHandlerConstructor[]
-}
\ No newline at end of file
+}
diff --git a/_TODO.md b/_TODO.md
index 936b66832..f6c583b20 100644
--- a/_TODO.md
+++ b/_TODO.md
@@ -30,9 +30,9 @@ https://aws.plainenglish.io/how-to-build-a-chatbot-using-aws-lex-and-lambda-in-2
 ## Contact Form
 
 - `0/2000` characters should show number of characters left instead
+- Workflow right now puts the "Success" toast under the submit button when the submit button returns to normal after a submission. It seems like the button should have some time out after a successful submission to make sure it's not hammered, like five seconds. And it just looks visually odd - maybe the button should be part of the layout of the success toast, or moved down under it.
 
 ## Newsletter / MJML Templates
 
-- We need to make sure the images point to the full production URL, not a relative import
 - Need to move the unsubscribe link into an Action and handle it entirely within our website instead of on Hubspot
 - Need to add a newsletter publishing workflow as an action, using the newsletter static segment imported from Hubspot
diff --git a/cover.jpg b/cover.jpg
deleted file mode 100644
index cc0c5c7db..000000000
Binary files a/cover.jpg and /dev/null differ
diff --git a/public/pdf/resume.pdf b/public/pdf/resume.pdf
new file mode 100644
index 000000000..46b827efa
Binary files /dev/null and b/public/pdf/resume.pdf differ
diff --git a/src/actions/contact/__tests__/action.spec.ts b/src/actions/contact/__tests__/action.spec.ts
index 08d356a70..74562f3b1 100644
--- a/src/actions/contact/__tests__/action.spec.ts
+++ b/src/actions/contact/__tests__/action.spec.ts
@@ -12,7 +12,9 @@ type ContactSubmitOutput = {
   message: string
 }
 
-const getMockedHandler = <Input, Output>(action: unknown): ActionConfig<Input, Output>['handler'] => {
+const getMockedHandler = <Input, Output>(
+  action: unknown
+): ActionConfig<Input, Output>['handler'] => {
   return (action as ActionConfig<Input, Output>).handler
 }
 
@@ -106,7 +108,7 @@ vi.mock('@actions/utils/errors', async () => {
           ? messageOrError
           : messageOrError instanceof Error
             ? messageOrError.message
-            : options?.message ?? 'Internal server error'
+            : (options?.message ?? 'Internal server error')
       super(message)
       this.name = 'ActionsFunctionError'
       this.status = options?.status ?? 500
@@ -239,4 +241,4 @@ describe('contact.submit.handler', () => {
       })
     )
   })
-})
\ No newline at end of file
+})
diff --git a/src/actions/contact/__tests__/domain.spec.ts b/src/actions/contact/__tests__/domain.spec.ts
index beddab16c..f43f3d766 100644
--- a/src/actions/contact/__tests__/domain.spec.ts
+++ b/src/actions/contact/__tests__/domain.spec.ts
@@ -49,7 +49,9 @@ describe('contact domain validation', () => {
     if (result.success) {
       throw new Error('Expected schema validation to fail')
     }
-    expect(z.flattenError(result.error).fieldErrors['timeline']).toContain('Invalid project timeline')
+    expect(z.flattenError(result.error).fieldErrors['timeline']).toContain(
+      'Invalid project timeline'
+    )
   })
 
   it('rejects messages that appear to contain spam', () => {
@@ -65,6 +67,8 @@ describe('contact domain validation', () => {
     if (result.success) {
       throw new Error('Expected schema validation to fail')
     }
-    expect(z.flattenError(result.error).fieldErrors['message']).toContain('Message appears to contain spam')
+    expect(z.flattenError(result.error).fieldErrors['message']).toContain(
+      'Message appears to contain spam'
+    )
   })
 })
diff --git a/src/actions/contact/__tests__/responder.spec.ts b/src/actions/contact/__tests__/responder.spec.ts
index 4fed07feb..4a2ef11fc 100644
--- a/src/actions/contact/__tests__/responder.spec.ts
+++ b/src/actions/contact/__tests__/responder.spec.ts
@@ -107,9 +107,7 @@ describe('contact responder', () => {
         { label: 'Budget', value: '$5k-$10k' },
         { label: 'Timeline', value: '2-3-months' },
       ])
-      expect(templateData.attachments).toEqual([
-        { filename: 'brief.pdf', sizeLabel: '1.21 KB' },
-      ])
+      expect(templateData.attachments).toEqual([{ filename: 'brief.pdf', sizeLabel: '1.21 KB' }])
       expect(templateData.consentGiven).toBe('Yes')
       expect(templateData.messageHtml).toContain('&lt;ASAP&gt;')
       expect(templateData.messageHtml).toContain('&amp;')
diff --git a/src/actions/contact/action.ts b/src/actions/contact/action.ts
index 68e9e54dd..5b48232d9 100644
--- a/src/actions/contact/action.ts
+++ b/src/actions/contact/action.ts
@@ -8,7 +8,11 @@ import {
   getResendApiKey,
   isProd,
 } from '@actions/utils/environment/environmentActions'
-import { ActionsFunctionError, handleActionsFunctionError, throwActionError } from '@actions/utils/errors'
+import {
+  ActionsFunctionError,
+  handleActionsFunctionError,
+  throwActionError,
+} from '@actions/utils/errors'
 import { contactFormSender, contactInbox, contactReplyTo } from '@actions/utils/email/resendSenders'
 import { createConsentRecord } from '@actions/gdpr/entities/consent'
 import { createOrUpdateContact, setMarketingOptIn } from '@actions/utils/hubspot'
@@ -121,7 +125,8 @@ export const contact = {
             userAgent,
             ipAddress: ip !== 'unknown' ? ip : null,
             privacyPolicyVersion: getPrivacyPolicyVersion(),
-            consentText: null,
+            consentText:
+              'I consent to Webstack Builders processing my personal data for responding to your inquiry. See our Privacy Policy and Cookie Policy.',
             verified: true,
           })
         }
@@ -189,9 +194,13 @@ export const contact = {
           throw error
         }
 
-        throwActionError(error, { route, operation: 'submit' }, {
-          fallbackMessage: 'Failed to send email. Please try again later.',
-        })
+        throwActionError(
+          error,
+          { route, operation: 'submit' },
+          {
+            fallbackMessage: 'Failed to send email. Please try again later.',
+          }
+        )
       }
     },
   }),
diff --git a/src/actions/contact/utils.ts b/src/actions/contact/utils.ts
index 8f33a3e3f..4508c74be 100644
--- a/src/actions/contact/utils.ts
+++ b/src/actions/contact/utils.ts
@@ -1,15 +1,11 @@
 import { z } from 'astro/zod'
-import type {
-  ContactTimeline,
-  RequiredStringOptions,
- } from '@actions/contact/@types'
+import type { ContactTimeline, RequiredStringOptions } from '@actions/contact/@types'
 import { isAllowedTimeline } from './responder'
 
-const requiredStringError = (
-  requiredMessage: string,
-  invalidTypeMessage: string
-) => (issue: { input?: unknown }): string =>
-  issue.input === undefined ? requiredMessage : invalidTypeMessage
+const requiredStringError =
+  (requiredMessage: string, invalidTypeMessage: string) =>
+  (issue: { input?: unknown }): string =>
+    issue.input === undefined ? requiredMessage : invalidTypeMessage
 
 export function escapeHtml(text: string): string {
   const map: Record<string, string> = {
@@ -39,7 +35,8 @@ export function readString(form: FormData, key: string): string {
   return typeof value === 'string' ? value : ''
 }
 
-export const trimString = (value: unknown): unknown => (typeof value === 'string' ? value.trim() : value)
+export const trimString = (value: unknown): unknown =>
+  typeof value === 'string' ? value.trim() : value
 
 export const emptyStringToUndefined = (value: unknown): unknown => {
   if (value === null) return undefined
@@ -66,8 +63,8 @@ export const requiredString = (options: RequiredStringOptions) => {
   )
 }
 
-export const isFile = (value: unknown): value is File => typeof File !== 'undefined' && value instanceof File
-
+export const isFile = (value: unknown): value is File =>
+  typeof File !== 'undefined' && value instanceof File
 
 export const optionalFile = () => z.custom<File>(isFile).optional()
 
diff --git a/src/actions/downloads/__tests__/action.spec.ts b/src/actions/downloads/__tests__/action.spec.ts
index 8d0b1902f..939747094 100644
--- a/src/actions/downloads/__tests__/action.spec.ts
+++ b/src/actions/downloads/__tests__/action.spec.ts
@@ -4,7 +4,9 @@ type ActionConfig<Input, Output> = {
   handler: (_input: Input, _context: unknown) => Promise<Output>
 }
 
-const getMockedHandler = <Input, Output>(action: unknown): ActionConfig<Input, Output>['handler'] => {
+const getMockedHandler = <Input, Output>(
+  action: unknown
+): ActionConfig<Input, Output>['handler'] => {
   return (action as ActionConfig<Input, Output>).handler
 }
 
@@ -95,11 +97,14 @@ describe('downloads.submit.handler', () => {
       clientAddress: '203.0.113.10',
     }
 
-    const response = await getMockedHandler(downloads.submit)({
-      firstName: 'Jane',
-      lastName: 'Doe',
-      workEmail: 'jane@example.com',
-    }, context)
+    const response = await getMockedHandler(downloads.submit)(
+      {
+        firstName: 'Jane',
+        lastName: 'Doe',
+        workEmail: 'jane@example.com',
+      },
+      context
+    )
 
     expect(response).toEqual({
       success: true,
@@ -112,4 +117,4 @@ describe('downloads.submit.handler', () => {
     })
     expect(createConsentRecord).not.toHaveBeenCalled()
   })
-})
\ No newline at end of file
+})
diff --git a/src/actions/downloads/action.ts b/src/actions/downloads/action.ts
index 4ff475c1c..9ecac4cd7 100644
--- a/src/actions/downloads/action.ts
+++ b/src/actions/downloads/action.ts
@@ -60,7 +60,8 @@ export const downloads = {
           userAgent,
           ipAddress: ip !== 'unknown' ? ip : null,
           privacyPolicyVersion: getPrivacyPolicyVersion(),
-          consentText: null,
+          consentText:
+            'I consent to Webstack Builders processing my personal data for providing your requested download. See our Privacy Policy and Cookie Policy.',
           verified: true,
         })
       }
diff --git a/src/actions/gdpr/__tests__/responder.spec.ts b/src/actions/gdpr/__tests__/responder.spec.ts
index de5de1820..507f33891 100644
--- a/src/actions/gdpr/__tests__/responder.spec.ts
+++ b/src/actions/gdpr/__tests__/responder.spec.ts
@@ -1,7 +1,8 @@
 import { describe, expect, it, vi } from 'vitest'
 
-vi.mock('@actions/utils/environment/environmentActions', async (importOriginal) => {
-  const actual = (await importOriginal()) as typeof import('@actions/utils/environment/environmentActions')
+vi.mock('@actions/utils/environment/environmentActions', async importOriginal => {
+  const actual =
+    (await importOriginal()) as typeof import('@actions/utils/environment/environmentActions')
   return {
     ...actual,
     getPrivacyPolicyVersion: () => 'test-privacy-policy-version',
diff --git a/src/actions/gdpr/action.ts b/src/actions/gdpr/action.ts
index 56de7038f..12dc9b133 100644
--- a/src/actions/gdpr/action.ts
+++ b/src/actions/gdpr/action.ts
@@ -2,18 +2,9 @@ import emailValidator from 'email-validator'
 import { validate as uuidValidate } from 'uuid'
 import { defineAction } from 'astro:actions'
 import { z } from 'astro/zod'
-import {
-  checkRateLimit,
-  rateLimiters
-} from '@actions/utils/rateLimit'
-import {
-  buildRequestFingerprint,
-  createRateLimitIdentifier
-} from '@actions/utils/requestContext'
-import {
-  ActionsFunctionError,
-  handleActionsFunctionError
-} from '@actions/utils/errors'
+import { checkRateLimit, rateLimiters } from '@actions/utils/rateLimit'
+import { buildRequestFingerprint, createRateLimitIdentifier } from '@actions/utils/requestContext'
+import { ActionsFunctionError, handleActionsFunctionError } from '@actions/utils/errors'
 import type {
   ConsentResponse,
   DSARRequestInput,
@@ -26,10 +17,7 @@ import {
   consentDeleteSchema,
   dsarRequestSchema,
 } from '@actions/gdpr/domain'
-import {
-  buildRateLimitError,
-  mapConsentRecord,
-} from '@actions/gdpr/responder'
+import { buildRateLimitError, mapConsentRecord } from '@actions/gdpr/responder'
 import {
   createConsentRecord,
   createConsentRecordInput,
diff --git a/src/actions/gdpr/constants.ts b/src/actions/gdpr/constants.ts
index 0f4aef3f4..c51b7aaa6 100644
--- a/src/actions/gdpr/constants.ts
+++ b/src/actions/gdpr/constants.ts
@@ -1,4 +1,10 @@
-export const CONSENT_PURPOSES = ['contact', 'marketing', 'analytics', 'functional', 'downloads'] as const
+export const CONSENT_PURPOSES = [
+  'contact',
+  'marketing',
+  'analytics',
+  'functional',
+  'downloads',
+] as const
 
 export type ConsentPurpose = (typeof CONSENT_PURPOSES)[number]
 
diff --git a/src/actions/gdpr/email/dsarText.ts b/src/actions/gdpr/email/dsarText.ts
index 2e84109b2..c1e7975ef 100644
--- a/src/actions/gdpr/email/dsarText.ts
+++ b/src/actions/gdpr/email/dsarText.ts
@@ -34,4 +34,4 @@ Questions? Contact us at ${company.dataProtectionOfficer.email}
 
 © ${new Date().getFullYear()} ${company.name}. All rights reserved.
   `.trim()
-}
\ No newline at end of file
+}
diff --git a/src/actions/gdpr/entities/consent.ts b/src/actions/gdpr/entities/consent.ts
index 5669646db..1ed54d3b3 100644
--- a/src/actions/gdpr/entities/consent.ts
+++ b/src/actions/gdpr/entities/consent.ts
@@ -5,7 +5,7 @@ import type {
   ConsentEventRecord,
   ConsentRequest,
   CreateConsentRecordInput,
-  DbConsentRecord
+  DbConsentRecord,
 } from '@actions/gdpr/@types'
 import {
   normalizeNullableString,
diff --git a/src/actions/gdpr/entities/dsar.ts b/src/actions/gdpr/entities/dsar.ts
index 7d9a7a1c6..717543be1 100644
--- a/src/actions/gdpr/entities/dsar.ts
+++ b/src/actions/gdpr/entities/dsar.ts
@@ -5,10 +5,13 @@ import type {
   DsarRequestRecord,
   DSARRequest,
   DsarVerifyResult,
-  RequestType
+  RequestType,
 } from '@actions/gdpr/@types'
 import { deleteNewsletterConfirmationsByEmail } from '@actions/newsletter/domain'
-import { deleteConsentRecordsByEmail, findConsentRecordsByEmail } from '@actions/gdpr/entities/consent'
+import {
+  deleteConsentRecordsByEmail,
+  findConsentRecordsByEmail,
+} from '@actions/gdpr/entities/consent'
 import { handleActionsFunctionError } from '@actions/utils/errors'
 import { purgeContact } from '@actions/utils/hubspot'
 
@@ -110,6 +113,103 @@ export async function verifyDsarToken(token: string): Promise<DsarVerifyResult>
         createdAt:
           record.createdAt instanceof Date ? record.createdAt.toISOString() : record.createdAt,
       })),
+      legalDisclosures: {
+        retentionPeriods: {
+          consentRecords:
+            'Retained for 7 years from the date of consent to meet legal compliance and audit requirements.',
+          contactFormSubmissions:
+            'Retained for 3 years from the date of submission for legitimate business correspondence purposes.',
+          newsletterSubscriptions:
+            'Retained until you unsubscribe, plus 12 months thereafter for audit purposes.',
+          downloadRecords:
+            'Retained for 2 years from the date of download for business records purposes.',
+        },
+        thirdPartyRecipients: [
+          {
+            name: 'Resend',
+            category: 'Email delivery service',
+            purpose:
+              'Delivers transactional and marketing emails on our behalf. Receives your email address and name.',
+            privacyPolicy: 'https://resend.com/privacy',
+          },
+          {
+            name: 'HubSpot',
+            category: 'Customer relationship management (CRM) and marketing platform',
+            purpose:
+              'Stores contact details and newsletter subscription status for marketing communications. Receives your email address and name when you subscribe to the newsletter or submit the contact form with marketing consent.',
+            privacyPolicy: 'https://legal.hubspot.com/privacy-policy',
+          },
+          {
+            name: 'Upstash',
+            category: 'Rate-limiting and caching service',
+            purpose:
+              'Stores anonymised request fingerprints to enforce rate limits. Does not receive personally identifiable information.',
+            privacyPolicy: 'https://upstash.com/privacy',
+          },
+          {
+            name: 'Sentry',
+            category: 'Error monitoring service',
+            purpose:
+              'Captures application error reports which may include request metadata. Configured to scrub personally identifiable information from error payloads.',
+            privacyPolicy: 'https://sentry.io/privacy/',
+          },
+          {
+            name: 'Vercel',
+            category: 'Hosting and infrastructure provider',
+            purpose:
+              'Hosts and serves this website. All web requests are processed through Vercel infrastructure.',
+            privacyPolicy: 'https://vercel.com/legal/privacy-policy',
+          },
+        ],
+        yourRights: {
+          summary:
+            'Under the UK GDPR and EU GDPR you have the following rights regarding your personal data.',
+          rights: [
+            {
+              article: 'Article 15',
+              right: 'Right of access',
+              description:
+                'You have the right to obtain a copy of the personal data we hold about you and supplementary information about how it is processed.',
+            },
+            {
+              article: 'Article 16',
+              right: 'Right to rectification',
+              description:
+                'You have the right to request correction of inaccurate personal data we hold about you.',
+            },
+            {
+              article: 'Article 17',
+              right: 'Right to erasure',
+              description:
+                "You have the right to request deletion of your personal data ('right to be forgotten'). Use the Delete My Data form at https://www.webstackbuilders.com/privacy/my-data to submit a deletion request.",
+            },
+            {
+              article: 'Article 18',
+              right: 'Right to restriction of processing',
+              description:
+                'You have the right to request that we restrict the processing of your personal data in certain circumstances.',
+            },
+            {
+              article: 'Article 20',
+              right: 'Right to data portability',
+              description:
+                'You have the right to receive your personal data in a structured, commonly used, machine-readable format (such as this JSON file) and to transmit it to another controller.',
+            },
+            {
+              article: 'Article 21',
+              right: 'Right to object',
+              description:
+                'You have the right to object to the processing of your personal data for direct marketing purposes at any time.',
+            },
+          ],
+          howToExercise:
+            'To exercise any of these rights, contact us at privacy@webstackbuilders.com. We will respond within 30 days.',
+          supervisoryAuthority:
+            'You have the right to lodge a complaint with a supervisory authority. In the UK this is the Information Commissioner\'s Office (ICO): https://ico.org.uk. In the EU, contact the supervisory authority in your country of residence.',
+        },
+        dataSource:
+          'All personal data in this export was collected directly from you through first-party form submissions on webstackbuilders.com. No data has been obtained from third-party sources.',
+      },
     }
 
     return {
diff --git a/src/actions/newsletter/@types/index.d.ts b/src/actions/newsletter/@types/index.d.ts
index 97a8b8cfe..369408bb0 100644
--- a/src/actions/newsletter/@types/index.d.ts
+++ b/src/actions/newsletter/@types/index.d.ts
@@ -26,7 +26,11 @@ export type NewsletterSubscribeInput = {
   DataSubjectId?: string
 }
 
-export type NewsletterSubscribeOutput = { success: true; message: string; requiresConfirmation: true }
+export type NewsletterSubscribeOutput = {
+  success: true
+  message: string
+  requiresConfirmation: true
+}
 
 export type NewsletterConfirmInput = { token: string }
 
diff --git a/src/actions/newsletter/__tests__/action.spec.ts b/src/actions/newsletter/__tests__/action.spec.ts
index 5a783e8d3..bf57f7cae 100644
--- a/src/actions/newsletter/__tests__/action.spec.ts
+++ b/src/actions/newsletter/__tests__/action.spec.ts
@@ -7,7 +7,9 @@ import {
   ActionConfig,
 } from '@actions/newsletter/@types'
 
-const getMockedHandler = <Input, Output>(action: unknown): ActionConfig<Input, Output>['handler'] => {
+const getMockedHandler = <Input, Output>(
+  action: unknown
+): ActionConfig<Input, Output>['handler'] => {
   return (action as ActionConfig<Input, Output>).handler
 }
 
@@ -98,14 +100,13 @@ vi.mock('@actions/utils/errors', async () => {
           },
       options?: { status?: number }
     ) {
-      const message = typeof messageOrOptions === 'string' ? messageOrOptions : messageOrOptions.message
+      const message =
+        typeof messageOrOptions === 'string' ? messageOrOptions : messageOrOptions.message
       super(message)
       this.name = 'ActionsFunctionError'
 
       const status =
-        typeof messageOrOptions === 'string'
-          ? options?.status
-          : messageOrOptions.status
+        typeof messageOrOptions === 'string' ? options?.status : messageOrOptions.status
 
       this.status = typeof status === 'number' ? status : 500
     }
@@ -206,10 +207,7 @@ describe('newsletter.subscribe.handler', () => {
 
     const response = await getMockedHandler<NewsletterSubscribeInput, NewsletterSubscribeOutput>(
       newsletter.subscribe
-    )(
-      { email: ' TEST@Example.com ', consentGiven: true },
-      context
-    )
+    )({ email: ' TEST@Example.com ', consentGiven: true }, context)
 
     expect(response).toEqual({
       success: true,
@@ -422,7 +420,8 @@ describe('newsletter.confirm.handler', () => {
     const { newsletter } = await import('../action')
     const { markConsentRecordsVerified } = await import('@actions/gdpr/entities/consent')
     const { sendWelcomeEmail } = await import('@actions/newsletter/entities/email')
-    const { createOrUpdateContact, setMarketingOptIn, addContactToNewsletterList } = await import('@actions/utils/hubspot')
+    const { createOrUpdateContact, setMarketingOptIn, addContactToNewsletterList } =
+      await import('@actions/utils/hubspot')
 
     const context = {
       request: new Request('https://example.com/_actions/newsletter/confirm', { method: 'POST' }),
@@ -439,7 +438,10 @@ describe('newsletter.confirm.handler', () => {
       '3f2d0e5a-7e8d-4b3c-9a6a-2b5d84c6f3a2'
     )
     expect(sendWelcomeEmail).toHaveBeenCalledWith('test@example.com', 'Test')
-    expect(createOrUpdateContact).toHaveBeenCalledWith({ email: 'test@example.com', firstname: 'Test' })
+    expect(createOrUpdateContact).toHaveBeenCalledWith({
+      email: 'test@example.com',
+      firstname: 'Test',
+    })
     expect(setMarketingOptIn).toHaveBeenCalledWith('42', true)
     expect(addContactToNewsletterList).toHaveBeenCalledWith('42')
 
diff --git a/src/actions/newsletter/action.ts b/src/actions/newsletter/action.ts
index a85abb2be..7d674c341 100644
--- a/src/actions/newsletter/action.ts
+++ b/src/actions/newsletter/action.ts
@@ -13,7 +13,11 @@ import { createConsentRecord, markConsentRecordsVerified } from '@actions/gdpr/e
 import { createPendingSubscription, confirmSubscription } from '@actions/newsletter/domain'
 import { validateEmail } from '@actions/newsletter/utils'
 import { sendConfirmationEmail, sendWelcomeEmail } from '@actions/newsletter/entities/email'
-import { createOrUpdateContact, addContactToNewsletterList, setMarketingOptIn } from '@actions/utils/hubspot'
+import {
+  createOrUpdateContact,
+  addContactToNewsletterList,
+  setMarketingOptIn,
+} from '@actions/utils/hubspot'
 
 const subscribeSchema = z.object({
   email: z.string(),
@@ -152,7 +156,8 @@ export const newsletter = {
               ? context.clientAddress
               : null,
           privacyPolicyVersion: getPrivacyPolicyVersion(),
-          consentText: null,
+          consentText:
+            'I consent to Webstack Builders processing my personal data for marketing communications (unsubscribe anytime). See our Privacy Policy and Cookie Policy.',
           verified: false,
         })
 
diff --git a/src/actions/newsletter/email/confirmationHtml.ts b/src/actions/newsletter/email/confirmationHtml.ts
index e7130f762..47cdba1c6 100644
--- a/src/actions/newsletter/email/confirmationHtml.ts
+++ b/src/actions/newsletter/email/confirmationHtml.ts
@@ -1,5 +1,8 @@
 import confirmationTemplateContent from './confirmation.mjml?raw'
-import { compileEmailTemplate, createImportedEmailTemplate } from '@actions/utils/email/templateCompiler'
+import {
+  compileEmailTemplate,
+  createImportedEmailTemplate,
+} from '@actions/utils/email/templateCompiler'
 
 const confirmationTemplate = createImportedEmailTemplate(
   'src/actions/newsletter/email/confirmation.mjml',
@@ -50,4 +53,4 @@ export async function generateConfirmationEmailText(
   )
 
   return text
-}
\ No newline at end of file
+}
diff --git a/src/actions/newsletter/email/index.ts b/src/actions/newsletter/email/index.ts
index e1080b58c..c35b3f799 100644
--- a/src/actions/newsletter/email/index.ts
+++ b/src/actions/newsletter/email/index.ts
@@ -1,4 +1,4 @@
 export { generateConfirmationEmailHtml } from './confirmationHtml'
 export { generateConfirmationEmailText } from './confirmationHtml'
 export { generateWelcomeEmailHtml } from './welcomeHtml'
-export { generateWelcomeEmailText } from './welcomeHtml'
\ No newline at end of file
+export { generateWelcomeEmailText } from './welcomeHtml'
diff --git a/src/actions/newsletter/email/welcomeHtml.ts b/src/actions/newsletter/email/welcomeHtml.ts
index 17715b130..46657dea7 100644
--- a/src/actions/newsletter/email/welcomeHtml.ts
+++ b/src/actions/newsletter/email/welcomeHtml.ts
@@ -1,5 +1,8 @@
 import welcomeTemplateContent from './welcome.mjml?raw'
-import { compileEmailTemplate, createImportedEmailTemplate } from '@actions/utils/email/templateCompiler'
+import {
+  compileEmailTemplate,
+  createImportedEmailTemplate,
+} from '@actions/utils/email/templateCompiler'
 
 const welcomeTemplate = createImportedEmailTemplate(
   'src/actions/newsletter/email/welcome.mjml',
@@ -19,19 +22,13 @@ const createWelcomeTemplateData = (firstName?: string): WelcomeTemplateData => (
 })
 
 export async function generateWelcomeEmailHtml(firstName?: string): Promise<string> {
-  const { html } = await compileEmailTemplate(
-    welcomeTemplate,
-    createWelcomeTemplateData(firstName)
-  )
+  const { html } = await compileEmailTemplate(welcomeTemplate, createWelcomeTemplateData(firstName))
 
   return html
 }
 
 export async function generateWelcomeEmailText(firstName?: string): Promise<string> {
-  const { text } = await compileEmailTemplate(
-    welcomeTemplate,
-    createWelcomeTemplateData(firstName)
-  )
+  const { text } = await compileEmailTemplate(welcomeTemplate, createWelcomeTemplateData(firstName))
 
   return text
-}
\ No newline at end of file
+}
diff --git a/src/actions/newsletter/entities/__tests__/email.spec.ts b/src/actions/newsletter/entities/__tests__/email.spec.ts
index 57b5ff789..3d07e9f3b 100644
--- a/src/actions/newsletter/entities/__tests__/email.spec.ts
+++ b/src/actions/newsletter/entities/__tests__/email.spec.ts
@@ -1,7 +1,8 @@
 import { describe, expect, it, vi, beforeEach } from 'vitest'
 
-vi.mock('@actions/utils/environment/environmentActions', async (importOriginal) => {
-  const actual = (await importOriginal()) as typeof import('@actions/utils/environment/environmentActions')
+vi.mock('@actions/utils/environment/environmentActions', async importOriginal => {
+  const actual =
+    (await importOriginal()) as typeof import('@actions/utils/environment/environmentActions')
   return {
     ...actual,
     getResendApiKey: () => 'resend-test-key',
@@ -43,8 +44,9 @@ describe('newsletter email entity', () => {
   })
 
   it('throws ActionsFunctionError when Resend returns an error in prod', async () => {
-    vi.doMock('@actions/utils/environment/environmentActions', async (importOriginal) => {
-      const actual = (await importOriginal()) as typeof import('@actions/utils/environment/environmentActions')
+    vi.doMock('@actions/utils/environment/environmentActions', async importOriginal => {
+      const actual =
+        (await importOriginal()) as typeof import('@actions/utils/environment/environmentActions')
       return {
         ...actual,
         getResendApiKey: () => 'resend-test-key',
@@ -67,7 +69,9 @@ describe('newsletter email entity', () => {
     vi.resetModules()
     const { sendConfirmationEmail: prodSendConfirmationEmail } = await import('../email')
 
-    await expect(prodSendConfirmationEmail('test@example.com', 'token-1', 'Jane')).rejects.toMatchObject({
+    await expect(
+      prodSendConfirmationEmail('test@example.com', 'token-1', 'Jane')
+    ).rejects.toMatchObject({
       name: 'ActionsFunctionError',
       status: 502,
     })
diff --git a/src/actions/utils/email/__tests__/templateCompiler.spec.ts b/src/actions/utils/email/__tests__/templateCompiler.spec.ts
index 0f2c85247..b4b04a726 100644
--- a/src/actions/utils/email/__tests__/templateCompiler.spec.ts
+++ b/src/actions/utils/email/__tests__/templateCompiler.spec.ts
@@ -100,7 +100,9 @@ describe('compileEmailTemplate', () => {
     expect(result.html).toContain('support@webstackbuilders.com')
 
     expect(result.text).toContain('Hello, Alex!')
-    expect(result.text).toContain('Visit www.webstackbuilders.com [https://www.webstackbuilders.com].')
+    expect(result.text).toContain(
+      'Visit www.webstackbuilders.com [https://www.webstackbuilders.com].'
+    )
     expect(result.text).toContain('Contact Webstack Builders at support@webstackbuilders.com.')
   })
 
@@ -167,4 +169,4 @@ describe('compileEmailTemplate', () => {
       status: 500,
     })
   })
-})
\ No newline at end of file
+})
diff --git a/src/actions/utils/email/resendSenders.ts b/src/actions/utils/email/resendSenders.ts
index 9ddd1b7ce..5a3a3eb3c 100644
--- a/src/actions/utils/email/resendSenders.ts
+++ b/src/actions/utils/email/resendSenders.ts
@@ -6,4 +6,4 @@ export const contactFormSender = `contact@${resendSendingDomain}`
 export const newsletterSender = `Webstack Builders <newsletter@${resendSendingDomain}>`
 export const newsletterReplyTo = 'hello@webstackbuilders.com'
 export const gdprSender = `Webstack Builders <privacy@${resendSendingDomain}>`
-export const gdprReplyTo = 'privacy@webstackbuilders.com'
\ No newline at end of file
+export const gdprReplyTo = 'privacy@webstackbuilders.com'
diff --git a/src/actions/utils/email/templateCompiler.ts b/src/actions/utils/email/templateCompiler.ts
index b3f4c1f56..d6ad60f5f 100644
--- a/src/actions/utils/email/templateCompiler.ts
+++ b/src/actions/utils/email/templateCompiler.ts
@@ -181,11 +181,11 @@ const renderTemplateString = (template: EmailTemplateSource, data: EmailTemplate
   return nunjucksTemplate.render(mergeCommonEmailTemplateData(data))
 }
 
-const normalizeTemplatePath = (templatePath: string | URL): { absolutePath: string; relativePath: string } => {
+const normalizeTemplatePath = (
+  templatePath: string | URL
+): { absolutePath: string; relativePath: string } => {
   const rawPath = templatePath instanceof URL ? fileURLToPath(templatePath) : templatePath
-  const absolutePath = isAbsolute(rawPath)
-    ? rawPath
-    : resolve(projectRoot, rawPath)
+  const absolutePath = isAbsolute(rawPath) ? rawPath : resolve(projectRoot, rawPath)
   const relativePath = relative(projectRoot, absolutePath).replace(/\\/g, '/')
 
   if (!relativePath || relativePath.startsWith('..')) {
@@ -219,7 +219,9 @@ export const createEmailTemplate = (
   }
 }
 
-const createMjmlRenderOptions = (absolutePath: string): {
+const createMjmlRenderOptions = (
+  absolutePath: string
+): {
   filePath?: string
   keepComments: boolean
 } => {
@@ -263,13 +265,8 @@ export async function compileEmailTemplate(
     const { absolutePath, relativePath } = normalizeTemplatePath(template.filePath)
     const mjmlWithData = renderTemplateString(template, data)
     const mjmlModule = await import('mjml')
-    const mjml2html = (
-      'default' in mjmlModule ? mjmlModule.default : mjmlModule
-    ) as MjmlRenderer
-    const { html, errors } = await mjml2html(
-      mjmlWithData,
-      createMjmlRenderOptions(absolutePath)
-    )
+    const mjml2html = ('default' in mjmlModule ? mjmlModule.default : mjmlModule) as MjmlRenderer
+    const { html, errors } = await mjml2html(mjmlWithData, createMjmlRenderOptions(absolutePath))
 
     if (errors.length > 0) {
       throw new ActionsFunctionError({
@@ -309,4 +306,4 @@ export async function compileEmailTemplate(
       },
     })
   }
-}
\ No newline at end of file
+}
diff --git a/src/actions/utils/environment/environmentActions.ts b/src/actions/utils/environment/environmentActions.ts
index be27e887b..d34a16972 100644
--- a/src/actions/utils/environment/environmentActions.ts
+++ b/src/actions/utils/environment/environmentActions.ts
@@ -6,11 +6,7 @@ import {
   PUBLIC_UPSTASH_SEARCH_READONLY_TOKEN,
   PUBLIC_UPSTASH_SEARCH_REST_URL,
 } from 'astro:env/client'
-import {
-  HUBSPOT_ACCESS_TOKEN,
-  HUBSPOT_NEWSLETTER_LIST_ID,
-  RESEND_API_KEY,
-} from 'astro:env/server'
+import { HUBSPOT_ACCESS_TOKEN, HUBSPOT_NEWSLETTER_LIST_ID, RESEND_API_KEY } from 'astro:env/server'
 
 export {
   isCI,
diff --git a/src/actions/utils/hubspot/__tests__/hubspot.spec.ts b/src/actions/utils/hubspot/__tests__/hubspot.spec.ts
index 59fad935f..72f0174e0 100644
--- a/src/actions/utils/hubspot/__tests__/hubspot.spec.ts
+++ b/src/actions/utils/hubspot/__tests__/hubspot.spec.ts
@@ -1,7 +1,8 @@
 import { describe, expect, it, vi, beforeEach } from 'vitest'
 
-vi.mock('@actions/utils/environment/environmentActions', async (importOriginal) => {
-  const actual = (await importOriginal()) as typeof import('@actions/utils/environment/environmentActions')
+vi.mock('@actions/utils/environment/environmentActions', async importOriginal => {
+  const actual =
+    (await importOriginal()) as typeof import('@actions/utils/environment/environmentActions')
   return {
     ...actual,
     getHubspotAccessToken: () => 'hs-test-token',
@@ -56,15 +57,16 @@ describe('hubspot contacts', () => {
 
     await setMarketingOptIn('0', true)
 
-    expect(logSpy).toHaveBeenCalledWith(
-      '[DEV/TEST MODE] HubSpot setMarketingOptIn:',
-      { contactId: '0', optIn: true }
-    )
+    expect(logSpy).toHaveBeenCalledWith('[DEV/TEST MODE] HubSpot setMarketingOptIn:', {
+      contactId: '0',
+      optIn: true,
+    })
   })
 
   it('creates a new contact when search returns no results in prod', async () => {
-    vi.doMock('@actions/utils/environment/environmentActions', async (importOriginal) => {
-      const actual = (await importOriginal()) as typeof import('@actions/utils/environment/environmentActions')
+    vi.doMock('@actions/utils/environment/environmentActions', async importOriginal => {
+      const actual =
+        (await importOriginal()) as typeof import('@actions/utils/environment/environmentActions')
       return {
         ...actual,
         getHubspotAccessToken: () => 'hs-test-token',
@@ -97,8 +99,9 @@ describe('hubspot contacts', () => {
   })
 
   it('updates an existing contact when search returns a result in prod', async () => {
-    vi.doMock('@actions/utils/environment/environmentActions', async (importOriginal) => {
-      const actual = (await importOriginal()) as typeof import('@actions/utils/environment/environmentActions')
+    vi.doMock('@actions/utils/environment/environmentActions', async importOriginal => {
+      const actual =
+        (await importOriginal()) as typeof import('@actions/utils/environment/environmentActions')
       return {
         ...actual,
         getHubspotAccessToken: () => 'hs-test-token',
@@ -142,15 +145,15 @@ describe('hubspot newsletter', () => {
 
     await addContactToNewsletterList('42')
 
-    expect(logSpy).toHaveBeenCalledWith(
-      '[DEV/TEST MODE] HubSpot addContactToNewsletterList:',
-      { contactId: '42' }
-    )
+    expect(logSpy).toHaveBeenCalledWith('[DEV/TEST MODE] HubSpot addContactToNewsletterList:', {
+      contactId: '42',
+    })
   })
 
   it('calls membershipsApi.add in prod', async () => {
-    vi.doMock('@actions/utils/environment/environmentActions', async (importOriginal) => {
-      const actual = (await importOriginal()) as typeof import('@actions/utils/environment/environmentActions')
+    vi.doMock('@actions/utils/environment/environmentActions', async importOriginal => {
+      const actual =
+        (await importOriginal()) as typeof import('@actions/utils/environment/environmentActions')
       return {
         ...actual,
         getHubspotAccessToken: () => 'hs-test-token',
@@ -178,15 +181,15 @@ describe('hubspot gdpr', () => {
 
     await purgeContact('test@example.com')
 
-    expect(logSpy).toHaveBeenCalledWith(
-      '[DEV/TEST MODE] HubSpot purgeContact:',
-      { email: 'test@example.com' }
-    )
+    expect(logSpy).toHaveBeenCalledWith('[DEV/TEST MODE] HubSpot purgeContact:', {
+      email: 'test@example.com',
+    })
   })
 
   it('calls basicApi.purge in prod', async () => {
-    vi.doMock('@actions/utils/environment/environmentActions', async (importOriginal) => {
-      const actual = (await importOriginal()) as typeof import('@actions/utils/environment/environmentActions')
+    vi.doMock('@actions/utils/environment/environmentActions', async importOriginal => {
+      const actual =
+        (await importOriginal()) as typeof import('@actions/utils/environment/environmentActions')
       return {
         ...actual,
         getHubspotAccessToken: () => 'hs-test-token',
diff --git a/src/actions/utils/hubspot/contacts.ts b/src/actions/utils/hubspot/contacts.ts
index 01a1d6c0c..6128390a9 100644
--- a/src/actions/utils/hubspot/contacts.ts
+++ b/src/actions/utils/hubspot/contacts.ts
@@ -34,7 +34,9 @@ export async function createOrUpdateContact(
   const searchResponse = await client.crm.contacts.searchApi.doSearch({
     filterGroups: [
       {
-        filters: [{ propertyName: 'email', operator: FilterOperatorEnum.Eq, value: properties.email }],
+        filters: [
+          { propertyName: 'email', operator: FilterOperatorEnum.Eq, value: properties.email },
+        ],
       },
     ],
     properties: ['email', 'firstname', 'lastname'],
@@ -82,10 +84,7 @@ export async function createOrUpdateContact(
  * Sets the hs_marketable_status property on a contact.
  * Pass `true` to opt the contact in to marketing emails.
  */
-export async function setMarketingOptIn(
-  contactId: string,
-  optIn: boolean
-): Promise<void> {
+export async function setMarketingOptIn(contactId: string, optIn: boolean): Promise<void> {
   if (!isProd()) {
     console.log('[DEV/TEST MODE] HubSpot setMarketingOptIn:', { contactId, optIn })
     return
diff --git a/src/actions/webmentions/@types/index.ts b/src/actions/webmentions/@types/index.ts
index 814d13aa2..3413ff8e2 100644
--- a/src/actions/webmentions/@types/index.ts
+++ b/src/actions/webmentions/@types/index.ts
@@ -12,4 +12,4 @@ export interface WebmentionsListResult {
   likesCount: number
   mentions: WebmentionDisplayItem[]
   repostsCount: number
-}
\ No newline at end of file
+}
diff --git a/src/actions/webmentions/__tests__/action.spec.ts b/src/actions/webmentions/__tests__/action.spec.ts
index 352f30290..5638645c2 100644
--- a/src/actions/webmentions/__tests__/action.spec.ts
+++ b/src/actions/webmentions/__tests__/action.spec.ts
@@ -120,4 +120,4 @@ describe('webmentions actions', () => {
       { fallbackMessage: 'Webmentions could not be loaded.' }
     )
   })
-})
\ No newline at end of file
+})
diff --git a/src/actions/webmentions/action.ts b/src/actions/webmentions/action.ts
index 37515ff30..0a295a5b8 100644
--- a/src/actions/webmentions/action.ts
+++ b/src/actions/webmentions/action.ts
@@ -29,9 +29,13 @@ export const webmentions = {
     handler: async (input): Promise<WebmentionsListResult> => {
       try {
         const mentions = await fetchWebmentions(input.url)
-        const displayMentions = mentions.filter(mention => displayProperties.has(mention['wm-property']))
+        const displayMentions = mentions.filter(mention =>
+          displayProperties.has(mention['wm-property'])
+        )
         const likesCount = mentions.filter(mention => mention['wm-property'] === 'like-of').length
-        const repostsCount = mentions.filter(mention => mention['wm-property'] === 'repost-of').length
+        const repostsCount = mentions.filter(
+          mention => mention['wm-property'] === 'repost-of'
+        ).length
 
         return {
           likesCount,
@@ -47,4 +51,4 @@ export const webmentions = {
       }
     },
   }),
-}
\ No newline at end of file
+}
diff --git a/src/components/Analytics/client/selectors.ts b/src/components/Analytics/client/selectors.ts
index 20801168f..a508e0821 100644
--- a/src/components/Analytics/client/selectors.ts
+++ b/src/components/Analytics/client/selectors.ts
@@ -7,4 +7,4 @@ export const SELECTORS = {
 export const queryAnalyticsStateElement = (root: ParentNode = document): HTMLElement | null => {
   const element = root.querySelector(SELECTORS.analyticsState)
   return isType1Element(element) && element instanceof HTMLElement ? element : null
-}
\ No newline at end of file
+}
diff --git a/src/components/Analytics/index.astro b/src/components/Analytics/index.astro
index 5e89f5242..b2410f87d 100644
--- a/src/components/Analytics/index.astro
+++ b/src/components/Analytics/index.astro
@@ -6,10 +6,7 @@ const paramsStr = JSON.stringify(Astro.params)
 const pathname = Astro.url.pathname
 ---
 
-<vercel-analytics-state
-  data-mode={mode}
-  data-params={paramsStr}
-  data-pathname={pathname}
+<vercel-analytics-state data-mode={mode} data-params={paramsStr} data-pathname={pathname}
 ></vercel-analytics-state>
 
 <script>
diff --git a/src/components/Animations/Confetti/index.astro b/src/components/Animations/Confetti/index.astro
index 1a7955d4d..b27076b7a 100644
--- a/src/components/Animations/Confetti/index.astro
+++ b/src/components/Animations/Confetti/index.astro
@@ -15,16 +15,13 @@ const { classes = '', canvasClasses = '' } = Astro.props
 ---
 
 <confetti-animation
-  class:list={["confetti-animation block", classes]}
+  class:list={['confetti-animation block', classes]}
   data-testid="confetti-animation"
 >
   <canvas
     data-confetti-canvas
     aria-hidden="true"
-    class:list={[
-      'fixed inset-0 h-dvh w-screen pointer-events-none z-(--z-modal)',
-      canvasClasses,
-    ]}
+    class:list={['fixed inset-0 h-dvh w-screen pointer-events-none z-(--z-modal)', canvasClasses]}
   ></canvas>
   <slot />
 </confetti-animation>
diff --git a/src/components/Animations/Terraform/client/index.ts b/src/components/Animations/Terraform/client/index.ts
index 60c9576ec..867b9b098 100644
--- a/src/components/Animations/Terraform/client/index.ts
+++ b/src/components/Animations/Terraform/client/index.ts
@@ -387,7 +387,8 @@ export class TerraformAnimationElement extends LitElement {
       // --- Selector groups ---
       const primaryArrows = '#tf-arrow-vpc, #tf-arrow-iam, #tf-arrow-s3'
       const crossEdges = '#tf-edge-vpc-eks, #tf-edge-iam-eks, #tf-edge-vpc-rds, #tf-edge-iam-rds'
-      const crossArrows = '#tf-arrow-vpc-eks, #tf-arrow-iam-eks, #tf-arrow-vpc-rds, #tf-arrow-iam-rds'
+      const crossArrows =
+        '#tf-arrow-vpc-eks, #tf-arrow-iam-eks, #tf-arrow-vpc-rds, #tf-arrow-iam-rds'
       const allChecks =
         '#tf-check-root, #tf-check-vpc, #tf-check-iam, #tf-check-s3, #tf-check-eks, #tf-check-rds'
       const termLines =
@@ -397,8 +398,12 @@ export class TerraformAnimationElement extends LitElement {
       // --- Initial states ---
       gsap.set(
         [
-          '#tf-node-root', '#tf-node-vpc', '#tf-node-iam', '#tf-node-s3',
-          '#tf-node-eks', '#tf-node-rds',
+          '#tf-node-root',
+          '#tf-node-vpc',
+          '#tf-node-iam',
+          '#tf-node-s3',
+          '#tf-node-eks',
+          '#tf-node-rds',
         ],
         { transformOrigin: '50% 50%' }
       )
@@ -440,15 +445,36 @@ export class TerraformAnimationElement extends LitElement {
         .to(primaryArrows, { opacity: 1, duration: 0.15 }, '-=0.1')
 
         // ===== Phase 3: Row 1 nodes pop in =====
-        .from('#tf-node-vpc', {
-          scale: 0, opacity: 0, duration: 0.5, ease: 'back(2)',
-        }, '-=0.05')
-        .from('#tf-node-iam', {
-          scale: 0, opacity: 0, duration: 0.5, ease: 'back(2)',
-        }, '-=0.3')
-        .from('#tf-node-s3', {
-          scale: 0, opacity: 0, duration: 0.5, ease: 'back(2)',
-        }, '-=0.3')
+        .from(
+          '#tf-node-vpc',
+          {
+            scale: 0,
+            opacity: 0,
+            duration: 0.5,
+            ease: 'back(2)',
+          },
+          '-=0.05'
+        )
+        .from(
+          '#tf-node-iam',
+          {
+            scale: 0,
+            opacity: 0,
+            duration: 0.5,
+            ease: 'back(2)',
+          },
+          '-=0.3'
+        )
+        .from(
+          '#tf-node-s3',
+          {
+            scale: 0,
+            opacity: 0,
+            duration: 0.5,
+            ease: 'back(2)',
+          },
+          '-=0.3'
+        )
 
         // ===== Phase 4: Cross-dependency edges fade in =====
         .to('#tf-edge-vpc-eks', { opacity: 1, duration: 0.35 }, '+=0.15')
@@ -458,12 +484,26 @@ export class TerraformAnimationElement extends LitElement {
         .to(crossArrows, { opacity: 1, duration: 0.15 }, '-=0.1')
 
         // ===== Phase 5: Row 2 nodes pop in =====
-        .from('#tf-node-eks', {
-          scale: 0, opacity: 0, duration: 0.5, ease: 'back(2)',
-        }, '-=0.05')
-        .from('#tf-node-rds', {
-          scale: 0, opacity: 0, duration: 0.5, ease: 'back(2)',
-        }, '-=0.25')
+        .from(
+          '#tf-node-eks',
+          {
+            scale: 0,
+            opacity: 0,
+            duration: 0.5,
+            ease: 'back(2)',
+          },
+          '-=0.05'
+        )
+        .from(
+          '#tf-node-rds',
+          {
+            scale: 0,
+            opacity: 0,
+            duration: 0.5,
+            ease: 'back(2)',
+          },
+          '-=0.25'
+        )
 
         // ===== Phase 6: Checkmarks cascade with green flash borders =====
         .to('#tf-check-root', { opacity: 1, duration: 0.25 }, '+=0.3')
@@ -516,9 +556,15 @@ export class TerraformAnimationElement extends LitElement {
         .to(allChecks, { opacity: 0, duration: 0.3 }, '-=0.3')
         .to('#tf-node-eks, #tf-node-rds', { opacity: 0, scale: 0.8, duration: 0.4 }, '-=0.2')
         .to('#tf-edges-cross', { opacity: 0, duration: 0.3 }, '-=0.3')
-        .to('#tf-node-vpc, #tf-node-iam, #tf-node-s3', {
-          opacity: 0, scale: 0.8, duration: 0.4,
-        }, '-=0.2')
+        .to(
+          '#tf-node-vpc, #tf-node-iam, #tf-node-s3',
+          {
+            opacity: 0,
+            scale: 0.8,
+            duration: 0.4,
+          },
+          '-=0.2'
+        )
         .to('#tf-edges-primary', { opacity: 0, duration: 0.3 }, '-=0.3')
         .to('#tf-node-root', { opacity: 0, scale: 0.8, duration: 0.3 }, '-=0.2')
     } catch (error) {
diff --git a/src/components/Animations/Terraform/index.astro b/src/components/Animations/Terraform/index.astro
index 6eda75613..bd41cda60 100644
--- a/src/components/Animations/Terraform/index.astro
+++ b/src/components/Animations/Terraform/index.astro
@@ -22,172 +22,557 @@ import Icon from '@components/Icon/index.astro'
       >
         <defs>
           <filter id="tf-check-glow" x="-50%" y="-50%" width="200%" height="200%">
-            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
+            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"></feGaussianBlur>
             <feMerge>
-              <feMergeNode in="blur" />
-              <feMergeNode in="SourceGraphic" />
+              <feMergeNode in="blur"></feMergeNode>
+              <feMergeNode in="SourceGraphic"></feMergeNode>
             </feMerge>
           </filter>
         </defs>
 
         <!-- ===== TERMINAL FRAME ===== -->
         <g id="tf-frame">
-          <rect id="tf-frame-rect" x="40" y="40" width="520" height="520" rx="10" fill="var(--color-primary)" stroke="var(--color-primary-offset)" stroke-width="2" />
-          <rect x="40" y="40" width="520" height="32" rx="10" fill="var(--color-primary-offset)" />
-          <rect x="40" y="60" width="520" height="12" fill="var(--color-primary-offset)" />
-          <circle cx="62" cy="56" r="5" fill="#dc2626" opacity="0.7" />
-          <circle cx="78" cy="56" r="5" fill="var(--color-spotlight)" opacity="0.7" />
-          <circle cx="94" cy="56" r="5" fill="var(--color-success)" opacity="0.7" />
-          <text x="300" y="61" fill="var(--color-page-base)" font-family="monospace" font-size="12" text-anchor="middle">terraform — plan &amp; apply</text>
+          <rect
+            id="tf-frame-rect"
+            x="40"
+            y="40"
+            width="520"
+            height="520"
+            rx="10"
+            fill="var(--color-primary)"
+            stroke="var(--color-primary-offset)"
+            stroke-width="2"></rect>
+          <rect x="40" y="40" width="520" height="32" rx="10" fill="var(--color-primary-offset)"
+          ></rect>
+          <rect x="40" y="60" width="520" height="12" fill="var(--color-primary-offset)"></rect>
+          <circle cx="62" cy="56" r="5" fill="#dc2626" opacity="0.7"></circle>
+          <circle cx="78" cy="56" r="5" fill="var(--color-spotlight)" opacity="0.7"></circle>
+          <circle cx="94" cy="56" r="5" fill="var(--color-success)" opacity="0.7"></circle>
+          <text
+            x="300"
+            y="61"
+            fill="var(--color-page-base)"
+            font-family="monospace"
+            font-size="12"
+            text-anchor="middle">terraform — plan &amp; apply</text
+          >
         </g>
 
         <!-- ===== ROOT NODE: main.tf ===== -->
         <g id="tf-node-root" transform="translate(300,120)">
-          <rect x="-52" y="-18" width="104" height="36" rx="6" fill="var(--color-primary-offset)" stroke="var(--color-content-offset)" stroke-width="1.5" />
-          <rect x="-40" y="-10" width="14" height="16" rx="1" fill="none" stroke="var(--color-page-base)" stroke-width="1.2" />
-          <polyline points="-32,-10 -32,-6 -26,-6" fill="none" stroke="var(--color-page-base)" stroke-width="1.2" />
-          <text id="tf-root-text" x="-18" y="5" fill="var(--color-page-base)" font-family="monospace" font-size="13" font-weight="bold">main.tf</text>
+          <rect
+            x="-52"
+            y="-18"
+            width="104"
+            height="36"
+            rx="6"
+            fill="var(--color-primary-offset)"
+            stroke="var(--color-content-offset)"
+            stroke-width="1.5"></rect>
+          <rect
+            x="-40"
+            y="-10"
+            width="14"
+            height="16"
+            rx="1"
+            fill="none"
+            stroke="var(--color-page-base)"
+            stroke-width="1.2"></rect>
+          <polyline
+            points="-32,-10 -32,-6 -26,-6"
+            fill="none"
+            stroke="var(--color-page-base)"
+            stroke-width="1.2"></polyline>
+          <text
+            id="tf-root-text"
+            x="-18"
+            y="5"
+            fill="var(--color-page-base)"
+            font-family="monospace"
+            font-size="13"
+            font-weight="bold">main.tf</text
+          >
           <g id="tf-check-root" opacity="0" filter="url(#tf-check-glow)">
-            <circle cx="60" cy="0" r="8" fill="var(--color-success)" />
-            <polyline points="55,0 58,4 65,-4" fill="none" stroke="var(--color-page-base)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            <circle cx="60" cy="0" r="8" fill="var(--color-success)"></circle>
+            <polyline
+              points="55,0 58,4 65,-4"
+              fill="none"
+              stroke="var(--color-page-base)"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"></polyline>
           </g>
         </g>
 
         <!-- ===== PRIMARY EDGES (root → row 1) ===== -->
         <g id="tf-edges-primary" fill="none" stroke="var(--color-page-base)" stroke-width="1.5">
-          <path id="tf-edge-vpc" d="M270,138 C270,162 150,162 150,186" />
-          <polygon id="tf-arrow-vpc" points="150,186 146,178 154,178" fill="var(--color-page-base)" />
-          <path id="tf-edge-iam" d="M300,138 C300,158 300,166 300,186" />
-          <polygon id="tf-arrow-iam" points="300,186 296,178 304,178" fill="var(--color-page-base)" />
-          <path id="tf-edge-s3" d="M330,138 C330,162 450,162 450,186" />
-          <polygon id="tf-arrow-s3" points="450,186 446,178 454,178" fill="var(--color-page-base)" />
+          <path id="tf-edge-vpc" d="M270,138 C270,162 150,162 150,186"></path>
+          <polygon id="tf-arrow-vpc" points="150,186 146,178 154,178" fill="var(--color-page-base)"
+          ></polygon>
+          <path id="tf-edge-iam" d="M300,138 C300,158 300,166 300,186"></path>
+          <polygon id="tf-arrow-iam" points="300,186 296,178 304,178" fill="var(--color-page-base)"
+          ></polygon>
+          <path id="tf-edge-s3" d="M330,138 C330,162 450,162 450,186"></path>
+          <polygon id="tf-arrow-s3" points="450,186 446,178 454,178" fill="var(--color-page-base)"
+          ></polygon>
         </g>
 
         <!-- ===== CROSS-DEPENDENCY EDGES (row 1 → row 2) ===== -->
-        <g id="tf-edges-cross" fill="none" stroke="var(--color-page-base)" stroke-width="1" stroke-dasharray="6 3">
-          <path id="tf-edge-vpc-eks" d="M150,234 C150,260 210,260 210,286" />
-          <polygon id="tf-arrow-vpc-eks" points="210,286 207,279 213,279" fill="var(--color-page-base)" />
-          <path id="tf-edge-iam-eks" d="M300,234 C300,260 210,264 210,286" />
-          <polygon id="tf-arrow-iam-eks" points="210,286 207,279 213,279" fill="var(--color-page-base)" />
-          <path id="tf-edge-vpc-rds" d="M175,234 C175,268 370,260 390,286" />
-          <polygon id="tf-arrow-vpc-rds" points="390,286 387,279 393,279" fill="var(--color-page-base)" />
-          <path id="tf-edge-iam-rds" d="M320,234 C320,260 390,264 390,286" />
-          <polygon id="tf-arrow-iam-rds" points="390,286 387,279 393,279" fill="var(--color-page-base)" />
+        <g
+          id="tf-edges-cross"
+          fill="none"
+          stroke="var(--color-page-base)"
+          stroke-width="1"
+          stroke-dasharray="6 3"
+        >
+          <path id="tf-edge-vpc-eks" d="M150,234 C150,260 210,260 210,286"></path>
+          <polygon
+            id="tf-arrow-vpc-eks"
+            points="210,286 207,279 213,279"
+            fill="var(--color-page-base)"></polygon>
+          <path id="tf-edge-iam-eks" d="M300,234 C300,260 210,264 210,286"></path>
+          <polygon
+            id="tf-arrow-iam-eks"
+            points="210,286 207,279 213,279"
+            fill="var(--color-page-base)"></polygon>
+          <path id="tf-edge-vpc-rds" d="M175,234 C175,268 370,260 390,286"></path>
+          <polygon
+            id="tf-arrow-vpc-rds"
+            points="390,286 387,279 393,279"
+            fill="var(--color-page-base)"></polygon>
+          <path id="tf-edge-iam-rds" d="M320,234 C320,260 390,264 390,286"></path>
+          <polygon
+            id="tf-arrow-iam-rds"
+            points="390,286 387,279 393,279"
+            fill="var(--color-page-base)"></polygon>
         </g>
 
         <!-- ===== ROW 1: VPC ===== -->
         <g id="tf-node-vpc" transform="translate(150,210)">
-          <rect x="-48" y="-24" width="96" height="48" rx="6" fill="var(--color-primary-offset)" stroke="var(--color-page-base)" stroke-width="1.5" />
-          <line x1="-28" y1="-8" x2="-6" y2="-8" stroke="var(--color-page-base)" stroke-width="1" opacity="0.5" />
-          <line x1="-28" y1="0" x2="-6" y2="0" stroke="var(--color-page-base)" stroke-width="1" opacity="0.5" />
-          <line x1="-28" y1="8" x2="-6" y2="8" stroke="var(--color-page-base)" stroke-width="1" opacity="0.5" />
-          <line x1="-22" y1="-14" x2="-22" y2="14" stroke="var(--color-page-base)" stroke-width="1" opacity="0.5" />
-          <line x1="-16" y1="-14" x2="-16" y2="14" stroke="var(--color-page-base)" stroke-width="1" opacity="0.5" />
-          <line x1="-10" y1="-14" x2="-10" y2="14" stroke="var(--color-page-base)" stroke-width="1" opacity="0.5" />
-          <text x="16" y="4" fill="var(--color-page-base)" font-family="monospace" font-size="11">VPC</text>
+          <rect
+            x="-48"
+            y="-24"
+            width="96"
+            height="48"
+            rx="6"
+            fill="var(--color-primary-offset)"
+            stroke="var(--color-page-base)"
+            stroke-width="1.5"></rect>
+          <line
+            x1="-28"
+            y1="-8"
+            x2="-6"
+            y2="-8"
+            stroke="var(--color-page-base)"
+            stroke-width="1"
+            opacity="0.5"></line>
+          <line
+            x1="-28"
+            y1="0"
+            x2="-6"
+            y2="0"
+            stroke="var(--color-page-base)"
+            stroke-width="1"
+            opacity="0.5"></line>
+          <line
+            x1="-28"
+            y1="8"
+            x2="-6"
+            y2="8"
+            stroke="var(--color-page-base)"
+            stroke-width="1"
+            opacity="0.5"></line>
+          <line
+            x1="-22"
+            y1="-14"
+            x2="-22"
+            y2="14"
+            stroke="var(--color-page-base)"
+            stroke-width="1"
+            opacity="0.5"></line>
+          <line
+            x1="-16"
+            y1="-14"
+            x2="-16"
+            y2="14"
+            stroke="var(--color-page-base)"
+            stroke-width="1"
+            opacity="0.5"></line>
+          <line
+            x1="-10"
+            y1="-14"
+            x2="-10"
+            y2="14"
+            stroke="var(--color-page-base)"
+            stroke-width="1"
+            opacity="0.5"></line>
+          <text x="16" y="4" fill="var(--color-page-base)" font-family="monospace" font-size="11"
+            >VPC</text
+          >
           <g id="tf-check-vpc" opacity="0" filter="url(#tf-check-glow)">
-            <circle cx="54" cy="-14" r="8" fill="var(--color-success)" />
-            <polyline points="49,-14 52,-10 59,-18" fill="none" stroke="var(--color-page-base)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            <circle cx="54" cy="-14" r="8" fill="var(--color-success)"></circle>
+            <polyline
+              points="49,-14 52,-10 59,-18"
+              fill="none"
+              stroke="var(--color-page-base)"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"></polyline>
           </g>
-          <rect id="tf-flash-vpc" x="-48" y="-24" width="96" height="48" rx="6" fill="none" stroke="var(--color-success)" stroke-width="2.5" opacity="0" />
+          <rect
+            id="tf-flash-vpc"
+            x="-48"
+            y="-24"
+            width="96"
+            height="48"
+            rx="6"
+            fill="none"
+            stroke="var(--color-success)"
+            stroke-width="2.5"
+            opacity="0"></rect>
         </g>
 
         <!-- ===== ROW 1: IAM ===== -->
         <g id="tf-node-iam" transform="translate(300,210)">
-          <rect x="-48" y="-24" width="96" height="48" rx="6" fill="var(--color-primary-offset)" stroke="var(--color-page-base)" stroke-width="1.5" />
-          <path d="M-18,-14 L-28,-7 L-28,2 C-28,10 -18,16 -18,16 C-18,16 -8,10 -8,2 L-8,-7z" fill="none" stroke="var(--color-page-base)" stroke-width="1.3" stroke-linejoin="round" />
-          <polyline points="-22,0 -18,4 -12,-4" fill="none" stroke="var(--color-page-base)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
-          <text x="12" y="4" fill="var(--color-page-base)" font-family="monospace" font-size="11">IAM</text>
+          <rect
+            x="-48"
+            y="-24"
+            width="96"
+            height="48"
+            rx="6"
+            fill="var(--color-primary-offset)"
+            stroke="var(--color-page-base)"
+            stroke-width="1.5"></rect>
+          <path
+            d="M-18,-14 L-28,-7 L-28,2 C-28,10 -18,16 -18,16 C-18,16 -8,10 -8,2 L-8,-7z"
+            fill="none"
+            stroke="var(--color-page-base)"
+            stroke-width="1.3"
+            stroke-linejoin="round"></path>
+          <polyline
+            points="-22,0 -18,4 -12,-4"
+            fill="none"
+            stroke="var(--color-page-base)"
+            stroke-width="1.2"
+            stroke-linecap="round"
+            stroke-linejoin="round"></polyline>
+          <text x="12" y="4" fill="var(--color-page-base)" font-family="monospace" font-size="11"
+            >IAM</text
+          >
           <g id="tf-check-iam" opacity="0" filter="url(#tf-check-glow)">
-            <circle cx="54" cy="-14" r="8" fill="var(--color-success)" />
-            <polyline points="49,-14 52,-10 59,-18" fill="none" stroke="var(--color-page-base)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            <circle cx="54" cy="-14" r="8" fill="var(--color-success)"></circle>
+            <polyline
+              points="49,-14 52,-10 59,-18"
+              fill="none"
+              stroke="var(--color-page-base)"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"></polyline>
           </g>
-          <rect id="tf-flash-iam" x="-48" y="-24" width="96" height="48" rx="6" fill="none" stroke="var(--color-success)" stroke-width="2.5" opacity="0" />
+          <rect
+            id="tf-flash-iam"
+            x="-48"
+            y="-24"
+            width="96"
+            height="48"
+            rx="6"
+            fill="none"
+            stroke="var(--color-success)"
+            stroke-width="2.5"
+            opacity="0"></rect>
         </g>
 
         <!-- ===== ROW 1: S3 ===== -->
         <g id="tf-node-s3" transform="translate(450,210)">
-          <rect x="-48" y="-24" width="96" height="48" rx="6" fill="var(--color-primary-offset)" stroke="var(--color-page-base)" stroke-width="1.5" />
-          <path d="M-28,-10 L-24,10 L-8,10 L-4,-10z" fill="none" stroke="var(--color-page-base)" stroke-width="1.3" stroke-linejoin="round" />
-          <ellipse cx="-16" cy="-10" rx="12" ry="4" fill="none" stroke="var(--color-page-base)" stroke-width="1.2" />
-          <path d="M-27,0 Q-16,4 -5,0" fill="none" stroke="var(--color-page-base)" stroke-width="0.8" opacity="0.5" />
-          <text x="16" y="4" fill="var(--color-page-base)" font-family="monospace" font-size="11">S3</text>
+          <rect
+            x="-48"
+            y="-24"
+            width="96"
+            height="48"
+            rx="6"
+            fill="var(--color-primary-offset)"
+            stroke="var(--color-page-base)"
+            stroke-width="1.5"></rect>
+          <path
+            d="M-28,-10 L-24,10 L-8,10 L-4,-10z"
+            fill="none"
+            stroke="var(--color-page-base)"
+            stroke-width="1.3"
+            stroke-linejoin="round"></path>
+          <ellipse
+            cx="-16"
+            cy="-10"
+            rx="12"
+            ry="4"
+            fill="none"
+            stroke="var(--color-page-base)"
+            stroke-width="1.2"></ellipse>
+          <path
+            d="M-27,0 Q-16,4 -5,0"
+            fill="none"
+            stroke="var(--color-page-base)"
+            stroke-width="0.8"
+            opacity="0.5"></path>
+          <text x="16" y="4" fill="var(--color-page-base)" font-family="monospace" font-size="11"
+            >S3</text
+          >
           <g id="tf-check-s3" opacity="0" filter="url(#tf-check-glow)">
-            <circle cx="54" cy="-14" r="8" fill="var(--color-success)" />
-            <polyline points="49,-14 52,-10 59,-18" fill="none" stroke="var(--color-page-base)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            <circle cx="54" cy="-14" r="8" fill="var(--color-success)"></circle>
+            <polyline
+              points="49,-14 52,-10 59,-18"
+              fill="none"
+              stroke="var(--color-page-base)"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"></polyline>
           </g>
-          <rect id="tf-flash-s3" x="-48" y="-24" width="96" height="48" rx="6" fill="none" stroke="var(--color-success)" stroke-width="2.5" opacity="0" />
+          <rect
+            id="tf-flash-s3"
+            x="-48"
+            y="-24"
+            width="96"
+            height="48"
+            rx="6"
+            fill="none"
+            stroke="var(--color-success)"
+            stroke-width="2.5"
+            opacity="0"></rect>
         </g>
 
         <!-- ===== ROW 2: EKS ===== -->
         <g id="tf-node-eks" transform="translate(210,310)">
-          <rect x="-48" y="-24" width="96" height="48" rx="6" fill="var(--color-primary-offset)" stroke="var(--color-page-base)" stroke-width="1.5" />
-          <circle cx="-18" cy="0" r="6" fill="none" stroke="var(--color-page-base)" stroke-width="1.2" />
-          <circle cx="-18" cy="0" r="2.5" fill="var(--color-page-base)" opacity="0.5" />
-          <line x1="-18" y1="-6" x2="-18" y2="-12" stroke="var(--color-page-base)" stroke-width="1.2" stroke-linecap="round" />
-          <line x1="-12.8" y1="-3" x2="-9" y2="-5.2" stroke="var(--color-page-base)" stroke-width="1.2" stroke-linecap="round" />
-          <line x1="-12.8" y1="3" x2="-9" y2="5.2" stroke="var(--color-page-base)" stroke-width="1.2" stroke-linecap="round" />
-          <line x1="-18" y1="6" x2="-18" y2="12" stroke="var(--color-page-base)" stroke-width="1.2" stroke-linecap="round" />
-          <line x1="-23.2" y1="3" x2="-27" y2="5.2" stroke="var(--color-page-base)" stroke-width="1.2" stroke-linecap="round" />
-          <line x1="-23.2" y1="-3" x2="-27" y2="-5.2" stroke="var(--color-page-base)" stroke-width="1.2" stroke-linecap="round" />
-          <text x="8" y="4" fill="var(--color-page-base)" font-family="monospace" font-size="11">EKS</text>
+          <rect
+            x="-48"
+            y="-24"
+            width="96"
+            height="48"
+            rx="6"
+            fill="var(--color-primary-offset)"
+            stroke="var(--color-page-base)"
+            stroke-width="1.5"></rect>
+          <circle
+            cx="-18"
+            cy="0"
+            r="6"
+            fill="none"
+            stroke="var(--color-page-base)"
+            stroke-width="1.2"></circle>
+          <circle cx="-18" cy="0" r="2.5" fill="var(--color-page-base)" opacity="0.5"></circle>
+          <line
+            x1="-18"
+            y1="-6"
+            x2="-18"
+            y2="-12"
+            stroke="var(--color-page-base)"
+            stroke-width="1.2"
+            stroke-linecap="round"></line>
+          <line
+            x1="-12.8"
+            y1="-3"
+            x2="-9"
+            y2="-5.2"
+            stroke="var(--color-page-base)"
+            stroke-width="1.2"
+            stroke-linecap="round"></line>
+          <line
+            x1="-12.8"
+            y1="3"
+            x2="-9"
+            y2="5.2"
+            stroke="var(--color-page-base)"
+            stroke-width="1.2"
+            stroke-linecap="round"></line>
+          <line
+            x1="-18"
+            y1="6"
+            x2="-18"
+            y2="12"
+            stroke="var(--color-page-base)"
+            stroke-width="1.2"
+            stroke-linecap="round"></line>
+          <line
+            x1="-23.2"
+            y1="3"
+            x2="-27"
+            y2="5.2"
+            stroke="var(--color-page-base)"
+            stroke-width="1.2"
+            stroke-linecap="round"></line>
+          <line
+            x1="-23.2"
+            y1="-3"
+            x2="-27"
+            y2="-5.2"
+            stroke="var(--color-page-base)"
+            stroke-width="1.2"
+            stroke-linecap="round"></line>
+          <text x="8" y="4" fill="var(--color-page-base)" font-family="monospace" font-size="11"
+            >EKS</text
+          >
           <g id="tf-check-eks" opacity="0" filter="url(#tf-check-glow)">
-            <circle cx="54" cy="-14" r="8" fill="var(--color-success)" />
-            <polyline points="49,-14 52,-10 59,-18" fill="none" stroke="var(--color-page-base)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            <circle cx="54" cy="-14" r="8" fill="var(--color-success)"></circle>
+            <polyline
+              points="49,-14 52,-10 59,-18"
+              fill="none"
+              stroke="var(--color-page-base)"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"></polyline>
           </g>
-          <rect id="tf-flash-eks" x="-48" y="-24" width="96" height="48" rx="6" fill="none" stroke="var(--color-success)" stroke-width="2.5" opacity="0" />
+          <rect
+            id="tf-flash-eks"
+            x="-48"
+            y="-24"
+            width="96"
+            height="48"
+            rx="6"
+            fill="none"
+            stroke="var(--color-success)"
+            stroke-width="2.5"
+            opacity="0"></rect>
         </g>
 
         <!-- ===== ROW 2: RDS ===== -->
         <g id="tf-node-rds" transform="translate(390,310)">
-          <rect x="-48" y="-24" width="96" height="48" rx="6" fill="var(--color-primary-offset)" stroke="var(--color-page-base)" stroke-width="1.5" />
-          <ellipse cx="-18" cy="-8" rx="10" ry="5" fill="none" stroke="var(--color-page-base)" stroke-width="1.2" />
-          <line x1="-28" y1="-8" x2="-28" y2="8" stroke="var(--color-page-base)" stroke-width="1.2" />
-          <line x1="-8" y1="-8" x2="-8" y2="8" stroke="var(--color-page-base)" stroke-width="1.2" />
-          <ellipse cx="-18" cy="8" rx="10" ry="5" fill="none" stroke="var(--color-page-base)" stroke-width="1.2" />
-          <path d="M-28,0 Q-18,4 -8,0" fill="none" stroke="var(--color-page-base)" stroke-width="0.8" opacity="0.5" />
-          <text x="10" y="4" fill="var(--color-page-base)" font-family="monospace" font-size="11">RDS</text>
+          <rect
+            x="-48"
+            y="-24"
+            width="96"
+            height="48"
+            rx="6"
+            fill="var(--color-primary-offset)"
+            stroke="var(--color-page-base)"
+            stroke-width="1.5"></rect>
+          <ellipse
+            cx="-18"
+            cy="-8"
+            rx="10"
+            ry="5"
+            fill="none"
+            stroke="var(--color-page-base)"
+            stroke-width="1.2"></ellipse>
+          <line x1="-28" y1="-8" x2="-28" y2="8" stroke="var(--color-page-base)" stroke-width="1.2"
+          ></line>
+          <line x1="-8" y1="-8" x2="-8" y2="8" stroke="var(--color-page-base)" stroke-width="1.2"
+          ></line>
+          <ellipse
+            cx="-18"
+            cy="8"
+            rx="10"
+            ry="5"
+            fill="none"
+            stroke="var(--color-page-base)"
+            stroke-width="1.2"></ellipse>
+          <path
+            d="M-28,0 Q-18,4 -8,0"
+            fill="none"
+            stroke="var(--color-page-base)"
+            stroke-width="0.8"
+            opacity="0.5"></path>
+          <text x="10" y="4" fill="var(--color-page-base)" font-family="monospace" font-size="11"
+            >RDS</text
+          >
           <g id="tf-check-rds" opacity="0" filter="url(#tf-check-glow)">
-            <circle cx="54" cy="-14" r="8" fill="var(--color-success)" />
-            <polyline points="49,-14 52,-10 59,-18" fill="none" stroke="var(--color-page-base)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            <circle cx="54" cy="-14" r="8" fill="var(--color-success)"></circle>
+            <polyline
+              points="49,-14 52,-10 59,-18"
+              fill="none"
+              stroke="var(--color-page-base)"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"></polyline>
           </g>
-          <rect id="tf-flash-rds" x="-48" y="-24" width="96" height="48" rx="6" fill="none" stroke="var(--color-success)" stroke-width="2.5" opacity="0" />
+          <rect
+            id="tf-flash-rds"
+            x="-48"
+            y="-24"
+            width="96"
+            height="48"
+            rx="6"
+            fill="none"
+            stroke="var(--color-success)"
+            stroke-width="2.5"
+            opacity="0"></rect>
         </g>
 
         <!-- ===== TERMINAL OUTPUT ===== -->
         <g id="tf-terminal" transform="translate(70,370)">
-          <line id="tf-separator" x1="-30" y1="-8" x2="490" y2="-8" stroke="var(--color-page-base)" stroke-width="1" />
+          <line
+            id="tf-separator"
+            x1="-30"
+            y1="-8"
+            x2="490"
+            y2="-8"
+            stroke="var(--color-page-base)"
+            stroke-width="1"></line>
           <g id="tf-term-line-1" opacity="0">
-            <text x="0" y="10" fill="var(--color-success)" font-family="monospace" font-size="12">$</text>
-            <text x="14" y="10" fill="var(--color-page-base)" font-family="monospace" font-size="12">terraform init</text>
+            <text x="0" y="10" fill="var(--color-success)" font-family="monospace" font-size="12"
+              >$</text
+            >
+            <text x="14" y="10" fill="var(--color-page-base)" font-family="monospace" font-size="12"
+              >terraform init</text
+            >
           </g>
           <g id="tf-term-line-2" opacity="0">
-            <text x="0" y="28" fill="var(--color-page-base)" font-family="monospace" font-size="11">Initializing provider plugins...</text>
+            <text x="0" y="28" fill="var(--color-page-base)" font-family="monospace" font-size="11"
+              >Initializing provider plugins...</text
+            >
           </g>
           <g id="tf-term-line-3" opacity="0">
-            <text x="0" y="48" fill="var(--color-success)" font-family="monospace" font-size="12">$</text>
-            <text x="14" y="48" fill="var(--color-page-base)" font-family="monospace" font-size="12">terraform plan</text>
+            <text x="0" y="48" fill="var(--color-success)" font-family="monospace" font-size="12"
+              >$</text
+            >
+            <text x="14" y="48" fill="var(--color-page-base)" font-family="monospace" font-size="12"
+              >terraform plan</text
+            >
           </g>
           <g id="tf-term-line-4" opacity="0">
-            <text x="0" y="66" fill="var(--color-page-base)" font-family="monospace" font-size="11">Plan: 5 to add, 0 to change, 0 to destroy.</text>
+            <text x="0" y="66" fill="var(--color-page-base)" font-family="monospace" font-size="11"
+              >Plan: 5 to add, 0 to change, 0 to destroy.</text
+            >
           </g>
           <g id="tf-term-line-5" opacity="0">
-            <text x="0" y="86" fill="var(--color-success)" font-family="monospace" font-size="12">$</text>
-            <text x="14" y="86" fill="var(--color-page-base)" font-family="monospace" font-size="12">terraform apply -auto-approve</text>
+            <text x="0" y="86" fill="var(--color-success)" font-family="monospace" font-size="12"
+              >$</text
+            >
+            <text x="14" y="86" fill="var(--color-page-base)" font-family="monospace" font-size="12"
+              >terraform apply -auto-approve</text
+            >
           </g>
           <g id="tf-term-line-6" opacity="0">
-            <text x="0" y="104" fill="var(--color-page-base)" font-family="monospace" font-size="11">aws_vpc.main: Creating...</text>
+            <text x="0" y="104" fill="var(--color-page-base)" font-family="monospace" font-size="11"
+              >aws_vpc.main: Creating...</text
+            >
           </g>
           <g id="tf-term-line-7" opacity="0">
-            <text x="0" y="120" fill="var(--color-page-base)" font-family="monospace" font-size="11">aws_eks_cluster.platform: Creating...</text>
+            <text x="0" y="120" fill="var(--color-page-base)" font-family="monospace" font-size="11"
+              >aws_eks_cluster.platform: Creating...</text
+            >
           </g>
           <g id="tf-term-line-8" opacity="0">
-            <text x="0" y="136" fill="var(--color-page-base)" font-family="monospace" font-size="11">aws_db_instance.primary: Creating...</text>
+            <text x="0" y="136" fill="var(--color-page-base)" font-family="monospace" font-size="11"
+              >aws_db_instance.primary: Creating...</text
+            >
           </g>
           <g id="tf-term-complete" opacity="0">
-            <text x="0" y="162" fill="var(--color-success)" font-family="monospace" font-size="13" font-weight="bold">Apply complete! Resources: 5 added, 0 changed, 0 destroyed.</text>
+            <text
+              x="0"
+              y="162"
+              fill="var(--color-success)"
+              font-family="monospace"
+              font-size="13"
+              font-weight="bold">Apply complete! Resources: 5 added, 0 changed, 0 destroyed.</text
+            >
           </g>
-          <rect id="tf-cursor" x="0" y="170" width="8" height="13" rx="1" fill="var(--color-success)" opacity="0" />
+          <rect
+            id="tf-cursor"
+            x="0"
+            y="170"
+            width="8"
+            height="13"
+            rx="1"
+            fill="var(--color-success)"
+            opacity="0"></rect>
         </g>
       </svg>
     </div>
diff --git a/src/components/Brand/index.astro b/src/components/Brand/index.astro
index add16bad3..c8e915675 100644
--- a/src/components/Brand/index.astro
+++ b/src/components/Brand/index.astro
@@ -22,7 +22,9 @@ import styles from './index.module.css'
   <span class="brand-logo">
     <Logo class="h-(--header-icon-size) w-(--header-icon-size) relative z-(--z-content-overlay)" />
   </span>
-  <span class="flex flex-col justify-between items-center ml-2 sm:ml-3 group-data-[header-search-open=true]:hidden lg:group-data-[header-search-open=true]:flex">
+  <span
+    class="flex flex-col justify-between items-center ml-2 sm:ml-3 group-data-[header-search-open=true]:hidden lg:group-data-[header-search-open=true]:flex"
+  >
     <span class="brand-wordmark-webstack">
       <WordmarkWebstack class="h-[calc(var(--header-icon-size)/2-0.3em)]" />
     </span>
diff --git a/src/components/Breadcrumbs/index.astro b/src/components/Breadcrumbs/index.astro
index f9743a809..c6714ac50 100644
--- a/src/components/Breadcrumbs/index.astro
+++ b/src/components/Breadcrumbs/index.astro
@@ -66,15 +66,19 @@ const breadcrumbSchema =
         <ol class="flex flex-wrap items-center text-sm text-content">
           {breadcrumbs.map((item, i) => (
             <li class="flex items-center">
-              {i > 0 && (
-                <span class="w-4 h-px border-t-2 border-dashed border-page-inverse" />
-              )}
+              {i > 0 && <span class="w-4 h-px border-t-2 border-dashed border-page-inverse" />}
               {item.isCurrentPage ? (
-                <span aria-current="page" class="rounded px-2 py-1 text-xs text-content-inverse bg-page-inverse">
+                <span
+                  aria-current="page"
+                  class="rounded px-2 py-1 text-xs text-content-inverse bg-page-inverse"
+                >
                   {item.label}
                 </span>
               ) : (
-                <a href={rewriteBreadcrumbHref(item.href)} class="rounded px-2 py-1 text-xs text-page-inverse no-underline transition-colors bg-page-base border border-page-inverse hover:bg-secondary hover:text-content-inverse focus-visible:text-content-inverse focus-visible:bg-secondary">
+                <a
+                  href={rewriteBreadcrumbHref(item.href)}
+                  class="rounded px-2 py-1 text-xs text-page-inverse no-underline transition-colors bg-page-base border border-page-inverse hover:bg-secondary hover:text-content-inverse focus-visible:text-content-inverse focus-visible:bg-secondary"
+                >
                   {item.label}
                 </a>
               )}
diff --git a/src/components/BugReporter/client/__tests__/index.spec.ts b/src/components/BugReporter/client/__tests__/index.spec.ts
index 4245adde1..e232bd85b 100644
--- a/src/components/BugReporter/client/__tests__/index.spec.ts
+++ b/src/components/BugReporter/client/__tests__/index.spec.ts
@@ -6,7 +6,7 @@ import type { BugReporterModalElement } from '../index'
 import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
 import { executeRender } from '@test/unit/helpers/litRuntime'
 
-vi.mock('@sentry/browser', async (importOriginal) => {
+vi.mock('@sentry/browser', async importOriginal => {
   const actual = (await importOriginal()) as typeof import('@sentry/browser')
   return {
     ...actual,
@@ -29,7 +29,7 @@ describe('BugReporterModalElement', () => {
       container,
       component: BugReporterFixture,
       moduleSpecifier: '@components/BugReporter/client/index',
-      waitForReady: async (element) => {
+      waitForReady: async element => {
         await element.updateComplete
       },
       assert: async ({ element, window, module, renderResult }) => {
@@ -55,7 +55,7 @@ describe('BugReporterModalElement', () => {
       container,
       component: BugReporterFixture,
       moduleSpecifier: '@components/BugReporter/client/index',
-      waitForReady: async (element) => {
+      waitForReady: async element => {
         await element.updateComplete
       },
       assert: async ({ element, window }) => {
@@ -72,7 +72,6 @@ describe('BugReporterModalElement', () => {
         const messageTextarea = (form as HTMLFormElement).querySelector('textarea[name="message"]')
         expect(messageTextarea).toBeTruthy()
         expect(messageTextarea).toBeInstanceOf(window!.HTMLTextAreaElement)
-
         ;(messageTextarea as HTMLTextAreaElement).value = 'The page crashed when I clicked Save.'
 
         form?.dispatchEvent(new window!.Event('submit', { bubbles: true, cancelable: true }))
diff --git a/src/components/BugReporter/client/index.ts b/src/components/BugReporter/client/index.ts
index 89b87eaf8..d4454c599 100644
--- a/src/components/BugReporter/client/index.ts
+++ b/src/components/BugReporter/client/index.ts
@@ -161,7 +161,10 @@ export class BugReporterModalElement extends LitElement {
   }
 
   private attachCloseButtonListener(): void {
-    const context = { scriptName: 'BugReporterModalElement', operation: 'attachCloseButtonListener' }
+    const context = {
+      scriptName: 'BugReporterModalElement',
+      operation: 'attachCloseButtonListener',
+    }
     addScriptBreadcrumb(context)
 
     try {
@@ -182,7 +185,10 @@ export class BugReporterModalElement extends LitElement {
   }
 
   private attachCancelButtonListener(): void {
-    const context = { scriptName: 'BugReporterModalElement', operation: 'attachCancelButtonListener' }
+    const context = {
+      scriptName: 'BugReporterModalElement',
+      operation: 'attachCancelButtonListener',
+    }
     addScriptBreadcrumb(context)
 
     try {
@@ -203,7 +209,10 @@ export class BugReporterModalElement extends LitElement {
   }
 
   private attachMinimizeButtonListener(): void {
-    const context = { scriptName: 'BugReporterModalElement', operation: 'attachMinimizeButtonListener' }
+    const context = {
+      scriptName: 'BugReporterModalElement',
+      operation: 'attachMinimizeButtonListener',
+    }
     addScriptBreadcrumb(context)
 
     try {
@@ -224,7 +233,10 @@ export class BugReporterModalElement extends LitElement {
   }
 
   private attachMinimizedBarListener(): void {
-    const context = { scriptName: 'BugReporterModalElement', operation: 'attachMinimizedBarListener' }
+    const context = {
+      scriptName: 'BugReporterModalElement',
+      operation: 'attachMinimizedBarListener',
+    }
     addScriptBreadcrumb(context)
 
     try {
@@ -267,7 +279,7 @@ export class BugReporterModalElement extends LitElement {
         return
       }
 
-      form.addEventListener('submit', (event) => {
+      form.addEventListener('submit', event => {
         void this.handleSubmit(event)
       })
       this.formListenerAttached = true
diff --git a/src/components/BugReporter/client/selectors.ts b/src/components/BugReporter/client/selectors.ts
index c0aa7d15f..8e1c664a1 100644
--- a/src/components/BugReporter/client/selectors.ts
+++ b/src/components/BugReporter/client/selectors.ts
@@ -46,7 +46,9 @@ export const getBugReporterStatusElement = (statusId: string): HTMLElement | nul
   return status instanceof HTMLElement ? status : null
 }
 
-export const getBugReporterCloseButtonElement = (closeButtonId: string): HTMLButtonElement | null => {
+export const getBugReporterCloseButtonElement = (
+  closeButtonId: string
+): HTMLButtonElement | null => {
   if (typeof document === 'undefined') {
     return null
   }
@@ -56,7 +58,7 @@ export const getBugReporterCloseButtonElement = (closeButtonId: string): HTMLBut
 }
 
 export const getBugReporterCancelButtonElement = (
-  cancelButtonId: string,
+  cancelButtonId: string
 ): HTMLButtonElement | null => {
   if (typeof document === 'undefined') {
     return null
@@ -67,7 +69,7 @@ export const getBugReporterCancelButtonElement = (
 }
 
 export const getBugReporterMinimizeButtonElement = (
-  minimizeButtonId: string,
+  minimizeButtonId: string
 ): HTMLButtonElement | null => {
   if (typeof document === 'undefined') {
     return null
@@ -77,9 +79,7 @@ export const getBugReporterMinimizeButtonElement = (
   return minimizeButton instanceof HTMLButtonElement ? minimizeButton : null
 }
 
-export const getBugReporterMinimizedBarElement = (
-  minimizedBarId: string,
-): HTMLElement | null => {
+export const getBugReporterMinimizedBarElement = (minimizedBarId: string): HTMLElement | null => {
   if (typeof document === 'undefined') {
     return null
   }
@@ -89,7 +89,7 @@ export const getBugReporterMinimizedBarElement = (
 }
 
 export const getBugReporterRestoreButtonElement = (
-  restoreButtonId: string,
+  restoreButtonId: string
 ): HTMLButtonElement | null => {
   if (typeof document === 'undefined') {
     return null
@@ -100,7 +100,7 @@ export const getBugReporterRestoreButtonElement = (
 }
 
 export const getBugReporterMinimizedCloseButtonElement = (
-  minimizedCloseButtonId: string,
+  minimizedCloseButtonId: string
 ): HTMLButtonElement | null => {
   if (typeof document === 'undefined') {
     return null
diff --git a/src/components/BugReporter/index.astro b/src/components/BugReporter/index.astro
index 4041a97be..786fa3f07 100644
--- a/src/components/BugReporter/index.astro
+++ b/src/components/BugReporter/index.astro
@@ -33,8 +33,7 @@ const {
   minimized-bar-id={minimizedBarId}
   minimized-restore-button-id={minimizedRestoreButtonId}
   minimized-close-button-id={minimizedCloseButtonId}
-  data-testid="bug-reporter-modal"
-></bug-reporter-modal-element>
+  data-testid="bug-reporter-modal"></bug-reporter-modal-element>
 
 <dialog
   id={dialogId}
@@ -99,8 +98,7 @@ const {
           required
           rows="4"
           class="mt-1 w-full rounded-md border border-trim bg-page-base p-2 text-sm focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-1"
-          placeholder="What's the bug? What did you expect?"
-        ></textarea>
+          placeholder="What's the bug? What did you expect?"></textarea>
       </label>
 
       <p id={statusId} class="hidden text-sm" aria-live="polite"></p>
diff --git a/src/components/Button/layouts/anchor.astro b/src/components/Button/layouts/anchor.astro
index 2dfef552a..6fa356f31 100644
--- a/src/components/Button/layouts/anchor.astro
+++ b/src/components/Button/layouts/anchor.astro
@@ -3,31 +3,31 @@ import Icon from '@components/Icon/index.astro'
 import type { IconPosition } from '@components/Button/server'
 
 type Props = {
-	id?: string | undefined
-	href?: string | undefined
-	onClick?: string | undefined
-	disabled?: boolean | undefined
-	classList: Record<string, boolean>
-	ariaAttributes?: Record<string, string> | undefined
-	icon?: string | undefined
-	iconPosition?: IconPosition | undefined
-	iconSize: number
-	text?: string | undefined
-	attributes?: Record<string, unknown> | undefined
+  id?: string | undefined
+  href?: string | undefined
+  onClick?: string | undefined
+  disabled?: boolean | undefined
+  classList: Record<string, boolean>
+  ariaAttributes?: Record<string, string> | undefined
+  icon?: string | undefined
+  iconPosition?: IconPosition | undefined
+  iconSize: number
+  text?: string | undefined
+  attributes?: Record<string, unknown> | undefined
 }
 
 const {
-	id,
-	href,
-	onClick,
-	disabled = false,
-	classList,
-	ariaAttributes = {},
-	icon,
-	iconPosition = 'left',
-	iconSize,
-	text,
-	attributes = {},
+  id,
+  href,
+  onClick,
+  disabled = false,
+  classList,
+  ariaAttributes = {},
+  icon,
+  iconPosition = 'left',
+  iconSize,
+  text,
+  attributes = {},
 } = Astro.props
 
 const linkHref = disabled ? undefined : href
@@ -35,21 +35,21 @@ const linkOnClick = disabled ? undefined : onClick
 ---
 
 <a
-	href={linkHref}
-	class:list={classList}
-	id={id}
-	onclick={linkOnClick}
-	aria-disabled={disabled ? 'true' : undefined}
-	tabindex={disabled ? -1 : undefined}
-	{...ariaAttributes}
-	{...attributes}
+  href={linkHref}
+  class:list={classList}
+  id={id}
+  onclick={linkOnClick}
+  aria-disabled={disabled ? 'true' : undefined}
+  tabindex={disabled ? -1 : undefined}
+  {...ariaAttributes}
+  {...attributes}
 >
-	{icon && (iconPosition === 'left' || iconPosition === 'only') && (
-		<Icon icon={icon} size={iconSize} classes={text ? 'mr-2' : ''} />
-	)}
-	{text && <span>{text}</span>}
-	{icon && iconPosition === 'right' && (
-		<Icon icon={icon} size={iconSize} classes="ml-2" />
-	)}
-	<slot />
+  {
+    icon && (iconPosition === 'left' || iconPosition === 'only') && (
+      <Icon icon={icon} size={iconSize} classes={text ? 'mr-2' : ''} />
+    )
+  }
+  {text && <span>{text}</span>}
+  {icon && iconPosition === 'right' && <Icon icon={icon} size={iconSize} classes="ml-2" />}
+  <slot />
 </a>
diff --git a/src/components/Button/layouts/default.astro b/src/components/Button/layouts/default.astro
index b49b58cc0..0df238065 100644
--- a/src/components/Button/layouts/default.astro
+++ b/src/components/Button/layouts/default.astro
@@ -3,49 +3,49 @@ import Icon from '@components/Icon/index.astro'
 import type { NativeButtonType, IconPosition } from '@components/Button/server'
 
 type Props = {
-	id?: string | undefined
-	type?: NativeButtonType | undefined
-	onClick?: string | undefined
-	disabled?: boolean | undefined
-	classList: Record<string, boolean>
-	ariaAttributes?: Record<string, string> | undefined
-	icon?: string | undefined
-	iconPosition?: IconPosition | undefined
-	iconSize: number
-	text?: string | undefined
-	attributes?: Record<string, unknown> | undefined
+  id?: string | undefined
+  type?: NativeButtonType | undefined
+  onClick?: string | undefined
+  disabled?: boolean | undefined
+  classList: Record<string, boolean>
+  ariaAttributes?: Record<string, string> | undefined
+  icon?: string | undefined
+  iconPosition?: IconPosition | undefined
+  iconSize: number
+  text?: string | undefined
+  attributes?: Record<string, unknown> | undefined
 }
 
 const {
-	id,
-	type = 'button',
-	onClick,
-	disabled = false,
-	classList,
-	ariaAttributes = {},
-	icon,
-	iconPosition = 'left',
-	iconSize,
-	text,
-	attributes = {},
+  id,
+  type = 'button',
+  onClick,
+  disabled = false,
+  classList,
+  ariaAttributes = {},
+  icon,
+  iconPosition = 'left',
+  iconSize,
+  text,
+  attributes = {},
 } = Astro.props
 ---
 
 <button
-	type={type}
-	class:list={classList}
-	disabled={disabled}
-	id={id}
-	onclick={onClick}
-	{...ariaAttributes}
-	{...attributes}
+  type={type}
+  class:list={classList}
+  disabled={disabled}
+  id={id}
+  onclick={onClick}
+  {...ariaAttributes}
+  {...attributes}
 >
-	{icon && (iconPosition === 'left' || iconPosition === 'only') && (
-		<Icon icon={icon} size={iconSize} classes={text ? 'mr-2' : ''} />
-	)}
-	{text && <span>{text}</span>}
-	{icon && iconPosition === 'right' && (
-		<Icon icon={icon} size={iconSize} classes="ml-2" />
-	)}
-	<slot />
+  {
+    icon && (iconPosition === 'left' || iconPosition === 'only') && (
+      <Icon icon={icon} size={iconSize} classes={text ? 'mr-2' : ''} />
+    )
+  }
+  {text && <span>{text}</span>}
+  {icon && iconPosition === 'right' && <Icon icon={icon} size={iconSize} classes="ml-2" />}
+  <slot />
 </button>
diff --git a/src/components/Button/server/index.ts b/src/components/Button/server/index.ts
index 6b9f45e3d..81af25db7 100644
--- a/src/components/Button/server/index.ts
+++ b/src/components/Button/server/index.ts
@@ -58,12 +58,9 @@ const baseButtonClasses =
   'aria-disabled:cursor-not-allowed aria-disabled:opacity-[0.65] aria-disabled:pointer-events-none'
 
 const sizeClasses: Record<ButtonSize, string> = {
-  small:
-    'text-xs leading-4 py-1 px-2',
-  medium:
-    'text-xs leading-4 py-1.5 px-4 sm:py-3 sm:px-6 lg:px-5',
-  large:
-    'text-sm sm:text-base leading-5 sm:leading-6 py-3 px-7 sm:py-4 sm:px-8',
+  small: 'text-xs leading-4 py-1 px-2',
+  medium: 'text-xs leading-4 py-1.5 px-4 sm:py-3 sm:px-6 lg:px-5',
+  large: 'text-sm sm:text-base leading-5 sm:leading-6 py-3 px-7 sm:py-4 sm:px-8',
 }
 
 const variantClasses: Record<ButtonVariant, string> = {
@@ -112,7 +109,7 @@ const variantClasses: Record<ButtonVariant, string> = {
     'hover:bg-warning-offset ' +
     'focus-visible:bg-warning-offset ' +
     'active:bg-warning-offset',
-  }
+}
 
 export interface ButtonClassOptions {
   variant?: ButtonVariant
diff --git a/src/components/Calendar/client/index.ts b/src/components/Calendar/client/index.ts
index 094bed6ee..205c2acfa 100644
--- a/src/components/Calendar/client/index.ts
+++ b/src/components/Calendar/client/index.ts
@@ -143,10 +143,14 @@ const createCalendarUid = (now: Date): string => {
     return cryptoApi.randomUUID()
   }
 
-  if (cryptoApi && 'getRandomValues' in cryptoApi && typeof cryptoApi.getRandomValues === 'function') {
+  if (
+    cryptoApi &&
+    'getRandomValues' in cryptoApi &&
+    typeof cryptoApi.getRandomValues === 'function'
+  ) {
     const bytes = new Uint8Array(16)
     cryptoApi.getRandomValues(bytes)
-    return Array.from(bytes, (value) => value.toString(16).padStart(2, '0')).join('')
+    return Array.from(bytes, value => value.toString(16).padStart(2, '0')).join('')
   }
 
   // Extremely old/non-browser environment fallback: unique-enough without randomness.
diff --git a/src/components/CallToAction/Contact/index.astro b/src/components/CallToAction/Contact/index.astro
index 0f4ad05d6..dcb25bece 100644
--- a/src/components/CallToAction/Contact/index.astro
+++ b/src/components/CallToAction/Contact/index.astro
@@ -56,7 +56,9 @@ const descriptionId = `${idBase}-description`
 >
   <div class="grid md:grid-cols-[1fr_auto]">
     {/* Text panel */}
-    <div class="bg-linear-to-br from-(--color-primary) to-(--color-primary-offset) py-6 md:py-12 px-4 sm:px-6 lg:px-8">
+    <div
+      class="bg-linear-to-br from-(--color-primary) to-(--color-primary-offset) py-6 md:py-12 px-4 sm:px-6 lg:px-8"
+    >
       <div class="max-w-2xl mx-auto md:mx-0 text-center md:text-left">
         <h2
           id={titleId}
@@ -64,10 +66,7 @@ const descriptionId = `${idBase}-description`
         >
           {title}
         </h2>
-        <p
-          id={descriptionId}
-          class="text-lg md:text-xl text-content-inverse/80 leading-relaxed"
-        >
+        <p id={descriptionId} class="text-lg md:text-xl text-content-inverse/80 leading-relaxed">
           {description}
         </p>
       </div>
diff --git a/src/components/CallToAction/Download/__tests__/index.spec.ts b/src/components/CallToAction/Download/__tests__/index.spec.ts
index 60db92c18..f64e1732a 100644
--- a/src/components/CallToAction/Download/__tests__/index.spec.ts
+++ b/src/components/CallToAction/Download/__tests__/index.spec.ts
@@ -83,34 +83,37 @@ describe('Download CallToAction (Astro)', () => {
     })
   })
 
-  existingDownloadTest('renders direct and landing download URLs for the web component host', async () => {
-    if (!downloadFixture) {
-      throw new Error('Expected an existing download fixture')
-    }
+  existingDownloadTest(
+    'renders direct and landing download URLs for the web component host',
+    async () => {
+      if (!downloadFixture) {
+        throw new Error('Expected an existing download fixture')
+      }
 
-    const Download = (await import('@components/CallToAction/Download/index.astro')).default
+      const Download = (await import('@components/CallToAction/Download/index.astro')).default
 
-    const renderedHtml = await container.renderToString(Download, {
-      props: {
-        resource: downloadFixture.resource,
-      },
-    })
+      const renderedHtml = await container.renderToString(Download, {
+        props: {
+          resource: downloadFixture.resource,
+        },
+      })
 
-    await withJsdomEnvironment(async ({ window }) => {
-      window.document.body.innerHTML = renderedHtml
+      await withJsdomEnvironment(async ({ window }) => {
+        window.document.body.innerHTML = renderedHtml
 
-      const host = window.document.querySelector('download-cta')
-      const primaryLink = window.document.querySelector('[data-download-cta-primary]')
-
-      expect(host?.getAttribute('data-landing-url')).toBe(
-        `/downloads/${downloadFixture.resource}`
-      )
-      expect(host?.getAttribute('data-direct-download-url')).toBe(
-        downloadFixture.directDownloadUrl
-      )
-      expect(primaryLink?.getAttribute('href')).toBe(`/downloads/${downloadFixture.resource}`)
-    })
-  })
+        const host = window.document.querySelector('download-cta')
+        const primaryLink = window.document.querySelector('[data-download-cta-primary]')
+
+        expect(host?.getAttribute('data-landing-url')).toBe(
+          `/downloads/${downloadFixture.resource}`
+        )
+        expect(host?.getAttribute('data-direct-download-url')).toBe(
+          downloadFixture.directDownloadUrl
+        )
+        expect(primaryLink?.getAttribute('href')).toBe(`/downloads/${downloadFixture.resource}`)
+      })
+    }
+  )
 
   test('supports a custom id base for aria relationships', async () => {
     const Download = (await import('@components/CallToAction/Download/index.astro')).default
diff --git a/src/components/CallToAction/Download/client/__tests__/__fixtures__/downloadCta.fixture.astro b/src/components/CallToAction/Download/client/__tests__/__fixtures__/downloadCta.fixture.astro
index 137d076d2..7eafda731 100644
--- a/src/components/CallToAction/Download/client/__tests__/__fixtures__/downloadCta.fixture.astro
+++ b/src/components/CallToAction/Download/client/__tests__/__fixtures__/downloadCta.fixture.astro
@@ -2,4 +2,4 @@
 import Download from '@components/CallToAction/Download/index.astro'
 ---
 
-<Download resource="performance-testing-load-models-benchmark-accuracy" />
\ No newline at end of file
+<Download resource="performance-testing-load-models-benchmark-accuracy" />
diff --git a/src/components/CallToAction/Download/client/__tests__/index.spec.ts b/src/components/CallToAction/Download/client/__tests__/index.spec.ts
index 4e05780dc..818a816af 100644
--- a/src/components/CallToAction/Download/client/__tests__/index.spec.ts
+++ b/src/components/CallToAction/Download/client/__tests__/index.spec.ts
@@ -36,4 +36,4 @@ describe('download-cta web component', () => {
       expect(elements.primaryLink.getAttribute('href')).toBe(urls.directDownloadUrl)
     })
   })
-})
\ No newline at end of file
+})
diff --git a/src/components/CallToAction/Download/client/__tests__/testUtils.ts b/src/components/CallToAction/Download/client/__tests__/testUtils.ts
index afe6c8442..fc4e77eb1 100644
--- a/src/components/CallToAction/Download/client/__tests__/testUtils.ts
+++ b/src/components/CallToAction/Download/client/__tests__/testUtils.ts
@@ -68,4 +68,4 @@ export const renderDownloadCta = async (assertion: RenderDownloadCtaAssertion):
       })
     },
   })
-}
\ No newline at end of file
+}
diff --git a/src/components/CallToAction/Download/client/index.ts b/src/components/CallToAction/Download/client/index.ts
index 487446769..366df8903 100644
--- a/src/components/CallToAction/Download/client/index.ts
+++ b/src/components/CallToAction/Download/client/index.ts
@@ -1,8 +1,8 @@
 import { LitElement } from 'lit'
 import {
-	getEmailCollectionSnapshot,
-	subscribeToEmailCollection,
-	type EmailCollectionState,
+  getEmailCollectionSnapshot,
+  subscribeToEmailCollection,
+  type EmailCollectionState,
 } from '@components/scripts/store'
 import { addScriptBreadcrumb } from '@components/scripts/errors'
 import { handleScriptError } from '@components/scripts/errors/handler'
@@ -13,91 +13,91 @@ import { getDownloadCtaPrimaryLink, getDownloadCtaUrls } from './selectors'
 const scriptName = 'DownloadCtaElement'
 
 export class DownloadCtaElement extends LitElement {
-	static registeredName = 'download-cta'
-
-	private primaryLink: HTMLAnchorElement | null = null
-	private unsubscribeFromEmailCollection: (() => void) | null = null
-	private isInitialized = false
-
-	protected override createRenderRoot(): HTMLElement {
-		return this
-	}
-
-	override connectedCallback(): void {
-		super.connectedCallback()
-
-		queueMicrotask(() => {
-			this.initialize()
-		})
-	}
-
-	override disconnectedCallback(): void {
-		this.unsubscribeFromEmailCollection?.()
-		this.unsubscribeFromEmailCollection = null
-		this.isInitialized = false
-		super.disconnectedCallback()
-	}
-
-	public initialize(): void {
-		const context = { scriptName, operation: 'initialize' }
-		addScriptBreadcrumb(context)
-
-		try {
-			if (this.isInitialized) {
-				return
-			}
-
-			this.primaryLink = getDownloadCtaPrimaryLink(this)
-			const { landingUrl, directDownloadUrl } = getDownloadCtaUrls(this)
-
-			this.syncPrimaryLink(getEmailCollectionSnapshot(), {
-				landingUrl,
-				directDownloadUrl,
-			})
-
-			this.unsubscribeFromEmailCollection = subscribeToEmailCollection(state => {
-				this.syncPrimaryLink(state, {
-					landingUrl,
-					directDownloadUrl,
-				})
-			})
-
-			this.isInitialized = true
-		} catch (error) {
-			handleScriptError(error, context)
-		}
-	}
-
-	private syncPrimaryLink(
-		state: EmailCollectionState,
-		urls: { landingUrl: string; directDownloadUrl: string }
-	): void {
-		if (!this.primaryLink) {
-			return
-		}
-
-		const hasProvidedEmail = state.hasProvidedEmail === true
-		const nextHref = hasProvidedEmail ? urls.directDownloadUrl : urls.landingUrl
-		const nextState = hasProvidedEmail ? 'ready' : 'gated'
-
-		this.primaryLink.href = nextHref
-		this.primaryLink.dataset['emailState'] = nextState
-		this.dataset['emailState'] = nextState
-	}
+  static registeredName = 'download-cta'
+
+  private primaryLink: HTMLAnchorElement | null = null
+  private unsubscribeFromEmailCollection: (() => void) | null = null
+  private isInitialized = false
+
+  protected override createRenderRoot(): HTMLElement {
+    return this
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+
+    queueMicrotask(() => {
+      this.initialize()
+    })
+  }
+
+  override disconnectedCallback(): void {
+    this.unsubscribeFromEmailCollection?.()
+    this.unsubscribeFromEmailCollection = null
+    this.isInitialized = false
+    super.disconnectedCallback()
+  }
+
+  public initialize(): void {
+    const context = { scriptName, operation: 'initialize' }
+    addScriptBreadcrumb(context)
+
+    try {
+      if (this.isInitialized) {
+        return
+      }
+
+      this.primaryLink = getDownloadCtaPrimaryLink(this)
+      const { landingUrl, directDownloadUrl } = getDownloadCtaUrls(this)
+
+      this.syncPrimaryLink(getEmailCollectionSnapshot(), {
+        landingUrl,
+        directDownloadUrl,
+      })
+
+      this.unsubscribeFromEmailCollection = subscribeToEmailCollection(state => {
+        this.syncPrimaryLink(state, {
+          landingUrl,
+          directDownloadUrl,
+        })
+      })
+
+      this.isInitialized = true
+    } catch (error) {
+      handleScriptError(error, context)
+    }
+  }
+
+  private syncPrimaryLink(
+    state: EmailCollectionState,
+    urls: { landingUrl: string; directDownloadUrl: string }
+  ): void {
+    if (!this.primaryLink) {
+      return
+    }
+
+    const hasProvidedEmail = state.hasProvidedEmail === true
+    const nextHref = hasProvidedEmail ? urls.directDownloadUrl : urls.landingUrl
+    const nextState = hasProvidedEmail ? 'ready' : 'gated'
+
+    this.primaryLink.href = nextHref
+    this.primaryLink.dataset['emailState'] = nextState
+    this.dataset['emailState'] = nextState
+  }
 }
 
 export const registerDownloadCtaWebComponent = (tagName = DownloadCtaElement.registeredName) => {
-	if (typeof window === 'undefined') {
-		return
-	}
+  if (typeof window === 'undefined') {
+    return
+  }
 
-	defineCustomElement(tagName, DownloadCtaElement)
+  defineCustomElement(tagName, DownloadCtaElement)
 }
 
 export const registerWebComponent = registerDownloadCtaWebComponent
 
 export const webComponentModule: WebComponentModule<DownloadCtaElement> = {
-	registeredName: DownloadCtaElement.registeredName,
-	componentCtor: DownloadCtaElement,
-	registerWebComponent: registerDownloadCtaWebComponent,
+  registeredName: DownloadCtaElement.registeredName,
+  componentCtor: DownloadCtaElement,
+  registerWebComponent: registerDownloadCtaWebComponent,
 }
diff --git a/src/components/CallToAction/Download/client/selectors.ts b/src/components/CallToAction/Download/client/selectors.ts
index 1e3c84c5c..0af72e3a9 100644
--- a/src/components/CallToAction/Download/client/selectors.ts
+++ b/src/components/CallToAction/Download/client/selectors.ts
@@ -45,7 +45,9 @@ export const getDownloadCtaPrimaryLink = (root?: SelectorRoot): HTMLAnchorElemen
   return primaryLink
 }
 
-export const getDownloadCtaUrls = (root?: SelectorRoot): {
+export const getDownloadCtaUrls = (
+  root?: SelectorRoot
+): {
   landingUrl: string
   directDownloadUrl: string
 } => {
@@ -63,4 +65,4 @@ export const getDownloadCtaUrls = (root?: SelectorRoot): {
     landingUrl,
     directDownloadUrl,
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/CallToAction/Download/index.astro b/src/components/CallToAction/Download/index.astro
index b90a3890d..358cdd2fd 100644
--- a/src/components/CallToAction/Download/index.astro
+++ b/src/components/CallToAction/Download/index.astro
@@ -41,8 +41,8 @@ const {
   listItems,
   buttonText = 'Download Now',
   secondaryLink = {
-    href: "/services/consulting",
-    text: "Learn More"
+    href: '/services/consulting',
+    text: 'Learn More',
   },
 } = Astro.props
 
@@ -80,8 +80,8 @@ const matchesDownloadResource = (
   return normalizedFilePath?.includes(`/${expectedResource}/download.`) ?? false
 }
 
-const matchedDownloadEntry = downloadEntries.find(
-  download => matchesDownloadResource(download, normalizedResource)
+const matchedDownloadEntry = downloadEntries.find(download =>
+  matchesDownloadResource(download, normalizedResource)
 )
 const directDownloadFileName = matchedDownloadEntry?.data.fileName?.trim()
 const directDownloadUrl = directDownloadFileName
@@ -106,11 +106,7 @@ const directDownloadUrl = directDownloadFileName
           <span
             class="inline-flex items-center gap-1 text-xs font-bold text-content bg-primary/10 px-2.5 py-1 rounded-full"
           >
-            <Icon
-              icon={"download-document"}
-              size={3.5}
-              color={"content"}
-            />
+            <Icon icon={'download-document'} size={3.5} color={'content'} />
             Free PDF Guide
           </span>
         </div>
@@ -150,11 +146,7 @@ const directDownloadUrl = directDownloadFileName
             </div>
             <div class="flex flex-col justify-start items-center gap-2 mx-auto mt-2 text-trim">
               <p class="text-sm leading-none">Free resource</p>
-              <Icon
-                icon={"lightning"}
-                size={5}
-                color={"text-trim"}
-              />
+              <Icon icon={'lightning'} size={5} color={'text-trim'} />
               <p class="text-sm leading-none">Instant access</p>
             </div>
           </div>
@@ -166,11 +158,7 @@ const directDownloadUrl = directDownloadFileName
               class="w-full gap-2 px-6 py-3 text-content-inverse"
               data-download-cta-primary
             >
-              <Icon
-                icon={"download"}
-                size={5}
-                color={"content-inverse"}
-              />
+              <Icon icon={'download'} size={5} color={'content-inverse'} />
               <span class="mt-1">{buttonText}</span>
             </Button>
             {
diff --git a/src/components/CallToAction/Newsletter/client/__tests__/index.spec.ts b/src/components/CallToAction/Newsletter/client/__tests__/index.spec.ts
index e416ec06a..5eab39527 100644
--- a/src/components/CallToAction/Newsletter/client/__tests__/index.spec.ts
+++ b/src/components/CallToAction/Newsletter/client/__tests__/index.spec.ts
@@ -127,7 +127,9 @@ describe.each(newsletterVariants)('NewsletterFormElement web component (%s)', va
   test('builds aria relationships from the newsletter CTA id base', async () => {
     await renderNewsletter(async ({ element }) => {
       expect(element.getAttribute('aria-labelledby')).toBe('newsletter-cta-' + variant + '-title')
-      expect(element.getAttribute('aria-describedby')).toBe('newsletter-cta-' + variant + '-description')
+      expect(element.getAttribute('aria-describedby')).toBe(
+        'newsletter-cta-' + variant + '-description'
+      )
     })
   })
 
diff --git a/src/components/CallToAction/Newsletter/client/index.ts b/src/components/CallToAction/Newsletter/client/index.ts
index ee8e7158b..62cdd0886 100644
--- a/src/components/CallToAction/Newsletter/client/index.ts
+++ b/src/components/CallToAction/Newsletter/client/index.ts
@@ -150,11 +150,7 @@ export class NewsletterFormElement extends LitElement {
       }
 
       this.message.textContent = text
-      this.message.classList.remove(
-        'text-content-active',
-        'text-success',
-        'text-danger'
-      )
+      this.message.classList.remove('text-content-active', 'text-success', 'text-danger')
 
       if (type === 'success') {
         this.message.classList.add('text-success')
diff --git a/src/components/CallToAction/Newsletter/index.astro b/src/components/CallToAction/Newsletter/index.astro
index b07eb9d46..3a148fec9 100644
--- a/src/components/CallToAction/Newsletter/index.astro
+++ b/src/components/CallToAction/Newsletter/index.astro
@@ -41,36 +41,42 @@ const descriptionId = `${idBase}-description`
   aria-labelledby={titleId}
   aria-describedby={descriptionId}
 >
-  {variant === 'article' && (
-    <ArticleNewsletter
-      title={title}
-      description={description}
-      placeholder={placeholder}
-      buttonText={buttonText}
-      titleId={titleId}
-      descriptionId={descriptionId}
-    />
-  )}
-  {variant === 'home' && (
-    <HomeNewsletter
-      title={title}
-      description={description}
-      placeholder={placeholder}
-      buttonText={buttonText}
-      titleId={titleId}
-      descriptionId={descriptionId}
-    />
-  )}
-  {variant === 'page' && (
-    <PageNewsletter
-      title={title}
-      description={description}
-      placeholder={placeholder}
-      buttonText={buttonText}
-      titleId={titleId}
-      descriptionId={descriptionId}
-    />
-  )}
+  {
+    variant === 'article' && (
+      <ArticleNewsletter
+        title={title}
+        description={description}
+        placeholder={placeholder}
+        buttonText={buttonText}
+        titleId={titleId}
+        descriptionId={descriptionId}
+      />
+    )
+  }
+  {
+    variant === 'home' && (
+      <HomeNewsletter
+        title={title}
+        description={description}
+        placeholder={placeholder}
+        buttonText={buttonText}
+        titleId={titleId}
+        descriptionId={descriptionId}
+      />
+    )
+  }
+  {
+    variant === 'page' && (
+      <PageNewsletter
+        title={title}
+        description={description}
+        placeholder={placeholder}
+        buttonText={buttonText}
+        titleId={titleId}
+        descriptionId={descriptionId}
+      />
+    )
+  }
 </newsletter-form>
 
 <script>
diff --git a/src/components/CallToAction/Newsletter/layouts/article.astro b/src/components/CallToAction/Newsletter/layouts/article.astro
index 3bf15c4a4..cb536a477 100644
--- a/src/components/CallToAction/Newsletter/layouts/article.astro
+++ b/src/components/CallToAction/Newsletter/layouts/article.astro
@@ -43,7 +43,9 @@ const {
 
       <form id="newsletter-form" class="space-y-4">
         <div class="flex flex-col md:flex-row gap-3 pt-4">
-          <div class="relative flex items-center gap-2 flex-1 after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-within:after:-inset-1 focus-within:after:border-spotlight">
+          <div
+            class="relative flex items-center gap-2 flex-1 after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-within:after:-inset-1 focus-within:after:border-spotlight"
+          >
             <span class="text-success">$</span>
             <label id="newsletter-email-label" for="newsletter-email" class="sr-only">
               Email address
@@ -68,12 +70,7 @@ const {
               class="relative px-6 py-2 bg-primary hover:bg-primary-offset text-page-base font-semibold rounded text-sm transition-colors whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-1 focus-visible:after:border-spotlight"
             >
               <span id="button-text">{buttonText}</span>
-              <Icon
-                icon="exit-right-thin"
-                size={4}
-                classes="inline-block ml-2"
-                id="button-arrow"
-              />
+              <Icon icon="exit-right-thin" size={4} classes="inline-block ml-2" id="button-arrow" />
               <Icon
                 icon="spinner"
                 size={4}
diff --git a/src/components/CallToAction/Newsletter/layouts/home.astro b/src/components/CallToAction/Newsletter/layouts/home.astro
index cbb4a4c63..4699d4bb9 100644
--- a/src/components/CallToAction/Newsletter/layouts/home.astro
+++ b/src/components/CallToAction/Newsletter/layouts/home.astro
@@ -25,7 +25,9 @@ const {
 ---
 
 <div class="container mx-auto md:px-4 sm:px-6 lg:px-8">
-  <div class="relative overflow-hidden bg-page-offset border border-trim rounded-2xl shadow-lg group">
+  <div
+    class="relative overflow-hidden bg-page-offset border border-trim rounded-2xl shadow-lg group"
+  >
     <div class="absolute inset-0 opacity-5 pointer-events-none">
       {/** SVG inlined, provides background pattern for component */}
       <svg class="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
@@ -36,21 +38,28 @@ const {
               stroke="currentColor"
               stroke-width="2"
               fill="none"
-              class="text-primary"
-            />
+              class="text-primary"></path>
           </pattern>
         </defs>
-        <rect width="100%" height="100%" fill="url(#grid-pattern)" />
+        <rect width="100%" height="100%" fill="url(#grid-pattern)"></rect>
       </svg>
     </div>
 
-    <div class="absolute -top-24 -right-24 w-64 h-64 bg-primary/10 rounded-full blur-3xl pointer-events-none"></div>
+    <div
+      class="absolute -top-24 -right-24 w-64 h-64 bg-primary/10 rounded-full blur-3xl pointer-events-none"
+    >
+    </div>
 
-    <div class="absolute inset-0 bg-linear-to-r from-page-offset/95 via-page-offset/60 to-transparent pointer-events-none"></div>
+    <div
+      class="absolute inset-0 bg-linear-to-r from-page-offset/95 via-page-offset/60 to-transparent pointer-events-none"
+    >
+    </div>
 
     <div class="relative p-8 md:p-10 flex flex-col lg:flex-row gap-10 items-center">
       <div class="lg:flex-1 flex gap-6 md:gap-8">
-        <div class="hidden sm:flex w-40 md:w-48 aspect-square rounded-xl items-center justify-center shrink-0 relative overflow-hidden">
+        <div
+          class="hidden sm:flex w-40 md:w-48 aspect-square rounded-xl items-center justify-center shrink-0 relative overflow-hidden"
+        >
           <Image
             src={newsletterSignupImage}
             alt="Newsletter signup preview"
@@ -68,7 +77,10 @@ const {
                 Monthly Dispatch
               </span>
             </div>
-            <h2 id={titleId} class="text-2xl md:text-3xl font-black text-content leading-tight drop-shadow-sm">
+            <h2
+              id={titleId}
+              class="text-2xl md:text-3xl font-black text-content leading-tight drop-shadow-sm"
+            >
               {title}
             </h2>
             <p id={descriptionId} class="text-base font-medium text-content-offset mt-2 max-w-lg">
@@ -98,7 +110,9 @@ const {
       </div>
 
       <div class="lg:w-80 w-full shrink-0">
-        <div class="bg-page-base p-6 rounded-xl border border-trim shadow-sm hover:shadow-md transition-shadow duration-300 relative group/form">
+        <div
+          class="bg-page-base p-6 rounded-xl border border-trim shadow-sm hover:shadow-md transition-shadow duration-300 relative group/form"
+        >
           <div class="absolute -top-3 -right-3">
             <span class="relative flex h-6 w-6">
               <span
@@ -113,7 +127,9 @@ const {
           </div>
 
           <form id="newsletter-form" class="space-y-4">
-            <div class="relative space-y-1 after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-within:after:-inset-1 focus-within:after:border-spotlight">
+            <div
+              class="relative space-y-1 after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-within:after:-inset-1 focus-within:after:border-spotlight"
+            >
               <label
                 id="newsletter-email-label"
                 for="newsletter-email"
@@ -147,12 +163,7 @@ const {
                   classes="transition-transform group-hover/form:translate-x-1"
                   id="button-arrow"
                 />
-                <Icon
-                  icon="spinner"
-                  size={4}
-                  classes="hidden animate-spin"
-                  id="button-spinner"
-                />
+                <Icon icon="spinner" size={4} classes="hidden animate-spin" id="button-spinner" />
               </button>
             </Confetti>
 
diff --git a/src/components/CallToAction/Newsletter/layouts/page.astro b/src/components/CallToAction/Newsletter/layouts/page.astro
index 01d08a8da..60eb5a757 100644
--- a/src/components/CallToAction/Newsletter/layouts/page.astro
+++ b/src/components/CallToAction/Newsletter/layouts/page.astro
@@ -56,7 +56,9 @@ const {
         >
           Work Email
         </label>
-        <div class="relative after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-within:after:-inset-1 focus-within:after:border-spotlight">
+        <div
+          class="relative after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-within:after:-inset-1 focus-within:after:border-spotlight"
+        >
           <input
             type="email"
             id="newsletter-email"
@@ -78,18 +80,8 @@ const {
           class="relative w-full px-6 py-3 bg-content text-page-base font-bold rounded-lg text-sm transition-all transform hover:-translate-y-0.5 hover:shadow-lg flex items-center justify-center gap-2 hover:bg-primary disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0 focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-1 focus-visible:after:border-spotlight"
         >
           <span id="button-text">{buttonText}</span>
-          <Icon
-            icon="exit-right-thin"
-            size={4}
-            classes="transition-transform"
-            id="button-arrow"
-          />
-          <Icon
-            icon="spinner"
-            size={4}
-            classes="hidden animate-spin"
-            id="button-spinner"
-          />
+          <Icon icon="exit-right-thin" size={4} classes="transition-transform" id="button-arrow" />
+          <Icon icon="spinner" size={4} classes="hidden animate-spin" id="button-spinner" />
         </button>
       </Confetti>
 
diff --git a/src/components/Callout/index.astro b/src/components/Callout/index.astro
index 7bc255ee1..2fb65fab3 100644
--- a/src/components/Callout/index.astro
+++ b/src/components/Callout/index.astro
@@ -94,23 +94,11 @@ const iconColor = accentTextClasses.startsWith('text-') ? accentTextClasses.slic
   role="note"
 >
   <div class="callout__header flex items-center gap-2">
-    <div
-      class:list={[
-        accentTextClasses,
-        'callout__icon',
-        '-translate-y-0.5',
-      ]}
-    >
+    <div class:list={[accentTextClasses, 'callout__icon', '-translate-y-0.5']}>
       <Icon icon={icon} size={5} color={iconColor} />
     </div>
     <div
-      class:list={[
-        accentTextClasses,
-        'text-base',
-        'font-bold',
-        'tracking-[0.08em]',
-        'uppercase',
-      ]}
+      class:list={[accentTextClasses, 'text-base', 'font-bold', 'tracking-[0.08em]', 'uppercase']}
       aria-hidden="true"
     >
       {typeLabelUpper}
diff --git a/src/components/Carousel/@types/index.ts b/src/components/Carousel/@types/index.ts
index e68985d78..e8e2cc31b 100644
--- a/src/components/Carousel/@types/index.ts
+++ b/src/components/Carousel/@types/index.ts
@@ -55,5 +55,6 @@ export type CarouselProps =
       items: UnknownCarouselItem[]
     })
 
-export type ItemType<T extends CollectionSlug = CollectionSlug> =
-  T extends KnownCollectionSlug ? CollectionEntryMap[T] : UnknownCarouselItem
+export type ItemType<T extends CollectionSlug = CollectionSlug> = T extends KnownCollectionSlug
+  ? CollectionEntryMap[T]
+  : UnknownCarouselItem
diff --git a/src/components/Carousel/index.astro b/src/components/Carousel/index.astro
index 8be786a1a..51103c898 100644
--- a/src/components/Carousel/index.astro
+++ b/src/components/Carousel/index.astro
@@ -68,7 +68,8 @@ const {
   showEmblaDots = true,
 } = props
 
-const isKnownCollectionSlug = (slug: Props['type']): slug is KnownCollectionSlug => slug !== 'unknown'
+const isKnownCollectionSlug = (slug: Props['type']): slug is KnownCollectionSlug =>
+  slug !== 'unknown'
 
 const allItems: ItemType[] = itemsOverride
   ? itemsOverride
@@ -98,7 +99,10 @@ const carouselRegionRole = carouselRegionLabelledBy ? 'region' : undefined
           <header class="text-center mb-6">
             <h2 id={`${carouselId}-title`} class="font-bold">
               {titleHref ? (
-                <a href={titleHref} class="hover:text-primary transition-colors duration-200 no-underline">
+                <a
+                  href={titleHref}
+                  class="hover:text-primary transition-colors duration-200 no-underline"
+                >
                   {title}
                 </a>
               ) : (
@@ -109,7 +113,11 @@ const carouselRegionRole = carouselRegionLabelledBy ? 'region' : undefined
         )}
 
         {/* Embla Carousel */}
-        <div class="embla relative" role={carouselRegionRole} aria-labelledby={carouselRegionLabelledBy}>
+        <div
+          class="embla relative"
+          role={carouselRegionRole}
+          aria-labelledby={carouselRegionLabelledBy}
+        >
           <div class="embla__viewport overflow-hidden p-4">
             <div class="embla__container flex -ml-4 md:-ml-6">
               {items.map((item: ItemType, index) => (
@@ -146,7 +154,9 @@ const carouselRegionRole = carouselRegionLabelledBy ? 'region' : undefined
                           {item.data.title}
                         </h3>
                         {item.data.description && (
-                          <p class="text-content-offset leading-relaxed text-sm">{item.data.description}</p>
+                          <p class="text-content-offset leading-relaxed text-sm">
+                            {item.data.description}
+                          </p>
                         )}
                         <div class="mt-4 flex items-center text-primary text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity">
                           <span>Learn more</span>
@@ -168,15 +178,15 @@ const carouselRegionRole = carouselRegionLabelledBy ? 'region' : undefined
           <button
             type="button"
             class:list={[
-              "embla__button embla__button--prev",
-              "absolute w-12 h-12 left-0 top-1/2 -translate-y-1/2 -translate-x-4",
-              "bg-content-inverse",
-              "rounded-full border-2 border-trim shadow-lg",
-              "hover:bg-content-inverse-active hover:border-trim-offset",
-              "transition-all duration-300 flex items-center justify-center z-(--z-raised)",
-              "disabled:opacity-30 disabled:cursor-not-allowed",
-              "focus-visible:outline-none focus-visible:after:border-2 focus-visible:after:border-spotlight",
-              "after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-['']"
+              'embla__button embla__button--prev',
+              'absolute w-12 h-12 left-0 top-1/2 -translate-y-1/2 -translate-x-4',
+              'bg-content-inverse',
+              'rounded-full border-2 border-trim shadow-lg',
+              'hover:bg-content-inverse-active hover:border-trim-offset',
+              'transition-all duration-300 flex items-center justify-center z-(--z-raised)',
+              'disabled:opacity-30 disabled:cursor-not-allowed',
+              'focus-visible:outline-none focus-visible:after:border-2 focus-visible:after:border-spotlight',
+              "after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-['']",
             ]}
             aria-label="Previous slide"
             data-carousel-prev
@@ -188,15 +198,15 @@ const carouselRegionRole = carouselRegionLabelledBy ? 'region' : undefined
           <button
             type="button"
             class:list={[
-              "embla__button embla__button--next",
-              "absolute w-12 h-12 right-0 top-1/2 -translate-y-1/2 translate-x-4",
-              "bg-content-inverse",
-              "rounded-full border-2 border-trim shadow-lg",
-              "hover:bg-content-inverse-active hover:border-trim-offset",
-              "transition-all duration-300 flex items-center justify-center z-(--z-raised)",
-              "disabled:opacity-30 disabled:cursor-not-allowed",
-              "focus-visible:outline-none focus-visible:after:border-2 focus-visible:after:border-spotlight",
-              "after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-['']"
+              'embla__button embla__button--next',
+              'absolute w-12 h-12 right-0 top-1/2 -translate-y-1/2 translate-x-4',
+              'bg-content-inverse',
+              'rounded-full border-2 border-trim shadow-lg',
+              'hover:bg-content-inverse-active hover:border-trim-offset',
+              'transition-all duration-300 flex items-center justify-center z-(--z-raised)',
+              'disabled:opacity-30 disabled:cursor-not-allowed',
+              'focus-visible:outline-none focus-visible:after:border-2 focus-visible:after:border-spotlight',
+              "after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-['']",
             ]}
             aria-label="Next slide"
             data-carousel-next
@@ -226,11 +236,7 @@ const carouselRegionRole = carouselRegionLabelledBy ? 'region' : undefined
                   class="relative inline-flex items-center px-6 py-3 bg-content-active text-content-inverse font-semibold rounded-lg hover:bg-content no-underline hover:no-underline transition-all duration-200 focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-0.5 focus-visible:after:border-spotlight"
                 >
                   Read More Articles
-                  <Icon
-                    icon="exit-right-thin"
-                    size={6}
-                    classes="ml-2"
-                  />
+                  <Icon icon="exit-right-thin" size={6} classes="ml-2" />
                 </a>
               </span>
             ) : (
diff --git a/src/components/Carousel/server/__tests__/index.spec.ts b/src/components/Carousel/server/__tests__/index.spec.ts
index 78809a94a..66316313a 100644
--- a/src/components/Carousel/server/__tests__/index.spec.ts
+++ b/src/components/Carousel/server/__tests__/index.spec.ts
@@ -13,9 +13,7 @@ describe('prepareItems', () => {
     const result = prepareItems(createItems(), 'featured', 'article-bravo')
 
     expect(result.map(item => item.id)).toEqual(['article-delta', 'article-alpha'])
-    expect(result.every(item => ('featured' in item.data ? item.data.featured : false))).toBe(
-      true
-    )
+    expect(result.every(item => ('featured' in item.data ? item.data.featured : false))).toBe(true)
     expect(result).toHaveLength(2)
   })
 
diff --git a/src/components/Carousel/server/index.ts b/src/components/Carousel/server/index.ts
index 0754c9d41..8f4559b5c 100644
--- a/src/components/Carousel/server/index.ts
+++ b/src/components/Carousel/server/index.ts
@@ -30,20 +30,14 @@ export const prepareItems = (
           // All collection types now use the consistent "featured" field
           return isFeatured(item)
         })
-        .sort(
-          (a: ItemType, b: ItemType) =>
-            getPublishDateMs(b) - getPublishDateMs(a)
-        )
+        .sort((a: ItemType, b: ItemType) => getPublishDateMs(b) - getPublishDateMs(a))
       break
 
     case 'suggested':
       // Filter out current item and get latest items (suggested mode)
       items = allItems
         .filter((item: ItemType) => (currentSlug ? item.id !== currentSlug : true))
-        .sort(
-          (a: ItemType, b: ItemType) =>
-            getPublishDateMs(b) - getPublishDateMs(a)
-        )
+        .sort((a: ItemType, b: ItemType) => getPublishDateMs(b) - getPublishDateMs(a))
       break
 
     case 'random':
diff --git a/src/components/Code/CodeBlock/client/__fixtures__/codeBlock.fixture.astro b/src/components/Code/CodeBlock/client/__fixtures__/codeBlock.fixture.astro
index 8da6ad6c9..7223e3af0 100644
--- a/src/components/Code/CodeBlock/client/__fixtures__/codeBlock.fixture.astro
+++ b/src/components/Code/CodeBlock/client/__fixtures__/codeBlock.fixture.astro
@@ -6,4 +6,4 @@ import CodeBlockRegister from '@components/Code/CodeBlock/index.astro'
 
 <code-block>
   <pre data-language="typescript"><code>const message = 'hello'</code></pre>
-</code-block>
\ No newline at end of file
+</code-block>
diff --git a/src/components/Code/CodeBlock/client/__tests__/index.spec.ts b/src/components/Code/CodeBlock/client/__tests__/index.spec.ts
index ae08964f0..822cc77fa 100644
--- a/src/components/Code/CodeBlock/client/__tests__/index.spec.ts
+++ b/src/components/Code/CodeBlock/client/__tests__/index.spec.ts
@@ -36,4 +36,4 @@ describe('CodeBlock web component', () => {
       expect(element.dataset['enhanced']).toBe('true')
     })
   })
-})
\ No newline at end of file
+})
diff --git a/src/components/Code/CodeTabs/client/__fixtures__/codeTabs.fixture.astro b/src/components/Code/CodeTabs/client/__fixtures__/codeTabs.fixture.astro
index 1ac4f4169..d1acbd3cc 100644
--- a/src/components/Code/CodeTabs/client/__fixtures__/codeTabs.fixture.astro
+++ b/src/components/Code/CodeTabs/client/__fixtures__/codeTabs.fixture.astro
@@ -11,22 +11,24 @@ const { variant = 'multi' } = Astro.props as Props
 <CodeTabsRegister />
 
 <code-tabs>
-  {variant === 'multi' ? (
-    <>
-      <pre data-code-tabs-tab="A" data-language="javascript">
-        <code>console.log('A')</code>
+  {
+    variant === 'multi' ? (
+      <>
+        <pre data-code-tabs-tab="A" data-language="javascript">
+          <code>console.log('A')</code>
+        </pre>
+        <pre data-code-tabs-tab="B" data-language="typescript">
+          <code>console.log('B')</code>
+        </pre>
+      </>
+    ) : variant === 'excluded' ? (
+      <pre data-language="text">
+        <code>plain text</code>
       </pre>
-      <pre data-code-tabs-tab="B" data-language="typescript">
-        <code>console.log('B')</code>
+    ) : (
+      <pre data-language="typescript">
+        <code>const x: number = 1</code>
       </pre>
-    </>
-  ) : variant === 'excluded' ? (
-    <pre data-language="text">
-      <code>plain text</code>
-    </pre>
-  ) : (
-    <pre data-language="typescript">
-      <code>const x: number = 1</code>
-    </pre>
-  )}
-</code-tabs>
\ No newline at end of file
+    )
+  }
+</code-tabs>
diff --git a/src/components/Code/CodeTabs/client/__tests__/index.spec.ts b/src/components/Code/CodeTabs/client/__tests__/index.spec.ts
index 5c1c8378b..9d7de9d30 100644
--- a/src/components/Code/CodeTabs/client/__tests__/index.spec.ts
+++ b/src/components/Code/CodeTabs/client/__tests__/index.spec.ts
@@ -148,7 +148,10 @@ describe('CodeTabs web component', () => {
       const copyIconButton = Array.from(element.querySelectorAll('button')).find(
         button => button.getAttribute('aria-label') === 'Copy "TypeScript"'
       )
-      expect(copyIconButton, 'CodeTabs should render hover copy button for single-tab label').toBeTruthy()
+      expect(
+        copyIconButton,
+        'CodeTabs should render hover copy button for single-tab label'
+      ).toBeTruthy()
 
       expect(
         singleTabLabel?.className.includes('hover:text-content-active'),
@@ -180,7 +183,10 @@ describe('CodeTabs web component', () => {
   it('does not render tabs for excluded single-language blocks', async () => {
     await renderCodeTabs({ variant: 'excluded' }, ({ element }) => {
       const anyTabButton = element.querySelector('button[data-code-tabs-button]')
-      expect(anyTabButton, 'CodeTabs should not render tab buttons for excluded languages').toBeFalsy()
+      expect(
+        anyTabButton,
+        'CodeTabs should not render tab buttons for excluded languages'
+      ).toBeFalsy()
     })
   })
 })
diff --git a/src/components/Code/CodeTabs/client/index.ts b/src/components/Code/CodeTabs/client/index.ts
index 09ec529dc..5f2a573fd 100644
--- a/src/components/Code/CodeTabs/client/index.ts
+++ b/src/components/Code/CodeTabs/client/index.ts
@@ -109,7 +109,8 @@ export class CodeTabsElement extends LitElement {
       .filter((label): label is string => Boolean(label))
 
     this.isInteractiveTabs = this.codeBlocks.length >= 2
-    const shouldRenderTabs = this.isInteractiveTabs || (this.codeBlocks.length === 1 && labels.length === 1)
+    const shouldRenderTabs =
+      this.isInteractiveTabs || (this.codeBlocks.length === 1 && labels.length === 1)
 
     this.buildUi({ shouldRenderTabs, labels })
 
@@ -211,16 +212,18 @@ export class CodeTabsElement extends LitElement {
     button.setAttribute('aria-label', tooltip)
     button.title = tooltip
 
-    const copySvg = queryCodeTabsIconMarkup({
-      iconBankId: ICON_BANK_ID,
-      iconName: 'copy',
-      root: document,
-    }) ?? ''
-    const checkSvg = queryCodeTabsIconMarkup({
-      iconBankId: ICON_BANK_ID,
-      iconName: 'check',
-      root: document,
-    }) ?? ''
+    const copySvg =
+      queryCodeTabsIconMarkup({
+        iconBankId: ICON_BANK_ID,
+        iconName: 'copy',
+        root: document,
+      }) ?? ''
+    const checkSvg =
+      queryCodeTabsIconMarkup({
+        iconBankId: ICON_BANK_ID,
+        iconName: 'check',
+        root: document,
+      }) ?? ''
 
     button.innerHTML = `
       <span data-code-tabs-copy-icon="copy">${copySvg}</span>
@@ -256,16 +259,18 @@ export class CodeTabsElement extends LitElement {
     btn.setAttribute('aria-label', `Copy "${text}"`)
     btn.title = `Copy "${text}"`
 
-    const copySvg = queryCodeTabsIconMarkup({
-      iconBankId: ICON_BANK_ID,
-      iconName: 'copy',
-      root: document,
-    }) ?? ''
-    const checkSvg = queryCodeTabsIconMarkup({
-      iconBankId: ICON_BANK_ID,
-      iconName: 'check',
-      root: document,
-    }) ?? ''
+    const copySvg =
+      queryCodeTabsIconMarkup({
+        iconBankId: ICON_BANK_ID,
+        iconName: 'copy',
+        root: document,
+      }) ?? ''
+    const checkSvg =
+      queryCodeTabsIconMarkup({
+        iconBankId: ICON_BANK_ID,
+        iconName: 'check',
+        root: document,
+      }) ?? ''
 
     btn.innerHTML = `
       <span data-title-copy-icon="copy">${copySvg}</span>
@@ -278,10 +283,14 @@ export class CodeTabsElement extends LitElement {
       svg.classList.add('w-3.5', 'h-3.5')
     })
 
-    addButtonEventListeners(btn, (e) => {
-      e.stopPropagation()
-      void this.copyTitleText(btn, text)
-    }, this)
+    addButtonEventListeners(
+      btn,
+      e => {
+        e.stopPropagation()
+        void this.copyTitleText(btn, text)
+      },
+      this
+    )
 
     return btn
   }
diff --git a/src/components/Code/CodeTabs/client/selectors.ts b/src/components/Code/CodeTabs/client/selectors.ts
index 184499468..0410834cd 100644
--- a/src/components/Code/CodeTabs/client/selectors.ts
+++ b/src/components/Code/CodeTabs/client/selectors.ts
@@ -1,4 +1,9 @@
-import { isCodeElement, isDivElement, isPreElement, isSpanElement } from '@components/scripts/assertions/elements'
+import {
+  isCodeElement,
+  isDivElement,
+  isPreElement,
+  isSpanElement,
+} from '@components/scripts/assertions/elements'
 
 const SELECTORS = {
   preBlocks: ':scope > pre',
diff --git a/src/components/Consent/Banner/client/__tests__/index.spec.ts b/src/components/Consent/Banner/client/__tests__/index.spec.ts
index b0d1c23fd..d621d7089 100644
--- a/src/components/Consent/Banner/client/__tests__/index.spec.ts
+++ b/src/components/Consent/Banner/client/__tests__/index.spec.ts
@@ -185,7 +185,9 @@ describe('ConsentBannerElement', () => {
       const navigateSpy = vi.spyOn(bannerCtor, 'navigateToUrl').mockImplementation(() => {})
 
       try {
-        customizeLink!.dispatchEvent(new window.MouseEvent('click', { bubbles: true, cancelable: true }))
+        customizeLink!.dispatchEvent(
+          new window.MouseEvent('click', { bubbles: true, cancelable: true })
+        )
 
         expect(navigateSpy).toHaveBeenCalledTimes(1)
         expect(navigateSpy).toHaveBeenCalledWith(expect.stringContaining('/consent'))
diff --git a/src/components/Consent/Banner/index.astro b/src/components/Consent/Banner/index.astro
index ca55a9b73..295558811 100644
--- a/src/components/Consent/Banner/index.astro
+++ b/src/components/Consent/Banner/index.astro
@@ -71,9 +71,12 @@ import CookieSvg from '@assets/images/site/cookie.svg'
             id="consent-modal__content"
             class="text-center text-sm md:text-left md:text-base order-1 md:order-2"
           >
-            This site stores data to improve your experience. Learn more in our <a href="/consent" class="inline-flex min-h-6 items-center align-middle"
-              >Consent Policy</a
-            > and <a href="/privacy" class="inline-flex min-h-6 items-center align-middle">Privacy Policy</a>.
+            This site stores data to improve your experience. Learn more in our <a
+              href="/consent"
+              class="inline-flex min-h-6 items-center align-middle">Consent Policy</a
+            > and <a href="/privacy" class="inline-flex min-h-6 items-center align-middle"
+              >Privacy Policy</a
+            >.
           </p>
         </div>
       </div>
diff --git a/src/components/Consent/Checkbox/index.astro b/src/components/Consent/Checkbox/index.astro
index 7af66f1b9..cf8e55732 100644
--- a/src/components/Consent/Checkbox/index.astro
+++ b/src/components/Consent/Checkbox/index.astro
@@ -39,46 +39,54 @@ const optionalProps = {
 ---
 
 <consent-checkbox data-purpose={purpose} data-form-id={formId ?? undefined}>
-  {variant === 'newsletter-cta-article' && (
-    <NewsletterCtaArticleCheckbox
-      purpose={purpose}
-      privacyPolicyUrl={privacyPolicyUrl}
-      cookiePolicyUrl={cookiePolicyUrl}
-      name={name}
-      id={id}
-      {...optionalProps}
-    />
-  )}
-  {variant === 'newsletter-cta-home' && (
-    <NewsletterCtaHomeCheckbox
-      purpose={purpose}
-      privacyPolicyUrl={privacyPolicyUrl}
-      cookiePolicyUrl={cookiePolicyUrl}
-      name={name}
-      id={id}
-      {...optionalProps}
-    />
-  )}
-  {variant === 'default' && (
-    <DefaultCheckbox
-      purpose={purpose}
-      privacyPolicyUrl={privacyPolicyUrl}
-      cookiePolicyUrl={cookiePolicyUrl}
-      name={name}
-      id={id}
-      {...optionalProps}
-    />
-  )}
-  {variant === 'download' && (
-    <DownloadCheckbox
-      purpose={purpose}
-      privacyPolicyUrl={privacyPolicyUrl}
-      cookiePolicyUrl={cookiePolicyUrl}
-      name={name}
-      id={id}
-      {...optionalProps}
-    />
-  )}
+  {
+    variant === 'newsletter-cta-article' && (
+      <NewsletterCtaArticleCheckbox
+        purpose={purpose}
+        privacyPolicyUrl={privacyPolicyUrl}
+        cookiePolicyUrl={cookiePolicyUrl}
+        name={name}
+        id={id}
+        {...optionalProps}
+      />
+    )
+  }
+  {
+    variant === 'newsletter-cta-home' && (
+      <NewsletterCtaHomeCheckbox
+        purpose={purpose}
+        privacyPolicyUrl={privacyPolicyUrl}
+        cookiePolicyUrl={cookiePolicyUrl}
+        name={name}
+        id={id}
+        {...optionalProps}
+      />
+    )
+  }
+  {
+    variant === 'default' && (
+      <DefaultCheckbox
+        purpose={purpose}
+        privacyPolicyUrl={privacyPolicyUrl}
+        cookiePolicyUrl={cookiePolicyUrl}
+        name={name}
+        id={id}
+        {...optionalProps}
+      />
+    )
+  }
+  {
+    variant === 'download' && (
+      <DownloadCheckbox
+        purpose={purpose}
+        privacyPolicyUrl={privacyPolicyUrl}
+        cookiePolicyUrl={cookiePolicyUrl}
+        name={name}
+        id={id}
+        {...optionalProps}
+      />
+    )
+  }
 </consent-checkbox>
 
 <script>
diff --git a/src/components/Consent/Checkbox/layouts/default.astro b/src/components/Consent/Checkbox/layouts/default.astro
index 3b58af5b3..97c238d18 100644
--- a/src/components/Consent/Checkbox/layouts/default.astro
+++ b/src/components/Consent/Checkbox/layouts/default.astro
@@ -7,15 +7,7 @@ import type { ConsentCheckboxProps } from '@components/Consent/Checkbox/@types'
 
 export type Props = Omit<ConsentCheckboxProps, 'variant'>
 
-const {
-  purpose,
-  customText,
-  privacyPolicyUrl,
-  cookiePolicyUrl,
-  name,
-  id,
-  formId,
-} = Astro.props
+const { purpose, customText, privacyPolicyUrl, cookiePolicyUrl, name, id, formId } = Astro.props
 ---
 
 <div
diff --git a/src/components/Consent/Checkbox/layouts/download.astro b/src/components/Consent/Checkbox/layouts/download.astro
index a40d0fbdc..7f6522e5f 100644
--- a/src/components/Consent/Checkbox/layouts/download.astro
+++ b/src/components/Consent/Checkbox/layouts/download.astro
@@ -7,14 +7,7 @@ import type { ConsentCheckboxProps } from '@components/Consent/Checkbox/@types'
 
 export type Props = Omit<ConsentCheckboxProps, 'variant'>
 
-const {
-  purpose,
-  privacyPolicyUrl,
-  cookiePolicyUrl,
-  name,
-  id,
-  formId,
-} = Astro.props
+const { purpose, privacyPolicyUrl, cookiePolicyUrl, name, id, formId } = Astro.props
 ---
 
 <div
diff --git a/src/components/Consent/Checkbox/layouts/newsletter-cta-article.astro b/src/components/Consent/Checkbox/layouts/newsletter-cta-article.astro
index 1de1e4443..73e08e13c 100644
--- a/src/components/Consent/Checkbox/layouts/newsletter-cta-article.astro
+++ b/src/components/Consent/Checkbox/layouts/newsletter-cta-article.astro
@@ -7,14 +7,7 @@ import type { ConsentCheckboxProps } from '@components/Consent/Checkbox/@types'
 
 export type Props = Omit<ConsentCheckboxProps, 'variant'>
 
-const {
-  purpose,
-  privacyPolicyUrl,
-  cookiePolicyUrl,
-  name,
-  id,
-  formId,
-} = Astro.props
+const { purpose, privacyPolicyUrl, cookiePolicyUrl, name, id, formId } = Astro.props
 ---
 
 <div
@@ -39,15 +32,16 @@ const {
     <span id={`${id}-label`} class="sr-only">Consent to data processing</span>
     <span id={`${id}-description`} class="text-[10px] text-content-offset leading-tight">
       <span class="text-xs text-page-base/60 leading-relaxed">
-        --consent "I agree to data processing"
-        --<a
+        --consent "I agree to data processing" --<a
           href={privacyPolicyUrl}
           class="relative text-page-base/60 underline decoration-dotted decoration-current hover:text-(--color-page-base) transition-colors focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-1 focus-visible:after:border-spotlight"
-        >privacy</a>
+          >privacy</a
+        >
         --<a
           href={cookiePolicyUrl}
           class="relative text-page-base/60 underline decoration-dotted decoration-current hover:text-(--color-page-base) transition-colors focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-1 focus-visible:after:border-spotlight"
-        >cookies</a>
+          >cookies</a
+        >
       </span>
     </span>
   </label>
diff --git a/src/components/Consent/Checkbox/layouts/newsletter-cta-home.astro b/src/components/Consent/Checkbox/layouts/newsletter-cta-home.astro
index 679728c17..f53324791 100644
--- a/src/components/Consent/Checkbox/layouts/newsletter-cta-home.astro
+++ b/src/components/Consent/Checkbox/layouts/newsletter-cta-home.astro
@@ -7,14 +7,7 @@ import type { ConsentCheckboxProps } from '@components/Consent/Checkbox/@types'
 
 export type Props = Omit<ConsentCheckboxProps, 'variant'>
 
-const {
-  purpose,
-  privacyPolicyUrl,
-  cookiePolicyUrl,
-  name,
-  id,
-  formId,
-} = Astro.props
+const { purpose, privacyPolicyUrl, cookiePolicyUrl, name, id, formId } = Astro.props
 ---
 
 <div
@@ -60,8 +53,7 @@ const {
         rel="noopener noreferrer"
       >
         Cookie Policy
-      </a>. No spam,
-      just engineering.
+      </a>. No spam, just engineering.
     </span>
   </label>
 
diff --git a/src/components/Content/Layout/index.astro b/src/components/Content/Layout/index.astro
index a5a2d4d24..296f7337c 100644
--- a/src/components/Content/Layout/index.astro
+++ b/src/components/Content/Layout/index.astro
@@ -28,7 +28,6 @@ export type Props = {
 }
 
 const { author, article, path, readingTime, section } = Astro.props
-
 ---
 
 <MarkdownLayout
@@ -96,9 +95,7 @@ const { author, article, path, readingTime, section } = Astro.props
     slot="related-content"
   >
     <header class="mb-8">
-      <h2 class="text-2xl font-bold" id="article-related-title">
-        Other things I've written
-      </h2>
+      <h2 class="text-2xl font-bold" id="article-related-title">Other things I've written</h2>
     </header>
     <Carousel
       title=""
diff --git a/src/components/Content/ProgressBar/client/index.ts b/src/components/Content/ProgressBar/client/index.ts
index d6c0433b7..b608eb736 100644
--- a/src/components/Content/ProgressBar/client/index.ts
+++ b/src/components/Content/ProgressBar/client/index.ts
@@ -121,7 +121,7 @@ export class ReadingProgressBar extends LitElement {
 }
 
 export const registerProgressBarComponent = async (
-  tagName = ReadingProgressBar.registeredName,
+  tagName = ReadingProgressBar.registeredName
 ): Promise<void> => {
   defineCustomElement(tagName, ReadingProgressBar)
 }
diff --git a/src/components/Content/Switcher/client/__tests__/index.spec.ts b/src/components/Content/Switcher/client/__tests__/index.spec.ts
index 183d5c7aa..3a2af4c03 100644
--- a/src/components/Content/Switcher/client/__tests__/index.spec.ts
+++ b/src/components/Content/Switcher/client/__tests__/index.spec.ts
@@ -10,108 +10,112 @@ import { executeRender } from '@test/unit/helpers/litRuntime'
 type SwitcherModule = WebComponentModule<ContentSwitcherElement>
 
 describe('ContentSwitcherElement', () => {
-	let container: AstroContainer
+  let container: AstroContainer
 
-	beforeEach(async () => {
-		container = await AstroContainer.create()
-	})
+  beforeEach(async () => {
+    container = await AstroContainer.create()
+  })
 
-	const runComponentRender = async (
-		args: Parameters<AstroContainer['renderToString']>[1],
-		assertion: (_context: { element: ContentSwitcherElement }) => Promise<void> | void,
-	): Promise<void> => {
-		await executeRender<SwitcherModule>({
-			container,
-			component: SwitcherAstro,
-			moduleSpecifier: '@components/Content/Switcher/client/index',
-			args,
-			waitForReady: async (element: ContentSwitcherElement) => {
-				await element.updateComplete
-			},
-			assert: async ({ element, module, renderResult }) => {
-				expect(renderResult).toContain(`<${module.registeredName}`)
-				await assertion({ element })
-			},
-		})
-	}
+  const runComponentRender = async (
+    args: Parameters<AstroContainer['renderToString']>[1],
+    assertion: (_context: { element: ContentSwitcherElement }) => Promise<void> | void
+  ): Promise<void> => {
+    await executeRender<SwitcherModule>({
+      container,
+      component: SwitcherAstro,
+      moduleSpecifier: '@components/Content/Switcher/client/index',
+      args,
+      waitForReady: async (element: ContentSwitcherElement) => {
+        await element.updateComplete
+      },
+      assert: async ({ element, module, renderResult }) => {
+        expect(renderResult).toContain(`<${module.registeredName}`)
+        await assertion({ element })
+      },
+    })
+  }
 
-	test('renders overview state links with deep-dive toggle target', async () => {
-		await runComponentRender(
-			{
-				props: {
-					currentVariant: 'overview',
-					slug: 'my-article',
-				},
-			},
-			async ({ element }) => {
-				const overviewLink = element.querySelector('#overview-label') as HTMLAnchorElement | null
-				const deepDiveLink = element.querySelector('#deep-dive-label') as HTMLAnchorElement | null
-				const switchLink = element.querySelector('[data-switcher-toggle]') as HTMLAnchorElement | null
+  test('renders overview state links with deep-dive toggle target', async () => {
+    await runComponentRender(
+      {
+        props: {
+          currentVariant: 'overview',
+          slug: 'my-article',
+        },
+      },
+      async ({ element }) => {
+        const overviewLink = element.querySelector('#overview-label') as HTMLAnchorElement | null
+        const deepDiveLink = element.querySelector('#deep-dive-label') as HTMLAnchorElement | null
+        const switchLink = element.querySelector(
+          '[data-switcher-toggle]'
+        ) as HTMLAnchorElement | null
 
-				expect(overviewLink?.getAttribute('href')).toBe('/articles/my-article')
-				expect(deepDiveLink?.getAttribute('href')).toBe('/deep-dive/my-article')
-				expect(switchLink?.getAttribute('href')).toBe('/deep-dive/my-article')
-				expect(switchLink?.getAttribute('aria-checked')).toBe('false')
-			},
-		)
-	})
+        expect(overviewLink?.getAttribute('href')).toBe('/articles/my-article')
+        expect(deepDiveLink?.getAttribute('href')).toBe('/deep-dive/my-article')
+        expect(switchLink?.getAttribute('href')).toBe('/deep-dive/my-article')
+        expect(switchLink?.getAttribute('aria-checked')).toBe('false')
+      }
+    )
+  })
 
-	test('renders deep-dive state with overview toggle target', async () => {
-		await runComponentRender(
-			{
-				props: {
-					currentVariant: 'deep-dive',
-					slug: 'my-article',
-				},
-			},
-			async ({ element }) => {
-				const overviewLink = element.querySelector('#overview-label') as HTMLAnchorElement | null
-				const deepDiveLink = element.querySelector('#deep-dive-label') as HTMLAnchorElement | null
-				const switchLink = element.querySelector('[data-switcher-toggle]') as HTMLAnchorElement | null
+  test('renders deep-dive state with overview toggle target', async () => {
+    await runComponentRender(
+      {
+        props: {
+          currentVariant: 'deep-dive',
+          slug: 'my-article',
+        },
+      },
+      async ({ element }) => {
+        const overviewLink = element.querySelector('#overview-label') as HTMLAnchorElement | null
+        const deepDiveLink = element.querySelector('#deep-dive-label') as HTMLAnchorElement | null
+        const switchLink = element.querySelector(
+          '[data-switcher-toggle]'
+        ) as HTMLAnchorElement | null
 
-				expect(overviewLink?.getAttribute('href')).toBe('/articles/my-article')
-				expect(deepDiveLink?.getAttribute('href')).toBe('/deep-dive/my-article')
-				expect(switchLink?.getAttribute('href')).toBe('/articles/my-article')
-				expect(switchLink?.getAttribute('aria-checked')).toBe('true')
-			},
-		)
-	})
+        expect(overviewLink?.getAttribute('href')).toBe('/articles/my-article')
+        expect(deepDiveLink?.getAttribute('href')).toBe('/deep-dive/my-article')
+        expect(switchLink?.getAttribute('href')).toBe('/articles/my-article')
+        expect(switchLink?.getAttribute('aria-checked')).toBe('true')
+      }
+    )
+  })
 
-	test('normalizes slugs with leading and trailing slashes', async () => {
-		await runComponentRender(
-			{
-				props: {
-					currentVariant: 'overview',
-					slug: '/nested/path/',
-				},
-			},
-			async ({ element }) => {
-				const overviewLink = element.querySelector('#overview-label') as HTMLAnchorElement | null
-				const deepDiveLink = element.querySelector('#deep-dive-label') as HTMLAnchorElement | null
+  test('normalizes slugs with leading and trailing slashes', async () => {
+    await runComponentRender(
+      {
+        props: {
+          currentVariant: 'overview',
+          slug: '/nested/path/',
+        },
+      },
+      async ({ element }) => {
+        const overviewLink = element.querySelector('#overview-label') as HTMLAnchorElement | null
+        const deepDiveLink = element.querySelector('#deep-dive-label') as HTMLAnchorElement | null
 
-				expect(overviewLink?.getAttribute('href')).toBe('/articles/nested/path')
-				expect(deepDiveLink?.getAttribute('href')).toBe('/deep-dive/nested/path')
-			},
-		)
-	})
+        expect(overviewLink?.getAttribute('href')).toBe('/articles/nested/path')
+        expect(deepDiveLink?.getAttribute('href')).toBe('/deep-dive/nested/path')
+      }
+    )
+  })
 
-	test('prefetches the alternate variant href on idle', async () => {
-		await runComponentRender(
-			{
-				props: {
-					currentVariant: 'overview',
-					slug: 'my-article',
-				},
-			},
-			async () => {
-				await new Promise(resolve => setTimeout(resolve, 200))
+  test('prefetches the alternate variant href on idle', async () => {
+    await runComponentRender(
+      {
+        props: {
+          currentVariant: 'overview',
+          slug: 'my-article',
+        },
+      },
+      async () => {
+        await new Promise(resolve => setTimeout(resolve, 200))
 
-				const prefetchLink = document.head.querySelector(
-					'link[rel="prefetch"][href="/deep-dive/my-article"]',
-				) as HTMLLinkElement | null
+        const prefetchLink = document.head.querySelector(
+          'link[rel="prefetch"][href="/deep-dive/my-article"]'
+        ) as HTMLLinkElement | null
 
-				expect(prefetchLink).toBeTruthy()
-			},
-		)
-	})
+        expect(prefetchLink).toBeTruthy()
+      }
+    )
+  })
 })
diff --git a/src/components/Content/Switcher/client/index.ts b/src/components/Content/Switcher/client/index.ts
index bf3b0c43a..8ca1074dd 100644
--- a/src/components/Content/Switcher/client/index.ts
+++ b/src/components/Content/Switcher/client/index.ts
@@ -10,156 +10,168 @@ const prefetchedHrefs = new Set<string>()
 const normalizeSlug = (slug: string): string => slug.replace(/^\/+|\/+$/g, '')
 
 const queueIdlePrefetch = (work: () => void): void => {
-	if (typeof window === 'undefined') {
-		return
-	}
-
-	let hasRun = false
-	const runOnce = () => {
-		if (hasRun) {
-			return
-		}
-
-		hasRun = true
-		work()
-	}
-
-	if (typeof window.requestIdleCallback === 'function') {
-		window.requestIdleCallback(() => runOnce())
-		window.setTimeout(runOnce, 150)
-		return
-	}
-
-	window.setTimeout(runOnce, 150)
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  let hasRun = false
+  const runOnce = () => {
+    if (hasRun) {
+      return
+    }
+
+    hasRun = true
+    work()
+  }
+
+  if (typeof window.requestIdleCallback === 'function') {
+    window.requestIdleCallback(() => runOnce())
+    window.setTimeout(runOnce, 150)
+    return
+  }
+
+  window.setTimeout(runOnce, 150)
 }
 
 const prefetchDocument = (href: string): void => {
-	if (typeof document === 'undefined' || typeof window === 'undefined' || !href) {
-		return
-	}
-
-	if (prefetchedHrefs.has(href)) {
-		return
-	}
-
-	prefetchedHrefs.add(href)
-
-	const existingLink = queryPrefetchLink(document.head, href)
-	if (!existingLink) {
-		const link = document.createElement('link')
-		link.rel = 'prefetch'
-		link.href = href
-		document.head.append(link)
-	}
-
-	if (typeof window.fetch === 'function') {
-		void window.fetch(href, {
-			credentials: 'same-origin',
-		}).catch(() => {
-			/* Best-effort warmup only. */
-		})
-	}
-	}
+  if (typeof document === 'undefined' || typeof window === 'undefined' || !href) {
+    return
+  }
+
+  if (prefetchedHrefs.has(href)) {
+    return
+  }
+
+  prefetchedHrefs.add(href)
+
+  const existingLink = queryPrefetchLink(document.head, href)
+  if (!existingLink) {
+    const link = document.createElement('link')
+    link.rel = 'prefetch'
+    link.href = href
+    document.head.append(link)
+  }
+
+  if (typeof window.fetch === 'function') {
+    void window
+      .fetch(href, {
+        credentials: 'same-origin',
+      })
+      .catch(() => {
+        /* Best-effort warmup only. */
+      })
+  }
+}
 
 /**
  * Builds a route href for a content variant and slug.
  */
 const buildVariantHref = (variant: ContentVariant, slug: string): string => {
-	const normalizedSlug = normalizeSlug(slug)
+  const normalizedSlug = normalizeSlug(slug)
 
-	if (variant === 'overview') {
-		return normalizedSlug ? `/articles/${normalizedSlug}` : '/articles'
-	}
+  if (variant === 'overview') {
+    return normalizedSlug ? `/articles/${normalizedSlug}` : '/articles'
+  }
 
-	return normalizedSlug ? `/deep-dive/${normalizedSlug}` : '/deep-dive'
+  return normalizedSlug ? `/deep-dive/${normalizedSlug}` : '/deep-dive'
 }
 
 export class ContentSwitcherElement extends LitElement {
-	static registeredName = 'content-switcher'
-
-	static override properties = {
-		currentVariant: { type: String, attribute: 'current-variant' },
-		slug: { type: String },
-	}
-
-	declare currentVariant: ContentVariant
-	declare slug: string
-
-	constructor() {
-		super()
-		this.currentVariant = 'overview'
-		this.slug = ''
-	}
-
-	protected override createRenderRoot() {
-		return this
-	}
-
-	public override connectedCallback(): void {
-		super.connectedCallback()
-		this.prefetchAlternateVariant()
-	}
-
-	protected override updated(changedProperties: Map<string, unknown>): void {
-		if (changedProperties.has('currentVariant') || changedProperties.has('slug')) {
-			this.prefetchAlternateVariant()
-		}
-	}
-
-	private prefetchAlternateVariant(): void {
-		const alternateVariant = this.currentVariant === 'deep-dive' ? 'overview' : 'deep-dive'
-		const href = buildVariantHref(alternateVariant, this.slug)
-
-		queueIdlePrefetch(() => {
-			prefetchDocument(href)
-		})
-	}
-
-	protected override render() {
-		const isDeepDive = this.currentVariant === 'deep-dive'
-		const overviewHref = buildVariantHref('overview', this.slug)
-		const deepDiveHref = buildVariantHref('deep-dive', this.slug)
-		const switchHref = isDeepDive ? overviewHref : deepDiveHref
+  static registeredName = 'content-switcher'
+
+  static override properties = {
+    currentVariant: { type: String, attribute: 'current-variant' },
+    slug: { type: String },
+  }
+
+  declare currentVariant: ContentVariant
+  declare slug: string
+
+  constructor() {
+    super()
+    this.currentVariant = 'overview'
+    this.slug = ''
+  }
+
+  protected override createRenderRoot() {
+    return this
+  }
+
+  public override connectedCallback(): void {
+    super.connectedCallback()
+    this.prefetchAlternateVariant()
+  }
+
+  protected override updated(changedProperties: Map<string, unknown>): void {
+    if (changedProperties.has('currentVariant') || changedProperties.has('slug')) {
+      this.prefetchAlternateVariant()
+    }
+  }
+
+  private prefetchAlternateVariant(): void {
+    const alternateVariant = this.currentVariant === 'deep-dive' ? 'overview' : 'deep-dive'
+    const href = buildVariantHref(alternateVariant, this.slug)
+
+    queueIdlePrefetch(() => {
+      prefetchDocument(href)
+    })
+  }
+
+  protected override render() {
+    const isDeepDive = this.currentVariant === 'deep-dive'
+    const overviewHref = buildVariantHref('overview', this.slug)
+    const deepDiveHref = buildVariantHref('deep-dive', this.slug)
+    const switchHref = isDeepDive ? overviewHref : deepDiveHref
 
     const commonLabelClasses = 'text-xs no-underline hover:no-underline focus-visible:no-underline'
 
-		const overviewLabelClass = isDeepDive
-			? 'content-switcher-label content-switcher-label--overview text-content-offset hover:text-content' + ' ' + commonLabelClasses
-			: 'content-switcher-label content-switcher-label--overview text-page-inverse' + ' ' + commonLabelClasses
-
-		const deepDiveLabelClass = isDeepDive
-			? 'content-switcher-label content-switcher-label--deep-dive text-page-inverse' + ' ' + commonLabelClasses
-			: 'content-switcher-label content-switcher-label--deep-dive text-content-offset hover:text-content' + ' ' + commonLabelClasses
-
-		return html`
-			<div class="flex items-center gap-3" role="radiogroup" aria-label="Content Variant">
-				<a class="${overviewLabelClass}" id="overview-label" href="${overviewHref}">Overview</a>
-
-				<a
-					href="${switchHref}"
-					role="switch"
-					aria-checked="${isDeepDive ? 'true' : 'false'}"
-					aria-label="Toggle between Overview and Deep Dive"
-					class="content-switcher-track group relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-page-inverse transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary"
-					data-switcher-toggle
-				>
-					<span class="content-switcher-thumb pointer-events-none inline-block size-3 -translate-x-1.25 rounded-full bg-page-base shadow-sm ring-0 transition-transform"></span>
-				</a>
-
-				<a class="${deepDiveLabelClass}" id="deep-dive-label" href="${deepDiveHref}">Deep Dive</a>
-			</div>
-		`
-	}
+    const overviewLabelClass = isDeepDive
+      ? 'content-switcher-label content-switcher-label--overview text-content-offset hover:text-content' +
+        ' ' +
+        commonLabelClasses
+      : 'content-switcher-label content-switcher-label--overview text-page-inverse' +
+        ' ' +
+        commonLabelClasses
+
+    const deepDiveLabelClass = isDeepDive
+      ? 'content-switcher-label content-switcher-label--deep-dive text-page-inverse' +
+        ' ' +
+        commonLabelClasses
+      : 'content-switcher-label content-switcher-label--deep-dive text-content-offset hover:text-content' +
+        ' ' +
+        commonLabelClasses
+
+    return html`
+      <div class="flex items-center gap-3" role="radiogroup" aria-label="Content Variant">
+        <a class="${overviewLabelClass}" id="overview-label" href="${overviewHref}">Overview</a>
+
+        <a
+          href="${switchHref}"
+          role="switch"
+          aria-checked="${isDeepDive ? 'true' : 'false'}"
+          aria-label="Toggle between Overview and Deep Dive"
+          class="content-switcher-track group relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-page-inverse transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary"
+          data-switcher-toggle
+        >
+          <span
+            class="content-switcher-thumb pointer-events-none inline-block size-3 -translate-x-1.25 rounded-full bg-page-base shadow-sm ring-0 transition-transform"
+          ></span>
+        </a>
+
+        <a class="${deepDiveLabelClass}" id="deep-dive-label" href="${deepDiveHref}">Deep Dive</a>
+      </div>
+    `
+  }
 }
 
 export const registerWebComponent = async (tagName = ContentSwitcherElement.registeredName) => {
-	defineCustomElement(tagName, ContentSwitcherElement)
+  defineCustomElement(tagName, ContentSwitcherElement)
 }
 
 export const registerContentSwitcherComponent = registerWebComponent
 
 export const webComponentModule: WebComponentModule<ContentSwitcherElement> = {
-	registeredName: ContentSwitcherElement.registeredName,
-	componentCtor: ContentSwitcherElement,
-	registerWebComponent,
+  registeredName: ContentSwitcherElement.registeredName,
+  componentCtor: ContentSwitcherElement,
+  registerWebComponent,
 }
diff --git a/src/components/Content/Switcher/client/selectors.ts b/src/components/Content/Switcher/client/selectors.ts
index a5d2a92bc..aadc79693 100644
--- a/src/components/Content/Switcher/client/selectors.ts
+++ b/src/components/Content/Switcher/client/selectors.ts
@@ -13,4 +13,4 @@ export const queryPrefetchLink = (root: ParentNode, href: string): HTMLLinkEleme
   return isType1Element(candidate) && candidate.tagName === 'LINK'
     ? (candidate as HTMLLinkElement)
     : null
-}
\ No newline at end of file
+}
diff --git a/src/components/Content/Switcher/index.astro b/src/components/Content/Switcher/index.astro
index cb8163239..e183d2299 100644
--- a/src/components/Content/Switcher/index.astro
+++ b/src/components/Content/Switcher/index.astro
@@ -12,11 +12,7 @@ export type Props = {
   slug?: string
 }
 
-const {
-  path,
-  currentVariant: legacyCurrentVariant,
-  slug: legacySlug = '',
-} = Astro.props
+const { path, currentVariant: legacyCurrentVariant, slug: legacySlug = '' } = Astro.props
 
 let currentVariant: 'overview' | 'deep-dive'
 let slug: string
@@ -37,10 +33,7 @@ if (path) {
 }
 ---
 
-<content-switcher
-  class="print:hidden!"
-  current-variant={currentVariant}
-  slug={slug}
+<content-switcher class="print:hidden!" current-variant={currentVariant} slug={slug}
 ></content-switcher>
 
 <script>
diff --git a/src/components/Content/Switcher/server/__tests__/index.spec.ts b/src/components/Content/Switcher/server/__tests__/index.spec.ts
index cf8725340..c3f941328 100644
--- a/src/components/Content/Switcher/server/__tests__/index.spec.ts
+++ b/src/components/Content/Switcher/server/__tests__/index.spec.ts
@@ -3,79 +3,79 @@ import { BuildError } from '@lib/errors/BuildError'
 import { parseContentPath } from '../index'
 
 describe('parseContentPath', () => {
-	it('parses an articles path into currentVariant and slug', () => {
-		expect(parseContentPath('articles/my-article')).toEqual({
-			currentVariant: 'articles',
-			slug: 'my-article',
-		})
-	})
+  it('parses an articles path into currentVariant and slug', () => {
+    expect(parseContentPath('articles/my-article')).toEqual({
+      currentVariant: 'articles',
+      slug: 'my-article',
+    })
+  })
 
-	it('parses a deep-dive path into currentVariant and slug', () => {
-		expect(parseContentPath('deep-dive/web-vitals')).toEqual({
-			currentVariant: 'deep-dive',
-			slug: 'web-vitals',
-		})
-	})
+  it('parses a deep-dive path into currentVariant and slug', () => {
+    expect(parseContentPath('deep-dive/web-vitals')).toEqual({
+      currentVariant: 'deep-dive',
+      slug: 'web-vitals',
+    })
+  })
 
-	it('normalizes leading and trailing slashes', () => {
-		expect(parseContentPath('/articles/my-article/')).toEqual({
-			currentVariant: 'articles',
-			slug: 'my-article',
-		})
-	})
+  it('normalizes leading and trailing slashes', () => {
+    expect(parseContentPath('/articles/my-article/')).toEqual({
+      currentVariant: 'articles',
+      slug: 'my-article',
+    })
+  })
 
-	it('normalizes extra whitespace around path', () => {
-		expect(parseContentPath('  /deep-dive/platform-reliability/  ')).toEqual({
-			currentVariant: 'deep-dive',
-			slug: 'platform-reliability',
-		})
-	})
+  it('normalizes extra whitespace around path', () => {
+    expect(parseContentPath('  /deep-dive/platform-reliability/  ')).toEqual({
+      currentVariant: 'deep-dive',
+      slug: 'platform-reliability',
+    })
+  })
 
-	it('preserves nested slug segments', () => {
-		expect(parseContentPath('articles/category/subcategory/my-article')).toEqual({
-			currentVariant: 'articles',
-			slug: 'category/subcategory/my-article',
-		})
-	})
+  it('preserves nested slug segments', () => {
+    expect(parseContentPath('articles/category/subcategory/my-article')).toEqual({
+      currentVariant: 'articles',
+      slug: 'category/subcategory/my-article',
+    })
+  })
 
-	it('returns an empty slug when only the variant is provided', () => {
-		expect(parseContentPath('articles')).toEqual({
-			currentVariant: 'articles',
-			slug: '',
-		})
-	})
+  it('returns an empty slug when only the variant is provided', () => {
+    expect(parseContentPath('articles')).toEqual({
+      currentVariant: 'articles',
+      slug: '',
+    })
+  })
 
-	it('throws BuildError for unsupported variant', () => {
-		expect(() => parseContentPath('services/my-service')).toThrow(BuildError)
-		expect(() => parseContentPath('services/my-service')).toThrow(
-			'Content/Switcher: invalid path variant.'
-		)
-	})
+  it('throws BuildError for unsupported variant', () => {
+    expect(() => parseContentPath('services/my-service')).toThrow(BuildError)
+    expect(() => parseContentPath('services/my-service')).toThrow(
+      'Content/Switcher: invalid path variant.'
+    )
+  })
 
-	it('throws BuildError for an empty path', () => {
-		const parse = () => parseContentPath('   ')
+  it('throws BuildError for an empty path', () => {
+    const parse = () => parseContentPath('   ')
 
-		expect(parse).toThrow(BuildError)
-		expect(parse).toThrow('Content/Switcher: invalid path variant.')
-	})
+    expect(parse).toThrow(BuildError)
+    expect(parse).toThrow('Content/Switcher: invalid path variant.')
+  })
 
-	it('includes detailed context in the thrown BuildError', () => {
-		try {
-			parseContentPath('/unknown/thing')
-			throw new Error('Expected parseContentPath to throw BuildError')
-		} catch (error) {
-			const typedError = error as BuildError
+  it('includes detailed context in the thrown BuildError', () => {
+    try {
+      parseContentPath('/unknown/thing')
+      throw new Error('Expected parseContentPath to throw BuildError')
+    } catch (error) {
+      const typedError = error as BuildError
 
-			expect(typedError).toBeInstanceOf(BuildError)
-			expect(typedError.phase).toBe('compilation')
-			expect(typedError.tool).toBe('content-switcher')
-			expect(typedError.filePath).toBe('src/components/Content/Switcher/server/index.ts')
-			expect(typedError.cause).toEqual({
-				providedPath: '/unknown/thing',
-				normalizedPath: 'unknown/thing',
-				receivedVariant: 'unknown',
-				expectedVariants: ['articles', 'deep-dive'],
-			})
-		}
-	})
+      expect(typedError).toBeInstanceOf(BuildError)
+      expect(typedError.phase).toBe('compilation')
+      expect(typedError.tool).toBe('content-switcher')
+      expect(typedError.filePath).toBe('src/components/Content/Switcher/server/index.ts')
+      expect(typedError.cause).toEqual({
+        providedPath: '/unknown/thing',
+        normalizedPath: 'unknown/thing',
+        receivedVariant: 'unknown',
+        expectedVariants: ['articles', 'deep-dive'],
+      })
+    }
+  })
 })
diff --git a/src/components/Content/Switcher/server/index.ts b/src/components/Content/Switcher/server/index.ts
index 2d47f76fc..8528267e3 100644
--- a/src/components/Content/Switcher/server/index.ts
+++ b/src/components/Content/Switcher/server/index.ts
@@ -18,11 +18,14 @@ export const parseContentPath = (path: string) => {
       expectedVariants: ['articles', 'deep-dive'],
     }
 
-    throw new BuildError(new Error('Content/Switcher: invalid path variant.', { cause: errorDetails }), {
-      phase: 'compilation',
-      filePath: 'src/components/Content/Switcher/server/index.ts',
-      tool: 'content-switcher',
-    })
+    throw new BuildError(
+      new Error('Content/Switcher: invalid path variant.', { cause: errorDetails }),
+      {
+        phase: 'compilation',
+        filePath: 'src/components/Content/Switcher/server/index.ts',
+        tool: 'content-switcher',
+      }
+    )
   }
 
   return {
diff --git a/src/components/Diagram/index.astro b/src/components/Diagram/index.astro
index 3a99b4798..fb31806c9 100644
--- a/src/components/Diagram/index.astro
+++ b/src/components/Diagram/index.astro
@@ -27,27 +27,26 @@ const hasDefaultSlot = Astro.slots.has('default')
 ---
 
 <figure class="my-6 mx-auto">
-  {src && (
-    <Image
-      src={src}
-      alt={title}
-      variant={imageVariant}
-      {...imageProps}
-    />
-  )}
+  {src && <Image src={src} alt={title} variant={imageVariant} {...imageProps} />}
 
-  {hasDefaultSlot && (
-    <div class="flex justify-center">
-      <slot />
-    </div>
-  )}
+  {
+    hasDefaultSlot && (
+      <div class="flex justify-center">
+        <slot />
+      </div>
+    )
+  }
 
   <figcaption class="mt-3 text-content">
     <details class="m-0 border-0 p-0 not-italic">
-      <summary class="group list-none outline-none focus:outline-none focus-visible:outline-none [anchor-name:unset] [&::marker]:hidden [&::-webkit-details-marker]:hidden [&::before]:content-none [&::before]:border-0 [&::after]:content-none [&::after]:border-0">
+      <summary
+        class="group list-none outline-none focus:outline-none focus-visible:outline-none [anchor-name:unset] [&::marker]:hidden [&::-webkit-details-marker]:hidden [&::before]:content-none [&::before]:border-0 [&::after]:content-none [&::after]:border-0"
+      >
         <div class="flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-base">
           <span>{title}</span>
-          <span class="relative inline-flex shrink-0 items-center rounded-full bg-content px-2 py-1 text-xs leading-none text-content-inverse cursor-pointer select-none transition-colors duration-150 ease-linear group-hover:bg-content-offset group-focus-visible:bg-page-active after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent after:opacity-0 after:transition-opacity after:duration-150 after:ease-out group-focus-visible:after:opacity-100 group-focus-visible:after:-inset-1 group-focus-visible:after:border-spotlight print:hidden!">
+          <span
+            class="relative inline-flex shrink-0 items-center rounded-full bg-content px-2 py-1 text-xs leading-none text-content-inverse cursor-pointer select-none transition-colors duration-150 ease-linear group-hover:bg-content-offset group-focus-visible:bg-page-active after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent after:opacity-0 after:transition-opacity after:duration-150 after:ease-out group-focus-visible:after:opacity-100 group-focus-visible:after:-inset-1 group-focus-visible:after:border-spotlight print:hidden!"
+          >
             description
           </span>
         </div>
diff --git a/src/components/FileExplorer/Print.astro b/src/components/FileExplorer/Print.astro
index 0348f1394..b02eb7c2f 100644
--- a/src/components/FileExplorer/Print.astro
+++ b/src/components/FileExplorer/Print.astro
@@ -11,12 +11,7 @@ export type Props = {
   fullWidth?: boolean
 }
 
-const {
-  data = [],
-  figure,
-  classes = {},
-  fullWidth = true,
-} = Astro.props
+const { data = [], figure, classes = {}, fullWidth = true } = Astro.props
 
 const wrapperClass = [
   'file-explorer-print',
@@ -25,11 +20,15 @@ const wrapperClass = [
   'mx-auto',
   fullWidth ? 'w-full' : 'w-fit max-w-full',
   classes.wrapper,
-].filter(Boolean).join(' ')
+]
+  .filter(Boolean)
+  .join(' ')
 ---
 
 <figure class={wrapperClass}>
-  <div class="file-explorer-print__panel mx-auto max-w-full rounded-lg bg-(--color-page-base) p-6 font-mono text-left">
+  <div
+    class="file-explorer-print__panel mx-auto max-w-full rounded-lg bg-(--color-page-base) p-6 font-mono text-left"
+  >
     <ul class="list-none p-0 m-0 tree-root" aria-label={figure ? undefined : 'File explorer'}>
       {data.map((node, index) => <PrintNode node={node} path={`${index}`} isRoot />)}
     </ul>
@@ -81,4 +80,4 @@ const wrapperClass = [
       break-inside: auto;
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/FileExplorer/PrintNode.astro b/src/components/FileExplorer/PrintNode.astro
index 284db539d..be25e3664 100644
--- a/src/components/FileExplorer/PrintNode.astro
+++ b/src/components/FileExplorer/PrintNode.astro
@@ -20,55 +20,94 @@ const liClasses = isRoot
 <li class={liClasses}>
   <div class="flex items-center">
     <div class="group flex items-center py-1 node">
-      {hasChildren && (
-        <span
-          aria-hidden="true"
-          class="mr-2 inline-flex w-4 shrink-0 items-center justify-center text-(--color-trim)"
-        >
-          <svg
+      {
+        hasChildren && (
+          <span
             aria-hidden="true"
-            focusable="false"
-            class="h-4 w-4 fill-none stroke-current rotate-90"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
+            class="mr-2 inline-flex w-4 shrink-0 items-center justify-center text-(--color-trim)"
           >
-            <path d="M7 5l6 5-6 5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
-          </svg>
-        </span>
-      )}
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              class="h-4 w-4 fill-none stroke-current rotate-90"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M7 5l6 5-6 5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              />
+            </svg>
+          </span>
+        )
+      }
 
-      {isFolder ? (
-        <span aria-hidden="true" class="mr-2 inline-flex items-center text-secondary node-icon folder-icon">
-          <svg aria-hidden="true" focusable="false" class="h-6 w-6 fill-current icon-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" />
-          </svg>
-        </span>
-      ) : (
-        <span aria-hidden="true" class="mr-2 inline-flex items-center text-(--color-content-offset) node-icon file-icon">
-          <svg aria-hidden="true" focusable="false" class="h-6 w-6 fill-current icon-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" />
-          </svg>
-        </span>
-      )}
+      {
+        isFolder ? (
+          <span
+            aria-hidden="true"
+            class="mr-2 inline-flex items-center text-secondary node-icon folder-icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              class="h-6 w-6 fill-current icon-svg"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" />
+            </svg>
+          </span>
+        ) : (
+          <span
+            aria-hidden="true"
+            class="mr-2 inline-flex items-center text-(--color-content-offset) node-icon file-icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              class="h-6 w-6 fill-current icon-svg"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" />
+            </svg>
+          </span>
+        )
+      }
 
-      <span class={`text-(--color-content) node-name ${isFolder ? 'font-medium' : 'font-normal file-name'}`}>
+      <span
+        class={`text-(--color-content) node-name ${isFolder ? 'font-medium' : 'font-normal file-name'}`}
+      >
         {node.name}
       </span>
-      {node.comment && <span class="ml-6 text-(--color-content-offset) italic comment"># {node.comment}</span>}
+      {
+        node.comment && (
+          <span class="ml-6 text-(--color-content-offset) italic comment"># {node.comment}</span>
+        )
+      }
     </div>
 
-    {node.note && (
-      <span class="ml-3 inline-flex items-center rounded-full border border-trim bg-page-base px-2 py-0.5 text-xs font-semibold leading-none text-secondary">
-        i
-      </span>
-    )}
+    {
+      node.note && (
+        <span class="ml-3 inline-flex items-center rounded-full border border-trim bg-page-base px-2 py-0.5 text-xs font-semibold leading-none text-secondary">
+          i
+        </span>
+      )
+    }
   </div>
 
   {node.note && <p class="ml-9 mt-2 note-text leading-relaxed text-content-offset">{node.note}</p>}
 
-  {hasChildren && (
-    <ul class="list-none p-0 m-0 pl-6 border-l border-dashed border-(--color-trim) ml-2 children">
-      {node.children?.map((childNode, index) => <FileExplorerPrintNode node={childNode} path={`${path}/${index}`} />)}
-    </ul>
-  )}
-</li>
\ No newline at end of file
+  {
+    hasChildren && (
+      <ul class="list-none p-0 m-0 pl-6 border-l border-dashed border-(--color-trim) ml-2 children">
+        {node.children?.map((childNode, index) => (
+          <FileExplorerPrintNode node={childNode} path={`${path}/${index}`} />
+        ))}
+      </ul>
+    )
+  }
+</li>
diff --git a/src/components/FileExplorer/client/__tests__/index.spec.ts b/src/components/FileExplorer/client/__tests__/index.spec.ts
index ec3b4645a..c17b4f228 100644
--- a/src/components/FileExplorer/client/__tests__/index.spec.ts
+++ b/src/components/FileExplorer/client/__tests__/index.spec.ts
@@ -29,7 +29,12 @@ describe('FileExplorer class behavior', () => {
       name: 'src',
       note: 'Application source files and test fixtures.',
       children: [
-        { type: 'file', name: 'index.ts', comment: 'Main entry', note: 'Primary FileExplorer implementation.' },
+        {
+          type: 'file',
+          name: 'index.ts',
+          comment: 'Main entry',
+          note: 'Primary FileExplorer implementation.',
+        },
       ],
     },
     { type: 'file', name: 'package.json' },
@@ -88,7 +93,7 @@ describe('FileExplorer class behavior', () => {
 
       const tooltips = root.querySelectorAll('[role="tooltip"]')
       expect(tooltips.length).toBe(2)
-      const tooltipTexts = Array.from(tooltips).map((tooltip) => tooltip.textContent?.trim())
+      const tooltipTexts = Array.from(tooltips).map(tooltip => tooltip.textContent?.trim())
       expect(tooltipTexts).toContain('Application source files and test fixtures.')
       expect(tooltipTexts).toContain('Primary FileExplorer implementation.')
 
diff --git a/src/components/FileExplorer/client/index.ts b/src/components/FileExplorer/client/index.ts
index 325628159..ae5f1aa59 100644
--- a/src/components/FileExplorer/client/index.ts
+++ b/src/components/FileExplorer/client/index.ts
@@ -79,7 +79,10 @@ export class FileExplorerComponent extends LitElement {
     return this.getVisiblePaths().includes(path)
   }
 
-  private getVisiblePaths(nodes: FileSystemNode[] = this.fileSystemData, parentPath = ''): string[] {
+  private getVisiblePaths(
+    nodes: FileSystemNode[] = this.fileSystemData,
+    parentPath = ''
+  ): string[] {
     return nodes.flatMap((node, index) => {
       const path = this.getNodePath(parentPath, index)
       const visiblePaths = [path]
@@ -212,9 +215,20 @@ export class FileExplorerComponent extends LitElement {
 
   private renderFolderIcon(): TemplateResult {
     return html`
-      <span aria-hidden="true" class="mr-2 inline-flex items-center text-secondary transition-colors group-hover:text-page-inverse group-focus-visible:text-page-inverse node-icon folder-icon">
-        <svg aria-hidden="true" focusable="false" class="h-6 w-6 fill-current icon-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/>
+      <span
+        aria-hidden="true"
+        class="mr-2 inline-flex items-center text-secondary transition-colors group-hover:text-page-inverse group-focus-visible:text-page-inverse node-icon folder-icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          class="h-6 w-6 fill-current icon-svg"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"
+          />
         </svg>
       </span>
     `
@@ -222,9 +236,20 @@ export class FileExplorerComponent extends LitElement {
 
   private renderFileIcon(): TemplateResult {
     return html`
-      <span aria-hidden="true" class="mr-2 inline-flex items-center text-(--color-content-offset) node-icon file-icon">
-        <svg aria-hidden="true" focusable="false" class="h-6 w-6 fill-current icon-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
+      <span
+        aria-hidden="true"
+        class="mr-2 inline-flex items-center text-(--color-content-offset) node-icon file-icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          class="h-6 w-6 fill-current icon-svg"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
+          />
         </svg>
       </span>
     `
@@ -240,11 +265,13 @@ export class FileExplorerComponent extends LitElement {
         <svg
           aria-hidden="true"
           focusable="false"
-          class="h-4 w-4 fill-none stroke-current transition-transform ${isCollapsed ? '' : 'rotate-90'}"
+          class="h-4 w-4 fill-none stroke-current transition-transform ${isCollapsed
+            ? ''
+            : 'rotate-90'}"
           viewBox="0 0 20 20"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path d="M7 5l6 5-6 5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+          <path d="M7 5l6 5-6 5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
         </svg>
       </span>
     `
@@ -302,13 +329,19 @@ export class FileExplorerComponent extends LitElement {
                   aria-level="${treeItemLevel}"
                   tabindex="${treeItemTabIndex}"
                   @focus=${() => this.handleTreeItemFocus(path)}
-                  @keydown=${(event: KeyboardEvent) => this.handleTreeItemKeyDown(event, node, path)}
+                  @keydown=${(event: KeyboardEvent) =>
+                    this.handleTreeItemKeyDown(event, node, path)}
                   @click=${() => this.toggleCollapsed(path)}
                 >
-                  ${this.renderToggleIndicator(isCollapsed)}
-                  ${this.renderFolderIcon()}
-                  <span class="text-base text-(--color-content) node-name font-medium">${node.name}</span>
-                  ${node.comment ? html`<span class="ml-6 text-(--color-content-offset) italic comment"># ${node.comment}</span>` : ''}
+                  ${this.renderToggleIndicator(isCollapsed)} ${this.renderFolderIcon()}
+                  <span class="text-base text-(--color-content) node-name font-medium"
+                    >${node.name}</span
+                  >
+                  ${node.comment
+                    ? html`<span class="ml-6 text-(--color-content-offset) italic comment"
+                        ># ${node.comment}</span
+                      >`
+                    : ''}
                 </button>
                 ${node.note ? this.renderNote(node.note, path, node.name) : ''}
               </div>
@@ -322,19 +355,35 @@ export class FileExplorerComponent extends LitElement {
                   aria-level="${treeItemLevel}"
                   tabindex="${treeItemTabIndex}"
                   @focus=${() => this.handleTreeItemFocus(path)}
-                  @keydown=${(event: KeyboardEvent) => this.handleTreeItemKeyDown(event, node, path)}
+                  @keydown=${(event: KeyboardEvent) =>
+                    this.handleTreeItemKeyDown(event, node, path)}
                 >
                   ${isFolder ? this.renderFolderIcon() : this.renderFileIcon()}
-                  <span class="text-base text-(--color-content) node-name ${isFolder ? 'font-medium' : 'font-normal file-name'}">${node.name}</span>
-                  ${node.comment ? html`<span class="ml-6 text-(--color-content-offset) italic comment"># ${node.comment}</span>` : ''}
+                  <span
+                    class="text-base text-(--color-content) node-name ${isFolder
+                      ? 'font-medium'
+                      : 'font-normal file-name'}"
+                    >${node.name}</span
+                  >
+                  ${node.comment
+                    ? html`<span class="ml-6 text-(--color-content-offset) italic comment"
+                        ># ${node.comment}</span
+                      >`
+                    : ''}
                 </div>
                 ${node.note ? this.renderNote(node.note, path, node.name) : ''}
               </div>
             `}
         ${isCollapsible && !isCollapsed && node.children
           ? html`
-              <ul id="${groupId}" role="group" class="list-none p-0 m-0 pl-6 border-l border-dashed border-(--color-trim) ml-2 children">
-                ${node.children.map((child, index) => this.renderNode(child, this.getNodePath(path, index), false))}
+              <ul
+                id="${groupId}"
+                role="group"
+                class="list-none p-0 m-0 pl-6 border-l border-dashed border-(--color-trim) ml-2 children"
+              >
+                ${node.children.map((child, index) =>
+                  this.renderNode(child, this.getNodePath(path, index), false)
+                )}
               </ul>
             `
           : ''}
@@ -345,7 +394,9 @@ export class FileExplorerComponent extends LitElement {
   protected override render(): TemplateResult {
     return html`
       <figure class="block">
-        <div class="font-mono text-sm leading-relaxed p-6 bg-(--color-page-base) rounded-lg overflow-x-auto">
+        <div
+          class="font-mono text-sm leading-relaxed p-6 bg-(--color-page-base) rounded-lg overflow-x-auto"
+        >
           <ul
             id="${this.getTreeId()}"
             role="tree"
@@ -353,11 +404,18 @@ export class FileExplorerComponent extends LitElement {
             aria-labelledby="${this.figure ? this.getFigureId() : nothing}"
             class="list-none p-0 m-0 tree-root"
           >
-            ${this.fileSystemData?.map((node, index) => this.renderNode(node, this.getNodePath('', index), true))}
+            ${this.fileSystemData?.map((node, index) =>
+              this.renderNode(node, this.getNodePath('', index), true)
+            )}
           </ul>
         </div>
         ${this.figure
-          ? html`<figcaption id="${this.getFigureId()}" class="mx-auto mt-3 w-fit max-w-full text-center text-base italic">${unsafeHTML(this.figure)}</figcaption>`
+          ? html`<figcaption
+              id="${this.getFigureId()}"
+              class="mx-auto mt-3 w-fit max-w-full text-center text-base italic"
+            >
+              ${unsafeHTML(this.figure)}
+            </figcaption>`
           : ''}
       </figure>
     `
diff --git a/src/components/FileExplorer/client/selectors.ts b/src/components/FileExplorer/client/selectors.ts
index 3746a8ba3..ce0b56a9b 100644
--- a/src/components/FileExplorer/client/selectors.ts
+++ b/src/components/FileExplorer/client/selectors.ts
@@ -1,8 +1,5 @@
 const treeItemSelector = (path: string): string => `[data-treeitem-path="${path}"]`
 
-export const queryFileExplorerTreeItem = (
-  scope: ParentNode,
-  path: string
-): HTMLElement | null => {
+export const queryFileExplorerTreeItem = (scope: ParentNode, path: string): HTMLElement | null => {
   return scope.querySelector<HTMLElement>(treeItemSelector(path))
-}
\ No newline at end of file
+}
diff --git a/src/components/FileExplorer/index.astro b/src/components/FileExplorer/index.astro
index b0559997b..506598c9f 100644
--- a/src/components/FileExplorer/index.astro
+++ b/src/components/FileExplorer/index.astro
@@ -10,12 +10,7 @@ export type Props = {
   fullWidth?: boolean
 }
 
-const {
-  data = [],
-  figure,
-  classes = {},
-  fullWidth = true,
-} = Astro.props
+const { data = [], figure, classes = {}, fullWidth = true } = Astro.props
 
 const wrapperClass = [
   'file-explorer',
@@ -23,7 +18,9 @@ const wrapperClass = [
   'block',
   fullWidth ? 'w-full' : 'mx-auto w-fit max-w-full',
   classes.wrapper,
-].filter(Boolean).join(' ')
+]
+  .filter(Boolean)
+  .join(' ')
 ---
 
 <file-explorer class={wrapperClass} data-file-system={JSON.stringify(data)} data-figure={figure}>
diff --git a/src/components/Footer/client/__tests__/index.spec.ts b/src/components/Footer/client/__tests__/index.spec.ts
index 854089ada..5b35a41d4 100644
--- a/src/components/Footer/client/__tests__/index.spec.ts
+++ b/src/components/Footer/client/__tests__/index.spec.ts
@@ -46,9 +46,7 @@ describe('FooterElement web component', () => {
 
       expect(hireMeAnchor).toBeInstanceOf(HTMLAnchorElement)
       expect(hireMeAnchor?.innerHTML).toBe('Available October, 2024. Hire Me Now')
-      expect(hireMeAnchor?.getAttribute('aria-label')).toBe(
-        'Available October, 2024. Hire Me Now'
-      )
+      expect(hireMeAnchor?.getAttribute('aria-label')).toBe('Available October, 2024. Hire Me Now')
       expect(hireMeAnchor?.style.display).toBe('inline-block')
     })
   })
diff --git a/src/components/Footer/index.astro b/src/components/Footer/index.astro
index 9f163a3c0..17ab5f98c 100644
--- a/src/components/Footer/index.astro
+++ b/src/components/Footer/index.astro
@@ -17,15 +17,15 @@ const socialLinkClasses = [
   'focus-visible:outline-offset-2',
   '[&_[data-icon]]:fill-content',
   '[&_[data-icon]]:stroke-content',
-  '[&_[data-icon=\'x\']_path]:stroke-none',
-  '[&_[data-icon=\'x\']_.xTile]:fill-content',
-  '[&_[data-icon=\'x\']_.xGlyph]:fill-content-inverse',
+  "[&_[data-icon='x']_path]:stroke-none",
+  "[&_[data-icon='x']_.xTile]:fill-content",
+  "[&_[data-icon='x']_.xGlyph]:fill-content-inverse",
   'focus-visible:text-secondary',
   'hover:text-secondary',
-  'focus-visible:[&_[data-icon=\'x\']_.xTile]:fill-secondary',
+  "focus-visible:[&_[data-icon='x']_.xTile]:fill-secondary",
   'focus-visible:[&_[data-icon]]:fill-secondary',
   'focus-visible:[&_[data-icon]]:stroke-secondary',
-  'hover:[&_[data-icon=\'x\']_.xTile]:fill-secondary',
+  "hover:[&_[data-icon='x']_.xTile]:fill-secondary",
   'hover:[&_[data-icon]]:fill-secondary',
   'hover:[&_[data-icon]]:stroke-secondary',
 ].join(' ')
@@ -71,9 +71,7 @@ const footerTextLinkClasses = [
       ]}
     >
       {/* Page footer company contact */}
-      <div
-        class:list={[styles.footerContact, 'mt-3 sm:mt-0 sm:flex sm:items-start sm:pt-6']}
-      >
+      <div class:list={[styles.footerContact, 'mt-3 sm:mt-0 sm:flex sm:items-start sm:pt-6']}>
         {/* Mobile: avatar and company name in same row, Desktop: avatar on left side */}
         <div class="flex items-center sm:block">
           <div class="mr-3 w-16">
@@ -139,10 +137,7 @@ const footerTextLinkClasses = [
       </div>
 
       {/* "Hire Me" block with current month and year set by script */}
-      <div class:list={[
-        styles.footerHireMe,
-        'hidden lg:block lg:self-end lg:mt-8',
-      ]}>
+      <div class:list={[styles.footerHireMe, 'hidden lg:block lg:self-end lg:mt-8']}>
         <a
           href="/contact"
           id="page-footer__hire-me-anchor"
@@ -158,18 +153,14 @@ const footerTextLinkClasses = [
       </div>
 
       {/* Page footer Social Share links */}
-      <nav class:list={["mt-5", styles.footerSocial]} aria-label="Social links">
+      <nav class:list={['mt-5', styles.footerSocial]} aria-label="Social links">
         <ul class="grid list-none gap-x-4 gap-y-3 p-0 sm:mb-0 sm:mt-0 sm:mx-0 lg:grid-cols-2">
           {
             companyContactData.social
               .sort((a, b) => a.order - b.order)
               .map(social => (
                 <li class="list-none">
-                  <a
-                    href={social.url}
-                    rel="me"
-                    class={socialLinkClasses}
-                  >
+                  <a href={social.url} rel="me" class={socialLinkClasses}>
                     <span class="flex items-center">
                       <span class="**:data-icon:h-8 **:data-icon:w-8">
                         <Icon icon={social.iconName} color="inherit" size={8} />
@@ -179,9 +170,7 @@ const footerTextLinkClasses = [
                       </span>
                     </span>
                     <span class="mt-1 leading-tight font-serif">
-                      <span class="no-underline text-content">
-                        {social.blurb}
-                      </span>
+                      <span class="no-underline text-content">{social.blurb}</span>
                     </span>
                   </a>
                 </li>
@@ -190,71 +179,51 @@ const footerTextLinkClasses = [
         </ul>
       </nav>
 
-      <div
-        class:list={[
-          styles.footerBottomRow,
-          'mt-4 px-1 pt-4 pb-3 sm:p-0',
-          'lg:pl-8',
-        ]}
-      >
+      <div class:list={[styles.footerBottomRow, 'mt-4 px-1 pt-4 pb-3 sm:p-0', 'lg:pl-8']}>
         <div class="grid grid-cols-2 gap-x-4 gap-y-3 lg:grid-cols-1">
           <div class={styles.footerBottomPrimary}>
             {/* Page footer Subscribe link */}
-            <a
-              href="/newsletter"
-              class={footerTextLinkClasses}
-            >
-              <span class="underline decoration-dotted group-focus-visible:decoration-secondary group-hover:decoration-secondary">
+            <a href="/newsletter" class={footerTextLinkClasses}>
+              <span
+                class="underline decoration-dotted group-focus-visible:decoration-secondary group-hover:decoration-secondary"
+              >
                 Mailing List
               </span>
               <span class="hidden no-underline lg:block">
-                <span class="text-content">
-                  Sign up to stay in touch and get great content
-                </span>
+                <span class="text-content"> Sign up to stay in touch and get great content </span>
               </span>
             </a>
           </div>
 
           <div class:list={[styles.footerBottomSecondary, 'flex flex-col gap-3']}>
             {/* Page footer Consent link */}
-            <a
-              href="/consent"
-              class={footerTextLinkClasses}
-            >
-              <span class="underline decoration-dotted group-focus-visible:decoration-secondary group-hover:decoration-secondary">
+            <a href="/consent" class={footerTextLinkClasses}>
+              <span
+                class="underline decoration-dotted group-focus-visible:decoration-secondary group-hover:decoration-secondary"
+              >
                 Consent
               </span>
               <span class="hidden no-underline lg:block">
-                <span class="text-content">
-                  Manage your privacy preferences and data consent
-                </span>
+                <span class="text-content"> Manage your privacy preferences and data consent </span>
               </span>
             </a>
 
             {/* Page footer Privacy Policy link */}
-            <a
-              href="/privacy"
-              class={footerTextLinkClasses}
-            >
-              <span class="underline decoration-dotted group-focus-visible:decoration-secondary group-hover:decoration-secondary">
+            <a href="/privacy" class={footerTextLinkClasses}>
+              <span
+                class="underline decoration-dotted group-focus-visible:decoration-secondary group-hover:decoration-secondary"
+              >
                 Privacy Policy
               </span>
               <span class="hidden no-underline lg:block">
-                <span class="text-content">
-                  Learn what data we collect and how we use it
-                </span>
+                <span class="text-content"> Learn what data we collect and how we use it </span>
               </span>
             </a>
           </div>
 
           <div class:list={[styles.footerBottomActions, 'flex items-center justify-center gap-4']}>
             {/* Page footer RSS link */}
-            <a
-              href="/rss.xml"
-              data-tooltip
-              title="RSS Feed"
-              class={iconButtonClasses}
-            >
+            <a href="/rss.xml" data-tooltip title="RSS Feed" class={iconButtonClasses}>
               <span class="sr-only">RSS Feed</span>
               <Icon icon="feed" color="inherit" size={8} />
             </a>
diff --git a/src/components/Head/StructuredData.astro b/src/components/Head/StructuredData.astro
index 916fb452f..311d267c7 100644
--- a/src/components/Head/StructuredData.astro
+++ b/src/components/Head/StructuredData.astro
@@ -3,7 +3,8 @@ import { getSchemas } from '@components/Head/server/structuredData'
 import { applyRenderSentryContext } from '@lib/sentry/renderContext'
 export type { StructuredDataProps as Props } from '@components/Head/server/structuredData'
 
-const { path, pageTitle, pageDescription, contentType, publishDate, modifiedDate, author } = Astro.props
+const { path, pageTitle, pageDescription, contentType, publishDate, modifiedDate, author } =
+  Astro.props
 
 applyRenderSentryContext({
   contextName: 'structuredDataRender',
diff --git a/src/components/Head/server/__tests__/utils.spec.ts b/src/components/Head/server/__tests__/utils.spec.ts
index fb0895ef8..610bab232 100644
--- a/src/components/Head/server/__tests__/utils.spec.ts
+++ b/src/components/Head/server/__tests__/utils.spec.ts
@@ -15,30 +15,33 @@ describe('getSocialImageLink', () => {
   })
 
   it('falls back to the home slug when no usable path is provided', () => {
-      expect(getSocialImageLink()).toBe('https://site.test/api/social-card?slug=home')
-      expect(getSocialImageLink('   ')).toBe('https://site.test/api/social-card?slug=home')
+    expect(getSocialImageLink()).toBe('https://site.test/api/social-card?slug=home')
+    expect(getSocialImageLink('   ')).toBe('https://site.test/api/social-card?slug=home')
     expect(mockedGetSiteUrl).toHaveBeenCalledTimes(2)
   })
 
   it('normalizes relative paths with redundant separators and whitespace', () => {
     const url = getSocialImageLink('  /Articles//My  Feature / ')
-      expect(url).toBe('https://site.test/api/social-card?slug=Articles%2FMy-Feature')
+    expect(url).toBe('https://site.test/api/social-card?slug=Articles%2FMy-Feature')
   })
 
   it('parses absolute URLs and decodes their path segments', () => {
     const url = getSocialImageLink('https://preview.example.com/services/Launch%20Plan///?src=home')
-      expect(url).toBe('https://site.test/api/social-card?slug=services%2FLaunch-Plan')
+    expect(url).toBe('https://site.test/api/social-card?slug=services%2FLaunch-Plan')
   })
 
   it('uses the site url value returned at call time', () => {
     mockedGetSiteUrl.mockReturnValueOnce('https://custom.test')
     const url = getSocialImageLink('about/company')
-      expect(url).toBe('https://custom.test/api/social-card?slug=about%2Fcompany')
+    expect(url).toBe('https://custom.test/api/social-card?slug=about%2Fcompany')
     expect(mockedGetSiteUrl).toHaveBeenCalledTimes(1)
   })
 
   it('uses an explicit request site without calling the build helper', () => {
-    const url = getSocialImageLink('/services/cloud', new URL('https://preview.webstackbuilders.com'))
+    const url = getSocialImageLink(
+      '/services/cloud',
+      new URL('https://preview.webstackbuilders.com')
+    )
 
     expect(url).toBe('https://preview.webstackbuilders.com/api/social-card?slug=services%2Fcloud')
     expect(mockedGetSiteUrl).not.toHaveBeenCalled()
diff --git a/src/components/Head/server/structuredData.ts b/src/components/Head/server/structuredData.ts
index fa98109ab..8761029bf 100644
--- a/src/components/Head/server/structuredData.ts
+++ b/src/components/Head/server/structuredData.ts
@@ -64,8 +64,16 @@ export const getSchemas = (params: StructuredDataParams): string[] => {
 }
 
 const createSchemaContext = (params: StructuredDataParams): SchemaContext => {
-  const { astro, path, pageTitle, pageDescription, contentType, publishDate, modifiedDate, author } =
-    params
+  const {
+    astro,
+    path,
+    pageTitle,
+    pageDescription,
+    contentType,
+    publishDate,
+    modifiedDate,
+    author,
+  } = params
 
   if (!astro) {
     throw new BuildError('Astro context is required to generate structured data', {
diff --git a/src/components/Header/client/__tests__/headerAnimation.spec.ts b/src/components/Header/client/__tests__/headerAnimation.spec.ts
index f2ad667b3..8a375ac04 100644
--- a/src/components/Header/client/__tests__/headerAnimation.spec.ts
+++ b/src/components/Header/client/__tests__/headerAnimation.spec.ts
@@ -82,7 +82,9 @@ function stubAnimate() {
     pause: vi.fn(),
   }
 
-  Element.prototype.animate = vi.fn().mockReturnValue(mockAnimation) as unknown as typeof Element.prototype.animate
+  Element.prototype.animate = vi
+    .fn()
+    .mockReturnValue(mockAnimation) as unknown as typeof Element.prototype.animate
   return mockAnimation
 }
 
diff --git a/src/components/Header/client/__tests__/headerCollapse.spec.ts b/src/components/Header/client/__tests__/headerCollapse.spec.ts
index c282046ec..5c123635b 100644
--- a/src/components/Header/client/__tests__/headerCollapse.spec.ts
+++ b/src/components/Header/client/__tests__/headerCollapse.spec.ts
@@ -49,12 +49,10 @@ describe('Header collapse side effects', () => {
       }
     }
 
-    rafSpy = vi
-      .spyOn(window, 'requestAnimationFrame')
-      .mockImplementation(callback => {
-        callback(0)
-        return 0
-      })
+    rafSpy = vi.spyOn(window, 'requestAnimationFrame').mockImplementation(callback => {
+      callback(0)
+      return 0
+    })
   })
 
   afterEach(() => {
diff --git a/src/components/Header/client/headerAnimation.ts b/src/components/Header/client/headerAnimation.ts
index 6c0a62e50..7a6925ed9 100644
--- a/src/components/Header/client/headerAnimation.ts
+++ b/src/components/Header/client/headerAnimation.ts
@@ -197,7 +197,7 @@ function buildAnimations(
   elements: AnimationElements,
   from: MeasuredSnapshot,
   to: MeasuredSnapshot,
-  direction: 'collapse' | 'expand',
+  direction: 'collapse' | 'expand'
 ): Animation[] {
   const opts: KeyframeAnimationOptions = {
     duration: HEADER_TRANSITION_DURATION,
@@ -214,10 +214,10 @@ function buildAnimations(
       sizeFirstKeyframes(
         { transform: from.brandTransform },
         { transform: to.brandTransform },
-        isCollapse,
+        isCollapse
       ),
-      opts,
-    ),
+      opts
+    )
   )
 
   // -- Site header padding — position property
@@ -226,10 +226,10 @@ function buildAnimations(
       positionFirstKeyframes(
         { paddingTop: from.headerPaddingTop, paddingBottom: from.headerPaddingBottom },
         { paddingTop: to.headerPaddingTop, paddingBottom: to.headerPaddingBottom },
-        isCollapse,
+        isCollapse
       ),
-      opts,
-    ),
+      opts
+    )
   )
 
   // -- Footprint height — position property
@@ -238,10 +238,10 @@ function buildAnimations(
       positionFirstKeyframes(
         { height: from.footprintHeight },
         { height: to.footprintHeight },
-        isCollapse,
+        isCollapse
       ),
-      opts,
-    ),
+      opts
+    )
   )
 
   // -- Icons (width + height) — size property
@@ -255,10 +255,10 @@ function buildAnimations(
         sizeFirstKeyframes(
           { width: fromDim.width, height: fromDim.height },
           { width: toDim.width, height: toDim.height },
-          isCollapse,
+          isCollapse
         ),
-        opts,
-      ),
+        opts
+      )
     )
   })
 
@@ -269,14 +269,7 @@ function buildAnimations(
     if (!fromFs || !toFs) return
 
     animations.push(
-      link.animate(
-        sizeFirstKeyframes(
-          { fontSize: fromFs },
-          { fontSize: toFs },
-          isCollapse,
-        ),
-        opts,
-      ),
+      link.animate(sizeFirstKeyframes({ fontSize: fromFs }, { fontSize: toFs }, isCollapse), opts)
     )
   })
 
@@ -295,7 +288,7 @@ function buildAnimations(
 function sizeFirstKeyframes(
   from: Record<string, string>,
   to: Record<string, string>,
-  isCollapse: boolean,
+  isCollapse: boolean
 ): Keyframe[] {
   if (isCollapse) {
     return [
@@ -320,7 +313,7 @@ function sizeFirstKeyframes(
 function positionFirstKeyframes(
   from: Record<string, string>,
   to: Record<string, string>,
-  isCollapse: boolean,
+  isCollapse: boolean
 ): Keyframe[] {
   if (isCollapse) {
     // Position changes in second half
diff --git a/src/components/Header/client/index.ts b/src/components/Header/client/index.ts
index 7edc35396..53e940e0e 100644
--- a/src/components/Header/client/index.ts
+++ b/src/components/Header/client/index.ts
@@ -65,8 +65,7 @@ const hasScrollTop = (element: unknown): element is HTMLElement => {
 // Also checks #scroll-viewport for cases where no event is available (e.g. resize).
 const getScrollTop = (event?: Event): number => {
   const target = event?.target
-  const targetScrollTop =
-    hasScrollTop(target) ? target.scrollTop : 0
+  const targetScrollTop = hasScrollTop(target) ? target.scrollTop : 0
   const documentScrollTop = getDocumentScrollTop()
   const windowScrollTop = typeof window.scrollY === 'number' ? window.scrollY : 0
   const viewport = getScrollViewportElement()
@@ -128,26 +127,25 @@ const createUpdateHandler = (state: HeaderCollapseState) => (nextScrollY?: numbe
   state.lastScrollY = currentScrollY
 }
 
-const createScrollHandler = (state: HeaderCollapseState, update: (_nextScrollY?: number) => void) => (
-  event?: Event,
-) => {
-  if (state.isTicking) {
-    return
-  }
+const createScrollHandler =
+  (state: HeaderCollapseState, update: (_nextScrollY?: number) => void) => (event?: Event) => {
+    if (state.isTicking) {
+      return
+    }
 
-  state.isTicking = true
+    state.isTicking = true
 
-  if (typeof window.requestAnimationFrame === 'function') {
-    window.requestAnimationFrame(() => {
-      state.isTicking = false
-      update(getScrollTop(event))
-    })
-    return
-  }
+    if (typeof window.requestAnimationFrame === 'function') {
+      window.requestAnimationFrame(() => {
+        state.isTicking = false
+        update(getScrollTop(event))
+      })
+      return
+    }
 
-  state.isTicking = false
-  update(getScrollTop(event))
-}
+    state.isTicking = false
+    update(getScrollTop(event))
+  }
 
 const attachHeaderCollapse = (): boolean => {
   if (typeof window === 'undefined' || typeof document === 'undefined') {
diff --git a/src/components/Header/client/selectors.ts b/src/components/Header/client/selectors.ts
index cbe25dbe9..4131b9606 100644
--- a/src/components/Header/client/selectors.ts
+++ b/src/components/Header/client/selectors.ts
@@ -75,7 +75,7 @@ export function getAnimationElements(headerShell: HTMLElement): AnimationElement
 
   const icons = Array.from(headerShell.querySelectorAll<HTMLElement>(ANIMATION_SELECTORS.icon))
   const navLinks = Array.from(
-    headerShell.querySelectorAll<HTMLElement>(ANIMATION_SELECTORS.navLink),
+    headerShell.querySelectorAll<HTMLElement>(ANIMATION_SELECTORS.navLink)
   )
 
   return { headerShell, siteHeader, brand, footprint, icons, navLinks }
diff --git a/src/components/Header/index.astro b/src/components/Header/index.astro
index 35b9d4b97..5a7ba06c3 100644
--- a/src/components/Header/index.astro
+++ b/src/components/Header/index.astro
@@ -35,12 +35,7 @@ import './index.css'
         aria-hidden="true"
         data-testid="mobile-splash-backdrop"
       >
-        <div
-          id="mobile-splash-backdrop"
-          class="mobile-splash-backdrop"
-          aria-hidden="true"
-        >
-        </div>
+        <div id="mobile-splash-backdrop" class="mobile-splash-backdrop" aria-hidden="true"></div>
       </div>
       {/* Logo and wordmark */}
       <span
diff --git a/src/components/Home/Backstage/index.astro b/src/components/Home/Backstage/index.astro
index df9a50559..7dc791483 100644
--- a/src/components/Home/Backstage/index.astro
+++ b/src/components/Home/Backstage/index.astro
@@ -48,31 +48,37 @@ const visibleFeatures = features.slice(0, 4)
   <div class="lg:col-span-3 space-y-6">
     <!-- Stats row -->
     <div class="grid grid-cols-3 gap-4">
-      {visibleBenefits.map((benefit) => (
-        <div class="bg-content text-page-base rounded-xl p-4 text-center">
-          <p class="text-3xl font-black">{benefit.quantifier}</p>
-          <p class="text-xs text-page-base/70">{benefit.title}</p>
-        </div>
-      ))}
+      {
+        visibleBenefits.map(benefit => (
+          <div class="bg-content text-page-base rounded-xl p-4 text-center">
+            <p class="text-3xl font-black">{benefit.quantifier}</p>
+            <p class="text-xs text-page-base/70">{benefit.title}</p>
+          </div>
+        ))
+      }
     </div>
 
     <!-- Feature cards -->
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-      {visibleFeatures.map((feature) => (
-        <div class="bg-page-offset p-6 rounded-xl border border-trim">
-          <div class="flex items-center gap-3 mb-4">
-            <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
-              <Icon icon={feature.icon} size={5} color="primary" />
+      {
+        visibleFeatures.map(feature => (
+          <div class="bg-page-offset p-6 rounded-xl border border-trim">
+            <div class="flex items-center gap-3 mb-4">
+              <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
+                <Icon icon={feature.icon} size={5} color="primary" />
+              </div>
+              <span class="font-bold text-content-active">{feature.title}</span>
             </div>
-            <span class="font-bold text-content-active">{feature.title}</span>
+            <p class="text-sm text-content">{feature.description}</p>
           </div>
-          <p class="text-sm text-content">{feature.description}</p>
-        </div>
-      ))}
+        ))
+      }
     </div>
 
     <!-- CTA -->
-    <div class="bg-primary/5 border border-primary/20 rounded-xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
+    <div
+      class="bg-primary/5 border border-primary/20 rounded-xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4"
+    >
       <p class="text-content font-medium">Ready to see what Backstage can do for your team?</p>
       <a
         href="/contact"
diff --git a/src/components/Home/Hero/__tests__/index.spec.ts b/src/components/Home/Hero/__tests__/index.spec.ts
index 1110391c4..c0842ea72 100644
--- a/src/components/Home/Hero/__tests__/index.spec.ts
+++ b/src/components/Home/Hero/__tests__/index.spec.ts
@@ -16,7 +16,11 @@ describe('Home Hero (Astro)', () => {
       props: {
         pretitle:
           'I turn deployment nightmares into one-click operations. Legacy migrations, CI/CD pipelines, observability stacks—built to survive production.',
-        benefits: ['Zero-downtime migrations', 'Self-healing infrastructure', 'Developer-friendly golden paths'],
+        benefits: [
+          'Zero-downtime migrations',
+          'Self-healing infrastructure',
+          'Developer-friendly golden paths',
+        ],
       },
     })
 
@@ -43,7 +47,9 @@ describe('Home Hero (Astro)', () => {
       const readyLink = window.document.querySelector('a[data-hero-ready-link]')
       expect(readyLink).toBeTruthy()
       expect(readyLink?.getAttribute('href')).toBe('/contact')
-      expect(readyLink?.getAttribute('aria-label')).toBe('Contact me about your infrastructure needs')
+      expect(readyLink?.getAttribute('aria-label')).toBe(
+        'Contact me about your infrastructure needs'
+      )
 
       const readyClass = readyLink?.getAttribute('class') || ''
       expect(readyClass).toContain('no-underline')
diff --git a/src/components/Home/Hero/client/__tests__/index.spec.ts b/src/components/Home/Hero/client/__tests__/index.spec.ts
index 760005785..96a4f47bc 100644
--- a/src/components/Home/Hero/client/__tests__/index.spec.ts
+++ b/src/components/Home/Hero/client/__tests__/index.spec.ts
@@ -50,9 +50,8 @@ describe('HomeHeroElement (Lit)', () => {
         }) as unknown as MediaQueryList) as unknown as typeof window.matchMedia
       syncWindowTimers(window)
 
-      const { registerHomeHeroWebComponent, READY_TEXT: readyTextValue } = await import(
-        '@components/Home/Hero/client'
-      )
+      const { registerHomeHeroWebComponent, READY_TEXT: readyTextValue } =
+        await import('@components/Home/Hero/client')
       await registerHomeHeroWebComponent()
 
       window.document.body.innerHTML = await renderHero()
@@ -97,9 +96,8 @@ describe('HomeHeroElement (Lit)', () => {
 
       initAnimationLifecycle()
 
-      const { registerHomeHeroWebComponent, READY_TEXT: readyTextValue } = await import(
-        '@components/Home/Hero/client'
-      )
+      const { registerHomeHeroWebComponent, READY_TEXT: readyTextValue } =
+        await import('@components/Home/Hero/client')
       await registerHomeHeroWebComponent()
 
       window.document.body.innerHTML = await renderHero()
diff --git a/src/components/Home/Hero/index.astro b/src/components/Home/Hero/index.astro
index 4d09a4f95..0fa050528 100644
--- a/src/components/Home/Hero/index.astro
+++ b/src/components/Home/Hero/index.astro
@@ -36,12 +36,14 @@ const readyLinkLabel = 'Contact me about your infrastructure needs'
       >
         <div class="text-xs text-page-base/60 mb-3">// What I deliver</div>
         <ul class="space-y-2 text-sm">
-          {benefits.map(benefit => (
-            <li class="flex items-center gap-2">
-              <span class="text-success">✓</span>
-              <span>{benefit}</span>
-            </li>
-          ))}
+          {
+            benefits.map(benefit => (
+              <li class="flex items-center gap-2">
+                <span class="text-success">✓</span>
+                <span>{benefit}</span>
+              </li>
+            ))
+          }
 
           <li class="flex items-center gap-2">
             <span class="text-success">$</span>
@@ -63,20 +65,22 @@ const readyLinkLabel = 'Contact me about your infrastructure needs'
         <a
           href="/contact"
           class:list={[
+            ['py-3', 'sm:ml-6', 'transition-colors'],
+            ['text-content', 'font-bold'],
             [
-              'py-3', 'sm:ml-6', 'transition-colors',
+              'underline',
+              'underline-offset-4',
+              'decoration-2',
+              'decoration-dotted',
+              'decoration-content',
             ],
+            ['hover:text-content-offset', 'hover:decoration-content-offset'],
             [
-              'text-content', 'font-bold',
-            ],
-            [
-              'underline', 'underline-offset-4', 'decoration-2', 'decoration-dotted', 'decoration-content',
-            ],
-            [
-              'hover:text-content-offset', 'hover:decoration-content-offset',
-            ],
-            [
-              'focus-visible:text-content-offset', 'focus-visible:underline', 'focus-visible:decoration-2', 'focus-visible:decoration-dotted', 'focus-visible:decoration-content-offset',
+              'focus-visible:text-content-offset',
+              'focus-visible:underline',
+              'focus-visible:decoration-2',
+              'focus-visible:decoration-dotted',
+              'focus-visible:decoration-content-offset',
             ],
           ]}
         >
diff --git a/src/components/Home/Intro/index.astro b/src/components/Home/Intro/index.astro
index 6c0ad5aab..7684a6792 100644
--- a/src/components/Home/Intro/index.astro
+++ b/src/components/Home/Intro/index.astro
@@ -21,14 +21,28 @@ const { description, benefits, pretitle, title } = Astro.props as Props
 const visibleBenefits = benefits.slice(0, 3)
 ---
 
-<section class="bg-content rounded-2xl p-8 md:p-12 overflow-hidden relative" aria-labelledby="home-about-title">
-  <div class="absolute -top-32 -right-32 w-64 h-64 border border-page-base/10 rounded-full" aria-hidden="true"></div>
-  <div class="absolute -bottom-20 -left-20 w-48 h-48 border border-page-base/10 rounded-full" aria-hidden="true"></div>
+<section
+  class="bg-content rounded-2xl p-8 md:p-12 overflow-hidden relative"
+  aria-labelledby="home-about-title"
+>
+  <div
+    class="absolute -top-32 -right-32 w-64 h-64 border border-page-base/10 rounded-full"
+    aria-hidden="true"
+  >
+  </div>
+  <div
+    class="absolute -bottom-20 -left-20 w-48 h-48 border border-page-base/10 rounded-full"
+    aria-hidden="true"
+  >
+  </div>
 
   <div class="relative">
     <div class="text-center max-w-2xl mx-auto mb-10">
       <p class="text-xs font-bold text-spotlight uppercase tracking-widest mb-3">{pretitle}</p>
-      <h2 id="home-about-title" class="text-3xl md:text-4xl font-black text-page-base leading-tight mb-4">
+      <h2
+        id="home-about-title"
+        class="text-3xl md:text-4xl font-black text-page-base leading-tight mb-4"
+      >
         {title}
       </h2>
       <p class="text-base text-page-base/70 leading-relaxed">
@@ -37,19 +51,19 @@ const visibleBenefits = benefits.slice(0, 3)
     </div>
 
     <ul class="grid grid-cols-1 md:grid-cols-3 gap-6 list-none p-0 m-0">
-      {visibleBenefits.map((benefit) => (
-        <li class="border border-page-base/15 rounded-xl p-6 hover:border-spotlight/40 transition-colors group">
-          <div class="flex items-center gap-3 mb-4">
-            <div
-              class="w-10 h-10 rounded-lg bg-spotlight/20 flex items-center justify-center group-hover:bg-spotlight/30 transition-colors"
-            >
-              <Icon icon={benefit.icon} color="spotlight" size={5} />
+      {
+        visibleBenefits.map(benefit => (
+          <li class="border border-page-base/15 rounded-xl p-6 hover:border-spotlight/40 transition-colors group">
+            <div class="flex items-center gap-3 mb-4">
+              <div class="w-10 h-10 rounded-lg bg-spotlight/20 flex items-center justify-center group-hover:bg-spotlight/30 transition-colors">
+                <Icon icon={benefit.icon} color="spotlight" size={5} />
+              </div>
+              <h3 class="text-base font-bold text-page-base">{benefit.title}</h3>
             </div>
-            <h3 class="text-base font-bold text-page-base">{benefit.title}</h3>
-          </div>
-          <p class="text-sm text-page-base/60 leading-relaxed">{benefit.description}</p>
-        </li>
-      ))}
+            <p class="text-sm text-page-base/60 leading-relaxed">{benefit.description}</p>
+          </li>
+        ))
+      }
     </ul>
   </div>
 </section>
diff --git a/src/components/Home/Skills/client/__fixtures__/skillsCarousel.fixture.astro b/src/components/Home/Skills/client/__fixtures__/skillsCarousel.fixture.astro
index 707c59d5b..ef1f1a77d 100644
--- a/src/components/Home/Skills/client/__fixtures__/skillsCarousel.fixture.astro
+++ b/src/components/Home/Skills/client/__fixtures__/skillsCarousel.fixture.astro
@@ -2,4 +2,4 @@
 import Skills from '@components/Home/Skills/index.astro'
 ---
 
-<Skills title="Technologies and Skills" />
\ No newline at end of file
+<Skills title="Technologies and Skills" />
diff --git a/src/components/Home/Skills/client/__tests__/index.spec.ts b/src/components/Home/Skills/client/__tests__/index.spec.ts
index 57ef339ef..a5d4950a2 100644
--- a/src/components/Home/Skills/client/__tests__/index.spec.ts
+++ b/src/components/Home/Skills/client/__tests__/index.spec.ts
@@ -199,4 +199,4 @@ describe('Skills carousel component', () => {
       expect(toggle.getAttribute('aria-label')).toBe('Pause skills')
     })
   })
-})
\ No newline at end of file
+})
diff --git a/src/components/Home/Skills/client/index.ts b/src/components/Home/Skills/client/index.ts
index 2d4b2ad5e..a186a1e31 100644
--- a/src/components/Home/Skills/client/index.ts
+++ b/src/components/Home/Skills/client/index.ts
@@ -130,4 +130,4 @@ export const webComponentModule: WebComponentModule<SkillsCarouselElement> = {
   registeredName: 'skills-carousel',
   componentCtor: SkillsCarouselElement,
   registerWebComponent: registerSkillsCarouselWebComponent,
-}
\ No newline at end of file
+}
diff --git a/src/components/Home/Skills/client/selectors.ts b/src/components/Home/Skills/client/selectors.ts
index ded4c871c..e3113d4a5 100644
--- a/src/components/Home/Skills/client/selectors.ts
+++ b/src/components/Home/Skills/client/selectors.ts
@@ -1,8 +1,5 @@
 import type { EmblaCarouselType } from 'embla-carousel'
-import {
-  isButtonElement,
-  isType1Element,
-} from '@components/scripts/assertions/elements'
+import { isButtonElement, isType1Element } from '@components/scripts/assertions/elements'
 import { ClientScriptError } from '@components/scripts/errors'
 
 type SkillsEmblaRootElement = HTMLElement & { __emblaApi__?: EmblaCarouselType }
@@ -33,7 +30,9 @@ export const querySkillsEmblaRoot = (scope: ParentNode): SkillsEmblaRootElement
 export const getSkillsEmblaRoot = (scope: ParentNode): SkillsEmblaRootElement => {
   const root = querySkillsEmblaRoot(scope)
   if (!root) {
-    throw new ClientScriptError(`SkillsCarouselElement: Missing required element: ${SELECTORS.emblaRoot}`)
+    throw new ClientScriptError(
+      `SkillsCarouselElement: Missing required element: ${SELECTORS.emblaRoot}`
+    )
   }
 
   return root
@@ -51,7 +50,9 @@ export const querySkillsViewport = (scope: ParentNode): HTMLElement | null => {
 export const getSkillsViewport = (scope: ParentNode): HTMLElement => {
   const viewport = querySkillsViewport(scope)
   if (!viewport) {
-    throw new ClientScriptError(`SkillsCarouselElement: Missing required element: ${SELECTORS.viewport}`)
+    throw new ClientScriptError(
+      `SkillsCarouselElement: Missing required element: ${SELECTORS.viewport}`
+    )
   }
 
   return viewport
@@ -97,4 +98,4 @@ export const querySkillsAutoplayPlayIcon = (scope: ParentNode): Element | null =
   return isType1Element(icon) ? icon : null
 }
 
-export type { SkillsEmblaRootElement }
\ No newline at end of file
+export type { SkillsEmblaRootElement }
diff --git a/src/components/Home/Skills/index.astro b/src/components/Home/Skills/index.astro
index bbfe8390f..855d4f9ae 100644
--- a/src/components/Home/Skills/index.astro
+++ b/src/components/Home/Skills/index.astro
@@ -32,95 +32,93 @@ const skills = await getCollection('tags', ({ data }) => data.isSkill === true)
     <div class="skills-embla relative">
       <div class="skills-embla__viewport overflow-hidden mx-16 px-5" data-skills-embla-viewport>
         <div class="skills-embla__container flex -mx-5" data-skills-embla-container>
-          {skills.map((skill, index) => (
-            <div
-              class="skills-embla__slide flex-[0_0_auto] min-w-0 pt-1 px-5"
-              data-skills-slide
-              role="group"
-              aria-roledescription="slide"
-              aria-label={`${skill.data.displayName} (${index + 1} of ${skills.length})`}
-            >
-              <a
-                href={`/tags/${skill.data.slug}`}
-                class="group relative flex flex-col items-center text-center gap-3 text-page-base/60 transition-colors no-underline hover:no-underline focus-visible:no-underline focus-visible:outline-none after:pointer-events-none after:absolute after:inset-0 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight shrink-0"
+          {
+            skills.map((skill, index) => (
+              <div
+                class="skills-embla__slide flex-[0_0_auto] min-w-0 pt-1 px-5"
+                data-skills-slide
+                role="group"
+                aria-roledescription="slide"
+                aria-label={`${skill.data.displayName} (${index + 1} of ${skills.length})`}
               >
-                {skill.data.logo && (
-                  <Image
-                    src={skill.data.logo}
-                    alt=""
-                    width={skill.data.logo.width}
-                    height={32}
-                    loading="lazy"
-                    class="h-8 w-auto object-contain"
-                  />
-                )}
-                <span class="text-sm text-content-inverse font-semibold transition-colors group-hover:text-content-offset group-focus-visible:text-content-offset">
-                  {skill.data.displayName}
-                </span>
-              </a>
-            </div>
-          ))}
+                <a
+                  href={`/tags/${skill.data.slug}`}
+                  class="group relative flex flex-col items-center text-center gap-3 text-page-base/60 transition-colors no-underline hover:no-underline focus-visible:no-underline focus-visible:outline-none after:pointer-events-none after:absolute after:inset-0 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight shrink-0"
+                >
+                  {skill.data.logo && (
+                    <Image
+                      src={skill.data.logo}
+                      alt=""
+                      width={skill.data.logo.width}
+                      height={32}
+                      loading="lazy"
+                      class="h-8 w-auto object-contain"
+                    />
+                  )}
+                  <span class="text-sm text-content-inverse font-semibold transition-colors group-hover:text-content-offset group-focus-visible:text-content-offset">
+                    {skill.data.displayName}
+                  </span>
+                </a>
+              </div>
+            ))
+          }
         </div>
       </div>
 
-      {skills.length > 1 && (
-        <>
-          {/* Intentionally not using Button component. */}
-          <button
-            type="button"
-            class="embla__button embla__button--prev absolute left-1 top-1/2 -translate-y-1/2 flex h-9 w-9 items-center justify-center rounded-full bg-content hover:bg-content-active hover:shadow-lg hover:scale-105 transition-all duration-300 disabled:opacity-30 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:bg-content-offset after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
-            data-skills-prev
-            aria-label="Previous skill"
-          >
-            <Icon
-              icon="arrow-left"
-              color="content-inverse"
-              size={6}
-            />
-          </button>
+      {
+        skills.length > 1 && (
+          <>
+            {/* Intentionally not using Button component. */}
+            <button
+              type="button"
+              class="embla__button embla__button--prev absolute left-1 top-1/2 -translate-y-1/2 flex h-9 w-9 items-center justify-center rounded-full bg-content hover:bg-content-active hover:shadow-lg hover:scale-105 transition-all duration-300 disabled:opacity-30 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:bg-content-offset after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
+              data-skills-prev
+              aria-label="Previous skill"
+            >
+              <Icon icon="arrow-left" color="content-inverse" size={6} />
+            </button>
 
-          {/* Intentionally not using Button component. */}
-          <button
-            type="button"
-            class="embla__button embla__button--next absolute right-1 top-1/2 -translate-y-1/2 flex h-9 w-9 items-center justify-center rounded-full bg-content hover:bg-content-active hover:shadow-lg hover:scale-105 transition-all duration-300 disabled:opacity-30 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:bg-content-offset after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
-            data-skills-next
-            aria-label="Next skill"
-          >
-            <Icon
-              icon="arrow-right"
-              color="content-inverse"
-              size={6}
-            />
-          </button>
-        </>
-      )}
+            {/* Intentionally not using Button component. */}
+            <button
+              type="button"
+              class="embla__button embla__button--next absolute right-1 top-1/2 -translate-y-1/2 flex h-9 w-9 items-center justify-center rounded-full bg-content hover:bg-content-active hover:shadow-lg hover:scale-105 transition-all duration-300 disabled:opacity-30 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:bg-content-offset after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
+              data-skills-next
+              aria-label="Next skill"
+            >
+              <Icon icon="arrow-right" color="content-inverse" size={6} />
+            </button>
+          </>
+        )
+      }
     </div>
   </div>
 
-  {skills.length > 1 && (
-    <div class="mt-2 flex justify-end pr-2">
-      <button
-        type="button"
-        class:list={[
-          "relative flex h-10 w-10 items-center justify-center",
-          "bg-content text-content-inverse transition-colors",
-          "rounded-full border border-trim",
-          "hover:bg-content-active",
-          "focus-visible:outline-none focus-visible:bg-content-offset after:pointer-events-none after:absolute after:-inset-1 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
-        ]}
-        data-skills-autoplay-toggle
-        aria-label="Pause skills"
-        aria-pressed="false"
-      >
-        <span data-skills-icon="pause">
-          <Icon icon="pause" size={6} classes="fill-content-inverse text-content-inverse" />
-        </span>
-        <span data-skills-icon="play">
-          <Icon icon="play" size={6} classes="fill-content-inverse text-content-inverse" />
-        </span>
-      </button>
-    </div>
-  )}
+  {
+    skills.length > 1 && (
+      <div class="mt-2 flex justify-end pr-2">
+        <button
+          type="button"
+          class:list={[
+            'relative flex h-10 w-10 items-center justify-center',
+            'bg-content text-content-inverse transition-colors',
+            'rounded-full border border-trim',
+            'hover:bg-content-active',
+            "focus-visible:outline-none focus-visible:bg-content-offset after:pointer-events-none after:absolute after:-inset-1 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight",
+          ]}
+          data-skills-autoplay-toggle
+          aria-label="Pause skills"
+          aria-pressed="false"
+        >
+          <span data-skills-icon="pause">
+            <Icon icon="pause" size={6} classes="fill-content-inverse text-content-inverse" />
+          </span>
+          <span data-skills-icon="play">
+            <Icon icon="play" size={6} classes="fill-content-inverse text-content-inverse" />
+          </span>
+        </button>
+      </div>
+    )
+  }
 </skills-carousel>
 
 <script>
diff --git a/src/components/Icon/icons/alarm-clock.astro b/src/components/Icon/icons/alarm-clock.astro
index 421119a02..ec7d8663c 100644
--- a/src/components/Icon/icons/alarm-clock.astro
+++ b/src/components/Icon/icons/alarm-clock.astro
@@ -15,16 +15,30 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>alarm clock icon</title>}
-  <path d="M 21.611019,13.150051 C 21.610269,8.0616042 17.655798,3.9095113 12.652474,3.5725815 V 2.207472 H 11.347129 V 3.5726284 C 6.3446021,3.9099332 2.3899422,8.0623073 2.3891922,13.150051 c 7.5e-4,3.081492 1.4549199,5.815929 3.7094623,7.575108 L 4.8148713,22.90489 6.4448185,23.99935 8.040079,21.900195 c 1.2082224,0.548238 2.546754,0.861261 3.960097,0.861261 1.376313,0 2.682455,-0.294555 3.866021,-0.815747 l 1.559777,2.053641 1.632291,-1.09446 -1.246753,-2.112654 c 2.305214,-1.756039 3.798757,-4.520615 3.799507,-7.642185 z m -9.345583,6.513741 h -0.482708 -0.226682 v 0.836982 C 9.8146791,20.397089 8.2457618,19.694261 7.0352425,18.588974 L 7.651541,17.97291 7.3099238,17.631386 6.6875317,18.253966 C 5.5517764,17.070774 4.8092932,15.520653 4.6600467,13.791567 h 0.925057 v -0.98693 H 4.645047 C 4.7279201,11.023943 5.4355758,9.4182295 6.5614408,8.1853045 L 7.2764088,8.9004601 7.6179793,8.5588429 6.8964958,7.8375469 C 8.1019995,6.6806044 9.6890101,5.9342309 11.457376,5.8054681 v 1.0281797 h 0.277541 0.482707 0.226683 V 5.8004526 c 1.790725,0.1067781 3.400844,0.8454182 4.624488,2.0047043 l -0.720359,0.7201712 0.341618,0.3415702 0.717077,-0.7170774 c 1.123193,1.2147849 1.838162,2.7977171 1.943206,4.5560521 h -0.935041 v 0.986931 h 0.930072 c -0.127778,1.751819 -0.862011,3.324722 -2.000064,4.526006 l -0.621267,-0.621455 -0.341523,0.341195 0.618361,0.618361 c -1.192379,1.102944 -2.73875,1.813459 -4.457758,1.9388 v -0.831965 h -0.277681 z" />
-  <path d="M 3.8156129,0.53430708 C 1.921906,1.6306883 1.2757957,4.0544924 2.3730207,5.9485275 L 9.22988,1.9772742 C 8.134155,0.08361421 5.7100228,-0.56291793 3.8156129,0.53430708 Z" />
-  <path d="M 20.183849,0.53430708 C 18.290376,-0.56291793 15.866197,0.08361421 14.769769,1.9772742 l 6.857422,3.9712533 c 1.097225,-1.8940351 0.45027,-4.3178392 -1.443342,-5.41422042 z" />
-  <polygon points="283.943,190.245 251.719,269.859 199.501,250.803 192.214,270.78 259.499,295.23 259.717,294.731 260.791,295.166 300.541,196.964 " transform="matrix(0.04687393,0,0,0.04687393,2.6226654e-4,-1.0262536e-4)" />
+  <path
+    d="M 21.611019,13.150051 C 21.610269,8.0616042 17.655798,3.9095113 12.652474,3.5725815 V 2.207472 H 11.347129 V 3.5726284 C 6.3446021,3.9099332 2.3899422,8.0623073 2.3891922,13.150051 c 7.5e-4,3.081492 1.4549199,5.815929 3.7094623,7.575108 L 4.8148713,22.90489 6.4448185,23.99935 8.040079,21.900195 c 1.2082224,0.548238 2.546754,0.861261 3.960097,0.861261 1.376313,0 2.682455,-0.294555 3.866021,-0.815747 l 1.559777,2.053641 1.632291,-1.09446 -1.246753,-2.112654 c 2.305214,-1.756039 3.798757,-4.520615 3.799507,-7.642185 z m -9.345583,6.513741 h -0.482708 -0.226682 v 0.836982 C 9.8146791,20.397089 8.2457618,19.694261 7.0352425,18.588974 L 7.651541,17.97291 7.3099238,17.631386 6.6875317,18.253966 C 5.5517764,17.070774 4.8092932,15.520653 4.6600467,13.791567 h 0.925057 v -0.98693 H 4.645047 C 4.7279201,11.023943 5.4355758,9.4182295 6.5614408,8.1853045 L 7.2764088,8.9004601 7.6179793,8.5588429 6.8964958,7.8375469 C 8.1019995,6.6806044 9.6890101,5.9342309 11.457376,5.8054681 v 1.0281797 h 0.277541 0.482707 0.226683 V 5.8004526 c 1.790725,0.1067781 3.400844,0.8454182 4.624488,2.0047043 l -0.720359,0.7201712 0.341618,0.3415702 0.717077,-0.7170774 c 1.123193,1.2147849 1.838162,2.7977171 1.943206,4.5560521 h -0.935041 v 0.986931 h 0.930072 c -0.127778,1.751819 -0.862011,3.324722 -2.000064,4.526006 l -0.621267,-0.621455 -0.341523,0.341195 0.618361,0.618361 c -1.192379,1.102944 -2.73875,1.813459 -4.457758,1.9388 v -0.831965 h -0.277681 z"
+  ></path>
+  <path
+    d="M 3.8156129,0.53430708 C 1.921906,1.6306883 1.2757957,4.0544924 2.3730207,5.9485275 L 9.22988,1.9772742 C 8.134155,0.08361421 5.7100228,-0.56291793 3.8156129,0.53430708 Z"
+  ></path>
+  <path
+    d="M 20.183849,0.53430708 C 18.290376,-0.56291793 15.866197,0.08361421 14.769769,1.9772742 l 6.857422,3.9712533 c 1.097225,-1.8940351 0.45027,-4.3178392 -1.443342,-5.41422042 z"
+  ></path>
+  <polygon
+    points="283.943,190.245 251.719,269.859 199.501,250.803 192.214,270.78 259.499,295.23 259.717,294.731 260.791,295.166 300.541,196.964 "
+    transform="matrix(0.04687393,0,0,0.04687393,2.6226654e-4,-1.0262536e-4)"></polygon>
 </svg>
diff --git a/src/components/Icon/icons/api.astro b/src/components/Icon/icons/api.astro
index 3e64fc96b..7a90c2c98 100644
--- a/src/components/Icon/icons/api.astro
+++ b/src/components/Icon/icons/api.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>API Icon</title>}
   <path
@@ -28,5 +34,5 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
     clip-rule="evenodd"
     stroke-width="1.6"
     d="M 2.4357846e-7,3.6004623 A 3.5998854,3.5998854 0 1 1 6.8477824,5.1524129 L 8.9997139,7.3027445 9.4540994,6.848359 a 3.5998854,3.5998854 0 0 1 5.0910376,0 l 0.454386,0.4543855 2.150331,-2.1503316 A 3.5998854,3.5998854 0 1 1 18.8458,6.848359 l -2.148731,2.1519315 0.454385,0.4543855 a 3.5998854,3.5998854 0 0 1 0,5.091038 l -0.454385,0.454385 2.150331,2.150332 a 3.5998854,3.5998854 0 1 1 -1.695946,1.695946 l -2.151931,-2.148732 -0.454386,0.454386 a 3.5998854,3.5998854 0 0 1 -5.0910376,0 L 8.9997139,16.697645 6.8493823,18.847977 A 3.5998854,3.5998854 0 1 1 5.1534363,17.152031 L 7.3021679,15.000099 6.8477824,14.545714 a 3.5998854,3.5998854 0 0 1 0,-5.091038 L 7.3021679,9.0002905 5.1518363,6.8499589 A 3.5998854,3.5998854 0 0 1 2.4357846e-7,3.6004623 Z M 3.5998857,2.4005005 a 1.1999618,1.1999618 0 1 0 0,2.3999236 1.1999618,1.1999618 0 0 0 0,-2.3999236 z m 0,16.7994645 a 1.199962,1.199962 0 1 0 0,2.399924 1.199962,1.199962 0 0 0 0,-2.399924 z m 15.5995033,1.199962 a 1.199962,1.199962 0 1 1 2.399924,0 1.199962,1.199962 0 0 1 -2.399924,0 z M 20.399351,2.4005005 a 1.1999618,1.1999618 0 1 0 0,2.3999236 1.1999618,1.1999618 0 0 0 0,-2.3999236 z M 11.151645,8.545905 a 1.1999618,1.1999618 0 0 1 1.695946,0 l 2.607917,2.606317 a 1.1999618,1.1999618 0 0 1 0,1.695946 l -2.607917,2.607917 a 1.1999618,1.1999618 0 0 1 -1.695946,0 L 8.5437284,12.848168 a 1.1999618,1.1999618 0 0 1 0,-1.695946 L 11.151645,8.544305 Z"
-  />
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/apis-and-gateways.astro b/src/components/Icon/icons/apis-and-gateways.astro
index bd3bd0e5e..93d744b35 100644
--- a/src/components/Icon/icons/apis-and-gateways.astro
+++ b/src/components/Icon/icons/apis-and-gateways.astro
@@ -15,28 +15,27 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>User Avatar Icon</title>}
   <path
     stroke-width="0.75"
     d="m 12.75,13.638075 v -3.27615 a 2.250525,2.250525 0 1 0 -1.5,0 v 3.276525 a 2.25,2.25 0 1 0 1.5,0 z M 12,7.5 A 0.75,0.75 0 1 1 11.25,8.25 0.750675,0.750675 0 0 1 12,7.5 Z m 0,9 A 0.75,0.75 0 1 1 12.75,15.75 0.750675,0.750675 0 0 1 12,16.5 Z"
-  />
+  ></path>
   <path
     stroke-width="0.75"
     d="m 22.810575,13.060575 a 1.499625,1.499625 0 0 0 0,-2.12115 l -4.340175,-4.33995 2.17545,-2.1471 a 1.50135,1.50135 0 1 0 -1.0812,-1.0404 L 17.409675,5.5386 13.060575,1.189425 a 1.499625,1.499625 0 0 0 -2.12115,0 L 6.599475,5.52945 4.4526,3.353775 A 1.5015,1.5015 0 1 0 3.4125,4.4352 l 2.12625,2.155125 -4.349325,4.3491 a 1.499625,1.499625 0 0 0 0,2.12115 L 5.5386,17.409675 3.4125,19.5648 a 1.498275,1.498275 0 1 0 1.04025,1.081425 l 2.146875,-2.175675 4.33995,4.340025 a 1.499625,1.499625 0 0 0 2.12115,0 l 4.3491,-4.349175 2.154975,2.126625 a 1.4985,1.4985 0 1 0 1.0812,-1.0404 l -2.17545,-2.1471 z M 12,21.75 2.25,12 12,2.25 21.75,12 Z"
-  />
-  <rect
-    fill="none"
-    width="24"
-    height="24"
-    x="0"
-    y="0"
-    stroke-width="0.75"
-  />
+  ></path>
+  <rect fill="none" width="24" height="24" x="0" y="0" stroke-width="0.75"></rect>
 </svg>
diff --git a/src/components/Icon/icons/apple.astro b/src/components/Icon/icons/apple.astro
index f9e657f35..7eb2d2b5f 100644
--- a/src/components/Icon/icons/apple.astro
+++ b/src/components/Icon/icons/apple.astro
@@ -16,15 +16,22 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
   role="img"
 >
   {accessible && <title>apple icon</title>}
   <path
     stroke-width="1.2"
-    d="m 17.728295,20.967185 c -0.994443,1.485674 -2.048793,2.995311 -3.65428,2.995311 -1.605487,0 -2.120681,-0.946517 -3.941831,-0.946517 -1.8211497,0 -2.3962495,0.922555 -3.9178681,0.982461 C 4.6926972,24.058347 3.4586286,22.380971 2.500129,20.931241 0.45133532,17.971873 -1.0942458,12.544367 0.99049159,8.8541428 A 5.8468494,5.8468494 0 0 1 5.8788409,5.8468494 c 1.5335998,0 2.9953121,1.0423686 3.9418308,1.0423686 0.9465183,0 2.7077623,-1.2819936 4.5648553,-1.0902936 a 5.5592993,5.5592993 0 0 1 4.361176,2.3962496 5.4634494,5.4634494 0 0 0 -2.57597,4.564856 5.2837305,5.2837305 0 0 0 3.210975,4.792499 13.23928,13.23928 0 0 1 -1.653413,3.390694 M 10.887003,1.7971872 A 5.4514681,5.4514681 0 0 1 14.40949,0 5.2477868,5.2477868 0 0 1 13.211365,3.8220182 4.3731558,4.3731558 0 0 1 9.6169906,5.5233556 5.1159932,5.1159932 0 0 1 10.887003,1.7971872 Z" />
+    d="m 17.728295,20.967185 c -0.994443,1.485674 -2.048793,2.995311 -3.65428,2.995311 -1.605487,0 -2.120681,-0.946517 -3.941831,-0.946517 -1.8211497,0 -2.3962495,0.922555 -3.9178681,0.982461 C 4.6926972,24.058347 3.4586286,22.380971 2.500129,20.931241 0.45133532,17.971873 -1.0942458,12.544367 0.99049159,8.8541428 A 5.8468494,5.8468494 0 0 1 5.8788409,5.8468494 c 1.5335998,0 2.9953121,1.0423686 3.9418308,1.0423686 0.9465183,0 2.7077623,-1.2819936 4.5648553,-1.0902936 a 5.5592993,5.5592993 0 0 1 4.361176,2.3962496 5.4634494,5.4634494 0 0 0 -2.57597,4.564856 5.2837305,5.2837305 0 0 0 3.210975,4.792499 13.23928,13.23928 0 0 1 -1.653413,3.390694 M 10.887003,1.7971872 A 5.4514681,5.4514681 0 0 1 14.40949,0 5.2477868,5.2477868 0 0 1 13.211365,3.8220182 4.3731558,4.3731558 0 0 1 9.6169906,5.5233556 5.1159932,5.1159932 0 0 1 10.887003,1.7971872 Z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/arrow-down.astro b/src/components/Icon/icons/arrow-down.astro
index ee5c9fc74..b286dfd36 100644
--- a/src/components/Icon/icons/arrow-down.astro
+++ b/src/components/Icon/icons/arrow-down.astro
@@ -16,14 +16,21 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>arrow-down icon</title>}
-  <path d="m 24.000000,6.9334385 c 0,-0.2389432 -0.0912,-0.4778864 -0.273345,-0.6600272 -0.364282,-0.3645484 -0.955506,-0.3645484 -1.319788,0 L 12.001361,16.680507 1.5942658,6.2734113 c -0.3645484,-0.3645484 -0.95550615,-0.3645484 -1.32005453,0 -0.36428169,0.3645484 -0.36428169,0.9555061 0,1.3200545 L 11.341335,18.660589 c 0.364281,0.364548 0.955506,0.364548 1.319787,0 L 23.728245,7.5934658 c 0.182408,-0.1821409 0.273612,-0.4210841 0.273612,-0.6600273 z"
-  stroke-width="0.266677"
-  stroke-linecap="round" />
+  <path
+    d="m 24.000000,6.9334385 c 0,-0.2389432 -0.0912,-0.4778864 -0.273345,-0.6600272 -0.364282,-0.3645484 -0.955506,-0.3645484 -1.319788,0 L 12.001361,16.680507 1.5942658,6.2734113 c -0.3645484,-0.3645484 -0.95550615,-0.3645484 -1.32005453,0 -0.36428169,0.3645484 -0.36428169,0.9555061 0,1.3200545 L 11.341335,18.660589 c 0.364281,0.364548 0.955506,0.364548 1.319787,0 L 23.728245,7.5934658 c 0.182408,-0.1821409 0.273612,-0.4210841 0.273612,-0.6600273 z"
+    stroke-width="0.266677"
+    stroke-linecap="round"></path>
 </svg>
diff --git a/src/components/Icon/icons/arrow-left.astro b/src/components/Icon/icons/arrow-left.astro
index a1b6e84d9..b7f7af3cc 100644
--- a/src/components/Icon/icons/arrow-left.astro
+++ b/src/components/Icon/icons/arrow-left.astro
@@ -15,18 +15,19 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>arrow-left icon</title>}
-  <path
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    d="M15 19l-7-7 7-7"
-  />
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
 </svg>
diff --git a/src/components/Icon/icons/arrow-right.astro b/src/components/Icon/icons/arrow-right.astro
index 632b14084..26c768f1c 100644
--- a/src/components/Icon/icons/arrow-right.astro
+++ b/src/components/Icon/icons/arrow-right.astro
@@ -15,18 +15,19 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>arrow-right icon</title>}
-  <path
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    d="M9 5l7 7-7 7"
-  />
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
 </svg>
diff --git a/src/components/Icon/icons/arrow-up.astro b/src/components/Icon/icons/arrow-up.astro
index 7da7c7740..5c6cdc15c 100644
--- a/src/components/Icon/icons/arrow-up.astro
+++ b/src/components/Icon/icons/arrow-up.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Arrow Up Icon</title>}
   <path
diff --git a/src/components/Icon/icons/availability.astro b/src/components/Icon/icons/availability.astro
index 1d2f6a6bc..544b98f10 100644
--- a/src/components/Icon/icons/availability.astro
+++ b/src/components/Icon/icons/availability.astro
@@ -15,28 +15,34 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Availability Icon</title>}
   <path
     stroke-width="0.08"
     d="m 13.819602,13.80294 c 0,-0.0571 0.0028,-0.113611 0.0043,-0.170407 H 2.9158474 C 1.3080416,13.632533 0,14.940577 0,16.548382 c 0,1.607806 1.3080416,2.915847 2.9158474,2.915847 H 18.024709 C 15.594483,18.729208 13.819602,16.469843 13.819602,13.80294 Z M 6.1725083,17.305744 H 3.521738 c -0.41761,0 -0.7573632,-0.339753 -0.7573632,-0.757362 0,-0.417611 0.3397532,-0.757364 0.7573632,-0.757364 h 2.6507703 c 0.4176101,0 0.757363,0.339753 0.757363,0.757364 0,0.417609 -0.3397529,0.757362 -0.757363,0.757362 z"
-  />
+  ></path>
   <path
     stroke-width="0.08"
     d="M 2.9158474,12.647961 H 13.933661 c 0.538789,-2.7098429 2.934251,-4.7590405 5.799962,-4.7590405 0.722524,0 1.414906,0.1307894 2.055407,0.3689862 C 21.281824,7.3961797 20.345042,6.8162678 19.274888,6.8162678 H 2.9158474 C 1.3080416,6.8162678 0,8.1243083 0,9.7321144 0,11.339921 1.3080416,12.647961 2.9158474,12.647961 Z M 3.521738,8.9747507 h 2.6507703 c 0.4176101,0 0.757363,0.339753 0.757363,0.7573637 0,0.4176106 -0.3397529,0.7573636 -0.757363,0.7573636 H 3.521738 c -0.41761,0 -0.7573632,-0.339753 -0.7573632,-0.7573636 0,-0.4176107 0.3397532,-0.7573637 0.7573632,-0.7573637 z"
-  />
+  ></path>
   <path
     stroke-width="0.08"
     d="M 2.9158474,5.8316952 H 19.274888 c 1.607729,0 2.915848,-1.3080427 2.915848,-2.9158486 C 22.190736,1.3080407 20.882617,0 19.274888,0 H 2.9158474 C 1.3080416,0 0,1.3080407 0,2.9158466 0,4.5236525 1.3080416,5.8316952 2.9158474,5.8316952 Z M 17.987371,1.9502106 c 0.532426,0 0.965638,0.43321 0.965638,0.965636 0,0.5324281 -0.433212,0.9656381 -0.965638,0.9656381 -0.532426,0 -0.965638,-0.43321 -0.965638,-0.9656381 0,-0.532426 0.433212,-0.965636 0.965638,-0.965636 z M 3.521738,2.1584846 h 2.6507703 c 0.4176101,0 0.757363,0.3397534 0.757363,0.757362 0,0.4176107 -0.3397529,0.757364 -0.757363,0.757364 H 3.521738 c -0.41761,0 -0.7573632,-0.3397533 -0.7573632,-0.757364 0,-0.4176086 0.3397532,-0.757362 0.7573632,-0.757362 z"
-  />
+  ></path>
   <path
     stroke-width="0.08"
     d="m 19.733623,9.5364876 c -2.356308,0 -4.266453,1.9101444 -4.266453,4.2664524 0,2.356309 1.910145,4.266454 4.266453,4.266454 C 22.089931,18.069394 24,16.159249 24,13.80294 24,11.446632 22.089931,9.5364876 19.733623,9.5364876 Z m 2.27936,3.3626164 -2.700303,2.700226 c -0.0571,0.05719 -0.133219,0.08876 -0.214182,0.08876 -0.08096,0 -0.157076,-0.03151 -0.214258,-0.08876 l -1.354164,-1.354165 c -0.05726,-0.05718 -0.08876,-0.133307 -0.08876,-0.214183 0,-0.08089 0.03151,-0.156996 0.08876,-0.214258 l 0.267727,-0.267727 c 0.0571,-0.05718 0.13322,-0.08876 0.214183,-0.08876 0.08088,0 0.157,0.03151 0.214182,0.08869 l 0.87233,0.872256 2.218392,-2.218241 c 0.0571,-0.05718 0.133225,-0.08876 0.214183,-0.08876 0.08095,0 0.157078,0.03159 0.214256,0.08876 l 0.267729,0.267727 c 0.05719,0.0571 0.08876,0.133225 0.08876,0.214183 -7.5e-5,0.08095 -0.03159,0.157078 -0.08884,0.214258 z"
-  />
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/avatar.astro b/src/components/Icon/icons/avatar.astro
index 9f1020e24..8b3dc25fe 100644
--- a/src/components/Icon/icons/avatar.astro
+++ b/src/components/Icon/icons/avatar.astro
@@ -15,18 +15,23 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>User Avatar Icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
-    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-  ></path>
+    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
 </svg>
diff --git a/src/components/Icon/icons/award.astro b/src/components/Icon/icons/award.astro
index c13e20c8e..9ea686cfc 100644
--- a/src/components/Icon/icons/award.astro
+++ b/src/components/Icon/icons/award.astro
@@ -16,16 +16,28 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
   role="img"
 >
   {accessible && <title>award icon</title>}
   <g>
-    <path d="M 12.932375,7.0526251 11.989975,4 11.067663,7.0315876 H 8.0000001 L 10.486225,8.9263001 9.5238251,12 12.010013,10.105275 14.49625,12 13.51375,8.9473751 16,7.0526251 Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M 4.469275,0 H 19.53075 V 1.4897625 H 24 v 5.2960876 c 0,1.4046 -0.558,2.7516875 -1.551125,3.7448999 C 21.639,11.340525 20.594,11.860988 19.474375,12.025613 19.30975,13.14525 18.789375,14.19025 17.9795,15 c -0.973875,0.973875 -2.288,1.529375 -3.662875,1.550625 v 2.15325 c 0,0.175875 0.06975,0.3445 0.194125,0.46875 0.124375,0.124375 0.293,0.19425 0.46875,0.19425 0.812,0 1.590625,0.3225 2.16475,0.896625 0.574125,0.574125 0.89675,1.352875 0.89675,2.16475 V 24 H 5.9590375 v -1.57175 c 0,-0.811875 0.3225626,-1.590625 0.8966876,-2.16475 0.574125,-0.574125 1.3528,-0.896625 2.1647625,-0.896625 0.175825,0 0.34445,-0.06987 0.4687625,-0.19425 0.124325,-0.12425 0.194175,-0.292875 0.194175,-0.46875 v -2.15325 C 8.3084626,16.529375 6.9943376,15.973875 6.0204625,15 5.210675,14.19025 4.690225,13.14525 4.5256,12.025613 3.4059625,11.860988 2.3609625,11.340525 1.5511875,10.53075 0.55797375,9.5375376 0,8.1904501 0,6.7858501 V 1.4897625 H 4.469275 Z M 6.1229,1.653625 v 9.6015 c 0,0.966038 0.3837626,1.8925 1.0668501,2.575625 0.6831,0.683125 1.609575,1.066875 2.5756125,1.066875 H 11.33705 v 3.80625 c 0,0.614375 -0.244062,1.203625 -0.6785,1.638125 -0.43445,0.434375 -1.0236749,0.6785 -1.6380624,0.6785 -0.3733625,0 -0.73145,0.14825 -0.995475,0.412375 -0.24465,0.244625 -0.38995,0.57 -0.4099625,0.9135 H 16.385 c -0.02,-0.3435 -0.165375,-0.668875 -0.41,-0.9135 C 15.711,21.16875 15.352875,21.0205 14.9795,21.0205 c -0.614375,0 -1.203625,-0.244125 -1.638,-0.6785 C 12.907,19.9075 12.663,19.31825 12.663,18.703875 v -3.80625 h 1.571625 c 0.966,0 1.8925,-0.38375 2.575625,-1.066875 0.683125,-0.683125 1.066875,-1.609587 1.066875,-2.575625 v -9.6015 z M 4.469275,3.1433875 h -2.81565 v 3.6424626 c 0,0.9660375 0.3837625,1.8925125 1.06685,2.5756125 0.484675,0.4846625 1.091875,0.8186504 1.7488,0.9717754 z M 19.53075,10.333238 V 3.1433875 h 2.815625 v 3.6424626 c 0,0.9660375 -0.38375,1.8925125 -1.066875,2.5756125 -0.484625,0.4846625 -1.091875,0.8186504 -1.74875,0.9717754 z" />
+    <path
+      d="M 12.932375,7.0526251 11.989975,4 11.067663,7.0315876 H 8.0000001 L 10.486225,8.9263001 9.5238251,12 12.010013,10.105275 14.49625,12 13.51375,8.9473751 16,7.0526251 Z"
+    ></path>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M 4.469275,0 H 19.53075 V 1.4897625 H 24 v 5.2960876 c 0,1.4046 -0.558,2.7516875 -1.551125,3.7448999 C 21.639,11.340525 20.594,11.860988 19.474375,12.025613 19.30975,13.14525 18.789375,14.19025 17.9795,15 c -0.973875,0.973875 -2.288,1.529375 -3.662875,1.550625 v 2.15325 c 0,0.175875 0.06975,0.3445 0.194125,0.46875 0.124375,0.124375 0.293,0.19425 0.46875,0.19425 0.812,0 1.590625,0.3225 2.16475,0.896625 0.574125,0.574125 0.89675,1.352875 0.89675,2.16475 V 24 H 5.9590375 v -1.57175 c 0,-0.811875 0.3225626,-1.590625 0.8966876,-2.16475 0.574125,-0.574125 1.3528,-0.896625 2.1647625,-0.896625 0.175825,0 0.34445,-0.06987 0.4687625,-0.19425 0.124325,-0.12425 0.194175,-0.292875 0.194175,-0.46875 v -2.15325 C 8.3084626,16.529375 6.9943376,15.973875 6.0204625,15 5.210675,14.19025 4.690225,13.14525 4.5256,12.025613 3.4059625,11.860988 2.3609625,11.340525 1.5511875,10.53075 0.55797375,9.5375376 0,8.1904501 0,6.7858501 V 1.4897625 H 4.469275 Z M 6.1229,1.653625 v 9.6015 c 0,0.966038 0.3837626,1.8925 1.0668501,2.575625 0.6831,0.683125 1.609575,1.066875 2.5756125,1.066875 H 11.33705 v 3.80625 c 0,0.614375 -0.244062,1.203625 -0.6785,1.638125 -0.43445,0.434375 -1.0236749,0.6785 -1.6380624,0.6785 -0.3733625,0 -0.73145,0.14825 -0.995475,0.412375 -0.24465,0.244625 -0.38995,0.57 -0.4099625,0.9135 H 16.385 c -0.02,-0.3435 -0.165375,-0.668875 -0.41,-0.9135 C 15.711,21.16875 15.352875,21.0205 14.9795,21.0205 c -0.614375,0 -1.203625,-0.244125 -1.638,-0.6785 C 12.907,19.9075 12.663,19.31825 12.663,18.703875 v -3.80625 h 1.571625 c 0.966,0 1.8925,-0.38375 2.575625,-1.066875 0.683125,-0.683125 1.066875,-1.609587 1.066875,-2.575625 v -9.6015 z M 4.469275,3.1433875 h -2.81565 v 3.6424626 c 0,0.9660375 0.3837625,1.8925125 1.06685,2.5756125 0.484675,0.4846625 1.091875,0.8186504 1.7488,0.9717754 z M 19.53075,10.333238 V 3.1433875 h 2.815625 v 3.6424626 c 0,0.9660375 -0.38375,1.8925125 -1.066875,2.5756125 -0.484625,0.4846625 -1.091875,0.8186504 -1.74875,0.9717754 z"
+    ></path>
   </g>
 </svg>
diff --git a/src/components/Icon/icons/background-broken.astro b/src/components/Icon/icons/background-broken.astro
index c2753318b..17642ea15 100644
--- a/src/components/Icon/icons/background-broken.astro
+++ b/src/components/Icon/icons/background-broken.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Example Icon</title>}
   <path
diff --git a/src/components/Icon/icons/bluesky.astro b/src/components/Icon/icons/bluesky.astro
index 79948ac6f..dd78142c1 100644
--- a/src/components/Icon/icons/bluesky.astro
+++ b/src/components/Icon/icons/bluesky.astro
@@ -16,12 +16,20 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>bluesky icon</title>}
-  <path d="M10.503 12.643c-0.77 -1.498 -2.867 -4.289 -4.817 -5.665C3.818 5.66 3.106 5.888 2.639 6.1 2.098 6.343 2 7.173 2 7.661c0 0.489 0.268 4.004 0.442 4.591 0.578 1.939 2.631 2.593 4.523 2.384 0.096 -0.014 0.195 -0.027 0.295 -0.038 -1.672 0.118 -2.989 0.738 -2.619 1.83 0.361 1.068 1.996 1.914 3.751 1.912 2.32 -0.002 3.609 -1.205 3.609 -1.205s1.289 1.202 3.609 1.205c1.754 0.001 3.389 -0.845 3.751 -1.912 0.369 -1.093 -0.947 -1.713 -2.62 -1.83 0.099 0.011 0.198 0.024 0.294 0.038 1.892 0.21 3.945 -0.445 4.523 -2.384 0.174 -0.587 0.442 -4.103 0.442 -4.59 0 -0.489 -0.098 -1.319 -0.639 -1.563 -0.467 -0.211 -1.179 -0.439 -3.047 0.879C13.37 8.355 11.273 11.146 10.503 12.643z" />
+  <path
+    d="M10.503 12.643c-0.77 -1.498 -2.867 -4.289 -4.817 -5.665C3.818 5.66 3.106 5.888 2.639 6.1 2.098 6.343 2 7.173 2 7.661c0 0.489 0.268 4.004 0.442 4.591 0.578 1.939 2.631 2.593 4.523 2.384 0.096 -0.014 0.195 -0.027 0.295 -0.038 -1.672 0.118 -2.989 0.738 -2.619 1.83 0.361 1.068 1.996 1.914 3.751 1.912 2.32 -0.002 3.609 -1.205 3.609 -1.205s1.289 1.202 3.609 1.205c1.754 0.001 3.389 -0.845 3.751 -1.912 0.369 -1.093 -0.947 -1.713 -2.62 -1.83 0.099 0.011 0.198 0.024 0.294 0.038 1.892 0.21 3.945 -0.445 4.523 -2.384 0.174 -0.587 0.442 -4.103 0.442 -4.59 0 -0.489 -0.098 -1.319 -0.639 -1.563 -0.467 -0.211 -1.179 -0.439 -3.047 0.879C13.37 8.355 11.273 11.146 10.503 12.643z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/book.astro b/src/components/Icon/icons/book.astro
index 55cf9f379..3a3367068 100644
--- a/src/components/Icon/icons/book.astro
+++ b/src/components/Icon/icons/book.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>User Avatar Icon</title>}
   <path
diff --git a/src/components/Icon/icons/bug.astro b/src/components/Icon/icons/bug.astro
index eaea81ba3..2a3b9ae0d 100644
--- a/src/components/Icon/icons/bug.astro
+++ b/src/components/Icon/icons/bug.astro
@@ -16,12 +16,21 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>code bug icon</title>}
-  <path fill="currentColor" d="M18.666 13.048l3.334 -1.915l-0.405 -0.783l-3.04 1.746l-2.418 -0.371c0.005 -0.214 -0.005 -0.427 -0.031 -0.635c0.531 -0.037 1.029 -0.243 1.409 -0.624c0.467 -0.467 0.67 -1.109 0.623 -1.771c1.441 -0.448 1.481 -1.47 1.48 -1.981c-0.002 -0.557 -0.518 -0.367 -0.573 -0.219c-0.326 0.823 -0.93 0.934 -1.411 0.77c-0.116 -0.173 -0.25 -0.339 -0.405 -0.493c-0.155 -0.154 -0.321 -0.289 -0.494 -0.405c-0.164 -0.48 -0.053 -1.084 0.771 -1.411c0.147 -0.055 0.338 -0.571 -0.219 -0.573c-0.512 -0.001 -1.534 0.039 -1.981 1.479c-0.662 -0.047 -1.304 0.156 -1.771 0.623c-0.381 0.381 -0.586 0.879 -0.624 1.41c-0.208 -0.026 -0.42 -0.036 -0.635 -0.031l-0.371 -2.417l1.746 -3.041L12.868 2l-1.915 3.335l0.407 2.646c-0.417 0.096 -0.831 0.25 -1.229 0.461l-1.439 -1.126l-3.728 -0.921l-0.285 0.887l3.553 0.878l1.064 0.833c-0.157 0.126 -0.31 0.261 -0.457 0.407c-0.205 0.205 -0.389 0.422 -0.553 0.647l-2.818 -0.158L2 11.754l0.38 0.797l3.226 -1.735l2.152 0.12c-0.762 1.638 -0.582 3.503 0.61 4.696c1.192 1.192 3.057 1.372 4.695 0.61l0.121 2.152l-1.735 3.226L12.246 22l1.864 -3.468l-0.158 -2.818c0.225 -0.164 0.442 -0.348 0.647 -0.553c0.146 -0.147 0.281 -0.3 0.407 -0.457l0.832 1.063l0.878 3.554l0.887 -0.285l-0.921 -3.728l-1.126 -1.439c0.211 -0.398 0.365 -0.812 0.461 -1.229L18.666 13.048z" />
+  <path
+    fill="currentColor"
+    d="M18.666 13.048l3.334 -1.915l-0.405 -0.783l-3.04 1.746l-2.418 -0.371c0.005 -0.214 -0.005 -0.427 -0.031 -0.635c0.531 -0.037 1.029 -0.243 1.409 -0.624c0.467 -0.467 0.67 -1.109 0.623 -1.771c1.441 -0.448 1.481 -1.47 1.48 -1.981c-0.002 -0.557 -0.518 -0.367 -0.573 -0.219c-0.326 0.823 -0.93 0.934 -1.411 0.77c-0.116 -0.173 -0.25 -0.339 -0.405 -0.493c-0.155 -0.154 -0.321 -0.289 -0.494 -0.405c-0.164 -0.48 -0.053 -1.084 0.771 -1.411c0.147 -0.055 0.338 -0.571 -0.219 -0.573c-0.512 -0.001 -1.534 0.039 -1.981 1.479c-0.662 -0.047 -1.304 0.156 -1.771 0.623c-0.381 0.381 -0.586 0.879 -0.624 1.41c-0.208 -0.026 -0.42 -0.036 -0.635 -0.031l-0.371 -2.417l1.746 -3.041L12.868 2l-1.915 3.335l0.407 2.646c-0.417 0.096 -0.831 0.25 -1.229 0.461l-1.439 -1.126l-3.728 -0.921l-0.285 0.887l3.553 0.878l1.064 0.833c-0.157 0.126 -0.31 0.261 -0.457 0.407c-0.205 0.205 -0.389 0.422 -0.553 0.647l-2.818 -0.158L2 11.754l0.38 0.797l3.226 -1.735l2.152 0.12c-0.762 1.638 -0.582 3.503 0.61 4.696c1.192 1.192 3.057 1.372 4.695 0.61l0.121 2.152l-1.735 3.226L12.246 22l1.864 -3.468l-0.158 -2.818c0.225 -0.164 0.442 -0.348 0.647 -0.553c0.146 -0.147 0.281 -0.3 0.407 -0.457l0.832 1.063l0.878 3.554l0.887 -0.285l-0.921 -3.728l-1.126 -1.439c0.211 -0.398 0.365 -0.812 0.461 -1.229L18.666 13.048z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/build-and-deploy.astro b/src/components/Icon/icons/build-and-deploy.astro
index 5d4d70529..d431d4851 100644
--- a/src/components/Icon/icons/build-and-deploy.astro
+++ b/src/components/Icon/icons/build-and-deploy.astro
@@ -15,40 +15,23 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>User Avatar Icon</title>}
-  <rect
-    x="0"
-    y="12.705882"
-    width="11.294118"
-    height="11.294118"
-    stroke-width="0.0662"
-  />
-  <rect
-    x="12.705882"
-    y="12.705882"
-    width="11.294118"
-    height="11.294118"
-    stroke-width="0.0662"
-  />
-  <rect
-    x="0"
-    y="0"
-    width="11.294118"
-    height="11.294118"
-    stroke-width="0.0662"
-  />
-  <rect
-    x="15.529412"
-    y="0"
-    width="8.4705877"
-    height="8.4705877"
-    stroke-width="0.0662"
-  />
+  <rect x="0" y="12.705882" width="11.294118" height="11.294118" stroke-width="0.0662"></rect>
+  <rect x="12.705882" y="12.705882" width="11.294118" height="11.294118" stroke-width="0.0662"
+  ></rect>
+  <rect x="0" y="0" width="11.294118" height="11.294118" stroke-width="0.0662"></rect>
+  <rect x="15.529412" y="0" width="8.4705877" height="8.4705877" stroke-width="0.0662"></rect>
 </svg>
diff --git a/src/components/Icon/icons/calendar-apple.astro b/src/components/Icon/icons/calendar-apple.astro
index 1a0ca1bc6..d49487923 100644
--- a/src/components/Icon/icons/calendar-apple.astro
+++ b/src/components/Icon/icons/calendar-apple.astro
@@ -15,57 +15,61 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>apple calendar icon</title>}
-<style
-   type="text/css"
-   id="style2">
-	.st0 {
-		enable-background: new;
-		fill: #FFF;
-	}
+  <style type="text/css" id="style2">
+    .st0 {
+      enable-background: new;
+      fill: #fff;
+    }
 
-	.st1 {
-		fill: #F00;
-	}
-</style>
-<path
-   class="st0"
-   d="m 23.998889,7.5074302 c 0,-0.2866534 0,-0.5733068 -0.0011,-0.8599602 -0.0011,-0.2410999 -0.0044,-0.4833109 -0.01111,-0.7244109 C 23.972224,5.3975279 23.941114,4.8664414 23.847785,4.3464654 23.753345,3.8187121 23.597796,3.3276237 23.353363,2.8476459 23.113374,2.3765566 22.800056,1.9454655 22.42674,1.5710384 22.052312,1.1977223 21.622332,0.8844035 21.150132,0.64441461 20.671265,0.39998148 20.180177,0.24554419 19.652423,0.15110412 19.132448,0.0577751 18.601361,0.02666543 18.07583,0.01222166 17.83473,0.0055553 17.592519,0.00333318 17.351419,0.00111106 17.064766,0 16.778112,0 16.491459,0 H 7.5074302 C 7.2207768,0 6.9341234,0 6.64747,0.00111106 6.4063701,0.00222212 6.1641591,0.0055553 5.9230591,0.01222166 5.3975279,0.02666543 4.8664414,0.0577751 4.3464654,0.15110412 3.8187121,0.24554419 3.3276237,0.40109254 2.848757,0.64441461 2.3776677,0.8844035 1.9454655,1.1977223 1.5721494,1.5710384 1.1977223,1.9454655 0.88551456,2.3754456 0.64552567,2.8476459 0.40109254,3.3276237 0.24665525,3.8187121 0.15110412,4.3464654 0.0577751,4.8664414 0.02666543,5.3975279 0.01333272,5.9230591 0.00666636,6.1641591 0.00333318,6.4063701 0.00222212,6.64747 0,6.9341234 0,7.2207768 0,7.5074302 v 8.9840288 c 0,0.286653 0,0.573307 0.00222212,0.85996 0.00111106,0.2411 0.00444424,0.483311 0.0111106,0.724411 0.01444377,0.525531 0.04555344,1.056618 0.13888246,1.576593 0.0944401,0.527754 0.24998842,1.019953 0.49442155,1.49882 0.23998889,0.471089 0.55330767,0.90218 0.92662377,1.275497 0.373316,0.374427 0.8044072,0.687745 1.2766076,0.927734 0.4788667,0.244433 0.9699551,0.398871 1.4977084,0.493311 0.5199759,0.09333 1.0510625,0.124439 1.5765937,0.138882 0.2410999,0.0067 0.4833109,0.0089 0.7244109,0.01111 0.2866534,0.0011 0.5733068,0.0011 0.8599602,0.0011 H 16.49257 c 0.286653,0 0.573307,0 0.85996,-0.0011 0.2411,-0.0011 0.483311,-0.0044 0.724411,-0.01111 0.525531,-0.01444 1.056618,-0.04555 1.576594,-0.138882 0.527753,-0.09444 1.018841,-0.249989 1.497708,-0.493311 0.471089,-0.239989 0.90218,-0.553307 1.276608,-0.927734 0.374427,-0.373317 0.686634,-0.804408 0.926623,-1.275497 0.244433,-0.479978 0.398871,-0.971066 0.494422,-1.49882 0.09333,-0.519975 0.124439,-1.049951 0.138882,-1.576593 0.0067,-0.2411 0.0089,-0.483311 0.01111,-0.724411 C 24,17.064766 24,16.778112 24,16.491459 V 7.5074302 Z"
-   id="path6"
-   style="stroke-width:0.0111" /><path
-   d="M 8.9573631,19.633535 V 8.4684968 H 8.4884959 L 5.6441831,10.351743 v 0.476645 L 8.4562752,8.9873617 H 8.489607 V 19.634647 h 0.4677561 z"
-   id="path8"
-   style="stroke-width:0.0111" /><path
-   d="m 11.736123,8.4684968 v 0.427758 h 6.13305 v 0.033332 L 12.943845,19.634647 h 0.526642 L 18.354706,8.9206981 V 8.4684968 Z"
-   id="path10"
-   style="stroke-width:0.0111" /><path
-   class="st1"
-   d="M 4.3609092,6.2785982 V 3.8642655 h 0.00889 L 5.324198,6.031943 H 5.64085 L 6.591917,3.8642655 H 6.603028 V 6.2785982 H 6.91968 V 3.0809685 H 6.58414 L 5.4886348,5.6430721 h -0.00889 L 4.3809083,3.0820795 h -0.33554 v 3.1965187 z"
-   id="path14"
-   style="stroke-width:0.0111" /><path
-   class="st1"
-   d="m 8.6407111,3.7842692 c -0.6677469,0 -1.0388408,0.4855331 -1.0388408,1.1432805 v 0.2410999 c 0,0.6610805 0.3677607,1.1488357 1.0388408,1.1488357 0.669969,0 1.0355076,-0.4877552 1.0355076,-1.1488357 V 4.9275497 C 9.6773298,4.2698023 9.3062358,3.7842692 8.6407111,3.7842692 Z m 0,0.3022083 c 0.4355354,0 0.6910791,0.3255405 0.6910791,0.857738 v 0.2066571 c 0,0.5344197 -0.2555437,0.8599602 -0.6910791,0.8599602 -0.4388686,0 -0.6933013,-0.3277626 -0.6933013,-0.8599602 V 4.9442155 c 0,-0.5310865 0.2555438,-0.857738 0.6933013,-0.857738 z"
-   id="path16"
-   style="stroke-width:0.0111" /><path
-   class="st1"
-   d="m 10.321744,6.2785982 h 0.344429 V 4.7753345 c 0,-0.3510949 0.192213,-0.6755243 0.642192,-0.6755243 0.384427,0 0.631082,0.2322115 0.631082,0.651081 v 1.5254849 h 0.344429 V 4.6986714 c 0,-0.595528 -0.377761,-0.9166243 -0.883293,-0.9166243 -0.403314,0 -0.633304,0.2111014 -0.724411,0.3755382 h -0.01 v -0.33554 h -0.344429 z"
-   id="path18"
-   style="stroke-width:0.0111" /><path
-   class="st1"
-   d="m 13.869358,3.7820471 c -0.609972,0 -0.982177,0.4755336 -0.982177,1.1410583 v 0.2510995 c 0,0.6777464 0.344429,1.1410583 0.982177,1.1410583 0.352206,0 0.604416,-0.1777696 0.735521,-0.4199806 h 0.0089 v 0.3822046 h 0.32554 V 2.9098653 H 14.59488 v 1.265497 h -0.0089 C 14.467108,3.9631499 14.213786,3.7820471 13.869358,3.7820471 Z m 0.03111,0.3077636 c 0.435535,0 0.7033,0.3422063 0.7033,0.8488495 v 0.2277673 c 0,0.5277533 -0.259988,0.8432943 -0.698856,0.8432943 -0.388871,0 -0.672191,-0.2833202 -0.672191,-0.8455164 v -0.222212 c -0.0011,-0.5733068 0.287764,-0.8521827 0.667747,-0.8521827 z"
-   id="path20"
-   style="stroke-width:0.0111" /><path
-   class="st1"
-   d="m 17.071432,5.9597241 h 0.0089 v 0.3188741 h 0.33554 V 4.5720106 c 0,-0.5044211 -0.369982,-0.7877414 -0.88107,-0.7877414 -0.568862,0 -0.862182,0.297764 -0.89107,0.724411 h 0.325541 c 0.02778,-0.259988 0.213323,-0.426647 0.551085,-0.426647 0.348873,0 0.551086,0.185547 0.551086,0.5299755 v 0.2644322 h -0.667747 c -0.559974,0.00222 -0.855516,0.2744317 -0.855516,0.6988565 0,0.4499792 0.325541,0.743299 0.802185,0.743299 0.374427,-0.00111 0.603306,-0.1622148 0.721078,-0.3588723 z m -0.63997,0.061108 c -0.276654,0 -0.527754,-0.147771 -0.527754,-0.4522013 0,-0.2388778 0.152215,-0.409981 0.511088,-0.409981 h 0.656636 V 5.460858 c 0,0.3299847 -0.274432,0.5599741 -0.63997,0.5599741 z"
-   id="path22"
-   style="stroke-width:0.0111" /><path
-   class="st1"
-   d="M 19.953521,3.8242674 H 19.58576 L 18.884681,5.8775057 H 18.87246 L 18.171381,3.8242674 H 17.788065 L 18.70469,6.3174853 18.65802,6.4674784 C 18.5858,6.7208 18.461363,6.8685709 18.172487,6.8685709 c -0.05333,0 -0.141105,-0.00667 -0.179992,-0.014444 v 0.2933198 c 0.06111,0.00889 0.152216,0.018888 0.234434,0.018888 0.477756,0 0.642192,-0.3277626 0.771075,-0.6821906 l 0.07,-0.1833249 z"
-   id="path24"
-   style="stroke-width:0.0111" />
+    .st1 {
+      fill: #f00;
+    }
+  </style>
+  <path
+    class="st0"
+    d="m 23.998889,7.5074302 c 0,-0.2866534 0,-0.5733068 -0.0011,-0.8599602 -0.0011,-0.2410999 -0.0044,-0.4833109 -0.01111,-0.7244109 C 23.972224,5.3975279 23.941114,4.8664414 23.847785,4.3464654 23.753345,3.8187121 23.597796,3.3276237 23.353363,2.8476459 23.113374,2.3765566 22.800056,1.9454655 22.42674,1.5710384 22.052312,1.1977223 21.622332,0.8844035 21.150132,0.64441461 20.671265,0.39998148 20.180177,0.24554419 19.652423,0.15110412 19.132448,0.0577751 18.601361,0.02666543 18.07583,0.01222166 17.83473,0.0055553 17.592519,0.00333318 17.351419,0.00111106 17.064766,0 16.778112,0 16.491459,0 H 7.5074302 C 7.2207768,0 6.9341234,0 6.64747,0.00111106 6.4063701,0.00222212 6.1641591,0.0055553 5.9230591,0.01222166 5.3975279,0.02666543 4.8664414,0.0577751 4.3464654,0.15110412 3.8187121,0.24554419 3.3276237,0.40109254 2.848757,0.64441461 2.3776677,0.8844035 1.9454655,1.1977223 1.5721494,1.5710384 1.1977223,1.9454655 0.88551456,2.3754456 0.64552567,2.8476459 0.40109254,3.3276237 0.24665525,3.8187121 0.15110412,4.3464654 0.0577751,4.8664414 0.02666543,5.3975279 0.01333272,5.9230591 0.00666636,6.1641591 0.00333318,6.4063701 0.00222212,6.64747 0,6.9341234 0,7.2207768 0,7.5074302 v 8.9840288 c 0,0.286653 0,0.573307 0.00222212,0.85996 0.00111106,0.2411 0.00444424,0.483311 0.0111106,0.724411 0.01444377,0.525531 0.04555344,1.056618 0.13888246,1.576593 0.0944401,0.527754 0.24998842,1.019953 0.49442155,1.49882 0.23998889,0.471089 0.55330767,0.90218 0.92662377,1.275497 0.373316,0.374427 0.8044072,0.687745 1.2766076,0.927734 0.4788667,0.244433 0.9699551,0.398871 1.4977084,0.493311 0.5199759,0.09333 1.0510625,0.124439 1.5765937,0.138882 0.2410999,0.0067 0.4833109,0.0089 0.7244109,0.01111 0.2866534,0.0011 0.5733068,0.0011 0.8599602,0.0011 H 16.49257 c 0.286653,0 0.573307,0 0.85996,-0.0011 0.2411,-0.0011 0.483311,-0.0044 0.724411,-0.01111 0.525531,-0.01444 1.056618,-0.04555 1.576594,-0.138882 0.527753,-0.09444 1.018841,-0.249989 1.497708,-0.493311 0.471089,-0.239989 0.90218,-0.553307 1.276608,-0.927734 0.374427,-0.373317 0.686634,-0.804408 0.926623,-1.275497 0.244433,-0.479978 0.398871,-0.971066 0.494422,-1.49882 0.09333,-0.519975 0.124439,-1.049951 0.138882,-1.576593 0.0067,-0.2411 0.0089,-0.483311 0.01111,-0.724411 C 24,17.064766 24,16.778112 24,16.491459 V 7.5074302 Z"
+    id="path6"
+    style="stroke-width:0.0111"></path><path
+    d="M 8.9573631,19.633535 V 8.4684968 H 8.4884959 L 5.6441831,10.351743 v 0.476645 L 8.4562752,8.9873617 H 8.489607 V 19.634647 h 0.4677561 z"
+    id="path8"
+    style="stroke-width:0.0111"></path><path
+    d="m 11.736123,8.4684968 v 0.427758 h 6.13305 v 0.033332 L 12.943845,19.634647 h 0.526642 L 18.354706,8.9206981 V 8.4684968 Z"
+    id="path10"
+    style="stroke-width:0.0111"></path><path
+    class="st1"
+    d="M 4.3609092,6.2785982 V 3.8642655 h 0.00889 L 5.324198,6.031943 H 5.64085 L 6.591917,3.8642655 H 6.603028 V 6.2785982 H 6.91968 V 3.0809685 H 6.58414 L 5.4886348,5.6430721 h -0.00889 L 4.3809083,3.0820795 h -0.33554 v 3.1965187 z"
+    id="path14"
+    style="stroke-width:0.0111"></path><path
+    class="st1"
+    d="m 8.6407111,3.7842692 c -0.6677469,0 -1.0388408,0.4855331 -1.0388408,1.1432805 v 0.2410999 c 0,0.6610805 0.3677607,1.1488357 1.0388408,1.1488357 0.669969,0 1.0355076,-0.4877552 1.0355076,-1.1488357 V 4.9275497 C 9.6773298,4.2698023 9.3062358,3.7842692 8.6407111,3.7842692 Z m 0,0.3022083 c 0.4355354,0 0.6910791,0.3255405 0.6910791,0.857738 v 0.2066571 c 0,0.5344197 -0.2555437,0.8599602 -0.6910791,0.8599602 -0.4388686,0 -0.6933013,-0.3277626 -0.6933013,-0.8599602 V 4.9442155 c 0,-0.5310865 0.2555438,-0.857738 0.6933013,-0.857738 z"
+    id="path16"
+    style="stroke-width:0.0111"></path><path
+    class="st1"
+    d="m 10.321744,6.2785982 h 0.344429 V 4.7753345 c 0,-0.3510949 0.192213,-0.6755243 0.642192,-0.6755243 0.384427,0 0.631082,0.2322115 0.631082,0.651081 v 1.5254849 h 0.344429 V 4.6986714 c 0,-0.595528 -0.377761,-0.9166243 -0.883293,-0.9166243 -0.403314,0 -0.633304,0.2111014 -0.724411,0.3755382 h -0.01 v -0.33554 h -0.344429 z"
+    id="path18"
+    style="stroke-width:0.0111"></path><path
+    class="st1"
+    d="m 13.869358,3.7820471 c -0.609972,0 -0.982177,0.4755336 -0.982177,1.1410583 v 0.2510995 c 0,0.6777464 0.344429,1.1410583 0.982177,1.1410583 0.352206,0 0.604416,-0.1777696 0.735521,-0.4199806 h 0.0089 v 0.3822046 h 0.32554 V 2.9098653 H 14.59488 v 1.265497 h -0.0089 C 14.467108,3.9631499 14.213786,3.7820471 13.869358,3.7820471 Z m 0.03111,0.3077636 c 0.435535,0 0.7033,0.3422063 0.7033,0.8488495 v 0.2277673 c 0,0.5277533 -0.259988,0.8432943 -0.698856,0.8432943 -0.388871,0 -0.672191,-0.2833202 -0.672191,-0.8455164 v -0.222212 c -0.0011,-0.5733068 0.287764,-0.8521827 0.667747,-0.8521827 z"
+    id="path20"
+    style="stroke-width:0.0111"></path><path
+    class="st1"
+    d="m 17.071432,5.9597241 h 0.0089 v 0.3188741 h 0.33554 V 4.5720106 c 0,-0.5044211 -0.369982,-0.7877414 -0.88107,-0.7877414 -0.568862,0 -0.862182,0.297764 -0.89107,0.724411 h 0.325541 c 0.02778,-0.259988 0.213323,-0.426647 0.551085,-0.426647 0.348873,0 0.551086,0.185547 0.551086,0.5299755 v 0.2644322 h -0.667747 c -0.559974,0.00222 -0.855516,0.2744317 -0.855516,0.6988565 0,0.4499792 0.325541,0.743299 0.802185,0.743299 0.374427,-0.00111 0.603306,-0.1622148 0.721078,-0.3588723 z m -0.63997,0.061108 c -0.276654,0 -0.527754,-0.147771 -0.527754,-0.4522013 0,-0.2388778 0.152215,-0.409981 0.511088,-0.409981 h 0.656636 V 5.460858 c 0,0.3299847 -0.274432,0.5599741 -0.63997,0.5599741 z"
+    id="path22"
+    style="stroke-width:0.0111"></path><path
+    class="st1"
+    d="M 19.953521,3.8242674 H 19.58576 L 18.884681,5.8775057 H 18.87246 L 18.171381,3.8242674 H 17.788065 L 18.70469,6.3174853 18.65802,6.4674784 C 18.5858,6.7208 18.461363,6.8685709 18.172487,6.8685709 c -0.05333,0 -0.141105,-0.00667 -0.179992,-0.014444 v 0.2933198 c 0.06111,0.00889 0.152216,0.018888 0.234434,0.018888 0.477756,0 0.642192,-0.3277626 0.771075,-0.6821906 l 0.07,-0.1833249 z"
+    id="path24"
+    style="stroke-width:0.0111"></path>
 </svg>
diff --git a/src/components/Icon/icons/calendar-generic-ical.astro b/src/components/Icon/icons/calendar-generic-ical.astro
index 1123a61b1..895801653 100644
--- a/src/components/Icon/icons/calendar-generic-ical.astro
+++ b/src/components/Icon/icons/calendar-generic-ical.astro
@@ -16,26 +16,54 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 610.398 610.398"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>calendar-generic-ical icon</title>}
   <g>
     <g>
-      <path d="M159.567,0h-15.329c-1.956,0-3.811,0.411-5.608,0.995c-8.979,2.912-15.616,12.498-15.616,23.997v10.552v27.009v14.052 c0,2.611,0.435,5.078,1.066,7.44c2.702,10.146,10.653,17.552,20.158,17.552h15.329c11.724,0,21.224-11.188,21.224-24.992V62.553 V35.544V24.992C180.791,11.188,171.291,0,159.567,0z"/>
-      <path d="M461.288,0h-15.329c-11.724,0-21.224,11.188-21.224,24.992v10.552v27.009v14.052c0,13.804,9.5,24.992,21.224,24.992 h15.329c11.724,0,21.224-11.188,21.224-24.992V62.553V35.544V24.992C482.507,11.188,473.007,0,461.288,0z"/>
-      <path d="M539.586,62.553h-37.954v14.052c0,24.327-18.102,44.117-40.349,44.117h-15.329c-22.247,0-40.349-19.79-40.349-44.117 V62.553H199.916v14.052c0,24.327-18.102,44.117-40.349,44.117h-15.329c-22.248,0-40.349-19.79-40.349-44.117V62.553H70.818 c-21.066,0-38.15,16.017-38.15,35.764v476.318c0,19.784,17.083,35.764,38.15,35.764h468.763c21.085,0,38.149-15.984,38.149-35.764 V98.322C577.735,78.575,560.671,62.553,539.586,62.553z M527.757,557.9l-446.502-0.172V173.717h446.502V557.9z"/>
-      <path d="M353.017,266.258h117.428c10.193,0,18.437-10.179,18.437-22.759s-8.248-22.759-18.437-22.759H353.017 c-10.193,0-18.437,10.179-18.437,22.759C334.58,256.074,342.823,266.258,353.017,266.258z"/>
-      <path d="M353.017,348.467h117.428c10.193,0,18.437-10.179,18.437-22.759c0-12.579-8.248-22.758-18.437-22.758H353.017 c-10.193,0-18.437,10.179-18.437,22.758C334.58,338.288,342.823,348.467,353.017,348.467z"/>
-      <path d="M353.017,430.676h117.428c10.193,0,18.437-10.18,18.437-22.759s-8.248-22.759-18.437-22.759H353.017 c-10.193,0-18.437,10.18-18.437,22.759S342.823,430.676,353.017,430.676z"/>
-      <path d="M353.017,512.89h117.428c10.193,0,18.437-10.18,18.437-22.759c0-12.58-8.248-22.759-18.437-22.759H353.017 c-10.193,0-18.437,10.179-18.437,22.759C334.58,502.71,342.823,512.89,353.017,512.89z"/>
-      <path d="M145.032,266.258H262.46c10.193,0,18.436-10.179,18.436-22.759s-8.248-22.759-18.436-22.759H145.032 c-10.194,0-18.437,10.179-18.437,22.759C126.596,256.074,134.838,266.258,145.032,266.258z"/>
-      <path d="M145.032,348.467H262.46c10.193,0,18.436-10.179,18.436-22.759c0-12.579-8.248-22.758-18.436-22.758H145.032 c-10.194,0-18.437,10.179-18.437,22.758C126.596,338.288,134.838,348.467,145.032,348.467z"/>
-      <path d="M145.032,430.676H262.46c10.193,0,18.436-10.18,18.436-22.759s-8.248-22.759-18.436-22.759H145.032 c-10.194,0-18.437,10.18-18.437,22.759S134.838,430.676,145.032,430.676z"/>
-      <path d="M145.032,512.89H262.46c10.193,0,18.436-10.18,18.436-22.759c0-12.58-8.248-22.759-18.436-22.759H145.032 c-10.194,0-18.437,10.179-18.437,22.759C126.596,502.71,134.838,512.89,145.032,512.89z"/>
+      <path
+        d="M159.567,0h-15.329c-1.956,0-3.811,0.411-5.608,0.995c-8.979,2.912-15.616,12.498-15.616,23.997v10.552v27.009v14.052 c0,2.611,0.435,5.078,1.066,7.44c2.702,10.146,10.653,17.552,20.158,17.552h15.329c11.724,0,21.224-11.188,21.224-24.992V62.553 V35.544V24.992C180.791,11.188,171.291,0,159.567,0z"
+      ></path>
+      <path
+        d="M461.288,0h-15.329c-11.724,0-21.224,11.188-21.224,24.992v10.552v27.009v14.052c0,13.804,9.5,24.992,21.224,24.992 h15.329c11.724,0,21.224-11.188,21.224-24.992V62.553V35.544V24.992C482.507,11.188,473.007,0,461.288,0z"
+      ></path>
+      <path
+        d="M539.586,62.553h-37.954v14.052c0,24.327-18.102,44.117-40.349,44.117h-15.329c-22.247,0-40.349-19.79-40.349-44.117 V62.553H199.916v14.052c0,24.327-18.102,44.117-40.349,44.117h-15.329c-22.248,0-40.349-19.79-40.349-44.117V62.553H70.818 c-21.066,0-38.15,16.017-38.15,35.764v476.318c0,19.784,17.083,35.764,38.15,35.764h468.763c21.085,0,38.149-15.984,38.149-35.764 V98.322C577.735,78.575,560.671,62.553,539.586,62.553z M527.757,557.9l-446.502-0.172V173.717h446.502V557.9z"
+      ></path>
+      <path
+        d="M353.017,266.258h117.428c10.193,0,18.437-10.179,18.437-22.759s-8.248-22.759-18.437-22.759H353.017 c-10.193,0-18.437,10.179-18.437,22.759C334.58,256.074,342.823,266.258,353.017,266.258z"
+      ></path>
+      <path
+        d="M353.017,348.467h117.428c10.193,0,18.437-10.179,18.437-22.759c0-12.579-8.248-22.758-18.437-22.758H353.017 c-10.193,0-18.437,10.179-18.437,22.758C334.58,338.288,342.823,348.467,353.017,348.467z"
+      ></path>
+      <path
+        d="M353.017,430.676h117.428c10.193,0,18.437-10.18,18.437-22.759s-8.248-22.759-18.437-22.759H353.017 c-10.193,0-18.437,10.18-18.437,22.759S342.823,430.676,353.017,430.676z"
+      ></path>
+      <path
+        d="M353.017,512.89h117.428c10.193,0,18.437-10.18,18.437-22.759c0-12.58-8.248-22.759-18.437-22.759H353.017 c-10.193,0-18.437,10.179-18.437,22.759C334.58,502.71,342.823,512.89,353.017,512.89z"
+      ></path>
+      <path
+        d="M145.032,266.258H262.46c10.193,0,18.436-10.179,18.436-22.759s-8.248-22.759-18.436-22.759H145.032 c-10.194,0-18.437,10.179-18.437,22.759C126.596,256.074,134.838,266.258,145.032,266.258z"
+      ></path>
+      <path
+        d="M145.032,348.467H262.46c10.193,0,18.436-10.179,18.436-22.759c0-12.579-8.248-22.758-18.436-22.758H145.032 c-10.194,0-18.437,10.179-18.437,22.758C126.596,338.288,134.838,348.467,145.032,348.467z"
+      ></path>
+      <path
+        d="M145.032,430.676H262.46c10.193,0,18.436-10.18,18.436-22.759s-8.248-22.759-18.436-22.759H145.032 c-10.194,0-18.437,10.18-18.437,22.759S134.838,430.676,145.032,430.676z"
+      ></path>
+      <path
+        d="M145.032,512.89H262.46c10.193,0,18.436-10.18,18.436-22.759c0-12.58-8.248-22.759-18.436-22.759H145.032 c-10.194,0-18.437,10.179-18.437,22.759C126.596,502.71,134.838,512.89,145.032,512.89z"
+      ></path>
     </g>
   </g>
 </svg>
diff --git a/src/components/Icon/icons/calendar-google.astro b/src/components/Icon/icons/calendar-google.astro
index dc10c3e72..48ffa2554 100644
--- a/src/components/Icon/icons/calendar-google.astro
+++ b/src/components/Icon/icons/calendar-google.astro
@@ -16,39 +16,45 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Google calendar icon</title>}
   <path
-   fill="#ffffff"
-   d="M 18.31584,5.68416 12.63168,5.0526 5.68428,5.68416 5.0526,12 5.68416,18.31584 12,19.10532 18.31584,18.31584 18.9474,11.8422 Z"
-   style="stroke-width:0.12" /><path
-   fill="#1a73e8"
-   d="M 8.27532,15.48312 C 7.80324,15.16416 7.47636,14.69844 7.29792,14.0826 l 1.09584,-0.45156 c 0.09948,0.37896 0.27312,0.6726 0.52104,0.88104 0.24636,0.20844 0.54636,0.31104 0.89688,0.31104 0.35844,0 0.66636,-0.10896 0.92364,-0.32688 0.25728,-0.21792 0.38688,-0.49584 0.38688,-0.83208 0,-0.34416 -0.13584,-0.62532 -0.4074,-0.84312 -0.27156,-0.2178 -0.6126,-0.32688 -1.02,-0.32688 H 9.06168 V 11.40948 H 9.63 c 0.35052,0 0.64584,-0.09468 0.88584,-0.28416 0.24,-0.18948 0.36,-0.44844 0.36,-0.77844 0,-0.29364 -0.1074,-0.5274 -0.32208,-0.7026 C 10.33908,9.46908 10.0674,9.38064 9.7374,9.38064 9.41532,9.38064 9.15948,9.46596 8.97,9.63804 8.78052,9.81012 8.64312,10.02168 8.55636,10.27116 L 7.47168,9.8196 C 7.61532,9.4122 7.87908,9.0522 8.26584,8.74116 8.65272,8.43012 9.14688,8.27376 9.74688,8.27376 c 0.44364,0 0.84312,0.08532 1.19688,0.2574 0.35364,0.17208 0.63156,0.41052 0.83208,0.71364 0.20052,0.30468 0.3,0.64584 0.3,1.02468 0,0.38688 -0.09312,0.71364 -0.27948,0.98208 C 11.61,11.52 11.38104,11.7252 11.10948,11.86896 v 0.06468 c 0.35844,0.15 0.65052,0.37896 0.88104,0.68688 0.22896,0.30792 0.34416,0.67584 0.34416,1.10532 0,0.42948 -0.10896,0.81312 -0.32688,1.14948 -0.21792,0.33636 -0.51948,0.60156 -0.90156,0.79416 C 10.7226,15.86208 10.29156,15.96 9.81312,15.96 9.25896,15.96156 8.7474,15.80208 8.27532,15.48312 Z"
-   style="stroke-width:0.12" /><path
-   fill="#1a73e8"
-   d="m 15,10.04532 -1.19688,0.87 -0.60156,-0.9126 L 15.36,8.44584 h 0.8274 v 7.34364 H 15 Z"
-   style="stroke-width:0.12" /><path
-   fill="#ea4335"
-   d="M 18.31584,24 24,18.31584 l -2.84208,-1.26312 -2.84208,1.26312 -1.26312,2.84208 z"
-   style="stroke-width:0.12" /><path
-   fill="#34a853"
-   d="M 4.42104,21.15792 5.68416,24 H 18.31572 V 18.31584 H 5.68416 Z"
-   style="stroke-width:0.12" /><path
-   fill="#4285f4"
-   d="M 1.89468,0 C 0.84792,0 0,0.84792 0,1.89468 v 16.42104 l 2.84208,1.26312 2.84208,-1.26312 V 5.68416 H 18.31572 L 19.57884,2.84208 18.31584,0 Z"
-   style="stroke-width:0.12" /><path
-   fill="#188038"
-   d="m 0,18.31584 v 3.78948 C 0,23.1522 0.84792,24 1.89468,24 h 3.78948 v -5.68416 z"
-   style="stroke-width:0.12" /><path
-   fill="#fbbc04"
-   d="M 18.31584,5.68416 V 18.31572 H 24 V 5.68416 L 21.15792,4.42104 Z"
-   style="stroke-width:0.12" /><path
-   fill="#1967d2"
-   d="M 24,5.68416 V 1.89468 C 24,0.8478 23.15208,0 22.10532,0 h -3.78948 v 5.68416 z"
-   style="stroke-width:0.12" />
+    fill="#ffffff"
+    d="M 18.31584,5.68416 12.63168,5.0526 5.68428,5.68416 5.0526,12 5.68416,18.31584 12,19.10532 18.31584,18.31584 18.9474,11.8422 Z"
+    style="stroke-width:0.12"></path><path
+    fill="#1a73e8"
+    d="M 8.27532,15.48312 C 7.80324,15.16416 7.47636,14.69844 7.29792,14.0826 l 1.09584,-0.45156 c 0.09948,0.37896 0.27312,0.6726 0.52104,0.88104 0.24636,0.20844 0.54636,0.31104 0.89688,0.31104 0.35844,0 0.66636,-0.10896 0.92364,-0.32688 0.25728,-0.21792 0.38688,-0.49584 0.38688,-0.83208 0,-0.34416 -0.13584,-0.62532 -0.4074,-0.84312 -0.27156,-0.2178 -0.6126,-0.32688 -1.02,-0.32688 H 9.06168 V 11.40948 H 9.63 c 0.35052,0 0.64584,-0.09468 0.88584,-0.28416 0.24,-0.18948 0.36,-0.44844 0.36,-0.77844 0,-0.29364 -0.1074,-0.5274 -0.32208,-0.7026 C 10.33908,9.46908 10.0674,9.38064 9.7374,9.38064 9.41532,9.38064 9.15948,9.46596 8.97,9.63804 8.78052,9.81012 8.64312,10.02168 8.55636,10.27116 L 7.47168,9.8196 C 7.61532,9.4122 7.87908,9.0522 8.26584,8.74116 8.65272,8.43012 9.14688,8.27376 9.74688,8.27376 c 0.44364,0 0.84312,0.08532 1.19688,0.2574 0.35364,0.17208 0.63156,0.41052 0.83208,0.71364 0.20052,0.30468 0.3,0.64584 0.3,1.02468 0,0.38688 -0.09312,0.71364 -0.27948,0.98208 C 11.61,11.52 11.38104,11.7252 11.10948,11.86896 v 0.06468 c 0.35844,0.15 0.65052,0.37896 0.88104,0.68688 0.22896,0.30792 0.34416,0.67584 0.34416,1.10532 0,0.42948 -0.10896,0.81312 -0.32688,1.14948 -0.21792,0.33636 -0.51948,0.60156 -0.90156,0.79416 C 10.7226,15.86208 10.29156,15.96 9.81312,15.96 9.25896,15.96156 8.7474,15.80208 8.27532,15.48312 Z"
+    style="stroke-width:0.12"></path><path
+    fill="#1a73e8"
+    d="m 15,10.04532 -1.19688,0.87 -0.60156,-0.9126 L 15.36,8.44584 h 0.8274 v 7.34364 H 15 Z"
+    style="stroke-width:0.12"></path><path
+    fill="#ea4335"
+    d="M 18.31584,24 24,18.31584 l -2.84208,-1.26312 -2.84208,1.26312 -1.26312,2.84208 z"
+    style="stroke-width:0.12"></path><path
+    fill="#34a853"
+    d="M 4.42104,21.15792 5.68416,24 H 18.31572 V 18.31584 H 5.68416 Z"
+    style="stroke-width:0.12"></path><path
+    fill="#4285f4"
+    d="M 1.89468,0 C 0.84792,0 0,0.84792 0,1.89468 v 16.42104 l 2.84208,1.26312 2.84208,-1.26312 V 5.68416 H 18.31572 L 19.57884,2.84208 18.31584,0 Z"
+    style="stroke-width:0.12"></path><path
+    fill="#188038"
+    d="m 0,18.31584 v 3.78948 C 0,23.1522 0.84792,24 1.89468,24 h 3.78948 v -5.68416 z"
+    style="stroke-width:0.12"></path><path
+    fill="#fbbc04"
+    d="M 18.31584,5.68416 V 18.31572 H 24 V 5.68416 L 21.15792,4.42104 Z"
+    style="stroke-width:0.12"></path><path
+    fill="#1967d2"
+    d="M 24,5.68416 V 1.89468 C 24,0.8478 23.15208,0 22.10532,0 h -3.78948 v 5.68416 z"
+    style="stroke-width:0.12"></path>
 </svg>
diff --git a/src/components/Icon/icons/calendar-outlook.astro b/src/components/Icon/icons/calendar-outlook.astro
index 37b5d72b6..b1862341b 100644
--- a/src/components/Icon/icons/calendar-outlook.astro
+++ b/src/components/Icon/icons/calendar-outlook.astro
@@ -15,26 +15,28 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Outlook calendar icon</title>}
   <path
-      d="m 19.484,7.937 v 5.477 l 1.916,1.205 a 0.489,0.489 0 0 0 0.21,0 L 29.848,9.065 A 1.174,1.174 0 0 0 28.889,7.937 Z"
-      style="fill:#0072c6"
-  />
+    d="m 19.484,7.937 v 5.477 l 1.916,1.205 a 0.489,0.489 0 0 0 0.21,0 L 29.848,9.065 A 1.174,1.174 0 0 0 28.889,7.937 Z"
+    style="fill:#0072c6"></path>
   <path
-      d="m 19.484,15.457 1.747,1.2 a 0.522,0.522 0 0 0 0.543,0 c -0.3,0.181 8.073,-5.378 8.073,-5.378 v 10.066 a 1.408,1.408 0 0 1 -1.49,1.555 h -8.874 v -7.443 z"
-      style="fill:#0072c6"
-  />
+    d="m 19.484,15.457 1.747,1.2 a 0.522,0.522 0 0 0 0.543,0 c -0.3,0.181 8.073,-5.378 8.073,-5.378 v 10.066 a 1.408,1.408 0 0 1 -1.49,1.555 h -8.874 v -7.443 z"
+    style="fill:#0072c6"></path>
   <path
-      d="M 10.44,12.932 A 1.609,1.609 0 0 0 9.02,13.77 4.131,4.131 0 0 0 8.494,15.988 4.05,4.05 0 0 0 9.02,18.2 a 1.6,1.6 0 0 0 2.771,0.022 4.014,4.014 0 0 0 0.515,-2.2 4.369,4.369 0 0 0 -0.5,-2.281 1.536,1.536 0 0 0 -1.366,-0.809 z"
-      style="fill:#0072c6"
-  />
+    d="M 10.44,12.932 A 1.609,1.609 0 0 0 9.02,13.77 4.131,4.131 0 0 0 8.494,15.988 4.05,4.05 0 0 0 9.02,18.2 a 1.6,1.6 0 0 0 2.771,0.022 4.014,4.014 0 0 0 0.515,-2.2 4.369,4.369 0 0 0 -0.5,-2.281 1.536,1.536 0 0 0 -1.366,-0.809 z"
+    style="fill:#0072c6"></path>
   <path
-      d="M 2.153,5.155 V 26.582 L 18.453,30 V 2 Z m 10.908,14.336 a 3.231,3.231 0 0 1 -2.7,1.361 3.19,3.19 0 0 1 -2.64,-1.318 5.459,5.459 0 0 1 -1.015,-3.434 5.868,5.868 0 0 1 1.036,-3.616 3.267,3.267 0 0 1 2.744,-1.384 3.116,3.116 0 0 1 2.61,1.321 5.639,5.639 0 0 1 1,3.484 5.763,5.763 0 0 1 -1.035,3.586 z"
-      style="fill:#0072c6"
-  />
+    d="M 2.153,5.155 V 26.582 L 18.453,30 V 2 Z m 10.908,14.336 a 3.231,3.231 0 0 1 -2.7,1.361 3.19,3.19 0 0 1 -2.64,-1.318 5.459,5.459 0 0 1 -1.015,-3.434 5.868,5.868 0 0 1 1.036,-3.616 3.267,3.267 0 0 1 2.744,-1.384 3.116,3.116 0 0 1 2.61,1.321 5.639,5.639 0 0 1 1,3.484 5.763,5.763 0 0 1 -1.035,3.586 z"
+    style="fill:#0072c6"></path>
 </svg>
diff --git a/src/components/Icon/icons/chart-line.astro b/src/components/Icon/icons/chart-line.astro
index 14af22a44..24121d54f 100644
--- a/src/components/Icon/icons/chart-line.astro
+++ b/src/components/Icon/icons/chart-line.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Chart with Line Moving Up Icon</title>}
   <path
diff --git a/src/components/Icon/icons/chart.astro b/src/components/Icon/icons/chart.astro
index d1cec9e05..5bc0f89c0 100644
--- a/src/components/Icon/icons/chart.astro
+++ b/src/components/Icon/icons/chart.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>chart icon</title>}
   <path
diff --git a/src/components/Icon/icons/check-circled-open.astro b/src/components/Icon/icons/check-circled-open.astro
index dfb8a9419..8d446b1e9 100644
--- a/src/components/Icon/icons/check-circled-open.astro
+++ b/src/components/Icon/icons/check-circled-open.astro
@@ -15,18 +15,23 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Check Circled Open Icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
-    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-  ></path>
+    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
 </svg>
diff --git a/src/components/Icon/icons/check-circled.astro b/src/components/Icon/icons/check-circled.astro
index 1fb9a98c0..538a2f354 100644
--- a/src/components/Icon/icons/check-circled.astro
+++ b/src/components/Icon/icons/check-circled.astro
@@ -16,13 +16,22 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>check mark circled icon</title>}
-  <path fill="none" d="M9.999 13.587L7.7 11.292l-1.412 1.416 3.713 3.705 7.206-7.206-1.414-1.414z"/>
-  <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm-1.999 14.413l-3.713-3.705L7.7 11.292l2.299 2.295 5.794-5.794 1.414 1.414-7.206 7.206z" />
+  <path fill="none" d="M9.999 13.587L7.7 11.292l-1.412 1.416 3.713 3.705 7.206-7.206-1.414-1.414z"
+  ></path>
+  <path
+    d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm-1.999 14.413l-3.713-3.705L7.7 11.292l2.299 2.295 5.794-5.794 1.414 1.414-7.206 7.206z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/check-stylized.astro b/src/components/Icon/icons/check-stylized.astro
index d2751ba7c..1e8aa8c35 100644
--- a/src/components/Icon/icons/check-stylized.astro
+++ b/src/components/Icon/icons/check-stylized.astro
@@ -15,16 +15,22 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>stylized check mark icon</title>}
   <path
     style="stroke-width:0.0492"
     d="m 23.743628,0.07311325 c 0.14035,0.120299 0.195448,0.211651 0.255076,0.387223 0.02089,0.403815 -0.213789,0.66972995 -0.442541,0.98342495 -0.04921,0.06842 -0.09838,0.136862 -0.147514,0.205328 -0.108392,0.150678 -0.217238,0.301017 -0.326335,0.451185 -0.156196,0.215346 -0.31029,0.432105 -0.463478,0.649598 -0.02417,0.03431 -0.04834,0.06861 -0.07324,0.103961 -0.07294,0.103613 -0.145838,0.20726 -0.218714,0.310921 -0.29871,0.424898 -0.598582,0.848775 -0.903521,1.269233 -0.256273,0.353388 -0.507353,0.710157 -0.756945,1.068286 -0.215345,0.308459 -0.434731,0.613759 -0.655768,0.918155 -0.197915,0.273151 -0.392004,0.548805 -0.584869,0.825539 -0.246463,0.353605 -0.49651,0.704318 -0.749561,1.053232 -0.278241,0.383963 -0.551215,0.771569 -0.823919,1.159474 -0.29871,0.424898 -0.598582,0.8487738 -0.903521,1.2692328 -0.256273,0.353387 -0.507353,0.710157 -0.756944,1.068286 -0.215346,0.308459 -0.434732,0.613759 -0.655769,0.918155 -0.197914,0.27315 -0.392004,0.548805 -0.584869,0.825539 -0.246463,0.353605 -0.49651,0.704318 -0.749561,1.053232 -0.27824,0.383962 -0.551215,0.771569 -0.823919,1.159474 -0.29871,0.424898 -0.598582,0.848774 -0.903521,1.269232 -0.256273,0.353388 -0.507353,0.710157 -0.756944,1.068286 -0.215346,0.30846 -0.434732,0.613759 -0.655769,0.918156 -0.197914,0.27315 -0.392004,0.548804 -0.584869,0.825539 -0.220607,0.316508 -0.443466,0.631146 -0.6699584,0.943473 -0.208628,0.287701 -0.415822,0.576317 -0.620787,0.866643 -0.02429,0.03431 -0.04858,0.06862 -0.0736,0.103973 -0.113871,0.161355 -0.226308,0.323387 -0.335711,0.48781 -0.02959,0.04409 -0.02959,0.04409 -0.05978,0.08906 -0.05245,0.07843 -0.104303,0.157263 -0.156109,0.236121 -0.130605,0.162942 -0.250238,0.255649 -0.4581,0.291954 -0.036,-3.8e-4 -0.07201,-7.61e-4 -0.109098,-0.0012 -0.036,3.81e-4 -0.07201,7.61e-4 -0.109099,0.0012 -0.15839,-0.02766 -0.232683,-0.06272 -0.358028,-0.167106 -0.09039,-0.151861 -0.154907,-0.312827 -0.221271,-0.476346 -0.03115,-0.07409 -0.03115,-0.07409 -0.06293,-0.149686 -0.07018,-0.167904 -0.138991,-0.336319 -0.207514,-0.504906 -0.02514,-0.06172 -0.05029,-0.123441 -0.07544,-0.18516 -0.10695,-0.262739 -0.213555,-0.525617 -0.319841,-0.788625 -2.182027,-5.4289 -2.182027,-5.4289 -6.325815,-9.389054 -0.174355,-0.107756 -0.252046,-0.20339 -0.310394,-0.405663 -0.01349,-0.245798 0.01183,-0.396587 0.169026,-0.590054 0.258086,-0.2014328 0.490715,-0.150693 0.807052,-0.113661 1.421311,0.205997 2.675828,0.960635 3.744361,1.883825 0.0431,0.0367 0.0862,0.0734 0.130611,0.111212 0.533575,0.466878 1.051121,0.972331 1.489351,1.530455 0.107964,0.137315 0.220982,0.269343 0.334595,0.402013 0.636525,0.764612 1.177844,1.606802 1.733286,2.430903 0.165695,-0.134641 0.320298,-0.263252 0.457907,-0.427175 0.132019,-0.15475 0.266112,-0.307063 0.40259,-0.457907 0.132262,-0.146561 0.26371,-0.293673 0.39337,-0.442541 0.166874,-0.191597 0.3370344,-0.380126 0.5072704,-0.568735 0.09304,-0.103688 0.185015,-0.208132 0.276396,-0.313275 0.179567,-0.206231 0.364121,-0.407798 0.548375,-0.609838 0.126866,-0.140026 0.251372,-0.281879 0.375315,-0.424486 0.10183,-0.116154 0.205165,-0.230874 0.308665,-0.345543 0.132262,-0.146562 0.26371,-0.293673 0.39337,-0.442542 0.239534,-0.274857 0.484776,-0.544588 0.729117,-0.815167 0.19614,-0.217488 0.390791,-0.436051 0.58314,-0.656897 0.139842,-0.15913 0.282175,-0.316003 0.424102,-0.473273 0.09407,-0.104817 0.187164,-0.210339 0.279661,-0.31654 0.239535,-0.2748568 0.484777,-0.5445878 0.729118,-0.8151668 0.19614,-0.217488 0.390791,-0.436051 0.58314,-0.656897 0.139902,-0.159198 0.282294,-0.316139 0.424294,-0.473465 0.09304,-0.103688 0.185014,-0.208132 0.276396,-0.313275 0.179567,-0.206231 0.364121,-0.407798 0.548375,-0.609838 0.126866,-0.140026 0.251372,-0.281879 0.375314,-0.424486 0.101831,-0.116154 0.205166,-0.230874 0.308665,-0.345543 0.132263,-0.146562 0.263711,-0.293673 0.39337,-0.442542 0.239534,-0.274857 0.484777,-0.544588 0.729117,-0.815167 0.196141,-0.217488 0.390792,-0.436051 0.583141,-0.656897 0.139842,-0.15913 0.282175,-0.316003 0.424102,-0.473273 0.09407,-0.104817 0.187164,-0.210339 0.279661,-0.31654 0.239534,-0.274857 0.484777,-0.544588 0.729117,-0.815167 0.19614,-0.217488 0.390791,-0.436051 0.58314,-0.656897 0.139842,-0.15913 0.282176,-0.316003 0.424102,-0.473273 0.09407,-0.104817 0.187165,-0.210339 0.279662,-0.31654 0.241134,-0.276693 0.487759,-0.54848195 0.734303,-0.82035295 0.0579,-0.06399 0.0579,-0.06399 0.116974,-0.129266 0.0348,-0.03835 0.0696,-0.0767 0.105449,-0.116206 0.07092,-0.08068 0.139494,-0.163455 0.206289,-0.247585 0.211913,-0.262539 0.517395,-0.276303 0.8192,-0.15558 z"
-  />
-</svg>
\ No newline at end of file
+  ></path>
+</svg>
diff --git a/src/components/Icon/icons/check.astro b/src/components/Icon/icons/check.astro
index 0c9a14ab9..cbaf52a50 100644
--- a/src/components/Icon/icons/check.astro
+++ b/src/components/Icon/icons/check.astro
@@ -15,18 +15,19 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>check mark icon</title>}
-  <path
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    d="M5 13l4 4L19 7"
-  ></path>
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
 </svg>
diff --git a/src/components/Icon/icons/chevron.astro b/src/components/Icon/icons/chevron.astro
index d457da478..5f3a7b9a1 100644
--- a/src/components/Icon/icons/chevron.astro
+++ b/src/components/Icon/icons/chevron.astro
@@ -14,12 +14,12 @@ const { color, classes, size, accessible, focusable, id } = Astro.props
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes]}
+  class:list={['shrink-0', `w-${size} h-${size}`, `text-${color}`, classes]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   <title>Chevron Arrow Icon</title>
   <path
diff --git a/src/components/Icon/icons/chrome.astro b/src/components/Icon/icons/chrome.astro
index 8823042a9..5e766280e 100644
--- a/src/components/Icon/icons/chrome.astro
+++ b/src/components/Icon/icons/chrome.astro
@@ -16,16 +16,34 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
   role="img"
 >
   {accessible && <title>chrome browser icon</title>}
-  <path style="stroke-width:1.2" d="M 11.774433,5.8802057 C 15.206554,5.1361797 18.686675,5.028176 22.130796,5.5921957 20.006722,2.232078 16.26259,0 11.990441,0 8.2583463,0 4.9222296,1.7040597 2.7141523,4.3801533 c 0.5280183,1.5600534 1.200042,3.0481067 2.00407,4.4641564 0.4560167,0.81603 1.6200567,0.7800266 2.0880733,-0.024001 1.0200367,-1.71606 2.8560634,-2.8681 4.9681374,-2.940103 z" />
-  <path style="stroke-width:1.2" d="M 6.8548853,15.266214 C 4.4548013,12.698124 2.5827356,9.770022 1.2986906,6.5299207 -0.50137235,10.082033 -0.48937169,14.438185 1.706705,18.098313 c 1.9200673,3.204114 5.088178,5.196182 8.520274,5.7122 1.068037,-1.260043 2.00407,-2.60409 2.808097,-4.00814 0.468017,-0.81603 -0.168,-1.788063 -1.10404,-1.788063 -2.00407,0.012 -3.936114,-0.972034 -5.0761507,-2.748096 z" />
-  <path style="stroke-width:1.2" d="m 7.875269,11.99826 c 0,0.732027 0.18,1.41605 0.55202,2.064073 0.7320266,1.260044 2.08806,2.052074 3.552112,2.052074 1.46405,0 2.8321,-0.792027 3.552125,-2.052074 0.372013,-0.648023 0.56402,-1.332046 0.56402,-2.064073 0,-2.26808 -1.848064,-4.1041797 -4.116144,-4.1041797 -2.2560804,-0.012 -4.104132,1.8361 -4.104133,4.1041797 z" />
-  <path style="stroke-width:1.2" d="m 23.199673,7.7034417 c -1.644056,-0.3480134 -3.312116,-0.54002 -4.968174,-0.56402 -0.948033,-0.012001 -1.488053,1.0200366 -1.020036,1.8480633 0.480016,0.8520167 0.756026,1.836053 0.756026,2.88009 0,1.008037 -0.264,2.00407 -0.756026,2.8921 -1.128039,3.456123 -2.808098,6.52823 -5.028175,9.240325 6.540229,-0.108 11.808413,-5.43619 11.808413,-12.00042 0,-1.512053 -0.276,-2.96409 -0.792028,-4.2961383 z" />
+  <path
+    style="stroke-width:1.2"
+    d="M 11.774433,5.8802057 C 15.206554,5.1361797 18.686675,5.028176 22.130796,5.5921957 20.006722,2.232078 16.26259,0 11.990441,0 8.2583463,0 4.9222296,1.7040597 2.7141523,4.3801533 c 0.5280183,1.5600534 1.200042,3.0481067 2.00407,4.4641564 0.4560167,0.81603 1.6200567,0.7800266 2.0880733,-0.024001 1.0200367,-1.71606 2.8560634,-2.8681 4.9681374,-2.940103 z"
+  ></path>
+  <path
+    style="stroke-width:1.2"
+    d="M 6.8548853,15.266214 C 4.4548013,12.698124 2.5827356,9.770022 1.2986906,6.5299207 -0.50137235,10.082033 -0.48937169,14.438185 1.706705,18.098313 c 1.9200673,3.204114 5.088178,5.196182 8.520274,5.7122 1.068037,-1.260043 2.00407,-2.60409 2.808097,-4.00814 0.468017,-0.81603 -0.168,-1.788063 -1.10404,-1.788063 -2.00407,0.012 -3.936114,-0.972034 -5.0761507,-2.748096 z"
+  ></path>
+  <path
+    style="stroke-width:1.2"
+    d="m 7.875269,11.99826 c 0,0.732027 0.18,1.41605 0.55202,2.064073 0.7320266,1.260044 2.08806,2.052074 3.552112,2.052074 1.46405,0 2.8321,-0.792027 3.552125,-2.052074 0.372013,-0.648023 0.56402,-1.332046 0.56402,-2.064073 0,-2.26808 -1.848064,-4.1041797 -4.116144,-4.1041797 -2.2560804,-0.012 -4.104132,1.8361 -4.104133,4.1041797 z"
+  ></path>
+  <path
+    style="stroke-width:1.2"
+    d="m 23.199673,7.7034417 c -1.644056,-0.3480134 -3.312116,-0.54002 -4.968174,-0.56402 -0.948033,-0.012001 -1.488053,1.0200366 -1.020036,1.8480633 0.480016,0.8520167 0.756026,1.836053 0.756026,2.88009 0,1.008037 -0.264,2.00407 -0.756026,2.8921 -1.128039,3.456123 -2.808098,6.52823 -5.028175,9.240325 6.540229,-0.108 11.808413,-5.43619 11.808413,-12.00042 0,-1.512053 -0.276,-2.96409 -0.792028,-4.2961383 z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/clipboard-checked.astro b/src/components/Icon/icons/clipboard-checked.astro
index 12bd9231c..6ca9e340e 100644
--- a/src/components/Icon/icons/clipboard-checked.astro
+++ b/src/components/Icon/icons/clipboard-checked.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>checked clipboard icon</title>}
   <path
diff --git a/src/components/Icon/icons/clipboard.astro b/src/components/Icon/icons/clipboard.astro
index 6056ecd4a..b585100b6 100644
--- a/src/components/Icon/icons/clipboard.astro
+++ b/src/components/Icon/icons/clipboard.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>clipboard icon</title>}
   <path
diff --git a/src/components/Icon/icons/clock.astro b/src/components/Icon/icons/clock.astro
index 415d12b83..47a3d36f7 100644
--- a/src/components/Icon/icons/clock.astro
+++ b/src/components/Icon/icons/clock.astro
@@ -16,26 +16,74 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
   role="img"
 >
   {accessible && <title>clock with hands icon</title>}
-  <path style="stroke-width:0.0469" d="m 8.4915469,10.563094 3.0387191,2.344265 0.04228,0.02424 0.01894,0.01059 c 0.262782,0.146343 0.610641,0.06877 0.842578,-0.186516 l 0.02025,-0.01941 3.724313,-4.4063441 c 0.21206,-0.2376533 0.215576,-0.5797939 0.0093,-0.7632158 -0.206765,-0.1838437 -0.545812,-0.1397343 -0.757031,0.097875 L 11.949563,11.383594 9.2618438,9.5119688 C 9.0105,9.3268125 8.6335781,9.4127813 8.4205781,9.7033125 8.2080469,9.993 8.2393125,10.378359 8.4915469,10.563094 Z" />
-  <path style="stroke-width:0.0469" d="m 4.708125,11.999531 c 0,-0.160968 0.00352,-0.321843 0.020531,-0.479718 H 2.8210781 c -0.011672,0.157828 -0.014766,0.31875 -0.014766,0.479718 0,0.164016 0.00309,0.322313 0.014766,0.480563 h 1.9075781 c -0.017016,-0.15825 -0.020531,-0.31875 -0.020531,-0.480563 z" />
-  <path style="stroke-width:0.0469" d="M 8.0819531,5.8498594 C 8.2622812,5.7356719 8.4463594,5.6280937 8.6332969,5.5324219 l 0.07275,-0.035297 -0.950625,-1.6507031 C 7.5175781,3.966328 7.285875,4.099453 7.0610156,4.2454218 l 0.9510469,1.6515937 z" />
-  <path style="stroke-width:0.0469" d="M 3.8468438,7.755 5.49825,8.7055781 5.8979531,8.0120625 4.2458906,7.0610156 C 4.0999219,7.285875 3.9669844,7.5169219 3.8468438,7.755 Z" />
-  <path style="stroke-width:0.0469" d="m 18.467812,15.366281 c -0.09919,0.187407 -0.203484,0.370782 -0.320812,0.548485 l -0.04758,0.06966 1.651875,0.951 c 0.146156,-0.224859 0.279281,-0.452813 0.402281,-0.690469 l -1.647656,-0.95414 z" />
-  <path style="stroke-width:0.0469" d="m 5.5330781,15.363187 -0.038156,-0.07233 -1.6480781,0.950625 c 0.1172812,0.237657 0.2530312,0.469125 0.399,0.693985 l 1.6520624,-0.951 -0.048094,-0.06966 C 5.7359062,15.737063 5.6283281,15.553688 5.5330781,15.363187 Z" />
-  <path style="stroke-width:0.0469" d="M 8.0819531,18.146578 8.0120625,18.099 7.0610156,19.751016 c 0.2249063,0.145968 0.4565625,0.282187 0.6944063,0.402562 l 0.950625,-1.651594 -0.07275,-0.03525 C 8.4463125,18.371438 8.2622344,18.263859 8.0819531,18.146578 Z" />
-  <path style="stroke-width:0.0469" d="m 15.291047,5.4945 0.694219,0.4025625 0.950812,-1.6515938 C 16.711406,4.0995 16.482609,3.966375 16.245609,3.8464687 Z" />
-  <path style="stroke-width:0.0469"  d="m 11.520281,19.271297 v 1.905187 c 0.158297,0.01406 0.31875,0.01716 0.479485,0.01716 0.161343,0 0.322078,-0.0031 0.479906,-0.01716 v -1.905187 -0.01983 h -0.959391 z" />
-  <path style="stroke-width:0.0469" d="M 12.479672,4.7286562 V 2.8235156 c -0.157828,-0.014156 -0.318563,-0.017203 -0.479906,-0.017203 -0.160735,0 -0.321188,0.00305 -0.479485,0.017203 v 1.9051406 0.019828 h 0.959391 z" />
-  <path style="stroke-width:0.0469" d="m 15.291047,18.505031 0.954562,1.6485 c 0.237,-0.12389 0.465797,-0.256594 0.690469,-0.402562 l -0.950812,-1.652016 z" />
-  <path style="stroke-width:0.0469" d="M 20.153578,7.755 C 20.033016,7.5169219 19.897406,7.2859219 19.751297,7.0610156 l -1.651875,0.9510469 0.403172,0.6935156 z" />
-  <path style="stroke-width:0.0469" d="m 21.179109,11.519859 h -1.907343 -0.01983 v 0.960282 h 0.01983 1.907343 c 0.01191,-0.15825 0.01458,-0.31875 0.01458,-0.480563 -4.7e-5,-0.160969 -0.0027,-0.321891 -0.01458,-0.479719 z" />
-  <path style="stroke-width:0.0469" d="M 11.999766,0 C 5.3719219,4.21875e-4 4.2187e-4,5.3723437 0,12 4.2187e-4,18.627656 5.3719219,23.999531 11.999766,24 18.627609,23.999531 23.999109,18.627656 23.999531,12 23.999109,5.3723437 18.627609,4.21875e-4 11.999766,0 Z m 0,22.451531 C 9.111,22.451062 6.5028281,21.283125 4.6094062,19.390359 2.7168281,17.496281 1.5486562,14.888297 1.5484219,12 1.5486562,9.1116562 2.7168281,6.5032969 4.6093594,4.6100625 6.5028281,2.7167813 9.111,1.5488438 11.999766,1.5484219 c 2.888343,4.687e-4 5.496468,1.1684062 7.390359,3.0616406 1.892578,1.8932344 3.06075,4.501125 3.060938,7.3899375 -2.35e-4,2.888297 -1.168407,5.496281 -3.060938,7.390359 -1.893891,1.892813 -4.502016,3.06075 -7.390359,3.061172 z" />
+  <path
+    style="stroke-width:0.0469"
+    d="m 8.4915469,10.563094 3.0387191,2.344265 0.04228,0.02424 0.01894,0.01059 c 0.262782,0.146343 0.610641,0.06877 0.842578,-0.186516 l 0.02025,-0.01941 3.724313,-4.4063441 c 0.21206,-0.2376533 0.215576,-0.5797939 0.0093,-0.7632158 -0.206765,-0.1838437 -0.545812,-0.1397343 -0.757031,0.097875 L 11.949563,11.383594 9.2618438,9.5119688 C 9.0105,9.3268125 8.6335781,9.4127813 8.4205781,9.7033125 8.2080469,9.993 8.2393125,10.378359 8.4915469,10.563094 Z"
+  ></path>
+  <path
+    style="stroke-width:0.0469"
+    d="m 4.708125,11.999531 c 0,-0.160968 0.00352,-0.321843 0.020531,-0.479718 H 2.8210781 c -0.011672,0.157828 -0.014766,0.31875 -0.014766,0.479718 0,0.164016 0.00309,0.322313 0.014766,0.480563 h 1.9075781 c -0.017016,-0.15825 -0.020531,-0.31875 -0.020531,-0.480563 z"
+  ></path>
+  <path
+    style="stroke-width:0.0469"
+    d="M 8.0819531,5.8498594 C 8.2622812,5.7356719 8.4463594,5.6280937 8.6332969,5.5324219 l 0.07275,-0.035297 -0.950625,-1.6507031 C 7.5175781,3.966328 7.285875,4.099453 7.0610156,4.2454218 l 0.9510469,1.6515937 z"
+  ></path>
+  <path
+    style="stroke-width:0.0469"
+    d="M 3.8468438,7.755 5.49825,8.7055781 5.8979531,8.0120625 4.2458906,7.0610156 C 4.0999219,7.285875 3.9669844,7.5169219 3.8468438,7.755 Z"
+  ></path>
+  <path
+    style="stroke-width:0.0469"
+    d="m 18.467812,15.366281 c -0.09919,0.187407 -0.203484,0.370782 -0.320812,0.548485 l -0.04758,0.06966 1.651875,0.951 c 0.146156,-0.224859 0.279281,-0.452813 0.402281,-0.690469 l -1.647656,-0.95414 z"
+  ></path>
+  <path
+    style="stroke-width:0.0469"
+    d="m 5.5330781,15.363187 -0.038156,-0.07233 -1.6480781,0.950625 c 0.1172812,0.237657 0.2530312,0.469125 0.399,0.693985 l 1.6520624,-0.951 -0.048094,-0.06966 C 5.7359062,15.737063 5.6283281,15.553688 5.5330781,15.363187 Z"
+  ></path>
+  <path
+    style="stroke-width:0.0469"
+    d="M 8.0819531,18.146578 8.0120625,18.099 7.0610156,19.751016 c 0.2249063,0.145968 0.4565625,0.282187 0.6944063,0.402562 l 0.950625,-1.651594 -0.07275,-0.03525 C 8.4463125,18.371438 8.2622344,18.263859 8.0819531,18.146578 Z"
+  ></path>
+  <path
+    style="stroke-width:0.0469"
+    d="m 15.291047,5.4945 0.694219,0.4025625 0.950812,-1.6515938 C 16.711406,4.0995 16.482609,3.966375 16.245609,3.8464687 Z"
+  ></path>
+  <path
+    style="stroke-width:0.0469"
+    d="m 11.520281,19.271297 v 1.905187 c 0.158297,0.01406 0.31875,0.01716 0.479485,0.01716 0.161343,0 0.322078,-0.0031 0.479906,-0.01716 v -1.905187 -0.01983 h -0.959391 z"
+  ></path>
+  <path
+    style="stroke-width:0.0469"
+    d="M 12.479672,4.7286562 V 2.8235156 c -0.157828,-0.014156 -0.318563,-0.017203 -0.479906,-0.017203 -0.160735,0 -0.321188,0.00305 -0.479485,0.017203 v 1.9051406 0.019828 h 0.959391 z"
+  ></path>
+  <path
+    style="stroke-width:0.0469"
+    d="m 15.291047,18.505031 0.954562,1.6485 c 0.237,-0.12389 0.465797,-0.256594 0.690469,-0.402562 l -0.950812,-1.652016 z"
+  ></path>
+  <path
+    style="stroke-width:0.0469"
+    d="M 20.153578,7.755 C 20.033016,7.5169219 19.897406,7.2859219 19.751297,7.0610156 l -1.651875,0.9510469 0.403172,0.6935156 z"
+  ></path>
+  <path
+    style="stroke-width:0.0469"
+    d="m 21.179109,11.519859 h -1.907343 -0.01983 v 0.960282 h 0.01983 1.907343 c 0.01191,-0.15825 0.01458,-0.31875 0.01458,-0.480563 -4.7e-5,-0.160969 -0.0027,-0.321891 -0.01458,-0.479719 z"
+  ></path>
+  <path
+    style="stroke-width:0.0469"
+    d="M 11.999766,0 C 5.3719219,4.21875e-4 4.2187e-4,5.3723437 0,12 4.2187e-4,18.627656 5.3719219,23.999531 11.999766,24 18.627609,23.999531 23.999109,18.627656 23.999531,12 23.999109,5.3723437 18.627609,4.21875e-4 11.999766,0 Z m 0,22.451531 C 9.111,22.451062 6.5028281,21.283125 4.6094062,19.390359 2.7168281,17.496281 1.5486562,14.888297 1.5484219,12 1.5486562,9.1116562 2.7168281,6.5032969 4.6093594,4.6100625 6.5028281,2.7167813 9.111,1.5488438 11.999766,1.5484219 c 2.888343,4.687e-4 5.496468,1.1684062 7.390359,3.0616406 1.892578,1.8932344 3.06075,4.501125 3.060938,7.3899375 -2.35e-4,2.888297 -1.168407,5.496281 -3.060938,7.390359 -1.893891,1.892813 -4.502016,3.06075 -7.390359,3.061172 z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/close.astro b/src/components/Icon/icons/close.astro
index 6a55a75b9..fa83c523f 100644
--- a/src/components/Icon/icons/close.astro
+++ b/src/components/Icon/icons/close.astro
@@ -16,12 +16,20 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>close icon</title>}
-  <path d="M6.707 18.707L12 13.414l5.293 5.293 1.414-1.414L13.414 12l5.293-5.293-1.414-1.414L12 10.586 6.707 5.293 5.293 6.707 10.586 12l-5.293 5.293z"/>
+  <path
+    d="M6.707 18.707L12 13.414l5.293 5.293 1.414-1.414L13.414 12l5.293-5.293-1.414-1.414L12 10.586 6.707 5.293 5.293 6.707 10.586 12l-5.293 5.293z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/cloud-platforms.astro b/src/components/Icon/icons/cloud-platforms.astro
index 87d3b2059..aa80348f1 100644
--- a/src/components/Icon/icons/cloud-platforms.astro
+++ b/src/components/Icon/icons/cloud-platforms.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 34.909088 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>User Avatar Icon</title>}
   <path
diff --git a/src/components/Icon/icons/cloud.astro b/src/components/Icon/icons/cloud.astro
index eb34426c2..b28a9d10c 100644
--- a/src/components/Icon/icons/cloud.astro
+++ b/src/components/Icon/icons/cloud.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Cloud Icon</title>}
   <path
diff --git a/src/components/Icon/icons/codepen.astro b/src/components/Icon/icons/codepen.astro
index bb45940e7..5f64d1032 100644
--- a/src/components/Icon/icons/codepen.astro
+++ b/src/components/Icon/icons/codepen.astro
@@ -16,47 +16,47 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>CodePen icon</title>}
   <path
-     d="M 23.076923,8.3076933 V 15.692307"
-     stroke-width="1.84615"
-     stroke-linecap="round"
-     stroke-linejoin="round"
-  />
+    d="M 23.076923,8.3076933 V 15.692307"
+    stroke-width="1.84615"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
   <path
-     d="M 0.92307665,15.692307 V 8.3076933"
-     stroke-width="1.84615"
-     stroke-linecap="round"
-     stroke-linejoin="round"
-  />
+    d="M 0.92307665,15.692307 V 8.3076933"
+    stroke-width="1.84615"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
   <path
-     d="M 12,23.076923 V 15.692307"
-     stroke-width="1.84615"
-     stroke-linecap="round"
-     stroke-linejoin="round"
-  />
+    d="M 12,23.076923 V 15.692307"
+    stroke-width="1.84615"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
   <path
-     d="M 12,0.92307665 V 8.3076933"
-     stroke-width="1.84615"
-     stroke-linecap="round"
-     stroke-linejoin="round"
-  />
+    d="M 12,0.92307665 V 8.3076933"
+    stroke-width="1.84615"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
   <path
-     d="M 12,15.692307 0.92307665,8.3076933 12,0.92307665 23.076923,8.3076933 Z"
-     stroke-width="1.84615"
-     stroke-linecap="round"
-     stroke-linejoin="round"
-  />
+    d="M 12,15.692307 0.92307665,8.3076933 12,0.92307665 23.076923,8.3076933 Z"
+    stroke-width="1.84615"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
   <path
-     d="M 12,23.076923 0.92307665,15.692307 12,8.3076933 23.076923,15.692307 Z"
-     stroke-width="1.84615"
-     stroke-linecap="round"
-     stroke-linejoin="round"
-  />
+    d="M 12,23.076923 0.92307665,15.692307 12,8.3076933 23.076923,15.692307 Z"
+    stroke-width="1.84615"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
 </svg>
diff --git a/src/components/Icon/icons/company.astro b/src/components/Icon/icons/company.astro
index 70970b529..12c935067 100644
--- a/src/components/Icon/icons/company.astro
+++ b/src/components/Icon/icons/company.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Company Building Icon</title>}
   <path
diff --git a/src/components/Icon/icons/conversation.astro b/src/components/Icon/icons/conversation.astro
index b51a23762..82b3f4cda 100644
--- a/src/components/Icon/icons/conversation.astro
+++ b/src/components/Icon/icons/conversation.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Conversation Bubbles Icon</title>}
   <path
diff --git a/src/components/Icon/icons/copy.astro b/src/components/Icon/icons/copy.astro
index bd1aa7652..150db9c36 100644
--- a/src/components/Icon/icons/copy.astro
+++ b/src/components/Icon/icons/copy.astro
@@ -16,12 +16,23 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>copy icon</title>}
-  <path style="stroke-width:1.3913" fill-rule="evenodd" clip-rule="evenodd" d="M 20.869567,17.73913 V 1.0434767 L 19.826087,0 H 6.26087 L 5.2174033,1.0434667 V 5.21739 H 1.0434767 L 0,6.26087 V 22.956523 L 1.0434767,24 H 14.608697 l 1.043466,-1.043467 V 18.78261 h 4.173924 z M 15.652173,16.695653 V 6.26087 L 14.608697,5.21739 H 7.3043467 V 2.0869567 H 18.78261 V 16.695653 Z M 2.0869567,7.3043467 H 13.565217 V 21.913043 H 2.0869567 Z" />
+  <path
+    style="stroke-width:1.3913"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M 20.869567,17.73913 V 1.0434767 L 19.826087,0 H 6.26087 L 5.2174033,1.0434667 V 5.21739 H 1.0434767 L 0,6.26087 V 22.956523 L 1.0434767,24 H 14.608697 l 1.043466,-1.043467 V 18.78261 h 4.173924 z M 15.652173,16.695653 V 6.26087 L 14.608697,5.21739 H 7.3043467 V 2.0869567 H 18.78261 V 16.695653 Z M 2.0869567,7.3043467 H 13.565217 V 21.913043 H 2.0869567 Z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/copyright.astro b/src/components/Icon/icons/copyright.astro
index 17197ea49..69ed73f7d 100644
--- a/src/components/Icon/icons/copyright.astro
+++ b/src/components/Icon/icons/copyright.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Copyright Icon</title>}
   <path
diff --git a/src/components/Icon/icons/database.astro b/src/components/Icon/icons/database.astro
index bba1b1c98..c488a1aa8 100644
--- a/src/components/Icon/icons/database.astro
+++ b/src/components/Icon/icons/database.astro
@@ -16,17 +16,32 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
   role="img"
 >
   {accessible && <title>database icon</title>}
-  <path stroke-width="1.67442" stroke-linecap="round" d="M 0.83720999,18.697674 V 5.302326" />
-  <path stroke-width="1.67442" stroke-linecap="round" d="M 18.697674,5.302326 V 18.697674" />
-  <path stroke-width="1.67442" d="m 9.767442,9.767442 c 4.932056,0 8.930232,-1.9991 8.930232,-4.465116 0,-2.4660167 -3.998176,-4.46511601 -8.930232,-4.46511601 -4.9320333,0 -8.93023201,1.99909931 -8.93023201,4.46511601 0,2.4660166 3.99819871,4.465116 8.93023201,4.465116 z" />
-  <path stroke-width="1.67442" d="m 18.697674,12 c 0,2.465973 -3.998176,4.465116 -8.930232,4.465116 -4.9320333,0 -8.93023201,-1.999143 -8.93023201,-4.465116" />
-  <path stroke-width="1.67442" d="m 18.697674,18.697674 c 0,2.465973 -3.998176,4.465116 -8.930232,4.465116 -4.9320333,0 -8.93023201,-1.999143 -8.93023201,-4.465116" />
+  <path stroke-width="1.67442" stroke-linecap="round" d="M 0.83720999,18.697674 V 5.302326"></path>
+  <path stroke-width="1.67442" stroke-linecap="round" d="M 18.697674,5.302326 V 18.697674"></path>
+  <path
+    stroke-width="1.67442"
+    d="m 9.767442,9.767442 c 4.932056,0 8.930232,-1.9991 8.930232,-4.465116 0,-2.4660167 -3.998176,-4.46511601 -8.930232,-4.46511601 -4.9320333,0 -8.93023201,1.99909931 -8.93023201,4.46511601 0,2.4660166 3.99819871,4.465116 8.93023201,4.465116 z"
+  ></path>
+  <path
+    stroke-width="1.67442"
+    d="m 18.697674,12 c 0,2.465973 -3.998176,4.465116 -8.930232,4.465116 -4.9320333,0 -8.93023201,-1.999143 -8.93023201,-4.465116"
+  ></path>
+  <path
+    stroke-width="1.67442"
+    d="m 18.697674,18.697674 c 0,2.465973 -3.998176,4.465116 -8.930232,4.465116 -4.9320333,0 -8.93023201,-1.999143 -8.93023201,-4.465116"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/dns.astro b/src/components/Icon/icons/dns.astro
index 3fea8efc6..237a458a2 100644
--- a/src/components/Icon/icons/dns.astro
+++ b/src/components/Icon/icons/dns.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Domain Name Server Icon</title>}
   <path
diff --git a/src/components/Icon/icons/document-with-checkmark.astro b/src/components/Icon/icons/document-with-checkmark.astro
index c39faa26f..7644da3ed 100644
--- a/src/components/Icon/icons/document-with-checkmark.astro
+++ b/src/components/Icon/icons/document-with-checkmark.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>User Avatar Icon</title>}
   <path
@@ -30,18 +36,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
     stroke-linejoin="round"
     stroke-width="2"
     d="m 18.993588,5.794666 c 0.6937,0.6936331 1.040467,1.0404663 1.223233,1.4814994 0.182667,0.4410332 0.182667,0.9314996 0.182667,1.9124659 v 8.8114697 c 0,2.262632 0,3.393955 -0.702933,4.096892 -0.702933,0.702933 -1.834266,0.702933 -4.096889,0.702933 H 8.3998962 c -2.2626657,0 -3.3939919,0 -4.0969016,-0.702933 C 3.6000715,21.394056 3.6000715,20.26274 3.6000715,18.000101 V 6.0005426 c 0,-2.2626657 0,-3.3939919 0.7029331,-4.0969016 C 5.0059043,1.200708 6.1372372,1.200708 8.3999062,1.200708 h 4.0115718 c 0.980966,0 1.471499,0 1.912499,0.1826665 0.4411,0.1826666 0.7879,0.5294998 1.481599,1.2231662 z"
-  />
+  ></path>
   <path
     stroke="currentColor"
     stroke-linejoin="round"
     stroke-width="2.4"
     d="m 18.993492,5.794666 c 0.6937,0.6936331 1.040467,1.0404663 1.223233,1.4814994 0.182667,0.4410332 0.182667,0.9314996 0.182667,1.9124659 v 8.8114697 c 0,2.262632 0,3.393955 -0.702933,4.096892 -0.702933,0.702933 -1.834266,0.702933 -4.096889,0.702933 H 8.3998004 c -2.2626657,0 -3.3939919,0 -4.0969016,-0.702933 C 3.5999757,21.394056 3.5999757,20.26274 3.5999757,18.000101 V 6.0005426 c 0,-2.2626657 0,-3.3939919 0.7029331,-4.0969016 C 5.0058085,1.200708 6.1371414,1.200708 8.3998104,1.200708 h 4.0115716 c 0.980966,0 1.471499,0 1.912499,0.1826665 0.4411,0.1826666 0.7879,0.5294998 1.481599,1.2231662 z"
-  />
+  ></path>
   <path
     stroke="currentColor"
     stroke-width="2.4"
     stroke-linecap="round"
     stroke-linejoin="round"
     d="m 8.4001315,14.400232 1.8925655,1.892566 v 0 c 0.280334,0.280334 0.7345,0.280334 1.0147,0 v 0 l 4.292471,-4.292478"
-  />
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/document.astro b/src/components/Icon/icons/document.astro
index 69edc0764..1634791c7 100644
--- a/src/components/Icon/icons/document.astro
+++ b/src/components/Icon/icons/document.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>document icon</title>}
   <path
diff --git a/src/components/Icon/icons/dollar.astro b/src/components/Icon/icons/dollar.astro
index 4375ab3d7..bbc402986 100644
--- a/src/components/Icon/icons/dollar.astro
+++ b/src/components/Icon/icons/dollar.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Dollar Icon</title>}
   <path
diff --git a/src/components/Icon/icons/download-document.astro b/src/components/Icon/icons/download-document.astro
index 5af7299bd..6853a2a0a 100644
--- a/src/components/Icon/icons/download-document.astro
+++ b/src/components/Icon/icons/download-document.astro
@@ -18,8 +18,8 @@ const { color, classes, size, accessible, focusable, id } = Astro.props
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>download document icon</title>}
   <path
diff --git a/src/components/Icon/icons/download.astro b/src/components/Icon/icons/download.astro
index 7b3968a19..20797af50 100644
--- a/src/components/Icon/icons/download.astro
+++ b/src/components/Icon/icons/download.astro
@@ -14,18 +14,17 @@ const { color, classes, size, accessible, focusable, id } = Astro.props
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes]}
+  class:list={['shrink-0', `w-${size} h-${size}`, `text-${color}`, classes]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>download icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
-    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-  ></path>
+    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
 </svg>
diff --git a/src/components/Icon/icons/email-solid.astro b/src/components/Icon/icons/email-solid.astro
index 68476b638..8516654c2 100644
--- a/src/components/Icon/icons/email-solid.astro
+++ b/src/components/Icon/icons/email-solid.astro
@@ -15,19 +15,19 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={['shrink-0', `h-${size}`, `text-${color}`, classes, isListMarker ? 'mt-0.5' : '']}
   fill="currentColor"
   stroke="none"
   viewBox="0 -2.5 32 24"
   style={`aspect-ratio: 32 / 24;`}
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Email - Solid Icon</title>}
   <path
-     stroke="none"
-     stroke-width="1.6"
-     fill-rule="evenodd"
-     d="M 16,17.4584 0,3.3384 V 21.5 H 32 V 3.3384 Z M 16.0016,13.1992 0,-0.9304 V -2.5 h 32 v 1.5696 z"
+    stroke="none"
+    stroke-width="1.6"
+    fill-rule="evenodd"
+    d="M 16,17.4584 0,3.3384 V 21.5 H 32 V 3.3384 Z M 16.0016,13.1992 0,-0.9304 V -2.5 h 32 v 1.5696 z"
   ></path>
 </svg>
diff --git a/src/components/Icon/icons/email.astro b/src/components/Icon/icons/email.astro
index cef1ffc37..eafa0c339 100644
--- a/src/components/Icon/icons/email.astro
+++ b/src/components/Icon/icons/email.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Email Icon</title>}
   <path
diff --git a/src/components/Icon/icons/error-open.astro b/src/components/Icon/icons/error-open.astro
index 4744dd472..2833139d2 100644
--- a/src/components/Icon/icons/error-open.astro
+++ b/src/components/Icon/icons/error-open.astro
@@ -15,18 +15,23 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Example Icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
-    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-  ></path>
+    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
 </svg>
diff --git a/src/components/Icon/icons/error.astro b/src/components/Icon/icons/error.astro
index a6d395b2a..8bcebfd6c 100644
--- a/src/components/Icon/icons/error.astro
+++ b/src/components/Icon/icons/error.astro
@@ -16,13 +16,22 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
   role="img"
 >
   {accessible && <title>error icon</title>}
-  <path style="stroke-width:1" d="M 12,0 C 5.37,0 0,5.37 0,12 0,18.63 5.37,24 12,24 18.63,24 24,18.63 24,12 24,5.37 18.63,0 12,0 Z M 18.38,16.62 16.61,18.39 12,13.77 7.38,18.39 5.61,16.62 10.23,12 5.62,7.38 7.39,5.61 12,10.23 16.62,5.61 18.39,7.38 13.77,12 Z" />
+  <path
+    style="stroke-width:1"
+    d="M 12,0 C 5.37,0 0,5.37 0,12 0,18.63 5.37,24 12,24 18.63,24 24,18.63 24,12 24,5.37 18.63,0 12,0 Z M 18.38,16.62 16.61,18.39 12,13.77 7.38,18.39 5.61,16.62 10.23,12 5.62,7.38 7.39,5.61 12,10.23 16.62,5.61 18.39,7.38 13.77,12 Z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/exit-right-thin.astro b/src/components/Icon/icons/exit-right-thin.astro
index 201455993..fb6ae3edb 100644
--- a/src/components/Icon/icons/exit-right-thin.astro
+++ b/src/components/Icon/icons/exit-right-thin.astro
@@ -15,18 +15,20 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>exit right thin icon</title>}
-  <path
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    d="M17 8l4 4m0 0l-4 4m4-4H3"
-  />
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/exit-right.astro b/src/components/Icon/icons/exit-right.astro
index f5546fa90..dbd78fae1 100644
--- a/src/components/Icon/icons/exit-right.astro
+++ b/src/components/Icon/icons/exit-right.astro
@@ -15,13 +15,21 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>arrow-right icon</title>}
-  <path d="M 13.05823,22.36681 C 12.417581,22.095911 11.999981,21.457811 11.999981,20.74996 V 16.500009 H 1.4999977 C 0.67157895,16.500009 0,15.828458 0,15.000007 V 9.0000053 C 0,8.171585 0.67156395,7.5000048 1.4999977,7.5000048 H 11.999981 V 3.2500532 c 0,-0.7078052 0.4176,-1.3459205 1.058249,-1.6167906 0.640649,-0.2708701 1.377897,-0.12114 1.868247,0.3793502 l 8.571436,8.7498932 c 0.669449,0.68355 0.669449,1.79145 0,2.475001 l -8.571436,8.749954 c -0.49035,0.500399 -1.227598,0.6501 -1.868247,0.379349 z" />
+  <path
+    d="M 13.05823,22.36681 C 12.417581,22.095911 11.999981,21.457811 11.999981,20.74996 V 16.500009 H 1.4999977 C 0.67157895,16.500009 0,15.828458 0,15.000007 V 9.0000053 C 0,8.171585 0.67156395,7.5000048 1.4999977,7.5000048 H 11.999981 V 3.2500532 c 0,-0.7078052 0.4176,-1.3459205 1.058249,-1.6167906 0.640649,-0.2708701 1.377897,-0.12114 1.868247,0.3793502 l 8.571436,8.7498932 c 0.669449,0.68355 0.669449,1.79145 0,2.475001 l -8.571436,8.749954 c -0.49035,0.500399 -1.227598,0.6501 -1.868247,0.379349 z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/external.astro b/src/components/Icon/icons/external.astro
index 62cf1c358..83e682121 100644
--- a/src/components/Icon/icons/external.astro
+++ b/src/components/Icon/icons/external.astro
@@ -16,13 +16,25 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>external link icon</title>}
-  <path style="stroke-width:1.7143" d="M 13.714285,1.2857145 A 1.2857145,1.2857145 0 0 1 15,0 h 7.714285 c 0.353,0 0.6737,0.1422855 0.90685,0.3737145 l 0.0017,0.003429 0.0034,0.001714 A 1.2822855,1.2822855 0 0 1 24,1.2857145 V 9 A 1.285725,1.285725 0 0 1 21.42855,9 V 4.3885715 L 10.765715,15.051428 A 1.2857145,1.2857145 0 0 1 8.94857,13.234285 L 19.61143,2.5714285 H 15 a 1.2857145,1.2857145 0 0 1 -1.285715,-1.285714 z" />
-  <path style="stroke-width:1.7143" d="m 3.857145,6 a 1.2857145,1.2857145 0 0 0 -1.2857,1.285715 v 12.857142 c 0,0.709715 0.576,1.285715 1.2857,1.285715 h 12.85714 A 1.2857145,1.2857145 0 0 0 18,20.142857 v -6.857143 a 1.285725,1.285725 0 0 1 2.57145,0 v 6.857143 A 3.857143,3.857143 0 0 1 16.714285,24 H 3.857145 A 3.857143,3.857143 0 0 1 0,20.142857 V 7.2857145 a 3.857143,3.857143 0 0 1 3.85715,-3.857143 h 6.85714 A 1.2857145,1.2857145 0 0 1 10.71429,6 Z" />
+  <path
+    style="stroke-width:1.7143"
+    d="M 13.714285,1.2857145 A 1.2857145,1.2857145 0 0 1 15,0 h 7.714285 c 0.353,0 0.6737,0.1422855 0.90685,0.3737145 l 0.0017,0.003429 0.0034,0.001714 A 1.2822855,1.2822855 0 0 1 24,1.2857145 V 9 A 1.285725,1.285725 0 0 1 21.42855,9 V 4.3885715 L 10.765715,15.051428 A 1.2857145,1.2857145 0 0 1 8.94857,13.234285 L 19.61143,2.5714285 H 15 a 1.2857145,1.2857145 0 0 1 -1.285715,-1.285714 z"
+  ></path>
+  <path
+    style="stroke-width:1.7143"
+    d="m 3.857145,6 a 1.2857145,1.2857145 0 0 0 -1.2857,1.285715 v 12.857142 c 0,0.709715 0.576,1.285715 1.2857,1.285715 h 12.85714 A 1.2857145,1.2857145 0 0 0 18,20.142857 v -6.857143 a 1.285725,1.285725 0 0 1 2.57145,0 v 6.857143 A 3.857143,3.857143 0 0 1 16.714285,24 H 3.857145 A 3.857143,3.857143 0 0 1 0,20.142857 V 7.2857145 a 3.857143,3.857143 0 0 1 3.85715,-3.857143 h 6.85714 A 1.2857145,1.2857145 0 0 1 10.71429,6 Z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/eye.astro b/src/components/Icon/icons/eye.astro
index 1906ecafd..46854c4d1 100644
--- a/src/components/Icon/icons/eye.astro
+++ b/src/components/Icon/icons/eye.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>eye icon</title>}
   <path
diff --git a/src/components/Icon/icons/facebook.astro b/src/components/Icon/icons/facebook.astro
index 2e3ad4a6d..f3c92ab5a 100644
--- a/src/components/Icon/icons/facebook.astro
+++ b/src/components/Icon/icons/facebook.astro
@@ -16,12 +16,21 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>facebook icon</title>}
-  <path style="stroke-width:0.96" d="M 23.52,12 C 23.52,5.63808 18.36192,0.47999999 12,0.47999999 5.63808,0.47999999 0.47999999,5.63808 0.47999999,12 0.47999999,17.7504 4.69248,22.51584 10.2,23.37984 v -8.0496 H 7.27488 v -3.3312 H 10.2 V 9.46272 c 0,-2.88672 1.72032,-4.48224 4.35168,-4.48224 1.25952,0 2.57856,0.2256 2.57856,0.2256 V 8.04096 H 15.6768 c -1.43136,0 -1.87776,0.888 -1.87776,1.79904 V 12 h 3.19488 l -0.51072,3.3312 h -2.68416 v 8.0496 C 19.30752,22.51584 23.52,17.74944 23.52,12 Z" />
+  <path
+    style="stroke-width:0.96"
+    d="M 23.52,12 C 23.52,5.63808 18.36192,0.47999999 12,0.47999999 5.63808,0.47999999 0.47999999,5.63808 0.47999999,12 0.47999999,17.7504 4.69248,22.51584 10.2,23.37984 v -8.0496 H 7.27488 v -3.3312 H 10.2 V 9.46272 c 0,-2.88672 1.72032,-4.48224 4.35168,-4.48224 1.25952,0 2.57856,0.2256 2.57856,0.2256 V 8.04096 H 15.6768 c -1.43136,0 -1.87776,0.888 -1.87776,1.79904 V 12 h 3.19488 l -0.51072,3.3312 h -2.68416 v 8.0496 C 19.30752,22.51584 23.52,17.74944 23.52,12 Z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/feed.astro b/src/components/Icon/icons/feed.astro
index b380c4fdb..a0da8ef3a 100644
--- a/src/components/Icon/icons/feed.astro
+++ b/src/components/Icon/icons/feed.astro
@@ -16,13 +16,21 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>RSS feed icon</title>}
-  <circle cx="6.18" cy="17.82" r="2.18"/>
-  <path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/>
+  <circle cx="6.18" cy="17.82" r="2.18"></circle>
+  <path
+    d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/file.astro b/src/components/Icon/icons/file.astro
index 77b5c9748..503f4d897 100644
--- a/src/components/Icon/icons/file.astro
+++ b/src/components/Icon/icons/file.astro
@@ -15,18 +15,23 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>User Avatar Icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
-    d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
-  ></path>
+    d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
 </svg>
diff --git a/src/components/Icon/icons/firefox.astro b/src/components/Icon/icons/firefox.astro
index 2d9bcfb21..08edde856 100644
--- a/src/components/Icon/icons/firefox.astro
+++ b/src/components/Icon/icons/firefox.astro
@@ -16,13 +16,22 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
   role="img"
 >
   {accessible && <title>firefox browser icon</title>}
-  <path style="stroke-width:1.3333" d="m 24,11.510469 a 9,9 0 0 0 -0.266667,-1.8666664 11.88,11.88 0 0 0 -3.066666,-5.8666667 6,6 0 0 0 -1.333334,-1.2 11.68,11.68 0 0 0 -5.2,-2.39999998 A 12,12 0 0 0 3.4666667,3.6438026 V 3.5104693 C 3.3333333,3.2438026 3.3333333,3.2438026 3.2,3.2438026 v 0 c -0.1333333,-0.2666667 -0.1333333,-0.4 -0.2666667,-0.5333333 v 0 C 2.9333333,2.4438026 2.8,2.1771359 2.8,1.9104693 c -0.4,0.1333333 -0.4,0.5333333 -0.5333333,0.8 v 0 A 1.64,1.64 0 0 0 1.7333333,3.7771359 v 0 C 1.6,4.0438026 1.3333333,5.2438026 1.6,5.3771359 h 0.1333333 v 0.4 c -0.2666666,0.2666667 -0.4,0.4 -0.4,0.5333334 A 8.16,8.16 0 0 0 0.4,8.5771359 v 0.5333334 0 -0.1333334 C 0.13333333,9.2438026 0.13333333,9.6438026 0,9.9104693 c 0.13333333,0 0.13333333,-0.1333334 0.26666667,-0.1333334 A 12,12 0 0 0 2.6666667,19.510469 12.266667,12.266667 0 0 0 16.133333,23.243803 12.133333,12.133333 0 0 0 24,11.910469 v -0.4 M 14,1.3771359 a 11.24,11.24 0 0 1 5.333333,2.6666667 1.92,1.92 0 0 1 0.266667,0.4 c -0.4,-0.4 -1.333333,-1.0666667 -1.866667,-0.8 A 20.84,20.84 0 0 0 19.6,6.1771359 13.68,13.68 0 0 0 20.133333,8.0438026 v 0 c 0,0.2666667 -0.933333,3.7333334 -0.933333,4.2666664 0,0.133334 -1.2,2.533334 -1.066667,2.533334 A 1.7866667,1.7866667 0 0 1 17.2,15.910469 c -0.133333,0 -0.933333,0.266667 -1.866667,0.533334 a 7.7866667,7.7866667 0 0 1 -2.4,0.266666 A 2.4,2.4 0 0 1 11.6,16.443803 a 14.546667,14.546667 0 0 0 -1.466667,-0.8 A 2.3866667,2.3866667 0 0 1 9.2,14.977136 h 1.466667 c 0.8,-0.133333 4.266666,-1.333333 4.133333,-1.866667 -0.133333,-0.533333 -0.666667,-0.666666 -0.933333,-0.933333 a 6.8266667,6.8266667 0 0 0 -2.666667,0.4 14.266667,14.266667 0 0 1 -3.2,-1.2 c 0,-0.133333 -0.1333333,-0.933333 -0.1333333,-1.066667 0,-0.133333 0.4,-0.5333331 0.4,-0.5333331 A 14.666667,14.666667 0 0 0 9.6,8.3104693 a 1.1333333,1.1333333 0 0 0 0.666667,-0.4 c -0.133334,0 0.133333,-0.1333334 0.533333,-0.4 v 0 c 0.4,-0.2666667 0.666667,-0.2666667 0.666667,-0.6666667 0,0 0.666666,-1.2 -0.133334,-1.0666667 0,0 -1.2,-0.1333333 -1.5999997,-0.1333333 -0.4,0.2666667 -0.5333333,0.1333333 -0.9333333,0 0,0 -0.2666667,-0.2666667 -0.2666667,-0.4 C 8.5333333,5.1104693 9.6,2.9771359 10,2.8438026 9.7333333,2.3104693 8.4,2.7104693 8.1333333,3.1104693 a 7.1333333,7.1333333 0 0 1 -1.6,0.9333333 v 0 C 6.5333333,3.9104693 5.8666667,3.7771359 5.2,3.7771359 a 10.946667,10.946667 0 0 1 8.8,-2.4 z" />
+  <path
+    style="stroke-width:1.3333"
+    d="m 24,11.510469 a 9,9 0 0 0 -0.266667,-1.8666664 11.88,11.88 0 0 0 -3.066666,-5.8666667 6,6 0 0 0 -1.333334,-1.2 11.68,11.68 0 0 0 -5.2,-2.39999998 A 12,12 0 0 0 3.4666667,3.6438026 V 3.5104693 C 3.3333333,3.2438026 3.3333333,3.2438026 3.2,3.2438026 v 0 c -0.1333333,-0.2666667 -0.1333333,-0.4 -0.2666667,-0.5333333 v 0 C 2.9333333,2.4438026 2.8,2.1771359 2.8,1.9104693 c -0.4,0.1333333 -0.4,0.5333333 -0.5333333,0.8 v 0 A 1.64,1.64 0 0 0 1.7333333,3.7771359 v 0 C 1.6,4.0438026 1.3333333,5.2438026 1.6,5.3771359 h 0.1333333 v 0.4 c -0.2666666,0.2666667 -0.4,0.4 -0.4,0.5333334 A 8.16,8.16 0 0 0 0.4,8.5771359 v 0.5333334 0 -0.1333334 C 0.13333333,9.2438026 0.13333333,9.6438026 0,9.9104693 c 0.13333333,0 0.13333333,-0.1333334 0.26666667,-0.1333334 A 12,12 0 0 0 2.6666667,19.510469 12.266667,12.266667 0 0 0 16.133333,23.243803 12.133333,12.133333 0 0 0 24,11.910469 v -0.4 M 14,1.3771359 a 11.24,11.24 0 0 1 5.333333,2.6666667 1.92,1.92 0 0 1 0.266667,0.4 c -0.4,-0.4 -1.333333,-1.0666667 -1.866667,-0.8 A 20.84,20.84 0 0 0 19.6,6.1771359 13.68,13.68 0 0 0 20.133333,8.0438026 v 0 c 0,0.2666667 -0.933333,3.7333334 -0.933333,4.2666664 0,0.133334 -1.2,2.533334 -1.066667,2.533334 A 1.7866667,1.7866667 0 0 1 17.2,15.910469 c -0.133333,0 -0.933333,0.266667 -1.866667,0.533334 a 7.7866667,7.7866667 0 0 1 -2.4,0.266666 A 2.4,2.4 0 0 1 11.6,16.443803 a 14.546667,14.546667 0 0 0 -1.466667,-0.8 A 2.3866667,2.3866667 0 0 1 9.2,14.977136 h 1.466667 c 0.8,-0.133333 4.266666,-1.333333 4.133333,-1.866667 -0.133333,-0.533333 -0.666667,-0.666666 -0.933333,-0.933333 a 6.8266667,6.8266667 0 0 0 -2.666667,0.4 14.266667,14.266667 0 0 1 -3.2,-1.2 c 0,-0.133333 -0.1333333,-0.933333 -0.1333333,-1.066667 0,-0.133333 0.4,-0.5333331 0.4,-0.5333331 A 14.666667,14.666667 0 0 0 9.6,8.3104693 a 1.1333333,1.1333333 0 0 0 0.666667,-0.4 c -0.133334,0 0.133333,-0.1333334 0.533333,-0.4 v 0 c 0.4,-0.2666667 0.666667,-0.2666667 0.666667,-0.6666667 0,0 0.666666,-1.2 -0.133334,-1.0666667 0,0 -1.2,-0.1333333 -1.5999997,-0.1333333 -0.4,0.2666667 -0.5333333,0.1333333 -0.9333333,0 0,0 -0.2666667,-0.2666667 -0.2666667,-0.4 C 8.5333333,5.1104693 9.6,2.9771359 10,2.8438026 9.7333333,2.3104693 8.4,2.7104693 8.1333333,3.1104693 a 7.1333333,7.1333333 0 0 1 -1.6,0.9333333 v 0 C 6.5333333,3.9104693 5.8666667,3.7771359 5.2,3.7771359 a 10.946667,10.946667 0 0 1 8.8,-2.4 z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/folder-magnifying-glass.astro b/src/components/Icon/icons/folder-magnifying-glass.astro
index 8d38bed9a..9a495cacd 100644
--- a/src/components/Icon/icons/folder-magnifying-glass.astro
+++ b/src/components/Icon/icons/folder-magnifying-glass.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Folder Search Icon</title>}
   <path
@@ -28,5 +34,5 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
     stroke-linecap="round"
     stroke-linejoin="round"
     d="M13.2686 14.2686L15 16M12.0627 6.06274L11.9373 5.93726C11.5914 5.59135 11.4184 5.4184 11.2166 5.29472C11.0376 5.18506 10.8425 5.10425 10.6385 5.05526C10.4083 5 10.1637 5 9.67452 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V15.8C3 16.9201 3 17.4802 3.21799 17.908C3.40973 18.2843 3.71569 18.5903 4.09202 18.782C4.51984 19 5.07989 19 6.2 19H17.8C18.9201 19 19.4802 19 19.908 18.782C20.2843 18.5903 20.5903 18.2843 20.782 17.908C21 17.4802 21 16.9201 21 15.8V10.2C21 9.0799 21 8.51984 20.782 8.09202C20.5903 7.71569 20.2843 7.40973 19.908 7.21799C19.4802 7 18.9201 7 17.8 7H14.3255C13.8363 7 13.5917 7 13.3615 6.94474C13.1575 6.89575 12.9624 6.81494 12.7834 6.70528C12.5816 6.5816 12.4086 6.40865 12.0627 6.06274ZM14 12.5C14 13.8807 12.8807 15 11.5 15C10.1193 15 9 13.8807 9 12.5C9 11.1193 10.1193 10 11.5 10C12.8807 10 14 11.1193 14 12.5Z"
-  />
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/funnel.astro b/src/components/Icon/icons/funnel.astro
index 1d7488fb4..37a86f330 100644
--- a/src/components/Icon/icons/funnel.astro
+++ b/src/components/Icon/icons/funnel.astro
@@ -15,18 +15,23 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Funnel Icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
-    d="M 20,4 H 4 v 2 l 6,6 v 8.5 L 14,18 v -6 l 6,-6 z"
-  ></path>
+    d="M 20,4 H 4 v 2 l 6,6 v 8.5 L 14,18 v -6 l 6,-6 z"></path>
 </svg>
diff --git a/src/components/Icon/icons/gear.astro b/src/components/Icon/icons/gear.astro
index f56bddd51..4255b8375 100644
--- a/src/components/Icon/icons/gear.astro
+++ b/src/components/Icon/icons/gear.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Gear Icon</title>}
   <path
@@ -33,6 +39,5 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="1.5"
-    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-  ></path>
+    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
 </svg>
diff --git a/src/components/Icon/icons/git.astro b/src/components/Icon/icons/git.astro
index 4b9cacaeb..49af37264 100644
--- a/src/components/Icon/icons/git.astro
+++ b/src/components/Icon/icons/git.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>User Avatar Icon</title>}
   <path
diff --git a/src/components/Icon/icons/github.astro b/src/components/Icon/icons/github.astro
index f869ce700..0d3ced922 100644
--- a/src/components/Icon/icons/github.astro
+++ b/src/components/Icon/icons/github.astro
@@ -16,12 +16,21 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>GitHub icon</title>}
-  <path style="stroke-width:0.96" d="m 12,0.47999999 c -6.3648,0 -11.52000001,5.28907501 -11.52000001,11.81256301 0,5.219676 3.30048001,9.646434 7.87680001,11.207169 0.576,0.110742 0.78768,-0.25397 0.78768,-0.56848 0,-0.280548 -0.01008,-1.023263 -0.0144,-2.008136 -3.20544,0.713184 -3.8808,-1.58436 -3.8808,-1.58436 -0.52416,-1.364351 -1.2816,-1.727587 -1.2816,-1.727587 -1.044,-0.732379 0.08064,-0.717613 0.08064,-0.717613 1.15632,0.08269 1.764,1.216694 1.764,1.216694 1.02816,1.805846 2.69712,1.284617 3.3552,0.981919 0.10368,-0.763386 0.40032,-1.284616 0.73008,-1.57993 -2.55888,-0.295314 -5.24736,-1.311195 -5.24736,-5.836882 0,-1.289047 0.4464,-2.3433178 1.18512,-3.1701972 -0.1296,-0.2982672 -0.5184,-1.4987188 0.1008,-3.1258994 0,0 0.9648,-0.3174626 3.168,1.2107877 0.9216,-0.2628295 1.9008,-0.3927677 2.88,-0.398674 0.9792,0.0059 1.9584,0.1358445 2.88,0.398674 2.1888,-1.5282503 3.1536,-1.2107877 3.1536,-1.2107877 0.6192,1.6271806 0.2304,2.8276322 0.1152,3.1258994 0.7344,0.8268794 1.1808,1.8811502 1.1808,3.1701972 0,4.5375 -2.6928,5.537139 -5.256,5.828023 0.4032,0.354377 0.7776,1.077896 0.7776,2.185323 0,1.579931 -0.0144,2.849781 -0.0144,3.233689 0,0.31008 0.2016,0.679223 0.792,0.561097 C 20.2224,21.934567 23.52,17.504856 23.52,12.292563 23.52,5.769075 18.36192,0.47999999 12,0.47999999" />
+  <path
+    style="stroke-width:0.96"
+    d="m 12,0.47999999 c -6.3648,0 -11.52000001,5.28907501 -11.52000001,11.81256301 0,5.219676 3.30048001,9.646434 7.87680001,11.207169 0.576,0.110742 0.78768,-0.25397 0.78768,-0.56848 0,-0.280548 -0.01008,-1.023263 -0.0144,-2.008136 -3.20544,0.713184 -3.8808,-1.58436 -3.8808,-1.58436 -0.52416,-1.364351 -1.2816,-1.727587 -1.2816,-1.727587 -1.044,-0.732379 0.08064,-0.717613 0.08064,-0.717613 1.15632,0.08269 1.764,1.216694 1.764,1.216694 1.02816,1.805846 2.69712,1.284617 3.3552,0.981919 0.10368,-0.763386 0.40032,-1.284616 0.73008,-1.57993 -2.55888,-0.295314 -5.24736,-1.311195 -5.24736,-5.836882 0,-1.289047 0.4464,-2.3433178 1.18512,-3.1701972 -0.1296,-0.2982672 -0.5184,-1.4987188 0.1008,-3.1258994 0,0 0.9648,-0.3174626 3.168,1.2107877 0.9216,-0.2628295 1.9008,-0.3927677 2.88,-0.398674 0.9792,0.0059 1.9584,0.1358445 2.88,0.398674 2.1888,-1.5282503 3.1536,-1.2107877 3.1536,-1.2107877 0.6192,1.6271806 0.2304,2.8276322 0.1152,3.1258994 0.7344,0.8268794 1.1808,1.8811502 1.1808,3.1701972 0,4.5375 -2.6928,5.537139 -5.256,5.828023 0.4032,0.354377 0.7776,1.077896 0.7776,2.185323 0,1.579931 -0.0144,2.849781 -0.0144,3.233689 0,0.31008 0.2016,0.679223 0.792,0.561097 C 20.2224,21.934567 23.52,17.504856 23.52,12.292563 23.52,5.769075 18.36192,0.47999999 12,0.47999999"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/globe.astro b/src/components/Icon/icons/globe.astro
index 6eae94a28..cb4e1d958 100644
--- a/src/components/Icon/icons/globe.astro
+++ b/src/components/Icon/icons/globe.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>globe icon</title>}
   <path
diff --git a/src/components/Icon/icons/graph.astro b/src/components/Icon/icons/graph.astro
index ae30bf5f8..c2dd2b258 100644
--- a/src/components/Icon/icons/graph.astro
+++ b/src/components/Icon/icons/graph.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>User Avatar Icon</title>}
   <path
diff --git a/src/components/Icon/icons/heart-filled.astro b/src/components/Icon/icons/heart-filled.astro
index 7e10ed65d..737b4666b 100644
--- a/src/components/Icon/icons/heart-filled.astro
+++ b/src/components/Icon/icons/heart-filled.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Heart Filled Icon</title>}
   <path
diff --git a/src/components/Icon/icons/heart.astro b/src/components/Icon/icons/heart.astro
index b4a860841..eb930b964 100644
--- a/src/components/Icon/icons/heart.astro
+++ b/src/components/Icon/icons/heart.astro
@@ -16,12 +16,20 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>heart icon</title>}
-  <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/>
+  <path
+    d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/html.astro b/src/components/Icon/icons/html.astro
index 5867def75..aca72b816 100644
--- a/src/components/Icon/icons/html.astro
+++ b/src/components/Icon/icons/html.astro
@@ -15,18 +15,23 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Example Icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="3"
-    d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
-  />
+    d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
 </svg>
diff --git a/src/components/Icon/icons/info.astro b/src/components/Icon/icons/info.astro
index 7e3172bfb..0b14df17f 100644
--- a/src/components/Icon/icons/info.astro
+++ b/src/components/Icon/icons/info.astro
@@ -15,18 +15,23 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>info circled icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
-    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-  ></path>
+    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
 </svg>
diff --git a/src/components/Icon/icons/key.astro b/src/components/Icon/icons/key.astro
index fafd24e75..4a1a5629c 100644
--- a/src/components/Icon/icons/key.astro
+++ b/src/components/Icon/icons/key.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>key icon</title>}
   <path
diff --git a/src/components/Icon/icons/keybase.astro b/src/components/Icon/icons/keybase.astro
index d33832564..cb161111a 100644
--- a/src/components/Icon/icons/keybase.astro
+++ b/src/components/Icon/icons/keybase.astro
@@ -16,12 +16,20 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Keybase service icon</title>}
-  <path d="M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
+  <path
+    d="M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/left-justified.astro b/src/components/Icon/icons/left-justified.astro
index 9270b7b3f..9bf78bb3b 100644
--- a/src/components/Icon/icons/left-justified.astro
+++ b/src/components/Icon/icons/left-justified.astro
@@ -15,18 +15,20 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Left Justified Icon</title>}
-  <path
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    d="M4 6h16M4 12h16M4 18h7"
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"
   ></path>
 </svg>
diff --git a/src/components/Icon/icons/lightbulb.astro b/src/components/Icon/icons/lightbulb.astro
index 324573b91..5e5b5ac67 100644
--- a/src/components/Icon/icons/lightbulb.astro
+++ b/src/components/Icon/icons/lightbulb.astro
@@ -16,13 +16,27 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>light bulb icon</title>}
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.25 19.5C9.25 19.0858 9.58579 18.75 10 18.75H14C14.4142 18.75 14.75 19.0858 14.75 19.5C14.75 19.9142 14.4142 20.25 14 20.25H10C9.58579 20.25 9.25 19.9142 9.25 19.5ZM9.91667 22C9.91667 21.5858 10.2525 21.25 10.6667 21.25H13.3333C13.7475 21.25 14.0833 21.5858 14.0833 22C14.0833 22.4142 13.7475 22.75 13.3333 22.75H10.6667C10.2525 22.75 9.91667 22.4142 9.91667 22Z" />
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.25 8.21807C4.25 4.31332 7.80388 1.25 12 1.25C16.1961 1.25 19.75 4.31332 19.75 8.21807L19.75 8.22133C19.7404 10.4277 18.7914 12.6257 17.1055 14.2246L17.1035 14.2266L15.9994 15.2658C15.8403 15.4156 15.75 15.6245 15.75 15.843C15.75 16.8962 14.8962 17.75 13.843 17.75H10.157C9.10379 17.75 8.25 16.8962 8.25 15.843C8.25 15.6245 8.15976 15.4156 8.0006 15.2658L6.89654 14.2266L6.89447 14.2246C5.20862 12.6257 4.25961 10.4277 4.25001 8.22133L4.25 8.21807ZM5.75 8.21645C5.75824 10.002 6.53021 11.8113 7.92565 13.1353C7.926 13.1356 7.92635 13.136 7.9267 13.1363L9.02865 14.1735C9.48898 14.6068 9.75 15.2109 9.75 15.843C9.75 16.0678 9.93222 16.25 10.157 16.25H13.843C14.0678 16.25 14.25 16.0678 14.25 15.843C14.25 15.2109 14.511 14.6068 14.9713 14.1735C14.9713 14.1735 14.9713 14.1735 14.9713 14.1735L16.0733 13.1363C16.0736 13.136 16.074 13.1357 16.0743 13.1354C17.4698 11.8113 18.2418 10.002 18.25 8.21637C18.2489 5.29948 15.5352 2.75 12 2.75C8.46478 2.75 5.751 5.29953 5.75 8.21645Z" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M9.25 19.5C9.25 19.0858 9.58579 18.75 10 18.75H14C14.4142 18.75 14.75 19.0858 14.75 19.5C14.75 19.9142 14.4142 20.25 14 20.25H10C9.58579 20.25 9.25 19.9142 9.25 19.5ZM9.91667 22C9.91667 21.5858 10.2525 21.25 10.6667 21.25H13.3333C13.7475 21.25 14.0833 21.5858 14.0833 22C14.0833 22.4142 13.7475 22.75 13.3333 22.75H10.6667C10.2525 22.75 9.91667 22.4142 9.91667 22Z"
+  ></path>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M4.25 8.21807C4.25 4.31332 7.80388 1.25 12 1.25C16.1961 1.25 19.75 4.31332 19.75 8.21807L19.75 8.22133C19.7404 10.4277 18.7914 12.6257 17.1055 14.2246L17.1035 14.2266L15.9994 15.2658C15.8403 15.4156 15.75 15.6245 15.75 15.843C15.75 16.8962 14.8962 17.75 13.843 17.75H10.157C9.10379 17.75 8.25 16.8962 8.25 15.843C8.25 15.6245 8.15976 15.4156 8.0006 15.2658L6.89654 14.2266L6.89447 14.2246C5.20862 12.6257 4.25961 10.4277 4.25001 8.22133L4.25 8.21807ZM5.75 8.21645C5.75824 10.002 6.53021 11.8113 7.92565 13.1353C7.926 13.1356 7.92635 13.136 7.9267 13.1363L9.02865 14.1735C9.48898 14.6068 9.75 15.2109 9.75 15.843C9.75 16.0678 9.93222 16.25 10.157 16.25H13.843C14.0678 16.25 14.25 16.0678 14.25 15.843C14.25 15.2109 14.511 14.6068 14.9713 14.1735C14.9713 14.1735 14.9713 14.1735 14.9713 14.1735L16.0733 13.1363C16.0736 13.136 16.074 13.1357 16.0743 13.1354C17.4698 11.8113 18.2418 10.002 18.25 8.21637C18.2489 5.29948 15.5352 2.75 12 2.75C8.46478 2.75 5.751 5.29953 5.75 8.21645Z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/lightning.astro b/src/components/Icon/icons/lightning.astro
index 7e1492ab8..19b3488f3 100644
--- a/src/components/Icon/icons/lightning.astro
+++ b/src/components/Icon/icons/lightning.astro
@@ -15,18 +15,23 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Lightning Icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
-    d="M13 10V3L4 14h7v7l9-11h-7z"
-  ></path>
+    d="M13 10V3L4 14h7v7l9-11h-7z"></path>
 </svg>
diff --git a/src/components/Icon/icons/link.astro b/src/components/Icon/icons/link.astro
index 3cbfdbd6e..6111cfc25 100644
--- a/src/components/Icon/icons/link.astro
+++ b/src/components/Icon/icons/link.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Paperclip Icon</title>}
   <path
diff --git a/src/components/Icon/icons/linkedin.astro b/src/components/Icon/icons/linkedin.astro
index 7a778db9e..62e6824ef 100644
--- a/src/components/Icon/icons/linkedin.astro
+++ b/src/components/Icon/icons/linkedin.astro
@@ -16,14 +16,24 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>linkedin icon</title>}
-  <rect x="0.61849976" y="7.0660033" width="4.6762981" height="14.966028" />
-  <path d="M 2.85826,0 C 1.13393,0 0,1.11519 0,2.59586 0,4.04842 1.09645,5.19172 2.79266,5.19172 h 0.0375 c 1.76181,0 2.85825,-1.15267 2.84888,-2.59586 C 5.64154,1.11519 4.5826,0 2.85827,0 Z" />
-  <path d="m 18.06794,6.92542 c -2.6802,0 -4.35767,1.46193 -4.66692,2.49278 V 7.06599 H 8.14369 c 0.0656,1.24639 0,14.96603 0,14.96603 h 5.25733v-8.08747c0,-0.45919-0.0188,-0.90902 0.11245,-1.22764 0.35611,-0.89965 1.13393,-1.83678 2.53026,-1.83678 1.82741,0 2.65209,1.38695 2.65209,3.41116v7.74073H24V13.71027C24,9.08083 21.39477,6.92542 18.06794,6.92542Z" />
+  <rect x="0.61849976" y="7.0660033" width="4.6762981" height="14.966028"></rect>
+  <path
+    d="M 2.85826,0 C 1.13393,0 0,1.11519 0,2.59586 0,4.04842 1.09645,5.19172 2.79266,5.19172 h 0.0375 c 1.76181,0 2.85825,-1.15267 2.84888,-2.59586 C 5.64154,1.11519 4.5826,0 2.85827,0 Z"
+  ></path>
+  <path
+    d="m 18.06794,6.92542 c -2.6802,0 -4.35767,1.46193 -4.66692,2.49278 V 7.06599 H 8.14369 c 0.0656,1.24639 0,14.96603 0,14.96603 h 5.25733v-8.08747c0,-0.45919-0.0188,-0.90902 0.11245,-1.22764 0.35611,-0.89965 1.13393,-1.83678 2.53026,-1.83678 1.82741,0 2.65209,1.38695 2.65209,3.41116v7.74073H24V13.71027C24,9.08083 21.39477,6.92542 18.06794,6.92542Z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/load-balancer.astro b/src/components/Icon/icons/load-balancer.astro
index 14ef5ceba..15abbf77f 100644
--- a/src/components/Icon/icons/load-balancer.astro
+++ b/src/components/Icon/icons/load-balancer.astro
@@ -15,65 +15,28 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>User Avatar Icon</title>}
-  <rect
-    x="9.777771"
-    y="4.4444437"
-    width="1.7777777"
-    height="1.7777777"
-    stroke-width="0.9"
-  />
-  <rect
-    x="13.333331"
-    y="4.4444437"
-    width="1.7777777"
-    height="1.7777777"
-    stroke-width="0.9"
-  />
-  <rect
-    x="6.2222238"
-    y="4.4444437"
-    width="1.7777777"
-    height="1.7777777"
-    stroke-width="0.9"
-  />
+  <rect x="9.777771" y="4.4444437" width="1.7777777" height="1.7777777" stroke-width="0.9"></rect>
+  <rect x="13.333331" y="4.4444437" width="1.7777777" height="1.7777777" stroke-width="0.9"></rect>
+  <rect x="6.2222238" y="4.4444437" width="1.7777777" height="1.7777777" stroke-width="0.9"></rect>
   <path
     d="M 18.666666,11.555554 H 11.555554 V 8.8888891 H 9.7777765 V 11.555554 H 2.6666672 a 1.7798221,1.7798221 0 0 0 -1.77777479,1.777775 v 5.333334 H 2.6666672 v -5.333332 h 7.1111093 v 5.333335 h 1.7777745 v -5.333335 h 7.111112 v 5.333335 h 1.777775 v -5.333335 a 1.7798221,1.7798221 0 0 0 -1.777772,-1.777777 z"
-    stroke-width="0.9"
-  />
-  <rect
-    x="0"
-    y="20.444445"
-    width="3.5555553"
-    height="3.5555553"
-    stroke-width="0.9"
-  />
-  <rect
-    x="8.8888874"
-    y="20.444445"
-    width="3.5555553"
-    height="3.5555553"
-    stroke-width="0.9"
-  />
-  <rect
-    x="17.777775"
-    y="20.444445"
-    width="3.5555553"
-    height="3.5555553"
-    stroke-width="0.9"
-  />
-  <rect
-    x="6.2222238"
-    y="0"
-    width="8.8888884"
-    height="1.7777777"
-    stroke-width="0.9"
-  />
+    stroke-width="0.9"></path>
+  <rect x="0" y="20.444445" width="3.5555553" height="3.5555553" stroke-width="0.9"></rect>
+  <rect x="8.8888874" y="20.444445" width="3.5555553" height="3.5555553" stroke-width="0.9"></rect>
+  <rect x="17.777775" y="20.444445" width="3.5555553" height="3.5555553" stroke-width="0.9"></rect>
+  <rect x="6.2222238" y="0" width="8.8888884" height="1.7777777" stroke-width="0.9"></rect>
 </svg>
diff --git a/src/components/Icon/icons/location.astro b/src/components/Icon/icons/location.astro
index 057dc6371..5dd0a3ac6 100644
--- a/src/components/Icon/icons/location.astro
+++ b/src/components/Icon/icons/location.astro
@@ -15,16 +15,22 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>location icon</title>}
   <path
-     style="stroke-width:0.308"
-     d="m 9.4322381,2.705524 c -4.0781543,0 -7.3846163,3.3064621 -7.3846163,7.384616 0,1.605847 0.5264616,3.079385 1.4015387,4.286154 0.015692,0.02892 0.018153,0.06123 0.036,0.08892 l 4.9230772,7.384614 c 0.228308,0.342462 0.612923,0.548 1.0240004,0.548 0.411077,0 0.7956929,-0.205538 1.0239999,-0.548 l 4.923079,-7.384614 c 0.01814,-0.02769 0.02031,-0.06 0.036,-0.08892 0.875081,-1.206769 1.401543,-2.680307 1.401543,-4.286154 0,-4.0781545 -3.306462,-7.3846164 -7.3846169,-7.3846164 z m 0,9.846155 c -1.3593844,0 -2.4615387,-1.102154 -2.4615387,-2.461539 0,-1.3593846 1.1021543,-2.4615384 2.4615387,-2.4615384 1.3593849,0 2.4615389,1.1021538 2.4615389,2.4615384 0,1.359385 -1.102154,2.461539 -2.4615389,2.461539 z"
-  />
+    style="stroke-width:0.308"
+    d="m 9.4322381,2.705524 c -4.0781543,0 -7.3846163,3.3064621 -7.3846163,7.384616 0,1.605847 0.5264616,3.079385 1.4015387,4.286154 0.015692,0.02892 0.018153,0.06123 0.036,0.08892 l 4.9230772,7.384614 c 0.228308,0.342462 0.612923,0.548 1.0240004,0.548 0.411077,0 0.7956929,-0.205538 1.0239999,-0.548 l 4.923079,-7.384614 c 0.01814,-0.02769 0.02031,-0.06 0.036,-0.08892 0.875081,-1.206769 1.401543,-2.680307 1.401543,-4.286154 0,-4.0781545 -3.306462,-7.3846164 -7.3846169,-7.3846164 z m 0,9.846155 c -1.3593844,0 -2.4615387,-1.102154 -2.4615387,-2.461539 0,-1.3593846 1.1021543,-2.4615384 2.4615387,-2.4615384 1.3593849,0 2.4615389,1.1021538 2.4615389,2.4615384 0,1.359385 -1.102154,2.461539 -2.4615389,2.461539 z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/lock.astro b/src/components/Icon/icons/lock.astro
index 36268eddc..b9a98eaab 100644
--- a/src/components/Icon/icons/lock.astro
+++ b/src/components/Icon/icons/lock.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>lock icon</title>}
   <path
diff --git a/src/components/Icon/icons/magnify.astro b/src/components/Icon/icons/magnify.astro
index ea64acfb1..2fae34b46 100644
--- a/src/components/Icon/icons/magnify.astro
+++ b/src/components/Icon/icons/magnify.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>User Avatar Icon</title>}
   <path
diff --git a/src/components/Icon/icons/map.astro b/src/components/Icon/icons/map.astro
index 1feaaa175..be6bac89f 100644
--- a/src/components/Icon/icons/map.astro
+++ b/src/components/Icon/icons/map.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Map Icon</title>}
   <path
diff --git a/src/components/Icon/icons/mastodon.astro b/src/components/Icon/icons/mastodon.astro
index 2444260ca..11c2fee7b 100644
--- a/src/components/Icon/icons/mastodon.astro
+++ b/src/components/Icon/icons/mastodon.astro
@@ -16,12 +16,20 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>mastodon icon</title>}
-  <path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
+  <path
+    d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/message.astro b/src/components/Icon/icons/message.astro
index ee55002f8..5298e5376 100644
--- a/src/components/Icon/icons/message.astro
+++ b/src/components/Icon/icons/message.astro
@@ -16,12 +16,19 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>message icon</title>}
-  <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
+  <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/microphone.astro b/src/components/Icon/icons/microphone.astro
index c782abc54..c4b9a2321 100644
--- a/src/components/Icon/icons/microphone.astro
+++ b/src/components/Icon/icons/microphone.astro
@@ -15,13 +15,21 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>microphone icon</title>}
-  <path d="M18.628 9.633v1.885a7.57 7.57 0 0 1-2.179 5.315 7.45 7.45 0 0 1-2.361 1.62 7.3 7.3 0 0 1-2.095.553v2.733h3.327a.797.797 0 0 1 0 1.594H7.07a.797.797 0 0 1 0-1.594h3.327v-2.733a7.3 7.3 0 0 1-2.095-.552 7.45 7.45 0 0 1-2.361-1.62 7.57 7.57 0 0 1-2.179-5.318V9.631a.798.798 0 1 1 1.596 0v1.885a5.95 5.95 0 0 0 1.72 4.198 5.74 5.74 0 0 0 8.233 0 5.95 5.95 0 0 0 1.72-4.198V9.631a.798.798 0 1 1 1.596 0zM7.267 13.165a4.1 4.1 0 0 1-.335-1.649V5.061a4.2 4.2 0 0 1 .335-1.666 4.32 4.32 0 0 1 2.288-2.288A4.2 4.2 0 0 1 11.221.77a4.1 4.1 0 0 1 1.658.336 4.28 4.28 0 0 1 2.58 3.954l-.017 6.457a4.26 4.26 0 0 1-1.232 3.007 4.4 4.4 0 0 1-1.348.913 4.1 4.1 0 0 1-1.658.335 4.2 4.2 0 0 1-1.666-.335 4.26 4.26 0 0 1-2.271-2.273"/>
+  <path
+    d="M18.628 9.633v1.885a7.57 7.57 0 0 1-2.179 5.315 7.45 7.45 0 0 1-2.361 1.62 7.3 7.3 0 0 1-2.095.553v2.733h3.327a.797.797 0 0 1 0 1.594H7.07a.797.797 0 0 1 0-1.594h3.327v-2.733a7.3 7.3 0 0 1-2.095-.552 7.45 7.45 0 0 1-2.361-1.62 7.57 7.57 0 0 1-2.179-5.318V9.631a.798.798 0 1 1 1.596 0v1.885a5.95 5.95 0 0 0 1.72 4.198 5.74 5.74 0 0 0 8.233 0 5.95 5.95 0 0 0 1.72-4.198V9.631a.798.798 0 1 1 1.596 0zM7.267 13.165a4.1 4.1 0 0 1-.335-1.649V5.061a4.2 4.2 0 0 1 .335-1.666 4.32 4.32 0 0 1 2.288-2.288A4.2 4.2 0 0 1 11.221.77a4.1 4.1 0 0 1 1.658.336 4.28 4.28 0 0 1 2.58 3.954l-.017 6.457a4.26 4.26 0 0 1-1.232 3.007 4.4 4.4 0 0 1-1.348.913 4.1 4.1 0 0 1-1.658.335 4.2 4.2 0 0 1-1.666-.335 4.26 4.26 0 0 1-2.271-2.273"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/minimize.astro b/src/components/Icon/icons/minimize.astro
index 801debf4d..4769927cb 100644
--- a/src/components/Icon/icons/minimize.astro
+++ b/src/components/Icon/icons/minimize.astro
@@ -15,16 +15,19 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Minimize Icon</title>}
-  <path
-    stroke-width="2"
-    d="m 24,10.909091 v 2.181818 H 0 v -2.181818 z"
-  ></path>
+  <path stroke-width="2" d="m 24,10.909091 v 2.181818 H 0 v -2.181818 z"></path>
 </svg>
diff --git a/src/components/Icon/icons/minus.astro b/src/components/Icon/icons/minus.astro
index 329ddcafa..459337cdc 100644
--- a/src/components/Icon/icons/minus.astro
+++ b/src/components/Icon/icons/minus.astro
@@ -15,18 +15,23 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Minus Symbol Icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
-    d="M 19,13 H 5 a 1,1 0 0 1 0,-2 h 14 a 1,1 0 0 1 0,2 z"
-  />
+    d="M 19,13 H 5 a 1,1 0 0 1 0,-2 h 14 a 1,1 0 0 1 0,2 z"></path>
 </svg>
diff --git a/src/components/Icon/icons/moon.astro b/src/components/Icon/icons/moon.astro
index 233ca588b..7406c7418 100644
--- a/src/components/Icon/icons/moon.astro
+++ b/src/components/Icon/icons/moon.astro
@@ -15,17 +15,23 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>moon icon</title>}
   <path
-     d="m 8.5652584,4.4223632 c 0,6.0820708 4.9304106,11.0124788 11.0124816,11.0124788 1.112614,0 2.186594,-0.164669 3.199006,-0.47144 -1.37055,4.521969 -5.571215,7.81299 -10.540656,7.81299 -6.0820212,0 -11.0124817,-4.930167 -11.0124817,-11.012235 0,-4.9694081 3.2916071,-9.1700563 7.8134892,-10.5406097 -0.3070037,1.012379 -0.4718391,2.0862589 -0.4718391,3.1988159 z"
-     stroke-width="2.44722"
-     stroke-linecap="round"
-     stroke-linejoin="round" />
+    d="m 8.5652584,4.4223632 c 0,6.0820708 4.9304106,11.0124788 11.0124816,11.0124788 1.112614,0 2.186594,-0.164669 3.199006,-0.47144 -1.37055,4.521969 -5.571215,7.81299 -10.540656,7.81299 -6.0820212,0 -11.0124817,-4.930167 -11.0124817,-11.012235 0,-4.9694081 3.2916071,-9.1700563 7.8134892,-10.5406097 -0.3070037,1.012379 -0.4718391,2.0862589 -0.4718391,3.1988159 z"
+    stroke-width="2.44722"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
 </svg>
diff --git a/src/components/Icon/icons/network.astro b/src/components/Icon/icons/network.astro
index a24e712b7..d07cb655c 100644
--- a/src/components/Icon/icons/network.astro
+++ b/src/components/Icon/icons/network.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>User Avatar Icon</title>}
   <path
diff --git a/src/components/Icon/icons/observability-and-telemetry.astro b/src/components/Icon/icons/observability-and-telemetry.astro
index 74b2b88c6..f3a4e536d 100644
--- a/src/components/Icon/icons/observability-and-telemetry.astro
+++ b/src/components/Icon/icons/observability-and-telemetry.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 27.81756 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Observability and Telemetry Icon</title>}
   <path
diff --git a/src/components/Icon/icons/on-call.astro b/src/components/Icon/icons/on-call.astro
index df7863a40..da53c8986 100644
--- a/src/components/Icon/icons/on-call.astro
+++ b/src/components/Icon/icons/on-call.astro
@@ -15,28 +15,34 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>On Call Phone Icon</title>}
   <path
     stroke-width="0.09"
     d="M 9.7776258,17.078978 C 9.2792704,17.681201 7.9018568,16.107255 6.9711308,14.869102 6.0392483,13.632195 5.1341324,11.728679 5.8717952,11.470431 7.2404047,10.993062 6.4395156,7.7848759 5.3493405,6.2193773 4.2582763,4.6527242 3.1169659,3.5619253 1.4749003,4.705192 1.0630725,4.9924305 -2.6043401,8.6174247 3.4547178,17.317661 c 6.0587015,8.70077 10.7306522,6.518642 11.1422982,6.231936 1.64243,-1.1438 1.015129,-2.592267 -0.07554,-4.159189 -1.090532,-1.565498 -3.821793,-3.429709 -4.7438057,-2.31143 z"
-  />
+  ></path>
   <path
     stroke-width="0.09"
     d="m 8.8759793,6.8064841 c 0.1396253,0.096587 0.2688304,0.204002 0.3842612,0.3196091 1.0405525,1.0408202 1.0899965,2.7163219 0.1127697,3.8145008 -0.3226329,0.362384 -0.2903534,0.917744 0.072203,1.240377 0.1674531,0.149043 0.3759898,0.222321 0.5837278,0.222321 0.242062,0 0.483148,-0.09942 0.656642,-0.294443 1.595301,-1.792356 1.51516,-4.5267295 -0.182481,-6.2249998 C 10.313067,5.6937125 10.101946,5.5179981 9.8757119,5.3614837 9.4764228,5.0853601 8.9292451,5.1852204 8.6532998,5.5841611 8.3770892,5.9831829 8.4767732,6.5305388 8.8759793,6.8064841 Z"
-  />
+  ></path>
   <path
     stroke-width="0.09"
     d="m 11.421563,4.1471647 c 0.149671,0.1254684 0.293468,0.2570026 0.4272,0.3906633 2.481478,2.481373 2.539726,6.423755 0.132658,8.975204 -0.332942,0.352956 -0.31684,0.909115 0.03605,1.242063 0.169924,0.160162 0.386491,0.239486 0.602754,0.239486 0.233357,0 0.466431,-0.09248 0.63921,-0.275678 1.468922,-1.557051 2.261813,-3.59476 2.232729,-5.7377598 C 15.463001,6.8336071 14.610262,4.814306 13.091011,3.2951405 12.921087,3.1252772 12.739133,2.9589015 12.550414,2.8006089 12.178525,2.4888256 11.624398,2.5375567 11.312621,2.9094494 11.000844,3.281259 11.049654,3.8353734 11.421583,4.1471566 Z"
-  />
+  ></path>
   <path
     stroke-width="0.09"
     d="m 15.165178,0.22212389 c -0.362471,-0.32245466 -0.917833,-0.28999492 -1.240466,0.0723848 -0.322531,0.36256201 -0.290086,0.91792001 0.0723,1.24046371 0.159392,0.1418329 0.303595,0.2773691 0.440365,0.4139625 3.863858,3.863769 3.926116,10.2099761 0.138734,14.1466671 -0.336426,0.349666 -0.325671,0.905913 0.0239,1.242331 0.17033,0.163989 0.389874,0.245442 0.609074,0.245442 0.230501,0 0.46084,-0.09027 0.633255,-0.269452 2.1632,-2.24847 3.339099,-5.206501 3.310907,-8.32896 C 19.125097,5.8581459 17.891537,2.9180792 15.679426,0.70606918 15.518211,0.54501603 15.349948,0.38672743 15.164975,0.22211984 Z"
-  />
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/paper-and-pen.astro b/src/components/Icon/icons/paper-and-pen.astro
index 883e2b72a..ce739e02e 100644
--- a/src/components/Icon/icons/paper-and-pen.astro
+++ b/src/components/Icon/icons/paper-and-pen.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>paper and pen icon</title>}
   <path
diff --git a/src/components/Icon/icons/paper-clip.astro b/src/components/Icon/icons/paper-clip.astro
index c7d6ecad9..6d176f1ae 100644
--- a/src/components/Icon/icons/paper-clip.astro
+++ b/src/components/Icon/icons/paper-clip.astro
@@ -15,13 +15,21 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>paper clip icon</title>}
-  <path d="m 5.2 21.37 c -0.042 0 -0.084 -0.001 -0.126 -0.003 C 4.292 21.335 3.545 21.001 2.972 20.428 2.399 19.855 2.066 19.109 2.033 18.326 2 17.53 2.281 16.792 2.825 16.248 L 15.389 3.684 C 16.084 2.989 17.029 2.63 18.047 2.672 19.053 2.714 20.012 3.143 20.75 3.88 21.487 4.618 21.916 5.577 21.958 6.583 22 7.602 21.641 8.546 20.946 9.241 L 11.478 18.709 c -0.177 0.176 -0.463 0.177 -0.639 0 -0.177 -0.177 -0.177 -0.463 0 -0.64 L 20.307 8.601 C 20.82 8.088 21.086 7.384 21.054 6.62 21.022 5.842 20.686 5.096 20.11 4.52 19.534 3.943 18.788 3.608 18.01 3.576 17.246 3.544 16.542 3.81 16.028 4.323 L 3.464 16.888 C 2.705 17.647 2.771 18.948 3.612 19.789 4.024 20.201 4.556 20.441 5.112 20.464 5.653 20.485 6.15 20.299 6.513 19.936 L 16.728 9.721 C 17.176 9.274 17.131 8.502 16.63 8 16.382 7.752 16.062 7.608 15.73 7.594 15.411 7.581 15.12 7.69 14.909 7.902 L 7.79 15.021 c -0.177 0.176 -0.463 0.177 -0.639 0 -0.177 -0.177 -0.177 -0.463 0 -0.639 L 14.269 7.262 C 14.662 6.87 15.193 6.666 15.768 6.691 16.327 6.714 16.861 6.952 17.269 7.361 18.124 8.215 18.168 9.561 17.368 10.361 L 7.152 20.576 C 6.637 21.091 5.948 21.37 5.2 21.37 Z"/>
+  <path
+    d="m 5.2 21.37 c -0.042 0 -0.084 -0.001 -0.126 -0.003 C 4.292 21.335 3.545 21.001 2.972 20.428 2.399 19.855 2.066 19.109 2.033 18.326 2 17.53 2.281 16.792 2.825 16.248 L 15.389 3.684 C 16.084 2.989 17.029 2.63 18.047 2.672 19.053 2.714 20.012 3.143 20.75 3.88 21.487 4.618 21.916 5.577 21.958 6.583 22 7.602 21.641 8.546 20.946 9.241 L 11.478 18.709 c -0.177 0.176 -0.463 0.177 -0.639 0 -0.177 -0.177 -0.177 -0.463 0 -0.64 L 20.307 8.601 C 20.82 8.088 21.086 7.384 21.054 6.62 21.022 5.842 20.686 5.096 20.11 4.52 19.534 3.943 18.788 3.608 18.01 3.576 17.246 3.544 16.542 3.81 16.028 4.323 L 3.464 16.888 C 2.705 17.647 2.771 18.948 3.612 19.789 4.024 20.201 4.556 20.441 5.112 20.464 5.653 20.485 6.15 20.299 6.513 19.936 L 16.728 9.721 C 17.176 9.274 17.131 8.502 16.63 8 16.382 7.752 16.062 7.608 15.73 7.594 15.411 7.581 15.12 7.69 14.909 7.902 L 7.79 15.021 c -0.177 0.176 -0.463 0.177 -0.639 0 -0.177 -0.177 -0.177 -0.463 0 -0.639 L 14.269 7.262 C 14.662 6.87 15.193 6.666 15.768 6.691 16.327 6.714 16.861 6.952 17.269 7.361 18.124 8.215 18.168 9.561 17.368 10.361 L 7.152 20.576 C 6.637 21.091 5.948 21.37 5.2 21.37 Z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/pause.astro b/src/components/Icon/icons/pause.astro
index d964278a6..5acb81334 100644
--- a/src/components/Icon/icons/pause.astro
+++ b/src/components/Icon/icons/pause.astro
@@ -15,13 +15,13 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}` , color, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={['shrink-0', `w-${size} h-${size}`, color, classes, isListMarker ? 'mt-0.5' : '']}
   fill="currentColor"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>pause</title>}
-  <path d="M6 5h4v14H6zm8 0h4v14h-4z" />
+  <path d="M6 5h4v14H6zm8 0h4v14h-4z"></path>
 </svg>
diff --git a/src/components/Icon/icons/platform-engineering.astro b/src/components/Icon/icons/platform-engineering.astro
index 8c79941cc..e4f7f5744 100644
--- a/src/components/Icon/icons/platform-engineering.astro
+++ b/src/components/Icon/icons/platform-engineering.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Platform Engineering Icon</title>}
   <path
diff --git a/src/components/Icon/icons/play.astro b/src/components/Icon/icons/play.astro
index 2cd36bb9b..1492e4f60 100644
--- a/src/components/Icon/icons/play.astro
+++ b/src/components/Icon/icons/play.astro
@@ -15,13 +15,19 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>play icon</title>}
-  <path d="M8 5v14l11-7z" />
+  <path d="M8 5v14l11-7z"></path>
 </svg>
diff --git a/src/components/Icon/icons/plus.astro b/src/components/Icon/icons/plus.astro
index af8445214..849a24599 100644
--- a/src/components/Icon/icons/plus.astro
+++ b/src/components/Icon/icons/plus.astro
@@ -15,18 +15,19 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Example Icon</title>}
-  <path
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    d="M12 4v16m8-8H4"
-  />
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
 </svg>
diff --git a/src/components/Icon/icons/power.astro b/src/components/Icon/icons/power.astro
index f0aa69649..00f96a87f 100644
--- a/src/components/Icon/icons/power.astro
+++ b/src/components/Icon/icons/power.astro
@@ -15,18 +15,23 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Power Button Icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
-    d="M5.636 5.636a9 9 0 1012.728 0M12 3v9"
-  ></path>
+    d="M5.636 5.636a9 9 0 1012.728 0M12 3v9"></path>
 </svg>
diff --git a/src/components/Icon/icons/print.astro b/src/components/Icon/icons/print.astro
index 5f3122895..90ba07cad 100644
--- a/src/components/Icon/icons/print.astro
+++ b/src/components/Icon/icons/print.astro
@@ -15,29 +15,30 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Print Icon</title>}
   <g transform="matrix(0.046875,0,0,0.046875,0,2.34375e-5)">
     <path
       d="m 105.037,367.926 v 0 l -0.24,0.001 v 80.383 c 0,8.592 6.967,15.556 15.559,15.556 h 271.289 c 8.592,0 15.559,-6.965 15.559,-15.556 V 367.927 H 106.275 Z"
-    />
-    <rect
-      x="136.203"
-      y="108.761"
-      width="239.17999"
-      height="15.99"
-    />
+    ></path>
+    <rect x="136.203" y="108.761" width="239.17999" height="15.99"></rect>
     <polygon
       points="136.443,156.732 136.203,156.732 136.203,173.386 375.383,173.386 375.383,156.732 137.422,156.732 136.443,156.731 "
-    />
+    ></polygon>
     <path
       d="M 431.846,207.957 V 48.134 H 81.836 l -1.442,-10e-4 v 10e-4 h -0.24 V 207.956 H 0 v 191.951 h 80.277 v -63.959 h 350.244 l 1.201,0.001 v 63.958 H 512 V 207.957 Z M 176,268.134 c 0,11.045 -8.953,20 -20,20 -11.047,0 -20,-8.955 -20,-20 0,-11.047 8.953,-20 20,-20 11.047,0 20,8.953 20,20 z m -64,0 c 0,11.045 -8.953,20 -20,20 -11.047,0 -20,-8.955 -20,-20 0,-11.047 8.953,-20 20,-20 11.047,0 20,8.953 20,20 z M 112.135,204.7 V 80.115 h 287.73 V 204.701 H 113.074 Z"
-    />
+    ></path>
   </g>
 </svg>
diff --git a/src/components/Icon/icons/question.astro b/src/components/Icon/icons/question.astro
index b9d6f70c2..420790e41 100644
--- a/src/components/Icon/icons/question.astro
+++ b/src/components/Icon/icons/question.astro
@@ -15,25 +15,31 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>question icon</title>}
   <path
-     fill-rule="evenodd"
-     clip-rule="evenodd"
-     d="m 10.623682,7.725135 c -0.258114,0.1939027 -0.42969,0.4716598 -0.42969,0.9282417 0,0.5773958 -0.4680545,1.0454458 -1.0454505,1.0454458 -0.577395,0 -1.0454454,-0.4680819 -1.0454454,-1.0454458 0,-1.1116028 0.4790074,-2.0098806 1.2650634,-2.6001819 C 10.119464,5.48896 11.07921,5.2556377 12.023583,5.2556377 c 1.126905,0 2.077315,0.3389306 2.763769,0.9879459 0.681121,0.644032 1.004686,1.5014528 1.055381,2.3580431 0.09967,1.6766093 -0.824965,3.5213103 -2.516423,4.4878303 -0.153653,0.08785 -0.248847,0.160042 -0.306667,0.211792 0.130972,0.410646 -0.0021,0.876811 -0.36538,1.151661 -0.460415,0.34845 -1.116011,0.257472 -1.464461,-0.202847 0,0 5.2e-4,7.35e-4 -0.0011,-0.0013 l -0.0012,-0.0014 c -0.250764,-0.337366 -0.35075,-0.779604 -0.299959,-1.194116 0.08753,-0.712488 0.584392,-1.312469 1.401116,-1.77905 1.005515,-0.57468 1.518638,-1.670321 1.466569,-2.5487293 -0.02498,-0.4209639 -0.174416,-0.7447208 -0.4048,-0.9625181 -0.225208,-0.21275 -0.624546,-0.4163319 -1.327196,-0.4163319 -0.629273,0 -1.107035,0.1587639 -1.399869,0.3785736 z"
-    style="stroke-width:1.0455" />
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m 10.623682,7.725135 c -0.258114,0.1939027 -0.42969,0.4716598 -0.42969,0.9282417 0,0.5773958 -0.4680545,1.0454458 -1.0454505,1.0454458 -0.577395,0 -1.0454454,-0.4680819 -1.0454454,-1.0454458 0,-1.1116028 0.4790074,-2.0098806 1.2650634,-2.6001819 C 10.119464,5.48896 11.07921,5.2556377 12.023583,5.2556377 c 1.126905,0 2.077315,0.3389306 2.763769,0.9879459 0.681121,0.644032 1.004686,1.5014528 1.055381,2.3580431 0.09967,1.6766093 -0.824965,3.5213103 -2.516423,4.4878303 -0.153653,0.08785 -0.248847,0.160042 -0.306667,0.211792 0.130972,0.410646 -0.0021,0.876811 -0.36538,1.151661 -0.460415,0.34845 -1.116011,0.257472 -1.464461,-0.202847 0,0 5.2e-4,7.35e-4 -0.0011,-0.0013 l -0.0012,-0.0014 c -0.250764,-0.337366 -0.35075,-0.779604 -0.299959,-1.194116 0.08753,-0.712488 0.584392,-1.312469 1.401116,-1.77905 1.005515,-0.57468 1.518638,-1.670321 1.466569,-2.5487293 -0.02498,-0.4209639 -0.174416,-0.7447208 -0.4048,-0.9625181 -0.225208,-0.21275 -0.624546,-0.4163319 -1.327196,-0.4163319 -0.629273,0 -1.107035,0.1587639 -1.399869,0.3785736 z"
+    style="stroke-width:1.0455"></path>
   <path
-     d="m 12.023545,18.846555 c 0.866046,0 1.568185,-0.702139 1.568185,-1.568185 0,-0.866045 -0.702139,-1.568184 -1.568185,-1.568184 -0.866046,0 -1.568186,0.702139 -1.568186,1.568184 0,0.866046 0.70214,1.568185 1.568186,1.568185 z"
-    style="stroke-width:1.0455" />
+    d="m 12.023545,18.846555 c 0.866046,0 1.568185,-0.702139 1.568185,-1.568185 0,-0.866045 -0.702139,-1.568184 -1.568185,-1.568184 -0.866046,0 -1.568186,0.702139 -1.568186,1.568184 0,0.866046 0.70214,1.568185 1.568186,1.568185 z"
+    style="stroke-width:1.0455"></path>
   <path
-     fill-rule="evenodd"
-     clip-rule="evenodd"
-     d="m 0.52353607,12.0511 c 0,-6.3512811 5.14872833,-11.5000094 11.50000893,-11.5000094 6.351242,0 11.5,5.1487283 11.5,11.5000094 0,6.351242 -5.148758,11.5 -11.5,11.5 -6.3512806,0 -11.50000893,-5.148758 -11.50000893,-11.5 z M 12.023545,2.6419977 c -5.1965049,0 -9.4091018,4.2125969 -9.4091018,9.4091023 0,5.196537 4.2125969,9.409092 9.4091018,9.409092 5.196537,0 9.409092,-4.212555 9.409092,-9.409092 0,-5.1965054 -4.212555,-9.4091023 -9.409092,-9.4091023 z"
-    style="stroke-width:1.0455" />
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m 0.52353607,12.0511 c 0,-6.3512811 5.14872833,-11.5000094 11.50000893,-11.5000094 6.351242,0 11.5,5.1487283 11.5,11.5000094 0,6.351242 -5.148758,11.5 -11.5,11.5 -6.3512806,0 -11.50000893,-5.148758 -11.50000893,-11.5 z M 12.023545,2.6419977 c -5.1965049,0 -9.4091018,4.2125969 -9.4091018,9.4091023 0,5.196537 4.2125969,9.409092 9.4091018,9.409092 5.196537,0 9.409092,-4.212555 9.409092,-9.409092 0,-5.1965054 -4.212555,-9.4091023 -9.409092,-9.4091023 z"
+    style="stroke-width:1.0455"></path>
 </svg>
diff --git a/src/components/Icon/icons/quote.astro b/src/components/Icon/icons/quote.astro
index 1a40ba0db..fc3592e3c 100644
--- a/src/components/Icon/icons/quote.astro
+++ b/src/components/Icon/icons/quote.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Example Icon</title>}
   <path
diff --git a/src/components/Icon/icons/reddit.astro b/src/components/Icon/icons/reddit.astro
index 961c9f709..aaf85ee1f 100644
--- a/src/components/Icon/icons/reddit.astro
+++ b/src/components/Icon/icons/reddit.astro
@@ -15,15 +15,21 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>reddit icon</title>}
   <path
-     d="M 12,0.47999999 A 11.52,11.52 0 0 0 0.47999999,12 11.52,11.52 0 0 0 12,23.52 11.52,11.52 0 0 0 23.52,12 11.52,11.52 0 0 0 12,0.47999999 Z M 16.8096,5.03424 c 0.66048,0 1.2,0.53856 1.2,1.19904 A 1.2,1.2 0 0 1 15.61152,6.28704 L 13.1184,5.76192 12.3504,9.35904 c 1.75104,0.0672 3.3408,0.60672 4.48704,1.42848 0.29568,-0.29664 0.7008,-0.47136 1.15872,-0.47136 0.92928,0 1.68384,0.75456 1.68384,1.68384 0,0.68736 -0.4176,1.27968 -0.9696,1.54944 a 2.98656,2.98656 0 0 1 0.04032,0.4992 c 0,2.58624 -3.0048,4.6752 -6.72384,4.6752 -3.71904,0 -6.72384,-2.08896 -6.72384,-4.6752 0,-0.17568 0.0144,-0.35136 0.04128,-0.51264 A 1.67808,1.67808 0 0 1 4.34688,12 c 0,-0.92928 0.75456,-1.68384 1.68384,-1.68384 0.44448,0 0.86208,0.18816 1.15872,0.4704 1.15872,-0.84768 2.76288,-1.3728 4.55424,-1.42752 l 0.8496,-4.01472 A 0.32832,0.32832 0 0 1 12.72768,5.1552 0.336,0.336 0 0 1 12.95616,5.11488 L 15.74592,5.7072 A 1.16544,1.16544 0 0 1 16.8096,5.03424 Z M 9.36,12 c -0.66144,0 -1.2,0.53952 -1.2,1.2 0,0.65952 0.53856,1.19808 1.2,1.19808 0.65952,0 1.19808,-0.53856 1.19808,-1.19904 C 10.55808,12.53856 10.01952,12 9.35904,12 Z m 5.28,0 c -0.65952,0 -1.19808,0.53856 -1.19808,1.2 0,0.65952 0.53856,1.19808 1.19904,1.19808 0.66048,0 1.19904,-0.53856 1.19904,-1.19904 C 15.84,12.53952 15.30048,12 14.64,12 Z m -5.24736,3.8304 a 0.31392,0.31392 0 0 0 -0.22176,0.09024 0.3168,0.3168 0 0 0 0,0.44448 c 0.80832,0.80832 2.38464,0.87648 2.84256,0.87648 0.45792,0 2.0208,-0.05376 2.84256,-0.87648 a 0.34656,0.34656 0 0 0 0.02784,-0.44448 0.3168,0.3168 0 0 0 -0.44544,0 c -0.52512,0.51168 -1.61664,0.7008 -2.41152,0.7008 -0.79488,0 -1.89984,-0.18816 -2.41152,-0.7008 a 0.31296,0.31296 0 0 0 -0.22272,-0.0912 z"
-     style="stroke-width:0.96" />
+    d="M 12,0.47999999 A 11.52,11.52 0 0 0 0.47999999,12 11.52,11.52 0 0 0 12,23.52 11.52,11.52 0 0 0 23.52,12 11.52,11.52 0 0 0 12,0.47999999 Z M 16.8096,5.03424 c 0.66048,0 1.2,0.53856 1.2,1.19904 A 1.2,1.2 0 0 1 15.61152,6.28704 L 13.1184,5.76192 12.3504,9.35904 c 1.75104,0.0672 3.3408,0.60672 4.48704,1.42848 0.29568,-0.29664 0.7008,-0.47136 1.15872,-0.47136 0.92928,0 1.68384,0.75456 1.68384,1.68384 0,0.68736 -0.4176,1.27968 -0.9696,1.54944 a 2.98656,2.98656 0 0 1 0.04032,0.4992 c 0,2.58624 -3.0048,4.6752 -6.72384,4.6752 -3.71904,0 -6.72384,-2.08896 -6.72384,-4.6752 0,-0.17568 0.0144,-0.35136 0.04128,-0.51264 A 1.67808,1.67808 0 0 1 4.34688,12 c 0,-0.92928 0.75456,-1.68384 1.68384,-1.68384 0.44448,0 0.86208,0.18816 1.15872,0.4704 1.15872,-0.84768 2.76288,-1.3728 4.55424,-1.42752 l 0.8496,-4.01472 A 0.32832,0.32832 0 0 1 12.72768,5.1552 0.336,0.336 0 0 1 12.95616,5.11488 L 15.74592,5.7072 A 1.16544,1.16544 0 0 1 16.8096,5.03424 Z M 9.36,12 c -0.66144,0 -1.2,0.53952 -1.2,1.2 0,0.65952 0.53856,1.19808 1.2,1.19808 0.65952,0 1.19808,-0.53856 1.19808,-1.19904 C 10.55808,12.53856 10.01952,12 9.35904,12 Z m 5.28,0 c -0.65952,0 -1.19808,0.53856 -1.19808,1.2 0,0.65952 0.53856,1.19808 1.19904,1.19808 0.66048,0 1.19904,-0.53856 1.19904,-1.19904 C 15.84,12.53952 15.30048,12 14.64,12 Z m -5.24736,3.8304 a 0.31392,0.31392 0 0 0 -0.22176,0.09024 0.3168,0.3168 0 0 0 0,0.44448 c 0.80832,0.80832 2.38464,0.87648 2.84256,0.87648 0.45792,0 2.0208,-0.05376 2.84256,-0.87648 a 0.34656,0.34656 0 0 0 0.02784,-0.44448 0.3168,0.3168 0 0 0 -0.44544,0 c -0.52512,0.51168 -1.61664,0.7008 -2.41152,0.7008 -0.79488,0 -1.89984,-0.18816 -2.41152,-0.7008 a 0.31296,0.31296 0 0 0 -0.22272,-0.0912 z"
+    style="stroke-width:0.96"></path>
 </svg>
diff --git a/src/components/Icon/icons/reliability-and-testing.astro b/src/components/Icon/icons/reliability-and-testing.astro
index 562fa5f77..2bde43aa3 100644
--- a/src/components/Icon/icons/reliability-and-testing.astro
+++ b/src/components/Icon/icons/reliability-and-testing.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 27.328362 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>User Avatar Icon</title>}
   <path
diff --git a/src/components/Icon/icons/reload.astro b/src/components/Icon/icons/reload.astro
index acb49e31a..97940a237 100644
--- a/src/components/Icon/icons/reload.astro
+++ b/src/components/Icon/icons/reload.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Reload Icon</title>}
   <path
diff --git a/src/components/Icon/icons/repost.astro b/src/components/Icon/icons/repost.astro
index 53b468ed3..01145e247 100644
--- a/src/components/Icon/icons/repost.astro
+++ b/src/components/Icon/icons/repost.astro
@@ -15,13 +15,19 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>repost icon</title>}
-  <path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/>
+  <path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"></path>
 </svg>
diff --git a/src/components/Icon/icons/routing.astro b/src/components/Icon/icons/routing.astro
index 3808d690a..d925559c5 100644
--- a/src/components/Icon/icons/routing.astro
+++ b/src/components/Icon/icons/routing.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>User Avatar Icon</title>}
   <path
diff --git a/src/components/Icon/icons/search.astro b/src/components/Icon/icons/search.astro
index f225bb21c..01f13e961 100644
--- a/src/components/Icon/icons/search.astro
+++ b/src/components/Icon/icons/search.astro
@@ -15,13 +15,21 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>search icon</title>}
-  <path d="M5.718 14.25a6.02 6.02 0 0 0 7.964.494l3.989 3.989a.75.75 0 0 0 1.06-1.06l-3.988-3.99a6.03 6.03 0 0 0-9.025-7.965 6.03 6.03 0 0 0 0 8.532m1.06-7.47a4.532 4.532 0 1 1-1.327 3.205A4.5 4.5 0 0 1 6.779 6.78Z"/>
+  <path
+    d="M5.718 14.25a6.02 6.02 0 0 0 7.964.494l3.989 3.989a.75.75 0 0 0 1.06-1.06l-3.988-3.99a6.03 6.03 0 0 0-9.025-7.965 6.03 6.03 0 0 0 0 8.532m1.06-7.47a4.532 4.532 0 1 1-1.327 3.205A4.5 4.5 0 0 1 6.779 6.78Z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/shield.astro b/src/components/Icon/icons/shield.astro
index ac9a32870..778dad717 100644
--- a/src/components/Icon/icons/shield.astro
+++ b/src/components/Icon/icons/shield.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   <title>Shield Security Icon</title>
   <path
diff --git a/src/components/Icon/icons/spinner.astro b/src/components/Icon/icons/spinner.astro
index b3390badf..0b3aa72a4 100644
--- a/src/components/Icon/icons/spinner.astro
+++ b/src/components/Icon/icons/spinner.astro
@@ -15,22 +15,21 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0 animate-spin", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0 animate-spin',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Loading Spinner</title>}
-  <circle
-    class="opacity-25"
-    cx="12"
-    cy="12"
-    r="10"
-    stroke="currentColor"
-    stroke-width="4"
-  ></circle>
+  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
   <path
     class="opacity-75"
     fill="currentColor"
diff --git a/src/components/Icon/icons/sun.astro b/src/components/Icon/icons/sun.astro
index 1d657246a..1ae158b47 100644
--- a/src/components/Icon/icons/sun.astro
+++ b/src/components/Icon/icons/sun.astro
@@ -15,57 +15,63 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>sun icon</title>}
   <path
-     fill-rule="evenodd"
-     clip-rule="evenodd"
-     d="m 7.395981,12.0511 c 0,-2.5405198 2.0594902,-4.60001 4.600009,-4.60001 2.540477,0 4.6,2.0594902 4.6,4.60001 0,2.540477 -2.059523,4.6 -4.6,4.6 -2.5405188,0 -4.600009,-2.059523 -4.600009,-4.6 z"
-     style="stroke-width:1.15" />
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m 7.395981,12.0511 c 0,-2.5405198 2.0594902,-4.60001 4.600009,-4.60001 2.540477,0 4.6,2.0594902 4.6,4.60001 0,2.540477 -2.059523,4.6 -4.6,4.6 -2.5405188,0 -4.600009,-2.059523 -4.600009,-4.6 z"
+    style="stroke-width:1.15"></path>
   <path
-     fill-rule="evenodd"
-     clip-rule="evenodd"
-     d="m 11.99599,0.5510906 c 0.635152,0 1.15,0.5148805 1.15,1.1499994 v 2.3 c 0,0.6351194 -0.514848,1.15 -1.15,1.15 -0.635152,0 -1.15,-0.5148806 -1.15,-1.15 v -2.3 c 0,-0.6351221 0.514855,-1.1499994 1.15,-1.1499994 z"
-     style="stroke-width:1.15" />
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m 11.99599,0.5510906 c 0.635152,0 1.15,0.5148805 1.15,1.1499994 v 2.3 c 0,0.6351194 -0.514848,1.15 -1.15,1.15 -0.635152,0 -1.15,-0.5148806 -1.15,-1.15 v -2.3 c 0,-0.6351221 0.514855,-1.1499994 1.15,-1.1499994 z"
+    style="stroke-width:1.15"></path>
   <path
-     fill-rule="evenodd"
-     clip-rule="evenodd"
-     d="m 20.859155,3.1879123 c 0.449075,0.4491069 0.449075,1.1772485 0,1.6263554 l -2.3,2.3 c -0.449075,0.4491071 -1.177248,0.4491071 -1.626323,0 -0.449075,-0.4491069 -0.449075,-1.1772485 0,-1.6263554 l 2.3,-2.3 c 0.449075,-0.4491071 1.177248,-0.4491071 1.626323,0 z"
-     style="stroke-width:1.15" />
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m 20.859155,3.1879123 c 0.449075,0.4491069 0.449075,1.1772485 0,1.6263554 l -2.3,2.3 c -0.449075,0.4491071 -1.177248,0.4491071 -1.626323,0 -0.449075,-0.4491069 -0.449075,-1.1772485 0,-1.6263554 l 2.3,-2.3 c 0.449075,-0.4491071 1.177248,-0.4491071 1.626323,0 z"
+    style="stroke-width:1.15"></path>
   <path
-     fill-rule="evenodd"
-     clip-rule="evenodd"
-     d="m 18.89599,12.0511 c 0,-0.635152 0.514848,-1.15 1.15,-1.15 h 2.3 c 0.635152,0 1.15,0.514848 1.15,1.15 0,0.635152 -0.514848,1.15 -1.15,1.15 h -2.3 c -0.635152,0 -1.15,-0.514848 -1.15,-1.15 z"
-     style="stroke-width:1.15" />
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m 18.89599,12.0511 c 0,-0.635152 0.514848,-1.15 1.15,-1.15 h 2.3 c 0.635152,0 1.15,0.514848 1.15,1.15 0,0.635152 -0.514848,1.15 -1.15,1.15 h -2.3 c -0.635152,0 -1.15,-0.514848 -1.15,-1.15 z"
+    style="stroke-width:1.15"></path>
   <path
-     fill-rule="evenodd"
-     clip-rule="evenodd"
-     d="m 16.932825,16.987935 c 0.449075,-0.449075 1.177248,-0.449075 1.626323,0 l 2.3,2.3 c 0.449075,0.449075 0.449075,1.177248 0,1.626323 -0.449075,0.449075 -1.177248,0.449075 -1.626323,0 l -2.3,-2.3 c -0.449075,-0.449075 -0.449075,-1.177248 0,-1.626323 z"
-     style="stroke-width:1.15" />
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m 16.932825,16.987935 c 0.449075,-0.449075 1.177248,-0.449075 1.626323,0 l 2.3,2.3 c 0.449075,0.449075 0.449075,1.177248 0,1.626323 -0.449075,0.449075 -1.177248,0.449075 -1.626323,0 l -2.3,-2.3 c -0.449075,-0.449075 -0.449075,-1.177248 0,-1.626323 z"
+    style="stroke-width:1.15"></path>
   <path
-     fill-rule="evenodd"
-     clip-rule="evenodd"
-     d="m 11.99599,18.9511 c 0.635152,0 1.15,0.514848 1.15,1.15 v 2.3 c 0,0.635152 -0.514848,1.15 -1.15,1.15 -0.635152,0 -1.15,-0.514848 -1.15,-1.15 v -2.3 c 0,-0.635152 0.514848,-1.15 1.15,-1.15 z"
-     style="stroke-width:1.15" />
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m 11.99599,18.9511 c 0.635152,0 1.15,0.514848 1.15,1.15 v 2.3 c 0,0.635152 -0.514848,1.15 -1.15,1.15 -0.635152,0 -1.15,-0.514848 -1.15,-1.15 v -2.3 c 0,-0.635152 0.514848,-1.15 1.15,-1.15 z"
+    style="stroke-width:1.15"></path>
   <path
-     fill-rule="evenodd"
-     clip-rule="evenodd"
-     d="m 7.0591587,16.987935 c 0.4491071,0.449075 0.4491071,1.177248 0,1.626323 l -2.3,2.3 c -0.4491069,0.449075 -1.1772485,0.449075 -1.6263554,0 -0.4491071,-0.449075 -0.4491071,-1.177248 0,-1.626323 l 2.3,-2.3 c 0.4491069,-0.449075 1.1772485,-0.449075 1.6263554,0 z"
-     style="stroke-width:1.15" />
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m 7.0591587,16.987935 c 0.4491071,0.449075 0.4491071,1.177248 0,1.626323 l -2.3,2.3 c -0.4491069,0.449075 -1.1772485,0.449075 -1.6263554,0 -0.4491071,-0.449075 -0.4491071,-1.177248 0,-1.626323 l 2.3,-2.3 c 0.4491069,-0.449075 1.1772485,-0.449075 1.6263554,0 z"
+    style="stroke-width:1.15"></path>
   <path
-     fill-rule="evenodd"
-     clip-rule="evenodd"
-     d="m 0.49598154,12.0511 c 0,-0.635145 0.51487736,-1.15 1.14999946,-1.15 h 2.3 c 0.6351194,0 1.15,0.514848 1.15,1.15 0,0.635152 -0.5148806,1.15 -1.15,1.15 h -2.3 c -0.6351221,0 -1.14999946,-0.514855 -1.14999946,-1.15 z"
-     style="stroke-width:1.15" />
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m 0.49598154,12.0511 c 0,-0.635145 0.51487736,-1.15 1.14999946,-1.15 h 2.3 c 0.6351194,0 1.15,0.514848 1.15,1.15 0,0.635152 -0.5148806,1.15 -1.15,1.15 h -2.3 c -0.6351221,0 -1.14999946,-0.514855 -1.14999946,-1.15 z"
+    style="stroke-width:1.15"></path>
   <path
-     fill-rule="evenodd"
-     clip-rule="evenodd"
-     d="m 3.1328033,3.1879123 c 0.4491069,-0.4491071 1.1772485,-0.4491071 1.6263554,0 l 2.3,2.3 c 0.4491071,0.4491069 0.4491071,1.1772485 0,1.6263554 -0.4491069,0.4491071 -1.1772485,0.4491071 -1.6263554,0 l -2.3,-2.3 c -0.4491071,-0.4491069 -0.4491071,-1.1772485 0,-1.6263554 z"
-     style="stroke-width:1.15" />
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m 3.1328033,3.1879123 c 0.4491069,-0.4491071 1.1772485,-0.4491071 1.6263554,0 l 2.3,2.3 c 0.4491071,0.4491069 0.4491071,1.1772485 0,1.6263554 -0.4491069,0.4491071 -1.1772485,0.4491071 -1.6263554,0 l -2.3,-2.3 c -0.4491071,-0.4491069 -0.4491071,-1.1772485 0,-1.6263554 z"
+    style="stroke-width:1.15"></path>
 </svg>
diff --git a/src/components/Icon/icons/system-modernization.astro b/src/components/Icon/icons/system-modernization.astro
index 308a39cfe..d5515b00c 100644
--- a/src/components/Icon/icons/system-modernization.astro
+++ b/src/components/Icon/icons/system-modernization.astro
@@ -15,24 +15,30 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>System Modernization Icon</title>}
   <path
     stroke-width="2"
     d="m 11.962823,3.8884207 0.1128,-0.1306534 3.1388,-3.14241386 c 0.2388,-0.36469386 0.672534,-0.59124088 1.1472,-0.59124088 0.430667,0 0.825067,0.18589358 1.0732,0.49053402 l 0.0075,0.00905 0.06053,0.086067 3.144667,3.14800052 0.112667,0.1306534 0.0073,0.00988 c 0.344667,0.46452 0.348933,1.1009333 0.0128,1.5696533 l -0.008,0.01112 -0.131867,0.15536 -0.141066,0.1217333 -0.0099,0.00733 c -0.464533,0.3446666 -1.100933,0.3488666 -1.5696,0.01276 l -0.0112,-0.00797 -0.146,-0.124 -1.068933,-1.06884 v 4.2532214 l -0.0112,0.1443305 -0.0019,0.012709 c -0.09593,0.6187625 -0.681264,1.038355 -1.320331,1.038355 -0.6392,0 -1.224267,-0.4198595 -1.320133,-1.038662 l -0.002,-0.012709 -0.01107,-0.1442745 V 4.5762073 l -1.065733,1.06704 -0.1308,0.11292 -0.0099,0.00733 c -0.522267,0.38748 -1.2628,0.34476 -1.7364,-0.1288134 C 11.61069,5.161114 11.568023,4.4205273 11.95549,3.8983007 Z"
-  />
+  ></path>
   <path
     stroke-width="2"
     d="m 0.02715316,4.6803673 c 0,-1.8409466 1.49238814,-3.3333333 3.33333474,-3.3333333 H 8.693781 c 0.7363865,0 1.333309,0.5969467 1.333309,1.3333333 0,0.7363734 -0.5969225,1.3333334 -1.333309,1.3333334 H 3.3604879 c -0.3681866,0 -0.6666666,0.2984666 -0.6666666,0.6666666 V 19.346993 c 0,0.368134 0.29848,0.666667 0.6666666,0.666667 H 8.693781 c 0.7363865,0 1.333309,0.596933 1.333309,1.333333 0,0.7364 -0.5969225,1.333334 -1.333309,1.333334 H 3.3604879 c -1.8409466,0 -3.33333474,-1.4924 -3.33333474,-3.333334 z"
-  />
+  ></path>
   <path
     stroke-width="2"
     d="m 13.96389,18.40486 -0.1308,-0.1128 -0.0099,-0.0073 c -0.522266,-0.387467 -1.2628,-0.3448 -1.7364,0.1288 -0.520666,0.520666 -0.520533,1.364933 0,1.8856 l 3.130134,3.133733 c 0.2388,0.364667 0.672533,0.5912 1.1472,0.5912 0.4748,0 0.908666,-0.2268 1.147333,-0.591733 l 3.138533,-3.141867 0.1128,-0.130667 0.0073,-0.0099 c 0.387466,-0.522267 0.344666,-1.2628 -0.1288,-1.7364 l -0.0087,-0.0087 -0.1308,-0.1128 -0.0099,-0.0073 c -0.522133,-0.387467 -1.2628,-0.3448 -1.7364,0.1288 l -1.059333,1.0592 v -4.2532 l -0.01107,-0.1444 -0.002,-0.01267 c -0.09586,-0.618796 -0.681064,-1.038396 -1.320264,-1.038396 -0.6932,0 -1.3332,0.5008 -1.3332,1.208533 v 4.239334 z"
-  />
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/systems-and-development.astro b/src/components/Icon/icons/systems-and-development.astro
index 35b5f4a1e..8ec4ae844 100644
--- a/src/components/Icon/icons/systems-and-development.astro
+++ b/src/components/Icon/icons/systems-and-development.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 29.998249 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Systems and Development Icon</title>}
   <path
diff --git a/src/components/Icon/icons/table-of-contents.astro b/src/components/Icon/icons/table-of-contents.astro
index 7b1159ec4..06e1d28b8 100644
--- a/src/components/Icon/icons/table-of-contents.astro
+++ b/src/components/Icon/icons/table-of-contents.astro
@@ -15,17 +15,26 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>table of contents</title>}
-  <circle style="stroke-width:0.96" cx="2.3999999" cy="2.3999999" r="1.92" />
-  <circle style="stroke-width:0.96" cx="2.3999999" cy="8.1599998" r="1.92" />
-  <circle style="stroke-width:0.96" cx="2.3999999" cy="19.68" r="1.92" />
-  <circle style="stroke-width:0.96" cx="2.3999999" cy="13.92" r="1.92" />
-  <path style="stroke-width:0.96" d="M 22.56192,3.36 H 8.15808 C 7.63008,3.36 7.2,2.928 7.2,2.40192 V 2.39808 C 7.2,1.87008 7.632,1.44 8.15808,1.44 H 22.56 c 0.528,0 0.96,0.432 0.96,0.95808 V 2.4 c 0,0.528 -0.432,0.96 -0.95808,0.96 z m 0,5.76 H 8.15808 C 7.63008,9.12 7.2,8.688 7.2,8.16192 V 8.15808 C 7.2,7.63008 7.632,7.2 8.15808,7.2 H 22.56 c 0.528,0 0.96,0.432 0.96,0.95808 V 8.16 c 0,0.528 -0.432,0.96 -0.95808,0.96 z m 0,5.76 H 8.15808 C 7.63008,14.88 7.2,14.448 7.2,13.92192 V 13.92 c 0,-0.528 0.432,-0.96 0.95808,-0.96 H 22.56 c 0.528,0 0.96,0.432 0.96,0.95808 V 13.92 c 0,0.528 -0.432,0.96 -0.95808,0.96 z m 0,5.76 H 8.15808 C 7.63008,20.64 7.2,20.208 7.2,19.68192 V 19.68 c 0,-0.528 0.432,-0.96 0.95808,-0.96 H 22.56 c 0.528,0 0.96,0.432 0.96,0.95808 V 19.68 c 0,0.528 -0.432,0.96 -0.95808,0.96 z" />
+  <circle style="stroke-width:0.96" cx="2.3999999" cy="2.3999999" r="1.92"></circle>
+  <circle style="stroke-width:0.96" cx="2.3999999" cy="8.1599998" r="1.92"></circle>
+  <circle style="stroke-width:0.96" cx="2.3999999" cy="19.68" r="1.92"></circle>
+  <circle style="stroke-width:0.96" cx="2.3999999" cy="13.92" r="1.92"></circle>
+  <path
+    style="stroke-width:0.96"
+    d="M 22.56192,3.36 H 8.15808 C 7.63008,3.36 7.2,2.928 7.2,2.40192 V 2.39808 C 7.2,1.87008 7.632,1.44 8.15808,1.44 H 22.56 c 0.528,0 0.96,0.432 0.96,0.95808 V 2.4 c 0,0.528 -0.432,0.96 -0.95808,0.96 z m 0,5.76 H 8.15808 C 7.63008,9.12 7.2,8.688 7.2,8.16192 V 8.15808 C 7.2,7.63008 7.632,7.2 8.15808,7.2 H 22.56 c 0.528,0 0.96,0.432 0.96,0.95808 V 8.16 c 0,0.528 -0.432,0.96 -0.95808,0.96 z m 0,5.76 H 8.15808 C 7.63008,14.88 7.2,14.448 7.2,13.92192 V 13.92 c 0,-0.528 0.432,-0.96 0.95808,-0.96 H 22.56 c 0.528,0 0.96,0.432 0.96,0.95808 V 13.92 c 0,0.528 -0.432,0.96 -0.95808,0.96 z m 0,5.76 H 8.15808 C 7.63008,20.64 7.2,20.208 7.2,19.68192 V 19.68 c 0,-0.528 0.432,-0.96 0.95808,-0.96 H 22.56 c 0.528,0 0.96,0.432 0.96,0.95808 V 19.68 c 0,0.528 -0.432,0.96 -0.95808,0.96 z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/telephone.astro b/src/components/Icon/icons/telephone.astro
index 9a2b4046e..112cd0dc9 100644
--- a/src/components/Icon/icons/telephone.astro
+++ b/src/components/Icon/icons/telephone.astro
@@ -15,22 +15,26 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size + 5.422} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size + 5.422} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 29.422"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Telephone Icon</title>}
-  <g
-    transform="translate(0,2.2115455)"
-  >
+  <g transform="translate(0,2.2115455)">
     <path
       d="M 12.000023,0 C 5.9560899,0 0,2.364755 0,5.0800881 c 0,2.331661 0,2.546911 0,2.5614431 0,0.6172512 0.50015724,1.1174079 1.1174085,1.1174079 h 4.2469771 c 0.6172512,0 1.1173615,-0.5001567 1.1173615,-1.1174079 V 5.7142141 c 0,-0.562501 0.4185946,-1.037439 0.9764082,-1.108455 0,0 1.5290189,-0.314063 4.5418677,-0.314063 3.01285,0 4.541822,0.314063 4.541822,0.314063 0.557861,0.070969 0.976408,0.545954 0.976408,1.108455 v 1.927363 c 0,0.6172518 0.500157,1.1174093 1.117362,1.1174093 h 4.246977 C 23.499843,8.7589864 24,8.2588289 24,7.6415771 24,7.6269988 24,7.4117491 24,5.0801351 24.000047,2.364755 18.044005,0 12.000023,0 Z"
-    />
+    ></path>
     <path
       d="m 16.335924,7.6415771 v -1.870925 l -0.0322,-0.0067 c -0.01158,-0.0023 -1.47891,-0.289876 -4.303697,-0.289876 -2.8247863,0 -4.2920702,0.287532 -4.3066953,0.290532 l -0.029156,0.006 v 1.8709654 c 0,1.2683003 -1.0318145,2.299786 -2.2997857,2.299786 H 2.408911 v 6.6558875 c 0,1.645739 1.3339713,2.979662 2.9793809,2.979662 H 18.611756 c 1.645409,0 2.97938,-1.333971 2.97938,-2.979662 V 9.9413661 h -2.955475 c -1.26797,0 -2.299737,-1.0314857 -2.299737,-2.299786 z m -0.817597,7.4018119 v 1.590003 h -1.589675 v -1.590003 z m 0,-2.51438 v 1.59005 h -1.589675 v -1.59005 z m 0,-2.514005 v 1.589675 h -1.589675 v -1.589675 z m -2.723301,5.028385 v 1.590003 h -1.589675 v -1.590003 z m 0,-2.51438 v 1.59005 h -1.589675 v -1.59005 z m -1.589675,-0.92433 v -1.589675 h 1.589675 v 1.589675 z m -1.133628,3.43871 v 1.590003 H 8.4820481 v -1.590003 z m 0,-2.51438 v 1.59005 H 8.4820481 v -1.59005 z m 0,-2.514005 v 1.589675 H 8.4820481 v -1.589675 z"
-    />
+    ></path>
   </g>
 </svg>
diff --git a/src/components/Icon/icons/trash.astro b/src/components/Icon/icons/trash.astro
index 0ed1ee840..ac57fa96a 100644
--- a/src/components/Icon/icons/trash.astro
+++ b/src/components/Icon/icons/trash.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>trash icon</title>}
   <path
diff --git a/src/components/Icon/icons/turtle.astro b/src/components/Icon/icons/turtle.astro
index b10880cbe..612176309 100644
--- a/src/components/Icon/icons/turtle.astro
+++ b/src/components/Icon/icons/turtle.astro
@@ -15,12 +15,18 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Turtle Icon</title>}
   <path
diff --git a/src/components/Icon/icons/upload.astro b/src/components/Icon/icons/upload.astro
index 4dc0099b5..45fdb49ec 100644
--- a/src/components/Icon/icons/upload.astro
+++ b/src/components/Icon/icons/upload.astro
@@ -15,18 +15,23 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   <title>Upload Arrow Icon</title>
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
-    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
-  ></path>
+    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
 </svg>
diff --git a/src/components/Icon/icons/waiting.astro b/src/components/Icon/icons/waiting.astro
index f207e765b..e58334284 100644
--- a/src/components/Icon/icons/waiting.astro
+++ b/src/components/Icon/icons/waiting.astro
@@ -18,8 +18,8 @@ const { color, classes, size, accessible, focusable, id } = Astro.props
   fill="currentColor"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>Waiting Spinner Icon</title>}
   <g class="offline-spinner-bars" stroke-width="1.5" stroke-linecap="round">
diff --git a/src/components/Icon/icons/warning.astro b/src/components/Icon/icons/warning.astro
index 81cd17480..10cfe68c8 100644
--- a/src/components/Icon/icons/warning.astro
+++ b/src/components/Icon/icons/warning.astro
@@ -15,13 +15,22 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>warning icon</title>}
-  <path style="stroke-width:0.7898" d="M 23.381097,17.548463 13.49365,0.61841252 c -0.82455,-0.82455003 -2.162451,-0.82455003 -2.987006,0 L 0.61840877,17.548463 c -0.82454503,0.82375 -0.82454503,2.160875 0,2.986215 H 23.380307 c 0.826125,-0.825325 0.826125,-2.16245 7.9e-4,-2.986215 z M 11.089514,6.6958853 c 0,-0.6547501 0.53075,-1.1847001 1.1847,-1.1847001 0.653951,0 1.184701,0.52995 1.184701,1.1847001 v 5.5285677 c 0,0.65395 -0.53075,1.1847 -1.184701,1.1847 -0.65395,0 -1.1847,-0.53075 -1.1847,-1.1847 z m 1.1918,10.6685557 c -0.65395,0 -1.1847,-0.52915 -1.1847,-1.1847 0,-0.65395 0.53075,-1.1847 1.1847,-1.1847 0.653951,0 1.184701,0.53075 1.184701,1.1847 0,0.655525 -0.53075,1.1847 -1.184701,1.1847 z" />
+  <path
+    style="stroke-width:0.7898"
+    d="M 23.381097,17.548463 13.49365,0.61841252 c -0.82455,-0.82455003 -2.162451,-0.82455003 -2.987006,0 L 0.61840877,17.548463 c -0.82454503,0.82375 -0.82454503,2.160875 0,2.986215 H 23.380307 c 0.826125,-0.825325 0.826125,-2.16245 7.9e-4,-2.986215 z M 11.089514,6.6958853 c 0,-0.6547501 0.53075,-1.1847001 1.1847,-1.1847001 0.653951,0 1.184701,0.52995 1.184701,1.1847001 v 5.5285677 c 0,0.65395 -0.53075,1.1847 -1.184701,1.1847 -0.65395,0 -1.1847,-0.53075 -1.1847,-1.1847 z m 1.1918,10.6685557 c -0.65395,0 -1.1847,-0.52915 -1.1847,-1.1847 0,-0.65395 0.53075,-1.1847 1.1847,-1.1847 0.653951,0 1.184701,0.53075 1.184701,1.1847 0,0.655525 -0.53075,1.1847 -1.184701,1.1847 z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/wrench.astro b/src/components/Icon/icons/wrench.astro
index daebf6d1c..a45c497ee 100644
--- a/src/components/Icon/icons/wrench.astro
+++ b/src/components/Icon/icons/wrench.astro
@@ -15,13 +15,22 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="none"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>wrench icon</title>}
-  <path style="stroke-width:0.4478" d="m 1.1928772,22.818537 c 1.653633,1.653633 3.9386116,1.563409 5.7325288,-0.220478 1.4331099,-1.43311 4.409613,-6.494174 6.995264,-9.079825 1.723753,-1.723753 3.62791,-0.811749 5.542141,-1.593454 L 17.759028,5.71122 C 17.54858,4.9395455 17.859234,4.2981699 18.751226,4.0576318 L 22.5093,3.0554489 C 22.38903,2.7046715 22.058357,2.2235951 21.647491,1.802698 19.332467,-0.51299723 15.504094,-0.6025498 13.219116,1.5621789 9.8918796,4.7391269 12.417351,8.096408 10.222597,10.291208 7.4665722,13.047232 3.4578409,14.991463 1.4133556,17.076023 -0.38056152,18.87997 -0.48077089,21.144889 1.1928772,22.818537 Z M 13.650087,7.6254063 c -0.220479,0.060135 -0.400927,-0.050105 -0.481076,-0.2906429 -0.06014,-0.1803589 0.07016,-0.4008373 0.280613,-0.4610166 l 2.335128,-0.6313457 c 0.190389,-0.050105 0.410867,0.07012 0.471002,0.280613 0.06014,0.2305084 -0.07016,0.430927 -0.280613,0.4910615 z m 6.92519,3.8183417 c 0.380733,-0.230507 0.78157,-0.53118 1.192482,-0.922033 1.262871,-1.1424664 1.914142,-2.866219 1.653678,-4.0888803 l -3.036638,0.8317642 c -0.340702,0.090224 -0.621316,0.1102389 -0.942093,0.060179 z M 13.950716,8.8179778 c -0.220479,0.06018 -0.410868,-0.050059 -0.491062,-0.290598 -0.06014,-0.1804037 0.07011,-0.4008821 0.280613,-0.4509868 L 16.07535,7.4350175 c 0.190433,-0.04012 0.410912,0.07012 0.471047,0.280613 0.07011,0.2304635 -0.07016,0.430927 -0.280614,0.4910168 z m 0.290642,1.1926162 c -0.210494,0.06014 -0.420897,-0.050103 -0.471047,-0.2806127 -0.0501,-0.2104486 0.07016,-0.4008373 0.280614,-0.4609719 l 2.325098,-0.6213605 c 0.220478,-0.070165 0.430927,0.060089 0.481031,0.2605532 0.04011,0.2004634 -0.08015,0.4209419 -0.270583,0.4710465 z M 2.7663158,21.255173 c -0.6814949,-0.68154 -0.6915249,-1.824007 -0.02006,-2.505502 0.6814951,-0.701511 1.8139769,-0.671465 2.515487,-0.01006 0.7216147,0.681495 0.6514502,1.803947 -0.00999,2.515532 -0.6313904,0.69148 -1.8139768,0.67142 -2.4854421,0 z" />
+  <path
+    style="stroke-width:0.4478"
+    d="m 1.1928772,22.818537 c 1.653633,1.653633 3.9386116,1.563409 5.7325288,-0.220478 1.4331099,-1.43311 4.409613,-6.494174 6.995264,-9.079825 1.723753,-1.723753 3.62791,-0.811749 5.542141,-1.593454 L 17.759028,5.71122 C 17.54858,4.9395455 17.859234,4.2981699 18.751226,4.0576318 L 22.5093,3.0554489 C 22.38903,2.7046715 22.058357,2.2235951 21.647491,1.802698 19.332467,-0.51299723 15.504094,-0.6025498 13.219116,1.5621789 9.8918796,4.7391269 12.417351,8.096408 10.222597,10.291208 7.4665722,13.047232 3.4578409,14.991463 1.4133556,17.076023 -0.38056152,18.87997 -0.48077089,21.144889 1.1928772,22.818537 Z M 13.650087,7.6254063 c -0.220479,0.060135 -0.400927,-0.050105 -0.481076,-0.2906429 -0.06014,-0.1803589 0.07016,-0.4008373 0.280613,-0.4610166 l 2.335128,-0.6313457 c 0.190389,-0.050105 0.410867,0.07012 0.471002,0.280613 0.06014,0.2305084 -0.07016,0.430927 -0.280613,0.4910615 z m 6.92519,3.8183417 c 0.380733,-0.230507 0.78157,-0.53118 1.192482,-0.922033 1.262871,-1.1424664 1.914142,-2.866219 1.653678,-4.0888803 l -3.036638,0.8317642 c -0.340702,0.090224 -0.621316,0.1102389 -0.942093,0.060179 z M 13.950716,8.8179778 c -0.220479,0.06018 -0.410868,-0.050059 -0.491062,-0.290598 -0.06014,-0.1804037 0.07011,-0.4008821 0.280613,-0.4509868 L 16.07535,7.4350175 c 0.190433,-0.04012 0.410912,0.07012 0.471047,0.280613 0.07011,0.2304635 -0.07016,0.430927 -0.280614,0.4910168 z m 0.290642,1.1926162 c -0.210494,0.06014 -0.420897,-0.050103 -0.471047,-0.2806127 -0.0501,-0.2104486 0.07016,-0.4008373 0.280614,-0.4609719 l 2.325098,-0.6213605 c 0.220478,-0.070165 0.430927,0.060089 0.481031,0.2605532 0.04011,0.2004634 -0.08015,0.4209419 -0.270583,0.4710465 z M 2.7663158,21.255173 c -0.6814949,-0.68154 -0.6915249,-1.824007 -0.02006,-2.505502 0.6814951,-0.701511 1.8139769,-0.671465 2.515487,-0.01006 0.7216147,0.681495 0.6514502,1.803947 -0.00999,2.515532 -0.6313904,0.69148 -1.8139768,0.67142 -2.4854421,0 z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/x.astro b/src/components/Icon/icons/x.astro
index 40d09382b..7e57d468d 100644
--- a/src/components/Icon/icons/x.astro
+++ b/src/components/Icon/icons/x.astro
@@ -15,13 +15,22 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
 <svg
   id={id}
   xmlns="http://www.w3.org/2000/svg"
-  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  class:list={[
+    'shrink-0',
+    `w-${size} h-${size}`,
+    `text-${color}`,
+    classes,
+    isListMarker ? 'mt-0.5' : '',
+  ]}
   fill="currentColor"
   stroke="currentColor"
   viewBox="0 0 24 24"
-  aria-hidden={accessible ? "false" : "true"}
-  focusable={focusable ? "true" : "false"}
+  aria-hidden={accessible ? 'false' : 'true'}
+  focusable={focusable ? 'true' : 'false'}
 >
   {accessible && <title>x icon</title>}
-  <path style="stroke-width:0.08" d="m 18.961679,0 h 3.678774 L 14.563146,9.1969344 24,21.672776 H 16.594469 L 10.796401,14.091303 4.1586138,21.672776 H 0.47984005 L 9.0369877,11.836055 0,0 h 7.5894702 l 5.2382538,6.9256914 z m -1.28757,19.513496 h 2.03932 L 6.5178274,2.0793069 H 4.3265578 Z" />
+  <path
+    style="stroke-width:0.08"
+    d="m 18.961679,0 h 3.678774 L 14.563146,9.1969344 24,21.672776 H 16.594469 L 10.796401,14.091303 4.1586138,21.672776 H 0.47984005 L 9.0369877,11.836055 0,0 h 7.5894702 l 5.2382538,6.9256914 z m -1.28757,19.513496 h 2.03932 L 6.5178274,2.0793069 H 4.3265578 Z"
+  ></path>
 </svg>
diff --git a/src/components/Icon/index.astro b/src/components/Icon/index.astro
index deca0145b..19241821d 100644
--- a/src/components/Icon/index.astro
+++ b/src/components/Icon/index.astro
@@ -38,23 +38,23 @@ const {
   id,
   accessible = false,
   focusable = false,
-  isListMarker = false
+  isListMarker = false,
 }: Props = Astro.props
 
 const resolvedIcon = typeof icon === 'string' ? icon.trim() : ''
 
 const IconComponent = resolvedIcon
   ? getIconComponent(resolvedIcon)
-  : null as unknown as (_props: {
-  color?: string
-  inverseColor?: string
-  size?: number
-  classes?: string
-  id?: string
-  accessible?: boolean
-  focusable?: boolean
-  isListMarker?: boolean
-}) => unknown
+  : (null as unknown as (_props: {
+      color?: string
+      inverseColor?: string
+      size?: number
+      classes?: string
+      id?: string
+      accessible?: boolean
+      focusable?: boolean
+      isListMarker?: boolean
+    }) => unknown)
 
 const markerProps = {
   ...(color ? { color } : {}),
diff --git a/src/components/Icon/server/index.ts b/src/components/Icon/server/index.ts
index 3d24637ab..9fd866c8f 100644
--- a/src/components/Icon/server/index.ts
+++ b/src/components/Icon/server/index.ts
@@ -12,7 +12,7 @@ const defaultIconComponents = import.meta.glob('../icons/*.astro', {
 
 const formatAvailableIcons = (markerComponents: IconComponentMap): string => {
   return Object.keys(markerComponents)
-    .map((path) => path.replace('../icons/', ''))
+    .map(path => path.replace('../icons/', ''))
     .sort()
     .join(', ')
 }
@@ -40,7 +40,7 @@ export const getIconComponent = (
 
     throw new Error(
       `Icon: icon file "${iconFileName}" was not found in src/components/Icon/icons/. ` +
-      `Requested icon path: "${iconPath}". Available icons: ${availableIcons || '(none)'}`
+        `Requested icon path: "${iconPath}". Available icons: ${availableIcons || '(none)'}`
     )
   }
 
diff --git a/src/components/Image/client/__fixtures__/index.fixture.astro b/src/components/Image/client/__fixtures__/index.fixture.astro
index 69ccb5117..1548b6124 100644
--- a/src/components/Image/client/__fixtures__/index.fixture.astro
+++ b/src/components/Image/client/__fixtures__/index.fixture.astro
@@ -22,9 +22,4 @@ const imageProps = {
 }
 ---
 
-<Image
-  src={backstageBackground}
-  alt={alt}
-  variant={variant}
-  {...imageProps}
-/>
\ No newline at end of file
+<Image src={backstageBackground} alt={alt} variant={variant} {...imageProps} />
diff --git a/src/components/Image/client/__tests__/index.spec.ts b/src/components/Image/client/__tests__/index.spec.ts
index a8953588e..343cc8bc1 100644
--- a/src/components/Image/client/__tests__/index.spec.ts
+++ b/src/components/Image/client/__tests__/index.spec.ts
@@ -8,144 +8,144 @@ import { executeRender } from '@test/unit/helpers/litRuntime'
 type ImageModule = WebComponentModule<ImageElementInstance>
 
 const getMainImage = (element: ImageElementInstance): HTMLImageElement | null =>
-	element.querySelector('[data-image-figure] img')
+  element.querySelector('[data-image-figure] img')
 
 const getFigure = (element: ImageElementInstance): HTMLElement | null =>
-	element.querySelector('[data-image-figure]')
+  element.querySelector('[data-image-figure]')
 
 const getOpenButton = (element: ImageElementInstance): HTMLButtonElement | null =>
-	element.querySelector('[data-image-open]')
+  element.querySelector('[data-image-open]')
 
 const getDialog = (element: ImageElementInstance): HTMLElement | null =>
-	element.querySelector('[data-image-dialog]')
+  element.querySelector('[data-image-dialog]')
 
 const getModalImage = (element: ImageElementInstance): HTMLImageElement | null =>
-	element.querySelector('[data-image-modal-asset]')
+  element.querySelector('[data-image-modal-asset]')
 
 describe('Image web component', () => {
-	let container: AstroContainer
-
-	beforeEach(async () => {
-		container = await AstroContainer.create()
-	})
-
-	const renderImage = async (
-		props: {
-			alt?: string
-			variant?: 'left' | 'right' | 'center' | 'full'
-			size?: '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-			magnifyButtonPosition?: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'
-		},
-		assertion: (_context: {
-			element: ImageElementInstance
-			window: Window & typeof globalThis
-		}) => Promise<void> | void
-	) => {
-		await executeRender<ImageModule>({
-			container,
-			component: ImageFixture,
-			moduleSpecifier: '@components/Image/client/index',
-			args: { props },
-			waitForReady: async element => {
-				await element.updateComplete
-			},
-			assert: async ({ element, window }) => {
-				await assertion({ element, window: window as Window & typeof globalThis })
-			},
-		})
-	}
-
-	const renderImageToString = (props: {
-		alt?: string
-		variant?: 'left' | 'right' | 'center' | 'full'
-		size?: '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'invalid'
-		magnifyButtonPosition?: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'
-	}) => {
-		return container.renderToString(ImageFixture, {
-			props,
-		})
-	}
-
-	test('renders centered image markup by default', async () => {
-		await renderImage({}, async ({ element }) => {
-			expect(element.getAttribute('data-image-variant')).toBe('center')
-
-			const mainImage = getMainImage(element)
-			expect(mainImage?.getAttribute('alt')).toBe('Backstage background test image')
-
-			const openButton = getOpenButton(element)
-			expect(openButton?.getAttribute('aria-label')).toContain('Backstage background test image')
-
-			const dialog = getDialog(element)
-			expect(dialog?.hasAttribute('hidden')).toBe(true)
-		})
-	})
-
-	test('applies the requested magnify button corner', async () => {
-		await renderImage({ magnifyButtonPosition: 'bottom-left' }, async ({ element }) => {
-			const openButton = getOpenButton(element)
-			expect(openButton?.getAttribute('data-image-open-position')).toBe('bottom-left')
-			expect(openButton?.className).toContain('left-2')
-			expect(openButton?.className).toContain('bottom-2')
-		})
-	})
-
-	test('applies the requested desktop size token to centered images', async () => {
-		await renderImage({ size: 'xl' }, async ({ element }) => {
-			const figure = getFigure(element)
-			expect(figure?.className).toContain('md:max-w-xl')
-
-			const mainImage = getMainImage(element)
-			expect(mainImage?.getAttribute('sizes')).toBe('(min-width: 768px) 36rem, 100vw')
-		})
-	})
-
-	test('opens the modal when the magnify button is activated', async () => {
-		await renderImage({ variant: 'right' }, async ({ element, window }) => {
-			expect(element.getAttribute('data-image-variant')).toBe('right')
-
-			const openButton = getOpenButton(element)
-			openButton?.dispatchEvent(new window.Event('click', { bubbles: true }))
-			await element.updateComplete
-
-			const dialog = getDialog(element)
-			expect(dialog?.hasAttribute('hidden')).toBe(false)
-			expect(dialog?.getAttribute('aria-label')).toContain('Backstage background test image')
-
-			const modalImage = getModalImage(element)
-			expect(modalImage?.getAttribute('alt')).toBe('Backstage background test image')
-
-			const closeIcon = element.querySelector(
-				'button[aria-label="Close image dialog"] svg'
-			) as SVGElement | null
-			expect(closeIcon?.getAttribute('aria-hidden')).toBe('true')
-			expect(closeIcon?.getAttribute('focusable')).toBe('false')
-		})
-	})
-
-	test('closes the modal on Escape', async () => {
-		await renderImage({}, async ({ element, window }) => {
-			const openButton = getOpenButton(element)
-			openButton?.dispatchEvent(new window.Event('click', { bubbles: true }))
-			await element.updateComplete
-
-			window.document.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Escape' }))
-			await element.updateComplete
-
-			const dialog = getDialog(element)
-			expect(dialog?.hasAttribute('hidden')).toBe(true)
-		})
-	})
-
-	test('throws for an invalid size value', async () => {
-		await expect(renderImageToString({ size: 'invalid' })).rejects.toThrow(
-			'Image: invalid size "invalid". Expected one of: 3xl, 2xl, xl, lg, md, sm, xs'
-		)
-	})
-
-	test('throws when size is used with the full variant', async () => {
-		await expect(renderImageToString({ variant: 'full', size: 'lg' })).rejects.toThrow(
-			'Image: size cannot be used with variant "full". The "full" variant always renders at the full available container width on desktop. Use variant "center", "left", or "right" if you want to control the image max width with size.'
-		)
-	})
+  let container: AstroContainer
+
+  beforeEach(async () => {
+    container = await AstroContainer.create()
+  })
+
+  const renderImage = async (
+    props: {
+      alt?: string
+      variant?: 'left' | 'right' | 'center' | 'full'
+      size?: '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+      magnifyButtonPosition?: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'
+    },
+    assertion: (_context: {
+      element: ImageElementInstance
+      window: Window & typeof globalThis
+    }) => Promise<void> | void
+  ) => {
+    await executeRender<ImageModule>({
+      container,
+      component: ImageFixture,
+      moduleSpecifier: '@components/Image/client/index',
+      args: { props },
+      waitForReady: async element => {
+        await element.updateComplete
+      },
+      assert: async ({ element, window }) => {
+        await assertion({ element, window: window as Window & typeof globalThis })
+      },
+    })
+  }
+
+  const renderImageToString = (props: {
+    alt?: string
+    variant?: 'left' | 'right' | 'center' | 'full'
+    size?: '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'invalid'
+    magnifyButtonPosition?: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'
+  }) => {
+    return container.renderToString(ImageFixture, {
+      props,
+    })
+  }
+
+  test('renders centered image markup by default', async () => {
+    await renderImage({}, async ({ element }) => {
+      expect(element.getAttribute('data-image-variant')).toBe('center')
+
+      const mainImage = getMainImage(element)
+      expect(mainImage?.getAttribute('alt')).toBe('Backstage background test image')
+
+      const openButton = getOpenButton(element)
+      expect(openButton?.getAttribute('aria-label')).toContain('Backstage background test image')
+
+      const dialog = getDialog(element)
+      expect(dialog?.hasAttribute('hidden')).toBe(true)
+    })
+  })
+
+  test('applies the requested magnify button corner', async () => {
+    await renderImage({ magnifyButtonPosition: 'bottom-left' }, async ({ element }) => {
+      const openButton = getOpenButton(element)
+      expect(openButton?.getAttribute('data-image-open-position')).toBe('bottom-left')
+      expect(openButton?.className).toContain('left-2')
+      expect(openButton?.className).toContain('bottom-2')
+    })
+  })
+
+  test('applies the requested desktop size token to centered images', async () => {
+    await renderImage({ size: 'xl' }, async ({ element }) => {
+      const figure = getFigure(element)
+      expect(figure?.className).toContain('md:max-w-xl')
+
+      const mainImage = getMainImage(element)
+      expect(mainImage?.getAttribute('sizes')).toBe('(min-width: 768px) 36rem, 100vw')
+    })
+  })
+
+  test('opens the modal when the magnify button is activated', async () => {
+    await renderImage({ variant: 'right' }, async ({ element, window }) => {
+      expect(element.getAttribute('data-image-variant')).toBe('right')
+
+      const openButton = getOpenButton(element)
+      openButton?.dispatchEvent(new window.Event('click', { bubbles: true }))
+      await element.updateComplete
+
+      const dialog = getDialog(element)
+      expect(dialog?.hasAttribute('hidden')).toBe(false)
+      expect(dialog?.getAttribute('aria-label')).toContain('Backstage background test image')
+
+      const modalImage = getModalImage(element)
+      expect(modalImage?.getAttribute('alt')).toBe('Backstage background test image')
+
+      const closeIcon = element.querySelector(
+        'button[aria-label="Close image dialog"] svg'
+      ) as SVGElement | null
+      expect(closeIcon?.getAttribute('aria-hidden')).toBe('true')
+      expect(closeIcon?.getAttribute('focusable')).toBe('false')
+    })
+  })
+
+  test('closes the modal on Escape', async () => {
+    await renderImage({}, async ({ element, window }) => {
+      const openButton = getOpenButton(element)
+      openButton?.dispatchEvent(new window.Event('click', { bubbles: true }))
+      await element.updateComplete
+
+      window.document.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Escape' }))
+      await element.updateComplete
+
+      const dialog = getDialog(element)
+      expect(dialog?.hasAttribute('hidden')).toBe(true)
+    })
+  })
+
+  test('throws for an invalid size value', async () => {
+    await expect(renderImageToString({ size: 'invalid' })).rejects.toThrow(
+      'Image: invalid size "invalid". Expected one of: 3xl, 2xl, xl, lg, md, sm, xs'
+    )
+  })
+
+  test('throws when size is used with the full variant', async () => {
+    await expect(renderImageToString({ variant: 'full', size: 'lg' })).rejects.toThrow(
+      'Image: size cannot be used with variant "full". The "full" variant always renders at the full available container width on desktop. Use variant "center", "left", or "right" if you want to control the image max width with size.'
+    )
+  })
 })
diff --git a/src/components/Image/client/index.ts b/src/components/Image/client/index.ts
index 26c7bfe5d..2ffcfd101 100644
--- a/src/components/Image/client/index.ts
+++ b/src/components/Image/client/index.ts
@@ -2,197 +2,193 @@ import { LitElement, html } from 'lit'
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 import { defineCustomElement } from '@components/scripts/utils/defineCustomElement'
 import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
-import {
-	getImageModalRoot,
-	queryImageCloseButton,
-	queryImageIconMarkup,
-} from './selectors'
+import { getImageModalRoot, queryImageCloseButton, queryImageIconMarkup } from './selectors'
 
 const COMPONENT_TAG_NAME = 'content-image'
 
 const parseDimension = (value: string | null): number | undefined => {
-	if (!value) {
-		return undefined
-	}
+  if (!value) {
+    return undefined
+  }
 
-	const parsed = Number(value)
-	return Number.isFinite(parsed) && parsed > 0 ? parsed : undefined
+  const parsed = Number(value)
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : undefined
 }
 
 const isElement = (value: EventTarget | null): value is Element => value instanceof Element
 const dialogClasses = 'fixed inset-0 z-(--z-modal) flex items-center justify-center p-4 md:p-8'
 const backdropClasses = 'absolute inset-0 bg-content opacity-[0.72]'
 const panelClasses =
-	'relative flex w-full max-w-[min(92vw,90rem)] max-h-[calc(100vh-2rem)] items-center justify-center overflow-hidden rounded-2xl border border-trim bg-page-base px-4 pt-12 pb-4 md:max-h-[calc(100vh-4rem)] md:px-6 md:pt-14 md:pb-6'
+  'relative flex w-full max-w-[min(92vw,90rem)] max-h-[calc(100vh-2rem)] items-center justify-center overflow-hidden rounded-2xl border border-trim bg-page-base px-4 pt-12 pb-4 md:max-h-[calc(100vh-4rem)] md:px-6 md:pt-14 md:pb-6'
 const closeButtonClasses =
-	"absolute right-3 top-3 inline-flex size-8 items-center justify-center rounded-full border-0 bg-gray-200 p-0 text-icons transition-colors duration-150 ease-linear hover:text-icons-active focus-visible:text-icons-active focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent after:opacity-0 after:transition-opacity after:duration-150 after:ease-out focus-visible:after:opacity-100 focus-visible:after:-inset-1 focus-visible:after:border-spotlight"
+  "absolute right-3 top-3 inline-flex size-8 items-center justify-center rounded-full border-0 bg-gray-200 p-0 text-icons transition-colors duration-150 ease-linear hover:text-icons-active focus-visible:text-icons-active focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent after:opacity-0 after:transition-opacity after:duration-150 after:ease-out focus-visible:after:opacity-100 focus-visible:after:-inset-1 focus-visible:after:border-spotlight"
 const modalAssetClasses =
-	'mx-auto block h-auto max-h-[calc(100vh-6rem)] max-w-full w-auto object-contain md:max-h-[calc(100vh-8rem)]'
+  'mx-auto block h-auto max-h-[calc(100vh-6rem)] max-w-full w-auto object-contain md:max-h-[calc(100vh-8rem)]'
 
 export class ImageElement extends LitElement {
-	static registeredName = COMPONENT_TAG_NAME
-
-	static override properties = {
-		open: { type: Boolean, reflect: true },
-		imageSrc: { type: String, attribute: 'image-src' },
-		imageAlt: { type: String, attribute: 'image-alt' },
-		imageWidth: { type: Number, attribute: 'image-width' },
-		imageHeight: { type: Number, attribute: 'image-height' },
-		iconBankId: { type: String, attribute: 'icon-bank-id' },
-	}
-
-	declare open: boolean
-	declare imageSrc: string
-	declare imageAlt: string
-	declare imageWidth: number | undefined
-	declare imageHeight: number | undefined
-	declare iconBankId: string
-
-	private opener: HTMLElement | null = null
-
-	constructor() {
-		super()
-		this.open = false
-		this.imageSrc = ''
-		this.imageAlt = ''
-		this.imageWidth = undefined
-		this.imageHeight = undefined
-		this.iconBankId = ''
-	}
-
-	protected override createRenderRoot(): HTMLElement | DocumentFragment {
-		return getImageModalRoot(this) ?? this
-	}
-
-	public override connectedCallback(): void {
-		super.connectedCallback()
-
-		this.imageWidth = parseDimension(this.getAttribute('image-width'))
-		this.imageHeight = parseDimension(this.getAttribute('image-height'))
-
-		this.addEventListener('click', this.handleHostClick)
-		document.addEventListener('keydown', this.handleKeyDown)
-	}
-
-	public override disconnectedCallback(): void {
-		this.removeEventListener('click', this.handleHostClick)
-		document.removeEventListener('keydown', this.handleKeyDown)
-		super.disconnectedCallback()
-	}
-
-	private readonly handleHostClick = (event: Event): void => {
-		if (!isElement(event.target)) {
-			return
-		}
-
-		const openButton = event.target.closest('[data-image-open]')
-		if (!openButton || !this.contains(openButton)) {
-			return
-		}
-
-		event.preventDefault()
-		this.opener = openButton instanceof HTMLElement ? openButton : null
-		this.openModal()
-	}
-
-	private readonly handleKeyDown = (event: KeyboardEvent): void => {
-		if (!this.open || event.key !== 'Escape') {
-			return
-		}
-
-		event.preventDefault()
-		this.closeModal()
-	}
-
-	private openModal(): void {
-		if (!this.imageSrc) {
-			return
-		}
-
-		this.open = true
-
-		this.updateComplete
-			.then(() => {
-				const closeButton = queryImageCloseButton(this.renderRoot)
-				if (closeButton) {
-					closeButton.focus()
-				}
-			})
-			.catch(() => {})
-	}
-
-	private closeModal(): void {
-		if (!this.open) {
-			return
-		}
-
-		this.open = false
-		this.opener?.focus()
-	}
-
-	protected override render() {
-		const closeIconMarkup =
-			typeof document !== 'undefined'
-				? queryImageIconMarkup({
-						iconBankId: this.iconBankId,
-						iconName: 'close',
-						root: document,
-					})
-				: null
-
-		const dialogLabel = this.imageAlt ? `Expanded view for ${this.imageAlt}` : 'Expanded image'
-
-		return html`
-			<div
-				class=${dialogClasses}
-				data-image-dialog
-				role="dialog"
-				aria-modal="true"
-				aria-label=${dialogLabel}
-				?hidden=${!this.open}
-			>
-				<div class=${backdropClasses} @click=${() => this.closeModal()}></div>
-
-				<div class=${panelClasses}>
-					<button
-						type="button"
-						class=${closeButtonClasses}
-						data-image-close
-						aria-label="Close image dialog"
-						@click=${() => this.closeModal()}
-					>
-						${closeIconMarkup ? unsafeHTML(closeIconMarkup) : null}
-					</button>
-
-					${this.open && this.imageSrc
-						? html`<img
-								class=${modalAssetClasses}
-								data-image-modal-asset
-								src=${this.imageSrc}
-								alt=${this.imageAlt}
-								decoding="async"
-								width=${this.imageWidth ?? ''}
-								height=${this.imageHeight ?? ''}
-							/>`
-						: null}
-				</div>
-			</div>
-		`
-	}
+  static registeredName = COMPONENT_TAG_NAME
+
+  static override properties = {
+    open: { type: Boolean, reflect: true },
+    imageSrc: { type: String, attribute: 'image-src' },
+    imageAlt: { type: String, attribute: 'image-alt' },
+    imageWidth: { type: Number, attribute: 'image-width' },
+    imageHeight: { type: Number, attribute: 'image-height' },
+    iconBankId: { type: String, attribute: 'icon-bank-id' },
+  }
+
+  declare open: boolean
+  declare imageSrc: string
+  declare imageAlt: string
+  declare imageWidth: number | undefined
+  declare imageHeight: number | undefined
+  declare iconBankId: string
+
+  private opener: HTMLElement | null = null
+
+  constructor() {
+    super()
+    this.open = false
+    this.imageSrc = ''
+    this.imageAlt = ''
+    this.imageWidth = undefined
+    this.imageHeight = undefined
+    this.iconBankId = ''
+  }
+
+  protected override createRenderRoot(): HTMLElement | DocumentFragment {
+    return getImageModalRoot(this) ?? this
+  }
+
+  public override connectedCallback(): void {
+    super.connectedCallback()
+
+    this.imageWidth = parseDimension(this.getAttribute('image-width'))
+    this.imageHeight = parseDimension(this.getAttribute('image-height'))
+
+    this.addEventListener('click', this.handleHostClick)
+    document.addEventListener('keydown', this.handleKeyDown)
+  }
+
+  public override disconnectedCallback(): void {
+    this.removeEventListener('click', this.handleHostClick)
+    document.removeEventListener('keydown', this.handleKeyDown)
+    super.disconnectedCallback()
+  }
+
+  private readonly handleHostClick = (event: Event): void => {
+    if (!isElement(event.target)) {
+      return
+    }
+
+    const openButton = event.target.closest('[data-image-open]')
+    if (!openButton || !this.contains(openButton)) {
+      return
+    }
+
+    event.preventDefault()
+    this.opener = openButton instanceof HTMLElement ? openButton : null
+    this.openModal()
+  }
+
+  private readonly handleKeyDown = (event: KeyboardEvent): void => {
+    if (!this.open || event.key !== 'Escape') {
+      return
+    }
+
+    event.preventDefault()
+    this.closeModal()
+  }
+
+  private openModal(): void {
+    if (!this.imageSrc) {
+      return
+    }
+
+    this.open = true
+
+    this.updateComplete
+      .then(() => {
+        const closeButton = queryImageCloseButton(this.renderRoot)
+        if (closeButton) {
+          closeButton.focus()
+        }
+      })
+      .catch(() => {})
+  }
+
+  private closeModal(): void {
+    if (!this.open) {
+      return
+    }
+
+    this.open = false
+    this.opener?.focus()
+  }
+
+  protected override render() {
+    const closeIconMarkup =
+      typeof document !== 'undefined'
+        ? queryImageIconMarkup({
+            iconBankId: this.iconBankId,
+            iconName: 'close',
+            root: document,
+          })
+        : null
+
+    const dialogLabel = this.imageAlt ? `Expanded view for ${this.imageAlt}` : 'Expanded image'
+
+    return html`
+      <div
+        class=${dialogClasses}
+        data-image-dialog
+        role="dialog"
+        aria-modal="true"
+        aria-label=${dialogLabel}
+        ?hidden=${!this.open}
+      >
+        <div class=${backdropClasses} @click=${() => this.closeModal()}></div>
+
+        <div class=${panelClasses}>
+          <button
+            type="button"
+            class=${closeButtonClasses}
+            data-image-close
+            aria-label="Close image dialog"
+            @click=${() => this.closeModal()}
+          >
+            ${closeIconMarkup ? unsafeHTML(closeIconMarkup) : null}
+          </button>
+
+          ${this.open && this.imageSrc
+            ? html`<img
+                class=${modalAssetClasses}
+                data-image-modal-asset
+                src=${this.imageSrc}
+                alt=${this.imageAlt}
+                decoding="async"
+                width=${this.imageWidth ?? ''}
+                height=${this.imageHeight ?? ''}
+              />`
+            : null}
+        </div>
+      </div>
+    `
+  }
 }
 
 export const registerWebComponent = (tagName = ImageElement.registeredName) => {
-	if (typeof window === 'undefined') {
-		return
-	}
+  if (typeof window === 'undefined') {
+    return
+  }
 
-	defineCustomElement(tagName, ImageElement)
+  defineCustomElement(tagName, ImageElement)
 }
 
 export const registerImageWebComponent = registerWebComponent
 
 export const webComponentModule: WebComponentModule<ImageElement> = {
-	registeredName: COMPONENT_TAG_NAME,
-	componentCtor: ImageElement,
-	registerWebComponent,
+  registeredName: COMPONENT_TAG_NAME,
+  componentCtor: ImageElement,
+  registerWebComponent,
 }
diff --git a/src/components/Image/client/selectors.ts b/src/components/Image/client/selectors.ts
index 9aa4ad0cb..71efb198b 100644
--- a/src/components/Image/client/selectors.ts
+++ b/src/components/Image/client/selectors.ts
@@ -42,4 +42,4 @@ export const queryImageIconMarkup = (params: {
 
   const markup = iconHostCandidate.innerHTML.trim()
   return markup ? markup : null
-}
\ No newline at end of file
+}
diff --git a/src/components/Image/index.astro b/src/components/Image/index.astro
index d221e6cbc..5fdc5840a 100644
--- a/src/components/Image/index.astro
+++ b/src/components/Image/index.astro
@@ -9,145 +9,153 @@ type MagnifyButtonPosition = 'top-right' | 'bottom-right' | 'top-left' | 'bottom
 type ImageSize = '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
 
 export interface Props {
-	src?: ImageSource | undefined
-	alt?: string | undefined
-	variant?: 'left' | 'right' | 'center' | 'full' | undefined
-	size?: ImageSize | undefined
-	magnifyButtonPosition?: MagnifyButtonPosition | undefined
-	loading?: 'lazy' | 'eager' | undefined
+  src?: ImageSource | undefined
+  alt?: string | undefined
+  variant?: 'left' | 'right' | 'center' | 'full' | undefined
+  size?: ImageSize | undefined
+  magnifyButtonPosition?: MagnifyButtonPosition | undefined
+  loading?: 'lazy' | 'eager' | undefined
 }
 
 const {
-	src,
-	alt = '',
-	variant = 'center',
-	loading = 'lazy',
+  src,
+  alt = '',
+  variant = 'center',
+  loading = 'lazy',
 }: Omit<Props, 'magnifyButtonPosition' | 'size'> = Astro.props
 
 const requestedMagnifyButtonPosition = Astro.props.magnifyButtonPosition as string | undefined
 const requestedSize = Astro.props.size as string | undefined
 const allowedVariants = ['left', 'right', 'center', 'full'] as const
-const allowedMagnifyButtonPositions = ['top-right', 'bottom-right', 'top-left', 'bottom-left'] as const
+const allowedMagnifyButtonPositions = [
+  'top-right',
+  'bottom-right',
+  'top-left',
+  'bottom-left',
+] as const
 const allowedSizes = ['3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs'] as const
 
 if (
-	typeof requestedMagnifyButtonPosition !== 'undefined' &&
-	!allowedMagnifyButtonPositions.includes(requestedMagnifyButtonPosition as MagnifyButtonPosition)
+  typeof requestedMagnifyButtonPosition !== 'undefined' &&
+  !allowedMagnifyButtonPositions.includes(requestedMagnifyButtonPosition as MagnifyButtonPosition)
 ) {
-	throw new Error(
-		`Image: invalid magnifyButtonPosition "${requestedMagnifyButtonPosition}". Expected one of: ${allowedMagnifyButtonPositions.join(', ')}`
-	)
+  throw new Error(
+    `Image: invalid magnifyButtonPosition "${requestedMagnifyButtonPosition}". Expected one of: ${allowedMagnifyButtonPositions.join(', ')}`
+  )
 }
 
 if (typeof requestedSize !== 'undefined' && !allowedSizes.includes(requestedSize as ImageSize)) {
-	throw new Error(
-		`Image: invalid size "${requestedSize}". Expected one of: ${allowedSizes.join(', ')}`
-	)
+  throw new Error(
+    `Image: invalid size "${requestedSize}". Expected one of: ${allowedSizes.join(', ')}`
+  )
 }
 
 const resolvedVariant = allowedVariants.includes(variant) ? variant : 'center'
 const resolvedMagnifyButtonPosition =
-	(requestedMagnifyButtonPosition as MagnifyButtonPosition | undefined) ?? 'top-right'
+  (requestedMagnifyButtonPosition as MagnifyButtonPosition | undefined) ?? 'top-right'
 const resolvedSize = (requestedSize as ImageSize | undefined) ?? '3xl'
 
 if (typeof requestedSize !== 'undefined' && resolvedVariant === 'full') {
-	throw new Error(
-		'Image: size cannot be used with variant "full". The "full" variant always renders at the full available container width on desktop. Use variant "center", "left", or "right" if you want to control the image max width with size.'
-	)
+  throw new Error(
+    'Image: size cannot be used with variant "full". The "full" variant always renders at the full available container width on desktop. Use variant "center", "left", or "right" if you want to control the image max width with size.'
+  )
 }
 
 const iconBankId = `content-image-icon-bank-${Math.random().toString(36).slice(2)}`
 const openLabel = alt ? `Open expanded view for ${alt}` : 'Open expanded image'
 const hostClasses = 'my-6 block w-full'
 const sizeMaxWidthClasses = {
-	'xs': 'md:max-w-xs',
-	'sm': 'md:max-w-sm',
-	'md': 'md:max-w-md',
-	'lg': 'md:max-w-lg',
-	'xl': 'md:max-w-xl',
-	'2xl': 'md:max-w-2xl',
-	'3xl': 'md:max-w-3xl',
+  xs: 'md:max-w-xs',
+  sm: 'md:max-w-sm',
+  md: 'md:max-w-md',
+  lg: 'md:max-w-lg',
+  xl: 'md:max-w-xl',
+  '2xl': 'md:max-w-2xl',
+  '3xl': 'md:max-w-3xl',
 } as const
 const sizeDesktopWidths = {
-	'xs': '20rem',
-	'sm': '24rem',
-	'md': '28rem',
-	'lg': '32rem',
-	'xl': '36rem',
-	'2xl': '42rem',
-	'3xl': '48rem',
+  xs: '20rem',
+  sm: '24rem',
+  md: '28rem',
+  lg: '32rem',
+  xl: '36rem',
+  '2xl': '42rem',
+  '3xl': '48rem',
 } as const
 const figureClassesByVariant = {
-	center: `m-0 w-full max-w-full md:mx-auto ${sizeMaxWidthClasses[resolvedSize]}`,
-	left: `m-0 w-full max-w-full md:mr-auto ${sizeMaxWidthClasses[resolvedSize]}`,
-	right: `m-0 w-full max-w-full md:ml-auto ${sizeMaxWidthClasses[resolvedSize]}`,
-	full: 'm-0 w-full max-w-full',
+  center: `m-0 w-full max-w-full md:mx-auto ${sizeMaxWidthClasses[resolvedSize]}`,
+  left: `m-0 w-full max-w-full md:mr-auto ${sizeMaxWidthClasses[resolvedSize]}`,
+  right: `m-0 w-full max-w-full md:ml-auto ${sizeMaxWidthClasses[resolvedSize]}`,
+  full: 'm-0 w-full max-w-full',
 } as const
 const figureClasses = figureClassesByVariant[resolvedVariant]
 const imageSizesAttr =
-	resolvedVariant === 'full' ? '100vw' : `(min-width: 768px) ${sizeDesktopWidths[resolvedSize]}, 100vw`
+  resolvedVariant === 'full'
+    ? '100vw'
+    : `(min-width: 768px) ${sizeDesktopWidths[resolvedSize]}, 100vw`
 const surfaceClasses = 'relative overflow-hidden rounded-xl border border-trim bg-page-offset'
 const assetClasses = 'block h-auto w-full'
 const openButtonPositionClasses = {
-	'top-right': 'top-2 right-2',
-	'bottom-right': 'right-2 bottom-2',
-	'top-left': 'top-2 left-2',
-	'bottom-left': 'left-2 bottom-2',
+  'top-right': 'top-2 right-2',
+  'bottom-right': 'right-2 bottom-2',
+  'top-left': 'top-2 left-2',
+  'bottom-left': 'left-2 bottom-2',
 } as const
 const openButtonBaseClasses =
-	"absolute hidden size-9 items-center justify-center rounded-full border-0 bg-gray-200 p-0 text-icons transition-[color,transform] duration-150 ease-linear hover:scale-[1.03] hover:text-icons-active focus-visible:scale-[1.03] focus-visible:text-icons-active focus-visible:outline-none md:inline-flex after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent after:opacity-0 after:transition-opacity after:duration-150 after:ease-out focus-visible:after:opacity-100 focus-visible:after:-inset-1 focus-visible:after:border-spotlight"
+  "absolute hidden size-9 items-center justify-center rounded-full border-0 bg-gray-200 p-0 text-icons transition-[color,transform] duration-150 ease-linear hover:scale-[1.03] hover:text-icons-active focus-visible:scale-[1.03] focus-visible:text-icons-active focus-visible:outline-none md:inline-flex after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent after:opacity-0 after:transition-opacity after:duration-150 after:ease-out focus-visible:after:opacity-100 focus-visible:after:-inset-1 focus-visible:after:border-spotlight"
 const openButtonClasses = `${openButtonBaseClasses} ${openButtonPositionClasses[resolvedMagnifyButtonPosition]}`
 ---
 
-{src && (
-	<>
-		<div id={iconBankId} hidden aria-hidden="true">
-			<span data-image-icon="close">
-				<Icon icon="close" color="inherit" size={6} />
-			</span>
-		</div>
-
-		<content-image
-			class={hostClasses}
-			data-image-variant={resolvedVariant}
-			data-testid="content-image"
-			icon-bank-id={iconBankId}
-			image-alt={alt}
-			image-height={String(src.height)}
-			image-src={src.src}
-			image-width={String(src.width)}
-		>
-			<div class={figureClasses} data-image-figure>
-				<div class={surfaceClasses}>
-					<AstroImage
-						src={src}
-						alt={alt}
-						loading={loading}
-						class={assetClasses}
-						widths={[480, 768, 1024, 1280, 1600]}
-						sizes={imageSizesAttr}
-					/>
-
-					{/** Intentionally not using Button component. */}
-					<button
-						type="button"
-						class:list={[openButtonClasses, 'print:hidden!']}
-						data-image-open
-						data-image-open-position={resolvedMagnifyButtonPosition}
-						aria-label={openLabel}
-					>
-						<Icon icon="magnify" color="inherit" size={5} />
-					</button>
-				</div>
-			</div>
-
-			<div data-image-modal-root></div>
-		</content-image>
-
-		<script>
-			import { registerImageWebComponent } from '@components/Image/client'
-
-			registerImageWebComponent()
-		</script>
-	</>
-)}
+{
+  src && (
+    <>
+      <div id={iconBankId} hidden aria-hidden="true">
+        <span data-image-icon="close">
+          <Icon icon="close" color="inherit" size={6} />
+        </span>
+      </div>
+
+      <content-image
+        class={hostClasses}
+        data-image-variant={resolvedVariant}
+        data-testid="content-image"
+        icon-bank-id={iconBankId}
+        image-alt={alt}
+        image-height={String(src.height)}
+        image-src={src.src}
+        image-width={String(src.width)}
+      >
+        <div class={figureClasses} data-image-figure>
+          <div class={surfaceClasses}>
+            <AstroImage
+              src={src}
+              alt={alt}
+              loading={loading}
+              class={assetClasses}
+              widths={[480, 768, 1024, 1280, 1600]}
+              sizes={imageSizesAttr}
+            />
+
+            {/** Intentionally not using Button component. */}
+            <button
+              type="button"
+              class:list={[openButtonClasses, 'print:hidden!']}
+              data-image-open
+              data-image-open-position={resolvedMagnifyButtonPosition}
+              aria-label={openLabel}
+            >
+              <Icon icon="magnify" color="inherit" size={5} />
+            </button>
+          </div>
+        </div>
+
+        <div data-image-modal-root />
+      </content-image>
+
+      <script>
+        import {registerImageWebComponent} from '@components/Image/client'
+        registerImageWebComponent()
+      </script>
+    </>
+  )
+}
diff --git a/src/components/Inset/__tests__/index.spec.ts b/src/components/Inset/__tests__/index.spec.ts
index 4cce1867e..fbbd84d2a 100644
--- a/src/components/Inset/__tests__/index.spec.ts
+++ b/src/components/Inset/__tests__/index.spec.ts
@@ -90,4 +90,4 @@ describe('Inset (Astro)', () => {
       )
     })
   })
-})
\ No newline at end of file
+})
diff --git a/src/components/Inset/index.astro b/src/components/Inset/index.astro
index daac5a6dd..d8ff5ac54 100644
--- a/src/components/Inset/index.astro
+++ b/src/components/Inset/index.astro
@@ -26,12 +26,12 @@ const defaultInsetProps = {
 ---
 
 <figure class:list={[classes?.wrapper ? classes.wrapper : 'mb-8']}>
-  {variant === 'default' && (
-    <DefaultInset {...defaultInsetProps}>
-      <slot />
-    </DefaultInset>
-  )}
-  {figure && (
-    <figcaption class="italic text-base text-center mt-3" set:html={figure}></figcaption>
-  )}
+  {
+    variant === 'default' && (
+      <DefaultInset {...defaultInsetProps}>
+        <slot />
+      </DefaultInset>
+    )
+  }
+  {figure && <figcaption class="italic text-base text-center mt-3" set:html={figure} />}
 </figure>
diff --git a/src/components/Layout/Copyright/index.astro b/src/components/Layout/Copyright/index.astro
index add75b367..37cc2a2d0 100644
--- a/src/components/Layout/Copyright/index.astro
+++ b/src/components/Layout/Copyright/index.astro
@@ -12,6 +12,5 @@ const { publishDate, variant = 'default', link } = Astro.props
 const publishYear = publishDate.getFullYear()
 ---
 
-
 {variant === 'default' && <DefaultCopyright publishYear={publishYear} />}
 {variant === 'print' && <PrintCopyright publishYear={publishYear} {...(link ? { link } : {})} />}
diff --git a/src/components/Layout/Copyright/layouts/default.astro b/src/components/Layout/Copyright/layouts/default.astro
index ff51caf94..af5c13351 100644
--- a/src/components/Layout/Copyright/layouts/default.astro
+++ b/src/components/Layout/Copyright/layouts/default.astro
@@ -11,12 +11,7 @@ const { publishYear } = Astro.props
 <div class="flex flex-col text-content-active text-xs mb-6 print:hidden">
   <div class="flex justify-center">
     <span class="mr-2">Copyright</span>
-    <Icon
-      icon="copyright"
-      color="content-active"
-      size={3}
-      classes="mt-0"
-    />
+    <Icon icon="copyright" color="content-active" size={3} classes="mt-0" />
     <span class="ml-2 mr-1">
       <time datetime={String(publishYear)}>{publishYear}</time>
     </span>
diff --git a/src/components/Layout/Copyright/layouts/print.astro b/src/components/Layout/Copyright/layouts/print.astro
index f2b7f9bd5..9c6f860a0 100644
--- a/src/components/Layout/Copyright/layouts/print.astro
+++ b/src/components/Layout/Copyright/layouts/print.astro
@@ -9,19 +9,16 @@ export interface Props {
 const { link, publishYear } = Astro.props
 
 const companyName = 'Webstack Builders, Inc.'
-const creativeCommonsLicense = 'The text, diagrams, and images in this work are licensed under CC BY-NC 4.0'
-const mitLicense = 'All code samples in this article are licensed under the MIT License. Feel free to use, modify, and distribute them in any project.'
+const creativeCommonsLicense =
+  'The text, diagrams, and images in this work are licensed under CC BY-NC 4.0'
+const mitLicense =
+  'All code samples in this article are licensed under the MIT License. Feel free to use, modify, and distribute them in any project.'
 ---
 
 <div class="flex flex-col gap-4">
   <div class="flex">
     <span>Copyright</span>
-    <Icon
-      icon="copyright"
-      color="content-active"
-      size={3}
-      classes="ml-2 mt-1"
-    />
+    <Icon icon="copyright" color="content-active" size={3} classes="ml-2 mt-1" />
     <span class="ml-2 mr-1">
       <time datetime={String(publishYear)}>{publishYear}</time>
     </span>
diff --git a/src/components/Layout/Markdown/Lead/__tests__/index.spec.ts b/src/components/Layout/Markdown/Lead/__tests__/index.spec.ts
index 815ff60c4..bafe03f53 100644
--- a/src/components/Layout/Markdown/Lead/__tests__/index.spec.ts
+++ b/src/components/Layout/Markdown/Lead/__tests__/index.spec.ts
@@ -7,7 +7,7 @@ import Lead from '../index.astro'
 
 const fixtureModules = import.meta.glob(
   '../../../../Avatar/server/__fixtures__/avatars/*.{jpg,jpeg,png,webp}',
-  { eager: true, import: 'default' },
+  { eager: true, import: 'default' }
 )
 
 vi.mock('@components/Avatar/server/avatarImports', () => ({
@@ -36,7 +36,9 @@ describe('Lead', () => {
     const document = dom.window.document
     const normalizeWhitespace = (value: string) => value.replace(/\s+/g, ' ').trim()
 
-    const primaryLineText = normalizeWhitespace(document.querySelector('.text-primary')?.textContent ?? '')
+    const primaryLineText = normalizeWhitespace(
+      document.querySelector('.text-primary')?.textContent ?? ''
+    )
 
     expect(html).toContain('href="/about"')
     expect(html).toContain('Kevin Brown')
diff --git a/src/components/Layout/Markdown/Lead/index.astro b/src/components/Layout/Markdown/Lead/index.astro
index 8ce74176b..bdbb722c0 100644
--- a/src/components/Layout/Markdown/Lead/index.astro
+++ b/src/components/Layout/Markdown/Lead/index.astro
@@ -21,8 +21,11 @@ const formatShortDate = (date: Date) =>
   })
 
 const publishDateText = publishDate ? formatShortDate(publishDate) : null
-const shouldShowModifiedDate = Boolean(modifiedDate && publishDate && modifiedDate.getTime() !== publishDate.getTime())
-const modifiedDateText = shouldShowModifiedDate && modifiedDate ? formatShortDate(modifiedDate) : null
+const shouldShowModifiedDate = Boolean(
+  modifiedDate && publishDate && modifiedDate.getTime() !== publishDate.getTime()
+)
+const modifiedDateText =
+  shouldShowModifiedDate && modifiedDate ? formatShortDate(modifiedDate) : null
 ---
 
 <div class="mt-2 sm:mt-4 pt-2 border-t border-trim">
@@ -32,35 +35,47 @@ const modifiedDateText = shouldShowModifiedDate && modifiedDate ? formatShortDat
 
       <div class="flex flex-col justify-center text-sm">
         <div class="whitespace-nowrap text-primary">
-          {author && (
-            <a
-              href="/about"
-              class="inline-flex min-h-6 items-center align-middle font-medium no-underline hover:text-secondary focus:text-secondary"
-            >
-              {author}
-            </a>
-          )}
-          {author && publishDateText && <span class="text-content-offset">{' '}on{' '}</span>}
-          {publishDateText && (
-            <time itemprop="datePublished" datetime={publishDate?.toISOString()}>
-              {publishDateText}
-            </time>
-          )}
+          {
+            author && (
+              <a
+                href="/about"
+                class="inline-flex min-h-6 items-center align-middle font-medium no-underline hover:text-secondary focus:text-secondary"
+              >
+                {author}
+              </a>
+            )
+          }
+          {author && publishDateText && <span class="text-content-offset"> on </span>}
+          {
+            publishDateText && (
+              <time itemprop="datePublished" datetime={publishDate?.toISOString()}>
+                {publishDateText}
+              </time>
+            )
+          }
         </div>
 
-        {modifiedDateText && (
-          <time class="text-content-offset" itemprop="dateModified" datetime={modifiedDate?.toISOString()}>
-            Updated on {modifiedDateText}
-          </time>
-        )}
+        {
+          modifiedDateText && (
+            <time
+              class="text-content-offset"
+              itemprop="dateModified"
+              datetime={modifiedDate?.toISOString()}
+            >
+              Updated on {modifiedDateText}
+            </time>
+          )
+        }
 
         {readingTime && <div class="text-content-offset">{readingTime}</div>}
       </div>
     </div>
-    {tags && tags.length > 0 && (
-      <div class="hidden sm:block sm:basis-full lg:mt-1 lg:mr-1 lg:flex lg:flex-1 lg:justify-end lg:basis-auto lg:min-w-0">
-        <Tags tags={tags} />
-      </div>
-    )}
+    {
+      tags && tags.length > 0 && (
+        <div class="hidden sm:block sm:basis-full lg:mt-1 lg:mr-1 lg:flex lg:flex-1 lg:justify-end lg:basis-auto lg:min-w-0">
+          <Tags tags={tags} />
+        </div>
+      )
+    }
   </div>
 </div>
diff --git a/src/components/Layout/Markdown/Tags/index.astro b/src/components/Layout/Markdown/Tags/index.astro
index 3407f3e73..3573dc7d9 100644
--- a/src/components/Layout/Markdown/Tags/index.astro
+++ b/src/components/Layout/Markdown/Tags/index.astro
@@ -61,9 +61,9 @@ const resolveTagMeta = (rawTag: string) => {
             data-tooltip
             title={`See All ${label} Articles`}
             class:list={[
-              "inline-block rounded-full transition-colors px-3 py-1 ml-2",
-              "uppercase text-content-inverse text-xs no-underline",
-              "bg-warning-offset hover:bg-warning",
+              'inline-block rounded-full transition-colors px-3 py-1 ml-2',
+              'uppercase text-content-inverse text-xs no-underline',
+              'bg-warning-offset hover:bg-warning',
               "relative focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-1 focus-visible:after:border-spotlight",
             ]}
           >
diff --git a/src/components/Layout/Print/Cover/index.astro b/src/components/Layout/Print/Cover/index.astro
index 1d859c06b..6afa5fe25 100644
--- a/src/components/Layout/Print/Cover/index.astro
+++ b/src/components/Layout/Print/Cover/index.astro
@@ -19,27 +19,23 @@ const publishDateLabel = article.data.publishDate.toLocaleDateString(undefined,
 })
 ---
 
-<section class="relative min-h-[calc(100vh-5.5cm)] break-after-page flex flex-col items-center justify-center px-8 text-center">
-  <div class="cover-background absolute top-[-3cm] right-[-1.5cm] bottom-[-2.5cm] left-[-1.5cm] overflow-hidden">
-    <Image
-      src={coverImage}
-      alt=""
-      loading="eager"
-      variant="full"
-    />
+<section
+  class="relative min-h-[calc(100vh-5.5cm)] break-after-page flex flex-col items-center justify-center px-8 text-center"
+>
+  <div
+    class="cover-background absolute top-[-3cm] right-[-1.5cm] bottom-[-2.5cm] left-[-1.5cm] overflow-hidden"
+  >
+    <Image src={coverImage} alt="" loading="eager" variant="full" />
   </div>
 
-  <h1 class="relative mx-auto mb-8 mt-24 max-w-[90%] text-[32pt] leading-[1.15] font-extrabold tracking-tight text-primary-inverse">
+  <h1
+    class="relative mx-auto mb-8 mt-24 max-w-[90%] text-[32pt] leading-[1.15] font-extrabold tracking-tight text-primary-inverse"
+  >
     {article.data.title}
   </h1>
 
   <div class="cover-article-image relative w-full self-stretch overflow-hidden mt-8">
-    <Image
-      src={article.data.cover}
-      alt={article.data.coverAlt}
-      loading="eager"
-      variant="full"
-    />
+    <Image src={article.data.cover} alt={article.data.coverAlt} loading="eager" variant="full" />
   </div>
 
   <div class="relative mt-auto pt-8">
@@ -57,62 +53,62 @@ const publishDateLabel = article.data.publishDate.toLocaleDateString(undefined,
 </section>
 
 <style>
-:global(.cover-background > content-image),
-:global(.cover-background [data-image-figure]),
-:global(.cover-background > content-image > div),
-:global(.cover-background [data-image-figure] > div) {
-  height: 100%;
-  width: 100%;
-}
-
-:global(.cover-background > content-image) {
-  margin: 0;
-}
-
-:global(.cover-background [data-image-figure]) {
-  max-width: none;
-}
-
-:global(.cover-background [data-image-figure] > div) {
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-}
-
-:global(.cover-background img) {
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-  width: 100%;
-}
-
-:global(.cover-article-image > content-image) {
-  margin: 0;
-}
-
-:global(.cover-article-image [data-image-figure]) {
-  max-width: none;
-}
-
-:global(.cover-article-image [data-image-figure] > div) {
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-}
-
-:global(.cover-article-image img) {
-  border-radius: 0;
-}
-
-:global(.cover-brand .logo-block-outer) {
-  fill: #001A39;
-}
-
-:global(.cover-brand .logo-block-inner) {
-  fill: #006dca;
-}
-
-:global(.cover-brand .wordmark__svg-path) {
-  fill: #fff;
-}
+  :global(.cover-background > content-image),
+  :global(.cover-background [data-image-figure]),
+  :global(.cover-background > content-image > div),
+  :global(.cover-background [data-image-figure] > div) {
+    height: 100%;
+    width: 100%;
+  }
+
+  :global(.cover-background > content-image) {
+    margin: 0;
+  }
+
+  :global(.cover-background [data-image-figure]) {
+    max-width: none;
+  }
+
+  :global(.cover-background [data-image-figure] > div) {
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+  }
+
+  :global(.cover-background img) {
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    width: 100%;
+  }
+
+  :global(.cover-article-image > content-image) {
+    margin: 0;
+  }
+
+  :global(.cover-article-image [data-image-figure]) {
+    max-width: none;
+  }
+
+  :global(.cover-article-image [data-image-figure] > div) {
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+  }
+
+  :global(.cover-article-image img) {
+    border-radius: 0;
+  }
+
+  :global(.cover-brand .logo-block-outer) {
+    fill: #001a39;
+  }
+
+  :global(.cover-brand .logo-block-inner) {
+    fill: #006dca;
+  }
+
+  :global(.cover-brand .wordmark__svg-path) {
+    fill: #fff;
+  }
 </style>
diff --git a/src/components/Layout/Print/Toc/index.astro b/src/components/Layout/Print/Toc/index.astro
index fe307ecbc..884eb114f 100644
--- a/src/components/Layout/Print/Toc/index.astro
+++ b/src/components/Layout/Print/Toc/index.astro
@@ -17,28 +17,30 @@ const { headings } = Astro.props
 const tocTree = buildTocTree(headings)
 ---
 
-{tocTree.length > 0 && (
-  <section class="print-toc break-after-page">
-    <h2 class="text-page-inverse ml-8 mb-8">Table of Contents</h2>
-    <nav aria-label="Table of contents" class=" mx-20">
-      {(() => {
-        const renderNodes = (nodes: TocItem[], depth = 0): unknown =>
-          nodes.map(node => (
-            <div class:list={[
-              'mb-[0.15cm]',
-              depth > 0 && 'pl-[1.5em]',
-            ]}>
-              <a href={`#${node.slug}`} class="flex items-baseline text-inherit no-underline">
-                <span class="shrink-0">{node.text}</span>
-                <span class="mx-[0.3em] min-w-[2em] grow border-b border-dotted border-[#999]" aria-hidden="true"></span>
-                <span class="print-toc__page"></span>
-              </a>
-              {node.children.length > 0 && renderNodes(node.children, depth + 1)}
-            </div>
-          ))
+{
+  tocTree.length > 0 && (
+    <section class="print-toc break-after-page">
+      <h2 class="text-page-inverse ml-8 mb-8">Table of Contents</h2>
+      <nav aria-label="Table of contents" class=" mx-20">
+        {(() => {
+          const renderNodes = (nodes: TocItem[], depth = 0): unknown =>
+            nodes.map(node => (
+              <div class:list={['mb-[0.15cm]', depth > 0 && 'pl-[1.5em]']}>
+                <a href={`#${node.slug}`} class="flex items-baseline text-inherit no-underline">
+                  <span class="shrink-0">{node.text}</span>
+                  <span
+                    class="mx-[0.3em] min-w-[2em] grow border-b border-dotted border-[#999]"
+                    aria-hidden="true"
+                  />
+                  <span class="print-toc__page" />
+                </a>
+                {node.children.length > 0 && renderNodes(node.children, depth + 1)}
+              </div>
+            ))
 
-        return renderNodes(tocTree)
-      })()}
-    </nav>
-  </section>
-)}
+          return renderNodes(tocTree)
+        })()}
+      </nav>
+    </section>
+  )
+}
diff --git a/src/components/Layout/SubHeader/index.astro b/src/components/Layout/SubHeader/index.astro
index bc9b7befd..ce26b7ce6 100644
--- a/src/components/Layout/SubHeader/index.astro
+++ b/src/components/Layout/SubHeader/index.astro
@@ -12,13 +12,13 @@ const { title, description, icon, subtitle } = Astro.props
 
 <header class="text-center max-w-2xl mx-auto mt-6 mb-8">
   <div class="inline-flex items-center justify-center w-18 h-18 rounded-full bg-primary/10 mb-5">
-    <Icon
-      icon={icon}
-      color="page-inverse"
-      size={11}
-    />
+    <Icon icon={icon} color="page-inverse" size={11} />
   </div>
   <h1 class="text-4xl md:text-5xl font-bold leading-tight text-page-inverse mb-4">{title}</h1>
-  {description && (<p class="text-lg text-content-offset leading-relaxed mb-4" set:html={description}></p>)}
-  {subtitle && (<p class="text-sm text-page-inverse italic" set:html={subtitle}></p>)}
+  {
+    description && (
+      <p class="text-lg text-content-offset leading-relaxed mb-4" set:html={description} />
+    )
+  }
+  {subtitle && <p class="text-sm text-page-inverse italic" set:html={subtitle} />}
 </header>
diff --git a/src/components/List/ListItem.astro b/src/components/List/ListItem.astro
index d47944b92..7478d10af 100644
--- a/src/components/List/ListItem.astro
+++ b/src/components/List/ListItem.astro
@@ -6,4 +6,4 @@ export type Props = {
 const { lead } = Astro.props as Props
 ---
 
-<wsb-list-item {...(lead ? { 'data-lead': lead } : {})}><slot /></wsb-list-item>
\ No newline at end of file
+<wsb-list-item {...lead ? { 'data-lead': lead } : {}}><slot /></wsb-list-item>
diff --git a/src/components/List/__fixtures__/mixedApi.fixture.astro b/src/components/List/__fixtures__/mixedApi.fixture.astro
index 5824f4e0c..b67d3c3e5 100644
--- a/src/components/List/__fixtures__/mixedApi.fixture.astro
+++ b/src/components/List/__fixtures__/mixedApi.fixture.astro
@@ -13,4 +13,4 @@ import ListItem from '@components/List/ListItem.astro'
   ]}
 >
   <ListItem lead="Slot item">This should never render.</ListItem>
-</List>
\ No newline at end of file
+</List>
diff --git a/src/components/List/__fixtures__/richItems.fixture.astro b/src/components/List/__fixtures__/richItems.fixture.astro
index 0c5d84c07..254ba8b69 100644
--- a/src/components/List/__fixtures__/richItems.fixture.astro
+++ b/src/components/List/__fixtures__/richItems.fixture.astro
@@ -7,7 +7,5 @@ import ListItem from '@components/List/ListItem.astro'
   <ListItem lead="Network isolation">
     Separate VPCs<sup data-footnote-ref="slot-demo">1</sup> can provide stronger boundaries.
   </ListItem>
-  <ListItem lead="Compute isolation">
-    Dedicated node pools reduce resource contention.
-  </ListItem>
-</List>
\ No newline at end of file
+  <ListItem lead="Compute isolation"> Dedicated node pools reduce resource contention. </ListItem>
+</List>
diff --git a/src/components/List/__tests__/index.spec.ts b/src/components/List/__tests__/index.spec.ts
index e9190d19d..d9bbae4aa 100644
--- a/src/components/List/__tests__/index.spec.ts
+++ b/src/components/List/__tests__/index.spec.ts
@@ -36,8 +36,8 @@ describe('List (Astro)', () => {
 
       const definitionList = window.document.querySelector('dl')
       expect(definitionList).toBeTruthy()
-  expect(definitionList?.className).toContain('max-w-2xl')
-  expect(definitionList?.className).toContain('mx-auto')
+      expect(definitionList?.className).toContain('max-w-2xl')
+      expect(definitionList?.className).toContain('mx-auto')
 
       const questions = window.document.querySelectorAll('dt')
       const answers = window.document.querySelectorAll('dd')
@@ -227,7 +227,9 @@ describe('List (Astro)', () => {
       expect(list?.className).toContain('text-content-offset')
       expect(item?.className).toContain('flex')
       expect(svg).toBeTruthy()
-      expect(item?.textContent).toContain('Built self-service infrastructure provisioning workflows.')
+      expect(item?.textContent).toContain(
+        'Built self-service infrastructure provisioning workflows.'
+      )
     })
   })
 
@@ -284,4 +286,4 @@ describe('List (Astro)', () => {
       'List: received both the `items` prop and ListItem children. Use one API or the other.'
     )
   })
-})
\ No newline at end of file
+})
diff --git a/src/components/List/index.astro b/src/components/List/index.astro
index f5a505c37..ce658a246 100644
--- a/src/components/List/index.astro
+++ b/src/components/List/index.astro
@@ -48,7 +48,15 @@ export type Props = {
   style?: Record<string, unknown>
 }
 
-const { items, size, color, startNumber, variant = 'default', classes, style } = Astro.props as Props
+const {
+  items,
+  size,
+  color,
+  startNumber,
+  variant = 'default',
+  classes,
+  style,
+} = Astro.props as Props
 const hasItemsProp = Object.prototype.hasOwnProperty.call(Astro.props, 'items')
 const hasDefaultSlot = Astro.slots.has('default')
 
@@ -90,26 +98,119 @@ const itemsWithIconAndColor = normalizedItems as Array<{
   inverseColor?: string
   bgColor?: string
 }>
-const plainIconItems = normalizedItems.filter((item): item is NonNullable<Props['items']>[number] & { icon: string } => {
-  return typeof item.icon === 'string' && item.icon.trim().length > 0
-})
+const plainIconItems = normalizedItems.filter(
+  (item): item is NonNullable<Props['items']>[number] & { icon: string } => {
+    return typeof item.icon === 'string' && item.icon.trim().length > 0
+  }
+)
 ---
 
 <div class:list={[classes?.wrapper ? classes.wrapper : 'mb-6']}>
-  {variant === 'accent-border-left-list' && <AccentBorderLeftList items={normalizedItems} {...classesProps} {...styleProps} />}
-  {variant === 'badge-list' && <BadgeList items={normalizedItems} {...classesProps} {...styleProps} />}
-  {variant === 'card-grid-list' && <CardGridList items={normalizedItems} {...classesProps} {...styleProps} />}
-  {variant === 'chat-bubbles' && <ChatBubbles items={normalizedItems} {...classesProps} {...chatBubbleSizeProps} />}
-  {variant === 'check-icons-list' && <CheckIconsList items={normalizedItems} {...classesProps} {...styleProps} />}
-  {variant === 'chevron-list' && <ChevronList items={normalizedItems} {...classesProps} {...styleProps} />}
-  {variant === 'colored-marker-list' && <ColoredMarkerList items={itemsWithColor} {...classesProps} {...numericSizeProps} {...styleProps} />}
+  {
+    variant === 'accent-border-left-list' && (
+      <AccentBorderLeftList items={normalizedItems} {...classesProps} {...styleProps} />
+    )
+  }
+  {
+    variant === 'badge-list' && (
+      <BadgeList items={normalizedItems} {...classesProps} {...styleProps} />
+    )
+  }
+  {
+    variant === 'card-grid-list' && (
+      <CardGridList items={normalizedItems} {...classesProps} {...styleProps} />
+    )
+  }
+  {
+    variant === 'chat-bubbles' && (
+      <ChatBubbles items={normalizedItems} {...classesProps} {...chatBubbleSizeProps} />
+    )
+  }
+  {
+    variant === 'check-icons-list' && (
+      <CheckIconsList items={normalizedItems} {...classesProps} {...styleProps} />
+    )
+  }
+  {
+    variant === 'chevron-list' && (
+      <ChevronList items={normalizedItems} {...classesProps} {...styleProps} />
+    )
+  }
+  {
+    variant === 'colored-marker-list' && (
+      <ColoredMarkerList
+        items={itemsWithColor}
+        {...classesProps}
+        {...numericSizeProps}
+        {...styleProps}
+      />
+    )
+  }
   {variant === 'experience-list' && <ExperienceList items={normalizedItems} {...classesProps} />}
-  {variant === 'numbered-with-background-list' && <NumberedWithBackgroundList items={normalizedItems} {...classesProps} {...colorProps} {...startNumberProps} {...styleProps} />}
-  {variant === 'plain-icon-list' && <PlainIconList items={plainIconItems} {...classesProps} {...numericSizeProps} {...styleProps} />}
-  {variant === 'side-by-side-list' && <SideBySideList items={normalizedItems} {...classesProps} {...styleProps} />}
-  {variant === 'timeline-list' && <TimelineList items={normalizedItems} {...classesProps} {...styleProps} />}
-  {variant === 'two-column-check-icons-list' && <TwoColumnCheckIconsList items={normalizedItems} {...classesProps} {...numericSizeProps} {...styleProps} />}
-  {variant === 'two-column-icon-list' && <TwoColumnIconList items={itemsWithIconAndColor} {...classesProps} {...numericSizeProps} {...styleProps} />}
-  {variant === 'three-column-icon-list' && <ThreeColumnIconList items={itemsWithIconAndColor} {...classesProps} {...numericSizeProps} {...styleProps} />}
-  {variant === 'zebra-list' && <ZebraList items={normalizedItems} {...classesProps} {...styleProps} />}
+  {
+    variant === 'numbered-with-background-list' && (
+      <NumberedWithBackgroundList
+        items={normalizedItems}
+        {...classesProps}
+        {...colorProps}
+        {...startNumberProps}
+        {...styleProps}
+      />
+    )
+  }
+  {
+    variant === 'plain-icon-list' && (
+      <PlainIconList
+        items={plainIconItems}
+        {...classesProps}
+        {...numericSizeProps}
+        {...styleProps}
+      />
+    )
+  }
+  {
+    variant === 'side-by-side-list' && (
+      <SideBySideList items={normalizedItems} {...classesProps} {...styleProps} />
+    )
+  }
+  {
+    variant === 'timeline-list' && (
+      <TimelineList items={normalizedItems} {...classesProps} {...styleProps} />
+    )
+  }
+  {
+    variant === 'two-column-check-icons-list' && (
+      <TwoColumnCheckIconsList
+        items={normalizedItems}
+        {...classesProps}
+        {...numericSizeProps}
+        {...styleProps}
+      />
+    )
+  }
+  {
+    variant === 'two-column-icon-list' && (
+      <TwoColumnIconList
+        items={itemsWithIconAndColor}
+        {...classesProps}
+        {...numericSizeProps}
+        {...styleProps}
+      />
+    )
+  }
+  {
+    variant === 'three-column-icon-list' && (
+      <ThreeColumnIconList
+        items={itemsWithIconAndColor}
+        {...classesProps}
+        {...numericSizeProps}
+        {...styleProps}
+      />
+    )
+  }
+  {
+    variant === 'zebra-list' && (
+      <ZebraList items={normalizedItems} {...classesProps} {...styleProps} />
+    )
+  }
 </div>
diff --git a/src/components/List/layouts/AccentBorderLeftList.astro b/src/components/List/layouts/AccentBorderLeftList.astro
index 57a706377..979edb8b3 100644
--- a/src/components/List/layouts/AccentBorderLeftList.astro
+++ b/src/components/List/layouts/AccentBorderLeftList.astro
@@ -14,25 +14,25 @@ export type Props = {
 
 const { items, classes }: Props = Astro.props
 
-const ulClass = "space-y-4 list-none pl-0"
-const liClass = "border-l-4 pl-4"
-const headerClass = "text-page-inverse font-semibold mb-2"
-const textClass = "text-content-offset text-sm"
+const ulClass = 'space-y-4 list-none pl-0'
+const liClass = 'border-l-4 pl-4'
+const headerClass = 'text-page-inverse font-semibold mb-2'
+const textClass = 'text-content-offset text-sm'
 ---
 
 <ul class:list={[ulClass, classes?.ul]}>
   {
-    items.map((item) => (
+    items.map(item => (
       <li class:list={[liClass, classes?.li, item.color]}>
-        {item.lead && <h4 class:list={[headerClass, classes?.em]} set:html={item.lead}></h4>}
+        {item.lead && <h4 class:list={[headerClass, classes?.em]} set:html={item.lead} />}
         {Array.isArray(item.text) ? (
           <div class="space-y-3">
-            {item.text.map((paragraph) => (
-              <p class:list={textClass} set:html={paragraph}></p>
+            {item.text.map(paragraph => (
+              <p class:list={textClass} set:html={paragraph} />
             ))}
           </div>
         ) : (
-          <p class:list={textClass} set:html={item.text}></p>
+          <p class:list={textClass} set:html={item.text} />
         )}
       </li>
     ))
diff --git a/src/components/List/layouts/BadgeList.astro b/src/components/List/layouts/BadgeList.astro
index 08fa2c950..1625c6222 100644
--- a/src/components/List/layouts/BadgeList.astro
+++ b/src/components/List/layouts/BadgeList.astro
@@ -17,32 +17,34 @@ export type Props = {
 
 const { items, classes }: Props = Astro.props
 
-const ulClass = ["space-y-4 sm:space-y-0 sm:table sm:border-separate sm:border-spacing-x-4 sm:border-spacing-y-4", classes?.ul]
-const liClass = ["flex flex-col gap-2 sm:table-row", classes?.li]
-const titleCellClass = "sm:table-cell sm:align-top"
+const ulClass = [
+  'space-y-4 sm:space-y-0 sm:table sm:border-separate sm:border-spacing-x-4 sm:border-spacing-y-4',
+  classes?.ul,
+]
+const liClass = ['flex flex-col gap-2 sm:table-row', classes?.li]
+const titleCellClass = 'sm:table-cell sm:align-top'
 const titleClass = [
-  "inline-block px-2 py-1 rounded bg-content text-page-base font-mono text-xs font-bold sm:mt-1",
+  'inline-block px-2 py-1 rounded bg-content text-page-base font-mono text-xs font-bold sm:mt-1',
   classes?.titleClass,
 ]
-const bodyClass = ["sm:table-cell sm:align-top", classes?.content]
-const emClass = ["text-content font-bold not-italic mr-2", classes?.em]
+const bodyClass = ['sm:table-cell sm:align-top', classes?.content]
+const emClass = ['text-content font-bold not-italic mr-2', classes?.em]
 ---
 
 <ul class:list={ulClass}>
   {
-    items.map((item) => (
+    items.map(item => (
       <li class:list={liClass}>
         {item.title && (
           <span class={titleCellClass}>
-            <span class:list={["list-badge", titleClass]} set:html={item.title}></span>
+            <span class:list={['list-badge', titleClass]} set:html={item.title} />
           </span>
         )}
         <span class:list={bodyClass}>
-          {item.lead && <em class:list={emClass} set:html={item.lead}></em>}
-          <span class="text-content-offset" set:html={item.text}></span>
+          {item.lead && <em class:list={emClass} set:html={item.lead} />}
+          <span class="text-content-offset" set:html={item.text} />
         </span>
       </li>
     ))
   }
 </ul>
-
diff --git a/src/components/List/layouts/CardGridList.astro b/src/components/List/layouts/CardGridList.astro
index 5e27765cf..feb30571a 100644
--- a/src/components/List/layouts/CardGridList.astro
+++ b/src/components/List/layouts/CardGridList.astro
@@ -16,25 +16,25 @@ export type Props = {
 
 const { items, classes }: Props = Astro.props
 
-const ulClass = ["grid grid-cols-1 md:grid-cols-2 gap-4", classes?.ul]
+const ulClass = ['grid grid-cols-1 md:grid-cols-2 gap-4', classes?.ul]
 const liClass = [
-  "bg-page-offset border border-trim rounded-lg p-5 transition-all duration-200 ease-out hover:-translate-y-1 hover:border-primary hover:bg-page-base hover:shadow-md focus-within:-translate-y-1 focus-within:border-primary focus-within:bg-page-base focus-within:shadow-md",
+  'bg-page-offset border border-trim rounded-lg p-5 transition-all duration-200 ease-out hover:-translate-y-1 hover:border-primary hover:bg-page-base hover:shadow-md focus-within:-translate-y-1 focus-within:border-primary focus-within:bg-page-base focus-within:shadow-md',
   classes?.li,
 ]
-const emClass = ["block text-page-inverse font-semibold not-italic mb-2", classes?.em]
+const emClass = ['block text-page-inverse font-semibold not-italic mb-2', classes?.em]
 ---
 
 <ul class:list={ulClass}>
   {
-    items.map((item) => (
+    items.map(item => (
       <li class:list={liClass}>
         <div class="flex">
           {item.icon && (
             <Icon icon={item.icon} color="page-inverse" size={6} classes="mr-4 -mb-2" />
           )}
-          {item.lead && <em class:list={emClass} set:html={item.lead}></em>}
+          {item.lead && <em class:list={emClass} set:html={item.lead} />}
         </div>
-        <span class="text-content" set:html={item.text}></span>
+        <span class="text-content" set:html={item.text} />
       </li>
     ))
   }
diff --git a/src/components/List/layouts/ChatBubbles.astro b/src/components/List/layouts/ChatBubbles.astro
index 15cbae1a1..88006249b 100644
--- a/src/components/List/layouts/ChatBubbles.astro
+++ b/src/components/List/layouts/ChatBubbles.astro
@@ -37,19 +37,23 @@ const ddClass = [
 
 <dl class:list={dlClass}>
   {
-    items.map((item) => (
+    items.map(item => (
       <div class:list={itemClass}>
         {item.lead && (
           <dt class:list={dtClass}>
-            <span class="mr-2 font-bold text-secondary" aria-hidden="true">Q:</span>
-            <span set:html={item.lead}></span>
+            <span class="mr-2 font-bold text-secondary" aria-hidden="true">
+              Q:
+            </span>
+            <span set:html={item.lead} />
           </dt>
         )}
         <dd class:list={ddClass}>
-          <span class="mr-2 font-bold text-secondary-inverse" aria-hidden="true">A:</span>
-          <span set:html={item.text}></span>
+          <span class="mr-2 font-bold text-secondary-inverse" aria-hidden="true">
+            A:
+          </span>
+          <span set:html={item.text} />
         </dd>
       </div>
     ))
   }
-</dl>
\ No newline at end of file
+</dl>
diff --git a/src/components/List/layouts/CheckIconsList.astro b/src/components/List/layouts/CheckIconsList.astro
index c8268da55..e3482cc63 100644
--- a/src/components/List/layouts/CheckIconsList.astro
+++ b/src/components/List/layouts/CheckIconsList.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from "@components/Icon/index.astro"
+import Icon from '@components/Icon/index.astro'
 
 export type Props = {
   items: {
@@ -17,30 +17,25 @@ export type Props = {
 
 const { items, classes }: Props = Astro.props
 
-const ulClass = ["space-y-3", classes?.ul]
-const liClass = ["flex items-start gap-3", classes?.li]
-const emClass = ["text-content font-semibold not-italic", classes?.em]
-const textClass = ["text-content-offset", classes?.text]
+const ulClass = ['space-y-3', classes?.ul]
+const liClass = ['flex items-start gap-3', classes?.li]
+const emClass = ['text-content font-semibold not-italic', classes?.em]
+const textClass = ['text-content-offset', classes?.text]
 ---
 
 <ul class:list={ulClass}>
   {
-    items.map((item) => (
+    items.map(item => (
       <li class:list={liClass}>
-        <Icon
-          icon="check-stylized"
-          color={item.color ?? "success"}
-          size={5}
-          classes={"mt-1"}
-        />
+        <Icon icon="check-stylized" color={item.color ?? 'success'} size={5} classes={'mt-1'} />
         <span>
           {item.lead && (
             <>
-              <em class:list={emClass} set:html={item.lead}></em>
+              <em class:list={emClass} set:html={item.lead} />
               <span class="text-content-offset/60 ml-1">—</span>
             </>
           )}
-          <span class:list={textClass} set:html={item.text}></span>
+          <span class:list={textClass} set:html={item.text} />
         </span>
       </li>
     ))
diff --git a/src/components/List/layouts/ChevronList.astro b/src/components/List/layouts/ChevronList.astro
index 0c62918ea..f1148a640 100644
--- a/src/components/List/layouts/ChevronList.astro
+++ b/src/components/List/layouts/ChevronList.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from "@components/Icon/index.astro"
+import Icon from '@components/Icon/index.astro'
 
 export type Props = {
   items: {
@@ -16,28 +16,28 @@ export type Props = {
 
 const { items, classes }: Props = Astro.props
 
-const ulClass = ["space-y-3", classes?.ul]
-const liClass = ["group", classes?.li]
-const emClass = ["text-content font-semibold not-italic", classes?.em]
-const textClass = "block text-content-offset mt-0.5"
+const ulClass = ['space-y-3', classes?.ul]
+const liClass = ['group', classes?.li]
+const emClass = ['text-content font-semibold not-italic', classes?.em]
+const textClass = 'block text-content-offset mt-0.5'
 ---
 
 <ul class:list={ulClass}>
   {
-    items.map((item) => (
+    items.map(item => (
       <li class:list={liClass}>
         <div class="flex items-start gap-3">
           <span class="mt-1.5 shrink-0">
             <Icon
-              icon={"chevron"}
-              color={item.color ?? "text-primary"}
+              icon={'chevron'}
+              color={item.color ?? 'text-primary'}
               size={4}
               classes="transform group-hover:translate-x-1 transition-transform"
             />
           </span>
           <div>
-            {item.lead && <em class:list={emClass} set:html={item.lead}></em>}
-            <span class:list={textClass} set:html={item.text}></span>
+            {item.lead && <em class:list={emClass} set:html={item.lead} />}
+            <span class:list={textClass} set:html={item.text} />
           </div>
         </div>
       </li>
diff --git a/src/components/List/layouts/ColoredMarkerList.astro b/src/components/List/layouts/ColoredMarkerList.astro
index bcea5ede6..838f8a711 100644
--- a/src/components/List/layouts/ColoredMarkerList.astro
+++ b/src/components/List/layouts/ColoredMarkerList.astro
@@ -17,23 +17,23 @@ export type Props = {
 
 const { items, classes, size = 2 }: Props = Astro.props
 
-const ulClass = ["list-none pl-0 text-content mt-4 mb-2 space-y-2", classes?.ul]
-const liClass = ["flex items-start", classes?.li]
-const emClass = ["not-italic font-bold", classes?.em]
+const ulClass = ['list-none pl-0 text-content mt-4 mb-2 space-y-2', classes?.ul]
+const liClass = ['flex items-start', classes?.li]
+const emClass = ['not-italic font-bold', classes?.em]
 const markerSizeInRem = `${size * 0.25}rem`
 const markerStyle = `width: ${markerSizeInRem}; height: ${markerSizeInRem};`
-const iconClass = ["rounded-full mt-2 mr-3 shrink-0", classes?.icon]
+const iconClass = ['rounded-full mt-2 mr-3 shrink-0', classes?.icon]
 const textClass = classes?.text ? [classes.text] : []
 ---
 
 <ul class:list={ulClass}>
   {
-    items.map((item) => (
+    items.map(item => (
       <li class:list={liClass}>
         <span class:list={[iconClass, item.color]} style={markerStyle} />
         <div class="flex min-w-0 flex-col items-start gap-1">
-          {item.lead && <em class:list={emClass} set:html={item.lead}></em>}
-          <span class:list={textClass} set:html={item.text}></span>
+          {item.lead && <em class:list={emClass} set:html={item.lead} />}
+          <span class:list={textClass} set:html={item.text} />
         </div>
       </li>
     ))
diff --git a/src/components/List/layouts/ExperienceList.astro b/src/components/List/layouts/ExperienceList.astro
index c0264a938..0ef174c3d 100644
--- a/src/components/List/layouts/ExperienceList.astro
+++ b/src/components/List/layouts/ExperienceList.astro
@@ -1,4 +1,3 @@
-
 ---
 import Icon from '@components/Icon/index.astro'
 
@@ -19,22 +18,25 @@ export type Props = {
 
 const { items, classes }: Props = Astro.props
 
-const ulClass = ['ml-3 mr-1 space-y-2 text-sm text-content-offset', classes?.ul]
-const liClass = ['flex items-start gap-3', classes?.li]
-const emClass = ['not-italic font-semibold text-content', classes?.em]
-const iconClass = ['mt-0.5 shrink-0', classes?.icon]
+const ulClass = ['ml-3 mr-8 space-y-2 text-md text-content-offset', classes?.ul]
+const liClass = ['flex items-start gap-1', classes?.li]
+const emClass = ['not-italic font-medium text-primary-offset', classes?.em]
+const iconClass = ['mt-1.75 shrink-0', classes?.icon]
 ---
 
 <ul class:list={ulClass}>
   {
-    items.map((item) => (
+    items.map(item => (
       <li class:list={liClass}>
         <span class:list={iconClass} aria-hidden="true">
-          <Icon icon="chevron" color={item.color ?? 'text-primary-offset'} size={3} />
+          <Icon icon="chevron" color={item.color ?? 'text-primary-offset'} size={4} />
         </span>
-        <div class="min-w-0">
-          {item.lead && <em class:list={emClass} set:html={item.lead}></em>}
-          <span class:list={['block leading-relaxed', item.lead ? 'mt-0.5' : '', classes?.text]} set:html={item.text}></span>
+        <div class="min-w-0 leading-relaxed">
+          {item.lead && <em class:list={emClass} set:html={item.lead} />}
+          <span
+            class:list={[classes?.text]}
+            set:html={item.text}
+          />
         </div>
       </li>
     ))
diff --git a/src/components/List/layouts/NumberedWithBackgroundList.astro b/src/components/List/layouts/NumberedWithBackgroundList.astro
index 62dc9d228..b40274c5f 100644
--- a/src/components/List/layouts/NumberedWithBackgroundList.astro
+++ b/src/components/List/layouts/NumberedWithBackgroundList.astro
@@ -14,14 +14,16 @@ export type Props = {
 }
 
 const { items, classes, color, startNumber = 1 }: Props = Astro.props
-const resolvedColor = typeof color === 'string' && color.trim().length > 0 ? color.trim() : undefined
-const safeColorToken = resolvedColor && /^[-a-z0-9]+$/i.test(resolvedColor) ? resolvedColor : undefined
+const resolvedColor =
+  typeof color === 'string' && color.trim().length > 0 ? color.trim() : undefined
+const safeColorToken =
+  resolvedColor && /^[-a-z0-9]+$/i.test(resolvedColor) ? resolvedColor : undefined
 const pillStyle = safeColorToken ? `background-color: var(--color-${safeColorToken});` : undefined
 const leadStyle = safeColorToken ? `color: var(--color-${safeColorToken});` : undefined
 
-const olClass = ["space-y-3", classes?.ol]
-const liClass = ["flex items-start gap-4 bg-page-offset/50 rounded-lg p-4", classes?.li]
-const emClass = ["font-semibold not-italic", !safeColorToken && 'text-primary-offset', classes?.em]
+const olClass = ['space-y-3', classes?.ol]
+const liClass = ['flex items-start gap-4 bg-page-offset/50 rounded-lg p-4', classes?.li]
+const emClass = ['font-semibold not-italic', !safeColorToken && 'text-primary-offset', classes?.em]
 ---
 
 <ol class:list={olClass}>
@@ -30,7 +32,7 @@ const emClass = ["font-semibold not-italic", !safeColorToken && 'text-primary-of
       <li class:list={liClass}>
         <span
           class:list={[
-            "mt-2 shrink-0 w-8 h-8 text-content-inverse rounded-full flex items-center justify-center text-sm font-bold",
+            'mt-2 shrink-0 w-8 h-8 text-content-inverse rounded-full flex items-center justify-center text-sm font-bold',
             !safeColorToken && 'bg-primary-offset',
           ]}
           style={pillStyle}
@@ -38,8 +40,8 @@ const emClass = ["font-semibold not-italic", !safeColorToken && 'text-primary-of
           {startNumber + index}
         </span>
         <div class="pt-1">
-          {item.lead && <em class:list={emClass} style={leadStyle} set:html={item.lead}></em>}
-          <div set:html={item.text}></div>
+          {item.lead && <em class:list={emClass} style={leadStyle} set:html={item.lead} />}
+          <div set:html={item.text} />
         </div>
       </li>
     ))
diff --git a/src/components/List/layouts/PlainIconList.astro b/src/components/List/layouts/PlainIconList.astro
index c63456dcb..122748f60 100644
--- a/src/components/List/layouts/PlainIconList.astro
+++ b/src/components/List/layouts/PlainIconList.astro
@@ -18,8 +18,8 @@ export type Props = {
 type PlainIconListItem = Props['items'][number]
 
 const props: Props = Astro.props
-const ulClass = ["list-none pl-0 space-y-3 mb-0 mt-2", props.classes?.ul]
-const liClass = ["flex items-start gap-3", props.classes?.li]
+const ulClass = ['list-none pl-0 space-y-3 mb-0 mt-2', props.classes?.ul]
+const liClass = ['flex items-start gap-3', props.classes?.li]
 const markerClasses = props.classes?.svg
 ---
 
@@ -29,10 +29,15 @@ const markerClasses = props.classes?.svg
       const resolvedColor = color?.trim() ? color : 'currentColor'
 
       return (
-      <li class:list={liClass}>
-        <Icon icon={icon} color={resolvedColor} size={props.size ?? 5} {...(markerClasses ? { classes: markerClasses } : {})} />
-        <span set:html={text}></span>
-      </li>
+        <li class:list={liClass}>
+          <Icon
+            icon={icon}
+            color={resolvedColor}
+            size={props.size ?? 5}
+            {...(markerClasses ? { classes: markerClasses } : {})}
+          />
+          <span set:html={text} />
+        </li>
       )
     })
   }
diff --git a/src/components/List/layouts/ThreeColumnIconList.astro b/src/components/List/layouts/ThreeColumnIconList.astro
index a7543d4ee..a07c9f50f 100644
--- a/src/components/List/layouts/ThreeColumnIconList.astro
+++ b/src/components/List/layouts/ThreeColumnIconList.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from "@components/Icon/index.astro"
+import Icon from '@components/Icon/index.astro'
 
 export type Props = {
   items: {
@@ -24,31 +24,42 @@ export type Props = {
 
 const { items, classes, size }: Props = Astro.props
 
-const ulClass = ["grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", classes?.ul].filter(Boolean).join(" ")
-const liClass = ["flex items-start gap-2 bg-white rounded-xl p-6 shadow-md transition-all duration-200 ease-out hover:-translate-y-1 hover:shadow-lg", classes?.li].filter(Boolean).join(" ")
-const iconWrapper = ["shrink-0 rounded-lg flex items-center justify-center mt-1 p-2", classes?.icon].filter(Boolean).join(" ")
-const contentWrapper = ["text-page-inverse mb-1 ml-2", classes?.content].filter(Boolean).join(" ")
-const headerClass = ["font-sans text-lg font-semibold text-gray-900 mt-0 mb-2", classes?.header].filter(Boolean).join(" ")
-const textClass = ["text-sm text-note-offset", classes?.text].filter(Boolean).join(" ")
+const ulClass = ['grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6', classes?.ul]
+  .filter(Boolean)
+  .join(' ')
+const liClass = [
+  'flex items-start gap-2 bg-white rounded-xl p-6 shadow-md transition-all duration-200 ease-out hover:-translate-y-1 hover:shadow-lg',
+  classes?.li,
+]
+  .filter(Boolean)
+  .join(' ')
+const iconWrapper = ['shrink-0 rounded-lg flex items-center justify-center mt-1 p-2', classes?.icon]
+  .filter(Boolean)
+  .join(' ')
+const contentWrapper = ['text-page-inverse mb-1 ml-2', classes?.content].filter(Boolean).join(' ')
+const headerClass = ['font-sans text-lg font-semibold text-gray-900 mt-0 mb-2', classes?.header]
+  .filter(Boolean)
+  .join(' ')
+const textClass = ['text-sm text-note-offset', classes?.text].filter(Boolean).join(' ')
 ---
 
 <ul class={ulClass}>
   {
-    items.map((item) => {
-      const icon = item.icon ?? "check"
+    items.map(item => {
+      const icon = item.icon ?? 'check'
 
       return (
         <li class={liClass}>
-          <div class:list={[iconWrapper, item.bgColor ? `bg-${item.bgColor}` : ""].filter(Boolean).join(" ")}>
-            <Icon
-              icon={icon}
-              color={item.color}
-              size={size ?? 6}
-            />
+          <div
+            class:list={[iconWrapper, item.bgColor ? `bg-${item.bgColor}` : '']
+              .filter(Boolean)
+              .join(' ')}
+          >
+            <Icon icon={icon} color={item.color} size={size ?? 6} />
           </div>
           <div class={contentWrapper}>
-            {item.title && <h3 class={headerClass} set:html={item.title}></h3>}
-            <p class={textClass} set:html={item.text}></p>
+            {item.title && <h3 class={headerClass} set:html={item.title} />}
+            <p class={textClass} set:html={item.text} />
           </div>
         </li>
       )
diff --git a/src/components/List/layouts/TimelineList.astro b/src/components/List/layouts/TimelineList.astro
index be9de5e76..a044e0807 100644
--- a/src/components/List/layouts/TimelineList.astro
+++ b/src/components/List/layouts/TimelineList.astro
@@ -21,25 +21,30 @@ const timelineItems = items.map((item: TimelineItem, index: number) => ({
   showConnector: index < items.length - 1,
 }))
 
-const ulClass = ["space-y-0", classes?.ul]
-const liClass = ["relative grid grid-cols-[1.5rem_1fr] gap-4", classes?.li]
-const emClass = ["block text-content font-bold not-italic mb-1", classes?.em]
-const wrapperClass = "mb-4"
-const iconClass = ["relative h-5 w-5 mt-0.5 rounded-full border-2 border-primary bg-page-base z-10", classes?.icon]
-const connectorClass = ["absolute left-1/2 top-[1.375rem] -bottom-1 -translate-x-1/2 w-0.5 bg-content-offset"]
+const ulClass = ['space-y-0', classes?.ul]
+const liClass = ['relative grid grid-cols-[1.5rem_1fr] gap-4', classes?.li]
+const emClass = ['block text-content font-bold not-italic mb-1', classes?.em]
+const wrapperClass = 'mb-4'
+const iconClass = [
+  'relative h-5 w-5 mt-0.5 rounded-full border-2 border-primary bg-page-base z-10',
+  classes?.icon,
+]
+const connectorClass = [
+  'absolute left-1/2 top-[1.375rem] -bottom-1 -translate-x-1/2 w-0.5 bg-content-offset',
+]
 ---
 
 <ul class:list={ulClass}>
   {
-    timelineItems.map((item) => (
+    timelineItems.map(item => (
       <li class:list={liClass}>
         <div class="relative flex h-full justify-center">
-          {item.showConnector && <span class:list={connectorClass} aria-hidden="true"></span>}
-          <span class:list={iconClass}></span>
+          {item.showConnector && <span class:list={connectorClass} aria-hidden="true" />}
+          <span class:list={iconClass} />
         </div>
-        <div class:list={[wrapperClass, !item.showConnector && "mb-0"]}>
-          {item.lead && <em class:list={emClass} set:html={item.lead}></em>}
-          <span class="text-content-offset" set:html={item.text}></span>
+        <div class:list={[wrapperClass, !item.showConnector && 'mb-0']}>
+          {item.lead && <em class:list={emClass} set:html={item.lead} />}
+          <span class="text-content-offset" set:html={item.text} />
         </div>
       </li>
     ))
diff --git a/src/components/List/layouts/TwoColumnCheckIconsList.astro b/src/components/List/layouts/TwoColumnCheckIconsList.astro
index 6984856a4..1984dd73b 100644
--- a/src/components/List/layouts/TwoColumnCheckIconsList.astro
+++ b/src/components/List/layouts/TwoColumnCheckIconsList.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from "@components/Icon/index.astro"
+import Icon from '@components/Icon/index.astro'
 
 export type Props = {
   items: {
@@ -16,21 +16,17 @@ export type Props = {
 
 const { items, classes, size }: Props = Astro.props
 
-const ulClass = ["grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-content mb-1", classes?.ul]
-const liClass = ["flex items-center gap-2", classes?.li]
+const ulClass = ['grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-content mb-1', classes?.ul]
+const liClass = ['flex items-center gap-2', classes?.li]
 ---
 
 <ul class:list={ulClass}>
   {
-    items.map((item) => (
+    items.map(item => (
       <li class:list={liClass}>
-        <Icon
-          icon="check-stylized"
-          color={"success"}
-          size={size ?? 5}
-        />
+        <Icon icon="check-stylized" color={'success'} size={size ?? 5} />
         <span>
-          <span class="text-content" set:html={item.text}></span>
+          <span class="text-content" set:html={item.text} />
         </span>
       </li>
     ))
diff --git a/src/components/List/layouts/TwoColumnIconList.astro b/src/components/List/layouts/TwoColumnIconList.astro
index 34ee6812c..fcdceaf9c 100644
--- a/src/components/List/layouts/TwoColumnIconList.astro
+++ b/src/components/List/layouts/TwoColumnIconList.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from "@components/Icon/index.astro"
+import Icon from '@components/Icon/index.astro'
 
 export type Props = {
   items: {
@@ -23,31 +23,35 @@ export type Props = {
 
 const { items, classes, size }: Props = Astro.props
 
-const ulClass = ["grid grid-cols-1 md:grid-cols-2 gap-6", classes?.ul].filter(Boolean).join(" ")
-const liClass = ["flex items-start gap-2", classes?.li].filter(Boolean).join(" ")
-const iconWrapper = ["shrink-0 rounded-md flex items-center justify-center p-2 mt-1", classes?.icon].filter(Boolean).join(" ")
-const contentWrapper = ["text-page-inverse mb-1 ml-2", classes?.content].filter(Boolean).join(" ")
-const headerClass = ["font-sans text-xl text-content mt-1 mb-1", classes?.header].filter(Boolean).join(" ")
-const textClass = ["text-sm text-note-offset", classes?.text].filter(Boolean).join(" ")
+const ulClass = ['grid grid-cols-1 md:grid-cols-2 gap-6', classes?.ul].filter(Boolean).join(' ')
+const liClass = ['flex items-start gap-2', classes?.li].filter(Boolean).join(' ')
+const iconWrapper = ['shrink-0 rounded-md flex items-center justify-center p-2 mt-1', classes?.icon]
+  .filter(Boolean)
+  .join(' ')
+const contentWrapper = ['text-page-inverse mb-1 ml-2', classes?.content].filter(Boolean).join(' ')
+const headerClass = ['font-sans text-xl text-content mt-1 mb-1', classes?.header]
+  .filter(Boolean)
+  .join(' ')
+const textClass = ['text-sm text-note-offset', classes?.text].filter(Boolean).join(' ')
 ---
 
 <ul class={ulClass}>
   {
-    items.map((item) => {
-      const icon = item.icon ?? "check"
+    items.map(item => {
+      const icon = item.icon ?? 'check'
 
       return (
         <li class={liClass}>
-          <div class:list={[iconWrapper, item.bgColor ? `bg-${item.bgColor}` : ""].filter(Boolean).join(" ")}>
-            <Icon
-              icon={icon}
-              color={item.color}
-              size={size ?? 6}
-            />
+          <div
+            class:list={[iconWrapper, item.bgColor ? `bg-${item.bgColor}` : '']
+              .filter(Boolean)
+              .join(' ')}
+          >
+            <Icon icon={icon} color={item.color} size={size ?? 6} />
           </div>
           <div class={contentWrapper}>
-            {item.title && <h3 class={headerClass} set:html={item.title}></h3>}
-            <p class={textClass} set:html={item.text}></p>
+            {item.title && <h3 class={headerClass} set:html={item.title} />}
+            <p class={textClass} set:html={item.text} />
           </div>
         </li>
       )
diff --git a/src/components/List/layouts/ZebraList.astro b/src/components/List/layouts/ZebraList.astro
index f8ddb0e45..81b131588 100644
--- a/src/components/List/layouts/ZebraList.astro
+++ b/src/components/List/layouts/ZebraList.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from "@components/Icon/index.astro"
+import Icon from '@components/Icon/index.astro'
 
 export type Props = {
   items: {
@@ -19,27 +19,33 @@ export type Props = {
 
 const { items, classes, style }: Props = Astro.props
 
-const ulClass = ["print-zebra-list border border-trim rounded-lg overflow-hidden divide-y divide-trim", classes?.ul]
-const liClass = ["print-zebra-list-item p-4 bg-page-base flex items-center justify-between group hover:bg-page-offset transition-colors", classes?.li]
-const emClass = ["text-page-inverse font-bold not-italic block mb-0.5", classes?.em]
-const textClass = ["text-content"]
+const ulClass = [
+  'print-zebra-list border border-trim rounded-lg overflow-hidden divide-y divide-trim',
+  classes?.ul,
+]
+const liClass = [
+  'print-zebra-list-item p-4 bg-page-base flex items-center justify-between group hover:bg-page-offset transition-colors',
+  classes?.li,
+]
+const emClass = ['text-page-inverse font-bold not-italic block mb-0.5', classes?.em]
+const textClass = ['text-content']
 ---
 
 <ul class:list={ulClass}>
   {
-    items.map((item) => (
+    items.map(item => (
       <li class:list={liClass}>
         <div class="pr-8">
-          {item.lead && <em class:list={emClass} set:html={item.lead}></em>}
-          <span class:list={textClass} set:html={item.text}></span>
+          {item.lead && <em class:list={emClass} set:html={item.lead} />}
+          <span class:list={textClass} set:html={item.text} />
         </div>
         {!style?.hideIcon && (
           <div class="pr-8">
             <Icon
-              icon={"info"}
-              color={"page-inverse"}
+              icon={'info'}
+              color={'page-inverse'}
               size={8}
-              classes={`group-hover:${item.color ?? "text-primary"} transition-colors`}
+              classes={`group-hover:${item.color ?? 'text-primary'} transition-colors`}
             />
           </div>
         )}
diff --git a/src/components/List/server/selectors.ts b/src/components/List/server/selectors.ts
index e0935de95..54d3ba71d 100644
--- a/src/components/List/server/selectors.ts
+++ b/src/components/List/server/selectors.ts
@@ -2,4 +2,4 @@ import type { HTMLElement as NHPElement } from 'node-html-parser'
 
 export const queryListItemElements = (context: NHPElement): NHPElement[] => {
   return context.querySelectorAll('wsb-list-item')
-}
\ No newline at end of file
+}
diff --git a/src/components/List/server/slotItems.ts b/src/components/List/server/slotItems.ts
index fe3d4d856..e9283f3ae 100644
--- a/src/components/List/server/slotItems.ts
+++ b/src/components/List/server/slotItems.ts
@@ -46,7 +46,7 @@ export function getListItemsFromSlotMarkup(markup: string, variant: string): Lis
     )
   }
 
-  return listItemElements.map((element) => {
+  return listItemElements.map(element => {
     const lead = element.getAttribute('data-lead')
 
     return {
@@ -54,4 +54,4 @@ export function getListItemsFromSlotMarkup(markup: string, variant: string): Lis
       text: element.innerHTML.trim(),
     }
   })
-}
\ No newline at end of file
+}
diff --git a/src/components/Map/client/index.ts b/src/components/Map/client/index.ts
index 95152df9d..edd9d8095 100644
--- a/src/components/Map/client/index.ts
+++ b/src/components/Map/client/index.ts
@@ -1,7 +1,11 @@
 import { APILoader } from '@googlemaps/extended-component-library/api_loader.js'
 import { addScriptBreadcrumb } from '@components/scripts/errors'
 import { handleScriptError } from '@components/scripts/errors/handler'
-import { getGoogleMapId, getGoogleMapsApiKey, isE2eTest } from '@components/scripts/utils/environmentClient'
+import {
+  getGoogleMapId,
+  getGoogleMapsApiKey,
+  isE2eTest,
+} from '@components/scripts/utils/environmentClient'
 import {
   getCompanyMapAddress,
   queryCompanyMapElement,
@@ -20,9 +24,7 @@ async function geocodeAddress(address: string): Promise<{ lat: number; lng: numb
   const Geocoder = (
     geocodingLibrary as unknown as {
       Geocoder: new () => {
-        geocode: (_request: {
-          address: string
-        }) => Promise<{
+        geocode: (_request: { address: string }) => Promise<{
           results?: Array<{ geometry?: { location?: { lat: () => number; lng: () => number } } }>
         }>
       }
diff --git a/src/components/Navigation/index.astro b/src/components/Navigation/index.astro
index 5110b1683..0e9b15f8d 100644
--- a/src/components/Navigation/index.astro
+++ b/src/components/Navigation/index.astro
@@ -13,10 +13,7 @@ const { path } = Astro.props
 <site-navigation class="contents print:hidden!" data-testid="site-navigation">
   <div id="mobile-nav-focus-container" class="contents">
     {/* Main Navigation Menu */}
-    <span
-      id="header__main-nav"
-      class="header-nav flex-1 min-w-0 lg:z-(--z-nav) lg:mx-8"
-    >
+    <span id="header__main-nav" class="header-nav flex-1 min-w-0 lg:z-(--z-nav) lg:mx-8">
       <Menu path={path} />
     </span>
     {/* Mobile navigation toggle button to show menu on full-page splash screen */}
diff --git a/src/components/Pages/About/index.astro b/src/components/Pages/About/index.astro
index 2fc49787e..39813cb88 100644
--- a/src/components/Pages/About/index.astro
+++ b/src/components/Pages/About/index.astro
@@ -63,12 +63,11 @@ const resumeLink = `${getSiteUrl()}/resume`
 ---
 
 <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pb-12 space-y-12 md:space-y-24">
-
   {/* ── Journey ── */}
   <section class="space-y-10" aria-labelledby="about-journey-title">
     <h2 class="text-page-inverse text-center" id="about-journey-title">
       {content.journey.header}
-      <HeadingAnchor href={"#about-journey-title"} />
+      <HeadingAnchor href={'#about-journey-title'} />
     </h2>
 
     <div class="relative max-w-3xl mx-auto">
@@ -76,36 +75,39 @@ const resumeLink = `${getSiteUrl()}/resume`
       <div
         class="absolute left-5 md:left-6 top-4 bottom-0 w-px bg-trim-offset/50"
         aria-hidden="true"
-      />
+      >
+      </div>
 
       <div class="space-y-10">
-        {content.journey.itemlist.map((item, index) => (
-          <div class="relative flex items-start gap-5 md:gap-6">
-            {/* Timeline node */}
-            <div class="relative z-(--z-raised) shrink-0 flex items-center justify-center w-10 h-10 md:w-12 md:h-12 rounded-full bg-page-inverse text-content shadow-md mt-4">
-              <Icon icon={item.icon} color="content-inverse" size={5} />
-            </div>
+        {
+          content.journey.itemlist.map((item, index) => (
+            <div class="relative flex items-start gap-5 md:gap-6">
+              {/* Timeline node */}
+              <div class="relative z-(--z-raised) shrink-0 flex items-center justify-center w-10 h-10 md:w-12 md:h-12 rounded-full bg-page-inverse text-content shadow-md mt-4">
+                <Icon icon={item.icon} color="content-inverse" size={5} />
+              </div>
 
-            {/* Card */}
-            <div class="flex-1 rounded-lg border border-trim-offset/40 bg-page-offset/40 p-5 md:p-6 shadow-sm">
-              <h3 class="text-page-inverse mb-2">{item.title}</h3>
-              <p class="text-content leading-relaxed">{item.description}</p>
-              {index === 0 && (
-                <div class="mt-3 flex justify-end print:hidden!">
-                  <Button
-                    text="View C.V."
-                    variant="page-inverse"
-                    size="small"
-                    href={resumeLink}
-                    icon="arrow-right"
-                    iconPosition="right"
-                    iconSize={4}
-                  />
-                </div>
-              )}
+              {/* Card */}
+              <div class="flex-1 rounded-lg border border-trim-offset/40 bg-page-offset/40 p-5 md:p-6 shadow-sm">
+                <h3 class="text-page-inverse mb-2">{item.title}</h3>
+                <p class="text-content leading-relaxed">{item.description}</p>
+                {index === 0 && (
+                  <div class="mt-3 flex justify-end print:hidden!">
+                    <Button
+                      text="View C.V."
+                      variant="page-inverse"
+                      size="small"
+                      href={resumeLink}
+                      icon="arrow-right"
+                      iconPosition="right"
+                      iconSize={4}
+                    />
+                  </div>
+                )}
+              </div>
             </div>
-          </div>
-        ))}
+          ))
+        }
       </div>
     </div>
   </section>
@@ -114,31 +116,27 @@ const resumeLink = `${getSiteUrl()}/resume`
   <section class="space-y-10" aria-labelledby="about-expertise-title">
     <h2 class="text-page-inverse text-center" id="about-expertise-title">
       {content.expertise.header}
-      <HeadingAnchor href={"#about-expertise-title"} />
+      <HeadingAnchor href={'#about-expertise-title'} />
     </h2>
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-      {content.expertise.itemlist.map((item, index) => (
-        <div
-          class="group relative rounded-lg border border-trim-offset/40 bg-page-offset/30 p-6 transition-all duration-300 hover:border-secondary/40 hover:shadow-lg"
-        >
-          {/* Accent top border on hover */}
-          <div
-            class="absolute inset-x-0 top-0 h-0.5 rounded-t-lg bg-(--color-secondary) opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-            aria-hidden="true"
-          />
-          <div class="flex">
-            <div class="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-page-inverse">
-              <Icon icon={expertiseIcons[index] ?? 'gear'} color="content-inverse" size={5} />
+      {
+        content.expertise.itemlist.map((item, index) => (
+          <div class="group relative rounded-lg border border-trim-offset/40 bg-page-offset/30 p-6 transition-all duration-300 hover:border-secondary/40 hover:shadow-lg">
+            {/* Accent top border on hover */}
+            <div
+              class="absolute inset-x-0 top-0 h-0.5 rounded-t-lg bg-(--color-secondary) opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+              aria-hidden="true"
+            />
+            <div class="flex">
+              <div class="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-page-inverse">
+                <Icon icon={expertiseIcons[index] ?? 'gear'} color="content-inverse" size={5} />
+              </div>
+              <h3 class="text-lg font-semibold text-page-inverse ml-5 mt-1 mb-3">{item.title}</h3>
             </div>
-            <h3 class="text-lg font-semibold text-page-inverse ml-5 mt-1 mb-3">
-              {item.title}
-            </h3>
+            <p class="text-content leading-relaxed text-md">{item.description}</p>
           </div>
-          <p class="text-content leading-relaxed text-md">
-            {item.description}
-          </p>
-        </div>
-      ))}
+        ))
+      }
     </div>
   </section>
 
@@ -146,34 +144,40 @@ const resumeLink = `${getSiteUrl()}/resume`
   <section class="space-y-10" aria-labelledby="about-proficiency-title">
     <h2 class="text-page-inverse text-center" id="about-proficiency-title">
       {content.proficiencies.header}
-      <HeadingAnchor href={"#about-proficiency-title"} />
+      <HeadingAnchor href={'#about-proficiency-title'} />
     </h2>
     <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
-      {content.proficiencies.cards.map((card) => (
-        <div class:list={[
-          "rounded-lg p-6 border border-trim-offset/40",
-          card.backgroundColor || "bg-page-offset/30",
-        ]}>
-          <h3 class:list={[
-            "text-lg font-semibold mb-5 text-center",
-            card.headerColor || "text-page-inverse",
-          ]}>
-            {card.subheader}
-          </h3>
-          <ul class="space-y-2">
-            {card.itemlist.map((item) => (
-              <li>
-                <a
-                  href={item.link}
-                  class="relative flex items-center justify-center py-2.5 px-4 rounded-lg font-medium text-content-active no-underline transition-all duration-200 hover:bg-secondary/10 hover:text-(--color-secondary) focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent after:opacity-0 after:transition-opacity after:duration-150 after:ease-out focus-visible:after:opacity-100 focus-visible:after:-inset-1 focus-visible:after:border-spotlight"
-                >
-                  {item.title}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </div>
-      ))}
+      {
+        content.proficiencies.cards.map(card => (
+          <div
+            class:list={[
+              'rounded-lg p-6 border border-trim-offset/40',
+              card.backgroundColor || 'bg-page-offset/30',
+            ]}
+          >
+            <h3
+              class:list={[
+                'text-lg font-semibold mb-5 text-center',
+                card.headerColor || 'text-page-inverse',
+              ]}
+            >
+              {card.subheader}
+            </h3>
+            <ul class="space-y-2">
+              {card.itemlist.map(item => (
+                <li>
+                  <a
+                    href={item.link}
+                    class="relative flex items-center justify-center py-2.5 px-4 rounded-lg font-medium text-content-active no-underline transition-all duration-200 hover:bg-secondary/10 hover:text-(--color-secondary) focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent after:opacity-0 after:transition-opacity after:duration-150 after:ease-out focus-visible:after:opacity-100 focus-visible:after:-inset-1 focus-visible:after:border-spotlight"
+                  >
+                    {item.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))
+      }
     </div>
   </section>
 
@@ -181,7 +185,7 @@ const resumeLink = `${getSiteUrl()}/resume`
   <section class="space-y-10" aria-labelledby="about-philosophy-title">
     <h2 class="text-page-inverse text-center" id="about-philosophy-title">
       {content.proficiencies.philosophy.subheader}
-      <HeadingAnchor href={"#about-philosophy-title"} />
+      <HeadingAnchor href={'#about-philosophy-title'} />
     </h2>
     <blockquote
       class="text-md md:text-lg italic text-center max-w-4xl mx-auto p-8 rounded-lg border-l-4 border-(--color-secondary) bg-page-offset/40 text-content leading-relaxed"
@@ -189,23 +193,17 @@ const resumeLink = `${getSiteUrl()}/resume`
       {content.proficiencies.philosophy.description}
     </blockquote>
     <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
-      {content.proficiencies.philosophy.itemlist.map((item) => (
-        <div class="text-center space-y-4 rounded-lg border border-trim-offset/40 bg-page-offset/30 p-6 transition-all duration-300 hover:shadow-lg">
-          <div class="flex items-center justify-center mx-auto mb-4 h-12 w-12 rounded-full bg-page-inverse">
-            <Icon
-              icon={item.icon}
-              color="content-inverse"
-              size={6}
-            />
+      {
+        content.proficiencies.philosophy.itemlist.map(item => (
+          <div class="text-center space-y-4 rounded-lg border border-trim-offset/40 bg-page-offset/30 p-6 transition-all duration-300 hover:shadow-lg">
+            <div class="flex items-center justify-center mx-auto mb-4 h-12 w-12 rounded-full bg-page-inverse">
+              <Icon icon={item.icon} color="content-inverse" size={6} />
+            </div>
+            <h3 class="text-lg font-semibold text-page-inverse">{item.name}</h3>
+            <p class="text-md text-content leading-relaxed">{item.text}</p>
           </div>
-          <h3 class="text-lg font-semibold text-page-inverse">
-            {item.name}
-          </h3>
-          <p class="text-md text-content leading-relaxed">
-            {item.text}
-          </p>
-        </div>
-      ))}
+        ))
+      }
     </div>
   </section>
 
diff --git a/src/components/Pages/Consent/client/__tests__/index.spec.ts b/src/components/Pages/Consent/client/__tests__/index.spec.ts
index 9a9984592..2137384e3 100644
--- a/src/components/Pages/Consent/client/__tests__/index.spec.ts
+++ b/src/components/Pages/Consent/client/__tests__/index.spec.ts
@@ -16,7 +16,7 @@ const CONSENT_PREFERENCES_READY_EVENT = 'consent-preferences:ready'
 const SAVE_DELAY_SETTLE_MS = 450
 
 const waitForSaveDelay = async () => {
-  await new Promise<void>((resolve) => {
+  await new Promise<void>(resolve => {
     setTimeout(resolve, SAVE_DELAY_SETTLE_MS)
   })
 }
@@ -385,7 +385,9 @@ describe('ConsentPreferencesElement', () => {
       contactLink.href = '/contact/'
       contactLink.textContent = 'Contact'
       window.document.body.append(contactLink)
-      const discardBtn = window.document.getElementById('consent-unsaved-discard') as HTMLButtonElement | null
+      const discardBtn = window.document.getElementById(
+        'consent-unsaved-discard'
+      ) as HTMLButtonElement | null
       const dialog = window.document.getElementById('consent-unsaved-dialog') as HTMLElement | null
 
       expect(functionalCheckbox).not.toBeNull()
diff --git a/src/components/Pages/Consent/client/index.ts b/src/components/Pages/Consent/client/index.ts
index 0a433503a..db72840f4 100644
--- a/src/components/Pages/Consent/client/index.ts
+++ b/src/components/Pages/Consent/client/index.ts
@@ -39,7 +39,10 @@ export class ConsentPreferencesElement extends LitElement {
     'hover:bg-secondary',
   ]
 
-  private static readonly saveButtonEnabledClasses = ['bg-page-inverse', 'hover:bg-secondary-offset']
+  private static readonly saveButtonEnabledClasses = [
+    'bg-page-inverse',
+    'hover:bg-secondary-offset',
+  ]
 
   private static readonly saveButtonSavingClasses = [
     'bg-secondary-offset',
@@ -246,7 +249,12 @@ export class ConsentPreferencesElement extends LitElement {
   private bindUnsavedDialogListeners(): void {
     this.removeUnsavedDialogListeners()
 
-    if (!this.unsavedDialog || !this.unsavedSaveBtn || !this.unsavedDiscardBtn || !this.unsavedStayBtn) {
+    if (
+      !this.unsavedDialog ||
+      !this.unsavedSaveBtn ||
+      !this.unsavedDiscardBtn ||
+      !this.unsavedStayBtn
+    ) {
       return
     }
 
@@ -518,7 +526,7 @@ export class ConsentPreferencesElement extends LitElement {
     this.updateSaveButtonState()
 
     try {
-      await new Promise<void>((resolve) => {
+      await new Promise<void>(resolve => {
         window.setTimeout(resolve, SAVE_PREFERENCES_DELAY_MS)
       })
 
diff --git a/src/components/Pages/Consent/index.astro b/src/components/Pages/Consent/index.astro
index 8ce45795f..3be867e52 100644
--- a/src/components/Pages/Consent/index.astro
+++ b/src/components/Pages/Consent/index.astro
@@ -42,7 +42,7 @@ export type Props = {
       save: string
       acceptAll: string
       rejectAll: string
-    },
+    }
     cookies: {
       heading: string
       description: string
@@ -126,7 +126,9 @@ const { content } = Astro.props
           <div class="bg-page-offset rounded-xl p-6">
             <div class="flex items-center justify-between mb-1">
               <div>
-                <h3 class="text-xl font-semibold text-primary-offset">{content.essential.heading}</h3>
+                <h3 class="text-xl font-semibold text-primary-offset">
+                  {content.essential.heading}
+                </h3>
               </div>
               <div class="flex items-center">
                 <span
@@ -238,7 +240,10 @@ const { content } = Astro.props
             </p>
             <p class="text-content text-md leading-relaxed">{content.functional.description}</p>
             <div class="bg-content-inverse-active rounded-lg p-4 mt-4 -mx-1">
-              <p class="text-sm text-secondary leading-relaxed" set:html={content.functional.trailer}></p>
+              <p
+                class="text-sm text-secondary leading-relaxed"
+                set:html={content.functional.trailer}
+              />
             </div>
           </div>
 
@@ -328,7 +333,7 @@ const { content } = Astro.props
         class="text-2xl md:text-3xl font-bold text-primary-offset mb-2"
       >
         {content.cookies.heading}
-        <HeadingAnchor href={"#consent-what-are-cookies-title"} />
+        <HeadingAnchor href={'#consent-what-are-cookies-title'} />
       </h2>
       <div class="py-1">
         <p class="text-content mb-4 mt-0">
@@ -339,10 +344,10 @@ const { content } = Astro.props
           items={content.cookies.types}
           size={6}
           classes={{
-            ul: "mt-6 mb-0 pl-0",
-            icon: "w-12 h-12 bg-blue-100 mr-2",
-            li: "border-2 border-page-offset p-4 rounded-xl",
-            text: "mb-0",
+            ul: 'mt-6 mb-0 pl-0',
+            icon: 'w-12 h-12 bg-blue-100 mr-2',
+            li: 'border-2 border-page-offset p-4 rounded-xl',
+            text: 'mb-0',
           }}
         />
       </div>
@@ -354,7 +359,7 @@ const { content } = Astro.props
         class="text-2xl md:text-3xl font-bold text-primary-offset mb-4"
       >
         {content.management.heading}
-        <HeadingAnchor href={"#consent-managing-cookies-title"} />
+        <HeadingAnchor href={'#consent-managing-cookies-title'} />
       </h2>
       <p class="text-content mb-6 mt-0">
         {content.management.subheading}
@@ -364,11 +369,11 @@ const { content } = Astro.props
         items={content.management.types}
         size={6}
         classes={{
-          ul: "mt-6 mb-0 pl-0",
-          icon: "w-12 h-12 bg-blue-100 mr-2",
-          li: "border-2 border-page-offset p-4 rounded-xl",
-          header: "mb-1 mt-0",
-          text: "mb-0",
+          ul: 'mt-6 mb-0 pl-0',
+          icon: 'w-12 h-12 bg-blue-100 mr-2',
+          li: 'border-2 border-page-offset p-4 rounded-xl',
+          header: 'mb-1 mt-0',
+          text: 'mb-0',
         }}
       />
     </section>
@@ -379,35 +384,31 @@ const { content } = Astro.props
         class="text-2xl md:text-3xl font-bold text-primary-offset mb-4"
       >
         {content.questions.heading}
-        <HeadingAnchor href={"#consent-contact-title"} />
+        <HeadingAnchor href={'#consent-contact-title'} />
       </h2>
       <div class="bg-gray-50 rounded-xl p-6">
         <p class="text-gray-900 mb-4 mt-0">{content.questions.subheading}</p>
         <div class="flex items-start ml-4">
-          {content.questions.methods.map((item) => {
-            return (
-              <div class="flex items-start gap-4">
-                <div
-                  class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center shrink-0 mt-1"
-                >
-                  <Icon
-                    icon={item.icon}
-                    color="blue-600"
-                    size={6}
-                  />
-                </div>
-                <div class="ml-2">
-                  <h3 class="text-lg font-semibold text-gray-900 mb-1 mt-0">{item.lead}</h3>
-                  <a
-                    href={item.link}
-                    class="text-blue-900 underline decoration-blue-900 decoration-dotted underline-offset-4 hover:text-blue-600 hover:decoration-blue-600 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2"
-                  >
-                    {item.text}
-                  </a>
+          {
+            content.questions.methods.map(item => {
+              return (
+                <div class="flex items-start gap-4">
+                  <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center shrink-0 mt-1">
+                    <Icon icon={item.icon} color="blue-600" size={6} />
+                  </div>
+                  <div class="ml-2">
+                    <h3 class="text-lg font-semibold text-gray-900 mb-1 mt-0">{item.lead}</h3>
+                    <a
+                      href={item.link}
+                      class="text-blue-900 underline decoration-blue-900 decoration-dotted underline-offset-4 hover:text-blue-600 hover:decoration-blue-600 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2"
+                    >
+                      {item.text}
+                    </a>
+                  </div>
                 </div>
-              </div>
-            )
-          })}
+              )
+            })
+          }
         </div>
       </div>
     </section>
diff --git a/src/components/Pages/Consent/unsaved.astro b/src/components/Pages/Consent/unsaved.astro
index 5f0b87b09..a53d7a70e 100644
--- a/src/components/Pages/Consent/unsaved.astro
+++ b/src/components/Pages/Consent/unsaved.astro
@@ -3,38 +3,25 @@ import Button from '@components/Button/index.astro'
 ---
 
 <dialog
-	id="consent-unsaved-dialog"
-	aria-labelledby="consent-unsaved-title"
-	aria-describedby="consent-unsaved-description"
-	class="mx-auto mt-12 bg-content-inverse-active rounded-md p-4"
+  id="consent-unsaved-dialog"
+  aria-labelledby="consent-unsaved-title"
+  aria-describedby="consent-unsaved-description"
+  class="mx-auto mt-12 bg-content-inverse-active rounded-md p-4"
 >
-	<div class="flex items-start justify-between gap-4">
-		<h2 id="consent-unsaved-title" class="text-xl font-bold text-content-active">Unsaved preference changes</h2>
-		<Button
-			id="consent-unsaved-stay"
-			type="button"
-			text="Stay"
-			variant="secondary"
-		/>
-	</div>
+  <div class="flex items-start justify-between gap-4">
+    <h2 id="consent-unsaved-title" class="text-xl font-bold text-content-active">
+      Unsaved preference changes
+    </h2>
+    <Button id="consent-unsaved-stay" type="button" text="Stay" variant="secondary" />
+  </div>
 
-	<p id="consent-unsaved-description" class="text-base text-center mt-4 mb-6">
-		You have unsaved consent changes.<br />Save before leaving this page?
-	</p>
+  <p id="consent-unsaved-description" class="text-base text-center mt-4 mb-6">
+    You have unsaved consent changes.<br />Save before leaving this page?
+  </p>
 
-	<div class="mt-4 flex items-center justify-center gap-3">
-		<Button
-			id="consent-unsaved-save"
-			type="button"
-			text="Save changes"
-			variant="secondary"
-		/>
+  <div class="mt-4 flex items-center justify-center gap-3">
+    <Button id="consent-unsaved-save" type="button" text="Save changes" variant="secondary" />
 
-		<Button
-			id="consent-unsaved-discard"
-			type="button"
-			text="Discard changes"
-			variant="warning"
-		/>
-	</div>
+    <Button id="consent-unsaved-discard" type="button" text="Discard changes" variant="warning" />
+  </div>
 </dialog>
diff --git a/src/components/Pages/Contact/client/__fixtures__/contactForm.fixture.astro b/src/components/Pages/Contact/client/__fixtures__/contactForm.fixture.astro
index e242e5379..153f2d82a 100644
--- a/src/components/Pages/Contact/client/__fixtures__/contactForm.fixture.astro
+++ b/src/components/Pages/Contact/client/__fixtures__/contactForm.fixture.astro
@@ -3,76 +3,76 @@ import ContactFormComponent from '../../index.astro'
 import type { Props as ContactPageProps } from '../../index.astro'
 
 const content = {
-	header: {
-		title: 'Contact',
-		description: 'Get in touch',
-	},
-	contact: {
-		header: 'Contact Details',
-		details: [
-			{
-				text: 'Email',
-				value: 'test@example.com',
-				icon: 'email',
-			},
-		],
-		expertise: {
-			header: 'Expertise',
-			areas: [{ text: 'Platform Engineering' }],
-		},
-		chooseUs: {
-			header: 'Why Us',
-			areas: [{ text: 'Fast response' }],
-		},
-	},
-	form: {
-		header: 'Send a message',
-		description: 'Tell us about your project',
-		formErrorMssg: 'Please fix form errors.',
-		contact: {
-			header: 'Your Contact Info',
-			company: 'Company',
-			companyPlaceholder: 'Acme Inc',
-			email: 'Email',
-			emailPlaceholder: 'you@example.com',
-			fullName: 'Full Name',
-			fullNamePlaceholder: 'Jane Doe',
-			phone: 'Phone',
-			phonePlaceholder: '+1 555 555 5555',
-		},
-		project: {
-			header: 'Project Details',
-			description: 'Description',
-			descriptionPlaceholder: 'Project details',
-			timeline: 'Timeline',
-			timelineOptions: [
-				{ text: 'Select timeline', value: '' },
-				{ text: 'Within 1 month', value: 'within-1-month' },
-			],
-			timelinePlaceholder: 'Timeline',
-			type: 'Project Type',
-			typeOptions: [
-				{ text: 'Select type', value: '' },
-				{ text: 'Infrastructure', value: 'infrastructure' },
-			],
-			typePlaceholder: 'Project Type',
-		},
-		files: {
-			header: 'Attachments',
-			subheader: 'Optional uploads',
-			supportedFormats: 'PDF, DOCX',
-			maxFileSizeText: 'Max file size:',
-			maxFileSize: '10MB',
-			maxFilesText: 'Max files:',
-			maxFiles: '3',
-		},
-		info: [{ lead: 'Note', text: 'We reply quickly.' }],
-		submitButtonText: 'Send',
-		waitingText: 'Sending...',
-		successText: 'Sent successfully.',
-		errorText: 'Submission failed.',
-		errorEmail: 'Please provide a valid email.',
-	},
+  header: {
+    title: 'Contact',
+    description: 'Get in touch',
+  },
+  contact: {
+    header: 'Contact Details',
+    details: [
+      {
+        text: 'Email',
+        value: 'test@example.com',
+        icon: 'email',
+      },
+    ],
+    expertise: {
+      header: 'Expertise',
+      areas: [{ text: 'Platform Engineering' }],
+    },
+    chooseUs: {
+      header: 'Why Us',
+      areas: [{ text: 'Fast response' }],
+    },
+  },
+  form: {
+    header: 'Send a message',
+    description: 'Tell us about your project',
+    formErrorMssg: 'Please fix form errors.',
+    contact: {
+      header: 'Your Contact Info',
+      company: 'Company',
+      companyPlaceholder: 'Acme Inc',
+      email: 'Email',
+      emailPlaceholder: 'you@example.com',
+      fullName: 'Full Name',
+      fullNamePlaceholder: 'Jane Doe',
+      phone: 'Phone',
+      phonePlaceholder: '+1 555 555 5555',
+    },
+    project: {
+      header: 'Project Details',
+      description: 'Description',
+      descriptionPlaceholder: 'Project details',
+      timeline: 'Timeline',
+      timelineOptions: [
+        { text: 'Select timeline', value: '' },
+        { text: 'Within 1 month', value: 'within-1-month' },
+      ],
+      timelinePlaceholder: 'Timeline',
+      type: 'Project Type',
+      typeOptions: [
+        { text: 'Select type', value: '' },
+        { text: 'Infrastructure', value: 'infrastructure' },
+      ],
+      typePlaceholder: 'Project Type',
+    },
+    files: {
+      header: 'Attachments',
+      subheader: 'Optional uploads',
+      supportedFormats: 'PDF, DOCX',
+      maxFileSizeText: 'Max file size:',
+      maxFileSize: '10MB',
+      maxFilesText: 'Max files:',
+      maxFiles: '3',
+    },
+    info: [{ lead: 'Note', text: 'We reply quickly.' }],
+    submitButtonText: 'Send',
+    waitingText: 'Sending...',
+    successText: 'Sent successfully.',
+    errorText: 'Submission failed.',
+    errorEmail: 'Please provide a valid email.',
+  },
 } satisfies ContactPageProps['content']
 ---
 
diff --git a/src/components/Pages/Contact/client/__tests__/formSubmission.spec.ts b/src/components/Pages/Contact/client/__tests__/formSubmission.spec.ts
index 6404da74b..ee5638404 100644
--- a/src/components/Pages/Contact/client/__tests__/formSubmission.spec.ts
+++ b/src/components/Pages/Contact/client/__tests__/formSubmission.spec.ts
@@ -161,7 +161,9 @@ describe('ContactForm submission', () => {
       expect(context.elements.fields.email.feedback.textContent).toBe(
         'Please enter a valid email address.'
       )
-      expect(context.elements.fields.message.feedback.textContent).toBe('Please describe your project')
+      expect(context.elements.fields.message.feedback.textContent).toBe(
+        'Please describe your project'
+      )
     })
   })
 
@@ -306,7 +308,9 @@ describe('ContactForm submission', () => {
       )
 
       expect(context.elements.fields.email.feedback.classList.contains('hidden')).toBe(false)
-      expect(context.elements.fields.email.feedback.textContent).toBe('Enter a valid email address.')
+      expect(context.elements.fields.email.feedback.textContent).toBe(
+        'Enter a valid email address.'
+      )
       expect(context.elements.fields.email.input.getAttribute('aria-invalid')).toBe('true')
       expect(context.elements.fields.email.input.classList.contains('error')).toBe(true)
     })
diff --git a/src/components/Pages/Contact/client/__tests__/upload.spec.ts b/src/components/Pages/Contact/client/__tests__/upload.spec.ts
index 1f1e10f4f..54119fe2a 100644
--- a/src/components/Pages/Contact/client/__tests__/upload.spec.ts
+++ b/src/components/Pages/Contact/client/__tests__/upload.spec.ts
@@ -56,4 +56,4 @@ describe('Contact upload accessibility', () => {
       observer.disconnect()
     })
   })
-})
\ No newline at end of file
+})
diff --git a/src/components/Pages/Contact/client/formSubmission.ts b/src/components/Pages/Contact/client/formSubmission.ts
index 89d52ce51..c936335ce 100644
--- a/src/components/Pages/Contact/client/formSubmission.ts
+++ b/src/components/Pages/Contact/client/formSubmission.ts
@@ -17,7 +17,13 @@ import { queryContactFormGeneratedFieldError, queryContactFormGenericFields } fr
 
 export type ContactUiState = 'idle' | 'loading' | 'success' | 'error' | 'validation'
 
-export const contactPreviewStates = ['loading', 'success', 'error', 'validation', 'confetti'] as const
+export const contactPreviewStates = [
+  'loading',
+  'success',
+  'error',
+  'validation',
+  'confetti',
+] as const
 
 type ContactPreviewState = (typeof contactPreviewStates)[number]
 type ContactPreviewMode = 'confetti'
diff --git a/src/components/Pages/Contact/client/index.ts b/src/components/Pages/Contact/client/index.ts
index e8f7a7fd9..12808cf6a 100644
--- a/src/components/Pages/Contact/client/index.ts
+++ b/src/components/Pages/Contact/client/index.ts
@@ -8,12 +8,20 @@ import { LitElement } from 'lit'
 import { addScriptBreadcrumb } from '@components/scripts/errors'
 import { handleScriptError } from '@components/scripts/errors/handler'
 import { initStickySidebar } from '@components/scripts/stickySidebar'
-import { getContactFormElements, queryContactProjectTypeSelect, queryContactStickySidebar } from './selectors'
+import {
+  getContactFormElements,
+  queryContactProjectTypeSelect,
+  queryContactStickySidebar,
+} from './selectors'
 import type { ContactFormConfig } from './@types'
 import { initCharacterCounter, initUploadPlaceholder } from './utils'
 import { initLabelHandlers, type LabelController } from './feedback'
 import { initEmailValidationHandler } from './email'
-import { applyContactPreviewState, initFormSubmission, resolveContactPreviewState } from './formSubmission'
+import {
+  applyContactPreviewState,
+  initFormSubmission,
+  resolveContactPreviewState,
+} from './formSubmission'
 import { initGenericValidation, initNameLengthHandler, initMssgLengthHandler } from './validation'
 import { defineCustomElement } from '@components/scripts/utils'
 import { isProd } from '@components/scripts/utils/environmentClient'
@@ -91,7 +99,9 @@ export class ContactFormElement extends LitElement {
       return
     }
 
-    const projectType = window.location.search ? new URLSearchParams(window.location.search).get('type') : null
+    const projectType = window.location.search
+      ? new URLSearchParams(window.location.search).get('type')
+      : null
     if (!projectType) {
       return
     }
@@ -101,7 +111,9 @@ export class ContactFormElement extends LitElement {
       return
     }
 
-    const hasOption = Array.from(projectTypeSelect.options).some(option => option.value === projectType)
+    const hasOption = Array.from(projectTypeSelect.options).some(
+      option => option.value === projectType
+    )
     if (!hasOption) {
       return
     }
diff --git a/src/components/Pages/Contact/client/selectors.ts b/src/components/Pages/Contact/client/selectors.ts
index 3f7771803..8d55477a3 100644
--- a/src/components/Pages/Contact/client/selectors.ts
+++ b/src/components/Pages/Contact/client/selectors.ts
@@ -155,16 +155,18 @@ const isUppyDashboardRoot = (element: Element): element is UppyDashboardRoot =>
 }
 
 export const queryAccessibilityLabelTargets = (root: ParentNode): AccessibilityLabelTarget[] => {
-  return Array.from(root.querySelectorAll('input[type="text"], input[type="email"], textarea')).filter(
-    isAccessibilityLabelTarget
-  )
+  return Array.from(
+    root.querySelectorAll('input[type="text"], input[type="email"], textarea')
+  ).filter(isAccessibilityLabelTarget)
 }
 
 export const queryUppyDashboardRoots = (root: ParentNode): UppyDashboardRoot[] => {
   return Array.from(root.querySelectorAll('.uppy-Dashboard')).filter(isUppyDashboardRoot)
 }
 
-export const queryContactProjectTypeSelect = (root: ParentNode = document): HTMLSelectElement | null => {
+export const queryContactProjectTypeSelect = (
+  root: ParentNode = document
+): HTMLSelectElement | null => {
   const projectTypeSelect = root.querySelector('#project_type')
   return projectTypeSelect instanceof HTMLSelectElement ? projectTypeSelect : null
 }
diff --git a/src/components/Pages/Contact/index.astro b/src/components/Pages/Contact/index.astro
index d54eca742..400a67981 100644
--- a/src/components/Pages/Contact/index.astro
+++ b/src/components/Pages/Contact/index.astro
@@ -49,11 +49,11 @@ export type Props = {
       expertise: {
         header: string
         areas: { text: string }[]
-      },
+      }
       chooseUs: {
-        header: string,
-        areas: { text: string }[],
-      },
+        header: string
+        areas: { text: string }[]
+      }
     }
     form: {
       header: string
@@ -69,7 +69,7 @@ export type Props = {
         fullNamePlaceholder: string
         phone: string
         phonePlaceholder: string
-      },
+      }
       project: {
         header: string
         description: string
@@ -86,7 +86,7 @@ export type Props = {
           value: string
         }[]
         typePlaceholder: string
-      },
+      }
       files: {
         header: string
         subheader: string
@@ -95,7 +95,7 @@ export type Props = {
         maxFileSize: string
         maxFilesText: string
         maxFiles: string
-      },
+      }
       info: {
         lead: string
         text: string
@@ -121,323 +121,321 @@ const { content, prefilledProjectType = '' } = Astro.props
     {/** Contact Form Section */}
     <section class="pt-5 pb-8 bg-page-offset" aria-label="Contact form">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12 items-start" data-sticky-container>
+        <div
+          class="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12 items-start"
+          data-sticky-container
+        >
           {/** Contact Form */}
           <div class="lg:col-span-2 bg-content-inverse p-6 md:p-8 rounded-2xl shadow-lg">
-              {/** Contact FormHeader */}
-              <div class="mb-8">
-                <h2 class="text-page-inverse text-2xl md:text-3xl font-semibold mb-3">
-                  {content.form.header}
-                </h2>
-                <p class="text-content-active text-lg">{content.form.description}</p>
-              </div>
+            {/** Contact FormHeader */}
+            <div class="mb-8">
+              <h2 class="text-page-inverse text-2xl md:text-3xl font-semibold mb-3">
+                {content.form.header}
+              </h2>
+              <p class="text-content-active text-lg">{content.form.description}</p>
+            </div>
 
-              <form
-                class="space-y-8"
-                id="contactForm"
-                method="post"
-                enctype="multipart/form-data"
-                novalidate
+            <form
+              class="space-y-8"
+              id="contactForm"
+              method="post"
+              enctype="multipart/form-data"
+              novalidate
+            >
+              <div
+                id="formErrorBanner"
+                class="hidden rounded-xl border border-danger bg-danger/10 text-danger px-4 py-3"
+                role="alert"
+                aria-live="assertive"
               >
-                <div
-                  id="formErrorBanner"
-                  class="hidden rounded-xl border border-danger bg-danger/10 text-danger px-4 py-3"
-                  role="alert"
-                  aria-live="assertive"
-                >
-                  {content.form.formErrorMssg}
-                </div>
+                {content.form.formErrorMssg}
+              </div>
 
-                {/** Personal Information */}
-                <div class="border-b border-trim">
-                  <h3 class="flex items-center text-page-inverse text-xl font-semibold mb-6">
-                    <div class="w-1 h-5 bg-page-inverse rounded-full mr-3"></div>
-                    {content.form.contact.header}
-                  </h3>
+              {/** Personal Information */}
+              <div class="border-b border-trim">
+                <h3 class="flex items-center text-page-inverse text-xl font-semibold mb-6">
+                  <div class="w-1 h-5 bg-page-inverse rounded-full mr-3"></div>
+                  {content.form.contact.header}
+                </h3>
 
-                  <div class="grid grid-cols-1 md:grid-cols-2 md:gap-6 md:space-y-6">
-                    <div class="space-y-2">
-                      <label
-                        for="name"
-                        class="block text-content-active text-sm font-medium"
-                      >
-                        {content.form.contact.fullName}
-                      </label>
-                      <input
-                        type="text"
-                        id="name"
-                        name="name"
-                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200"
-                        required
-                        placeholder={content.form.contact.fullNamePlaceholder}
-                        minlength="2"
-                        maxlength="100"
-                        aria-invalid="false"
-                        aria-errormessage="name-error"
-                      />
-                      <p
-                        class="hidden text-sm text-danger"
-                        data-field-error="name"
-                        aria-live="polite"
-                        id="name-error"
-                      >
-                      </p>
-                    </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 md:gap-6 md:space-y-6">
+                  <div class="space-y-2">
+                    <label for="name" class="block text-content-active text-sm font-medium">
+                      {content.form.contact.fullName}
+                    </label>
+                    <input
+                      type="text"
+                      id="name"
+                      name="name"
+                      class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200"
+                      required
+                      placeholder={content.form.contact.fullNamePlaceholder}
+                      minlength="2"
+                      maxlength="100"
+                      aria-invalid="false"
+                      aria-errormessage="name-error"
+                    />
+                    <p
+                      class="hidden text-sm text-danger"
+                      data-field-error="name"
+                      aria-live="polite"
+                      id="name-error"
+                    >
+                    </p>
+                  </div>
 
-                    <div class="space-y-2">
-                      <label
-                        for="email"
-                        class="block text-content-active text-sm font-medium"
-                      >
-                        {content.form.contact.email}
-                      </label>
-                      <input
-                        type="email"
-                        id="email"
-                        name="email"
-                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200"
-                        required
-                        placeholder={content.form.contact.emailPlaceholder}
-                        aria-invalid="false"
-                        aria-errormessage="email-error"
-                      />
-                      <p
-                        class="hidden text-sm text-danger"
-                        data-field-error="email"
-                        aria-live="polite"
-                        id="email-error"
-                      >
-                      </p>
-                    </div>
+                  <div class="space-y-2">
+                    <label for="email" class="block text-content-active text-sm font-medium">
+                      {content.form.contact.email}
+                    </label>
+                    <input
+                      type="email"
+                      id="email"
+                      name="email"
+                      class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200"
+                      required
+                      placeholder={content.form.contact.emailPlaceholder}
+                      aria-invalid="false"
+                      aria-errormessage="email-error"
+                    />
+                    <p
+                      class="hidden text-sm text-danger"
+                      data-field-error="email"
+                      aria-live="polite"
+                      id="email-error"
+                    >
+                    </p>
                   </div>
+                </div>
 
-                  <div class="grid grid-cols-1 md:grid-cols-2 md:gap-6 md:space-y-6">
-                    <div class="space-y-2">
-                      <label
-                        for="company"
-                        class="block text-content-active text-sm font-medium"
-                      >
-                        {content.form.contact.company}
-                      </label>
-                      <input
-                        type="text"
-                        id="company"
-                        name="company"
-                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200"
-                        placeholder={content.form.contact.companyPlaceholder}
-                        maxlength="100"
-                      />
-                    </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 md:gap-6 md:space-y-6">
+                  <div class="space-y-2">
+                    <label for="company" class="block text-content-active text-sm font-medium">
+                      {content.form.contact.company}
+                    </label>
+                    <input
+                      type="text"
+                      id="company"
+                      name="company"
+                      class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200"
+                      placeholder={content.form.contact.companyPlaceholder}
+                      maxlength="100"
+                    />
+                  </div>
 
-                    <div class="space-y-2 mt-2 md:mt-0">
-                      <label
-                        for="phone"
-                        class="block text-content-active text-sm font-medium"
-                      >
-                        {content.form.contact.phone}
-                      </label>
-                      <input
-                        type="tel"
-                        id="phone"
-                        name="phone"
-                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200"
-                        placeholder={content.form.contact.phonePlaceholder}
-                      />
-                    </div>
+                  <div class="space-y-2 mt-2 md:mt-0">
+                    <label for="phone" class="block text-content-active text-sm font-medium">
+                      {content.form.contact.phone}
+                    </label>
+                    <input
+                      type="tel"
+                      id="phone"
+                      name="phone"
+                      class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200"
+                      placeholder={content.form.contact.phonePlaceholder}
+                    />
                   </div>
                 </div>
+              </div>
 
-                {/** Project Information */}
-                <div class="pb-2 border-b border-trim">
-                  <h3 class="flex items-center text-page-inverse text-xl font-semibold mb-6">
-                    <div class="w-1 h-5 bg-page-inverse rounded-full mr-3"></div>
-                    {content.form.project.header}
-                  </h3>
+              {/** Project Information */}
+              <div class="pb-2 border-b border-trim">
+                <h3 class="flex items-center text-page-inverse text-xl font-semibold mb-6">
+                  <div class="w-1 h-5 bg-page-inverse rounded-full mr-3"></div>
+                  {content.form.project.header}
+                </h3>
 
-                  <div class="grid grid-cols-1 md:grid-cols-2 md:gap-6">
-                    <div class="space-y-2">
-                      <label
-                        for="project_type"
-                        class="block text-content-active text-sm font-medium"
-                      >
-                        {content.form.project.type}
-                      </label>
-                      <select
-                        id="project_type"
-                        name="project_type"
-                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200 cursor-pointer"
-                      >
-                        {content.form.project.typeOptions.map((item) => (
-                          <option
-                            value={item.value}
-                            selected={item.value === prefilledProjectType}
-                          >
+                <div class="grid grid-cols-1 md:grid-cols-2 md:gap-6">
+                  <div class="space-y-2">
+                    <label for="project_type" class="block text-content-active text-sm font-medium">
+                      {content.form.project.type}
+                    </label>
+                    <select
+                      id="project_type"
+                      name="project_type"
+                      class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200 cursor-pointer"
+                    >
+                      {
+                        content.form.project.typeOptions.map(item => (
+                          <option value={item.value} selected={item.value === prefilledProjectType}>
                             {item.text}
                           </option>
-                        ))}
-                      </select>
-                    </div>
-
-                    <div class="space-y-2 mt-2 sm:mt-0">
-                      <label
-                        for="timeline"
-                        class="block text-content-active text-sm font-medium"
-                      >
-                        {content.form.project.timeline}
-                      </label>
-                      <select
-                        id="timeline"
-                        name="timeline"
-                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200 cursor-pointer"
-                      >
-                        {content.form.project.timelineOptions.map((item) => (
-                          <option value={item.value}>{item.text}</option>
-                        ))}
-                      </select>
-                    </div>
+                        ))
+                      }
+                    </select>
                   </div>
 
-                  <div class="space-y-2 mt-4">
-                    <label
-                      for="message"
-                      class="block text-content-active text-sm font-medium"
-                    >
-                      {content.form.project.description}
+                  <div class="space-y-2 mt-2 sm:mt-0">
+                    <label for="timeline" class="block text-content-active text-sm font-medium">
+                      {content.form.project.timeline}
                     </label>
-                    <textarea
-                      id="message"
-                      name="message"
-                      class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200 resize-vertical min-h-30"
-                      rows="6"
-                      required
-                      placeholder={content.form.project.descriptionPlaceholder}
-                      minlength="10"
-                      maxlength="2000"
-                      aria-invalid="false"
-                      aria-errormessage="message-error"></textarea>
-                    <p
-                      class="hidden text-sm text-danger"
-                      data-field-error="message"
-                      aria-live="polite"
-                      id="message-error"
+                    <select
+                      id="timeline"
+                      name="timeline"
+                      class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200 cursor-pointer"
                     >
-                    </p>
-                    <div class="text-right text-sm text-content-active">
-                      <span id="charCount">0</span>/2000 characters
-                    </div>
+                      {
+                        content.form.project.timelineOptions.map(item => (
+                          <option value={item.value}>{item.text}</option>
+                        ))
+                      }
+                    </select>
                   </div>
                 </div>
 
-                {/** File Upload Section */}
-                <div>
-                  <h3 class="flex items-center text-page-inverse text-xl font-semibold mb-4">
-                    <div class="w-1 h-5 bg-page-inverse rounded-full mr-3"></div>
-                    {content.form.files.header}
-                  </h3>
-                  <p class="text-content-active text-sm mb-6">{content.form.files.subheader}</p>
+                <div class="space-y-2 mt-4">
+                  <label for="message" class="block text-content-active text-sm font-medium">
+                    {content.form.project.description}
+                  </label>
+                  <textarea
+                    id="message"
+                    name="message"
+                    class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200 resize-vertical min-h-30"
+                    rows="6"
+                    required
+                    placeholder={content.form.project.descriptionPlaceholder}
+                    minlength="10"
+                    maxlength="2000"
+                    aria-invalid="false"
+                    aria-errormessage="message-error"></textarea>
+                  <p
+                    class="hidden text-sm text-danger"
+                    data-field-error="message"
+                    aria-live="polite"
+                    id="message-error"
+                  >
+                  </p>
+                  <div class="text-right text-sm text-content-active">
+                    <span id="charCount">0</span>/2000 characters
+                  </div>
+                </div>
+              </div>
 
-                  <div>
-                    <div id="uppyContainer" hidden>
-                      <div id="uppyDashboard"></div>
-                    </div>
-                    <div class="mt-4 space-y-2">
-                      <p class="text-sm text-content-active">
-                        <strong>Supported formats:</strong> {content.form.files.supportedFormats}
-                      </p>
-                      <p class="text-sm text-content-active">
-                        <strong>{content.form.files.maxFileSizeText}</strong> {content.form.files.maxFileSize} • <strong>{content.form.files.maxFilesText}</strong> {content.form.files.maxFiles}
-                      </p>
-                    </div>
+              {/** File Upload Section */}
+              <div>
+                <h3 class="flex items-center text-page-inverse text-xl font-semibold mb-4">
+                  <div class="w-1 h-5 bg-page-inverse rounded-full mr-3"></div>
+                  {content.form.files.header}
+                </h3>
+                <p class="text-content-active text-sm mb-6">{content.form.files.subheader}</p>
+
+                <div>
+                  <div id="uppyContainer" hidden>
+                    <div id="uppyDashboard"></div>
+                  </div>
+                  <div class="mt-4 space-y-2">
+                    <p class="text-sm text-content-active">
+                      <strong>Supported formats:</strong>
+                      {content.form.files.supportedFormats}
+                    </p>
+                    <p class="text-sm text-content-active">
+                      <strong>{content.form.files.maxFileSizeText}</strong>
+                      {content.form.files.maxFileSize} • <strong
+                        >{content.form.files.maxFilesText}</strong
+                      >
+                      {content.form.files.maxFiles}
+                    </p>
                   </div>
                 </div>
+              </div>
 
-                {/** GDPR Consent */}
-                <GDPRConsent
-                  purpose="responding to your inquiry"
-                  formId="contact-form"
-                  id="contact-gdpr-consent"
-                  variant="default"
-                />
+              {/** GDPR Consent */}
+              <GDPRConsent
+                purpose="responding to your inquiry"
+                formId="contact-form"
+                id="contact-gdpr-consent"
+                variant="default"
+              />
 
-                {/** Data Retention Notice */}
-                <div class="text-sm text-content-active space-y-2 bg-page-offset p-4 rounded-lg border border-trim">
-                  {content.form.info.map((item) => (
+              {/** Data Retention Notice */}
+              <div
+                class="text-sm text-content-active space-y-2 bg-page-offset p-4 rounded-lg border border-trim"
+              >
+                {
+                  content.form.info.map(item => (
                     <p class="text-sm">
-                      <strong class="text-page-inverse">{item.lead}</strong>{item.text}
+                      <strong class="text-page-inverse">{item.lead}</strong>
+                      {item.text}
                       {item.email && (
-                        <a href={`mailto:${item.email}`} class="text-primary hover:text-page-inverse hover:underline hover:decoration-page-inverse">{item.email}</a>
+                        <a
+                          href={`mailto:${item.email}`}
+                          class="text-primary hover:text-page-inverse hover:underline hover:decoration-page-inverse"
+                        >
+                          {item.email}
+                        </a>
                       )}
                     </p>
-                  ))}
+                  ))
+                }
+              </div>
+
+              <Confetti classes="block w-full self-end">
+                <div class="flex justify-end">
+                  {/** Intentionally not using Button component. */}
+                  <button
+                    type="submit"
+                    class="inline-flex items-center justify-center px-8 py-4 bg-page-inverse hover:bg-content-active text-content-inverse font-semibold rounded-xl transition-all duration-200 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none disabled:opacity-60 disabled:cursor-not-allowed disabled:transform-none min-w-50"
+                    id="submitBtn"
+                  >
+                    <span class="btn-text">{content.form.submitButtonText}</span>
+                    <span class="btn-loading hidden">
+                      <Icon icon="spinner" color="inherit" size={5} classes="mr-2" />
+                      {content.form.waitingText}
+                    </span>
+                  </button>
                 </div>
+              </Confetti>
+            </form>
 
-                <Confetti classes="block w-full self-end">
-                  <div class="flex justify-end">
-                    {/** Intentionally not using Button component. */}
-                    <button
-                      type="submit"
-                      class="inline-flex items-center justify-center px-8 py-4 bg-page-inverse hover:bg-content-active text-content-inverse font-semibold rounded-xl transition-all duration-200 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none disabled:opacity-60 disabled:cursor-not-allowed disabled:transform-none min-w-50"
-                      id="submitBtn"
-                    >
-                      <span class="btn-text">{content.form.submitButtonText}</span>
-                      <span class="btn-loading hidden">
-                        <Icon icon="spinner" color="inherit" size={5} classes="mr-2" />
-                        {content.form.waitingText}
-                      </span>
-                    </button>
+            {/** Form Messages */}
+            <div id="formMessages" class="mt-8" style="display: none;">
+              <div
+                class="message-success hidden w-full rounded-xl border border-success bg-success-inverse"
+                role="status"
+                aria-live="polite"
+                aria-atomic="true"
+              >
+                <div class="flex items-start gap-4 p-6">
+                  <div
+                    class="shrink-0 w-6 h-6 bg-success rounded-full flex items-center justify-center text-sm font-bold"
+                  >
+                    <Icon icon="check-stylized" color="white" size={3.5} />
                   </div>
-                </Confetti>
-              </form>
-
-              {/** Form Messages */}
-              <div id="formMessages" class="mt-8" style="display: none;">
-                <div
-                  class="message-success hidden w-full rounded-xl border border-success bg-success-inverse"
-                  role="status"
-                  aria-live="polite"
-                  aria-atomic="true"
-                >
-                  <div class="flex items-start gap-4 p-6">
-                    <div
-                      class="shrink-0 w-6 h-6 bg-success rounded-full flex items-center justify-center text-sm font-bold"
-                    >
-                      <Icon icon="check-stylized" color="white" size={3.5} />
-                    </div>
-                    <div>
-                      <h3 class="text-lg font-semibold text-success mb-2">Thank you!</h3>
-                      <p>
-                        {content.form.successText}
-                      </p>
-                    </div>
+                  <div>
+                    <h3 class="text-lg font-semibold text-success mb-2">Thank you!</h3>
+                    <p>
+                      {content.form.successText}
+                    </p>
                   </div>
                 </div>
-                <div
-                  class="message-error hidden w-full rounded-xl border border-danger bg-danger-inverse text-danger"
-                  role="alert"
-                  aria-live="assertive"
-                  aria-atomic="true"
-                >
-                  <div class="flex items-start gap-4 p-6">
-                    <div
-                      class="shrink-0 w-6 h-6 bg-danger rounded-full flex items-center justify-center"
-                    >
-                      <Icon icon="warning" color="white" size={3.5} />
-                    </div>
-                    <div>
-                      <h3 class="text-lg font-semibold text-danger mb-2">Oops!</h3>
-                      <p id="errorMessage" class="text-danger">
-                        {content.form.errorText}{' '}
-                        <a
-                          href={`mailto:${content.form.errorEmail}`}
-                          class="text-danger underline decoration-current underline-offset-2"
-                        >
-                          {content.form.errorEmail}
-                        </a>
-                      </p>
-                    </div>
+              </div>
+              <div
+                class="message-error hidden w-full rounded-xl border border-danger bg-danger-inverse text-danger"
+                role="alert"
+                aria-live="assertive"
+                aria-atomic="true"
+              >
+                <div class="flex items-start gap-4 p-6">
+                  <div
+                    class="shrink-0 w-6 h-6 bg-danger rounded-full flex items-center justify-center"
+                  >
+                    <Icon icon="warning" color="white" size={3.5} />
+                  </div>
+                  <div>
+                    <h3 class="text-lg font-semibold text-danger mb-2">Oops!</h3>
+                    <p id="errorMessage" class="text-danger">
+                      {content.form.errorText}{' '}
+                      <a
+                        href={`mailto:${content.form.errorEmail}`}
+                        class="text-danger underline decoration-current underline-offset-2"
+                      >
+                        {content.form.errorEmail}
+                      </a>
+                    </p>
                   </div>
                 </div>
               </div>
+            </div>
           </div>
 
           {/** Contact Information */}
@@ -447,27 +445,29 @@ const { content, prefilledProjectType = '' } = Astro.props
           >
             <div class="space-y-8">
               <div>
-                <h3 class="text-page-inverse text-xl font-semibold mb-6">{content.contact.header}</h3>
+                <h3 class="text-page-inverse text-xl font-semibold mb-6">
+                  {content.contact.header}
+                </h3>
 
                 <div class="space-y-6">
-                  {content.contact.details.map((item) => (
-                    <div class="flex items-start gap-4">
-                      <div
-                        class="shrink-0 w-11 h-11 bg-page-inverse text-white rounded-xl flex items-center justify-center"
-                      >
-                        <Icon
-                          icon={item.icon}
-                          size={6}
-                          color="content-inverse"
-                          {...(item.iconClasses ? { classes: item.iconClasses } : {})}
-                        />
-                      </div>
-                      <div>
-                        <h4 class="text-page-inverse text-md mb-1">{item.text}</h4>
-                        <p class="text-content-active text-sm" set:html={item.value}></p>
+                  {
+                    content.contact.details.map(item => (
+                      <div class="flex items-start gap-4">
+                        <div class="shrink-0 w-11 h-11 bg-page-inverse text-white rounded-xl flex items-center justify-center">
+                          <Icon
+                            icon={item.icon}
+                            size={6}
+                            color="content-inverse"
+                            {...(item.iconClasses ? { classes: item.iconClasses } : {})}
+                          />
+                        </div>
+                        <div>
+                          <h4 class="text-page-inverse text-md mb-1">{item.text}</h4>
+                          <p class="text-content-active text-sm" set:html={item.value} />
+                        </div>
                       </div>
-                    </div>
-                  ))}
+                    ))
+                  }
                 </div>
               </div>
 
@@ -479,7 +479,7 @@ const { content, prefilledProjectType = '' } = Astro.props
                   items={content.contact.expertise.areas}
                   variant="colored-marker-list"
                   classes={{
-                    icon: "bg-page-inverse",
+                    icon: 'bg-page-inverse',
                   }}
                 />
               </div>
@@ -492,7 +492,7 @@ const { content, prefilledProjectType = '' } = Astro.props
                   items={content.contact.chooseUs.areas}
                   variant="colored-marker-list"
                   classes={{
-                    icon: "bg-page-inverse",
+                    icon: 'bg-page-inverse',
                   }}
                 />
               </div>
diff --git a/src/components/Pages/Downloads/client/__tests__/__fixtures__/downloadForm.fixture.astro b/src/components/Pages/Downloads/client/__tests__/__fixtures__/downloadForm.fixture.astro
index 796703f05..c4ead3a20 100644
--- a/src/components/Pages/Downloads/client/__tests__/__fixtures__/downloadForm.fixture.astro
+++ b/src/components/Pages/Downloads/client/__tests__/__fixtures__/downloadForm.fixture.astro
@@ -25,12 +25,7 @@ import Button from '@components/Button/index.astro'
       <a href="/downloads/test-resource.pdf">Download PDF</a>
     </div>
 
-    <div
-      id="downloadFormStatus"
-      class="hidden"
-      role="status"
-      aria-live="polite"
-      aria-atomic="true"
-    ></div>
+    <div id="downloadFormStatus" class="hidden" role="status" aria-live="polite" aria-atomic="true">
+    </div>
   </form>
 </download-form>
diff --git a/src/components/Pages/Downloads/client/index.ts b/src/components/Pages/Downloads/client/index.ts
index 708eb1f8f..8fc1533aa 100644
--- a/src/components/Pages/Downloads/client/index.ts
+++ b/src/components/Pages/Downloads/client/index.ts
@@ -111,8 +111,7 @@ export class DownloadFormElement extends LitElement {
       const consent = consentRaw === 'true' ? true : undefined
 
       const dataSubjectIdRaw = formData.get('DataSubjectId')
-      const dataSubjectId =
-        typeof dataSubjectIdRaw === 'string' ? dataSubjectIdRaw.trim() : ''
+      const dataSubjectId = typeof dataSubjectIdRaw === 'string' ? dataSubjectIdRaw.trim() : ''
       const DataSubjectId = dataSubjectId.length > 0 ? dataSubjectId : undefined
       const jobTitle = String(formData.get('jobTitle') ?? '').trim()
       const companyName = String(formData.get('companyName') ?? '').trim()
diff --git a/src/components/Pages/Downloads/index.astro b/src/components/Pages/Downloads/index.astro
index 458284f7e..a6a9444c5 100644
--- a/src/components/Pages/Downloads/index.astro
+++ b/src/components/Pages/Downloads/index.astro
@@ -17,14 +17,7 @@ export interface Props {
 
 const { download } = Astro.props as Props
 
-const {
-  cover,
-  coverAlt,
-  fileName,
-  fileType,
-  fileSize,
-  pages,
-} = download.data
+const { cover, coverAlt, fileName, fileType, fileSize, pages } = download.data
 
 const { Content } = await render(download)
 
@@ -38,7 +31,8 @@ const normalizedDownloadUrl = `/downloads/${fileName}`
         Free Download
       </p>
       <p class="leading-relaxed text-content-offset md:text-base">
-        Get the ebook instantly. Review the outline, enter your work email, and open the download in one step.
+        Get the ebook instantly. Review the outline, enter your work email, and open the download in
+        one step.
       </p>
     </div>
   </section>
@@ -126,7 +120,9 @@ const normalizedDownloadUrl = `/downloads/${fileName}`
     <div class="lg:col-span-1 lg:sticky lg:top-24">
       <div class="rounded-2xl bg-page-inverse p-6 md:p-8 shadow-lg">
         <div class="mb-6">
-          <p class="mb-2 text-xs font-semibold uppercase tracking-[0.22em] text-content-inverse-active">
+          <p
+            class="mb-2 text-xs font-semibold uppercase tracking-[0.22em] text-content-inverse-active"
+          >
             Instant Access
           </p>
           <h3 class="text-xl md:text-2xl font-semibold mb-2 text-primary-inverse">Get The Ebook</h3>
@@ -238,7 +234,12 @@ const normalizedDownloadUrl = `/downloads/${fileName}`
               class="block w-full bg-success text-primary-inverse font-semibold py-3 px-6 rounded-xl hover:bg-success-offset focus:outline-none focus:ring-2 focus:ring-success focus:ring-offset-2 focus:ring-offset-page-active transition-all duration-200 text-center"
               id="downloadBtn"
             >
-              <Icon icon="download-document" color="inherit" size={5} classes="inline-block mr-2 -mt-1" />
+              <Icon
+                icon="download-document"
+                color="inherit"
+                size={5}
+                classes="inline-block mr-2 -mt-1"
+              />
               Download {fileType}
             </a>
           </div>
diff --git a/src/components/Pages/MyData/client/__tests__/index.spec.ts b/src/components/Pages/MyData/client/__tests__/index.spec.ts
index 2e3f65a5c..8ba36ffed 100644
--- a/src/components/Pages/MyData/client/__tests__/index.spec.ts
+++ b/src/components/Pages/MyData/client/__tests__/index.spec.ts
@@ -15,9 +15,13 @@ type VerifyResult =
   | { status: 'deleted' }
   | { status: 'expired' }
 
-const requestDataMock = vi.fn<
-  (_input: { email: string; requestType: 'ACCESS' | 'DELETE' }) => Promise<ActionResult<{ message: string }>>
->()
+const requestDataMock =
+  vi.fn<
+    (_input: {
+      email: string
+      requestType: 'ACCESS' | 'DELETE'
+    }) => Promise<ActionResult<{ message: string }>>
+  >()
 
 const verifyDsarMock = vi.fn<(_input: { token: string }) => Promise<ActionResult<VerifyResult>>>()
 
@@ -105,8 +109,12 @@ describe('PrivacyForm behavior', () => {
         elements.accessForm.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
         await flushMicrotasks()
 
-        expect(requestDataMock).toHaveBeenCalledWith({ email: 'test@example.com', requestType: 'ACCESS' })
-        expect(elements.accessMessage.textContent).toBe('Access request sent.')
+        expect(requestDataMock).toHaveBeenCalledWith({
+          email: 'test@example.com',
+          requestType: 'ACCESS',
+        })
+        expect(elements.accessMessage.textContent).toContain('Request Sent')
+        expect(elements.accessMessage.textContent).toContain('Access request sent.')
         expect(elements.accessMessage.classList.contains('hidden')).toBe(false)
         expect(elements.accessMessage.classList.contains('border-success')).toBe(true)
         expect(elements.accessEmailInput.value).toBe('')
@@ -114,6 +122,56 @@ describe('PrivacyForm behavior', () => {
     })
   })
 
+  it('renders preview states from query parameters for both workflows', async () => {
+    await executeRender<PrivacyFormModule>({
+      container,
+      component: PrivacyForm,
+      moduleSpecifier: '@components/Pages/MyData/client/index',
+      args: {
+        props: {
+          content: myDataContent,
+        },
+      },
+      waitForReady: async (element: PrivacyFormElementInstance) => {
+        window.history.replaceState(
+          {},
+          '',
+          'http://localhost/privacy/my-data?accessState=loading&deleteState=validation'
+        )
+        element.initialize()
+      },
+      assert: async ({ element }) => {
+        const elements = getPrivacyFormElements(element)
+        const accessSubmitButton = elements.accessForm.querySelector('button[type="submit"]')
+
+        expect(elements.accessForm.dataset['privacyState']).toBe('loading')
+        expect(elements.accessForm.getAttribute('aria-busy')).toBe('true')
+        expect(accessSubmitButton).toBeInstanceOf(HTMLButtonElement)
+        expect((accessSubmitButton as HTMLButtonElement).disabled).toBe(true)
+
+        const accessLoadingToast = element.querySelector('#access-preview-toast-loading')
+        expect(accessLoadingToast).not.toBeNull()
+        expect(accessLoadingToast?.classList.contains('hidden')).toBe(false)
+        expect(accessLoadingToast?.textContent).toContain('Sending Request')
+        expect(accessLoadingToast?.textContent).toContain('Your request is being prepared and submitted.')
+
+        expect(elements.deleteForm.dataset['privacyState']).toBe('validation')
+        expect(elements.deleteEmailInput.getAttribute('aria-invalid')).toBe('true')
+        expect(elements.deleteConfirmCheckbox.getAttribute('aria-invalid')).toBe('true')
+
+        const deleteValidationToast = element.querySelector('#delete-preview-toast-validation')
+        expect(deleteValidationToast).not.toBeNull()
+        expect(deleteValidationToast?.classList.contains('hidden')).toBe(false)
+        expect(deleteValidationToast?.textContent).toContain('Check Your Details')
+        expect(deleteValidationToast?.textContent).toContain(
+          'Enter a valid email address and confirm the deletion request before submitting.'
+        )
+
+        expect(requestDataMock).not.toHaveBeenCalled()
+      },
+    })
+  })
+
   it('blocks delete submit when confirmation is not checked', async () => {
     requestDataMock.mockResolvedValue({ data: { message: 'Delete request sent.' } })
 
@@ -139,7 +197,10 @@ describe('PrivacyForm behavior', () => {
         await flushMicrotasks()
 
         expect(requestDataMock).not.toHaveBeenCalled()
-        expect(elements.deleteMessage.textContent).toBe('Please confirm you understand the deletion request.')
+        expect(elements.deleteMessage.textContent).toContain('Check Your Details')
+        expect(elements.deleteMessage.textContent).toContain(
+          'Please confirm you understand the deletion request.'
+        )
         expect(elements.deleteMessage.classList.contains('border-danger')).toBe(true)
       },
     })
@@ -163,8 +224,13 @@ describe('PrivacyForm behavior', () => {
         },
       },
       waitForReady: async (element: PrivacyFormElementInstance) => {
-        window.history.replaceState({}, '', 'http://localhost/privacy/my-data?token=unit-test-token')
-        ;(element as unknown as { downloadJson: typeof downloadJsonSpy }).downloadJson = downloadJsonSpy
+        window.history.replaceState(
+          {},
+          '',
+          'http://localhost/privacy/my-data?token=unit-test-token'
+        )
+        ;(element as unknown as { downloadJson: typeof downloadJsonSpy }).downloadJson =
+          downloadJsonSpy
         ;(element as unknown as { navigateTo: typeof navigateToSpy }).navigateTo = navigateToSpy
         element.initialize()
       },
diff --git a/src/components/Pages/MyData/client/__tests__/selectors.spec.ts b/src/components/Pages/MyData/client/__tests__/selectors.spec.ts
index e84bef66e..4a16e04de 100644
--- a/src/components/Pages/MyData/client/__tests__/selectors.spec.ts
+++ b/src/components/Pages/MyData/client/__tests__/selectors.spec.ts
@@ -10,11 +10,16 @@ type PrivacyFormModule = WebComponentModule<PrivacyFormElementInstance>
 
 type ActionResult<TData> = { data?: TData; error?: { message?: string } }
 
-const requestDataMock = vi.fn<
-  (_input: { email: string; requestType: 'ACCESS' | 'DELETE' }) => Promise<ActionResult<{ message: string }>>
->()
+const requestDataMock =
+  vi.fn<
+    (_input: {
+      email: string
+      requestType: 'ACCESS' | 'DELETE'
+    }) => Promise<ActionResult<{ message: string }>>
+  >()
 
-const verifyDsarMock = vi.fn<(_input: { token: string }) => Promise<ActionResult<{ status: string }>>>()
+const verifyDsarMock =
+  vi.fn<(_input: { token: string }) => Promise<ActionResult<{ status: string }>>>()
 
 const myDataContent = {
   header: {
diff --git a/src/components/Pages/MyData/client/index.ts b/src/components/Pages/MyData/client/index.ts
index f6d3cd262..f03bb30e9 100644
--- a/src/components/Pages/MyData/client/index.ts
+++ b/src/components/Pages/MyData/client/index.ts
@@ -4,10 +4,17 @@ import { addScriptBreadcrumb, ClientScriptError } from '@components/scripts/erro
 import { handleScriptError } from '@components/scripts/errors/handler'
 import { defineCustomElement } from '@components/scripts/utils'
 import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
-import { getPrivacyFormElements } from './selectors'
+import {
+  getPrivacyFormElements,
+  getPrivacyPreviewToastElement,
+  getPrivacyPreviewToastElements,
+  getPrivacySubmitButton,
+} from './selectors'
 
 type MessageType = 'success' | 'error' | 'info'
 type RequestType = 'ACCESS' | 'DELETE'
+type RequestPreviewState = 'loading' | 'success' | 'error' | 'validation'
+type RequestFormType = 'access' | 'delete'
 
 type DsarVerifyResult =
   | { status: 'download'; filename: string; json: string }
@@ -16,6 +23,15 @@ type DsarVerifyResult =
 
 type RequestDataResult = { message: string }
 
+type RequestToastTone = 'success' | 'error' | 'info'
+
+const requestPreviewStates = ['loading', 'success', 'error', 'validation'] as const
+
+const requestPreviewQueryParams: Record<RequestFormType, string> = {
+  access: 'accessState',
+  delete: 'deleteState',
+}
+
 const statusMessages: Record<string, { type: MessageType; message: string }> = {
   sent: {
     type: 'success',
@@ -58,6 +74,10 @@ export class PrivacyFormElement extends LitElement {
   private deleteConfirmCheckbox!: HTMLInputElement
   private deleteMessage!: HTMLElement
 
+  private getPreviewToastElements(requestType: RequestType): HTMLElement[] {
+    return getPrivacyPreviewToastElements(requestType, this)
+  }
+
   override connectedCallback(): void {
     super.connectedCallback()
 
@@ -89,6 +109,7 @@ export class PrivacyFormElement extends LitElement {
       this.bindEvents()
       this.isInitialized = true
 
+      this.renderRequestPreviewStatesFromQueryString()
       this.renderStatusFromQueryString()
       void this.handleVerificationToken()
     } catch (error) {
@@ -136,12 +157,193 @@ export class PrivacyFormElement extends LitElement {
     })
   }
 
-  private setMessage(target: HTMLElement, message: string, type: MessageType): void {
+  private setRequestState(
+    form: HTMLFormElement,
+    state: RequestPreviewState | 'idle',
+    requestType?: RequestType
+  ): void {
+    form.dataset['privacyState'] = state
+    form.setAttribute('aria-busy', String(state === 'loading'))
+
+    if (!requestType) {
+      return
+    }
+
+    const rootAttributeName = requestType === 'ACCESS' ? 'data-access-state' : 'data-delete-state'
+    this.setAttribute(rootAttributeName, state)
+  }
+
+  private setSubmitLoading(form: HTMLFormElement, loading: boolean): void {
+    const submitButton = getPrivacySubmitButton(form)
+    if (submitButton) {
+      submitButton.disabled = loading
+    }
+  }
+
+  private setEmailInvalid(input: HTMLInputElement, invalid: boolean): void {
+    input.setAttribute('aria-invalid', String(invalid))
+    input.classList.toggle('border-danger', invalid)
+    input.classList.toggle('focus:border-danger', invalid)
+  }
+
+  private setDeleteConfirmationInvalid(invalid: boolean): void {
+    this.deleteConfirmCheckbox.setAttribute('aria-invalid', String(invalid))
+  }
+
+  private hidePreviewToast(requestType: RequestType): void {
+    for (const el of this.getPreviewToastElements(requestType)) {
+      el.classList.add('hidden')
+    }
+  }
+
+  private resolveRequestToastConfig(
+    requestType: RequestType,
+    message: string,
+    type: RequestToastTone
+  ): {
+    title: string
+    icon: 'check-stylized' | 'warning' | 'spinner'
+    containerClasses: string[]
+    iconContainerClasses: string[]
+    titleClasses: string[]
+  } {
+    if (type === 'success') {
+      return {
+        title: requestType === 'ACCESS' ? 'Request Sent' : 'Deletion Request Sent',
+        icon: 'check-stylized',
+        containerClasses: ['border-success', 'bg-success-inverse', 'text-success'],
+        iconContainerClasses: ['bg-success', 'text-content-inverse'],
+        titleClasses: ['text-success'],
+      }
+    }
+
+    if (type === 'info') {
+      return {
+        title: 'Sending Request',
+        icon: 'spinner',
+        containerClasses: ['border-info', 'bg-info-inverse', 'text-info'],
+        iconContainerClasses: ['bg-info', 'text-content-inverse'],
+        titleClasses: ['text-info'],
+      }
+    }
+
+    const isValidationMessage =
+      message.includes('valid email') || message.includes('confirm you understand') || message.includes('confirm the deletion request')
+
+    return {
+      title: isValidationMessage
+        ? 'Check Your Details'
+        : requestType === 'ACCESS'
+          ? 'Request Failed'
+          : 'Deletion Request Failed',
+      icon: 'warning',
+      containerClasses: ['border-danger', 'bg-danger-inverse', 'text-danger'],
+      iconContainerClasses: ['bg-danger', 'text-content-inverse'],
+      titleClasses: ['text-danger'],
+    }
+  }
+
+  private renderRequestToast(target: HTMLElement, requestType: RequestType, message: string, type: RequestToastTone): void {
+    const config = this.resolveRequestToastConfig(requestType, message, type)
+
+    target.replaceChildren()
+    target.classList.remove('px-4', 'py-3', 'text-sm', 'bg-danger-offset')
+    target.classList.add('w-full', 'rounded-xl', 'border')
+    target.classList.add(...config.containerClasses)
+
+    const wrapper = document.createElement('div')
+    wrapper.className = 'flex items-start gap-4 p-6'
+
+    const iconContainer = document.createElement('div')
+    iconContainer.className = 'shrink-0 flex h-6 w-6 items-center justify-center rounded-full'
+    iconContainer.classList.add(...config.iconContainerClasses)
+
+    const icon = document.createElement('span')
+    icon.setAttribute('aria-hidden', 'true')
+    icon.textContent = config.icon === 'check-stylized' ? '✓' : config.icon === 'spinner' ? '◌' : '!'
+    iconContainer.appendChild(icon)
+
+    const content = document.createElement('div')
+
+    const title = document.createElement('h3')
+    title.className = 'mb-2 text-lg font-semibold'
+    title.classList.add(...config.titleClasses)
+    title.textContent = config.title
+
+    const body = document.createElement('p')
+    body.textContent = message
+
+    content.append(title, body)
+    wrapper.append(iconContainer, content)
+    target.appendChild(wrapper)
+  }
+
+  private resetMessage(target: HTMLElement): void {
+    target.replaceChildren()
+    target.classList.add('hidden')
+    target.classList.remove(
+      'w-full',
+      'rounded-xl',
+      'border',
+      'border-success',
+      'bg-success-inverse',
+      'text-success',
+      'border-danger',
+      'bg-danger-offset',
+      'bg-danger-inverse',
+      'text-danger',
+      'border-info',
+      'bg-info-inverse',
+      'text-info',
+      'px-4',
+      'py-3',
+      'text-sm'
+    )
+    target.classList.add('rounded-xl', 'border', 'px-4', 'py-3', 'text-sm')
+  }
+
+  private resetRequestState(requestType: RequestType): void {
+    const isAccessRequest = requestType === 'ACCESS'
+    const form = isAccessRequest ? this.accessForm : this.deleteForm
+    const emailInput = isAccessRequest ? this.accessEmailInput : this.deleteEmailInput
+    const message = isAccessRequest ? this.accessMessage : this.deleteMessage
+
+    this.hidePreviewToast(requestType)
+    this.resetMessage(message)
+    this.setRequestState(form, 'idle', requestType)
+    this.setSubmitLoading(form, false)
+    this.setEmailInvalid(emailInput, false)
+
+    if (!isAccessRequest) {
+      this.setDeleteConfirmationInvalid(false)
+    }
+  }
+
+  private setMessage(
+    target: HTMLElement,
+    message: string,
+    type: MessageType,
+    options: { focus?: boolean } = {}
+  ): void {
     target.setAttribute('role', type === 'error' ? 'alert' : 'status')
     target.setAttribute('aria-live', type === 'error' ? 'assertive' : 'polite')
-    target.textContent = message
     target.classList.remove('hidden')
 
+    const requestType =
+      target.id === 'access-message' ? 'ACCESS' : target.id === 'delete-message' ? 'DELETE' : null
+
+    if (requestType) {
+      this.renderRequestToast(target, requestType, message, type)
+
+      if (options.focus ?? true) {
+        target.focus()
+      }
+
+      return
+    }
+
+    target.textContent = message
+
     const variantClasses = [
       'border-success',
       'bg-success-inverse',
@@ -167,7 +369,66 @@ export class PrivacyFormElement extends LitElement {
       target.classList.add('border-info', 'bg-info-inverse', 'text-info')
     }
 
-    target.focus()
+    if (options.focus ?? true) {
+      target.focus()
+    }
+  }
+
+  private resolvePreviewState(
+    params: URLSearchParams,
+    requestFormType: RequestFormType
+  ): RequestPreviewState | null {
+    const previewState = params
+      .get(requestPreviewQueryParams[requestFormType])
+      ?.trim()
+      .toLowerCase()
+
+    if (!previewState) {
+      return null
+    }
+
+    return requestPreviewStates.includes(previewState as RequestPreviewState)
+      ? (previewState as RequestPreviewState)
+      : null
+  }
+
+  private applyRequestPreviewState(
+    requestType: RequestType,
+    previewState: RequestPreviewState
+  ): void {
+    const isAccessRequest = requestType === 'ACCESS'
+    const form = isAccessRequest ? this.accessForm : this.deleteForm
+    const emailInput = isAccessRequest ? this.accessEmailInput : this.deleteEmailInput
+
+    // Show only the matching static SSR preview toast; hide all others for this form.
+    for (const el of this.getPreviewToastElements(requestType)) {
+      el.classList.add('hidden')
+    }
+    getPrivacyPreviewToastElement(requestType, previewState, this)?.classList.remove('hidden')
+
+    this.setRequestState(form, previewState, requestType)
+    this.setSubmitLoading(form, previewState === 'loading')
+
+    if (previewState === 'validation') {
+      this.setEmailInvalid(emailInput, true)
+      if (!isAccessRequest) {
+        this.setDeleteConfirmationInvalid(true)
+      }
+    }
+  }
+
+  private renderRequestPreviewStatesFromQueryString(): void {
+    const params = new URLSearchParams(window.location.search)
+    const accessPreviewState = this.resolvePreviewState(params, 'access')
+    const deletePreviewState = this.resolvePreviewState(params, 'delete')
+
+    if (accessPreviewState) {
+      this.applyRequestPreviewState('ACCESS', accessPreviewState)
+    }
+
+    if (deletePreviewState) {
+      this.applyRequestPreviewState('DELETE', deletePreviewState)
+    }
   }
 
   private renderStatusFromQueryString(): void {
@@ -240,25 +501,37 @@ export class PrivacyFormElement extends LitElement {
     const formEl = requestType === 'ACCESS' ? this.accessForm : this.deleteForm
     const emailInput = requestType === 'ACCESS' ? this.accessEmailInput : this.deleteEmailInput
 
+    this.resetRequestState(requestType)
+
     if (requestType === 'DELETE' && !this.deleteConfirmCheckbox.checked) {
+      this.setRequestState(formEl, 'validation', requestType)
+      this.setDeleteConfirmationInvalid(true)
       this.setMessage(messageEl, 'Please confirm you understand the deletion request.', 'error')
       return
     }
 
     const email = emailInput.value
+    this.setRequestState(formEl, 'loading', requestType)
+    this.setSubmitLoading(formEl, true)
     this.setMessage(messageEl, 'Sending request...', 'info')
 
     try {
       const { data, error } = await actions.gdpr.requestData({ email, requestType })
       if (error || !data) {
+        this.setRequestState(formEl, 'error', requestType)
+        this.setSubmitLoading(formEl, false)
         this.setMessage(messageEl, error?.message || 'Request failed', 'error')
         return
       }
 
       const resultData = data as RequestDataResult
+      this.setRequestState(formEl, 'success', requestType)
+      this.setSubmitLoading(formEl, false)
       this.setMessage(messageEl, resultData.message, 'success')
       formEl.reset()
     } catch (error) {
+      this.setRequestState(formEl, 'error', requestType)
+      this.setSubmitLoading(formEl, false)
       this.setMessage(
         messageEl,
         error instanceof Error ? error.message : 'Network or server error',
diff --git a/src/components/Pages/MyData/client/selectors.ts b/src/components/Pages/MyData/client/selectors.ts
index b7bb4d010..1f031d202 100644
--- a/src/components/Pages/MyData/client/selectors.ts
+++ b/src/components/Pages/MyData/client/selectors.ts
@@ -1,6 +1,7 @@
 /**
  * Selectors for PrivacyForm component elements
  */
+import { isButtonElement } from '@components/scripts/assertions/elements'
 import { ClientScriptError } from '@components/scripts/errors'
 
 type SelectorRoot = Document | DocumentFragment | Element
@@ -28,6 +29,19 @@ function queryRequiredElement<TElement extends Element>(
 
 const isHtmlElement = (element: Element): element is HTMLElement => element instanceof HTMLElement
 
+type RequestType = 'ACCESS' | 'DELETE'
+type RequestPreviewState = 'loading' | 'success' | 'error' | 'validation'
+
+const previewToastStates: RequestPreviewState[] = ['success', 'loading', 'error', 'validation']
+
+const getPreviewToastSelector = (
+  requestType: RequestType,
+  previewState: RequestPreviewState
+): string => {
+  const prefix = requestType === 'ACCESS' ? 'access' : 'delete'
+  return `#${prefix}-preview-toast-${previewState}`
+}
+
 export interface PrivacyFormElements {
   statusMessage: HTMLElement | undefined
 
@@ -93,3 +107,28 @@ export function getPrivacyFormElements(root?: SelectorRoot): PrivacyFormElements
     ),
   }
 }
+
+export function getPrivacyPreviewToastElements(
+  requestType: RequestType,
+  root?: SelectorRoot
+): HTMLElement[] {
+  const resolvedRoot = resolveRoot(root)
+
+  return previewToastStates
+    .map(previewState => resolvedRoot.querySelector(getPreviewToastSelector(requestType, previewState)))
+    .filter((element): element is HTMLElement => element instanceof HTMLElement)
+}
+
+export function getPrivacyPreviewToastElement(
+  requestType: RequestType,
+  previewState: RequestPreviewState,
+  root?: SelectorRoot
+): HTMLElement | undefined {
+  const element = resolveRoot(root).querySelector(getPreviewToastSelector(requestType, previewState))
+  return element instanceof HTMLElement ? element : undefined
+}
+
+export function getPrivacySubmitButton(form: HTMLFormElement): HTMLButtonElement | undefined {
+  const button = form.querySelector('button[type="submit"]')
+  return isButtonElement(button) ? button : undefined
+}
diff --git a/src/components/Pages/MyData/index.astro b/src/components/Pages/MyData/index.astro
index c2bbe6de3..49e6a9dcd 100644
--- a/src/components/Pages/MyData/index.astro
+++ b/src/components/Pages/MyData/index.astro
@@ -3,6 +3,19 @@ import Button from '@components/Button/index.astro'
 import Icon from '@components/Icon/index.astro'
 import List from '@components/List/index.astro'
 
+/**
+ * Privacy request preview states for styling:
+ *
+ * - /privacy/my-data?accessState=loading
+ * - /privacy/my-data?accessState=success
+ * - /privacy/my-data?accessState=error
+ * - /privacy/my-data?accessState=validation
+ * - /privacy/my-data?deleteState=loading
+ * - /privacy/my-data?deleteState=success
+ * - /privacy/my-data?deleteState=error
+ * - /privacy/my-data?deleteState=validation
+ */
+
 export type Props = {
   content: {
     header: {
@@ -19,14 +32,14 @@ export type Props = {
       description: string
       label: string
       buttonText: string
-    },
-     deleteData: {
+    }
+    deleteData: {
       heading: string
       description: string
       label: string
       buttonText: string
       confirmText: string
-    },
+    }
     next: {
       heading: string
       items: {
@@ -37,10 +50,30 @@ export type Props = {
   }
 }
 
+type PreviewState = 'idle' | 'loading' | 'success' | 'error' | 'validation'
+
 const { content } = Astro.props
+
+const previewStates = new Set<PreviewState>(['idle', 'loading', 'success', 'error', 'validation'])
+
+const resolvePreviewState = (value: string | null): PreviewState => {
+  if (!value) {
+    return 'idle'
+  }
+
+  const normalizedValue = value.trim().toLowerCase()
+  return previewStates.has(normalizedValue as PreviewState) ? (normalizedValue as PreviewState) : 'idle'
+}
+
+const accessPreviewState = resolvePreviewState(Astro.url.searchParams.get('accessState'))
+const deletePreviewState = resolvePreviewState(Astro.url.searchParams.get('deleteState'))
 ---
 
-<privacy-form class="block">
+<privacy-form
+  class="block"
+  data-access-state={accessPreviewState}
+  data-delete-state={deletePreviewState}
+>
   <div class="container mx-auto px-4 pb-16 max-w-5xl space-y-10">
     <div
       id="status-message"
@@ -49,7 +82,8 @@ const { content } = Astro.props
       aria-live="polite"
       aria-atomic="true"
       class="hidden rounded-xl border px-4 py-3 text-sm"
-    ></div>
+    >
+    </div>
 
     <section
       class="flex flex-col items-center bg-page-offset border border-trim rounded-2xl p-6"
@@ -87,7 +121,14 @@ const { content } = Astro.props
           {content.accessData.description}
         </p>
 
-        <form id="access-form" class="mt-6 space-y-4" novalidate>
+        <form
+          id="access-form"
+          class="mt-6 space-y-4"
+          novalidate
+          data-privacy-request="access"
+          data-privacy-state={accessPreviewState}
+          aria-busy={accessPreviewState === 'loading' ? 'true' : 'false'}
+        >
           <div class="space-y-2">
             <label for="access-email" class="block text-content-active text-sm font-medium">
               {content.accessData.label}
@@ -98,6 +139,7 @@ const { content } = Astro.props
               name="email"
               required
               placeholder="your@email.com"
+              aria-invalid={accessPreviewState === 'validation' ? 'true' : 'false'}
               class="w-full rounded-md border border-content bg-content-inverse px-3 py-2 placeholder:text-content-active focus:border-primary transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
             />
           </div>
@@ -107,8 +149,93 @@ const { content } = Astro.props
             variant="info"
             class="mt-8 px-6 py-3"
             text={content.accessData.buttonText}
+            disabled={accessPreviewState === 'loading'}
           />
 
+          <div
+            id="access-preview-toast-success"
+            class:list={[
+              'w-full rounded-xl border border-success bg-success-inverse text-success mt-4',
+              { hidden: accessPreviewState !== 'success' },
+            ]}
+            role="status"
+            aria-live="polite"
+            aria-atomic="true"
+          >
+            <div class="flex items-start gap-4 p-4">
+              <div class="shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-success text-content-inverse mt-1">
+                <Icon icon="check-stylized" color="inherit" size={3} />
+              </div>
+              <div>
+                <h3 class="mb-2 text-lg font-semibold text-success">Request Sent</h3>
+                <p class="text-sm">We sent a verification email so you can confirm your data access request.</p>
+              </div>
+            </div>
+          </div>
+
+          <div
+            id="access-preview-toast-loading"
+            class:list={[
+              'w-full rounded-xl border border-info bg-info-inverse text-info mt-4',
+              { hidden: accessPreviewState !== 'loading' },
+            ]}
+            role="status"
+            aria-live="polite"
+            aria-atomic="true"
+          >
+            <div class="flex items-start gap-4 p-4">
+              <div class="shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-info text-content-inverse mt-1">
+                <Icon icon="spinner" color="inherit" size={3} />
+              </div>
+              <div>
+                <h3 class="mb-2 text-lg font-semibold text-info">Sending Request</h3>
+                <p class="text-sm">Your request is being prepared and submitted.</p>
+              </div>
+            </div>
+          </div>
+
+          <div
+            id="access-preview-toast-error"
+            class:list={[
+              'w-full rounded-xl border border-danger bg-danger-inverse text-danger mt-4',
+              { hidden: accessPreviewState !== 'error' },
+            ]}
+            role="alert"
+            aria-live="assertive"
+            aria-atomic="true"
+          >
+            <div class="flex items-start gap-4 p-4">
+              <div class="shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-danger text-content-inverse mt-1">
+                <Icon icon="warning" color="inherit" size={3} />
+              </div>
+              <div>
+                <h3 class="mb-2 text-lg font-semibold text-danger">Request Failed</h3>
+                <p class="text-sm">We could not submit your data access request. Try again or contact support.</p>
+              </div>
+            </div>
+          </div>
+
+          <div
+            id="access-preview-toast-validation"
+            class:list={[
+              'w-full rounded-xl border border-danger bg-danger-inverse text-danger mt-4',
+              { hidden: accessPreviewState !== 'validation' },
+            ]}
+            role="alert"
+            aria-live="assertive"
+            aria-atomic="true"
+          >
+            <div class="flex items-start gap-4 p-4">
+              <div class="shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-danger text-content-inverse mt-1">
+                <Icon icon="warning" color="inherit" size={3} />
+              </div>
+              <div>
+                <h3 class="mb-2 text-lg font-semibold text-danger">Check Your Details</h3>
+                <p class="text-sm">Enter a valid email address before submitting your request.</p>
+              </div>
+            </div>
+          </div>
+
           <div
             id="access-message"
             class="hidden rounded-xl border px-4 py-3 text-sm"
@@ -116,7 +243,8 @@ const { content } = Astro.props
             aria-live="polite"
             aria-atomic="true"
             tabindex="-1"
-          ></div>
+          >
+          </div>
         </form>
       </sectionclass>
 
@@ -128,18 +256,23 @@ const { content } = Astro.props
           {content.deleteData.heading}
         </h2>
 
-        <div class="flex rounded-xl border border-warning bg-warning-inverse text-warning px-4 py-3 text-sm mb-4">
+        <div
+          class="flex rounded-xl border border-warning bg-warning-inverse text-warning px-4 py-3 text-sm mb-4"
+        >
           <span class="mt-2">
-            <Icon
-              icon="warning"
-              color="warning-offset"
-              size={6}
-            />
+            <Icon icon="warning" color="warning-offset" size={6} />
           </span>
           <span class="ml-3">{content.deleteData.description}</span>
         </div>
 
-        <form id="delete-form" class="mt-11 space-y-4" novalidate>
+        <form
+          id="delete-form"
+          class="mt-11 space-y-4"
+          novalidate
+          data-privacy-request="delete"
+          data-privacy-state={deletePreviewState}
+          aria-busy={deletePreviewState === 'loading' ? 'true' : 'false'}
+        >
           <div class="space-y-2">
             <label for="delete-email" class="block text-content-active text-sm font-medium">
               {content.deleteData.label}
@@ -150,6 +283,7 @@ const { content } = Astro.props
               name="email"
               required
               placeholder="your@email.com"
+              aria-invalid={deletePreviewState === 'validation' ? 'true' : 'false'}
               class="w-full rounded-md border border-content bg-content-inverse px-3 py-2 placeholder:text-content-active transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
             />
           </div>
@@ -159,6 +293,8 @@ const { content } = Astro.props
               type="checkbox"
               id="confirm-delete"
               required
+              aria-invalid={deletePreviewState === 'validation' ? 'true' : 'false'}
+              checked={deletePreviewState === 'success' || deletePreviewState === 'loading'}
               class="mt-1 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
             />
             <span class="mt-0.5">{content.deleteData.confirmText}</span>
@@ -169,8 +305,93 @@ const { content } = Astro.props
             variant="warning"
             class="px-6 py-3"
             text={content.deleteData.buttonText}
+            disabled={deletePreviewState === 'loading'}
           />
 
+          <div
+            id="delete-preview-toast-success"
+            class:list={[
+              'w-full rounded-xl border border-success bg-success-inverse text-success mt-4',
+              { hidden: deletePreviewState !== 'success' },
+            ]}
+            role="status"
+            aria-live="polite"
+            aria-atomic="true"
+          >
+            <div class="flex items-start gap-4 p-4">
+              <div class="shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-success text-content-inverse mt-1">
+                <Icon icon="check-stylized" color="inherit" size={3} />
+              </div>
+              <div>
+                <h3 class="mb-2 text-lg font-semibold text-success">Deletion Request Sent</h3>
+                <p class="text-sm">We sent a verification email so you can confirm your deletion request.</p>
+              </div>
+            </div>
+          </div>
+
+          <div
+            id="delete-preview-toast-loading"
+            class:list={[
+              'w-full rounded-xl border border-info bg-info-inverse text-info mt-4',
+              { hidden: deletePreviewState !== 'loading' },
+            ]}
+            role="status"
+            aria-live="polite"
+            aria-atomic="true"
+          >
+            <div class="flex items-start gap-4 p-4">
+              <div class="shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-info text-content-inverse mt-1">
+                <Icon icon="spinner" color="inherit" size={3} />
+              </div>
+              <div>
+                <h3 class="mb-2 text-lg font-semibold text-info">Sending Request</h3>
+                <p class="text-sm">Your request is being prepared pnd submitted.</p>
+              </div>
+            </div>
+          </div>
+
+          <div
+            id="delete-preview-toast-error"
+            class:list={[
+              'w-full rounded-xl border border-danger bg-danger-inverse text-danger mt-4',
+              { hidden: deletePreviewState !== 'error' },
+            ]}
+            role="alert"
+            aria-live="assertive"
+            aria-atomic="true"
+          >
+            <div class="flex items-start gap-4 p-4">
+              <div class="shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-danger text-content-inverse mt-1">
+                <Icon icon="warning" color="inherit" size={3} />
+              </div>
+              <div>
+                <h3 class="mb-2 text-lg font-semibold text-danger">Deletion Request Failed</h3>
+                <p class="text-sm">We could not submit your deletion request. Try again or coptact support.</p>
+              </div>
+            </div>
+          </div>
+
+          <div
+            id="delete-preview-toast-validation"
+            class:list={[
+              'w-full rounded-xl border border-danger bg-danger-inverse text-danger mt-4',
+              { hidden: deletePreviewState !== 'validation' },
+            ]}
+            role="alert"
+            aria-live="assertive"
+            aria-atomic="true"
+          >
+            <div class="flex items-start gap-4 p-4">
+              <div class="shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-danger text-content-inverse mt-1">
+                <Icon icon="warning" color="inherit" size={3} />
+              </div>
+              <div>
+                <h3 class="mb-2 text-lg font-semibold text-danger">Check Your Details</h3>
+                <p class="text-sm">Enter a valid email address and confirm the deletion request before submitting.</p>
+              </div>
+            </div>
+          </div>
+
           <div
             id="delete-message"
             class="hidden rounded-xl border px-4 py-3 text-sm"
@@ -178,7 +399,8 @@ const { content } = Astro.props
             aria-live="polite"
             aria-atomic="true"
             tabindex="-1"
-          ></div>
+          >
+          </div>
         </form>
       </section>
     </div>
@@ -187,10 +409,7 @@ const { content } = Astro.props
       <h2 id="my-data-next-title" class="text-page-inverse text-xl font-semibold mb-4">
         {content.next.heading}
       </h2>
-      <List
-        variant="numbered-with-background-list"
-        items={content.next.items}
-      />
+      <List variant="numbered-with-background-list" items={content.next.items} />
     </section>
   </div>
 </privacy-form>
diff --git a/src/components/Pages/MyData/server/index.ts b/src/components/Pages/MyData/server/index.ts
index ac9974fb4..a21917842 100644
--- a/src/components/Pages/MyData/server/index.ts
+++ b/src/components/Pages/MyData/server/index.ts
@@ -1,4 +1,7 @@
-export const statusMessages: Record<string, { type: 'success' | 'error' | 'info'; message: string }> = {
+export const statusMessages: Record<
+  string,
+  { type: 'success' | 'error' | 'info'; message: string }
+> = {
   sent: {
     type: 'success',
     message:
diff --git a/src/components/Pages/Newsletter/Confirm/client/__tests__/index.spec.ts b/src/components/Pages/Newsletter/Confirm/client/__tests__/index.spec.ts
index cd335891e..5a9bed5ca 100644
--- a/src/components/Pages/Newsletter/Confirm/client/__tests__/index.spec.ts
+++ b/src/components/Pages/Newsletter/Confirm/client/__tests__/index.spec.ts
@@ -17,9 +17,7 @@ type ConfirmActionData = {
   message?: string
 }
 
-const confirmMock = vi.fn<
-  (_input: { token: string }) => Promise<ActionResult<ConfirmActionData>>
->()
+const confirmMock = vi.fn<(_input: { token: string }) => Promise<ActionResult<ConfirmActionData>>>()
 
 vi.mock('astro:actions', () => ({
   actions: {
diff --git a/src/components/Pages/Newsletter/Confirm/client/__tests__/selectors.spec.ts b/src/components/Pages/Newsletter/Confirm/client/__tests__/selectors.spec.ts
index 27072b6e0..dc59e2bfe 100644
--- a/src/components/Pages/Newsletter/Confirm/client/__tests__/selectors.spec.ts
+++ b/src/components/Pages/Newsletter/Confirm/client/__tests__/selectors.spec.ts
@@ -17,9 +17,7 @@ type ConfirmActionData = {
   message?: string
 }
 
-const confirmMock = vi.fn<
-  (_input: { token: string }) => Promise<ActionResult<ConfirmActionData>>
->()
+const confirmMock = vi.fn<(_input: { token: string }) => Promise<ActionResult<ConfirmActionData>>>()
 
 vi.mock('astro:actions', () => ({
   actions: {
diff --git a/src/components/Pages/Newsletter/Confirm/client/selectors.ts b/src/components/Pages/Newsletter/Confirm/client/selectors.ts
index 3673ada41..abb28dae8 100644
--- a/src/components/Pages/Newsletter/Confirm/client/selectors.ts
+++ b/src/components/Pages/Newsletter/Confirm/client/selectors.ts
@@ -73,8 +73,18 @@ export function getNewsletterConfirmElements(root?: SelectorRoot): NewsletterCon
       'Newsletter confirm status announcer not found',
       root
     ),
-    userEmail: queryRequiredElement('#user-email', isHtmlElement, 'Newsletter confirm email not found', root),
-    errorTitle: queryRequiredElement('#error-title', isHtmlElement, 'Newsletter confirm error title not found', root),
+    userEmail: queryRequiredElement(
+      '#user-email',
+      isHtmlElement,
+      'Newsletter confirm email not found',
+      root
+    ),
+    errorTitle: queryRequiredElement(
+      '#error-title',
+      isHtmlElement,
+      'Newsletter confirm error title not found',
+      root
+    ),
     errorMessage: queryRequiredElement(
       '#error-message',
       isHtmlElement,
diff --git a/src/components/Pages/Newsletter/Confirm/index.astro b/src/components/Pages/Newsletter/Confirm/index.astro
index 8e6a5ccf6..12b9f5175 100644
--- a/src/components/Pages/Newsletter/Confirm/index.astro
+++ b/src/components/Pages/Newsletter/Confirm/index.astro
@@ -24,28 +24,23 @@ const { token } = Astro.props
 
 <newsletter-confirm class="block" token={token} data-confirm-state="loading">
   <div class="container mx-auto px-4 py-12 sm:py-16 max-w-2xl">
-    <p
-      id="confirmation-status"
-      class="sr-only"
-      role="status"
-      aria-live="polite"
-      aria-atomic="true"
-    >
+    <p id="confirmation-status" class="sr-only" role="status" aria-live="polite" aria-atomic="true">
     </p>
 
     <!-- Loading state -->
     <div id="loading-state">
       <div class="bg-page-base border border-offset rounded-xl shadow-md overflow-hidden">
         <div class="bg-accent/10 border-b border-offset px-6 py-10 text-center">
-          <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-accent/15 mb-5">
-            <Icon
-              icon="reload"
-              color="accent"
-              size={10}
-              classes="animate-spin"
-            />
+          <div
+            class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-accent/15 mb-5"
+          >
+            <Icon icon="reload" color="accent" size={10} classes="animate-spin" />
           </div>
-          <h1 class="text-2xl sm:text-3xl font-bold text-page-inverse outline-none focus:outline-none" id="confirm-heading-loading" tabindex="-1">
+          <h1
+            class="text-2xl sm:text-3xl font-bold text-page-inverse outline-none focus:outline-none"
+            id="confirm-heading-loading"
+            tabindex="-1"
+          >
             Confirming Your Subscription
           </h1>
         </div>
@@ -53,9 +48,7 @@ const { token } = Astro.props
           <p class="text-lg text-content-active mb-2">
             Please wait while we verify your confirmation link.
           </p>
-          <p class="text-sm text-content-offset">
-            This usually takes just a moment.
-          </p>
+          <p class="text-sm text-content-offset">This usually takes just a moment.</p>
         </div>
       </div>
     </div>
@@ -64,14 +57,16 @@ const { token } = Astro.props
     <div id="success-state" class="hidden">
       <div class="bg-page-base border border-offset rounded-xl shadow-md overflow-hidden">
         <div class="bg-success-inverse/40 border-b border-offset px-6 py-10 text-center">
-          <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-success/15 mb-5">
-            <Icon
-              icon="check-circled-open"
-              color="success"
-              size={10}
-            />
+          <div
+            class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-success/15 mb-5"
+          >
+            <Icon icon="check-circled-open" color="success" size={10} />
           </div>
-          <h2 class="text-2xl sm:text-3xl font-bold text-page-inverse outline-none focus:outline-none" id="confirm-heading-success" tabindex="-1">
+          <h2
+            class="text-2xl sm:text-3xl font-bold text-page-inverse outline-none focus:outline-none"
+            id="confirm-heading-success"
+            tabindex="-1"
+          >
             Subscription Confirmed!
           </h2>
         </div>
@@ -110,15 +105,11 @@ const { token } = Astro.props
                 <Icon icon="lock" color="content-active" size={6} />
                 <p class="font-semibold text-sm text-content-active">Your Privacy Rights</p>
               </div>
-              <Button
-                href="/privacy"
-                variant="success"
-                size="small"
-                text="Privacy Policy"
-              />
+              <Button href="/privacy" variant="success" size="small" text="Privacy Policy" />
             </div>
             <p class="text-sm text-content-offset">
-              You can unsubscribe at any time using the link in any email we send. See our privacy policy for details about how we handle your data.
+              You can unsubscribe at any time using the link in any email we send. See our privacy
+              policy for details about how we handle your data.
             </p>
           </div>
 
@@ -133,14 +124,16 @@ const { token } = Astro.props
     <div id="expired-state" class="hidden">
       <div class="bg-page-base border border-offset rounded-xl shadow-md overflow-hidden">
         <div class="bg-warning-inverse/40 border-b border-offset px-6 py-10 text-center">
-          <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-warning/15 mb-5">
-            <Icon
-              icon="clock"
-              color="warning"
-              size={10}
-            />
+          <div
+            class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-warning/15 mb-5"
+          >
+            <Icon icon="clock" color="warning" size={10} />
           </div>
-          <h2 class="text-2xl sm:text-3xl font-bold text-page-inverse outline-none focus:outline-none" id="confirm-heading-expired" tabindex="-1">
+          <h2
+            class="text-2xl sm:text-3xl font-bold text-page-inverse outline-none focus:outline-none"
+            id="confirm-heading-expired"
+            tabindex="-1"
+          >
             Confirmation Link Expired
           </h2>
         </div>
@@ -157,18 +150,18 @@ const { token } = Astro.props
             <List
               variant="colored-marker-list"
               classes={{
-                ul: "ml-2",
-                icon: "bg-content-active",
+                ul: 'ml-2',
+                icon: 'bg-content-active',
               }}
               items={[
                 {
-                  text: "Sign up again to receive a new confirmation email.",
+                  text: 'Sign up again to receive a new confirmation email.',
                 },
                 {
-                  text: "Check your inbox for the new email and click the link within 24 hours.",
+                  text: 'Check your inbox for the new email and click the link within 24 hours.',
                 },
                 {
-                  text: "If the link keeps expiring, contact us for help.",
+                  text: 'If the link keeps expiring, contact us for help.',
                 },
               ]}
             />
@@ -185,14 +178,16 @@ const { token } = Astro.props
     <div id="error-state" class="hidden">
       <div class="bg-page-base border border-offset rounded-xl shadow-md overflow-hidden">
         <div class="bg-danger-inverse/40 border-b border-offset px-6 py-10 text-center">
-          <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-danger/15 mb-5">
-            <Icon
-              icon="error-open"
-              color="danger"
-              size={10}
-            />
+          <div
+            class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-danger/15 mb-5"
+          >
+            <Icon icon="error-open" color="danger" size={10} />
           </div>
-          <h2 class="text-2xl sm:text-3xl font-bold text-danger outline-none focus:outline-none" id="error-title" tabindex="-1">
+          <h2
+            class="text-2xl sm:text-3xl font-bold text-danger outline-none focus:outline-none"
+            id="error-title"
+            tabindex="-1"
+          >
             Confirmation Error
           </h2>
         </div>
@@ -207,18 +202,18 @@ const { token } = Astro.props
             <List
               variant="colored-marker-list"
               classes={{
-                ul: "ml-2",
-                icon: "bg-content-active",
+                ul: 'ml-2',
+                icon: 'bg-content-active',
               }}
               items={[
                 {
-                  text: "The confirmation link was malformed or incomplete.",
+                  text: 'The confirmation link was malformed or incomplete.',
                 },
                 {
-                  text: "A temporary server issue prevented the confirmation.",
+                  text: 'A temporary server issue prevented the confirmation.',
                 },
                 {
-                  text: "The subscription may have already been confirmed.",
+                  text: 'The subscription may have already been confirmed.',
                 },
               ]}
             />
diff --git a/src/components/Pages/Newsletter/Signup/index.astro b/src/components/Pages/Newsletter/Signup/index.astro
index 8d2c6b96e..158a44b41 100644
--- a/src/components/Pages/Newsletter/Signup/index.astro
+++ b/src/components/Pages/Newsletter/Signup/index.astro
@@ -46,7 +46,6 @@ const { content } = Astro.props
 <section class="py-12 bg-page-offset" aria-label="Newsletter sign-up">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
-
       {/* Left column: what you get */}
       <div class="space-y-8">
         <div>
@@ -57,17 +56,19 @@ const { content } = Astro.props
         </div>
 
         <ul class="space-y-4">
-          {content.intro.itemList.map((item) => (
-            <li class="flex items-start gap-3">
-              <span class="mt-1 flex h-6 w-6 items-center justify-center rounded-full bg-success/15 shrink-0">
-                <Icon icon="check-stylized" color="success" size={3.5} />
-              </span>
-              <div>
-                <p class="font-semibold text-content">{item.lead}</p>
-                <p class="text-sm text-content-offset">{item.text}</p>
-              </div>
-            </li>
-          ))}
+          {
+            content.intro.itemList.map(item => (
+              <li class="flex items-start gap-3">
+                <span class="mt-1 flex h-6 w-6 items-center justify-center rounded-full bg-success/15 shrink-0">
+                  <Icon icon="check-stylized" color="success" size={3.5} />
+                </span>
+                <div>
+                  <p class="font-semibold text-content">{item.lead}</p>
+                  <p class="text-sm text-content-offset">{item.text}</p>
+                </div>
+              </li>
+            ))
+          }
         </ul>
 
         <div class="border-t border-trim pt-6">
@@ -101,15 +102,22 @@ const { content } = Astro.props
     </div>
 
     <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-      {content.topics.itemList.map((item) => (
-        <div class="bg-page-offset border border-trim rounded-xl p-6">
-          <div class:list={["w-10 h-10 rounded-lg flex items-center justify-center mb-4", item.bgColor]} >
-            <Icon icon={item.icon} color={item.color} size={6} />
+      {
+        content.topics.itemList.map(item => (
+          <div class="bg-page-offset border border-trim rounded-xl p-6">
+            <div
+              class:list={[
+                'w-10 h-10 rounded-lg flex items-center justify-center mb-4',
+                item.bgColor,
+              ]}
+            >
+              <Icon icon={item.icon} color={item.color} size={6} />
+            </div>
+            <h3 class="font-bold text-content mb-2">{item.lead}</h3>
+            <p class="text-sm text-content-offset">{item.text}</p>
           </div>
-          <h3 class="font-bold text-content mb-2">{item.lead}</h3>
-          <p class="text-sm text-content-offset">{item.text}</p>
-        </div>
-      ))}
+        ))
+      }
     </div>
   </div>
 </section>
@@ -134,12 +142,13 @@ const { content } = Astro.props
       <div class="p-5 space-y-4 text-page-base/80">
         <p>
           <span class="text-success">##</span>
-          <span class="text-page-base font-bold">{` Deep Dive: The Kubernetes DNS Bug That Wasted 40 Hours`}</span>
+          <span class="text-page-base font-bold"
+            >{` Deep Dive: The Kubernetes DNS Bug That Wasted 40 Hours`}</span
+          >
         </p>
         <p class="text-page-base/60 text-xs leading-relaxed pl-4 border-l-2 border-page-base/20">
-          How the default ndots:5 setting caused cascading DNS failures under
-          load, the misleading metrics that sent us down the wrong path, and the
-          two-line fix that resolved it.
+          How the default ndots:5 setting caused cascading DNS failures under load, the misleading
+          metrics that sent us down the wrong path, and the two-line fix that resolved it.
         </p>
 
         <p>
@@ -147,9 +156,15 @@ const { content } = Astro.props
           <span class="text-page-base font-bold">{` Quick Wins`}</span>
         </p>
         <div class="pl-4 space-y-1 text-xs text-page-base/60">
-          <p><span class="text-spotlight">-</span> Terraform state backup one-liner before every apply</p>
-          <p><span class="text-spotlight">-</span> PromQL query to find unused Grafana dashboards</p>
-          <p><span class="text-spotlight">-</span> Pre-commit hook for secrets scanning in monorepos</p>
+          <p>
+            <span class="text-spotlight">-</span> Terraform state backup one-liner before every apply
+          </p>
+          <p>
+            <span class="text-spotlight">-</span> PromQL query to find unused Grafana dashboards
+          </p>
+          <p>
+            <span class="text-spotlight">-</span> Pre-commit hook for secrets scanning in monorepos
+          </p>
         </div>
 
         <p>
@@ -167,8 +182,8 @@ const { content } = Astro.props
           <span class="text-page-base font-bold">{` Try This Month`}</span>
         </p>
         <p class="text-page-base/60 text-xs pl-4">
-          Check your CoreDNS cache hit rate. Below 80%? You're hammering upstream
-          resolvers unnecessarily.
+          Check your CoreDNS cache hit rate. Below 80%? You're hammering upstream resolvers
+          unnecessarily.
         </p>
 
         <p class="text-page-base/40 text-xs pt-2 border-t border-page-base/10">
diff --git a/src/components/Pages/Offline/index.astro b/src/components/Pages/Offline/index.astro
index bf0c99a88..e50d9cd40 100644
--- a/src/components/Pages/Offline/index.astro
+++ b/src/components/Pages/Offline/index.astro
@@ -44,15 +44,15 @@ const { content } = Astro.props
 >
   <h2 class="text-2xl font-semibold text-page-inverse mb-6" id="offline-actions-title">
     {content.items.label}
-    <HeadingAnchor href={"#offline-actions-title"} />
+    <HeadingAnchor href={'#offline-actions-title'} />
   </h2>
   <List
     variant="two-column-icon-list"
     items={content.items.cards}
     classes={{
-      li: "min-w-0",
-      content: "min-w-0",
-      text: "wrap-break-word",
+      li: 'min-w-0',
+      content: 'min-w-0',
+      text: 'wrap-break-word',
     }}
   />
 </section>
@@ -64,20 +64,22 @@ const { content } = Astro.props
 >
   <h2 class="text-2xl font-semibold text-content-inverse mb-3" id="offline-company-title">
     {content.about.heading}
-    <HeadingAnchor href={"#offline-company-title"} />
+    <HeadingAnchor href={'#offline-company-title'} />
   </h2>
   <p class="text-content-inverse/70 leading-relaxed mb-6">
     {companyContactData.description}
   </p>
   <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 text-center">
-    {content.about.items.map((item) => {
-      return (
-        <div>
-          <div class="text-3xl font-bold text-secondary-offset">{item.stat}</div>
-          <div class="text-sm text-content-inverse/60">{item.area}</div>
-        </div>
-      )
-    })}
+    {
+      content.about.items.map(item => {
+        return (
+          <div>
+            <div class="text-3xl font-bold text-secondary-offset">{item.stat}</div>
+            <div class="text-sm text-content-inverse/60">{item.area}</div>
+          </div>
+        )
+      })
+    }
   </div>
 </section>
 
@@ -88,33 +90,33 @@ const { content } = Astro.props
 >
   <h2 class="text-xl font-semibold text-page-inverse mb-5" id="offline-contact-title">
     {content.close}
-    <HeadingAnchor href={"#offline-contact-title"} />
+    <HeadingAnchor href={'#offline-contact-title'} />
   </h2>
   <div class="grid sm:grid-cols-2 gap-4">
     <div class="flex min-w-0 items-center gap-3 bg-content-inverse rounded-lg p-4 shadow-sm">
-      <div class="shrink-0 w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-2">
-        <Icon
-          icon="email"
-          color="primary-offset"
-          size={6}
-        />
+      <div
+        class="shrink-0 w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-2"
+      >
+        <Icon icon="email" color="primary-offset" size={6} />
       </div>
       <div class="min-w-0">
         <div class="text-sm text-content-offset font-medium uppercase tracking-wide">Email</div>
-        <div class="text-md text-page-inverse font-semibold break-all">{companyContactData.email}</div>
+        <div class="text-md text-page-inverse font-semibold break-all">
+          {companyContactData.email}
+        </div>
       </div>
     </div>
     <div class="flex min-w-0 items-center gap-3 bg-content-inverse rounded-lg p-4 shadow-sm">
-      <div class="shrink-0 w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-2">
-        <Icon
-          icon="globe"
-          color="primary-offset"
-          size={6}
-        />
+      <div
+        class="shrink-0 w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-2"
+      >
+        <Icon icon="globe" color="primary-offset" size={6} />
       </div>
       <div class="min-w-0">
         <div class="text-sm text-content-offset font-medium uppercase tracking-wide">Website</div>
-        <div class="text-md text-page-inverse font-semibold break-all">{companyContactData.url.replace('https://', '')}</div>
+        <div class="text-md text-page-inverse font-semibold break-all">
+          {companyContactData.url.replace('https://', '')}
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/components/Pages/Privacy/index.astro b/src/components/Pages/Privacy/index.astro
index 0acd32650..4f6f2489f 100644
--- a/src/components/Pages/Privacy/index.astro
+++ b/src/components/Pages/Privacy/index.astro
@@ -127,7 +127,7 @@ export type Props = {
         lead: string
         text: string
         link: string
-      },
+      }
       card2: {
         lead: string
         text: string
@@ -161,9 +161,13 @@ for (const [index, item] of content.nav.items.entries()) {
 
 <div class="mx-auto max-w-full px-4 py-2 sm:px-6 md:py-4 lg:px-8">
   <nav aria-label="Privacy policy sections" class="bg-content-active rounded-xl p-6 mb-8">
-    <div class="mb-3 flex flex-col items-start gap-3 pl-2 md:flex-row md:items-center md:justify-between">
+    <div
+      class="mb-3 flex flex-col items-start gap-3 pl-2 md:flex-row md:items-center md:justify-between"
+    >
       <p class="text-md font-semibold text-content-inverse mb-0">{content.nav.title}</p>
-      <div class="flex w-full flex-wrap items-center justify-center gap-3 md:w-auto md:flex-nowrap md:justify-end">
+      <div
+        class="flex w-full flex-wrap items-center justify-center gap-3 md:w-auto md:flex-nowrap md:justify-end"
+      >
         <a
           href="/consent"
           class="text-content-inverse text-center underline decoration-content-inverse decoration-dotted underline-offset-4 hover:text-content-offset hover:decoration-content-offset focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 md:mr-8"
@@ -189,7 +193,9 @@ for (const [index, item] of content.nav.items.entries()) {
               {label}
             </a>
             {showSeparator && (
-              <span class="mx-2 text-content-inverse" aria-hidden="true">·</span>
+              <span class="mx-2 text-content-inverse" aria-hidden="true">
+                ·
+              </span>
             )}
           </>
         ))
@@ -199,25 +205,21 @@ for (const [index, item] of content.nav.items.entries()) {
 
   <div class="prose prose-lg w-full max-w-none min-w-0 wrap-break-word text-content">
     <section class="mb-12" aria-labelledby="privacy-information-we-collect-title">
-      <h2 class="text-page-inverse mb-0 sm:mb-6 mt-0 sm:mt-12" id="privacy-information-we-collect-title">
+      <h2
+        class="text-page-inverse mb-0 sm:mb-6 mt-0 sm:mt-12"
+        id="privacy-information-we-collect-title"
+      >
         {content.collection.title}
-        <HeadingAnchor href={"#privacy-information-we-collect-title"} />
+        <HeadingAnchor href={'#privacy-information-we-collect-title'} />
       </h2>
 
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         {
           content.collection.cards.map((card: CollectionCard) => (
             <div class="text-content-active bg-page-offset rounded-xl px-8 sm:pt-8 pb-4 shadow-md">
-              <h3 class="text-page-inverse mb-4 mt-0">
-                {card.title}
-              </h3>
-              <p class="mb-2">
-                {card.description}
-              </p>
-              <List
-                variant="plain-icon-list"
-                items={card.listItems}
-              />
+              <h3 class="text-page-inverse mb-4 mt-0">{card.title}</h3>
+              <p class="mb-2">{card.description}</p>
+              <List variant="plain-icon-list" items={card.listItems} />
               {card.trailer && (
                 <p class="mt-6 mb-0 text-sm italic text-center text-content-offset">
                   {card.trailer}
@@ -232,16 +234,19 @@ for (const [index, item] of content.nav.items.entries()) {
     <section class="mb-12" aria-labelledby="privacy-how-we-use-title">
       <h2 class="text-page-inverse mb-6" id="privacy-how-we-use-title">
         {content.usage.title}
-        <HeadingAnchor href={"#privacy-how-we-use-title"} />
+        <HeadingAnchor href={'#privacy-how-we-use-title'} />
       </h2>
 
       <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
         {
-          content.usage.listItems.map((item) => (
+          content.usage.listItems.map(item => (
             <div class="text-content-active bg-primary-inverse rounded-xl px-8 pt-8 pb-4 shadow-md">
               <div class="flex items-center mb-4">
                 <div
-                  class:list={["w-12 h-12 rounded-lg flex items-center justify-center mr-4", item.background]}
+                  class:list={[
+                    'w-12 h-12 rounded-lg flex items-center justify-center mr-4',
+                    item.background,
+                  ]}
                 >
                   <Icon
                     icon={item.icon}
@@ -251,9 +256,7 @@ for (const [index, item] of content.nav.items.entries()) {
                 </div>
                 <h3 class="text-page-inverse text-xl font-semibold mt-0 mb-0">{item.title}</h3>
               </div>
-              <p class="text-content">
-                {item.description}
-              </p>
+              <p class="text-content">{item.description}</p>
             </div>
           ))
         }
@@ -261,24 +264,14 @@ for (const [index, item] of content.nav.items.entries()) {
     </section>
 
     <section class="mb-12" aria-labelledby="privacy-how-we-share-title">
-      <h2
-        class="text-page-inverse mb-6"
-        id="privacy-how-we-share-title"
-      >
+      <h2 class="text-page-inverse mb-6" id="privacy-how-we-share-title">
         {content.sharing.title}
-        <HeadingAnchor href={"#privacy-how-we-share-title"} />
+        <HeadingAnchor href={'#privacy-how-we-share-title'} />
       </h2>
-      <div
-        class="bg-yellow-50 border border-yellow-200 rounded-xl px-8 pt-8 pb-4"
-      >
+      <div class="bg-yellow-50 border border-yellow-200 rounded-xl px-8 pt-8 pb-4">
         <div class="flex items-start">
           <div class="shrink-0">
-            <Icon
-              icon="warning"
-              color="gray-700"
-              classes="mt-1"
-              size={8}
-            />
+            <Icon icon="warning" color="gray-700" classes="mt-1" size={8} />
           </div>
           <div class="text-gray-700 ml-4">
             <h3 class="text-gray-700 mb-2 mt-1.5">{content.sharing.subtitle}</h3>
@@ -287,7 +280,7 @@ for (const [index, item] of content.nav.items.entries()) {
               variant="colored-marker-list"
               items={content.sharing.listItems}
               classes={{
-                ul: "text-gray-700",
+                ul: 'text-gray-700',
               }}
             />
           </div>
@@ -296,33 +289,27 @@ for (const [index, item] of content.nav.items.entries()) {
     </section>
 
     <section class="mb-12" aria-labelledby="privacy-data-security-title">
-      <h2
-        class="text-page-inverse mb-6"
-        id="privacy-data-security-title"
-      >
+      <h2 class="text-page-inverse mb-6" id="privacy-data-security-title">
         {content.security.title}
-        <HeadingAnchor href={"#privacy-data-security-title"} />
+        <HeadingAnchor href={'#privacy-data-security-title'} />
       </h2>
       <p class="text-content mb-6">
         {content.security.description}
       </p>
       <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
         {
-          content.security.cards.map((item) => (
+          content.security.cards.map(item => (
             <div class="text-center">
               <div
-                class:list={["w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4", item.background]}
+                class:list={[
+                  'w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4',
+                  item.background,
+                ]}
               >
-                <Icon
-                  icon={item.icon}
-                  color={item.color}
-                  size={8}
-                />
+                <Icon icon={item.icon} color={item.color} size={8} />
               </div>
               <h3 class="text-gray-700 text-xl font-semibold mb-2">{item.lead}</h3>
-              <p class="text-gray-700 text-sm">
-                {item.text}
-              </p>
+              <p class="text-gray-700 text-sm">{item.text}</p>
             </div>
           ))
         }
@@ -330,12 +317,9 @@ for (const [index, item] of content.nav.items.entries()) {
     </section>
 
     <section class="mb-12" aria-labelledby="privacy-your-rights-title">
-      <h2
-        class="text-page-inverse mb-6"
-        id="privacy-your-rights-title"
-      >
+      <h2 class="text-page-inverse mb-6" id="privacy-your-rights-title">
         {content.rights.title}
-        <HeadingAnchor href={"#privacy-your-rights-title"} />
+        <HeadingAnchor href={'#privacy-your-rights-title'} />
       </h2>
       <div class="bg-white rounded-xl p-6 shadow-md">
         <p class="text-gray-700 mb-6 mt-2">
@@ -343,14 +327,10 @@ for (const [index, item] of content.nav.items.entries()) {
         </p>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
           {
-            content.rights.cards.map((item) => (
+            content.rights.cards.map(item => (
               <div class="flex items-start">
                 <div class="mt-1 mr-3 shrink-0">
-                  <Icon
-                    icon={item.icon}
-                    color={item.color}
-                    size={6}
-                  />
+                  <Icon icon={item.icon} color={item.color} size={6} />
                 </div>
                 <div class="pl-1">
                   <h3 class="text-gray-700 text-lg font-semibold mb-2 mt-0.5">{item.lead}</h3>
@@ -364,12 +344,9 @@ for (const [index, item] of content.nav.items.entries()) {
     </section>
 
     <section class="mb-12" aria-labelledby="privacy-cookies-and-tracking-title">
-      <h2
-        class="text-page-inverse mb-0 sm:mb-6"
-        id="privacy-cookies-and-tracking-title"
-      >
+      <h2 class="text-page-inverse mb-0 sm:mb-6" id="privacy-cookies-and-tracking-title">
         {content.cookies.title}
-        <HeadingAnchor href={"#privacy-cookies-and-tracking-title"} />
+        <HeadingAnchor href={'#privacy-cookies-and-tracking-title'} />
       </h2>
       <p class="text-content mb-6">
         {content.cookies.description}
@@ -382,21 +359,18 @@ for (const [index, item] of content.nav.items.entries()) {
           variant="colored-marker-list"
           items={content.cookies.listItems}
           classes={{
-            em: "text-gray-700",
-            li: "[&_span]:text-content-offset",
-            ul: "pl-6",
+            em: 'text-gray-700',
+            li: '[&_span]:text-content-offset',
+            ul: 'pl-6',
           }}
         />
       </div>
     </section>
 
     <section class="mb-12" aria-labelledby="privacy-storage-title">
-      <h2
-        class="text-page-inverse mb-6"
-        id="privacy-storage-title"
-      >
+      <h2 class="text-page-inverse mb-6" id="privacy-storage-title">
         {content.storage.title}
-        <HeadingAnchor href={"#privacy-storage-title"} />
+        <HeadingAnchor href={'#privacy-storage-title'} />
       </h2>
       <p class="text-content mb-6">
         {content.storage.description}
@@ -417,21 +391,19 @@ for (const [index, item] of content.nav.items.entries()) {
             }[]}
           />
         </div>
-        <div
-          class="mt-8 bg-blue-50 border border-blue-200 rounded-lg px-4 pt-0 pb-0"
-        >
-          <p class="text-sm text-content-offset leading-relaxed" set:html={content.storage.trailer}></p>
+        <div class="mt-8 bg-blue-50 border border-blue-200 rounded-lg px-4 pt-0 pb-0">
+          <p
+            class="text-sm text-content-offset leading-relaxed"
+            set:html={content.storage.trailer}
+          />
         </div>
       </div>
     </section>
 
     <section class="mb-12" aria-labelledby="privacy-error-monitoring-title">
-      <h2
-        class="text-page-inverse mb-6"
-        id="privacy-error-monitoring-title"
-      >
+      <h2 class="text-page-inverse mb-6" id="privacy-error-monitoring-title">
         {content.monitoring.title}
-        <HeadingAnchor href={"#privacy-error-monitoring-title"} />
+        <HeadingAnchor href={'#privacy-error-monitoring-title'} />
       </h2>
       <p class="text-content-offset mb-6">
         {content.monitoring.description}
@@ -442,32 +414,24 @@ for (const [index, item] of content.nav.items.entries()) {
         </h3>
         <List
           variant="colored-marker-list"
-          items={content.monitoring.list1.listItems.map((item) => ({
+          items={content.monitoring.list1.listItems.map(item => ({
             lead: item.heading,
             text: item.text,
-            color: "bg-blue-600",
+            color: 'bg-blue-600',
           }))}
           classes={{
-            ul: "sm:pl-6",
-            li: "text-gray-700",
+            ul: 'sm:pl-6',
+            li: 'text-gray-700',
           }}
         />
       </div>
 
       <div class="bg-green-50 rounded-xl px-8 py-6 mb-6">
         <h3 class="text-lg font-semibold text-gray-700 mb-4 mt-0 flex items-center">
-          <Icon
-            icon={"shield"}
-            color={"text-green-600"}
-            size={6}
-            classes={"mr-3"}
-          />
+          <Icon icon={'shield'} color={'text-green-600'} size={6} classes={'mr-3'} />
           {content.monitoring.list2.lead}
         </h3>
-        <List
-          variant="check-icons-list"
-          items={content.monitoring.list2.listItems}
-        />
+        <List variant="check-icons-list" items={content.monitoring.list2.listItems} />
       </div>
       <div class="bg-gray-50 rounded-xl p-6">
         <h3 class="text-lg font-semibold text-gray-700 mb-3 mt-0">
@@ -485,7 +449,7 @@ for (const [index, item] of content.nav.items.entries()) {
         id="privacy-contact-us-title"
       >
         {content.contact.title}
-        <HeadingAnchor href={"#privacy-contact-us-title"} />
+        <HeadingAnchor href={'#privacy-contact-us-title'} />
       </h2>
       <div class="bg-blue-50 rounded-xl p-6">
         <p class="text-gray-600 mt-0 mb-6">
@@ -496,11 +460,7 @@ for (const [index, item] of content.nav.items.entries()) {
             <div
               class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center ml-3 mt-1 shrink-0 md:ml-6"
             >
-              <Icon
-                icon={"email"}
-                color={"blue-600"}
-                size={8}
-              />
+              <Icon icon={'email'} color={'blue-600'} size={8} />
             </div>
             <div class="ml-4 min-w-0 md:ml-6">
               <h3 class="text-lg font-semibold text-blue-600 mt-0 mb-1">
@@ -518,11 +478,7 @@ for (const [index, item] of content.nav.items.entries()) {
             <div
               class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center ml-3 mt-1 shrink-0 md:ml-6"
             >
-              <Icon
-                icon={"location"}
-                color={"blue-600"}
-                size={8}
-              />
+              <Icon icon={'location'} color={'blue-600'} size={8} />
             </div>
             <div class="ml-4 min-w-0 md:ml-6">
               <h3 class="text-lg font-semibold text-blue-600 mt-0 mb-1">
@@ -558,12 +514,9 @@ for (const [index, item] of content.nav.items.entries()) {
     </section>
 
     <section aria-labelledby="privacy-changes-to-policy-title">
-      <h2
-        class="text-page-inverse mb-6"
-        id="privacy-changes-to-policy-title"
-      >
+      <h2 class="text-page-inverse mb-6" id="privacy-changes-to-policy-title">
         {content.changes.title}
-        <HeadingAnchor href={"#privacy-changes-to-policy-title"} />
+        <HeadingAnchor href={'#privacy-changes-to-policy-title'} />
       </h2>
       <div class="bg-gray-50 rounded-xl px-8 py-2">
         <p class="text-gray-600">
diff --git a/src/components/Pages/Resume/index.astro b/src/components/Pages/Resume/index.astro
index d7bf4f96e..5e1e8cef1 100644
--- a/src/components/Pages/Resume/index.astro
+++ b/src/components/Pages/Resume/index.astro
@@ -34,25 +34,35 @@ const {
 ---
 
 <!doctype html>
-<html lang="en" data-theme="light" class="h-auto min-h-full overflow-y-auto">
+<html
+  lang="en"
+  data-theme="light"
+  class="h-auto min-h-full overflow-y-auto"
+>
   <head>
     <HeadContent pageTitle={pageTitle} pageDescription={pageDescription} path={path} />
+    <style>
+      @page {
+        margin: 2cm;
+      }
+    </style>
   </head>
   <body
     itemtype="http://schema.org/Person"
-    class="h-auto min-h-full overflow-y-auto text-content font-sans leading-6 [font-smoothing:antialiased] bg-page-offset md:flex md:justify-center print:bg-white print:block"
+    class="h-auto min-h-full overflow-y-auto text-content font-sans leading-6 [font-smoothing:antialiased] md:flex md:justify-center print:bg-white"
   >
-    <div class="relative bg-primary-inverse mx-auto w-full max-w-4xl p-6 md:my-10 md:p-12 md:shadow-xl lg:my-14 lg:p-16">
+    {/** Use wrapper to keep resume centered on desktop */}
+    <div class="relative bg-primary-inverse mx-auto w-full max-w-4xl p-6 md:p-12 my-14 lg:p-16 md:shadow-xl print:shadow-none print:p-0 print:my-0">
       <header
         itemscope
         itemref="resumeSubject"
-        class="relative border-b-2 border-trim/10 pb-6 mb-8"
+        class="relative mb-4!"
       >
         <div class="md:absolute md:right-0 md:top-0">
           <Controls />
         </div>
 
-        <div class="">
+        <div>
           <Persona
             givenName={resume.firstName}
             familyName={resume.lastName}
@@ -60,32 +70,32 @@ const {
           />
         </div>
 
-        <div class="mt-1!">
+        <div class="mt-2!">
           <Contact
             contactData={contactData}
-            email={contactData.company.email}
+            email={`info@webstackbuilders.com`}
           />
         </div>
       </header>
 
-      <main class="space-y-8">
-        <div class="border-b-2 border-trim/10">
+      <main class="space-y-4!">
+        <div>
           <Summary summary={resume.summary} />
         </div>
 
-        <div class="">
+        <div>
           <Experience renderedClients={renderedClients} />
         </div>
 
-        <div class="">
+        <div>
           <Skills skills={resume.skills} />
         </div>
 
-        <div class="">
+        <div>
           <Languages languages={resume.languages} />
         </div>
 
-        <div class="">
+        <div>
           <Socials socials={contactData.company.social} />
         </div>
       </main>
diff --git a/src/components/Pages/Resume/partials/Contact.astro b/src/components/Pages/Resume/partials/Contact.astro
index 2c5511f7c..c1af6e2a6 100644
--- a/src/components/Pages/Resume/partials/Contact.astro
+++ b/src/components/Pages/Resume/partials/Contact.astro
@@ -8,53 +8,50 @@ export interface Props {
   email: string
 }
 
-const {
-  contactData,
-  email,
-} = Astro.props as Props
+const { contactData, email } = Astro.props as Props
 
 const resumeLocation = `${contactData.company.city}, ${contactData.company.state}`
 const resumePhoneNumber = formatPhoneNumber(contactData.company.telephoneTollFree)
 ---
 
-<dl
-  class="flex gap-2 text-sm text-content-offset font-medium"
->
+<dl class="flex ml-1 gap-6 text-sm font-medium">
+  {/** Email */}
   <a
     itemprop="email"
     href={`mailto:${email}`}
-    class="flex gap-2 hover:text-primary transition-colors duration-200"
+    class="group flex gap-2 hover:text-note-offset hover:decoration-note-offset transition-colors duration-200 print:no-underline"
   >
-    <dt aria-label="email" class="text-primary-offset">
-      <Icon icon="email-solid" color="content" size={4} />
+    <dt aria-label="email" class="text-content group-hover:text-note-offset mt-0.75">
+      <Icon icon="email-solid" color="inherit" size={4} />
     </dt>
     <dd>{email}</dd>
   </a>
+
+  {/** Location */}
   <a
     id="locationWrapper"
     itemprop="homeLocation"
     itemscope
     href={contactData.company.mapLink}
-    class="flex gap-2 hover:text-primary transition-colors duration-200"
+    class="group flex hover:text-note-offset hover:decoration-note-offset transition-colors duration-200 print:no-underline"
   >
-    <dt aria-label="location" class="text-primary-offset">
-      <Icon icon="location" color="content" size={6} />
+    <dt aria-label="location" class="text-content group-hover:text-note-offset">
+      <Icon icon="location" color="inherit" size={6} />
     </dt>
     <dd id="locationLabel" class="inline">{resumeLocation}</dd>
   </a>
+
+  {/** Telephone */}
   <a
     id="telephoneWrapper"
     itemprop="telephone"
     itemscope
     href={`tel:${contactData.company.telephoneTollFree}`}
-    class="flex gap-2 hover:text-primary transition-colors duration-200"
+    class="group flex gap-2.5 hover:text-note-offset hover:decoration-note-offset transition-colors duration-200 print:no-underline"
   >
-    <dt
-      aria-label="telephone"
-      class="text-primary-offset"
-    >
-      <Icon icon="telephone" color="content" size={6} />
+    <dt aria-label="telephone" class="text-content group-hover:text-note-offset">
+      <Icon icon="telephone" color="inherit" size={6} />
     </dt>
-    <dd id="telephoneLabel" class="inline">{resumePhoneNumber}</dd>
+    <dd id="telephoneLabel" class="inline">1 {resumePhoneNumber}</dd>
   </a>
-</dl>
\ No newline at end of file
+</dl>
diff --git a/src/components/Pages/Resume/partials/Controls.astro b/src/components/Pages/Resume/partials/Controls.astro
index 1be1ed1ed..214d47f57 100644
--- a/src/components/Pages/Resume/partials/Controls.astro
+++ b/src/components/Pages/Resume/partials/Controls.astro
@@ -7,8 +7,8 @@ import Tooltip from '@components/Tooltip/index.astro'
   <li>
     <Tooltip text="Download PDF">
       <a
-        class="inline-flex h-7 w-7 items-center justify-center text-primary-offset hover:text-primary transition-colors duration-200"
-        href="pdf/resume.pdf"
+        class="inline-flex h-7 w-7 items-center justify-center text-gray-600 hover:text-gray-400 transition-colors duration-200"
+        href="/pdf/resume.pdf"
         aria-label="Download PDF"
       >
         <Icon icon="download" color="inherit" size={7} />
@@ -18,7 +18,7 @@ import Tooltip from '@components/Tooltip/index.astro'
   <li>
     <Tooltip text="Print Resume">
       <button
-        class="inline-flex h-7 w-7 cursor-pointer items-center justify-center appearance-none border-0 bg-transparent p-0 leading-none text-primary-offset hover:text-primary transition-colors duration-200"
+        class="inline-flex h-7 w-7 cursor-pointer items-center justify-center appearance-none border-0 bg-transparent p-0 leading-none text-gray-600 hover:text-gray-400 transition-colors duration-200"
         onclick="window.print()"
         aria-label="Print Resume"
       >
@@ -26,4 +26,4 @@ import Tooltip from '@components/Tooltip/index.astro'
       </button>
     </Tooltip>
   </li>
-</ul>
\ No newline at end of file
+</ul>
diff --git a/src/components/Pages/Resume/partials/Experience.astro b/src/components/Pages/Resume/partials/Experience.astro
index d1fc825a9..bfe95688f 100644
--- a/src/components/Pages/Resume/partials/Experience.astro
+++ b/src/components/Pages/Resume/partials/Experience.astro
@@ -13,28 +13,30 @@ const { renderedClients } = Astro.props as Props
 ---
 
 <section id="experience">
-  <h2
-    class="text-xs font-bold tracking-widest text-primary uppercase mb-4 border-b-2 border-trim/10"
-  >
-    Experience
+  <h2 class="text-sm font-mono font-bold tracking-widest text-content-offset print:text-content uppercase p-3 border-2 border-dashed border-gray-400 rounded-md">
+    Past Clients
   </h2>
-  <div class="space-y-8">
+  <ul class="mt-4!">
     {
       renderedClients.map(({ client, Content }: RenderedClient, index: number) => {
         const location = splitLocation(client.data.location)
         return (
-          <div
+          <li
             id={`experienceItem-${index + 1}`}
-            class="flex flex-col gap-1.5"
+            class:list={[
+              'flex flex-col gap-1.5 print:block print:space-y-1.5 print:break-inside-auto mb-6 last:mb-0',
+              { 'print:break-before-page': index === renderedClients.length - 1 },
+            ]}
             itemprop="worksFor"
             itemscope
             itemref="resumeSubject"
             itemtype="http://schema.org/Organization"
           >
             <div class="flex flex-col md:flex-row md:items-baseline md:justify-between">
+              {/** Job Title */}
               <h3
                 id={`role-${index + 1}`}
-                class="text-xl font-bold text-content-active"
+                class="text-xl font-bold text-primary-offset"
                 itemprop="Role"
                 itemref={`experienceItem-${index + 1}`}
                 itemscope
@@ -44,7 +46,8 @@ const { renderedClients } = Astro.props as Props
                   {client.data.role ?? client.data.businessType ?? client.data.displayName}
                 </span>
               </h3>
-              <div class="text-sm font-medium text-content-offset mt-0.5 md:mt-0 flex gap-1.5 items-center">
+              {/** Start and End Dates */}
+              <div class="text-md font-medium text-content-offset mt-0.5 flex gap-1.5 items-center">
                 <time
                   itemprop="startDate"
                   itemtype="http://schema.org/startDate"
@@ -62,35 +65,38 @@ const { renderedClients } = Astro.props as Props
                 </time>
               </div>
             </div>
-            <div class="text-base font-semibold text-primary-offset flex flex-wrap items-center gap-x-2 gap-y-1 print:text-sm">
-              <span itemprop="legalName">{client.data.displayName}</span>
+            {/** Company Name and Location */}
+            <div class="text-primary-offset flex flex-wrap items-center gap-x-3 gap-y-1">
+              <a
+                class="inline-flex items-center text-danger-offset decoration-danger-offset transition-colors hover:text-danger hover:decoration-danger font-medium mb-1 print:text-content print:decoration-none"
+                href={client.data.website ?? ''}
+                itemprop="location"
+                itemscope
+                itemtype="http://schema.org/PostalAddress"
+              >
+                <span itemprop="legalName" class="font-semibold text-lg text-danger-offset">
+                  {client.data.displayName}
+                </span>
+              </a>
               {client.data.location && (
-                <>
-                  <span class="text-trim/30 select-none">&bull;</span>
-                  <a
-                    class="inline-flex items-center gap-1 hover:text-primary transition-colors text-content-offset font-medium"
-                    href={client.data.website ?? ''}
-                    itemprop="location"
-                    itemscope
-                    itemtype="http://schema.org/PostalAddress"
-                  >
-                    <Icon icon="location" color="content" size={6} />
-                    <span>
-                      <span itemprop="addressLocality">{location.locality}</span>
-                      {location.region && (
-                        <>, <span itemprop="addressRegion">{location.region}</span></>
-                      )}
-                    </span>
-                  </a>
-                </>
+                <div class="flex">
+                  <Icon icon="location" color="inherit" size={5} />
+                  <span>
+                    <span itemprop="addressLocality">{location.locality}</span>,
+                    <span itemprop="addressRegion">{location.region}</span>
+                  </span>
+                </div>
               )}
             </div>
-            <div class="experienceDetailContent mt-3" itemprop="description">
+            <div class="experienceDetailContent" itemprop="description">
               <Content components={{ List, ListItem }} />
             </div>
-          </div>
+            {index < renderedClients.length - 1 && (
+              <div aria-hidden="true" class="mt-4 border-b-2 border-dashed border-gray-400"></div>
+            )}
+          </li>
         )
       })
     }
-  </div>
-</section>
\ No newline at end of file
+  </ul>
+</section>
diff --git a/src/components/Pages/Resume/partials/Languages.astro b/src/components/Pages/Resume/partials/Languages.astro
index cc5aa63c1..60e5779ce 100644
--- a/src/components/Pages/Resume/partials/Languages.astro
+++ b/src/components/Pages/Resume/partials/Languages.astro
@@ -10,13 +10,15 @@ const { languages } = Astro.props as Props
 
 <section
   id="languages"
-  class="mt-8"
+  class="mt-6"
   itemscope
   itemref="resumeSubject"
   itemtype="http://schema.org/ItemList"
 >
-  <h2 class="text-xs font-bold tracking-widest text-primary uppercase mb-4 border-b-2 border-trim/10 pb-2">Languages</h2>
-  <ul class="flex flex-wrap gap-4 text-sm font-medium text-content-offset">
+  <h2 class="text-sm font-mono font-bold tracking-widest text-content-offset print:text-content uppercase p-3 border-2 border-dashed border-gray-400 rounded-md">
+    Languages
+  </h2>
+  <ul class="flex flex-wrap justify-evenly text-sm font-medium text-content-offset mt-4">
     {
       languages.map((language: (typeof languages)[number]) => (
         <li
@@ -31,4 +33,4 @@ const { languages } = Astro.props as Props
       ))
     }
   </ul>
-</section>
\ No newline at end of file
+</section>
diff --git a/src/components/Pages/Resume/partials/Persona.astro b/src/components/Pages/Resume/partials/Persona.astro
index feb2cd848..fdb313fe0 100644
--- a/src/components/Pages/Resume/partials/Persona.astro
+++ b/src/components/Pages/Resume/partials/Persona.astro
@@ -5,23 +5,16 @@ export interface Props {
   title: string
 }
 
-const {
-  familyName,
-  givenName,
-  title,
-} = Astro.props as Props
+const { familyName, givenName, title } = Astro.props as Props
 ---
 
-<h1
-  itemprop="name"
-  class="text-4xl tracking-tight text-primary"
->
+<h1 itemprop="name" class="text-4xl tracking-tight text-primary-offset print:text-content">
   <span itemprop="givenName">{givenName}</span>
   <span itemprop="familyName">{familyName}</span>
 </h1>
 <div
-  class="text-xl font-medium text-danger-offset mt-1 tracking-wide"
+  class="text-2xl font-semibold text-danger-offset mt-1 tracking-wide print:text-content"
   itemprop="jobTitle"
 >
   {title}
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/Pages/Resume/partials/Skills.astro b/src/components/Pages/Resume/partials/Skills.astro
index 29edd75f6..7a031057f 100644
--- a/src/components/Pages/Resume/partials/Skills.astro
+++ b/src/components/Pages/Resume/partials/Skills.astro
@@ -8,22 +8,24 @@ export interface Props {
 const { skills } = Astro.props as Props
 ---
 
-<section class="mt-8" itemscope itemref="resumeSubject" itemtype="http://schema.org/ItemList">
-  <h2 class="text-xs font-bold tracking-widest text-primary uppercase mb-4 border-b-2 border-trim/10 pb-2">
+<section class="mt-6" itemscope itemref="resumeSubject" itemtype="http://schema.org/ItemList">
+  <h2 class="text-sm font-mono font-bold tracking-widest text-content-offset print:text-content uppercase p-3 border-2 border-dashed border-gray-400 rounded-md">
     Skills
   </h2>
-  <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
-    {skills.map(skill => (
-      <div
-        class="flex flex-col"
-        itemref="resumeSubject"
-        itemscope
-        itemprop="knowsAbout"
-        itemtype="http://schema.org/knowsAbout"
-      >
-        <h3 class="font-bold text-content-active text-sm mb-1">{skill.lead}</h3>
-        <p class="text-sm text-content-offset leading-relaxed print:text-xs">{skill.text}</p>
-      </div>
-    ))}
-  </div>
-</section>
\ No newline at end of file
+  <ul class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4 mx-2 mt-4">
+    {
+      skills.map(skill => (
+        <li
+          class="flex flex-col"
+          itemref="resumeSubject"
+          itemscope
+          itemprop="knowsAbout"
+          itemtype="http://schema.org/knowsAbout"
+        >
+          <h3 class="text-primary-offset font-bold text-content-active text-base mb-1">{skill.lead}</h3>
+          <p class="text-sm text-content-offset leading-relaxed">{skill.text}</p>
+        </li>
+      ))
+    }
+  </ul>
+</section>
diff --git a/src/components/Pages/Resume/partials/Socials.astro b/src/components/Pages/Resume/partials/Socials.astro
index 63ff63282..e775a61e9 100644
--- a/src/components/Pages/Resume/partials/Socials.astro
+++ b/src/components/Pages/Resume/partials/Socials.astro
@@ -1,48 +1,54 @@
 ---
 import type { CollectionEntry } from 'astro:content'
-
-type SocialEntry = {
-  label: string
-  url: string
-}
+import Icon from '@components/Icon/index.astro'
 
 export interface Props {
   socials: CollectionEntry<'contactData'>['data']['company']['social']
 }
 
 const { socials } = Astro.props as Props
-
-const socialEntries: SocialEntry[] = [...socials]
-  .sort((left, right) => left.order - right.order)
-  .map(entry => ({
-    label: entry.displayName,
-    url: entry.url,
-  }))
 ---
 
 <section
   id="socialSection"
-  class="mt-8 print:mt-6 print:hidden"
+  class="mt-8 print:mt-6"
   itemscope
   itemref="resumeSubject"
   itemtype="http://schema.org/ItemList"
 >
-  <h2 class="text-xs font-bold tracking-widest text-primary uppercase mb-4 border-b-2 border-trim/10 pb-2 print:border-trim/30 print:mb-3 print:pb-1">SOCIAL</h2>
+  <h2 class="text-sm font-mono font-bold tracking-widest text-content-offset print:text-content uppercase p-3 border-2 border-dashed border-gray-400 rounded-md">
+    Social Profiles
+  </h2>
   {
-    socialEntries.length > 0 ? (
-      <ul id="socialList" class="flex flex-col md:flex-row md:flex-wrap gap-4 md:gap-8">
-        {socialEntries.map((entry: SocialEntry) => (
+    socials.length > 0 ? (
+      <ul id="socialList" class="grid grid-cols-1 md:grid-cols-2 gap-x-2 gap-y-4 mx-4 mt-4">
+        {socials.map((entry) => (
           <li
-            class="text-sm"
             itemref="resumeSubject"
             itemscope
             itemprop="sameAs"
             itemtype="http://schema.org/WebSite"
           >
-            <a class="group inline-flex items-center gap-2 hover:text-primary transition-colors text-content-offset" itemprop="url" title={entry.label} rel="me" href={entry.url}>
-              <span class="font-bold text-content-active group-hover:text-primary transition-colors">{entry.label}</span>
-              <span class="text-trim/30 select-none">&bull;</span>
-              <span class="truncate">{entry.url.replace(/^https?:\/\//, '')}</span>
+            <a
+              class="group flex gap-4 hover:text-primary transition-colors text-content-offset no-underline"
+              itemprop="url"
+              title={entry.displayName}
+              rel="me"
+              href={entry.url}
+            >
+              <span class="mt-1">
+                <Icon icon={entry.iconName} color="trim" size={8} />
+              </span>
+              <span class="flex flex-col leading-5">
+                <div
+                  class="text-base font-bold text-primary-offset group-hover:text-primary transition-colors underline decoration-dotted decoration-primary-offset print:no-underline"
+                >
+                  {entry.displayName}
+                </div>
+                <div class="text-sm truncate no-underline">
+                  {entry.url.replace(/^https?:\/\//, '')}
+                </div>
+              </span>
             </a>
           </li>
         ))}
@@ -51,4 +57,4 @@ const socialEntries: SocialEntry[] = [...socials]
       <p class="text-sm text-content-offset italic">No social profiles available.</p>
     )
   }
-</section>
\ No newline at end of file
+</section>
diff --git a/src/components/Pages/Resume/partials/Summary.astro b/src/components/Pages/Resume/partials/Summary.astro
index 1beed9617..84874d176 100644
--- a/src/components/Pages/Resume/partials/Summary.astro
+++ b/src/components/Pages/Resume/partials/Summary.astro
@@ -7,8 +7,14 @@ const { summary } = Astro.props as Props
 ---
 
 <section itemscope itemref="resumeSubject" itemtype="http://schema.org/ItemList">
-  <h2 class="text-xs font-bold tracking-widest text-primary uppercase">Summary</h2>
-  <p itemprop="description" itemref="resumeSubject" class="text-content leading-relaxed print:text-sm">
+  <h2 class="text-sm font-mono font-bold tracking-widest text-content-offset print:text-content uppercase p-3 border-2 border-dashed border-gray-400 rounded-md">
+    Summary
+  </h2>
+  <p
+    itemprop="description"
+    itemref="resumeSubject"
+    class="text-md text-content leading-relaxed mt-2!"
+  >
     {summary}
   </p>
-</section>
\ No newline at end of file
+</section>
diff --git a/src/components/Pages/Services/client/index.ts b/src/components/Pages/Services/client/index.ts
index 130fff389..ebaded9c6 100644
--- a/src/components/Pages/Services/client/index.ts
+++ b/src/components/Pages/Services/client/index.ts
@@ -8,51 +8,51 @@ import { queryServiceContactLinks } from './selectors'
  * Uses light DOM so Astro-rendered markup remains directly accessible.
  */
 export class ServicesPageElement extends LitElement {
-	static registeredName = 'services-page'
-	private static readonly contactPath = '/contact'
-
-	private static buildContactHref(accountType: string): string {
-		const normalizedAccountType = accountType.trim()
-		if (!normalizedAccountType) {
-			return ServicesPageElement.contactPath
-		}
-
-		return `${ServicesPageElement.contactPath}?type=${encodeURIComponent(normalizedAccountType)}`
-	}
-
-	override connectedCallback() {
-		super.connectedCallback()
-		this.syncContactLinks()
-	}
-
-	private syncContactLinks(): void {
-		const links = queryServiceContactLinks(this)
-
-		for (const link of links) {
-			const accountType = link.dataset['accountType'] ?? ''
-			link.setAttribute('href', ServicesPageElement.buildContactHref(accountType))
-		}
-	}
-
-	protected override createRenderRoot() {
-		return this
-	}
-
-	protected override render() {
-		return nothing
-	}
+  static registeredName = 'services-page'
+  private static readonly contactPath = '/contact'
+
+  private static buildContactHref(accountType: string): string {
+    const normalizedAccountType = accountType.trim()
+    if (!normalizedAccountType) {
+      return ServicesPageElement.contactPath
+    }
+
+    return `${ServicesPageElement.contactPath}?type=${encodeURIComponent(normalizedAccountType)}`
+  }
+
+  override connectedCallback() {
+    super.connectedCallback()
+    this.syncContactLinks()
+  }
+
+  private syncContactLinks(): void {
+    const links = queryServiceContactLinks(this)
+
+    for (const link of links) {
+      const accountType = link.dataset['accountType'] ?? ''
+      link.setAttribute('href', ServicesPageElement.buildContactHref(accountType))
+    }
+  }
+
+  protected override createRenderRoot() {
+    return this
+  }
+
+  protected override render() {
+    return nothing
+  }
 }
 
 export const registerServicesPageWebComponent = async (
-	tagName = ServicesPageElement.registeredName
+  tagName = ServicesPageElement.registeredName
 ): Promise<void> => {
-	defineCustomElement(tagName, ServicesPageElement)
+  defineCustomElement(tagName, ServicesPageElement)
 }
 
 export const registerWebComponent = registerServicesPageWebComponent
 
 export const webComponentModule: WebComponentModule<ServicesPageElement> = {
-	registeredName: ServicesPageElement.registeredName,
-	componentCtor: ServicesPageElement,
-	registerWebComponent,
+  registeredName: ServicesPageElement.registeredName,
+  componentCtor: ServicesPageElement,
+  registerWebComponent,
 }
diff --git a/src/components/Pages/Services/index.astro b/src/components/Pages/Services/index.astro
index df3c77ef1..9f2076f86 100644
--- a/src/components/Pages/Services/index.astro
+++ b/src/components/Pages/Services/index.astro
@@ -79,73 +79,78 @@ const splitH2Sections = (html: string): string[] => {
 
 <services-page class="block" data-testid="services-page-web-component">
   <section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 sm:pt-6 sm:pb-12">
-    {services.length > 0 && (
-      <div class="services-grid grid gap-8 md:grid-cols-2">
-        {services.map((service, i) => {
-          const namespacedHtml = namespaceServiceHeadingAnchors(service.rendered?.html ?? '', service.id)
-          const sections = splitH2Sections(namespacedHtml)
-          const leftSections = sections.slice(0, 2).join('')
-          const rightSections = sections.slice(2, 4).join('')
-          const projectType = service.data.accountType
-          const contactHref = projectType
-            ? `/contact?type=${encodeURIComponent(projectType)}`
-            : '/contact'
-
-          return (
-            <article
-              data-service-card
-              class:list={[
-                'service-card relative flex flex-col rounded-2xl border border-trim overflow-hidden transition-shadow hover:shadow-lg focus-within:shadow-lg',
-                i === 0 ? 'service-card--default' : '',
-              ]}
-            >
-              <a
-                href={contactHref}
-                data-service-contact-link
-                data-account-type={projectType}
-                class="absolute inset-0 z-(--z-raised) no-underline hover:no-underline focus-visible:no-underline focus-visible:outline-none"
-                aria-label={`Contact us about ${service.data.title}`}
-              >
-                <span class="sr-only">Contact me about {service.data.title}</span>
-              </a>
-
-              <div
+    {
+      services.length > 0 && (
+        <div class="services-grid grid gap-8 md:grid-cols-2">
+          {services.map((service, i) => {
+            const namespacedHtml = namespaceServiceHeadingAnchors(
+              service.rendered?.html ?? '',
+              service.id
+            )
+            const sections = splitH2Sections(namespacedHtml)
+            const leftSections = sections.slice(0, 2).join('')
+            const rightSections = sections.slice(2, 4).join('')
+            const projectType = service.data.accountType
+            const contactHref = projectType
+              ? `/contact?type=${encodeURIComponent(projectType)}`
+              : '/contact'
+
+            return (
+              <article
+                data-service-card
                 class:list={[
-                  'service-card-header px-6 py-5 bg-page-offset text-page-inverse',
-                  i === 0 ? 'service-card-header--default' : '',
+                  'service-card relative flex flex-col rounded-2xl border border-trim overflow-hidden transition-shadow hover:shadow-lg focus-within:shadow-lg',
+                  i === 0 ? 'service-card--default' : '',
                 ]}
               >
-                {i === 0 && (
-                  <span class="mb-2 inline-block rounded-full bg-spotlight px-3 py-0.5 text-xs font-bold uppercase tracking-wider text-primary">
-                    Most Popular
-                  </span>
-                )}
-                <h2 class="text-xl font-bold">{service.data.title}</h2>
-                <p
+                <a
+                  href={contactHref}
+                  data-service-contact-link
+                  data-account-type={projectType}
+                  class="absolute inset-0 z-(--z-raised) no-underline hover:no-underline focus-visible:no-underline focus-visible:outline-none"
+                  aria-label={`Contact us about ${service.data.title}`}
+                >
+                  <span class="sr-only">Contact me about {service.data.title}</span>
+                </a>
+
+                <div
                   class:list={[
-                    'service-card-description sm:mt-2 text-me leading-relaxed text-content-offset',
-                    i === 0 ? 'service-card-description--default' : '',
+                    'service-card-header px-6 py-5 bg-page-offset text-page-inverse',
+                    i === 0 ? 'service-card-header--default' : '',
                   ]}
                 >
-                  {service.data.description}
-                </p>
-              </div>
-
-              <div class="service-card-body flex flex-1 flex-col bg-content-inverse px-6 py-6">
-                <div class="grid gap-6 md:grid-cols-2">
-                  <div class="space-y-6 [&_h2]:text-sm [&_h2]:font-semibold [&_h2]:uppercase [&_h2]:tracking-wider [&_h2]:text-page-inverse [&_h2]:mb-2 [&_h2]:mt-0 [&_p]:text-content [&_p]:text-md [&_p]:leading-relaxed [&_ul]:space-y-1.5 [&_ul]:text-md [&_ul]:text-content [&_ul]:list-none [&_ul]:pl-0 [&_li]:flex [&_li]:items-start [&_li]:gap-2 [&_li]:before:content-['✓'] [&_li]:before:text-success [&_li]:before:mt-0.5 [&_li]:before:shrink-0">
-                    <Fragment set:html={leftSections} />
-                  </div>
-                  <div class="space-y-6 [&_h2]:text-sm [&_h2]:font-semibold [&_h2]:uppercase [&_h2]:tracking-wider [&_h2]:text-page-inverse [&_h2]:mb-2 [&_h2]:mt-0 [&_p]:text-content [&_p]:text-md [&_p]:leading-relaxed [&_strong]:text-page-inverse">
-                    <Fragment set:html={rightSections} />
+                  {i === 0 && (
+                    <span class="mb-2 inline-block rounded-full bg-spotlight px-3 py-0.5 text-xs font-bold uppercase tracking-wider text-primary">
+                      Most Popular
+                    </span>
+                  )}
+                  <h2 class="text-xl font-bold">{service.data.title}</h2>
+                  <p
+                    class:list={[
+                      'service-card-description sm:mt-2 text-me leading-relaxed text-content-offset',
+                      i === 0 ? 'service-card-description--default' : '',
+                    ]}
+                  >
+                    {service.data.description}
+                  </p>
+                </div>
+
+                <div class="service-card-body flex flex-1 flex-col bg-content-inverse px-6 py-6">
+                  <div class="grid gap-6 md:grid-cols-2">
+                    <div class="space-y-6 [&_h2]:text-sm [&_h2]:font-semibold [&_h2]:uppercase [&_h2]:tracking-wider [&_h2]:text-page-inverse [&_h2]:mb-2 [&_h2]:mt-0 [&_p]:text-content [&_p]:text-md [&_p]:leading-relaxed [&_ul]:space-y-1.5 [&_ul]:text-md [&_ul]:text-content [&_ul]:list-none [&_ul]:pl-0 [&_li]:flex [&_li]:items-start [&_li]:gap-2 [&_li]:before:content-['✓'] [&_li]:before:text-success [&_li]:before:mt-0.5 [&_li]:before:shrink-0">
+                      <Fragment set:html={leftSections} />
+                    </div>
+                    <div class="space-y-6 [&_h2]:text-sm [&_h2]:font-semibold [&_h2]:uppercase [&_h2]:tracking-wider [&_h2]:text-page-inverse [&_h2]:mb-2 [&_h2]:mt-0 [&_p]:text-content [&_p]:text-md [&_p]:leading-relaxed [&_strong]:text-page-inverse">
+                      <Fragment set:html={rightSections} />
+                    </div>
                   </div>
                 </div>
-              </div>
-            </article>
-          )
-        })}
-      </div>
-    )}
+              </article>
+            )
+          })}
+        </div>
+      )
+    }
   </section>
 </services-page>
 
diff --git a/src/components/Pages/TermsOfUse/index.astro b/src/components/Pages/TermsOfUse/index.astro
index f8340c99e..6db96f6c0 100644
--- a/src/components/Pages/TermsOfUse/index.astro
+++ b/src/components/Pages/TermsOfUse/index.astro
@@ -56,14 +56,16 @@ function slugify(text: string): string {
   <div class="space-y-12 mt-6">
     {
       content.sections.map((section: Section) => {
-        const meta = sectionMeta[section.order] ?? { icon: "info" }
+        const meta = sectionMeta[section.order] ?? { icon: 'info' }
         const sectionId = `terms-${slugify(section.header)}`
 
         return (
           <section aria-labelledby={sectionId}>
             <div class="flex items-center gap-4 sm:ml-12 mb-4">
               <div
-                class:list={["w-10 h-10 rounded-lg flex items-center justify-center shrink-0 bg-page-inverse"]}
+                class:list={[
+                  'w-10 h-10 rounded-lg flex items-center justify-center shrink-0 bg-page-inverse',
+                ]}
               >
                 <Icon icon={meta.icon} color="content-inverse" size={5} />
               </div>
@@ -92,4 +94,4 @@ function slugify(text: string): string {
       })
     }
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/QrCode/__tests__/index.spec.ts b/src/components/QrCode/__tests__/index.spec.ts
index f8a41a767..4b40feadb 100644
--- a/src/components/QrCode/__tests__/index.spec.ts
+++ b/src/components/QrCode/__tests__/index.spec.ts
@@ -53,4 +53,4 @@ describe('QrCode (Astro)', () => {
     expect(root?.getAttribute('aria-label')).toContain('https://example.com/contact')
     expect(caption?.textContent).toContain('https://example.com/contact')
   })
-})
\ No newline at end of file
+})
diff --git a/src/components/QrCode/index.astro b/src/components/QrCode/index.astro
index 6a6de6b16..8a5926a9f 100644
--- a/src/components/QrCode/index.astro
+++ b/src/components/QrCode/index.astro
@@ -2,8 +2,8 @@
 import { renderQrCodeSvg } from './server/index'
 
 interface Props {
-	data?: string
-	isHidden?: boolean
+  data?: string
+  isHidden?: boolean
 }
 
 const { data, isHidden = true } = Astro.props
@@ -11,18 +11,17 @@ const qrData = data ?? new URL(Astro.url.pathname, Astro.site ?? Astro.url).toSt
 const qrSvg = await renderQrCodeSvg({ data: qrData })
 ---
 
-
 <figure
-	class:list={[
-		'not-prose mx-auto my-8 flex w-fit flex-col items-center print:block print:break-inside-avoid',
-		isHidden && 'hidden',
-	]}
-	data-qr-code
-	role="img"
-	aria-label={`QR code for ${qrData}`}
+  class:list={[
+    'not-prose mx-auto my-8 flex w-fit flex-col items-center print:block print:break-inside-avoid',
+    isHidden && 'hidden',
+  ]}
+  data-qr-code
+  role="img"
+  aria-label={`QR code for ${qrData}`}
 >
-	<Fragment set:html={qrSvg} />
-	<figcaption class="sr-only">
-		{qrData}
-	</figcaption>
+  <Fragment set:html={qrSvg} />
+  <figcaption class="sr-only">
+    {qrData}
+  </figcaption>
 </figure>
diff --git a/src/components/QrCode/server/index.ts b/src/components/QrCode/server/index.ts
index 1f526c0d7..36b2b4966 100644
--- a/src/components/QrCode/server/index.ts
+++ b/src/components/QrCode/server/index.ts
@@ -66,121 +66,123 @@ const LOGO_SVG_MARKUP = `<svg
 </svg>`
 
 export interface RenderQrCodeSvgOptions {
-	data: string
-	size?: number
+  data: string
+  size?: number
 }
 
 const parseLogoViewBox = (viewBox: null | string): { height: number; width: number } => {
-	if (!viewBox) {
-		return {
-			height: DEFAULT_LOGO_HEIGHT,
-			width: DEFAULT_LOGO_WIDTH,
-		}
-	}
-
-	const parts = viewBox
-		.trim()
-		.split(/\s+/)
-		.map(value => Number(value))
-
-	const width = parts[2] ?? Number.NaN
-	const height = parts[3] ?? Number.NaN
-
-	if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
-		return {
-			height: DEFAULT_LOGO_HEIGHT,
-			width: DEFAULT_LOGO_WIDTH,
-		}
-	}
-
-	return { height, width }
+  if (!viewBox) {
+    return {
+      height: DEFAULT_LOGO_HEIGHT,
+      width: DEFAULT_LOGO_WIDTH,
+    }
+  }
+
+  const parts = viewBox
+    .trim()
+    .split(/\s+/)
+    .map(value => Number(value))
+
+  const width = parts[2] ?? Number.NaN
+  const height = parts[3] ?? Number.NaN
+
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+    return {
+      height: DEFAULT_LOGO_HEIGHT,
+      width: DEFAULT_LOGO_WIDTH,
+    }
+  }
+
+  return { height, width }
 }
 
 const createLogoExtension = (logoSvgMarkup: string) => {
-	return (svg: SVGElement, options: { height?: number; width?: number }) => {
-		const document = svg.ownerDocument
-		const window = document.defaultView
-
-		if (!window) {
-			return
-		}
-
-		const parsedLogo = new window.DOMParser().parseFromString(logoSvgMarkup, 'image/svg+xml')
-		const logoRoot = parsedLogo.documentElement
-		const { height: logoHeight, width: logoWidth } = parseLogoViewBox(logoRoot.getAttribute('viewBox'))
-
-		const qrWidth = options.width ?? DEFAULT_SIZE
-		const qrHeight = options.height ?? DEFAULT_SIZE
-		const logoDisplayWidth = Math.min(qrWidth, qrHeight) * 0.24
-		const logoDisplayHeight = logoDisplayWidth * (logoHeight / logoWidth)
-		const backdropPadding = Math.min(qrWidth, qrHeight) * 0.045
-		const logoX = (qrWidth - logoDisplayWidth) / 2
-		const logoY = (qrHeight - logoDisplayHeight) / 2
-
-		const backdrop = document.createElementNS(SVG_NS, 'rect')
-		backdrop.setAttribute('x', String(logoX - backdropPadding))
-		backdrop.setAttribute('y', String(logoY - backdropPadding))
-		backdrop.setAttribute('width', String(logoDisplayWidth + backdropPadding * 2))
-		backdrop.setAttribute('height', String(logoDisplayHeight + backdropPadding * 2))
-		backdrop.setAttribute('rx', String(backdropPadding * 1.5))
-		backdrop.setAttribute('fill', LOGO_BACKDROP_COLOR)
-
-		const logoGroup = document.createElementNS(SVG_NS, 'g')
-		logoGroup.setAttribute(
-			'transform',
-			`translate(${logoX} ${logoY}) scale(${logoDisplayWidth / logoWidth} ${logoDisplayHeight / logoHeight})`
-		)
-
-		Array.from(logoRoot.childNodes).forEach(node => {
-			logoGroup.appendChild(document.importNode(node, true))
-		})
-
-		svg.appendChild(backdrop)
-		svg.appendChild(logoGroup)
-	}
+  return (svg: SVGElement, options: { height?: number; width?: number }) => {
+    const document = svg.ownerDocument
+    const window = document.defaultView
+
+    if (!window) {
+      return
+    }
+
+    const parsedLogo = new window.DOMParser().parseFromString(logoSvgMarkup, 'image/svg+xml')
+    const logoRoot = parsedLogo.documentElement
+    const { height: logoHeight, width: logoWidth } = parseLogoViewBox(
+      logoRoot.getAttribute('viewBox')
+    )
+
+    const qrWidth = options.width ?? DEFAULT_SIZE
+    const qrHeight = options.height ?? DEFAULT_SIZE
+    const logoDisplayWidth = Math.min(qrWidth, qrHeight) * 0.24
+    const logoDisplayHeight = logoDisplayWidth * (logoHeight / logoWidth)
+    const backdropPadding = Math.min(qrWidth, qrHeight) * 0.045
+    const logoX = (qrWidth - logoDisplayWidth) / 2
+    const logoY = (qrHeight - logoDisplayHeight) / 2
+
+    const backdrop = document.createElementNS(SVG_NS, 'rect')
+    backdrop.setAttribute('x', String(logoX - backdropPadding))
+    backdrop.setAttribute('y', String(logoY - backdropPadding))
+    backdrop.setAttribute('width', String(logoDisplayWidth + backdropPadding * 2))
+    backdrop.setAttribute('height', String(logoDisplayHeight + backdropPadding * 2))
+    backdrop.setAttribute('rx', String(backdropPadding * 1.5))
+    backdrop.setAttribute('fill', LOGO_BACKDROP_COLOR)
+
+    const logoGroup = document.createElementNS(SVG_NS, 'g')
+    logoGroup.setAttribute(
+      'transform',
+      `translate(${logoX} ${logoY}) scale(${logoDisplayWidth / logoWidth} ${logoDisplayHeight / logoHeight})`
+    )
+
+    Array.from(logoRoot.childNodes).forEach(node => {
+      logoGroup.appendChild(document.importNode(node, true))
+    })
+
+    svg.appendChild(backdrop)
+    svg.appendChild(logoGroup)
+  }
 }
 
 /**
  * Render a QR code SVG string during SSR/build so pages do not need client-side hydration.
  */
 export const renderQrCodeSvg = async ({
-	data,
-	size = DEFAULT_SIZE,
+  data,
+  size = DEFAULT_SIZE,
 }: RenderQrCodeSvgOptions): Promise<string> => {
-	const qrCode = new QRCodeStyling({
-		backgroundOptions: {
-			color: QR_BACKGROUND_COLOR,
-		},
-		cornersDotOptions: {
-			color: QR_CORNER_DOT_COLOR,
-			type: 'dots',
-		},
-		cornersSquareOptions: {
-			color: QR_CORNER_COLOR,
-			type: 'dots',
-		},
-		data,
-		dotsOptions: {
-			color: QR_DOT_COLOR,
-			type: 'dots',
-		},
-		height: size,
-		jsdom: JSDOM,
-		margin: 8,
-		qrOptions: {
-			errorCorrectionLevel: 'H',
-		},
-		type: 'svg',
-		width: size,
-	})
-
-	qrCode.applyExtension(createLogoExtension(LOGO_SVG_MARKUP))
-
-	const svgBuffer = await qrCode.getRawData('svg')
-
-	if (!svgBuffer) {
-		throw new Error('Failed to generate QR code SVG')
-	}
-
-	return String(svgBuffer)
+  const qrCode = new QRCodeStyling({
+    backgroundOptions: {
+      color: QR_BACKGROUND_COLOR,
+    },
+    cornersDotOptions: {
+      color: QR_CORNER_DOT_COLOR,
+      type: 'dots',
+    },
+    cornersSquareOptions: {
+      color: QR_CORNER_COLOR,
+      type: 'dots',
+    },
+    data,
+    dotsOptions: {
+      color: QR_DOT_COLOR,
+      type: 'dots',
+    },
+    height: size,
+    jsdom: JSDOM,
+    margin: 8,
+    qrOptions: {
+      errorCorrectionLevel: 'H',
+    },
+    type: 'svg',
+    width: size,
+  })
+
+  qrCode.applyExtension(createLogoExtension(LOGO_SVG_MARKUP))
+
+  const svgBuffer = await qrCode.getRawData('svg')
+
+  if (!svgBuffer) {
+    throw new Error('Failed to generate QR code SVG')
+  }
+
+  return String(svgBuffer)
 }
diff --git a/src/components/Search/SearchBar/client/__tests__/index.spec.ts b/src/components/Search/SearchBar/client/__tests__/index.spec.ts
index 3a67c720c..bda3edd2b 100644
--- a/src/components/Search/SearchBar/client/__tests__/index.spec.ts
+++ b/src/components/Search/SearchBar/client/__tests__/index.spec.ts
@@ -13,12 +13,7 @@ type SearchBarModule = WebComponentModule<SearchBarElementInstance>
 type ActionResult<TData> = { data?: TData; error?: { message?: string } }
 
 const searchQueryMock =
-  vi.fn<
-    (_input: {
-      q: string
-      limit?: number
-    }) => Promise<ActionResult<{ hits: SearchHit[] }>>
-  >()
+  vi.fn<(_input: { q: string; limit?: number }) => Promise<ActionResult<{ hits: SearchHit[] }>>>()
 
 vi.mock('astro:actions', () => ({
   actions: {
@@ -153,7 +148,9 @@ describe('SearchBar web component', () => {
       expect(resultsContainer.classList.contains('hidden')).toBe(false)
       expect(resultsContainer.className).toContain('bg-page-offset')
 
-      const links = Array.from(element.querySelectorAll('[data-search-results-list] a')) as HTMLAnchorElement[]
+      const links = Array.from(
+        element.querySelectorAll('[data-search-results-list] a')
+      ) as HTMLAnchorElement[]
       expect(
         links.some(
           link =>
@@ -297,7 +294,8 @@ describe('SearchBar web component', () => {
 
   it('fills the query from speech recognition when available', async () => {
     await runHeaderComponentRender(async ({ element, window }) => {
-      ;(window as unknown as { SpeechRecognition?: unknown }).SpeechRecognition = MockSpeechRecognition as unknown
+      ;(window as unknown as { SpeechRecognition?: unknown }).SpeechRecognition =
+        MockSpeechRecognition as unknown
       ;(window as unknown as { webkitSpeechRecognition?: unknown }).webkitSpeechRecognition =
         MockSpeechRecognition as unknown
 
@@ -312,7 +310,8 @@ describe('SearchBar web component', () => {
       await flushMicrotasks()
 
       // Simulate a recognition result.
-      const recognition = (element as unknown as { speechRecognition?: MockSpeechRecognition }).speechRecognition
+      const recognition = (element as unknown as { speechRecognition?: MockSpeechRecognition })
+        .speechRecognition
       expect(recognition).toBeTruthy()
 
       recognition?.onresult?.({
diff --git a/src/components/Search/SearchBar/client/__tests__/results.spec.ts b/src/components/Search/SearchBar/client/__tests__/results.spec.ts
index 059b6a552..2b420737c 100644
--- a/src/components/Search/SearchBar/client/__tests__/results.spec.ts
+++ b/src/components/Search/SearchBar/client/__tests__/results.spec.ts
@@ -26,8 +26,12 @@ describe('SearchBar result helpers', () => {
 
     expect(Array.isArray(highlighted)).toBe(true)
 
-    const highlightedParts = highlighted as Array<string | { strings?: string[]; values?: unknown[] }>
-    expect(highlightedParts.some(part => typeof part === 'string' && part.includes('Introduction to '))).toBe(true)
+    const highlightedParts = highlighted as Array<
+      string | { strings?: string[]; values?: unknown[] }
+    >
+    expect(
+      highlightedParts.some(part => typeof part === 'string' && part.includes('Introduction to '))
+    ).toBe(true)
     expect(highlightedParts.some(part => typeof part !== 'string')).toBe(true)
   })
 
@@ -37,13 +41,17 @@ describe('SearchBar result helpers', () => {
     })
 
     const highlightedParts = highlighted as Array<string | { values?: unknown[] }>
-    const templatePart = highlightedParts.find(part => typeof part !== 'string') as { values?: unknown[] } | undefined
+    const templatePart = highlightedParts.find(part => typeof part !== 'string') as
+      | { values?: unknown[] }
+      | undefined
 
     expect(templatePart?.values?.[0]).toBe('bg-warning-inverse text-content')
   })
 
   it('returns plain text when there is no highlightable query term', () => {
-    expect(highlightSearchText('Introduction to Vector Search', 'v')).toBe('Introduction to Vector Search')
+    expect(highlightSearchText('Introduction to Vector Search', 'v')).toBe(
+      'Introduction to Vector Search'
+    )
   })
 
   it('highlights terms containing regex metacharacters without using regex semantics', () => {
@@ -52,7 +60,11 @@ describe('SearchBar result helpers', () => {
     expect(Array.isArray(highlighted)).toBe(true)
 
     const highlightedParts = highlighted as Array<string | { values?: unknown[] }>
-    expect(highlightedParts.some(part => typeof part === 'string' && part.includes(' patterns for teams'))).toBe(true)
+    expect(
+      highlightedParts.some(
+        part => typeof part === 'string' && part.includes(' patterns for teams')
+      )
+    ).toBe(true)
     expect(highlightedParts.some(part => typeof part !== 'string')).toBe(true)
   })
-})
\ No newline at end of file
+})
diff --git a/src/components/Search/SearchBar/client/index.ts b/src/components/Search/SearchBar/client/index.ts
index c55465890..de6ea9f9b 100644
--- a/src/components/Search/SearchBar/client/index.ts
+++ b/src/components/Search/SearchBar/client/index.ts
@@ -5,7 +5,10 @@ import { defineCustomElement } from '@components/scripts/utils'
 import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
 import { handleScriptError } from '@components/scripts/errors/handler'
 import { addScriptBreadcrumb } from '@components/scripts/errors'
-import { addButtonEventListeners, addWrapperEventListeners } from '@components/scripts/elementListeners'
+import {
+  addButtonEventListeners,
+  addWrapperEventListeners,
+} from '@components/scripts/elementListeners'
 import { getSearchBarElements, getSearchBarOptionalElements } from './selectors'
 import type { SearchHit } from '@actions/search/@types'
 import { getSearchResultDisplayPath, highlightSearchText } from './results'
@@ -174,7 +177,10 @@ export class SearchBarElement extends LitElement {
     }
   }
 
-  private setExpandedState(isExpanded: boolean, { updateStore = true }: { updateStore?: boolean } = {}): void {
+  private setExpandedState(
+    isExpanded: boolean,
+    { updateStore = true }: { updateStore?: boolean } = {}
+  ): void {
     this.isExpanded = isExpanded
 
     if (updateStore && this.toggleBtn) {
@@ -228,12 +234,10 @@ export class SearchBarElement extends LitElement {
   }
 
   private getSpeechRecognitionCtor(): (new () => SpeechRecognition) | null {
-    const view = (this.ownerDocument?.defaultView ?? null) as
-      | {
-          SpeechRecognition?: new () => SpeechRecognition
-          webkitSpeechRecognition?: new () => SpeechRecognition
-        }
-      | null
+    const view = (this.ownerDocument?.defaultView ?? null) as {
+      SpeechRecognition?: new () => SpeechRecognition
+      webkitSpeechRecognition?: new () => SpeechRecognition
+    } | null
 
     const globalAny = globalThis as unknown as {
       SpeechRecognition?: new () => SpeechRecognition
@@ -324,7 +328,9 @@ export class SearchBarElement extends LitElement {
     // We keep the extraction defensive so it works across implementations and in tests.
     const eventAny = event as unknown as {
       resultIndex?: number
-      results?: ArrayLike<ArrayLike<{ transcript?: string } & { confidence?: number }> & { isFinal?: boolean }>
+      results?: ArrayLike<
+        ArrayLike<{ transcript?: string } & { confidence?: number }> & { isFinal?: boolean }
+      >
     }
 
     const resultIndex = eventAny.resultIndex ?? 0
@@ -344,7 +350,10 @@ export class SearchBarElement extends LitElement {
       recognition.start()
     } catch (error) {
       // Some implementations throw if start() is called while already active.
-      handleScriptError(error, { scriptName: 'SearchBarElement', operation: 'speechRecognition.start' })
+      handleScriptError(error, {
+        scriptName: 'SearchBarElement',
+        operation: 'speechRecognition.start',
+      })
     }
   }
 
@@ -358,7 +367,10 @@ export class SearchBarElement extends LitElement {
     try {
       this.speechRecognition.stop()
     } catch (error) {
-      handleScriptError(error, { scriptName: 'SearchBarElement', operation: 'speechRecognition.stop' })
+      handleScriptError(error, {
+        scriptName: 'SearchBarElement',
+        operation: 'speechRecognition.stop',
+      })
     }
   }
 
@@ -610,21 +622,27 @@ export class SearchBarElement extends LitElement {
             href=${url}
           >
             <div class="min-w-0">
-              <div class="mb-1 truncate font-mono text-xs text-content transition-colors group-hover:text-content-active">
+              <div
+                class="mb-1 truncate font-mono text-xs text-content transition-colors group-hover:text-content-active"
+              >
                 ${displayPath}
               </div>
-              <div class="mb-1 text-body font-bold text-page-inverse transition-colors group-hover:text-content-active">
+              <div
+                class="mb-1 text-body font-bold text-page-inverse transition-colors group-hover:text-content-active"
+              >
                 ${highlightSearchText(title, query, { highlightClassName: 'bg-warning-inverse' })}
               </div>
-              ${
-                snippet
-                  ? html`
-                      <p class="line-clamp-1 text-sm text-content-offset transition-colors group-hover:text-content-active">
-                        ${highlightSearchText(snippet, query, { highlightClassName: 'bg-warning-inverse text-content' })}
-                      </p>
-                    `
-                  : nothing
-              }
+              ${snippet
+                ? html`
+                    <p
+                      class="line-clamp-1 text-sm text-content-offset transition-colors group-hover:text-content-active"
+                    >
+                      ${highlightSearchText(snippet, query, {
+                        highlightClassName: 'bg-warning-inverse text-content',
+                      })}
+                    </p>
+                  `
+                : nothing}
             </div>
             <svg
               class="h-4 w-4 shrink-0 text-content transition group-hover:translate-x-1 group-hover:text-content-active"
@@ -652,7 +670,10 @@ export class SearchBarElement extends LitElement {
     addScriptBreadcrumb(context)
 
     const requestId = ++this.latestRequestId
-    const { data, error } = await actions.search.query({ q: query, limit: HEADER_SEARCH_RESULT_LIMIT })
+    const { data, error } = await actions.search.query({
+      q: query,
+      limit: HEADER_SEARCH_RESULT_LIMIT,
+    })
 
     // @TODO: Improve this error handling to be more user friendly. Should look at the types of errors that could occur, and give the user an idea of what to do.
     if (error) {
diff --git a/src/components/Search/SearchBar/client/results.ts b/src/components/Search/SearchBar/client/results.ts
index 007530a0a..cb2aac2f3 100644
--- a/src/components/Search/SearchBar/client/results.ts
+++ b/src/components/Search/SearchBar/client/results.ts
@@ -10,9 +10,14 @@ interface HighlightSearchTextOptions {
 }
 
 const getHighlightTerms = (query: string): string[] => {
-  return [...new Set(query.trim().split(/\s+/).filter(term => term.length >= MIN_HIGHLIGHT_TERM_LENGTH))].sort(
-    (left, right) => right.length - left.length
-  )
+  return [
+    ...new Set(
+      query
+        .trim()
+        .split(/\s+/)
+        .filter(term => term.length >= MIN_HIGHLIGHT_TERM_LENGTH)
+    ),
+  ].sort((left, right) => right.length - left.length)
 }
 
 const findNextHighlightMatch = (
@@ -29,7 +34,11 @@ const findNextHighlightMatch = (
       continue
     }
 
-    if (!nextMatch || index < nextMatch.index || (index === nextMatch.index && term.length > nextMatch.term.length)) {
+    if (
+      !nextMatch ||
+      index < nextMatch.index ||
+      (index === nextMatch.index && term.length > nextMatch.term.length)
+    ) {
       nextMatch = { index, term }
     }
   }
@@ -48,7 +57,9 @@ export const getSearchResultDisplayPath = (url: string): string => {
 
   try {
     const parsedUrl = new URL(url)
-    return `${parsedUrl.pathname}${parsedUrl.search}${parsedUrl.hash}` || SEARCH_RESULT_FALLBACK_PATH
+    return (
+      `${parsedUrl.pathname}${parsedUrl.search}${parsedUrl.hash}` || SEARCH_RESULT_FALLBACK_PATH
+    )
   } catch {
     return SEARCH_RESULT_FALLBACK_PATH
   }
@@ -97,4 +108,4 @@ export const highlightSearchText = (
   }
 
   return parts
-}
\ No newline at end of file
+}
diff --git a/src/components/Search/SearchBar/index.astro b/src/components/Search/SearchBar/index.astro
index 60e006a28..bb9bf713c 100644
--- a/src/components/Search/SearchBar/index.astro
+++ b/src/components/Search/SearchBar/index.astro
@@ -111,7 +111,11 @@ const clearButtonLabel = hasInitialQuery ? 'Clear search' : 'Close search'
           data-search-results
           class="absolute left-0 right-0 z-(--z-content-floating) mt-2 hidden overflow-hidden rounded-lg border border-trim bg-page-offset shadow-elevated"
         >
-          <ul data-search-results-list class="divide-y divide-border" aria-label="Search suggestions"></ul>
+          <ul
+            data-search-results-list
+            class="divide-y divide-border"
+            aria-label="Search suggestions"
+          />
         </div>
       </div>
     ) : (
@@ -133,7 +137,11 @@ const clearButtonLabel = hasInitialQuery ? 'Clear search' : 'Close search'
           data-search-results
           class="absolute left-0 right-0 z-(--z-content-floating) mt-2 hidden overflow-hidden rounded-lg border border-spotlight bg-page-offset shadow-elevated"
         >
-          <ul data-search-results-list class="divide-y divide-border" aria-label="Search suggestions"></ul>
+          <ul
+            data-search-results-list
+            class="divide-y divide-border"
+            aria-label="Search suggestions"
+          />
         </div>
       </>
     )
diff --git a/src/components/Search/SearchEmptyState/index.astro b/src/components/Search/SearchEmptyState/index.astro
index 8f8ab778e..64fffc686 100644
--- a/src/components/Search/SearchEmptyState/index.astro
+++ b/src/components/Search/SearchEmptyState/index.astro
@@ -49,27 +49,40 @@ const items = [
 
 <section class="space-y-6">
   <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
-    {items.map((item) => (
-      <a href={item.link} class="group relative flex flex-col md:flex-row p-0 rounded-md border border-trim bg-page-base shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300 overflow-hidden no-underline hover:no-underline focus-visible:rounded-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-spotlight">
-        <div class="absolute inset-0 bg-content-inverse"></div>
-        <div class={`w-full md:w-48 h-48 md:h-auto shrink-0 relative overflow-hidden ${item.imageClasses}`}>
-          <Image src={item.image} alt={item.title} class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
-        </div>
-        <div class="p-6 flex flex-col justify-center grow">
-          <div class="relative flex items-center gap-4 mb-4">
-            <h2 class="inline-flex items-center gap-2 whitespace-nowrap text-xl text-page-inverse font-bold transition-colors no-underline">
-              <Icon icon={item.icon} size={6} />
-              {item.title}
-            </h2>
+    {
+      items.map(item => (
+        <a
+          href={item.link}
+          class="group relative flex flex-col md:flex-row p-0 rounded-md border border-trim bg-page-base shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300 overflow-hidden no-underline hover:no-underline focus-visible:rounded-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-spotlight"
+        >
+          <div class="absolute inset-0 bg-content-inverse" />
+          <div
+            class={`w-full md:w-48 h-48 md:h-auto shrink-0 relative overflow-hidden ${item.imageClasses}`}
+          >
+            <Image
+              src={item.image}
+              alt={item.title}
+              class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+            />
           </div>
-          <p class="relative text-content-offset text-sm leading-relaxed no-underline">{item.text}</p>
-          <div class="relative mt-6 flex pointer-events-none">
-            <span class="text-sm font-medium text-page-inverse flex items-center gap-1 group-hover:gap-2 transition-all no-underline">
-              {item.cta} <Icon icon="arrow-right" size={4} />
-            </span>
+          <div class="p-6 flex flex-col justify-center grow">
+            <div class="relative flex items-center gap-4 mb-4">
+              <h2 class="inline-flex items-center gap-2 whitespace-nowrap text-xl text-page-inverse font-bold transition-colors no-underline">
+                <Icon icon={item.icon} size={6} />
+                {item.title}
+              </h2>
+            </div>
+            <p class="relative text-content-offset text-sm leading-relaxed no-underline">
+              {item.text}
+            </p>
+            <div class="relative mt-6 flex pointer-events-none">
+              <span class="text-sm font-medium text-page-inverse flex items-center gap-1 group-hover:gap-2 transition-all no-underline">
+                {item.cta} <Icon icon="arrow-right" size={4} />
+              </span>
+            </div>
           </div>
-        </div>
-      </a>
-    ))}
+        </a>
+      ))
+    }
   </div>
 </section>
diff --git a/src/components/Search/SearchResults/client/__fixtures__/index.fixture.astro b/src/components/Search/SearchResults/client/__fixtures__/index.fixture.astro
index 0bbdde414..adce0933c 100644
--- a/src/components/Search/SearchResults/client/__fixtures__/index.fixture.astro
+++ b/src/components/Search/SearchResults/client/__fixtures__/index.fixture.astro
@@ -2,20 +2,20 @@
 import SearchResults from '@components/Search/SearchResults/index.astro'
 
 const {
-	query = 'typescript',
-	limit,
-	showSearchBar,
-	hideSearchEmptyState,
-	resultsMetaOverride,
-	syncQueryToLocation,
+  query = 'typescript',
+  limit,
+  showSearchBar,
+  hideSearchEmptyState,
+  resultsMetaOverride,
+  syncQueryToLocation,
 } = Astro.props
 ---
 
 <SearchResults
-	query={query}
-	limit={limit}
-	showSearchBar={showSearchBar}
-	hideSearchEmptyState={hideSearchEmptyState}
-	resultsMetaOverride={resultsMetaOverride}
-	syncQueryToLocation={syncQueryToLocation}
+  query={query}
+  limit={limit}
+  showSearchBar={showSearchBar}
+  hideSearchEmptyState={hideSearchEmptyState}
+  resultsMetaOverride={resultsMetaOverride}
+  syncQueryToLocation={syncQueryToLocation}
 />
diff --git a/src/components/Search/SearchResults/client/__tests__/index.spec.ts b/src/components/Search/SearchResults/client/__tests__/index.spec.ts
index 1b3f053ff..5cac9f9cd 100644
--- a/src/components/Search/SearchResults/client/__tests__/index.spec.ts
+++ b/src/components/Search/SearchResults/client/__tests__/index.spec.ts
@@ -168,7 +168,9 @@ describe('SearchResults web component', () => {
       const links = Array.from(
         element.querySelectorAll('[data-search-results] a')
       ) as HTMLAnchorElement[]
-      expect(links.some(link => link.getAttribute('href') === '/articles/typescript-best-practices')).toBe(true)
+      expect(
+        links.some(link => link.getAttribute('href') === '/articles/typescript-best-practices')
+      ).toBe(true)
 
       const emptyState = element.querySelector('[data-search-empty-state]')
       expect(emptyState?.classList.contains('hidden')).toBe(true)
diff --git a/src/components/Search/SearchResults/client/__tests__/selectors.spec.ts b/src/components/Search/SearchResults/client/__tests__/selectors.spec.ts
index 6b9403bb8..529269be5 100644
--- a/src/components/Search/SearchResults/client/__tests__/selectors.spec.ts
+++ b/src/components/Search/SearchResults/client/__tests__/selectors.spec.ts
@@ -57,7 +57,10 @@ describe('SearchResults selectors', () => {
           resultsList.tagName,
           'SearchResults list with ol[data-search-results] should be an <ol>'
         ).toBe('OL')
-        expect(input, 'SearchResults should include a search input with [data-search-input]').toBeTruthy()
+        expect(
+          input,
+          'SearchResults should include a search input with [data-search-input]'
+        ).toBeTruthy()
         if (!input) {
           throw new Error('Expected SearchResults input to be present for default layout test.')
         }
diff --git a/src/components/Search/SearchResults/client/index.ts b/src/components/Search/SearchResults/client/index.ts
index a83a336e1..31a57affd 100644
--- a/src/components/Search/SearchResults/client/index.ts
+++ b/src/components/Search/SearchResults/client/index.ts
@@ -94,7 +94,8 @@ export class SearchResultsElement extends LitElement {
   }
 
   private cacheElements(): void {
-    const { form, meta, error, resultsList, emptyState, input, micBtn, clearBtn } = getSearchResultsElements(this)
+    const { form, meta, error, resultsList, emptyState, input, micBtn, clearBtn } =
+      getSearchResultsElements(this)
 
     this.form = form
     this.meta = meta
@@ -213,12 +214,10 @@ export class SearchResultsElement extends LitElement {
   }
 
   private getSpeechRecognitionCtor(): (new () => SpeechRecognition) | null {
-    const view = (this.ownerDocument?.defaultView ?? null) as
-      | {
-          SpeechRecognition?: new () => SpeechRecognition
-          webkitSpeechRecognition?: new () => SpeechRecognition
-        }
-      | null
+    const view = (this.ownerDocument?.defaultView ?? null) as {
+      SpeechRecognition?: new () => SpeechRecognition
+      webkitSpeechRecognition?: new () => SpeechRecognition
+    } | null
 
     const globalAny = globalThis as unknown as {
       SpeechRecognition?: new () => SpeechRecognition
@@ -307,7 +306,9 @@ export class SearchResultsElement extends LitElement {
   private getTranscriptFromSpeechEvent(event: SpeechRecognitionEvent): string {
     const eventAny = event as unknown as {
       resultIndex?: number
-      results?: ArrayLike<ArrayLike<{ transcript?: string } & { confidence?: number }> & { isFinal?: boolean }>
+      results?: ArrayLike<
+        ArrayLike<{ transcript?: string } & { confidence?: number }> & { isFinal?: boolean }
+      >
     }
 
     const resultIndex = eventAny.resultIndex ?? 0
@@ -326,7 +327,10 @@ export class SearchResultsElement extends LitElement {
     try {
       recognition.start()
     } catch (error) {
-      handleScriptError(error, { scriptName: 'SearchResultsElement', operation: 'speechRecognition.start' })
+      handleScriptError(error, {
+        scriptName: 'SearchResultsElement',
+        operation: 'speechRecognition.start',
+      })
     }
   }
 
@@ -340,7 +344,10 @@ export class SearchResultsElement extends LitElement {
     try {
       this.speechRecognition.stop()
     } catch (error) {
-      handleScriptError(error, { scriptName: 'SearchResultsElement', operation: 'speechRecognition.stop' })
+      handleScriptError(error, {
+        scriptName: 'SearchResultsElement',
+        operation: 'speechRecognition.stop',
+      })
     }
   }
 
@@ -569,7 +576,10 @@ export class SearchResultsElement extends LitElement {
       return
     }
 
-    this.setMeta(this.getResultsMetaMessage(query, hits), hits.length > 0 || !this.shouldSuppressMetaFeedback())
+    this.setMeta(
+      this.getResultsMetaMessage(query, hits),
+      hits.length > 0 || !this.shouldSuppressMetaFeedback()
+    )
   }
 }
 
diff --git a/src/components/Search/SearchResults/client/selectors.ts b/src/components/Search/SearchResults/client/selectors.ts
index a162b93ee..3982cd968 100644
--- a/src/components/Search/SearchResults/client/selectors.ts
+++ b/src/components/Search/SearchResults/client/selectors.ts
@@ -1,4 +1,9 @@
-import { isDivElement, isInputElement, isOrderedListElement, isParagraphElement } from '@components/scripts/assertions/elements'
+import {
+  isDivElement,
+  isInputElement,
+  isOrderedListElement,
+  isParagraphElement,
+} from '@components/scripts/assertions/elements'
 import { ClientScriptError } from '@components/scripts/errors'
 
 export const SELECTORS = {
diff --git a/src/components/Search/SearchResults/index.astro b/src/components/Search/SearchResults/index.astro
index 77a80f1d2..5e086cc30 100644
--- a/src/components/Search/SearchResults/index.astro
+++ b/src/components/Search/SearchResults/index.astro
@@ -25,7 +25,10 @@ const query = (queryProp ?? Astro.url.searchParams.get('q') ?? '').trim()
         showSearchBar && (
           <div class="max-w-lg mx-auto">
             <form data-search-form class="relative" role="search" aria-label="Search page search">
-              <div data-search-shell class="searchResultsShell relative flex items-center rounded-lg border border-trim bg-page-base shadow-sm">
+              <div
+                data-search-shell
+                class="searchResultsShell relative flex items-center rounded-lg border border-trim bg-page-base shadow-sm"
+              >
                 <input
                   data-search-input
                   type="search"
@@ -61,7 +64,7 @@ const query = (queryProp ?? Astro.url.searchParams.get('q') ?? '').trim()
                   data-search-outline
                   aria-hidden="true"
                   class="searchResultsOutline pointer-events-none absolute inset-0 hidden rounded-lg border-2 border-spotlight"
-                ></div>
+                />
               </div>
             </form>
           </div>
@@ -75,15 +78,24 @@ const query = (queryProp ?? Astro.url.searchParams.get('q') ?? '').trim()
           resultsMetaOverride ? 'hidden' : '',
         ]}
         aria-live="polite"
-      ></p>
-      <p data-search-error class="max-w-5xl mx-auto text-sm text-content-active hidden pt-6" role="alert"></p>
+      >
+      </p>
+      <p
+        data-search-error
+        class="max-w-5xl mx-auto text-sm text-content-active hidden pt-6"
+        role="alert"
+      >
+      </p>
     </header>
 
     <ol data-search-results class="max-w-5xl mx-auto space-y-8" aria-label="Search results"></ol>
 
     {
       !hideSearchEmptyState && (
-        <div data-search-empty-state class:list={[query ? 'hidden' : '', 'mt-18 mb-12 max-w-5xl mx-auto']}>
+        <div
+          data-search-empty-state
+          class:list={[query ? 'hidden' : '', 'mt-18 mb-12 max-w-5xl mx-auto']}
+        >
           <SearchEmptyState />
         </div>
       )
diff --git a/src/components/Social/Embed/client/index.ts b/src/components/Social/Embed/client/index.ts
index c4f2e4428..b0fd557fd 100644
--- a/src/components/Social/Embed/client/index.ts
+++ b/src/components/Social/Embed/client/index.ts
@@ -521,13 +521,12 @@ class EmbedInstance {
       case 'mastodon':
         return this.getMastodonOEmbedEndpoint()
 
-      case 'youtube':
-        {
-          const { width, height } = this.getYouTubeDimensions()
-          const maxwidth = encodeURIComponent(String(width))
-          const maxheight = encodeURIComponent(String(height))
-          return `https://www.youtube.com/oembed?url=${encodedUrl}&format=json&maxwidth=${maxwidth}&maxheight=${maxheight}`
-        }
+      case 'youtube': {
+        const { width, height } = this.getYouTubeDimensions()
+        const maxwidth = encodeURIComponent(String(width))
+        const maxheight = encodeURIComponent(String(height))
+        return `https://www.youtube.com/oembed?url=${encodedUrl}&format=json&maxwidth=${maxwidth}&maxheight=${maxheight}`
+      }
 
       case 'github-gist':
         // GitHub Gist doesn't have oEmbed and is loaded via JSONP
diff --git a/src/components/Social/Embed/client/selectors.ts b/src/components/Social/Embed/client/selectors.ts
index d01b0c8b6..be2d1fd6e 100644
--- a/src/components/Social/Embed/client/selectors.ts
+++ b/src/components/Social/Embed/client/selectors.ts
@@ -76,7 +76,10 @@ export const queryStylesheetLinks = (root: ParentNode = document): HTMLLinkEleme
   ) as HTMLLinkElement[]
 }
 
-export const queryStylesheetLinkByHref = (href: string, root: ParentNode = document): HTMLLinkElement | null => {
+export const queryStylesheetLinkByHref = (
+  href: string,
+  root: ParentNode = document
+): HTMLLinkElement | null => {
   const links = queryStylesheetLinks(root)
   return links.find(link => link.getAttribute('href') === href) ?? null
 }
diff --git a/src/components/Social/Highlighter/HighlighterIconBank.astro b/src/components/Social/Highlighter/HighlighterIconBank.astro
index c57af7b89..7ccba9d35 100644
--- a/src/components/Social/Highlighter/HighlighterIconBank.astro
+++ b/src/components/Social/Highlighter/HighlighterIconBank.astro
@@ -10,9 +10,19 @@ import Icon from '@components/Icon/index.astro'
 ---
 
 <span id="highlighter-icon-bank" hidden aria-hidden="true">
-  <span data-highlighter-icon="x"><Icon icon="x" size={5} color="inherit" classes="share-icon" /></span>
-  <span data-highlighter-icon="linkedin"><Icon icon="linkedin" size={5} color="inherit" classes="share-icon" /></span>
-  <span data-highlighter-icon="bluesky"><Icon icon="bluesky" size={5} color="inherit" classes="share-icon" /></span>
-  <span data-highlighter-icon="reddit"><Icon icon="reddit" size={5} color="inherit" classes="share-icon" /></span>
-  <span data-highlighter-icon="mastodon"><Icon icon="mastodon" size={5} color="inherit" classes="share-icon" /></span>
+  <span data-highlighter-icon="x"
+    ><Icon icon="x" size={5} color="inherit" classes="share-icon" /></span
+  >
+  <span data-highlighter-icon="linkedin"
+    ><Icon icon="linkedin" size={5} color="inherit" classes="share-icon" /></span
+  >
+  <span data-highlighter-icon="bluesky"
+    ><Icon icon="bluesky" size={5} color="inherit" classes="share-icon" /></span
+  >
+  <span data-highlighter-icon="reddit"
+    ><Icon icon="reddit" size={5} color="inherit" classes="share-icon" /></span
+  >
+  <span data-highlighter-icon="mastodon"
+    ><Icon icon="mastodon" size={5} color="inherit" classes="share-icon" /></span
+  >
 </span>
diff --git a/src/components/Social/Highlighter/client/__tests__/index.spec.ts b/src/components/Social/Highlighter/client/__tests__/index.spec.ts
index eb365efbd..080a34f02 100644
--- a/src/components/Social/Highlighter/client/__tests__/index.spec.ts
+++ b/src/components/Social/Highlighter/client/__tests__/index.spec.ts
@@ -43,8 +43,7 @@ const mockPlatforms = vi.hoisted<MockPlatform[]>(() => [
     id: 'reddit',
     ariaLabel: 'Share on Reddit',
     icon: 'reddit',
-    getShareUrl: ({ url }) =>
-      `https://social.example/reddit?url=${encodeURIComponent(url ?? '')}`,
+    getShareUrl: ({ url }) => `https://social.example/reddit?url=${encodeURIComponent(url ?? '')}`,
   },
   {
     id: 'mastodon',
@@ -177,7 +176,11 @@ describe('HighlighterElement', () => {
       expect(dialog?.getAttribute('role')).toBe('toolbar')
       expect(dialog?.querySelector('.share-dialog__text')?.textContent).toBe('Share Selection')
       expect(element.querySelectorAll('site-tooltip')).toHaveLength(mockPlatforms.length)
-      expect(Array.from(element.querySelectorAll('.share-button')).every(button => !button.hasAttribute('title'))).toBe(true)
+      expect(
+        Array.from(element.querySelectorAll('.share-button')).every(
+          button => !button.hasAttribute('title')
+        )
+      ).toBe(true)
 
       const describedBy = trigger?.getAttribute('aria-describedby')
       expect(describedBy).toBeTruthy()
diff --git a/src/components/Social/Highlighter/client/index.ts b/src/components/Social/Highlighter/client/index.ts
index c9c9e4917..903c68175 100644
--- a/src/components/Social/Highlighter/client/index.ts
+++ b/src/components/Social/Highlighter/client/index.ts
@@ -277,12 +277,7 @@ export class HighlighterElement extends LitElement {
             ${this.renderPlatformIcon(platform.id)}
           </button>
         </span>
-        <span
-          data-tooltip-popup
-          role="tooltip"
-          aria-hidden="true"
-          class="${TOOLTIP_POPUP_CLASSES}"
-        >
+        <span data-tooltip-popup role="tooltip" aria-hidden="true" class="${TOOLTIP_POPUP_CLASSES}">
           ${platform.ariaLabel}
         </span>
       </site-tooltip>
diff --git a/src/components/Social/Mastodon/client/__tests__/index.spec.ts b/src/components/Social/Mastodon/client/__tests__/index.spec.ts
index b0e2eda4f..948a05bad 100644
--- a/src/components/Social/Mastodon/client/__tests__/index.spec.ts
+++ b/src/components/Social/Mastodon/client/__tests__/index.spec.ts
@@ -167,7 +167,9 @@ describe('MastodonModalElement', () => {
       expect(instanceWrapper?.className).toContain('after:border-transparent')
       expect(instanceWrapper?.className).not.toContain('after:border-spotlight')
 
-      const rememberCheckbox = element.querySelector('#remember-instance') as HTMLInputElement | null
+      const rememberCheckbox = element.querySelector(
+        '#remember-instance'
+      ) as HTMLInputElement | null
       expect(rememberCheckbox?.className).toContain('focus-visible:outline-none')
       expect(rememberCheckbox?.className).toContain('focus-visible:after:border-spotlight')
       expect(rememberCheckbox?.className).toContain('after:rounded-none')
@@ -244,7 +246,7 @@ describe('MastodonModalElement', () => {
       await flushMicrotasks()
 
       expect(mockIsMastodonInstance).toHaveBeenCalledWith('mastodon.social')
-  expect(mockBuildShareUrl).toHaveBeenCalledWith('mastodon.social', 'Updated share copy')
+      expect(mockBuildShareUrl).toHaveBeenCalledWith('mastodon.social', 'Updated share copy')
       expect(mockSaveInstance).toHaveBeenCalled()
       expect(mockSetCurrentInstance).toHaveBeenCalledWith('mastodon.social')
       expect(openSpy).toHaveBeenCalledWith(
diff --git a/src/components/Social/Mastodon/client/index.ts b/src/components/Social/Mastodon/client/index.ts
index 07c93c53e..dde388914 100644
--- a/src/components/Social/Mastodon/client/index.ts
+++ b/src/components/Social/Mastodon/client/index.ts
@@ -434,7 +434,9 @@ export class MastodonModalElement extends LitElement {
           class="modal-backdrop absolute inset-0 bg-black/50 backdrop-blur-sm"
           @click=${(event: Event) => this.handleBackdropClick(event)}
         ></div>
-        <div class="modal-content relative w-full max-w-2xl max-h-[90vh] overflow-auto rounded-xl bg-page-base shadow-2xl">
+        <div
+          class="modal-content relative w-full max-w-2xl max-h-[90vh] overflow-auto rounded-xl bg-page-base shadow-2xl"
+        >
           <div class="bg-page-inverse px-6 py-5 flex items-center justify-between">
             <div class="flex items-center gap-3 text-content-inverse">
               ${mastodonIconMarkup ? unsafeHTML(mastodonIconMarkup) : null}
@@ -458,7 +460,10 @@ export class MastodonModalElement extends LitElement {
             @submit=${(event: Event) => this.handleSubmit(event)}
           >
             <div class="flex flex-col gap-2">
-              <label for="share-text" class="text-sm font-medium text-content-offset uppercase tracking-wider">
+              <label
+                for="share-text"
+                class="text-sm font-medium text-content-offset uppercase tracking-wider"
+              >
                 Text to share
               </label>
               <div
@@ -528,7 +533,10 @@ export class MastodonModalElement extends LitElement {
                   </div>`
                 : null}
 
-              <label for="remember-instance" class="flex items-center gap-2 text-sm cursor-pointer text-content-offset">
+              <label
+                for="remember-instance"
+                class="flex items-center gap-2 text-sm cursor-pointer text-content-offset"
+              >
                 <input
                   type="checkbox"
                   id="remember-instance"
diff --git a/src/components/Social/Shares/client/index.ts b/src/components/Social/Shares/client/index.ts
index 05621a8ed..e9edb2d53 100644
--- a/src/components/Social/Shares/client/index.ts
+++ b/src/components/Social/Shares/client/index.ts
@@ -62,11 +62,7 @@ export class SocialShareElement extends LitElement {
       .join(' ')
 
     return html`
-      <div
-        class="${containerClassList}"
-        role="group"
-        aria-label="Share this content"
-      >
+      <div class="${containerClassList}" role="group" aria-label="Share this content">
         ${this.selectedPlatforms.map(platform =>
           this.renderPlatform(platform, shareData, shareText)
         )}
diff --git a/src/components/Social/Shares/index.astro b/src/components/Social/Shares/index.astro
index 4ddbe9c81..55a448a00 100644
--- a/src/components/Social/Shares/index.astro
+++ b/src/components/Social/Shares/index.astro
@@ -72,9 +72,7 @@ const shareHeadingId = `${iconBankId}-heading`
     </h2>
   </div>
   <div class="w-full md:flex-1 sm:pl-12">
-    <p class="text-content text-sm mb-4">
-      Enjoyed the read? Share it with your network.
-    </p>
+    <p class="text-content text-sm mb-4">Enjoyed the read? Share it with your network.</p>
     <social-share-element
       data-social-shares
       url={url}
diff --git a/src/components/Table/index.astro b/src/components/Table/index.astro
index fe406ad7b..89f489ce8 100644
--- a/src/components/Table/index.astro
+++ b/src/components/Table/index.astro
@@ -1,15 +1,37 @@
 ---
-import CriteriaHighlightTable, { type Props as CriteriaHighlightTableProps } from '@components/Table/layouts/criteria-highlight.astro'
-import GridAndAccentHeaderTable, { type Props as GridAndAccentHeaderTableProps } from '@components/Table/layouts/grid-and-accent-header.astro'
-import MinimalBordersTable, { type Props as MinimalBordersTableProps } from '@components/Table/layouts/minimal-borders.astro'
-import NumberedReviewTable, { type Props as NumberedReviewTableProps } from '@components/Table/layouts/numbered-review.astro'
-import ReportTable, { type Props as ReportTableProps } from '@components/Table/layouts/report-table.astro'
-import SemanticColoringTable, { type Props as SemanticColoringTableProps } from '@components/Table/layouts/semantic-coloring.astro'
-import SoftHeaderCardTable, { type Props as SoftHeaderCardTableProps } from '@components/Table/layouts/soft-header-card.astro'
-import StickyHeaderTable, { type Props as StickyHeaderTableProps } from '@components/Table/layouts/sticky-header.astro'
-import StripedRowsTable, { type Props as StripedRowsTableProps } from '@components/Table/layouts/striped-rows.astro'
-import TimelineLabelsTable, { type Props as TimelineLabelsTableProps } from '@components/Table/layouts/timeline-labels.astro'
-import VerticalColumnDelineationTable, { type Props as VerticalColumnDelineationTableProps } from '@components/Table/layouts/vertical-column-delineation.astro'
+import CriteriaHighlightTable, {
+  type Props as CriteriaHighlightTableProps,
+} from '@components/Table/layouts/criteria-highlight.astro'
+import GridAndAccentHeaderTable, {
+  type Props as GridAndAccentHeaderTableProps,
+} from '@components/Table/layouts/grid-and-accent-header.astro'
+import MinimalBordersTable, {
+  type Props as MinimalBordersTableProps,
+} from '@components/Table/layouts/minimal-borders.astro'
+import NumberedReviewTable, {
+  type Props as NumberedReviewTableProps,
+} from '@components/Table/layouts/numbered-review.astro'
+import ReportTable, {
+  type Props as ReportTableProps,
+} from '@components/Table/layouts/report-table.astro'
+import SemanticColoringTable, {
+  type Props as SemanticColoringTableProps,
+} from '@components/Table/layouts/semantic-coloring.astro'
+import SoftHeaderCardTable, {
+  type Props as SoftHeaderCardTableProps,
+} from '@components/Table/layouts/soft-header-card.astro'
+import StickyHeaderTable, {
+  type Props as StickyHeaderTableProps,
+} from '@components/Table/layouts/sticky-header.astro'
+import StripedRowsTable, {
+  type Props as StripedRowsTableProps,
+} from '@components/Table/layouts/striped-rows.astro'
+import TimelineLabelsTable, {
+  type Props as TimelineLabelsTableProps,
+} from '@components/Table/layouts/timeline-labels.astro'
+import VerticalColumnDelineationTable, {
+  type Props as VerticalColumnDelineationTableProps,
+} from '@components/Table/layouts/vertical-column-delineation.astro'
 
 export type Props = {
   content: {
@@ -60,19 +82,95 @@ const wrapperClass = [
 
 <figure class:list={[content.figure ? 'my-4 mx-auto max-w-none' : '', classes?.figure]}>
   <div class={wrapperClass}>
-    {variant === 'criteria-highlight-table' && <CriteriaHighlightTable content={content as CriteriaHighlightTableProps['content']} {...layoutProps} />}
-    {variant === 'grid-and-accent-header-table' && <GridAndAccentHeaderTable content={content as GridAndAccentHeaderTableProps['content']} {...layoutProps} />}
-    {variant === 'minimal-borders-table' && <MinimalBordersTable content={content as MinimalBordersTableProps['content']} {...layoutProps} />}
-    {variant === 'numbered-review-table' && <NumberedReviewTable content={content as NumberedReviewTableProps['content']} {...layoutProps} />}
-    {variant === 'report-table' && <ReportTable content={content as ReportTableProps['content']} {...layoutProps} />}
-    {variant === 'semantic-coloring-table' && <SemanticColoringTable content={content as SemanticColoringTableProps['content']} {...layoutProps} />}
-    {variant === 'soft-header-card-table' && <SoftHeaderCardTable content={content as SoftHeaderCardTableProps['content']} {...layoutProps} />}
-    {variant === 'sticky-header-table' && <StickyHeaderTable content={content as StickyHeaderTableProps['content']} {...layoutProps} />}
-    {variant === 'striped-rows-table' && <StripedRowsTable content={content as StripedRowsTableProps['content']} {...layoutProps} />}
-    {variant === 'timeline-labels-table' && <TimelineLabelsTable content={content as TimelineLabelsTableProps['content']} {...layoutProps} />}
-    {variant === 'vertical-column-delineation-table' && <VerticalColumnDelineationTable content={content as VerticalColumnDelineationTableProps['content']} {...layoutProps} />}
+    {
+      variant === 'criteria-highlight-table' && (
+        <CriteriaHighlightTable
+          content={content as CriteriaHighlightTableProps['content']}
+          {...layoutProps}
+        />
+      )
+    }
+    {
+      variant === 'grid-and-accent-header-table' && (
+        <GridAndAccentHeaderTable
+          content={content as GridAndAccentHeaderTableProps['content']}
+          {...layoutProps}
+        />
+      )
+    }
+    {
+      variant === 'minimal-borders-table' && (
+        <MinimalBordersTable
+          content={content as MinimalBordersTableProps['content']}
+          {...layoutProps}
+        />
+      )
+    }
+    {
+      variant === 'numbered-review-table' && (
+        <NumberedReviewTable
+          content={content as NumberedReviewTableProps['content']}
+          {...layoutProps}
+        />
+      )
+    }
+    {
+      variant === 'report-table' && (
+        <ReportTable content={content as ReportTableProps['content']} {...layoutProps} />
+      )
+    }
+    {
+      variant === 'semantic-coloring-table' && (
+        <SemanticColoringTable
+          content={content as SemanticColoringTableProps['content']}
+          {...layoutProps}
+        />
+      )
+    }
+    {
+      variant === 'soft-header-card-table' && (
+        <SoftHeaderCardTable
+          content={content as SoftHeaderCardTableProps['content']}
+          {...layoutProps}
+        />
+      )
+    }
+    {
+      variant === 'sticky-header-table' && (
+        <StickyHeaderTable
+          content={content as StickyHeaderTableProps['content']}
+          {...layoutProps}
+        />
+      )
+    }
+    {
+      variant === 'striped-rows-table' && (
+        <StripedRowsTable content={content as StripedRowsTableProps['content']} {...layoutProps} />
+      )
+    }
+    {
+      variant === 'timeline-labels-table' && (
+        <TimelineLabelsTable
+          content={content as TimelineLabelsTableProps['content']}
+          {...layoutProps}
+        />
+      )
+    }
+    {
+      variant === 'vertical-column-delineation-table' && (
+        <VerticalColumnDelineationTable
+          content={content as VerticalColumnDelineationTableProps['content']}
+          {...layoutProps}
+        />
+      )
+    }
   </div>
-  {content.figure && (
-    <figcaption class="screen-table-figure-caption italic text-base text-center mt-3" set:html={content.figure}></figcaption>
-  )}
+  {
+    content.figure && (
+      <figcaption
+        class="screen-table-figure-caption italic text-base text-center mt-3"
+        set:html={content.figure}
+      />
+    )
+  }
 </figure>
diff --git a/src/components/Table/layouts/criteria-highlight.astro b/src/components/Table/layouts/criteria-highlight.astro
index 5eef56d47..060cf6037 100644
--- a/src/components/Table/layouts/criteria-highlight.astro
+++ b/src/components/Table/layouts/criteria-highlight.astro
@@ -36,86 +36,128 @@ const tableClass = `text-left${fullWidth ? ' w-full' : ''}`
 const captionClass = 'text-left px-4 py-3 text-content-offset'
 const headerClass = 'px-4 py-2.5 font-semibold text-content-active'
 const theadClass = 'bg-page-offset border-b border-trim'
-const rowClass = 'transition-colors duration-150 hover:bg-page-offset border-b border-trim-offset last:border-b-0'
-const getOverallColumnIndex = (hasRowHeader: boolean, cellIndex: number) => (hasRowHeader ? cellIndex + 1 : cellIndex)
+const rowClass =
+  'transition-colors duration-150 hover:bg-page-offset border-b border-trim-offset last:border-b-0'
+const getOverallColumnIndex = (hasRowHeader: boolean, cellIndex: number) =>
+  hasRowHeader ? cellIndex + 1 : cellIndex
 const hasScreenCaption = Boolean(content.caption || content.subcaption)
 ---
 
+<table
+  class:list={[
+    tableClass,
+    content.thead ? 'print-table-has-head' : 'print-table-no-head',
+    classes?.table,
+  ]}
+>
+  {
+    (hasScreenCaption || content.figure) && (
+      <caption
+        class:list={[
+          captionClass,
+          content.figure ? 'print-table-caption' : '',
+          !hasScreenCaption ? 'hidden' : '',
+          classes?.caption,
+        ]}
+      >
+        {hasScreenCaption && (
+          <span class="screen-table-caption-copy">
+            {content.caption && <span class="block" set:html={content.caption} />}
+            {content.subcaption && <span class="block" set:html={content.subcaption} />}
+          </span>
+        )}
+        {content.figure && (
+          <span class="hidden print-table-figure-copy" set:html={content.figure} />
+        )}
+      </caption>
+    )
+  }
 
-<table class:list={[tableClass, content.thead ? 'print-table-has-head' : 'print-table-no-head', classes?.table]}>
-  {(hasScreenCaption || content.figure) && (
-    <caption class:list={[captionClass, content.figure ? 'print-table-caption' : '', !hasScreenCaption ? 'hidden' : '', classes?.caption]}>
-      {hasScreenCaption && (
-        <span class="screen-table-caption-copy">
-          {content.caption && <span class="block" set:html={content.caption}></span>}
-          {content.subcaption && <span class="block" set:html={content.subcaption}></span>}
-        </span>
-      )}
-      {content.figure && <span class="hidden print-table-figure-copy" set:html={content.figure}></span>}
-    </caption>
-  )}
-
-  {content.thead && (
-    <thead class:list={[theadClass, classes?.thead]}>
-      <tr>
-        {content.thead.th.map((th) => (
-          <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th}></th>
-        ))}
-      </tr>
-    </thead>
-  )}
+  {
+    content.thead && (
+      <thead class:list={[theadClass, classes?.thead]}>
+        <tr>
+          {content.thead.th.map(th => (
+            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th} />
+          ))}
+        </tr>
+      </thead>
+    )
+  }
 
   <tbody class:list={[classes?.tbody]}>
-    {content.tbody.tr.map((row) => (
-      <tr class={rowClass}>
-        {row.th && (
-          <th scope="row" class:list={['px-4 py-3 text-content font-medium', classes?.tbody]} set:html={row.th}></th>
-        )}
-        {row.td.map((td, index) => (
-          getOverallColumnIndex(Boolean(row.th), index) === 1 ? (
-            <td class:list={['px-4 py-3', classes?.tbody]}>
-              <span class="inline-flex whitespace-nowrap rounded-md border border-primary-offset bg-primary-inverse px-2.5 py-1 text-primary-offset" set:html={td}></span>
-            </td>
-          ) : (
-            <td
-              class:list={[
-                'px-4 py-3',
-                getOverallColumnIndex(Boolean(row.th), index) === 0 ? 'text-content font-medium' : 'text-content',
-                classes?.tbody,
-              ]}
-              set:html={td}
-            ></td>
-          )
-        ))}
-      </tr>
-    ))}
-  </tbody>
-
-  {content.tfoot && (
-    <tfoot class:list={[classes?.tfoot]}>
-      {content.tfoot.tr.map((row) => (
+    {
+      content.tbody.tr.map(row => (
         <tr class={rowClass}>
           {row.th && (
-            <th scope="row" class:list={['px-4 py-3 text-content font-medium', classes?.tfoot]} set:html={row.th}></th>
+            <th
+              scope="row"
+              class:list={['px-4 py-3 text-content font-medium', classes?.tbody]}
+              set:html={row.th}
+            />
           )}
-          {row.td.map((td, index) => (
+          {row.td.map((td, index) =>
             getOverallColumnIndex(Boolean(row.th), index) === 1 ? (
-              <td class:list={['px-4 py-3', classes?.tfoot]}>
-                <span class="inline-flex whitespace-nowrap rounded-md border border-secondary bg-secondary-inverse px-2.5 py-1 text-secondary font-semibold" set:html={td}></span>
+              <td class:list={['px-4 py-3', classes?.tbody]}>
+                <span
+                  class="inline-flex whitespace-nowrap rounded-md border border-primary-offset bg-primary-inverse px-2.5 py-1 text-primary-offset"
+                  set:html={td}
+                />
               </td>
             ) : (
               <td
                 class:list={[
                   'px-4 py-3',
-                  getOverallColumnIndex(Boolean(row.th), index) === 0 ? 'text-content font-medium' : 'text-content',
-                  classes?.tfoot,
+                  getOverallColumnIndex(Boolean(row.th), index) === 0
+                    ? 'text-content font-medium'
+                    : 'text-content',
+                  classes?.tbody,
                 ]}
                 set:html={td}
-              ></td>
+              />
             )
-          ))}
+          )}
         </tr>
-      ))}
-    </tfoot>
-  )}
+      ))
+    }
+  </tbody>
+
+  {
+    content.tfoot && (
+      <tfoot class:list={[classes?.tfoot]}>
+        {content.tfoot.tr.map(row => (
+          <tr class={rowClass}>
+            {row.th && (
+              <th
+                scope="row"
+                class:list={['px-4 py-3 text-content font-medium', classes?.tfoot]}
+                set:html={row.th}
+              />
+            )}
+            {row.td.map((td, index) =>
+              getOverallColumnIndex(Boolean(row.th), index) === 1 ? (
+                <td class:list={['px-4 py-3', classes?.tfoot]}>
+                  <span
+                    class="inline-flex whitespace-nowrap rounded-md border border-secondary bg-secondary-inverse px-2.5 py-1 text-secondary font-semibold"
+                    set:html={td}
+                  />
+                </td>
+              ) : (
+                <td
+                  class:list={[
+                    'px-4 py-3',
+                    getOverallColumnIndex(Boolean(row.th), index) === 0
+                      ? 'text-content font-medium'
+                      : 'text-content',
+                    classes?.tfoot,
+                  ]}
+                  set:html={td}
+                />
+              )
+            )}
+          </tr>
+        ))}
+      </tfoot>
+    )
+  }
 </table>
diff --git a/src/components/Table/layouts/grid-and-accent-header.astro b/src/components/Table/layouts/grid-and-accent-header.astro
index 869e97724..0814b8c38 100644
--- a/src/components/Table/layouts/grid-and-accent-header.astro
+++ b/src/components/Table/layouts/grid-and-accent-header.astro
@@ -41,31 +41,51 @@ const tfootClass = ''
 const hasScreenCaption = Boolean(content.caption || content.subcaption)
 ---
 
-<table class:list={[tableClass, content.thead ? 'print-table-has-head' : 'print-table-no-head', classes?.table]}>
-    {(hasScreenCaption || content.figure) && (
-      <caption class:list={[captionClass, content.figure ? 'print-table-caption' : '', !hasScreenCaption ? 'hidden' : '', classes?.caption]}>
+<table
+  class:list={[
+    tableClass,
+    content.thead ? 'print-table-has-head' : 'print-table-no-head',
+    classes?.table,
+  ]}
+>
+  {
+    (hasScreenCaption || content.figure) && (
+      <caption
+        class:list={[
+          captionClass,
+          content.figure ? 'print-table-caption' : '',
+          !hasScreenCaption ? 'hidden' : '',
+          classes?.caption,
+        ]}
+      >
         {hasScreenCaption && (
           <span class="screen-table-caption-copy">
-            {content.caption && <span class="block" set:html={content.caption}></span>}
-            {content.subcaption && <span class="block" set:html={content.subcaption}></span>}
+            {content.caption && <span class="block" set:html={content.caption} />}
+            {content.subcaption && <span class="block" set:html={content.subcaption} />}
           </span>
         )}
-        {content.figure && <span class="hidden print-table-figure-copy" set:html={content.figure}></span>}
+        {content.figure && (
+          <span class="hidden print-table-figure-copy" set:html={content.figure} />
+        )}
       </caption>
-    )}
+    )
+  }
 
-    {content.thead && (
+  {
+    content.thead && (
       <thead class:list={[theadClass, classes?.thead]}>
         <tr>
-          {content.thead.th.map((th) => (
-            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th}></th>
+          {content.thead.th.map(th => (
+            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th} />
           ))}
         </tr>
       </thead>
-    )}
+    )
+  }
 
-    <tbody class:list={[tbodyClass, classes?.tbody]}>
-      {content.tbody.tr.map((row, rowIndex) => (
+  <tbody class:list={[tbodyClass, classes?.tbody]}>
+    {
+      content.tbody.tr.map((row, rowIndex) => (
         <tr
           class:list={[
             'transition-colors duration-150 hover:bg-page-offset',
@@ -77,7 +97,7 @@ const hasScreenCaption = Boolean(content.caption || content.subcaption)
               scope="row"
               class:list={['px-4 py-2.5 text-content font-medium', classes?.tbody]}
               set:html={row.th}
-            ></th>
+            />
           )}
           {row.td.map((td, index) => (
             <td
@@ -88,13 +108,15 @@ const hasScreenCaption = Boolean(content.caption || content.subcaption)
                 classes?.tbody,
               ]}
               set:html={td}
-            ></td>
+            />
           ))}
         </tr>
-      ))}
-    </tbody>
+      ))
+    }
+  </tbody>
 
-    {content.tfoot && (
+  {
+    content.tfoot && (
       <tfoot class:list={[tfootClass, classes?.tfoot]}>
         {content.tfoot.tr.map((row, rowIndex) => (
           <tr
@@ -108,7 +130,7 @@ const hasScreenCaption = Boolean(content.caption || content.subcaption)
                 scope="row"
                 class:list={['px-4 py-2.5 text-content font-medium', classes?.tfoot]}
                 set:html={row.th}
-              ></th>
+              />
             )}
             {row.td.map((td, index) => (
               <td
@@ -119,10 +141,11 @@ const hasScreenCaption = Boolean(content.caption || content.subcaption)
                   classes?.tfoot,
                 ]}
                 set:html={td}
-              ></td>
+              />
             ))}
           </tr>
         ))}
       </tfoot>
-    )}
+    )
+  }
 </table>
diff --git a/src/components/Table/layouts/minimal-borders.astro b/src/components/Table/layouts/minimal-borders.astro
index b8e7b035f..ea7ac12f6 100644
--- a/src/components/Table/layouts/minimal-borders.astro
+++ b/src/components/Table/layouts/minimal-borders.astro
@@ -42,34 +42,54 @@ const rowClass = 'transition-colors duration-150 hover:bg-page-offset border-b b
 const hasScreenCaption = Boolean(content.caption || content.subcaption)
 ---
 
-<table class:list={[tableClass, content.thead ? 'print-table-has-head' : 'print-table-no-head', classes?.table]}>
-    {(hasScreenCaption || content.figure) && (
-      <caption class:list={[captionClass, content.figure ? 'print-table-caption' : '', !hasScreenCaption ? 'hidden' : '', classes?.caption]}>
+<table
+  class:list={[
+    tableClass,
+    content.thead ? 'print-table-has-head' : 'print-table-no-head',
+    classes?.table,
+  ]}
+>
+  {
+    (hasScreenCaption || content.figure) && (
+      <caption
+        class:list={[
+          captionClass,
+          content.figure ? 'print-table-caption' : '',
+          !hasScreenCaption ? 'hidden' : '',
+          classes?.caption,
+        ]}
+      >
         {hasScreenCaption && (
           <span class="screen-table-caption-copy">
-            {content.caption && <span class="block" set:html={content.caption}></span>}
-            {content.subcaption && <span class="block" set:html={content.subcaption}></span>}
+            {content.caption && <span class="block" set:html={content.caption} />}
+            {content.subcaption && <span class="block" set:html={content.subcaption} />}
           </span>
         )}
-        {content.figure && <span class="hidden print-table-figure-copy" set:html={content.figure}></span>}
+        {content.figure && (
+          <span class="hidden print-table-figure-copy" set:html={content.figure} />
+        )}
       </caption>
-    )}
+    )
+  }
 
-    {content.thead && (
+  {
+    content.thead && (
       <thead class:list={[theadClass, classes?.thead]}>
         <tr>
-          {content.thead.th.map((th) => (
-            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th}></th>
+          {content.thead.th.map(th => (
+            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th} />
           ))}
         </tr>
       </thead>
-    )}
+    )
+  }
 
-    <tbody class:list={[tbodyClass, classes?.tbody]}>
-      {content.tbody.tr.map((row) => (
+  <tbody class:list={[tbodyClass, classes?.tbody]}>
+    {
+      content.tbody.tr.map(row => (
         <tr class={rowClass}>
           {row.th && (
-            <th scope="row" class:list={[headerClass, classes?.tbody]} set:html={row.th}></th>
+            <th scope="row" class:list={[headerClass, classes?.tbody]} set:html={row.th} />
           )}
           {row.td.map((td, index) => (
             <td
@@ -79,18 +99,20 @@ const hasScreenCaption = Boolean(content.caption || content.subcaption)
                 classes?.tbody,
               ]}
               set:html={td}
-            ></td>
+            />
           ))}
         </tr>
-      ))}
-    </tbody>
+      ))
+    }
+  </tbody>
 
-    {content.tfoot && (
+  {
+    content.tfoot && (
       <tfoot class:list={[tfootClass, classes?.tfoot]}>
-        {content.tfoot.tr.map((row) => (
+        {content.tfoot.tr.map(row => (
           <tr class={rowClass}>
             {row.th && (
-              <th scope="row" class:list={[headerClass, classes?.tfoot]} set:html={row.th}></th>
+              <th scope="row" class:list={[headerClass, classes?.tfoot]} set:html={row.th} />
             )}
             {row.td.map((td, index) => (
               <td
@@ -100,10 +122,11 @@ const hasScreenCaption = Boolean(content.caption || content.subcaption)
                   classes?.tfoot,
                 ]}
                 set:html={td}
-              ></td>
+              />
             ))}
           </tr>
         ))}
       </tfoot>
-    )}
+    )
+  }
 </table>
diff --git a/src/components/Table/layouts/numbered-review.astro b/src/components/Table/layouts/numbered-review.astro
index f17b879e0..819ced54c 100644
--- a/src/components/Table/layouts/numbered-review.astro
+++ b/src/components/Table/layouts/numbered-review.astro
@@ -42,36 +42,59 @@ const headerClass = 'px-4 py-3 font-semibold text-content-active'
 const theadClass = 'bg-page-offset border-b border-trim'
 const tbodyClass = ''
 const tfootClass = ''
-const rowClass = 'transition-colors duration-150 hover:bg-page-offset border-b border-trim-offset last:border-b-0'
+const rowClass =
+  'transition-colors duration-150 hover:bg-page-offset border-b border-trim-offset last:border-b-0'
 const hasScreenCaption = Boolean(content.caption || content.subcaption)
 ---
 
-<table class:list={[tableClass, content.thead ? 'print-table-has-head' : 'print-table-no-head', classes?.table]}>
-    {(hasScreenCaption || content.figure) && (
-      <caption class:list={[captionClass, content.figure ? 'print-table-caption' : '', !hasScreenCaption ? 'hidden' : '', classes?.caption]}>
+<table
+  class:list={[
+    tableClass,
+    content.thead ? 'print-table-has-head' : 'print-table-no-head',
+    classes?.table,
+  ]}
+>
+  {
+    (hasScreenCaption || content.figure) && (
+      <caption
+        class:list={[
+          captionClass,
+          content.figure ? 'print-table-caption' : '',
+          !hasScreenCaption ? 'hidden' : '',
+          classes?.caption,
+        ]}
+      >
         {hasScreenCaption && (
           <span class="screen-table-caption-copy">
-            {content.caption && <span class="block" set:html={content.caption}></span>}
-            {content.subcaption && <span class="block" set:html={content.subcaption}></span>}
+            {content.caption && <span class="block" set:html={content.caption} />}
+            {content.subcaption && <span class="block" set:html={content.subcaption} />}
           </span>
         )}
-        {content.figure && <span class="hidden print-table-figure-copy" set:html={content.figure}></span>}
+        {content.figure && (
+          <span class="hidden print-table-figure-copy" set:html={content.figure} />
+        )}
       </caption>
-    )}
+    )
+  }
 
-    {content.thead && (
+  {
+    content.thead && (
       <thead class:list={[theadClass, classes?.thead]}>
         <tr>
-          <th class:list={['w-14 px-3 py-3 font-semibold text-content-active', classes?.thead]}>#</th>
-          {content.thead.th.map((th) => (
-            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th}></th>
+          <th class:list={['w-14 px-3 py-3 font-semibold text-content-active', classes?.thead]}>
+            #
+          </th>
+          {content.thead.th.map(th => (
+            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th} />
           ))}
         </tr>
       </thead>
-    )}
+    )
+  }
 
-    <tbody class:list={[tbodyClass, classes?.tbody]}>
-      {content.tbody.tr.map((row, rowIndex) => (
+  <tbody class:list={[tbodyClass, classes?.tbody]}>
+    {
+      content.tbody.tr.map((row, rowIndex) => (
         <tr class:list={[rowClass, row.className]}>
           <td class="px-3 py-3 text-content-offset font-mono">{rowIndex + 1}</td>
           {row.th && (
@@ -79,7 +102,7 @@ const hasScreenCaption = Boolean(content.caption || content.subcaption)
               scope="row"
               class:list={['px-4 py-3 text-page-inverse', classes?.tbody, classes?.tbodyRowHeader]}
               set:html={row.th}
-            ></th>
+            />
           )}
           {row.td.map((td, index) => (
             <td
@@ -91,19 +114,25 @@ const hasScreenCaption = Boolean(content.caption || content.subcaption)
                 classes?.tbody,
               ]}
               set:html={td}
-            ></td>
+            />
           ))}
         </tr>
-      ))}
-    </tbody>
+      ))
+    }
+  </tbody>
 
-    {content.tfoot && (
+  {
+    content.tfoot && (
       <tfoot class:list={[tfootClass, classes?.tfoot]}>
         {content.tfoot.tr.map((row, rowIndex) => (
           <tr class:list={[rowClass, row.className]}>
             <td class="px-3 py-3 text-content-offset font-mono">{rowIndex + 1}</td>
             {row.th && (
-              <th scope="row" class:list={['px-4 py-3 text-content font-semibold', classes?.tfoot]} set:html={row.th}></th>
+              <th
+                scope="row"
+                class:list={['px-4 py-3 text-content font-semibold', classes?.tfoot]}
+                set:html={row.th}
+              />
             )}
             {row.td.map((td, index) => (
               <td
@@ -114,10 +143,11 @@ const hasScreenCaption = Boolean(content.caption || content.subcaption)
                   classes?.tfoot,
                 ]}
                 set:html={td}
-              ></td>
+              />
             ))}
           </tr>
         ))}
       </tfoot>
-    )}
+    )
+  }
 </table>
diff --git a/src/components/Table/layouts/report-table.astro b/src/components/Table/layouts/report-table.astro
index 974516253..7d7ea0f8e 100644
--- a/src/components/Table/layouts/report-table.astro
+++ b/src/components/Table/layouts/report-table.astro
@@ -38,38 +38,63 @@ const headerClass = 'px-5 py-3 font-semibold text-content-active'
 const theadClass = 'border-y-2 border-primary bg-page-offset'
 const tbodyClass = ''
 const tfootClass = ''
-const rowClass = 'transition-colors duration-150 hover:bg-page-offset border-b border-trim-offset last:border-b-0'
+const rowClass =
+  'transition-colors duration-150 hover:bg-page-offset border-b border-trim-offset last:border-b-0'
 const hasScreenCaption = Boolean(content.caption || content.subcaption)
 ---
 
-<table class:list={[tableClass, content.thead ? 'print-table-has-head' : 'print-table-no-head', classes?.table]}>
-    {(hasScreenCaption || content.figure) && (
-      <caption class:list={[captionClass, content.figure ? 'print-table-caption' : '', !hasScreenCaption ? 'hidden' : '', classes?.caption]}>
+<table
+  class:list={[
+    tableClass,
+    content.thead ? 'print-table-has-head' : 'print-table-no-head',
+    classes?.table,
+  ]}
+>
+  {
+    (hasScreenCaption || content.figure) && (
+      <caption
+        class:list={[
+          captionClass,
+          content.figure ? 'print-table-caption' : '',
+          !hasScreenCaption ? 'hidden' : '',
+          classes?.caption,
+        ]}
+      >
         {hasScreenCaption && (
           <span class="screen-table-caption-copy">
-            {content.caption && <span class="block" set:html={content.caption}></span>}
-            {content.subcaption && <span class="block" set:html={content.subcaption}></span>}
+            {content.caption && <span class="block" set:html={content.caption} />}
+            {content.subcaption && <span class="block" set:html={content.subcaption} />}
           </span>
         )}
-        {content.figure && <span class="hidden print-table-figure-copy" set:html={content.figure}></span>}
+        {content.figure && (
+          <span class="hidden print-table-figure-copy" set:html={content.figure} />
+        )}
       </caption>
-    )}
+    )
+  }
 
-    {content.thead && (
+  {
+    content.thead && (
       <thead class:list={[theadClass, classes?.thead]}>
         <tr>
-          {content.thead.th.map((th) => (
-            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th}></th>
+          {content.thead.th.map(th => (
+            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th} />
           ))}
         </tr>
       </thead>
-    )}
+    )
+  }
 
-    <tbody class:list={[tbodyClass, classes?.tbody]}>
-      {content.tbody.tr.map((row) => (
+  <tbody class:list={[tbodyClass, classes?.tbody]}>
+    {
+      content.tbody.tr.map(row => (
         <tr class={rowClass}>
           {row.th && (
-            <th scope="row" class:list={['px-5 py-3 text-content font-semibold', classes?.tbody]} set:html={row.th}></th>
+            <th
+              scope="row"
+              class:list={['px-5 py-3 text-content font-semibold', classes?.tbody]}
+              set:html={row.th}
+            />
           )}
           {row.td.map((td, index) => (
             <td
@@ -80,18 +105,24 @@ const hasScreenCaption = Boolean(content.caption || content.subcaption)
                 classes?.tbody,
               ]}
               set:html={td}
-            ></td>
+            />
           ))}
         </tr>
-      ))}
-    </tbody>
+      ))
+    }
+  </tbody>
 
-    {content.tfoot && (
+  {
+    content.tfoot && (
       <tfoot class:list={[tfootClass, classes?.tfoot]}>
-        {content.tfoot.tr.map((row) => (
+        {content.tfoot.tr.map(row => (
           <tr class={rowClass}>
             {row.th && (
-              <th scope="row" class:list={['px-5 py-3 text-content font-semibold', classes?.tfoot]} set:html={row.th}></th>
+              <th
+                scope="row"
+                class:list={['px-5 py-3 text-content font-semibold', classes?.tfoot]}
+                set:html={row.th}
+              />
             )}
             {row.td.map((td, index) => (
               <td
@@ -102,10 +133,11 @@ const hasScreenCaption = Boolean(content.caption || content.subcaption)
                   classes?.tfoot,
                 ]}
                 set:html={td}
-              ></td>
+              />
             ))}
           </tr>
         ))}
       </tfoot>
-    )}
+    )
+  }
 </table>
diff --git a/src/components/Table/layouts/semantic-coloring.astro b/src/components/Table/layouts/semantic-coloring.astro
index 5dc885a54..73da7306c 100644
--- a/src/components/Table/layouts/semantic-coloring.astro
+++ b/src/components/Table/layouts/semantic-coloring.astro
@@ -74,7 +74,14 @@ const stateClasses = {
 } as const
 
 type SemanticStateName = keyof typeof stateClasses
-const allowedSemanticStates: SemanticStateName[] = ['accent', 'note', 'success', 'warning', 'danger', 'info']
+const allowedSemanticStates: SemanticStateName[] = [
+  'accent',
+  'note',
+  'success',
+  'warning',
+  'danger',
+  'info',
+]
 
 const isSemanticStateName = (value: string): value is SemanticStateName => {
   return allowedSemanticStates.includes(value as SemanticStateName)
@@ -117,7 +124,9 @@ const bodyColumnCount = hasRowHeaders
   ? (firstBodyRow?.td.length ?? 0) + 1
   : (firstBodyRow?.td.length ?? 0)
 const shouldPrependStateHeader = hasRowHeaders && content.thead?.th.length === bodyColumnCount - 1
-const headerCells = shouldPrependStateHeader ? ['State', ...(content.thead?.th ?? [])] : (content.thead?.th ?? [])
+const headerCells = shouldPrependStateHeader
+  ? ['State', ...(content.thead?.th ?? [])]
+  : (content.thead?.th ?? [])
 
 const getStateClass = (row: Props['content']['tbody']['tr'][number], rowIndex: number) => {
   if (typeof row.th === 'object' && row.th?.color && isSemanticStateName(row.th.color)) {
@@ -159,146 +168,72 @@ const getCellStateClass = (cell: string | { label: string; color?: string }) =>
 }
 ---
 
-<table class:list={[tableClass, content.thead ? 'print-table-has-head' : 'print-table-no-head', classes?.table]}>
-    {(hasScreenCaption || content.figure) && (
-      <caption class:list={[captionClass, content.figure ? 'print-table-caption' : '', !hasScreenCaption ? 'hidden' : '', classes?.caption]}>
+<table
+  class:list={[
+    tableClass,
+    content.thead ? 'print-table-has-head' : 'print-table-no-head',
+    classes?.table,
+  ]}
+>
+  {
+    (hasScreenCaption || content.figure) && (
+      <caption
+        class:list={[
+          captionClass,
+          content.figure ? 'print-table-caption' : '',
+          !hasScreenCaption ? 'hidden' : '',
+          classes?.caption,
+        ]}
+      >
         {hasScreenCaption && (
           <span class="screen-table-caption-copy">
-            {content.caption && <span class="block" set:html={content.caption}></span>}
-            {content.subcaption && <span class="block" set:html={content.subcaption}></span>}
+            {content.caption && <span class="block" set:html={content.caption} />}
+            {content.subcaption && <span class="block" set:html={content.subcaption} />}
           </span>
         )}
-        {content.figure && <span class="hidden print-table-figure-copy" set:html={content.figure}></span>}
+        {content.figure && (
+          <span class="hidden print-table-figure-copy" set:html={content.figure} />
+        )}
       </caption>
-    )}
+    )
+  }
 
-    {content.thead && (
+  {
+    content.thead && (
       <thead class:list={[theadClass, classes?.thead]}>
         <tr>
-          {headerCells.map((th) => (
-            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th}></th>
+          {headerCells.map(th => (
+            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th} />
           ))}
         </tr>
       </thead>
-    )}
+    )
+  }
 
-    <tbody class:list={[tbodyClass, classes?.tbody]}>
-      {content.tbody.tr.map((row, rowIndex) => {
+  <tbody class:list={[tbodyClass, classes?.tbody]}>
+    {
+      content.tbody.tr.map((row, rowIndex) => {
         const stateClass = getStateClass(row, rowIndex)
 
         return (
-          <tr class:list={[
-            'border-b last:border-b-0 border-trim',
-            stateClass.rowBgClass,
-          ]}>
+          <tr class:list={['border-b last:border-b-0 border-trim', stateClass.rowBgClass]}>
             <td class="px-5 py-3 font-bold relative">
-              <span class={stateClass.textClass}>
-                {getStateLabel(row)}
-              </span>
+              <span class={stateClass.textClass}>{getStateLabel(row)}</span>
             </td>
-            {row.th ? (
-              row.td.map((td, index) => (
-                <td
-                  class:list={[
-                    'px-5 py-3',
-                    index === 0 ? 'font-medium text-content' : 'text-content',
-                    classes?.tbody,
-                  ]}
-                >
-                  {(() => {
-                    const cellStateClass = getCellStateClass(td)
-
-                    if (!cellStateClass) {
-                      return <span set:html={getCellLabel(td)}></span>
-                    }
-
-                    return (
-                      <span
-                        class:list={[
-                          'inline-flex rounded-md px-2.5 py-1 font-medium',
-                          cellStateClass.rowBgClass,
-                          cellStateClass.textClass,
-                        ]}
-                        set:html={getCellLabel(td)}
-                      ></span>
-                    )
-                  })()}
-                </td>
-              ))
-            ) : (
-              row.td.map((td, index) => (
-                <td
-                  class:list={[
-                    'px-5 py-3',
-                    index === 0 ? 'font-medium text-content' : 'text-content',
-                    classes?.tbody,
-                  ]}
-                >
-                  {(() => {
-                    const cellStateClass = getCellStateClass(td)
-
-                    if (!cellStateClass) {
-                      return <span set:html={getCellLabel(td)}></span>
-                    }
-
-                    return (
-                      <span
-                        class:list={[
-                          'inline-flex rounded-md px-2.5 py-1 font-medium',
-                          cellStateClass.rowBgClass,
-                          cellStateClass.textClass,
-                        ]}
-                        set:html={getCellLabel(td)}
-                      ></span>
-                    )
-                  })()}
-                </td>
-              ))
-            )}
-          </tr>
-        )
-      })}
-    </tbody>
-
-    {content.tfoot && (
-      <tfoot class:list={[tfootClass, classes?.tfoot]}>
-        {content.tfoot.tr.map((row, rowIndex) => {
-          const fallbackRow: Props['content']['tbody']['tr'][number] =
-            row.th !== undefined
-              ? {
-                th: row.th as string,
-                td: row.td,
-              }
-              : {
-                td: row.td,
-              }
-          const stateClass = getStateClass(fallbackRow, rowIndex)
-
-          return (
-            <tr class:list={[
-              'border-b last:border-b-0 border-trim',
-              stateClass.rowBgClass,
-            ]}>
-              <td class="px-5 py-3 font-bold relative">
-                <div class:list={['absolute inset-y-0 left-0 w-1', stateClass.barClass]} />
-                <span class={stateClass.textClass}>
-                  {row.th ?? (row.td[0] ? getCellLabel(row.td[0]) : '')}
-                </span>
-              </td>
-              {row.th ? (
-                row.td.map((td, index) => (
+            {row.th
+              ? row.td.map((td, index) => (
                   <td
                     class:list={[
                       'px-5 py-3',
                       index === 0 ? 'font-medium text-content' : 'text-content',
-                      classes?.tfoot,
+                      classes?.tbody,
                     ]}
                   >
                     {(() => {
                       const cellStateClass = getCellStateClass(td)
 
                       if (!cellStateClass) {
-                        return <span set:html={getCellLabel(td)}></span>
+                        return <span set:html={getCellLabel(td)} />
                       }
 
                       return (
@@ -309,25 +244,24 @@ const getCellStateClass = (cell: string | { label: string; color?: string }) =>
                             cellStateClass.textClass,
                           ]}
                           set:html={getCellLabel(td)}
-                        ></span>
+                        />
                       )
                     })()}
                   </td>
                 ))
-              ) : (
-                row.td.map((td, index) => (
+              : row.td.map((td, index) => (
                   <td
                     class:list={[
                       'px-5 py-3',
                       index === 0 ? 'font-medium text-content' : 'text-content',
-                      classes?.tfoot,
+                      classes?.tbody,
                     ]}
                   >
                     {(() => {
                       const cellStateClass = getCellStateClass(td)
 
                       if (!cellStateClass) {
-                        return <span set:html={getCellLabel(td)}></span>
+                        return <span set:html={getCellLabel(td)} />
                       }
 
                       return (
@@ -338,15 +272,101 @@ const getCellStateClass = (cell: string | { label: string; color?: string }) =>
                             cellStateClass.textClass,
                           ]}
                           set:html={getCellLabel(td)}
-                        ></span>
+                        />
                       )
                     })()}
                   </td>
-                ))
-              )}
+                ))}
+          </tr>
+        )
+      })
+    }
+  </tbody>
+
+  {
+    content.tfoot && (
+      <tfoot class:list={[tfootClass, classes?.tfoot]}>
+        {content.tfoot.tr.map((row, rowIndex) => {
+          const fallbackRow: Props['content']['tbody']['tr'][number] =
+            row.th !== undefined
+              ? {
+                  th: row.th as string,
+                  td: row.td,
+                }
+              : {
+                  td: row.td,
+                }
+          const stateClass = getStateClass(fallbackRow, rowIndex)
+
+          return (
+            <tr class:list={['border-b last:border-b-0 border-trim', stateClass.rowBgClass]}>
+              <td class="px-5 py-3 font-bold relative">
+                <div class:list={['absolute inset-y-0 left-0 w-1', stateClass.barClass]} />
+                <span class={stateClass.textClass}>
+                  {row.th ?? (row.td[0] ? getCellLabel(row.td[0]) : '')}
+                </span>
+              </td>
+              {row.th
+                ? row.td.map((td, index) => (
+                    <td
+                      class:list={[
+                        'px-5 py-3',
+                        index === 0 ? 'font-medium text-content' : 'text-content',
+                        classes?.tfoot,
+                      ]}
+                    >
+                      {(() => {
+                        const cellStateClass = getCellStateClass(td)
+
+                        if (!cellStateClass) {
+                          return <span set:html={getCellLabel(td)} />
+                        }
+
+                        return (
+                          <span
+                            class:list={[
+                              'inline-flex rounded-md px-2.5 py-1 font-medium',
+                              cellStateClass.rowBgClass,
+                              cellStateClass.textClass,
+                            ]}
+                            set:html={getCellLabel(td)}
+                          />
+                        )
+                      })()}
+                    </td>
+                  ))
+                : row.td.map((td, index) => (
+                    <td
+                      class:list={[
+                        'px-5 py-3',
+                        index === 0 ? 'font-medium text-content' : 'text-content',
+                        classes?.tfoot,
+                      ]}
+                    >
+                      {(() => {
+                        const cellStateClass = getCellStateClass(td)
+
+                        if (!cellStateClass) {
+                          return <span set:html={getCellLabel(td)} />
+                        }
+
+                        return (
+                          <span
+                            class:list={[
+                              'inline-flex rounded-md px-2.5 py-1 font-medium',
+                              cellStateClass.rowBgClass,
+                              cellStateClass.textClass,
+                            ]}
+                            set:html={getCellLabel(td)}
+                          />
+                        )
+                      })()}
+                    </td>
+                  ))}
             </tr>
           )
         })}
       </tfoot>
-    )}
+    )
+  }
 </table>
diff --git a/src/components/Table/layouts/soft-header-card.astro b/src/components/Table/layouts/soft-header-card.astro
index b2bb5c239..f972190a1 100644
--- a/src/components/Table/layouts/soft-header-card.astro
+++ b/src/components/Table/layouts/soft-header-card.astro
@@ -38,36 +38,66 @@ const headerClass = 'px-5 py-3 font-semibold text-content-active'
 const theadClass = 'bg-page-offset border-b border-trim'
 const tbodyClass = ''
 const tfootClass = ''
-const rowClass = 'transition-colors duration-150 hover:bg-page-offset border-b border-trim-offset last:border-b-0'
+const rowClass =
+  'transition-colors duration-150 hover:bg-page-offset border-b border-trim-offset last:border-b-0'
 const hasScreenCaption = Boolean(content.caption || content.subcaption)
 ---
-<table class:list={[tableClass, content.thead ? 'print-table-has-head' : 'print-table-no-head', classes?.table]}>
-    {(hasScreenCaption || content.figure) && (
-      <caption class:list={[captionClass, content.figure ? 'print-table-caption' : '', !hasScreenCaption ? 'hidden' : '', classes?.caption]}>
+
+<table
+  class:list={[
+    tableClass,
+    content.thead ? 'print-table-has-head' : 'print-table-no-head',
+    classes?.table,
+  ]}
+>
+  {
+    (hasScreenCaption || content.figure) && (
+      <caption
+        class:list={[
+          captionClass,
+          content.figure ? 'print-table-caption' : '',
+          !hasScreenCaption ? 'hidden' : '',
+          classes?.caption,
+        ]}
+      >
         {hasScreenCaption && (
           <span class="screen-table-caption-copy">
-            {content.caption && <span class="block text-base font-semibold" set:html={content.caption}></span>}
-            {content.subcaption && <span class="block text-sm text-content-inverse" set:html={content.subcaption}></span>}
+            {content.caption && (
+              <span class="block text-base font-semibold" set:html={content.caption} />
+            )}
+            {content.subcaption && (
+              <span class="block text-sm text-content-inverse" set:html={content.subcaption} />
+            )}
           </span>
         )}
-        {content.figure && <span class="hidden print-table-figure-copy" set:html={content.figure}></span>}
+        {content.figure && (
+          <span class="hidden print-table-figure-copy" set:html={content.figure} />
+        )}
       </caption>
-    )}
-    {content.thead && (
+    )
+  }
+  {
+    content.thead && (
       <thead class:list={[theadClass, classes?.thead]}>
         <tr>
-          {content.thead.th.map((th) => (
-            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th}></th>
+          {content.thead.th.map(th => (
+            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th} />
           ))}
         </tr>
       </thead>
-    )}
+    )
+  }
 
-    <tbody class:list={[tbodyClass, classes?.tbody]}>
-      {content.tbody.tr.map((row) => (
+  <tbody class:list={[tbodyClass, classes?.tbody]}>
+    {
+      content.tbody.tr.map(row => (
         <tr class={rowClass}>
           {row.th && (
-            <th scope="row" class:list={['px-5 py-3 font-semibold text-content', classes?.tbody]} set:html={row.th}></th>
+            <th
+              scope="row"
+              class:list={['px-5 py-3 font-semibold text-content', classes?.tbody]}
+              set:html={row.th}
+            />
           )}
           {row.td.map((td, index) => (
             <td
@@ -78,18 +108,24 @@ const hasScreenCaption = Boolean(content.caption || content.subcaption)
                 classes?.tbody,
               ]}
               set:html={td}
-            ></td>
+            />
           ))}
         </tr>
-      ))}
-    </tbody>
+      ))
+    }
+  </tbody>
 
-    {content.tfoot && (
+  {
+    content.tfoot && (
       <tfoot class:list={[tfootClass, classes?.tfoot]}>
-        {content.tfoot.tr.map((row) => (
+        {content.tfoot.tr.map(row => (
           <tr class={rowClass}>
             {row.th && (
-              <th scope="row" class:list={['px-5 py-3 font-semibold text-content', classes?.tfoot]} set:html={row.th}></th>
+              <th
+                scope="row"
+                class:list={['px-5 py-3 font-semibold text-content', classes?.tfoot]}
+                set:html={row.th}
+              />
             )}
             {row.td.map((td, index) => (
               <td
@@ -100,10 +136,11 @@ const hasScreenCaption = Boolean(content.caption || content.subcaption)
                   classes?.tfoot,
                 ]}
                 set:html={td}
-              ></td>
+              />
             ))}
           </tr>
         ))}
       </tfoot>
-    )}
+    )
+  }
 </table>
diff --git a/src/components/Table/layouts/sticky-header.astro b/src/components/Table/layouts/sticky-header.astro
index 7f32d0ffd..1210fa5ad 100644
--- a/src/components/Table/layouts/sticky-header.astro
+++ b/src/components/Table/layouts/sticky-header.astro
@@ -42,34 +42,58 @@ const rowClass = 'transition-colors duration-150 hover:bg-page-offset border-b b
 const hasScreenCaption = Boolean(content.caption || content.subcaption)
 ---
 
-<table class:list={[tableClass, content.thead ? 'print-table-has-head' : 'print-table-no-head', classes?.table]}>
-    {(hasScreenCaption || content.figure) && (
-      <caption class:list={[captionClass, content.figure ? 'print-table-caption' : '', !hasScreenCaption ? 'hidden' : '', classes?.caption]}>
+<table
+  class:list={[
+    tableClass,
+    content.thead ? 'print-table-has-head' : 'print-table-no-head',
+    classes?.table,
+  ]}
+>
+  {
+    (hasScreenCaption || content.figure) && (
+      <caption
+        class:list={[
+          captionClass,
+          content.figure ? 'print-table-caption' : '',
+          !hasScreenCaption ? 'hidden' : '',
+          classes?.caption,
+        ]}
+      >
         {hasScreenCaption && (
           <span class="screen-table-caption-copy">
-            {content.caption && <span class="block" set:html={content.caption}></span>}
-            {content.subcaption && <span class="block" set:html={content.subcaption}></span>}
+            {content.caption && <span class="block" set:html={content.caption} />}
+            {content.subcaption && <span class="block" set:html={content.subcaption} />}
           </span>
         )}
-        {content.figure && <span class="hidden print-table-figure-copy" set:html={content.figure}></span>}
+        {content.figure && (
+          <span class="hidden print-table-figure-copy" set:html={content.figure} />
+        )}
       </caption>
-    )}
+    )
+  }
 
-    {content.thead && (
+  {
+    content.thead && (
       <thead class:list={[theadClass, classes?.thead]}>
         <tr>
-          {content.thead.th.map((th) => (
-            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th}></th>
+          {content.thead.th.map(th => (
+            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th} />
           ))}
         </tr>
       </thead>
-    )}
+    )
+  }
 
-    <tbody class:list={[tbodyClass, classes?.tbody]}>
-      {content.tbody.tr.map((row) => (
+  <tbody class:list={[tbodyClass, classes?.tbody]}>
+    {
+      content.tbody.tr.map(row => (
         <tr class={rowClass}>
           {row.th && (
-            <th scope="row" class:list={['px-5 py-3 text-content font-medium', classes?.tbody]} set:html={row.th}></th>
+            <th
+              scope="row"
+              class:list={['px-5 py-3 text-content font-medium', classes?.tbody]}
+              set:html={row.th}
+            />
           )}
           {row.td.map((td, index) => (
             <td
@@ -80,18 +104,24 @@ const hasScreenCaption = Boolean(content.caption || content.subcaption)
                 classes?.tbody,
               ]}
               set:html={td}
-            ></td>
+            />
           ))}
         </tr>
-      ))}
-    </tbody>
+      ))
+    }
+  </tbody>
 
-    {content.tfoot && (
+  {
+    content.tfoot && (
       <tfoot class:list={[tfootClass, classes?.tfoot]}>
-        {content.tfoot.tr.map((row) => (
+        {content.tfoot.tr.map(row => (
           <tr class={rowClass}>
             {row.th && (
-              <th scope="row" class:list={['px-5 py-3 text-content font-medium', classes?.tfoot]} set:html={row.th}></th>
+              <th
+                scope="row"
+                class:list={['px-5 py-3 text-content font-medium', classes?.tfoot]}
+                set:html={row.th}
+              />
             )}
             {row.td.map((td, index) => (
               <td
@@ -102,10 +132,11 @@ const hasScreenCaption = Boolean(content.caption || content.subcaption)
                   classes?.tfoot,
                 ]}
                 set:html={td}
-              ></td>
+              />
             ))}
           </tr>
         ))}
       </tfoot>
-    )}
+    )
+  }
 </table>
diff --git a/src/components/Table/layouts/striped-rows.astro b/src/components/Table/layouts/striped-rows.astro
index b78bbbd6c..234ce25dd 100644
--- a/src/components/Table/layouts/striped-rows.astro
+++ b/src/components/Table/layouts/striped-rows.astro
@@ -41,38 +41,58 @@ const tfootClass = ''
 const hasScreenCaption = Boolean(content.caption || content.subcaption)
 ---
 
-<table class:list={[tableClass, content.thead ? 'print-table-has-head' : 'print-table-no-head', classes?.table]}>
-    {(hasScreenCaption || content.figure) && (
-      <caption class:list={[captionClass, content.figure ? 'print-table-caption' : '', !hasScreenCaption ? 'hidden' : '', classes?.caption]}>
+<table
+  class:list={[
+    tableClass,
+    content.thead ? 'print-table-has-head' : 'print-table-no-head',
+    classes?.table,
+  ]}
+>
+  {
+    (hasScreenCaption || content.figure) && (
+      <caption
+        class:list={[
+          captionClass,
+          content.figure ? 'print-table-caption' : '',
+          !hasScreenCaption ? 'hidden' : '',
+          classes?.caption,
+        ]}
+      >
         {hasScreenCaption && (
           <span class="screen-table-caption-copy">
-            {content.caption && <span class="block" set:html={content.caption}></span>}
-            {content.subcaption && <span class="block" set:html={content.subcaption}></span>}
+            {content.caption && <span class="block" set:html={content.caption} />}
+            {content.subcaption && <span class="block" set:html={content.subcaption} />}
           </span>
         )}
-        {content.figure && <span class="hidden print-table-figure-copy" set:html={content.figure}></span>}
+        {content.figure && (
+          <span class="hidden print-table-figure-copy" set:html={content.figure} />
+        )}
       </caption>
-    )}
+    )
+  }
 
-    {content.thead && (
+  {
+    content.thead && (
       <thead class:list={[theadClass, classes?.thead]}>
         <tr>
-          {content.thead.th.map((th) => (
-            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th}></th>
+          {content.thead.th.map(th => (
+            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th} />
           ))}
         </tr>
       </thead>
-    )}
+    )
+  }
 
-    <tbody class:list={[tbodyClass, classes?.tbody]}>
-      {content.tbody.tr.map((row, rowIndex) => (
-        <tr
-          class:list={[
-            rowIndex % 2 === 0 ? 'bg-content-inverse' : 'bg-page-offset',
-          ]}
-        >
+  <tbody class:list={[tbodyClass, classes?.tbody]}>
+    {
+      content.tbody.tr.map((row, rowIndex) => (
+        <tr class:list={[rowIndex % 2 === 0 ? 'bg-content-inverse' : 'bg-page-offset']}>
           {row.th && (
-            <th scope="row" class:list={['px-5 py-3 text-content font-medium', classes?.tbody]} set:html={row.th}></th>
+            <th
+              scope="row"
+              class:list={['px-5 py-3 text-content font-medium', classes?.tbody]}
+              set:html={row.th}
+            />
           )}
           {row.td.map((td, index) => (
             <td
@@ -83,18 +103,24 @@ const hasScreenCaption = Boolean(content.caption || content.subcaption)
                 classes?.tbody,
               ]}
               set:html={td}
-            ></td>
+            />
           ))}
         </tr>
-      ))}
-    </tbody>
+      ))
+    }
+  </tbody>
 
-    {content.tfoot && (
+  {
+    content.tfoot && (
       <tfoot class:list={[tfootClass, classes?.tfoot]}>
-        {content.tfoot.tr.map((row) => (
+        {content.tfoot.tr.map(row => (
           <tr class="bg-content-inverse">
             {row.th && (
-              <th scope="row" class:list={['px-5 py-3 text-content font-medium', classes?.tfoot]} set:html={row.th}></th>
+              <th
+                scope="row"
+                class:list={['px-5 py-3 text-content font-medium', classes?.tfoot]}
+                set:html={row.th}
+              />
             )}
             {row.td.map((td, index) => (
               <td
@@ -105,10 +131,11 @@ const hasScreenCaption = Boolean(content.caption || content.subcaption)
                   classes?.tfoot,
                 ]}
                 set:html={td}
-              ></td>
+              />
             ))}
           </tr>
         ))}
       </tfoot>
-    )}
+    )
+  }
 </table>
diff --git a/src/components/Table/layouts/timeline-labels.astro b/src/components/Table/layouts/timeline-labels.astro
index 646e52465..599519cc6 100644
--- a/src/components/Table/layouts/timeline-labels.astro
+++ b/src/components/Table/layouts/timeline-labels.astro
@@ -38,7 +38,8 @@ const headerClass = 'px-4 py-2.5 font-semibold text-content-active'
 const theadClass = 'bg-page-offset border-b border-trim'
 const tbodyClass = ''
 const tfootClass = ''
-const rowClass = 'transition-colors duration-150 hover:bg-page-offset border-b border-trim-offset last:border-b-0'
+const rowClass =
+  'transition-colors duration-150 hover:bg-page-offset border-b border-trim-offset last:border-b-0'
 const hasScreenCaption = Boolean(content.caption || content.subcaption)
 
 const getMarkerColorClass = (rowHeader: string | { label: string; color?: string }) => {
@@ -56,43 +57,60 @@ const getMarkerColorClass = (rowHeader: string | { label: string; color?: string
 }
 ---
 
-<table class:list={[tableClass, content.thead ? 'print-table-has-head' : 'print-table-no-head', classes?.table]}>
-    {(hasScreenCaption || content.figure) && (
-      <caption class:list={[captionClass, content.figure ? 'print-table-caption' : '', !hasScreenCaption ? 'hidden' : '', classes?.caption]}>
+<table
+  class:list={[
+    tableClass,
+    content.thead ? 'print-table-has-head' : 'print-table-no-head',
+    classes?.table,
+  ]}
+>
+  {
+    (hasScreenCaption || content.figure) && (
+      <caption
+        class:list={[
+          captionClass,
+          content.figure ? 'print-table-caption' : '',
+          !hasScreenCaption ? 'hidden' : '',
+          classes?.caption,
+        ]}
+      >
         {hasScreenCaption && (
           <span class="screen-table-caption-copy">
-            {content.caption && <span class="block" set:html={content.caption}></span>}
-            {content.subcaption && <span class="block" set:html={content.subcaption}></span>}
+            {content.caption && <span class="block" set:html={content.caption} />}
+            {content.subcaption && <span class="block" set:html={content.subcaption} />}
           </span>
         )}
-        {content.figure && <span class="hidden print-table-figure-copy" set:html={content.figure}></span>}
+        {content.figure && (
+          <span class="hidden print-table-figure-copy" set:html={content.figure} />
+        )}
       </caption>
-    )}
+    )
+  }
 
-    {content.thead && (
+  {
+    content.thead && (
       <thead class:list={[theadClass, classes?.thead]}>
         <tr>
-          {content.thead.th.map((th) => (
-            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th}></th>
+          {content.thead.th.map(th => (
+            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th} />
           ))}
         </tr>
       </thead>
-    )}
+    )
+  }
 
-    <tbody class:list={[tbodyClass, classes?.tbody]}>
-      {content.tbody.tr.map((row) => (
+  <tbody class:list={[tbodyClass, classes?.tbody]}>
+    {
+      content.tbody.tr.map(row => (
         <tr class={rowClass}>
           {row.th && (
             <th scope="row" class:list={['px-4 py-3', classes?.tbody]}>
               <span class="inline-flex items-center gap-2.5 font-semibold text-content">
                 <span
-                  class:list={[
-                    'h-2.5 w-2.5 mb-1 rounded-full',
-                    getMarkerColorClass(row.th),
-                  ]}
+                  class:list={['h-2.5 w-2.5 mb-1 rounded-full', getMarkerColorClass(row.th)]}
                   aria-hidden="true"
                 />
-                <span set:html={typeof row.th === 'string' ? row.th : row.th.label}></span>
+                <span set:html={typeof row.th === 'string' ? row.th : row.th.label} />
               </span>
             </th>
           )}
@@ -105,21 +123,23 @@ const getMarkerColorClass = (rowHeader: string | { label: string; color?: string
                 classes?.tbody,
               ]}
               set:html={td}
-            ></td>
+            />
           ))}
         </tr>
-      ))}
-    </tbody>
+      ))
+    }
+  </tbody>
 
-    {content.tfoot && (
+  {
+    content.tfoot && (
       <tfoot class:list={[tfootClass, classes?.tfoot]}>
-        {content.tfoot.tr.map((row) => (
+        {content.tfoot.tr.map(row => (
           <tr class={rowClass}>
             {row.th && (
               <th scope="row" class:list={['px-4 py-3', classes?.tfoot]}>
                 <span class="inline-flex items-center gap-2 font-semibold text-content">
                   <span class="h-2.5 w-2.5 mb-1 rounded-full bg-secondary" aria-hidden="true" />
-                  <span set:html={row.th}></span>
+                  <span set:html={row.th} />
                 </span>
               </th>
             )}
@@ -132,10 +152,11 @@ const getMarkerColorClass = (rowHeader: string | { label: string; color?: string
                   classes?.tfoot,
                 ]}
                 set:html={td}
-              ></td>
+              />
             ))}
           </tr>
         ))}
       </tfoot>
-    )}
-    </table>
+    )
+  }
+</table>
diff --git a/src/components/Table/layouts/vertical-column-delineation.astro b/src/components/Table/layouts/vertical-column-delineation.astro
index 8cb127786..bcf5c50a8 100644
--- a/src/components/Table/layouts/vertical-column-delineation.astro
+++ b/src/components/Table/layouts/vertical-column-delineation.astro
@@ -42,38 +42,61 @@ const rowClass = 'transition-colors duration-150 hover:bg-page-offset border-b b
 const hasScreenCaption = Boolean(content.caption || content.subcaption)
 ---
 
-<table class:list={[tableClass, content.thead ? 'print-table-has-head' : 'print-table-no-head', classes?.table]}>
-    {(hasScreenCaption || content.figure) && (
-      <caption class:list={[captionClass, content.figure ? 'print-table-caption' : '', !hasScreenCaption ? 'hidden' : '', classes?.caption]}>
+<table
+  class:list={[
+    tableClass,
+    content.thead ? 'print-table-has-head' : 'print-table-no-head',
+    classes?.table,
+  ]}
+>
+  {
+    (hasScreenCaption || content.figure) && (
+      <caption
+        class:list={[
+          captionClass,
+          content.figure ? 'print-table-caption' : '',
+          !hasScreenCaption ? 'hidden' : '',
+          classes?.caption,
+        ]}
+      >
         {hasScreenCaption && (
           <span class="screen-table-caption-copy">
-            {content.caption && <span class="block" set:html={content.caption}></span>}
-            {content.subcaption && <span class="block" set:html={content.subcaption}></span>}
+            {content.caption && <span class="block" set:html={content.caption} />}
+            {content.subcaption && <span class="block" set:html={content.subcaption} />}
           </span>
         )}
-        {content.figure && <span class="hidden print-table-figure-copy" set:html={content.figure}></span>}
+        {content.figure && (
+          <span class="hidden print-table-figure-copy" set:html={content.figure} />
+        )}
       </caption>
-    )}
+    )
+  }
 
-    {content.thead && (
+  {
+    content.thead && (
       <thead class:list={[theadClass, classes?.thead]}>
         <tr>
-          {content.thead.th.map((th) => (
-            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th}></th>
+          {content.thead.th.map(th => (
+            <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th} />
           ))}
         </tr>
       </thead>
-    )}
+    )
+  }
 
-    <tbody class:list={[tbodyClass, classes?.tbody]}>
-      {content.tbody.tr.map((row) => (
+  <tbody class:list={[tbodyClass, classes?.tbody]}>
+    {
+      content.tbody.tr.map(row => (
         <tr class={rowClass}>
           {row.th && (
             <th
               scope="row"
-              class:list={['px-5 py-3 text-content border-x border-trim font-medium', classes?.tbody]}
+              class:list={[
+                'px-5 py-3 text-content border-x border-trim font-medium',
+                classes?.tbody,
+              ]}
               set:html={row.th}
-            ></th>
+            />
           )}
           {row.td.map((td, index) => (
             <td
@@ -84,22 +107,27 @@ const hasScreenCaption = Boolean(content.caption || content.subcaption)
                 classes?.tbody,
               ]}
               set:html={td}
-            ></td>
+            />
           ))}
         </tr>
-      ))}
-    </tbody>
+      ))
+    }
+  </tbody>
 
-    {content.tfoot && (
+  {
+    content.tfoot && (
       <tfoot class:list={[tfootClass, classes?.tfoot]}>
-        {content.tfoot.tr.map((row) => (
+        {content.tfoot.tr.map(row => (
           <tr class={rowClass}>
             {row.th && (
               <th
                 scope="row"
-                class:list={['px-5 py-3 text-content border-x border-trim font-medium', classes?.tfoot]}
+                class:list={[
+                  'px-5 py-3 text-content border-x border-trim font-medium',
+                  classes?.tfoot,
+                ]}
                 set:html={row.th}
-              ></th>
+              />
             )}
             {row.td.map((td, index) => (
               <td
@@ -110,10 +138,11 @@ const hasScreenCaption = Boolean(content.caption || content.subcaption)
                   classes?.tfoot,
                 ]}
                 set:html={td}
-              ></td>
+              />
             ))}
           </tr>
         ))}
       </tfoot>
-    )}
+    )
+  }
 </table>
diff --git a/src/components/ThemePicker/__mocks__/IconMock.astro b/src/components/ThemePicker/__mocks__/IconMock.astro
index 6abd739eb..d0fc2e118 100644
--- a/src/components/ThemePicker/__mocks__/IconMock.astro
+++ b/src/components/ThemePicker/__mocks__/IconMock.astro
@@ -13,9 +13,4 @@ export interface Props {
 const { class: className, name } = Astro.props
 ---
 
-<svg
-  data-icon-name={name}
-  class={className}
-  aria-hidden="true"
-  focusable="false"
-></svg>
+<svg data-icon-name={name} class={className} aria-hidden="true" focusable="false"></svg>
diff --git a/src/components/ThemePicker/client/index.ts b/src/components/ThemePicker/client/index.ts
index 364721526..2e67ec994 100644
--- a/src/components/ThemePicker/client/index.ts
+++ b/src/components/ThemePicker/client/index.ts
@@ -6,10 +6,7 @@
 
 import { LitElement } from 'lit'
 import { type EmblaCarouselType, type EmblaOptionsType } from 'embla-carousel'
-import {
-  createEmblaNavStateUpdater,
-  type EmblaNavButtonHandle,
-} from '@components/scripts/embla'
+import { createEmblaNavStateUpdater, type EmblaNavButtonHandle } from '@components/scripts/embla'
 import {
   setTheme,
   toggleThemePicker,
@@ -736,11 +733,9 @@ export class ThemePickerElement extends LitElement {
 
           // Re-measure after the max-height transition completes so the
           // offset is perfectly accurate once the panel settles.
-          this.pickerModal.addEventListener(
-            'transitionend',
-            () => updateLayoutOffsets(),
-            { once: true },
-          )
+          this.pickerModal.addEventListener('transitionend', () => updateLayoutOffsets(), {
+            once: true,
+          })
         })
       } else {
         this.pickerModal.classList.add(CLASSES.isOpen)
diff --git a/src/components/ThemePicker/index.astro b/src/components/ThemePicker/index.astro
index a221b78b1..968589595 100644
--- a/src/components/ThemePicker/index.astro
+++ b/src/components/ThemePicker/index.astro
@@ -15,11 +15,7 @@ export interface Props {
 const { closeComponent = 'close' } = Astro.props
 ---
 
-<theme-picker
-  class="print:hidden!"
-  transition:name="theme-picker-island"
-  transition:persist
->
+<theme-picker class="print:hidden!" transition:name="theme-picker-island" transition:persist>
   <div
     class:list={[
       styles.themePicker,
@@ -60,16 +56,33 @@ const { closeComponent = 'close' } = Astro.props
                   class:list={[
                     'themepicker__selectBtn',
                     [
-                      'group', 'block', 'relative', 'w-full', 'bg-page-offset', 'text-center', 'p-4'
+                      'group',
+                      'block',
+                      'relative',
+                      'w-full',
+                      'bg-page-offset',
+                      'text-center',
+                      'p-4',
                     ],
+                    ['border-3', 'border-page-inverse', 'rounded-lg'],
                     [
-                      'border-3', 'border-page-inverse', 'rounded-lg'
+                      'after:pointer-events-none',
+                      'after:absolute',
+                      'after:content-[""]',
+                      'after:inset-0',
+                      'after:rounded-none',
+                      'after:border-2',
+                      'after:border-transparent',
+                      'after:opacity-0',
+                      'after:transition-opacity',
+                      'after:duration-150',
+                      'after:ease-out',
                     ],
                     [
-                      'after:pointer-events-none', 'after:absolute', 'after:content-[""]', 'after:inset-0', 'after:rounded-none', 'after:border-2', 'after:border-transparent', 'after:opacity-0',   'after:transition-opacity', 'after:duration-150', 'after:ease-out'
-                    ],
-                    [
-                      'focus-visible:outline-none', 'focus-visible:after:opacity-100', 'focus-visible:after:-inset-1.5', 'focus-visible:after:border-spotlight'
+                      'focus-visible:outline-none',
+                      'focus-visible:after:opacity-100',
+                      'focus-visible:after:-inset-1.5',
+                      'focus-visible:after:border-spotlight',
                     ],
                   ]}
                   aria-label={`select color theme ${theme.name}`}
@@ -79,10 +92,7 @@ const { closeComponent = 'close' } = Astro.props
                     <span class="inline-block relative">
                       <span class="themepicker__themeName text-content">{theme.name}</span>
                       {theme.description && (
-                        <span
-                          class="themepicker__tooltip sr-only"
-                          data-theme-tooltip
-                        >
+                        <span class="themepicker__tooltip sr-only" data-theme-tooltip>
                           {theme.description}
                         </span>
                       )}
diff --git a/src/components/Time/index.astro b/src/components/Time/index.astro
index d46bc2bd6..846e16c68 100644
--- a/src/components/Time/index.astro
+++ b/src/components/Time/index.astro
@@ -48,13 +48,18 @@ const parsedDate =
 
 const isValidDate = parsedDate instanceof Date && !Number.isNaN(parsedDate.getTime())
 
-const dateStyleByFormatStyle: Record<NonNullable<Props['formatStyle']>, Intl.DateTimeFormatOptions['dateStyle']> = {
+const dateStyleByFormatStyle: Record<
+  NonNullable<Props['formatStyle']>,
+  Intl.DateTimeFormatOptions['dateStyle']
+> = {
   long: 'long',
   short: 'short',
   narrow: 'short',
 }
 
-const hasExplicitParts = Boolean(weekday || year || month || day || hour || minute || second || timeZoneName)
+const hasExplicitParts = Boolean(
+  weekday || year || month || day || hour || minute || second || timeZoneName
+)
 
 const fallbackText = (() => {
   if (!resolvedDatetimeString) {
@@ -108,5 +113,6 @@ const fallbackText = (() => {
     'time-zone': timeZone,
   }}
 >
-  {/** Closing tag must be on same line to prevent trailing space */ }
-  <slot>{fallbackText}</slot></relative-time>{timeZone ? ` (${timeZone})` : ''}
+  {/** Closing tag must be on same line to prevent trailing space */}
+  <slot>{fallbackText}</slot></relative-time
+>{timeZone ? ` (${timeZone})` : ''}
diff --git a/src/components/Toasts/NetworkStatus/client/index.ts b/src/components/Toasts/NetworkStatus/client/index.ts
index e19ee7749..f131eb416 100644
--- a/src/components/Toasts/NetworkStatus/client/index.ts
+++ b/src/components/Toasts/NetworkStatus/client/index.ts
@@ -146,8 +146,12 @@ export class NetworkStatusToastElement extends LitElement {
         aria-atomic="true"
       >
         <div class="flex items-center space-x-2">
-          <span class="success-icon">${successIconMarkup ? unsafeHTML(successIconMarkup) : null}</span>
-          <span class="error-icon hidden">${errorIconMarkup ? unsafeHTML(errorIconMarkup) : null}</span>
+          <span class="success-icon"
+            >${successIconMarkup ? unsafeHTML(successIconMarkup) : null}</span
+          >
+          <span class="error-icon hidden"
+            >${errorIconMarkup ? unsafeHTML(errorIconMarkup) : null}</span
+          >
           <span class="toast-message">${this.message}</span>
         </div>
       </div>
diff --git a/src/components/Toasts/NetworkStatus/client/selectors.ts b/src/components/Toasts/NetworkStatus/client/selectors.ts
index b3d247f73..678ef36e7 100644
--- a/src/components/Toasts/NetworkStatus/client/selectors.ts
+++ b/src/components/Toasts/NetworkStatus/client/selectors.ts
@@ -72,7 +72,9 @@ export function queryNetworkStatusIconMarkup(params: {
     return null
   }
 
-  const iconHostCandidate = iconBankCandidate.querySelector(`[data-network-status-icon="${iconName}"]`)
+  const iconHostCandidate = iconBankCandidate.querySelector(
+    `[data-network-status-icon="${iconName}"]`
+  )
   if (!isSpanElement(iconHostCandidate)) {
     return null
   }
diff --git a/src/components/Toc/index.astro b/src/components/Toc/index.astro
index 963109275..7feded4d1 100644
--- a/src/components/Toc/index.astro
+++ b/src/components/Toc/index.astro
@@ -34,7 +34,7 @@ const tocTree = buildTocTree(items)
           data-visible="false"
           aria-label="Close table of contents"
           class="fixed inset-0 z-(--z-content-scrim) bg-surface/80 opacity-0 backdrop-blur-sm pointer-events-none transition-opacity duration-300 data-[visible=true]:opacity-100 data-[visible=true]:pointer-events-auto md:hidden"
-        ></button>
+        />
 
         {/* Right-side drawer panel */}
         <div
@@ -44,8 +44,14 @@ const tocTree = buildTocTree(items)
           class="group/drawer fixed top-0 right-0 bottom-0 z-(--z-content-floating) w-[80vw] translate-x-full overflow-visible bg-page-base transition-transform duration-300 ease-out data-[state=open]:translate-x-0 lg:static lg:z-auto lg:w-auto lg:translate-x-0 lg:overflow-y-visible lg:overflow-x-visible lg:bg-transparent lg:h-full"
         >
           {/* Left border segments — split around the close button circle */}
-          <div class="absolute left-0 top-0 w-px bg-content lg:hidden" style="height: calc(50% - 2rem);"></div>
-          <div class="absolute left-0 bottom-0 w-px bg-content lg:hidden" style="height: calc(50% - 2rem);"></div>
+          <div
+            class="absolute left-0 top-0 w-px bg-content lg:hidden"
+            style="height: calc(50% - 2rem);"
+          />
+          <div
+            class="absolute left-0 bottom-0 w-px bg-content lg:hidden"
+            style="height: calc(50% - 2rem);"
+          />
 
           {/* Close button — vertically centered on the drawer's left edge.
               The icon starts as arrow-left and rotates 180° to arrow-right
@@ -75,44 +81,45 @@ const tocTree = buildTocTree(items)
               data-sticky-sidebar
               aria-labelledby="toc-heading"
             >
-            {/* Desktop heading — hidden on mobile where the drawer header shows instead */}
-            <div class="hidden lg:flex items-center justify-between gap-3">
-              <h2 id="toc-heading" class="text-content text-base font-semibold">
-                Table of Contents
-              </h2>
-              <span class="text-xs font-medium uppercase tracking-wide text-content-active">
-                Jump to section
-              </span>
-            </div>
-            <hr class="mt-4 border-dotted border-t-2 border-content-offset w-full hidden lg:block" />
-            <nav class="mt-4 lg:mt-4 toc-nav" aria-label="Table of contents">
-              <ol class="space-y-1">
-                {(() => {
-                  const renderNodes = (nodes: TocItem[]): unknown =>
-                    nodes.map(node => (
-                      <li>
-                        <a
-                          href={`#${node.slug}`}
-                          data-toc-link
-                          data-toc-slug={node.slug}
-                          class="flex min-h-6 items-center mb-2 text-sm sm:text-base text-content transition-colors hover:text-content-active data-[current=true]:text-content no-underline hover:underline"
-                        >
-                          {node.text}
-                        </a>
-                        {node.children.length > 0 && (
-                          <ol class="mt-2 ml-4 border-l border-trim pl-4 space-y-1">
-                            {renderNodes(node.children)}
-                          </ol>
-                        )}
-                      </li>
-                    ))
+              {/* Desktop heading — hidden on mobile where the drawer header shows instead */}
+              <div class="hidden lg:flex items-center justify-between gap-3">
+                <h2 id="toc-heading" class="text-content text-base font-semibold">
+                  Table of Contents
+                </h2>
+                <span class="text-xs font-medium uppercase tracking-wide text-content-active">
+                  Jump to section
+                </span>
+              </div>
+              <hr class="mt-4 border-dotted border-t-2 border-content-offset w-full hidden lg:block" />
+              <nav class="mt-4 lg:mt-4 toc-nav" aria-label="Table of contents">
+                <ol class="space-y-1">
+                  {(() => {
+                    const renderNodes = (nodes: TocItem[]): unknown =>
+                      nodes.map(node => (
+                        <li>
+                          <a
+                            href={`#${node.slug}`}
+                            data-toc-link
+                            data-toc-slug={node.slug}
+                            class="flex min-h-6 items-center mb-2 text-sm sm:text-base text-content transition-colors hover:text-content-active data-[current=true]:text-content no-underline hover:underline"
+                          >
+                            {node.text}
+                          </a>
+                          {node.children.length > 0 && (
+                            <ol class="mt-2 ml-4 border-l border-trim pl-4 space-y-1">
+                              {renderNodes(node.children)}
+                            </ol>
+                          )}
+                        </li>
+                      ))
 
-                  return renderNodes(tocTree)
-                })()}
-              </ol>
-            </nav>
-          </aside>
-          </div>{/* end scrollable inner wrapper */}
+                    return renderNodes(tocTree)
+                  })()}
+                </ol>
+              </nav>
+            </aside>
+          </div>
+          {/* end scrollable inner wrapper */}
         </div>
       </table-of-contents>
 
diff --git a/src/components/Tooltip/client/__tests__/index.spec.ts b/src/components/Tooltip/client/__tests__/index.spec.ts
index 2955722c2..cc30bc91a 100644
--- a/src/components/Tooltip/client/__tests__/index.spec.ts
+++ b/src/components/Tooltip/client/__tests__/index.spec.ts
@@ -39,8 +39,8 @@ describe('TooltipElement', () => {
 
       initializeTooltipHost(element)
 
-        await flushMicrotasks()
-        await assertion({ element, window: window as unknown as Window })
+      await flushMicrotasks()
+      await assertion({ element, window: window as unknown as Window })
     })
   }
 
@@ -164,4 +164,4 @@ describe('TooltipElement', () => {
       }
     )
   })
-})
\ No newline at end of file
+})
diff --git a/src/components/Tooltip/client/__tests__/selectors.spec.ts b/src/components/Tooltip/client/__tests__/selectors.spec.ts
index 4467db681..7549b1ef0 100644
--- a/src/components/Tooltip/client/__tests__/selectors.spec.ts
+++ b/src/components/Tooltip/client/__tests__/selectors.spec.ts
@@ -49,4 +49,4 @@ describe('Tooltip selectors', () => {
       },
     })
   })
-})
\ No newline at end of file
+})
diff --git a/src/components/Tooltip/client/index.ts b/src/components/Tooltip/client/index.ts
index de4ba3c67..cfdf97570 100644
--- a/src/components/Tooltip/client/index.ts
+++ b/src/components/Tooltip/client/index.ts
@@ -27,7 +27,9 @@ const scheduleMicrotask = (callback: () => void): void => {
   void Promise.resolve().then(callback)
 }
 
-export const initializeTooltipHost = (host: HTMLElement): {
+export const initializeTooltipHost = (
+  host: HTMLElement
+): {
   trigger: HTMLSpanElement
   tooltip: HTMLSpanElement
 } => {
diff --git a/src/components/Tooltip/client/selectors.ts b/src/components/Tooltip/client/selectors.ts
index 12c5dc157..ca933fe7f 100644
--- a/src/components/Tooltip/client/selectors.ts
+++ b/src/components/Tooltip/client/selectors.ts
@@ -5,11 +5,12 @@ export const SELECTORS = {
   trigger: '[data-tooltip-trigger]',
   tooltip: '[data-tooltip-popup]',
   upgradeCandidates: '[data-tooltip][title]',
-  focusableDescendant:
-    'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])',
+  focusableDescendant: 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])',
 } as const
 
-export const getTooltipElements = (root: ParentNode): {
+export const getTooltipElements = (
+  root: ParentNode
+): {
   trigger: HTMLSpanElement
   tooltip: HTMLSpanElement
 } => {
@@ -56,4 +57,4 @@ export const hasTooltipElements = (root: ParentNode): boolean => {
   const tooltip = root.querySelector(SELECTORS.tooltip)
 
   return isSpanElement(trigger) && isSpanElement(tooltip)
-}
\ No newline at end of file
+}
diff --git a/src/components/Tooltip/index.astro b/src/components/Tooltip/index.astro
index a6ea3db19..54238bcaa 100644
--- a/src/components/Tooltip/index.astro
+++ b/src/components/Tooltip/index.astro
@@ -1,52 +1,46 @@
 ---
 export type Props = {
-	text?: string
-	id?: string
-	class?: string
-	triggerClass?: string
-	tooltipClass?: string
+  text?: string
+  id?: string
+  class?: string
+  triggerClass?: string
+  tooltipClass?: string
 }
 
-const {
-	text,
-	id,
-	class: className,
-	triggerClass,
-	tooltipClass,
-}: Props = Astro.props
+const { text, id, class: className, triggerClass, tooltipClass }: Props = Astro.props
 
 const shouldRenderWrapper = typeof text === 'string' && text.trim().length > 0
 ---
 
 {
-	shouldRenderWrapper && (
-		<site-tooltip class:list={['relative inline-flex', className]}>
-			<span
-				data-tooltip-trigger
-				class:list={[
-					'inline-flex items-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-spotlight',
-					triggerClass,
-				]}
-			>
-				<slot />
-			</span>
-			<span
-				data-tooltip-popup
-				id={id}
-				role="tooltip"
-				aria-hidden="true"
-				class:list={[
-					'pointer-events-none absolute left-0 top-full z-(--z-content-floating) mt-2 hidden max-w-64 rounded-md border border-trim bg-page-inverse px-2 py-1 text-sm leading-tight text-page-base shadow-elevated whitespace-nowrap',
-					tooltipClass,
-				]}
-			>
-				{text}
-			</span>
-		</site-tooltip>
-	)
+  shouldRenderWrapper && (
+    <site-tooltip class:list={['relative inline-flex', className]}>
+      <span
+        data-tooltip-trigger
+        class:list={[
+          'inline-flex items-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-spotlight',
+          triggerClass,
+        ]}
+      >
+        <slot />
+      </span>
+      <span
+        data-tooltip-popup
+        id={id}
+        role="tooltip"
+        aria-hidden="true"
+        class:list={[
+          'pointer-events-none absolute left-0 top-full z-(--z-content-floating) mt-2 hidden max-w-64 rounded-md border border-trim bg-page-inverse px-2 py-1 text-sm leading-tight text-page-base shadow-elevated whitespace-nowrap',
+          tooltipClass,
+        ]}
+      >
+        {text}
+      </span>
+    </site-tooltip>
+  )
 }
 
 <script>
-	import { registerTooltipWebComponent } from '@components/Tooltip/client'
-	registerTooltipWebComponent()
+  import { registerTooltipWebComponent } from '@components/Tooltip/client'
+  registerTooltipWebComponent()
 </script>
diff --git a/src/components/Troubleshooter/__fixtures__/index.fixture.astro b/src/components/Troubleshooter/__fixtures__/index.fixture.astro
index 8b4d48300..bc6f6a48b 100644
--- a/src/components/Troubleshooter/__fixtures__/index.fixture.astro
+++ b/src/components/Troubleshooter/__fixtures__/index.fixture.astro
@@ -39,4 +39,4 @@ import Troubleshooter from '@components/Troubleshooter/index.astro'
   }}
 >
   <h3>Verification failed in CI</h3>
-</Troubleshooter>
\ No newline at end of file
+</Troubleshooter>
diff --git a/src/components/Troubleshooter/__tests__/index.spec.ts b/src/components/Troubleshooter/__tests__/index.spec.ts
index 72734405d..beaaab236 100644
--- a/src/components/Troubleshooter/__tests__/index.spec.ts
+++ b/src/components/Troubleshooter/__tests__/index.spec.ts
@@ -23,7 +23,9 @@ describe('Troubleshooter (Astro)', () => {
       const visibleHeading = region?.querySelector('h3')
       expect(visibleHeading?.textContent).toContain('Verification failed in CI')
 
-      const sectionHeadings = Array.from(region?.querySelectorAll('section[aria-labelledby] h4') ?? [])
+      const sectionHeadings = Array.from(
+        region?.querySelectorAll('section[aria-labelledby] h4') ?? []
+      )
       expect(sectionHeadings.map(heading => heading.textContent?.trim())).toEqual([
         'Symptoms',
         'Cause',
@@ -46,4 +48,4 @@ describe('Troubleshooter (Astro)', () => {
       expect(marker).toBeTruthy()
     })
   })
-})
\ No newline at end of file
+})
diff --git a/src/components/Troubleshooter/index.astro b/src/components/Troubleshooter/index.astro
index 3ac806c34..a82221eb8 100644
--- a/src/components/Troubleshooter/index.astro
+++ b/src/components/Troubleshooter/index.astro
@@ -55,12 +55,22 @@ function getSectionClassNames(color: string) {
   <div class="border-b border-trim bg-page-base px-6 py-4">
     <div class="flex flex-col gap-3">
       <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-        <p class="m-0 text-xs font-bold uppercase tracking-[0.14em] text-content-offset">Troubleshooting</p>
+        <p class="m-0 text-xs font-bold uppercase tracking-[0.14em] text-content-offset">
+          Troubleshooting
+        </p>
         <div class="hidden flex-wrap gap-2 text-xs sm:flex" aria-hidden="true">
-          <span class="rounded-full bg-danger-inverse px-3 py-1 font-semibold text-danger">Build Integrity</span>
-          <span class="rounded-full bg-warning-inverse px-3 py-1 font-semibold text-warning">Root Cause</span>
-          <span class="rounded-full bg-info-inverse px-3 py-1 font-semibold text-info">Verification</span>
-          <span class="rounded-full bg-success-inverse px-3 py-1 font-semibold text-success">Actionable</span>
+          <span class="rounded-full bg-danger-inverse px-3 py-1 font-semibold text-danger"
+            >Build Integrity</span
+          >
+          <span class="rounded-full bg-warning-inverse px-3 py-1 font-semibold text-warning"
+            >Root Cause</span
+          >
+          <span class="rounded-full bg-info-inverse px-3 py-1 font-semibold text-info"
+            >Verification</span
+          >
+          <span class="rounded-full bg-success-inverse px-3 py-1 font-semibold text-success"
+            >Actionable</span
+          >
         </div>
       </div>
       <div class="[&_h3]:relative [&_h3]:text-page-inverse [&_h3]:group [&_h3]:mt-0! [&_h3]:mb-0!">
@@ -70,79 +80,97 @@ function getSectionClassNames(color: string) {
   </div>
 
   <div class="flex flex-col">
-    {([['symptoms', 'causes'], ['diagnosis', 'fixes']] as const).map((pair, rowIndex) => {
-      const cards = pair.map((key) => ({
-        key,
-        meta: sectionMeta[key],
-        items: items[key],
-      }))
-
-      return (
-        <div class:list={[
-          'flex flex-col md:flex-row shadow-sm',
-          rowIndex === 0 ? 'border-b border-trim-offset' : '',
-        ]}>
-          {cards.map((card, colIndex) => {
-            const colorClasses = getSectionClassNames(card.meta.color)
-            const sectionHeadingId = `${sectionIdBase}-${card.key}`
-
-            return (
-              <section
-                aria-labelledby={sectionHeadingId}
-                class:list={[
-                'flex flex-1 flex-col',
-                colIndex === 0 ? 'md:border-r border-trim' : '',
-                colIndex === 0 ? 'bg-content-inverse' : 'bg-page-base',
-                ]}>
-                <div class:list={[
-                  'flex items-center gap-3 border-b border-t-4 border-trim-offset px-6 py-3',
-                  colorClasses.headerBg,
-                  colorClasses.headerTopBorder,
-                ]}>
-                  <Icon icon={card.meta.icon} size={5} color={card.meta.color} />
-                  <h4
+    {
+      (
+        [
+          ['symptoms', 'causes'],
+          ['diagnosis', 'fixes'],
+        ] as const
+      ).map((pair, rowIndex) => {
+        const cards = pair.map(key => ({
+          key,
+          meta: sectionMeta[key],
+          items: items[key],
+        }))
+
+        return (
+          <div
+            class:list={[
+              'flex flex-col md:flex-row shadow-sm',
+              rowIndex === 0 ? 'border-b border-trim-offset' : '',
+            ]}
+          >
+            {cards.map((card, colIndex) => {
+              const colorClasses = getSectionClassNames(card.meta.color)
+              const sectionHeadingId = `${sectionIdBase}-${card.key}`
+
+              return (
+                <section
+                  aria-labelledby={sectionHeadingId}
+                  class:list={[
+                    'flex flex-1 flex-col',
+                    colIndex === 0 ? 'md:border-r border-trim' : '',
+                    colIndex === 0 ? 'bg-content-inverse' : 'bg-page-base',
+                  ]}
+                >
+                  <div
                     class:list={[
-                    'm-0 text-sm font-bold uppercase tracking-[0.12em]',
-                    colorClasses.headerText,
+                      'flex items-center gap-3 border-b border-t-4 border-trim-offset px-6 py-3',
+                      colorClasses.headerBg,
+                      colorClasses.headerTopBorder,
                     ]}
-                    id={sectionHeadingId}
-                  >{card.meta.label}</h4>
-                </div>
-                <div class="grow px-6 py-5 text-base text-content">
-                  {!card.items.lead && card.items.items.length === 0 ? (
-                    <span class="text-content-offset italic">None specified</span>
-                  ) : null}
-
-                  {card.items.lead && (
-                    <p class:list={[
-                      'm-0',
-                      card.items.items.length > 0 ? 'mb-3' : '',
-                    ]} set:html={card.items.lead} />
-                  )}
-
-                  {!card.items.lead && card.items.items.length === 1 && (
-                    <p class="m-0" set:html={card.items.items[0]?.text} />
-                  )}
-
-                  {card.items.items.length > 0 && (card.items.items.length > 1 || Boolean(card.items.lead)) && (
-                    <ul class="m-0 list-none flex flex-col gap-2.5 p-0">
-                      {card.items.items.map((item) => (
-                        <li class="flex items-start gap-2.5">
-                          <span class:list={[
-                            'mt-1.5 flex h-2 w-2 shrink-0 rounded-full',
-                            colorClasses.markerBg,
-                          ]} aria-hidden="true" />
-                          <span set:html={item.text} />
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </div>
-              </section>
-            )
-          })}
-        </div>
-      )
-    })}
+                  >
+                    <Icon icon={card.meta.icon} size={5} color={card.meta.color} />
+                    <h4
+                      class:list={[
+                        'm-0 text-sm font-bold uppercase tracking-[0.12em]',
+                        colorClasses.headerText,
+                      ]}
+                      id={sectionHeadingId}
+                    >
+                      {card.meta.label}
+                    </h4>
+                  </div>
+                  <div class="grow px-6 py-5 text-base text-content">
+                    {!card.items.lead && card.items.items.length === 0 ? (
+                      <span class="text-content-offset italic">None specified</span>
+                    ) : null}
+
+                    {card.items.lead && (
+                      <p
+                        class:list={['m-0', card.items.items.length > 0 ? 'mb-3' : '']}
+                        set:html={card.items.lead}
+                      />
+                    )}
+
+                    {!card.items.lead && card.items.items.length === 1 && (
+                      <p class="m-0" set:html={card.items.items[0]?.text} />
+                    )}
+
+                    {card.items.items.length > 0 &&
+                      (card.items.items.length > 1 || Boolean(card.items.lead)) && (
+                        <ul class="m-0 list-none flex flex-col gap-2.5 p-0">
+                          {card.items.items.map(item => (
+                            <li class="flex items-start gap-2.5">
+                              <span
+                                class:list={[
+                                  'mt-1.5 flex h-2 w-2 shrink-0 rounded-full',
+                                  colorClasses.markerBg,
+                                ]}
+                                aria-hidden="true"
+                              />
+                              <span set:html={item.text} />
+                            </li>
+                          ))}
+                        </ul>
+                      )}
+                  </div>
+                </section>
+              )
+            })}
+          </div>
+        )
+      })
+    }
   </div>
 </section>
diff --git a/src/components/WebMentions/client/__tests__/index.spec.ts b/src/components/WebMentions/client/__tests__/index.spec.ts
index 1c5f117da..578cf85f9 100644
--- a/src/components/WebMentions/client/__tests__/index.spec.ts
+++ b/src/components/WebMentions/client/__tests__/index.spec.ts
@@ -46,7 +46,7 @@ describe('WebMentions web component', () => {
       facepileLimit?: number
       showFacepile?: boolean
       url?: string
-    },
+    }
   ): Promise<void> => {
     await executeRender<WebMentionsModule>({
       container,
@@ -137,12 +137,15 @@ describe('WebMentions web component', () => {
       },
     })
 
-    await runComponentRender(async ({ element }) => {
-      await flushMicrotasks()
-      await element.updateComplete
+    await runComponentRender(
+      async ({ element }) => {
+        await flushMicrotasks()
+        await element.updateComplete
 
-      expect(element.querySelector('#webmentions')).toBeNull()
-    }, { url: 'https://example.com/empty-post' })
+        expect(element.querySelector('#webmentions')).toBeNull()
+      },
+      { url: 'https://example.com/empty-post' }
+    )
   })
 
   test('fails silently and reports action result errors through the client error handler', async () => {
@@ -152,31 +155,37 @@ describe('WebMentions web component', () => {
       error: actionError,
     })
 
-    await runComponentRender(async ({ element }) => {
-      await flushMicrotasks()
-      await element.updateComplete
+    await runComponentRender(
+      async ({ element }) => {
+        await flushMicrotasks()
+        await element.updateComplete
 
-      expect(element.querySelector('#webmentions')).toBeNull()
-      expect(handleScriptErrorMock).toHaveBeenCalledWith(actionError, {
-        scriptName: 'WebMentionsElement',
-        operation: 'load',
-      })
-    }, { url: 'https://example.com/error-post' })
+        expect(element.querySelector('#webmentions')).toBeNull()
+        expect(handleScriptErrorMock).toHaveBeenCalledWith(actionError, {
+          scriptName: 'WebMentionsElement',
+          operation: 'load',
+        })
+      },
+      { url: 'https://example.com/error-post' }
+    )
   })
 
   test('fails silently and reports thrown load errors through the client error handler', async () => {
     const thrownError = new Error('Network blew up')
     webmentionsListMock.mockRejectedValue(thrownError)
 
-    await runComponentRender(async ({ element }) => {
-      await flushMicrotasks()
-      await element.updateComplete
+    await runComponentRender(
+      async ({ element }) => {
+        await flushMicrotasks()
+        await element.updateComplete
 
-      expect(element.querySelector('#webmentions')).toBeNull()
-      expect(handleScriptErrorMock).toHaveBeenCalledWith(thrownError, {
-        scriptName: 'WebMentionsElement',
-        operation: 'load',
-      })
-    }, { url: 'https://example.com/thrown-error-post' })
+        expect(element.querySelector('#webmentions')).toBeNull()
+        expect(handleScriptErrorMock).toHaveBeenCalledWith(thrownError, {
+          scriptName: 'WebMentionsElement',
+          operation: 'load',
+        })
+      },
+      { url: 'https://example.com/thrown-error-post' }
+    )
   })
-})
\ No newline at end of file
+})
diff --git a/src/components/WebMentions/client/index.ts b/src/components/WebMentions/client/index.ts
index 971a3f332..32eb39934 100644
--- a/src/components/WebMentions/client/index.ts
+++ b/src/components/WebMentions/client/index.ts
@@ -88,7 +88,10 @@ export class WebMentionsElement extends LitElement {
       return
     }
 
-    if (normalizedUrl === this.lastLoadedUrl && (this.state === 'loading' || this.state === 'ready')) {
+    if (
+      normalizedUrl === this.lastLoadedUrl &&
+      (this.state === 'loading' || this.state === 'ready')
+    ) {
       return
     }
 
@@ -149,8 +152,14 @@ export class WebMentionsElement extends LitElement {
     })
 
     return html`
-      <section class="mt-12 pt-8 border-t border-trim" id="webmentions" aria-labelledby="webmentions-heading">
-        <header class="flex items-start justify-between mb-6 flex-wrap gap-4 flex-col sm:flex-row sm:items-center">
+      <section
+        class="mt-12 pt-8 border-t border-trim"
+        id="webmentions"
+        aria-labelledby="webmentions-heading"
+      >
+        <header
+          class="flex items-start justify-between mb-6 flex-wrap gap-4 flex-col sm:flex-row sm:items-center"
+        >
           <h3 class="text-2xl font-bold m-0" id="webmentions-heading">Webmentions</h3>
 
           ${this.likesCount > 0 || this.repostsCount > 0
@@ -163,8 +172,7 @@ export class WebMentionsElement extends LitElement {
                           title="${this.likesCount} like${this.likesCount === 1 ? '' : 's'}"
                           aria-label="${this.likesCount} like${this.likesCount === 1 ? '' : 's'}"
                         >
-                          ${heartIconMarkup ? unsafeHTML(heartIconMarkup) : null}
-                          ${this.likesCount}
+                          ${heartIconMarkup ? unsafeHTML(heartIconMarkup) : null} ${this.likesCount}
                         </span>
                       `
                     : null}
@@ -173,7 +181,9 @@ export class WebMentionsElement extends LitElement {
                         <span
                           class="inline-flex items-center gap-1.5 text-content-active text-sm font-medium"
                           title="${this.repostsCount} repost${this.repostsCount === 1 ? '' : 's'}"
-                          aria-label="${this.repostsCount} repost${this.repostsCount === 1 ? '' : 's'}"
+                          aria-label="${this.repostsCount} repost${this.repostsCount === 1
+                            ? ''
+                            : 's'}"
                         >
                           ${repostIconMarkup ? unsafeHTML(repostIconMarkup) : null}
                           ${this.repostsCount}
@@ -187,7 +197,11 @@ export class WebMentionsElement extends LitElement {
 
         ${this.showFacepile && newestMentions.length > 0
           ? html`
-              <div class="flex items-center gap-2 mb-6 p-4 bg-page-offset rounded-lg" role="group" aria-label="Recent mentions: ${newestMentions.length}">
+              <div
+                class="flex items-center gap-2 mb-6 p-4 bg-page-offset rounded-lg"
+                role="group"
+                aria-label="Recent mentions: ${newestMentions.length}"
+              >
                 ${facepileMentions.map(
                   mention => html`
                     <img
@@ -199,13 +213,18 @@ export class WebMentionsElement extends LitElement {
                       loading="lazy"
                       decoding="async"
                     />
-                  `,
+                  `
                 )}
                 ${newestMentions.length > this.facepileLimit
                   ? html`
                       <span
                         class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-gray-offset text-content-inverse text-xs font-semibold"
-                        aria-label="${newestMentions.length - this.facepileLimit} more mention${newestMentions.length - this.facepileLimit === 1 ? '' : 's'}"
+                        aria-label="${newestMentions.length -
+                        this.facepileLimit} more mention${newestMentions.length -
+                          this.facepileLimit ===
+                        1
+                          ? ''
+                          : 's'}"
                       >
                         +${newestMentions.length - this.facepileLimit}
                       </span>
@@ -214,15 +233,19 @@ export class WebMentionsElement extends LitElement {
               </div>
             `
           : null}
-
         ${newestMentions.length > 0
           ? html`
               <ol class="list-none p-0 m-0 flex flex-col gap-6">
                 ${newestMentions.map(
                   mention => html`
                     <li class="m-0">
-                      <article class="p-4 bg-page-offset rounded-lg border border-trim h-cite" id="webmention-${mention.id}">
-                        <div class="flex items-start justify-between gap-4 mb-3 flex-wrap flex-col sm:flex-nowrap sm:flex-row sm:items-center">
+                      <article
+                        class="p-4 bg-page-offset rounded-lg border border-trim h-cite"
+                        id="webmention-${mention.id}"
+                      >
+                        <div
+                          class="flex items-start justify-between gap-4 mb-3 flex-wrap flex-col sm:flex-nowrap sm:flex-row sm:items-center"
+                        >
                           <a
                             class="inline-flex items-center gap-3 no-underline transition-colors hover:text-primary-hover p-author h-card u-url"
                             href="${mention.authorUrl}"
@@ -240,21 +263,26 @@ export class WebMentionsElement extends LitElement {
                             <strong class="font-semibold p-name">${mention.authorName}</strong>
                           </a>
 
-                          <time class="text-content-active text-sm whitespace-nowrap dt-published" datetime="${mention.published}">
+                          <time
+                            class="text-content-active text-sm whitespace-nowrap dt-published"
+                            datetime="${mention.published}"
+                          >
                             ${formatDate(mention.published)}
                           </time>
                         </div>
 
                         ${mention.contentHtml
                           ? html`
-                              <div class="leading-relaxed wrap-break-word [&_p]:my-2 [&_a]:text-primary [&_a]:underline [&_a:hover]:text-primary-hover p-content">
+                              <div
+                                class="leading-relaxed wrap-break-word [&_p]:my-2 [&_a]:text-primary [&_a]:underline [&_a:hover]:text-primary-hover p-content"
+                              >
                                 ${unsafeHTML(mention.contentHtml)}
                               </div>
                             `
                           : null}
                       </article>
                     </li>
-                  `,
+                  `
                 )}
               </ol>
             `
@@ -265,7 +293,7 @@ export class WebMentionsElement extends LitElement {
 }
 
 export const registerWebMentionsComponent = async (
-  tagName = WebMentionsElement.registeredName,
+  tagName = WebMentionsElement.registeredName
 ): Promise<void> => {
   defineCustomElement(tagName, WebMentionsElement)
 }
@@ -274,4 +302,4 @@ export const webComponentModule: WebComponentModule<WebMentionsElement> = {
   registeredName: WebMentionsElement.registeredName,
   componentCtor: WebMentionsElement,
   registerWebComponent: registerWebMentionsComponent,
-}
\ No newline at end of file
+}
diff --git a/src/components/WebMentions/client/selectors.ts b/src/components/WebMentions/client/selectors.ts
index 620242657..d2a1ae193 100644
--- a/src/components/WebMentions/client/selectors.ts
+++ b/src/components/WebMentions/client/selectors.ts
@@ -17,4 +17,4 @@ export const queryWebMentionsIconMarkup = (params: {
   const iconHost = iconBank.querySelector(`[data-webmentions-icon="${iconName}"]`)
   const markup = iconHost?.innerHTML.trim()
   return markup ? markup : null
-}
\ No newline at end of file
+}
diff --git a/src/components/WebMentions/index.astro b/src/components/WebMentions/index.astro
index f7a3d6571..a0de312b6 100644
--- a/src/components/WebMentions/index.astro
+++ b/src/components/WebMentions/index.astro
@@ -38,8 +38,7 @@ const iconBankId = `webmentions-icon-bank-${Math.random().toString(36).slice(2)}
   url={url}
   show-facepile={showFacepile}
   facepile-limit={facepileLimit}
-  icon-bank-id={iconBankId}
-></web-mentions>
+  icon-bank-id={iconBankId}></web-mentions>
 
 <script>
   import { registerWebMentionsComponent } from '@components/WebMentions/client'
diff --git a/src/components/scripts/bootstrap/index.ts b/src/components/scripts/bootstrap/index.ts
index 2200f0a5c..1e6445595 100644
--- a/src/components/scripts/bootstrap/index.ts
+++ b/src/components/scripts/bootstrap/index.ts
@@ -64,7 +64,10 @@ export class AppBootstrap {
       initHeaderSearchSideEffects()
 
       // 3c. Setup layout position tracking (resize, View Transition events)
-      addScriptBreadcrumb({ scriptName: 'AppBootstrap', operation: 'initLayoutPositionSideEffects' })
+      addScriptBreadcrumb({
+        scriptName: 'AppBootstrap',
+        operation: 'initLayoutPositionSideEffects',
+      })
       initLayoutPositionSideEffects()
 
       // 4. Expose limited store actions for Playwright-driven E2E tests
diff --git a/src/components/scripts/embla/EmblaCarouselBase.ts b/src/components/scripts/embla/EmblaCarouselBase.ts
index 9ef570a0f..64504f258 100644
--- a/src/components/scripts/embla/EmblaCarouselBase.ts
+++ b/src/components/scripts/embla/EmblaCarouselBase.ts
@@ -699,9 +699,7 @@ export abstract class EmblaCarouselBase extends LitElement {
 
     const existingId = this._viewport.getAttribute('id')
     const nextId =
-      existingId && existingId.length > 0
-        ? existingId
-        : `${this._animationInstanceId}-viewport`
+      existingId && existingId.length > 0 ? existingId : `${this._animationInstanceId}-viewport`
 
     this._viewport.setAttribute('id', nextId)
     this._viewportId = nextId
diff --git a/src/components/scripts/embla/__fixtures__/EmblaBaseFixture.client.ts b/src/components/scripts/embla/__fixtures__/EmblaBaseFixture.client.ts
index 3a0bce986..c0d11ee16 100644
--- a/src/components/scripts/embla/__fixtures__/EmblaBaseFixture.client.ts
+++ b/src/components/scripts/embla/__fixtures__/EmblaBaseFixture.client.ts
@@ -63,4 +63,4 @@ export const webComponentModule: WebComponentModule<EmblaBaseFixtureElement> = {
   registeredName: EmblaBaseFixtureElement.registeredName,
   componentCtor: EmblaBaseFixtureElement,
   registerWebComponent,
-}
\ No newline at end of file
+}
diff --git a/src/components/scripts/embla/__fixtures__/emblaCarouselBase.fixture.astro b/src/components/scripts/embla/__fixtures__/emblaCarouselBase.fixture.astro
index ec7e5d34f..13257b65a 100644
--- a/src/components/scripts/embla/__fixtures__/emblaCarouselBase.fixture.astro
+++ b/src/components/scripts/embla/__fixtures__/emblaCarouselBase.fixture.astro
@@ -13,4 +13,4 @@ import Button from '@components/Button/index.astro'
   <div data-embla-dots></div>
   <Button data-embla-prev={true} type="button" text="Prev" />
   <Button data-embla-next={true} type="button" text="Next" />
-</embla-base-fixture>
\ No newline at end of file
+</embla-base-fixture>
diff --git a/src/components/scripts/embla/__fixtures__/selectors.ts b/src/components/scripts/embla/__fixtures__/selectors.ts
index 291a734cb..5a7480d70 100644
--- a/src/components/scripts/embla/__fixtures__/selectors.ts
+++ b/src/components/scripts/embla/__fixtures__/selectors.ts
@@ -1,7 +1,4 @@
-import {
-  isButtonElement,
-  isDivElement,
-} from '@components/scripts/assertions/elements'
+import { isButtonElement, isDivElement } from '@components/scripts/assertions/elements'
 import type { EmblaRootElement } from '../types'
 
 const SELECTORS = {
@@ -40,4 +37,4 @@ export const queryEmblaNextButton = (scope: ParentNode): HTMLButtonElement | nul
 
 export const queryEmblaSlides = (scope: ParentNode): HTMLDivElement[] => {
   return Array.from(scope.querySelectorAll(SELECTORS.slide)).filter(isDivElement)
-}
\ No newline at end of file
+}
diff --git a/src/components/scripts/embla/__tests__/EmblaCarouselBase.spec.ts b/src/components/scripts/embla/__tests__/EmblaCarouselBase.spec.ts
index cb61de34e..494741cdd 100644
--- a/src/components/scripts/embla/__tests__/EmblaCarouselBase.spec.ts
+++ b/src/components/scripts/embla/__tests__/EmblaCarouselBase.spec.ts
@@ -14,7 +14,9 @@ const handleScriptErrorMock = vi.hoisted(() => vi.fn())
 const createAnimationControllerMock = vi.hoisted(() => vi.fn())
 
 const emblaInstanceRef = { current: null as EmblaApiMock | null }
-const autoplayInstanceRef = { current: null as { play: ReturnType<typeof vi.fn>; stop: ReturnType<typeof vi.fn> } | null }
+const autoplayInstanceRef = {
+  current: null as { play: ReturnType<typeof vi.fn>; stop: ReturnType<typeof vi.fn> } | null,
+}
 
 interface EmblaApiMock {
   canScrollPrev: ReturnType<typeof vi.fn>
@@ -309,4 +311,4 @@ describe('EmblaCarouselBase', () => {
       expect(element.getAttribute('data-carousel-autoplay')).toBeNull()
     })
   })
-})
\ No newline at end of file
+})
diff --git a/src/components/scripts/embla/__tests__/logging.spec.ts b/src/components/scripts/embla/__tests__/logging.spec.ts
index 09590d193..ee8adeb40 100644
--- a/src/components/scripts/embla/__tests__/logging.spec.ts
+++ b/src/components/scripts/embla/__tests__/logging.spec.ts
@@ -52,4 +52,4 @@ describe('createE2ELogger', () => {
 
     expect(errorSpy).toHaveBeenCalledWith('[Embla] failed')
   })
-})
\ No newline at end of file
+})
diff --git a/src/components/scripts/embla/__tests__/navigation.spec.ts b/src/components/scripts/embla/__tests__/navigation.spec.ts
index 66a1b4cca..c36b34eab 100644
--- a/src/components/scripts/embla/__tests__/navigation.spec.ts
+++ b/src/components/scripts/embla/__tests__/navigation.spec.ts
@@ -27,7 +27,10 @@ interface EmblaApiMock {
 }
 
 /** Create a mock Embla API with mutable state and event handlers. */
-const createEmblaApiMock = (options: { canScrollPrev: boolean; canScrollNext: boolean }): EmblaApiMock => {
+const createEmblaApiMock = (options: {
+  canScrollPrev: boolean
+  canScrollNext: boolean
+}): EmblaApiMock => {
   let canScrollPrevValue = options.canScrollPrev
   let canScrollNextValue = options.canScrollNext
   const handlers = new Map<'select' | 'reInit', () => void>()
@@ -171,4 +174,4 @@ describe('setupEmblaNavButtons', () => {
       })
     })
   })
-})
\ No newline at end of file
+})
diff --git a/src/components/scripts/embla/logging.ts b/src/components/scripts/embla/logging.ts
index 7f27b87d3..b782a6179 100644
--- a/src/components/scripts/embla/logging.ts
+++ b/src/components/scripts/embla/logging.ts
@@ -3,15 +3,9 @@
  * Logs are emitted only when running under Playwright (`window.isPlaywrightControlled`).
  */
 export const createE2ELogger = (prefix: string) => {
-  return (
-    level: 'info' | 'error',
-    message: string,
-    details?: Record<string, unknown>
-  ): void => {
+  return (level: 'info' | 'error', message: string, details?: Record<string, unknown>): void => {
     if (typeof window === 'undefined' || window.isPlaywrightControlled !== true) return
-    const payload = details
-      ? [`[${prefix}] ${message}`, details]
-      : [`[${prefix}] ${message}`]
+    const payload = details ? [`[${prefix}] ${message}`, details] : [`[${prefix}] ${message}`]
     console[level](...payload)
   }
 }
diff --git a/src/components/scripts/sentry/helpers.ts b/src/components/scripts/sentry/helpers.ts
index 9f44ebf58..72366b084 100644
--- a/src/components/scripts/sentry/helpers.ts
+++ b/src/components/scripts/sentry/helpers.ts
@@ -51,7 +51,9 @@ const isHandledDownloadsSubmitHttpError = (event: Parameters<BeforeSendHandler>[
   )
 }
 
-const isHandledNewsletterSubscribeHttpError = (event: Parameters<BeforeSendHandler>[0]): boolean => {
+const isHandledNewsletterSubscribeHttpError = (
+  event: Parameters<BeforeSendHandler>[0]
+): boolean => {
   const requestUrl = event.request?.url
   const exception = event.exception?.values?.[0]
   const mechanismType = exception?.mechanism?.type
@@ -82,7 +84,9 @@ function scrubBreadcrumbs(
   breadcrumbs: NonNullable<Parameters<BeforeSendHandler>[0]['breadcrumbs']>
 ) {
   return breadcrumbs
-    .filter(breadcrumb => breadcrumb.category && SAFE_BREADCRUMB_CATEGORIES.has(breadcrumb.category))
+    .filter(
+      breadcrumb => breadcrumb.category && SAFE_BREADCRUMB_CATEGORIES.has(breadcrumb.category)
+    )
     .map(breadcrumb => {
       const { data: _data, ...safeBreadcrumb } = breadcrumb
 
diff --git a/src/components/scripts/stickySidebar.ts b/src/components/scripts/stickySidebar.ts
index fea04a54f..2721468c5 100644
--- a/src/components/scripts/stickySidebar.ts
+++ b/src/components/scripts/stickySidebar.ts
@@ -19,10 +19,7 @@
  * regardless of header collapse animations or transition timing.
  */
 import { handleScriptError } from '@components/scripts/errors/handler'
-import {
-  getHeaderFixedElement,
-  getProgressBarElement,
-} from '@components/scripts/store/selectors'
+import { getHeaderFixedElement, getProgressBarElement } from '@components/scripts/store/selectors'
 
 export interface StickySidebarOptions {
   /** Extra space below the fixed chrome (header + progress bar) in px. Default: 16 */
@@ -42,7 +39,7 @@ function measureChromeBottom(): number {
   const progressEl = getProgressBarElement()
   return Math.max(
     headerEl ? headerEl.getBoundingClientRect().bottom : 0,
-    progressEl ? progressEl.getBoundingClientRect().bottom : 0,
+    progressEl ? progressEl.getBoundingClientRect().bottom : 0
   )
 }
 
@@ -57,13 +54,9 @@ function measureChromeBottom(): number {
 export function initStickySidebar(
   sidebar: HTMLElement,
   container: HTMLElement,
-  options: StickySidebarOptions = {},
+  options: StickySidebarOptions = {}
 ): () => void {
-  const {
-    topPadding = 16,
-    bottomPadding = 16,
-    minWidth = 1024,
-  } = options
+  const { topPadding = 16, bottomPadding = 16, minWidth = 1024 } = options
 
   const scrollContainer = document.getElementById('scroll-viewport')
   if (!scrollContainer) {
diff --git a/src/components/scripts/store/__tests__/layoutPosition.spec.ts b/src/components/scripts/store/__tests__/layoutPosition.spec.ts
index f2dd71794..c4a1c75dc 100644
--- a/src/components/scripts/store/__tests__/layoutPosition.spec.ts
+++ b/src/components/scripts/store/__tests__/layoutPosition.spec.ts
@@ -15,11 +15,7 @@ import {
 /**
  * Helper: inject a mock element into the DOM with a specified bounding rect.
  */
-function injectElement(
-  tag: string,
-  attrs: Record<string, string>,
-  height: number,
-): HTMLElement {
+function injectElement(tag: string, attrs: Record<string, string>, height: number): HTMLElement {
   const el = document.createElement(tag)
   for (const [key, value] of Object.entries(attrs)) {
     if (key === 'class') {
diff --git a/src/components/scripts/store/animationLifecycle.ts b/src/components/scripts/store/animationLifecycle.ts
index bdc3a2cc7..d9328a14c 100644
--- a/src/components/scripts/store/animationLifecycle.ts
+++ b/src/components/scripts/store/animationLifecycle.ts
@@ -209,7 +209,11 @@ function updateSuggestedSource(source: string, active: boolean): void {
   updateAllControllers()
 }
 
-function updateInstanceBlockingSource(controllerKey: string, source: string, active: boolean): void {
+function updateInstanceBlockingSource(
+  controllerKey: string,
+  source: string,
+  active: boolean
+): void {
   const existingSources = instanceBlockingPauseSources.get(controllerKey)
   const sources = existingSources ?? new Set<string>()
 
diff --git a/src/components/scripts/store/consent.ts b/src/components/scripts/store/consent.ts
index 4012a20fb..e502323e6 100644
--- a/src/components/scripts/store/consent.ts
+++ b/src/components/scripts/store/consent.ts
@@ -423,10 +423,7 @@ export function initConsentSideEffects(): void {
 
       const retryAfterDate = Date.parse(retryAfterHeader)
       if (!Number.isNaN(retryAfterDate)) {
-        return Math.min(
-          Math.max(0, retryAfterDate - Date.now()),
-          CONSENT_LOG_MAX_RETRY_DELAY_MS
-        )
+        return Math.min(Math.max(0, retryAfterDate - Date.now()), CONSENT_LOG_MAX_RETRY_DELAY_MS)
       }
     }
 
diff --git a/src/components/scripts/store/layoutPosition.ts b/src/components/scripts/store/layoutPosition.ts
index 2b0fbb199..59f55587d 100644
--- a/src/components/scripts/store/layoutPosition.ts
+++ b/src/components/scripts/store/layoutPosition.ts
@@ -71,7 +71,7 @@ function writeCssVariables(offsets: LayoutOffsets): void {
   root.setProperty('--progress-bar-height', `${offsets.progressBarHeight}px`)
   root.setProperty(
     '--layout-top-offset',
-    `${offsets.themePickerHeight + offsets.headerHeight + offsets.progressBarHeight}px`,
+    `${offsets.themePickerHeight + offsets.headerHeight + offsets.progressBarHeight}px`
   )
 }
 
@@ -108,9 +108,7 @@ function measureThemePickerHeight(): number {
   }
 
   // Last resort: the CSS 14em target.
-  const fontSize = Number.parseFloat(
-    getComputedStyle(document.documentElement).fontSize,
-  ) || 16
+  const fontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16
   return 14 * fontSize
 }
 
diff --git a/src/components/scripts/store/search.ts b/src/components/scripts/store/search.ts
index 2ca428b11..ae20a1409 100644
--- a/src/components/scripts/store/search.ts
+++ b/src/components/scripts/store/search.ts
@@ -60,7 +60,9 @@ export function toggleHeaderSearch(): void {
   setHeaderSearchExpanded(!getHeaderSearchExpanded())
 }
 
-export function subscribeHeaderSearchExpanded(listener: (_isExpanded: boolean) => void): () => void {
+export function subscribeHeaderSearchExpanded(
+  listener: (_isExpanded: boolean) => void
+): () => void {
   return $headerSearchExpanded.subscribe(listener)
 }
 
diff --git a/src/components/scripts/utils/environmentClient.ts b/src/components/scripts/utils/environmentClient.ts
index 406509804..f2f1e4c31 100644
--- a/src/components/scripts/utils/environmentClient.ts
+++ b/src/components/scripts/utils/environmentClient.ts
@@ -113,7 +113,6 @@ export function getGoogleMapsApiKey(): string {
   return PUBLIC_GOOGLE_MAPS_API_KEY
 }
 
-
 /**
  * Gets the Google Maps Map ID injected at build time.
  *
diff --git a/src/content.config.ts b/src/content.config.ts
index 367768dea..8d48bc569 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -107,7 +107,6 @@ const deepDiveArticlesCollection = defineCollection({
     ),
 })
 
-
 /**
  * Case Studies
  */
diff --git a/src/content/Platform Engineering Fundamental Curriculum.pdf b/src/content/Platform Engineering Fundamental Curriculum.pdf
deleted file mode 100644
index da14ab112..000000000
Binary files a/src/content/Platform Engineering Fundamental Curriculum.pdf and /dev/null differ
diff --git a/src/content/articles/demo/index.ts b/src/content/articles/demo/index.ts
index e2e9c1eba..7cc6a32e9 100644
--- a/src/content/articles/demo/index.ts
+++ b/src/content/articles/demo/index.ts
@@ -1,6 +1,10 @@
 const rows = [
   { classification: 'Actionable', criteria: '≥ 80%', action: 'Keep, improve runbook' },
-  { classification: 'Noisy', criteria: '20-80%', action: 'Investigate thresholds, consider aggregation' },
+  {
+    classification: 'Noisy',
+    criteria: '20-80%',
+    action: 'Investigate thresholds, consider aggregation',
+  },
   { classification: 'Useless', criteria: '< 20%', action: 'Delete or convert to dashboard metric' },
   { classification: 'Stale', criteria: 'Not fired in 3+ months', action: 'Review for deletion' },
 ]
diff --git a/src/content/clients/alento.mdx b/src/content/clients/alento.mdx
index 031e3b5e5..f62d47d9c 100644
--- a/src/content/clients/alento.mdx
+++ b/src/content/clients/alento.mdx
@@ -15,10 +15,29 @@ published: true
 
 ERP software company serving art museums, providing inventory management systems delivered as both on-premises installations and managed hosted deployments.
 
-<List variant="experience-list" classes={{ wrapper: 'mb-0' }}>
-  <ListItem>Managed a multi-homed high availability distributed compute platform and infrastructure (BGP, OSPF, VLAN, Cisco IOS).</ListItem>
-  <ListItem>Installed, configured, tested and maintained operating systems (RHEL/KVM/QEMU, BSD), application software, and system management tools.</ListItem>
-  <ListItem>Supported CI/CD pipeline and automated build and deployment of Docker containers. Authored Jenkins extensions (Java) to support internal work flow.</ListItem>
-  <ListItem>Wrote and maintained custom scripts to increase system efficiency and automate processes for software and system administration (BASH/Python).</ListItem>
-  <ListItem>Managed and improved database server performance through maintenance tasks including re-indexing, updating statistics, and improving stored procedures (PostgreSQL).</ListItem>
-</List>
+<List
+  variant="experience-list"
+  classes={{ wrapper: '-mt-3 mb-0' }}
+  items={[
+    {
+      lead: 'Managed a multi-homed high availability ',
+      text: 'distributed compute platform and infrastructure (BGP, OSPF, VLAN, Cisco IOS).',
+    },
+    {
+      lead: 'Installed, configured, tested and maintained ',
+      text: 'operating systems (RHEL / KVM / QEMU, BSD), application software, and system management tools.',
+    },
+    {
+      lead: 'Supported CI / CD pipeline and automated build and deployment ',
+      text: 'of Docker containers. Authored Jenkins extensions (Java) to support internal work flow.',
+    },
+    {
+      lead: 'Wrote and maintained custom scripts ',
+      text: 'to increase system efficiency and automate processes for software and system administration (BASH / Python).',
+    },
+    {
+      lead: 'Managed and improved database server performance ',
+      text: 'through maintenance tasks including re-indexing, updating statistics, and improving stored procedures (PostgreSQL).',
+    },
+  ]}
+/>
diff --git a/src/content/clients/braze.mdx b/src/content/clients/braze.mdx
index c5ef9b412..e993ee013 100644
--- a/src/content/clients/braze.mdx
+++ b/src/content/clients/braze.mdx
@@ -15,9 +15,25 @@ published: true
 
 B2B SaaS customer engagement platform with 80 engineers in a TypeScript monorepo experiencing 45-minute CI builds, 30% flaky test failure rates, and $180K/month AWS spend growing faster than revenue.
 
-<List variant="experience-list" classes={{ wrapper: 'mb-0' }}>
-  <ListItem>Redesigned monorepo CI/CD pipeline using Turborepo for incremental builds and parallelized test execution, reducing build times from 45 minutes to 8 minutes (82% improvement) and flaky test failures from 30% to under 2%</ListItem>
-  <ListItem>Increased deployment frequency from twice weekly to multiple times daily by implementing dependency-aware build graphs that only rebuilt and tested affected packages on each pull request</ListItem>
-  <ListItem>Led AWS cost optimization initiative that reduced monthly spend from $180K to $72K (60% reduction), saving $1.3M annually through instance right-sizing, reserved instance commitments, and unused resource cleanup</ListItem>
-  <ListItem>Maintained 99.95% uptime and improved P99 latency during optimization by eliminating noisy neighbor effects through right-sized instances; savings extended company runway by eight months, preventing planned engineering layoffs</ListItem>
-</List>
+<List
+  variant="experience-list"
+  classes={{ wrapper: '-mt-3 mb-0' }}
+  items={[
+    {
+      lead: 'Redesigned monorepo CI / CD pipeline using Turborepo ',
+      text: 'for incremental builds and parallelized test execution, reducing build times from 45 minutes to 8 minutes (82% improvement) and flaky test failures from 30% to under 2%.',
+    },
+    {
+      lead: 'Increased deployment frequency from twice weekly ',
+      text: 'to multiple times daily by implementing dependency-aware build graphs that only rebuilt and tested affected packages on each pull request.',
+    },
+    {
+      lead: 'Led AWS cost optimization initiative ',
+      text: 'that reduced monthly spend from $180K to $72K (60% reduction), saving $1.3M annually through instance right-sizing, reserved instance commitments, and unused resource cleanup.',
+    },
+    {
+      lead: 'Maintained 99.95% uptime and improved P99 latency ',
+      text: 'during optimization by eliminating noisy neighbor effects through right-sized instances; savings extended company runway by eight months, preventing planned engineering layoffs.',
+    },
+  ]}
+/>
diff --git a/src/content/clients/cause-of-a-kind.mdx b/src/content/clients/cause-of-a-kind.mdx
index 01af715b0..e98578519 100644
--- a/src/content/clients/cause-of-a-kind.mdx
+++ b/src/content/clients/cause-of-a-kind.mdx
@@ -1,11 +1,11 @@
 ---
-id: "webstack-builders"
-displayName: "Webstack Builders, Inc."
+id: "cause-of-a-kind"
+displayName: "Cause of a Kind"
 role: "Software Developer"
 industry: "Software Development / IT Services"
 businessType: "Software Development Agency"
 workModel: "Remote"
-location: "Dover, Delaware"
+location: "Long Island, New York"
 startDate: 2016-02-01
 endDate: 2020-11-01
 website: "https://www.causeofakind.com/"
@@ -15,12 +15,33 @@ published: true
 
 Full-service software development agency building mobile apps, web applications, and headless CMS solutions for clients across multiple industries.
 
-<List variant="experience-list" classes={{ wrapper: 'mb-0' }}>
-  <ListItem>Developed 10+ full stack applications utilizing React, NodeJS, TypeScript, React Native, Express, Laravel, and AWS technology stack.</ListItem>
-  <ListItem>Designed and coded 10,000+ unit, integration, and e2e tests using Mocha, Jest, and Playwight runners.</ListItem>
-  <ListItem>Completed troubleshooting of 2,000+ code-related issues and defects.</ListItem>
-  <ListItem>Attended 100+ weekly stand-up meetings to receive tasks and instruction for weekly goals.</ListItem>
-  <ListItem>Developed 10+ headless CMS applications using NextJS, GatsbyJS, and various providers including Sanity and Contentful.</ListItem>
-  <ListItem>Experience with both REST and GraphQL API design and implementation.</ListItem>
-  <ListItem>Implemented pre-bid programmatic auction ad system for a publishing platform, and integration with Facebook using their SDK and API.</ListItem>
-</List>
+<List
+  variant="experience-list"
+  classes={{ wrapper: 'mb-0' }}
+  items={[
+    {
+      lead: 'Developed 30+ full stack applications ',
+      text: 'utilizing React, NodeJS, TypeScript, React Native, Express, Laravel, and AWS technology stack.',
+    },
+    {
+      lead: 'Designed and coded 10,000+ unit, ',
+      text: 'integration, and e2e tests using Mocha, Jest, and Playwight runners.',
+    },
+    {
+      lead: 'Completed troubleshooting ',
+      text: 'of 2,000+ code-related issues and defects.',
+    },
+    {
+      lead: 'Developed 30+ headless CMS applications ',
+      text: 'using NextJS, GatsbyJS, and various providers including Sanity and Contentful.',
+    },
+    {
+      lead: 'Experience with both REST and GraphQL ',
+      text: 'API design and implementation.',
+    },
+    {
+      lead: 'Implemented pre-bid programmatic auction ad system ',
+      text: 'for a publishing platform, and integration with Facebook using their SDK and API.',
+    },
+  ]}
+/>
diff --git a/src/content/clients/eli-lilly.mdx b/src/content/clients/eli-lilly.mdx
index 60b38a1e6..88a974978 100644
--- a/src/content/clients/eli-lilly.mdx
+++ b/src/content/clients/eli-lilly.mdx
@@ -15,10 +15,29 @@ published: true
 
 Fortune 100 pharmaceutical company with global R&D and manufacturing operations, requiring business process analysis, systems documentation, and technology procurement support across multiple internal teams.
 
-<List variant="experience-list" classes={{ wrapper: 'mb-0' }}>
-  <ListItem>Worked with users, observing business processes, interviewing staff, and documenting practices. Conducted research, analyzed business operations, and problem solved operating inefficiencies.</ListItem>
-  <ListItem>Created and analyzed users requirements for technology systems using use cases, mock ups, and interviewing stakeholders.</ListItem>
-  <ListItem>Prepared bid documents and and functional specifications for new application implementations.</ListItem>
-  <ListItem>Led sprint planning and daily scrum meetings.</ListItem>
-  <ListItem>Created and maintained a company-wide inventory and descriptions of major systems, and a new employee guide to using them.</ListItem>
-</List>
+<List
+  variant="experience-list"
+  classes={{ wrapper: '-mt-3 mb-0' }}
+  items={[
+    {
+      lead: 'Worked with users, observing business processes, ',
+      text: 'interviewing staff, and documenting practices. Conducted research, analyzed business operations, and problem solved operating inefficiencies.',
+    },
+    {
+      lead: 'Created and analyzed users requirements ',
+      text: 'for technology systems using use cases, mock ups, and interviewing stakeholders.',
+    },
+    {
+      lead: 'Prepared bid documents ',
+      text: 'and functional specifications for new application implementations.',
+    },
+    {
+      lead: 'Led sprint planning ',
+      text: 'and daily scrum meetings.',
+    },
+    {
+      lead: 'Created and maintained a company-wide inventory ',
+      text: 'and descriptions of major systems, and a new employee guide to using them.',
+    },
+  ]}
+/>
diff --git a/src/content/clients/estes-express.mdx b/src/content/clients/estes-express.mdx
index 03699f4ab..dca63b843 100644
--- a/src/content/clients/estes-express.mdx
+++ b/src/content/clients/estes-express.mdx
@@ -15,11 +15,33 @@ published: true
 
 Regional LTL freight carrier processing 50,000 daily shipments on a legacy .NET Framework 4.6.2 / AngularJS 1.5 platform running on colocated servers with an expiring colocation contract and no cloud or modern .NET experience within the development team.
 
-<List variant="experience-list" classes={{ wrapper: 'mb-0' }}>
-  <ListItem>Led migration and modernization of 38 applications from colocated servers to Azure, porting the .NET Framework monolith to .NET 8 and replacing the AngularJS frontend with Angular 17, completing two weeks ahead of deadline with zero unplanned downtime during 24/7 operations</ListItem>
-  <ListItem>Ported WCF services to ASP.NET Core minimal APIs using the strangler fig pattern with Azure API Management routing between legacy and modernized backends, cutting average API response times by 60% (320ms to 130ms)</ListItem>
-  <ListItem>Reverse-engineered undocumented carrier EDI integrations (FedEx, UPS, regional carriers) by capturing and analyzing network traffic, then rebuilt the integration layer using Azure API Management with Azure Functions and Azure Private Link</ListItem>
-  <ListItem>Reduced monthly infrastructure costs by 35% (from $89K to $58K) through Azure Container Apps, Azure SQL Database, and elimination of the colocation lease</ListItem>
-  <ListItem>Migrated SQL Server databases via Azure Database Migration Service with change data capture, replaced Entity Framework 6 with EF Core 8, and deployed .NET 8 services to Azure Container Apps with KEDA-based auto-scaling</ListItem>
-  <ListItem>Executed four-phase approach (non-critical systems → database migration and interim VM deployment → .NET 8 / Angular modernization → final cutover) that built team Azure competency before touching customer-facing systems</ListItem>
-</List>
+<List
+  variant="experience-list"
+  classes={{ wrapper: '-mt-3 mb-0' }}
+  items={[
+    {
+      lead: 'Led migration and modernization of 38 applications ',
+      text: 'from colocated servers to Azure, porting the .NET Framework monolith to .NET 8 and replacing the AngularJS frontend with Angular 17, completing two weeks ahead of deadline with zero unplanned downtime during 24/7 operations.',
+    },
+    {
+      lead: 'Ported WCF services to ASP.NET Core minimal APIs ',
+      text: 'using the strangler fig pattern with Azure API Management routing between legacy and modernized backends, cutting average API response times by 60% (320ms to 130ms).',
+    },
+    {
+      lead: 'Reverse-engineered undocumented carrier EDI integrations ',
+      text: '(FedEx, UPS, regional carriers) by capturing and analyzing network traffic, then rebuilt the integration layer using Azure API Management with Azure Functions and Azure Private Link.',
+    },
+    {
+      lead: 'Reduced monthly infrastructure costs by 35% ',
+      text: '(from $89K to $58K) through Azure Container Apps, Azure SQL Database, and elimination of the colocation lease.',
+    },
+    {
+      lead: 'Migrated SQL Server databases via Azure Database Migration Service ',
+      text: 'with change data capture, replaced Entity Framework 6 with EF Core 8, and deployed .NET 8 services to Azure Container Apps with KEDA-based auto-scaling.',
+    },
+    {
+      lead: 'Executed four-phase approach ',
+      text: '(non-critical systems → database migration and interim VM deployment → .NET 8 / Angular modernization → final cutover) that built team Azure competency before touching customer-facing systems.',
+    },
+  ]}
+/>
diff --git a/src/content/clients/fidelity.mdx b/src/content/clients/fidelity.mdx
index cc0347907..fe5f49547 100644
--- a/src/content/clients/fidelity.mdx
+++ b/src/content/clients/fidelity.mdx
@@ -15,10 +15,29 @@ published: true
 
 Fortune 100 financial services firm operating 100+ microservices across hybrid on-premises / AWS environment, with PCI-DSS compliance requirements, sub-100ms P99 latency SLAs, and 10M+ daily payment transactions.
 
-<List variant="experience-list" classes={{ wrapper: 'mb-0' }}>
-  <ListItem>Migrated 40+ microservices from EC2 to Amazon EKS while maintaining PCI-DSS compliance and sub-100ms latency; deployment frequency increased from bi-weekly to 15+ daily with 82% reduction in mean time to recovery</ListItem>
-  <ListItem>Implemented zero trust architecture using Istio service mesh, achieving 100% mTLS encryption for all service-to-service traffic and replacing 200+ static firewall rules with SPIFFE identity-based authorization policies</ListItem>
-  <ListItem>Deployed SPIRE for workload identity attestation with automatic hourly certificate rotation, reducing credential revocation time from hours to seconds; passed SOC2 Type II audit with zero network security findings</ListItem>
-  <ListItem>Configured ArgoCD for GitOps-based deployments and Karpenter for node provisioning, reducing infrastructure costs by 30% through better bin-packing and automatic scaling; P99 latency improved from 85ms to 72ms</ListItem>
-  <ListItem>Led four-phase rollout (permissive mesh → observability via Kiali → audit-mode policies → strict enforcement) that eliminated cascade failures without any production disruptions</ListItem>
-</List>
+<List
+  variant="experience-list"
+  classes={{ wrapper: '-mt-3 mb-0' }}
+  items={[
+    {
+      lead: 'Migrated 40+ microservices from EC2 to Amazon EKS ',
+      text: 'while maintaining PCI-DSS compliance and sub-100ms latency; deployment frequency increased from bi-weekly to 15+ daily with 82% reduction in mean time to recovery.',
+    },
+    {
+      lead: 'Implemented zero trust architecture using Istio service mesh ',
+      text: 'achieving 100% mTLS encryption for all service-to-service traffic and replacing 200+ static firewall rules with SPIFFE identity-based authorization policies.',
+    },
+    {
+      lead: 'Deployed SPIRE for workload identity attestation ',
+      text: 'with automatic hourly certificate rotation, reducing credential revocation time from hours to seconds; passed SOC2 Type II audit with zero network security findings.',
+    },
+    {
+      lead: 'Configured ArgoCD for GitOps-based deployments ',
+      text: 'and Karpenter for node provisioning, reducing infrastructure costs by 30% through better bin-packing and automatic scaling; P99 latency improved from 85ms to 72ms.',
+    },
+    {
+      lead: 'Led four-phase rollout ',
+      text: '(permissive mesh → observability via Kiali → audit-mode policies → strict enforcement) that eliminated cascade failures without any production disruptions.',
+    },
+  ]}
+/>
diff --git a/src/content/clients/moloco.mdx b/src/content/clients/moloco.mdx
index 5d4cfb0b4..76c34f414 100644
--- a/src/content/clients/moloco.mdx
+++ b/src/content/clients/moloco.mdx
@@ -15,9 +15,25 @@ published: true
 
 Machine learning adtech startup processing 500M+ daily events across 30+ services, suffering from cascade failures due to synchronous HTTP coupling and 24-hour analytics latency from batch processing.
 
-<List variant="experience-list" classes={{ wrapper: 'mb-0' }}>
-  <ListItem>Migrated service communication from synchronous request/response to event-driven architecture using Apache Kafka (AWS MSK), eliminating cascade failures that had averaged 8 incidents per month</ListItem>
-  <ListItem>Implemented Confluent Schema Registry with compatibility enforcement across 30+ services, preventing breaking changes during producer/consumer schema evolution</ListItem>
-  <ListItem>Reduced analytics latency from 24 hours to under 5 seconds by replacing nightly batch jobs with real-time stream processing using ksqlDB, enabling real-time customer dashboards</ListItem>
-  <ListItem>Executed three-phase migration (billing pilot → analytics events → operational events) with zero downtime, increasing system throughput 3x on the same infrastructure</ListItem>
-</List>
+<List
+  variant="experience-list"
+  classes={{ wrapper: '-mt-3 mb-0' }}
+  items={[
+    {
+      lead: 'Migrated service communication ',
+      text: 'from synchronous request/response to event-driven architecture using Apache Kafka (AWS MSK), eliminating cascade failures that had averaged 8 incidents per month.',
+    },
+    {
+      lead: 'Implemented Confluent Schema Registry ',
+      text: 'with compatibility enforcement across 30+ services, preventing breaking changes during producer/consumer schema evolution.',
+    },
+    {
+      lead: 'Reduced analytics latency from 24 hours to under 5 seconds ',
+      text: 'by replacing nightly batch jobs with real-time stream processing using ksqlDB, enabling real-time customer dashboards.',
+    },
+    {
+      lead: 'Executed three-phase migration ',
+      text: '(billing pilot → analytics events → operational events) with zero downtime, increasing system throughput 3x on the same infrastructure.',
+    },
+  ]}
+/>
diff --git a/src/content/clients/netsmart.mdx b/src/content/clients/netsmart.mdx
index ad6cca251..97d87c3ff 100644
--- a/src/content/clients/netsmart.mdx
+++ b/src/content/clients/netsmart.mdx
@@ -15,10 +15,29 @@ published: true
 
 Healthcare technology company running 60+ microservices (Node.js, Python, Go) with fragmented observability across CloudWatch, Elasticsearch, Jaeger, and X-Ray.
 
-<List variant="experience-list" classes={{ wrapper: 'mb-0' }}>
-  <ListItem>Deployed unified observability stack with OpenTelemetry instrumentation and Grafana backends (Prometheus, Loki, Tempo), reducing mean time to detection from 4 hours to 8 minutes and MTTR from 6 hours to 45 minutes</ListItem>
-  <ListItem>Built PHI redaction pipeline using OpenTelemetry Collector processors, enabling centralized logging while maintaining HIPAA compliance; passed audit with zero logging findings</ListItem>
-  <ListItem>Saved $150K annually by replacing projected Datadog costs ($180K/yr) with self-hosted Grafana stack ($30K/yr in compute and storage) on existing Kubernetes infrastructure</ListItem>
-  <ListItem>Automated 85% of HIPAA Security Rule controls using AWS Config rules, Terraform modules with compliant defaults, and CI/CD policy checks; reduced audit evidence collection from two weeks to two hours</ListItem>
-  <ListItem>Achieved HIPAA certification one month ahead of deadline, directly enabling a $2M ARR enterprise contract with a regional hospital network</ListItem>
-</List>
+<List
+  variant="experience-list"
+  classes={{ wrapper: '-mt-3 mb-0' }}
+  items={[
+    {
+      lead: 'Deployed unified observability stack ',
+      text: 'with OpenTelemetry instrumentation and Grafana backends (Prometheus, Loki, Tempo), reducing mean time to detection from 4 hours to 8 minutes and MTTR from 6 hours to 45 minutes.',
+    },
+    {
+      lead: 'Built PHI redaction pipeline ',
+      text: 'using OpenTelemetry Collector processors, enabling centralized logging while maintaining HIPAA compliance; passed audit with zero logging findings.',
+    },
+    {
+      lead: 'Saved $150K annually by replacing projected Datadog costs ',
+      text: '($180K/yr) with self-hosted Grafana stack ($30K/yr in compute and storage) on existing Kubernetes infrastructure.',
+    },
+    {
+      lead: 'Automated 85% of HIPAA Security Rule controls ',
+      text: 'using AWS Config rules, Terraform modules with compliant defaults, and CI/CD policy checks; reduced audit evidence collection from two weeks to two hours.',
+    },
+    {
+      lead: 'Achieved HIPAA certification one month ahead of deadline ',
+      text: 'directly enabling a $2M ARR enterprise contract with a regional hospital network.',
+    },
+  ]}
+/>
diff --git a/src/content/clients/overstock.mdx b/src/content/clients/overstock.mdx
index 239f71c8c..50deb0b2e 100644
--- a/src/content/clients/overstock.mdx
+++ b/src/content/clients/overstock.mdx
@@ -15,11 +15,33 @@ published: true
 
 E-commerce platform with 15 engineers and eight years of manual AWS console management across 847+ resources, suffering from configuration drift, two-week environment provisioning, and untracked incident response processes.
 
-<List variant="experience-list" classes={{ wrapper: 'mb-0' }}>
-  <ListItem>Imported 847 AWS resources into Terraform using S3 remote state with DynamoDB locking, establishing version-controlled infrastructure after a prior Terraform attempt had failed due to state file corruption</ListItem>
-  <ListItem>Set up Atlantis for PR-based infrastructure workflows with automatic `terraform plan` output on pull requests, eliminating direct console changes that had previously caused a production payment system outage</ListItem>
-  <ListItem>Reduced new environment provisioning from two weeks to two hours; resolved production/staging configuration drift that had been causing unreproducible bugs</ListItem>
-  <ListItem>Introduced structured incident management framework with severity levels, escalation paths, and an Incident Commander rotation, reducing mean time to resolution by 72% (from 90 to 25 minutes)</ListItem>
-  <ListItem>Created runbook library for the top 20 recurring incident types, reducing on-call pages by 73% (from 15 to 4 per week) and enabling junior engineers to resolve incidents previously requiring senior escalation</ListItem>
-  <ListItem>Established blameless postmortem process that reduced recurring incidents by 60% and eliminated on-call burden as a factor in engineer attrition</ListItem>
-</List>
+<List
+  variant="experience-list"
+  classes={{ wrapper: '-mt-3 mb-0' }}
+  items={[
+    {
+      lead: 'Imported 847 AWS resources into Terraform ',
+      text: 'using S3 remote state with DynamoDB locking, establishing version-controlled infrastructure after a prior Terraform attempt had failed due to state file corruption.',
+    },
+    {
+      lead: 'Set up Atlantis for PR-based infrastructure workflows ',
+      text: 'with automatic `terraform plan` output on pull requests, eliminating direct console changes that had previously caused a production payment system outage.',
+    },
+    {
+      lead: 'Reduced new environment provisioning from two weeks ',
+      text: 'to two hours; resolved production / staging configuration drift that had been causing unreproducible bugs.',
+    },
+    {
+      lead: 'Introduced structured incident management framework ',
+      text: 'with severity levels, escalation paths, and an Incident Commander rotation, reducing mean time to resolution by 72% (from 90 to 25 minutes).',
+    },
+    {
+      lead: 'Created runbook library for the top 20 recurring incident types ',
+      text: 'reducing on-call pages by 73% (from 15 to 4 per week) and enabling junior engineers to resolve incidents previously requiring senior escalation.',
+    },
+    {
+      lead: 'Established blameless postmortem process ',
+      text: 'that reduced recurring incidents by 60% and eliminated on-call burden as a factor in engineer attrition.',
+    },
+  ]}
+/>
diff --git a/src/content/clients/tegna.mdx b/src/content/clients/tegna.mdx
index 640c5616b..234be4ce0 100644
--- a/src/content/clients/tegna.mdx
+++ b/src/content/clients/tegna.mdx
@@ -15,9 +15,25 @@ published: true
 
 Media and broadcasting company with 120 engineers across 8 product teams, bottlenecked by a two-person platform team processing all AWS infrastructure requests.
 
-<List variant="experience-list" classes={{ wrapper: 'mb-0' }}>
-  <ListItem>Built self-service infrastructure provisioning system using Terraform modules, OPA policy-as-code guardrails, and Atlantis PR-based workflows, reducing request lead time from two weeks to under one hour</ListItem>
-  <ListItem>Designed five core Terraform modules (S3, RDS, Lambda, SQS, ElastiCache) covering 91% of all infrastructure requests, with security best practices (encryption, network isolation, audit logging) baked in</ListItem>
-  <ListItem>Integrated Conftest with OPA policies enforcing SOC2 requirements in the CI pipeline, achieving zero policy violations while eliminating shadow IT resources discovered during initial audit</ListItem>
-  <ListItem>Reduced platform team ticket volume by 75%, enabling them to shift from repetitive provisioning to high-value platform work; infrastructure spend dropped 12% despite increased provisioning volume</ListItem>
-</List>
+<List
+  variant="experience-list"
+  classes={{ wrapper: '-mt-3 mb-0' }}
+  items={[
+    {
+      lead: 'Built self-service infrastructure provisioning system ',
+      text: 'using Terraform modules, OPA policy-as-code guardrails, and Atlantis PR-based workflows, reducing request lead time from two weeks to under one hour.',
+    },
+    {
+      lead: 'Designed five core Terraform modules ',
+      text: '(S3, RDS, Lambda, SQS, ElastiCache) covering 91% of all infrastructure requests, with security best practices (encryption, network isolation, audit logging) baked in.',
+    },
+    {
+      lead: 'Integrated Conftest with OPA policies ',
+      text: 'enforcing SOC2 requirements in the CI pipeline, achieving zero policy violations while eliminating shadow IT resources discovered during initial audit.',
+    },
+    {
+      lead: 'Reduced platform team ticket volume by 75% ',
+      text: 'enabling them to shift from repetitive provisioning to high-value platform work; infrastructure spend dropped 12% despite increased provisioning volume.',
+    },
+  ]}
+/>
diff --git a/src/content/clients/wolters-kluwer.mdx b/src/content/clients/wolters-kluwer.mdx
index c0440a2fd..e099dcbbe 100644
--- a/src/content/clients/wolters-kluwer.mdx
+++ b/src/content/clients/wolters-kluwer.mdx
@@ -15,9 +15,25 @@ published: true
 
 Global information services company with 200+ engineers across 25 teams, struggling with fragmented documentation, unknown service ownership, and three-week onboarding cycles after years of acquisitions.
 
-<List variant="experience-list" classes={{ wrapper: 'mb-0' }}>
-  <ListItem>Led implementation of Spotify's Backstage as the internal developer platform, achieving voluntary 100% service catalog adoption across all 340 services within six months without any organizational mandate</ListItem>
-  <ListItem>Integrated TechDocs for in-repo Markdown documentation rendering, raising documentation coverage from 40% to 95% by eliminating the friction of separate documentation systems</ListItem>
-  <ListItem>Built software scaffolder templates that reduced new service creation from two days to 30 minutes, with CI/CD, observability, and catalog registration pre-configured</ListItem>
-  <ListItem>Developed custom Backstage plugins for deployment history, feature flags, incident management, and per-service cost visibility; cut new engineer onboarding from three weeks to four days</ListItem>
-</List>
+<List
+  variant="experience-list"
+  classes={{ wrapper: '-mt-3 mb-0' }}
+  items={[
+    {
+      lead: "Led implementation of Spotify's Backstage ",
+      text: "as the internal developer platform, achieving voluntary 100% service catalog adoption across all 340 services within six months without any organizational mandate.",
+    },
+    {
+      lead: 'Integrated TechDocs for in-repo Markdown ',
+      text: 'documentation rendering, raising documentation coverage from 40% to 95% by eliminating the friction of separate documentation systems.',
+    },
+    {
+      lead: 'Built software scaffolder templates ',
+      text: 'that reduced new service creation from two days to 30 minutes, with CI / CD, observability, and catalog registration pre-configured.',
+    },
+    {
+      lead: 'Developed custom Backstage plugins ',
+      text: 'for deployment history, feature flags, incident management, and per-service cost visibility; cut new engineer onboarding from three weeks to four days.',
+    },
+  ]}
+/>
diff --git a/src/content/resume.json b/src/content/resume.json
index 674ca9ed4..57624cd54 100644
--- a/src/content/resume.json
+++ b/src/content/resume.json
@@ -9,7 +9,7 @@
   "email": "kevin@webstackbuilders.com",
   "firstName": "Kevin",
   "lastName": "Brown",
-  "languages": ["TypeScript", "Python", "Go", "HCL", "Rego", "Bash", "C++"],
+  "languages": ["Python", "Go", "TypeScript", "Ruby", "Lua", "HCL", "Rego", "Bash", "C++", "Java"],
   "location": "Tampa, Florida",
   "mapLink": "https://goo.gl/maps/2YrZYDRvD3FU9mkCA",
   "name": "Kevin Brown",
@@ -24,7 +24,11 @@
     },
     {
       "lead": "CI/CD & Developer Experience",
-      "text": "ArgoCD, GitHub Actions, Turborepo, Backstage (Spotify), TechDocs, software scaffolding, monorepo tooling"
+      "text": "ArgoCD, GitHub Actions, Turborepo, pipeline optimization, incremental builds, parallelized test execution, software scaffolding, monorepo tooling"
+    },
+    {
+      "lead": "Agentic Workflows & IDP",
+      "text": "Backstage-based internal developer platforms, agentic workflows, LangGraph, Claude Skills, AI-assisted scaffolding and operational automation"
     },
     {
       "lead": "Security & Compliance",
diff --git a/src/integrations/CtaValidator/parsers/index.ts b/src/integrations/CtaValidator/parsers/index.ts
index 4cbc441f2..95c867b75 100644
--- a/src/integrations/CtaValidator/parsers/index.ts
+++ b/src/integrations/CtaValidator/parsers/index.ts
@@ -6,8 +6,8 @@
 export { parseFrontmatter } from './frontmatter'
 export { findComponentUsages, generateImportPatterns } from './componentFinder'
 export {
-	getContentTypeFromPath,
-	getFirstComponent,
-	extractSlugAndCollection,
-	shouldIgnoreCtaValidation,
+  getContentTypeFromPath,
+  getFirstComponent,
+  extractSlugAndCollection,
+  shouldIgnoreCtaValidation,
 } from './pathUtils'
diff --git a/src/integrations/PackageRelease/index.ts b/src/integrations/PackageRelease/index.ts
index 5be5d2e15..b3f27f9d7 100644
--- a/src/integrations/PackageRelease/index.ts
+++ b/src/integrations/PackageRelease/index.ts
@@ -63,7 +63,8 @@ function getBuildRelease(): string | undefined {
     return undefined
   }
 
-  const releaseCandidate = getOptionalEnv('GITHUB_SHA') ||
+  const releaseCandidate =
+    getOptionalEnv('GITHUB_SHA') ||
     getOptionalEnv('VERCEL_GIT_COMMIT_SHA') ||
     getOptionalEnv('PUBLIC_VERCEL_GIT_COMMIT_SHA')
 
diff --git a/src/integrations/TestimonialsLengthWarning/__tests__/index.spec.ts b/src/integrations/TestimonialsLengthWarning/__tests__/index.spec.ts
index 25bbe75e6..2797e2be9 100644
--- a/src/integrations/TestimonialsLengthWarning/__tests__/index.spec.ts
+++ b/src/integrations/TestimonialsLengthWarning/__tests__/index.spec.ts
@@ -8,14 +8,7 @@ describe('TestimonialsLengthWarning', () => {
     })
 
     it('removes YAML frontmatter and trims body', () => {
-      const raw = [
-        '---',
-        'name: Test',
-        '---',
-        '',
-        'This is the body.',
-        '',
-      ].join('\n')
+      const raw = ['---', 'name: Test', '---', '', 'This is the body.', ''].join('\n')
 
       expect(stripFrontmatter(raw)).toBe('This is the body.')
     })
diff --git a/src/integrations/TestimonialsLengthWarning/index.ts b/src/integrations/TestimonialsLengthWarning/index.ts
index 4b91902a8..ac135535d 100644
--- a/src/integrations/TestimonialsLengthWarning/index.ts
+++ b/src/integrations/TestimonialsLengthWarning/index.ts
@@ -25,7 +25,9 @@ const TestimonialsLengthWarningOptionsSchema = z
     message: '`min` must be less than or equal to `max`',
   })
 
-export type TestimonialsLengthWarningOptions = z.infer<typeof TestimonialsLengthWarningOptionsSchema>
+export type TestimonialsLengthWarningOptions = z.infer<
+  typeof TestimonialsLengthWarningOptionsSchema
+>
 
 export type TestimonialsLengthWarningOptionsInput = z.input<
   typeof TestimonialsLengthWarningOptionsSchema
@@ -56,7 +58,10 @@ export function stripFrontmatter(raw: string): string {
     return raw
   }
 
-  return lines.slice(endIndex + 1).join('\n').trim()
+  return lines
+    .slice(endIndex + 1)
+    .join('\n')
+    .trim()
 }
 
 export function getVisibleCharacterCount(rawBody: string): number {
@@ -65,7 +70,8 @@ export function getVisibleCharacterCount(rawBody: string): number {
   return rawBody.replace(/\s+/g, ' ').trim().length
 }
 
-const isMarkdownFile = (fileName: string): boolean => fileName.endsWith('.md') || fileName.endsWith('.mdx')
+const isMarkdownFile = (fileName: string): boolean =>
+  fileName.endsWith('.md') || fileName.endsWith('.mdx')
 
 async function getTestimonialContentFiles(contentRoot: string): Promise<string[]> {
   const testimonialsRoot = join(contentRoot, 'testimonials')
@@ -154,9 +160,7 @@ export function testimonialsLengthWarning(
         if (tooShort.length > 0 || tooLong.length > 0) {
           const lines: string[] = []
 
-          lines.push(
-            `Testimonials length validation failed (min: ${min}, max: ${max}).`
-          )
+          lines.push(`Testimonials length validation failed (min: ${min}, max: ${max}).`)
           lines.push('')
 
           if (tooShort.length > 0) {
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 6963b6848..6353a17e6 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -148,7 +148,9 @@ applyRenderSentryContext({
       {/* Site header and main content */}
       <Container id="main-content">
         <Header path={path} showProgressBar={showProgressBar} />
-        {/* Scroll viewport — sole scroll container for the page.            Its scrollbar physically starts below the header. */}
+        {
+          /* Scroll viewport — sole scroll container for the page.            Its scrollbar physically starts below the header. */
+        }
         <div
           id="scroll-viewport"
           class="flex-1 min-h-0 overflow-y-auto flex flex-col"
@@ -174,12 +176,7 @@ applyRenderSentryContext({
             )
           }
 
-          <main
-            id="main"
-            class="flex flex-col flex-1"
-            role="main"
-            tabindex="-1"
-          >
+          <main id="main" class="flex flex-col flex-1" role="main" tabindex="-1">
             {/* SLOT: default (unnamed) - Main page content */}
             <slot />
           </main>
@@ -187,13 +184,15 @@ applyRenderSentryContext({
           <Footer />
         </div>
       </Container>
-      {isProd() && (
-        <>
-          <Analytics />
-          <RegisterServiceWorker />
-          <PrefetchOfflinePage />
-        </>
-      )}
+      {
+        isProd() && (
+          <>
+            <Analytics />
+            <RegisterServiceWorker />
+            <PrefetchOfflinePage />
+          </>
+        )
+      }
       <Tooltip />
     </body>
   </>
diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro
index d2cf52cb5..42b447f35 100644
--- a/src/layouts/MarkdownLayout.astro
+++ b/src/layouts/MarkdownLayout.astro
@@ -24,7 +24,7 @@ import Copy from '@components/Copy/index.astro'
 import Diagram from '@components/Diagram/index.astro'
 import Download from '@components/CallToAction/Download/index.astro'
 import Embed from '@components/Social/Embed/index.astro'
-import FileExplorer from "@components/FileExplorer/index.astro"
+import FileExplorer from '@components/FileExplorer/index.astro'
 import Highlighter from '@components/Social/Highlighter/index.astro'
 import HighlighterIconBank from '@components/Social/Highlighter/HighlighterIconBank.astro'
 import Icon from '@components/Icon/index.astro'
@@ -188,12 +188,16 @@ const link = `https://www.webstackbuilders.com${path}`
       class={`${shouldRenderToc ? 'grid gap-8 lg:grid-cols-[1fr_250px]' : 'flex flex-col gap-8'}`}
       itemprop="articleBody"
     >
-      {shouldRenderToc && (
-        <div class="lg:col-start-2 lg:row-start-1">
-          <Toc items={tocHeadings} />
-        </div>
-      )}
-      <div class={`markdown-content__prose min-w-0 leading-relaxed ${shouldRenderToc ? 'lg:col-start-1 lg:row-start-1' : ''}`}>
+      {
+        shouldRenderToc && (
+          <div class="lg:col-start-2 lg:row-start-1">
+            <Toc items={tocHeadings} />
+          </div>
+        )
+      }
+      <div
+        class={`markdown-content__prose min-w-0 leading-relaxed ${shouldRenderToc ? 'lg:col-start-1 lg:row-start-1' : ''}`}
+      >
         <slot />
         <Content components={{ ...Components }} />
       </div>
@@ -201,7 +205,9 @@ const link = `https://www.webstackbuilders.com${path}`
       {/** SLOT: after-content, includes social shares and web mentions */}
       <slot name="after-content" />
 
-      <div class="hidden mx-24 mt-8 print:grid print:grid-cols-2 print:gap-4 print:items-center print:break-inside-avoid">
+      <div
+        class="hidden mx-24 mt-8 print:grid print:grid-cols-2 print:gap-4 print:items-center print:break-inside-avoid"
+      >
         <span class="print:break-inside-avoid">
           <Copyright publishDate={publishDate ?? new Date()} variant="print" link={link} />
         </span>
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
index 586abac7a..7d2f4c1a7 100644
--- a/src/layouts/PageLayout.astro
+++ b/src/layouts/PageLayout.astro
@@ -56,7 +56,7 @@ const baseLayoutProps = {
   <SubHeader
     title={title ?? pageTitle}
     description={description ?? pageDescription}
-    {...(subtitle ? { subtitle } : {})}
+    {...subtitle ? { subtitle } : {}}
     icon={icon}
   />
   {/** Page content */}
diff --git a/src/lib/config/__tests__/shiki.spec.ts b/src/lib/config/__tests__/shiki.spec.ts
index 0bc5adc33..9f286e3a5 100644
--- a/src/lib/config/__tests__/shiki.spec.ts
+++ b/src/lib/config/__tests__/shiki.spec.ts
@@ -64,7 +64,7 @@ describe('shiki transformers', () => {
 
 describe('shiki language configuration', () => {
   it('registers the custom rego grammar', () => {
-    const regoLanguage = shikiConfigOptions.langs.find((lang) => lang.name === 'rego')
+    const regoLanguage = shikiConfigOptions.langs.find(lang => lang.name === 'rego')
 
     expect(regoLanguage).toBeDefined()
     expect(regoLanguage?.scopeName).toBe('source.rego')
diff --git a/src/lib/config/environmentalVariableValidation.ts b/src/lib/config/environmentalVariableValidation.ts
index ca3c0243f..ac44c8ab2 100644
--- a/src/lib/config/environmentalVariableValidation.ts
+++ b/src/lib/config/environmentalVariableValidation.ts
@@ -41,12 +41,13 @@ export const environmentalVariablesConfig: AstroUserConfig['env'] = {
       optional: true,
     }),
     /**
-     * Gets the privacy policy version injected at build time via the PrivacyPolicy integration.
+     * Gets the privacy policy version injected at build time via the PrivacyPolicyVersion integration.
+     * No default is set intentionally — if the integration fails to inject this, getPrivacyPolicyVersion()
+     * will throw, surfacing the configuration error rather than silently storing an invalid epoch date.
      */
     PRIVACY_POLICY_VERSION: envField.string({
       access: 'public',
       context: 'client',
-      default: '1970-01-01',
       optional: true,
     }),
     /**
diff --git a/src/lib/config/linkValidator.ts b/src/lib/config/linkValidator.ts
index 0c6de2189..a885c825f 100644
--- a/src/lib/config/linkValidator.ts
+++ b/src/lib/config/linkValidator.ts
@@ -37,4 +37,4 @@ export const linkValidatorPlugin = linkValidator({
   externalTimeout: 15000,
   failOnBrokenLinks: true,
   verbose: true,
-})
\ No newline at end of file
+})
diff --git a/src/lib/config/markdown.ts b/src/lib/config/markdown.ts
index bf63ea066..8adfc1082 100644
--- a/src/lib/config/markdown.ts
+++ b/src/lib/config/markdown.ts
@@ -264,7 +264,6 @@ export const remarkGfmConfig = {
 /** remark-math plugin (parse TeX math; avoid $...$ to prevent accidental currency parsing) */
 export const remarkMathConfig = { singleDollarTextMath: false } as const
 
-
 /** remark-rehype plugin (conversion from markdown to HTML AST) */
 export const remarkRehypeConfig: RemarkRehypeOptions = {
   /** Footnote label displayed to return to reference */
diff --git a/src/lib/config/mermaid.ts b/src/lib/config/mermaid.ts
index 9ae6dfb3c..48cc6fe4d 100644
--- a/src/lib/config/mermaid.ts
+++ b/src/lib/config/mermaid.ts
@@ -38,7 +38,7 @@ export const rehypeMermaidConfig = {
   css: buildTimeCssUrl,
   mermaidConfig: {
     securityLevel: 'loose',
-    theme: 'base', /** Required to use custom themeVariables */
+    theme: 'base' /** Required to use custom themeVariables */,
     flowchart: {
       // Reserve vertical space below wrapped subgraph titles so nodes do not overlap them.
       subGraphTitleMargin: {
@@ -46,9 +46,9 @@ export const rehypeMermaidConfig = {
         bottom: 16,
       },
     },
-    'themeVariables': {
+    themeVariables: {
       /** Pie chart outer stroke width */
-      pieOuterStrokeWidth: "1px",
+      pieOuterStrokeWidth: '1px',
       /** Pie chart colors */
       pie1: '#22c55e',
       pie2: '#3b82f6',
diff --git a/src/lib/config/shiki.ts b/src/lib/config/shiki.ts
index f78bddd54..1604884cf 100644
--- a/src/lib/config/shiki.ts
+++ b/src/lib/config/shiki.ts
@@ -44,7 +44,10 @@ function parseDiffMeta(metaRaw: string | undefined): { ins: Set<number>; del: Se
   }
 }
 
-function parseErrorWarningMeta(metaRaw: string | undefined): { error: Set<number>; warning: Set<number> } {
+function parseErrorWarningMeta(metaRaw: string | undefined): {
+  error: Set<number>
+  warning: Set<number>
+} {
   return {
     error: parseLineSet(metaRaw, errorMetaRegex),
     warning: parseLineSet(metaRaw, warningMetaRegex),
diff --git a/src/lib/config/siteUrlServer.ts b/src/lib/config/siteUrlServer.ts
index 953ce0750..93da4b05a 100644
--- a/src/lib/config/siteUrlServer.ts
+++ b/src/lib/config/siteUrlServer.ts
@@ -2,10 +2,7 @@
  * Server-side method to determine correct URL
  */
 import { BuildError } from '../errors/BuildError'
-import {
-  isProd,
-  isVercel
-} from './environmentServer'
+import { isProd, isVercel } from './environmentServer'
 
 const devServerPort = process.env['DEV_SERVER_PORT']?.trim()
 const resolvedDevServerPort = devServerPort && devServerPort.length > 0 ? devServerPort : '4321'
diff --git a/src/lib/markdown/__tests__/e2e/remark-blockquote.spec.tsx b/src/lib/markdown/__tests__/e2e/remark-blockquote.spec.tsx
index ba74074fb..26c1cd3ec 100644
--- a/src/lib/markdown/__tests__/e2e/remark-blockquote.spec.tsx
+++ b/src/lib/markdown/__tests__/e2e/remark-blockquote.spec.tsx
@@ -44,7 +44,9 @@ describe('Layer 3: E2E - Blockquote', () => {
   it('uses semantic structure for each variant', async () => {
     const { container } = render(<MarkdownOutput html={html} />)
 
-    const attributionFigures = container.querySelectorAll('figure.blockquote:not(.blockquote-figure)')
+    const attributionFigures = container.querySelectorAll(
+      'figure.blockquote:not(.blockquote-figure)'
+    )
     expect(attributionFigures.length).toBeGreaterThan(0)
 
     attributionFigures.forEach(figure => {
diff --git a/src/lib/markdown/__tests__/integration/rehype-mathjax-a11y-astro.spec.ts b/src/lib/markdown/__tests__/integration/rehype-mathjax-a11y-astro.spec.ts
index 85f03d4e9..5b49c4c9d 100644
--- a/src/lib/markdown/__tests__/integration/rehype-mathjax-a11y-astro.spec.ts
+++ b/src/lib/markdown/__tests__/integration/rehype-mathjax-a11y-astro.spec.ts
@@ -4,13 +4,9 @@ import { processWithFullPipeline } from '@lib/markdown/helpers/processors'
 
 describe('rehype-mathjax accessibility (Layer 2: Astro pipeline)', () => {
   it('adds accessible labels to inline and display MathJax SVG output', async () => {
-    const markdown = [
-      'Inline math: $$a^2 + b^2 = c^2$$.',
-      '',
-      '```math',
-      'E = mc^2',
-      '```',
-    ].join('\n')
+    const markdown = ['Inline math: $$a^2 + b^2 = c^2$$.', '', '```math', 'E = mc^2', '```'].join(
+      '\n'
+    )
 
     const html = await processWithFullPipeline(markdown)
 
@@ -19,4 +15,4 @@ describe('rehype-mathjax accessibility (Layer 2: Astro pipeline)', () => {
     expect(html).toContain('<title>Math expression: a^2 + b^2 = c^2</title>')
     expect(html).toContain('<title>Math expression: E = mc^2</title>')
   })
-})
\ No newline at end of file
+})
diff --git a/src/lib/markdown/__tests__/integration/remark-abbreviations-astro.spec.ts b/src/lib/markdown/__tests__/integration/remark-abbreviations-astro.spec.ts
index 150e8e0f0..dea99e515 100644
--- a/src/lib/markdown/__tests__/integration/remark-abbreviations-astro.spec.ts
+++ b/src/lib/markdown/__tests__/integration/remark-abbreviations-astro.spec.ts
@@ -14,7 +14,9 @@ This uses MDAST with ~~strikethrough~~ text.
       const html = await processWithAstroSettings({ markdown, plugin: remarkAbbreviations })
 
       // Should have abbreviation
-      expect(html).toContain('<abbr data-tooltip="" title="Markdown Abstract Syntax Tree">MDAST</abbr>')
+      expect(html).toContain(
+        '<abbr data-tooltip="" title="Markdown Abstract Syntax Tree">MDAST</abbr>'
+      )
       // Should have GFM strikethrough
       expect(html).toContain('<del>strikethrough</del>')
     })
@@ -31,7 +33,9 @@ This uses MDAST with ~~strikethrough~~ text.
       const html = await processWithAstroSettings({ markdown, plugin: remarkAbbreviations })
 
       expect(html).toContain('<table')
-      expect(html).toContain('<abbr data-tooltip="" title="Markdown Abstract Syntax Tree">MDAST</abbr>')
+      expect(html).toContain(
+        '<abbr data-tooltip="" title="Markdown Abstract Syntax Tree">MDAST</abbr>'
+      )
     })
 
     it('should work with GFM autolinks', async () => {
@@ -60,7 +64,9 @@ This uses MDAST[^1].
 
       const html = await processWithAstroSettings({ markdown, plugin: remarkAbbreviations })
 
-      expect(html).toContain('<abbr data-tooltip="" title="Markdown Abstract Syntax Tree">MDAST</abbr>')
+      expect(html).toContain(
+        '<abbr data-tooltip="" title="Markdown Abstract Syntax Tree">MDAST</abbr>'
+      )
       // Footnote reference should be present
       expect(html).toContain('footnote')
     })
@@ -76,7 +82,9 @@ The "MDAST" format is great.
 
       const html = await processWithAstroSettings({ markdown, plugin: remarkAbbreviations })
 
-      expect(html).toContain('<abbr data-tooltip="" title="Markdown Abstract Syntax Tree">MDAST</abbr>')
+      expect(html).toContain(
+        '<abbr data-tooltip="" title="Markdown Abstract Syntax Tree">MDAST</abbr>'
+      )
       // Note: smartypants is handled by Astro's internal processing, not in our test pipeline
     })
   })
diff --git a/src/lib/markdown/__tests__/integration/remark-blockquote-astro.spec.ts b/src/lib/markdown/__tests__/integration/remark-blockquote-astro.spec.ts
index 71e2cc200..251aa8fad 100644
--- a/src/lib/markdown/__tests__/integration/remark-blockquote-astro.spec.ts
+++ b/src/lib/markdown/__tests__/integration/remark-blockquote-astro.spec.ts
@@ -4,10 +4,9 @@ import { processWithAstroSettings } from '@lib/markdown/helpers/processors'
 
 describe('remark-blockquote (Layer 2: With Astro Pipeline)', () => {
   it('renders attribution-only blockquotes with expected semantic elements', async () => {
-    const markdown = [
-      "> That's ~~not~~ **definitely** one small step.",
-      '> — Neil Armstrong',
-    ].join('\n')
+    const markdown = ["> That's ~~not~~ **definitely** one small step.", '> — Neil Armstrong'].join(
+      '\n'
+    )
 
     const html = await processWithAstroSettings({ markdown, plugin: remarkBlockquote })
 
diff --git a/src/lib/markdown/plugins/rehype-code-tabs/__tests__/three-block-repro.spec.ts b/src/lib/markdown/plugins/rehype-code-tabs/__tests__/three-block-repro.spec.ts
index d360eca4b..da8079902 100644
--- a/src/lib/markdown/plugins/rehype-code-tabs/__tests__/three-block-repro.spec.ts
+++ b/src/lib/markdown/plugins/rehype-code-tabs/__tests__/three-block-repro.spec.ts
@@ -12,11 +12,7 @@ import rehypeCodeTabs from '@lib/markdown/plugins/rehype-code-tabs'
 import { unified } from 'unified'
 
 function isElementNode(node: unknown): node is Element {
-  return (
-    !!node &&
-    typeof node === 'object' &&
-    (node as Element).type === 'element'
-  )
+  return !!node && typeof node === 'object' && (node as Element).type === 'element'
 }
 
 describe('3-block code-tabs grouping', () => {
@@ -54,15 +50,17 @@ describe('3-block code-tabs grouping', () => {
       type: 'element',
       tagName: 'pre',
       properties: {},
-      children: [{
-        type: 'element',
-        tagName: 'code',
-        properties: {
-          'data-code-tabs-group': 'g1',
-          'data-code-tabs-tab': tab,
+      children: [
+        {
+          type: 'element',
+          tagName: 'code',
+          properties: {
+            'data-code-tabs-group': 'g1',
+            'data-code-tabs-tab': tab,
+          },
+          children: [{ type: 'text', value: `code for ${tab}` }],
         },
-        children: [{ type: 'text', value: `code for ${tab}` }],
-      }],
+      ],
     })
 
     const tree: Root = {
@@ -81,7 +79,10 @@ describe('3-block code-tabs grouping', () => {
 
     const elements = tree.children.filter(isElementNode)
 
-    console.log('Elements:', elements.map(e => `${e.tagName}(${e.children?.length})`))
+    console.log(
+      'Elements:',
+      elements.map(e => `${e.tagName}(${e.children?.length})`)
+    )
 
     expect(elements.length, 'Should have exactly 1 top-level element').toBe(1)
     const wrapper = elements[0]
@@ -97,16 +98,18 @@ describe('3-block code-tabs grouping', () => {
       type: 'element',
       tagName: 'pre',
       properties: {},
-      children: [{
-        type: 'element',
-        tagName: 'code',
-        properties: {
-          className: [`language-${lang}`],
-          'data-code-tabs-group': 'g1',
-          'data-code-tabs-tab': tab,
+      children: [
+        {
+          type: 'element',
+          tagName: 'code',
+          properties: {
+            className: [`language-${lang}`],
+            'data-code-tabs-group': 'g1',
+            'data-code-tabs-tab': tab,
+          },
+          children: [{ type: 'text', value: `code for ${tab}` }],
         },
-        children: [{ type: 'text', value: `code for ${tab}` }],
-      }],
+      ],
     })
 
     // Simulate remark-captions wrapping the 3rd code block in <figure>
@@ -147,9 +150,7 @@ describe('3-block code-tabs grouping', () => {
     expect(wrapper.tagName).toBe('code-tabs')
     expect(wrapper.children.length, 'code-tabs should contain all 3 pre blocks').toBe(3)
     // Verify all children are <pre> (not figure)
-    expect(wrapper.children.every(
-      c => isElementNode(c) && c.tagName === 'pre'
-    )).toBe(true)
+    expect(wrapper.children.every(c => isElementNode(c) && c.tagName === 'pre')).toBe(true)
   })
 
   it('does NOT unwrap figures containing non-grouped code blocks', async () => {
@@ -165,12 +166,14 @@ describe('3-block code-tabs grouping', () => {
               type: 'element',
               tagName: 'pre',
               properties: {},
-              children: [{
-                type: 'element',
-                tagName: 'code',
-                properties: { className: ['language-python'] },
-                children: [{ type: 'text', value: 'print(1)' }],
-              }],
+              children: [
+                {
+                  type: 'element',
+                  tagName: 'code',
+                  properties: { className: ['language-python'] },
+                  children: [{ type: 'text', value: 'print(1)' }],
+                },
+              ],
             },
             {
               type: 'element',
diff --git a/src/lib/markdown/plugins/rehype-footnotes-title/index.ts b/src/lib/markdown/plugins/rehype-footnotes-title/index.ts
index b37fb273e..c9bae6f55 100644
--- a/src/lib/markdown/plugins/rehype-footnotes-title/index.ts
+++ b/src/lib/markdown/plugins/rehype-footnotes-title/index.ts
@@ -77,9 +77,8 @@ function labelFootnotesSection(section: Element): void {
     headingProperties['className'] = headingClasses.filter(className => className !== 'sr-only')
   }
 
-  const headingId = typeof headingProperties['id'] === 'string'
-    ? headingProperties['id']
-    : FOOTNOTES_HEADING_ID
+  const headingId =
+    typeof headingProperties['id'] === 'string' ? headingProperties['id'] : FOOTNOTES_HEADING_ID
 
   headingProperties['id'] = headingId
   heading.properties = headingProperties
diff --git a/src/lib/markdown/plugins/rehype-mathjax-source/index.ts b/src/lib/markdown/plugins/rehype-mathjax-source/index.ts
index 0bd535112..d9c1078ed 100644
--- a/src/lib/markdown/plugins/rehype-mathjax-source/index.ts
+++ b/src/lib/markdown/plugins/rehype-mathjax-source/index.ts
@@ -100,4 +100,4 @@ export function rehypeMathjaxSource() {
   }
 }
 
-export default rehypeMathjaxSource
\ No newline at end of file
+export default rehypeMathjaxSource
diff --git a/src/lib/markdown/plugins/rehype-mathjax-svg-alt/index.ts b/src/lib/markdown/plugins/rehype-mathjax-svg-alt/index.ts
index ef7833b71..f9197938f 100644
--- a/src/lib/markdown/plugins/rehype-mathjax-svg-alt/index.ts
+++ b/src/lib/markdown/plugins/rehype-mathjax-svg-alt/index.ts
@@ -25,9 +25,7 @@ function findFirstElement(node: Element, tagName: string): Element | null {
 }
 
 function ensureSvgTitle(svg: Element, label: string): void {
-  const hasTitle = svg.children.some(
-    child => isElementNode(child) && child.tagName === 'title'
-  )
+  const hasTitle = svg.children.some(child => isElementNode(child) && child.tagName === 'title')
 
   if (hasTitle) {
     return
@@ -75,4 +73,4 @@ export function rehypeMathjaxSvgAlt() {
   }
 }
 
-export default rehypeMathjaxSvgAlt
\ No newline at end of file
+export default rehypeMathjaxSvgAlt
diff --git a/src/lib/markdown/plugins/rehype-shiki/index.ts b/src/lib/markdown/plugins/rehype-shiki/index.ts
index 91d6b0e4b..a22c8a20e 100644
--- a/src/lib/markdown/plugins/rehype-shiki/index.ts
+++ b/src/lib/markdown/plugins/rehype-shiki/index.ts
@@ -306,7 +306,8 @@ const rehypeShiki: Plugin<[RehypeShikiOptions], Root> = (options: RehypeShikiOpt
           getDataPropValue(node, 'data-shiki-meta') ??
           getDataPropValue(codeChild, 'data-shiki-meta')
 
-        const metaRaw = typeof metaValue === 'string' && metaValue.trim() ? metaValue.trim() : undefined
+        const metaRaw =
+          typeof metaValue === 'string' && metaValue.trim() ? metaValue.trim() : undefined
 
         const { title, cleaned: metaForShiki } = metaRaw
           ? extractTitle(metaRaw)
@@ -355,7 +356,11 @@ const rehypeShiki: Plugin<[RehypeShikiOptions], Root> = (options: RehypeShikiOpt
         shikiOptions['defaultColor'] = options.defaultColor
       }
 
-      if (options.transformers && Array.isArray(options.transformers) && options.transformers.length > 0) {
+      if (
+        options.transformers &&
+        Array.isArray(options.transformers) &&
+        options.transformers.length > 0
+      ) {
         shikiOptions['transformers'] = options.transformers
       }
 
diff --git a/src/lib/markdown/plugins/rehype-tailwind/__tests__/index.spec.ts b/src/lib/markdown/plugins/rehype-tailwind/__tests__/index.spec.ts
index 952bae1b3..bb9204e89 100644
--- a/src/lib/markdown/plugins/rehype-tailwind/__tests__/index.spec.ts
+++ b/src/lib/markdown/plugins/rehype-tailwind/__tests__/index.spec.ts
@@ -69,16 +69,7 @@ describe('htmlElements configuration', () => {
   })
 
   test('includes all expected element types', () => {
-    const expectedElements = [
-      'hr',
-      'img',
-      'mark',
-      'summary',
-      'table',
-      'th',
-      'td',
-      'video',
-    ]
+    const expectedElements = ['hr', 'img', 'mark', 'summary', 'table', 'th', 'td', 'video']
 
     expectedElements.forEach(tagName => {
       const config = htmlElements.find(c => c.tagName === tagName)
@@ -123,7 +114,11 @@ describe('applyHtmlElementClasses', () => {
     applyHtmlElementClasses(node, config)
 
     expectHasAtLeastOneValidClass(node)
-    expect(node.properties?.['className']).toEqual(['existing-class', 'test-class-a', 'test-class-b'])
+    expect(node.properties?.['className']).toEqual([
+      'existing-class',
+      'test-class-a',
+      'test-class-b',
+    ])
   })
 
   test('applies classes to node without properties object', () => {
diff --git a/src/lib/markdown/plugins/rehype-tailwind/index.ts b/src/lib/markdown/plugins/rehype-tailwind/index.ts
index 715997c8f..9b54a85da 100644
--- a/src/lib/markdown/plugins/rehype-tailwind/index.ts
+++ b/src/lib/markdown/plugins/rehype-tailwind/index.ts
@@ -117,10 +117,7 @@ export function rehypeTailwindClasses() {
             type: 'element',
             tagName: 'div',
             properties: {
-              className: [
-                'markdown-list',
-                'mb-6',
-              ],
+              className: ['markdown-list', 'mb-6'],
             },
             children: [node],
           }
@@ -272,7 +269,9 @@ export function rehypeTailwindClasses() {
           parent.properties = parent.properties || {}
 
           /** Styles for the <pre> element within a text code block */
-          parent.properties['className'] = ((parent.properties['className'] as string[]) || []).concat([
+          parent.properties['className'] = (
+            (parent.properties['className'] as string[]) || []
+          ).concat([
             'bg-[var(--shiki-background)]',
             'block',
             'max-w-full',
@@ -316,13 +315,9 @@ export function rehypeTailwindClasses() {
             child.properties = child.properties || {}
 
             /** Styles for the <pre> element within a code-tabs block */
-            child.properties['className'] = ((child.properties['className'] as string[]) || []).concat([
-              'bg-[var(--shiki-background)]',
-              'block',
-              'max-w-full',
-              'pr-3',
-              'py-3',
-            ])
+            child.properties['className'] = (
+              (child.properties['className'] as string[]) || []
+            ).concat(['bg-[var(--shiki-background)]', 'block', 'max-w-full', 'pr-3', 'py-3'])
           }
 
           if (
@@ -334,9 +329,9 @@ export function rehypeTailwindClasses() {
             child.properties = child.properties || {}
 
             /** Styles for the <code> element within a code-tabs block */
-            child.properties['className'] = ((child.properties['className'] as string[]) || []).concat([
-              'text-[var(--shiki-foreground)]',
-            ])
+            child.properties['className'] = (
+              (child.properties['className'] as string[]) || []
+            ).concat(['text-[var(--shiki-foreground)]'])
           }
         })
       }
@@ -427,10 +422,19 @@ export function rehypeTailwindClasses() {
         const existingClasses = (node.properties['className'] as string[]) || []
 
         const parent = getParent(node)
-        const isWrappedFigure = isHastElement(parent) && parent.tagName === 'figure' && hasClass(parent, 'blockquote')
-        const isCaptionFigure = isHastElement(parent) && parent.tagName === 'figure' && hasClass(parent, 'blockquote-figure')
-        const isAttributionFigure = isWrappedFigure && !isCaptionFigure && isHastElement(parent) && hasAttributionFigcaption(parent)
-        const hasInlineAttributionInCaptionedBlockquote = isCaptionFigure && hasInlineAttribution(node)
+        const isWrappedFigure =
+          isHastElement(parent) && parent.tagName === 'figure' && hasClass(parent, 'blockquote')
+        const isCaptionFigure =
+          isHastElement(parent) &&
+          parent.tagName === 'figure' &&
+          hasClass(parent, 'blockquote-figure')
+        const isAttributionFigure =
+          isWrappedFigure &&
+          !isCaptionFigure &&
+          isHastElement(parent) &&
+          hasAttributionFigcaption(parent)
+        const hasInlineAttributionInCaptionedBlockquote =
+          isCaptionFigure && hasInlineAttribution(node)
 
         // Default: plain blockquote (not wrapped by remark-blockquote)
         // Center the blockquote box and center its content.
@@ -477,7 +481,9 @@ export function rehypeTailwindClasses() {
           'leading-relaxed',
           // If we also have an inline attribution element, use the same side-by-side layout
           // as attribution-only blockquotes, but inside the bordered blockquote.
-          ...(hasInlineAttributionInCaptionedBlockquote ? ['md:flex', 'md:items-stretch', 'md:gap-8'] : []),
+          ...(hasInlineAttributionInCaptionedBlockquote
+            ? ['md:flex', 'md:items-stretch', 'md:gap-8']
+            : []),
         ]
 
         const classesToAdd = isAttributionFigure
@@ -559,7 +565,9 @@ export function rehypeTailwindClasses() {
 
           attributionLineIndex += 1
           child.properties['className'] = childClasses.concat(
-            attributionLineIndex === 1 ? ['font-bold', 'text-content'] : ['text-xs', 'text-content-offset']
+            attributionLineIndex === 1
+              ? ['font-bold', 'text-content']
+              : ['text-xs', 'text-content-offset']
           )
         })
       }
@@ -598,7 +606,9 @@ export function rehypeTailwindClasses() {
 
           attributionLineIndex += 1
           child.properties['className'] = childClasses.concat(
-            attributionLineIndex === 1 ? ['font-bold', 'text-content'] : ['text-xs', 'text-content-offset']
+            attributionLineIndex === 1
+              ? ['font-bold', 'text-content']
+              : ['text-xs', 'text-content-offset']
           )
         })
       }
@@ -609,7 +619,10 @@ export function rehypeTailwindClasses() {
         if (!isHastElement(parent) || parent.tagName !== 'blockquote') return
 
         const figure = getParent(parent as Element)
-        const isCaptionFigure = isHastElement(figure) && figure.tagName === 'figure' && hasClass(figure, 'blockquote-figure')
+        const isCaptionFigure =
+          isHastElement(figure) &&
+          figure.tagName === 'figure' &&
+          hasClass(figure, 'blockquote-figure')
         if (!isCaptionFigure) return
 
         if (!hasInlineAttribution(parent as Element)) return
diff --git a/src/lib/markdown/plugins/rehype-tailwind/visitors/simple.ts b/src/lib/markdown/plugins/rehype-tailwind/visitors/simple.ts
index 88afaecd1..67b559bec 100644
--- a/src/lib/markdown/plugins/rehype-tailwind/visitors/simple.ts
+++ b/src/lib/markdown/plugins/rehype-tailwind/visitors/simple.ts
@@ -27,22 +27,11 @@ export const htmlElements: ElementConfig[] = [
   },
   {
     tagName: 'img',
-    classes: [
-      'block',
-      'max-w-full',
-      'h-auto',
-      'mx-auto',
-      'my-4',
-      'rounded-lg',
-    ],
+    classes: ['block', 'max-w-full', 'h-auto', 'mx-auto', 'my-4', 'rounded-lg'],
   },
   {
     tagName: 'mark',
-    classes: [
-      'bg-content',
-      'px-1',
-      'text-content-inverse',
-    ],
+    classes: ['bg-content', 'px-1', 'text-content-inverse'],
   },
   {
     tagName: 'summary',
@@ -50,30 +39,15 @@ export const htmlElements: ElementConfig[] = [
   },
   {
     tagName: 'table',
-    classes: [
-      'border-collapse',
-      'mx-auto',
-      'mb-6',
-      'w-fit',
-    ],
+    classes: ['border-collapse', 'mx-auto', 'mb-6', 'w-fit'],
   },
   {
     tagName: 'th',
-    classes: [
-      'bg-page-offset',
-      'px-4',
-      'py-2',
-      'text-left',
-      'font-semibold',
-    ],
+    classes: ['bg-page-offset', 'px-4', 'py-2', 'text-left', 'font-semibold'],
   },
   {
     tagName: 'td',
-    classes: [
-      'px-4',
-      'py-2',
-      'bg-[var(--shiki-background)]',
-    ],
+    classes: ['px-4', 'py-2', 'bg-[var(--shiki-background)]'],
   },
   {
     tagName: 'video',
diff --git a/src/lib/markdown/plugins/remark-attributes/__tests__/index.spec.ts b/src/lib/markdown/plugins/remark-attributes/__tests__/index.spec.ts
index 9d75283ed..bbb6afa08 100644
--- a/src/lib/markdown/plugins/remark-attributes/__tests__/index.spec.ts
+++ b/src/lib/markdown/plugins/remark-attributes/__tests__/index.spec.ts
@@ -121,25 +121,33 @@ describe('remark-attr (Layer 1: Isolated)', () => {
 
       const splitWhitespaceBeforeAttrMarker = () => {
         return (tree: unknown) => {
-          visit(tree as never, 'text', (node: { value?: unknown }, index: number | null, parent) => {
-            if (index === null || !parent || !Array.isArray((parent as { children?: unknown }).children)) {
-              return
+          visit(
+            tree as never,
+            'text',
+            (node: { value?: unknown }, index: number | null, parent) => {
+              if (
+                index === null ||
+                !parent ||
+                !Array.isArray((parent as { children?: unknown }).children)
+              ) {
+                return
+              }
+
+              const value = typeof node.value === 'string' ? node.value : ''
+              if (!value.startsWith(' [[')) {
+                return
+              }
+
+              ;(parent as { children: unknown[] }).children.splice(
+                index,
+                1,
+                { type: 'text', value: ' ' },
+                { type: 'text', value: value.slice(1) }
+              )
+
+              return [SKIP, index + 2]
             }
-
-            const value = typeof node.value === 'string' ? node.value : ''
-            if (!value.startsWith(' [[')) {
-              return
-            }
-
-            ;(parent as { children: unknown[] }).children.splice(
-              index,
-              1,
-              { type: 'text', value: ' ' },
-              { type: 'text', value: value.slice(1) }
-            )
-
-            return [SKIP, index + 2]
-          })
+          )
         }
       }
 
diff --git a/src/lib/markdown/plugins/remark-blockquote/__tests__/index.spec.ts b/src/lib/markdown/plugins/remark-blockquote/__tests__/index.spec.ts
index 0a2588a86..543c128db 100644
--- a/src/lib/markdown/plugins/remark-blockquote/__tests__/index.spec.ts
+++ b/src/lib/markdown/plugins/remark-blockquote/__tests__/index.spec.ts
@@ -2,9 +2,14 @@ import { describe, it, expect } from 'vitest'
 import { remark } from 'remark'
 import remarkRehype from 'remark-rehype'
 import rehypeStringify from 'rehype-stringify'
-import remarkBlockquote, { type RemarkBlockquoteOptions } from '@lib/markdown/plugins/remark-blockquote'
-
-async function process(markdown: string, options?: Partial<RemarkBlockquoteOptions>): Promise<string> {
+import remarkBlockquote, {
+  type RemarkBlockquoteOptions,
+} from '@lib/markdown/plugins/remark-blockquote'
+
+async function process(
+  markdown: string,
+  options?: Partial<RemarkBlockquoteOptions>
+): Promise<string> {
   const processor = remark()
 
   if (options) {
diff --git a/src/lib/markdown/plugins/remark-blockquote/index.ts b/src/lib/markdown/plugins/remark-blockquote/index.ts
index fcbd64ccb..aaa27763b 100644
--- a/src/lib/markdown/plugins/remark-blockquote/index.ts
+++ b/src/lib/markdown/plugins/remark-blockquote/index.ts
@@ -56,7 +56,10 @@ function extractUrl(str: string): string | null {
 }
 
 function removeUrl(str: string, url: string): string {
-  return str.replace(url, '').replace(/\s{2,}/g, ' ').trim()
+  return str
+    .replace(url, '')
+    .replace(/\s{2,}/g, ' ')
+    .trim()
 }
 
 function splitAttribution(attributionText: string): { name: string; meta: string | null } {
@@ -65,7 +68,10 @@ function splitAttribution(attributionText: string): { name: string; meta: string
   const openParenIndex = trimmed.lastIndexOf('(')
   const closeParenIndex = trimmed.lastIndexOf(')')
 
-  const hasTrailingParens = openParenIndex !== -1 && closeParenIndex === trimmed.length - 1 && openParenIndex < closeParenIndex
+  const hasTrailingParens =
+    openParenIndex !== -1 &&
+    closeParenIndex === trimmed.length - 1 &&
+    openParenIndex < closeParenIndex
   if (!hasTrailingParens) {
     return { name: trimmed, meta: null }
   }
@@ -274,7 +280,9 @@ export default function remarkBlockquote(options?: Partial<RemarkBlockquoteOptio
           type: 'paragraph',
           data: {
             hName: attributionContainerTagName,
-            hProperties: settings.classNameAttribution ? { className: [settings.classNameAttribution] } : {},
+            hProperties: settings.classNameAttribution
+              ? { className: [settings.classNameAttribution] }
+              : {},
             // Build desired HTML shape:
             // <figcaption class="blockquote-attribution">
             //   <div><p>Name</p><p>Date</p></div>
@@ -304,7 +312,9 @@ export default function remarkBlockquote(options?: Partial<RemarkBlockquoteOptio
           type: 'paragraph',
           data: {
             hName: 'figcaption',
-            hProperties: settings.classNameCaption ? { className: [settings.classNameCaption] } : {},
+            hProperties: settings.classNameCaption
+              ? { className: [settings.classNameCaption] }
+              : {},
           },
           children: [{ type: 'text', value: captionText }],
         }
diff --git a/src/lib/markdown/plugins/remark-restore-time-colons/__tests__/index.spec.ts b/src/lib/markdown/plugins/remark-restore-time-colons/__tests__/index.spec.ts
index d4589643c..f86953b93 100644
--- a/src/lib/markdown/plugins/remark-restore-time-colons/__tests__/index.spec.ts
+++ b/src/lib/markdown/plugins/remark-restore-time-colons/__tests__/index.spec.ts
@@ -93,8 +93,7 @@ describe('remark-restore-time-colons', () => {
 
   describe('multiple time strings in one paragraph', () => {
     it('preserves both times in boundary burst example', async () => {
-      const input =
-        'A client can make 95 requests at 11:59:59 and 95 more at 12:00:01.'
+      const input = 'A client can make 95 requests at 11:59:59 and 95 more at 12:00:01.'
       const output = await processToHtml(input)
       expect(output).toContain('11:59:59')
       expect(output).toContain('12:00:01')
@@ -112,17 +111,13 @@ describe('remark-restore-time-colons', () => {
 
   describe('citation page ranges', () => {
     it('corrupts citation page ranges without the fix', async () => {
-      const output = await processWithoutFix(
-        'AACN Adv Crit Care. 2013 Oct-Dec;24(4):378-86.'
-      )
+      const output = await processWithoutFix('AACN Adv Crit Care. 2013 Oct-Dec;24(4):378-86.')
       expect(output).toContain('<div></div>')
       expect(output).not.toContain('24(4):378-86')
     })
 
     it('preserves citation page ranges with the fix', async () => {
-      const output = await processToHtml(
-        'AACN Adv Crit Care. 2013 Oct-Dec;24(4):378-86.'
-      )
+      const output = await processToHtml('AACN Adv Crit Care. 2013 Oct-Dec;24(4):378-86.')
       expect(output).toContain('24(4):378-86')
       expect(output).not.toContain('<div></div>')
     })
@@ -146,8 +141,7 @@ describe('remark-restore-time-colons', () => {
 
   describe('output HTML structure', () => {
     it('produces a clean paragraph without broken elements', async () => {
-      const input =
-        'A client can make 95 requests at 11:59:59 and 95 more at 12:00:01.'
+      const input = 'A client can make 95 requests at 11:59:59 and 95 more at 12:00:01.'
       const output = await processToHtml(input)
       // Should be a single, unbroken paragraph
       expect(output).toBe(
@@ -156,12 +150,8 @@ describe('remark-restore-time-colons', () => {
     })
 
     it('wraps surrounding text correctly', async () => {
-      const output = await processToHtml(
-        'At 2:47 AM, all inter-service communication fails.'
-      )
-      expect(output).toBe(
-        '<p>At 2:47 AM, all inter-service communication fails.</p>'
-      )
+      const output = await processToHtml('At 2:47 AM, all inter-service communication fails.')
+      expect(output).toBe('<p>At 2:47 AM, all inter-service communication fails.</p>')
     })
   })
 })
diff --git a/src/lib/markdown/plugins/remark-restore-time-colons/index.ts b/src/lib/markdown/plugins/remark-restore-time-colons/index.ts
index c810c41f3..08b6a61db 100644
--- a/src/lib/markdown/plugins/remark-restore-time-colons/index.ts
+++ b/src/lib/markdown/plugins/remark-restore-time-colons/index.ts
@@ -44,10 +44,7 @@ const remarkRestoreTimeColons: Plugin<[], Root> = () => {
     const pending: PendingRestore[] = []
 
     visit(tree, (node, index, parent) => {
-      if (
-        node.type !== 'textDirective' &&
-        node.type !== 'leafDirective'
-      ) {
+      if (node.type !== 'textDirective' && node.type !== 'leafDirective') {
         return
       }
 
@@ -65,7 +62,7 @@ const remarkRestoreTimeColons: Plugin<[], Root> = () => {
       const { parent, index, name } = entry
 
       const textNode: Text = { type: 'text', value: `:${name}` }
-      parent.children.splice(index, 1, textNode as typeof parent.children[0])
+      parent.children.splice(index, 1, textNode as (typeof parent.children)[0])
 
       // Merge with next text sibling
       const current = parent.children[index]
diff --git a/src/lib/plugins/fixContentAssetPropagation.ts b/src/lib/plugins/fixContentAssetPropagation.ts
index 09b5bf888..b7075a19f 100644
--- a/src/lib/plugins/fixContentAssetPropagation.ts
+++ b/src/lib/plugins/fixContentAssetPropagation.ts
@@ -29,15 +29,15 @@ type TransformFn = (
   this: unknown,
   _code: string,
   _id: string,
-  _options?: { ssr?: boolean },
+  _options?: { ssr?: boolean }
 ) => unknown
 
 type TransformHook =
   | TransformFn
   | {
-    filter?: unknown
-    handler: TransformFn
-  }
+      filter?: unknown
+      handler: TransformFn
+    }
 
 const forceNonSsrTransform = (transform: TransformHook): TransformHook => {
   const wrapHandler = (handler: TransformFn): TransformFn => {
@@ -62,7 +62,7 @@ export function fixContentAssetPropagation(): PluginOption {
     configResolved(config) {
       if (config.command !== 'build') return
       const plugin = config.plugins.find(
-        (p: Plugin) => p.name === 'astro:content-asset-propagation',
+        (p: Plugin) => p.name === 'astro:content-asset-propagation'
       )
       if (!plugin?.transform) return
       const pluginRecord = plugin as unknown as Record<string, unknown>
diff --git a/src/lib/sentry/__tests__/renderContext.spec.ts b/src/lib/sentry/__tests__/renderContext.spec.ts
index c78164c78..a94fca124 100644
--- a/src/lib/sentry/__tests__/renderContext.spec.ts
+++ b/src/lib/sentry/__tests__/renderContext.spec.ts
@@ -1,12 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { applyRenderSentryContext } from '../renderContext'
 
-const {
-  addBreadcrumbMock,
-  isInitializedMock,
-  setContextMock,
-  setTagsMock,
-} = vi.hoisted(() => ({
+const { addBreadcrumbMock, isInitializedMock, setContextMock, setTagsMock } = vi.hoisted(() => ({
   addBreadcrumbMock: vi.fn(),
   isInitializedMock: vi.fn(),
   setContextMock: vi.fn(),
@@ -87,4 +82,4 @@ describe('applyRenderSentryContext', () => {
       },
     })
   })
-})
\ No newline at end of file
+})
diff --git a/src/lib/sentry/renderContext.ts b/src/lib/sentry/renderContext.ts
index 0f4aa6ea4..dc1997aca 100644
--- a/src/lib/sentry/renderContext.ts
+++ b/src/lib/sentry/renderContext.ts
@@ -18,7 +18,12 @@ const toPrimitive = (value: unknown): Primitive | Primitive[] | undefined => {
     return undefined
   }
 
-  if (value === null || typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+  if (
+    value === null ||
+    typeof value === 'string' ||
+    typeof value === 'number' ||
+    typeof value === 'boolean'
+  ) {
     return value
   }
 
@@ -46,15 +51,18 @@ const toPrimitive = (value: unknown): Primitive | Primitive[] | undefined => {
 }
 
 const normalizeContext = (context: RenderContextRecord): Record<string, RenderContextValue> => {
-  return Object.entries(context).reduce<Record<string, RenderContextValue>>((accumulator, [key, value]) => {
-    const normalizedValue = toPrimitive(value)
+  return Object.entries(context).reduce<Record<string, RenderContextValue>>(
+    (accumulator, [key, value]) => {
+      const normalizedValue = toPrimitive(value)
 
-    if (normalizedValue !== undefined) {
-      accumulator[key] = normalizedValue
-    }
+      if (normalizedValue !== undefined) {
+        accumulator[key] = normalizedValue
+      }
 
-    return accumulator
-  }, {})
+      return accumulator
+    },
+    {}
+  )
 }
 
 const normalizeTags = (
@@ -101,4 +109,4 @@ export const applyRenderSentryContext = ({
     message: breadcrumbMessage ?? `render:${contextName}`,
     data: normalizedContext,
   })
-}
\ No newline at end of file
+}
diff --git a/src/lib/workbox/__tests__/index.spec.ts b/src/lib/workbox/__tests__/index.spec.ts
index d57a73d47..be8ce472d 100644
--- a/src/lib/workbox/__tests__/index.spec.ts
+++ b/src/lib/workbox/__tests__/index.spec.ts
@@ -5,12 +5,16 @@ describe('buildOfflineRedirectUrl', () => {
   test('builds offline redirect URL with encoded returnTo parameter', () => {
     const result = buildOfflineRedirectUrl('https://example.com/articles/demo?tab=overview')
 
-    expect(result).toBe('/offline?returnTo=https%3A%2F%2Fexample.com%2Farticles%2Fdemo%3Ftab%3Doverview')
+    expect(result).toBe(
+      '/offline?returnTo=https%3A%2F%2Fexample.com%2Farticles%2Fdemo%3Ftab%3Doverview'
+    )
   })
 
   test('encodes hash fragments and spaces', () => {
     const result = buildOfflineRedirectUrl('https://example.com/docs/my page#section 1')
 
-    expect(result).toBe('/offline?returnTo=https%3A%2F%2Fexample.com%2Fdocs%2Fmy%20page%23section%201')
+    expect(result).toBe(
+      '/offline?returnTo=https%3A%2F%2Fexample.com%2Fdocs%2Fmy%20page%23section%201'
+    )
   })
 })
diff --git a/src/lib/workbox/sw.ts b/src/lib/workbox/sw.ts
index f1936f460..97064bf38 100644
--- a/src/lib/workbox/sw.ts
+++ b/src/lib/workbox/sw.ts
@@ -20,7 +20,7 @@ precacheAndRoute(self.__WB_MANIFEST)
 
 const networkOnly = new NetworkOnly()
 
-const navigationHandler: RouteHandlerCallback = async (params) => {
+const navigationHandler: RouteHandlerCallback = async params => {
   try {
     return await networkOnly.handle(params)
   } catch {
@@ -60,4 +60,4 @@ registerRoute(
       }) as unknown as WorkboxPlugin,
     ],
   })
-)
\ No newline at end of file
+)
diff --git a/src/lib/workbox/url.ts b/src/lib/workbox/url.ts
index e442dc3eb..797c85309 100644
--- a/src/lib/workbox/url.ts
+++ b/src/lib/workbox/url.ts
@@ -5,4 +5,4 @@ export const buildOfflineRedirectUrl = (requestUrl: string): string => {
   const originalUrl = encodeURIComponent(requestUrl)
 
   return `/offline?returnTo=${originalUrl}`
-}
\ No newline at end of file
+}
diff --git a/src/middleware.ts b/src/middleware.ts
index 8323a33d9..90cb99743 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -25,4 +25,4 @@ export const onRequest = defineMiddleware(async (context, next) => {
     statusText: response.statusText,
     headers,
   })
-})
\ No newline at end of file
+})
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 539f01736..8e43f8a61 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -8,10 +8,7 @@ const getFallbackSearchQuery = (pathname: string): string => {
     return ''
   }
 
-  const lastSegment = pathname
-    .split('/')
-    .filter(Boolean)
-    .at(-1)
+  const lastSegment = pathname.split('/').filter(Boolean).at(-1)
 
   if (!lastSegment) {
     return ''
@@ -28,7 +25,7 @@ const getFallbackSearchQuery = (pathname: string): string => {
 }
 
 const pageDescription = "Sorry, the page you are looking for doesn't exist or has been moved."
-const pageTitle = "404 - Page Not Found"
+const pageTitle = '404 - Page Not Found'
 const path = '/404/'
 const fallbackSearchQuery = getFallbackSearchQuery(Astro.url.pathname)
 ---
diff --git a/src/pages/about/index.astro b/src/pages/about/index.astro
index 13f5a4d05..dc1664fa5 100644
--- a/src/pages/about/index.astro
+++ b/src/pages/about/index.astro
@@ -8,179 +8,182 @@ const pageDescription =
 const path = '/about'
 ---
 
-<PageLayout
-  pageTitle={pageTitle}
-  pageDescription={pageDescription}
-  path={path}
-  icon="avatar"
->
+<PageLayout pageTitle={pageTitle} pageDescription={pageDescription} path={path} icon="avatar">
   <AboutPage
     content={{
       journey: {
-        header: "My Journey",
+        header: 'My Journey',
         itemlist: [
           {
-            title: "Enterprise IT & Systems Engineering",
-            icon: "database",
+            title: 'Enterprise IT & Systems Engineering',
+            icon: 'database',
             description:
-              "I started as an IT Analyst at Eli Lilly, an F100 pharmaceutical company, translating executive requirements into technical solutions. That experience drove me toward hands-on engineering, and I moved into a Systems Engineering role working with BSD *nix, Cisco networking, and server infrastructure.",
+              'I started as an IT Analyst at Eli Lilly, an F100 pharmaceutical company, translating executive requirements into technical solutions. That experience drove me toward hands-on engineering, and I moved into a Systems Engineering role working with BSD *nix, Cisco networking, and server infrastructure.',
           },
           {
-            title: "A Decade of Full Stack Development",
-            icon: "html",
+            title: 'A Decade of Full Stack Development',
+            icon: 'html',
             description:
-              "Over the next ten years I worked across Rails, Laravel, various Node stacks, and native iOS/Android. Building end-to-end applications gave me a thorough understanding of the complete software development lifecycle — from database schema to client-side performance.",
+              'Over the next ten years I worked across Rails, Laravel, various Node stacks, and native iOS/Android. Building end-to-end applications gave me a thorough understanding of the complete software development lifecycle — from database schema to client-side performance.',
           },
           {
-            title: "Platform Engineering Focus",
-            icon: "cloud",
+            title: 'Platform Engineering Focus',
+            icon: 'cloud',
             description:
-              "Colleagues and managers consistently turned to me for help with infrastructure, deployments, and scaling challenges. Five years ago I made that my focus full-time, combining deep technical experience with a drive to improve developer productivity and system reliability.",
+              'Colleagues and managers consistently turned to me for help with infrastructure, deployments, and scaling challenges. Five years ago I made that my focus full-time, combining deep technical experience with a drive to improve developer productivity and system reliability.',
           },
         ],
       },
       expertise: {
-        header: "Platform Engineering Expertise",
+        header: 'Platform Engineering Expertise',
         itemlist: [
           {
-            title: "Cloud Architecture",
-            description: "I design and implement scalable, resilient cloud infrastructure with a focus on Azure. From microservices architecture to serverless solutions, I build platforms that grow with your business.",
+            title: 'Cloud Architecture',
+            description:
+              'I design and implement scalable, resilient cloud infrastructure with a focus on Azure. From microservices architecture to serverless solutions, I build platforms that grow with your business.',
           },
           {
-            title: "Infrastructure as Code",
-            description: "I am a Terraform specialist with deep experience in managing complex infrastructure deployments. I create reusable, version-controlled infrastructure that ensures consistency across environments.",
+            title: 'Infrastructure as Code',
+            description:
+              'I am a Terraform specialist with deep experience in managing complex infrastructure deployments. I create reusable, version-controlled infrastructure that ensures consistency across environments.',
           },
           {
-            title: "DevOps & CI/CD",
-            description: "I streamline your development workflow with automated pipelines, testing strategies, and deployment processes that reduce friction and increase confidence in releases.",
+            title: 'DevOps & CI/CD',
+            description:
+              'I streamline your development workflow with automated pipelines, testing strategies, and deployment processes that reduce friction and increase confidence in releases.',
           },
           {
-            title: "Developer Portals",
-            description: "I implement developer portals like Backstage to create self-service platforms that empower teams to discover services, manage resources, and maintain standards autonomously.",
+            title: 'Developer Portals',
+            description:
+              'I implement developer portals like Backstage to create self-service platforms that empower teams to discover services, manage resources, and maintain standards autonomously.',
           },
           {
-            title: "Developer Tooling",
-            description: "I build custom tools and automation that eliminate toil, reduce cognitive load, and let developers focus on what they do best: creating great software.",
+            title: 'Developer Tooling',
+            description:
+              'I build custom tools and automation that eliminate toil, reduce cognitive load, and let developers focus on what they do best: creating great software.',
           },
           {
-            title: "System Reliability",
-            description: "I design observability, monitoring, and alerting systems that provide visibility into system health and enable proactive issue resolution.",
+            title: 'System Reliability',
+            description:
+              'I design observability, monitoring, and alerting systems that provide visibility into system health and enable proactive issue resolution.',
           },
         ],
       },
       proficiencies: {
-        header: "Technical Proficiency",
+        header: 'Technical Proficiency',
         cards: [
           {
-            subheader: "Languages",
-            backgroundColor: "bg-(--color-secondary)/5",
-            headerColor: "text-(--color-secondary)",
+            subheader: 'Languages',
+            backgroundColor: 'bg-(--color-secondary)/5',
+            headerColor: 'text-(--color-secondary)',
             itemlist: [
               {
-                title: "Go Language",
-                link: "/tags/go",
+                title: 'Go Language',
+                link: '/tags/go',
               },
               {
-                title: "TypeScript",
-                link: "/tags/typescript",
+                title: 'TypeScript',
+                link: '/tags/typescript',
               },
               {
-                title: "Python",
-                link: "/tags/python",
+                title: 'Python',
+                link: '/tags/python',
               },
               {
-                title: "Ruby",
-                link: "/tags/ruby",
+                title: 'Ruby',
+                link: '/tags/ruby',
               },
               {
-                title: ".NET / C#",
-                link: "/tags/dotnet",
+                title: '.NET / C#',
+                link: '/tags/dotnet',
               },
             ],
           },
           {
-            subheader: "Cloud & Infrastructure",
-            backgroundColor: "bg-accent/5",
-            headerColor: "text-accent",
+            subheader: 'Cloud & Infrastructure',
+            backgroundColor: 'bg-accent/5',
+            headerColor: 'text-accent',
             itemlist: [
               {
-                title: "Microsoft Azure",
-                link: "/tags/azure",
+                title: 'Microsoft Azure',
+                link: '/tags/azure',
               },
               {
-                title: "Terraform",
-                link: "/tags/terraform",
+                title: 'Terraform',
+                link: '/tags/terraform',
               },
               {
-                title: "Kubernetes",
-                link: "/tags/kubernetes",
+                title: 'Kubernetes',
+                link: '/tags/kubernetes',
               },
               {
-                title: "Docker",
-                link: "/tags/docker",
+                title: 'Docker',
+                link: '/tags/docker',
               },
               {
-                title: "Helm",
-                link: "/tags/helm",
+                title: 'Helm',
+                link: '/tags/helm',
               },
             ],
           },
           {
-            subheader: "Platform Tools",
-            backgroundColor: "bg-primary/5",
-            headerColor: "text-primary",
+            subheader: 'Platform Tools',
+            backgroundColor: 'bg-primary/5',
+            headerColor: 'text-primary',
             itemlist: [
               {
-                title: "Backstage",
-                link: "/tags/backstage-idp",
+                title: 'Backstage',
+                link: '/tags/backstage-idp',
               },
               {
-                title: "GitHub Actions",
-                link: "/tags/build-and-deploy",
+                title: 'GitHub Actions',
+                link: '/tags/build-and-deploy',
               },
               {
-                title: "Azure DevOps",
-                link: "/tags/azure",
+                title: 'Azure DevOps',
+                link: '/tags/azure',
               },
               {
-                title: "Grafana",
-                link: "/tags/grafana",
+                title: 'Grafana',
+                link: '/tags/grafana',
               },
               {
-                title: "Prometheus",
-                link: "/tags/prometheus",
+                title: 'Prometheus',
+                link: '/tags/prometheus',
               },
             ],
           },
         ],
         philosophy: {
-          subheader: "My Philosophy",
-          description: "Great platform engineering isn't just about the technology—it's about understanding developer workflows, removing friction, and creating systems that feel intuitive and powerful.",
+          subheader: 'My Philosophy',
+          description:
+            "Great platform engineering isn't just about the technology—it's about understanding developer workflows, removing friction, and creating systems that feel intuitive and powerful.",
           itemlist: [
             {
-              name: "Developer Experience First",
-              text: "Every platform decision should make developers more productive, not add complexity. I focus on creating self-service capabilities that feel natural to use.",
-              icon: "lightning",
+              name: 'Developer Experience First',
+              text: 'Every platform decision should make developers more productive, not add complexity. I focus on creating self-service capabilities that feel natural to use.',
+              icon: 'lightning',
             },
             {
-              name: "Reliability by Design",
+              name: 'Reliability by Design',
               text: "I build systems that don't just work, but work consistently under pressure. Observability, testing, and gradual rollouts are built into everything I create.",
-              icon: "check-circled-open",
+              icon: 'check-circled-open',
             },
             {
-              name: "User-Centric Approach",
-              text: "Prioritizing the needs and experiences of end-users in every decision. Ensuring that the platforms and tools we build genuinely enhance productivity and satisfaction.",
-              icon: "heart",
+              name: 'User-Centric Approach',
+              text: 'Prioritizing the needs and experiences of end-users in every decision. Ensuring that the platforms and tools we build genuinely enhance productivity and satisfaction.',
+              icon: 'heart',
             },
           ],
         },
         cta: {
-          title: "Ready to Transform Your Development Platform?",
-          description: "Let's discuss how modern platform engineering can accelerate your team's velocity and improve your system reliability.",
+          title: 'Ready to Transform Your Development Platform?',
+          description:
+            "Let's discuss how modern platform engineering can accelerate your team's velocity and improve your system reliability.",
           primaryLink: {
-            href: "/contact",
-            text: "Start a Conversation",
-          }
+            href: '/contact',
+            text: 'Start a Conversation',
+          },
         },
       },
     }}
diff --git a/src/pages/articles/index.astro b/src/pages/articles/index.astro
index 3a9f33d89..147aeb16e 100644
--- a/src/pages/articles/index.astro
+++ b/src/pages/articles/index.astro
@@ -49,7 +49,11 @@ const path = '/articles'
               .map(a => a.data.publishDate)
               .sort((a, b) => b.getTime() - a.getTime())[0]
             const latestFormatted = latestDate
-              ? latestDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+              ? latestDate.toLocaleDateString('en-US', {
+                  month: 'short',
+                  day: 'numeric',
+                  year: 'numeric',
+                })
               : ''
 
             return (
@@ -77,8 +81,12 @@ const path = '/articles'
 
                     {latestFormatted && (
                       <div class="hidden sm:block shrink-0 text-right">
-                        <span class="text-xs text-page-inverse transition-colors group-hover:text-page-active">Latest</span>
-                        <div class="text-sm font-medium text-content transition-colors group-hover:text-page-active">{latestFormatted}</div>
+                        <span class="text-xs text-page-inverse transition-colors group-hover:text-page-active">
+                          Latest
+                        </span>
+                        <div class="text-sm font-medium text-content transition-colors group-hover:text-page-active">
+                          {latestFormatted}
+                        </div>
                       </div>
                     )}
                   </a>
diff --git a/src/pages/case-studies/[slug].astro b/src/pages/case-studies/[slug].astro
index 785259b04..90cfcce91 100644
--- a/src/pages/case-studies/[slug].astro
+++ b/src/pages/case-studies/[slug].astro
@@ -61,62 +61,46 @@ const section = 'Case Studies'
   }
   {/** Case Study Details */}
   {
-    (
-      clientEntry?.data.businessType ||
+    (clientEntry?.data.businessType ||
       clientEntry?.data.industry ||
       caseStudy.data.projectType ||
-      caseStudy.data.duration
-    ) && (
+      caseStudy.data.duration) && (
       <div class="space-y-4 mx-auto">
         <dl class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-base">
-          {
-            clientEntry?.data.businessType && (
-              <div class="bg-page-offset p-4 rounded-lg flex flex-col items-start border-2 border-dashed border-trim shadow-sm transition-all duration-200 hover:-translate-y-1 hover:border-page-inverse hover:bg-page hover:shadow-md">
-                <dt class="text-sm font-semibold uppercase tracking-wider opacity-60 mb-2">
-                  Client
-                </dt>
-                <dd class="font-bold text-page-inverse leading-tight">
-                  {clientEntry.data.businessType}
-                </dd>
-              </div>
-            )
-          }
-          {
-            clientEntry?.data.industry && (
-              <div class="bg-page-offset p-4 rounded-lg flex flex-col items-start border-2 border-dashed border-trim shadow-sm transition-all duration-200 hover:-translate-y-1 hover:border-page-inverse hover:bg-page hover:shadow-md">
-                <dt class="text-sm font-semibold uppercase tracking-wider opacity-60 mb-2">
-                  Industry
-                </dt>
-                <dd class="font-bold text-page-inverse leading-tight">
-                  {clientEntry.data.industry}
-                </dd>
-              </div>
-            )
-          }
-          {
-            caseStudy.data.projectType && (
-              <div class="bg-page-offset p-4 rounded-lg flex flex-col items-start border-2 border-dashed border-trim shadow-sm transition-all duration-200 hover:-translate-y-1 hover:border-page-inverse hover:bg-page hover:shadow-md">
-                <dt class="text-sm font-semibold uppercase tracking-wider opacity-60 mb-2">
-                  Project Type
-                </dt>
-                <dd class="font-bold text-page-inverse leading-tight">
-                  {caseStudy.data.projectType}
-                </dd>
-              </div>
-            )
-          }
-          {
-            caseStudy.data.duration && (
-              <div class="bg-page-offset p-4 rounded-lg flex flex-col items-start border-2 border-dashed border-trim shadow-sm transition-all duration-200 hover:-translate-y-1 hover:border-page-inverse hover:bg-page hover:shadow-md">
-                <dt class="text-sm font-semibold uppercase tracking-wider opacity-60 mb-2">
-                  Duration
-                </dt>
-                <dd class="font-bold text-page-inverse leading-tight">
-                  {caseStudy.data.duration}
-                </dd>
-              </div>
-            )
-          }
+          {clientEntry?.data.businessType && (
+            <div class="bg-page-offset p-4 rounded-lg flex flex-col items-start border-2 border-dashed border-trim shadow-sm transition-all duration-200 hover:-translate-y-1 hover:border-page-inverse hover:bg-page hover:shadow-md">
+              <dt class="text-sm font-semibold uppercase tracking-wider opacity-60 mb-2">Client</dt>
+              <dd class="font-bold text-page-inverse leading-tight">
+                {clientEntry.data.businessType}
+              </dd>
+            </div>
+          )}
+          {clientEntry?.data.industry && (
+            <div class="bg-page-offset p-4 rounded-lg flex flex-col items-start border-2 border-dashed border-trim shadow-sm transition-all duration-200 hover:-translate-y-1 hover:border-page-inverse hover:bg-page hover:shadow-md">
+              <dt class="text-sm font-semibold uppercase tracking-wider opacity-60 mb-2">
+                Industry
+              </dt>
+              <dd class="font-bold text-page-inverse leading-tight">{clientEntry.data.industry}</dd>
+            </div>
+          )}
+          {caseStudy.data.projectType && (
+            <div class="bg-page-offset p-4 rounded-lg flex flex-col items-start border-2 border-dashed border-trim shadow-sm transition-all duration-200 hover:-translate-y-1 hover:border-page-inverse hover:bg-page hover:shadow-md">
+              <dt class="text-sm font-semibold uppercase tracking-wider opacity-60 mb-2">
+                Project Type
+              </dt>
+              <dd class="font-bold text-page-inverse leading-tight">
+                {caseStudy.data.projectType}
+              </dd>
+            </div>
+          )}
+          {caseStudy.data.duration && (
+            <div class="bg-page-offset p-4 rounded-lg flex flex-col items-start border-2 border-dashed border-trim shadow-sm transition-all duration-200 hover:-translate-y-1 hover:border-page-inverse hover:bg-page hover:shadow-md">
+              <dt class="text-sm font-semibold uppercase tracking-wider opacity-60 mb-2">
+                Duration
+              </dt>
+              <dd class="font-bold text-page-inverse leading-tight">{caseStudy.data.duration}</dd>
+            </div>
+          )}
         </dl>
       </div>
     )
diff --git a/src/pages/case-studies/index.astro b/src/pages/case-studies/index.astro
index cce7480fb..75f7106d2 100644
--- a/src/pages/case-studies/index.astro
+++ b/src/pages/case-studies/index.astro
@@ -22,7 +22,8 @@ const sortedCaseStudies = allCaseStudies.sort(
 const pageTitle = 'All Case Studies'
 const pageDescription = 'Webstack Builders Case Studies List'
 const title = 'Case Studies'
-const description = 'Explore real-world client outcomes across platform engineering, reliability, and cloud modernization.'
+const description =
+  'Explore real-world client outcomes across platform engineering, reliability, and cloud modernization.'
 const path = '/case-studies'
 ---
 
@@ -84,10 +85,7 @@ const path = '/case-studies'
                   )}
 
                   <div class="flex justify-between px-3">
-                    <time
-                      datetime={caseStudy.data.publishDate.toISOString()}
-                      class="block text-sm"
-                    >
+                    <time datetime={caseStudy.data.publishDate.toISOString()} class="block text-sm">
                       {caseStudy.data.publishDate.toLocaleDateString('en-US', {
                         year: 'numeric',
                         month: 'long',
diff --git a/src/pages/consent/index.astro b/src/pages/consent/index.astro
index 8c5fbdb5e..72d8c7b83 100644
--- a/src/pages/consent/index.astro
+++ b/src/pages/consent/index.astro
@@ -3,111 +3,119 @@ import PageLayout from '@layouts/PageLayout.astro'
 import ConsentPreferences from '@components/Pages/Consent/index.astro'
 
 const pageTitle = 'Consent Policy'
-const pageDescription = 'Review how Webstack Builders uses cookies and update your consent preferences at any time.'
+const pageDescription =
+  'Review how Webstack Builders uses cookies and update your consent preferences at any time.'
 const path = '/consent'
 ---
 
-<PageLayout
-  pageTitle={pageTitle}
-  pageDescription={pageDescription}
-  path={path}
-  icon="lock"
->
-  <ConsentPreferences content={{
-    header: {
-      title: "Privacy Preference Center",
-      description: "Manage your cookie preferences and learn how we use cookies to improve your experience.",
-    },
-    intro: "When you visit our website, we may store information in your browser or device to make the site work and provide a better experience. This includes both cookies and local storage. The information we collect might relate to you, your preferences, or your device. You can choose which types of data storage to allow, though some choices may affect how the site works. Click on the different categories below to learn more and customize your preferences.",
-    introLinks: {
-      privacyPolicyText: "Privacy Policy",
-      myDataText: "My Data Rights",
-    },
-    essential: {
-      heading: "Essential Data",
-      subheading: "Always Active - Required for the website to work",
-      buttonText: "Always Active",
-      description: "We need to store some information for our website to work properly. This includes things like your privacy preferences, login status, and form data. We can't turn this off, as the site wouldn't function without it. This data doesn't identify you personally and is only used to make the site work as you'd expect.",
-    },
-    analytics: {
-      heading: "Performance and Analytics",
-      subheading: "Helps us understand how visitors use our website",
-      description: "These tools, including Google Analytics, help us count visits and understand where traffic comes from so we can improve our site. They show us which pages are popular and how people navigate around. All the information collected is anonymous - we see trends, not individuals. If you opt out, we won't know when you've visited and can't measure how well the site is working.",
-    },
-    functional: {
-      heading: "Enhanced Features",
-      subheading: "Remembers your social media preferences",
-      description: "This feature remembers your Mastodon instance when you use the \"Share to Mastodon\" button. It's completely optional and requires your permission because it stores information about which Mastodon server you use, which could identify you.",
-      trailer: "<strong>Note:</strong> Your theme preference and social media embed caching are classified as \"essential\" and work without requiring consent. Enhanced features are only for optional conveniences like remembering your Mastodon instance. You can opt in to enable these extras.",
-    },
-    marketing: {
-      heading: "Marketing and Advertising",
-      subheading: "Used to deliver relevant advertisements",
-      description: "These tools help identify unique browsing sessions to show generic ads. We don't collect information to show you targeted ads based on your behavior. However, advertising partners may use these tools to build a profile of your interests and show you relevant ads on other sites. They don't store personal information directly, but identify your browser and device. If you opt out, you may see less relevant advertising.",
-    },
-    buttons: {
-      save: "Save",
-      acceptAll: "Accept All",
-      rejectAll: "Decline All",
-    },
-    cookies: {
-      heading: "What Are Cookies?",
-      description: "Cookies are small text files that are stored on your computer or mobile device when you visit our website. They help us provide you with a better experience by remembering your preferences and understanding how you use our site.",
-      types: [
-        {
-          title: "Session Cookies",
-          text: "Temporary cookies that are deleted when you close your browser",
-          icon: "clock",
-          color: "blue-600",
-          bgColor: "blue-100",
-        },
-        {
-          title: "Persistent Cookies",
-          text: "Remain on your device until they expire or you delete them",
-          icon: "database",
-          color: "green-600",
-          bgColor: "green-100",
-        },
-      ],
-    },
-    management: {
-      heading: "Managing Cookies in Your Browser",
-      subheading: "You can control and manage cookies in various ways. Please note that removing or blocking cookies can impact your user experience and parts of our website may no longer be fully accessible.",
-      types: [
-        {
-          title: "Chrome",
-          text: "Settings → Privacy and security → Cookies and other site data",
-          icon: "chrome",
-          color: "blue-600",
-          bgColor: "blue-100",
-        },
-        {
-          title: "Firefox",
-          text: "Options → Privacy & Security → Cookies and Site Data",
-          icon: "firefox",
-          color: "orange-600",
-          bgColor: "orange-100",
-        },
-        {
-          title: "Safari",
-          text: "Preferences → Privacy → Manage Website Data",
-          icon: "apple",
-          color: "gray-600",
-          bgColor: "gray-100",
-        },
-      ],
-    },
-    questions: {
-      heading: "Contact Us",
-      subheading: "If you have any questions about our use of cookies or this Cookie Policy, please contact us:",
-      methods: [
-        {
-          lead: "Get in Touch",
-          text: "Contact Us About Privacy & Cookies",
-          link: "/contact/",
-          icon: "email",
-        },
-      ],
-    },
-  }} />
+<PageLayout pageTitle={pageTitle} pageDescription={pageDescription} path={path} icon="lock">
+  <ConsentPreferences
+    content={{
+      header: {
+        title: 'Privacy Preference Center',
+        description:
+          'Manage your cookie preferences and learn how we use cookies to improve your experience.',
+      },
+      intro:
+        'When you visit our website, we may store information in your browser or device to make the site work and provide a better experience. This includes both cookies and local storage. The information we collect might relate to you, your preferences, or your device. You can choose which types of data storage to allow, though some choices may affect how the site works. Click on the different categories below to learn more and customize your preferences.',
+      introLinks: {
+        privacyPolicyText: 'Privacy Policy',
+        myDataText: 'My Data Rights',
+      },
+      essential: {
+        heading: 'Essential Data',
+        subheading: 'Always Active - Required for the website to work',
+        buttonText: 'Always Active',
+        description:
+          "We need to store some information for our website to work properly. This includes things like your privacy preferences, login status, and form data. We can't turn this off, as the site wouldn't function without it. This data doesn't identify you personally and is only used to make the site work as you'd expect.",
+      },
+      analytics: {
+        heading: 'Performance and Analytics',
+        subheading: 'Helps us understand how visitors use our website',
+        description:
+          "These tools, including Google Analytics, help us count visits and understand where traffic comes from so we can improve our site. They show us which pages are popular and how people navigate around. All the information collected is anonymous - we see trends, not individuals. If you opt out, we won't know when you've visited and can't measure how well the site is working.",
+      },
+      functional: {
+        heading: 'Enhanced Features',
+        subheading: 'Remembers your social media preferences',
+        description:
+          'This feature remembers your Mastodon instance when you use the "Share to Mastodon" button. It\'s completely optional and requires your permission because it stores information about which Mastodon server you use, which could identify you.',
+        trailer:
+          '<strong>Note:</strong> Your theme preference and social media embed caching are classified as "essential" and work without requiring consent. Enhanced features are only for optional conveniences like remembering your Mastodon instance. You can opt in to enable these extras.',
+      },
+      marketing: {
+        heading: 'Marketing and Advertising',
+        subheading: 'Used to deliver relevant advertisements',
+        description:
+          "These tools help identify unique browsing sessions to show generic ads. We don't collect information to show you targeted ads based on your behavior. However, advertising partners may use these tools to build a profile of your interests and show you relevant ads on other sites. They don't store personal information directly, but identify your browser and device. If you opt out, you may see less relevant advertising.",
+      },
+      buttons: {
+        save: 'Save',
+        acceptAll: 'Accept All',
+        rejectAll: 'Decline All',
+      },
+      cookies: {
+        heading: 'What Are Cookies?',
+        description:
+          'Cookies are small text files that are stored on your computer or mobile device when you visit our website. They help us provide you with a better experience by remembering your preferences and understanding how you use our site.',
+        types: [
+          {
+            title: 'Session Cookies',
+            text: 'Temporary cookies that are deleted when you close your browser',
+            icon: 'clock',
+            color: 'blue-600',
+            bgColor: 'blue-100',
+          },
+          {
+            title: 'Persistent Cookies',
+            text: 'Remain on your device until they expire or you delete them',
+            icon: 'database',
+            color: 'green-600',
+            bgColor: 'green-100',
+          },
+        ],
+      },
+      management: {
+        heading: 'Managing Cookies in Your Browser',
+        subheading:
+          'You can control and manage cookies in various ways. Please note that removing or blocking cookies can impact your user experience and parts of our website may no longer be fully accessible.',
+        types: [
+          {
+            title: 'Chrome',
+            text: 'Settings → Privacy and security → Cookies and other site data',
+            icon: 'chrome',
+            color: 'blue-600',
+            bgColor: 'blue-100',
+          },
+          {
+            title: 'Firefox',
+            text: 'Options → Privacy & Security → Cookies and Site Data',
+            icon: 'firefox',
+            color: 'orange-600',
+            bgColor: 'orange-100',
+          },
+          {
+            title: 'Safari',
+            text: 'Preferences → Privacy → Manage Website Data',
+            icon: 'apple',
+            color: 'gray-600',
+            bgColor: 'gray-100',
+          },
+        ],
+      },
+      questions: {
+        heading: 'Contact Us',
+        subheading:
+          'If you have any questions about our use of cookies or this Cookie Policy, please contact us:',
+        methods: [
+          {
+            lead: 'Get in Touch',
+            text: 'Contact Us About Privacy & Cookies',
+            link: '/contact/',
+            icon: 'email',
+          },
+        ],
+      },
+    }}
+  />
 </PageLayout>
diff --git a/src/pages/contact/index.astro b/src/pages/contact/index.astro
index ad2e26a37..f2f23326a 100644
--- a/src/pages/contact/index.astro
+++ b/src/pages/contact/index.astro
@@ -4,171 +4,176 @@ import PageLayout from '@layouts/PageLayout.astro'
 import ContactPage from '@components/Pages/Contact/index.astro'
 
 const pageTitle = 'Contact Me'
-const pageDescription = 'Connect with Webstack Builders to discuss your infrastructure needs, request an engagement proposal, or ask questions about platform engineering services.'
+const pageDescription =
+  'Connect with Webstack Builders to discuss your infrastructure needs, request an engagement proposal, or ask questions about platform engineering services.'
 const prefilledProjectType = Astro.url.searchParams.get('type') ?? ''
 ---
 
-<PageLayout
-  pageTitle={pageTitle}
-  pageDescription={pageDescription}
-  icon="email"
-  path={"/contact"}
->
-  <ContactPage prefilledProjectType={prefilledProjectType} content={{
-    header: {
-      title: "Let's Strengthen Your Infrastructure",
-      description: "Ready to level up your platform, pipelines, or reliability? Share your infrastructure needs and we'll figure out the right engagement together.",
-    },
-    contact: {
-      header: "Get In Touch",
-      details: [
-        {
-          text: "Email",
-          value: `<a href="mailto:${companyContactData.email}" class="hover:text-secondary hover:underline hover:decoration-secondary">${companyContactData.email}</a>`,
-          icon: "email",
-          iconClasses: "mb-0.5",
-        },
-        {
-          text: "Location",
-          value: "Remote • EST Business Hours",
-          icon: "location",
-          iconClasses: "ml-1.5 mb-1",
-        },
-          {
-          text: "Response Time",
-          value: "Within 24 hours",
-          icon: "clock",
-        },
-      ],
-      expertise: {
-        header: "My Expertise",
-        areas: [
-          { text: "CI/CD Pipeline Design"},
-          { text: "Kubernetes & Container Orchestration"},
-          { text: "Infrastructure as Code"},
-          { text: "Observability & Monitoring"},
-          { text: "Cloud Architecture & Cost Optimization"},
-          { text: "Incident Response & SRE"},
-        ],
+<PageLayout pageTitle={pageTitle} pageDescription={pageDescription} icon="email" path={'/contact'}>
+  <ContactPage
+    prefilledProjectType={prefilledProjectType}
+    content={{
+      header: {
+        title: "Let's Strengthen Your Infrastructure",
+        description:
+          "Ready to level up your platform, pipelines, or reliability? Share your infrastructure needs and we'll figure out the right engagement together.",
       },
-      chooseUs: {
-        header: "Why Work With Me?",
-        areas: [
-          { text: "15+ years of engineering experience"},
-          { text: "Embedded with your team, not drive-by consulting"},
-          { text: "Month-to-month, no long-term contracts"},
-          { text: "Async-first communication"},
-          { text: "Production-hardened infrastructure skills"},
-          { text: "Transparent pricing, no surprise invoices"},
-          { text: "Flexible engagement models"},
-        ],
-      },
-    },
-    form: {
-      header: "Tell me about your infrastructure needs",
-      description: "I'll get back to you within 24 hours to discuss the right engagement for your situation.",
-      formErrorMssg: "Please fix the errors in your message and hit the submit button again.",
       contact: {
-        header: "Contact Information",
-        company: "Company Name",
-        companyPlaceholder: "Your company name",
-        email: "Email Address*",
-        emailPlaceholder: "your.email@example.com",
-        fullName: "Full Name*",
-        fullNamePlaceholder: "Your full name",
-        phone: "Phone Number",
-        phonePlaceholder: "+1 (555) 123-4567",
-      },
-      project: {
-        header: "Engagement Details",
-        description: "Description*",
-        descriptionPlaceholder: "Describe your infrastructure challenges, current stack, team size, and what you're hoping to accomplish...",
-        timeline: "Timeline",
-        timelineOptions: [
+        header: 'Get In Touch',
+        details: [
           {
-            text: "Select timeline",
-            value: "",
+            text: 'Email',
+            value: `<a href="mailto:${companyContactData.email}" class="hover:text-secondary hover:underline hover:decoration-secondary">${companyContactData.email}</a>`,
+            icon: 'email',
+            iconClasses: 'mb-0.5',
           },
           {
-            text: "ASAP / Active incident",
-            value: "asap",
+            text: 'Location',
+            value: 'Remote • EST Business Hours',
+            icon: 'location',
+            iconClasses: 'ml-1.5 mb-1',
           },
           {
-            text: "Within 1 month",
-            value: "1-month",
-          },
-          {
-            text: "1-3 months",
-            value: "1-3-months",
-          },
-          {
-            text: "3-6 months",
-            value: "3-6-months",
-          },
-          {
-            text: "Ongoing / No end date",
-            value: "ongoing",
-          },
-          {
-            text: "Flexible",
-            value: "flexible",
+            text: 'Response Time',
+            value: 'Within 24 hours',
+            icon: 'clock',
           },
         ],
-        timelinePlaceholder: "Your engagement timeline",
-        type: "Engagement Type",
-        typeOptions: [
-          {
-            text: "Select engagement type",
-            value: "",
-          },
-          {
-            text: "Full Workstream",
-            value: "full-workstream",
-          },
-          {
-            text: "Continuous Workstream",
-            value: "continuous-workstream",
-          },
-          {
-            text: "Solutions Services",
-            value: "solutions-services",
-          },
+        expertise: {
+          header: 'My Expertise',
+          areas: [
+            { text: 'CI/CD Pipeline Design' },
+            { text: 'Kubernetes & Container Orchestration' },
+            { text: 'Infrastructure as Code' },
+            { text: 'Observability & Monitoring' },
+            { text: 'Cloud Architecture & Cost Optimization' },
+            { text: 'Incident Response & SRE' },
+          ],
+        },
+        chooseUs: {
+          header: 'Why Work With Me?',
+          areas: [
+            { text: '15+ years of engineering experience' },
+            { text: 'Embedded with your team, not drive-by consulting' },
+            { text: 'Month-to-month, no long-term contracts' },
+            { text: 'Async-first communication' },
+            { text: 'Production-hardened infrastructure skills' },
+            { text: 'Transparent pricing, no surprise invoices' },
+            { text: 'Flexible engagement models' },
+          ],
+        },
+      },
+      form: {
+        header: 'Tell me about your infrastructure needs',
+        description:
+          "I'll get back to you within 24 hours to discuss the right engagement for your situation.",
+        formErrorMssg: 'Please fix the errors in your message and hit the submit button again.',
+        contact: {
+          header: 'Contact Information',
+          company: 'Company Name',
+          companyPlaceholder: 'Your company name',
+          email: 'Email Address*',
+          emailPlaceholder: 'your.email@example.com',
+          fullName: 'Full Name*',
+          fullNamePlaceholder: 'Your full name',
+          phone: 'Phone Number',
+          phonePlaceholder: '+1 (555) 123-4567',
+        },
+        project: {
+          header: 'Engagement Details',
+          description: 'Description*',
+          descriptionPlaceholder:
+            "Describe your infrastructure challenges, current stack, team size, and what you're hoping to accomplish...",
+          timeline: 'Timeline',
+          timelineOptions: [
+            {
+              text: 'Select timeline',
+              value: '',
+            },
+            {
+              text: 'ASAP / Active incident',
+              value: 'asap',
+            },
+            {
+              text: 'Within 1 month',
+              value: '1-month',
+            },
+            {
+              text: '1-3 months',
+              value: '1-3-months',
+            },
+            {
+              text: '3-6 months',
+              value: '3-6-months',
+            },
+            {
+              text: 'Ongoing / No end date',
+              value: 'ongoing',
+            },
+            {
+              text: 'Flexible',
+              value: 'flexible',
+            },
+          ],
+          timelinePlaceholder: 'Your engagement timeline',
+          type: 'Engagement Type',
+          typeOptions: [
+            {
+              text: 'Select engagement type',
+              value: '',
+            },
+            {
+              text: 'Full Workstream',
+              value: 'full-workstream',
+            },
+            {
+              text: 'Continuous Workstream',
+              value: 'continuous-workstream',
+            },
+            {
+              text: 'Solutions Services',
+              value: 'solutions-services',
+            },
+            {
+              text: 'On-Call Support',
+              value: 'on-call-support',
+            },
+            {
+              text: 'Not sure — Help me decide',
+              value: 'unsure',
+            },
+          ],
+          typePlaceholder: 'Select engagement type',
+        },
+        files: {
+          header: 'Supporting Files (Optional)',
+          subheader:
+            'Upload architecture diagrams, runbooks, audit reports, or any relevant documentation.',
+          supportedFormats: 'PDF, DOC, DOCX, JPG, PNG, GIF, WebP, MP3, WAV, MP4, MOV, ZIP, TXT',
+          maxFileSizeText: 'Max file size:',
+          maxFileSize: '10MB per file',
+          maxFilesText: 'Max files:',
+          maxFiles: '5',
+        },
+        info: [
           {
-            text: "On-Call Support",
-            value: "on-call-support",
+            lead: 'Data Retention:',
+            text: ' Your contact information will be stored for 90 days to respond to your inquiry.',
           },
           {
-            text: "Not sure — Help me decide",
-            value: "unsure",
+            lead: 'Your Rights:',
+            text: ' You can request access, correction, or deletion of your data at any time by contacting ',
+            email: 'gdpr@webstackbuilders.com',
           },
         ],
-        typePlaceholder: "Select engagement type",
-      },
-      files: {
-        header: "Supporting Files (Optional)",
-        subheader: "Upload architecture diagrams, runbooks, audit reports, or any relevant documentation.",
-        supportedFormats: "PDF, DOC, DOCX, JPG, PNG, GIF, WebP, MP3, WAV, MP4, MOV, ZIP, TXT",
-        maxFileSizeText: "Max file size:",
-        maxFileSize: "10MB per file",
-        maxFilesText: "Max files:",
-        maxFiles: "5",
+        submitButtonText: 'Send Engagement Details',
+        waitingText: 'Sending...',
+        successText:
+          "Your details have been sent successfully. I'll review everything and get back to you within 24 hours to discuss the right engagement for your needs.",
+        errorText:
+          'Oops! Something went wrong while submitting your message. Please try again later or contact me directly at ',
+        errorEmail: 'contact@webstackbuilders.com',
       },
-      info: [
-        {
-          lead: "Data Retention:",
-          text: " Your contact information will be stored for 90 days to respond to your inquiry.",
-        },
-        {
-          lead: "Your Rights:",
-          text: " You can request access, correction, or deletion of your data at any time by contacting ",
-          email: "gdpr@webstackbuilders.com",
-        },
-      ],
-      submitButtonText: "Send Engagement Details",
-      waitingText: "Sending...",
-      successText: "Your details have been sent successfully. I'll review everything and get back to you within 24 hours to discuss the right engagement for your needs.",
-      errorText: "Oops! Something went wrong while submitting your message. Please try again later or contact me directly at ",
-      errorEmail: "contact@webstackbuilders.com",
-    },
-  }} />
+    }}
+  />
 </PageLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index de23cec08..394d26611 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -12,44 +12,45 @@ import Testimonials from '@components/Testimonials/index.astro'
 const pageDescription = 'Webstack Builders, Inc. Home Page'
 const pageTitle = 'Web Development & Digital Solutions - Webstack Builders, Inc.'
 const sectionClasses = 'container mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8 lg:py-12'
-
 ---
 
 <BaseLayout pageDescription={pageDescription} pageTitle={pageTitle} path={'/'}>
   <!-- Hero Section -->
-  <section
-    class:list={[sectionClasses]}
-    aria-labelledby="home-hero-title"
-  >
+  <section class:list={[sectionClasses]} aria-labelledby="home-hero-title">
     <Hero
       pretitle="I turn deployment nightmares into one-click operations. Legacy migrations, CI/CD pipelines, observability stacks—built to survive production."
-      benefits={["Zero-downtime migrations", "Self-healing infrastructure", "Developer-friendly golden paths"]}
+      benefits={[
+        'Zero-downtime migrations',
+        'Self-healing infrastructure',
+        'Developer-friendly golden paths',
+      ]}
     />
   </section>
 
   <!-- Intro Section -->
-  <section
-    class:list={[sectionClasses]}
-  >
+  <section class:list={[sectionClasses]}>
     <Intro
       pretitle="What I Do"
       title="Building the Future of Software Development"
       description="I'm a freelance software engineer specializing in platform engineering, cloud architecture, and developer experience optimization. With deep expertise in modern technologies and a focus on scalable solutions, I help businesses transform their technical infrastructure and accelerate development workflows. SOC-2 ready."
       benefits={[
         {
-          title: "Platform Engineering",
-          description: "Scalable infrastructure, internal developer platforms, and CI/CD pipelines built for rapid, reliable iteration",
-          icon: "check-circled-open",
+          title: 'Platform Engineering',
+          description:
+            'Scalable infrastructure, internal developer platforms, and CI/CD pipelines built for rapid, reliable iteration',
+          icon: 'check-circled-open',
         },
         {
-          title: "Cloud Architecture",
-          description: "Modern cloud-native architectures designed for scalability, resilience, and cost-efficiency",
-          icon: "lightning",
+          title: 'Cloud Architecture',
+          description:
+            'Modern cloud-native architectures designed for scalability, resilience, and cost-efficiency',
+          icon: 'lightning',
         },
         {
-          title: "Developer Experience",
-          description: "Optimized workflows, tools, and documentation to boost development team productivity",
-          icon: "html",
+          title: 'Developer Experience',
+          description:
+            'Optimized workflows, tools, and documentation to boost development team productivity',
+          icon: 'html',
         },
       ]}
     />
@@ -62,55 +63,54 @@ const sectionClasses = 'container mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8 lg:p
       description="Backstage is Spotify's open-source internal developer portal. I customize and deploy it for your team—starting small, proving value fast, then scaling across your organization."
       benefits={[
         {
-          title: "Less time to first deploy",
-          quantifier: "70%",
+          title: 'Less time to first deploy',
+          quantifier: '70%',
         },
         {
-          title: "Pilot app live",
-          quantifier: "4 wks",
+          title: 'Pilot app live',
+          quantifier: '4 wks',
         },
         {
-          title: "Ops tickets for deploys",
-          quantifier: "0",
+          title: 'Ops tickets for deploys',
+          quantifier: '0',
         },
       ]}
       features={[
         {
-          title: "Service Catalog",
-          description: "One place to find every service, API, and resource—with owners and docs attached.",
-          icon: "left-justified",
+          title: 'Service Catalog',
+          description:
+            'One place to find every service, API, and resource—with owners and docs attached.',
+          icon: 'left-justified',
         },
         {
-          title: "Software Templates",
-          description: "Scaffold new projects with CI/CD, tests, and cloud infra baked in from day one.",
-          icon: "clipboard-checked",
+          title: 'Software Templates',
+          description:
+            'Scaffold new projects with CI/CD, tests, and cloud infra baked in from day one.',
+          icon: 'clipboard-checked',
         },
         {
-          title: "CI/CD & Cloud Migration",
-          description: "Lift-and-shift or re-architect—either way, your pipelines will be rock solid.",
-          icon: "lightning",
+          title: 'CI/CD & Cloud Migration',
+          description:
+            'Lift-and-shift or re-architect—either way, your pipelines will be rock solid.',
+          icon: 'lightning',
         },
         {
-          title: "Observability Plug-ins",
-          description: "Surface logs, metrics, and traces right inside the portal—no context switching.",
-          icon: "graph",
+          title: 'Observability Plug-ins',
+          description:
+            'Surface logs, metrics, and traces right inside the portal—no context switching.',
+          icon: 'graph',
         },
       ]}
     />
   </section>
 
   <!-- Skills/Technologies Preview -->
-  <section
-    class:list={[sectionClasses, 'hidden md:block -mb-12']}
-  >
+  <section class:list={[sectionClasses, 'hidden md:block -mb-12']}>
     <Skills title="Technologies & Expertise" />
   </section>
 
   <!-- Latest Articles Section -->
-  <section
-    class:list={[sectionClasses]}
-    aria-labelledby="carousel-articles-suggested-all-title"
-  >
+  <section class:list={[sectionClasses]} aria-labelledby="carousel-articles-suggested-all-title">
     <h2
       id="carousel-articles-suggested-all-title"
       class="font-sans text-lg font-bold text-primary uppercase tracking-widest -mb-6"
diff --git a/src/pages/newsletter/confirm/[token].astro b/src/pages/newsletter/confirm/[token].astro
index 3f9f1637a..42e893c6f 100644
--- a/src/pages/newsletter/confirm/[token].astro
+++ b/src/pages/newsletter/confirm/[token].astro
@@ -25,13 +25,10 @@ if (typeof token !== 'string' || token.trim().length === 0) {
 }
 
 const pageTitle = 'Confirming Your Subscription...'
-const pageDescription = 'Double opt-in confirmation for your Webstack Builders newsletter subscription.'
+const pageDescription =
+  'Double opt-in confirmation for your Webstack Builders newsletter subscription.'
 ---
 
-<BaseLayout
-  pageTitle={pageTitle}
-  pageDescription={pageDescription}
-  path={"/newsletter/confirm"}
->
+<BaseLayout pageTitle={pageTitle} pageDescription={pageDescription} path={'/newsletter/confirm'}>
   <NewsletterConfirmation token={token} />
 </BaseLayout>
diff --git a/src/pages/newsletter/index.astro b/src/pages/newsletter/index.astro
index d2a2d4278..78a4f56a8 100644
--- a/src/pages/newsletter/index.astro
+++ b/src/pages/newsletter/index.astro
@@ -3,86 +3,84 @@ import PageLayout from '@layouts/PageLayout.astro'
 import Newsletter from '@components/Pages/Newsletter/Signup/index.astro'
 
 const pageTitle = 'Newsletter'
-const pageDescription = 'A monthly dispatch on platform engineering, DevOps, SRE, and cloud infrastructure. Real problems, real solutions, no fluff.'
+const pageDescription =
+  'A monthly dispatch on platform engineering, DevOps, SRE, and cloud infrastructure. Real problems, real solutions, no fluff.'
 const path = '/newsletter'
 ---
 
-<PageLayout
-  pageTitle={pageTitle}
-  pageDescription={pageDescription}
-  icon="email"
-  path={path}
->
+<PageLayout pageTitle={pageTitle} pageDescription={pageDescription} icon="email" path={path}>
   <Newsletter
     content={{
       intro: {
         heading: "What You'll Get Each Month",
-        detail: "One email per month. Every issue covers a single infrastructure topic in depth, plus quick wins you can ship the same day. Written for engineers who build and operate production systems.",
+        detail:
+          'One email per month. Every issue covers a single infrastructure topic in depth, plus quick wins you can ship the same day. Written for engineers who build and operate production systems.',
         itemList: [
           {
-            lead: "Deep Dives",
-            text: "Incident teardowns, architecture decisions, and tool evaluations with real production context.",
+            lead: 'Deep Dives',
+            text: 'Incident teardowns, architecture decisions, and tool evaluations with real production context.',
           },
           {
-            lead: "Quick Wins",
-            text: "Actionable tips with code snippets and config examples you can use immediately.",
+            lead: 'Quick Wins',
+            text: 'Actionable tips with code snippets and config examples you can use immediately.',
           },
           {
-            lead: "Curated Links",
-            text: "Post-mortems, RFCs, and technical posts worth your time, with annotations on why.",
+            lead: 'Curated Links',
+            text: 'Post-mortems, RFCs, and technical posts worth your time, with annotations on why.',
           },
           {
-            lead: "Monthly Challenge",
-            text: "A specific experiment to run in your own environment to improve reliability or observability.",
+            lead: 'Monthly Challenge',
+            text: 'A specific experiment to run in your own environment to improve reliability or observability.',
           },
         ],
         close: {
-          lead: "No spam, no sales pitches.",
-          text: " Just engineering content from someone who operates infrastructure for a living. Unsubscribe anytime with one click.",
+          lead: 'No spam, no sales pitches.',
+          text: ' Just engineering content from someone who operates infrastructure for a living. Unsubscribe anytime with one click.',
         },
       },
       form: {
-        title: "Join the Newsletter",
-        description: "Platform engineering insights delivered to your inbox once a month.",
-        placeholder: "you@company.com",
-        buttonText: "Subscribe",
+        title: 'Join the Newsletter',
+        description: 'Platform engineering insights delivered to your inbox once a month.',
+        placeholder: 'you@company.com',
+        buttonText: 'Subscribe',
       },
       topics: {
-        heading: "Topics We Cover",
-        detail: "Practical content across the infrastructure stack, written from hands-on experience with CI/CD pipelines, Kubernetes clusters, observability stacks, and cloud platforms.",
+        heading: 'Topics We Cover',
+        detail:
+          'Practical content across the infrastructure stack, written from hands-on experience with CI/CD pipelines, Kubernetes clusters, observability stacks, and cloud platforms.',
         itemList: [
           {
-            lead: "Platform Engineering",
-            text: "Internal developer portals, golden paths, self-service infrastructure, and platform team metrics.",
-            icon: "document",
-            color: "primary",
-            bgColor: "bg-primary/10",
+            lead: 'Platform Engineering',
+            text: 'Internal developer portals, golden paths, self-service infrastructure, and platform team metrics.',
+            icon: 'document',
+            color: 'primary',
+            bgColor: 'bg-primary/10',
           },
           {
-            lead: "DevOps &amp; CI/CD",
-            text: "Pipeline optimization, monorepo build strategies, deployment patterns, and feature flag infrastructure.",
-            icon: "gear",
-            color: "secondary",
-            bgColor: "bg-secondary/10",
+            lead: 'DevOps &amp; CI/CD',
+            text: 'Pipeline optimization, monorepo build strategies, deployment patterns, and feature flag infrastructure.',
+            icon: 'gear',
+            color: 'secondary',
+            bgColor: 'bg-secondary/10',
           },
           {
-            lead: "SRE &amp; Reliability",
-            text: "Error budgets, on-call design, chaos engineering, incident response, and SLO-based alerting.",
-            icon: "shield",
-            color: "accent",
-            bgColor: "bg-accent/10",
+            lead: 'SRE &amp; Reliability',
+            text: 'Error budgets, on-call design, chaos engineering, incident response, and SLO-based alerting.',
+            icon: 'shield',
+            color: 'accent',
+            bgColor: 'bg-accent/10',
           },
           {
-            lead: "Cloud Engineering",
-            text: "Cost optimization, IaC patterns, multi-cloud networking, and cloud provider comparisons without vendor bias.",
-            icon: "cloud",
-            color: "spotlight-offset",
-            bgColor: "bg-spotlight/10",
+            lead: 'Cloud Engineering',
+            text: 'Cost optimization, IaC patterns, multi-cloud networking, and cloud provider comparisons without vendor bias.',
+            icon: 'cloud',
+            color: 'spotlight-offset',
+            bgColor: 'bg-spotlight/10',
           },
         ],
       },
       preview: {
-        heading: "What an Issue Looks Like",
+        heading: 'What an Issue Looks Like',
         detail: "Here's a preview of a typical newsletter issue.",
       },
     }}
diff --git a/src/pages/offline/index.astro b/src/pages/offline/index.astro
index 0e08b21ab..21761aa8a 100644
--- a/src/pages/offline/index.astro
+++ b/src/pages/offline/index.astro
@@ -4,16 +4,12 @@ import NetworkStatus from '@components/Toasts/NetworkStatus/index.astro'
 import Offline from '@components/Pages/Offline/index.astro'
 
 const pageTitle = 'Offline - Webstack Builders'
-const pageDescription = 'Offline fallback for Webstack Builders with guidance on what to do until you reconnect.'
+const pageDescription =
+  'Offline fallback for Webstack Builders with guidance on what to do until you reconnect.'
 const path = 'offline'
 ---
 
-<PageLayout
-  pageTitle={pageTitle}
-  pageDescription={pageDescription}
-  path={path}
-  icon="waiting"
->
+<PageLayout pageTitle={pageTitle} pageDescription={pageDescription} path={path} icon="waiting">
   <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 py-2 md:py-4">
     <!-- Network status monitoring -->
     <NetworkStatus />
@@ -22,57 +18,57 @@ const path = 'offline'
         title: "You're Offline",
         message: "It looks like your connection dropped. We'll be here when you're back.",
         items: {
-          label: "What You Can Do While Offline",
+          label: 'What You Can Do While Offline',
           cards: [
             {
-              title: "Outline Your Project",
-              text: "Think through your platform goals, infrastructure needs, and engineering priorities.",
-              icon: "document",
-              color: "blue-600",
-              bgColor: "blue-100",
+              title: 'Outline Your Project',
+              text: 'Think through your platform goals, infrastructure needs, and engineering priorities.',
+              icon: 'document',
+              color: 'blue-600',
+              bgColor: 'blue-100',
             },
             {
-              title: "Define Your Requirements",
-              text: "Document your reliability targets, CI/CD pipeline needs, and developer enablement goals.",
-              icon: "clipboard-checked",
-              color: "green-600",
-              bgColor: "green-100",
+              title: 'Define Your Requirements',
+              text: 'Document your reliability targets, CI/CD pipeline needs, and developer enablement goals.',
+              icon: 'clipboard-checked',
+              color: 'green-600',
+              bgColor: 'green-100',
             },
             {
-              title: "Map Your Architecture",
-              text: "Sketch your system topology, service dependencies, and deployment strategy on paper.",
-              icon: "map",
-              color: "purple-600",
-              bgColor: "purple-100",
+              title: 'Map Your Architecture',
+              text: 'Sketch your system topology, service dependencies, and deployment strategy on paper.',
+              icon: 'map',
+              color: 'purple-600',
+              bgColor: 'purple-100',
             },
             {
-              title: "Prepare Your Questions",
-              text: "Jot down questions about testing frameworks, cloud migrations, or incident response for our team.",
-              icon: "question",
-              color: "orange-600",
-              bgColor: "orange-100",
+              title: 'Prepare Your Questions',
+              text: 'Jot down questions about testing frameworks, cloud migrations, or incident response for our team.',
+              icon: 'question',
+              color: 'orange-600',
+              bgColor: 'orange-100',
             },
           ],
         },
         about: {
-          heading: "About Webstack Builders",
+          heading: 'About Webstack Builders',
           items: [
             {
-              stat: "10+",
-              area: "Years Experience",
+              stat: '10+',
+              area: 'Years Experience',
             },
             {
-              stat: "100%",
-              area: "IaC &amp; CI/CD",
+              stat: '100%',
+              area: 'IaC &amp; CI/CD',
             },
             {
-              stat: "24/7",
-              area: "Support Available",
+              stat: '24/7',
+              area: 'Support Available',
             },
           ],
-      },
-      close: "Get In Touch When You're Back Online",
-      retryText: "Try again",
+        },
+        close: "Get In Touch When You're Back Online",
+        retryText: 'Try again',
       }}
     />
   </div>
diff --git a/src/pages/print/[...slug].astro b/src/pages/print/[...slug].astro
index d19124253..b5ab3d712 100644
--- a/src/pages/print/[...slug].astro
+++ b/src/pages/print/[...slug].astro
@@ -85,8 +85,14 @@ const publishDate = article.data.publishDate
     <article class="print-article markdown-content__prose">
       <Content components={{ ...PdfComponents }} />
 
-      <div style=" align-items: center; break-inside: avoid; display: grid; gap: 1rem; grid-template-columns: 1fr 1fr;margin-top: 2cm;">
-        <Copyright publishDate={publishDate ?? new Date()} variant="print" {...(link ? { link } : {})} />
+      <div
+        style=" align-items: center; break-inside: avoid; display: grid; gap: 1rem; grid-template-columns: 1fr 1fr;margin-top: 2cm;"
+      >
+        <Copyright
+          publishDate={publishDate ?? new Date()}
+          variant="print"
+          {...link ? { link } : {}}
+        />
         <QrCode data={link} />
       </div>
     </article>
diff --git a/src/pages/privacy/index.astro b/src/pages/privacy/index.astro
index db6aa0561..3e621f4b7 100644
--- a/src/pages/privacy/index.astro
+++ b/src/pages/privacy/index.astro
@@ -11,7 +11,8 @@ const lastUpdatedText = lastUpdatedDate.toLocaleDateString('en-US', {
 })
 
 const pageTitle = 'Privacy Policy'
-const pageDescription = 'Learn how Webstack Builders collects, uses, and protects your personal information.'
+const pageDescription =
+  'Learn how Webstack Builders collects, uses, and protects your personal information.'
 const subtitle = `Last updated: <time datetime="${lastUpdatedIso}">${lastUpdatedText}</time>`
 const path = '/privacy'
 ---
@@ -28,349 +29,359 @@ const path = '/privacy'
       header: {
         title: pageTitle,
         description:
-          "Your privacy is important to us. This policy explains how we collect, use, and protect your information.",
+          'Your privacy is important to us. This policy explains how we collect, use, and protect your information.',
       },
       nav: {
-        title: "Jump to:",
+        title: 'Jump to:',
         links: {
-          consentPreferencesText: "Consent Preferences",
-          myDataText: "My Data",
+          consentPreferencesText: 'Consent Preferences',
+          myDataText: 'My Data',
         },
         items: [
           {
-            label: "Collection",
-            href: "#privacy-information-we-collect-title",
+            label: 'Collection',
+            href: '#privacy-information-we-collect-title',
           },
           {
-            label: "Usage",
-            href: "#privacy-how-we-use-title",
+            label: 'Usage',
+            href: '#privacy-how-we-use-title',
           },
           {
-            label: "Sharing",
-            href: "#privacy-how-we-share-title",
+            label: 'Sharing',
+            href: '#privacy-how-we-share-title',
           },
           {
-            label: "Security",
-            href: "#privacy-data-security-title",
+            label: 'Security',
+            href: '#privacy-data-security-title',
           },
           {
-            label: "Your Rights",
-            href: "#privacy-your-rights-title",
+            label: 'Your Rights',
+            href: '#privacy-your-rights-title',
           },
           {
-            label: "Cookies",
-            href: "#privacy-cookies-and-tracking-title",
+            label: 'Cookies',
+            href: '#privacy-cookies-and-tracking-title',
           },
           {
-            label: "Storage",
-            href: "#privacy-storage-title",
+            label: 'Storage',
+            href: '#privacy-storage-title',
           },
           {
-            label: "Monitoring",
-            href: "#privacy-error-monitoring-title",
+            label: 'Monitoring',
+            href: '#privacy-error-monitoring-title',
           },
           {
-            label: "Contact Us",
-            href: "#privacy-contact-us-title",
+            label: 'Contact Us',
+            href: '#privacy-contact-us-title',
           },
           {
-            label: "Changes",
-            href: "#privacy-changes-to-policy-title",
+            label: 'Changes',
+            href: '#privacy-changes-to-policy-title',
           },
         ],
       },
       collection: {
-        title: "Information We Collect",
+        title: 'Information We Collect',
         cards: [
           {
-            title: "Personal Information",
-            description: "When you contact us through our website, we may collect:",
+            title: 'Personal Information',
+            description: 'When you contact us through our website, we may collect:',
             listItems: [
               {
-                text: "Your name and email address",
-                icon: "avatar",
-                color: "text-blue-600",
+                text: 'Your name and email address',
+                icon: 'avatar',
+                color: 'text-blue-600',
               },
               {
-                text: "Company name and contact information",
-                icon: "company",
-                color: "text-purple-600",
+                text: 'Company name and contact information',
+                icon: 'company',
+                color: 'text-purple-600',
               },
               {
-                text: "Project details and requirements you share with us",
-                icon: "clipboard-checked",
-                color: "text-green-600",
+                text: 'Project details and requirements you share with us',
+                icon: 'clipboard-checked',
+                color: 'text-green-600',
               },
               {
-                text: "Any files or documents you upload through our contact form",
-                icon: "upload",
-                color: "text-secondary",
+                text: 'Any files or documents you upload through our contact form',
+                icon: 'upload',
+                color: 'text-secondary',
               },
             ],
           },
           {
-            title: "Automatically Collected Information",
-            description: "We automatically collect certain information when you visit our website:",
+            title: 'Automatically Collected Information',
+            description: 'We automatically collect certain information when you visit our website:',
             listItems: [
               {
-                text: "Browser type and version (user agent)",
-                icon: "globe",
-                color: "text-blue-600",
+                text: 'Browser type and version (user agent)',
+                icon: 'globe',
+                color: 'text-blue-600',
               },
               {
-                text: "Pages visited and time spent on our site",
-                icon: "document",
-                color: "text-green-600",
+                text: 'Pages visited and time spent on our site',
+                icon: 'document',
+                color: 'text-green-600',
               },
               {
-                text: "Referring website information",
-                icon: "link",
-                color: "text-purple-600",
+                text: 'Referring website information',
+                icon: 'link',
+                color: 'text-purple-600',
               },
             ],
-            trailer: "Note: We do not collect or store IP addresses.",
+            trailer: 'Note: We do not collect or store IP addresses.',
           },
         ],
       },
       usage: {
-        title: "How We Use Your Information",
-        description:
-          "We use the information we collect for the following purposes:",
+        title: 'How We Use Your Information',
+        description: 'We use the information we collect for the following purposes:',
         listItems: [
           {
-            title: "Communication",
-            description: "To respond to your inquiries, provide project quotes, and communicate about potential services",
-            icon: "conversation",
-            color: "success",
-            background: "bg-success-inverse",
+            title: 'Communication',
+            description:
+              'To respond to your inquiries, provide project quotes, and communicate about potential services',
+            icon: 'conversation',
+            color: 'success',
+            background: 'bg-success-inverse',
           },
           {
-            title: "Analytics",
-            description: "To analyze website usage patterns and improve our site's functionality and user experience",
-            icon: "chart",
-            color: "blue-600",
-            background: "bg-blue-100",
+            title: 'Analytics',
+            description:
+              "To analyze website usage patterns and improve our site's functionality and user experience",
+            icon: 'chart',
+            color: 'blue-600',
+            background: 'bg-blue-100',
           },
           {
-            title: "Security",
-            description: "To protect our website and services from fraud, abuse, and unauthorized access",
-            icon: "lock",
-            color: "purple-600",
-            background: "bg-purple-100",
+            title: 'Security',
+            description:
+              'To protect our website and services from fraud, abuse, and unauthorized access',
+            icon: 'lock',
+            color: 'purple-600',
+            background: 'bg-purple-100',
           },
           {
-            title: "Legal Compliance",
-            description: "To comply with applicable laws, regulations, and legal processes",
-            icon: "info",
-            color: "orange-600",
-            background: "bg-orange-100",
+            title: 'Legal Compliance',
+            description: 'To comply with applicable laws, regulations, and legal processes',
+            icon: 'info',
+            color: 'orange-600',
+            background: 'bg-orange-100',
           },
         ],
       },
       sharing: {
-        title: "Information Sharing",
-        subtitle: "We Do Not Sell Your Information",
-        description: "We do not sell, trade, or otherwise transfer your personal information to third parties. We may share information only in the following limited circumstances:",
+        title: 'Information Sharing',
+        subtitle: 'We Do Not Sell Your Information',
+        description:
+          'We do not sell, trade, or otherwise transfer your personal information to third parties. We may share information only in the following limited circumstances:',
         listItems: [
           {
-            text: "With trusted service providers who assist in operating our website",
-            color: "bg-blue-600 dark:bg-blue-400",
+            text: 'With trusted service providers who assist in operating our website',
+            color: 'bg-blue-600 dark:bg-blue-400',
           },
           {
-            text: "When required by law or to protect our legal rights",
-            color: "bg-green-600 dark:bg-green-400",
+            text: 'When required by law or to protect our legal rights',
+            color: 'bg-green-600 dark:bg-green-400',
           },
           {
-            text: "In connection with a business transfer or merger",
-            color: "bg-purple-600 dark:bg-purple-400",
+            text: 'In connection with a business transfer or merger',
+            color: 'bg-purple-600 dark:bg-purple-400',
           },
           {
-            text: "With your explicit consent",
-            color: "bg-orange-500 dark:bg-orange-400",
+            text: 'With your explicit consent',
+            color: 'bg-orange-500 dark:bg-orange-400',
           },
         ],
       },
       security: {
-        title: "Data Security",
-        description: "We implement appropriate technical and organizational security measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction.",
+        title: 'Data Security',
+        description:
+          'We implement appropriate technical and organizational security measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction.',
         cards: [
           {
-            lead: "SSL Encryption",
-            text: "All data transmitted between your browser and our servers is encrypted",
-            icon: "shield",
-            color: "green-600",
-            background: "bg-green-100 dark:bg-green-900/30",
+            lead: 'SSL Encryption',
+            text: 'All data transmitted between your browser and our servers is encrypted',
+            icon: 'shield',
+            color: 'green-600',
+            background: 'bg-green-100 dark:bg-green-900/30',
           },
           {
-            lead: "Access Controls",
-            text: "Limited access to personal information on a need-to-know basis",
-            icon: "key",
-            color: "blue-600",
-            background: "bg-blue-100 dark:bg-blue-900/30",
+            lead: 'Access Controls',
+            text: 'Limited access to personal information on a need-to-know basis',
+            icon: 'key',
+            color: 'blue-600',
+            background: 'bg-blue-100 dark:bg-blue-900/30',
           },
           {
-            lead: "Regular Updates",
-            text: "Regular security audits and updates to protect against threats",
-            icon: "lock",
-            color: "purple-600",
-            background: "bg-purple-100 dark:bg-purple-900/30",
+            lead: 'Regular Updates',
+            text: 'Regular security audits and updates to protect against threats',
+            icon: 'lock',
+            color: 'purple-600',
+            background: 'bg-purple-100 dark:bg-purple-900/30',
           },
         ],
       },
       rights: {
-        title: "Your Rights",
-        description: "You have the following rights regarding your personal information:",
+        title: 'Your Rights',
+        description: 'You have the following rights regarding your personal information:',
         cards: [
           {
-            lead: "Access",
-            text: "Request a copy of the personal information we hold about you",
-            icon: "eye",
-            color: "blue-600",
+            lead: 'Access',
+            text: 'Request a copy of the personal information we hold about you',
+            icon: 'eye',
+            color: 'blue-600',
           },
           {
-            lead: "Correction",
-            text: "Request corrections to your personal information if it is inaccurate or incomplete",
-            icon: "paper-and-pen",
-            color: "green-600",
+            lead: 'Correction',
+            text: 'Request corrections to your personal information if it is inaccurate or incomplete',
+            icon: 'paper-and-pen',
+            color: 'green-600',
           },
           {
-            lead: "Deletion",
-            text: "Request deletion of your personal information",
-            icon: "trash",
-            color: "red-600",
+            lead: 'Deletion',
+            text: 'Request deletion of your personal information',
+            icon: 'trash',
+            color: 'red-600',
           },
           {
-            lead: "Opt-out",
-            text: "Withdraw consent for processing your information",
-            icon: "power",
-            color: "orange-600",
+            lead: 'Opt-out',
+            text: 'Withdraw consent for processing your information',
+            icon: 'power',
+            color: 'orange-600',
           },
         ],
       },
       cookies: {
-        title: "Cookies and Tracking",
-        description: "Our website uses cookies and similar tracking technologies to enhance your browsing experience. You can control cookie settings through your browser preferences.",
-        subtitle: "Types of Cookies We Use:",
+        title: 'Cookies and Tracking',
+        description:
+          'Our website uses cookies and similar tracking technologies to enhance your browsing experience. You can control cookie settings through your browser preferences.',
+        subtitle: 'Types of Cookies We Use:',
         listItems: [
           {
-            lead: "Essential Cookies:",
-            text: "Required for basic website functionality",
-            color: "bg-blue-600",
+            lead: 'Essential Cookies:',
+            text: 'Required for basic website functionality',
+            color: 'bg-blue-600',
           },
           {
-            lead: "Analytics Cookies:",
-            text: "Help us understand how visitors use our website",
-            color: "bg-green-600",
+            lead: 'Analytics Cookies:',
+            text: 'Help us understand how visitors use our website',
+            color: 'bg-green-600',
           },
           {
-            lead: "Preference Cookies:",
-            text: "Remember your settings and preferences",
-            color: "bg-purple-600",
+            lead: 'Preference Cookies:',
+            text: 'Remember your settings and preferences',
+            color: 'bg-purple-600',
           },
         ],
       },
       storage: {
-        title: "Strictly Necessary Storage",
-        description: "In addition to cookies, we use browser localStorage to store certain information that is essential for our website to function properly and provide you with a better user experience. Under GDPR Article 6(1)(f), we process this data based on our legitimate interest to provide a functional and accessible website. You retain the right to opt out of optional features, though this may impact your experience.",
-        subtitle: "What We Store Locally:",
+        title: 'Strictly Necessary Storage',
+        description:
+          'In addition to cookies, we use browser localStorage to store certain information that is essential for our website to function properly and provide you with a better user experience. Under GDPR Article 6(1)(f), we process this data based on our legitimate interest to provide a functional and accessible website. You retain the right to opt out of optional features, though this may impact your experience.',
+        subtitle: 'What We Store Locally:',
         listItems: [
           {
-            lead: "Cookie Consent Preferences",
+            lead: 'Cookie Consent Preferences',
             text: "We remember your cookie consent choices (analytics, marketing, functional) so we don't repeatedly ask you. This prevents consent banner fatigue and respects your initial decision.",
-            color: "border-blue-500",
+            color: 'border-blue-500',
           },
           {
-            lead: "Theme Preference (Accessibility Feature)",
+            lead: 'Theme Preference (Accessibility Feature)',
             text: [
-              "Your selected visual theme (light, dark, holiday, or A11y high-contrast) is stored to maintain visual consistency across pages and visits. This prevents jarring theme changes during navigation and ensures accessibility for users with visual impairments.",
-              "<strong>Accessibility Justification:</strong> Our A11y theme meets WCAG 1.4.6 Level AAA standards (Contrast Enhanced), requiring a contrast ratio of at least 7:1 for normal text. Users with low vision or color blindness depend on this high-contrast theme for legible content. Storing the theme preference is necessary to deliver an accessible experience consistently across your browsing session, as required by accessibility regulations including the European Accessibility Act and WCAG guidelines. This constitutes a legitimate interest under GDPR Article 6(1)(f) and requires no consent.",
+              'Your selected visual theme (light, dark, holiday, or A11y high-contrast) is stored to maintain visual consistency across pages and visits. This prevents jarring theme changes during navigation and ensures accessibility for users with visual impairments.',
+              '<strong>Accessibility Justification:</strong> Our A11y theme meets WCAG 1.4.6 Level AAA standards (Contrast Enhanced), requiring a contrast ratio of at least 7:1 for normal text. Users with low vision or color blindness depend on this high-contrast theme for legible content. Storing the theme preference is necessary to deliver an accessible experience consistently across your browsing session, as required by accessibility regulations including the European Accessibility Act and WCAG guidelines. This constitutes a legitimate interest under GDPR Article 6(1)(f) and requires no consent.',
             ],
-            color: "border-purple-500",
+            color: 'border-purple-500',
           },
           {
-            lead: "Social Media Embed Cache",
-            text: "When you load social media embeds (Twitter, YouTube, etc.), we cache the public API responses locally to reduce repeated network requests. This improves page load times and reduces bandwidth usage for both you and the third-party services. No personal data is stored—only publicly available embed content.",
-            color: "border-green-500",
+            lead: 'Social Media Embed Cache',
+            text: 'When you load social media embeds (Twitter, YouTube, etc.), we cache the public API responses locally to reduce repeated network requests. This improves page load times and reduces bandwidth usage for both you and the third-party services. No personal data is stored—only publicly available embed content.',
+            color: 'border-green-500',
           },
           {
-            lead: "Mastodon Instances (Requires Consent)",
-            text: "If you interact with Mastodon social sharing features and provide consent, we remember your preferred Mastodon instance(s) to streamline future interactions. We store up to 5 instances using a first-in-first-out approach. <strong>This feature requires explicit opt-in consent</strong> because your Mastodon instance choice can identify you and constitutes personal data under GDPR Article 4(1).",
-            color: "border-orange-500",
+            lead: 'Mastodon Instances (Requires Consent)',
+            text: 'If you interact with Mastodon social sharing features and provide consent, we remember your preferred Mastodon instance(s) to streamline future interactions. We store up to 5 instances using a first-in-first-out approach. <strong>This feature requires explicit opt-in consent</strong> because your Mastodon instance choice can identify you and constitutes personal data under GDPR Article 4(1).',
+            color: 'border-orange-500',
           },
           {
-            lead: "Error Logging (Sentry)",
-            text: "We use Sentry for error monitoring to identify and fix bugs quickly. Sentry may store session information locally to track errors across page loads. We configure Sentry to avoid collecting personally identifiable information (no emails, usernames, or IP addresses).",
-            color: "border-red-500",
+            lead: 'Error Logging (Sentry)',
+            text: 'We use Sentry for error monitoring to identify and fix bugs quickly. Sentry may store session information locally to track errors across page loads. We configure Sentry to avoid collecting personally identifiable information (no emails, usernames, or IP addresses).',
+            color: 'border-red-500',
           },
         ],
-        trailer: "<strong>Your Choice:</strong> Theme preference, consent tracking, social embed caching, and error monitoring are classified as strictly necessary for providing a functional and accessible website. These features do not require consent. Optional features like Mastodon instance storage require opt-in consent through our Cookie Preference Center. Disabling optional storage will prevent the website from remembering your Mastodon preferences but will not affect core functionality or accessibility features.",
+        trailer:
+          '<strong>Your Choice:</strong> Theme preference, consent tracking, social embed caching, and error monitoring are classified as strictly necessary for providing a functional and accessible website. These features do not require consent. Optional features like Mastodon instance storage require opt-in consent through our Cookie Preference Center. Disabling optional storage will prevent the website from remembering your Mastodon preferences but will not affect core functionality or accessibility features.',
       },
       monitoring: {
-        title: "Error Monitoring and Diagnostics",
-        description: "We use Sentry, a third-party error monitoring service, to help us identify and fix technical issues on our website. This helps us maintain a high-quality user experience and quickly resolve bugs.",
+        title: 'Error Monitoring and Diagnostics',
+        description:
+          'We use Sentry, a third-party error monitoring service, to help us identify and fix technical issues on our website. This helps us maintain a high-quality user experience and quickly resolve bugs.',
         list1: {
-          lead: "What We Collect for Error Monitoring:",
+          lead: 'What We Collect for Error Monitoring:',
           listItems: [
             {
-              heading: "Browser Information:",
-              text: "User agent (browser type and version) to help diagnose browser-specific issues",
+              heading: 'Browser Information:',
+              text: 'User agent (browser type and version) to help diagnose browser-specific issues',
             },
             {
-              heading: "Error Details:",
-              text: "Technical error messages, stack traces, and the sequence of actions leading to errors",
+              heading: 'Error Details:',
+              text: 'Technical error messages, stack traces, and the sequence of actions leading to errors',
             },
             {
-              heading: "Page Information:",
-              text: "URLs visited and navigation history when errors occur",
+              heading: 'Page Information:',
+              text: 'URLs visited and navigation history when errors occur',
             },
           ],
         },
         list2: {
-          lead: "Privacy Protections:",
+          lead: 'Privacy Protections:',
           listItems: [
             {
-              text: "No IP addresses collected or stored",
-              color: "green-600",
+              text: 'No IP addresses collected or stored',
+              color: 'green-600',
             },
             {
-              text: "No session replay or screen recording",
-              color: "green-600",
+              text: 'No session replay or screen recording',
+              color: 'green-600',
             },
             {
-              text: "No performance tracking or monitoring",
-              color: "green-600",
+              text: 'No performance tracking or monitoring',
+              color: 'green-600',
             },
             {
-              text: "Data is used solely for technical troubleshooting and bug fixes",
-              color: "green-600",
+              text: 'Data is used solely for technical troubleshooting and bug fixes',
+              color: 'green-600',
             },
           ],
         },
         close: {
-          heading: "Data Processing Agreement",
-          text: "Webstack Builders has signed a Data Processing Agreement (DPA) with Sentry to ensure that all error monitoring data is processed in compliance with GDPR and other data protection regulations. This agreement ensures that Sentry acts as a data processor on our behalf and implements appropriate security measures to protect your information.",
-        }
+          heading: 'Data Processing Agreement',
+          text: 'Webstack Builders has signed a Data Processing Agreement (DPA) with Sentry to ensure that all error monitoring data is processed in compliance with GDPR and other data protection regulations. This agreement ensures that Sentry acts as a data processor on our behalf and implements appropriate security measures to protect your information.',
+        },
       },
       contact: {
-        title: "Contact Us",
-        description: "If you have any questions about this Privacy Policy or would like to exercise your rights, please contact us:",
+        title: 'Contact Us',
+        description:
+          'If you have any questions about this Privacy Policy or would like to exercise your rights, please contact us:',
         card1: {
-          lead: "Contact Us",
-          text: "Email",
-          link: "/contact/",
+          lead: 'Contact Us',
+          text: 'Email',
+          link: '/contact/',
         },
         card2: {
-          lead: "Response Time",
-          text: "We respond to privacy requests within 30 days",
+          lead: 'Response Time',
+          text: 'We respond to privacy requests within 30 days',
         },
         card3: {
-          lead: "Data Protection Officer",
-          text: "For questions specifically related to data protection and privacy compliance:",
+          lead: 'Data Protection Officer',
+          text: 'For questions specifically related to data protection and privacy compliance:',
         },
       },
       changes: {
-        title: "Changes to This Policy",
-        description: "We may update this Privacy Policy from time to time to reflect changes in our practices or applicable laws. We will notify you of any material changes by posting the updated policy on this page and updating the \"Last updated\" date at the top of this policy. We encourage you to review this policy periodically.",
+        title: 'Changes to This Policy',
+        description:
+          'We may update this Privacy Policy from time to time to reflect changes in our practices or applicable laws. We will notify you of any material changes by posting the updated policy on this page and updating the "Last updated" date at the top of this policy. We encourage you to review this policy periodically.',
       },
     }}
   />
diff --git a/src/pages/privacy/my-data.astro b/src/pages/privacy/my-data.astro
index cd93ec1c8..ba31e137c 100644
--- a/src/pages/privacy/my-data.astro
+++ b/src/pages/privacy/my-data.astro
@@ -3,60 +3,59 @@ import PageLayout from '@layouts/PageLayout.astro'
 import PrivacyForm from '@components/Pages/MyData/index.astro'
 
 const pageTitle = 'My Data - Privacy Rights'
-const pageDescription = 'Exercise your GDPR rights by requesting a copy of your data or asking us to delete it.'
+const pageDescription =
+  'Exercise your GDPR rights by requesting a copy of your data or asking us to delete it.'
 const path = 'privacy/my-data'
 ---
 
-<PageLayout
-  pageTitle={pageTitle}
-  pageDescription={pageDescription}
-  icon="avatar"
-  path={path}
->
-  <PrivacyForm content={{
-    header: {
-      title: "My Data & Privacy Rights",
-      description: "Under GDPR, you have the right to access and control your personal data.",
-    },
-    intro: "Use the forms below to request a copy of your data or request its deletion.",
-    introLinks: {
-      privacyPolicyText: 'Privacy Policy',
-      consentPreferencesText: 'Consent Preferences',
-    },
-    accessData: {
-      heading: "Access My Data",
-      description: "Request a copy of personal data we have about you, including consent records and newsletter subscriptions.",
-      label: "Email Address",
-      buttonText: "Request My Data",
-    },
-     deleteData: {
-      heading: "Delete My Data",
-      description: "Request deletion of your personal data. We will process your request in accordance with GDPR guidelines.",
-      label: "Email Address",
-      buttonText: "Delete My Data",
-      confirmText: "I understand this will permanently delete all my data",
-    },
-    next: {
-      heading: "What Happens Next?",
-      items: [
-        {
-          lead: "Verification Email:",
-          text: "We'll send a verification link to your email address.",
-        },
-        {
-          lead: "Click the Link:",
-          text: "Click the link in the email to verify your request (expires in 24 hours).",
-        },
-        {
-          lead: "For Access Requests:",
-          text: "Your data will be automatically downloaded as a JSON file.",
-        },
-        {
-          lead: "For Deletion Requests:",
-          text: "Your data will be permanently removed and you'll see a confirmation.",
-        },
-      ]
-    }
-  }} />
+<PageLayout pageTitle={pageTitle} pageDescription={pageDescription} icon="avatar" path={path}>
+  <PrivacyForm
+    content={{
+      header: {
+        title: 'My Data & Privacy Rights',
+        description: 'Under GDPR, you have the right to access and control your personal data.',
+      },
+      intro: 'Use the forms below to request a copy of your data or request its deletion.',
+      introLinks: {
+        privacyPolicyText: 'Privacy Policy',
+        consentPreferencesText: 'Consent Preferences',
+      },
+      accessData: {
+        heading: 'Access My Data',
+        description:
+          'Request a copy of personal data we have about you, including consent records and newsletter subscriptions.',
+        label: 'Email Address',
+        buttonText: 'Request My Data',
+      },
+      deleteData: {
+        heading: 'Delete My Data',
+        description:
+          'Request deletion of your personal data. We will process your request in accordance with GDPR guidelines.',
+        label: 'Email Address',
+        buttonText: 'Delete My Data',
+        confirmText: 'I understand this will permanently delete all my data',
+      },
+      next: {
+        heading: 'What Happens Next?',
+        items: [
+          {
+            lead: 'Verification Email:',
+            text: "We'll send a verification link to your email address.",
+          },
+          {
+            lead: 'Click the Link:',
+            text: 'Click the link in the email to verify your request (expires in 24 hours).',
+          },
+          {
+            lead: 'For Access Requests:',
+            text: 'Your data will be automatically downloaded as a JSON file.',
+          },
+          {
+            lead: 'For Deletion Requests:',
+            text: "Your data will be permanently removed and you'll see a confirmation.",
+          },
+        ],
+      },
+    }}
+  />
 </PageLayout>
-
diff --git a/src/pages/resume/index.astro b/src/pages/resume/index.astro
index 7cfb35bea..d1ed64e27 100644
--- a/src/pages/resume/index.astro
+++ b/src/pages/resume/index.astro
@@ -3,9 +3,6 @@ import { getCollection, render } from 'astro:content'
 import Resume from '@components/Pages/Resume/index.astro'
 
 const [contactEntry] = await getCollection('contactData')
-import '@styles/index.css'
-import '@styles/icons.css'
-import './index.css'
 
 const [resumeEntry] = await getCollection('resume')
 
@@ -49,4 +46,4 @@ const path = '/resume'
   path={path}
   renderedClients={renderedClients}
   resume={resume}
-/>
\ No newline at end of file
+/>
diff --git a/src/pages/resume/index.css b/src/pages/resume/index.css
deleted file mode 100644
index 249af1082..000000000
--- a/src/pages/resume/index.css
+++ /dev/null
@@ -1,29 +0,0 @@
-html,
-body {
-  height: auto;
-  min-height: 100%;
-}
-
-body {
-  background-color: lightgrey;
-  color: black;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-* {
-  margin: 0;
-}
-
-p {
-  overflow-wrap: break-word;
-}
-
-svg {
-  display: block;
-  max-width: 100%;
-}
diff --git a/src/pages/services/index.astro b/src/pages/services/index.astro
index 2399f1290..65e3c6f3c 100644
--- a/src/pages/services/index.astro
+++ b/src/pages/services/index.astro
@@ -12,15 +12,11 @@ const services = allServices
   .sort((a, b) => a.data.order - b.data.order)
 
 const pageTitle = 'My Services'
-const pageDescription = 'Flexible options from full-time capacity to one-off assessments — all month-to-month with no long-term lock-in.'
+const pageDescription =
+  'Flexible options from full-time capacity to one-off assessments — all month-to-month with no long-term lock-in.'
 const path = '/services/'
 ---
 
-<PageLayout
-  pageTitle={pageTitle}
-  pageDescription={pageDescription}
-  icon="wrench"
-  path={path}
->
+<PageLayout pageTitle={pageTitle} pageDescription={pageDescription} icon="wrench" path={path}>
   <ServicesPage services={services} />
 </PageLayout>
diff --git a/src/pages/tags/[tag].astro b/src/pages/tags/[tag].astro
index 467fae5af..7d974c124 100644
--- a/src/pages/tags/[tag].astro
+++ b/src/pages/tags/[tag].astro
@@ -17,9 +17,15 @@ export interface Props {
 
 export async function getStaticPaths() {
   const allTags = await getCollection('tags')
-  const allArticles = await getCollection('articles', ({ data }) => isDev() || data.isDraft !== true)
+  const allArticles = await getCollection(
+    'articles',
+    ({ data }) => isDev() || data.isDraft !== true
+  )
 
-  const articleHasTag = (article: CollectionEntry<'articles'>, tagEntry: CollectionEntry<'tags'>) => {
+  const articleHasTag = (
+    article: CollectionEntry<'articles'>,
+    tagEntry: CollectionEntry<'tags'>
+  ) => {
     return article.data.tags.some((tagRef: { id: string }) => tagRef.id === tagEntry.id)
   }
 
@@ -90,33 +96,54 @@ const paginatedContent = sortedContent.slice(startIndex, endIndex)
         </div>
 
         <div class="min-w-0 sm:flex-1 sm:space-y-4 sm:ml-4 sm:mt-6">
-          <div class="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:gap-x-4 sm:gap-y-2">
+          <div
+            class="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:gap-x-4 sm:gap-y-2"
+          >
             <h1 class="text-page-inverse">
               {tagEntry.data.displayName}
             </h1>
-            <span class="inline-flex w-fit rounded-full bg-page-inverse px-3 py-1 text-sm font-semibold text-page-base whitespace-nowrap ml-2 sm:mt-2">
-              {totalItems} {totalItems === 1 ? 'article' : 'articles'}
+            <span
+              class="inline-flex w-fit rounded-full bg-page-inverse px-3 py-1 text-sm font-semibold text-page-base whitespace-nowrap ml-2 sm:mt-2"
+            >
+              {totalItems}
+              {totalItems === 1 ? 'article' : 'articles'}
             </span>
           </div>
 
-          {tagEntry.data.intro && (
-            <p class="hidden sm:block text-lg text-content leading-relaxed max-w-2xl">
-              {tagEntry.data.intro}
-            </p>
-          )}
+          {
+            tagEntry.data.intro && (
+              <p class="hidden sm:block text-lg text-content leading-relaxed max-w-2xl">
+                {tagEntry.data.intro}
+              </p>
+            )
+          }
 
-          <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-content-offset mt-2 sm:mt-0 ml-3 sm:ml-0">
-            {sortedContent.length > 0 && (
-              <span class="text-content-active">
-                Latest: <time class="font-medium text-content">{sortedContent[0]!.data.publishDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</time>
-              </span>
-            )}
+          <div
+            class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-content-offset mt-2 sm:mt-0 ml-3 sm:ml-0"
+          >
+            {
+              sortedContent.length > 0 && (
+                <span class="text-content-active">
+                  Latest:{' '}
+                  <time class="font-medium text-content">
+                    {sortedContent[0]!.data.publishDate.toLocaleDateString('en-US', {
+                      month: 'short',
+                      day: 'numeric',
+                      year: 'numeric',
+                    })}
+                  </time>
+                </span>
+              )
+            }
           </div>
         </div>
       </div>
     </header>
 
-    <section class="border border-trim rounded-xl px-6 sm:px-8 pt-4 sm:pt-6 max-w-none mb-12" aria-label="Tag description">
+    <section
+      class="border border-trim rounded-xl px-6 sm:px-8 pt-4 sm:pt-6 max-w-none mb-12"
+      aria-label="Tag description"
+    >
       <TagContent />
     </section>
 
@@ -158,9 +185,7 @@ const paginatedContent = sortedContent.slice(startIndex, endIndex)
 
                     <div class="p-6 space-y-4">
                       <div class="flex items-center gap-3 text-sm">
-                        <span
-                          class="px-3 py-1 rounded-full text-white font-medium bg-primary"
-                        >
+                        <span class="px-3 py-1 rounded-full text-white font-medium bg-primary">
                           Article
                         </span>
                         <time datetime={item.data.publishDate.toISOString()}>
@@ -246,9 +271,7 @@ const paginatedContent = sortedContent.slice(startIndex, endIndex)
               {/* Show last page */}
               {currentPage < totalPages - 2 && (
                 <>
-                  {currentPage < totalPages - 3 && (
-                    <span class="px-3 py-2 text-sm">…</span>
-                  )}
+                  {currentPage < totalPages - 3 && <span class="px-3 py-2 text-sm">…</span>}
                   <a
                     href={`/tags/${tag}?page=${totalPages}`}
                     class="px-3 py-2 text-sm font-medium bg-content-inverse border border-trim rounded-lg hover:bg-page-offset transition-colors duration-200"
diff --git a/src/pages/terms.astro b/src/pages/terms.astro
index f97729fc7..22ef449d9 100644
--- a/src/pages/terms.astro
+++ b/src/pages/terms.astro
@@ -2,8 +2,9 @@
 import PageLayout from '@layouts/PageLayout.astro'
 import TermsOfUsePage from '@components/Pages/TermsOfUse/index.astro'
 
-const pageDescription = "Webstack Builders, Inc. Terms of Use: High-quality tech articles (CC BY-NC 4.0) and ready-to-use open-source code (MIT). Stay informed on our usage policies."
-const pageTitle = "Terms of Use"
+const pageDescription =
+  'Webstack Builders, Inc. Terms of Use: High-quality tech articles (CC BY-NC 4.0) and ready-to-use open-source code (MIT). Stay informed on our usage policies.'
+const pageTitle = 'Terms of Use'
 const path = '/terms/'
 ---
 
diff --git a/src/pages/testing/bug-reporter.astro b/src/pages/testing/bug-reporter.astro
index d5ac85556..2f3383d82 100644
--- a/src/pages/testing/bug-reporter.astro
+++ b/src/pages/testing/bug-reporter.astro
@@ -29,12 +29,15 @@ const minimizedCloseButtonId = 'bugReporterFixtureMinimizedClose'
       <p class="text-content-active">{fixtureDescription}</p>
     </header>
 
-    <article class="w-full max-w-2xl space-y-6 rounded-lg border border-trim bg-page-offset p-6 shadow-sm">
+    <article
+      class="w-full max-w-2xl space-y-6 rounded-lg border border-trim bg-page-offset p-6 shadow-sm"
+    >
       <div class="space-y-2">
         <p class="text-xs uppercase tracking-wider text-content-active">Fixture Trigger</p>
         <h2 class="text-2xl font-semibold">Open the bug reporter modal</h2>
         <p class="text-content-active">
-          This trigger renders the production Bug Reporter component with a stable button placement for automation.
+          This trigger renders the production Bug Reporter component with a stable button placement
+          for automation.
         </p>
       </div>
 
@@ -63,4 +66,4 @@ const minimizedCloseButtonId = 'bugReporterFixtureMinimizedClose'
       />
     </article>
   </section>
-</BaseLayout>
\ No newline at end of file
+</BaseLayout>
diff --git a/src/pages/testing/calendar.astro b/src/pages/testing/calendar.astro
index db6671312..32bb85310 100644
--- a/src/pages/testing/calendar.astro
+++ b/src/pages/testing/calendar.astro
@@ -18,7 +18,9 @@ const pagePath = '/testing/calendar'
       <p class="text-content-active">{fixtureDescription}</p>
     </header>
 
-    <article class="w-full max-w-2xl space-y-6 rounded-lg border border-trim bg-page-offset p-6 shadow-sm">
+    <article
+      class="w-full max-w-2xl space-y-6 rounded-lg border border-trim bg-page-offset p-6 shadow-sm"
+    >
       <div class="space-y-2">
         <p class="text-xs uppercase tracking-wider text-content-active">Fixture Event</p>
         <h2 class="text-2xl font-semibold">Team sync</h2>
@@ -42,4 +44,4 @@ const pagePath = '/testing/calendar'
       </div>
     </article>
   </section>
-</BaseLayout>
\ No newline at end of file
+</BaseLayout>
diff --git a/src/pages/testing/code.astro b/src/pages/testing/code.astro
index d15e45cee..d6d0c184c 100644
--- a/src/pages/testing/code.astro
+++ b/src/pages/testing/code.astro
@@ -40,8 +40,12 @@ const pagePath = '/testing/code'
       </div>
 
       <code-tabs data-testid="code-tabs-multi-fixture">
-        <pre data-code-tabs-tab="JavaScript" data-language="javascript"><code>console.log('A')</code></pre>
-        <pre data-code-tabs-tab="TypeScript" data-language="typescript"><code>console.log('B')</code></pre>
+        <pre
+          data-code-tabs-tab="JavaScript"
+          data-language="javascript"><code>console.log('A')</code></pre>
+        <pre
+          data-code-tabs-tab="TypeScript"
+          data-language="typescript"><code>console.log('B')</code></pre>
       </code-tabs>
     </article>
 
@@ -67,4 +71,4 @@ const pagePath = '/testing/code'
       </code-tabs>
     </article>
   </section>
-</BaseLayout>
\ No newline at end of file
+</BaseLayout>
diff --git a/src/pages/testing/comps/icons.astro b/src/pages/testing/comps/icons.astro
index f1b10de1d..4ed12b952 100644
--- a/src/pages/testing/comps/icons.astro
+++ b/src/pages/testing/comps/icons.astro
@@ -18,7 +18,9 @@ const description = 'Preview every marker icon to verify styling and availabilit
       <p class="text-sm uppercase tracking-wide">Design System</p>
       <h1 class="mt-2 text-4xl font-bold">{pageTitle}</h1>
       <p class="mt-4">
-        Every marker from <code class="rounded bg-page-offset px-1 py-0.5 text-sm">src/components/Icon/icons</code>
+        Every marker from <code class="rounded bg-page-offset px-1 py-0.5 text-sm"
+          >src/components/Icon/icons</code
+        >
         rendered with color <code class="rounded bg-page-offset px-1 py-0.5 text-sm">primary</code>.
       </p>
     </header>
@@ -32,14 +34,16 @@ const description = 'Preview every marker icon to verify styling and availabilit
         <p class="text-sm">{iconNames.length} icons</p>
       </div>
       <div class="flex flex-wrap gap-6">
-        {iconNames.map(iconName => (
-          <div class="flex min-w-50 flex-1 basis-55 flex-col items-center justify-between rounded-xl border border-trim bg-content-inverse p-8 text-center">
-            <Icon icon={iconName} color="primary" size={12} />
-            <span class="mt-6 w-full border-t border-dashed border-trim pt-4 text-sm font-mono">
-              {iconName}
-            </span>
-          </div>
-        ))}
+        {
+          iconNames.map(iconName => (
+            <div class="flex min-w-50 flex-1 basis-55 flex-col items-center justify-between rounded-xl border border-trim bg-content-inverse p-8 text-center">
+              <Icon icon={iconName} color="primary" size={12} />
+              <span class="mt-6 w-full border-t border-dashed border-trim pt-4 text-sm font-mono">
+                {iconName}
+              </span>
+            </div>
+          ))
+        }
       </div>
     </section>
   </main>
diff --git a/src/pages/testing/comps/links.astro b/src/pages/testing/comps/links.astro
index 59d9b248f..a80b7073c 100644
--- a/src/pages/testing/comps/links.astro
+++ b/src/pages/testing/comps/links.astro
@@ -7,76 +7,271 @@ const path = '/testing/comps/links'
 ---
 
 <BaseLayout pageDescription={pageDescription} noindex={true} pageTitle={pageTitle} path={path}>
-	<main class="mx-auto max-w-7xl space-y-12 px-4 py-12 sm:px-6 lg:px-8">
-		<header class="space-y-2 bg-accent p-6">
-			<h1 class="text-3xl font-bold tracking-tight text-content-inverse">Mockups</h1>
-		</header>
+  <main class="mx-auto max-w-7xl space-y-12 px-4 py-12 sm:px-6 lg:px-8">
+    <header class="space-y-2 bg-accent p-6">
+      <h1 class="text-3xl font-bold tracking-tight text-content-inverse">Mockups</h1>
+    </header>
 
-    <p><a href="/articles/alert-fatigue-reduction-triage-actionable-alerts">alert-fatigue-reduction-triage-actionable-alerts</a></p>
-    <p><a href="/articles/api-deprecation-sunset-headers-consumer-migration">api-deprecation-sunset-headers-consumer-migration</a></p>
-    <p><a href="/articles/api-gateway-metrics-traces-logs-debugging">api-gateway-metrics-traces-logs-debugging</a></p>
-    <p><a href="/articles/api-usage-metering-quotas-cost-attribution">api-usage-metering-quotas-cost-attribution</a></p>
-    <p><a href="/articles/argocd-sync-failures-gitops-debugging-troubleshooting">argocd-sync-failures-gitops-debugging-troubleshooting</a></p>
-    <p><a href="/articles/availability-targets-five-nines-cost-benefit-analysis">availability-targets-five-nines-cost-benefit-analysis</a></p>
-    <p><a href="/articles/backpressure-load-shedding-admission-control-overload">backpressure-load-shedding-admission-control-overload</a></p>
-    <p><a href="/articles/blameless-postmortem-incident-analysis-systemic-causes">blameless-postmortem-incident-analysis-systemic-causes</a></p>
-    <p><a href="/articles/blue-green-canary-deployment-strategy-comparison">blue-green-canary-deployment-strategy-comparison</a></p>
-    <p><a href="/articles/cdn-edge-caching-cache-keys-vary-headers">cdn-edge-caching-cache-keys-vary-headers</a></p>
-    <p><a href="/articles/chaos-engineering-failure-injection-low-cost-experiments">chaos-engineering-failure-injection-low-cost-experiments</a></p>
-    <p><a href="/articles/ci-pipeline-caching-docker-layers-dependency-cache">ci-pipeline-caching-docker-layers-dependency-cache</a></p>
-    <p><a href="/articles/circuit-breaker-retry-budget-cascade-failure-prevention">circuit-breaker-retry-budget-cascade-failure-prevention</a></p>
-    <p><a href="/articles/consumer-driven-contract-testing-pact-internal-apis">consumer-driven-contract-testing-pact-internal-apis</a></p>
-    <p><a href="/articles/container-vulnerability-scanning-ci-shift-left-security">container-vulnerability-scanning-ci-shift-left-security</a></p>
-    <p><a href="/articles/database-schema-migrations-continuous-deployment-zero-downtime">database-schema-migrations-continuous-deployment-zero-downtime</a></p>
-    <p><a href="/articles/dead-letter-queue-design-replay-debugging">dead-letter-queue-design-replay-debugging</a></p>
-    <p><a href="/articles/distributed-tracing-sampling-strategies-head-tail">distributed-tracing-sampling-strategies-head-tail</a></p>
-    <p><a href="/articles/eol-runtime-upgrade-dependency-hell-migration">eol-runtime-upgrade-dependency-hell-migration</a></p>
-    <p><a href="/articles/ephemeral-preview-environments-cost-control-cleanup">ephemeral-preview-environments-cost-control-cleanup</a></p>
-    <p><a href="/articles/flaky-test-diagnosis-race-conditions-e2e-stabilization">flaky-test-diagnosis-race-conditions-e2e-stabilization</a></p>
-    <p><a href="/articles/golden-paths-developer-experience-standardization-autonomy">golden-paths-developer-experience-standardization-autonomy</a></p>
-    <p><a href="/articles/grafana-dashboard-hygiene-pruning-actionable-metrics">grafana-dashboard-hygiene-pruning-actionable-metrics</a></p>
-    <p><a href="/articles/helm-release-management-drift-detection-debugging">helm-release-management-drift-detection-debugging</a></p>
-    <p><a href="/articles/idempotent-message-handlers-deduplication-retries">idempotent-message-handlers-deduplication-retries</a></p>
-    <p><a href="/articles/internal-cli-kubectl-terraform-wrapper-abstraction">internal-cli-kubectl-terraform-wrapper-abstraction</a></p>
-    <p><a href="/articles/internal-developer-portal-platform-self-service-actions">internal-developer-portal-platform-self-service-actions</a></p>
-    <p><a href="/articles/internal-platform-api-versioning-deprecation-breaking-changes">internal-platform-api-versioning-deprecation-breaking-changes</a></p>
-    <p><a href="/articles/kubernetes-cluster-upgrade-playbook-risk-reduction">kubernetes-cluster-upgrade-playbook-risk-reduction</a></p>
-    <p><a href="/articles/kubernetes-cost-optimization-resource-sizing-spot-instances">kubernetes-cost-optimization-resource-sizing-spot-instances</a></p>
-    <p><a href="/articles/kubernetes-decision-framework-when-not-to-use">kubernetes-decision-framework-when-not-to-use</a></p>
-    <p><a href="/articles/kubernetes-dns-debugging-ndots-coredns-troubleshooting">kubernetes-dns-debugging-ndots-coredns-troubleshooting</a></p>
-    <p><a href="/articles/kubernetes-hpa-autoscaling-metrics-tuning-latency">kubernetes-hpa-autoscaling-metrics-tuning-latency</a></p>
-    <p><a href="/articles/kubernetes-ingress-gateway-api-comparison-migration">kubernetes-ingress-gateway-api-comparison-migration</a></p>
-    <p><a href="/articles/kubernetes-multi-cluster-fleet-management-configuration">kubernetes-multi-cluster-fleet-management-configuration</a></p>
-    <p><a href="/articles/kubernetes-pod-disruption-budget-autoscaler-node-rotation">kubernetes-pod-disruption-budget-autoscaler-node-rotation</a></p>
-    <p><a href="/articles/kubernetes-pod-resource-requests-limits-qos-classes">kubernetes-pod-resource-requests-limits-qos-classes</a></p>
-    <p><a href="/articles/kubernetes-secrets-external-secrets-operator-csi-vault">kubernetes-secrets-external-secrets-operator-csi-vault</a></p>
-    <p><a href="/articles/legacy-code-testing-characterization-tests-seams">legacy-code-testing-characterization-tests-seams</a></p>
-    <p><a href="/articles/monorepo-affected-builds-remote-caching-ci-optimization">monorepo-affected-builds-remote-caching-ci-optimization</a></p>
-    <p><a href="/articles/mtls-certificate-rotation-service-mesh-authentication">mtls-certificate-rotation-service-mesh-authentication</a></p>
-    <p><a href="/articles/nginx-haproxy-reverse-proxy-production-tuning">nginx-haproxy-reverse-proxy-production-tuning</a></p>
-    <p><a href="/articles/on-call-rotation-small-teams-sustainable-coverage">on-call-rotation-small-teams-sustainable-coverage</a></p>
-    <p><a href="/articles/opa-conftest-policy-as-code-infrastructure-guardrails">opa-conftest-policy-as-code-infrastructure-guardrails</a></p>
-    <p><a href="/articles/openapi-spec-documentation-sdk-generation-validation">openapi-spec-documentation-sdk-generation-validation</a></p>
-    <p><a href="/articles/opentelemetry-span-design-granularity-overhead">opentelemetry-span-design-granularity-overhead</a></p>
-    <p><a href="/articles/performance-testing-load-models-benchmark-accuracy">performance-testing-load-models-benchmark-accuracy</a></p>
-    <p><a href="/articles/platform-architecture-control-plane-data-plane-separation">platform-architecture-control-plane-data-plane-separation</a></p>
-    <p><a href="/articles/platform-engineering-metrics-lead-time-developer-friction">platform-engineering-metrics-lead-time-developer-friction</a></p>
-    <p><a href="/articles/postgresql-connection-pooling-saturation-sizing">postgresql-connection-pooling-saturation-sizing</a></p>
-    <p><a href="/articles/private-networking-dns-routing-tls-debugging">private-networking-dns-routing-tls-debugging</a></p>
-    <p><a href="/articles/prometheus-high-cardinality-metrics-label-design">prometheus-high-cardinality-metrics-label-design</a></p>
-    <p><a href="/articles/rate-limiting-token-bucket-leaky-bucket-implementation">rate-limiting-token-bucket-leaky-bucket-implementation</a></p>
-    <p><a href="/articles/release-quality-gates-automated-deployment-validation">release-quality-gates-automated-deployment-validation</a></p>
-    <p><a href="/articles/reverse-engineering-documentation-legacy-systems">reverse-engineering-documentation-legacy-systems</a></p>
-    <p><a href="/articles/service-catalog-metadata-schema-ownership-tracking">service-catalog-metadata-schema-ownership-tracking</a></p>
-    <p><a href="/articles/service-decommissioning-scream-test-shutdown">service-decommissioning-scream-test-shutdown</a></p>
+    <p>
+      <a href="/articles/alert-fatigue-reduction-triage-actionable-alerts"
+        >alert-fatigue-reduction-triage-actionable-alerts</a>
+    </p>
+    <p>
+      <a href="/articles/api-deprecation-sunset-headers-consumer-migration"
+        >api-deprecation-sunset-headers-consumer-migration</a>
+    </p>
+    <p>
+      <a href="/articles/api-gateway-metrics-traces-logs-debugging"
+        >api-gateway-metrics-traces-logs-debugging</a>
+    </p>
+    <p>
+      <a href="/articles/api-usage-metering-quotas-cost-attribution"
+        >api-usage-metering-quotas-cost-attribution</a>
+    </p>
+    <p>
+      <a href="/articles/argocd-sync-failures-gitops-debugging-troubleshooting"
+        >argocd-sync-failures-gitops-debugging-troubleshooting</a>
+    </p>
+    <p>
+      <a href="/articles/availability-targets-five-nines-cost-benefit-analysis"
+        >availability-targets-five-nines-cost-benefit-analysis</a>
+    </p>
+    <p>
+      <a href="/articles/backpressure-load-shedding-admission-control-overload"
+        >backpressure-load-shedding-admission-control-overload</a>
+    </p>
+    <p>
+      <a href="/articles/blameless-postmortem-incident-analysis-systemic-causes"
+        >blameless-postmortem-incident-analysis-systemic-causes</a>
+    </p>
+    <p>
+      <a href="/articles/blue-green-canary-deployment-strategy-comparison"
+        >blue-green-canary-deployment-strategy-comparison</a>
+    </p>
+    <p>
+      <a href="/articles/cdn-edge-caching-cache-keys-vary-headers"
+        >cdn-edge-caching-cache-keys-vary-headers</a>
+    </p>
+    <p>
+      <a href="/articles/chaos-engineering-failure-injection-low-cost-experiments"
+        >chaos-engineering-failure-injection-low-cost-experiments</a>
+    </p>
+    <p>
+      <a href="/articles/ci-pipeline-caching-docker-layers-dependency-cache"
+        >ci-pipeline-caching-docker-layers-dependency-cache</a>
+    </p>
+    <p>
+      <a href="/articles/circuit-breaker-retry-budget-cascade-failure-prevention"
+        >circuit-breaker-retry-budget-cascade-failure-prevention</a>
+    </p>
+    <p>
+      <a href="/articles/consumer-driven-contract-testing-pact-internal-apis"
+        >consumer-driven-contract-testing-pact-internal-apis</a>
+    </p>
+    <p>
+      <a href="/articles/container-vulnerability-scanning-ci-shift-left-security"
+        >container-vulnerability-scanning-ci-shift-left-security</a>
+    </p>
+    <p>
+      <a href="/articles/database-schema-migrations-continuous-deployment-zero-downtime"
+        >database-schema-migrations-continuous-deployment-zero-downtime</a>
+    </p>
+    <p>
+      <a href="/articles/dead-letter-queue-design-replay-debugging"
+        >dead-letter-queue-design-replay-debugging</a>
+    </p>
+    <p>
+      <a href="/articles/distributed-tracing-sampling-strategies-head-tail"
+        >distributed-tracing-sampling-strategies-head-tail</a>
+    </p>
+    <p>
+      <a href="/articles/eol-runtime-upgrade-dependency-hell-migration"
+        >eol-runtime-upgrade-dependency-hell-migration</a>
+    </p>
+    <p>
+      <a href="/articles/ephemeral-preview-environments-cost-control-cleanup"
+        >ephemeral-preview-environments-cost-control-cleanup</a>
+    </p>
+    <p>
+      <a href="/articles/flaky-test-diagnosis-race-conditions-e2e-stabilization"
+        >flaky-test-diagnosis-race-conditions-e2e-stabilization</a>
+    </p>
+    <p>
+      <a href="/articles/golden-paths-developer-experience-standardization-autonomy"
+        >golden-paths-developer-experience-standardization-autonomy</a>
+    </p>
+    <p>
+      <a href="/articles/grafana-dashboard-hygiene-pruning-actionable-metrics"
+        >grafana-dashboard-hygiene-pruning-actionable-metrics</a>
+    </p>
+    <p>
+      <a href="/articles/helm-release-management-drift-detection-debugging"
+        >helm-release-management-drift-detection-debugging</a>
+    </p>
+    <p>
+      <a href="/articles/idempotent-message-handlers-deduplication-retries"
+        >idempotent-message-handlers-deduplication-retries</a>
+    </p>
+    <p>
+      <a href="/articles/internal-cli-kubectl-terraform-wrapper-abstraction"
+        >internal-cli-kubectl-terraform-wrapper-abstraction</a>
+    </p>
+    <p>
+      <a href="/articles/internal-developer-portal-platform-self-service-actions"
+        >internal-developer-portal-platform-self-service-actions</a>
+    </p>
+    <p>
+      <a href="/articles/internal-platform-api-versioning-deprecation-breaking-changes"
+        >internal-platform-api-versioning-deprecation-breaking-changes</a>
+    </p>
+    <p>
+      <a href="/articles/kubernetes-cluster-upgrade-playbook-risk-reduction"
+        >kubernetes-cluster-upgrade-playbook-risk-reduction</a>
+    </p>
+    <p>
+      <a href="/articles/kubernetes-cost-optimization-resource-sizing-spot-instances"
+        >kubernetes-cost-optimization-resource-sizing-spot-instances</a>
+    </p>
+    <p>
+      <a href="/articles/kubernetes-decision-framework-when-not-to-use"
+        >kubernetes-decision-framework-when-not-to-use</a>
+    </p>
+    <p>
+      <a href="/articles/kubernetes-dns-debugging-ndots-coredns-troubleshooting"
+        >kubernetes-dns-debugging-ndots-coredns-troubleshooting</a>
+    </p>
+    <p>
+      <a href="/articles/kubernetes-hpa-autoscaling-metrics-tuning-latency"
+        >kubernetes-hpa-autoscaling-metrics-tuning-latency</a>
+    </p>
+    <p>
+      <a href="/articles/kubernetes-ingress-gateway-api-comparison-migration"
+        >kubernetes-ingress-gateway-api-comparison-migration</a>
+    </p>
+    <p>
+      <a href="/articles/kubernetes-multi-cluster-fleet-management-configuration"
+        >kubernetes-multi-cluster-fleet-management-configuration</a>
+    </p>
+    <p>
+      <a href="/articles/kubernetes-pod-disruption-budget-autoscaler-node-rotation"
+        >kubernetes-pod-disruption-budget-autoscaler-node-rotation</a>
+    </p>
+    <p>
+      <a href="/articles/kubernetes-pod-resource-requests-limits-qos-classes"
+        >kubernetes-pod-resource-requests-limits-qos-classes</a>
+    </p>
+    <p>
+      <a href="/articles/kubernetes-secrets-external-secrets-operator-csi-vault"
+        >kubernetes-secrets-external-secrets-operator-csi-vault</a>
+    </p>
+    <p>
+      <a href="/articles/legacy-code-testing-characterization-tests-seams"
+        >legacy-code-testing-characterization-tests-seams</a>
+    </p>
+    <p>
+      <a href="/articles/monorepo-affected-builds-remote-caching-ci-optimization"
+        >monorepo-affected-builds-remote-caching-ci-optimization</a>
+    </p>
+    <p>
+      <a href="/articles/mtls-certificate-rotation-service-mesh-authentication"
+        >mtls-certificate-rotation-service-mesh-authentication</a>
+    </p>
+    <p>
+      <a href="/articles/nginx-haproxy-reverse-proxy-production-tuning"
+        >nginx-haproxy-reverse-proxy-production-tuning</a>
+    </p>
+    <p>
+      <a href="/articles/on-call-rotation-small-teams-sustainable-coverage"
+        >on-call-rotation-small-teams-sustainable-coverage</a>
+    </p>
+    <p>
+      <a href="/articles/opa-conftest-policy-as-code-infrastructure-guardrails"
+        >opa-conftest-policy-as-code-infrastructure-guardrails</a>
+    </p>
+    <p>
+      <a href="/articles/openapi-spec-documentation-sdk-generation-validation"
+        >openapi-spec-documentation-sdk-generation-validation</a>
+    </p>
+    <p>
+      <a href="/articles/opentelemetry-span-design-granularity-overhead"
+        >opentelemetry-span-design-granularity-overhead</a>
+    </p>
+    <p>
+      <a href="/articles/performance-testing-load-models-benchmark-accuracy"
+        >performance-testing-load-models-benchmark-accuracy</a>
+    </p>
+    <p>
+      <a href="/articles/platform-architecture-control-plane-data-plane-separation"
+        >platform-architecture-control-plane-data-plane-separation</a>
+    </p>
+    <p>
+      <a href="/articles/platform-engineering-metrics-lead-time-developer-friction"
+        >platform-engineering-metrics-lead-time-developer-friction</a>
+    </p>
+    <p>
+      <a href="/articles/postgresql-connection-pooling-saturation-sizing"
+        >postgresql-connection-pooling-saturation-sizing</a>
+    </p>
+    <p>
+      <a href="/articles/private-networking-dns-routing-tls-debugging"
+        >private-networking-dns-routing-tls-debugging</a>
+    </p>
+    <p>
+      <a href="/articles/prometheus-high-cardinality-metrics-label-design"
+        >prometheus-high-cardinality-metrics-label-design</a>
+    </p>
+    <p>
+      <a href="/articles/rate-limiting-token-bucket-leaky-bucket-implementation"
+        >rate-limiting-token-bucket-leaky-bucket-implementation</a>
+    </p>
+    <p>
+      <a href="/articles/release-quality-gates-automated-deployment-validation"
+        >release-quality-gates-automated-deployment-validation</a>
+    </p>
+    <p>
+      <a href="/articles/reverse-engineering-documentation-legacy-systems"
+        >reverse-engineering-documentation-legacy-systems</a>
+    </p>
+    <p>
+      <a href="/articles/service-catalog-metadata-schema-ownership-tracking"
+        >service-catalog-metadata-schema-ownership-tracking</a>
+    </p>
+    <p>
+      <a href="/articles/service-decommissioning-scream-test-shutdown"
+        >service-decommissioning-scream-test-shutdown</a>
+    </p>
     <p><a href="/articles/slo-error-budget-practical-guide">slo-error-budget-practical-guide</a></p>
-    <p><a href="/articles/slsa-build-provenance-artifact-signing-supply-chain">slsa-build-provenance-artifact-signing-supply-chain</a></p>
-    <p><a href="/articles/strangler-fig-migration-complete-guide">strangler-fig-migration-complete-guide</a></p>
-    <p><a href="/articles/structured-logging-correlation-ids-log-schema-design">structured-logging-correlation-ids-log-schema-design</a></p>
-    <p><a href="/articles/symptom-based-alerting-runbooks-alert-design">symptom-based-alerting-runbooks-alert-design</a></p>
-    <p><a href="/articles/synthetic-test-data-pii-anonymization-fixtures">synthetic-test-data-pii-anonymization-fixtures</a></p>
-    <p><a href="/articles/terraform-module-design-defaults-versioning-interfaces">terraform-module-design-defaults-versioning-interfaces</a></p>
-    <p><a href="/articles/terraform-state-locking-corruption-recovery-backend">terraform-state-locking-corruption-recovery-backend</a></p>
-    <p><a href="/articles/workload-identity-federation-keyless-cloud-authentication">workload-identity-federation-keyless-cloud-authentication</a></p>
+    <p>
+      <a href="/articles/slsa-build-provenance-artifact-signing-supply-chain"
+        >slsa-build-provenance-artifact-signing-supply-chain</a>
+    </p>
+    <p>
+      <a href="/articles/strangler-fig-migration-complete-guide"
+        >strangler-fig-migration-complete-guide</a>
+    </p>
+    <p>
+      <a href="/articles/structured-logging-correlation-ids-log-schema-design"
+        >structured-logging-correlation-ids-log-schema-design</a>
+    </p>
+    <p>
+      <a href="/articles/symptom-based-alerting-runbooks-alert-design"
+        >symptom-based-alerting-runbooks-alert-design</a>
+    </p>
+    <p>
+      <a href="/articles/synthetic-test-data-pii-anonymization-fixtures"
+        >synthetic-test-data-pii-anonymization-fixtures</a>
+    </p>
+    <p>
+      <a href="/articles/terraform-module-design-defaults-versioning-interfaces"
+        >terraform-module-design-defaults-versioning-interfaces</a>
+    </p>
+    <p>
+      <a href="/articles/terraform-state-locking-corruption-recovery-backend"
+        >terraform-state-locking-corruption-recovery-backend</a>
+    </p>
+    <p>
+      <a href="/articles/workload-identity-federation-keyless-cloud-authentication"
+        >workload-identity-federation-keyless-cloud-authentication</a>
+    </p>
   </main>
 </BaseLayout>
diff --git a/src/pages/testing/comps/lists.astro b/src/pages/testing/comps/lists.astro
index 066c52ece..2bd77ff5d 100644
--- a/src/pages/testing/comps/lists.astro
+++ b/src/pages/testing/comps/lists.astro
@@ -14,29 +14,29 @@ const path = '/testing/comps/lists'
     <List
       variant="accent-border-left-list"
       classes={{
-        li: "text-content-offset",
-        em: "text-content-active",
+        li: 'text-content-offset',
+        em: 'text-content-active',
       }}
       items={[
         {
-          lead: "Is the gateway healthy?",
-          text: "Request rate, error rate, and latency percentiles answer this instantly.",
-          color: "border-blue-500",
+          lead: 'Is the gateway healthy?',
+          text: 'Request rate, error rate, and latency percentiles answer this instantly.',
+          color: 'border-blue-500',
         },
         {
-          lead: "Is a specific backend unhealthy?",
-          text: "Per-upstream metrics and circuit breaker state tell you.",
-          color: "border-purple-500",
+          lead: 'Is a specific backend unhealthy?',
+          text: 'Per-upstream metrics and circuit breaker state tell you.',
+          color: 'border-purple-500',
         },
         {
-          lead: "Is a specific consumer affected?",
-          text: "Consumer-specific labels let you slice the data.",
-          color: "border-green-500",
+          lead: 'Is a specific consumer affected?',
+          text: 'Consumer-specific labels let you slice the data.',
+          color: 'border-green-500',
         },
         {
-          lead: "What happened to this specific request?",
-          text: "Trace ID and request ID correlation connect all the pieces.",
-          color: "border-orange-500",
+          lead: 'What happened to this specific request?',
+          text: 'Trace ID and request ID correlation connect all the pieces.',
+          color: 'border-orange-500',
         },
       ]}
     />
@@ -46,24 +46,24 @@ const path = '/testing/comps/lists'
       variant="badge-list"
       items={[
         {
-          title: "Query",
-          lead: "Is the gateway healthy?",
-          text: "Request rate, error rate, and latency percentiles answer this instantly.",
+          title: 'Query',
+          lead: 'Is the gateway healthy?',
+          text: 'Request rate, error rate, and latency percentiles answer this instantly.',
         },
         {
-          title: "Query",
-          lead: "Is a specific backend unhealthy?",
-          text: "Per-upstream metrics and circuit breaker state tell you.",
+          title: 'Query',
+          lead: 'Is a specific backend unhealthy?',
+          text: 'Per-upstream metrics and circuit breaker state tell you.',
         },
         {
-          title: "Query",
-          lead: "Is a specific consumer affected?",
-          text: "Consumer-specific labels let you slice the data.",
+          title: 'Query',
+          lead: 'Is a specific consumer affected?',
+          text: 'Consumer-specific labels let you slice the data.',
         },
         {
-          title: "Query",
-          lead: "What happened to this specific request?",
-          text: "Trace ID and request ID correlation connect all the pieces.",
+          title: 'Query',
+          lead: 'What happened to this specific request?',
+          text: 'Trace ID and request ID correlation connect all the pieces.',
         },
       ]}
     />
@@ -73,20 +73,20 @@ const path = '/testing/comps/lists'
       variant="card-grid-list"
       items={[
         {
-          lead: "Is the gateway healthy?",
-          text: "Request rate, error rate, and latency percentiles answer this instantly.",
+          lead: 'Is the gateway healthy?',
+          text: 'Request rate, error rate, and latency percentiles answer this instantly.',
         },
         {
-          lead: "Is a specific backend unhealthy?",
-          text: "Per-upstream metrics and circuit breaker state tell you.",
+          lead: 'Is a specific backend unhealthy?',
+          text: 'Per-upstream metrics and circuit breaker state tell you.',
         },
         {
-          lead: "Is a specific consumer affected?",
-          text: "Consumer-specific labels let you slice the data.",
+          lead: 'Is a specific consumer affected?',
+          text: 'Consumer-specific labels let you slice the data.',
         },
         {
-          lead: "What happened to this specific request?",
-          text: "Trace ID and request ID correlation connect all the pieces.",
+          lead: 'What happened to this specific request?',
+          text: 'Trace ID and request ID correlation connect all the pieces.',
         },
       ]}
     />
@@ -96,20 +96,20 @@ const path = '/testing/comps/lists'
       variant="check-icons-list"
       items={[
         {
-          lead: "Is the gateway healthy?",
-          text: "Request rate, error rate, and latency percentiles answer this instantly.",
+          lead: 'Is the gateway healthy?',
+          text: 'Request rate, error rate, and latency percentiles answer this instantly.',
         },
         {
-          lead: "Is a specific backend unhealthy?",
-          text: "Per-upstream metrics and circuit breaker state tell you.",
+          lead: 'Is a specific backend unhealthy?',
+          text: 'Per-upstream metrics and circuit breaker state tell you.',
         },
         {
-          lead: "Is a specific consumer affected?",
-          text: "Consumer-specific labels let you slice the data.",
+          lead: 'Is a specific consumer affected?',
+          text: 'Consumer-specific labels let you slice the data.',
         },
         {
-          lead: "What happened to this specific request?",
-          text: "Trace ID and request ID correlation connect all the pieces.",
+          lead: 'What happened to this specific request?',
+          text: 'Trace ID and request ID correlation connect all the pieces.',
         },
       ]}
     />
@@ -119,16 +119,16 @@ const path = '/testing/comps/lists'
       variant="check-icons-list"
       items={[
         {
-          text: "Request rate, error rate, and latency percentiles answer this instantly.",
+          text: 'Request rate, error rate, and latency percentiles answer this instantly.',
         },
         {
-          text: "Per-upstream metrics and circuit breaker state tell you.",
+          text: 'Per-upstream metrics and circuit breaker state tell you.',
         },
         {
-          text: "Consumer-specific labels let you slice the data.",
+          text: 'Consumer-specific labels let you slice the data.',
         },
         {
-          text: "Trace ID and request ID correlation connect all the pieces.",
+          text: 'Trace ID and request ID correlation connect all the pieces.',
         },
       ]}
     />
@@ -138,20 +138,20 @@ const path = '/testing/comps/lists'
       variant="chevron-list"
       items={[
         {
-          lead: "Is the gateway healthy?",
-          text: "Request rate, error rate, and latency percentiles answer this instantly.",
+          lead: 'Is the gateway healthy?',
+          text: 'Request rate, error rate, and latency percentiles answer this instantly.',
         },
         {
-          lead: "Is a specific backend unhealthy?",
-          text: "Per-upstream metrics and circuit breaker state tell you.",
+          lead: 'Is a specific backend unhealthy?',
+          text: 'Per-upstream metrics and circuit breaker state tell you.',
         },
         {
-          lead: "Is a specific consumer affected?",
-          text: "Consumer-specific labels let you slice the data.",
+          lead: 'Is a specific consumer affected?',
+          text: 'Consumer-specific labels let you slice the data.',
         },
         {
-          lead: "What happened to this specific request?",
-          text: "Trace ID and request ID correlation connect all the pieces.",
+          lead: 'What happened to this specific request?',
+          text: 'Trace ID and request ID correlation connect all the pieces.',
         },
       ]}
     />
@@ -161,20 +161,20 @@ const path = '/testing/comps/lists'
       variant="colored-marker-list"
       items={[
         {
-          text: "With trusted service providers who assist in operating our website",
-          color: "bg-blue-600",
+          text: 'With trusted service providers who assist in operating our website',
+          color: 'bg-blue-600',
         },
         {
-          text: "When required by law or to protect our legal rights",
-          color: "bg-green-600",
+          text: 'When required by law or to protect our legal rights',
+          color: 'bg-green-600',
         },
         {
-          text: "In connection with a business transfer or merger",
-          color: "bg-purple-600",
+          text: 'In connection with a business transfer or merger',
+          color: 'bg-purple-600',
         },
         {
-          text: "With your explicit consent",
-          color: "bg-orange-500",
+          text: 'With your explicit consent',
+          color: 'bg-orange-500',
         },
       ]}
     />
@@ -184,20 +184,20 @@ const path = '/testing/comps/lists'
       variant="numbered-with-background-list"
       items={[
         {
-          lead: "Is the gateway healthy?",
-          text: "Request rate, error rate, and latency percentiles answer this instantly.",
+          lead: 'Is the gateway healthy?',
+          text: 'Request rate, error rate, and latency percentiles answer this instantly.',
         },
         {
-          lead: "Is a specific backend unhealthy?",
-          text: "Per-upstream metrics and circuit breaker state tell you.",
+          lead: 'Is a specific backend unhealthy?',
+          text: 'Per-upstream metrics and circuit breaker state tell you.',
         },
         {
-          lead: "Is a specific consumer affected?",
-          text: "Consumer-specific labels let you slice the data.",
+          lead: 'Is a specific consumer affected?',
+          text: 'Consumer-specific labels let you slice the data.',
         },
         {
-          lead: "What happened to this specific request?",
-          text: "Trace ID and request ID correlation connect all the pieces.",
+          lead: 'What happened to this specific request?',
+          text: 'Trace ID and request ID correlation connect all the pieces.',
         },
       ]}
     />
@@ -207,24 +207,24 @@ const path = '/testing/comps/lists'
       variant="plain-icon-list"
       items={[
         {
-          text: "Your name and email address",
-          icon: "avatar",
-          color: "text-blue-600",
+          text: 'Your name and email address',
+          icon: 'avatar',
+          color: 'text-blue-600',
         },
         {
-          text: "Company name and contact information",
-          icon: "company",
-          color: "text-purple-600",
+          text: 'Company name and contact information',
+          icon: 'company',
+          color: 'text-purple-600',
         },
         {
-          text: "Project details and requirements you share with us",
-          icon: "clipboard",
-          color: "text-green-600",
+          text: 'Project details and requirements you share with us',
+          icon: 'clipboard',
+          color: 'text-green-600',
         },
         {
-          text: "Any files or documents you upload through our contact form",
-          icon: "download",
-          color: "text-secondary",
+          text: 'Any files or documents you upload through our contact form',
+          icon: 'download',
+          color: 'text-secondary',
         },
       ]}
     />
@@ -234,20 +234,20 @@ const path = '/testing/comps/lists'
       variant="side-by-side-list"
       items={[
         {
-          lead: "Is the gateway healthy?",
-          text: "Request rate, error rate, and latency percentiles answer this instantly.",
+          lead: 'Is the gateway healthy?',
+          text: 'Request rate, error rate, and latency percentiles answer this instantly.',
         },
         {
-          lead: "Is a specific backend unhealthy?",
-          text: "Per-upstream metrics and circuit breaker state tell you.",
+          lead: 'Is a specific backend unhealthy?',
+          text: 'Per-upstream metrics and circuit breaker state tell you.',
         },
         {
-          lead: "Is a specific consumer affected?",
-          text: "Consumer-specific labels let you slice the data.",
+          lead: 'Is a specific consumer affected?',
+          text: 'Consumer-specific labels let you slice the data.',
         },
         {
-          lead: "What happened to this specific request?",
-          text: "Trace ID and request ID correlation connect all the pieces.",
+          lead: 'What happened to this specific request?',
+          text: 'Trace ID and request ID correlation connect all the pieces.',
         },
       ]}
     />
@@ -257,25 +257,25 @@ const path = '/testing/comps/lists'
       variant="three-column-icon-list"
       items={[
         {
-          title: "Query",
-          text: "Is the gateway healthy? Request rate, error rate, and latency percentiles answer this instantly.",
-          icon: "chart",
-          color: "primary",
-          bgColor: "primary-inverse",
+          title: 'Query',
+          text: 'Is the gateway healthy? Request rate, error rate, and latency percentiles answer this instantly.',
+          icon: 'chart',
+          color: 'primary',
+          bgColor: 'primary-inverse',
         },
         {
-          title: "Query",
-          text: "Is a specific backend unhealthy? Per-upstream metrics and circuit breaker state tell you.",
-          icon: "warning",
-          color: "warning",
-          bgColor: "warning-inverse",
+          title: 'Query',
+          text: 'Is a specific backend unhealthy? Per-upstream metrics and circuit breaker state tell you.',
+          icon: 'warning',
+          color: 'warning',
+          bgColor: 'warning-inverse',
         },
         {
-          title: "Query",
-          text: "Is a specific consumer affected? Consumer-specific labels let you slice the data.",
-          icon: "info",
-          color: "info",
-          bgColor: "info-inverse",
+          title: 'Query',
+          text: 'Is a specific consumer affected? Consumer-specific labels let you slice the data.',
+          icon: 'info',
+          color: 'info',
+          bgColor: 'info-inverse',
         },
       ]}
     />
@@ -285,20 +285,20 @@ const path = '/testing/comps/lists'
       variant="timeline-list"
       items={[
         {
-          lead: "Is the gateway healthy?",
-          text: "Request rate, error rate, and latency percentiles answer this instantly.",
+          lead: 'Is the gateway healthy?',
+          text: 'Request rate, error rate, and latency percentiles answer this instantly.',
         },
         {
-          lead: "Is a specific backend unhealthy?",
-          text: "Per-upstream metrics and circuit breaker state tell you.",
+          lead: 'Is a specific backend unhealthy?',
+          text: 'Per-upstream metrics and circuit breaker state tell you.',
         },
         {
-          lead: "Is a specific consumer affected?",
-          text: "Consumer-specific labels let you slice the data.",
+          lead: 'Is a specific consumer affected?',
+          text: 'Consumer-specific labels let you slice the data.',
         },
         {
-          lead: "What happened to this specific request?",
-          text: "Trace ID and request ID correlation connect all the pieces.",
+          lead: 'What happened to this specific request?',
+          text: 'Trace ID and request ID correlation connect all the pieces.',
         },
       ]}
     />
@@ -308,16 +308,16 @@ const path = '/testing/comps/lists'
       variant="two-column-check-icons-list"
       items={[
         {
-          text: "Actionable strategy framework",
+          text: 'Actionable strategy framework',
         },
         {
-          text: "Expert implementation guidance",
+          text: 'Expert implementation guidance',
         },
         {
-          text: "Checklist and practical next steps",
+          text: 'Checklist and practical next steps',
         },
         {
-          text: "Download-ready reference material",
+          text: 'Download-ready reference material',
         },
       ]}
     />
@@ -327,32 +327,32 @@ const path = '/testing/comps/lists'
       variant="two-column-icon-list"
       items={[
         {
-          title: "Query",
-          text: "Is the gateway healthy? Request rate, error rate, and latency percentiles answer this instantly.",
-          icon: "chart",
-          color: "primary",
-          bgColor: "primary-inverse",
+          title: 'Query',
+          text: 'Is the gateway healthy? Request rate, error rate, and latency percentiles answer this instantly.',
+          icon: 'chart',
+          color: 'primary',
+          bgColor: 'primary-inverse',
         },
         {
-          title: "Query",
-          text: "Is a specific backend unhealthy? Per-upstream metrics and circuit breaker state tell you.",
-          icon: "warning",
-          color: "warning",
-          bgColor: "warning-inverse",
+          title: 'Query',
+          text: 'Is a specific backend unhealthy? Per-upstream metrics and circuit breaker state tell you.',
+          icon: 'warning',
+          color: 'warning',
+          bgColor: 'warning-inverse',
         },
         {
-          title: "Query",
-          text: "Is a specific consumer affected? Consumer-specific labels let you slice the data.",
-          icon: "info",
-          color: "info",
-          bgColor: "info-inverse",
+          title: 'Query',
+          text: 'Is a specific consumer affected? Consumer-specific labels let you slice the data.',
+          icon: 'info',
+          color: 'info',
+          bgColor: 'info-inverse',
         },
         {
-          title: "Query",
-          text: "What happened to this specific request? Trace ID and request ID correlation connect all the pieces.",
-          icon: "conversation",
-          color: "secondary",
-          bgColor: "secondary-inverse",
+          title: 'Query',
+          text: 'What happened to this specific request? Trace ID and request ID correlation connect all the pieces.',
+          icon: 'conversation',
+          color: 'secondary',
+          bgColor: 'secondary-inverse',
         },
       ]}
     />
@@ -362,20 +362,20 @@ const path = '/testing/comps/lists'
       variant="zebra-list"
       items={[
         {
-          lead: "Is the gateway healthy?",
-          text: "Request rate, error rate, and latency percentiles answer this instantly.",
+          lead: 'Is the gateway healthy?',
+          text: 'Request rate, error rate, and latency percentiles answer this instantly.',
         },
         {
-          lead: "Is a specific backend unhealthy?",
-          text: "Per-upstream metrics and circuit breaker state tell you.",
+          lead: 'Is a specific backend unhealthy?',
+          text: 'Per-upstream metrics and circuit breaker state tell you.',
         },
         {
-          lead: "Is a specific consumer affected?",
-          text: "Consumer-specific labels let you slice the data.",
+          lead: 'Is a specific consumer affected?',
+          text: 'Consumer-specific labels let you slice the data.',
         },
         {
-          lead: "What happened to this specific request?",
-          text: "Trace ID and request ID correlation connect all the pieces.",
+          lead: 'What happened to this specific request?',
+          text: 'Trace ID and request ID correlation connect all the pieces.',
         },
       ]}
     />
diff --git a/src/pages/testing/comps/scratchpad.astro b/src/pages/testing/comps/scratchpad.astro
index a0a239fdc..3ca9f7deb 100644
--- a/src/pages/testing/comps/scratchpad.astro
+++ b/src/pages/testing/comps/scratchpad.astro
@@ -7,7 +7,5 @@ const path = '/testing/comps/scratchpad'
 ---
 
 <BaseLayout pageDescription={pageDescription} noindex={true} pageTitle={pageTitle} path={path}>
-  <div style="margin-top: 64px;">
-
-  </div>
+  <div style="margin-top: 64px;"></div>
 </BaseLayout>
diff --git a/src/pages/testing/diagram.astro b/src/pages/testing/diagram.astro
index fa1e7c8df..f6ce2032d 100644
--- a/src/pages/testing/diagram.astro
+++ b/src/pages/testing/diagram.astro
@@ -19,12 +19,15 @@ const pagePath = '/testing/diagram'
       <p class="text-content-active">{fixtureDescription}</p>
     </header>
 
-    <article class="w-full max-w-3xl space-y-6 rounded-lg border border-trim bg-page-offset p-6 shadow-sm">
+    <article
+      class="w-full max-w-3xl space-y-6 rounded-lg border border-trim bg-page-offset p-6 shadow-sm"
+    >
       <div class="space-y-2">
         <p class="text-xs uppercase tracking-wider text-content-active">Fixture Diagram</p>
         <h2 class="text-2xl font-semibold">Service dependency flow</h2>
         <p class="text-content-active">
-          Stable diagram metadata for validating the figure caption, disclosure summary, and enlarged preview.
+          Stable diagram metadata for validating the figure caption, disclosure summary, and
+          enlarged preview.
         </p>
       </div>
 
@@ -41,4 +44,4 @@ const pagePath = '/testing/diagram'
       </DiagramComponent>
     </article>
   </section>
-</BaseLayout>
\ No newline at end of file
+</BaseLayout>
diff --git a/src/pages/testing/emails/acknowledgement-html.astro b/src/pages/testing/emails/acknowledgement-html.astro
index 6f0e3c221..846685a95 100644
--- a/src/pages/testing/emails/acknowledgement-html.astro
+++ b/src/pages/testing/emails/acknowledgement-html.astro
@@ -15,4 +15,4 @@ const { html } = await compileEmailTemplate(acknowledgementTemplate, {
 })
 ---
 
-<Fragment set:html={html} />
\ No newline at end of file
+<Fragment set:html={html} />
diff --git a/src/pages/testing/emails/acknowledgement-text.astro b/src/pages/testing/emails/acknowledgement-text.astro
index 541aa6381..ba821f3cb 100644
--- a/src/pages/testing/emails/acknowledgement-text.astro
+++ b/src/pages/testing/emails/acknowledgement-text.astro
@@ -15,4 +15,4 @@ const { text } = await compileEmailTemplate(acknowledgementTemplate, {
 })
 ---
 
-<pre>{text}</pre>
\ No newline at end of file
+<pre>{text}</pre>
diff --git a/src/pages/testing/emails/index.astro b/src/pages/testing/emails/index.astro
index e0fb49b79..039bc5049 100644
--- a/src/pages/testing/emails/index.astro
+++ b/src/pages/testing/emails/index.astro
@@ -78,7 +78,9 @@ const emailPreviewLinks = [
         {
           emailPreviewLinks.map(({ description, href, label }) => (
             <li class="space-y-1">
-              <a class="text-lg font-semibold text-link hover:text-link-hover" href={href}>{label}</a>
+              <a class="text-lg font-semibold text-link hover:text-link-hover" href={href}>
+                {label}
+              </a>
               <p class="text-sm text-content-active">{description}</p>
             </li>
           ))
@@ -86,4 +88,4 @@ const emailPreviewLinks = [
       </ul>
     </section>
   </section>
-</BaseLayout>
\ No newline at end of file
+</BaseLayout>