diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
index eb9e0c167..9cbe4c55c 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
@@ -105,23 +105,27 @@ export default {
   position: absolute;
   max-height: calc(var(--space-giga) * 1.5);
   min-height: var(--space-jumbo);
-  width: var(--space-giga);
+  width: calc(var(--space-giga) + var(--space-large));
   border-radius: var(--border-radius-normal);
   background-color: var(--white);
   box-shadow: var(--shadow-dropdown-pane);
-  bottom: var(--space-three);
-  right: var(--space-jumbo);
+  bottom: calc(var(--space-three) + var(--space-half));
+  right: calc(var(--space-three) + var(--space-half));
   overflow-y: auto;
   padding: var(--space-slab);
 
   .macro-title {
     margin-bottom: var(--space-slab);
+    color: var(--s-900);
+    font-weight: var(--font-weight-bold);
   }
 
   .macro-block {
     position: relative;
     padding-left: var(--space-slab);
-    padding-bottom: var(--space-slab);
+    &:not(:last-child) {
+      padding-bottom: var(--space-slab);
+    }
 
     .macro-block-border {
       top: 0.625rem;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
index 8fefd25d9..d0d41364c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
@@ -386,6 +386,7 @@ export default {
   height: 100%;
 }
 .macros-canvas {
+  // dotted matrix bag for canvas
   background-image: radial-gradient(#e0e0e0bd 1.2px, transparent 0);
   background-size: var(--space-normal) var(--space-normal);
   height: 100%;
@@ -406,7 +407,7 @@ export default {
 
 .macros-feed-container {
   list-style-type: none;
-  // Make sure the macros ui is not too wide in large screens
+  // max-width Makes sure the macros ui is not too wide in large screens
   max-width: 800px;
 
   .macros-feed-item:not(:last-child) {
@@ -421,6 +422,7 @@ export default {
     height: var(--space-three);
     width: 3px;
     margin-left: var(--space-medium);
+    // trail line for the macros - feed
     background-image: url("data:image/svg+xml,%3Csvg width='3' height='31' viewBox='0 0 3 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1.50098' y1='0.579529' x2='1.50098' y2='30.5795' stroke='%2393afc8' stroke-width='2' stroke-dasharray='5 5'/%3E%3C/svg%3E%0A");
   }
   .macros-feed-draggable {