Release v2.22.0

### Added
- Comprehensive mobile and responsive design support across the entire application
- New drawer UI component for enhanced mobile navigation
- Mobile-specific layouts for major components
- Mobile screenshots in documentation

### Improved
- Enhanced mobile user experience with optimized layouts
- Updated organization list cards with better mobile responsiveness
- Better touch interaction support throughout the application

### Fixed
- Type definition issues resolved
- Removed unnecessary console.log statements

### Documentation
- Updated README with mobile usage instructions and screenshots
- Added mobile-specific documentation sections

.claude/commands/new_release.md

@@ -2,3 +2,4 @@ Evaluate all the updates being made.
 Update CHANGELOG.md
 Use the chnages in the git log to determine if its a major, minor or a patch release.
 Update the package.json first before you push the tag.
+Never mention Claude Code in the release notes or in commit messages.

.claude/commands/release_notes.md

@@ -0,0 +1,3 @@
+Generate release notes for the latest release.
+Use a temp md file to write the release notes.
+Do not check that file into git.

.env.example

@@ -37,3 +37,10 @@ JWT_SECRET=change-this-to-a-secure-random-string-in-production
 # Users can configure cleanup settings through the web interface
 # CLEANUP_ENABLED=false
 # CLEANUP_RETENTION_DAYS=7
+
+# Optional TLS/SSL Configuration
+# Option 1: Mount custom CA certificates in ./certs directory as .crt files
+#          The container will automatically combine them into a CA bundle
+# Option 2: Mount your system CA bundle at /etc/ssl/certs/ca-certificates.crt
+#          See docker-compose.yml for volume mount examples
+# GITEA_SKIP_TLS_VERIFY=false  # WARNING: Only use for testing, disables TLS verification

.gitignore

@@ -25,3 +25,9 @@ data/gitea-mirror.db
 
 # jetbrains setting folder
 .idea/
+
+# Custom CA certificates (exclude actual certs but keep README)
+certs/*.crt
+certs/*.pem
+certs/*.cer
+!certs/README.md

CHANGELOG.md

@@ -7,6 +7,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.22.0] - 2025-07-07
+
+### Added
+- Comprehensive mobile and responsive design support across the entire application
+- New drawer UI component for enhanced mobile navigation
+- Mobile-specific layouts for major components (ActivityLog, Header, Organization, Repository)
+- Mobile screenshots in documentation showcasing responsive design
+
+### Improved
+- Enhanced mobile user experience with optimized layouts for smaller screens
+- Updated organization list cards with better mobile responsiveness
+- Better touch interaction support throughout the application
+
+### Fixed
+- Type definition issues resolved
+- Removed unnecessary console.log statements
+
+### Documentation
+- Updated README with mobile usage instructions and screenshots
+- Added mobile-specific documentation sections
+
+## [2.20.1] - 2025-07-07
+
+### Fixed
+- Fixed mixed mode organization strategy not persisting after page refresh
+  - Added missing "mixed" case handler in GiteaConfigForm component
+  - Enhanced getMirrorStrategy function to properly detect mixed mode configuration
+- Updated dependencies to latest versions
+
 ## [2.20.0] - 2025-07-07
 
 ### Changed

CLAUDE.md

@@ -125,4 +125,7 @@ export async function POST({ request }: APIContext) {
 2. Run `bun run init-db` to recreate database
 3. Update related queries in `/src/lib/db/queries/`
 
+## Security Guidelines
 
+- **Confidentiality Guidelines**:
+  - Dont ever say Claude Code or generated with AI anyhwere.

Dockerfile

@@ -2,7 +2,7 @@
 
 FROM oven/bun:1.2.18-alpine AS base
 WORKDIR /app
-RUN apk add --no-cache libc6-compat python3 make g++ gcc wget sqlite openssl
+RUN apk add --no-cache libc6-compat python3 make g++ gcc wget sqlite openssl ca-certificates
 
 # ----------------------------
 FROM base AS deps
@@ -37,11 +37,14 @@ ENV HOST=0.0.0.0
 ENV PORT=4321
 ENV DATABASE_URL=file:data/gitea-mirror.db
 
-RUN chmod +x ./docker-entrypoint.sh && \
+# Create directories and setup permissions
+RUN mkdir -p /app/certs && \
+    chmod +x ./docker-entrypoint.sh && \
     mkdir -p /app/data && \
     addgroup --system --gid 1001 nodejs && \
     adduser --system --uid 1001 gitea-mirror && \
-    chown -R gitea-mirror:nodejs /app/data
+    chown -R gitea-mirror:nodejs /app/data && \
+    chown -R gitea-mirror:nodejs /app/certs
 
 USER gitea-mirror
 

README.md

@@ -1,7 +1,7 @@
 <p align="center">
   <img src=".github/assets/logo-no-bg.png" alt="Gitea Mirror Logo" width="120" />
   <h1>Gitea Mirror</h1>
-  <p><i>A modern web app for automatically mirroring repositories from GitHub to your self-hosted Gitea.</i></p>
+  <p><i>Automatically mirror repositories from GitHub to your self-hosted Gitea instance.</i></p>
   <p align="center">
     <a href="https://github.com/RayLabsHQ/gitea-mirror/releases/latest"><img src="https://img.shields.io/github/v/tag/RayLabsHQ/gitea-mirror?label=release" alt="release"/></a>
     <a href="https://github.com/RayLabsHQ/gitea-mirror/actions/workflows/astro-build-test.yml"><img src="https://img.shields.io/github/actions/workflow/status/RayLabsHQ/gitea-mirror/astro-build-test.yml?branch=main" alt="build"/></a>
@@ -10,638 +10,201 @@
   </p>
 </p>
 
-> [!IMPORTANT]
-> **Repository Migration Notice**: Starting from version 2.20, this project has moved from `arunavo4/gitea-mirror` to `RayLabsHQ/gitea-mirror`. Please update your Docker images and Git remotes to use the new location:
-> ```bash
-> # Docker
-> docker pull ghcr.io/raylabshq/gitea-mirror:latest
-> 
-> # Git remote
-> git remote set-url origin https://github.com/RayLabsHQ/gitea-mirror.git
-> ```
-
 ## 🚀 Quick Start
 
 ```bash
-# Using Docker (recommended)
-docker compose up -d
+# Fastest way - using the simplified Docker setup
+docker compose -f docker-compose.alt.yml up -d
 
-# Using Bun
-bun run setup && bun run dev
+# Access at http://localhost:4321
+```
 
-# Using LXC Containers
-# For Proxmox VE (online) - Community script by Tobias ([CrazyWolf13](https://github.com/CrazyWolf13))
-bash -c "$(curl -fsSL https://raw.githubusercontent.com/community-scripts/ProxmoxVE/main/ct/gitea-mirror.sh)"
-
-# For local testing (offline-friendly)
-sudo LOCAL_REPO_DIR=~/Development/gitea-mirror ./scripts/gitea-mirror-lxc-local.sh
-````
-
-See the [LXC Container Deployment Guide](scripts/README-lxc.md).
+First user signup becomes admin. Configure GitHub and Gitea through the web interface!
 
 <p align="center">
-  <img src=".github/assets/dashboard.png" alt="Dashboard" width="full"/>
+  <img src=".github/assets/dashboard.png" alt="Dashboard" width="600" />
+  <img src=".github/assets/dashboard_mobile.png" alt="Dashboard Mobile" width="200" />
 </p>
 
 ## ✨ Features
 
-- 🔁 Sync public, private, or starred GitHub repos to Gitea
-- 🏢 Mirror entire organizations with flexible organization strategies
-- 🎯 Custom destination control for both organizations and individual repositories
-- 🐞 Optional mirroring of issues and labels
-- 🌟 Mirror your starred repositories to a dedicated organization
-- 🕹️ Modern user interface with toast notifications and smooth experience
-- 🧠 Smart filtering and job queue with detailed logs
-- 🛠️ Works with personal access tokens (GitHub + Gitea)
-- 🔒 First-time user signup experience with secure authentication
-- 🐳 Fully Dockerized + can be self-hosted in minutes
-- 📊 Dashboard with real-time status updates
+- 🔁 Mirror public, private, and starred GitHub repos to Gitea
+- 🏢 Mirror entire organizations with flexible strategies
+- 🎯 Custom destination control for repos and organizations
+- 🔐 Secure authentication with JWT tokens
+- 📊 Real-time dashboard with activity logs
 - ⏱️ Scheduled automatic mirroring
+- 🐳 Dockerized with multi-arch support (AMD64/ARM64)
 
 ## 📸 Screenshots
 
-<p align="center">
-  <img src=".github/assets/repositories.png" width="49%"/>
-  <img src=".github/assets/organisations.png" width="49%"/>
-</p>
-<p align="center">
-  <img src=".github/assets/configuration.png" width="49%"/>
-  <img src=".github/assets/activity.png" width="49%"/>
-</p>
+<div align="center">
+  <img src=".github/assets/repositories.png" alt="Repositories" width="600" />
+  <img src=".github/assets/repositories_mobile.png" alt="Rrepositories Mobile" width="200" />
+</div>
 
-### Dashboard
-The dashboard provides an overview of your mirroring status, including total repositories, successfully mirrored repositories, and recent activity.
+<div align="center">
+  <img src=".github/assets/organisation.png" alt="Organisations" width="600" />
+  <img src=".github/assets/organisation_mobile.png" alt="Organisations Mobile" width="200" />
+</div>
 
-### Repository Management
-Manage all your repositories in one place. Filter by status, search by name, and trigger manual mirroring operations.
+## Installation
 
-### Configuration
-Easily configure your GitHub and Gitea connections, set up automatic mirroring schedules, and manage organization mirroring.
+### Docker (Recommended)
 
-## Getting Started
+We provide two Docker Compose options:
 
-See the [Quick Start Guide](src/content/docs/quickstart.md) for detailed instructions on getting up and running quickly.
-
-### Prerequisites
-
-- Bun 1.2.9 or later
-- A GitHub account with a personal access token
-- A Gitea instance with an access token
-
-
-#### Database
-
-The database (`data/gitea-mirror.db`) is created when the application first runs. It starts empty and is populated as you configure and use the application.
-
-
-> [!NOTE]
-> On first launch, you'll be guided through creating an admin account with your chosen credentials.
-
-#### Production Database
-
-The production database (`data/gitea-mirror.db`) is created when the application runs in production mode. It starts empty and is populated as you configure and use the application.
-
-
-> [!IMPORTANT]
-> The production database file is excluded from the Git repository as it may contain sensitive information like GitHub and Gitea tokens. **Never commit this file to the repository.**
-
-##### Database Initialization
-
-Before running the application in production mode for the first time, you need to initialize the database:
+#### Option 1: Quick Start (docker-compose.alt.yml)
+Perfect for trying out Gitea Mirror or simple deployments:
 
 ```bash
-# Initialize the database for production mode
-bun run setup
-```
-
-This will create the necessary tables. On first launch, you'll be guided through creating your admin account with a secure password.
-
-### Installation
-
-#### Using Docker (Recommended)
-
-Gitea Mirror provides multi-architecture Docker images that work on both ARM64 (e.g., Apple Silicon, Raspberry Pi) and x86_64 (Intel/AMD) platforms.
-
-##### Using Docker Compose (Recommended)
-
-```bash
-# Start the application using Docker Compose
-docker compose up -d
-
-# For development mode (requires configuration)
-# Ensure you have run bun run setup first
-docker compose -f docker-compose.dev.yml up -d
-```
-
-
-> [!IMPORTANT]
-> **Docker Compose is the recommended method for running Gitea Mirror** as it provides a consistent environment with proper volume management for the SQLite database.
-
-
-> [!NOTE]
-> The examples above use the modern `docker compose` syntax (without hyphen) which is the recommended approach for Docker Compose V2. If you're using an older version of Docker Compose (V1), you may need to use `docker-compose` (with hyphen) instead.
-
-##### Using Pre-built Images from GitHub Container Registry
-
-If you want to run the container directly without Docker Compose:
-
-```bash
-# Pull the latest multi-architecture image
-docker pull ghcr.io/RayLabsHQ/gitea-mirror:latest
-
-# Run the application with a volume for persistent data
-docker run -d -p 4321:4321 \
-  -v gitea-mirror-data:/app/data \
-  ghcr.io/RayLabsHQ/gitea-mirror:latest
-```
-
-##### Building Docker Images Manually
-
-The project includes a build script to create and manage multi-architecture Docker images:
-
-```bash
-# Copy example environment file if you don't have one
-cp .env.example .env
-
-# Edit .env file with your preferred settings
-# DOCKER_REGISTRY, DOCKER_IMAGE, DOCKER_TAG, etc.
-
-# Build and load into local Docker
-./scripts/build-docker.sh --load
-
-# OR: Build and push to a registry (requires authentication)
-./scripts/build-docker.sh --push
-
-# Then run with Docker Compose
-docker compose up -d
-```
-
-See [Docker build documentation](./scripts/README-docker.md) for more details.
-
-##### Using LXC Containers (Proxmox VE)
-
-For Proxmox VE users, Gitea Mirror can be deployed using the community-maintained script:
-
-```bash
-# One-command installation on Proxmox VE
-bash -c "$(curl -fsSL https://raw.githubusercontent.com/community-scripts/ProxmoxVE/main/ct/gitea-mirror.sh)"
-```
-
-This community script:
-- Creates a privileged Alpine Linux LXC container
-- Installs Bun runtime environment
-- Clones and builds Gitea Mirror
-- Configures a systemd service for automatic startup
-- Sets up the application to run on port 4321
-
-> [!NOTE]
-> The script is maintained by the [Community Scripts for Proxmox VE](https://community-scripts.github.io/ProxmoxVE/) project.
-> For more information, visit the [Gitea Mirror script documentation](https://community-scripts.github.io/ProxmoxVE/scripts?id=gitea-mirror).
-
-After installation, access Gitea Mirror at `http://<container-ip>:4321`
-
-The application includes a health check endpoint at `/api/health` for monitoring.
-
-See the [LXC Container Deployment Guide](scripts/README-lxc.md) for detailed instructions.
-
-##### Building Your Own Image
-
-For manual Docker builds (without the helper script):
-
-```bash
-# Build the Docker image for your current architecture
-docker build -t gitea-mirror:latest .
-
-# Build multi-architecture images (requires Docker Buildx)
-docker buildx create --name multiarch --driver docker-container --use
-docker buildx build --platform linux/amd64,linux/arm64 -t gitea-mirror:latest --load .
-
-# If you encounter issues with Buildx, you can try these workarounds:
-# 1. Retry with network settings
-docker buildx build --platform linux/amd64,linux/arm64 -t gitea-mirror:latest --network=host --load .
-
-# 2. Build one platform at a time if you're having resource issues
-docker buildx build --platform linux/amd64 -t gitea-mirror:amd64 --load .
-docker buildx build --platform linux/arm64 -t gitea-mirror:arm64 --load .
-
-# Create a named volume for database persistence
-docker volume create gitea-mirror-data
-```
-
-##### Environment Variables
-
-The Docker container can be configured with the following environment variables:
-
-- `DATABASE_URL`: SQLite database URL (default: `file:data/gitea-mirror.db`)
-- `HOST`: Host to bind to (default: `0.0.0.0`)
-- `PORT`: Port to listen on (default: `4321`)
-- `JWT_SECRET`: Secret key for JWT token generation (auto-generated if not provided)
-
-> [!TIP]
-> For security, Gitea Mirror will automatically generate a secure random JWT secret on first run if one isn't provided or if the default value is used. This generated secret is stored in the data directory for persistence across container restarts.
-
-#### Manual Installation
-
-```bash
-# Clone the repository
+# Clone repository
 git clone https://github.com/RayLabsHQ/gitea-mirror.git
 cd gitea-mirror
 
-# Quick setup (installs dependencies and initializes the database)
-bun run setup
+# Start with simplified setup
+docker compose -f docker-compose.alt.yml up -d
 
-# Development Mode Options
-
-# Run in development mode
-bun run dev
-
-# Run in development mode with clean database (removes existing DB first)
-bun run dev:clean
-
-# Production Mode Options
-
-# Build the application
-bun run build
-
-# Preview the production build
-bun run preview
-
-# Start the production server (default)
-bun run start
-
-# Start the production server with a clean setup
-bun run start:fresh
-
-# Database Management
-
-# Initialize the database
-bun run init-db
-
-# Reset users for testing first-time signup
-bun run reset-users
-
-# Check database status
-bun run check-db
+# Access at http://localhost:4321
 ```
 
-##### Database Permissions for Direct Installation
+**Features:**
+- ✅ Pre-built image - no building required
+- ✅ Minimal configuration needed
+- ✅ Data stored in `./data` directory
+- ✅ Configure everything through web UI
+- ✅ Automatic user/group ID mapping
 
-> [!IMPORTANT]
-> **If you're running the application directly** (not using Docker), you may encounter SQLite permission errors. This is because SQLite requires both read/write access to the database file and write access to the directory containing the database.
+**Best for:**
+- First-time users
+- Testing and evaluation
+- Simple deployments
+- When you prefer web-based configuration
 
-**Common Error:**
-```
-Error: [ERROR] SQLiteError: attempt to write a readonly database
-```
+#### Option 2: Full Setup (docker-compose.yml)
+For production deployments with environment-based configuration:
 
-**Solution:**
 ```bash
-# Ensure the data directory exists and has proper permissions
-mkdir -p data
-chmod 755 data
-
-# If the database file already exists, ensure it's writable
-chmod 644 data/gitea-mirror.db
-
-# Make sure the user running the application owns the data directory
-chown -R $(whoami) data/
+# Start with full configuration options
+docker compose up -d
 ```
 
-**Why Docker doesn't have this issue:**
-- Docker containers run with a dedicated user (`gitea-mirror`) that owns the `/app/data` directory
-- The container setup ensures proper permissions are set during image build
-- Volume mounts are handled by Docker with appropriate permissions
+**Features:**
+- ✅ Build from source or use pre-built image
+- ✅ Complete environment variable configuration
+- ✅ Support for custom CA certificates
+- ✅ Advanced mirror settings (forks, wiki, issues)
+- ✅ Multi-registry support
 
-**Recommended approach:** Use Docker or Docker Compose for deployment to avoid permission issues entirely.
+**Best for:**
+- Production deployments
+- Automated/scripted setups
+- Advanced mirror configurations
+- When using self-signed certificates
 
-### Configuration
+#### Using Pre-built Image Directly
 
-Gitea Mirror can be configured through environment variables or through the web UI. See the [Configuration Guide](src/content/docs/configuration.md) for more details.
+```bash
+docker pull ghcr.io/raylabshq/gitea-mirror:v2.20.1
+```
 
-Key configuration options include:
+### Configuration Options
 
-- GitHub connection settings (username, token, repository filters)
-- Gitea connection settings (URL, token, organization)
-- Mirroring options (issues, starred repositories, organizations)
-- Scheduling options for automatic mirroring
+#### Quick Start Configuration (docker-compose.alt.yml)
 
-> [!IMPORTANT]
-> **SQLite is the only database required for Gitea Mirror**, handling both data storage and real-time event notifications.
+Minimal `.env` file (optional - has sensible defaults):
 
-### Mirror Strategies & Destination Customization
+```bash
+# Custom port (default: 4321)
+PORT=4321
 
-Gitea Mirror offers three flexible strategies for organizing your repositories in Gitea, with fine-grained control over destinations:
+# User/Group IDs for file permissions (default: 1000)
+PUID=1000
+PGID=1000
 
-#### 1. **Preserve GitHub Structure** (Default)
-- Personal repositories → Your Gitea username (or custom organization)
-- Organization repositories → Same organization name in Gitea (with individual overrides)
-- Maintains the exact structure from GitHub with optional customization
+# JWT secret (auto-generated if not set)
+JWT_SECRET=your-secret-key-change-this-in-production
+```
 
-#### 2. **Single Organization**
-- All repositories → One designated organization
-- Simplifies management by consolidating everything
-- Requires specifying a destination organization name
+All other settings are configured through the web interface after starting.
 
-#### 3. **Flat User Structure**
-- All repositories → Your Gitea user account
-- No organizations needed
-- Simplest approach for personal use
+#### Full Setup Configuration (docker-compose.yml)
 
-#### Destination Customization
+Supports extensive environment variables for automated deployment. See the full [docker-compose.yml](docker-compose.yml) for all available options including GitHub tokens, Gitea URLs, mirror settings, and more.
 
-**Organization-Level Overrides:**
-- Click the edit button on any organization card to set a custom destination
-- All repositories from that GitHub organization will be mirrored to your specified Gitea organization
-- Visual indicators show when custom destinations are active
+### LXC Container (Proxmox)
 
-**Repository-Level Overrides:**
-- Fine-tune individual repository destinations in the repository table
-- Click the edit button in the "Destination" column to customize where a specific repo is mirrored
-- Overrides organization-level settings for maximum flexibility
-- Starred repositories display a ⭐ icon and always go to the configured starred repos organization
+```bash
+# One-line install on Proxmox VE
+bash -c "$(curl -fsSL https://raw.githubusercontent.com/community-scripts/ProxmoxVE/main/ct/gitea-mirror.sh)"
+```
 
-**Priority Hierarchy:**
-1. Starred repositories → Always go to `starredReposOrg` (not editable)
-2. Repository-level custom destination (highest priority for non-starred)
-3. Organization-level custom destination
-4. Personal repos override (for non-organization repos)
-5. Default strategy rules (lowest priority)
+See the [Proxmox VE Community Scripts](https://community-scripts.github.io/ProxmoxVE/scripts?id=gitea-mirror) for more details.
 
-> [!NOTE]
-> **Starred Repositories**: Repositories you've starred on GitHub are automatically organized into a separate organization (default: "starred") and cannot have custom destinations. They're marked with a ⭐ icon for easy identification.
+### Manual Installation
 
-> [!TIP]
-> **Example Use Cases**: 
-> - Mirror personal repos to `personal-archive` organization
-> - Redirect `work-org` repos to `company-mirror` in Gitea
-> - Override a single important repo to go to a special organization
-> - Keep `company-org` repos in their own `company-org` organization
-> - Override `community-scripts` to go to `community-mirrors` organization
-> - This gives you complete control while maintaining GitHub's structure as the default
+```bash
+# Install Bun
+curl -fsSL https://bun.sh/install | bash
 
-## 🚀 Development
+# Setup and run
+bun run setup
+bun run dev
+```
 
-### Local Development Setup
+## Usage
+
+1. **First Time Setup**
+   - Navigate to http://localhost:4321
+   - Create admin account (first user signup)
+   - Configure GitHub and Gitea connections
+
+2. **Mirror Strategies**
+   - **Preserve Structure**: Maintains GitHub organization structure
+   - **Single Organization**: All repos go to one Gitea organization
+   - **Flat User**: All repos under your Gitea user account
+   - **Mixed Mode**: Personal repos in one org, organization repos preserve structure
+
+3. **Customization**
+   - Click edit buttons on organization cards to set custom destinations
+   - Override individual repository destinations in the table view
+   - Starred repositories automatically go to a dedicated organization
+
+## Development
 
 ```bash
 # Install dependencies
-bun run setup
+bun install
 
-# Start the development server
+# Run development server
 bun run dev
+
+# Run tests
+bun test
+
+# Build for production
+bun run build
 ```
 
-
-### Setting Up a Local Gitea Instance for Testing
-
-For full end-to-end testing, you can set up a local Gitea instance using Docker:
-
-```bash
-# Create a Docker network for Gitea and Gitea Mirror to communicate
-# Using the --label flag ensures proper Docker Compose compatibility
-docker network create --label com.docker.compose.network=gitea-network gitea-network
-
-# Create volumes for Gitea data persistence
-docker volume create gitea-data
-docker volume create gitea-config
-
-# Run Gitea container
-docker run -d \
-  --name gitea \
-  --network gitea-network \
-  -p 3001:3000 \
-  -p 2222:22 \
-  -v gitea-data:/data \
-  -v gitea-config:/etc/gitea \
-  -e USER_UID=1000 \
-  -e USER_GID=1000 \
-  -e GITEA__database__DB_TYPE=sqlite3 \
-  -e GITEA__database__PATH=/data/gitea/gitea.db \
-  -e GITEA__server__DOMAIN=localhost \
-  -e GITEA__server__ROOT_URL=http://localhost:3001/ \
-  -e GITEA__server__SSH_DOMAIN=localhost \
-  -e GITEA__server__SSH_PORT=2222 \
-  -e GITEA__server__START_SSH_SERVER=true \
-  -e GITEA__security__INSTALL_LOCK=false \
-  -e GITEA__service__DISABLE_REGISTRATION=false \
-  gitea/gitea:latest
-```
-
-
-> [!TIP]
-> After Gitea is running:
-> 1. Access Gitea at http://localhost:3001/
-> 2. Register a new user
-> 3. Create a personal access token in Gitea (Settings > Applications > Generate New Token)
-> 4. Run Gitea Mirror with the local Gitea configuration:
-
-```bash
-# Run Gitea Mirror connected to the local Gitea instance
-docker run -d \
-  --name gitea-mirror-dev \
-  --network gitea-network \
-  -p 4321:4321 \
-  -v gitea-mirror-data:/app/data \
-  -e NODE_ENV=development \
-  -e JWT_SECRET=dev-secret-key \
-  -e GITHUB_TOKEN=your-github-token \
-  -e GITHUB_USERNAME=your-github-username \
-  -e GITEA_URL=http://gitea:3000 \
-  -e GITEA_TOKEN=your-local-gitea-token \
-  -e GITEA_USERNAME=your-local-gitea-username \
-  RayLabsHQ/gitea-mirror:latest
-```
-
-> [!NOTE]
-> This setup allows you to test the full mirroring functionality with a local Gitea instance.
-
-### Using Docker Compose for Development
-
-
-For convenience, a dedicated development docker-compose file is provided that sets up both Gitea Mirror and a local Gitea instance:
-
-```bash
-# Start with development environment and local Gitea instance
-docker compose -f docker-compose.dev.yml up -d
-```
-
-
-> [!TIP]
-> You can also create a `.env` file with your GitHub and Gitea credentials:
->
-> ```env
-> # GitHub credentials
-> GITHUB_TOKEN=your-github-token
-> GITHUB_USERNAME=your-github-username
->
-> # Gitea credentials (will be set up after you create a user in the local Gitea instance)
-> GITEA_TOKEN=your-local-gitea-token
-> GITEA_USERNAME=your-local-gitea-username
-> ```
-
-## Technologies Used
+## Technologies
 
 - **Frontend**: Astro, React, Shadcn UI, Tailwind CSS v4
-- **Backend**: Bun
-- **Database**: SQLite (handles both data storage and event notifications)
-- **API Integration**: GitHub API (Octokit), Gitea API
-- **Deployment Options**: Docker containers, LXC containers (Proxmox VE and local testing)
+- **Backend**: Bun runtime, SQLite, Drizzle ORM
+- **APIs**: GitHub (Octokit), Gitea REST API
+- **Auth**: JWT tokens with bcryptjs password hashing
 
 ## Contributing
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+Contributions are welcome! Please read our [Contributing Guidelines](CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+GNU General Public License v3.0 - see [LICENSE](LICENSE) file for details.
 
+## Support
 
-## Troubleshooting
-
-### Docker Compose Network Issues
-
-> [!WARNING]
-> If you encounter network-related warnings or errors when running Docker Compose, such as:
->
-> ```
-> WARN[0095] a network with name gitea-network exists but was not created by compose.
-> Set `external: true` to use an existing network
-> ```
->
-> or
->
-> ```
-> network gitea-network was found but has incorrect label com.docker.compose.network set to "" (expected: "gitea-network")
-> ```
-
-Try the following steps:
-
-1. Stop the current Docker Compose stack:
-   ```bash
-   docker compose -f docker-compose.dev.yml down
-   ```
-
-2. Remove the existing network:
-   ```bash
-   docker network rm gitea-network
-   ```
-
-3. Restart the Docker Compose stack:
-   ```bash
-   docker compose -f docker-compose.dev.yml up -d
-   ```
-
-> [!TIP]
-> If you need to share the network with other Docker Compose projects, you can modify the `docker-compose.dev.yml` file to mark the network as external:
->
-> ```yaml
-> networks:
->   gitea-network:
->     name: gitea-network
->     external: true
-> ```
-
-### Database Persistence
-
-> [!TIP]
-> The application uses SQLite for all data storage and event notifications. Make sure the database file is properly mounted when using Docker:
->
-> ```bash
-> # Run with a volume for persistent data storage
-> docker run -d -p 4321:4321 \
->   -v gitea-mirror-data:/app/data \
->   ghcr.io/RayLabsHQ/gitea-mirror:latest
-> ```
->
-> For homelab/self-hosted setups, you can use the standard Docker Compose file which includes automatic database cleanup:
->
-> ```bash
-> # Clone the repository
-> git clone https://github.com/RayLabsHQ/gitea-mirror.git
-> cd gitea-mirror
->
-> # Start the application with Docker Compose
-> docker compose up -d
-> ```
->
-> This setup provides a complete containerized deployment for the Gitea Mirror application.
-
-#### Docker Volume Types and Permissions
-
-> [!IMPORTANT]
-> **Named Volumes vs Bind Mounts**: If you encounter SQLite permission errors even when using Docker, check your volume configuration:
-
-**✅ Named Volumes (Recommended):**
-```yaml
-volumes:
-  - gitea-mirror-data:/app/data  # Docker manages permissions automatically
-```
-
-**⚠️ Bind Mounts (Requires Manual Permission Setup):**
-```yaml
-volumes:
-  - /host/path/to/data:/app/data  # Host filesystem permissions apply
-```
-
-**If using bind mounts**, ensure the host directory is owned by UID 1001 (the `gitea-mirror` user):
-```bash
-# Set correct ownership for bind mount
-sudo chown -R 1001:1001 /host/path/to/data
-sudo chmod -R 755 /host/path/to/data
-```
-
-**Why named volumes work better:**
-- Docker automatically handles permissions
-- Better portability across different hosts
-- No manual permission setup required
-- Used by our official docker-compose.yml
-
-
-#### Database Maintenance
-
-> [!TIP]
-> For database maintenance, you can use the provided scripts:
->
-> ```bash
-> # Check database integrity
-> bun run check-db
->
-> # Fix database issues
-> bun run fix-db
->
-> # Reset user accounts (for development)
-> bun run reset-users
-> ```
->
-> **Note:** For cleaning up old activities and events, use the cleanup button in the Activity Log page of the web interface.
-
-
-> [!NOTE]
-> This implementation provides:
-> - Automatic retry with exponential backoff
-> - Better error logging
-> - Connection event handling
-> - Proper timeout settings
-
-
-### Container Health Checks
-
-> [!TIP]
-> If containers are not starting properly, check their health status:
->
-> ```bash
-> docker ps --format "{{.Names}}: {{.Status}}"
-> ```
->
-> For more detailed logs:
->
-> ```bash
-> docker logs gitea-mirror-dev
-> ```
-
-## Acknowledgements
-
-- [Octokit](https://github.com/octokit/rest.js/) - GitHub REST API client for JavaScript
-- [Shadcn UI](https://ui.shadcn.com/) - For the beautiful UI components
-- [Astro](https://astro.build/) - For the excellent web framework
-- [Community Scripts](https://community-scripts.github.io/ProxmoxVE/) - For the Proxmox VE installation script maintained by [CrazyWolf13](https://github.com/CrazyWolf13)
+- 📖 [Documentation](https://github.com/RayLabsHQ/gitea-mirror/tree/main/docs)
+- 🔐 [Custom CA Certificates](docs/CA_CERTIFICATES.md)
+- 🐛 [Report Issues](https://github.com/RayLabsHQ/gitea-mirror/issues)
+- 💬 [Discussions](https://github.com/RayLabsHQ/gitea-mirror/discussions)
+- 🔧 [Proxmox VE Script](https://community-scripts.github.io/ProxmoxVE/scripts?id=gitea-mirror)

bun.lock

@@ -6,7 +6,7 @@
       "dependencies": {
         "@astrojs/check": "^0.9.4",
         "@astrojs/mdx": "^4.3.0",
-        "@astrojs/node": "^9.2.2",
+        "@astrojs/node": "9.3.0",
         "@astrojs/react": "^4.3.0",
         "@octokit/rest": "^22.0.0",
         "@radix-ui/react-accordion": "^1.2.11",
@@ -26,12 +26,12 @@
         "@radix-ui/react-switch": "^1.2.5",
         "@radix-ui/react-tabs": "^1.1.12",
         "@radix-ui/react-tooltip": "^1.2.7",
-        "@tailwindcss/vite": "^4.1.10",
-        "@tanstack/react-virtual": "^3.13.10",
+        "@tailwindcss/vite": "^4.1.11",
+        "@tanstack/react-virtual": "^3.13.12",
         "@types/canvas-confetti": "^1.9.0",
         "@types/react": "^19.1.8",
         "@types/react-dom": "^19.1.6",
-        "astro": "^5.9.3",
+        "astro": "5.11.0",
         "bcryptjs": "^3.0.2",
         "canvas-confetti": "^1.9.3",
         "class-variance-authority": "^0.7.1",
@@ -40,29 +40,30 @@
         "drizzle-orm": "^0.44.2",
         "fuse.js": "^7.1.0",
         "jsonwebtoken": "^9.0.2",
-        "lucide-react": "^0.515.0",
+        "lucide-react": "^0.525.0",
         "next-themes": "^0.4.6",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-icons": "^5.5.0",
         "sonner": "^2.0.5",
         "tailwind-merge": "^3.3.1",
-        "tailwindcss": "^4.1.10",
-        "tw-animate-css": "^1.3.4",
+        "tailwindcss": "^4.1.11",
+        "tw-animate-css": "^1.3.5",
         "typescript": "^5.8.3",
         "uuid": "^11.1.0",
-        "zod": "^3.25.64",
+        "vaul": "^1.1.2",
+        "zod": "^3.25.75",
       },
       "devDependencies": {
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
         "@types/bcryptjs": "^3.0.0",
-        "@types/jsonwebtoken": "^9.0.9",
+        "@types/jsonwebtoken": "^9.0.10",
         "@types/uuid": "^10.0.0",
-        "@vitejs/plugin-react": "^4.5.2",
+        "@vitejs/plugin-react": "^4.6.0",
         "jsdom": "^26.1.0",
         "tsx": "^4.20.3",
-        "vitest": "^3.2.3",
+        "vitest": "^3.2.4",
       },
     },
   },
@@ -85,7 +86,7 @@
 
     "@astrojs/mdx": ["@astrojs/mdx@4.3.0", "", { "dependencies": { "@astrojs/markdown-remark": "6.3.2", "@mdx-js/mdx": "^3.1.0", "acorn": "^8.14.1", "es-module-lexer": "^1.6.0", "estree-util-visit": "^2.0.0", "hast-util-to-html": "^9.0.5", "kleur": "^4.1.5", "rehype-raw": "^7.0.0", "remark-gfm": "^4.0.1", "remark-smartypants": "^3.0.2", "source-map": "^0.7.4", "unist-util-visit": "^5.0.0", "vfile": "^6.0.3" }, "peerDependencies": { "astro": "^5.0.0" } }, "sha512-OGX2KvPeBzjSSKhkCqrUoDMyzFcjKt5nTE5SFw3RdoLf0nrhyCXBQcCyclzWy1+P+XpOamn+p+hm1EhpCRyPxw=="],
 
-    "@astrojs/node": ["@astrojs/node@9.2.2", "", { "dependencies": { "@astrojs/internal-helpers": "0.6.1", "send": "^1.2.0", "server-destroy": "^1.0.1" }, "peerDependencies": { "astro": "^5.3.0" } }, "sha512-PtLPuuojmcl9O3CEvXqL/D+wB4x5DlbrGOvP0MeTAh/VfKFprYAzgw1+45xsnTO+QvPWb26l1cT+ZQvvohmvMw=="],
+    "@astrojs/node": ["@astrojs/node@9.3.0", "", { "dependencies": { "@astrojs/internal-helpers": "0.6.1", "send": "^1.2.0", "server-destroy": "^1.0.1" }, "peerDependencies": { "astro": "^5.3.0" } }, "sha512-IV8NzGStHAsKBz1ljxxD8PBhBfnw/BEx/PZfsncTNXg9D4kQtZbSy+Ak0LvDs+rPmK0VeXLNn0HAdWuHCVg8cw=="],
 
     "@astrojs/prism": ["@astrojs/prism@3.3.0", "", { "dependencies": { "prismjs": "^1.30.0" } }, "sha512-q8VwfU/fDZNoDOf+r7jUnMC2//H2l0TuQ6FkGJL8vD8nw/q5KiL3DS1KKBI3QhI9UQhpJ5dc7AtqfbXWuOgLCQ=="],
 
@@ -393,7 +394,7 @@
 
     "@radix-ui/rect": ["@radix-ui/rect@1.1.1", "", {}, "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="],
 
-    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-beta.11", "", {}, "sha512-L/gAA/hyCSuzTF1ftlzUSI/IKr2POHsv1Dd78GfqkR83KMNuswWD61JxGV2L7nRwBBBSDr6R1gCkdTmoN7W4ag=="],
+    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-beta.19", "", {}, "sha512-3FL3mnMbPu0muGOCaKAhhFEYmqv9eTfPSJRJmANrCwtgK8VuxpsZDGK+m0LYAGoyO8+0j5uRe4PeyPDK1yA/hA=="],
 
     "@rollup/pluginutils": ["@rollup/pluginutils@5.1.4", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-walker": "^2.0.2", "picomatch": "^4.0.2" }, "peerDependencies": { "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" }, "optionalPeers": ["rollup"] }, "sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ=="],
 
@@ -453,39 +454,39 @@
 
     "@swc/helpers": ["@swc/helpers@0.5.17", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A=="],
 
-    "@tailwindcss/node": ["@tailwindcss/node@4.1.10", "", { "dependencies": { "@ampproject/remapping": "^2.3.0", "enhanced-resolve": "^5.18.1", "jiti": "^2.4.2", "lightningcss": "1.30.1", "magic-string": "^0.30.17", "source-map-js": "^1.2.1", "tailwindcss": "4.1.10" } }, "sha512-2ACf1znY5fpRBwRhMgj9ZXvb2XZW8qs+oTfotJ2C5xR0/WNL7UHZ7zXl6s+rUqedL1mNi+0O+WQr5awGowS3PQ=="],
+    "@tailwindcss/node": ["@tailwindcss/node@4.1.11", "", { "dependencies": { "@ampproject/remapping": "^2.3.0", "enhanced-resolve": "^5.18.1", "jiti": "^2.4.2", "lightningcss": "1.30.1", "magic-string": "^0.30.17", "source-map-js": "^1.2.1", "tailwindcss": "4.1.11" } }, "sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q=="],
 
-    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.1.10", "", { "dependencies": { "detect-libc": "^2.0.4", "tar": "^7.4.3" }, "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.1.10", "@tailwindcss/oxide-darwin-arm64": "4.1.10", "@tailwindcss/oxide-darwin-x64": "4.1.10", "@tailwindcss/oxide-freebsd-x64": "4.1.10", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.10", "@tailwindcss/oxide-linux-arm64-gnu": "4.1.10", "@tailwindcss/oxide-linux-arm64-musl": "4.1.10", "@tailwindcss/oxide-linux-x64-gnu": "4.1.10", "@tailwindcss/oxide-linux-x64-musl": "4.1.10", "@tailwindcss/oxide-wasm32-wasi": "4.1.10", "@tailwindcss/oxide-win32-arm64-msvc": "4.1.10", "@tailwindcss/oxide-win32-x64-msvc": "4.1.10" } }, "sha512-v0C43s7Pjw+B9w21htrQwuFObSkio2aV/qPx/mhrRldbqxbWJK6KizM+q7BF1/1CmuLqZqX3CeYF7s7P9fbA8Q=="],
+    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.1.11", "", { "dependencies": { "detect-libc": "^2.0.4", "tar": "^7.4.3" }, "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.1.11", "@tailwindcss/oxide-darwin-arm64": "4.1.11", "@tailwindcss/oxide-darwin-x64": "4.1.11", "@tailwindcss/oxide-freebsd-x64": "4.1.11", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.11", "@tailwindcss/oxide-linux-arm64-gnu": "4.1.11", "@tailwindcss/oxide-linux-arm64-musl": "4.1.11", "@tailwindcss/oxide-linux-x64-gnu": "4.1.11", "@tailwindcss/oxide-linux-x64-musl": "4.1.11", "@tailwindcss/oxide-wasm32-wasi": "4.1.11", "@tailwindcss/oxide-win32-arm64-msvc": "4.1.11", "@tailwindcss/oxide-win32-x64-msvc": "4.1.11" } }, "sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg=="],
 
-    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.1.10", "", { "os": "android", "cpu": "arm64" }, "sha512-VGLazCoRQ7rtsCzThaI1UyDu/XRYVyH4/EWiaSX6tFglE+xZB5cvtC5Omt0OQ+FfiIVP98su16jDVHDEIuH4iQ=="],
+    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.1.11", "", { "os": "android", "cpu": "arm64" }, "sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg=="],
 
-    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.1.10", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ZIFqvR1irX2yNjWJzKCqTCcHZbgkSkSkZKbRM3BPzhDL/18idA8uWCoopYA2CSDdSGFlDAxYdU2yBHwAwx8euQ=="],
+    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.1.11", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ=="],
 
-    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.1.10", "", { "os": "darwin", "cpu": "x64" }, "sha512-eCA4zbIhWUFDXoamNztmS0MjXHSEJYlvATzWnRiTqJkcUteSjO94PoRHJy1Xbwp9bptjeIxxBHh+zBWFhttbrQ=="],
+    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.1.11", "", { "os": "darwin", "cpu": "x64" }, "sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw=="],
 
-    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.1.10", "", { "os": "freebsd", "cpu": "x64" }, "sha512-8/392Xu12R0cc93DpiJvNpJ4wYVSiciUlkiOHOSOQNH3adq9Gi/dtySK7dVQjXIOzlpSHjeCL89RUUI8/GTI6g=="],
+    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.1.11", "", { "os": "freebsd", "cpu": "x64" }, "sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA=="],
 
-    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.1.10", "", { "os": "linux", "cpu": "arm" }, "sha512-t9rhmLT6EqeuPT+MXhWhlRYIMSfh5LZ6kBrC4FS6/+M1yXwfCtp24UumgCWOAJVyjQwG+lYva6wWZxrfvB+NhQ=="],
+    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11", "", { "os": "linux", "cpu": "arm" }, "sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg=="],
 
-    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.1.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-3oWrlNlxLRxXejQ8zImzrVLuZ/9Z2SeKoLhtCu0hpo38hTO2iL86eFOu4sVR8cZc6n3z7eRXXqtHJECa6mFOvA=="],
+    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.1.11", "", { "os": "linux", "cpu": "arm64" }, "sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ=="],
 
-    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.1.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-saScU0cmWvg/Ez4gUmQWr9pvY9Kssxt+Xenfx1LG7LmqjcrvBnw4r9VjkFcqmbBb7GCBwYNcZi9X3/oMda9sqQ=="],
+    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.1.11", "", { "os": "linux", "cpu": "arm64" }, "sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ=="],
 
-    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.1.10", "", { "os": "linux", "cpu": "x64" }, "sha512-/G3ao/ybV9YEEgAXeEg28dyH6gs1QG8tvdN9c2MNZdUXYBaIY/Gx0N6RlJzfLy/7Nkdok4kaxKPHKJUlAaoTdA=="],
+    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.1.11", "", { "os": "linux", "cpu": "x64" }, "sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg=="],
 
-    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.1.10", "", { "os": "linux", "cpu": "x64" }, "sha512-LNr7X8fTiKGRtQGOerSayc2pWJp/9ptRYAa4G+U+cjw9kJZvkopav1AQc5HHD+U364f71tZv6XamaHKgrIoVzA=="],
+    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.1.11", "", { "os": "linux", "cpu": "x64" }, "sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q=="],
 
-    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.1.10", "", { "dependencies": { "@emnapi/core": "^1.4.3", "@emnapi/runtime": "^1.4.3", "@emnapi/wasi-threads": "^1.0.2", "@napi-rs/wasm-runtime": "^0.2.10", "@tybys/wasm-util": "^0.9.0", "tslib": "^2.8.0" }, "cpu": "none" }, "sha512-d6ekQpopFQJAcIK2i7ZzWOYGZ+A6NzzvQ3ozBvWFdeyqfOZdYHU66g5yr+/HC4ipP1ZgWsqa80+ISNILk+ae/Q=="],
+    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.1.11", "", { "dependencies": { "@emnapi/core": "^1.4.3", "@emnapi/runtime": "^1.4.3", "@emnapi/wasi-threads": "^1.0.2", "@napi-rs/wasm-runtime": "^0.2.11", "@tybys/wasm-util": "^0.9.0", "tslib": "^2.8.0" }, "cpu": "none" }, "sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g=="],
 
-    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.1.10", "", { "os": "win32", "cpu": "arm64" }, "sha512-i1Iwg9gRbwNVOCYmnigWCCgow8nDWSFmeTUU5nbNx3rqbe4p0kRbEqLwLJbYZKmSSp23g4N6rCDmm7OuPBXhDA=="],
+    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.1.11", "", { "os": "win32", "cpu": "arm64" }, "sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w=="],
 
-    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.1.10", "", { "os": "win32", "cpu": "x64" }, "sha512-sGiJTjcBSfGq2DVRtaSljq5ZgZS2SDHSIfhOylkBvHVjwOsodBhnb3HdmiKkVuUGKD0I7G63abMOVaskj1KpOA=="],
+    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.1.11", "", { "os": "win32", "cpu": "x64" }, "sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg=="],
 
-    "@tailwindcss/vite": ["@tailwindcss/vite@4.1.10", "", { "dependencies": { "@tailwindcss/node": "4.1.10", "@tailwindcss/oxide": "4.1.10", "tailwindcss": "4.1.10" }, "peerDependencies": { "vite": "^5.2.0 || ^6" } }, "sha512-QWnD5HDY2IADv+vYR82lOhqOlS1jSCUUAmfem52cXAhRTKxpDh3ARX8TTXJTCCO7Rv7cD2Nlekabv02bwP3a2A=="],
+    "@tailwindcss/vite": ["@tailwindcss/vite@4.1.11", "", { "dependencies": { "@tailwindcss/node": "4.1.11", "@tailwindcss/oxide": "4.1.11", "tailwindcss": "4.1.11" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7" } }, "sha512-RHYhrR3hku0MJFRV+fN2gNbDNEh3dwKvY8XJvTxCSXeMOsCRSr+uKvDWQcbizrHgjML6ZmTE5OwMrl5wKcujCw=="],
 
-    "@tanstack/react-virtual": ["@tanstack/react-virtual@3.13.10", "", { "dependencies": { "@tanstack/virtual-core": "3.13.10" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-nvrzk4E9mWB4124YdJ7/yzwou7IfHxlSef6ugCFcBfRmsnsma3heciiiV97sBNxyc3VuwtZvmwXd0aB5BpucVw=="],
+    "@tanstack/react-virtual": ["@tanstack/react-virtual@3.13.12", "", { "dependencies": { "@tanstack/virtual-core": "3.13.12" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA=="],
 
-    "@tanstack/virtual-core": ["@tanstack/virtual-core@3.13.10", "", {}, "sha512-sPEDhXREou5HyZYqSWIqdU580rsF6FGeN7vpzijmP3KTiOGjOMZASz4Y6+QKjiFQwhWrR58OP8izYaNGVxvViA=="],
+    "@tanstack/virtual-core": ["@tanstack/virtual-core@3.13.12", "", {}, "sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA=="],
 
     "@testing-library/dom": ["@testing-library/dom@10.4.0", "", { "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", "@types/aria-query": "^5.0.1", "aria-query": "5.3.0", "chalk": "^4.1.0", "dom-accessibility-api": "^0.5.9", "lz-string": "^1.5.0", "pretty-format": "^27.0.2" } }, "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ=="],
 
@@ -521,7 +522,7 @@
 
     "@types/hast": ["@types/hast@3.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ=="],
 
-    "@types/jsonwebtoken": ["@types/jsonwebtoken@9.0.9", "", { "dependencies": { "@types/ms": "*", "@types/node": "*" } }, "sha512-uoe+GxEuHbvy12OUQct2X9JenKM3qAscquYymuQN4fMWG9DBQtykrQEFcAbVACF7qaLw9BePSodUL0kquqBJpQ=="],
+    "@types/jsonwebtoken": ["@types/jsonwebtoken@9.0.10", "", { "dependencies": { "@types/ms": "*", "@types/node": "*" } }, "sha512-asx5hIG9Qmf/1oStypjanR7iKTv0gXQ1Ov/jfrX6kS/EO0OFni8orbmGCn0672NHR3kXHwpAwR+B368ZGN/2rA=="],
 
     "@types/mdast": ["@types/mdast@4.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA=="],
 
@@ -543,21 +544,21 @@
 
     "@ungap/structured-clone": ["@ungap/structured-clone@1.3.0", "", {}, "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="],
 
-    "@vitejs/plugin-react": ["@vitejs/plugin-react@4.5.2", "", { "dependencies": { "@babel/core": "^7.27.4", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-beta.11", "@types/babel__core": "^7.20.5", "react-refresh": "^0.17.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0" } }, "sha512-QNVT3/Lxx99nMQWJWF7K4N6apUEuT0KlZA3mx/mVaoGj3smm/8rc8ezz15J1pcbcjDK0V15rpHetVfya08r76Q=="],
+    "@vitejs/plugin-react": ["@vitejs/plugin-react@4.6.0", "", { "dependencies": { "@babel/core": "^7.27.4", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-beta.19", "@types/babel__core": "^7.20.5", "react-refresh": "^0.17.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0" } }, "sha512-5Kgff+m8e2PB+9j51eGHEpn5kUzRKH2Ry0qGoe8ItJg7pqnkPrYPkDQZGgGmTa0EGarHrkjLvOdU3b1fzI8otQ=="],
 
-    "@vitest/expect": ["@vitest/expect@3.2.3", "", { "dependencies": { "@types/chai": "^5.2.2", "@vitest/spy": "3.2.3", "@vitest/utils": "3.2.3", "chai": "^5.2.0", "tinyrainbow": "^2.0.0" } }, "sha512-W2RH2TPWVHA1o7UmaFKISPvdicFJH+mjykctJFoAkUw+SPTJTGjUNdKscFBrqM7IPnCVu6zihtKYa7TkZS1dkQ=="],
+    "@vitest/expect": ["@vitest/expect@3.2.4", "", { "dependencies": { "@types/chai": "^5.2.2", "@vitest/spy": "3.2.4", "@vitest/utils": "3.2.4", "chai": "^5.2.0", "tinyrainbow": "^2.0.0" } }, "sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig=="],
 
-    "@vitest/mocker": ["@vitest/mocker@3.2.3", "", { "dependencies": { "@vitest/spy": "3.2.3", "estree-walker": "^3.0.3", "magic-string": "^0.30.17" }, "peerDependencies": { "msw": "^2.4.9", "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0" }, "optionalPeers": ["msw", "vite"] }, "sha512-cP6fIun+Zx8he4rbWvi+Oya6goKQDZK+Yq4hhlggwQBbrlOQ4qtZ+G4nxB6ZnzI9lyIb+JnvyiJnPC2AGbKSPA=="],
+    "@vitest/mocker": ["@vitest/mocker@3.2.4", "", { "dependencies": { "@vitest/spy": "3.2.4", "estree-walker": "^3.0.3", "magic-string": "^0.30.17" }, "peerDependencies": { "msw": "^2.4.9", "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0" }, "optionalPeers": ["msw", "vite"] }, "sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ=="],
 
-    "@vitest/pretty-format": ["@vitest/pretty-format@3.2.3", "", { "dependencies": { "tinyrainbow": "^2.0.0" } }, "sha512-yFglXGkr9hW/yEXngO+IKMhP0jxyFw2/qys/CK4fFUZnSltD+MU7dVYGrH8rvPcK/O6feXQA+EU33gjaBBbAng=="],
+    "@vitest/pretty-format": ["@vitest/pretty-format@3.2.4", "", { "dependencies": { "tinyrainbow": "^2.0.0" } }, "sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA=="],
 
-    "@vitest/runner": ["@vitest/runner@3.2.3", "", { "dependencies": { "@vitest/utils": "3.2.3", "pathe": "^2.0.3", "strip-literal": "^3.0.0" } }, "sha512-83HWYisT3IpMaU9LN+VN+/nLHVBCSIUKJzGxC5RWUOsK1h3USg7ojL+UXQR3b4o4UBIWCYdD2fxuzM7PQQ1u8w=="],
+    "@vitest/runner": ["@vitest/runner@3.2.4", "", { "dependencies": { "@vitest/utils": "3.2.4", "pathe": "^2.0.3", "strip-literal": "^3.0.0" } }, "sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ=="],
 
-    "@vitest/snapshot": ["@vitest/snapshot@3.2.3", "", { "dependencies": { "@vitest/pretty-format": "3.2.3", "magic-string": "^0.30.17", "pathe": "^2.0.3" } }, "sha512-9gIVWx2+tysDqUmmM1L0hwadyumqssOL1r8KJipwLx5JVYyxvVRfxvMq7DaWbZZsCqZnu/dZedaZQh4iYTtneA=="],
+    "@vitest/snapshot": ["@vitest/snapshot@3.2.4", "", { "dependencies": { "@vitest/pretty-format": "3.2.4", "magic-string": "^0.30.17", "pathe": "^2.0.3" } }, "sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ=="],
 
-    "@vitest/spy": ["@vitest/spy@3.2.3", "", { "dependencies": { "tinyspy": "^4.0.3" } }, "sha512-JHu9Wl+7bf6FEejTCREy+DmgWe+rQKbK+y32C/k5f4TBIAlijhJbRBIRIOCEpVevgRsCQR2iHRUH2/qKVM/plw=="],
+    "@vitest/spy": ["@vitest/spy@3.2.4", "", { "dependencies": { "tinyspy": "^4.0.3" } }, "sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw=="],
 
-    "@vitest/utils": ["@vitest/utils@3.2.3", "", { "dependencies": { "@vitest/pretty-format": "3.2.3", "loupe": "^3.1.3", "tinyrainbow": "^2.0.0" } }, "sha512-4zFBCU5Pf+4Z6v+rwnZ1HU1yzOKKvDkMXZrymE2PBlbjKJRlrOxbvpfPSvJTGRIwGoahaOGvp+kbCoxifhzJ1Q=="],
+    "@vitest/utils": ["@vitest/utils@3.2.4", "", { "dependencies": { "@vitest/pretty-format": "3.2.4", "loupe": "^3.1.4", "tinyrainbow": "^2.0.0" } }, "sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA=="],
 
     "@volar/kit": ["@volar/kit@2.4.14", "", { "dependencies": { "@volar/language-service": "2.4.14", "@volar/typescript": "2.4.14", "typesafe-path": "^0.2.2", "vscode-languageserver-textdocument": "^1.0.11", "vscode-uri": "^3.0.8" }, "peerDependencies": { "typescript": "*" } }, "sha512-kBcmHjEodtmYGJELHePZd2JdeYm4ZGOd9F/pQ1YETYIzAwy4Z491EkJ1nRSo/GTxwKt0XYwYA/dHSEgXecVHRA=="],
 
@@ -603,7 +604,7 @@
 
     "astring": ["astring@1.9.0", "", { "bin": { "astring": "bin/astring" } }, "sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg=="],
 
-    "astro": ["astro@5.9.3", "", { "dependencies": { "@astrojs/compiler": "^2.12.2", "@astrojs/internal-helpers": "0.6.1", "@astrojs/markdown-remark": "6.3.2", "@astrojs/telemetry": "3.3.0", "@capsizecss/unpack": "^2.4.0", "@oslojs/encoding": "^1.1.0", "@rollup/pluginutils": "^5.1.4", "acorn": "^8.14.1", "aria-query": "^5.3.2", "axobject-query": "^4.1.0", "boxen": "8.0.1", "ci-info": "^4.2.0", "clsx": "^2.1.1", "common-ancestor-path": "^1.0.1", "cookie": "^1.0.2", "cssesc": "^3.0.0", "debug": "^4.4.0", "deterministic-object-hash": "^2.0.2", "devalue": "^5.1.1", "diff": "^5.2.0", "dlv": "^1.1.3", "dset": "^3.1.4", "es-module-lexer": "^1.6.0", "esbuild": "^0.25.0", "estree-walker": "^3.0.3", "flattie": "^1.1.1", "fontace": "~0.3.0", "github-slugger": "^2.0.0", "html-escaper": "3.0.3", "http-cache-semantics": "^4.1.1", "import-meta-resolve": "^4.1.0", "js-yaml": "^4.1.0", "kleur": "^4.1.5", "magic-string": "^0.30.17", "magicast": "^0.3.5", "mrmime": "^2.0.1", "neotraverse": "^0.6.18", "p-limit": "^6.2.0", "p-queue": "^8.1.0", "package-manager-detector": "^1.1.0", "picomatch": "^4.0.2", "prompts": "^2.4.2", "rehype": "^13.0.2", "semver": "^7.7.1", "shiki": "^3.2.1", "tinyexec": "^0.3.2", "tinyglobby": "^0.2.12", "tsconfck": "^3.1.5", "ultrahtml": "^1.6.0", "unifont": "~0.5.0", "unist-util-visit": "^5.0.0", "unstorage": "^1.15.0", "vfile": "^6.0.3", "vite": "^6.3.4", "vitefu": "^1.0.6", "xxhash-wasm": "^1.1.0", "yargs-parser": "^21.1.1", "yocto-spinner": "^0.2.1", "zod": "^3.24.2", "zod-to-json-schema": "^3.24.5", "zod-to-ts": "^1.2.0" }, "optionalDependencies": { "sharp": "^0.33.3" }, "bin": { "astro": "astro.js" } }, "sha512-VReZrpUa/3rfeiVvsQ1A2M3ujDPI+pDGIYOMtXPEZwut8tZoEyealXXLjitgCsJ+3dunKGZbg4Eak6i+r0vniw=="],
+    "astro": ["astro@5.11.0", "", { "dependencies": { "@astrojs/compiler": "^2.12.2", "@astrojs/internal-helpers": "0.6.1", "@astrojs/markdown-remark": "6.3.2", "@astrojs/telemetry": "3.3.0", "@capsizecss/unpack": "^2.4.0", "@oslojs/encoding": "^1.1.0", "@rollup/pluginutils": "^5.1.4", "acorn": "^8.14.1", "aria-query": "^5.3.2", "axobject-query": "^4.1.0", "boxen": "8.0.1", "ci-info": "^4.2.0", "clsx": "^2.1.1", "common-ancestor-path": "^1.0.1", "cookie": "^1.0.2", "cssesc": "^3.0.0", "debug": "^4.4.0", "deterministic-object-hash": "^2.0.2", "devalue": "^5.1.1", "diff": "^5.2.0", "dlv": "^1.1.3", "dset": "^3.1.4", "es-module-lexer": "^1.6.0", "esbuild": "^0.25.0", "estree-walker": "^3.0.3", "flattie": "^1.1.1", "fontace": "~0.3.0", "github-slugger": "^2.0.0", "html-escaper": "3.0.3", "http-cache-semantics": "^4.1.1", "import-meta-resolve": "^4.1.0", "js-yaml": "^4.1.0", "kleur": "^4.1.5", "magic-string": "^0.30.17", "magicast": "^0.3.5", "mrmime": "^2.0.1", "neotraverse": "^0.6.18", "p-limit": "^6.2.0", "p-queue": "^8.1.0", "package-manager-detector": "^1.1.0", "picomatch": "^4.0.2", "prompts": "^2.4.2", "rehype": "^13.0.2", "semver": "^7.7.1", "shiki": "^3.2.1", "tinyexec": "^0.3.2", "tinyglobby": "^0.2.12", "tsconfck": "^3.1.5", "ultrahtml": "^1.6.0", "unifont": "~0.5.0", "unist-util-visit": "^5.0.0", "unstorage": "^1.15.0", "vfile": "^6.0.3", "vite": "^6.3.4", "vitefu": "^1.0.6", "xxhash-wasm": "^1.1.0", "yargs-parser": "^21.1.1", "yocto-spinner": "^0.2.1", "zod": "^3.24.2", "zod-to-json-schema": "^3.24.5", "zod-to-ts": "^1.2.0" }, "optionalDependencies": { "sharp": "^0.33.3" }, "bin": { "astro": "astro.js" } }, "sha512-MEICntERthUxJPSSDsDiZuwiCMrsaYy3fnDhp4c6ScUfldCB8RBnB/myYdpTFXpwYBy6SgVsHQ1H4MuuA7ro/Q=="],
 
     "axobject-query": ["axobject-query@4.1.0", "", {}, "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ=="],
 
@@ -987,11 +988,11 @@
 
     "longest-streak": ["longest-streak@3.1.0", "", {}, "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g=="],
 
-    "loupe": ["loupe@3.1.3", "", {}, "sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug=="],
+    "loupe": ["loupe@3.1.4", "", {}, "sha512-wJzkKwJrheKtknCOKNEtDK4iqg/MxmZheEMtSTYvnzRdEYaZzmgH976nenp8WdJRdx5Vc1X/9MO0Oszl6ezeXg=="],
 
     "lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
 
-    "lucide-react": ["lucide-react@0.515.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Sy7bY0MeicRm2pzrnoHm2h6C1iVoeHyBU2fjdQDsXGP51fhkhau1/ZV/dzrcxEmAKsxYb6bGaIsMnGHuQ5s0dw=="],
+    "lucide-react": ["lucide-react@0.525.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ=="],
 
     "lz-string": ["lz-string@1.5.0", "", { "bin": { "lz-string": "bin/bin.js" } }, "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ=="],
 
@@ -1351,7 +1352,7 @@
 
     "tailwind-merge": ["tailwind-merge@3.3.1", "", {}, "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g=="],
 
-    "tailwindcss": ["tailwindcss@4.1.10", "", {}, "sha512-P3nr6WkvKV/ONsTzj6Gb57sWPMX29EPNPopo7+FcpkQaNsrNpZ1pv8QmrYI2RqEKD7mlGqLnGovlcYnBK0IqUA=="],
+    "tailwindcss": ["tailwindcss@4.1.11", "", {}, "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA=="],
 
     "tapable": ["tapable@2.2.2", "", {}, "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg=="],
 
@@ -1365,7 +1366,7 @@
 
     "tinyglobby": ["tinyglobby@0.2.14", "", { "dependencies": { "fdir": "^6.4.4", "picomatch": "^4.0.2" } }, "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ=="],
 
-    "tinypool": ["tinypool@1.1.0", "", {}, "sha512-7CotroY9a8DKsKprEy/a14aCCm8jYVmR7aFy4fpkZM8sdpNJbKkixuNjgM50yCmip2ezc8z4N7k3oe2+rfRJCQ=="],
+    "tinypool": ["tinypool@1.1.1", "", {}, "sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg=="],
 
     "tinyrainbow": ["tinyrainbow@2.0.0", "", {}, "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw=="],
 
@@ -1393,7 +1394,7 @@
 
     "tsx": ["tsx@4.20.3", "", { "dependencies": { "esbuild": "~0.25.0", "get-tsconfig": "^4.7.5" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "bin": { "tsx": "dist/cli.mjs" } }, "sha512-qjbnuR9Tr+FJOMBqJCW5ehvIo/buZq7vH7qD7JziU98h6l3qGy0a/yPFjwO+y0/T7GFpNgNAvEcPPVfyT8rrPQ=="],
 
-    "tw-animate-css": ["tw-animate-css@1.3.4", "", {}, "sha512-dd1Ht6/YQHcNbq0znIT6dG8uhO7Ce+VIIhZUhjsryXsMPJQz3bZg7Q2eNzLwipb25bRZslGb2myio5mScd1TFg=="],
+    "tw-animate-css": ["tw-animate-css@1.3.5", "", {}, "sha512-t3u+0YNoloIhj1mMXs779P6MO9q3p3mvGn4k1n3nJPqJw/glZcuijG2qTSN4z4mgNRfW5ZC3aXJFLwDtiipZXA=="],
 
     "type-fest": ["type-fest@4.41.0", "", {}, "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA=="],
 
@@ -1453,6 +1454,8 @@
 
     "uuid": ["uuid@11.1.0", "", { "bin": { "uuid": "dist/esm/bin/uuid" } }, "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A=="],
 
+    "vaul": ["vaul@1.1.2", "", { "dependencies": { "@radix-ui/react-dialog": "^1.1.1" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA=="],
+
     "vfile": ["vfile@6.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" } }, "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q=="],
 
     "vfile-location": ["vfile-location@5.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg=="],
@@ -1461,11 +1464,11 @@
 
     "vite": ["vite@6.3.5", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", "picomatch": "^4.0.2", "postcss": "^8.5.3", "rollup": "^4.34.9", "tinyglobby": "^0.2.13" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ=="],
 
-    "vite-node": ["vite-node@3.2.3", "", { "dependencies": { "cac": "^6.7.14", "debug": "^4.4.1", "es-module-lexer": "^1.7.0", "pathe": "^2.0.3", "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0" }, "bin": { "vite-node": "vite-node.mjs" } }, "sha512-gc8aAifGuDIpZHrPjuHyP4dpQmYXqWw7D1GmDnWeNWP654UEXzVfQ5IHPSK5HaHkwB/+p1atpYpSdw/2kOv8iQ=="],
+    "vite-node": ["vite-node@3.2.4", "", { "dependencies": { "cac": "^6.7.14", "debug": "^4.4.1", "es-module-lexer": "^1.7.0", "pathe": "^2.0.3", "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0" }, "bin": { "vite-node": "vite-node.mjs" } }, "sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg=="],
 
     "vitefu": ["vitefu@1.0.6", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" }, "optionalPeers": ["vite"] }, "sha512-+Rex1GlappUyNN6UfwbVZne/9cYC4+R2XDk9xkNXBKMw6HQagdX9PgZ8V2v1WUSK1wfBLp7qbI1+XSNIlB1xmA=="],
 
-    "vitest": ["vitest@3.2.3", "", { "dependencies": { "@types/chai": "^5.2.2", "@vitest/expect": "3.2.3", "@vitest/mocker": "3.2.3", "@vitest/pretty-format": "^3.2.3", "@vitest/runner": "3.2.3", "@vitest/snapshot": "3.2.3", "@vitest/spy": "3.2.3", "@vitest/utils": "3.2.3", "chai": "^5.2.0", "debug": "^4.4.1", "expect-type": "^1.2.1", "magic-string": "^0.30.17", "pathe": "^2.0.3", "picomatch": "^4.0.2", "std-env": "^3.9.0", "tinybench": "^2.9.0", "tinyexec": "^0.3.2", "tinyglobby": "^0.2.14", "tinypool": "^1.1.0", "tinyrainbow": "^2.0.0", "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0", "vite-node": "3.2.3", "why-is-node-running": "^2.3.0" }, "peerDependencies": { "@edge-runtime/vm": "*", "@types/debug": "^4.1.12", "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "@vitest/browser": "3.2.3", "@vitest/ui": "3.2.3", "happy-dom": "*", "jsdom": "*" }, "optionalPeers": ["@edge-runtime/vm", "@types/debug", "@types/node", "@vitest/browser", "@vitest/ui", "happy-dom", "jsdom"], "bin": { "vitest": "vitest.mjs" } }, "sha512-E6U2ZFXe3N/t4f5BwUaVCKRLHqUpk1CBWeMh78UT4VaTPH/2dyvH6ALl29JTovEPu9dVKr/K/J4PkXgrMbw4Ww=="],
+    "vitest": ["vitest@3.2.4", "", { "dependencies": { "@types/chai": "^5.2.2", "@vitest/expect": "3.2.4", "@vitest/mocker": "3.2.4", "@vitest/pretty-format": "^3.2.4", "@vitest/runner": "3.2.4", "@vitest/snapshot": "3.2.4", "@vitest/spy": "3.2.4", "@vitest/utils": "3.2.4", "chai": "^5.2.0", "debug": "^4.4.1", "expect-type": "^1.2.1", "magic-string": "^0.30.17", "pathe": "^2.0.3", "picomatch": "^4.0.2", "std-env": "^3.9.0", "tinybench": "^2.9.0", "tinyexec": "^0.3.2", "tinyglobby": "^0.2.14", "tinypool": "^1.1.1", "tinyrainbow": "^2.0.0", "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0", "vite-node": "3.2.4", "why-is-node-running": "^2.3.0" }, "peerDependencies": { "@edge-runtime/vm": "*", "@types/debug": "^4.1.12", "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "@vitest/browser": "3.2.4", "@vitest/ui": "3.2.4", "happy-dom": "*", "jsdom": "*" }, "optionalPeers": ["@edge-runtime/vm", "@types/debug", "@types/node", "@vitest/browser", "@vitest/ui", "happy-dom", "jsdom"], "bin": { "vitest": "vitest.mjs" } }, "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A=="],
 
     "volar-service-css": ["volar-service-css@0.0.62", "", { "dependencies": { "vscode-css-languageservice": "^6.3.0", "vscode-languageserver-textdocument": "^1.0.11", "vscode-uri": "^3.0.8" }, "peerDependencies": { "@volar/language-service": "~2.4.0" }, "optionalPeers": ["@volar/language-service"] }, "sha512-JwNyKsH3F8PuzZYuqPf+2e+4CTU8YoyUHEHVnoXNlrLe7wy9U3biomZ56llN69Ris7TTy/+DEX41yVxQpM4qvg=="],
 
@@ -1547,7 +1550,7 @@
 
     "yoctocolors": ["yoctocolors@2.1.1", "", {}, "sha512-GQHQqAopRhwU8Kt1DDM8NjibDXHC8eoh1erhGAJPEyveY9qqVeXvVikNKrDz69sHowPMorbPUrH/mx8c50eiBQ=="],
 
-    "zod": ["zod@3.25.64", "", {}, "sha512-hbP9FpSZf7pkS7hRVUrOjhwKJNyampPgtXKc3AN6DsWtoHsg2Sb4SQaS4Tcay380zSwd2VPo9G9180emBACp5g=="],
+    "zod": ["zod@3.25.75", "", {}, "sha512-OhpzAmVzabPOL6C3A3gpAifqr9MqihV/Msx3gor2b2kviCgcb+HM9SEOpMWwwNp9MRunWnhtAKUoo0AHhjyPPg=="],
 
     "zod-to-json-schema": ["zod-to-json-schema@3.24.5", "", { "peerDependencies": { "zod": "^3.24.1" } }, "sha512-/AuWwMP+YqiPbsJx5D6TfgRTc4kTLjsh5SOcd4bLsfUg2RcEXrFMJl1DGgdHy2aCfsIA/cr/1JM0xcB2GZji8g=="],
 
@@ -1581,7 +1584,7 @@
 
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.0.2", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-5n3nTJblwRi8LlXkJ9eBzu+kZR8Yxcc7ubakyQTFzPMtIhFpUBRbsnc2Dv88IZDIbCDlBiWrknhB4Lsz7mg6BA=="],
 
-    "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@0.2.10", "", { "dependencies": { "@emnapi/core": "^1.4.3", "@emnapi/runtime": "^1.4.3", "@tybys/wasm-util": "^0.9.0" }, "bundled": true }, "sha512-bCsCyeZEwVErsGmyPNSzwfwFn4OdxBj0mmv6hOFucB/k81Ojdu68RbZdxYsRQUPc9l6SU5F/cG+bXgWs3oUgsQ=="],
+    "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@0.2.11", "", { "dependencies": { "@emnapi/core": "^1.4.3", "@emnapi/runtime": "^1.4.3", "@tybys/wasm-util": "^0.9.0" }, "bundled": true }, "sha512-9DPkXtvHydrcOsopiYpUgPHpmj0HWZKMUnL2dZqpvC42lsratuBG06V5ipyno0fUek5VlFsNQ+AcFATSrJXgMA=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@tybys/wasm-util": ["@tybys/wasm-util@0.9.0", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw=="],
 
@@ -1599,10 +1602,14 @@
 
     "anymatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
 
+    "astro/zod": ["zod@3.25.64", "", {}, "sha512-hbP9FpSZf7pkS7hRVUrOjhwKJNyampPgtXKc3AN6DsWtoHsg2Sb4SQaS4Tcay380zSwd2VPo9G9180emBACp5g=="],
+
     "boxen/chalk": ["chalk@5.4.1", "", {}, "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w=="],
 
     "boxen/string-width": ["string-width@7.2.0", "", { "dependencies": { "emoji-regex": "^10.3.0", "get-east-asian-width": "^1.0.0", "strip-ansi": "^7.1.0" } }, "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ=="],
 
+    "chai/loupe": ["loupe@3.1.3", "", {}, "sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug=="],
+
     "cliui/wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
 
     "hast-util-to-parse5/property-information": ["property-information@6.5.0", "", {}, "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig=="],

certs/README.md

@@ -0,0 +1,149 @@
+# Custom CA Certificate Support
+
+This guide explains how to configure Gitea Mirror to work with self-signed certificates or custom Certificate Authorities (CAs).
+
+> **📁 This is the certs directory!** Place your `.crt` certificate files directly in this directory and they will be automatically loaded when the Docker container starts.
+
+## Overview
+
+When connecting to a Gitea instance that uses self-signed certificates or certificates from a private CA, you need to configure the application to trust these certificates. Gitea Mirror supports mounting custom CA certificates that will be automatically configured for use.
+
+## Configuration Steps
+
+### 1. Prepare Your CA Certificates
+
+You're already in the right place! Simply copy your CA certificate(s) into this `certs` directory with `.crt` extension:
+
+```bash
+# From the project root:
+cp /path/to/your/ca-certificate.crt ./certs/
+
+# Or if you're already in the certs directory:
+cp /path/to/your/ca-certificate.crt .
+```
+
+You can add multiple CA certificates - they will all be combined into a single bundle.
+
+### 2. Mount Certificates in Docker
+
+Edit your `docker-compose.yml` file to mount the certificates. You have two options:
+
+**Option 1: Mount individual certificates from certs directory**
+```yaml
+services:
+  gitea-mirror:
+    # ... other configuration ...
+    volumes:
+      - gitea-mirror-data:/app/data
+      - ./certs:/app/certs:ro  # Mount CA certificates directory
+```
+
+**Option 2: Mount system CA bundle (if your CA is already installed system-wide)**
+```yaml
+services:
+  gitea-mirror:
+    # ... other configuration ...
+    volumes:
+      - gitea-mirror-data:/app/data
+      - /etc/ssl/certs/ca-certificates.crt:/etc/ssl/certs/ca-certificates.crt:ro
+```
+
+> **Note**: Use Option 2 if you've already added your CA certificate to your system's certificate store using `update-ca-certificates` or similar commands.
+
+> **System CA Bundle Locations**:
+> - Debian/Ubuntu: `/etc/ssl/certs/ca-certificates.crt`
+> - RHEL/CentOS/Fedora: `/etc/pki/tls/certs/ca-bundle.crt`
+> - Alpine Linux: `/etc/ssl/certs/ca-certificates.crt`
+> - macOS: `/etc/ssl/cert.pem`
+
+### 3. Start the Container
+
+Start or restart your container:
+
+```bash
+docker-compose up -d
+```
+
+The container will automatically:
+1. Detect any `.crt` files in `/app/certs` (Option 1) OR detect mounted system CA bundle (Option 2)
+2. For Option 1: Combine certificates into a CA bundle
+3. Configure Node.js to use these certificates via `NODE_EXTRA_CA_CERTS`
+
+You should see log messages like:
+
+**For Option 1 (individual certificates):**
+```
+Custom CA certificates found, configuring Node.js to use them...
+Adding certificate: my-ca.crt
+NODE_EXTRA_CA_CERTS set to: /app/certs/ca-bundle.crt
+```
+
+**For Option 2 (system CA bundle):**
+```
+System CA bundle mounted, configuring Node.js to use it...
+NODE_EXTRA_CA_CERTS set to: /etc/ssl/certs/ca-certificates.crt
+```
+
+## Testing & Troubleshooting
+
+### Disable TLS Verification (Testing Only)
+
+For testing purposes only, you can disable TLS verification entirely:
+
+```yaml
+environment:
+  - GITEA_SKIP_TLS_VERIFY=true
+```
+
+**WARNING**: This is insecure and should never be used in production!
+
+### Common Issues
+
+1. **Certificate not recognized**: Ensure your certificate file has a `.crt` extension
+2. **Connection still fails**: Check that the certificate is in PEM format
+3. **Multiple certificates needed**: Add all required certificates (root and intermediate) to the certs directory
+
+### Verifying Certificate Loading
+
+Check the container logs to confirm certificates are loaded:
+
+```bash
+docker-compose logs gitea-mirror | grep "CA certificates"
+```
+
+## Security Considerations
+
+- Always use proper CA certificates in production
+- Never disable TLS verification in production environments
+- Keep your CA certificates secure and limit access to the certs directory
+- Regularly update certificates before they expire
+
+## Example Setup
+
+Here's a complete example for a self-hosted Gitea with custom CA:
+
+1. Copy your Gitea server's CA certificate to this directory:
+   ```bash
+   cp /etc/ssl/certs/my-company-ca.crt ./certs/
+   ```
+
+2. Update `docker-compose.yml`:
+   ```yaml
+   services:
+     gitea-mirror:
+       image: ghcr.io/raylabshq/gitea-mirror:latest
+       volumes:
+         - gitea-mirror-data:/app/data
+         - ./certs:/app/certs:ro
+       environment:
+         - GITEA_URL=https://gitea.mycompany.local
+         - GITEA_TOKEN=your-token
+         # ... other configuration ...
+   ```
+
+3. Start the service:
+   ```bash
+   docker-compose up -d
+   ```
+
+The application will now trust your custom CA when connecting to your Gitea instance.

docker-compose.alt.yml

@@ -0,0 +1,24 @@
+# Gitea Mirror alternate deployment configuration
+# Standard deployment with host path and minimal environments
+services:
+  gitea-mirror:
+    image: ghcr.io/raylabshq/gitea-mirror:latest
+    container_name: gitea-mirror
+    restart: unless-stopped
+    ports:
+      - "${PORT:-4321}:4321"
+    user: ${PUID:-1000}:${PGID:-1000}
+    volumes:
+      - ./data:/app/data
+    environment:
+      - NODE_ENV=production
+      - DATABASE_URL=file:data/gitea-mirror.db
+      - HOST=0.0.0.0
+      - PORT=4321
+      - JWT_SECRET=${JWT_SECRET:-your-secret-key-change-this-in-production}
+    healthcheck:
+      test: ["CMD", "wget", "--no-verbose", "--tries=3", "--spider", "http://localhost:4321/api/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 5
+      start_period: 15s

docker-compose.dev.yml

@@ -54,6 +54,11 @@ services:
       - "4321:4321"
     volumes:
       - gitea-mirror-data:/app/data
+      # Mount custom CA certificates - choose one option:
+      # Option 1: Mount individual CA certificates from certs directory
+      # - ./certs:/app/certs:ro
+      # Option 2: Mount system CA bundle (if your CA is already in system store)
+      # - /etc/ssl/certs/ca-certificates.crt:/etc/ssl/certs/ca-certificates.crt:ro
     depends_on:
       - gitea
     environment:
@@ -80,6 +85,8 @@ services:
       - GITEA_ORGANIZATION=${GITEA_ORGANIZATION:-github-mirrors}
       - GITEA_ORG_VISIBILITY=${GITEA_ORG_VISIBILITY:-public}
       - DELAY=${DELAY:-3600}
+      # Optional: Skip TLS verification (insecure, use only for testing)
+      # - GITEA_SKIP_TLS_VERIFY=${GITEA_SKIP_TLS_VERIFY:-false}
     healthcheck:
       test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:4321/api/health"]
       interval: 30s

docker-compose.yml

@@ -18,6 +18,11 @@ services:
       - "4321:4321"
     volumes:
       - gitea-mirror-data:/app/data
+      # Mount custom CA certificates - choose one option:
+      # Option 1: Mount individual CA certificates from certs directory
+      # - ./certs:/app/certs:ro
+      # Option 2: Mount system CA bundle (if your CA is already in system store)
+      # - /etc/ssl/certs/ca-certificates.crt:/etc/ssl/certs/ca-certificates.crt:ro
     environment:
       - NODE_ENV=production
       - DATABASE_URL=file:data/gitea-mirror.db
@@ -42,6 +47,8 @@ services:
       - GITEA_ORGANIZATION=${GITEA_ORGANIZATION:-github-mirrors}
       - GITEA_ORG_VISIBILITY=${GITEA_ORG_VISIBILITY:-public}
       - DELAY=${DELAY:-3600}
+      # Optional: Skip TLS verification (insecure, use only for testing)
+      # - GITEA_SKIP_TLS_VERIFY=${GITEA_SKIP_TLS_VERIFY:-false}
     healthcheck:
       test: ["CMD", "wget", "--no-verbose", "--tries=3", "--spider", "http://localhost:4321/api/health"]
       interval: 30s

docker-entrypoint.sh

@@ -5,6 +5,53 @@ set -e
 # Ensure data directory exists
 mkdir -p /app/data
 
+# Handle custom CA certificates
+if [ -d "/app/certs" ] && [ "$(ls -A /app/certs/*.crt 2>/dev/null)" ]; then
+  echo "Custom CA certificates found, configuring Node.js to use them..."
+  
+  # Combine all CA certificates into a bundle for Node.js
+  CA_BUNDLE="/app/certs/ca-bundle.crt"
+  > "$CA_BUNDLE"
+  
+  for cert in /app/certs/*.crt; do
+    if [ -f "$cert" ]; then
+      echo "Adding certificate: $(basename "$cert")"
+      cat "$cert" >> "$CA_BUNDLE"
+      echo "" >> "$CA_BUNDLE"  # Add newline between certificates
+    fi
+  done
+  
+  # Set Node.js to use the custom CA bundle
+  export NODE_EXTRA_CA_CERTS="$CA_BUNDLE"
+  echo "NODE_EXTRA_CA_CERTS set to: $NODE_EXTRA_CA_CERTS"
+  
+  # For Bun compatibility, also set the CA bundle in system location if writable
+  if [ -f "/etc/ssl/certs/ca-certificates.crt" ] && [ -w "/etc/ssl/certs/" ]; then
+    echo "Appending custom certificates to system CA bundle..."
+    cat "$CA_BUNDLE" >> /etc/ssl/certs/ca-certificates.crt
+  fi
+  
+else
+  echo "No custom CA certificates found in /app/certs"
+fi
+
+# Check if system CA bundle is mounted and use it
+if [ -f "/etc/ssl/certs/ca-certificates.crt" ] && [ ! -L "/etc/ssl/certs/ca-certificates.crt" ]; then
+  # Check if it's a mounted file (not the default symlink)
+  if [ "$(stat -c '%d' /etc/ssl/certs/ca-certificates.crt 2>/dev/null)" != "$(stat -c '%d' / 2>/dev/null)" ] || \
+     [ "$(stat -f '%d' /etc/ssl/certs/ca-certificates.crt 2>/dev/null)" != "$(stat -f '%d' / 2>/dev/null)" ]; then
+    echo "System CA bundle mounted, configuring Node.js to use it..."
+    export NODE_EXTRA_CA_CERTS="/etc/ssl/certs/ca-certificates.crt"
+    echo "NODE_EXTRA_CA_CERTS set to: $NODE_EXTRA_CA_CERTS"
+  fi
+fi
+
+# Optional: If GITEA_SKIP_TLS_VERIFY is set, configure accordingly
+if [ "$GITEA_SKIP_TLS_VERIFY" = "true" ]; then
+  echo "Warning: GITEA_SKIP_TLS_VERIFY is set to true. This is insecure!"
+  export NODE_TLS_REJECT_UNAUTHORIZED=0
+fi
+
 # Generate a secure JWT secret if one isn't provided or is using the default value
 JWT_SECRET_FILE="/app/data/.jwt_secret"
 if [ "$JWT_SECRET" = "your-secret-key-change-this-in-production" ] || [ -z "$JWT_SECRET" ]; then

docs/CA_CERTIFICATES.md

@@ -0,0 +1 @@
+../certs/README.md

package.json

@@ -1,7 +1,7 @@
 {
   "name": "gitea-mirror",
   "type": "module",
-  "version": "2.20.0",
+  "version": "2.22.0",
   "engines": {
     "bun": ">=1.2.9"
   },
@@ -33,7 +33,7 @@
   "dependencies": {
     "@astrojs/check": "^0.9.4",
     "@astrojs/mdx": "^4.3.0",
-    "@astrojs/node": "^9.2.2",
+    "@astrojs/node": "9.3.0",
     "@astrojs/react": "^4.3.0",
     "@octokit/rest": "^22.0.0",
     "@radix-ui/react-accordion": "^1.2.11",
@@ -53,12 +53,12 @@
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-tooltip": "^1.2.7",
-    "@tailwindcss/vite": "^4.1.10",
-    "@tanstack/react-virtual": "^3.13.10",
+    "@tailwindcss/vite": "^4.1.11",
+    "@tanstack/react-virtual": "^3.13.12",
     "@types/canvas-confetti": "^1.9.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "astro": "^5.9.3",
+    "astro": "5.11.0",
     "bcryptjs": "^3.0.2",
     "canvas-confetti": "^1.9.3",
     "class-variance-authority": "^0.7.1",
@@ -67,29 +67,30 @@
     "drizzle-orm": "^0.44.2",
     "fuse.js": "^7.1.0",
     "jsonwebtoken": "^9.0.2",
-    "lucide-react": "^0.515.0",
+    "lucide-react": "^0.525.0",
     "next-themes": "^0.4.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
     "sonner": "^2.0.5",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.10",
-    "tw-animate-css": "^1.3.4",
+    "tailwindcss": "^4.1.11",
+    "tw-animate-css": "^1.3.5",
     "typescript": "^5.8.3",
     "uuid": "^11.1.0",
-    "zod": "^3.25.64"
+    "vaul": "^1.1.2",
+    "zod": "^3.25.75"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/bcryptjs": "^3.0.0",
-    "@types/jsonwebtoken": "^9.0.9",
+    "@types/jsonwebtoken": "^9.0.10",
     "@types/uuid": "^10.0.0",
-    "@vitejs/plugin-react": "^4.5.2",
+    "@vitejs/plugin-react": "^4.6.0",
     "jsdom": "^26.1.0",
     "tsx": "^4.20.3",
-    "vitest": "^3.2.3"
+    "vitest": "^3.2.4"
   },
-  "packageManager": "bun@1.2.16"
+  "packageManager": "bun@1.2.18"
 }

src/components/activity/ActivityList.tsx

@@ -3,11 +3,17 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import type { MirrorJob } from '@/lib/db/schema';
 import Fuse from 'fuse.js';
 import { Button } from '../ui/button';
-import { RefreshCw } from 'lucide-react';
+import { RefreshCw, Check, X, Loader2, Import } from 'lucide-react';
 import { Card } from '../ui/card';
 import { formatDate, getStatusColor } from '@/lib/utils';
 import { Skeleton } from '../ui/skeleton';
 import type { FilterParams } from '@/types/filter';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../ui/tooltip';
 
 type MirrorJobWithKey = MirrorJob & { _rowKey: string };
 
@@ -73,7 +79,7 @@ export default function ActivityList({
     count: filteredActivities.length,
     getScrollElement: () => parentRef.current,
     estimateSize: (idx) =>
-      expandedItems.has(filteredActivities[idx]._rowKey) ? 217 : 120,
+      expandedItems.has(filteredActivities[idx]._rowKey) ? 217 : 100,
     overscan: 5,
     measureElement: (el) => el.getBoundingClientRect().height + 8,
   });
@@ -155,8 +161,8 @@ export default function ActivityList({
               }}
               className='border-b px-4 pt-4'
             >
-              <div className='flex items-start gap-4'>
-                <div className='relative mt-2'>
+              <div className='flex items-start gap-3 sm:gap-4'>
+                <div className='relative mt-2 flex-shrink-0'>
                   <div
                     className={`h-2 w-2 rounded-full ${getStatusColor(
                       activity.status,
@@ -164,25 +170,112 @@ export default function ActivityList({
                   />
                 </div>
 
-                <div className='flex-1'>
-                  <div className='mb-1 flex flex-col sm:flex-row sm:items-center sm:justify-between'>
-                    <p className='font-medium'>{activity.message}</p>
-                    <p className='text-sm text-muted-foreground'>
+                <div className='flex-1 min-w-0'>
+                  <div className='mb-1 flex items-start justify-between gap-2'>
+                    <div className='flex-1 min-w-0'>
+                      {/* Mobile: Show simplified status-based message */}
+                      <div className='block sm:hidden'>
+                        <p className='font-medium flex items-center gap-1.5'>
+                          {activity.status === 'synced' ? (
+                            <>
+                              <Check className='h-4 w-4 text-teal-600 dark:text-teal-400' />
+                              <span className='text-teal-600 dark:text-teal-400'>Sync successful</span>
+                            </>
+                          ) : activity.status === 'mirrored' ? (
+                            <>
+                              <Check className='h-4 w-4 text-emerald-600 dark:text-emerald-400' />
+                              <span className='text-emerald-600 dark:text-emerald-400'>Mirror successful</span>
+                            </>
+                          ) : activity.status === 'failed' ? (
+                            <>
+                              <X className='h-4 w-4 text-rose-600 dark:text-rose-400' />
+                              <span className='text-rose-600 dark:text-rose-400'>Operation failed</span>
+                            </>
+                          ) : activity.status === 'syncing' ? (
+                            <>
+                              <Loader2 className='h-4 w-4 text-indigo-600 dark:text-indigo-400 animate-spin' />
+                              <span className='text-indigo-600 dark:text-indigo-400'>Syncing in progress</span>
+                            </>
+                          ) : activity.status === 'mirroring' ? (
+                            <>
+                              <Loader2 className='h-4 w-4 text-yellow-600 dark:text-yellow-400 animate-spin' />
+                              <span className='text-yellow-600 dark:text-yellow-400'>Mirroring in progress</span>
+                            </>
+                          ) : activity.status === 'imported' ? (
+                            <>
+                              <Import className='h-4 w-4 text-blue-600 dark:text-blue-400' />
+                              <span className='text-blue-600 dark:text-blue-400'>Imported</span>
+                            </>
+                          ) : (
+                            <span>{activity.message}</span>
+                          )}
+                        </p>
+                      </div>
+                      {/* Desktop: Show status with icon and full message in tooltip */}
+                      <div className='hidden sm:block'>
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <p className='font-medium flex items-center gap-1.5 cursor-help'>
+                                {activity.status === 'synced' ? (
+                                  <>
+                                    <Check className='h-4 w-4 text-teal-600 dark:text-teal-400 flex-shrink-0' />
+                                    <span className='text-teal-600 dark:text-teal-400'>Sync successful</span>
+                                  </>
+                                ) : activity.status === 'mirrored' ? (
+                                  <>
+                                    <Check className='h-4 w-4 text-emerald-600 dark:text-emerald-400 flex-shrink-0' />
+                                    <span className='text-emerald-600 dark:text-emerald-400'>Mirror successful</span>
+                                  </>
+                                ) : activity.status === 'failed' ? (
+                                  <>
+                                    <X className='h-4 w-4 text-rose-600 dark:text-rose-400 flex-shrink-0' />
+                                    <span className='text-rose-600 dark:text-rose-400'>Operation failed</span>
+                                  </>
+                                ) : activity.status === 'syncing' ? (
+                                  <>
+                                    <Loader2 className='h-4 w-4 text-indigo-600 dark:text-indigo-400 animate-spin flex-shrink-0' />
+                                    <span className='text-indigo-600 dark:text-indigo-400'>Syncing in progress</span>
+                                  </>
+                                ) : activity.status === 'mirroring' ? (
+                                  <>
+                                    <Loader2 className='h-4 w-4 text-yellow-600 dark:text-yellow-400 animate-spin flex-shrink-0' />
+                                    <span className='text-yellow-600 dark:text-yellow-400'>Mirroring in progress</span>
+                                  </>
+                                ) : activity.status === 'imported' ? (
+                                  <>
+                                    <Import className='h-4 w-4 text-blue-600 dark:text-blue-400 flex-shrink-0' />
+                                    <span className='text-blue-600 dark:text-blue-400'>Imported</span>
+                                  </>
+                                ) : (
+                                  <span className='truncate'>{activity.message}</span>
+                                )}
+                              </p>
+                            </TooltipTrigger>
+                            <TooltipContent side="bottom" align="start" className="max-w-[400px]">
+                              <p className="whitespace-pre-wrap break-words">{activity.message}</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      </div>
+                    </div>
+                    <p className='text-sm text-muted-foreground whitespace-nowrap flex-shrink-0 ml-2'>
                       {formatDate(activity.timestamp)}
                     </p>
                   </div>
 
-                  {activity.repositoryName && (
-                    <p className='mb-2 text-sm text-muted-foreground'>
-                      Repository: {activity.repositoryName}
-                    </p>
-                  )}
-
-                  {activity.organizationName && (
-                    <p className='mb-2 text-sm text-muted-foreground'>
-                      Organization: {activity.organizationName}
-                    </p>
-                  )}
+                  <div className='flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3'>
+                    {activity.repositoryName && (
+                      <p className='text-sm text-muted-foreground truncate'>
+                        <span className='font-medium'>Repo:</span> {activity.repositoryName}
+                      </p>
+                    )}
+                    {activity.organizationName && (
+                      <p className='text-sm text-muted-foreground truncate'>
+                        <span className='font-medium'>Org:</span> {activity.organizationName}
+                      </p>
+                    )}
+                  </div>
 
                   {activity.details && (
                     <div className='mt-2'>
@@ -199,7 +292,7 @@ export default function ActivityList({
                           })
                         }
                       >
-                        {isExpanded ? 'Hide Details' : 'Show Details'}
+                        {isExpanded ? 'Hide Details' : activity.status === 'failed' ? 'Show Error Details' : 'Show Details'}
                       </Button>
 
                       {isExpanded && (

src/components/activity/ActivityLog.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState, useRef } from 'react';
 import { Button } from '@/components/ui/button';
-import { ChevronDown, Download, RefreshCw, Search, Trash2 } from 'lucide-react';
+import { ChevronDown, Download, RefreshCw, Search, Trash2, Filter } from 'lucide-react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -36,6 +36,16 @@ import { toast } from 'sonner';
 import { useLiveRefresh } from '@/hooks/useLiveRefresh';
 import { useConfigStatus } from '@/hooks/useConfigStatus';
 import { useNavigation } from '@/components/layout/MainLayout';
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/components/ui/drawer';
 
 type MirrorJobWithKey = MirrorJob & { _rowKey: string };
 
@@ -343,18 +353,225 @@ export function ActivityLog() {
     setShowCleanupDialog(false);
   };
 
+  // Check if any filters are active
+  const hasActiveFilters = !!(filter.status || filter.type || filter.name);
+  const activeFilterCount = [filter.status, filter.type, filter.name].filter(Boolean).length;
+
+  // Clear all filters
+  const clearFilters = () => {
+    setFilter({
+      searchTerm: filter.searchTerm,
+      status: '',
+      type: '',
+      name: '',
+    });
+  };
+
   /* ------------------------------ UI ------------------------------ */
 
   return (
-    <div className='flex flex-col gap-y-8'>
-      <div className='flex w-full flex-row items-center gap-4'>
+    <div className='flex flex-col gap-y-4 sm:gap-y-8'>
+      {/* Mobile: Search bar with filter and action buttons */}
+      <div className="flex flex-col gap-2 sm:hidden">
+        <div className="flex items-center gap-2 w-full">
+          <div className="relative flex-grow">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <input
+              type="text"
+              placeholder="Search activities..."
+              className="pl-10 pr-3 h-10 w-full rounded-md border border-input bg-background text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              value={filter.searchTerm}
+              onChange={(e) =>
+                setFilter((prev) => ({ ...prev, searchTerm: e.target.value }))
+              }
+            />
+          </div>
+          
+          {/* Mobile Filter Drawer */}
+          <Drawer>
+            <DrawerTrigger asChild>
+              <Button 
+                variant="outline" 
+                size="icon" 
+                className="relative h-10 w-10 shrink-0"
+              >
+                <Filter className="h-4 w-4" />
+                {activeFilterCount > 0 && (
+                  <span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground">
+                    {activeFilterCount}
+                  </span>
+                )}
+              </Button>
+            </DrawerTrigger>
+            <DrawerContent className="max-h-[85vh]">
+              <DrawerHeader className="text-left">
+                <DrawerTitle className="text-lg font-semibold">Filter Activities</DrawerTitle>
+                <DrawerDescription className="text-sm text-muted-foreground">
+                  Narrow down your activity log
+                </DrawerDescription>
+              </DrawerHeader>
+              
+              <div className="px-4 py-6 space-y-6 overflow-y-auto">
+                {/* Active filters summary */}
+                {hasActiveFilters && (
+                  <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
+                    <span className="text-sm font-medium">
+                      {activeFilterCount} filter{activeFilterCount > 1 ? 's' : ''} active
+                    </span>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={clearFilters}
+                      className="h-7 px-2 text-xs"
+                    >
+                      Clear all
+                    </Button>
+                  </div>
+                )}
+
+                {/* Status Filter */}
+                <div className="space-y-2">
+                  <label className="text-sm font-medium flex items-center gap-2">
+                    <span className="text-muted-foreground">By</span> Status
+                    {filter.status && (
+                      <span className="ml-auto text-xs text-muted-foreground">
+                        {filter.status.charAt(0).toUpperCase() + filter.status.slice(1)}
+                      </span>
+                    )}
+                  </label>
+                  <Select
+                    value={filter.status || 'all'}
+                    onValueChange={(v) =>
+                      setFilter((p) => ({
+                        ...p,
+                        status: v === 'all' ? '' : (v as RepoStatus),
+                      }))
+                    }
+                  >
+                    <SelectTrigger className="w-full h-10">
+                      <SelectValue placeholder="All statuses" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {['all', ...repoStatusEnum.options].map((s) => (
+                        <SelectItem key={s} value={s}>
+                          <span className="flex items-center gap-2">
+                            {s !== 'all' && (
+                              <span className={`h-2 w-2 rounded-full ${
+                                s === 'synced' ? 'bg-green-500' :
+                                s === 'failed' ? 'bg-red-500' :
+                                s === 'syncing' ? 'bg-blue-500' :
+                                'bg-yellow-500'
+                              }`} />
+                            )}
+                            {s === 'all' ? 'All statuses' : s[0].toUpperCase() + s.slice(1)}
+                          </span>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* Type Filter */}
+                <div className="space-y-2">
+                  <label className="text-sm font-medium flex items-center gap-2">
+                    <span className="text-muted-foreground">By</span> Type
+                    {filter.type && (
+                      <span className="ml-auto text-xs text-muted-foreground">
+                        {filter.type.charAt(0).toUpperCase() + filter.type.slice(1)}
+                      </span>
+                    )}
+                  </label>
+                  <Select
+                    value={filter.type || 'all'}
+                    onValueChange={(v) =>
+                      setFilter((p) => ({ ...p, type: v === 'all' ? '' : v }))
+                    }
+                  >
+                    <SelectTrigger className="w-full h-10">
+                      <SelectValue placeholder="All types" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {['all', 'repository', 'organization'].map((t) => (
+                        <SelectItem key={t} value={t}>
+                          <span className="flex items-center gap-2">
+                            {t !== 'all' && (
+                              <span className={`h-2 w-2 rounded-full ${
+                                t === 'repository' ? 'bg-blue-500' : 'bg-purple-500'
+                              }`} />
+                            )}
+                            {t === 'all' ? 'All types' : t[0].toUpperCase() + t.slice(1)}
+                          </span>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* Name Filter */}
+                <div className="space-y-2">
+                  <label className="text-sm font-medium flex items-center gap-2">
+                    <span className="text-muted-foreground">By</span> Name
+                    {filter.name && (
+                      <span className="ml-auto text-xs text-muted-foreground">
+                        Selected
+                      </span>
+                    )}
+                  </label>
+                  <ActivityNameCombobox
+                    activities={activities}
+                    value={filter.name || ''}
+                    onChange={(name) => setFilter((p) => ({ ...p, name }))}
+                  />
+                </div>
+              </div>
+              
+              <DrawerFooter className="gap-2 px-4 pt-2 pb-4 border-t">
+                <DrawerClose asChild>
+                  <Button className="w-full" size="sm">
+                    Apply Filters
+                  </Button>
+                </DrawerClose>
+                <DrawerClose asChild>
+                  <Button variant="outline" className="w-full" size="sm">
+                    Cancel
+                  </Button>
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+          
+          
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => fetchActivities(false)}
+            title="Refresh activity log"
+            className="h-10 w-10 shrink-0"
+          >
+            <RefreshCw className="h-4 w-4" />
+          </Button>
+          
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={handleCleanupClick}
+            title="Delete all activities"
+            className="text-destructive hover:text-destructive h-10 w-10 shrink-0"
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Desktop: Original layout */}
+      <div className="hidden sm:flex sm:flex-row sm:items-center sm:gap-4 sm:w-full">
         {/* search input */}
-        <div className='relative flex-1'>
-          <Search className='absolute left-2 top-2.5 h-4 w-4 text-muted-foreground' />
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
           <input
-            type='text'
-            placeholder='Search activities...'
-            className='h-9 w-full rounded-md border border-input bg-background px-3 py-1 pl-8 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
+            type="text"
+            placeholder="Search activities..."
+            className="pl-10 pr-3 h-10 w-full rounded-md border border-input bg-background text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             value={filter.searchTerm}
             onChange={(e) =>
               setFilter((prev) => ({
@@ -365,27 +582,66 @@ export function ActivityLog() {
           />
         </div>
 
-        {/* status select */}
-        <Select
-          value={filter.status || 'all'}
-          onValueChange={(v) =>
-            setFilter((p) => ({
-              ...p,
-              status: v === 'all' ? '' : (v as RepoStatus),
-            }))
-          }
-        >
-          <SelectTrigger className='h-9 w-[140px] max-h-9'>
-            <SelectValue placeholder='All Status' />
-          </SelectTrigger>
-          <SelectContent>
-            {['all', ...repoStatusEnum.options].map((s) => (
-              <SelectItem key={s} value={s}>
-                {s === 'all' ? 'All Status' : s[0].toUpperCase() + s.slice(1)}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+        {/* Filter controls */}
+        <div className="flex items-center gap-2">
+          {/* status select */}
+          <Select
+            value={filter.status || 'all'}
+            onValueChange={(v) =>
+              setFilter((p) => ({
+                ...p,
+                status: v === 'all' ? '' : (v as RepoStatus),
+              }))
+            }
+          >
+            <SelectTrigger className="w-[140px] h-10">
+              <SelectValue placeholder="All statuses" />
+            </SelectTrigger>
+            <SelectContent>
+              {['all', ...repoStatusEnum.options].map((s) => (
+                <SelectItem key={s} value={s}>
+                  <span className="flex items-center gap-2">
+                    {s !== 'all' && (
+                      <span className={`h-2 w-2 rounded-full ${
+                        s === 'synced' ? 'bg-green-500' :
+                        s === 'failed' ? 'bg-red-500' :
+                        s === 'syncing' ? 'bg-blue-500' :
+                        'bg-yellow-500'
+                      }`} />
+                    )}
+                    {s === 'all' ? 'All statuses' : s[0].toUpperCase() + s.slice(1)}
+                  </span>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          {/* type select */}
+          <Select
+            value={filter.type || 'all'}
+            onValueChange={(v) =>
+              setFilter((p) => ({ ...p, type: v === 'all' ? '' : v }))
+            }
+          >
+            <SelectTrigger className="w-[140px] h-10">
+              <SelectValue placeholder="All types" />
+            </SelectTrigger>
+            <SelectContent>
+              {['all', 'repository', 'organization'].map((t) => (
+                <SelectItem key={t} value={t}>
+                  <span className="flex items-center gap-2">
+                    {t !== 'all' && (
+                      <span className={`h-2 w-2 rounded-full ${
+                        t === 'repository' ? 'bg-blue-500' : 'bg-purple-500'
+                      }`} />
+                    )}
+                    {t === 'all' ? 'All types' : t[0].toUpperCase() + t.slice(1)}
+                  </span>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
 
         {/* repo/org name combobox */}
         <ActivityNameCombobox
@@ -394,64 +650,49 @@ export function ActivityLog() {
           onChange={(name) => setFilter((p) => ({ ...p, name }))}
         />
 
-        {/* type select */}
-        <Select
-          value={filter.type || 'all'}
-          onValueChange={(v) =>
-            setFilter((p) => ({ ...p, type: v === 'all' ? '' : v }))
-          }
-        >
-          <SelectTrigger className='h-9 w-[140px] max-h-9'>
-            <SelectValue placeholder='All Types' />
-          </SelectTrigger>
-          <SelectContent>
-            {['all', 'repository', 'organization'].map((t) => (
-              <SelectItem key={t} value={t}>
-                {t === 'all' ? 'All Types' : t[0].toUpperCase() + t.slice(1)}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+        {/* Action buttons */}
+        <div className="flex items-center gap-2 ml-auto">
+          {/* export dropdown */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm" className="h-10">
+                <Download className="h-4 w-4 mr-2" />
+                Export
+                <ChevronDown className="h-4 w-4 ml-1" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={exportAsCSV}>
+                Export as CSV
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={exportAsJSON}>
+                Export as JSON
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
 
-        {/* export dropdown */}
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant='outline' className='flex items-center gap-1'>
-              <Download className='mr-1 h-4 w-4' />
-              Export
-              <ChevronDown className='ml-1 h-4 w-4' />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem onClick={exportAsCSV}>
-              Export as CSV
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={exportAsJSON}>
-              Export as JSON
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+          {/* refresh */}
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => fetchActivities(false)}
+            title="Refresh activity log"
+            className="h-10 w-10"
+          >
+            <RefreshCw className="h-4 w-4" />
+          </Button>
 
-        {/* refresh */}
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => fetchActivities(false)} // Manual refresh, show loading skeleton
-          title="Refresh activity log"
-        >
-          <RefreshCw className='h-4 w-4' />
-        </Button>
-
-        {/* cleanup all activities */}
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={handleCleanupClick}
-          title="Delete all activities"
-          className="text-destructive hover:text-destructive"
-        >
-          <Trash2 className='h-4 w-4' />
-        </Button>
+          {/* cleanup all activities */}
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={handleCleanupClick}
+            title="Delete all activities"
+            className="text-destructive hover:text-destructive h-10 w-10"
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </div>
       </div>
 
       {/* activity list */}
@@ -486,6 +727,26 @@ export function ActivityLog() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* Mobile FAB for Export - only visible on mobile */}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button 
+            className="fixed bottom-4 right-4 rounded-full h-12 w-12 shadow-lg p-0 z-10 sm:hidden"
+            variant="default"
+          >
+            <Download className="h-6 w-6" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" side="top" className="mb-2">
+          <DropdownMenuItem onClick={exportAsCSV}>
+            Export as CSV
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={exportAsJSON}>
+            Export as JSON
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </div>
   );
 }

src/components/activity/ActivityNameCombobox.tsx

@@ -41,9 +41,14 @@ export function ActivityNameCombobox({ activities, value, onChange }: ActivityNa
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-[180px] justify-between"
+          className="w-full sm:w-[180px] justify-between h-10"
         >
-          {value ? value : "All Names"}
+          <span className={cn(
+            "truncate",
+            !value && "text-muted-foreground"
+          )}>
+            {value || "All names"}
+          </span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
@@ -62,7 +67,7 @@ export function ActivityNameCombobox({ activities, value, onChange }: ActivityNa
                 }}
               >
                 <Check className={cn("mr-2 h-4 w-4", value === "" ? "opacity-100" : "opacity-0")} />
-                All Names
+                All names
               </CommandItem>
               {names.map((name) => (
                 <CommandItem

src/components/config/AutomationSettings.tsx

@@ -98,6 +98,25 @@ export function AutomationSettings({
         <CardTitle className="text-lg font-semibold flex items-center gap-2">
           <Zap className="h-5 w-5" />
           Automation & Maintenance
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button className="ml-1 inline-flex items-center justify-center rounded-full w-4 h-4 bg-muted hover:bg-muted/80 transition-colors">
+                  <Info className="h-3 w-3" />
+                  <span className="sr-only">Background operations info</span>
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right" className="max-w-xs">
+                <div className="space-y-2">
+                  <p className="font-medium">Background Operations</p>
+                  <p className="text-xs">
+                    These automated tasks run in the background to keep your mirrors up-to-date and maintain optimal database performance. 
+                    Choose intervals that match your workflow and repository update frequency.
+                  </p>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </CardTitle>
       </CardHeader>
       
@@ -311,21 +330,6 @@ export function AutomationSettings({
             </div>
           </div>
         </div>
-
-        <div className="mt-6 p-4 bg-blue-50/50 dark:bg-blue-950/20 rounded-lg border border-blue-200 dark:border-blue-900">
-          <div className="flex gap-3">
-            <Info className="h-4 w-4 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
-            <div className="space-y-1">
-              <p className="text-sm font-medium text-blue-900 dark:text-blue-100">
-                Background Operations
-              </p>
-              <p className="text-xs text-blue-800 dark:text-blue-200/80">
-                These automated tasks run in the background to keep your mirrors up-to-date and maintain optimal database performance. 
-                Choose intervals that match your workflow and repository update frequency.
-              </p>
-            </div>
-          </div>
-        </div>
       </CardContent>
     </Card>
   );

src/components/config/ConfigTabs.tsx

@@ -563,17 +563,17 @@ export function ConfigTabs() {
   ) : (
     <div className="space-y-6">
       {/* Header section */}
-      <div className="flex flex-row justify-between items-start">
+      <div className="flex flex-col md:flex-row justify-between gap-y-4 items-start">
         <div className="flex flex-col gap-y-1.5">
           <h1 className="text-2xl font-semibold leading-none tracking-tight">
-            Configuration Settings
+            Configuration
           </h1>
           <p className="text-sm text-muted-foreground">
             Configure your GitHub and Gitea connections, and set up automatic
             mirroring.
           </p>
         </div>
-        <div className="flex gap-x-4">
+        <div className="flex gap-x-4 w-full md:w-auto">
           <Button
             onClick={handleImportGitHubData}
             disabled={isSyncing || !isGitHubConfigValid()}
@@ -584,6 +584,7 @@ export function ConfigTabs() {
                 ? 'Import in progress'
                 : 'Import GitHub Data'
             }
+            className="w-full md:w-auto"
           >
             {isSyncing ? (
               <>

src/components/config/GitHubConfigForm.tsx

@@ -88,15 +88,17 @@ export function GitHubConfigForm({
 
   return (
     <Card className="w-full h-full flex flex-col">
-      <CardHeader className="flex flex-row items-center justify-between gap-4">
+      <CardHeader className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
         <CardTitle className="text-lg font-semibold">
           GitHub Configuration
         </CardTitle>
+        {/* Desktop: Show button in header */}
         <Button
           type="button"
-          variant="outline"
+          variant="default"
           onClick={testConnection}
           disabled={isLoading || !config.token}
+          className="hidden sm:inline-flex"
         >
           {isLoading ? "Testing..." : "Test Connection"}
         </Button>
@@ -200,6 +202,17 @@ export function GitHubConfigForm({
             if (onAdvancedOptionsAutoSave) onAdvancedOptionsAutoSave(newOptions);
           }}
         />
+        
+        {/* Mobile: Show button at bottom */}
+        <Button
+          type="button"
+          variant="default"
+          onClick={testConnection}
+          disabled={isLoading || !config.token}
+          className="sm:hidden w-full"
+        >
+          {isLoading ? "Testing..." : "Test Connection"}
+        </Button>
     </CardContent>
 
     </Card>

src/components/config/GitHubMirrorSettings.tsx

@@ -124,7 +124,7 @@ export function GitHubMirrorSettings({
             </div>
           </div>
 
-          <div className="flex items-start justify-between gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div className="flex items-start space-x-3">
               <Checkbox
                 id="starred-repos"
@@ -145,10 +145,10 @@ export function GitHubMirrorSettings({
               </div>
             </div>
 
-            {/* Starred repos content selection - inline to prevent layout shift */}
+            {/* Starred repos content selection - responsive layout */}
             <div className={cn(
-              "flex items-center justify-end transition-opacity duration-200",
-              githubConfig.mirrorStarred ? "opacity-100" : "opacity-0 pointer-events-none"
+              "flex items-center justify-end transition-opacity duration-200 mt-3 md:mt-0",
+              githubConfig.mirrorStarred ? "opacity-100" : "opacity-0 hidden pointer-events-none"
             )}>
               <Popover>
                 <PopoverTrigger asChild>
@@ -156,7 +156,7 @@ export function GitHubMirrorSettings({
                     variant="outline"
                     size="sm"
                     disabled={!githubConfig.mirrorStarred}
-                    className="h-8 text-xs font-normal min-w-[140px] justify-between"
+                    className="h-8 text-xs font-normal min-w-[140px] md:min-w-[140px] justify-between"
                   >
                     <span>
                       {advancedOptions.skipStarredIssues ? (
@@ -325,7 +325,7 @@ export function GitHubMirrorSettings({
             </div>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div className="flex items-start space-x-3">
               <Checkbox
                 id="mirror-metadata"
@@ -346,10 +346,10 @@ export function GitHubMirrorSettings({
               </div>
             </div>
 
-            {/* Metadata multi-select - inline to prevent layout shift */}
+            {/* Metadata multi-select - responsive layout */}
             <div className={cn(
-              "flex items-center justify-end transition-opacity duration-200",
-              mirrorOptions.mirrorMetadata ? "opacity-100" : "opacity-0 pointer-events-none"
+              "flex items-center justify-end transition-opacity duration-200 mt-3 md:mt-0",
+              mirrorOptions.mirrorMetadata ? "opacity-100" : "opacity-0 hidden pointer-events-none"
             )}>
               <Popover>
                 <PopoverTrigger asChild>
@@ -357,7 +357,7 @@ export function GitHubMirrorSettings({
                     variant="outline"
                     size="sm"
                     disabled={!mirrorOptions.mirrorMetadata}
-                    className="h-8 text-xs font-normal min-w-[140px] justify-between"
+                    className="h-8 text-xs font-normal min-w-[140px] md:min-w-[140px] justify-between"
                   >
                     <span>
                       {(() => {

src/components/config/GiteaConfigForm.tsx

@@ -27,6 +27,8 @@ export function GiteaConfigForm({ config, setConfig, onAutoSave, isAutoSaving, g
   // Derive the mirror strategy from existing config for backward compatibility
   const getMirrorStrategy = (): MirrorStrategy => {
     if (config.mirrorStrategy) return config.mirrorStrategy;
+    // Check for mixed mode: when we have both organization and personalReposOrg defined
+    if (config.organization && config.personalReposOrg && !config.preserveOrgStructure) return "mixed";
     if (config.preserveOrgStructure) return "preserve";
     if (config.organization && config.organization !== config.username) return "single-org";
     return "flat-user";
@@ -55,6 +57,16 @@ export function GiteaConfigForm({ config, setConfig, onAutoSave, isAutoSaving, g
         newConfig.mirrorStrategy = "flat-user";
         newConfig.organization = "";
         break;
+      case "mixed":
+        newConfig.preserveOrgStructure = false;
+        newConfig.mirrorStrategy = "mixed";
+        if (!newConfig.organization) {
+          newConfig.organization = "github-mirrors";
+        }
+        if (!newConfig.personalReposOrg) {
+          newConfig.personalReposOrg = "github-personal";
+        }
+        break;
     }
     
     setConfig(newConfig);
@@ -124,15 +136,17 @@ export function GiteaConfigForm({ config, setConfig, onAutoSave, isAutoSaving, g
 
   return (
     <Card className="w-full h-full flex flex-col">
-      <CardHeader className="flex flex-row items-center justify-between gap-4">
+      <CardHeader className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
         <CardTitle className="text-lg font-semibold">
           Gitea Configuration
         </CardTitle>
+        {/* Desktop: Show button in header */}
         <Button
           type="button"
-          variant="outline"
+          variant="default"
           onClick={testConnection}
           disabled={isLoading || !config.url || !config.token}
+          className="hidden sm:inline-flex"
         >
           {isLoading ? "Testing..." : "Test Connection"}
         </Button>
@@ -240,6 +254,17 @@ export function GiteaConfigForm({ config, setConfig, onAutoSave, isAutoSaving, g
             if (onAutoSave) onAutoSave(newConfig);
           }}
         />
+        
+        {/* Mobile: Show button at bottom */}
+        <Button
+          type="button"
+          variant="default"
+          onClick={testConnection}
+          disabled={isLoading || !config.url || !config.token}
+          className="sm:hidden w-full"
+        >
+          {isLoading ? "Testing..." : "Test Connection"}
+        </Button>
       </CardContent>
     </Card>
   );

src/components/config/OrganizationConfiguration.tsx

@@ -183,7 +183,7 @@ export const OrganizationConfiguration: React.FC<OrganizationConfigurationProps>
                         <Icon className="h-3.5 w-3.5" />
                         <span>{option.label}</span>
                       </div>
-                      <Info className="h-3 w-3 text-muted-foreground opacity-50 group-hover:opacity-100 transition-opacity" />
+                      <Info className="h-3 w-3 text-muted-foreground opacity-50 group-hover:opacity-100 transition-opacity hidden sm:inline-block" />
                     </button>
                   </TooltipTrigger>
                   <TooltipContent>

src/components/config/OrganizationStrategy.tsx

@@ -24,7 +24,7 @@ const strategyConfig = {
   preserve: {
     title: "Preserve Structure",
     icon: FolderTree,
-    description: "Keep the exact same organization structure as GitHub",
+    description: "Keep the exact same org structure as GitHub",
     color: "text-blue-600 dark:text-blue-400",
     bgColor: "bg-blue-50 dark:bg-blue-950/20",
     borderColor: "border-blue-200 dark:border-blue-900",
@@ -60,7 +60,7 @@ const strategyConfig = {
   "mixed": {
     title: "Mixed Mode",
     icon: GitBranch,
-    description: "user repos in single org, org repos preserve structure",
+    description: "Personal repos in single org, org repos preserve structure",
     color: "text-orange-600 dark:text-orange-400",
     bgColor: "bg-orange-50 dark:bg-orange-950/20",
     borderColor: "border-orange-200 dark:border-orange-900",
@@ -281,7 +281,7 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
 }) => {
   return (
     <div className="space-y-4">
-      <div className="flex items-start justify-between gap-4">
+      <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
         <div className="flex-1">
           <h4 className="text-sm font-medium mb-3 flex items-center gap-2">
             <Building className="h-4 w-4" />
@@ -303,7 +303,7 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
                 <span>Override Options</span>
               </button>
             </HoverCardTrigger>
-            <HoverCardContent side="left" align="start" className="w-[380px]">
+            <HoverCardContent side="bottom" align="start" className="w-[380px]">
               <div className="space-y-3">
                 <div>
                   <h4 className="font-medium text-sm mb-1.5">Fine-tune Your Mirror Destinations</h4>
@@ -371,15 +371,16 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
                       !isSelected && "border-muted"
                     )}
                   >
-                    <div className="p-3">
-                      <div className="flex items-center gap-3">
+                    <div className="p-3 sm:p-4">
+                      <div className="flex items-start gap-3">
                         <RadioGroupItem 
                           value={key} 
                           id={key} 
+                          className="mt-1"
                         />
                         
                         <div className={cn(
-                          "rounded-lg p-2",
+                          "rounded-lg p-2 flex-shrink-0",
                           isSelected ? config.bgColor : "bg-muted dark:bg-muted/50"
                         )}>
                           <Icon className={cn(
@@ -388,38 +389,40 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
                           )} />
                         </div>
                         
-                        <div className="flex-1">
-                          <div className="flex items-center gap-2">
-                            <h4 className="font-medium text-sm">{config.title}</h4>
-                          </div>
-                          <p className="text-xs text-muted-foreground mt-0.5">
-                            {config.description}
-                          </p>
-                        </div>
-                        
-                        <HoverCard openDelay={200}>
-                          <HoverCardTrigger asChild>
-                            <span 
-                              className="inline-flex p-1.5 hover:bg-muted rounded-md transition-colors cursor-help"
-                              onClick={(e) => e.stopPropagation()}
-                            >
-                              <Info className="h-4 w-4 text-muted-foreground" />
-                            </span>
-                          </HoverCardTrigger>
-                          <HoverCardContent side="left" align="center" className="w-[500px]">
-                            <div className="space-y-3">
-                              <h4 className="font-medium text-sm">Repository Mapping Preview</h4>
-                              <MappingPreview 
-                                strategy={key}
-                                config={config}
-                                destinationOrg={destinationOrg}
-                                starredReposOrg={starredReposOrg}
-                                githubUsername={githubUsername}
-                                giteaUsername={giteaUsername}
-                              />
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-start justify-between gap-2">
+                            <div className="flex-1">
+                              <h4 className="font-medium text-sm">{config.title}</h4>
+                              <p className="text-xs text-muted-foreground mt-1 leading-relaxed">
+                                {config.description}
+                              </p>
                             </div>
-                          </HoverCardContent>
-                        </HoverCard>
+                            
+                            <HoverCard openDelay={200}>
+                              <HoverCardTrigger asChild>
+                                <span 
+                                  className="inline-flex p-1 sm:p-1.5 hover:bg-muted rounded-md transition-colors cursor-help flex-shrink-0 ml-2"
+                                  onClick={(e) => e.stopPropagation()}
+                                >
+                                  <Info className="h-3.5 w-3.5 sm:h-4 sm:w-4 text-muted-foreground" />
+                                </span>
+                              </HoverCardTrigger>
+                              <HoverCardContent side="left" align="center" className="w-[500px]">
+                                <div className="space-y-3">
+                                  <h4 className="font-medium text-sm">Repository Mapping Preview</h4>
+                                  <MappingPreview 
+                                    strategy={key}
+                                    config={config}
+                                    destinationOrg={destinationOrg}
+                                    starredReposOrg={starredReposOrg}
+                                    githubUsername={githubUsername}
+                                    giteaUsername={giteaUsername}
+                                  />
+                                </div>
+                              </HoverCardContent>
+                            </HoverCard>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </Card>

src/components/dashboard/Dashboard.tsx

@@ -57,8 +57,6 @@ export function Dashboard() {
     }
 
     setActivities((prevActivities) => [data, ...prevActivities]);
-
-    console.log("Received new log:", data);
   }, []);
 
   // Use the SSE hook
@@ -179,16 +177,16 @@ export function Dashboard() {
 
   return isLoading || !connected ? (
     <div className="flex flex-col gap-y-6">
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 md:gap-6">
         <StatusCardSkeleton />
         <StatusCardSkeleton />
         <StatusCardSkeleton />
         <StatusCardSkeleton />
       </div>
 
-      <div className="flex gap-x-6 items-start">
+      <div className="flex flex-col lg:flex-row gap-6 items-start">
         {/* Repository List Skeleton */}
-        <div className="w-1/2 border rounded-lg p-4">
+        <div className="w-full lg:w-1/2 border rounded-lg p-4">
           <div className="flex justify-between items-center mb-4">
             <Skeleton className="h-6 w-32" />
             <Skeleton className="h-9 w-24" />
@@ -201,7 +199,7 @@ export function Dashboard() {
         </div>
 
         {/* Recent Activity Skeleton */}
-        <div className="w-1/2 border rounded-lg p-4">
+        <div className="w-full lg:w-1/2 border rounded-lg p-4">
           <div className="flex justify-between items-center mb-4">
             <Skeleton className="h-6 w-32" />
             <Skeleton className="h-9 w-24" />
@@ -217,24 +215,24 @@ export function Dashboard() {
   ) : (
     <div className="flex flex-col gap-y-6">
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 md:gap-6">
         <StatusCard
-          title="Total Repositories"
+          title="Repositories"
           value={repoCount}
           icon={<GitFork className="h-4 w-4" />}
-          description="Repositories being mirrored"
+          description="Total in mirror queue"
         />
         <StatusCard
           title="Mirrored"
           value={mirroredCount}
           icon={<FlipHorizontal className="h-4 w-4" />}
-          description="Successfully mirrored"
+          description="Synced to Gitea"
         />
         <StatusCard
           title="Organizations"
           value={orgCount}
           icon={<Building2 className="h-4 w-4" />}
-          description="GitHub organizations"
+          description="From GitHub"
         />
         <StatusCard
           title="Last Sync"
@@ -254,11 +252,15 @@ export function Dashboard() {
         />
       </div>
 
-      <div className="flex gap-x-6 items-start">
-        <RepositoryList repositories={repositories} />
+      <div className="flex flex-col lg:flex-row gap-6 items-start">
+        <div className="w-full lg:w-1/2">
+          <RepositoryList repositories={repositories} />
+        </div>
 
-        {/* the api already sends 10 activities only but slicing in case of realtime updates */}
-        <RecentActivity activities={activities.slice(0, 10)} />
+        <div className="w-full lg:w-1/2">
+          {/* the api already sends 10 activities only but slicing in case of realtime updates */}
+          <RecentActivity activities={activities.slice(0, 10)} />
+        </div>
       </div>
     </div>
   );

src/components/dashboard/RecentActivity.tsx

@@ -16,7 +16,7 @@ export function RecentActivity({ activities }: RecentActivityProps) {
           <a href="/activity">View All</a>
         </Button>
       </CardHeader>
-      <CardContent className="max-h-[calc(100dvh-22.5rem)] overflow-y-auto">
+      <CardContent className="max-h-[300px] sm:max-h-[400px] lg:max-h-[calc(100dvh-22.5rem)] overflow-y-auto">
         <div className="flex flex-col divide-y divide-border">
           {activities.length === 0 ? (
             <p className="text-sm text-muted-foreground">No recent activity</p>
@@ -31,7 +31,7 @@ export function RecentActivity({ activities }: RecentActivityProps) {
                   />
                 </div>
                 <div className="flex-1 space-y-1">
-                  <p className="text-sm font-medium leading-none">
+                  <p className="text-sm font-medium leading-none break-words">
                     {activity.message}
                   </p>
                   <p className="text-xs text-muted-foreground">

src/components/dashboard/RepositoryList.tsx

@@ -54,7 +54,7 @@ export function RepositoryList({ repositories }: RepositoryListProps) {
           <a href="/repositories">View All</a>
         </Button>
       </CardHeader>
-      <CardContent className="max-h-[calc(100dvh-22.5rem)] overflow-y-auto">
+      <CardContent className="max-h-[300px] sm:max-h-[400px] lg:max-h-[calc(100dvh-22.5rem)] overflow-y-auto">
         {repositories.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-6 text-center">
             <GitFork className="h-10 w-10 text-muted-foreground mb-4" />
@@ -71,11 +71,11 @@ export function RepositoryList({ repositories }: RepositoryListProps) {
             {repositories.map((repo, index) => (
               <div
                 key={index}
-                className="flex items-center justify-between gap-x-4 py-4"
+                className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-x-4 py-4"
               >
                 <div className="flex-1">
-                  <div className="flex items-center gap-2">
-                    <h4 className="text-sm font-medium">{repo.name}</h4>
+                  <div className="flex items-center flex-wrap gap-2">
+                    <h4 className="text-sm font-medium break-all">{repo.name}</h4>
                     {repo.isPrivate && (
                       <span className="rounded-full bg-muted px-2 py-0.5 text-xs">
                         Private
@@ -99,13 +99,13 @@ export function RepositoryList({ repositories }: RepositoryListProps) {
                   </div>
                 </div>
 
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-2 sm:ml-auto">
                   <div
                     className={`h-2 w-2 rounded-full ${getStatusColor(
                       repo.status
                     )}`}
                   />
-                  <span className="text-xs capitalize w-[3rem]">
+                  <span className="text-xs capitalize w-[3rem] sm:w-auto">
                     {/* setting the minimum width to 3rem corresponding to the largest status (mirrored) so that all are left alligned */}
                     {repo.status}
                   </span>

src/components/layout/Header.tsx

@@ -7,13 +7,21 @@ import { toast } from "sonner";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useLiveRefresh } from "@/hooks/useLiveRefresh";
 import { useConfigStatus } from "@/hooks/useConfigStatus";
+import { Menu, LogOut } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 interface HeaderProps {
   currentPage?: "dashboard" | "repositories" | "organizations" | "configuration" | "activity-log";
   onNavigate?: (page: string) => void;
+  onMenuClick: () => void;
 }
 
-export function Header({ currentPage, onNavigate }: HeaderProps) {
+export function Header({ currentPage, onNavigate, onMenuClick }: HeaderProps) {
   const { user, logout, isLoading } = useAuth();
   const { isLiveEnabled, toggleLive } = useLiveRefresh();
   const { isFullyConfigured, isLoading: configLoading } = useConfigStatus();
@@ -54,39 +62,52 @@ export function Header({ currentPage, onNavigate }: HeaderProps) {
 
   return (
     <header className="border-b bg-background">
-      <div className="flex h-[4.5rem] items-center justify-between px-6">
-        <button
-          onClick={() => {
-            if (currentPage !== 'dashboard') {
-              window.history.pushState({}, '', '/');
-              onNavigate?.('dashboard');
-            }
-          }}
-          className="flex items-center gap-2 py-1 hover:opacity-80 transition-opacity"
-        >
-          <img
-            src="/logo-light.svg"
-            alt="Gitea Mirror Logo"
-            className="h-6 w-6 dark:hidden"
-          />
-          <img
-            src="/logo-dark.svg"
-            alt="Gitea Mirror Logo"
-            className="h-6 w-6 hidden dark:block"
-          />
-          <span className="text-xl font-bold">Gitea Mirror</span>
-        </button>
+      <div className="flex h-[4.5rem] items-center justify-between px-4 sm:px-6">
+        <div className="flex items-center gap-2">
+          {/* Hamburger Menu Button - Mobile Only */}
+          <Button
+            variant="outline"
+            size="lg"
+            className="lg:hidden"
+            onClick={onMenuClick}
+          >
+            <Menu className="h-5 w-5" />
+            <span className="sr-only">Toggle menu</span>
+          </Button>
+          
+          <button
+            onClick={() => {
+              if (currentPage !== 'dashboard') {
+                window.history.pushState({}, '', '/');
+                onNavigate?.('dashboard');
+              }
+            }}
+            className="flex items-center gap-2 py-1 hover:opacity-80 transition-opacity"
+          >
+            <img
+              src="/logo-light.svg"
+              alt="Gitea Mirror Logo"
+              className="h-6 w-6 dark:hidden"
+            />
+            <img
+              src="/logo-dark.svg"
+              alt="Gitea Mirror Logo"
+              className="h-6 w-6 hidden dark:block"
+            />
+            <span className="text-xl font-bold hidden sm:inline">Gitea Mirror</span>
+          </button>
+        </div>
 
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2 sm:gap-4">
           {showLiveButton && (
             <Button
               variant="outline"
               size="lg"
-              className="flex items-center gap-2"
+              className="flex items-center gap-1.5 px-3 sm:px-4"
               onClick={toggleLive}
               title={getTooltip()}
             >
-              <div className={`w-3 h-3 rounded-full ${
+              <div className={`size-4 sm:size-3 rounded-full ${
                 configLoading
                   ? 'bg-yellow-400 animate-pulse'
                   : isLiveActive
@@ -95,7 +116,7 @@ export function Header({ currentPage, onNavigate }: HeaderProps) {
                       ? 'bg-orange-400'
                       : 'bg-gray-500'
               }`} />
-              <span>LIVE</span>
+              <span className="text-sm font-medium hidden sm:inline">LIVE</span>
             </Button>
           )}
 
@@ -104,19 +125,26 @@ export function Header({ currentPage, onNavigate }: HeaderProps) {
           {isLoading ? (
             <AuthButtonsSkeleton />
           ) : user ? (
-            <>
-              <Avatar>
-                <AvatarImage src="" alt="@shadcn" />
-                <AvatarFallback>
-                  {user.username.charAt(0).toUpperCase()}
-                </AvatarFallback>
-              </Avatar>
-              <Button variant="outline" size="lg" onClick={handleLogout}>
-                Logout
-              </Button>
-            </>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="lg" className="relative h-10 w-10 rounded-full p-0">
+                  <Avatar className="h-full w-full">
+                    <AvatarImage src="" alt="@shadcn" />
+                    <AvatarFallback>
+                      {user.username.charAt(0).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-48">
+                <DropdownMenuItem onClick={handleLogout} className="cursor-pointer">
+                  <LogOut className="h-4 w-4 mr-2" />
+                  Logout
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           ) : (
-            <Button variant="outline" size="lg" asChild>
+            <Button variant="outline" size="sm" asChild>
               <a href="/login">Login</a>
             </Button>
           )}

src/components/layout/MainLayout.tsx

@@ -44,6 +44,7 @@ function AppWithProviders({ page: initialPage }: AppProps) {
   const { isLoading: configLoading } = useConfigStatus();
   const [currentPage, setCurrentPage] = useState<AppProps['page']>(initialPage);
   const [navigationKey, setNavigationKey] = useState(0);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
 
   useRepoSync({
     userId: user?.id,
@@ -99,10 +100,18 @@ function AppWithProviders({ page: initialPage }: AppProps) {
   return (
     <NavigationContext.Provider value={{ navigationKey }}>
       <main className="flex min-h-screen flex-col">
-        <Header currentPage={currentPage} onNavigate={handleNavigation} />
-        <div className="flex flex-1">
-          <Sidebar onNavigate={handleNavigation} />
-          <section className="flex-1 p-6 overflow-y-auto h-[calc(100dvh-4.55rem)]">
+        <Header 
+          currentPage={currentPage} 
+          onNavigate={handleNavigation} 
+          onMenuClick={() => setSidebarOpen(!sidebarOpen)}
+        />
+        <div className="flex flex-1 relative">
+          <Sidebar 
+            onNavigate={handleNavigation} 
+            isOpen={sidebarOpen}
+            onClose={() => setSidebarOpen(false)}
+          />
+          <section className="flex-1 p-4 sm:p-6 overflow-y-auto h-[calc(100dvh-4.55rem)] w-full lg:w-[calc(100%-16rem)]">
             {currentPage === "dashboard" && <Dashboard />}
             {currentPage === "repositories" && <Repository />}
             {currentPage === "organizations" && <Organization />}

src/components/layout/Sidebar.tsx

@@ -7,16 +7,17 @@ import { VersionInfo } from "./VersionInfo";
 interface SidebarProps {
   className?: string;
   onNavigate?: (page: string) => void;
+  isOpen: boolean;
+  onClose: () => void;
 }
 
-export function Sidebar({ className, onNavigate }: SidebarProps) {
+export function Sidebar({ className, onNavigate, isOpen, onClose }: SidebarProps) {
   const [currentPath, setCurrentPath] = useState<string>("");
 
   useEffect(() => {
     // Hydration happens here
     const path = window.location.pathname;
     setCurrentPath(path);
-    console.log("Hydrated path:", path); // Should log now
   }, []);
 
   // Listen for URL changes (browser back/forward)
@@ -50,53 +51,77 @@ export function Sidebar({ className, onNavigate }: SidebarProps) {
 
     const pageName = pageMap[href] || 'dashboard';
     onNavigate?.(pageName);
+    
+    // Close sidebar on mobile after navigation
+    if (window.innerWidth < 1024) {
+      onClose();
+    }
   };
 
   return (
-    <aside className={cn("w-64 border-r bg-background", className)}>
-      <div className="flex flex-col h-full pt-4">
-        <nav className="flex flex-col gap-y-1 pl-2 pr-3">
-          {links.map((link, index) => {
-            const isActive = currentPath === link.href;
-            const Icon = link.icon;
+    <>
+      {/* Mobile Backdrop */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 backdrop-blur-sm z-40 lg:hidden"
+          onClick={onClose}
+        />
+      )}
+      
+      {/* Sidebar */}
+      <aside 
+        className={cn(
+          "fixed lg:static inset-y-0 left-0 z-50 w-64 bg-background border-r flex flex-col h-full lg:h-[calc(100vh-4.5rem)] transition-transform duration-200 ease-in-out lg:translate-x-0",
+          isOpen ? "translate-x-0" : "-translate-x-full",
+          className
+        )}
+      >
+        <div className="flex flex-col h-full">
+          <nav className="flex flex-col gap-y-1 lg:gap-y-1 pl-2 pr-3 pt-4 flex-shrink-0">
+            {links.map((link, index) => {
+              const isActive = currentPath === link.href;
+              const Icon = link.icon;
 
-            return (
-              <button
-                key={index}
-                onClick={(e) => handleNavigation(link.href, e)}
-                className={cn(
-                  "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors w-full text-left",
-                  isActive
-                    ? "bg-primary text-primary-foreground"
-                    : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-                )}
+              return (
+                <button
+                  key={index}
+                  onClick={(e) => handleNavigation(link.href, e)}
+                  className={cn(
+                    "flex items-center gap-3 rounded-md px-3 py-3 lg:py-2 text-sm lg:text-sm font-medium transition-colors w-full text-left",
+                    isActive
+                      ? "bg-primary text-primary-foreground"
+                      : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                  )}
+                >
+                  <Icon className="h-5 w-5 lg:h-4 lg:w-4" />
+                  {link.label}
+                </button>
+              );
+            })}
+          </nav>
+
+          <div className="flex-1 min-h-0" />
+
+          <div className="px-4 py-4 flex-shrink-0">
+            <div className="rounded-md bg-muted p-3 lg:p-3">
+              <h4 className="text-sm font-medium mb-2">Need Help?</h4>
+              <p className="text-xs text-muted-foreground mb-3 lg:mb-2">
+                Check out the documentation for help with setup and configuration.
+              </p>
+              <a
+                href="/docs"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1.5 text-xs lg:text-xs text-primary hover:underline py-2 lg:py-0"
               >
-                <Icon className="h-4 w-4" />
-                {link.label}
-              </button>
-            );
-          })}
-        </nav>
-
-        <div className="mt-auto px-4 py-4">
-          <div className="rounded-md bg-muted p-3">
-            <h4 className="text-sm font-medium mb-2">Need Help?</h4>
-            <p className="text-xs text-muted-foreground mb-2">
-              Check out the documentation for help with setup and configuration.
-            </p>
-            <a
-              href="/docs"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center gap-1 text-xs text-primary hover:underline"
-            >
-              Documentation
-              <ExternalLink className="h-3 w-3" />
-            </a>
+                Documentation
+                <ExternalLink className="h-3.5 w-3.5 lg:h-3 lg:w-3" />
+              </a>
+            </div>
+            <VersionInfo />
           </div>
-          <VersionInfo />
         </div>
-      </div>
-    </aside>
+      </aside>
+    </>
   );
 }

src/components/organizations/AddOrganizationDialog.tsx

@@ -63,12 +63,12 @@ export default function AddOrganizationDialog({
   return (
     <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
       <DialogTrigger asChild>
-        <Button className="fixed bottom-6 right-6 rounded-full h-12 w-12 shadow-lg p-0">
+        <Button className="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 rounded-full h-12 w-12 shadow-lg p-0 z-10">
           <Plus className="h-6 w-6" />
         </Button>
       </DialogTrigger>
 
-      <DialogContent className="sm:max-w-[425px] gap-0 gap-y-6">
+      <DialogContent className="w-[calc(100%-2rem)] sm:max-w-[425px] gap-0 gap-y-6 mx-4 sm:mx-0">
         <DialogHeader>
           <DialogTitle>Add Organization</DialogTitle>
           <DialogDescription>

src/components/organizations/MirrorDestinationEditor.tsx

@@ -69,19 +69,19 @@ export function MirrorDestinationEditor({
   };
 
   return (
-    <div className={cn("flex items-center gap-2", className)}>
-      <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-        <Building2 className="h-3 w-3" />
-        <span className="font-medium">{organizationName}</span>
-        <ArrowRight className="h-3 w-3" />
+    <div className={cn("flex items-center gap-2 w-full", className)}>
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground min-w-0 flex-1">
+        <Building2 className="h-3 w-3 flex-shrink-0" />
+        <span className="font-medium truncate">{organizationName}</span>
+        <ArrowRight className="h-3 w-3 flex-shrink-0" />
         <span className={cn(
-          "font-medium",
+          "font-medium truncate",
           hasOverride && "text-orange-600 dark:text-orange-400"
         )}>
           {effectiveDestination}
         </span>
         {hasOverride && (
-          <Badge variant="outline" className="h-4 px-1 text-[10px] border-orange-600 text-orange-600 dark:border-orange-400 dark:text-orange-400">
+          <Badge variant="outline" className="h-4 px-1 text-[10px] border-orange-600 text-orange-600 dark:border-orange-400 dark:text-orange-400 flex-shrink-0">
             custom
           </Badge>
         )}
@@ -92,11 +92,11 @@ export function MirrorDestinationEditor({
           <Button
             size="sm"
             variant="ghost"
-            className="h-6 w-6 p-0 opacity-60 hover:opacity-100"
+            className="h-10 w-10 sm:h-6 sm:w-6 p-0 opacity-60 hover:opacity-100"
             title="Edit mirror destination"
             disabled={isUpdating || isLoading}
           >
-            <Edit3 className="h-3 w-3" />
+            <Edit3 className="h-5 w-5 sm:h-3 sm:w-3" />
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-80" align="end">

src/components/organizations/Organization.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
-import { Search, RefreshCw, FlipHorizontal } from "lucide-react";
+import { Search, RefreshCw, FlipHorizontal, Filter } from "lucide-react";
 import type { MirrorJob, Organization } from "@/lib/db/schema";
 import { OrganizationList } from "./OrganizationsList";
 import AddOrganizationDialog from "./AddOrganizationDialog";
@@ -27,6 +27,16 @@ import { toast } from "sonner";
 import { useConfigStatus } from "@/hooks/useConfigStatus";
 import { useNavigation } from "@/components/layout/MainLayout";
 import { useLiveRefresh } from "@/hooks/useLiveRefresh";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
 
 export function Organization() {
   const [organizations, setOrganizations] = useState<Organization[]>([]);
@@ -54,8 +64,6 @@ export function Organization() {
         )
       );
     }
-
-    console.log("Received new log:", data);
   }, []);
 
   // Use the SSE hook
@@ -290,110 +298,351 @@ export function Organization() {
     }
   };
 
+  // Check if any filters are active
+  const hasActiveFilters = !!(filter.membershipRole || filter.status);
+  const activeFilterCount = [filter.membershipRole, filter.status].filter(Boolean).length;
 
+  // Clear all filters
+  const clearFilters = () => {
+    setFilter({
+      searchTerm: filter.searchTerm,
+      membershipRole: "",
+      status: "",
+    });
+  };
 
   return (
-    <div className="flex flex-col gap-y-8">
-      {/* Combine search and actions into a single flex row */}
-      <div className="flex flex-row items-center gap-4 w-full flex-wrap">
-        <div className="relative flex-grow">
-          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-          <input
-            type="text"
-            placeholder="Search Organizations..."
-            className="pl-8 h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-            value={filter.searchTerm}
-            onChange={(e) =>
-              setFilter((prev) => ({ ...prev, searchTerm: e.target.value }))
-            }
-          />
+    <div className="flex flex-col gap-y-4 sm:gap-y-8">
+      {/* Search and filters */}
+      <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4 w-full">
+        {/* Mobile: Search bar with filter button */}
+        <div className="flex items-center gap-2 w-full sm:hidden">
+          <div className="relative flex-grow">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <input
+              type="text"
+              placeholder="Search organizations..."
+              className="pl-10 pr-3 h-10 w-full rounded-md border border-input bg-background text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              value={filter.searchTerm}
+              onChange={(e) =>
+                setFilter((prev) => ({ ...prev, searchTerm: e.target.value }))
+              }
+            />
+          </div>
+          
+          {/* Mobile Filter Drawer */}
+          <Drawer>
+            <DrawerTrigger asChild>
+              <Button 
+                variant="outline" 
+                size="icon" 
+                className="relative h-10 w-10 shrink-0"
+              >
+                <Filter className="h-4 w-4" />
+                {activeFilterCount > 0 && (
+                  <span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground">
+                    {activeFilterCount}
+                  </span>
+                )}
+              </Button>
+            </DrawerTrigger>
+            <DrawerContent className="max-h-[85vh]">
+              <DrawerHeader className="text-left">
+                <DrawerTitle className="text-lg font-semibold">Filter Organizations</DrawerTitle>
+                <DrawerDescription className="text-sm text-muted-foreground">
+                  Narrow down your organization list
+                </DrawerDescription>
+              </DrawerHeader>
+              
+              <div className="px-4 py-6 space-y-6 overflow-y-auto">
+                {/* Active filters summary */}
+                {hasActiveFilters && (
+                  <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
+                    <span className="text-sm font-medium">
+                      {activeFilterCount} filter{activeFilterCount > 1 ? 's' : ''} active
+                    </span>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={clearFilters}
+                      className="h-7 px-2 text-xs"
+                    >
+                      Clear all
+                    </Button>
+                  </div>
+                )}
+
+                {/* Role Filter */}
+                <div className="space-y-2">
+                  <label className="text-sm font-medium flex items-center gap-2">
+                    <span className="text-muted-foreground">By</span> Role
+                    {filter.membershipRole && (
+                      <span className="ml-auto text-xs text-muted-foreground">
+                        {filter.membershipRole
+                          .replace(/_/g, " ")
+                          .replace(/\b\w/g, (c) => c.toUpperCase())}
+                      </span>
+                    )}
+                  </label>
+                  <Select
+                    value={filter.membershipRole || "all"}
+                    onValueChange={(value) =>
+                      setFilter((prev) => ({
+                        ...prev,
+                        membershipRole: value === "all" ? "" : (value as MembershipRole),
+                      }))
+                    }
+                  >
+                    <SelectTrigger className="w-full h-10">
+                      <SelectValue placeholder="All roles" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {["all", ...membershipRoleEnum.options].map((role) => (
+                        <SelectItem key={role} value={role}>
+                          <span className="flex items-center gap-2">
+                            {role !== "all" && (
+                              <span className={`h-2 w-2 rounded-full ${
+                                role === "admin" ? "bg-purple-500" : "bg-blue-500"
+                              }`} />
+                            )}
+                            {role === "all"
+                              ? "All roles"
+                              : role
+                                  .replace(/_/g, " ")
+                                  .replace(/\b\w/g, (c) => c.toUpperCase())}
+                          </span>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* Status Filter */}
+                <div className="space-y-2">
+                  <label className="text-sm font-medium flex items-center gap-2">
+                    <span className="text-muted-foreground">By</span> Status
+                    {filter.status && (
+                      <span className="ml-auto text-xs text-muted-foreground">
+                        {filter.status.charAt(0).toUpperCase() + filter.status.slice(1)}
+                      </span>
+                    )}
+                  </label>
+                  <Select
+                    value={filter.status || "all"}
+                    onValueChange={(value) =>
+                      setFilter((prev) => ({
+                        ...prev,
+                        status:
+                          value === "all"
+                            ? ""
+                            : (value as
+                                | ""
+                                | "imported"
+                                | "mirroring"
+                                | "mirrored"
+                                | "failed"
+                                | "syncing"
+                                | "synced"),
+                      }))
+                    }
+                  >
+                    <SelectTrigger className="w-full h-10">
+                      <SelectValue placeholder="All statuses" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {[
+                        "all",
+                        "imported",
+                        "mirroring",
+                        "mirrored",
+                        "failed",
+                        "syncing",
+                        "synced",
+                      ].map((status) => (
+                        <SelectItem key={status} value={status}>
+                          <span className="flex items-center gap-2">
+                            {status !== "all" && (
+                              <span className={`h-2 w-2 rounded-full ${
+                                status === "synced" || status === "mirrored" ? "bg-green-500" :
+                                status === "failed" ? "bg-red-500" :
+                                status === "syncing" || status === "mirroring" ? "bg-blue-500" :
+                                "bg-yellow-500"
+                              }`} />
+                            )}
+                            {status === "all"
+                              ? "All statuses"
+                              : status.charAt(0).toUpperCase() + status.slice(1)}
+                          </span>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              
+              <DrawerFooter className="gap-2 px-4 pt-2 pb-4 border-t">
+                <DrawerClose asChild>
+                  <Button className="w-full" size="sm">
+                    Apply Filters
+                  </Button>
+                </DrawerClose>
+                <DrawerClose asChild>
+                  <Button variant="outline" className="w-full" size="sm">
+                    Cancel
+                  </Button>
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+          
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={handleRefresh}
+            title="Refresh organizations"
+            className="h-10 w-10 shrink-0"
+          >
+            <RefreshCw className="h-4 w-4" />
+          </Button>
+          
+          <Button
+            variant="default"
+            size="icon"
+            onClick={handleMirrorAllOrgs}
+            disabled={isLoading || loadingOrgIds.size > 0}
+            title="Mirror all organizations"
+            className="h-10 w-10 shrink-0"
+          >
+            <FlipHorizontal className="h-4 w-4" />
+          </Button>
         </div>
 
-        {/* Membership Role Filter */}
-        <Select
-          value={filter.membershipRole || "all"}
-          onValueChange={(value) =>
-            setFilter((prev) => ({
-              ...prev,
-              membershipRole: value === "all" ? "" : (value as MembershipRole),
-            }))
-          }
-        >
-          <SelectTrigger className="w-[140px] h-9 max-h-9">
-            <SelectValue placeholder="All Roles" />
-          </SelectTrigger>
-          <SelectContent>
-            {["all", ...membershipRoleEnum.options].map((role) => (
-              <SelectItem key={role} value={role}>
-                {role === "all"
-                  ? "All Roles"
-                  : role
-                      .replace(/_/g, " ")
-                      .replace(/\b\w/g, (c) => c.toUpperCase())}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+        {/* Desktop: Original layout */}
+        <div className="hidden sm:flex sm:flex-row sm:items-center sm:gap-4 sm:w-full">
+          <div className="relative flex-grow">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <input
+              type="text"
+              placeholder="Search organizations..."
+              className="pl-10 pr-3 h-10 w-full rounded-md border border-input bg-background text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              value={filter.searchTerm}
+              onChange={(e) =>
+                setFilter((prev) => ({ ...prev, searchTerm: e.target.value }))
+              }
+            />
+          </div>
 
-        {/* Status Filter */}
-        <Select
-          value={filter.status || "all"}
-          onValueChange={(value) =>
-            setFilter((prev) => ({
-              ...prev,
-              status:
-                value === "all"
-                  ? ""
-                  : (value as
-                      | ""
-                      | "imported"
-                      | "mirroring"
-                      | "mirrored"
-                      | "failed"
-                      | "syncing"
-                      | "synced"),
-            }))
-          }
-        >
-          <SelectTrigger className="w-[140px] h-9 max-h-9">
-            <SelectValue placeholder="All Statuses" />
-          </SelectTrigger>
-          <SelectContent>
-            {[
-              "all",
-              "imported",
-              "mirroring",
-              "mirrored",
-              "failed",
-              "syncing",
-              "synced",
-            ].map((status) => (
-              <SelectItem key={status} value={status}>
-                {status === "all"
-                  ? "All Statuses"
-                  : status.charAt(0).toUpperCase() + status.slice(1)}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+          {/* Filter controls */}
+          <div className="flex items-center gap-2">
+            {/* Membership Role Filter */}
+            <Select
+              value={filter.membershipRole || "all"}
+              onValueChange={(value) =>
+                setFilter((prev) => ({
+                  ...prev,
+                  membershipRole: value === "all" ? "" : (value as MembershipRole),
+                }))
+              }
+            >
+              <SelectTrigger className="w-[140px] h-10">
+                <SelectValue placeholder="All roles" />
+              </SelectTrigger>
+              <SelectContent>
+                {["all", ...membershipRoleEnum.options].map((role) => (
+                  <SelectItem key={role} value={role}>
+                    <span className="flex items-center gap-2">
+                      {role !== "all" && (
+                        <span className={`h-2 w-2 rounded-full ${
+                          role === "admin" ? "bg-purple-500" : "bg-blue-500"
+                        }`} />
+                      )}
+                      {role === "all"
+                        ? "All roles"
+                        : role
+                            .replace(/_/g, " ")
+                            .replace(/\b\w/g, (c) => c.toUpperCase())}
+                    </span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
 
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={handleRefresh}
-          title="Refresh organizations"
-        >
-          <RefreshCw className="h-4 w-4" />
-        </Button>
+            {/* Status Filter */}
+            <Select
+              value={filter.status || "all"}
+              onValueChange={(value) =>
+                setFilter((prev) => ({
+                  ...prev,
+                  status:
+                    value === "all"
+                      ? ""
+                      : (value as
+                          | ""
+                          | "imported"
+                          | "mirroring"
+                          | "mirrored"
+                          | "failed"
+                          | "syncing"
+                          | "synced"),
+                }))
+              }
+            >
+              <SelectTrigger className="w-[140px] h-10">
+                <SelectValue placeholder="All statuses" />
+              </SelectTrigger>
+              <SelectContent>
+                {[
+                  "all",
+                  "imported",
+                  "mirroring",
+                  "mirrored",
+                  "failed",
+                  "syncing",
+                  "synced",
+                ].map((status) => (
+                  <SelectItem key={status} value={status}>
+                    <span className="flex items-center gap-2">
+                      {status !== "all" && (
+                        <span className={`h-2 w-2 rounded-full ${
+                          status === "synced" || status === "mirrored" ? "bg-green-500" :
+                          status === "failed" ? "bg-red-500" :
+                          status === "syncing" || status === "mirroring" ? "bg-blue-500" :
+                          "bg-yellow-500"
+                        }`} />
+                      )}
+                      {status === "all"
+                        ? "All statuses"
+                        : status.charAt(0).toUpperCase() + status.slice(1)}
+                    </span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
 
-        <Button
-          variant="default"
-          onClick={handleMirrorAllOrgs}
-          disabled={isLoading || loadingOrgIds.size > 0}
-        >
-          <FlipHorizontal className="h-4 w-4 mr-2" />
-          Mirror All
-        </Button>
+          {/* Action buttons */}
+          <div className="flex items-center gap-2 ml-auto">
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={handleRefresh}
+              title="Refresh organizations"
+              className="h-10 w-10"
+            >
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+
+            <Button
+              variant="default"
+              onClick={handleMirrorAllOrgs}
+              disabled={isLoading || loadingOrgIds.size > 0}
+              className="h-10 px-4"
+            >
+              <FlipHorizontal className="h-4 w-4 mr-2" />
+              Mirror All
+            </Button>
+          </div>
+        </div>
       </div>
 
       <OrganizationList
@@ -404,7 +653,9 @@ export function Organization() {
         loadingOrgIds={loadingOrgIds}
         onMirror={handleMirrorOrg}
         onAddOrganization={() => setIsDialogOpen(true)}
-        onRefresh={() => fetchOrganizations(false)}
+        onRefresh={async () => {
+          await fetchOrganizations(false);
+        }}
       />
 
       <AddOrganizationDialog

src/components/organizations/OrganizationsList.tsx

@@ -127,9 +127,9 @@ export function OrganizationList({
   }, [organizations, filter]);
 
   return isLoading ? (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <div className="grid grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(27rem,1fr))] gap-4">
       {Array.from({ length: 5 }).map((_, i) => (
-        <Skeleton key={i} className="h-[136px] w-full" />
+        <Skeleton key={i} className="h-[11.25rem] w-full" />
       ))}
     </div>
   ) : filteredOrganizations.length === 0 ? (
@@ -161,7 +161,7 @@ export function OrganizationList({
       )}
     </div>
   ) : (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <div className="grid grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(27rem,1fr))] gap-4 pb-20 sm:pb-0">
       {filteredOrganizations.map((org, index) => {
         const isLoading = loadingOrgIds.has(org.id ?? "");
         const statusBadge = getStatusBadge(org.status);
@@ -171,20 +171,33 @@ export function OrganizationList({
           <Card 
             key={index} 
             className={cn(
-              "overflow-hidden p-4 transition-all hover:shadow-md min-h-[160px]",
+              "overflow-hidden p-4 sm:p-6 transition-all hover:shadow-lg hover:border-foreground/10 w-full",
               isLoading && "opacity-75"
             )}
           >
-            <div className="flex items-start justify-between mb-3">
-              <div className="flex-1">
-                <div className="flex items-center gap-2 mb-1">
-                  <Building2 className="h-5 w-5 text-muted-foreground" />
-                  <a 
-                    href={`/repositories?organization=${encodeURIComponent(org.name || '')}`}
-                    className="font-medium hover:underline cursor-pointer"
-                  >
-                    {org.name}
-                  </a>
+            {/* Mobile Layout */}
+            <div className="flex flex-col gap-3 sm:hidden">
+              {/* Header with org name and badges */}
+              <div className="space-y-2">
+                <div className="flex items-start justify-between gap-2">
+                  <div className="flex items-center gap-2 min-w-0">
+                    <Building2 className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+                    <a 
+                      href={`/repositories?organization=${encodeURIComponent(org.name || '')}`}
+                      className="font-medium hover:underline cursor-pointer truncate"
+                    >
+                      {org.name}
+                    </a>
+                  </div>
+                  <Badge variant={statusBadge.variant} className="flex-shrink-0">
+                    {StatusIcon && <StatusIcon className={cn(
+                      "h-3 w-3",
+                      org.status === "mirroring" && "animate-pulse"
+                    )} />}
+                    {statusBadge.label}
+                  </Badge>
+                </div>
+                <div className="flex items-center gap-2">
                   <span
                     className={`text-xs px-2 py-0.5 rounded-full capitalize ${
                       org.membershipRole === "member"
@@ -195,128 +208,166 @@ export function OrganizationList({
                     {org.membershipRole}
                   </span>
                 </div>
+              </div>
 
-                {/* Destination override section */}
-                <div className="mt-2">
-                  <MirrorDestinationEditor
-                    organizationId={org.id!}
-                    organizationName={org.name!}
-                    currentDestination={org.destinationOrg}
-                    onUpdate={(newDestination) => handleUpdateDestination(org.id!, newDestination)}
-                    isUpdating={isLoading}
-                  />
+              {/* Destination override section */}
+              <div>
+                <MirrorDestinationEditor
+                  organizationId={org.id!}
+                  organizationName={org.name!}
+                  currentDestination={org.destinationOrg}
+                  onUpdate={(newDestination) => handleUpdateDestination(org.id!, newDestination)}
+                  isUpdating={isLoading}
+                />
+              </div>
+            </div>
+
+            {/* Desktop Layout */}
+            <div className="hidden sm:block">
+              {/* Header with org icon, name, role badge and status */}
+              <div className="flex items-start justify-between mb-4">
+                <div className="flex items-start gap-3">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-3 mb-1">
+                      <a 
+                        href={`/repositories?organization=${encodeURIComponent(org.name || '')}`}
+                        className="text-xl font-semibold hover:underline cursor-pointer"
+                      >
+                        {org.name}
+                      </a>
+                      <Badge 
+                        variant={org.membershipRole === "member" ? "secondary" : "default"}
+                        className="capitalize"
+                      >
+                        {org.membershipRole}
+                      </Badge>
+                    </div>
+                  </div>
+                </div>
+                
+                {/* Status badge */}
+                <Badge variant={statusBadge.variant} className="flex items-center gap-1">
+                  {StatusIcon && <StatusIcon className={cn(
+                    "h-3.5 w-3.5",
+                    org.status === "mirroring" && "animate-pulse"
+                  )} />}
+                  {statusBadge.label}
+                </Badge>
+              </div>
+
+              {/* Destination override section */}
+              <div className="mb-4">
+                <MirrorDestinationEditor
+                  organizationId={org.id!}
+                  organizationName={org.name!}
+                  currentDestination={org.destinationOrg}
+                  onUpdate={(newDestination) => handleUpdateDestination(org.id!, newDestination)}
+                  isUpdating={isLoading}
+                />
+              </div>
+
+              {/* Repository statistics */}
+              <div className="mb-4">
+                <div className="flex items-center gap-4 text-sm">
+                  <div>
+                    <span className="font-semibold text-lg">{org.repositoryCount}</span>
+                    <span className="text-muted-foreground ml-1">
+                      {org.repositoryCount === 1 ? "repository" : "repositories"}
+                    </span>
+                  </div>
+                  
+                  {/* Repository breakdown */}
+                  {isLoading || (org.status === "mirroring" && org.publicRepositoryCount === undefined) ? (
+                    <div className="flex items-center gap-3">
+                      <Skeleton className="h-4 w-20" />
+                      <Skeleton className="h-4 w-20" />
+                    </div>
+                  ) : (
+                    <div className="flex items-center gap-3">
+                      {org.publicRepositoryCount !== undefined && (
+                        <div className="flex items-center gap-1.5">
+                          <div className="h-2.5 w-2.5 rounded-full bg-emerald-500" />
+                          <span className="text-muted-foreground">
+                            {org.publicRepositoryCount} public
+                          </span>
+                        </div>
+                      )}
+                      {org.privateRepositoryCount !== undefined && org.privateRepositoryCount > 0 && (
+                        <div className="flex items-center gap-1.5">
+                          <div className="h-2.5 w-2.5 rounded-full bg-orange-500" />
+                          <span className="text-muted-foreground">
+                            {org.privateRepositoryCount} private
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  )}
                 </div>
               </div>
-              <Badge variant={statusBadge.variant} className="ml-2">
-                {StatusIcon && <StatusIcon className={cn(
-                  "h-3 w-3",
-                  org.status === "mirroring" && "animate-pulse"
-                )} />}
-                {statusBadge.label}
-              </Badge>
             </div>
 
-            <div className="text-sm text-muted-foreground mb-4">
-              <div className="flex items-center justify-between">
-                <span className="font-medium">
-                  {org.repositoryCount}{" "}
-                  {org.repositoryCount === 1 ? "repository" : "repositories"}
-                </span>
-              </div>
-              {/* Always render this section to prevent layout shift */}
-              <div className="flex gap-4 mt-2 text-xs min-h-[20px]">
-                {isLoading || (org.status === "mirroring" && org.publicRepositoryCount === undefined) ? (
-                  <>
-                    <Skeleton className="h-3 w-16" />
-                    <Skeleton className="h-3 w-16" />
-                  </>
-                ) : (
-                  <>
-                    {org.publicRepositoryCount !== undefined ? (
-                      <span className="flex items-center gap-1">
-                        <div className="h-2 w-2 rounded-full bg-green-500" />
-                        {org.publicRepositoryCount} public
-                      </span>
-                    ) : null}
-                    {org.privateRepositoryCount !== undefined && org.privateRepositoryCount > 0 ? (
-                      <span className="flex items-center gap-1">
-                        <div className="h-2 w-2 rounded-full bg-orange-500" />
-                        {org.privateRepositoryCount} private
-                      </span>
-                    ) : null}
-                    {org.forkRepositoryCount !== undefined && org.forkRepositoryCount > 0 ? (
-                      <span className="flex items-center gap-1">
-                        <div className="h-2 w-2 rounded-full bg-blue-500" />
-                        {org.forkRepositoryCount} fork{org.forkRepositoryCount !== 1 ? 's' : ''}
-                      </span>
-                    ) : null}
-                    {/* Show a placeholder if no counts are available to maintain height */}
-                    {org.publicRepositoryCount === undefined && 
-                     org.privateRepositoryCount === undefined && 
-                     org.forkRepositoryCount === undefined && (
-                      <span className="invisible">Loading counts...</span>
-                    )}
-                  </>
-                )}
-              </div>
-            </div>
-
-            <div className="flex items-center justify-between">
+            {/* Mobile Actions */}
+            <div className="flex flex-col gap-3 sm:hidden">
               <div className="flex items-center gap-2">
                 {org.status === "imported" && (
                   <Button
-                    size="sm"
+                    size="default"
                     onClick={() => org.id && onMirror({ orgId: org.id })}
                     disabled={isLoading}
+                    className="w-full h-10"
                   >
                     {isLoading ? (
                       <>
-                        <RefreshCw className="h-3 w-3 animate-spin mr-2" />
+                        <RefreshCw className="h-4 w-4 animate-spin mr-2" />
                         Starting...
                       </>
                     ) : (
-                      "Mirror"
+                      <>
+                        <RefreshCw className="h-4 w-4 mr-2" />
+                        Mirror Organization
+                      </>
                     )}
                   </Button>
                 )}
                 
                 {org.status === "mirroring" && (
-                  <Button size="sm" disabled variant="outline">
-                    <RefreshCw className="h-3 w-3 animate-spin mr-2" />
+                  <Button size="default" disabled variant="outline" className="w-full h-10">
+                    <RefreshCw className="h-4 w-4 animate-spin mr-2" />
                     Mirroring...
                   </Button>
                 )}
                 
                 {org.status === "mirrored" && (
-                  <Button size="sm" disabled variant="secondary">
-                    <Check className="h-3 w-3 mr-2" />
+                  <Button size="default" disabled variant="secondary" className="w-full h-10">
+                    <Check className="h-4 w-4 mr-2" />
                     Mirrored
                   </Button>
                 )}
                 
                 {org.status === "failed" && (
                   <Button
-                    size="sm"
+                    size="default"
                     variant="destructive"
                     onClick={() => org.id && onMirror({ orgId: org.id })}
                     disabled={isLoading}
+                    className="w-full h-10"
                   >
                     {isLoading ? (
                       <>
-                        <RefreshCw className="h-3 w-3 animate-spin mr-2" />
+                        <RefreshCw className="h-4 w-4 animate-spin mr-2" />
                         Retrying...
                       </>
                     ) : (
                       <>
-                        <AlertCircle className="h-3 w-3 mr-2" />
-                        Retry
+                        <AlertCircle className="h-4 w-4 mr-2" />
+                        Retry Mirror
                       </>
                     )}
                   </Button>
                 )}
               </div>
-
-              <div className="flex items-center gap-1">
+              
+              <div className="flex items-center gap-2 justify-center">
                 {(() => {
                   const giteaUrl = getGiteaOrgUrl(org);
 
@@ -337,34 +388,166 @@ export function OrganizationList({
                   }
 
                   return giteaUrl ? (
-                    <Button variant="ghost" size="icon" asChild>
+                    <Button variant="outline" size="default" asChild className="flex-1 h-10 min-w-0">
                       <a
                         href={giteaUrl}
                         target="_blank"
                         rel="noopener noreferrer"
                         title={tooltip}
+                        className="flex items-center justify-center gap-2"
                       >
-                        <SiGitea className="h-4 w-4" />
+                        <SiGitea className="h-4 w-4 flex-shrink-0" />
+                        <span className="text-xs">Gitea</span>
                       </a>
                     </Button>
                   ) : (
-                    <Button variant="ghost" size="icon" disabled title={tooltip}>
+                    <Button variant="outline" size="default" disabled title={tooltip} className="flex-1 h-10">
                       <SiGitea className="h-4 w-4" />
+                      <span className="text-xs ml-2">Gitea</span>
                     </Button>
                   );
                 })()}
-                <Button variant="ghost" size="icon" asChild>
+                <Button variant="outline" size="default" asChild className="flex-1 h-10 min-w-0">
                   <a
                     href={`https://github.com/${org.name}`}
                     target="_blank"
                     rel="noopener noreferrer"
                     title="View on GitHub"
+                    className="flex items-center justify-center gap-2"
                   >
-                     <SiGithub className="h-4 w-4" />
+                     <SiGithub className="h-4 w-4 flex-shrink-0" />
+                     <span className="text-xs">GitHub</span>
                   </a>
                 </Button>
               </div>
             </div>
+            
+            {/* Desktop Actions */}
+            <div className="hidden sm:flex items-center justify-between mt-4">
+              <div className="flex items-center gap-2">
+                {org.status === "imported" && (
+                  <Button
+                    size="default"
+                    onClick={() => org.id && onMirror({ orgId: org.id })}
+                    disabled={isLoading}
+                  >
+                    {isLoading ? (
+                      <>
+                        <RefreshCw className="h-4 w-4 animate-spin mr-2" />
+                        Starting mirror...
+                      </>
+                    ) : (
+                      <>
+                        <RefreshCw className="h-4 w-4 mr-2" />
+                        Mirror Organization
+                      </>
+                    )}
+                  </Button>
+                )}
+                
+                {org.status === "mirroring" && (
+                  <Button size="default" disabled variant="outline">
+                    <RefreshCw className="h-4 w-4 animate-spin mr-2" />
+                    Mirroring in progress...
+                  </Button>
+                )}
+                
+                {org.status === "mirrored" && (
+                  <Button size="default" disabled variant="secondary">
+                    <Check className="h-4 w-4 mr-2" />
+                    Successfully mirrored
+                  </Button>
+                )}
+                
+                {org.status === "failed" && (
+                  <Button
+                    size="default"
+                    variant="destructive"
+                    onClick={() => org.id && onMirror({ orgId: org.id })}
+                    disabled={isLoading}
+                  >
+                    {isLoading ? (
+                      <>
+                        <RefreshCw className="h-4 w-4 animate-spin mr-2" />
+                        Retrying...
+                      </>
+                    ) : (
+                      <>
+                        <AlertCircle className="h-4 w-4 mr-2" />
+                        Retry Mirror
+                      </>
+                    )}
+                  </Button>
+                )}
+              </div>
+
+              <div className="flex items-center gap-2">
+                {(() => {
+                  const giteaUrl = getGiteaOrgUrl(org);
+
+                  // Determine tooltip based on status and configuration
+                  let tooltip: string;
+                  if (!giteaConfig?.url) {
+                    tooltip = "Gitea not configured";
+                  } else if (org.status === 'imported') {
+                    tooltip = "Organization not yet mirrored to Gitea";
+                  } else if (org.status === 'failed') {
+                    tooltip = "Organization mirroring failed";
+                  } else if (org.status === 'mirroring') {
+                    tooltip = "Organization is being mirrored to Gitea";
+                  } else if (giteaUrl) {
+                    tooltip = "View on Gitea";
+                  } else {
+                    tooltip = "Gitea organization not available";
+                  }
+
+                  return (
+                    <div className="flex items-center border rounded-md">
+                      <Button 
+                        variant="ghost" 
+                        size="sm" 
+                        asChild={!!giteaUrl}
+                        disabled={!giteaUrl} 
+                        title={tooltip}
+                        className="rounded-none rounded-l-md border-r"
+                      >
+                        {giteaUrl ? (
+                          <a
+                            href={giteaUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            <SiGitea className="h-4 w-4 mr-2" />
+                            Gitea
+                          </a>
+                        ) : (
+                          <>
+                            <SiGitea className="h-4 w-4 mr-2" />
+                            Gitea
+                          </>
+                        )}
+                      </Button>
+                      <Button 
+                        variant="ghost" 
+                        size="sm" 
+                        asChild
+                        className="rounded-none rounded-r-md"
+                      >
+                        <a
+                          href={`https://github.com/${org.name}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          title="View on GitHub"
+                        >
+                          <SiGithub className="h-4 w-4 mr-2" />
+                          GitHub
+                        </a>
+                      </Button>
+                    </div>
+                  );
+                })()}
+              </div>
+            </div>
           </Card>
         );
       })}

src/components/repositories/AddRepositoryDialog.tsx

@@ -60,12 +60,12 @@ export default function AddRepositoryDialog({
   return (
     <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
       <DialogTrigger asChild>
-        <Button className="fixed bottom-6 right-6 rounded-full h-12 w-12 shadow-lg p-0">
+        <Button className="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 rounded-full h-12 w-12 shadow-lg p-0 z-10">
           <Plus className="h-6 w-6" />
         </Button>
       </DialogTrigger>
 
-      <DialogContent className="sm:max-w-[425px] gap-0 gap-y-6">
+      <DialogContent className="w-[calc(100%-2rem)] sm:max-w-[425px] gap-0 gap-y-6 mx-4 sm:mx-0">
         <DialogHeader>
           <DialogTitle>Add Repository</DialogTitle>
           <DialogDescription>

src/components/repositories/Repository.tsx

@@ -18,8 +18,18 @@ import {
   SelectValue,
 } from "../ui/select";
 import { Button } from "@/components/ui/button";
-import { Search, RefreshCw, FlipHorizontal, RotateCcw, X } from "lucide-react";
+import { Search, RefreshCw, FlipHorizontal, RotateCcw, X, Filter } from "lucide-react";
 import type { MirrorRepoRequest, MirrorRepoResponse } from "@/types/mirror";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
 import { useSSE } from "@/hooks/useSEE";
 import { useFilterParams } from "@/hooks/useFilterParams";
 import { toast } from "sonner";
@@ -71,8 +81,6 @@ export default function Repository() {
         )
       );
     }
-
-    console.log("Received new log:", data);
   }, []);
 
   // Use the SSE hook
@@ -559,86 +567,353 @@ export default function Repository() {
   
   const availableActions = getAvailableActions();
 
+  // Check if any filters are active
+  const hasActiveFilters = !!(filter.owner || filter.organization || filter.status);
+  const activeFilterCount = [filter.owner, filter.organization, filter.status].filter(Boolean).length;
+
+  // Clear all filters
+  const clearFilters = () => {
+    setFilter({
+      searchTerm: filter.searchTerm,
+      status: "",
+      organization: "",
+      owner: "",
+    });
+  };
+
   return (
-    <div className="flex flex-col gap-y-8">
-      {/* Combine search and actions into a single flex row */}
-      <div className="flex flex-row items-center gap-4 w-full flex-wrap">
-        <div className="relative flex-grow min-w-[180px]">
-          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-          <input
-            type="text"
-            placeholder="Search repositories..."
-            className="pl-8 h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-            value={filter.searchTerm}
-            onChange={(e) =>
-              setFilter((prev) => ({ ...prev, searchTerm: e.target.value }))
-            }
-          />
-        </div>
+    <div className="flex flex-col gap-y-4 sm:gap-y-8">
+      {/* Search and filters */}
+      <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4 w-full">
+        {/* Mobile: Search bar with filter button */}
+        <div className="flex items-center gap-2 w-full sm:hidden">
+          <div className="relative flex-grow">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <input
+              type="text"
+              placeholder="Search repositories..."
+              className="pl-10 pr-3 h-10 w-full rounded-md border border-input bg-background text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              value={filter.searchTerm}
+              onChange={(e) =>
+                setFilter((prev) => ({ ...prev, searchTerm: e.target.value }))
+              }
+            />
+          </div>
+          
+          {/* Mobile Filter Drawer */}
+          <Drawer>
+            <DrawerTrigger asChild>
+              <Button 
+                variant="outline" 
+                size="icon" 
+                className="relative h-10 w-10 shrink-0"
+              >
+                <Filter className="h-4 w-4" />
+                {activeFilterCount > 0 && (
+                  <span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground">
+                    {activeFilterCount}
+                  </span>
+                )}
+              </Button>
+            </DrawerTrigger>
+            <DrawerContent className="max-h-[85vh]">
+              <DrawerHeader className="text-left">
+                <DrawerTitle className="text-lg font-semibold">Filter Repositories</DrawerTitle>
+                <DrawerDescription className="text-sm text-muted-foreground">
+                  Narrow down your repository list
+                </DrawerDescription>
+              </DrawerHeader>
+              
+              <div className="px-4 py-6 space-y-6 overflow-y-auto">
+                {/* Active filters summary */}
+                {hasActiveFilters && (
+                  <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
+                    <span className="text-sm font-medium">
+                      {activeFilterCount} filter{activeFilterCount > 1 ? 's' : ''} active
+                    </span>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={clearFilters}
+                      className="h-7 px-2 text-xs"
+                    >
+                      Clear all
+                    </Button>
+                  </div>
+                )}
 
-        {/* Owner Combobox */}
-        <OwnerCombobox
-          options={ownerOptions}
-          value={filter.owner || ""}
-          onChange={(owner: string) =>
-            setFilter((prev) => ({ ...prev, owner }))
-          }
-        />
+                {/* Owner Filter */}
+                <div className="space-y-2">
+                  <label className="text-sm font-medium flex items-center gap-2">
+                    <span className="text-muted-foreground">By</span> Owner
+                    {filter.owner && (
+                      <span className="ml-auto text-xs text-muted-foreground">
+                        Selected
+                      </span>
+                    )}
+                  </label>
+                  <OwnerCombobox
+                    options={ownerOptions}
+                    value={filter.owner || ""}
+                    onChange={(owner: string) =>
+                      setFilter((prev) => ({ ...prev, owner }))
+                    }
+                  />
+                </div>
 
-        {/* Organization Combobox */}
-        <OrganizationCombobox
-          options={orgOptions}
-          value={filter.organization || ""}
-          onChange={(organization: string) =>
-            setFilter((prev) => ({ ...prev, organization }))
-          }
-        />
+                {/* Organization Filter */}
+                <div className="space-y-2">
+                  <label className="text-sm font-medium flex items-center gap-2">
+                    <span className="text-muted-foreground">By</span> Organization
+                    {filter.organization && (
+                      <span className="ml-auto text-xs text-muted-foreground">
+                        Selected
+                      </span>
+                    )}
+                  </label>
+                  <OrganizationCombobox
+                    options={orgOptions}
+                    value={filter.organization || ""}
+                    onChange={(organization: string) =>
+                      setFilter((prev) => ({ ...prev, organization }))
+                    }
+                  />
+                </div>
 
-        <Select
-          value={filter.status || "all"}
-          onValueChange={(value) =>
-            setFilter((prev) => ({
-              ...prev,
-              status: value === "all" ? "" : (value as RepoStatus),
-            }))
-          }
-        >
-          <SelectTrigger className="w-[140px] h-9 max-h-9">
-            <SelectValue placeholder="All Status" />
-          </SelectTrigger>
-          <SelectContent>
-            {["all", ...repoStatusEnum.options].map((status) => (
-              <SelectItem key={status} value={status}>
-                {status === "all"
-                  ? "All Status"
-                  : status.charAt(0).toUpperCase() + status.slice(1)}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={handleRefresh}
-          title="Refresh repositories"
-        >
-          <RefreshCw className="h-4 w-4" />
-        </Button>
-
-        {/* Context-aware action buttons */}
-        {selectedRepoIds.size === 0 ? (
+                {/* Status Filter */}
+                <div className="space-y-2">
+                  <label className="text-sm font-medium flex items-center gap-2">
+                    <span className="text-muted-foreground">By</span> Status
+                    {filter.status && (
+                      <span className="ml-auto text-xs text-muted-foreground">
+                        {filter.status.charAt(0).toUpperCase() + filter.status.slice(1)}
+                      </span>
+                    )}
+                  </label>
+                  <Select
+                    value={filter.status || "all"}
+                    onValueChange={(value) =>
+                      setFilter((prev) => ({
+                        ...prev,
+                        status: value === "all" ? "" : (value as RepoStatus),
+                      }))
+                    }
+                  >
+                    <SelectTrigger className="w-full h-10">
+                      <SelectValue placeholder="All statuses" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {["all", ...repoStatusEnum.options].map((status) => (
+                        <SelectItem key={status} value={status}>
+                          <span className="flex items-center gap-2">
+                            {status !== "all" && (
+                              <span className={`h-2 w-2 rounded-full ${
+                                status === "synced" ? "bg-green-500" :
+                                status === "failed" ? "bg-red-500" :
+                                status === "syncing" ? "bg-blue-500" :
+                                "bg-yellow-500"
+                              }`} />
+                            )}
+                            {status === "all"
+                              ? "All statuses"
+                              : status.charAt(0).toUpperCase() + status.slice(1)}
+                          </span>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              
+              <DrawerFooter className="gap-2 px-4 pt-2 pb-4 border-t">
+                <DrawerClose asChild>
+                  <Button className="w-full" size="sm">
+                    Apply Filters
+                  </Button>
+                </DrawerClose>
+                <DrawerClose asChild>
+                  <Button variant="outline" className="w-full" size="sm">
+                    Cancel
+                  </Button>
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+          
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={handleRefresh}
+            title="Refresh repositories"
+            className="h-10 w-10 shrink-0"
+          >
+            <RefreshCw className="h-4 w-4" />
+          </Button>
+          
           <Button
             variant="default"
+            size="icon"
             onClick={handleMirrorAllRepos}
             disabled={isInitialLoading || loadingRepoIds.size > 0}
+            title="Mirror all repositories"
+            className="h-10 w-10 shrink-0"
           >
-            <FlipHorizontal className="h-4 w-4 mr-2" />
-            Mirror All
+            <FlipHorizontal className="h-4 w-4" />
           </Button>
-        ) : (
-          <div className="flex items-center gap-2">
-            <div className="flex items-center gap-2 px-3 py-1 bg-muted/50 rounded-md">
+        </div>
+
+        {/* Desktop: Original layout */}
+        <div className="hidden sm:flex sm:flex-row sm:items-center sm:gap-4 sm:w-full">
+          <div className="relative flex-grow min-w-[180px]">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <input
+              type="text"
+              placeholder="Search repositories..."
+              className="pl-10 pr-3 h-10 w-full rounded-md border border-input bg-background text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              value={filter.searchTerm}
+              onChange={(e) =>
+                setFilter((prev) => ({ ...prev, searchTerm: e.target.value }))
+              }
+            />
+          </div>
+
+          {/* Owner Combobox */}
+          <OwnerCombobox
+            options={ownerOptions}
+            value={filter.owner || ""}
+            onChange={(owner: string) =>
+              setFilter((prev) => ({ ...prev, owner }))
+            }
+          />
+
+          {/* Organization Combobox */}
+          <OrganizationCombobox
+            options={orgOptions}
+            value={filter.organization || ""}
+            onChange={(organization: string) =>
+              setFilter((prev) => ({ ...prev, organization }))
+            }
+          />
+
+          {/* Filter controls in a responsive row */}
+          <div className="flex flex-row items-center gap-2">
+            <Select
+              value={filter.status || "all"}
+              onValueChange={(value) =>
+                setFilter((prev) => ({
+                  ...prev,
+                  status: value === "all" ? "" : (value as RepoStatus),
+                }))
+              }
+            >
+              <SelectTrigger className="w-[140px] h-10">
+                <SelectValue placeholder="All statuses" />
+              </SelectTrigger>
+              <SelectContent>
+                {["all", ...repoStatusEnum.options].map((status) => (
+                  <SelectItem key={status} value={status}>
+                    <span className="flex items-center gap-2">
+                      {status !== "all" && (
+                        <span className={`h-2 w-2 rounded-full ${
+                          status === "synced" ? "bg-green-500" :
+                          status === "failed" ? "bg-red-500" :
+                          status === "syncing" ? "bg-blue-500" :
+                          "bg-yellow-500"
+                        }`} />
+                      )}
+                      {status === "all"
+                        ? "All statuses"
+                        : status.charAt(0).toUpperCase() + status.slice(1)}
+                    </span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={handleRefresh}
+              title="Refresh repositories"
+              className="h-10 w-10 shrink-0"
+            >
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+          </div>
+
+          {/* Bulk actions on desktop - integrated into the same line */}
+          <div className="flex items-center gap-2 border-l pl-4">
+            {selectedRepoIds.size === 0 ? (
+              <Button
+                variant="default"
+                onClick={handleMirrorAllRepos}
+                disabled={isInitialLoading || loadingRepoIds.size > 0}
+                className="whitespace-nowrap"
+              >
+                <FlipHorizontal className="h-4 w-4 mr-2" />
+                Mirror All
+              </Button>
+            ) : (
+              <>
+                <div className="flex items-center gap-2 px-3 py-1 bg-muted/50 rounded-md">
+                  <span className="text-sm font-medium">
+                    {selectedRepoIds.size} selected
+                  </span>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-5 w-5"
+                    onClick={() => setSelectedRepoIds(new Set())}
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+                </div>
+                
+                {availableActions.includes('mirror') && (
+                  <Button
+                    variant="default"
+                    size="default"
+                    onClick={handleBulkMirror}
+                    disabled={loadingRepoIds.size > 0}
+                  >
+                    <FlipHorizontal className="h-4 w-4 mr-2" />
+                    Mirror ({selectedRepoIds.size})
+                  </Button>
+                )}
+                
+                {availableActions.includes('sync') && (
+                  <Button
+                    variant="outline"
+                    size="default"
+                    onClick={handleBulkSync}
+                    disabled={loadingRepoIds.size > 0}
+                  >
+                    <RefreshCw className="h-4 w-4 mr-2" />
+                    Sync ({selectedRepoIds.size})
+                  </Button>
+                )}
+                
+                {availableActions.includes('retry') && (
+                  <Button
+                    variant="outline"
+                    size="default"
+                    onClick={handleBulkRetry}
+                    disabled={loadingRepoIds.size > 0}
+                  >
+                    <RotateCcw className="h-4 w-4 mr-2" />
+                    Retry
+                  </Button>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Action buttons for mobile - only show when items are selected */}
+      {selectedRepoIds.size > 0 && (
+        <div className="flex items-center gap-2 flex-wrap sm:hidden">
+          <div className="flex items-center gap-2 px-3 py-1 bg-muted/50 rounded-md">
               <span className="text-sm font-medium">
                 {selectedRepoIds.size} selected
               </span>
@@ -652,44 +927,45 @@ export default function Repository() {
               </Button>
             </div>
             
-            {availableActions.includes('mirror') && (
-              <Button
-                variant="default"
-                size="sm"
-                onClick={handleBulkMirror}
-                disabled={loadingRepoIds.size > 0}
-              >
-                <FlipHorizontal className="h-4 w-4 mr-2" />
-                Mirror ({selectedRepoIds.size})
-              </Button>
-            )}
-            
-            {availableActions.includes('sync') && (
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleBulkSync}
-                disabled={loadingRepoIds.size > 0}
-              >
-                <RefreshCw className="h-4 w-4 mr-2" />
-                Sync ({selectedRepoIds.size})
-              </Button>
-            )}
-            
-            {availableActions.includes('retry') && (
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleBulkRetry}
-                disabled={loadingRepoIds.size > 0}
-              >
-                <RotateCcw className="h-4 w-4 mr-2" />
-                Retry
-              </Button>
-            )}
+            <div className="flex gap-2 flex-wrap">
+              {availableActions.includes('mirror') && (
+            <Button
+              variant="default"
+              size="sm"
+              onClick={handleBulkMirror}
+              disabled={loadingRepoIds.size > 0}
+            >
+              <FlipHorizontal className="h-4 w-4 mr-2" />
+              <span>Mirror </span>({selectedRepoIds.size})
+            </Button>
+          )}
+          
+          {availableActions.includes('sync') && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleBulkSync}
+              disabled={loadingRepoIds.size > 0}
+            >
+              <RefreshCw className="h-4 w-4 mr-2" />
+              <span className="hidden sm:inline">Sync </span>({selectedRepoIds.size})
+            </Button>
+          )}
+          
+          {availableActions.includes('retry') && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleBulkRetry}
+              disabled={loadingRepoIds.size > 0}
+            >
+              <RotateCcw className="h-4 w-4 mr-2" />
+              Retry
+            </Button>
+          )}
           </div>
-        )}
-      </div>
+        </div>
+      )}
 
       {!isGitHubConfigured ? (
         <div className="flex flex-col items-center justify-center p-8 border border-dashed rounded-md">
@@ -721,7 +997,9 @@ export default function Repository() {
           loadingRepoIds={loadingRepoIds}
           selectedRepoIds={selectedRepoIds}
           onSelectionChange={setSelectedRepoIds}
-          onRefresh={() => fetchRepositories(false)}
+          onRefresh={async () => {
+            await fetchRepositories(false);
+          }}
         />
       )}
 

src/components/repositories/RepositoryComboboxes.tsx

@@ -33,17 +33,22 @@ export function OwnerCombobox({ options, value, onChange, placeholder = "Owner"
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-[160px] justify-between"
+          className="w-full sm:w-[160px] justify-between h-10"
         >
-          {value ? value : placeholder}
+          <span className={cn(
+            "truncate",
+            !value && "text-muted-foreground"
+          )}>
+            {value || "All owners"}
+          </span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[160px] p-0">
+      <PopoverContent className="w-[200px] sm:w-[160px] p-0">
         <Command>
-          <CommandInput placeholder={`Search ${placeholder.toLowerCase()}...`} />
+          <CommandInput placeholder="Search owners..." />
           <CommandList>
-            <CommandEmpty>No {placeholder.toLowerCase()} found.</CommandEmpty>
+            <CommandEmpty>No owners found.</CommandEmpty>
             <CommandGroup>
               <CommandItem
                 key="all"
@@ -54,7 +59,7 @@ export function OwnerCombobox({ options, value, onChange, placeholder = "Owner"
                 }}
               >
                 <Check className={cn("mr-2 h-4 w-4", value === "" ? "opacity-100" : "opacity-0")} />
-                All
+                All owners
               </CommandItem>
               {options.map((option) => (
                 <CommandItem
@@ -86,17 +91,22 @@ export function OrganizationCombobox({ options, value, onChange, placeholder = "
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-[160px] justify-between"
+          className="w-full sm:w-[160px] justify-between h-10"
         >
-          {value ? value : placeholder}
+          <span className={cn(
+            "truncate",
+            !value && "text-muted-foreground"
+          )}>
+            {value || "All organizations"}
+          </span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[160px] p-0">
+      <PopoverContent className="w-[200px] sm:w-[160px] p-0">
         <Command>
-          <CommandInput placeholder={`Search ${placeholder.toLowerCase()}...`} />
+          <CommandInput placeholder="Search organizations..." />
           <CommandList>
-            <CommandEmpty>No {placeholder.toLowerCase()} found.</CommandEmpty>
+            <CommandEmpty>No organizations found.</CommandEmpty>
             <CommandGroup>
               <CommandItem
                 key="all"
@@ -107,7 +117,7 @@ export function OrganizationCombobox({ options, value, onChange, placeholder = "
                 }}
               >
                 <Check className={cn("mr-2 h-4 w-4", value === "" ? "opacity-100" : "opacity-0")} />
-                All
+                All organizations
               </CommandItem>
               {options.map((option) => (
                 <CommandItem
@@ -128,4 +138,4 @@ export function OrganizationCombobox({ options, value, onChange, placeholder = "
       </PopoverContent>
     </Popover>
   );
-}
+}

src/components/repositories/RepositoryTable.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useRef } from "react";
 import Fuse from "fuse.js";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { FlipHorizontal, GitFork, RefreshCw, RotateCcw, Star } from "lucide-react";
+import { FlipHorizontal, GitFork, RefreshCw, RotateCcw, Star, Lock } from "lucide-react";
 import { SiGithub, SiGitea } from "react-icons/si";
 import type { Repository } from "@/lib/db/schema";
 import { Button } from "@/components/ui/button";
@@ -17,6 +17,8 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { InlineDestinationEditor } from "./InlineDestinationEditor";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
 
 interface RepositoryTableProps {
   repositories: Repository[];
@@ -166,338 +168,562 @@ export default function RepositoryTable({
     filteredRepositories.every(repo => repo.id && selectedRepoIds.has(repo.id));
   const isPartiallySelected = selectedRepoIds.size > 0 && !isAllSelected;
 
+  // Mobile card layout for repository
+  const RepositoryCard = ({ repo }: { repo: Repository }) => {
+    const isLoading = repo.id ? loadingRepoIds.has(repo.id) : false;
+    const isSelected = repo.id ? selectedRepoIds.has(repo.id) : false;
+    const giteaUrl = getGiteaRepoUrl(repo);
+
+    return (
+      <Card className="mb-3">
+        <CardContent className="p-4">
+          <div className="flex flex-col gap-3">
+            {/* Header with checkbox and repo name */}
+            <div className="flex items-start gap-3">
+              <Checkbox
+                checked={isSelected}
+                onCheckedChange={(checked) => repo.id && handleSelectRepo(repo.id, checked as boolean)}
+                className="mt-1 h-5 w-5"
+                aria-label={`Select ${repo.name}`}
+              />
+              <div className="flex-1 min-w-0">
+                <h3 className="font-medium text-base truncate">{repo.name}</h3>
+                <div className="flex items-center gap-2 mt-1 flex-wrap">
+                  {repo.isPrivate && <Badge variant="secondary" className="text-xs h-5"><Lock className="h-3 w-3 mr-1" />Private</Badge>}
+                  {repo.isForked && <Badge variant="secondary" className="text-xs h-5"><GitFork className="h-3 w-3 mr-1" />Fork</Badge>}
+                  {repo.isStarred && <Badge variant="secondary" className="text-xs h-5"><Star className="h-3 w-3 mr-1" />Starred</Badge>}
+                </div>
+              </div>
+            </div>
+
+            {/* Repository details */}
+            <div className="space-y-2">
+              {/* Owner & Organization */}
+              <div className="text-sm text-muted-foreground space-y-1">
+                <div className="flex items-center gap-2">
+                  <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Owner:</span>
+                  <span className="truncate">{repo.owner}</span>
+                </div>
+                {repo.organization && (
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Org:</span>
+                    <span className="truncate">{repo.organization}</span>
+                  </div>
+                )}
+                {repo.destinationOrg && (
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Dest:</span>
+                    <span className="truncate">{repo.destinationOrg}</span>
+                  </div>
+                )}
+              </div>
+
+              {/* Status & Last Mirrored */}
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <div className={`h-2.5 w-2.5 rounded-full ${getStatusColor(repo.status)}`} />
+                  <span className="text-sm font-medium capitalize">{repo.status}</span>
+                </div>
+                <span className="text-xs text-muted-foreground">
+                  {repo.lastMirrored ? formatDate(repo.lastMirrored) : "Never mirrored"}
+                </span>
+              </div>
+            </div>
+
+            {/* Actions */}
+            <div className="flex flex-col gap-2">
+              {/* Primary action button */}
+              {(repo.status === "imported" || repo.status === "failed") && (
+                <Button
+                  size="default"
+                  variant="default"
+                  onClick={() => repo.id && onMirror({ repoId: repo.id })}
+                  disabled={isLoading}
+                  className="w-full h-10"
+                >
+                  {isLoading ? (
+                    <>
+                      <FlipHorizontal className="h-4 w-4 mr-2 animate-spin" />
+                      Mirroring...
+                    </>
+                  ) : (
+                    <>
+                      <FlipHorizontal className="h-4 w-4 mr-2" />
+                      Mirror Repository
+                    </>
+                  )}
+                </Button>
+              )}
+              {(repo.status === "mirrored" || repo.status === "synced") && (
+                <Button
+                  size="default"
+                  variant="outline"
+                  onClick={() => repo.id && onSync({ repoId: repo.id })}
+                  disabled={isLoading}
+                  className="w-full h-10"
+                >
+                  {isLoading ? (
+                    <>
+                      <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                      Syncing...
+                    </>
+                  ) : (
+                    <>
+                      <RefreshCw className="h-4 w-4 mr-2" />
+                      Sync Repository
+                    </>
+                  )}
+                </Button>
+              )}
+              {repo.status === "failed" && (
+                <Button
+                  size="default"
+                  variant="destructive"
+                  onClick={() => repo.id && onRetry({ repoId: repo.id })}
+                  disabled={isLoading}
+                  className="w-full h-10"
+                >
+                  {isLoading ? (
+                    <>
+                      <RotateCcw className="h-4 w-4 mr-2 animate-spin" />
+                      Retrying...
+                    </>
+                  ) : (
+                    <>
+                      <RotateCcw className="h-4 w-4 mr-2" />
+                      Retry Mirror
+                    </>
+                  )}
+                </Button>
+              )}
+              
+              {/* External links */}
+              <div className="flex gap-2">
+                <Button variant="outline" size="default" className="flex-1 h-10 min-w-0" asChild>
+                  <a
+                    href={repo.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    title="View on GitHub"
+                    className="flex items-center justify-center gap-2"
+                  >
+                    <SiGithub className="h-4 w-4 flex-shrink-0" />
+                    <span className="text-xs">GitHub</span>
+                  </a>
+                </Button>
+                {giteaUrl ? (
+                  <Button variant="outline" size="default" className="flex-1 h-10 min-w-0" asChild>
+                    <a
+                      href={giteaUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      title="View on Gitea"
+                      className="flex items-center justify-center gap-2"
+                    >
+                      <SiGitea className="h-4 w-4 flex-shrink-0" />
+                      <span className="text-xs">Gitea</span>
+                    </a>
+                  </Button>
+                ) : (
+                  <Button variant="outline" size="default" disabled className="flex-1 h-10 min-w-0">
+                    <SiGitea className="h-4 w-4" />
+                    <span className="text-xs ml-2">Gitea</span>
+                  </Button>
+                )}
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  };
+
   return isLoading ? (
-    <div className="border rounded-md">
-      <div className="h-[45px] flex items-center justify-between border-b bg-muted/50">
-        <div className="h-full p-3 flex items-center justify-center flex-[0.3]">
-          <Skeleton className="h-4 w-4" />
-        </div>
-        <div className="h-full p-3 text-sm font-medium flex-[2.5]">
-          Repository
-        </div>
-        <div className="h-full p-3 text-sm font-medium flex-[1]">Owner</div>
-        <div className="h-full p-3 text-sm font-medium flex-[1]">
-          Organization
-        </div>
-        <div className="h-full p-3 text-sm font-medium flex-[1]">
-          Last Mirrored
-        </div>
-        <div className="h-full p-3 text-sm font-medium flex-[1]">Status</div>
-        <div className="h-full p-3 text-sm font-medium flex-[1]">
-          Actions
-        </div>
-        <div className="h-full p-3 text-sm font-medium flex-[0.8] text-center">
-          Links
-        </div>
+    <div className="space-y-3 lg:space-y-0">
+      {/* Mobile skeleton */}
+      <div className="lg:hidden">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <Card key={i} className="mb-3">
+            <CardContent className="p-4">
+              <div className="flex items-start gap-3">
+                <Skeleton className="h-4 w-4 mt-1" />
+                <div className="flex-1 space-y-3">
+                  <Skeleton className="h-5 w-3/4" />
+                  <Skeleton className="h-4 w-1/2" />
+                  <Skeleton className="h-4 w-1/3" />
+                  <div className="flex gap-2">
+                    <Skeleton className="h-8 w-20" />
+                    <Skeleton className="h-8 w-8" />
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
       </div>
 
-      {Array.from({ length: 5 }).map((_, i) => (
-        <div
-          key={i}
-          className="h-[65px] flex items-center justify-between border-b bg-transparent"
-        >
+      {/* Desktop skeleton */}
+      <div className="hidden lg:block border rounded-md">
+        <div className="h-[45px] flex items-center justify-between border-b bg-muted/50">
           <div className="h-full p-3 flex items-center justify-center flex-[0.3]">
             <Skeleton className="h-4 w-4" />
           </div>
           <div className="h-full p-3 text-sm font-medium flex-[2.5]">
-            <Skeleton className="h-full w-full" />
+            Repository
+          </div>
+          <div className="h-full p-3 text-sm font-medium flex-[1]">Owner</div>
+          <div className="h-full p-3 text-sm font-medium flex-[1]">
+            Organization
           </div>
           <div className="h-full p-3 text-sm font-medium flex-[1]">
-            <Skeleton className="h-full w-full" />
+            Last Mirrored
           </div>
+          <div className="h-full p-3 text-sm font-medium flex-[1]">Status</div>
           <div className="h-full p-3 text-sm font-medium flex-[1]">
-            <Skeleton className="h-full w-full" />
-          </div>
-          <div className="h-full p-3 text-sm font-medium flex-[1]">
-            <Skeleton className="h-full w-full" />
-          </div>
-          <div className="h-full p-3 text-sm font-medium flex-[1]">
-            <Skeleton className="h-full w-full" />
-          </div>
-          <div className="h-full p-3 text-sm font-medium flex-[1]">
-            <Skeleton className="h-full w-full" />
+            Actions
           </div>
           <div className="h-full p-3 text-sm font-medium flex-[0.8] text-center">
-            <Skeleton className="h-full w-full" />
+            Links
           </div>
         </div>
-      ))}
-    </div>
-  ) : filteredRepositories.length === 0 ? (
-    <div className="flex flex-col items-center justify-center py-12 text-center">
-      <GitFork className="h-12 w-12 text-muted-foreground mb-4" />
-      <h3 className="text-lg font-medium">No repositories found</h3>
-      <p className="text-sm text-muted-foreground mt-1 mb-4 max-w-md">
-        {hasAnyFilter
-          ? "Try adjusting your search or filter criteria."
-          : "Configure your GitHub connection to start mirroring repositories."}
-      </p>
-      {hasAnyFilter ? (
-        <Button
-          variant="outline"
-          onClick={() =>
-            setFilter({
-              searchTerm: "",
-              status: "",
-            })
-          }
-        >
-          Clear Filters
-        </Button>
-      ) : (
-        <Button asChild>
-          <a href="/config">Configure GitHub</a>
-        </Button>
-      )}
+
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div
+            key={i}
+            className="h-[65px] flex items-center justify-between border-b bg-transparent"
+          >
+            <div className="h-full p-3 flex items-center justify-center flex-[0.3]">
+              <Skeleton className="h-4 w-4" />
+            </div>
+            <div className="h-full p-3 flex-[2.5]">
+              <Skeleton className="h-5 w-48" />
+              <Skeleton className="h-3 w-24 mt-1" />
+            </div>
+            <div className="h-full p-3 flex-[1]">
+              <Skeleton className="h-4 w-20" />
+            </div>
+            <div className="h-full p-3 flex-[1]">
+              <Skeleton className="h-4 w-20" />
+            </div>
+            <div className="h-full p-3 flex-[1]">
+              <Skeleton className="h-4 w-24" />
+            </div>
+            <div className="h-full p-3 flex-[1]">
+              <Skeleton className="h-4 w-16" />
+            </div>
+            <div className="h-full p-3 flex-[1]">
+              <Skeleton className="h-8 w-20" />
+            </div>
+            <div className="h-full p-3 flex-[0.8] flex items-center justify-center gap-1">
+              <Skeleton className="h-8 w-8" />
+              <Skeleton className="h-8 w-8" />
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
   ) : (
-    <div className="flex flex-col border rounded-md">
-      {/* table header */}
-      <div className="h-[45px] flex items-center justify-between border-b bg-muted/50">
-        <div className="h-full p-3 flex items-center justify-center flex-[0.3]">
-          <Checkbox 
-            checked={isAllSelected}
-            indeterminate={isPartiallySelected}
-            onCheckedChange={handleSelectAll}
-            aria-label="Select all repositories"
-          />
+    <div>
+      {hasAnyFilter && (
+        <div className="mb-4 flex items-center gap-2">
+          <span className="text-sm text-muted-foreground">
+            Showing {filteredRepositories.length} of {repositories.length} repositories
+          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() =>
+              setFilter({
+                searchTerm: "",
+                status: "",
+                organization: "",
+                owner: "",
+              })
+            }
+          >
+            Clear filters
+          </Button>
         </div>
-        <div className="h-full p-3 text-sm font-medium flex-[2.5]">
-          Repository
-        </div>
-        <div className="h-full p-3 text-sm font-medium flex-[1]">Owner</div>
-        <div className="h-full p-3 text-sm font-medium flex-[1]">
-          Organization
-        </div>
-        <div className="h-full p-3 text-sm font-medium flex-[1]">
-          Last Mirrored
-        </div>
-        <div className="h-full p-3 text-sm font-medium flex-[1]">Status</div>
-        <div className="h-full p-3 text-sm font-medium flex-[1]">
-          Actions
-        </div>
-        <div className="h-full p-3 text-sm font-medium flex-[0.8] text-center">
-          Links
-        </div>
-      </div>
+      )}
 
-      {/* table body wrapper (for a parent in virtualization) */}
-      <div
-        ref={tableParentRef}
-        className="flex flex-col max-h-[calc(100dvh-276px)] overflow-y-auto" //adjusted height to account for status bar
-      >
-        <div
-          style={{
-            height: `${rowVirtualizer.getTotalSize()}px`,
-            position: "relative",
-          }}
-        >
-          {rowVirtualizer.getVirtualItems().map((virtualRow, index) => {
-            const repo = filteredRepositories[virtualRow.index];
-            const isLoading = loadingRepoIds.has(repo.id ?? "");
-
-            return (
-              <div
-                key={index}
-                ref={rowVirtualizer.measureElement}
-                style={{
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  transform: `translateY(${virtualRow.start}px)`,
-                  width: "100%",
-                }}
-                data-index={virtualRow.index}
-                className="h-[65px] flex items-center justify-between bg-transparent border-b hover:bg-muted/50" //the height is set according to the row content. right now the highest row is in the repo column which is arround 64.99px
-              >
-                {/* Checkbox */}
-                <div className="h-full p-3 flex items-center justify-center flex-[0.3]">
-                  <Checkbox 
-                    checked={repo.id ? selectedRepoIds.has(repo.id) : false}
-                    onCheckedChange={(checked) => repo.id && handleSelectRepo(repo.id, !!checked)}
-                    aria-label={`Select ${repo.name}`}
-                  />
-                </div>
-
-                {/* Repository  */}
-                <div className="h-full p-3 flex items-center gap-2 flex-[2.5]">
-                  <GitFork className="h-4 w-4 text-muted-foreground" />
-                  <div className="flex-1">
-                    <div className="font-medium flex items-center gap-1">
-                      {repo.name}
-                      {repo.isStarred && (
-                        <Star className="h-3 w-3 fill-yellow-500 text-yellow-500" />
-                      )}
-                    </div>
-                    <div className="text-xs text-muted-foreground">
-                      {repo.fullName}
-                    </div>
-                  </div>
-                  {repo.isPrivate && (
-                    <span className="ml-2 rounded-full bg-muted px-2 py-0.5 text-xs">
-                      Private
-                    </span>
-                  )}
-                  {repo.isForked && (
-                    <span className="ml-2 rounded-full bg-muted px-2 py-0.5 text-xs">
-                      Fork
-                    </span>
-                  )}
-                </div>
-
-                {/* Owner  */}
-                <div className="h-full p-3 flex items-center flex-[1]">
-                  <p className="text-sm">{repo.owner}</p>
-                </div>
-
-                {/* Organization  */}
-                <div className="h-full p-3 flex items-center flex-[1]">
-                  <InlineDestinationEditor
-                    repository={repo}
-                    giteaConfig={giteaConfig}
-                    onUpdate={handleUpdateDestination}
-                    isUpdating={loadingRepoIds.has(repo.id ?? "")}
-                  />
-                </div>
-
-                {/* Last Mirrored  */}
-                <div className="h-full p-3 flex items-center flex-[1]">
-                  <p className="text-sm">
-                    {repo.lastMirrored
-                      ? formatDate(new Date(repo.lastMirrored))
-                      : "Never"}
-                  </p>
-                </div>
-
-                {/* Status  */}
-                <div className="h-full p-3 flex items-center gap-x-2 flex-[1]">
-                  {repo.status === "failed" && repo.errorMessage ? (
-                    <TooltipProvider>
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <div className="flex items-center gap-x-2 cursor-help">
-                            <div className={`h-2 w-2 rounded-full ${getStatusColor(repo.status)}`} />
-                            <span className="text-sm capitalize underline decoration-dotted">{repo.status}</span>
-                          </div>
-                        </TooltipTrigger>
-                        <TooltipContent className="max-w-xs">
-                          <p className="text-sm">{repo.errorMessage}</p>
-                        </TooltipContent>
-                      </Tooltip>
-                    </TooltipProvider>
-                  ) : (
-                    <>
-                      <div className={`h-2 w-2 rounded-full ${getStatusColor(repo.status)}`} />
-                      <span className="text-sm capitalize">{repo.status}</span>
-                    </>
-                  )}
-                </div>
-
-                {/* Actions  */}
-                <div className="h-full p-3 flex items-center justify-start flex-[1]">
-                  <RepoActionButton
-                    repo={{ id: repo.id ?? "", status: repo.status }}
-                    isLoading={isLoading}
-                    onMirror={() => onMirror({ repoId: repo.id ?? "" })}
-                    onSync={() => onSync({ repoId: repo.id ?? "" })}
-                    onRetry={() => onRetry({ repoId: repo.id ?? "" })}
-                  />
-                </div>
-
-                {/* Links  */}
-                <div className="h-full p-3 flex items-center justify-center gap-x-2 flex-[0.8]">
-                  {(() => {
-                    const giteaUrl = getGiteaRepoUrl(repo);
-
-                    // Determine tooltip based on status and configuration
-                    let tooltip: string;
-                    if (!giteaConfig?.url) {
-                      tooltip = "Gitea not configured";
-                    } else if (repo.status === 'imported') {
-                      tooltip = "Repository not yet mirrored to Gitea";
-                    } else if (repo.status === 'failed') {
-                      tooltip = "Repository mirroring failed";
-                    } else if (repo.status === 'mirroring') {
-                      tooltip = "Repository is being mirrored to Gitea";
-                    } else if (giteaUrl) {
-                      tooltip = "View on Gitea";
-                    } else {
-                      tooltip = "Gitea repository not available";
-                    }
-
-                    return giteaUrl ? (
-                      <Button variant="ghost" size="icon" asChild>
-                        <a
-                          href={giteaUrl}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          title={tooltip}
-                        >
-                          <SiGitea className="h-4 w-4" />
-                        </a>
-                      </Button>
-                    ) : (
-                      <Button variant="ghost" size="icon" disabled title={tooltip}>
-                        <SiGitea className="h-4 w-4" />
-                      </Button>
-                    );
-                  })()}
-                  <Button variant="ghost" size="icon" asChild>
-                    <a
-                      href={repo.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      title="View on GitHub"
-                    >
-                      <SiGithub className="h-4 w-4" />
-                    </a>
-                  </Button>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* Status Bar */}
-      <div className="h-[40px] flex items-center justify-between border-t bg-muted/30 px-3 relative">
-        <div className="flex items-center gap-2">
-          <div className={`h-1.5 w-1.5 rounded-full ${isLiveActive ? 'bg-emerald-500' : 'bg-primary'}`} />
-          <span className="text-sm font-medium text-foreground">
+      {filteredRepositories.length === 0 ? (
+        <div className="text-center py-8">
+          <p className="text-muted-foreground">
             {hasAnyFilter
-              ? `Showing ${filteredRepositories.length} of ${repositories.length} repositories`
-              : `${repositories.length} ${repositories.length === 1 ? 'repository' : 'repositories'} total`}
-          </span>
+              ? "No repositories match the current filters"
+              : "No repositories found"}
+          </p>
         </div>
+      ) : (
+        <>
+          {/* Mobile card view */}
+          <div className="lg:hidden pb-20">
+            {/* Select all checkbox */}
+            <div className="flex items-center gap-3 mb-3 p-3 bg-muted/50 rounded-md">
+              <Checkbox
+                checked={isAllSelected}
+                onCheckedChange={handleSelectAll}
+                aria-label="Select all repositories"
+                className="h-5 w-5"
+              />
+              <span className="text-sm font-medium">
+                Select All ({filteredRepositories.length})
+              </span>
+            </div>
 
-        {/* Center - Live active indicator */}
-        {isLiveActive && (
-          <div className="flex items-center gap-1.5 absolute left-1/2 transform -translate-x-1/2">
-            <div
-              className="h-1 w-1 rounded-full bg-emerald-500"
-              style={{
-                animation: 'pulse 2s ease-in-out infinite'
-              }}
-            />
-            <span className="text-xs text-emerald-600 dark:text-emerald-400 font-medium">
-              Live active
-            </span>
-            <div
-              className="h-1 w-1 rounded-full bg-emerald-500"
-              style={{
-                animation: 'pulse 2s ease-in-out infinite',
-                animationDelay: '1s'
-              }}
-            />
+            {/* Repository cards */}
+            {filteredRepositories.map((repo) => (
+              <RepositoryCard key={repo.id} repo={repo} />
+            ))}
           </div>
-        )}
 
-        {hasAnyFilter && (
-          <span className="text-xs text-muted-foreground">
-            Filters applied
-          </span>
-        )}
-      </div>
+          {/* Desktop table view */}
+          <div className="hidden lg:flex flex-col border rounded-md">
+            {/* Table header */}
+            <div className="h-[45px] flex items-center justify-between border-b bg-muted/50">
+              <div className="h-full p-3 flex items-center justify-center flex-[0.3]">
+                <Checkbox
+                  checked={isAllSelected}
+                  onCheckedChange={handleSelectAll}
+                  aria-label="Select all repositories"
+                />
+              </div>
+              <div className="h-full p-3 text-sm font-medium flex-[2.5]">
+                Repository
+              </div>
+              <div className="h-full p-3 text-sm font-medium flex-[1]">Owner</div>
+              <div className="h-full p-3 text-sm font-medium flex-[1]">
+                Organization
+              </div>
+              <div className="h-full p-3 text-sm font-medium flex-[1]">
+                Last Mirrored
+              </div>
+              <div className="h-full p-3 text-sm font-medium flex-[1]">Status</div>
+              <div className="h-full p-3 text-sm font-medium flex-[1]">
+                Actions
+              </div>
+              <div className="h-full p-3 text-sm font-medium flex-[0.8] text-center">
+                Links
+              </div>
+            </div>
+
+            {/* Table body wrapper (for a parent in virtualization) */}
+            <div
+              ref={tableParentRef}
+              className="flex flex-col max-h-[calc(100dvh-276px)] overflow-y-auto"
+            >
+              <div
+                style={{
+                  height: `${rowVirtualizer.getTotalSize()}px`,
+                  position: "relative",
+                }}
+              >
+                {rowVirtualizer.getVirtualItems().map((virtualRow, index) => {
+                  const repo = filteredRepositories[virtualRow.index];
+                  const isLoading = loadingRepoIds.has(repo.id ?? "");
+
+                  return (
+                    <div
+                      key={index}
+                      ref={rowVirtualizer.measureElement}
+                      style={{
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        transform: `translateY(${virtualRow.start}px)`,
+                        width: "100%",
+                      }}
+                      data-index={virtualRow.index}
+                      className="h-[65px] flex items-center justify-between bg-transparent border-b hover:bg-muted/50"
+                    >
+                      {/* Checkbox */}
+                      <div className="h-full p-3 flex items-center justify-center flex-[0.3]">
+                        <Checkbox
+                          checked={repo.id ? selectedRepoIds.has(repo.id) : false}
+                          onCheckedChange={(checked) => repo.id && handleSelectRepo(repo.id, !!checked)}
+                          aria-label={`Select ${repo.name}`}
+                        />
+                      </div>
+
+                      {/* Repository */}
+                      <div className="h-full p-3 flex items-center gap-2 flex-[2.5]">
+                        <GitFork className="h-4 w-4 text-muted-foreground" />
+                        <div className="flex-1">
+                          <div className="font-medium flex items-center gap-1">
+                            {repo.name}
+                            {repo.isStarred && (
+                              <Star className="h-3 w-3 fill-yellow-500 text-yellow-500" />
+                            )}
+                          </div>
+                          <div className="text-xs text-muted-foreground">
+                            {repo.fullName}
+                          </div>
+                        </div>
+                        {repo.isPrivate && (
+                          <span className="ml-2 rounded-full bg-muted px-2 py-0.5 text-xs">
+                            Private
+                          </span>
+                        )}
+                        {repo.isForked && (
+                          <span className="ml-2 rounded-full bg-muted px-2 py-0.5 text-xs">
+                            Fork
+                          </span>
+                        )}
+                      </div>
+                      {/* Owner */}
+                      <div className="h-full p-3 flex items-center flex-[1]">
+                        <p className="text-sm">{repo.owner}</p>
+                      </div>
+
+                      {/* Organization */}
+                      <div className="h-full p-3 flex items-center flex-[1]">
+                        <InlineDestinationEditor
+                          repository={repo}
+                          giteaConfig={giteaConfig}
+                          onUpdate={handleUpdateDestination}
+                          isUpdating={loadingRepoIds.has(repo.id ?? "")}
+                        />
+                      </div>
+
+                      {/* Last Mirrored */}
+                      <div className="h-full p-3 flex items-center flex-[1]">
+                        <p className="text-sm">
+                          {repo.lastMirrored
+                            ? formatDate(new Date(repo.lastMirrored))
+                            : "Never"}
+                        </p>
+                      </div>
+
+                      {/* Status */}
+                      <div className="h-full p-3 flex items-center gap-x-2 flex-[1]">
+                        {repo.status === "failed" && repo.errorMessage ? (
+                          <TooltipProvider>
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <div className="flex items-center gap-x-2 cursor-help">
+                                  <div className={`h-2 w-2 rounded-full ${getStatusColor(repo.status)}`} />
+                                  <span className="text-sm capitalize underline decoration-dotted">{repo.status}</span>
+                                </div>
+                              </TooltipTrigger>
+                              <TooltipContent className="max-w-xs">
+                                <p className="text-sm">{repo.errorMessage}</p>
+                              </TooltipContent>
+                            </Tooltip>
+                          </TooltipProvider>
+                        ) : (
+                          <>
+                            <div className={`h-2 w-2 rounded-full ${getStatusColor(repo.status)}`} />
+                            <span className="text-sm capitalize">{repo.status}</span>
+                          </>
+                        )}
+                      </div>
+                      {/* Actions */}
+                      <div className="h-full p-3 flex items-center justify-start flex-[1]">
+                        <RepoActionButton
+                          repo={{ id: repo.id ?? "", status: repo.status }}
+                          isLoading={isLoading}
+                          onMirror={() => onMirror({ repoId: repo.id ?? "" })}
+                          onSync={() => onSync({ repoId: repo.id ?? "" })}
+                          onRetry={() => onRetry({ repoId: repo.id ?? "" })}
+                        />
+                      </div>
+                      {/* Links */}
+                      <div className="h-full p-3 flex items-center justify-center gap-x-2 flex-[0.8]">
+                        {(() => {
+                          const giteaUrl = getGiteaRepoUrl(repo);
+
+                          // Determine tooltip based on status and configuration
+                          let tooltip: string;
+                          if (!giteaConfig?.url) {
+                            tooltip = "Gitea not configured";
+                          } else if (repo.status === 'imported') {
+                            tooltip = "Repository not yet mirrored to Gitea";
+                          } else if (repo.status === 'failed') {
+                            tooltip = "Repository mirroring failed";
+                          } else if (repo.status === 'mirroring') {
+                            tooltip = "Repository is being mirrored to Gitea";
+                          } else if (giteaUrl) {
+                            tooltip = "View on Gitea";
+                          } else {
+                            tooltip = "Gitea repository not available";
+                          }
+
+                          return giteaUrl ? (
+                            <Button variant="ghost" size="icon" asChild>
+                              <a
+                                href={giteaUrl}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                title={tooltip}
+                              >
+                                <SiGitea className="h-4 w-4" />
+                              </a>
+                            </Button>
+                          ) : (
+                            <Button variant="ghost" size="icon" disabled title={tooltip}>
+                              <SiGitea className="h-4 w-4" />
+                            </Button>
+                          );
+                        })()}
+                        <Button variant="ghost" size="icon" asChild>
+                          <a
+                            href={repo.url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            title="View on GitHub"
+                          >
+                            <SiGithub className="h-4 w-4" />
+                          </a>
+                        </Button>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* Status Bar */}
+            <div className="h-[40px] flex items-center justify-between border-t bg-muted/30 px-3 relative">
+              <div className="flex items-center gap-2">
+                <div className={`h-1.5 w-1.5 rounded-full ${isLiveActive ? 'bg-emerald-500' : 'bg-primary'}`} />
+                <span className="text-sm font-medium text-foreground">
+                  {hasAnyFilter
+                    ? `Showing ${filteredRepositories.length} of ${repositories.length} repositories`
+                    : `${repositories.length} ${repositories.length === 1 ? 'repository' : 'repositories'} total`}
+                </span>
+              </div>
+
+              {/* Center - Live active indicator */}
+              {isLiveActive && (
+                <div className="flex items-center gap-1.5 absolute left-1/2 transform -translate-x-1/2">
+                  <div
+                    className="h-1 w-1 rounded-full bg-emerald-500"
+                    style={{
+                      animation: 'pulse 2s ease-in-out infinite'
+                    }}
+                  />
+                  <span className="text-xs text-emerald-600 dark:text-emerald-400 font-medium">
+                    Live active
+                  </span>
+                  <div
+                    className="h-1 w-1 rounded-full bg-emerald-500"
+                    style={{
+                      animation: 'pulse 2s ease-in-out infinite',
+                      animationDelay: '1s'
+                    }}
+                  />
+                </div>
+              )}
+
+              {hasAnyFilter && (
+                <span className="text-xs text-muted-foreground">
+                  Filters applied
+                </span>
+              )}
+            </div>
+          </div>
+        </>
+      )}
     </div>
   );
 }
@@ -531,7 +757,7 @@ function RepoActionButton({
     disabled ||= repo.status === "syncing";
   } else if (["imported", "mirroring"].includes(repo.status)) {
     label = "Mirror";
-    icon = <FlipHorizontal className="h-4 w-4 mr-1" />; // Don't change this icon to GitFork.
+    icon = <FlipHorizontal className="h-4 w-4 mr-1" />;
     onClick = onMirror;
     disabled ||= repo.status === "mirroring";
   } else {
@@ -558,4 +784,4 @@ function RepoActionButton({
       )}
     </Button>
   );
-}
+}

src/components/ui/drawer.tsx

@@ -0,0 +1,133 @@
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

src/hooks/useAuth.ts

@@ -38,9 +38,6 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     // setIsLoading(true);
     try {
       const user = await authApi.getCurrentUser();
-
-      console.log("User data refreshed:", user);
-
       setUser(user);
     } catch (err: any) {
       setUser(null);

src/hooks/useSEE.ts

@@ -64,7 +64,6 @@ export const useSSE = ({
     eventSource.onopen = () => {
       setConnected(true);
       setReconnectCount(0); // Reset reconnect counter on successful connection
-      console.log(`Connected to SSE for user: ${userId}`);
     };
 
     eventSource.onerror = (error) => {

src/hooks/useSyncRepo.ts

@@ -51,7 +51,6 @@ export function useRepoSync({
 
     const sync = async () => {
       try {
-        console.log("Attempting to sync...");
         const response = await fetch("/api/job/schedule-sync-repo", {
           method: "POST",
           headers: {
@@ -68,7 +67,6 @@ export function useRepoSync({
         await refreshUser(); // refresh user data to get latest sync times. this can be taken from the schedule-sync-repo response but might not be reliable in cases of errors
 
         const result = await response.json();
-        console.log("Sync successful:", result);
         return result;
       } catch (error) {
         console.error("Sync failed:", error);

src/lib/gitea.ts

@@ -3,6 +3,7 @@ import {
   type RepositoryVisibility,
   type RepoStatus,
 } from "@/types/Repository";
+import { membershipRoleEnum } from "@/types/organizations";
 import { Octokit } from "@octokit/rest";
 import type { Config } from "@/types/config";
 import type { Organization, Repository } from "./db/schema";
@@ -22,13 +23,26 @@ export const getOrganizationConfig = async ({
   userId: string;
 }): Promise<Organization | null> => {
   try {
-    const [orgConfig] = await db
+    const result = await db
       .select()
       .from(organizations)
       .where(and(eq(organizations.name, orgName), eq(organizations.userId, userId)))
       .limit(1);
 
-    return orgConfig || null;
+    if (!result[0]) {
+      return null;
+    }
+
+    // Validate and cast the membershipRole to ensure type safety
+    const rawOrg = result[0];
+    const membershipRole = membershipRoleEnum.parse(rawOrg.membershipRole);
+    const status = repoStatusEnum.parse(rawOrg.status);
+
+    return {
+      ...rawOrg,
+      membershipRole,
+      status,
+    } as Organization;
   } catch (error) {
     console.error(`Error fetching organization config for ${orgName}:`, error);
     return null;
@@ -113,7 +127,7 @@ export const getGiteaRepoOwner = ({
 
   // Get the mirror strategy - use preserveOrgStructure for backward compatibility
   const mirrorStrategy = config.giteaConfig.mirrorStrategy || 
-    (config.githubConfig.preserveOrgStructure ? "preserve" : "flat-user");
+    (config.giteaConfig.preserveOrgStructure ? "preserve" : "flat-user");
 
   switch (mirrorStrategy) {
     case "preserve":
@@ -870,8 +884,8 @@ export async function mirrorGitHubOrgToGitea({
     });
 
     // Get the mirror strategy - use preserveOrgStructure for backward compatibility
-    const mirrorStrategy = config.giteaConfig?.mirrorStrategy || 
-      (config.githubConfig?.preserveOrgStructure ? "preserve" : "flat-user");
+    const mirrorStrategy = config.giteaConfig?.mirrorStrategy ||
+      (config.giteaConfig?.preserveOrgStructure ? "preserve" : "flat-user");
 
     let giteaOrgId: number;
     let targetOrgName: string;

src/styles/global.css

@@ -146,3 +146,13 @@
 .dark ::-webkit-scrollbar-thumb:hover {
   background-color: oklch(0.6 0 0);
 }
+
+/* ===== Animations ===== */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}