Merge live repo with design changes ccsdk-2309

Issue-ID: CCSDK-2309
Change-Id: Iba91eebc5880a930842e66fa97d20441c52e347b
Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>

19 files changed, 431 insertions, 201 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
index df1911a7d..730525504 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
@@ -7,13 +7,11 @@
                 <h2 class="col m-0">
                     <ul class="breadcrumb-header">
                         <li><a routerLink="/packages">CBA Packages</a></li>
+                        <i class="fa fa-angle-right ml-2 mr-2"></i>
                         <li>Package Name</li>
                     </ul>
                 </h2>
-                <div class="col d-flex justify-content-end header-button-save">
-                    <button class="float btn btn-sm btn-outline-secondary" (click)="goBacktoDashboard()">Discard
-                        Changes</button>
-                    <button class="float btn btn-sm btn-primary" (click)="editBluePrint()">Apply Changes</button>
+                <div class="col">
                 </div>
             </div>
         </header>
@@ -23,54 +21,97 @@
         <div class="container-fluid body-container">
 
             <div class="container">
-                <!-- <div class="creat-action-container">
+                <div class="creat-action-container">
+
+                    <a href="#" class="action-button" (click)="editBluePrint()">
+                        <i class="icon-save-sm" aria-hidden="true"></i>
+                        <span>Save</span>
+                    </a>
+                    <a href="#" class="action-button" (click)="goBacktoDashboard()">
+                        <i class="icon-discard-sm" aria-hidden="true"></i>
+                        <span>Discard Changes</span>
+                    </a>
+
+                    <hr>
                     <a href="#" class="action-button">
-                        <i class="icon-clone" aria-hidden="true"></i>
+                        <i class="icon-clone-sm" aria-hidden="true"></i>
                         <span>Clone</span>
                     </a>
 
                     <a href="#" class="action-button">
-                        <i class="icon-archive" aria-hidden="true"></i>
+                        <i class="icon-archive-sm" aria-hidden="true"></i>
                         <span>Archive</span>
                     </a>
 
-                    <a href="#" class="action-button delete">
-                        <i class="icon-delete" aria-hidden="true"></i>
+                    <a href="#" class="action-button">
+                        <i class="icon-download" aria-hidden="true"></i>
+                        <span>Download</span>
+                    </a>
+
+                    <a href="#" class="action-button delete"
+                        (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)">
+                        <i class="icon-delete-sm" aria-hidden="true"></i>
                         <span>Delete</span>
                     </a>
-                </div>-->
+                </div>
 
                 <div class="card creat-card view-package-container">
                     <div class="row">
-                        <div class="col-8">
-                            <div class="row">
-                                <div class="col d-flex">
-                                    <i class="package-type-icon icon-designer-mode"></i>
-                                    <div class="package-name-container">
-                                        <div class="row">
-                                            <div class="col-12 package-name deployed">
-                                                {{viewedPackage.artifactName}}
-                                                <span>.vLB.CDS</span>
-                                                <i class="icon-deploy"></i>
-                                            </div>
-                                            <div class="col-12 package-description">
-                                                Last modified {{ viewedPackage.createdDate | date:'short' }} By
-                                                {{viewedPackage.updatedBy}}
-                                            </div>
-                                        </div>
-
-                                    </div>
+                        <div class="col-1 text-center"><i class="package-type-icon icon-topologyView-active"></i></div>
+                        <div class="col-9">
+                            <div class="row mb-4">
+                                <div class="col-12 package-name deployed">
+                                    {{viewedPackage.artifactName}}<span>.vLB.CDS</span>
+                                    <img src="/assets/img/icon-deploy-inactive.svg" class="deply-status-icon">
+                                    <span class="package-version">Version 1.0.2</span>
+                                </div>
+                                <div class="col-12 package-description">
+                                    Last modified {{ viewedPackage.createdDate | date:'short' }} By
+                                    {{viewedPackage.updatedBy}}
+                                </div>
+                            </div>
+                            <div class="row package-auth-info">
+                                <div class="col-3">
+                                    <p><b>Author Name</b></p>
+                                    <span>Shaaban Ebrahim</span>
+                                </div>
+                                <div class="col-4">
+                                    <p><b>Author Email</b></p>
+                                    <span>shaaban.eltanany.ext@orange.com</span>
+                                </div>
+                                <div class="col-5">
+                                    <p><b>Contributions</b></p>
+                                    <ul class="package-contributers">
+                                        <li>
+                                            <button type="button" class="border-fade" data-toggle="tooltip"
+                                                data-placement="bottom" title="User name">
+                                                <img src="/assets/img/img-user1.jpeg">
+                                            </button>
+                                        </li>
+                                        <li>
+                                            <button type="button" data-toggle="tooltip" data-placement="bottom"
+                                                title="User name">
+                                                <img src="/assets/img/img-user2.jpg">
+                                            </button>
+                                        </li>
+                                        <li>
+                                            <button type="button" data-toggle="tooltip" data-placement="bottom"
+                                                title="User name">
+                                                <img src="/assets/img/img-user3.jpg">
+                                            </button>
+                                        </li>
+                                        <li>
+                                            <a href="">5 contributors</a>
+                                        </li>
+                                    </ul>
                                 </div>
                             </div>
                         </div>
-                        <div class="col-4 package-view-button">
+                        <div class="col-2 package-view-button pt-3">
+                            <button class="btn btn-sm btn-primary mb-2" (click)="goToDesignerMode()">Designer
+                                Mode</button>
                             <button class="btn btn-sm btn-outline-secondary" (click)="deployCurrentPackage()"><i
                                     class="fa fa-play-circle"></i> Deploy</button>
-                            <button class="btn btn-sm btn-outline-secondary"
-                                (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)"><i
-                                    class="fa"></i> Download</button>
-
-                            <button class="btn btn-sm btn-primary" (click)="goToDesignerMode()">Designer Mode</button>
                         </div>
                     </div>
 
@@ -80,7 +121,7 @@
                     <!--Nav Tabs-->
                     <div class="col">
                         <div class="nav nav-tabs " id="nav-tab" role="tablist">
-                            <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab"
+                            <a class="nav-item nav-link active complete" id="nav-metadata-tab" data-toggle="tab"
                                 href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true"
                                 autofocus #nameit (focusout)="saveMetaData()">METADATA</a>
                             <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
index 37a6f9235..04f410c5f 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
@@ -4,12 +4,21 @@ body{
   background-size: 6px 6px !important;  
 }
 
+/*Icons*/
+.icon-info{
+  margin-left: 3px;
+}
+.icon-info::before{
+  color: #fff;
+}
 
 /*Header*/
 header{
+  position: relative;
   height: 60px;
   background-color: #1B3E6F;
   box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0);
+  z-index: 200000000 !important;
 }
 .logo{
   float: left;
@@ -43,9 +52,13 @@ header{
   padding: 4px 10px;
   background: #F4F9FE;
   border-radius: 10px;
-  color: #C3CDDB;
+  color: #1B3E6F;
   font-size: 10px;
 }
+.designer-breadcrumb .fa-angle-right::before {
+  color: #fff;
+  line-height: 38px;
+}
 .sidebar-container{
   height: calc(100vh - 60px) !important;
 }
@@ -68,7 +81,7 @@ header{
 .btn-topology-action,
 .btn-topology-action:hover{
   margin: 0 6px;
-  padding: 6px 10px;
+  padding: 4px 8px;
   color: #fff;
   border-radius: 50%;
   border: solid .5px #fff;
@@ -97,13 +110,15 @@ header{
 .topology-actions .dropdown-text::after{
   right: 15px;
   top: 13px;
-  border-width: 6px 6px 0 6px;
+  border-style: solid !important;
+  border-width: 5px 5px 0 5px !important;
   border-color: #fff transparent transparent transparent;
 }
 .topology-actions .dropdown-toggle:focus ~ .dropdown-text::after{
   top: 13px;
-  border-width: 0 6px 6px 6px;
-  border-color: transparent transparent #fff transparent
+  border-style: solid !important;
+  border-width: 0 5px 5px 5px !important;
+  border-color: transparent transparent #fff transparent;
 }
 .topology-actions .dropdown-content:hover, 
 .topology-actions .dropdown-toggle:focus ~ .dropdown-content{
@@ -123,9 +138,35 @@ header{
   background: #F4F9FE;
   text-decoration: none;
 }
-
-
-
+.package-info-btn{
+  padding: 0 !important;
+}
+.package-info h3{
+  font-size: 15px;
+  font-weight: bold;
+}
+.package-info h3 span{
+  font-size: 11px;
+}
+.package-info .badge{
+  margin-right: 6px;
+  padding: 4px 10px;
+  background: #E0E8F2;
+  border-radius: 12px;
+  color: #1B3E6F;
+  font-size: 11px;
+  font-weight: normal;
+}
+.creator-pic{
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+}
+.package-info p{
+  margin-bottom: 0;
+  font-size: 11px;
+  line-height: 20px;
+}
 
 
 
@@ -179,7 +220,24 @@ button.rotate{
 .rotate a:hover{
   text-decoration: none;
 }
-
+#board-paper svg{
+  top: 40px;
+  left: 30px;
+}
+.componentsList tspan{
+  width:60px !important; 
+  font: normal 13px sans-serif; 
+  fill: #1B3E6F !important; 
+  overflow-wrap: break-word;
+}
+#board-paper #name tspan{
+  /* fill: green; */
+  text-align: center;
+  
+}
+tspan#type{
+  text-align: center;
+}
 /*ACTIONS & COMPONENTS MENU*/
 .input-search-controller{
   height: 50px;
@@ -252,6 +310,8 @@ p.compType-4{
   color: #C3CDDB;
 }
 .controllerSidebar b{
+  margin-left: 12px;
+  margin-bottom: 9px;
   font-size: 12px;
   color: #C3CDDB;
 }
@@ -261,17 +321,17 @@ p.compType-4{
   border-radius: 2px !important;
   font-size: 12px;
   font-weight: bold;
+  outline: 0 !important;
 }
-.actionBtns .btn:first-child{
+.actionBtns .btn.insert-custom{
   background: #1B3E6F;
   border: solid 1px #1B3E6F;
   color: #fff;
 }
-.actionBtns .btn:last-child{
-  padding-left: 34px !important;
-  background: url(src/assets/img/icon-import-blue.svg) 12px center #fff no-repeat;
+.actionBtns .btn.import-action{
   border: solid 1px #D0DFF1;
   color: #1B3E6F;
+  
 }
 .actionsList,
 .componentsList{
@@ -281,6 +341,7 @@ p.compType-4{
   padding-bottom: 0;
   height: calc( 100vh - 218px)!important;
   overflow: scroll;
+  background: #F4F9FE !important;
 }
 .custom-control.custom-checkbox:hover,
 .custom-control-label:hover{
@@ -553,7 +614,7 @@ p.compType-4{
 .source-button{
   position: absolute;
     z-index: 9999999;
-    top: 69px;
+    top: 60px;
     left: 50%;
 }
 /*jointjs paper*/
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
index 1a2219bab..bd5b07e45 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
@@ -4,17 +4,61 @@
         <div class="col pl-0">
             <p class="logo mb-0"></p>
             <nav aria-label="breadcrumb">
-                <ol class="breadcrumb mb-0">
+                <ol class="breadcrumb designer-breadcrumb mb-0">
                     <li class="breadcrumb-item">
                         <a href="#">CBA Packages</a>
                     </li>
+                    <i class="fa fa-angle-right ml-2 mr-2"></i>
                     <li class="breadcrumb-item">
                         <a href="#">Package Name</a>
+                        <button type="button" class="btn package-info-btn" data-toggle="modal"
+                            data-target="#exampleModalLong">
+                            <i class="icon-info" aria-hidden="true"></i>
+                        </button>
                     </li>
+                    <i class="fa fa-angle-right ml-2 mr-2"></i>
                     <li class="breadcrumb-item active" aria-current="page">
-                        <p class="mb-0">Topology View</p>
+                        <p class="mb-0">Designer Mode</p>
                     </li>
                 </ol>
+                <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
+                    aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+                    <div class="modal-dialog" role="document">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h5 class="modal-title" id="exampleModalLongTitle">Package Details</h5>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <img src="assets/img/icon-close.svg" />
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <div class="row package-info">
+                                    <div class="col-12">
+                                        <h3>Test Package<span>.vLB.CDS</span>
+                                            <span class="package-version">Version 1.0.2</span></h3>
+                                    </div>
+                                    <div class="col-12 mb-3">
+                                        <span class="badge badge-primary">test</span>
+                                        <span class="badge badge-primary">vDNS-CDS</span>
+                                        <span class="badge badge-primary">SCALE-OUT</span>
+                                        <span class="badge badge-primary">MARCO</span>
+                                    </div>
+                                    <div class="col-2">
+                                        <img src="/assets/img/img-user3.jpg" class="creator-pic">
+                                    </div>
+                                    <div class="col-10 pl-0">
+                                        <p><b>Author information:</b></p>
+                                        <p>Abdelmuhaimen Seaudi</p>
+                                        <p>abdelmuhaimen.seaudi@orange.com</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </nav>
         </div>
         <div class="col pr-0 text-right">
@@ -22,15 +66,15 @@
                 <li>
                     <div class="btn-group" role="group" aria-label="Basic example">
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
-                           data-tooltip="Preview">
+                            data-tooltip="Preview">
                             <i class="fa fa-eye"></i>
                         </a>
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
-                           data-tooltip="Download">
+                            data-tooltip="Download">
                             <i class="fa fa-download"></i>
                         </a>
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
-                           data-tooltip="Share">
+                            data-tooltip="Share">
                             <i class="fa fa-share-square"></i>
                         </a>
                     </div>
@@ -58,24 +102,24 @@
 <div class="source-button editBar">
     <div class="btn-group viewBtns" role="group">
         <button type="button" class="btn btn-secondary topologySource active">Designer</button>
-        <button [routerLink]="['/designer/source']" type="button" class="btn btn-secondary topologyView">Scripting</button>
+        <button [routerLink]="['/designer/source']" type="button"
+            class="btn btn-secondary topologyView">Scripting</button>
     </div>
 </div>
 <ng-sidebar-container class="sidebar-container">
     <!-- Controller SideBar -->
     <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'"
-                [mode]="'push'"
-                #sidebarLeft>
+        [mode]="'push'" #sidebarLeft>
         <div class="row">
-            
             <h1 class="col-12">Actions</h1>
             <div class="col-12 text-center p-0">
                 <div class="btn-group actionBtns" role="group">
-                    <button (click)="insertCustomActionIntoBoard()" type="button" class="btn">Insert Custom</button>
-                    <!-- <button type="button" class="btn">Import Action</button> -->
+                    <button (click)="insertCustomActionIntoBoard()" type="button" class="btn insert-custom">Insert
+                        Custom</button>
+                    <!-- <button type="button" class="btn import-action"><i class="icon-import-blue" aria-hidden="true"></i>Import Action</button> -->
                 </div>
             </div>
-      <!-- <div class="col-12 actionsList">
+            <!-- <div class="col-12 actionsList">
         <b>Select from other packages:</b>
         <div class="actions-scroll">
           <div class="custom-control custom-checkbox">
@@ -109,22 +153,22 @@
         </div>
       </div> -->
 
-        <h1 class="col-12">Functions</h1>
-        <b>Drag and drop function to Action’s box</b>
-        <div id="palette-paper" class="col-12 componentsList">
-        </div>
+            <h1 class="col-12">Functions</h1>
+            <b>Drag and drop function to Action’s box</b>
+            <div id="palette-paper" class="col-12 componentsList">
+            </div>
         </div>
     </ng-sidebar>
     <!-- Page content -->
-    
+
     <div ng-sidebar-content id="board-paper">
         <button class="rotate" (click)="_toggleSidebar1()">
-      <span>
-        Controller
-        <i class="fa fa-angle-double-left"></i>
-      </span>
+            <span>
+                Controller
+                <i class="fa fa-angle-double-left"></i>
+            </span>
         </button>
-        
+
         <!-- Canvas -->
         <div class="editBar text-center">
             <div class="btn-group mr-2" role="group" aria-label="First group">
@@ -180,8 +224,7 @@
     </div>
     <!-- Attribute SideBar -->
     <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
-                [position]="'right'"
-                #sidebarRight>
+        [position]="'right'" #sidebarRight>
         <div class="container-fluid0">
             <div class="row m-0">
                 <div class="col-2 pr-0">
@@ -203,8 +246,7 @@
                                 <div class="card-header row" id="headingOne">
                                     <h2 class="col-10 mb-0">
                                         <button class="btn btn-link" type="button" data-toggle="collapse"
-                                                data-target="#collapseOne" aria-expanded="true"
-                                                aria-controls="collapseOne">
+                                            data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                             Steps
                                         </button>
                                     </h2>
@@ -214,7 +256,7 @@
                                 </div>
 
                                 <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
-                                     data-parent="#accordionExample">
+                                    data-parent="#accordionExample">
                                     <div class="card-body">
                                         <div class="row">
                                             <div class="col-9">
@@ -234,7 +276,7 @@
                                         <div class="form-group">
                                             <label for="exampleFormControlTextarea1">Description</label>
                                             <textarea class="form-control" id="exampleFormControlTextarea1"
-                                                      rows="3"></textarea>
+                                                rows="3"></textarea>
                                         </div>
                                         <div class="form-group">
                                             <label for="exampleInputEmail1">Target</label>
@@ -248,8 +290,7 @@
                                 <div class="card-header row" id="headingTwo">
                                     <h2 class="col-10 mb-0">
                                         <button class="btn btn-link" type="button" data-toggle="collapse"
-                                                data-target="#collapseTwo" aria-expanded="true"
-                                                aria-controls="collapseTwo">
+                                            data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                                             Inputs
                                         </button>
                                     </h2>
@@ -258,7 +299,7 @@
                                     </div>
                                 </div>
                                 <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"
-                                     data-parent="#accordionExample">
+                                    data-parent="#accordionExample">
                                     <div class="card-body">
                                         <div class="row">
                                             <div class="col-9">
@@ -278,7 +319,7 @@
                                         <div class="form-group">
                                             <label for="exampleFormControlTextarea1">Description</label>
                                             <textarea class="form-control" id="exampleFormControlTextarea1"
-                                                      rows="3"></textarea>
+                                                rows="3"></textarea>
                                         </div>
                                         <div class="form-group">
                                             <label for="exampleInputEmail1">Target</label>
@@ -292,8 +333,8 @@
                                 <div class="card-header row" id="headingThree">
                                     <h2 class="col-10 mb-0">
                                         <button class="btn btn-link" type="button" data-toggle="collapse"
-                                                data-target="#collapseThree" aria-expanded="true"
-                                                aria-controls="collapseThree">
+                                            data-target="#collapseThree" aria-expanded="true"
+                                            aria-controls="collapseThree">
                                             Outputs
                                         </button>
                                     </h2>
@@ -302,7 +343,7 @@
                                     </div>
                                 </div>
                                 <div id="collapseThree" class="collapse show" aria-labelledby="headingThree"
-                                     data-parent="#accordionExample">
+                                    data-parent="#accordionExample">
                                     <div class="card-body">
                                         <div class="row">
                                             <div class="col-9">
@@ -322,7 +363,7 @@
                                         <div class="form-group">
                                             <label for="exampleFormControlTextarea1">Description</label>
                                             <textarea class="form-control" id="exampleFormControlTextarea1"
-                                                      rows="3"></textarea>
+                                                rows="3"></textarea>
                                         </div>
                                         <div class="form-group">
                                             <label for="exampleInputEmail1">Target</label>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts
index 42813075c..72019bfa0 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts
@@ -28,9 +28,9 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('board.FunctionEl
                 <g id="func-board-element-conponent" transform="translate(30.000000, 70.000000)">
                     <g id="execute" transform="translate(304.000000, 0.000000)">
                         <g id="Group" transform="translate(7.000000, 0.000000)">
-                            <rect id="func-board-element-rectangle" fill="#1B3E6F" x="0" y="0" width="230" height="130" rx="2"></rect>
-                            <g id="Group-4" transform="translate(36.000000, 25.000000)" fill="#FFFFFF">
-                                <g id="database0-copy" transform="translate(61.000000, 0.000000)" fill-rule="nonzero">
+                            <rect id="func-board-element-rectangle" fill="#1B3E6F" x="15" y="0" width="330" height="84" rx="2"></rect>
+                            <g id="Group-4" transform="translate(20.000000, 20.000000)" fill="#FFFFFF">
+                                <g id="database0-copy" transform="translate(15.000000, 0.000000)" fill-rule="nonzero">
                                     <path d="M35.544,6.00705882 C34.7265882,
                                     2.97882353 28.6425882,0 18,0 C7.35741176,
                                     0 1.27270588,2.97882353 0.456,6.00705882 C0.396705882,
@@ -302,11 +302,10 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('board.FunctionEl
                                 </g>
                                 <text id="func-board-element-text"
                                     font-family="HelveticaNeue-Bold, Helvetica Neue"
-                                    font-size="14"
+                                    font-size="13"
                                 font-weight="bold" line-spacing="18">
-                                    <tspan id="label" x="52.554" y="59">execute</tspan>
-                                    <tspan x="105.446" y="59" font-family="HelveticaNeue, Helvetica Neue" font-weight="normal"></tspan>
-                                    <tspan id="type" x="0.094" y="77"
+                                    <tspan id="label" x="64" y="18">execute</tspan>
+                                    <tspan id="type" x="64" y="40"
                                     font-family="HelveticaNeue, Helvetica Neue" font-size="12"
                                     font-weight="normal"></tspan>
                                 </text>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts
index 896ecaa88..48a680982 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts
@@ -34,7 +34,7 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('palette.Function
 }, {
     markup:
     `<defs>
-        <rect id="pallete-function-rect" x="0" y="0" width="280" height="40" rx="2"></rect>
+        <rect id="pallete-function-rect" x="0" y="0" width="290" height="40" rx="2"></rect>
         <filter x="-3.6%" y="-20.0%" width="107.1%" height="150.0%" filterUnits="objectBoundingBox" id="filter-2">
             <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
@@ -53,7 +53,7 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('palette.Function
                                 <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#pallete-function-rect"></use>
                                 <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#pallete-function-rect"></use>
                             </g>
-                            <g id="drag-menu" transform="translate(20.000000, 15.000000)" fill="#C3CDDB" fill-rule="nonzero">
+                            <g id="drag-menu" transform="translate(15.000000, 15.000000)" fill="#C3CDDB" fill-rule="nonzero">
                                 <g id="left">
                                     <circle id="1" cx="0.8" cy="0.8" r="1"></circle>
                                     <circle id="2" cx="0.8" cy="3.8" r="1"></circle>
@@ -67,7 +67,7 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('palette.Function
                                     <circle id="4" cx="0.8" cy="9.8" r="1"></circle>
                                 </g>
                             </g>
-                            <g id="txt" transform="translate(35.000000, 10.000000)" fill="#1B3E6F">
+                            <g id="txt" transform="translate(30.000000, 10.000000)" fill="#1B3E6F">
                                 <g id="browser" fill-rule="nonzero">
                                     <path d="M21.0000051,0.39034364 C20.9994786,
                                     0.29701568 20.9615913,0.207858845 20.8946802,
@@ -254,7 +254,7 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('palette.Function
                                     id="Shape"></path>
                                 </g>
                                 <text id="function-type" font-family="ArialMT, Arial" font-size="14" font-weight="normal" line-spacing="20">
-                                    <tspan id="label" x="32" y="13"></tspan>
+                                    <tspan id="label" x="30" y="13"></tspan>
                                 </text>
                             </g>
                         </g>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css
index 01ae599a4..75274ba33 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css
@@ -49,6 +49,9 @@ header{
   color: #C3CDDB;
   font-size: 10px;
 }
+.designer-breadcrumb .fa-angle-right::before{
+  color: #fff;
+}
 .sidebar-container{
   height: calc(100vh - 60px) !important;
 }
@@ -255,6 +258,7 @@ p.compType-4{
   color: #C3CDDB;
 }
 .controllerSidebar b{
+  margin-left: 12px;
   font-size: 12px;
   color: #C3CDDB;
 }
@@ -272,9 +276,9 @@ p.compType-4{
 }
 .actionBtns .btn:last-child{
   padding-left: 34px !important;
-  background: url(src/assets/img/icon-import-blue.svg) 12px center #fff no-repeat;
   border: solid 1px #D0DFF1;
   color: #1B3E6F;
+  outline: 0 !important;
 }
 .actionsList,
 .componentsList{
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
index bf86c46ea..ac02c50e2 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
@@ -1,20 +1,20 @@
 <div class="import-container-all">
     <div class="import-container">
         <div class="import-container-input">
-            <input placeholder="Enter file URL" type="input" class="ng-pristine ng-valid ng-touched">
-            <a class="enter-link" href="#"><i class="icon-enter"></i></a>
+            <input placeholder="Enter file URL then ENTER" type="input" class="ng-pristine ng-valid ng-touched">
+            <a class="enter-link" href="#"><i class="icon-enter-link"></i></a>
         </div>
         <span class="import-container-span">Or you can also <a href="#" data-toggle="modal"
-                (click)="resetTheUploadedFiles()" data-target="#importModal">Import File</a></span>
+                (click)="resetTheUploadedFiles()" data-target="#importModal"><b>Import File</b></a></span>
 
     </div>
 
     <div class="accordion">
-        <div class="card creat-card">
+        <!-- <div class="card creat-card">
             <div class="single-line">
                 <label class="label-name">File</label>
             </div>
-        </div>
+        </div> -->
         <div id="accordion" *ngFor="let file of definitionFiles | keyvalue; let mapIndex = index">
             <!-- <div class="card">
                 <div class="card-header" [id]="file.key">
@@ -23,7 +23,7 @@
                             aria-expanded="true" aria-controls="collapseOne">
                             <i class="icon-file-code"></i> Definitions/{{file.key}}
                         </button>
-                        <a class="accordion-delete" href="#"><i class="icon-delete"></i></a>
+                        <a class="accordion-delete" href="#"><i class="icon-delete-sm"></i></a>
                     </h5>
                 </div>
 
@@ -41,7 +41,33 @@
                             (click)="changeDivShow(mapIndex)" >
                             <i class="icon-file-code"></i> {{file.key}}
                         </button>
-                        <a class="accordion-delete" (click)="removeFile(mapIndex)"><i class="icon-delete"></i></a>
+                        
+                        <a data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i
+                            class="icon-delete-sm"></i></a>
+    
+                    <!-- <a class="accordion-delete" (click)="removeFile(mapIndex)"><i class="icon-delete-sm"></i></a> -->
+                    <!-- Delete Modal -->
+                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
+                        aria-labelledby="exampleModalLabel" aria-hidden="true">
+                        <div class="modal-dialog" role="document">
+                            <div class="modal-content">
+                                <div class="modal-header">
+                                    <h5 class="modal-title" id="exampleModalLabel">Delete File</h5>
+                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                        <span aria-hidden="true">&times;</span>
+                                    </button>
+                                </div>
+                                <div class="modal-body">
+                                    <p>Are you sure you want to delete file <span>artifact_types.json</span>?</p>
+                                </div>
+                                <div class="modal-footer">
+                                    <button type="button" class="btn btn-secondary"
+                                        data-dismiss="modal">Cancel</button>
+                                    <button type="button" class="btn btn-primary">Delete</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                     </h5>
                 </div>
                 <div [id]="'id-'+mapIndex" class="collapse" [attr.aria-labelledby]="'head-'+mapIndex"
@@ -54,7 +80,6 @@
                     </div>
                 </div>
             </div>
-
             <!--
                <div class="card">
                    <div class="card-header" id="headingThree">
@@ -78,7 +103,6 @@
                    </div>
                </div>
            -->
-
         </div>
     </div>
 
@@ -91,7 +115,8 @@
             <div class="modal-header">
                 <h5 class="modal-title" id="importModalLabel">Import File</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
+                    <!-- <span aria-hidden="true">&times;</span> -->
+                    <img src="assets/img/icon-close.svg" />
                 </button>
             </div>
             <div class="modal-body">
@@ -112,11 +137,13 @@
                         <div class="folder-upload-type">Allowed file type: json</div>
                     </ng-template>
                 </ngx-file-drop>
-                <div class="upload-table" *ngFor="let item of uploadedFiles; let i=index">
+                <div class="upload-table">
                     <table class="table">
                         <thead>
-                            <tr>
-                                <th>Name : {{ item.name }}</th>
+                            <tr *ngFor="let item of uploadedFiles; let i=index">
+                                <th width="40"><img src="assets/img/icon-file-code.svg" /></th>
+                                <th>{{ item.name }}</th>
+                                <th width="40" class="text-right"><img src="assets/img/icon-remove-file.svg" /></th>
                             </tr>
                         </thead>
                     </table>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
index 3b9d38c1a..35c0918de 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
@@ -19,7 +19,6 @@ export class ImportsTabComponent implements OnInit {
 
     constructor(private packageCreationStore: PackageCreationStore, private packageCreationUtils: PackageCreationUtils) {
     }
-
     ngOnInit(): void {
         this.packageCreationStore.state$.subscribe(cbaPackage => {
             if (cbaPackage.definitions && cbaPackage.definitions.imports && cbaPackage.definitions.imports.size > 0) {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html
index 89724be79..de2b3831d 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html
@@ -1,20 +1,23 @@
 <div class="card creat-card">
-    <div class="single-line">
+    <div class="single-line-model">
         <label class="label-name">Mode</label>
-        <label name="trst" *ngFor="let mode of modes; let i = index">
-            <input class="form-check-input" [(ngModel)]="modeType" type="radio" name="radioMode" id="radioMode"
-                [value]="mode.name">
+        <div class="label-input">
+            <label name="trst" *ngFor="let mode of modes; let i = index" class="pl-0">
+                <input class="form-check-input" [(ngModel)]="modeType" type="radio" name="radioMode" id="radioMode"
+                    [value]="mode.name">
 
-            <span>
-                <i [className]="mode.style" aria-hidden="true" [id]="mode.name"></i>
-                {{mode.name}}
-            </span>
-        </label>
+                <span>
+                    <i [className]="mode.style" aria-hidden="true" [id]="mode.name"></i>
+                    {{mode.name}}
+                </span>
+            </label>
+        </div>
     </div>
     <div class="single-line">
         <label class="label-name">Dictionary Library Instance</label>
         <div class="label-input">
             <select class="form-control" id="exampleFormControlSelect1">
+                <option>Select Library Instance</option>
                 <option>Library Instance 1</option>
                 <option>Library Instance 2</option>
                 <option>Library Instance 3</option>
@@ -30,7 +33,7 @@
         <label class="label-name">Name <span>*</span></label>
         <div class="label-input">
             <input type="input" [readOnly]="!packageNameAndVersionEnables" [(ngModel)]="metaDataTab.name"
-                placeholder="Topology name.vLB.CDS">
+                placeholder="Package name">
         </div>
         <!--<div class="model-note-container error-message">
             Package name already exists with this version. Please enter a different name or enter different version
@@ -54,31 +57,32 @@
     </div>
 
     <div class="single-line-model">
-        <label class="label-name">tags</label>
+        <label class="label-name">Tags</label>
         <div class="label-input">
             <input type="input" (keyup.enter)="addTag($event)" [(ngModel)]="metaDataTab.tags"
                 placeholder="Ex., vDNS-CDS">
-
         </div>
         <div class="model-note-container tag-notes">Seprate tags with comma or space</div>
         <div class="model-note-container tages-container">
-            <span *ngFor="let tag of tags" class="single-tage">{{tag}} <i (click)="removeTag(tag)"
-                    class="fa fa-times-circle"></i></span>
+            <span *ngFor="let tag of tags" class="single-tage">{{tag}}
+                <i (click)="removeTag(tag)" class="fa fa-times-circle"></i>
+            </span>
         </div>
     </div>
 </div>
 <div id="container">
     <div id="target">
         <div class="card creat-card">
-            <div class="single-line">
-                <h5 class="label-name">
-                    Custom key
+            <div class="single-line customKeyTitle">
+                <h5 class="label-name w-100 ">
+                    Custom key 
                 </h5>
+                <span>To add New Custom Key, fill the first key then <b>Press ENTER</b></span>
 
             </div>
             <div *ngFor="let map of customKeysMap | keyvalue; let i=index" class="single-custom-key">
                 <div class="single-line-custom-key">
-                    <label class="label-name"><span>{{i + 1}}-</span> Name</label>
+                    <label class="label-name"><span>{{i + 1}}.</span> Name</label>
                     <div class="label-input">
                         <input value="{{map.key}}" name="key" type="input" placeholder="Enter name">
                     </div>
@@ -91,7 +95,7 @@
                 </div>
                 <div class="single-line-custom-key-delete">
                     <button (click)="removeKey($event,map.key)" class="custom-key-delete"><i aria-hidden="true"
-                            class="icon-delete"></i></button>
+                            class="icon-delete-sm"></i></button>
                 </div>
             </div>
 
@@ -111,7 +115,7 @@
                     </div>
                 </div>
                 <!-- <div class="single-line-custom-key-delete"><button (click)="removeKey($event)"
-                        class="custom-key-delete"><i aria-hidden="true" class="icon-delete"></i></button></div> -->
+                        class="custom-key-delete"><i aria-hidden="true" class="icon-delete-sm"></i></button></div> -->
             </div>
 
         </div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts
index 3a9b7b880..6018ad535 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts
@@ -16,9 +16,9 @@ export class MetadataTabComponent implements OnInit {
     tags = new Set<string>();
     customKeysMap = new Map();
     modes: any[] = [
-        { name: 'Designer Mode', style: 'mode-icon icon-designer-mode' }];
-    /*  {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'},
-      {name: 'Generic Script Mode', style: 'mode-icon icon-generic-script-mode'}];*/
+        { name: 'Designer Mode', style: 'mode-icon icon-topologyView-active' }];
+    /*  {name: 'Scripting Mode', style: 'mode-icon icon-topologySource'},
+      {name: 'Generic Script Mode', style: 'mode-icon icon-topologySource'}];*/
     modeType = this.modes[0].name;
     private metaDataTab: MetaDataTabModel = new MetaDataTabModel();
     private errorMessage: string;
@@ -101,7 +101,7 @@ export class MetadataTabComponent implements OnInit {
         if (this.metaDataTab.name && this.metaDataTab.version) {
             this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => {
                 if (element) {
-                    this.errorMessage = 'the package with name and version is exists';
+                    this.errorMessage = 'Package name already exists with this version. Use different name or different version number.';
                 } else {
                     this.errorMessage = ' ';
                 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
index 67beca2a1..3bb8b56a1 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
@@ -4,37 +4,49 @@
     <div class="container-fluid main-container">
         <header class="page-title">
             <div class="row">
-                <h2 class="col m-0">
+                <h2 class="col m-0 pb-0">
                     <ul class="breadcrumb-header">
                         <li><a routerLink="/packages">CBA Packages</a></li>
+                        <i class="fa fa-angle-right ml-2 mr-2"></i>
                         <li>Package Name</li>
                     </ul>
                 </h2>
-                <div class="col d-flex justify-content-end header-button-save">
-                    <button class="float btn btn-sm btn-outline-secondary" (click)="goBackToDashBorad()">Discard
-                        Changes</button>
-                    <button class="float btn btn-sm btn-primary" (click)="saveBluePrint()">Save</button>
+                <div class="col">
+
                 </div>
             </div>
         </header>
 
-
         <div class="container-fluid body-container">
-
             <div class="container">
                 <div class="creat-action-container">
+                    <a href="#" class="action-button" (click)="saveBluePrint()">
+                        <i class="icon-save-sm" aria-hidden="true"></i>
+                        <span>Save</span>
+                    </a>
+                    <a href="#" class="action-button" (click)="goBackToDashBorad()">
+                        <i class="icon-discard-sm" aria-hidden="true"></i>
+                        <span>Discard Changes</span>
+                    </a>
+
+                    <hr>
                     <a href="#" class="action-button">
-                        <i class="icon-clone" aria-hidden="true"></i>
+                        <i class="icon-clone-sm" aria-hidden="true"></i>
                         <span>Clone</span>
                     </a>
 
                     <a href="#" class="action-button">
-                        <i class="icon-archive" aria-hidden="true"></i>
+                        <i class="icon-archive-sm" aria-hidden="true"></i>
                         <span>Archive</span>
                     </a>
 
+                    <a href="#" class="action-button">
+                        <i class="icon-download" aria-hidden="true"></i>
+                        <span>Download</span>
+                    </a>
+
                     <a href="#" class="action-button delete">
-                        <i class="icon-delete" aria-hidden="true"></i>
+                        <i class="icon-delete-sm" aria-hidden="true"></i>
                         <span>Delete</span>
                     </a>
                 </div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
index 5b4e7c840..79c444061 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
@@ -1,20 +1,20 @@
 <div class="import-container-all">
     <div class="import-container">
         <div class="import-container-input">
-            <input class="ng-pristine ng-valid ng-touched" placeholder="Enter file URL" type="input">
-            <a class="enter-link" href="#"><i class="icon-enter"></i></a>
+            <input class="ng-pristine ng-valid ng-touched" placeholder="Enter file URL then ENTER" type="input">
+            <a class="enter-link" href="#"><i class="icon-enter-link"></i></a>
         </div>
         <span class="import-container-span">Or you can also <a data-target="#scriptsModal" data-toggle="modal"
-                (click)="resetTheUploadedFiles()" href="#">Import File</a></span>
+                (click)="resetTheUploadedFiles()" href="#"><b>Import File</b></a></span>
 
     </div>
 
     <div class="accordion">
-        <div class="card creat-card">
+        <!-- <div class="card creat-card">
             <div class="single-line">
                 <label class="label-name">File</label>
             </div>
-        </div>
+        </div> -->
         <div *ngFor="let file of scriptsFiles | keyvalue; let mapIndex = index" id="accordion-script">
 
             <div class="card">
@@ -24,8 +24,34 @@
                             aria-expanded="false" class="btn btn-link collapsed" data-toggle="collapse">
                             <i class="icon-file-code"></i> {{file.key}}
                         </button>
-                        <a (click)="removeFile(file.key,mapIndex)" class="accordion-delete"><i
-                                class="icon-delete"></i></a>
+                        <a data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i
+                                class="icon-delete-sm"></i></a>
+                        <!-- <a (click)="removeFile(file.key,mapIndex)" data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i
+                                    class="icon-delete-sm"></i></a> -->
+                        <!-- Delete Modal -->
+                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
+                            aria-labelledby="exampleModalLabel" aria-hidden="true">
+                            <div class="modal-dialog" role="document">
+                                <div class="modal-content">
+                                    <div class="modal-header">
+                                        <h5 class="modal-title" id="exampleModalLabel">Delete Script</h5>
+                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                            <span aria-hidden="true">&times;</span>
+                                        </button>
+                                    </div>
+                                    <div class="modal-body">
+                                        <p>Are you sure you want to delete script file <span>ConfigDeploy.py</span>?</p>
+                                    </div>
+                                    <div class="modal-footer">
+                                        <button type="button" class="btn btn-secondary"
+                                            data-dismiss="modal">Cancel</button>
+                                        <button type="button" class="btn btn-primary">Delete</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+
                     </h5>
                 </div>
                 <div [attr.aria-labelledby]="'head-script-'+mapIndex" [id]="'id-script-'+mapIndex" class="collapse"
@@ -51,7 +77,7 @@
             <div class="modal-header">
                 <h5 class="modal-title" id="scriptsModalLabel">Import File</h5>
                 <button aria-label="Close" class="close" data-dismiss="modal" type="button">
-                    <span aria-hidden="true">&times;</span>
+                    <img src="assets/img/icon-close.svg" />
                 </button>
             </div>
             <div class="modal-body">
@@ -72,11 +98,13 @@
                         <div class="folder-upload-type">Allowed file type: Kotlin(kt), Python(py)</div>
                     </ng-template>
                 </ngx-file-drop>
-                <div *ngFor="let item of uploadedFiles; let i=index" class="upload-table">
+                <div class="upload-table">
                     <table class="table">
                         <thead>
-                            <tr>
-                                <th>Name : {{ item.name }}</th>
+                            <tr *ngFor="let item of uploadedFiles; let i=index">
+                                <th width="40"><img src="assets/img/icon-file-code.svg" /></th>
+                                <th>{{ item.name }}</th>
+                                <th width="40" class="text-right"><img src="assets/img/icon-remove-file.svg" /></th>
                             </tr>
                         </thead>
                     </table>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
index 86e713b9e..a33087461 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
@@ -6,7 +6,7 @@
         </label>
 
         <div class="label-input">
-            <input type="input" [(ngModel)]="fileName" placeholder="Topology name.vLB.CDS">
+            <input type="input" [(ngModel)]="fileName" placeholder="Template name">
         </div>
     </div>
 </div>
@@ -56,8 +56,8 @@
                     </div>
                     <div class="create-template-import">Use the editor to add parameters or you can also
                         <a href="#" data-toggle="modal" (click)="allowedExt=[getFileExtension()]"
-                            data-target="#templateModal">Import
-                            File</a></div>
+                            data-target="#templateModal"><b>Import
+                                File</b></a></div>
                     <div class="editor-container">
                         <app-source-editor (textChange)="textChanges($event,templateInfo.fileName)"
                             [(text)]="templateFileContent"></app-source-editor>
@@ -76,16 +76,16 @@
             </div>
             <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                 <div class="card-body">
-                    <h6 class="text-center">Select a source to load config parameters</h6>
+                    <p class="text-center"><b>Select a source to load config parameters</b></p>
                     <div class="text-center">
                         <a href="#" (click)="getMappingTableFromTemplate($event)" class="mapping-source-load">
-                            <i class="icon-current-template"></i>
+                            <i class="icon-use-attributes"></i>
                             <br />
                             <span>Use Current Template Instance</span>
                         </a>
                         <a href="#" (click)="allowedExt=['.csv']" data-toggle="modal" data-target="#templateModal"
                             class="mapping-source-load">
-                            <i class="icon-Upload-attribute"></i>
+                            <i class="icon-upload-attributes"></i>
                             <br />
                             <div>Upload attribute list</div>
                             <div class="source-load-note">(Should be comma delimited file)</div>
@@ -119,8 +119,8 @@
                         <tbody>
                             <tr *ngFor="let dict of resourceDictionaryRes">
                                 <td>
-                                    <i *ngIf="dict.definition?.property?.required" class="fa fa-check-square mx-2"></i>
-                                    <i *ngIf="!dict.definition?.property?.required" class="fa fa-square mx-2"></i>
+                                    <img *ngIf="dict.definition?.property?.required" src="/assets/img/icon-required-no.svg">
+                                    <img *ngIf="!dict.definition?.property?.required" src="/assets/img/icon-required-yes.svg">
                                 </td>
                                 <td>{{ dict.name }}</td>
                                 <td>{{ dict.name }}</td>
@@ -195,7 +195,7 @@
         </div>
         <div class="template-mapping-action">
             <button class="btn btn-sm btn-outline-secondary">Cancel</button>
-            <button (click)="saveToStore()" class="btn btn-sm btn-primary">Finish</button>
+            <button (click)="saveToStore()" class="btn btn-sm btn-primary">Submit</button>
         </div>
     </div>
 </div>
@@ -208,7 +208,7 @@
             <div class="modal-header">
                 <h5 class="modal-title" id="templateModalLabel">Import File</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
+                    <img src="assets/img/icon-close.svg" />
                 </button>
             </div>
             <div class="modal-body">
@@ -231,11 +231,13 @@
                         </div>
                     </ng-template>
                 </ngx-file-drop>
-                <div class="upload-table" *ngFor="let item of uploadedFiles; let i=index">
+                <div class="upload-table">
                     <table class="table">
                         <thead>
-                            <tr>
-                                <th>Name : {{ item.name }}</th>
+                            <tr *ngFor="let item of uploadedFiles; let i=index">
+                                <th width="40"><img src="assets/img/icon-file-code.svg" /></th>
+                                <th>{{ item.name }}</th>
+                                <th width="40" class="text-right"><img src="assets/img/icon-remove-file.svg" /></th>
                             </tr>
                         </thead>
                     </table>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
index ab97159b6..f5e683f28 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
@@ -20,7 +20,7 @@
                 <div class="card-body max-height-list">
                     <div class="row">
                         <!-- <div class="col-4" style="color:white" *ngFor="let file of templates.files | keyvalue; let mapIndex = index">-->
-                        <div class="col-4" style="color:white" *ngFor="let file of  getKeys(templateAndMappingMap)">
+                        <div class="col-4" *ngFor="let file of  getKeys(templateAndMappingMap)">
                             <a (click)="setSourceCodeEditor(file)" class="template-mapping-list active">{{file}}
                                 <span *ngIf="getValue(file).isMapping">Mapping</span>
                                 <span *ngIf="getValue(file).isTemplate">Template</span>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html
index e5ebc315a..07c192d2c 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html
@@ -1,6 +1,6 @@
 <div class="dropdown packagesFilter w-100">
     <input class="dropdown-toggle" type="text">
-    <div class="dropdown-text">{{checkBoxTages.substr(0,checkBoxTages.length-1)}}</div>
+    <div class="dropdown-text">Filter By Tags {{checkBoxTages.substr(0,checkBoxTages.length-1)}}</div>
     <ul class="dropdown-content w-100">
         <li>
             <div class="form-group">
@@ -13,6 +13,6 @@
                 <label class="custom-control-label" for={{tag}}>{{tag}}</label>
             </div>
         </li>
+        <li class="reset-filter"><a href="">Reset filter</a></li>
     </ul>
 </div>
-
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
index f33615dfe..ed67dff40 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
@@ -1,35 +1,33 @@
 <div class="row packages-card">
-    <div class="col-lg-3 col-md-6">
+    <div class="col-lg-3 col-md-6 d-flex">
         <!--Add Package Card-->
         <div class="card addPaackage-card">
             <div class="card-body text-center">
-                <img src="/assets/img/icon-addPackage.svg">
+                <img src="/assets/img/icon-addPackage.svg" width="40%">
             </div>
             <div class="card-footer row">
-                <div class="col">
+                <div class="col text-center">
                     <a routerLink="/packages/createPackage" role="button" aria-pressed="true"
-                        class="btn-create-package float">Create
+                        class="btn-create-package float"><i class="icon-create-white" aria-hidden="true"></i>Create Package
                     </a>
-                </div>
-                <div class="col">
-                    <a href="#" role="button" aria-pressed="true" class="btn-import-package float">Import
+                    <br/>
+                    <a href="#" role="button" aria-pressed="true" class="btn-import-package float mb-3"><i class="icon-import-blue" aria-hidden="true"></i>Import Package
                     </a>
                 </div>
             </div>
         </div>
     </div>
-    <div class="col-lg-3 col-md-6" *ngFor="let bluePrint of viewedPackages">
-
+    <div class="col-lg-3 col-md-6 d-flex" *ngFor="let bluePrint of viewedPackages">
         <!--Card 1-->
-        <div>
             <div class="card">
                 <div class="card-body">
                     <div class="row">
                         <div class="col-9 pr-0">
                             <a class="card-title" [routerLink]="['/packages/package', bluePrint.id]"
                                 (click)="testDispatch(bluePrint)">
-                                <img class="icon-deployed" src="/assets/img/icon-deploy.svg">
-                                {{bluePrint.artifactName}}
+                                <!-- <img class="icon-deployed" src="/assets/img/icon-deploy.svg"> -->
+                                {{bluePrint.artifactName}}<span>.vLB.CDS</span>
+                                <span class="package-version">Version 1.0.2</span>
                             </a>
 
                         </div>
@@ -38,17 +36,33 @@
                             <div class="dropdown">
                                 <input class="dropdown-toggle" type="text">
                                 <div class="dropdown-text">
-                                    <img src="/assets/img/icon-menuDots.svg" title="Actions">
+                                    <!-- <img src="/assets/img/icon-menuDots.svg" title="Actions"> -->
+                                    <i class="icon-menuDots" aria-hidden="true"></i>
                                 </div>
                                 <ul class="dropdown-content">
                                     <li class="action-clone">
-                                        <a href="#">Clone</a>
+                                        <a href="#">
+                                            <i class="icon-clone-sm" aria-hidden="true"></i>
+                                            Clone
+                                        </a>
+                                    </li>
+                                    <li class="action-archive">
+                                        <a href="#">
+                                            <i class="icon-archive-sm" aria-hidden="true"></i>
+                                            Archive
+                                        </a>
                                     </li>
                                     <li class="action-archive">
-                                        <a href="#">Archive</a>
+                                        <a href="#">
+                                            <i class="icon-download" aria-hidden="true"></i>
+                                            Download
+                                        </a>
                                     </li>
                                     <li class="action-delete">
-                                        <a href="#">Delete</a>
+                                        <a href="#">
+                                            <i class="icon-delete-sm" aria-hidden="true"></i>
+                                            Delete
+                                        </a>
                                     </li>
                                 </ul>
                             </div>
@@ -57,9 +71,12 @@
                     </div>
                     <div class="row">
                         <div class="col">
-                            <p class="mb-0">Last modified {{ bluePrint.createdDate | date:'short' }}
+                            <p class="mb-0 mt-1">Last modified {{ bluePrint.createdDate | date:'short' }}
                             </p>
-                            <p>By {{bluePrint.updatedBy}}</p>
+                            <p class="mb-2">By {{bluePrint.updatedBy}}</p>
+                            <p class="package-desc tooltip-bottom" data-tooltip="DESCRIPTION:
+                            The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from de Finibus Bonorum et Malorum by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.">Description text quisquam est dolorem, velit...</p>
+                            
                             <ul class="package-contributers">
                                 <li>
                                     <button type="button" class="border-fade" data-toggle="tooltip"
@@ -88,19 +105,16 @@
                     <div class="card-footer">
                         <div class="row">
                             <div class="col">
-                                <button type="button" class="btn btn-card-topology">Topology View
+                                <button type="button" class="btn btn-card-topology"><i class="icon-btn-card-topology" aria-hidden="true"></i>Designer Mode
                                 </button>
                             </div>
                             <div class="col">
-                                <button type="button" (click)="view(bluePrint.id)"
-                                    class="btn btn-card-config">Configuration</button>
+                                <button type="button" (click)="view(bluePrint.id)" class="btn btn-card-config"><i class="icon-btn-card-config" aria-hidden="true"></i>Configuration</button>
                             </div>
                         </div>
                     </div>
                 </div>
 
             </div>
-
-        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html
index b5245f757..86db08110 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html
@@ -2,6 +2,5 @@
 <div class="col package-paginator pr-0">
     <ngb-pagination [collectionSize]="totalCount" [(page)]="pageNumber" [pageSize]="pageSize" class="float-right"
         (pageChange)="getPageFromService($event)"
-
     ></ngb-pagination>
 </div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.html
index 9eb45f1be..ff937fa72 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.html
@@ -13,7 +13,6 @@
                                 <li  *ngFor="let sortType of sortTypes">
                                     <a (click)="sortPackages($event)" name={{sortType}}>{{sortType}}</a>
                                 </li>
-                                
                             </ul>
                         </div>
                     </div>
@@ -23,10 +22,9 @@
                 <app-packages-list></app-packages-list>
 
             </div>
-            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
-            <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
-            <div class="tab-pane fade" id="nav-contact1" role="tabpanel" aria-labelledby="nav-contact1-tab">...
-            </div>
+            <div class="tab-pane fade text-center" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">No Deployed Package is available</div>
+            <div class="tab-pane fade text-center" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
+            <div class="tab-pane fade text-center" id="nav-contact1" role="tabpanel" aria-labelledby="nav-contact1-tab">No Archived Package is available</div>
         </div>
     </div>
 </div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.ts
index b63f8879f..0c16292c0 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.ts
@@ -29,4 +29,5 @@ export class SortPackagesComponent implements OnInit {
 enum SortByToServerValue {
     Recent = 'DATE',
     Name = 'NAME',
+    Version = 'VERSION',
 }