diff --git a/.eslintcache b/.eslintcache
index a7a02d2..a8eaeda 100644
--- a/.eslintcache
+++ b/.eslintcache
@@ -1 +1 @@
-[{"/Users/user/repos/sort-measurer/src/index.js":"1","/Users/user/repos/sort-measurer/src/App.js":"2","/Users/user/repos/sort-measurer/src/Navbar.js":"3","/Users/user/repos/sort-measurer/src/MainSection.js":"4","/Users/user/repos/sort-measurer/src/MainSheet.js":"5"},{"size":222,"mtime":1607967045945,"results":"6","hashOfConfig":"7"},{"size":318,"mtime":1607965957763,"results":"8","hashOfConfig":"7"},{"size":290,"mtime":1610490068978,"results":"9","hashOfConfig":"7"},{"size":246,"mtime":1607968424050,"results":"10","hashOfConfig":"7"},{"size":214,"mtime":1609099097125,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"ff9ndh",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"17","messages":"18","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"19","usedDeprecatedRules":"14"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/user/repos/sort-measurer/src/index.js",[],["24","25"],"/Users/user/repos/sort-measurer/src/App.js",[],"/Users/user/repos/sort-measurer/src/Navbar.js",["26"],"import React from \"react\";\nimport \"./Navbar.css\";\nimport styled from \"styled-components\";\n\nexport default function Navbar() {\n  return (\n    <div className=\"Navbar\">\n      <h2>Navbar</h2>\n      <p>Example</p>\n      <p>Example</p>\n      <p>Example</p>\n      <p>Example</p>\n    </div>\n  );\n}\n","/Users/user/repos/sort-measurer/src/MainSection.js",[],"/Users/user/repos/sort-measurer/src/MainSheet.js",[],{"ruleId":"27","replacedBy":"28"},{"ruleId":"29","replacedBy":"30"},{"ruleId":"31","severity":1,"message":"32","line":3,"column":8,"nodeType":"33","messageId":"34","endLine":3,"endColumn":14},"no-native-reassign",["35"],"no-negated-in-lhs",["36"],"no-unused-vars","'styled' is defined but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
+[{"/Users/user/repos/sort-measurer/src/index.js":"1","/Users/user/repos/sort-measurer/src/App.js":"2","/Users/user/repos/sort-measurer/src/reportWebVitals.js":"3","/Users/user/repos/sort-measurer/src/components/Playground.js":"4","/Users/user/repos/sort-measurer/src/components/Figure.js":"5"},{"size":500,"mtime":1611856800075,"results":"6","hashOfConfig":"7"},{"size":3171,"mtime":1611950981162,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1611856800076,"results":"9","hashOfConfig":"7"},{"size":2114,"mtime":1611951553195,"results":"10","hashOfConfig":"7"},{"size":307,"mtime":1611951739720,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"ff9ndh",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/user/repos/sort-measurer/src/index.js",[],["23","24"],"/Users/user/repos/sort-measurer/src/App.js",[],"/Users/user/repos/sort-measurer/src/reportWebVitals.js",[],"/Users/user/repos/sort-measurer/src/components/Playground.js",[],"/Users/user/repos/sort-measurer/src/components/Figure.js",[],{"ruleId":"25","replacedBy":"26"},{"ruleId":"27","replacedBy":"28"},"no-native-reassign",["29"],"no-negated-in-lhs",["30"],"no-global-assign","no-unsafe-negation"]
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index aa069f2..1d8850b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,34 +10,11 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>Guillotine cut app</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
index 548b41b..0de1ec3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
 import "./App.css";
-import Playground from "./Playground.js";
+import Playground from "./components/Playground.js";
 var randomColor = Math.floor(Math.random() * 16777215).toString(16);
 
 var current = "#" + randomColor;
diff --git a/src/components/Figure.js b/src/components/Figure.js
new file mode 100644
index 0000000..16167c3
--- /dev/null
+++ b/src/components/Figure.js
@@ -0,0 +1,18 @@
+export default function Figure(props) {
+  return (
+    <>
+      <div
+        style={{
+          width: props.w,
+          height: props.h,
+          background: props.c,
+          display: "inline-block",
+        }}
+      >
+        <p>
+          {props.w}x{props.h}
+        </p>
+      </div>
+    </>
+  );
+}
diff --git a/src/Playground.js b/src/components/Playground.js
similarity index 68%
rename from src/Playground.js
rename to src/components/Playground.js
index 494eabf..6f2474c 100644
--- a/src/Playground.js
+++ b/src/components/Playground.js
@@ -1,3 +1,6 @@
+import Figure from "./Figure.js";
+import styled from "styled-components";
+
 class Rectangle {
   constructor(height, width) {
     this.height = height;
@@ -11,36 +14,16 @@ class Rectangle {
   }
 }
 
-const rect1 = new Rectangle(30, 50);
-const rect2 = new Rectangle(40, 50);
-const rect3 = new Rectangle(10, 20);
+const rect1 = new Rectangle(300, 600);
+const rect2 = new Rectangle(400, 500);
+const rect3 = new Rectangle(100, 200);
 
+/*
 const tab = [rect1.area, rect2.area, rect3.area];
 const sortedtab = tab.sort(function (tab, temp) {
   return tab - temp;
 });
-const prettytab = sortedtab.toString();
-
-let Sheet = { w: 10, h: 5 };
-const Square = { w: 4, h: 4 };
-
-let activities = [
-  ["Work", 9],
-  ["Eat", 1],
-  ["Commute", 2],
-  ["Play Game", 1],
-  ["Sleep", 7],
-];
-console.table(activities);
-// loop the outer array
-for (let i = 0; i < activities.length; i++) {
-  // get the size of the inner array
-  var innerArrayLength = activities[i].length;
-  // loop the inner array
-  for (let j = 0; j < innerArrayLength; j++) {
-    console.log("[" + i + "," + j + "] = " + activities[i][j]);
-  }
-}
+/*
 
 /*
 
@@ -58,13 +41,22 @@ This will give you aligned columns, with varying height divisions. As an alterna
 
 
 */
+const Sheet = styled.div`
+  background: white;
+  width: 1000px;
+  height: 1000px;
+  display: inline-block;
+`;
 
 export default function Playground(props) {
   return (
     <>
       <h1>{props.title}</h1>
-      <p>Here is where the magic will happen.</p>
-      <p>Soon enough.</p>
+      <Sheet style={{}}>
+        <Figure w={rect1.width} h={rect1.height} c="crimson" />
+        <Figure w={rect2.width} h={rect2.height} c="palevioletred" />
+        <Figure w={rect3.width} h={rect3.height} c="lime" />
+      </Sheet>
     </>
   );
 }