diff --git a/fwt/components/Box/Box.sass b/fwt/components/Box/Box.sass
new file mode 100644
index 0000000..17165bb
--- /dev/null
+++ b/fwt/components/Box/Box.sass
@@ -0,0 +1,6 @@
+.box
+  padding: 1rem
+
+.curvedbox
+  @extend .box
+  border-radius: 8px
diff --git a/fwt/components/Box/Box.tsx b/fwt/components/Box/Box.tsx
new file mode 100644
index 0000000..dc71de3
--- /dev/null
+++ b/fwt/components/Box/Box.tsx
@@ -0,0 +1,20 @@
+import type { ImageMetadata } from 'astro'
+import './Box.sass'
+import { Show, type JSXElement, createMemo } from 'solid-js'
+
+interface Props {
+  thickness: number
+  color?: string
+  children: JSXElement
+  curved?: boolean
+}
+
+export default (props: Props) => {
+  const boxClass = createMemo(() => (props.curved ? 'curvedbox' : 'box'))
+
+  return (
+    <section class={boxClass()} style={{ border: `${props.thickness}px solid ${props.color || 'white'}` }}>
+      {props.children}
+    </section>
+  )
+}