diff --git a/CHANGELOG.md b/CHANGELOG.md
index 724f274..9d8f6dd 100755
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,6 @@ The format is based on Keep a Changelog and this project adheres to Semantic Ver
 
 Created Repo from template
 
-
 ### [Unreleased]
 
 Here we write upgrading notes for brands. It's a team effort to make them as straightforward as possible.
diff --git a/abcd.code-workspace b/abcd.code-workspace
index d914661..c5c3108 100644
--- a/abcd.code-workspace
+++ b/abcd.code-workspace
@@ -73,25 +73,9 @@
       "javascript": "javascriptreact"
     },
     "eslint.options": {
-      "extensions": [
-        ".js",
-        ".jsx",
-        ".md",
-        ".mdx",
-        ".ts",
-        ".tsx",
-        ".astro"
-      ]
+      "extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx", ".astro"]
     },
-    "eslint.validate": [
-      "mdx",
-      "markdown",
-      "javascript",
-      "javascriptreact",
-      "typescript",
-      "typescriptreact",
-      "astro"
-    ],
+    "eslint.validate": ["mdx", "markdown", "javascript", "javascriptreact", "typescript", "typescriptreact", "astro"],
     "explorer.compactFolders": false,
     "explorer.confirmDelete": false,
     "explorer.confirmDragAndDrop": false,
@@ -119,10 +103,7 @@
     },
     "git.autofetch": true,
     "git.branchPrefix": "feature/",
-    "git.branchProtection": [
-      "develop",
-      "main"
-    ],
+    "git.branchProtection": ["develop", "main"],
     "git.branchRandomName.enable": true,
     "git.confirmSync": false,
     "git.enableCommitSigning": false,
@@ -133,9 +114,7 @@
     "js/ts.implicitProjectConfig.checkJs": true,
     "peacock.affectSideBarBorder": true,
     "peacock.color": "#abcd00",
-    "prettier.documentSelectors": [
-      "**/*.astro"
-    ],
+    "prettier.documentSelectors": ["**/*.astro"],
     "prettier.printWidth": 120,
     "prettier.quoteProps": "consistent",
     "prettier.singleQuote": false,
@@ -189,4 +168,4 @@
       "titleBar.inactiveForeground": "#15202b99"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/components.json b/components.json
index fd741b6..1ef1e1d 100644
--- a/components.json
+++ b/components.json
@@ -14,4 +14,4 @@
     "components": "components",
     "utils": "utils"
   }
-}
\ No newline at end of file
+}
diff --git a/public/sitemap-index.html b/public/sitemap-index.html
index 03744d4..c8d37b5 100644
--- a/public/sitemap-index.html
+++ b/public/sitemap-index.html
@@ -3,4 +3,4 @@
   <sitemap>
     <loc>https://www.parixan.xyz/sitemap2.xml.gz</loc>
   </sitemap>
-</sitemapindex>
\ No newline at end of file
+</sitemapindex>
diff --git a/src/assets/styles/about.css b/src/assets/styles/about.css
index 8e95a17..6f34130 100644
--- a/src/assets/styles/about.css
+++ b/src/assets/styles/about.css
@@ -1,4 +1,4 @@
-@import url('./common.css');
+@import url("./common.css");
 
 .about-main {
   display: block;
@@ -7,8 +7,8 @@
 .container__about {
   padding: 1rem;
 
-  >.moto {
+  > .moto {
     color: #3a8657;
     font-size: 3rem;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/alphabet.css b/src/assets/styles/alphabet.css
index f3ce889..b5948ae 100644
--- a/src/assets/styles/alphabet.css
+++ b/src/assets/styles/alphabet.css
@@ -3,7 +3,7 @@
   grid-gap: 4px;
   container-type: inline-size;
   container-name: layout;
-  font-family: 'atkinson';
+  font-family: "atkinson";
 }
 
 .list {
@@ -39,7 +39,7 @@
   ::selection {
     color: red;
     background-color: yellow;
-    text-shadow: 5px 5px #558ABB;
+    text-shadow: 5px 5px #558abb;
   }
 }
 
@@ -53,4 +53,4 @@
     color: black;
     font-size: max(1.5em, 1.23em + 2cqi);
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/common.css b/src/assets/styles/common.css
index c12795d..579bd2c 100644
--- a/src/assets/styles/common.css
+++ b/src/assets/styles/common.css
@@ -2,4 +2,4 @@
   padding: 1rem;
   outline: 1px solid grey;
   cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/custom-fonts.css b/src/assets/styles/custom-fonts.css
index cc23dfc..9695d3a 100644
--- a/src/assets/styles/custom-fonts.css
+++ b/src/assets/styles/custom-fonts.css
@@ -2,8 +2,9 @@
 @supports font-format(woff2) {
   @font-face {
     font-family: "sportrop";
-    src: url("/fonts/sportrop-webfont.woff2") format("woff2"),
-        url("/fonts/sportrop-webfont.woff") format("woff");
+    src:
+      url("/fonts/sportrop-webfont.woff2") format("woff2"),
+      url("/fonts/sportrop-webfont.woff") format("woff");
     font-weight: normal;
     font-style: normal;
     font-display: swap;
@@ -11,8 +12,9 @@
 
   @font-face {
     font-family: "atkinson";
-    src: url("/fonts/atkinson-hyperlegible-regular-102-webfont.woff2") format("woff2"),
-        url("/fonts/atkinson-hyperlegible-regular-102-webfont.woff") format("woff");
+    src:
+      url("/fonts/atkinson-hyperlegible-regular-102-webfont.woff2") format("woff2"),
+      url("/fonts/atkinson-hyperlegible-regular-102-webfont.woff") format("woff");
     font-weight: normal;
     font-style: normal;
     font-display: swap;
diff --git a/src/assets/styles/dialog.css b/src/assets/styles/dialog.css
index ab40350..be19990 100644
--- a/src/assets/styles/dialog.css
+++ b/src/assets/styles/dialog.css
@@ -97,4 +97,4 @@ because the nesting selector cannot represent pseudo-elements. */
   dialog[open]::backdrop {
     background-color: var(--dialog__bg--1);
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/footer.css b/src/assets/styles/footer.css
index 1f704c7..c7bd7a2 100644
--- a/src/assets/styles/footer.css
+++ b/src/assets/styles/footer.css
@@ -6,7 +6,7 @@
 }
 
 .footer__nav {
-  @apply flex flex-col md:flex-row items-center justify-center gap-3 text-gray-700 underline underline-offset-2 dark:text-gray-500;
+  @apply flex flex-col items-center justify-center gap-3 text-gray-700 underline underline-offset-2 dark:text-gray-500 md:flex-row;
 }
 
 .footer__nav--item {
diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css
index 039f17d..f917737 100644
--- a/src/assets/styles/globals.css
+++ b/src/assets/styles/globals.css
@@ -11,7 +11,7 @@
     --background: #0f172a;
     --text: #f1f5f9;
     --border: #1e293b;
-    
+
     --header-h: 4rem;
     --footer-h: 4rem;
     --sidebar-w: 16rem;
@@ -177,4 +177,4 @@
   .text__active {
     @apply text-customLight-active dark:text-customDark-active;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/header.css b/src/assets/styles/header.css
index b9853b2..0c0ad15 100644
--- a/src/assets/styles/header.css
+++ b/src/assets/styles/header.css
@@ -33,7 +33,7 @@
 
   .caption {
     text-align: center;
-    
+
     h1 {
       font-size: 1.25rem;
       font-weight: 500;
@@ -58,4 +58,4 @@
   width: 2rem;
   border-radius: 50%;
   cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/menu.css b/src/assets/styles/menu.css
index 505f650..2047361 100644
--- a/src/assets/styles/menu.css
+++ b/src/assets/styles/menu.css
@@ -39,7 +39,7 @@
     background: color-mix(in srgb, var(--primary) 15%, transparent);
     color: var(--primary);
     font-weight: 600;
-    border-radius: 0.75rem; 
+    border-radius: 0.75rem;
   }
 
   .layout {
diff --git a/src/assets/styles/panel.css b/src/assets/styles/panel.css
index f084beb..10b18fc 100644
--- a/src/assets/styles/panel.css
+++ b/src/assets/styles/panel.css
@@ -21,7 +21,7 @@
 
 .panel-main {
   display: grid;
-  grid-template-areas: 'option' 'panel';
+  grid-template-areas: "option" "panel";
   grid-auto-flow: row;
   grid-template-rows: 15% 1fr;
   grid-gap: 0.8rem;
@@ -29,10 +29,9 @@
   background-color: var(--main__bg--1);
   height: calc(100dvh - 10rem);
   margin: 2rem;
-  overflow:hidden;
+  overflow: hidden;
 }
 
-
 .panel__options {
   grid-area: option;
   display: grid;
@@ -42,7 +41,6 @@
   align-self: baseline;
 }
 
-
 .range__option {
   color: var(--range__option__txt--4);
 }
@@ -78,7 +76,9 @@
   color: var(--panel__cell__txt--6);
   text-align: center;
   opacity: 1;
-  transition: transform 1s, opacity 1s;
+  transition:
+    transform 1s,
+    opacity 1s;
 }
 
 .panel__cell:nth-child(10n + 1) {
@@ -170,7 +170,7 @@
   column-gap: 10px;
 }
 
-input[type='radio'] {
+input[type="radio"] {
   opacity: 0;
   position: fixed;
   width: 0;
@@ -207,14 +207,14 @@ label:hover {
   background-color: var(--orientation__bg--9);
 }
 
-label:has(input[type='radio']:checked) {
+label:has(input[type="radio"]:checked) {
   color: var(--panel__cell__txt--6);
   background-color: var(--label__bg--10);
 }
 
 /* range slider */
 
-input[type=range] {
+input[type="range"] {
   overflow: hidden;
   height: 40px;
   border-radius: 1.2rem;
@@ -223,7 +223,7 @@ input[type=range] {
   background-color: #ddd;
 }
 
-input[type=range]::-webkit-slider-runnable-track {
+input[type="range"]::-webkit-slider-runnable-track {
   height: 40px;
   -webkit-appearance: none;
   appearance: none;
@@ -232,37 +232,41 @@ input[type=range]::-webkit-slider-runnable-track {
   transition: box-shadow 0.2s ease-in-out;
 }
 
-input[type=range]::-webkit-slider-thumb {
+input[type="range"]::-webkit-slider-thumb {
   width: 40px;
   -webkit-appearance: none;
   appearance: none;
   height: 40px;
   cursor: ew-resize;
   background: #fff;
-  box-shadow: -340px 0 0 320px #1597ff, inset 0 0 0 40px #1597ff;
+  box-shadow:
+    -340px 0 0 320px #1597ff,
+    inset 0 0 0 40px #1597ff;
   border-radius: 50%;
   -webkit-transition: box-shadow 0.2s ease-in-out;
   transition: box-shadow 0.2s ease-in-out;
   position: relative;
 }
 
-input[type=range]:active::-webkit-slider-thumb {
+input[type="range"]:active::-webkit-slider-thumb {
   background: #fff;
-  box-shadow: -340px 0 0 320px #1597ff, inset 0 0 0 3px #1597ff;
+  box-shadow:
+    -340px 0 0 320px #1597ff,
+    inset 0 0 0 3px #1597ff;
 }
 
-input[type=range]::-moz-range-progress {
+input[type="range"]::-moz-range-progress {
   background-color: #43e5f7;
 }
 
-input[type=range]::-moz-range-track {
+input[type="range"]::-moz-range-track {
   background-color: #9a905d;
 }
 
-input[type=range]::-ms-fill-lower {
+input[type="range"]::-ms-fill-lower {
   background-color: #43e5f7;
 }
 
-input[type=range]::-ms-fill-upper {
+input[type="range"]::-ms-fill-upper {
   background-color: #9a905d;
-}
\ No newline at end of file
+}
diff --git a/src/components/Alphabet.astro b/src/components/Alphabet.astro
index dc9c48f..56e61f7 100644
--- a/src/components/Alphabet.astro
+++ b/src/components/Alphabet.astro
@@ -1,22 +1,19 @@
 ---
+import "@/assets/styles/alphabet.css";
+import Letter from "@/components/Letter.astro";
+import { type LetterEntity } from "@/types";
 
-import '@/assets/styles/alphabet.css';
-import Letter from '@/components/Letter.astro';
-import { type LetterEntity } from '@/types';
-
-type Props =  {
+type Props = {
   title: string;
   list: LetterEntity[];
-}
+};
 
 const { title, list } = Astro.props;
-
 ---
 
 <div class="container__alphabet">
   <h1>{title}</h1>
-  <div class="list"  >
-    {list.map((item) =>  <Letter item={item}></Letter> )}
+  <div class="list">
+    {list.map((item) => <Letter item={item} />)}
   </div>
 </div>
-
diff --git a/src/components/Help.astro b/src/components/Help.astro
index 699e70d..2908148 100644
--- a/src/components/Help.astro
+++ b/src/components/Help.astro
@@ -8,6 +8,7 @@ interface Props {
 
 const { title, description } = Astro.props;
 ---
+
 <div id="hint" class="hint">❓</div>
 <dialog id="info" class="help-dialog">
   <div class="dialog-header">
@@ -19,7 +20,6 @@ const { title, description } = Astro.props;
   </div>
 </dialog>
 
-
 <script>
   const hint = document.querySelector("#hint");
   const infoDialog = document.querySelector("dialog");
diff --git a/src/components/Letter.astro b/src/components/Letter.astro
index e08a0af..a01d01a 100644
--- a/src/components/Letter.astro
+++ b/src/components/Letter.astro
@@ -3,22 +3,23 @@ import type { LetterEntity } from "@/types";
 
 type Props = {
   item: LetterEntity;
-}
-
-const { item: { letter, code} } = Astro.props
+};
 
+const {
+  item: { letter, code }
+} = Astro.props;
 ---
 
-<div class="letter" >
+<div class="letter">
   <p>{letter}</p>
   <p data-id="tgt" class="code">{code}</p>
 </div>
 
 <script>
   const tgt = document.querySelectorAll("[data-id]");
-  tgt?.forEach( elm => elm.addEventListener("click", (e: any) => {
+  tgt?.forEach((elm) =>
+    elm.addEventListener("click", (e: any) => {
       console.log("Hello, on client", e?.target?.textContent);
     })
   );
 </script>
-
diff --git a/src/layouts/common/Header.astro b/src/layouts/common/Header.astro
index c9ed1d1..0a87871 100755
--- a/src/layouts/common/Header.astro
+++ b/src/layouts/common/Header.astro
@@ -12,14 +12,20 @@ const { title, hasBack = true } = Astro.props;
     <Picture src={logoImage} formats={["png", "webp"]} alt="template logo" class="logo" />
     <span title={APP_NAME}>{APP_NAME}</span>
   </div>
-  
+
   <div class="caption">
     <h1>{title}</h1>
   </div>
 
   <div class="action-group">
     <slot name="left">
-      {hasBack && <a href="/" class="back">Back</a>}
+      {
+        hasBack && (
+          <a href="/" class="back">
+            Back
+          </a>
+        )
+      }
     </slot>
     <slot name="right" />
   </div>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 0313118..17eab2b 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -6,7 +6,7 @@ import BaseLayout from "@/layouts/Base";
 
 <BaseLayout meta={{ title: "About us" }}>
   <Fragment slot="header-right">
-    <Help 
+    <Help
       title="Hide & Seek Game"
       description="Press any alphabet key from keyboard and that letter will appears and when you press again then it will disappears. See some hover and active effects while hovering over each card."
     />
diff --git a/src/types/index.ts b/src/types/index.ts
index 9a0bb9a..aef002f 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,5 +1,4 @@
 export type { LinkProps } from "./link";
 export type { LetterEntity } from "./alphabet";
 
-
 export type { BlogCardProps, BlogMeta, BlogPost } from "./blog";
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index f17520f..c16f127 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -26,7 +26,7 @@ export const NavbarLinks: LinkProps[] = [
     title: "Panel",
     path: "/panel",
     isActive: true
-  },
+  }
 ];
 
 export const FooterLinks: LinkProps[] = [