diff --git a/CLAUDE.md b/CLAUDE.md
index 2b51254..783a84f 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,482 +1,64 @@
-# CLAUDE.md - CodeGuide Starter Kit Lite v2
+# Claude Code Task Management Guide
 
-This file contains essential context about the project structure, technologies, and conventions to help Claude understand and work effectively within this codebase.
+## Documentation Available
 
-## Project Overview
+📚 **Project Documentation**: Check the documentation files in this directory for project-specific setup instructions and guides.
+**Project Tasks**: Check the tasks directory in documentation/tasks for the list of tasks to be completed. Use the CLI commands below to interact with them.
 
-**CodeGuide Starter Kit Lite v2** is a modern Next.js starter template featuring authentication, database integration, AI capabilities, and a comprehensive UI component system.
+## MANDATORY Task Management Workflow
 
-### Core Technologies
-
-- **Framework**: Next.js 15 with App Router (`/src/app` directory structure)
-- **Language**: TypeScript with strict mode enabled
-- **Styling**: TailwindCSS v4 with CSS custom properties
-- **UI Components**: shadcn/ui (New York style) with Lucide icons
-- **Authentication**: Clerk with middleware protection
-- **Database**: Supabase with third-party auth integration
-- **AI Integration**: Vercel AI SDK with support for Anthropic Claude and OpenAI
-- **Theme System**: next-themes with dark mode support
-
-## Project Structure
-
-```
-src/
-├── app/                    # Next.js App Router
-│   ├── api/               # API routes
-│   │   └── chat/          # AI chat endpoint
-│   ├── globals.css        # Global styles with dark mode
-│   ├── layout.tsx         # Root layout with providers
-│   └── page.tsx           # Home page with status dashboard
-├── components/
-│   ├── ui/                # shadcn/ui components (40+ components)
-│   ├── chat.tsx           # AI chat interface
-│   ├── setup-guide.tsx    # Configuration guide
-│   ├── theme-provider.tsx # Theme context provider
-│   └── theme-toggle.tsx   # Dark mode toggle components
-├── lib/
-│   ├── utils.ts           # Utility functions (cn, etc.)
-│   ├── supabase.ts        # Supabase client configurations
-│   ├── user.ts            # User utilities using Clerk
-│   └── env-check.ts       # Environment validation
-└── middleware.ts          # Clerk authentication middleware
-```
-
-## Key Configuration Files
-
-- **package.json**: Dependencies and scripts
-- **components.json**: shadcn/ui configuration (New York style, neutral colors)
-- **tsconfig.json**: TypeScript configuration with path aliases (`@/`)
-- **.env.example**: Environment variables template
-- **SUPABASE_CLERK_SETUP.md**: Integration setup guide
-
-## Authentication & Database
-
-### Clerk Integration
-- Middleware protects `/dashboard(.*)` and `/profile(.*)` routes
-- Components: `SignInButton`, `SignedIn`, `SignedOut`, `UserButton`
-- User utilities in `src/lib/user.ts` use `currentUser()` from Clerk
-
-### Supabase Integration
-- **Client**: `createSupabaseServerClient()` for server-side with Clerk tokens  
-- **RLS**: Row Level Security uses `auth.jwt() ->> 'sub'` for Clerk user IDs
-- **Example Migration**: `supabase/migrations/001_example_tables_with_rls.sql`
-
-#### Supabase Client Usage Patterns
-
-**Server-side (Recommended for data fetching):**
-```typescript
-import { createSupabaseServerClient } from "@/lib/supabase"
-
-export async function getServerData() {
-  const supabase = await createSupabaseServerClient()
-  
-  const { data, error } = await supabase
-    .from('posts')
-    .select('*')
-    .order('created_at', { ascending: false })
-  
-  if (error) {
-    console.error('Database error:', error)
-    return null
-  }
-  
-  return data
-}
-```
-
-**Client-side (For interactive operations):**
-```typescript
-"use client"
-
-import { supabase } from "@/lib/supabase"
-import { useAuth } from "@clerk/nextjs"
-
-function ClientComponent() {
-  const { getToken } = useAuth()
-
-  const fetchData = async () => {
-    const token = await getToken()
-    
-    // Pass token manually for client-side operations
-    const { data, error } = await supabase
-      .from('posts')
-      .select('*')
-      .auth(token)
-    
-    return data
-  }
-}
-```
-
-## UI & Styling
-
-### TailwindCSS Setup
-- **Version**: TailwindCSS v4 with PostCSS
-- **Custom Properties**: CSS variables for theming
-- **Dark Mode**: Class-based with `next-themes`
-- **Animations**: `tw-animate-css` package included
-
-### shadcn/ui Components
-- **Style**: New York variant
-- **Theme**: Neutral base color with CSS variables
-- **Icons**: Lucide React
-- **Components Available**: 40+ UI components (Button, Card, Dialog, etc.)
-
-### Theme System
-- **Provider**: `ThemeProvider` in layout with system detection
-- **Toggle Components**: `ThemeToggle` (dropdown) and `SimpleThemeToggle` (button)
-- **Persistence**: Automatic theme persistence across sessions
-
-## AI Integration
-
-### Vercel AI SDK
-- **Endpoint**: `/api/chat/route.ts`
-- **Providers**: Anthropic Claude and OpenAI support
-- **Chat Component**: Real-time streaming chat interface
-- **Authentication**: Requires Clerk authentication
-
-## Development Conventions
-
-### File Organization
-- **Components**: Use PascalCase, place in appropriate directories
-- **Utilities**: Place reusable functions in `src/lib/`
-- **Types**: Define alongside components or in dedicated files
-- **API Routes**: Follow Next.js App Router conventions
-
-### Import Patterns
-```typescript
-// Path aliases (configured in tsconfig.json)
-import { Button } from "@/components/ui/button"
-import { getCurrentUser } from "@/lib/user"
-import { supabase } from "@/lib/supabase"
-
-// External libraries
-import { useTheme } from "next-themes"
-import { SignedIn, useAuth } from "@clerk/nextjs"
-```
-
-### Component Patterns
-```typescript
-// Client components (when using hooks/state)
-"use client"
-
-// Server components (default, for data fetching)
-export default async function ServerComponent() {
-  const user = await getCurrentUser()
-  // ...
-}
-```
-
-## Environment Variables
-
-Required for full functionality:
+🚨 **YOU MUST FOLLOW THIS EXACT WORKFLOW - NO EXCEPTIONS** 🚨
 
+### **STEP 1: DISCOVER TASKS (MANDATORY)**
+You MUST start by running this command to see all available tasks:
 ```bash
-# Clerk Authentication
-NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
-CLERK_SECRET_KEY=sk_test_...
-
-# Supabase Database
-NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
-NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
-
-# AI Integration (optional)
-OPENAI_API_KEY=sk-...
-ANTHROPIC_API_KEY=sk-ant-...
+task-manager list-tasks
 ```
 
-## Common Patterns
-
-### Row Level Security (RLS) Policies
-
-All database tables should use RLS policies that reference Clerk user IDs via `auth.jwt() ->> 'sub'`.
-
-**Basic User-Owned Data Pattern:**
-```sql
--- Enable RLS on table
-ALTER TABLE posts ENABLE ROW LEVEL SECURITY;
-
--- Users can read all posts (public)
-CREATE POLICY "Anyone can read posts" ON posts
-  FOR SELECT USING (true);
-
--- Users can only insert posts as themselves
-CREATE POLICY "Users can insert own posts" ON posts
-  FOR INSERT WITH CHECK (auth.jwt() ->> 'sub' = user_id);
-
--- Users can only update their own posts
-CREATE POLICY "Users can update own posts" ON posts
-  FOR UPDATE USING (auth.jwt() ->> 'sub' = user_id);
-
--- Users can only delete their own posts
-CREATE POLICY "Users can delete own posts" ON posts
-  FOR DELETE USING (auth.jwt() ->> 'sub' = user_id);
-```
-
-**Private Data Pattern:**
-```sql
--- Completely private to each user
-CREATE POLICY "Users can only access own data" ON private_notes
-  FOR ALL USING (auth.jwt() ->> 'sub' = user_id);
-```
-
-**Conditional Visibility Pattern:**
-```sql
--- Public profiles or own profile
-CREATE POLICY "Users can read public profiles or own profile" ON profiles
-  FOR SELECT USING (
-    is_public = true OR auth.jwt() ->> 'sub' = user_id
-  );
-```
-
-**Collaboration Pattern:**
-```sql
--- Owner and collaborators can access
-CREATE POLICY "Owners and collaborators can read" ON collaborations
-  FOR SELECT USING (
-    auth.jwt() ->> 'sub' = owner_id OR 
-    auth.jwt() ->> 'sub' = ANY(collaborators)
-  );
-```
-
-### Database Operations with Supabase
-
-**Complete CRUD Example:**
-```typescript
-import { createSupabaseServerClient } from "@/lib/supabase"
-import { getCurrentUser } from "@/lib/user"
-
-// CREATE - Insert new record
-export async function createPost(title: string, content: string) {
-  const user = await getCurrentUser()
-  if (!user) return null
-  
-  const supabase = await createSupabaseServerClient()
-  
-  const { data, error } = await supabase
-    .from('posts')
-    .insert({
-      title,
-      content,
-      user_id: user.id, // Clerk user ID
-    })
-    .select()
-    .single()
-  
-  if (error) {
-    console.error('Error creating post:', error)
-    return null
-  }
-  
-  return data
-}
-
-// READ - Fetch user's posts
-export async function getUserPosts() {
-  const supabase = await createSupabaseServerClient()
-  
-  const { data, error } = await supabase
-    .from('posts')
-    .select(`
-      id,
-      title,
-      content,
-      created_at,
-      user_id
-    `)
-    .order('created_at', { ascending: false })
-  
-  if (error) {
-    console.error('Error fetching posts:', error)
-    return []
-  }
-  
-  return data
-}
-
-// UPDATE - Modify existing record
-export async function updatePost(postId: string, updates: { title?: string; content?: string }) {
-  const supabase = await createSupabaseServerClient()
-  
-  const { data, error } = await supabase
-    .from('posts')
-    .update(updates)
-    .eq('id', postId)
-    .select()
-    .single()
-  
-  if (error) {
-    console.error('Error updating post:', error)
-    return null
-  }
-  
-  return data
-}
-
-// DELETE - Remove record
-export async function deletePost(postId: string) {
-  const supabase = await createSupabaseServerClient()
-  
-  const { error } = await supabase
-    .from('posts')
-    .delete()
-    .eq('id', postId)
-  
-  if (error) {
-    console.error('Error deleting post:', error)
-    return false
-  }
-  
-  return true
-}
-```
-
-**Real-time Subscriptions:**
-```typescript
-"use client"
-
-import { useEffect, useState } from "react"
-import { supabase } from "@/lib/supabase"
-import { useAuth } from "@clerk/nextjs"
-
-function useRealtimePosts() {
-  const [posts, setPosts] = useState([])
-  const { getToken } = useAuth()
-
-  useEffect(() => {
-    const fetchPosts = async () => {
-      const token = await getToken()
-      
-      const { data } = await supabase
-        .from('posts')
-        .select('*')
-        .auth(token)
-      
-      setPosts(data || [])
-    }
-
-    fetchPosts()
-
-    // Subscribe to changes
-    const subscription = supabase
-      .channel('posts-channel')
-      .on('postgres_changes', 
-        { event: '*', schema: 'public', table: 'posts' }, 
-        (payload) => {
-          fetchPosts() // Refetch on any change
-        }
-      )
-      .subscribe()
-
-    return () => {
-      subscription.unsubscribe()
-    }
-  }, [getToken])
-
-  return posts
-}
-```
-
-### Protected Routes
-Routes matching `/dashboard(.*)` and `/profile(.*)` are automatically protected by Clerk middleware.
-
-### Theme-Aware Components
-```typescript
-// Automatic dark mode support via CSS custom properties
-<div className="bg-background text-foreground border-border">
-  <Button variant="outline">Themed Button</Button>
-</div>
-```
-
-## Development Commands
-
-```bash
-npm run dev          # Start development server with Turbopack
-npm run build        # Build for production  
-npm run start        # Start production server
-npm run lint         # Run ESLint
-npm run type-check   # Run TypeScript type checking
-```
-
-## Code Quality & Verification
-
-Before committing changes or deploying, ensure code quality by running these checks:
-
-### Quick Verification (Recommended)
-```bash
-# Run both linting and type checking
-npm run lint && npm run type-check
-```
-
-### Individual Checks
-
-**ESLint (Code Quality & Style):**
+### **STEP 2: START EACH TASK (MANDATORY)**
+Before working on any task, you MUST mark it as started:
 ```bash
-npm run lint              # Check for linting errors
-npm run lint -- --fix    # Auto-fix linting issues where possible
+task-manager start-task <task_id>
 ```
 
-**TypeScript Type Checking:**
+### **STEP 3: COMPLETE OR CANCEL EACH TASK (MANDATORY)**
+After finishing implementation, you MUST mark the task as completed, or cancel if you cannot complete it:
 ```bash
-npm run type-check        # Verify TypeScript types without emitting files
+task-manager complete-task <task_id> "Brief description of what was implemented"
+# or
+task-manager cancel-task <task_id> "Reason for cancellation"
 ```
 
-**Production Build (Full Verification):**
-```bash
-npm run build            # Builds project and performs comprehensive type checking
-```
-
-### Pre-Deployment Checklist
-
-Run this complete verification before deploying:
-
-```bash
-# 1. Check code style and quality
-npm run lint
-
-# 2. Verify TypeScript types
-npm run type-check
-
-# 3. Ensure production build works
-npm run build
-
-# If all pass, your code is ready for deployment
-```
-
-### IDE Integration
-
-For the best development experience, ensure your editor has:
-- **ESLint extension** for real-time linting
-- **TypeScript support** for type checking
-- **TailwindCSS IntelliSense** for styling
+## Task Files Location
 
-### Common Issues & Fixes
+📁 **Task Data**: Your tasks are organized in the `documentation/tasks/` directory:
+- Task JSON files contain complete task information
+- Use ONLY the `task-manager` commands listed above
+- Follow the mandatory workflow sequence for each task
 
-**Linting Errors:**
-- Use `npm run lint -- --fix` to auto-fix formatting issues
-- Check for unused imports, variables, or incorrect patterns
-- Ensure consistent coding style
+## MANDATORY Task Workflow Sequence
 
-**Type Errors:**
-- Verify all imports have correct types
-- Check for missing type definitions
-- Ensure component props match their interfaces
-- Use proper typing for Clerk user objects and Supabase responses
+🔄 **For EACH individual task, you MUST follow this sequence:**
 
-## Best Practices
+1. 📋 **DISCOVER**: `task-manager list-tasks` (first time only)
+2. 🚀 **START**: `task-manager start-task <task_id>` (mark as in progress)
+3. 💻 **IMPLEMENT**: Do the actual coding/implementation work
+4. ✅ **COMPLETE**: `task-manager complete-task <task_id> "What was done"` (or cancel with `task-manager cancel-task <task_id> "Reason"`)
+5. 🔁 **REPEAT**: Go to next task (start from step 2)
 
-1. **Authentication**: Always check user state with Clerk hooks/utilities
-2. **Database**: Use RLS policies with Clerk user IDs for security
-3. **UI**: Leverage existing shadcn/ui components before creating custom ones
-4. **Styling**: Use TailwindCSS classes and CSS custom properties for theming
-5. **Types**: Maintain strong TypeScript typing throughout
-6. **Performance**: Use server components by default, client components only when needed
+## Task Status Options
 
-## Integration Notes
+- `pending` - Ready to work on
+- `in_progress` - Currently being worked on  
+- `completed` - Successfully finished
+- `blocked` - Cannot proceed (waiting for dependencies)
+- `cancelled` - No longer needed
 
-- **Clerk + Supabase**: Uses modern third-party auth (not deprecated JWT templates)
-- **AI Chat**: Requires authentication and environment variables
-- **Dark Mode**: Automatically applied to all shadcn components
-- **Mobile**: Responsive design with TailwindCSS breakpoints
+## CRITICAL WORKFLOW RULES
 
-This starter kit provides a solid foundation for building modern web applications with authentication, database integration, AI capabilities, and polished UI components.
\ No newline at end of file
+❌ **NEVER skip** the `task-manager start-task` command
+❌ **NEVER skip** the `task-manager complete-task` command  (use `task-manager cancel-task` if a task is not planned, not required, or you must stop it)
+❌ **NEVER work on multiple tasks simultaneously**
+✅ **ALWAYS complete one task fully before starting the next**
+✅ **ALWAYS provide completion details in the complete command**
+✅ **ALWAYS follow the exact 3-step sequence: list → start → complete (or cancel if not required)**
\ No newline at end of file
diff --git a/documentation/tasks/display-dummy-repo-data-on-home-screen_2025-08-11_12-00-12-988Z.json b/documentation/tasks/display-dummy-repo-data-on-home-screen_2025-08-11_12-00-12-988Z.json
new file mode 100644
index 0000000..f59274c
--- /dev/null
+++ b/documentation/tasks/display-dummy-repo-data-on-home-screen_2025-08-11_12-00-12-988Z.json
@@ -0,0 +1,50 @@
+[
+  {
+    "title": "Create dummy repository data structure and mock data",
+    "description": "Define TypeScript interfaces for repository data and create a comprehensive set of dummy repositories with realistic properties like name, description, language, stars, forks, and last updated date.",
+    "details": "Create a types file (e.g., `types/repository.ts`) with interfaces for Repository objects including properties like id, name, description, language, stars, forks, isPrivate, lastUpdated, and owner. Then create a data file (e.g., `data/dummy-repos.ts`) with an array of 8-12 realistic dummy repositories covering various programming languages and project types. Include popular languages like TypeScript, Python, JavaScript, Go, and Rust. Make the data diverse with different star counts, descriptions, and recent update dates to simulate a real developer's repository collection.",
+    "status": "pending",
+    "test_strategy": "Verify that all dummy data objects conform to the TypeScript interface. Test that the data exports correctly and can be imported in other components. Validate that all required fields are present and have appropriate data types.",
+    "priority": "high",
+    "ordinal": 0,
+    "task_group_id": "b19a7d28-fada-47c5-94ef-e3ddc20af15e",
+    "parent_task_id": null,
+    "ai_result": null,
+    "id": "432c8858-dfdf-4cca-af20-02c6ba923591",
+    "created_at": "2025-08-11T12:00:01.265095Z",
+    "user_id": "user_2qaB6nlVH3R9QXhQZpt1nmVDymN",
+    "subtasks": []
+  },
+  {
+    "title": "Build repository card component with shadcn/ui styling",
+    "description": "Create a reusable RepositoryCard component that displays individual repository information in an attractive card format using shadcn/ui components and proper responsive design.",
+    "details": "Create a `components/RepositoryCard.tsx` component that accepts a repository object as props. Use shadcn/ui Card component as the base, and include elements like repository name as a heading, description text, language badge with color coding, star and fork counts with icons from lucide-react, and last updated timestamp. Implement proper responsive design with Tailwind classes, ensure the component works in both light and dark themes using CSS custom properties, and add hover effects for better interactivity. Include proper TypeScript props interface and handle edge cases like missing descriptions or zero stars.",
+    "status": "pending",
+    "test_strategy": "Test component rendering with various repository data objects. Verify responsive behavior across different screen sizes. Test theme switching between light and dark modes. Validate that all icons and badges display correctly and that hover states work as expected.",
+    "priority": "medium",
+    "ordinal": 1,
+    "task_group_id": "b19a7d28-fada-47c5-94ef-e3ddc20af15e",
+    "parent_task_id": null,
+    "ai_result": null,
+    "id": "596cc4bc-9ed6-4d5e-b542-914c879e0d05",
+    "created_at": "2025-08-11T12:00:01.265105Z",
+    "user_id": "user_2qaB6nlVH3R9QXhQZpt1nmVDymN",
+    "subtasks": []
+  },
+  {
+    "title": "Integrate repository display into home page layout",
+    "description": "Modify the main home page to display the dummy repository data using the RepositoryCard component in a responsive grid layout that fits well with the existing design.",
+    "details": "Update the home page component (likely `app/page.tsx` or `app/(dashboard)/page.tsx`) to import and display the dummy repository data. Create a section with an appropriate heading like 'My Repositories' or 'Recent Projects'. Implement a responsive grid layout using Tailwind CSS grid classes (e.g., `grid-cols-1 md:grid-cols-2 lg:grid-cols-3`) to display the RepositoryCard components. Ensure proper spacing and alignment with the existing page layout, maintain consistency with the overall design theme, and add loading states or empty states as placeholders for future dynamic data integration. Consider adding a 'View All' link or pagination controls for future scalability.",
+    "status": "pending",
+    "test_strategy": "Test the home page renders correctly with all repository cards displayed. Verify responsive grid behavior across mobile, tablet, and desktop viewports. Ensure the new section integrates seamlessly with existing page content and navigation. Test theme consistency and that the layout doesn't break with different amounts of repository data.",
+    "priority": "medium",
+    "ordinal": 2,
+    "task_group_id": "b19a7d28-fada-47c5-94ef-e3ddc20af15e",
+    "parent_task_id": null,
+    "ai_result": null,
+    "id": "3ce03f6e-7879-4dab-b002-11b919be3a69",
+    "created_at": "2025-08-11T12:00:01.265109Z",
+    "user_id": "user_2qaB6nlVH3R9QXhQZpt1nmVDymN",
+    "subtasks": []
+  }
+]
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1fd205d..0eafba2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -23,6 +23,8 @@ import { useRouter } from "next/navigation";
 import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useFeaturedRepositories } from "@/hooks/use-featured-repositories";
+import { RepositoryCard } from "@/components/RepositoryCard";
+import { dummyRepositories } from "@/data/dummy-repos";
 
 export default function Home() {
   const [searchQuery, setSearchQuery] = useState('');
@@ -104,6 +106,31 @@ export default function Home() {
       </div>
 
       <main className="container mx-auto px-4 sm:px-6 pb-12 sm:pb-8 max-w-5xl">
+        {/* My Repositories Section */}
+        <div className="mb-16">
+          <div className="text-center mb-8">
+            <h2 className="text-2xl font-bold mb-2">My Repositories</h2>
+            <p className="text-muted-foreground">
+              A collection of repositories showcasing various technologies and projects
+            </p>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {dummyRepositories.slice(0, 6).map((repository) => (
+              <RepositoryCard key={repository.id} repository={repository} />
+            ))}
+          </div>
+
+          <div className="text-center mt-8">
+            <Link href="/dashboard">
+              <Button variant="outline" size="lg">
+                <GitBranch className="w-4 h-4 mr-2" />
+                View All Repositories
+              </Button>
+            </Link>
+          </div>
+        </div>
+
         {/* Featured Repositories - Moved to Top */}
         <div className="mb-16">
           <div className="text-center mb-8">
diff --git a/src/components/RepositoryCard.tsx b/src/components/RepositoryCard.tsx
new file mode 100644
index 0000000..dfb8570
--- /dev/null
+++ b/src/components/RepositoryCard.tsx
@@ -0,0 +1,90 @@
+'use client'
+
+import { Repository, LANGUAGE_COLORS } from '@/types/repository'
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Star, GitFork, Clock, Lock } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface RepositoryCardProps {
+  repository: Repository
+  className?: string
+}
+
+export function RepositoryCard({ repository, className }: RepositoryCardProps) {
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString)
+    const now = new Date()
+    const diffInHours = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60))
+    
+    if (diffInHours < 1) return 'Updated now'
+    if (diffInHours < 24) return `Updated ${diffInHours}h ago`
+    if (diffInHours < 168) return `Updated ${Math.floor(diffInHours / 24)}d ago`
+    return `Updated ${Math.floor(diffInHours / 168)}w ago`
+  }
+
+  const getLanguageColor = (language: string | null) => {
+    if (!language) return '#6b7280'
+    return LANGUAGE_COLORS[language] || '#6b7280'
+  }
+
+  return (
+    <Card 
+      className={cn(
+        'group cursor-pointer transition-all duration-200 hover:shadow-lg hover:scale-[1.02] h-full',
+        className
+      )}
+    >
+      <CardHeader>
+        <div className="flex items-start justify-between">
+          <div className="flex-1 min-w-0">
+            <CardTitle className="flex items-center gap-2 text-lg group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+              {repository.isPrivate && (
+                <Lock className="h-4 w-4 text-muted-foreground" />
+              )}
+              <span className="truncate">{repository.name}</span>
+            </CardTitle>
+            <CardDescription className="mt-2 line-clamp-2">
+              {repository.description || 'No description available'}
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        <div className="flex items-center gap-4 text-sm text-muted-foreground">
+          <div className="flex items-center gap-1">
+            <Star className="h-4 w-4" />
+            <span>{repository.stars.toLocaleString()}</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <GitFork className="h-4 w-4" />
+            <span>{repository.forks.toLocaleString()}</span>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between">
+          {repository.language && (
+            <Badge 
+              variant="outline" 
+              className="flex items-center gap-1"
+            >
+              <div 
+                className="w-3 h-3 rounded-full" 
+                style={{ backgroundColor: getLanguageColor(repository.language) }}
+              />
+              {repository.language}
+            </Badge>
+          )}
+        </div>
+      </CardContent>
+
+      <CardFooter className="pt-0">
+        <div className="flex items-center gap-1 text-xs text-muted-foreground">
+          <Clock className="h-3 w-3" />
+          <span>{formatDate(repository.lastUpdated)}</span>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
\ No newline at end of file
diff --git a/src/data/dummy-repos.ts b/src/data/dummy-repos.ts
new file mode 100644
index 0000000..f662ee9
--- /dev/null
+++ b/src/data/dummy-repos.ts
@@ -0,0 +1,154 @@
+import { Repository } from '@/types/repository'
+
+export const dummyRepositories: Repository[] = [
+  {
+    id: '1',
+    name: 'react-dashboard',
+    description: 'Modern React dashboard with TypeScript, shadcn/ui, and advanced data visualization',
+    language: 'TypeScript',
+    stars: 1247,
+    forks: 89,
+    isPrivate: false,
+    lastUpdated: '2025-08-10T14:30:00Z',
+    owner: {
+      name: 'john-dev',
+      avatar: 'https://avatars.githubusercontent.com/u/12345?v=4'
+    },
+    url: 'https://github.com/john-dev/react-dashboard'
+  },
+  {
+    id: '2',
+    name: 'ml-model-trainer',
+    description: 'Python-based machine learning pipeline for training and deploying models at scale',
+    language: 'Python',
+    stars: 892,
+    forks: 156,
+    isPrivate: false,
+    lastUpdated: '2025-08-09T09:15:00Z',
+    owner: {
+      name: 'ai-researcher',
+      avatar: 'https://avatars.githubusercontent.com/u/67890?v=4'
+    },
+    url: 'https://github.com/ai-researcher/ml-model-trainer'
+  },
+  {
+    id: '3',
+    name: 'go-microservice',
+    description: 'High-performance microservice built with Go, gRPC, and Docker for cloud deployment',
+    language: 'Go',
+    stars: 543,
+    forks: 67,
+    isPrivate: false,
+    lastUpdated: '2025-08-11T11:45:00Z',
+    owner: {
+      name: 'backend-guru',
+      avatar: 'https://avatars.githubusercontent.com/u/11111?v=4'
+    },
+    url: 'https://github.com/backend-guru/go-microservice'
+  },
+  {
+    id: '4',
+    name: 'rust-cli-tool',
+    description: 'Fast and reliable command-line tool written in Rust for file processing and automation',
+    language: 'Rust',
+    stars: 234,
+    forks: 28,
+    isPrivate: false,
+    lastUpdated: '2025-08-08T16:20:00Z',
+    owner: {
+      name: 'systems-dev',
+      avatar: 'https://avatars.githubusercontent.com/u/22222?v=4'
+    },
+    url: 'https://github.com/systems-dev/rust-cli-tool'
+  },
+  {
+    id: '5',
+    name: 'vue-component-library',
+    description: 'Comprehensive Vue.js component library with TypeScript support and extensive documentation',
+    language: 'Vue',
+    stars: 1891,
+    forks: 203,
+    isPrivate: false,
+    lastUpdated: '2025-08-07T13:10:00Z',
+    owner: {
+      name: 'frontend-team',
+      avatar: 'https://avatars.githubusercontent.com/u/33333?v=4'
+    },
+    url: 'https://github.com/frontend-team/vue-component-library'
+  },
+  {
+    id: '6',
+    name: 'mobile-expense-tracker',
+    description: 'Cross-platform mobile app for expense tracking built with React Native and Firebase',
+    language: 'JavaScript',
+    stars: 678,
+    forks: 94,
+    isPrivate: true,
+    lastUpdated: '2025-08-11T08:30:00Z',
+    owner: {
+      name: 'mobile-dev',
+      avatar: 'https://avatars.githubusercontent.com/u/44444?v=4'
+    },
+    url: 'https://github.com/mobile-dev/mobile-expense-tracker'
+  },
+  {
+    id: '7',
+    name: 'data-analytics-platform',
+    description: 'Enterprise-grade data analytics platform with real-time processing and visualization',
+    language: 'Python',
+    stars: 2156,
+    forks: 345,
+    isPrivate: false,
+    lastUpdated: '2025-08-10T19:45:00Z',
+    owner: {
+      name: 'data-team',
+      avatar: 'https://avatars.githubusercontent.com/u/55555?v=4'
+    },
+    url: 'https://github.com/data-team/data-analytics-platform'
+  },
+  {
+    id: '8',
+    name: 'kubernetes-operator',
+    description: 'Custom Kubernetes operator for managing stateful applications with automated scaling',
+    language: 'Go',
+    stars: 445,
+    forks: 52,
+    isPrivate: false,
+    lastUpdated: '2025-08-06T15:00:00Z',
+    owner: {
+      name: 'devops-expert',
+      avatar: 'https://avatars.githubusercontent.com/u/66666?v=4'
+    },
+    url: 'https://github.com/devops-expert/kubernetes-operator'
+  },
+  {
+    id: '9',
+    name: 'e-commerce-api',
+    description: 'RESTful API for e-commerce platform with authentication, payments, and inventory management',
+    language: 'TypeScript',
+    stars: 789,
+    forks: 123,
+    isPrivate: true,
+    lastUpdated: '2025-08-09T12:15:00Z',
+    owner: {
+      name: 'fullstack-dev',
+      avatar: 'https://avatars.githubusercontent.com/u/77777?v=4'
+    },
+    url: 'https://github.com/fullstack-dev/e-commerce-api'
+  },
+  {
+    id: '10',
+    name: 'blockchain-wallet',
+    description: 'Secure cryptocurrency wallet with multi-chain support and hardware wallet integration',
+    language: 'Rust',
+    stars: 1123,
+    forks: 178,
+    isPrivate: false,
+    lastUpdated: '2025-08-11T07:20:00Z',
+    owner: {
+      name: 'crypto-dev',
+      avatar: 'https://avatars.githubusercontent.com/u/88888?v=4'
+    },
+    url: 'https://github.com/crypto-dev/blockchain-wallet'
+  }
+]
\ No newline at end of file
diff --git a/src/types/repository.ts b/src/types/repository.ts
new file mode 100644
index 0000000..3a12afb
--- /dev/null
+++ b/src/types/repository.ts
@@ -0,0 +1,44 @@
+export interface Repository {
+  id: string
+  name: string
+  description: string | null
+  language: string | null
+  stars: number
+  forks: number
+  isPrivate: boolean
+  lastUpdated: string
+  owner: {
+    name: string
+    avatar: string
+  }
+  url: string
+}
+
+export interface RepositoryOwner {
+  name: string
+  avatar: string
+}
+
+// Language color mapping for display purposes
+export const LANGUAGE_COLORS: Record<string, string> = {
+  TypeScript: '#3178c6',
+  JavaScript: '#f1e05a',
+  Python: '#3572A5',
+  Go: '#00ADD8',
+  Rust: '#dea584',
+  Java: '#b07219',
+  'C++': '#f34b7d',
+  C: '#555555',
+  HTML: '#e34c26',
+  CSS: '#563d7c',
+  Vue: '#4FC08D',
+  React: '#61dafb',
+  Svelte: '#ff3e00',
+  PHP: '#4F5D95',
+  Ruby: '#701516',
+  Swift: '#fa7343',
+  Kotlin: '#A97BFF',
+  Dart: '#00B4AB',
+  Shell: '#89e051',
+  Dockerfile: '#384d54',
+}
\ No newline at end of file