diff --git a/src/presentation/assets/styles/_colors.scss b/src/presentation/assets/styles/_colors.scss
index 82b5c521..b5434895 100644
--- a/src/presentation/assets/styles/_colors.scss
+++ b/src/presentation/assets/styles/_colors.scss
@@ -1,7 +1,10 @@
 /*
     Colors used throughout the application
-    Inspired by material color system: https://material.io/design/color/the-color-system.html, https://material.io/develop/web/theming/color
-    Colors are named using Vue Design System: https://github.com/viljamis/vue-design-system/wiki/Naming-of-Things#naming-colors
+    Inspired by the material color system (https://material.io/design/color/the-color-system.html, https://material.io/develop/web/theming/color).
+    Colors are named according to the Vue Design System guidelines (https://github.com/viljamis/vue-design-system/wiki/Naming-of-Things#naming-colors):
+        - Default: The default base color is `color-{name}`.
+        - Darker than default: Shades are named as `color-{name}-dark`, `color-{name}-darker`, or `color-{name}-darkest`.
+        - Lighter than default: Tints are named as `color-{name}-light`, `color-{name}-lighter`, or `color-{name}-lightest`.
 */
 
 // --- Primary | The color displayed most frequently across screens and components
@@ -26,3 +29,12 @@ $color-on-surface           : #4d5156;
 
 // Background | Appears behind scrollable content.
 $color-background           : #e6ecf4;
+
+
+/*
+    Application-specific colors:
+    These are tailored to the specific needs of the application and derived from the above theme colors.
+    Use these colors to ensure consistent styling across components. When adding new colors, reference existing theme colors.
+    This approach maintains a cohesive look and feel and simplifies theme adjustments.
+*/
+$color-scripts-bg: $color-primary-darker;
diff --git a/src/presentation/assets/styles/_mixins.scss b/src/presentation/assets/styles/_mixins.scss
index d7466e13..7af67c66 100644
--- a/src/presentation/assets/styles/_mixins.scss
+++ b/src/presentation/assets/styles/_mixins.scss
@@ -64,4 +64,4 @@
   margin: 0;
   padding: 0;
   list-style: none;
-}
\ No newline at end of file
+}
diff --git a/src/presentation/components/Scripts/View/Cards/CardListItem.vue b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
index 3f12a132..906fc8b1 100644
--- a/src/presentation/components/Scripts/View/Cards/CardListItem.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
@@ -37,7 +37,10 @@
         />
       </div>
       <div class="card__expander__content">
-        <ScriptsTree :category-id="categoryId" />
+        <ScriptsTree
+          :category-id="categoryId"
+          :has-top-padding="false"
+        />
       </div>
     </div>
   </div>
@@ -159,27 +162,26 @@ $card-horizontal-gap    : $card-gap;
     &:after {
       transition: all 0.3s ease-in-out;
     }
-    &__title {
+    .card__inner__title {
       display: flex;
       flex-direction: column;
       flex: 1;
       justify-content: center;
     }
-    &__selection_indicator {
+    .card__inner__selection_indicator {
       height: $card-inner-padding;
       margin-right: -$card-inner-padding;
       padding-right: 10px;
       display: flex;
       justify-content: flex-end;
     }
-
-    &__expand-icon {
+    .card__inner__expand-icon {
       width: 100%;
       margin-top: .25em;
       vertical-align: middle;
     }
   }
-  &__expander {
+  .card__expander {
     transition: all 0.2s ease-in-out;
     position: relative;
     background-color: $color-primary-darker;
@@ -189,17 +191,14 @@ $card-horizontal-gap    : $card-gap;
     align-items: center;
     flex-direction: column;
 
-    &__content {
+    .card__expander__content {
       display: flex;
       justify-content: center;
       word-break: break-word;
-      margin-bottom: 1em;
-      margin-left: 0.5em;
-      margin-right: 0.5em;
       max-width: 100%; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
     }
 
-    &__close-button {
+    .card__expander__close-button {
       font-size: 1.5em;
       align-self: flex-end;
       margin-right: 0.25em;
diff --git a/src/presentation/components/Scripts/View/TheScriptsView.vue b/src/presentation/components/Scripts/View/TheScriptsView.vue
index f7742b92..4a24ef1f 100644
--- a/src/presentation/components/Scripts/View/TheScriptsView.vue
+++ b/src/presentation/components/Scripts/View/TheScriptsView.vue
@@ -5,9 +5,7 @@
         <CardList />
       </template>
       <template v-else-if="currentView === ViewType.Tree">
-        <div class="tree">
-          <ScriptsTree />
-        </div>
+        <ScriptsTree />
       </template>
     </template>
     <template v-else>
@@ -30,8 +28,8 @@
           </div>
         </div>
       </div>
-      <div v-if="searchHasMatches" class="tree tree--searching">
-        <ScriptsTree />
+      <div v-if="searchHasMatches">
+        <ScriptsTree :has-top-padding="false" />
       </div>
     </template>
   </div>
@@ -139,29 +137,20 @@ $margin-inner: 4px;
     overflow: auto;
     max-height: 70vh;
   }
-  .tree {
-    padding-left: 3%;
-    padding-top: 15px;
-    padding-bottom: 15px;
-    &--searching {
-      background-color: $color-primary-darker;
-      padding-top: 0px;
-    }
-  }
 }
 
 .search {
   display: flex;
   flex-direction: column;
-  background-color: $color-primary-darker;
-  &__query {
+  background-color: $color-scripts-bg;
+  .search__query {
     display: flex;
     justify-content: center;
     flex-direction: row;
     align-items: center;
     margin-top: 1em;
     color: $color-primary;
-    &__close-button {
+    .search__query__close-button {
       @include clickable;
       font-size: 1.25em;
       margin-left: 0.25rem;
@@ -170,7 +159,7 @@ $margin-inner: 4px;
       }
     }
   }
-  &-no-matches {
+  .search-no-matches {
     display:flex;
     flex-direction: column;
     word-break:break-word;
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue
index 175605ad..2cc2e942 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue
@@ -167,7 +167,7 @@ $base-spacing: $text-size;
     @include no-margin('blockquote');
     @include no-margin('pre');
 
-    /* Add spacing between elements using `margin-bottom` only (bottom-out instead of top-down strategy). */
+    /* Add spacing between elements using `margin-bottom` only (bottom-up instead of top-down strategy). */
     $small-vertical-spacing: math.div($base-vertical-spacing, 2);
     @include bottom-margin('p', $base-vertical-spacing);
     @include bottom-margin('h1, h2, h3, h4, h5, h6', $base-vertical-spacing);
diff --git a/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue b/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue
index 7611b508..b7f85f2c 100644
--- a/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue
+++ b/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue
@@ -1,5 +1,10 @@
 <template>
-  <div class="scripts-tree-container">
+  <div
+    class="scripts-tree-container"
+    :class="{
+      'top-padding': hasTopPadding,
+    }"
+  >
     <template v-if="initialNodes.length">
       <TreeView
         :initial-nodes="initialNodes"
@@ -39,6 +44,10 @@ export default defineComponent({
       type: [Number],
       default: undefined,
     },
+    hasTopPadding: {
+      type: Boolean,
+      default: true,
+    },
   },
   setup(props) {
     const useUserCollectionStateHook = injectKey((keys) => keys.useUserSelectionState);
@@ -62,8 +71,21 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
+$padding: 20px;
+
 .scripts-tree-container {
   display: flex; // We could provide `block`, but `flex` is more versatile.
-  overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
+
+  /* Set background color in consistent way so it has similar look when searching, on tree view, in cards etc. */
+  background: $color-scripts-bg;
+
+  padding-bottom: $padding;
+  padding-left: $padding;
+  padding-right: $padding;
+  &.top-padding {
+    padding-top: $padding;
+  }
 }
 </style>
diff --git a/src/presentation/components/Scripts/View/Tree/TreeView/TreeView.vue b/src/presentation/components/Scripts/View/Tree/TreeView/TreeView.vue
index 3ca105b4..daf61739 100644
--- a/src/presentation/components/Scripts/View/Tree/TreeView/TreeView.vue
+++ b/src/presentation/components/Scripts/View/Tree/TreeView/TreeView.vue
@@ -98,5 +98,6 @@ export default defineComponent({
 .tree {
   background: $color-tree-bg;
   overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
+  flex: 1; // Expands the node horizontally, allowing its content to utilize full width for child item alignment, such as icons and text.
 }
 </style>
diff --git a/src/presentation/components/Scripts/View/Tree/TreeView/tree-colors.scss b/src/presentation/components/Scripts/View/Tree/TreeView/tree-colors.scss
index 8d6bf015..5ecfa73e 100644
--- a/src/presentation/components/Scripts/View/Tree/TreeView/tree-colors.scss
+++ b/src/presentation/components/Scripts/View/Tree/TreeView/tree-colors.scss
@@ -1,7 +1,7 @@
 @use "@/presentation/assets/styles/main" as *;
 
 /* Tree colors, based on global colors */
-$color-tree-bg                              : $color-primary-darker;
+$color-tree-bg                              : $color-scripts-bg;
 $color-node-arrow                           : $color-on-primary;
 $color-node-fg                              : $color-on-primary;
 $color-node-highlight-bg                    : $color-primary-dark;