diff --git a/src/presentation/components/Scripts/View/Cards/CardExpansionArrow.vue b/src/presentation/components/Scripts/View/Cards/CardExpansionArrow.vue
new file mode 100644
index 00000000..2871b507
--- /dev/null
+++ b/src/presentation/components/Scripts/View/Cards/CardExpansionArrow.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="arrow-container">
+    <div class="arrow" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  // Empty component for ESLint compatibility, workaround for https://github.com/vuejs/vue-eslint-parser/issues/125.
+});
+</script>
+
+<style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
+$arrow-size: $font-size-absolute-normal;
+
+.arrow-container {
+  position: relative;
+  .arrow {
+    position: absolute;
+    left: calc(50% - $arrow-size * 1.5);
+    top: calc(-0.35 * $arrow-size);
+    border: solid $color-primary-darker;
+    border-width: 0 $arrow-size $arrow-size 0;
+    padding: $arrow-size;
+    transform: rotate(-135deg);
+  }
+}
+</style>
diff --git a/src/presentation/components/Scripts/View/Cards/CardListItem.vue b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
index dd1e6035..ea5c0d3a 100644
--- a/src/presentation/components/Scripts/View/Cards/CardListItem.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
@@ -29,22 +29,24 @@
       />
     </div>
     <CardExpandTransition>
-      <div
-        v-show="isExpanded"
-        class="card__expander"
-        @click.stop
-      >
-        <div class="card__expander__close-button">
-          <FlatButton
-            icon="xmark"
-            @click="collapse()"
-          />
-        </div>
-        <div class="card__expander__content">
-          <ScriptsTree
-            :category-id="categoryId"
-            :has-top-padding="false"
-          />
+      <div v-show="isExpanded">
+        <CardExpansionArrow />
+        <div
+          class="card__expander"
+          @click.stop
+        >
+          <div class="card__expander__close-button">
+            <FlatButton
+              icon="xmark"
+              @click="collapse()"
+            />
+          </div>
+          <div class="card__expander__content">
+            <ScriptsTree
+              :category-id="categoryId"
+              :has-top-padding="false"
+            />
+          </div>
         </div>
       </div>
     </CardExpandTransition>
@@ -62,6 +64,7 @@ import ScriptsTree from '@/presentation/components/Scripts/View/Tree/ScriptsTree
 import { sleep } from '@/infrastructure/Threading/AsyncSleep';
 import CardSelectionIndicator from './CardSelectionIndicator.vue';
 import CardExpandTransition from './CardExpandTransition.vue';
+import CardExpansionArrow from './CardExpansionArrow.vue';
 
 export default defineComponent({
   components: {
@@ -70,6 +73,7 @@ export default defineComponent({
     CardSelectionIndicator,
     FlatButton,
     CardExpandTransition,
+    CardExpansionArrow,
   },
   props: {
     categoryId: {
@@ -136,12 +140,11 @@ export default defineComponent({
 @use "@/presentation/assets/styles/main" as *;
 
 $card-inner-padding     : 30px;
-$arrow-size             : 15px;
 $expanded-margin-top    : 30px;
 $card-horizontal-gap    : $card-gap;
 
 .card {
-  &__inner {
+  .card__inner {
     padding-top: $card-inner-padding;
     padding-right: $card-inner-padding;
     padding-bottom: 0;
@@ -220,16 +223,6 @@ $card-horizontal-gap    : $card-gap;
       height: auto;
       background-color: $color-secondary;
       color: $color-on-secondary;
-      &:after { // arrow
-        content: "";
-        display: block;
-        position: absolute;
-        bottom: calc(-1 * #{$expanded-margin-top});
-        left: calc(50% - #{$arrow-size});
-        border-left: #{$arrow-size} solid transparent;
-        border-right: #{$arrow-size} solid transparent;
-        border-bottom: #{$arrow-size} solid $color-primary-darker;
-      }
     }
 
     .card__expander {