diff --git a/apps/formbricks-com/app/docs/integrations/n8n/page.mdx b/apps/formbricks-com/app/docs/integrations/n8n/page.mdx
index dc2b067e8d..bd55876910 100644
--- a/apps/formbricks-com/app/docs/integrations/n8n/page.mdx
+++ b/apps/formbricks-com/app/docs/integrations/n8n/page.mdx
@@ -30,7 +30,7 @@ export const meta = {
 n8n allows you to build flexible workflows focused on deep data integration. And with sharable templates and a user-friendly UI, the less technical people on your team can collaborate on them too. Unlike other tools, complexity is not a limitation. So you can build whatever you want — without stressing over budget. Hook up Formbricks with n8n and you can send your data to 350+ other apps. Here is how to do it.
 
 <Note>
-  ### Nail down your survey first {{ class: "text-white" }}
+  ### Nail down your survey first
   Any changes in the survey cause additional work in the n8n node. It makes sense to first settle on the survey
   you want to run and then get to setting up n8n.
 </Note>
@@ -39,12 +39,12 @@ n8n allows you to build flexible workflows focused on deep data integration. And
 
 When setting up the node your life will be easier when you change the `questionId`s of your survey questions. You can only do so **before** you publish your survey.
 
-<Image src={UpdateQuestionId} alt="Update Question ID" quality="100" className="rounded-lg" />
+<Image src={UpdateQuestionId} alt="Update Question ID" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
 _In every question card in the Advanced Settings you find the Question ID field. Update it so that you'll recognize the response tied to this question._
 
 <Note>
-  ### Already published? Duplicate survey {{ class: "text-white" }}
+  ### Already published? Duplicate survey
   You can only update the questionId when the survey was not yet published. Already published it? Just **duplicate
   it** to update the questionIds.
   <Image
@@ -59,29 +59,29 @@ _In every question card in the Advanced Settings you find the Question ID field.
 
 Go to [n8n.io](https://n8n.io) and create a new workflow. Search for “Formbricks” to get started:
 
-<Image src={AddFormbricksTrigger} alt="Add Formbricks Trigger" quality="100" className="rounded-lg" />
+<Image src={AddFormbricksTrigger} alt="Add Formbricks Trigger" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
 ## Step 3: Connect Formbricks with n8n
 
 Now, you have to connect n8n with Formbricks via an API Key:
 
-<Image src={CreateNewCredentialBtn} alt="Create new credential button" quality="100" className="rounded-lg" />
+<Image src={CreateNewCredentialBtn} alt="Create new credential button" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
 Click on Create New Credentail button to add your host and API Key
 
-<Image src={AddApiKey} alt="Add host and api key" quality="100" className="rounded-lg" />
+<Image src={AddApiKey} alt="Add host and api key" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
 Now you need an API key. Please refer to the [API Key Setup](/docs/api/api-key-setup) page to learn how to create one.
 
 Once you copied it in the API Key field, hit Save button to test the connection and save the credentials.
 
-<Image src={SuccessConnection} alt="Successful Connection" quality="100" className="rounded-lg" />
+<Image src={SuccessConnection} alt="Successful Connection" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
 ## Step 4: Select Event
 
 Next, you can choose the event you want to trigger the node on. You can select multiple events:
 
-<Image src={SelectEvent} alt="Select Event" quality="100" className="rounded-lg" />
+<Image src={SelectEvent} alt="Select Event" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
 Here, we are adding `Response Finished` as an event, which will trigger when the survey has been filled out.
 
@@ -89,25 +89,25 @@ Here, we are adding `Response Finished` as an event, which will trigger when the
 
 Next, you can choose from all the surveys you have created in this environment. You can select multiple surveys:
 
-<Image src={SelectSurvey} alt="Select Survey" quality="100" className="rounded-lg" />
+<Image src={SelectSurvey} alt="Select Survey" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
 Here, we are selecting two surveys.
 
-<Image src={SelectedSurveys} alt="Selected Surveys" quality="100" className="rounded-lg" />
+<Image src={SelectedSurveys} alt="Selected Surveys" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
 ## Step 6: Test your trigger
 
 In order to set up n8n you'll need a test response in the selected survey. This allows you to select the individual values of each response in your workflow. If you have Formbricks running locally and you want to set up an in-app survey, you can use our [Demo App](/docs/contributing/demo) to trigger a survey and submit a response.
 
-<Image src={SubmitTestResponse} alt="Submit Test Response" quality="100" className="rounded-lg" />
+<Image src={SubmitTestResponse} alt="Submit Test Response" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
 Next, click on Listen for event button.
 
-<Image src={ListenForEvent} alt="Listen for event" quality="100" className="rounded-lg" />
+<Image src={ListenForEvent} alt="Listen for event" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
 Then, go to the survey which you selected. Fill it out, and wait for the particular event to trigger (in this case it's `Response Finished`). Once the event is triggered you will see the response that you filled out in the survey.
 
-<Image src={TestResponseSuccess} alt="Test Response Success" quality="100" className="rounded-lg" />
+<Image src={TestResponseSuccess} alt="Test Response Success" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
 Now you have all the data you need at hand. The next steps depend on what you want to do with it. In this tutorial, we will send submissions to a discord channel:
 
@@ -115,12 +115,12 @@ Now you have all the data you need at hand. The next steps depend on what you wa
 
 Click on the plus and search `Discord`.
 
-<Image src={AddDiscord} alt="Add Discord" quality="100" className="rounded-lg" />
+<Image src={AddDiscord} alt="Add Discord" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
 Fill in the `Webhook URL` and the `Content` that you want to receive in the respective discord channel. Next, click on `Execute Node` button to test the node.
 
-<Image src={FillDiscordDetails} alt="Fill Discord Details" quality="100" className="rounded-lg" />
+<Image src={FillDiscordDetails} alt="Fill Discord Details" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
 Once the execution is successful, you'll receive the content in the discord channel.
 
-<Image src={DiscordResponse} alt="Discord Response" quality="100" className="rounded-lg" />
+<Image src={DiscordResponse} alt="Discord Response" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />