diff --git a/src/gravity-points-extern/index.html b/src/gravity-points-extern/index.html
index 28147b8..e03f8ab 100644
--- a/src/gravity-points-extern/index.html
+++ b/src/gravity-points-extern/index.html
@@ -8,7 +8,7 @@
         <script type="module" src="app.js"></script>
     </head>
     <body>
-        <canvas id="c"></canvas>
+        <canvas id="mainCanvas"></canvas>
         <div class="info">Click to add gravity point.</div>
     </body>
 </html>
diff --git a/src/gravity-points/app.js b/src/gravity-points/app.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/gravity-points/index.html b/src/gravity-points/index.html
new file mode 100644
index 0000000..28147b8
--- /dev/null
+++ b/src/gravity-points/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8"/>
+        <title>Fizzy Sparks</title>
+        <link href="style.css" rel="stylesheet" />
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
+        <script type="module" src="app.js"></script>
+    </head>
+    <body>
+        <canvas id="c"></canvas>
+        <div class="info">Click to add gravity point.</div>
+    </body>
+</html>
+
diff --git a/src/gravity-points/style.css b/src/gravity-points/style.css
new file mode 100644
index 0000000..aded4b6
--- /dev/null
+++ b/src/gravity-points/style.css
@@ -0,0 +1,23 @@
+body {
+    font-family: "Fira Sans", Helvetica, sans-serif;
+    padding: 0;
+    margin: 0;
+    background-color: #222;
+    overflow: hidden;
+}
+
+canvas {
+    position: absolute;
+    top: 10;
+    left: 10;
+}
+
+.info {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 5px 15px;
+    color: #eee;
+    font-size: 13px;
+    background-color: rgba(0, 0, 0, .5);
+}
