diff --git a/fwt/components/Column/Column.sass b/fwt/components/Column/Column.sass
new file mode 100644
index 0000000..7a9309e
--- /dev/null
+++ b/fwt/components/Column/Column.sass
@@ -0,0 +1,39 @@
+.top
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: flex-start
+  align-items: center
+  align-content: center
+
+.center
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: center
+  align-items: center
+  align-content: center
+
+.right
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: flex-end
+  align-items: center
+  align-content: center
+
+.split
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: space-between
+  align-items: center
+  align-content: center
+
+.spaced
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: space-around
+  align-items: center
+  align-content: center
diff --git a/fwt/components/Column/Column.tsx b/fwt/components/Column/Column.tsx
new file mode 100644
index 0000000..9e84a11
--- /dev/null
+++ b/fwt/components/Column/Column.tsx
@@ -0,0 +1,17 @@
+import './Column.sass'
+
+interface Props {
+  children: any
+  content: 'top' | 'center' | 'right' | 'split' | 'spaced'
+  gap?: number
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <div class={props.content} style={`gap: ${props.gap}rem`}>
+        {props.children}
+      </div>
+    </>
+  )
+}
diff --git a/fwt/components/Row/Row.sass b/fwt/components/Row/Row.sass
new file mode 100644
index 0000000..a103f5c
--- /dev/null
+++ b/fwt/components/Row/Row.sass
@@ -0,0 +1,47 @@
+.left
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: flex-start
+  align-items: center
+  align-content: center
+
+.center
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: center
+  align-items: center
+  align-content: center
+
+.right
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: flex-end
+  align-items: center
+  align-content: center
+
+.split
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: space-between
+  align-items: center
+  align-content: center
+
+.spaced
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: space-around
+  align-items: center
+  align-content: center
+
+.even
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: space-evenly
+  align-items: center
+  align-content: center
diff --git a/fwt/components/Row/Row.tsx b/fwt/components/Row/Row.tsx
new file mode 100644
index 0000000..feb34a5
--- /dev/null
+++ b/fwt/components/Row/Row.tsx
@@ -0,0 +1,18 @@
+import './Row.sass'
+// import { Switch, Match } from 'solid-js'
+
+interface Props {
+  children: any
+  content: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
+  gap?: number
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <div class={props.content} style={`gap: ${props.gap}rem`}>
+        {props.children}
+      </div>
+    </>
+  )
+}