diff --git a/src/Components/PortfolioManager/PortfolioManager.css b/src/Components/PortfolioManager/PortfolioManager.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/Components/PortfolioManager/PortfolioManager.jsx b/src/Components/PortfolioManager/PortfolioManager.jsx
new file mode 100644
index 0000000..058112c
--- /dev/null
+++ b/src/Components/PortfolioManager/PortfolioManager.jsx
@@ -0,0 +1,38 @@
+/* eslint-disable react/prefer-stateless-function */
+import React, { Component } from 'react';
+import './PortfolioManager.css';
+
+class PortfolioManager extends Component {
+  render() {
+    const portfolioScripPrices = this.props.portfolioScripPrices;
+
+    return (
+      <div
+        className="portfolio-manager"
+        onDragOver={(ev) => { ev.preventDefault(); }}
+        onDrop={(ev) => {
+          const scripName = ev.dataTransfer.getData('text/plain');
+          this.props.addScripToPortfolio(scripName);
+        }}
+      >
+        <div className="drop-block" style={{ width: '100%', height: '500px', border: '1px solid black' }} />
+        Please drop here
+        <ul>
+          {
+            Object.keys(portfolioScripPrices).map((scripName) => {
+              return (
+                <li
+                  key={scripName}
+                >
+                  {scripName} | {portfolioScripPrices[scripName]}
+                </li>
+              );
+            })
+          }
+        </ul>
+      </div>
+    );
+  }
+}
+
+export { PortfolioManager };
diff --git a/src/Components/PortfolioManager/index.js b/src/Components/PortfolioManager/index.js
new file mode 100644
index 0000000..cfe215b
--- /dev/null
+++ b/src/Components/PortfolioManager/index.js
@@ -0,0 +1 @@
+export { PortfolioManager } from './PortfolioManager';