diff --git a/packages/ui/src/lib/app.css b/packages/ui/src/lib/app.css
index 9438105..6758ef6 100644
--- a/packages/ui/src/lib/app.css
+++ b/packages/ui/src/lib/app.css
@@ -80,6 +80,7 @@ html {
   --neutral-100: #e7e7e7;
   --neutral-200: #cecece;
   --neutral-300: #7c7c7c;
+  --neutral-350: #808080;
   --neutral-400: #2d2d2d;
   --neutral-500: #171717;
   --neutral-800: #111111;
@@ -107,7 +108,7 @@ body {
 
 html.theme-light {
   --color-text: var(--neutral-800);
-  --color-outline: var(--neutral-300);
+  --color-outline: var(--neutral-350);
   --color-layer-0: var(--neutral-050);
   --color-layer-1: var(--neutral-100);
   --color-layer-2: var(--neutral-200);
diff --git a/packages/ui/src/lib/inputs/InputNumber.svelte b/packages/ui/src/lib/inputs/InputNumber.svelte
index da0d8be..9b662b1 100644
--- a/packages/ui/src/lib/inputs/InputNumber.svelte
+++ b/packages/ui/src/lib/inputs/InputNumber.svelte
@@ -126,7 +126,7 @@
     <button
       aria-label="step down"
       onmousedown={stepDown}
-      class="cursor-pointer w-4 bg-layer-3 opacity-30 hover:opacity-50"
+      class="cursor-pointer w-4 bg-layer-3/30 hover:bg-layer-3/50"
     >
       <span class="i-[tabler--chevron-compact-left] block h-full w-full text-outline!"></span>
     </button>
@@ -161,7 +161,7 @@
     <button
       aria-label="step up"
       onmousedown={stepUp}
-      class="cursor-pointer w-4 bg-layer-3 opacity-30 hover:opacity-50"
+      class="cursor-pointer w-4 bg-layer-3/30 hover:bg-layer-3/50"
     >
       <span class="i-[tabler--chevron-compact-right] block h-full w-full text-outline!"></span>
     </button>
diff --git a/packages/ui/src/routes/+page.svelte b/packages/ui/src/routes/+page.svelte
index 829faf0..1daff88 100644
--- a/packages/ui/src/routes/+page.svelte
+++ b/packages/ui/src/routes/+page.svelte
@@ -73,7 +73,7 @@
         <InputCheckbox bind:value={mirrorShape} />
         <p>mirror</p>
       </label>
-      <p>{JSON.stringify(points)}</p>
+      <p class="max-w-full overflow-hidden">{JSON.stringify(points)}</p>
     {/snippet}
     <div style:width="300px">
       <InputShape bind:value={points} mirror={mirrorShape} />
diff --git a/packages/ui/src/routes/Section.svelte b/packages/ui/src/routes/Section.svelte
index 0e039b7..6b2b84c 100644
--- a/packages/ui/src/routes/Section.svelte
+++ b/packages/ui/src/routes/Section.svelte
@@ -12,7 +12,7 @@
 <section class="border-outline border-1/2 bg-layer-1 rounded border mb-4 p-4 flex flex-col gap-4 {_class}">
   <h3 class="flex gap-2 font-bold">
     {title}
-    <div class="flex gap-4 w-full font-normal opacity-50 max-w-[75%] whitespace-pre overflow-hidden text-clip">
+    <div class="flex gap-4 w-full font-normal opacity-50 max-w-[75%]">
       {#if header}
         {@render header()}
       {:else}