diff --git a/web/components/web-hooks/create-webhook-modal.tsx b/web/components/web-hooks/create-webhook-modal.tsx
index dc08d3632a..f8301bf53d 100644
--- a/web/components/web-hooks/create-webhook-modal.tsx
+++ b/web/components/web-hooks/create-webhook-modal.tsx
@@ -13,10 +13,6 @@ import { getCurrentHookAsCSV } from "./utils";
 // types
 import { IWebhook, IWorkspace, TWebhookEventTypes } from "@plane/types";
 
-interface WebhookWithKey {
-  webHook: IWebhook;
-  secretKey: string | undefined;
-}
 interface ICreateWebhookModal {
   currentWorkspace: IWorkspace | null;
   isOpen: boolean;
diff --git a/web/components/web-hooks/form/form.tsx b/web/components/web-hooks/form/form.tsx
index 0189ed5170..c2dd940dc2 100644
--- a/web/components/web-hooks/form/form.tsx
+++ b/web/components/web-hooks/form/form.tsx
@@ -1,10 +1,8 @@
 import React, { FC, useEffect, useState } from "react";
-import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useWebhook, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { useWebhook } from "hooks/store";
 // components
 import {
   WebhookIndividualEventOptions,
@@ -37,14 +35,8 @@ export const WebhookForm: FC<Props> = observer((props) => {
   const { data, onSubmit, handleClose } = props;
   // states
   const [webhookEventType, setWebhookEventType] = useState<TWebhookEventTypes>("all");
-  // router
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-  // toast
-  const { setToastAlert } = useToast();
   // store hooks
-  const { currentWorkspace } = useWorkspace();
-  const { createWebhook, updateWebhook, webhookSecretKey } = useWebhook();
+  const {webhookSecretKey } = useWebhook();
   // use form
   const {
     handleSubmit,
diff --git a/web/pages/[workspaceSlug]/settings/webhooks/create.tsx b/web/pages/[workspaceSlug]/settings/webhooks/create.tsx
deleted file mode 100644
index 20a0f1c13a..0000000000
--- a/web/pages/[workspaceSlug]/settings/webhooks/create.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import React from "react";
-import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
-// hooks
-import { useUser, useWebhook, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
-// layouts
-import { AppLayout } from "layouts/app-layout";
-import { WorkspaceSettingLayout } from "layouts/settings-layout";
-// components
-import { WorkspaceSettingHeader } from "components/headers";
-import { WebhookForm, getCurrentHookAsCSV } from "components/web-hooks";
-// types
-import { NextPageWithLayout } from "lib/types";
-import { IWebhook } from "@plane/types";
-// helpers
-import { csvDownload } from "helpers/download.helper";
-
-const CreateWebhookPage: NextPageWithLayout = observer(() => {
-  // router
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const {
-    membership: { currentWorkspaceRole },
-  } = useUser();
-  const { createWebhook } = useWebhook();
-  const { currentWorkspace } = useWorkspace();
-
-  const { setToastAlert } = useToast();
-  const isAdmin = currentWorkspaceRole === 20;
-
-  const handleCreateWebhook = async (formData: IWebhook, webhookEventType: string) => {
-    if (!workspaceSlug) return;
-
-    let payload: Partial<IWebhook> = {
-      url: formData.url,
-    };
-
-    if (webhookEventType === "all")
-      payload = {
-        ...payload,
-        project: true,
-        cycle: true,
-        module: true,
-        issue: true,
-        issue_comment: true,
-      };
-    else
-      payload = {
-        ...payload,
-        project: formData.project ?? false,
-        cycle: formData.cycle ?? false,
-        module: formData.module ?? false,
-        issue: formData.issue ?? false,
-        issue_comment: formData.issue_comment ?? false,
-      };
-
-    await createWebhook(workspaceSlug.toString(), payload)
-      .then(({ webHook, secretKey }) => {
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Webhook created successfully.",
-        });
-
-        const csvData = getCurrentHookAsCSV(currentWorkspace, webHook, secretKey?.toString() ?? "");
-        csvDownload(csvData, `webhook-secret-key-${Date.now()}`);
-
-        if (webHook && webHook.id)
-          router.push({ pathname: `/${workspaceSlug}/settings/webhooks/${webHook.id}`, query: { isCreated: true } });
-      })
-      .catch((error) => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: error?.error ?? "Something went wrong. Please try again.",
-        });
-      });
-  };
-
-  const handleFormSubmit = async (formData: IWebhook, webhookEventType: string) => {
-    await handleCreateWebhook(formData, webhookEventType);
-  };
-
-  if (!isAdmin)
-    return (
-      <div className="mt-10 flex h-full w-full justify-center p-4">
-        <p className="text-sm text-custom-text-300">You are not authorized to access this page.</p>
-      </div>
-    );
-
-  return (
-    <div className="w-full overflow-y-auto py-8 pl-1 pr-9">
-      <WebhookForm onSubmit={handleFormSubmit} />
-    </div>
-  );
-});
-
-CreateWebhookPage.getLayout = function getLayout(page: React.ReactElement) {
-  return (
-    <AppLayout header={<WorkspaceSettingHeader title="Webhook settings" />}>
-      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
-    </AppLayout>
-  );
-};
-
-export default CreateWebhookPage;
diff --git a/web/pages/[workspaceSlug]/settings/webhooks/index.tsx b/web/pages/[workspaceSlug]/settings/webhooks/index.tsx
index b6c6d6fb2a..d8ba13f933 100644
--- a/web/pages/[workspaceSlug]/settings/webhooks/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/webhooks/index.tsx
@@ -21,7 +21,7 @@ const WebhooksListPage: NextPageWithLayout = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-
+  // mobx store
   const {
     membership: { currentWorkspaceRole },
   } = useUser();