diff --git a/abcd.code-workspace b/abcd.code-workspace
index de40a04..8de2032 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"
-      ]
-    },
-    "eslint.validate": [
-      "mdx",
-      "markdown",
-      "javascript",
-      "javascriptreact",
-      "typescript",
-      "typescriptreact",
-      "astro"
-    ],
+      "extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx", ".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,
@@ -192,4 +171,4 @@
       ".githooks/**": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/docs/pages.md b/docs/pages.md
index 813a586..174be0e 100644
--- a/docs/pages.md
+++ b/docs/pages.md
@@ -124,6 +124,14 @@ This document describes the functionality and purpose of each page in the applic
 - Controls for record/pause/stop
 - Clip management with naming and deletion
 
+#### Vedic Time Page (/pages/vedic.astro)
+
+![Vedic Time page](../src/assets/screenshots/vedic.png)
+
+- Vedic time unit conversion tool
+- Interactive converter with input form
+- Comprehensive reference of vedic time units
+
 #### Clan Explorer
 
 ![Clan explorer page](../src/assets/screenshots/clan.png)
diff --git a/src/assets/json/state.json b/src/assets/json/state.json
index 50e16b8..b4582f3 100644
--- a/src/assets/json/state.json
+++ b/src/assets/json/state.json
@@ -477,4 +477,4 @@
     "official_website": "https://www.py.gov.in",
     "isActive": true
   }
-]
\ No newline at end of file
+]
diff --git a/src/assets/json/vedic.json b/src/assets/json/vedic.json
new file mode 100644
index 0000000..2a3a984
--- /dev/null
+++ b/src/assets/json/vedic.json
@@ -0,0 +1,76 @@
+{
+  "time_units": [
+    {
+      "name": "क्षण",
+      "seconds": 1,
+      "minutes": 0.01667,
+      "years": 0.0000000317
+    },
+    {
+      "name": "पल",
+      "seconds": 24,
+      "minutes": 0.4,
+      "years": 0.00000076
+    },
+    {
+      "name": "घटी",
+      "seconds": 1440,
+      "minutes": 24,
+      "years": 0.000027
+    },
+    {
+      "name": "प्रहर",
+      "seconds": 10800,
+      "minutes": 180,
+      "years": 0.000342
+    },
+    {
+      "name": "दिन",
+      "seconds": 86400,
+      "minutes": 1440,
+      "years": 0.00274
+    },
+    {
+      "name": "पक्ष",
+      "seconds": 1296000,
+      "minutes": 21600,
+      "years": 0.0317
+    },
+    {
+      "name": "मास",
+      "seconds": 2592000,
+      "minutes": 43200,
+      "years": 0.0635
+    },
+    {
+      "name": "ऋतु",
+      "seconds": 5184000,
+      "minutes": 86400,
+      "years": 0.127
+    },
+    {
+      "name": "अयन",
+      "seconds": 15552000,
+      "minutes": 259200,
+      "years": 0.381
+    },
+    {
+      "name": "वर्ष",
+      "seconds": 31104000,
+      "minutes": 518400,
+      "years": 1
+    },
+    {
+      "name": "युग",
+      "seconds": 1209600000,
+      "minutes": 20160000,
+      "years": 38880
+    },
+    {
+      "name": "कल्प",
+      "seconds": 31104000000000,
+      "minutes": 518400000000,
+      "years": 1000000000
+    }
+  ]
+}
diff --git a/src/assets/screenshots/vedic.png b/src/assets/screenshots/vedic.png
new file mode 100644
index 0000000..52be203
Binary files /dev/null and b/src/assets/screenshots/vedic.png differ
diff --git a/src/assets/styles/alphabets/[alphabet]/board.css b/src/assets/styles/alphabets/[alphabet]/board.css
index f831cd6..6c38545 100644
--- a/src/assets/styles/alphabets/[alphabet]/board.css
+++ b/src/assets/styles/alphabets/[alphabet]/board.css
@@ -59,12 +59,10 @@
   }
 
   & .container__alphabet::before {
-    content: '';
+    content: "";
     position: absolute;
     inset: 0;
-    background: radial-gradient(circle at 50% 0%,
-        color-mix(in srgb, var(--primary) 5%, transparent),
-        transparent 70%);
+    background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 5%, transparent), transparent 70%);
     pointer-events: none;
     z-index: -1;
   }
@@ -78,25 +76,25 @@
   }
 
   /* Animation for list items */
-  & .container__alphabet .list>* {
+  & .container__alphabet .list > * {
     opacity: 0;
     transform: translateY(20px);
     animation: slideUp 0.6s ease forwards;
   }
 
-  & .container__alphabet .list>*:nth-child(1n) {
+  & .container__alphabet .list > *:nth-child(1n) {
     animation-delay: 0.1s;
   }
 
-  & .container__alphabet .list>*:nth-child(2n) {
+  & .container__alphabet .list > *:nth-child(2n) {
     animation-delay: 0.2s;
   }
 
-  & .container__alphabet .list>*:nth-child(3n) {
+  & .container__alphabet .list > *:nth-child(3n) {
     animation-delay: 0.3s;
   }
 
-  & .container__alphabet .list>*:nth-child(4n) {
+  & .container__alphabet .list > *:nth-child(4n) {
     animation-delay: 0.4s;
   }
 
@@ -133,4 +131,4 @@
       grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/alphabets/[alphabet]/playground.css b/src/assets/styles/alphabets/[alphabet]/playground.css
index 74c09c8..f00b95a 100644
--- a/src/assets/styles/alphabets/[alphabet]/playground.css
+++ b/src/assets/styles/alphabets/[alphabet]/playground.css
@@ -151,4 +151,4 @@
   50% {
     border-color: transparent;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/alphabets/index.css b/src/assets/styles/alphabets/index.css
index 79e2e4f..801bf17 100644
--- a/src/assets/styles/alphabets/index.css
+++ b/src/assets/styles/alphabets/index.css
@@ -100,7 +100,6 @@
   }
 }
 
-
 @keyframes fadeInUp {
   to {
     opacity: 1;
@@ -132,4 +131,4 @@
       padding: 0.75rem 1rem;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/blogs/blog.css b/src/assets/styles/blogs/blog.css
index 3c5f030..31b4031 100644
--- a/src/assets/styles/blogs/blog.css
+++ b/src/assets/styles/blogs/blog.css
@@ -10,7 +10,7 @@
   }
 
   & .blog-post-header::after {
-    content: '';
+    content: "";
     position: absolute;
     bottom: -2rem;
     left: 50%;
@@ -127,9 +127,6 @@
     margin: 3rem 0;
     border: none;
     height: 1px;
-    background: linear-gradient(90deg,
-        transparent,
-        var(--border),
-        transparent);
+    background: linear-gradient(90deg, transparent, var(--border), transparent);
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/blogs/index.css b/src/assets/styles/blogs/index.css
index e1e5ed6..ac27779 100644
--- a/src/assets/styles/blogs/index.css
+++ b/src/assets/styles/blogs/index.css
@@ -14,9 +14,7 @@
   & .blog-card {
     height: 100%;
     border-radius: 1rem;
-    background: linear-gradient(145deg,
-        color-mix(in srgb, var(--background) 97%, var(--text) 3%),
-        var(--background));
+    background: linear-gradient(145deg, color-mix(in srgb, var(--background) 97%, var(--text) 3%), var(--background));
     box-shadow: 0 8px 32px -10px rgba(0, 0, 0, 0.3);
     overflow: hidden;
     transform-style: preserve-3d;
@@ -46,16 +44,13 @@
   }
 
   & .blog-card-image::after {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(180deg,
-        transparent 0%,
-        transparent 70%,
-        var(--background) 100%);
+    background: linear-gradient(180deg, transparent 0%, transparent 70%, var(--background) 100%);
   }
 
   & .blog-card-image img {
@@ -75,9 +70,7 @@
     gap: 1rem;
     padding: 2rem;
     flex: 1;
-    background: linear-gradient(to bottom,
-        transparent,
-        color-mix(in srgb, var(--background) 95%, var(--primary) 5%));
+    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--background) 95%, var(--primary) 5%));
   }
 
   & .blog-card-title {
@@ -169,4 +162,4 @@
       grid-template-columns: repeat(4, 1fr);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/crossword.css b/src/assets/styles/crossword.css
index ee9652d..4e75f18 100644
--- a/src/assets/styles/crossword.css
+++ b/src/assets/styles/crossword.css
@@ -10,18 +10,18 @@
   --accent6-color: #818cf8;
   --accent7-color: #f97316;
   --accent8-color: #38bdf8;
-  
+
   /* Text & Background */
   --text-color: #1e293b;
   --text-light: #64748b;
   --bg-color: #f8fafc;
   --bg-dark: #0f172a;
-  
+
   /* Effects */
   --border-radius: 16px;
   --box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
   --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  
+
   /* Stats */
   --stats-button-bg: #e2e8f0;
   --stats-button-text: #334155;
@@ -126,7 +126,7 @@
   font-weight: 600;
   font-size: 1rem;
   letter-spacing: 0.01em;
-  
+
   &:hover {
     background: var(--accent6-color);
     transform: translateY(-3px);
@@ -136,30 +136,43 @@
     transform: translateY(0);
   }
 
-  &#newPuzzleBtn { 
+  &#newPuzzleBtn {
     background: var(--secondary-color);
-    &:hover { background: var(--accent7-color); }
+    &:hover {
+      background: var(--accent7-color);
+    }
   }
-  
-  &#resetBtn { 
+
+  &#resetBtn {
     background: var(--accent4-color);
-    &:hover { background: var(--accent6-color); }
+    &:hover {
+      background: var(--accent6-color);
+    }
   }
-  
-  &#solutionBtn { 
+
+  &#solutionBtn {
     background: var(--accent1-color);
-    &:hover { background: var(--accent5-color); }
+    &:hover {
+      background: var(--accent5-color);
+    }
   }
-  
-  &#clearBtn { 
+
+  &#clearBtn {
     background: var(--accent5-color);
-    &:hover { background: var(--accent1-color); }
-    &::before { content: "🗑️"; margin-right: 8px; }
+    &:hover {
+      background: var(--accent1-color);
+    }
+    &::before {
+      content: "🗑️";
+      margin-right: 8px;
+    }
   }
-  
-  &#themeToggle { 
+
+  &#themeToggle {
     background: var(--accent6-color);
-    &:hover { background: var(--primary-color); }
+    &:hover {
+      background: var(--primary-color);
+    }
   }
 }
 
@@ -169,7 +182,9 @@
   gap: 12px;
   padding: 28px;
   border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow), 0 0 0 15px rgba(99, 102, 241, 0.08);
+  box-shadow:
+    var(--box-shadow),
+    0 0 0 15px rgba(99, 102, 241, 0.08);
   margin: 0 auto;
   width: 100%;
   max-width: 600px;
@@ -209,15 +224,31 @@
       border-color: transparent !important;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     }
-    
-    &.word-color-1 { background-color: var(--accent7-color); }
-    &.word-color-2 { background-color: var(--secondary-color); }
-    &.word-color-3 { background-color: var(--accent1-color); }
-    &.word-color-4 { background-color: var(--accent4-color); }
-    &.word-color-5 { background-color: var(--accent5-color); }
-    &.word-color-6 { background-color: var(--accent6-color); }
-    &.word-color-7 { background-color: var(--accent3-color); }
-    &.word-color-8 { background-color: var(--accent8-color); }
+
+    &.word-color-1 {
+      background-color: var(--accent7-color);
+    }
+    &.word-color-2 {
+      background-color: var(--secondary-color);
+    }
+    &.word-color-3 {
+      background-color: var(--accent1-color);
+    }
+    &.word-color-4 {
+      background-color: var(--accent4-color);
+    }
+    &.word-color-5 {
+      background-color: var(--accent5-color);
+    }
+    &.word-color-6 {
+      background-color: var(--accent6-color);
+    }
+    &.word-color-7 {
+      background-color: var(--accent3-color);
+    }
+    &.word-color-8 {
+      background-color: var(--accent8-color);
+    }
   }
 }
 
@@ -328,10 +359,18 @@ details {
       background: linear-gradient(135deg, var(--accent2-color), var(--accent8-color));
     }
 
-    &:nth-child(1) { background: var(--accent4-color); }
-    &:nth-child(2) { background: var(--secondary-color); }
-    &:nth-child(3) { background: linear-gradient(135deg, var(--accent5-color), var(--accent3-color)); }
-    &:nth-child(4) { background: linear-gradient(135deg, var(--accent2-color), var(--accent8-color)); }
+    &:nth-child(1) {
+      background: var(--accent4-color);
+    }
+    &:nth-child(2) {
+      background: var(--secondary-color);
+    }
+    &:nth-child(3) {
+      background: linear-gradient(135deg, var(--accent5-color), var(--accent3-color));
+    }
+    &:nth-child(4) {
+      background: linear-gradient(135deg, var(--accent2-color), var(--accent8-color));
+    }
   }
 }
 
@@ -389,7 +428,7 @@ details {
     border: 2px solid var(--primary-color);
     /* Pop-up animation for mobile */
     /*transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;*/
-    
+
     .settings-header {
       display: flex;
       justify-content: space-between;
@@ -398,13 +437,13 @@ details {
       padding-bottom: 10px;
       border-bottom: 2px solid var(--accent2-color);
     }
-    
+
     .settings-title {
       font-weight: 700;
       font-size: 1.1rem;
       color: var(--primary-color);
     }
-    
+
     .close-settings {
       background: transparent;
       border: none;
@@ -415,22 +454,22 @@ details {
       align-items: center;
       justify-content: center;
       border-radius: 50%;
-      
+
       &:hover {
         background: rgba(99, 102, 241, 0.1);
       }
-      
+
       svg {
         width: 20px;
         height: 20px;
         color: var(--accent1-color);
       }
     }
-    
+
     .controls-group {
       gap: 12px;
     }
-    
+
     &.active {
       opacity: 1;
       visibility: visible;
@@ -443,7 +482,7 @@ details {
     padding: 18px;
     max-width: 100%;
     gap: 8px;
-    
+
     .cell {
       font-size: 1.3rem;
       border-width: 2px;
@@ -456,24 +495,24 @@ details {
     right: 25px;
     width: 50px;
     height: 50px;
-    
+
     svg {
       width: 24px;
       height: 24px;
     }
   }
-  
+
   .control-btn {
     padding: 12px 16px;
     font-size: 0.9rem;
   }
-  
+
   .stats-container {
     flex-wrap: wrap;
     justify-content: center;
     gap: 16px;
   }
-  
+
   .stats-button {
     min-width: 80px;
     padding: 12px 20px;
@@ -488,54 +527,54 @@ details {
     width: 45px;
     height: 45px;
   }
-  
+
   .settings-panel {
     width: 85%;
     max-width: 260px;
     padding: 14px;
   }
-  
+
   .stats-container {
     flex-wrap: wrap;
     justify-content: center;
     gap: 10px;
   }
-  
+
   .stats-button {
     padding: 10px 16px;
     font-size: 0.85rem;
     min-width: 70px;
   }
-  
+
   .control-btn {
     padding: 10px 14px;
     font-size: 0.85rem;
   }
-  
+
   details summary {
     padding: 12px 16px;
-    
+
     &::after {
       right: 16px;
       width: 16px;
       height: 16px;
     }
   }
-  
+
   .word-list {
     gap: 8px;
     padding: 12px;
-    
+
     .word {
       padding: 6px 12px;
       font-size: 0.9rem;
     }
   }
-  
+
   .grid {
     padding: 12px;
     gap: 6px;
-    
+
     .cell {
       font-size: 1.4rem;
       border-width: 2px;
@@ -548,43 +587,43 @@ details {
   .grid {
     padding: 8px;
     gap: 4px;
-    
+
     .cell {
       font-size: 1.3rem;
       border-width: 1px;
       border-radius: 6px;
     }
   }
-  
+
   .settings-trigger {
     top: 72px;
     right: 10px;
     width: 40px;
     height: 40px;
-    
+
     svg {
       width: 20px;
       height: 20px;
     }
   }
-  
+
   .settings-panel {
     width: 90%;
     max-width: 240px;
     padding: 12px;
   }
-  
+
   .control-btn {
     padding: 8px 12px;
     font-size: 0.8rem;
   }
-  
+
   .stats-button {
     padding: 8px 12px;
     font-size: 0.8rem;
     min-width: 65px;
   }
-  
+
   .word-list .word {
     padding: 5px 10px;
     font-size: 0.8rem;
@@ -610,7 +649,9 @@ details {
       border-color: #475569;
       color: #f1f5f9;
 
-      &:hover { background: var(--accent1-color); }
+      &:hover {
+        background: var(--accent1-color);
+      }
       &.selected {
         background: var(--primary-color);
         box-shadow: 0 8px 20px rgba(167, 139, 250, 0.4);
@@ -622,7 +663,7 @@ details {
   details {
     background-color: rgba(167, 139, 250, 0.15);
     border-left-color: var(--primary-color);
-    
+
     summary::after {
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
     }
@@ -630,25 +671,25 @@ details {
 
   .settings-panel {
     background: #1e293b;
-    
+
     @media (min-width: 769px) {
       border-image: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--accent4-color)) 1;
     }
-    
+
     @media (max-width: 768px) {
       border-color: var(--primary-color);
-      
+
       .settings-title {
         color: var(--primary-color);
       }
-      
+
       .close-settings svg {
         color: var(--accent1-color);
       }
     }
   }
-  
+
   .settings-backdrop {
     background: rgba(0, 0, 0, 0.7);
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/header.css b/src/assets/styles/header.css
index 40c845b..72395f9 100644
--- a/src/assets/styles/header.css
+++ b/src/assets/styles/header.css
@@ -73,4 +73,4 @@
   width: 2rem;
   border-radius: 50%;
   cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/map/map.css b/src/assets/styles/map/map.css
index ba13f1e..42bf2a2 100644
--- a/src/assets/styles/map/map.css
+++ b/src/assets/styles/map/map.css
@@ -37,4 +37,4 @@
     fill: #ffa500;
     transform: scale(1);
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/map/state.css b/src/assets/styles/map/state.css
index ce4d033..74b4772 100644
--- a/src/assets/styles/map/state.css
+++ b/src/assets/styles/map/state.css
@@ -103,7 +103,8 @@
   box-shadow: var(--shadow-md);
 }
 
-.info-table th, .info-table td {
+.info-table th,
+.info-table td {
   padding: calc(var(--spacing-unit) * 1.2);
   border: 1px solid var(--border-color);
   color: rgba(46, 41, 55, 0.911);
@@ -176,11 +177,12 @@
     font-size: 2rem;
   }
 
-  #state-svg-container, .right-content {
+  #state-svg-container,
+  .right-content {
     flex: 1;
   }
 
   .info-table {
     font-size: 0.9rem;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/varnmala/alphabet.css b/src/assets/styles/varnmala/alphabet.css
index 4216eba..1310969 100644
--- a/src/assets/styles/varnmala/alphabet.css
+++ b/src/assets/styles/varnmala/alphabet.css
@@ -31,9 +31,8 @@
 }
 
 .container__alphabets {
-
   #english,
   & #hindi {
     scroll-margin-top: calc(var(--header-height) + 80px);
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/varnmala/barahkhadi/consonant.css b/src/assets/styles/varnmala/barahkhadi/consonant.css
index c549a0a..fb9b36c 100644
--- a/src/assets/styles/varnmala/barahkhadi/consonant.css
+++ b/src/assets/styles/varnmala/barahkhadi/consonant.css
@@ -60,4 +60,4 @@
       grid-template-columns: 1fr;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/varnmala/barahkhadi/index.css b/src/assets/styles/varnmala/barahkhadi/index.css
index 60a2484..f1d8299 100644
--- a/src/assets/styles/varnmala/barahkhadi/index.css
+++ b/src/assets/styles/varnmala/barahkhadi/index.css
@@ -104,7 +104,9 @@
     border: 1px solid var(--border);
     border-radius: 0.5rem;
     box-shadow: 0 4px 12px color-mix(in srgb, var(--text) 15%, transparent);
-    transition: opacity 0.2s, visibility 0.2s;
+    transition:
+      opacity 0.2s,
+      visibility 0.2s;
     display: flex;
     align-items: flex-end;
     justify-content: center;
@@ -173,4 +175,4 @@
     background-color: color-mix(in srgb, var(--primary) 15%, var(--background) 85%);
     transition: all 0.2s ease;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/varnmala/english.css b/src/assets/styles/varnmala/english.css
index d9433b5..ac9ce0d 100644
--- a/src/assets/styles/varnmala/english.css
+++ b/src/assets/styles/varnmala/english.css
@@ -48,11 +48,13 @@
   }
 
   & .bg-pattern1 {
-    background-image: repeating-linear-gradient(45deg,
-        rgba(0, 0, 0, 0.1) 0px,
-        rgba(0, 0, 0, 0.1) 2px,
-        transparent 2px,
-        transparent 4px);
+    background-image: repeating-linear-gradient(
+      45deg,
+      rgba(0, 0, 0, 0.1) 0px,
+      rgba(0, 0, 0, 0.1) 2px,
+      transparent 2px,
+      transparent 4px
+    );
   }
 
   & .no-background {
@@ -130,11 +132,13 @@
   }
 
   .bg-pattern1 {
-    background-image: repeating-linear-gradient(45deg,
-        rgba(0, 0, 0, 0.1) 0px,
-        rgba(0, 0, 0, 0.1) 2px,
-        transparent 2px,
-        transparent 4px);
+    background-image: repeating-linear-gradient(
+      45deg,
+      rgba(0, 0, 0, 0.1) 0px,
+      rgba(0, 0, 0, 0.1) 2px,
+      transparent 2px,
+      transparent 4px
+    );
   }
 
   .no-background {
@@ -154,11 +158,13 @@
   }
 
   .bg-pattern1 {
-    background-image: repeating-linear-gradient(45deg,
-        rgba(0, 0, 0, 0.1) 0px,
-        rgba(0, 0, 0, 0.1) 2px,
-        transparent 2px,
-        transparent 4px);
+    background-image: repeating-linear-gradient(
+      45deg,
+      rgba(0, 0, 0, 0.1) 0px,
+      rgba(0, 0, 0, 0.1) 2px,
+      transparent 2px,
+      transparent 4px
+    );
   }
 
   .no-background {
diff --git a/src/assets/styles/varnmala/index.css b/src/assets/styles/varnmala/index.css
index cc6ba7f..bcd2b58 100644
--- a/src/assets/styles/varnmala/index.css
+++ b/src/assets/styles/varnmala/index.css
@@ -103,4 +103,4 @@
   .card__link {
     padding: 1.5rem;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/vedic.css b/src/assets/styles/vedic.css
new file mode 100644
index 0000000..ffb1857
--- /dev/null
+++ b/src/assets/styles/vedic.css
@@ -0,0 +1,149 @@
+.container__vedic {
+  min-height: 100vh;
+  padding: 3rem 1.5rem;
+
+  & .vedic__layout {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: grid;
+    align-items: center;
+    gap: 2rem;
+    grid-template-columns: 1fr 1.2fr;
+  }
+
+  & .converter__card,
+  & .units__card {
+    height: fit-content;
+    border-radius: 1rem;
+    padding: 2rem;
+    border: 2px solid var(--border);
+    background-color: color-mix(in srgb, var(--background) 97%, var(--text) 3%);
+  }
+
+  & .converter__form {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  & .form__group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  & .form__group label {
+    color: var(--text);
+    font-size: 1.125rem;
+    font-weight: 500;
+  }
+
+  & input,
+  & select {
+    width: 100%;
+    padding: 1rem;
+    border-radius: 0.75rem;
+    border: 1px solid var(--border);
+    background-color: var(--background);
+    color: var(--text);
+    font-size: 1.125rem;
+  }
+
+  & input:focus,
+  & select:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
+  }
+
+  & .convert__button {
+    width: 100%;
+    padding: 1rem;
+    border-radius: 0.75rem;
+    background-color: var(--primary);
+    color: var(--background);
+    font-size: 1.125rem;
+    font-weight: 500;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.2s;
+  }
+
+  & .convert__button:hover {
+    opacity: 0.9;
+  }
+
+  & .result__display {
+    display: none;
+    padding: 1.5rem;
+    border-radius: 0.75rem;
+    background-color: color-mix(in srgb, var(--background) 95%, var(--text) 5%);
+    color: var(--text);
+    text-align: center;
+    font-size: 1.25rem;
+    font-weight: 500;
+  }
+
+  & .units__title {
+    color: var(--text);
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+  }
+
+  & .units__grid {
+    display: grid;
+    gap: 1rem;
+    max-height: 600px;
+    overflow-y: auto;
+    padding-right: 0.5rem;
+  }
+
+  & .unit__item {
+    padding: 1.25rem;
+    border-radius: 0.75rem;
+    border: 1px solid var(--border);
+    background-color: var(--background);
+  }
+
+  & .unit__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
+  & .unit__header h3 {
+    color: var(--primary);
+    font-size: 1.25rem;
+    font-weight: 500;
+  }
+
+  & .approx {
+    color: var(--text);
+    opacity: 0.6;
+    font-size: 0.875rem;
+  }
+
+  & .unit__details {
+    margin-top: 0.75rem;
+    display: grid;
+    gap: 0.375rem;
+    color: var(--text);
+  }
+
+  & .unit__value {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  & .icon {
+    opacity: 0.6;
+  }
+
+  @media (max-width: 768px) {
+    & .vedic__layout {
+      grid-template-columns: 1fr;
+    }
+  }
+}
diff --git a/src/components/LetterCard.astro b/src/components/LetterCard.astro
index e343678..c36af9a 100644
--- a/src/components/LetterCard.astro
+++ b/src/components/LetterCard.astro
@@ -79,7 +79,8 @@ const { item, category } = Astro.props;
       background-color: var(--border);
     }
 
-    & .character, .flipped__text {
+    & .character,
+    .flipped__text {
       display: flex;
       justify-content: center;
       align-items: center;
diff --git a/src/data/alphabets.json b/src/data/alphabets.json
index 8f76141..841e97f 100644
--- a/src/data/alphabets.json
+++ b/src/data/alphabets.json
@@ -9,14 +9,14 @@
         "code": 65,
         "text": "Apple",
         "description": "",
-        "emoji" : "🍎"
+        "emoji": "🍎"
       },
       {
         "id": 2,
         "letter": "B",
         "code": 66,
         "text": "Bat",
-        "emoji" : "🦇",
+        "emoji": "🦇",
         "description": ""
       },
       {
@@ -24,7 +24,7 @@
         "letter": "C",
         "code": 67,
         "text": "Cat",
-        "emoji" : "🐱",
+        "emoji": "🐱",
         "description": ""
       },
       {
@@ -32,7 +32,7 @@
         "letter": "D",
         "code": 68,
         "text": "Dog",
-        "emoji" : "🐶",
+        "emoji": "🐶",
         "description": ""
       },
       {
@@ -40,7 +40,7 @@
         "letter": "E",
         "code": 69,
         "text": "Elephant",
-        "emoji" : "🐘",
+        "emoji": "🐘",
         "description": ""
       },
       {
@@ -48,7 +48,7 @@
         "letter": "F",
         "code": 70,
         "text": "Fish",
-        "emoji" : "🐟",
+        "emoji": "🐟",
         "description": ""
       },
       {
@@ -56,7 +56,7 @@
         "letter": "G",
         "code": 71,
         "text": "Goat",
-        "emoji" : "🐐",
+        "emoji": "🐐",
         "description": ""
       },
       {
@@ -64,7 +64,7 @@
         "letter": "H",
         "code": 72,
         "text": "Hat",
-        "emoji" : "🎩",
+        "emoji": "🎩",
         "description": ""
       },
       {
@@ -72,7 +72,7 @@
         "letter": "I",
         "code": 73,
         "text": "Ice",
-        "emoji" : "🧊",
+        "emoji": "🧊",
         "description": ""
       },
       {
@@ -80,7 +80,7 @@
         "letter": "J",
         "code": 74,
         "text": "Jug",
-        "emoji" : "🏺",
+        "emoji": "🏺",
         "description": ""
       },
       {
@@ -88,7 +88,7 @@
         "letter": "K",
         "code": 75,
         "text": "Kite",
-        "emoji" : "🪁",
+        "emoji": "🪁",
         "description": ""
       },
       {
@@ -96,7 +96,7 @@
         "letter": "L",
         "code": 76,
         "text": "Lamp",
-        "emoji" : "💡",
+        "emoji": "💡",
         "description": ""
       },
       {
@@ -104,7 +104,7 @@
         "letter": "M",
         "code": 77,
         "text": "Moon",
-        "emoji" : "🌙",
+        "emoji": "🌙",
         "description": ""
       },
       {
@@ -112,7 +112,7 @@
         "letter": "N",
         "code": 78,
         "text": "Nest",
-        "emoji" : "🐣",
+        "emoji": "🐣",
         "description": ""
       },
       {
@@ -120,7 +120,7 @@
         "letter": "O",
         "code": 79,
         "text": "Orange",
-        "emoji" : "🍊",
+        "emoji": "🍊",
         "description": ""
       },
       {
@@ -128,7 +128,7 @@
         "letter": "P",
         "code": 80,
         "text": "Pen",
-        "emoji" : "🖊️",
+        "emoji": "🖊️",
         "description": ""
       },
       {
@@ -136,7 +136,7 @@
         "letter": "Q",
         "code": 81,
         "text": "Queen",
-        "emoji" : "👑",
+        "emoji": "👑",
         "description": ""
       },
       {
@@ -144,7 +144,7 @@
         "letter": "R",
         "code": 82,
         "text": "Rat",
-        "emoji" : "🐀",
+        "emoji": "🐀",
         "description": ""
       },
       {
@@ -152,7 +152,7 @@
         "letter": "S",
         "code": 83,
         "text": "Sun",
-        "emoji" : "☀️",
+        "emoji": "☀️",
         "description": ""
       },
       {
@@ -160,7 +160,7 @@
         "letter": "T",
         "code": 84,
         "text": "Tree",
-        "emoji" : "🌳",
+        "emoji": "🌳",
         "description": ""
       },
       {
@@ -168,7 +168,7 @@
         "letter": "U",
         "code": 85,
         "text": "Umbrella",
-        "emoji" : "☂️",
+        "emoji": "☂️",
         "description": ""
       },
       {
@@ -176,7 +176,7 @@
         "letter": "V",
         "code": 86,
         "text": "Van",
-        "emoji" : "🚐",
+        "emoji": "🚐",
         "description": ""
       },
       {
@@ -184,7 +184,7 @@
         "letter": "W",
         "code": 87,
         "text": "Watch",
-        "emoji" : "⌚",
+        "emoji": "⌚",
         "description": ""
       },
       {
@@ -192,7 +192,7 @@
         "letter": "X",
         "code": 88,
         "text": "xerox",
-        "emoji" : "🖨️",
+        "emoji": "🖨️",
         "description": ""
       },
       {
@@ -200,7 +200,7 @@
         "letter": "Y",
         "code": 89,
         "text": "Yacht",
-        "emoji" : "⛵",
+        "emoji": "⛵",
         "description": ""
       },
       {
@@ -208,7 +208,7 @@
         "letter": "Z",
         "code": 90,
         "text": "Zebra",
-        "emoji" : "🦓",
+        "emoji": "🦓",
         "description": ""
       }
     ]
@@ -1341,4 +1341,4 @@
       }
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/data/crossword-data.json b/src/data/crossword-data.json
index bfeb5fa..3b626ef 100644
--- a/src/data/crossword-data.json
+++ b/src/data/crossword-data.json
@@ -1,9 +1,5 @@
 {
-  "categories": [
-    "cities",
-    "animals",
-    "countries"
-  ],
+  "categories": ["cities", "animals", "countries"],
   "words": {
     "cities": [
       {
@@ -39,4 +35,4 @@
       }
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/map/[...state].astro b/src/pages/map/[...state].astro
index 70b2e0a..4fd3be5 100644
--- a/src/pages/map/[...state].astro
+++ b/src/pages/map/[...state].astro
@@ -30,14 +30,16 @@ const { name, dance, festival, image, wikiLink, description } = stateInfo;
             <tr>
               <th colspan="2">
                 Quick Facts
-                {stateInfo.official_website && (
-                  <>
-                    <br />
-                    <a href={stateInfo.official_website} target="_blank" rel="noopener noreferrer">
-                      Visit the official website of {name}
-                    </a>
-                  </>
-                )}
+                {
+                  stateInfo.official_website && (
+                    <>
+                      <br />
+                      <a href={stateInfo.official_website} target="_blank" rel="noopener noreferrer">
+                        Visit the official website of {name}
+                      </a>
+                    </>
+                  )
+                }
               </th>
             </tr>
             <tr><td>Dance Form</td><td>{dance}</td></tr>
@@ -53,7 +55,7 @@ const { name, dance, festival, image, wikiLink, description } = stateInfo;
               </td>
             </tr>
           </table>
-<!--          
+          <!--          
           {stateInfo.official_website && (
             <a href={stateInfo.official_website} target="_blank" rel="noopener noreferrer">
               Visit the official website of {name}
diff --git a/src/pages/varnmala/reader.astro b/src/pages/varnmala/reader.astro
index e42cc28..bc5c6a2 100644
--- a/src/pages/varnmala/reader.astro
+++ b/src/pages/varnmala/reader.astro
@@ -23,9 +23,7 @@ import BackButton from "@/components/ui/backButton.astro";
   </Fragment>
 
   <BackButton />
-  <article id="container__reader">
-    a🍎
-  </article>
+  <article id="container__reader">a🍎</article>
   <section class="section--audio hide">
     <audio id="audioPlayer" controlslist="nodownload" controls autoplay></audio>
   </section>
diff --git a/src/pages/vedic.astro b/src/pages/vedic.astro
new file mode 100644
index 0000000..4619fda
--- /dev/null
+++ b/src/pages/vedic.astro
@@ -0,0 +1,97 @@
+---
+import BaseLayout from "@/layouts/Base";
+import "@/assets/styles/vedic.css";
+import vedicData from "@/assets/json/vedic.json";
+
+const timeUnits = vedicData.time_units;
+---
+
+<BaseLayout meta={{ title: "Vedic Time" }}>
+  <div class="container__vedic">
+    <div class="vedic__layout">
+      <!-- Converter Card -->
+      <div class="converter__card">
+        <form id="converter__form" class="converter__form">
+          <div class="form__group">
+            <label for="input__value">Enter Value</label>
+            <input type="number" id="input__value" placeholder="Enter value" required />
+          </div>
+
+          <div class="form__grid">
+            {
+              ["From", "To"].map((label) => (
+                <div class="form__group">
+                  <label for={`${label.toLowerCase()}__unit`}>{label}</label>
+                  <select id={`${label.toLowerCase()}__unit`}>
+                    {timeUnits.map((unit) => (
+                      <option value={unit.name}>{unit.name}</option>
+                    ))}
+                  </select>
+                </div>
+              ))
+            }
+          </div>
+
+          <button type="submit" class="convert__button">Convert</button>
+          <div id="result" class="result__display"></div>
+        </form>
+      </div>
+
+      <!-- Units Reference -->
+      <div class="units__card">
+        <h2 class="units__title">Vedic Time Units</h2>
+        <div class="units__grid">
+          {
+            timeUnits.map((unit) => (
+              <div class="unit__item">
+                <div class="unit__header">
+                  <h3>{unit.name}</h3>
+                  <span class="approx">≈</span>
+                </div>
+                <div class="unit__details">
+                  <div class="unit__value">
+                    <span class="icon">🕛</span>
+                    {unit.seconds.toLocaleString()} seconds
+                  </div>
+                  <div class="unit__value">
+                    <span class="icon">⏳</span>
+                    {unit.minutes.toLocaleString()} minutes
+                  </div>
+                  <div class="unit__value">
+                    <span class="icon">📅</span>
+                    {unit.years.toLocaleString()} years
+                  </div>
+                </div>
+              </div>
+            ))
+          }
+        </div>
+      </div>
+    </div>
+  </div>
+</BaseLayout>
+
+<script define:vars={{ timeUnits }}>
+  function convert(value, fromUnit, toUnit) {
+    const from = timeUnits.find((u) => u.name === fromUnit);
+    const to = timeUnits.find((u) => u.name === toUnit);
+    if (!from || !to) return null;
+
+    const seconds = value * from.seconds;
+    return seconds / to.seconds;
+  }
+
+  document.getElementById("converter__form").addEventListener("submit", (e) => {
+    e.preventDefault();
+    const value = parseFloat(document.getElementById("input__value").value);
+    const fromUnit = document.getElementById("from__unit").value;
+    const toUnit = document.getElementById("to__unit").value;
+
+    const result = convert(value, fromUnit, toUnit);
+    const resultBox = document.getElementById("result");
+    resultBox.style.display = "block";
+    resultBox.textContent = `${value} ${fromUnit} = ${result.toLocaleString(undefined, {
+      maximumFractionDigits: 4
+    })} ${toUnit}`;
+  });
+</script>
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 9db0259..73b6845 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -55,6 +55,12 @@ export const NavbarLinks: LinkProps[] = [
     path: "/crossword",
     isActive: true
   },
+  {
+    name: "Societree",
+    title: "Clan",
+    path: "/clan",
+    isActive: true
+  },
   {
     name: "Capital",
     title: "Capital",
@@ -92,13 +98,13 @@ export const NavbarLinks: LinkProps[] = [
     isActive: true
   },
   {
-    name: "Societree",
-    title: "Clan",
-    path: "/clan",
+    name: "Feedback",
+    title: "Feedback Form",
+    path: "/feedback",
     isActive: true
   },
   {
-    name: " Survey",
+    name: "Survey",
     title: "Survey",
     path: "/survey",
     isActive: true