diff --git a/packages/insomnia-app/.storybook/preview-head.html b/packages/insomnia-app/.storybook/preview-head.html
index 2ec429a1175..97d7de2f75c 100644
--- a/packages/insomnia-app/.storybook/preview-head.html
+++ b/packages/insomnia-app/.storybook/preview-head.html
@@ -3,3 +3,735 @@
     document.body.setAttribute('theme', 'default');
   };
 </script>
+
+<style>
+  /* reset.css */
+  html,
+  body,
+  div,
+  span,
+  applet,
+  object,
+  iframe,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  sub,
+  sup,
+  tt,
+  var,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  form,
+  label,
+  legend,
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    vertical-align: baseline;
+  }
+
+  /* HTML5 display-role reset for older browsers */
+
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section {
+    display: block;
+  }
+
+  body {
+    line-height: normal;
+  }
+
+  ol,
+  ul {
+    list-style: none;
+  }
+
+  blockquote,
+  q {
+    quotes: none;
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+</style>
+
+<style>
+  html {
+    --font-monospace: Menlo, Monaco, Consolas, 'Droid Sans Mono', 'Courier New', monospace,
+      'Droid Sans Fallback';
+    --font-default: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI',
+      'HelveticaNeue-Light', 'Ubuntu', 'Droid Sans', sans-serif;
+    --font-ligatures: normal;
+  }
+
+  body {
+    overflow: auto;
+    padding: 0.5rem 40px;
+    font-family: var(--font-default);
+    font-size: var(--font-size);
+  }
+
+  #root {
+    max-width: 70rem;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  #story-root,
+  #dropdowns-container {
+    background-color: var(--color-bg);
+    color: var(--color-font);
+  }
+
+  #story-root {
+    padding: 0.5rem 40px;
+  }
+
+  .storybook-skinny {
+    max-width: 40rem;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .simplebar-content pre {
+    font-size: 0.8rem;
+  }
+
+  body {
+  }
+</style>
+
+<!-- Default Theme Variables -->
+<style>
+  html {
+    /* Font Size */
+    --font-size-xxs: 10px;
+    --font-size-xs: 11px;
+    --font-size-sm: 12px;
+    --font-size-md: 13px;
+    --font-size-lg: 14px;
+    --font-size-xl: 16px;
+    --font-size-xxl: 18px;
+    --font-size-xxxl: 22px;
+    --font-size: var(--font-size-md);
+
+    /* Font Weight */
+    --font-weight-regular: 400;
+    --font-weight-medium: 600;
+    --font-weight-bold: 700;
+
+    /* Line Height */
+    --font-line-height-sm: calc(var(--font-size) * 1);
+    --font-line-height-md: calc(var(--font-size) * 1.25);
+    --font-line-height-lg: calc(var(--font-size) * 1.4);
+    --font-line-height-xl: calc(var(--font-size) * 1.75);
+    --font-line-height-xxl: calc(var(--font-size) * 2);
+    --font-line-height-xxxl: calc(var(--font-size) * 2.25);
+
+    /* Spacing */
+    --spacing-xs: calc(var(--font-size) * 0.4);
+    --spacing-sm: calc(var(--font-size) * 0.6);
+    --spacing-md: calc(var(--font-size) * 1);
+    --spacing-lg: calc(var(--font-size) * 1.25);
+    --spacing-xl: calc(var(--font-size) * 1.5);
+    --spacing-xxl: calc(var(--font-size) * 2);
+    --spacing-xxxl: calc(var(--font-size) * 3);
+    --spacing-xxxxl: calc(var(--font-size) * 4);
+
+    /* Colors */
+    --color-border: #d9d9d9;
+    --color-sidebar: #fafafa;
+    --color-text: #404040;
+
+    /* Padding */
+    --padding-md: calc(var(--font-size) * 1.2);
+    --padding-sm: calc(var(--font-size) * 0.6);
+    --padding-xs: calc(var(--font-size) * 0.4);
+    --padding-xxs: calc(var(--font-size) * 0.2);
+    --padding-lg: calc(var(--font-size) * 2.5);
+    --padding-xl: calc(var(--font-size) * 5);
+
+    /* Wrapper */
+    --line-height-md: calc(var(--font-size) * 3.6);
+    --line-height-sm: calc(var(--font-size) * 2.88);
+    --line-height-xs: calc(var(--font-size) * 2.448);
+    --line-height-xxs: calc(var(--font-size) * 2.08);
+
+    /* Breakpoints */
+    --breakpoint-lg: 1100px;
+    --breakpoint-md: 880px;
+    --breakpoint-sm: 660px;
+
+    /* Radius */
+    --radius-sm: calc(var(--font-size) * 0.2);
+    --radius-md: calc(var(--font-size) * 0.3);
+
+    /* Scrollbars */
+    --scrollbar-width: calc(var(--font-size) * 0.6);
+
+    /* Modals */
+    --modal-width: calc(var(--font-size) * 60);
+    --modal-width-wide: calc(var(--font-size) * 70);
+    --modal-width-skinny: calc(var(--font-size) * 30);
+
+    /* Other */
+    --drag-width: calc(var(--font-size) * 0.5);
+    --height-nav: var(--line-height-md);
+  }
+</style>
+
+<style data-theme-name="studio-light">
+  [theme='studio-light'],
+  [subtheme='studio-light'] {
+    /* Background */
+    --color-bg: rgb(255, 255, 255);
+    --color-bg-rgb: 255, 255, 255;
+    --color-success: rgb(61, 156, 98);
+    --color-success-rgb: 61, 156, 98;
+    --color-notice: rgb(187, 151, 0);
+    --color-notice-rgb: 187, 151, 0;
+    --color-warning: rgb(214, 128, 62);
+    --color-warning-rgb: 214, 128, 62;
+    --color-danger: rgb(218, 91, 86);
+    --color-danger-rgb: 218, 91, 86;
+    --color-surprise: rgb(132, 103, 195);
+    --color-surprise-rgb: 132, 103, 195;
+    --color-info: rgb(0, 48, 82);
+    --color-info-rgb: 0, 48, 82;
+
+    /* Foreground */
+    --color-font: rgb(85, 85, 85);
+    --color-font-rgb: 85, 85, 85;
+    --color-font-success: rgb(255, 255, 255);
+    --color-font-success-rgb: 255, 255, 255;
+    --color-font-notice: rgb(255, 255, 255);
+    --color-font-notice-rgb: 255, 255, 255;
+    --color-font-warning: rgb(255, 255, 255);
+    --color-font-warning-rgb: 255, 255, 255;
+    --color-font-danger: rgb(255, 255, 255);
+    --color-font-danger-rgb: 255, 255, 255;
+    --color-font-surprise: rgb(255, 255, 255);
+    --color-font-surprise-rgb: 255, 255, 255;
+    --color-font-info: rgb(255, 255, 255);
+    --color-font-info-rgb: 255, 255, 255;
+
+    /* Highlight */
+    --hl: rgb(130, 130, 130);
+    --hl-rgb: 130, 130, 130;
+    --hl-xxs: rgba(130, 130, 130, 0.05);
+    --hl-xxs-rgb: 130, 130, 130, 0.05;
+    --hl-xs: rgba(130, 130, 130, 0.1);
+    --hl-xs-rgb: 130, 130, 130, 0.1;
+    --hl-sm: rgba(130, 130, 130, 0.25);
+    --hl-sm-rgb: 130, 130, 130, 0.25;
+    --hl-md: rgba(130, 130, 130, 0.35);
+    --hl-md-rgb: 130, 130, 130, 0.35;
+    --hl-lg: rgba(130, 130, 130, 0.5);
+    --hl-lg-rgb: 130, 130, 130, 0.5;
+    --hl-xl: rgba(130, 130, 130, 0.8);
+    --hl-xl-rgb: 130, 130, 130, 0.8;
+  }
+
+  [theme='studio-light'] .theme--activity-bar,
+  [subtheme='studio-light'] .theme--activity-bar--sub {
+    /* Background */
+    --color-bg: rgb(0, 48, 82);
+    --color-bg-rgb: 0, 48, 82;
+
+    /* Foreground */
+    --color-font: rgb(255, 255, 255);
+    --color-font-rgb: 255, 255, 255;
+
+    /* Highlight */
+    --hl: rgb(23, 130, 207);
+    --hl-rgb: 23, 130, 207;
+    --hl-xxs: rgba(23, 130, 207, 0.05);
+    --hl-xxs-rgb: 23, 130, 207, 0.05;
+    --hl-xs: rgba(23, 130, 207, 0.1);
+    --hl-xs-rgb: 23, 130, 207, 0.1;
+    --hl-sm: rgba(23, 130, 207, 0.2);
+    --hl-sm-rgb: 23, 130, 207, 0.2;
+    --hl-md: rgba(23, 130, 207, 0.3);
+    --hl-md-rgb: 23, 130, 207, 0.3;
+    --hl-lg: rgba(23, 130, 207, 0.5);
+    --hl-lg-rgb: 23, 130, 207, 0.5;
+    --hl-xl: rgba(23, 130, 207, 0.8);
+    --hl-xl-rgb: 23, 130, 207, 0.8;
+  }
+
+  [theme='studio-light'] .theme--dropdown__menu,
+  [subtheme='studio-light'] .theme--dropdown__menu--sub {
+    /* Background */
+    --color-info: rgb(0, 91, 158);
+    --color-info-rgb: 0, 91, 158;
+  }
+
+  [theme='studio-light'] .theme--tooltip,
+  [subtheme='studio-light'] .theme--tooltip--sub {
+    /* Background */
+    --color-info: rgb(0, 91, 158);
+    --color-info-rgb: 0, 91, 158;
+  }
+
+  [theme='studio-light'] .theme--transparent-overlay,
+  [subtheme='studio-light'] .theme--transparent-overlay--sub {
+    /* Background */
+    --color-bg: rgba(230, 240, 250, 0.8);
+    --color-bg-rgb: 230, 240, 250, 0.8;
+
+    /* Foreground */
+    --color-font: rgb(85, 85, 85);
+    --color-font-rgb: 85, 85, 85;
+  }
+
+  [theme='studio-light'] .theme--dialog,
+  [subtheme='studio-light'] .theme--dialog--sub {
+    /* Background */
+    --color-info: rgb(0, 91, 158);
+    --color-info-rgb: 0, 91, 158;
+  }
+
+  [theme='studio-light'] .theme--sidebar,
+  [subtheme='studio-light'] .theme--sidebar--sub {
+    /* Background */
+    --color-bg: rgb(247, 250, 252);
+    --color-bg-rgb: 247, 250, 252;
+    --color-success: rgb(80, 161, 79);
+    --color-success-rgb: 80, 161, 79;
+    --color-notice: rgb(193, 132, 1);
+    --color-notice-rgb: 193, 132, 1;
+    --color-warning: rgb(193, 132, 1);
+    --color-warning-rgb: 193, 132, 1;
+    --color-danger: rgb(228, 86, 73);
+    --color-danger-rgb: 228, 86, 73;
+    --color-surprise: rgb(166, 38, 164);
+    --color-surprise-rgb: 166, 38, 164;
+    --color-info: rgb(1, 132, 188);
+    --color-info-rgb: 1, 132, 188;
+
+    /* Foreground */
+    --color-font: rgb(68, 68, 68);
+    --color-font-rgb: 68, 68, 68;
+
+    /* Highlight */
+  }
+
+  [theme='studio-light'] .theme--link,
+  [subtheme='studio-light'] .theme--link--sub {
+    /* Foreground */
+    --color-font: rgb(104, 169, 162);
+    --color-font-rgb: 104, 169, 162;
+  }
+
+  [theme='studio-light'] .theme--editor,
+  [subtheme='studio-light'] .theme--editor--sub {
+    /* Background */
+    --color-surprise: rgb(0, 48, 82);
+    --color-surprise-rgb: 0, 48, 82;
+    --color-info: rgb(132, 103, 195);
+    --color-info-rgb: 132, 103, 195;
+  }
+
+  [theme='studio-light'] .CodeMirror-info,
+  [subtheme='studio-light'] .CodeMirror-info--sub {
+    /* Background */
+    --color-info: rgb(0, 91, 158);
+    --color-info-rgb: 0, 91, 158;
+  }
+
+  [theme='studio-light'] .theme--activity-bar,
+  [subtheme='studio-light'] .theme--activity-bar--sub {
+    /* Background */
+    --color-bg: rgb(0, 48, 82);
+    --color-bg-rgb: 0, 48, 82;
+
+    /* Foreground */
+    --color-font: rgb(255, 255, 255);
+    --color-font-rgb: 255, 255, 255;
+
+    /* Highlight */
+    --hl: rgb(23, 130, 207);
+    --hl-rgb: 23, 130, 207;
+    --hl-xxs: rgba(23, 130, 207, 0.05);
+    --hl-xxs-rgb: 23, 130, 207, 0.05;
+    --hl-xs: rgba(23, 130, 207, 0.1);
+    --hl-xs-rgb: 23, 130, 207, 0.1;
+    --hl-sm: rgba(23, 130, 207, 0.2);
+    --hl-sm-rgb: 23, 130, 207, 0.2;
+    --hl-md: rgba(23, 130, 207, 0.3);
+    --hl-md-rgb: 23, 130, 207, 0.3;
+    --hl-lg: rgba(23, 130, 207, 0.5);
+    --hl-lg-rgb: 23, 130, 207, 0.5;
+    --hl-xl: rgba(23, 130, 207, 0.8);
+    --hl-xl-rgb: 23, 130, 207, 0.8;
+  }
+
+  [theme='studio-light'] .theme--dropdown__menu,
+  [subtheme='studio-light'] .theme--dropdown__menu--sub {
+    /* Background */
+    --color-info: rgb(0, 91, 158);
+    --color-info-rgb: 0, 91, 158;
+  }
+
+  [theme='studio-light'] .theme--tooltip,
+  [subtheme='studio-light'] .theme--tooltip--sub {
+    /* Background */
+    --color-info: rgb(0, 91, 158);
+    --color-info-rgb: 0, 91, 158;
+  }
+
+  [theme='studio-light'] .theme--transparent-overlay,
+  [subtheme='studio-light'] .theme--transparent-overlay--sub {
+    /* Background */
+    --color-bg: rgba(230, 240, 250, 0.8);
+    --color-bg-rgb: 230, 240, 250, 0.8;
+
+    /* Foreground */
+    --color-font: rgb(85, 85, 85);
+    --color-font-rgb: 85, 85, 85;
+  }
+
+  [theme='studio-light'] .theme--dialog,
+  [subtheme='studio-light'] .theme--dialog--sub {
+    /* Background */
+    --color-info: rgb(0, 91, 158);
+    --color-info-rgb: 0, 91, 158;
+  }
+
+  [theme='studio-light'] .theme--sidebar,
+  [subtheme='studio-light'] .theme--sidebar--sub {
+    /* Background */
+    --color-bg: rgb(247, 250, 252);
+    --color-bg-rgb: 247, 250, 252;
+    --color-success: rgb(80, 161, 79);
+    --color-success-rgb: 80, 161, 79;
+    --color-notice: rgb(193, 132, 1);
+    --color-notice-rgb: 193, 132, 1;
+    --color-warning: rgb(193, 132, 1);
+    --color-warning-rgb: 193, 132, 1;
+    --color-danger: rgb(228, 86, 73);
+    --color-danger-rgb: 228, 86, 73;
+    --color-surprise: rgb(166, 38, 164);
+    --color-surprise-rgb: 166, 38, 164;
+    --color-info: rgb(1, 132, 188);
+    --color-info-rgb: 1, 132, 188;
+
+    /* Foreground */
+    --color-font: rgb(68, 68, 68);
+    --color-font-rgb: 68, 68, 68;
+
+    /* Highlight */
+  }
+
+  [theme='studio-light'] .theme--link,
+  [subtheme='studio-light'] .theme--link--sub {
+    /* Foreground */
+    --color-font: rgb(104, 169, 162);
+    --color-font-rgb: 104, 169, 162;
+  }
+
+  [theme='studio-light'] .theme--editor,
+  [subtheme='studio-light'] .theme--editor--sub {
+    /* Background */
+    --color-surprise: rgb(0, 48, 82);
+    --color-surprise-rgb: 0, 48, 82;
+    --color-info: rgb(132, 103, 195);
+    --color-info-rgb: 132, 103, 195;
+  }
+
+  [theme='studio-light'] .CodeMirror-info,
+  [subtheme='studio-light'] .CodeMirror-info--sub {
+    /* Background */
+    --color-info: rgb(0, 91, 158);
+    --color-info-rgb: 0, 91, 158;
+  }
+
+  <style data-theme-name='studio-colorful' > [theme='studio-colorful'],
+  [subtheme='studio-colorful'] {
+    /* Background */
+    --color-bg: rgb(0, 48, 82);
+    --color-bg-rgb: 0, 48, 82;
+    --color-success: rgb(105, 199, 144);
+    --color-success-rgb: 105, 199, 144;
+    --color-notice: rgb(237, 203, 2);
+    --color-notice-rgb: 237, 203, 2;
+    --color-warning: rgb(232, 156, 66);
+    --color-warning-rgb: 232, 156, 66;
+    --color-danger: rgb(239, 110, 110);
+    --color-danger-rgb: 239, 110, 110;
+    --color-surprise: rgb(191, 163, 249);
+    --color-surprise-rgb: 191, 163, 249;
+    --color-info: rgb(106, 199, 230);
+    --color-info-rgb: 106, 199, 230;
+
+    /* Foreground */
+    --color-font: rgb(230, 239, 245);
+    --color-font-rgb: 230, 239, 245;
+    --color-font-success: rgb(255, 255, 255);
+    --color-font-success-rgb: 255, 255, 255;
+    --color-font-notice: rgb(255, 255, 255);
+    --color-font-notice-rgb: 255, 255, 255;
+    --color-font-warning: rgb(255, 255, 255);
+    --color-font-warning-rgb: 255, 255, 255;
+    --color-font-danger: rgb(255, 255, 255);
+    --color-font-danger-rgb: 255, 255, 255;
+    --color-font-surprise: rgb(255, 255, 255);
+    --color-font-surprise-rgb: 255, 255, 255;
+    --color-font-info: rgb(255, 255, 255);
+    --color-font-info-rgb: 255, 255, 255;
+
+    /* Highlight */
+    --hl: rgb(133, 157, 176);
+    --hl-rgb: 133, 157, 176;
+    --hl-xxs: rgba(133, 157, 176, 0.05);
+    --hl-xxs-rgb: 133, 157, 176, 0.05;
+    --hl-xs: rgba(133, 157, 176, 0.1);
+    --hl-xs-rgb: 133, 157, 176, 0.1;
+    --hl-sm: rgba(133, 157, 176, 0.2);
+    --hl-sm-rgb: 133, 157, 176, 0.2;
+    --hl-md: rgba(133, 157, 176, 0.3);
+    --hl-md-rgb: 133, 157, 176, 0.3;
+    --hl-lg: rgba(133, 157, 176, 0.5);
+    --hl-lg-rgb: 133, 157, 176, 0.5;
+    --hl-xl: rgba(133, 157, 176, 0.8);
+    --hl-xl-rgb: 133, 157, 176, 0.8;
+  }
+
+  [theme='studio-colorful'] .theme--activity-bar,
+  [subtheme='studio-colorful'] .theme--activity-bar--sub {
+    /* Background */
+    --color-bg: rgb(0, 69, 114);
+    --color-bg-rgb: 0, 69, 114;
+
+    /* Foreground */
+    --color-font: rgb(255, 255, 255);
+    --color-font-rgb: 255, 255, 255;
+
+    /* Highlight */
+    --hl: rgb(23, 130, 207);
+    --hl-rgb: 23, 130, 207;
+    --hl-xxs: rgba(23, 130, 207, 0.05);
+    --hl-xxs-rgb: 23, 130, 207, 0.05;
+    --hl-xs: rgba(23, 130, 207, 0.1);
+    --hl-xs-rgb: 23, 130, 207, 0.1;
+    --hl-sm: rgba(23, 130, 207, 0.2);
+    --hl-sm-rgb: 23, 130, 207, 0.2;
+    --hl-md: rgba(23, 130, 207, 0.3);
+    --hl-md-rgb: 23, 130, 207, 0.3;
+    --hl-lg: rgba(23, 130, 207, 0.5);
+    --hl-lg-rgb: 23, 130, 207, 0.5;
+    --hl-xl: rgba(23, 130, 207, 0.8);
+    --hl-xl-rgb: 23, 130, 207, 0.8;
+  }
+
+  [theme='studio-colorful'] .theme--dropdown__menu,
+  [subtheme='studio-colorful'] .theme--dropdown__menu--sub {
+    /* Background */
+    --color-bg: rgb(0, 70, 114);
+    --color-bg-rgb: 0, 70, 114;
+  }
+
+  [theme='studio-colorful'] .theme--tooltip,
+  [subtheme='studio-colorful'] .theme--tooltip--sub {
+    /* Background */
+    --color-bg: rgb(0, 70, 114);
+    --color-bg-rgb: 0, 70, 114;
+  }
+
+  [theme='studio-colorful'] .theme--transparent-overlay,
+  [subtheme='studio-colorful'] .theme--transparent-overlay--sub {
+    /* Background */
+    --color-bg: rgba(0, 37, 64, 0.8);
+    --color-bg-rgb: 0, 37, 64, 0.8;
+  }
+
+  [theme='studio-colorful'] .theme--dialog,
+  [subtheme='studio-colorful'] .theme--dialog--sub {
+    /* Background */
+    --color-bg: rgb(0, 70, 114);
+    --color-bg-rgb: 0, 70, 114;
+  }
+
+  [theme='studio-colorful'] .theme--sidebar,
+  [subtheme='studio-colorful'] .theme--sidebar--sub {
+    /* Background */
+    --color-bg: rgb(0, 57, 97);
+    --color-bg-rgb: 0, 57, 97;
+
+    /* Foreground */
+    --color-font: rgb(255, 255, 255);
+    --color-font-rgb: 255, 255, 255;
+  }
+
+  [theme='studio-colorful'] .theme--link,
+  [subtheme='studio-colorful'] .theme--link--sub {
+    /* Foreground */
+    --color-font: rgb(104, 169, 162);
+    --color-font-rgb: 104, 169, 162;
+  }
+
+  [theme='studio-colorful'] .CodeMirror-info,
+  [subtheme='studio-colorful'] .CodeMirror-info--sub {
+    /* Background */
+    --color-bg: rgb(0, 70, 114);
+    --color-bg-rgb: 0, 70, 114;
+  }
+
+  [theme='studio-light'] .theme--pane__header,
+  [subtheme='studio-light'] .theme--pane__header--sub {
+    /* Background */
+    --color-bg: rgb(240, 249, 255);
+    --color-bg-rgb: 240, 249, 255;
+  }
+
+  [theme='studio-light'] .theme--sidebar,
+  [subtheme='studio-light'] .theme--sidebar--sub {
+    /* Background */
+    --color-bg: rgb(0, 60, 102);
+    --color-bg-rgb: 0, 60, 102;
+    --color-success: rgb(116, 212, 156);
+    --color-success-rgb: 116, 212, 156;
+    --color-notice: rgb(255, 219, 2);
+    --color-notice-rgb: 255, 219, 2;
+    --color-warning: rgb(255, 172, 73);
+    --color-warning-rgb: 255, 172, 73;
+    --color-danger: rgb(255, 117, 117);
+    --color-danger-rgb: 255, 117, 117;
+    --color-surprise: rgb(191, 163, 249);
+    --color-surprise-rgb: 191, 163, 249;
+    --color-info: rgb(117, 221, 255);
+    --color-info-rgb: 117, 221, 255;
+
+    /* Foreground */
+    --color-font: rgb(255, 255, 255);
+    --color-font-rgb: 255, 255, 255;
+
+    /* Highlight */
+    --hl: rgb(133, 157, 176);
+    --hl-rgb: 133, 157, 176;
+    --hl-xxs: rgba(133, 157, 176, 0.05);
+    --hl-xxs-rgb: 133, 157, 176, 0.05;
+    --hl-xs: rgba(133, 157, 176, 0.1);
+    --hl-xs-rgb: 133, 157, 176, 0.1;
+    --hl-sm: rgba(133, 157, 176, 0.2);
+    --hl-sm-rgb: 133, 157, 176, 0.2;
+    --hl-md: rgba(133, 157, 176, 0.3);
+    --hl-md-rgb: 133, 157, 176, 0.3;
+    --hl-lg: rgba(133, 157, 176, 0.5);
+    --hl-lg-rgb: 133, 157, 176, 0.5;
+    --hl-xl: rgba(133, 157, 176, 0.8);
+    --hl-xl-rgb: 133, 157, 176, 0.8;
+  }
+
+  [theme='studio-light'] .theme--sidebar__header,
+  [subtheme='studio-light'] .theme--sidebar__header--sub {
+    /* Foreground */
+    --color-font: rgb(255, 255, 255);
+    --color-font-rgb: 255, 255, 255;
+  }
+
+  [theme='studio-light'] .theme--link,
+  [subtheme='studio-light'] .theme--link--sub {
+    /* Foreground */
+    --color-font: rgb(104, 169, 162);
+    --color-font-rgb: 104, 169, 162;
+  }
+
+  [theme='studio-light'] .theme--editor,
+  [subtheme='studio-light'] .theme--editor--sub {
+    /* Background */
+    --color-success: rgb(61, 156, 98);
+    --color-success-rgb: 61, 156, 98;
+    --color-notice: rgb(187, 151, 0);
+    --color-notice-rgb: 187, 151, 0;
+    --color-warning: rgb(214, 136, 83);
+    --color-warning-rgb: 214, 136, 83;
+    --color-danger: rgb(230, 92, 87);
+    --color-danger-rgb: 230, 92, 87;
+    --color-surprise: rgb(0, 95, 157);
+    --color-surprise-rgb: 0, 95, 157;
+    --color-info: rgb(132, 103, 195);
+    --color-info-rgb: 132, 103, 195;
+  }
+
+  [theme='studio-light'] .CodeMirror-info,
+  [subtheme='studio-light'] .CodeMirror-info--sub {
+    /* Background */
+    --color-info: rgb(0, 91, 158);
+    --color-info-rgb: 0, 91, 158;
+  }
+</style>
diff --git a/packages/insomnia-app/app/ui/css/layout/base.less b/packages/insomnia-app/app/ui/css/layout/base.less
index 958de770049..e6e016d3728 100644
--- a/packages/insomnia-app/app/ui/css/layout/base.less
+++ b/packages/insomnia-app/app/ui/css/layout/base.less
@@ -27,16 +27,50 @@ body {
   padding: 0;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: var(--font-line-height-md);
+}
+
 h1 {
-  font-size: var(--font-size-xxl);
+  font-size: var(--font-size-xxxl);
+  font-weight: var(--font-weight-regular);
 }
 
 h2 {
-  font-size: var(--font-size-xl);
+  font-size: var(--font-size-xxl);
+  font-weight: var(--font-weight-regular);
 }
 
 h3 {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-medium);
+}
+
+h4 {
   font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+}
+
+h5 {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+}
+
+h6 {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+}
+
+p {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-lg);
 }
 
 p,
@@ -68,10 +102,6 @@ label {
   padding-top: var(--padding-xs);
 }
 
-p {
-  line-height: 1.7em;
-}
-
 ul.ul--pretty {
   list-style: disc;
   padding-left: var(--padding-lg);
diff --git a/packages/insomnia-components/.storybook/main.js b/packages/insomnia-components/.storybook/main.js
index 74322dc6c92..32ae9fbf70f 100644
--- a/packages/insomnia-components/.storybook/main.js
+++ b/packages/insomnia-components/.storybook/main.js
@@ -2,5 +2,6 @@ module.exports = {
   addons: [
     '@storybook/addon-knobs/register',
     '@storybook/addon-contexts/register',
-  ]
+    'storybook-addon-designs/register',
+  ],
 };
diff --git a/packages/insomnia-components/.storybook/preview-head.html b/packages/insomnia-components/.storybook/preview-head.html
index c13d6490f99..0c3dca1cfd4 100644
--- a/packages/insomnia-components/.storybook/preview-head.html
+++ b/packages/insomnia-components/.storybook/preview-head.html
@@ -132,9 +132,9 @@
 <style>
   html {
     --font-monospace: Menlo, Monaco, Consolas, 'Droid Sans Mono', 'Courier New', monospace,
-    'Droid Sans Fallback';
+      'Droid Sans Fallback';
     --font-default: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI',
-    'HelveticaNeue-Light', 'Ubuntu', 'Droid Sans', sans-serif;
+      'HelveticaNeue-Light', 'Ubuntu', 'Droid Sans', sans-serif;
     --font-ligatures: normal;
   }
 
@@ -171,6 +171,7 @@
     font-size: 0.8rem;
   }
 
+  html,
   body {
   }
 </style>
@@ -179,16 +180,44 @@
 <style>
   html {
     /* Font Size */
-    --font-size-xxs: 8px;
-    --font-size-xs: 10px;
+    --font-size-xxs: 10px;
+    --font-size-xs: 11px;
     --font-size-sm: 12px;
     --font-size-md: 13px;
-    --font-size-lg: 15px;
-    --font-size-xl: 19px;
-    --font-size-xxl: 21px;
-    --font-size-xxxl: 24px;
+    --font-size-lg: 14px;
+    --font-size-xl: 16px;
+    --font-size-xxl: 18px;
+    --font-size-xxxl: 22px;
     --font-size: var(--font-size-md);
 
+    /* Font Weight */
+    --font-weight-regular: 400;
+    --font-weight-medium: 600;
+    --font-weight-bold: 700;
+
+    /* Line Height */
+    --font-line-height-sm: calc(var(--font-size) * 1);
+    --font-line-height-md: calc(var(--font-size) * 1.25);
+    --font-line-height-lg: calc(var(--font-size) * 1.4);
+    --font-line-height-xl: calc(var(--font-size) * 1.75);
+    --font-line-height-xxl: calc(var(--font-size) * 2);
+    --font-line-height-xxxl: calc(var(--font-size) * 2.25);
+
+    /* Spacing */
+    --spacing-xs: calc(var(--font-size) * 0.4);
+    --spacing-sm: calc(var(--font-size) * 0.6);
+    --spacing-md: calc(var(--font-size) * 1);
+    --spacing-lg: calc(var(--font-size) * 1.25);
+    --spacing-xl: calc(var(--font-size) * 1.5);
+    --spacing-xxl: calc(var(--font-size) * 2);
+    --spacing-xxxl: calc(var(--font-size) * 3);
+    --spacing-xxxxl: calc(var(--font-size) * 4);
+
+    /* Colors */
+    --color-border: var(--hl-md);
+    --color-sidebar: var(--color-bg);
+    --color-text: var(--color-font);
+
     /* Padding */
     --padding-md: calc(var(--font-size) * 1.2);
     --padding-sm: calc(var(--font-size) * 0.6);
@@ -226,297 +255,484 @@
   }
 </style>
 
-<style data-theme-name="studio-light">[theme="studio-light"],
-[subtheme="studio-light"] {
-  /* Background */
-  --color-bg: rgb(255, 255, 255);
-  --color-bg-rgb: 255, 255, 255;
-  --color-success: rgb(61, 156, 98);
-  --color-success-rgb: 61, 156, 98;
-  --color-notice: rgb(187, 151, 0);
-  --color-notice-rgb: 187, 151, 0;
-  --color-warning: rgb(214, 128, 62);
-  --color-warning-rgb: 214, 128, 62;
-  --color-danger: rgb(218, 91, 86);
-  --color-danger-rgb: 218, 91, 86;
-  --color-surprise: rgb(96, 48, 191);
-  --color-surprise-rgb: 132, 103, 195;
-  --color-info: rgb(0, 48, 82);
-  --color-info-rgb: 0, 48, 82;
-
-  /* Foreground */
-  --color-font: rgb(85, 85, 85);
-  --color-font-rgb: 85, 85, 85;
-  --color-font-success: rgb(255, 255, 255);
-  --color-font-success-rgb: 255, 255, 255;
-  --color-font-notice: rgb(255, 255, 255);
-  --color-font-notice-rgb: 255, 255, 255;
-  --color-font-warning: rgb(255, 255, 255);
-  --color-font-warning-rgb: 255, 255, 255;
-  --color-font-danger: rgb(255, 255, 255);
-  --color-font-danger-rgb: 255, 255, 255;
-  --color-font-surprise: rgb(255, 255, 255);
-  --color-font-surprise-rgb: 255, 255, 255;
-  --color-font-info: rgb(255, 255, 255);
-  --color-font-info-rgb: 255, 255, 255;
-
-  /* Highlight */
-  --hl: rgb(130, 130, 130);
-  --hl-rgb: 130, 130, 130;
-  --hl-xxs: rgba(130, 130, 130, 0.05);
-  --hl-xxs-rgb: 130, 130, 130, 0.05;
-  --hl-xs: rgba(130, 130, 130, 0.1);
-  --hl-xs-rgb: 130, 130, 130, 0.1;
-  --hl-sm: rgba(130, 130, 130, 0.25);
-  --hl-sm-rgb: 130, 130, 130, 0.25;
-  --hl-md: rgba(130, 130, 130, 0.35);
-  --hl-md-rgb: 130, 130, 130, 0.35;
-  --hl-lg: rgba(130, 130, 130, 0.5);
-  --hl-lg-rgb: 130, 130, 130, 0.5;
-  --hl-xl: rgba(130, 130, 130, 0.8);
-  --hl-xl-rgb: 130, 130, 130, 0.8;
-}
-
-[theme="studio-light"] .theme--activity-bar,
-[subtheme="studio-light"] .theme--activity-bar--sub {
-  /* Background */
-  --color-bg: rgb(0, 48, 82);
-  --color-bg-rgb: 0, 48, 82;
-
-  /* Foreground */
-  --color-font: rgb(255, 255, 255);
-  --color-font-rgb: 255, 255, 255;
-
-  /* Highlight */
-  --hl: rgb(23, 130, 207);
-  --hl-rgb: 23, 130, 207;
-  --hl-xxs: rgba(23, 130, 207, 0.05);
-  --hl-xxs-rgb: 23, 130, 207, 0.05;
-  --hl-xs: rgba(23, 130, 207, 0.1);
-  --hl-xs-rgb: 23, 130, 207, 0.1;
-  --hl-sm: rgba(23, 130, 207, 0.2);
-  --hl-sm-rgb: 23, 130, 207, 0.2;
-  --hl-md: rgba(23, 130, 207, 0.3);
-  --hl-md-rgb: 23, 130, 207, 0.3;
-  --hl-lg: rgba(23, 130, 207, 0.5);
-  --hl-lg-rgb: 23, 130, 207, 0.5;
-  --hl-xl: rgba(23, 130, 207, 0.8);
-  --hl-xl-rgb: 23, 130, 207, 0.8;
-}
-
-[theme="studio-light"] .theme--dropdown__menu,
-[subtheme="studio-light"] .theme--dropdown__menu--sub {
-  /* Background */
-  --color-info: rgb(0, 91, 158);
-  --color-info-rgb: 0, 91, 158;
-}
-
-[theme="studio-light"] .theme--tooltip,
-[subtheme="studio-light"] .theme--tooltip--sub {
-  /* Background */
-  --color-info: rgb(0, 91, 158);
-  --color-info-rgb: 0, 91, 158;
-}
-
-[theme="studio-light"] .theme--transparent-overlay,
-[subtheme="studio-light"] .theme--transparent-overlay--sub {
-  /* Background */
-  --color-bg: rgba(230, 240, 250, 0.8);
-  --color-bg-rgb: 230, 240, 250, 0.8;
-
-  /* Foreground */
-  --color-font: rgb(85, 85, 85);
-  --color-font-rgb: 85, 85, 85;
-}
-
-[theme="studio-light"] .theme--dialog,
-[subtheme="studio-light"] .theme--dialog--sub {
-  /* Background */
-  --color-info: rgb(0, 91, 158);
-  --color-info-rgb: 0, 91, 158;
-}
-
-[theme="studio-light"] .theme--sidebar,
-[subtheme="studio-light"] .theme--sidebar--sub {
-  /* Background */
-  --color-bg: rgb(247, 250, 252);
-  --color-bg-rgb: 247, 250, 252;
-  --color-success: rgb(80, 161, 79);
-  --color-success-rgb: 80, 161, 79;
-  --color-notice: rgb(193, 132, 1);
-  --color-notice-rgb: 193, 132, 1;
-  --color-warning: rgb(193, 132, 1);
-  --color-warning-rgb: 193, 132, 1;
-  --color-danger: rgb(228, 86, 73);
-  --color-danger-rgb: 228, 86, 73;
-  --color-surprise: rgb(166, 38, 164);
-  --color-surprise-rgb: 166, 38, 164;
-  --color-info: rgb(1, 132, 188);
-  --color-info-rgb: 1, 132, 188;
-
-  /* Foreground */
-  --color-font: rgb(68, 68, 68);
-  --color-font-rgb: 68, 68, 68;
-
-  /* Highlight */
-}
-
-[theme="studio-light"] .theme--link,
-[subtheme="studio-light"] .theme--link--sub {
-  /* Foreground */
-  --color-font: rgb(104, 169, 162);
-  --color-font-rgb: 104, 169, 162;
-}
-
-[theme="studio-light"] .theme--editor,
-[subtheme="studio-light"] .theme--editor--sub {
-  /* Background */
-  --color-surprise: rgb(0, 48, 82);
-  --color-surprise-rgb: 0, 48, 82;
-  --color-info: rgb(132, 103, 195);
-  --color-info-rgb: 132, 103, 195;
-}
-
-[theme="studio-light"] .CodeMirror-info,
-[subtheme="studio-light"] .CodeMirror-info--sub {
-  /* Background */
-  --color-info: rgb(0, 91, 158);
-  --color-info-rgb: 0, 91, 158;
-}
+<style data-theme-name="studio-light">
+  [theme='studio-light'],
+  [subtheme='studio-light'] {
+    /* Background */
+    --color-bg: rgb(255, 255, 255);
+    --color-bg-rgb: 255, 255, 255;
+    --color-success: rgb(61, 156, 98);
+    --color-success-rgb: 61, 156, 98;
+    --color-notice: rgb(187, 151, 0);
+    --color-notice-rgb: 187, 151, 0;
+    --color-warning: rgb(214, 128, 62);
+    --color-warning-rgb: 214, 128, 62;
+    --color-danger: rgb(218, 91, 86);
+    --color-danger-rgb: 218, 91, 86;
+    --color-surprise: rgb(132, 103, 195);
+    --color-surprise-rgb: 132, 103, 195;
+    --color-info: rgb(0, 48, 82);
+    --color-info-rgb: 0, 48, 82;
+
+    /* Foreground */
+    --color-font: rgb(85, 85, 85);
+    --color-font-rgb: 85, 85, 85;
+    --color-font-success: rgb(255, 255, 255);
+    --color-font-success-rgb: 255, 255, 255;
+    --color-font-notice: rgb(255, 255, 255);
+    --color-font-notice-rgb: 255, 255, 255;
+    --color-font-warning: rgb(255, 255, 255);
+    --color-font-warning-rgb: 255, 255, 255;
+    --color-font-danger: rgb(255, 255, 255);
+    --color-font-danger-rgb: 255, 255, 255;
+    --color-font-surprise: rgb(255, 255, 255);
+    --color-font-surprise-rgb: 255, 255, 255;
+    --color-font-info: rgb(255, 255, 255);
+    --color-font-info-rgb: 255, 255, 255;
+
+    /* Highlight */
+    --hl: rgb(130, 130, 130);
+    --hl-rgb: 130, 130, 130;
+    --hl-xxs: rgba(130, 130, 130, 0.05);
+    --hl-xxs-rgb: 130, 130, 130, 0.05;
+    --hl-xs: rgba(130, 130, 130, 0.1);
+    --hl-xs-rgb: 130, 130, 130, 0.1;
+    --hl-sm: rgba(130, 130, 130, 0.25);
+    --hl-sm-rgb: 130, 130, 130, 0.25;
+    --hl-md: rgba(130, 130, 130, 0.35);
+    --hl-md-rgb: 130, 130, 130, 0.35;
+    --hl-lg: rgba(130, 130, 130, 0.5);
+    --hl-lg-rgb: 130, 130, 130, 0.5;
+    --hl-xl: rgba(130, 130, 130, 0.8);
+    --hl-xl-rgb: 130, 130, 130, 0.8;
+  }
 
+  [theme='studio-light'] .theme--activity-bar,
+  [subtheme='studio-light'] .theme--activity-bar--sub {
+    /* Background */
+    --color-bg: rgb(0, 48, 82);
+    --color-bg-rgb: 0, 48, 82;
+
+    /* Foreground */
+    --color-font: rgb(255, 255, 255);
+    --color-font-rgb: 255, 255, 255;
+
+    /* Highlight */
+    --hl: rgb(23, 130, 207);
+    --hl-rgb: 23, 130, 207;
+    --hl-xxs: rgba(23, 130, 207, 0.05);
+    --hl-xxs-rgb: 23, 130, 207, 0.05;
+    --hl-xs: rgba(23, 130, 207, 0.1);
+    --hl-xs-rgb: 23, 130, 207, 0.1;
+    --hl-sm: rgba(23, 130, 207, 0.2);
+    --hl-sm-rgb: 23, 130, 207, 0.2;
+    --hl-md: rgba(23, 130, 207, 0.3);
+    --hl-md-rgb: 23, 130, 207, 0.3;
+    --hl-lg: rgba(23, 130, 207, 0.5);
+    --hl-lg-rgb: 23, 130, 207, 0.5;
+    --hl-xl: rgba(23, 130, 207, 0.8);
+    --hl-xl-rgb: 23, 130, 207, 0.8;
+  }
 
-</style>
+  [theme='studio-light'] .theme--dropdown__menu,
+  [subtheme='studio-light'] .theme--dropdown__menu--sub {
+    /* Background */
+    --color-info: rgb(0, 91, 158);
+    --color-info-rgb: 0, 91, 158;
+  }
+
+  [theme='studio-light'] .theme--tooltip,
+  [subtheme='studio-light'] .theme--tooltip--sub {
+    /* Background */
+    --color-info: rgb(0, 91, 158);
+    --color-info-rgb: 0, 91, 158;
+  }
+
+  [theme='studio-light'] .theme--transparent-overlay,
+  [subtheme='studio-light'] .theme--transparent-overlay--sub {
+    /* Background */
+    --color-bg: rgba(230, 240, 250, 0.8);
+    --color-bg-rgb: 230, 240, 250, 0.8;
+
+    /* Foreground */
+    --color-font: rgb(85, 85, 85);
+    --color-font-rgb: 85, 85, 85;
+  }
+
+  [theme='studio-light'] .theme--dialog,
+  [subtheme='studio-light'] .theme--dialog--sub {
+    /* Background */
+    --color-info: rgb(0, 91, 158);
+    --color-info-rgb: 0, 91, 158;
+  }
+
+  [theme='studio-light'] .theme--sidebar,
+  [subtheme='studio-light'] .theme--sidebar--sub {
+    /* Background */
+    --color-bg: rgb(247, 250, 252);
+    --color-bg-rgb: 247, 250, 252;
+    --color-success: rgb(80, 161, 79);
+    --color-success-rgb: 80, 161, 79;
+    --color-notice: rgb(193, 132, 1);
+    --color-notice-rgb: 193, 132, 1;
+    --color-warning: rgb(193, 132, 1);
+    --color-warning-rgb: 193, 132, 1;
+    --color-danger: rgb(228, 86, 73);
+    --color-danger-rgb: 228, 86, 73;
+    --color-surprise: rgb(166, 38, 164);
+    --color-surprise-rgb: 166, 38, 164;
+    --color-info: rgb(1, 132, 188);
+    --color-info-rgb: 1, 132, 188;
+
+    /* Foreground */
+    --color-font: rgb(68, 68, 68);
+    --color-font-rgb: 68, 68, 68;
+
+    /* Highlight */
+  }
+
+  [theme='studio-light'] .theme--link,
+  [subtheme='studio-light'] .theme--link--sub {
+    /* Foreground */
+    --color-font: rgb(104, 169, 162);
+    --color-font-rgb: 104, 169, 162;
+  }
+
+  [theme='studio-light'] .theme--editor,
+  [subtheme='studio-light'] .theme--editor--sub {
+    /* Background */
+    --color-surprise: rgb(0, 48, 82);
+    --color-surprise-rgb: 0, 48, 82;
+    --color-info: rgb(132, 103, 195);
+    --color-info-rgb: 132, 103, 195;
+  }
+
+  [theme='studio-light'] .CodeMirror-info,
+  [subtheme='studio-light'] .CodeMirror-info--sub {
+    /* Background */
+    --color-info: rgb(0, 91, 158);
+    --color-info-rgb: 0, 91, 158;
+  }
+
+  [theme='studio-light'] .theme--activity-bar,
+  [subtheme='studio-light'] .theme--activity-bar--sub {
+    /* Background */
+    --color-bg: rgb(0, 48, 82);
+    --color-bg-rgb: 0, 48, 82;
+
+    /* Foreground */
+    --color-font: rgb(255, 255, 255);
+    --color-font-rgb: 255, 255, 255;
+
+    /* Highlight */
+    --hl: rgb(23, 130, 207);
+    --hl-rgb: 23, 130, 207;
+    --hl-xxs: rgba(23, 130, 207, 0.05);
+    --hl-xxs-rgb: 23, 130, 207, 0.05;
+    --hl-xs: rgba(23, 130, 207, 0.1);
+    --hl-xs-rgb: 23, 130, 207, 0.1;
+    --hl-sm: rgba(23, 130, 207, 0.2);
+    --hl-sm-rgb: 23, 130, 207, 0.2;
+    --hl-md: rgba(23, 130, 207, 0.3);
+    --hl-md-rgb: 23, 130, 207, 0.3;
+    --hl-lg: rgba(23, 130, 207, 0.5);
+    --hl-lg-rgb: 23, 130, 207, 0.5;
+    --hl-xl: rgba(23, 130, 207, 0.8);
+    --hl-xl-rgb: 23, 130, 207, 0.8;
+  }
+
+  [theme='studio-light'] .theme--dropdown__menu,
+  [subtheme='studio-light'] .theme--dropdown__menu--sub {
+    /* Background */
+    --color-info: rgb(0, 91, 158);
+    --color-info-rgb: 0, 91, 158;
+  }
+
+  [theme='studio-light'] .theme--tooltip,
+  [subtheme='studio-light'] .theme--tooltip--sub {
+    /* Background */
+    --color-info: rgb(0, 91, 158);
+    --color-info-rgb: 0, 91, 158;
+  }
+
+  [theme='studio-light'] .theme--transparent-overlay,
+  [subtheme='studio-light'] .theme--transparent-overlay--sub {
+    /* Background */
+    --color-bg: rgba(230, 240, 250, 0.8);
+    --color-bg-rgb: 230, 240, 250, 0.8;
+
+    /* Foreground */
+    --color-font: rgb(85, 85, 85);
+    --color-font-rgb: 85, 85, 85;
+  }
+
+  [theme='studio-light'] .theme--dialog,
+  [subtheme='studio-light'] .theme--dialog--sub {
+    /* Background */
+    --color-info: rgb(0, 91, 158);
+    --color-info-rgb: 0, 91, 158;
+  }
+
+  [theme='studio-light'] .theme--sidebar,
+  [subtheme='studio-light'] .theme--sidebar--sub {
+    /* Background */
+    --color-bg: rgb(247, 250, 252);
+    --color-bg-rgb: 247, 250, 252;
+    --color-success: rgb(80, 161, 79);
+    --color-success-rgb: 80, 161, 79;
+    --color-notice: rgb(193, 132, 1);
+    --color-notice-rgb: 193, 132, 1;
+    --color-warning: rgb(193, 132, 1);
+    --color-warning-rgb: 193, 132, 1;
+    --color-danger: rgb(228, 86, 73);
+    --color-danger-rgb: 228, 86, 73;
+    --color-surprise: rgb(166, 38, 164);
+    --color-surprise-rgb: 166, 38, 164;
+    --color-info: rgb(1, 132, 188);
+    --color-info-rgb: 1, 132, 188;
+
+    /* Foreground */
+    --color-font: rgb(68, 68, 68);
+    --color-font-rgb: 68, 68, 68;
+
+    /* Highlight */
+  }
 
-<style data-theme-name="studio-colorful">[theme="studio-colorful"],
-[subtheme="studio-colorful"] {
-  /* Background */
-  --color-bg: rgb(0, 48, 82);
-  --color-bg-rgb: 0, 48, 82;
-  --color-success: rgb(105, 199, 144);
-  --color-success-rgb: 105, 199, 144;
-  --color-notice: rgb(237, 203, 2);
-  --color-notice-rgb: 237, 203, 2;
-  --color-warning: rgb(232, 156, 66);
-  --color-warning-rgb: 232, 156, 66;
-  --color-danger: rgb(239, 110, 110);
-  --color-danger-rgb: 239, 110, 110;
-  --color-surprise: rgb(191, 163, 249);
-  --color-surprise-rgb: 191, 163, 249;
-  --color-info: rgb(106, 199, 230);
-  --color-info-rgb: 106, 199, 230;
-
-  /* Foreground */
-  --color-font: rgb(230, 239, 245);
-  --color-font-rgb: 230, 239, 245;
-  --color-font-success: rgb(255, 255, 255);
-  --color-font-success-rgb: 255, 255, 255;
-  --color-font-notice: rgb(255, 255, 255);
-  --color-font-notice-rgb: 255, 255, 255;
-  --color-font-warning: rgb(255, 255, 255);
-  --color-font-warning-rgb: 255, 255, 255;
-  --color-font-danger: rgb(255, 255, 255);
-  --color-font-danger-rgb: 255, 255, 255;
-  --color-font-surprise: rgb(255, 255, 255);
-  --color-font-surprise-rgb: 255, 255, 255;
-  --color-font-info: rgb(255, 255, 255);
-  --color-font-info-rgb: 255, 255, 255;
-
-  /* Highlight */
-  --hl: rgb(133, 157, 176);
-  --hl-rgb: 133, 157, 176;
-  --hl-xxs: rgba(133, 157, 176, 0.05);
-  --hl-xxs-rgb: 133, 157, 176, 0.05;
-  --hl-xs: rgba(133, 157, 176, 0.1);
-  --hl-xs-rgb: 133, 157, 176, 0.1;
-  --hl-sm: rgba(133, 157, 176, 0.2);
-  --hl-sm-rgb: 133, 157, 176, 0.2;
-  --hl-md: rgba(133, 157, 176, 0.3);
-  --hl-md-rgb: 133, 157, 176, 0.3;
-  --hl-lg: rgba(133, 157, 176, 0.5);
-  --hl-lg-rgb: 133, 157, 176, 0.5;
-  --hl-xl: rgba(133, 157, 176, 0.8);
-  --hl-xl-rgb: 133, 157, 176, 0.8;
-}
-
-[theme="studio-colorful"] .theme--activity-bar,
-[subtheme="studio-colorful"] .theme--activity-bar--sub {
-  /* Background */
-  --color-bg: rgb(0, 69, 114);
-  --color-bg-rgb: 0, 69, 114;
-
-  /* Foreground */
-  --color-font: rgb(255, 255, 255);
-  --color-font-rgb: 255, 255, 255;
-
-  /* Highlight */
-  --hl: rgb(23, 130, 207);
-  --hl-rgb: 23, 130, 207;
-  --hl-xxs: rgba(23, 130, 207, 0.05);
-  --hl-xxs-rgb: 23, 130, 207, 0.05;
-  --hl-xs: rgba(23, 130, 207, 0.1);
-  --hl-xs-rgb: 23, 130, 207, 0.1;
-  --hl-sm: rgba(23, 130, 207, 0.2);
-  --hl-sm-rgb: 23, 130, 207, 0.2;
-  --hl-md: rgba(23, 130, 207, 0.3);
-  --hl-md-rgb: 23, 130, 207, 0.3;
-  --hl-lg: rgba(23, 130, 207, 0.5);
-  --hl-lg-rgb: 23, 130, 207, 0.5;
-  --hl-xl: rgba(23, 130, 207, 0.8);
-  --hl-xl-rgb: 23, 130, 207, 0.8;
-}
-
-[theme="studio-colorful"] .theme--dropdown__menu,
-[subtheme="studio-colorful"] .theme--dropdown__menu--sub {
-  /* Background */
-  --color-bg: rgb(0, 70, 114);
-  --color-bg-rgb: 0, 70, 114;
-}
-
-[theme="studio-colorful"] .theme--tooltip,
-[subtheme="studio-colorful"] .theme--tooltip--sub {
-  /* Background */
-  --color-bg: rgb(0, 70, 114);
-  --color-bg-rgb: 0, 70, 114;
-}
-
-[theme="studio-colorful"] .theme--transparent-overlay,
-[subtheme="studio-colorful"] .theme--transparent-overlay--sub {
-  /* Background */
-  --color-bg: rgba(0, 37, 64, 0.8);
-  --color-bg-rgb: 0, 37, 64, 0.8;
-}
-
-[theme="studio-colorful"] .theme--dialog,
-[subtheme="studio-colorful"] .theme--dialog--sub {
-  /* Background */
-  --color-bg: rgb(0, 70, 114);
-  --color-bg-rgb: 0, 70, 114;
-}
-
-[theme="studio-colorful"] .theme--sidebar,
-[subtheme="studio-colorful"] .theme--sidebar--sub {
-  /* Background */
-  --color-bg: rgb(0, 57, 97);
-  --color-bg-rgb: 0, 57, 97;
-
-  /* Foreground */
-  --color-font: rgb(255, 255, 255);
-  --color-font-rgb: 255, 255, 255;
-}
-
-[theme="studio-colorful"] .theme--link,
-[subtheme="studio-colorful"] .theme--link--sub {
-  /* Foreground */
-  --color-font: rgb(104, 169, 162);
-  --color-font-rgb: 104, 169, 162;
-}
-
-[theme="studio-colorful"] .CodeMirror-info,
-[subtheme="studio-colorful"] .CodeMirror-info--sub {
-  /* Background */
-  --color-bg: rgb(0, 70, 114);
-  --color-bg-rgb: 0, 70, 114;
-}
+  [theme='studio-light'] .theme--link,
+  [subtheme='studio-light'] .theme--link--sub {
+    /* Foreground */
+    --color-font: rgb(104, 169, 162);
+    --color-font-rgb: 104, 169, 162;
+  }
+
+  [theme='studio-light'] .theme--editor,
+  [subtheme='studio-light'] .theme--editor--sub {
+    /* Background */
+    --color-surprise: rgb(0, 48, 82);
+    --color-surprise-rgb: 0, 48, 82;
+    --color-info: rgb(132, 103, 195);
+    --color-info-rgb: 132, 103, 195;
+  }
+
+  [theme='studio-light'] .CodeMirror-info,
+  [subtheme='studio-light'] .CodeMirror-info--sub {
+    /* Background */
+    --color-info: rgb(0, 91, 158);
+    --color-info-rgb: 0, 91, 158;
+  }
+
+  <style data-theme-name='studio-colorful' > [theme='studio-colorful'],
+  [subtheme='studio-colorful'] {
+    /* Background */
+    --color-bg: rgb(0, 48, 82);
+    --color-bg-rgb: 0, 48, 82;
+    --color-success: rgb(105, 199, 144);
+    --color-success-rgb: 105, 199, 144;
+    --color-notice: rgb(237, 203, 2);
+    --color-notice-rgb: 237, 203, 2;
+    --color-warning: rgb(232, 156, 66);
+    --color-warning-rgb: 232, 156, 66;
+    --color-danger: rgb(239, 110, 110);
+    --color-danger-rgb: 239, 110, 110;
+    --color-surprise: rgb(191, 163, 249);
+    --color-surprise-rgb: 191, 163, 249;
+    --color-info: rgb(106, 199, 230);
+    --color-info-rgb: 106, 199, 230;
+
+    /* Foreground */
+    --color-font: rgb(230, 239, 245);
+    --color-font-rgb: 230, 239, 245;
+    --color-font-success: rgb(255, 255, 255);
+    --color-font-success-rgb: 255, 255, 255;
+    --color-font-notice: rgb(255, 255, 255);
+    --color-font-notice-rgb: 255, 255, 255;
+    --color-font-warning: rgb(255, 255, 255);
+    --color-font-warning-rgb: 255, 255, 255;
+    --color-font-danger: rgb(255, 255, 255);
+    --color-font-danger-rgb: 255, 255, 255;
+    --color-font-surprise: rgb(255, 255, 255);
+    --color-font-surprise-rgb: 255, 255, 255;
+    --color-font-info: rgb(255, 255, 255);
+    --color-font-info-rgb: 255, 255, 255;
+
+    /* Highlight */
+    --hl: rgb(133, 157, 176);
+    --hl-rgb: 133, 157, 176;
+    --hl-xxs: rgba(133, 157, 176, 0.05);
+    --hl-xxs-rgb: 133, 157, 176, 0.05;
+    --hl-xs: rgba(133, 157, 176, 0.1);
+    --hl-xs-rgb: 133, 157, 176, 0.1;
+    --hl-sm: rgba(133, 157, 176, 0.2);
+    --hl-sm-rgb: 133, 157, 176, 0.2;
+    --hl-md: rgba(133, 157, 176, 0.3);
+    --hl-md-rgb: 133, 157, 176, 0.3;
+    --hl-lg: rgba(133, 157, 176, 0.5);
+    --hl-lg-rgb: 133, 157, 176, 0.5;
+    --hl-xl: rgba(133, 157, 176, 0.8);
+    --hl-xl-rgb: 133, 157, 176, 0.8;
+  }
+
+  [theme='studio-colorful'] .theme--activity-bar,
+  [subtheme='studio-colorful'] .theme--activity-bar--sub {
+    /* Background */
+    --color-bg: rgb(0, 69, 114);
+    --color-bg-rgb: 0, 69, 114;
+
+    /* Foreground */
+    --color-font: rgb(255, 255, 255);
+    --color-font-rgb: 255, 255, 255;
+
+    /* Highlight */
+    --hl: rgb(23, 130, 207);
+    --hl-rgb: 23, 130, 207;
+    --hl-xxs: rgba(23, 130, 207, 0.05);
+    --hl-xxs-rgb: 23, 130, 207, 0.05;
+    --hl-xs: rgba(23, 130, 207, 0.1);
+    --hl-xs-rgb: 23, 130, 207, 0.1;
+    --hl-sm: rgba(23, 130, 207, 0.2);
+    --hl-sm-rgb: 23, 130, 207, 0.2;
+    --hl-md: rgba(23, 130, 207, 0.3);
+    --hl-md-rgb: 23, 130, 207, 0.3;
+    --hl-lg: rgba(23, 130, 207, 0.5);
+    --hl-lg-rgb: 23, 130, 207, 0.5;
+    --hl-xl: rgba(23, 130, 207, 0.8);
+    --hl-xl-rgb: 23, 130, 207, 0.8;
+  }
+
+  [theme='studio-colorful'] .theme--dropdown__menu,
+  [subtheme='studio-colorful'] .theme--dropdown__menu--sub {
+    /* Background */
+    --color-bg: rgb(0, 70, 114);
+    --color-bg-rgb: 0, 70, 114;
+  }
+
+  [theme='studio-colorful'] .theme--tooltip,
+  [subtheme='studio-colorful'] .theme--tooltip--sub {
+    /* Background */
+    --color-bg: rgb(0, 70, 114);
+    --color-bg-rgb: 0, 70, 114;
+  }
+
+  [theme='studio-colorful'] .theme--transparent-overlay,
+  [subtheme='studio-colorful'] .theme--transparent-overlay--sub {
+    /* Background */
+    --color-bg: rgba(0, 37, 64, 0.8);
+    --color-bg-rgb: 0, 37, 64, 0.8;
+  }
+
+  [theme='studio-colorful'] .theme--dialog,
+  [subtheme='studio-colorful'] .theme--dialog--sub {
+    /* Background */
+    --color-bg: rgb(0, 70, 114);
+    --color-bg-rgb: 0, 70, 114;
+  }
 
+  [theme='studio-colorful'] .theme--sidebar,
+  [subtheme='studio-colorful'] .theme--sidebar--sub {
+    /* Background */
+    --color-bg: rgb(0, 57, 97);
+    --color-bg-rgb: 0, 57, 97;
 
+    /* Foreground */
+    --color-font: rgb(255, 255, 255);
+    --color-font-rgb: 255, 255, 255;
+  }
+
+  [theme='studio-colorful'] .theme--link,
+  [subtheme='studio-colorful'] .theme--link--sub {
+    /* Foreground */
+    --color-font: rgb(104, 169, 162);
+    --color-font-rgb: 104, 169, 162;
+  }
+
+  [theme='studio-colorful'] .CodeMirror-info,
+  [subtheme='studio-colorful'] .CodeMirror-info--sub {
+    /* Background */
+    --color-bg: rgb(0, 70, 114);
+    --color-bg-rgb: 0, 70, 114;
+  }
+
+  [theme='studio-light'] .theme--pane__header,
+  [subtheme='studio-light'] .theme--pane__header--sub {
+    /* Background */
+    --color-bg: rgb(240, 249, 255);
+    --color-bg-rgb: 240, 249, 255;
+  }
+
+  [theme='studio-light'] .theme--sidebar,
+  [subtheme='studio-light'] .theme--sidebar--sub {
+    /* Background */
+    --color-bg: rgb(0, 60, 102);
+    --color-bg-rgb: 0, 60, 102;
+    --color-success: rgb(116, 212, 156);
+    --color-success-rgb: 116, 212, 156;
+    --color-notice: rgb(255, 219, 2);
+    --color-notice-rgb: 255, 219, 2;
+    --color-warning: rgb(255, 172, 73);
+    --color-warning-rgb: 255, 172, 73;
+    --color-danger: rgb(255, 117, 117);
+    --color-danger-rgb: 255, 117, 117;
+    --color-surprise: rgb(191, 163, 249);
+    --color-surprise-rgb: 191, 163, 249;
+    --color-info: rgb(117, 221, 255);
+    --color-info-rgb: 117, 221, 255;
+
+    /* Foreground */
+    --color-font: rgb(255, 255, 255);
+    --color-font-rgb: 255, 255, 255;
+
+    /* Highlight */
+    --hl: rgb(133, 157, 176);
+    --hl-rgb: 133, 157, 176;
+    --hl-xxs: rgba(133, 157, 176, 0.05);
+    --hl-xxs-rgb: 133, 157, 176, 0.05;
+    --hl-xs: rgba(133, 157, 176, 0.1);
+    --hl-xs-rgb: 133, 157, 176, 0.1;
+    --hl-sm: rgba(133, 157, 176, 0.2);
+    --hl-sm-rgb: 133, 157, 176, 0.2;
+    --hl-md: rgba(133, 157, 176, 0.3);
+    --hl-md-rgb: 133, 157, 176, 0.3;
+    --hl-lg: rgba(133, 157, 176, 0.5);
+    --hl-lg-rgb: 133, 157, 176, 0.5;
+    --hl-xl: rgba(133, 157, 176, 0.8);
+    --hl-xl-rgb: 133, 157, 176, 0.8;
+  }
+
+  [theme='studio-light'] .theme--sidebar__header,
+  [subtheme='studio-light'] .theme--sidebar__header--sub {
+    /* Foreground */
+    --color-font: rgb(255, 255, 255);
+    --color-font-rgb: 255, 255, 255;
+  }
+
+  [theme='studio-light'] .theme--link,
+  [subtheme='studio-light'] .theme--link--sub {
+    /* Foreground */
+    --color-font: rgb(104, 169, 162);
+    --color-font-rgb: 104, 169, 162;
+  }
+
+  [theme='studio-light'] .theme--editor,
+  [subtheme='studio-light'] .theme--editor--sub {
+    /* Background */
+    --color-success: rgb(61, 156, 98);
+    --color-success-rgb: 61, 156, 98;
+    --color-notice: rgb(187, 151, 0);
+    --color-notice-rgb: 187, 151, 0;
+    --color-warning: rgb(214, 136, 83);
+    --color-warning-rgb: 214, 136, 83;
+    --color-danger: rgb(230, 92, 87);
+    --color-danger-rgb: 230, 92, 87;
+    --color-surprise: rgb(0, 95, 157);
+    --color-surprise-rgb: 0, 95, 157;
+    --color-info: rgb(132, 103, 195);
+    --color-info-rgb: 132, 103, 195;
+  }
+
+  [theme='studio-light'] .CodeMirror-info,
+  [subtheme='studio-light'] .CodeMirror-info--sub {
+    /* Background */
+    --color-info: rgb(0, 91, 158);
+    --color-info-rgb: 0, 91, 158;
+  }
 </style>
diff --git a/packages/insomnia-components/assets/icn-bitbucket-logo.svg b/packages/insomnia-components/assets/icn-bitbucket-logo.svg
new file mode 100644
index 00000000000..d9998c6f4a4
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-bitbucket-logo.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.07773 3.11132C2.13954 3.03956 2.22988 2.99883 2.32454 3.00005L11.6755 3.00166C11.7701 3.00043 11.8605 3.04117 11.9223 3.11292C11.9841 3.18468 12.011 3.28012 11.9959 3.37364L10.6358 11.7306C10.6104 11.8874 10.4741 12.002 10.3154 11.9999H3.79037C3.5789 11.9982 3.39922 11.8447 3.36424 11.636L2.00413 3.37204C1.98898 3.27852 2.01592 3.18308 2.07773 3.11132ZM5.64308 9.54385H8.39685L9.06411 5.45294H4.89744L5.64308 9.54385Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-burger-menu.svg b/packages/insomnia-components/assets/icn-burger-menu.svg
new file mode 100644
index 00000000000..583af7a86d9
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-burger-menu.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 10C11.7761 10 12 10.2239 12 10.5V11.5C12 11.7761 11.7761 12 11.5 12H2.5C2.22386 12 2 11.7761 2 11.5V10.5C2 10.2239 2.22386 10 2.5 10H11.5ZM11.5 6C11.7761 6 12 6.22386 12 6.5V7.5C12 7.77614 11.7761 8 11.5 8H2.5C2.22386 8 2 7.77614 2 7.5V6.5C2 6.22386 2.22386 6 2.5 6H11.5ZM11.5 2C11.7761 2 12 2.22386 12 2.5V3.5C12 3.77614 11.7761 4 11.5 4H2.5C2.22386 4 2 3.77614 2 3.5V2.5C2 2.22386 2.22386 2 2.5 2H11.5Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-checkmark.svg b/packages/insomnia-components/assets/icn-checkmark.svg
new file mode 100644
index 00000000000..3fea7d39b93
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-checkmark.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path d="M11.7527 2L12.9973 3.23021L4.62233 11.7032L1 8.08091L2.23744 6.84348L4.61372 9.22019L11.7527 2Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-cookie.svg b/packages/insomnia-components/assets/icn-cookie.svg
new file mode 100644
index 00000000000..b9c34863c0b
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-cookie.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0C7.42954 0 7.83694 0.0147603 8.22283 0.0449149C8.27534 0.0490179 8.66367 0.157438 8.77771 0.408203C8.88919 0.653338 8.72755 1.04033 8.68119 1.09672C8.25547 1.61448 8 2.27741 8 3C8 4.65685 9.34315 6 11 6C11.7589 6 12.4519 5.71823 12.9803 5.25361C13.2954 4.97649 13.9269 5.32862 13.9674 5.94898C13.9893 6.28346 14 6.63368 14 7C14 12 12 14 7 14C2 14 0 12 0 7C0 2 2 0 7 0ZM6.756 1.501L6.25078 1.51594C2.74719 1.67358 1.55308 3.02701 1.50174 6.74296L1.5 7C1.5 11.1716 2.82843 12.5 7 12.5C10.9108 12.5 12.3228 11.3324 12.4841 7.74922L12.498 7.243C12.0876 7.38799 11.6611 7.47317 11.2211 7.49462L11 7.5C8.51472 7.5 6.5 5.48528 6.5 3C6.5 2.56797 6.56148 2.14709 6.67735 1.74704L6.756 1.501ZM8 10C8 10.5523 7.55228 11 7 11C6.44772 11 6 10.5523 6 10C6 9.44771 6.44772 9 7 9C7.55228 9 8 9.44771 8 10ZM4 8C4.55228 8 5 7.55228 5 7C5 6.44772 4.55228 6 4 6C3.44772 6 3 6.44772 3 7C3 7.55228 3.44772 8 4 8ZM4.5 4C4.77614 4 5 3.77614 5 3.5C5 3.22386 4.77614 3 4.5 3C4.22386 3 4 3.22386 4 3.5C4 3.77614 4.22386 4 4.5 4ZM10.5 10C10.7761 10 11 9.77614 11 9.5C11 9.22386 10.7761 9 10.5 9C10.2239 9 10 9.22386 10 9.5C10 9.77614 10.2239 10 10.5 10Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-drag-grip.svg b/packages/insomnia-components/assets/icn-drag-grip.svg
new file mode 100644
index 00000000000..5da53c9ba9e
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-drag-grip.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 3C10.3284 3 11 2.32843 11 1.5C11 0.671573 10.3284 0 9.5 0C8.67157 0 8 0.671573 8 1.5C8 2.32843 8.67157 3 9.5 3ZM11 7C11 7.82843 10.3284 8.5 9.5 8.5C8.67157 8.5 8 7.82843 8 7C8 6.17157 8.67157 5.5 9.5 5.5C10.3284 5.5 11 6.17157 11 7ZM11 12.5C11 13.3284 10.3284 14 9.5 14C8.67157 14 8 13.3284 8 12.5C8 11.6716 8.67157 11 9.5 11C10.3284 11 11 11.6716 11 12.5ZM6 7C6 7.82843 5.32843 8.5 4.5 8.5C3.67157 8.5 3 7.82843 3 7C3 6.17157 3.67157 5.5 4.5 5.5C5.32843 5.5 6 6.17157 6 7ZM4.5 14C5.32843 14 6 13.3284 6 12.5C6 11.6716 5.32843 11 4.5 11C3.67157 11 3 11.6716 3 12.5C3 13.3284 3.67157 14 4.5 14ZM6 1.5C6 2.32843 5.32843 3 4.5 3C3.67157 3 3 2.32843 3 1.5C3 0.671573 3.67157 0 4.5 0C5.32843 0 6 0.671573 6 1.5Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-elevator.svg b/packages/insomnia-components/assets/icn-elevator.svg
new file mode 100644
index 00000000000..aa1a7d7c124
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-elevator.svg
@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 6L7 1L12 6H2Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 8L7 13L2 8H12Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-ellipsis-circle.svg b/packages/insomnia-components/assets/icn-ellipsis-circle.svg
new file mode 100644
index 00000000000..b47111da2a8
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-ellipsis-circle.svg
@@ -0,0 +1,7 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path d="M8 7C8 7.55228 7.55228 8 7 8C6.44772 8 6 7.55228 6 7C6 6.44772 6.44772 6 7 6C7.55228 6 8 6.44772 8 7Z" fill="black"/>
+<path d="M10 8C10.5523 8 11 7.55228 11 7C11 6.44772 10.5523 6 10 6C9.44771 6 9 6.44772 9 7C9 7.55228 9.44771 8 10 8Z" fill="black"/>
+<path d="M5 7C5 7.55228 4.55228 8 4 8C3.44772 8 3 7.55228 3 7C3 6.44772 3.44772 6 4 6C4.55228 6 5 6.44772 5 7Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0C10.866 0 14 3.13401 14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0ZM7 1.5C3.96243 1.5 1.5 3.96243 1.5 7C1.5 10.0376 3.96243 12.5 7 12.5C10.0376 12.5 12.5 10.0376 12.5 7C12.5 3.96243 10.0376 1.5 7 1.5Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-file.svg b/packages/insomnia-components/assets/icn-file.svg
new file mode 100644
index 00000000000..1345e3e27e3
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-file.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4L9 1H3C2.44772 1 2 1.44772 2 2V12C2 12.5523 2.44772 13 3 13H11C11.5523 13 12 12.5523 12 12V4ZM3.5 2.5H8V5H10.5V11.5H3.5V2.5Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-folder-open.svg b/packages/insomnia-components/assets/icn-folder-open.svg
new file mode 100644
index 00000000000..53e2c090b3b
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-folder-open.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00014 1L8.00014 2.5H12.0001C12.5524 2.5 13.0001 2.94772 13.0001 3.5L13 6H13.4948C13.5187 6 13.5426 6.00168 13.5663 6.00503C13.8119 6.03974 13.991 6.24371 14 6.4806L13.9952 6.57071L13.1906 12.1414C13.1249 12.5962 12.7564 12.943 12.3043 12.9936L12.1897 13H1.81062C1.34616 13 0.946947 12.6882 0.832311 12.2528L0.809707 12.1414L0.00508089 6.57071L0 6.5C0 6.25454 0.178833 6.05039 0.414665 6.00806L0.505536 6H1L1.00014 2C1.00014 1.44772 1.44786 1 2.00014 1H7.00014ZM12.3285 7.5H1.67079L2.24912 11.5H11.7502L12.3285 7.5ZM2.50014 2.5H6.19615L7.19737 4H11.5001L11.5 6H2.5L2.50014 2.5Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-folder.svg b/packages/insomnia-components/assets/icn-folder.svg
new file mode 100644
index 00000000000..9c331851aaa
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-folder.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 12C13 12.5523 12.5523 13 12 13H2C1.44772 13 1 12.5523 1 12V2C1 1.44772 1.44772 1 2 1H7L8 2.5H12C12.5523 2.5 13 2.94772 13 3.5V12ZM2.5 6.5V11.5H11.5V6.5H2.5ZM2.5 2.5H6.196L7.19722 4H11.5V5H2.5V2.5Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-gear.svg b/packages/insomnia-components/assets/icn-gear.svg
new file mode 100644
index 00000000000..07f7833371e
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-gear.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.30769 11.5638C5.55002 11.4498 4.85267 11.1517 4.26267 10.7164L3.24689 11.7322L2.26782 10.7531L3.2836 9.73733C2.84832 9.14733 2.55016 8.44998 2.43619 7.69231H1V6.30769H2.43619C2.55016 5.55002 2.84832 4.85267 3.2836 4.26267L2.26782 3.24689L3.24689 2.26782L4.26267 3.2836C4.85267 2.84832 5.55002 2.55016 6.30769 2.43619V1H7.69231V2.43619C8.44998 2.55016 9.14733 2.84832 9.73733 3.2836L10.7531 2.26782L11.7322 3.24689L10.7164 4.26267C11.1517 4.85267 11.4498 5.55002 11.5638 6.30769H13V7.69231H11.5638C11.4498 8.44998 11.1517 9.14733 10.7164 9.73733L11.7322 10.7531L10.7531 11.7322L9.73733 10.7164C9.14733 11.1517 8.44998 11.4498 7.69231 11.5638V13H6.30769V11.5638ZM7 3.76923C5.2157 3.76923 3.76923 5.2157 3.76923 7C3.76923 8.7843 5.2157 10.2308 7 10.2308C8.7843 10.2308 10.2308 8.7843 10.2308 7C10.2308 5.2157 8.7843 3.76923 7 3.76923Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-gitlab-logo.svg b/packages/insomnia-components/assets/icn-gitlab-logo.svg
new file mode 100644
index 00000000000..fbaf3e2e162
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-gitlab-logo.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path d="M12.3349 5.78135C12.3316 5.76355 12.3265 5.74611 12.3197 5.72931L11.057 1.84235C10.988 1.63664 10.7946 1.49855 10.5776 1.50002C10.3611 1.49871 10.1691 1.63868 10.104 1.84518L8.90036 5.54913H5.10154L3.89615 1.84518C3.83131 1.63943 3.64034 1.49964 3.42462 1.50002H3.42179C3.20464 1.50006 3.01199 1.63934 2.94388 1.84553L1.68009 5.7371C1.68009 5.74064 1.67725 5.74347 1.67619 5.74701L1.03544 7.71563C0.938848 8.01184 1.04422 8.33654 1.29634 8.51958L6.83227 12.5421C6.93225 12.6145 7.06759 12.6138 7.1668 12.5404L12.7038 8.51958C12.956 8.33647 13.0613 8.01151 12.9643 7.71528L12.3349 5.78135Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-gui.svg b/packages/insomnia-components/assets/icn-gui.svg
new file mode 100644
index 00000000000..0ad7dfdf31f
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-gui.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C13.1046 0 14 0.89543 14 2V12C14 13.1046 13.1046 14 12 14H2C0.89543 14 0 13.1046 0 12V2C0 0.89543 0.89543 0 2 0H12ZM12.5 4.5H1.5V12C1.5 12.2455 1.67688 12.4496 1.91012 12.4919L2 12.5H12C12.2455 12.5 12.4496 12.3231 12.4919 12.0899L12.5 12V4.5ZM2 1.5H3V3H1.5V2L1.50806 1.91012C1.55039 1.67688 1.75454 1.5 2 1.5ZM6 1.5H4.5V3H6V1.5ZM7.5 1.5H12L12.0899 1.50806C12.3231 1.55039 12.5 1.75454 12.5 2V3H7.5V1.5Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-indentation.svg b/packages/insomnia-components/assets/icn-indentation.svg
new file mode 100644
index 00000000000..463affc2e8b
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-indentation.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path d="M4.5 0V9.5H14V11H4.5C3.67157 11 3 10.3284 3 9.5V0H4.5Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-minus-circle-fill.svg b/packages/insomnia-components/assets/icn-minus-circle-fill.svg
new file mode 100644
index 00000000000..ec4e1ff3738
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-minus-circle-fill.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14C10.866 14 14 10.866 14 7ZM10 6.5C10 6.22386 9.77614 6 9.5 6H4.5C4.22386 6 4 6.22386 4 6.5V7.5C4 7.77614 4.22386 8 4.5 8H9.5C9.77614 8 10 7.77614 10 7.5V6.5Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-minus-circle.svg b/packages/insomnia-components/assets/icn-minus-circle.svg
new file mode 100644
index 00000000000..828cd8ff446
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-minus-circle.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0C10.866 0 14 3.13401 14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0ZM7 1.5C3.96243 1.5 1.5 3.96243 1.5 7C1.5 10.0376 3.96243 12.5 7 12.5C10.0376 12.5 12.5 10.0376 12.5 7C12.5 3.96243 10.0376 1.5 7 1.5ZM10 6.5C10 6.22386 9.77614 6 9.5 6H4.5C4.22386 6 4 6.22386 4 6.5V7.5C4 7.77614 4.22386 8 4.5 8H9.5C9.77614 8 10 7.77614 10 7.5V6.5Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-placeholder.svg b/packages/insomnia-components/assets/icn-placeholder.svg
new file mode 100644
index 00000000000..e4b719f3d1c
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-placeholder.svg
@@ -0,0 +1,12 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path d="M0 1.5C0 0.671573 0.671573 0 1.5 0H4V1.5H1.5V4H0V1.5Z" fill="black"/>
+<path d="M7 5.93934L5.53033 4.46967L4.46967 5.53033L5.93934 7L4.46967 8.46967L5.53033 9.53033L7 8.06066L8.46967 9.53033L9.53033 8.46967L8.06066 7L9.53033 5.53033L8.46967 4.46967L7 5.93934Z" fill="black"/>
+<path d="M1.5 6H0V8H1.5V6Z" fill="black"/>
+<path d="M12.5 6H14V8H12.5V6Z" fill="black"/>
+<path d="M1.5 14C0.671573 14 0 13.3284 0 12.5V10H1.5V12.5H4V14H1.5Z" fill="black"/>
+<path d="M12.5 0C13.3284 0 14 0.671573 14 1.5V4H12.5V1.5H10V0H12.5Z" fill="black"/>
+<path d="M14 12.5C14 13.3284 13.3284 14 12.5 14H10V12.5H12.5V10H14V12.5Z" fill="black"/>
+<path d="M6 0H8V1.5H6V0Z" fill="black"/>
+<path d="M8 14V12.5H6V14H8Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-play.svg b/packages/insomnia-components/assets/icn-play.svg
new file mode 100644
index 00000000000..6361e3afef4
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-play.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5145 1.9087C2.84797 1.50879 2 1.9889 2 2.76619V11.2338C2 12.0111 2.84797 12.4912 3.5145 12.0913L10.5708 7.8575C11.2182 7.46909 11.2182 6.53091 10.5708 6.14251L3.5145 1.9087Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-plus.svg b/packages/insomnia-components/assets/icn-plus.svg
new file mode 100644
index 00000000000..7c965470e0c
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-plus.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path d="M7.5 1C7.63807 1 7.75 1.11193 7.75 1.25V6.25H12.75C12.8881 6.25 13 6.36193 13 6.5V7.5C13 7.63807 12.8881 7.75 12.75 7.75H7.75V12.75C7.75 12.8881 7.63807 13 7.5 13H6.5C6.36193 13 6.25 12.8881 6.25 12.75V7.75H1.25C1.11193 7.75 1 7.63807 1 7.5V6.5C1 6.36193 1.11193 6.25 1.25 6.25H6.25V1.25C6.25 1.11193 6.36193 1 6.5 1H7.5Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-prohibited.svg b/packages/insomnia-components/assets/icn-prohibited.svg
new file mode 100644
index 00000000000..e870f28b62a
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-prohibited.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0C10.866 0 14 3.13401 14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0ZM1.5 7C1.5 10.0376 3.96243 12.5 7 12.5C8.24832 12.5 9.39951 12.0841 10.3226 11.3834L2.61664 3.67743C1.91588 4.60049 1.5 5.75168 1.5 7ZM3.67743 2.61664C4.60049 1.91588 5.75168 1.5 7 1.5C10.0376 1.5 12.5 3.96243 12.5 7C12.5 8.24832 12.0841 9.39951 11.3834 10.3226L3.67743 2.61664Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-question-fill.svg b/packages/insomnia-components/assets/icn-question-fill.svg
new file mode 100644
index 00000000000..23d9857c201
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-question-fill.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14C10.866 14 14 10.866 14 7ZM8 9.5H6.25V11H8V9.5ZM8.5 5.5C8.5 5.88186 8.19084 6.2815 7.57253 6.43485C7.49731 6.4535 6.96017 6.65182 6.96017 6.65182C6.52112 6.79938 6.26623 7.21298 6.25 7.6268V8.49989L8.00318 8.5C8.00318 8.5 8 8 8.00318 7.85681C9.16671 7.51286 10 6.58753 10 5.5C10 4.11929 8.65685 3 7 3C5.34315 3 4 4.11929 4 5.5H5.5C5.5 5.01437 6.11725 4.5 7 4.5C7.88275 4.5 8.5 5.01437 8.5 5.5Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-question.svg b/packages/insomnia-components/assets/icn-question.svg
new file mode 100644
index 00000000000..4bc68e227a3
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-question.svg
@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path d="M8.00342 9.5H6.25V11H8.00342V9.5Z" fill="black"/>
+<path d="M8.5 5.5C8.5 5.88187 8.19084 6.2815 7.57253 6.43485C7.49731 6.4535 6.96017 6.65182 6.96017 6.65182C6.52112 6.79938 6.26623 7.21298 6.25 7.6268V8.49989L8.00342 8.5C8.00342 8.5 8 8 8.00342 7.85673C9.16683 7.51273 10 6.58745 10 5.5C10 4.11929 8.65685 3 7 3C5.34315 3 4 4.11929 4 5.5H5.5C5.5 5.01437 6.11725 4.5 7 4.5C7.88275 4.5 8.5 5.01437 8.5 5.5Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0C10.866 0 14 3.13401 14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0ZM7 1.5C3.96243 1.5 1.5 3.96243 1.5 7C1.5 10.0376 3.96243 12.5 7 12.5C10.0376 12.5 12.5 10.0376 12.5 7C12.5 3.96243 10.0376 1.5 7 1.5Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-search.svg b/packages/insomnia-components/assets/icn-search.svg
index a3883ba4022..5ba3378a493 100644
--- a/packages/insomnia-components/assets/icn-search.svg
+++ b/packages/insomnia-components/assets/icn-search.svg
@@ -1,4 +1,4 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect width="14" height="14" fill="white"/>
+    <rect width="14" height="14" fill="white" fill-opacity="0"/>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11C7.1099 11 8.13533 10.6384 8.96489 10.0265L12.1161 13.1768C12.3114 13.372 12.628 13.372 12.8232 13.1768L13.1768 12.8232C13.372 12.628 13.372 12.3114 13.1768 12.1161L10.025 8.965L10.1742 8.75348C10.6961 7.96383 11 7.0174 11 6ZM2.5 6C2.5 4.067 4.067 2.5 6 2.5C7.933 2.5 9.5 4.067 9.5 6C9.5 6.94102 9.12863 7.79531 8.52445 8.42429L8.46967 8.46967C8.45192 8.48742 8.43524 8.50584 8.42229 8.52637C7.7935 9.12942 6.94003 9.5 6 9.5C4.067 9.5 2.5 7.933 2.5 6Z" fill="black"/>
 </svg>
diff --git a/packages/insomnia-components/assets/icn-sec-cert.svg b/packages/insomnia-components/assets/icn-sec-cert.svg
new file mode 100644
index 00000000000..73e7b9be411
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-sec-cert.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 0C12.1046 0 13 0.89543 13 2V12C13 13.1046 12.1046 14 11 14H3C1.89543 14 1 13.1046 1 12V2C1 0.89543 1.89543 0 3 0H11ZM11 1.5H3C2.72386 1.5 2.5 1.72386 2.5 2V12C2.5 12.2761 2.72386 12.5 3 12.5H11C11.2761 12.5 11.5 12.2761 11.5 12V2C11.5 1.72386 11.2761 1.5 11 1.5ZM7 4.5C7.7797 4.5 8.42045 5.09489 8.49313 5.85554L8.5 6V7H9V9C9 9.55229 8.55228 10 8 10H6C5.44772 10 5 9.55229 5 9V7H5.5V6C5.5 5.17157 6.17157 4.5 7 4.5ZM7 5.5C6.75454 5.5 6.55039 5.67688 6.50806 5.91012L6.5 6V7H7.5V6C7.5 5.72386 7.27614 5.5 7 5.5Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-sync.svg b/packages/insomnia-components/assets/icn-sync.svg
new file mode 100644
index 00000000000..c49ff7fa55e
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-sync.svg
@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path d="M14.0001 5L13.0001 0L11.5262 1.65994C10.3058 0.62454 8.72588 0 7.00008 0C3.30199 0 0.273692 2.86768 0.0176168 6.50061L1.52246 6.50039C1.77489 3.69696 4.13092 1.5 7.00008 1.5C8.34287 1.5 9.57327 1.9812 10.5282 2.78057L9.00008 4.5L14.0001 5Z" fill="black"/>
+<path d="M0.0175781 9L1.01758 14L2.49146 12.3401C3.71184 13.3755 5.29177 14 7.01758 14C10.7157 14 13.744 11.1323 14 7.49939L12.4952 7.49961C12.2428 10.303 9.88673 12.5 7.01758 12.5C5.67479 12.5 4.44439 12.0188 3.48942 11.2194L5.01758 9.5L0.0175781 9Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-trashcan.svg b/packages/insomnia-components/assets/icn-trashcan.svg
new file mode 100644
index 00000000000..9addd1d9c29
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-trashcan.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 1C10 0.447715 9.55229 0 9 0H5C4.44772 0 4 0.447715 4 1V2.5H1.5C1.22386 2.5 1 2.72386 1 3V4H13V3C13 2.72386 12.7761 2.5 12.5 2.5H10V1ZM5.5 1.5H8.5V2.5H5.5V1.5ZM10.5 12.5H3.5V5H2V12.5C2 13.3284 2.67157 14 3.5 14H10.5C11.3284 14 12 13.3284 12 12.5V5H10.5V12.5ZM6 11V6H5V11H6ZM8 11V6H9V11H8Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-triangle.svg b/packages/insomnia-components/assets/icn-triangle.svg
new file mode 100644
index 00000000000..0bcac6200c2
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-triangle.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 5L7 10L2 5L12 5Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-user.svg b/packages/insomnia-components/assets/icn-user.svg
new file mode 100644
index 00000000000..3a382f9c84b
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-user.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.75 5.75C10.75 2.63056 9.33364 1 7 1C4.66636 1 3.25 2.63056 3.25 5.75C3.25 6.78254 3.40518 7.65195 3.69674 8.35205C2.46174 9.28112 1.6307 10.7183 1.51443 12.3528C1.50497 12.4004 1.5 12.4496 1.5 12.5L1.504 12.568L1.5 12.75L1.54281 12.7504C1.64587 13.0415 1.92358 13.25 2.25 13.25C2.57642 13.25 2.85413 13.0415 2.95719 12.7504L3 12.75L3.0049 12.5504C3.06374 11.3532 3.64892 10.2944 4.53411 9.603C5.15912 10.1972 5.99439 10.5 7 10.5C8.00614 10.5 8.84176 10.1969 9.4671 9.60122C10.4004 10.3335 11 12.5 11 12.75C11 13 11.4236 13.25 11.75 13.25C12.0764 13.25 12.3541 13.0415 12.4572 12.7504L12.5 12.75L12.4975 12.5619L12.5 12.5C12.5 12.45 12.4951 12.4011 12.486 12.3544C12.3697 10.7185 11.538 9.2804 10.3026 8.3531C10.5948 7.65195 10.75 6.78254 10.75 5.75ZM4.75 5.75C4.75 3.41572 5.54542 2.5 7 2.5C8.45458 2.5 9.25 3.41572 9.25 5.75C9.25 8.08428 8.45458 9 7 9C5.54542 9 4.75 8.08428 4.75 5.75Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-warning-circle.svg b/packages/insomnia-components/assets/icn-warning-circle.svg
new file mode 100644
index 00000000000..a757d679f00
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-warning-circle.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14C10.866 14 14 10.866 14 7ZM1.5 7C1.5 3.96243 3.96243 1.5 7 1.5C10.0376 1.5 12.5 3.96243 12.5 7C12.5 10.0376 10.0376 12.5 7 12.5C3.96243 12.5 1.5 10.0376 1.5 7ZM8 3.5L7.75 8H6.25L6 3.5H8ZM7.75 10.5V9H6.25V10.5H7.75Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/assets/icn-x.svg b/packages/insomnia-components/assets/icn-x.svg
new file mode 100644
index 00000000000..67a04cf01d2
--- /dev/null
+++ b/packages/insomnia-components/assets/icn-x.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="white" fill-opacity="0"/>
+<path d="M11.9 1L12.996 2.09602L8.094 6.998L12.996 11.9L11.9 12.996L6.998 8.094L2.09602 12.996L1 11.9L5.902 6.998L1 2.09602L2.09602 1L6.998 5.902L11.9 1Z" fill="black"/>
+</svg>
diff --git a/packages/insomnia-components/components/breadcrumb.stories.js b/packages/insomnia-components/components/breadcrumb.stories.js
index affc1619380..78f1e7ee62b 100644
--- a/packages/insomnia-components/components/breadcrumb.stories.js
+++ b/packages/insomnia-components/components/breadcrumb.stories.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import Breadcrumb from './breadcrumb';
 
-export default { title: 'Breadcrumb' };
+export default { title: '1st Party | Breadcrumb' };
 
-export const _default = () => <Breadcrumb className="breadcrumb" crumbs={['Documents', 'Deployment']} />;
+export const _default = () => (
+  <Breadcrumb className="breadcrumb" crumbs={['Documents', 'Deployment']} />
+);
diff --git a/packages/insomnia-components/components/button.stories.js b/packages/insomnia-components/components/button.stories.js
index d32b887692b..f32d48f9c99 100644
--- a/packages/insomnia-components/components/button.stories.js
+++ b/packages/insomnia-components/components/button.stories.js
@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import SvgIcon, { IconEnum } from './svg-icon';
 
 export default {
-  title: 'Button',
+  title: '1st Party | Button',
   decorators: [withKnobs],
 };
 
@@ -90,7 +90,9 @@ export const reference = () => (
   <React.Fragment>
     {['default', 'small'].map(s => (
       <Padded>
-        <h2><code>size={s}</code></h2>
+        <h2>
+          <code>size={s}</code>
+        </h2>
         <Wrapper>
           <Button variant="contained" size={s}>
             Default
diff --git a/packages/insomnia-components/components/card.stories.js b/packages/insomnia-components/components/card.stories.js
index d19883e2e11..4fed89773de 100644
--- a/packages/insomnia-components/components/card.stories.js
+++ b/packages/insomnia-components/components/card.stories.js
@@ -6,7 +6,7 @@ import { SvgIcon } from '../index';
 import { IconEnum } from './svg-icon';
 
 export default {
-  title: 'Card',
+  title: '1st Party | Card',
   decorators: [withKnobs],
 };
 
diff --git a/packages/insomnia-components/components/dropdown/dropdown.stories.js b/packages/insomnia-components/components/dropdown/dropdown.stories.js
index 7201a8a6f31..643b8aa463b 100644
--- a/packages/insomnia-components/components/dropdown/dropdown.stories.js
+++ b/packages/insomnia-components/components/dropdown/dropdown.stories.js
@@ -7,42 +7,39 @@ import SvgIcon from '../svg-icon';
 import Button from '../button';
 
 export default {
-  title: 'Dropdown',
+  title: '1st Party | Dropdown',
   decorators: [withKnobs],
 };
 
 export const _default = () => (
-  <Dropdown renderButton={({ open }) => (
-    <Button>
-      Dropdown <SvgIcon icon={open ? 'chevron-up' : 'chevron-down'} />
-    </Button>
-  )}>
+  <Dropdown
+    renderButton={({ open }) => (
+      <Button>
+        Dropdown <SvgIcon icon={open ? 'chevron-up' : 'chevron-down'} />
+      </Button>
+    )}>
     <DropdownDivider>Awesome Dropdown</DropdownDivider>
-    <DropdownItem icon={<SvgIcon icon="clock" />}>
-      Check Time
-    </DropdownItem>
+    <DropdownItem icon={<SvgIcon icon="clock" />}>Check Time</DropdownItem>
     <DropdownItem icon={<SvgIcon icon="git-branch" />} right="CTRL+A">
       Create Branch
     </DropdownItem>
     <DropdownItem icon={<SvgIcon icon="github" />} disabled>
       Disabled Action
     </DropdownItem>
-    <DropdownItem icon={<SvgIcon icon="empty" />}>
-      Other Action
-    </DropdownItem>
+    <DropdownItem icon={<SvgIcon icon="empty" />}>Other Action</DropdownItem>
     <DropdownDivider />
-    <DropdownItem icon={<SvgIcon icon="warning" />}>
-      Don't Do it!
-    </DropdownItem>
+    <DropdownItem icon={<SvgIcon icon="warning" />}>Don't Do it!</DropdownItem>
   </Dropdown>
 );
 
 export const rightAlign = () => (
-  <Dropdown right renderButton={() => (
-    <Button>
-      Right Align <SvgIcon icon="chevron-down" />
-    </Button>
-  )}>
+  <Dropdown
+    right
+    renderButton={() => (
+      <Button>
+        Right Align <SvgIcon icon="chevron-down" />
+      </Button>
+    )}>
     <DropdownItem>Item 1</DropdownItem>
     <DropdownItem>Item 2</DropdownItem>
     <DropdownItem>Item 3</DropdownItem>
@@ -57,11 +54,13 @@ export const manyItems = () => {
   }
 
   return (
-    <Dropdown right renderButton={() => (
-      <Button>
-        {numItems} Items <SvgIcon icon="chevron-down" />
-      </Button>
-    )}>
+    <Dropdown
+      right
+      renderButton={() => (
+        <Button>
+          {numItems} Items <SvgIcon icon="chevron-down" />
+        </Button>
+      )}>
       {items}
     </Dropdown>
   );
diff --git a/packages/insomnia-components/components/gravatar-img.stories.js b/packages/insomnia-components/components/gravatar-img.stories.js
index 81328147199..b3a4e36bcff 100644
--- a/packages/insomnia-components/components/gravatar-img.stories.js
+++ b/packages/insomnia-components/components/gravatar-img.stories.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import GravatarImg from './gravatar-img';
 
-export default { title: 'Gravatar Image' };
+export default { title: '1st Party | Gravatar' };
 
 export const _default = () => <GravatarImg email="support@insomnia.rest" size={200} />;
 
diff --git a/packages/insomnia-components/components/header.stories.js b/packages/insomnia-components/components/header.stories.js
index e4d9662e82c..bbec4d4262e 100644
--- a/packages/insomnia-components/components/header.stories.js
+++ b/packages/insomnia-components/components/header.stories.js
@@ -4,29 +4,28 @@ import GravatarImg from './gravatar-img';
 import Breadcrumb from './breadcrumb';
 import Switch from './switch';
 
-export default { title: 'Header' };
+export default { title: '1st Party | Header' };
 
 export const _default = () => <Header />;
 
-export const _primary = () =>
-    <Header
-        gridLeft={(
-            <React.Fragment>
-                <GravatarImg
-                    className="gravatar breadcrumbs"
-                    rounded
-                    email="support@insomnia.rest"
-                    size={24}
-                />
-                <Breadcrumb className="breadcrumb" crumbs={['Documents', 'Deployment']} />
-            </React.Fragment>
-        )}
-        gridCenter={(
-                <Switch />
-        )}
-        gridRight={(
-            <React.Fragment>
-                <div>right</div>
-            </React.Fragment>
-        )}
-    />;
+export const _primary = () => (
+  <Header
+    gridLeft={
+      <React.Fragment>
+        <GravatarImg
+          className="gravatar breadcrumbs"
+          rounded
+          email="support@insomnia.rest"
+          size={24}
+        />
+        <Breadcrumb className="breadcrumb" crumbs={['Documents', 'Deployment']} />
+      </React.Fragment>
+    }
+    gridCenter={<Switch />}
+    gridRight={
+      <React.Fragment>
+        <div>right</div>
+      </React.Fragment>
+    }
+  />
+);
diff --git a/packages/insomnia-components/components/notice-table.stories.js b/packages/insomnia-components/components/notice-table.stories.js
index 1bd3913351d..8758cb57952 100644
--- a/packages/insomnia-components/components/notice-table.stories.js
+++ b/packages/insomnia-components/components/notice-table.stories.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import NoticeTable from './notice-table';
 
-export default { title: 'NoticeTable' };
+export default { title: '1st Party | NoticeTable' };
 
 const notices = [
   { type: 'error', line: 3, message: 'This must be fixed now!' },
@@ -10,15 +10,15 @@ const notices = [
   {
     type: 'warning',
     line: 40,
-    message: 'Another small warning because you didn\'t the right thing',
+    message: "Another small warning because you didn't the right thing",
   },
   {
     type: 'error',
     line: 3212,
     message:
       'This is a really, really, really, long error message and I hope it makes sense ' +
-      'because it\'s just made up of random thoughts and things. But, don\'t let that fool you ' +
-      'it\'s really important and you should fix it as soon as possible!',
+      "because it's just made up of random thoughts and things. But, don't let that fool you " +
+      "it's really important and you should fix it as soon as possible!",
   },
 ];
 
diff --git a/packages/insomnia-components/components/radio-button-group.stories.js b/packages/insomnia-components/components/radio-button-group.stories.js
index 3690c60610f..ecfce92875d 100644
--- a/packages/insomnia-components/components/radio-button-group.stories.js
+++ b/packages/insomnia-components/components/radio-button-group.stories.js
@@ -3,11 +3,40 @@ import * as React from 'react';
 
 import RadioButtonGroup from './radio-button-group';
 
-export default { title: 'Radio Button Group' };
+export default { title: '1st Party | Radio Button Group' };
 
-export const _default = () => <RadioButtonGroup>
-<label><input type="radio" name="specSrc" value="scratch" onClick={() => window.alert('Selected')} /><span>From Scratch</span></label>
-<label><input type="radio" name="specSrc" value="repository" onClick={() => window.alert('Selected')} /><span>From Repository</span></label>
-<label><input type="radio" name="specSrc" value="clipboard" onClick={() => window.alert('Selected')} /><span>From Clipboard</span></label>
-<label><input type="radio" name="specSrc" value="wherever" onClick={() => window.alert('Selected')} /><span>From Wherever</span></label>
-</RadioButtonGroup>;
+export const _default = () => (
+  <RadioButtonGroup>
+    <label>
+      <input type="radio" name="specSrc" value="scratch" onClick={() => window.alert('Selected')} />
+      <span>From Scratch</span>
+    </label>
+    <label>
+      <input
+        type="radio"
+        name="specSrc"
+        value="repository"
+        onClick={() => window.alert('Selected')}
+      />
+      <span>From Repository</span>
+    </label>
+    <label>
+      <input
+        type="radio"
+        name="specSrc"
+        value="clipboard"
+        onClick={() => window.alert('Selected')}
+      />
+      <span>From Clipboard</span>
+    </label>
+    <label>
+      <input
+        type="radio"
+        name="specSrc"
+        value="wherever"
+        onClick={() => window.alert('Selected')}
+      />
+      <span>From Wherever</span>
+    </label>
+  </RadioButtonGroup>
+);
diff --git a/packages/insomnia-components/components/sidebar.js b/packages/insomnia-components/components/sidebar.js
new file mode 100644
index 00000000000..bbd682ae5e8
--- /dev/null
+++ b/packages/insomnia-components/components/sidebar.js
@@ -0,0 +1,345 @@
+// @flow
+import * as React from 'react';
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+import Tooltip from './tooltip';
+import SvgIcon, { IconEnum } from './svg-icon';
+
+type Props = {|
+  className?: string,
+|};
+
+const StyledSidebar: React.ComponentType<{}> = styled.div`
+  /* To constants */
+  background-color: var(--color-bg);
+  border: 1px solid var(--hl-md);
+  color: var(--color-font);
+  position: relative;
+  svg {
+    font-size: var(--font-size-xl);
+    fill: var(--hl-lg);
+  }
+  .method {
+    h6 {
+      font-size: var(--font-size-xxs);
+    }
+  }
+  .method-post {
+    color: var(--color-success);
+  }
+  .method-get {
+    color: var(--color-surprise);
+  }
+  .method-del {
+    color: var(--color-danger);
+  }
+  .method-options-head,
+  .method-custom {
+    color: var(--color-info);
+  }
+  .method-patch {
+    color: var(--color-notice);
+  }
+  .method-put {
+    color: var(--color-warning);
+  }
+
+  h6 {
+    font-size: var(--font-size-xs);
+    display: flex;
+    flex-grow: 1;
+    &:hover {
+      cursor: default;
+    }
+  }
+  h5 {
+    font-size: var(--font-size-sm);
+  }
+  /* END To constants */
+  width: 260px;
+  height: 100%;
+`;
+
+const StyledSection: React.ComponentType<{}> = styled(motion.ul)`
+  overflow: hidden;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--hl-md);
+`;
+
+const StyledHeader: React.ComponentType<{}> = styled.li`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &:hover {
+    background-color: var(--hl-xs);
+  }
+
+  & > * {
+    padding: var(--padding-md) var(--padding-md) var(--padding-md) var(--padding-md);
+    font-size: var(--font-size-md);
+
+    svg {
+      margin-left: var(--padding-sm);
+
+      &:hover {
+        fill: var(--color-font);
+        opacity: 1;
+      }
+    }
+  }
+`;
+
+const StyledItem: React.ComponentType<{}> = styled.li`
+  padding: var(--padding-sm) 0 var(--padding-sm) 0;
+  margin: 0px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--padding-lg), 1fr));
+  column-gap: var(--padding-sm);
+  grid-template-rows: 1fr;
+  align-items: start;
+  white-space: nowrap;
+  font-size: var(--font-size-md);
+  line-height: calc(var(--font-size) * 1.25);
+
+  a {
+    color: var(--hl-xl);
+  }
+
+  div:nth-child(1) {
+    text-align: right;
+  }
+
+  &:hover {
+    background-color: var(--hl-xxs);
+    cursor: default;
+  }
+
+  &:last-child {
+    margin-bottom: var(--padding-md);
+  }
+`;
+
+const StyledFilter: React.ComponentType<{}> = styled(motion.div)`
+  padding-left: var(--padding-md);
+  padding-right: var(--padding-md);
+  overflow: hidden;
+  input {
+    box-sizing: border-box;
+    width: 100%;
+    font-size: var(--font-size-md);
+    padding: var(--padding-sm);
+    margin-top: var(--padding-md);
+    margin-bottom: var(--padding-sm);
+  }
+`;
+
+const StyledPanel: React.ComponentType<{}> = styled(motion.div)`
+  height: 0px;
+`;
+
+function Sidebar(props: Props) {
+  // Temp garbage for easing/transition/sequencing dial-in
+  const [visible, setVisible] = useState(false);
+  const [visible2, setVisible2] = useState(false);
+  const [visible3, setVisible3] = useState(true);
+  const [visible4, setVisible4] = useState(true);
+  const toggleVisible = () => setVisible(!visible);
+  const toggleVisible2 = () => setVisible2(!visible2);
+  const toggleVisible3 = () => setVisible3(!visible3);
+  const toggleVisible4 = () => setVisible4(!visible4);
+
+  return (
+    <StyledSidebar className="theme--sidebar">
+      <StyledSection>
+        <StyledHeader>
+          <h6>INFO</h6>
+        </StyledHeader>
+      </StyledSection>
+
+      <StyledSection>
+        <StyledHeader>
+          <h6 onClick={toggleVisible2}>SERVERS</h6>
+          <div>
+            <motion.span
+              initial={{ opacity: visible2 ? 0.6 : 0 }}
+              animate={{ opacity: visible2 ? 0.6 : 0 }}
+              transition={{ duration: 0.2, ease: 'easeInOut', delay: 0.2 }}>
+              <SvgIcon icon={IconEnum.trashcan} />
+            </motion.span>
+            <motion.span
+              onClick={toggleVisible3}
+              initial={{ opacity: visible2 ? 0.6 : 0 }}
+              animate={{ opacity: visible2 ? 0.6 : 0 }}
+              transition={{ duration: 0.2, ease: 'easeInOut', delay: 0.15 }}>
+              <SvgIcon icon={IconEnum.search} />
+            </motion.span>
+            <motion.span
+              initial={{ opacity: visible2 ? 0.6 : 0.4 }}
+              animate={{ opacity: visible2 ? 0.6 : 0.4 }}
+              transition={{ duration: 0.2, ease: 'easeInOut', delay: 0.1 }}>
+              <Tooltip message="Add" position="top">
+                <SvgIcon icon={IconEnum.plus} />
+              </Tooltip>
+            </motion.span>
+          </div>
+        </StyledHeader>
+
+        <StyledPanel
+          initial={{ height: visible2 ? '100%' : '0px' }}
+          animate={{ height: visible2 ? '100%' : '0px' }}
+          transition={{ duration: 0.2, ease: 'easeInOut', delay: 0 }}>
+          <StyledFilter
+            initial={{ height: visible3 ? '0px' : '100%' }}
+            animate={{ height: visible3 ? '0px' : '100%' }}
+            transition={{ duration: 0.2, ease: 'easeInOut', delay: 0 }}>
+            <input placeholder="Filter..." />
+          </StyledFilter>
+          <StyledItem>
+            <div>
+              <SvgIcon icon={IconEnum.indentation} />
+            </div>
+            <div>development.konghq.com</div>
+          </StyledItem>
+          <StyledItem>
+            <div>
+              <SvgIcon icon={IconEnum.indentation} />
+            </div>
+            <div>staging.konghq.com</div>
+          </StyledItem>
+          <StyledItem>
+            <div>
+              <SvgIcon icon={IconEnum.indentation} />
+            </div>
+            <div>production.konghq.com</div>
+          </StyledItem>
+        </StyledPanel>
+      </StyledSection>
+
+      <StyledSection>
+        <StyledHeader>
+          <h6 onClick={toggleVisible}>PATHS</h6>
+          <div>
+            <motion.span
+              initial={{ opacity: visible ? 0.6 : 0 }}
+              animate={{ opacity: visible ? 0.6 : 0 }}
+              transition={{ duration: 0.2, ease: 'easeInOut', delay: 0.2 }}>
+              <SvgIcon icon={IconEnum.trashcan} />
+            </motion.span>
+            <motion.span
+              onClick={toggleVisible4}
+              initial={{ opacity: visible ? 0.6 : 0 }}
+              animate={{ opacity: visible ? 0.6 : 0 }}
+              transition={{ duration: 0.2, ease: 'easeInOut', delay: 0.15 }}>
+              <SvgIcon icon={IconEnum.search} />
+            </motion.span>
+            <motion.span
+              initial={{ opacity: visible ? 0.6 : 0.4 }}
+              animate={{ opacity: visible ? 0.6 : 0.4 }}
+              transition={{ duration: 0.2, ease: 'easeInOut', delay: 0.1 }}>
+              <Tooltip message="Add" position="top">
+                <SvgIcon icon={IconEnum.plus} />
+              </Tooltip>
+            </motion.span>
+          </div>
+        </StyledHeader>
+        <StyledPanel
+          initial={{ height: visible ? '100%' : '0px' }}
+          animate={{ height: visible ? '100%' : '0px' }}
+          transition={{ duration: 0.2, ease: 'easeInOut', delay: 0 }}>
+          <StyledFilter
+            initial={{ height: visible4 ? '0px' : '100%' }}
+            animate={{ height: visible4 ? '0px' : '100%' }}
+            transition={{ duration: 0.2, ease: 'easeInOut', delay: 0 }}>
+            <input placeholder="Filter..." />
+          </StyledFilter>
+          <StyledItem>
+            <div>
+              <SvgIcon icon={IconEnum.folderOpen} />
+            </div>
+            <h5>pet</h5>
+          </StyledItem>
+          <StyledItem>
+            <div></div>
+            <h6 className="method-post">POST</h6>
+            <p>/store/inventory/(orderId)</p>
+          </StyledItem>
+          <StyledItem>
+            <div></div>
+            <h6 className="method-get">GET</h6>
+            <p>/store/inventory/(orderId)</p>
+          </StyledItem>
+          <StyledItem>
+            <div></div>
+            <h6 className="method-put">PUT</h6>
+            <p>/store/inventory/(orderId)</p>
+          </StyledItem>
+          <StyledItem>
+            <div></div>
+            <h6 className="method-del">DEL</h6>
+            <p>/store/inventory/(orderId)</p>
+          </StyledItem>
+          <StyledItem>
+            <div></div>
+            <h6 className="method-post">POST</h6>
+            <p>/store/inventory/(orderId)</p>
+          </StyledItem>
+          <StyledItem>
+            <div></div>
+            <h6 className="method-put">PUT</h6>
+            <p>/store/inventory/(orderId)</p>
+          </StyledItem>
+          <StyledItem>
+            <div>
+              <SvgIcon icon={IconEnum.folderOpen} />
+            </div>
+            <h5>store</h5>
+          </StyledItem>
+          <StyledItem>
+            <div></div>
+            <h6 className="method-put">PUT</h6>
+            <p>/store/inventory/(orderId)</p>
+          </StyledItem>
+          <StyledItem>
+            <div></div>
+            <h6 className="method-del">DEL</h6>
+            <p>/store/inventory/(orderId)</p>
+          </StyledItem>
+          <StyledItem>
+            <div></div>
+            <h6 className="method-post">POST</h6>
+            <p>/store/inventory/(orderId)</p>
+          </StyledItem>
+          <StyledItem>
+            <div></div>
+            <h6 className="method-put">PUT</h6>
+            <p>/store/inventory/(orderId)</p>
+          </StyledItem>
+          <StyledItem>
+            <div>
+              <SvgIcon icon={IconEnum.folder} />
+            </div>
+            <h5>user</h5>
+          </StyledItem>
+        </StyledPanel>
+      </StyledSection>
+
+      <StyledSection>
+        <StyledHeader>
+          <h6>MODELS</h6>
+          <SvgIcon icon={IconEnum.plus} />
+        </StyledHeader>
+      </StyledSection>
+
+      <StyledSection>
+        <StyledHeader>
+          <h6>SECURITY</h6>
+          <SvgIcon icon={IconEnum.plus} />
+        </StyledHeader>
+      </StyledSection>
+    </StyledSidebar>
+  );
+}
+
+export default Sidebar;
diff --git a/packages/insomnia-components/components/sidebar.stories.js b/packages/insomnia-components/components/sidebar.stories.js
new file mode 100644
index 00000000000..00ff4e1e6a8
--- /dev/null
+++ b/packages/insomnia-components/components/sidebar.stories.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import Sidebar from './sidebar';
+import { withKnobs } from '@storybook/addon-knobs';
+import { withDesign } from 'storybook-addon-designs';
+
+export default {
+  title: '1st Party | Sidebar',
+  decorators: [withKnobs, withDesign],
+};
+
+export const _default = () => <Sidebar />;
+
+_default.story = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/sS7oBbKmDvhtq5lXyTckVe/Style-Guide-Components?node-id=0%3A2',
+    },
+  },
+};
diff --git a/packages/insomnia-components/components/svg-icon.js b/packages/insomnia-components/components/svg-icon.js
index fc2738b45a5..9ccb5dfcc18 100644
--- a/packages/insomnia-components/components/svg-icon.js
+++ b/packages/insomnia-components/components/svg-icon.js
@@ -5,14 +5,43 @@ import MemoSvgIcnArrowRight from '../assets/svgr/IcnArrowRight';
 import MemoSvgIcnChevronDown from '../assets/svgr/IcnChevronDown';
 import MemoSvgIcnChevronUp from '../assets/svgr/IcnChevronUp';
 import MemoSvgIcnClock from '../assets/svgr/IcnClock';
-import MemoSvgIcnEllipsis from '../assets/svgr/IcnEllipsis';
 import MemoSvgIcnEmpty from '../assets/svgr/IcnEmpty';
 import MemoSvgIcnErrors from '../assets/svgr/IcnErrors';
 import MemoSvgIcnGitBranch from '../assets/svgr/IcnGitBranch';
 import MemoSvgIcnGithubLogo from '../assets/svgr/IcnGithubLogo';
-import MemoSvgIcnInfo from '../assets/svgr/IcnInfo';
-import MemoSvgIcnSearch from '../assets/svgr/IcnSearch';
+import MemoSvgIcnBitbucketLogo from '../assets/svgr/IcnBitbucketLogo';
 import MemoSvgIcnWarning from '../assets/svgr/IcnWarning';
+import MemoSvgIcnEllipsis from '../assets/svgr/IcnEllipsis';
+import MemoSvgIcnBurgerMenu from '../assets/svgr/IcnBurgerMenu';
+import MemoSvgIcnCheckmark from '../assets/svgr/IcnCheckmark';
+import MemoSvgIcnCookie from '../assets/svgr/IcnCookie';
+import MemoSvgIcnDragGrip from '../assets/svgr/IcnDragGrip';
+import MemoSvgIcnElevator from '../assets/svgr/IcnElevator';
+import MemoSvgIcnEllipsisCircle from '../assets/svgr/IcnEllipsisCircle';
+import MemoSvgIcnFile from '../assets/svgr/IcnFile';
+import MemoSvgIcnFolderOpen from '../assets/svgr/IcnFolderOpen';
+import MemoSvgIcnFolder from '../assets/svgr/IcnFolder';
+import MemoSvgIcnGear from '../assets/svgr/IcnGear';
+import MemoSvgIcnGitlabLogo from '../assets/svgr/IcnGitlabLogo';
+import MemoSvgIcnGUI from '../assets/svgr/IcnGui';
+import MemoSvgIcnIndendation from '../assets/svgr/IcnIndentation';
+import MemoSvgIcnMinusCircleFill from '../assets/svgr/IcnMinusCircleFill';
+import MemoSvgIcnMinusCircle from '../assets/svgr/IcnMinusCircle';
+import MemoSvgIcnPlaceholder from '../assets/svgr/IcnPlaceholder';
+import MemoSvgIcnPlay from '../assets/svgr/IcnPlay';
+import MemoSvgIcnPlus from '../assets/svgr/IcnPlus';
+import MemoSvgIcnProhibited from '../assets/svgr/IcnProhibited';
+import MemoSvgIcnQuestionFill from '../assets/svgr/IcnQuestionFill';
+import MemoSvgIcnQuestion from '../assets/svgr/IcnQuestion';
+import MemoSvgIcnSearch from '../assets/svgr/IcnSearch';
+import MemoSvgIcnSecCert from '../assets/svgr/IcnSecCert';
+import MemoSvgIcnSync from '../assets/svgr/IcnSync';
+import MemoSvgIcnTrashcan from '../assets/svgr/IcnTrashcan';
+import MemoSvgIcnTriangle from '../assets/svgr/IcnTriangle';
+import MemoSvgIcnUser from '../assets/svgr/IcnUser';
+import MemoSvgIcnWarningCircle from '../assets/svgr/IcnWarningCircle';
+import MemoSvgIcnX from '../assets/svgr/IcnX';
+import MemoSvgIcnInfo from '../assets/svgr/IcnInfo';
 
 export const ThemeEnum = {
   default: 'default',
@@ -38,9 +67,38 @@ export const IconEnum = {
   error: 'error',
   gitBranch: 'git-branch',
   github: 'github',
+  bitbucket: 'bitbucket',
   info: 'info',
   search: 'search',
   warning: 'warning',
+  burgerMenu: 'burger-menu',
+  checkmark: 'checkmark',
+  cookie: 'cookie',
+  dragGrip: 'drag-grip',
+  elevator: 'elevator',
+  ellipsesCircle: 'ellipses-circle',
+  file: 'file',
+  folder: 'folder',
+  folderOpen: 'folder-open',
+  gear: 'gear',
+  gitlabLogo: 'gitlab-logo',
+  gui: 'gui',
+  indentation: 'indentation',
+  minusCircle: 'minus-circle',
+  minusCircleFill: 'minus-circle-fill',
+  placeholder: 'placeholder',
+  play: 'play',
+  plus: 'plus',
+  prohibited: 'prohibited',
+  questionFill: 'question-fill',
+  question: 'question',
+  secCert: 'sec-cert',
+  sync: 'sync',
+  trashcan: 'trashcan',
+  triangle: 'triangle',
+  user: 'user',
+  warningCircle: 'warning-circle',
+  x: 'x',
 
   // Blank icon
   empty: 'empty',
@@ -49,7 +107,7 @@ export const IconEnum = {
 type IconKeys = $Values<typeof IconEnum>;
 
 type Props = {
-  icon: IconKeys;
+  icon: IconKeys,
   label?: React.Node,
 };
 
@@ -63,27 +121,27 @@ const SvgIconStyled: React.ComponentType<{ theme: ThemeKeys, hasLabel: boolean }
     user-select: none;
     ${({ hasLabel }) => (hasLabel ? 'margin-right: var(--padding-xs);' : null)}
     ${({ theme }) => {
-  switch (theme) {
-    case ThemeEnum.danger:
-    case ThemeEnum.info:
-    case ThemeEnum.notice:
-    case ThemeEnum.success:
-    case ThemeEnum.surprise:
-    case ThemeEnum.warning:
-      return `fill: var(--color-${theme}); color: var(--color-font-${theme});`;
-    case ThemeEnum.highlight:
-      return 'fill: var(--hl); color: var(--color-font-danger);';
-    case ThemeEnum.default:
-    default:
-      return 'fill: var(--color-font); color: var(--color-font);';
-  }
-}}
+      switch (theme) {
+        case ThemeEnum.danger:
+        case ThemeEnum.info:
+        case ThemeEnum.notice:
+        case ThemeEnum.success:
+        case ThemeEnum.surprise:
+        case ThemeEnum.warning:
+          return `fill: var(--color-${theme}); color: var(--color-font-${theme});`;
+        case ThemeEnum.highlight:
+          return 'fill: var(--hl); color: var(--color-font-danger);';
+        case ThemeEnum.default:
+        default:
+          return 'fill: var(--color-font); color: var(--color-font);';
+      }
+    }}
   }
 `;
 
 type IconDictionary = {
-  [IconKeys]: [ThemeKeys, React.ComponentType<any>];
-}
+  [IconKeys]: [ThemeKeys, React.ComponentType<any>],
+};
 
 class SvgIcon extends React.Component<Props> {
   static icons: IconDictionary = {
@@ -96,9 +154,39 @@ class SvgIcon extends React.Component<Props> {
     [IconEnum.error]: [ThemeEnum.danger, MemoSvgIcnErrors],
     [IconEnum.gitBranch]: [ThemeEnum.default, MemoSvgIcnGitBranch],
     [IconEnum.github]: [ThemeEnum.default, MemoSvgIcnGithubLogo],
+    [IconEnum.bitbucket]: [ThemeEnum.default, MemoSvgIcnBitbucketLogo],
     [IconEnum.info]: [ThemeEnum.highlight, MemoSvgIcnInfo],
     [IconEnum.search]: [ThemeEnum.default, MemoSvgIcnSearch],
     [IconEnum.warning]: [ThemeEnum.notice, MemoSvgIcnWarning],
+    [IconEnum.burgerMenu]: [ThemeEnum.default, MemoSvgIcnBurgerMenu],
+    [IconEnum.checkmark]: [ThemeEnum.default, MemoSvgIcnCheckmark],
+    [IconEnum.cookie]: [ThemeEnum.default, MemoSvgIcnCookie],
+    [IconEnum.dragGrip]: [ThemeEnum.default, MemoSvgIcnDragGrip],
+    [IconEnum.elevator]: [ThemeEnum.default, MemoSvgIcnElevator],
+    [IconEnum.ellipsesCircle]: [ThemeEnum.default, MemoSvgIcnEllipsisCircle],
+    [IconEnum.elevator]: [ThemeEnum.default, MemoSvgIcnElevator],
+    [IconEnum.file]: [ThemeEnum.default, MemoSvgIcnFile],
+    [IconEnum.folder]: [ThemeEnum.default, MemoSvgIcnFolder],
+    [IconEnum.folderOpen]: [ThemeEnum.default, MemoSvgIcnFolderOpen],
+    [IconEnum.gear]: [ThemeEnum.default, MemoSvgIcnGear],
+    [IconEnum.gitlabLogo]: [ThemeEnum.default, MemoSvgIcnGitlabLogo],
+    [IconEnum.gui]: [ThemeEnum.default, MemoSvgIcnGUI],
+    [IconEnum.indentation]: [ThemeEnum.default, MemoSvgIcnIndendation],
+    [IconEnum.minusCircle]: [ThemeEnum.default, MemoSvgIcnMinusCircle],
+    [IconEnum.minusCircleFill]: [ThemeEnum.default, MemoSvgIcnMinusCircleFill],
+    [IconEnum.placeholder]: [ThemeEnum.default, MemoSvgIcnPlaceholder],
+    [IconEnum.play]: [ThemeEnum.default, MemoSvgIcnPlay],
+    [IconEnum.plus]: [ThemeEnum.default, MemoSvgIcnPlus],
+    [IconEnum.prohibited]: [ThemeEnum.default, MemoSvgIcnProhibited],
+    [IconEnum.question]: [ThemeEnum.default, MemoSvgIcnQuestion],
+    [IconEnum.questionFill]: [ThemeEnum.default, MemoSvgIcnQuestionFill],
+    [IconEnum.secCert]: [ThemeEnum.default, MemoSvgIcnSecCert],
+    [IconEnum.sync]: [ThemeEnum.default, MemoSvgIcnSync],
+    [IconEnum.trashcan]: [ThemeEnum.default, MemoSvgIcnTrashcan],
+    [IconEnum.triangle]: [ThemeEnum.default, MemoSvgIcnTriangle],
+    [IconEnum.user]: [ThemeEnum.default, MemoSvgIcnUser],
+    [IconEnum.warningCircle]: [ThemeEnum.default, MemoSvgIcnWarningCircle],
+    [IconEnum.x]: [ThemeEnum.default, MemoSvgIcnX],
   };
 
   render() {
diff --git a/packages/insomnia-components/components/svg-icon.stories.js b/packages/insomnia-components/components/svg-icon.stories.js
index 849d6450909..f70085de80a 100644
--- a/packages/insomnia-components/components/svg-icon.stories.js
+++ b/packages/insomnia-components/components/svg-icon.stories.js
@@ -6,7 +6,7 @@ import { Table, TableBody, TableData, TableHead, TableHeader, TableRow } from '.
 import styled from 'styled-components';
 
 export default {
-  title: 'SvgIcon',
+  title: '1st Party | SvgIcon',
   decorators: [withKnobs],
 };
 
@@ -20,7 +20,9 @@ Wrapper.displayName = '...';
 
 export const _default = () => <SvgIcon icon={IconEnum.arrowRight} />;
 
-export const labelled = () => <SvgIcon icon={IconEnum.warning} label={text('Label', '3 Warnings')} />;
+export const labelled = () => (
+  <SvgIcon icon={IconEnum.warning} label={text('Label', '3 Warnings')} />
+);
 
 export const reference = () => (
   <React.Fragment>
diff --git a/packages/insomnia-components/components/switch.stories.js b/packages/insomnia-components/components/switch.stories.js
index 4e912016bc9..84e6b7c2f4a 100644
--- a/packages/insomnia-components/components/switch.stories.js
+++ b/packages/insomnia-components/components/switch.stories.js
@@ -1,8 +1,22 @@
 import React from 'react';
 import Switch from './switch';
 
-export default { title: 'Sliding Switch' };
+export default { title: '1st Party | Sliding Switch' };
 
-export const _design = () => <Switch optionItems={[{ label: 'DESIGN', selected: true }, { label: 'DEBUG', selected: false }]} />;
+export const _design = () => (
+  <Switch
+    optionItems={[
+      { label: 'DESIGN', selected: true },
+      { label: 'DEBUG', selected: false },
+    ]}
+  />
+);
 
-export const _debug = () => <Switch optionItems={[{ label: 'DESIGN', selected: false }, { label: 'DEBUG', selected: true }]} />;
+export const _debug = () => (
+  <Switch
+    optionItems={[
+      { label: 'DESIGN', selected: false },
+      { label: 'DEBUG', selected: true },
+    ]}
+  />
+);
diff --git a/packages/insomnia-components/components/table.stories.js b/packages/insomnia-components/components/table.stories.js
index b973ad700b6..580fce33b12 100644
--- a/packages/insomnia-components/components/table.stories.js
+++ b/packages/insomnia-components/components/table.stories.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { Table, TableBody, TableData, TableHead, TableHeader, TableRow } from './table';
 
-export default { title: 'Table' };
+export default { title: '1st Party | Table' };
 
 export const _default = () => (
   <Table>
diff --git a/packages/insomnia-components/components/toggle-switch.stories.js b/packages/insomnia-components/components/toggle-switch.stories.js
index 7b9f5545aef..fb30b1ff0e0 100644
--- a/packages/insomnia-components/components/toggle-switch.stories.js
+++ b/packages/insomnia-components/components/toggle-switch.stories.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ToggleSwitch from './toggle-switch';
 
-export default { title: '1 | 2 / Toggle Switch' };
+export default { title: '3rd Party | Toggle Switch' };
 
 const defaultOnChange = () => {};
 
diff --git a/packages/insomnia-components/components/tooltip.js b/packages/insomnia-components/components/tooltip.js
new file mode 100644
index 00000000000..46b0f79ed80
--- /dev/null
+++ b/packages/insomnia-components/components/tooltip.js
@@ -0,0 +1,236 @@
+// @flow
+import * as React from 'react';
+import autobind from 'autobind-decorator';
+import classnames from 'classnames';
+import ReactDOM from 'react-dom';
+import styled from 'styled-components';
+
+type Props = {
+  children: React.Node,
+  message: React.Node,
+  position?: 'bottom' | 'top' | 'right' | 'left',
+
+  // Optional
+  className?: string,
+  delay?: number,
+  selectable?: boolean,
+  wide?: boolean,
+};
+
+type State = {
+  visible: boolean,
+};
+
+const StyledTooltip: React.ComponentType<{}> = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+
+const StyledTooltipBubble: React.ComponentType<{}> = styled.div`
+  position: fixed;
+  left: -999999px;
+  opacity: 0;
+  background: var(--color-bg);
+  border: 1px solid var(--hl-sm);
+  box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
+  color: var(--color-font);
+  padding: var(--padding-sm) var(--padding-md);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-sm);
+  max-width: 20rem;
+  text-align: center;
+  z-index: 10;
+  white-space: normal !important;
+  word-wrap: break-word;
+
+  &.tooltip__bubble--visible {
+    opacity: 1;
+    z-index: 99999;
+    transition: opacity 200ms;
+
+    // Back to normal
+    height: auto;
+    line-height: normal;
+  }
+
+  &.tooltip__bubble--wide {
+    max-width: 30rem;
+  }
+`;
+
+@autobind
+class Tooltip extends React.PureComponent<Props, State> {
+  _showTimeout: TimeoutID;
+  _hideTimeout: TimeoutID;
+
+  // TODO: Figure out what type these should be
+  _tooltip: ?any;
+  _bubble: ?any;
+  _id: string;
+
+  constructor(props: any) {
+    super(props);
+
+    this.state = {
+      left: null,
+      top: null,
+      bottom: null,
+      right: null,
+      maxWidth: null,
+      maxHeight: null,
+      visible: false,
+    };
+
+    this._id = Math.random() + '';
+  }
+
+  _setTooltipRef(n: ?any) {
+    this._tooltip = n;
+  }
+
+  _setBubbleRef(n: ?any) {
+    this._bubble = n;
+  }
+
+  _handleStopClick(e: MouseEvent): void {
+    e.stopPropagation();
+  }
+
+  _handleMouseEnter(e: MouseEvent): void {
+    clearTimeout(this._showTimeout);
+    clearTimeout(this._hideTimeout);
+    this._showTimeout = setTimeout((): void => {
+      const tooltip = this._tooltip;
+      const bubble = this._bubble;
+
+      if (!tooltip) {
+        return;
+      }
+
+      if (!bubble) {
+        return;
+      }
+
+      const tooltipRect = tooltip.getBoundingClientRect();
+      const bubbleRect = bubble.getBoundingClientRect();
+      const margin = 3;
+
+      let left = 0;
+      let top = 0;
+      switch (this.props.position) {
+        case 'right':
+          top = tooltipRect.top - bubbleRect.height / 2 + tooltipRect.height / 2;
+          left = tooltipRect.left + tooltipRect.width + margin;
+          break;
+
+        case 'left':
+          top = tooltipRect.top - bubbleRect.height / 2 + tooltipRect.height / 2;
+          left = tooltipRect.left - bubbleRect.width - margin;
+          break;
+
+        case 'bottom':
+          top = tooltipRect.top + tooltipRect.height + margin;
+          left = tooltipRect.left - bubbleRect.width / 2 + tooltipRect.width / 2;
+          break;
+
+        case 'top':
+        default:
+          top = tooltipRect.top - bubbleRect.height - margin;
+          left = tooltipRect.left - bubbleRect.width / 2 + tooltipRect.width / 2;
+          break;
+      }
+
+      bubble.style.left = `${Math.max(0, left)}px`;
+      bubble.style.top = `${Math.max(0, top)}px`;
+
+      this.setState({ visible: true });
+    }, this.props.delay || 400);
+  }
+
+  _handleMouseLeave(): void {
+    clearTimeout(this._showTimeout);
+    clearTimeout(this._hideTimeout);
+    this._hideTimeout = setTimeout(() => {
+      this.setState({ visible: false });
+
+      const bubble = this._bubble;
+      if (!bubble) {
+        return;
+      }
+
+      // Reset positioning stuff
+      bubble.style.left = '';
+      bubble.style.top = '';
+      bubble.style.bottom = '';
+      bubble.style.right = '';
+    }, 100);
+  }
+
+  _getContainer(): HTMLElement {
+    let container = document.querySelector('#tooltips-container');
+    if (!container) {
+      container = document.createElement('div');
+      container.id = 'tooltips-container';
+      container.style.zIndex = '1000000';
+      container.style.position = 'relative';
+
+      document.body && document.body.appendChild(container);
+    }
+
+    return container;
+  }
+
+  componentDidMount() {
+    // Move the element to the body so we can position absolutely
+    if (this._bubble) {
+      const el = ReactDOM.findDOMNode(this._bubble);
+      el && this._getContainer().appendChild(el);
+    }
+  }
+
+  componentWillUnmount() {
+    // Remove the element from the body
+    if (this._bubble) {
+      const el = ReactDOM.findDOMNode(this._bubble);
+      el && this._getContainer().removeChild(el);
+    }
+  }
+
+  render() {
+    const { children, message, className, selectable, wide } = this.props;
+    const { visible } = this.state;
+
+    if (!message) {
+      return children;
+    }
+
+    const tooltipClasses = classnames(className, 'tooltip');
+    const bubbleClasses = classnames('tooltip__bubble theme--tooltip', {
+      'tooltip__bubble--visible': visible,
+      'tooltip__bubble--wide': wide,
+      selectable: selectable,
+    });
+
+    return (
+      <StyledTooltip
+        className={tooltipClasses}
+        ref={this._setTooltipRef}
+        id={this._id}
+        onMouseEnter={this._handleMouseEnter}
+        onMouseLeave={this._handleMouseLeave}>
+        <StyledTooltipBubble
+          className={bubbleClasses}
+          onClick={this._handleStopClick}
+          role="tooltip"
+          aria-hidden={!visible}
+          aria-describedby={this._id}
+          ref={this._setBubbleRef}>
+          {message}
+        </StyledTooltipBubble>
+        {children}
+      </StyledTooltip>
+    );
+  }
+}
+
+export default Tooltip;
diff --git a/packages/insomnia-components/components/tooltip.stories.js b/packages/insomnia-components/components/tooltip.stories.js
new file mode 100644
index 00000000000..b30cf08be76
--- /dev/null
+++ b/packages/insomnia-components/components/tooltip.stories.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import Tooltip from './tooltip';
+
+export default { title: 'Tooltip' };
+
+export const onTop = () => (
+  <div className="text-center">
+    <Tooltip message="Here is some extra info on top" position="top">
+      <button className="btn btn--clicky">Hover Me</button>
+    </Tooltip>
+  </div>
+);
+
+export const onRight = () => (
+  <div className="text-center">
+    <Tooltip message="Here is some extra info on the right" position="right">
+      <button className="btn btn--clicky">Hover Me</button>
+    </Tooltip>
+  </div>
+);
+
+export const onLeft = () => (
+  <div className="text-center">
+    <Tooltip message="Here is some extra info on the left" position="left">
+      <button className="btn btn--clicky">Hover Me</button>
+    </Tooltip>
+  </div>
+);
+
+export const withDelay = () => (
+  <div className="text-center">
+    <Tooltip message="This tooltip had a 900ms delay" delay={900}>
+      <button className="btn btn--clicky">Hover Me</button>
+    </Tooltip>
+  </div>
+);
+
+export const withChildren = () => {
+  const message = (
+    <React.Fragment>
+      This is a{' '}
+      <a href="#" onClick={e => e.preventDefault()}>
+        Link
+      </a>
+      .
+    </React.Fragment>
+  );
+
+  return (
+    <div className="text-center">
+      <Tooltip message={message}>
+        <button className="btn btn--clicky">Hover Me</button>
+      </Tooltip>
+    </div>
+  );
+};
diff --git a/packages/insomnia-components/flow-typed/@storybook/framer-motion.js b/packages/insomnia-components/flow-typed/@storybook/framer-motion.js
new file mode 100644
index 00000000000..23b1cf374a2
--- /dev/null
+++ b/packages/insomnia-components/flow-typed/@storybook/framer-motion.js
@@ -0,0 +1,10 @@
+// @flow
+
+declare module 'framer-motion' {
+  declare module.exports: {
+    motion: Object,
+    useCycle: Object,
+    AnimatePresence: Object,
+    withKnobs: Object,
+  }
+}
\ No newline at end of file
diff --git a/packages/insomnia-components/flow-typed/autobind-decorator.js b/packages/insomnia-components/flow-typed/autobind-decorator.js
new file mode 100644
index 00000000000..b29d11d9e0d
--- /dev/null
+++ b/packages/insomnia-components/flow-typed/autobind-decorator.js
@@ -0,0 +1,5 @@
+// @flow
+
+declare module 'autobind-decorator' {
+  declare module.exports: *;
+}
diff --git a/packages/insomnia-components/index.js b/packages/insomnia-components/index.js
index 44802b8fd94..c9d053ccc48 100644
--- a/packages/insomnia-components/index.js
+++ b/packages/insomnia-components/index.js
@@ -9,6 +9,7 @@ import _GravatarImg from './components/gravatar-img';
 import _Header from './components/header';
 import _NoticeTable from './components/notice-table';
 import _SvgIcon from './components/svg-icon';
+import _Sidebar from './components/sidebar';
 import _Switch from './components/switch';
 import _ToggleSwitch from './components/toggle-switch';
 import * as table from './components/table';
@@ -25,6 +26,7 @@ export const Header = _Header;
 export const NoticeTable = _NoticeTable;
 export const SvgIcon = _SvgIcon;
 export const Switch = _Switch;
+export const Sidebar = _Sidebar;
 export const Table = table.Table;
 export const TableBody = table.TableBody;
 export const TableData = table.TableData;
diff --git a/packages/insomnia-components/package-lock.json b/packages/insomnia-components/package-lock.json
index 86bb8ae30a8..2d313c55cdc 100644
--- a/packages/insomnia-components/package-lock.json
+++ b/packages/insomnia-components/package-lock.json
@@ -1367,6 +1367,23 @@
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
+    "@popmotion/easing": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@popmotion/easing/-/easing-1.0.2.tgz",
+      "integrity": "sha512-IkdW0TNmRnWTeWI7aGQIVDbKXPWHVEYdGgd5ZR4SH/Ty/61p63jCjrPxX1XrR7IGkl08bjhJROStD7j+RKgoIw=="
+    },
+    "@popmotion/popcorn": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/@popmotion/popcorn/-/popcorn-0.4.4.tgz",
+      "integrity": "sha512-jYO/8319fKoNLMlY4ZJPiPu8Ea8occYwRZhxpaNn/kZsK4QG2E7XFlXZMJBsTWDw7I1i0uaqyC4zn1nwEezLzg==",
+      "requires": {
+        "@popmotion/easing": "^1.0.1",
+        "framesync": "^4.0.1",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "^3.1.7",
+        "tslib": "^1.10.0"
+      }
+    },
     "@reach/router": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.2.1.tgz",
@@ -6624,6 +6641,31 @@
         "map-cache": "^0.2.2"
       }
     },
+    "framer-motion": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-1.10.3.tgz",
+      "integrity": "sha512-VooCzGWg7brSO4Gc0YwpY5AadJe4OPS74ZyOlOHWll5rMXCoOc6Ia3uDQ6RfOJlwCP/D9TQuRGtboyJiVXjVcw==",
+      "requires": {
+        "@emotion/is-prop-valid": "^0.8.2",
+        "@popmotion/easing": "^1.0.2",
+        "@popmotion/popcorn": "^0.4.2",
+        "framesync": "^4.0.4",
+        "hey-listen": "^1.0.8",
+        "popmotion": "9.0.0-beta-8",
+        "style-value-types": "^3.1.6",
+        "stylefire": "^7.0.2",
+        "tslib": "^1.10.0"
+      }
+    },
+    "framesync": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-4.0.4.tgz",
+      "integrity": "sha512-mdP0WvVHe0/qA62KG2LFUAOiWLng5GLpscRlwzBxu2VXOp6B8hNs5C5XlFigsMgrfDrr2YbqTsgdWZTc4RXRMQ==",
+      "requires": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^1.10.0"
+      }
+    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -7613,6 +7655,11 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true
     },
+    "hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "highlight.js": {
       "version": "9.13.1",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.13.1.tgz",
@@ -8590,6 +8637,12 @@
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
+    "lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=",
+      "dev": true
+    },
     "lodash.throttle": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
@@ -8639,6 +8692,12 @@
         "semver": "^5.6.0"
       }
     },
+    "make-event-props": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-1.2.0.tgz",
+      "integrity": "sha512-BmWFkm/jZzVH9A0tEBdkjAARUz/eha+5IRyfOndeSMKRadkgR5DawoBHoRwLxkYmjJOI5bHkXKpaZocxj+dKgg==",
+      "dev": true
+    },
     "map-age-cleaner": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
@@ -8776,6 +8835,12 @@
         "is-what": "^3.3.1"
       }
     },
+    "merge-class-names": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/merge-class-names/-/merge-class-names-1.3.0.tgz",
+      "integrity": "sha512-k0Qaj36VBpKgdc8c188LEZvo6v/zzry/FUufwopWbMSp6/knfVFU/KIB55/hJjeIpg18IH2WskXJCRnM/1BrdQ==",
+      "dev": true
+    },
     "merge-deep": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.2.tgz",
@@ -9166,6 +9231,12 @@
         "minimatch": "^3.0.2"
       }
     },
+    "node-ensure": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/node-ensure/-/node-ensure-0.0.0.tgz",
+      "integrity": "sha1-7K52QVDemYYexcgQ/V0Jaxg5Mqc=",
+      "dev": true
+    },
     "node-fetch": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
@@ -9737,6 +9808,16 @@
         "sha.js": "^2.4.8"
       }
     },
+    "pdfjs-dist": {
+      "version": "2.1.266",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.1.266.tgz",
+      "integrity": "sha512-Jy7o1wE3NezPxozexSbq4ltuLT0Z21ew/qrEiAEeUZzHxMHGk4DUV1D7RuCXg5vJDvHmjX1YssN+we9QfRRgXQ==",
+      "dev": true,
+      "requires": {
+        "node-ensure": "^0.0.0",
+        "worker-loader": "^2.0.0"
+      }
+    },
     "picomatch": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.1.tgz",
@@ -9830,6 +9911,19 @@
         "@babel/runtime": "^7.6.3"
       }
     },
+    "popmotion": {
+      "version": "9.0.0-beta-8",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.0.0-beta-8.tgz",
+      "integrity": "sha512-6eQzqursPvnP7ePvdfPeY4wFHmS3OLzNP8rJRvmfFfEIfpFqrQgLsM50Gd9AOvGKJtYJOFknNG+dsnzCpgIdAA==",
+      "requires": {
+        "@popmotion/easing": "^1.0.1",
+        "@popmotion/popcorn": "^0.4.2",
+        "framesync": "^4.0.4",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "^3.1.6",
+        "tslib": "^1.10.0"
+      }
+    },
     "popper.js": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
@@ -10625,6 +10719,20 @@
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
       "dev": true
     },
+    "react-pdf": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-4.1.0.tgz",
+      "integrity": "sha512-SYwkWc+vRQHfrpDls3DOgn4G+wT0mYGJRor20e28GPRW8VB+6o8WqZ4QZxsl50z+dKM7UscXFnK/02eN3NXi2g==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "lodash.once": "^4.1.1",
+        "make-event-props": "^1.1.0",
+        "merge-class-names": "^1.1.1",
+        "pdfjs-dist": "2.1.266",
+        "prop-types": "^15.6.2"
+      }
+    },
     "react-popper": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz",
@@ -11766,6 +11874,15 @@
       "integrity": "sha512-tWEpK0snS2RPUq1i3R6OahfJNjWCQYNxq0+by1amCSuw0mXtymJpzmZIeYpA1UAa+7B0grCpNYIbDcd7AgTbFg==",
       "dev": true
     },
+    "storybook-addon-designs": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/storybook-addon-designs/-/storybook-addon-designs-5.2.0.tgz",
+      "integrity": "sha512-53+d15uqoAaNQffbpvuSkcgubZh7cKNC+44azS+aDMzQubgHj9hQZ255XSmtXGxfyVsngGpK1QnHCCZ+13KH/Q==",
+      "dev": true,
+      "requires": {
+        "react-pdf": "^4.0.5"
+      }
+    },
     "stream-browserify": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
@@ -11931,6 +12048,15 @@
         }
       }
     },
+    "style-value-types": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-3.1.7.tgz",
+      "integrity": "sha512-jPaG5HcAPs3vetSwOJozrBXxuHo9tjZVnbRyBjxqb00c2saIoeuBJc1/2MtvB8eRZy41u/BBDH0CpfzWixftKg==",
+      "requires": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^1.10.0"
+      }
+    },
     "styled-components": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.4.1.tgz",
@@ -11951,6 +12077,18 @@
         "supports-color": "^5.5.0"
       }
     },
+    "stylefire": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/stylefire/-/stylefire-7.0.3.tgz",
+      "integrity": "sha512-Q0l7NSeFz/OkX+o6/7Zg3VZxSAZeQzQpYomWmIpOehFM/rJNMSLVX5fgg6Q48ut2ETNKwdhm97mPNU643EBCoQ==",
+      "requires": {
+        "@popmotion/popcorn": "^0.4.4",
+        "framesync": "^4.0.0",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "^3.1.7",
+        "tslib": "^1.10.0"
+      }
+    },
     "stylis": {
       "version": "3.5.4",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
@@ -12302,8 +12440,7 @@
     "tslib": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
-      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==",
-      "dev": true
+      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
     },
     "tty-browserify": {
       "version": "0.0.0",
@@ -13062,6 +13199,28 @@
         "errno": "~0.1.7"
       }
     },
+    "worker-loader": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-2.0.0.tgz",
+      "integrity": "sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.0.0",
+        "schema-utils": "^0.4.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "0.4.7",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
+          "integrity": "sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
     "worker-rpc": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/worker-rpc/-/worker-rpc-0.1.1.tgz",
diff --git a/packages/insomnia-components/package.json b/packages/insomnia-components/package.json
index c594b86efe2..41e2e44e511 100644
--- a/packages/insomnia-components/package.json
+++ b/packages/insomnia-components/package.json
@@ -25,6 +25,7 @@
     "@storybook/addon-contexts": "^5.3.10",
     "@storybook/addon-info": "^5.3.9",
     "@storybook/addon-knobs": "^5.3.10",
+    "storybook-addon-designs": "^5.2.0",
     "@storybook/react": "^5.3.9",
     "@svgr/cli": "^5.3.0",
     "babel-loader": "^8.0.6",
@@ -36,6 +37,7 @@
     "autobind-decorator": "^2.4.0",
     "classnames": "^2.2.6",
     "fuzzysort": "^1.1.4",
+    "framer-motion": "^1.10.3",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
diff --git a/packages/openapi-2-kong/src/common.js b/packages/openapi-2-kong/src/common.js
index 390bb6a2435..51f61973d4e 100644
--- a/packages/openapi-2-kong/src/common.js
+++ b/packages/openapi-2-kong/src/common.js
@@ -37,15 +37,24 @@ export function getName(
   api: OpenApi3Spec,
   defaultValue?: string,
   slugifyOptions?: SlugifyOptions,
+  isKubernetes?: boolean,
 ): string {
-  let name = api['x-kong-name'] || '';
+  let rawName = '';
 
-  if (!name && typeof api.info?.title === 'string') {
-    name = api.info.title;
-  }
+  // Get $.info.x-kubernetes-ingress-metadata.name
+  rawName = isKubernetes && api.info?.['x-kubernetes-ingress-metadata']?.name;
+
+  // Get $.x-kong-name
+  rawName = rawName || api['x-kong-name'];
+
+  // Get $.info.title
+  rawName = rawName || api.info?.title;
 
-  name = name || defaultValue || 'openapi';
+  // Make sure the name is a string
+  const defaultName = defaultValue || 'openapi';
+  const name = typeof rawName === 'string' && rawName ? rawName : defaultName;
 
+  // Sluggify
   return generateSlug(name, slugifyOptions);
 }
 
diff --git a/packages/openapi-2-kong/src/kubernetes/__tests__/index.test.js b/packages/openapi-2-kong/src/kubernetes/__tests__/index.test.js
index 20c378185f6..e9a51b955cb 100644
--- a/packages/openapi-2-kong/src/kubernetes/__tests__/index.test.js
+++ b/packages/openapi-2-kong/src/kubernetes/__tests__/index.test.js
@@ -56,7 +56,7 @@ describe('index', () => {
         'x-kong-name': 'Kong Name',
         info: {
           'x-kubernetes-ingress-metadata': {
-            name: 'k8s-name',
+            name: 'K8s name',
           },
         },
       });
@@ -100,18 +100,21 @@ describe('index', () => {
       expect(result).toEqual({ 'konghq.com/override': 'name' });
     });
 
-    it('gets all annotations correctly', async () => {
-      const api: OpenApi3Spec = await parseSpec({
+    it('gets all annotations correctly', () => {
+      const originalAnnotations = {
+        'nginx.ingress.kubernetes.io/rewrite-target': '/',
+      };
+
+      const api: OpenApi3Spec = {
         ...spec,
         info: {
+          ...spec.info,
           'x-kubernetes-ingress-metadata': {
             name: 'info-name',
-            annotations: {
-              'nginx.ingress.kubernetes.io/rewrite-target': '/',
-            },
+            annotations: { ...originalAnnotations },
           },
         },
-      });
+      };
       const result = generateMetadataAnnotations(api, {
         pluginNames: ['one', 'two'],
         overrideName: 'name',
@@ -121,6 +124,11 @@ describe('index', () => {
         'konghq.com/plugins': 'one, two',
         'konghq.com/override': 'name',
       });
+
+      // Should not modify source metadata annotations object
+      expect(api.info['x-kubernetes-ingress-metadata']?.annotations).toStrictEqual(
+        originalAnnotations,
+      );
     });
   });
 
@@ -225,8 +233,6 @@ describe('index', () => {
       expect(generateServicePath(basePath)).toBe('/api/v1/.*');
     });
 
-    // This state arises when a serverUrl is https://api.insomnia.rest/api/{var} and no paths exist on spec.
-    // Is this correct?
     it('adds closing wildcard if basePath ends with wildcard and no specific path exists', () => {
       const serverBasePath = '/api/.*';
       expect(generateServicePath(serverBasePath)).toBe('/api/.*/.*');
@@ -252,7 +258,7 @@ describe('index', () => {
     it('handles basic server at root', () => {
       const result = generateRulesForServer(0, { url: 'http://api.insomnia.rest' }, 'my-ingress');
 
-      expect(result).toEqual({
+      expect(result).toStrictEqual({
         host: 'api.insomnia.rest',
         http: {
           paths: [
@@ -454,7 +460,7 @@ describe('index', () => {
 
       const result = generateKongForKubernetesConfigFromSpec(api, []);
 
-      expect(result.documents).toEqual([
+      expect(result.documents).toStrictEqual([
         keyAuthPluginDoc('g0'),
         dummyPluginDoc('g1'),
         ingressDoc([keyAuthName('g0'), dummyName('g1')], 'api.insomnia.rest', 'my-api-s0'),
@@ -483,7 +489,7 @@ describe('index', () => {
 
       const result = generateKongForKubernetesConfigFromSpec(api, []);
 
-      expect(result.documents).toEqual([
+      expect(result.documents).toStrictEqual([
         keyAuthPluginDoc('g0'),
         keyAuthPluginDoc('s1'),
         keyAuthPluginDoc('s2'),
@@ -512,7 +518,7 @@ describe('index', () => {
 
       const result = generateKongForKubernetesConfigFromSpec(api, []);
 
-      expect(result.documents).toEqual([
+      expect(result.documents).toStrictEqual([
         keyAuthPluginDoc('g0'),
         keyAuthPluginDoc('p1'),
         keyAuthPluginDoc('p2'),
@@ -548,7 +554,7 @@ describe('index', () => {
 
       const result = generateKongForKubernetesConfigFromSpec(api, []);
 
-      expect(result.documents).toEqual([
+      expect(result.documents).toStrictEqual([
         methodDoc('get'),
         methodDoc('put'),
         methodDoc('post'),
diff --git a/packages/openapi-2-kong/src/kubernetes/__tests__/util/plugin-helpers.js b/packages/openapi-2-kong/src/kubernetes/__tests__/util/plugin-helpers.js
index 1ba34c19412..b320e61a674 100644
--- a/packages/openapi-2-kong/src/kubernetes/__tests__/util/plugin-helpers.js
+++ b/packages/openapi-2-kong/src/kubernetes/__tests__/util/plugin-helpers.js
@@ -66,26 +66,30 @@ export const ingressDoc = (
   host: string,
   serviceName: string,
   path: ?string,
-) => ({
-  apiVersion: 'extensions/v1beta1',
-  kind: 'Ingress',
-  metadata: {
-    annotations: {
-      'konghq.com/plugins': plugins.join(', '),
+) => {
+  const backend = { serviceName, servicePort: 80 };
+  const paths = path ? { path, backend } : { backend };
+  return {
+    apiVersion: 'extensions/v1beta1',
+    kind: 'Ingress',
+    metadata: {
+      annotations: {
+        'konghq.com/plugins': plugins.join(', '),
+      },
+      name: 'my-api',
     },
-    name: 'my-api',
-  },
-  spec: {
-    rules: [
-      {
-        host,
-        http: {
-          paths: [{ backend: { serviceName, servicePort: 80 }, path }],
+    spec: {
+      rules: [
+        {
+          host,
+          http: {
+            paths: [paths],
+          },
         },
-      },
-    ],
-  },
-});
+      ],
+    },
+  };
+};
 
 export const ingressDocWithOverride = (
   plugins: Array<string>,
diff --git a/packages/openapi-2-kong/src/kubernetes/index.js b/packages/openapi-2-kong/src/kubernetes/index.js
index 4e23d14fcdb..5331ea4633c 100644
--- a/packages/openapi-2-kong/src/kubernetes/index.js
+++ b/packages/openapi-2-kong/src/kubernetes/index.js
@@ -105,12 +105,7 @@ type CustomAnnotations = {
 };
 
 export function generateMetadataName(api: OpenApi3Spec): string {
-  const name = api.info?.['x-kubernetes-ingress-metadata']?.name;
-  if (name) {
-    return name;
-  }
-
-  return getName(api, 'openapi', { lower: true, replacement: '-' });
+  return getName(api, 'openapi', { lower: true, replacement: '-' }, true);
 }
 
 export function generateMetadataAnnotations(
@@ -121,17 +116,18 @@ export function generateMetadataAnnotations(
 
   // Only continue if metadata annotations, or plugins, or overrides exist
   if (metadata?.annotations || pluginNames.length || overrideName) {
-    const annotations = metadata?.annotations || {};
+    const customAnnotations = {};
 
     if (pluginNames.length) {
-      annotations['konghq.com/plugins'] = pluginNames.join(', ');
+      customAnnotations['konghq.com/plugins'] = pluginNames.join(', ');
     }
 
     if (overrideName) {
-      annotations['konghq.com/override'] = overrideName;
+      customAnnotations['konghq.com/override'] = overrideName;
     }
 
-    return annotations;
+    const originalAnnotations = metadata?.annotations || {};
+    return { ...originalAnnotations, ...customAnnotations };
   }
 
   return null;
@@ -152,10 +148,11 @@ export function generateRulesForServer(
   const backend = { serviceName, servicePort };
 
   const pathsToUse: Array<string> = (paths?.length && paths) || ['']; // Make flow happy
-  const k8sPaths: Array<K8sPath> = pathsToUse.map(p => ({
-    path: generateServicePath(pathname, p),
-    backend,
-  }));
+  const k8sPaths: Array<K8sPath> = pathsToUse.map(p => {
+    const path = generateServicePath(pathname, p);
+
+    return path ? { path, backend } : { backend };
+  });
 
   const tlsConfig = generateTlsConfig(server);
   if (tlsConfig) {
@@ -226,8 +223,8 @@ export function generateServicePath(
     return undefined;
   }
 
-  const fullPath = urlJoin(serverBasePath, specificPath);
+  const fullPath = urlJoin(serverBasePath, specificPath, specificPath ? '' : '.*');
   const pathname = pathVariablesToWildcard(fullPath);
 
-  return pathname + (specificPath ? '' : '/.*');
+  return pathname;
 }