diff --git a/src/components/Divider/Divider.jsx b/src/components/Divider/Divider.jsx
new file mode 100644
index 0000000..1da0414
--- /dev/null
+++ b/src/components/Divider/Divider.jsx
@@ -0,0 +1,41 @@
+import { defaultTo, prop } from "ramda";
+import classes from "./Divider.module.css";
+
+/**
+ * @typedef (object) DividerProps
+ * @property {number} [thickness]
+ */
+
+const defaultThickness = defaultTo(1);
+
+/**
+ * @param {DividerProps} props
+ */
+function Divider(props) {
+  return (
+    <hr
+      class={prop("divider", classes)}
+      style={{
+        "border-top-width": `${defaultThickness(props.thickness)}px`,
+        height: `${defaultThickness(props.thickness)}px`,
+      }}
+    />
+  );
+}
+
+/**
+ * @param {DividerProps} props
+ */
+Divider.Vertical = function (props) {
+  return (
+    <hr
+      class={prop("divider", classes)}
+      style={{
+        "border-left-width": `${defaultThickness(props.thickness)}px`,
+        width: `${defaultThickness(props.thickness)}px`,
+      }}
+    />
+  );
+};
+
+export default Divider;
diff --git a/src/components/Divider/Divider.module.css b/src/components/Divider/Divider.module.css
new file mode 100644
index 0000000..99e237a
--- /dev/null
+++ b/src/components/Divider/Divider.module.css
@@ -0,0 +1,15 @@
+.divider {
+  width: 100%;
+  border: none;
+  border-top-style: solid;
+  border-top-color: var(--palette-gray-5);
+  border-top-width: 0;
+}
+
+.divider-vertical {
+  height: 100%;
+  border: none;
+  border-left-style: solid;
+  border-left-color: var(--palette-gray-5);
+  border-left-width: 0;
+}