diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js
index 4639581ef3..ffe5f06c58 100644
--- a/frontend/src/_helpers/appUtils.js
+++ b/frontend/src/_helpers/appUtils.js
@@ -1695,6 +1695,10 @@ export const buildComponentMetaDefinition = (components = {}) => {
         ...componentMeta.definition.validations,
         ...currentComponentData?.component.definition.validations,
       },
+      others: {
+        ...componentMeta.definition.others,
+        ...currentComponentData?.component.definition.others,
+      },
     };
 
     const mergedComponent = {
diff --git a/frontend/src/_stores/utils.js b/frontend/src/_stores/utils.js
index f847efe44d..58349d0699 100644
--- a/frontend/src/_stores/utils.js
+++ b/frontend/src/_stores/utils.js
@@ -32,6 +32,10 @@ const defaultComponent = {
   styles: {},
   validation: {},
   type: '',
+  others: {
+    showOnDesktop: { value: '{{true}}' },
+    showOnMobile: { value: '{{false}}' },
+  },
 };
 
 const updateType = Object.freeze({
@@ -224,6 +228,13 @@ const computeComponentDiff = (appDiff, currentPageId, opts) => {
         });
       }
 
+      const currentDisplayPreference = _.keys(appDiff.pages[currentPageId].components[id].layouts)[0];
+
+      if (currentDisplayPreference === 'mobile') {
+        result[id].others.showOnMobile = { value: '{{true}}' };
+        result[id].others.showOnDesktop = { value: '{{false}}' };
+      }
+
       if (result[id]?.definition) {
         delete result[id].definition;
       }
diff --git a/server/migrations/1691006952074-CreateComponentTable.ts b/server/migrations/1691006952074-CreateComponentTable.ts
index 22024ccdda..ed4a5097d8 100644
--- a/server/migrations/1691006952074-CreateComponentTable.ts
+++ b/server/migrations/1691006952074-CreateComponentTable.ts
@@ -47,6 +47,11 @@ export class CreateComponentTable1691006952074 implements MigrationInterface {
             type: 'json',
             isNullable: true,
           },
+          {
+            name: 'display_preferences',
+            type: 'json',
+            isNullable: true,
+          },
           {
             name: 'validations',
             type: 'json',
diff --git a/server/src/entities/component.entity.ts b/server/src/entities/component.entity.ts
index 46010cb545..f2ddd7e475 100644
--- a/server/src/entities/component.entity.ts
+++ b/server/src/entities/component.entity.ts
@@ -39,6 +39,9 @@ export class Component {
   @Column('simple-json', { name: 'general_styles', nullable: true })
   generalStyles: any;
 
+  @Column('simple-json', { name: 'display_preferences', nullable: true })
+  displayPreferences: any;
+
   @Column('simple-json')
   validations: any;
 
diff --git a/server/src/services/components.service.ts b/server/src/services/components.service.ts
index 7cbd335357..069835bb5d 100644
--- a/server/src/services/components.service.ts
+++ b/server/src/services/components.service.ts
@@ -195,6 +195,7 @@ export class ComponentsService {
       transformedComponent.properties = componentData.properties || {};
       transformedComponent.styles = componentData.styles || {};
       transformedComponent.validations = componentData.validation || {};
+      transformedComponent.displayPreferences = componentData.others || null;
 
       transformedComponents.push(transformedComponent);
     }
@@ -203,9 +204,8 @@ export class ComponentsService {
   }
 
   createComponentWithLayout(componentData, layoutData) {
-    const { id, name, properties, styles, generalStyles, validations, parent } = componentData;
+    const { id, name, properties, styles, generalStyles, validations, parent, displayPreferences } = componentData;
     const { type, top, left, width, height } = layoutData;
-
     const componentWithLayout = {
       [id]: {
         component: {
@@ -216,6 +216,7 @@ export class ComponentsService {
             styles,
             generalStyles,
             validations,
+            others: displayPreferences,
           },
           parent,
         },