diff --git a/package.json b/package.json
index ec24f0bc..bf8a8802 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
         "system": "^2.0.1",
         "v-markdown-editor": "^1.2.6",
         "valid-url": "^1.0.9",
+        "validator": "^13.7.0",
         "vue": "^2.5.16",
         "vue-codemirror": "^4.0.6",
         "vue-css-donut-chart": "^1.3.0",
diff --git a/src/assets/filled-rest-api-50.png b/src/assets/filled-rest-api-50.png
new file mode 100644
index 00000000..fdee50c8
Binary files /dev/null and b/src/assets/filled-rest-api-50.png differ
diff --git a/src/components/admin/createProjectSlider/CreateProjectSlide.vue b/src/components/admin/createProjectSlider/CreateProjectSlide.vue
index c55245e1..acb68e26 100644
--- a/src/components/admin/createProjectSlider/CreateProjectSlide.vue
+++ b/src/components/admin/createProjectSlider/CreateProjectSlide.vue
@@ -283,6 +283,28 @@
             </b-collapse>
           </b-card>
 
+          <!-- Custom API Config -->
+
+          <b-card no-body class="mb-1">
+            <b-card-header header-tag="header" class="p-1 accordin-header accordion-header-theme"  :style="headerThemeCss" role="tab">
+              <b-button block v-b-toggle.accordion-10 variant="info"
+                class="bg-transparent border-0 text-left theme-color"
+                title="Create Custom Api configuration for your event">
+                <img src="../../../assets/filled-rest-api-50.png" height="20px" class="ml-0" />
+                Custom API Configurations
+              </b-button>
+            </b-card-header>
+            <b-collapse id="accordion-10" accordion="my-accordion" role="tabpanel">
+              <b-card-body>               
+                <custom-api-event-action-config
+                v-on="$listeners"
+                :eventActionList="CustomApi"
+                eventActionType="CUSTOMAPI"                
+                ></custom-api-event-action-config>
+              </b-card-body>
+            </b-collapse>
+          </b-card>
+
           <!-- <b-card no-body class="mb-1">
             <b-card-header
               header-tag="header"
@@ -381,6 +403,7 @@ import KycEventActionConfig from "../createProjectSlider/components/KycEventActi
 import PrizeEventActionConfig from "../createProjectSlider/components/PrizeEventActionConfig.vue"
 import SmartContractEventActionConfig from "../createProjectSlider/components/SmartContractEventActionConfig.vue"
 import CustomContractEventActionConfig from "../createProjectSlider/components/CustomContractEventActionConfig.vue"
+import CustomApiEventActionConfig from "../createProjectSlider/components/CustomApiEventActionConfig.vue"
 export default {
   name: "CreateProjectSlide",
   components: {
@@ -395,7 +418,8 @@ export default {
     KycEventActionConfig,
     PrizeEventActionConfig,
     SmartContractEventActionConfig,
-    CustomContractEventActionConfig
+    CustomContractEventActionConfig,
+    CustomApiEventActionConfig
   },
 
   props: {
@@ -464,6 +488,16 @@ export default {
       '--header-text-color':config.app.headerTextColor
       }
   },
+    CustomApi: function () {      
+       if (this.actionList && this.actionList.length > 0) {
+        return this.actionList.filter(
+          (x) =>
+            x.type.indexOf("CUSTOM_API") > -1          
+        );
+      } else {
+        return [];
+      }
+    },
     getTagDb: function () {
       if (this.tagFdb && this.tagFdb.length > 0) {
         for (let index = 0; index < this.tagFdb.length; index++) {
diff --git a/src/components/admin/createProjectSlider/components/ActionInputs/CustomApi.vue b/src/components/admin/createProjectSlider/components/ActionInputs/CustomApi.vue
new file mode 100644
index 00000000..adeb0430
--- /dev/null
+++ b/src/components/admin/createProjectSlider/components/ActionInputs/CustomApi.vue
@@ -0,0 +1,133 @@
+<template>
+  <b-card no-body class="action-wrap">
+    <b-card-header :class="visible ? null : 'collapsed'" :aria-expanded="visible ? 'true' : 'false'"
+      :aria-controls="`collapse-${idValue}`" @click="visible = !visible">
+      <b-row>
+        <b-col cols="1" sm="1" md="1">
+          <img src="../../../assets/filled-rest-api-50.png" height="25px" />
+          <!-- <img src="../../../assets/metamask.svg" height="25px" /> -->
+        </b-col>
+        <b-col cols="9" sm="9" class="text-left" md="9">
+          <div class="text text-capitalize">{{ data.title }}</div>
+        </b-col>
+
+        <b-col cols="2" sm="2" md="2">
+          <b-badge class="btn-score" :style="buttonThemeCss" @click="authToken && update()" v-if="!done">
+           <i class="fa fa-plus" aria-hidden="true"></i>
+            {{ data.score }}
+          </b-badge>
+          <img class="check-mark" src="../../../assets/check-circle-fill.svg" height="25px" v-if="done" />
+        </b-col>
+      </b-row>
+    </b-card-header>
+    <b-collapse :id="`collapse-${idValue}`" v-model="visible">
+      <b-card-body class="user-details">
+        <b-row>
+          <b-col cols="12" sm="12" md="12">
+            <div class="metamask">
+              <b-form-input type="text"
+              :placeholder="data.placeHolder"
+              v-model="value"
+              :disabled="done"
+              :required="data.isManadatory"
+              ></b-form-input>
+
+            </div>
+          </b-col>
+        </b-row>  
+        <b-row v-if="!done">
+          <b-col cols="12" sm="12" md="12">
+            <button class="btn btn-link center" @click="update()">Continue</button>
+          </b-col>
+        </b-row>
+      </b-card-body>
+    </b-collapse>
+  </b-card>
+</template>
+<style scoped>
+.center{
+  display: block; margin-left: auto;margin-right: auto
+}
+</style>
+
+<script>
+
+import eventBus from "../../../eventBus.js";
+import apiClient from "../../../mixins/apiClientMixin.js";
+import {
+  isValidURL,
+  isValidText,
+  isEmpty,
+} from "../../../mixins/fieldValidationMixin";
+import notificationMixins from "../../../mixins/notificationMixins";
+import Messages from "../../../utils/messages/participants/en";
+import ErrorMessage from "../ErrorMessage.vue";
+export default {
+  name: "CustomApi",
+  props: {
+    idValue: {
+      required: true,
+    },
+    data: {
+      required: true,
+    },
+    authToken: {
+      required: true
+    },
+    done: {
+      required: true,
+    },
+    themeData: {
+      required: true,
+    }
+  },
+  components: {
+    ErrorMessage,
+  },
+computed:{
+ buttonThemeCss() {
+      return {
+        '--button-bg-color': this.themeData.buttonBGColor,
+        '--button-text-color': this.themeData.buttonTextColor
+      }
+     }
+  },
+  data() {
+    return {
+      visible: false,
+      value:""
+      }
+  },
+  mounted() {
+    if(this.done && this.data.value){
+      this.value = this.data.value
+    }
+    eventBus.$on(`disableInput${this.data._id}`, this.disableInput);
+  },
+  methods: {
+    async update() {      
+      if (!this.value || this.value === "") {
+        return this.notifyErr('Enter value');
+      } else {
+        this.$emit("input",this.value);
+      }
+    },
+    // isFieldValid() {
+    //   if (isEmpty(this.value.userWalletAddress)) {
+    //     return false;
+    //   }
+    //   if (isValidURL(this.value.userWalletAddress)) {
+    //     return false;
+    //   }
+    //   if (!isValidText(this.value.userWalletAddress)) {
+    //     return false;
+    //   }
+    //   return true;
+    // },
+    disableInput(data) {
+     this.data.isDone = data;
+    },
+  },
+  mixins: [notificationMixins],
+};
+</script>
diff --git a/src/components/admin/createProjectSlider/components/CustomApiEventActionConfig.vue b/src/components/admin/createProjectSlider/components/CustomApiEventActionConfig.vue
new file mode 100644
index 00000000..be50ad80
--- /dev/null
+++ b/src/components/admin/createProjectSlider/components/CustomApiEventActionConfig.vue
@@ -0,0 +1,866 @@
+<template>
+  <div>
+    <div
+      v-if="eventActionList.length"
+      style="overflow-y: auto"
+      class="selected-media-wrapper d-flex p-2 mb-4"
+    >
+      <div
+        @click="handleEventActionClick(idx)"
+        v-for="(eventAction, idx) in eventActionList"
+        v-bind:Key="idx"
+      >
+        <div
+          v-if="!eventActionList[idx].isDeleted"
+          :class="
+            flash == idx
+              ? 'flash card rounded m-1 p-1 d-flex flex-row align-items-center'
+              : 'card rounded m-1 p-1 d-flex flex-row align-items-center pointer'
+          "
+          style="min-width: 120px"
+        >
+          <span>
+            <img
+              style="padding-right: 5px"
+              src="../../../../assets/filled-rest-api-50.png"          
+              height="22px"
+            />  
+          </span>
+          <span>{{ truncate1(eventAction.title, 6) }}</span>
+          <span style="color: gray; padding-left: 5px"
+            ><i style="" class="fas fa-minus-circle"></i
+          ></span>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <div class="row g-3 align-items-center w-100 mt-4">
+        <div class="text-left col-lg-3 col-md-3 text-left">
+          <label for="type" class="col-form-label"
+            >Title<span style="color: red">*</span>:
+          </label>
+        </div>
+        <div class="col-lg-9 col-md-9 px-0">
+          <input
+            v-model="selected.title"     
+            type="text"
+            id="title"
+            class="form-control w-100"
+            placeholder="Enter Action Title"
+          />
+        </div>
+      </div>
+
+      <div
+        class="row g-3 align-items-center w-100 mt-4"
+      >
+        <div class="text-left col-lg-3 col-md-3 text-left">
+          <label for="title" class="col-form-label"
+            >API Endpoint<span style="color: red">*</span>:
+          </label>
+        </div>
+        <div class="col-lg-9 col-md-9 px-0">
+          <input
+            v-model="apiData.apiEndPoint"    
+            type="text"
+            id="title"
+            class="form-control w-100"
+            placeholder="Enter Api Endpoint"
+          />
+          <span class="inputInfo"
+            >Make sure to whitelist <span style="color:#3457D5;font-weight: bold;">https://app.fyre.hypersign.id</span>
+            url on your server.</span
+          >
+        </div>
+      </div>
+
+     <div
+        class="row g-3 align-items-center w-100 mt-4"
+      >
+        <div class="text-left col-lg-3 col-md-3 text-left">
+          <label for="title" class="col-form-label"
+            >Header (Optional):
+          </label>
+        </div>
+        <div class="col-lg-9 col-md-9 px-0">
+          <codemirror
+          ref="json-cm"
+          v-model="apiData.header"
+          :options="cmOptions"
+          ></codemirror>
+        </div>
+      </div>
+
+      <div
+        class="row g-3 align-items-center w-100 mt-4"
+      >
+        <div class="text-left col-lg-3 col-md-3 text-left">
+          <label for="type" class="col-form-label"
+            >API Method<span style="color: red">*</span>:
+          </label>
+        </div>
+        <div class="col-lg-9 col-md-9 px-0">
+          <hf-select-drop-down
+          :options="allCondition"
+          @selected=" e =>inputMethod(e)"          
+          ></hf-select-drop-down>
+        </div>
+      </div>
+
+      <div
+        class="row g-3 align-items-center w-100 mt-4"
+        v-if="showAttribute === true"
+      >
+        <div class="text-left col-lg-3 col-md-3 text-left">
+          <label for="title" class="col-form-label"
+            >{{isGet ? 'Query Parameter Fields':'Body Fields'}}<span style="color: red">*</span>:
+          </label>
+        </div>        
+          <div class="col-lg-9 col-md-9 px-0">
+           <b-card-header header-tag="header" class="p-1 border-0 accordin-header-theme" :style="headerThemeCss" role="tab">
+                    <b-button block v-b-toggle.accordion-11 style="text-decoration:none; color:#212529;" variant="secondary"
+                    :aria-expanded="visible ? 'true' : 'false'"
+                    @click="visible = !visible"
+                    aria-controls="collapse-1"
+                    class="text-left border-0 theme-color bg-transparant"
+                    title="Create Attribute configuration">Fields Configurations
+                    <i :class="!visible ? 'fa fa-arrow-down' : 'fa fa-arrow-up'" style="float:right;"></i>
+                    </b-button>
+                  </b-card-header>
+            <b-collapse id="collapse-1" class="mt-2" v-model="visible" style="padding:10px">
+                    <div class="selected-media-wrapper d-flex p-2 mb-4"  style="overflow-y: auto" v-if="apiData.attributes.length > 0">
+                      <div v-for="(attr,id) in apiData.attributes" v-bind:key="attr.id">
+                        <div :class="
+                            attrFlash == attr.id
+                            ? 'flash card rounded m-1 p-1 d-flex flex-row align-items-center'
+                            : 'card rounded m-1 p-1 d-flex flex-row align-items-center pointer'"
+                            @click="handleClick(attr.id)"
+                            style="min-width:90px;"
+                            :title="attr.fieldName"
+                          >
+                          {{ attr.fieldName }}
+                           <span style="color: gray; padding-left: 5px">
+                            <i style="" class="fas fa-minus-circle"></i>
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="row g-3 align-items-center w-100">
+                        <div class="col-lg-3 col-md-3 text-left">
+                          
+                          <label for="attributeName" class="col-form-label">Field Name<span style="color: red">*</span>: </label>                          
+                        </div>
+                        <div class="col-lg-9 col-md-9 px-0">
+                          <input v-model="attributeData.fieldName" type="text" id="attributeName" class="form-control w-100"
+                            placeholder="firstName">
+                        </div>
+                    </div>
+
+                    <div class="row g-3 align-items-center w-100 mt-4">
+                        <div class="col-lg-3 col-md-3 text-left">                        
+                        <label for="type" class="col-form-label">Field Type<span style="color: red">*</span>:</label>
+                        </div>
+                        <div class="col-lg-9 col-md-9 px-0">
+                      <b-form-select
+                      v-model="attributeData.fieldType"
+                      :options="attributeFieldTypeOption"
+                      ></b-form-select>
+                      </div>
+                    </div>
+                    <div class="row g-3 align-items-center w-100 mt-4">
+                        <div class="col-lg-3 col-md-3 text-left">                        
+                        <label for="type" class="col-form-label">Field Placeholder:</label>
+                        </div>
+                        <div class="col-lg-9 col-md-9 px-0">
+                      <input v-model="attributeData.fieldPlaceHolder" type="text" id="attributeName" class="form-control w-100"
+                            placeholder="Enter Placeholder">
+                      </div>
+                    </div>
+                    <div class="form-group row mt-4" v-if="isAdd">
+                      <div class="col-sm-10">                        
+                        <hf-buttons 
+                          name="Add"                          
+                          @executeAction="addAttributesToBox()"
+                        ></hf-buttons>
+                      </div>                                            
+                    </div>
+                    <div class="form-group row mt-4" v-else>
+                      <div class="col-sm-10">                        
+                        <hf-buttons 
+                          name="Update"        
+                          class="btn btn-primary"
+                          @executeAction="updateAttributeData()"
+                        ></hf-buttons>
+                        <hf-buttons 
+                          name="Delete"        
+                          customClass="btn btn-danger slight-left-margin"
+                          @executeAction="deleteAttribute()"
+                        ></hf-buttons>
+                      </div>
+                    </div>                   
+                  </b-collapse>
+        </div>
+      </div>
+
+      <div
+        class="row g-3 align-items-center w-100 mt-4"
+      >
+        <div class="text-left col-lg-3 col-md-3 text-left">
+          <label for="title" class="col-form-label"
+            >Condition<span style="color: red">*</span>:
+          </label>
+        </div>        
+          <div class="col-lg-3 col-md-2 px-0">
+          <hf-select-drop-down
+          :options="returnTypeOption"
+          @selected=" e =>inputReturnType(e)"  
+
+          ></hf-select-drop-down>          
+        </div>
+        <div class="col-lg-3 col-md-2 px-0">
+          <hf-select-drop-down
+          :options="condtionOption"
+          @selected=" e =>inputCondtion(e)"
+          ></hf-select-drop-down>    
+        </div>
+        <div class="col-lg-3 col-md-2 px-0" v-show="isBoolean === true">
+          <hf-select-drop-down
+          :options="booleanCondition"
+          @selected=" e =>inputBooleanCondtion(e)"
+          ></hf-select-drop-down>
+        </div>
+        <div class="col-lg-3 col-md-2 px-0" v-show="isBoolean === false">
+          <input
+            v-model="apiData.conditionValue"
+            :type="isNumber ? 'number' :'text'"
+            id="title"
+            class="form-control w-100"
+            placeholder="Enter condition value"
+          />    
+        </div>
+      </div>
+      <div class="row g-3 align-items-center w-100 mt-4">
+        <div class="text-left col-lg-3 col-md-3 text-left">
+          <label for="title" class="col-form-label"
+            >Score<span style="color: red">*</span>:
+          </label>
+        </div>
+        <div class="col-lg-9 col-md-9 px-0">
+          <input
+            v-model="selected.score"
+            type="number"
+            id="title"
+            class="form-control w-100"
+          />
+        </div>
+      </div>
+      <div
+        class="row g-3 justify-content-md-end w-100 mt-4"
+        v-if="isCreate == true"
+      >
+        <div class="col-lg-6 col-md-9 px-0">
+          <hf-buttons
+          name="Add"
+          @executeAction="handleEventActionAdd()"
+          ></hf-buttons>
+        </div>
+      </div>
+      <div class="row g-3 justify-content-md-end w-100 mt-4" v-else>
+        <div class="col-lg-6 col-md-9 px-0">
+          <hf-buttons
+          name="Update"
+          @executeAction="handleEventActionUpdate()"
+          customClass="btn button-theme slight-left-margin"
+          ></hf-buttons>
+          <hf-buttons
+          name="Delete"
+          @executeAction="handleEventActionDelete()"
+          customClass="btn btn-danger slight-left-margin"
+          ></hf-buttons>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.inputInfo {
+  color: #808080b5;
+  font-size: smaller;
+}
+
+.pointer {
+  cursor: pointer;
+}
+.selected-media-wrapper {
+  border: 1px dashed;
+  max-height: 100px;
+  background-color: #f5f5f5;
+  border-radius: 10px;
+}
+.card i {
+  cursor: pointer;
+}
+.card {
+  transition: all 0.5s;
+}
+.card i {
+  margin-right: 4px;
+}
+.flash {
+  cursor: pointer;
+  background-color: #1faa596b;
+  border: 0;
+  box-shadow: 2px 0 10px rgb(0 0 0 / 10%);
+  animation: flash 0.4s cubic-bezier(1, 0, 0, 1);
+}
+.accordion-header-theme {
+  background-color:var(--header-bg-color);
+  border: 0;
+}
+.fa-minus-circle {
+  font-size: 14px;
+}
+@keyframes flash {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.button-theme {
+  background-color: var(--button-bg-color);
+  border-collapse: var(--button-bg-color);
+  color:var(--button-text-color);;
+  border: 0;
+}
+.slight-left-margin {
+  margin-left: 2px;
+}
+.theme-color{
+  color: var(--header-text-color);
+}
+</style>
+<script>
+import notificationMixins from "../../../../mixins/notificationMixins";
+import {
+  ifSpaceExists,
+  isEmpty,
+  isValidURL,
+  truncate,
+  isFloat,
+} from "../../../../mixins/fieldValidationMixin";
+import Messages from "../../../../utils/messages/admin/en";
+import config from "../../../../config"
+import HfButtons from "../../../elements/HfButtons.vue"
+import EventBus from '../../../../eventBus';
+import HfSelectDropDown from "../../../elements/HfSelectDropDown.vue"
+import validator from 'validator';
+import { codemirror } from "vue-codemirror"
+// require styles
+import "codemirror/addon/lint/lint.css";
+import "codemirror/lib/codemirror.css";
+import "codemirror/mode/javascript/javascript";
+import "codemirror/addon/lint/lint";
+import "codemirror/addon/lint/json-lint";
+import "codemirror/keymap/sublime";
+import jsonlint from "jsonlint";
+import { JSHINT } from "jshint";
+window.JSHINT = JSHINT;
+window.jsonlint = jsonlint;
+export default {
+  name: "CustomAPIEventActionConfig",
+  components: { codemirror,HfButtons, HfSelectDropDown},
+  filters: {
+    pretty: function (value) {
+      return JSON.stringify(JSON.parse(value), null, 2);
+    },
+  },
+  props: {
+    eventActionType: {
+      type: String,
+    },
+    eventActionList: {
+      type: Array,
+      required: true,
+    },
+    // options: {
+    //   type: Array,
+    // },
+  },
+  computed: {
+      buttonThemeCss() {
+      return {
+        '--button-bg-color': config.app.buttonBgColor,
+        '--button-text-color':config.app.buttonTextColor
+      }
+     },
+      headerThemeCss(){
+    return{
+      '--header-bg-color': config.app.headerBGColor,
+      '--header-text-color':config.app.headerTextColor
+      }
+  },
+   codemirror() {
+      return this.$refs.cmEditor.codemirror;
+    },
+  },
+  data() {
+    return {
+      cmOptions: {
+        // codemirror options
+
+        styleActiveLine: true,
+        lineNumbers: true,
+        line: true,
+        mode: "application/json",
+        gutters: ["CodeMirror-lint-markers"],
+        lineWrapping: true,
+        theme: "default",
+        lint: true,
+        collapseIdentical: true,
+
+        keyMap: "sublime",
+        // more codemirror options,
+      },
+      attrFlash:null,
+      selectedId:null,
+      showAttribute:false,
+      isAdd:true,
+      attrCounter:0,      
+      visible:false,
+      counter:0,
+      isGet:false,
+      isPost:false,
+      isBoolean:false,
+      isNumber:false,
+      appName: config.appName,
+      attributeFieldTypeOption:[
+        { text: "Return Type", value: null },
+        { text: "boolean", value: "BOOLEAN" },
+        { text: "string", value: "STRING" },
+        { text: "integer", value: "NUMBER" },
+        { text: "float", value: "FLOAT" },
+      ],
+      booleanCondition:[
+        { text: "Boolean Type", value: null },
+        { text: "True", value: true },
+        { text: "False", value: false },
+      ],
+      allCondition: [
+        { text: "Select Method", value: null },
+        { text: "GET", value: "GET" },
+        { text: "POST", value: "POST" },
+      ],
+      returnTypeOption:[
+        { text: "Return Type", value: null },
+        { text: "boolean", value: "BOOLEAN" },
+        { text: "string", value: "STRING" },
+        { text: "integer", value: "NUMBER" },
+        { text: "float", value: "FLOAT" },
+        { text: "object", value: "OBJECT" },
+      ],
+      condtionOption:[
+        { text: "Condition", value: null },
+        { text: "===", value: "===" },
+        { text: "<", value: "<" },
+        { text: ">", value: ">" },
+        { text: ">=", value: ">=" },
+        { text: "<=", value: "<=" },
+      ],      
+      flash: null,
+      isCreate: true,
+      selectedAttrId:null,
+      currentSelectedId: 0, 
+      apiData:{
+        apiEndPoint: "",
+        attributes:[],
+        header:"",
+        apiMethod:null,
+        returnType:null,
+        condition:null,
+        conditionValue:null
+      },
+      attributeData:{
+        fieldName:"",
+        fieldType:null,
+        fieldPlaceHolder:""
+      },
+      selected: {
+        type:null,  
+        title: "",
+        placeHolder:"",
+        isManadatory: true,
+        score: 10,
+        id: "",
+        slug: "",
+        value:""
+      },
+      project:{},
+      hfTgBotId: this.$config.verifierBot.TELEGRAM,
+    };
+  },
+  async mounted() {
+    this.$root.$on("callClearFromProject", () => {
+      this.clearSelected();
+      this.counter = 0
+    });
+     EventBus.$on("sendProject", (project) => {
+      this.project = {...project}
+    });
+  },
+  methods: {
+    addAttributesToBox() {
+      let isValid = this.handleValidation()
+      if(isValid) {
+      this.attrCounter +=1
+      this.attributeData['id'] = this.attrCounter  
+      const trimFieldName = this.attributeData.fieldName.trim()
+      this.attributeData.fieldName = trimFieldName
+      this.apiData.attributes.push(this.attributeData)
+      this.clearAttributeData()
+      }
+    },
+    handleClick(id) {
+      this.attrFlash = id
+      const found = this.apiData.attributes.find((x)=>x.id === id)
+      let updateData = found
+      this.selectedAttrId = id
+      this.attributeData = { ...updateData}      
+      this.isAdd = false
+    },
+    updateAttributeData() {
+      let isValid = this.handleValidation()
+      if(isValid) {
+      let obj = {
+        fieldName: this.attributeData.fieldName.trim(),
+        fieldType: this.attributeData.fieldType,
+        fieldPlaceHolder: this.attributeData.fieldPlaceHolder,
+        id: this.selectedAttrId
+      }
+      const indexToUpdate = this.apiData.attributes.findIndex((x)=>x.id === this.selectedAttrId)
+      if(indexToUpdate > -1){
+      this.apiData.attributes[indexToUpdate] = obj
+      this.clearAttributeData()
+      this.isAdd = true
+      }
+      }
+      
+    },
+    deleteAttribute() {
+      let id = this.selectedAttrId
+      const attrIndex = this.apiData.attributes.findIndex((x)=> x.id === id)
+      if(attrIndex > -1) {
+        this.apiData.attributes.splice(attrIndex,1)
+      }
+       this.clearAttributeData()
+       this.isAdd = true
+    },
+    handleValidation() {
+      let isValid = true
+      if(isEmpty(this.attributeData.fieldName)) {
+        isValid = false
+        return this.notifyErr('Enter Field Name')
+      } else if (isValidURL(this.attributeData.fieldName)) {
+        isValid = false
+        return this.notifyErr('Enter Valid Field Name')
+      } else if (ifSpaceExists(this.attributeData.fieldName)) {        
+        isValid = false
+        return this.notifyErr('Field name should not have space')
+      } 
+      // else if(this.isPresent()) {
+      //   isValid = false
+      //   return this.notifyErr('Attribute with duplicate Field Name are not allowed')
+      // } 
+      else if(!this.attributeData.fieldType) {
+        isValid = false
+        return this.notifyErr('Select Field Type')
+      }
+      return isValid
+    },
+    // isPresent(){
+    //    const element = this.apiData.attributes.find((value) => {
+    //         return value.fieldName === this.attributeData.fieldName;
+    //     });
+    //     return typeof element === "undefined" ? false : true;
+    
+    // },
+    clearAttributeData() {
+      this.selectedAttrId = null
+      this.attrFlash = null
+      this.attributeData = {
+        fieldName:"",        
+        placeHolder:"",
+        fieldType:null
+      }
+    },
+    inputBooleanCondtion(e) {      
+      this.apiData.conditionValue = e
+    },
+    inputCondtion(e){
+      this.apiData.condition = e
+    },
+    inputReturnType(e) {
+      switch(e){
+        case "BOOLEAN": {
+          this.apiData.conditionValue = null
+          this.isBoolean = true          
+          this.condtionOption =[
+        { text: "Condition", value: null },
+        { text: "===", value: "===" },
+        ]
+        break;
+        }
+        case "NUMBER":
+        case "FLOAT":{
+          this.isBoolean = false
+          this.isNumber = true
+          this.condtionOption=[
+            { text: "Condition", value: null },
+            { text: "===", value: "===" },
+            { text: "<", value: "<" },
+            { text: ">", value: ">" },
+            { text: ">=", value: ">=" },
+            { text: "<=", value: "<=" },
+          ]
+        }
+        break;
+        case "STRING":{
+          this.isBoolean = false
+          this.isNumber = false
+          this.condtionOption=[
+            { text: "Condition", value: null },
+            { text: "===", value: "===" },
+          ]
+        }
+        case "OBJECT":{          
+          this.isBoolean = false
+          this.isNumber = false
+          this.condtionOption=[
+            { text: "Condition", value: null },
+            { text: "===", value: "===" },            
+          ]
+        }
+        break;
+        default:{
+          this.isBoolean = false
+          this.isNumber = false
+          this.condtionOption=[
+            { text: "Condition", value: null },
+            { text: "===", value: "===" },
+            { text: "<", value: "<" },
+            { text: ">", value: ">" },
+            { text: ">=", value: ">=" },
+            { text: "<=", value: "<=" },
+          ]
+        }
+      }
+      this.apiData.returnType = e
+    },
+    inputMethod(e){
+      if(e === "GET") {
+        this.selected.type = "CUSTOM_API_GET"
+        this.showAttribute = true
+        this.isGet = true
+        this.isPost = false
+      } else if(e === "POST") {
+        this.selected.type = "CUSTOM_API_POST"
+        this.showAttribute = true
+        this.isGet = false
+        this.isPost = true
+      } else{
+        this.selected.type = null
+        this.showAttribute = false
+        this.isGet = false
+        this.isPost = false
+      }
+      this.apiData.apiMethod = e
+    },
+    clearSelected() {
+      this.visible = false
+      this.isAdd = true
+      this.isGet = false,
+      this.isPost = false,
+      this.isBoolean = false,
+      this.isNumber = false,
+      this.apiData = {
+        apiEndPoint: "",      
+        header:"",
+        attributes:[],
+        apiMethod:null,
+        returnType:null,
+        condition:null,
+        conditionValue:null
+      }
+      this.flash = null;
+      this.isCreate = true;
+      this.selected = {
+        type:null,  
+        title: "",
+        placeHolder:"",
+        isManadatory: true,
+        score: 10,
+        id: "",
+        slug: "",
+        value:""
+      };
+    },
+    handleEventActionValidation() {
+      let isvalid = true;
+
+      //////
+      //// WARNINGS: This is worst way of handeling validation
+      //// You should return or break the moment first error occured
+      //// But here you are checking all validation every time - waste of time!
+      ////////////
+          if(this.project.projectStatus ==false){
+            isvalid = false;
+            return this.notifyErr(Messages.EVENTS.EVENT_CLOSED)
+          }
+         if (isEmpty(this.selected.title)) {
+            isvalid = false;
+            this.notifyErr(Messages.EVENTS.ACTIONS.EMPTY_TITLE);
+          } else if(isEmpty(this.apiData.apiEndPoint)) {
+            isvalid = false;
+            this.notifyErr('Api Endpoint should not be empty');
+          } else if (!this.apiData.apiEndPoint.includes('http://localhost') && !validator.isURL(this.apiData.apiEndPoint)) {
+            isvalid = false;
+            this.notifyErr('enter valid endpoint');
+          } else if (this.apiData.header!=="" && !this.isValidJson(this.apiData.header)) {
+            isvalid = false;
+            this.notifyErr("Enter header in JSON format");
+          } else if (this.apiData.apiMethod === null) {
+            isvalid = false;
+            this.notifyErr('Select API Method')
+          } else if(this.apiData.apiMethod !== null && !this.apiData.attributes.length) {
+            isvalid = false
+            return this.notifyErr('Please Add atleast One Attribute in Field configurations')
+          } else if (this.apiData.returnType === null) {
+            isvalid = false;
+            this.notifyErr('Select Return Type')
+          } else if(this.apiData.condition === null) {
+              isvalid = false;
+              this.notifyErr('Select Condition')
+            } else if (this.apiData.conditionValue === null || this.apiData.conditionValue === "") {
+              isvalid = false;
+              this.notifyErr('Enter a Valid Condition value')
+            } else if(this.apiData.returnType !== null) {
+            switch (this.apiData.returnType) {
+              case "NUMBER":
+              if(!Number.isInteger(parseFloat((this.apiData.conditionValue)))) {
+                  isvalid = false
+                  return this.notifyErr('Enter Integer value')
+                }
+                break;
+              case "FLOAT":
+                if(!isFloat(this.apiData.conditionValue)) {
+                  isvalid = false
+                  return this.notifyErr('Enter Float value')
+                }
+                break;
+              default:
+                break;
+            }
+          }
+      return isvalid;
+    },
+    isValidJson(input){
+      try {
+        JSON.parse(input);
+    } catch (e) {
+        return false;
+    }
+    return true;
+    },
+    handleEventActionAdd() {
+      // Code to Add an Action
+      let isvalid = this.handleEventActionValidation();
+      if (isvalid) {  
+        this.counter +=1
+        this.selected.value = JSON.stringify(this.apiData);     
+        this.selected["id"] = this.counter
+        this.eventActionList.push(this.selected);
+        this.$emit("updateEventActions", {
+          type: "ADD",
+          data: this.selected,
+        });
+        EventBus.$emit("resetOption",this.apiData.condition);
+        EventBus.$emit("resetOption",this.apiData.returnType);
+        EventBus.$emit("resetOption",this.apiData.apiMethod);
+        if(this.apiData.returnType === "BOOLEAN") {
+        this.isBoolean = true
+        EventBus.$emit("resetOption",this.apiData.conditionValue);
+        }
+        this.clearSelected();
+      }
+    },
+    handleEventActionDelete() {
+      // Code to delete an Action
+      const actionToDelete = this.eventActionList[this.currentSelectedId];
+      this.eventActionList.splice(this.currentSelectedId, 1);
+      this.$emit("updateEventActions", {
+        type: "DELETE",
+        data: actionToDelete,
+      });
+        EventBus.$emit("resetOption",this.apiData.condition);
+        EventBus.$emit("resetOption",this.apiData.returnType);
+        EventBus.$emit("resetOption",this.apiData.apiMethod);
+        if(this.apiData.returnType === "BOOLEAN") {
+        this.isBoolean = true
+        EventBus.$emit("resetOption",this.apiData.conditionValue);
+        } 
+      this.clearSelected();
+      this.isCreate = true;
+    },
+    handleEventActionUpdate() {
+      // Code to update an Action
+      let isvalid = this.handleEventActionValidation();
+      if (isvalid) {
+        this.selected.value = JSON.stringify(this.apiData);
+        this.eventActionList[this.currentSelectedId] = this.selected;
+        this.$emit("updateEventActions", {
+          type: "UPDATE",
+          data: this.selected,
+        });
+        EventBus.$emit("resetOption",this.apiData.condition);
+        EventBus.$emit("resetOption",this.apiData.returnType);
+        EventBus.$emit("resetOption",this.apiData.apiMethod);
+        if(this.apiData.returnType === "BOOLEAN") {
+        this.isBoolean = true
+        EventBus.$emit("resetOption",this.apiData.conditionValue);
+        }        
+        this.clearSelected();
+        this.isCreate = true;
+      }
+    },
+
+    handleEventActionClick(idx) {
+      this.clearSelected()
+      this.clearAttributeData()
+      this.isCreate = false;
+      // Code to update an Action
+      this.flash = idx;
+      let updateData = this.eventActionList[idx];
+      this.currentSelectedId = idx;
+      this.selected = updateData;
+      this.apiData = { ...JSON.parse(this.selected.value)}
+      EventBus.$emit("setOption",this.apiData.apiMethod);
+      EventBus.$emit("setOption",this.apiData.returnType);
+      EventBus.$emit("setOption",this.apiData.condition);
+      if(this.apiData.returnType === "BOOLEAN") {
+        this.isBoolean = true
+        EventBus.$emit("setOption",this.apiData.conditionValue);
+      }
+    },
+
+    truncate1(str, number) {
+      return truncate(str, number);
+    },
+  },
+
+  mixins: [notificationMixins],
+};
+</script>
diff --git a/src/components/admin/createProjectSlider/components/PreviewConfig.vue b/src/components/admin/createProjectSlider/components/PreviewConfig.vue
index 1ab059b4..5e1df5cd 100644
--- a/src/components/admin/createProjectSlider/components/PreviewConfig.vue
+++ b/src/components/admin/createProjectSlider/components/PreviewConfig.vue
@@ -271,6 +271,12 @@ cursor:default !important
                     src="../../../../assets/cosmos-2.svg"
                     v-if="action.type.includes('BLOCKCHAIN_COSMOS')"
                     height="20px"
+                  />                
+                   <img
+                    style="padding-right: 5px"
+                    src="../../../../assets/filled-rest-api-50.png"
+                    v-if="action.type.includes('CUSTOM_API')"
+                    height="20px"
                   />
                 </span>
               </b-col>
diff --git a/src/components/participant/Action.vue b/src/components/participant/Action.vue
index 99f04361..ca9e7185 100644
--- a/src/components/participant/Action.vue
+++ b/src/components/participant/Action.vue
@@ -75,7 +75,7 @@ import Messsages from "../../utils/messages/participants/en";
 import EthereumNetwork from "./ActionInputs/EthereumNetwork.vue";
 import MaticNetwork from './ActionInputs/MaticNetwork.vue';
 import BinanceNetwork from './ActionInputs/BinanceNetwork.vue';
-
+import CustomApi from "./ActionInputs/CustomApi.vue";
 export default {
   name: "Action",
   props: {
@@ -143,6 +143,7 @@ export default {
     MoonriverErc721,
     PushNotification,
     SumsubKyc,
+    CustomApi,
     RecaptchaToken: "",
   },
   mounted() {
diff --git a/src/components/participant/ActionInputs/CustomApi.vue b/src/components/participant/ActionInputs/CustomApi.vue
new file mode 100644
index 00000000..e151a5e2
--- /dev/null
+++ b/src/components/participant/ActionInputs/CustomApi.vue
@@ -0,0 +1,203 @@
+<template>
+  <b-card no-body class="action-wrap">
+    <b-card-header :class="visible ? null : 'collapsed'" :aria-expanded="visible ? 'true' : 'false'"
+      :aria-controls="`collapse-${idValue}`" @click="visible = !visible">
+      <b-row>
+        <b-col cols="1" sm="1" md="1">
+          <img src="../../../assets/filled-rest-api-50.png" height="25px" />
+          <!-- <img src="../../../assets/metamask.svg" height="25px" /> -->
+        </b-col>
+        <b-col cols="9" sm="9" class="text-left" md="9">
+          <div class="text text-capitalize">{{ data.title }}</div>
+        </b-col>
+
+        <b-col cols="2" sm="2" md="2">
+          <b-badge class="btn-score" :style="buttonThemeCss" @click="authToken && update()" v-if="!done">
+           <i class="fa fa-plus" aria-hidden="true"></i>
+            {{ data.score }}
+          </b-badge>
+          <img class="check-mark" src="../../../assets/check-circle-fill.svg" height="25px" v-if="done" />
+        </b-col>
+      </b-row>
+    </b-card-header>
+    <b-collapse :id="`collapse-${idValue}`" v-model="visible">
+      <b-card-body class="user-details">
+        <b-row>
+          <b-col cols="12" sm="12" md="12">
+            <div class="row g-3 align-items-center" v-for="(param, index) in values" v-bind:key="index">
+              <div class="col-lg-12 col-md-12">
+                <div class="mt-3" v-if="param.fieldType !=='BOOLEAN'">                  
+                  <b-form-input                            
+                  id="title"
+                  v-model="param.fieldValue"
+                  :required="true"
+                  class="form-control w-100"
+                  :disabled="done"
+                  :placeholder="param.fieldPlaceHolder ? `${param.fieldPlaceHolder}` :`${param.fieldName}`"
+                  ></b-form-input>
+                </div>
+                <div class="mt-3" v-if="param.fieldType ==='BOOLEAN'">
+                  <hf-select-drop-down
+                  v-if="!done"               
+                  :options="booleanOptions"
+                  @selected=" e =>param.fieldValue = e"                  
+                  ></hf-select-drop-down>
+                   <b-form-input
+                  v-else                  
+                  v-model="param.fieldValue"
+                  :disabled="true"                 
+                  ></b-form-input>
+                </div>
+              </div>
+            </div>
+          </b-col>
+        </b-row>  
+        <b-row v-if="!done">
+          <b-col cols="12" sm="12" md="12">
+            <button class="btn btn-link center" @click="update()">Continue</button>
+          </b-col>
+        </b-row>
+      </b-card-body>
+    </b-collapse>
+  </b-card>
+</template>
+<style scoped>
+.center{
+  display: block; margin-left: auto;margin-right: auto
+}
+</style>
+
+<script>
+
+import eventBus from "../../../eventBus.js";
+import notificationMixins from "../../../mixins/notificationMixins";
+import Messages from "../../../utils/messages/participants/en";
+import {isFloat} from "../../../mixins/fieldValidationMixin"
+import ErrorMessage from "../ErrorMessage.vue";
+import HfSelectDropDown from "../../elements/HfSelectDropDown.vue"
+export default {
+  name: "CustomApi",
+  props: {
+    idValue: {
+      required: true,
+    },
+    data: {
+      required: true,
+    },
+    authToken: {
+      required: true
+    },
+    done: {
+      required: true,
+    },
+    themeData: {
+      required: true,
+    }
+  },
+  components: {
+    ErrorMessage,
+    HfSelectDropDown
+  },
+computed:{
+ buttonThemeCss() {
+      return {
+        '--button-bg-color': this.themeData.buttonBGColor,
+        '--button-text-color': this.themeData.buttonTextColor
+      }
+     }
+  },
+  data() {
+    return {
+      booleanOptions:[
+      { text: "Select True OR False", value: null },
+      { text: "True", value: true },
+      { text: "False", value: false },
+      ],
+      visible: false,
+      values:[],
+      value:{
+      fieldName: "",
+      fieldPlaceHolder: "",
+      fieldType: "",      
+    }
+  }
+},
+   watch: {
+        data:{
+          deep:true,
+          handler: function(newValue,oldValue) {
+            this.values = newValue.value
+          }
+        }
+    },
+  mounted() {  
+    if(this.data.value){
+      this.values = this.data.value     
+      if(!this.done){
+        this.addValueField()
+      }
+    }
+    eventBus.$on(`disableInput${this.data._id}`, this.disableInput);
+  },
+  methods: {
+    addValueField(){      
+    for(let index = 0; index<this.values.length; index++) {
+      if(this.values.length !==0){
+        this.values[index]['fieldValue']= null
+        if(this.values[index].fieldType ==='BOOLEAN'){
+          this.booleanOptions=[
+          { text: `${this.values[index].fieldPlaceHolder}`, value: null },
+          { text: "True", value: true },
+          { text: "False", value: false },
+          ]
+        }
+      }      
+    }
+    },
+    async update() { 
+      if (this.values.length !==0) {
+    try{  
+      this.values.forEach(attribute => {
+        switch (attribute.fieldType) {
+          case "STRING":            
+            if(attribute.fieldValue === null || attribute.fieldValue === "") {                                         
+              throw new Error(`Please fill ${attribute.fieldName} field`)              
+            }
+            break;
+          case "NUMBER":
+            if(attribute.fieldValue === null || attribute.fieldValue === "") {
+              throw new Error(`Please fill ${attribute.fieldName} field`)
+            } else if(!Number.isInteger(parseFloat((attribute.fieldValue)))) {                  
+              throw new Error('Enter Integer value')
+            }
+            break;
+          case "FLOAT":
+            if(attribute.fieldValue === null || attribute.fieldValue === "") {
+              throw new Error(`Please fill ${attribute.fieldName} field`)
+            } else if(!isFloat(attribute.fieldValue)) {                  
+              throw new Error('Enter Float value')
+            }
+            break;
+          case "BOOLEAN":            
+            if(attribute.fieldValue === null) {
+              throw new Error(`Please fill ${attribute.fieldName} field`)
+            }
+            break;
+          default:
+            break;
+        }        
+      }      
+      );
+      this.$emit("input",JSON.stringify(this.values));
+      } catch(error) {       
+        return this.notifyErr(error)
+      }
+      }        
+    },
+    disableInput(data) {
+     this.data.isDone = data;
+    },
+  },
+  mixins: [notificationMixins],
+};
+</script>
diff --git a/src/mixins/fieldValidationMixin.js b/src/mixins/fieldValidationMixin.js
index d345888c..c4dc64e8 100644
--- a/src/mixins/fieldValidationMixin.js
+++ b/src/mixins/fieldValidationMixin.js
@@ -133,7 +133,8 @@ export function checkValue(arr, prop) {
 
 }
 export function isFloat(n) {
-    if(n === n && n % 1 !== 0){
+    const parsedNumber = parseFloat(n)
+    if(parsedNumber === parsedNumber && parsedNumber % 1 !== 0){
         return true;
     }else{
         return false;
@@ -160,4 +161,13 @@ export function urlSanitizer(url, endsWith) {
         default:
             return url;
     }
-}
\ No newline at end of file
+}
+
+export function ifSpaceExists(str) {
+    str= str.trim()
+    str = str.split(' ')
+    if (str.length > 1) {
+       return true
+    }
+    else return false 
+  }
\ No newline at end of file
diff --git a/src/views/participant/Event.vue b/src/views/participant/Event.vue
index f1565ea2..1b758de7 100644
--- a/src/views/participant/Event.vue
+++ b/src/views/participant/Event.vue
@@ -358,16 +358,43 @@ export default {
               (ea.type === "MOONRIVER_ERC20") ||
               (ea.type === "MOONRIVER_ERC721") ||
               (ea.type === "MOON_ERC20") ||
-              (ea.type === "MOON_ERC721")
-            ){
+              (ea.type === "MOON_ERC721") ||
+              (ea.type === "CUSTOM_API_GET") ||
+              (ea.type === "CUSTOM_API_POST")
+            ){  
                 const parsedVal = JSON.parse(ea.value)
                 ea.value = parsedVal;
             }
             return ea
-          })
-
-        } else {
-            this.eventActionsToShow = eventActions;
+          })        
+        } else {                   
+            const temp = eventActions.map((x)=>{
+              if((x.type === "ETHEREUM_NETWORK") ||
+              (x.type === "BINANCE_NETWORK") ||
+              (x.type === "MATIC_NETWORK") ||
+              (x.type === "ETHEREUM_ERC20") ||
+              (x.type === "ETHEREUM_ERC721") ||
+              (x.type === "MATIC_ERC20") ||
+              (x.type === "MATIC_ERC721") ||
+              (x.type === "BINANCE_ERC20") ||
+              (x.type === "BINANCE_ERC721") ||
+              (x.type === "REEF_ERC20") ||
+              (x.type === "REEF_ERC721") ||
+              (x.type === "MOONBEAM_ERC20") ||
+              (x.type === "MOONBEAM_ERC721") ||
+              (x.type === "MOONRIVER_ERC20") ||
+              (x.type === "MOONRIVER_ERC721") ||
+              (x.type === "MOON_ERC20") ||
+              (x.type === "MOON_ERC721") ||
+              (x.type === "CUSTOM_API_GET") ||
+              (x.type === "CUSTOM_API_POST")
+              ){
+                const parsedVal = JSON.parse(x.value)
+                x.value = parsedVal;
+              }
+              return x
+            })
+            this.eventActionsToShow = temp;
         }
       } else { 
         this.eventActionsToShow = this.eventData.actions;