diff --git a/docs/git_hooks_automating_your_workflow.md b/docs/git_hooks_automating_your_workflow.md
index 6dd73df..4444329 100644
--- a/docs/git_hooks_automating_your_workflow.md
+++ b/docs/git_hooks_automating_your_workflow.md
@@ -1,5 +1,3 @@
-# git-hooks-automating-your-workflow
-
 Git hooks are powerful scripts that can automate various aspects of your development workflow. They allow you to execute custom scripts before or after important Git events, such as committing, pushing, or merging. This post will introduce you to Git hooks and show you how to leverage them effectively.
 
 ## What Are Git Hooks?
diff --git a/src/pages/Doc/index.jsx b/src/pages/Doc/index.jsx
index 05aa084..e954a27 100644
--- a/src/pages/Doc/index.jsx
+++ b/src/pages/Doc/index.jsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { List, Spin, Alert } from 'antd';
 import Layout from '../../components/Layout/Layout';
+import { FaArrowRight } from "react-icons/fa";
 
 const DocList = () => {
     const [docs, setDocs] = useState([]);
@@ -37,10 +38,12 @@ const DocList = () => {
         <Layout>
             <div className="container mx-auto p-4 min-h-screen">
                 <h1 className="text-3xl font-bold mb-20 mt-5 text-center">Documentation</h1>
-                <ul>
+                <ul className='grid gap-5 mx-auto md:max-w-2xl'>
                     {
                         docs.map(item =>
-                            <Link to={item.title} className='capitalize'>{item.title.replace(/_/g, ' ')}</Link>
+                            <Link to={item.title} className='capitalize group flex items-center justify-between bg-white/10 p-5 rounded-md'>{item.title.replace(/_/g, ' ')}
+                                 <FaArrowRight className="dark:text-white opacity-0 group-hover:opacity-100 -translate-x-10 group-hover:translate-x-0 transition duration-300" />
+                            </Link>
                         )
                     }
                 </ul>
diff --git a/src/pages/Doc/single doc/index.jsx b/src/pages/Doc/single doc/index.jsx
index fbbefbb..0b6b03b 100644
--- a/src/pages/Doc/single doc/index.jsx	
+++ b/src/pages/Doc/single doc/index.jsx	
@@ -12,6 +12,7 @@ const DocDetail = () => {
     const [content, setContent] = useState('');
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
+    const [activeSection, setActiveSection] = useState(null);
     const [headings, setHeadings] = useState([]);
     const tableRef = useRef(null);
 
@@ -83,17 +84,17 @@ const DocDetail = () => {
         <Layout>
             <section className="container mx-auto p-4 min-h-screen">
                 <h3 className="text-2xl md:text-3xl capitalize text-center my-10 mb-20 font-semibold">
-                    {slug.replace(/-/g, ' ')}
+                    {slug.replace(/_/g, ' ')}
                 </h3>
                 <div className="flex">
                     <aside ref={tableRef} className="sticky top-20 w-1/4 p-4 h-0">
                         <h2 className="text-xl font-bold mb-2">Table of Contents</h2>
-                        <ul>
+                        <ul className='grid gap-2'>
                             {headings.map((heading, index) => (
-                                <li key={index} className={`ml-${heading.level}`}>
+                                <li key={index} className={`ml-${heading.level} ${activeSection === heading.title.replace(/\s+/g, '-').toLowerCase() && 'text-green-500 font-semibold'}`}>
                                     <a href={`#${heading.title.replace(/\s+/g, '-').toLowerCase()}`}
 
-                                        onClick={() => console.log(heading.title.replace(/\s+/g, '-').toLowerCase())}
+                                        onClick={() => setActiveSection(heading.title.replace(/\s+/g, '-').toLowerCase())}
                                     >
                                         {heading.title}
                                     </a>