diff --git a/components/Button.tsx b/components/Button.tsx
index 1ef05a4..057704d 100644
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -6,7 +6,7 @@ export function Button(props: JSX.HTMLAttributes<HTMLButtonElement>) {
     <button
       {...props}
       disabled={!IS_BROWSER || props.disabled}
-      class="px-2 py-1 border-gray-500 border-2 "
+      class={`px-2 py-1  ${props.class ? props.class : " "}`}
     />
   );
 }
diff --git a/components/icons.tsx b/components/icons.tsx
index 70b645f..360bb85 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -8,3 +8,5 @@ export { default as IconError404 } from "https://deno.land/x/tabler_icons_tsx@0.
 export { default as IconSquareRoundedPlus } from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/square-rounded-plus.tsx";
 export { default as IconReportSearch } from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/report-search.tsx";
 export { default as IconRefresh } from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/refresh.tsx";
+export { default as IconCirclePlus } from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/circle-plus.tsx";
+export { default as IconCircleMinus } from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/circle-minus.tsx";
diff --git a/islands/Counter.tsx b/islands/Counter.tsx
index e337d17..2235be7 100644
--- a/islands/Counter.tsx
+++ b/islands/Counter.tsx
@@ -1,16 +1,32 @@
 import type { Signal } from "@preact/signals";
 import { Button } from "@components/Button.tsx";
+import { IconCircleMinus, IconCirclePlus } from "@components/icons.tsx";
 
 interface CounterProps {
   count: Signal<number>;
 }
 
 export default function Counter(props: CounterProps) {
+  props.count.value = Math.max(1, props.count.value);
   return (
-    <div class="flex gap-2 items-center">
-      <Button onClick={() => props.count.value -= 1}>-</Button>
-      <p class="text-3xl">{props.count}</p>
-      <Button onClick={() => props.count.value += 1}>+</Button>
+    <div class="flex items-center px-1 py-2 rounded-xl">
+      <Button
+        class=""
+        onClick={() => props.count.value -= 1}
+      >
+        <IconCircleMinus />
+      </Button>
+      <input
+        class="text-3xl bg-transparent inline text-center -mx-4"
+        size={props.count.toString().length}
+        value={props.count}
+        onInput={(ev) => props.count.value = ev.target?.value}
+      >
+        {props.count}
+      </input>
+      <Button onClick={() => props.count.value += 1}>
+        <IconCirclePlus />
+      </Button>
     </div>
   );
 }
diff --git a/islands/KMenu.tsx b/islands/KMenu.tsx
index 518d795..4527aca 100644
--- a/islands/KMenu.tsx
+++ b/islands/KMenu.tsx
@@ -39,7 +39,7 @@ export const KMenu = (
   const input = useRef<HTMLInputElement>(null);
   const commandInput = useSignal("");
 
-  const visible = useSignal(true);
+  const visible = useSignal(false);
   if (visible.value === false) {
     setTimeout(() => {
       activeMenuType.value = "main";