diff --git a/frontend/src/components/Editor/EditorComponents/Editor.tsx b/frontend/src/components/Editor/EditorComponents/Editor.tsx
index 64fec42d..79fa2a76 100644
--- a/frontend/src/components/Editor/EditorComponents/Editor.tsx
+++ b/frontend/src/components/Editor/EditorComponents/Editor.tsx
@@ -144,13 +144,13 @@ const Editor: React.FC = (): ReactElement => {
     const fetchData = async () => {
       try {
         const response = await fetchWizardData('');
-        const { wizardContractFilter, wizardMethods } = response;
+        const { wizardContractFilter, wizardMethods, wizardEvents } = response;
 
         if (wizardContractFilter === 'noFilter') {
           return;
         }
 
-        const codeResponse = await generateCode(wizardContractFilter, wizardMethods);
+        const codeResponse = await generateCode(wizardContractFilter, wizardMethods, wizardEvents);
         setIndexingCode(codeResponse.jsCode);
         setSchema(codeResponse.sqlCode);
       } catch (error: unknown) {
diff --git a/frontend/src/components/Editor/EditorComponents/GenerateCode.tsx b/frontend/src/components/Editor/EditorComponents/GenerateCode.tsx
deleted file mode 100644
index bf41fedb..00000000
--- a/frontend/src/components/Editor/EditorComponents/GenerateCode.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-//Dummy component
-import { useState } from 'react';
-
-type Schema = {
-  type: string;
-  properties?: Record<string, { type: string }>;
-  required?: string[];
-};
-
-type Method = {
-  method_name: string;
-  schema: Schema;
-};
-
-type Event = {
-  event_name: string;
-  schema: Schema;
-};
-
-const GenerateCode = () => {
-  const [contractFilter, setContractFilter] = useState<string>('');
-  const [selectedMethods, setSelectedMethods] = useState<Method[]>([]);
-  const [selectedEvents, setSelectedEvents] = useState<Event[]>([]);
-  const [generatedCode, setGeneratedCode] = useState<{ jsCode: string; sqlCode: string }>({ jsCode: '', sqlCode: '' });
-
-  const handleGenerateCode = async () => {
-    const response = await fetch('/api/generateCode', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ contractFilter, selectedMethods, selectedEvents }),
-    });
-    const data = await response.json();
-    setGeneratedCode(data);
-  };
-
-  const handleMethodChange = (index: number, field: keyof Method, value: string) => {
-    const updatedMethods = [...selectedMethods];
-    if (field === 'schema') {
-      try {
-        updatedMethods[index] = { ...updatedMethods[index], schema: JSON.parse(value) };
-      } catch (e) {
-        console.error('Invalid JSON format');
-      }
-    } else {
-      updatedMethods[index] = { ...updatedMethods[index], [field]: value };
-    }
-    setSelectedMethods(updatedMethods);
-  };
-
-  const handleEventChange = (index: number, field: keyof Event, value: string) => {
-    const updatedEvents = [...selectedEvents];
-    if (field === 'schema') {
-      try {
-        updatedEvents[index] = { ...updatedEvents[index], schema: JSON.parse(value) };
-      } catch (e) {
-        console.error('Invalid JSON format');
-      }
-    } else {
-      updatedEvents[index] = { ...updatedEvents[index], [field]: value };
-    }
-    setSelectedEvents(updatedEvents);
-  };
-
-  const addMethod = () => {
-    setSelectedMethods([...selectedMethods, { method_name: '', schema: { type: 'object' } }]);
-  };
-
-  const addEvent = () => {
-    setSelectedEvents([...selectedEvents, { event_name: '', schema: { type: 'object' } }]);
-  };
-
-  return (
-    <div className="min-h-screen bg-gray-100 p-6">
-      <div className="max-w-3xl mx-auto bg-white p-8 shadow-lg rounded-lg">
-        <h1 className="text-3xl font-bold mb-6">Generate Code</h1>
-
-        <div className="mb-4">
-          <input
-            type="text"
-            placeholder="Contract Filter"
-            value={contractFilter}
-            onChange={(e) => setContractFilter(e.target.value)}
-            className="w-full p-3 border border-gray-300 rounded-md"
-          />
-        </div>
-
-        <div className="mb-4">
-          <h2 className="text-xl font-semibold mb-2">Selected Methods</h2>
-          {selectedMethods.map((method, index) => (
-            <div key={index} className="mb-4">
-              <input
-                type="text"
-                placeholder="Method Name"
-                value={method.method_name}
-                onChange={(e) => handleMethodChange(index, 'method_name', e.target.value)}
-                className="w-full p-3 border border-gray-300 rounded-md mb-2"
-              />
-              <textarea
-                placeholder="Schema (JSON format)"
-                value={JSON.stringify(method.schema, null, 2)}
-                onChange={(e) => handleMethodChange(index, 'schema', e.target.value)}
-                className="w-full p-3 border border-gray-300 rounded-md"
-              />
-            </div>
-          ))}
-          <button
-            onClick={addMethod}
-            className="w-full bg-green-500 text-white py-2 rounded-md hover:bg-green-600 transition duration-200"
-          >
-            Add Method
-          </button>
-        </div>
-
-        <div className="mb-4">
-          <h2 className="text-xl font-semibold mb-2">Selected Events</h2>
-          {selectedEvents.map((event, index) => (
-            <div key={index} className="mb-4">
-              <input
-                type="text"
-                placeholder="Event Name"
-                value={event.event_name}
-                onChange={(e) => handleEventChange(index, 'event_name', e.target.value)}
-                className="w-full p-3 border border-gray-300 rounded-md mb-2"
-              />
-              <textarea
-                placeholder="Schema (JSON format)"
-                value={JSON.stringify(event.schema, null, 2)}
-                onChange={(e) => handleEventChange(index, 'schema', e.target.value)}
-                className="w-full p-3 border border-gray-300 rounded-md"
-              />
-            </div>
-          ))}
-          <button
-            onClick={addEvent}
-            className="w-full bg-green-500 text-white py-2 rounded-md hover:bg-green-600 transition duration-200"
-          >
-            Add Event
-          </button>
-        </div>
-
-        <button
-          onClick={handleGenerateCode}
-          className="w-full bg-blue-500 text-white py-3 rounded-md hover:bg-blue-600 transition duration-200"
-        >
-          Generate Code
-        </button>
-
-        <div className="mt-6">
-          <h2 className="text-2xl font-semibold mb-4">Generated JavaScript Code</h2>
-          <pre className="bg-gray-200 p-4 rounded-md whitespace-pre-wrap">{generatedCode.jsCode}</pre>
-        </div>
-
-        <div className="mt-6">
-          <h2 className="text-2xl font-semibold mb-4">Generated SQL Code</h2>
-          <pre className="bg-gray-200 p-4 rounded-md whitespace-pre-wrap">{generatedCode.sqlCode}</pre>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default GenerateCode;
diff --git a/frontend/src/pages/api/generateCode.ts b/frontend/src/pages/api/generateCode.ts
index cdde47b8..97c36bbd 100644
--- a/frontend/src/pages/api/generateCode.ts
+++ b/frontend/src/pages/api/generateCode.ts
@@ -38,8 +38,8 @@ export const validateRequestBody = (body: any): body is RequestBody => {
     isStringOrArray(body.contractFilter) &&
     Array.isArray(body.selectedMethods) &&
     body.selectedMethods.every(isValidMethod)
-    // && Array.isArray(body.selectedEvents) &&
-    // body.selectedEvents.every(isValidEvent)
+    && Array.isArray(body.selectedEvents) &&
+    body.selectedEvents.every(isValidEvent)
   );
 };
 
@@ -59,7 +59,6 @@ export default function handler(req: NextApiRequest, res: NextApiResponse): void
   res.setHeader('Access-Control-Allow-Origin', '*');
   res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
   res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
-
   if (req.method === 'OPTIONS') {
     res.status(200).end();
     return;
@@ -78,7 +77,6 @@ export default function handler(req: NextApiRequest, res: NextApiResponse): void
   }
 
   const { contractFilter, selectedMethods, selectedEvents } = req.body;
-
   const filterString = Array.isArray(contractFilter) ? contractFilter.join(', ') : contractFilter;
 
   const generator = new WizardCodeGenerator(filterString, selectedMethods, selectedEvents);
diff --git a/frontend/src/pages/query-api-editor/index.js b/frontend/src/pages/query-api-editor/index.js
index ec622a31..603bf514 100644
--- a/frontend/src/pages/query-api-editor/index.js
+++ b/frontend/src/pages/query-api-editor/index.js
@@ -3,7 +3,6 @@ import React, { useContext, useEffect } from 'react';
 import { Alert } from 'react-bootstrap';
 
 import Editor from '@/components/Editor/EditorComponents/Editor';
-import GenerateCode from '@/components/Editor/EditorComponents/GenerateCode';
 import IndexerLogsContainer from '@/components/Logs/LogsViewContainer/IndexerLogsContainer';
 import { IndexerDetailsContext } from '@/contexts/IndexerDetailsContext';
 
@@ -25,10 +24,6 @@ const QueryApiEditorPage = ({ router }) => {
     );
   }
 
-  if (accountId == 'test' && indexerName == 'test') {
-    return <GenerateCode />;
-  }
-
   return showLogsView ? <IndexerLogsContainer /> : <Editor />;
 };
 
diff --git a/frontend/src/test/api/generateCode.test.ts b/frontend/src/test/api/generateCode.test.ts
index b8ccd043..3d86987f 100644
--- a/frontend/src/test/api/generateCode.test.ts
+++ b/frontend/src/test/api/generateCode.test.ts
@@ -23,8 +23,8 @@ const createRequestResponseMocks = (
   };
 };
 
-describe('generateCode API', () => {
-  it('should return generated JS and SQL code for valid input', async () => {
+describe('generateCode API ', () => {
+  it('should return generated JS and SQL code for valid input methods', async () => {
     const { req, res } = createRequestResponseMocks('POST', {
       contractFilter: 'filter',
       selectedMethods: [
@@ -65,6 +65,56 @@ describe('generateCode API', () => {
           },
         },
       ],
+      selectedEvents: [],
+    });
+
+    handler(req, res);
+
+    expect(res._getStatusCode()).toBe(200);
+    const responseData = JSON.parse(res._getData());
+    console.log(responseData);
+  });
+
+  it('should return generated JS and SQL code for valid input events', async () => {
+    const { req, res } = createRequestResponseMocks('POST', {
+      contractFilter: 'filter',
+      selectedMethods: [],
+      selectedEvents: [{
+        event_name: 'register',
+        schema: {
+          type: 'object',
+          properties: {
+            function_name: {
+              type: 'string',
+            },
+            code: {
+              type: 'string',
+            },
+            schema: {
+              type: 'string',
+            },
+            start_block_height: {
+              type: 'integer',
+            },
+            filter_json: {
+              type: 'string',
+            },
+          },
+          required: ['function_name', 'code', 'schema', 'start_block_height', 'filter_json'],
+        },
+      },
+      {
+        event_name: 'remove_indexer_function',
+        schema: {
+          type: 'object',
+          properties: {
+            function_name: {
+              type: 'string',
+            },
+          },
+          required: ['function_name'],
+        },
+      },],
     });
 
     handler(req, res);
@@ -73,6 +123,7 @@ describe('generateCode API', () => {
     const responseData = JSON.parse(res._getData());
     console.log(responseData);
   });
+
   it('should handle empty arrays correctly because I mean maybe they just want something to do with contractName?', async () => {
     const { req, res } = createRequestResponseMocks('POST', {
       contractFilter: 'filter',
diff --git a/frontend/widgets/src/QueryApi.Dashboard.jsx b/frontend/widgets/src/QueryApi.Dashboard.jsx
index 6198e663..73b593ba 100644
--- a/frontend/widgets/src/QueryApi.Dashboard.jsx
+++ b/frontend/widgets/src/QueryApi.Dashboard.jsx
@@ -46,6 +46,7 @@ const [activeTab, setActiveTab] = useState(props.view === "create-new-indexer" ?
 const [activeIndexerTabView, setActiveIndexerTabView] = useState(props.activeIndexerView ?? "editor");
 const [selectedIndexer, setSelectedIndexer] = useState(props.selectedIndexerPath);
 
+const [wizardEvents, setWizardEvents] = useState({});
 const [wizardMethods, setWizardMethods] = useState({});
 const [wizardContractFilter, setWizardContractFilter] = useState('');
 
@@ -109,6 +110,7 @@ return (
               setSelectedIndexer: setSelectedIndexer,
               setWizardContractFilter: setWizardContractFilter,
               setWizardMethods: setWizardMethods,
+              setWizardEvents: setWizardEvents,
             }}
           />
         </Section>
@@ -131,6 +133,7 @@ return (
               path: "create-new-indexer",
               wizardContractFilter: wizardContractFilter,
               wizardMethods: wizardMethods,
+              wizardEvents: wizardEvents,
             }}
           />
         </Section>
diff --git a/frontend/widgets/src/QueryApi.Editor.jsx b/frontend/widgets/src/QueryApi.Editor.jsx
index be383544..bfffc7b2 100644
--- a/frontend/widgets/src/QueryApi.Editor.jsx
+++ b/frontend/widgets/src/QueryApi.Editor.jsx
@@ -4,7 +4,7 @@ const activeView = props.activeView || "editor";
 let accountId = props.accountId || context.accountId;
 let externalAppUrl = `${REPL_EXTERNAL_APP_URL}/${path}?accountId=${accountId}`;
 
-const { wizardContractFilter, wizardMethods } = props;
+const { wizardContractFilter, wizardMethods, wizardEvents } = props;
 
 if (props.indexerName) {
   externalAppUrl += `&indexerName=${props.indexerName}`;
@@ -60,7 +60,8 @@ let deleteIndexer = (request) => {
 const getLaunchpadCode = (request, response) => {
   const wizardContractFilter = wizardContractFilter ?? 'noFilter';
   const wizardMethods = wizardMethods;
-  response(request).send({ wizardContractFilter, wizardMethods });
+  const wizardEvents = wizardEvents;
+  response(request).send({ wizardContractFilter, wizardMethods, wizardEvents });
 }
 
 /**
diff --git a/frontend/widgets/src/QueryApi.Launchpad.jsx b/frontend/widgets/src/QueryApi.Launchpad.jsx
index 737e064d..6b7f75e6 100644
--- a/frontend/widgets/src/QueryApi.Launchpad.jsx
+++ b/frontend/widgets/src/QueryApi.Launchpad.jsx
@@ -1,4 +1,4 @@
-const { setActiveTab, activeTab, setSelectedIndexer, setWizardContractFilter, setWizardMethods } = props;
+const { setActiveTab, activeTab, setSelectedIndexer, setWizardContractFilter, setWizardMethods, setWizardEvents } = props;
 
 const NoQueryContainer = styled.div`
   display: flex;
@@ -28,10 +28,10 @@ const CheckboxContainer = styled.div`
 `;
 
 const CheckboxLabel = styled.label`
+  font-size: 12px;
   display: flex;
   align-items: center;
   cursor: pointer;
-  font-size: 16px;
   margin-bottom: 5px;
 `;
 
@@ -136,14 +136,21 @@ const SubContainerTitle = styled.h2`
   margin-bottom: 6px;
 `;
 
-const MethodsText = styled.div`
+const Metadata = styled.div`
   display: flex;
   align-items: center;
   font-size: 12px;
   margin-bottom: 8px;
 `;
+const MetadataTab = styled.div`
+  cursor: pointer;
+`;
 
-const MethodsSpan = styled.span`
+const MetadataText = styled.span`
+display: inline-block;
+`;
+
+const MetadataIcon = styled.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -199,7 +206,7 @@ scrollbar-color: #888 #f1f1f1;
 -ms-scroll-snap-points-x: snapInterval(0%, 100%);
 `;
 
-const GenerateMethodsButton = styled.button`
+const GenerateButton = styled.button`
   margin-top: 16px;
   width: 100%;
   background-color: #37CD83;
@@ -268,128 +275,6 @@ const SearchButton = styled.button`
   justify-content: center;
 `;
 
-//BOTTOM HALF
-const Divider = styled.div`
-  height: 40px;
-  width: 100%;
-`
-const ExploreIndexersContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%; 
-  width: 100%; 
-`;
-
-const ExploreIndexersHeading = styled.h2`
-  font-family: 'Mona Sans', sans-serif;
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 26px;
-  letter-spacing: 0.015em;
-  text-align: left;
-`;
-
-const ExploreContent = styled.div`
-  width: 745px;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-`
-
-const SearchIndexerContainer = styled.div`
-  display: flex;
-  align-items: center;
-  width: 269px;
-  height: 40px;
-  padding: 8px 12px;
-  gap: 8px;
-  border-radius: 50px;
-  border: 1px solid #E3E3E0;
-  background-color: white;
-`;
-
-const SearchInput = styled.input`
-  flex: 1;
-  border: none;
-  outline: none;
-  font-family: 'Mona Sans', sans-serif;
-  font-weight: 450;
-  font-size: 14px;
-  line-height: 21px;
-  letter-spacing: 2%;
-  &::placeholder {
-    color: #a9a9a9; 
-  }
-`;
-
-const SearchIndexerButton = styled.button`
-  flex:1;  
-  border-radius: 50px;
-  background-color: #f0f0f0;
-  border: none;
-  color: black;
-  padding: 8px 31px;
-  cursor: pointer;
-  font-family: 'Mona Sans', sans-serif;
-  font-weight: 450;
-  font-size: 14px;
-  line-height: 21px;
-  letter-spacing: 2%;
-`;
-
-const MagnifyingGlass = styled.svg`
-  width: 16px;
-  height: 16px;
-`;
-
-const SearchArrow = styled.svg`
-  width: 20px;
-  height: 20px;
-`
-/** TABLE STYLES*/
-const TableContainer = styled.div`
-  width: 745px;
-  margin: 0 auto;
-`;
-
-const Table = styled.table`
-  width: 100%;
-  border-collapse: collapse;
-  border-radius: 8px; 
-  overflow: hidden;
-`;
-
-const TableHeader = styled.thead`
-  background-color: #F0F0F1;
-`;
-
-const TableHeaderCell = styled.th`
-  font-family: 'Mona Sans', sans-serif;
-  font-weight: 450;
-  font-size: 10px;
-  line-height: 14px;
-  letter-spacing: 2%;
-  text-align: left;
-  padding: 8px;
-`;
-
-const TableRow = styled.tr`
-  &:nth-child(even) {
-    background-color: #f9f9f9;
-  }
-`;
-
-const TableCell = styled.td`
-  font-family: 'Mona Sans', sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 21px;
-  letter-spacing: 2%;
-  padding: 8px;
-  text-align: left;
-`;
-
 const LoadingSpinner = () => {
   const spinnerStyle = {
     width: '40px',
@@ -440,80 +325,93 @@ const validateContractId = (accountId) => {
   return true;
 };
 
-const [checkBoxData, setCheckBoxData] = useState([]);
-const [checkboxState, setCheckboxState] = useState(initialCheckboxState);
+const [methodsData, setMethodsData] = useState([]);
+const [checkboxMethods, setCheckboxMethods] = useState({});
 const [methodCount, setMethodCount] = useState(0);
+
+const [eventsData, setEventsData] = useState([]);
+const [checkboxEvents, setCheckboxEvents] = useState({});
+const [eventCount, setEventCount] = useState(0);
+
 const [contractInputMessage, setContractInputMessage] = useState('');
 const [inputValue, setInputValue] = useState('');
 const [loading, setLoading] = useState(false);
 
+const [selectAllEvents, setSelectAllEvents] = useState(true);
+const [selectAllMethods, setSelectAllMethods] = useState(true);
+
+const [tab, setTab] = useState('methods_tab')
 
-const initializeCheckboxState = (data) => {
+const initializeCheckboxState = (data, keyName) => {
   const initialState = {};
-  data.forEach((item) => {
-    initialState[item.method_name] = true;
 
-    if (item.schema.properties) {
-      Object.keys(item.schema.properties).forEach((property) => {
-        initialState[`${item.method_name}::${property}`] = true;
+  data.forEach(item => {
+    initialState[item[keyName]] = true;
+
+    if (item.schema?.properties) {
+      Object.keys(item.schema.properties).forEach(property => {
+        initialState[`${item[keyName]}::${property}`] = true;
       });
     }
   });
+
   return initialState;
 };
 
 useEffect(() => {
-  setCheckboxState(initializeCheckboxState(checkBoxData));
-}, [checkBoxData]);
+  setCheckboxMethods(initializeCheckboxState(methodsData, 'method_name'));
+  setCheckboxEvents(initializeCheckboxState(eventsData, 'event_name'));
+}, [methodsData, eventsData]);
 
 const generateMethods = () => {
-  const filteredData = checkBoxData.map(item => {
-    const parentChecked = checkboxState[item.method_name];
-    if (!item.schema) return null;
-
-    if (!item.schema.properties) {
-      if (parentChecked) {
-        return {
-          method_name: item.method_name,
-          schema: {
-            ...item.schema
+  const filterData = (data, checkboxState, keyName) => {
+    return data
+      .map(item => {
+        const parentChecked = checkboxState[item[keyName]];
+
+        if (!item.schema) return null;
+
+        const properties = item.schema.properties || {};
+
+        const filteredProperties = Object.entries(properties).reduce((acc, [property, details]) => {
+          const childKey = `${item[keyName]}::${property}`;
+          if (checkboxState[childKey]) {
+            acc[property] = details;
           }
-        };
-      }
-      return null;
-    } else {
-      const result = Object.entries(item.schema.properties).reduce((acc, [property, details]) => {
-        const childKey = `${item.method_name}::${property}`;
-        if (checkboxState[childKey]) {
-          acc.filteredProperties[property] = details;
+          return acc;
+        }, {});
+
+        if (parentChecked || Object.keys(filteredProperties).length > 0) {
+          return {
+            [keyName]: item[keyName],
+            schema: {
+              ...item.schema,
+              properties: filteredProperties
+            }
+          };
         }
-        return acc;
-      }, { filteredProperties: {}, shouldReturn: parentChecked });
-
-      if (result.shouldReturn || Object.keys(result.filteredProperties).length > 0) {
-        return {
-          method_name: item.method_name,
-          schema: {
-            ...item.schema,
-            properties: result.filteredProperties
-          }
-        };
-      }
-    }
 
-    return null;
-  }).filter(item => item !== null);
+        return null;
+      })
+      .filter(item => item !== null);
+  };
 
-  const copy = filteredData;
+  const filteredMethods = filterData(methodsData, checkboxMethods, 'method_name');
+  const filteredEvents = filterData(eventsData, checkboxEvents, 'event_name');
   setWizardContractFilter(inputValue)
-  setWizardMethods(copy);
+  setWizardMethods(filteredMethods);
+  setWizardEvents(filteredEvents);
   setSelectedIndexer(null);
   setActiveTab('launch-new-indexer');
 };
 
 const handleFetchCheckboxData = async () => {
-  setCheckBoxData([]);
+  setMethodsData([]);
   setMethodCount(0);
+
+  setEventsData([]);
+  setEventCount(0);
+
   setContractInputMessage('');
 
   if (!validateContractId(inputValue)) {
@@ -547,31 +445,73 @@ const handleFetchCheckboxData = async () => {
         setLoading(false);
         return;
       };
-      setCheckBoxData(data.methods);
+      setMethodsData(data.methods);
       setMethodCount(data.methods.length);
+      setEventsData(data.events);
+      setEventCount(data.events.length);
       setLoading(false);
     }).catch(error => {
       setLoading(false);
       setError('There was an error fetching the data');
     });
+};
+
+const toggleAllSelection = (action) => {
+  const isSelectAll = action === 'select_all';
+  const isMethodsTab = tab === 'methods_tab';
+  const isEventsTab = tab === 'events_tab';
 
+  const setStateFunction = isMethodsTab ? setCheckboxMethods : isEventsTab ? setCheckboxEvents : null;
+
+  if (setStateFunction) {
+    setStateFunction((prevState) =>
+      Object.keys(prevState).reduce((acc, key) => {
+        acc[key] = isSelectAll;
+        return acc;
+      }, {})
+    );
+
+    if (isMethodsTab) {
+      setSelectAllMethods(isSelectAll);
+    } else if (isEventsTab) {
+      setSelectAllEvents(isSelectAll);
+    }
+  }
 };
 
-const handleParentChange = (methodName) => {
+const handleParentChange = (propertyName) => {
+  const isMethodsTab = tab === 'methods_tab';
+  const isEventsTab = tab === 'events_tab';
+
+  if (propertyName === 'select_all' || propertyName === 'unselect_all') {
+    toggleAllSelection(propertyName);
+    return;
+  }
+
+  if (!isMethodsTab && !isEventsTab) {
+    console.log('handleParentChange tab not found');
+    return;
+  }
+
+  const setCheckboxState = isMethodsTab ? setCheckboxMethods : setCheckboxEvents;
+  const data = isMethodsTab ? methodsData : eventsData;
+  const findItem = item => (isMethodsTab ? item.method_name : item.event_name) === propertyName;
+
   setCheckboxState(prevState => {
-    const newState = !prevState[methodName];
-    const updatedState = { ...prevState };
-    updatedState[methodName] = newState;
+    const isParentChecked = !prevState[propertyName];
+    const updatedState = { ...prevState, [propertyName]: isParentChecked };
 
-    if (!newState) {
+    if (!isParentChecked) {
       Object.keys(updatedState).forEach(key => {
-        if (key.startsWith(`${methodName}::`)) {
+        if (key.startsWith(`${propertyName}::`)) {
           updatedState[key] = false;
         }
       });
     } else {
-      Object.keys(checkBoxData.find(item => item.method_name === methodName)?.schema.properties || {}).forEach(property => {
-        const childKey = `${methodName}::${property}`;
+      const item = data.find(findItem);
+      const properties = item?.schema.properties || {};
+      Object.keys(properties).forEach(property => {
+        const childKey = `${propertyName}::${property}`;
         updatedState[childKey] = true;
       });
     }
@@ -580,20 +520,65 @@ const handleParentChange = (methodName) => {
 };
 
 const handleChildChange = (key) => {
+  const isMethodsTab = tab === 'methods_tab';
+  const isEventsTab = tab === 'events_tab';
+
+  if (!isMethodsTab && !isEventsTab) {
+    console.log('handleChildChange tab not found');
+    return;
+  }
+
+  const setCheckboxState = isMethodsTab ? setCheckboxMethods : setCheckboxEvents;
+  const parentName = key.split('::')[0];
+
   setCheckboxState(prevState => {
-    const newState = !prevState[key];
-    const updatedState = { ...prevState, [key]: newState };
-    const parentMethodName = key.split('::')[0];
-    const anyChildChecked = Object.keys(updatedState).some(childKey => childKey.startsWith(`${parentMethodName}::`) && updatedState[childKey]);
-    updatedState[parentMethodName] = anyChildChecked;
+    const isChecked = !prevState[key];
+    const updatedState = { ...prevState, [key]: isChecked };
+
+    const anyChildChecked = Object.keys(updatedState).some(childKey =>
+      childKey.startsWith(`${parentName}::`) && updatedState[childKey]
+    );
+    updatedState[parentName] = anyChildChecked;
+
     return updatedState;
   });
 };
 
-const hasSelectedMethod = (checkboxState) => {
-  return Object.values(checkboxState).some(value => value === true);
+const hasSelectedValues = (checkboxMethods) => {
+  return Object.values(checkboxMethods).some(value => value === true);
 }
 
+const MetadataComponent = ({ methodsData, eventsData, setTab }) => {
+  const methodCount = methodsData.length;
+  const eventCount = eventsData.length;
+
+  const tabs = (
+    <Metadata>
+      {methodsData.length > 0 && (
+        <MetadataTab
+          onClick={() => setTab('methods_tab')}
+        >
+          Methods <MetadataText><MetadataIcon>{methodCount}</MetadataIcon></MetadataText>
+        </MetadataTab>
+      )}
+
+      {methodsData.length > 0 && eventsData.length > 0 && (
+        <span style={{ margin: '0 5px' }}>|</span>
+      )}
+
+      {eventsData.length > 0 && (
+        <MetadataTab
+          onClick={() => setTab('events_tab')}
+        >
+          Events <MetadataText><MetadataIcon>{eventCount}</MetadataIcon></MetadataText>
+        </MetadataTab>
+      )}
+    </Metadata>
+  );
+
+  return tabs;
+};
+
 return (
   <>
     <Hero>
@@ -621,7 +606,7 @@ return (
                 <Container>
                   <LoadingSpinner />
                 </Container>
-              ) : (checkBoxData.length === 0) ?
+              ) : (methodsData.length === 0) ?
                 <>
                   <NoQueryContainer>
                     <NoQuerySVG
@@ -632,67 +617,125 @@ return (
                 </>
                 : (
                   <SubContainerContent>
-                    {checkBoxData.length > 0 && (
-                      <MethodsText>
-                        Methods <MethodsSpan>{methodCount}</MethodsSpan>
-                      </MethodsText>
-                    )}
+                    {MetadataComponent({ methodsData, eventsData, setTab })}
                     < ScrollableDiv >
-                      {
-                        checkBoxData.length > 0 && (
-                          <>
-                            {checkBoxData.map((item, index) => (
-                              <CheckboxContainer key={index}>
-                                <CheckboxLabel>
-                                  <Checkbox
-                                    type="checkbox"
-                                    id={item.method_name}
-                                    checked={checkboxState[item.method_name]}
-                                    onChange={() => handleParentChange(item.method_name)}
-                                  />
-                                  {item.method_name}
-                                </CheckboxLabel>
-                                {item.schema.properties && (
-                                  <SubCheckboxContainer>
-                                    {Object.keys(item.schema.properties).map((property, subIndex) => (
-                                      <CheckboxLabel key={subIndex}>
-                                        <Checkbox
-                                          type="checkbox"
-                                          id={`${item.method_name}::${property}`}
-                                          checked={checkboxState[`${item.method_name}::${property}`]}
-                                          onChange={() => handleChildChange(`${item.method_name}::${property}`)}
-                                        />
-                                        {property}: {item.schema.properties[property].type}
-                                      </CheckboxLabel>
-                                    ))}
-                                  </SubCheckboxContainer>
-                                )}
-                              </CheckboxContainer>
-                            ))}
-                          </>
-                        )
+                      {methodsData.length > 0 && tab === 'methods_tab' && (
+                        <>
+                          <CheckboxContainer>
+                            <CheckboxLabel>
+                              <Checkbox
+                                type="checkbox"
+                                id="select_all"
+                                onChange={() => toggleAllSelection('select_all')}
+                                checked={selectAllMethods}
+                              />
+                              Select All
+                            </CheckboxLabel>
+                            <CheckboxLabel>
+                              <Checkbox
+                                type="checkbox"
+                                id="unselect_all"
+                                onChange={() => toggleAllSelection('unselect_all')}
+                                checked={!selectAllMethods}
+                              />
+                              Unselect All
+                            </CheckboxLabel>
+                          </CheckboxContainer>
+
+                          {methodsData.map((item, index) => (
+                            <CheckboxContainer key={index}>
+                              <CheckboxLabel>
+                                <Checkbox
+                                  type="checkbox"
+                                  id={item.method_name}
+                                  checked={checkboxMethods[item.method_name]}
+                                  onChange={() => handleParentChange(item.method_name)}
+                                />
+                                {item.method_name}
+                              </CheckboxLabel>
+                              {item.schema.properties && (
+                                <SubCheckboxContainer>
+                                  {Object.keys(item.schema.properties).map((property, subIndex) => (
+                                    <CheckboxLabel key={subIndex}>
+                                      <Checkbox
+                                        type="checkbox"
+                                        id={`${item.method_name}::${property}`}
+                                        checked={checkboxMethods[`${item.method_name}::${property}`]}
+                                        onChange={() => handleChildChange(`${item.method_name}::${property}`)}
+                                      />
+                                      {property}: {item.schema.properties[property].type}
+                                    </CheckboxLabel>
+                                  ))}
+                                </SubCheckboxContainer>
+                              )}
+                            </CheckboxContainer>
+                          ))}
+                        </>
+                      )
+                      }
+                      {eventsData.length > 0 && tab === 'events_tab' && (
+                        <>
+                          <CheckboxContainer>
+                            <CheckboxLabel>
+                              <Checkbox
+                                type="checkbox"
+                                id="select_all_events"
+                                onChange={() => toggleAllSelection('select_all')}
+                                checked={selectAllEvents}
+                              />
+                              Select All Events
+                            </CheckboxLabel>
+                            <CheckboxLabel>
+                              <Checkbox
+                                type="checkbox"
+                                id="unselect_all_events"
+                                onChange={() => toggleAllSelection('unselect_all')}
+                                checked={!selectAllEvents}
+                              />
+                              Unselect All Events
+                            </CheckboxLabel>
+                          </CheckboxContainer>
+
+                          {eventsData.map((item, index) => (
+                            <CheckboxContainer key={index}>
+                              <CheckboxLabel>
+                                <Checkbox
+                                  type="checkbox"
+                                  id={item.event_name}
+                                  checked={checkboxEvents[item.event_name]}
+                                  onChange={() => handleParentChange(item.event_name)}
+                                />
+                                {item.event_name}
+                              </CheckboxLabel>
+                              {item.schema.properties && (
+                                <SubCheckboxContainer>
+                                  {Object.keys(item.schema.properties).map((property, subIndex) => (
+                                    <CheckboxLabel key={subIndex}>
+                                      <Checkbox
+                                        type="checkbox"
+                                        id={`${item.event_name}::${property}`}
+                                        checked={checkboxEvents[`${item.event_name}::${property}`]}
+                                        onChange={() => handleChildChange(`${item.event_name}::${property}`)}
+                                      />
+                                      {property}: {item.schema.properties[property].type}
+                                    </CheckboxLabel>
+                                  ))}
+                                </SubCheckboxContainer>
+                              )}
+                            </CheckboxContainer>
+                          ))}
+                        </>
+                      )
                       }
+
                     </ScrollableDiv>
                   </SubContainerContent>
                 )}
-              <GenerateMethodsButton onClick={generateMethods} disabled={!checkboxState || !hasSelectedMethod(checkboxState)}> Generate</GenerateMethodsButton>
+              <GenerateButton onClick={generateMethods} disabled={(!checkboxMethods || !hasSelectedValues(checkboxMethods)) && (!checkboxEvents || !hasSelectedValues(checkboxEvents))}>Generate</GenerateButton>
             </SubContainerContent>
           </SubContainer>
         </WidgetContainer>
       </Container>
     </Hero>
-    <Divider />
-    <ExploreIndexersContainer>
-      <ExploreContent>
-        <ExploreIndexersHeading>Explore indexers on Near</ExploreIndexersHeading>
-        <SearchIndexerContainer>
-          <MagnifyingGlass fill="#000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M3.624,15a8.03,8.03,0,0,0,10.619.659l5.318,5.318a1,1,0,0,0,1.414-1.414l-5.318-5.318A8.04,8.04,0,0,0,3.624,3.624,8.042,8.042,0,0,0,3.624,15Zm1.414-9.96a6.043,6.043,0,1,1-1.77,4.274A6,6,0,0,1,5.038,5.038ZM4.622,9.311a1,1,0,0,1,2,0A2.692,2.692,0,0,0,9.311,12a1,1,0,0,1,0,2A4.7,4.7,0,0,1,4.622,9.311Z"></path></g></MagnifyingGlass>
-          <SearchInput placeholder="Search indexers" />
-          <SearchIndexerButton>
-            <SearchArrow viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.4697 5.46967C13.7626 5.17678 14.2374 5.17678 14.5303 5.46967L20.5303 11.4697C20.8232 11.7626 20.8232 12.2374 20.5303 12.5303L14.5303 18.5303C14.2374 18.8232 13.7626 18.8232 13.4697 18.5303C13.1768 18.2374 13.1768 17.7626 13.4697 17.4697L18.1893 12.75H4C3.58579 12.75 3.25 12.4142 3.25 12C3.25 11.5858 3.58579 11.25 4 11.25H18.1893L13.4697 6.53033C13.1768 6.23744 13.1768 5.76256 13.4697 5.46967Z" fill="#1C274C"></path> </g></SearchArrow>
-          </SearchIndexerButton>
-        </SearchIndexerContainer>
-      </ExploreContent>
-    </ExploreIndexersContainer>
   </>
 )