diff --git a/apps/views/pages/collapse.tsx b/apps/views/pages/collapse.tsx
new file mode 100644
index 0000000..32b725b
--- /dev/null
+++ b/apps/views/pages/collapse.tsx
@@ -0,0 +1,14 @@
+import Collapse from "./components/Collapse";
+
+function Collap() {
+  return (
+    <Collapse
+      variant="primary"
+      lablecontent="Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
+"
+      lable="toggle"
+    />
+  );
+}
+
+export default Collap;
diff --git a/apps/views/pages/components/Collapse.jsx b/apps/views/pages/components/Collapse.jsx
new file mode 100644
index 0000000..db12d47
--- /dev/null
+++ b/apps/views/pages/components/Collapse.jsx
@@ -0,0 +1,22 @@
+function Collapse(props) {
+  return (
+    <div>
+      <button
+        className={`btn btn-${props.variant}`}
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#collapseExample"
+        aria-expanded="false"
+        aria-controls="collapseExample"
+      >
+        {props.label}
+      </button>
+
+      <div className="collapse" id="collapseExample">
+        <div className="card card-body">{props.labelcontent}</div>
+      </div>
+    </div>
+  );
+}
+
+export default Collapse;
diff --git a/apps/views/pages/index.tsx b/apps/views/pages/index.jsx
similarity index 88%
rename from apps/views/pages/index.tsx
rename to apps/views/pages/index.jsx
index bcc7457..7d77907 100644
--- a/apps/views/pages/index.tsx
+++ b/apps/views/pages/index.jsx
@@ -15,6 +15,8 @@ export default function Docs() {
       <br />
       <br />
       <Button>Hello</Button>
+      <br />
+      <Link href="/collapse">Collapse</Link>
     </div>
   );
 }
diff --git a/packages/kbs-core/src/index.tsx b/packages/kbs-core/src/index.tsx
index f623b20..165de09 100644
--- a/packages/kbs-core/src/index.tsx
+++ b/packages/kbs-core/src/index.tsx
@@ -1,2 +1,3 @@
 import * as React from "react";
+
 export { Button, type ButtonProps } from "./Button";