diff --git a/src/StyledComponent.tsx b/src/StyledComponent.tsx
new file mode 100644
index 0000000..e8631a7
--- /dev/null
+++ b/src/StyledComponent.tsx
@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+const Title = styled.h1`
+  color: red;
+  text-align: center;
+`;
+
+const Wrapper = styled.section`
+  padding: 4em;
+  background: papayawhip;
+`;
+
+export default () => (
+  <Wrapper>
+    <Title>This is a Styled Component!</Title>
+  </Wrapper>
+);
diff --git a/src/index.tsx b/src/index.tsx
index 615253d..7b12945 100755
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -15,6 +15,7 @@ import { VFC } from "react";
 import { FaShip } from "react-icons/fa";
 
 import logo from "../assets/logo.png";
+import StyledComponent from "./StyledComponent";
 
 // interface AddMethodArgs {
 //   left: number;
@@ -57,6 +58,10 @@ const Content: VFC<{ serverAPI: ServerAPI }> = ({}) => {
         </ButtonItem>
       </PanelSectionRow>
 
+      <PanelSectionRow>
+        <StyledComponent />
+      </PanelSectionRow>
+
       <PanelSectionRow>
         <div style={{ display: "flex", justifyContent: "center" }}>
           <img src={logo} />