diff --git a/ui-v2/app/components/tabular-collection.js b/ui-v2/app/components/tabular-collection.js
index c4d2e1c7a87d..9a7c107ba811 100644
--- a/ui-v2/app/components/tabular-collection.js
+++ b/ui-v2/app/components/tabular-collection.js
@@ -82,7 +82,7 @@ const change = function(e) {
         const dom = get(this, 'dom');
 
         const $tr = dom.closest('tr', e.currentTarget);
-        const $group = dom.sibling(e.currentTarget, 'ul');
+        const $group = dom.sibling(e.currentTarget, 'div');
         const groupRect = $group.getBoundingClientRect();
         const groupBottom = groupRect.top + $group.clientHeight;
 
diff --git a/ui-v2/app/styles/base/components/action-group/index.scss b/ui-v2/app/styles/base/components/action-group/index.scss
index 8f8357d06749..21a6ef1bae5f 100644
--- a/ui-v2/app/styles/base/components/action-group/index.scss
+++ b/ui-v2/app/styles/base/components/action-group/index.scss
@@ -1,7 +1,18 @@
 @import '../toggle-button/index';
+@import '../menu-panel/index';
+@import '../confirmation-alert/index';
 @import './skin';
 @import './layout';
 
-%action-group label:first-of-type {
+%action-group > div {
+  @extend %menu-panel;
+}
+%action-group > label:first-of-type {
   @extend %toggle-button;
 }
+%action-group .confirmation-alert {
+  @extend %confirmation-alert;
+}
+%action-group .type-delete {
+  @extend %internal-button-dangerous;
+}
diff --git a/ui-v2/app/styles/base/components/action-group/layout.scss b/ui-v2/app/styles/base/components/action-group/layout.scss
index 44cab0472051..2c937bdfa72a 100644
--- a/ui-v2/app/styles/base/components/action-group/layout.scss
+++ b/ui-v2/app/styles/base/components/action-group/layout.scss
@@ -4,75 +4,36 @@
   width: 30px;
   height: 30px;
 }
-%action-group label span {
+%action-group > div {
+  transition: min-height 150ms;
+  min-height: 0;
+  width: 192px;
+}
+%action-group .confirmation-alert {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  width: 100%;
+}
+%action-group > label span {
   display: none;
 }
-%action-group label {
+%action-group > label {
   display: block;
   height: 100%;
 }
-%action-group label:last-of-type {
+%action-group > label:last-of-type {
   position: absolute;
   width: 100%;
   z-index: -1;
   top: 0;
 }
-%action-group-action {
-  width: 170px;
-  padding: 10px 10px;
-  text-align: left;
-}
-/* this is actually the group */
-%action-group ul {
-  position: absolute;
-  padding: 1px;
-}
-%action-group li > * {
-  @extend %action-group-action;
-}
-%action-group ul::before {
-  position: absolute;
-  content: '';
-  display: block;
-  width: 10px;
-  height: 10px;
-}
-%action-group ul:not(.left) {
-  right: 0px;
-}
-%action-group ul:not(.left)::before {
-  right: 9px;
-}
-%action-group ul.left {
-  left: 0px;
-}
-%action-group ul.left::before {
-  left: 9px;
-}
-%action-group ul:not(.above) {
-  top: 23px;
-}
-%action-group ul:not(.above)::before {
-  top: -6px;
-  transform: rotate(45deg);
-}
-%action-group ul.above {
-  bottom: 23px;
-}
-%action-group ul.above::before {
-  bottom: -6px;
-  transform: rotate(225deg);
-}
-%action-group li {
-  position: relative;
-  z-index: 1;
-}
 %action-group input[type='radio'],
-%action-group input[type='radio'] ~ ul,
+%action-group input[type='radio'] ~ div,
 %action-group input[type='radio'] ~ .with-confirmation > ul {
   display: none;
 }
-%action-group input[type='radio']:checked ~ ul,
+%action-group input[type='radio']:checked ~ div,
 %action-group input[type='radio']:checked ~ .with-confirmation > ul {
   display: block;
 }
@@ -80,3 +41,17 @@
 %action-group input[type='radio']:checked ~ label[for='actions_close'] {
   z-index: 1;
 }
+%action-group input[type='checkbox'] {
+  @extend %action-group-confirm-toggle;
+}
+%action-group-confirm-toggle {
+  display: none;
+}
+%action-group-confirm-toggle + div > ul,
+%action-group-confirm-toggle + div > ul + div {
+  transition: transform 150ms;
+}
+%action-group-confirm-toggle:checked + div > ul,
+%action-group-confirm-toggle:checked + div > ul + div {
+  transform: translateX(-100%);
+}
diff --git a/ui-v2/app/styles/base/components/action-group/skin.scss b/ui-v2/app/styles/base/components/action-group/skin.scss
index d9ffcfb222c1..b1afbb586158 100644
--- a/ui-v2/app/styles/base/components/action-group/skin.scss
+++ b/ui-v2/app/styles/base/components/action-group/skin.scss
@@ -2,38 +2,11 @@
   /* frame-gray */
   background-color: $gray-050;
 }
-%action-group label,
-%action-group-action {
+%action-group > label {
   cursor: pointer;
 }
-%action-group label:first-of-type::after {
+%action-group > label:first-of-type::after {
   @extend %with-more-horizontal-icon;
   @extend %as-pseudo;
   opacity: 0.7;
 }
-%action-group ul {
-  border: $decor-border-100;
-  border-radius: $decor-radius-100;
-  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.21);
-}
-%action-group ul::before {
-  border-top: $decor-border-100;
-  border-left: $decor-border-100;
-}
-%action-group ul,
-%action-group ul::before {
-  border-color: $color-action;
-}
-%action-group-action {
-  background-color: $white;
-}
-%action-group-action:hover {
-  @extend %frame-blue-800;
-}
-%action-group ul,
-%action-group ul::before {
-  background-color: $white;
-}
-%action-group li {
-  list-style-type: none;
-}
diff --git a/ui-v2/app/styles/base/components/breadcrumbs/index.scss b/ui-v2/app/styles/base/components/breadcrumbs/index.scss
index 074420f1dab8..ebf1af8eb58c 100644
--- a/ui-v2/app/styles/base/components/breadcrumbs/index.scss
+++ b/ui-v2/app/styles/base/components/breadcrumbs/index.scss
@@ -6,3 +6,18 @@
 %breadcrumbs strong {
   @extend %breadcrumb-selected;
 }
+%breadcrumbs-milestone {
+  @extend %breadcrumbs;
+}
+%breadcrumbs-milestone li:first-child > * {
+  @extend %breadcrumb-milestone;
+}
+%breadcrumbs-filesystem {
+  @extend %breadcrumbs;
+}
+%breadcrumbs-filesystem li:not(:first-child) > * {
+  @extend %breadcrumb-path;
+}
+%breadcrumbs-filesystem li:first-child > * {
+  @extend %breadcrumb-folder;
+}
diff --git a/ui-v2/app/styles/base/components/breadcrumbs/skin.scss b/ui-v2/app/styles/base/components/breadcrumbs/skin.scss
index 853da9dedfc3..d2f9acf6e3e4 100644
--- a/ui-v2/app/styles/base/components/breadcrumbs/skin.scss
+++ b/ui-v2/app/styles/base/components/breadcrumbs/skin.scss
@@ -2,10 +2,25 @@
   list-style-type: none;
 }
 %breadcrumb::before {
-  content: '❮';
   line-height: 1;
   font-size: 0.7em;
-  margin-top: 0.1em;
+  margin-top: 0.2em;
+}
+%breadcrumb::before {
+  content: '❮';
+}
+%breadcrumb-milestone::before {
+  content: '❮❮';
+}
+%breadcrumb-path::before {
+  content: '/';
+}
+%breadcrumb-folder::before {
+  position: relative;
+  top: 2px;
+  margin-top: -4px;
+  @extend %with-folder-outline-color-icon;
+  @extend %as-pseudo;
 }
 %breadcrumb {
   color: $color-action;
diff --git a/ui-v2/app/styles/base/components/buttons/layout.scss b/ui-v2/app/styles/base/components/buttons/layout.scss
index 33c64218cf36..08cb2c403256 100644
--- a/ui-v2/app/styles/base/components/buttons/layout.scss
+++ b/ui-v2/app/styles/base/components/buttons/layout.scss
@@ -38,3 +38,9 @@
   padding-top: calc(0.35em - 1px) !important;
   height: 2.3em !important;
 }
+%internal-button {
+  padding: 0.75rem 1rem;
+  text-align: center;
+  display: inline-block;
+  box-sizing: border-box;
+}
diff --git a/ui-v2/app/styles/base/components/buttons/skin.scss b/ui-v2/app/styles/base/components/buttons/skin.scss
index 5c506b6f9375..93aa66005f2d 100644
--- a/ui-v2/app/styles/base/components/buttons/skin.scss
+++ b/ui-v2/app/styles/base/components/buttons/skin.scss
@@ -1,10 +1,12 @@
 /* decor */
-%button {
+%button,
+%internal-button {
   @extend %user-select-none;
   cursor: pointer;
   white-space: nowrap;
 }
-%button:disabled {
+%button:disabled,
+%internal-button:disabled {
   cursor: default;
   box-shadow: none;
 }
@@ -92,3 +94,21 @@
 %dangerous-button:hover:active {
   @extend %frame-red-900;
 }
+
+%internal-button-dangerous {
+  @extend %frame-red-300;
+}
+%internal-button-dangerous-intent {
+  @extend %frame-red-700;
+}
+%internal-button-intent {
+  background-color: $gray-100;
+}
+%internal-button:focus,
+%internal-button:hover {
+  @extend %internal-button-intent;
+}
+%internal-button-dangerous:focus,
+%internal-button-dangerous:hover {
+  @extend %internal-button-dangerous-intent;
+}
diff --git a/ui-v2/app/styles/base/components/checkbox-group/index.scss b/ui-v2/app/styles/base/components/checkbox-group/index.scss
new file mode 100644
index 000000000000..bc182521964a
--- /dev/null
+++ b/ui-v2/app/styles/base/components/checkbox-group/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/base/components/checkbox-group/layout.scss b/ui-v2/app/styles/base/components/checkbox-group/layout.scss
new file mode 100644
index 000000000000..57d8b99efccb
--- /dev/null
+++ b/ui-v2/app/styles/base/components/checkbox-group/layout.scss
@@ -0,0 +1,14 @@
+/* TODO: This is positioning the group */
+/* probably should be in a special %form class*/
+%checkbox-group {
+  @extend %form-row;
+}
+%checkbox-group span {
+  display: inline-block;
+  margin-left: 10px;
+  min-width: 50px;
+}
+%checkbox-group label {
+  margin-right: 10px;
+  white-space: nowrap;
+}
diff --git a/ui-v2/app/styles/base/components/checkbox-group/skin.scss b/ui-v2/app/styles/base/components/checkbox-group/skin.scss
new file mode 100644
index 000000000000..5ae8b1a222a5
--- /dev/null
+++ b/ui-v2/app/styles/base/components/checkbox-group/skin.scss
@@ -0,0 +1,3 @@
+%checkbox-group label {
+  cursor: pointer;
+}
diff --git a/ui-v2/app/styles/base/components/confirmation-alert/index.scss b/ui-v2/app/styles/base/components/confirmation-alert/index.scss
new file mode 100644
index 000000000000..8047a4544b4a
--- /dev/null
+++ b/ui-v2/app/styles/base/components/confirmation-alert/index.scss
@@ -0,0 +1,6 @@
+@import './skin';
+@import './layout';
+
+%confirmation-alert > ul > li > * {
+  @extend %internal-button;
+}
diff --git a/ui-v2/app/styles/base/components/confirmation-alert/layout.scss b/ui-v2/app/styles/base/components/confirmation-alert/layout.scss
new file mode 100644
index 000000000000..748a38d94a78
--- /dev/null
+++ b/ui-v2/app/styles/base/components/confirmation-alert/layout.scss
@@ -0,0 +1,14 @@
+%confirmation-alert > div {
+  padding: 1rem;
+}
+%confirmation-alert > ul {
+  display: flex;
+  margin: 0;
+  padding: 4px;
+}
+%confirmation-alert > ul > li {
+  width: 50%;
+}
+%confirmation-alert > ul > li > * {
+  width: 100%;
+}
diff --git a/ui-v2/app/styles/base/components/confirmation-alert/skin.scss b/ui-v2/app/styles/base/components/confirmation-alert/skin.scss
new file mode 100644
index 000000000000..0f79e6329d95
--- /dev/null
+++ b/ui-v2/app/styles/base/components/confirmation-alert/skin.scss
@@ -0,0 +1,26 @@
+%confirmation-alert {
+  background-color: $white;
+}
+
+%confirmation-alert > div {
+  background-color: $yellow-050;
+  border-top-left-radius: $decor-radius-200;
+  border-top-right-radius: $decor-radius-200;
+}
+%confirmation-alert > ul {
+  list-style: none;
+}
+%confirmation-alert > ul > li > * {
+  cursor: pointer;
+}
+%confirmation-alert > ul > li > *:hover,
+%confirmation-alert > ul > li > *:focus {
+  background-color: $gray-100;
+}
+%confirmation-alert > ul > .dangerous > * {
+  @extend %frame-red-300;
+}
+%confirmation-alert > ul > .dangerous > *:hover,
+%confirmation-alert > ul > .dangerous > *:focus {
+  @extend %frame-red-700;
+}
diff --git a/ui-v2/app/styles/base/components/form-elements/index.scss b/ui-v2/app/styles/base/components/form-elements/index.scss
new file mode 100644
index 000000000000..d2da88cf10a0
--- /dev/null
+++ b/ui-v2/app/styles/base/components/form-elements/index.scss
@@ -0,0 +1,27 @@
+@import './skin';
+@import './layout';
+/* TODO: This is positioning the element */
+/* probably should be in a special %form class*/
+%form-element {
+  @extend %form-row;
+}
+%form-element > span {
+  @extend %form-element-label;
+}
+%form-element > em {
+  @extend %form-element-note;
+}
+%form-element-error > strong {
+  @extend %inline-alert-error;
+}
+%form-element [type='text'],
+%form-element [type='password'],
+%form-element textarea {
+  @extend %form-element-text-input;
+}
+%form-element-text-input:hover {
+  @extend %form-element-text-input-hover;
+}
+%form-element-text-input:focus {
+  @extend %form-element-text-input-focus;
+}
diff --git a/ui-v2/app/styles/base/components/form-elements/layout.scss b/ui-v2/app/styles/base/components/form-elements/layout.scss
new file mode 100644
index 000000000000..20ae6d73f325
--- /dev/null
+++ b/ui-v2/app/styles/base/components/form-elements/layout.scss
@@ -0,0 +1,52 @@
+%form-element,
+%form-element-label,
+%form-element-note,
+%form-element textarea {
+  display: block;
+}
+%form-element a {
+  display: inline;
+}
+%form-element-note > code {
+  display: inline-block;
+}
+%form-element [type='text'],
+%form-element [type='password'] {
+  display: inline-flex;
+  justify-content: flex-start;
+}
+%form-element textarea {
+  resize: vertical;
+}
+%form-row {
+  margin-bottom: 1.4em;
+}
+%form-element-label {
+  margin-bottom: 0.3em;
+}
+%form-element [type='text'],
+%form-element [type='password'] {
+  max-width: 100%;
+  width: 100%;
+  /* height: 2.25em; */
+  height: 0;
+  padding: 17px 13px;
+}
+%form-element textarea {
+  max-width: 100%;
+  min-width: 100%;
+  min-height: 70px;
+  padding: 6px 13px;
+}
+%form-element-note {
+  margin-top: 2px;
+}
+
+/* this is for label span em input */
+%form-element-label + em {
+  margin-top: -0.5em;
+  margin-bottom: 0.5em;
+}
+%form-element-note > code {
+  padding: 0 4px;
+}
diff --git a/ui-v2/app/styles/base/components/form-elements/skin.scss b/ui-v2/app/styles/base/components/form-elements/skin.scss
new file mode 100644
index 000000000000..3c4140ae7edf
--- /dev/null
+++ b/ui-v2/app/styles/base/components/form-elements/skin.scss
@@ -0,0 +1,45 @@
+%form-element-note {
+  font-style: normal;
+}
+%form-element-label {
+  font-weight: $typo-weight-semibold;
+}
+%form-element-text-input {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.06);
+  border-radius: $decor-radius-100;
+  border: $decor-border-100;
+  outline: none;
+}
+%form-element-text-input::placeholder {
+  color: $gray-400;
+}
+%form-element-note > code {
+  border-radius: $decor-radius-100;
+}
+%form-element-error > input,
+%form-element-error > textarea {
+  border-color: $color-failure !important;
+}
+%form-element-text-input {
+  color: $gray-500;
+  border-color: $gray-300;
+}
+%form-element-text-input-hover {
+  border-color: $gray-500;
+}
+%form-element-text-input-focus {
+  border-color: $blue-500;
+}
+%form-element-label {
+  color: $black;
+}
+%form-element-note {
+  color: $gray-400;
+}
+%form-element-note > code {
+  background-color: $gray-200;
+  /* consul color but its a code looking style?*/
+  color: $magenta-600;
+}
diff --git a/ui-v2/app/styles/base/components/inline-alert/index.scss b/ui-v2/app/styles/base/components/inline-alert/index.scss
new file mode 100644
index 000000000000..bc182521964a
--- /dev/null
+++ b/ui-v2/app/styles/base/components/inline-alert/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/base/components/inline-alert/layout.scss b/ui-v2/app/styles/base/components/inline-alert/layout.scss
new file mode 100644
index 000000000000..c222b9f2b3f8
--- /dev/null
+++ b/ui-v2/app/styles/base/components/inline-alert/layout.scss
@@ -0,0 +1,10 @@
+%inline-alert {
+  position: relative;
+  padding-left: 20px;
+}
+%inline-alert::before {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  margin-top: -8px;
+}
diff --git a/ui-v2/app/styles/base/components/inline-alert/skin.scss b/ui-v2/app/styles/base/components/inline-alert/skin.scss
new file mode 100644
index 000000000000..198e8ab6e901
--- /dev/null
+++ b/ui-v2/app/styles/base/components/inline-alert/skin.scss
@@ -0,0 +1,39 @@
+%inline-alert {
+  font-style: normal;
+  font-weight: normal;
+}
+%inline-alert-success,
+%inline-alert-info,
+%inline-alert-error,
+%inline-alert-warning {
+  @extend %inline-alert;
+}
+%inline-alert {
+  color: inherit;
+}
+%inline-alert-error {
+  color: $color-failure;
+}
+%inline-alert::before {
+  font-size: 14px;
+}
+%inline-alert-success::before {
+  @extend %with-check-circle-fill-color-icon;
+  @extend %as-pseudo;
+}
+%inline-alert-error::before {
+  @extend %with-cancel-square-fill-color-icon;
+  @extend %as-pseudo;
+}
+%inline-alert-warning::before {
+  @extend %with-alert-triangle-color-icon;
+  @extend %as-pseudo;
+  /* the warning triangle always looks */
+  /* too low just because its a triangle */
+  /* this tweak make it look better */
+  margin-top: -9px;
+}
+%inline-alert-info::before {
+  @extend %with-info-circle-fill-color-icon;
+  @extend %as-pseudo;
+}
diff --git a/ui-v2/app/styles/base/components/menu-panel/index.scss b/ui-v2/app/styles/base/components/menu-panel/index.scss
new file mode 100644
index 000000000000..68e1f002524a
--- /dev/null
+++ b/ui-v2/app/styles/base/components/menu-panel/index.scss
@@ -0,0 +1,9 @@
+@import './skin';
+@import './layout';
+
+%menu-panel > ul > li > * {
+  @extend %internal-button;
+}
+%menu-panel > ul > li.dangerous > * {
+  @extend %internal-button-dangerous;
+}
diff --git a/ui-v2/app/styles/base/components/menu-panel/layout.scss b/ui-v2/app/styles/base/components/menu-panel/layout.scss
new file mode 100644
index 000000000000..740cd7088eb5
--- /dev/null
+++ b/ui-v2/app/styles/base/components/menu-panel/layout.scss
@@ -0,0 +1,28 @@
+%menu-panel {
+  position: absolute;
+  overflow: hidden;
+}
+%menu-panel:not(.left) {
+  right: 0px;
+}
+%menu-panel.left {
+  left: 0px;
+}
+%menu-panel:not(.above) {
+  top: 28px;
+}
+%menu-panel.above {
+  bottom: 28px;
+}
+%menu-panel > ul {
+  margin: 0;
+  padding: 4px 0;
+}
+%menu-panel > ul,
+%menu-panel > ul > li,
+%menu-panel > ul > li > * {
+  width: 100%;
+}
+%menu-panel > ul > li > * {
+  text-align: left !important;
+}
diff --git a/ui-v2/app/styles/base/components/menu-panel/skin.scss b/ui-v2/app/styles/base/components/menu-panel/skin.scss
new file mode 100644
index 000000000000..9d122d7510a2
--- /dev/null
+++ b/ui-v2/app/styles/base/components/menu-panel/skin.scss
@@ -0,0 +1,12 @@
+%menu-panel {
+  border: $decor-border-100;
+  border-radius: $decor-radius-200;
+  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.21);
+}
+%menu-panel {
+  border-color: $gray-300;
+  background-color: $white;
+}
+%menu-panel > ul > li {
+  list-style-type: none;
+}
diff --git a/ui-v2/app/styles/base/components/modal-dialog/index.scss b/ui-v2/app/styles/base/components/modal-dialog/index.scss
new file mode 100644
index 000000000000..bc182521964a
--- /dev/null
+++ b/ui-v2/app/styles/base/components/modal-dialog/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/base/components/modal-dialog/layout.scss b/ui-v2/app/styles/base/components/modal-dialog/layout.scss
new file mode 100644
index 000000000000..66c85bb1812b
--- /dev/null
+++ b/ui-v2/app/styles/base/components/modal-dialog/layout.scss
@@ -0,0 +1,75 @@
+%with-modal {
+  overflow: hidden;
+}
+/*TODO: %display-toggle?*/
+%modal-control,
+%modal-control + * {
+  display: none;
+}
+%modal-control:checked + * {
+  display: block;
+}
+%modal-dialog > div > div {
+  @extend %modal-window;
+}
+%modal-dialog {
+  z-index: 500;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+%modal-dialog > label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+%modal-dialog > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+/*TODO: Should these be here? */
+%modal-window table {
+  height: 150px !important;
+}
+%modal-window tbody {
+  max-height: 100px;
+}
+/**/
+%modal-window.overflowing {
+  overflow: auto;
+  height: 100%;
+}
+%modal-window {
+  max-width: 855px;
+  position: relative;
+  z-index: 1;
+}
+%modal-window > * {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+%modal-window > div {
+  overflow-y: auto;
+  max-height: 80vh;
+  padding: 20px 23px;
+}
+%modal-window > footer,
+%modal-window > header {
+  padding-top: 12px;
+  padding-bottom: 10px;
+}
+%modal-window > header {
+  position: relative;
+}
+%modal-window > header [for='modal_close'] {
+  float: right;
+  text-indent: -9000px;
+  width: 23px;
+  height: 23px;
+}
diff --git a/ui-v2/app/styles/base/components/modal-dialog/skin.scss b/ui-v2/app/styles/base/components/modal-dialog/skin.scss
new file mode 100644
index 000000000000..e81eefcb149a
--- /dev/null
+++ b/ui-v2/app/styles/base/components/modal-dialog/skin.scss
@@ -0,0 +1,32 @@
+%modal-dialog > label {
+  background-color: rgba($white, 0.9);
+}
+%modal-window {
+  box-shadow: 2px 8px 8px 0 rgba($black, 0.1);
+}
+%modal-window {
+  /*%frame-gray-000*/
+  background-color: $white;
+  border: $decor-border-100;
+  border-color: $gray-300;
+}
+%modal-window > footer,
+%modal-window > header {
+  @extend %frame-gray-800;
+}
+%modal-window > footer {
+  border-top-width: 1px;
+}
+%modal-window > header {
+  border-bottom-width: 1px;
+}
+
+%modal-window > header [for='modal_close'] {
+  @extend %with-cancel-plain-icon;
+  cursor: pointer;
+  border: $decor-border-100;
+  /*%frame-gray-050??*/
+  background-color: $gray-050;
+  border-color: $gray-300;
+  border-radius: $decor-radius-100;
+}
diff --git a/ui-v2/app/styles/base/components/radio-group/index.scss b/ui-v2/app/styles/base/components/radio-group/index.scss
new file mode 100644
index 000000000000..bc182521964a
--- /dev/null
+++ b/ui-v2/app/styles/base/components/radio-group/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/base/components/radio-group/layout.scss b/ui-v2/app/styles/base/components/radio-group/layout.scss
new file mode 100644
index 000000000000..120a5bf4ced0
--- /dev/null
+++ b/ui-v2/app/styles/base/components/radio-group/layout.scss
@@ -0,0 +1,23 @@
+%radio-group {
+  overflow: hidden;
+}
+%radio-group label {
+  float: left;
+}
+%radio-group label > span {
+  float: right;
+}
+%radio-group {
+  padding-left: 1px;
+}
+%radio-group label:not(:last-child) {
+  margin-right: 25px;
+}
+%radio-group label > span {
+  margin-left: 1em;
+  margin-top: 0.2em;
+}
+%radio-group label,
+%radio-group label > span {
+  margin-bottom: 0 !important;
+}
diff --git a/ui-v2/app/styles/base/components/radio-group/skin.scss b/ui-v2/app/styles/base/components/radio-group/skin.scss
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/ui-v2/app/styles/base/components/sliding-toggle/index.scss b/ui-v2/app/styles/base/components/sliding-toggle/index.scss
new file mode 100644
index 000000000000..bc182521964a
--- /dev/null
+++ b/ui-v2/app/styles/base/components/sliding-toggle/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/base/components/sliding-toggle/layout.scss b/ui-v2/app/styles/base/components/sliding-toggle/layout.scss
new file mode 100644
index 000000000000..da34b0654228
--- /dev/null
+++ b/ui-v2/app/styles/base/components/sliding-toggle/layout.scss
@@ -0,0 +1,36 @@
+%sliding-toggle label {
+  position: relative;
+}
+%sliding-toggle input {
+  display: none;
+}
+%sliding-toggle label span {
+  display: inline-block;
+  padding-left: 34px;
+}
+%sliding-toggle label span::before,
+%sliding-toggle label span::after {
+  position: absolute;
+  display: block;
+  content: '';
+  top: 50%;
+}
+%sliding-toggle label span::before {
+  left: 0px;
+  width: 24px;
+  height: 12px;
+  margin-top: -5px;
+}
+%sliding-toggle label span::after {
+  margin-top: -3px;
+  width: 8px;
+  height: 8px;
+}
+%sliding-toggle label input:checked + span::after,
+%sliding-toggle-negative label input + span::after {
+  left: 14px;
+}
+%sliding-toggle label span::after,
+%sliding-toggle-negative label input:checked + span::after {
+  left: 2px;
+}
diff --git a/ui-v2/app/styles/base/components/sliding-toggle/skin.scss b/ui-v2/app/styles/base/components/sliding-toggle/skin.scss
new file mode 100644
index 000000000000..dca7f138e18c
--- /dev/null
+++ b/ui-v2/app/styles/base/components/sliding-toggle/skin.scss
@@ -0,0 +1,30 @@
+/* TODO: Maybe move this to reset? */
+%sliding-toggle label span {
+  cursor: pointer;
+}
+%sliding-toggle label span::after {
+  border-radius: $decor-radius-full;
+}
+%sliding-toggle label span::before {
+  border-radius: 7px;
+}
+%sliding-toggle-negative {
+  border: 0;
+}
+%sliding-toggle.type-negative {
+  @extend %sliding-toggle-negative;
+}
+%sliding-toggle label span {
+  color: $gray-900;
+}
+%sliding-toggle label span::after {
+  background-color: $white;
+}
+%sliding-toggle label input:checked + span::before,
+%sliding-toggle-negative label input + span::before {
+  background-color: $blue-500;
+}
+%sliding-toggle label span::before,
+%sliding-toggle-negative label input:checked + span::before {
+  background-color: $gray-300;
+}
diff --git a/ui-v2/app/styles/base/components/stats-card/layout.scss b/ui-v2/app/styles/base/components/stats-card/layout.scss
index a6aed4fa2894..7068b26e7945 100644
--- a/ui-v2/app/styles/base/components/stats-card/layout.scss
+++ b/ui-v2/app/styles/base/components/stats-card/layout.scss
@@ -1,4 +1,3 @@
-/*%stats-card li:not(:last-child) span {*/
 %stats-card {
   position: relative;
 }
diff --git a/ui-v2/app/styles/base/icons/base-variables.scss b/ui-v2/app/styles/base/icons/base-variables.scss
index 0c1186120fde..02b92a8dda78 100644
--- a/ui-v2/app/styles/base/icons/base-variables.scss
+++ b/ui-v2/app/styles/base/icons/base-variables.scss
@@ -32,7 +32,7 @@ $code-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns=
 $consul-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M8.693 10.707a1.862 1.862 0 1 1-.006-3.724 1.862 1.862 0 0 1 .006 3.724" fill="%23961D59"/><path d="M12.336 9.776a.853.853 0 1 1 0-1.707.853.853 0 0 1 0 1.707M15.639 10.556a.853.853 0 1 1 .017-.07c-.01.022-.01.044-.017.07M14.863 8.356a.855.855 0 0 1-.925-1.279.855.855 0 0 1 1.559.255c.024.11.027.222.009.333a.821.821 0 0 1-.642.691M17.977 10.467a.849.849 0 1 1-1.67-.296.849.849 0 0 1 .982-.692c.433.073.74.465.709.905a.221.221 0 0 0-.016.076M17.286 8.368a.853.853 0 1 1-.279-1.684.853.853 0 0 1 .279 1.684M16.651 13.371a.853.853 0 1 1-1.492-.828.853.853 0 0 1 1.492.828M16.325 5.631a.853.853 0 1 1-.84-1.485.853.853 0 0 1 .84 1.485" fill="%23D62783"/><path d="M8.842 17.534c-4.798 0-8.687-3.855-8.687-8.612C.155 4.166 4.045.31 8.842.31a8.645 8.645 0 0 1 5.279 1.77l-1.056 1.372a6.987 6.987 0 0 0-7.297-.709 6.872 6.872 0 0 0 0 12.356 6.987 6.987 0 0 0 7.297-.709l1.056 1.374a8.66 8.66 0 0 1-5.279 1.77z" fill="%23D62783" fill-rule="nonzero"/></g></svg>');
 $copy-action-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.82 3C13.4 1.84 12.3 1 11 1c-1.3 0-2.4.84-2.82 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-4.18zM9 13H6v2h3v-2zm-3 6h5v-2H6v2zM6 9v2h6V9H6zm5-6c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm9.003 10H23v2h-2.997v2H18v4H4V5h2v1.007h10V5h2v5.992h2.003V13zm0 0H15.99v-3L12 14l3.99 4v-3h4.013v-2z" fill="%23000"/></svg>');
 $copy-success-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.82 3C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16.025c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-4.18zM12 3c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 15l-4-4 1.41-1.41L10 15.17l6.59-6.59L18 10l-8 8z" fill="%23000"/></svg>');
-$deny-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23282C2E" d="M8.79 4l-.737.71L11 7.556H3V8.57h8l-2.947 2.844.736.711L13 8.062z"/><rect stroke="%23C73445" stroke-width="1.5" x=".75" y=".75" width="14.5" height="14.5" rx="7.25"/><path d="M3.5 3.5l9 9" stroke="%23C73445" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
+$deny-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 16 " xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23282C2E" d="M8.79 4l-.737.71L11 7.556H3V8.57h8l-2.947 2.844.736.711L13 8.062z"/><rect stroke="%23C73445" stroke-width="1.5" x=".75" y=".75" width="14.5" height="14.5" rx="7.25"/><path d="M3.5 3.5l9 9" stroke="%23C73445" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
 $deny-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23000" d="M7.79 2.992l-.737.711L10 6.547H2v1.016h8l-2.947 2.843.736.711L12 7.055z"/><rect stroke="%23000" stroke-width="1.5" x=".75" y=".75" width="12.5" height="12.5" rx="6.25"/><path d="M3.063 3.063l7.874 7.874" stroke="%23000" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
 $disabled-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31A7.902 7.902 0 0 1 12 20zm6.31-3.1L7.1 5.69A7.902 7.902 0 0 1 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z" fill="%23000"/></svg>');
 $docs-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.5 11H20v9.5c0 .786-.714 1.5-1.5 1.5h-14c-.786 0-1.5-.714-1.5-1.5v-17C3 2.714 3.714 2 4.5 2H13v1.5H4.5v17h14V11zM7 17.714h9v-1.428H7v1.428zm0-2.857h9V13.43H7v1.428zM7 12h9v-1.429H7V12zm0-4.286V6.286h5v1.428H7zM17 2.5V1h6v6h-1.5V3.429L18 7l-1-1 3.5-3.5H17z" fill="%23000"/></svg>');
@@ -47,6 +47,7 @@ $file-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24
 $filter-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" fill="%23000"/></svg>');
 $flag-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z" fill="%23000"/></svg>');
 $folder-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" fill="%23000"/></svg>');
+$folder-outline-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" fill="%231563ff"/></svg>');
 $folder-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" fill="%23000"/></svg>');
 $git-branch-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.286 9.699a1.556 1.556 0 0 1-1.543-1.543c0-.836.707-1.543 1.543-1.543.835 0 1.543.707 1.543 1.543 0 .835-.708 1.543-1.543 1.543M8.57 19.984a1.556 1.556 0 0 1-1.542-1.543c0-.835.707-1.542 1.542-1.542.836 0 1.543.707 1.543 1.542 0 .836-.707 1.543-1.543 1.543m0-15.955c.849 0 1.543.707 1.543 1.542 0 .836-.707 1.543-1.543 1.543a1.564 1.564 0 0 1-1.54-1.543c0-.835.707-1.542 1.542-1.542m10.286 4.114a2.563 2.563 0 0 0-2.571-2.572A2.562 2.562 0 0 0 15 10.354v.386c-.026.669-.296 1.26-.81 1.774-.514.515-1.106.785-1.774.81-1.067.026-1.903.206-2.572.58V7.783A2.563 2.563 0 0 0 8.56 3 2.552 2.552 0 0 0 6 5.571a2.571 2.571 0 0 0 1.286 2.212v8.434C6.527 16.667 6 17.49 6 18.43A2.563 2.563 0 0 0 8.571 21a2.563 2.563 0 0 0 2.572-2.571c0-.682-.257-1.286-.682-1.749.116-.077.618-.526.759-.604.321-.142.72-.219 1.209-.219 1.35-.064 2.507-.578 3.535-1.607 1.029-1.029 1.543-2.546 1.607-3.883h-.025c.784-.463 1.311-1.286 1.311-2.224" fill="%23000"/></svg>');
 $git-commit-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.971a2.82 2.82 0 0 1-2.829-2.828A2.82 2.82 0 0 1 12 9.314a2.82 2.82 0 0 1 2.829 2.829A2.82 2.82 0 0 1 12 14.97zm4.963-4.114C16.384 8.646 14.39 7 12 7s-4.384 1.646-4.963 3.857H3v2.572h4.037C7.616 15.64 9.61 17.286 12 17.286s4.384-1.646 4.963-3.857H21v-2.572h-4.037z" fill="%23000"/></svg>');
@@ -82,8 +83,8 @@ $plus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 2
 $queue-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9H2v2h17V9zm0-5H2v2h17V4zM2 16h13v-2H2v2zm20 4v-6l-5 3 5 3z" fill="%23000"/></svg>');
 $refresh-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" fill="%23000"/></svg>');
 $run-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" class="structure-icon-run"><style>.structure-icon-run {animation: structure-icon-run-simple-spin 1s infinite linear;}.structure-icon-run-progress {animation: structure-icon-run-fancy-spin 3s infinite linear;fill: transparent;opacity: 0.66;stroke-dasharray: 16 16;transform-origin: 50% 50%;}@keyframes structure-icon-run-fancy-spin {0% {stroke-dasharray: 4 32;}50% {stroke-dasharray: 24 8;}50% {stroke-dasharray: 4 32;}50% {stroke-dasharray: 24 8;}100% {stroke-dasharray: 4 32;}}@keyframes structure-icon-run-simple-spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style><g fill="none" fill-rule="evenodd"><circle cx="12" cy="12" r="8" stroke="%23000" stroke-width="4"/><circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2" class="structure-icon-run-progress"/><circle cx="12" cy="12" r="4" fill="currentColor"/></g></svg>');
-$search-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="%23000"/></svg>');
 $search-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="%231563ff"/></svg>');
+$search-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="%23000"/></svg>');
 $service-identity-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M6.5 13a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm11-3a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm-4 11a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z" id="a"/></defs><use fill="%239E2159" xlink:href="%23a" fill-rule="evenodd"/></svg>');
 $settings-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" fill="%23000"/></svg>');
 $star-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="%23000"/></svg>');
diff --git a/ui-v2/app/styles/base/icons/icon-placeholders.scss b/ui-v2/app/styles/base/icons/icon-placeholders.scss
index b7bc145c295c..2f46d14c6814 100644
--- a/ui-v2/app/styles/base/icons/icon-placeholders.scss
+++ b/ui-v2/app/styles/base/icons/icon-placeholders.scss
@@ -243,6 +243,11 @@
   background-image: $folder-fill-svg;
 }
 
+%with-folder-outline-color-icon {
+  @extend %with-icon;
+  background-image: $folder-outline-color-svg;
+}
+
 %with-folder-outline-icon {
   @extend %with-icon;
   background-image: $folder-outline-svg;
@@ -418,15 +423,16 @@
   background-image: $run-svg;
 }
 
-%with-search-icon {
-  @extend %with-icon;
-  background-image: $search-svg;
-}
 %with-search-color-icon {
   @extend %with-icon;
   background-image: $search-color-svg;
 }
 
+%with-search-icon {
+  @extend %with-icon;
+  background-image: $search-svg;
+}
+
 %with-service-identity-icon {
   @extend %with-icon;
   background-image: $service-identity-svg;
diff --git a/ui-v2/app/styles/components/action-group.scss b/ui-v2/app/styles/components/action-group.scss
index 93c2a53d3860..c9d6fee84f70 100644
--- a/ui-v2/app/styles/components/action-group.scss
+++ b/ui-v2/app/styles/components/action-group.scss
@@ -8,9 +8,6 @@
   top: 8px;
   right: 15px;
 }
-%action-group ul.above {
-  bottom: 35px;
-}
-%action-group ul:not(.above) {
-  top: 35px;
+%action-group .type-delete {
+  @extend %internal-button-dangerous;
 }
diff --git a/ui-v2/app/styles/components/form-elements.scss b/ui-v2/app/styles/components/form-elements.scss
index 7717f9baa83f..e10063e2a520 100644
--- a/ui-v2/app/styles/components/form-elements.scss
+++ b/ui-v2/app/styles/components/form-elements.scss
@@ -1,9 +1,10 @@
 /*TODO: This remains a mix of form-elements */
 /* form-elements should probably be a collection of these */
-@import './form-elements/index';
-@import './toggle/index';
-@import './radio-group/index';
-@import './checkbox-group/index';
+@import '../base/components/inline-alert/index';
+@import '../base/components/form-elements/index';
+@import '../base/components/sliding-toggle/index';
+@import '../base/components/radio-group/index';
+@import '../base/components/checkbox-group/index';
 label span {
   @extend %user-select-none;
 }
@@ -15,7 +16,7 @@ label span {
   @extend %form-element;
 }
 .type-toggle {
-  @extend %form-element, %toggle;
+  @extend %form-element, %sliding-toggle;
 }
 %form-element,
 %radio-group,
@@ -37,6 +38,6 @@ form table,
 fieldset > p {
   color: $gray-400;
 }
-%toggle + .checkbox-group {
+%sliding-toggle + .checkbox-group {
   margin-top: -1em;
 }
diff --git a/ui-v2/app/styles/components/icons/index.scss b/ui-v2/app/styles/components/icons/index.scss
index 0b04361ef714..1952e9b2520f 100644
--- a/ui-v2/app/styles/components/icons/index.scss
+++ b/ui-v2/app/styles/components/icons/index.scss
@@ -58,8 +58,7 @@
 %with-hashicorp,
 %with-folder,
 %with-chevron,
-%with-clipboard,
-%with-right-arrow {
+%with-clipboard {
   position: relative;
 }
 %with-chevron {
@@ -169,31 +168,7 @@
   height: 20px !important;
   width: 16px !important;
 }
-%with-cross {
-  @extend %pseudo-icon;
-  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M4 5.064L1.064 8 0 6.936 2.936 4 0 1.064 1.064 0 4 2.936 6.936 0 8 1.064 5.064 4 8 6.936 6.936 8 4 5.064z" fill="%23FFF"/></svg>');
-}
 %with-minus {
   @extend %pseudo-icon;
   background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="9" height="2" viewBox="0 0 9 2" xmlns="http://www.w3.org/2000/svg"><path fill="%23FFF" fill-rule="nonzero" d="M0 0h8v2H0z"/></svg>');
 }
-%with-right-arrow-green {
-  @extend %pseudo-icon;
-  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M9.263.5L8.084 1.637l4.716 4.55H0v1.625h12.8l-4.716 4.55 1.18 1.138L16 7z" fill="%232EB039"/></svg>');
-  width: 16px;
-  height: 14px;
-  background-color: $color-transparent;
-}
-%with-right-arrow-grey {
-  @extend %pseudo-icon;
-  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="13" height="11" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="%23919FA8" d="M7.526.219l-.958.924L10.4 4.84H0v1.32h10.4L6.568 9.857l.958.924L13 5.5z"/></svg>');
-}
-// swap this out for new icons
-%with-error {
-  position: relative;
-  padding-left: 18px;
-}
-%with-error::before {
-  @extend %with-cross;
-  margin-top: -0.5em;
-}
diff --git a/ui-v2/app/styles/components/modal-dialog.scss b/ui-v2/app/styles/components/modal-dialog.scss
index a194462ce37c..1fc7f9a6b199 100644
--- a/ui-v2/app/styles/components/modal-dialog.scss
+++ b/ui-v2/app/styles/components/modal-dialog.scss
@@ -1,4 +1,4 @@
-@import './modal-dialog/index';
+@import '../base/components/modal-dialog/index';
 [role='dialog'] {
   @extend %modal-dialog;
 }
diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss
index 154cbe8e8fa5..a79e321f313e 100644
--- a/ui-v2/app/styles/core/typography.scss
+++ b/ui-v2/app/styles/core/typography.scss
@@ -26,7 +26,8 @@ h3,
   letter-spacing: -0.05em;
 }
 
-%button {
+%button,
+%internal-button {
   font-family: $typo-family-sans;
 }
 /* Weighting */
@@ -96,6 +97,7 @@ body,
 pre code,
 input,
 textarea,
+%internal-button,
 %action-group-action,
 %tbody-th {
   font-size: $typo-size-600;
diff --git a/ui-v2/app/templates/components/action-group.hbs b/ui-v2/app/templates/components/action-group.hbs
index eae6e4421d66..138d878d18e1 100644
--- a/ui-v2/app/templates/components/action-group.hbs
+++ b/ui-v2/app/templates/components/action-group.hbs
@@ -1,12 +1,14 @@
 {{! action groups are block only components, you MUST specify a list of actions in the component body }}
 {{! therefore if you call this component as an inline component, nothing is produced }}
 {{#if hasBlock }}
-  <input type="radio" name="actions" id="actions_{{index}}" checked={{if (eq checked 'checked') 'checked' }} onchange={{action onchange}} value={{index}} />
+  <input type="radio" name="actions" id="actions_{{index}}" checked={{if (eq checked 'checked') 'checked'}} onchange={{action onchange}} value={{index}} />
   <label for="actions_{{index}}">
-      <span>Open</span>
+    <span>Open</span>
   </label>
   <label for="actions_close">
-      <span>Close</span>
+    <span>Close</span>
   </label>
-  {{yield}}
+  <div>
+    {{yield}}
+  </div>
 {{/if}}