diff --git a/src/help.tpl.php b/src/help.tpl.php
index 7860fb0..6ea053f 100644
--- a/src/help.tpl.php
+++ b/src/help.tpl.php
@@ -236,6 +236,140 @@
 			}
 		}
 
+		/* Methods grid */
+		.methods-grid {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+			gap: 1rem;
+			margin-bottom: 2rem;
+		}
+
+		.method-card {
+			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+			border-radius: 12px;
+			padding: 1.5rem;
+			text-align: center;
+			transition: all 0.3s ease;
+			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+			position: relative;
+			overflow: hidden;
+		}
+
+		.method-card::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: -100%;
+			width: 100%;
+			height: 100%;
+			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+			transition: left 0.5s;
+		}
+
+		.method-card:hover::before {
+			left: 100%;
+		}
+
+		.method-card:hover {
+			transform: translateY(-5px);
+			box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
+		}
+
+		.method-card a {
+			color: white;
+			text-decoration: none;
+			font-weight: 600;
+			font-size: 1.1rem;
+			display: block;
+			position: relative;
+			z-index: 1;
+		}
+
+		/*
+		.method-card:nth-child(odd) {
+			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+		}
+
+		.method-card:nth-child(even) {
+			background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+		}
+
+		.method-card:nth-child(3n) {
+			background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+		}
+
+		.method-card:nth-child(4n) {
+			background: linear-gradient(135deg,rgb(86, 209, 127) 0%,rgb(52, 199, 172) 100%);
+		}
+
+		.method-card:nth-child(5n) {
+			background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+		}
+		*/
+		.method-card {
+			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+		}
+
+		.methods-section-title {
+			font-size: 2rem;
+			font-weight: 700;
+			color: #2c3e50;
+			margin-bottom: 1.5rem;
+			text-align: center;
+			position: relative;
+		}
+
+		.methods-section-title::after {
+			content: '';
+			position: absolute;
+			bottom: -10px;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 80px;
+			height: 4px;
+			background: linear-gradient(90deg, #667eea, #764ba2);
+			border-radius: 2px;
+		}
+
+		/* Responsive adjustments for methods grid */
+		@media (max-width: 768px) {
+			.methods-grid {
+				grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+				gap: 0.8rem;
+			}
+
+			.method-card {
+				padding: 1.2rem;
+			}
+
+			.method-card a {
+				font-size: 1rem;
+			}
+
+			.methods-section-title {
+				font-size: 1.7rem;
+			}
+		}
+
+		@media (max-width: 480px) {
+			.methods-grid {
+				grid-template-columns: 1fr;
+				gap: 0.6rem;
+			}
+
+			.method-card {
+				padding: 1rem;
+			}
+
+			.method-card a {
+				font-size: 0.95rem;
+			}
+
+			.methods-section-title {
+				font-size: 1.5rem;
+			}
+		}
+
 		/* Utility classes */
 		.text-center {
 			text-align: center;
@@ -266,6 +400,18 @@
 			</div>
 		</nav>
 
+		<!-- List of Methods -->
+		<section class="method-section">
+			<h2 class="methods-section-title">List of Methods</h2>
+			<div class="methods-grid">
+				<?php if (is_array($this->methods)) foreach ($this->methods as $index => $method) { ?>
+					<div class="method-card">
+						<a href="#<?php echo $method['name']; ?>"><?php echo $method['name']; ?></a>
+					</div>
+				<?php } ?>
+			</div>
+		</section>
+
 		<!-- Main Content -->
 		<main class="main-content">
 			<div class="endpoint-url mb-3">
@@ -274,7 +420,7 @@
 			</div>
 
 			<?php if (is_array($this->methods)) foreach ($this->methods as $index => $method) { ?>
-				<section class="method-section">
+				<section class="method-section" id="<?php echo $method['name']; ?>">
 					<h2 class="method-title"><?php echo $method['name']; ?></h2>
 
 					<?php if (!empty($method['description'])) { ?>
@@ -333,4 +479,4 @@
 	</div>
 </body>
 
-</html>
\ No newline at end of file
+</html>