diff --git a/frontend/src/app/modules/tag-engine/tags-create-dialog/tags-create-dialog.component.html b/frontend/src/app/modules/tag-engine/tags-create-dialog/tags-create-dialog.component.html
index 7101c3a059..5b50d5d749 100644
--- a/frontend/src/app/modules/tag-engine/tags-create-dialog/tags-create-dialog.component.html
+++ b/frontend/src/app/modules/tag-engine/tags-create-dialog/tags-create-dialog.component.html
@@ -40,6 +40,8 @@
             [(ngModel)]="schema" 
             [options]="schemas" 
             optionLabel="name"
+            class="guardian-dropdown"
+            panelStyleClass="guardian-dropdown-panel"
         >
             <ng-template pTemplate="selectedItem">
                 <div *ngIf="schema" class="country-item country-item-value">
@@ -57,9 +59,17 @@
             <div class="artifact-form-label">
                 {{ schema.name }}
             </div>
-            <div (click)="onDeleteArtifact()" class="delete-artifact">
-                <i class="pi pi-trash"></i>
+
+            <div
+                class="guardian-icon-button big delete-artifact"
+                (click)="onDeleteArtifact()">
+                <svg-icon
+                    class="icon-btn"
+                    src="/assets/images/icons/delete.svg"
+                    [svgClass]="'icon-color-delete'">
+                </svg-icon>
             </div>
+
             <form [formGroup]="schemaForm">
                 <app-schema-form-root
                     [schema]="schema" 
@@ -70,89 +80,10 @@
         </div>
     </div>
     <div class="dialog-footer">
-        <button (click)="onAddArtifact(schema)" *ngIf="!schema" class="button secondary" label="Add Document"
-                pButton style="margin-right: auto;"></button>
+        <button (click)="!noSchemas && onAddArtifact(schema)" *ngIf="!schema" [class.disabled-button]="noSchemas"
+            [pTooltip]="noSchemas ? 'Create and publish document schema first' : undefined" tooltipPosition="top"
+            class="button secondary" label="Add Document" pButton style="margin-right: auto;"></button>
         <button (click)="onNoClick()" class="button secondary" label="Cancel" pButton></button>
         <button (click)="onCreate()" [disabled]="disabled" [label]="'Create'" class="button" pButton></button>
     </div>
-</div>
-
-<div *ngIf="false" class="g-dialog-content">
-    <div class="g-dialog-header">
-        <div class="g-dialog-cancel">
-            <div class="g-dialog-cancel-btn" (click)="onNoClick()">
-                <i class="pi pi-times"></i>
-            </div>
-        </div>
-        <div class="g-dialog-title">
-            {{ title }}
-        </div>
-        <div class="g-dialog-actions">
-            <div class="g-dialog-actions-btn" (click)="onCreate()" [attr.disabled]="disabled">
-                Create
-            </div>
-        </div>
-    </div>
-    <div class="g-dialog-body">
-        <div style="padding: 20px 35px 30px 35px">
-            <form [formGroup]="dataForm">
-                <div class="form-group example-full-width">
-                    <label for="labelInput" class="form-label">* Label</label>
-                    <input
-                        pInputText
-                        id="labelInput"
-                        type="text"
-                        placeholder="Label"
-                        formControlName="name"
-                        class="full-width">
-                </div>
-                <div class="form-group example-full-width">
-                    <label for="descriptionInput" class="form-label">Description</label>
-                    <input
-                        pInputText
-                        id="descriptionInput"
-                        type="text"
-                        placeholder="Description"
-                        formControlName="description"
-                        class="full-width">
-                </div>
-            </form>
-
-            <div *ngIf="schemas && schemas.length" class="artifact-container">
-                <div *ngIf="!schema" class="add-artifact" (click)="onAddArtifact(selector)">
-                    <i class="pi pi-plus add-icon"></i>
-                    <div class="btn-name">
-                        Add Document
-                    </div>
-                </div>
-                <p-dropdown
-                    #selector
-                    class="artifact-selector"
-                    [(ngModel)]="schema"
-                    (onChange)="onSelectSchema()"
-                    [options]="schemas"
-                    optionLabel="name"
-                    placeholder="Select a schema"
-                    [appendTo]="'body'"
-                >
-                </p-dropdown>
-                <div *ngIf="schema" class="artifact-form">
-                    <div class="artifact-form-label">
-                        {{ schema.name }}
-                    </div>
-                    <div class="delete-artifact" (click)="onDeleteArtifact()">
-                        <i class="pi pi-times"></i>
-                    </div>
-                    <form [formGroup]="schemaForm">
-                        <app-schema-form-root 
-                            [formGroup]="schemaForm" 
-                            [schema]="schema"
-                            [showButtons]="false"
-                            (form)="initForm($event)">
-                        </app-schema-form-root>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/modules/tag-engine/tags-create-dialog/tags-create-dialog.component.scss b/frontend/src/app/modules/tag-engine/tags-create-dialog/tags-create-dialog.component.scss
index 39b2a62f5b..bb37910dc6 100644
--- a/frontend/src/app/modules/tag-engine/tags-create-dialog/tags-create-dialog.component.scss
+++ b/frontend/src/app/modules/tag-engine/tags-create-dialog/tags-create-dialog.component.scss
@@ -1,5 +1,5 @@
 .mat-button-base:not([started]) {
-    background-color: rgba(0,0,0,.12);
+    background-color: rgba(0, 0, 0, .12);
 }
 
 .mat-dialog-content {
@@ -117,7 +117,7 @@ form {
 }
 
 .selected-artifact-label {
-    color: rgba(0,0,0,.6);
+    color: rgba(0, 0, 0, .6);
     font-size: 14px;
     position: absolute;
     top: -10px;
@@ -135,33 +135,25 @@ form {
 }
 
 .delete-artifact {
-    position: relative;
-    height: 52px;
-    width: 52px;
-    border-radius: 6px;
-    cursor: pointer;
-    margin-left: 8px;
-
     position: absolute;
-    right: -10px;
-    top: -26px;
-    background: #ffffff;
-    box-shadow: -5px 0px 0px 0px #ffffff;
+    right: -2px;
+    top: -12px;
+    z-index: 1;
 }
 
-.delete-artifact:hover {
-    background: #f1f1f1;
-}
-
-.delete-artifact i,
-.delete-artifact svg{
-    position: absolute;
-    color: #f44336;
-    top: 12px;
-    left: 12px;
-    width: 28px;
-    height: 28px;
-    font-size: 28px;
+.artifact-form {
+    &::before {
+        content: "";
+        display: block;
+        position: absolute;
+        right: -2px;
+        top: -18px;
+        width: 40px;
+        height: 40px;
+        pointer-events: none;
+        background: #ffffff;
+        z-index: 0;
+    }
 }
 
 .artifact-form {
@@ -172,82 +164,91 @@ form {
 }
 
 .artifact-form-label {
+    color: var(--color-primary) !important;
     position: absolute;
-    color: #0c77ff;
     font-size: 20px;
     font-weight: 500;
     padding: 10px;
     background: #fff;
     left: 50%;
-    top: -22px;
+    top: -27px;
     transform: translate(-50%, 0px);
 }
 
 ::ng-deep {
-  .p-dialog-title {
-    font-family: Poppins, sans-serif;
-    font-size: 24px;
-    font-style: normal;
-    font-weight: 600;
-  }
+    .p-dialog-title {
+        font-family: Poppins, sans-serif;
+        font-size: 24px;
+        font-style: normal;
+        font-weight: 600;
+    }
 
-  .p-dialog {
-    box-shadow: none;
-  }
+    .p-dialog {
+        box-shadow: none;
+    }
 
-  .p-dialog-header {
-    border-top-left-radius: 16px !important;
-    border-top-right-radius: 16px !important;
-  }
+    .p-dialog-header {
+        border-top-left-radius: 16px !important;
+        border-top-right-radius: 16px !important;
+    }
 
-  .p-dialog-content {
-    border-bottom-left-radius: 16px;
-    border-bottom-right-radius: 16px;
-  }
+    .p-dialog-content {
+        border-bottom-left-radius: 16px;
+        border-bottom-right-radius: 16px;
+    }
 }
 
 .form-input-container {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 24px;
-
-  .p-field-label {
-    color: var(--color-grey-black-1, #181818);
-    font-family: Inter, sans-serif;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 14px;
-    margin-bottom: 6px;
-  }
-
-  .p-field-input {
-    border-radius: 8px;
-    border: 1px solid var(--color-grey-3, #E1E7EF);
-    background: var(--color-grey-white, #FFF);
-    outline: none !important;
-    box-shadow: unset !important;
-    padding: 12px 0 12px 16px;
-    align-items: center;
-    align-self: stretch;
-    transition: border 0.25s ease-in-out;
-    box-sizing: border-box;
-    resize: vertical;
-
-    color: var(--color-grey-black-1, #181818);
-    font-family: Inter, sans-serif;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 16px;
-  }
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 24px;
+
+    .p-field-label {
+        color: var(--color-grey-black-1, #181818);
+        font-family: Inter, sans-serif;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 14px;
+        margin-bottom: 6px;
+    }
+
+    .p-field-input {
+        border-radius: 8px;
+        border: 1px solid var(--color-grey-3, #E1E7EF);
+        background: var(--color-grey-white, #FFF);
+        outline: none !important;
+        box-shadow: unset !important;
+        padding: 12px 0 12px 16px;
+        align-items: center;
+        align-self: stretch;
+        transition: border 0.25s ease-in-out;
+        box-sizing: border-box;
+        resize: vertical;
+
+        color: var(--color-grey-black-1, #181818);
+        font-family: Inter, sans-serif;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 16px;
+    }
 }
 
 
 .dialog-footer {
-  padding-top: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  column-gap: 16px;
-}
+    padding-top: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    column-gap: 16px;
+}
+
+.disabled-button {
+    opacity: 0.6;
+    pointer-events: auto;
+    cursor: not-allowed;
+    background: var(--color-grey-1) !important;
+    border: 1px solid var(--color-grey-3) !important;
+    color: var(--color-grey-5) !important;
+}
\ No newline at end of file
diff --git a/frontend/src/app/modules/tag-engine/tags-create-dialog/tags-create-dialog.component.ts b/frontend/src/app/modules/tag-engine/tags-create-dialog/tags-create-dialog.component.ts
index 31949f9491..f1dd6e3e6d 100644
--- a/frontend/src/app/modules/tag-engine/tags-create-dialog/tags-create-dialog.component.ts
+++ b/frontend/src/app/modules/tag-engine/tags-create-dialog/tags-create-dialog.component.ts
@@ -93,4 +93,8 @@ export class TagCreateDialog {
         }
         return true;
     }
+
+    get noSchemas(): boolean {
+        return !this.schemas?.length;
+    }
 }