diff --git a/package.json b/package.json
index 00a13e5..13c77a8 100644
--- a/package.json
+++ b/package.json
@@ -3,12 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@blueprintjs/core": "^1.19.0",
+    "@blueprintjs/table": "^1.16.0",
+    "@types/es6-shim": "^0.31.34",
     "@types/jest": "^19.2.4",
     "@types/node": "^7.0.29",
+    "@types/pure-render-decorator": "^0.2.27",
     "@types/react": "^15.0.27",
+    "@types/react-addons-css-transition-group": "^15.0.2",
     "@types/react-dom": "^15.5.0",
+    "@types/react-transition-group": "^1.1.0",
     "react": "^15.5.4",
-    "react-dom": "^15.5.4"
+    "react-addons-css-transition-group": "^15.5.2",
+    "react-dom": "^15.5.4",
+    "react-transition-group": "^1.1.3"
   },
   "devDependencies": {
     "react-scripts-ts": "2.2.0"
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 15adfdc..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
diff --git a/src/App.tsx b/src/App.tsx
index aafef80..c5743c3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,22 +1,35 @@
 import * as React from 'react';
-import './App.css';
+import { FocusStyleManager } from '@blueprintjs/core';
+// import { Table, Cell, Column } from '@blueprintjs/table';
 
-const logo = require('./logo.svg');
+FocusStyleManager.onlyShowFocusOnTabs();
+
+// const logo = require('./logo.svg');
 
 class App extends React.Component<{}, null> {
   render() {
     return (
-      <div className="App">
-        <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h2>Welcome to React</h2>
+      <nav className="pt-navbar pt-dark-app-background-color">
+        <div className="pt-navbar-group pt-align-left">
+          <span className="pt-icon-large pt-icon-edit pt-intent-success"/>
+          <div className="pt-navbar-heading">Lex Editor</div>
         </div>
-        <p className="App-intro">
-          To get started, edit <code>src/App.tsx</code> and save to reload.
-        </p>
-      </div>
+      </nav>
     );
   }
 }
 
+// class LexEditor extends React.Component<{}, null> {
+//   render() {
+//     const renderCell = (rowIndex: number) => {
+//         return <Cell>{`$${(rowIndex * 10).toFixed(2)}`}</Cell>;
+//     };
+//     return (
+//         <Table numRows={10}>
+//             <Column name="Dollars" renderCell={renderCell}/>
+//         </Table>
+//     );
+//   }
+// }
+
 export default App;
diff --git a/src/index.css b/src/index.css
index b4cc725..33fbe90 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,3 +3,6 @@ body {
   padding: 0;
   font-family: sans-serif;
 }
+
+@import "~normalize.css/normalize.css";
+@import "~@blueprintjs/core/dist/blueprint.css";