diff --git a/documentation/src/pages/docs/index.tsx b/documentation/src/pages/docs/index.tsx
index 03ebe8ae..a1b64d4b 100644
--- a/documentation/src/pages/docs/index.tsx
+++ b/documentation/src/pages/docs/index.tsx
@@ -59,6 +59,39 @@ const About: React.FC = () => {
                     </h1>
                 </div>
 
+
+<div className="flex">
+                        {/* First Column */}
+                        <div className="w-1/2 pr-4">
+                            <a href="https://demo.openpanel.co/openapanel/" target="_blank" rel="noopener noreferrer">
+                                <h2>OpenPanel Demo</h2>
+                                <img src="/img/panel/v1/dashboard/dashboard.png" alt="Demo OpenPanel" style={{ width: 'auto', height: '350px' }} />
+                                
+                            </a>
+
+<p>
+If you are a website owner, then we recommend interacting with the OpenPanel interface. This is where you can maintain your website.
+</p>
+                          
+                        </div>
+
+                        {/* Second Column */}
+                        <div className="w-1/2 pl-4">
+                            <a href="https://demo.openpanel.co/openadmin/" target="_blank" rel="noopener noreferrer">
+                                <h2>OpenAdmin Demo</h2>
+                                <img src="/img/admin/openadmin_dashboard.png" alt="Demo OpenAdmin" style={{ width: 'auto', height: '350px' }} />
+                                
+                            </a>
+<p>
+If you are a web host, then we recommend interacting with the OpenAdmin interface. This is where you can run and maintain your server.
+</p>
+                        </div>
+                    </div>
+
+
+
+
+                
                 <div
                     className={clsx(
                         "w-[328px] sm:w-[480px] md:w-[624px] lg:w-[912px] xl:w-[1120px]",