diff --git a/src/App/DevForm.jsx b/src/App/DevForm.jsx
new file mode 100644
index 0000000..0db355d
--- /dev/null
+++ b/src/App/DevForm.jsx
@@ -0,0 +1,27 @@
+const devStyles = {
+    header: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100%",
+        width: "100%",
+        fontSize: "2rem",
+    },
+    body: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "300px",
+        width: "100%",
+    },
+  };
+
+return (
+    <div>
+        <Widget src="monkeypatcher.near/App.Header" trust={{ mode: "trusted-author" }} />
+        <h1 style={devStyles.header}>DEV FORM</h1>
+        <div style={devStyles.body}></div>
+        <div><Widget src="monkeypatcher.near/App.Footer" trust={{ mode: "trusted-author" }} /></div>
+    </div>
+);
\ No newline at end of file
diff --git a/src/App/DevResultPage.jsx b/src/App/DevResultPage.jsx
new file mode 100644
index 0000000..b082285
--- /dev/null
+++ b/src/App/DevResultPage.jsx
@@ -0,0 +1,28 @@
+const devResultStyles = {
+    header: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100%",
+        width: "100%",
+        fontSize: "2rem",
+    },
+    body: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "300px",
+        width: "100%",
+    },
+  };
+
+return (
+    <div>
+        <Widget src="monkeypatcher.near/App.Header" trust={{ mode: "trusted-author" }} />
+        <h1 style={devResultStyles.header}>DEV RESULT</h1>
+        <p>Result line graph from data for dev usage.</p>
+        <div><Widget src="monkeypatcher.near/App.Footer" trust={{ mode: "trusted-author" }} /></div>
+    </div>
+    
+)
diff --git a/src/App/Footer.jsx b/src/App/Footer.jsx
new file mode 100644
index 0000000..153d3f5
--- /dev/null
+++ b/src/App/Footer.jsx
@@ -0,0 +1,32 @@
+const footerStyles = {
+    row: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-around",
+        alignItems: "center",
+        padding: "10px",
+        backgroundColor: 'black',
+        color: 'white',
+    },
+    column: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-around",
+    },
+}
+
+return (
+    <div>
+        <div style={footerStyles.row}>
+        <div style={footerStyles.column}>
+            <a href="/monkeypatcher.near/scc">HOME</a>
+        </div>
+        <div style={footerStyles.column}>
+            <a href="/monkeypatcher.near/App.ProviderForm">PROVIDER FORM</a>
+        </div>
+        <div style={footerStyles.column}>
+            <a href="/monkeypatcher.near/App.DevForm" >DEVELOPER FORM</a>
+        </div>
+        </div>
+    </div>
+);
diff --git a/src/App/Header.jsx b/src/App/Header.jsx
new file mode 100644
index 0000000..2aae6f5
--- /dev/null
+++ b/src/App/Header.jsx
@@ -0,0 +1,32 @@
+const headerStyles = {
+    header: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100%",
+        width: "100%",
+        fontSize: "2rem",
+    },
+    row: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-around",
+        alignItems: "center",
+        padding: "10px",
+        backgroundColor: 'black',
+        color: 'white',
+    },
+    column: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-around",
+    },
+}
+
+return (
+    <div>
+        <div style={headerStyles.row}>
+        <h1 style={headerStyles.header}>BOS Services Calculator</h1>
+        </div>
+    </div>
+);
diff --git a/src/App/Landing.jsx b/src/App/Landing.jsx
deleted file mode 100644
index 81bfe50..0000000
--- a/src/App/Landing.jsx
+++ /dev/null
@@ -1 +0,0 @@
-return <p>Landing Page!</p>;
diff --git a/src/App/Main.jsx b/src/App/Main.jsx
deleted file mode 100644
index 411272f..0000000
--- a/src/App/Main.jsx
+++ /dev/null
@@ -1 +0,0 @@
-return <p>Main Page</p>;
diff --git a/src/App/ProviderForm.jsx b/src/App/ProviderForm.jsx
new file mode 100644
index 0000000..46f5951
--- /dev/null
+++ b/src/App/ProviderForm.jsx
@@ -0,0 +1,28 @@
+const providerStyles = {
+    header: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100%",
+        width: "100%",
+        fontSize: "2rem",
+    },
+    body: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "300px",
+        width: "100%",
+    },
+  };
+
+return (
+    <div>
+        <Widget src="monkeypatcher.near/App.Header" trust={{ mode: "trusted-author" }} />
+        <h1 style={providerStyles.header}>PROVIDER FORM</h1>
+        <div style={providerStyles.body}></div>
+        <div><Widget src="monkeypatcher.near/App.Footer" trust={{ mode: "trusted-author" }} /></div>
+    </div>
+);
+ß
\ No newline at end of file
diff --git a/src/App/ProviderResultPage.jsx b/src/App/ProviderResultPage.jsx
new file mode 100644
index 0000000..c4bf9b9
--- /dev/null
+++ b/src/App/ProviderResultPage.jsx
@@ -0,0 +1,28 @@
+const providerResultStyles = {
+  header: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "100%",
+      width: "100%",
+      fontSize: "2rem",
+  },
+  body: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "300px",
+      width: "100%",
+  },
+};
+
+
+return (
+  <div>
+    <Widget src="monkeypatcher.near/App.Header" trust={{ mode: "trusted-author" }} />
+    <h1 style={providerResultStyles.header}>PROVIDER RESULT</h1>
+    <p>Result line graph and info for provider form data.</p>
+    <div><Widget src="monkeypatcher.near/App.Footer" trust={{ mode: "trusted-author" }} /></div>
+  </div>
+);
\ No newline at end of file
diff --git a/src/HelloWorld.jsx b/src/HelloWorld.jsx
deleted file mode 100644
index b431360..0000000
--- a/src/HelloWorld.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-return (
-  <>
-    <p>Hello world</p>
-    <a href="/monkeypatcher.near/App.Landing" >Click here to navigate to landing page</a>
-    <a href="/monkeypatcher.near/App.Main" >Click here to navigate to main page</a>
-    <Widget src="monkeypatcher.near/RootContent" trust={{ mode: "trusted-author" }} />
-  </>
-);
diff --git a/src/RootContent.jsx b/src/RootContent.jsx
deleted file mode 100644
index 23d6431..0000000
--- a/src/RootContent.jsx
+++ /dev/null
@@ -1,3 +0,0 @@
-return (
-  <p>Something to display as root content</p>
-);
\ No newline at end of file
diff --git a/src/scc.jsx b/src/scc.jsx
new file mode 100644
index 0000000..e05b72c
--- /dev/null
+++ b/src/scc.jsx
@@ -0,0 +1,31 @@
+const sccStyles = {
+    row: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-around",
+        alignItems: "center",
+        padding: "10px",
+    },
+    column: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-around",
+    },
+};
+
+// <Widget src="monkeypatcher.near/App.DevForm" trust={{ mode: "trusted-author" }} />
+
+return (
+    <div>
+        <Widget src="monkeypatcher.near/App.Header" trust={{ mode: "trusted-author" }} />
+        <div style={sccStyles.row}></div>
+        <div style={sccStyles.row}>
+            <div style={sccStyles.column}>
+                <a href="/monkeypatcher.near/App.ProviderForm">I want to be a Provider of Services</a>
+            </div>
+            <div style={sccStyles.column}>
+                <a href="/monkeypatcher.near/App.DevForm" >I want to develop an app on the BOS</a>
+            </div>
+        </div>
+    </div>
+);
\ No newline at end of file