diff --git a/src/components/admin/projects/ManageProject.tsx b/src/components/admin/projects/ManageProject.tsx
index 4a0a32e..f36a1f7 100644
--- a/src/components/admin/projects/ManageProject.tsx
+++ b/src/components/admin/projects/ManageProject.tsx
@@ -2,7 +2,7 @@ import {
   useDeleteProject,
   useProjects,
   useUpdateProject,
-} from "@/hooks/queires/useProjects";
+} from "@/hooks/queries/useProjects";
 import { useState } from "react";
 
 import { T_projects } from "@/types/projects.type";
diff --git a/src/components/home/BlogSection.tsx b/src/components/home/BlogSection.tsx
index 6493034..c5ac161 100644
--- a/src/components/home/BlogSection.tsx
+++ b/src/components/home/BlogSection.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { useBlogs } from "@/hooks/queires/useBlogs";
+import { useBlogs } from "@/hooks/queries/useBlogs";
 import { motion } from "framer-motion";
 import { ArrowRight, Calendar, Clock, User } from "lucide-react";
 import { Link } from "react-router-dom";
diff --git a/src/components/home/Navbar.tsx b/src/components/home/Navbar.tsx
index 1179a9a..3f68ef1 100644
--- a/src/components/home/Navbar.tsx
+++ b/src/components/home/Navbar.tsx
@@ -1,6 +1,6 @@
 import logo from "@/assets/logo.webp";
 import { Button } from "@/components/ui/button";
-import { useTheme } from "@/contexts/ThemeContext";
+import { useTheme } from "@/hooks/useTheme";
 import { AnimatePresence, motion } from "framer-motion";
 import { Menu, Moon, Sun, X } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -28,7 +28,6 @@ export default function Navbar() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { mode, accent, setAccent, toggleMode } = useTheme();
 
-  // Handle scroll effect
   useEffect(() => {
     const handleScroll = () => {
       setIsScrolled(window.scrollY > 20);
@@ -37,7 +36,6 @@ export default function Navbar() {
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
-  // Close mobile menu on resize
   useEffect(() => {
     const handleResize = () => {
       if (window.innerWidth >= 1024) {
@@ -59,14 +57,11 @@ export default function Navbar() {
         }`}
       >
         <div className="container mx-auto px-4 flex items-center justify-between">
-          {/* Logo */}
           <Link to="/" className="flex items-center gap-2">
             <img src={logo} alt="TechZaa" className="h-16 w-auto" />
           </Link>
 
-          {/* Desktop Navigation */}
           <div className="hidden lg:flex items-center gap-8">
-            {/* Nav Links */}
             <ul className="flex items-center gap-6">
               {navItems.map((item, index) => (
                 <motion.li
@@ -86,9 +81,7 @@ export default function Navbar() {
               ))}
             </ul>
 
-            {/* Theme Controls */}
             <div className="flex items-center gap-2">
-              {/* Accent Color Picker */}
               <div className="flex items-center gap-1.5 rounded-full glass p-1">
                 {accentColors.map((color) => (
                   <motion.button
@@ -106,7 +99,6 @@ export default function Navbar() {
                 ))}
               </div>
 
-              {/* Dark/Light Mode Toggle */}
               <motion.button
                 onClick={toggleMode}
                 className="p-1.5 rounded-full neon-glow transition-all"
@@ -140,7 +132,6 @@ export default function Navbar() {
               </motion.button>
             </div>
 
-            {/* CTA Button */}
             <motion.div
               initial={{ opacity: 0, scale: 0.8 }}
               animate={{ opacity: 1, scale: 1 }}
@@ -155,7 +146,6 @@ export default function Navbar() {
             </motion.div>
           </div>
 
-          {/* Mobile Menu Button */}
           <motion.button
             onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
             className="lg:hidden p-2 rounded-lg glass"
@@ -187,7 +177,6 @@ export default function Navbar() {
           </motion.button>
         </div>
 
-        {/* Mobile Menu */}
         <AnimatePresence>
           {isMobileMenuOpen && (
             <motion.div
@@ -198,7 +187,6 @@ export default function Navbar() {
               className="lg:hidden glass-strong mt-2 mx-4 rounded-2xl overflow-hidden"
             >
               <div className="p-6 space-y-6">
-                {/* Nav Links */}
                 <ul className="space-y-4">
                   {navItems.map((item, index) => (
                     <motion.li
@@ -218,9 +206,7 @@ export default function Navbar() {
                   ))}
                 </ul>
 
-                {/* Theme Controls */}
                 <div className="flex items-center justify-between pt-4 border-t border-border">
-                  {/* Accent Colors */}
                   <div className="flex items-center gap-2">
                     {accentColors.map((color) => (
                       <button
@@ -236,7 +222,6 @@ export default function Navbar() {
                     ))}
                   </div>
 
-                  {/* Mode Toggle */}
                   <button
                     onClick={toggleMode}
                     className="p-2 rounded-full glass"
@@ -250,7 +235,6 @@ export default function Navbar() {
                   </button>
                 </div>
 
-                {/* CTA Button */}
                 <Button
                   onClick={() => {
                     setIsMobileMenuOpen(false);
@@ -266,7 +250,6 @@ export default function Navbar() {
         </AnimatePresence>
       </motion.nav>
 
-      {/* Contact Modal */}
       <ContactModal
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
diff --git a/src/components/home/ProjectsSection.tsx b/src/components/home/ProjectsSection.tsx
index f720de9..d967df9 100644
--- a/src/components/home/ProjectsSection.tsx
+++ b/src/components/home/ProjectsSection.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { useProjects } from "@/hooks/queires/useProjects";
+import { useProjects } from "@/hooks/queries/useProjects";
 import { motion, useInView } from "framer-motion";
 import { ArrowRight } from "lucide-react";
 import { useRef } from "react";
@@ -7,7 +7,6 @@ import { Link } from "react-router-dom";
 import PremiumBadge from "../shared/PremiumBadge";
 import { ProjectCard } from "./ProjectCard";
 
-
 export default function ProjectsSection() {
   const { data: projectsData } = useProjects({
     fields: "category, title, image, liveUrl",
@@ -25,7 +24,6 @@ export default function ProjectsSection() {
       ref={ref}
       className="py-24 relative overflow-hidden bg-secondary/30"
     >
-  
       <div className="absolute inset-0 opacity-5">
         <div
           className="absolute inset-0"
@@ -37,7 +35,6 @@ export default function ProjectsSection() {
       </div>
 
       <div className="container mx-auto px-4 relative z-10">
-      
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : {}}
@@ -56,7 +53,6 @@ export default function ProjectsSection() {
           </p>
         </motion.div>
 
-     
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
           {projects.map((project, index) => {
             return (
@@ -70,7 +66,6 @@ export default function ProjectsSection() {
           })}
         </div>
 
- 
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           animate={isInView ? { opacity: 1, y: 0 } : {}}
diff --git a/src/components/home/TeamSection.tsx b/src/components/home/TeamSection.tsx
index c89e064..e8cb456 100644
--- a/src/components/home/TeamSection.tsx
+++ b/src/components/home/TeamSection.tsx
@@ -3,7 +3,7 @@ import { useRef } from "react";
 import { Autoplay, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 
-import { useTeam } from "@/hooks/queires/useTeam";
+import { useTeam } from "@/hooks/queries/useTeam";
 import PremiumBadge from "../shared/PremiumBadge";
 
 export default function TeamSection() {
@@ -17,23 +17,24 @@ export default function TeamSection() {
 
   return (
     <section id="team" ref={ref} className="pt-20 1relative overflow-hidden">
-      
       <div className="absolute inset-0 opacity-30">
         <div className="absolute top-0 right-1/4 w-72 h-72 bg-neon-purple/10 rounded-full blur-[120px]" />
         <div className="absolute bottom-0 left-1/4 w-64 h-64 bg-primary/10 rounded-full blur-xl" />
       </div>
 
       <div className="container mx-auto px-4 relative z-10">
-  
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : {}}
           transition={{ duration: 0.6 }}
           className="text-center mb-16"
         >
-         <PremiumBadge text="Our experts"/>
+          <PremiumBadge text="Our experts" />
           <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
-            Meet Our <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">Team</span>
+            Meet Our{" "}
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">
+              Team
+            </span>
           </h2>
           <p className="text-muted-foreground max-w-2xl mx-auto text-lg">
             A passionate team of innovators, designers, and developers.
@@ -81,7 +82,6 @@ export default function TeamSection() {
                         className="absolute inset-0 w-full h-full object-cover object-top transition-transform duration-500 group-hover:scale-110"
                       />
                     </div>
-                    
                   </div>
 
                   <h3 className="text-xl font-bold mb-1 group-hover:text-primary transition-colors">
diff --git a/src/components/home/TestimonialsSection.tsx b/src/components/home/TestimonialsSection.tsx
index 7da4c3c..73603b7 100644
--- a/src/components/home/TestimonialsSection.tsx
+++ b/src/components/home/TestimonialsSection.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { useReviews } from "@/hooks/queires/useReviews";
+import { useReviews } from "@/hooks/queries/useReviews";
 import Autoplay from "embla-carousel-autoplay";
 import useEmblaCarousel from "embla-carousel-react";
 import { motion } from "framer-motion";
diff --git a/src/hooks/queires/useBlogs.ts b/src/hooks/queries/useBlogs.ts
similarity index 100%
rename from src/hooks/queires/useBlogs.ts
rename to src/hooks/queries/useBlogs.ts
diff --git a/src/hooks/queires/useProjects.ts b/src/hooks/queries/useProjects.ts
similarity index 100%
rename from src/hooks/queires/useProjects.ts
rename to src/hooks/queries/useProjects.ts
diff --git a/src/hooks/queires/useReviews.ts b/src/hooks/queries/useReviews.ts
similarity index 100%
rename from src/hooks/queires/useReviews.ts
rename to src/hooks/queries/useReviews.ts
diff --git a/src/hooks/queires/useTeam.ts b/src/hooks/queries/useTeam.ts
similarity index 100%
rename from src/hooks/queires/useTeam.ts
rename to src/hooks/queries/useTeam.ts
diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx
index ffc4761..0970743 100644
--- a/src/pages/Blog.tsx
+++ b/src/pages/Blog.tsx
@@ -5,7 +5,7 @@ import { motion } from "framer-motion";
 import { ArrowLeft, Calendar, Clock, Search, User } from "lucide-react";
 import { useState } from "react";
 import { Link } from "react-router-dom";
-import { useBlogs } from "./../hooks/queires/useBlogs";
+import { useBlogs } from "../hooks/queries/useBlogs";
 
 const categories = [
   "All",
diff --git a/src/pages/BlogArticle.tsx b/src/pages/BlogArticle.tsx
index d81fc9d..8f46047 100644
--- a/src/pages/BlogArticle.tsx
+++ b/src/pages/BlogArticle.tsx
@@ -1,7 +1,7 @@
 import PageTransition from "@/components/home/PageTransition";
 import { Button } from "@/components/ui/button";
 import { getRelatedPosts } from "@/data/blogData";
-import { useBlogById } from "@/hooks/queires/useBlogs";
+import { useBlogById } from "@/hooks/queries/useBlogs";
 import { motion } from "framer-motion";
 import {
   ArrowLeft,
diff --git a/src/pages/ProjectDetails.tsx b/src/pages/ProjectDetails.tsx
index e2a48c5..a620baa 100644
--- a/src/pages/ProjectDetails.tsx
+++ b/src/pages/ProjectDetails.tsx
@@ -1,6 +1,6 @@
 import PageTransition from "@/components/home/PageTransition";
 import { Button } from "@/components/ui/button";
-import { useProjectById } from "@/hooks/queires/useProjects";
+import { useProjectById } from "@/hooks/queries/useProjects";
 import { motion, useReducedMotion } from "framer-motion";
 import {
   AlertCircle,
diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
index 2641b1f..d1c02cb 100644
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -1,7 +1,7 @@
 import PageTransition from "@/components/home/PageTransition";
 import { ProjectCard } from "@/components/home/ProjectCard";
 import { Button } from "@/components/ui/button";
-import { useProjects } from "@/hooks/queires/useProjects";
+import { useProjects } from "@/hooks/queries/useProjects";
 import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import {
   ArrowLeft,