diff --git a/app/pages/PageEnigma/PageStyling.tsx b/app/pages/PageEnigma/PageStyling.tsx
index ec506c56ed..136af34944 100644
--- a/app/pages/PageEnigma/PageStyling.tsx
+++ b/app/pages/PageEnigma/PageStyling.tsx
@@ -78,12 +78,12 @@ export const PageStyling = ({ setPage }: Props) => {
         onClick={onTimelineClick}>
         <TimerGrid page={Pages.STYLE} />
         <div className="flex w-full ">
-          <div className="block h-[30px] w-[228px]" />
+          <div className="block h-[30px] w-[204px]" />
           <div
             className="h-[30px] overflow-x-auto overflow-y-hidden"
             onScroll={onScroll}
             style={{
-              width: pageWidth.value - 228,
+              width: pageWidth.value - 264,
             }}>
             <div
               style={{
diff --git a/app/pages/PageEnigma/comps/Timeline/RowHeaders/CameraHeader.tsx b/app/pages/PageEnigma/comps/Timeline/RowHeaders/CameraHeader.tsx
new file mode 100644
index 0000000000..e71db86495
--- /dev/null
+++ b/app/pages/PageEnigma/comps/Timeline/RowHeaders/CameraHeader.tsx
@@ -0,0 +1,18 @@
+export function CameraHeader() {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="14"
+        height="12"
+        viewBox="0 0 14 12"
+        fill="none">
+        <path
+          d="M3.11111 1.5C2.69855 1.5 2.30289 1.65804 2.01117 1.93934C1.71944 2.22064 1.55556 2.60218 1.55556 3C1.55556 3.39782 1.71944 3.77936 2.01117 4.06066C2.30289 4.34197 2.69855 4.5 3.11111 4.5C3.52367 4.5 3.91933 4.34197 4.21106 4.06066C4.50278 3.77936 4.66667 3.39782 4.66667 3C4.66667 2.60218 4.50278 2.22064 4.21106 1.93934C3.91933 1.65804 3.52367 1.5 3.11111 1.5ZM8.55556 6H3.11111C1.39271 6 0 4.65703 0 3C0 1.34297 1.39271 0 3.11111 0C4.28264 0 5.30347 0.623437 5.83333 1.54688C6.36319 0.623437 7.38403 0 8.55556 0C10.274 0 11.6667 1.34297 11.6667 3C11.6667 4.65703 10.274 6 8.55556 6ZM8.55556 1.5C8.143 1.5 7.74734 1.65804 7.45561 1.93934C7.16389 2.22064 7 2.60218 7 3C7 3.39782 7.16389 3.77936 7.45561 4.06066C7.74734 4.34197 8.143 4.5 8.55556 4.5C8.96811 4.5 9.36378 4.34197 9.6555 4.06066C9.94722 3.77936 10.1111 3.39782 10.1111 3C10.1111 2.60218 9.94722 2.22064 9.6555 1.93934C9.36378 1.65804 8.96811 1.5 8.55556 1.5ZM13.5698 6.07969C13.8323 6.20625 14 6.46641 14 6.75V11.25C14 11.5336 13.8347 11.7938 13.5698 11.9203C13.3049 12.0469 12.9913 12.0211 12.7556 11.85L11.2 10.725L10.8889 10.5V10.125V7.875V7.5L11.2 7.275L12.7556 6.15C12.9913 5.97891 13.3073 5.95312 13.5698 6.07969ZM1.55556 6.75H3.11111H8.55556C9.41354 6.75 10.1111 7.42266 10.1111 8.25V10.5C10.1111 11.3273 9.41354 12 8.55556 12H3.11111C2.25312 12 1.55556 11.3273 1.55556 10.5V8.25H0.777778C0.347569 8.25 0 7.91484 0 7.5C0 7.08516 0.347569 6.75 0.777778 6.75H1.55556Z"
+          fill="white"
+        />
+      </svg>
+      Global Audio
+    </>
+  );
+}
diff --git a/app/pages/PageEnigma/comps/Timeline/RowHeaders/CharacterHeader.tsx b/app/pages/PageEnigma/comps/Timeline/RowHeaders/CharacterHeader.tsx
new file mode 100644
index 0000000000..1d02bb9f36
--- /dev/null
+++ b/app/pages/PageEnigma/comps/Timeline/RowHeaders/CharacterHeader.tsx
@@ -0,0 +1,22 @@
+interface Props {
+  name: string;
+}
+
+export function CharacterHeader({ name }: Props) {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="11"
+        height="12"
+        viewBox="0 0 11 12"
+        fill="none">
+        <path
+          d="M5.5 6C6.33354 6 7.13294 5.68393 7.72234 5.12132C8.31174 4.55871 8.64286 3.79565 8.64286 3C8.64286 2.20435 8.31174 1.44129 7.72234 0.87868C7.13294 0.316071 6.33354 0 5.5 0C4.66646 0 3.86706 0.316071 3.27766 0.87868C2.68826 1.44129 2.35714 2.20435 2.35714 3C2.35714 3.79565 2.68826 4.55871 3.27766 5.12132C3.86706 5.68393 4.66646 6 5.5 6ZM4.3779 7.125C1.95938 7.125 0 8.99531 0 11.3039C0 11.6883 0.326563 12 0.729241 12H10.2708C10.6734 12 11 11.6883 11 11.3039C11 8.99531 9.04063 7.125 6.6221 7.125H4.3779Z"
+          fill="white"
+        />
+      </svg>
+      {name}
+    </>
+  );
+}
diff --git a/app/pages/PageEnigma/comps/Timeline/RowHeaders/GlobalAudioHeader.tsx b/app/pages/PageEnigma/comps/Timeline/RowHeaders/GlobalAudioHeader.tsx
new file mode 100644
index 0000000000..14e4b2e69b
--- /dev/null
+++ b/app/pages/PageEnigma/comps/Timeline/RowHeaders/GlobalAudioHeader.tsx
@@ -0,0 +1,18 @@
+export function GlobalAudioHeader() {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="15"
+        height="12"
+        viewBox="0 0 15 12"
+        fill="none">
+        <path
+          d="M8.25 11.25C8.25 11.6648 7.91484 12 7.5 12C7.08516 12 6.75 11.6648 6.75 11.25V0.75C6.75 0.335156 7.08516 0 7.5 0C7.91484 0 8.25 0.335156 8.25 0.75V11.25ZM12.75 9.75C12.75 10.1648 12.4148 10.5 12 10.5C11.5852 10.5 11.25 10.1648 11.25 9.75V2.25C11.25 1.83516 11.5852 1.5 12 1.5C12.4148 1.5 12.75 1.83516 12.75 2.25V9.75ZM6 9C6 9.41484 5.66484 9.75 5.25 9.75C4.83516 9.75 4.5 9.41484 4.5 9V3C4.5 2.58516 4.83516 2.25 5.25 2.25C5.66484 2.25 6 2.58516 6 3V9ZM10.5 8.25C10.5 8.66484 10.1648 9 9.75 9C9.33516 9 9 8.66484 9 8.25V3.75C9 3.33516 9.33516 3 9.75 3C10.1648 3 10.5 3.33516 10.5 3.75V8.25ZM3.75 6.75C3.75 7.16484 3.41484 7.5 3 7.5C2.58516 7.5 2.25 7.16484 2.25 6.75V5.25C2.25 4.83516 2.58516 4.5 3 4.5C3.41484 4.5 3.75 4.83516 3.75 5.25V6.75ZM0 6C0 5.80109 0.0790176 5.61032 0.21967 5.46967C0.360322 5.32902 0.551088 5.25 0.75 5.25C0.948912 5.25 1.13968 5.32902 1.28033 5.46967C1.42098 5.61032 1.5 5.80109 1.5 6C1.5 6.19891 1.42098 6.38968 1.28033 6.53033C1.13968 6.67098 0.948912 6.75 0.75 6.75C0.551088 6.75 0.360322 6.67098 0.21967 6.53033C0.0790176 6.38968 0 6.19891 0 6ZM13.5 6C13.5 5.80109 13.579 5.61032 13.7197 5.46967C13.8603 5.32902 14.0511 5.25 14.25 5.25C14.4489 5.25 14.6397 5.32902 14.7803 5.46967C14.921 5.61032 15 5.80109 15 6C15 6.19891 14.921 6.38968 14.7803 6.53033C14.6397 6.67098 14.4489 6.75 14.25 6.75C14.0511 6.75 13.8603 6.67098 13.7197 6.53033C13.579 6.38968 13.5 6.19891 13.5 6Z"
+          fill="white"
+        />
+      </svg>
+      Global Audio
+    </>
+  )
+}
diff --git a/app/pages/PageEnigma/comps/Timeline/RowHeaders/ObjectsHeader.tsx b/app/pages/PageEnigma/comps/Timeline/RowHeaders/ObjectsHeader.tsx
new file mode 100644
index 0000000000..fa41e951e8
--- /dev/null
+++ b/app/pages/PageEnigma/comps/Timeline/RowHeaders/ObjectsHeader.tsx
@@ -0,0 +1,18 @@
+export function ObjectsHeader() {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="13"
+        height="13"
+        viewBox="0 0 13 13"
+        fill="none">
+        <path
+          d="M5.9541 0.0959457C6.30703 -0.0319819 6.69297 -0.0319819 7.04844 0.0959457L11.9234 1.85111C12.5684 2.08394 13 2.70055 13 3.39392V9.60608C13 10.2969 12.5684 10.9161 11.9209 11.1489L7.0459 12.9041C6.69297 13.032 6.30703 13.032 5.95156 12.9041L1.07656 11.1489C0.431641 10.9161 0 10.2994 0 9.60608V3.39392C0 2.70311 0.431641 2.08394 1.0791 1.85111L5.9541 0.0959457ZM6.5 1.63875L2.08965 3.22505L6.5 4.81136L10.9104 3.22505L6.5 1.63875ZM1.625 9.60608L5.6875 11.067V6.25694L1.625 4.796V9.60608ZM7.3125 11.067L11.375 9.60608V4.796L7.3125 6.2595V11.0696V11.067Z"
+          fill="white"
+        />
+      </svg>
+      Objects
+    </>
+  );
+}
diff --git a/app/pages/PageEnigma/comps/Timeline/RowHeaders.tsx b/app/pages/PageEnigma/comps/Timeline/RowHeaders/RowHeaders.tsx
similarity index 64%
rename from app/pages/PageEnigma/comps/Timeline/RowHeaders.tsx
rename to app/pages/PageEnigma/comps/Timeline/RowHeaders/RowHeaders.tsx
index e833f0a17e..03d4a5edaf 100644
--- a/app/pages/PageEnigma/comps/Timeline/RowHeaders.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/RowHeaders/RowHeaders.tsx
@@ -12,10 +12,19 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faVolume, faVolumeSlash } from "@fortawesome/pro-solid-svg-icons";
 import { useSignals } from "@preact/signals-react/runtime";
+import { GlobalAudioHeader } from "~/pages/PageEnigma/comps/Timeline/RowHeaders/GlobalAudioHeader";
+import { CameraHeader } from "~/pages/PageEnigma/comps/Timeline/RowHeaders/CameraHeader";
+import { ObjectsHeader } from "~/pages/PageEnigma/comps/Timeline/RowHeaders/ObjectsHeader";
+import { CharacterHeader } from "~/pages/PageEnigma/comps/Timeline/RowHeaders/CharacterHeader";
 
 export const RowHeaders = () => {
   useSignals();
 
+  const compressedHeaderClasses =
+    "flex h-[35px] items-center gap-2 pl-2 text-xs font-medium text-white";
+  const uncompressedHeaderClasses =
+    "flex h-[35px] items-center gap-2 rounded-br-lg pl-2 text-xs font-medium text-white";
+
   return (
     <div className="relative">
       <div
@@ -27,8 +36,12 @@ export const RowHeaders = () => {
               <div
                 key={character.object_uuid}
                 className="mb-4 h-[35px] w-full rounded-l-lg bg-character-groupBg">
-                <div className="flex h-[35px] flex-col justify-center pl-2 text-xs font-medium text-white">
-                  {character.name}
+                <div
+                  className={[
+                    compressedHeaderClasses,
+                    "bg-character-titleBg",
+                  ].join(" ")}>
+                  <CharacterHeader name={character.name} />
                 </div>
               </div>
             );
@@ -37,8 +50,14 @@ export const RowHeaders = () => {
             <div
               key={character.object_uuid}
               className="mb-4 h-[199px] w-full rounded-l-lg bg-character-groupBg">
-              <div className="h-[47px] pl-2 pt-2 text-xs font-medium text-white">
-                {character.name}
+              <div className="h-[47px] text-xs font-medium text-white">
+                <div
+                  className={[
+                    uncompressedHeaderClasses,
+                    "bg-character-titleBg",
+                  ].join(" ")}>
+                  <CharacterHeader name={character.name} />
+                </div>
               </div>
               <div className="mb-3 flex h-[36px] flex-col justify-center pl-[22px] text-xs font-medium text-white opacity-80">
                 Animation
@@ -69,14 +88,23 @@ export const RowHeaders = () => {
 
         {cameraMinimized.value ? (
           <div className="mb-4 h-[35px] w-full rounded-l-lg bg-camera-groupBg">
-            <div className="flex h-[35px] flex-col justify-center pl-2 text-xs font-medium text-white">
-              Camera
+            <div
+              className={[compressedHeaderClasses, "bg-camera-titleBg"].join(
+                " ",
+              )}>
+              <CameraHeader />
             </div>
           </div>
         ) : (
           <div className="mb-4 h-[103px] w-full rounded-l-lg bg-camera-groupBg">
-            <div className="h-[47px] pl-2 pt-2 text-xs font-medium text-white">
-              Camera
+            <div className="h-[47px] text-xs font-medium text-white">
+              <div
+                className={[
+                  uncompressedHeaderClasses,
+                  "bg-camera-titleBg",
+                ].join(" ")}>
+                <CameraHeader />
+              </div>
             </div>
             <div className="mb-3 flex h-[36px] flex-col justify-center pl-[22px] text-xs font-medium text-white opacity-80">
               Movement
@@ -86,14 +114,24 @@ export const RowHeaders = () => {
 
         {audioMinimized.value ? (
           <div className="mb-4 h-[35px] w-full rounded-l-lg bg-global_audio-groupBg">
-            <div className="flex h-[35px] flex-col justify-center pl-2 text-xs font-medium text-white">
-              Global Audio
+            <div
+              className={[
+                compressedHeaderClasses,
+                "bg-global_audio-titleBg",
+              ].join(" ")}>
+              <GlobalAudioHeader />
             </div>
           </div>
         ) : (
           <div className="mb-4 h-[103px] w-full rounded-l-lg bg-global_audio-groupBg">
-            <div className="h-[47px] pl-2 pt-2 text-xs font-medium text-white">
-              Global Audio
+            <div className="h-[47px] text-xs font-medium text-white">
+              <div
+                className={[
+                  uncompressedHeaderClasses,
+                  "bg-global_audio-titleBg",
+                ].join(" ")}>
+                <GlobalAudioHeader />
+              </div>
             </div>
             <div className="mb-3 flex h-[36px] flex-col justify-center pl-[22px] text-xs font-medium text-white opacity-80">
               <div className="flex gap-3">
@@ -118,16 +156,26 @@ export const RowHeaders = () => {
           <>
             {objectsMinimized.value ? (
               <div className="mb-4 h-[35px] w-full rounded-l-lg bg-object-groupBg">
-                <div className="flex h-[35px] flex-col justify-center pl-2 text-xs font-medium text-white">
-                  Objects
+                <div
+                  className={[
+                    compressedHeaderClasses,
+                    "bg-object-titleBg",
+                  ].join(" ")}>
+                  <ObjectsHeader />
                 </div>
               </div>
             ) : (
               <div
                 className="mb-4 h-[103px] w-full rounded-l-lg bg-object-groupBg"
                 style={{ height: 55 + objectGroup.value.objects.length * 48 }}>
-                <div className="h-[47px] pl-2 pt-2 text-xs font-medium text-white">
-                  Objects
+                <div className="h-[47px] text-xs font-medium text-white">
+                  <div
+                    className={[
+                      uncompressedHeaderClasses,
+                      "bg-object-titleBg",
+                    ].join(" ")}>
+                    <ObjectsHeader />
+                  </div>
                 </div>
                 {objectGroup.value.objects.map((obj) => (
                   <div
diff --git a/app/pages/PageEnigma/comps/Timeline/Scrubber.tsx b/app/pages/PageEnigma/comps/Timeline/Scrubber.tsx
index 022d3c922b..40f051f21c 100644
--- a/app/pages/PageEnigma/comps/Timeline/Scrubber.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Scrubber.tsx
@@ -3,6 +3,7 @@ import {
   fullHeight,
   scale,
   stylizeScrollX,
+  timelineHeight,
   timelineScrollX,
 } from "~/pages/PageEnigma/store";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -30,19 +31,31 @@ export const Scrubber = ({ page }: Props) => {
     <div
       className="absolute flex cursor-ew-resize flex-col items-center text-brand-primary"
       style={{
-        top: 8,
-        left: displayTime * 4 * scale.value + 225 - scrollX,
+        top: 16,
+        left: displayTime * 4 * scale.value + 201 - scrollX,
       }}
       onPointerDown={onPointerDown}>
       <div>
-        <FontAwesomeIcon icon={faSortDown} className="h-5 text-brand-primary" />
+        <svg
+          width="14"
+          height="21"
+          viewBox="0 0 14 21"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M7 19.5858L1.58578 14.1715C1.21071 13.7965 0.999999 13.2878 0.999999 12.7573L1 2C1 1.44772 1.44771 1 2 1L12 1C12.5523 1 13 1.44772 13 2L13 12.7573C13 13.2878 12.7893 13.7965 12.4142 14.1715L7 19.5858Z"
+            fill="white"
+            stroke="white"
+            strokeWidth="2"
+          />
+        </svg>
       </div>
       <div
-        className="block bg-brand-primary"
+        className="block bg-white"
         style={{
           width: 2,
           marginTop: -5,
-          height: fullHeight.value,
+          height: timelineHeight.value - 48,
         }}
       />
     </div>
diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
index 598a32e074..b1f0d86176 100644
--- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
@@ -23,7 +23,7 @@ import { Characters } from "~/pages/PageEnigma/comps/Timeline/Characters";
 import { ObjectGroups } from "~/pages/PageEnigma/comps/Timeline/ObjectGroups";
 import useUpdateKeyframe from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe";
 import { Clip, Keyframe } from "~/pages/PageEnigma/models";
-import { RowHeaders } from "~/pages/PageEnigma/comps/Timeline/RowHeaders";
+import { RowHeaders } from "~/pages/PageEnigma/comps/Timeline/RowHeaders/RowHeaders";
 import { pageWidth } from "~/store";
 import { Pages } from "~/pages/PageEnigma/constants/page";
 import { DoNotShow } from "~/pages/PageEnigma/constants/misc";
@@ -98,7 +98,7 @@ export const Timeline = () => {
         <TimerGrid page={Pages.EDIT} />
         <div className="flex">
           <div
-            className="ml-[82px] mt-2 w-[146px] overflow-hidden"
+            className="ml-[60px] mt-2 w-[144px] overflow-hidden"
             style={{
               height: timelineHeight.value - 54,
             }}>
@@ -108,11 +108,11 @@ export const Timeline = () => {
             className="mb-20 mt-2 overflow-auto"
             onScroll={onScroll}
             style={{
-              width: pageWidth.value - 228,
+              width: pageWidth.value - 204,
               height: timelineHeight.value - 54,
             }}>
             <div
-              style={{ width: filmLength.value * 60 * 4 * scale.value + 32 }}>
+              style={{ width: filmLength.value * 60 * 4 * scale.value + 72 }}>
               <Characters />
               <div className="pb-4 pr-8">
                 <Camera />
diff --git a/app/pages/PageEnigma/comps/Timeline/TimerGrid.tsx b/app/pages/PageEnigma/comps/Timeline/TimerGrid.tsx
index c960fca49b..29f469a376 100644
--- a/app/pages/PageEnigma/comps/Timeline/TimerGrid.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/TimerGrid.tsx
@@ -21,7 +21,7 @@ export const TimerGrid = ({ page }: Props) => {
   return (
     <div
       className={[
-        "prevent-select ml-[228px] mt-4",
+        "prevent-select ml-[204px] mt-4",
         "relative flex h-7 overflow-hidden",
         "border-t border-t-ui-panel-border",
         "text-xs text-white opacity-75",
diff --git a/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx b/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
index 251c74b9c8..aee80595f9 100644
--- a/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
@@ -78,7 +78,11 @@ export const TrackClip = ({ clip, min, max, group, updateClip }: Props) => {
           event.preventDefault();
           selectedItem.value = clip;
         }}>
-        <div className="ml-2 text-left text-xs text-white">{clip.name}</div>
+        <div
+          className="ml-2 w-full overflow-hidden text-ellipsis whitespace-nowrap text-left text-xs text-white"
+          style={{ width: length * 4 * scale.value - 46 }}>
+          {clip.name}
+        </div>
       </button>
       <button
         className={[
diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts
index d74f109374..83af081cf6 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts
@@ -53,7 +53,10 @@ export const useMouseEventsClip = (
         }
       }
       if (isActive.current === "left") {
-        if (initLength.current - delta < 30 || deltaOffset < min) {
+        if (
+          initLength.current - delta < 30 / 4 / scale.value ||
+          deltaOffset < min
+        ) {
           return;
         }
         currOffset.current = deltaOffset;
@@ -61,7 +64,7 @@ export const useMouseEventsClip = (
       }
       if (isActive.current === "right") {
         if (
-          initLength.current + delta < 30 ||
+          initLength.current + delta < 30 / 4 / scale.value ||
           currOffset.current + initLength.current + delta > max
         ) {
           return;
diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useTimelineClick.ts b/app/pages/PageEnigma/comps/Timeline/utils/useTimelineClick.ts
index c17cd6b9d8..a17f403848 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useTimelineClick.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useTimelineClick.ts
@@ -16,7 +16,7 @@ export default function useTimelineClick(page: Pages) {
     const scrollX =
       page === Pages.EDIT ? timelineScrollX.value : stylizeScrollX.value;
     const newTime = Math.round(
-      (event.clientX + scrollX - 228) / 4 / scale.value,
+      (event.clientX + scrollX - 204) / 4 / scale.value,
     );
     if (newTime < 0) {
       return;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index caad8b5b76..7d76304f87 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -115,24 +115,28 @@ export default {
         selected: "#6384F4",
         clip: "#7E92DA",
         groupBg: "#2B3448",
+        titleBg: "#384763",
       },
       camera: {
         unselected: "#466C7C",
         selected: "#56BBC1",
         clip: "#5F949F",
         groupBg: "#2B393E",
+        titleBg: "#395259",
       },
       global_audio: {
         unselected: "#864C68",
         selected: "#D460A6",
         clip: "#E37BAD",
         groupBg: "#382940",
+        titleBg: "#5A3D65",
       },
       object: {
         unselected: "#7C5646",
         selected: "#EA8E5A",
         clip: "#D49D75",
         groupBg: "#372E32",
+        titleBg: "#514248",
       },
       keyframe: {
         unselected: "#EEEEEE",