diff --git a/app/Playground/Components/page.tsx b/app/Playground/Components/page.tsx
index 3593510..522f645 100644
--- a/app/Playground/Components/page.tsx
+++ b/app/Playground/Components/page.tsx
@@ -1,3 +1,4 @@
+import Button from "@/components/ui/Button";
 import Form from "@/components/ui/Form";
 import Hyperlink from "@/components/ui/Hyperlink";
 import Referencelink from "@/components/ui/Referencelink";
@@ -6,6 +7,9 @@ import RoundedContainer from "@/components/ui/RoundedContainer";
 export default function Components() {
   return (
     <div className="flex flex-col items-center gap-4 w-full h-full">
+      <h1>Button</h1>
+      <Button title={"Button"} mode="DARK" />
+
       <h1>Form</h1>
       <Form action={"Action here"} submitText="Example submit button ">
         <input type="text" name="text" placeholder="example placeholder text" />
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
new file mode 100644
index 0000000..071e831
--- /dev/null
+++ b/components/ui/Button.tsx
@@ -0,0 +1,15 @@
+export default function Button({
+  title,
+  mode = "LIGHT",
+}: {
+  title: string;
+  mode?: "DARK" | "LIGHT";
+}) {
+  return (
+    <button
+      className={`${mode == "LIGHT" ? "bg-slate-400 dark:bg-slate-800 hover:bg-slate-600" : "bg-gray-400 dark:bg-slate-900"} font-medium py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out`}
+    >
+      {title}
+    </button>
+  );
+}