diff --git a/fwt/components/Padding.tsx b/fwt/components/Padding.tsx
new file mode 100644
index 0000000..b18c8f6
--- /dev/null
+++ b/fwt/components/Padding.tsx
@@ -0,0 +1,13 @@
+import { type JSXElement } from 'solid-js'
+
+interface Props {
+  left: number
+  right: number
+  top?: number
+  bottom?: number
+  children: JSXElement
+}
+
+export default (props: Props) => {
+  return <div style={{ padding: `${props.top || 0}rem ${props.right}rem ${props.bottom || 0}rem ${props.left}rem` }}>{props.children}</div>
+}