diff --git a/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx b/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx
index 95dbca3..6f3cd29 100644
--- a/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx
+++ b/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx
@@ -43,7 +43,7 @@ class OpenSeaMap extends Component {
     icon = createIcon(entity.Type,entity.Side)
     return (
       <Marker name={entity.Name} key={index} icon={icon} position={entity.Position} data={entity.id}
-      
+      draggable={true}
       eventHandlers={{
         click: (e) => {
           // console.log(e.target.options.data);  // will print 'FooBar' in console
diff --git a/webapp/src/components/OpenSeaMap/OpenSeaMap.scss b/webapp/src/components/OpenSeaMap/OpenSeaMap.scss
index 094f3e2..f66ad82 100644
--- a/webapp/src/components/OpenSeaMap/OpenSeaMap.scss
+++ b/webapp/src/components/OpenSeaMap/OpenSeaMap.scss
@@ -11,7 +11,7 @@
   // display: flex;
   padding-top: 10px;
   // height: 750px;
-  width: 78.5%;
+  width: 75.5%;
   // padding-left: 20%;
   display: inline-flex;
   // height: 80%;
diff --git a/webapp/src/components/control/EntityControl.jsx b/webapp/src/components/control/EntityControl.jsx
index bf8d3b6..fcda08e 100644
--- a/webapp/src/components/control/EntityControl.jsx
+++ b/webapp/src/components/control/EntityControl.jsx
@@ -16,26 +16,32 @@ function EntityControl(props)
     const [CourseInControl, setCourseInControl] = useState(false);
     const [Speed, setSpeed] = useState();
     
-    const [formData, setFormData] = useState({name: "",course: "",speed: ""});
+    const [formData, setFormData] = useState({name: "",course: 0,speed: 0,position: [0,0]});
    
     
       
     useEffect(() => {    // Update the document title using the browser API    document.title = `You clicked ${count} times`;  
 
-
+        console.log(props.Entity);
         setEntity(props.Entity);
         if(CourseInControl === false)
         {
-            console.log("los")
             // setSpeed(props.Entity.Speed);
-            setFormData({course:props.Entity.Course,speed:props.Entity.Speed})
+            
+            if(Array.isArray(props.Entity.Position) === true)
+            {
+                setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position})
+            }else{
+                setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:['','']})
+
+            }
             // setFormData({speed:props.Entity.Speed})
 
         }
-        
+
       
         
-    },[props.Entity]);
+    },[props.Entity,props]);
 
 
 
@@ -71,6 +77,9 @@ const handleClick = (e) => {
         const emptyForm= (e) =>
         {
 
+            setFormData({name:'',course:'',speed:'',position:['','']})
+            setEntity('')
+
         }
 
         // const handleChange = (event) => {
@@ -81,31 +90,43 @@ const handleClick = (e) => {
         const handleSubmit = (e) => {
             e.preventDefault();
             console.log(e.target.data);
-            
-            alert(`Course: ${formData.course}`
-            );
+            console.log(formData)
+            // alert(`Course: ${formData.course}`);
                 }
     // console.log(Entity)
     // console.log(EntityOnFocus)
     return (
+
     <div>
     <div><button onClick={ emptyForm}> New</button>    </div>
 
     <form onSubmit={handleSubmit}>
         <div className="ControlsComponent">
-            <div>{Entity.id}</div>
-                <div>
-                    <div className="ControlHeader">Name</div>
-                    <div className="ControlValues">{Entity.Name}</div>
-                </div>
-                <div>
-                    <div className="ControlHeader">Course</div>
-                    <div className="ControlValues" > <input className="EntityinputField" name="Course" readOnly={false} type="text" maxLength={3}  onClick={handleClick} onChange={handleCourseInput}  value={formData.course}   /></div>
+                <div class="parent">
+                    <div class="div1">
+                        <div class="NameInput">
+                            <input className="EntityinputField NameInput" name="Name" readOnly={false} type="text" maxLength={3}  onClick={handleClick} onChange={handleCourseInput}  value={formData.name}   />
+                        </div>
+                    </div>
+                    <div class="div2"> 
+                        <div className="ControlHeader">Course:</div>
+                        <div className="ControlValues" > <input className="EntityinputField" name="Course" readOnly={false} type="text" maxLength={3}  onClick={handleClick} onChange={handleCourseInput}  value={formData.course}   /></div>
+                    </div>
+                    <div class="div3"> 
+                        <div className="ControlHeader">Speed:</div>
+                        <div id="Speed" className="ControlValues"><input className="EntityinputField" name="Speed" readOnly={true} type="text"  onClick={handleClick} onChange={handleSpeedInput}    value={formData.speed} /></div>
+                    </div>
+                    <div class="div5"> 
+                        <div  className="flex">
+                        <div className="ControlHeader">Lat:</div><input className="ControlInput" name="Lat" readOnly={true} type="text"  onClick={handleClick}     value={formData.position[0]} />
+                        </div>
+                    </div>
+                    <div class="div6">
+                        <div  className="flex">
 
-                </div>
-                <div>
-                    <div className="ControlHeader">Speed</div>
-                    <div id="Speed" className="ControlValues"><input className="EntityinputField" name="Speed" readOnly={true} type="text"  onClick={handleClick} onChange={handleSpeedInput}    value={formData.speed} /></div>
+                        <div className="ControlHeader">Lon:</div><input className="ControlInput" name="Lon" readOnly={true} type="text"  onClick={handleClick}     value={formData.position[1]}/>
+                            </div>
+                        </div>
 
                 </div>
         <div> <button type='submit'>Save</button> <button>Delete</button></div>
diff --git a/webapp/src/components/control/Tracklist/tracklist.scss b/webapp/src/components/control/Tracklist/tracklist.scss
index 73395cf..fca48d5 100644
--- a/webapp/src/components/control/Tracklist/tracklist.scss
+++ b/webapp/src/components/control/Tracklist/tracklist.scss
@@ -1,8 +1,8 @@
 .tracklist
 {
  display: flex;
- max-height: 500px;
- height: 500px;
+ max-height: 40%;
+ height: 300px;
  display: block;
 }
 
diff --git a/webapp/src/components/control/controls.css b/webapp/src/components/control/controls.css
index a7e0e8d..3aa9cac 100644
--- a/webapp/src/components/control/controls.css
+++ b/webapp/src/components/control/controls.css
@@ -1,6 +1,6 @@
 .controls{
     /* display: flex; */
-    width: 20%;
+    width: 24%;
     float: left;
 }
 
@@ -8,10 +8,21 @@
 display: grid;
 /* grid-template-columns: auto auto auto; */
 }
+.ControlInput{
+    /* border: none; */
+    width: 30%;
+}
+.NameInput{
+    margin: 0 auto;
+}
 .EntityinputField{
-    border: none;
-    width: 50%;
-    display: block;
+    /* border: none; */
+    width: 30%;
+    display: flex;
+}
+.flex{
+    display: flex  !important;
+
 }
 
 .ControlHeader{
@@ -21,4 +32,20 @@ width: 30%;
 
 .ControlValues{
 float: left;
-}
\ No newline at end of file
+display: contents;
+}
+
+.parent {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3 2em);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    }
+    
+    .div1 { grid-area: 1 / 1 / 2 / 3; }
+    .div2 { grid-area: 2 / 1 / 3 / 2; }
+    .div3 { grid-area: 2 / 2 / 3 / 3; }
+    .div4 { grid-area: 3 / 2 / 4 / 3; }
+    .div5 { grid-area: 3 / 1 / 4 / 2; }
+