diff --git a/packages/ui/src/css/default.css b/packages/ui/src/css/default.css
index b92344d472..fd5cb6750d 100644
--- a/packages/ui/src/css/default.css
+++ b/packages/ui/src/css/default.css
@@ -53,7 +53,6 @@ code {
   font-family: var(--font-family-fixed);
 }
 
-/** Orbit updates */
 a {
   color: var(--color-primary);
 }
@@ -64,69 +63,3 @@ a:focus {
   color: var(--color-primary-dark);
   outline: none;
 }
-
-.ui-button--primary {
-  background: var(--color-primary);
-}
-
-.ui-button--primary:active,
-.ui-button--primary:focus,
-.ui-button--primary:hover {
-  background: var(--color-primary-dark);
-}
-
-.ui-button--secondary {
-  background: var(--color-secondary);
-}
-
-.ui-button--secondary:active,
-.ui-button--secondary:focus,
-.ui-button--secondary:hover {
-  background: var(--color-secondary-dark);
-}
-
-.ui-button--info {
-  background: var(--color-info);
-}
-
-.ui-button--info:active,
-.ui-button--info:focus,
-.ui-button--info:hover {
-  background: var(--color-info-dark);
-}
-
-.ui-button--success {
-  background: var(--color-success);
-}
-
-.ui-button--success:active,
-.ui-button--success:focus,
-.ui-button--success:hover {
-  background: var(--color-success-dark);
-}
-
-
-.ui-button--warning {
-  background: var(--color-warning);
-}
-
-.ui-button--warning:active,
-.ui-button--warning:focus,
-.ui-button--warning:hover {
-  background: var(--color-warning-dark);
-}
-
-.ui-button--danger {
-  background: var(--color-danger);
-}
-
-.ui-button--danger:active,
-.ui-button--danger:focus,
-.ui-button--danger:hover {
-  background: var(--color-danger-dark);
-}
-
-.__reakit-portal {
-  z-index: var(--layer-xhigh);
-  position: relative;
-}
diff --git a/packages/ui/src/css/variables.css b/packages/ui/src/css/variables.css
index e1e15980a6..ee5f80b75c 100644
--- a/packages/ui/src/css/variables.css
+++ b/packages/ui/src/css/variables.css
@@ -185,6 +185,7 @@
   --layer: 100;
   --layer-high: 1000;
   --layer-xhigh: 10000;
+  --layer-xxhigh: 100000;
 
   --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
   --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
diff --git a/packages/ui/src/ui/hover-card/hover-card.module.css b/packages/ui/src/ui/hover-card/hover-card.module.css
index 7832dd722d..88cf2d1b70 100644
--- a/packages/ui/src/ui/hover-card/hover-card.module.css
+++ b/packages/ui/src/ui/hover-card/hover-card.module.css
@@ -17,6 +17,7 @@
 }
 
 .hoverCard {
+  z-index: var(--layer-xxhigh);
   padding: var(--space-xsmall) var(--space-small);
   border-radius: var(--radius-medium);
   width: calc(100vw - 2 * var(--space-small));
diff --git a/packages/ui/src/ui/hover-card/hover-card.tsx b/packages/ui/src/ui/hover-card/hover-card.tsx
index 98a1114f32..359c0359fb 100644
--- a/packages/ui/src/ui/hover-card/hover-card.tsx
+++ b/packages/ui/src/ui/hover-card/hover-card.tsx
@@ -31,7 +31,7 @@ export const HoverCard = (props: HoverCardProps) => {
     children,
   } = props;
 
-  const state = useHovercardState({ gutter: 8, timeout: 800 });
+  const state = useHovercardState({ gutter: 8, timeout: 300 });
   const hovercardProps = useHovercard({ state, portal: true });
 
   // Fallback to span if no href
@@ -62,7 +62,6 @@ export const HoverCard = (props: HoverCardProps) => {
         {...hovercardProps}
         state={state}
         className={cx(css.hoverCard, hoverCardClassName)}
-        style={{ zIndex: 10000 }}
       >
         <HovercardArrow size={24} />
         {typeof children === 'function' ? children({ close: state.hide }) : children}
diff --git a/packages/ui/src/ui/tooltip/tooltip.module.css b/packages/ui/src/ui/tooltip/tooltip.module.css
index 535a6b4cde..9790b9b468 100644
--- a/packages/ui/src/ui/tooltip/tooltip.module.css
+++ b/packages/ui/src/ui/tooltip/tooltip.module.css
@@ -19,6 +19,7 @@
   filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
   font-size: var(--size-xsmall);
+  z-index: var(--layer-xxhigh);
 }
 
 .arrow svg {