diff --git a/src/pages/Feedback.css b/src/pages/Feedback.css
index e48fca9..7e7f9bd 100644
--- a/src/pages/Feedback.css
+++ b/src/pages/Feedback.css
@@ -80,3 +80,48 @@
   text-align: center;
   font-size: 14px;
 }
+
+.feedback-subtitle {
+  font-size: 0.9rem;
+  color: #aaa;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.feedback-select {
+  padding: 10px;
+  border-radius: 8px;
+  border: 1px solid #333;
+  background: #111;
+  color: #fff;
+}
+
+.feedback-rating {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 10px 0;
+  color: #ccc;
+}
+
+.star {
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #555;
+  transition: 0.3s;
+}
+
+.star:hover,
+.star.active {
+  color: #facc15;
+  transform: scale(1.2);
+}
+
+.feedback-success {
+  background: rgba(0, 255, 150, 0.1);
+  color: #00ffae;
+  padding: 10px;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/src/pages/Feedback.jsx b/src/pages/Feedback.jsx
index 75b820e..f485cbb 100644
--- a/src/pages/Feedback.jsx
+++ b/src/pages/Feedback.jsx
@@ -1,14 +1,17 @@
 import React, { useState } from "react";
-import "./Feedback.css"; // reuse existing theme styling
+import "./Feedback.css";
 
 const Feedback = () => {
   const [formData, setFormData] = useState({
     name: "",
     email: "",
+    category: "general",
+    rating: 0,
     message: "",
   });
 
   const [submitted, setSubmitted] = useState(false);
+  const [loading, setLoading] = useState(false);
 
   const handleChange = (e) => {
     setFormData({
@@ -17,64 +20,116 @@ const Feedback = () => {
     });
   };
 
+  const handleRating = (value) => {
+    setFormData({ ...formData, rating: value });
+  };
+
   const handleSubmit = (e) => {
     e.preventDefault();
 
     if (!formData.message.trim()) return;
 
-    setSubmitted(true);
+    setLoading(true);
 
-    setFormData({
-      name: "",
-      email: "",
-      message: "",
-    });
+    // simulate API call
+    setTimeout(() => {
+      setSubmitted(true);
+      setLoading(false);
+
+      setFormData({
+        name: "",
+        email: "",
+        category: "general",
+        rating: 0,
+        message: "",
+      });
+    }, 1200);
   };
 
   return (
-  <div className="feedback-container">
-    <div className="feedback-card">
-      <h2 className="feedback-title">Share Your Feedback</h2>
-
-      {submitted && (
-        <div className="feedback-success">
-          ✅ Thank you! Your feedback has been submitted.
-        </div>
-      )}
-
-      <form onSubmit={handleSubmit} className="feedback-form">
-        <input
-          type="text"
-          name="name"
-          placeholder="Your Name (Optional)"
-          value={formData.name}
-          onChange={handleChange}
-        />
-
-        <input
-          type="email"
-          name="email"
-          placeholder="Your Email (Optional)"
-          value={formData.email}
-          onChange={handleChange}
-        />
-
-        <textarea
-          name="message"
-          placeholder="Your Feedback *"
-          required
-          rows="5"
-          value={formData.message}
-          onChange={handleChange}
-        />
-
-        <button type="submit" className="feedback-button">
-          Submit Feedback
-        </button>
-      </form>
+    <div className="feedback-container">
+      <div className="feedback-card">
+        <h2 className="feedback-title">💬 Share Your Feedback</h2>
+        <p className="feedback-subtitle">
+          Help us improve CryptoHub with your valuable feedback.
+        </p>
+
+        {submitted && (
+          <div className="feedback-success">
+            🎉 Thanks! Your feedback helps us improve.
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="feedback-form">
+          {/* Name */}
+          <input
+            type="text"
+            name="name"
+            placeholder="Your Name (Optional)"
+            value={formData.name}
+            onChange={handleChange}
+          />
+
+          {/* Email */}
+          <input
+            type="email"
+            name="email"
+            placeholder="Your Email (Optional)"
+            value={formData.email}
+            onChange={handleChange}
+          />
+
+          {/* Category */}
+          <select
+            name="category"
+            value={formData.category}
+            onChange={handleChange}
+            className="feedback-select"
+          >
+            <option value="general">General Feedback</option>
+            <option value="bug">Report a Bug</option>
+            <option value="feature">Feature Request</option>
+            <option value="ui">UI/UX Suggestion</option>
+          </select>
+
+          {/* Rating */}
+          <div className="feedback-rating">
+            <span>Rate your experience:</span>
+            {[1, 2, 3, 4, 5].map((star) => (
+              <span
+                key={star}
+                className={`star ${
+                  formData.rating >= star ? "active" : ""
+                }`}
+                onClick={() => handleRating(star)}
+              >
+                ★
+              </span>
+            ))}
+          </div>
+
+          {/* Message */}
+          <textarea
+            name="message"
+            placeholder="Your Feedback *"
+            required
+            rows="5"
+            value={formData.message}
+            onChange={handleChange}
+          />
+
+          {/* Submit */}
+          <button
+            type="submit"
+            className="feedback-button"
+            disabled={loading}
+          >
+            {loading ? "Submitting..." : "Submit Feedback"}
+          </button>
+        </form>
+      </div>
     </div>
-  </div>
-);
+  );
 };
 
-export default Feedback;
+export default Feedback;
\ No newline at end of file
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
index 019837f..928a179 100644
--- a/src/pages/Home/Home.jsx
+++ b/src/pages/Home/Home.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useState, useMemo } from "react";
 import "./Home.css";
 import { CoinContext } from "../../context/CoinContextInstance";
 import { Link } from "react-router-dom";
@@ -18,62 +18,100 @@ import { useWatchlist } from "../../context/WatchlistContext";
 const Home = () => {
   const { allCoin, filteredCoins, currency } = useContext(CoinContext);
   const { isInWatchlist, toggleWatchlist } = useWatchlist();
+
   const [displayCoin, setDisplayCoin] = useState([]);
   const [input, setInput] = useState("");
   const [showFilters, setShowFilters] = useState(false);
   const [minPrice, setMinPrice] = useState("");
   const [maxPrice, setMaxPrice] = useState("");
 
-  // Pagination State
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 10;
 
-  const inputHandler = (e) => {
-    setInput(e.target.value);
-    if (e.target.value === "") {
-      setDisplayCoin(filteredCoins);
-    }
-    setCurrentPage(1); // Reset to first page on search
-  };
+  // =========================
+  // 🔍 SMART SEARCH (Debounce)
+  // =========================
+  useEffect(() => {
+    const delay = setTimeout(() => {
+      if (!input) {
+        setDisplayCoin(filteredCoins);
+      } else {
+        const filtered = filteredCoins.filter((coin) =>
+          coin.name.toLowerCase().includes(input.toLowerCase())
+        );
+        setDisplayCoin(filtered);
+      }
+      setCurrentPage(1);
+    }, 300);
 
-  const searchHandler = (e) => {
-    e.preventDefault();
-    if (input && filteredCoins) {
-      setDisplayCoin(
-        filteredCoins.filter((item) =>
-          item.name.toLowerCase().includes(input.toLowerCase()),
-        ),
-      );
-    } else {
-      setDisplayCoin(filteredCoins);
-    }
-    setCurrentPage(1); // Reset to first page on search
-  };
+    return () => clearTimeout(delay);
+  }, [input, filteredCoins]);
 
+  // =========================
+  // 🎯 FILTER LOGIC
+  // =========================
   const applyFilters = () => {
     let filtered = [...filteredCoins];
-    if (minPrice)
+
+    if (minPrice) {
       filtered = filtered.filter(
-        (coin) => coin.current_price >= Number(minPrice),
+        (coin) => coin.current_price >= Number(minPrice)
       );
-    if (maxPrice)
+    }
+
+    if (maxPrice) {
       filtered = filtered.filter(
-        (coin) => coin.current_price <= Number(maxPrice),
+        (coin) => coin.current_price <= Number(maxPrice)
       );
+    }
+
     setDisplayCoin(filtered);
     setShowFilters(false);
-    setCurrentPage(1); // Reset to first page on filter
+    setCurrentPage(1);
   };
 
   useEffect(() => {
     setDisplayCoin(filteredCoins);
   }, [filteredCoins]);
 
-  // Pagination Logic
+  // =========================
+  // 📊 GLOBAL STATS
+  // =========================
+  const totalMarketCap = useMemo(
+    () => allCoin?.reduce((sum, c) => sum + c.market_cap, 0) || 0,
+    [allCoin]
+  );
+
+  const avgChange = useMemo(
+    () =>
+      allCoin?.reduce(
+        (sum, c) => sum + c.price_change_percentage_24h,
+        0
+      ) / (allCoin?.length || 1),
+    [allCoin]
+  );
+
+  // =========================
+  // 🔥 TRENDING COINS
+  // =========================
+  const trendingCoins = useMemo(() => {
+    return [...(displayCoin || [])]
+      .sort(
+        (a, b) =>
+          b.price_change_percentage_24h -
+          a.price_change_percentage_24h
+      )
+      .slice(0, 5);
+  }, [displayCoin]);
+
+  // =========================
+  // 📄 PAGINATION
+  // =========================
   const totalPages = Math.ceil((displayCoin.length || 0) / itemsPerPage);
+
   const currentCoins = displayCoin.slice(
     (currentPage - 1) * itemsPerPage,
-    currentPage * itemsPerPage,
+    currentPage * itemsPerPage
   );
 
   const handlePageChange = (newPage) => {
@@ -81,337 +119,205 @@ const Home = () => {
       setCurrentPage(newPage);
       const section = document.querySelector(".market-section");
       if (section) {
-        window.scrollTo({ top: section.offsetTop - 100, behavior: "smooth" });
+        window.scrollTo({
+          top: section.offsetTop - 100,
+          behavior: "smooth",
+        });
       }
     }
   };
 
+  // =========================
+  // 🧱 SKELETON UI
+  // =========================
+  const SkeletonRows = () => (
+    <div className="skeleton-container">
+      {Array.from({ length: 8 }).map((_, i) => (
+        <div key={i} className="skeleton-row" />
+      ))}
+    </div>
+  );
+
   return (
     <div className="home-container">
-      {/* -------------------------------------------
-        COSMIC HERO SECTION
-        -------------------------------------------
-      */}
-      <section className="cosmic-hero">
-        <div className="hero-glow-center"></div>
-        <div className="hero-planet"></div>
-
-        {/* Floating Elements (Orbitals) */}
-        <motion.div
-          className="orbital-element orb-1 glass-card"
-          animate={{ y: [0, -15, 0], opacity: [0.6, 1, 0.6] }}
-          transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
-        >
-          <span>Bitcoin</span>
-          <span className="text-gradient-cyan" style={{ color: "#00f5ff" }}>
-            +5.2%
-          </span>
-        </motion.div>
-
-        <motion.div
-          className="orbital-element orb-2 glass-card"
-          animate={{ y: [0, 20, 0], opacity: [0.5, 0.9, 0.5] }}
-          transition={{
-            duration: 5,
-            repeat: Infinity,
-            ease: "easeInOut",
-            delay: 1,
-          }}
-        >
-          <span>Ethereum</span>
-          <span className="text-gradient-cyan" style={{ color: "#00f5ff" }}>
-            +1.5%
-          </span>
-        </motion.div>
-
-        <motion.div
-          className="orbital-element orb-3 glass-card"
-          animate={{ y: [0, 25, 0], x: [0, -10, 0], opacity: [0.4, 0.8, 0.4] }}
-          transition={{
-            duration: 6,
-            repeat: Infinity,
-            ease: "easeInOut",
-            delay: 0.5,
-          }}
-        >
-          <span>Solana</span>
-          <span className="text-gradient-cyan" style={{ color: "#00f5ff" }}>
-            +8.5%
-          </span>
-        </motion.div>
-
-        <motion.div
-          className="orbital-element orb-4 glass-card"
-          animate={{ y: [0, -20, 0], x: [0, 15, 0], opacity: [0.3, 0.7, 0.3] }}
-          transition={{
-            duration: 7,
-            repeat: Infinity,
-            ease: "easeInOut",
-            delay: 1.5,
-          }}
-        >
-          <span>Cardano</span>
-          <span style={{ color: "#ff4d6d" }}>-2.1%</span>
-        </motion.div>
-
-        <motion.div
-          className="orbital-element orb-5 glass-card"
-          animate={{ scale: [1, 1.1, 1], opacity: [0.5, 0.9, 0.5] }}
-          transition={{
-            duration: 5,
-            repeat: Infinity,
-            ease: "easeInOut",
-            delay: 2,
-          }}
-        >
-          <span>BNB</span>
-          <span className="text-gradient-cyan" style={{ color: "#00f5ff" }}>
-            +1.2%
-          </span>
-        </motion.div>
 
+      {/* ================= HERO ================= */}
+      <section className="cosmic-hero">
         <div className="hero-content">
-          <motion.h1
-            className="hero-title"
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8 }}
-          >
-            <span className="title-purple">Sailing The Seas Of</span> <br />
-            <span className="title-cyan">Crypto Universe</span>
+          <motion.h1 initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+            🚀 Crypto Universe
           </motion.h1>
 
-          <motion.p
-            className="hero-subtitle"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.8, delay: 0.3 }}
-          >
-            Explore real-time data across the blockchain galaxy.
-          </motion.p>
-
-          <motion.div
-            className="search-orbit-container"
-            initial={{ scale: 0.9, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            transition={{ duration: 0.6, delay: 0.5 }}
-          >
-            <form
-              className="search-bar-cosmic glass-panel"
-              onSubmit={searchHandler}
-            >
-              <FiSearch className="search-icon" />
+          <p>Explore real-time blockchain data</p>
+
+          {/* SEARCH */}
+          <div className="search-bar-cosmic glass-panel">
+            <FiSearch />
+            <input
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              placeholder="Search Tokens..."
+            />
+            <button onClick={() => setShowFilters(!showFilters)}>
+              <FiFilter />
+            </button>
+          </div>
+
+          {/* FILTER PANEL */}
+          {showFilters && (
+            <div className="filters-box">
               <input
-                value={input}
-                onChange={inputHandler}
-                list="coinlist"
-                placeholder="Search Tokens..."
+                type="number"
+                placeholder="Min Price"
+                onChange={(e) => setMinPrice(e.target.value)}
               />
-              <button
-                type="button"
-                className="filter-trigger"
-                onClick={() => setShowFilters(!showFilters)}
-                aria-label="Filter markets"
-              >
-                <FiFilter />
-              </button>
-            </form>
+              <input
+                type="number"
+                placeholder="Max Price"
+                onChange={(e) => setMaxPrice(e.target.value)}
+              />
+              <button onClick={applyFilters}>Apply</button>
+            </div>
+          )}
+        </div>
+      </section>
 
-            {showFilters && (
-              <motion.div
-                className="cosmic-filters glass-card"
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-              >
-                <input
-                  type="number"
-                  placeholder="Min Price"
-                  value={minPrice}
-                  onChange={(e) => setMinPrice(e.target.value)}
-                />
-                <input
-                  type="number"
-                  placeholder="Max Price"
-                  value={maxPrice}
-                  onChange={(e) => setMaxPrice(e.target.value)}
-                />
-                <button className="btn-neon-purple" onClick={applyFilters}>
-                  Apply
-                </button>
-              </motion.div>
-            )}
-          </motion.div>
+      {/* ================= GLOBAL STATS ================= */}
+      <section className="global-stats glass-panel">
+        <div className="stat-card">
+          <h4>Market Cap</h4>
+          <p>{currency.symbol}{totalMarketCap.toLocaleString()}</p>
+        </div>
+
+        <div className="stat-card">
+          <h4>Avg Change</h4>
+          <p className={avgChange > 0 ? "positive" : "negative"}>
+            {avgChange.toFixed(2)}%
+          </p>
+        </div>
+
+        <div className="stat-card">
+          <h4>Total Coins</h4>
+          <p>{allCoin?.length}</p>
+        </div>
+      </section>
+
+      {/* ================= TRENDING ================= */}
+      <section className="trending-section glass-panel">
+        <h3>🔥 Trending</h3>
+
+        <div className="trending-list">
+          {trendingCoins.map((coin) => (
+            <Link key={coin.id} to={`/coin/${coin.id}`}>
+              <img src={coin.image} alt="" />
+              <span>{coin.symbol.toUpperCase()}</span>
+              <span className="positive">
+                +{coin.price_change_percentage_24h.toFixed(2)}%
+              </span>
+            </Link>
+          ))}
         </div>
       </section>
 
-      {/* -------------------------------------------
-        MARKET DATA SECTION
-        -------------------------------------------
-      */}
+      {/* ================= MARKET TABLE ================= */}
       <section className="market-section">
         <div className="section-header">
           <h2>Market Overview</h2>
-          <div className="market-actions">
-            <div className="live-indicator">
-              <span className="dot-pulse"></span>
-              Live Updates
-            </div>
-            <MarketFilters />
-          </div>
+          <MarketFilters />
         </div>
 
-        <div className="table-container glass-panel-home">
+        <div className="table-container">
+
+          {/* HEADER */}
           <div className="table-header">
-            <div className="col-star"></div>
-            <div className="col-rank">#</div>
-            <div className="col-name">Asset</div>
-            <div className="col-price">Price</div>
-            <div className="col-change">24h Change</div>
-            <div className="col-mcap">Market Cap</div>
+            <div>#</div>
+            <div>Name</div>
+            <div>Price</div>
+            <div>24h</div>
+            <div>Market Cap</div>
           </div>
 
-          <div className="table-body">
-            {currentCoins && currentCoins.length > 0 ? (
-              currentCoins.map((item) => (
-                <div className="table-row" key={item.id}>
-                  <div className="col-star">
-                    <button
-                      className={`watchlist-star-btn ${isInWatchlist(item.id) ? "active" : ""}`}
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        toggleWatchlist(item.id, item.name);
-                      }}
-                      title={
-                        isInWatchlist(item.id)
-                          ? "Remove from watchlist"
-                          : "Add to watchlist"
-                      }
-                    >
-                      <FiStar />
-                    </button>
-                  </div>
-                  <Link to={`/coin/${item.id}`} className="col-rank">
-                    {item.market_cap_rank}
-                  </Link>
-                  <Link to={`/coin/${item.id}`} className="col-name">
-                    <img
-                      src={item.image}
-                      alt={item.name}
-                      className="coin-icon"
-                    />
-                    <div className="coin-info">
-                      <span className="coin-symbol">
-                        {item.symbol.toUpperCase()}
-                      </span>
-                      <span className="coin-fullname">{item.name}</span>
-                    </div>
-                  </Link>
-                  <Link to={`/coin/${item.id}`} className="col-price">
-                    {currency.symbol || currency.Symbol}
-                    {item.current_price.toLocaleString()}
-                  </Link>
-                  <Link
-                    to={`/coin/${item.id}`}
-                    className={`col-change ${item.price_change_percentage_24h > 0 ? "positive" : "negative"}`}
-                  >
-                    {item.price_change_percentage_24h > 0 ? (
-                      <FiArrowUpRight />
-                    ) : (
-                      <FiArrowDownRight />
-                    )}
-                    {Math.abs(item.price_change_percentage_24h).toFixed(2)}%
-                  </Link>
-                  <Link to={`/coin/${item.id}`} className="col-mcap">
-                    {currency.symbol || currency.Symbol}
-                    {item.market_cap.toLocaleString()}
-                  </Link>
-                </div>
-              ))
-            ) : (
-              <div
-                style={{
-                  padding: "40px",
-                  textAlign: "center",
-                  color: "#fff",
-                  fontSize: "1.1rem",
-                }}
+          {/* BODY */}
+          {!allCoin || allCoin.length === 0 ? (
+            <SkeletonRows />
+          ) : currentCoins.length === 0 ? (
+            <div className="no-data">No coins found</div>
+          ) : (
+            currentCoins.map((item) => (
+              <motion.div
+                key={item.id}
+                className="table-row"
+                whileHover={{ scale: 1.02 }}
               >
-                {allCoin && allCoin.length === 0
-                  ? "Loading crypto data..."
-                  : "No coins found. Try adjusting your filters."}
-              </div>
-            )}
-          </div>
+                <div>{item.market_cap_rank}</div>
+
+                <Link to={`/coin/${item.id}`}>
+                  <img src={item.image} />
+                  {item.name}
+                </Link>
+
+                <div>
+                  {currency.symbol}
+                  {item.current_price.toLocaleString()}
+                </div>
+
+                <div
+                  className={
+                    item.price_change_percentage_24h > 0
+                      ? "positive"
+                      : "negative"
+                  }
+                >
+                  {item.price_change_percentage_24h > 0 ? (
+                    <FiArrowUpRight />
+                  ) : (
+                    <FiArrowDownRight />
+                  )}
+                  {item.price_change_percentage_24h.toFixed(2)}%
+                </div>
+
+                <div>
+                  {currency.symbol}
+                  {item.market_cap.toLocaleString()}
+                </div>
+              </motion.div>
+            ))
+          )}
 
-          {/* Pagination Controls */}
+          {/* PAGINATION */}
           {totalPages > 1 && (
-            <div className="pagination-container">
+            <div className="pagination">
               <button
-                className="pagination-btn"
                 onClick={() => handlePageChange(currentPage - 1)}
-                disabled={currentPage === 1}
               >
-                <FiChevronLeft /> Previous
+                <FiChevronLeft />
               </button>
 
-              <div className="pagination-numbers">
-                {totalPages <= 5
-                  ? // Show all pages if 5 or fewer
-                    Array.from({ length: totalPages }, (_, i) => i + 1).map(
-                      (pageNum) => (
-                        <button
-                          key={pageNum}
-                          className={`page-number ${currentPage === pageNum ? "active" : ""}`}
-                          onClick={() => handlePageChange(pageNum)}
-                        >
-                          {pageNum}
-                        </button>
-                      ),
-                    )
-                  : // Logic to show a window of pages
-                    (() => {
-                      const pages = [];
-                      if (currentPage <= 3) {
-                        for (let i = 1; i <= 5; i++) pages.push(i);
-                      } else if (currentPage >= totalPages - 2) {
-                        for (let i = totalPages - 4; i <= totalPages; i++)
-                          pages.push(i);
-                      } else {
-                        for (let i = currentPage - 2; i <= currentPage + 2; i++)
-                          pages.push(i);
-                      }
-                      return pages.map((pageNum) => (
-                        <button
-                          key={pageNum}
-                          className={`page-number ${currentPage === pageNum ? "active" : ""}`}
-                          onClick={() => handlePageChange(pageNum)}
-                        >
-                          {pageNum}
-                        </button>
-                      ));
-                    })()}
-              </div>
+              <span>
+                Page {currentPage} of {totalPages}
+              </span>
 
               <button
-                className="pagination-btn"
                 onClick={() => handlePageChange(currentPage + 1)}
-                disabled={currentPage === totalPages}
               >
-                Next <FiChevronRight />
+                <FiChevronRight />
               </button>
             </div>
           )}
         </div>
       </section>
 
-      <datalist id="coinlist">
-        {allCoin?.map((c, i) => (
-          <option key={i} value={c.name} />
-        ))}
-      </datalist>
+      {/* BACK TO TOP */}
+      <button
+        className="back-to-top"
+        onClick={() =>
+          window.scrollTo({ top: 0, behavior: "smooth" })
+        }
+      >
+        ↑
+      </button>
     </div>
   );
 };
 
-export default Home;
+export default Home;
\ No newline at end of file