diff --git a/pages/contacts.js b/pages/contacts.js
new file mode 100644
index 0000000..971a7ea
--- /dev/null
+++ b/pages/contacts.js
@@ -0,0 +1,26 @@
+const Contacts = ({ contacts }) => {
+  console.log(contacts);
+  return <div>Contacts List</div>;
+};
+
+export async function getStaticProps() {
+  const contacts = [
+    { firstName: "Allen", lastName: "Lane", phone: "542-987-3456" },
+    { firstName: "Jane", lastName: "Smith", phone: "" },
+    { firstName: "Richard", lastName: "Walker", phone: "542-737-3246" },
+    { firstName: "Alejandro", lastName: "Lane", phone: "542-345-8721" },
+    { firstName: "Erin", lastName: "Larson", phone: "(542) 321-3456" },
+    { firstName: "Richard", lastName: "Julian", phone: "542-211-5678" },
+    { firstName: "Bill", lastName: "Allen", phone: "542-654-2154" },
+  ];
+
+  // By returning { props: { contacts } }, the Contacts component
+  // will receive `contacts` as a prop at build time
+  return {
+    props: {
+      contacts,
+    },
+  };
+}
+
+export default Contacts;
diff --git a/pages/outline.js b/pages/outline.js
new file mode 100644
index 0000000..3c89d88
--- /dev/null
+++ b/pages/outline.js
@@ -0,0 +1,30 @@
+const Outline = () => {
+  const handleBlockClick = () => {
+    console.log("Block Clicked!");
+  };
+
+  const handleCloseClick = () => {
+    console.log("Close Clicked!");
+  };
+
+  const handleSubmitClick = () => {
+    console.log("Submit Clicked!");
+  };
+
+  return (
+    <div
+      style={{ width: 300, height: 300, backgroundColor: "#FFDDDD" }}
+      onClick={handleBlockClick}
+    >
+      <h3>Block</h3>
+      <button style={{ margin: 40 }} onClick={handleCloseClick}>
+        Close
+      </button>
+      <button style={{ margin: 40 }} onClick={handleSubmitClick}>
+        Submit
+      </button>
+    </div>
+  );
+};
+
+export default Outline;
diff --git a/pages/toolbar.js b/pages/toolbar.js
new file mode 100644
index 0000000..213b021
--- /dev/null
+++ b/pages/toolbar.js
@@ -0,0 +1,18 @@
+const Toolbar = () => {
+  return (
+    <div>
+      <div style={{ width: 300, height: 300, backgroundColor: "#FFDDDD" }}>
+        <h3>Block</h3>
+        <button>top left</button>
+        <button>top right</button>
+        <button>bottom left</button>
+        <button>bottom right</button>
+      </div>
+      <div style={{ width: 200, height: 200, backgroundColor: "#DDFFDD" }}>
+        <h3>Toolbar</h3>
+      </div>
+    </div>
+  );
+};
+
+export default Toolbar;