diff --git a/components/number-input.tsx b/components/number-input.tsx
index df84ac8..9d832bb 100644
--- a/components/number-input.tsx
+++ b/components/number-input.tsx
@@ -1,62 +1,63 @@
-import { cn } from "@/lib/utils";
 import { Minus, Plus } from "lucide-react";
 import { useEffect } from "react";
 import {
-	Button,
-	Group,
-	Input,
-	Label,
-	NumberField,
+  Button,
+  Group,
+  Input,
+  Label,
+  NumberField,
 } from "react-aria-components";
+import { cn } from "@/lib/utils";
 
 export default function NumberInput({
-	maxAllowed,
-	label,
-	value,
-	onChange,
-	className,
-	isDisabled,
+  maxAllowed,
+  label,
+  value = 100,
+  onChange,
+  className,
+  isDisabled,
 }: {
-	maxAllowed?: number;
-	label: string;
-	value: number;
-	onChange: (value: number) => void;
-	className?: string;
-	isDisabled?: boolean;
+  maxAllowed?: number;
+  label: string;
+  value?: number;
+  onChange: (value: number) => void;
+  className?: string;
+  isDisabled?: boolean;
 }) {
-	useEffect(() => {
-		if (maxAllowed) {
-			if (value > maxAllowed) {
-				onChange(maxAllowed);
-			}
-		}
-	}, [maxAllowed, value, onChange]);
-	return (
-		<NumberField
-			isDisabled={isDisabled}
-			className={cn(className)}
-			value={value}
-			minValue={0}
-			onChange={onChange}
-		>
-			<div className="space-y-2">
-				<Label className="text-sm font-medium text-foreground">{label}</Label>
-				<Group className="relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input text-sm shadow-sm shadow-black/5 transition-shadow data-[focus-within]:border-ring data-disabled:opacity-50 data-focus-within:outline-none data-focus-within:ring-[3px] data-[focus-within]:ring-ring/20">
-					<Button
-						slot="decrement"
-						className="-ms-px flex aspect-square h-[inherit] items-center justify-center rounded-s-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
-					>
-						<Minus size={16} strokeWidth={2} aria-hidden="true" />
-					</Button>
-					<Input className="w-full grow bg-background px-3 py-2 text-center text-base tabular-nums text-foreground focus:outline-none" />
-					<Button
-						slot="increment"
-						className="-me-px flex aspect-square h-[inherit] items-center justify-center rounded-e-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
-					>
-						<Plus size={16} strokeWidth={2} aria-hidden="true" />
-					</Button>
-				</Group>
-			</div>
-		</NumberField>
-	);
+  useEffect(() => {
+    if (maxAllowed) {
+      if (value > maxAllowed) {
+        onChange(maxAllowed);
+      }
+    }
+  }, [maxAllowed, value, onChange]);
+
+  return (
+    <NumberField
+      isDisabled={isDisabled}
+      className={cn(className)}
+      value={value}
+      minValue={0}
+      onChange={onChange}
+    >
+      <div className="space-y-2">
+        <Label className="text-sm font-medium text-foreground">{label}</Label>
+        <Group className="relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input text-sm shadow-sm shadow-black/5 transition-shadow data-[focus-within]:border-ring data-disabled:opacity-50 data-focus-within:outline-none data-focus-within:ring-[3px] data-[focus-within]:ring-ring/20">
+          <Button
+            slot="decrement"
+            className="-ms-px flex aspect-square h-[inherit] items-center justify-center rounded-s-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <Minus size={16} strokeWidth={2} aria-hidden="true" />
+          </Button>
+          <Input className="w-full grow bg-background px-3 py-2 text-center text-base tabular-nums text-foreground focus:outline-none" />
+          <Button
+            slot="increment"
+            className="-me-px flex aspect-square h-[inherit] items-center justify-center rounded-e-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <Plus size={16} strokeWidth={2} aria-hidden="true" />
+          </Button>
+        </Group>
+      </div>
+    </NumberField>
+  );
 }
diff --git a/components/wallet.tsx b/components/wallet.tsx
index 3c7753e..29d92bc 100644
--- a/components/wallet.tsx
+++ b/components/wallet.tsx
@@ -7,101 +7,100 @@ import { toast } from "sonner";
 import { createTopup } from "@/actions/payment";
 import { Button } from "@/components/ui/button";
 import {
-	Drawer,
-	DrawerClose,
-	DrawerContent,
-	DrawerDescription,
-	DrawerFooter,
-	DrawerHeader,
-	DrawerTitle,
-	DrawerTrigger,
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
 } from "@/components/ui/drawer";
 import { WalletDrawerOpenAtom, walletTopUpValue } from "@/lib/atoms";
 import type { TopupType } from "@/lib/types";
 import NumberInput from "./number-input";
 
 export function Wallet({ walletBalance }: { walletBalance: number }) {
-	const pathname = usePathname();
-	const [amount, setAmount] = useAtom(walletTopUpValue);
-	const [isOpen, setIsOpen] = useAtom(WalletDrawerOpenAtom);
-	const [disabled, setDisabled] = useState(false);
-	const router = useRouter();
+  const pathname = usePathname();
+  const [amount, setAmount] = useAtom(walletTopUpValue);
+  const [isOpen, setIsOpen] = useAtom(WalletDrawerOpenAtom);
+  const [disabled, setDisabled] = useState(false);
+  const router = useRouter();
 
-	if (pathname === "/payment") {
-		return null;
-	}
+  if (pathname === "/payment") {
+    return null;
+  }
 
-	const data: TopupType = {
-		amount: Number.parseFloat(amount.toFixed(2)),
-	};
+  const data: TopupType = {
+    amount: Number.parseFloat(amount.toFixed(2)),
+  };
 
-	return (
-		<Drawer open={isOpen} onOpenChange={setIsOpen}>
-			<DrawerTrigger asChild>
-				<Button onClick={() => setIsOpen(!isOpen)} variant="outline">
-					{walletBalance}{" "}
-					MVR
-					<Wallet2 />
-				</Button>
-			</DrawerTrigger>
-			<DrawerContent>
-				<div className="mx-auto w-full max-w-sm">
-					<DrawerHeader>
-						<DrawerTitle>Wallet</DrawerTitle>
-						<DrawerDescription asChild>
-							<div>
-								Your wallet balance is{" "}
-								<span className="font-semibold">
-									{new Intl.NumberFormat("en-US", {
-										minimumFractionDigits: 2,
-										maximumFractionDigits: 2,
-									}).format(walletBalance)}
-								</span>{" "}
-							</div>
-						</DrawerDescription>
-					</DrawerHeader>
+  return (
+    <Drawer open={isOpen} onOpenChange={setIsOpen}>
+      <DrawerTrigger asChild>
+        <Button onClick={() => setIsOpen(!isOpen)} variant="outline">
+          {walletBalance} MVR
+          <Wallet2 />
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div className="mx-auto w-full max-w-sm">
+          <DrawerHeader>
+            <DrawerTitle>Wallet</DrawerTitle>
+            <DrawerDescription asChild>
+              <div>
+                Your wallet balance is{" "}
+                <span className="font-semibold">
+                  {new Intl.NumberFormat("en-US", {
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2,
+                  }).format(walletBalance)}
+                </span>{" "}
+              </div>
+            </DrawerDescription>
+          </DrawerHeader>
 
-					<div className="px-4 flex flex-col gap-4">
-						<NumberInput
-							label="Set amount to top up"
-							value={amount}
-							onChange={(value) => setAmount(value)}
-							maxAllowed={5000}
-							isDisabled={amount === 0}
-						/>
-					</div>
-					<DrawerFooter>
-						<Button
-							onClick={async () => {
-								console.log(data);
-								setDisabled(true);
-								const topup = await createTopup(data);
-								setDisabled(false);
-								if (topup) {
-									router.push(`/top-ups/${topup.id}`);
-									setIsOpen(!isOpen);
-								} else {
-									toast.error("Something went wrong.");
-								}
-							}}
-							className="w-full"
-							disabled={amount === 0 || disabled}
-						>
-							{disabled ? (
-								<Loader2 className="ml-2 animate-spin" />
-							) : (
-								<>
-									Go to payment
-									<CircleDollarSign />
-								</>
-							)}
-						</Button>
-						<DrawerClose asChild>
-							<Button variant="outline">Cancel</Button>
-						</DrawerClose>
-					</DrawerFooter>
-				</div>
-			</DrawerContent>
-		</Drawer>
-	);
+          <div className="px-4 flex flex-col gap-4">
+            <NumberInput
+              label="Set amount to top up"
+              value={amount}
+              onChange={(value) => setAmount(value)}
+              maxAllowed={5000}
+              isDisabled={amount === 0}
+            />
+          </div>
+          <DrawerFooter>
+            <Button
+              onClick={async () => {
+                console.log(data);
+                setDisabled(true);
+                const topup = await createTopup(data);
+                setDisabled(false);
+                if (topup) {
+                  router.push(`/top-ups/${topup.id}`);
+                  setIsOpen(!isOpen);
+                } else {
+                  toast.error("Something went wrong.");
+                }
+              }}
+              className="w-full"
+              disabled={amount === 0 || disabled}
+            >
+              {disabled ? (
+                <Loader2 className="ml-2 animate-spin" />
+              ) : (
+                <>
+                  Go to payment
+                  <CircleDollarSign />
+                </>
+              )}
+            </Button>
+            <DrawerClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
 }
diff --git a/lib/atoms.ts b/lib/atoms.ts
index 07d1c82..8c33a69 100644
--- a/lib/atoms.ts
+++ b/lib/atoms.ts
@@ -10,7 +10,7 @@ export const discountPercentageAtom = atom(75);
 export const numberOfDevicesAtom = atom(1);
 export const numberOfDaysAtom = atom(30);
 export const numberOfMonths = atom(1);
-export const walletTopUpValue = atom(1);
+export const walletTopUpValue = atom(100);
 export const formulaResultAtom = atom("");
 export const deviceCartAtom = atom<Device[]>([]);
 export const cartDrawerOpenAtom = atom(false);
@@ -19,14 +19,14 @@ export const loadingDevicesToPayAtom = atom(false);
 
 // Export the atoms with their store
 export const atoms = {
-	initialPriceAtom,
-	discountPercentageAtom,
-	numberOfDevicesAtom,
-	numberOfDaysAtom,
-	numberOfMonths,
-	formulaResultAtom,
-	deviceCartAtom,
-	cartDrawerOpenAtom,
-	walletTopUpValue,
-	loadingDevicesToPayAtom,
+  initialPriceAtom,
+  discountPercentageAtom,
+  numberOfDevicesAtom,
+  numberOfDaysAtom,
+  numberOfMonths,
+  formulaResultAtom,
+  deviceCartAtom,
+  cartDrawerOpenAtom,
+  walletTopUpValue,
+  loadingDevicesToPayAtom,
 };