diff --git a/src/components/CircularPanel.tsx b/src/components/CircularPanel.tsx
new file mode 100644
index 0000000..83d7dec
--- /dev/null
+++ b/src/components/CircularPanel.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { FunctionComponent } from 'react';
+
+const CircularPanel: FunctionComponent<{
+  color: string;
+  style?: React.CSSProperties
+}> = (props) => {
+  return (
+    <div style={Object.assign({ background: props.color }, props.style)}>
+      <style jsx>{`
+            div {
+              padding: 10px 20px;
+              border-radius: 30px;
+            }
+          `}
+      </style>
+      {props.children}
+    </div>
+  );
+}
+
+export default CircularPanel;