diff --git a/frontend/src/AppBuilder/AppCanvas/Container.jsx b/frontend/src/AppBuilder/AppCanvas/Container.jsx
index b90eb55380..2997b84943 100644
--- a/frontend/src/AppBuilder/AppCanvas/Container.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Container.jsx
@@ -149,10 +149,11 @@ export const Container = React.memo(
       if (canvasWidth !== undefined) {
         if (componentType === 'Listview' && listViewMode == 'grid') return canvasWidth / columns - 2;
         if (id === 'canvas') return canvasWidth;
-        return getSubContainerWidthAfterPadding(canvasWidth, componentType, id);
+        return getSubContainerWidthAfterPadding(canvasWidth, componentType, id, realCanvasRef);
       }
       return realCanvasRef?.current?.offsetWidth;
     }
+
     const gridWidth = getContainerCanvasWidth() / NO_OF_GRIDS;
     useEffect(() => {
       useGridStore.getState().actions.setSubContainerWidths(id, gridWidth);
diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js b/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js
index eab22333b2..955880a173 100644
--- a/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js
+++ b/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js
@@ -39,3 +39,5 @@ export const DROPPABLE_PARENTS = new Set([
 export const TAB_CANVAS_PADDING = 7.5;
 
 export const MODAL_CANVAS_PADDING = 5;
+
+export const LISTVIEW_CANVAS_PADDING = 7;
diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
index a138b759cc..be875e6f9c 100644
--- a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
+++ b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
@@ -15,6 +15,7 @@ import {
   BOX_PADDING,
   TAB_CANVAS_PADDING,
   MODAL_CANVAS_PADDING,
+  LISTVIEW_CANVAS_PADDING,
 } from './appCanvasConstants';
 
 export function snapToGrid(canvasWidth, x, y) {
@@ -776,7 +777,7 @@ export const getSubContainerIdWithSlots = (parentId) => {
   return cleanParentId;
 };
 
-export const getSubContainerWidthAfterPadding = (canvasWidth, componentType, componentId) => {
+export const getSubContainerWidthAfterPadding = (canvasWidth, componentType, componentId, realCanvasRef) => {
   let padding = 2; //Need to update this 2 to correct value for other subcontainers
   if (componentType === 'Container' || componentType === 'Form') {
     padding = 2 * CONTAINER_FORM_CANVAS_PADDING + 2 * SUBCONTAINER_CANVAS_BORDER_WIDTH + 2 * BOX_PADDING;
@@ -789,11 +790,13 @@ export const getSubContainerWidthAfterPadding = (canvasWidth, componentType, com
     if (isModalHeader) {
       const isModalHeaderCloseBtnEnabled = !useStore.getState().getResolvedComponent(componentId)?.properties
         ?.hideCloseButton;
-      console.log('isModalHeaderCloseBtnEnabled', isModalHeaderCloseBtnEnabled);
       padding = 2 * (MODAL_CANVAS_PADDING + (isModalHeaderCloseBtnEnabled ? 56 : 0));
     } else {
       padding = 2 * MODAL_CANVAS_PADDING;
     }
   }
+  if (componentType === 'Listview') {
+    padding = 2 * LISTVIEW_CANVAS_PADDING + 5; // 5 is accounting for scrollbar
+  }
   return canvasWidth - padding;
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/listview.js b/frontend/src/AppBuilder/WidgetManager/widgets/listview.js
index 6c599bc2fc..c3ebdcfa19 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/listview.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/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',
@@ -49,12 +50,14 @@ export const listviewConfig = {
     data: {
       type: 'code',
       displayName: 'List data',
-      schema: {
-        type: 'union',
-        schemas: [
-          { type: 'array', element: { type: 'object' } },
-          { type: 'array', element: { type: 'string' } },
-        ],
+      validation: {
+        schema: {
+          type: 'union',
+          schemas: [
+            { type: 'array', element: { type: 'object' } },
+            { type: 'array', element: { type: 'string' } },
+          ],
+        },
         defaultValue: "[{text: 'Sample text 1'}]",
       },
     },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/table.js b/frontend/src/AppBuilder/WidgetManager/widgets/table.js
index 9f0c4fd723..facb62f7d4 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/table.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/table.js
@@ -275,7 +275,7 @@ export const tableConfig = {
     showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
   },
   defaultSize: {
-    width: 35,
+    width: 25,
     height: 456,
   },
   events: {
diff --git a/frontend/src/AppBuilder/Widgets/Container/Container.jsx b/frontend/src/AppBuilder/Widgets/Container/Container.jsx
index a706d29069..a15a525651 100644
--- a/frontend/src/AppBuilder/Widgets/Container/Container.jsx
+++ b/frontend/src/AppBuilder/Widgets/Container/Container.jsx
@@ -67,7 +67,6 @@ export const Container = ({
     padding: `${CONTAINER_FORM_CANVAS_PADDING}px ${CONTAINER_FORM_CANVAS_PADDING}px 3px ${CONTAINER_FORM_CANVAS_PADDING}px`,
     ...headerBgColor,
   };
-
   const containerContentStyles = {
     overflow: 'hidden auto',
     display: 'flex',
diff --git a/frontend/src/AppBuilder/Widgets/Kanban/Components/Item.jsx b/frontend/src/AppBuilder/Widgets/Kanban/Components/Item.jsx
index 7b4b2a56cf..d147c1b135 100644
--- a/frontend/src/AppBuilder/Widgets/Kanban/Components/Item.jsx
+++ b/frontend/src/AppBuilder/Widgets/Kanban/Components/Item.jsx
@@ -81,7 +81,6 @@ export const Item = React.memo(
           >
             <div className="subcontainer-container" onMouseDown={(e) => e.stopPropagation()}>
               <SubContainer
-                parentComponent={component}
                 canvasWidth={Number(cardWidth) || 300}
                 canvasHeight={Number(cardHeight) || 100}
                 id={id}
@@ -90,11 +89,7 @@ export const Item = React.memo(
                   backgroundColor: 'var(--base)',
                 }}
                 darkMode={darkMode}
-                // parentName={component.name}
-                // customResolvables={{ cardData: cardDataAsObj[value] }}
-                // {...containerProps}
-                // readOnly={isDragActive || !isFirstItem}
-                // parentRef={parentRef}
+                componentType="Kanban"
               />
             </div>
             <span className="handle-container">
diff --git a/frontend/src/AppBuilder/Widgets/Listview.jsx b/frontend/src/AppBuilder/Widgets/Listview.jsx
index 856ef57e49..e08735eb2c 100644
--- a/frontend/src/AppBuilder/Widgets/Listview.jsx
+++ b/frontend/src/AppBuilder/Widgets/Listview.jsx
@@ -55,6 +55,8 @@ export const Listview = function Listview({
     display: visibility ? 'flex' : 'none',
     borderRadius: borderRadius ?? 0,
     boxShadow,
+    padding: '7px 2px 7px 7px',
+    scrollbarGutter: 'stable',
   };
 
   const computeCanvasBackgroundColor = useMemo(() => {
@@ -235,7 +237,6 @@ export const Listview = function Listview({
     // Update the customResolvables with the new listItems
     if (listItems.length > 0) updateCustomResolvables(id, listItems, 'listItem', moduleId);
   }
-
   return (
     <div
       data-disabled={disabledState}
@@ -243,10 +244,9 @@ export const Listview = function Listview({
       id={id}
       ref={parentRef}
       style={computedStyles}
-      //   onClick={() => containerProps.onComponentClick(id, component)}
       data-cy={dataCy}
     >
-      <div className={`row w-100 m-0 ${enablePagination && 'pagination-margin-bottom-last-child'}`}>
+      <div className={`w-100 m-0 ${enablePagination && 'pagination-margin-bottom-last-child'}`}>
         {filteredData.map((listItem, index) => (
           <div
             className={`list-item ${mode == 'list' && 'w-100'}  ${showBorder && mode == 'list' ? 'border-bottom' : ''}`}
diff --git a/frontend/src/Editor/WidgetManager/configs/listview.js b/frontend/src/Editor/WidgetManager/configs/listview.js
index 86825142eb..c3ebdcfa19 100644
--- a/frontend/src/Editor/WidgetManager/configs/listview.js
+++ b/frontend/src/Editor/WidgetManager/configs/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',
@@ -127,7 +128,7 @@ export const listviewConfig = {
   },
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: {
         schema: { type: 'string' },
@@ -135,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/table.js b/frontend/src/Editor/WidgetManager/configs/table.js
index def217a352..8273c2475c 100644
--- a/frontend/src/Editor/WidgetManager/configs/table.js
+++ b/frontend/src/Editor/WidgetManager/configs/table.js
@@ -275,7 +275,7 @@ export const tableConfig = {
     showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
   },
   defaultSize: {
-    width: 35,
+    width: 25,
     height: 456,
   },
   events: {
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index fefe527bf7..226d6e8ac4 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -4274,7 +4274,6 @@ input[type="text"] {
 
 .jet-listview::-webkit-scrollbar-track {
   background: transparent;
-
 }
 
 .jet-listview::-webkit-scrollbar-thumb {
@@ -16048,9 +16047,7 @@ textarea.tj-text-input-widget {
 }
 
 .jet-listview {
-  &:hover {
-    scrollbar-color: #6a727c4d;
-
+  &:hover {      
     &::-webkit-scrollbar-thumb {
       background-color: #6a727c4d !important;
     }
@@ -16070,7 +16067,6 @@ textarea.tj-text-input-widget {
 
   .jet-listview {
     &:hover {
-      scrollbar-color: #6a727c4d;
 
       &::-webkit-scrollbar-thumb {
         background-color: #6a727c4d !important;
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'}]",
       },
     },