diff --git a/src/App.css b/src/App.css
index 6cbf8ab..9f68b69 100644
--- a/src/App.css
+++ b/src/App.css
@@ -11,31 +11,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* elements have padding */
-#SideBar, #BottomBar, #RenderingSection {
-  @apply p-4;
+/* colour */
+#root, #SideBar, #BottomBar, #MainSection {
+  @apply bg-slate-600;
 }
 
-/* bars have colour */
-#SideBar, #BottomBar {
-  @apply bg-slate-800;
+#RenderingSection {
+  @apply bg-slate-50 shadow-lg rounded-t-none rounded-r-none;
 }
 
-/* sections have colour */
 section {
   @apply rounded-md;
 }
 
-section, #root {
-  @apply bg-slate-800 text-yellow-100;
-}
-
-#MainSection {
-  @apply bg-slate-800;
-}
-
-#RenderingSection {
-  @apply bg-slate-600 rounded-t-none rounded-r-none;
+/* elements have padding */
+#SideBar, #BottomBar, #RenderingSection {
+  @apply p-4;
 }
 
 /* links */
diff --git a/src/App.tsx b/src/App.tsx
index c693e04..6dc0678 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,23 +1,59 @@
 import './App.css';
-// import BottomBar from './components/BottomBar.tsx';
-// import RenderingSection from './components/RenderingSection.tsx';
-// import SideBar from './components/SideBar.tsx';
-// import MainSection from './components/MainSection.tsx'
+import BottomBar from './components/BottomBar.tsx';
+import RenderingSection from './components/RenderingSection.tsx';
+import SideBar from './components/SideBar.tsx';
+import MainSection from './components/MainSection.tsx'
+import Card from './components/Card.tsx'
 
 const App = () => {
-  return <section className='h-full w-full flex'>
-    <div className='place-self-center text-center text-3xl w-full'>
-      Under Construction
-    </div>
-  </section>
-
   // return <section className='h-full w-full flex'>
-  //   <SideBar />
-  //   <MainSection >
-  //     <RenderingSection />
-  //     <BottomBar />
-  //   </MainSection>
+  //   <div className='place-self-center text-center text-3xl w-full'>
+  //     Under Construction
+  //   </div>
   // </section>
+
+  return <>
+    <section className='h-full w-full flex'>
+      <SideBar>
+        <Card title='Hello world'>
+          <div> Test </div>
+        </Card>
+        <Card title='Is square?'>
+          <input id='isSquare' type='checkbox' /> <label htmlFor='isSquare'> yes </label>
+        </Card>
+        <Card title='Dimensions'>
+          <input id='width' type='number' /> <label htmlFor='width'> width </label> <br />
+          <input id='height' type='number' /> <label htmlFor='height'> height </label>
+        </Card>
+        <Card title='Dimensions'>
+          <input id='width' type='number' /> <label htmlFor='width'> width </label> <br />
+          <input id='height' type='number' /> <label htmlFor='height'> height </label>
+        </Card>
+        <Card title='Dimensions'>
+          <input id='width' type='number' /> <label htmlFor='width'> width </label> <br />
+          <input id='height' type='number' /> <label htmlFor='height'> height </label>
+        </Card>
+        <Card title='Dimensions'>
+          <input id='width' type='number' /> <label htmlFor='width'> width </label> <br />
+          <input id='height' type='number' /> <label htmlFor='height'> height </label>
+        </Card>
+        <Card title='Dimensions'>
+          <input id='width' type='number' /> <label htmlFor='width'> width </label> <br />
+          <input id='height' type='number' /> <label htmlFor='height'> height </label>
+        </Card>
+      </SideBar>
+      <MainSection >
+        <RenderingSection />
+        <BottomBar >
+          <Card title='Component 1' />
+          <Card title='Component 1' />
+          <Card title='Component 1' />
+          <Card title='Component 1' />
+          <Card title='Component 1' />
+          <Card title='Component 1' />
+        </BottomBar>
+      </MainSection>
+    </section></>
 };
 
 export default App;
\ No newline at end of file
diff --git a/src/components/BottomBar.css b/src/components/BottomBar.css
index dc392d5..aa5b946 100644
--- a/src/components/BottomBar.css
+++ b/src/components/BottomBar.css
@@ -1,3 +1,3 @@
 #BottomBar {
-    @apply w-full h-36 place-self-end;
-}
+    @apply w-full min-h-36 place-self-end overflow-scroll;
+}
\ No newline at end of file
diff --git a/src/components/BottomBar.tsx b/src/components/BottomBar.tsx
index c2a01cc..9359af5 100644
--- a/src/components/BottomBar.tsx
+++ b/src/components/BottomBar.tsx
@@ -1,13 +1,12 @@
+import { ReactNode } from 'react'
 import './BottomBar.css'
 
-interface BottomBarProps {
-    childNodes?: React.ReactNode[]
+interface Props {
+    children?: React.ReactNode[]
 }
 
-export default function BottomBar({ childNodes }: BottomBarProps) {
-
+export default function BottomBar({ children }: Props): ReactNode {
     return <section id='BottomBar'>
-        bottom bar
-        {childNodes}
+        {children}
     </section>
 }
\ No newline at end of file
diff --git a/src/components/Card.css b/src/components/Card.css
new file mode 100644
index 0000000..fa30b76
--- /dev/null
+++ b/src/components/Card.css
@@ -0,0 +1,31 @@
+div.card {
+    @apply max-w-sm rounded overflow-hidden shadow-lg bg-slate-100;
+}
+
+#BottomBar>.card{
+    @apply mr-4;
+}
+
+#SideBar>.card{
+    @apply mb-4;
+}
+
+.card>div {
+    @apply px-6 py-4;
+}
+
+.card>div>.title{
+    @apply font-bold text-base mb-2 capitalize;
+}
+
+.card>div>.content{
+    @apply text-gray-700 text-xs;
+}
+
+.card input {
+    @apply mt-2 mr-2 bg-slate-200;
+}
+
+.card label {
+    @apply mt-2 float-right;
+}
\ No newline at end of file
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
new file mode 100644
index 0000000..cac193b
--- /dev/null
+++ b/src/components/Card.tsx
@@ -0,0 +1,19 @@
+import { ReactNode } from 'react'
+import './Card.css'
+
+interface Props {
+    title?: string
+    children?: ReactNode[] | ReactNode
+}
+
+export default function Card({ title, children }: Props): ReactNode {
+
+    return <>
+        <div className='card'>
+            <div>
+                {(title ? <div className='title'>{title}</div> : undefined)}
+                {(children ? <div className='content'> {children} </div> : undefined)}
+            </div>
+        </div>
+    </>
+}
\ No newline at end of file
diff --git a/src/components/MainSection.tsx b/src/components/MainSection.tsx
index d35a014..6e6ea20 100644
--- a/src/components/MainSection.tsx
+++ b/src/components/MainSection.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { ReactNode } from 'react'
 import './MainSection.css'
 
-interface MainSectionProps {
+interface Props {
     children?: React.ReactNode[]
 }
 
-export default function MainSection({ children }: MainSectionProps) {
+export default function MainSection({ children }: Props): ReactNode {
     return <section id='MainSection'>
         {children}
     </section>
diff --git a/src/components/RenderingSection.tsx b/src/components/RenderingSection.tsx
index ce6d8c3..724f9a3 100644
--- a/src/components/RenderingSection.tsx
+++ b/src/components/RenderingSection.tsx
@@ -1,13 +1,13 @@
+import { ReactNode } from 'react'
 import './RenderingSection.css'
 
-interface RenderingSectionProps {
-    childNodes?: React.ReactNode[]
+interface Props {
+    children?: React.ReactNode[]
 }
 
-export default function RenderingSection({ childNodes }: RenderingSectionProps) {
+export default function RenderingSection({ children }: Props): ReactNode {
 
     return <section id="RenderingSection">
-        rendering section
-        {childNodes}
+        {children}
     </section>
 }
\ No newline at end of file
diff --git a/src/components/SideBar.css b/src/components/SideBar.css
index 659a269..464a981 100644
--- a/src/components/SideBar.css
+++ b/src/components/SideBar.css
@@ -1,3 +1,3 @@
 #SideBar {
-    @apply h-screen w-36;
+    @apply h-screen min-w-72 overflow-scroll;
 }
\ No newline at end of file
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 1c9ba70..5c87cee 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -1,13 +1,13 @@
+import { ReactNode } from 'react'
 import './SideBar.css'
 
-interface SideBarProps {
-    childNodes?: React.ReactNode[]
+interface Props {
+    children?: ReactNode[] | ReactNode
 }
 
-export default function SideBar({ childNodes }: SideBarProps) {
+export default function SideBar({ children }: Props): ReactNode {
 
     return <section id="SideBar">
-        sidebar
-        {childNodes}
+        {children}
     </section>
 }
\ No newline at end of file