diff --git a/app/web/src/components/ActionWidget.vue b/app/web/src/components/ActionWidget.vue
index d8ea4efc3a..900a4707f5 100644
--- a/app/web/src/components/ActionWidget.vue
+++ b/app/web/src/components/ActionWidget.vue
@@ -9,7 +9,7 @@
     "
     @click="clickHandler"
   >
-    <Icon :name="iconName" />
+    <StatusIndicatorIcon type="action" :status="action?.name" tone="inherit" />
     <Stack spacing="2xs">
       <div>{{ action?.displayName }}</div>
       <div class="text-xs text-neutral-300">{{ component?.displayName }}</div>
@@ -29,9 +29,10 @@
 import * as _ from "lodash-es";
 import clsx from "clsx";
 import { PropType, computed } from "vue";
-import { Icon, IconNames, Stack } from "@si/vue-lib/design-system";
+import { Icon, Stack } from "@si/vue-lib/design-system";
 import { ActionPrototypeId, useActionsStore } from "@/store/actions.store";
 import { ComponentId, useComponentsStore } from "@/store/components.store";
+import StatusIndicatorIcon from "./StatusIndicatorIcon.vue";
 
 const props = defineProps({
   componentId: { type: String as PropType<ComponentId>, required: true },
@@ -57,15 +58,6 @@ const action = computed(() => {
 
 const isActive = computed(() => !!action.value?.actionInstanceId);
 
-const iconName = computed<IconNames>(() => {
-  if (!action.value) return "help-circle";
-  if (action.value.name === "create") return "resource-create";
-  if (action.value.name === "delete") return "resource-delete";
-  if (action.value.name.trim() === "refresh") return "resource-refresh";
-  if (action.value.name === "other") return "resource-question";
-  return "help-circle";
-});
-
 function clickHandler() {
   if (!action.value) return;
   if (action.value.actionInstanceId) {
diff --git a/app/web/src/components/AssetActionsDetails.vue b/app/web/src/components/AssetActionsDetails.vue
index 6b349f713c..c7bec76112 100644
--- a/app/web/src/components/AssetActionsDetails.vue
+++ b/app/web/src/components/AssetActionsDetails.vue
@@ -13,8 +13,9 @@
         </div>
         <div v-else class="flex flex-col p-xs gap-xs">
           <div class="text-sm text-neutral-300">
-            Actions will be enacted upon click of the
-            <b>APPLY CHANGES</b> button in the right rail.
+            Actions will be enacted after this change set has been applied. To
+            do so, deselect this component and click the "Apply Changes" button
+            in the top right.
           </div>
           <ActionWidget
             v-for="action in actions"
diff --git a/app/web/src/components/AssetPalette.vue b/app/web/src/components/AssetPalette.vue
index 180e8c396e..dd627ee9e8 100644
--- a/app/web/src/components/AssetPalette.vue
+++ b/app/web/src/components/AssetPalette.vue
@@ -7,31 +7,23 @@
       </div>
     </template>
     <template v-else-if="schemasReqStatus.isSuccess">
-      <ScrollArea class="">
-        <SiSearch
-          autoSearch
-          placeholder="search assets"
-          @search="onSearchUpdated"
-        />
+      <ScrollArea>
         <template #top>
-          <SidebarSubpanelTitle label="Assets" icon="component-plus" />
-
-          <div
-            ref="instructionsRef"
-            class="border-b-2 dark:border-neutral-600 text-sm leading-tight p-2.5 text-neutral-400 dark:text-neutral-300 flex flex-row items-center gap-2"
-          >
-            <!-- <a
-              href="#"
-              class="hover:text-neutral-600 dark:hover:text-neutral-400"
-              @click="hideInstructions"
-            >
-              <Icon name="x-circle" />
-            </a> -->
-            <div>
-              Drag the assets that you wish to include in your application into
-              the canvas to the right.
-            </div>
-          </div>
+          <SidebarSubpanelTitle label="Assets" icon="component-plus">
+            <Icon
+              v-tooltip="
+                'Drag the assets that you wish to include in your application into the canvas to the right.'
+              "
+              allowPointerEvents
+              name="question-circle"
+            />
+          </SidebarSubpanelTitle>
+
+          <SiSearch
+            autoSearch
+            placeholder="search assets"
+            @search="onSearchUpdated"
+          />
         </template>
 
         <ul class="overflow-y-auto">
@@ -98,14 +90,6 @@ import SiSearch from "@/components/SiSearch.vue";
 
 defineProps<{ fixesAreRunning: boolean }>();
 
-const instructionsRef = ref();
-
-// const hideInstructions = () => {
-//   if (instructionsRef.value) {
-//     instructionsRef.value.classList.add("hidden");
-//   }
-// };
-
 const componentsStore = useComponentsStore();
 // NOTE - component store is automatically fetching things we need when it is used
 // otherwise we could trigger calls here
@@ -175,8 +159,13 @@ function onSelect(schemaId: string, fixesAreRunning: boolean) {
     return;
   }
 
-  componentsStore.selectedInsertSchemaId = schemaId;
-  selecting.value = true;
+  if (componentsStore.selectedInsertSchemaId === schemaId) {
+    componentsStore.selectedInsertSchemaId = null;
+    selecting.value = false;
+  } else {
+    componentsStore.selectedInsertSchemaId = schemaId;
+    selecting.value = true;
+  }
 }
 
 function onDeselect() {
diff --git a/app/web/src/components/AttributesPanel/AttributesPanel.vue b/app/web/src/components/AttributesPanel/AttributesPanel.vue
index 7d6f3f537c..c6bfbd773a 100644
--- a/app/web/src/components/AttributesPanel/AttributesPanel.vue
+++ b/app/web/src/components/AttributesPanel/AttributesPanel.vue
@@ -25,20 +25,6 @@
         @blur="updateSiProp('name')"
         @keyup.enter="updateSiProp('name')"
       />
-      <div class="attributes-panel__type-dropdown">
-        <select v-model="siValues.type" @change="updateSiProp('type')">
-          <option value="component">Component</option>
-          <option value="configurationFrame">Configuration Frame</option>
-          <option value="aggregationFrame">Aggregation Frame</option>
-        </select>
-        <Icon name="chevron--down" />
-      </div>
-      <Icon
-        :name="siValues.protected ? 'lock' : 'lock-open'"
-        class="attributes-panel__protected-switch"
-        allowPointerEvents
-        @click="toggleProtectedHandler"
-      />
     </div>
 
     <LoadingMessage v-if="loadSchemaReqStatus.isPending && !domainTree">
@@ -108,7 +94,6 @@ import mitt, { Emitter } from "mitt";
 import {
   DropdownMenu,
   DropdownMenuItem,
-  Icon,
   JsonTreeExplorer,
   LoadingMessage,
 } from "@si/vue-lib/design-system";
@@ -150,10 +135,6 @@ const siProps = computed(() => attributesStore.siTreeByPropName);
 const siValuesFromStore = computed(() => ({
   name: (siProps.value?.name?.value?.value as string) || component.displayName,
   color: (siProps.value?.color?.value?.value as string) || component.color,
-  protected: (siProps.value?.protected?.value?.value as boolean) || false,
-  type:
-    (siProps.value?.type?.value?.value as typeof component.nodeType) ||
-    component.nodeType,
 }));
 const siValues = reactive(siValuesFromStore.value);
 
@@ -177,28 +158,15 @@ function updateSiProp(key: keyof typeof siValues) {
   const prop = siProps.value?.[key as string];
   if (!prop) return;
 
-  if (key === "type") {
-    // TODO: not sure why only this one gets a special handler...?
-    attributesStore.SET_COMPONENT_TYPE({
-      value: newVal,
+  attributesStore.UPDATE_PROPERTY_VALUE({
+    update: {
+      attributeValueId: prop.valueId,
+      parentAttributeValueId: prop.parentValueId,
+      propId: prop.propId,
       componentId: component.id,
-    });
-  } else {
-    attributesStore.UPDATE_PROPERTY_VALUE({
-      update: {
-        attributeValueId: prop.valueId,
-        parentAttributeValueId: prop.parentValueId,
-        propId: prop.propId,
-        componentId: component.id,
-        value: newVal,
-      },
-    });
-  }
-}
-
-function toggleProtectedHandler() {
-  siValues.protected = !siValues.protected;
-  updateSiProp("protected");
+      value: newVal,
+    },
+  });
 }
 
 // color picker
@@ -314,7 +282,7 @@ provide(AttributesPanelContextInjectionKey, {
   height: 40px;
   margin: @spacing-px[sm];
   margin-left: @spacing-px[md];
-  margin-right: 2px;
+  margin-right: 8px;
 
   input,
   select {
@@ -343,41 +311,4 @@ provide(AttributesPanelContextInjectionKey, {
   flex-shrink: 1;
   min-width: 50px;
 }
-
-.attributes-panel__protected-switch {
-  width: 40px;
-  height: 40px;
-  padding: 8px;
-  height: inherit;
-  cursor: pointer;
-
-  body.light & {
-    color: @colors-neutral-700;
-  }
-
-  &:hover {
-    transform: scale(1.1);
-  }
-}
-.attributes-panel__type-dropdown {
-  position: relative;
-  height: inherit;
-  flex-grow: 1;
-  min-width: 120px;
-
-  select {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    padding-right: 30px;
-    text-overflow: ellipsis;
-  }
-  .icon {
-    position: absolute;
-    right: 4px;
-    top: 0;
-    height: inherit;
-    z-index: 3;
-  }
-}
 </style>
diff --git a/app/web/src/components/AttributesPanel/AttributesPanelItem.vue b/app/web/src/components/AttributesPanel/AttributesPanelItem.vue
index c92c2ec57b..5decabf2ea 100644
--- a/app/web/src/components/AttributesPanel/AttributesPanelItem.vue
+++ b/app/web/src/components/AttributesPanel/AttributesPanelItem.vue
@@ -156,7 +156,7 @@
         <!-- <Icon
           v-if="propName === 'region'"
           v-tooltip="'Some help info'"
-          name="help-circle"
+          name="question-circle"
           allowPointerEvents
           class="attributes-panel-item__help-icon"
         /> -->
@@ -437,7 +437,7 @@ const icon = computed((): IconNames => {
   if (propKind.value === "array") return "brackets-square";
   if (propKind.value === "map") return "brackets-curly";
   if (propKind.value === "object") return "bullet-list";
-  return WIDGET_ICON_LOOKUP[widgetKind.value] || "help-circle";
+  return WIDGET_ICON_LOOKUP[widgetKind.value] || "question-circle";
 });
 
 const HEADER_HEIGHT = 24;
@@ -639,6 +639,7 @@ function secretSelectedHandler(newSecret: Secret) {
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--panel-bg-color);
+  user-select: none;
 }
 
 .attributes-panel-item__section-header-child-count {
@@ -653,7 +654,7 @@ function secretSelectedHandler(newSecret: Secret) {
   position: absolute;
   width: @header-height;
   height: @header-height;
-  opacity: 0;
+  opacity: 0.8;
   transition: all 0.2s;
 
   body.light & {
@@ -756,7 +757,7 @@ function secretSelectedHandler(newSecret: Secret) {
   width: 45%;
   flex-shrink: 0;
   background: var(--input-bg-color);
-  margin-right: 4px;
+  margin-right: 8px;
   font-family: monospace;
   font-size: 13px;
   line-height: 18px;
@@ -783,6 +784,14 @@ function secretSelectedHandler(newSecret: Secret) {
     min-height: 80px;
     margin: 0;
   }
+
+  // chrome + linux showing white on white text - this might fix it?
+  select {
+    option {
+      background: white;
+      color: black;
+    }
+  }
 }
 .attributes-panel-item__input-value {
   padding: 5px 8px;
@@ -880,7 +889,7 @@ function secretSelectedHandler(newSecret: Secret) {
   justify-content: center;
   cursor: pointer;
   flex-shrink: 0;
-  margin-right: 4px;
+  margin-right: 8px;
 
   // unset a few shared styles from the other buttons
   width: unset;
diff --git a/app/web/src/components/ComponentDetails.vue b/app/web/src/components/ComponentDetails.vue
index 077dba5802..d5ab71fc20 100644
--- a/app/web/src/components/ComponentDetails.vue
+++ b/app/web/src/components/ComponentDetails.vue
@@ -2,12 +2,6 @@
   <ScrollArea v-if="selectedComponent">
     <template #top>
       <SidebarSubpanelTitle label="Asset Details" icon="component" />
-
-      <div v-if="DEV_MODE" class="px-xs pt-xs text-2xs italic opacity-30">
-        COMPONENT ID = {{ selectedComponent.id }}
-        <br />
-        NODE ID = {{ selectedComponent.nodeId }}
-      </div>
       <ComponentCard :componentId="selectedComponent.id" class="m-xs" />
 
       <div
@@ -108,13 +102,32 @@
                   </div>
                 </template>
               </TabGroupItem>
-              <TabGroupItem label="Qualifications" slug="qualifications">
+              <TabGroupItem slug="qualifications">
+                <template #label>
+                  <Inline noWrap alignY="center">
+                    <span>Qualifications</span>
+                    <PillCounter
+                      :count="selectedComponentFailingQualificationsCount"
+                      tone="destructive"
+                    />
+                  </Inline>
+                </template>
                 <AssetQualificationsDetails
                   :componentId="selectedComponentId"
                 />
               </TabGroupItem>
 
               <TabGroupItem label="Diff" slug="diff">
+                <template #label>
+                  <Inline noWrap alignY="center">
+                    <span>Diff</span>
+                    <StatusIndicatorIcon
+                      type="change"
+                      :status="selectedComponent.changeStatus"
+                    />
+                  </Inline>
+                </template>
+
                 <AssetDiffDetails :componentId="selectedComponentId" />
               </TabGroupItem>
               <TabGroupItem label="Debug" slug="debug">
@@ -183,8 +196,6 @@ import AttributesPanel from "./AttributesPanel/AttributesPanel.vue";
 
 const emit = defineEmits(["delete", "restore"]);
 
-const DEV_MODE = import.meta.env.DEV;
-
 const componentsStore = useComponentsStore();
 const qualificationsStore = useQualificationsStore();
 const changeSetStore = useChangeSetsStore();
@@ -202,6 +213,12 @@ const selectedComponentQualificationStatus = computed(
       selectedComponentId.value
     ],
 );
+const selectedComponentFailingQualificationsCount = computed(
+  () =>
+    qualificationsStore.qualificationStatsByComponentId[
+      selectedComponentId.value
+    ]?.failed || 0,
+);
 
 const selectedComponentCode = computed(
   () => componentsStore.selectedComponentCode,
diff --git a/app/web/src/components/FixDetails.vue b/app/web/src/components/FixDetails.vue
index 4ef253d373..5d8d4f05fe 100644
--- a/app/web/src/components/FixDetails.vue
+++ b/app/web/src/components/FixDetails.vue
@@ -76,7 +76,10 @@ const icon = computed(() => {
       };
     case ResourceHealth.Unknown:
     default:
-      return { name: "help-circle" as IconNames, class: "text-neutral-300" };
+      return {
+        name: "question-circle" as IconNames,
+        class: "text-neutral-300",
+      };
   }
 });
 
diff --git a/app/web/src/components/GenericDiagram/DiagramControls.vue b/app/web/src/components/GenericDiagram/DiagramControls.vue
index 357d041584..a5ac5fa7d6 100644
--- a/app/web/src/components/GenericDiagram/DiagramControls.vue
+++ b/app/web/src/components/GenericDiagram/DiagramControls.vue
@@ -44,7 +44,7 @@
       :class="getButtonClasses(false)"
       @click="emit('open:help')"
     >
-      <Icon name="help-circle" size="full" />
+      <Icon name="question-circle" size="full" />
     </div>
 
     <div
diff --git a/app/web/src/components/StatusIndicatorIcon.vue b/app/web/src/components/StatusIndicatorIcon.vue
index dd8993d982..96de9a41ff 100644
--- a/app/web/src/components/StatusIndicatorIcon.vue
+++ b/app/web/src/components/StatusIndicatorIcon.vue
@@ -32,10 +32,10 @@ const CONFIG = {
     notexists: { iconName: "x-hex", tone: "destructive" },
   },
   action: {
-    create: { iconName: "resource-create", tone: "success" },
-    delete: { iconName: "resource-delete", tone: "destructive" },
-    refresh: { iconName: "resource-refresh", tone: "action" },
-    other: { iconName: "resource-question", tone: "action" },
+    create: { iconName: "plus-hex-outline", tone: "success" },
+    delete: { iconName: "minus-hex-outline", tone: "destructive" },
+    refresh: { iconName: "refresh-hex-outline", tone: "action" },
+    other: { iconName: "tilde-hex-outline", tone: "action" },
   },
   actions: {
     show: { iconName: "chevron--right", tone: "neutral" },
@@ -46,7 +46,7 @@ const CONFIG = {
     failure: { iconName: "alert-triangle", tone: "destructive" },
     error: { iconName: "alert-triangle", tone: "destructive" },
     unknown: { iconName: "question-circle", tone: "warning" },
-    _default: { iconName: "help-circle", tone: "warning" },
+    _default: { iconName: "question-circle", tone: "warning" },
   },
 };
 
diff --git a/app/web/src/store/component_attributes.store.ts b/app/web/src/store/component_attributes.store.ts
index faeef2de5b..33ec7a82d8 100644
--- a/app/web/src/store/component_attributes.store.ts
+++ b/app/web/src/store/component_attributes.store.ts
@@ -286,30 +286,6 @@ export const useComponentAttributesStore = (componentId: ComponentId) => {
               },
             });
           },
-
-          async SET_COMPONENT_TYPE(payload: SetTypeArgs) {
-            if (changeSetsStore.creatingChangeSet)
-              throw new Error("race, wait until the change set is created");
-            if (changeSetId === nilId())
-              changeSetsStore.creatingChangeSet = true;
-
-            const statusStore = useStatusStore();
-            statusStore.markUpdateStarted();
-
-            return new ApiRequest<{ success: true }>({
-              method: "post",
-              url: "component/set_type",
-              params: {
-                ...payload,
-                ...visibilityParams,
-              },
-              // onSuccess() {},
-              onFail() {
-                // may not work exactly right with concurrent updates... but I dont think will be a problem
-                statusStore.cancelUpdateStarted();
-              },
-            });
-          },
         },
         onActivated() {
           this.reloadPropertyEditorData();
diff --git a/lib/vue-lib/src/design-system/general/PillCounter.vue b/lib/vue-lib/src/design-system/general/PillCounter.vue
index fda5c03b2a..fe54b0b0f0 100644
--- a/lib/vue-lib/src/design-system/general/PillCounter.vue
+++ b/lib/vue-lib/src/design-system/general/PillCounter.vue
@@ -3,7 +3,8 @@
     v-if="count !== 0 || showIfZero"
     :class="
       clsx(
-        'inline-block rounded-2xl px-xs border border-current dark:text-neutral-300 text-neutral-600',
+        'inline-block rounded-2xl px-xs border border-current',
+        getToneTextColorClass(tone),
         size && `text-${size}`,
       )
     "
@@ -15,12 +16,12 @@
 <script setup lang="ts">
 import { PropType } from "vue";
 import clsx from "clsx";
-import { Tones } from "../utils/color_utils";
+import { Tones, getToneTextColorClass } from "../utils/color_utils";
 
 const props = defineProps({
   count: Number,
   // TODO: implement color/tone options
-  tone: { type: String as PropType<Tones>, default: "success" },
+  tone: { type: String as PropType<Tones>, default: "shade" },
   size: {
     type: String as PropType<"xs" | "sm" | "md" | "base" | "lg" | "xl" | "2xl">,
   },
diff --git a/lib/vue-lib/src/design-system/icons/custom-icons/tilde-hex-outline.svg b/lib/vue-lib/src/design-system/icons/custom-icons/tilde-hex-outline.svg
new file mode 100644
index 0000000000..5ed600bd6a
--- /dev/null
+++ b/lib/vue-lib/src/design-system/icons/custom-icons/tilde-hex-outline.svg
@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 8.57437L15 2.1577L26 8.57437V21.4256L15 27.8423L4 21.4256V8.57437Z" stroke="black" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.75478 15.6821C9.75478 15.6821 9.77812 15.1092 10.1819 14.647C10.5111 14.27 11.0677 14.0036 11.9664 14.0036C13.1767 14.0036 13.7415 14.8615 14.3426 15.6528C15.2541 16.861 16.2006 18 18.0352 18C19.5723 18 20.4908 17.4139 21.0568 16.7678C21.9905 15.6994 21.9998 14.3566 21.9998 14.3566C22.0023 14.2252 21.9822 14.0945 21.9404 13.972C21.8987 13.8496 21.8363 13.7377 21.7567 13.6427C21.6771 13.5478 21.5819 13.4717 21.4765 13.4187C21.3711 13.3658 21.2577 13.337 21.1426 13.3341C21.0275 13.3313 20.913 13.3543 20.8057 13.4019C20.6984 13.4495 20.6003 13.5208 20.5172 13.6116C20.434 13.7025 20.3673 13.8112 20.3209 13.9314C20.2745 14.0517 20.2494 14.1812 20.2468 14.3126C20.2468 14.3126 20.2212 14.8868 19.815 15.353C19.4859 15.73 18.9292 15.9964 18.0352 15.9964C16.8308 15.9964 16.2683 15.1372 15.6695 14.3459C14.7569 13.139 13.8104 12 11.9664 12C10.4235 12 9.50386 12.5861 8.93899 13.2336C8.37971 13.8829 8.04659 14.7423 8.00183 15.6514C7.99416 15.7868 8.01067 15.9226 8.05037 16.0506C8.09007 16.1785 8.15213 16.2959 8.23277 16.3956C8.31342 16.4953 8.41097 16.5753 8.51952 16.6306C8.62806 16.686 8.74533 16.7156 8.86421 16.7177C8.98308 16.7198 9.10109 16.6943 9.21107 16.6427C9.32105 16.5912 9.4207 16.5146 9.50399 16.4178C9.58727 16.3209 9.65244 16.2058 9.69556 16.0793C9.73867 15.9528 9.75882 15.8177 9.75478 15.6821Z" fill="black"/>
+</svg>
diff --git a/lib/vue-lib/src/design-system/icons/icon_set.ts b/lib/vue-lib/src/design-system/icons/icon_set.ts
index bcb6b9109e..e7478698dc 100644
--- a/lib/vue-lib/src/design-system/icons/icon_set.ts
+++ b/lib/vue-lib/src/design-system/icons/icon_set.ts
@@ -151,6 +151,7 @@ import MinusHexOutline from "./custom-icons/minus-hex-outline.svg?raw";
 
 import RefreshHexOutline from "./custom-icons/refresh-hex-outline.svg?raw";
 import QuestionHexOutline from "./custom-icons/question-hex-outline.svg?raw";
+import TildeHexOutline from "./custom-icons/tilde-hex-outline.svg?raw";
 
 // restricting the type here (Record<string, FunctionalComponent>) kills our IconName type below
 /* eslint sort-keys: "error" */
@@ -203,7 +204,6 @@ export const ICONS = Object.freeze({
   "git-commit": GitCommit,
   "git-merge": GitMerge,
   globe: Globe,
-  "help-circle": QuestionMarkCircle,
   hide: EyeOff,
   "input-type-number": InputTypeNumber,
   "input-type-select": InputTypeSelect,
@@ -235,14 +235,13 @@ export const ICONS = Object.freeze({
   "plus-hex": PlusHex,
   "plus-hex-outline": PlusHexOutline,
   "plus-square": PlusSquare,
+  "question-circle": QuestionMarkCircle,
+  "question-hex-outline": QuestionHexOutline,
   "read-only": PencilOff,
   refresh: Refresh,
   "refresh-active": Refresh,
+  "refresh-hex-outline": RefreshHexOutline,
   resize: Resize,
-  "resource-create": PlusHexOutline,
-  "resource-delete": MinusHexOutline,
-  "resource-question": QuestionHexOutline,
-  "resource-refresh": RefreshHexOutline,
   save: Save,
   search: Search,
   selector: Selector,
@@ -255,6 +254,7 @@ export const ICONS = Object.freeze({
   "thumbs-up": ThumbsUp,
   tilde: Tilde,
   "tilde-circle": TildeCircle,
+  "tilde-hex-outline": TildeHexOutline,
   "tilde-square": TildeSquare,
   tools: Tools,
   trash: Trash,
@@ -324,7 +324,7 @@ export function getIconByName(name: string): string | undefined {
       (ICONS as any)?.[nameWithoutModifiers] ||
       (LOGO_ICONS as any)?.[nameWithoutModifiers] ||
       (ICONS as any)[(ICON_NAME_ALIASES as any)?.[nameWithoutModifiers]] ||
-      ICONS["help-circle"];
+      ICONS["question-circle"];
     return icon;
   }
 }
diff --git a/lib/vue-lib/src/design-system/utils/color_utils.ts b/lib/vue-lib/src/design-system/utils/color_utils.ts
index a67feb3559..bb72aa3c7e 100644
--- a/lib/vue-lib/src/design-system/utils/color_utils.ts
+++ b/lib/vue-lib/src/design-system/utils/color_utils.ts
@@ -1,6 +1,7 @@
 import { tw } from "../../utils/tw-utils";
 
 import colorsJson from "../../tailwind/tailwind_customization/colors.json";
+import { useTheme } from "./theme_tools";
 
 export const COLOR_PALETTE = colorsJson;
 
@@ -37,16 +38,30 @@ const TONES = {
     bgColorClass: tw`border-transparent`,
     textColorClass: tw`text-transparent border-transparent bg-transparent border-0 border-hidden opacity-0`,
   },
-  // maybe swap dark/light?
-  shade: { bgColorClass: tw`bg-shade-0`, textColorClass: tw`text-shade-0` },
+  shade: {
+    bgColorClassLight: tw`bg-shade-0`,
+    bgColorClassDark: tw`bg-shade-100`,
+    textColorClassLight: tw`text-shade-100`,
+    textColorClassDark: tw`text-shade-0`,
+  },
 };
 
 export type Tones = keyof typeof TONES;
 
 export function getToneBgColorClass(tone: Tones) {
-  return TONES[tone].bgColorClass;
+  const { theme } = useTheme();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const toneSettings = TONES[tone] as any;
+  if (theme.value === "dark")
+    return toneSettings.bgColorClassDark || toneSettings.bgColorClass;
+  return toneSettings.bgColorClassLight || toneSettings.bgColorClass;
 }
 
 export function getToneTextColorClass(tone: Tones) {
-  return TONES[tone].textColorClass;
+  const { theme } = useTheme();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const toneSettings = TONES[tone] as any;
+  if (theme.value === "dark")
+    return toneSettings.textColorClassDark || toneSettings.textColorClass;
+  return toneSettings.textColorClassLight || toneSettings.textColorClass;
 }