diff --git a/src/components/CoinData.jsx b/src/components/CoinData.jsx
new file mode 100644
index 0000000..841a837
--- /dev/null
+++ b/src/components/CoinData.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+
+const CoinData = ({ data }) => {
+  console.log(data); // Ensure data is received and logged properly
+  
+  if (!data || Object.keys(data).length === 0) {
+    return <div className="text-red-500">Not valid data</div>;
+  }
+  
+  const coin = data[0];
+  console.log(coin);
+  
+  return (
+    <div className="bg-gradient-to-r from-indigo-600 to-purple-600 p-6 rounded-xl shadow-lg transform transition duration-500 hover:scale-105 w-full max-w-lg mx-auto">
+      <div className="flex justify-center mb-4">
+        <img src={coin.image} alt={coin.name} className="h-16 w-16 rounded-full shadow-md" />
+      </div>
+      <h2 className="text-2xl font-bold text-center text-white mb-4">
+        {coin.name} ({coin.symbol ? coin.symbol.toUpperCase() : ''})
+      </h2>
+      <div className="text-center space-y-2">
+        <div className="flex justify-between">
+          <p className="text-gray-200">Current Price:</p>
+          <p className="text-white">${coin.current_price.toFixed(2)}</p>
+        </div>
+        <div className="flex justify-between">
+          <p className="text-gray-200">Market Cap:</p>
+          <p className="text-white">${coin.market_cap.toLocaleString()}</p>
+        </div>
+        <div className="flex justify-between">
+          <p className="text-gray-200">Total Volume:</p>
+          <p className="text-white">${coin.total_volume.toLocaleString()}</p>
+        </div>
+        <div className="flex justify-between">
+          <p className="text-gray-200">Circulating Supply:</p>
+          <p className="text-white">{coin.circulating_supply.toLocaleString()} {coin.symbol ? coin.symbol.toUpperCase() : ''}</p>
+        </div>
+        <div className="flex justify-between">
+          <p className="text-gray-200">High 24h:</p>
+          <p className="text-white">${coin.high_24h.toFixed(2)}</p>
+        </div>
+        <div className="flex justify-between">
+          <p className="text-gray-200">Low 24h:</p>
+          <p className="text-white">${coin.low_24h.toFixed(2)}</p>
+        </div>
+        <div className="flex justify-between">
+          <p className="text-gray-200">Price Change (24h):</p>
+          <p className="text-white">${coin.price_change_24h.toFixed(2)} ({coin.price_change_percentage_24h.toFixed(2)}%)</p>
+        </div>
+        <div className="flex justify-between">
+          <p className="text-gray-200">All-time High:</p>
+          <p className="text-white">${coin.ath.toFixed(2)} ({new Date(coin.ath_date).toLocaleDateString()})</p>
+        </div>
+        <div className="flex justify-between">
+          <p className="text-gray-200">All-time Low:</p>
+          <p className="text-white">${coin.atl.toFixed(2)} ({new Date(coin.atl_date).toLocaleDateString()})</p>
+        </div>
+        <div className="flex justify-between">
+          <p className="text-gray-200">Last Updated:</p>
+          <p className="text-white">{new Date(coin.last_updated).toLocaleString()}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CoinData;
diff --git a/src/components/CointTable.jsx b/src/components/CointTable.jsx
index cce27de..536fc46 100644
--- a/src/components/CointTable.jsx
+++ b/src/components/CointTable.jsx
@@ -2,15 +2,21 @@ import React, { useContext } from 'react';
 import { CoinContext } from '../context/CoinContext';
 
 const CoinTable = () => {
-  const { coins, currency } = useContext(CoinContext);
+  
+  const {currency,coins } = useContext(CoinContext);
+ 
+
 
-  // Handle case where coins are still loading or not yet fetched
   if (!coins || coins.length === 0) {
-    return <div>Loading...</div>; // You can replace with a loading indicator component
+    return (
+      <div className="flex justify-center items-center h-screen">
+          <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
+      </div>
+  );
   }
 
   // Display only the first 10 coins
-  const displayCoins = coins.slice(0, 10);
+  const displayCoins = coins.slice(0, 100);
 
   return (
     <div className="overflow-x-auto bg-gradient-to-b from-violet-900 to-indigo-800 shadow-md sm:rounded-lg">
@@ -36,21 +42,21 @@ const CoinTable = () => {
         <tbody>
           {displayCoins.map((coin, index) => (
             <tr key={coin.id} className={`border-b dark:border-gray-700 ${index % 2 === 0 ? 'bg-indigo-500 dark:bg-blue-800' : 'bg-violet-800'}`}>
-              <td className="px-6 py-4 whitespace-nowrap">
+              <td className="px-4 py-4  whitespace-nowrap">
                 <div className="flex items-center">
                   <img src={coin.image} alt={coin.name} className="w-8 h-8 mr-2" />
-                  <span className="font-medium">{coin.name} ({coin.symbol.toUpperCase()})</span>
+                  <span className="font-medium  max-w-40 truncate ">{coin.name} ({coin.symbol.toUpperCase()})</span>
                 </div>
               </td>
-              <td className="px-6 py-4">
+              <td className="px-4 py-4">
                 {currency.symbol} {coin.current_price.toLocaleString()}
               </td>
               {/* Hide Market Cap on smaller screens */}
-              <td className="px-6 py-4 hidden sm:table-cell">
+              <td className="px-4 py-4 hidden sm:table-cell">
                 {currency.symbol} {coin.market_cap.toLocaleString()}
               </td>
               {/* Hide 24h Change on smaller screens */}
-              <td className={`px-6 py-4 hidden sm:table-cell ${coin.price_change_percentage_24h >= 0 ? 'text-green-500' : 'text-red-500'}`}>
+              <td className={`px-4 py-4 hidden sm:table-cell ${coin.price_change_percentage_24h >= 0 ? 'text-green-500' : 'text-red-500'}`}>
                 {coin.price_change_percentage_24h.toFixed(2)}%
               </td>
             </tr>
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
new file mode 100644
index 0000000..1e44f1a
--- /dev/null
+++ b/src/components/Footer.jsx
@@ -0,0 +1,37 @@
+// src/components/Footer.jsx
+import React from 'react';
+
+const Footer = () => {
+    return (
+        <footer className="bg-gradient-to-b from-indigo-950 to-purple-800 text-white py-4 px-5">
+            <div className="container mx-auto text-center grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div>
+                    <h2 className="text-2xl font-bold mb-1">CryptoMania</h2>
+                    <p className="mb-2">Stay updated with the latest trends in cryptocurrency.</p>
+                   
+                </div>
+                <div className='hidden md:block'>
+                    <h2 className="text-xl font-bold mb-1">Navigation</h2>
+                    <ul className="flex justify-center space-x-2">
+                        <li><a href="#" className="hover:underline">Home</a></li>
+                        <li><a href="#" className="hover:underline">Market</a></li>
+                        <li><a href="#" className="hover:underline">News</a></li>
+                        
+                    </ul>
+                </div>
+                <div>
+                    <h2 className="text-xl font-bold mb-1">Follow Us</h2>
+                    <ul className="flex justify-center space-x-4">
+                        <li><a href="#" className="hover:underline">Instagram</a></li>
+                        <li><a href="#" className="hover:underline">LinkedIn</a></li>
+                        <li><a href="#" className="hover:underline">Contact</a></li>
+                    </ul>
+                </div>
+               
+            </div>
+            <p className='flex text-center justify-center mt-2'>&copy; 2024 Md Saquib Hussain. All rights reserved.</p>
+        </footer>
+    );
+};
+
+export default Footer;
diff --git a/src/context/CoinContext.jsx b/src/context/CoinContext.jsx
index a7d72f1..3739e71 100644
--- a/src/context/CoinContext.jsx
+++ b/src/context/CoinContext.jsx
@@ -12,7 +12,7 @@ const CoinContextProvider = (props) => {
       method: 'GET',
       headers: { accept: 'application/json', 'x-cg-demo-api-key': 'CG-kAqoQqNM9q4z9V4w4Uadedtj' }
     };
-
+   
     fetch(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=${currency.name}`, options)
       .then(response => response.json())
       .then(response => setCoins(response))
diff --git a/src/main.jsx b/src/main.jsx
index f01e1fc..62257d8 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -7,6 +7,7 @@ import Home from './pages/Home/Home.jsx'
 import News from './pages/News/News.jsx';
 import Market from './pages/Market/Market.jsx';
 import CoinContextProvider from './context/CoinContext.jsx';
+import Footer from './components/Footer.jsx';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
@@ -19,6 +20,7 @@ ReactDOM.createRoot(document.getElementById('root')).render(
         <Route path="/news" element={<News />} />
         <Route path="/market" element={<Market />} />
       </Routes>
+      <Footer/>
     </div>
     </CoinContextProvider>
      </BrowserRouter>
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
index 365382f..d7d3f95 100644
--- a/src/pages/Home/Home.jsx
+++ b/src/pages/Home/Home.jsx
@@ -1,25 +1,15 @@
-import React, { useContext } from 'react'
-import { CoinContext } from '../../context/CoinContext'
+import React, { useContext, useState,useEffect } from 'react'
 import CoinTable from '../../components/CointTable';
 
-const Home = () => {
-    const {coins,currency}=useContext(CoinContext);
-   
 
+const Home = () => {
+ 
     return (
         <div className='bg-custom  h-screen text-blue-500 flex flex-col items-center justify-center'>
-            <h1 className='mt-20 text-center text-4xl'>Welcome to CryptoMania</h1>
-            <h2 className='text-xl text-center'>Your one stop solution for crypto</h2>
-            <div className='flex flex-col items-center justify-center min-w-fit'>
-                <form action="" className='bg-blue-800 w-fit py-1 rounded-xl m-4 px-2'>
-                    <input type="search" name="coinsearch" id="" placeholder='Search Coins'
-                        className='bg-blue-800 rounded-xl py-1 w-4/6 px-4 mx-3 text-blue-100' />
-                    <button type='submit' className='bg-slate-950 rounded-md p-1 px-2 border-2 border-violet-700'>submit</button>
-                </form>
-
-               
-            </div>
-            <CoinTable/>
+            <h1 className='mt-24 text-center text-4xl'>Welcome to CryptoMania</h1>
+            <h2 className='text-xl text-center mb-10'>Your one stop solution for crypto</h2>
+           
+            <CoinTable  />
         </div>
 
     )
diff --git a/src/pages/Market/Market.jsx b/src/pages/Market/Market.jsx
index b1a26ed..0f94b35 100644
--- a/src/pages/Market/Market.jsx
+++ b/src/pages/Market/Market.jsx
@@ -1,31 +1,75 @@
-import React, { useContext } from 'react'
-import  { CoinContext } from '../../context/CoinContext';
+import React, { useContext, useState } from 'react';
+import { CoinContext } from '../../context/CoinContext';
+import CoinData from '../../components/CoinData';
 
 const Market = () => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const { coins } = useContext(CoinContext);
+  const [filteredCoins, setFilteredCoins] = useState([]);
+  const [val, setVal] = useState('');
 
- const {val,setval}=useContext(CoinContext);
- 
- 
- function update(){
-    setval((old)=>old+1+old);
-    console.log(val);
- }
+  const handleInputChange = (e) => {
+    const { value } = e.target;
+    setSearchQuery(value);
+    //console.log("hande",value);
 
-  return (
-    <div className='bg-custom h-screen text-blue-500 flex flex-col items-center justify-center'>
-    <h1 className=' text-4xl'>Welcome to Market Section</h1>
-    <h2 className='text-xl'>Your one stop solution for crypto</h2>
-    <h2 className='text-xl'>The value is {val}</h2>
-    <button onClick={update} className='bg-indigo-500'>
-          Hit me !!
-    </button>
-    <div>
-        <input type="search" name="coinsearch" id=""
-            className='bg-blue-400 rounded-xl py-1 my-4 px-4 text-blue-100' />
-    </div>
+    // Filter coins based on input value
+    const filtered = coins.filter((coin) =>
+      coin.name.toLowerCase().includes(value.toLowerCase())
+    );
+
+    // Take only the first three valid matches
+    const firstThreeMatches = filtered.slice(0, 3);
    
-</div>
+    setFilteredCoins(firstThreeMatches);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const filtered = coins.filter((coin) =>
+      coin.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    setVal(filtered);
+    setSearchQuery("");
+  };
+
+  return (
+    <>
+      <div className='bg-custom h-screen text-blue-500 flex flex-col text-center items-center justify-center'>
+        <h1 className=' text-4xl'>Welcome to Market Section</h1>
+        <h2 className='text-xl'>Your one stop solution for crypto</h2>
+
+        <div className='flex flex-col items-center justify-center min-w-fit'>
+
+          <form onSubmit={handleSubmit} className='bg-blue-800 w-fit py-1 rounded-xl m-4 px-2'>
+            <input
+              type="search"
+              name="coinsearch"
+              placeholder='Search Coins'
+              value={searchQuery}
+              onChange={handleInputChange}
+              required
+              list="coinlist"
+              className='bg-blue-800 rounded-xl py-1 w-4/6 px-4 mx-3 text-blue-100'
+            />
+            <datalist id="coinlist" className="bg-blue-800 rounded-xl py-1 w-4/6 px-4 mx-3 text-blue-100">
+              {filteredCoins.map((coin, index) => (
+                <option key={index} value={coin.name}></option>
+              ))}
+            </datalist>
+            <button type='submit' className='bg-slate-950 rounded-md p-1 px-2 border-2 border-violet-700'>
+              submit
+            </button>
+          </form>
+
+
+        </div>
+        <CoinData data={val} /> {/* Pass data as a prop */}
+      </div>
+
+    </>
   )
 }
 
-export default Market
+export default Market;