diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/listview.js b/frontend/src/AppBuilder/WidgetManager/widgets/listview.js
index 0986efaea8..c3ebdcfa19 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/listview.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/listview.js
@@ -128,7 +128,7 @@ export const listviewConfig = {
   },
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: {
         schema: { type: 'string' },
@@ -136,7 +136,7 @@ export const listviewConfig = {
       },
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
diff --git a/frontend/src/Editor/WidgetManager/configs/listview.js b/frontend/src/Editor/WidgetManager/configs/listview.js
index cd5c249414..c3ebdcfa19 100644
--- a/frontend/src/Editor/WidgetManager/configs/listview.js
+++ b/frontend/src/Editor/WidgetManager/configs/listview.js
@@ -24,7 +24,7 @@ export const listviewConfig = {
         top: 50,
         left: 11,
         height: 30,
-        width: 3,
+        width: 4,
       },
       properties: ['text'],
       accessorKey: 'text',
@@ -128,7 +128,7 @@ export const listviewConfig = {
   },
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: {
         schema: { type: 'string' },
@@ -136,7 +136,7 @@ export const listviewConfig = {
       },
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
diff --git a/server/src/modules/apps/services/widget-config/listview.js b/server/src/modules/apps/services/widget-config/listview.js
index 9cef676a85..c3ebdcfa19 100644
--- a/server/src/modules/apps/services/widget-config/listview.js
+++ b/server/src/modules/apps/services/widget-config/listview.js
@@ -13,7 +13,7 @@ export const listviewConfig = {
         top: 15,
         left: 3,
         height: 100,
-        width: 7,
+        width: 4,
       },
       properties: ['source'],
       accessorKey: 'imageURL',
@@ -24,6 +24,7 @@ export const listviewConfig = {
         top: 50,
         left: 11,
         height: 30,
+        width: 4,
       },
       properties: ['text'],
       accessorKey: 'text',
@@ -50,7 +51,13 @@ export const listviewConfig = {
       type: 'code',
       displayName: 'List data',
       validation: {
-        schema: { type: 'union', schemas: [{ type: 'array', element: { type: 'object' } },{ type: 'array', element: { type: 'string' } }] },
+        schema: {
+          type: 'union',
+          schemas: [
+            { type: 'array', element: { type: 'object' } },
+            { type: 'array', element: { type: 'string' } },
+          ],
+        },
         defaultValue: "[{text: 'Sample text 1'}]",
       },
     },