diff --git a/docs/docs/widgets/container.md b/docs/docs/widgets/container.md
index fc58141f51..9c3e2fe82c 100644
--- a/docs/docs/widgets/container.md
+++ b/docs/docs/widgets/container.md
@@ -8,7 +8,17 @@ Containers are used to group widgets together. You can move the desired number o
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/widgets/container/container.gif" alt="ToolJet - Widget Reference - Container" />
+<img className="screenshot-full" src="/img/widgets/container/container.png" alt="ToolJet - Widget Reference - Container" />
+
+</div>
+
+## Enabling vertical scroll on container
+
+To enable the vertical scroll on the container, drag and place any component to the bottom grid of the container and the container will automatically enable the scrolling.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/widgets/container/scrollcontainer.png" alt="ToolJet - Widget Reference - Container" />
 
 </div>
 
diff --git a/docs/static/img/widgets/container/container.png b/docs/static/img/widgets/container/container.png
new file mode 100644
index 0000000000..d98e9f9a5d
Binary files /dev/null and b/docs/static/img/widgets/container/container.png differ
diff --git a/docs/static/img/widgets/container/scrollcontainer.png b/docs/static/img/widgets/container/scrollcontainer.png
new file mode 100644
index 0000000000..9d77d8eea8
Binary files /dev/null and b/docs/static/img/widgets/container/scrollcontainer.png differ
diff --git a/frontend/src/Editor/Components/Container.jsx b/frontend/src/Editor/Components/Container.jsx
index db202ca0fd..c7e687b26c 100644
--- a/frontend/src/Editor/Components/Container.jsx
+++ b/frontend/src/Editor/Components/Container.jsx
@@ -22,6 +22,8 @@ export const Container = function Container({
     border: `1px solid ${borderColor}`,
     height,
     display: visibility ? 'flex' : 'none',
+    overflow: 'hidden auto',
+    position: 'relative',
   };
 
   const parentRef = useRef(null);
diff --git a/frontend/src/Editor/SubContainer.jsx b/frontend/src/Editor/SubContainer.jsx
index 67af3a56bb..337cb9ede1 100644
--- a/frontend/src/Editor/SubContainer.jsx
+++ b/frontend/src/Editor/SubContainer.jsx
@@ -71,7 +71,8 @@ export const SubContainer = ({
   const allComponents = appDefinition ? appDefinition.pages[currentPageId].components : {};
   const isParentModal =
     (allComponents[parent]?.component?.component === 'Modal' ||
-      allComponents[parent]?.component?.component === 'Form') ??
+      allComponents[parent]?.component?.component === 'Form' ||
+      allComponents[parent]?.component?.component === 'Container') ??
     false;
 
   const getChildWidgets = (components) => {
@@ -462,7 +463,7 @@ export const SubContainer = ({
       ref={drop}
       style={styles}
       id={`canvas-${parent}`}
-      className={`real-canvas ${(isDragging || isResizing) && !readOnly ? ' show-grid' : ''}`}
+      className={`real-canvas ${(isDragging || isResizing) && !readOnly ? 'show-grid' : ''}`}
     >
       {checkParentVisibility() &&
         Object.keys(childWidgets).map((key) => {
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 15ecda0afd..eb45c34327 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -148,7 +148,7 @@ button {
 
   .resizer-select,
   .resizer-active {
-    border: solid 1px $primary !important;
+    border: solid 1px $primary  !important;
 
     .top-right,
     .top-left,
@@ -628,7 +628,7 @@ button {
 
   .list-group.list-group-transparent.dark .all-apps-link,
   .list-group-item-action.dark.active {
-    background-color: $dark-background !important;
+    background-color: $dark-background  !important;
   }
 }
 
@@ -1221,7 +1221,7 @@ button {
   .select-search-dark input {
     width: 224px !important;
     height: 32px !important;
-    border-radius: $border-radius !important;
+    border-radius: $border-radius  !important;
   }
 }
 
@@ -1232,7 +1232,7 @@ button {
   .select-search__value input,
   .select-search-dark input {
     height: 32px !important;
-    border-radius: $border-radius !important;
+    border-radius: $border-radius  !important;
   }
 }
 
@@ -1294,7 +1294,7 @@ button {
   -moz-appearance: none;
   appearance: none;
   // border-radius: 0;
-  border-radius: $border-radius !important;
+  border-radius: $border-radius  !important;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
@@ -1536,7 +1536,7 @@ button {
   height: 36px;
   width: 100%;
   padding: 0 16px;
-  background-color: $dark-background !important;
+  background-color: $dark-background  !important;
   color: #fff !important;
   border: none;
   outline: none;
@@ -3607,7 +3607,7 @@ input[type="text"] {
 
 .nav-tabs .nav-link.active {
   font-weight: 400 !important;
-  color: $primary !important;
+  color: $primary  !important;
 }
 
 .empty {
@@ -3911,6 +3911,7 @@ input[type="text"] {
   // .list-item {
   // }
 }
+
 .jet-listview::-webkit-scrollbar-track {
   background: transparent;
 
@@ -4128,7 +4129,7 @@ input[type="text"] {
 
 .tabs-inspector.dark {
   .nav-link.active {
-    border-bottom: 1px solid $primary !important;
+    border-bottom: 1px solid $primary  !important;
   }
 }
 
@@ -4344,7 +4345,7 @@ input[type="text"] {
   }
 
   input {
-    border-radius: $border-radius !important;
+    border-radius: $border-radius  !important;
     padding-left: 1.75rem !important;
   }
 }
@@ -4424,9 +4425,10 @@ input[type="text"] {
 /**
  * Home page modal
  */
- .home-modal-backdrop {
+.home-modal-backdrop {
   z-index: 9991;
- }
+}
+
 .modal-content.home-modal-component {
   border-radius: 8px;
   overflow: hidden;
@@ -4474,11 +4476,11 @@ input[type="text"] {
 }
 
 .modal-content.home-modal-component.dark {
-  background-color: $bg-dark-light !important;
-  color: $white !important;
+  background-color: $bg-dark-light  !important;
+  color: $white  !important;
 
   .modal-header {
-    background-color: $bg-dark-light !important;
+    background-color: $bg-dark-light  !important;
   }
 
   .btn-close {
@@ -4486,22 +4488,22 @@ input[type="text"] {
   }
 
   .form-control {
-    border-color: $border-grey-dark !important;
+    border-color: $border-grey-dark  !important;
     color: inherit;
   }
 
   input {
-    background-color: $bg-dark-light !important;
+    background-color: $bg-dark-light  !important;
   }
 
   .form-select {
-    background-color: $bg-dark !important;
-    color: $white !important;
-    border-color: $border-grey-dark !important;
+    background-color: $bg-dark  !important;
+    color: $white  !important;
+    border-color: $border-grey-dark  !important;
   }
 
   .text-muted {
-    color: $white !important;
+    color: $white  !important;
   }
 }
 
@@ -4794,7 +4796,7 @@ div#driver-page-overlay {
 }
 
 .dark-theme-walkthrough#driver-popover-item {
-  background-color: $bg-dark-light !important;
+  background-color: $bg-dark-light  !important;
   border-color: rgba(101, 109, 119, 0.16) !important;
 
   .driver-popover-title {
@@ -4802,7 +4804,7 @@ div#driver-page-overlay {
   }
 
   .driver-popover-tip {
-    border-color: transparent transparent transparent $bg-dark-light !important;
+    border-color: transparent transparent transparent $bg-dark-light  !important;
   }
 
   .driver-popover-description {
@@ -4834,7 +4836,7 @@ div#driver-page-overlay {
 
   .driver-next-btn,
   .driver-prev-btn {
-    color: $primary !important;
+    color: $primary  !important;
   }
 
   .driver-disabled {
@@ -5179,7 +5181,7 @@ div#driver-page-overlay {
   }
 
   .selected-node {
-    border-color: $primary-light !important;
+    border-color: $primary-light  !important;
   }
 
   .json-tree-icon-container .selected-node>svg:first-child {
@@ -5269,7 +5271,7 @@ div#driver-page-overlay {
   }
 
   .selected-node {
-    border-color: $primary-light !important;
+    border-color: $primary-light  !important;
   }
 
   .selected-node .group-object-container .badge {
@@ -5536,7 +5538,7 @@ div#driver-page-overlay {
 
 //Kanban board
 .kanban-container.dark-themed {
-  background-color: $bg-dark-light !important;
+  background-color: $bg-dark-light  !important;
 
   .kanban-column {
     .card-header {
@@ -5582,7 +5584,7 @@ div#driver-page-overlay {
     }
 
     .dnd-card.card.card-dark {
-      background-color: $bg-dark !important;
+      background-color: $bg-dark  !important;
     }
   }
 
@@ -6873,7 +6875,9 @@ tbody {
   .select-search-dark__value::after {
     content: none;
   }
-  .select-search-dark__select,.select-search__select{
+
+  .select-search-dark__select,
+  .select-search__select {
     min-width: fit-content;
     max-width: 100% !important;
   }
@@ -7643,6 +7647,7 @@ tbody {
 .react-tooltip {
   font-size: .765625rem !important;
 }
+
 .tj-db-table {
   overflow-y: auto;
   height: 110px;
@@ -7706,36 +7711,39 @@ tbody {
 .tj-onboarding-phone-input-wrapper {
   margin-bottom: 12px;
 }
+
 .theme-dark {
-	.tj-onboarding-phone-input-wrapper {
-		.flag-dropdown {
-			background-color: #1f2936 !important;
+  .tj-onboarding-phone-input-wrapper {
+    .flag-dropdown {
+      background-color: #1f2936 !important;
 
-			.country-list {
-				background-color: #1f2936 !important;
-				background: #1f2936;
+      .country-list {
+        background-color: #1f2936 !important;
+        background: #1f2936;
 
-				li {
-					.country .highlight{
-						background-color: #3a3f42;
-						color: #000 !important;
-            div{
+        li {
+          .country .highlight {
+            background-color: #3a3f42;
+            color: #000 !important;
+
+            div {
               .country-name {
                 color: #6b6b6b !important;
               }
             }
-			
-					}
 
-					&:hover {
-						background-color: #2b2f31;
-					}
+          }
 
-				}
-			}
-		}
+          &:hover {
+            background-color: #2b2f31;
+          }
+
+        }
+      }
+    }
+
+  }
 
-	}
   .react-tel-input .country-list .country.highlight {
     color: #6b6b6b;
   }