diff --git a/packages/ui/demo/src/index.js b/packages/ui/demo/src/index.js
index fee23a4f..a2d94ba6 100644
--- a/packages/ui/demo/src/index.js
+++ b/packages/ui/demo/src/index.js
@@ -33,6 +33,7 @@ import FormComponents from "./examples/FormComponents";
 import UploadCsvWizard from "./examples/UploadCsvWizard";
 import TagSelectDemo from "./examples/TagSelectDemo";
 import { createRoot } from "react-dom/client";
+import { FormSeparator } from "../../src/FormComponents/FormSeparator";
 
 FocusStyleManager.onlyShowFocusOnTabs();
 
@@ -149,6 +150,16 @@ const demos = {
       }
     ]
   },
+  FormSeparator: {
+    demo: FormSeparator,
+    props: [
+      {
+        name: "label",
+        description: "The text to display in the separator",
+        type: "string"
+      }
+    ]
+  },
   MenuBar: {
     demo: MenuBar,
     props: [
diff --git a/packages/ui/src/FormComponents/FormSeparator.js b/packages/ui/src/FormComponents/FormSeparator.js
index 89684c25..7c71d862 100644
--- a/packages/ui/src/FormComponents/FormSeparator.js
+++ b/packages/ui/src/FormComponents/FormSeparator.js
@@ -3,7 +3,7 @@ import "./style.css";
 export const FormSeparator = ({ label = "or" } = {}) => {
   return (
     <div className="form-separator">
-      <p>{label}</p>
+      <p style={{ opacity: 0.8 }}>{label}</p>
     </div>
   );
 };