diff --git a/components/core/CreateShape.js b/components/core/CreateShape.js
index 06528e9..3edee97 100644
--- a/components/core/CreateShape.js
+++ b/components/core/CreateShape.js
@@ -1,21 +1,26 @@
 import React, { useState } from "react";
+
+// Bootstrap
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import Modal from "react-bootstrap/Modal";
 import Button from "react-bootstrap/Button";
 
+// ShapeForm and ShapePreview Components
+import { ShapeForm, ShapePreview } from "..";
+
 // Toast
 import toast from "react-hot-toast";
 
 // harperDb fetch call
 import { harperFetch } from "../../utils/HarperFetch";
 
-import { ShapeForm, ShapePreview } from "..";
-
 const CreateShape = (props) => {
-    const [shapeInformation, setShapeInformation] = useState({
-        "name": "Tilted Square", 
+
+    // Store the default state as a variable so resetting form is easier
+    const initialState = {
+        "name": "", 
         "formula": "polygon(10% 10%, 90% 10%, 90% 90%, 10% 80%)",
         "vertices": 4,
         "private": false,
@@ -42,30 +47,38 @@ const CreateShape = (props) => {
                 "y": "80%", 
             }, 
         ]
+    }
+
+    // shapeInformation holds all information about the shape
+    const [shapeInformation, setShapeInformation] = useState({
+        ...initialState, 
     });
 
-    function handleChange(event, data, number) {
+    // Changes shapeInformation when something in ShapeForm or ShapePreview is altered
+    const handleChange = (event, data, number) => {
+        
+        // console.log(event, data);
+        
         const name = event.target.name || event.type;
         const value = event.target.type === "checkbox" ? event.target.checked : event.target.value;
 
-        // console.log(event, data);
-
+        // If Clip-Path formula value is changed, it makes sure that the parentheses stay there and also alters the verticeCoordinates value
         if (name === "name") {
             setShapeInformation({
             ...shapeInformation, 
             "name": value, 
             });
-        } else if (name === 'private') {
-            setShapeInformation({
-                ...shapeInformation, 
-                "private": !shapeInformation.private, 
-                
-            });
-        } else if (name === "formula") {
-            const edgeVerticeNumber = shapeInformation.clipPathType === "polygon" ? value.split(",").length: 0;
+            return;
+        }
+        
+        // If formula value is changed, alter formula value and verticeCoordinates value depending on clipPathType
+        if (name === "formula") {
 
+            const edgeVerticeNumber = shapeInformation.clipPathType === "polygon" && value !== "" ? value.split(",").length: 0;
+
+            // If user deletes all, set formula to the Clip-Path type with an empty set of parentheses
             if (value === "") {
-                handleFormulaChange(shapeInformation.clipPathType + "()", edgeVerticeNumber)
+                handleFormulaChange(shapeInformation.clipPathType + "()", edgeVerticeNumber);
             } else if (value.includes("polygon")) {
                 handleFormulaChange(value, edgeVerticeNumber, "polygon");
             } else if (value.includes("circle")) {
@@ -75,7 +88,50 @@ const CreateShape = (props) => {
             } else {
                 handleFormulaChange(value, edgeVerticeNumber);
             }
-        } else if (name === "mousemove") {
+            return;
+
+        }
+        
+        // If Clip-Path Type is changed, change the value of the clipPathType
+        if (name === "clipPathType") {
+
+            if (value === "polygon") {
+                setShapeInformation({
+                ...initialState, 
+                });
+            }
+
+            if (value === "circle") {
+                setShapeInformation({
+                ...shapeInformation, 
+                "type": "circle", 
+                "formula": "circle(50% at 50% 50%)",
+                });
+            }
+
+            if (value === "ellipse") {
+                setShapeInformation({
+                ...shapeInformation, 
+                "type": "ellipse", 
+                "formula": "ellipse(25% 40% at 50% 50%)",
+                });
+            }
+
+            setShapeInformation(prevState => {
+                return {
+                ...prevState, 
+                "clipPathType": value, 
+                "edges": value === "polygon" ? 4 : 0,
+                "vertices": value === "polygon" ? 4 : 0, 
+                "notes": "", 
+                }
+            });
+            return;
+        }
+        
+        // If DraggableVertice is moved, adjust verticeCoordinates and formula
+        if (name === "mousemove") {
+            
             const newVerticeCoordinates = addNewVerticeCoordinates(data.x, data.y, number);
             const newFormula = generateNewFormula(newVerticeCoordinates);
 
@@ -84,7 +140,12 @@ const CreateShape = (props) => {
                 "verticeCoordinates": newVerticeCoordinates, 
                 "formula": newFormula, 
             });
-        } else if (name === "click" && event.target.id === "shapeShadow") {
+            return;
+        }
+        
+        // If preview is clicked and the clipPathType is a polygon, add a verticeCoordinate value at its location and adjust formula
+        if ((event.target.id === "shapeShadow" || event.target.id === "clippedShape") && name === "click" && shapeInformation.clipPathType === "polygon") {
+
             const newVerticeCoordinates = addNewVerticeCoordinates(event.nativeEvent.offsetX, event.nativeEvent.offsetY, shapeInformation.verticeCoordinates.length);
             const newFormula = generateNewFormula(newVerticeCoordinates);
 
@@ -95,7 +156,11 @@ const CreateShape = (props) => {
                 "verticeCoordinates": newVerticeCoordinates, 
                 "formula": newFormula,
             });
-        } else if ((event.target.id.includes("deleteButton") || event.target.localName === "line") && number !== undefined) {
+            return;
+        }
+
+        // If delete button is pressed and passes a number that corresponds to the vertice, remove the corresponding verticeCoordinate and adjust formula
+        if (event.target.id.includes("deleteButton") && number !== undefined) {
 
             let newVerticeCoordinates = []; 
 
@@ -114,44 +179,20 @@ const CreateShape = (props) => {
                 "verticeCoordinates": newVerticeCoordinates, 
                 "formula": newFormula,
             }); 
-
-        } else if (name === "clipPathType") {
-            handleClipPathChange(value);
-        } else {
-            setShapeInformation({
-                ...shapeInformation, 
-                [name]: value,
-            });
+            return;
         }
-      }
-
-    function addNewVerticeCoordinates(x ,y, number) {
-        const xPercentage = Math.round((x / 280.0) * 100.0);
-        const yPercentage = Math.round((y / 280.0) * 100.0);
-
-        let newVerticeCoordinates = shapeInformation.verticeCoordinates;
-        newVerticeCoordinates[number] = {
-            "x": xPercentage + "%",
-            "y": yPercentage + "%"
-        }
-
-        return newVerticeCoordinates;
-    }
-
-    function generateNewFormula(newVerticeCoordinates) {
-        let newFormula = shapeInformation.clipPathType + "(";
-
-        for (let i = 0; i < newVerticeCoordinates.length; i++) {
-            let newX = newVerticeCoordinates[i].x; 
-            let newY = newVerticeCoordinates[i].y;
-
-            i === newVerticeCoordinates.length - 1 ? newFormula = newFormula + newX + " " + newY + ")" : newFormula = newFormula + newX + " " + newY + ", ";
-        }
-
-        return newFormula;
+        
+        // Handles all other ShapeForm and ShapePreview Changes
+        setShapeInformation({
+            ...shapeInformation, 
+            [name]: value,
+        });
     }
 
-    function handleFormulaChange(formula, edgeVerticeNumber, clipPathType) {
+    // Called when there is a change in the textbox for formula in the form
+    // Adjusts verticeCoordinates, vertices, and edges accordingly
+    // Ensures that the parentheses remain
+    const handleFormulaChange = (formula, edgeVerticeNumber, clipPathType) => {
         let newVerticeCoordinates = [];
 
         if (clipPathType === "polygon") {
@@ -176,44 +217,42 @@ const CreateShape = (props) => {
             "verticeCoordinates": newVerticeCoordinates, 
             }
         });
-        }
+    }
 
-        function handleClipPathChange(clipPathType) {
-        if (clipPathType === "polygon") {
-            setShapeInformation({
-            ...shapeInformation, 
-            "name": "Tilted Square",  
-            "formula": "polygon(10% 10%, 90% 10%, 90% 90%, 10% 80%)", 
-            });
+    // Returns an array that has a new verticeCoordinate
+    const addNewVerticeCoordinates = (x ,y, number) => {
+        const xPercentage = Math.round((x / 280.0) * 100.0);
+        const yPercentage = Math.round((y / 280.0) * 100.0);
+
+        let newVerticeCoordinates = shapeInformation.verticeCoordinates;
+        newVerticeCoordinates[number] = {
+            "x": xPercentage + "%",
+            "y": yPercentage + "%"
         }
 
-        if (clipPathType === "circle") {
-            setShapeInformation({
-            ...shapeInformation, 
-            "name": "Circle",  
-            "formula": "circle(50% at 50% 50%)",
-            });
+        return newVerticeCoordinates;
+    }
+
+    // Returns a generated formula string from a verticeCoordinate array
+    const generateNewFormula = (newVerticeCoordinates) => {
+
+        let newFormula = shapeInformation.clipPathType + "(";
+
+        if (newVerticeCoordinates.length === 0) {
+            return newFormula + ")";
         }
 
-        if (clipPathType === "ellipse") {
-            setShapeInformation({
-            ...shapeInformation, 
-            "name": "Ellipse", 
-            "formula": "ellipse(25% 40% at 50% 50%)",
-            });
+        for (let i = 0; i < newVerticeCoordinates.length; i++) {
+            let newX = newVerticeCoordinates[i].x; 
+            let newY = newVerticeCoordinates[i].y;
+
+            i === newVerticeCoordinates.length - 1 ? newFormula = newFormula + newX + " " + newY + ")" : newFormula = newFormula + newX + " " + newY + ", ";
         }
 
-        setShapeInformation(prevState => {
-            return {
-            ...prevState, 
-            "clipPathType": clipPathType, 
-            "edges": clipPathType === "polygon" ? 4 : 0,
-            "vertices": clipPathType === "polygon" ? 4 : 0, 
-            "notes": "", 
-            }
-        })
+        return newFormula;
     }
 
+    // Form Validation
     const [validated, setValidated] = useState(false);
 
     const handleSubmit = async(event) => {
@@ -255,29 +294,28 @@ const CreateShape = (props) => {
             } else {
                 console.log(`The user ${props.user.email} present in DB`);
             }
+
+            // Finally, close the modal and update the shape in UI
+            props.handleClose();
+            toast.success(`Shape ${shapeInformation.name} created successfully.`);
+            props.setShapeAction({
+                ...props.shapeAction, 
+                "action": "add",
+                "payload": {
+                    "shape_id": insertShape['inserted_hashes']
+                } 
+            });
+
+            setShapeInformation({
+                ...initialState, 
+            });
+
+            setValidated(false);
+
+        } else {
+            toast.error('OOPS!! We hit a bummer. Please try again.');
         }
-        props.handleClose();
-        toast.success(`Shape ${shapeInformation.name} created successfully.`);
-        props.setShapeAction({
-            ...props.shapeAction, 
-            "action": "add",
-            "payload": {
-                "backgroundColor": shapeInformation.backgroundColor,
-                "createdAt": null,
-                "createdBy": props.user.email,
-                "edges": shapeInformation.edges,
-                "email": null,
-                "email1": props.user.email,
-                "formula": shapeInformation.formula,
-                "likes": 0,
-                "name": shapeInformation.name,
-                "name1": props.user.displayName,
-                "notes": shapeInformation.notes,
-                "photoURL": props.user.photoURL,
-                "private": shapeInformation.private,
-                "type": shapeInformation.clipPathType
-            } 
-        });
+        
     }
 
     return(
@@ -286,7 +324,7 @@ const CreateShape = (props) => {
                 show={props.show}
                 centered
                 size="lg"
-                onHide={props.handleClose}
+                onHide={() => {setShapeInformation({ ...initialState }); props.handleClose(); }}
                 backdrop="static"
             >
                 <Modal.Header closeButton>
@@ -313,7 +351,7 @@ const CreateShape = (props) => {
                     </Container>
                 </Modal.Body>
                 <Modal.Footer>
-                    <Button onClick={() => props.handleClose()} variant="outline-info">
+                    <Button onClick={() => { setShapeInformation({ ...initialState }); props.handleClose(); }} variant="outline-info">
                         Close
                     </Button>
                     <Button variant="secondary" type="submit" form="createShapeForm" disabled={!shapeInformation.name}>
diff --git a/components/utils/DraggableVertice.js b/components/utils/DraggableVertice.js
index 4401323..36f8130 100644
--- a/components/utils/DraggableVertice.js
+++ b/components/utils/DraggableVertice.js
@@ -1,10 +1,15 @@
 import React, { useRef } from "react";
+
+// react-draggable npm
 import Draggable from "react-draggable";
+
+// Styled Component
 import styled from "styled-components";
+
+// Bootstrap
 import Overlay from "react-bootstrap/Overlay";
 import Tooltip from "react-bootstrap/Tooltip";
 
-
 const CircleVertice = styled.div`
   width: 20px;
   height: 20px;
@@ -16,17 +21,20 @@ const CircleVertice = styled.div`
 `;
 
 const DraggableVertice = (props) => {
+
+    // Calculates x and y coordinates based on verticeCoordinates percentages
     let x = parseFloat(props.x) * 280.0 / 100.0;
     let y = parseFloat(props.y) * 280.0 / 100.0; 
 
+    // Handles when to show the close button
     const show = props.focusNumber === props.number;
     const target = useRef(null);
 
-    function handleDrag(e, data) {
+    const handleDrag = (e, data) => {
         props.handleChange(e, data, props.number);
     }
 
-    function handleDelete(e) {
+    const handleDelete = (e) => {
         props.handleChange(e, null, props.number);
         props.setFocusNumber(-1);
     }
@@ -38,7 +46,8 @@ const DraggableVertice = (props) => {
                 handle=".handle" 
                 position={{x: x, y: y}} 
                 grid={[2.8, 2.8]} 
-                onDrag={(e, data) => {handleDrag(e, data); props.setFocusNumber(-1)}}>
+                onDrag={(e, data) => {handleDrag(e, data); props.setFocusNumber(-1)}}
+            >
                     <CircleVertice 
                         className="handle" 
                         onClick={() => {
@@ -48,12 +57,13 @@ const DraggableVertice = (props) => {
                                 props.setFocusNumber(-1);
                             }
                         }} 
-                        ref={target} />
+                        ref={target}
+                    />
             </Draggable>
 
             <Overlay target={target.current} show={show} placement="right">
                 <Tooltip>
-                    <p id={"deleteButton" + props.number} onMouseUp={handleDelete}>X</p>
+                    <span id={"deleteButton" + props.number} onMouseUp={handleDelete} style={{ cursor: "pointer" }}>X</span>
                 </Tooltip>
             </Overlay>
         </>
diff --git a/components/utils/ShapeForm.js b/components/utils/ShapeForm.js
index df3145c..af24aa3 100644
--- a/components/utils/ShapeForm.js
+++ b/components/utils/ShapeForm.js
@@ -1,6 +1,12 @@
 import React from "react";
+
+// Styled Component
 import styled from "styled-components";
+
+// Bootstrap
 import Form from "react-bootstrap/Form";
+import ToggleButton from "react-bootstrap/ToggleButton";
+import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup";
 
 const ColorPicker = styled.input`
     border-color: lightgray;
@@ -26,20 +32,29 @@ const ShapeForm = (props) => {
 
             <Form.Group>
                 <Form.Label>Type</Form.Label>
-                <Form.Control 
-                    as="select" 
-                    name="clipPathType" 
-                    value={props.shapeInformation.clipPathType} 
-                    onChange={props.handleChange}
-                >
-                    <option value="polygon">Polygon</option>
-                    <option value="circle">Circle</option>
-                    <option value="ellipse">Ellipse</option>
-                </Form.Control>
+                <div>
+                    <ToggleButtonGroup 
+                        type="radio" 
+                        name="clipPathType"
+                        value={props.shapeInformation.clipPathType}
+                        size="sm"
+                    >
+                        <ToggleButton value="polygon" variant="outline-dark" onChange={props.handleChange}>
+                            Polygon
+                        </ToggleButton>
+                        <ToggleButton value="circle" variant="outline-dark" onChange={props.handleChange}>
+                            Circle
+                        </ToggleButton>
+                        <ToggleButton value="ellipse" variant="outline-dark" onChange={props.handleChange}>
+                            Ellipse
+                        </ToggleButton>
+                    </ToggleButtonGroup>
+                </div>
             </Form.Group>
 
             <Form.Group>
-                <Form.Label>Color</Form.Label>
+                <Form.Label>Color picker</Form.Label>
+                <br />
                 <ColorPicker 
                     type="color" 
                     name="backgroundColor"
@@ -72,7 +87,7 @@ const ShapeForm = (props) => {
             <Form.Group>
                 <Form.Label>CSS clip-Path</Form.Label>
                 <Form.Control 
-                    type="text" 
+                    as="textarea" 
                     name="formula" 
                     value={props.shapeInformation.formula} 
                     onChange={props.handleChange} 
diff --git a/components/utils/ShapePreview.js b/components/utils/ShapePreview.js
index 7d55353..fb9073d 100644
--- a/components/utils/ShapePreview.js
+++ b/components/utils/ShapePreview.js
@@ -1,7 +1,12 @@
 import React, { useState, useEffect } from "react";
+
+// Styled Component
 import styled from "styled-components";
+
+// Bootstrap
 import Form from "react-bootstrap/Form";
 
+// Draggablevertice Component
 import { DraggableVertice } from "..";
 
 const Playground = styled.div`
@@ -35,26 +40,25 @@ const Component = styled.div`
     bottom: 10px;
 `;
 
-const ShapeDetails = styled.ul`
-  background-color: #ebebeb;
-  border-radius: 4px;
-  padding: 10px;
-  width: 100%;
-`;
-
-const ShapeDetailsItems = styled.li`
-  word-wrap: break-word;
-`;
-
 const ShapePreview = (props) => {
 
+    // Holds an array of DraggableVertices
     const [vertices, setVertices] = useState([]);
+
+    // Set to a number that determines which DraggableVertice has its tooltip showing
+    // This way, only one vertice can show its close button at a time
     const [focusNumber, setFocusNumber] = useState(-1);
 
+    // Creation of DraggableVertices depending on shapeInformation values
     useEffect(() => {
         const array = []; 
     
         for (let i = 0; i < props.shapeInformation.vertices; i++) {
+
+            if (props.shapeInformation.verticeCoordinates[i] === undefined) {
+                return;
+            }
+
           array.push(
             <DraggableVertice 
                 key={1000 + i}