diff --git a/web/src/lib/components/middle-ellipsis/MiddleEllipsis.svelte b/web/src/lib/components/middle-ellipsis/MiddleEllipsis.svelte
new file mode 100644
index 0000000..16d2f42
--- /dev/null
+++ b/web/src/lib/components/middle-ellipsis/MiddleEllipsis.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  export let content: string;
+  export let maxLength: number = Math.floor(content.length / 2);
+  export let rootClass: string | undefined = undefined;
+
+  let className: string | undefined = undefined;
+  export { className as class };
+</script>
+
+<span class={rootClass}>
+  {content.slice(0, maxLength)}
+  <span class={cn('text-gray-400', className)}> ... </span>
+  {content.slice(content.length - maxLength)}
+</span>
diff --git a/web/src/lib/components/middle-ellipsis/index.ts b/web/src/lib/components/middle-ellipsis/index.ts
new file mode 100644
index 0000000..ddb20e6
--- /dev/null
+++ b/web/src/lib/components/middle-ellipsis/index.ts
@@ -0,0 +1,7 @@
+import Root from './MiddleEllipsis.svelte';
+
+export {
+  Root,
+  //
+  Root as MiddleEllipsis,
+};
diff --git a/web/src/lib/components/ui/badge/index.ts b/web/src/lib/components/ui/badge/index.ts
index bf88fb8..9605747 100644
--- a/web/src/lib/components/ui/badge/index.ts
+++ b/web/src/lib/components/ui/badge/index.ts
@@ -7,7 +7,7 @@ export const badgeVariants = tv({
     variant: {
       default: 'bg-primary hover:bg-primary/80 border-transparent text-primary-foreground',
       secondary: 'bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground',
-      success: 'bg-success hover:bg-success/80 border-transparent text-success-foreground',
+      success: 'bg-green-500 hover:bg-green-500/80 border-transparent text-white',
       destructive: 'bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground',
       outline: 'text-foreground',
     },
diff --git a/web/src/lib/components/ui/button/index.ts b/web/src/lib/components/ui/button/index.ts
index f274c25..ac5e41b 100644
--- a/web/src/lib/components/ui/button/index.ts
+++ b/web/src/lib/components/ui/button/index.ts
@@ -9,6 +9,8 @@ const buttonVariants = tv({
       default: 'bg-primary text-primary-foreground hover:bg-primary/90',
       destructive:
         'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+      success:
+        'bg-green-500 text-white hover:bg-green-500/90 hover:text-gray-50',
       outline:
         'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
       secondary: