diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..581af7c
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,18 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.addMissingImports": "explicit"
+  },
+  "prettier.tabWidth": 2,
+  "prettier.useTabs": false,
+  "prettier.semi": true,
+  "prettier.singleQuote": true,
+  "prettier.jsxSingleQuote": true,
+  "prettier.trailingComma": "es5",
+  "prettier.arrowParens": "always",
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}
diff --git a/app/coins/[id]/page.tsx b/app/coins/[id]/page.tsx
index 1954775..95c3ad4 100644
--- a/app/coins/[id]/page.tsx
+++ b/app/coins/[id]/page.tsx
@@ -1,49 +1,152 @@
+import Link from 'next/link';
+import { ArrowUpRight } from 'lucide-react';
+
 import {
   getCoinDetails,
   getCoinOHLC,
   fetchPools,
   fetchTopPool,
 } from '@/lib/coingecko.actions';
-import { Converter } from '@/components/Converter';
+import { Converter } from '@/components/coin-details/Converter';
 import LiveDataWrapper from '@/components/LiveDataWrapper';
-import { ExchangeListings } from '@/components/ExchangeListings';
-import { CoinDetailsSection } from '@/components/CoinDetailsSection';
-import { TopGainersLosers } from '@/components/TopGainersLosers';
+import { TopGainersLosers } from '@/components/coin-details/TopGainersLosers';
+import { DataTable } from '@/components/DataTable';
+import { formatPrice, timeAgo } from '@/lib/utils';
 
 const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
   const { id } = await params;
   const coinData = await getCoinDetails(id);
+
   const pool = coinData.asset_platform_id
     ? await fetchTopPool(coinData.asset_platform_id, coinData.contract_address)
     : await fetchPools(id);
+
   const coinOHLCData = await getCoinOHLC(id, 1, 'usd', 'hourly', 'full');
 
+  const coinDetails = [
+    {
+      label: 'Market Cap',
+      value: formatPrice(coinData.market_data.market_cap.usd),
+    },
+    {
+      label: 'Market Cap Rank',
+      value: `# ${coinData.market_cap_rank}`,
+    },
+    {
+      label: 'Total Volume',
+      value: formatPrice(coinData.market_data.total_volume.usd),
+    },
+    {
+      label: 'Website',
+      value: '-',
+      link: coinData.links.homepage[0],
+      linkText: 'Website',
+    },
+    {
+      label: 'Explorer',
+      value: '-',
+      link: coinData.links.blockchain_site[0],
+      linkText: 'Explorer',
+    },
+    {
+      label: 'Community Link',
+      value: '-',
+      link: coinData.links.subreddit_url,
+      linkText: 'Community',
+    },
+  ];
+
+  const exchangeColumns = [
+    {
+      header: 'Exchange',
+      cellClassName: 'exchange-name',
+      cell: (ticker: Ticker) => (
+        <>
+          {ticker.market.name}
+
+          <Link
+            href={ticker.trade_url}
+            target='_blank'
+            aria-label='View coin'
+          />
+        </>
+      ),
+    },
+    {
+      header: 'Pair',
+      cell: (ticker: Ticker) => (
+        <div className='pair'>
+          <p>{ticker.base}</p>
+          <p>{ticker.target}</p>
+        </div>
+      ),
+    },
+    {
+      header: 'Price',
+      cellClassName: 'price-cell',
+      cell: (ticker: Ticker) => formatPrice(ticker.converted_last.usd),
+    },
+    {
+      header: 'Last Traded',
+      headClassName: 'text-end',
+      cellClassName: 'time-cell',
+      cell: (ticker: Ticker) => timeAgo(ticker.timestamp),
+    },
+  ];
+
   return (
-    <main className='coin-details-main'>
-      <section className='size-full xl:col-span-2'>
+    <main id='coin-details-page'>
+      <section className='primary'>
         <LiveDataWrapper
           coinId={id}
           poolId={pool.id}
           coin={coinData}
           coinOHLCData={coinOHLCData}
         >
-          {/* Exchange Listings - pass it as a child of a client component so it will be render server side */}
-          <ExchangeListings coinData={coinData} />
+          <div className='exchange-section'>
+            <h4>Exchange Listings</h4>
+
+            <DataTable
+              tableClassName='exchange-table'
+              columns={exchangeColumns}
+              data={coinData.tickers.slice(0, 7)}
+              rowKey={(_, index) => index}
+              bodyCellClassName='py-2!'
+            />
+          </div>
         </LiveDataWrapper>
       </section>
 
-      <section className='size-full max-lg:mt-8 lg:col-span-1'>
-        {/* Converter */}
+      <section className='secondary'>
         <Converter
           symbol={coinData.symbol}
           icon={coinData.image.small}
           priceList={coinData.market_data.current_price}
         />
 
-        {/* Coin Details */}
-        <CoinDetailsSection coinData={coinData} />
+        <div className='details'>
+          <h4>Coin Details</h4>
+
+          <ul className='details-grid'>
+            {coinDetails.map(({ label, value, link, linkText }, index) => (
+              <li key={index}>
+                <p className='label'>{label}</p>
+
+                {link ? (
+                  <div className='link'>
+                    <Link href={link} target='_blank'>
+                      {linkText || label}
+                    </Link>
+                    <ArrowUpRight size={16} />
+                  </div>
+                ) : (
+                  <p className='text-base font-medium'>{value}</p>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
 
-        {/* Top Gainers / Losers */}
         <TopGainersLosers />
       </section>
     </main>
diff --git a/app/coins/page.tsx b/app/coins/page.tsx
index 6bb1f9f..0a26806 100644
--- a/app/coins/page.tsx
+++ b/app/coins/page.tsx
@@ -1,16 +1,10 @@
 import { getCoinList } from '@/lib/coingecko.actions';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
+import { DataTable } from '@/components/DataTable';
 import Image from 'next/image';
-import { cn, formatPercentage, formatPrice } from '@/lib/utils';
+import Link from 'next/link';
+
 import CoinsPagination from '@/components/CoinsPagination';
-import { ClickableTableRow } from '@/components/ClickableTableRow';
+import { cn, formatPercentage, formatPrice } from '@/lib/utils';
 
 const Coins = async ({
   searchParams,
@@ -32,69 +26,71 @@ const Coins = async ({
   const estimatedTotalPages =
     currentPage >= 100 ? Math.ceil(currentPage / 100) * 100 + 100 : 100;
 
-  return (
-    <main className='coins-main'>
-      <div className='flex flex-col w-full space-y-5'>
-        <h4 className='text-2xl'>All Coins</h4>
-        <div className='custom-scrollbar coins-container'>
-          <Table>
-            <TableHeader className='coins-header'>
-              <TableRow className='coins-header-row'>
-                <TableHead className='coins-header-left'>Rank</TableHead>
-                <TableHead className='text-purple-100'>Token</TableHead>
-                <TableHead className='text-purple-100'>Price</TableHead>
-                <TableHead className='coins-header-right'>24h Change</TableHead>
-                <TableHead className='coins-header-right'>Market Cap</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {coinsData.map((coin: CoinMarketData) => {
-                const isTrendingUp = coin.price_change_percentage_24h > 0;
-                return (
-                  <ClickableTableRow
-                    key={coin.id}
-                    href={`/coins/${coin.id}`}
-                    className='coins-row'
-                  >
-                    <TableCell className='coins-rank'>
-                      #{coin.market_cap_rank}
-                    </TableCell>
-                    <TableCell className='coins-token'>
-                      <div className='coins-token-info'>
-                        <Image
-                          src={coin.image}
-                          alt={coin.name}
-                          width={36}
-                          height={36}
-                        />
-                        <p className='max-w-[100%] truncate'>
-                          {coin.name} ({coin.symbol.toUpperCase()})
-                        </p>
-                      </div>
-                    </TableCell>
-                    <TableCell className='coins-price'>
-                      {formatPrice(coin.current_price)}
-                    </TableCell>
-                    <TableCell className='font-medium'>
-                      <span
-                        className={cn('coins-change', {
-                          'text-green-600': isTrendingUp,
-                          'text-red-500': !isTrendingUp,
-                        })}
-                      >
-                        {isTrendingUp && '+'}
-                        {formatPercentage(coin.price_change_percentage_24h)}
-                      </span>
-                    </TableCell>
-                    <TableCell className='coins-market-cap'>
-                      {formatPrice(coin.market_cap)}
-                    </TableCell>
-                  </ClickableTableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
+  const columns = [
+    {
+      header: 'Rank',
+      cellClassName: 'rank-cell',
+      cell: (coin: CoinMarketData) => (
+        <>
+          #{coin.market_cap_rank}
+          <Link href={`/coins/${coin.id}`} aria-label='View coin' />
+        </>
+      ),
+    },
+    {
+      header: 'Token',
+      cellClassName: 'token-cell',
+      cell: (coin: CoinMarketData) => (
+        <div className='token-info'>
+          <Image src={coin.image} alt={coin.name} width={36} height={36} />
+          <p>
+            {coin.name} ({coin.symbol.toUpperCase()})
+          </p>
         </div>
+      ),
+    },
+    {
+      header: 'Price',
+      cellClassName: 'price-cell',
+      cell: (coin: CoinMarketData) => formatPrice(coin.current_price),
+    },
+    {
+      header: '24h Change',
+      cellClassName: 'change-cell',
+      cell: (coin: CoinMarketData) => {
+        const isTrendingUp = coin.price_change_percentage_24h > 0;
+
+        return (
+          <span
+            className={cn('change-value', {
+              'text-green-600': isTrendingUp,
+              'text-red-500': !isTrendingUp,
+            })}
+          >
+            {isTrendingUp && '+'}
+            {formatPercentage(coin.price_change_percentage_24h)}
+          </span>
+        );
+      },
+    },
+    {
+      header: 'Market Cap',
+      cellClassName: 'market-cap-cell',
+      cell: (coin: CoinMarketData) => formatPrice(coin.market_cap),
+    },
+  ];
+
+  return (
+    <main id='coins-page'>
+      <div className='content'>
+        <h4>All Coins</h4>
+
+        <DataTable
+          tableClassName='coins-table'
+          columns={columns}
+          data={coinsData}
+          rowKey={(coin) => coin.id}
+        />
 
         <CoinsPagination
           currentPage={currentPage}
diff --git a/app/globals.css b/app/globals.css
index 7752477..67fa592 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -150,7 +150,7 @@
   }
 }
 
-@layer utilities {
+@layer components {
   .container {
     @apply px-4 sm:px-6 mx-auto max-w-[1440px];
   }
@@ -159,33 +159,119 @@
     @apply !bg-dark-500;
   }
 
-  /* CandlestickChart Styles */
-  .candlestick-container {
-    @apply p-3 mt-5 rounded-lg bg-dark-500;
+  .badge {
+    @apply font-medium mt-2 h-fit py-1 flex items-center gap-1;
   }
 
-  .candlestick-header {
-    @apply flex flex-col gap-3 xl:flex-row xl:items-center mb-4 font-semibold text-[#e6eef8] text-[20px];
+  .badge-up {
+    @apply bg-green-600/20! text-green-600!;
   }
 
-  .candlestick-button-group {
-    @apply flex gap-1 xl:gap-2 items-center;
+  .badge-down {
+    @apply bg-red-500/20! text-red-500!;
   }
 
-  .candlestick-interval {
-    @apply rounded-sm px-3 py-1.5 border-0 text-sm bg-dark-500 text-white/60;
-  }
+  /* Header Component Utilities */
+  header {
+    @apply border-b border-dark-400 h-20;
+
+    .inner {
+      @apply flex justify-between items-center h-full;
+
+      a {
+        @apply mb-0;
+      }
 
-  .candlestick-period-button {
-    @apply rounded-sm border-0 cursor-pointer px-2 xl:px-3 py-1.5 text-xs xl:text-sm text-purple-100 hover:bg-dark-400 hover:text-white transition-colors duration-200;
+      nav {
+        @apply flex h-full items-center;
+
+        .nav-link {
+          @apply px-6 py-5 flex items-center transition-all hover:text-white font-medium h-full text-purple-100 cursor-pointer;
+        }
+
+        .nav-link.is-active {
+          @apply text-white;
+        }
+
+        .nav-link.is-home {
+          @apply max-sm:hidden;
+        }
+      }
+    }
   }
 
-  .candlestick-period-button-active {
-    @apply rounded-sm px-3 py-1.5 border-0 cursor-pointer text-sm text-gray-900 bg-green-500;
+  /* CandlestickChart Styles */
+  #candlestick-chart {
+    @apply p-3 mt-5 rounded-lg bg-dark-500;
+
+    .chart-header {
+      @apply flex flex-col gap-3 xl:flex-row xl:items-center mb-4 font-semibold text-[#e6eef8] text-[20px];
+    }
+
+    .button-group {
+      @apply flex gap-1 xl:gap-2 items-center;
+    }
+
+    .period-button {
+      @apply rounded-sm border-0 cursor-pointer px-2 xl:px-3 py-1.5 text-xs xl:text-sm text-purple-100 hover:bg-dark-400 hover:text-white transition-colors duration-200;
+    }
+
+    .period-button-active {
+      @apply rounded-sm px-3 py-1.5 border-0 cursor-pointer text-sm text-gray-900 bg-green-500;
+    }
+
+    .chart {
+      @apply w-full min-h-[200px];
+    }
   }
 
-  .candlestick-chart-container {
-    @apply w-full min-h-[200px];
+  /* CoinCard Component Utilities */
+  #coin-card {
+    @apply bg-dark-500 hover:bg-dark-400/50 transition-all rounded-lg p-5 border border-purple-600/20 hover:border-purple-600/50 cursor-pointer h-fit;
+
+    .header {
+      @apply flex gap-3 mb-4;
+
+      img {
+        @apply size-12 rounded-full;
+      }
+
+      h3 {
+        @apply font-semibold text-lg;
+      }
+
+      p {
+        @apply text-sm text-gray-400 uppercase;
+      }
+    }
+
+    .price-row {
+      @apply flex justify-between items-center mb-5;
+
+      .price {
+        @apply text-xl font-bold;
+      }
+
+      .change {
+        @apply flex items-center gap-2;
+      }
+    }
+
+    .stats {
+      @apply space-y-3;
+
+      .stat-row {
+        @apply flex gap-1 justify-between;
+
+        .label {
+          @apply text-purple-100;
+        }
+
+        .value {
+          @apply font-medium;
+        }
+      }
+    }
   }
 
   /* Home Page Utilities */
@@ -197,12 +283,92 @@
     @apply gap-4 mt-2 md:gap-5 sm:grid-cols-2 lg:grid-cols-1 grid;
   }
 
+  #categories {
+    @apply pt-8 mt-5 w-full bg-dark-500 rounded-xl overflow-hidden;
+
+    h4 {
+      @apply text-xl md:text-2xl font-semibold mb-2 pl-5;
+    }
+
+    .category-cell {
+      @apply pl-5 font-bold;
+    }
+
+    .top-gainers-cell {
+      @apply flex gap-1 mr-5;
+
+      img {
+        @apply rounded-full py-2;
+      }
+    }
+
+    .change-header-cell {
+      @apply font-medium;
+    }
+
+    .change-cell {
+      @apply flex flex-1 gap-1 items-center pl-2 text-center font-medium;
+    }
+
+    .market-cap-cell {
+      @apply font-medium;
+    }
+
+    .volume-cell {
+      @apply font-medium;
+    }
+  }
+
+  #trending-coins {
+    @apply w-full flex flex-col justify-center h-full py-4 bg-dark-500 rounded-xl;
+
+    h4 {
+      @apply text-xl md:text-2xl font-semibold mb-2 px-5;
+    }
+
+    .trending-coins-table {
+      @apply bg-dark-500 overflow-hidden;
+
+      .body-row {
+        @apply overflow-hidden border-none hover:bg-dark-400! rounded-lg;
+      }
+
+      .name-cell {
+        @apply font-bold;
+
+        a {
+          @apply pl-1 md:pl-2 py-1 md:py-2 xl:py-1 flex items-center gap-2 md:gap-3;
+
+          img {
+            @apply rounded-full size-8 md:size-9;
+          }
+
+          p {
+            @apply text-sm md:text-base;
+          }
+        }
+      }
+
+      .change-cell {
+        @apply font-medium py-4 pr-3 md:pr-5;
+      }
+
+      .price-cell {
+        @apply font-bold pr-5 text-sm max-w-full truncate;
+      }
+
+      .price-change {
+        @apply flex gap-1 items-center text-sm font-medium;
+      }
+    }
+  }
+
   .table-header-cell {
     @apply text-purple-100;
   }
 
   .table-row-hover {
-    @apply overflow-hidden border-none hover:!bg-dark-400 rounded-lg;
+    @apply overflow-hidden border-none hover:bg-dark-400! rounded-lg;
   }
 
   .coin-link {
@@ -254,52 +420,88 @@
   }
 
   .table-cell-price {
-    @apply font-bold pr-5 text-sm max-w-[100%] truncate;
+    @apply font-bold pr-5 text-sm max-w-full truncate;
   }
 
   /* Coin Details Page Utilities */
-  .coin-details-main {
+  #coin-details-page {
     @apply py-12 px-4 sm:px-6 mx-auto max-w-[1440px] size-full grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 items-center gap-6 xl:gap-10 justify-center;
-  }
 
-  .exchange-container {
-    @apply bg-dark-500 rounded-xl overflow-hidden;
-  }
+    .primary {
+      @apply size-full xl:col-span-2;
+    }
 
-  .exchange-header-left {
-    @apply pl-5 py-5 text-purple-100;
-  }
+    .secondary {
+      @apply size-full max-lg:mt-8 lg:col-span-1;
+    }
 
-  .exchange-header-right {
-    @apply pr-5 text-purple-100 text-end;
-  }
+    .exchange-section {
+      @apply w-full mt-8 space-y-4;
 
-  .exchange-link {
-    @apply py-4 pl-3 block w-full max-w-[230px] truncate whitespace-pre-wrap;
-  }
+      h4 {
+        @apply text-xl md:text-2xl font-semibold mb-2;
+      }
+    }
 
-  .exchange-pair {
-    @apply font-medium h-full flex py-4 pr-5;
-  }
+    .exchange-table {
+      @apply bg-dark-500 rounded-xl overflow-hidden mt-5;
 
-  .exchange-timestamp {
-    @apply pr-5 text-end;
-  }
+      .exchange-name {
+        @apply text-green-500 font-bold;
 
-  .converter-title {
-    @apply text-2xl font-semibold;
-  }
+        a {
+          @apply absolute inset-0 z-10;
+        }
+      }
+
+      .pair {
+        @apply font-medium h-full flex py-4 pr-5 space-x-2;
 
-  .coin-details-grid {
-    @apply rounded-lg grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-2 gap-3 sm:gap-5;
+        p {
+          @apply truncate max-w-[100px] h-full;
+        }
+      }
+
+      .price-cell {
+        @apply font-medium;
+      }
+
+      .time-cell {
+        @apply pr-5 text-end;
+      }
+    }
+
+    .details {
+      @apply w-full mt-8 space-y-4;
+
+      h4 {
+        @apply text-xl md:text-2xl font-semibold mb-2 pb-3;
+      }
+
+      .details-grid {
+        @apply rounded-lg grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-2 gap-3 sm:gap-5;
+
+        li {
+          @apply text-base bg-dark-500 px-5 py-6 rounded-lg flex flex-col gap-3;
+
+          .label {
+            @apply text-purple-100;
+          }
+
+          .link {
+            @apply flex items-center text-green-500 gap-1;
+          }
+        }
+      }
+    }
   }
 
-  .detail-card {
-    @apply text-base bg-dark-500 px-5 py-6 rounded-lg flex flex-col gap-3;
+  .exchange-header-left {
+    @apply pl-5 py-5 text-purple-100;
   }
 
-  .detail-link {
-    @apply flex items-center text-green-500 gap-1;
+  .exchange-header-right {
+    @apply pr-5 text-purple-100 text-end;
   }
 
   .coin-description {
@@ -307,253 +509,383 @@
   }
 
   /* Coins Page Utilities */
-  .coins-main {
+  #coins-page {
     @apply py-12 px-4 sm:px-6 mx-auto max-w-[1440px] size-full items-center gap-10 justify-center;
-  }
 
-  .coins-container {
-    @apply bg-dark-500 rounded-xl max-h-fit overflow-hidden;
-  }
+    .content {
+      @apply flex flex-col w-full space-y-5;
+    }
 
-  .coins-header {
-    @apply bg-dark-400 text-purple-100;
-  }
+    h4 {
+      @apply text-2xl;
+    }
 
-  .coins-header-row {
-    @apply hover:bg-transparent;
-  }
+    .coins-table {
+      @apply bg-dark-500 rounded-xl max-h-fit overflow-hidden;
 
-  .coins-header-left {
-    @apply pl-5 py-4 text-purple-100;
-  }
+      .rank-cell {
+        @apply pl-5 max-w-[80px]! py-5 font-medium text-purple-100;
 
-  .coins-header-right {
-    @apply pr-8 text-purple-100;
-  }
+        a {
+          @apply absolute inset-0 z-10;
+        }
+      }
 
-  .coins-row {
-    @apply text-lg hover:!bg-dark-400/30 cursor-pointer;
-  }
+      .token-cell {
+        @apply py-3 font-semibold;
 
-  .coins-rank {
-    @apply pl-5 !max-w-[80px] py-5 font-medium text-purple-100;
-  }
+        .token-info {
+          @apply flex items-center gap-3;
 
-  .coins-token {
-    @apply py-3 font-semibold;
-  }
+          p {
+            @apply max-w-full truncate;
+          }
+        }
+      }
 
-  .coins-token-info {
-    @apply flex items-center gap-3;
-  }
+      .price-cell {
+        @apply py-4 font-medium;
+      }
 
-  .coins-price {
-    @apply py-4 font-medium;
-  }
+      .change-cell {
+        @apply font-medium;
+      }
 
-  .coins-change {
-    @apply flex gap-1 items-center font-medium;
-  }
+      .change-value {
+        @apply flex gap-1 items-center font-medium;
+      }
 
-  .coins-market-cap {
-    @apply pr-5 font-medium;
+      .market-cap-cell {
+        @apply pr-5 font-medium;
+      }
+    }
   }
 
   /* SearchModal Component Utilities */
-  .search-button {
-    @apply px-6 hover:!bg-transparent font-medium transition-all h-full cursor-pointer text-base text-purple-100 flex items-center gap-2;
-  }
+  #search-modal {
+    .trigger {
+      @apply px-6 hover:bg-transparent! font-medium transition-all h-full cursor-pointer text-base text-purple-100 flex items-center gap-2;
+    }
 
-  .search-kbd {
-    @apply pointer-events-none hidden sm:inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100;
+    .kbd {
+      @apply pointer-events-none hidden sm:inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100;
+    }
   }
 
-  .search-dialog {
-    @apply !bg-dark-400 max-w-sm sm:max-w-md md:max-w-2xl mx-auto;
-  }
+  .dialog {
+    @apply bg-dark-400! max-w-sm sm:max-w-md md:max-w-2xl mx-auto;
 
-  .search-list {
-    @apply bg-dark-500 max-h-[400px];
-  }
+    .cmd-input {
+      @apply bg-dark-500!;
 
-  .search-empty {
-    @apply py-6 text-center text-sm text-gray-400;
-  }
+      input {
+        @apply placeholder:text-purple-100!;
+      }
+    }
 
-  .search-heading {
-    @apply flex items-center gap-2 text-purple-100;
-  }
+    .list {
+      @apply bg-dark-500 max-h-[400px];
+    }
 
-  .search-group {
-    @apply bg-dark-500 text-purple-100;
-  }
+    .empty {
+      @apply py-6 text-center text-sm text-gray-400;
+    }
 
-  .search-item {
-    @apply grid grid-cols-4 gap-4 items-center data-[selected=true]:bg-dark-400 transition-all cursor-pointer hover:!bg-dark-400/50 py-3;
-  }
+    .heading {
+      @apply flex items-center gap-2 text-purple-100;
+    }
 
-  .search-coin-info {
-    @apply flex gap-2 items-center col-span-2;
-  }
+    .group {
+      @apply bg-dark-500 text-purple-100;
+    }
 
-  .search-coin-image {
-    @apply size-9 rounded-full;
-  }
+    .search-item {
+      @apply grid! grid-cols-4! gap-4! items-center! data-[selected=true]:bg-dark-400! transition-all! cursor-pointer! hover:bg-dark-400/50! py-3!;
 
-  .search-coin-symbol {
-    @apply text-sm text-purple-100 uppercase;
-  }
+      .coin-info {
+        @apply flex! gap-2! items-center! col-span-2!;
 
-  .search-coin-price {
-    @apply font-semibold text-sm lg:text-base;
-  }
+        img {
+          @apply size-9 rounded-full;
+        }
+
+        div {
+          @apply flex flex-col;
+        }
+
+        .coin-symbol {
+          @apply text-sm text-purple-100 uppercase;
+        }
+      }
 
-  .search-coin-change {
-    @apply flex gap-1 text-sm lg:text-base items-center font-medium;
+      .coin-price {
+        @apply font-semibold text-sm lg:text-base;
+      }
+
+      .coin-change {
+        @apply flex gap-1 text-sm lg:text-base items-center font-medium;
+      }
+    }
   }
 
   /* Converter Component Utilities */
-  .converter-container {
-    @apply space-y-2 bg-dark-500 px-5 py-7 rounded-lg;
-  }
+  #converter {
+    @apply w-full space-y-5;
 
-  .converter-input-wrapper {
-    @apply bg-dark-400 h-12 w-full rounded-md flex items-center justify-between py-4 pr-4;
-  }
+    h4 {
+      @apply text-2xl font-semibold;
+    }
 
-  .converter-input {
-    @apply flex-1 !text-lg border-none font-medium !bg-dark-400 focus-visible:ring-0 shadow-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none;
-  }
+    .panel {
+      @apply space-y-2 bg-dark-500 px-5 py-7 rounded-lg;
+    }
 
-  .converter-coin-info {
-    @apply flex items-center gap-1;
-  }
+    .input-wrapper {
+      @apply bg-dark-400 h-12 w-full rounded-md flex items-center justify-between py-4 pr-4;
 
-  .converter-coin-symbol {
-    @apply font-semibold text-base text-purple-100;
-  }
+      .input {
+        @apply flex-1 text-lg! border-none font-medium bg-dark-400! focus-visible:ring-0 shadow-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none;
+      }
 
-  .converter-divider-wrapper {
-    @apply relative flex justify-center items-center my-4;
-  }
+      .coin-info {
+        @apply flex items-center gap-1;
 
-  .converter-divider-line {
-    @apply h-[1px] z-10 w-full bg-dark-400 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
-  }
+        p {
+          @apply font-semibold text-base text-purple-100;
+        }
+      }
+    }
 
-  .converter-icon {
-    @apply size-8 z-20 bg-dark-400 rounded-full p-2 text-green-500;
-  }
+    .divider {
+      @apply relative flex justify-center items-center my-4;
 
-  .converter-output-wrapper {
-    @apply bg-dark-400 h-12 w-full rounded-md flex items-center justify-between py-4 pl-4;
-  }
+      .line {
+        @apply h-px z-10 w-full bg-dark-400 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+      }
 
-  .converter-select-trigger {
-    @apply w-fit border-none cursor-pointer !h-12 !bg-dark-400 hover:!bg-dark-400 focus-visible:!ring-0;
-  }
+      .icon {
+        @apply size-8 z-20 bg-dark-400 rounded-full p-2 text-green-500;
+      }
+    }
 
-  .converter-select-content {
-    @apply bg-dark-400 max-h-[500px];
-  }
+    .output-wrapper {
+      @apply bg-dark-400 h-12 w-full rounded-md flex items-center justify-between py-4 pl-4;
+
+      p {
+        @apply text-base font-medium;
+      }
+
+      .select-trigger {
+        @apply w-fit! border-none! cursor-pointer! h-12! bg-dark-400! hover:bg-dark-400! focus-visible:ring-0!;
+
+        .select-value {
+          @apply font-semibold! text-xs! text-purple-100!;
+        }
+      }
+
+      .select-content[data-converter] {
+        @apply bg-dark-400 max-h-[500px];
 
-  .converter-select-item {
-    @apply cursor-pointer hover:!bg-dark-500;
+        .select-item {
+          @apply cursor-pointer hover:bg-dark-500!;
+        }
+      }
+    }
   }
 
-  .converter-currency {
-    @apply font-semibold text-sm text-purple-100;
+  /* TopGainersLosers Component Utilities */
+  #top-gainers-losers {
+    @apply mt-8 w-full;
+
+    .tabs-list {
+      @apply size-full! p-1! bg-transparent! border-b! border-dark-500! rounded-none!;
+    }
+
+    .tabs-trigger {
+      @apply data-[state=active]:border-none! data-[state=active]:bg-transparent! flex justify-start! mb-0! py-2! text-lg! font-semibold! md:text-2xl!;
+    }
+
+    .tabs-content {
+      @apply gap-4! mt-2! md:gap-5! sm:grid-cols-2! lg:grid-cols-1! grid!;
+    }
   }
 
   /* CoinHeader Component Utilities */
-  .coin-header-container {
+  #coin-header {
     @apply space-y-5 w-full;
-  }
 
-  .coin-header-info {
-    @apply flex gap-3 items-center;
-  }
+    h3 {
+      @apply text-3xl font-medium;
+    }
 
-  .coin-header-image {
-    @apply size-[45px] sm:size-[50px] xl:size-[77px];
-  }
+    .info {
+      @apply flex gap-3 items-center;
 
-  .coin-header-price {
-    @apply text-3xl sm:text-5xl xl:text-6xl font-semibold;
-  }
+      img {
+        @apply size-[45px] sm:size-[50px] xl:size-[77px];
+      }
+    }
 
-  .coin-header-badge {
-    @apply font-medium mt-2 h-fit py-1 flex items-center gap-1;
-  }
+    .price-row {
+      @apply flex gap-4;
 
-  .coin-header-stats {
-    @apply grid grid-cols-3 mt-8 gap-4 sm:gap-6 w-fit;
-  }
+      h1 {
+        @apply text-3xl sm:text-5xl xl:text-6xl font-semibold;
+      }
+    }
 
-  .coin-header-stat {
-    @apply text-base border-r border-purple-600 flex flex-col gap-2;
-  }
+    .stats {
+      @apply grid grid-cols-3 mt-8 gap-4 sm:gap-6 w-fit;
 
-  .coin-header-stat-label {
-    @apply text-purple-100 max-sm:text-sm;
-  }
+      li {
+        @apply text-base border-r last:border-none border-purple-600 flex flex-col gap-2;
 
-  .coin-header-stat-value {
-    @apply flex flex-1 gap-1 items-end text-base font-medium;
-  }
+        .label {
+          @apply text-purple-100 max-sm:text-sm;
+        }
 
-  .coin-header-stat-value-30d {
-    @apply flex gap-1 flex-1 items-end text-base font-medium;
+        .value {
+          @apply flex gap-1 flex-1 items-end text-base font-medium;
+        }
+      }
+    }
   }
 
-  .coin-header-stat-price {
-    @apply flex gap-1 items-center text-base font-medium;
-  }
+  /* CoinOverview Component Utilities */
+  #coin-overview {
+    @apply w-full h-full xl:col-span-2 px-2 bg-dark-500 rounded-xl;
 
-  /* Skeleton States */
-  .coin-header-skeleton-image {
-    @apply size-[45px] sm:size-[50px] xl:size-[77px] bg-dark-400/50 rounded-full animate-pulse;
-  }
+    .header {
+      @apply flex-1 mb-2 flex gap-2 md:gap-3;
 
-  .coin-header-skeleton-price {
-    @apply h-12 sm:h-16 xl:h-20 w-48 sm:w-64 xl:w-80 bg-dark-400/50 rounded animate-pulse;
-  }
+      img {
+        @apply w-10 h-10 md:w-14 md:h-14;
+      }
 
-  .coin-header-skeleton-badge {
-    @apply h-10 w-32 bg-dark-400/50 rounded-full animate-pulse mt-2;
-  }
+      .info {
+        @apply flex flex-col;
 
-  .coin-header-skeleton-stat {
-    @apply h-5 w-24 bg-dark-400/50 rounded animate-pulse;
+        p {
+          @apply flex text-purple-100 text-xs md:text-sm w-fit;
+        }
+
+        h1 {
+          @apply text-xl md:text-2xl font-semibold;
+        }
+      }
+    }
   }
 
-  /* ChartSection Component Utilities */
-  .chart-section-container {
-    @apply w-full h-full xl:col-span-2 px-2 bg-dark-500 rounded-xl;
+  /* CoinsPagination Component Utilities */
+  #coins-pagination {
+    .pagination-content {
+      @apply flex w-full;
+    }
+
+    .pagination-control {
+      @apply bg-dark-400 rounded-sm py-1;
+
+      &.prev {
+        @apply pr-2;
+      }
+
+      &.next {
+        @apply pl-2;
+      }
+    }
+
+    .control-button {
+      @apply cursor-pointer;
+    }
+
+    .control-disabled {
+      @apply pointer-events-none opacity-50;
+    }
+
+    .pagination-pages {
+      @apply flex flex-1 justify-center gap-2;
+
+      .ellipsis {
+        @apply px-3 py-2 text-base;
+      }
+
+      .page-link {
+        @apply hover:bg-dark-400! rounded-sm text-base cursor-pointer;
+      }
+
+      .page-link-active {
+        @apply bg-green-500! text-dark-900 font-semibold;
+      }
+    }
   }
 
-  .chart-section-header {
-    @apply flex-1 mb-2 flex gap-2 md:gap-3;
+  /* LiveDataWrapper Component Utilities */
+  #live-data-wrapper {
+    @apply size-full xl:col-span-2;
+
+    .divider {
+      @apply my-8! bg-purple-600!;
+    }
+
+    .trend {
+      @apply w-full;
+
+      h4 {
+        @apply text-xl md:text-2xl font-semibold mb-2 mt-2 pl-2;
+      }
+    }
+
+    .trades {
+      @apply w-full my-8 space-y-4;
+
+      h4 {
+        @apply text-xl md:text-2xl font-semibold mb-2;
+      }
+    }
+
+    .trades-table {
+      @apply bg-dark-500 mt-5 rounded-xl overflow-hidden;
+
+      .price-cell {
+        @apply pl-5 py-5 font-medium;
+      }
+
+      .amount-cell {
+        @apply py-4 font-medium;
+      }
+
+      .value-cell {
+        @apply font-medium;
+      }
+
+      .type-cell {
+        @apply font-medium;
+      }
+
+      .time-cell {
+        @apply pr-5;
+      }
+    }
   }
 
-  .chart-section-image {
-    @apply w-10 h-10 md:w-14 md:h-14;
+  .skeleton {
+    @apply bg-dark-400/60;
   }
 
-  .chart-section-info {
-    @apply flex flex-col;
+  .skeleton-image {
+    @apply size-[45px] sm:size-[50px] xl:size-[77px] bg-dark-400/50 rounded-full animate-pulse;
   }
 
-  .chart-section-coin-name {
-    @apply flex text-purple-100 text-xs md:text-sm w-fit;
+  .skeleton-price {
+    @apply h-12 sm:h-16 xl:h-20 w-48 sm:w-64 xl:w-80 bg-dark-400/50 rounded animate-pulse;
   }
 
-  .chart-section-price {
-    @apply text-xl md:text-2xl font-semibold;
+  .skeleton-badge {
+    @apply h-10 w-32 bg-dark-400/50 rounded-full animate-pulse mt-2;
   }
 
-  .skeleton {
-    @apply bg-dark-400/60;
+  .skeleton-stat {
+    @apply h-5 w-24 bg-dark-400/50 rounded animate-pulse;
   }
 }
 
diff --git a/app/page.tsx b/app/page.tsx
index 879f31b..5ef2ad1 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,35 +1,30 @@
 import { Suspense } from 'react';
 
+import { Categories } from '@/components/home/Categories';
+import { CoinOverview } from '@/components/home/CoinOverview';
+import { TrendingCoins } from '@/components/home/TrendingCoins';
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-
-import { Skeleton } from '@/components/ui/skeleton';
-import { CoinOverviewSection } from '@/components/CoinOverviewSection';
-import { CategoriesSection } from '@/components/CategoriesSection';
-import { TrendingCoinsSection } from '@/components/TrendingCoinsSection';
+  CategoriesFallback,
+  CoinOverviewFallback,
+  TrendingCoinsFallback,
+} from '@/components/home/Fallback';
 
 const Home = () => {
   return (
     <main className='main-container'>
       <section className='home-grid'>
         <Suspense fallback={<CoinOverviewFallback />}>
-          <CoinOverviewSection />
+          <CoinOverview />
         </Suspense>
 
         <Suspense fallback={<TrendingCoinsFallback />}>
-          <TrendingCoinsSection />
+          <TrendingCoins />
         </Suspense>
       </section>
 
       <section className='w-full mt-7 space-y-4'>
         <Suspense fallback={<CategoriesFallback />}>
-          <CategoriesSection />
+          <Categories />
         </Suspense>
       </section>
     </main>
@@ -37,101 +32,3 @@ const Home = () => {
 };
 
 export default Home;
-
-const CoinOverviewFallback = () => (
-  <div className='chart-section-container'>
-    <div className='w-full h-full min-h-[420px] rounded-2xl bg-dark-500/60 p-6'>
-      <div className='flex items-center gap-4 mb-6'>
-        <Skeleton className='h-14 w-14 rounded-full skeleton' />
-        <div className='flex flex-col gap-2 flex-1'>
-          <Skeleton className='h-4 w-1/3 skeleton' />
-          <Skeleton className='h-8 w-1/2 skeleton' />
-        </div>
-      </div>
-      <Skeleton className='h-[280px] w-full rounded-xl skeleton' />
-    </div>
-  </div>
-);
-
-const TrendingCoinsFallback = () => (
-  <div className='top-movers-container'>
-    <h4 className='section-title px-5'>Trending Coins</h4>
-    <div className='table-scrollbar-container custom-scrollbar'>
-      <Table>
-        <TableHeader className='table-header-cell'>
-          <TableRow className='hover:bg-transparent'>
-            <TableHead className='table-head-left'>Name</TableHead>
-            <TableHead className='table-header-cell table-cell'>
-              24h Change
-            </TableHead>
-            <TableHead className='table-head-right'>Price</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {Array.from({ length: 6 }).map((_, index) => (
-            <TableRow key={index} className='table-row-hover'>
-              <TableCell className='font-bold'>
-                <div className='flex items-center gap-3'>
-                  <Skeleton className='h-9 w-9 rounded-full skeleton' />
-                  <Skeleton className='h-4 w-24 skeleton' />
-                </div>
-              </TableCell>
-              <TableCell className='table-cell-change'>
-                <Skeleton className='h-4 w-16 skeleton' />
-              </TableCell>
-              <TableCell className='table-cell-price'>
-                <Skeleton className='h-4 w-20 skeleton' />
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </div>
-  </div>
-);
-
-const CategoriesFallback = () => (
-  <div className='custom-scrollbar categories-container'>
-    <h4 className='section-title pl-5'>Top Categories</h4>
-    <Table>
-      <TableHeader className='text-purple-100'>
-        <TableRow className='hover:bg-transparent'>
-          <TableHead className='exchange-header-left'>Category</TableHead>
-          <TableHead className='text-purple-100'>Top Gainers</TableHead>
-          <TableHead className='text-purple-100 pl-7'>24h Change</TableHead>
-          <TableHead className='text-purple-100'>Market Cap</TableHead>
-          <TableHead className='text-purple-100'>24h Volume</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {Array.from({ length: 6 }).map((_, index) => (
-          <TableRow
-            key={index}
-            className='md:text-base rounded-lg hover:!bg-dark-400/30'
-          >
-            <TableCell className='pl-5 font-bold'>
-              <Skeleton className='h-4 w-32 skeleton' />
-            </TableCell>
-            <TableCell className='flex gap-1 mr-5'>
-              {Array.from({ length: 3 }).map((__, coinIndex) => (
-                <Skeleton
-                  key={coinIndex}
-                  className='h-7 w-7 rounded-full skeleton'
-                />
-              ))}
-            </TableCell>
-            <TableCell className='font-medium'>
-              <Skeleton className='h-4 w-16 skeleton' />
-            </TableCell>
-            <TableCell className='font-medium'>
-              <Skeleton className='h-4 w-20 skeleton' />
-            </TableCell>
-            <TableCell className='font-medium'>
-              <Skeleton className='h-4 w-24 skeleton' />
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  </div>
-);
diff --git a/components/CandlestickChart.tsx b/components/CandlestickChart.tsx
index dc3e5bb..883ffa8 100644
--- a/components/CandlestickChart.tsx
+++ b/components/CandlestickChart.tsx
@@ -148,17 +148,16 @@ export default function CandlestickChart({
   }, [ohlcData, liveOhlcv, period, mode]);
 
   return (
-    <div className='candlestick-container'>
-      <div className='candlestick-header'>
+    <div id='candlestick-chart'>
+      <div className='chart-header'>
         <div className='flex-1'>{children}</div>
-        <div className='candlestick-button-group'>
+
+        <div className='button-group'>
           {PERIOD_BUTTONS.map(({ value, label }) => (
             <button
               key={value}
               className={
-                period === value
-                  ? 'candlestick-period-button-active'
-                  : 'candlestick-period-button'
+                period === value ? 'period-button-active' : 'period-button'
               }
               onClick={() => handlePeriodChange(value)}
               disabled={loading}
@@ -168,11 +167,8 @@ export default function CandlestickChart({
           ))}
         </div>
       </div>
-      <div
-        ref={chartContainerRef}
-        className='candlestick-chart-container'
-        style={{ height }}
-      />
+
+      <div ref={chartContainerRef} className='chart' style={{ height }} />
     </div>
   );
 }
diff --git a/components/CategoriesSection.tsx b/components/CategoriesSection.tsx
deleted file mode 100644
index 81857d7..0000000
--- a/components/CategoriesSection.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { getCategories } from '@/lib/coingecko.actions';
-import { cn, formatPercentage, formatPrice } from '@/lib/utils';
-import { TrendingDown, TrendingUp } from 'lucide-react';
-import Image from 'next/image';
-
-export const CategoriesSection = async () => {
-  const categories = (await getCategories()) as Category[];
-
-  return (
-    <div className='custom-scrollbar pt-8 mt-5 w-full bg-dark-500 rounded-xl overflow-hidden'>
-      <h4 className='section-title pl-5'>Top Categories</h4>
-      <Table>
-        <TableHeader className='text-purple-100'>
-          <TableRow className='hover:bg-transparent'>
-            <TableHead className='exchange-header-left'>Category</TableHead>
-            <TableHead className='text-purple-100'>Top Gainers</TableHead>
-            <TableHead className='text-purple-100 pl-7'>24h Change</TableHead>
-            <TableHead className='text-purple-100'>Market Cap</TableHead>
-            <TableHead className='text-purple-100'>24h Volume</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {categories.map((category: Category, index: number) => {
-            const isTrendingUp = category.market_cap_change_24h > 0;
-            return (
-              <TableRow
-                key={index}
-                className='md:text-base rounded-lg hover:!bg-dark-400/30'
-              >
-                <TableCell className='pl-5 font-bold'>
-                  {category.name}
-                </TableCell>
-                <TableCell className='flex gap-1 mr-5'>
-                  {category.top_3_coins.map((coin: string) => (
-                    <Image
-                      key={coin}
-                      src={coin}
-                      alt='Coin image'
-                      width={28}
-                      height={28}
-                      className='rounded-full py-2'
-                    />
-                  ))}
-                </TableCell>
-                <TableCell className='font-medium'>
-                  <div
-                    className={cn(
-                      'flex flex-1 gap-1 items-end pl-5 text-base font-medium',
-                      {
-                        'text-green-500': category.market_cap_change_24h > 0,
-                        'text-red-500': category.market_cap_change_24h < 0,
-                      }
-                    )}
-                  >
-                    <p>{formatPercentage(category.market_cap_change_24h)}</p>
-                    {isTrendingUp ? (
-                      <TrendingUp width={16} height={16} />
-                    ) : (
-                      <TrendingDown width={16} height={16} />
-                    )}
-                  </div>
-                </TableCell>
-                <TableCell className='font-medium'>
-                  {formatPrice(category.market_cap)}
-                </TableCell>
-                <TableCell className='font-medium'>
-                  {formatPrice(category.volume_24h)}
-                </TableCell>
-              </TableRow>
-            );
-          })}
-        </TableBody>
-      </Table>
-    </div>
-  );
-};
diff --git a/components/ClickableTableRow.tsx b/components/ClickableTableRow.tsx
deleted file mode 100644
index ad872c9..0000000
--- a/components/ClickableTableRow.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { TableRow } from '@/components/ui/table';
-
-export function ClickableTableRow({
-  href,
-  children,
-  className,
-}: ClickableTableRowProps) {
-  const router = useRouter();
-
-  return (
-    <TableRow className={className} onClick={() => router.push(href)}>
-      {children}
-    </TableRow>
-  );
-}
diff --git a/components/CoinCard.tsx b/components/CoinCard.tsx
index 6761179..e918686 100644
--- a/components/CoinCard.tsx
+++ b/components/CoinCard.tsx
@@ -1,10 +1,11 @@
 'use client';
 
-import { formatPrice, formatPercentage, cn } from '@/lib/utils';
 import Link from 'next/link';
 import Image from 'next/image';
 import { TrendingUp, TrendingDown } from 'lucide-react';
+
 import { Badge } from './ui/badge';
+import { formatPrice, formatPercentage, cn } from '@/lib/utils';
 
 export default function CoinCard({
   id,
@@ -19,55 +20,44 @@ export default function CoinCard({
   const isTrendingUp = priceChangePercentage24h > 0;
 
   return (
-    <Link href={`/coins/${id}`}>
-      <div className='bg-dark-500 hover:bg-dark-400/50 transition-all rounded-lg p-5 border border-purple-600/20 hover:border-purple-600/50 cursor-pointer h-fit'>
-        {/* Header */}
-        <div className='flex gap-3 mb-4'>
-          <Image
-            src={image}
-            alt={name}
-            width={48}
-            height={48}
-            className='size-12 rounded-full'
-          />
-          <div className='flex-1'>
-            <h3 className='font-semibold text-lg'>{name}</h3>
-            <p className='text-sm text-gray-400 uppercase'>{symbol}</p>
-          </div>
+    <Link href={`/coins/${id}`} id='coin-card'>
+      <div className='header'>
+        <Image
+          src={image}
+          alt={name}
+          width={48}
+          height={48}
+          className='image'
+        />
+        <div className='flex-1'>
+          <h3>{name}</h3>
+          <p className='symbol'>{symbol}</p>
+        </div>
+      </div>
+
+      <div className='price-row'>
+        <p className='price'>{formatPrice(price, 7)}</p>
+
+        <div className='change'>
+          <Badge
+            className={cn('badge', isTrendingUp ? 'badge-up' : 'badge-down')}
+          >
+            {formatPercentage(priceChangePercentage24h)}
+            {isTrendingUp ? <TrendingUp /> : <TrendingDown />}
+          </Badge>
         </div>
+      </div>
 
-        {/* Price */}
-        <>
-          <div className='flex  justify-between items-center mb-5'>
-            <p className='text-xl font-bold'>{formatPrice(price, 7)}</p>
-            {/* 24h Change */}
-            <div className='flex items-center gap-2'>
-              <Badge
-                className={cn(
-                  'font-medium h-fit py-1 flex items-center gap-1',
-                  isTrendingUp
-                    ? 'bg-green-600/20 text-green-600'
-                    : 'bg-red-500/20 text-red-500'
-                )}
-              >
-                {formatPercentage(priceChangePercentage24h)}
-                {isTrendingUp ? <TrendingUp /> : <TrendingDown />}
-              </Badge>
-            </div>
-          </div>
+      <div className='stats'>
+        <div className='stat-row'>
+          <span className='label'>Market Cap Rank</span>
+          <span className='value'>#{rank}</span>
+        </div>
 
-          {/* Market Stats */}
-          <div className='space-y-3'>
-            <div className='flex gap-1 justify-between'>
-              <span className='text-purple-100'>Market Cap Rank</span>
-              <span className='font-medium'>#{rank}</span>
-            </div>
-            <div className='flex gap-1 justify-between'>
-              <span className='text-purple-100'>Volume 24h: </span>
-              <span className='font-medium'>{formatPrice(volume24)}</span>
-            </div>
-          </div>
-        </>
+        <div className='stat-row'>
+          <span className='label'>Volume 24h: </span>
+          <span className='value'>{formatPrice(volume24)}</span>
+        </div>
       </div>
     </Link>
   );
diff --git a/components/CoinDetailCard.tsx b/components/CoinDetailCard.tsx
deleted file mode 100644
index 9c16771..0000000
--- a/components/CoinDetailCard.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { ArrowUpRight } from 'lucide-react';
-import Link from 'next/link';
-
-interface CoinDetailCardProps {
-  label: string;
-  value: string | number;
-  link?: string;
-  linkText?: string;
-}
-
-export default function CoinDetailCard({
-  label,
-  value,
-  link,
-  linkText,
-}: CoinDetailCardProps) {
-  return (
-    <div className='detail-card'>
-      <p className='text-purple-100'>{label}</p>
-      {link ? (
-        <div className='detail-link'>
-          <Link href={link} target='_blank'>
-            {linkText || label}
-          </Link>
-          <ArrowUpRight size={16} />
-        </div>
-      ) : (
-        <p className='text-base font-medium'>{value}</p>
-      )}
-    </div>
-  );
-}
diff --git a/components/CoinDetailsSection.tsx b/components/CoinDetailsSection.tsx
deleted file mode 100644
index dbd221e..0000000
--- a/components/CoinDetailsSection.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import CoinDetailCard from './CoinDetailCard';
-import { formatPrice } from '@/lib/utils';
-
-export const CoinDetailsSection = ({
-  coinData,
-}: {
-  coinData: CoinDetailsData;
-}) => {
-  const coinDetails = [
-    {
-      label: 'Market Cap',
-      value: formatPrice(coinData.market_data.market_cap.usd),
-    },
-    {
-      label: 'Market Cap Rank',
-      value: `# ${coinData.market_cap_rank}`,
-    },
-    {
-      label: 'Total Volume',
-      value: formatPrice(coinData.market_data.total_volume.usd),
-    },
-    {
-      label: 'Website',
-      value: '-',
-      link: coinData.links.homepage[0],
-      linkText: 'Website',
-    },
-    {
-      label: 'Explorer',
-      value: '-',
-      link: coinData.links.blockchain_site[0],
-      linkText: 'Explorer',
-    },
-    {
-      label: 'Community Link',
-      value: '-',
-      link: coinData.links.subreddit_url,
-      linkText: 'Community',
-    },
-  ];
-
-  return (
-    <div className='w-full mt-8 space-y-4'>
-      <h4 className='section-title pb-3'>Coin Details</h4>
-      <div className='coin-details-grid'>
-        {coinDetails.map((detail, index) => (
-          <CoinDetailCard
-            key={index}
-            label={detail.label}
-            value={detail.value}
-            link={detail.link}
-            linkText={detail.linkText}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};
diff --git a/components/CoinHeader.tsx b/components/CoinHeader.tsx
index 783e3ab..cea1688 100644
--- a/components/CoinHeader.tsx
+++ b/components/CoinHeader.tsx
@@ -1,9 +1,10 @@
 'use client';
 
-import { cn, formatPercentage, formatPrice } from '@/lib/utils';
-import { TrendingDown, TrendingUp } from 'lucide-react';
 import Image from 'next/image';
+import { TrendingDown, TrendingUp } from 'lucide-react';
+
 import { Badge } from './ui/badge';
+import { cn, formatPercentage, formatPrice } from '@/lib/utils';
 
 export default function CoinHeader({
   livePriceChangePercentage24h,
@@ -14,83 +15,74 @@ export default function CoinHeader({
   priceChange24h,
 }: LiveCoinHeaderProps) {
   const isTrendingUp = livePriceChangePercentage24h > 0;
+  const isThirtyDayUp = priceChangePercentage30d > 0;
+  const isPriceChangeUp = priceChange24h > 0;
+
+  const stats = [
+    {
+      label: 'Today',
+      value: livePriceChangePercentage24h,
+      isUp: isTrendingUp,
+      formatter: formatPercentage,
+      showIcon: true,
+    },
+    {
+      label: '30 Days',
+      value: priceChangePercentage30d,
+      isUp: isThirtyDayUp,
+      formatter: formatPercentage,
+      showIcon: true,
+    },
+    {
+      label: 'Price Change (24h)',
+      value: priceChange24h,
+      isUp: isPriceChangeUp,
+      formatter: formatPrice,
+      showIcon: false,
+    },
+  ];
 
   return (
-    <div className='coin-header-container'>
-      <div className='coin-header-container'>
-        <h3 className='text-3xl font-medium'>{name}</h3>
-        <div className='coin-header-info'>
-          <Image
-            src={image}
-            alt={name}
-            width={77}
-            height={77}
-            className='coin-header-image'
-          />
-          <div className='flex gap-4'>
-            <h1 className='coin-header-price'>{formatPrice(livePrice)}</h1>
-            <Badge
-              className={cn(
-                'coin-header-badge',
-                isTrendingUp
-                  ? 'bg-green-600/20 text-green-600'
-                  : 'bg-red-500/20 text-red-500'
-              )}
-            >
-              {formatPercentage(livePriceChangePercentage24h)}
-              {isTrendingUp ? <TrendingUp /> : <TrendingDown />}
-              (24h)
-            </Badge>
-          </div>
+    <div id='coin-header'>
+      <h3>{name}</h3>
+
+      <div className='info'>
+        <Image src={image} alt={name} width={77} height={77} />
+
+        <div className='price-row'>
+          <h1>{formatPrice(livePrice)}</h1>
+          <Badge
+            className={cn('badge', isTrendingUp ? 'badge-up' : 'badge-down')}
+          >
+            {formatPercentage(livePriceChangePercentage24h)}
+            {isTrendingUp ? <TrendingUp /> : <TrendingDown />}
+            (24h)
+          </Badge>
         </div>
-        <div className='coin-header-stats'>
-          <div className='coin-header-stat'>
-            <p className='coin-header-stat-label'>Today</p>
-            <div
-              className={cn('coin-header-stat-value', {
-                'text-green-500': livePriceChangePercentage24h > 0,
-                'text-red-500': livePriceChangePercentage24h < 0,
-              })}
-            >
-              <p>{formatPercentage(livePriceChangePercentage24h)}</p>
-              {isTrendingUp ? (
-                <TrendingUp width={16} height={16} />
-              ) : (
-                <TrendingDown width={16} height={16} />
-              )}
-            </div>
-          </div>
+      </div>
+
+      <ul className='stats'>
+        {stats.map((stat) => (
+          <li key={stat.label}>
+            <p className='label'>{stat.label}</p>
 
-          <div className='coin-header-stat'>
-            <p className='coin-header-stat-label'>30 Days</p>
             <div
-              className={cn('coin-header-stat-value-30d', {
-                'text-green-500': priceChangePercentage30d > 0,
-                'text-red-500': priceChangePercentage30d < 0,
+              className={cn('value', {
+                'text-green-500': stat.isUp,
+                'text-red-500': !stat.isUp,
               })}
             >
-              <p>{formatPercentage(priceChangePercentage30d)}</p>
-              {isTrendingUp ? (
-                <TrendingUp width={16} height={16} />
-              ) : (
-                <TrendingDown width={16} height={16} />
-              )}
+              <p>{stat.formatter(stat.value)}</p>
+              {stat.showIcon &&
+                (stat.isUp ? (
+                  <TrendingUp width={16} height={16} />
+                ) : (
+                  <TrendingDown width={16} height={16} />
+                ))}
             </div>
-          </div>
-
-          <div className='text-base flex flex-col gap-2'>
-            <p className='coin-header-stat-label'>Price Change (24h)</p>
-            <p
-              className={cn('coin-header-stat-price', {
-                'text-green-500': priceChange24h > 0,
-                'text-red-500': priceChange24h < 0,
-              })}
-            >
-              {formatPrice(priceChange24h)}
-            </p>
-          </div>
-        </div>
-      </div>
+          </li>
+        ))}
+      </ul>
     </div>
   );
 }
diff --git a/components/CoinsPagination.tsx b/components/CoinsPagination.tsx
index f23847b..78065c3 100644
--- a/components/CoinsPagination.tsx
+++ b/components/CoinsPagination.tsx
@@ -9,91 +9,48 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from '@/components/ui/pagination';
-import { cn } from '@/lib/utils';
+import { buildPageNumbers, cn, ELLIPSIS } from '@/lib/utils';
 
 export default function CoinsPagination({
   currentPage,
   totalPages,
   hasMorePages,
-}: {
-  currentPage: number;
-  totalPages: number;
-  hasMorePages: boolean;
-}) {
+}: Pagination) {
   const router = useRouter();
 
   const handlePageChange = (page: number) => {
     router.push(`/coins?page=${page}`);
   };
 
-  // Generate page numbers to display
-  const getPageNumbers = () => {
-    const pages: (number | string)[] = [];
-    const showPages = 5; // Number of page buttons to show
-
-    if (totalPages <= showPages) {
-      // Show all pages if total is less than or equal to showPages
-      for (let i = 1; i <= totalPages; i++) {
-        pages.push(i);
-      }
-    } else {
-      pages.push(1);
-
-      // Calculate start and end of middle pages
-      const start = Math.max(2, currentPage - 1);
-      const end = Math.min(totalPages - 1, currentPage + 1);
-
-      // Add ellipsis after first page if needed
-      if (start > 2) {
-        pages.push('...');
-      }
-
-      // Add middle pages
-      for (let i = start; i <= end; i++) {
-        pages.push(i);
-      }
-
-      // Add ellipsis before last page if needed
-      if (end < totalPages - 1) {
-        pages.push('...');
-      }
-
-      pages.push(totalPages);
-    }
-
-    return pages;
-  };
-
-  const pageNumbers = getPageNumbers();
+  const pageNumbers = buildPageNumbers(currentPage, totalPages);
   const isLastPage = !hasMorePages || currentPage === totalPages;
 
   return (
-    <Pagination>
-      <PaginationContent className='flex w-full'>
-        <PaginationItem className='bg-dark-400 rounded-sm pr-2 py-1'>
+    <Pagination id='coins-pagination'>
+      <PaginationContent className='pagination-content'>
+        <PaginationItem className='pagination-control prev'>
           <PaginationPrevious
             onClick={() => currentPage > 1 && handlePageChange(currentPage - 1)}
             className={
               currentPage === 1
-                ? 'pointer-events-none opacity-50'
-                : 'cursor-pointer'
+                ? 'control-disabled'
+                : 'control-button'
             }
           />
         </PaginationItem>
 
-        <div className='flex flex-1 justify-center gap-2'>
+        <div className='pagination-pages'>
           {pageNumbers.map((page, index) => (
             <PaginationItem key={index}>
-              {page === '...' ? (
-                <span className='px-3 py-2 text-base'>...</span>
+              {page === ELLIPSIS ? (
+                <span className='ellipsis'>...</span>
               ) : (
                 <PaginationLink
-                  onClick={() => handlePageChange(page as number)}
+                  onClick={() => handlePageChange(page)}
                   className={cn(
-                    `hover:!bg-dark-400 rounded-sm text-base cursor-pointer`,
+                    'page-link',
                     {
-                      '!bg-green-500 text-dark-900 font-semibold':
-                        currentPage === page,
+                      'page-link-active': currentPage === page,
                     }
                   )}
                   isActive={currentPage === page}
@@ -105,11 +62,11 @@ export default function CoinsPagination({
           ))}
         </div>
 
-        <PaginationItem className='bg-dark-400 rounded-sm pl-2 py-1'>
+        <PaginationItem className='pagination-control next'>
           <PaginationNext
             onClick={() => !isLastPage && handlePageChange(currentPage + 1)}
             className={
-              isLastPage ? 'pointer-events-none opacity-50' : 'cursor-pointer'
+              isLastPage ? 'control-disabled' : 'control-button'
             }
           />
         </PaginationItem>
diff --git a/components/Converter.tsx b/components/Converter.tsx
deleted file mode 100644
index 6ee310e..0000000
--- a/components/Converter.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-'use client';
-
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import Image from 'next/image';
-import { useState } from 'react';
-import { Input } from './ui/input';
-import { formatPrice } from '@/lib/utils';
-
-export const Converter = ({ symbol, icon, priceList }: ConverterProps) => {
-  const [currency, setCurrency] = useState('usd');
-  const [amount, setAmount] = useState('10');
-
-  // Calculate converted price
-  const convertedPrice = (parseFloat(amount) || 0) * (priceList[currency] || 0);
-
-  return (
-    <div className='w-full space-y-5'>
-      <h4 className='converter-title'>{symbol.toUpperCase()} Converter</h4>
-      <div className='converter-container'>
-        <div className='converter-input-wrapper'>
-          <Input
-            type='number'
-            placeholder='Amount'
-            value={amount}
-            onChange={(e) => setAmount(e.target.value)}
-            className='converter-input'
-          />
-          <div className='converter-coin-info'>
-            <Image src={icon} alt={symbol} width={20} height={20} />
-            <p className='converter-coin-symbol'>{symbol.toUpperCase()}</p>
-          </div>
-        </div>
-
-        <div>
-          <div className='converter-divider-wrapper'>
-            <div className='converter-divider-line' />
-            <Image
-              src='/assets/converter.svg'
-              alt='converter'
-              width={32}
-              height={32}
-              className='converter-icon'
-            />
-          </div>
-        </div>
-
-        <div className='converter-output-wrapper'>
-          <p className='text-base font-medium'>
-            {formatPrice(convertedPrice, 2, currency, false)}
-          </p>
-          <Select value={currency} onValueChange={setCurrency}>
-            <SelectTrigger
-              className='converter-select-trigger'
-              value={currency}
-            >
-              <SelectValue placeholder='Select' className='flex gap-2'>
-                <span className='converter-currency'>
-                  {currency.toUpperCase()}
-                </span>
-              </SelectValue>
-            </SelectTrigger>
-            <SelectContent className='converter-select-content'>
-              {Object.keys(priceList).map((currencyCode) => (
-                <SelectItem
-                  key={currencyCode}
-                  value={currencyCode}
-                  className='converter-select-item'
-                >
-                  {currencyCode.toUpperCase()}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/components/DataTable.tsx b/components/DataTable.tsx
new file mode 100644
index 0000000..39f577b
--- /dev/null
+++ b/components/DataTable.tsx
@@ -0,0 +1,70 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { cn } from '@/lib/utils';
+
+export const DataTable = <T,>({
+  columns,
+  data,
+  rowKey,
+  tableClassName,
+  headerClassName,
+  headerRowClassName,
+  headerCellClassName,
+  bodyRowClassName,
+  bodyCellClassName,
+}: DataTableProps<T>) => {
+  return (
+    <Table className={cn('custom-scrollbar', tableClassName)}>
+      <TableHeader className={headerClassName}>
+        <TableRow className={cn('hover:bg-transparent!', headerRowClassName)}>
+          {columns.map((column, columnIndex) => (
+            <TableHead
+              key={columnIndex}
+              className={cn(
+                'bg-dark-400 text-purple-100 py-4',
+                headerCellClassName,
+                column.headClassName,
+                columnIndex === 0 && 'pl-5',
+                columnIndex === columns.length - 1 && 'pr-5'
+              )}
+            >
+              {column.header}
+            </TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((row, rowIndex) => (
+          <TableRow
+            key={rowKey(row, rowIndex)}
+            className={cn(
+              'overflow-hidden rounded-lg border-b border-purple-100/5 hover:bg-dark-400/30! relative',
+              bodyRowClassName
+            )}
+          >
+            {columns.map((column, columnIndex) => (
+              <TableCell
+                key={columnIndex}
+                className={cn(
+                  'py-4',
+                  bodyCellClassName,
+                  column.cellClassName,
+                  columnIndex === 0 && 'pl-5',
+                  columnIndex === columns.length - 1 && 'pr-5'
+                )}
+              >
+                {column.cell(row, rowIndex)}
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};
diff --git a/components/ExchangeListings.tsx b/components/ExchangeListings.tsx
deleted file mode 100644
index c16818b..0000000
--- a/components/ExchangeListings.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { formatPrice, timeAgo } from '@/lib/utils';
-import Link from 'next/link';
-
-export const ExchangeListings = ({
-  coinData,
-}: {
-  coinData: CoinDetailsData;
-}) => {
-  return (
-    <div className='w-full mt-8 space-y-4'>
-      <h4 className='section-title'>Exchange Listings</h4>
-      <div className='custom-scrollbar mt-5 exchange-container'>
-        <Table>
-          <TableHeader className='text-purple-100'>
-            <TableRow className='hover:bg-transparent'>
-              <TableHead className='exchange-header-left'>Exchange</TableHead>
-              <TableHead className='text-purple-100'>Pair</TableHead>
-              <TableHead className='text-purple-100'>Price</TableHead>
-              <TableHead className='exchange-header-right'>
-                Last Traded
-              </TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {coinData.tickers
-              .slice(0, 7)
-              .map((ticker: Ticker, index: number) => (
-                <TableRow
-                  key={index}
-                  className='overflow-hidden rounded-lg hover:!bg-dark-400/30'
-                >
-                  <TableCell className=' text-green-500 font-bold'>
-                    <Link
-                      href={ticker.trade_url}
-                      target='_blank'
-                      className='exchange-link'
-                    >
-                      {ticker.market.name}
-                    </Link>
-                  </TableCell>
-                  <TableCell>
-                    <div className='exchange-pair'>
-                      <p className='truncate max-w-[100px] h-full'>
-                        {ticker.base}
-                      </p>
-                      /
-                      <p className='truncate max-w-[100px] h-full ml-2'>
-                        {ticker.target}
-                      </p>
-                    </div>
-                  </TableCell>
-                  <TableCell className='font-medium'>
-                    {formatPrice(ticker.converted_last.usd)}
-                  </TableCell>
-                  <TableCell className='exchange-timestamp'>
-                    {timeAgo(ticker.timestamp)}
-                  </TableCell>
-                </TableRow>
-              ))}
-          </TableBody>
-        </Table>
-      </div>
-    </div>
-  );
-};
diff --git a/components/Header.tsx b/components/Header.tsx
index 18ab0ff..cafd6ee 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -7,16 +7,12 @@ import { cn } from '@/lib/utils';
 import { navItems } from '@/lib/constants';
 import { SearchModal } from './SearchModal';
 
-export const Header = ({
-  trendingCoins = [],
-}: {
-  trendingCoins: TrendingCoin[];
-}) => {
+export const Header = ({ trendingCoins = [] }: HeaderProps) => {
   const pathname = usePathname();
 
   return (
-    <header className='border-b border-dark-400 h-20'>
-      <div className='container flex justify-between items-center h-full'>
+    <header>
+      <div className='main-container inner'>
         <Link href='/'>
           <Image
             src='/assets/logo.svg'
@@ -26,7 +22,7 @@ export const Header = ({
           />
         </Link>
 
-        <nav className='flex h-full items-center'>
+        <nav>
           {navItems.map((item) => {
             const isActive = pathname === item.href;
 
@@ -43,13 +39,10 @@ export const Header = ({
               <Link
                 key={item.label}
                 href={item.href}
-                className={cn(
-                  'px-6 py-5 flex items-center transition-all hover:text-white font-medium h-full text-purple-100 cursor-pointer',
-                  {
-                    'text-white': isActive,
-                    'max-sm:hidden': item.label === 'Home',
-                  }
-                )}
+                className={cn('nav-link', {
+                  'is-active': isActive,
+                  'is-home': item.label === 'Home',
+                })}
               >
                 {item.label}
               </Link>
diff --git a/components/LiveDataWrapper.tsx b/components/LiveDataWrapper.tsx
index c03757a..be3f10a 100644
--- a/components/LiveDataWrapper.tsx
+++ b/components/LiveDataWrapper.tsx
@@ -1,13 +1,6 @@
 'use client';
 
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
+import { DataTable } from '@/components/DataTable';
 import CoinHeader from './CoinHeader';
 import { Separator } from './ui/separator';
 import CandlestickChart from './CandlestickChart';
@@ -26,10 +19,43 @@ export default function LiveDataWrapper({
     poolId,
   });
 
-  console.log('=========poolId', poolId);
+  const tradeColumns = [
+    {
+      header: 'Price',
+      cellClassName: 'price-cell',
+      cell: (trade: Trade) => (trade.price ? formatPrice(trade.price) : '-'),
+    },
+    {
+      header: 'Amount',
+      cellClassName: 'amount-cell',
+      cell: (trade: Trade) => trade.amount?.toFixed(4) ?? '-',
+    },
+    {
+      header: 'Value',
+      cellClassName: 'value-cell',
+      cell: (trade: Trade) => (trade.value ? formatPrice(trade.value) : '-'),
+    },
+    {
+      header: 'Buy/Sell',
+      cellClassName: 'type-cell',
+      cell: (trade: Trade) => (
+        <span
+          className={trade.type === 'b' ? 'text-green-500' : 'text-red-500'}
+        >
+          {trade.type === 'b' ? 'Buy' : 'Sell'}
+        </span>
+      ),
+    },
+    {
+      header: 'Time',
+      cellClassName: 'time-cell',
+      cell: (trade: Trade) =>
+        trade.timestamp ? timeAgo(trade.timestamp) : '-',
+    },
+  ];
 
   return (
-    <section className='size-full xl:col-span-2'>
+    <section id='live-data-wrapper'>
       <CoinHeader
         name={coin.name}
         image={coin.image.large}
@@ -44,10 +70,9 @@ export default function LiveDataWrapper({
         priceChange24h={coin.market_data.price_change_24h_in_currency.usd}
       />
 
-      <Separator className='my-8 bg-purple-600' />
+      <Separator className='divider' />
 
-      {/* Trend Overview */}
-      <div className='w-full'>
+      <div className='trend'>
         <CandlestickChart
           data={coinOHLCData}
           liveOhlcv={ohlcv}
@@ -55,63 +80,20 @@ export default function LiveDataWrapper({
           mode='live'
           initialPeriod='daily'
         >
-          <h4 className='section-title mt-2 pl-2'>Trend Overview</h4>
+          <h4>Trend Overview</h4>
         </CandlestickChart>
       </div>
 
-      <Separator className='my-8 bg-purple-600' />
+      <Separator className='divider' />
 
-      {/* Recent Trades */}
-      <div className='w-full my-8 space-y-4'>
-        <h4 className='section-title'>Recent Trades</h4>
-        <div className='custom-scrollbar bg-dark-500 mt-5 rounded-xl overflow-hidden'>
-          {trades.length > 0 ? (
-            <Table className='bg-dark-500'>
-              <TableHeader className='text-purple-100'>
-                <TableRow className='hover:bg-transparent text-sm'>
-                  <TableHead className='pl-5 text-purple-100'>Price</TableHead>
-                  <TableHead className='py-5 text-purple-100'>Amount</TableHead>
-                  <TableHead className='pr-8 text-purple-100'>Value</TableHead>
-                  <TableHead className='pr-8 text-purple-100'>
-                    Buy/Sell
-                  </TableHead>
-                  <TableHead className='pr-8 text-purple-100'>Time</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {trades?.map((trade, index) => (
-                  <TableRow key={index} className='hover:bg-transparent'>
-                    <TableCell className='pl-5 py-5 font-medium'>
-                      {trade.price ? formatPrice(trade.price) : '-'}
-                    </TableCell>
-                    <TableCell className='py-4 font-medium'>
-                      {trade.amount?.toFixed(4) ?? '-'}
-                    </TableCell>
-                    <TableCell className='font-medium'>
-                      {trade.value ? formatPrice(trade.value) : '-'}
-                    </TableCell>
-                    <TableCell className='font-medium'>
-                      <span
-                        className={
-                          trade.type === 'b' ? 'text-green-500' : 'text-red-500'
-                        }
-                      >
-                        {trade.type === 'b' ? 'Buy' : 'Sell'}
-                      </span>
-                    </TableCell>
-                    <TableCell className='pr-5'>
-                      {trade.timestamp ? timeAgo(trade.timestamp) : '-'}
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          ) : (
-            <div className='text-center p-10 text-purple-100/50'>
-              No recent trades
-            </div>
-          )}
-        </div>
+      <div className='trades'>
+        <h4>Recent Trades</h4>
+        <DataTable
+          tableClassName='trades-table'
+          columns={tradeColumns}
+          data={trades ?? []}
+          rowKey={(_, index) => index}
+        />
       </div>
 
       {children}
diff --git a/components/SearchModal.tsx b/components/SearchModal.tsx
index 1cff6a0..c474916 100644
--- a/components/SearchModal.tsx
+++ b/components/SearchModal.tsx
@@ -18,6 +18,50 @@ import { cn, formatPercentage, formatPrice } from '@/lib/utils';
 import useSWR from 'swr';
 import { useDebounce, useKey } from 'react-use';
 
+const TRENDING_LIMIT = 8;
+const SEARCH_LIMIT = 10;
+
+const SearchItem = ({ coin, onSelect, isActiveName }: SearchItemProps) => {
+  const isSearchCoin =
+    typeof coin.data?.price_change_percentage_24h === 'number';
+
+  const change = isSearchCoin
+    ? (coin as SearchCoin).data?.price_change_percentage_24h ?? 0
+    : (coin as TrendingCoin['item']).data.price_change_percentage_24h?.usd ?? 0;
+
+  const price = isSearchCoin ? coin.data?.price : coin.data.price;
+
+  return (
+    <CommandItem
+      value={coin.id}
+      onSelect={() => onSelect(coin.id)}
+      className='search-item'
+    >
+      <div className='coin-info'>
+        <Image src={coin.thumb} alt={coin.name} width={32} height={32} />
+
+        <div>
+          <p className={cn('font-bold', isActiveName && 'text-white')}>
+            {coin.name}
+          </p>
+          <p className='coin-symbol'>{coin.symbol}</p>
+        </div>
+      </div>
+
+      {!price && <span className='coin-price'>{formatPrice(price)}</span>}
+
+      <p
+        className={cn('coin-change', {
+          'text-green-500': change > 0,
+          'text-red-500': change < 0,
+        })}
+      >
+        {formatPercentage(change)}
+      </p>
+    </CommandItem>
+  );
+};
+
 export const SearchModal = ({
   initialTrendingCoins = [],
 }: {
@@ -25,6 +69,7 @@ export const SearchModal = ({
 }) => {
   const router = useRouter();
   const [open, setOpen] = useState(false);
+
   const [searchQuery, setSearchQuery] = useState('');
   const [debouncedQuery, setDebouncedQuery] = useState('');
 
@@ -36,10 +81,9 @@ export const SearchModal = ({
     [searchQuery]
   );
 
-  const {
-    data: searchResults = [],
-    isValidating: isSearching,
-  } = useSWR<SearchCoin[]>(
+  const { data: searchResults = [], isValidating: isSearching } = useSWR<
+    SearchCoin[]
+  >(
     debouncedQuery ? ['coin-search', debouncedQuery] : null,
     ([, query]) => searchCoins(query as string),
     {
@@ -48,7 +92,8 @@ export const SearchModal = ({
   );
 
   useKey(
-    (event) => event.key?.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey),
+    (event) =>
+      event.key?.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey),
     (event) => {
       event.preventDefault();
       setOpen((prev) => !prev);
@@ -65,155 +110,86 @@ export const SearchModal = ({
   };
 
   const hasQuery = debouncedQuery.length > 0;
-  const trendingCoins = initialTrendingCoins;
+  const trendingCoins = initialTrendingCoins.slice(0, TRENDING_LIMIT);
   const showTrending = !hasQuery && trendingCoins.length > 0;
 
+  const isSearchEmpty = !isSearching && !hasQuery && !showTrending;
+  const isTrendingListVisible = !isSearching && showTrending;
+
+  const isNoResults = !isSearching && hasQuery && searchResults.length === 0;
+  const isResultsVisible = !isSearching && hasQuery && searchResults.length > 0;
+
   return (
-    <>
-      <Button
-        variant='ghost'
-        onClick={() => setOpen(true)}
-        className='search-button'
-      >
+    <div id='search-modal'>
+      <Button variant='ghost' onClick={() => setOpen(true)} className='trigger'>
         <SearchIcon size={18} />
         Search
-        <kbd className='search-kbd'>
+        <kbd className='kbd'>
           <span className='text-xs'>⌘</span>K
         </kbd>
       </Button>
 
-      {/* Dialog */}
       <CommandDialog
         open={open}
         onOpenChange={setOpen}
-        className='search-dialog'
+        className='dialog'
+        data-search-modal
       >
-        <div className='bg-dark-500'>
+        <div className='cmd-input'>
           <CommandInput
-            className='placeholder:text-purple-100'
             placeholder='Search for a token by name or symbol...'
             value={searchQuery}
             onValueChange={setSearchQuery}
           />
         </div>
 
-        <CommandList className='custom-scrollbar search-list'>
-          {isSearching && <div className='search-empty'>Searching...</div>}
+        <CommandList className='list custom-scrollbar'>
+          {isSearching && <div className='empty'>Searching...</div>}
 
-          {!isSearching && !hasQuery && !showTrending && (
-            <div className='search-empty'>Type to search for coins...</div>
+          {isSearchEmpty && (
+            <div className='empty'>Type to search for coins...</div>
           )}
 
-          {!isSearching && showTrending && (
+          {isTrendingListVisible && (
             <CommandGroup
               heading={
-                <div className='search-heading'>
+                <div className='heading'>
                   <TrendingUp size={16} />
                   Trending Coins
                 </div>
               }
-              className='bg-dark-500'
+              className='group'
             >
-              {trendingCoins.slice(0, 8).map((trendingCoin) => {
-                const coin = trendingCoin.item;
-
-                return (
-                  <CommandItem
-                    key={coin.id}
-                    value={coin.id}
-                    onSelect={() => handleSelect(coin.id)}
-                    className='search-item'
-                  >
-                    <div className='search-coin-info'>
-                      <Image
-                        src={coin.thumb}
-                        alt={coin.name}
-                        width={32}
-                        height={32}
-                        className='search-coin-image'
-                      />
-                      <div className='flex flex-col'>
-                        <p className='font-bold'>{coin.name}</p>
-                        <p className='search-coin-symbol'>{coin.symbol}</p>
-                      </div>
-                    </div>
-
-                    <span className='search-coin-price'>
-                      {formatPrice(coin.data.price)}
-                    </span>
-
-                    <p
-                      className={cn('search-coin-change', {
-                        'text-green-500':
-                          coin.data.price_change_percentage_24h.usd > 0,
-                        'text-red-500':
-                          coin.data.price_change_percentage_24h.usd < 0,
-                      })}
-                    >
-                      {formatPercentage(
-                        coin.data.price_change_percentage_24h.usd
-                      )}
-                    </p>
-                  </CommandItem>
-                );
-              })}
+              {trendingCoins.map(({ item }) => (
+                <SearchItem
+                  key={item.id}
+                  coin={item}
+                  onSelect={handleSelect}
+                  isActiveName={false}
+                />
+              ))}
             </CommandGroup>
           )}
 
-          {!isSearching && hasQuery && searchResults.length === 0 && (
-            <CommandEmpty>No coins found.</CommandEmpty>
-          )}
+          {isNoResults && <CommandEmpty>No coins found.</CommandEmpty>}
 
-          {!isSearching && hasQuery && searchResults.length > 0 && (
+          {isResultsVisible && (
             <CommandGroup
-              heading={<p className='search-heading'>Search Results</p>}
-              className='search-group'
+              heading={<p className='heading'>Search Results</p>}
+              className='group'
             >
-              {searchResults.slice(0, 10).map((coin) => {
-                return (
-                  <CommandItem
-                    key={coin.id}
-                    value={coin.id}
-                    onSelect={() => handleSelect(coin.id)}
-                    className='search-item'
-                  >
-                    <div className='search-coin-info'>
-                      <Image
-                        src={coin.thumb}
-                        alt={coin.name}
-                        width={32}
-                        height={32}
-                        className='search-coin-image'
-                      />
-                      <div className='flex flex-col'>
-                        <p className='font-bold text-white'>{coin.name}</p>
-                        <p className='search-coin-symbol'>{coin.symbol}</p>
-                      </div>
-                    </div>
-
-                    {coin.data?.price && (
-                      <span className='search-coin-price'>
-                        {formatPrice(coin.data.price)}
-                      </span>
-                    )}
-
-                    <p
-                      className={cn('search-coin-change', {
-                        'text-green-500':
-                          coin.data?.price_change_percentage_24h > 0,
-                        'text-red-500':
-                          coin.data?.price_change_percentage_24h < 0,
-                      })}
-                    >
-                      {formatPercentage(coin.data?.price_change_percentage_24h)}
-                    </p>
-                  </CommandItem>
-                );
-              })}
+              {searchResults.slice(0, SEARCH_LIMIT).map((coin) => (
+                <SearchItem
+                  key={coin.id}
+                  coin={coin}
+                  onSelect={handleSelect}
+                  isActiveName
+                />
+              ))}
             </CommandGroup>
           )}
         </CommandList>
       </CommandDialog>
-    </>
+    </div>
   );
 };
diff --git a/components/TopGainersLosers.tsx b/components/TopGainersLosers.tsx
deleted file mode 100644
index 3bff957..0000000
--- a/components/TopGainersLosers.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import CoinCard from './CoinCard';
-import { getTopGainersLosers } from '@/lib/coingecko.actions';
-
-export const TopGainersLosers = async () => {
-  const topGainersLosers = await getTopGainersLosers();
-
-  return (
-    <Tabs defaultValue='top-gainers' className='mt-8  w-full'>
-      <TabsList className='size-full p-1 bg-transparent border-b border-dark-500 rounded-none '>
-        <TabsTrigger
-          value='top-gainers'
-          className='data-[state=active]:!border-none data-[state=active]:!bg-transparent flex justify-start !mb-0 py-2 text-lg font-semibold md:text-2xl'
-        >
-          Top Gainers
-        </TabsTrigger>
-        <TabsTrigger
-          value='top-losers'
-          className='data-[state=active]:!border-none data-[state=active]:!bg-transparent flex justify-start !mb-0 py-2 text-lg font-semibold md:text-2xl'
-        >
-          Top Losers
-        </TabsTrigger>
-      </TabsList>
-      <TabsContent value='top-gainers' className='top-list'>
-        {topGainersLosers.top_gainers.map((coin: TopGainersLosersResponse) => (
-          <CoinCard
-            key={coin.id}
-            id={coin.id}
-            name={coin.name}
-            symbol={coin.symbol}
-            image={coin.image}
-            price={coin.usd}
-            priceChangePercentage24h={coin.usd_24h_change}
-            volume24={coin.usd_24h_vol}
-            rank={coin.market_cap_rank}
-          />
-        ))}
-      </TabsContent>
-      <TabsContent value='top-losers' className='top-list'>
-        {topGainersLosers.top_losers.map((coin: TopGainersLosersResponse) => (
-          <CoinCard
-            key={coin.id}
-            id={coin.id}
-            name={coin.name}
-            symbol={coin.symbol}
-            image={coin.image}
-            price={coin.usd}
-            priceChangePercentage24h={coin.usd_24h_change}
-            volume24={coin.usd_24h_vol}
-            rank={coin.market_cap_rank}
-          />
-        ))}
-      </TabsContent>
-    </Tabs>
-  );
-};
diff --git a/components/TrendingCoinsSection.tsx b/components/TrendingCoinsSection.tsx
deleted file mode 100644
index 21b9d25..0000000
--- a/components/TrendingCoinsSection.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { getTrendingCoins } from '@/lib/coingecko.actions';
-import { cn, formatPercentage, formatPrice } from '@/lib/utils';
-import { TrendingDown, TrendingUp } from 'lucide-react';
-import Image from 'next/image';
-import Link from 'next/link';
-
-export const TrendingCoinsSection = async () => {
-  const trendingCoins = (await getTrendingCoins()) as TrendingCoin[];
-
-  return (
-    <div className='top-movers-container'>
-      <h4 className='section-title px-5'>Trending Coins</h4>
-      <div className='table-scrollbar-container custom-scrollbar'>
-        <Table>
-          <TableHeader className='table-header-cell'>
-            <TableRow className='hover:bg-transparent'>
-              <TableHead className='table-head-left'>Name</TableHead>
-              <TableHead className='table-header-cell table-cell'>
-                24h Change
-              </TableHead>
-              <TableHead className='table-head-right'>Price</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {trendingCoins.slice(0, 6).map((coin: TrendingCoin, index) => {
-              const item = coin.item;
-              const isTrendingUp =
-                item.data.price_change_percentage_24h.usd > 0;
-
-              return (
-                <TableRow key={index} className='table-row-hover'>
-                  <TableCell className='font-bold'>
-                    <Link href={`/coins/${item.id}`} className='coin-link'>
-                      <Image
-                        src={item.large}
-                        alt={item.name}
-                        width={36}
-                        height={36}
-                        className='coin-image'
-                      />
-                      <div>
-                        <p className='text-sm md:text-base'>{item.name}</p>
-                      </div>
-                    </Link>
-                  </TableCell>
-                  <TableCell className='table-cell-change'>
-                    <div
-                      className={cn(
-                        'price-change-indicator',
-                        isTrendingUp ? 'text-green-500' : 'text-red-500'
-                      )}
-                    >
-                      <p>
-                        {formatPercentage(
-                          item.data.price_change_percentage_24h.usd
-                        )}
-                      </p>
-                      {isTrendingUp ? (
-                        <TrendingUp width={16} height={16} />
-                      ) : (
-                        <TrendingDown width={16} height={16} />
-                      )}
-                    </div>
-                  </TableCell>
-                  <TableCell className='table-cell-price'>
-                    {formatPrice(item.data.price)}
-                  </TableCell>
-                </TableRow>
-              );
-            })}
-          </TableBody>
-        </Table>
-      </div>
-    </div>
-  );
-};
diff --git a/components/coin-details/Converter.tsx b/components/coin-details/Converter.tsx
new file mode 100644
index 0000000..eb306ee
--- /dev/null
+++ b/components/coin-details/Converter.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import Image from 'next/image';
+import { useState } from 'react';
+import { Input } from '../ui/input';
+import { formatPrice } from '@/lib/utils';
+
+export const Converter = ({ symbol, icon, priceList }: ConverterProps) => {
+  const [currency, setCurrency] = useState('usd');
+  const [amount, setAmount] = useState('10');
+
+  const convertedPrice = (parseFloat(amount) || 0) * (priceList[currency] || 0);
+
+  return (
+    <div id='converter'>
+      <h4>{symbol.toUpperCase()} Converter</h4>
+
+      <div className='panel'>
+        <div className='input-wrapper'>
+          <Input
+            type='number'
+            placeholder='Amount'
+            value={amount}
+            onChange={(e) => setAmount(e.target.value)}
+            className='input'
+          />
+          <div className='coin-info'>
+            <Image src={icon} alt={symbol} width={20} height={20} />
+            <p>{symbol.toUpperCase()}</p>
+          </div>
+        </div>
+
+        <div className='divider'>
+          <div className='line' />
+
+          <Image
+            src='/assets/converter.svg'
+            alt='converter'
+            width={32}
+            height={32}
+            className='icon'
+          />
+        </div>
+
+        <div className='output-wrapper'>
+          <p>{formatPrice(convertedPrice, 2, currency, false)}</p>
+
+          <Select value={currency} onValueChange={setCurrency}>
+            <SelectTrigger className='select-trigger' value={currency}>
+              <SelectValue placeholder='Select' className='select-value'>
+                {currency.toUpperCase()}
+              </SelectValue>
+            </SelectTrigger>
+
+            <SelectContent className='select-content' data-converter>
+              {Object.keys(priceList).map((currencyCode) => (
+                <SelectItem
+                  key={currencyCode}
+                  value={currencyCode}
+                  className='select-item'
+                >
+                  {currencyCode.toUpperCase()}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/components/coin-details/TopGainersLosers.tsx b/components/coin-details/TopGainersLosers.tsx
new file mode 100644
index 0000000..00a16ee
--- /dev/null
+++ b/components/coin-details/TopGainersLosers.tsx
@@ -0,0 +1,48 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import CoinCard from '../CoinCard';
+import { getTopGainersLosers } from '@/lib/coingecko.actions';
+
+const TAB_CONFIG = [
+  { value: 'top-gainers', label: 'Top Gainers', key: 'top_gainers' },
+  { value: 'top-losers', label: 'Top Losers', key: 'top_losers' },
+] as const;
+
+const renderCoinCard = (coin: TopGainersLosersResponse) => (
+  <CoinCard
+    key={coin.id}
+    id={coin.id}
+    name={coin.name}
+    symbol={coin.symbol}
+    image={coin.image}
+    price={coin.usd}
+    priceChangePercentage24h={coin.usd_24h_change}
+    volume24={coin.usd_24h_vol}
+    rank={coin.market_cap_rank}
+  />
+);
+
+export const TopGainersLosers = async () => {
+  const topGainersLosers = await getTopGainersLosers();
+
+  return (
+    <Tabs defaultValue='top-gainers' id='top-gainers-losers'>
+      <TabsList className='tabs-list'>
+        {TAB_CONFIG.map((tab) => (
+          <TabsTrigger
+            key={tab.value}
+            value={tab.value}
+            className='tabs-trigger'
+          >
+            {tab.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+
+      {TAB_CONFIG.map((tab) => (
+        <TabsContent key={tab.value} value={tab.value} className='tabs-content'>
+          {topGainersLosers[tab.key].map(renderCoinCard)}
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+};
diff --git a/components/home/Categories.tsx b/components/home/Categories.tsx
new file mode 100644
index 0000000..ae56101
--- /dev/null
+++ b/components/home/Categories.tsx
@@ -0,0 +1,76 @@
+import { TrendingDown, TrendingUp } from 'lucide-react';
+import Image from 'next/image';
+
+import { DataTable } from '@/components/DataTable';
+import { getCategories } from '@/lib/coingecko.actions';
+import { cn, formatPercentage, formatPrice } from '@/lib/utils';
+
+export const Categories = async () => {
+  const categories = (await getCategories()) as Category[];
+  const columns = [
+    {
+      header: 'Category',
+      cellClassName: 'category-cell',
+      cell: (category: Category) => category.name,
+    },
+    {
+      header: 'Top Gainers',
+      cellClassName: 'top-gainers-cell',
+      cell: (category: Category) =>
+        category.top_3_coins.map((coin: string) => (
+          <Image
+            key={coin}
+            src={coin}
+            alt='Coin image'
+            width={28}
+            height={28}
+          />
+        )),
+    },
+    {
+      header: '24h Change',
+      cellClassName: 'change-header-cell',
+      cell: (category: Category) => {
+        const isTrendingUp = category.market_cap_change_24h > 0;
+
+        return (
+          <div
+            className={cn('change-cell', {
+              'text-green-500': category.market_cap_change_24h > 0,
+              'text-red-500': category.market_cap_change_24h < 0,
+            })}
+          >
+            <p>{formatPercentage(category.market_cap_change_24h)}</p>
+            {isTrendingUp ? (
+              <TrendingUp width={16} height={16} />
+            ) : (
+              <TrendingDown width={16} height={16} />
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Market Cap',
+      cellClassName: 'market-cap-cell',
+      cell: (category: Category) => formatPrice(category.market_cap),
+    },
+    {
+      header: '24h Volume',
+      cellClassName: 'volume-cell',
+      cell: (category: Category) => formatPrice(category.volume_24h),
+    },
+  ];
+
+  return (
+    <div id='categories' className='custom-scrollbar'>
+      <h4>Top Categories</h4>
+      <DataTable
+        tableClassName='mt-3'
+        columns={columns}
+        data={categories}
+        rowKey={(_, index) => index}
+      />
+    </div>
+  );
+};
diff --git a/components/CoinOverviewSection.tsx b/components/home/CoinOverview.tsx
similarity index 58%
rename from components/CoinOverviewSection.tsx
rename to components/home/CoinOverview.tsx
index 8411f88..71f21b7 100644
--- a/components/CoinOverviewSection.tsx
+++ b/components/home/CoinOverview.tsx
@@ -1,32 +1,30 @@
-import { getCoinDetails, getCoinOHLC } from '@/lib/coingecko.actions';
-import CandlestickChart from './CandlestickChart';
 import Image from 'next/image';
+
+import CandlestickChart from '../CandlestickChart';
+import { getCoinDetails, getCoinOHLC } from '@/lib/coingecko.actions';
 import { formatPrice } from '@/lib/utils';
 
-export const CoinOverviewSection = async () => {
+export const CoinOverview = async () => {
   const [coinData, coinOHLCData] = await Promise.all([
     getCoinDetails('bitcoin'),
     getCoinOHLC('bitcoin', 1, 'usd', 'hourly', 'full'),
   ]);
 
   return (
-    <div className='chart-section-container'>
+    <div id='coin-overview'>
       <CandlestickChart data={coinOHLCData} coinId='bitcoin'>
-        <div className='chart-section-header'>
+        <div className='header'>
           <Image
             src={coinData.image.large}
             alt={coinData.name}
             width={56}
             height={56}
-            className='chart-section-image'
           />
-          <div className='chart-section-info'>
-            <p className='chart-section-coin-name'>
+          <div className='info'>
+            <p>
               {coinData.name} / {coinData.symbol.toUpperCase()}
             </p>
-            <h1 className='chart-section-price'>
-              {formatPrice(coinData.market_data.current_price.usd)}
-            </h1>
+            <h1>{formatPrice(coinData.market_data.current_price.usd)}</h1>
           </div>
         </div>
       </CandlestickChart>
diff --git a/components/home/Fallback.tsx b/components/home/Fallback.tsx
new file mode 100644
index 0000000..e23e971
--- /dev/null
+++ b/components/home/Fallback.tsx
@@ -0,0 +1,107 @@
+import { Skeleton } from '../ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../ui/table';
+
+export const CategoriesFallback = () => (
+  <div className='custom-scrollbar categories-container'>
+    <h4 className='section-title pl-5'>Top Categories</h4>
+    <Table>
+      <TableHeader className='text-purple-100'>
+        <TableRow className='hover:bg-transparent'>
+          <TableHead className='exchange-header-left'>Category</TableHead>
+          <TableHead className='text-purple-100'>Top Gainers</TableHead>
+          <TableHead className='text-purple-100 pl-7'>24h Change</TableHead>
+          <TableHead className='text-purple-100'>Market Cap</TableHead>
+          <TableHead className='text-purple-100'>24h Volume</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {Array.from({ length: 6 }).map((_, index) => (
+          <TableRow
+            key={index}
+            className='md:text-base rounded-lg hover:bg-dark-400/30!'
+          >
+            <TableCell className='pl-5 font-bold'>
+              <Skeleton className='h-4 w-32 skeleton' />
+            </TableCell>
+            <TableCell className='flex gap-1 mr-5'>
+              {Array.from({ length: 3 }).map((__, coinIndex) => (
+                <Skeleton
+                  key={coinIndex}
+                  className='h-7 w-7 rounded-full skeleton'
+                />
+              ))}
+            </TableCell>
+            <TableCell className='font-medium'>
+              <Skeleton className='h-4 w-16 skeleton' />
+            </TableCell>
+            <TableCell className='font-medium'>
+              <Skeleton className='h-4 w-20 skeleton' />
+            </TableCell>
+            <TableCell className='font-medium'>
+              <Skeleton className='h-4 w-24 skeleton' />
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  </div>
+);
+
+export const CoinOverviewFallback = () => (
+  <div id='coin-overview'>
+    <div className='w-full h-full min-h-[420px] rounded-2xl bg-dark-500/60 p-6'>
+      <div className='flex items-center gap-4 mb-6'>
+        <Skeleton className='h-14 w-14 rounded-full skeleton' />
+        <div className='flex flex-col gap-2 flex-1'>
+          <Skeleton className='h-4 w-1/3 skeleton' />
+          <Skeleton className='h-8 w-1/2 skeleton' />
+        </div>
+      </div>
+      <Skeleton className='h-[280px] w-full rounded-xl skeleton' />
+    </div>
+  </div>
+);
+
+export const TrendingCoinsFallback = () => (
+  <div className='top-movers-container'>
+    <h4 className='section-title px-5'>Trending Coins</h4>
+    <div className='table-scrollbar-container custom-scrollbar'>
+      <Table>
+        <TableHeader className='table-header-cell'>
+          <TableRow className='hover:bg-transparent'>
+            <TableHead className='table-head-left'>Name</TableHead>
+            <TableHead className='table-header-cell table-cell'>
+              24h Change
+            </TableHead>
+            <TableHead className='table-head-right'>Price</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {Array.from({ length: 6 }).map((_, index) => (
+            <TableRow key={index} className='table-row-hover'>
+              <TableCell className='font-bold'>
+                <div className='flex items-center gap-3'>
+                  <Skeleton className='h-9 w-9 rounded-full skeleton' />
+                  <Skeleton className='h-4 w-24 skeleton' />
+                </div>
+              </TableCell>
+              <TableCell className='table-cell-change'>
+                <Skeleton className='h-4 w-16 skeleton' />
+              </TableCell>
+              <TableCell className='table-cell-price'>
+                <Skeleton className='h-4 w-20 skeleton' />
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  </div>
+);
diff --git a/components/home/TrendingCoins.tsx b/components/home/TrendingCoins.tsx
new file mode 100644
index 0000000..84e8637
--- /dev/null
+++ b/components/home/TrendingCoins.tsx
@@ -0,0 +1,74 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { TrendingDown, TrendingUp } from 'lucide-react';
+
+import { DataTable } from '@/components/DataTable';
+import { getTrendingCoins } from '@/lib/coingecko.actions';
+import { cn, formatPercentage, formatPrice } from '@/lib/utils';
+
+export const TrendingCoins = async () => {
+  const trendingCoins = (await getTrendingCoins()) as TrendingCoin[];
+
+  const columns = [
+    {
+      header: 'Name',
+      cellClassName: 'name-cell',
+      cell: (coin: TrendingCoin) => {
+        const item = coin.item;
+
+        return (
+          <Link href={`/coins/${item.id}`}>
+            <Image src={item.large} alt={item.name} width={36} height={36} />
+            <p>{item.name}</p>
+          </Link>
+        );
+      },
+    },
+    {
+      header: '24h Change',
+      cellClassName: 'change-cell',
+      cell: (coin: TrendingCoin) => {
+        const item = coin.item;
+        const isTrendingUp = item.data.price_change_percentage_24h.usd > 0;
+
+        return (
+          <div
+            className={cn(
+              'price-change',
+              isTrendingUp ? 'text-green-500' : 'text-red-500'
+            )}
+          >
+            <p>{formatPercentage(item.data.price_change_percentage_24h.usd)}</p>
+            {isTrendingUp ? (
+              <TrendingUp width={16} height={16} />
+            ) : (
+              <TrendingDown width={16} height={16} />
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Price',
+      cellClassName: 'price-cell',
+      cell: (coin: TrendingCoin) => {
+        return formatPrice(coin.item.data.price);
+      },
+    },
+  ];
+
+  return (
+    <div id='trending-coins'>
+      <h4>Trending Coins</h4>
+
+      <DataTable
+        tableClassName='trending-coins-table mt-3'
+        columns={columns}
+        data={trendingCoins.slice(0, 6)}
+        rowKey={(_, index) => index}
+        headerCellClassName='py-3!'
+        bodyCellClassName='py-2!'
+      />
+    </div>
+  );
+};
diff --git a/components/ui/pagination.tsx b/components/ui/pagination.tsx
index 1dcfb0c..586028f 100644
--- a/components/ui/pagination.tsx
+++ b/components/ui/pagination.tsx
@@ -6,7 +6,7 @@ import {
 } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { buttonVariants, type Button } from "@/components/ui/button"
+import { buttonVariants } from "@/components/ui/button"
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
   return (
@@ -37,11 +37,6 @@ function PaginationItem({ ...props }: React.ComponentProps<"li">) {
   return <li data-slot="pagination-item" {...props} />
 }
 
-type PaginationLinkProps = {
-  isActive?: boolean
-} & Pick<React.ComponentProps<typeof Button>, "size"> &
-  React.ComponentProps<"a">
-
 function PaginationLink({
   className,
   isActive,
diff --git a/hooks/useCoinGeckoWebSocket.ts b/hooks/useCoinGeckoWebSocket.ts
index 1f52774..a57711f 100644
--- a/hooks/useCoinGeckoWebSocket.ts
+++ b/hooks/useCoinGeckoWebSocket.ts
@@ -1,5 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect, useRef, useState, useCallback } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 const WS_BASE = `${process.env.NEXT_PUBLIC_COINGECKO_WEBSOCKET_URL}?x_cg_pro_api_key=${process.env.NEXT_PUBLIC_COINGECKO_API_KEY}`;
 
@@ -11,160 +10,133 @@ export function useCoinGeckoWebSocket({
   const subscribed = useRef<Set<string>>(new Set());
 
   const [price, setPrice] = useState<ExtendedPriceData | null>(null);
-  const [trades, setTrades] = useState<TradeData[]>([]);
+  const [trades, setTrades] = useState<Trade[]>([]);
   const [ohlcv, setOhlcv] = useState<OHLCData | null>(null);
-  const lastOhlcvTimestamp = useRef<number>(0);
 
   const [isWsReady, setIsWsReady] = useState(false);
 
-  const handleMessage = useCallback((event: MessageEvent) => {
-    const ws = wsRef.current;
-    const msg: WebSocketMessage = JSON.parse(event.data);
-
-    // Ping/Pong to keep connection alive
-    if (msg.type === 'ping') return ws?.send(JSON.stringify({ type: 'pong' }));
-
-    // Confirm subscription
-    if (msg.type === 'confirm_subscription') {
-      const { channel } = JSON.parse(msg?.identifier ?? '');
-      subscribed.current.add(channel);
-      return;
-    }
-
-    // C1: Price updates
-    if (msg.c === 'C1') {
-      setPrice({
-        usd: msg.p ?? 0,
-        coin: msg.i,
-        price: msg.p,
-        change24h: msg.pp,
-        marketCap: msg.m,
-        volume24h: msg.v,
-        timestamp: msg.t,
-      });
-    }
-
-    // G2: Trade updates
-    if (msg.c === 'G2') {
-      const newTrade: TradeData = {
-        price: msg.pu,
-        value: msg.vo,
-        timestamp: msg.t ?? 0,
-        type: msg.ty,
-        amount: msg.to,
-      };
-
-      setTrades((prev) => [newTrade, ...prev].slice(0, 7));
-    }
-    // G3: OHLCV updates 
-    if (msg.ch === 'G3') {
-      const timestamp = msg.t || 0; // already in seconds
-      const newCandle: OHLCData = [
-        timestamp,
-        Number(msg.o ?? 0),
-        Number(msg.h ?? 0),
-        Number(msg.l ?? 0),
-        Number(msg.c ?? 0),
-      ];
-      
-      // Always update with the latest candle - chart will handle deduplication
-      setOhlcv(newCandle);
-      lastOhlcvTimestamp.current = timestamp;
-    }
-  }, []);
-
   // WebSocket connection
   useEffect(() => {
     const ws = new WebSocket(WS_BASE);
     wsRef.current = ws;
+    const send = (payload: Record<string, unknown>) =>
+      ws.send(JSON.stringify(payload));
 
-    ws.onopen = () => setIsWsReady(true);
-    ws.onmessage = handleMessage;
-    ws.onclose = () => setIsWsReady(false);
+    const handleMessage = (event: MessageEvent) => {
+      const msg: WebSocketMessage = JSON.parse(event.data);
 
-    return () => ws.close();
-  }, [handleMessage]);
+      if (msg.type === 'ping') {
+        send({ type: 'pong' });
+        return;
+      }
 
-  // Subscribe helper
-  const subscribe = useCallback(
-    (channel: string, data?: Record<string, any>) => {
-      const ws = wsRef.current;
-      if (!ws || !isWsReady || subscribed.current.has(channel)) return;
+      if (msg.type === 'confirm_subscription') {
+        const { channel } = JSON.parse(msg?.identifier ?? '');
+        subscribed.current.add(channel);
+        return;
+      }
 
-      ws.send(
-        JSON.stringify({
-          command: 'subscribe',
-          identifier: JSON.stringify({ channel }),
-        })
-      );
+      if (msg.c === 'C1') {
+        setPrice({
+          usd: msg.p ?? 0,
+          coin: msg.i,
+          price: msg.p,
+          change24h: msg.pp,
+          marketCap: msg.m,
+          volume24h: msg.v,
+          timestamp: msg.t,
+        });
+      }
 
-      if (data) {
-        ws.send(
-          JSON.stringify({
-            command: 'message',
-            identifier: JSON.stringify({ channel }),
-            data: JSON.stringify(data),
-          })
-        );
+      if (msg.c === 'G2') {
+        const newTrade: Trade = {
+          price: msg.pu,
+          value: msg.vo,
+          timestamp: msg.t ?? 0,
+          type: msg.ty,
+          amount: msg.to,
+        };
+
+        setTrades((prev) => [newTrade, ...prev].slice(0, 7));
       }
-    },
-    [isWsReady]
-  );
 
-  const unsubscribeAll = useCallback(() => {
-    const ws = wsRef.current;
-    subscribed.current.forEach((channel) => {
-      ws?.send(
-        JSON.stringify({
-          command: 'unsubscribe',
-          identifier: JSON.stringify({ channel }),
-        })
-      );
-    });
-    subscribed.current.clear();
+      if (msg.ch === 'G3') {
+        const timestamp = msg.t || 0;
+        const newCandle: OHLCData = [
+          timestamp,
+          Number(msg.o ?? 0),
+          Number(msg.h ?? 0),
+          Number(msg.l ?? 0),
+          Number(msg.c ?? 0),
+        ];
+
+        setOhlcv(newCandle);
+      }
+    };
+
+    ws.onopen = () => setIsWsReady(true);
+    ws.onmessage = handleMessage;
+    ws.onclose = () => setIsWsReady(false);
+
+    return () => ws.close();
   }, []);
 
   // Subscribe on connection ready
   useEffect(() => {
     if (!isWsReady) return;
+    const ws = wsRef.current;
+    if (!ws) return;
+    const send = (payload: Record<string, unknown>) =>
+      ws.send(JSON.stringify(payload));
+
+    const unsubscribeAll = () => {
+      subscribed.current.forEach((channel) => {
+        send({
+          command: 'unsubscribe',
+          identifier: JSON.stringify({ channel }),
+        });
+      });
+      subscribed.current.clear();
+    };
+
+    const subscribe = (channel: string, data?: Record<string, unknown>) => {
+      if (subscribed.current.has(channel)) return;
 
-    let active = true;
+      send({ command: 'subscribe', identifier: JSON.stringify({ channel }) });
 
-    (async () => {
-      if (!active) return;
+      if (data) {
+        send({
+          command: 'message',
+          identifier: JSON.stringify({ channel }),
+          data: JSON.stringify(data),
+        });
+      }
+    };
 
-      // Reset state
+    queueMicrotask(() => {
       setPrice(null);
       setTrades([]);
       setOhlcv(null);
-      lastOhlcvTimestamp.current = 0;
-
-      unsubscribeAll();
+    });
 
-      // Subscribe channels
-      subscribe('CGSimplePrice', { coin_id: [coinId], action: 'set_tokens' });
+    unsubscribeAll();
 
-      const wsPools = [poolId.replace('_', ':')];
-     
-      
-      if (wsPools.length) {
-        subscribe('OnchainTrade', {
-          'network_id:pool_addresses': wsPools,
-          action: 'set_pools',
-        });
+    subscribe('CGSimplePrice', { coin_id: [coinId], action: 'set_tokens' });
 
-        subscribe('OnchainOHLCV', {
-          'network_id:pool_addresses': wsPools,
-          interval: '1s',
-          action: 'set_pools',
-        });
-      }
-    })();
+    const poolAddress = poolId.replace('_', ':');
+    if (poolAddress) {
+      subscribe('OnchainTrade', {
+        'network_id:pool_addresses': [poolAddress],
+        action: 'set_pools',
+      });
 
-    return () => {
-      active = false;
-    };
-  }, [coinId, poolId, isWsReady, subscribe, unsubscribeAll]);
+      subscribe('OnchainOHLCV', {
+        'network_id:pool_addresses': [poolAddress],
+        interval: '1s',
+        action: 'set_pools',
+      });
+    }
+  }, [coinId, poolId, isWsReady]);
 
   return {
     price,
diff --git a/lib/utils.ts b/lib/utils.ts
index 4b3ac9a..f8b025c 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -10,7 +10,7 @@ export function formatPrice(
   value: number | null | undefined,
   digits?: number,
   currency?: string,
-  showSymbol?: boolean,
+  showSymbol?: boolean
 ) {
   if (value === null || value === undefined || isNaN(value)) {
     return showSymbol !== false ? '$0.00' : '0.00';
@@ -24,10 +24,10 @@ export function formatPrice(
       maximumFractionDigits: digits ?? 2,
     });
   }
-   return value.toLocaleString(undefined, {
-      minimumFractionDigits: digits ?? 2,
-      maximumFractionDigits: digits ?? 2,
-    });
+  return value.toLocaleString(undefined, {
+    minimumFractionDigits: digits ?? 2,
+    maximumFractionDigits: digits ?? 2,
+  });
 }
 
 export function formatPercentage(change: number | null | undefined): string {
@@ -78,7 +78,45 @@ export function convertOHLCData(data: OHLCData[]) {
       low: d[3],
       close: d[4],
     }))
-    .filter((item, index, arr) =>
-      index === 0 || item.time !== arr[index - 1].time
+    .filter(
+      (item, index, arr) => index === 0 || item.time !== arr[index - 1].time
     );
 }
+
+export const ELLIPSIS = 'ellipsis' as const;
+export const buildPageNumbers = (
+  currentPage: number,
+  totalPages: number
+): (number | typeof ELLIPSIS)[] => {
+  const MAX_VISIBLE_PAGES = 5;
+
+  const pages: (number | typeof ELLIPSIS)[] = [];
+
+  if (totalPages <= MAX_VISIBLE_PAGES) {
+    for (let i = 1; i <= totalPages; i += 1) {
+      pages.push(i);
+    }
+    return pages;
+  }
+
+  pages.push(1);
+
+  const start = Math.max(2, currentPage - 1);
+  const end = Math.min(totalPages - 1, currentPage + 1);
+
+  if (start > 2) {
+    pages.push(ELLIPSIS);
+  }
+
+  for (let i = start; i <= end; i += 1) {
+    pages.push(i);
+  }
+
+  if (end < totalPages - 1) {
+    pages.push(ELLIPSIS);
+  }
+
+  pages.push(totalPages);
+
+  return pages;
+};
diff --git a/types.d.ts b/types.d.ts
index 9b3e78a..aa918fc 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -136,7 +136,7 @@ interface PriceData {
   usd: number;
 }
 
-interface TradeData {
+interface Trade {
   price?: number;
   timestamp?: number;
   type?: string;
@@ -248,13 +248,51 @@ interface UseCoinGeckoWebSocketProps {
 
 interface UseCoinGeckoWebSocketReturn {
   price: ExtendedPriceData | null;
-  trades: TradeData[];
+  trades: Trade[];
   ohlcv: OHLCData | null;
   isConnected: boolean;
 }
 
-interface ClickableTableRowProps {
-  href: string;
-  children: React.ReactNode;
-  className?: string;
+interface DataTableColumn<T> {
+  header: React.ReactNode;
+  cell: (row: T, index: number) => React.ReactNode;
+  headClassName?: string;
+  cellClassName?: string;
+}
+
+interface DataTableProps<T> {
+  columns: DataTableColumn<T>[];
+  data: T[];
+  rowKey: (row: T, index: number) => React.Key;
+  tableClassName?: string;
+  headerClassName?: string;
+  headerRowClassName?: string;
+  headerCellClassName?: string;
+  bodyRowClassName?: string;
+  bodyCellClassName?: string;
+}
+
+type ButtonSize = 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+  size?: ButtonSize;
+} & React.ComponentProps<'a'>;
+
+interface Pagination {
+  currentPage: number;
+  totalPages: number;
+  hasMorePages: boolean;
+}
+
+interface HeaderProps {
+  trendingCoins: TrendingCoin[];
+}
+
+type SearchItemCoin = SearchCoin | TrendingCoin['item'];
+
+interface SearchItemProps {
+  coin: SearchItemCoin;
+  onSelect: (coinId: string) => void;
+  isActiveName: boolean;
 }