diff --git a/web/config/moduleFederation.config.js b/web/config/moduleFederation.config.js
index 6dbcd96ad..dba1b8ca5 100644
--- a/web/config/moduleFederation.config.js
+++ b/web/config/moduleFederation.config.js
@@ -38,7 +38,8 @@ module.exports = {
     './RepositoryFileEdit': './src/pages/RepositoryFileEdit/RepositoryFileEdit.tsx',
     './RepositoryCommits': './src/pages/RepositoryCommits/RepositoryCommits.tsx',
     './RepositoryBranches': './src/pages/RepositoryBranches/RepositoryBranches.tsx',
-    './RepositorySettings': './src/pages/RepositorySettings/RepositorySettings.tsx'
+    './RepositorySettings': './src/pages/RepositorySettings/RepositorySettings.tsx',
+    './RepositoryCreateWebhook': './src/pages/RepositoryCreateWebhook/RepositoryCreateWebhook.tsx'
   },
   shared: {
     formik: packageJSON.dependencies['formik'],
diff --git a/web/src/RouteDefinitions.ts b/web/src/RouteDefinitions.ts
index 45fa601a1..0bb6cf451 100644
--- a/web/src/RouteDefinitions.ts
+++ b/web/src/RouteDefinitions.ts
@@ -44,6 +44,7 @@ export interface CODERoutes {
   toCODERepositoryCommits: ({ repoPath, commitRef }: { repoPath: string; commitRef: string }) => string
   toCODERepositoryBranches: ({ repoPath, branch }: { repoPath: string; branch?: string }) => string
   toCODERepositorySettings: ({ repoPath }: { repoPath: string }) => string
+  toCODECreateWebhook: ({ repoPath }: { repoPath: string }) => string
 }
 
 export const routes: CODERoutes = {
@@ -55,5 +56,6 @@ export const routes: CODERoutes = {
   toCODERepositoryFileEdit: ({ repoPath, gitRef, resourcePath }) => `/${repoPath}/edit/${gitRef}/~/${resourcePath}`,
   toCODERepositoryCommits: ({ repoPath, commitRef }) => `/${repoPath}/commits/${commitRef}`,
   toCODERepositoryBranches: ({ repoPath, branch }) => `/${repoPath}/branches/${branch ? '/' + branch : ''}`,
-  toCODERepositorySettings: ({ repoPath }) => `/${repoPath}/settings`
+  toCODERepositorySettings: ({ repoPath }) => `/${repoPath}/settings`,
+  toCODECreateWebhook: ({ repoPath }) => `/${repoPath}/settings/webhook/new`
 }
diff --git a/web/src/pages/RepositoryCreateWebhook/RepositoryCreateWebhook.tsx b/web/src/pages/RepositoryCreateWebhook/RepositoryCreateWebhook.tsx
new file mode 100644
index 000000000..c7c798c3f
--- /dev/null
+++ b/web/src/pages/RepositoryCreateWebhook/RepositoryCreateWebhook.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { Container, PageBody } from '@harness/uicore'
+
+export default function RepositoryCreateWebhook() {
+  return (
+    <Container>
+      <PageBody>This is wEbhook page</PageBody>
+    </Container>
+  )
+}
diff --git a/web/src/pages/RepositorySettings/RepositorySettings.tsx b/web/src/pages/RepositorySettings/RepositorySettings.tsx
index 58be07cd3..541f25862 100644
--- a/web/src/pages/RepositorySettings/RepositorySettings.tsx
+++ b/web/src/pages/RepositorySettings/RepositorySettings.tsx
@@ -1,16 +1,38 @@
 import React from 'react'
+import { useHistory } from 'react-router-dom'
+
 import { PageBody, Button, Intent, Container, PageHeader } from '@harness/uicore'
 import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata'
 import { useStrings } from 'framework/strings'
+import { useAppContext } from 'AppContext'
+import { CodeIcon } from 'utils/GitUtils'
 
 import { RepositorySettingsHeader } from './RepositorySettingsHeader/RepositorySettingsHeader'
 
 import emptyStateImage from './empty-state.svg'
+
 import css from './RepositorySettings.module.scss'
 
 export default function RepositorySettings() {
   const { repoMetadata, error, loading } = useGetRepositoryMetadata()
-  const NewWebHookButton = <Button type="submit" text={'Create Webhook'} intent={Intent.PRIMARY} />
+  const { routes } = useAppContext()
+  const history = useHistory()
+
+  const NewWebHookButton = (
+    <Button
+      type="button"
+      text={'Create Webhook'}
+      intent={Intent.PRIMARY}
+      icon={CodeIcon.Add}
+      onClick={() => {
+        history.push(
+          routes.toCODECreateWebhook({
+            repoPath: repoMetadata?.path as string
+          })
+        )
+      }}
+    />
+  )
   const { getString } = useStrings()
   return (
     <Container className={css.main}>
diff --git a/web/src/pages/RepositorySettings/RepositorySettingsHeader/RepositorySettingsHeader.tsx b/web/src/pages/RepositorySettings/RepositorySettingsHeader/RepositorySettingsHeader.tsx
index 8d60e8ae4..796582e2c 100644
--- a/web/src/pages/RepositorySettings/RepositorySettingsHeader/RepositorySettingsHeader.tsx
+++ b/web/src/pages/RepositorySettings/RepositorySettingsHeader/RepositorySettingsHeader.tsx
@@ -16,9 +16,9 @@ export function RepositorySettingsHeader({ repoMetadata }: Pick<GitInfoProps, 'r
     <Container className={css.header}>
       <Container>
         <Layout.Horizontal spacing="small" className={css.breadcrumb}>
-          <Link to={routes.toSCMRepositoriesListing({ space })}>{getString('repositories')}</Link>
+          <Link to={routes.toCODERepositoriesListing({ space })}>{getString('repositories')}</Link>
           <Icon name="main-chevron-right" size={10} color={Color.GREY_500} />
-          <Link to={routes.toSCMRepository({ repoPath: repoMetadata.path as string })}>{repoMetadata.uid}</Link>
+          <Link to={routes.toCODERepository({ repoPath: repoMetadata.path as string })}>{repoMetadata.uid}</Link>
         </Layout.Horizontal>
         <Container padding={{ top: 'medium', bottom: 'medium' }}>
           <Text font={{ variation: FontVariation.H4 }}>{getString('settings')}</Text>