diff --git a/e2e/fixtures/connectionsTestCases.json b/e2e/fixtures/connectionsTestCases.json
index 8cb72d5892..1767c1d19c 100644
--- a/e2e/fixtures/connectionsTestCases.json
+++ b/e2e/fixtures/connectionsTestCases.json
@@ -1,386 +1,386 @@
 [
-  {
-    "testName": "Linear - OAuth v2 - Default app",
-    "integration": "linear",
-    "label": "Linear",
-    "authType": "oauthDefault",
-    "authLabel": "OAuth v2 - Default app",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Linear - OAuth v2 - Private app",
-    "integration": "linear",
-    "label": "Linear",
-    "authType": "oauthPrivate",
-    "authLabel": "OAuth v2 - Private app",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Linear - API Key",
-    "integration": "linear",
-    "label": "Linear",
-    "authType": "apiKey",
-    "authLabel": "API Key",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Auth0 (no auth types)",
-    "integration": "auth0",
-    "label": "Auth0",
-    "authType": null,
-    "authLabel": null,
-    "category": "single-type"
-  },
-  {
-    "testName": "Asana (no auth types)",
-    "integration": "asana",
-    "label": "Asana",
-    "authType": null,
-    "authLabel": null,
-    "category": "single-type"
-  },
-  {
-    "testName": "Anthropic (no auth types)",
-    "integration": "anthropic",
-    "label": "Anthropic",
-    "authType": null,
-    "authLabel": null,
-    "category": "single-type"
-  },
-  {
-    "testName": "AWS (no auth types)",
-    "integration": "aws",
-    "label": "AWS",
-    "authType": null,
-    "authLabel": null,
-    "category": "single-type"
-  },
-  {
-    "testName": "Google Calendar - User (OAuth 2.0)",
-    "integration": "calendar",
-    "label": "Google Calendar",
-    "authType": "oauth",
-    "authLabel": "User (OAuth 2.0)",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Google Calendar - Service Account (JSON Key)",
-    "integration": "calendar",
-    "label": "Google Calendar",
-    "authType": "json",
-    "authLabel": "Service Account (JSON Key)",
-    "category": "multi-type"
-  },
-  {
-    "testName": "OpenAI ChatGPT (no auth types)",
-    "integration": "chatgpt",
-    "label": "OpenAI ChatGPT",
-    "authType": null,
-    "authLabel": null,
-    "category": "single-type"
-  },
-  {
-    "testName": "Atlassian Confluence - OAuth 2.0 App",
-    "integration": "confluence",
-    "label": "Atlassian Confluence",
-    "authType": "oauth",
-    "authLabel": "OAuth 2.0 App",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Atlassian Confluence - User API Token / PAT",
-    "integration": "confluence",
-    "label": "Atlassian Confluence",
-    "authType": "apiToken",
-    "authLabel": "User API Token / PAT",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Discord (no auth types)",
-    "integration": "discord",
-    "label": "Discord",
-    "authType": null,
-    "authLabel": null,
-    "category": "single-type"
-  },
-  {
-    "testName": "Google Drive - User (OAuth 2.0)",
-    "integration": "drive",
-    "label": "Google Drive",
-    "authType": "oauth",
-    "authLabel": "User (OAuth 2.0)",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Google Drive - Service Account (JSON Key)",
-    "integration": "drive",
-    "label": "Google Drive",
-    "authType": "json",
-    "authLabel": "Service Account (JSON Key)",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Google Forms - User (OAuth 2.0)",
-    "integration": "forms",
-    "label": "Google Forms",
-    "authType": "oauth",
-    "authLabel": "User (OAuth 2.0)",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Google Forms - Service Account (JSON Key)",
-    "integration": "forms",
-    "label": "Google Forms",
-    "authType": "json",
-    "authLabel": "Service Account (JSON Key)",
-    "category": "multi-type"
-  },
-  {
-    "testName": "GitHub - OAuth v2 - Default app",
-    "integration": "github",
-    "label": "GitHub",
-    "authType": "oauth",
-    "authLabel": "OAuth v2 - Default app",
-    "category": "multi-type"
-  },
-  {
-    "testName": "GitHub - OAuth v2 - Private app",
-    "integration": "github",
-    "label": "GitHub",
-    "authType": "oauthPrivate",
-    "authLabel": "OAuth v2 - Private app",
-    "category": "multi-type"
-  },
-  {
-    "testName": "GitHub - PAT + Webhook",
-    "integration": "github",
-    "label": "GitHub",
-    "authType": "pat",
-    "authLabel": "PAT + Webhook",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Gmail - User (OAuth 2.0)",
-    "integration": "gmail",
-    "label": "Gmail",
-    "authType": "oauth",
-    "authLabel": "User (OAuth 2.0)",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Gmail - Service Account (JSON Key)",
-    "integration": "gmail",
-    "label": "Gmail",
-    "authType": "json",
-    "authLabel": "Service Account (JSON Key)",
-    "category": "multi-type"
-  },
-  {
-    "testName": "YouTube - User (OAuth 2.0)",
-    "integration": "youtube",
-    "label": "YouTube",
-    "authType": "oauth",
-    "authLabel": "User (OAuth 2.0)",
-    "category": "multi-type"
-  },
-  {
-    "testName": "YouTube - Service Account (JSON Key)",
-    "integration": "youtube",
-    "label": "YouTube",
-    "authType": "json",
-    "authLabel": "Service Account (JSON Key)",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Google Gemini (no auth types)",
-    "integration": "googlegemini",
-    "label": "Google Gemini",
-    "authType": null,
-    "authLabel": null,
-    "category": "single-type"
-  },
-  {
-    "testName": "Atlassian Jira - OAuth 2.0 App",
-    "integration": "jira",
-    "label": "Atlassian Jira",
-    "authType": "oauth",
-    "authLabel": "OAuth 2.0 App",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Atlassian Jira - User API Token / PAT",
-    "integration": "jira",
-    "label": "Atlassian Jira",
-    "authType": "apiToken",
-    "authLabel": "User API Token / PAT",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Google Sheets - User (OAuth 2.0)",
-    "integration": "sheets",
-    "label": "Google Sheets",
-    "authType": "oauth",
-    "authLabel": "User (OAuth 2.0)",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Google Sheets - Service Account (JSON Key)",
-    "integration": "sheets",
-    "label": "Google Sheets",
-    "authType": "json",
-    "authLabel": "Service Account (JSON Key)",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Slack - OAuth v2 - Default app",
-    "integration": "slack",
-    "label": "Slack",
-    "authType": "oauthDefault",
-    "authLabel": "OAuth v2 - Default app",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Slack - OAuth v2 - Private app",
-    "integration": "slack",
-    "label": "Slack",
-    "authType": "oauthPrivate",
-    "authLabel": "OAuth v2 - Private app",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Twilio - Auth Token",
-    "integration": "twilio",
-    "label": "Twilio",
-    "authType": "authToken",
-    "authLabel": "Auth Token",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Twilio - API Key",
-    "integration": "twilio",
-    "label": "Twilio",
-    "authType": "apiKey",
-    "authLabel": "API Key",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Telegram (no auth types)",
-    "integration": "telegram",
-    "label": "Telegram",
-    "authType": null,
-    "authLabel": null,
-    "category": "single-type"
-  },
-  {
-    "testName": "HubSpot (no auth types)",
-    "integration": "hubspot",
-    "label": "HubSpot",
-    "authType": null,
-    "authLabel": null,
-    "category": "single-type"
-  },
-  {
-    "testName": "Zoom - OAuth v2 - Default app",
-    "integration": "zoom",
-    "label": "Zoom",
-    "authType": "oauthDefault",
-    "authLabel": "OAuth v2 - Default app",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Zoom - OAuth v2 - Private app",
-    "integration": "zoom",
-    "label": "Zoom",
-    "authType": "oauthPrivate",
-    "authLabel": "OAuth v2 - Private app",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Zoom - Private Server-to-Server",
-    "integration": "zoom",
-    "label": "Zoom",
-    "authType": "serverToServer",
-    "authLabel": "Private Server-to-Server",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Salesforce - OAuth v2 - Default app",
-    "integration": "salesforce",
-    "label": "Salesforce",
-    "authType": "oauthDefault",
-    "authLabel": "OAuth v2 - Default app",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Salesforce - OAuth v2 - Private app",
-    "integration": "salesforce",
-    "label": "Salesforce",
-    "authType": "oauthPrivate",
-    "authLabel": "OAuth v2 - Private app",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Microsoft Teams - Default user-delegated app",
-    "integration": "microsoft_teams",
-    "label": "Microsoft Teams",
-    "authType": "oauthDefault",
-    "authLabel": "Default user-delegated app",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Microsoft Teams - Private user-delegated app",
-    "integration": "microsoft_teams",
-    "label": "Microsoft Teams",
-    "authType": "oauthPrivate",
-    "authLabel": "Private user-delegated app",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Microsoft Teams - Private daemon application",
-    "integration": "microsoft_teams",
-    "label": "Microsoft Teams",
-    "authType": "daemonApp",
-    "authLabel": "Private daemon application",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Kubernetes (no auth types)",
-    "integration": "kubernetes",
-    "label": "Kubernetes",
-    "authType": null,
-    "authLabel": null,
-    "category": "single-type"
-  },
-  {
-    "testName": "Reddit (no auth types)",
-    "integration": "reddit",
-    "label": "Reddit",
-    "authType": null,
-    "authLabel": null,
-    "category": "single-type"
-  },
-  {
-    "testName": "Pipedrive (no auth types)",
-    "integration": "pipedrive",
-    "label": "Pipedrive",
-    "authType": null,
-    "authLabel": null,
-    "category": "single-type"
-  },
-  {
-    "testName": "Notion - OAuth v2 - Default app",
-    "integration": "notion",
-    "label": "Notion",
-    "authType": "oauthDefault",
-    "authLabel": "OAuth v2 - Default app",
-    "category": "multi-type"
-  },
-  {
-    "testName": "Notion - API Key",
-    "integration": "notion",
-    "label": "Notion",
-    "authType": "apiKey",
-    "authLabel": "API Key",
-    "category": "multi-type"
-  }
-]
\ No newline at end of file
+	{
+		"testName": "Linear - OAuth v2 - Default app",
+		"integration": "linear",
+		"label": "Linear",
+		"authType": "oauthDefault",
+		"authLabel": "OAuth v2 - Default app",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Linear - OAuth v2 - Private app",
+		"integration": "linear",
+		"label": "Linear",
+		"authType": "oauthPrivate",
+		"authLabel": "OAuth v2 - Private app",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Linear - API Key",
+		"integration": "linear",
+		"label": "Linear",
+		"authType": "apiKey",
+		"authLabel": "API Key",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Auth0 (no auth types)",
+		"integration": "auth0",
+		"label": "Auth0",
+		"authType": null,
+		"authLabel": null,
+		"category": "single-type"
+	},
+	{
+		"testName": "Asana (no auth types)",
+		"integration": "asana",
+		"label": "Asana",
+		"authType": null,
+		"authLabel": null,
+		"category": "single-type"
+	},
+	{
+		"testName": "Anthropic (no auth types)",
+		"integration": "anthropic",
+		"label": "Anthropic",
+		"authType": null,
+		"authLabel": null,
+		"category": "single-type"
+	},
+	{
+		"testName": "AWS (no auth types)",
+		"integration": "aws",
+		"label": "AWS",
+		"authType": null,
+		"authLabel": null,
+		"category": "single-type"
+	},
+	{
+		"testName": "Google Calendar - User (OAuth 2.0)",
+		"integration": "calendar",
+		"label": "Google Calendar",
+		"authType": "oauth",
+		"authLabel": "User (OAuth 2.0)",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Google Calendar - Service Account (JSON Key)",
+		"integration": "calendar",
+		"label": "Google Calendar",
+		"authType": "json",
+		"authLabel": "Service Account (JSON Key)",
+		"category": "multi-type"
+	},
+	{
+		"testName": "OpenAI ChatGPT (no auth types)",
+		"integration": "chatgpt",
+		"label": "OpenAI ChatGPT",
+		"authType": null,
+		"authLabel": null,
+		"category": "single-type"
+	},
+	{
+		"testName": "Atlassian Confluence - OAuth 2.0 App",
+		"integration": "confluence",
+		"label": "Atlassian Confluence",
+		"authType": "oauth",
+		"authLabel": "OAuth 2.0 App",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Atlassian Confluence - User API Token / PAT",
+		"integration": "confluence",
+		"label": "Atlassian Confluence",
+		"authType": "apiToken",
+		"authLabel": "User API Token / PAT",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Discord (no auth types)",
+		"integration": "discord",
+		"label": "Discord",
+		"authType": null,
+		"authLabel": null,
+		"category": "single-type"
+	},
+	{
+		"testName": "Google Drive - User (OAuth 2.0)",
+		"integration": "drive",
+		"label": "Google Drive",
+		"authType": "oauth",
+		"authLabel": "User (OAuth 2.0)",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Google Drive - Service Account (JSON Key)",
+		"integration": "drive",
+		"label": "Google Drive",
+		"authType": "json",
+		"authLabel": "Service Account (JSON Key)",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Google Forms - User (OAuth 2.0)",
+		"integration": "forms",
+		"label": "Google Forms",
+		"authType": "oauth",
+		"authLabel": "User (OAuth 2.0)",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Google Forms - Service Account (JSON Key)",
+		"integration": "forms",
+		"label": "Google Forms",
+		"authType": "json",
+		"authLabel": "Service Account (JSON Key)",
+		"category": "multi-type"
+	},
+	{
+		"testName": "GitHub - OAuth v2 - Default app",
+		"integration": "github",
+		"label": "GitHub",
+		"authType": "oauth",
+		"authLabel": "OAuth v2 - Default app",
+		"category": "multi-type"
+	},
+	{
+		"testName": "GitHub - OAuth v2 - Private app",
+		"integration": "github",
+		"label": "GitHub",
+		"authType": "oauthPrivate",
+		"authLabel": "OAuth v2 - Private app",
+		"category": "multi-type"
+	},
+	{
+		"testName": "GitHub - PAT + Webhook",
+		"integration": "github",
+		"label": "GitHub",
+		"authType": "pat",
+		"authLabel": "PAT + Webhook",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Gmail - User (OAuth 2.0)",
+		"integration": "gmail",
+		"label": "Gmail",
+		"authType": "oauth",
+		"authLabel": "User (OAuth 2.0)",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Gmail - Service Account (JSON Key)",
+		"integration": "gmail",
+		"label": "Gmail",
+		"authType": "json",
+		"authLabel": "Service Account (JSON Key)",
+		"category": "multi-type"
+	},
+	{
+		"testName": "YouTube - User (OAuth 2.0)",
+		"integration": "youtube",
+		"label": "YouTube",
+		"authType": "oauth",
+		"authLabel": "User (OAuth 2.0)",
+		"category": "multi-type"
+	},
+	{
+		"testName": "YouTube - Service Account (JSON Key)",
+		"integration": "youtube",
+		"label": "YouTube",
+		"authType": "json",
+		"authLabel": "Service Account (JSON Key)",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Google Gemini (no auth types)",
+		"integration": "googlegemini",
+		"label": "Google Gemini",
+		"authType": null,
+		"authLabel": null,
+		"category": "single-type"
+	},
+	{
+		"testName": "Atlassian Jira - OAuth 2.0 App",
+		"integration": "jira",
+		"label": "Atlassian Jira",
+		"authType": "oauth",
+		"authLabel": "OAuth 2.0 App",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Atlassian Jira - User API Token / PAT",
+		"integration": "jira",
+		"label": "Atlassian Jira",
+		"authType": "apiToken",
+		"authLabel": "User API Token / PAT",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Google Sheets - User (OAuth 2.0)",
+		"integration": "sheets",
+		"label": "Google Sheets",
+		"authType": "oauth",
+		"authLabel": "User (OAuth 2.0)",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Google Sheets - Service Account (JSON Key)",
+		"integration": "sheets",
+		"label": "Google Sheets",
+		"authType": "json",
+		"authLabel": "Service Account (JSON Key)",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Slack - OAuth v2 - Default app",
+		"integration": "slack",
+		"label": "Slack",
+		"authType": "oauthDefault",
+		"authLabel": "OAuth v2 - Default app",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Slack - OAuth v2 - Private app",
+		"integration": "slack",
+		"label": "Slack",
+		"authType": "oauthPrivate",
+		"authLabel": "OAuth v2 - Private app",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Twilio - Auth Token",
+		"integration": "twilio",
+		"label": "Twilio",
+		"authType": "authToken",
+		"authLabel": "Auth Token",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Twilio - API Key",
+		"integration": "twilio",
+		"label": "Twilio",
+		"authType": "apiKey",
+		"authLabel": "API Key",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Telegram (no auth types)",
+		"integration": "telegram",
+		"label": "Telegram",
+		"authType": null,
+		"authLabel": null,
+		"category": "single-type"
+	},
+	{
+		"testName": "HubSpot (no auth types)",
+		"integration": "hubspot",
+		"label": "HubSpot",
+		"authType": null,
+		"authLabel": null,
+		"category": "single-type"
+	},
+	{
+		"testName": "Zoom - OAuth v2 - Default app",
+		"integration": "zoom",
+		"label": "Zoom",
+		"authType": "oauthDefault",
+		"authLabel": "OAuth v2 - Default app",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Zoom - OAuth v2 - Private app",
+		"integration": "zoom",
+		"label": "Zoom",
+		"authType": "oauthPrivate",
+		"authLabel": "OAuth v2 - Private app",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Zoom - Private Server-to-Server",
+		"integration": "zoom",
+		"label": "Zoom",
+		"authType": "serverToServer",
+		"authLabel": "Private Server-to-Server",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Salesforce - OAuth v2 - Default app",
+		"integration": "salesforce",
+		"label": "Salesforce",
+		"authType": "oauthDefault",
+		"authLabel": "OAuth v2 - Default app",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Salesforce - OAuth v2 - Private app",
+		"integration": "salesforce",
+		"label": "Salesforce",
+		"authType": "oauthPrivate",
+		"authLabel": "OAuth v2 - Private app",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Microsoft Teams - Default user-delegated app",
+		"integration": "microsoft_teams",
+		"label": "Microsoft Teams",
+		"authType": "oauthDefault",
+		"authLabel": "Default user-delegated app",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Microsoft Teams - Private user-delegated app",
+		"integration": "microsoft_teams",
+		"label": "Microsoft Teams",
+		"authType": "oauthPrivate",
+		"authLabel": "Private user-delegated app",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Microsoft Teams - Private daemon application",
+		"integration": "microsoft_teams",
+		"label": "Microsoft Teams",
+		"authType": "daemonApp",
+		"authLabel": "Private daemon application",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Kubernetes (no auth types)",
+		"integration": "kubernetes",
+		"label": "Kubernetes",
+		"authType": null,
+		"authLabel": null,
+		"category": "single-type"
+	},
+	{
+		"testName": "Reddit (no auth types)",
+		"integration": "reddit",
+		"label": "Reddit",
+		"authType": null,
+		"authLabel": null,
+		"category": "single-type"
+	},
+	{
+		"testName": "Pipedrive (no auth types)",
+		"integration": "pipedrive",
+		"label": "Pipedrive",
+		"authType": null,
+		"authLabel": null,
+		"category": "single-type"
+	},
+	{
+		"testName": "Notion - OAuth v2 - Default app",
+		"integration": "notion",
+		"label": "Notion",
+		"authType": "oauthDefault",
+		"authLabel": "OAuth v2 - Default app",
+		"category": "multi-type"
+	},
+	{
+		"testName": "Notion - API Key",
+		"integration": "notion",
+		"label": "Notion",
+		"authType": "apiKey",
+		"authLabel": "API Key",
+		"category": "multi-type"
+	}
+]
diff --git a/src/autokitteh b/src/autokitteh
index 7b34eb3ced..40ee308cac 160000
--- a/src/autokitteh
+++ b/src/autokitteh
@@ -1 +1 @@
-Subproject commit 7b34eb3ceddc061832d7a46be73fd9dc0f58fb0b
+Subproject commit 40ee308cac5979c0584b336c9692b9e547ff9425
diff --git a/src/components/molecules/navigationButton.tsx b/src/components/molecules/navigationButton.tsx
index b97a511e7d..2e986a8488 100644
--- a/src/components/molecules/navigationButton.tsx
+++ b/src/components/molecules/navigationButton.tsx
@@ -22,7 +22,7 @@ export const NavigationButton = ({
 	showUnderline = true,
 }: NavigationButtonProps) => {
 	const buttonClassName = cn(
-		"group relative size-full gap-2 whitespace-nowrap rounded-none bg-transparent p-3.5 text-gray-1500 hover:bg-gray-1050",
+		"group relative size-full gap-1 whitespace-nowrap rounded-none bg-transparent p-2 text-gray-1500 hover:bg-gray-1050 sm:gap-2 sm:p-3.5",
 		{
 			"bg-black font-semibold active text-white": isSelected,
 		},
diff --git a/src/components/organisms/configuration/configrationDrawer.tsx b/src/components/organisms/configuration/configrationDrawer.tsx
index 794f60fb91..78ff37ff05 100644
--- a/src/components/organisms/configuration/configrationDrawer.tsx
+++ b/src/components/organisms/configuration/configrationDrawer.tsx
@@ -5,7 +5,7 @@ import { useLocation, useParams } from "react-router-dom";
 import { defaultProjectSettingsWidth } from "@src/constants";
 import { EventListenerName } from "@src/enums";
 import { DrawerName } from "@src/enums/components";
-import { triggerEvent, useResize } from "@src/hooks";
+import { triggerEvent, useResize, useWindowDimensions } from "@src/hooks";
 import { useCacheStore, useSharedBetweenProjectsStore } from "@src/store";
 import { cn } from "@src/utilities";
 import { extractSettingsPath } from "@src/utilities/navigation";
@@ -19,6 +19,9 @@ export const ProjectConfigurationDrawer = () => {
 	const location = useLocation();
 	const setProjectSettingsWidth = useSharedBetweenProjectsStore((state) => state.setProjectSettingsWidth);
 	const projectSettingsWidth = useSharedBetweenProjectsStore((state) => state.projectSettingsWidth);
+	const { isMobile, isTablet } = useWindowDimensions();
+
+	const isMobileOrTablet = isMobile || isTablet;
 
 	const fetchTriggers = useCacheStore((state) => state.fetchTriggers);
 	const fetchVariables = useCacheStore((state) => state.fetchVariables);
@@ -63,29 +66,36 @@ export const ProjectConfigurationDrawer = () => {
 
 	const className = cn(
 		"flex h-full flex-col overflow-y-auto overflow-x-hidden bg-gray-1100",
-		"rounded-r-2xl px-8 py-3 sm:py-5 md:py-7"
+		"rounded-r-2xl px-4 py-3 sm:px-6 sm:py-5 md:px-8 md:py-7"
 	);
 
+	const mobileWidth = isMobileOrTablet ? 100 : drawerWidth;
+
 	return (
 		<Drawer
-			bgClickable
-			bgTransparent
+			bgClickable={!isMobileOrTablet}
+			bgTransparent={!isMobileOrTablet}
 			className={className}
 			divId="project-sidebar-config"
 			isForcedOpen={true}
 			isScreenHeight={false}
 			name={DrawerName.settings}
 			onCloseCallback={() => triggerEvent(EventListenerName.hideProjectConfigSidebar)}
-			width={drawerWidth}
-			wrapperClassName="p-0 relative absolute rounded-r-2xl"
+			width={mobileWidth}
+			wrapperClassName={cn("absolute p-0", {
+				"rounded-r-2xl": !isMobileOrTablet,
+				"rounded-none": isMobileOrTablet,
+			})}
 		>
 			<ConfigurationBySubPath settingsSubPath={settingsSubPath} />
-			<ResizeButton
-				className="absolute left-0 right-auto top-1/2 z-[125] w-2 -translate-y-1/2 cursor-ew-resize px-1 hover:bg-white"
-				direction="horizontal"
-				id="project-config-drawer-resize-button"
-				resizeId="project-config-drawer-resize"
-			/>
+			{!isMobileOrTablet ? (
+				<ResizeButton
+					className="absolute left-0 right-auto top-1/2 z-[125] w-2 -translate-y-1/2 cursor-ew-resize px-1 hover:bg-white"
+					direction="horizontal"
+					id="project-config-drawer-resize-button"
+					resizeId="project-config-drawer-resize"
+				/>
+			) : null}
 		</Drawer>
 	);
 };
diff --git a/src/components/organisms/sidebar/sidebar.tsx b/src/components/organisms/sidebar/sidebar.tsx
index 6e966ef44b..64e0c0f8e5 100644
--- a/src/components/organisms/sidebar/sidebar.tsx
+++ b/src/components/organisms/sidebar/sidebar.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useMemo, useState } from "react";
+import React, { Suspense, useCallback, useEffect, useMemo, useState } from "react";
 
 import { AnimatePresence, motion } from "motion/react";
 import Avatar from "react-avatar";
@@ -7,6 +7,7 @@ import { LuUnplug } from "react-icons/lu";
 import { useLocation, useNavigate } from "react-router-dom";
 
 import { descopeProjectId, featureFlags } from "@constants";
+import { useWindowDimensions } from "@src/hooks";
 import { cn } from "@src/utilities";
 
 import { useLoggerStore, useOrganizationStore, useToastStore } from "@store";
@@ -31,11 +32,18 @@ export const Sidebar = () => {
 	const { t } = useTranslation("sidebar");
 	const addToast = useToastStore((state) => state.addToast);
 	const navigate = useNavigate();
+	const { isMobile, isTablet } = useWindowDimensions();
+
+	const isMobileOrTablet = isMobile || isTablet;
 
 	useEffect(() => {
 		setIsOpen(false);
 	}, [location.pathname]);
 
+	const handleCloseSidebar = useCallback(() => {
+		setIsOpen(false);
+	}, []);
+
 	const loadOrganizations = async () => {
 		const { data, error } = await getEnrichedOrganizations();
 		if (error || !data) {
@@ -70,14 +78,45 @@ export const Sidebar = () => {
 	};
 
 	const rootClassName = useMemo(
-		() => cn("relative z-30 flex h-full items-start", { "z-50": isFeedbackOpen }),
-		[isFeedbackOpen]
+		() =>
+			cn("relative z-30 flex h-full items-start", {
+				"z-50": isFeedbackOpen,
+				"fixed left-0 top-0 z-50": isMobileOrTablet && isOpen,
+				hidden: isMobileOrTablet && !isOpen,
+			}),
+		[isFeedbackOpen, isMobileOrTablet, isOpen]
+	);
+
+	const sidebarContentClassName = useMemo(
+		() =>
+			cn("z-10 flex h-full flex-col justify-between bg-white p-2.5 pb-3 pt-6", {
+				"min-w-[60px]": !isMobileOrTablet,
+				"shadow-xl": isMobileOrTablet && isOpen,
+			}),
+		[isMobileOrTablet, isOpen]
 	);
 
 	return (
 		<Suspense fallback={<Loader isCenter size="lg" />}>
+			{isMobileOrTablet && !isOpen ? (
+				<Button
+					ariaLabel={t("openSidebar")}
+					className="fixed left-2 top-2 z-50 rounded-lg bg-white p-2 shadow-lg hover:bg-gray-100 lg:hidden"
+					onClick={() => setIsOpen(true)}
+					title={t("openSidebar")}
+				>
+					<MenuToggle className="flex w-6 items-center justify-center" isOpen={false} />
+				</Button>
+			) : null}
+			{isMobileOrTablet && isOpen ? (
+				<div
+					aria-hidden="true"
+					className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm"
+					onClick={handleCloseSidebar}
+				/>
+			) : null}
 			<div className={rootClassName}>
-				<div className="z-10 flex h-full flex-col justify-between bg-white p-2.5 pb-3 pt-6">
+				<div className={sidebarContentClassName}>
 					<div>
 						<Button
 							className="ml-1 flex items-center justify-start gap-2.5"
diff --git a/src/components/organisms/splitFrame.tsx b/src/components/organisms/splitFrame.tsx
index ed0a3c8fb1..caebc3270c 100644
--- a/src/components/organisms/splitFrame.tsx
+++ b/src/components/organisms/splitFrame.tsx
@@ -5,21 +5,23 @@ import { useParams, useLocation } from "react-router-dom";
 import { TourId } from "@enums";
 import { SplitFrameProps } from "@interfaces/components";
 import { defaultSplitFrameSize, tourStepsHTMLIds } from "@src/constants";
+import { useWindowDimensions, useResize } from "@src/hooks";
 import { useSharedBetweenProjectsStore, useTourStore } from "@src/store";
 import { cn } from "@utilities";
 
-import { useResize } from "@hooks";
-
 import { Frame, ResizeButton } from "@components/atoms";
 import { EditorTabs } from "@components/organisms";
 
 export const SplitFrame = ({ children, rightFrameClass: rightBoxClass }: SplitFrameProps) => {
 	const resizeHorizontalId = useId();
-	const { projectSplitScreenWidth, setProjectSplitScreenWidth, isProjectFilesVisible } =
+	const { projectSplitScreenWidth, setProjectSplitScreenWidth, isProjectFilesVisible, setIsProjectFilesVisible } =
 		useSharedBetweenProjectsStore();
 	const { projectId } = useParams();
 	const { pathname } = useLocation();
 	const { activeTour } = useTourStore();
+	const { isMobile, isTablet } = useWindowDimensions();
+
+	const isMobileOrTablet = isMobile || isTablet;
 
 	const [leftSideWidth] = useResize({
 		direction: "horizontal",
@@ -51,16 +53,41 @@ export const SplitFrame = ({ children, rightFrameClass: rightBoxClass }: SplitFr
 	const rightFrameClass = cn(
 		`h-full overflow-hidden rounded-l-none pb-0`,
 		{
-			"rounded-2xl": !children || leftSideWidth === 0 || !shouldShowProjectFiles,
+			"rounded-2xl": !children || leftSideWidth === 0 || !shouldShowProjectFiles || isMobileOrTablet,
 		},
 		rightBoxClass
 	);
 
-	const leftFrameClass = cn(`h-full flex-auto rounded-r-none border-r border-gray-1050 bg-gray-1100`);
+	const leftFrameClass = cn(`h-full flex-auto rounded-r-none border-r border-gray-1050 bg-gray-1100`, {
+		"fixed inset-0 z-40 rounded-none border-0": isMobileOrTablet,
+	});
+
+	const handleCloseMobileFiles = () => {
+		if (projectId) {
+			setIsProjectFilesVisible(projectId, false);
+		}
+	};
+
+	const showFilesPanel = leftSideWidth > 0 && shouldShowProjectFiles;
+	const showDesktopFiles = showFilesPanel && !isMobileOrTablet;
+	const showMobileFiles = showFilesPanel && isMobileOrTablet;
 
 	return (
 		<div className="flex size-full overflow-hidden">
-			{leftSideWidth > 0 && shouldShowProjectFiles ? (
+			{showMobileFiles ? (
+				<>
+					<div
+						aria-hidden="true"
+						className="fixed inset-0 z-30 bg-black/50 backdrop-blur-sm"
+						onClick={handleCloseMobileFiles}
+					/>
+					<div className="fixed inset-0 z-40 p-4">
+						{children ? <Frame className={leftFrameClass}>{children}</Frame> : null}
+					</div>
+				</>
+			) : null}
+
+			{showDesktopFiles ? (
 				<>
 					<div style={{ width: `${leftSideWidth}%`, minWidth: 0 }}>
 						{children ? <Frame className={leftFrameClass}>{children}</Frame> : null}
diff --git a/src/components/organisms/topbar/project/buttons.tsx b/src/components/organisms/topbar/project/buttons.tsx
index 107e06a9bb..0557cacc8e 100644
--- a/src/components/organisms/topbar/project/buttons.tsx
+++ b/src/components/organisms/topbar/project/buttons.tsx
@@ -285,19 +285,19 @@ export const ProjectTopbarButtons = () => {
 	const isDeployAndBuildDisabled = Object.values(actionInProcess).some((value) => value);
 
 	return (
-		<div className="flex items-center gap-3 pr-2 maxScreenWidth-1600:gap-1.5">
+		<div className="flex items-center gap-1 pr-1 sm:gap-1.5 sm:pr-2 lg:gap-3 maxScreenWidth-1600:gap-1.5">
 			<PopoverWrapper interactionType="hover" placement="top">
 				<PopoverTrigger>
 					<Button
 						ariaLabel={t("topbar.buttons.ariaBuildProject")}
-						className="group h-8 whitespace-nowrap px-3.5 text-white maxScreenWidth-1600:px-2"
+						className="group h-7 whitespace-nowrap px-2 text-white sm:h-8 sm:px-2.5 lg:px-3.5 maxScreenWidth-1600:px-2"
 						disabled={isDeployAndBuildDisabled}
 						onClick={debouncedBuild}
 						title={isValid ? t("topbar.buttons.build") : projectErrors}
 						variant="outline"
 					>
 						{actionInProcess[ProjectActions.build] ? (
-							<Spinner className="size-4" />
+							<Spinner className="size-3 sm:size-4" />
 						) : (
 							<IconSvg
 								className="stroke-white transition group-hover:stroke-green-200 group-active:stroke-green-800"
@@ -306,7 +306,7 @@ export const ProjectTopbarButtons = () => {
 							/>
 						)}
 
-						<span className="maxScreenWidth-1600:hidden">{t("topbar.buttons.build")}</span>
+						<span className="hidden lg:inline maxScreenWidth-1600:hidden">{t("topbar.buttons.build")}</span>
 					</Button>
 				</PopoverTrigger>
 				<PopoverContent className="border border-gray-700 bg-gray-900 p-1 text-xs text-white">
@@ -318,7 +318,7 @@ export const ProjectTopbarButtons = () => {
 				<PopoverTrigger>
 					<Button
 						ariaLabel={t("topbar.buttons.ariaDeployProject")}
-						className="group h-8 items-center whitespace-nowrap px-3.5 text-white maxScreenWidth-1600:px-2"
+						className="group h-7 items-center whitespace-nowrap px-2 text-white sm:h-8 sm:px-2.5 lg:px-3.5 maxScreenWidth-1600:px-2"
 						disabled={isDeployAndBuildDisabled}
 						id={tourStepsHTMLIds.deployButton}
 						onClick={debouncedDeploy}
@@ -326,7 +326,7 @@ export const ProjectTopbarButtons = () => {
 						variant="outline"
 					>
 						{actionInProcess[ProjectActions.deploy] ? (
-							<Spinner className="size-4" />
+							<Spinner className="size-3 sm:size-4" />
 						) : (
 							<IconSvg
 								className="fill-white transition group-hover:fill-green-200 group-active:fill-green-800"
@@ -335,7 +335,9 @@ export const ProjectTopbarButtons = () => {
 							/>
 						)}
 
-						<span className="maxScreenWidth-1600:hidden">{t("topbar.buttons.deploy")}</span>
+						<span className="hidden lg:inline maxScreenWidth-1600:hidden">
+							{t("topbar.buttons.deploy")}
+						</span>
 					</Button>
 				</PopoverTrigger>
 				<PopoverContent className="border border-gray-700 bg-gray-900 p-1 text-xs text-white">
@@ -349,7 +351,7 @@ export const ProjectTopbarButtons = () => {
 				<PopoverTrigger>
 					<Button
 						ariaLabel={t("topbar.buttons.projectActionsMenu")}
-						className="group h-8 whitespace-nowrap px-4 text-white maxScreenWidth-1600:px-2"
+						className="group h-7 whitespace-nowrap px-2 text-white sm:h-8 sm:px-2.5 lg:px-4 maxScreenWidth-1600:px-2"
 						title={t("topbar.buttons.projectActionsMenu")}
 						variant="outline"
 					>
@@ -359,7 +361,9 @@ export const ProjectTopbarButtons = () => {
 							src={MoreIcon}
 						/>
 
-						<span className="maxScreenWidth-1600:hidden">{t("more", { ns: "buttons" })}</span>
+						<span className="hidden lg:inline maxScreenWidth-1600:hidden">
+							{t("more", { ns: "buttons" })}
+						</span>
 					</Button>
 				</PopoverTrigger>
 				<PopoverContent className="flex flex-col gap-2 border border-gray-700 bg-gray-900 p-2">
diff --git a/src/components/organisms/topbar/project/navigation.tsx b/src/components/organisms/topbar/project/navigation.tsx
index cb5bd04fd7..acffa2028e 100644
--- a/src/components/organisms/topbar/project/navigation.tsx
+++ b/src/components/organisms/topbar/project/navigation.tsx
@@ -84,7 +84,7 @@ export const ProjectTopbarNavigation = () => {
 	}
 
 	return (
-		<div className="ml-50 mr-auto flex items-stretch divide-x divide-gray-750 border-x border-gray-750">
+		<div className="ml-2 mr-auto flex items-stretch divide-x divide-gray-750 overflow-x-auto border-x border-gray-750 [-ms-overflow-style:none] [scrollbar-width:none] sm:ml-4 md:ml-8 lg:ml-50 [&::-webkit-scrollbar]:hidden">
 			<NavigationButton
 				ariaLabel="Explorer"
 				icon={AssetsIcon}
diff --git a/src/components/organisms/topbar/project/projectName.tsx b/src/components/organisms/topbar/project/projectName.tsx
index a7da0aa81e..bebfd7f03c 100644
--- a/src/components/organisms/topbar/project/projectName.tsx
+++ b/src/components/organisms/topbar/project/projectName.tsx
@@ -23,7 +23,8 @@ export const ProjectTopbarName = () => {
 	const { t } = useTranslation(["projects", "buttons"]);
 	const { t: tErrors } = useTranslation("errors");
 	const inputClass = cn(
-		"h-auto min-w-3 max-w-240 rounded-lg p-0 text-xl font-bold leading-tight outline outline-0 transition maxScreenWidth-1600:max-w-160",
+		"h-auto min-w-3 rounded-lg p-0 font-bold leading-tight outline outline-0 transition",
+		"max-w-[120px] text-base sm:max-w-160 sm:text-lg md:max-w-[200px] md:text-xl lg:max-w-240 maxScreenWidth-1600:max-w-160",
 		{
 			"outline-2 outline-error": !isNameValid,
 		}
@@ -93,7 +94,7 @@ export const ProjectTopbarName = () => {
 	};
 
 	return (
-		<div className="flex items-center gap-3 py-2 font-fira-code">
+		<div className="flex items-center gap-1.5 py-2 font-fira-code sm:gap-3">
 			{isEditing ? (
 				<Input
 					// eslint-disable-next-line jsx-a11y/no-autofocus
@@ -119,7 +120,7 @@ export const ProjectTopbarName = () => {
 				>
 					<EditIcon className="absolute -left-4 size-4 bg-gray-1250 fill-white p-0.5 opacity-0 transition group-hover:opacity-100" />
 					<span
-						className="max-w-240 truncate text-xl font-bold maxScreenWidth-1600:max-w-160"
+						className="max-w-[120px] truncate text-base font-bold sm:max-w-160 sm:text-lg md:max-w-[200px] md:text-xl lg:max-w-240 maxScreenWidth-1600:max-w-160"
 						title={project?.name}
 					>
 						{project?.name}
@@ -131,7 +132,7 @@ export const ProjectTopbarName = () => {
 				{!isNameValid ? t("nameRequired", { ns: "errors" }) : null}
 			</ErrorMessage>
 
-			<span className="flex items-center font-fira-code font-semibold text-gray-500">
+			<span className="hidden items-center font-fira-code font-semibold text-gray-500 sm:flex">
 				<div className="mr-2 pr-0.5">{t("topbar.id")}</div>
 				<IdCopyButton hideId id={projectId!} />
 			</span>
diff --git a/src/components/organisms/topbar/project/projectSettings.tsx b/src/components/organisms/topbar/project/projectSettings.tsx
index dc3cb9ed92..03a4cd2799 100644
--- a/src/components/organisms/topbar/project/projectSettings.tsx
+++ b/src/components/organisms/topbar/project/projectSettings.tsx
@@ -26,7 +26,7 @@ export const ProjectSettingsTopbar = () => {
 	}, [projectId]);
 
 	return (
-		<div className="flex justify-between rounded-b-xl bg-gray-1250 pl-7">
+		<div className="flex flex-wrap items-center justify-between gap-1 rounded-b-xl bg-gray-1250 pl-4 md:pl-7 lg:flex-nowrap lg:gap-0 max-md:pl-12">
 			<ProjectTopbarName />
 			<ProjectTopbarNavigation />
 			<ProjectTopbarButtons />
diff --git a/src/components/organisms/welcome.tsx b/src/components/organisms/welcome.tsx
index 6d9d60f54f..369b05c390 100644
--- a/src/components/organisms/welcome.tsx
+++ b/src/components/organisms/welcome.tsx
@@ -69,7 +69,7 @@ export const WelcomePage = () => {
 	};
 
 	return (
-		<div className="size-full overflow-hidden rounded-none md:mt-2 md:rounded-2xl">
+		<div className="size-full overflow-y-auto rounded-none md:mt-2 md:overflow-hidden md:rounded-2xl">
 			<LoadingOverlay isLoading={isLoading} />
 
 			<div className="flex min-h-screen flex-col overflow-y-auto bg-gradient-to-b from-gray-1250 to-gray-1100">
diff --git a/src/components/pages/project.tsx b/src/components/pages/project.tsx
index f5c3ad4723..6bb89d354f 100644
--- a/src/components/pages/project.tsx
+++ b/src/components/pages/project.tsx
@@ -63,7 +63,7 @@ export const Project = () => {
 				{!showFiles ? (
 					<Button
 						ariaLabel="Show Project Files"
-						className="absolute left-4 top-7 z-10 rounded-lg bg-gray-900 p-2 hover:bg-gray-800"
+						className="absolute left-2 top-14 z-20 rounded-lg bg-gray-900 p-2 hover:bg-gray-800 lg:left-4 lg:top-7"
 						data-testid="show-project-files-button"
 						id="show-project-files-button"
 						onClick={handleShowProjectFiles}
diff --git a/src/locales/en/tabs/translation.json b/src/locales/en/tabs/translation.json
index af554b2520..72ab8fa7ab 100644
--- a/src/locales/en/tabs/translation.json
+++ b/src/locales/en/tabs/translation.json
@@ -281,4 +281,4 @@
 		"variableRemovedSuccessfully": "{{variableName}} removed successfully",
 		"variableRemovedSuccessfullyExtended": "{{variableName}} removed successfully, variable ID: {{variableId}}"
 	}
-}
\ No newline at end of file
+}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index ca9a7e4f93..bb0302c28a 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -109,6 +109,9 @@ module.exports = {
 			"4xl": "1936px",
 			minHeightLg: { raw: "(min-height: 1000px)" },
 			"maxScreenWidth-1600": { raw: "(max-width: 1600px)" },
+			"max-lg": { raw: "(max-width: 1023px)" },
+			"max-md": { raw: "(max-width: 767px)" },
+			"max-sm": { raw: "(max-width: 639px)" },
 		},
 		colors: {
 			transparent: "transparent",