diff --git a/src/components/chip/UKChip.module.scss b/src/components/chip/UKChip.module.scss
index fd06ede..8918419 100644
--- a/src/components/chip/UKChip.module.scss
+++ b/src/components/chip/UKChip.module.scss
@@ -1,10 +1,10 @@
 .root {
   padding: 0.25rem;
   height: 2rem;
+  max-width: max-content;
   display: flex;
   flex-direction: row;
   gap: 0.25rem;
-  width: max-content;
   user-select: none;
   cursor: pointer;
 
@@ -16,11 +16,26 @@
     border-style: solid;
     border-color: rgb(var(--uk-sys-color-outline-variant));
     background-color: rgb(var(--uk-sys-color-surface-container-low));
+    color: rgb(var(--uk-sys-color-on-surface-container-low));
   }
 
-  &[data-type="filter"] {
+  &[data-type="filter_removable"],
+  &[data-type="filter_dropdown"],
+  &[data-type="filter_deselectable"] {
     border-radius: var(--uk-sys-shape-corner-small);
     height: 2rem;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgb(var(--uk-sys-color-outline-variant));
+    color: rgb(var(--uk-sys-color-on-surface-container-low));
+    background-color: rgb(var(--uk-sys-color-surface-container-low));
+
+    &[data-selected="true"] {
+      border-color: rgb(var(--uk-sys-color-secondary-container));
+      border-width: 0px;
+      color: rgb(var(--uk-sys-color-on-secondary-container));
+      background-color: rgb(var(--uk-sys-color-secondary-container));
+    }
   }
 
   &[data-noLeadingIcon="true"] {
diff --git a/src/components/chip/UKChip.tsx b/src/components/chip/UKChip.tsx
index 39df9fa..ea68b45 100644
--- a/src/components/chip/UKChip.tsx
+++ b/src/components/chip/UKChip.tsx
@@ -3,10 +3,12 @@ import type { Component } from "solid-js";
 import UKIcon from "../icon/UKIcon";
 import UKText from "../text/UKText";
 import styles from "./UKChip.module.scss";
+import UKAvatar from "../avatar/UKAvatar";
+import CLOSE_ICON from "@material-symbols/svg-700/outlined/close.svg";
 
 interface BaseChip {
   class?: string;
-  leading?: { type: "icon" | "avatar" | "image", value: string };
+  leading?: { type: "icon" | "avatar" | "image"; value: string; alt?: string };
 }
 
 interface AssistChip extends BaseChip {
@@ -16,23 +18,23 @@ interface AssistChip extends BaseChip {
 }
 
 interface RemovableFilterChip extends BaseChip {
-  type: "filter_removable"
+  type: "filter_removable";
   children: string; // label text
-  onRemove: () => void
+  onRemove: () => void;
 }
 
 interface DropDownFilterChip extends BaseChip {
-  type: "filter_dropdown"
-  items: { icon?: string, label: string, id: string }[]
+  type: "filter_dropdown";
+  items: { icon?: string; label: string; id: string }[];
   defaultSelectionId: string;
   onSelectItem: (itemId: string) => void;
 }
 
 interface DeselectableFilterChip extends BaseChip {
-  type: "filter_deselectable"
+  type: "filter_deselectable";
   children: string; // label text
   select: () => void;
-  deselect: () => void;
+  deselect?: () => void;
   isSelected: boolean;
 }
 
@@ -54,15 +56,20 @@ const UKChip: Component<AssistChip | RemovableFilterChip | DropDownFilterChip |
       type="button"
       class={clsx(styles.root, props.class)}
       data-type={props.type}
-      data-noLeadingIcon={!props.leadingIcon}
-      data-noTrailingIcon={!props.trailingIcon}
-      onClick={props.onClick}
+      data-selected={props.type === "filter_deselectable" ? props.isSelected : props.type === "filter_dropdown" ? true : props.type === "filter_removable"}
+      data-noLeadingIcon={!("leadingIcon" in props && props.leadingIcon)}
+      data-noTrailingIcon={!("trailingIcon" in props && props.trailingIcon)}
+      onClick={"onClick" in props ? props.onClick : () => {}}
     >
-      {props.leadingIcon && <UKIcon class={styles.icon}>{props.leadingIcon}</UKIcon>}
+      {"leading" in props && props.leading?.type === "icon" && <UKIcon class={styles.icon}>{props.leading.value}</UKIcon>}
+      {"leading" in props && props.leading?.type === "image" && <img alt={props.leading.alt || ""} class={styles.icon} src={props.leading.value} />}
+      {"leading" in props && props.leading?.type === "avatar" && (
+        <UKAvatar size="xs" class={styles.icon} avatar={props.leading.value} username={props.leading.alt || "Unknown"}></UKAvatar>
+      )}
       <UKText role="label" size="m" emphasized={false} class={styles.label}>
-        {props.children}
+        {"children" in props && props.children}
       </UKText>
-      {props.trailingIcon && <UKIcon class={styles.icon}>{props.trailingIcon}</UKIcon>}
+      {"deselect" in props && <UKIcon class={styles.icon}>{CLOSE_ICON}</UKIcon>}
     </button>
   );
 };
diff --git a/src/components/splitButtons/UKSplitButton.module.scss b/src/components/splitButtons/UKSplitButton.module.scss
index 2ca4052..0915c9c 100644
--- a/src/components/splitButtons/UKSplitButton.module.scss
+++ b/src/components/splitButtons/UKSplitButton.module.scss
@@ -6,8 +6,6 @@
 }
 
 .textButton {
-  border-top-right-radius: 0;
-
   &[data-size="xs"] {
     border-top-right-radius: 0.25rem !important;
     border-bottom-right-radius: 0.25rem !important;
diff --git a/src/components/splitButtons/UKSplitButton.tsx b/src/components/splitButtons/UKSplitButton.tsx
index 1d6549d..5b9a59b 100644
--- a/src/components/splitButtons/UKSplitButton.tsx
+++ b/src/components/splitButtons/UKSplitButton.tsx
@@ -15,12 +15,14 @@ const UKSplitButton: Component<{
   disabled?: boolean;
   size?: SplitButtonSize;
   items: (MenuItem | undefined)[];
+  showIcon?: boolean;
 }> = (props) => {
   const [dropdownSelected, setDropdownSelected] = createSignal<{ x: number; y: number; align: "right"; minWidth: number } | false>(false);
 
   return (
     <div class={styles.root}>
       <UKButton
+        leadingIcon={(props.showIcon && props.items.find((item) => item?.type === "button")?.leadingIcon) || undefined}
         class={styles.textButton}
         size={props.size || "s"}
         color={props.color}