diff --git a/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue b/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
index b66026ec4..25fc669e2 100644
--- a/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
+++ b/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
@@ -57,21 +57,24 @@ export default class TheScriptsMenu extends StatefulVue {
 </script>
 
 <style scoped lang="scss">
+$margin-between-lines: 7px;
 #container {
-    display: flex;
-    flex-wrap: wrap;
-    .item {
-        flex: 1;
-        white-space: nowrap;
-        display: flex;
-        justify-content: center;
-        margin: 0 5px 0 5px;
-        &:first-child {
-            justify-content: flex-start;
-        }
-        &:last-child {
-            justify-content: flex-end;
-        }
-    }
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: -$margin-between-lines;
+  .item {
+      flex: 1;
+      white-space: nowrap;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: $margin-between-lines 5px 0 5px;
+      &:first-child {
+          justify-content: flex-start;
+      }
+      &:last-child {
+          justify-content: flex-end;
+      }
+  }
 }
 </style>
diff --git a/src/presentation/components/Scripts/Slider/Handle.vue b/src/presentation/components/Scripts/Slider/Handle.vue
index 098e63c44..3236c53f3 100644
--- a/src/presentation/components/Scripts/Slider/Handle.vue
+++ b/src/presentation/components/Scripts/Slider/Handle.vue
@@ -7,7 +7,7 @@
         <font-awesome-icon
             class="image"
             :icon="['fas', 'arrows-alt-h']" 
-        /> <!-- exchange-alt arrows-alt-h-->
+        />
         <div class="line"></div>
     </div>
 </template>
@@ -66,6 +66,7 @@ export default class Handle extends Vue {
     .image {
         color: $dark-gray;
     }
-    margin-right: 10px;
+    margin-right: 5px;
+    margin-left: 5px;
 }
 </style>
diff --git a/src/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue b/src/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue
index 29abfe961..4892ea6f4 100644
--- a/src/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue
+++ b/src/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue
@@ -1,17 +1,22 @@
 <template>
-    <div class="slider">
-        <div class="left" ref="leftElement">
-            <slot name="left"></slot>
+    <div class="slider" v-bind:style="{
+            '--vertical-margin': this.verticalMargin,
+            '--first-min-width': this.firstMinWidth,
+            '--first-initial-width': this.firstInitialWidth,
+            '--second-min-width': this.secondMinWidth,
+        }">
+        <div class="first" ref="firstElement">
+            <slot name="first"></slot>
         </div>
         <Handle class="handle" @resized="onResize($event)" />
-        <div class="right">
-            <slot name="right"></slot>
+        <div class="second">
+            <slot name="second"></slot>
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Vue, Prop } from 'vue-property-decorator';
 import Handle from './Handle.vue';
 
 @Component({
@@ -20,7 +25,12 @@ import Handle from './Handle.vue';
   },
 })
 export default class HorizontalResizeSlider extends Vue {
-    private get left(): HTMLElement { return this.$refs.leftElement as HTMLElement; }
+    @Prop() public verticalMargin: string;
+    @Prop() public firstMinWidth: string;
+    @Prop() public firstInitialWidth: string;
+    @Prop() public secondMinWidth: string;
+
+    private get left(): HTMLElement { return this.$refs.firstElement as HTMLElement; }
 
     public onResize(displacementX: number): void {
         const leftWidth = this.left.offsetWidth + displacementX;
@@ -35,16 +45,22 @@ export default class HorizontalResizeSlider extends Vue {
 .slider {
     display: flex;
     flex-direction: row;
-    .right {
+    .first {
+        min-width: var(--first-min-width);
+        width: var(--first-initial-width);
+    }
+    .second {
         flex: 1;
+        min-width: var(--second-min-width);
     }
-}
-@media screen and (max-width: $vertical-view-breakpoint) {
-    .slider {
+    @media screen and (max-width: $vertical-view-breakpoint) {
         flex-direction: column;
-        .left {
+        .first {
             width: auto !important;
         }
+        .second {
+            margin-top: var(--vertical-margin);
+        }
         .handle {
             display: none;
         }
diff --git a/src/presentation/components/Scripts/TheScriptArea.vue b/src/presentation/components/Scripts/TheScriptArea.vue
index 889cb5a92..b5cbb6b93 100644
--- a/src/presentation/components/Scripts/TheScriptArea.vue
+++ b/src/presentation/components/Scripts/TheScriptArea.vue
@@ -1,11 +1,13 @@
 <template>
 <div class="scripts">
     <TheScriptsMenu v-on:viewChanged="currentView = $event" />
-    <HorizontalResizeSlider class="row">
-        <template v-slot:left>
+    <HorizontalResizeSlider class="row"
+        verticalMargin="15px" firstInitialWidth="55%"
+        firstMinWidth="20%" secondMinWidth="20%">
+        <template v-slot:first>
             <TheScriptsView :currentView="currentView" />
         </template>
-        <template v-slot:right>
+        <template v-slot:second>
             <TheCodeArea theme="xcode" />
         </template>
     </HorizontalResizeSlider>
@@ -39,11 +41,4 @@ export default class TheScriptArea extends Vue {
         margin-top: 15px;
     }
 }
-::v-deep .left {
-    width: 55%; // initial width
-    min-width: 20%;
-}
-::v-deep .right {
-    min-width: 20%;
-}
 </style>
diff --git a/src/presentation/components/Scripts/View/Cards/CardList.vue b/src/presentation/components/Scripts/View/Cards/CardList.vue
index a1bf7e0cd..b0c0163e4 100644
--- a/src/presentation/components/Scripts/View/Cards/CardList.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardList.vue
@@ -106,10 +106,13 @@ function isClickable(element: Element) {
 
 <style scoped lang="scss">
 @import "@/presentation/styles/fonts.scss";
+@import "@/presentation/styles/components/card.scss";
+
 .cards {
   display: flex;
   flex-flow: row wrap;
   font-family: $main-font;
+  margin: -$card-margin;
 }
 
 .error {
diff --git a/src/presentation/components/Scripts/View/Cards/CardListItem.vue b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
index e7e602135..fa31bf8d5 100644
--- a/src/presentation/components/Scripts/View/Cards/CardListItem.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
@@ -97,15 +97,15 @@ export default class CardListItem extends StatefulVue {
 <style scoped lang="scss">
 @import "@/presentation/styles/colors.scss";
 @import "@/presentation/styles/media.scss";
+@import "@/presentation/styles/components/card.scss";
 
 $card-padding: 30px;
-$card-margin: 15px;
 $card-line-break-width: 30px;
 $arrow-size: 15px;
 $expanded-margin-top: 30px;
 
 .card {
-  margin: 15px; 
+  margin: $card-margin; 
   transition: all 0.2s ease-in-out;
 
   &__inner {  
diff --git a/src/presentation/styles/components/card.scss b/src/presentation/styles/components/card.scss
new file mode 100644
index 000000000..621dcd366
--- /dev/null
+++ b/src/presentation/styles/components/card.scss
@@ -0,0 +1 @@
+$card-margin: 15px;