diff --git a/src/app/search/components/output/output-by-category.component.css b/src/app/search/components/output/output-by-category.component.css
index b2dae60069485fa3154c17b3f62c76207ca9b099..1ca6523c6414ccc9c9125a13cdda7e6fce5a9142 100644
--- a/src/app/search/components/output/output-by-category.component.css
+++ b/src/app/search/components/output/output-by-category.component.css
@@ -9,10 +9,14 @@
     color: #7AC29A;
 }
 
-button:hover {
+.letter-spacing {
+    letter-spacing: 2px;
+}
+
+.selectbox button:hover {
     background-color: #F8F9FA;
 }
 
-button:focus {
+.selectbox button:focus {
     box-shadow: none;
 }
\ No newline at end of file
diff --git a/src/app/search/components/output/output-by-category.component.html b/src/app/search/components/output/output-by-category.component.html
index 2a880a834776c469e48f87859838f625a0db9efd..bc25c970921721b1c2cbd3dbe18348b8ca69bdc2 100644
--- a/src/app/search/components/output/output-by-category.component.html
+++ b/src/app/search/components/output/output-by-category.component.html
@@ -1,11 +1,13 @@
 <p class="mb-3"><em>{{ categoryLabel }}</em></p>
+<div class="row mb-1">
+    <div class="col pr-1">
+        <button (click)="selectAll()" [disabled]="isAllSelected" class="btn btn-sm btn-block btn-outline-secondary letter-spacing">Select All</button>
+    </div>
+    <div class="col pl-1">
+        <button (click)="unselectAll()" [disabled]="isAllUnselected" class="btn btn-sm btn-block btn-outline-secondary letter-spacing">Unselect All</button>
+    </div>
+</div>
 <div class="selectbox py-1">
-    <button (click)="toggleSelectAll()" class="btn btn-block text-left py-0 m-0">
-        <div *ngIf="isAllSelected; then selected else unselected"></div>
-        <span *ngIf="!isAllSelected">Select All</span>
-        <span *ngIf="isAllSelected">Unselect All</span>
-    </button>
-    <hr class="my-1">
     <button *ngFor="let attribute of getAttributeListSortedByDisplay()" class="btn btn-block text-left py-0 m-0"
         (click)="toggleSelection(attribute.id)">
         <div *ngIf="isSelected(attribute.id); then selected else unselected"></div>
diff --git a/src/app/search/components/output/output-by-category.component.ts b/src/app/search/components/output/output-by-category.component.ts
index c7acbf32f082120e88861185d510ccccb31d7ee6..54ce630c5dd49728794f24df543801203dd4e7a1 100644
--- a/src/app/search/components/output/output-by-category.component.ts
+++ b/src/app/search/components/output/output-by-category.component.ts
@@ -13,6 +13,7 @@ export class OutputByCategoryComponent {
     @Input() attributeList: Attribute[];
     @Input() outputList: number[];
     @Input() isAllSelected: boolean;
+    @Input() isAllUnselected: boolean;
     @Output() change: EventEmitter<number[]> = new EventEmitter();
 
     getAttributeListSortedByDisplay() {
@@ -35,19 +36,22 @@ export class OutputByCategoryComponent {
         this.change.emit(clonedOutputList);
     }
 
-    toggleSelectAll(): void {
+    selectAll(): void {
         const clonedOutputList = [...this.outputList];
         const attributeListId = this.attributeList.map(a => a.id);
-        if (this.isAllSelected) {
-            attributeListId.forEach(id => {
-                const index = clonedOutputList.indexOf(id);
-                clonedOutputList.splice(index, 1);
-            });
-        } else {
-            attributeListId.filter(id => clonedOutputList.indexOf(id) === -1).forEach(id => {
-                clonedOutputList.push(id);
-            });
-        }
+        attributeListId.filter(id => clonedOutputList.indexOf(id) === -1).forEach(id => {
+            clonedOutputList.push(id);
+        });
+        this.change.emit(clonedOutputList);
+    }
+
+    unselectAll(): void {
+        const clonedOutputList = [...this.outputList];
+        const attributeListId = this.attributeList.map(a => a.id);
+        attributeListId.filter(id => clonedOutputList.indexOf(id) > -1).forEach(id => {
+            const index = clonedOutputList.indexOf(id);
+            clonedOutputList.splice(index, 1);
+        });
         this.change.emit(clonedOutputList);
     }
 }
diff --git a/src/app/search/components/output/output-by-family.component.html b/src/app/search/components/output/output-by-family.component.html
index 4a818b6068b2a7b14f8c40e7501d3d318a515f60..892f317d50e9f6130843557c1b1ae9e56a9a90eb 100644
--- a/src/app/search/components/output/output-by-family.component.html
+++ b/src/app/search/components/output/output-by-family.component.html
@@ -5,6 +5,7 @@
             [attributeList]="getAttributeByCategory(category.id)"
             [outputList]="outputList"
             [isAllSelected]="getIsAllSelected(category.id)"
+            [isAllUnselected]="getIsAllUnselected(category.id)"
             (change)="change($event)">
         </app-output-by-category>
     </div>
diff --git a/src/app/search/components/output/output-by-family.component.ts b/src/app/search/components/output/output-by-family.component.ts
index 015b2a986081379fa2aa56fbada9487f326db537..c6e66c436c48bb951b1148ccf04475a3a8646c77 100644
--- a/src/app/search/components/output/output-by-family.component.ts
+++ b/src/app/search/components/output/output-by-family.component.ts
@@ -14,7 +14,6 @@ export class OutputByFamilyComponent {
     @Input() datasetAttributeList: Attribute[];
     @Input() outputList: number[];
     @Output() changed: EventEmitter<number[]> = new EventEmitter();
-    isAllSelected = false;
 
     getCategoryByFamilySortedByDisplay(idFamily: number): Category[] {
         return this.categoryList
@@ -33,6 +32,12 @@ export class OutputByFamilyComponent {
         return attributeListId.length === filteredOutputList.length;
     }
 
+    getIsAllUnselected(idCategory: number): boolean {
+        const attributeListId = this.getAttributeByCategory(idCategory).map(a => a.id)
+        const filteredOutputList = this.outputList.filter(id => attributeListId.indexOf(id) > -1);
+        return filteredOutputList.length === 0;
+    }
+
     change(clonedOutputList: number[]): void {
         this.changed.emit(
             this.datasetAttributeList
diff --git a/src/app/search/components/output/output-tabs.component.html b/src/app/search/components/output/output-tabs.component.html
index bc0c1ff5a565aad9bba09fab52c5a66ef168d784..234581fc02274f83658a6fbe3259be0827717b38 100644
--- a/src/app/search/components/output/output-tabs.component.html
+++ b/src/app/search/components/output/output-tabs.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="outputFamilyList.length == 1">
     <div class="border rounded my-2">
-        <p class="border-bottom bg-light text-primary py-4 pl-4">{{ outputFamilyList[0].label }}</p>
-        <div class="p-3">
+        <p class="border-bottom bg-light text-primary py-4 pl-4 mb-0">{{ outputFamilyList[0].label }}</p>
+        <div class="px-3 pb-3 pt-0">
             <app-output-by-family [outputFamily]="outputFamilyList[0]" [datasetAttributeList]="datasetAttributeList"
                 [categoryList]="categoryList" [outputList]="outputList" (changed)="change($event)">
             </app-output-by-family>