diff --git a/website/src/refine-theme/DEMO_landing-github-star-button.tsx b/website/src/refine-theme/DEMO_landing-github-star-button.tsx
new file mode 100644
index 00000000..fb96e52c
--- /dev/null
+++ b/website/src/refine-theme/DEMO_landing-github-star-button.tsx
@@ -0,0 +1,33 @@
+import clsx from "clsx";
+import React from "react";
+export const LandingGithubStarButton = () => {
+
+    return (
+        <a
+            href="/demo"
+            className={clsx(
+                                "self-start",
+                                "rounded-3xl",
+                                "!text-gray-0 dark:!text-gray-900",
+                                "bg-refine-blue dark:bg-refine-cyan-alt",
+                                "transition-[filter]",
+                                "duration-150",
+                                "ease-in-out",
+                                "hover:brightness-110",
+                                "py-2",
+                                "pl-7 pr-8",
+                                "landing-md:px-8",
+                                "landing-lg:pl-7 landing-lg:pr-8",
+                                "flex",
+                                "items-center",
+                                "justify-center",
+                                "gap-2",
+                                "hover:!no-underline",
+                            )}
+                        >
+                    <span className={clsx("text-base", "font-semibold")}>
+                        Try Demo
+                    </span>
+                </a>
+    );
+};