diff --git a/client/src/components/BaseComponents/GButton.vue b/client/src/components/BaseComponents/GButton.vue
new file mode 100644
index 000000000000..21e1dc2815b2
--- /dev/null
+++ b/client/src/components/BaseComponents/GButton.vue
@@ -0,0 +1,342 @@
+<script setup lang="ts">
+import type { Placement } from "@popperjs/core";
+import { computed, ref } from "vue";
+import { RouterLink } from "vue-router";
+
+import { useAccessibleHover } from "@/composables/accessibleHover";
+import { useResolveElement } from "@/composables/resolveElement";
+import { useUid } from "@/composables/utils/uid";
+
+import { type ComponentColor, type ComponentSize, type ComponentVariantClassList, prefix } from "./componentVariants";
+
+import GTooltip from "./GTooltip.vue";
+
+const props = defineProps<{
+    href?: string;
+    to?: string;
+    color?: ComponentColor;
+    outline?: boolean;
+    disabled?: boolean;
+    title?: string;
+    disabledTitle?: string;
+    size?: ComponentSize;
+    tooltip?: boolean;
+    tooltipPlacement?: Placement;
+    inline?: boolean;
+    iconOnly?: boolean;
+    transparent?: boolean;
+    pill?: boolean;
+    pressed?: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: "click", event: PointerEvent): void;
+    (e: "update:pressed", pressed: boolean): void;
+}>();
+
+function onClick(event: PointerEvent) {
+    if (!props.disabled) {
+        emit("click", event);
+        emit("update:pressed", !props.pressed);
+    }
+}
+
+const variantClasses = computed(() => {
+    const classObject = {} as ComponentVariantClassList;
+    classObject[prefix(props.color ?? "grey")] = true;
+    classObject[prefix(props.size ?? "medium")] = true;
+    return classObject;
+});
+
+const styleClasses = computed(() => {
+    return {
+        "g-outline": props.outline,
+        "g-disabled": props.disabled,
+        "g-icon-only": props.iconOnly,
+        "g-inline": props.inline,
+        "g-pill": props.pill,
+        "g-transparent": props.transparent,
+        "g-pressed": props.pressed,
+    };
+});
+
+const baseComponent = computed(() => {
+    if (props.to) {
+        return RouterLink;
+    } else if (props.href) {
+        return "a" as const;
+    } else {
+        return "button" as const;
+    }
+});
+
+const currentTooltip = computed(() => {
+    if (props.disabled) {
+        return props.disabledTitle ?? props.title;
+    } else {
+        return props.title;
+    }
+});
+
+const currentTitle = computed(() => {
+    if (props.tooltip) {
+        return false;
+    } else {
+        return currentTooltip.value;
+    }
+});
+
+const tooltipId = useUid("g-tooltip");
+
+const describedBy = computed(() => {
+    if (props.tooltip) {
+        return tooltipId.value;
+    } else {
+        return false;
+    }
+});
+
+const buttonRef = ref<HTMLElement | InstanceType<typeof RouterLink> | null>(null);
+const tooltipRef = ref<InstanceType<typeof GTooltip>>();
+
+const buttonElementRef = useResolveElement(buttonRef);
+
+useAccessibleHover(
+    buttonElementRef,
+    () => {
+        tooltipRef.value?.show();
+    },
+    () => {
+        tooltipRef.value?.hide();
+    }
+);
+</script>
+
+<template>
+    <component
+        :is="baseComponent"
+        ref="buttonRef"
+        class="g-button"
+        :data-title="currentTooltip"
+        :class="{ ...variantClasses, ...styleClasses }"
+        :to="props.to"
+        :href="props.to ?? props.href"
+        :title="currentTitle"
+        :aria-describedby="describedBy"
+        v-bind="$attrs"
+        @click="onClick">
+        <slot></slot>
+
+        <!-- TODO: make tooltip a sibling in Vue 3 -->
+        <GTooltip
+            v-if="props.tooltip"
+            :id="tooltipId"
+            ref="tooltipRef"
+            :reference="buttonElementRef"
+            :text="currentTooltip"
+            :placement="props.tooltipPlacement" />
+    </component>
+</template>
+
+<style scoped lang="scss">
+.g-button {
+    display: inline-block;
+    margin: 0;
+    border: 1px solid;
+    border-radius: var(--spacing-1);
+    text-decoration: none;
+    vertical-align: middle;
+    cursor: pointer;
+
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+        box-shadow 0.15s ease-in-out;
+
+    @media (prefers-reduced-motion) {
+        transition: none;
+    }
+
+    &:focus {
+        outline: none;
+        box-shadow: 0 0 0 0.2rem rgb(from var(--color-blue-400) r g b / 0.33);
+        z-index: 999;
+    }
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 0.2rem var(--color-blue-400);
+        z-index: 999;
+    }
+
+    // sizes
+    &.g-small {
+        font-size: var(--font-size-small);
+        padding: var(--spacing-1) var(--spacing-2);
+    }
+
+    &.g-medium {
+        font-size: var(--font-size-medium);
+        padding: var(--spacing-1) var(--spacing-2);
+    }
+
+    &.g-large {
+        font-size: var(--font-size-large);
+        padding: var(--spacing-2) var(--spacing-3);
+    }
+
+    // colors
+    &.g-grey {
+        background-color: var(--color-grey-200);
+        border-color: var(--color-grey-300);
+        color: var(--color-grey-800);
+
+        &:hover,
+        &:focus-visible {
+            background-color: var(--color-grey-300);
+            border-color: var(--color-grey-400);
+
+            &:active {
+                background-color: var(--color-grey-400);
+                border-color: var(--color-grey-600);
+            }
+        }
+
+        &:focus-visible {
+            border-color: var(--color-grey-600);
+        }
+    }
+
+    @each $color in "blue", "green", "red", "yellow", "orange" {
+        &.g-#{$color} {
+            background-color: var(--color-#{$color}-600);
+            border-color: var(--color-#{$color}-600);
+            color: var(--color-#{$color}-100);
+
+            &:hover,
+            &:focus-visible {
+                background-color: var(--color-#{$color}-700);
+                border-color: var(--color-#{$color}-700);
+
+                &:active {
+                    background-color: var(--color-#{$color}-600);
+                    color: var(--color-#{$color}-100);
+                }
+            }
+
+            &:focus-visible {
+                border-color: var(--color-#{$color}-900);
+            }
+        }
+
+        &.g-outline:not(.g-pressed).g-#{$color} {
+            border-color: var(--color-#{$color}-600);
+            color: var(--color-#{$color}-600);
+
+            &:hover {
+                background-color: var(--color-#{$color}-600);
+                border-color: var(--color-#{$color}-600);
+                color: var(--color-#{$color}-100);
+            }
+
+            &:focus-visible {
+                border-color: var(--color-#{$color}-900);
+                background-color: var(--color-#{$color}-200);
+                color: var(--color-#{$color}-600);
+            }
+        }
+    }
+
+    &.g-outline:not(.g-pressed) {
+        background-color: var(--background-color);
+    }
+
+    &.g-disabled {
+        background-color: var(--color-grey-100);
+        border-color: var(--color-grey-200);
+        color: var(--color-grey-500);
+
+        &:hover,
+        &:focus-visible {
+            background-color: var(--color-grey-100);
+            border-color: var(--color-grey-200);
+
+            &:active {
+                background-color: var(--color-grey-100);
+                border-color: var(--color-grey-200);
+                color: var(--color-grey-500);
+            }
+        }
+
+        &:focus-visible {
+            border-color: var(--color-grey-500);
+        }
+
+        &.g-outline {
+            background-color: var(--background-color);
+            border-color: var(--color-grey-400);
+            color: var(--color-grey-400);
+
+            &:hover,
+            &:focus,
+            &:focus-visible {
+                background-color: var(--background-color);
+                border-color: var(--color-grey-400);
+                color: var(--color-grey-400);
+            }
+
+            &:focus-visible {
+                border-color: var(--color-grey-800);
+                background-color: var(--background-color);
+                color: var(--color-grey-500);
+            }
+        }
+    }
+
+    // variants
+    &.g-inline {
+        display: inline;
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    &.g-pill {
+        border-radius: 100rem;
+    }
+
+    &.g-icon-only {
+        aspect-ratio: 1;
+        display: inline-flex;
+        justify-content: center;
+
+        &.g-small,
+        &.g-medium {
+            padding: var(--spacing-1);
+        }
+
+        &.g-large {
+            padding: var(--spacing-2);
+        }
+
+        &.g-inline {
+            padding: 2px;
+        }
+    }
+
+    &.g-transparent {
+        border: none;
+        background-color: rgb(100% 100% 100% / 0);
+
+        @each $color in "blue", "green", "red", "yellow", "orange" {
+            &.g-#{$color} {
+                color: var(--color-#{$color}-600);
+
+                &:hover,
+                &:focus,
+                &:focus-visible {
+                    background-color: var(--color-#{$color}-600);
+                    color: var(--color-#{$color}-100);
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/client/src/components/BaseComponents/GButtonGroup.vue b/client/src/components/BaseComponents/GButtonGroup.vue
new file mode 100644
index 000000000000..3a441665f2a3
--- /dev/null
+++ b/client/src/components/BaseComponents/GButtonGroup.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+    vertical?: boolean;
+}>();
+
+const styleClasses = computed(() => {
+    return {
+        "g-vertical": props.vertical,
+    };
+});
+</script>
+
+<template>
+    <div class="g-button-group" :class="styleClasses">
+        <slot></slot>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.g-button-group {
+    display: inline-flex;
+    gap: 0;
+
+    &:not(.g-vertical) {
+        &:deep(.g-button) {
+            &:not(:nth-child(1 of .g-button)) {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            &:not(:nth-last-child(1 of .g-button)) {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+
+                border-right: 0;
+            }
+        }
+    }
+
+    &.g-vertical {
+        flex-direction: column;
+
+        &:deep(.g-button) {
+            &:not(:nth-child(1 of .g-button)) {
+                border-top-left-radius: 0;
+                border-top-right-radius: 0;
+            }
+
+            &:not(:nth-last-child(1 of .g-button)) {
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+
+                border-bottom: 0;
+            }
+        }
+    }
+}
+</style>
diff --git a/client/src/components/BaseComponents/GTooltip.vue b/client/src/components/BaseComponents/GTooltip.vue
new file mode 100644
index 000000000000..50850bfe3557
--- /dev/null
+++ b/client/src/components/BaseComponents/GTooltip.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import type { Instance as PopperInstance, Placement } from "@popperjs/core";
+import { createPopper } from "@popperjs/core";
+import { watchImmediate } from "@vueuse/core";
+import { ref } from "vue";
+
+import { assertDefined } from "@/utils/assertions";
+
+const props = defineProps<{
+    id: string;
+    reference: HTMLElement | null;
+    text?: string;
+    placement?: Placement;
+}>();
+
+const tooltip = ref<HTMLDivElement>();
+const popperInstance = ref<PopperInstance | null>(null);
+const isShowing = ref(false);
+
+watchImmediate(
+    () => [props.id, props.reference],
+    () => {
+        popperInstance.value?.destroy();
+
+        if (!props.reference) {
+            return;
+        }
+
+        assertDefined(tooltip.value);
+
+        popperInstance.value = createPopper(props.reference, tooltip.value, {
+            placement: props.placement ?? "top",
+            modifiers: [
+                {
+                    name: "flip",
+                },
+                {
+                    name: "offset",
+                    options: {
+                        offset: [0, 8],
+                    },
+                },
+                {
+                    name: "preventOverflow",
+                    options: {
+                        altBoundary: true,
+                    },
+                },
+                {
+                    name: "arrow",
+                    options: {
+                        padding: 8,
+                    },
+                },
+            ],
+        });
+    }
+);
+
+function show() {
+    isShowing.value = true;
+
+    popperInstance.value?.setOptions((options) => ({
+        ...options,
+        modifiers: [...(options.modifiers ?? []), { name: "eventListeners", enabled: true }],
+    }));
+
+    popperInstance.value?.update();
+}
+
+function hide() {
+    isShowing.value = false;
+
+    popperInstance.value?.setOptions((options) => ({
+        ...options,
+        modifiers: [...(options.modifiers ?? []), { name: "eventListeners", enabled: false }],
+    }));
+}
+
+defineExpose({
+    show,
+    hide,
+});
+</script>
+
+<template>
+    <div
+        :id="props.id"
+        ref="tooltip"
+        role="tooltip"
+        class="g-tooltip"
+        :class="{ 'sr-only': !isShowing }"
+        :data-show="isShowing">
+        <slot></slot>
+        {{ props.text ?? "" }}
+        <div class="g-tooltip-arrow" data-popper-arrow></div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.g-tooltip {
+    background-color: var(--color-blue-800);
+    color: var(--color-grey-100);
+    padding: var(--spacing-1) var(--spacing-2);
+    font-size: var(--font-size-small);
+    border-radius: var(--spacing-1);
+    pointer-events: none;
+    font-weight: 400;
+    z-index: 9999;
+
+    &:not(.sr-only) {
+        display: block;
+    }
+
+    .g-tooltip-arrow {
+        visibility: hidden;
+
+        &,
+        &::before {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            background: inherit;
+            z-index: -1;
+        }
+
+        &::before {
+            visibility: visible;
+            content: "";
+            transform: translateX(-4px) rotate(45deg);
+        }
+    }
+
+    &[data-popper-placement^="top"] > .g-tooltip-arrow {
+        bottom: -4px;
+    }
+
+    &[data-popper-placement^="bottom"] > .g-tooltip-arrow {
+        top: -4px;
+    }
+
+    &[data-popper-placement^="left"] > .g-tooltip-arrow {
+        right: -4px;
+    }
+
+    &[data-popper-placement^="right"] > .g-tooltip-arrow {
+        left: -4px;
+    }
+}
+</style>
diff --git a/client/src/components/BaseComponents/componentVariants.ts b/client/src/components/BaseComponents/componentVariants.ts
new file mode 100644
index 000000000000..6f7dcbbb3e9e
--- /dev/null
+++ b/client/src/components/BaseComponents/componentVariants.ts
@@ -0,0 +1,12 @@
+export type ComponentColor = "grey" | "blue" | "green" | "yellow" | "orange" | "red";
+export type ComponentSize = "small" | "medium" | "large";
+
+export type ComponentVariantClassList = {
+    [_key in `g-${ComponentSize}`]?: true;
+} & {
+    [_key in `g-${ComponentColor}`]?: true;
+};
+
+export function prefix<T extends string>(key: T): `g-${T}` {
+    return `g-${key}`;
+}
diff --git a/client/src/components/Common/BreadcrumbHeading.vue b/client/src/components/Common/BreadcrumbHeading.vue
index 3dcc62c9bdfe..55a6db9f6722 100644
--- a/client/src/components/Common/BreadcrumbHeading.vue
+++ b/client/src/components/Common/BreadcrumbHeading.vue
@@ -14,8 +14,8 @@ const props = defineProps<Props>();
 </script>
 
 <template>
-    <div class="breadcrumb-heading">
-        <Heading h1 separator inline size="md" class="breadcrumb-heading-header">
+    <div class="breadcrumb-heading mb-2">
+        <Heading h1 separator inline size="md" class="breadcrumb-heading-header mr-2 mb-0">
             <template v-for="(item, index) in props.items">
                 <RouterLink
                     v-if="item.to"
@@ -50,7 +50,6 @@ const props = defineProps<Props>();
 
     .breadcrumb-heading-header {
         flex-grow: 1;
-        margin-bottom: 0.5rem;
 
         .breadcrumb-heading-header-active {
             overflow: hidden;
diff --git a/client/src/components/History/CurrentHistory/HistoryCounter.vue b/client/src/components/History/CurrentHistory/HistoryCounter.vue
index 898502ecf975..29176018660b 100644
--- a/client/src/components/History/CurrentHistory/HistoryCounter.vue
+++ b/client/src/components/History/CurrentHistory/HistoryCounter.vue
@@ -19,6 +19,7 @@ import { useUserStore } from "@/stores/userStore";
 
 import PreferredStorePopover from "./PreferredStorePopover.vue";
 import SelectPreferredStore from "./SelectPreferredStore.vue";
+import GButton from "@/components/BaseComponents/GButton.vue";
 
 const { isOnlyPreference } = useStorageLocationConfiguration();
 
@@ -147,18 +148,19 @@ onMounted(() => {
 
 <template>
     <div class="history-size my-1 d-flex justify-content-between">
-        <BButton
-            v-b-tooltip.hover
+        <GButton
+            tooltip
             title="History Size"
-            variant="link"
-            size="sm"
-            class="rounded-0 text-decoration-none history-storage-overview-button"
+            transparent
+            size="small"
+            color="blue"
+            class="rounded-0 history-storage-overview-button"
             :disabled="!canManageStorage"
             data-description="storage dashboard button"
             @click="onDashboard">
             <FontAwesomeIcon :icon="faDatabase" />
             <span>{{ niceHistorySize }}</span>
-        </BButton>
+        </GButton>
 
         <BButtonGroup v-if="currentUser">
             <BButton
diff --git a/client/src/components/History/HistoryView.test.js b/client/src/components/History/HistoryView.test.js
index 0a00dc3ec91a..48a4a06f1c51 100644
--- a/client/src/components/History/HistoryView.test.js
+++ b/client/src/components/History/HistoryView.test.js
@@ -112,7 +112,7 @@ describe("History center panel View", () => {
     }
 
     function storageDashboardButtonDisabled(wrapper) {
-        return wrapper.find("[data-description='storage dashboard button']").attributes("disabled");
+        return wrapper.find("[data-description='storage dashboard button']").classes().includes("g-disabled");
     }
 
     it("current user's current history", async () => {
diff --git a/client/src/components/Workflow/Editor/Tools/ToolBar.vue b/client/src/components/Workflow/Editor/Tools/ToolBar.vue
index 4e6c3814f2f1..b9b446a4dc0d 100644
--- a/client/src/components/Workflow/Editor/Tools/ToolBar.vue
+++ b/client/src/components/Workflow/Editor/Tools/ToolBar.vue
@@ -15,7 +15,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useMagicKeys, whenever } from "@vueuse/core";
-import { BButton, BButtonGroup, BFormInput } from "bootstrap-vue";
+import { BFormInput } from "bootstrap-vue";
 //@ts-ignore deprecated package without types (vue 2, remove this comment on vue 3 migration)
 import { BoxSelect, Workflow } from "lucide-vue";
 import { storeToRefs } from "pinia";
@@ -31,6 +31,8 @@ import { AutoLayoutAction } from "../Actions/stepActions";
 import { useSelectionOperations } from "./useSelectionOperations";
 import { useToolLogic } from "./useToolLogic";
 
+import GButton from "@/components/BaseComponents/GButton.vue";
+import GButtonGroup from "@/components/BaseComponents/GButtonGroup.vue";
 import ColorSelector from "@/components/Workflow/Editor/Comments/ColorSelector.vue";
 
 library.add(
@@ -160,132 +162,153 @@ function autoLayout() {
     <div class="workflow-editor-toolbar">
         <div class="tools">
             <template v-if="toolbarVisible">
-                <BButtonGroup vertical>
-                    <BButton
-                        v-b-tooltip.hover.noninteractive.right
+                <GButtonGroup vertical>
+                    <GButton
+                        tooltip
+                        tooltip-placement="right"
+                        outline
+                        color="blue"
                         class="button"
                         data-tool="pointer"
                         title="Pointer Tool (Ctrl + 1)"
                         :pressed="currentTool === 'pointer'"
-                        variant="outline-primary"
                         @click="onClickPointer">
                         <FontAwesomeIcon icon="fa-mouse-pointer" size="lg" />
-                    </BButton>
-                    <BButton
-                        v-b-tooltip.hover.noninteractive.right
+                    </GButton>
+                    <GButton
+                        tooltip
+                        tooltip-placement="right"
+                        outline
+                        color="blue"
                         class="button"
                         data-tool="toggle_snap"
                         :title="snapButtonTitle"
-                        :pressed.sync="snapActive"
-                        variant="outline-primary">
+                        :pressed.sync="snapActive">
                         <FontAwesomeIcon icon="fa-magnet" size="lg" />
-                    </BButton>
-                </BButtonGroup>
-
-                <BButtonGroup vertical>
-                    <BButton
-                        v-b-tooltip.hover.noninteractive.right
+                    </GButton>
+                </GButtonGroup>
+
+                <GButtonGroup vertical>
+                    <GButton
+                        tooltip
+                        tooltip-placement="right"
+                        outline
+                        color="blue"
                         class="button font-weight-bold"
                         data-tool="text_comment"
                         title="Text comment (Ctrl + 3)"
                         :pressed="currentTool === 'textComment'"
-                        variant="outline-primary"
                         @click="() => onCommentToolClick('textComment')">
                         <span class="icon-t">T</span>
-                    </BButton>
-                    <BButton
-                        v-b-tooltip.hover.noninteractive.right
+                    </GButton>
+                    <GButton
+                        tooltip
+                        tooltip-placement="right"
+                        outline
+                        color="blue"
                         class="button"
                         data-tool="markdown_comment"
                         title="Markdown comment (Ctrl + 4)"
                         :pressed="currentTool === 'markdownComment'"
-                        variant="outline-primary"
                         @click="() => onCommentToolClick('markdownComment')">
                         <FontAwesomeIcon :icon="['fab', 'markdown']" size="lg" />
-                    </BButton>
-                    <BButton
-                        v-b-tooltip.hover.noninteractive.right
+                    </GButton>
+                    <GButton
+                        tooltip
+                        tooltip-placement="right"
+                        outline
+                        color="blue"
                         class="button"
                         data-tool="frame_comment"
                         title="Frame comment (Ctrl + 5)"
                         :pressed="currentTool === 'frameComment'"
-                        variant="outline-primary"
                         @click="() => onCommentToolClick('frameComment')">
                         <FontAwesomeIcon icon="fa-object-group" size="lg" />
-                    </BButton>
-                </BButtonGroup>
-
-                <BButtonGroup vertical>
-                    <BButton
-                        v-b-tooltip.hover.noninteractive.right
+                    </GButton>
+                </GButtonGroup>
+
+                <GButtonGroup vertical>
+                    <GButton
+                        tooltip
+                        tooltip-placement="right"
+                        outline
+                        color="blue"
                         title="Freehand Pen (Ctrl + 6)"
                         data-tool="freehand_pen"
                         :pressed="currentTool === 'freehandComment'"
                         class="button"
-                        variant="outline-primary"
                         @click="() => onCommentToolClick('freehandComment')">
                         <FontAwesomeIcon icon="fa-pen" size="lg" />
-                    </BButton>
-                    <BButton
-                        v-b-tooltip.hover.noninteractive.right
+                    </GButton>
+                    <GButton
+                        tooltip
+                        tooltip-placement="right"
+                        outline
+                        color="blue"
                         title="Freehand Eraser (Ctrl + 7)"
                         data-tool="freehand_eraser"
                         :pressed="currentTool === 'freehandEraser'"
                         class="button"
-                        variant="outline-primary"
                         @click="() => onCommentToolClick('freehandEraser')">
                         <FontAwesomeIcon icon="fa-eraser" size="lg" />
-                    </BButton>
-                </BButtonGroup>
-
-                <BButton
-                    v-b-tooltip.hover.noninteractive.right
+                    </GButton>
+                </GButtonGroup>
+
+                <GButton
+                    tooltip
+                    tooltip-placement="right"
+                    outline
+                    color="blue"
                     title="Box Select (Ctrl + 8)"
                     data-tool="box_select"
                     :pressed="currentTool === 'boxSelect'"
                     class="button"
-                    variant="outline-primary"
                     @click="onClickBoxSelect">
                     <BoxSelect />
-                </BButton>
+                </GButton>
 
-                <BButton
+                <GButton
                     id="auto-layout-button"
-                    v-b-tooltip.hover.noninteractive.right
+                    tooltip
+                    tooltip-placement="right"
+                    outline
+                    color="blue"
                     title="Auto Layout (Ctrl + 9)"
                     data-tool="auto_layout"
                     class="button"
                     variant="outline-primary"
                     @click="autoLayout">
                     <Workflow />
-                </BButton>
+                </GButton>
             </template>
 
-            <BButton
-                v-b-tooltip.hover.noninteractive.right
+            <GButton
+                tooltip
+                tooltip-placement="right"
+                outline
+                color="blue"
                 class="toggle-visibility-button"
                 :title="toggleVisibilityButtonTitle"
-                variant="outline-primary"
                 @click="toolbarVisible = !toolbarVisible">
                 <FontAwesomeIcon v-if="toolbarVisible" icon="fa-chevron-up" />
                 <FontAwesomeIcon v-else icon="fa-chevron-down" />
-            </BButton>
+            </GButton>
         </div>
         <div v-if="toolbarVisible" class="options">
             <div v-if="anySelected" class="selection-options">
                 <span>{{ selectedCountText }}</span>
 
-                <BButtonGroup>
-                    <BButton class="button" title="clear selection" @click="deselectAll">
+                <GButtonGroup>
+                    <GButton class="button" title="clear selection" @click="deselectAll">
                         Clear <FontAwesomeIcon icon="fa-times" />
-                    </BButton>
-                    <BButton class="button" title="duplicate selected" @click="duplicateSelection">
+                    </GButton>
+                    <GButton class="button" title="duplicate selected" @click="duplicateSelection">
                         Duplicate <FontAwesomeIcon icon="fa-clone" />
-                    </BButton>
-                    <BButton class="button" title="delete selected" @click="deleteSelection">
+                    </GButton>
+                    <GButton class="button" title="delete selected" @click="deleteSelection">
                         Delete <FontAwesomeIcon icon="fa-trash" />
-                    </BButton>
-                </BButtonGroup>
+                    </GButton>
+                </GButtonGroup>
             </div>
 
             <div
@@ -309,22 +332,24 @@ function autoLayout() {
             </div>
 
             <div v-if="toolbarStore.currentTool === 'textComment'" class="option buttons">
-                <BButtonGroup>
-                    <BButton
+                <GButtonGroup>
+                    <GButton
                         :pressed.sync="commentOptions.bold"
-                        variant="outline-primary"
+                        outline
+                        color="blue"
                         class="button font-weight-bold"
                         data-option="toggle-bold">
                         Bold
-                    </BButton>
-                    <BButton
+                    </GButton>
+                    <GButton
                         :pressed.sync="commentOptions.italic"
-                        variant="outline-primary"
+                        outline
+                        color="blue"
                         class="button font-italic"
                         data-option="toggle-italic">
                         Italic
-                    </BButton>
-                </BButtonGroup>
+                    </GButton>
+                </GButtonGroup>
             </div>
 
             <div
@@ -382,36 +407,38 @@ function autoLayout() {
             </div>
 
             <div v-if="['freehandComment', 'freehandEraser'].includes(toolbarStore.currentTool)" class="option buttons">
-                <BButton
+                <GButton
                     class="button"
                     data-option="remove-freehand"
                     title="Remove all freehand comments"
                     @click="onRemoveAllFreehand">
                     Remove all
-                </BButton>
+                </GButton>
             </div>
 
             <div v-if="currentTool === 'boxSelect'" class="option buttons">
-                <BButtonGroup>
-                    <BButton
+                <GButtonGroup>
+                    <GButton
                         :pressed="toolbarStore.boxSelectMode === 'add'"
                         class="button"
+                        outline
+                        color="blue"
                         data-option="select-mode-add"
-                        variant="outline-primary"
                         title="add items to selection"
                         @click="toolbarStore.boxSelectMode = 'add'">
                         Add to selection
-                    </BButton>
-                    <BButton
+                    </GButton>
+                    <GButton
                         :pressed="toolbarStore.boxSelectMode === 'remove'"
                         class="button"
+                        outline
+                        color="blue"
                         data-option="select-mode-remove"
-                        variant="outline-primary"
                         title="remove items from selection"
                         @click="toolbarStore.boxSelectMode = 'remove'">
                         Remove from selection
-                    </BButton>
-                </BButtonGroup>
+                    </GButton>
+                </GButtonGroup>
             </div>
         </div>
     </div>
@@ -458,7 +485,9 @@ function autoLayout() {
     .toggle-visibility-button {
         height: 1.5rem;
         display: grid;
-        align-items: center;
+        place-items: center;
+        padding: 0;
+        width: 2.25rem;
     }
 
     .options {
diff --git a/client/src/components/Workflow/List/WorkflowActionsExtend.vue b/client/src/components/Workflow/List/WorkflowActionsExtend.vue
index bfcb50d3433a..0b5b523f3a96 100644
--- a/client/src/components/Workflow/List/WorkflowActionsExtend.vue
+++ b/client/src/components/Workflow/List/WorkflowActionsExtend.vue
@@ -10,7 +10,6 @@ import {
     faUpload,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BButtonGroup } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
 
@@ -21,6 +20,8 @@ import { useUserStore } from "@/stores/userStore";
 
 import { useWorkflowActions } from "./useWorkflowActions";
 
+import GButton from "@/components/BaseComponents/GButton.vue";
+import GButtonGroup from "@/components/BaseComponents/GButtonGroup.vue";
 import AsyncButton from "@/components/Common/AsyncButton.vue";
 import WorkflowRunButton from "@/components/Workflow/WorkflowRunButton.vue";
 
@@ -99,84 +100,90 @@ const { copyPublicLink, copyWorkflow, downloadUrl, importWorkflow } = useWorkflo
 
 <template>
     <div class="workflow-card-actions flex-gapx-1">
-        <BButtonGroup>
+        <GButtonGroup>
             <template v-if="!props.editor && !workflow.deleted">
-                <BButton
+                <GButton
                     v-if="workflow.published"
                     id="workflow-copy-public-button"
-                    v-b-tooltip.hover.noninteractive
-                    size="sm"
+                    tooltip
+                    outline
+                    size="small"
+                    color="blue"
                     title="Copy link to workflow"
-                    variant="outline-primary"
                     @click="copyPublicLink">
                     <FontAwesomeIcon :icon="faLink" fixed-width />
                     <span class="compact-view">Link to Workflow</span>
-                </BButton>
+                </GButton>
 
-                <BButton
+                <GButton
                     v-if="!isAnonymous && !shared"
                     id="workflow-copy-button"
-                    v-b-tooltip.hover.noninteractive
-                    size="sm"
+                    tooltip
+                    outline
+                    size="small"
+                    color="blue"
                     title="Copy"
-                    variant="outline-primary"
                     @click="copyWorkflow">
                     <FontAwesomeIcon :icon="faCopy" fixed-width />
                     <span class="compact-view">Copy</span>
-                </BButton>
+                </GButton>
 
-                <BButton
+                <GButton
                     id="workflow-download-button"
-                    v-b-tooltip.hover.noninteractive
-                    size="sm"
+                    tooltip
+                    outline
+                    size="small"
+                    color="blue"
                     title="Download workflow in .ga format"
-                    variant="outline-primary"
                     :href="downloadUrl">
                     <FontAwesomeIcon :icon="faDownload" fixed-width />
                     <span class="compact-view">Download</span>
-                </BButton>
+                </GButton>
 
-                <BButton
+                <GButton
                     v-if="!isAnonymous && !shared"
                     id="workflow-share-button"
-                    v-b-tooltip.hover.noninteractive
-                    size="sm"
+                    tooltip
+                    outline
+                    size="small"
+                    color="blue"
                     title="Share"
-                    variant="outline-primary"
                     :to="`/workflows/sharing?id=${workflow.id}`">
                     <FontAwesomeIcon :icon="faShareAlt" fixed-width />
                     <span class="compact-view">Share</span>
-                </BButton>
+                </GButton>
             </template>
 
-            <BButton
+            <GButton
                 v-if="workflow.deleted"
                 id="restore-button"
-                v-b-tooltip.hover.noninteractive
-                size="sm"
+                tooltip
+                outline
+                size="small"
+                color="blue"
                 title="Restore"
-                variant="outline-primary"
                 @click="onRestore">
                 <FontAwesomeIcon :icon="faTrashRestore" fixed-width />
                 <span class="compact-view">Restore</span>
-            </BButton>
-        </BButtonGroup>
+            </GButton>
+        </GButtonGroup>
 
-        <div>
+        <div class="d-flex flex-gapx-1 align-items-center">
             <i v-if="props.current" class="mr-2"> current workflow </i>
 
-            <BButton
+            <GButton
                 v-if="!isAnonymous && !shared && !props.current"
-                v-b-tooltip.hover.noninteractive
                 :disabled="workflow.deleted"
-                size="sm"
+                tooltip
+                outline
+                size="small"
+                color="blue"
                 class="workflow-edit-button"
                 :title="editButtonTitle"
-                variant="outline-primary"
                 :to="`/workflows/edit?id=${workflow.id}`">
                 <FontAwesomeIcon :icon="faEdit" fixed-width />
                 Edit
-            </BButton>
+            </GButton>
 
             <AsyncButton
                 v-else-if="!props.current"
@@ -196,27 +203,29 @@ const { copyPublicLink, copyWorkflow, downloadUrl, importWorkflow } = useWorkflo
                 :disabled="isAnonymous || workflow.deleted"
                 :title="runButtonTitle" />
 
-            <BButtonGroup v-if="props.editor && !workflow.deleted">
-                <BButton
-                    v-b-tooltip.hover.noninteractive
-                    size="sm"
+            <GButtonGroup v-if="props.editor && !workflow.deleted">
+                <GButton
+                    tooltip
+                    outline
+                    size="small"
+                    color="blue"
                     title="Copy steps into workflow"
-                    variant="outline-primary"
                     @click="emit('insertSteps')">
                     <FontAwesomeIcon :icon="faCopy" fixed-width />
-                </BButton>
+                </GButton>
 
-                <BButton
+                <GButton
                     v-if="!props.current"
-                    v-b-tooltip.hover.noninteractive
-                    size="sm"
+                    tooltip
+                    outline
+                    size="small"
+                    color="blue"
                     title="Insert as sub-workflow"
-                    variant="primary"
                     @click="emit('insert')">
                     <FontAwesomeIcon :icon="faPlusSquare" fixed-width />
                     <span> Insert </span>
-                </BButton>
-            </BButtonGroup>
+                </GButton>
+            </GButtonGroup>
         </div>
     </div>
 </template>
diff --git a/client/src/components/Workflow/List/WorkflowCard.vue b/client/src/components/Workflow/List/WorkflowCard.vue
index c274c0568487..722c3dd1055a 100644
--- a/client/src/components/Workflow/List/WorkflowCard.vue
+++ b/client/src/components/Workflow/List/WorkflowCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faPen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BFormCheckbox, BLink } from "bootstrap-vue";
+import { BFormCheckbox, BLink } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 
@@ -9,6 +9,7 @@ import { type WorkflowSummary } from "@/api/workflows";
 import { updateWorkflow } from "@/components/Workflow/workflows.services";
 import { useUserStore } from "@/stores/userStore";
 
+import GButton from "@/components/BaseComponents/GButton.vue";
 import TextSummary from "@/components/Common/TextSummary.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 import WorkflowActions from "@/components/Workflow/List/WorkflowActions.vue";
@@ -133,17 +134,19 @@ const dropdownOpen = ref(false);
                         {{ workflow.name }}
                     </BLink>
 
-                    <BButton
+                    <GButton
                         v-if="!props.current && !shared && !workflow.deleted"
-                        v-b-tooltip.hover.noninteractive
+                        tooltip
+                        icon-only
+                        transparent
+                        color="blue"
                         :data-workflow-rename="workflow.id"
-                        class="inline-icon-button workflow-rename"
-                        variant="link"
-                        size="sm"
+                        class="workflow-rename"
+                        size="small"
                         title="Rename"
                         @click="emit('rename', props.workflow.id, props.workflow.name)">
                         <FontAwesomeIcon :icon="faPen" fixed-width />
-                    </BButton>
+                    </GButton>
                 </span>
 
                 <TextSummary
diff --git a/client/src/components/Workflow/List/WorkflowListActions.vue b/client/src/components/Workflow/List/WorkflowListActions.vue
index f2d2a08a91d3..dfefb47ebb79 100644
--- a/client/src/components/Workflow/List/WorkflowListActions.vue
+++ b/client/src/components/Workflow/List/WorkflowListActions.vue
@@ -2,13 +2,13 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { useUserStore } from "@/stores/userStore";
 
+import GButton from "@/components/BaseComponents/GButton.vue";
+
 library.add(faPlus, faUpload);
 
 const router = useRouter();
@@ -17,21 +17,6 @@ const userStore = useUserStore();
 
 const { isAnonymous } = storeToRefs(userStore);
 
-const createButtonTitle = computed(() => {
-    if (isAnonymous.value) {
-        return "Log in to create workflow";
-    } else {
-        return "Create new workflow";
-    }
-});
-const importButtonTitle = computed(() => {
-    if (isAnonymous.value) {
-        return "Log in to import workflow";
-    } else {
-        return "Import workflow from URL or file";
-    }
-});
-
 function navigateToImport() {
     router.push("/workflows/import");
 }
@@ -42,31 +27,35 @@ function navigateToOldCreate() {
 </script>
 
 <template>
-    <div id="workflow-list-actions" class="d-flex justify-content-between">
-        <div>
-            <BButton
-                id="workflow-create"
-                v-b-tooltip.hover.noninteractive
-                size="sm"
-                :title="createButtonTitle"
-                variant="outline-primary"
-                :disabled="isAnonymous"
-                @click="navigateToOldCreate">
-                <FontAwesomeIcon :icon="faPlus" />
-                Create
-            </BButton>
-
-            <BButton
-                id="workflow-import"
-                v-b-tooltip.hover.noninteractive
-                size="sm"
-                :title="importButtonTitle"
-                variant="outline-primary"
-                :disabled="isAnonymous"
-                @click="navigateToImport">
-                <FontAwesomeIcon :icon="faUpload" />
-                Import
-            </BButton>
-        </div>
+    <div id="workflow-list-actions" class="d-flex align-items-center flex-gapx-1">
+        <GButton
+            id="workflow-create"
+            size="small"
+            outline
+            tooltip
+            tooltip-placement="bottom"
+            color="blue"
+            title="Create new workflow"
+            disabled-title="Log in to create workflow"
+            :disabled="isAnonymous"
+            @click="navigateToOldCreate">
+            <FontAwesomeIcon :icon="faPlus" />
+            Create
+        </GButton>
+
+        <GButton
+            id="workflow-import"
+            outline
+            tooltip
+            tooltip-placement="bottom"
+            size="small"
+            title="Import workflow from URL or file"
+            disabled-title="Log in to import workflow"
+            color="blue"
+            :disabled="isAnonymous"
+            @click="navigateToImport">
+            <FontAwesomeIcon :icon="faUpload" />
+            Import
+        </GButton>
     </div>
 </template>
diff --git a/client/src/composables/accessibleHover.ts b/client/src/composables/accessibleHover.ts
new file mode 100644
index 000000000000..069e0174734e
--- /dev/null
+++ b/client/src/composables/accessibleHover.ts
@@ -0,0 +1,59 @@
+import { type Ref, ref, watch } from "vue";
+
+export function useAccessibleHover(
+    elementRef: Ref<HTMLElement | null>,
+    onHoverEnter?: () => void,
+    onHoverExit?: () => void
+) {
+    const isHovering = ref(false);
+    let previousElement: HTMLElement | null = null;
+
+    function enter() {
+        if (!isHovering.value) {
+            onHoverEnter?.();
+            isHovering.value = true;
+        }
+    }
+
+    function exit() {
+        if (isHovering.value) {
+            onHoverExit?.();
+            isHovering.value = false;
+        }
+    }
+
+    function keydown(event: KeyboardEvent) {
+        if (event.key === "Escape") {
+            exit();
+        }
+    }
+
+    watch(
+        () => elementRef.value,
+        () => {
+            if (previousElement) {
+                exit();
+                previousElement.removeEventListener("mouseenter", enter);
+                previousElement.removeEventListener("focus", enter);
+                previousElement.removeEventListener("mouseleave", exit);
+                previousElement.removeEventListener("blur", exit);
+                previousElement.removeEventListener("keydown", keydown);
+            }
+
+            if (elementRef.value) {
+                elementRef.value.addEventListener("mouseenter", enter);
+                elementRef.value.addEventListener("focus", enter);
+                elementRef.value.addEventListener("mouseleave", exit);
+                elementRef.value.addEventListener("blur", exit);
+                elementRef.value.addEventListener("keydown", keydown);
+            }
+
+            previousElement = elementRef.value;
+        },
+        {
+            immediate: true,
+        }
+    );
+
+    return isHovering;
+}
diff --git a/client/src/composables/resolveElement.ts b/client/src/composables/resolveElement.ts
new file mode 100644
index 000000000000..818e8d906956
--- /dev/null
+++ b/client/src/composables/resolveElement.ts
@@ -0,0 +1,15 @@
+import { computed, type Ref } from "vue";
+
+export function useResolveElement(elementRef: Ref<unknown>) {
+    const resolvedRef = computed(() => {
+        const value = elementRef.value;
+
+        if (typeof value === "object" && value !== null && "$el" in value) {
+            return value.$el as HTMLElement;
+        } else {
+            return value as HTMLElement | null;
+        }
+    });
+
+    return resolvedRef;
+}
diff --git a/client/src/style/scss/custom_theme_variables.scss b/client/src/style/scss/custom_theme_variables.scss
index b8d909ffd374..013d5fc75955 100644
--- a/client/src/style/scss/custom_theme_variables.scss
+++ b/client/src/style/scss/custom_theme_variables.scss
@@ -1,7 +1,87 @@
+// todo remove import once all color is ported to css
 @import "theme/blue.scss";
 
 html,
 .reset-theme-variables {
+    --background-color: #ffffff;
+
+    // main colors
+    --color-blue-900: #040b21;
+    --color-blue-800: #191f33;
+    --color-blue-700: #2c3143;
+    --color-blue-600: #25537b;
+    --color-blue-500: #197cd2;
+    --color-blue-400: #48a1dd;
+    --color-blue-300: #80c3ea;
+    --color-blue-200: #daecf8;
+    --color-blue-100: #f1f9fe;
+
+    --color-grey-900: #191919;
+    --color-grey-800: #23262f;
+    --color-grey-700: #35373f;
+    --color-grey-600: #484a52;
+    --color-grey-500: #63656d;
+    --color-grey-400: #8f9199;
+    --color-grey-300: #aab0b4;
+    --color-grey-200: #dee2e6;
+    --color-grey-100: #f8f9fa;
+
+    --color-green-900: #002a1f;
+    --color-green-800: #003f2e;
+    --color-green-700: #006f50;
+    --color-green-600: #25a35b;
+    --color-green-500: #66cc66;
+    --color-green-400: #98e192;
+    --color-green-300: #c8edc8;
+    --color-green-200: #e0f7df;
+    --color-green-100: #f3fbf2;
+
+    --color-yellow-900: #362100;
+    --color-yellow-800: #462b00;
+    --color-yellow-700: #7f5102;
+    --color-yellow-600: #f0aa02;
+    --color-yellow-500: #ffd700;
+    --color-yellow-400: #ffe848;
+    --color-yellow-300: #fff489;
+    --color-yellow-200: #fefbc5;
+    --color-yellow-100: #fefeea;
+
+    --color-orange-900: #391100;
+    --color-orange-800: #461500;
+    --color-orange-700: #9b3a00;
+    --color-orange-600: #fe7e03;
+    --color-orange-500: #ff9b2f;
+    --color-orange-400: #ffae52;
+    --color-orange-300: #ffc985;
+    --color-orange-200: #ffedd5;
+    --color-orange-100: #fffaf1;
+
+    --color-red-900: #430111;
+    --color-red-800: #63021a;
+    --color-red-700: #91081b;
+    --color-red-600: #e31a1e;
+    --color-red-500: #f33b36;
+    --color-red-400: #ff817b;
+    --color-red-300: #f4a3a5;
+    --color-red-200: #fdd4d5;
+    --color-red-100: #fff3f3;
+
+    // sizes
+    --spacing: 0.25rem;
+    --spacing-1: var(--spacing);
+    --spacing-2: calc(var(--spacing) * 2);
+    --spacing-3: calc(var(--spacing) * 3);
+    --spacing-4: calc(var(--spacing) * 4);
+    --spacing-5: calc(var(--spacing) * 5);
+    --spacing-6: calc(var(--spacing) * 6);
+    --spacing-7: calc(var(--spacing) * 7);
+    --spacing-8: calc(var(--spacing) * 8);
+
+    --font-size-small: 0.75rem;
+    --font-size-base: 0.85rem;
+    --font-size-large: 1rem;
+
+    // masthead specific
     --masthead-color: #{$masthead-color};
     --masthead-text-color: #{$masthead-text-color};
     --masthead-text-hover: #{$masthead-text-hover};
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 71363ccfe6dc..1d47c5e909d7 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -615,7 +615,7 @@ workflows:
     workflows_list_empty: '#workflow-list-empty'
     workflow_not_found_message: '#no-workflow-found'
     workflow_card: '.workflow-card'
-    workflow_card_button: '.workflow-card[data-workflow-name="${name}"] button[title="${title}"]'
+    workflow_card_button: '.workflow-card[data-workflow-name="${name}"] button[data-title="${title}"]'
     workflow_cards: '#workflow-cards'
     external_link: '.workflow-external-link'
     trs_icon: '.workflow-trs-icon'