diff --git a/packages/backend/src/apps/airtable/index.js b/packages/backend/src/apps/airtable/index.js
index 81ecaf78..8910add7 100644
--- a/packages/backend/src/apps/airtable/index.js
+++ b/packages/backend/src/apps/airtable/index.js
@@ -12,7 +12,7 @@ export default defineApp({
   apiBaseUrl: 'https://api.airtable.com',
   iconUrl: '{BASE_URL}/apps/airtable/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/airtable/connection',
-  primaryColor: 'FFBF00',
+  primaryColor: '#FFBF00',
   supportsConnections: true,
   beforeRequest: [addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/appwrite/index.js b/packages/backend/src/apps/appwrite/index.js
index 735c2491..199203e0 100644
--- a/packages/backend/src/apps/appwrite/index.js
+++ b/packages/backend/src/apps/appwrite/index.js
@@ -12,7 +12,7 @@ export default defineApp({
   apiBaseUrl: 'https://cloud.appwrite.io',
   iconUrl: '{BASE_URL}/apps/appwrite/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/appwrite/connection',
-  primaryColor: 'FD366E',
+  primaryColor: '#FD366E',
   supportsConnections: true,
   beforeRequest: [setBaseUrl, addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/azure-openai/index.js b/packages/backend/src/apps/azure-openai/index.js
index e42652f6..a997c3f6 100644
--- a/packages/backend/src/apps/azure-openai/index.js
+++ b/packages/backend/src/apps/azure-openai/index.js
@@ -12,7 +12,7 @@ export default defineApp({
   apiBaseUrl: '',
   iconUrl: '{BASE_URL}/apps/azure-openai/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/azure-openai/connection',
-  primaryColor: '000000',
+  primaryColor: '#000000',
   supportsConnections: true,
   beforeRequest: [setBaseUrl, addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/carbone/index.js b/packages/backend/src/apps/carbone/index.js
index 10d743f3..18abec9f 100644
--- a/packages/backend/src/apps/carbone/index.js
+++ b/packages/backend/src/apps/carbone/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://carbone.io',
   apiBaseUrl: 'https://api.carbone.io',
-  primaryColor: '6f42c1',
+  primaryColor: '#6f42c1',
   beforeRequest: [addAuthHeader],
   auth,
   actions,
diff --git a/packages/backend/src/apps/clickup/index.js b/packages/backend/src/apps/clickup/index.js
index 19d68051..45bd0b48 100644
--- a/packages/backend/src/apps/clickup/index.js
+++ b/packages/backend/src/apps/clickup/index.js
@@ -13,7 +13,7 @@ export default defineApp({
   apiBaseUrl: 'https://api.clickup.com/api',
   iconUrl: '{BASE_URL}/apps/clickup/assets/favicon.svg',
   authDocUrl: 'https://automatisch.io/docs/apps/clickup/connection',
-  primaryColor: 'FD71AF',
+  primaryColor: '#FD71AF',
   supportsConnections: true,
   beforeRequest: [addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/code/index.js b/packages/backend/src/apps/code/index.js
index 36e9e5ed..bc92c1e2 100644
--- a/packages/backend/src/apps/code/index.js
+++ b/packages/backend/src/apps/code/index.js
@@ -8,7 +8,7 @@ export default defineApp({
   apiBaseUrl: '',
   iconUrl: '{BASE_URL}/apps/code/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/code/connection',
-  primaryColor: '000000',
+  primaryColor: '#000000',
   supportsConnections: false,
   actions,
 });
diff --git a/packages/backend/src/apps/cryptography/index.js b/packages/backend/src/apps/cryptography/index.js
index 23e57b2e..c3ab033a 100644
--- a/packages/backend/src/apps/cryptography/index.js
+++ b/packages/backend/src/apps/cryptography/index.js
@@ -9,6 +9,6 @@ export default defineApp({
   supportsConnections: false,
   baseUrl: '',
   apiBaseUrl: '',
-  primaryColor: '001F52',
+  primaryColor: '#001F52',
   actions,
 });
diff --git a/packages/backend/src/apps/datastore/index.js b/packages/backend/src/apps/datastore/index.js
index 4a90b389..05620279 100644
--- a/packages/backend/src/apps/datastore/index.js
+++ b/packages/backend/src/apps/datastore/index.js
@@ -9,6 +9,6 @@ export default defineApp({
   supportsConnections: false,
   baseUrl: '',
   apiBaseUrl: '',
-  primaryColor: '001F52',
+  primaryColor: '#001F52',
   actions,
 });
diff --git a/packages/backend/src/apps/deepl/index.js b/packages/backend/src/apps/deepl/index.js
index 0e776e66..5ae5c0dd 100644
--- a/packages/backend/src/apps/deepl/index.js
+++ b/packages/backend/src/apps/deepl/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://deepl.com',
   apiBaseUrl: 'https://api.deepl.com',
-  primaryColor: '0d2d45',
+  primaryColor: '#0d2d45',
   beforeRequest: [addAuthHeader],
   auth,
   actions,
diff --git a/packages/backend/src/apps/delay/index.js b/packages/backend/src/apps/delay/index.js
index c0ac2059..e89f3741 100644
--- a/packages/backend/src/apps/delay/index.js
+++ b/packages/backend/src/apps/delay/index.js
@@ -9,6 +9,6 @@ export default defineApp({
   supportsConnections: false,
   baseUrl: '',
   apiBaseUrl: '',
-  primaryColor: '001F52',
+  primaryColor: '#001F52',
   actions,
 });
diff --git a/packages/backend/src/apps/discord/index.js b/packages/backend/src/apps/discord/index.js
index bc8caa1f..35255fc5 100644
--- a/packages/backend/src/apps/discord/index.js
+++ b/packages/backend/src/apps/discord/index.js
@@ -14,7 +14,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://discord.com',
   apiBaseUrl: 'https://discord.com/api',
-  primaryColor: '5865f2',
+  primaryColor: '#5865f2',
   beforeRequest: [addAuthHeader],
   auth,
   dynamicData,
diff --git a/packages/backend/src/apps/disqus/index.js b/packages/backend/src/apps/disqus/index.js
index 43670ac4..fd0af223 100644
--- a/packages/backend/src/apps/disqus/index.js
+++ b/packages/backend/src/apps/disqus/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   apiBaseUrl: 'https://disqus.com/api',
   iconUrl: '{BASE_URL}/apps/disqus/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/disqus/connection',
-  primaryColor: '2E9FFF',
+  primaryColor: '#2E9FFF',
   supportsConnections: true,
   beforeRequest: [addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/dropbox/index.js b/packages/backend/src/apps/dropbox/index.js
index 8ab7e94f..c0d167da 100644
--- a/packages/backend/src/apps/dropbox/index.js
+++ b/packages/backend/src/apps/dropbox/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://dropbox.com',
   apiBaseUrl: 'https://api.dropboxapi.com',
-  primaryColor: '0061ff',
+  primaryColor: '#0061ff',
   beforeRequest: [addAuthHeader],
   auth,
   actions,
diff --git a/packages/backend/src/apps/filter/index.js b/packages/backend/src/apps/filter/index.js
index 1fa756c4..9854e133 100644
--- a/packages/backend/src/apps/filter/index.js
+++ b/packages/backend/src/apps/filter/index.js
@@ -9,6 +9,6 @@ export default defineApp({
   supportsConnections: false,
   baseUrl: '',
   apiBaseUrl: '',
-  primaryColor: '001F52',
+  primaryColor: '#001F52',
   actions,
 });
diff --git a/packages/backend/src/apps/flickr/index.js b/packages/backend/src/apps/flickr/index.js
index 7a079d38..adea955a 100644
--- a/packages/backend/src/apps/flickr/index.js
+++ b/packages/backend/src/apps/flickr/index.js
@@ -10,7 +10,7 @@ export default defineApp({
   iconUrl: '{BASE_URL}/apps/flickr/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/flickr/connection',
   docUrl: 'https://automatisch.io/docs/flickr',
-  primaryColor: '000000',
+  primaryColor: '#000000',
   supportsConnections: true,
   baseUrl: 'https://www.flickr.com/',
   apiBaseUrl: 'https://www.flickr.com/services',
diff --git a/packages/backend/src/apps/flowers-software/index.js b/packages/backend/src/apps/flowers-software/index.js
index b2665bcc..c2dd05a3 100644
--- a/packages/backend/src/apps/flowers-software/index.js
+++ b/packages/backend/src/apps/flowers-software/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://flowers-software.com',
   apiBaseUrl: 'https://webapp.flowers-software.com/api',
-  primaryColor: '02AFC7',
+  primaryColor: '#02AFC7',
   beforeRequest: [addAuthHeader],
   auth,
   triggers,
diff --git a/packages/backend/src/apps/formatter/index.js b/packages/backend/src/apps/formatter/index.js
index 96a6a39e..9ae22b80 100644
--- a/packages/backend/src/apps/formatter/index.js
+++ b/packages/backend/src/apps/formatter/index.js
@@ -10,7 +10,7 @@ export default defineApp({
   supportsConnections: false,
   baseUrl: '',
   apiBaseUrl: '',
-  primaryColor: '001F52',
+  primaryColor: '#001F52',
   actions,
   dynamicFields,
 });
diff --git a/packages/backend/src/apps/ghost/index.js b/packages/backend/src/apps/ghost/index.js
index 81019b93..4efd4945 100644
--- a/packages/backend/src/apps/ghost/index.js
+++ b/packages/backend/src/apps/ghost/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   apiBaseUrl: '',
   iconUrl: '{BASE_URL}/apps/ghost/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/ghost/connection',
-  primaryColor: '15171A',
+  primaryColor: '#15171A',
   supportsConnections: true,
   beforeRequest: [setBaseUrl, addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/github/index.js b/packages/backend/src/apps/github/index.js
index c7dbb18f..194ed047 100644
--- a/packages/backend/src/apps/github/index.js
+++ b/packages/backend/src/apps/github/index.js
@@ -12,7 +12,7 @@ export default defineApp({
   apiBaseUrl: 'https://api.github.com',
   iconUrl: '{BASE_URL}/apps/github/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/github/connection',
-  primaryColor: '000000',
+  primaryColor: '#000000',
   supportsConnections: true,
   beforeRequest: [addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/gitlab/index.js b/packages/backend/src/apps/gitlab/index.js
index 793da675..098f7d5b 100644
--- a/packages/backend/src/apps/gitlab/index.js
+++ b/packages/backend/src/apps/gitlab/index.js
@@ -12,7 +12,7 @@ export default defineApp({
   apiBaseUrl: 'https://gitlab.com',
   iconUrl: '{BASE_URL}/apps/gitlab/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/gitlab/connection',
-  primaryColor: 'FC6D26',
+  primaryColor: '#FC6D26',
   supportsConnections: true,
   beforeRequest: [setBaseUrl, addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/google-calendar/index.js b/packages/backend/src/apps/google-calendar/index.js
index 00fa076a..89ef0976 100644
--- a/packages/backend/src/apps/google-calendar/index.js
+++ b/packages/backend/src/apps/google-calendar/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   apiBaseUrl: 'https://www.googleapis.com/calendar',
   iconUrl: '{BASE_URL}/apps/google-calendar/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/google-calendar/connection',
-  primaryColor: '448AFF',
+  primaryColor: '#448AFF',
   supportsConnections: true,
   beforeRequest: [addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/google-drive/index.js b/packages/backend/src/apps/google-drive/index.js
index 93e0833b..cde09499 100644
--- a/packages/backend/src/apps/google-drive/index.js
+++ b/packages/backend/src/apps/google-drive/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   apiBaseUrl: 'https://www.googleapis.com/drive',
   iconUrl: '{BASE_URL}/apps/google-drive/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/google-drive/connection',
-  primaryColor: '1FA463',
+  primaryColor: '#1FA463',
   supportsConnections: true,
   beforeRequest: [addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/google-forms/index.js b/packages/backend/src/apps/google-forms/index.js
index ae4fc49a..e3b6d89e 100644
--- a/packages/backend/src/apps/google-forms/index.js
+++ b/packages/backend/src/apps/google-forms/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   apiBaseUrl: 'https://forms.googleapis.com',
   iconUrl: '{BASE_URL}/apps/google-forms/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/google-forms/connection',
-  primaryColor: '673AB7',
+  primaryColor: '#673AB7',
   supportsConnections: true,
   beforeRequest: [addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/google-sheets/index.js b/packages/backend/src/apps/google-sheets/index.js
index 9412b5d3..d4963027 100644
--- a/packages/backend/src/apps/google-sheets/index.js
+++ b/packages/backend/src/apps/google-sheets/index.js
@@ -13,7 +13,7 @@ export default defineApp({
   apiBaseUrl: 'https://sheets.googleapis.com',
   iconUrl: '{BASE_URL}/apps/google-sheets/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/google-sheets/connection',
-  primaryColor: '0F9D58',
+  primaryColor: '#0F9D58',
   supportsConnections: true,
   beforeRequest: [addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/google-tasks/index.js b/packages/backend/src/apps/google-tasks/index.js
index cbc45587..88b3edca 100644
--- a/packages/backend/src/apps/google-tasks/index.js
+++ b/packages/backend/src/apps/google-tasks/index.js
@@ -12,7 +12,7 @@ export default defineApp({
   apiBaseUrl: 'https://tasks.googleapis.com',
   iconUrl: '{BASE_URL}/apps/google-tasks/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/google-tasks/connection',
-  primaryColor: '0066DA',
+  primaryColor: '#0066DA',
   supportsConnections: true,
   beforeRequest: [addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/helix/index.js b/packages/backend/src/apps/helix/index.js
index 9915abcd..ebdf6bc1 100644
--- a/packages/backend/src/apps/helix/index.js
+++ b/packages/backend/src/apps/helix/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   apiBaseUrl: 'https://app.tryhelix.ai',
   iconUrl: '{BASE_URL}/apps/helix/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/helix/connection',
-  primaryColor: '000000',
+  primaryColor: '#000000',
   supportsConnections: true,
   beforeRequest: [setBaseUrl, addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/http-request/index.js b/packages/backend/src/apps/http-request/index.js
index 7854c08a..b53c1fc2 100644
--- a/packages/backend/src/apps/http-request/index.js
+++ b/packages/backend/src/apps/http-request/index.js
@@ -9,6 +9,6 @@ export default defineApp({
   supportsConnections: false,
   baseUrl: '',
   apiBaseUrl: '',
-  primaryColor: '000000',
+  primaryColor: '#000000',
   actions,
 });
diff --git a/packages/backend/src/apps/hubspot/index.js b/packages/backend/src/apps/hubspot/index.js
index c34c6d74..f7cae7eb 100644
--- a/packages/backend/src/apps/hubspot/index.js
+++ b/packages/backend/src/apps/hubspot/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://www.hubspot.com',
   apiBaseUrl: 'https://api.hubapi.com',
-  primaryColor: 'F95C35',
+  primaryColor: '#F95C35',
   beforeRequest: [addAuthHeader],
   auth,
   actions,
diff --git a/packages/backend/src/apps/invoice-ninja/index.js b/packages/backend/src/apps/invoice-ninja/index.js
index 688ffc01..891af094 100644
--- a/packages/backend/src/apps/invoice-ninja/index.js
+++ b/packages/backend/src/apps/invoice-ninja/index.js
@@ -13,7 +13,7 @@ export default defineApp({
   apiBaseUrl: 'https://invoicing.co/api',
   iconUrl: '{BASE_URL}/apps/invoice-ninja/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/invoice-ninja/connection',
-  primaryColor: '000000',
+  primaryColor: '#000000',
   supportsConnections: true,
   beforeRequest: [setBaseUrl, addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/jotform/index.js b/packages/backend/src/apps/jotform/index.js
index b4242bdc..e37ccbb9 100644
--- a/packages/backend/src/apps/jotform/index.js
+++ b/packages/backend/src/apps/jotform/index.js
@@ -13,7 +13,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://www.jotform.com',
   apiBaseUrl: 'https://api.jotform.com',
-  primaryColor: 'FF6100',
+  primaryColor: '#FF6100',
   beforeRequest: [setBaseUrl, addAuthHeader],
   auth,
   triggers,
diff --git a/packages/backend/src/apps/mailchimp/index.js b/packages/backend/src/apps/mailchimp/index.js
index c3b01e63..1cda0459 100644
--- a/packages/backend/src/apps/mailchimp/index.js
+++ b/packages/backend/src/apps/mailchimp/index.js
@@ -13,7 +13,7 @@ export default defineApp({
   apiBaseUrl: '',
   iconUrl: '{BASE_URL}/apps/mailchimp/assets/favicon.svg',
   authDocUrl: 'https://automatisch.io/docs/apps/mailchimp/connection',
-  primaryColor: '000000',
+  primaryColor: '#000000',
   supportsConnections: true,
   beforeRequest: [setBaseUrl, addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/mailerlite/index.js b/packages/backend/src/apps/mailerlite/index.js
index 1e69498b..a81123df 100644
--- a/packages/backend/src/apps/mailerlite/index.js
+++ b/packages/backend/src/apps/mailerlite/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://www.mailerlite.com',
   apiBaseUrl: 'https://connect.mailerlite.com/api',
-  primaryColor: '09C269',
+  primaryColor: '#09C269',
   beforeRequest: [addAuthHeader],
   auth,
   triggers,
diff --git a/packages/backend/src/apps/mattermost/index.js b/packages/backend/src/apps/mattermost/index.js
index 7719ca9c..c7efe744 100644
--- a/packages/backend/src/apps/mattermost/index.js
+++ b/packages/backend/src/apps/mattermost/index.js
@@ -13,7 +13,7 @@ export default defineApp({
   authDocUrl: '{DOCS_URL}/apps/mattermost/connection',
   baseUrl: 'https://mattermost.com',
   apiBaseUrl: '', // there is no cloud version of this app, user always need to provide address of own instance when creating connection
-  primaryColor: '4a154b',
+  primaryColor: '#4a154b',
   supportsConnections: true,
   beforeRequest: [setBaseUrl, addXRequestedWithHeader, addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/miro/index.js b/packages/backend/src/apps/miro/index.js
index be6a0210..878d2550 100644
--- a/packages/backend/src/apps/miro/index.js
+++ b/packages/backend/src/apps/miro/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   apiBaseUrl: 'https://api.miro.com',
   iconUrl: '{BASE_URL}/apps/miro/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/miro/connection',
-  primaryColor: 'F2CA02',
+  primaryColor: '#F2CA02',
   supportsConnections: true,
   beforeRequest: [addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/notion/index.js b/packages/backend/src/apps/notion/index.js
index ea69d373..cab7f125 100644
--- a/packages/backend/src/apps/notion/index.js
+++ b/packages/backend/src/apps/notion/index.js
@@ -13,7 +13,7 @@ export default defineApp({
   apiBaseUrl: 'https://api.notion.com',
   iconUrl: '{BASE_URL}/apps/notion/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/notion/connection',
-  primaryColor: '000000',
+  primaryColor: '#000000',
   supportsConnections: true,
   beforeRequest: [addAuthHeader, addNotionVersionHeader],
   auth,
diff --git a/packages/backend/src/apps/ntfy/index.js b/packages/backend/src/apps/ntfy/index.js
index 9ad1642b..0b19ea7d 100644
--- a/packages/backend/src/apps/ntfy/index.js
+++ b/packages/backend/src/apps/ntfy/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://ntfy.sh',
   apiBaseUrl: 'https://ntfy.sh',
-  primaryColor: '56bda8',
+  primaryColor: '#56bda8',
   beforeRequest: [addAuthHeader],
   auth,
   actions,
diff --git a/packages/backend/src/apps/odoo/index.js b/packages/backend/src/apps/odoo/index.js
index 6bfbfb0b..181b2c1d 100644
--- a/packages/backend/src/apps/odoo/index.js
+++ b/packages/backend/src/apps/odoo/index.js
@@ -10,7 +10,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://odoo.com',
   apiBaseUrl: '',
-  primaryColor: '9c5789',
+  primaryColor: '#9c5789',
   auth,
   actions,
 });
diff --git a/packages/backend/src/apps/openai/index.js b/packages/backend/src/apps/openai/index.js
index 04e288fd..49fee7d1 100644
--- a/packages/backend/src/apps/openai/index.js
+++ b/packages/backend/src/apps/openai/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   apiBaseUrl: 'https://api.openai.com',
   iconUrl: '{BASE_URL}/apps/openai/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/openai/connection',
-  primaryColor: '000000',
+  primaryColor: '#000000',
   supportsConnections: true,
   beforeRequest: [addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/pipedrive/index.js b/packages/backend/src/apps/pipedrive/index.js
index 9d1b1689..95177595 100644
--- a/packages/backend/src/apps/pipedrive/index.js
+++ b/packages/backend/src/apps/pipedrive/index.js
@@ -13,7 +13,7 @@ export default defineApp({
   apiBaseUrl: '',
   iconUrl: '{BASE_URL}/apps/pipedrive/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/pipedrive/connection',
-  primaryColor: 'FFFFFF',
+  primaryColor: '#FFFFFF',
   supportsConnections: true,
   beforeRequest: [setBaseUrl, addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/placetel/index.js b/packages/backend/src/apps/placetel/index.js
index 79668d1b..e8dfcf37 100644
--- a/packages/backend/src/apps/placetel/index.js
+++ b/packages/backend/src/apps/placetel/index.js
@@ -12,7 +12,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://placetel.de',
   apiBaseUrl: 'https://api.placetel.de',
-  primaryColor: '069dd9',
+  primaryColor: '#069dd9',
   beforeRequest: [addAuthHeader],
   auth,
   triggers,
diff --git a/packages/backend/src/apps/postgresql/index.js b/packages/backend/src/apps/postgresql/index.js
index 63ea6dc5..94de12e6 100644
--- a/packages/backend/src/apps/postgresql/index.js
+++ b/packages/backend/src/apps/postgresql/index.js
@@ -10,7 +10,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: '',
   apiBaseUrl: '',
-  primaryColor: '336791',
+  primaryColor: '#336791',
   auth,
   actions,
 });
diff --git a/packages/backend/src/apps/pushover/index.js b/packages/backend/src/apps/pushover/index.js
index e87f451a..c867f3a6 100644
--- a/packages/backend/src/apps/pushover/index.js
+++ b/packages/backend/src/apps/pushover/index.js
@@ -10,7 +10,7 @@ export default defineApp({
   apiBaseUrl: 'https://api.pushover.net',
   iconUrl: '{BASE_URL}/apps/pushover/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/pushover/connection',
-  primaryColor: '249DF1',
+  primaryColor: '#249DF1',
   supportsConnections: true,
   auth,
   actions,
diff --git a/packages/backend/src/apps/reddit/index.js b/packages/backend/src/apps/reddit/index.js
index e4445bf2..0df4dcbe 100644
--- a/packages/backend/src/apps/reddit/index.js
+++ b/packages/backend/src/apps/reddit/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   apiBaseUrl: 'https://oauth.reddit.com',
   iconUrl: '{BASE_URL}/apps/reddit/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/reddit/connection',
-  primaryColor: 'FF4500',
+  primaryColor: '#FF4500',
   supportsConnections: true,
   beforeRequest: [addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/removebg/index.js b/packages/backend/src/apps/removebg/index.js
index a092418f..366b7e21 100644
--- a/packages/backend/src/apps/removebg/index.js
+++ b/packages/backend/src/apps/removebg/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://www.remove.bg',
   apiBaseUrl: 'https://api.remove.bg/v1.0',
-  primaryColor: '55636c',
+  primaryColor: '#55636c',
   beforeRequest: [addAuthHeader],
   auth,
   actions,
diff --git a/packages/backend/src/apps/rss/index.js b/packages/backend/src/apps/rss/index.js
index 29040f1c..1b4b51d5 100644
--- a/packages/backend/src/apps/rss/index.js
+++ b/packages/backend/src/apps/rss/index.js
@@ -9,6 +9,6 @@ export default defineApp({
   supportsConnections: false,
   baseUrl: '',
   apiBaseUrl: '',
-  primaryColor: 'ff8800',
+  primaryColor: '#ff8800',
   triggers,
 });
diff --git a/packages/backend/src/apps/salesforce/index.js b/packages/backend/src/apps/salesforce/index.js
index bad58236..e216954a 100644
--- a/packages/backend/src/apps/salesforce/index.js
+++ b/packages/backend/src/apps/salesforce/index.js
@@ -13,7 +13,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://salesforce.com',
   apiBaseUrl: '',
-  primaryColor: '00A1E0',
+  primaryColor: '#00A1E0',
   beforeRequest: [addAuthHeader],
   auth,
   triggers,
diff --git a/packages/backend/src/apps/scheduler/index.js b/packages/backend/src/apps/scheduler/index.js
index 6319248f..6a1fc93a 100644
--- a/packages/backend/src/apps/scheduler/index.js
+++ b/packages/backend/src/apps/scheduler/index.js
@@ -9,7 +9,7 @@ export default defineApp({
   authDocUrl: '{DOCS_URL}/apps/scheduler/connection',
   baseUrl: '',
   apiBaseUrl: '',
-  primaryColor: '0059F7',
+  primaryColor: '#0059F7',
   supportsConnections: false,
   triggers,
 });
diff --git a/packages/backend/src/apps/self-hosted-llm/index.js b/packages/backend/src/apps/self-hosted-llm/index.js
index 8e950a5f..4b05ab83 100644
--- a/packages/backend/src/apps/self-hosted-llm/index.js
+++ b/packages/backend/src/apps/self-hosted-llm/index.js
@@ -12,7 +12,7 @@ export default defineApp({
   apiBaseUrl: '',
   iconUrl: '{BASE_URL}/apps/self-hosted-llm/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/self-hosted-llm/connection',
-  primaryColor: '000000',
+  primaryColor: '#000000',
   supportsConnections: true,
   beforeRequest: [setBaseUrl, addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/signalwire/index.js b/packages/backend/src/apps/signalwire/index.js
index f8135c44..e69761f8 100644
--- a/packages/backend/src/apps/signalwire/index.js
+++ b/packages/backend/src/apps/signalwire/index.js
@@ -13,7 +13,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://signalwire.com',
   apiBaseUrl: '',
-  primaryColor: '044cf6',
+  primaryColor: '#044cf6',
   beforeRequest: [addAuthHeader],
   auth,
   triggers,
diff --git a/packages/backend/src/apps/slack/index.js b/packages/backend/src/apps/slack/index.js
index 535b4eed..733965c9 100644
--- a/packages/backend/src/apps/slack/index.js
+++ b/packages/backend/src/apps/slack/index.js
@@ -13,7 +13,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://slack.com',
   apiBaseUrl: 'https://slack.com/api',
-  primaryColor: '4a154b',
+  primaryColor: '#4a154b',
   beforeRequest: [addAuthHeader],
   auth,
   actions,
diff --git a/packages/backend/src/apps/smtp/index.js b/packages/backend/src/apps/smtp/index.js
index 77e2a896..ab7d65ac 100644
--- a/packages/backend/src/apps/smtp/index.js
+++ b/packages/backend/src/apps/smtp/index.js
@@ -10,7 +10,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: '',
   apiBaseUrl: '',
-  primaryColor: '2DAAE1',
+  primaryColor: '#2DAAE1',
   auth,
   actions,
 });
diff --git a/packages/backend/src/apps/spotify/index.js b/packages/backend/src/apps/spotify/index.js
index 4d72872e..d312ff57 100644
--- a/packages/backend/src/apps/spotify/index.js
+++ b/packages/backend/src/apps/spotify/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://spotify.com',
   apiBaseUrl: 'https://api.spotify.com',
-  primaryColor: '000000',
+  primaryColor: '#000000',
   beforeRequest: [addAuthHeader],
   auth,
   actions,
diff --git a/packages/backend/src/apps/strava/index.js b/packages/backend/src/apps/strava/index.js
index 1eea697a..f8c357df 100644
--- a/packages/backend/src/apps/strava/index.js
+++ b/packages/backend/src/apps/strava/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://www.strava.com',
   apiBaseUrl: 'https://www.strava.com/api',
-  primaryColor: 'fc4c01',
+  primaryColor: '#fc4c01',
   beforeRequest: [addAuthHeader],
   auth,
   actions,
diff --git a/packages/backend/src/apps/stripe/index.js b/packages/backend/src/apps/stripe/index.js
index 794706e1..4a015e68 100644
--- a/packages/backend/src/apps/stripe/index.js
+++ b/packages/backend/src/apps/stripe/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://stripe.com',
   apiBaseUrl: 'https://api.stripe.com',
-  primaryColor: '635bff',
+  primaryColor: '#635bff',
   beforeRequest: [addAuthHeader],
   auth,
   triggers,
diff --git a/packages/backend/src/apps/telegram-bot/index.js b/packages/backend/src/apps/telegram-bot/index.js
index 1a99bbce..dedfa814 100644
--- a/packages/backend/src/apps/telegram-bot/index.js
+++ b/packages/backend/src/apps/telegram-bot/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://telegram.org',
   apiBaseUrl: 'https://api.telegram.org',
-  primaryColor: '2AABEE',
+  primaryColor: '#2AABEE',
   beforeRequest: [addAuthHeader],
   auth,
   actions,
diff --git a/packages/backend/src/apps/todoist/index.js b/packages/backend/src/apps/todoist/index.js
index 1f833dad..97008ab2 100644
--- a/packages/backend/src/apps/todoist/index.js
+++ b/packages/backend/src/apps/todoist/index.js
@@ -13,7 +13,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://todoist.com',
   apiBaseUrl: 'https://api.todoist.com/rest/v2',
-  primaryColor: 'e44332',
+  primaryColor: '#e44332',
   beforeRequest: [addAuthHeader],
   auth,
   triggers,
diff --git a/packages/backend/src/apps/trello/index.js b/packages/backend/src/apps/trello/index.js
index ed557b2b..a793f45f 100644
--- a/packages/backend/src/apps/trello/index.js
+++ b/packages/backend/src/apps/trello/index.js
@@ -12,7 +12,7 @@ export default defineApp({
   iconUrl: '{BASE_URL}/apps/trello/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/trello/connection',
   supportsConnections: true,
-  primaryColor: '0079bf',
+  primaryColor: '#0079bf',
   beforeRequest: [addAuthHeader],
   auth,
   actions,
diff --git a/packages/backend/src/apps/twilio/index.js b/packages/backend/src/apps/twilio/index.js
index ab208eb8..c0d23c4b 100644
--- a/packages/backend/src/apps/twilio/index.js
+++ b/packages/backend/src/apps/twilio/index.js
@@ -13,7 +13,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://twilio.com',
   apiBaseUrl: 'https://api.twilio.com',
-  primaryColor: 'e1000f',
+  primaryColor: '#e1000f',
   beforeRequest: [addAuthHeader],
   auth,
   triggers,
diff --git a/packages/backend/src/apps/twitter/index.js b/packages/backend/src/apps/twitter/index.js
index 2e1289fa..adf28caf 100644
--- a/packages/backend/src/apps/twitter/index.js
+++ b/packages/backend/src/apps/twitter/index.js
@@ -12,7 +12,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://twitter.com',
   apiBaseUrl: 'https://api.twitter.com',
-  primaryColor: '1da1f2',
+  primaryColor: '#1da1f2',
   beforeRequest: [addAuthHeader],
   auth,
   triggers,
diff --git a/packages/backend/src/apps/typeform/index.js b/packages/backend/src/apps/typeform/index.js
index 3d59d69c..0e8832a5 100644
--- a/packages/backend/src/apps/typeform/index.js
+++ b/packages/backend/src/apps/typeform/index.js
@@ -12,7 +12,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://typeform.com',
   apiBaseUrl: 'https://api.typeform.com',
-  primaryColor: '262627',
+  primaryColor: '#262627',
   beforeRequest: [addAuthHeader],
   auth,
   triggers,
diff --git a/packages/backend/src/apps/vtiger-crm/index.js b/packages/backend/src/apps/vtiger-crm/index.js
index 50490304..b5ab3446 100644
--- a/packages/backend/src/apps/vtiger-crm/index.js
+++ b/packages/backend/src/apps/vtiger-crm/index.js
@@ -14,7 +14,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: '',
   apiBaseUrl: '',
-  primaryColor: '39a86d',
+  primaryColor: '#39a86d',
   beforeRequest: [setBaseUrl, addAuthHeader],
   auth,
   triggers,
diff --git a/packages/backend/src/apps/webhook/index.js b/packages/backend/src/apps/webhook/index.js
index 9cde3525..ed5ca565 100644
--- a/packages/backend/src/apps/webhook/index.js
+++ b/packages/backend/src/apps/webhook/index.js
@@ -10,7 +10,7 @@ export default defineApp({
   supportsConnections: false,
   baseUrl: '',
   apiBaseUrl: '',
-  primaryColor: '0059F7',
+  primaryColor: '#0059F7',
   actions,
   triggers,
 });
diff --git a/packages/backend/src/apps/wordpress/index.js b/packages/backend/src/apps/wordpress/index.js
index 6a95024c..47368251 100644
--- a/packages/backend/src/apps/wordpress/index.js
+++ b/packages/backend/src/apps/wordpress/index.js
@@ -13,7 +13,7 @@ export default defineApp({
   supportsConnections: true,
   baseUrl: 'https://wordpress.com',
   apiBaseUrl: '',
-  primaryColor: '464342',
+  primaryColor: '#464342',
   beforeRequest: [setBaseUrl, addAuthHeader],
   auth,
   triggers,
diff --git a/packages/backend/src/apps/xero/index.js b/packages/backend/src/apps/xero/index.js
index 616ce8ba..b0dd2ee3 100644
--- a/packages/backend/src/apps/xero/index.js
+++ b/packages/backend/src/apps/xero/index.js
@@ -11,7 +11,7 @@ export default defineApp({
   apiBaseUrl: 'https://api.xero.com',
   iconUrl: '{BASE_URL}/apps/xero/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/xero/connection',
-  primaryColor: '13B5EA',
+  primaryColor: '#13B5EA',
   supportsConnections: true,
   beforeRequest: [addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/you-need-a-budget/index.js b/packages/backend/src/apps/you-need-a-budget/index.js
index 0cb69d26..d9718e94 100644
--- a/packages/backend/src/apps/you-need-a-budget/index.js
+++ b/packages/backend/src/apps/you-need-a-budget/index.js
@@ -10,7 +10,7 @@ export default defineApp({
   apiBaseUrl: 'https://api.ynab.com/v1',
   iconUrl: '{BASE_URL}/apps/you-need-a-budget/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/you-need-a-budget/connection',
-  primaryColor: '19223C',
+  primaryColor: '#19223C',
   supportsConnections: true,
   beforeRequest: [addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/youtube/index.js b/packages/backend/src/apps/youtube/index.js
index 03eba51c..f1581681 100644
--- a/packages/backend/src/apps/youtube/index.js
+++ b/packages/backend/src/apps/youtube/index.js
@@ -10,7 +10,7 @@ export default defineApp({
   apiBaseUrl: 'https://www.googleapis.com/youtube',
   iconUrl: '{BASE_URL}/apps/youtube/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/youtube/connection',
-  primaryColor: 'FF0000',
+  primaryColor: '#FF0000',
   supportsConnections: true,
   beforeRequest: [addAuthHeader],
   auth,
diff --git a/packages/backend/src/apps/zendesk/index.js b/packages/backend/src/apps/zendesk/index.js
index 5e66a3b0..37e12ea0 100644
--- a/packages/backend/src/apps/zendesk/index.js
+++ b/packages/backend/src/apps/zendesk/index.js
@@ -12,7 +12,7 @@ export default defineApp({
   apiBaseUrl: '',
   iconUrl: '{BASE_URL}/apps/zendesk/assets/favicon.svg',
   authDocUrl: '{DOCS_URL}/apps/zendesk/connection',
-  primaryColor: '17494d',
+  primaryColor: '#17494d',
   supportsConnections: true,
   beforeRequest: [addAuthHeader],
   auth,
diff --git a/packages/backend/test/mocks/rest/api/v1/users/get-apps.js b/packages/backend/test/mocks/rest/api/v1/users/get-apps.js
index 79ac0e8a..e67a23a6 100644
--- a/packages/backend/test/mocks/rest/api/v1/users/get-apps.js
+++ b/packages/backend/test/mocks/rest/api/v1/users/get-apps.js
@@ -7,7 +7,7 @@ const getAppsMock = () => {
       iconUrl: 'http://localhost:3000/apps/deepl/assets/favicon.svg',
       key: 'deepl',
       name: 'DeepL',
-      primaryColor: '0d2d45',
+      primaryColor: '#0d2d45',
       supportsConnections: true,
     },
     {
@@ -17,7 +17,7 @@ const getAppsMock = () => {
       iconUrl: 'http://localhost:3000/apps/github/assets/favicon.svg',
       key: 'github',
       name: 'GitHub',
-      primaryColor: '000000',
+      primaryColor: '#000000',
       supportsConnections: true,
     },
     {
@@ -26,7 +26,7 @@ const getAppsMock = () => {
       iconUrl: 'http://localhost:3000/apps/slack/assets/favicon.svg',
       key: 'slack',
       name: 'Slack',
-      primaryColor: '4a154b',
+      primaryColor: '#4a154b',
       supportsConnections: true,
     },
     {
@@ -35,7 +35,7 @@ const getAppsMock = () => {
       iconUrl: 'http://localhost:3000/apps/webhook/assets/favicon.svg',
       key: 'webhook',
       name: 'Webhook',
-      primaryColor: '0059F7',
+      primaryColor: '#0059F7',
       supportsConnections: false,
     },
   ];
diff --git a/packages/web/src/components/AddNewAppConnection/index.jsx b/packages/web/src/components/AddNewAppConnection/index.jsx
index 010e97cd..e69c18e9 100644
--- a/packages/web/src/components/AddNewAppConnection/index.jsx
+++ b/packages/web/src/components/AddNewAppConnection/index.jsx
@@ -121,7 +121,7 @@ function AddNewAppConnection(props) {
                 >
                   <ListItemIcon sx={{ minWidth: 74 }}>
                     <AppIcon
-                      color="transparent"
+                      color={app.primaryColor}
                       url={app.iconUrl}
                       name={app.name}
                     />
diff --git a/packages/web/src/components/AppIcon/index.jsx b/packages/web/src/components/AppIcon/index.jsx
index 92b102b6..7d0a83ba 100644
--- a/packages/web/src/components/AppIcon/index.jsx
+++ b/packages/web/src/components/AppIcon/index.jsx
@@ -7,11 +7,18 @@ const inlineImgStyle = {
 function AppIcon(props) {
   const { name, url, color, sx = {}, variant = 'square', ...restProps } = props;
   const initialLetter = name?.[0];
+
   return (
     <Avatar
       component="span"
       variant={variant}
-      sx={{ bgcolor: color, display: 'flex', width: 50, height: 50, ...sx }}
+      sx={{
+        bgcolor: url ? null : color,
+        display: 'flex',
+        width: 50,
+        height: 50,
+        ...sx,
+      }}
       imgProps={{ style: inlineImgStyle }}
       src={url}
       alt={name}
diff --git a/packages/web/src/components/ExecutionStep/index.jsx b/packages/web/src/components/ExecutionStep/index.jsx
index 2ce7f6c5..91f61a77 100644
--- a/packages/web/src/components/ExecutionStep/index.jsx
+++ b/packages/web/src/components/ExecutionStep/index.jsx
@@ -106,8 +106,11 @@ function ExecutionStep(props) {
         <Stack direction="row" gap={3}>
           <AppIconWrapper>
             <AppIconStatusIconWrapper>
-              <AppIcon url={app?.iconUrl} name={app?.name} />
-
+              <AppIcon
+                url={app?.iconUrl}
+                name={app?.name}
+                color={app?.primaryColor}
+              />
               {validationStatusIcon}
             </AppIconStatusIconWrapper>
           </AppIconWrapper>
diff --git a/packages/web/src/components/FlowStep/index.jsx b/packages/web/src/components/FlowStep/index.jsx
index a9316aeb..e9a4596c 100644
--- a/packages/web/src/components/FlowStep/index.jsx
+++ b/packages/web/src/components/FlowStep/index.jsx
@@ -228,7 +228,11 @@ function FlowStep(props) {
       <Header collapsed={collapsed}>
         <Stack direction="row" alignItems="center" gap={2}>
           <AppIconWrapper>
-            <AppIcon url={app?.iconUrl} name={app?.name} />
+            <AppIcon
+              url={app?.iconUrl}
+              name={app?.name}
+              color={app?.primaryColor}
+            />
 
             <AppIconStatusIconWrapper>
               {validationStatusIcon}