diff --git a/client/.eslintrc.json b/client/.eslintrc.json
index ebd1a1b..81103ae 100644
--- a/client/.eslintrc.json
+++ b/client/.eslintrc.json
@@ -1,6 +1,6 @@
 {
   "root": true,
-  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "prettier"],
+  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "plugin:tailwindcss/recommended", "prettier"],
   "plugins": ["@typescript-eslint", "tailwindcss", "import", "unused-imports"],
   "rules": {
     "import/no-unused-modules": "error",
@@ -8,7 +8,10 @@
     "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }],
     "@typescript-eslint/no-explicit-any": "off",
     "no-console": ["warn", { "allow": ["warn", "error", "info", "debug"] }],
-    "@next/next/no-html-link-for-pages": "off"
+    "@next/next/no-html-link-for-pages": "off",
+    "tailwindcss/no-custom-classname": "off",
+    "tailwindcss/migration-from-tailwind-2": "off",
+    "tailwindcss/classnames-order": "error"
   },
   "settings": {
     "tailwindcss": {
@@ -29,7 +32,8 @@
       "rules": {
         "import/no-unused-modules": "off",
         "unused-imports/no-unused-imports": "off",
-        "@typescript-eslint/no-unused-vars": "off"
+        "@typescript-eslint/no-unused-vars": "off",
+        "tailwindcss/classnames-order": "off"
       }
     }
   ]
diff --git a/client/.lintstagedrc.json b/client/.lintstagedrc.json
index 798507c..bb1cc93 100644
--- a/client/.lintstagedrc.json
+++ b/client/.lintstagedrc.json
@@ -1,3 +1,3 @@
 {
-  "./**/*.{ts,tsx,js,jsx,json}": ["eslint --quiet --fix", "prettier --write"]
+  "./**/*.{ts,tsx,js,jsx,json}": ["prettier --write", "eslint --quiet --fix"]
 }
diff --git a/client/app/faq/faq.tsx b/client/app/faq/faq.tsx
index ee3b246..c2c5018 100644
--- a/client/app/faq/faq.tsx
+++ b/client/app/faq/faq.tsx
@@ -1,11 +1,12 @@
 "use client";
 
-import Link from "next/link";
 import { useEffect, useState } from "react";
+import Link from "next/link";
 import { faqs } from "@/constants";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { FAQLinkData } from "@/interfaces";
 
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+
 export default function FAQPage() {
   const [accordionDefaultValue, setAccordionDefaultValue] = useState<string>(`item-0`);
 
@@ -16,7 +17,7 @@ export default function FAQPage() {
       index % 2 === 0 ? (
         segment
       ) : (
-        <Link key={segment} href={links?.[segment]?.href ?? "#"}>
+        <Link className="mx-1 underline" key={segment} href={links?.[segment]?.href ?? "#"}>
           {links?.[segment]?.text ?? segment}
         </Link>
       ),
@@ -36,8 +37,8 @@ export default function FAQPage() {
 
   return (
     <>
-      <div className="container mx-auto py-5 px-4 sm:py-10">
-        <div className="text-center mb-10">
+      <div className="container mx-auto px-4 py-5 sm:py-10">
+        <div className="mb-10 text-center">
           <h1 className="mb-3 text-lg sm:text-xl lg:text-2xl">Frequently Asked Questions</h1>
         </div>
 
diff --git a/client/app/faq/page.tsx b/client/app/faq/page.tsx
index 77c999a..01f5a11 100644
--- a/client/app/faq/page.tsx
+++ b/client/app/faq/page.tsx
@@ -1,4 +1,5 @@
 import { Metadata } from "next";
+
 import FAQPage from "./faq";
 
 export const metadata: Metadata = {
diff --git a/client/app/globals.css b/client/app/globals.css
index b486a0a..63420a7 100644
--- a/client/app/globals.css
+++ b/client/app/globals.css
@@ -10,8 +10,8 @@
     --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
+    --primary: 142.1 76.2% 36.3%;
+    --primary-foreground: 355.7 100% 97.3%;
     --secondary: 240 4.8% 95.9%;
     --secondary-foreground: 240 5.9% 10%;
     --muted: 240 4.8% 95.9%;
@@ -22,30 +22,30 @@
     --destructive-foreground: 0 0% 98%;
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
+    --ring: 142.1 76.2% 36.3%;
     --radius: 0rem;
   }
 
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 95%;
+    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 95%;
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;
+    --primary: 142.1 70.6% 45.3%;
+    --primary-foreground: 144.9 80.4% 10%;
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
+    --muted: 0 0% 15%;
     --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
+    --accent: 12 6.5% 15.1%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
+    --destructive-foreground: 0 85.7% 97.3%;
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
+    --ring: 142.4 71.8% 29.2%;
   }
 }
 
diff --git a/client/app/guide/[guide_name]/guide-name.tsx b/client/app/guide/[guide_name]/guide-name.tsx
index dc3b7f2..687de0d 100644
--- a/client/app/guide/[guide_name]/guide-name.tsx
+++ b/client/app/guide/[guide_name]/guide-name.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { getGuideByPath } from "@/lib/index";
-import { HowToGuide } from "@/interfaces";
-import { useRouter } from "next/navigation";
 import Head from "next/head";
-import CustomMarkdown from "@/components/custom-markdown";
-import { useToast } from "@/components/ui/use-toast";
+import { useRouter } from "next/navigation";
+import { HowToGuide } from "@/interfaces";
+
+import { getGuideByPath } from "@/lib/index";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useToast } from "@/components/ui/use-toast";
+import CustomMarkdown from "@/components/custom-markdown";
 
 export default function HowToGuideDetail({ params }: { params: { guide_name: string } }) {
   const router = useRouter();
@@ -69,7 +70,7 @@ export default function HowToGuideDetail({ params }: { params: { guide_name: str
         </div>
       ) : (
         <>
-          <div className="text-center mb-10">
+          <div className="mb-10 text-center">
             <h1 className="mb-3 text-lg sm:text-xl lg:text-2xl">&ldquo;MakeMeDIYspire&rdquo; Guides</h1>
           </div>
 
diff --git a/client/app/guide/[guide_name]/page.tsx b/client/app/guide/[guide_name]/page.tsx
index 37535ba..1e11c6f 100644
--- a/client/app/guide/[guide_name]/page.tsx
+++ b/client/app/guide/[guide_name]/page.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from "next";
 import { getGuideByPath } from "@/lib";
+
 import HowToGuideDetail from "./guide-name";
 
 export async function generateMetadata({ params }: { params: { guide_name: string } }): Promise<Metadata> {
diff --git a/client/app/guide/guide.tsx b/client/app/guide/guide.tsx
index 7059de3..0358e61 100644
--- a/client/app/guide/guide.tsx
+++ b/client/app/guide/guide.tsx
@@ -2,11 +2,12 @@
 
 import { useEffect, useState } from "react";
 import Link from "next/link";
+
 import { getAllGuides } from "@/lib/index";
+import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useToast } from "@/components/ui/use-toast";
-import { Label } from "@/components/ui/label";
 
 type Guide = {
   path: string;
@@ -41,10 +42,10 @@ export default function HowToGuidesList() {
 
   return (
     <>
-      <div className="container mx-auto px-5 sm:px-10 py-12">
-        <div className="text-center mb-12">
-          <h1 className="mb-3 text-3xl lg:text-4xl font-semibold">&ldquo;MakeMeDIYspire&rdquo; Guides</h1>
-          <Label className="text-sm sm:text-md inline-block mt-2">From usage to troubleshooting, explore our detailed guides to get the most out of the DIY project generator.</Label>
+      <div className="container mx-auto px-5 py-12 sm:px-10">
+        <div className="mb-12 text-center">
+          <h1 className="mb-3 text-3xl font-semibold lg:text-4xl">&ldquo;MakeMeDIYspire&rdquo; Guides</h1>
+          <Label className="sm:text-md mt-2 inline-block text-sm">From usage to troubleshooting, explore our detailed guides to get the most out of the DIY project generator.</Label>
         </div>
 
         {loading ? (
diff --git a/client/app/guide/page.tsx b/client/app/guide/page.tsx
index 7fd0ee9..19de2fb 100644
--- a/client/app/guide/page.tsx
+++ b/client/app/guide/page.tsx
@@ -1,6 +1,7 @@
-import HowToGuidesList from "./guide";
 import { Metadata } from "next";
 
+import HowToGuidesList from "./guide";
+
 export const metadata: Metadata = {
   title: "MakeMeDIYspire How-to Guides",
   description: "Navigate through our comprehensive guides and maximize the potential of the MakeMeDIYspire DIY project generator.",
diff --git a/client/app/layout.tsx b/client/app/layout.tsx
index c3e346a..f6dbd87 100644
--- a/client/app/layout.tsx
+++ b/client/app/layout.tsx
@@ -1,10 +1,13 @@
 import { ThemeProvider } from "@/components/theme-provider";
+
 import "./globals.css";
+
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import Navbar from "@/components/navbar";
-import Footer from "@/components/footer";
+
 import { Toaster } from "@/components/ui/toaster";
+import Footer from "@/components/footer";
+import Navbar from "@/components/navbar";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -47,9 +50,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html lang="en">
       <body className={inter.className}>
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
-          <div className="flex flex-col min-h-screen">
+          <div className="flex min-h-screen flex-col">
             <Navbar />
-            <main className="flex-grow">{children}</main>
+            <main className="grow">{children}</main>
             <Footer />
             <Toaster />
           </div>
diff --git a/client/app/page.tsx b/client/app/page.tsx
index f3d339e..99dc7cc 100644
--- a/client/app/page.tsx
+++ b/client/app/page.tsx
@@ -2,19 +2,18 @@
 
 import { useCallback, useEffect, useMemo, useState } from "react";
 import dynamic from "next/dynamic";
+import { categories } from "@/constants";
+import { generateProjectIdeas, getTotalCountOfGeneratedIdea, incrementCounterOfGeneratedIdea } from "@/lib";
+import { Info, RefreshCcw } from "lucide-react";
 
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { useToast } from "@/components/ui/use-toast";
 import CategoryFilter from "@/components/generate/category-filter";
 import DifficultyFilter from "@/components/generate/difficulty-filter";
 import MaterialInput from "@/components/generate/material-input";
 import SafetyCheck from "@/components/generate/safety-check";
-import { useToast } from "@/components/ui/use-toast";
-import { Label } from "@/components/ui/label";
-import { Separator } from "@/components/ui/separator";
-import { Button } from "@/components/ui/button";
-import { Info, RefreshCcw } from "lucide-react";
-
-import { categories } from "@/constants";
-import { generateProjectIdeas, getTotalCountOfGeneratedIdea, incrementCounterOfGeneratedIdea } from "@/lib";
 
 const TimeAvailabilityFilter = dynamic(() => import("@/components/generate/time-availability-filter"));
 const ToolsAvailableInput = dynamic(() => import("@/components/generate/tools-available-input"));
@@ -131,8 +130,8 @@ export default function Home() {
         <div className="mb-4">
           <ProjectTabs projects={projects} />
           <div className="flex justify-center space-x-2">
-            <Button className="mt-4 px-4 py-2 w-full" onClick={() => setIsGenerated(false)}>
-              <RefreshCcw className="w-5 h-5" />
+            <Button className="mt-4 w-full px-4 py-2" onClick={() => setIsGenerated(false)}>
+              <RefreshCcw className="mr-2 h-5 w-5" />
               <span>Generate Again</span>
             </Button>
           </div>
@@ -151,16 +150,16 @@ export default function Home() {
         <div className="mb-4">
           <CategoryFilter categories={categories} onCategoryChange={setSelectedCategory} />
         </div>
-        <Button className="mb-4 px-4 py-2 w-full lg:w-auto focus:outline-none focus:ring-2 focus:ring-opacity-50" onClick={toggleAdvancedOptions}>
+        <Button className="mb-4 w-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-opacity-50 lg:w-auto" onClick={toggleAdvancedOptions}>
           {showAdvancedOptions ? "Hide" : "Show"} Advanced Options
         </Button>
         {showAdvancedOptions && advancedOptions}
-        <div className="flex justify-between items-center mb-4">
+        <div className="mb-4 flex items-center justify-between">
           <div>
             <SafetyCheck onSafetyConfirmation={setIsSafe} />
           </div>
-          <Button className="px-4 py-2 w-full lg:w-auto focus:outline-none focus:ring-2 focus:ring-opacity-50 flex items-center justify-center space-x-2" onClick={handleGenerateProjects}>
-            <RefreshCcw className="w-5 h-5" />
+          <Button className="flex w-full items-center justify-center space-x-2 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-opacity-50 lg:w-auto" onClick={handleGenerateProjects}>
+            <RefreshCcw className="h-5 w-5" />
             <span>Generate Projects</span>
           </Button>
         </div>
@@ -170,11 +169,11 @@ export default function Home() {
 
   return (
     <div className="container mx-auto px-4 py-8">
-      <div className="flex justify-between items-center">
-        <h1 className="text-2xl sm:text-3xl md:text-4xl mb-6 font-bold">DIY Project Ideas</h1>
+      <div className="flex items-center justify-between">
+        <h1 className="mb-6 text-2xl font-bold sm:text-3xl md:text-4xl">DIY Ideas Generator</h1>
         <Separator orientation="vertical" className="mx-4 h-8 md:hidden" />
         <div className="flex items-center">
-          <span className="ml-2 mr-2 flex items-center">
+          <span className="mx-2 flex items-center">
             <Info size={24} />
           </span>
           <Label className="text-md lg:text-lg">
diff --git a/client/app/project-detail/[id]/page.tsx b/client/app/project-detail/[id]/page.tsx
index ac9728c..3135ffe 100644
--- a/client/app/project-detail/[id]/page.tsx
+++ b/client/app/project-detail/[id]/page.tsx
@@ -1,6 +1,7 @@
+import { Metadata } from "next";
 import { getShareLinkData } from "@/lib";
+
 import ProjectDetailById from "./project-detail-by-id";
-import { Metadata } from "next";
 
 export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
   const sharedLinkData = await getShareLinkData(params.id);
diff --git a/client/app/project-detail/[id]/project-detail-by-id.tsx b/client/app/project-detail/[id]/project-detail-by-id.tsx
index 9f47e2f..1a2616f 100644
--- a/client/app/project-detail/[id]/project-detail-by-id.tsx
+++ b/client/app/project-detail/[id]/project-detail-by-id.tsx
@@ -1,17 +1,18 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
-import ProjectImage from "@/components/project-detail/project-image";
-import ShareDialog from "@/components/project-detail/share-dialog";
-import ProjectInfo from "@/components/project-detail/project-info";
-import ProjectSteps from "@/components/project-detail/project-step";
-import { RelatedImages, ProjectLocationState } from "@/interfaces";
-import { useToast } from "@/components/ui/use-toast";
+import { ProjectLocationState, RelatedImages } from "@/interfaces";
 import { getShareLinkData } from "@/lib";
+
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
+import { useToast } from "@/components/ui/use-toast";
+import ProjectImage from "@/components/project-detail/project-image";
+import ProjectInfo from "@/components/project-detail/project-info";
+import ProjectSteps from "@/components/project-detail/project-step";
+import ShareDialog from "@/components/project-detail/share-dialog";
 
 export default function ProjectDetailById({ params }: { params: { id: string } }) {
   const router = useRouter();
@@ -51,10 +52,10 @@ export default function ProjectDetailById({ params }: { params: { id: string } }
 
   if (!project) {
     return (
-      <div className="container mx-auto py-5 sm:py-10 text-center">
+      <div className="container mx-auto py-5 text-center sm:py-10">
         <div className="p-6">
-          <Label className="text-xl font-bold mb-4">No project details found.</Label>
-          <Button onClick={() => router.push("/")} className="border py-2 px-4 hover:bg-gray-200">
+          <Label className="mb-4 text-xl font-bold">No project details found.</Label>
+          <Button onClick={() => router.push("/")} className="border px-4 py-2 hover:bg-gray-200">
             Go Back to Home
           </Button>
         </div>
@@ -64,7 +65,7 @@ export default function ProjectDetailById({ params }: { params: { id: string } }
 
   return (
     <div className="container mx-auto py-5 sm:py-10">
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-10">
+      <div className="grid grid-cols-1 gap-8 md:gap-10 lg:grid-cols-2">
         <ProjectImage
           isLoading={isLoading}
           relatedImages={relatedImages}
diff --git a/client/app/project-detail/page.tsx b/client/app/project-detail/page.tsx
index 7e86cce..a2a7c75 100644
--- a/client/app/project-detail/page.tsx
+++ b/client/app/project-detail/page.tsx
@@ -1,4 +1,5 @@
 import { Metadata } from "next";
+
 import ProjectDetail from "./project-detail";
 
 export const metadata: Metadata = {
diff --git a/client/app/project-detail/project-detail.tsx b/client/app/project-detail/project-detail.tsx
index ed16ea4..45a9a3a 100644
--- a/client/app/project-detail/project-detail.tsx
+++ b/client/app/project-detail/project-detail.tsx
@@ -1,17 +1,18 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
-import { useSearchParams, useRouter } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { ProjectLocationState, RelatedImages } from "@/interfaces";
+import { generateProjectExplanations, saveShareLinkData, searchImages } from "@/lib";
+
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
 import { useToast } from "@/components/ui/use-toast";
-import { RelatedImages, ProjectLocationState } from "@/interfaces";
 import ProjectImage from "@/components/project-detail/project-image";
-import ShareDialog from "@/components/project-detail/share-dialog";
 import ProjectInfo from "@/components/project-detail/project-info";
 import ProjectSteps from "@/components/project-detail/project-step";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Separator } from "@/components/ui/separator";
-import { generateProjectExplanations, saveShareLinkData, searchImages } from "@/lib";
+import ShareDialog from "@/components/project-detail/share-dialog";
 
 export default function ProjectDetail() {
   const searchParams = useSearchParams();
@@ -88,10 +89,10 @@ export default function ProjectDetail() {
 
   if (!project) {
     return (
-      <div className="container mx-auto py-5 sm:py-10 text-center">
+      <div className="container mx-auto py-5 text-center sm:py-10">
         <div className="p-6">
-          <Label className="text-xl font-bold mb-4">No project details found.</Label>
-          <Button onClick={() => router.push("/")} className="border py-2 px-4 hover:bg-gray-200">
+          <Label className="mb-4 text-xl font-bold">No project details found.</Label>
+          <Button onClick={() => router.push("/")} className="border px-4 py-2 hover:bg-gray-200">
             Go Back to Home
           </Button>
         </div>
@@ -101,7 +102,7 @@ export default function ProjectDetail() {
 
   return (
     <div className="container mx-auto py-5 sm:py-10">
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-10">
+      <div className="grid grid-cols-1 gap-8 md:gap-10 lg:grid-cols-2">
         <ProjectImage
           isLoading={isLoading}
           relatedImages={relatedImages}
diff --git a/client/components/footer.tsx b/client/components/footer.tsx
index ec49300..0150abf 100644
--- a/client/components/footer.tsx
+++ b/client/components/footer.tsx
@@ -4,16 +4,16 @@ import { footerData } from "@/constants";
 const Footer: React.FC = () => {
   return (
     <footer className="divide-y">
-      <div className="container mx-auto py-5 md:py-10 px-5 space-y-5">
+      <div className="container mx-auto space-y-5 p-5 md:py-10">
         <div className="flex flex-wrap justify-between space-y-3 md:space-y-0">
           {footerData.map((data, index) => (
-            <div key={index} className="flex flex-col mb-3 md:w-1/4">
+            <div key={index} className="mb-3 flex flex-col md:w-1/4">
               <nav>
                 <Link href={data.path ?? data.hash ?? "#"} className="font-semibold" passHref>
                   {data.label}
                 </Link>
               </nav>
-              <div className="flex flex-col md:flex-row space-y-3 md:space-y-0 md:space-x-3 mt-4">
+              <div className="mt-4 flex flex-col space-y-3 md:flex-row md:space-x-3 md:space-y-0">
                 {data.links.map((link, linkIndex) => (
                   <nav key={linkIndex}>
                     <Link
@@ -34,9 +34,9 @@ const Footer: React.FC = () => {
         </div>
 
         <address className="flex items-center">
-          <p className="text-sm pl-2">
+          <p className="pl-2 text-sm">
             Powered by MakeMeDIYspire ✨ | Made with ❤️ by -{" "}
-            <a href="#" className="text-blue-500 py-2 px-4" rel="noopener noreferrer" target="_blank" aria-label="Kooma - External Link">
+            <a href="#" className="px-4 py-2 text-blue-500" rel="noopener noreferrer" target="_blank" aria-label="Kooma - External Link">
               Kooma
             </a>
           </p>
diff --git a/client/components/generate/budget-filter.tsx b/client/components/generate/budget-filter.tsx
index 30235ca..5da1803 100644
--- a/client/components/generate/budget-filter.tsx
+++ b/client/components/generate/budget-filter.tsx
@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 
@@ -19,11 +20,11 @@ const BudgetFilter: React.FC<BudgetFilterProps> = ({ onBudgetChange, className }
     <div className={`mb-4 ${className}`}>
       <fieldset>
         <legend>
-          <Label htmlFor="budget" className="block text-md font-medium mb-2">
+          <Label htmlFor="budget" className="text-md mb-2 block font-medium">
             Budget (in PHP):
           </Label>
         </legend>
-        <Input type="number" id="budget" min={0} onChange={handleChange} className="p-2 w-full border rounded" placeholder="Enter your budget in PHP" />
+        <Input type="number" id="budget" min={0} onChange={handleChange} className="w-full rounded border p-2" placeholder="Enter your budget in PHP" />
       </fieldset>
     </div>
   );
diff --git a/client/components/generate/category-filter.tsx b/client/components/generate/category-filter.tsx
index 2c9da26..c4d82d6 100644
--- a/client/components/generate/category-filter.tsx
+++ b/client/components/generate/category-filter.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { categoryIcons } from "@/constants";
+
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 
@@ -19,19 +20,21 @@ const CategoryFilter: React.FC<CategoryFilterProps> = ({ categories, onCategoryC
 
   return (
     <div className={`space-y-4 ${className}`}>
-      <div className="flex items-center space-x-4 mb-2">
-        <Label className="block text-md font-medium">Filter by Category:</Label>
+      <div className="mb-2 flex items-center space-x-4">
+        <Label className="text-md block font-medium">Filter by Category:</Label>
       </div>
-      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
+      <div className="grid grid-cols-2 gap-4 md:grid-cols-4 lg:grid-cols-5">
         {categories.map((category) => {
           const isSelected = selectedCategory === category;
           const IconComponent = categoryIcons[category];
           return (
             <Button
               key={category}
-              variant="outline"
               onClick={() => handleCategoryClick(category)}
-              className={`p-2 border cursor-pointer ${isSelected ? "text-black bg-secondary dark:text-white" : ""} flex items-center justify-center space-x-2 transition duration-300 ease-in-out`}
+              variant="outline"
+              className={`cursor-pointer border p-2 ${
+                isSelected ? "border-primary" : "border-secondary"
+              } flex items-center justify-center space-x-2 text-black transition duration-300 ease-in-out focus:bg-transparent active:bg-transparent dark:text-white`}
               aria-label={`Filter by ${category} category`}
             >
               {IconComponent && <IconComponent size={20} />}
diff --git a/client/components/generate/difficulty-filter.tsx b/client/components/generate/difficulty-filter.tsx
index b71c996..5a63efe 100644
--- a/client/components/generate/difficulty-filter.tsx
+++ b/client/components/generate/difficulty-filter.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { difficulties } from "@/constants";
+
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 
@@ -18,18 +19,18 @@ const DifficultyFilter: React.FC<DifficultyFilterProps> = ({ onDifficultyChange,
 
   return (
     <div className={`space-y-4 ${className}`}>
-      <div className="flex items-center space-x-4 mb-2">
-        <Label className="block text-md font-medium">Filter by Difficulty:</Label>
+      <div className="mb-2 flex items-center space-x-4">
+        <Label className="text-md block font-medium">Filter by Difficulty:</Label>
       </div>
-      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-4">
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-[repeat(auto-fill,minmax(150px,1fr))]">
         {difficulties.map(({ level, icon: IconComponent }) => (
           <Button
             key={level}
-            variant="outline"
             onClick={() => handleDifficultyClick(level)}
-            className={`p-2 border cursor-pointer ${
-              selectedDifficulty === level ? "text-black bg-secondary dark:text-white" : ""
-            } flex items-center justify-center space-x-2 transition duration-300 ease-in-out`}
+            variant="outline"
+            className={`cursor-pointer border p-2 ${
+              selectedDifficulty === level ? "border-primary" : "border-secondary"
+            } flex items-center justify-center space-x-2 text-black transition duration-300 ease-in-out focus:bg-transparent active:bg-transparent dark:text-white`}
             aria-label={`Filter by ${level} difficulty`}
           >
             {IconComponent && <IconComponent size={20} />}
diff --git a/client/components/generate/generate-loading.tsx b/client/components/generate/generate-loading.tsx
index d7ddecd..bb26974 100644
--- a/client/components/generate/generate-loading.tsx
+++ b/client/components/generate/generate-loading.tsx
@@ -1,7 +1,8 @@
 import { useState } from "react";
 import { loadingMessages } from "@/constants";
-import useInterval from "@/hooks/useInterval";
 import { Info, Loader } from "lucide-react";
+
+import useInterval from "@/hooks/useInterval";
 import { Label } from "@/components/ui/label";
 
 const GenerateLoading: React.FC = () => {
@@ -12,13 +13,13 @@ const GenerateLoading: React.FC = () => {
   }, 5000);
 
   return (
-    <div className="w-full text-center pt-5 p-4 min-h-[150px] flex flex-col items-center justify-center">
-      <Loader className="w-10 h-10 animate-spin mx-auto" />
+    <div className="flex min-h-[150px] w-full flex-col items-center justify-center p-4 pt-5 text-center">
+      <Loader className="mx-auto h-10 w-10 animate-spin" />
       <p className="mt-4 text-lg font-medium" aria-live="polite" aria-atomic="true">
         {loadingMessages[currentMessageIndex]}
       </p>
-      <div className="mb-4 mt-4 flex items-center">
-        <span className="mr-2 flex items-center">
+      <div className="my-4 flex flex-col items-center space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
+        <span className="flex items-center justify-center">
           <Info size={24} />
         </span>
         <Label className="text-sm">
diff --git a/client/components/generate/material-input.tsx b/client/components/generate/material-input.tsx
index 693c0ea..8b43136 100644
--- a/client/components/generate/material-input.tsx
+++ b/client/components/generate/material-input.tsx
@@ -1,9 +1,10 @@
 import { useCallback } from "react";
 import { PlusCircle, X } from "lucide-react";
-import { Label } from "@/components/ui/label";
+
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 
 interface MaterialInputProps {
   materials: string[];
@@ -38,26 +39,26 @@ const MaterialInput: React.FC<MaterialInputProps> = ({ materials, setMaterials,
 
   return (
     <div className={`space-y-4 ${className}`}>
-      <div className="flex justify-between items-center mb-2">
+      <div className="mb-2 flex items-center justify-between">
         <div className="space-y-1 text-left">
-          <Label className="block text-md font-medium">List of materials:</Label>
+          <Label className="text-md block font-medium">List of materials:</Label>
           <Label className="text-xs">Leave it as empty to use random materials</Label>
         </div>
-        <Button className="focus:outline-none focus:ring-20 focus:ring-opacity-50s space-x-2" onClick={handleAddMore} aria-label="Add more materials">
-          <PlusCircle className="w-5 h-5" />
+        <Button className="focus:ring-20 focus:ring-opacity-50s space-x-2 focus:outline-none" onClick={handleAddMore} aria-label="Add more materials">
+          <PlusCircle className="h-5 w-5" />
           <span>Add More</span>
         </Button>
       </div>
       {materials.map((material, index) => (
         <div key={index} className="flex items-center space-x-2">
-          <Input className="flex-1 p-2 rounded border" placeholder="Type a material" required value={material} onChange={(e) => handleInputChange(index, e.target.value)} />
+          <Input className="flex-1 rounded border p-2" placeholder="Type a material" required value={material} onChange={(e) => handleInputChange(index, e.target.value)} />
           <Button aria-label="Delete material" onClick={() => handleDeleteInput(index)} disabled={materials.length === 1}>
             <X />
           </Button>
         </div>
       ))}
       {materials.some((mat) => mat.trim() !== "") && (
-        <div className="inline-flex items-center space-x-2 cursor-pointer">
+        <div className="inline-flex cursor-pointer items-center space-x-2">
           <Checkbox id="onlySpecifiedMaterials" />
           <Label htmlFor="onlySpecifiedMaterials" onClick={() => setOnlySpecified(!onlySpecified)}>
             Use only these materials
diff --git a/client/components/generate/project-tabs.tsx b/client/components/generate/project-tabs.tsx
index 94ee8b9..c0b947f 100644
--- a/client/components/generate/project-tabs.tsx
+++ b/client/components/generate/project-tabs.tsx
@@ -1,10 +1,11 @@
 import Link from "next/link";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { BookOpen, FlaskConical } from "lucide-react";
+
 import { Badge } from "@/components/ui/badge";
-import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
-import { BookOpen } from "lucide-react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 interface Project {
   title: string;
@@ -24,7 +25,7 @@ interface ProjectTabsProps {
 const ProjectTabs: React.FC<ProjectTabsProps> = ({ projects, className }) => {
   return (
     <Tabs defaultValue={projects[0]?.title} className={`${className}`}>
-      <TabsList className="flex overflow-x-auto space-x-4 mb-4">
+      <TabsList className="mb-4 flex space-x-4 overflow-x-auto">
         {projects.map((project) => (
           <TabsTrigger key={project.title} value={project.title} aria-label={`Switch to ${project.title} project`}>
             {project.title}
@@ -34,8 +35,8 @@ const ProjectTabs: React.FC<ProjectTabsProps> = ({ projects, className }) => {
       {projects.map((project) => (
         <TabsContent key={project.title} value={project.title} className="p-4">
           <div className="mb-4 md:flex md:flex-row md:items-center md:space-x-4">
-            <h3 className="text-lg overflow-hidden overflow-ellipsis whitespace-nowrap max-w-[200px] md:w-[200px]">{project.title}</h3>
-            <Separator orientation="vertical" className="mx-2 h-6 hidden md:block" />
+            <h3 className="overflow-hidden whitespace-nowrap text-lg">{project.title}</h3>
+            <Separator orientation="vertical" className="mx-2 hidden h-6 md:block" />
             <div className="flex space-x-2">
               {project.tags.map((tag, tagIndex) => (
                 <Badge key={tagIndex} variant="outline">
@@ -44,24 +45,24 @@ const ProjectTabs: React.FC<ProjectTabsProps> = ({ projects, className }) => {
               ))}
             </div>
           </div>
-          <Separator className="my-2 md:hidden" /> {/* Hide the separator on small screens */}
-          <p className="text-sm mb-2 overflow-hidden overflow-ellipsis whitespace-nowrap max-w-full">{project.description}</p>
+          <Separator className="my-2 md:hidden" />
+          <p className="mb-2 max-w-full truncate text-sm">{project.description}</p>
           <div className="flex flex-col space-y-1">
-            <Label className="text-sm mb-2">
+            <Label className="mb-2 text-sm">
               <b>Materials:</b> {project.materials.join(", ")}
             </Label>
-            <Label className="text-sm mb-2">
+            <Label className="mb-2 text-sm">
               <b>Tools:</b> {project.tools.join(", ")}
             </Label>
-            <Label className="text-sm mb-2">
+            <Label className="mb-2 text-sm">
               <b>Time Required:</b> {project.time}
             </Label>
-            <Label className="text-sm mb-2">
+            <Label className="mb-2 text-sm">
               <b>Budget:</b> {project.budget}
             </Label>
           </div>
-          <Separator className="my-2 md:block" /> {/* Display the separator on medium and larger screens */}
-          <div className="flex space-x-2 items-center mt-3">
+          <Separator className="my-2 md:block" />
+          <div className="mt-3 flex items-center space-x-2">
             <Label className="text-md">Like this idea?</Label>
             <Link href={{ pathname: "/project-detail", query: { project: JSON.stringify(project) } }} passHref>
               <Button>
@@ -69,6 +70,12 @@ const ProjectTabs: React.FC<ProjectTabsProps> = ({ projects, className }) => {
                 Provide Detailed Steps
               </Button>
             </Link>
+            <Link href={{ pathname: "/project-detail", query: { project: JSON.stringify(project) } }} passHref>
+              <Button disabled>
+                <FlaskConical className="mr-2 h-4 w-4" aria-label="Book icon" />
+                Generate Ideas Using this Tools/Materials
+              </Button>
+            </Link>
           </div>
         </TabsContent>
       ))}
diff --git a/client/components/generate/purpose-filter.tsx b/client/components/generate/purpose-filter.tsx
index 3b85a5b..75d8071 100644
--- a/client/components/generate/purpose-filter.tsx
+++ b/client/components/generate/purpose-filter.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
 import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 
 interface PurposeFilterProps {
   purpose: string;
@@ -17,7 +18,7 @@ const PurposeFilter: React.FC<PurposeFilterProps> = ({ purpose, onPurposeChange
 
   return (
     <div className="mb-4">
-      <Label htmlFor="purpose" className="block text-md font-medium mb-2">
+      <Label htmlFor="purpose" className="text-md mb-2 block font-medium">
         End Result Purpose:
       </Label>
       <Select onValueChange={(e) => handlePurposeChange(e)} defaultValue={selectedPurpose ?? ""} aria-label="Select a purpose for the end result">
diff --git a/client/components/generate/time-availability-filter.tsx b/client/components/generate/time-availability-filter.tsx
index b3302ec..fb5ef8c 100644
--- a/client/components/generate/time-availability-filter.tsx
+++ b/client/components/generate/time-availability-filter.tsx
@@ -1,6 +1,6 @@
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
 
 interface TimeAvailabilityFilterProps {
   timeValue: number;
@@ -13,7 +13,7 @@ interface TimeAvailabilityFilterProps {
 const TimeAvailabilityFilter: React.FC<TimeAvailabilityFilterProps> = ({ timeValue, timeUnit, onValueChange, onUnitChange, className }) => {
   return (
     <div className={className}>
-      <Label className="mb-2 block text-md font-medium">
+      <Label className="text-md mb-2 block font-medium">
         Available Time:
         {timeValue > 0 && timeUnit ? ` ${timeValue} ${timeUnit}` : ""}
       </Label>
diff --git a/client/components/generate/tools-available-input.tsx b/client/components/generate/tools-available-input.tsx
index f214de0..e624cd8 100644
--- a/client/components/generate/tools-available-input.tsx
+++ b/client/components/generate/tools-available-input.tsx
@@ -1,8 +1,9 @@
 import { useCallback } from "react";
+import { PlusCircle, X } from "lucide-react";
+
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { PlusCircle, X } from "lucide-react";
 
 interface ToolsAvailableInputProps {
   tools: string[];
@@ -31,7 +32,7 @@ const ToolsAvailableInput: React.FC<ToolsAvailableInputProps> = ({ tools, setToo
 
   return (
     <div className={`mb-4 ${className}`}>
-      <Label className="block text-md font-medium mb-2">Available Tools:</Label>
+      <Label className="text-md mb-2 block font-medium">Available Tools:</Label>
       <div className="space-y-3">
         {tools.map((tool, index) => (
           <div key={tool || index} className="flex items-center space-x-2">
@@ -41,8 +42,8 @@ const ToolsAvailableInput: React.FC<ToolsAvailableInputProps> = ({ tools, setToo
             </Button>
           </div>
         ))}
-        <Button className="w-full lg:w-auto focus:outline-none focus:ring-20 focus:ring-opacity-50 space-x-2" onClick={() => setTools([...tools, ""])} aria-label="Add another tool">
-          <PlusCircle className="w-5 h-5" />
+        <Button className="focus:ring-20 w-full space-x-2 focus:outline-none focus:ring-opacity-50 lg:w-auto" onClick={() => setTools([...tools, ""])} aria-label="Add another tool">
+          <PlusCircle className="h-5 w-5" />
           <span>Add another tool</span>
         </Button>
       </div>
diff --git a/client/components/navbar.tsx b/client/components/navbar.tsx
index a66d8bd..fceae5e 100644
--- a/client/components/navbar.tsx
+++ b/client/components/navbar.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import Link from "next/link";
+import { Github, Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
-import { Sun, Moon, Github } from "lucide-react";
 
 const Navbar: React.FC = () => {
   const { theme, setTheme } = useTheme();
@@ -12,7 +12,7 @@ const Navbar: React.FC = () => {
   };
 
   return (
-    <nav className="flex justify-between items-center p-4 shadow-sm w-full">
+    <nav className="flex w-full items-center justify-between p-4 shadow-sm">
       <div className="flex items-center space-x-2">
         <div>
           <h1 className="text-lg lg:text-xl">
@@ -22,10 +22,10 @@ const Navbar: React.FC = () => {
       </div>
 
       <div className="flex items-center space-x-2">
-        <a href="https://github.com/Kevin-Umali/make-me" target="_blank" rel="noopener noreferrer" aria-label="GitHub repository" className="text-lg lg:text-xl p-2">
+        <a href="https://github.com/Kevin-Umali/make-me" target="_blank" rel="noopener noreferrer" aria-label="GitHub repository" className="p-2 text-lg lg:text-xl">
           <Github size={20} />
         </a>
-        <button aria-label={`Switch to ${theme === "light" ? "dark" : "light"} mode`} className="p-2 rounded-md" onClick={toggleColorMode}>
+        <button aria-label={`Switch to ${theme === "light" ? "dark" : "light"} mode`} className="rounded-md p-2" onClick={toggleColorMode}>
           {theme === "light" ? <Moon size={20} aria-hidden="true" /> : <Sun size={20} aria-hidden="true" />}
         </button>
       </div>
diff --git a/client/components/project-detail/project-image.tsx b/client/components/project-detail/project-image.tsx
index 102e6e7..13d5d12 100644
--- a/client/components/project-detail/project-image.tsx
+++ b/client/components/project-detail/project-image.tsx
@@ -1,9 +1,10 @@
+import Image from "next/image";
 import { RelatedImages } from "@/interfaces";
+import { Info, Share } from "lucide-react";
+
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Skeleton } from "@/components/ui/skeleton";
-import Image from "next/image";
-import { Info, Share } from "lucide-react";
 
 interface ProjectImageProps {
   isLoading: boolean;
@@ -15,9 +16,10 @@ interface ProjectImageProps {
 const UNSPLASH_PROJECT_NAME = process.env.NEXT_PUBLIC_UNSPLASH_PROJECT_NAME;
 
 const ProjectImage: React.FC<ProjectImageProps> = ({ isLoading, projectTitle, relatedImages, onOpen }) => {
-  const imageUrl = relatedImages?.urls ? relatedImages.urls.regular : "https://via.placeholder.com/500";
-  const photographerName = relatedImages?.user?.name;
-  const photographerLink = relatedImages?.user?.link;
+  const { urls, alt_description, user } = relatedImages ?? {};
+  const { name: photographerName, link: photographerLink } = user ?? {};
+
+  const imageUrl = urls ? urls.regular : "https://via.placeholder.com/500";
 
   const googleSearchLink = `https://www.google.com/search?q=${projectTitle}`;
   const youtubeSearchLink = `https://www.youtube.com/results?search_query=${projectTitle} Tutorial`;
@@ -26,7 +28,7 @@ const ProjectImage: React.FC<ProjectImageProps> = ({ isLoading, projectTitle, re
     return (
       <div className="flex flex-col">
         <Skeleton className="h-[500px] lg:h-[500px]" />
-        <div className="space-y-4 mt-4">
+        <div className="mt-4 space-y-4">
           <Skeleton className="h-4 w-full" />
           <Skeleton className="h-4 w-full" />
           <Skeleton className="h-4 w-full" />
@@ -40,7 +42,7 @@ const ProjectImage: React.FC<ProjectImageProps> = ({ isLoading, projectTitle, re
     <div className="flex flex-col">
       <Image
         src={imageUrl}
-        alt={relatedImages?.alt_description ?? "Image related to the project"}
+        alt={alt_description ?? "Image related to the project"}
         layout="responsive"
         objectFit="cover"
         objectPosition="center"
@@ -51,14 +53,14 @@ const ProjectImage: React.FC<ProjectImageProps> = ({ isLoading, projectTitle, re
         loading="eager"
       />
 
-      <div className="flex flex-col items-center w-full mt-2">
+      <div className="mt-2 flex w-full flex-col items-center">
         {photographerName && (
-          <Label className="text-sm text-center">
-            Photo by{" "}
+          <Label className="text-center text-sm">
+            Photo by
             <a className="mx-1 underline" href={`${photographerLink}?utm_source=${UNSPLASH_PROJECT_NAME}&utm_medium=referral`} target="_blank" rel="noopener noreferrer">
               {`${photographerName}`}
-            </a>{" "}
-            on{" "}
+            </a>
+            on
             <a className="ml-1 underline" href={`https://unsplash.com/?utm_source=${UNSPLASH_PROJECT_NAME}&utm_medium=referral`} target="_blank" rel="noopener noreferrer">
               Unsplash
             </a>
@@ -66,14 +68,14 @@ const ProjectImage: React.FC<ProjectImageProps> = ({ isLoading, projectTitle, re
         )}
       </div>
 
-      <div className="flex items-center mt-2">
-        <Info className="mr-2" />
-        <p className="text-sm">
+      <div className="mt-2 flex flex-col items-center md:flex-row md:items-center">
+        <Info className="mb-2 sm:mb-0 sm:mr-2" />
+        <p className="text-center text-sm sm:text-left">
           Note: The image may not accurately represent the project title. For more specific results, you can click to{" "}
           <a className="mx-1 underline" href={googleSearchLink} target="_blank" rel="nofollow noopener noreferrer">
             search on Google
-          </a>{" "}
-          or watch tutorials on{" "}
+          </a>
+          or watch tutorials on
           <a className="ml-1 underline" href={youtubeSearchLink} target="_blank" rel="nofollow noopener noreferrer">
             YouTube
           </a>
@@ -82,7 +84,7 @@ const ProjectImage: React.FC<ProjectImageProps> = ({ isLoading, projectTitle, re
       </div>
 
       <Button className="mt-4 px-4 py-2" onClick={onOpen}>
-        <Share className="w-5 h-5" />
+        <Share className="mr-2 h-5 w-5" />
         <span>Share</span>
       </Button>
     </div>
diff --git a/client/components/project-detail/project-info.tsx b/client/components/project-detail/project-info.tsx
index 5aef546..bb91dd1 100644
--- a/client/components/project-detail/project-info.tsx
+++ b/client/components/project-detail/project-info.tsx
@@ -1,8 +1,9 @@
 import { ProjectLocationState } from "@/interfaces";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Label } from "@/components/ui/label";
 import { TimerIcon } from "lucide-react";
 
+import { Label } from "@/components/ui/label";
+import { Skeleton } from "@/components/ui/skeleton";
+
 interface ProjectInfoProps {
   isLoading: boolean;
   project: ProjectLocationState;
@@ -26,23 +27,23 @@ const ProjectInfo: React.FC<ProjectInfoProps> = ({ isLoading, project }) => {
   return (
     <div className="space-y-6 md:space-y-5">
       <header>
-        <h1 className="text-2xl sm:text-4xl lg:text-5xl leading-tight font-semibold">{project.title}</h1>
-        <Label className="text-lg mt-2 font-light">
+        <h1 className="text-2xl font-semibold leading-tight sm:text-4xl lg:text-5xl">{project.title}</h1>
+        <Label className="mt-2 text-lg font-light">
           {project.time} | {project.budget}
         </Label>
-        <div className="flex items-center mt-2">
+        <div className="mt-2 flex items-center">
           <TimerIcon aria-label={`Complete in ${project.time}`} />
           <Label className="ml-2">Complete in {project.time}</Label>
         </div>
       </header>
 
-      <div className="space-y-4 sm:space-y-6 flex flex-col divide-y">
+      <div className="flex flex-col space-y-4 divide-y sm:space-y-6">
         <div className="space-y-4 sm:space-y-6">
           <Label className="text-lg font-light lg:line-clamp-3">{project.description}</Label>
         </div>
 
         <div className="pt-4">
-          <Label className="text-base lg:text-lg font-medium uppercase mb-4">Materials</Label>
+          <Label className="mb-6 text-base font-medium uppercase lg:text-lg">Materials</Label>
           <ul className="space-y-2">
             {project.materials.map((material, index) => (
               <li key={index}>{material}</li>
@@ -51,7 +52,7 @@ const ProjectInfo: React.FC<ProjectInfoProps> = ({ isLoading, project }) => {
         </div>
 
         <div className="pt-4">
-          <Label className="text-base lg:text-lg font-medium uppercase mb-4">Tools</Label>
+          <Label className="mb-6 text-base font-medium uppercase lg:text-lg">Tools</Label>
           <ul className="space-y-2">{project.tools.length >= 1 ? project.tools.map((tool, index) => <li key={index}>{tool}</li>) : <li>Nothing</li>}</ul>
         </div>
       </div>
diff --git a/client/components/project-detail/project-step.tsx b/client/components/project-detail/project-step.tsx
index d3f3655..cbaf954 100644
--- a/client/components/project-detail/project-step.tsx
+++ b/client/components/project-detail/project-step.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import { Label } from "@/components/ui/label";
 import { Skeleton } from "@/components/ui/skeleton";
 
@@ -8,32 +9,35 @@ interface ProjectStepsProps {
 }
 
 const ProjectSteps: React.FC<ProjectStepsProps> = ({ isLoading, projectExplanation }) => {
+  const explanationLines = projectExplanation ? projectExplanation.split("\n") : [];
+
   return (
     <div className="mt-10">
       {isLoading ? (
         <>
-          <Skeleton className="h-7 mt-5 w-full" />
+          <Skeleton className="mt-5 h-7 w-full" aria-hidden="true" />
           <div className="mt-5 space-y-4">
             {[...Array(5)].map((_, i) => (
               <div key={i} className="space-y-2">
-                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-full" aria-hidden="true" />
               </div>
             ))}
           </div>
         </>
       ) : (
         <>
-          <Label className="text-base lg:text-lg font-medium uppercase mb-4">Detailed Steps to Follow</Label>
-          <Label className="text-md sm:text-lg leading-relaxed">
-            {projectExplanation
-              ? projectExplanation.split("\n").map((line, index) => (
-                  <React.Fragment key={index}>
-                    {line}
-                    {index < projectExplanation.split("\n").length - 1 && <br />}
-                  </React.Fragment>
-                ))
-              : "No detailed steps provided."}
-          </Label>
+          <Label className="mb-6 text-base font-medium uppercase lg:text-lg">Detailed Steps to Follow</Label>
+          <div className="text-md leading-relaxed sm:text-lg">
+            {explanationLines.length ? (
+              explanationLines.map((line, index) => (
+                <p key={index} className="text-md mb-2 last:mb-0">
+                  {line}
+                </p>
+              ))
+            ) : (
+              <p>No detailed steps provided.</p>
+            )}
+          </div>
         </>
       )}
     </div>
diff --git a/client/components/project-detail/share-dialog.tsx b/client/components/project-detail/share-dialog.tsx
index 36c7daf..a6bdcb2 100644
--- a/client/components/project-detail/share-dialog.tsx
+++ b/client/components/project-detail/share-dialog.tsx
@@ -1,10 +1,11 @@
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Check, Copy, Share2 } from "lucide-react";
+
+import useClipboard from "@/hooks/useClipboard";
 import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useToast } from "@/components/ui/use-toast";
-import useClipboard from "@/hooks/useClipboard";
-import { Check, Copy, Share2 } from "lucide-react";
 
 interface ShareDialogProps {
   isOpen: boolean;
@@ -42,7 +43,7 @@ const ShareDialog: React.FC<ShareDialogProps> = ({ isOpen, onClose, isSaving, sh
     if (isSaving) {
       return (
         <div className="flex flex-col items-center">
-          <div className="loader mt-3 mb-3"></div>
+          <div className="loader my-3"></div>
           <Label className="text-center">Generating share link...</Label>
         </div>
       );
@@ -54,10 +55,10 @@ const ShareDialog: React.FC<ShareDialogProps> = ({ isOpen, onClose, isSaving, sh
           <Input value={shareLink} readOnly className="mb-3" />
           <div className="flex items-center">
             <Button onClick={onCopy} disabled={!shareLink} aria-label={hasCopied ? "Link Copied" : "Copy Link"}>
-              {hasCopied ? <Check className="w-5 h-5" /> : <Copy className="w-5 h-5" />}
+              {hasCopied ? <Check className="h-5 w-5" /> : <Copy className="h-5 w-5" />}
             </Button>
             <Button onClick={handleWebShare} disabled={!navigator.share} aria-label="Share Link">
-              <Share2 className="w-5 h-5" />
+              <Share2 className="h-5 w-5" />
             </Button>
           </div>
         </div>
diff --git a/client/constants/index.ts b/client/constants/index.ts
index 02dc4fc..396a533 100644
--- a/client/constants/index.ts
+++ b/client/constants/index.ts
@@ -1,34 +1,34 @@
-import { Steps, Footer, FAQ, Commit } from "@/interfaces";
+import { Commit, FAQ, Footer, Steps } from "@/interfaces";
 import {
-  User,
-  Home,
-  Shirt,
-  Hammer,
-  Paperclip,
-  Scissors,
-  Recycle,
-  Gift,
-  Cpu,
-  Mountain,
-  Palette,
+  Asterisk,
+  Blocks,
+  CakeSlice,
   Camera,
   Car,
-  Leaf,
+  ChefHat,
+  Cpu,
   Flower,
-  Blocks,
   Gem,
-  ShowerHead,
-  ChefHat,
+  Gift,
+  Hammer,
+  Home,
+  Leaf,
+  Map,
+  Mountain,
+  Music,
+  Palette,
+  Paperclip,
   PawPrint,
+  Pencil,
+  PencilRuler,
+  Recycle,
+  Ruler,
+  Scissors,
+  Shirt,
+  ShowerHead,
   Sofa,
-  Music,
-  CakeSlice,
-  Map,
   Torus,
-  Asterisk,
-  Ruler,
-  PencilRuler,
-  Pencil,
+  User,
 } from "lucide-react";
 
 export const categories: string[] = [
diff --git a/client/hooks/useClipboard.ts b/client/hooks/useClipboard.ts
index 73f5187..0241b77 100644
--- a/client/hooks/useClipboard.ts
+++ b/client/hooks/useClipboard.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback } from "react";
+import { useCallback, useState } from "react";
 
 const useClipboard = (text: string) => {
   const [hasCopied, setHasCopied] = useState(false);
diff --git a/client/lib/utils.ts b/client/lib/utils.ts
index 365058c..a5ef193 100644
--- a/client/lib/utils.ts
+++ b/client/lib/utils.ts
@@ -1,4 +1,4 @@
-import { type ClassValue, clsx } from "clsx";
+import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
diff --git a/client/package.json b/client/package.json
index 8eee50f..c365c75 100644
--- a/client/package.json
+++ b/client/package.json
@@ -8,7 +8,7 @@
     "start": "next start",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
-    "format": "prettier --write \"./**/*.{ts,tsx,js,jsx,json,css}\""
+    "format": "prettier --write \"./{app,interfaces,lib,components}/**/*.{ts,tsx,js,jsx,json,css}\""
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
@@ -36,6 +36,7 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
@@ -49,7 +50,8 @@
     "eslint-plugin-tailwindcss": "^3.13.0",
     "eslint-plugin-unused-imports": "^3.0.0",
     "postcss": "^8",
-    "prettier": "^3.0.3",
+    "prettier": "^2.8.8",
+    "prettier-plugin-tailwindcss": "^0.4.0",
     "tailwindcss": "^3",
     "typescript": "^5"
   },
@@ -59,7 +61,29 @@
     "singleQuote": false,
     "printWidth": 200,
     "tabWidth": 2,
-    "endOfLine": "auto"
+    "endOfLine": "auto",
+    "importOrder": [
+      "^(react/(.*)$)|^(react$)",
+      "^(next/(.*)$)|^(next$)",
+      "<THIRD_PARTY_MODULES>",
+      "",
+      "^types$",
+      "^@/types/(.*)$",
+      "^@/config/(.*)$",
+      "^@/lib/(.*)$",
+      "^@/hooks/(.*)$",
+      "^@/components/ui/(.*)$",
+      "^@/components/(.*)$",
+      "^@/registry/(.*)$",
+      "^@/styles/(.*)$",
+      "^@/app/(.*)$",
+      "",
+      "^[./]"
+    ],
+    "plugins": [
+      "@ianvs/prettier-plugin-sort-imports",
+      "prettier-plugin-tailwindcss"
+    ]
   },
   "homepage": "https://www.diyspire.online"
 }
diff --git a/package.json b/package.json
index 0106e41..b7e0525 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "build:server": "cd server && npm run build",
     "dev": "concurrently \"npm run dev:client\" \"npm run dev:server\"",
     "build": "npm install && concurrently \"npm run build:client\" \"npm run build:server\"",
-    "lint:all": "cd server && npm run lint && cd ../client && npm run lint"
+    "lint:all": "cd server && npm run lint && cd ../client && npm run lint:fix"
   },
   "husky": {
     "hooks": {
diff --git a/server/src/.lintstagedrc.json b/server/src/.lintstagedrc.json
index 18c0046..1727001 100644
--- a/server/src/.lintstagedrc.json
+++ b/server/src/.lintstagedrc.json
@@ -1,3 +1,3 @@
 {
-  "src/**/*.ts": ["eslint --quiet --fix", "prettier --write"]
+  "src/**/*.ts": ["prettier --write", "eslint --quiet --fix"]
 }