diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
index 7b68b772353..dda0b37bfa0 100644
--- a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
+++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
@@ -9,7 +9,6 @@
         height: 32px;
         border-radius: 12px;
         align-items: center;
-        padding: 0 12px;
 
         mat-form-field {
             width: 100%;
@@ -27,8 +26,14 @@
             width: 100%;
         }
 
-        .mat-form-field-appearance-fill .mat-form-field-flex {
-            background: none;
+        .mat-form-field-appearance-fill {
+            .mat-form-field-flex {
+                background: none;
+            }
+        
+            .mat-form-field-infix {
+                padding: 0;
+            }
         }
     }
 
@@ -50,6 +55,13 @@
     [hidden] {
         visibility: hidden;
     }
+
+    .adf-no-categories-message {
+        margin-left: 9px;
+        margin-top: 28.5px;
+        margin-bottom: 0;
+        height: 30px;
+    }
 }
 
 .adf-categories-list {
diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html
index 9bcc0e09abf..0e7835d43c5 100644
--- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html
+++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html
@@ -99,7 +99,7 @@
                     class="adf-metadata-properties-tags">
                     <span *ngFor="let tag of tags" class="adf-metadata-properties-tag">{{ tag }}</span>
                 </div>
-                <div *ngIf="!tags.length && !editableTags" class="adf-metadata-no-tags-added">
+                <div *ngIf="!tags.length && !editableTags" class="adf-metadata-no-item-added">
                     {{ 'METADATA.BASIC.NO_TAGS_ADDED' | translate }}
                 </div>
                 <div *ngIf="editableTags" class="adf-metadata-properties-tags">
@@ -157,7 +157,7 @@
                 <div *ngIf="!editableCategories">
                     <p *ngFor="let category of categories" class="adf-metadata-categories">{{ category.name }}</p>
                 </div>
-                <div *ngIf="!categories.length && !editableCategories" class="adf-metadata-no-categories-added">
+                <div *ngIf="!categories.length && !editableCategories" class="adf-metadata-no-item-added">
                     {{ 'CATEGORIES_MANAGEMENT.NO_CATEGORIES_ADDED' | translate }}
                 </div>
                 <div *ngIf="editableCategories" class="adf-metadata-categories-header">
@@ -215,7 +215,7 @@
                             </div>
                         </mat-expansion-panel-header>
                         <mat-divider class="adf-mat-divider"></mat-divider>
-                        <div *ngIf="!showGroup(group) && !group.editable" class="adf-metadata-no-tags-added">
+                        <div *ngIf="!showGroup(group) && !group.editable" class="adf-metadata-no-item-added">
                             {{ 'METADATA.BASIC.NO_ITEMS_MESSAGE' | translate: { groupTitle: group.title } }}
                         </div>
                         <adf-card-view
diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
index 3a175f79e3a..60e92143a17 100644
--- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
+++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
@@ -42,15 +42,7 @@
             margin-left: 8px;
         }
 
-        .adf-metadata-no-tags-added {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 15px;
-            padding: 24px;
-        }
-
-        .adf-metadata-no-categories-added {
+        .adf-metadata-no-item-added {
             display: flex;
             align-items: center;
             justify-content: center;
diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts
index cc7b77a799c..4d546ae99e6 100644
--- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts
+++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts
@@ -345,6 +345,7 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
     toggleGeneralEdit(event: MouseEvent): void {
         event.stopPropagation();
         this.editable = !this.editable;
+        this.editableChange.emit(this.editable);
         this.cancelEditChanges();
         if (this.editable) {
             this.panel.open();
@@ -356,10 +357,10 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
     toggleTagsEdit(event: MouseEvent): void {
         event.stopPropagation();
         this.editableTags = !this.editableTags;
+        this.tagsPanelState = this.editableTags;
         this.cancelEditChanges();
         this.tagNameControlVisible = true;
         if (this.editableTags) {
-            this.tagsPanelState = true;
             this.editable = false;
             this.editableCategories = false;
         }
@@ -369,9 +370,9 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
         event.stopPropagation();
         this.cancelEditChanges();
         this.editableCategories = !this.editableCategories;
+        this.categoriesPanelState = this.editableCategories;
         this.categoryControlVisible = true;
         if (this.editableCategories) {
-            this.categoriesPanelState = true;
             this.editable = false;
             this.editableTags = false;
         }
@@ -383,6 +384,7 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
             this.editableGroup.editable = false;
         }
         group.editable = !group.editable;
+        this.editableChange.emit(this.editable);
         this.editableGroup = group.editable ? group : null;
         if (group.editable) {
             group.expanded = true;