diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss
index 8243d1bb7..32288c627 100644
--- a/frontend/resources/styles/main-default.scss
+++ b/frontend/resources/styles/main-default.scss
@@ -71,7 +71,6 @@
 @import "main/partials/project-bar";
 @import "main/partials/sidebar";
 @import "main/partials/sidebar-document-history";
-@import "main/partials/sidebar-interactions";
 @import "main/partials/tab-container";
 @import "main/partials/tool-bar";
 @import "main/partials/user-settings";
diff --git a/frontend/resources/styles/main/partials/sidebar-interactions.scss b/frontend/resources/styles/main/partials/sidebar-interactions.scss
deleted file mode 100644
index 77c39c9a9..000000000
--- a/frontend/resources/styles/main/partials/sidebar-interactions.scss
+++ /dev/null
@@ -1,215 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-.interactions-help {
-  font-size: $fs12;
-  padding: 7px $size-4;
-  margin: 0 -7px;
-  text-align: center;
-
-  &.separator {
-    padding-bottom: $size-4;
-    border-bottom: 1px solid $color-black;
-  }
-}
-
-.interactions-help-icon {
-  height: 32px;
-  width: 32px;
-  margin: $size-4 auto;
-
-  svg {
-    fill: $color-gray-40;
-    height: 32px;
-    width: 32px;
-  }
-}
-
-.interactions-summary {
-  cursor: pointer;
-  flex-basis: 0;
-  flex-grow: 1;
-
-  .trigger-name {
-    font-size: $fs12;
-    color: $color-white;
-  }
-
-  .action-summary {
-    font-size: $fs12;
-    color: $color-gray-20;
-  }
-}
-
-.interactions-element {
-  display: flex;
-  align-items: center;
-  margin: 0 -7px;
-  padding: 0 7px;
-
-  .element-label {
-    color: $color-gray-20;
-    font-size: $fs12;
-    width: 64px;
-  }
-
-  &.separator {
-    border-top: 1px solid $color-black;
-    margin-top: $size-1;
-  }
-}
-
-.interactions-pos-buttons {
-  margin-top: $size-2;
-  padding-top: $size-2;
-  padding-bottom: $size-2;
-  justify-content: space-between;
-
-  .element-set-actions-button {
-    min-width: 18px;
-    min-height: 18px;
-  }
-
-  svg {
-    height: 18px;
-    width: 18px;
-  }
-}
-
-.interactions-way-buttons {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-
-  & .input-radio {
-    margin-bottom: 0;
-
-    & label {
-      color: $color-gray-20;
-
-      &:before {
-        background-color: unset;
-      }
-    }
-
-    & input[type="radio"]:checked {
-      & + label {
-        &:before {
-          background-color: $color-primary;
-          box-shadow: inset 0 0 0 5px $color-gray-50;
-        }
-      }
-    }
-  }
-}
-
-.interactions-direction-buttons {
-  margin-top: $size-2;
-  padding-top: $size-2;
-  padding-bottom: $size-2;
-  justify-content: space-around;
-
-  .element-set-actions-button {
-    min-width: 40px;
-    min-height: 13px;
-  }
-
-  svg {
-    height: 13px;
-    width: 13px;
-  }
-}
-
-.interactions-easing-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 30px;
-  min-height: 30px;
-
-  & svg {
-    width: 12px;
-    height: 12px;
-    stroke: $color-gray-20;
-  }
-}
-
-.flow-element {
-  display: flex;
-  align-items: center;
-  padding: $size-1;
-
-  .element-label {
-    font-size: $fs11;
-  }
-
-  .flow-name {
-    cursor: pointer;
-  }
-
-  & input.element-name {
-    background: transparent;
-    border-color: $color-primary;
-    color: $color-white;
-    font-size: $fs11;
-  }
-}
-
-.flow-button {
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: $size-2;
-
-  & svg {
-    height: 12px;
-    width: 12px;
-    fill: $color-gray-20;
-  }
-
-  &:hover svg {
-    fill: $color-primary;
-  }
-}
-
-.flow-badge {
-  cursor: pointer;
-  display: flex;
-
-  & .content {
-    align-items: center;
-    background-color: $color-gray-50;
-    border-radius: $br4;
-    display: flex;
-    height: 24px;
-
-    & svg {
-      height: 12px;
-      margin: 0 $size-2;
-      width: 12px;
-      fill: $color-gray-20;
-    }
-
-    & span {
-      color: $color-gray-20;
-      font-size: $fs12;
-      margin-right: $size-4;
-    }
-  }
-
-  &.selected .content,
-  &:hover .content {
-    background-color: $color-primary;
-
-    & svg {
-      fill: $color-gray-60;
-    }
-
-    & span {
-      color: $color-gray-60;
-    }
-  }
-}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
index 87eb4017a..9ab6a9d81 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
@@ -10,69 +10,76 @@
   display: flex;
   flex-direction: column;
   gap: $s-8;
-  .interaction-options {
-    @include flexColumn;
-    .element-title {
-      .add-interaction-btn {
-        @extend .button-tertiary;
-        height: $s-32;
-        width: $s-28;
-        svg {
-          @extend .button-icon;
-          stroke: var(--icon-foreground);
-        }
-      }
-    }
+}
 
-    .help-content {
-      padding: $s-20;
-      .help-group {
-        margin-bottom: $s-40;
-        .interactions-help-icon {
-          @include flexCenter;
-          width: $s-48;
-          height: $s-48;
-          border-radius: $br-circle;
-          background-color: var(--pill-background-color);
-          margin: 0 auto $s-12 auto;
-          svg {
-            @extend .button-icon;
-            stroke: var(--icon-foreground);
-            height: $s-32;
-            width: $s-32;
-          }
-        }
-        .interactions-help {
-          @include titleTipography;
-          text-align: center;
-        }
-      }
-    }
+.interaction-options {
+  @include flexColumn;
+}
+
+.add-interaction-btn {
+  @extend .button-tertiary;
+  height: $s-32;
+  width: $s-28;
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
   }
-  .element-set {
-    @include flexColumn;
-    .add-flow-btn {
-      @extend .button-tertiary;
-      height: $s-32;
-      width: $s-28;
-      svg {
-        @extend .button-icon;
-      }
-    }
+}
+
+.help-content {
+  padding: $s-20;
+}
+
+.help-group {
+  margin-bottom: $s-40;
+}
+
+.interactions-help-icon {
+  @include flexCenter;
+  width: $s-48;
+  height: $s-48;
+  border-radius: $br-circle;
+  background-color: var(--pill-background-color);
+  margin: 0 auto $s-12 auto;
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+    height: $s-32;
+    width: $s-32;
+  }
+}
+
+.interactions-help {
+  @include titleTipography;
+  text-align: center;
+  color: var(--title-foreground-color);
+}
+
+.element-set {
+  @include flexColumn;
+}
+
+.add-flow-btn {
+  @extend .button-tertiary;
+  height: $s-32;
+  width: $s-28;
+  svg {
+    @extend .button-icon;
   }
 }
 
 .interactions-info {
   flex-grow: 1;
   display: grid;
+}
 
-  .trigger-name {
-    color: var(--color-foreground-primary);
-  }
-  .action-summary {
-    color: var(--color-foreground-secondary);
-    @include textEllipsis;
-  }
+.trigger-name {
+  color: var(--color-foreground-primary);
+}
+
+.action-summary {
+  color: var(--color-foreground-secondary);
+  @include textEllipsis;
 }
 
 .groups {
@@ -96,6 +103,7 @@
           width: $s-92;
           margin: auto 0;
           grid-area: name;
+          color: var(--title-foreground-color);
         }
         .select-wrapper {
           display: flex;
@@ -231,91 +239,97 @@
 
 .flow-element {
   @include flexRow;
-  .flow-info {
-    display: flex;
-    align-items: center;
-    gap: $s-2;
-    border-radius: $s-8;
-    background-color: var(--input-details-color);
-    height: $s-32;
-    width: 100%;
-    flex-grow: 1;
-    .flow-name-wrapper {
-      @include titleTipography;
-      @include focusInput;
-      display: flex;
-      align-items: center;
-      gap: $s-4;
-      flex-grow: 1;
-      height: $s-32;
-      width: 100%;
-      border-radius: $br-8;
-      padding: 0;
-      margin-right: 0;
-      background-color: var(--input-background-color);
-      border: $s-1 solid var(--input-background-color);
-      color: var(--input-foreground-color);
-      .start-flow-btn {
-        @include buttonStyle;
-        height: $s-32;
-        width: $s-28;
-        padding: 0 $s-2 0 $s-8;
-        border-radius: $br-8 0 0 $br-8;
-        background-color: transparent;
-        svg {
-          @extend .button-icon;
-          stroke: var(--icon-foreground);
-          &:hover {
-            stroke: var(--input-foreground-color-active);
-          }
-        }
-      }
-      .flow-input {
-        @extend .input-base;
-        background-color: transparent;
-        height: $s-28;
-      }
-      .flow-input-wrapper {
-        @include titleTipography;
-        display: flex;
-        align-items: center;
-        height: $s-28;
-        padding: 0;
-        width: 100%;
-        margin: 0;
-        flex-grow: 1;
-        background-color: transparent;
-        color: var(--input-foreground-color);
-        border-radius: $br-8;
-      }
-      &:hover {
-        background-color: var(--input-background-color-hover);
-        border: $s-1 solid var(--input-background-color-hover);
-        &:active {
-          background-color: var(--input-background-color-active);
-          .flow-input-wrapper {
-            background-color: var(--input-background-color-active);
-          }
-        }
-      }
-      &:focus,
-      &:focus-within {
-        background-color: var(--input-background-color-active);
-      }
+}
 
-      &.editing {
-        background-color: var(--input-background-color-active);
-      }
-    }
-  }
+.flow-info {
+  display: flex;
+  align-items: center;
+  gap: $s-2;
+  border-radius: $s-8;
+  background-color: var(--input-details-color);
+  height: $s-32;
+  width: 100%;
+  flex-grow: 1;
+}
 
-  .remove-flow-btn {
-    @extend .button-tertiary;
+.flow-name-wrapper {
+  @include titleTipography;
+  @include focusInput;
+  display: flex;
+  align-items: center;
+  gap: $s-4;
+  flex-grow: 1;
+  height: $s-32;
+  width: 100%;
+  border-radius: $br-8;
+  padding: 0;
+  margin-right: 0;
+  background-color: var(--input-background-color);
+  border: $s-1 solid var(--input-background-color);
+  color: var(--input-foreground-color);
+  .start-flow-btn {
+    @include buttonStyle;
     height: $s-32;
     width: $s-28;
-    min-width: $s-28;
+    padding: 0 $s-2 0 $s-8;
+    border-radius: $br-8 0 0 $br-8;
+    background-color: transparent;
     svg {
       @extend .button-icon;
+      stroke: var(--icon-foreground);
+      &:hover {
+        stroke: var(--input-foreground-color-active);
+      }
     }
   }
+
+  .flow-input {
+    @extend .input-base;
+    background-color: transparent;
+    height: $s-28;
+  }
+
+  .flow-input-wrapper {
+    @include titleTipography;
+    display: flex;
+    align-items: center;
+    height: $s-28;
+    padding: 0;
+    width: 100%;
+    margin: 0;
+    flex-grow: 1;
+    background-color: transparent;
+    color: var(--input-foreground-color);
+    border-radius: $br-8;
+  }
+
+  &:hover {
+    background-color: var(--input-background-color-hover);
+    border: $s-1 solid var(--input-background-color-hover);
+    &:active {
+      background-color: var(--input-background-color-active);
+      .flow-input-wrapper {
+        background-color: var(--input-background-color-active);
+      }
+    }
+  }
+
+  &:focus,
+  &:focus-within {
+    background-color: var(--input-background-color-active);
+  }
+
+  &.editing {
+    background-color: var(--input-background-color-active);
+  }
+}
+
+.remove-flow-btn {
+  @extend .button-tertiary;
+  height: $s-32;
+  width: $s-28;
+  min-width: $s-28;
+  svg {
+    @extend .button-icon;
+  }
 }