diff --git a/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.html b/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.html
index c6ae97bdf..dbd2a0752 100644
--- a/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.html
@@ -27,7 +27,7 @@
                     </div>
                 </div>
 
-                <div (cdkDropListDropped)="drop($event)" cdkDropList>
+                <div (cdkDropListDropped)="drop($event)" cdkDropList class="list-content">
                     @for (component of componentDefinitions; track component) {
                         <div
                             class="list-item"
diff --git a/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.scss b/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.scss
index b54da356d..54a237251 100644
--- a/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.scss
@@ -44,6 +44,7 @@
 
 .content-container {
     background-color: var(--iqser-grey-6);
+    height: 100vh;
 
     .content-header {
         display: flex;
@@ -62,6 +63,7 @@
     .content {
         display: flex;
         gap: 20px;
+        overflow: hidden;
 
         .components-list {
             flex: 1;
@@ -72,6 +74,12 @@
                 height: 30px;
             }
 
+            .list-content {
+                overflow-y: auto;
+                height: calc(100vh - 30px);
+                outline: none;
+            }
+
             .list-item {
                 height: 80px;
                 transition: background 0.3s ease;