diff --git a/resources/js/processes/designer/Asset.vue b/resources/js/processes/designer/Asset.vue
index e6ba0c2bce..f38b81fce9 100644
--- a/resources/js/processes/designer/Asset.vue
+++ b/resources/js/processes/designer/Asset.vue
@@ -5,7 +5,7 @@
         :class="icon"
         :style="{color: color}"
       />
-      <p>{{ $t(asset_name) }}</p>
+      <p class="m-0">{{ $t(asset_name) }}</p>
     </span>
   </b-card-text>
 </template>
@@ -32,9 +32,13 @@ export default {
   gap: 4px;
   flex: 1 0 0;
   align-self: stretch;
-  margin-bottom: 10px;
+  margin: 10px 0px;
 }
 i {
   font-size: 32px;
 }
+p {
+  font-size: 16px;
+  font-weight: 400;
+}
 </style>
diff --git a/resources/js/processes/designer/Assets.vue b/resources/js/processes/designer/Assets.vue
index 6c81fea8ac..4032ce12df 100644
--- a/resources/js/processes/designer/Assets.vue
+++ b/resources/js/processes/designer/Assets.vue
@@ -9,7 +9,7 @@
       </b-navbar-brand>
     </b-navbar>
 
-    <div class="mt-3">
+    <div class="mx-2">
       <b-card-group deck>
         <b-card
           v-for="(asset, index) in assetsCore"
@@ -38,7 +38,7 @@
         </b-card>
       </b-card-group>
     </div>
-    <div class="mt-3">
+    <div class="mx-2">
       <b-card-group deck>
         <b-card
           v-for="(asset, index) in assetsPackage"
@@ -166,14 +166,22 @@ export default {
   background-color: #f9f9f9;
   padding: 0rem 1rem 1rem 1rem;
 }
-.b-card {
-  margin: 5px;
+.card {
+  margin: 8px;
   border: none;
   padding: 0;
+  border-radius: 8px;
+  box-shadow: 0px 0px 11px 0px rgba(98, 124, 144, 0.20);
 }
 .b-card-group {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  padding: 10px;
+}
+.card-body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 </style>