diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4d5cadbc..ff411ca6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v2.0.75
+
+- Change clickbox for `Panel` toggle
+
 ## v2.0.74
 
 - Add `Repeat` to the `Icon` component
diff --git a/package-lock.json b/package-lock.json
index 2f85e98e..651c1290 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.74",
+  "version": "2.0.75",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@lob/ui-components",
-      "version": "2.0.74",
+      "version": "2.0.75",
       "dependencies": {
         "date-fns": "^2.29.3",
         "date-fns-holiday-us": "^0.3.1",
diff --git a/package.json b/package.json
index 8505e3dd..22f314e0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.74",
+  "version": "2.0.75",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
index cc2c2d89..ee5ab48a 100644
--- a/src/assets/styles/main.scss
+++ b/src/assets/styles/main.scss
@@ -42,13 +42,6 @@
     @apply text-lg;
   }
 
-  .uic-panel-container {
-    @apply rounded-md;
-    @apply border-line-grey border;
-    @apply bg-white;
-    @apply w-full p-4;
-  }
-
   // TODO Move to `@layer components` when that works
   .tile-container {
     @apply rounded-2xl;
diff --git a/src/components/Panel/Panel.vue b/src/components/Panel/Panel.vue
index 8d10f749..7eaff074 100644
--- a/src/components/Panel/Panel.vue
+++ b/src/components/Panel/Panel.vue
@@ -1,7 +1,7 @@
 <template>
   <Panel
+    v-model:collapsed="collapsed"
     class="uic-panel-container"
-    :collapsed
     data-testid="uic-panel"
     :pt="{
       transition: {
@@ -15,28 +15,25 @@
         leaveToClass: 'max-h-0'
       }
     }"
-    :toggleable="collapsible"
-    @update:collapsed="$emit('update:collapsed', $event)"
   >
     <template #header>
-      <component
-        :is="headerComponent"
-        class="type-base-600 flex flex-row gap-2 items-center"
-      >
-        <slot name="header">
-          {{ header }}
-        </slot>
-        <LoadingSpinnerIcon v-if="loading" />
-      </component>
-    </template>
-
-    <template #togglericon="{ collapsed: iconCollapsed }">
-      <Icon
-        :class="['toggle-icon', { collapsed: iconCollapsed }]"
-        data-testid="uic-panel-toggle-icon"
-        icon="Collapse"
-        size="lg"
-      />
+      <button class="uic-panel-header-button" @click="collapsed = !collapsed">
+        <component
+          :is="headerComponent"
+          class="type-base-600 flex flex-row gap-2 items-center"
+        >
+          <slot name="header">
+            {{ header }}
+          </slot>
+          <LoadingSpinnerIcon v-if="loading" />
+        </component>
+        <Icon
+          :class="['toggle-icon', { collapsed }]"
+          data-testid="uic-panel-toggle-icon"
+          icon="Collapse"
+          size="lg"
+        />
+      </button>
     </template>
 
     <template #default>
@@ -52,15 +49,11 @@ import { LoadingSpinnerIcon } from '../LoadingSpinnerIcon';
 
 withDefaults(
   defineProps<{
-    collapsed?: boolean;
-    collapsible?: boolean;
     header?: string;
     headerComponent?: string;
     loading?: boolean;
   }>(),
   {
-    collapsed: false,
-    collapsible: false,
     header: undefined,
     headerComponent: 'h2',
     loading: false
@@ -68,25 +61,37 @@ withDefaults(
 );
 
 defineEmits<{
-  (e: 'update:collapsed', collapsed: boolean): void; // eslint-disable-line no-unused-vars
+  (e: 'update:collapsed'): void; // eslint-disable-line no-unused-vars
 }>();
+
+const collapsed = defineModel<boolean>('collapsed', { default: false });
 </script>
 
 <style scoped="scss">
 .uic-panel-container {
-  :deep([data-pc-section='header']) {
+  @apply flex flex-col;
+  @apply w-full p-4;
+  @apply rounded-md;
+  @apply border-line-grey border;
+  @apply bg-white;
+
+  .uic-panel-header-button {
     @apply flex flex-row gap-2 items-center justify-between;
-  }
+    width: calc(100% + 1rem);
+    @apply -m-2 p-2;
+    @apply rounded-md;
+    @apply transition-colors;
 
-  :deep([data-pc-section='icons']) {
-    @apply flex flex-row items-center justify-center;
+    &:hover {
+      @apply bg-gray-25;
+    }
+  }
 
-    .toggle-icon {
-      transition: transform 0.3s;
+  .toggle-icon {
+    transition: transform 0.3s;
 
-      &:not(.collapsed) {
-        transform: rotate(180deg);
-      }
+    &:not(.collapsed) {
+      transform: rotate(180deg);
     }
   }