diff --git a/frontend/app/block/blockframe.tsx b/frontend/app/block/blockframe.tsx
index 1ee2c8ed..664ad285 100644
--- a/frontend/app/block/blockframe.tsx
+++ b/frontend/app/block/blockframe.tsx
@@ -348,9 +348,6 @@ const ConnStatusOverlay = React.memo(
                             <Button className={reconClassName} onClick={handleTryReconnect}>
                                 {reconDisplay}
                             </Button>
-                            {/* <Button className="secondary ghost vertical-padding-5 horizontal-padding-6">
-                                <i className="fa-sharp fa-regular fa-xmark-large"></i>
-                            </Button> */}
                         </div>
                     ) : null}
                 </div>
diff --git a/frontend/app/element/button.less b/frontend/app/element/button.less
index 3e177236..8d74b84b 100644
--- a/frontend/app/element/button.less
+++ b/frontend/app/element/button.less
@@ -22,46 +22,45 @@
     user-select: none;
     font-size: 14px;
     font-weight: normal;
-    opacity: 0.8;
-
-    &:hover {
-        opacity: 1;
-    }
+    transition: all 0.3s ease;
 
     &.solid {
         &.green {
-            color: var(--button-green-text-color);
-            background-color: var(--button-green-bg);
-            border: 1px solid var(--button-green-border-color);
+            color: #000000;
+            background-color: var(--accent-color);
+            border: 1px solid #29f200;
             &:hover {
-                color: var(--button-green-text-color);
+                color: #000000;
+                background-color: #29f200;
             }
         }
 
         &.grey {
-            background-color: var(--button-grey-bg);
-            border: 1px solid var(--button-grey-border-color);
-            color: var(--button-grey-text-color);
+            background-color: rgba(255, 255, 255, 0.04);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            color: var(--main-text-color);
             &:hover {
-                color: var(--button-grey-text-color);
+                color: var(--main-text-color);
+                background-color: rgba(255, 255, 255, 0.09);
             }
         }
 
         &.red {
-            background-color: var(--button-red-bg);
-            border: 1px solid var(--button-red-border-color);
-            color: var(--button-red-text-color);
+            background-color: #cc0000;
+            border: 1px solid #fc3131;
+            color: var(--main-text-color);
             &:hover {
-                color: var(--button-red-text-color);
+                background-color: #f93939;
             }
         }
 
         &.yellow {
-            color: var(--button-yellow-text-color);
-            background-color: var(--button-yellow-bg);
-            border: 1px solid var(--button-yellow-border-color);
+            color: #000000;
+            background-color: #c4a000;
+            border: 1px solid #fce94f;
             &:hover {
-                color: var(--button-yellow-text-color);
+                color: #000000;
+                background-color: #fce94f;
             }
         }
     }
@@ -69,34 +68,38 @@
     &.outlined {
         background-color: transparent;
         &.green {
-            color: var(--button-green-bg);
-            border: 1px solid var(--button-green-bg);
+            color: var(--accent-color);
+            border: 1px solid var(--accent-color);
             &:hover {
-                color: var(--button-green-bg);
+                color: #29f200;
+                border: 1px solid #29f200;
             }
         }
 
         &.grey {
-            border: 1px solid var(--button-grey-border-color);
-            color: var(--button-grey-text-color);
+            border: 1px solid rgba(255, 255, 255, 0.6);
+            color: rgba(255, 255, 255, 0.6);
             &:hover {
-                color: var(--button-grey-text-color);
+                color: var(--main-text-color);
+                border: 1px solid var(--main-text-color);
             }
         }
 
         &.red {
-            border: 1px solid var(--button-red-bg);
-            color: var(--button-red-bg);
+            border: 1px solid #cc0000;
+            color: #cc0000;
             &:hover {
-                color: var(--button-red-bg);
+                color: #ff3c3c;
+                border: 1px solid #ff3c3c;
             }
         }
 
         &.yellow {
-            color: var(--button-yellow-bg);
-            border: 1px solid var(--button-yellow-bg);
+            color: #c4a000;
+            border: 1px solid #c4a000;
             &:hover {
-                color: var(--button-yellow-bg);
+                color: #fce94f;
+                border: 1px solid #fce94f;
             }
         }
     }
@@ -110,33 +113,33 @@
 
         &.green {
             border: none;
-            color: var(--button-green-bg);
+            color: var(--accent-color);
             &:hover {
-                color: var(--button-green-bg);
+                color: #29f200;
             }
         }
 
         &.grey {
             border: none;
-            color: var(--button-grey-text-color);
+            color: rgba(255, 255, 255, 0.6);
             &:hover {
-                color: var(--button-grey-text-color);
+                color: var(--main-text-color);
             }
         }
 
         &.red {
             border: none;
-            color: var(--button-red-bg);
+            color: #cc0000;
             &:hover {
-                color: var(--button-red-bg);
+                color: #fc3131;
             }
         }
 
         &.yellow {
             border: none;
-            color: var(--button-yellow-bg);
+            color: #c4a000;
             &:hover {
-                color: var(--button-yellow-bg);
+                color: #fce94f;
             }
         }
     }
@@ -148,12 +151,11 @@
 
     &:focus,
     &.focus {
-        outline: 1px solid var(--button-focus-border-color);
+        outline: 1px solid var(--success-color);
         outline-offset: 2px;
     }
 
     // customs styles here
-
     &.border-radius-2 {
         border-radius: 4px;
     }
@@ -178,6 +180,16 @@
         border-radius: 10px;
     }
 
+    &.vertical-padding-0 {
+        padding-top: 0px;
+        padding-bottom: 0px;
+    }
+
+    &.vertical-padding-1 {
+        padding-top: 1px;
+        padding-bottom: 1px;
+    }
+
     &.vertical-padding-2 {
         padding-top: 2px;
         padding-bottom: 2px;
@@ -223,6 +235,16 @@
         padding-bottom: 10px;
     }
 
+    &.horizontal-padding-0 {
+        padding-left: 0px;
+        padding-right: 0px;
+    }
+
+    &.horizontal-padding-1 {
+        padding-left: 1px;
+        padding-right: 1px;
+    }
+
     &.horizontal-padding-2 {
         padding-left: 2px;
         padding-right: 2px;
diff --git a/frontend/app/element/button.tsx b/frontend/app/element/button.tsx
index a1db5c49..75403e34 100644
--- a/frontend/app/element/button.tsx
+++ b/frontend/app/element/button.tsx
@@ -1,41 +1,51 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
 import clsx from "clsx";
-import { Children, isValidElement, memo } from "react";
+import { Children, forwardRef, memo, ReactNode, useImperativeHandle, useRef } from "react";
+
 import "./button.less";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    forwardedRef?: React.RefObject<HTMLButtonElement>;
     className?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
+    target?: string;
+    source?: string;
 }
 
-const Button = memo(({ className = "", children, disabled, ...props }: ButtonProps) => {
-    const hasIcon = Children.toArray(children).some(
-        (child) => isValidElement(child) && (child as React.ReactElement).type === "svg"
-    );
+const Button = memo(
+    forwardRef<HTMLButtonElement, ButtonProps>(
+        ({ children, disabled, source, className = "", ...props }: ButtonProps, ref) => {
+            const btnRef = useRef<HTMLButtonElement>(null);
+            useImperativeHandle(ref, () => btnRef.current as HTMLButtonElement);
 
-    // Check if the className contains any of the categories: solid, outlined, or ghost
-    const containsButtonCategory = /(solid|outline|ghost)/.test(className);
-    // If no category is present, default to 'solid'
-    const categoryClassName = containsButtonCategory ? className : `solid ${className}`;
+            const childrenArray = Children.toArray(children);
 
-    // Check if the className contains any of the color options: green, grey, red, or yellow
-    const containsColor = /(green|grey|red|yellow)/.test(categoryClassName);
-    // If no color is present, default to 'green'
-    const finalClassName = containsColor ? categoryClassName : `green ${categoryClassName}`;
+            // Check if the className contains any of the categories: solid, outlined, or ghost
+            const containsButtonCategory = /(solid|outline|ghost)/.test(className);
+            // If no category is present, default to 'solid'
+            const categoryClassName = containsButtonCategory ? className : `solid ${className}`;
 
-    return (
-        <button
-            tabIndex={disabled ? -1 : 0}
-            className={clsx("button", finalClassName, {
-                disabled,
-                hasIcon,
-            })}
-            disabled={disabled}
-            {...props}
-        >
-            {children}
-        </button>
-    );
-});
+            // Check if the className contains any of the color options: green, grey, red, or yellow
+            const containsColor = /(green|grey|red|yellow)/.test(categoryClassName);
+            // If no color is present, default to 'green'
+            const finalClassName = containsColor ? categoryClassName : `green ${categoryClassName}`;
+
+            return (
+                <button
+                    ref={btnRef}
+                    tabIndex={disabled ? -1 : 0}
+                    className={clsx("button", finalClassName, {
+                        disabled,
+                    })}
+                    disabled={disabled}
+                    {...props}
+                >
+                    {childrenArray}
+                </button>
+            );
+        }
+    )
+);
 
 export { Button };
diff --git a/frontend/app/modals/modal.tsx b/frontend/app/modals/modal.tsx
index 00e59a2b..bdf14602 100644
--- a/frontend/app/modals/modal.tsx
+++ b/frontend/app/modals/modal.tsx
@@ -10,7 +10,6 @@ import "./modal.less";
 
 interface ModalProps {
     children?: React.ReactNode;
-    description?: string;
     okLabel?: string;
     cancelLabel?: string;
     className?: string;
@@ -21,20 +20,7 @@ interface ModalProps {
 }
 
 const Modal = forwardRef<HTMLDivElement, ModalProps>(
-    (
-        {
-            children,
-            className,
-            description,
-            cancelLabel,
-            okLabel,
-            onCancel,
-            onOk,
-            onClose,
-            onClickBackdrop,
-        }: ModalProps,
-        ref
-    ) => {
+    ({ children, className, cancelLabel, okLabel, onCancel, onOk, onClose, onClickBackdrop }: ModalProps, ref) => {
         const renderBackdrop = (onClick) => <div className="modal-backdrop" onClick={onClick}></div>;
 
         const renderFooter = () => {
diff --git a/frontend/app/modals/tos.tsx b/frontend/app/modals/tos.tsx
index 2f7d6b91..c7233f7c 100644
--- a/frontend/app/modals/tos.tsx
+++ b/frontend/app/modals/tos.tsx
@@ -117,7 +117,7 @@ const ModalPage1 = () => {
             </div>
             <footer className="unselectable">
                 <div className="button-wrapper">
-                    <Button className="font-weight-600 primary" onClick={acceptTos}>
+                    <Button className="font-weight-600" onClick={acceptTos}>
                         Continue
                     </Button>
                 </div>
@@ -146,7 +146,7 @@ const ModalPage2 = () => {
             </div>
             <footer className="unselectable">
                 <div className="button-wrapper">
-                    <Button className="font-weight-600 primary" onClick={handleGetStarted}>
+                    <Button className="font-weight-600" onClick={handleGetStarted}>
                         Get Started
                     </Button>
                 </div>
diff --git a/frontend/app/modals/typeaheadmodal.tsx b/frontend/app/modals/typeaheadmodal.tsx
index 46b4fa44..c9920cad 100644
--- a/frontend/app/modals/typeaheadmodal.tsx
+++ b/frontend/app/modals/typeaheadmodal.tsx
@@ -66,7 +66,7 @@ const Suggestions = forwardRef<HTMLDivElement, SuggestionsProps>(
 );
 
 interface TypeAheadModalProps {
-    anchorRef: React.RefObject<HTMLDivElement>;
+    anchorRef: React.RefObject<HTMLElement>;
     blockRef?: React.RefObject<HTMLDivElement>;
     suggestions?: SuggestionsType[];
     label?: string;
diff --git a/frontend/app/tab/tab.less b/frontend/app/tab/tab.less
index ddfde31f..61a56da9 100644
--- a/frontend/app/tab/tab.less
+++ b/frontend/app/tab/tab.less
@@ -35,7 +35,7 @@
         }
 
         .name {
-            color: white;
+            color: var(--main-text-color);
         }
     }
 
@@ -70,13 +70,8 @@
         align-items: center;
         justify-content: center;
         cursor: pointer;
-        opacity: 0.5;
         z-index: var(--zindex-tab-name);
         padding: 1px 2px;
-
-        &:hover {
-            opacity: 1;
-        }
     }
 
     &:hover .close {
diff --git a/frontend/app/tab/tab.tsx b/frontend/app/tab/tab.tsx
index 3c4faa6f..f1c4b21b 100644
--- a/frontend/app/tab/tab.tsx
+++ b/frontend/app/tab/tab.tsx
@@ -205,7 +205,7 @@ const Tab = React.memo(
                         >
                             {tabData?.name}
                         </div>
-                        <Button className="grey ghost close" onClick={onClose} onMouseDown={handleMouseDownOnClose}>
+                        <Button className="ghost grey close" onClick={onClose} onMouseDown={handleMouseDownOnClose}>
                             <i className="fa fa-solid fa-xmark" />
                         </Button>
                     </div>
diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx
index e47acd2e..0dabb1d0 100644
--- a/frontend/app/tab/tabbar.tsx
+++ b/frontend/app/tab/tabbar.tsx
@@ -485,7 +485,7 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
     if (appUpdateStatus === "ready") {
         updateAvailableLabel = (
             <Button
-                forwardedRef={updateStatusButtonRef}
+                ref={updateStatusButtonRef}
                 className="update-available-button"
                 title="Click to Install Update"
                 onClick={onUpdateAvailableClick}
diff --git a/frontend/app/view/waveai/waveai.less b/frontend/app/view/waveai/waveai.less
index 1634cbde..6e55a659 100644
--- a/frontend/app/view/waveai/waveai.less
+++ b/frontend/app/view/waveai/waveai.less
@@ -126,18 +126,11 @@
             border-radius: 100%;
             width: 27px;
             aspect-ratio: 1 /1;
-            color: var(--block-bg-color);
-            background-color: var(--main-text-color);
             display: flex;
             align-items: center;
             justify-content: center;
             flex: 0 0 auto;
             padding: 0;
-
-            &:hover,
-            &:focus {
-                background-color: var(--grey-text-color);
-            }
         }
     }
 }