diff --git a/app/styles/touch.css b/app/styles/touch.css
index b5e541d3..55d4515b 100644
--- a/app/styles/touch.css
+++ b/app/styles/touch.css
@@ -3,11 +3,13 @@
  *
  * All interactive elements should present a hit area of at least 44×44 px on
  * touch devices.  Use `.touch-target` on the element itself (when its visual
- * size meets 44 px) or `.touch-target-expand` when the element is intentionally
- * small and needs an invisible extended hit area via a pseudo-element.
+ * size meets 44 px), `.touch-ripple` for press feedback, or
+ * `.touch-target-expand` when the element is intentionally small and needs an
+ * invisible extended hit area via a pseudo-element.
  *
  * Usage:
  *   <button className="touch-target …">Save</button>
+ *   <button className="touch-target touch-ripple …">Card</button>
  *   <button className="touch-target-expand relative …">×</button>
  */
 
@@ -22,6 +24,48 @@
     min-width: 44px;
   }
 
+  /**
+   * .touch-ripple
+   * Adds subtle tactile feedback for touch/click presses without extra markup.
+   * The pseudo-element only animates transform and opacity, so layout remains
+   * stable across breakpoints and dark mode.
+   */
+  .touch-ripple {
+    -webkit-tap-highlight-color: transparent;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .touch-ripple::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: radial-gradient(circle at center, hsl(var(--primary) / 0.16), transparent 68%);
+    opacity: 0;
+    transform: scale(0.92);
+    transition:
+      opacity 180ms ease-out,
+      transform 220ms ease-out;
+  }
+
+  .touch-ripple:active::after {
+    opacity: 1;
+    transform: scale(1);
+    transition-duration: 120ms;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .touch-ripple::after {
+      transform: none;
+      transition: none;
+    }
+
+    .touch-ripple:active::after {
+      transform: none;
+    }
+  }
+
   /**
    * .touch-target-expand
    * Expands the interactive hit area to 44×44 px via an absolute pseudo-element
diff --git a/components/PredictionCard.tsx b/components/PredictionCard.tsx
index 3c18b593..9f71f18f 100644
--- a/components/PredictionCard.tsx
+++ b/components/PredictionCard.tsx
@@ -100,12 +100,15 @@ const PredictionCard: React.FC<PredictionCardProps> = ({ prediction }) => {
     return <PredictionCardSkeleton />;
   }
 
-  const { title, description, stakeAmount, stakeToken, odds, potentialWinnings, winningsToken, eventDate, resolvedDate, status } = prediction;
+  const { title, description, category, outcome, stakeAmount, stakeToken, odds, potentialWinnings, winningsToken, eventDate, resolvedDate, status } = prediction;
   const { icon: Icon, className, label } = statusMap[status];
 
   return (
     /* touch-target: enforces ≥44px hit area (WCAG 2.5.5 / Apple HIG). */
-    <button className="touch-target w-full text-left bg-card p-4 rounded-xl shadow-lg hover:bg-muted/50 transition duration-200 cursor-pointer border border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+    <button
+      type="button"
+      className="touch-target touch-ripple relative isolate w-full overflow-hidden text-left bg-card p-4 rounded-xl shadow-lg hover:bg-muted/50 transition duration-200 cursor-pointer border border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+    >
       <div className="flex justify-between items-start mb-3">
         <div className="flex flex-col items-start gap-1 pr-2">
           <h3 className="text-lg font-semibold text-card-foreground line-clamp-2">{title}</h3>
@@ -156,14 +159,22 @@ const PredictionCard: React.FC<PredictionCardProps> = ({ prediction }) => {
         <Collapsible open={isOddsExpanded} onOpenChange={setIsOddsExpanded}>
           <CollapsibleTrigger asChild>
             {/* touch-target: guarantees ≥44px tap area on the Odds trigger (WCAG 2.5.5). */}
-            <button
-              className="touch-target flex w-full items-center justify-between px-2 rounded hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              aria-expanded={isOddsExpanded}
-              aria-controls="odds-breakdown"
-            >
-              <p className="text-muted-foreground">Odds</p>
-              <p className="text-card-foreground font-medium">{odds.toFixed(1)}x</p>
-            </button>
+            <span
+              role="button"
+              tabIndex={0}
+              className="touch-target flex w-full items-center justify-between px-2 rounded hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              aria-expanded={isOddsExpanded}
+              aria-controls="odds-breakdown"
+              onKeyDown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                  event.preventDefault();
+                  event.currentTarget.click();
+                }
+              }}
+            >
+              <p className="text-muted-foreground">Odds</p>
+              <p className="text-card-foreground font-medium">{odds.toFixed(1)}x</p>
+            </span>
           </CollapsibleTrigger>
           <CollapsibleContent id="odds-breakdown" className="mt-2 text-sm text-muted-foreground">
             <p>Implied probability: {(1 / odds * 100).toFixed(1)}%</p>
diff --git a/components/__tests__/PredictionCard.test.tsx b/components/__tests__/PredictionCard.test.tsx
index 42ce6c15..e89fe7fe 100644
--- a/components/__tests__/PredictionCard.test.tsx
+++ b/components/__tests__/PredictionCard.test.tsx
@@ -1,58 +1,18 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import PredictionCard from '../PredictionCard';
-import { Prediction } from '../../types/predictions';
-
-const createMockPrediction = (category?: string, outcome?: 'Yes' | 'No'): Prediction => ({
-  id: 'test-1',
-  title: 'Test Prediction',
-  description: 'Test Description',
-  category,
-  outcome,
-  stakeAmount: 10,
-  stakeToken: 'USDC',
-  odds: 1.5,
-  potentialWinnings: 15,
-  winningsToken: 'USDC',
-  eventDate: '01/01/2024',
-  status: 'active',
-});
-
-describe('PredictionCard Snapshots', () => {
-  const categories = ['sports', 'crypto', 'politics', 'weather', 'esports', 'unknown-category'];
-
-  categories.forEach((category) => {
-    it(`should match snapshot for category: ${category} with 'Yes' outcome`, () => {
-      const { container } = render(
-        <PredictionCard prediction={createMockPrediction(category, 'Yes')} />
-      );
-      expect(container.firstChild).toMatchSnapshot();
-    });
-
-    it(`should match snapshot for category: ${category} with 'No' outcome`, () => {
-      const { container } = render(
-        <PredictionCard prediction={createMockPrediction(category, 'No')} />
-      );
-      expect(container.firstChild).toMatchSnapshot();
-    });
-  });
-
-  it('should match snapshot without outcome', () => {
-    const { container } = render(
-      <PredictionCard prediction={createMockPrediction()} />
-    );
-    expect(container.firstChild).toMatchSnapshot();
+import { readFileSync } from 'fs';
+import path from 'path';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import PredictionCard, { PredictionCardSkeleton } from '../PredictionCard';
-import { Prediction } from '../../types/predictions';
-
-// --- Test Data ---
+import PredictionsList from '../PredictionsList';
+import type { Prediction } from '../../types/predictions';
 
 const mockPrediction: Prediction = {
   id: '1',
   title: 'NBA Finals: Lakers vs Heat',
   description: 'Lakers to win',
+  category: 'sports',
+  outcome: 'Yes',
   stakeAmount: 10,
   stakeToken: 'XLM',
   odds: 1.8,
@@ -69,171 +29,108 @@ const mockResolvedPrediction: Prediction = {
   resolvedDate: '01/06/2023',
 };
 
-// --- PredictionCardSkeleton Tests ---
-
 describe('PredictionCardSkeleton', () => {
-  it('renders a skeleton with the correct structure', () => {
+  it('renders a busy skeleton with the card shape', () => {
     render(<PredictionCardSkeleton />);
-    
+
     const skeleton = screen.getByTestId('prediction-card-skeleton');
     expect(skeleton).toBeInTheDocument();
     expect(skeleton).toHaveAttribute('aria-busy', 'true');
+    expect(skeleton).toHaveClass('bg-card', 'p-4', 'rounded-xl', 'border', 'border-border');
   });
 
-  it('matches the card shape with correct layout classes', () => {
-    render(<PredictionCardSkeleton />);
-    
-    const skeleton = screen.getByTestId('prediction-card-skeleton');
-    expect(skeleton).toHaveClass('bg-card');
-    expect(skeleton).toHaveClass('p-4');
-    expect(skeleton).toHaveClass('rounded-xl');
-    expect(skeleton).toHaveClass('border');
-    expect(skeleton).toHaveClass('border-border');
-  });
-
-  it('contains animated skeleton bars', () => {
+  it('renders animated placeholders for all card sections', () => {
     render(<PredictionCardSkeleton />);
-    
-    // The Skeleton component uses animate-pulse class
-    const animatedElements = document.querySelectorAll('.animate-pulse');
-    expect(animatedElements.length).toBeGreaterThan(0);
-  });
 
-  it('renders skeleton placeholders for all card sections', () => {
-    render(<PredictionCardSkeleton />);
-    
-    const skeletonBars = document.querySelectorAll('.animate-pulse');
-    // Expected: title, badge, 2 description lines, 
-    // 2 per grid cell (label + value) * 4 cells = 8,
-    // 2 for resolved date row = 12 total
-    expect(skeletonBars.length).toBe(14);
+    expect(document.querySelectorAll('.animate-pulse')).toHaveLength(14);
   });
 });
 
-// --- PredictionCard Tests ---
-
 describe('PredictionCard', () => {
-  it('renders skeleton when prediction is undefined', () => {
+  it('renders skeleton when prediction is missing', () => {
     render(<PredictionCard />);
-    
-    const skeleton = screen.getByTestId('prediction-card-skeleton');
-    expect(skeleton).toBeInTheDocument();
-  });
 
-  it('renders skeleton when prediction is null', () => {
-    // @ts-expect-error - null is not assignable to Prediction | undefined; testing runtime guard
-    render(<PredictionCard prediction={null} />);
-    
-    const skeleton = screen.getByTestId('prediction-card-skeleton');
-    expect(skeleton).toBeInTheDocument();
+    expect(screen.getByTestId('prediction-card-skeleton')).toBeInTheDocument();
   });
 
   it('renders full card content when prediction is provided', () => {
     render(<PredictionCard prediction={mockPrediction} />);
-    
+
     expect(screen.getByText(mockPrediction.title)).toBeInTheDocument();
     expect(screen.getByText(mockPrediction.description)).toBeInTheDocument();
     expect(screen.getByText(/10 XLM/)).toBeInTheDocument();
     expect(screen.getByText(/1.8x/)).toBeInTheDocument();
     expect(screen.getByText(/18 XLM/)).toBeInTheDocument();
     expect(screen.getByText(mockPrediction.eventDate)).toBeInTheDocument();
+    expect(screen.getByText('Yes')).toBeInTheDocument();
   });
 
-  it('renders status badge with correct label', () => {
-    render(<PredictionCard prediction={mockPrediction} />);
-    
+  it('renders status and resolved metadata conditionally', () => {
+    const { rerender } = render(<PredictionCard prediction={mockPrediction} />);
+
     expect(screen.getByLabelText('Status: Active')).toBeInTheDocument();
-  });
+    expect(screen.queryByText('Resolved')).not.toBeInTheDocument();
 
-  it('renders resolved date when status is won', () => {
-    render(<PredictionCard prediction={mockResolvedPrediction} />);
-    
+    rerender(<PredictionCard prediction={mockResolvedPrediction} />);
+
+    expect(screen.getByLabelText('Status: Won')).toBeInTheDocument();
     expect(screen.getByText('Resolved')).toBeInTheDocument();
     expect(screen.getByText('01/06/2023')).toBeInTheDocument();
   });
 
-  it('does not render resolved date for pending predictions', () => {
-    const pendingPrediction: Prediction = { ...mockPrediction, status: 'pending' };
-    render(<PredictionCard prediction={pendingPrediction} />);
-    
-    expect(screen.queryByText('Resolved')).toBeNull();
-  });
+  it('adds ripple-ready touch feedback classes to the root card button', () => {
+    render(<PredictionCard prediction={mockPrediction} />);
 
-  it('does not crash with skeleton when prediction is undefined', () => {
-    const { container } = render(<PredictionCard />);
-    expect(container).toBeTruthy();
+    const card = screen.getByRole('button', { name: /NBA Finals/i });
+    expect(card).toHaveClass('touch-target', 'touch-ripple', 'relative', 'overflow-hidden');
   });
-});
-
-// --- PredictionsList Loading Tests ---
 
-import PredictionsList from '../PredictionsList';
+  it('keeps the odds trigger as a stable touch target', async () => {
+    const user = userEvent.setup();
+    render(<PredictionCard prediction={mockPrediction} />);
 
-describe('PredictionsList loading state', () => {
-  it('renders skeleton cards when isLoading is true', () => {
-    render(<PredictionsList isLoading={true} />);
-    
-    const skeletons = screen.getAllByTestId('prediction-card-skeleton');
-    expect(skeletons).toHaveLength(4); // default skeletonCount
-  });
+    const oddsTrigger = document.querySelector('[aria-controls="odds-breakdown"]') as HTMLElement;
+    expect(oddsTrigger).toHaveClass('touch-target');
+    expect(oddsTrigger).toHaveAttribute('aria-expanded', 'false');
 
-  it('renders custom number of skeleton cards', () => {
-    render(<PredictionsList isLoading={true} skeletonCount={6} />);
-    
-    const skeletons = screen.getAllByTestId('prediction-card-skeleton');
-    expect(skeletons).toHaveLength(6);
-  });
+    await user.click(oddsTrigger);
 
-  it('renders prediction cards when not loading', () => {
-    render(<PredictionsList isLoading={false} />);
-    
-    // Should find actual prediction titles from mock data
-    expect(screen.getByText('NBA Finals: Lakers vs Heat')).toBeInTheDocument();
+    expect(oddsTrigger).toHaveAttribute('aria-expanded', 'true');
   });
 
-  it('does not show skeletons when isLoading is false', () => {
-    render(<PredictionsList isLoading={false} />);
-    
-    const skeletons = screen.queryAllByTestId('prediction-card-skeleton');
-    expect(skeletons).toHaveLength(0);
-  });
+  it('does not nest button elements inside the card button', () => {
+    const { container } = render(<PredictionCard prediction={mockPrediction} />);
 
-  it('does not show empty state text when loading', () => {
-    render(<PredictionsList isLoading={true} />);
-    
-    expect(screen.queryByText(/No predictions found/)).toBeNull();
+    expect(container.querySelector('button button')).toBeNull();
   });
 });
 
-// --- Touch Target Tests (WCAG 2.5.5 / Apple HIG ≥44px) ---
+describe('PredictionCard touch ripple styles', () => {
+  const touchCss = readFileSync(path.join(process.cwd(), 'app/styles/touch.css'), 'utf8');
 
-describe('PredictionCard touch targets', () => {
-  it('outer card button has touch-target class', () => {
-    render(<PredictionCard prediction={mockPrediction} />);
-    // The root interactive element must carry the touch-target utility class
-    // which enforces min-height: 44px and min-width: 44px.
-    const card = screen.getByRole('button', { name: /NBA Finals/i });
-    expect(card).toHaveClass('touch-target');
+  it('implements the ripple with a pseudo-element triggered by active press state', () => {
+    expect(touchCss).toContain('.touch-ripple::after');
+    expect(touchCss).toContain('.touch-ripple:active::after');
+    expect(touchCss).toContain('radial-gradient');
   });
 
-  it('odds collapsible trigger has touch-target class', () => {
-    render(<PredictionCard prediction={mockPrediction} />);
-    // Query specifically by aria-controls to distinguish from the outer card button.
-    const oddsTrigger = document.querySelector('[aria-controls="odds-breakdown"]') as HTMLElement;
-    expect(oddsTrigger).toHaveClass('touch-target');
+  it('respects reduced-motion preferences', () => {
+    expect(touchCss).toContain('@media (prefers-reduced-motion: reduce)');
+    expect(touchCss).toContain('transition: none');
   });
+});
 
-  it('odds trigger uses aria-expanded to reflect collapsed state', () => {
-    render(<PredictionCard prediction={mockPrediction} />);
-    const oddsTrigger = document.querySelector('[aria-controls="odds-breakdown"]') as HTMLElement;
-    expect(oddsTrigger).toHaveAttribute('aria-expanded', 'false');
+describe('PredictionsList loading state', () => {
+  it('renders skeleton cards when loading', () => {
+    render(<PredictionsList isLoading />);
+
+    expect(screen.getAllByTestId('prediction-card-skeleton')).toHaveLength(4);
   });
 
-  it('odds trigger uses aria-expanded to reflect expanded state after click', async () => {
-    const user = userEvent.setup();
-    render(<PredictionCard prediction={mockPrediction} />);
-    const oddsTrigger = document.querySelector('[aria-controls="odds-breakdown"]') as HTMLElement;
-    await user.click(oddsTrigger);
-    expect(oddsTrigger).toHaveAttribute('aria-expanded', 'true');
+  it('renders prediction cards when not loading', () => {
+    render(<PredictionsList isLoading={false} />);
+
+    expect(screen.getByText('NBA Finals: Lakers vs Heat')).toBeInTheDocument();
+    expect(screen.queryAllByTestId('prediction-card-skeleton')).toHaveLength(0);
   });
 });
diff --git a/components/predictioncard b/components/predictioncard
deleted file mode 100644
index 1afe38d8..00000000
--- a/components/predictioncard
+++ /dev/null
@@ -1,129 +0,0 @@
-"use client";
-
-import React from "react";
-import Image from "next/image";
-import Link from "next/link";
-import { useDensity } from "@/hooks/useDensity";
-import { cn } from "@/lib/utils";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Progress } from "@/components/ui/progress";
-import { Badge } from "@/components/ui/badge";
-
-export interface PredictionCardProps {
-  id: string;
-  title: string;
-  description?: string;
-  category: { name: string; color?: string };
-  thumbnail?: string;
-  creator?: { name: string; avatar?: string };
-  startDate: Date;
-  endDate: Date;
-  totalStake: number;
-  participantCount: number;
-  progressPercent: number;
-  href: string;
-}
-
-export default function PredictionCard({
-  id,
-  title,
-  description,
-  category,
-  thumbnail,
-  creator,
-  startDate,
-  endDate,
-  totalStake,
-  participantCount,
-  progressPercent,
-  href,
-}: PredictionCardProps) {
-  const { tokens: t } = useDensity();
-
-  const timeRemaining = Math.max(0, endDate.getTime() - Date.now());
-  const isEnded = timeRemaining === 0;
-
-  return (
-    <Link
-      href={href}
-      className={cn(
-        "group block rounded-xl border border-border bg-card text-card-foreground",
-        "transition-shadow hover:shadow-md focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        t.cardPadding
-      )}
-      data-density
-    >
-      {thumbnail && (
-        <div className={cn("relative overflow-hidden rounded-lg mb-3", t.thumbnailHeight)}>
-          <Image
-            src={thumbnail}
-            alt={title}
-            fill
-            className="object-cover transition-transform group-hover:scale-105"
-            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-            loading="lazy"
-          />
-          <div className="absolute top-3 left-3">
-            <Badge
-              className={cn("bg-black/60 text-white backdrop-blur-sm hover:bg-black/60", t.chipPadding)}
-              style={{ backgroundColor: category.color }}
-            >
-              <span className={t.captionSize}>{category.name}</span>
-            </Badge>
-          </div>
-        </div>
-      )}
-
-      <div className={cn("flex flex-col", t.cardGap)}>
-        <h3 className={cn("font-semibold leading-tight line-clamp-2", t.titleSize)}>{title}</h3>
-
-        {description && t.showDescription && (
-          <p className={cn("text-muted-foreground line-clamp-2", t.bodySize)}>{description}</p>
-        )}
-
-        <div className={cn("flex items-center justify-between", t.showMetaRow ? "flex" : "hidden")}>
-          <div className="flex items-center gap-2">
-            {creator && (
-              <>
-                <Avatar className={t.avatarSize}>
-                  <AvatarImage src={creator.avatar} alt={creator.name} />
-                  <AvatarFallback className={t.captionSize}>
-                    {creator.name.slice(0, 2).toUpperCase()}
-                  </AvatarFallback>
-                </Avatar>
-                <span className={cn("text-muted-foreground", t.captionSize)}>{creator.name}</span>
-              </>
-            )}
-          </div>
-          <span className={cn("text-muted-foreground tabular-nums", t.captionSize)}>
-            {participantCount.toLocaleString()} participants
-          </span>
-        </div>
-
-        <div className={cn("flex items-center justify-between text-muted-foreground", t.captionSize)}>
-          <span>Ends {endDate.toLocaleDateString("en-US", { month: "short", day: "numeric" })}</span>
-          <span className="tabular-nums">{totalStake.toLocaleString()} XLM</span>
-        </div>
-
-        <div className="space-y-1">
-          <Progress value={progressPercent} className={t.progressHeight} aria-label="Prediction progress" />
-          <div className={cn("flex justify-between text-muted-foreground", t.captionSize)}>
-            <span>{progressPercent}% funded</span>
-            <span>{isEnded ? "Ended" : formatTimeRemaining(timeRemaining)}</span>
-          </div>
-        </div>
-      </div>
-    </Link>
-  );
-}
-
-function formatTimeRemaining(ms: number): string {
-  const seconds = Math.floor(ms / 1000);
-  const minutes = Math.floor(seconds / 60);
-  const hours = Math.floor(minutes / 60);
-  const days = Math.floor(hours / 24);
-  if (days > 0) return `${days}d left`;
-  if (hours > 0) return `${hours}h left`;
-  if (minutes > 0) return `${minutes}m left`;
-  return `${seconds}s left`;
-}
\ No newline at end of file
diff --git a/docs/touch-ripple.md b/docs/touch-ripple.md
new file mode 100644
index 00000000..4a18e0db
--- /dev/null
+++ b/docs/touch-ripple.md
@@ -0,0 +1,24 @@
+# Touch Ripple Feedback
+
+Prediction cards use the shared `touch-ripple` utility from `app/styles/touch.css`
+for tactile press feedback on mobile and pointer devices.
+
+## Usage
+
+Apply `touch-ripple` together with `touch-target`, `relative`, and
+`overflow-hidden` on the interactive card surface:
+
+```tsx
+<button className="touch-target touch-ripple relative overflow-hidden">
+  ...
+</button>
+```
+
+The utility renders the feedback through a `::after` pseudo-element, so no extra
+DOM nodes or ARIA-hidden decorative elements are needed.
+
+## Accessibility
+
+- The ripple animates only `opacity` and `transform`, avoiding layout shift.
+- `prefers-reduced-motion: reduce` disables the transform transition.
+- The card keeps the existing visible focus ring and 44 px minimum touch target.