diff --git a/pmp-ui/src/app/features/resources/cert-upload/cert-upload.component.html b/pmp-ui/src/app/features/resources/cert-upload/cert-upload.component.html
index 278d4b86e..1659e4186 100644
--- a/pmp-ui/src/app/features/resources/cert-upload/cert-upload.component.html
+++ b/pmp-ui/src/app/features/resources/cert-upload/cert-upload.component.html
@@ -19,19 +19,67 @@ <h3 *ngIf="!showCALabel">{{'uploadcertificate.title' | translate}}</h3>
           <div [formGroup]="createForm" class="primary-form" *ngIf="createForm"> 
             <mat-form-field>
               <mat-label>{{'uploadcertificate.partnerDomain' | translate}}</mat-label>
-              <mat-select formControlName="partnerDomain" required>
+              <mat-select id="partnerDomain" formControlName="partnerDomain" required>
                 <mat-option
                   *ngFor="let data of partnerDomain"
+                  [id]="data"
                   [value]="data"
                 >
                   {{ data}}
                 </mat-option>
               </mat-select>
             </mat-form-field>
-            <div class="custom-file-input">
-              <input type="button" value="{{'uploadcertificate.chooseFile' | translate}}" class="browseInput">
-              <input type="file" #fileInput (change)="onFileSelect($event)" placeholder="Upload file..." />
-              <input type="text" [value]="fileName" placeholder="{{'uploadcertificate.uploadYourFile' | translate}} *">                
+            <!-- <div class="custom-file-input" id="custom-file-input">
+              <input id="custom-file-input-button" type="button" value="{{'uploadcertificate.chooseFile' | translate}}" class="browseInput">
+              <input id="custom-file-input-file" type="file" #fileInput (change)="onFileSelect($event)" placeholder="Upload file..." />
+              <input id="custom-file-input-fileName" type="text" [value]="fileName" placeholder="{{'uploadcertificate.uploadYourFile' | translate}} *">                
+            </div> -->
+              <label class="labelfileupload">{{'uploadcertificate.uploadYourFile' | translate}} <span style="color:red;">*</span></label>
+              <div class="container" appDnd (fileDropped)="onFileDropped($event)" id="custom-file-input">
+              <input (click)="$event.target.value=null" type="file" #fileInput id="fileInput" (change)="onFileSelect($event)"/>
+              <label style="margin-right: 1rem;display: flex;" for="fileInput">
+                <svg id="upload_icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24.042"
+                  viewBox="0 0 24 24.042">
+                  <g id="Group_13" data-name="Group 13" transform="translate(3 2.504)">
+                    <path id="Path_988" data-name="Path 988"
+                      d="M13,11.337l2.59,2.585L17,12.509,12,7.5,7,12.509l1.41,1.412L11,11.337v9.687h2Z"
+                      transform="translate(-3 -7.5)" fill="#FF4081" />
+                    <path id="Path_2004" data-name="Path 2004"
+                      d="M19,3v7.012H5V3H3v7.012a2.008,2.008,0,0,0,2,2H19a2.008,2.008,0,0,0,2-2V3Z"
+                      transform="translate(-3 6.517)" fill="#FF4081" />
+                  </g>
+                  <path id="Path_989" data-name="Path 989" d="M0,24.042H24V0H0Z" fill="none" />
+                </svg>
+                <span style="margin-top: 4px;padding-left: 5px; font-size: 14px; font-weight: 600;">{{'uploadcertificate.chooseFile' | translate}}</span>
+              </label>
+            </div>
+
+            <div class="files-list">
+              <div class="single-file" *ngFor="let file of files; let i = index">
+                <div class="file-icon" style="width: 50px">
+                  <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 58 58"
+                    style="enable-background:new 0 0 58 58;" xml:space="preserve">
+                    <polygon style="fill:#EDEADA;" points="51.5,14 37.5,0 6.5,0 6.5,58 51.5,58 " />
+                    <g>
+                      <path style="fill:#CEC9AE;"
+                        d="M16.5,23h25c0.552,0,1-0.447,1-1s-0.448-1-1-1h-25c-0.552,0-1,0.447-1,1S15.948,23,16.5,23z" />
+                      <path style="fill:#CEC9AE;"
+                        d="M16.5,15h10c0.552,0,1-0.447,1-1s-0.448-1-1-1h-10c-0.552,0-1,0.447-1,1S15.948,15,16.5,15z" />
+                      <path style="fill:#CEC9AE;"
+                        d="M41.5,29h-25c-0.552,0-1,0.447-1,1s0.448,1,1,1h25c0.552,0,1-0.447,1-1S42.052,29,41.5,29z" />
+                      <path style="fill:#CEC9AE;"
+                        d="M41.5,37h-25c-0.552,0-1,0.447-1,1s0.448,1,1,1h25c0.552,0,1-0.447,1-1S42.052,37,41.5,37z" />
+                      <path style="fill:#CEC9AE;"
+                        d="M41.5,45h-25c-0.552,0-1,0.447-1,1s0.448,1,1,1h25c0.552,0,1-0.447,1-1S42.052,45,41.5,45z" />
+                    </g>
+                    <polygon style="fill:#CEC9AE;" points="37.5,0 37.5,14 51.5,14 " />
+                  </svg>
+                </div>
+                <div class="info">
+                  <h4 class="name">{{file?.name}}</h4>
+                </div>
+              </div>
             </div>
           </div>
         </mat-card-content>
@@ -50,4 +98,4 @@ <h3 *ngIf="!showCALabel">{{'uploadcertificate.title' | translate}}</h3>
       </mat-card>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/pmp-ui/src/app/features/resources/cert-upload/cert-upload.component.scss b/pmp-ui/src/app/features/resources/cert-upload/cert-upload.component.scss
index 046d7c6cc..ddfc5fed4 100644
--- a/pmp-ui/src/app/features/resources/cert-upload/cert-upload.component.scss
+++ b/pmp-ui/src/app/features/resources/cert-upload/cert-upload.component.scss
@@ -6,7 +6,7 @@
     font-size: 12.5px;
     position: absolute;
     margin-top: 20px;
-}
+  }
 
 .breadcrumb > a {
     text-decoration: none;
@@ -25,7 +25,7 @@
   @media (max-width: 768px) {
     margin-right: 0px !important;
     margin-left: 0px !important;
-  }
+}
 }
 .mat-card-content {
   margin-top: 5px !important;
@@ -42,60 +42,60 @@
   &::-webkit-scrollbar {
     width: 0px;
     background: transparent;
-  }
-  .header {
+}
+.header {
     border-bottom: 1px solid #c6c6c6 !important;
     font-family: "Roboto", sans-serif;
     font-size: 14px;
-    .mat-card-header-text {
+  .mat-card-header-text {
       margin: 0px;
     }
     b {
       margin-bottom: 5px;
       color: #c6c6c6;
     }
-  }
-  .content {
+}
+.content {
     display: flex;
     justify-content: space-between;
     font-family: "Roboto", sans-serif;
     font-size: 12px;
     margin-top: 2px;
     cursor: pointer;
-    span {
+  span {
       display: inline-block;
       vertical-align: middle;
-    }
   }
-  .content:hover{
+}
+.content:hover{
     background-color: #FFE6EE;
     border-radius: 3px;
-  }
+}
 
-  @media (max-width: 768px) {
+@media (max-width: 768px) {
     flex-direction: column;
-  }
-  .item1 {
+}
+.item1 {
     flex: 1;
     margin: 0px 10px !important;
     @media (max-width: 768px) {
       margin-right: 0px !important;
       margin-left: 0px !important;
       margin-bottom: 10px !important;
-    }
-
-    mat-card {
+  }
+  
+  mat-card {
       height: calc(100% + 3px);
-    }
   }
-  .sub-items {
+}
+.sub-items {
     flex-direction: column;
     .sub-item1,
     .sub-item2,
     .sub-item3 {
-      margin-bottom: 15px;
+        margin-bottom: 15px;
     }
-  }
+}
 }
 
 .browseInput {
@@ -139,4 +139,105 @@
 }
 .mat-form-field{
   padding:10px;
+}
+
+.container {
+  height: 105px;
+  padding: 2rem;
+  border: dashed 1px #FF4081;
+  background-color: #f1b5c9;
+  position: relative;
+  display: flex;
+  border-radius: 5px;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  margin-left: 8px;
+  margin-top: 10px;
+}
+.container input {
+  opacity: 0;
+  position: absolute;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.container label {
+  color: #FF4081;
+  width: 148px;
+  height: 44px;
+  border-radius: 5px;
+  background: #FFFFFF;
+  padding: 10px;
+  border: 1px solid #CCCCCC;
+  /*display: flex;*/
+  font-size: 12px;
+  font-weight: 200;
+}
+.container h3 {
+  font-size: 16px;
+  color: #FF4081;
+  padding-left: 3px;
+  padding-top: 7px;
+  font-weight: 600;
+}
+
+.fileover {
+  animation: shake 1s;
+  animation-iteration-count: infinite;
+}
+.files-list {
+   margin-top: 1.5rem;
+}
+.files-list .single-file {
+  display: flex;
+  padding: 0.5rem;
+  justify-content: space-between;
+  align-items: center;
+  border: dashed 1px #FF4081;
+  margin-bottom: 1rem;
+  flex-grow: 1;
+  margin-left: 8px;
+}
+.files-list .single-file .preview {
+  display: flex;
+  margin-left: 0.5rem;
+  cursor: pointer;
+  align-self: flex-end;
+}
+.files-list .single-file .delete {
+  display: flex;
+  margin-left: 0.5rem;
+  cursor: pointer;
+  align-self: flex-end;
+}
+.files-list .single-file .name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #353f4a;
+  margin: 0;
+}
+.files-list .single-file .size {
+  font-size: 12px;
+  font-weight: 500;
+  color: #a4a4a4;
+  margin: 0;
+  margin-bottom: 0.25rem;
+}
+.files-list .single-file .info {
+  width: 100%;
+}
+
+.preview-heading{
+  color: #505050;
+  font-weight: 600;
+}
+
+.labelfileupload {
+  font-size: 12px;
+  font-weight: 500;
+  margin-left: 8px;
+  color: rgba(0, 0, 0, 0.54);
 }
\ No newline at end of file