diff --git a/.github/workflows/setup_and_build.yml b/.github/workflows/setup_and_build.yml
index 45ec5ba38f..0cb7199f26 100644
--- a/.github/workflows/setup_and_build.yml
+++ b/.github/workflows/setup_and_build.yml
@@ -30,6 +30,10 @@ jobs:
             ${{ runner.os }}-yarn-
       - name: Install dependencies
         run: yarn install --immutable
+      - name: Typecheck
+        run: yarn typecheck
+      - name: Lint
+        run: yarn lint
       - name: Build
         run: yarn build
       - name: Upload artifact
diff --git a/package.json b/package.json
index 4effdc3664..90ffcdcc6b 100644
--- a/package.json
+++ b/package.json
@@ -42,9 +42,10 @@
     "@typescript-eslint/parser": "^5.48.2",
     "eslint": "^8.32.0",
     "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-prettier": "^5.5.6",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.0",
-    "prettier": "2.8.8",
+    "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.8.1",
     "tailwind-scrollbar": "^3.0.0",
     "typescript": "^4.9.4"
diff --git a/src/components/content/BasicResourcesBox/data.ts b/src/components/content/BasicResourcesBox/data.ts
index 2f92ba124a..ac2668d786 100644
--- a/src/components/content/BasicResourcesBox/data.ts
+++ b/src/components/content/BasicResourcesBox/data.ts
@@ -1,22 +1,22 @@
 const resources = {
-    title: 'Basic Resources',
-    buttons: [
-      {
-        text: 'Installation Instructions',
-        path: 'docs/installation',
-        icon: 'fa6-solid:book',
-      },
-      {
-        text: 'Documentation',
-        path: 'https://docs.podman.io/en/latest/',
-        icon: 'fa6-solid:book',
-      },
-      {
-        text: 'Podman Troubleshooting Guide',
-        path: 'https://github.com/containers/podman/blob/main/troubleshooting.md',
-        icon: 'fa6-solid:book',
-      },
-    ],
-  };
+  title: 'Basic Resources',
+  buttons: [
+    {
+      text: 'Installation Instructions',
+      path: 'docs/installation',
+      icon: 'fa6-solid:book',
+    },
+    {
+      text: 'Documentation',
+      path: 'https://docs.podman.io/en/latest/',
+      icon: 'fa6-solid:book',
+    },
+    {
+      text: 'Podman Troubleshooting Guide',
+      path: 'https://github.com/containers/podman/blob/main/troubleshooting.md',
+      icon: 'fa6-solid:book',
+    },
+  ],
+};
 
-  export { resources };
\ No newline at end of file
+export { resources };
diff --git a/src/components/content/BasicResourcesBox/index.tsx b/src/components/content/BasicResourcesBox/index.tsx
index a865245b5c..10268b7b30 100644
--- a/src/components/content/BasicResourcesBox/index.tsx
+++ b/src/components/content/BasicResourcesBox/index.tsx
@@ -15,7 +15,7 @@ const BasicResourcesBox = () => {
               <li key={index}>
                 <a
                   href={button.path}
-                  className="no-underline hover:no-underline leading-none mx-auto flex h-32 max-w-lg flex-col items-center justify-center gap-4 rounded-md bg-gray-100 p-4 text-center text-purple-700 underline-offset-4 transition duration-150 ease-linear hover:bg-purple-700 hover:text-purple-50 hover:shadow-md dark:bg-gray-700 dark:hover:bg-purple-900 dark:hover:text-white lg:h-auto lg:flex-row xl:justify-start">
+                  className="mx-auto flex h-32 max-w-lg flex-col items-center justify-center gap-4 rounded-md bg-gray-100 p-4 text-center leading-none text-purple-700 no-underline underline-offset-4 transition duration-150 ease-linear hover:bg-purple-700 hover:text-purple-50 hover:no-underline hover:shadow-md dark:bg-gray-700 dark:hover:bg-purple-900 dark:hover:text-white lg:h-auto lg:flex-row xl:justify-start">
                   <span className="text-left">{button.text}</span>
                   <Icon icon={button.icon} className="order-first hidden lg:block" />
                 </a>
diff --git a/src/components/content/CodeExampleSection/data.ts b/src/components/content/CodeExampleSection/data.ts
index 9e46eeb91d..23599c49d8 100644
--- a/src/components/content/CodeExampleSection/data.ts
+++ b/src/components/content/CodeExampleSection/data.ts
@@ -1,5 +1,5 @@
 const searchExample = {
-  command: `$ podman search httpd`,
+  command: '$ podman search httpd',
   // prettier-ignore
   code: ` 
   INDEX       NAME                                  DESCRIPTION                    STARS OFFICIAL AUTOMATED
@@ -13,10 +13,10 @@ const searchExample = {
 
 
 `,
-  label: `Podman can search for images on remote registries with some simple keywords.`,
+  label: 'Podman can search for images on remote registries with some simple keywords.',
 };
 const searchFilterExample = {
-  command: `$ podman search httpd --filter=is-official`,
+  command: '$ podman search httpd --filter=is-official',
   // prettier-ignore
   code:`
   INDEX       NAME                                  DESCRIPTION                    STARS OFFICIAL AUTOMATED
@@ -37,19 +37,20 @@ const searchFilterExample = {
 
 
 `,
-  label: `You can also enhance your search with filters.`,
-  extra: `Downloading (pulling) an image is easy, too.`,
+  label: 'You can also enhance your search with filters.',
+  extra: 'Downloading (pulling) an image is easy, too.',
 };
 const imagesExample = {
-  command: `$ podman images`,
+  command: '$ podman images',
   // prettier-ignore
   code:`
   REPOSITORY               TAG         IMAGE ID      CREATED       SIZE
   docker.io/library/httpd  latest      d294bb32c207  12 hours ago  148 MB
   
 `,
-  label: `Podman can search for images on remote registries with some simple keywords.`,
-  extra: `**Note**: Podman searches in different registries. Therefore it is recommend to use the full image name (docker.io/library/httpd instead of httpd) to ensure that you are using the correct image.`,
+  label: 'Podman can search for images on remote registries with some simple keywords.',
+  extra:
+    '**Note**: Podman searches in different registries. Therefore it is recommend to use the full image name (docker.io/library/httpd instead of httpd) to ensure that you are using the correct image.',
 };
 
 export { searchExample, searchFilterExample, imagesExample };
diff --git a/src/components/content/FeaturesCarousel/index.tsx b/src/components/content/FeaturesCarousel/index.tsx
index 38096ed7d6..b5cb42a7af 100644
--- a/src/components/content/FeaturesCarousel/index.tsx
+++ b/src/components/content/FeaturesCarousel/index.tsx
@@ -7,8 +7,7 @@ const Tab = (props): JSX.Element => {
   return (
     <button
       onClick={method}
-      className={`rounded-lg p-4 shadow-sm transition duration-150 hover:bg-purple-700 hover:text-white dark:hover:bg-purple-900 dark:hover:text-gray-50 md:h-36 md:w-56
-      ${
+      className={`rounded-lg p-4 shadow-sm transition duration-150 hover:bg-purple-700 hover:text-white dark:hover:bg-purple-900 dark:hover:text-gray-50 md:h-36 md:w-56 ${
         isActive
           ? 'bg-gradient-radial from-purple-500 to-purple-700 text-white dark:from-purple-700 dark:to-purple-900 dark:shadow-purple-900'
           : '0 bg-white text-gray-700 dark:bg-gray-700 dark:text-gray-300 dark:shadow-gray-700'
@@ -37,14 +36,14 @@ const TabContent = (props): JSX.Element => {
               isActive % 2 === 0
                 ? 'text-white dark:text-white'
                 : isActive === 1
-                ? 'text-blue-700 dark:text-purple-500'
-                : 'text-purple-700 dark:text-purple-500'
+                  ? 'text-blue-700 dark:text-purple-500'
+                  : 'text-purple-700 dark:text-purple-500'
             }`}>
             {title}
           </h3>
           <ul className="my-4 lg:my-12">
             {commands.map((command, index) => (
-              <li key={index} className={`font-mono  ${isActive == 2 ? 'text-white' : 'text-blue-500'}`}>
+              <li key={index} className={`font-mono ${isActive == 2 ? 'text-white' : 'text-blue-500'}`}>
                 {command}
               </li>
             ))}
@@ -80,8 +79,8 @@ function FeaturesCarousel() {
           activeTabIndex % 2 === 1
             ? 'bg-white dark:bg-gray-900 dark:bg-gradient-to-b dark:from-purple-900 dark:to-purple-900/50'
             : activeTabIndex === 2
-            ? 'bg-gradient-to-br from-blue-300 via-blue-500 to-blue-900 dark:from-blue-900 dark:to-gray-700/50'
-            : 'bg-gradient-to-br from-purple-300 via-purple-700 to-purple-900'
+              ? 'bg-gradient-to-br from-blue-300 via-blue-500 to-blue-900 dark:from-blue-900 dark:to-gray-700/50'
+              : 'bg-gradient-to-br from-purple-300 via-purple-700 to-purple-900'
         }`}>
         <div className="space-between container flex">
           <button
@@ -90,7 +89,7 @@ function FeaturesCarousel() {
             aria-label="Previous feature">
             <Icon
               icon="fa-solid:arrow-circle-left"
-              className={`text-3xl transition duration-150 ease-linear hover:opacity-50 dark:hover:opacity-50  ${
+              className={`text-3xl transition duration-150 ease-linear hover:opacity-50 dark:hover:opacity-50 ${
                 activeTabIndex % 2 === 0 ? 'text-white' : 'text-purple-700 dark:text-gray-50'
               }`}
             />
diff --git a/src/components/content/TestimonialSection/index.tsx b/src/components/content/TestimonialSection/index.tsx
index 0fe59ce2d8..827c7e72f1 100644
--- a/src/components/content/TestimonialSection/index.tsx
+++ b/src/components/content/TestimonialSection/index.tsx
@@ -38,11 +38,7 @@ function TestimonialSection() {
             return <Testimonial key={index} {...testimonial} />;
           })}
         </div>
-        <button
-          type="button"
-          onClick={slideRight}
-          className="hidden sm:block xl:hidden"
-          aria-label="Next testimonial">
+        <button type="button" onClick={slideRight} className="hidden sm:block xl:hidden" aria-label="Next testimonial">
           <Icon
             icon="fa-solid:arrow-circle-right"
             className="dark:hover-text-purple-700 text-4xl text-gray-500 opacity-25 transition duration-150 ease-linear hover:text-purple-900 hover:opacity-100"
diff --git a/src/components/content/ThankYouSection/data.ts b/src/components/content/ThankYouSection/data.ts
index 053e2ff7aa..9a00345672 100644
--- a/src/components/content/ThankYouSection/data.ts
+++ b/src/components/content/ThankYouSection/data.ts
@@ -5,7 +5,7 @@ const sponsorData = [
     src: 'logos/optimized/red-hat-120w-77h.webp',
     alt: 'Red Hat Logo',
   },
-   {
+  {
     label: 'Amadeus',
     href: 'https://www.amadeus.com/',
     src: 'logos/optimized/amadeus-171w-22h.webp',
diff --git a/src/components/content/ThankYouSection/index.tsx b/src/components/content/ThankYouSection/index.tsx
index 5df5dba6c1..0dcaabeeb0 100644
--- a/src/components/content/ThankYouSection/index.tsx
+++ b/src/components/content/ThankYouSection/index.tsx
@@ -29,24 +29,24 @@ function ThankYouSection(): JSX.Element {
         </button>
         <div
           id="slider"
-          className="justify-center mx-auto h-full w-full  place-items-center gap-6 overflow-x-scroll scroll-smooth whitespace-nowrap scrollbar scrollbar-track-purple-500 lg:container lg:grid">
+          className="mx-auto h-full w-full place-items-center justify-center gap-6 overflow-x-scroll scroll-smooth whitespace-nowrap scrollbar scrollbar-track-purple-500 lg:container lg:grid">
           <a
             href={redHat.href}
             target="_blank"
-            className="mx-4 mb-4 inline-block rounded-md p-4  dark:bg-gray-100 lg:row-span-2 lg:row-start-1 lg:mb-0">
+            className="mx-4 mb-4 inline-block rounded-md p-4 dark:bg-gray-100 lg:row-span-2 lg:row-start-1 lg:mb-0">
             <img {...redHat} className="mx-auto p-4" />
           </a>
           <a
             href={amadeus.href}
             target="_blank"
             className="mx-4 mb-4 inline-block rounded-md p-4 dark:bg-gray-100 lg:mb-0 lg:flex lg:h-28 lg:w-80 lg:items-center">
-            <img {...amadeus} className="object-fit mx-auto max-w-sm p-4 " />
+            <img {...amadeus} className="object-fit mx-auto max-w-sm p-4" />
           </a>
           <a
             href={suse.href}
             target="_blank"
             className="mx-4 mb-4 inline-block rounded-md p-4 dark:bg-gray-100 lg:mb-0 lg:flex lg:h-28 lg:w-80 lg:items-center">
-            <img {...suse} className="object-fit mx-auto max-w-sm p-4 " />
+            <img {...suse} className="object-fit mx-auto max-w-sm p-4" />
           </a>
           <a
             href={motorola.href}
@@ -58,13 +58,13 @@ function ThankYouSection(): JSX.Element {
             href={ntt.href}
             target="_blank"
             className="mx-4 mb-4 inline-block rounded-md p-4 dark:bg-gray-100 lg:mb-0 lg:flex lg:h-28 lg:w-80 lg:items-center">
-            <img {...ntt} className="object-fit mx-auto max-w-sm p-4 " />
+            <img {...ntt} className="object-fit mx-auto max-w-sm p-4" />
           </a>
           <a
             href={ibm.href}
             target="_blank"
             className="col-span-3 mx-4 mb-4 inline-block rounded-md p-4 dark:bg-gray-100 lg:mb-0 lg:flex lg:h-28 lg:w-80 lg:items-center">
-            <img {...ibm} className="object-fit mx-auto max-w-sm p-4 " />
+            <img {...ibm} className="object-fit mx-auto max-w-sm p-4" />
           </a>
           <a
             href={debian.href}
diff --git a/src/components/content/WelcomeBanner/index.tsx b/src/components/content/WelcomeBanner/index.tsx
index d2343e9a8b..0789f4dcb6 100644
--- a/src/components/content/WelcomeBanner/index.tsx
+++ b/src/components/content/WelcomeBanner/index.tsx
@@ -5,21 +5,21 @@ function WelcomeBanner() {
   return (
     <section className="bg-gray-900">
       <div className="container my-20 grid grid-cols-4 place-items-center gap-y-4 md:grid-cols-10 lg:grid-cols-12">
-        <div className=" col-span-2 hidden md:block lg:row-span-2">
+        <div className="col-span-2 hidden md:block lg:row-span-2">
           <Icon icon="noto-v1:confetti-ball" className="rotate-[120deg] text-7xl" />
         </div>
-        <header className=" col-span-full flex items-center gap-4 text-center md:col-span-6 lg:col-span-8">
-          <h2 className="bg-gradient-to-r from-purple-500 to-blue-500 bg-clip-text text-5xl font-extrabold text-transparent dark:bg-gradient-to-r  dark:from-purple-700 dark:to-blue-700 dark:bg-clip-text dark:text-transparent">
+        <header className="col-span-full flex items-center gap-4 text-center md:col-span-6 lg:col-span-8">
+          <h2 className="bg-gradient-to-r from-purple-500 to-blue-500 bg-clip-text text-5xl font-extrabold text-transparent dark:bg-gradient-to-r dark:from-purple-700 dark:to-blue-700 dark:bg-clip-text dark:text-transparent">
             Welcome to the new Podman Website!
           </h2>
         </header>
         <div className="col-span-2 hidden md:block lg:row-span-2">
           <Icon icon="noto-v1:confetti-ball" className="rotate-180 text-7xl" />
         </div>
-        <div className="col-span-full mt-8 flex flex-wrap items-center gap-8 md:mt-0 lg:col-span-8 ">
+        <div className="col-span-full mt-8 flex flex-wrap items-center gap-8 md:mt-0 lg:col-span-8">
           <p className="max-w-prose text-center text-white">
-            Take a look around, don't forget to check out the new <a href="docs">docs layout</a>. Please report
-            any bugs to <a href="https://github.com/containers/website-new/issues">the issue tracker</a>.
+            Take a look around, don't forget to check out the new <a href="docs">docs layout</a>. Please report any bugs
+            to <a href="https://github.com/containers/website-new/issues">the issue tracker</a>.
           </p>
         </div>
       </div>
diff --git a/src/components/layout/CommunityMeetingsCardGrid/index.tsx b/src/components/layout/CommunityMeetingsCardGrid/index.tsx
index 31615cf0c2..5fab59a879 100644
--- a/src/components/layout/CommunityMeetingsCardGrid/index.tsx
+++ b/src/components/layout/CommunityMeetingsCardGrid/index.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import CustomCard from '@site/src/components/ui/CustomCard';
 import SubcardGrid from '@site/src/components/layout/SubcardGrid';
 import SectionHeader from '@site/src/components/layout/SectionHeader';
@@ -38,7 +39,7 @@ type SubcardButtonProps = {
   text: string;
   path?: string;
   markDown?: ReactNode;
-  modalHeaderData?: String;
+  modalHeaderData?: string;
 };
 
 type SubcardGridProps = {
@@ -65,8 +66,8 @@ function toggleModalOpen(ref, handler) {
 }
 
 function CommunityMeetingsCardGrid({ cards }) {
-  let cabalDropdownOptions: DropdownOptionProps[] = [];
-  let MeetingDropdownOptions: DropdownOptionProps[] = [];
+  const cabalDropdownOptions: DropdownOptionProps[] = [];
+  const MeetingDropdownOptions: DropdownOptionProps[] = [];
 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [modalHeader, setModalHeader] = useState<ReactNode | undefined>(undefined);
@@ -91,10 +92,10 @@ function CommunityMeetingsCardGrid({ cards }) {
 
   const populateMeetings = (): void => {
     Object.values(markDownFiles)?.forEach(mdFile => {
-      let mdReader = mdFile?.default(useRef());
+      const mdReader = mdFile?.default(useRef());
       mdReader?.props?.children?.forEach(child => {
-        let field1: string = child?.props?.children?.[0];
-        let field2: object = child?.props?.children?.[1];
+        const field1: string = child?.props?.children?.[0];
+        const field2: object = child?.props?.children?.[1];
         if (typeof field1 == 'string' && (field1.includes('BlueJeans') || field1.includes('Video'))) {
           if (mdFile?.contentTitle?.includes('Cabal')) {
             cabalDropdownOptions.unshift({
@@ -160,8 +161,8 @@ function CommunityMeetingsCardGrid({ cards }) {
 
   populateMeetings();
 
-  let communityMeetingsData: SubcardGridProps[] = [];
-  let CabalMeetingsData: SubcardGridProps[] = [];
+  const communityMeetingsData: SubcardGridProps[] = [];
+  const CabalMeetingsData: SubcardGridProps[] = [];
 
   // get top 2 CommunityMeetings & CabalMeetings for subcards
   for (let i = 0; i < 2; i++) {
@@ -194,7 +195,7 @@ function CommunityMeetingsCardGrid({ cards }) {
   return (
     <div className="justify-content-center align-items-center custom-card-grid-root flex">
       {cards.map((card: CommunityMeetingsCardProps, index: number) => {
-        let meetingsData = index == 1 ? CabalMeetingsData : communityMeetingsData;
+        const meetingsData = index == 1 ? CabalMeetingsData : communityMeetingsData;
         return (
           <div
             key={`card-container-${index}`}
@@ -226,7 +227,7 @@ function CommunityMeetingsCardGrid({ cards }) {
               ref={modalRef}>
               <div className="modal-content flex flex-col">
                 {modalHeader}
-                <div className="md-wrapper overflow-y-auto scrollbar-thin scrollbar-track-gray-100 scrollbar-thumb-gray-300 dark:bg-gray-700  dark:text-gray-50 dark:shadow-none">
+                <div className="md-wrapper overflow-y-auto scrollbar-thin scrollbar-track-gray-100 scrollbar-thumb-gray-300 dark:bg-gray-700 dark:text-gray-50 dark:shadow-none">
                   {meetinNotesMD}
                 </div>
               </div>
diff --git a/src/components/layout/HeroHeader/index.tsx b/src/components/layout/HeroHeader/index.tsx
index fb50fa8a8a..c66629c9f5 100644
--- a/src/components/layout/HeroHeader/index.tsx
+++ b/src/components/layout/HeroHeader/index.tsx
@@ -6,13 +6,6 @@ import DropdownButton from '@site/src/components/utilities/DropdownButton';
 import Link from '@site/src/components/utilities/Link';
 import WaveBorder from '@site/src/components/shapes/WaveBorder';
 import operatingSystemData from './installOptions';
-type InstallOptionProps = Card & {
-  icon: string;
-  option?: React.ReactNode;
-  path: string;
-  third?: { title: string; subtitle: string; icon: string; path: string };
-  other?: { path: string; text: string; subtext: string };
-};
 
 const detectOperatingSystem = () => {
   const userAgent = window.navigator.userAgent.toLowerCase().split(' ');
diff --git a/src/components/layout/HeroHeader/installOptions.ts b/src/components/layout/HeroHeader/installOptions.ts
index 7668a39f5f..9c6c1bf7d3 100644
--- a/src/components/layout/HeroHeader/installOptions.ts
+++ b/src/components/layout/HeroHeader/installOptions.ts
@@ -2,7 +2,7 @@ import { LATEST_VERSION, LATEST_DESKTOP_VERSION } from '@site/static/data/global
 const operatingSystemData = [
   {
     id: 'windows',
-    preferred:{
+    preferred: {
       title: 'Podman Desktop for Windows',
       subtitle: `Windows Installer v-${LATEST_DESKTOP_VERSION}`,
       icon: 'fa-brands:windows',
@@ -39,7 +39,7 @@ const operatingSystemData = [
     },
     alt: {
       title: 'Podman CLI for macOS',
-      subtitle: `CLI only ARM64 installer`,
+      subtitle: 'CLI only ARM64 installer',
       icon: 'material-symbols:terminal-rounded',
       path: `https://github.com/podman-container-tools/podman/releases/download/v${LATEST_VERSION}/podman-installer-macos-arm64.pkg`,
     },
@@ -54,7 +54,7 @@ const operatingSystemData = [
       title: 'Podman CLI for Linux',
       subtitle: `Podman Engine v${LATEST_VERSION}`,
       icon: 'material-symbols:terminal-rounded',
-      path: `docs/installation#installing-on-linux`,
+      path: 'docs/installation#installing-on-linux',
     },
     alt: {
       title: 'Podman Desktop for Linux',
diff --git a/src/components/layout/PageHeader/index.tsx b/src/components/layout/PageHeader/index.tsx
index 0bb9afa786..8c9a7ec26e 100644
--- a/src/components/layout/PageHeader/index.tsx
+++ b/src/components/layout/PageHeader/index.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 import { Icon } from '@iconify/react';
 import WaveBorder from '@site/src/components/shapes/WaveBorder';
 import Markdown from '@site/src/components/utilities/Markdown';
@@ -14,22 +14,22 @@ type PageHeaderProps = LayoutProps &
     darkColor?: string;
     lightColor?: string;
     basicResources?: boolean;
-    instructions?: { [key:string]: any };
+    instructions?: { [key: string]: any };
   };
 
 type PageHeaderSupplementalInfoProps = PageHeaderProps & {
   image?: Image;
   basicResources?: boolean;
-}
+};
 
 type InstructionsProps = PageHeaderProps & {
-  instructions?: { [key:string]: any };
-}
+  instructions?: { [key: string]: any };
+};
 
 const TextBox = ({ grid, display, layout, title, description }: PageHeaderProps): JSX.Element => {
   return (
     <div className={`${grid} ${display} ${layout}`}>
-      <h1 className="mb-6 max-w-sm text-purple-700 dark:text-purple-500 lg:max-w-lg ">{title}</h1>
+      <h1 className="mb-6 max-w-sm text-purple-700 dark:text-purple-500 lg:max-w-lg">{title}</h1>
       <Markdown text={description} styles="leading-relaxed" />
     </div>
   );
@@ -38,7 +38,7 @@ const TextBox = ({ grid, display, layout, title, description }: PageHeaderProps)
 const Image = ({
   grid,
   display,
-  layout,// if array then {[key:string]: any}[];
+  layout, // if array then {[key:string]: any}[];
   image = { path: 'images/optimized/podman-2-196w-172h.webp', alt: 'Podman Logo' },
 }: ImageSectionProps) => {
   return (
@@ -50,52 +50,55 @@ const Image = ({
 
 function PageHeaderSupplementalInfo({ image, basicResources }: PageHeaderSupplementalInfoProps) {
   if (basicResources) {
-    return (
-      <BasicResourcesBox />
-    );
-  } 
-  return (
-    <Image image={image} layout="mb-8 lg:mb-0" />
-  );
+    return <BasicResourcesBox />;
+  }
+  return <Image image={image} layout="mb-8 lg:mb-0" />;
 }
 
 function Instructions({ instructions }: InstructionsProps) {
   if (instructions) {
     return (
       <div>
-        <h3 className="text-gray-700 mb-4">{instructions.title}</h3>
+        <h3 className="mb-4 text-gray-700">{instructions.title}</h3>
         <p>{instructions.subtitle}</p>
-         <ul className="mb-10 mt-4 flex flex-col gap-6 sm:flex-row lg:mb-16 lg:gap-4 xl:flex-col">
-              <li>
-                <a
-                  href={instructions.button.path}
-                  className="no-underline hover:no-underline flex h-32 max-w-lg flex-col items-center justify-center gap-4 rounded-md bg-gray-100 p-4 text-center text-purple-700 underline-offset-4 transition duration-150 ease-linear hover:bg-purple-700 hover:text-purple-50 hover:shadow-md dark:bg-gray-700 dark:hover:bg-purple-900 dark:hover:text-white lg:h-auto lg:flex-row xl:justify-start">
-                  <span>{instructions.button.text}</span>
-                  <Icon icon={instructions.button.icon} className="order-first hidden lg:block" />
-                </a>
-              </li>
+        <ul className="mb-10 mt-4 flex flex-col gap-6 sm:flex-row lg:mb-16 lg:gap-4 xl:flex-col">
+          <li>
+            <a
+              href={instructions.button.path}
+              className="flex h-32 max-w-lg flex-col items-center justify-center gap-4 rounded-md bg-gray-100 p-4 text-center text-purple-700 no-underline underline-offset-4 transition duration-150 ease-linear hover:bg-purple-700 hover:text-purple-50 hover:no-underline hover:shadow-md dark:bg-gray-700 dark:hover:bg-purple-900 dark:hover:text-white lg:h-auto lg:flex-row xl:justify-start">
+              <span>{instructions.button.text}</span>
+              <Icon icon={instructions.button.icon} className="order-first hidden lg:block" />
+            </a>
+          </li>
         </ul>
       </div>
-    )
+    );
   }
   return null;
 }
 
-function PageHeader({ title, description, image, lightColor = 'white', darkColor = 'gray-900', basicResources, instructions }: PageHeaderProps) {
+function PageHeader({
+  title,
+  description,
+  image,
+  lightColor = 'white',
+  darkColor = 'gray-900',
+  basicResources,
+  instructions,
+}: PageHeaderProps) {
   return (
     <header className={`bg-${lightColor} dark:bg-${darkColor}`}>
-      <div className="bg-gradient-to-r  from-blue-500 to-purple-700 dark:from-blue-700 dark:to-purple-900 lg:pt-8">
+      <div className="bg-gradient-to-r from-blue-500 to-purple-700 dark:from-blue-700 dark:to-purple-900 lg:pt-8">
         <WaveBorder />
       </div>
-      <div className="container flex flex-col md:flex-row justify-around">
+      <div className="container flex flex-col justify-around md:flex-row">
         <div>
           <TextBox title={title} description={description} layout="mt-12 lg:mt-0 mb-8" />
           <Instructions instructions={instructions} />
         </div>
-        <div className="w-[50%] ml-24">
-          <PageHeaderSupplementalInfo basicResources={basicResources} />
+        <div className="ml-24 w-[50%]">
+          <PageHeaderSupplementalInfo basicResources={basicResources} image={image} />
         </div>
-
       </div>
     </header>
   );
diff --git a/src/components/layout/SectionHeader/index.tsx b/src/components/layout/SectionHeader/index.tsx
index 353d9404ec..224a343e38 100644
--- a/src/components/layout/SectionHeader/index.tsx
+++ b/src/components/layout/SectionHeader/index.tsx
@@ -25,8 +25,8 @@ function SectionHeader({
     ? `bg-gradient-radial bg-clip-text text-transparent dark:bg-gradient-radial dark:text-transparent ${textGradientStops}`
     : `${textColor}`;
   return (
-    <header className={`${bgColor}  ${layout}`}>
-      <div className="container mx-auto mb-4 mt-12 text-center  lg:mt-16">
+    <header className={`${bgColor} ${layout}`}>
+      <div className="container mx-auto mb-4 mt-12 text-center lg:mt-16">
         <h2 className={`${applyTextColor} ${fontWeight}`}>{title}</h2>
         <Markdown text={description} styles="mx-auto my-4 max-w-4xl leading-relaxed text-gray-700 dark:text-gray-100" />
       </div>
diff --git a/src/components/layout/SubcardGrid/index.tsx b/src/components/layout/SubcardGrid/index.tsx
index a431560cac..b60ff909ed 100644
--- a/src/components/layout/SubcardGrid/index.tsx
+++ b/src/components/layout/SubcardGrid/index.tsx
@@ -6,7 +6,7 @@ function SubcardGrid({ cards, toggleIsModalOpen }) {
   return (
     <div className="mb-4 flex lg:mb-6">
       {cards?.map((card, index) => {
-        let date = new Date(card.date).getDay();
+        const date = new Date(card.date).getDay();
         return (
           <CustomCard
             key={index}
diff --git a/src/components/shapes/FilmIcon/index.tsx b/src/components/shapes/FilmIcon/index.tsx
index 929ceb7262..66a81df5d3 100644
--- a/src/components/shapes/FilmIcon/index.tsx
+++ b/src/components/shapes/FilmIcon/index.tsx
@@ -18,7 +18,7 @@ function FilmIcon() {
           className="svg-inline--fa fa-film fa-w-16"
           rx="0"
           ry="0"
-          fill={`url(#fill-0-rumext-id-2)`}>
+          fill={'url(#fill-0-rumext-id-2)'}>
           <defs>
             <radialGradient
               id="fill-color-gradient_rumext-id-2_0"
@@ -41,7 +41,7 @@ function FilmIcon() {
                 <rect
                   width="74.66667200000188"
                   height="56.00000799999998"
-                  fill={`url(#fill-color-gradient_rumext-id-2_0)`}
+                  fill={'url(#fill-color-gradient_rumext-id-2_0)'}
                 />
               </g>
             </pattern>
@@ -70,7 +70,7 @@ function FilmIcon() {
                   <rect
                     width="75.00000000000205"
                     height="56.000000000000455"
-                    fill={`url(#fill-color-gradient_rumext-id-3_0)`}
+                    fill={'url(#fill-color-gradient_rumext-id-3_0)'}
                   />
                 </g>
               </pattern>
@@ -90,7 +90,7 @@ function FilmIcon() {
           className="svg-inline--fa fa-film fa-w-16"
           rx="0"
           ry="0"
-          fill={`url(#fill-0-rumext-id-4)`}>
+          fill={'url(#fill-0-rumext-id-4)'}>
           <defs>
             <radialGradient
               id="fill-color-gradient_rumext-id-4_0"
@@ -113,7 +113,7 @@ function FilmIcon() {
                 <rect
                   width="74.66667200000188"
                   height="56.00000799999998"
-                  fill={`url(#fill-color-gradient_rumext-id-4_0)`}
+                  fill={'url(#fill-color-gradient_rumext-id-4_0)'}
                 />
               </g>
             </pattern>
@@ -142,7 +142,7 @@ function FilmIcon() {
                   <rect
                     width="75.00000000000205"
                     height="56.000000000000455"
-                    fill={`url(#fill-color-gradient_rumext-id-5_0)`}
+                    fill={'url(#fill-color-gradient_rumext-id-5_0)'}
                   />
                 </g>
               </pattern>
diff --git a/src/components/ui/ArticleCard/index.tsx b/src/components/ui/ArticleCard/index.tsx
index d1ff58c057..a7a01d592a 100644
--- a/src/components/ui/ArticleCard/index.tsx
+++ b/src/components/ui/ArticleCard/index.tsx
@@ -27,20 +27,17 @@ const PublishDate = ({ date, styles }: { date: string; styles?: string }) => {
     </div>
   );
 };
-const Title = (title: string) => {
-  return <h3 className="text-purple-700">{title}</h3>;
-};
 
 function ArticleCard(props: ArticleCardProps) {
   // Select fallback image based on index, cycling through available images
   const fallbackImage = FALLBACK_IMAGES[(props.index || 0) % FALLBACK_IMAGES.length];
-  
+
   // Sanitizes HTML and converts it to plain text
   const sanitizeHtml = (html: string) => {
     if (!html) return html;
-    const div = document.createElement("div");
+    const div = document.createElement('div');
     div.innerHTML = html;
-    return div.textContent || div.innerText || "";
+    return div.textContent || div.innerText || '';
   };
   const abbrSubtitle = sanitizeHtml(props.subtitle).trim().split(' ').slice(0, 32).join(' ').concat('...');
   if (props.altLayout) {
@@ -61,7 +58,7 @@ function ArticleCard(props: ArticleCardProps) {
             </div>
             <img
               src={props.imgSrc || fallbackImage}
-              className=" col-start-1 row-start-1 h-full w-full rounded-sm object-cover lg:w-80"
+              className="col-start-1 row-start-1 h-full w-full rounded-sm object-cover lg:w-80"
             />
           </div>
           <div className="max-w-sm items-center gap-2 self-center p-2 pr-4">
diff --git a/src/components/ui/Card/index.tsx b/src/components/ui/Card/index.tsx
index fbeffed96c..3d58f4df82 100644
--- a/src/components/ui/Card/index.tsx
+++ b/src/components/ui/Card/index.tsx
@@ -21,7 +21,7 @@ function CardBody(props) {
 }
 function CardButtons({ data = [{ text: 'button text' }] }) {
   return (
-    <div className=" mx-2 mb-4 flex justify-center gap-2 lg:mb-8">
+    <div className="mx-2 mb-4 flex justify-center gap-2 lg:mb-8">
       {data.map((button, index) => (
         <div key={index}>
           {index == 0 ? <Button as="link" {...button} /> : <Button as="link" outline={true} {...button} />}
diff --git a/src/components/ui/CustomCard/index.tsx b/src/components/ui/CustomCard/index.tsx
index a36b01f04e..0d853a5050 100644
--- a/src/components/ui/CustomCard/index.tsx
+++ b/src/components/ui/CustomCard/index.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 import Button from '@site/src/components/utilities/Button/';
 import Markdown from '@site/src/components/utilities/Markdown';
 import FilmIcon from '../../shapes/FilmIcon';
@@ -11,8 +12,8 @@ type SubcardButtonProps = {
 
 type CardInfoButtonProps = {
   data: SubcardButtonProps[];
-  primary: Boolean;
-  method: Function;
+  primary: boolean;
+  method: (button: SubcardButtonProps) => void;
 };
 
 function CardHeader(props) {
diff --git a/src/components/ui/SmallCard/index.tsx b/src/components/ui/SmallCard/index.tsx
index 123d168749..819059e8f6 100644
--- a/src/components/ui/SmallCard/index.tsx
+++ b/src/components/ui/SmallCard/index.tsx
@@ -10,7 +10,7 @@ function SmallCard(props: SmallCardProps) {
   const { title, subtitle, button } = props;
 
   return (
-    <article className=" my-4 flex max-w-xs flex-col justify-between">
+    <article className="my-4 flex max-w-xs flex-col justify-between">
       <h4 className="text-gray-700">{title}</h4>
       <Markdown text={subtitle} styles="mb-4 mt-2 w-[198px] md:w-64" />
       <Button outline={true} as="link" {...button} />
diff --git a/src/components/ui/Testimonial/index.tsx b/src/components/ui/Testimonial/index.tsx
index c85ba2bb8a..2788da59af 100644
--- a/src/components/ui/Testimonial/index.tsx
+++ b/src/components/ui/Testimonial/index.tsx
@@ -14,27 +14,35 @@ type TestimonialProps = {
 
 function Testimonial(props: TestimonialProps) {
   return (
-    <article className="flex flex-col mx-2 my-4 max-w-sm rounded-sm bg-white p-4 shadow-lg dark:bg-gray-900">
-      <div className="flex items-center gap-3 mb-4">
+    <article className="mx-2 my-4 flex max-w-sm flex-col rounded-sm bg-white p-4 shadow-lg dark:bg-gray-900">
+      <div className="mb-4 flex items-center gap-3">
         <div className="m-2">
           <div className="flex items-center gap-2">
             <h3 className="text-lg font-bold">{props.name}</h3>
             <Icon icon={`logos:${props.social}`} className="text-2xl" />
           </div>
-          <a href={props.path} className=" text-gray-700 dark:text-gray-100 dark:hover:text-purple-900 no-underline hover:no-underline hover:bg-purple-300">
+          <a
+            href={props.path}
+            className="text-gray-700 no-underline hover:bg-purple-300 hover:no-underline dark:text-gray-100 dark:hover:text-purple-900">
             {props.handle}
           </a>
         </div>
         <div className="order-first">
-          <img src={`${props.avatar}`} alt="user avatar" className="h-fit w-fit max-w-16 max-h-16 rounded-full" />
+          <img src={`${props.avatar}`} alt="user avatar" className="h-fit max-h-16 w-fit max-w-16 rounded-full" />
         </div>
       </div>
-      <div className="mt-2 mb-4 truncate">
-        <p className="whitespace-normal text-gray-900 dark:text-gray-300 leading-snug mb-2">{props.description}</p>
-        {props.featuredlink && <a target="_blank" href={props.featuredlink}>{props.featuredlink}</a>}
+      <div className="mb-4 mt-2 truncate">
+        <p className="mb-2 whitespace-normal leading-snug text-gray-900 dark:text-gray-300">{props.description}</p>
+        {props.featuredlink && (
+          <a target="_blank" href={props.featuredlink}>
+            {props.featuredlink}
+          </a>
+        )}
       </div>
-      <div className="mt-auto self-start text-gray-300 dark:text-gray-700 italic">
-        <a href={props.path} className="text-gray-300 dark:text-gray-700 dark:hover:text-gray-700 no-underline hover:no-underline hover:bg-purple-300">
+      <div className="mt-auto self-start italic text-gray-300 dark:text-gray-700">
+        <a
+          href={props.path}
+          className="text-gray-300 no-underline hover:bg-purple-300 hover:no-underline dark:text-gray-700 dark:hover:text-gray-700">
           {props.date}
         </a>
       </div>
diff --git a/src/components/utilities/IconLink/index.tsx b/src/components/utilities/IconLink/index.tsx
index 4a79c1dc89..1f6f9dc4ed 100644
--- a/src/components/utilities/IconLink/index.tsx
+++ b/src/components/utilities/IconLink/index.tsx
@@ -10,7 +10,7 @@ export type IconLinkProps = Link & {
 function IconLink({ text, path, icon, image, textLogo }: IconLinkProps) {
   return (
     <a href={path} className="mx-auto flex flex-col items-center text-center">
-      <div className="max-w-fit rounded-full bg-white p-8 shadow-sm  dark:bg-gray-900">
+      <div className="max-w-fit rounded-full bg-white p-8 shadow-sm dark:bg-gray-900">
         {icon ? (
           <Icon icon={icon} className="text-5xl" />
         ) : textLogo ? (
diff --git a/src/components/utilities/Link/index.tsx b/src/components/utilities/Link/index.tsx
index 27e5b5e16d..6cf680c796 100644
--- a/src/components/utilities/Link/index.tsx
+++ b/src/components/utilities/Link/index.tsx
@@ -14,7 +14,7 @@ function Link({
   textColor = 'text-blue-700 dark:text-blue-500',
   hoverColor = 'hover:text-purple-700 hover:dark:text-purple-700',
   underline = 'underline underline-offset-4',
-  target = '_self'
+  target = '_self',
 }: LinkProps): JSX.Element {
   return (
     <a
diff --git a/src/components/utilities/PlayOnScroll/index.tsx b/src/components/utilities/PlayOnScroll/index.tsx
index 37bb178356..7849d16047 100644
--- a/src/components/utilities/PlayOnScroll/index.tsx
+++ b/src/components/utilities/PlayOnScroll/index.tsx
@@ -1,45 +1,45 @@
 import React, { useRef, useEffect } from 'react';
 
 interface VideoProps {
-    url: string;
-    vidFormat?: string;
-    styles?: string;
-    posterImg?: string;
-  }
+  url: string;
+  vidFormat?: string;
+  styles?: string;
+  posterImg?: string;
+}
 
 const PlayOnScroll: React.FC = (props: VideoProps) => {
-    const videoRef = useRef<HTMLVideoElement>(null);
-  
-    useEffect(() => {
-      const handleScroll = () => {
-        if (videoRef.current) {
-          const rect = videoRef.current.getBoundingClientRect();
-          const isFullyVisible = rect.top >= 0 && rect.bottom <= window.innerHeight;
-          
-          if (isFullyVisible) {
-            videoRef.current.play();
-          } else {
-            videoRef.current.pause();
-          }
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (videoRef.current) {
+        const rect = videoRef.current.getBoundingClientRect();
+        const isFullyVisible = rect.top >= 0 && rect.bottom <= window.innerHeight;
+
+        if (isFullyVisible) {
+          videoRef.current.play();
+        } else {
+          videoRef.current.pause();
         }
-      };
-  
-      window.addEventListener('scroll', handleScroll);
-      
-      return () => {
-        window.removeEventListener('scroll', handleScroll);
-      };
-    }, []);
-  
-    return (
-      <div>
-        <video className={props.styles} ref={videoRef} poster={props.posterImg} autoPlay>
-          <source src={props.url} type={props.vidFormat} />
-          {/* Add additional source elements for different video formats if needed */}
-          Your browser does not support the video tag.
-        </video>
-      </div>
-    );
-  };
-  
-  export default PlayOnScroll;
\ No newline at end of file
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  return (
+    <div>
+      <video className={props.styles} ref={videoRef} poster={props.posterImg} autoPlay>
+        <source src={props.url} type={props.vidFormat} />
+        {/* Add additional source elements for different video formats if needed */}
+        Your browser does not support the video tag.
+      </video>
+    </div>
+  );
+};
+
+export default PlayOnScroll;
diff --git a/src/hooks/useBlogPosts.ts b/src/hooks/useBlogPosts.ts
index feaebc4421..828b1e4e50 100644
--- a/src/hooks/useBlogPosts.ts
+++ b/src/hooks/useBlogPosts.ts
@@ -22,7 +22,7 @@ interface UseBlogPostsReturn {
   loading: boolean;
 }
 
-export const useBlogPosts = (limit: number = 4): UseBlogPostsReturn => {
+export const useBlogPosts = (limit = 4): UseBlogPostsReturn => {
   const [data, setData] = useState<BlogPost[]>([]);
   const [loading, setLoading] = useState(true);
 
diff --git a/src/pages/community.tsx b/src/pages/community.tsx
index d72cdf53c1..7120fcb891 100644
--- a/src/pages/community.tsx
+++ b/src/pages/community.tsx
@@ -36,7 +36,7 @@ const CommunityLinks = () => {
 
 const CommunityChatSection = (): JSX.Element => {
   return (
-    <section className="bg-gray-50 dark:bg-gradient-to-t dark:from-gray-700 dark:via-gray-900 dark:to-gray-900 ">
+    <section className="bg-gray-50 dark:bg-gradient-to-t dark:from-gray-700 dark:via-gray-900 dark:to-gray-900">
       <SectionHeader textGradient={true} title={communityChat.title} />
       <div className="mx-4 mt-8 flex flex-wrap justify-around gap-4 sm:mx-8 lg:mx-auto lg:mt-16 lg:max-w-6xl">
         <div className="">
@@ -106,7 +106,7 @@ const MailingListSection = (): JSX.Element => {
             <img
               src={mailingList.extraInfo.image.path}
               alt={mailingList.extraInfo.image.alt}
-              className="w-full  object-cover"
+              className="w-full object-cover"
             />
           </div>
           <div className="ml-8 xl:ml-10">
@@ -124,8 +124,10 @@ const DropdownContent = (props): JSX.Element => {
       <ul>
         {props.map((link, index) => {
           return (
-            <li className="my-2 rounded-md px-2 transition duration-150 ease-linear hover:bg-purple-700 hover:text-white">
-              <a href={link.path} className=" w-full hover:text-white hover:no-underline">
+            <li
+              key={index}
+              className="my-2 rounded-md px-2 transition duration-150 ease-linear hover:bg-purple-700 hover:text-white">
+              <a href={link.path} className="w-full hover:text-white hover:no-underline">
                 {link.text}
               </a>
             </li>
@@ -225,12 +227,12 @@ function Community() {
       <InfoBanner
         description="**Searching for Podman Desktop Community Meetings?** [Click Here](https://podman-desktop.io/community#community-events) or visit the [official website](https://podman-desktop.io) to learn more."
         image={{
-          src: "logos/optimized/podman-desktop-logo-200w-198h.webp",
-          alt: "Podman Desktop Logo"
+          src: 'logos/optimized/podman-desktop-logo-200w-198h.webp',
+          alt: 'Podman Desktop Logo',
         }}
         styles="bg-purple-700 dark:bg-purple-900 text-white [&_img]:w-16 [&_img]:h-16  [&_a]:underline [&_a:hover]:text-purple-300"
         marginHeight="mt-8 lg:mt-16"
-      /> 
+      />
       <MailingListSection />
       <SubmitIssuesSection />
       <ThankYouSection />
diff --git a/src/pages/features.tsx b/src/pages/features.tsx
index e392ad1c4b..8ab7fe8455 100644
--- a/src/pages/features.tsx
+++ b/src/pages/features.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import Layout from '@theme/Layout';
-import { Icon } from '@iconify/react';
 /* COMPONENTS */
 import Markdown from '@site/src/components/utilities/Markdown';
 import PageHeader from '@site/src/components/layout/PageHeader';
@@ -41,18 +40,27 @@ const PodmanDesktopSection = () => {
       <div className="align-center container flex justify-center">
         <div className="flex-row content-center">
           <h2 className="content-center">
-            <a className="hover:no-underline hover:text-white active:text-white visited:text-white dark:hover:text-white dark:active:text-white dark:visited:text-white text-4xl mb-5 px-5  bg-blue-500 no-underline text-white dark:bg-blue-700 dark:text-white" href="https://podman-desktop.io">Podman Desktop</a>
+            <a
+              className="mb-5 bg-blue-500 px-5 text-4xl text-white no-underline visited:text-white hover:text-white hover:no-underline active:text-white dark:bg-blue-700 dark:text-white dark:visited:text-white dark:hover:text-white dark:active:text-white"
+              href="https://podman-desktop.io">
+              Podman Desktop
+            </a>
           </h2>
         </div>
       </div>
-      <div className="container flex flex-col md:flex-row items-center">
+      <div className="container flex flex-col items-center md:flex-row">
         <div id="imgdiv" className="mx-auto w-full md:w-auto">
           <img id="pdlogo" className="mx-auto" src="logos/optimized/podman-desktop-logo-200w-198h.webp" />
         </div>
         <div className="md:w-1/2 xl:w-3/4">
           <p className="my-8 align-middle text-2xl leading-relaxed">
-            <a className="font-semibold hover:text-purple-500 text-purple-900 no-underline text-2xl leading-releaxed" href="https://podman-desktop.io">Podman Desktop</a> is Podman's graphical application that makes it easy to install and work with Podman (and
-            other container engines) on Windows, MacOS, and Linux.
+            <a
+              className="leading-releaxed text-2xl font-semibold text-purple-900 no-underline hover:text-purple-500"
+              href="https://podman-desktop.io">
+              Podman Desktop
+            </a>{' '}
+            is Podman's graphical application that makes it easy to install and work with Podman (and other container
+            engines) on Windows, MacOS, and Linux.
           </p>
         </div>
       </div>
@@ -62,22 +70,27 @@ const PodmanDesktopSection = () => {
 
 const ManageContainersUISection = () => {
   return (
-    <section className="xl:py-16 xl:flex xl:flex-row-reverse bg-gradient-to-b from-purple-100 to-purple-300 dark:from-black dark:to-gray-900">
-      <div className="flex-1 w-full md:my-16 md:w-4/5 md:mx-auto lg:w-full xl:my-16">
-        <PlayOnScroll vidFormat="video/mp4" url="video/ui/containers.mp4" posterImg="images/optimized/ui-screens/ui-manage-containers.webp" styles="rounded-lg w-full lg:w-3/4 lg:mx-auto xl:mr-0 xl:w-full max-w-[1200px] items-center md:rounded-3xl bg-cover md:bg-contain xl:rounded-r-none" />
+    <section className="bg-gradient-to-b from-purple-100 to-purple-300 dark:from-black dark:to-gray-900 xl:flex xl:flex-row-reverse xl:py-16">
+      <div className="w-full flex-1 md:mx-auto md:my-16 md:w-4/5 lg:w-full xl:my-16">
+        <PlayOnScroll
+          vidFormat="video/mp4"
+          url="video/ui/containers.mp4"
+          posterImg="images/optimized/ui-screens/ui-manage-containers.webp"
+          styles="rounded-lg w-full lg:w-3/4 lg:mx-auto xl:mr-0 xl:w-full max-w-[1200px] items-center md:rounded-3xl bg-cover md:bg-contain xl:rounded-r-none"
+        />
       </div>
-      <div className="flex flex-1 my-16 md:my-none">
-        <div className="flex-row px-16 xl:p-16 x2l:my-16 md:w-4/5 md:mx-auto">
+      <div className="md:my-none my-16 flex flex-1">
+        <div className="x2l:my-16 flex-row px-16 md:mx-auto md:w-4/5 xl:p-16">
           <h3 className="mb-5 dark:text-white">Manage containers (not just Podman.)</h3>
           <p className="mb-3 dark:text-white">
-            Podman Desktop allows you to list, view, and manage containers from multiple supported container
-            engines* in a single unified view.
+            Podman Desktop allows you to list, view, and manage containers from multiple supported container engines* in
+            a single unified view.
           </p>
           <p className="mb-3 dark:text-white">
             Gain easy access to a shell inside the container, logs, and basic controls.
           </p>
           <em className="mt-10 block dark:text-white">
-            * Supported engines and orchestrators include Podman, Docker, Lima, kind, Red Hat OpenShift, Red Hat 
+            * Supported engines and orchestrators include Podman, Docker, Lima, kind, Red Hat OpenShift, Red Hat
             OpenShift Developer Sandbox.
           </em>
         </div>
@@ -88,69 +101,84 @@ const ManageContainersUISection = () => {
 
 const BuildImagesUISection = () => {
   return (
-  <section className="xl:py-16 xl:flex xl:flex-row bg-gradient-to-b from-purple-100 to-purple-300 dark:from-black dark:to-gray-900 xl:dark:from-gray-900 xl:dark:to-black">
-    <div className="flex-1 w-full md:my-16 md:w-4/5 md:mx-auto lg:w-full xl:my-16">
-      <PlayOnScroll vidFormat="video/mp4" url="video/ui/images.mp4" posterImg="images/optimized/ui-screens/ui-buildimage.webp" styles="rounded-lg w-full lg:w-3/4 lg:mx-auto xl:ml-0 xl:w-full max-w-[1200px] items-center md:rounded-3xl bg-cover md:bg-contain xl:rounded-l-none" />
-    </div>
-    <div className="flex flex-1 my-16 md:my-none">
-      <div className="flex-row px-16 xl:p-16 x2l:my-16 md:w-4/5 md:mx-auto">
-        <h3 className="mb-5 dark:text-white">Build, pull, and push images.</h3>
-        <p className="mb-3 dark:text-white">
-          Build containers from a Dockerfile / Containerfile, or pull images from remote repositories to run.
-        </p>
-        <p className="mb-3 dark:text-white">
-          Manage accounts for and push your images to multiple container registries.
-        </p>
+    <section className="bg-gradient-to-b from-purple-100 to-purple-300 dark:from-black dark:to-gray-900 xl:flex xl:flex-row xl:py-16 xl:dark:from-gray-900 xl:dark:to-black">
+      <div className="w-full flex-1 md:mx-auto md:my-16 md:w-4/5 lg:w-full xl:my-16">
+        <PlayOnScroll
+          vidFormat="video/mp4"
+          url="video/ui/images.mp4"
+          posterImg="images/optimized/ui-screens/ui-buildimage.webp"
+          styles="rounded-lg w-full lg:w-3/4 lg:mx-auto xl:ml-0 xl:w-full max-w-[1200px] items-center md:rounded-3xl bg-cover md:bg-contain xl:rounded-l-none"
+        />
+      </div>
+      <div className="md:my-none my-16 flex flex-1">
+        <div className="x2l:my-16 flex-row px-16 md:mx-auto md:w-4/5 xl:p-16">
+          <h3 className="mb-5 dark:text-white">Build, pull, and push images.</h3>
+          <p className="mb-3 dark:text-white">
+            Build containers from a Dockerfile / Containerfile, or pull images from remote repositories to run.
+          </p>
+          <p className="mb-3 dark:text-white">
+            Manage accounts for and push your images to multiple container registries.
+          </p>
+        </div>
       </div>
-    </div>
-  </section>
+    </section>
   );
 };
 
 const CreatePodsUISection = () => {
   return (
-    <section className="xl:py-16 xl:flex xl:flex-row-reverse bg-gradient-to-b from-purple-100 to-purple-300 dark:from-black dark:to-gray-900">
-    <div className="flex-1 w-full md:my-16 md:w-4/5 md:mx-auto lg:w-full xl:my-16">
-      <PlayOnScroll vidFormat="video/mp4" url="video/ui/podify.mp4" posterImg="images/optimized/ui-screens/ui-podify.webp" styles="rounded-lg w-full lg:w-3/4 lg:mx-auto xl:mr-0 xl:w-full max-w-[1200px] items-center md:rounded-3xl bg-cover md:bg-contain xl:rounded-r-none" />
-    </div>
-    <div className="flex flex-1 my-16 md:my-none">
-      <div className="flex-row px-16 xl:p-16 x2l:my-16 md:w-4/5 md:mx-auto">
-        <h3 className="mb-5 dark:text-white">Podify containers into pods.</h3>
-        <p className="mb-3 dark:text-white">
-          Create pods by selecting containers to run together. View unified logs for your pods and inspect the
-          containers inside each.
-        </p>
-        <p className="mb-3 dark:text-white">
-        Play Kubernetes YAML locally, without Kubernetes, and generate Kubernetes YAML from Pods.
-        </p>
+    <section className="bg-gradient-to-b from-purple-100 to-purple-300 dark:from-black dark:to-gray-900 xl:flex xl:flex-row-reverse xl:py-16">
+      <div className="w-full flex-1 md:mx-auto md:my-16 md:w-4/5 lg:w-full xl:my-16">
+        <PlayOnScroll
+          vidFormat="video/mp4"
+          url="video/ui/podify.mp4"
+          posterImg="images/optimized/ui-screens/ui-podify.webp"
+          styles="rounded-lg w-full lg:w-3/4 lg:mx-auto xl:mr-0 xl:w-full max-w-[1200px] items-center md:rounded-3xl bg-cover md:bg-contain xl:rounded-r-none"
+        />
       </div>
-    </div>
-  </section>
+      <div className="md:my-none my-16 flex flex-1">
+        <div className="x2l:my-16 flex-row px-16 md:mx-auto md:w-4/5 xl:p-16">
+          <h3 className="mb-5 dark:text-white">Podify containers into pods.</h3>
+          <p className="mb-3 dark:text-white">
+            Create pods by selecting containers to run together. View unified logs for your pods and inspect the
+            containers inside each.
+          </p>
+          <p className="mb-3 dark:text-white">
+            Play Kubernetes YAML locally, without Kubernetes, and generate Kubernetes YAML from Pods.
+          </p>
+        </div>
+      </div>
+    </section>
   );
 };
 
 const DeployToKubernetesUISection = () => {
   return (
-  <section className="xl:py-16 md:pb-32 xl:flex xl:flex-row bg-gradient-to-b from-purple-100 to-purple-300  dark:from-black dark:to-gray-900 xl:dark:from-gray-900 xl:dark:to-black">
-    <div className="flex-1 w-full md:my-16 md:w-4/5 md:mx-auto lg:w-full xl:my-16">
-      <PlayOnScroll vidFormat="video/mp4" url="video/ui/kubernetes.mp4" posterImg="images/optimized/ui-screens/ui-k8sdeploy.webp" styles="rounded-lg w-full lg:w-3/4 lg:mx-auto xl:ml-0 xl:w-full max-w-[1200px] items-center md:rounded-3xl bg-cover md:bg-contain xl:rounded-l-none" />
-    </div>
-    <div className="flex flex-1 my-16 md:my-none">
-      <div className="flex-row px-16 xl:p-16 x2l:my-16 md:w-4/5 md:mx-auto">
-        <h3 className="mb-5 dark:text-white">Deploy to Kubernetes.</h3>
-        <p className="mb-3 dark:text-white">
-          Deploy pods from Podman Desktop to local or remote Kubernetes contexts using automatically-generated
-          YAML config.
-        </p>
+    <section className="bg-gradient-to-b from-purple-100 to-purple-300 dark:from-black dark:to-gray-900 md:pb-32 xl:flex xl:flex-row xl:py-16 xl:dark:from-gray-900 xl:dark:to-black">
+      <div className="w-full flex-1 md:mx-auto md:my-16 md:w-4/5 lg:w-full xl:my-16">
+        <PlayOnScroll
+          vidFormat="video/mp4"
+          url="video/ui/kubernetes.mp4"
+          posterImg="images/optimized/ui-screens/ui-k8sdeploy.webp"
+          styles="rounded-lg w-full lg:w-3/4 lg:mx-auto xl:ml-0 xl:w-full max-w-[1200px] items-center md:rounded-3xl bg-cover md:bg-contain xl:rounded-l-none"
+        />
       </div>
-    </div>
-  </section>
+      <div className="md:my-none my-16 flex flex-1">
+        <div className="x2l:my-16 flex-row px-16 md:mx-auto md:w-4/5 xl:p-16">
+          <h3 className="mb-5 dark:text-white">Deploy to Kubernetes.</h3>
+          <p className="mb-3 dark:text-white">
+            Deploy pods from Podman Desktop to local or remote Kubernetes contexts using automatically-generated YAML
+            config.
+          </p>
+        </div>
+      </div>
+    </section>
   );
 };
 
 const PodmanCLISection = () => {
   return (
-    <section className="bg-gradient-to-b from-gray-50 to-gray-100  pb-5 dark:from-gray-700/25  dark:to-gray-900">
+    <section className="bg-gradient-to-b from-gray-50 to-gray-100 pb-5 dark:from-gray-700/25 dark:to-gray-900">
       <div className="align-center container mb-8 flex justify-center xl:mb-20">
         <div className="flex-row content-center">
           <h2 className="mb-5 content-center bg-blue-700 pl-5 pr-5 text-white dark:text-white">Podman Command-Line</h2>
diff --git a/src/pages/get-started.tsx b/src/pages/get-started.tsx
index 59cf74833d..f7197e95c9 100644
--- a/src/pages/get-started.tsx
+++ b/src/pages/get-started.tsx
@@ -16,10 +16,10 @@ const GetHelpSection = () => {
       <SectionHeader title={getHelp.title} textColor="dark:text-blue-500 text-blue-300" />
       <div className="container my-8">
         <header className="text-center lg:my-8">
-          <h3 className="text-white dark:text-white ">{getHelp.subtitle}</h3>
+          <h3 className="text-white dark:text-white">{getHelp.subtitle}</h3>
         </header>
         <div className="mx-auto">
-          <div className="container grid  grid-cols-1 gap-y-4 lg:grid-cols-2 lg:gap-y-0">
+          <div className="container grid grid-cols-1 gap-y-4 lg:grid-cols-2 lg:gap-y-0">
             <p className="max-w-sm text-white dark:text-gray-100">
               For more details, you can review the <a href="https://docs.podman.io/en/latest/Commands.html">manpages</a>
               :
@@ -67,77 +67,112 @@ const SearchPullListSection = () => {
 
 const RunListContainersSection = () => {
   return (
-    <section className="bg-gradient-to-br from-blue-500/75 to-blue-700 dark:bg-blue-900 dark:text-white pt-6 pb-16" >
-      <SectionHeader textColor="text-purple-700 dark:text-purple-500" title="Running a container &amp; listing running containers" />
-      <div className="text-center flex flex-col mx-4">
-        <p className="mb-4">This sample container will run a very basic httpd server that serves only its index page.</p>
-        
-        <h3 className="text-purple-700 dark:text-purple-300 mb-2 mt-10">Running a container</h3>
+    <section className="bg-gradient-to-br from-blue-500/75 to-blue-700 pb-16 pt-6 dark:bg-blue-900 dark:text-white">
+      <SectionHeader
+        textColor="text-purple-700 dark:text-purple-500"
+        title="Running a container &amp; listing running containers"
+      />
+      <div className="mx-4 flex flex-col text-center">
+        <p className="mb-4">
+          This sample container will run a very basic httpd server that serves only its index page.
+        </p>
+
+        <h3 className="mb-2 mt-10 text-purple-700 dark:text-purple-300">Running a container</h3>
 
         <div className="mx-auto">
-          <CodeBlock language="bash" showLineNumbers className="text-left overflow-scroll xl:max-w-6xl max-w-xs sm:max-w-md md:max-w-lg lg:max-w-4xl">
+          <CodeBlock
+            language="bash"
+            showLineNumbers
+            className="max-w-xs overflow-scroll text-left sm:max-w-md md:max-w-lg lg:max-w-4xl xl:max-w-6xl">
             $ podman run -dt -p 8080:80/tcp docker.io/library/httpd {'\n'}
           </CodeBlock>
         </div>
 
         <div className="mx-auto max-w-lg rounded-md bg-white/50 px-6 py-6 shadow-lg dark:bg-gray-900/50">
           <h5 className="text-gray-700">Note:</h5>
-          <p className="text-gray-700 text-left">
-            Because the container is being run in detached mode, represented by the -d in the podman run command, 
-            Podman will run the container in the background and print the container ID after it has executed the 
-            command. The -t also adds a pseudo-tty to run arbitrary commands in an interactive shell.
+          <p className="text-left text-gray-700">
+            Because the container is being run in detached mode, represented by the -d in the podman run command, Podman
+            will run the container in the background and print the container ID after it has executed the command. The
+            -t also adds a pseudo-tty to run arbitrary commands in an interactive shell.
           </p>
-          <p className="text-gray-700 text-left mt-4">
-            Also, we use port forwarding to be able to access the HTTP server. For successful running at least <strong>slirp4netns</strong> v0.3.0 is needed.
+          <p className="mt-4 text-left text-gray-700">
+            Also, we use port forwarding to be able to access the HTTP server. For successful running at least{' '}
+            <strong>slirp4netns</strong> v0.3.0 is needed.
           </p>
         </div>
 
-        <h3 className="text-purple-700 dark:text-purple-300 mt-16 mb-2">Listing running containers</h3>
-      
+        <h3 className="mb-2 mt-16 text-purple-700 dark:text-purple-300">Listing running containers</h3>
+
         <div className="mx-auto">
-          <p className="text-gray-700 mb-4">The <code>podman ps</code> command is used to list created and running containers.</p>
-          <CodeBlock language="bash" showLineNumbers className="sm:bg-gray-100 text-left mx-4 overflow-scroll xl:max-w-6xl max-w-xs sm:max-w-md md:max-w-lg lg:max-w-4xl">
+          <p className="mb-4 text-gray-700">
+            The <code>podman ps</code> command is used to list created and running containers.
+          </p>
+          <CodeBlock
+            language="bash"
+            showLineNumbers
+            className="mx-4 max-w-xs overflow-scroll text-left sm:max-w-md sm:bg-gray-100 md:max-w-lg lg:max-w-4xl xl:max-w-6xl">
             $ podman ps{'\n'}
-            CONTAINER ID  IMAGE                           COMMAND           CREATED       STATUS      PORTS                 NAMES{'\n'}
-            01c44968199f  docker.io/library/httpd:latest  httpd-foreground  1 minute ago  Up 1 minute 0.0.0.0:8080-{'>'}80/tcp  laughing_bob{'\n'}
+            CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES{'\n'}
+            01c44968199f docker.io/library/httpd:latest httpd-foreground 1 minute ago Up 1 minute 0.0.0.0:8080-{'>'}
+            80/tcp laughing_bob{'\n'}
           </CodeBlock>
           <div className="mx-auto max-w-lg rounded-md bg-white/50 px-6 py-6 shadow-lg dark:bg-gray-900/50">
             <h5 className="text-gray-700">Note:</h5>
-            <p className="text-gray-700 text-left">
-             If you add <code>-a</code> to the <code>podman ps</code> command, Podman will show all containers (created, exited, running, etc.).
+            <p className="text-left text-gray-700">
+              If you add <code>-a</code> to the <code>podman ps</code> command, Podman will show all containers
+              (created, exited, running, etc.).
             </p>
           </div>
         </div>
-     
-      <h3 className="text-purple-700 dark:text-purple-300 mt-16 mb-2">Testing the <code>httpd</code> container</h3>
-     
-      <div className="mx-auto">
-        <p className="text-gray-700 mb-4 text-left max-w-prose">As you are able to see, the container does not have an IP Address assigned. The container is reachable via its published port on your local machine.</p>
-        <CodeBlock language="bash" showLineNumbers className="sm:bg-gray-100 text-left mx-auto overflow-scroll xl:max-w-6xl max-w-xs sm:max-w-md md:max-w-lg lg:max-w-4xl">
-          $ curl http://localhost:8080{'\n'}
-        </CodeBlock>
 
-        <p className="text-gray-700 mb-4 max-w-prose text-left">From another machine, you need to use the IP Address of the host, running the container.</p>
-        <CodeBlock language="bash" showLineNumbers className="sm:bg-gray-100 text-left mx-auto overflow-scroll xl:max-w-6xl max-w-xs sm:max-w-md md:max-w-lg lg:max-w-4xl">
-          $ curl http://{'<IP_Address>'}:8080{'\n'}
-        </CodeBlock>
+        <h3 className="mb-2 mt-16 text-purple-700 dark:text-purple-300">
+          Testing the <code>httpd</code> container
+        </h3>
 
-        <div className="mx-auto max-w-lg rounded-md bg-white/50 px-6 py-6 shadow-lg dark:bg-gray-900/50">
-          <h5 className="text-gray-700">Note:</h5>
-          <p className="text-gray-700 text-left">
-          Instead of using <code>curl</code>, you can also point a browser to <code>http://localhost:8080</code>.</p>
+        <div className="mx-auto">
+          <p className="mb-4 max-w-prose text-left text-gray-700">
+            As you are able to see, the container does not have an IP Address assigned. The container is reachable via
+            its published port on your local machine.
+          </p>
+          <CodeBlock
+            language="bash"
+            showLineNumbers
+            className="mx-auto max-w-xs overflow-scroll text-left sm:max-w-md sm:bg-gray-100 md:max-w-lg lg:max-w-4xl xl:max-w-6xl">
+            $ curl http://localhost:8080{'\n'}
+          </CodeBlock>
+
+          <p className="mb-4 max-w-prose text-left text-gray-700">
+            From another machine, you need to use the IP Address of the host, running the container.
+          </p>
+          <CodeBlock
+            language="bash"
+            showLineNumbers
+            className="mx-auto max-w-xs overflow-scroll text-left sm:max-w-md sm:bg-gray-100 md:max-w-lg lg:max-w-4xl xl:max-w-6xl">
+            $ curl http://{'<IP_Address>'}:8080{'\n'}
+          </CodeBlock>
+
+          <div className="mx-auto max-w-lg rounded-md bg-white/50 px-6 py-6 shadow-lg dark:bg-gray-900/50">
+            <h5 className="text-gray-700">Note:</h5>
+            <p className="text-left text-gray-700">
+              Instead of using <code>curl</code>, you can also point a browser to <code>http://localhost:8080</code>.
+            </p>
+          </div>
         </div>
       </div>
-    </div>
     </section>
-  )
-}
+  );
+};
 
 /* PAGE CONTENT */
 function GetStarted() {
   return (
     <Layout>
-      <PageHeader title={header.title} description={header.subtitle} basicResources={true} instructions={header.instructions} />
+      <PageHeader
+        title={header.title}
+        description={header.subtitle}
+        basicResources={true}
+        instructions={header.instructions}
+      />
       <GetHelpSection />
       <SearchPullListSection />
       <RunListContainersSection />
diff --git a/src/theme/NotFound.tsx b/src/theme/NotFound.tsx
index 3c2d4a607a..82d73178d9 100644
--- a/src/theme/NotFound.tsx
+++ b/src/theme/NotFound.tsx
@@ -6,9 +6,9 @@ import Link from '../components/utilities/Link';
 import './styles.css';
 
 export default function NotFound(): JSX.Element {
-  const [currUrl, setCurrUrl] = useState("");
-  const [relativeUrl, setRelativeUrl] = useState("");
-  const [searchLink, setSearchLink] = useState("");
+  const [currUrl, setCurrUrl] = useState('');
+  const [relativeUrl, setRelativeUrl] = useState('');
+  const [searchLink, setSearchLink] = useState('');
 
   useEffect(() => {
     if (typeof window !== undefined) {
@@ -18,27 +18,27 @@ export default function NotFound(): JSX.Element {
 
   useEffect(() => {
     if (currUrl !== '') {
-      let splitPath = currUrl.split("/");
-      let relativePath = splitPath[splitPath.length - 1]
+      const splitPath = currUrl.split('/');
+      const relativePath = splitPath[splitPath.length - 1];
       if (relativePath !== '') {
         setRelativeUrl(relativePath);
       }
     }
-  }, [currUrl])
+  }, [currUrl]);
 
   useEffect(() => {
     if (relativeUrl !== '') {
-      setSearchLink(`https://duckduckgo.com/?t=h_&kl=us-en&kp=-1&q=podman%2F${relativeUrl}&ia=web`)
+      setSearchLink(`https://duckduckgo.com/?t=h_&kl=us-en&kp=-1&q=podman%2F${relativeUrl}&ia=web`);
     }
-  }, [relativeUrl])
+  }, [relativeUrl]);
 
   const Messages = [
     "Oh no! We can't seal the deal!",
     "We can't seal with it!",
-    "This is seal-iously embarassing...",
+    'This is seal-iously embarassing...',
     "Seal-ly us! We can't find that page.",
     "Don't flip, but we can't find that.",
-    "We don't sea that page."
+    "We don't sea that page.",
   ];
   const rand_seed = Math.floor(Math.random() * Messages.length);
 
@@ -51,36 +51,36 @@ export default function NotFound(): JSX.Element {
         })}
       />
       <Layout>
-        <main className="container margin-vert--xl">
-          <div className='img-container flex justify-center'>
+        <main className="margin-vert--xl container">
+          <div className="img-container flex justify-center">
             <img src="/images/optimized/characters/confused-seal-231w-248h.webp" alt="Not Found" />
           </div>
           <div className="row">
             <div className="col title-row-col-1">
               <h1 className="hero__title">
-                <div
-                  id="theme-NotFound-title">
-                  {Messages[rand_seed]}
-                </div>
+                <div id="theme-NotFound-title">{Messages[rand_seed]}</div>
               </h1>
               <p>
-                <div
-                  id="theme-NotFound-p1">
+                <div id="theme-NotFound-p1">
                   We could not find what you were looking for: &nbsp;
                   <Link
-                      text={currUrl}
-                      fontSize='font-bold'
-                      textColor='dark:text-white text-black'
-                      hoverColor=''
-                      underline='no-underline hover:no-underline'
-                      path='#' /> isn't a working link. <br />
-                  <span>The content may have moved; &nbsp;
+                    text={currUrl}
+                    fontSize="font-bold"
+                    textColor="dark:text-white text-black"
+                    hoverColor=""
+                    underline="no-underline hover:no-underline"
+                    path="#"
+                  />{' '}
+                  isn't a working link. <br />
+                  <span>
+                    The content may have moved; &nbsp;
                     <Link
-                      text='try a search for it'
-                      fontSize='font-bold'
-                      underline='no-underline hover:no-underline'
-                      target='_blank'
-                      path={searchLink} />
+                      text="try a search for it"
+                      fontSize="font-bold"
+                      underline="no-underline hover:no-underline"
+                      target="_blank"
+                      path={searchLink}
+                    />
                   </span>
                 </div>
               </p>
diff --git a/yarn.lock b/yarn.lock
index bffe2a48cb..36ead984de 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2611,6 +2611,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@pkgr/core@npm:^0.3.6":
+  version: 0.3.6
+  resolution: "@pkgr/core@npm:0.3.6"
+  checksum: 29082aa13d36f13fc41cdc64cb1feb36b630de0d6ebde84e2ff68e3d7a7f1dce4462cca91f76176c46e50bbca6b1e7f1fd9cf907af12d5d70da83bc981ca4ccf
+  languageName: node
+  linkType: hard
+
 "@polka/url@npm:^1.0.0-next.20":
   version: 1.0.0-next.23
   resolution: "@polka/url@npm:1.0.0-next.23"
@@ -5816,6 +5823,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-prettier@npm:^5.5.6":
+  version: 5.5.6
+  resolution: "eslint-plugin-prettier@npm:5.5.6"
+  dependencies:
+    prettier-linter-helpers: ^1.0.1
+    synckit: ^0.11.13
+  peerDependencies:
+    "@types/eslint": ">=8.0.0"
+    eslint: ">=8.0.0"
+    eslint-config-prettier: ">= 7.0.0 <10.0.0 || >=10.1.0"
+    prettier: ">=3.0.0"
+  peerDependenciesMeta:
+    "@types/eslint":
+      optional: true
+    eslint-config-prettier:
+      optional: true
+  checksum: 9e2d94d6631af110966733d19aea15699ef684b543de23d1812423b35a02203ac87ef2d8784f236950ecc4026828e98f00e7c2b41879ee9c974a0a0563f1c754
+  languageName: node
+  linkType: hard
+
 "eslint-scope@npm:5.1.1, eslint-scope@npm:^5.1.1":
   version: 5.1.1
   resolution: "eslint-scope@npm:5.1.1"
@@ -6099,6 +6126,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-diff@npm:^1.1.2":
+  version: 1.3.0
+  resolution: "fast-diff@npm:1.3.0"
+  checksum: d22d371b994fdc8cce9ff510d7b8dc4da70ac327bcba20df607dd5b9cae9f908f4d1028f5fe467650f058d1e7270235ae0b8230809a262b4df587a3b3aa216c3
+  languageName: node
+  linkType: hard
+
 "fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0":
   version: 3.3.1
   resolution: "fast-glob@npm:3.3.1"
@@ -9695,12 +9729,13 @@ __metadata:
     clsx: ^1.2.1
     eslint: ^8.32.0
     eslint-config-prettier: ^8.6.0
+    eslint-plugin-prettier: ^5.5.6
     html-react-parser: ^3.0.16
     husky: ^8.0.3
     lint-staged: ^13.1.0
     papaparse: ^5.4.1
     postcss: ^8.5.23
-    prettier: 2.8.8
+    prettier: ^3.3.3
     prettier-plugin-tailwindcss: ^0.8.1
     prism-react-renderer: ^1.3.5
     react: ^17.0.2
@@ -10239,6 +10274,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier-linter-helpers@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "prettier-linter-helpers@npm:1.0.1"
+  dependencies:
+    fast-diff: ^1.1.2
+  checksum: 2dc35f5036a35f4c4f5e645887edda1436acb63687a7f12b2383e0a6f3c1f76b8a0a4709fe4d82e19157210feb5984b159bb714d43290022911ab53d606474ec
+  languageName: node
+  linkType: hard
+
 "prettier-plugin-tailwindcss@npm:^0.8.1":
   version: 0.8.1
   resolution: "prettier-plugin-tailwindcss@npm:0.8.1"
@@ -10297,12 +10341,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:2.8.8":
-  version: 2.8.8
-  resolution: "prettier@npm:2.8.8"
+"prettier@npm:^3.3.3":
+  version: 3.9.6
+  resolution: "prettier@npm:3.9.6"
   bin:
-    prettier: bin-prettier.js
-  checksum: b49e409431bf129dd89238d64299ba80717b57ff5a6d1c1a8b1a28b590d998a34e083fa13573bc732bb8d2305becb4c9a4407f8486c81fa7d55100eb08263cf8
+    prettier: bin/prettier.cjs
+  checksum: 3fb6a3b6462b05afb825697a3fdcdd9bd1480c11d10d655b7ddbcaf2560beb695caffbe155b5020466005aa06bff74a61ba9c16e602bff849331b62f5db26cdf
   languageName: node
   linkType: hard
 
@@ -12077,6 +12121,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"synckit@npm:^0.11.13":
+  version: 0.11.13
+  resolution: "synckit@npm:0.11.13"
+  dependencies:
+    "@pkgr/core": ^0.3.6
+  checksum: ec989ed45f3df2e7eb3141f00060669fbc6cac5649846d0579f336cee4ab047c8bac65baa75b4df991e1c1bd224675b10efbe69af3596ead5180ec81a6d4ec06
+  languageName: node
+  linkType: hard
+
 "tailwind-scrollbar@npm:^3.0.0":
   version: 3.1.0
   resolution: "tailwind-scrollbar@npm:3.1.0"