diff --git a/app/Playground/Components/page.tsx b/app/Playground/Components/page.tsx
index 2fc6257..65fef11 100644
--- a/app/Playground/Components/page.tsx
+++ b/app/Playground/Components/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Button from "@/components/ui/Button";
+import Dropdown from "@/components/ui/Dropdown";
 import Form from "@/components/ui/Form";
 import NavLink from "@/components/ui/NavLink";
 import RoundedContainer from "@/components/ui/RoundedContainer";
@@ -48,6 +49,11 @@ export default function Components() {
           <p>More Contents</p>
         </div>
       </RoundedContainer>
+
+      <h1>Dropdown</h1>
+      <Dropdown>
+        <p>Hello!</p>
+      </Dropdown>
     </div>
   );
 }
diff --git a/components/ui/Dropdown.tsx b/components/ui/Dropdown.tsx
new file mode 100644
index 0000000..6ceb78c
--- /dev/null
+++ b/components/ui/Dropdown.tsx
@@ -0,0 +1,19 @@
+import { useState } from "react";
+import Button from "./Button";
+
+export default function Dropdown({ children }: { children: React.ReactNode }) {
+  const [dropped, setDropped] = useState<boolean>(false);
+
+  return (
+    <div>
+      <Button
+        title="Drop down"
+        mode="DARK"
+        onClick={() => {
+          setDropped(!dropped);
+        }}
+      ></Button>
+      {dropped && <div>{children}</div>}
+    </div>
+  );
+}