diff --git a/package.json b/package.json
index f68dc1a..adafe64 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
   "license": "MIT",
   "scripts": {
     "build": "cp src/index.html dist/ && yarn esbuild src/index.tsx --outdir=dist --platform=browser --bundle --format=esm",
-    "serve": "cp src/index.html dist/ && yarn esbuild src/index.tsx --outdir=dist --platform=browser --bundle --format=esm --servedir=dist"
+    "serve": "cp src/index.html dist/ && yarn esbuild src/index.tsx --outdir=dist --platform=browser --bundle --format=esm --jsx-factory=createElement --jsx-fragment=Fragment --servedir=dist"
   },
   "devDependencies": {
     "esbuild": "^0.17.18"
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..f6312e2
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,13 @@
+import { React } from "./React";
+
+export function App({ numberOfTicks=5 }){
+  return (
+    <>
+    <div class="header">
+      <h1>Choose Probabilities</h1>
+      <h5>X-Axis = Ticks, Y-Axis = Underlying Price</h5>
+    </div>
+    <div class="chart"></div>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/React.tsx b/src/React.tsx
new file mode 100644
index 0000000..559103a
--- /dev/null
+++ b/src/React.tsx
@@ -0,0 +1,4 @@
+import { createElement } from "inferno-create-element";
+import { Fragment } from "inferno";
+
+export const React = {createElement, Fragment};
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index a8a6cc4..c0cc581 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,11 +1,6 @@
 import { render } from "inferno";
-import { createElement } from "inferno-create-element";
-const React = {createElement};
+import { App } from "./App";
+import { React } from "./React";
 
-function App(){
-  return (
-    <h1>Hello Binomial</h1>
-  );
-}
 
 render(<App />, document.getElementById("app"));
\ No newline at end of file