diff --git a/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/Steps.jsx b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/Steps.jsx
index cdb5c01..23a9a6d 100644
--- a/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/Steps.jsx
+++ b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/Steps.jsx
@@ -1,71 +1,110 @@
-// import StepOne from "./StepOne";
-// const { StepOne } = require("bos.questverse.near/newQuestComponents.StepOne");
-
 const { fetch_step_one_data } = VM.require(
-  "/*__@appAccount__*//widget/data.data_stepOne"
+  "bos.questverse.near/widget/data.data_stepOne"
+);
+const { fetch_step_two_data } = VM.require(
+  "bos.questverse.near/widget/data.data_stepTwo"
+);
+const { fetch_step_three_data } = VM.require(
+  "bos.questverse.near/widget/data.data_stepThree"
 );
 const stepOneData = fetch_step_one_data();
-// const {stepOneData, stepTwoData} = VM.require("bos.questverse.near/module/data_all"); I can do it like this
-// const { StepOne } = require("./bos.questverse.near/newQuestComponents.StepTwo");
+const stepTwoData = fetch_step_two_data();
+const stepThreeData = fetch_step_three_data();
+
+const totalSteps = 5;
 
 State.init({
   step: 1,
-  formData: {
-    //STEP 1
-    selectedCurrency: "",
-    selectedOption: "",
-    selectedFields: [],
-    //STEP 2
-    // audienceGroups: [],
 
-    //STEP 3
+  //STEP 1
+  inputs: {},
+  //STEP 2
+  masterList: [],
+  allowedList: [],
+  excludedList: [],
+
+  //STEP 3
+  rewardNetwork: "",
+  rewardToken: "",
+  tokensAllocated: 0,
+  rewardAmount: "",
 
+  //STEP 4
+  date_start: "",
+  date_end: "",
 
-    //
-  },
+  //step5
 });
 
-function handleNext(data) {
+const handleNext = (data) => {
   State.update({
-    formData: { ...state.formData, ...data },
+    // update here
     step: state.step + 1,
   });
-}
+};
 
-function handlePrevious() {
+const handlePrevious = () => {
   State.update({
-    step: state.step + 1,
+    step: state.step - 1,
   });
-}
+};
 
-function renderStep() {
-  switch (step) {
+const renderStep = () => {
+  switch (state.step) {
     case 1:
       return (
         <Widget
-          src={"/*__@appAccount__*//widget/components.createQuestSteps.stepOne"}
+          src={"bos.questverse.near/widget/components.createQuestSteps.stepOne"}
           props={{
             data: stepOneData,
-            onNext: handleNext,
+            onNext: (data) => handleNext(data),
           }}
         />
       );
     case 2:
-      return <StepTwo onNext={handleNext} />;
-    // case 3:
-    //   return <StepThree data={} onNext={handleNext} onPrevious={handlePrevious} />;
-    default:
       return (
         <Widget
-          src={"/*__@appAccount__*//widget/components.createQuestSteps.stepOne"}
+          src={"bos.questverse.near/widget/newQuestComponents.stepTwo"}
           props={{
-            data: stepOneData,
-            onNext: handleNext,
+            data: stepTwoData,
+            onNext: (data) => handleNext(data),
           }}
         />
       );
+    case 3:
+      return (
+        <Widget
+          src={"bos.questverse.near/widget/components.createQuestSteps.stepThree"}
+          props={{
+            data: stepThreeData,
+            onNext: (data) => handleNext(data),
+          }}
+        />
+      );
+
+    case 4:
+      return (
+        <Widget
+          src={"bos.questverse.near/widget/components.createQuestSteps.stepFour"}
+          props={{
+            onNext: (data) => handleNext(data),
+          }}
+        />
+      );
+    case 5:
+      return (
+        <Widget
+          src={"bos.questverse.near/widget/components.createQuestSteps.stepFive"}
+          props={{
+            data: state.formData,
+            onNext: (data) => handleNext(data),
+          }}
+        />
+      );
+    default:
+      return "Error In Form";
   }
-}
+};
 
 return (
   <div>
@@ -78,25 +117,10 @@ return (
       </button>
     )}
 
+    {state.step !== 5 && (
+      <button onClick={() => handleNext(state.formData)}>Next</button>
+    )}
+
     {state.step === totalSteps && <button type="submit">Submit</button>}
   </div>
 );
-
-//I wanted to pass in all JSON configs here
-
-
-
-/**
- *
- * JSON -> Functions w req
- *
- *
- */
-
-
-
-/**
- *
- *
- * CREATE QUEST
- */
diff --git a/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepFive.jsx b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepFive.jsx
new file mode 100644
index 0000000..e46093b
--- /dev/null
+++ b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepFive.jsx
@@ -0,0 +1,30 @@
+// State.init({
+//   isChecked: false,
+//   isSubmitEnabled: false,
+// });
+
+// const handleCheckboxChange = (event) => {
+//   console.log(event.target.checked);
+//   State.update({
+//     isChecked: event.target.checked,
+//     isSubmitEnabled: true,
+//   });
+// };
+
+// const handleSubmit = () => {
+//   if (state.isChecked) {
+//     console.log("Form submitted!");
+//   } else {
+//     console.log("Checkbox must be checked to submit.");
+//   }
+// };
+
+const FORM_DATA = props.data;
+console.log(FORM_DATA)
+return (
+  <div className="stepFive">
+    <h2>Review</h2>
+    <small>Please review following Information</small>
+
+  </div>
+);
diff --git a/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepFour.jsx b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepFour.jsx
new file mode 100644
index 0000000..4a2c24a
--- /dev/null
+++ b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepFour.jsx
@@ -0,0 +1,56 @@
+function formatDate(date) {
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, "0");
+  const day = date.getDate().toString().padStart(2, "0");
+  return [year, month, day].join("-");
+}
+
+const TODAY = formatDate(new Date());
+const DAY_IN_SECONDS = 24 * 60 * 60 * 1000;
+const ONE_WEEK = DAY_IN_SECONDS * 7;
+
+const setStartDate = (e) => {
+  State.update({
+    date_start: e.target.value,
+  });
+};
+
+const setEndDate = (e) => {
+  State.update({
+    date_end: e.target.value,
+  });
+};
+
+State.init({
+  date_start: formatDate(new Date(Date.now() + DAY_IN_SECONDS)),
+  date_end: formatDate(new Date(Date.now() + ONE_WEEK)),
+});
+
+return (
+  <div className="stepFour">
+    <div>
+      <h2>Quest Duration</h2>
+      <small>Please choose your quest start and end date.</small>
+
+      <input
+        aria-label="Quest Start Date"
+        type="date"
+        value={state.date_start}
+        onChange={(e) => {
+          setStartDate(e);
+        }}
+        min={TODAY}
+      />
+
+      <input
+        aria-label="Quest End Date"
+        type="date"
+        value={state.date_end}
+        onChange={(e) => {
+          setEndDate(e);
+        }}
+        min={TODAY}
+      />
+    </div>
+  </div>
+);
diff --git a/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepOne.jsx b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepOne.jsx
index 12046fc..91608de 100644
--- a/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepOne.jsx
+++ b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepOne.jsx
@@ -1,95 +1,89 @@
-// import TYPES from "./types.json"
-const TYPES = props.data;
-console.log('types', TYPES);
-// function formatDate(date) {
-//   const year = date.getFullYear();
-//   const month = (date.getMonth() + 1).toString().padStart(2, "0");
-//   const day = date.getDate().toString().padStart(2, "0");
-//   return [year, month, day].join("-");
-// }
-
-// const TODAY = formatDate(new Date());
-// const DAY_IN_SECONDS = 24 * 60 * 60 * 1000;
+const JSON = props.data;
+const options = JSON.options;
 
 State.init({
-  selectedCurrency: null,
   selectedOption: null,
-  selectedFields: [],
+  selectedAction: null,
+  formData: {},
 });
 
-function handleCurrencyChange(e) {
+const handleOptionChange = (e) => {
   State.update({
-    selectedCurrency: e.target.value,
-    selectedOption: null,
-    selectedFields: [],
+    selectedOption: e.target.value,
+    selectedAction: null,
+    formData: {},
   });
-}
+};
 
-function handleOptionChange(e) {
-  console.log(e.target.value);
-  const currency = TYPES.project_types[0].crypto_currencies.find(
-    (crypto) => crypto.name === state.selectedCurrency
-  );
-  const action = currency.actions[e.target.value];
+const handleActionChange = (e) => {
   State.update({
-    selectedOption: e.target.value,
-    selectedFields: action.fields,
+    selectedAction: e.target.value,
+    formData: {},
   });
-}
+};
 
-return (
-  <div>
-    <div className="stepOne">
-      {/* <form action="123" onSubmit="..."> */}
-      <label htmlFor="currency">Select Currency:</label>
-      <select id="currency" onChange={handleCurrencyChange}>
-        <option value="">Select</option>
-        {TYPES.project_types[0].crypto_currencies.map((crypto) => (
-          <option key={crypto.name} value={crypto.name}>
-            {crypto.name}
-          </option>
-        ))}
-      </select>
+const handleInputChange = (e, fieldName) => {
+  const value = e.target.value;
+  State.update({
+    formData: { ...state.formData, [fieldName]: value },
+  });
+};
 
-      {state.selectedCurrency && (
+const renderActionsDropdown = () => {
+  if (state.selectedOption !== null) {
+    const selectedOptionObj = options.find(
+      (option) => option.name === state.selectedOption
+    );
+    if (selectedOptionObj && selectedOptionObj.actions) {
+      const actions = Object.keys(selectedOptionObj.actions);
+      return (
         <div>
-          <label htmlFor="option">Select Option:</label>
-          <select id="option" onChange={handleOptionChange}>
-            <option value="">Select</option>
-            {TYPES.project_types[0].crypto_currencies
-              .find((crypto) => crypto.name === state.selectedCurrency)
-              .options.map((option) => (
-                <option key={option} value={option}>
-                  {option}
-                </option>
-              ))}
+          <label>Select Action:</label>
+          <select onChange={handleActionChange} value={state.selectedAction || ""}>
+            <option value="">Select Action</option>
+            {actions.map((action, index) => (
+              <option key={index} value={action}>
+                {action}
+              </option>
+            ))}
           </select>
+          {state.selectedAction &&
+            renderSubFields(selectedOptionObj.actions[state.selectedAction])}
         </div>
-      )}
-      {state.selectedFields.length > 0 && (
-        <div>
-          {state.selectedFields.map((field, index) => (
-            <div key={index}>
-              <label htmlFor={field.name}>{field.name}:</label>
-              <select id={field.name}>
-                <option value="">Select</option>
-                {field.options.map((opt) => (
-                  <option key={opt} value={opt}>
-                    {opt}
-                  </option>
-                ))}
-              </select>
-            </div>
-          ))}
+      );
+    }
+  }
+  return null;
+};
+
+const renderSubFields = (fields) => {
+  return (
+    <div>
+      {Object.keys(fields).map((field, index) => (
+        <div key={index}>
+          <label>{field}</label>
+          <input
+            type="text"
+            placeholder={fields[field]}
+            onChange={(event) => handleInputChange(event, field)}
+          />
         </div>
-      )}
-      {/* </form> */}
-      {/* <button type="submit"> Submit</button> */}
+      ))}
     </div>
+  );
+};
+
+return (
+  <div>
+    <label>Select Option:</label>
+    <select onChange={handleOptionChange} value={state.selectedOption || ""}>
+      <option value="">Select Option</option>
+      {options.map((option, index) => (
+        <option key={index} value={option.name}>
+          {option.name}
+        </option>
+      ))}
+    </select>
+    {renderActionsDropdown()}
   </div>
 );
-//creation ->
-
-/**
- Import components to turn it into a carosel
- */
diff --git a/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepThree.jsx b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepThree.jsx
index e69de29..30b1402 100644
--- a/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepThree.jsx
+++ b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepThree.jsx
@@ -0,0 +1,90 @@
+const REWARDS_JSON = props.data; //currently not used
+
+State.init({
+  rewardNetwork: "",
+  rewardToken: "",
+  tokensAllocated: 0,
+  rewardAmount: "",
+});
+
+function handleRewardNetworkChange(e) {
+  State.update({
+    rewardNetwork: e.target.value,
+  });
+}
+
+function handleRewardTokenChange(e) {
+  State.update({
+    rewardToken: e.target.value,
+  });
+}
+
+function handleTokensAllocatedChange(e) {
+  State.update({
+    tokensAllocated: e.target.value,
+  });
+}
+
+function handleRewardAmountChange(e) {
+  State.update({
+    rewardAmount: e.target.value,
+  });
+}
+
+return (
+  <div className="stepThree">
+    <div>
+      <label htmlFor="rewardNetwork">Reward Network:</label>
+      <select
+        id="rewardNetwork"
+        value={rewardNetwork}
+        onChange={handleRewardNetworkChange}
+      >
+        <option value="">Select Reward Network</option>
+
+        {["NEAR"].map((option) => (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
+    </div>
+    <div>
+      <label htmlFor="rewardToken">Reward Token:</label>
+      <select
+        id="rewardToken"
+        value={rewardToken}
+        onChange={handleRewardTokenChange}
+      >
+        <option value="">Select Reward Token</option>
+        {["NEAR"].map((option) => (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
+    </div>
+    <div>
+      <label htmlFor="tokensAllocated">Tokens Allocated to Quest:</label>
+      <input
+        type="number"
+        id="tokensAllocated"
+        value={tokensAllocated}
+        onChange={handleTokensAllocatedChange}
+      />
+    </div>
+    <div>
+      <label htmlFor="rewardAmount">Reward Amount Per Participant:</label>
+      <select
+        id="rewardAmount"
+        value={rewardAmount}
+        onChange={handleRewardAmountChange}
+      >
+        <option value="">Select Reward Amount</option>
+        <option value="Gas Rebate">Gas Rebate</option>
+        <option value="Reccomended">Recommended</option>
+        {/* <option value="Custom">Custom</option> */}
+      </select>
+    </div>
+  </div>
+);
diff --git a/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepTwo.jsx b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepTwo.jsx
index e4d3f3c..b520c00 100644
--- a/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepTwo.jsx
+++ b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepTwo.jsx
@@ -1,65 +1,12 @@
-const AUDIENCES = {
-  public_audience: [
-    {
-      id: "1",
-      name: "audienceMember1",
-      member_count: 123,
-    },
-    {
-      id: "2",
-      name: "audienceMember2",
-      member_count: 123,
-    },
-    {
-      id: "3",
-      name: "audienceMember3",
-      member_count: 123,
-    },
-    {
-      id: "4",
-      name: "audienceMember4",
-      member_count: 123,
-    },
-    {
-      id: "5",
-      name: "audienceMember5",
-      member_count: 123,
-    },
-    {
-      id: "6",
-      name: "audienceMember6",
-      member_count: 123,
-    },
-    {
-      id: "7",
-      name: "audienceMember7",
-      member_count: 123,
-    },
-    {
-      id: "8",
-      name: "audienceMember8",
-      member_count: 123,
-    },
-    {
-      id: "8",
-      name: "audienceMember9",
-      member_count: 123,
-    },
-    {
-      id: "9",
-      name: "audienceMember10",
-      member_count: 123,
-    },
-  ],
-};
+const AUDIENCES_JSON = props.data;
 
 State.init({
-  masterList: AUDIENCES.public_audience,
+  masterList: AUDIENCES_JSON.public_audience,
   allowedList: [],
   excludedList: [],
 });
 
-function handleRemoveItem(item, list) {
+const handleRemoveItem = (item, list) => {
   if (list === "allowedList") {
     const updatedSubList = state.allowedList.filter((i) => i !== item);
 
@@ -73,10 +20,8 @@ function handleRemoveItem(item, list) {
       excludedList: updatedSubList,
     });
   }
-}
-//I hate this prettier
-
-function handleMoveItem(item, fromList, toList) {
+};
+const handleMoveItem = (item, fromList, toList) => {
   if (fromList === "master" && toList === "allowedList") {
     State.update({
       allowedList: [...state.allowedList, item],
@@ -92,7 +37,9 @@ function handleMoveItem(item, fromList, toList) {
     toList === "master"
   ) {
     if (fromList === "allowedList") {
-      const updatedAllowedSubList = state.allowedList.filter((i) => i.id !== item.id);
+      const updatedAllowedSubList = state.allowedList.filter(
+        (i) => i.id !== item.id
+      );
       State.update({
         allowedList: updatedAllowedSubList,
         masterList: [...state.masterList, item],
@@ -107,64 +54,62 @@ function handleMoveItem(item, fromList, toList) {
       });
     }
   }
-}
+};
 
 return (
-  <div>
-    <div className="stepTwo">
-      <div>
-        <h2>Audience</h2>
-        <small>Add or exclude audiences to refine quest eligibility.</small>
+  <div className="stepTwo">
+    <div>
+      <h2>Audience</h2>
+      <small>Add or exclude audiences to refine quest eligibility.</small>
 
-        <ul>
-          {state.masterList.map((item, index) => (
-            <li key={index}>
-              <div>Audience Name: {item.name}</div>
-              <small>Member Count: {item.member_count}</small>
-              <button
-                onClick={() => handleMoveItem(item, "master", "allowedList")}
-              >
-                Move to Allowed
-              </button>
-              <button
-                onClick={() => handleMoveItem(item, "master", "excludedList")}
-              >
-                Move to Excluded
-              </button>
-            </li>
-          ))}
-        </ul>
+      <ul>
+        {state.masterList.map((item, index) => (
+          <li key={index}>
+            <div>Audience Name: {item.name}</div>
+            <small>Member Count: {item.member_count}</small>
+            <button
+              onClick={() => handleMoveItem(item, "master", "allowedList")}
+            >
+              Move to Allowed
+            </button>
+            <button
+              onClick={() => handleMoveItem(item, "master", "excludedList")}
+            >
+              Move to Excluded
+            </button>
+          </li>
+        ))}
+      </ul>
 
-        <h3>Allowed</h3>
-        <ul>
-          {state.allowedList.map((item, index) => (
-            <li key={index}>
-              <div>Audience Name: {item.name}</div>
-              <small>Member Count: {item.member_count}</small>
-              <button
-                onClick={() => handleMoveItem(item, "allowedList", "master")}
-              >
-                Remove
-              </button>
-            </li>
-          ))}
-        </ul>
+      <h3>Allowed</h3>
+      <ul>
+        {state.allowedList.map((item, index) => (
+          <li key={index}>
+            <div>Audience Name: {item.name}</div>
+            <small>Member Count: {item.member_count}</small>
+            <button
+              onClick={() => handleMoveItem(item, "allowedList", "master")}
+            >
+              Remove
+            </button>
+          </li>
+        ))}
+      </ul>
 
-        <h3>Excluded</h3>
-        <ul>
-          {state.excludedList.map((item, index) => (
-            <li key={index}>
-              <div>Audience Name: {item.name}</div>
-              <small>Member Count: {item.member_count}</small>
-              <button
-                onClick={() => handleMoveItem(item, "excludedList", "master")}
-              >
-                Remove
-              </button>
-            </li>
-          ))}
-        </ul>
-      </div>
+      <h3>Excluded</h3>
+      <ul>
+        {state.excludedList.map((item, index) => (
+          <li key={index}>
+            <div>Audience Name: {item.name}</div>
+            <small>Member Count: {item.member_count}</small>
+            <button
+              onClick={() => handleMoveItem(item, "excludedList", "master")}
+            >
+              Remove
+            </button>
+          </li>
+        ))}
+      </ul>
     </div>
   </div>
 );
diff --git a/questverse-widgets/apps/QuestVerse/widget/components/quest/create/form.jsx b/questverse-widgets/apps/QuestVerse/widget/components/quest/create/form.jsx
index 891b001..708c9a7 100644
--- a/questverse-widgets/apps/QuestVerse/widget/components/quest/create/form.jsx
+++ b/questverse-widgets/apps/QuestVerse/widget/components/quest/create/form.jsx
@@ -134,7 +134,7 @@ return (
       }}
     />
     <Widget
-      src={`hack.near/widget/quest.create.step${state.step + 1}`}
+      src={`/*__@appAccount__*//widget/components.quest.create.step${state.step + 1}`}
       props={{
         formState: state.form,
         onComplete: handleStepComplete,
@@ -167,4 +167,4 @@ return (
       }}
     />
   </>
-);
\ No newline at end of file
+);
diff --git a/questverse-widgets/apps/QuestVerse/widget/components/quest/create/step1.jsx b/questverse-widgets/apps/QuestVerse/widget/components/quest/create/step1.jsx
index 740c6a0..c75fc25 100644
--- a/questverse-widgets/apps/QuestVerse/widget/components/quest/create/step1.jsx
+++ b/questverse-widgets/apps/QuestVerse/widget/components/quest/create/step1.jsx
@@ -38,89 +38,6 @@ return (
         </span>
         DAO Info & KYC
       </h2>
-      <Widget
-        src="nearui.near/widget/Input.ExperimentalText"
-        props={{
-          label: "DAO Name",
-          placeholder: "Lorem Ipsum",
-          size: "md",
-          onChange: (v) => {
-            onValueChange("name", v);
-            // generate address
-            onValueChange(
-              "address",
-              `${v
-                .toLowerCase()
-                .replace(/\s/g, "-")
-                .replace(/[^a-zA-Z0-9-]/g, "")}.sputnik-dao.near`,
-            );
-          },
-          inputProps: {
-            name: "name",
-            defaultValue: state.answers.name,
-          },
-          error: errors["name"],
-        }}
-      />
-      <Widget
-        src="nearui.near/widget/Input.ExperimentalText"
-        props={{
-          label: (
-            <>
-              DAO Address{" "}
-              <span className="text-black-50 fw-light small">
-                (auto-filled)
-              </span>
-            </>
-          ),
-          placeholder: "sample-dao-name.sputnik-dao.near",
-          value:
-            state.answers.address === "" ? undefined : state.answers.address,
-          size: "md",
-          disabled: true,
-          onChange: (v) => onValueChange("address", v),
-          inputProps: {
-            name: "address",
-            defaultValue: state.answers.address,
-          },
-          error: errors["address"],
-        }}
-      />
-      <Widget
-        src="nearui.near/widget/Input.ExperimentalText"
-        props={{
-          label: (
-            <>
-              Soul Bound Token Issuer{" "}
-              <span className="text-black-50 fw-light small">(optional)</span>
-            </>
-          ),
-          placeholder: "The address of the token issuer",
-          size: "md",
-          onChange: (v) => onValueChange("soulBoundTokenIssuer", v),
-          error: errors["soulBoundTokenIssuer"],
-          inputProps: {
-            name: "soulBoundTokenIssuer",
-            defaultValue: state.answers.soulBoundTokenIssuer,
-          },
-        }}
-      />
-      <Widget
-        src="nearui.near/widget/Input.ExperimentalText"
-        props={{
-          label: "Purpose",
-          placeholder: "Please add the purpose of your DAO",
-          size: "md",
-          textarea: true,
-          inputProps: {
-            rows: 5,
-            name: "purpose",
-            defaultValue: state.answers.purpose,
-          },
-          onChange: (v) => onValueChange("purpose", v),
-          error: errors["purpose"],
-        }}
-      />
       <h3 className="h5 fw-bold">
         KYC <span className="text-black-50 fw-light small">(optional)</span>
       </h3>
@@ -166,4 +83,4 @@ return (
 
     {renderFooter(state.answers)}
   </div>
-);
\ No newline at end of file
+);
diff --git a/questverse-widgets/apps/QuestVerse/widget/data/data_stepOne.jsx b/questverse-widgets/apps/QuestVerse/widget/data/data_stepOne.jsx
index 31b0646..0a59d1a 100644
--- a/questverse-widgets/apps/QuestVerse/widget/data/data_stepOne.jsx
+++ b/questverse-widgets/apps/QuestVerse/widget/data/data_stepOne.jsx
@@ -1,78 +1,108 @@
 function fetch_step_one_data({}) {
   return {
-    project_types: [
+    options: [
       {
-        name: "Crypto Currency",
-        crypto_currencies: [
-          {
-            name: "Bitcoin",
-            options: ["Lend", "Bridge"],
-            actions: {
-              Lend: {
-                fields: [
-                  {
-                    name: "network",
-                    type: "dropdown",
-                    options: ["Option 1", "Option 2", "Option 3"],
-                  },
-                ],
-              },
-              Bridge: {
-                fields: [
-                  {
-                    name: "from",
-                    type: "dropdown",
-                    options: ["Option A", "Option B", "Option C"],
-                  },
-                  {
-                    name: "to",
-                    type: "dropdown",
-                    options: ["Option X", "Option Y", "Option Z"],
-                  },
-                  {
-                    name: "dropdown_type",
-                    type: "dropdown",
-                    options: ["Type 1", "Type 2", "Type 3"],
-                  },
-                ],
-              },
-            },
-          },
-          {
-            name: "NEAR",
-            options: ["Bridge"],
-            actions: {
-              Lend: {
-                fields: [
-                  {
-                    name: "network",
-                    type: "dropdown",
-                    options: ["Option 50", "Option 500", "Option 500"],
-                  },
-                ],
-              },
-              Bridge: {
-                fields: [
-                  {
-                    name: "from",
-                    type: "dropdown",
-                    options: ["Option 0", "Option 00", "Option 000"],
-                  },
-                  {
-                    name: "to",
-                    type: "dropdown",
-                    options: ["Option XXX", "Option YYY", "Option ZZZ"],
-                  },
-                  {
-                    name: "dropdown_type",
-                    type: "dropdown",
-                    options: ["Type 111", "Type 222", "Type 333"],
-                  },
-                ],
-              },
-            },
-          },
-        ],
+        name: "ALL",
+        actions: {
+          "interaction on contract": {
+            account_id: "<text_input>",
+            number_of_interactions: "<number_input>",
+          },
+          "interaction for specific method on contract": {
+            account_id: "<text_input>",
+            method_name: "<text_input>",
+            number_of_interactions: "<number_input>",
+          },
+          transfer: {
+            account_id: "<text_input>",
+            near_amount: "<number_input>",
+          },
+        },
+      },
+      {
+        name: "social.near",
+        actions: {
+          "follow a user": {
+            user: "<text_input>",
+          },
+          "like a post": {
+            post_id: "<number_input>",
+          },
+          repost: {
+            post_id: "<number_input>",
+          },
+          "use hash tag in post": {
+            hash_tag: "<text_input>",
+          },
+          "comment on a post": {
+            post_id: "<number_input>",
+          },
+          // "complete widget metadata information": {},
+        },
+      },
+      {
+        name: "astrodao.near",
+        actions: {
+          "join a dao": {
+            dao_account_id: "<text_input>",
+            role: "<text_input>",
+          },
+          "vote on proposal": {
+            dao_account_id: "<text_input>",
+            proposal_id: "<number_input>",
+          },
+        },
+      },
+      {
+        name: "near horizon",
+        actions: {
+          "propose a contribution": {
+            project_name: "<input_text>",
+          },
+        },
+      },
+      {
+        name: "devgogs.near",
+        actions: {
+          "post a solution": {
+            get_number_likes: "<number_input>",
+          },
+          "reply to a post": {
+            id: "<number_input>",
+          },
+          "interact with community": {
+            community_name: "<text_input>",
+          },
+          "fund a project": {
+            "greater than": "<number_input>",
+            "less than": "<number_input>",
+            equal: "<number_input>",
+          },
+        },
+      },
+      {
+        name: "Mintbase",
+        actions: {
+          "Buy NFT from Mintbase": {
+            // account_id: "<text_input>",
+            // number_of_interactions: "<number_input>",
+          },
+          "List NFT on Mintbase": {
+            // account_id: "<text_input>",
+            // method_name: "<text_input>",
+            // number_of_interactions: "<number_input>",
+          },
+          "Create a collection on Mintbase": {
+            // account_id: "<text_input>",
+            // near_amount: "<number_input>",
+          },
+        },
+      },
+      {
+        name: "Paras",
+        actions: {
+          "Buy NFT from Paras": {},
+        },
       },
     ],
   };
diff --git a/questverse-widgets/apps/QuestVerse/widget/data/data_stepThree.jsx b/questverse-widgets/apps/QuestVerse/widget/data/data_stepThree.jsx
new file mode 100644
index 0000000..f8d454e
--- /dev/null
+++ b/questverse-widgets/apps/QuestVerse/widget/data/data_stepThree.jsx
@@ -0,0 +1,6 @@
+function fetch_step_three_data({}) {
+  return {
+    reward_types: [{'not': 'used'}],
+  };
+}
+return { fetch_step_three_data };
diff --git a/questverse-widgets/apps/QuestVerse/widget/data/data_stepTwo.jsx b/questverse-widgets/apps/QuestVerse/widget/data/data_stepTwo.jsx
new file mode 100644
index 0000000..315cb1c
--- /dev/null
+++ b/questverse-widgets/apps/QuestVerse/widget/data/data_stepTwo.jsx
@@ -0,0 +1,57 @@
+function fetch_step_two_data({}) {
+  return {
+    public_audience: [
+      {
+        id: "1",
+        name: "audienceMember1",
+        member_count: 123,
+      },
+      {
+        id: "2",
+        name: "audienceMember2",
+        member_count: 123,
+      },
+      {
+        id: "3",
+        name: "audienceMember3",
+        member_count: 123,
+      },
+      {
+        id: "4",
+        name: "audienceMember4",
+        member_count: 123,
+      },
+      {
+        id: "5",
+        name: "audienceMember5",
+        member_count: 123,
+      },
+      {
+        id: "6",
+        name: "audienceMember6",
+        member_count: 123,
+      },
+      {
+        id: "7",
+        name: "audienceMember7",
+        member_count: 123,
+      },
+      {
+        id: "8",
+        name: "audienceMember8",
+        member_count: 123,
+      },
+      {
+        id: "8",
+        name: "audienceMember9",
+        member_count: 123,
+      },
+      {
+        id: "9",
+        name: "audienceMember10",
+        member_count: 123,
+      },
+    ],
+  };
+}
+return { fetch_step_two_data };
diff --git a/questverse-widgets/apps/QuestVerse/widget/newQuestComponents/stepOne.jsx b/questverse-widgets/apps/QuestVerse/widget/newQuestComponents/stepOne.jsx
new file mode 100644
index 0000000..997873b
--- /dev/null
+++ b/questverse-widgets/apps/QuestVerse/widget/newQuestComponents/stepOne.jsx
@@ -0,0 +1,85 @@
+
+const JSON = props.data;
+const options = JSON.options;
+
+State.init({
+  selectedOption: "",
+  inputs: {},
+});
+
+const handleOptionChange = (e) => {
+  State.update({
+    selectedOption: e.target.value,
+    inputs: {},
+  });
+};
+
+const handleInputChange = (e, field) => {
+  const { id, value } = e.target;
+
+  State.update({
+    inputs: {
+      ...state.inputs,
+      [field]: { ...state.inputs[field], [id]: value },
+    },
+  });
+};
+
+const handleDisplay = () => {
+  console.log(state.inputs); //read
+};
+
+const renderInputs = () => {
+  if (!state.selectedOption) {
+    return null;
+  }
+
+  const selected = options.find(
+    (option) => option.name === state.selectedOption
+  );
+  if (!selected) {
+    return null;
+  }
+
+  return Object.keys(selected.actions).map((action, index) => {
+    const fields = selected.actions[action];
+    return (
+      <div key={index}>
+        <h3>{action}</h3>
+        {Object.keys(fields).map((field, i) => (
+          <div key={i}>
+            <label htmlFor={field}>{field}:</label>
+            <input
+              type="text"
+              id={field}
+              onChange={(e) => handleInputChange(e, action)}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  });
+};
+
+return (
+  <div>
+    <label htmlFor="options">Choose an option:</label>
+    <select
+      id="options"
+      onChange={handleOptionChange}
+      value={state.selectedOption}
+    >
+      <option value="">Select</option>
+      {options.map((option) => (
+        <option key={option.name} value={option.name}>
+          {option.name}
+        </option>
+      ))}
+    </select>
+    <div>
+      <h2>Inputs:</h2>
+      {renderInputs()}
+    </div>
+    <button onClick={handleDisplay}>console log</button>
+  </div>
+);
diff --git a/questverse-widgets/build/QuestVerse/src/newQuestComponents/stepOne.jsx b/questverse-widgets/build/QuestVerse/src/newQuestComponents/stepOne.jsx
new file mode 100644
index 0000000..997873b
--- /dev/null
+++ b/questverse-widgets/build/QuestVerse/src/newQuestComponents/stepOne.jsx
@@ -0,0 +1,85 @@
+
+const JSON = props.data;
+const options = JSON.options;
+
+State.init({
+  selectedOption: "",
+  inputs: {},
+});
+
+const handleOptionChange = (e) => {
+  State.update({
+    selectedOption: e.target.value,
+    inputs: {},
+  });
+};
+
+const handleInputChange = (e, field) => {
+  const { id, value } = e.target;
+
+  State.update({
+    inputs: {
+      ...state.inputs,
+      [field]: { ...state.inputs[field], [id]: value },
+    },
+  });
+};
+
+const handleDisplay = () => {
+  console.log(state.inputs); //read
+};
+
+const renderInputs = () => {
+  if (!state.selectedOption) {
+    return null;
+  }
+
+  const selected = options.find(
+    (option) => option.name === state.selectedOption
+  );
+  if (!selected) {
+    return null;
+  }
+
+  return Object.keys(selected.actions).map((action, index) => {
+    const fields = selected.actions[action];
+    return (
+      <div key={index}>
+        <h3>{action}</h3>
+        {Object.keys(fields).map((field, i) => (
+          <div key={i}>
+            <label htmlFor={field}>{field}:</label>
+            <input
+              type="text"
+              id={field}
+              onChange={(e) => handleInputChange(e, action)}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  });
+};
+
+return (
+  <div>
+    <label htmlFor="options">Choose an option:</label>
+    <select
+      id="options"
+      onChange={handleOptionChange}
+      value={state.selectedOption}
+    >
+      <option value="">Select</option>
+      {options.map((option) => (
+        <option key={option.name} value={option.name}>
+          {option.name}
+        </option>
+      ))}
+    </select>
+    <div>
+      <h2>Inputs:</h2>
+      {renderInputs()}
+    </div>
+    <button onClick={handleDisplay}>console log</button>
+  </div>
+);