diff --git a/src/components/DevAreaTools/IPLookup.jsx b/src/components/DevAreaTools/IPLookup.jsx
index 86efa84..a3d3228 100644
--- a/src/components/DevAreaTools/IPLookup.jsx
+++ b/src/components/DevAreaTools/IPLookup.jsx
@@ -4,22 +4,28 @@ export default function IPLookup() {
     const [ipAddress, setIpAddress] = useState('');
     const [result, setResult] = useState(null);
     const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
 
     const lookupIP = async (ip) => {
         setLoading(true);
+        setError(null);
         try {
-            // Using ipapi.co - free, no API key
-            const url = ip
-                ? `https://ipapi.co/${ip}/json/`
-                : 'https://ipapi.co/json/';
-
+            const url = ip 
+                ? `http://ip-api.com/json/${ip}?fields=status,message,country,countryCode,region,regionName,city,zip,lat,lon,timezone,isp,org,as,query`
+                : `http://ip-api.com/json/?fields=status,message,country,countryCode,region,regionName,city,zip,lat,lon,timezone,isp,org,as,query`;
+            
             const response = await fetch(url);
             const data = await response.json();
-
-            setResult(data);
-        } catch (error) {
-            console.error('Error:', error);
-            setResult({ error: 'Failed to lookup IP' });
+            
+            if (data.status === 'fail') {
+                setError(data.message);
+                setResult(null);
+            } else {
+                setResult(data);
+            }
+        } catch (err) {
+            setError('Failed to lookup IP');
+            console.error('Error:', err);
         }
         setLoading(false);
     };
@@ -30,50 +36,87 @@ export default function IPLookup() {
     };
 
     return (
-        <div className="p-6">
-            <h1 className="text-2xl font-bold mb-4">IP Address Lookup</h1>
-
-            <div className="flex gap-2 mb-4">
+        <div className="max-w-4xl mx-auto p-6">
+            <h1 className="text-3xl font-bold mb-6">IP Address Lookup</h1>
+            
+            <div className="flex gap-2 mb-6">
                 <input
                     type="text"
                     placeholder="Enter IP address (e.g., 8.8.8.8)"
                     value={ipAddress}
                     onChange={(e) => setIpAddress(e.target.value)}
-                    className="flex-1 px-4 py-2 border rounded"
+                    className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                 />
-                <button
+                <button 
                     onClick={() => lookupIP(ipAddress)}
                     disabled={loading}
-                    className="px-6 py-2 bg-blue-500 text-white rounded"
+                    className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:bg-gray-400"
                 >
-                    Lookup
+                    {loading ? 'Loading...' : 'Lookup'}
                 </button>
-                <button
+                <button 
                     onClick={getMyIP}
                     disabled={loading}
-                    className="px-6 py-2 bg-green-500 text-white rounded"
+                    className="px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 disabled:bg-gray-400"
                 >
                     My IP
                 </button>
             </div>
 
-            {loading && <p>Loading...</p>}
-
-            {result && !result.error && (
-                <div className="bg-gray-100 p-4 rounded">
-                    <p><strong>IP:</strong> {result.ip}</p>
-                    <p><strong>City:</strong> {result.city}</p>
-                    <p><strong>Region:</strong> {result.region}</p>
-                    <p><strong>Country:</strong> {result.country_name}</p>
-                    <p><strong>Timezone:</strong> {result.timezone}</p>
-                    <p><strong>ISP:</strong> {result.org}</p>
-                    <p><strong>Latitude:</strong> {result.latitude}</p>
-                    <p><strong>Longitude:</strong> {result.longitude}</p>
+            {error && (
+                <div className="bg-slate-800 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+                    {error}
                 </div>
             )}
 
-            {result?.error && (
-                <p className="text-red-500">{result.error}</p>
+            {result && (
+                <div className="bg-gray-500 border border-gray-700 rounded-lg shadow-sm overflow-hidden">
+                    <div className="bg-gray-50 px-6 py-4 border-b border-gray-200">
+                        <h2 className="text-xl font-semibold">IP Information</h2>
+                    </div>
+                    <div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div className="flex flex-col">
+                            <span className="text-sm text-gray-500 mb-1">IP Address</span>
+                            <span className="font-mono font-semibold">{result.query}</span>
+                        </div>
+                        <div className="flex flex-col">
+                            <span className="text-sm text-gray-500 mb-1">Country</span>
+                            <span className="font-medium">{result.country} ({result.countryCode})</span>
+                        </div>
+                        <div className="flex flex-col">
+                            <span className="text-sm text-gray-500 mb-1">Region</span>
+                            <span className="font-medium">{result.regionName}</span>
+                        </div>
+                        <div className="flex flex-col">
+                            <span className="text-sm text-gray-500 mb-1">City</span>
+                            <span className="font-medium">{result.city}</span>
+                        </div>
+                        <div className="flex flex-col">
+                            <span className="text-sm text-gray-500 mb-1">ZIP Code</span>
+                            <span className="font-medium">{result.zip || 'N/A'}</span>
+                        </div>
+                        <div className="flex flex-col">
+                            <span className="text-sm text-gray-500 mb-1">Timezone</span>
+                            <span className="font-medium">{result.timezone}</span>
+                        </div>
+                        <div className="flex flex-col">
+                            <span className="text-sm text-gray-500 mb-1">ISP</span>
+                            <span className="font-medium">{result.isp}</span>
+                        </div>
+                        <div className="flex flex-col">
+                            <span className="text-sm text-gray-500 mb-1">Organization</span>
+                            <span className="font-medium">{result.org}</span>
+                        </div>
+                        <div className="flex flex-col">
+                            <span className="text-sm text-gray-500 mb-1">AS Number</span>
+                            <span className="font-mono text-sm">{result.as}</span>
+                        </div>
+                        <div className="flex flex-col">
+                            <span className="text-sm text-gray-500 mb-1">Coordinates</span>
+                            <span className="font-mono text-sm">{result.lat}, {result.lon}</span>
+                        </div>
+                    </div>
+                </div>
             )}
         </div>
     );