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 7f371474f..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
@@ -19,7 +19,7 @@
             </div>
         </div>
         <div class="content">
-            <div class="components-list" (cdkDropListDropped)="drop($event)" cdkDropList>
+            <div class="components-list">
                 <div class="header">
                     <div class="item-content">
                         <div class="all-caps-label">{{ 'component-definitions.columns.position' | translate }}</div>
@@ -27,32 +27,37 @@
                     </div>
                 </div>
 
-                @for (component of componentDefinitions; track component) {
-                    <div
-                        class="list-item"
-                        [class.selected]="selectedComponent?.id === component.id"
-                        cdkDrag
-                        (click)="selectComponent(component)"
-                    >
-                        <div class="item-content">
-                            <div class="table-item-title heading">
-                                <mat-icon cdkDragHandle class="draggable" svgIcon="red:draggable-dots"></mat-icon>
-                                <span> {{ component.rank }} </span>
-                            </div>
-                            <div class="table-item-title heading">{{ component.displayName }}</div>
-                            <div class="right-content">
-                                @if (permissionsService.canEditEntities()) {
-                                    <iqser-circle-button
-                                        (action)="deleteComponent(component.id)"
-                                        [tooltip]="'trash.action.delete' | translate"
-                                        icon="iqser:trash"
-                                    ></iqser-circle-button>
-                                }
-                                <mat-icon class="arrow-right" svgIcon="red:arrow-right"></mat-icon>
+                <div (cdkDropListDropped)="drop($event)" cdkDropList class="list-content">
+                    @for (component of componentDefinitions; track component) {
+                        <div
+                            class="list-item"
+                            [class.selected]="selectedComponent?.id === component.id"
+                            cdkDrag
+                            (click)="selectComponent(component)"
+                        >
+                            <div class="item-content">
+                                <div class="table-item-title heading">
+                                    <mat-icon cdkDragHandle class="draggable" svgIcon="red:draggable-dots"></mat-icon>
+                                    <span> {{ component.rank }} </span>
+                                </div>
+                                <div class="table-item-title heading">{{ component.displayName }}</div>
+                                <div class="right-content">
+                                    @if (permissionsService.canEditEntities()) {
+                                        <iqser-circle-button
+                                            [class]="'delete-component-definition'"
+                                            (action)="deleteComponent(component.id)"
+                                            [tooltip]="'trash.action.delete' | translate"
+                                            icon="iqser:trash"
+                                        ></iqser-circle-button>
+                                    }
+                                    @if (selectedComponent?.id === component.id) {
+                                        <mat-icon class="arrow-right" svgIcon="red:arrow-right"></mat-icon>
+                                    }
+                                </div>
                             </div>
                         </div>
-                    </div>
-                }
+                    }
+                </div>
             </div>
             @if (selectedComponent) {
                 <section class="dialog">
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 80af0380b..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
@@ -32,6 +32,10 @@
         align-items: center;
         gap: 5px;
 
+        iqser-circle-button {
+            visibility: hidden;
+        }
+
         .arrow-right {
             transform: scale(0.7);
         }
@@ -40,6 +44,7 @@
 
 .content-container {
     background-color: var(--iqser-grey-6);
+    height: 100vh;
 
     .content-header {
         display: flex;
@@ -58,7 +63,7 @@
     .content {
         display: flex;
         gap: 20px;
-        height: 100%;
+        overflow: hidden;
 
         .components-list {
             flex: 1;
@@ -69,8 +74,15 @@
                 height: 30px;
             }
 
+            .list-content {
+                overflow-y: auto;
+                height: calc(100vh - 30px);
+                outline: none;
+            }
+
             .list-item {
                 height: 80px;
+                transition: background 0.3s ease;
             }
 
             .header,
@@ -95,6 +107,10 @@
                     }
                 }
             }
+
+            .list-item:hover > .item-content > .right-content > iqser-circle-button {
+                visibility: visible;
+            }
         }
 
         section {
@@ -112,6 +128,9 @@
 }
 
 .cdk-drag-preview {
+    .list-item {
+        transition: background 0.3s ease;
+    }
     .item-content {
         @extend %item-content-style;
     }
diff --git a/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.ts b/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.ts
index 31130e284..bf078ecaf 100644
--- a/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.ts
@@ -1,12 +1,5 @@
 import { Component, OnInit, signal } from '@angular/core';
-import {
-    BaseFormComponent,
-    CircleButtonComponent,
-    IconButtonComponent,
-    IqserDialog,
-    listingProvidersFactory,
-    LoadingService,
-} from '@iqser/common-ui';
+import { BaseFormComponent, CircleButtonComponent, IconButtonComponent, listingProvidersFactory, LoadingService } from '@iqser/common-ui';
 import { ComponentDefinitionsService } from '@services/entity-services/component-definitions.service';
 import { firstValueFrom } from 'rxjs';
 import { getParam } from '@common-ui/utils';
@@ -50,7 +43,6 @@ export default class ComponentDefinitionsComponent extends BaseFormComponent imp
     constructor(
         private readonly _loadingService: LoadingService,
         private readonly _componentDefinitionsService: ComponentDefinitionsService,
-        private readonly _dialog: IqserDialog,
         private readonly _formBuilder: FormBuilder,
         private readonly _dialogService: AdminDialogService,
         protected readonly permissionsService: PermissionsService,
@@ -96,13 +88,15 @@ export default class ComponentDefinitionsComponent extends BaseFormComponent imp
     }
 
     async drop(event: CdkDragDrop<string>) {
-        moveItemInArray(this.#componentDefinitions(), event.previousIndex, event.currentIndex);
+        if (event.isPointerOverContainer) {
+            moveItemInArray(this.#componentDefinitions(), event.previousIndex, event.currentIndex);
 
-        const componentIds = this.#componentDefinitions().map(c => c.id);
-        const componentDefinitions = await firstValueFrom(
-            this._componentDefinitionsService.reorderComponentDefinitions(this.#dossierTemplateId, componentIds),
-        );
-        this.#componentDefinitions.set(componentDefinitions);
+            const componentIds = this.#componentDefinitions().map(c => c.id);
+            const componentDefinitions = await firstValueFrom(
+                this._componentDefinitionsService.reorderComponentDefinitions(this.#dossierTemplateId, componentIds),
+            );
+            this.#componentDefinitions.set(componentDefinitions);
+        }
     }
 
     async deleteComponent(componentId: string) {
@@ -119,8 +113,8 @@ export default class ComponentDefinitionsComponent extends BaseFormComponent imp
 
     #getForm() {
         return this._formBuilder.group({
-            displayName: [this.selectedComponent.displayName, Validators.required],
-            description: [this.selectedComponent.description],
+            displayName: [this.selectedComponent?.displayName, Validators.required],
+            description: [this.selectedComponent?.description],
         });
     }