diff --git a/src/Index.tsx b/src/Index.tsx
new file mode 100644
index 000000000..03283982e
--- /dev/null
+++ b/src/Index.tsx
@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import ReactDOM from "react-dom";
+import Arrow from "../images/Arrow.svg";
+import CosmosDB_20170829 from "../images/CosmosDB_20170829.svg";
+import Explorer from "../images/Explorer.svg";
+import Feedback from "../images/Feedback.svg";
+import Quickstart from "../images/Quickstart.svg";
+import "../less/index.less";
+
+const Index = (): JSX.Element => {
+ const [navigationSelection, setNavigationSelection] = useState("quickstart");
+
+ const quickstart_click = () => {
+ setNavigationSelection("quickstart");
+ };
+
+ const explorer_click = () => {
+ setNavigationSelection("explorer");
+ };
+
+ return (
+
+
+
+
+ {navigationSelection === "quickstart" && (
+
+ )}
+
+ {navigationSelection === "explorer" && (
+
+ )}
+
+ );
+};
+
+ReactDOM.render(, document.getElementById("root"));
diff --git a/src/index.html b/src/index.html
index e9672edd7..bfbaf3672 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,61 +1,14 @@
-
-
-
-
- Azure Cosmos DB Emulator
-
-
-
-
+
+
+
+
+ Azure Cosmos DB Emulator
+
+
+
-
-
-
-
-
-
-
+
diff --git a/src/indexO.html b/src/indexO.html
new file mode 100644
index 000000000..a7546a19f
--- /dev/null
+++ b/src/indexO.html
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+ Azure Cosmos DB Emulator
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/webpack.config.js b/webpack.config.js
index 12c980224..054b06984 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -198,7 +198,7 @@ module.exports = function (_env = {}, argv = {}) {
mode: mode,
entry: {
main: "./src/Main.tsx",
- index: "./src/Index.ts",
+ index: "./src/Index.tsx",
quickstart: "./src/quickstart.ts",
hostedExplorer: "./src/HostedExplorer.tsx",
testExplorer: "./test/testExplorer/TestExplorer.ts",
- 
-