diff --git a/src/main/java/com/opinionowl/opinionowl/controllers/APIController.java b/src/main/java/com/opinionowl/opinionowl/controllers/APIController.java
index f2eb4f1..9fb7b1d 100644
--- a/src/main/java/com/opinionowl/opinionowl/controllers/APIController.java
+++ b/src/main/java/com/opinionowl/opinionowl/controllers/APIController.java
@@ -364,4 +364,126 @@ public int logoutUser(HttpServletResponse response, HttpServletRequest request)
         }
         return 200;
     }
+
+    /**
+     * <p>Handler for retrieving the survey questions based on its ID as a JSON</p>
+     * <strong>Example return json will full data of questions</strong>
+     * <pre>
+     *     returnJson = {
+     *         "1": {
+     *             "type": "Long Answer",
+     *             "prompt": "Question prompt",
+     *         },
+     *         "2": {
+     *             "type": "Radio Choice",
+     *             "prompt": "Question prompt",
+     *             "choices": ["choice 1", "choice 2"],
+     *         },
+     *         "3": {
+     *             "type": "Range",
+     *             "prompt": "Question prompt",
+     *             "ranges": [0, 22],
+     *         }
+     *     }
+     * </pre>
+     * @param id String, the survey ID
+     * @param request
+     * @return JSON of survey questions
+     * @throws JSONException
+     */
+    @GetMapping("/getSurveyQuestions/{id}")
+    public String getSurveyQuestions(@PathVariable("id") String id, HttpServletRequest request) throws JSONException  {
+        System.out.println("getSurveyResults() API");
+
+        Optional<Survey> s = surveyRepo.findById(Long.valueOf(id));
+        JSONObject resObject = new JSONObject();
+        if (s.isPresent()) {
+            Survey survey = s.get();
+            JSONObject questionObject = new JSONObject();
+            for (Question q : survey.getQuestions()) {
+                JSONObject indQObject = new JSONObject();
+                indQObject.put("type", q.getType().getType());
+                indQObject.put("prompt", q.getPrompt());
+                if (q.getType() == QuestionType.RANGE) {
+                    RangeQuestion rangeQuestion = (RangeQuestion) q;
+                    int[] ranges = {rangeQuestion.getLower(), rangeQuestion.getUpper()};
+                    indQObject.put("ranges", ranges);
+                } else if (q.getType() == QuestionType.RADIO_CHOICE) {
+                    indQObject.put("choices", ((RadioChoiceQuestion) q).getChoices());
+                }
+                questionObject.put(q.getId().toString(), indQObject);
+            }
+            resObject.put("questions", questionObject);
+        } else {
+            System.out.println("No survey found of ID " + id);
+            return "";
+        }
+        return resObject.toString();
+    }
+
+    /**
+     * <p>Handle the update of a survey based on its ID</p>
+     * @param id The survey ID
+     * @param request
+     * @return 200 if successful, otherwise 400
+     * @throws IOException
+     */
+    @PostMapping("/updateSurvey/{id}")
+    public int updateSurvey(@PathVariable("id") String id, HttpServletRequest request) throws IOException {
+        System.out.println("Updating survey API()");
+
+        String userid = CookieController.getUserIdFromCookie(request);
+        if (userid == null){
+            System.out.println("You must be logged in first");
+            return 400;
+        }
+
+        String jsonData = this.JSONBuilder(request);
+        ObjectMapper objectMapper = new ObjectMapper();
+        HashMap<String, Object> surveyData = objectMapper.readValue(jsonData, new TypeReference<HashMap<String, Object>>() {});
+        // Extract specific data from the parsed JSON
+        String title = (String) surveyData.get("title");
+        List<String> textQuestions = (List<String>) surveyData.get("textQuestions");
+        HashMap<String, List<String>> radioQuestions = (HashMap<String, List<String>>) surveyData.get("radioQuestions");
+        HashMap<String, List<Integer>> numericRanges = (HashMap<String, List<Integer>>) surveyData.get("numericRanges");
+
+        AppUser appUser = userRepository.findById(Long.valueOf(userid)).orElse(null);
+        Survey currSurvey = surveyRepo.findById((Long.valueOf(id))).orElse(null);
+        Survey newSurvey = new Survey(appUser, title);
+
+        if (appUser == null) {
+            System.out.println("Could not find the user!");
+            return 400;
+        }
+
+        if (currSurvey == null) {
+            System.out.println("Could not find survey");
+            return 400;
+        }
+
+        if (!Objects.equals(currSurvey.getUser().getId(), appUser.getId())) {
+            System.out.println("Not the user associated with the user");
+            return 400;
+        }
+
+        appUser.removeSurvey(currSurvey.getId());
+        surveyRepo.deleteById(currSurvey.getId());
+        // add all the question types to the survey
+        for (String questionTitle : textQuestions) {
+            newSurvey.addQuestion(new LongAnswerQuestion(newSurvey, questionTitle, 50));
+        }
+
+        for (String questionTitle : radioQuestions.keySet()) {
+            String[] radioQuestionsArr = new String[radioQuestions.get(questionTitle).size()];
+            newSurvey.addQuestion(new RadioChoiceQuestion(newSurvey, questionTitle, radioQuestions.get(questionTitle).toArray(radioQuestionsArr)));
+        }
+
+        for (String questionTitle : numericRanges.keySet()) {
+            List<Integer> ranges = numericRanges.get(questionTitle);
+            newSurvey.addQuestion(new RangeQuestion(newSurvey, questionTitle, ranges.get(0), ranges.get(1), 1));
+        }
+        appUser.addSurvey(newSurvey);
+        surveyRepo.save(newSurvey);
+        return 200;
+    }
 }
diff --git a/src/main/java/com/opinionowl/opinionowl/controllers/PageController.java b/src/main/java/com/opinionowl/opinionowl/controllers/PageController.java
index 5521fa3..80d412e 100644
--- a/src/main/java/com/opinionowl/opinionowl/controllers/PageController.java
+++ b/src/main/java/com/opinionowl/opinionowl/controllers/PageController.java
@@ -124,6 +124,28 @@ public String getAnswerSurveyPage(@RequestParam(value = "surveyId") Long surveyI
         return "answerSurvey";
     }
 
+    @GetMapping("/editSurvey")
+    public String editSurveyPage(@RequestParam(value = "surveyId") Long surveyId, Model model, HttpServletRequest request) {
+        String cookieUserId = CookieController.getUserIdFromCookie(request);
+        if (cookieUserId == null){
+            System.out.println("You must be logged in first");
+            return "redirect:/";
+        }
+        CookieController.setUsernameCookie(model, request);
+        Optional<Survey> surveyO = surveyRepo.findById(surveyId);
+        if (surveyO.isPresent()) {
+            // was able to obtain a survey from the database by id, and grab it from the Optional Object
+            Survey survey = surveyO.get();
+            if (!Long.valueOf(cookieUserId).equals(survey.getUser().getId())) {
+                System.out.println("You do not have access!");
+                return "redirect:/";
+            }
+            model.addAttribute("surveyTitle", survey.getTitle());
+            model.addAttribute("surveyId", survey.getId());
+        }
+        return "editSurvey";
+    }
+
     /**
      * <p>Route to direct the client to view the survey responses.</p>
      * <br />
diff --git a/src/main/resources/static/css/globals.css b/src/main/resources/static/css/globals.css
index b7c7701..32896ed 100644
--- a/src/main/resources/static/css/globals.css
+++ b/src/main/resources/static/css/globals.css
@@ -122,7 +122,8 @@ form input {
     transition: box-shadow 0.2s ease-in-out;
 }
 
-.btn:disabled {
+.btn:disabled,
+.btn.pointer-none {
     opacity: 0.7;
     pointer-events: none;
 }
@@ -482,7 +483,11 @@ header .header-contents nav .btn {
     margin-bottom: 2px;
 }
 
-.manage-survey-page .button-container .view button {
+.manage-survey-page .button-container .btn {
+    text-align: center;
+}
+
+.manage-survey-page .button-container .view {
     width: 100%;
 }
 
@@ -492,7 +497,7 @@ header .header-contents nav .btn {
     margin-top: 0.5rem;
 }
 
-.manage-survey-page .button-container button {
+.manage-survey-page .button-container :is(.editable, .close-survey) {
     width: 100%;
     padding: 0.5rem;
 }
diff --git a/src/main/resources/static/scripts/createSurvey.js b/src/main/resources/static/scripts/createSurvey.js
index e301a62..a63f9fb 100644
--- a/src/main/resources/static/scripts/createSurvey.js
+++ b/src/main/resources/static/scripts/createSurvey.js
@@ -6,8 +6,9 @@ const survey = $("#survey");
 const addTextQuestion = $("#add-text");
 const addRadioChoice = $("#add-radio-choice");
 const addNumericRange = $("#add-numeric-range");
+const formButton = $(".create-edit-submit-btn");
 const submitButton = $("#create-survey");
-submitButton.attr("disabled", true);
+formButton.attr("disabled", true);
 const generateUniqueID = () => {
     counter++;
     return `unique-${counter}-${Math.floor(Math.random() * 1000)}`;
@@ -16,15 +17,15 @@ const generateUniqueID = () => {
 /**
  *
  * @param {string} radioQuestionContainer
- * @param {string} uniqueName
+ * @param {string} prompt
  */
-const addMoreRadioOptions = (radioQuestionContainer, uniqueName) => {
+const addMoreRadioOptions = (radioQuestionContainer, prompt= "Sample") => {
     const uniqueId = generateUniqueID();
     const divId = generateUniqueID();
     $(radioQuestionContainer).append(`
                 <div id=${divId} class="radio-container flex">
                     <input id=${uniqueId} type="radio">
-                    <label for=${uniqueId} contenteditable="true">sample</label>
+                    <label for=${uniqueId} contenteditable="true">${prompt}</label>
                     <button class="btn" onclick="removingRadioChoice('${radioQuestionContainer}', '#${divId}')">-</button>
                 </div>
         `);
@@ -60,18 +61,17 @@ const removeTableRow = (tableRowId) => {
 
 const incrementNumOfQuestions = () => {
     numOfQuestions++;
-    submitButton.removeAttr('disabled');
+    formButton.removeAttr('disabled');
 };
 
 const decrementNumOfQuestion = () => {
     numOfQuestions--;
     if (numOfQuestions === 0){
-        submitButton.attr("disabled", true);
+        formButton.attr("disabled", true);
     }
 };
 
-addTextQuestion.click((e) => {
-    e.preventDefault();
+const addTextQuestionRow = (prompt = "Question Title") => {
     const rowId = generateUniqueID();
     const question = `
           <tr id=${rowId} class="text-questions">
@@ -79,20 +79,23 @@ addTextQuestion.click((e) => {
                  <button class="btn" type="button" onclick="removeTableRow('#${rowId}')">-</button>
               </td>
               <td>
-                  <label contenteditable="true">Question title</label>
+                  <label contenteditable="true">${prompt}</label>
                   <input type="text" />
               </td>
           </tr>
         `;
     survey.append(question);
     incrementNumOfQuestions();
-});
+}
 
-addRadioChoice.click((e) => {
+addTextQuestion.click((e) => {
     e.preventDefault();
+    addTextQuestionRow();
+});
+
+const addRadioChoicesRow = (prompt= "Question title", choices= ["Sample"]) => {
     const rowId = generateUniqueID();
     const radioQuestionContainer = generateUniqueID();
-    const uniqueName = generateUniqueID();
 
     const question = `
           <tr id='${rowId}' class="radio-questions">
@@ -101,19 +104,25 @@ addRadioChoice.click((e) => {
             </td>
             <td>
               <div id=${radioQuestionContainer}>
-                <label contenteditable="true" class="title">Question title</label>
+                <label contenteditable="true" class="title">${prompt}</label>
               </div>
-              <button class="btn add-more-radio-choices" type="button" onclick="addMoreRadioOptions('#${radioQuestionContainer}','${uniqueName}')">+</button>
+              <button class="btn add-more-radio-choices" type="button" onclick="addMoreRadioOptions('#${radioQuestionContainer}')">+</button>
             </td>
           </tr>
         `;
     survey.append(question);
-    addMoreRadioOptions(`#${radioQuestionContainer}`, `#${uniqueName}`)
+    for (const choice of choices) {
+        addMoreRadioOptions(`#${radioQuestionContainer}`, choice);
+    }
     incrementNumOfQuestions();
-});
+}
 
-addNumericRange.click((e) => {
+addRadioChoice.click((e) => {
     e.preventDefault();
+    addRadioChoicesRow();
+});
+
+const addRangeQuestionRow = (prompt = "Question Title", ranges = [0, 10]) => {
     const rowId = generateUniqueID();
     const question = `
           <tr id='${rowId}' class="numeric-questions">
@@ -121,21 +130,25 @@ addNumericRange.click((e) => {
                  <button class="btn" type="button" onclick="removeTableRow('#${rowId}')">-</button>
               </td>
               <td>
-                <label contenteditable="true" class="title">Question title</label>
+                <label contenteditable="true" class="title">${prompt}</label>
                 <div class="flex range-option">
-                    <span contenteditable="true">0</span>
+                    <span contenteditable="true">${ranges[0]}</span>
                     <input type="range" min="0" max="11" />
-                    <span contenteditable="true">11</span>
+                    <span contenteditable="true">${ranges[1]}</span>
                 </div>
               </td>
           </tr>
         `;
     survey.append(question);
     incrementNumOfQuestions();
-});
+}
 
-submitButton.click((e) => {
+addNumericRange.click((e) => {
     e.preventDefault();
+    addRangeQuestionRow();
+});
+
+const parseSurveyFormData = () => {
     const dataDictionary = {};
     dataDictionary["radioQuestions"] = {};
     dataDictionary["numericRanges"] = {};
@@ -202,8 +215,13 @@ submitButton.click((e) => {
         return;
     }
 
-    console.log(dataDictionary);
+    return dataDictionary;
+}
 
+submitButton.click((e) => {
+    e.preventDefault();
+    const dataDictionary = parseSurveyFormData();
+    console.log(dataDictionary);
     // send post using ajax
     const dataJson = JSON.stringify(dataDictionary);
     $.ajax({
diff --git a/src/main/resources/static/scripts/editSurvey.js b/src/main/resources/static/scripts/editSurvey.js
new file mode 100644
index 0000000..efbc658
--- /dev/null
+++ b/src/main/resources/static/scripts/editSurvey.js
@@ -0,0 +1,78 @@
+const updateSurveyBtn = $("#update-survey");
+
+/**
+ * Add survey questions to the survey
+ * @param {object} questionsJson
+ */
+const addEditableQuestions = (questionsJson) => {
+    const jsonRes = JSON.parse(questionsJson);
+    const questions = jsonRes['questions'];
+    Object.values(questions).map((question) => {
+        const type = question['type'];
+        const prompt = question['prompt'];
+        if (type === "Long Answer") {
+            addTextQuestionRow(prompt);
+        } else if (type === "Radio Choice") {
+            // Handle Radio Choice
+            addRadioChoicesRow(prompt, question['choices']);
+        } else if (type === "Range") {
+            // Handle Range
+            addRangeQuestionRow(prompt, type['ranges']);
+        }
+    });
+}
+
+/**
+ * Handle the survey update button functionality
+ */
+updateSurveyBtn.click((e) => {
+    e.preventDefault();
+    const surveyId = $("#surveyId").text();
+    const dataDictionary = parseSurveyFormData();
+    console.log(dataDictionary);
+    // send post using ajax
+    const dataJson = JSON.stringify(dataDictionary);
+    $.ajax({
+        type: $("#survey-container").attr("method"),
+        url: '/api/v1/updateSurvey/' + surveyId,
+        data: dataJson,
+        contentType: 'application/json',
+        success: function(res) {
+            // success handling
+            if (res === 200) {
+                console.log('Survey updated successfully');
+                window.location.href = "/";
+            } else {
+                alert('You cannot update this survey at this timme.');
+            }
+        },
+        error: function(xhr, status, error) {
+            // error handling
+            console.error('Error creating survey:', error);
+        }
+    });
+});
+
+/**
+ * On document ready, collect the data for the survey
+ */
+$(document).ready(function (){
+    let surveyId = $("#surveyId").text();
+    $.ajax({
+        type: 'GET',
+        url: '/api/v1/getSurveyQuestions/' + surveyId,
+        success: function(res) {
+            // success handling
+            if (res !== ""){
+                addEditableQuestions(res);
+            } else {
+                alert('You cannot complete this request');
+            }
+        },
+        error: function(xhr, status, error) {
+            // error handling
+            console.error('Error creating survey:', error);
+        }
+    });
+});
+
diff --git a/src/main/resources/templates/createSurvey.html b/src/main/resources/templates/createSurvey.html
index 1c0dcfa..399af0b 100644
--- a/src/main/resources/templates/createSurvey.html
+++ b/src/main/resources/templates/createSurvey.html
@@ -22,7 +22,7 @@ <h2 contenteditable="true" class="form-title">Form Title</h2>
           <table id="survey">
 
           </table>
-          <button type="submit" id="create-survey" class="btn">Create Survey</button>
+          <button type="submit" id="create-survey" class="btn create-edit-submit-btn">Create Survey</button>
         </form>
       </div>
     </div>
diff --git a/src/main/resources/templates/editSurvey.html b/src/main/resources/templates/editSurvey.html
new file mode 100644
index 0000000..a0e88c1
--- /dev/null
+++ b/src/main/resources/templates/editSurvey.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+  <title>OpinionOwl | Edit Survey</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <link rel="stylesheet" href="/css/globals.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+</head>
+  <body>
+    <div th:replace="~{fragments/header :: header}"></div>
+    <div class="container create-survey-container">
+      <p><strong>Note:</strong>Editing the survey will remove the existing responses from the previous survey!</p>
+      <h1>Editing Survey#<span th:text="${surveyId}" id="surveyId"></span></h1>
+      <div class="form-builder-options">
+        <button id="add-text" class="btn">Add Text Question</button>
+        <button id="add-radio-choice" class="btn">Add Multiple Choice Question</button>
+        <button id="add-numeric-range" class="btn">Add Numeric Range Select Question</button>
+      </div>
+
+      <div class="form-container">
+        <form class="survey-form" th:action="@{/api/v1/createSurvey}" method="post" id="survey-container">
+          <h2 contenteditable="true" class="form-title" th:text="${surveyTitle}"></h2>
+          <table id="survey">
+          </table>
+          <button type="submit" id="update-survey" class="btn create-edit-submit-btn">Update Survey</button>
+        </form>
+      </div>
+    </div>
+    <div th:replace="~{fragments/footer :: footer}"></div>
+    <script src="/scripts/createSurvey.js" type="application/javascript"></script>
+    <script src="/scripts/editSurvey.js" type="application/javascript"></script>
+  </body>
+</html>
diff --git a/src/main/resources/templates/manageSurvey.html b/src/main/resources/templates/manageSurvey.html
index 56f06d1..bd353af 100644
--- a/src/main/resources/templates/manageSurvey.html
+++ b/src/main/resources/templates/manageSurvey.html
@@ -15,10 +15,10 @@ <h1>Manage Surveys</h1>
                     <p class="title">Survey #<span th:text="${survey.getId()}"></span>: <span th:text="${survey.getTitle()}"></span></p>
                     <p class="num-questions">Number of Questions: <span th:text="${survey.getQuestions().size()}"></span></p>
                     <div class="button-container">
-                        <a th:href="@{/viewResponse(surveyId=${survey.getId()})}" class="view"><button type="button" th:disabled="${!survey.isClosed()}" class="btn">View Results</button></a>
+                        <a th:href="@{/viewResponse(surveyId=${survey.getId()})}" th:class="'view btn ' + ${!survey.isClosed() ? 'pointer-none' : ''}">View Results</a>
                         <div class="flex">
-                            <button class="btn editable" type="submit" disabled>Edit Survey</button>
-                            <button class="btn close" type="button" th:disabled="${survey.isClosed()}" th:onclick="'closeSurvey(' + ${survey.getId()} + ')'" th:text="${'Close Survey'}">Close Survey</button>
+                            <a th:href="@{/editSurvey(surveyId=${survey.getId()})}" th:class="'editable btn ' + ${survey.isClosed() ? 'pointer-none' : ''} ">Edit Survey</a>
+                            <button class="btn close-survey" type="button" th:disabled="${survey.isClosed()}" th:onclick="'closeSurvey(' + ${survey.getId()} + ')'" th:text="${'Close Survey'}">Close Survey</button>
                         </div>
                     </div>
                 </div>