diff --git a/src/welcome_page.cpp b/src/welcome_page.cpp
index 3debf80..b5480bb 100644
--- a/src/welcome_page.cpp
+++ b/src/welcome_page.cpp
@@ -69,11 +69,51 @@ std::string welcome_page() {
             color: #2b6cb0;
             margin-top: 0;
         }
-        code {
-            background: #f1f5f9;
+        .endpoint-group {
+            margin-bottom: 2rem;
+        }
+        .endpoint-group h3 {
+            color: #4a5568;
+            font-size: 1.2rem;
+            margin-bottom: 1rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 2px solid #e2e8f0;
+        }
+        .endpoint-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        .endpoint-list li {
+            margin-bottom: 0.75rem;
+            padding: 0.75rem;
+            background: #f8fafc;
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+        }
+        .endpoint-list li:last-child {
+            margin-bottom: 0;
+        }
+        .endpoint-method {
+            font-weight: bold;
+            color: #2b6cb0;
+            margin-right: 0.5rem;
+            min-width: 60px;
+        }
+        .endpoint-path {
+            font-family: 'Courier New', Courier, monospace;
+            background: #edf2f7;
             padding: 0.2rem 0.4rem;
             border-radius: 4px;
-            font-family: 'Courier New', Courier, monospace;
+            margin-right: 1rem;
+        }
+        .endpoint-desc {
+            color: #4a5568;
+        }
+        .endpoint-param {
+            color: #805ad5;
+            font-weight: 500;
         }
     </style>
 </head>
@@ -96,14 +136,65 @@ std::string welcome_page() {
         </div>
 
         <div class="endpoints">
-            <h2>Available Endpoints</h2>
-            <ul>
-                <li><code>GET /dir</code> - List all objects</li>
-                <li><code>GET /hash/{label:tag}</code> - Get hash for a label:tag</li>
-                <li><code>GET /exists/{hash}</code> - Check if an object exists</li>
-                <li><code>GET /object/{hash}</code> - Retrieve an object by hash</li>
-                <li><code>GET /meta/{hash}</code> - Get object metadata</li>
-            </ul>
+            <h2>API Endpoints</h2>
+            
+            <div class="endpoint-group">
+                <h3>Directory Operations</h3>
+                <ul class="endpoint-list">
+                    <li>
+                        <span class="endpoint-method">GET</span>
+                        <span class="endpoint-path">/dir</span>
+                        <span class="endpoint-desc">List all objects in the storage</span>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="endpoint-group">
+                <h3>Label:Tag Operations</h3>
+                <ul class="endpoint-list">
+                    <li>
+                        <span class="endpoint-method">GET</span>
+                        <span class="endpoint-path">/hash/<span class="endpoint-param">label:tag</span></span>
+                        <span class="endpoint-desc">Get hash for a label:tag</span>
+                    </li>
+                    <li>
+                        <span class="endpoint-method">GET</span>
+                        <span class="endpoint-path">/exists/<span class="endpoint-param">label:tag</span></span>
+                        <span class="endpoint-desc">Check if an object exists by label:tag</span>
+                    </li>
+                    <li>
+                        <span class="endpoint-method">GET</span>
+                        <span class="endpoint-path">/object/<span class="endpoint-param">label:tag</span></span>
+                        <span class="endpoint-desc">Retrieve an object by label:tag</span>
+                    </li>
+                    <li>
+                        <span class="endpoint-method">GET</span>
+                        <span class="endpoint-path">/meta/<span class="endpoint-param">label:tag</span></span>
+                        <span class="endpoint-desc">Get object metadata by label:tag</span>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="endpoint-group">
+                <h3>Hash Operations</h3>
+                <ul class="endpoint-list">
+                    <li>
+                        <span class="endpoint-method">GET</span>
+                        <span class="endpoint-path">/exists/<span class="endpoint-param">hash</span></span>
+                        <span class="endpoint-desc">Check if an object exists by hash</span>
+                    </li>
+                    <li>
+                        <span class="endpoint-method">GET</span>
+                        <span class="endpoint-path">/object/<span class="endpoint-param">hash</span></span>
+                        <span class="endpoint-desc">Retrieve an object by hash</span>
+                    </li>
+                    <li>
+                        <span class="endpoint-method">GET</span>
+                        <span class="endpoint-path">/meta/<span class="endpoint-param">hash</span></span>
+                        <span class="endpoint-desc">Get object metadata by hash</span>
+                    </li>
+                </ul>
+            </div>
         </div>
     </div>
 </body>