diff --git a/src/app/dashboard/applications.view.tsx b/src/app/dashboard/applications.view.tsx
index 6fd8e4b..b92f58d 100644
--- a/src/app/dashboard/applications.view.tsx
+++ b/src/app/dashboard/applications.view.tsx
@@ -2,51 +2,10 @@ import { Answer, QuestionAnswer } from "../questions/interfaces";
 import { Application, BEState } from "../../utils/state";
 import { List, ListItem, Metric, Title } from "@tremor/react";
 import React, { useEffect, useLayoutEffect } from "react";
-import { RenderQuestion, UseQuestions, useQuestions } from "../questions/list";
+import { UseQuestions, useQuestions } from "../questions/list";
 import { isEmpty, uniqBy } from "lodash";
 
-interface RenderEditQuestionProps extends UseQuestions {
-  question: QuestionAnswer;
-}
-
-export const RenderEditQuestion = (props: RenderEditQuestionProps) => {
-  const {
-    questions: savedQuestions,
-    handleChangeAnswer,
-    handleSaveQuestion,
-    setSelectedQuestion,
-    selectedQuestion,
-  } = useQuestions();
-
-  const question = selectedQuestion;
-
-  useEffect(() => {
-    // console.log("savedQuestions.length", savedQuestions.length);
-    const selectedSavedQuestion = savedQuestions.find(
-      (q) => q?.question?.question === props?.question?.question?.question
-    );
-
-    if (!question && selectedSavedQuestion) {
-      // console.log("selectedSavedQuestion", selectedSavedQuestion);
-      setSelectedQuestion(selectedSavedQuestion);
-    }
-  }, [props?.question, savedQuestions]);
-
-  if (!question || !question?.question) return null;
-
-  return (
-    <div className="flex mt-3 flex-col">
-      <div style={{ marginBottom: "20px" }}>
-        <Title>{question.question.question}</Title>
-      </div>
-
-      <RenderQuestion
-        question={question}
-        handleChangeAnswer={handleChangeAnswer}
-      />
-    </div>
-  );
-};
+import { RenderEditQuestion } from "../questions/question";
 
 interface ApplicationsViewProps {
   skipped?: boolean;
diff --git a/src/app/dashboard/questions.error.tsx b/src/app/dashboard/questions.error.tsx
index bcdd911..20f5d13 100644
--- a/src/app/dashboard/questions.error.tsx
+++ b/src/app/dashboard/questions.error.tsx
@@ -1,7 +1,8 @@
 import { List, ListItem, Metric, Title } from "@tremor/react";
-import { RenderQuestion, UseQuestions } from "../questions/list";
 
 import { QuestionAnswer } from "../questions/interfaces";
+import { RenderQuestion } from "../questions/question";
+import { UseQuestions } from "../questions/list";
 import { isEmpty } from "lodash";
 
 export const QuestionsError = (props: UseQuestions) => {
diff --git a/src/app/questions/list.tsx b/src/app/questions/list.tsx
index 681d301..8750a1e 100644
--- a/src/app/questions/list.tsx
+++ b/src/app/questions/list.tsx
@@ -17,195 +17,13 @@ import {
   Textarea,
   Title,
 } from "@tremor/react";
+import { RenderEditQuestion, RenderQuestion } from "./question";
 import { isEmpty, sortBy, uniq, uniqBy } from "lodash";
 
 import { MinusCircleIcon } from "@heroicons/react/20/solid";
 import React from "react";
 import _get from "lodash/get";
 
-interface ICheckbox {
-  title: string;
-  checked: boolean;
-  id: string;
-  handleClick: () => void;
-}
-
-const RenderCheckbox = ({
-  title,
-  checked = false,
-  id,
-  handleClick,
-}: ICheckbox) => {
-  return (
-    <div className="inline-flex items-center">
-      <label
-        className="relative flex items-center p-3 rounded-full cursor-pointer"
-        htmlFor={id}
-      >
-        <input
-          checked={checked}
-          onChange={handleClick}
-          type="checkbox"
-          className="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-gray-900 checked:bg-gray-900 checked:before:bg-gray-900 hover:before:opacity-10"
-          id={id}
-        />
-        <span className="absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="h-3.5 w-3.5"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            stroke="currentColor"
-            strokeWidth={1}
-          >
-            <path
-              fillRule="evenodd"
-              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-              clipRule="evenodd"
-            />
-          </svg>
-        </span>
-      </label>
-      <label
-        className="mt-px font-light text-gray-700 cursor-pointer select-none w-full text-xl"
-        htmlFor={id}
-      >
-        {title}
-      </label>
-    </div>
-  );
-};
-
-export interface IRenderQuestion {
-  autosave?: boolean;
-  question: QuestionAnswer;
-  handleChangeAnswer: (answer: Answer) => void;
-}
-export const RenderQuestion = ({
-  autosave = false,
-  question,
-  handleChangeAnswer,
-}: IRenderQuestion) => {
-  const questionInputType = _get(question, "question.inputType", "text");
-  const questionInputTypeValue = _get(
-    question,
-    "question.inputTypeValue",
-    "text"
-  );
-  const questionAnswerText = _get(question, "chainRes.text", "");
-  const questionAnswerError = _get(question, "chainRes.error", false);
-
-  switch (questionInputType) {
-    case "fieldset":
-      const questionAnswers = question.question.answers || [];
-      return (
-        <div>
-          <div>
-            {questionAnswerError && (
-              <div className="text-red-500">Please select an answer</div>
-            )}
-          </div>
-          <List style={{ display: "flex", flexDirection: "column" }}>
-            {questionAnswers.map((answer) => {
-              const isChecked = _get(question, "chainRes.text", "").includes(
-                answer.inputId
-              );
-              return (
-                <RenderCheckbox
-                  checked={isChecked}
-                  handleClick={() => handleChangeAnswer(answer)}
-                  id={answer.inputId}
-                  key={answer.inputId}
-                  title={answer.answerText}
-                />
-              );
-            })}
-          </List>
-        </div>
-      );
-
-    case "select":
-      const questionInputOptions: InputOption[] =
-        question?.question?.inputOptions || [];
-
-      console.log("questionInputOptions", questionInputOptions);
-
-      return (
-        <div>
-          <div>
-            {questionAnswerError && (
-              <div className="text-red-500">Please select an answer</div>
-            )}
-          </div>
-          <SearchSelect
-            className="w-full text-xl"
-            value={questionAnswerText}
-            onChange={(e: any) => {
-              const value = e;
-              const answer = {
-                inputId: question.question.inputId,
-                inputType: question.question.inputType,
-                answerText: value,
-              };
-              handleChangeAnswer(answer);
-            }}
-          >
-            {questionInputOptions.map((option) => (
-              <SearchSelectItem key={option?.value} value={option.value}>
-                {option.label || (option as any).text}
-              </SearchSelectItem>
-            ))}
-          </SearchSelect>
-        </div>
-      );
-
-    case "text":
-    default:
-      const isNumber = questionInputTypeValue === "number";
-      return (
-        <>
-          <div>
-            {questionAnswerError && (
-              <div className="text-red-500">
-                Please select enter the correct answer or update resume to cover
-                this question
-              </div>
-            )}
-          </div>
-          {isNumber ? (
-            <TextInput
-              className="w-full text-xl"
-              type={"number" as any}
-              value={questionAnswerText}
-              onChange={(e) => {
-                const answer = {
-                  inputId: question.question.inputId,
-                  inputType: question.question.inputType,
-                  answerText: e.target.value,
-                };
-                handleChangeAnswer(answer);
-              }}
-            />
-          ) : (
-            <Textarea
-              className="w-full text-xl"
-              rows={5}
-              value={questionAnswerText}
-              onChange={(e) => {
-                const answer = {
-                  inputId: question.question.inputId,
-                  inputType: question.question.inputType,
-                  answerText: e.target.value,
-                };
-                handleChangeAnswer(answer);
-              }}
-            />
-          )}
-        </>
-      );
-  }
-};
-
 interface ListQuestionsProps {}
 interface ListQuestionsState {
   selectedQuestion: QuestionAnswer | null;
@@ -214,11 +32,18 @@ interface ListQuestionsState {
 }
 
 export interface UseQuestions {
+  search: string;
   selectedQuestion?: QuestionAnswer;
   questions: QuestionAnswer[];
   handleChangeAnswer: (answer: Answer) => void;
   handleSaveQuestion: () => void;
+  clearSearch: () => void;
+  handleSearch: (search: string) => void;
   setSelectedQuestion: (question: QuestionAnswer) => void;
+
+  getAllQuestions: () => Promise<QuestionAnswer[]>;
+  readQuestion: (question: QuestionAnswer) => Promise<void>;
+  getFilteredQuestions: () => QuestionAnswer[];
 }
 
 export const useQuestions = (): UseQuestions => {
@@ -289,6 +114,10 @@ export const useQuestions = (): UseQuestions => {
   };
 
   const handleChangeAnswer = (answer: Answer) => {
+    // console.log("handleChangeAnswer answer", {
+    //   ...answer,
+    // });
+
     if (!selectedQuestion) return;
     if (!answer) return;
     const isCheckbox = answer.inputType === "checkbox";
@@ -298,30 +127,58 @@ export const useQuestions = (): UseQuestions => {
       "question.inputType",
       "text"
     );
+
     const questionInputTypeValue = _get(
       selectedQuestion,
       "question.inputTypeValue",
       ""
     );
 
+    const answerInputId = _get(answer, "inputId", "");
+
     const questionAnswerText = _get(selectedQuestion, "chainRes.text", "");
 
+    // console.log("handleChangeAnswer answer", {
+    //   ...answer,
+    //   isCheckbox,
+    //   questionInputType,
+    // });
+
     switch (questionInputType) {
       case "fieldset":
         if (isCheckbox) {
-          let curAnswer = questionAnswerText
-            .replace('"', "")
-            .replace('"', "")
-            .split(",");
-
-          if ((curAnswer || "").includes(answer.inputId)) {
-            curAnswer = curAnswer.filter((item) => item !== answer.inputId);
+          let questionAnswerTextJson: string[] = null;
+          try {
+            questionAnswerTextJson = JSON.parse(questionAnswerText);
+          } catch (error) {}
+
+          // console.log("questionAnswerTextJson answer", {
+          //   questionAnswerTextJson,
+          // });
+
+          if (questionAnswerTextJson && Array.isArray(questionAnswerTextJson)) {
+            // new format
+            if (
+              questionAnswerTextJson.includes(answer.inputId) ||
+              questionAnswerTextJson.includes(answer.answerText)
+            ) {
+              questionAnswerTextJson = questionAnswerTextJson
+                .filter((item) => item !== answer.inputId)
+                .filter((item) => item !== answer.answerText);
+            } else {
+              const curAnswer = answerInputId.replace('"', "").replace('"', "");
+
+              questionAnswerTextJson.push(curAnswer);
+            }
+            const newAnswerText = JSON.stringify(questionAnswerTextJson);
+            return setSelectedAnswerText(newAnswerText);
           } else {
-            curAnswer.push(answer.inputId);
+            const curAnswer = questionAnswerText
+              .replace('"', "")
+              .replace('"', "");
+            const newAnswerText = JSON.stringify([curAnswer]);
+            return setSelectedAnswerText(newAnswerText);
           }
-
-          const newAnswerText = uniq(curAnswer).join(",");
-          return setSelectedAnswerText(newAnswerText);
         }
         return setSelectedAnswerText(answer.inputId);
 
@@ -331,20 +188,28 @@ export const useQuestions = (): UseQuestions => {
   };
 
   const getAllQuestions = async () => {
-    let questionsApi = await (window as any).api.invoke("questions:getall");
-    if (questionsApi) {
-      questionsApi = questionsApi.filter(
-        (item: QuestionAnswer) => item && item.question && item.question.inputId
-      );
+    try {
+      let questionsApi = await (window as any).api.invoke("questions:getall");
+
+      // console.log("questionsApi", questionsApi);
+
+      // questionsApi = JSON.parse(questionsApi);
 
-      questionsApi = uniqBy(questionsApi, "question.inputId");
+      if (questionsApi) {
+        questionsApi = questionsApi.filter(
+          (item: QuestionAnswer) =>
+            item && item.question && item.question.inputId
+        );
 
-      if (questionsApi.length) {
-        setState({ ...state, questions: questionsApi });
+        questionsApi = uniqBy(questionsApi, "question.inputId");
+
+        if (questionsApi.length) {
+          setState({ ...state, questions: questionsApi });
+        }
       }
-    }
 
-    return questionsApi;
+      return questionsApi;
+    } catch (error) {}
   };
 
   React.useEffect(() => {
@@ -365,9 +230,6 @@ export const useQuestions = (): UseQuestions => {
       "questions:save",
       questToSave
     );
-    // if (saveQuestion) {
-    //   console.log("saveQuestion", saveQuestion);
-    // }
 
     const allquestions = questions.map((item) => {
       if (item.question.inputId === selectedQuestion.question.inputId) {
@@ -385,176 +247,39 @@ export const useQuestions = (): UseQuestions => {
   const filteredQuestions = getFilteredQuestions();
 
   return {
+    search,
+    readQuestion,
+    handleSearch,
+    clearSearch,
     selectedQuestion,
     questions: state.questions,
     handleChangeAnswer,
     handleSaveQuestion,
     setSelectedQuestion,
+    getFilteredQuestions,
+    getAllQuestions,
   };
 };
 
 export const ListQuestions = () => {
-  const [state, setState] = React.useState<ListQuestionsState>({
-    selectedQuestion: null,
-    questions: [],
-    search: "",
-  });
-
-  const { selectedQuestion = null, questions = [], search } = state;
-
-  const handleSearch = (search: string) => {
-    setState({ ...state, search });
-  };
-
-  const clearSearch = () => {
-    setState({ ...state, search: "" });
-  };
-
-  const getFilteredQuestions = () => {
-    let filteredQuestions = questions.filter(
-      (item) =>
-        item &&
-        item.question &&
-        item.question.question.toLowerCase().includes(search.toLowerCase())
-    );
-
-    filteredQuestions = sortBy(filteredQuestions, "isNew");
-    return sortBy(filteredQuestions, "date");
-  };
-
-  const readQuestion = async (question: QuestionAnswer) => {
-    // console.log("read question", question);
-    if (question.isNew) {
-      //   update BE
-
-      const savedRead = await (window as any).api.invoke(
-        "questions:read",
-        question
-      );
-
-      // console.log("savedRead", savedRead);
-
-      if (savedRead) {
-        // update FE
-        const allquestions = questions.map((item) => {
-          if (item.question.inputId === question.question.inputId) {
-            return { ...question, isNew: false };
-          }
-          return item;
-        });
-
-        setState({
-          ...state,
-          questions: allquestions,
-          selectedQuestion: question,
-        });
-      }
-    } else {
-      setState({ ...state, selectedQuestion: question });
-    }
-  };
-
-  const setSelectedQuestion = async (question: QuestionAnswer) => {
-    await readQuestion(question);
-  };
-
-  const setSelectedAnswerText = (answer: string) => {
-    const selQuestion = { ...selectedQuestion, chainRes: { text: answer } };
-    setSelectedQuestion(selQuestion);
-  };
-
-  const handleChangeAnswer = (answer: Answer) => {
-    const isCheckbox = answer.inputType === "checkbox";
-
-    const questionInputType = _get(
-      selectedQuestion,
-      "question.inputType",
-      "text"
-    );
-    const questionInputTypeValue = _get(
-      selectedQuestion,
-      "question.inputTypeValue",
-      ""
-    );
-
-    const questionAnswerText = _get(selectedQuestion, "chainRes.text", "");
-
-    switch (questionInputType) {
-      case "fieldset":
-        if (isCheckbox) {
-          let curAnswer = questionAnswerText
-            .replace('"', "")
-            .replace('"', "")
-            .split(",");
-
-          if ((curAnswer || "").includes(answer.inputId)) {
-            curAnswer = curAnswer.filter((item) => item !== answer.inputId);
-          } else {
-            curAnswer.push(answer.inputId);
-          }
-
-          const newAnswerText = uniq(curAnswer).join(",");
-          return setSelectedAnswerText(newAnswerText);
-        }
-        return setSelectedAnswerText(answer.inputId);
-
-      default:
-        return setSelectedAnswerText(answer.answerText);
-    }
-  };
-
-  const getAllQuestions = async () => {
-    let questionsApi = await (window as any).api.invoke("questions:getall");
-    if (questionsApi) {
-      questionsApi = questionsApi.filter(
-        (item: QuestionAnswer) => item && item.question && item.question.inputId
-      );
-
-      questionsApi = uniqBy(questionsApi, "question.inputId");
-
-      if (questionsApi.length) {
-        setState({ ...state, questions: questionsApi });
-      }
-    }
-
-    return questionsApi;
-  };
+  const {
+    handleSaveQuestion,
+    readQuestion,
+    getFilteredQuestions,
+    selectedQuestion = null,
+    questions = [],
+    search,
+    handleSearch,
+    clearSearch,
+    setSelectedQuestion,
+    handleChangeAnswer,
+    getAllQuestions,
+  } = useQuestions();
 
   React.useEffect(() => {
     getAllQuestions();
   }, []);
 
-  const handleSaveQuestion = async () => {
-    const questToSave: QuestionAnswer = {
-      ...selectedQuestion,
-      chainRes: {
-        ...selectedQuestion.chainRes,
-        error: false,
-      },
-      isNew: false,
-    };
-
-    const saveQuestion = await (window as any).api.invoke(
-      "questions:save",
-      questToSave
-    );
-    // if (saveQuestion) {
-    //   console.log("saveQuestion", saveQuestion);
-    // }
-
-    const allquestions = questions.map((item) => {
-      if (item.question.inputId === selectedQuestion.question.inputId) {
-        return questToSave;
-      }
-      return item;
-    });
-
-    setState({ ...state, questions: allquestions });
-
-    // await getAllQuestions();
-    return saveQuestion;
-  };
-
   const filteredQuestions = getFilteredQuestions();
 
   return (
@@ -621,8 +346,8 @@ export const ListQuestions = () => {
 
             <div>
               <RenderQuestion
-                question={selectedQuestion}
                 handleChangeAnswer={handleChangeAnswer}
+                question={selectedQuestion}
               />
             </div>
 
diff --git a/src/app/questions/question.tsx b/src/app/questions/question.tsx
new file mode 100644
index 0000000..eb1a5a2
--- /dev/null
+++ b/src/app/questions/question.tsx
@@ -0,0 +1,266 @@
+import { Answer, InputOption, QuestionAnswer } from "./interfaces";
+import {
+  List,
+  SearchSelect,
+  SearchSelectItem,
+  TextInput,
+  Textarea,
+  Title,
+} from "@tremor/react";
+import { UseQuestions, useQuestions } from "./list";
+
+import _get from "lodash/get";
+import { useEffect } from "react";
+
+interface ICheckbox {
+  title: string;
+  checked: boolean;
+  id: string;
+  handleClick: () => void;
+}
+
+const RenderCheckbox = ({
+  title,
+  checked = false,
+  id,
+  handleClick,
+  ...otherProps
+}: ICheckbox) => {
+  return (
+    <div className="inline-flex items-center">
+      <label
+        className="relative flex items-center p-3 rounded-full cursor-pointer"
+        htmlFor={id}
+      >
+        <input
+          name={id}
+          checked={checked}
+          value={checked || ("" as any)}
+          onChange={handleClick}
+          type="checkbox"
+          className="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-gray-900 checked:bg-gray-900 checked:before:bg-gray-900 hover:before:opacity-10"
+          id={id}
+        />
+        <span className="absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-3.5 w-3.5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            stroke="currentColor"
+            strokeWidth={1}
+          >
+            <path
+              fillRule="evenodd"
+              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </span>
+      </label>
+      <label
+        className="mt-px font-light text-gray-700 cursor-pointer select-none w-full text-xl"
+        htmlFor={id}
+      >
+        {title}
+      </label>
+    </div>
+  );
+};
+
+export interface IRenderQuestion {
+  autosave?: boolean;
+  question: QuestionAnswer;
+  handleChangeAnswer: (answer: Answer) => void;
+}
+export const RenderQuestion = ({
+  autosave = false,
+  question,
+  handleChangeAnswer,
+}: IRenderQuestion) => {
+  // console.log("question", question);
+  const questionInputType = _get(question, "question.inputType", "text");
+  const questionInputTypeValue = _get(
+    question,
+    "question.inputTypeValue",
+    "text"
+  );
+  const isCheckbox = questionInputTypeValue === "checkbox";
+  const questionAnswerText = _get(question, "chainRes.text", "");
+  const questionAnswerError = _get(question, "chainRes.error", false);
+
+  switch (questionInputType) {
+    case "fieldset":
+      const questionAnswers = question.question.answers || [];
+      return (
+        <div>
+          <div>
+            {questionAnswerError && (
+              <div className="text-red-500">Please select an answer</div>
+            )}
+          </div>
+          <List style={{ display: "flex", flexDirection: "column" }}>
+            {questionAnswers.map((answer) => {
+              const chainResText = _get(question, "chainRes.text", "");
+              const chainResJson = _get(question, "chainRes.json", null);
+              let isChecked = false;
+              let chainResTextJson: string[] = [];
+
+              if (isCheckbox) {
+                if (chainResJson) {
+                  chainResTextJson = chainResJson;
+                } else {
+                  try {
+                    chainResTextJson = JSON.parse(chainResText);
+                  } catch (error) {}
+                }
+
+                if (chainResTextJson && Array.isArray(chainResTextJson)) {
+                  isChecked = chainResTextJson.some(
+                    (x: string) =>
+                      x === answer?.inputId || x === answer?.answerText
+                  );
+                }
+              } else {
+                // radio single value
+                isChecked = chainResText.includes(answer.inputId);
+              }
+
+              return (
+                <RenderCheckbox
+                  checked={isChecked}
+                  handleClick={() => handleChangeAnswer(answer)}
+                  id={answer.inputId || answer.answerText}
+                  key={answer.inputId || answer.answerText}
+                  title={answer.answerText}
+                />
+              );
+            })}
+          </List>
+        </div>
+      );
+
+    case "select":
+      const questionInputOptions: InputOption[] =
+        question?.question?.inputOptions || [];
+
+      // console.log("questionInputOptions", questionInputOptions);
+
+      return (
+        <div>
+          <div>
+            {questionAnswerError && (
+              <div className="text-red-500">Please select an answer</div>
+            )}
+          </div>
+          <SearchSelect
+            className="w-full text-xl"
+            value={questionAnswerText}
+            onChange={(e: any) => {
+              const value = e;
+              const answer = {
+                inputId: question.question.inputId,
+                inputType: question.question.inputType,
+                answerText: value,
+              };
+              handleChangeAnswer(answer);
+            }}
+          >
+            {questionInputOptions.map((option) => (
+              <SearchSelectItem key={option?.value} value={option.value}>
+                {option.label || (option as any).text}
+              </SearchSelectItem>
+            ))}
+          </SearchSelect>
+        </div>
+      );
+
+    case "text":
+    default:
+      const isNumber = questionInputTypeValue === "number";
+      return (
+        <>
+          <div>
+            {questionAnswerError && (
+              <div className="text-red-500">
+                Please select enter the correct answer or update resume to cover
+                this question
+              </div>
+            )}
+          </div>
+          {isNumber ? (
+            <TextInput
+              className="w-full text-xl"
+              type={"number" as any}
+              value={questionAnswerText}
+              onChange={(e) => {
+                const answer = {
+                  inputId: question.question.inputId,
+                  inputType: question.question.inputType,
+                  answerText: e.target.value,
+                };
+                handleChangeAnswer(answer);
+              }}
+            />
+          ) : (
+            <Textarea
+              className="w-full text-xl"
+              rows={5}
+              value={questionAnswerText}
+              onChange={(e) => {
+                const answer = {
+                  inputId: question.question.inputId,
+                  inputType: question.question.inputType,
+                  answerText: e.target.value,
+                };
+                handleChangeAnswer(answer);
+              }}
+            />
+          )}
+        </>
+      );
+  }
+};
+
+interface RenderEditQuestionProps extends UseQuestions {
+  question: QuestionAnswer;
+}
+
+export const RenderEditQuestion = (props: RenderEditQuestionProps) => {
+  const {
+    questions: savedQuestions,
+    handleChangeAnswer,
+    handleSaveQuestion,
+    setSelectedQuestion,
+    selectedQuestion,
+  } = useQuestions();
+
+  const question = selectedQuestion;
+
+  useEffect(() => {
+    // console.log("savedQuestions.length", savedQuestions.length);
+    const selectedSavedQuestion = savedQuestions.find(
+      (q) => q?.question?.question === props?.question?.question?.question
+    );
+
+    if (!question && selectedSavedQuestion) {
+      // console.log("selectedSavedQuestion", selectedSavedQuestion);
+      setSelectedQuestion(selectedSavedQuestion);
+    }
+  }, [props?.question, savedQuestions]);
+
+  if (!question || !question?.question) return null;
+
+  return (
+    <div className="flex mt-3 flex-col">
+      <div style={{ marginBottom: "20px" }}>
+        <Title>{question.question.question}</Title>
+      </div>
+
+      <RenderQuestion
+        question={question}
+        handleChangeAnswer={handleChangeAnswer}
+      />
+    </div>
+  );
+};
diff --git a/src/utils/state/index.ts b/src/utils/state/index.ts
index 745e783..62b8678 100644
--- a/src/utils/state/index.ts
+++ b/src/utils/state/index.ts
@@ -1,6 +1,6 @@
 import { AppJob, BEState } from "./state.interfaces";
 import { Question, QuestionAnswer } from "../../app/questions/interfaces";
-import { isEmpty, uniqBy } from "lodash";
+import { compact, isEmpty, uniqBy } from "lodash";
 
 import fs from "fs";
 import packageJson from '../../../package.json';
@@ -123,8 +123,8 @@ export const addJob = async (job: AppJob | AppJob[]): Promise<boolean> => {
 };
 
 
-function getReadableId(question: string) {
-    return question.replace(/[^a-zA-Z0-9]/g, "-").toLowerCase().substring(0, 200);
+export function getReadableId(question: string) {
+    return (question || "").replace(/\s+/g, ' ').trim().replace(/[^a-zA-Z0-9]/g, "-").toLowerCase().substring(0, 200);
 };
 
 
@@ -154,12 +154,23 @@ export async function getAllQuestion(): Promise<QuestionAnswer[]> {
         const files = fs.readdirSync(questionDirPath);
         const questions = files.map((file) => {
             const questionFile = path.join(questionDirPath, file);
-            const questionDataString = fs.readFileSync(questionFile);
-            const questionData = JSON.parse(questionDataString.toString());
-            return questionData as QuestionAnswer;
+            const questionDataString = fs.readFileSync(questionFile, { encoding: "utf-8" });
+
+            const questionJson: QuestionAnswer = JSON.parse(questionDataString);
+
+            // TODO remove after update
+            let chainResTextAsJson;
+            try {
+                chainResTextAsJson = JSON.parse(questionJson.chainRes.text);
+                if (questionJson.chainRes) {
+                    questionJson.chainRes.json = chainResTextAsJson;
+                }
+            } catch (error) { }
+
+            return questionJson;
         });
 
-        return questions;
+        return compact(questions);
     }
     catch (error) {
         return null;
@@ -173,7 +184,7 @@ export async function saveQuestion(questionAnswer: QuestionAnswer): Promise<bool
 
         const questionReadableId = getReadableId(questionAnswer.question.question);
 
-        // console.log("saveQuestion", questionReadableId);
+        console.log("saveQuestion", { questionReadableId, questionAnswer });
 
         const questionFile = `${questionReadableId}.json`;
         // Create appDataDir if not exist
@@ -184,7 +195,7 @@ export async function saveQuestion(questionAnswer: QuestionAnswer): Promise<bool
         const questionFilDestination = path.join(questionDirPath, questionFile);
         const state = JSON.stringify(questionAnswer, null, 2);
 
-        fs.writeFileSync(questionFilDestination, state);
+        fs.writeFileSync(questionFilDestination, state, { encoding: "utf-8" });
         return true;
     }
     catch (error) {