diff --git a/raven-app/src/components/feature/integrations/webhooks/WebhookReturnDataFieldTable.tsx b/raven-app/src/components/feature/integrations/webhooks/WebhookReturnDataFieldTable.tsx
index e21fa8d82..b07fc2199 100644
--- a/raven-app/src/components/feature/integrations/webhooks/WebhookReturnDataFieldTable.tsx
+++ b/raven-app/src/components/feature/integrations/webhooks/WebhookReturnDataFieldTable.tsx
@@ -1,11 +1,11 @@
-import { HelperText } from "@/components/common/Form";
+import { HelperText, Label } from "@/components/common/Form";
 import { Webhook } from "@/types/Integrations/Webhook";
-import { Flex, Box, Heading, Table, TextFieldInput, IconButton, Button, Select, Text, Dialog, Badge } from "@radix-ui/themes";
-import { useCallback, useMemo, useState } from "react";
+import { Flex, Box, Heading, Table, TextFieldInput, IconButton, Button, Select, Dialog, Badge } from "@radix-ui/themes";
+import { useMemo, useState } from "react";
 import { Controller, useFieldArray, useFormContext } from "react-hook-form";
 import { BiInfoCircle, BiMinusCircle } from "react-icons/bi";
 import { BsEye, BsPlus } from "react-icons/bs";
-import { FieldsData, TriggerEvents } from "./utils";
+import { FieldsData, SampleData, } from "./utils";
 import { DoctypeFieldList } from './utils'
 import { DIALOG_CONTENT_CLASS } from "@/utils/layout/dialog";
 import { RavenWebhook } from "@/types/RavenIntegrations/RavenWebhook";
@@ -32,11 +32,11 @@ export const WebhookData = () => {
         setFieldIndex(null)
     }
 
-    // const [previewOpen, setPreviewOpen] = useState(false);
+    const [previewOpen, setPreviewOpen] = useState(false);
 
-    // const onPreviewClose = () => {
-    //     setPreviewOpen(false)
-    // }
+    const onPreviewClose = () => {
+        setPreviewOpen(false)
+    }
 
     return (
         <Box>
@@ -47,18 +47,18 @@ export const WebhookData = () => {
                         <HelperText>The fields you want to return in the webhook response.</HelperText>
                     </Flex>
                     <Flex direction={'row'} gap={'4'} align={'center'}>
-                        {/* <Dialog.Root open={previewOpen} onOpenChange={setPreviewOpen}>
+                        <Dialog.Root open={previewOpen} onOpenChange={setPreviewOpen}>
                             <Dialog.Trigger>
                                 <Button size={'1'} type="button" onClick={() => { }} variant="ghost" color="gray" style={{
                                     width: 'fit-content',
-                                }}>
+                                }} disabled={fields.length === 0}>
                                     <BsEye size={'14'} />
                                     Preview</Button>
                             </Dialog.Trigger>
-                            <Dialog.Content className={DIALOG_CONTENT_CLASS}>
+                            <Dialog.Content className={DIALOG_CONTENT_CLASS} size={'3'}>
                                 <PreviewModal onClose={onPreviewClose} />
                             </Dialog.Content>
-                        </Dialog.Root> */}
+                        </Dialog.Root>
                         <Button size={'1'} type="button" onClick={() => append({ fieldname: '', key: '' })} variant="outline" style={{
                             width: 'fit-content',
                         }}><BsPlus size={'14'} />
@@ -180,16 +180,22 @@ export const FieldInfoModal = ({ fieldIndex, triggerEvent, onClose }: { fieldInd
                     <HelperText>{fieldData?.description}</HelperText>
                 </Flex>
             </Dialog.Title>
-
-            {fieldData?.example && <> <Flex direction='column' gap='2' width='100%'>
-                <Text size={'2'} >Example:</Text>
-            </Flex>
-
-                <pre className={'rounded-md p-4 bg-gray-700'}>
-                    <code>
-                        {JSON.parse(JSON.stringify(fieldData?.example || ''))}
-                    </code>
-                </pre></>}
+            {
+                fieldData?.example && <Box>
+                    <Label>
+                        Example
+                    </Label>
+                    <Box>
+                        <pre className={'rounded-md bg-slate-3 p-2 m-0'} style={{
+                            minHeight: '200px'
+                        }}>
+                            <code>
+                                {JSON.stringify(fieldData?.example, null, 2)}
+                            </code>
+                        </pre>
+                    </Box>
+                </Box>
+            }
 
             <Flex gap="3" mt="4" justify="end" align='center'>
                 <Dialog.Close>
@@ -203,7 +209,29 @@ export const FieldInfoModal = ({ fieldIndex, triggerEvent, onClose }: { fieldInd
 
 export const PreviewModal = ({ onClose }: { onClose: () => void }) => {
 
-    const { register, watch } = useFormContext<Webhook>()
+    const { watch } = useFormContext<RavenWebhook>()
+
+    const webhookTrigger = watch('webhook_trigger')
+
+    const webhookData = watch('webhook_data')
+
+    const [examples, setExamples] = useState<string>('')
+
+    const exampleList = useMemo(() => {
+        return SampleData?.find(sample => sample.trigger_event.includes(webhookTrigger))?.examples?.map(example => example.name) || []
+    }, [webhookTrigger])
+
+    const jsonData = useMemo(() => {
+        const exampleData = SampleData?.find(sample => sample.trigger_event.includes(webhookTrigger))?.examples?.find(example => example.name === examples)
+
+        const webhookTriggerKeys = webhookData?.map(data => data.key)
+        const obj = {}
+        webhookTriggerKeys?.forEach(key => {
+            // @ts-ignore
+            obj[key as string] = exampleData?.fields?.find(field => field.field === key)?.value
+        })
+        return JSON.stringify(obj, null, 2)
+    }, [examples, webhookData, webhookTrigger])
 
     return (
         <Flex direction={'column'} gap={'4'} width={'100%'}>
@@ -212,7 +240,36 @@ export const PreviewModal = ({ onClose }: { onClose: () => void }) => {
             </Dialog.Title>
             <Flex direction={'column'} gap={'2'} width={'100%'}>
                 <Box>
-
+                    <Flex direction={'column'}>
+                        <Label>
+                            Example
+                        </Label>
+                        <Select.Root value={examples} onValueChange={(e) => setExamples(e)}>
+                            <Select.Trigger placeholder='Select example' />
+                            <Select.Content>
+                                <Select.Group>
+                                    <Select.Label>Examples</Select.Label>
+                                    {exampleList.map((example, index) => (
+                                        <Select.Item key={index} value={example}>{example}</Select.Item>
+                                    ))}
+                                </Select.Group>
+                            </Select.Content>
+                        </Select.Root>
+                    </Flex>
+                </Box>
+                <Box>
+                    <Label>
+                        Response Data
+                    </Label>
+                    <Box>
+                        <pre className={'rounded-md bg-slate-3 p-2 m-0'} style={{
+                            minHeight: '200px'
+                        }}>
+                            <code>
+                                {jsonData}
+                            </code>
+                        </pre>
+                    </Box>
                 </Box>
             </Flex>
             <Flex gap="3" mt="4" justify="end" align='center'>
diff --git a/raven-app/src/components/feature/integrations/webhooks/utils.ts b/raven-app/src/components/feature/integrations/webhooks/utils.ts
index 9a298ba71..fb2c2504c 100644
--- a/raven-app/src/components/feature/integrations/webhooks/utils.ts
+++ b/raven-app/src/components/feature/integrations/webhooks/utils.ts
@@ -370,4 +370,393 @@ export const DoctypeFieldList: {
                 ...commonFields
             ]
         }
-    ]
\ No newline at end of file
+    ]
+
+export const SampleData = [
+    {
+        trigger_event: ['Channel Created', 'Channel Deleted'],
+        examples: [
+            {
+                name: 'general',
+                fields: [
+                    {
+                        field: 'channel_name',
+                        value: 'general'
+                    },
+                    {
+                        field: 'channel_description',
+                        value: 'General discussion'
+                    },
+                    {
+                        field: 'type',
+                        value: 'Public'
+                    },
+                    {
+                        field: 'is_direct_message',
+                        value: '0'
+                    },
+                    {
+                        field: 'is_self_message',
+                        value: '0'
+                    },
+                    {
+                        field: 'is_archived',
+                        value: '0'
+                    }
+                ]
+            },
+            {
+                name: 'kings-landing',
+                fields: [
+                    {
+                        field: 'channel_name',
+                        value: 'kings-landing'
+                    },
+                    {
+                        field: 'channel_description',
+                        value: 'The capital of Westeros and the Seven Kingdoms.'
+                    },
+                    {
+                        field: 'type',
+                        value: 'Public'
+                    },
+                    {
+                        field: 'is_direct_message',
+                        value: '0'
+                    },
+                    {
+                        field: 'is_self_message',
+                        value: '0'
+                    },
+                    {
+                        field: 'is_archived',
+                        value: '0'
+                    }
+                ]
+            },
+            {
+                name: 'winterfell',
+                fields: [
+                    {
+                        field: 'channel_name',
+                        value: 'winterfell'
+                    },
+                    {
+                        field: 'channel_description',
+                        value: 'The ancestral home of House Stark.'
+                    },
+                    {
+                        field: 'type',
+                        value: 'Public'
+                    },
+                    {
+                        field: 'is_direct_message',
+                        value: '0'
+                    },
+                    {
+                        field: 'is_self_message',
+                        value: '0'
+                    },
+                    {
+                        field: 'is_archived',
+                        value: '0'
+                    }
+                ]
+            },
+            {
+                name: 'dragons-bay',
+                fields: [
+                    {
+                        field: 'channel_name',
+                        value: 'dragons-bay'
+                    },
+                    {
+                        field: 'channel_description',
+                        value: 'The place where dragons are born.'
+                    },
+                    {
+                        field: 'type',
+                        value: 'Public'
+                    },
+                    {
+                        field: 'is_direct_message',
+                        value: '0'
+                    },
+                    {
+                        field: 'is_self_message',
+                        value: '0'
+                    },
+                    {
+                        field: 'is_archived',
+                        value: '0'
+                    }
+                ]
+            },
+            {
+                name: 'white-walkers',
+                fields: [
+                    {
+                        field: 'channel_name',
+                        value: 'white-walkers'
+                    },
+                    {
+                        field: 'channel_description',
+                        value: 'The army of the dead.'
+                    },
+                    {
+                        field: 'type',
+                        value: 'Private'
+                    },
+                    {
+                        field: 'is_direct_message',
+                        value: '0'
+                    },
+                    {
+                        field: 'is_self_message',
+                        value: '0'
+                    },
+                    {
+                        field: 'is_archived',
+                        value: '0'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        trigger_event: ['Message Sent', 'Message Edited', 'Message Deleted'],
+        examples: [
+            {
+                name: 'Hello, World!',
+                fields: [
+                    {
+                        field: 'channel_id',
+                        value: 'general'
+                    },
+                    {
+                        field: 'text',
+                        value: 'Hello, World!'
+                    },
+                    {
+                        field: 'message_type',
+                        value: 'Text'
+                    },
+                    {
+                        field: 'is_reply',
+                        value: '0'
+                    }
+                ]
+            },
+            {
+                name: 'The Iron Throne is mine!',
+                fields: [
+                    {
+                        field: 'channel_id',
+                        value: 'kings-landing'
+                    },
+                    {
+                        field: 'text',
+                        value: 'The Iron Throne is mine!'
+                    },
+                    {
+                        field: 'message_type',
+                        value: 'Text'
+                    },
+                    {
+                        field: 'is_reply',
+                        value: '0'
+                    }
+                ]
+            },
+            {
+                name: 'Winter is coming.',
+                fields: [
+                    {
+                        field: 'channel_id',
+                        value: 'winterfell'
+                    },
+                    {
+                        field: 'text',
+                        value: 'Winter is coming.'
+                    },
+                    {
+                        field: 'message_type',
+                        value: 'Text'
+                    },
+                    {
+                        field: 'is_reply',
+                        value: '0'
+                    }
+                ]
+            },
+            {
+                name: 'Dracarys!',
+                fields: [
+                    {
+                        field: 'channel_id',
+                        value: 'dragons-bay'
+                    },
+                    {
+                        field: 'text',
+                        value: 'Dracarys!'
+                    },
+                    {
+                        field: 'message_type',
+                        value: 'Text'
+                    },
+                    {
+                        field: 'is_reply',
+                        value: '0'
+                    }
+                ]
+            },
+            {
+                name: 'The Night King is coming.',
+                fields: [
+                    {
+                        field: 'channel_id',
+                        value: 'white-walkers'
+                    },
+                    {
+                        field: 'text',
+                        value: 'The Night King is coming.'
+                    },
+                    {
+                        field: 'message_type',
+                        value: 'Text'
+                    },
+                    {
+                        field: 'is_reply',
+                        value: '0'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        trigger_event: ['Channel Member Added', 'Channel Member Deleted'],
+        examples: [
+            {
+                name: 'Jon snow',
+                fields: [
+                    {
+                        field: 'channel_id',
+                        value: 'general'
+                    },
+                    {
+                        field: 'user_id',
+                        value: 'jon-snow'
+                    },
+                    {
+                        field: 'is_admin',
+                        value: '1'
+                    }
+                ]
+            },
+            {
+                name: 'Daenerys Targaryen',
+                fields: [
+                    {
+                        field: 'channel_id',
+                        value: 'kings-landing'
+                    },
+                    {
+                        field: 'user_id',
+                        value: 'daenerys-targaryen'
+                    },
+                    {
+                        field: 'is_admin',
+                        value: '1'
+                    }
+                ]
+            },
+            {
+                name: 'Arya Stark',
+                fields: [
+                    {
+                        field: 'channel_id',
+                        value: 'winterfell'
+                    },
+                    {
+                        field: 'user_id',
+                        value: 'arya-stark'
+                    },
+                    {
+                        field: 'is_admin',
+                        value: '1'
+                    }
+                ]
+            },
+        ]
+    },
+    {
+        trigger_event: ['User Added', 'User Deleted'],
+        examples: [
+            {
+                name: 'Jon Snow',
+                fields: [
+                    {
+                        field: 'user',
+                        value: 'jon-snow'
+                    },
+                    {
+                        field: 'full_name',
+                        value: 'Jon Snow'
+                    },
+                    {
+                        field: 'first_name',
+                        value: 'Jon'
+                    },
+                    {
+                        field: 'enabled',
+                        value: '1'
+                    }
+                ]
+            },
+            {
+                name: 'Daenerys Targaryen',
+                fields: [
+                    {
+                        field: 'user',
+                        value: 'daenerys-targaryen'
+                    },
+                    {
+                        field: 'full_name',
+                        value: 'Daenerys Targaryen'
+                    },
+                    {
+                        field: 'first_name',
+                        value: 'Daenerys'
+                    },
+                    {
+                        field: 'enabled',
+                        value: '1'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        trigger_event: ['Message Reacted On'],
+        examples: [
+            {
+                name: '👍',
+                fields: [
+                    {
+                        field: 'reaction',
+                        value: '👍'
+                    }
+                ]
+            },
+            {
+                name: '👎',
+                fields: [
+                    {
+                        field: 'reaction',
+                        value: '👎'
+                    }
+                ]
+            }
+        ]
+    }
+]
\ No newline at end of file
diff --git a/raven/raven_integrations/doctype/raven_webhook/raven_webhook.py b/raven/raven_integrations/doctype/raven_webhook/raven_webhook.py
index 7a733c6dd..862a5c49a 100644
--- a/raven/raven_integrations/doctype/raven_webhook/raven_webhook.py
+++ b/raven/raven_integrations/doctype/raven_webhook/raven_webhook.py
@@ -39,9 +39,7 @@ class RavenWebhook(Document):
 	def validate(self):
 		# 1. Check if webhook name is unique
 		# 2. Check if webhook_data and webhook_headers are unique
-		# 3. Check if webhook ID is exists
-		# 4. If exist then update the webhook
-		# 5. If not exist then create the webhook
+
 
 
 		# 1. Check if webhook name is unique
@@ -58,13 +56,18 @@ def validate(self):
 		if len(webhook_header_keys) != len(set(webhook_header_keys)):
 			frappe.throw('Webhook Headers keys should be unique')
 
-		# 3. Check if webhook ID is exists
+	def before_save(self):
+		# 1. Check if webhook ID is exists
+		# 2. If exist then update the webhook
+		# 3. If not exist then create the webhook
+
+		# 1. Check if webhook ID is exists
 		if self.webhook:
-			# 4. Update the webhook
+			# 2. Update the webhook
 			self.update_webhook()
 
 		else:
-			# 5. Create the webhook
+			# 3. Create the webhook
 			self.create_webhook()