diff --git a/src/components/Home.js b/src/components/Home.js
index be2bc87..58aefa2 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -12,7 +12,7 @@ class Home extends Component {
   state = {
     notesData: [
       {
-        id: 0,
+        id: uuid(),
         title: "",
         content: ""
       }
@@ -54,10 +54,18 @@ class Home extends Component {
       id: uuid(),
       title: "",
       content: ""
-    };    
+    };
 
     this.setState({ notesData: this.state.notesData.concat([newNoteData]) });
   };
+  swapNotes = (noteA, noteB) => {
+    let { notesData } = this.state;
+    var indexA = _.findIndex(notesData, { id: noteA.id });
+    var indexB = _.findIndex(notesData, { id: noteB.id });
+    notesData.splice(indexA, 1, noteB);
+    notesData.splice(indexB, 1, noteA);
+    this.setState({ notesData: notesData });
+  };
   render() {
     const styles = {
       floatingButton: {
@@ -79,6 +87,7 @@ class Home extends Component {
                   noteData={JSON.stringify(noteData)}
                   updateNote={this.updateNote}
                   remove={() => this.removeNote(noteData.id)}
+                  swapNotes={this.swapNotes}
                 />
               );
             })}
diff --git a/src/components/Notepad.js b/src/components/Notepad.js
index 5c5cb62..9b47994 100644
--- a/src/components/Notepad.js
+++ b/src/components/Notepad.js
@@ -26,7 +26,7 @@ class Notepad extends PureComponent {
 
   onDragStart = event => {
     event.dataTransfer.effectAllowed = "move";
-    event.currentTarget.classList.add("growCardMoving");   
+    event.currentTarget.classList.add("growCardMoving");
     event.dataTransfer.setData("text/plain", event.currentTarget.id);
   };
 
@@ -37,13 +37,13 @@ class Notepad extends PureComponent {
       let data = event.dataTransfer.getData("text/plain");
       let childNode = event.currentTarget.firstChild;
       let replaceNode = document.getElementById(data);
-      let parentReplaceNode = replaceNode.parentNode;
-      let parentChildNode = childNode.parentNode;
-      parentReplaceNode.replaceChild(childNode, replaceNode); 
       childNode.classList.remove("growCardMoving");
-      parentChildNode.appendChild(replaceNode);                   
       replaceNode.classList.remove("growCardMoving", "hideCard");
-    }    
+      this.props.swapNotes(
+        JSON.parse(replaceNode.getAttribute("noteData")),
+        JSON.parse(childNode.getAttribute("noteData"))
+      );
+    }
   }
 
   onDragEnd = event => {
@@ -65,35 +65,29 @@ class Notepad extends PureComponent {
   onDragOver = event => {
     event.preventDefault();
     console.log('over');
-    if (!event.currentTarget.firstChild.classList.contains('growCardMoving')) {  
+    if (!event.currentTarget.firstChild.classList.contains('growCardMoving')) {
       event.currentTarget.firstChild.classList.add('growCardMoving');
-      event.dataTransfer.dropEffect = "move";   
+      event.dataTransfer.dropEffect = "move";
     }
   }
 
   render() {
-    const styles = {
-      cardTitle: {
-        fontFamily: "Gloria Hallelujah, cursive",
-        width: "100%",
-        backgroundColor: "transparent",
-        border: "none"
-      }
-    };
     return (
-     <Col      
-      xs={12} md={3} className="notepad-wrap"
-      onDrop={this.onDrop}
-      onDragOver={this.onDragOver}    
-      onDragLeave={this.onDragLeave}
-      onDragEnd={this.onDragEnd}
-      id={`Col-${JSON.parse(this.props.noteData).id}`}
-     >
-        <Card    
-        id={`Card-${JSON.parse(this.props.noteData).id}`}     
-        className="sticky"
-        draggable="true"
-        onDragStart={this.onDragStart}
+      <Col
+        xs={12} md={3} className="notepad-wrap"
+        onDrop={this.onDrop}
+        onDragOver={this.onDragOver}
+        onDragLeave={this.onDragLeave}
+        onDragEnd={this.onDragEnd}
+        id={`Col-${JSON.parse(this.props.noteData).id}`}
+        noteData={this.props.noteData}
+      >
+        <Card
+          id={`Card-${JSON.parse(this.props.noteData).id}`}
+          className="sticky"
+          draggable="true"
+          onDragStart={this.onDragStart}
+          noteData={this.props.noteData}
         >
           <div>
             <input