diff --git a/webapp/src/App.js b/webapp/src/App.jsx
similarity index 53%
rename from webapp/src/App.js
rename to webapp/src/App.jsx
index 7205821..44c20fe 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.jsx
@@ -14,12 +14,10 @@ class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      name: " ",
-      History: [],
-      Position: [
-            { id: 1, name: "Apple", position: [51.505, -0.10],Type: "Friend" },
-            { id: 2, name: "Oranges", position: [51.505, -0.11],Type: "Hostile"},
-            { id: 3, name: "Grapes", position: [51.505, -0.12],Type: "Friend"}
+      Entities: [
+            // { id: 1, name: "Apple", position: [51.505, -0.10],Type: "Friend" },
+            // { id: 2, name: "Oranges", position: [51.505, -0.11],Type: "Hostile"},
+            // { id: 3, name: "Grapes", position: [51.505, -0.12],Type: "Friend"}
           ],
     
         
@@ -32,15 +30,34 @@ class App extends Component {
 
       connect((msg) => {
           console.log("New Message")
-          console.log(msg)
-      
+          console.log(msg.data)
+          var jsonMSG;
+          try {
+            jsonMSG = JSON.parse(msg.data);
+          } catch (error) {
+            console.log(error);
+          }
+          if(jsonMSG["Type"] == "COP"){
+            var Entities =  Array.from(jsonMSG["Entities"])
+            if(Array.isArray(Entities))
+            {
+              this.setState({
+                Entities:Entities
+              });
+            }
+          }
+          // this.state.Entities = jsonMSG
+        	// var jsonmsg = JSON.parse(msg);
       this.setState(prevState => ({
-        chatHistory: [...this.state.History, msg]
+        // chatHistory: [...this.state.History, msg]
+        // chatHistory: [...this.state.History, msg]
          
       }))
   
-      console.log(this.state);
+      console.log(this.state.Entities);
     });
+    
+
   }
   // send() {
     //   console.log("hello");
@@ -63,7 +80,7 @@ class App extends Component {
         {name}
 
         </div>
-        <OpenSeaMap Positions= {this.state.Position} parentCallback = {this.handleCallback}/>
+        <OpenSeaMap Entities= {this.state.Entities} parentCallback = {this.handleCallback}/>
         
 
         <button onClick={this.send}>Hit</button>
diff --git a/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx b/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx
index 45b6255..f1f9958 100644
--- a/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx
+++ b/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx
@@ -2,7 +2,7 @@
 // import { useMapEvents } from 'react-leaflet/hooks'
 import React, { Component } from "react";
 import { MapContainer, TileLayer,Marker, Popup } from 'react-leaflet'
-import { friend,Hostile, iconShip } from "./icon";
+import { friend,Hostile, iconShip,createIcon } from "./icon";
 import "./OpenSeaMap.scss"
 
 
@@ -13,18 +13,19 @@ class OpenSeaMap extends Component {
   makeIcon(index, entity)
   {
     var icon;
-    switch (entity.Type)
-    {
-      case "Friend":
-        icon = friend;
-      break;
-      case "Hostile":
-        icon = Hostile;
-      break;
-      default:
+    // switch (entity.Side)
+    // {
+    //   case "Friend":
+    //     icon = friend;
+    //   break;
+    //   case "Hostile":
+    //     icon = Hostile;
+    //   break;
+    //   default:
         
-      break;
-    }
+    //   break;
+    // }
+    icon = createIcon(entity.Type,entity.Side)
     return (
       <Marker name={"test"} key={index} icon={icon} position={entity.position} >
       <Popup>
@@ -51,7 +52,7 @@ class OpenSeaMap extends Component {
         <TileLayer
           url="https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png" />    
           {/* {positions} */}
-          {this.props.Positions.map((pos, index) => (
+          {this.props.Entities.map((pos, index) => (
             this.makeIcon(index,pos)
           // <Marker name={"test"} key={index} icon={friend} position={pos.position} >
           //     <Popup>
diff --git a/webapp/src/components/OpenSeaMap/icon.jsx b/webapp/src/components/OpenSeaMap/icon.jsx
index 4d3cb0b..340db3e 100644
--- a/webapp/src/components/OpenSeaMap/icon.jsx
+++ b/webapp/src/components/OpenSeaMap/icon.jsx
@@ -8,26 +8,68 @@ const iconShip = new Icon({
   popupAnchor: [-25, -40],
 });
 
-const iconSize = {
-  "Team/Crew": 5,
-  "Squad": 10,
-  "Section": 15,
-  "Platoon/detachment": 20,
-  "Company/battery/troop": 25,
-  "Battalion/squadron": 30,
-  "Regiment/group": 35,
-  "Brigade": 40,
-  "Division": 45,
-  "Corps/MEF": 50,
-  "Army": 55,
-  "Army Group/front": 60,
-  "Region/Theater": 65,
-  "Command": 70
-};
+const HostileLetter = "H";
+const FriendLetter = "F";
+const NeutralLetter = "N";
+
+const AirLetter = "A";
+const SurfaceLetter = "S";
+const SubsurfaceLetter = "U";
+
+const Size = 25;
+
+function createIcon(Type , Side )
+{
+  var TypeLetter = "S";
+  var SideLetter = "N";
+switch (Side) {
+  case "Hostile":
+    SideLetter = HostileLetter;
+    break;
+    case "Friend":
+    SideLetter = FriendLetter;
+    break;
+    case "Neutral":
+    SideLetter = NeutralLetter;
+    break;
+
+  default:
+    SideLetter = "N";
+    break;
+}
+
+switch (Type) {
+  case "Air":
+      TypeLetter = AirLetter;
+    break;
+    case "Surface":
+      TypeLetter = SurfaceLetter;
+    break;
+    case "Subsurface":
+      TypeLetter = SubsurfaceLetter;
+    break;
+
+  default:
+    SideLetter = "N";
+    break;
+}
+
+var IconS = new ms.Symbol(
+  "S"+SideLetter+TypeLetter+"*"+"--------"
+)
+IconS = IconS.setOptions({ size: 25 });
+
+var Symbol = new Icon({
+  iconUrl: IconS.toDataURL(),
+  iconAnchor: [IconS.getAnchor().x, IconS.getAnchor().y],
+})
+
+return Symbol
+}
 
 var Friend = new ms.Symbol(
-  "SFP---------", {
-    uniqueDesignation: "Friend"
+  "SFS*--------", {
+    // uniqueDesignation: "Friend"
   })
 // Now that we have a symbol we can ask for the echelon and set the symbol size
 Friend = Friend.setOptions({ size: 25 });
@@ -39,7 +81,7 @@ const friend = new Icon({
 
 
 var hostile = new ms.Symbol(
-  "SHP---------", {
+  "SHU*---------", {
     uniqueDesignation: "Hostile"
   })
 // Now that we have a symbol we can ask for the echelon and set the symbol size
@@ -50,4 +92,4 @@ const Hostile = new Icon({
   iconAnchor: [hostile.getAnchor().x, hostile.getAnchor().y],
 });
 
-export { iconShip, friend,Hostile };
\ No newline at end of file
+export { iconShip, friend,Hostile,createIcon };
\ No newline at end of file
diff --git a/webapp/src/components/control/controls.jsx b/webapp/src/components/control/controls.jsx
index e2b7f9b..08e44ea 100644
--- a/webapp/src/components/control/controls.jsx
+++ b/webapp/src/components/control/controls.jsx
@@ -1,12 +1,31 @@
 import React from 'react';
 import './controls.css'
+import { sendMsg } from '../api';
 
 class Controls extends React.Component
 {
+  constructor(props) {
+    super(props);
+    this.ws = props.ws;
+
+    // This binding is necessary to make `this` work in the callback
+  }
+  getMessage()
+  {
+    var msg = 
+    {
+      Type: "Request",
+      Data: "COP"
+
+    }
+    sendMsg(JSON.stringify(msg));
+    console.log("test");
+
+  }
     render() {
         return (
           <div className="controls">
-            My Application!
+            <button onClick={this.getMessage}> click me!</button>
           </div>
         );
       }