diff --git a/src/pages/Top Up/TopUp.tsx b/src/pages/Top Up/TopUp.tsx
index 5a261fb00b40e4eb3e55064333ccf4071decdb64..8915ff79fc08bccf027ccc8c66e47642419784f4 100644
--- a/src/pages/Top Up/TopUp.tsx	
+++ b/src/pages/Top Up/TopUp.tsx	
@@ -5,7 +5,8 @@ import Navbar from "../../components/Navbar/Navbar";
 const TopUp: React.FC = () => {
   const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<string>('');
   const [accountNumber, setAccountNumber] = useState<string>('');
-  const [amount, setAmount] = useState<number>(0);
+  const [amount, setAmount] = useState<string>('');
+  const [error, setError] = useState<string>('');
 
   // Mock user data
   const username = localStorage.getItem('username') || 'User';
@@ -18,79 +19,109 @@ const TopUp: React.FC = () => {
   };
 
   const handleAccountNumberChange = (value: string) => {
-    setAccountNumber(value);
+    if (/^\d+$/.test(value) || value === '') {
+      setAccountNumber(value);
+    } else {
+      setError('Account number can only contain numbers');
+    }
   };
 
   const handleAmountChange = (value: string) => {
-    setAmount(parseInt(value) || 0);
+    if (value === '' || (parseInt(value) > 0 && !isNaN(parseInt(value)))) {
+        setAmount(value);
+        setError('');
+      } else {
+        setError('Top-up amount must be greater than 0');
+      }
   };
 
   const handleSubmit = () => {
-    /* logic for handling the top-up submission */
+    // Validation
+    if (!selectedPaymentMethod) {
+      setError('Select a payment method');
+      return;
+    }
+
+    if (!accountNumber) {
+      setError('Enter an account number');
+      return;
+    }
+
+    if (!amount) {
+      setError('Enter the top-up amount');
+      return;
+    }
+
+    // Logic to handle top-up submission
     console.log('Selected Payment Method:', selectedPaymentMethod);
     console.log('Account Number:', accountNumber);
     console.log('Top-up Amount:', amount);
+
+    // Reset error message after successful submission
+    setError('');
   };
 
   return (
     <>
-    <Navbar search='' />
-    <Flex direction='column' align='center' height='100vh'>
-      
-      {/* Top-Up Form */}
-      <Box p={[4, 8]} width={['80vw', '60vw']} maxW={['80vw', '60vw']}>
-        {/* Heading with Username */}
-        <Heading color='white' mb={[4, 8]} textAlign="center">Top-Up for {username}</Heading>
-        {/* Current Balance */}
-        <Text color='white' mb={[4, 8]} textAlign="center">Current Balance: {currentBalance}</Text>
-        {/* Payment Method Dropdown */}
-        <Flex direction='column' mb={[4, 8]}>
-          <Text color='white' mb={2}>Select Payment Method</Text>
-          <Select
-            placeholder="Select Payment Method"
-            value={selectedPaymentMethod}
-            onChange={(e) => handlePaymentMethodChange(e.target.value)}
-            color="black"
-            bg="white"
-          >
-            {paymentMethodOptions.map((option, index) => (
-              <option key={index} value={option}>
-                {option}
-              </option>
-            ))}
-          </Select>
-        </Flex>
-
-        {/* Account Number */}
-        <Flex direction='column' mb={[4, 8]}>
-          <Text color='white' mb={2}>Enter Account Number</Text>
-          <Input
-            type="text"
-            value={accountNumber}
-            onChange={(e) => handleAccountNumberChange(e.target.value)}
-            color="black"
-            bg="white"
-          />
-        </Flex>
-
-        {/* Top-Up Amount */}
-        <Flex direction='column' mb={[4, 8]}>
-          <Text color='white' mb={2}>Enter Top-Up Amount</Text>
-          <Input
-            type="number"
-            value={amount}
-            onChange={(e) => handleAmountChange(e.target.value)}
-            color="black"
-            bg="white"
-          />
-        </Flex>
-
-        {/* Submit Button */}
-        <Flex direction='column' mb={[4, 8]} justifyContent="center" alignItems="center">
-            <Button colorScheme="teal" onClick={handleSubmit}>Submit</Button>
-        </Flex>
-      </Box>
-    </Flex>
+      <Navbar search='' />
+      <Flex direction='column' align='center' height='100vh'>
+        {/* Top-Up Form */}
+        <Box p={[4, 8]} width={['80vw', '60vw']} maxW={['80vw', '60vw']}>
+          {/* Heading with Username */}
+          <Heading color='white' mb={[4, 8]} textAlign="center">Hi! {username}</Heading>
+          {/* Current Balance */}
+          <Text color='white' mb={[4, 8]} textAlign="center">Your Current Balance: {currentBalance}</Text>
+
+          {error && (
+            <Text color='red' mb={[4, 8]} textAlign="center">{error}</Text>
+          )}
+
+          {/* Payment Method Dropdown */}
+          <Flex direction='column' mb={[4, 8]}>
+            <Text color='white' mb={2}>Select Payment Method</Text>
+            <Select
+              placeholder="Select Payment Method"
+              value={selectedPaymentMethod}
+              onChange={(e) => handlePaymentMethodChange(e.target.value)}
+              color="black"
+              bg="white"
+            >
+              {paymentMethodOptions.map((option, index) => (
+                <option key={index} value={option}>
+                  {option}
+                </option>
+              ))}
+            </Select>
+          </Flex>
+
+          {/* Account Number */}
+          <Flex direction='column' mb={[4, 8]}>
+            <Text color='white' mb={2}>Enter Account Number</Text>
+            <Input
+              type="text"
+              value={accountNumber}
+              onChange={(e) => handleAccountNumberChange(e.target.value)}
+              color="black"
+              bg="white" />
+          </Flex>
+
+          {/* Top-Up Amount */}
+          <Flex direction='column' mb={[4, 8]}>
+            <Text color='white' mb={2}>Enter Top-Up Amount</Text>
+            <Input
+              type="number"
+              value={amount}
+              onChange={(e) => handleAmountChange(e.target.value)}
+              color="black"
+              bg="white" />
+          </Flex>
+
+          {/* Submit Button */}
+          <Flex direction='column' mb={[4, 8]} justifyContent="center" alignItems="center">
+            <Button colorScheme="green" color="black" onClick={handleSubmit}>Submit</Button>
+          </Flex>
+        </Box>
+      </Flex>
     </>
   );
 };