diff --git a/frontend/src/app/shared/components/project-include/project-include.component.html b/frontend/src/app/shared/components/project-include/project-include.component.html
index e4310b6948..6455c34435 100644
--- a/frontend/src/app/shared/components/project-include/project-include.component.html
+++ b/frontend/src/app/shared/components/project-include/project-include.component.html
@@ -53,6 +53,7 @@
           [selected]="selectedProjects"
           [includeSubprojects]="includeSubprojects$ | async"
           [searchText]="searchText"
+          [root]="true"
           (update)="selectedProjects = $event"
           data-qa-selector="project-include-list"
         ></ul>
diff --git a/frontend/src/app/shared/components/project-include/project-list.component.html b/frontend/src/app/shared/components/project-include/project-list.component.html
index e1271f690e..c4d68e240b 100644
--- a/frontend/src/app/shared/components/project-include/project-list.component.html
+++ b/frontend/src/app/shared/components/project-include/project-list.component.html
@@ -1,14 +1,15 @@
 <li
   class="spot-list--item"
-  *ngFor="let project of projects"
+  *ngFor="let project of projects; index as i; first as isFirst; last as isLast"
 >
   <label
     class="spot-list--item-action op-project-list--item-action"
     [ngClass]="{ 'spot-list--item-action_disabled': isDisabled(project) }"
   >
     <spot-tooltip
-      alignment="top-left"
+      [alignment]="getAlignment(project, isFirst, isLast)"
       [disabled]="!isDisabled(project)"
+      [dark]="true"
     >
       <ng-container slot="trigger">
         <spot-checkbox
diff --git a/frontend/src/app/shared/components/project-include/project-list.component.ts b/frontend/src/app/shared/components/project-include/project-list.component.ts
index 407d1bef0b..8760cc343f 100644
--- a/frontend/src/app/shared/components/project-include/project-list.component.ts
+++ b/frontend/src/app/shared/components/project-include/project-list.component.ts
@@ -9,6 +9,7 @@ import {
 } from '@angular/core';
 import { IProjectData } from './project-data';
 import { CurrentProjectService } from 'core-app/core/current-project/current-project.service';
+import SpotDropAlignmentOption from 'core-app/spot/drop-alignment-options';
 
 @Component({
   selector: '[op-project-list]',
@@ -23,6 +24,8 @@ export class OpProjectListComponent {
 
   @Output() update = new EventEmitter<string[]>();
 
+  @Input() root:boolean = false;
+
   @Input() projects:IProjectData[] = [];
 
   @Input() selected:string[] = [];
@@ -77,4 +80,16 @@ export class OpProjectListComponent {
       ]);
     }
   }
+
+  public getAlignment(project:IProjectData, isFirst:boolean, isLast:boolean):SpotDropAlignmentOption {
+    if (this.root && isFirst) {
+      if (isLast && !project.children.length) {
+        return SpotDropAlignmentOption.RightCenter;
+      }
+       
+      return SpotDropAlignmentOption.BottomLeft;
+    }
+
+    return SpotDropAlignmentOption.TopLeft;
+  }
 }
diff --git a/frontend/src/app/spot/components/tooltip/tooltip.component.ts b/frontend/src/app/spot/components/tooltip/tooltip.component.ts
index 08a2f05a7a..4a8671ca83 100644
--- a/frontend/src/app/spot/components/tooltip/tooltip.component.ts
+++ b/frontend/src/app/spot/components/tooltip/tooltip.component.ts
@@ -14,7 +14,9 @@ import SpotDropAlignmentOption from '../../drop-alignment-options';
 export class SpotTooltipComponent {
   @HostBinding('class.spot-tooltip') public className = true;
 
-  @Input() disabled = false;
+  @Input() @HostBinding('class.spot-tooltip_dark') public dark = false;
+
+  @Input() public disabled = false;
 
   @Input() public alignment:SpotDropAlignmentOption = SpotDropAlignmentOption.BottomCenter;
 
diff --git a/frontend/src/app/spot/spot-docs.component.html b/frontend/src/app/spot/spot-docs.component.html
index 3ffd9871a1..ee6cac0370 100644
--- a/frontend/src/app/spot/spot-docs.component.html
+++ b/frontend/src/app/spot/spot-docs.component.html
@@ -311,35 +311,47 @@ Currently selected value is {{ toggleValue }}
 
 <h1>Tooltip</h1>
 
-<select [(ngModel)]="tooltipAlignment">
-  <option>left-top</option>
-  <option>left-center</option>
-  <option>left-bottom</option>
-  <option>top-left</option>
-  <option>top-center</option>
-  <option>top-right</option>
-  <option>right-top</option>
-  <option>right-center</option>
-  <option>right-bottom</option>
-  <option>bottom-left</option>
-  <option>bottom-center</option>
-  <option>bottom-right</option>
-</select>
-<spot-tooltip [alignment]="tooltipAlignment">
-  <ng-container slot="trigger">Trigger</ng-container>
-  <p
-    slot="body"
-    class="spot-body-small"
-  >Body</p>
-</spot-tooltip>
-
-<spot-tooltip [alignment]="tooltipAlignment">
-  <ng-container slot="trigger">Trigger</ng-container>
-  <ng-container slot="body">
-    <p class="spot-body-small">Body with multiple paragraphs coming in here</p>
-    <p class="spot-body-small">This is the second paragraph</p>
-  </ng-container>
-</spot-tooltip>
+<section class="space-children">
+  <select [(ngModel)]="tooltipAlignment">
+    <option>left-top</option>
+    <option>left-center</option>
+    <option>left-bottom</option>
+    <option>top-left</option>
+    <option>top-center</option>
+    <option>top-right</option>
+    <option>right-top</option>
+    <option>right-center</option>
+    <option>right-bottom</option>
+    <option>bottom-left</option>
+    <option>bottom-center</option>
+    <option>bottom-right</option>
+  </select>
+  <spot-tooltip [alignment]="tooltipAlignment">
+    <ng-container slot="trigger">Trigger</ng-container>
+    <p
+      slot="body"
+      class="spot-body-small"
+    >Body</p>
+  </spot-tooltip>
+
+  <spot-tooltip [alignment]="tooltipAlignment">
+    <ng-container slot="trigger">Trigger</ng-container>
+    <ng-container slot="body">
+      <p class="spot-body-small">Body with multiple paragraphs coming in here</p>
+      <p class="spot-body-small">This is the second paragraph</p>
+    </ng-container>
+  </spot-tooltip>
+
+  <spot-tooltip
+    [alignment]="tooltipAlignment"
+    [dark]="true"
+  >
+    <ng-container slot="trigger">Dark tooltip trigger</ng-container>
+    <ng-container slot="body">
+      <p class="spot-body-small">This is a dark tooltip</p>
+    </ng-container>
+  </spot-tooltip>
+</section>
 
 <h1>Action Bar</h1>
 
diff --git a/frontend/src/app/spot/styles/sass/common/container.sass b/frontend/src/app/spot/styles/sass/common/container.sass
index 6e41d8e41f..b2228a7a34 100644
--- a/frontend/src/app/spot/styles/sass/common/container.sass
+++ b/frontend/src/app/spot/styles/sass/common/container.sass
@@ -9,12 +9,18 @@
   > .spot-body-big,
   > .spot-body-small,
   > .spot-caption,
-  > .spot-text-field,
+  > .spot-text-field
+    margin: 0 $spot-spacing-1
+    margin-top: $spot-spacing-1
+
+    &:last-child
+      margin-bottom: $spot-spacing-1
+
   > .spot-list
-    margin: $spot-spacing-0_5 $spot-spacing-1
+    padding: $spot-spacing-1 0
 
     &:first-child
-      margin-top: $spot-spacing-1
+      padding-top: $spot-spacing-1
 
     &:last-child
-      margin-bottom: $spot-spacing-1
+      padding-bottom: $spot-spacing-1
diff --git a/frontend/src/app/spot/styles/sass/components/action-bar.sass b/frontend/src/app/spot/styles/sass/components/action-bar.sass
index 0b136acc65..da4d138511 100644
--- a/frontend/src/app/spot/styles/sass/components/action-bar.sass
+++ b/frontend/src/app/spot/styles/sass/components/action-bar.sass
@@ -1,9 +1,10 @@
 .spot-action-bar
   display: flex
-  flex-direction: row
+  flex-direction: column
   flex-wrap: nowrap
   justify-content: space-between
   padding: $spot-spacing-1
+  padding-bottom: $spot-spacing-0_5
   background-color: $spot-color-basic-gray-6
 
   &--left,
@@ -12,15 +13,28 @@
     flex-direction: row
     flex-wrap: wrap
     align-items: center
+    justify-content: flex-end
 
-  &--left
-    justify-content: flex-start
+    > *
+      margin-bottom: $spot-spacing-0_5
+      margin-left: $spot-spacing-0_5
 
-    > *:not(:last-child)
-      margin-right: $spot-spacing-1
+  @media #{$spot-mq-action-bar-change}
+    flex-direction: row
 
-  &--right
-    justify-content: flex-end
+    &--left,
+    &--right
+      > *
+        margin-left: 0
+
+    &--left
+      justify-content: flex-start
+
+      > *:not(:last-child)
+        margin-right: $spot-spacing-1
+
+    &--right
+      justify-content: flex-end
 
-    > *:not(:first-child)
-      margin-left: $spot-spacing-1
+      > *:not(:first-child)
+        margin-left: $spot-spacing-1
diff --git a/frontend/src/app/spot/styles/sass/components/tooltip.sass b/frontend/src/app/spot/styles/sass/components/tooltip.sass
index 678b26920e..b70d29846f 100644
--- a/frontend/src/app/spot/styles/sass/components/tooltip.sass
+++ b/frontend/src/app/spot/styles/sass/components/tooltip.sass
@@ -16,6 +16,7 @@
 
     box-shadow: $spot-shadow-light-low
     background: $spot-color-main-light
+    color: $spot-color-basic-gray-1
 
     display: flex
     flex-direction: column
@@ -140,3 +141,11 @@
   &:hover &--body
     pointer-events: all
     opacity: 1
+
+  &_dark &--body
+    color: $spot-color-basic-white
+    background: $spot-color-basic-gray-1
+
+    &::before
+      border-bottom-color: $spot-color-basic-gray-1
+    
diff --git a/frontend/src/app/spot/styles/tokens/dist/tokens.json b/frontend/src/app/spot/styles/tokens/dist/tokens.json
index 470f32b13c..9d29f9460b 100644
--- a/frontend/src/app/spot/styles/tokens/dist/tokens.json
+++ b/frontend/src/app/spot/styles/tokens/dist/tokens.json
@@ -54,7 +54,7 @@
   "spot-shadow-hard-low": "2px 2px 5px rgba(0, 0, 0, 0.25)",
   "spot-shadow-hard-mid": "4px 4px 10px rgba(0, 0, 0, 0.25)",
   "spot-shadow-hard-high": "6px 6px 20px rgba(0, 0, 0, 0.25)",
-  "spot-mq-portrait": "'(orientation: portrait)'",
   "spot-mq-landscape": "'(orientation: landscape)'",
-  "spot-mq-drop-modal-in-context": "'(min-width: 680px) and (min-height: 500px)'"
+  "spot-mq-drop-modal-in-context": "'(min-width: 1000px) and (min-height: 500px)'",
+  "spot-mq-action-bar-change": "'(min-width: 768px)'"
 }
\ No newline at end of file
diff --git a/frontend/src/app/spot/styles/tokens/dist/tokens.sass b/frontend/src/app/spot/styles/tokens/dist/tokens.sass
index 7196dd84ca..9d3478b4d8 100644
--- a/frontend/src/app/spot/styles/tokens/dist/tokens.sass
+++ b/frontend/src/app/spot/styles/tokens/dist/tokens.sass
@@ -54,6 +54,6 @@ $spot-shadow-light-high: 6px 6px 20px rgba(0, 0, 0, 0.15)
 $spot-shadow-hard-low: 2px 2px 5px rgba(0, 0, 0, 0.25)
 $spot-shadow-hard-mid: 4px 4px 10px rgba(0, 0, 0, 0.25)
 $spot-shadow-hard-high: 6px 6px 20px rgba(0, 0, 0, 0.25)
-$spot-mq-portrait: '(orientation: portrait)'
 $spot-mq-landscape: '(orientation: landscape)'
-$spot-mq-drop-modal-in-context: '(min-width: 680px) and (min-height: 500px)'
+$spot-mq-drop-modal-in-context: '(min-width: 1000px) and (min-height: 500px)'
+$spot-mq-action-bar-change: '(min-width: 768px)'
diff --git a/frontend/src/app/spot/styles/tokens/media-queries.yml b/frontend/src/app/spot/styles/tokens/media-queries.yml
index 4924d09a4b..7bbdb3467a 100644
--- a/frontend/src/app/spot/styles/tokens/media-queries.yml
+++ b/frontend/src/app/spot/styles/tokens/media-queries.yml
@@ -5,6 +5,9 @@ props:
   spot-mq-drop-modal-in-context:
     value: "'(min-width: 1000px) and (min-height: 500px)'"
 
+  spot-mq-action-bar-change:
+    value: "'(min-width: 768px)'"
+
 global:
   type: media-query
   category: media-query