diff --git a/public/candlestick.png b/public/candlestick.png
new file mode 100644
index 000000000..6b6c94c85
Binary files /dev/null and b/public/candlestick.png differ
diff --git a/public/heatmap.png b/public/heatmap.png
new file mode 100644
index 000000000..7568b747c
Binary files /dev/null and b/public/heatmap.png differ
diff --git a/public/pinmap.png b/public/pinmap.png
new file mode 100644
index 000000000..97da4d985
Binary files /dev/null and b/public/pinmap.png differ
diff --git a/src/App.js b/src/App.js
index 9ea19fa1f..fe8e2ffbb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,9 @@
 import React from 'react';
 import './App.css';
 import TreeMapVis from './components/TreeMapVis/TreeMapVis.js';
+import CandleStick from './components/CandleStick/CandleStick.js';
+import PinMap from './components/PinMap/PinMap.js';
+import HeatMap from './components/HeatMap/HeatMap.js';
 
  class App extends React.Component{
    constructor(props){
@@ -15,7 +18,9 @@ import TreeMapVis from './components/TreeMapVis/TreeMapVis.js';
   render(){
     const prototypeMap = {
       TreeMapVis: <TreeMapVis/>,
-      // PinMap: <PinMap/>
+      CandleStick: <CandleStick/>,
+      PinMap: <PinMap/>,
+      HeatMap:<HeatMap/>
     }
 
     return (
diff --git a/src/components/CandleStick/CandleStick.js b/src/components/CandleStick/CandleStick.js
new file mode 100644
index 000000000..411a3f9a4
--- /dev/null
+++ b/src/components/CandleStick/CandleStick.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const CandleStick = () => {
+  return (
+    <div>
+      <img src={process.env.PUBLIC_URL + '/candlestick.png'} alt="candlestick"/>
+    </div>
+  );
+}
+
+export default CandleStick;
diff --git a/src/components/HeatMap/HeatMap.js b/src/components/HeatMap/HeatMap.js
new file mode 100644
index 000000000..88d6459e9
--- /dev/null
+++ b/src/components/HeatMap/HeatMap.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const HeatMap = () => {
+  return (
+    <div>
+      <img src={process.env.PUBLIC_URL + '/heatmap.png'} alt="heatmap"/>
+    </div>
+  );
+}
+
+export default HeatMap;
diff --git a/src/components/PinMap/PinMap.js b/src/components/PinMap/PinMap.js
new file mode 100644
index 000000000..3bc0bf109
--- /dev/null
+++ b/src/components/PinMap/PinMap.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const PinMap = () => {
+  return (
+    <div>
+      <img src={process.env.PUBLIC_URL + '/pinmap.png'} alt="PinMap"/>
+    </div>
+  );
+}
+
+export default PinMap;