diff --git a/README.md b/README.md
index 2ee40f3..b973e36 100644
--- a/README.md
+++ b/README.md
@@ -143,17 +143,20 @@ src/
 ### ⚡ Quick Start
 
 1. **Clone the repository**
+
    ```bash
    git clone https://github.com/guibranco/gstraccini-bot-portal.git
    cd gstraccini-bot-portal
    ```
 
 2. **Install dependencies**
+
    ```bash
    npm install
    ```
 
 3. **Start development server**
+
    ```bash
    npm run dev
    ```
@@ -165,14 +168,14 @@ src/
 
 ### 🛠️ Available Scripts
 
-| Command | Description |
-|---------|-------------|
-| `npm run dev` | Start development server with hot reload |
-| `npm run build` | Build production-ready application |
-| `npm run preview` | Preview production build locally |
-| `npm run lint` | Run ESLint for code quality checks |
-| `npm run test` | Run test suite with Vitest |
-| `npm run test:coverage` | Run tests with coverage report |
+| Command                 | Description                              |
+| ----------------------- | ---------------------------------------- |
+| `npm run dev`           | Start development server with hot reload |
+| `npm run build`         | Build production-ready application       |
+| `npm run preview`       | Preview production build locally         |
+| `npm run lint`          | Run ESLint for code quality checks       |
+| `npm run test`          | Run test suite with Vitest               |
+| `npm run test:coverage` | Run tests with coverage report           |
 
 ---
 
@@ -209,30 +212,35 @@ src/
 ## 🌟 Features
 
 ### 🎯 Dashboard & Analytics
+
 - **Real-time Statistics** - Live metrics for repositories, PRs, and issues
 - **Activity Timeline** - Chronological view of all repository activities
 - **Performance Insights** - Detailed analytics on workflow efficiency
 - **Custom Widgets** - Configurable dashboard components
 
 ### 🔐 Security & Authentication
+
 - **GitHub OAuth Integration** - Secure authentication via GitHub
 - **Multi-Factor Authentication** - FIDO2, TOTP, and recovery codes support
 - **Session Management** - Secure session handling and automatic expiration
 - **Permission Controls** - Granular access control for repositories
 
 ### 🔧 Repository Management
+
 - **Branch Protection** - Configure and manage branch protection rules
 - **Workflow Automation** - Set up and monitor GitHub Actions workflows
 - **Integration Hub** - Connect with SonarCloud, Codacy, Snyk, and more
 - **Release Management** - Track and manage repository releases
 
 ### 📊 Pull Request & Issue Tracking
+
 - **Advanced Filtering** - Filter by status, labels, assignees, and more
 - **Bulk Operations** - Perform actions on multiple items simultaneously
 - **Timeline Visualization** - Visual representation of PR/issue lifecycle
 - **Automated Workflows** - Set up automated responses and actions
 
 ### 🔔 Notifications & Alerts
+
 - **Real-time Notifications** - Instant updates on important events
 - **Custom Filters** - Configure notification preferences
 - **Priority Levels** - Categorize notifications by importance
@@ -253,6 +261,7 @@ src/
 ### 🎭 Dark Mode Support
 
 The application features a comprehensive dark mode implementation with:
+
 - **System Preference Detection** - Automatically adapts to user's system theme
 - **Manual Toggle** - Users can override system preference
 - **Persistent Settings** - Theme preference saved in localStorage
@@ -297,7 +306,7 @@ The project uses Vite with SWC for optimal performance:
 export default defineConfig({
   plugins: [react()],
   optimizeDeps: {
-    exclude: ['lucide-react'],
+    exclude: ["lucide-react"],
   },
 });
 ```
@@ -322,6 +331,7 @@ npm run test:coverage
 ```
 
 Coverage reports are generated in the `coverage/` directory with:
+
 - **HTML Reports** - Interactive coverage visualization
 - **JSON Reports** - Machine-readable coverage data
 - **LCOV Reports** - Integration with external tools
@@ -360,6 +370,7 @@ CMD ["nginx", "-g", "daemon off;"]
 ### ☁️ Deployment Platforms
 
 The application is optimized for deployment on:
+
 - **Vercel** - Zero-configuration deployment
 - **Netlify** - Continuous deployment from Git
 - **AWS S3 + CloudFront** - Scalable static hosting
@@ -420,4 +431,4 @@ This project is licensed under the **MIT License** - see the [LICENSE](LICENSE)
 
 [⭐ Star this repository](https://github.com/guibranco/gstraccini-bot-portal) if you find it helpful!
 
-</div>
\ No newline at end of file
+</div>
diff --git a/eslint.config.js b/eslint.config.js
index 82c2e20..79a552e 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,28 +1,28 @@
-import js from '@eslint/js';
-import globals from 'globals';
-import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
-import tseslint from 'typescript-eslint';
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
     },
-  }
+  },
 );
diff --git a/src/App.tsx b/src/App.tsx
index 802b809..1323177 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,24 +1,29 @@
-import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
-import { AuthProvider } from './context/AuthContext';
-import { PublicLayout } from './layouts/PublicLayout';
-import { AuthenticatedLayout } from './layouts/AuthenticatedLayout';
-import { Landing } from './pages/Landing';
-import Auth from './pages/Auth';
-import ForgotPassword from './pages/ForgotPassword';
-import Privacy from './pages/Privacy';
-import Security from './pages/Security';
-import Status from './pages/Status';
-import Terms from './pages/Terms';
-import { Dashboard } from './pages/Dashboard';
-import { Repositories } from './pages/Repositories';
-import { RepositoryDetail } from './pages/RepositoryDetail';
-import { Issues } from './pages/Issues';
-import { PullRequests } from './pages/PullRequests';
-import { PullRequestDetail } from './pages/PullRequestDetail';
-import { Notifications } from './pages/Notifications';
-import { Account } from './pages/Account';
-import { Settings } from './pages/Settings';
-import { Integrations } from './pages/Integrations';
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Navigate,
+} from "react-router-dom";
+import { AuthProvider } from "./context/AuthContext";
+import { PublicLayout } from "./layouts/PublicLayout";
+import { AuthenticatedLayout } from "./layouts/AuthenticatedLayout";
+import { Landing } from "./pages/Landing";
+import Auth from "./pages/Auth";
+import ForgotPassword from "./pages/ForgotPassword";
+import Privacy from "./pages/Privacy";
+import Security from "./pages/Security";
+import Status from "./pages/Status";
+import Terms from "./pages/Terms";
+import { Dashboard } from "./pages/Dashboard";
+import { Repositories } from "./pages/Repositories";
+import { RepositoryDetail } from "./pages/RepositoryDetail";
+import { Issues } from "./pages/Issues";
+import { PullRequests } from "./pages/PullRequests";
+import { PullRequestDetail } from "./pages/PullRequestDetail";
+import { Notifications } from "./pages/Notifications";
+import { Account } from "./pages/Account";
+import { Settings } from "./pages/Settings";
+import { Integrations } from "./pages/Integrations";
 
 function App() {
   return (
@@ -35,12 +40,15 @@ function App() {
             <Route path="status" element={<Status />} />
             <Route path="terms" element={<Terms />} />
           </Route>
-          
+
           {/* Authenticated Routes - Dashboard Area */}
           <Route path="/dashboard" element={<AuthenticatedLayout />}>
             <Route index element={<Dashboard />} />
             <Route path="repositories" element={<Repositories />} />
-            <Route path="repositories/:org/:repo" element={<RepositoryDetail />} />
+            <Route
+              path="repositories/:org/:repo"
+              element={<RepositoryDetail />}
+            />
             <Route path="issues" element={<Issues />} />
             <Route path="pull-requests" element={<PullRequests />} />
             <Route path="pull-requests/:id" element={<PullRequestDetail />} />
@@ -49,7 +57,7 @@ function App() {
             <Route path="settings" element={<Settings />} />
             <Route path="integrations" element={<Integrations />} />
           </Route>
-          
+
           {/* Catch all route - redirect to landing */}
           <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>
diff --git a/src/components/ActivityList.tsx b/src/components/ActivityList.tsx
index 3e5823c..771085d 100644
--- a/src/components/ActivityList.tsx
+++ b/src/components/ActivityList.tsx
@@ -1,22 +1,28 @@
-import { Activity } from '../types';
-import { GitPullRequest, GitMerge, XCircle, GitCommit, GitPullRequestDraft } from 'lucide-react';
-import { Link } from 'react-router-dom';
+import { Activity } from "../types";
+import {
+  GitPullRequest,
+  GitMerge,
+  XCircle,
+  GitCommit,
+  GitPullRequestDraft,
+} from "lucide-react";
+import { Link } from "react-router-dom";
 
 interface ActivityListProps {
   activities: Activity[];
 }
 
-const getActivityIcon = (type: Activity['type']) => {
+const getActivityIcon = (type: Activity["type"]) => {
   switch (type) {
-    case 'pr_created':
+    case "pr_created":
       return <GitPullRequest className="w-5 h-5 text-blue-500" />;
-    case 'pr_merged':
+    case "pr_merged":
       return <GitMerge className="w-5 h-5 text-purple-500" />;
-    case 'issue_closed':
+    case "issue_closed":
       return <XCircle className="w-5 h-5 text-green-500" />;
-    case 'commits_analyzed':
+    case "commits_analyzed":
       return <GitCommit className="w-5 h-5 text-orange-500" />;
-    case 'pr_opened':
+    case "pr_opened":
       return <GitPullRequestDraft className="w-5 h-5 text-blue-500" />;
   }
 };
@@ -24,10 +30,15 @@ const getActivityIcon = (type: Activity['type']) => {
 export function ActivityList({ activities }: ActivityListProps) {
   return (
     <div className="bg-white rounded-xl shadow-lg p-6">
-      <h3 className="text-xl font-semibold text-gray-800 mb-4">Recent Activities</h3>
+      <h3 className="text-xl font-semibold text-gray-800 mb-4">
+        Recent Activities
+      </h3>
       <div className="space-y-4">
         {activities.map((activity) => (
-          <div key={activity.id} className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
+          <div
+            key={activity.id}
+            className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg"
+          >
             {getActivityIcon(activity.type)}
             <div className="flex-1">
               <div className="flex items-center space-x-2">
@@ -54,11 +65,11 @@ export function ActivityList({ activities }: ActivityListProps) {
                   {activity.repository}
                 </Link>
                 <span className="mx-2">•</span>
-                {new Date(activity.timestamp).toLocaleDateString('en-US', {
-                  month: 'short',
-                  day: 'numeric',
-                  hour: '2-digit',
-                  minute: '2-digit'
+                {new Date(activity.timestamp).toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  hour: "2-digit",
+                  minute: "2-digit",
                 })}
               </p>
             </div>
@@ -67,4 +78,4 @@ export function ActivityList({ activities }: ActivityListProps) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/BulletDiagram.tsx b/src/components/BulletDiagram.tsx
index b0e846e..f665058 100644
--- a/src/components/BulletDiagram.tsx
+++ b/src/components/BulletDiagram.tsx
@@ -1,30 +1,34 @@
-import React from 'react';
-import { Circle, User, Code, Globe } from 'lucide-react';
-import { Event } from '../types';
-import { getAppAvatarUrl } from '../utils/avatar';
-import { groupEventsByPayloadId } from '../utils/events';
+import React from "react";
+import { Circle, User, Code, Globe } from "lucide-react";
+import { Event } from "../types";
+import { getAppAvatarUrl } from "../utils/avatar";
+import { groupEventsByPayloadId } from "../utils/events";
 
 interface BulletDiagramProps {
   readonly events: readonly Event[];
   readonly onViewPayload: (payload: Record<string, unknown>) => void;
 }
 
-export function BulletDiagram({ events, onViewPayload }: Readonly<BulletDiagramProps>) {
+export function BulletDiagram({
+  events,
+  onViewPayload,
+}: Readonly<BulletDiagramProps>) {
   const formatDateTime = (date: string) => {
     return new Date(date).toLocaleString(undefined, {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit'
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
     });
   };
 
   const getEventLabel = (event: Event): string => {
-    const title = event.payload.check_run?.name || 
-                 event.payload.workflow_run?.name ||
-                 event.payload.workflow_job?.name;
+    const title =
+      event.payload.check_run?.name ||
+      event.payload.workflow_run?.name ||
+      event.payload.workflow_job?.name;
 
     if (title) {
       return `${title} (${event.action})`;
@@ -49,12 +53,12 @@ export function BulletDiagram({ events, onViewPayload }: Readonly<BulletDiagramP
     } else if (event.payload.release) {
       return `Release ${event.action}`;
     }
-    return `${event.type}${event.action ? `: ${event.action}` : ''}`;
+    return `${event.type}${event.action ? `: ${event.action}` : ""}`;
   };
 
   const getEventColor = (event: Event): string => {
     // Check for conclusion in various payload types
-    const conclusion = 
+    const conclusion =
       event.payload.check_run?.conclusion ||
       event.payload.check_suite?.conclusion ||
       event.payload.status?.state ||
@@ -64,92 +68,98 @@ export function BulletDiagram({ events, onViewPayload }: Readonly<BulletDiagramP
 
     if (!conclusion) {
       // Check for status in workflow events
-      const status = 
+      const status =
         event.payload.workflow_run?.status ||
         event.payload.workflow_job?.status;
-      
+
       if (status) {
         switch (status.toLowerCase()) {
-          case 'completed':
-            return 'bg-green-400';
-          case 'in_progress':
-            return 'bg-yellow-400';
-          case 'queued':
-            return 'bg-blue-400';
-          case 'waiting':
-            return 'bg-purple-400';
+          case "completed":
+            return "bg-green-400";
+          case "in_progress":
+            return "bg-yellow-400";
+          case "queued":
+            return "bg-blue-400";
+          case "waiting":
+            return "bg-purple-400";
           default:
-            return 'bg-blue-400';
+            return "bg-blue-400";
         }
       }
 
       // Special handling for release events
-      if (event.type === 'release') {
+      if (event.type === "release") {
         switch (event.action) {
-          case 'published':
-            return 'bg-green-400';
-          case 'unpublished':
-            return 'bg-red-400';
-          case 'created':
-            return 'bg-blue-400';
-          case 'edited':
-            return 'bg-yellow-400';
-          case 'deleted':
-            return 'bg-red-400';
-          case 'prereleased':
-            return 'bg-purple-400';
-          case 'released':
-            return 'bg-green-400';
+          case "published":
+            return "bg-green-400";
+          case "unpublished":
+            return "bg-red-400";
+          case "created":
+            return "bg-blue-400";
+          case "edited":
+            return "bg-yellow-400";
+          case "deleted":
+            return "bg-red-400";
+          case "prereleased":
+            return "bg-purple-400";
+          case "released":
+            return "bg-green-400";
           default:
-            return 'bg-blue-400';
+            return "bg-blue-400";
         }
       }
-      
-      return 'bg-blue-400';
+
+      return "bg-blue-400";
     }
 
     switch (conclusion.toLowerCase()) {
-      case 'success':
-      case 'completed':
-      case 'approved':
-        return 'bg-green-400';
-      case 'failure':
-      case 'failed':
-      case 'changes_requested':
-        return 'bg-red-400';
-      case 'cancelled':
-      case 'timed_out':
-      case 'dismissed':
-        return 'bg-gray-400';
-      case 'neutral':
-      case 'pending':
-      case 'queued':
-      case 'in_progress':
-        return 'bg-yellow-400';
-      case 'skipped':
-      case 'stale':
-        return 'bg-purple-400';
+      case "success":
+      case "completed":
+      case "approved":
+        return "bg-green-400";
+      case "failure":
+      case "failed":
+      case "changes_requested":
+        return "bg-red-400";
+      case "cancelled":
+      case "timed_out":
+      case "dismissed":
+        return "bg-gray-400";
+      case "neutral":
+      case "pending":
+      case "queued":
+      case "in_progress":
+        return "bg-yellow-400";
+      case "skipped":
+      case "stale":
+        return "bg-purple-400";
       default:
-        return 'bg-blue-400';
+        return "bg-blue-400";
     }
   };
 
   // Group events by their type to create rows
-  const groupedByType = events.reduce((acc, event) => {
-    const type = event.payload.check_run?.name || 
-                 event.payload.workflow_run?.name ||
-                 event.payload.workflow_job?.name ||
-                 event.type;
-    if (!acc[type]) {
-      acc[type] = [];
-    }
-    acc[type].push(event);
-    return acc;
-  }, {} as Record<string, Event[]>);
+  const groupedByType = events.reduce(
+    (acc, event) => {
+      const type =
+        event.payload.check_run?.name ||
+        event.payload.workflow_run?.name ||
+        event.payload.workflow_job?.name ||
+        event.type;
+      if (!acc[type]) {
+        acc[type] = [];
+      }
+      acc[type].push(event);
+      return acc;
+    },
+    {} as Record<string, Event[]>,
+  );
 
   // Sort events within each group by timestamp
-  Object.values(groupedByType).forEach(group => {
-    group.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+  Object.values(groupedByType).forEach((group) => {
+    group.sort(
+      (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
+    );
   });
 
   return (
@@ -157,13 +167,17 @@ export function BulletDiagram({ events, onViewPayload }: Readonly<BulletDiagramP
       <div className="min-w-full w-max">
         {Object.entries(groupedByType).map(([type, typeEvents]) => (
           <div key={type} className="mb-8 last:mb-0">
-            <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{type}</h3>
+            <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              {type}
+            </h3>
             <div className="flex items-center space-x-2 min-h-[120px] py-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg px-4">
               {typeEvents.map((event, index) => {
                 const appData = event.payload[event.type]?.app;
-                
+
                 return (
-                  <React.Fragment key={`${event.delivery_id}-${event.type}-${event.action}`}>
+                  <React.Fragment
+                    key={`${event.delivery_id}-${event.type}-${event.action}`}
+                  >
                     {index > 0 && (
                       <div className="h-[2px] w-16 bg-gray-700 relative">
                         <div className="absolute -top-2 left-1/2 transform -translate-x-1/2 text-xs text-gray-500">
@@ -215,7 +229,9 @@ export function BulletDiagram({ events, onViewPayload }: Readonly<BulletDiagramP
                         className="group flex flex-col items-center hover:scale-105 transition-transform"
                         title="View event payload"
                       >
-                        <div className={`w-4 h-4 ${getEventColor(event)} rounded-full flex items-center justify-center group-hover:ring-2 group-hover:ring-blue-400 group-hover:ring-offset-1 group-hover:ring-offset-gray-900 transition-all`}>
+                        <div
+                          className={`w-4 h-4 ${getEventColor(event)} rounded-full flex items-center justify-center group-hover:ring-2 group-hover:ring-blue-400 group-hover:ring-offset-1 group-hover:ring-offset-gray-900 transition-all`}
+                        >
                           <Circle className="w-3 h-3 text-gray-900" />
                         </div>
                         <div className="flex flex-col items-center">
@@ -238,4 +254,4 @@ export function BulletDiagram({ events, onViewPayload }: Readonly<BulletDiagramP
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/CommandsSection.tsx b/src/components/CommandsSection.tsx
index 3de63eb..0b49cb4 100644
--- a/src/components/CommandsSection.tsx
+++ b/src/components/CommandsSection.tsx
@@ -1,151 +1,160 @@
-import React from 'react';
-import { Terminal, ExternalLink } from 'lucide-react';
+import React from "react";
+import { Terminal, ExternalLink } from "lucide-react";
 
 const commands = [
   {
     command: "@gstraccini help",
     description: "Shows the help message with available commands.",
     docs: "https://docs.gstraccini.bot/commands/help",
-    places: "All"
+    places: "All",
   },
   {
     command: "@gstraccini add project <projectPath>",
-    description: "Adds a project to the solution file (only for .NET projects).",
+    description:
+      "Adds a project to the solution file (only for .NET projects).",
     docs: "https://docs.gstraccini.bot/commands/add-project",
-    places: "Portal"
+    places: "Portal",
   },
   {
     command: "@gstraccini appveyor build <type>",
-    description: "Runs the AppVeyor build for the target commit and/or pull request.",
+    description:
+      "Runs the AppVeyor build for the target commit and/or pull request.",
     docs: "https://docs.gstraccini.bot/commands/appveyor-build",
-    places: "Pull Requests"
+    places: "Pull Requests",
   },
   {
     command: "@gstraccini appveyor bump version <component>",
     description: "Bumps the CI version in AppVeyor.",
     docs: "https://docs.gstraccini.bot/commands/appveyor-bump-version",
-    places: "Issues + Pull Requests"
+    places: "Issues + Pull Requests",
   },
   {
     command: "@gstraccini appveyor register",
     description: "Registers the repository in AppVeyor.",
     docs: "https://docs.gstraccini.bot/commands/appveyor-register",
-    places: "Portal"
+    places: "Portal",
   },
   {
     command: "@gstraccini appveyor reset",
     description: "Resets the AppVeyor build number for the target repository.",
     docs: "https://docs.gstraccini.bot/commands/appveyor-reset",
-    places: "Pull Requests"
+    places: "Pull Requests",
   },
   {
     command: "@gstraccini bump version <version> <project>",
     description: "Bumps the .NET version in .csproj files.",
     docs: "https://docs.gstraccini.bot/commands/bump-version",
-    places: "Portal"
+    places: "Portal",
   },
   {
     command: "@gstraccini cargo clippy",
-    description: "Formats the Rust code using Cargo Clippy (only for Rust projects).",
+    description:
+      "Formats the Rust code using Cargo Clippy (only for Rust projects).",
     docs: "https://docs.gstraccini.bot/commands/cargo-clippy",
-    places: "All"
+    places: "All",
   },
   {
     command: "@gstraccini change runner <runner> <workflow> <jobs>",
     description: "Changes the GitHub action runner in a workflow file (.yml).",
     docs: "https://docs.gstraccini.bot/commands/change-runner",
-    places: "Issues + Pull Requests"
+    places: "Issues + Pull Requests",
   },
   {
     command: "@gstraccini codacy bypass",
-    description: "Bypasses the Codacy analysis for the target commit and/or pull request.",
+    description:
+      "Bypasses the Codacy analysis for the target commit and/or pull request.",
     docs: "https://docs.gstraccini.bot/commands/codacy-bypass",
-    places: "Pull Requests"
+    places: "Pull Requests",
   },
   {
     command: "@gstraccini codacy reanalyze commit",
     description: "Reanalyzes the Codacy last commit in a pull request.",
     docs: "https://docs.gstraccini.bot/commands/codacy-reanalyze-commit",
-    places: "Pull Requests"
+    places: "Pull Requests",
   },
   {
     command: "@gstraccini codeclimate bypass",
-    description: "Bypasses the CodeClimate analysis for the target commit and/or pull request.",
+    description:
+      "Bypasses the CodeClimate analysis for the target commit and/or pull request.",
     docs: "https://docs.gstraccini.bot/commands/codeclimate-bypass",
-    places: "Pull Requests"
+    places: "Pull Requests",
   },
   {
     command: "@gstraccini copy labels <repository>",
     description: "Copies the labels from another repository.",
     docs: "https://docs.gstraccini.bot/commands/copy-labels",
-    places: "Issues"
+    places: "Issues",
   },
   {
     command: "@gstraccini copy issue <repository>",
     description: "Copies an issue from one repository to another.",
     docs: "https://docs.gstraccini.bot/commands/copy-issue",
-    places: "Issues"
+    places: "Issues",
   },
   {
     command: "@gstraccini create labels <style> <categories>",
     description: "Creates the default labels in the repository.",
     docs: "https://docs.gstraccini.bot/commands/create-labels",
-    places: "Issues"
+    places: "Issues",
   },
   {
     command: "@gstraccini csharpier",
-    description: "Formats the C# code using CSharpier (only for .NET projects).",
+    description:
+      "Formats the C# code using CSharpier (only for .NET projects).",
     docs: "https://docs.gstraccini.bot/commands/csharpier",
-    places: "All"
+    places: "All",
   },
   {
     command: "@gstraccini fix csproj",
-    description: "Updates the .csproj file with the packages.config version of NuGet packages (only for .NET Framework projects).",
+    description:
+      "Updates the .csproj file with the packages.config version of NuGet packages (only for .NET Framework projects).",
     docs: "https://docs.gstraccini.bot/commands/fix-csproj",
-    places: "Portal"
+    places: "Portal",
   },
   {
     command: "@gstraccini npm check updates",
-    description: "Updates dependencies in a package.json and package-lock.json.",
+    description:
+      "Updates dependencies in a package.json and package-lock.json.",
     docs: "https://docs.gstraccini.bot/commands/npm-check-updates",
-    places: "Portal"
+    places: "Portal",
   },
   {
     command: "@gstraccini npm dist",
     description: "Generates or regenerates the dist files.",
     docs: "https://docs.gstraccini.bot/commands/npm-dist",
-    places: "Portal"
+    places: "Portal",
   },
   {
     command: "@gstraccini prettier",
     description: "Formats the code using Prettier.",
     docs: "https://docs.gstraccini.bot/commands/prettier",
-    places: "All"
+    places: "All",
   },
   {
     command: "@gstraccini rerun checks <conclusion>",
     description: "Reruns the checks in the target pull request.",
     docs: "https://docs.gstraccini.bot/commands/rerun-checks",
-    places: "Pull Requests"
+    places: "Pull Requests",
   },
   {
     command: "@gstraccini rerun workflows <conclusion>",
     description: "Reruns the workflows (actions) in the target pull request.",
     docs: "https://docs.gstraccini.bot/commands/rerun-workflows",
-    places: "Pull Requests"
+    places: "Pull Requests",
   },
   {
     command: "@gstraccini review",
     description: "Enables review for the target pull request.",
     docs: "https://docs.gstraccini.bot/commands/review",
-    places: "Pull Requests"
+    places: "Pull Requests",
   },
   {
     command: "@gstraccini update snapshot",
-    description: "Updates test snapshots (npm test -- -u) (only for Node.js projects).",
+    description:
+      "Updates test snapshots (npm test -- -u) (only for Node.js projects).",
     docs: "https://docs.gstraccini.bot/commands/update-snapshot",
-    places: "Portal"
-  }
+    places: "Portal",
+  },
 ];
 
 export default function CommandsSection() {
@@ -162,17 +171,19 @@ export default function CommandsSection() {
         </div>
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
           {commands.map((command, index) => (
-            <div 
-              key={index} 
+            <div
+              key={index}
               className="p-6 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors border border-gray-200"
             >
               <Terminal className="h-6 w-6 text-blue-600 mb-4" />
               <code className="text-sm font-mono text-blue-600 mb-3 block">
                 {command.command}
               </code>
-              <p className="text-gray-600 text-sm mb-4">{command.description}</p>
+              <p className="text-gray-600 text-sm mb-4">
+                {command.description}
+              </p>
               <div className="flex items-center justify-between">
-                <a 
+                <a
                   href={command.docs}
                   target="_blank"
                   rel="noopener noreferrer"
@@ -191,4 +202,4 @@ export default function CommandsSection() {
       </div>
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/FeaturesGrid.tsx b/src/components/FeaturesGrid.tsx
index 641f516..f0318ec 100644
--- a/src/components/FeaturesGrid.tsx
+++ b/src/components/FeaturesGrid.tsx
@@ -1,44 +1,50 @@
-import React from 'react';
-import { 
-  GitPullRequest, 
-  CheckCircle2, 
-  Package, 
-  Code2, 
-  Bug, 
-  Rocket 
-} from 'lucide-react';
+import React from "react";
+import {
+  GitPullRequest,
+  CheckCircle2,
+  Package,
+  Code2,
+  Bug,
+  Rocket,
+} from "lucide-react";
 
 const features = [
   {
     icon: <GitPullRequest className="h-6 w-6" />,
     title: "Automated PRs",
-    description: "Auto-label pull requests based on size and impact, streamlining your review process."
+    description:
+      "Auto-label pull requests based on size and impact, streamlining your review process.",
   },
   {
     icon: <CheckCircle2 className="h-6 w-6" />,
     title: "PR Validation",
-    description: "Enforce checklist completion and maintain high-quality documentation standards."
+    description:
+      "Enforce checklist completion and maintain high-quality documentation standards.",
   },
   {
     icon: <Package className="h-6 w-6" />,
     title: "NPM Workflows",
-    description: "Automate distribution file generation, Prettier formatting, and dependency updates."
+    description:
+      "Automate distribution file generation, Prettier formatting, and dependency updates.",
   },
   {
     icon: <Code2 className="h-6 w-6" />,
     title: ".NET Integration",
-    description: "Run linters, CSharpier, and format commands directly from pull requests."
+    description:
+      "Run linters, CSharpier, and format commands directly from pull requests.",
   },
   {
     icon: <Bug className="h-6 w-6" />,
     title: "AI-Powered Issues",
-    description: "Generate issue descriptions using OpenAI, Llama, or Claude for better context."
+    description:
+      "Generate issue descriptions using OpenAI, Llama, or Claude for better context.",
   },
   {
     icon: <Rocket className="h-6 w-6" />,
     title: "CI/CD Pipeline",
-    description: "Seamless integration with GitHub Actions, GitVersion, and Appveyor for version control."
-  }
+    description:
+      "Seamless integration with GitHub Actions, GitVersion, and Appveyor for version control.",
+  },
 ];
 
 export default function FeaturesGrid() {
@@ -61,7 +67,9 @@ export default function FeaturesGrid() {
                 <div className="inline-flex items-center justify-center p-2 bg-blue-100 rounded-lg text-blue-600 mb-4">
                   {feature.icon}
                 </div>
-                <h3 className="text-lg font-semibold text-gray-900 mb-2">{feature.title}</h3>
+                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                  {feature.title}
+                </h3>
                 <p className="text-gray-600">{feature.description}</p>
               </div>
             </div>
@@ -70,4 +78,4 @@ export default function FeaturesGrid() {
       </div>
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 30b3433..eda5961 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,5 +1,5 @@
-import { Link } from 'react-router-dom';
-import { Github, Bot } from 'lucide-react';
+import { Link } from "react-router-dom";
+import { Github, Bot } from "lucide-react";
 
 export function Footer() {
   const currentYear = new Date().getFullYear();
@@ -11,7 +11,9 @@ export function Footer() {
           {/* Bot Name with Icon */}
           <div className="flex items-center space-x-3">
             <Bot className="h-8 w-8 text-blue-600" />
-            <span className="text-xl font-bold text-gray-900 dark:text-white">GStraccini Bot</span>
+            <span className="text-xl font-bold text-gray-900 dark:text-white">
+              GStraccini Bot
+            </span>
           </div>
 
           {/* Copyright */}
@@ -23,7 +25,7 @@ export function Footer() {
           <nav>
             <ul className="flex flex-wrap justify-center gap-6 text-sm">
               <li>
-                <Link 
+                <Link
                   to="/privacy"
                   className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
                 >
@@ -31,7 +33,7 @@ export function Footer() {
                 </Link>
               </li>
               <li>
-                <Link 
+                <Link
                   to="/terms"
                   className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
                 >
@@ -39,7 +41,7 @@ export function Footer() {
                 </Link>
               </li>
               <li>
-                <Link 
+                <Link
                   to="/security"
                   className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
                 >
@@ -47,7 +49,7 @@ export function Footer() {
                 </Link>
               </li>
               <li>
-                <Link 
+                <Link
                   to="/status"
                   className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
                 >
@@ -55,7 +57,7 @@ export function Footer() {
                 </Link>
               </li>
               <li>
-                <a 
+                <a
                   href="https://docs.gstraccini.bot"
                   target="_blank"
                   rel="noopener noreferrer"
@@ -65,7 +67,7 @@ export function Footer() {
                 </a>
               </li>
               <li>
-                <a 
+                <a
                   href="https://api.bot.straccini.com"
                   target="_blank"
                   rel="noopener noreferrer"
@@ -75,7 +77,7 @@ export function Footer() {
                 </a>
               </li>
               <li>
-                <a 
+                <a
                   href="https://github.com/marketplace/gstraccini-bot"
                   target="_blank"
                   rel="noopener noreferrer"
@@ -86,7 +88,7 @@ export function Footer() {
                 </a>
               </li>
               <li>
-                <a 
+                <a
                   href="https://github.com/guibranco/gstraccini-bot-service"
                   target="_blank"
                   rel="noopener noreferrer"
@@ -102,4 +104,4 @@ export function Footer() {
       </div>
     </footer>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index f599839..09c1731 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,5 +1,5 @@
-import { useState, useEffect, useRef } from 'react';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { useState, useEffect, useRef } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import {
   LayoutDashboard,
   FolderOpen,
@@ -15,8 +15,8 @@ import {
   LogOut,
   Bot,
   Home,
-} from 'lucide-react';
-import type { User as UserType } from '../types';
+} from "lucide-react";
+import type { User as UserType } from "../types";
 
 interface HeaderProps {
   user: UserType;
@@ -34,57 +34,67 @@ export function Header({ user }: HeaderProps) {
 
   useEffect(() => {
     // Check system preference and localStorage on mount
-    const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const storedPreference = localStorage.getItem('darkMode');
-    const shouldUseDarkMode = storedPreference === 'true' || (storedPreference === null && darkModePreference);
-    
+    const darkModePreference = window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    ).matches;
+    const storedPreference = localStorage.getItem("darkMode");
+    const shouldUseDarkMode =
+      storedPreference === "true" ||
+      (storedPreference === null && darkModePreference);
+
     setIsDarkMode(shouldUseDarkMode);
     if (shouldUseDarkMode) {
-      document.documentElement.classList.add('dark');
+      document.documentElement.classList.add("dark");
     } else {
-      document.documentElement.classList.remove('dark');
+      document.documentElement.classList.remove("dark");
     }
 
     // Listen for system preference changes
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handleChange = (e: MediaQueryListEvent) => {
-      if (localStorage.getItem('darkMode') === null) {
+      if (localStorage.getItem("darkMode") === null) {
         setIsDarkMode(e.matches);
         if (e.matches) {
-          document.documentElement.classList.add('dark');
+          document.documentElement.classList.add("dark");
         } else {
-          document.documentElement.classList.remove('dark');
+          document.documentElement.classList.remove("dark");
         }
       }
     };
 
-    mediaQuery.addEventListener('change', handleChange);
-    return () => mediaQuery.removeEventListener('change', handleChange);
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
   }, []);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (notificationsRef.current && !notificationsRef.current.contains(event.target as Node)) {
+      if (
+        notificationsRef.current &&
+        !notificationsRef.current.contains(event.target as Node)
+      ) {
         setIsNotificationsOpen(false);
       }
-      if (profileRef.current && !profileRef.current.contains(event.target as Node)) {
+      if (
+        profileRef.current &&
+        !profileRef.current.contains(event.target as Node)
+      ) {
         setIsProfileOpen(false);
       }
     };
 
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
   const toggleDarkMode = () => {
     const newMode = !isDarkMode;
     setIsDarkMode(newMode);
-    localStorage.setItem('darkMode', newMode.toString());
-    
+    localStorage.setItem("darkMode", newMode.toString());
+
     if (newMode) {
-      document.documentElement.classList.add('dark');
+      document.documentElement.classList.add("dark");
     } else {
-      document.documentElement.classList.remove('dark');
+      document.documentElement.classList.remove("dark");
     }
   };
 
@@ -92,9 +102,9 @@ export function Header({ user }: HeaderProps) {
     // Clear any authentication data here
     // localStorage.removeItem('authToken');
     // sessionStorage.clear();
-    
+
     // Navigate to landing page
-    navigate('/');
+    navigate("/");
   };
 
   return (
@@ -105,41 +115,51 @@ export function Header({ user }: HeaderProps) {
           <div className="flex items-center space-x-8">
             <Link to="/dashboard" className="flex items-center space-x-3">
               <Bot className="h-8 w-8 text-blue-600" />
-              <span className="text-xl font-bold text-white">GStraccini Bot</span>
+              <span className="text-xl font-bold text-white">
+                GStraccini Bot
+              </span>
             </Link>
 
             <nav className="hidden md:flex items-center space-x-4">
-              <Link 
+              <Link
                 to="/dashboard"
                 className={`flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-blue-700 dark:hover:bg-gray-700 transition-colors ${
-                  location.pathname === '/dashboard' ? 'bg-blue-700 dark:bg-gray-700' : ''
+                  location.pathname === "/dashboard"
+                    ? "bg-blue-700 dark:bg-gray-700"
+                    : ""
                 }`}
               >
                 <LayoutDashboard className="w-5 h-5" />
                 <span>Dashboard</span>
               </Link>
-              <Link 
+              <Link
                 to="/dashboard/repositories"
                 className={`flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-blue-700 dark:hover:bg-gray-700 transition-colors ${
-                  location.pathname === '/dashboard/repositories' ? 'bg-blue-700 dark:bg-gray-700' : ''
+                  location.pathname === "/dashboard/repositories"
+                    ? "bg-blue-700 dark:bg-gray-700"
+                    : ""
                 }`}
               >
                 <FolderOpen className="w-5 h-5" />
                 <span>Repositories</span>
               </Link>
-              <Link 
+              <Link
                 to="/dashboard/issues"
                 className={`flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-blue-700 dark:hover:bg-gray-700 transition-colors ${
-                  location.pathname === '/dashboard/issues' ? 'bg-blue-700 dark:bg-gray-700' : ''
+                  location.pathname === "/dashboard/issues"
+                    ? "bg-blue-700 dark:bg-gray-700"
+                    : ""
                 }`}
               >
                 <AlertCircle className="w-5 h-5" />
                 <span>Issues</span>
               </Link>
-              <Link 
+              <Link
                 to="/dashboard/pull-requests"
                 className={`flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-blue-700 dark:hover:bg-gray-700 transition-colors ${
-                  location.pathname === '/dashboard/pull-requests' ? 'bg-blue-700 dark:bg-gray-700' : ''
+                  location.pathname === "/dashboard/pull-requests"
+                    ? "bg-blue-700 dark:bg-gray-700"
+                    : ""
                 }`}
               >
                 <GitPullRequest className="w-5 h-5" />
@@ -156,7 +176,11 @@ export function Header({ user }: HeaderProps) {
               className="p-2 rounded-full hover:bg-blue-700 dark:hover:bg-gray-700 transition-colors"
               aria-label="Toggle theme"
             >
-              {isDarkMode ? <Moon className="w-6 h-6" /> : <Sun className="w-6 h-6" />}
+              {isDarkMode ? (
+                <Moon className="w-6 h-6" />
+              ) : (
+                <Sun className="w-6 h-6" />
+              )}
             </button>
 
             {/* Notifications */}
@@ -176,16 +200,20 @@ export function Header({ user }: HeaderProps) {
 
               {isNotificationsOpen && (
                 <div className="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-lg shadow-lg py-1 text-gray-800 dark:text-gray-200 z-50">
-                  <div className="px-4 py-2 font-semibold border-b border-gray-200 dark:border-gray-700">Notifications</div>
+                  <div className="px-4 py-2 font-semibold border-b border-gray-200 dark:border-gray-700">
+                    Notifications
+                  </div>
                   <div className="max-h-96 overflow-y-auto">
                     <div className="px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
                       <p className="text-sm">New pull request in repository</p>
-                      <p className="text-xs text-gray-500 dark:text-gray-400">2 minutes ago</p>
+                      <p className="text-xs text-gray-500 dark:text-gray-400">
+                        2 minutes ago
+                      </p>
                     </div>
                     {/* Add more notifications here */}
                   </div>
                   <div className="px-4 py-2 border-t border-gray-200 dark:border-gray-700">
-                    <Link 
+                    <Link
                       to="/dashboard/notifications"
                       className="block text-center text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium"
                       onClick={() => setIsNotificationsOpen(false)}
@@ -223,28 +251,43 @@ export function Header({ user }: HeaderProps) {
 
               {isProfileOpen && (
                 <div className="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg py-1 text-gray-800 dark:text-gray-200 z-50">
-                  <Link to="/" className="flex items-center px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700">
+                  <Link
+                    to="/"
+                    className="flex items-center px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
+                  >
                     <Home className="w-4 h-4 mr-2" />
                     Home
                   </Link>
-                  <Link to="/dashboard" className="flex items-center px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700">
+                  <Link
+                    to="/dashboard"
+                    className="flex items-center px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
+                  >
                     <LayoutDashboard className="w-4 h-4 mr-2" />
                     Dashboard
                   </Link>
-                  <Link to="/dashboard/account" className="flex items-center px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700">
+                  <Link
+                    to="/dashboard/account"
+                    className="flex items-center px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
+                  >
                     <User className="w-4 h-4 mr-2" />
                     Account
                   </Link>
-                  <Link to="/dashboard/settings" className="flex items-center px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700">
+                  <Link
+                    to="/dashboard/settings"
+                    className="flex items-center px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
+                  >
                     <Settings className="w-4 h-4 mr-2" />
                     Settings
                   </Link>
-                  <Link to="/dashboard/integrations" className="flex items-center px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700">
+                  <Link
+                    to="/dashboard/integrations"
+                    className="flex items-center px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
+                  >
                     <Cable className="w-4 h-4 mr-2" />
                     Integrations
                   </Link>
                   <div className="border-t border-gray-200 dark:border-gray-700 my-1"></div>
-                  <button 
+                  <button
                     onClick={handleLogout}
                     className="flex items-center w-full px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
                   >
@@ -259,4 +302,4 @@ export function Header({ user }: HeaderProps) {
       </div>
     </header>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/IssuesList.tsx b/src/components/IssuesList.tsx
index 7bb5f17..108ee9b 100644
--- a/src/components/IssuesList.tsx
+++ b/src/components/IssuesList.tsx
@@ -1,5 +1,5 @@
-import { Issue } from '../types';
-import { CircleDot } from 'lucide-react';
+import { Issue } from "../types";
+import { CircleDot } from "lucide-react";
 
 interface IssuesListProps {
   issues: Issue[];
@@ -57,11 +57,11 @@ export function IssuesList({ issues }: IssuesListProps) {
                     </a>
                     <span className="text-gray-400 mx-2">•</span>
                     <span className="text-gray-500">
-                      {new Date(issue.created_at).toLocaleDateString('en-US', {
-                        month: 'short',
-                        day: 'numeric',
-                        hour: '2-digit',
-                        minute: '2-digit'
+                      {new Date(issue.created_at).toLocaleDateString("en-US", {
+                        month: "short",
+                        day: "numeric",
+                        hour: "2-digit",
+                        minute: "2-digit",
                       })}
                     </span>
                   </div>
@@ -73,7 +73,7 @@ export function IssuesList({ issues }: IssuesListProps) {
                           className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
                           style={{
                             backgroundColor: `#${label.color}`,
-                            color: luminance(label.color)
+                            color: luminance(label.color),
                           }}
                           title={label.description}
                         >
@@ -94,11 +94,11 @@ export function IssuesList({ issues }: IssuesListProps) {
 
 function luminance(color: string): string {
   if (!/^[0-9A-Fa-f]{6}$/.test(color)) {
-    throw new Error('Invalid color format. Expected 6-digit hex color.');
+    throw new Error("Invalid color format. Expected 6-digit hex color.");
   }
   const red = parseInt(color.slice(0, 2), 16);
   const green = parseInt(color.slice(2, 2), 16);
   const blue = parseInt(color.slice(4, 2), 16);
-  const yiq = ((red * 299) + (green * 587) + (blue * 114)) / 1000;
-  return yiq >= 128 ? '#000' : '#fff';
-}
\ No newline at end of file
+  const yiq = (red * 299 + green * 587 + blue * 114) / 1000;
+  return yiq >= 128 ? "#000" : "#fff";
+}
diff --git a/src/components/LandingFooter.tsx b/src/components/LandingFooter.tsx
index 3dfbf7f..8796c8e 100644
--- a/src/components/LandingFooter.tsx
+++ b/src/components/LandingFooter.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { Bot } from 'lucide-react';
+import React from "react";
+import { Link } from "react-router-dom";
+import { Bot } from "lucide-react";
 
 export default function Footer() {
   return (
@@ -13,25 +13,82 @@ export default function Footer() {
               <h3 className="text-lg font-semibold">GStraccini Bot</h3>
             </div>
             <p className="text-gray-400 text-sm">
-              Automate your GitHub workflow with powerful commands and integrations.
+              Automate your GitHub workflow with powerful commands and
+              integrations.
             </p>
           </div>
           <div>
             <h3 className="text-lg font-semibold mb-4">Resources</h3>
             <ul className="space-y-2 text-gray-400">
-              <li><a href="https://docs.gstraccini.bot" className="hover:text-white transition-colors">Documentation</a></li>
-              <li><a href="https://docs.gstraccini.bot/api" className="hover:text-white transition-colors">API Reference</a></li>
-              <li><a href="https://github.com/guibranco/gstraccini-bot-service" className="hover:text-white transition-colors">GitHub</a></li>
-              <li><a href="https://github.com/marketplace/gstraccini-bot" className="hover:text-white transition-colors">GitHub Marketplace</a></li>
+              <li>
+                <a
+                  href="https://docs.gstraccini.bot"
+                  className="hover:text-white transition-colors"
+                >
+                  Documentation
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://docs.gstraccini.bot/api"
+                  className="hover:text-white transition-colors"
+                >
+                  API Reference
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://github.com/guibranco/gstraccini-bot-service"
+                  className="hover:text-white transition-colors"
+                >
+                  GitHub
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://github.com/marketplace/gstraccini-bot"
+                  className="hover:text-white transition-colors"
+                >
+                  GitHub Marketplace
+                </a>
+              </li>
             </ul>
           </div>
           <div>
             <h3 className="text-lg font-semibold mb-4">Legal</h3>
             <ul className="space-y-2 text-gray-400">
-              <li><Link to="/privacy" className="hover:text-white transition-colors">Privacy</Link></li>
-              <li><Link to="/terms" className="hover:text-white transition-colors">Terms</Link></li>
-              <li><Link to="/security" className="hover:text-white transition-colors">Security</Link></li>
-              <li><Link to="/status" className="hover:text-white transition-colors">Service Status</Link></li>
+              <li>
+                <Link
+                  to="/privacy"
+                  className="hover:text-white transition-colors"
+                >
+                  Privacy
+                </Link>
+              </li>
+              <li>
+                <Link
+                  to="/terms"
+                  className="hover:text-white transition-colors"
+                >
+                  Terms
+                </Link>
+              </li>
+              <li>
+                <Link
+                  to="/security"
+                  className="hover:text-white transition-colors"
+                >
+                  Security
+                </Link>
+              </li>
+              <li>
+                <Link
+                  to="/status"
+                  className="hover:text-white transition-colors"
+                >
+                  Service Status
+                </Link>
+              </li>
             </ul>
           </div>
         </div>
@@ -41,4 +98,4 @@ export default function Footer() {
       </div>
     </footer>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/LandingHeader.tsx b/src/components/LandingHeader.tsx
index c068a13..4a651fc 100644
--- a/src/components/LandingHeader.tsx
+++ b/src/components/LandingHeader.tsx
@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react';
-import { Bot, LogOut } from 'lucide-react';
-import { Link } from 'react-router-dom';
-import { useAuth } from '../context/AuthContext';
+import React, { useState, useEffect } from "react";
+import { Bot, LogOut } from "lucide-react";
+import { Link } from "react-router-dom";
+import { useAuth } from "../context/AuthContext";
 
 export default function LandingHeader() {
   const { isAuthenticated, logout } = useAuth();
@@ -15,34 +15,43 @@ export default function LandingHeader() {
       setLastScrollY(currentScrollY);
     };
 
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    return () => window.removeEventListener('scroll', handleScroll);
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
   }, [lastScrollY]);
 
   return (
     <>
-      <header className="fixed top-0 left-0 right-0 z-50 bg-white shadow-sm transition-transform duration-300" 
-              style={{ transform: isMenuHidden ? 'translateY(-100%)' : 'translateY(0)' }}>
+      <header
+        className="fixed top-0 left-0 right-0 z-50 bg-white shadow-sm transition-transform duration-300"
+        style={{
+          transform: isMenuHidden ? "translateY(-100%)" : "translateY(0)",
+        }}
+      >
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between h-16">
             <div className="flex items-center">
               <Link to="/" className="flex items-center gap-2">
                 <Bot className="h-8 w-8 text-blue-600" />
-                <span className="text-xl font-bold text-gray-900">GStraccini Bot</span>
+                <span className="text-xl font-bold text-gray-900">
+                  GStraccini Bot
+                </span>
               </Link>
             </div>
-            
+
             <nav className="hidden md:block">
               <ul className="flex items-center gap-8">
                 <li>
-                  <Link to="/" className="text-gray-600 hover:text-gray-900 transition-colors">
+                  <Link
+                    to="/"
+                    className="text-gray-600 hover:text-gray-900 transition-colors"
+                  >
                     Home
                   </Link>
                 </li>
                 {isAuthenticated && (
                   <li>
-                    <Link 
-                      to="/dashboard" 
+                    <Link
+                      to="/dashboard"
                       className="text-gray-600 hover:text-gray-900 transition-colors"
                     >
                       Dashboard
@@ -50,9 +59,9 @@ export default function LandingHeader() {
                   </li>
                 )}
                 <li>
-                  <a 
-                    href="https://docs.bot.straccini.com" 
-                    target="_blank" 
+                  <a
+                    href="https://docs.bot.straccini.com"
+                    target="_blank"
                     rel="noopener noreferrer"
                     className="text-gray-600 hover:text-gray-900 transition-colors"
                   >
@@ -71,8 +80,8 @@ export default function LandingHeader() {
                   </li>
                 ) : (
                   <li>
-                    <Link 
-                      to="/auth" 
+                    <Link
+                      to="/auth"
                       className="inline-flex items-center px-4 py-2 rounded-md bg-blue-600 text-white font-medium hover:bg-blue-700 transition-colors"
                     >
                       Sign In
@@ -84,7 +93,8 @@ export default function LandingHeader() {
           </div>
         </div>
       </header>
-      <div className="h-16" /> {/* Spacer to prevent content from hiding under fixed header */}
+      <div className="h-16" />{" "}
+      {/* Spacer to prevent content from hiding under fixed header */}
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/PendingActions.tsx b/src/components/PendingActions.tsx
index 32f88ba..5697ab2 100644
--- a/src/components/PendingActions.tsx
+++ b/src/components/PendingActions.tsx
@@ -1,43 +1,54 @@
-import { PendingAction } from '../types';
-import { AlertCircle, CheckCircle2, GitMerge, FileEdit, MessageCircle } from 'lucide-react';
+import { PendingAction } from "../types";
+import {
+  AlertCircle,
+  CheckCircle2,
+  GitMerge,
+  FileEdit,
+  MessageCircle,
+} from "lucide-react";
 
 interface PendingActionsProps {
   actions: PendingAction[];
 }
 
-const getActionIcon = (type: PendingAction['type']) => {
+const getActionIcon = (type: PendingAction["type"]) => {
   switch (type) {
-    case 'review_pr':
+    case "review_pr":
       return <AlertCircle className="w-5 h-5 text-yellow-500" />;
-    case 'close_issue':
+    case "close_issue":
       return <CheckCircle2 className="w-5 h-5 text-green-500" />;
-    case 'merge_pr':
+    case "merge_pr":
       return <GitMerge className="w-5 h-5 text-purple-500" />;
-    case 'update_readme':
+    case "update_readme":
       return <FileEdit className="w-5 h-5 text-blue-500" />;
-    case 'respond_issue':
+    case "respond_issue":
       return <MessageCircle className="w-5 h-5 text-orange-500" />;
   }
 };
 
-const getPriorityColor = (priority: PendingAction['priority']) => {
+const getPriorityColor = (priority: PendingAction["priority"]) => {
   switch (priority) {
-    case 'high':
-      return 'bg-red-100 text-red-800';
-    case 'medium':
-      return 'bg-yellow-100 text-yellow-800';
-    case 'low':
-      return 'bg-green-100 text-green-800';
+    case "high":
+      return "bg-red-100 text-red-800";
+    case "medium":
+      return "bg-yellow-100 text-yellow-800";
+    case "low":
+      return "bg-green-100 text-green-800";
   }
 };
 
 export function PendingActions({ actions }: PendingActionsProps) {
   return (
     <div className="bg-white rounded-xl shadow-lg p-6">
-      <h3 className="text-xl font-semibold text-gray-800 mb-4">Pending Actions</h3>
+      <h3 className="text-xl font-semibold text-gray-800 mb-4">
+        Pending Actions
+      </h3>
       <div className="space-y-4">
         {actions.map((action) => (
-          <div key={action.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+          <div
+            key={action.id}
+            className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
+          >
             <div className="flex items-center space-x-3">
               {getActionIcon(action.type)}
               <div>
@@ -45,7 +56,9 @@ export function PendingActions({ actions }: PendingActionsProps) {
                 <p className="text-sm text-gray-500">{action.repository}</p>
               </div>
             </div>
-            <span className={`px-2 py-1 rounded text-xs font-medium ${getPriorityColor(action.priority)}`}>
+            <span
+              className={`px-2 py-1 rounded text-xs font-medium ${getPriorityColor(action.priority)}`}
+            >
               {action.priority}
             </span>
           </div>
@@ -53,4 +66,4 @@ export function PendingActions({ actions }: PendingActionsProps) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/PullRequestsList.tsx b/src/components/PullRequestsList.tsx
index a4124bc..2d53396 100644
--- a/src/components/PullRequestsList.tsx
+++ b/src/components/PullRequestsList.tsx
@@ -1,42 +1,50 @@
-import { PullRequest } from '../types';
-import { GitPullRequest, CheckCircle, XCircle, Clock, AlertCircle, ArrowRight, HelpCircle } from 'lucide-react';
-import { Link } from 'react-router-dom';
+import { PullRequest } from "../types";
+import {
+  GitPullRequest,
+  CheckCircle,
+  XCircle,
+  Clock,
+  AlertCircle,
+  ArrowRight,
+  HelpCircle,
+} from "lucide-react";
+import { Link } from "react-router-dom";
 
 interface PullRequestsListProps {
   pullRequests: PullRequest[];
 }
 
-const getStateIcon = (state: PullRequest['state']) => {
+const getStateIcon = (state: PullRequest["state"]) => {
   switch (state) {
-    case 'success':
+    case "success":
       return <CheckCircle className="w-5 h-5 text-green-500" />;
-    case 'failure':
+    case "failure":
       return <XCircle className="w-5 h-5 text-red-500" />;
-    case 'pending':
+    case "pending":
       return <Clock className="w-5 h-5 text-yellow-500" />;
-    case 'error':
+    case "error":
       return <AlertCircle className="w-5 h-5 text-red-500" />;
-    case 'skipped':
+    case "skipped":
       return <ArrowRight className="w-5 h-5 text-gray-500" />;
     default:
       return <HelpCircle className="w-5 h-5 text-gray-400" />;
   }
 };
 
-const getStateClass = (state: PullRequest['state']) => {
+const getStateClass = (state: PullRequest["state"]) => {
   switch (state) {
-    case 'success':
-      return 'bg-green-100 text-green-800';
-    case 'failure':
-      return 'bg-red-100 text-red-800';
-    case 'pending':
-      return 'bg-yellow-100 text-yellow-800';
-    case 'error':
-      return 'bg-red-100 text-red-800';
-    case 'skipped':
-      return 'bg-gray-100 text-gray-800';
+    case "success":
+      return "bg-green-100 text-green-800";
+    case "failure":
+      return "bg-red-100 text-red-800";
+    case "pending":
+      return "bg-yellow-100 text-yellow-800";
+    case "error":
+      return "bg-red-100 text-red-800";
+    case "skipped":
+      return "bg-gray-100 text-gray-800";
     default:
-      return 'bg-gray-100 text-gray-800';
+      return "bg-gray-100 text-gray-800";
   }
 };
 
@@ -44,14 +52,18 @@ export function PullRequestsList({ pullRequests }: PullRequestsListProps) {
   return (
     <div className="bg-white rounded-xl shadow-lg p-6">
       <div className="flex items-center justify-between mb-4">
-        <h3 className="text-xl font-semibold text-gray-800">Assigned Pull Requests</h3>
+        <h3 className="text-xl font-semibold text-gray-800">
+          Assigned Pull Requests
+        </h3>
         <span className="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm font-medium">
           {pullRequests.length}
         </span>
       </div>
       <div className="space-y-4">
         {pullRequests.length === 0 ? (
-          <p className="text-gray-500 text-center py-4">No pull requests found</p>
+          <p className="text-gray-500 text-center py-4">
+            No pull requests found
+          </p>
         ) : (
           pullRequests.map((pr, index) => (
             <div key={index} className="p-4 bg-gray-50 rounded-lg">
@@ -74,13 +86,15 @@ export function PullRequestsList({ pullRequests }: PullRequestsListProps) {
                         {pr.sender.name || pr.sender.login}
                       </a>
                     </div>
-                    <span className={`px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1 ${getStateClass(pr.state)}`}>
+                    <span
+                      className={`px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1 ${getStateClass(pr.state)}`}
+                    >
                       {getStateIcon(pr.state)}
                       {pr.state}
                     </span>
                   </div>
                   <Link
-                    to={`/pull-requests/${pr.url.split('/').pop()}`}
+                    to={`/pull-requests/${pr.url.split("/").pop()}`}
                     className="text-blue-600 hover:text-blue-800 font-medium block mt-2"
                   >
                     {pr.title}
@@ -94,11 +108,11 @@ export function PullRequestsList({ pullRequests }: PullRequestsListProps) {
                     </Link>
                     <span className="text-gray-400 mx-2">•</span>
                     <span className="text-gray-500">
-                      {new Date(pr.created_at).toLocaleDateString('en-US', {
-                        month: 'short',
-                        day: 'numeric',
-                        hour: '2-digit',
-                        minute: '2-digit'
+                      {new Date(pr.created_at).toLocaleDateString("en-US", {
+                        month: "short",
+                        day: "numeric",
+                        hour: "2-digit",
+                        minute: "2-digit",
                       })}
                     </span>
                   </div>
@@ -110,7 +124,7 @@ export function PullRequestsList({ pullRequests }: PullRequestsListProps) {
                           className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
                           style={{
                             backgroundColor: `#${label.color}`,
-                            color: luminance(label.color)
+                            color: luminance(label.color),
                           }}
                           title={label.description}
                         >
@@ -131,11 +145,11 @@ export function PullRequestsList({ pullRequests }: PullRequestsListProps) {
 
 function luminance(color: string): string {
   if (!/^[0-9A-Fa-f]{6}$/.test(color)) {
-    throw new Error('Invalid color format. Expected 6-digit hex color.');
+    throw new Error("Invalid color format. Expected 6-digit hex color.");
   }
   const red = parseInt(color.slice(0, 2), 16);
   const green = parseInt(color.slice(2, 2), 16);
   const blue = parseInt(color.slice(4, 2), 16);
-  const yiq = ((red * 299) + (green * 587) + (blue * 114)) / 1000;
-  return yiq >= 128 ? '#000' : '#fff';
-}
\ No newline at end of file
+  const yiq = (red * 299 + green * 587 + blue * 114) / 1000;
+  return yiq >= 128 ? "#000" : "#fff";
+}
diff --git a/src/components/StatCard.tsx b/src/components/StatCard.tsx
index 4bd7638..7bce098 100644
--- a/src/components/StatCard.tsx
+++ b/src/components/StatCard.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 
 interface StatCardProps {
   title: string;
@@ -8,14 +8,14 @@ interface StatCardProps {
 
 export function StatCard({ title, value, icon }: StatCardProps) {
   const [currentValue, setCurrentValue] = useState(0);
-  
+
   useEffect(() => {
     const duration = 2000;
     const steps = 60;
     const stepValue = value / steps;
     const stepDuration = duration / steps;
     let current = 0;
-    
+
     const timer = setInterval(() => {
       current += stepValue;
       if (current >= value) {
@@ -25,19 +25,23 @@ export function StatCard({ title, value, icon }: StatCardProps) {
         setCurrentValue(Math.floor(current));
       }
     }, stepDuration);
-    
+
     return () => clearInterval(timer);
   }, [value]);
 
   return (
     <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-105 hover:shadow-xl border border-gray-200 dark:border-gray-700">
       <div className="flex items-center justify-between mb-4">
-        <h3 className="text-lg font-semibold text-gray-700 dark:text-gray-300">{title}</h3>
+        <h3 className="text-lg font-semibold text-gray-700 dark:text-gray-300">
+          {title}
+        </h3>
         <div className="text-blue-500 dark:text-blue-400 p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
           {icon}
         </div>
       </div>
-      <p className="text-4xl font-bold text-gray-900 dark:text-white">{currentValue}</p>
+      <p className="text-4xl font-bold text-gray-900 dark:text-white">
+        {currentValue}
+      </p>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/TokenSelect.tsx b/src/components/TokenSelect.tsx
index d5e41a9..677f3c7 100644
--- a/src/components/TokenSelect.tsx
+++ b/src/components/TokenSelect.tsx
@@ -1,5 +1,5 @@
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { X } from 'lucide-react';
+import { useState, useRef, useCallback, useEffect } from "react";
+import { X } from "lucide-react";
 import {
   useFloating,
   useInteractions,
@@ -10,8 +10,8 @@ import {
   FloatingPortal,
   flip,
   shift,
-  offset
-} from '@floating-ui/react';
+  offset,
+} from "@floating-ui/react";
 
 interface TokenOption {
   value: string;
@@ -33,11 +33,11 @@ export function TokenSelect({
   options,
   selectedValues,
   onChange,
-  placeholder = 'Select options...',
-  multiple = true
+  placeholder = "Select options...",
+  multiple = true,
 }: TokenSelectProps) {
   const [isOpen, setIsOpen] = useState(false);
-  const [searchTerm, setSearchTerm] = useState('');
+  const [searchTerm, setSearchTerm] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
 
   const { refs, floatingStyles, context } = useFloating({
@@ -59,7 +59,7 @@ export function TokenSelect({
   ]);
 
   const handleTokenRemove = (valueToRemove: string) => {
-    onChange(selectedValues.filter(value => value !== valueToRemove));
+    onChange(selectedValues.filter((value) => value !== valueToRemove));
   };
 
   const handleOptionSelect = (value: string) => {
@@ -74,20 +74,24 @@ export function TokenSelect({
     } else {
       onChange([...selectedValues, value]);
     }
-    setSearchTerm('');
+    setSearchTerm("");
     inputRef.current?.focus();
   };
 
-  const filteredOptions = options.filter(option =>
-    option.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    option.description?.toLowerCase().includes(searchTerm.toLowerCase())
+  const filteredOptions = options.filter(
+    (option) =>
+      option.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      option.description?.toLowerCase().includes(searchTerm.toLowerCase()),
   );
 
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (e.key === 'Backspace' && !searchTerm && selectedValues.length > 0) {
-      handleTokenRemove(selectedValues[selectedValues.length - 1]);
-    }
-  }, [searchTerm, selectedValues]);
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Backspace" && !searchTerm && selectedValues.length > 0) {
+        handleTokenRemove(selectedValues[selectedValues.length - 1]);
+      }
+    },
+    [searchTerm, selectedValues],
+  );
 
   useEffect(() => {
     if (isOpen && inputRef.current) {
@@ -107,17 +111,19 @@ export function TokenSelect({
         }}
       >
         <div className="flex flex-wrap gap-1">
-          {selectedValues.map(value => {
-            const option = options.find(opt => opt.value === value);
+          {selectedValues.map((value) => {
+            const option = options.find((opt) => opt.value === value);
             if (!option) return null;
-            
+
             return (
               <span
                 key={value}
                 className="inline-flex items-center gap-1 rounded-full px-2 py-1 text-sm"
                 style={{
-                  backgroundColor: option.color ? `#${option.color}20` : '#e5e7eb',
-                  color: option.color ? `#${option.color}` : '#374151',
+                  backgroundColor: option.color
+                    ? `#${option.color}20`
+                    : "#e5e7eb",
+                  color: option.color ? `#${option.color}` : "#374151",
                 }}
               >
                 {option.avatar && (
@@ -148,7 +154,7 @@ export function TokenSelect({
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
             onKeyDown={handleKeyDown}
-            placeholder={selectedValues.length === 0 ? placeholder : ''}
+            placeholder={selectedValues.length === 0 ? placeholder : ""}
           />
         </div>
       </div>
@@ -168,14 +174,14 @@ export function TokenSelect({
                 </div>
               ) : (
                 <div className="p-1">
-                  {filteredOptions.map(option => (
+                  {filteredOptions.map((option) => (
                     <button
                       key={option.value}
                       onClick={() => handleOptionSelect(option.value)}
                       className={`flex w-full items-center gap-2 rounded-md px-4 py-2 text-sm ${
                         selectedValues.includes(option.value)
-                          ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/50 dark:text-blue-200'
-                          : 'text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700'
+                          ? "bg-blue-50 text-blue-600 dark:bg-blue-900/50 dark:text-blue-200"
+                          : "text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
                       }`}
                     >
                       {option.avatar && (
@@ -194,7 +200,9 @@ export function TokenSelect({
                         )}
                       </div>
                       {selectedValues.includes(option.value) && (
-                        <span className="ml-auto text-blue-600 dark:text-blue-400">✓</span>
+                        <span className="ml-auto text-blue-600 dark:text-blue-400">
+                          ✓
+                        </span>
                       )}
                     </button>
                   ))}
@@ -206,4 +214,4 @@ export function TokenSelect({
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/account/FIDOSection.tsx b/src/components/account/FIDOSection.tsx
index f24a32e..ccb7855 100644
--- a/src/components/account/FIDOSection.tsx
+++ b/src/components/account/FIDOSection.tsx
@@ -1,5 +1,5 @@
-import { Key, Plus, Trash2 } from 'lucide-react';
-import type { FIDODevice } from '../../types';
+import { Key, Plus, Trash2 } from "lucide-react";
+import type { FIDODevice } from "../../types";
 
 interface FIDOSectionProps {
   devices: FIDODevice[];
@@ -7,18 +7,25 @@ interface FIDOSectionProps {
   onRemoveDevice: (id: string) => void;
 }
 
-export function FIDOSection({ devices, onRegisterDevice, onRemoveDevice }: FIDOSectionProps) {
+export function FIDOSection({
+  devices,
+  onRegisterDevice,
+  onRemoveDevice,
+}: FIDOSectionProps) {
   return (
     <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg mb-8">
       <div className="p-6">
         <div className="flex items-center space-x-4 mb-6">
           <Key className="w-6 h-6 text-gray-400" />
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Security Keys (FIDO)</h2>
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+            Security Keys (FIDO)
+          </h2>
         </div>
         <div className="space-y-6">
           <div className="flex items-center justify-between">
             <p className="text-sm text-gray-500 dark:text-gray-400">
-              Security keys provide strong authentication with support for FIDO2 standards
+              Security keys provide strong authentication with support for FIDO2
+              standards
             </p>
             <button
               type="button"
@@ -31,13 +38,19 @@ export function FIDOSection({ devices, onRegisterDevice, onRemoveDevice }: FIDOS
           </div>
           <div className="divide-y divide-gray-200 dark:divide-gray-700">
             {devices.map((device) => (
-              <div key={device.id} className="py-4 flex items-center justify-between">
+              <div
+                key={device.id}
+                className="py-4 flex items-center justify-between"
+              >
                 <div>
-                  <p className="text-gray-900 dark:text-white font-medium">{device.name}</p>
+                  <p className="text-gray-900 dark:text-white font-medium">
+                    {device.name}
+                  </p>
                   <p className="text-sm text-gray-500 dark:text-gray-400">
                     Added on {new Date(device.added_at).toLocaleDateString()}
                     <span className="mx-2">•</span>
-                    Last used {new Date(device.last_used_at).toLocaleDateString()}
+                    Last used{" "}
+                    {new Date(device.last_used_at).toLocaleDateString()}
                   </p>
                 </div>
                 <button
@@ -54,4 +67,4 @@ export function FIDOSection({ devices, onRegisterDevice, onRemoveDevice }: FIDOS
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/account/InstallationsSection.tsx b/src/components/account/InstallationsSection.tsx
index 2df252e..e0fc1db 100644
--- a/src/components/account/InstallationsSection.tsx
+++ b/src/components/account/InstallationsSection.tsx
@@ -1,32 +1,71 @@
-import { Building2, Plus, Trash2, ExternalLink, Users, BookOpen } from 'lucide-react';
-import type { Installation, AvailableOrganization } from '../../types';
-import { mockAvailableOrganizations } from '../../mockData';
+import {
+  Building2,
+  Plus,
+  Trash2,
+  ExternalLink,
+  Users,
+  BookOpen,
+} from "lucide-react";
+import type { Installation, AvailableOrganization } from "../../types";
+import { mockAvailableOrganizations } from "../../mockData";
 
 interface InstallationsSectionProps {
   installations: Installation[];
   onRemoveInstallation: (installation: Installation) => void;
 }
 
-export function InstallationsSection({ installations, onRemoveInstallation }: InstallationsSectionProps) {
+export function InstallationsSection({
+  installations,
+  onRemoveInstallation,
+}: InstallationsSectionProps) {
   return (
     <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg mb-8">
       <div className="p-6">
         <div className="flex items-center space-x-4 mb-6">
           <Building2 className="w-6 h-6 text-gray-400" />
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Installations</h2>
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+            Installations
+          </h2>
         </div>
         <div className="space-y-6">
           {/* Current Installations */}
           <div className="overflow-x-auto">
-            <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Current Installations</h3>
+            <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
+              Current Installations
+            </h3>
             <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
               <thead>
                 <tr>
-                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Account</th>
-                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type</th>
-                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Repositories</th>
-                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Added</th>
-                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Actions</th>
+                  <th
+                    scope="col"
+                    className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+                  >
+                    Account
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+                  >
+                    Type
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+                  >
+                    Repositories
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+                  >
+                    Added
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+                  >
+                    Actions
+                  </th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
@@ -36,12 +75,16 @@ export function InstallationsSection({ installations, onRemoveInstallation }: In
                       <div className="flex items-center">
                         <img
                           src={installation.account.avatar_url}
-                          alt={installation.account.name || installation.account.login}
+                          alt={
+                            installation.account.name ||
+                            installation.account.login
+                          }
                           className="w-8 h-8 rounded-full"
                         />
                         <div className="ml-3">
                           <p className="text-sm font-medium text-gray-900 dark:text-white">
-                            {installation.account.name || installation.account.login}
+                            {installation.account.name ||
+                              installation.account.login}
                           </p>
                           <p className="text-sm text-gray-500 dark:text-gray-400">
                             @{installation.account.login}
@@ -50,11 +93,13 @@ export function InstallationsSection({ installations, onRemoveInstallation }: In
                       </div>
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap">
-                      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                        installation.account.type === 'Organization'
-                          ? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
-                          : 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
-                      }`}>
+                      <span
+                        className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                          installation.account.type === "Organization"
+                            ? "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200"
+                            : "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
+                        }`}
+                      >
                         {installation.account.type}
                       </span>
                     </td>
@@ -89,7 +134,9 @@ export function InstallationsSection({ installations, onRemoveInstallation }: In
 
           {/* Available Organizations */}
           <div className="border-t border-gray-200 dark:border-gray-700 pt-6">
-            <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Available Organizations</h3>
+            <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
+              Available Organizations
+            </h3>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
               {mockAvailableOrganizations.map((org) => (
                 <div
@@ -147,7 +194,9 @@ export function InstallationsSection({ installations, onRemoveInstallation }: In
                 Didn't find the organization you're looking for?
               </p>
               <p className="text-sm text-gray-500 dark:text-gray-400">
-                No worries! If the desired organization is missing from the list, you can manually add it to the installations by clicking the button below:
+                No worries! If the desired organization is missing from the
+                list, you can manually add it to the installations by clicking
+                the button below:
               </p>
             </div>
             <div className="flex justify-center">
@@ -164,4 +213,4 @@ export function InstallationsSection({ installations, onRemoveInstallation }: In
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/account/PasswordSection.tsx b/src/components/account/PasswordSection.tsx
index 30d91d7..75ecadd 100644
--- a/src/components/account/PasswordSection.tsx
+++ b/src/components/account/PasswordSection.tsx
@@ -1,16 +1,19 @@
-import { KeyRound, Eye, EyeOff, CheckCircle2, XCircle } from 'lucide-react';
-import { useState } from 'react';
+import { KeyRound, Eye, EyeOff, CheckCircle2, XCircle } from "lucide-react";
+import { useState } from "react";
 
 interface PasswordSectionProps {
   hasPassword: boolean;
   onSubmit: (e: React.FormEvent) => void;
 }
 
-export function PasswordSection({ hasPassword, onSubmit }: PasswordSectionProps) {
+export function PasswordSection({
+  hasPassword,
+  onSubmit,
+}: PasswordSectionProps) {
   const [showPassword, setShowPassword] = useState(false);
-  const [currentPassword, setCurrentPassword] = useState('');
-  const [newPassword, setNewPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
 
   const validatePassword = (password: string) => {
     const hasMinLength = password.length >= 8;
@@ -25,7 +28,12 @@ export function PasswordSection({ hasPassword, onSubmit }: PasswordSectionProps)
       hasLowerCase,
       hasDigit,
       hasSpecialChar,
-      isValid: hasMinLength && hasUpperCase && hasLowerCase && hasDigit && hasSpecialChar
+      isValid:
+        hasMinLength &&
+        hasUpperCase &&
+        hasLowerCase &&
+        hasDigit &&
+        hasSpecialChar,
     };
   };
 
@@ -37,17 +45,22 @@ export function PasswordSection({ hasPassword, onSubmit }: PasswordSectionProps)
       <div className="p-6">
         <div className="flex items-center space-x-4 mb-6">
           <KeyRound className="w-6 h-6 text-gray-400" />
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Password</h2>
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+            Password
+          </h2>
         </div>
         <form onSubmit={onSubmit} className="space-y-6">
           {hasPassword && (
             <div>
-              <label htmlFor="current_password" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+              <label
+                htmlFor="current_password"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+              >
                 Current Password
               </label>
               <div className="relative">
                 <input
-                  type={showPassword ? 'text' : 'password'}
+                  type={showPassword ? "text" : "password"}
                   id="current_password"
                   value={currentPassword}
                   onChange={(e) => setCurrentPassword(e.target.value)}
@@ -68,12 +81,15 @@ export function PasswordSection({ hasPassword, onSubmit }: PasswordSectionProps)
             </div>
           )}
           <div>
-            <label htmlFor="new_password" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+            <label
+              htmlFor="new_password"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+            >
               New Password
             </label>
             <div className="relative">
               <input
-                type={showPassword ? 'text' : 'password'}
+                type={showPassword ? "text" : "password"}
                 id="new_password"
                 value={newPassword}
                 onChange={(e) => setNewPassword(e.target.value)}
@@ -92,35 +108,68 @@ export function PasswordSection({ hasPassword, onSubmit }: PasswordSectionProps)
               </button>
             </div>
             <div className="mt-4 space-y-2">
-              <div className={`flex items-center text-sm ${passwordValidation.hasMinLength ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
-                {passwordValidation.hasMinLength ? <CheckCircle2 className="inline w-4 h-4 mr-2" /> : <XCircle className="inline w-4 h-4 mr-2" />}
+              <div
+                className={`flex items-center text-sm ${passwordValidation.hasMinLength ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"}`}
+              >
+                {passwordValidation.hasMinLength ? (
+                  <CheckCircle2 className="inline w-4 h-4 mr-2" />
+                ) : (
+                  <XCircle className="inline w-4 h-4 mr-2" />
+                )}
                 At least 8 characters
               </div>
-              <div className={`flex items-center text-sm ${passwordValidation.hasUpperCase ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
-                {passwordValidation.hasUpperCase ? <CheckCircle2 className="inline w-4 h-4 mr-2" /> : <XCircle className="inline w-4 h-4 mr-2" />}
+              <div
+                className={`flex items-center text-sm ${passwordValidation.hasUpperCase ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"}`}
+              >
+                {passwordValidation.hasUpperCase ? (
+                  <CheckCircle2 className="inline w-4 h-4 mr-2" />
+                ) : (
+                  <XCircle className="inline w-4 h-4 mr-2" />
+                )}
                 At least one uppercase letter
               </div>
-              <div className={`flex items-center text-sm ${passwordValidation.hasLowerCase ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
-                {passwordValidation.hasLowerCase ? <CheckCircle2 className="inline w-4 h-4 mr-2" /> : <XCircle className="inline w-4 h-4 mr-2" />}
+              <div
+                className={`flex items-center text-sm ${passwordValidation.hasLowerCase ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"}`}
+              >
+                {passwordValidation.hasLowerCase ? (
+                  <CheckCircle2 className="inline w-4 h-4 mr-2" />
+                ) : (
+                  <XCircle className="inline w-4 h-4 mr-2" />
+                )}
                 At least one lowercase letter
               </div>
-              <div className={`flex items-center text-sm ${passwordValidation.hasDigit ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
-                {passwordValidation.hasDigit ? <CheckCircle2 className="inline w-4 h-4 mr-2" /> : <XCircle className="inline w-4 h-4 mr-2" />}
+              <div
+                className={`flex items-center text-sm ${passwordValidation.hasDigit ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"}`}
+              >
+                {passwordValidation.hasDigit ? (
+                  <CheckCircle2 className="inline w-4 h-4 mr-2" />
+                ) : (
+                  <XCircle className="inline w-4 h-4 mr-2" />
+                )}
                 At least one digit
               </div>
-              <div className={`flex items-center text-sm ${passwordValidation.hasSpecialChar ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
-                {passwordValidation.hasSpecialChar ? <CheckCircle2 className="inline w-4 h-4 mr-2" /> : <XCircle className="inline w-4 h-4 mr-2" />}
+              <div
+                className={`flex items-center text-sm ${passwordValidation.hasSpecialChar ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"}`}
+              >
+                {passwordValidation.hasSpecialChar ? (
+                  <CheckCircle2 className="inline w-4 h-4 mr-2" />
+                ) : (
+                  <XCircle className="inline w-4 h-4 mr-2" />
+                )}
                 At least one special character
               </div>
             </div>
           </div>
           <div>
-            <label htmlFor="confirm_password" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+            <label
+              htmlFor="confirm_password"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+            >
               Confirm New Password
             </label>
             <div className="relative">
               <input
-                type={showPassword ? 'text' : 'password'}
+                type={showPassword ? "text" : "password"}
                 id="confirm_password"
                 value={confirmPassword}
                 onChange={(e) => setConfirmPassword(e.target.value)}
@@ -158,4 +207,4 @@ export function PasswordSection({ hasPassword, onSubmit }: PasswordSectionProps)
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/account/ProfileSection.tsx b/src/components/account/ProfileSection.tsx
index 397fed5..b525a1e 100644
--- a/src/components/account/ProfileSection.tsx
+++ b/src/components/account/ProfileSection.tsx
@@ -1,5 +1,5 @@
-import { User } from 'lucide-react';
-import type { User as UserType } from '../../types';
+import { User } from "lucide-react";
+import type { User as UserType } from "../../types";
 
 interface ProfileSectionProps {
   user: UserType;
@@ -12,12 +12,17 @@ export function ProfileSection({ user, onSubmit }: ProfileSectionProps) {
       <div className="p-6">
         <div className="flex items-center space-x-4 mb-6">
           <User className="w-6 h-6 text-gray-400" />
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Profile Information</h2>
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+            Profile Information
+          </h2>
         </div>
         <form onSubmit={onSubmit} className="space-y-6">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div>
-              <label htmlFor="github_id" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+              <label
+                htmlFor="github_id"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+              >
                 GitHub ID
               </label>
               <input
@@ -29,7 +34,10 @@ export function ProfileSection({ user, onSubmit }: ProfileSectionProps) {
               />
             </div>
             <div>
-              <label htmlFor="github_username" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+              <label
+                htmlFor="github_username"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+              >
                 GitHub Username
               </label>
               <input
@@ -41,7 +49,10 @@ export function ProfileSection({ user, onSubmit }: ProfileSectionProps) {
               />
             </div>
             <div>
-              <label htmlFor="github_email" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+              <label
+                htmlFor="github_email"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+              >
                 GitHub Email
               </label>
               <input
@@ -53,7 +64,10 @@ export function ProfileSection({ user, onSubmit }: ProfileSectionProps) {
               />
             </div>
             <div>
-              <label htmlFor="communications_email" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+              <label
+                htmlFor="communications_email"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+              >
                 Communications Email
               </label>
               <input
@@ -64,7 +78,10 @@ export function ProfileSection({ user, onSubmit }: ProfileSectionProps) {
               />
             </div>
             <div>
-              <label htmlFor="first_name" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+              <label
+                htmlFor="first_name"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+              >
                 First Name
               </label>
               <input
@@ -75,7 +92,10 @@ export function ProfileSection({ user, onSubmit }: ProfileSectionProps) {
               />
             </div>
             <div>
-              <label htmlFor="last_name" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+              <label
+                htmlFor="last_name"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+              >
                 Last Name
               </label>
               <input
@@ -98,4 +118,4 @@ export function ProfileSection({ user, onSubmit }: ProfileSectionProps) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/account/TwoFactorSection.tsx b/src/components/account/TwoFactorSection.tsx
index b238882..d3b3ce3 100644
--- a/src/components/account/TwoFactorSection.tsx
+++ b/src/components/account/TwoFactorSection.tsx
@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import { Shield, RefreshCw, Eye, EyeOff } from 'lucide-react';
+import { useState } from "react";
+import { Shield, RefreshCw, Eye, EyeOff } from "lucide-react";
 
 interface TwoFactorSectionProps {
   has2FA: boolean;
@@ -14,7 +14,7 @@ export function TwoFactorSection({
   recoveryCodes,
   usedRecoveryCodes,
   onToggle2FA,
-  onRegenerateCodes
+  onRegenerateCodes,
 }: TwoFactorSectionProps) {
   const [showRecoveryCodes, setShowRecoveryCodes] = useState(false);
 
@@ -23,12 +23,16 @@ export function TwoFactorSection({
       <div className="p-6">
         <div className="flex items-center space-x-4 mb-6">
           <Shield className="w-6 h-6 text-gray-400" />
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Two-Factor Authentication</h2>
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+            Two-Factor Authentication
+          </h2>
         </div>
         <div className="space-y-6">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-gray-900 dark:text-white font-medium">Two-Factor Authentication Status</p>
+              <p className="text-gray-900 dark:text-white font-medium">
+                Two-Factor Authentication Status
+              </p>
               <p className="text-sm text-gray-500 dark:text-gray-400">
                 Add an extra layer of security to your account
               </p>
@@ -38,18 +42,20 @@ export function TwoFactorSection({
               onClick={onToggle2FA}
               className={`px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 ${
                 has2FA
-                  ? 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500'
-                  : 'bg-green-600 text-white hover:bg-green-700 focus:ring-green-500'
+                  ? "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500"
+                  : "bg-green-600 text-white hover:bg-green-700 focus:ring-green-500"
               }`}
             >
-              {has2FA ? 'Disable 2FA' : 'Enable 2FA'}
+              {has2FA ? "Disable 2FA" : "Enable 2FA"}
             </button>
           </div>
 
           {has2FA && (
             <div>
               <div className="flex items-center justify-between mb-4">
-                <h3 className="text-lg font-medium text-gray-900 dark:text-white">Recovery Codes</h3>
+                <h3 className="text-lg font-medium text-gray-900 dark:text-white">
+                  Recovery Codes
+                </h3>
                 <button
                   type="button"
                   onClick={onRegenerateCodes}
@@ -62,7 +68,9 @@ export function TwoFactorSection({
               <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                 <div className="flex justify-between items-center mb-4">
                   <p className="text-sm text-gray-500 dark:text-gray-400">
-                    Keep these recovery codes in a safe place. You can use them to regain access to your account if you lose your 2FA device.
+                    Keep these recovery codes in a safe place. You can use them
+                    to regain access to your account if you lose your 2FA
+                    device.
                   </p>
                   <button
                     type="button"
@@ -83,8 +91,8 @@ export function TwoFactorSection({
                         key={code}
                         className={`p-2 rounded font-mono text-sm ${
                           usedRecoveryCodes.has(code)
-                            ? 'bg-gray-200 dark:bg-gray-600 text-gray-400 dark:text-gray-500 line-through'
-                            : 'bg-white dark:bg-gray-800 text-gray-900 dark:text-white'
+                            ? "bg-gray-200 dark:bg-gray-600 text-gray-400 dark:text-gray-500 line-through"
+                            : "bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                         }`}
                       >
                         {code}
@@ -99,4 +107,4 @@ export function TwoFactorSection({
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/dashboard/ContentGrid.tsx b/src/components/dashboard/ContentGrid.tsx
index 25ac306..fe79c47 100644
--- a/src/components/dashboard/ContentGrid.tsx
+++ b/src/components/dashboard/ContentGrid.tsx
@@ -1,8 +1,8 @@
-import { ActivityList } from '../ActivityList';
-import { PendingActions } from '../PendingActions';
-import { IssuesList } from '../IssuesList';
-import { PullRequestsList } from '../PullRequestsList';
-import type { PullRequest, Issue, Activity, PendingAction } from '../../types';
+import { ActivityList } from "../ActivityList";
+import { PendingActions } from "../PendingActions";
+import { IssuesList } from "../IssuesList";
+import { PullRequestsList } from "../PullRequestsList";
+import type { PullRequest, Issue, Activity, PendingAction } from "../../types";
 
 interface ContentGridProps {
   pullRequests: PullRequest[];
@@ -11,7 +11,12 @@ interface ContentGridProps {
   pendingActions: PendingAction[];
 }
 
-export function ContentGrid({ pullRequests, issues, activities, pendingActions }: ContentGridProps) {
+export function ContentGrid({
+  pullRequests,
+  issues,
+  activities,
+  pendingActions,
+}: ContentGridProps) {
   return (
     <>
       {/* PRs and Issues Grid */}
@@ -27,4 +32,4 @@ export function ContentGrid({ pullRequests, issues, activities, pendingActions }
       </div>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/dashboard/StatsGrid.tsx b/src/components/dashboard/StatsGrid.tsx
index 7532855..2f30f0d 100644
--- a/src/components/dashboard/StatsGrid.tsx
+++ b/src/components/dashboard/StatsGrid.tsx
@@ -3,36 +3,36 @@ import {
   GitMerge,
   GitCommit,
   Clock,
-  Database
-} from 'lucide-react';
-import { StatCard } from '../StatCard';
+  Database,
+} from "lucide-react";
+import { StatCard } from "../StatCard";
 
 const statsData = [
   {
     title: "Total Pull Requests",
     value: 120,
-    icon: <GitPullRequest className="w-6 h-6" />
+    icon: <GitPullRequest className="w-6 h-6" />,
   },
   {
     title: "Pull Requests Merged",
     value: 85,
-    icon: <GitMerge className="w-6 h-6" />
+    icon: <GitMerge className="w-6 h-6" />,
   },
   {
     title: "Commits Analyzed",
     value: 320,
-    icon: <GitCommit className="w-6 h-6" />
+    icon: <GitCommit className="w-6 h-6" />,
   },
   {
     title: "Average Time to Merge",
     value: 12,
-    icon: <Clock className="w-6 h-6" />
+    icon: <Clock className="w-6 h-6" />,
   },
   {
     title: "Active Repositories",
     value: 6,
-    icon: <Database className="w-6 h-6" />
-  }
+    icon: <Database className="w-6 h-6" />,
+  },
 ];
 
 export function StatsGrid() {
@@ -48,4 +48,4 @@ export function StatsGrid() {
       ))}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/dashboard/WelcomeSection.tsx b/src/components/dashboard/WelcomeSection.tsx
index 6a82b49..66102ae 100644
--- a/src/components/dashboard/WelcomeSection.tsx
+++ b/src/components/dashboard/WelcomeSection.tsx
@@ -1,4 +1,4 @@
-import type { User } from '../../types';
+import type { User } from "../../types";
 
 interface WelcomeSectionProps {
   user: User;
@@ -16,7 +16,7 @@ export function WelcomeSection({ user }: WelcomeSectionProps) {
           />
           <div>
             <h1 className="text-3xl font-bold">
-              Welcome back,{' '}
+              Welcome back,{" "}
               <a
                 href={user.html_url}
                 target="_blank"
@@ -32,4 +32,4 @@ export function WelcomeSection({ user }: WelcomeSectionProps) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/integrations/AddIntegration.tsx b/src/components/integrations/AddIntegration.tsx
index 41ab6dd..f205cef 100644
--- a/src/components/integrations/AddIntegration.tsx
+++ b/src/components/integrations/AddIntegration.tsx
@@ -1,6 +1,6 @@
-import { Eye, EyeOff, Plus, Clock, Terminal, Play } from 'lucide-react';
-import { Provider } from '../../types';
-import { providerCommands, providerActions } from './integrationData';
+import { Eye, EyeOff, Plus, Clock, Terminal, Play } from "lucide-react";
+import { Provider } from "../../types";
+import { providerCommands, providerActions } from "./integrationData";
 
 interface AddIntegrationProps {
   providers: Record<string, Provider>;
@@ -25,13 +25,15 @@ export function AddIntegration({
   onProviderSelect,
   onApiKeyChange,
   onToggleApiKeyVisibility,
-  onSubmit
+  onSubmit,
 }: AddIntegrationProps) {
   return (
     <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg mb-8">
       <div className="p-6">
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">Add Integration</h2>
-        
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
+          Add Integration
+        </h2>
+
         {availableProviders.length === 0 ? (
           <div className="text-center py-6 text-gray-500 dark:text-gray-400">
             All available integrations have been configured
@@ -50,8 +52,8 @@ export function AddIntegration({
                     onClick={() => onProviderSelect(key)}
                     className={`w-full flex items-center space-x-3 p-3 rounded-lg border transition-colors ${
                       selectedProvider === key
-                        ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-                        : 'border-gray-200 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-700'
+                        ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20"
+                        : "border-gray-200 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-700"
                     }`}
                   >
                     <img
@@ -88,7 +90,7 @@ export function AddIntegration({
                         </label>
                         <div className="relative">
                           <input
-                            type={showApiKey['new'] ? 'text' : 'password'}
+                            type={showApiKey["new"] ? "text" : "password"}
                             value={apiKey}
                             onChange={(e) => onApiKeyChange(e.target.value)}
                             placeholder="Enter API Key"
@@ -99,7 +101,7 @@ export function AddIntegration({
                             onClick={onToggleApiKeyVisibility}
                             className="absolute inset-y-0 right-0 px-3 flex items-center"
                           >
-                            {showApiKey['new'] ? (
+                            {showApiKey["new"] ? (
                               <EyeOff className="w-5 h-5 text-gray-400" />
                             ) : (
                               <Eye className="w-5 h-5 text-gray-400" />
@@ -110,7 +112,11 @@ export function AddIntegration({
 
                       <button
                         onClick={onSubmit}
-                        disabled={!selectedProvider || apiKey.length < 10 || isValidating}
+                        disabled={
+                          !selectedProvider ||
+                          apiKey.length < 10 ||
+                          isValidating
+                        }
                         className="w-full flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
                       >
                         {isValidating ? (
@@ -158,22 +164,24 @@ export function AddIntegration({
                       Available Actions
                     </h3>
                     <div className="space-y-3">
-                      {providerActions[selectedProvider]?.map((action, index) => (
-                        <div
-                          key={index}
-                          className="bg-gray-50 dark:bg-gray-700 rounded-lg p-3"
-                        >
-                          <h4 className="font-medium text-gray-900 dark:text-white">
-                            {action.name}
-                          </h4>
-                          <p className="text-sm text-gray-600 dark:text-gray-300 mt-1">
-                            {action.description}
-                          </p>
-                          <p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
-                            Triggers on: {action.event}
-                          </p>
-                        </div>
-                      ))}
+                      {providerActions[selectedProvider]?.map(
+                        (action, index) => (
+                          <div
+                            key={index}
+                            className="bg-gray-50 dark:bg-gray-700 rounded-lg p-3"
+                          >
+                            <h4 className="font-medium text-gray-900 dark:text-white">
+                              {action.name}
+                            </h4>
+                            <p className="text-sm text-gray-600 dark:text-gray-300 mt-1">
+                              {action.description}
+                            </p>
+                            <p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
+                              Triggers on: {action.event}
+                            </p>
+                          </div>
+                        ),
+                      )}
                     </div>
                   </div>
                 </div>
@@ -188,4 +196,4 @@ export function AddIntegration({
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/integrations/IntegrationHistoryModal.tsx b/src/components/integrations/IntegrationHistoryModal.tsx
index 13078f9..02a9891 100644
--- a/src/components/integrations/IntegrationHistoryModal.tsx
+++ b/src/components/integrations/IntegrationHistoryModal.tsx
@@ -1,5 +1,5 @@
-import { X, ExternalLink, Clock } from 'lucide-react';
-import type { IntegrationUsage } from '../../types';
+import { X, ExternalLink, Clock } from "lucide-react";
+import type { IntegrationUsage } from "../../types";
 
 interface IntegrationHistoryModalProps {
   provider: string;
@@ -10,7 +10,7 @@ interface IntegrationHistoryModalProps {
 export function IntegrationHistoryModal({
   provider,
   history,
-  onClose
+  onClose,
 }: IntegrationHistoryModalProps) {
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
@@ -26,29 +26,44 @@ export function IntegrationHistoryModal({
             <X className="w-6 h-6" />
           </button>
         </div>
-        
+
         <div className="p-6 overflow-auto max-h-[calc(80vh-120px)]">
           <div className="overflow-x-auto">
             <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
               <thead>
                 <tr>
-                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <th
+                    scope="col"
+                    className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+                  >
                     Timestamp
                   </th>
-                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <th
+                    scope="col"
+                    className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+                  >
                     Endpoint
                   </th>
-                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <th
+                    scope="col"
+                    className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+                  >
                     Status
                   </th>
-                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <th
+                    scope="col"
+                    className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+                  >
                     Duration
                   </th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
                 {history.map((usage) => (
-                  <tr key={usage.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
+                  <tr
+                    key={usage.id}
+                    className="hover:bg-gray-50 dark:hover:bg-gray-700"
+                  >
                     <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                       {new Date(usage.timestamp).toLocaleString()}
                     </td>
@@ -58,13 +73,15 @@ export function IntegrationHistoryModal({
                       </span>
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-sm">
-                      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                        usage.status >= 200 && usage.status < 300
-                          ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-                          : usage.status >= 400
-                          ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
-                          : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
-                      }`}>
+                      <span
+                        className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                          usage.status >= 200 && usage.status < 300
+                            ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+                            : usage.status >= 400
+                              ? "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
+                              : "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
+                        }`}
+                      >
                         {usage.status}
                       </span>
                     </td>
@@ -83,4 +100,4 @@ export function IntegrationHistoryModal({
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/integrations/IntegrationsList.tsx b/src/components/integrations/IntegrationsList.tsx
index d404191..c8d2994 100644
--- a/src/components/integrations/IntegrationsList.tsx
+++ b/src/components/integrations/IntegrationsList.tsx
@@ -1,8 +1,18 @@
-import { useState } from 'react';
-import { Eye, EyeOff, Trash2, CheckCircle, XCircle, Clock, Terminal, Play, History } from 'lucide-react';
-import type { Integration, Provider } from '../../types';
-import { IntegrationHistoryModal } from './IntegrationHistoryModal';
-import { providerCommands, providerActions } from './integrationData';
+import { useState } from "react";
+import {
+  Eye,
+  EyeOff,
+  Trash2,
+  CheckCircle,
+  XCircle,
+  Clock,
+  Terminal,
+  Play,
+  History,
+} from "lucide-react";
+import type { Integration, Provider } from "../../types";
+import { IntegrationHistoryModal } from "./IntegrationHistoryModal";
+import { providerCommands, providerActions } from "./integrationData";
 
 interface IntegrationsListProps {
   integrations: Integration[];
@@ -17,25 +27,27 @@ export function IntegrationsList({
   providers,
   showApiKey,
   onToggleApiKeyVisibility,
-  onRemove
+  onRemove,
 }: IntegrationsListProps) {
-  const [selectedIntegration, setSelectedIntegration] = useState<string | null>(null);
+  const [selectedIntegration, setSelectedIntegration] = useState<string | null>(
+    null,
+  );
 
   const maskApiKey = (key: string) => {
     const visibleLength = 4;
-    const maskedLength = key.length - (visibleLength * 2);
-    return `${key.slice(0, visibleLength)}${'*'.repeat(maskedLength)}${key.slice(-visibleLength)}`;
+    const maskedLength = key.length - visibleLength * 2;
+    return `${key.slice(0, visibleLength)}${"*".repeat(maskedLength)}${key.slice(-visibleLength)}`;
   };
 
-  const getStatusIcon = (status: Integration['status']) => {
+  const getStatusIcon = (status: Integration["status"]) => {
     switch (status) {
-      case 'Active':
+      case "Active":
         return <CheckCircle className="w-5 h-5 text-green-500" />;
-      case 'Inactive':
+      case "Inactive":
         return <XCircle className="w-5 h-5 text-gray-500" />;
-      case 'Error':
+      case "Error":
         return <XCircle className="w-5 h-5 text-red-500" />;
-      case 'Validating':
+      case "Validating":
         return <Clock className="w-5 h-5 text-yellow-500" />;
     }
   };
@@ -43,10 +55,15 @@ export function IntegrationsList({
   return (
     <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg">
       <div className="p-6">
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">Current Integrations</h2>
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
+          Current Integrations
+        </h2>
         <div className="space-y-8">
           {integrations.map((integration) => (
-            <div key={integration.provider} className="border-b border-gray-200 dark:border-gray-700 last:border-b-0 pb-8 last:pb-0">
+            <div
+              key={integration.provider}
+              className="border-b border-gray-200 dark:border-gray-700 last:border-b-0 pb-8 last:pb-0"
+            >
               {/* Integration Header */}
               <div className="flex items-center justify-between mb-6">
                 <div className="flex items-center space-x-3">
@@ -83,15 +100,21 @@ export function IntegrationsList({
               {/* Usage Info */}
               <div className="mb-6 grid grid-cols-1 md:grid-cols-3 gap-4">
                 <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
-                  <div className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Last Usage</div>
+                  <div className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
+                    Last Usage
+                  </div>
                   <div className="text-gray-900 dark:text-white">
-                    {integration.lastUsage === 'N/A' ? 'Never' : new Date(integration.lastUsage).toLocaleString()}
+                    {integration.lastUsage === "N/A"
+                      ? "Never"
+                      : new Date(integration.lastUsage).toLocaleString()}
                   </div>
                 </div>
                 <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
-                  <div className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Last Error</div>
+                  <div className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
+                    Last Error
+                  </div>
                   <div className="text-gray-900 dark:text-white">
-                    {integration.lastError || 'None'}
+                    {integration.lastError || "None"}
                   </div>
                 </div>
                 <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
@@ -110,10 +133,14 @@ export function IntegrationsList({
                 <div className="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-300">
                   <span className="font-medium">API Key:</span>
                   <code className="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">
-                    {showApiKey[integration.provider] ? integration.apiKey : maskApiKey(integration.apiKey)}
+                    {showApiKey[integration.provider]
+                      ? integration.apiKey
+                      : maskApiKey(integration.apiKey)}
                   </code>
                   <button
-                    onClick={() => onToggleApiKeyVisibility(integration.provider)}
+                    onClick={() =>
+                      onToggleApiKeyVisibility(integration.provider)
+                    }
                     className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                   >
                     {showApiKey[integration.provider] ? (
@@ -155,22 +182,24 @@ export function IntegrationsList({
                   Available Actions
                 </h3>
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                  {providerActions[integration.provider]?.map((action, index) => (
-                    <div
-                      key={index}
-                      className="bg-gray-50 dark:bg-gray-700 rounded-lg p-3"
-                    >
-                      <h4 className="font-medium text-gray-900 dark:text-white">
-                        {action.name}
-                      </h4>
-                      <p className="text-sm text-gray-600 dark:text-gray-300 mt-1">
-                        {action.description}
-                      </p>
-                      <p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
-                        Triggers on: {action.event}
-                      </p>
-                    </div>
-                  ))}
+                  {providerActions[integration.provider]?.map(
+                    (action, index) => (
+                      <div
+                        key={index}
+                        className="bg-gray-50 dark:bg-gray-700 rounded-lg p-3"
+                      >
+                        <h4 className="font-medium text-gray-900 dark:text-white">
+                          {action.name}
+                        </h4>
+                        <p className="text-sm text-gray-600 dark:text-gray-300 mt-1">
+                          {action.description}
+                        </p>
+                        <p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
+                          Triggers on: {action.event}
+                        </p>
+                      </div>
+                    ),
+                  )}
                 </div>
               </div>
             </div>
@@ -188,10 +217,13 @@ export function IntegrationsList({
       {selectedIntegration && (
         <IntegrationHistoryModal
           provider={selectedIntegration}
-          history={integrations.find(i => i.provider === selectedIntegration)?.usageHistory || []}
+          history={
+            integrations.find((i) => i.provider === selectedIntegration)
+              ?.usageHistory || []
+          }
           onClose={() => setSelectedIntegration(null)}
         />
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/integrations/integrationData.ts b/src/components/integrations/integrationData.ts
index 56c9ab7..c6fde67 100644
--- a/src/components/integrations/integrationData.ts
+++ b/src/components/integrations/integrationData.ts
@@ -1,55 +1,124 @@
-export const providerCommands: Record<string, Array<{ command: string; description: string }>> = {
+export const providerCommands: Record<
+  string,
+  Array<{ command: string; description: string }>
+> = {
   SonarCloud: [
-    { command: '/sonar analyze', description: 'Trigger a new analysis' },
-    { command: '/sonar quality-gate', description: 'Check quality gate status' },
-    { command: '/sonar coverage', description: 'Show code coverage report' }
+    { command: "/sonar analyze", description: "Trigger a new analysis" },
+    {
+      command: "/sonar quality-gate",
+      description: "Check quality gate status",
+    },
+    { command: "/sonar coverage", description: "Show code coverage report" },
   ],
   Codacy: [
-    { command: '/codacy analyze', description: 'Run code analysis' },
-    { command: '/codacy issues', description: 'List code issues' },
-    { command: '/codacy metrics', description: 'Show code metrics' }
+    { command: "/codacy analyze", description: "Run code analysis" },
+    { command: "/codacy issues", description: "List code issues" },
+    { command: "/codacy metrics", description: "Show code metrics" },
   ],
   Codecov: [
-    { command: '/codecov status', description: 'Check coverage status' },
-    { command: '/codecov patch', description: 'Show patch coverage' },
-    { command: '/codecov report', description: 'Generate coverage report' }
+    { command: "/codecov status", description: "Check coverage status" },
+    { command: "/codecov patch", description: "Show patch coverage" },
+    { command: "/codecov report", description: "Generate coverage report" },
   ],
   Snyk: [
-    { command: '/snyk test', description: 'Run security scan' },
-    { command: '/snyk monitor', description: 'Enable continuous monitoring' },
-    { command: '/snyk fix', description: 'Apply security fixes' }
+    { command: "/snyk test", description: "Run security scan" },
+    { command: "/snyk monitor", description: "Enable continuous monitoring" },
+    { command: "/snyk fix", description: "Apply security fixes" },
   ],
   OpenAI: [
-    { command: '/ai review', description: 'Request AI code review' },
-    { command: '/ai suggest', description: 'Get code suggestions' },
-    { command: '/ai explain', description: 'Explain code changes' }
-  ]
+    { command: "/ai review", description: "Request AI code review" },
+    { command: "/ai suggest", description: "Get code suggestions" },
+    { command: "/ai explain", description: "Explain code changes" },
+  ],
 };
 
-export const providerActions: Record<string, Array<{ name: string; description: string; event: string }>> = {
+export const providerActions: Record<
+  string,
+  Array<{ name: string; description: string; event: string }>
+> = {
   SonarCloud: [
-    { name: 'Quality Gate Check', description: 'Checks if code meets quality standards', event: 'pull_request' },
-    { name: 'Code Analysis', description: 'Analyzes code for issues and metrics', event: 'push' },
-    { name: 'Security Review', description: 'Scans for security vulnerabilities', event: 'pull_request, push' }
+    {
+      name: "Quality Gate Check",
+      description: "Checks if code meets quality standards",
+      event: "pull_request",
+    },
+    {
+      name: "Code Analysis",
+      description: "Analyzes code for issues and metrics",
+      event: "push",
+    },
+    {
+      name: "Security Review",
+      description: "Scans for security vulnerabilities",
+      event: "pull_request, push",
+    },
   ],
   Codacy: [
-    { name: 'Code Quality Check', description: 'Analyzes code quality and patterns', event: 'pull_request' },
-    { name: 'Style Check', description: 'Verifies code style compliance', event: 'push' },
-    { name: 'Complexity Analysis', description: 'Measures code complexity', event: 'pull_request' }
+    {
+      name: "Code Quality Check",
+      description: "Analyzes code quality and patterns",
+      event: "pull_request",
+    },
+    {
+      name: "Style Check",
+      description: "Verifies code style compliance",
+      event: "push",
+    },
+    {
+      name: "Complexity Analysis",
+      description: "Measures code complexity",
+      event: "pull_request",
+    },
   ],
   Codecov: [
-    { name: 'Coverage Report', description: 'Generates code coverage report', event: 'pull_request' },
-    { name: 'Coverage Diff', description: 'Shows coverage changes', event: 'pull_request' },
-    { name: 'Coverage Check', description: 'Verifies coverage thresholds', event: 'push' }
+    {
+      name: "Coverage Report",
+      description: "Generates code coverage report",
+      event: "pull_request",
+    },
+    {
+      name: "Coverage Diff",
+      description: "Shows coverage changes",
+      event: "pull_request",
+    },
+    {
+      name: "Coverage Check",
+      description: "Verifies coverage thresholds",
+      event: "push",
+    },
   ],
   Snyk: [
-    { name: 'Security Scan', description: 'Scans for vulnerabilities', event: 'pull_request, push' },
-    { name: 'Dependency Check', description: 'Analyzes dependencies for issues', event: 'push' },
-    { name: 'License Check', description: 'Verifies license compliance', event: 'pull_request' }
+    {
+      name: "Security Scan",
+      description: "Scans for vulnerabilities",
+      event: "pull_request, push",
+    },
+    {
+      name: "Dependency Check",
+      description: "Analyzes dependencies for issues",
+      event: "push",
+    },
+    {
+      name: "License Check",
+      description: "Verifies license compliance",
+      event: "pull_request",
+    },
   ],
   OpenAI: [
-    { name: 'Code Review', description: 'Performs AI-powered code review', event: 'pull_request' },
-    { name: 'Description Enhancement', description: 'Improves PR descriptions', event: 'pull_request' },
-    { name: 'Code Suggestions', description: 'Suggests code improvements', event: 'pull_request' }
-  ]
-};
\ No newline at end of file
+    {
+      name: "Code Review",
+      description: "Performs AI-powered code review",
+      event: "pull_request",
+    },
+    {
+      name: "Description Enhancement",
+      description: "Improves PR descriptions",
+      event: "pull_request",
+    },
+    {
+      name: "Code Suggestions",
+      description: "Suggests code improvements",
+      event: "pull_request",
+    },
+  ],
+};
diff --git a/src/components/notifications/NotificationFilters.tsx b/src/components/notifications/NotificationFilters.tsx
index f0b88ea..85777fe 100644
--- a/src/components/notifications/NotificationFilters.tsx
+++ b/src/components/notifications/NotificationFilters.tsx
@@ -1,5 +1,5 @@
-import { Filter, Eye, EyeOff } from 'lucide-react';
-import { TokenSelect } from '../TokenSelect';
+import { Filter, Eye, EyeOff } from "lucide-react";
+import { TokenSelect } from "../TokenSelect";
 
 interface NotificationFiltersProps {
   showUnreadOnly: boolean;
@@ -8,7 +8,12 @@ interface NotificationFiltersProps {
   selectedSenders: string[];
   typeOptions: Array<{ value: string; label: string; color: string }>;
   priorityOptions: Array<{ value: string; label: string; color: string }>;
-  senderOptions: Array<{ value: string; label: string; avatar?: string; description?: string }>;
+  senderOptions: Array<{
+    value: string;
+    label: string;
+    avatar?: string;
+    description?: string;
+  }>;
   isFiltersExpanded: boolean;
   onToggleUnreadOnly: () => void;
   onTypesChange: (types: string[]) => void;
@@ -32,10 +37,13 @@ export function NotificationFilters({
   onPrioritiesChange,
   onSendersChange,
   onToggleExpanded,
-  onClearFilters
+  onClearFilters,
 }: NotificationFiltersProps) {
-  const hasActiveFilters = showUnreadOnly || selectedTypes.length > 0 || 
-    selectedPriorities.length > 0 || selectedSenders.length > 0;
+  const hasActiveFilters =
+    showUnreadOnly ||
+    selectedTypes.length > 0 ||
+    selectedPriorities.length > 0 ||
+    selectedSenders.length > 0;
 
   return (
     <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg mb-8">
@@ -43,17 +51,21 @@ export function NotificationFilters({
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center space-x-2">
             <Filter className="w-5 h-5 text-gray-500 dark:text-gray-400" />
-            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Filters</h2>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+              Filters
+            </h2>
           </div>
           <button
             onClick={onToggleExpanded}
             className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
           >
-            {isFiltersExpanded ? 'Show Less' : 'Show More'}
+            {isFiltersExpanded ? "Show Less" : "Show More"}
           </button>
         </div>
 
-        <div className={`grid gap-4 ${isFiltersExpanded ? 'grid-cols-1 md:grid-cols-4' : 'grid-cols-1 md:grid-cols-2'}`}>
+        <div
+          className={`grid gap-4 ${isFiltersExpanded ? "grid-cols-1 md:grid-cols-4" : "grid-cols-1 md:grid-cols-2"}`}
+        >
           {/* Read/Unread Filter */}
           <div>
             <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
@@ -63,8 +75,8 @@ export function NotificationFilters({
               onClick={onToggleUnreadOnly}
               className={`flex items-center space-x-2 px-4 py-2 rounded-lg border ${
                 showUnreadOnly
-                  ? 'border-blue-500 text-blue-700 dark:text-blue-300'
-                  : 'border-gray-300 text-gray-700 dark:text-gray-300'
+                  ? "border-blue-500 text-blue-700 dark:text-blue-300"
+                  : "border-gray-300 text-gray-700 dark:text-gray-300"
               } hover:bg-gray-50 dark:hover:bg-gray-700 w-full justify-between`}
             >
               <span>Show unread only</span>
@@ -90,7 +102,7 @@ export function NotificationFilters({
           </div>
 
           {/* Sender Filter */}
-          <div className={!isFiltersExpanded ? 'hidden' : ''}>
+          <div className={!isFiltersExpanded ? "hidden" : ""}>
             <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
               Sender
             </label>
@@ -103,7 +115,7 @@ export function NotificationFilters({
           </div>
 
           {/* Priority Filter */}
-          <div className={!isFiltersExpanded ? 'hidden' : ''}>
+          <div className={!isFiltersExpanded ? "hidden" : ""}>
             <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
               Priority
             </label>
@@ -129,4 +141,4 @@ export function NotificationFilters({
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/notifications/NotificationItem.tsx b/src/components/notifications/NotificationItem.tsx
index c2bb8a8..45b1824 100644
--- a/src/components/notifications/NotificationItem.tsx
+++ b/src/components/notifications/NotificationItem.tsx
@@ -1,24 +1,32 @@
-import { Bell, GitPullRequest, MessageSquare, GitMerge, Shield, CheckCircle2, AlertTriangle } from 'lucide-react';
-import type { Notification } from '../../types';
+import {
+  Bell,
+  GitPullRequest,
+  MessageSquare,
+  GitMerge,
+  Shield,
+  CheckCircle2,
+  AlertTriangle,
+} from "lucide-react";
+import type { Notification } from "../../types";
 
 interface NotificationItemProps {
   notification: Notification;
   onMarkAsRead: (id: string) => void;
 }
 
-const getNotificationIcon = (type: Notification['type']) => {
+const getNotificationIcon = (type: Notification["type"]) => {
   switch (type) {
-    case 'pr_review':
+    case "pr_review":
       return <GitPullRequest className="w-5 h-5 text-blue-500" />;
-    case 'issue_mention':
+    case "issue_mention":
       return <MessageSquare className="w-5 h-5 text-yellow-500" />;
-    case 'pr_merged':
+    case "pr_merged":
       return <GitMerge className="w-5 h-5 text-purple-500" />;
-    case 'security_alert':
+    case "security_alert":
       return <Shield className="w-5 h-5 text-red-500" />;
-    case 'issue_assigned':
+    case "issue_assigned":
       return <CheckCircle2 className="w-5 h-5 text-green-500" />;
-    case 'pr_changes':
+    case "pr_changes":
       return <AlertTriangle className="w-5 h-5 text-orange-500" />;
     default:
       return <Bell className="w-5 h-5 text-gray-500" />;
@@ -27,22 +35,25 @@ const getNotificationIcon = (type: Notification['type']) => {
 
 const getPriorityClass = (priority?: string) => {
   switch (priority) {
-    case 'high':
-      return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
-    case 'medium':
-      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
-    case 'low':
-      return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
+    case "high":
+      return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200";
+    case "medium":
+      return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200";
+    case "low":
+      return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200";
     default:
-      return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200';
+      return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200";
   }
 };
 
-export function NotificationItem({ notification, onMarkAsRead }: NotificationItemProps) {
+export function NotificationItem({
+  notification,
+  onMarkAsRead,
+}: NotificationItemProps) {
   return (
     <div
       className={`px-6 py-4 ${
-        !notification.read ? 'bg-blue-50 dark:bg-blue-900/10' : ''
+        !notification.read ? "bg-blue-50 dark:bg-blue-900/10" : ""
       }`}
     >
       <div className="flex items-start space-x-3">
@@ -65,7 +76,9 @@ export function NotificationItem({ notification, onMarkAsRead }: NotificationIte
               </a>
             </div>
             {notification.priority && (
-              <span className={`px-2 py-1 rounded-full text-xs font-medium ${getPriorityClass(notification.priority)}`}>
+              <span
+                className={`px-2 py-1 rounded-full text-xs font-medium ${getPriorityClass(notification.priority)}`}
+              >
                 {notification.priority}
               </span>
             )}
@@ -93,11 +106,11 @@ export function NotificationItem({ notification, onMarkAsRead }: NotificationIte
               </a>
               <span className="mx-2">•</span>
               <span>
-                {new Date(notification.created_at).toLocaleDateString('en-US', {
-                  month: 'short',
-                  day: 'numeric',
-                  hour: '2-digit',
-                  minute: '2-digit'
+                {new Date(notification.created_at).toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  hour: "2-digit",
+                  minute: "2-digit",
                 })}
               </span>
             </div>
@@ -114,4 +127,4 @@ export function NotificationItem({ notification, onMarkAsRead }: NotificationIte
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/notifications/NotificationList.tsx b/src/components/notifications/NotificationList.tsx
index ac327ad..22a79bb 100644
--- a/src/components/notifications/NotificationList.tsx
+++ b/src/components/notifications/NotificationList.tsx
@@ -1,5 +1,5 @@
-import { NotificationItem } from './NotificationItem';
-import type { Notification } from '../../types';
+import { NotificationItem } from "./NotificationItem";
+import type { Notification } from "../../types";
 
 interface NotificationListProps {
   notifications: Notification[];
@@ -12,7 +12,7 @@ export function NotificationList({
   notifications,
   unreadCount,
   onMarkAsRead,
-  onMarkAllAsRead
+  onMarkAllAsRead,
 }: NotificationListProps) {
   return (
     <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg">
@@ -52,4 +52,4 @@ export function NotificationList({
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/pullrequest/CheckRunDiagram.tsx b/src/components/pullrequest/CheckRunDiagram.tsx
index f6b17e6..d244095 100644
--- a/src/components/pullrequest/CheckRunDiagram.tsx
+++ b/src/components/pullrequest/CheckRunDiagram.tsx
@@ -1,19 +1,24 @@
-import { useState } from 'react';
-import { BulletDiagram } from '../BulletDiagram';
-import { X } from 'lucide-react';
-import type { Event } from '../../types';
+import { useState } from "react";
+import { BulletDiagram } from "../BulletDiagram";
+import { X } from "lucide-react";
+import type { Event } from "../../types";
 
 interface CheckRunDiagramProps {
   events: Event[];
 }
 
 export function CheckRunDiagram({ events }: CheckRunDiagramProps) {
-  const [selectedPayload, setSelectedPayload] = useState<Record<string, unknown> | null>(null);
+  const [selectedPayload, setSelectedPayload] = useState<Record<
+    string,
+    unknown
+  > | null>(null);
 
   return (
     <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg mb-8">
       <div className="p-6">
-        <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Check Run Timeline</h2>
+        <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
+          Check Run Timeline
+        </h2>
         <BulletDiagram
           events={events}
           onViewPayload={(payload) => setSelectedPayload(payload)}
@@ -21,7 +26,9 @@ export function CheckRunDiagram({ events }: CheckRunDiagramProps) {
         {selectedPayload && (
           <div className="mt-4">
             <div className="flex items-center justify-between mb-2">
-              <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">Event Payload</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Event Payload
+              </h3>
               <button
                 onClick={() => setSelectedPayload(null)}
                 className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
@@ -39,4 +46,4 @@ export function CheckRunDiagram({ events }: CheckRunDiagramProps) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/pullrequest/WorkflowRunDiagram.tsx b/src/components/pullrequest/WorkflowRunDiagram.tsx
index c9c8c54..58cd0f9 100644
--- a/src/components/pullrequest/WorkflowRunDiagram.tsx
+++ b/src/components/pullrequest/WorkflowRunDiagram.tsx
@@ -1,19 +1,24 @@
-import { useState } from 'react';
-import { BulletDiagram } from '../BulletDiagram';
-import { X } from 'lucide-react';
-import type { Event } from '../../types';
+import { useState } from "react";
+import { BulletDiagram } from "../BulletDiagram";
+import { X } from "lucide-react";
+import type { Event } from "../../types";
 
 interface WorkflowRunDiagramProps {
   events: Event[];
 }
 
 export function WorkflowRunDiagram({ events }: WorkflowRunDiagramProps) {
-  const [selectedPayload, setSelectedPayload] = useState<Record<string, unknown> | null>(null);
+  const [selectedPayload, setSelectedPayload] = useState<Record<
+    string,
+    unknown
+  > | null>(null);
 
   return (
     <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg mb-8">
       <div className="p-6">
-        <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Workflow Run Timeline</h2>
+        <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
+          Workflow Run Timeline
+        </h2>
         <BulletDiagram
           events={events}
           onViewPayload={(payload) => setSelectedPayload(payload)}
@@ -21,7 +26,9 @@ export function WorkflowRunDiagram({ events }: WorkflowRunDiagramProps) {
         {selectedPayload && (
           <div className="mt-4">
             <div className="flex items-center justify-between mb-2">
-              <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">Event Payload</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Event Payload
+              </h3>
               <button
                 onClick={() => setSelectedPayload(null)}
                 className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
@@ -39,4 +46,4 @@ export function WorkflowRunDiagram({ events }: WorkflowRunDiagramProps) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/pullrequests/PullRequestFilters.tsx b/src/components/pullrequests/PullRequestFilters.tsx
index 1380634..6851d41 100644
--- a/src/components/pullrequests/PullRequestFilters.tsx
+++ b/src/components/pullrequests/PullRequestFilters.tsx
@@ -1,9 +1,14 @@
-import { Filter } from 'lucide-react';
-import { TokenSelect } from '../TokenSelect';
+import { Filter } from "lucide-react";
+import { TokenSelect } from "../TokenSelect";
 
 interface PullRequestFiltersProps {
   ownerOptions: Array<{ value: string; label: string }>;
-  senderOptions: Array<{ value: string; label: string; avatar?: string; description?: string }>;
+  senderOptions: Array<{
+    value: string;
+    label: string;
+    avatar?: string;
+    description?: string;
+  }>;
   stateOptions: Array<{ value: string; label: string; color: string }>;
   labelOptions: Array<{ value: string; label: string; color: string }>;
   selectedOwners: string[];
@@ -34,10 +39,13 @@ export function PullRequestFilters({
   onStatesChange,
   onLabelsChange,
   onToggleExpanded,
-  onClearFilters
+  onClearFilters,
 }: PullRequestFiltersProps) {
-  const hasActiveFilters = selectedOwners.length > 0 || selectedSenders.length > 0 || 
-    selectedStates.length > 0 || selectedLabels.length > 0;
+  const hasActiveFilters =
+    selectedOwners.length > 0 ||
+    selectedSenders.length > 0 ||
+    selectedStates.length > 0 ||
+    selectedLabels.length > 0;
 
   return (
     <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg mb-8">
@@ -45,20 +53,27 @@ export function PullRequestFilters({
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center space-x-2">
             <Filter className="w-5 h-5 text-gray-500 dark:text-gray-400" />
-            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Filters</h2>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+              Filters
+            </h2>
           </div>
           <button
             onClick={onToggleExpanded}
             className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
           >
-            {isFiltersExpanded ? 'Show Less' : 'Show More'}
+            {isFiltersExpanded ? "Show Less" : "Show More"}
           </button>
         </div>
 
-        <div className={`grid gap-4 ${isFiltersExpanded ? 'grid-cols-1 md:grid-cols-4' : 'grid-cols-1 md:grid-cols-2'}`}>
+        <div
+          className={`grid gap-4 ${isFiltersExpanded ? "grid-cols-1 md:grid-cols-4" : "grid-cols-1 md:grid-cols-2"}`}
+        >
           {/* Owner Filter */}
           <div>
-            <label htmlFor="owner" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+            <label
+              htmlFor="owner"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+            >
               Owner
             </label>
             <TokenSelect
@@ -71,7 +86,10 @@ export function PullRequestFilters({
 
           {/* Sender Filter */}
           <div>
-            <label htmlFor="sender" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+            <label
+              htmlFor="sender"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+            >
               Sender
             </label>
             <TokenSelect
@@ -83,8 +101,11 @@ export function PullRequestFilters({
           </div>
 
           {/* State Filter */}
-          <div className={!isFiltersExpanded ? 'hidden' : ''}>
-            <label htmlFor="state" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+          <div className={!isFiltersExpanded ? "hidden" : ""}>
+            <label
+              htmlFor="state"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+            >
               State
             </label>
             <TokenSelect
@@ -96,8 +117,11 @@ export function PullRequestFilters({
           </div>
 
           {/* Labels Filter */}
-          <div className={!isFiltersExpanded ? 'hidden' : ''}>
-            <label htmlFor="labels" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+          <div className={!isFiltersExpanded ? "hidden" : ""}>
+            <label
+              htmlFor="labels"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+            >
               Labels
             </label>
             <TokenSelect
@@ -122,4 +146,4 @@ export function PullRequestFilters({
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/pullrequests/PullRequestGroup.tsx b/src/components/pullrequests/PullRequestGroup.tsx
index 0c9c6e2..b4a02c3 100644
--- a/src/components/pullrequests/PullRequestGroup.tsx
+++ b/src/components/pullrequests/PullRequestGroup.tsx
@@ -1,6 +1,6 @@
-import { ChevronDown } from 'lucide-react';
-import { PullRequestItem } from './PullRequestItem';
-import type { PullRequest } from '../../types';
+import { ChevronDown } from "lucide-react";
+import { PullRequestItem } from "./PullRequestItem";
+import type { PullRequest } from "../../types";
 
 interface PullRequestGroupProps {
   owner: string;
@@ -13,7 +13,7 @@ export function PullRequestGroup({
   owner,
   pullRequests,
   isExpanded,
-  onToggle
+  onToggle,
 }: PullRequestGroupProps) {
   return (
     <div className="border-b border-gray-200 dark:border-gray-700 last:border-0">
@@ -29,7 +29,7 @@ export function PullRequestGroup({
         </h2>
         <ChevronDown
           className={`w-5 h-5 text-gray-500 transition-transform ${
-            isExpanded ? 'transform rotate-180' : ''
+            isExpanded ? "transform rotate-180" : ""
           }`}
         />
       </button>
@@ -43,4 +43,4 @@ export function PullRequestGroup({
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/pullrequests/PullRequestItem.tsx b/src/components/pullrequests/PullRequestItem.tsx
index 696a87f..e97631a 100644
--- a/src/components/pullrequests/PullRequestItem.tsx
+++ b/src/components/pullrequests/PullRequestItem.tsx
@@ -1,54 +1,63 @@
-import { GitPullRequest, CheckCircle, XCircle, Clock, AlertTriangle, ArrowRight, HelpCircle, ExternalLink } from 'lucide-react';
-import { Link } from 'react-router-dom';
-import type { PullRequest } from '../../types';
+import {
+  GitPullRequest,
+  CheckCircle,
+  XCircle,
+  Clock,
+  AlertTriangle,
+  ArrowRight,
+  HelpCircle,
+  ExternalLink,
+} from "lucide-react";
+import { Link } from "react-router-dom";
+import type { PullRequest } from "../../types";
 
 interface PullRequestItemProps {
   pullRequest: PullRequest;
 }
 
-function getStateIcon(state: PullRequest['state']) {
+function getStateIcon(state: PullRequest["state"]) {
   switch (state) {
-    case 'success':
+    case "success":
       return <CheckCircle className="w-4 h-4" />;
-    case 'failure':
+    case "failure":
       return <XCircle className="w-4 h-4" />;
-    case 'pending':
+    case "pending":
       return <Clock className="w-4 h-4" />;
-    case 'error':
+    case "error":
       return <AlertTriangle className="w-4 h-4" />;
-    case 'skipped':
+    case "skipped":
       return <ArrowRight className="w-4 h-4" />;
     default:
       return <HelpCircle className="w-4 h-4" />;
   }
 }
 
-function getStateClass(state: PullRequest['state']) {
+function getStateClass(state: PullRequest["state"]) {
   switch (state) {
-    case 'success':
-      return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
-    case 'failure':
-      return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
-    case 'pending':
-      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
-    case 'error':
-      return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
-    case 'skipped':
-      return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200';
+    case "success":
+      return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200";
+    case "failure":
+      return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200";
+    case "pending":
+      return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200";
+    case "error":
+      return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200";
+    case "skipped":
+      return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200";
     default:
-      return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200';
+      return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200";
   }
 }
 
 function luminance(color: string): string {
   if (!/^[0-9A-Fa-f]{6}$/.test(color)) {
-    throw new Error('Invalid color format. Expected 6-digit hex color.');
+    throw new Error("Invalid color format. Expected 6-digit hex color.");
   }
   const red = parseInt(color.slice(0, 2), 16);
   const green = parseInt(color.slice(2, 2), 16);
   const blue = parseInt(color.slice(4, 2), 16);
-  const yiq = ((red * 299) + (green * 587) + (blue * 114)) / 1000;
-  return yiq >= 128 ? '#000' : '#fff';
+  const yiq = (red * 299 + green * 587 + blue * 114) / 1000;
+  return yiq >= 128 ? "#000" : "#fff";
 }
 
 export function PullRequestItem({ pullRequest: pr }: PullRequestItemProps) {
@@ -73,14 +82,16 @@ export function PullRequestItem({ pullRequest: pr }: PullRequestItemProps) {
                 {pr.sender.name || pr.sender.login}
               </a>
             </div>
-            <span className={`px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1 ${getStateClass(pr.state)}`}>
+            <span
+              className={`px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1 ${getStateClass(pr.state)}`}
+            >
               {getStateIcon(pr.state)}
               {pr.state}
             </span>
           </div>
           <div className="flex items-center space-x-2 mt-2">
             <Link
-              to={`/pull-requests/${pr.url.split('/').pop()}`}
+              to={`/pull-requests/${pr.url.split("/").pop()}`}
               className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium"
             >
               {pr.title}
@@ -106,11 +117,11 @@ export function PullRequestItem({ pullRequest: pr }: PullRequestItemProps) {
             </a>
             <span className="text-gray-400 mx-2">•</span>
             <span className="text-gray-500 dark:text-gray-400">
-              {new Date(pr.created_at).toLocaleDateString('en-US', {
-                month: 'short',
-                day: 'numeric',
-                hour: '2-digit',
-                minute: '2-digit'
+              {new Date(pr.created_at).toLocaleDateString("en-US", {
+                month: "short",
+                day: "numeric",
+                hour: "2-digit",
+                minute: "2-digit",
               })}
             </span>
           </div>
@@ -122,7 +133,7 @@ export function PullRequestItem({ pullRequest: pr }: PullRequestItemProps) {
                   className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
                   style={{
                     backgroundColor: `#${label.color}`,
-                    color: luminance(label.color)
+                    color: luminance(label.color),
                   }}
                   title={label.description}
                 >
@@ -135,4 +146,4 @@ export function PullRequestItem({ pullRequest: pr }: PullRequestItemProps) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/repository/BranchProtectionSection.tsx b/src/components/repository/BranchProtectionSection.tsx
index 46d8260..1335344 100644
--- a/src/components/repository/BranchProtectionSection.tsx
+++ b/src/components/repository/BranchProtectionSection.tsx
@@ -1,11 +1,13 @@
-import { Shield, CheckCircle, XCircle } from 'lucide-react';
-import type { BranchProtection } from '../../types';
+import { Shield, CheckCircle, XCircle } from "lucide-react";
+import type { BranchProtection } from "../../types";
 
 interface BranchProtectionSectionProps {
   protectionRules: BranchProtection[];
 }
 
-export function BranchProtectionSection({ protectionRules = [] }: BranchProtectionSectionProps) {
+export function BranchProtectionSection({
+  protectionRules = [],
+}: BranchProtectionSectionProps) {
   return (
     <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg">
       <div className="p-6">
@@ -72,4 +74,4 @@ export function BranchProtectionSection({ protectionRules = [] }: BranchProtecti
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/repository/BranchesSection.tsx b/src/components/repository/BranchesSection.tsx
index 395a8ac..6f115bb 100644
--- a/src/components/repository/BranchesSection.tsx
+++ b/src/components/repository/BranchesSection.tsx
@@ -1,12 +1,15 @@
-import { GitBranch, Shield } from 'lucide-react';
-import type { Branch } from '../../types';
+import { GitBranch, Shield } from "lucide-react";
+import type { Branch } from "../../types";
 
 interface BranchesSectionProps {
   branches: Branch[];
   defaultBranch: string;
 }
 
-export function BranchesSection({ branches = [], defaultBranch }: BranchesSectionProps) {
+export function BranchesSection({
+  branches = [],
+  defaultBranch,
+}: BranchesSectionProps) {
   return (
     <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg">
       <div className="p-6">
@@ -20,7 +23,7 @@ export function BranchesSection({ branches = [], defaultBranch }: BranchesSectio
           </span>
         </div>
         <div className="space-y-3">
-          {branches.map(branch => (
+          {branches.map((branch) => (
             <div
               key={branch.name}
               className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg"
@@ -43,4 +46,4 @@ export function BranchesSection({ branches = [], defaultBranch }: BranchesSectio
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/repository/IntegrationsSection.tsx b/src/components/repository/IntegrationsSection.tsx
index 5b8cfc7..8463829 100644
--- a/src/components/repository/IntegrationsSection.tsx
+++ b/src/components/repository/IntegrationsSection.tsx
@@ -1,11 +1,13 @@
-import { Cable, Clock, ExternalLink } from 'lucide-react';
-import type { Integration } from '../../types';
+import { Cable, Clock, ExternalLink } from "lucide-react";
+import type { Integration } from "../../types";
 
 interface IntegrationsSectionProps {
   integrations: Integration[];
 }
 
-export function IntegrationsSection({ integrations = [] }: IntegrationsSectionProps) {
+export function IntegrationsSection({
+  integrations = [],
+}: IntegrationsSectionProps) {
   if (!integrations?.length) {
     return (
       <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg lg:col-span-2">
@@ -14,14 +16,16 @@ export function IntegrationsSection({ integrations = [] }: IntegrationsSectionPr
             <Cable className="w-5 h-5 mr-2" />
             Third-party Integrations
           </h2>
-          <p className="text-gray-500 dark:text-gray-400">No integrations found.</p>
+          <p className="text-gray-500 dark:text-gray-400">
+            No integrations found.
+          </p>
         </div>
       </div>
     );
   }
 
   const renderMetricValue = (value: unknown): string => {
-    if (typeof value === 'object' && value !== null) {
+    if (typeof value === "object" && value !== null) {
       return JSON.stringify(value);
     }
     return String(value);
@@ -44,25 +48,28 @@ export function IntegrationsSection({ integrations = [] }: IntegrationsSectionPr
                 <h3 className="font-medium text-gray-900 dark:text-white">
                   {integration.provider}
                 </h3>
-                <span className={`px-2 py-1 text-xs font-medium rounded-full ${
-                  integration.status === 'Active'
-                    ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-                    : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
-                }`}>
+                <span
+                  className={`px-2 py-1 text-xs font-medium rounded-full ${
+                    integration.status === "Active"
+                      ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+                      : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
+                  }`}
+                >
                   {integration.status}
                 </span>
               </div>
               <div className="space-y-2">
                 <div className="flex items-center text-sm text-gray-500 dark:text-gray-400">
                   <Clock className="w-4 h-4 mr-1" />
-                  Last check: {new Date(integration.last_check).toLocaleString()}
+                  Last check:{" "}
+                  {new Date(integration.last_check).toLocaleString()}
                 </div>
                 {integration.metrics && (
                   <div className="grid grid-cols-2 gap-2 text-sm">
                     {Object.entries(integration.metrics).map(([key, value]) => (
                       <div key={key}>
                         <span className="text-gray-500 dark:text-gray-400">
-                          {key.replace(/_/g, ' ')}:
+                          {key.replace(/_/g, " ")}:
                         </span>
                         <span className="ml-1 font-medium text-gray-900 dark:text-white">
                           {renderMetricValue(value)}
@@ -89,4 +96,4 @@ export function IntegrationsSection({ integrations = [] }: IntegrationsSectionPr
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/repository/LatestReleaseSection.tsx b/src/components/repository/LatestReleaseSection.tsx
index 7255ccb..1ca6c0a 100644
--- a/src/components/repository/LatestReleaseSection.tsx
+++ b/src/components/repository/LatestReleaseSection.tsx
@@ -1,5 +1,5 @@
-import { Tag } from 'lucide-react';
-import type { Release } from '../../types';
+import { Tag } from "lucide-react";
+import type { Release } from "../../types";
 
 interface LatestReleaseSectionProps {
   release?: Release;
@@ -37,9 +37,7 @@ export function LatestReleaseSection({ release }: LatestReleaseSectionProps) {
                 )}
               </div>
             </div>
-            <p className="text-gray-600 dark:text-gray-300">
-              {release.body}
-            </p>
+            <p className="text-gray-600 dark:text-gray-300">{release.body}</p>
             <p className="text-sm text-gray-500 dark:text-gray-400">
               Published: {new Date(release.published_at).toLocaleDateString()}
             </p>
@@ -50,4 +48,4 @@ export function LatestReleaseSection({ release }: LatestReleaseSectionProps) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/repository/PagesSection.tsx b/src/components/repository/PagesSection.tsx
index b479582..07160ae 100644
--- a/src/components/repository/PagesSection.tsx
+++ b/src/components/repository/PagesSection.tsx
@@ -1,5 +1,5 @@
-import { Globe, ExternalLink } from 'lucide-react';
-import type { Pages } from '../../types';
+import { Globe, ExternalLink } from "lucide-react";
+import type { Pages } from "../../types";
 
 interface PagesSectionProps {
   pages: Pages;
@@ -24,37 +24,45 @@ export function PagesSection({ pages }: PagesSectionProps) {
               {pages.url}
               <ExternalLink className="w-4 h-4 ml-1" />
             </a>
-            <span className={`px-2 py-1 text-xs font-medium rounded-full ${
-              pages.status === 'active'
-                ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-                : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
-            }`}>
+            <span
+              className={`px-2 py-1 text-xs font-medium rounded-full ${
+                pages.status === "active"
+                  ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+                  : "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
+              }`}
+            >
               {pages.status}
             </span>
           </div>
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <p className="text-sm text-gray-500 dark:text-gray-400">Environment</p>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Environment
+              </p>
               <p className="font-medium text-gray-900 dark:text-white">
                 {pages.environment}
               </p>
             </div>
             <div>
-              <p className="text-sm text-gray-500 dark:text-gray-400">Protection</p>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Protection
+              </p>
               <p className="font-medium text-gray-900 dark:text-white">
-                {pages.protected ? 'Protected' : 'Not protected'}
+                {pages.protected ? "Protected" : "Not protected"}
               </p>
             </div>
             <div>
               <p className="text-sm text-gray-500 dark:text-gray-400">HTTPS</p>
               <p className="font-medium text-gray-900 dark:text-white">
-                {pages.https_enforced ? 'Enforced' : 'Not enforced'}
+                {pages.https_enforced ? "Enforced" : "Not enforced"}
               </p>
             </div>
             <div>
-              <p className="text-sm text-gray-500 dark:text-gray-400">Custom 404</p>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Custom 404
+              </p>
               <p className="font-medium text-gray-900 dark:text-white">
-                {pages.custom_404 ? 'Yes' : 'No'}
+                {pages.custom_404 ? "Yes" : "No"}
               </p>
             </div>
           </div>
@@ -62,4 +70,4 @@ export function PagesSection({ pages }: PagesSectionProps) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/repository/RepositoryHeader.tsx b/src/components/repository/RepositoryHeader.tsx
index 6b08143..304f8b2 100644
--- a/src/components/repository/RepositoryHeader.tsx
+++ b/src/components/repository/RepositoryHeader.tsx
@@ -1,5 +1,12 @@
-import { Star, GitFork, AlertCircle, Eye, EyeOff, ExternalLink } from 'lucide-react';
-import type { Repository } from '../../types';
+import {
+  Star,
+  GitFork,
+  AlertCircle,
+  Eye,
+  EyeOff,
+  ExternalLink,
+} from "lucide-react";
+import type { Repository } from "../../types";
 
 interface RepositoryHeaderProps {
   repository: Repository;
@@ -54,7 +61,7 @@ export function RepositoryHeader({ repository }: RepositoryHeaderProps) {
                   {formatNumber(repository.issues)}
                 </span>
                 <span className="flex items-center">
-                  {repository.visibility === 'private' ? (
+                  {repository.visibility === "private" ? (
                     <span className="flex items-center text-red-600 dark:text-red-400">
                       <EyeOff className="w-4 h-4 mr-1" />
                       Private
@@ -76,4 +83,4 @@ export function RepositoryHeader({ repository }: RepositoryHeaderProps) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/repository/RulesetsSection.tsx b/src/components/repository/RulesetsSection.tsx
index f0a6526..3a30a4b 100644
--- a/src/components/repository/RulesetsSection.tsx
+++ b/src/components/repository/RulesetsSection.tsx
@@ -1,5 +1,5 @@
-import { Shield, CheckCircle, XCircle } from 'lucide-react';
-import type { Ruleset } from '../../types';
+import { Shield, CheckCircle, XCircle } from "lucide-react";
+import type { Ruleset } from "../../types";
 
 interface RulesetsSectionProps {
   rulesets: Ruleset[];
@@ -23,28 +23,30 @@ export function RulesetsSection({ rulesets = [] }: RulesetsSectionProps) {
                 <h3 className="font-medium text-gray-900 dark:text-white">
                   {ruleset.name}
                 </h3>
-                <span className={`px-2 py-1 text-xs font-medium rounded-full ${
-                  ruleset.enforcement === 'active'
-                    ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-                    : ruleset.enforcement === 'evaluate'
-                    ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
-                    : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
-                }`}>
+                <span
+                  className={`px-2 py-1 text-xs font-medium rounded-full ${
+                    ruleset.enforcement === "active"
+                      ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+                      : ruleset.enforcement === "evaluate"
+                        ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
+                        : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
+                  }`}
+                >
                   {ruleset.enforcement}
                 </span>
               </div>
               <div>
                 <p className="text-sm text-gray-500 dark:text-gray-400">
-                  Targets: {ruleset.target.join(', ')}
+                  Targets: {ruleset.target.join(", ")}
                 </p>
                 <p className="text-sm text-gray-500 dark:text-gray-400">
-                  Bypass actors: {ruleset.bypass_actors.join(', ')}
+                  Bypass actors: {ruleset.bypass_actors.join(", ")}
                 </p>
               </div>
               <div className="grid grid-cols-2 gap-2 text-sm">
                 {Object.entries(ruleset.rules).map(([key, value]) => (
                   <div key={key} className="flex items-center space-x-2">
-                    {typeof value === 'boolean' ? (
+                    {typeof value === "boolean" ? (
                       value ? (
                         <CheckCircle className="w-4 h-4 text-green-500" />
                       ) : (
@@ -54,7 +56,7 @@ export function RulesetsSection({ rulesets = [] }: RulesetsSectionProps) {
                       <Shield className="w-4 h-4 text-blue-500" />
                     )}
                     <span className="text-gray-600 dark:text-gray-300">
-                      {key.replace(/_/g, ' ')}
+                      {key.replace(/_/g, " ")}
                     </span>
                   </div>
                 ))}
@@ -65,4 +67,4 @@ export function RulesetsSection({ rulesets = [] }: RulesetsSectionProps) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/repository/WorkflowsSection.tsx b/src/components/repository/WorkflowsSection.tsx
index a664237..097d5ba 100644
--- a/src/components/repository/WorkflowsSection.tsx
+++ b/src/components/repository/WorkflowsSection.tsx
@@ -1,5 +1,13 @@
-import { Play, GitBranch, Clock, CheckCircle2, XCircle, AlertTriangle, User } from 'lucide-react';
-import type { Workflow, WorkflowRun } from '../../types';
+import {
+  Play,
+  GitBranch,
+  Clock,
+  CheckCircle2,
+  XCircle,
+  AlertTriangle,
+  User,
+} from "lucide-react";
+import type { Workflow, WorkflowRun } from "../../types";
 
 interface WorkflowsSectionProps {
   workflows: Workflow[];
@@ -7,18 +15,18 @@ interface WorkflowsSectionProps {
 }
 
 function getStatusIcon(status: string, conclusion: string | null) {
-  if (status === 'in_progress') {
+  if (status === "in_progress") {
     return <Clock className="w-5 h-5 text-yellow-500 animate-spin" />;
   }
-  
+
   switch (conclusion) {
-    case 'success':
+    case "success":
       return <CheckCircle2 className="w-5 h-5 text-green-500" />;
-    case 'failure':
+    case "failure":
       return <XCircle className="w-5 h-5 text-red-500" />;
-    case 'cancelled':
+    case "cancelled":
       return <AlertTriangle className="w-5 h-5 text-gray-500" />;
-    case 'skipped':
+    case "skipped":
       return <AlertTriangle className="w-5 h-5 text-purple-500" />;
     default:
       return <Clock className="w-5 h-5 text-yellow-500" />;
@@ -26,25 +34,28 @@ function getStatusIcon(status: string, conclusion: string | null) {
 }
 
 function getStatusClass(status: string, conclusion: string | null) {
-  if (status === 'in_progress') {
-    return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
+  if (status === "in_progress") {
+    return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200";
   }
-  
+
   switch (conclusion) {
-    case 'success':
-      return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
-    case 'failure':
-      return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
-    case 'cancelled':
-      return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200';
-    case 'skipped':
-      return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200';
+    case "success":
+      return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200";
+    case "failure":
+      return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200";
+    case "cancelled":
+      return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200";
+    case "skipped":
+      return "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200";
     default:
-      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
+      return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200";
   }
 }
 
-export function WorkflowsSection({ workflows = [], workflowRuns = [] }: WorkflowsSectionProps) {
+export function WorkflowsSection({
+  workflows = [],
+  workflowRuns = [],
+}: WorkflowsSectionProps) {
   return (
     <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg lg:col-span-2">
       <div className="p-6">
@@ -59,7 +70,7 @@ export function WorkflowsSection({ workflows = [], workflowRuns = [] }: Workflow
             Configuration
           </h3>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            {workflows.map(workflow => (
+            {workflows.map((workflow) => (
               <div
                 key={workflow.id}
                 className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg space-y-3"
@@ -68,11 +79,13 @@ export function WorkflowsSection({ workflows = [], workflowRuns = [] }: Workflow
                   <h4 className="font-medium text-gray-900 dark:text-white">
                     {workflow.name}
                   </h4>
-                  <span className={`px-2 py-1 text-xs font-medium rounded-full ${
-                    workflow.state === 'active'
-                      ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-                      : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
-                  }`}>
+                  <span
+                    className={`px-2 py-1 text-xs font-medium rounded-full ${
+                      workflow.state === "active"
+                        ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+                        : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
+                    }`}
+                  >
                     {workflow.state}
                   </span>
                 </div>
@@ -107,7 +120,7 @@ export function WorkflowsSection({ workflows = [], workflowRuns = [] }: Workflow
             Recent Runs
           </h3>
           <div className="space-y-4">
-            {workflowRuns.map(run => (
+            {workflowRuns.map((run) => (
               <div
                 key={run.id}
                 className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg space-y-4"
@@ -122,13 +135,17 @@ export function WorkflowsSection({ workflows = [], workflowRuns = [] }: Workflow
                       <div className="flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400">
                         <GitBranch className="w-4 h-4" />
                         <span>{run.head_branch}</span>
-                        <span className="font-mono">{run.head_sha.substring(0, 7)}</span>
+                        <span className="font-mono">
+                          {run.head_sha.substring(0, 7)}
+                        </span>
                       </div>
                     </div>
                   </div>
                   <div className="flex items-center space-x-3">
                     <div className="text-right">
-                      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusClass(run.status, run.conclusion)}`}>
+                      <span
+                        className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusClass(run.status, run.conclusion)}`}
+                      >
                         {run.conclusion || run.status}
                       </span>
                       <div className="mt-1 flex items-center space-x-1 text-sm text-gray-500 dark:text-gray-400">
@@ -146,7 +163,7 @@ export function WorkflowsSection({ workflows = [], workflowRuns = [] }: Workflow
 
                 {/* Jobs */}
                 <div className="space-y-2">
-                  {run.jobs.map(job => (
+                  {run.jobs.map((job) => (
                     <div
                       key={job.id}
                       className="pl-8 border-l-2 border-gray-200 dark:border-gray-600"
@@ -161,13 +178,13 @@ export function WorkflowsSection({ workflows = [], workflowRuns = [] }: Workflow
                         <div className="text-sm text-gray-500 dark:text-gray-400">
                           {job.completed_at
                             ? `Completed in ${Math.round((new Date(job.completed_at).getTime() - new Date(job.started_at).getTime()) / 1000)}s`
-                            : 'Running...'}
+                            : "Running..."}
                         </div>
                       </div>
 
                       {/* Steps */}
                       <div className="mt-2 space-y-1">
-                        {job.steps.map(step => (
+                        {job.steps.map((step) => (
                           <div
                             key={step.number}
                             className="flex items-center space-x-2 text-sm"
@@ -191,4 +208,4 @@ export function WorkflowsSection({ workflows = [], workflowRuns = [] }: Workflow
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/settings/IntegrationsSettings.tsx b/src/components/settings/IntegrationsSettings.tsx
index 0c13ff5..5561338 100644
--- a/src/components/settings/IntegrationsSettings.tsx
+++ b/src/components/settings/IntegrationsSettings.tsx
@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
-import { Cable } from 'lucide-react';
-import { SettingsCard } from './SettingsCard';
-import { SettingToggle } from './SettingToggle';
-import type { Integration } from '../../types';
+import { ReactNode } from "react";
+import { Cable } from "lucide-react";
+import { SettingsCard } from "./SettingsCard";
+import { SettingToggle } from "./SettingToggle";
+import type { Integration } from "../../types";
 
 interface IntegrationsSettingsProps {
   icon: ReactNode;
@@ -37,82 +37,98 @@ interface IntegrationsSettingsProps {
   onChange: (integration: string, key: string, value: boolean | number) => void;
 }
 
-export function IntegrationsSettings({ icon, integrations, settings, onChange }: IntegrationsSettingsProps) {
-  const hasIntegration = (provider: string) => 
-    integrations.some(i => i.provider === provider && i.status === 'Active');
+export function IntegrationsSettings({
+  icon,
+  integrations,
+  settings,
+  onChange,
+}: IntegrationsSettingsProps) {
+  const hasIntegration = (provider: string) =>
+    integrations.some((i) => i.provider === provider && i.status === "Active");
 
   return (
-    <SettingsCard
-      title="Integration Settings"
-      icon={icon}
-    >
+    <SettingsCard title="Integration Settings" icon={icon}>
       <div className="space-y-8">
         {/* SonarCloud Settings */}
-        {hasIntegration('SonarCloud') && (
+        {hasIntegration("SonarCloud") && (
           <div className="space-y-6">
-            <h3 className="text-lg font-medium text-gray-900 dark:text-white">SonarCloud</h3>
+            <h3 className="text-lg font-medium text-gray-900 dark:text-white">
+              SonarCloud
+            </h3>
             <SettingToggle
               id="sonarcloud_auto_analyze"
               label="Automatic Analysis"
               description="Automatically analyze pull requests when they are created or updated"
               checked={settings.sonarcloud.autoAnalyze}
-              onChange={(checked) => onChange('sonarcloud', 'autoAnalyze', checked)}
+              onChange={(checked) =>
+                onChange("sonarcloud", "autoAnalyze", checked)
+              }
             />
             <SettingToggle
               id="sonarcloud_quality_gate"
               label="Quality Gate Check"
               description="Check quality gate status on pull requests"
               checked={settings.sonarcloud.qualityGate}
-              onChange={(checked) => onChange('sonarcloud', 'qualityGate', checked)}
+              onChange={(checked) =>
+                onChange("sonarcloud", "qualityGate", checked)
+              }
             />
             <SettingToggle
               id="sonarcloud_block_merge"
               label="Block Merge on Failed Quality Gate"
               description="Prevent merging pull requests that don't pass the quality gate"
               checked={settings.sonarcloud.blockMerge}
-              onChange={(checked) => onChange('sonarcloud', 'blockMerge', checked)}
+              onChange={(checked) =>
+                onChange("sonarcloud", "blockMerge", checked)
+              }
             />
           </div>
         )}
 
         {/* Codacy Settings */}
-        {hasIntegration('Codacy') && (
+        {hasIntegration("Codacy") && (
           <div className="space-y-6 pt-6 border-t border-gray-200 dark:border-gray-700">
-            <h3 className="text-lg font-medium text-gray-900 dark:text-white">Codacy</h3>
+            <h3 className="text-lg font-medium text-gray-900 dark:text-white">
+              Codacy
+            </h3>
             <SettingToggle
               id="codacy_auto_analyze"
               label="Automatic Analysis"
               description="Automatically analyze pull requests when they are created or updated"
               checked={settings.codacy.autoAnalyze}
-              onChange={(checked) => onChange('codacy', 'autoAnalyze', checked)}
+              onChange={(checked) => onChange("codacy", "autoAnalyze", checked)}
             />
             <SettingToggle
               id="codacy_quality_gate"
               label="Quality Gate Check"
               description="Check quality gate status on pull requests"
               checked={settings.codacy.qualityGate}
-              onChange={(checked) => onChange('codacy', 'qualityGate', checked)}
+              onChange={(checked) => onChange("codacy", "qualityGate", checked)}
             />
             <SettingToggle
               id="codacy_block_merge"
               label="Block Merge on Failed Quality Gate"
               description="Prevent merging pull requests that don't pass the quality gate"
               checked={settings.codacy.blockMerge}
-              onChange={(checked) => onChange('codacy', 'blockMerge', checked)}
+              onChange={(checked) => onChange("codacy", "blockMerge", checked)}
             />
           </div>
         )}
 
         {/* Codecov Settings */}
-        {hasIntegration('Codecov') && (
+        {hasIntegration("Codecov") && (
           <div className="space-y-6 pt-6 border-t border-gray-200 dark:border-gray-700">
-            <h3 className="text-lg font-medium text-gray-900 dark:text-white">Codecov</h3>
+            <h3 className="text-lg font-medium text-gray-900 dark:text-white">
+              Codecov
+            </h3>
             <SettingToggle
               id="codecov_auto_analyze"
               label="Automatic Analysis"
               description="Automatically analyze coverage on pull requests"
               checked={settings.codecov.autoAnalyze}
-              onChange={(checked) => onChange('codecov', 'autoAnalyze', checked)}
+              onChange={(checked) =>
+                onChange("codecov", "autoAnalyze", checked)
+              }
             />
             <div className="space-y-2">
               <label className="text-sm font-medium text-gray-700 dark:text-gray-200">
@@ -124,7 +140,13 @@ export function IntegrationsSettings({ icon, integrations, settings, onChange }:
                   min="0"
                   max="100"
                   value={settings.codecov.coverageThreshold}
-                  onChange={(e) => onChange('codecov', 'coverageThreshold', parseInt(e.target.value, 10))}
+                  onChange={(e) =>
+                    onChange(
+                      "codecov",
+                      "coverageThreshold",
+                      parseInt(e.target.value, 10),
+                    )
+                  }
                   className="w-20 rounded-md border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500"
                 />
                 <span className="text-gray-500 dark:text-gray-400">%</span>
@@ -138,71 +160,84 @@ export function IntegrationsSettings({ icon, integrations, settings, onChange }:
               label="Block Merge on Low Coverage"
               description="Prevent merging pull requests that don't meet the coverage threshold"
               checked={settings.codecov.blockMerge}
-              onChange={(checked) => onChange('codecov', 'blockMerge', checked)}
+              onChange={(checked) => onChange("codecov", "blockMerge", checked)}
             />
           </div>
         )}
 
         {/* Snyk Settings */}
-        {hasIntegration('Snyk') && (
+        {hasIntegration("Snyk") && (
           <div className="space-y-6 pt-6 border-t border-gray-200 dark:border-gray-700">
-            <h3 className="text-lg font-medium text-gray-900 dark:text-white">Snyk</h3>
+            <h3 className="text-lg font-medium text-gray-900 dark:text-white">
+              Snyk
+            </h3>
             <SettingToggle
               id="snyk_auto_scan"
               label="Automatic Vulnerability Scanning"
               description="Automatically scan pull requests for security vulnerabilities"
               checked={settings.snyk.autoScan}
-              onChange={(checked) => onChange('snyk', 'autoScan', checked)}
+              onChange={(checked) => onChange("snyk", "autoScan", checked)}
             />
             <SettingToggle
               id="snyk_block_high_vulnerabilities"
               label="Block High Severity Vulnerabilities"
               description="Block pull requests with high severity vulnerabilities"
               checked={settings.snyk.blockHighVulnerabilities}
-              onChange={(checked) => onChange('snyk', 'blockHighVulnerabilities', checked)}
+              onChange={(checked) =>
+                onChange("snyk", "blockHighVulnerabilities", checked)
+              }
             />
             <SettingToggle
               id="snyk_block_merge"
               label="Block Merge on Vulnerabilities"
               description="Prevent merging pull requests with security vulnerabilities"
               checked={settings.snyk.blockMerge}
-              onChange={(checked) => onChange('snyk', 'blockMerge', checked)}
+              onChange={(checked) => onChange("snyk", "blockMerge", checked)}
             />
           </div>
         )}
 
         {/* OpenAI Settings */}
-        {hasIntegration('OpenAI') && (
+        {hasIntegration("OpenAI") && (
           <div className="space-y-6 pt-6 border-t border-gray-200 dark:border-gray-700">
-            <h3 className="text-lg font-medium text-gray-900 dark:text-white">OpenAI</h3>
+            <h3 className="text-lg font-medium text-gray-900 dark:text-white">
+              OpenAI
+            </h3>
             <SettingToggle
               id="openai_auto_review"
               label="Automatic Code Review"
               description="Automatically review pull requests using AI"
               checked={settings.openai.autoReview}
-              onChange={(checked) => onChange('openai', 'autoReview', checked)}
+              onChange={(checked) => onChange("openai", "autoReview", checked)}
             />
             <SettingToggle
               id="openai_suggest_fixes"
               label="Suggest Code Fixes"
               description="Suggest code improvements and bug fixes"
               checked={settings.openai.suggestFixes}
-              onChange={(checked) => onChange('openai', 'suggestFixes', checked)}
+              onChange={(checked) =>
+                onChange("openai", "suggestFixes", checked)
+              }
             />
             <SettingToggle
               id="openai_improve_description"
               label="Improve PR Description"
               description="Automatically enhance pull request descriptions"
               checked={settings.openai.improveDescription}
-              onChange={(checked) => onChange('openai', 'improveDescription', checked)}
+              onChange={(checked) =>
+                onChange("openai", "improveDescription", checked)
+              }
             />
           </div>
         )}
 
         {integrations.length === 0 && (
           <div className="text-center py-6 text-gray-500 dark:text-gray-400">
-            No active integrations found. Add integrations in the{' '}
-            <a href="/integrations" className="text-blue-600 dark:text-blue-400 hover:underline">
+            No active integrations found. Add integrations in the{" "}
+            <a
+              href="/integrations"
+              className="text-blue-600 dark:text-blue-400 hover:underline"
+            >
               Integrations page
             </a>
             .
@@ -211,4 +246,4 @@ export function IntegrationsSettings({ icon, integrations, settings, onChange }:
       </div>
     </SettingsCard>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/settings/IssuesSettings.tsx b/src/components/settings/IssuesSettings.tsx
index 89eb86a..f29ff4f 100644
--- a/src/components/settings/IssuesSettings.tsx
+++ b/src/components/settings/IssuesSettings.tsx
@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { SettingsCard } from './SettingsCard';
-import { SettingToggle } from './SettingToggle';
+import { ReactNode } from "react";
+import { SettingsCard } from "./SettingsCard";
+import { SettingToggle } from "./SettingToggle";
 
 interface IssuesSettingsProps {
   icon: ReactNode;
@@ -13,19 +13,22 @@ interface IssuesSettingsProps {
   onChange: (key: string, value: boolean | number) => void;
 }
 
-export function IssuesSettings({ icon, settings, onChange }: IssuesSettingsProps) {
+export function IssuesSettings({
+  icon,
+  settings,
+  onChange,
+}: IssuesSettingsProps) {
   return (
-    <SettingsCard
-      title="Issues Settings"
-      icon={icon}
-    >
+    <SettingsCard title="Issues Settings" icon={icon}>
       <div className="space-y-6">
         <SettingToggle
           id="require_acceptance_criteria_checklist"
           label="Require Acceptance Criteria checklist"
           description="Requires issue description to have an acceptance criteria checklist section"
           checked={settings.requireAcceptanceCriteriaChecklist}
-          onChange={(checked) => onChange('requireAcceptanceCriteriaChecklist', checked)}
+          onChange={(checked) =>
+            onChange("requireAcceptanceCriteriaChecklist", checked)
+          }
         />
 
         <div className="space-y-2">
@@ -34,7 +37,7 @@ export function IssuesSettings({ icon, settings, onChange }: IssuesSettingsProps
             label="Issues Reminder"
             description="Remind the assigned user when the issue has been inactive"
             checked={settings.reminderIssues}
-            onChange={(checked) => onChange('reminderIssues', checked)}
+            onChange={(checked) => onChange("reminderIssues", checked)}
           />
           {settings.reminderIssues && (
             <div className="ml-8 mt-2">
@@ -45,7 +48,9 @@ export function IssuesSettings({ icon, settings, onChange }: IssuesSettingsProps
                   min="1"
                   max="99"
                   value={settings.reminderIssuesDays}
-                  onChange={(e) => onChange('reminderIssuesDays', parseInt(e.target.value, 10))}
+                  onChange={(e) =>
+                    onChange("reminderIssuesDays", parseInt(e.target.value, 10))
+                  }
                   className="w-16 rounded-md border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500"
                 />
                 <span>days of inactivity</span>
@@ -59,9 +64,9 @@ export function IssuesSettings({ icon, settings, onChange }: IssuesSettingsProps
           label="Issues Notification"
           description="Notify me when new issues are created"
           checked={settings.notifyIssues}
-          onChange={(checked) => onChange('notifyIssues', checked)}
+          onChange={(checked) => onChange("notifyIssues", checked)}
         />
       </div>
     </SettingsCard>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/settings/PullRequestsSettings.tsx b/src/components/settings/PullRequestsSettings.tsx
index da09189..d67c0c3 100644
--- a/src/components/settings/PullRequestsSettings.tsx
+++ b/src/components/settings/PullRequestsSettings.tsx
@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { SettingsCard } from './SettingsCard';
-import { SettingToggle } from './SettingToggle';
+import { ReactNode } from "react";
+import { SettingsCard } from "./SettingsCard";
+import { SettingToggle } from "./SettingToggle";
 
 interface PullRequestsSettingsProps {
   icon: ReactNode;
@@ -14,12 +14,13 @@ interface PullRequestsSettingsProps {
   onChange: (key: string, value: boolean | number) => void;
 }
 
-export function PullRequestsSettings({ icon, settings, onChange }: PullRequestsSettingsProps) {
+export function PullRequestsSettings({
+  icon,
+  settings,
+  onChange,
+}: PullRequestsSettingsProps) {
   return (
-    <SettingsCard
-      title="Pull Requests Settings"
-      icon={icon}
-    >
+    <SettingsCard title="Pull Requests Settings" icon={icon}>
       <div className="space-y-6">
         <SettingToggle
           id="pr_template_description"
@@ -27,7 +28,7 @@ export function PullRequestsSettings({ icon, settings, onChange }: PullRequestsS
           description="Automatically add a description to pull requests based on a predefined template"
           note="This action will only be applied if the pull request description is empty"
           checked={settings.prTemplateDescription}
-          onChange={(checked) => onChange('prTemplateDescription', checked)}
+          onChange={(checked) => onChange("prTemplateDescription", checked)}
         />
 
         <SettingToggle
@@ -35,7 +36,7 @@ export function PullRequestsSettings({ icon, settings, onChange }: PullRequestsS
           label="Auto Approval Pull Request"
           description="Automatically approve the pull request if no issues are found"
           checked={settings.autoReviewPr}
-          onChange={(checked) => onChange('autoReviewPr', checked)}
+          onChange={(checked) => onChange("autoReviewPr", checked)}
         />
 
         <SettingToggle
@@ -43,7 +44,7 @@ export function PullRequestsSettings({ icon, settings, onChange }: PullRequestsS
           label="Enable Auto-Merge"
           description="Automatically merge pull requests when all checks pass from trusted senders"
           checked={settings.autoMergePr}
-          onChange={(checked) => onChange('autoMergePr', checked)}
+          onChange={(checked) => onChange("autoMergePr", checked)}
         />
 
         <SettingToggle
@@ -51,12 +52,12 @@ export function PullRequestsSettings({ icon, settings, onChange }: PullRequestsS
           label="Create issues for pending tasks in code comments"
           description="Automatically create issues for specific keywords found in pull request content"
           badges={[
-            { text: 'Fixme', icon: 'wrench' },
-            { text: 'Todo', icon: 'tasks' },
-            { text: 'Bug', icon: 'bug' }
+            { text: "Fixme", icon: "wrench" },
+            { text: "Todo", icon: "tasks" },
+            { text: "Bug", icon: "bug" },
           ]}
           checked={settings.createIssue}
-          onChange={(checked) => onChange('createIssue', checked)}
+          onChange={(checked) => onChange("createIssue", checked)}
         />
 
         <SettingToggle
@@ -64,9 +65,9 @@ export function PullRequestsSettings({ icon, settings, onChange }: PullRequestsS
           label="Pull Requests Notification"
           description="Notify me when new pull requests are created"
           checked={settings.notifyPullRequests}
-          onChange={(checked) => onChange('notifyPullRequests', checked)}
+          onChange={(checked) => onChange("notifyPullRequests", checked)}
         />
       </div>
     </SettingsCard>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/settings/RepositorySettings.tsx b/src/components/settings/RepositorySettings.tsx
index e6789e1..d3250cd 100644
--- a/src/components/settings/RepositorySettings.tsx
+++ b/src/components/settings/RepositorySettings.tsx
@@ -1,41 +1,45 @@
-import { ReactNode } from 'react';
-import { SettingsCard } from './SettingsCard';
-import { SettingToggle } from './SettingToggle';
-import type { DependabotFrequency, RepositorySettings } from '../../types';
+import { ReactNode } from "react";
+import { SettingsCard } from "./SettingsCard";
+import { SettingToggle } from "./SettingToggle";
+import type { DependabotFrequency, RepositorySettings } from "../../types";
 
 interface RepositorySettingsProps {
   icon: ReactNode;
   settings: RepositorySettings;
-  onChange: (key: keyof RepositorySettings, value: boolean | DependabotFrequency) => void;
+  onChange: (
+    key: keyof RepositorySettings,
+    value: boolean | DependabotFrequency,
+  ) => void;
 }
 
-export function RepositorySettings({ icon, settings, onChange }: RepositorySettingsProps) {
+export function RepositorySettings({
+  icon,
+  settings,
+  onChange,
+}: RepositorySettingsProps) {
   const handleMainRulesetChange = (checked: boolean) => {
-    onChange('createMainBranchRuleset', checked);
-    onChange('rulesetBotChecks', checked);
-    onChange('rulesetUpdatedBranch', checked);
-    onChange('rulesetRequiredReviewers', checked);
-    onChange('rulesetResolveConversations', checked);
+    onChange("createMainBranchRuleset", checked);
+    onChange("rulesetBotChecks", checked);
+    onChange("rulesetUpdatedBranch", checked);
+    onChange("rulesetRequiredReviewers", checked);
+    onChange("rulesetResolveConversations", checked);
   };
 
-  const isAllRulesetOptionsEnabled = 
+  const isAllRulesetOptionsEnabled =
     settings.rulesetBotChecks &&
     settings.rulesetUpdatedBranch &&
     settings.rulesetRequiredReviewers &&
     settings.rulesetResolveConversations;
 
   return (
-    <SettingsCard
-      title="Repository Settings"
-      icon={icon}
-    >
+    <SettingsCard title="Repository Settings" icon={icon}>
       <div className="space-y-6">
         <SettingToggle
           id="create_labels"
           label="Create labels on new repository"
           description="Automatically create labels on new repositories"
           checked={settings.createLabels}
-          onChange={(checked) => onChange('createLabels', checked)}
+          onChange={(checked) => onChange("createLabels", checked)}
         />
 
         <div className="space-y-4">
@@ -54,7 +58,7 @@ export function RepositorySettings({ icon, settings, onChange }: RepositorySetti
               label="Require bot check runs"
               description="Require all bot check runs to pass before merging"
               checked={settings.rulesetBotChecks}
-              onChange={(checked) => onChange('rulesetBotChecks', checked)}
+              onChange={(checked) => onChange("rulesetBotChecks", checked)}
               disabled={!settings.createMainBranchRuleset}
             />
 
@@ -63,7 +67,7 @@ export function RepositorySettings({ icon, settings, onChange }: RepositorySetti
               label="Require updated branch"
               description="Ensure the branch is up to date with the main branch before merging"
               checked={settings.rulesetUpdatedBranch}
-              onChange={(checked) => onChange('rulesetUpdatedBranch', checked)}
+              onChange={(checked) => onChange("rulesetUpdatedBranch", checked)}
               disabled={!settings.createMainBranchRuleset}
             />
 
@@ -72,7 +76,9 @@ export function RepositorySettings({ icon, settings, onChange }: RepositorySetti
               label="Require reviewers"
               description="Require at least one approved review before merging"
               checked={settings.rulesetRequiredReviewers}
-              onChange={(checked) => onChange('rulesetRequiredReviewers', checked)}
+              onChange={(checked) =>
+                onChange("rulesetRequiredReviewers", checked)
+              }
               disabled={!settings.createMainBranchRuleset}
             />
 
@@ -81,7 +87,9 @@ export function RepositorySettings({ icon, settings, onChange }: RepositorySetti
               label="Resolve conversations"
               description="Require all conversations to be resolved before merging"
               checked={settings.rulesetResolveConversations}
-              onChange={(checked) => onChange('rulesetResolveConversations', checked)}
+              onChange={(checked) =>
+                onChange("rulesetResolveConversations", checked)
+              }
               disabled={!settings.createMainBranchRuleset}
             />
           </div>
@@ -93,7 +101,7 @@ export function RepositorySettings({ icon, settings, onChange }: RepositorySetti
             label="Create Dependabot configuration"
             description="Automatically create dependabot.yml file for detected technologies"
             checked={settings.createDependabotFile}
-            onChange={(checked) => onChange('createDependabotFile', checked)}
+            onChange={(checked) => onChange("createDependabotFile", checked)}
           />
 
           {settings.createDependabotFile && (
@@ -103,7 +111,12 @@ export function RepositorySettings({ icon, settings, onChange }: RepositorySetti
               </label>
               <select
                 value={settings.dependabotFrequency}
-                onChange={(e) => onChange('dependabotFrequency', e.target.value as DependabotFrequency)}
+                onChange={(e) =>
+                  onChange(
+                    "dependabotFrequency",
+                    e.target.value as DependabotFrequency,
+                  )
+                }
                 className="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500"
               >
                 <option value="daily">Daily</option>
@@ -119,7 +132,7 @@ export function RepositorySettings({ icon, settings, onChange }: RepositorySetti
           label="Create secrets scanning workflow"
           description="Automatically create GitHub Actions workflow for secrets scanning using Infisical"
           checked={settings.createSecretsWorkflow}
-          onChange={(checked) => onChange('createSecretsWorkflow', checked)}
+          onChange={(checked) => onChange("createSecretsWorkflow", checked)}
         />
 
         <SettingToggle
@@ -127,9 +140,9 @@ export function RepositorySettings({ icon, settings, onChange }: RepositorySetti
           label="Create linters workflow"
           description="Automatically create GitHub Actions workflow for linting based on repository technology"
           checked={settings.createLintersWorkflow}
-          onChange={(checked) => onChange('createLintersWorkflow', checked)}
+          onChange={(checked) => onChange("createLintersWorkflow", checked)}
         />
       </div>
     </SettingsCard>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/settings/SettingToggle.tsx b/src/components/settings/SettingToggle.tsx
index 211669d..95a73ce 100644
--- a/src/components/settings/SettingToggle.tsx
+++ b/src/components/settings/SettingToggle.tsx
@@ -1,8 +1,8 @@
-import { Wrench, ListTodo, Bug } from 'lucide-react';
+import { Wrench, ListTodo, Bug } from "lucide-react";
 
 interface Badge {
   text: string;
-  icon: 'wrench' | 'tasks' | 'bug';
+  icon: "wrench" | "tasks" | "bug";
 }
 
 interface SettingToggleProps {
@@ -17,13 +17,13 @@ interface SettingToggleProps {
   forceActive?: boolean;
 }
 
-const BadgeIcon = ({ icon }: { icon: Badge['icon'] }) => {
+const BadgeIcon = ({ icon }: { icon: Badge["icon"] }) => {
   switch (icon) {
-    case 'wrench':
+    case "wrench":
       return <Wrench className="w-3 h-3" />;
-    case 'tasks':
+    case "tasks":
       return <ListTodo className="w-3 h-3" />;
-    case 'bug':
+    case "bug":
       return <Bug className="w-3 h-3" />;
   }
 };
@@ -37,13 +37,17 @@ export function SettingToggle({
   note,
   badges,
   disabled = false,
-  forceActive = false
+  forceActive = false,
 }: SettingToggleProps) {
   return (
-    <div className={`flex items-start space-x-4 ${disabled ? 'opacity-50' : ''}`}>
+    <div
+      className={`flex items-start space-x-4 ${disabled ? "opacity-50" : ""}`}
+    >
       <div className="flex-1">
         <label htmlFor={id} className="flex items-center space-x-2">
-          <span className="font-medium text-gray-900 dark:text-white">{label}</span>
+          <span className="font-medium text-gray-900 dark:text-white">
+            {label}
+          </span>
           {badges && (
             <div className="flex items-center space-x-2">
               {badges.map((badge) => (
@@ -58,9 +62,13 @@ export function SettingToggle({
             </div>
           )}
         </label>
-        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{description}</p>
+        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+          {description}
+        </p>
         {note && (
-          <p className="mt-1 text-sm text-gray-400 dark:text-gray-500 italic">{note}</p>
+          <p className="mt-1 text-sm text-gray-400 dark:text-gray-500 italic">
+            {note}
+          </p>
         )}
       </div>
       <div className="flex-shrink-0">
@@ -73,11 +81,15 @@ export function SettingToggle({
             onChange={(e) => onChange(e.target.checked)}
             disabled={disabled}
           />
-          <div className={`w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 ${
-            forceActive ? 'peer-checked:bg-green-600' : 'peer-checked:bg-blue-600'
-          }`}></div>
+          <div
+            className={`w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 ${
+              forceActive
+                ? "peer-checked:bg-green-600"
+                : "peer-checked:bg-blue-600"
+            }`}
+          ></div>
         </label>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/settings/SettingsCard.tsx b/src/components/settings/SettingsCard.tsx
index ddeb98e..cb7a5f1 100644
--- a/src/components/settings/SettingsCard.tsx
+++ b/src/components/settings/SettingsCard.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
 
 interface SettingsCardProps {
   title: string;
@@ -12,10 +12,12 @@ export function SettingsCard({ title, icon, children }: SettingsCardProps) {
       <div className="p-6">
         <div className="flex items-center space-x-4 mb-6">
           <div className="text-gray-400">{icon}</div>
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">{title}</h2>
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+            {title}
+          </h2>
         </div>
         {children}
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/settings/TrustedSendersSettings.tsx b/src/components/settings/TrustedSendersSettings.tsx
index baed579..fa097cb 100644
--- a/src/components/settings/TrustedSendersSettings.tsx
+++ b/src/components/settings/TrustedSendersSettings.tsx
@@ -1,7 +1,7 @@
-import { ReactNode, useState } from 'react';
-import { SettingsCard } from './SettingsCard';
-import { TokenSelect } from '../TokenSelect';
-import { Bot, Plus, Trash2 } from 'lucide-react';
+import { ReactNode, useState } from "react";
+import { SettingsCard } from "./SettingsCard";
+import { TokenSelect } from "../TokenSelect";
+import { Bot, Plus, Trash2 } from "lucide-react";
 
 interface TrustedSender {
   login: string;
@@ -19,21 +19,26 @@ interface TrustedSendersSettingsProps {
 
 const defaultTrustedSenders: TrustedSender[] = [
   {
-    login: 'dependabot[bot]',
-    name: 'Dependabot',
-    avatar_url: 'https://github.com/dependabot.png',
-    added_at: '2024-01-01T00:00:00Z'
+    login: "dependabot[bot]",
+    name: "Dependabot",
+    avatar_url: "https://github.com/dependabot.png",
+    added_at: "2024-01-01T00:00:00Z",
   },
   {
-    login: 'depfu[bot]',
-    name: 'Depfu',
-    avatar_url: 'https://github.com/depfu.png',
-    added_at: '2024-01-01T00:00:00Z'
-  }
+    login: "depfu[bot]",
+    name: "Depfu",
+    avatar_url: "https://github.com/depfu.png",
+    added_at: "2024-01-01T00:00:00Z",
+  },
 ];
 
-export function TrustedSendersSettings({ icon, trustedSenders, onAdd, onRemove }: TrustedSendersSettingsProps) {
-  const [newSenderLogin, setNewSenderLogin] = useState('');
+export function TrustedSendersSettings({
+  icon,
+  trustedSenders,
+  onAdd,
+  onRemove,
+}: TrustedSendersSettingsProps) {
+  const [newSenderLogin, setNewSenderLogin] = useState("");
   const [isAdding, setIsAdding] = useState(false);
 
   const handleAdd = async () => {
@@ -41,7 +46,7 @@ export function TrustedSendersSettings({ icon, trustedSenders, onAdd, onRemove }
     setIsAdding(true);
     try {
       await onAdd(newSenderLogin);
-      setNewSenderLogin('');
+      setNewSenderLogin("");
     } finally {
       setIsAdding(false);
     }
@@ -50,19 +55,20 @@ export function TrustedSendersSettings({ icon, trustedSenders, onAdd, onRemove }
   const allTrustedSenders = [...defaultTrustedSenders, ...trustedSenders];
 
   return (
-    <SettingsCard
-      title="Trusted Pull Request Senders"
-      icon={icon}
-    >
+    <SettingsCard title="Trusted Pull Request Senders" icon={icon}>
       <div className="space-y-6">
         <p className="text-sm text-gray-500 dark:text-gray-400">
-          Pull requests from these senders will be automatically reviewed and merged if all checks pass.
+          Pull requests from these senders will be automatically reviewed and
+          merged if all checks pass.
         </p>
 
         {/* Add New Sender */}
         <div className="flex items-end gap-4">
           <div className="flex-1">
-            <label htmlFor="new_sender" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+            <label
+              htmlFor="new_sender"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+            >
               Add New Trusted Sender
             </label>
             <input
@@ -88,7 +94,10 @@ export function TrustedSendersSettings({ icon, trustedSenders, onAdd, onRemove }
         {/* Trusted Senders List */}
         <div className="divide-y divide-gray-200 dark:divide-gray-700">
           {allTrustedSenders.map((sender) => (
-            <div key={sender.login} className="py-4 flex items-center justify-between">
+            <div
+              key={sender.login}
+              className="py-4 flex items-center justify-between"
+            >
               <div className="flex items-center space-x-3">
                 <img
                   src={sender.avatar_url}
@@ -100,7 +109,7 @@ export function TrustedSendersSettings({ icon, trustedSenders, onAdd, onRemove }
                     <span className="font-medium text-gray-900 dark:text-white">
                       {sender.name || sender.login}
                     </span>
-                    {sender.login.endsWith('[bot]') && (
+                    {sender.login.endsWith("[bot]") && (
                       <Bot className="w-4 h-4 text-gray-400" />
                     )}
                   </div>
@@ -124,4 +133,4 @@ export function TrustedSendersSettings({ icon, trustedSenders, onAdd, onRemove }
       </div>
     </SettingsCard>
   );
-}
\ No newline at end of file
+}
diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
index 05e3e7c..9c541db 100644
--- a/src/context/AuthContext.tsx
+++ b/src/context/AuthContext.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, ReactNode } from 'react';
+import React, { createContext, useContext, useState, ReactNode } from "react";
 
 interface AuthContextType {
   isAuthenticated: boolean;
@@ -24,7 +24,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 export function useAuth() {
   const context = useContext(AuthContext);
   if (context === undefined) {
-    throw new Error('useAuth must be used within an AuthProvider');
+    throw new Error("useAuth must be used within an AuthProvider");
   }
   return context;
-}
\ No newline at end of file
+}
diff --git a/src/index.css b/src/index.css
index 8c849e0..9fbf383 100644
--- a/src/index.css
+++ b/src/index.css
@@ -6,29 +6,29 @@
   .scrollbar-thin {
     scrollbar-width: thin;
   }
-  
+
   .scrollbar-thumb-gray-300::-webkit-scrollbar-thumb {
-    background-color: #D1D5DB;
+    background-color: #d1d5db;
     border-radius: 6px;
   }
-  
+
   .dark .scrollbar-thumb-gray-600::-webkit-scrollbar-thumb {
-    background-color: #4B5563;
+    background-color: #4b5563;
   }
-  
+
   .scrollbar-track-transparent::-webkit-scrollbar-track {
     background-color: transparent;
   }
-  
+
   ::-webkit-scrollbar {
     width: 6px;
   }
-  
+
   ::-webkit-scrollbar-track {
     background-color: transparent;
   }
-  
+
   ::-webkit-scrollbar-thumb {
     border-radius: 6px;
   }
-}
\ No newline at end of file
+}
diff --git a/src/layouts/AuthenticatedLayout.tsx b/src/layouts/AuthenticatedLayout.tsx
index 05653f9..93d5b83 100644
--- a/src/layouts/AuthenticatedLayout.tsx
+++ b/src/layouts/AuthenticatedLayout.tsx
@@ -1,13 +1,13 @@
-import { Outlet } from 'react-router-dom';
-import { Header } from '../components/Header';
-import { Footer } from '../components/Footer';
-import { mockUser } from '../mockData';
+import { Outlet } from "react-router-dom";
+import { Header } from "../components/Header";
+import { Footer } from "../components/Footer";
+import { mockUser } from "../mockData";
 
 export function AuthenticatedLayout() {
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col">
       <Header user={mockUser} />
-      
+
       <main className="flex-1">
         <Outlet />
       </main>
@@ -15,4 +15,4 @@ export function AuthenticatedLayout() {
       <Footer />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx
index 1f0def9..fc1e9dd 100644
--- a/src/layouts/PublicLayout.tsx
+++ b/src/layouts/PublicLayout.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom';
+import { Outlet } from "react-router-dom";
 
 export function PublicLayout() {
   return (
@@ -6,4 +6,4 @@ export function PublicLayout() {
       <Outlet />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/main.tsx b/src/main.tsx
index ea9e363..ef474bf 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,10 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './App.tsx';
-import './index.css';
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
-  </StrictMode>
+  </StrictMode>,
 );
diff --git a/src/mockData.ts b/src/mockData.ts
index d0cf0fd..13a6e5d 100644
--- a/src/mockData.ts
+++ b/src/mockData.ts
@@ -1,494 +1,511 @@
-import { Activity, Issue, PendingAction, PullRequest, Repository, User, Notification, Installation, FIDODevice, AvailableOrganization, Provider } from './types';
+import {
+  Activity,
+  Issue,
+  PendingAction,
+  PullRequest,
+  Repository,
+  User,
+  Notification,
+  Installation,
+  FIDODevice,
+  AvailableOrganization,
+  Provider,
+} from "./types";
 
 export const mockUser: User = {
-  login: 'johndoe',
-  name: 'John Doe',
-  first_name: 'John',
-  last_name: 'Doe',
-  avatar_url: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=100&h=100&fit=crop',
-  html_url: 'https://github.com/johndoe',
-  github_id: '12345678',
-  github_email: 'john.doe@github.com',
-  communications_email: 'john.doe@example.com',
+  login: "johndoe",
+  name: "John Doe",
+  first_name: "John",
+  last_name: "Doe",
+  avatar_url:
+    "https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=100&h=100&fit=crop",
+  html_url: "https://github.com/johndoe",
+  github_id: "12345678",
+  github_email: "john.doe@github.com",
+  communications_email: "john.doe@example.com",
   has_2fa: true,
   has_password: true,
   recovery_codes: [
-    'abcd-efgh-ijkl-mnop',
-    'qrst-uvwx-yzab-cdef',
-    'ghij-klmn-opqr-stuv',
-    'wxyz-abcd-efgh-ijkl',
-    'mnop-qrst-uvwx-yzab',
-    'cdef-ghij-klmn-opqr',
-    'stuv-wxyz-abcd-efgh',
-    'ijkl-mnop-qrst-uvwx',
-    'yzab-cdef-ghij-klmn',
-    'opqr-stuv-wxyz-abcd'
+    "abcd-efgh-ijkl-mnop",
+    "qrst-uvwx-yzab-cdef",
+    "ghij-klmn-opqr-stuv",
+    "wxyz-abcd-efgh-ijkl",
+    "mnop-qrst-uvwx-yzab",
+    "cdef-ghij-klmn-opqr",
+    "stuv-wxyz-abcd-efgh",
+    "ijkl-mnop-qrst-uvwx",
+    "yzab-cdef-ghij-klmn",
+    "opqr-stuv-wxyz-abcd",
   ],
   fido_devices: [
     {
-      id: '1',
-      name: 'YubiKey 5C',
-      added_at: '2024-01-15T10:30:00Z',
-      last_used_at: '2024-03-10T15:45:00Z'
+      id: "1",
+      name: "YubiKey 5C",
+      added_at: "2024-01-15T10:30:00Z",
+      last_used_at: "2024-03-10T15:45:00Z",
     },
     {
-      id: '2',
-      name: 'Security Key by Yubico',
-      added_at: '2023-11-20T09:15:00Z',
-      last_used_at: '2024-03-09T11:20:00Z'
-    }
-  ]
+      id: "2",
+      name: "Security Key by Yubico",
+      added_at: "2023-11-20T09:15:00Z",
+      last_used_at: "2024-03-09T11:20:00Z",
+    },
+  ],
 };
 
 export const mockInstallations: Installation[] = [
   {
-    id: '1',
+    id: "1",
     account: {
-      login: 'facebook',
-      name: 'Meta',
-      avatar_url: 'https://github.com/facebook.png',
-      type: 'Organization'
+      login: "facebook",
+      name: "Meta",
+      avatar_url: "https://github.com/facebook.png",
+      type: "Organization",
     },
     repositories_count: 45,
-    created_at: '2023-01-15T10:30:00Z',
-    updated_at: '2024-03-10T15:45:00Z'
+    created_at: "2023-01-15T10:30:00Z",
+    updated_at: "2024-03-10T15:45:00Z",
   },
   {
-    id: '2',
+    id: "2",
     account: {
-      login: 'vercel',
-      name: 'Vercel',
-      avatar_url: 'https://github.com/vercel.png',
-      type: 'Organization'
+      login: "vercel",
+      name: "Vercel",
+      avatar_url: "https://github.com/vercel.png",
+      type: "Organization",
     },
     repositories_count: 12,
-    created_at: '2023-06-20T09:15:00Z',
-    updated_at: '2024-03-09T11:20:00Z'
+    created_at: "2023-06-20T09:15:00Z",
+    updated_at: "2024-03-09T11:20:00Z",
   },
   {
-    id: '3',
+    id: "3",
     account: {
-      login: 'johndoe',
-      name: 'John Doe',
-      avatar_url: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=100&h=100&fit=crop',
-      type: 'User'
+      login: "johndoe",
+      name: "John Doe",
+      avatar_url:
+        "https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=100&h=100&fit=crop",
+      type: "User",
     },
     repositories_count: 8,
-    created_at: '2023-08-10T14:25:00Z',
-    updated_at: '2024-03-08T16:30:00Z'
-  }
+    created_at: "2023-08-10T14:25:00Z",
+    updated_at: "2024-03-08T16:30:00Z",
+  },
 ];
 
 export const mockAvailableOrganizations: AvailableOrganization[] = [
   {
-    login: 'microsoft',
-    name: 'Microsoft',
-    avatar_url: 'https://github.com/microsoft.png',
-    description: 'Open source projects and samples from Microsoft',
+    login: "microsoft",
+    name: "Microsoft",
+    avatar_url: "https://github.com/microsoft.png",
+    description: "Open source projects and samples from Microsoft",
     members_count: 5420,
-    repositories_count: 876
+    repositories_count: 876,
   },
   {
-    login: 'google',
-    name: 'Google',
-    avatar_url: 'https://github.com/google.png',
-    description: 'Google ❤️ Open Source',
+    login: "google",
+    name: "Google",
+    avatar_url: "https://github.com/google.png",
+    description: "Google ❤️ Open Source",
     members_count: 3250,
-    repositories_count: 654
+    repositories_count: 654,
   },
   {
-    login: 'aws',
-    name: 'Amazon Web Services',
-    avatar_url: 'https://github.com/aws.png',
-    description: 'Official AWS open-source repositories',
+    login: "aws",
+    name: "Amazon Web Services",
+    avatar_url: "https://github.com/aws.png",
+    description: "Official AWS open-source repositories",
     members_count: 2180,
-    repositories_count: 432
-  }
+    repositories_count: 432,
+  },
 ];
 
 const mockSenders = [
   {
-    login: 'alice',
-    name: 'Alice Johnson',
-    avatar_url: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop',
-    html_url: 'https://github.com/alice'
+    login: "alice",
+    name: "Alice Johnson",
+    avatar_url:
+      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop",
+    html_url: "https://github.com/alice",
   },
   {
-    login: 'bob',
-    name: 'Bob Smith',
-    avatar_url: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=100&h=100&fit=crop',
-    html_url: 'https://github.com/bob'
+    login: "bob",
+    name: "Bob Smith",
+    avatar_url:
+      "https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=100&h=100&fit=crop",
+    html_url: "https://github.com/bob",
   },
   {
-    login: 'carol',
-    name: 'Carol Williams',
-    avatar_url: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop',
-    html_url: 'https://github.com/carol'
-  }
+    login: "carol",
+    name: "Carol Williams",
+    avatar_url:
+      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop",
+    html_url: "https://github.com/carol",
+  },
 ];
 
 export const mockNotifications: Notification[] = [
   {
-    id: '1',
-    type: 'pr_review',
-    title: 'Review requested: Add authentication system',
-    description: 'Your review has been requested on pull request #45',
-    repository: 'repo1',
-    full_name: 'org/repo1',
-    created_at: '2024-03-10T10:30:00Z',
+    id: "1",
+    type: "pr_review",
+    title: "Review requested: Add authentication system",
+    description: "Your review has been requested on pull request #45",
+    repository: "repo1",
+    full_name: "org/repo1",
+    created_at: "2024-03-10T10:30:00Z",
     read: false,
-    url: 'https://github.com/org/repo1/pull/45',
+    url: "https://github.com/org/repo1/pull/45",
     sender: mockSenders[0],
-    priority: 'high'
+    priority: "high",
   },
   {
-    id: '2',
-    type: 'issue_mention',
-    title: 'Mentioned in: Update API documentation',
-    description: '@johndoe please review the API changes',
-    repository: 'repo2',
-    full_name: 'org/repo2',
-    created_at: '2024-03-09T15:20:00Z',
+    id: "2",
+    type: "issue_mention",
+    title: "Mentioned in: Update API documentation",
+    description: "@johndoe please review the API changes",
+    repository: "repo2",
+    full_name: "org/repo2",
+    created_at: "2024-03-09T15:20:00Z",
     read: false,
-    url: 'https://github.com/org/repo2/issues/12',
-    sender: mockSenders[1]
+    url: "https://github.com/org/repo2/issues/12",
+    sender: mockSenders[1],
   },
   {
-    id: '3',
-    type: 'pr_merged',
-    title: 'Pull request merged: Fix memory leak',
-    description: 'Pull request #44 has been merged',
-    repository: 'repo2',
-    full_name: 'org/repo2',
-    created_at: '2024-03-08T09:15:00Z',
+    id: "3",
+    type: "pr_merged",
+    title: "Pull request merged: Fix memory leak",
+    description: "Pull request #44 has been merged",
+    repository: "repo2",
+    full_name: "org/repo2",
+    created_at: "2024-03-08T09:15:00Z",
     read: true,
-    url: 'https://github.com/org/repo2/pull/44',
-    sender: mockSenders[2]
+    url: "https://github.com/org/repo2/pull/44",
+    sender: mockSenders[2],
   },
   {
-    id: '4',
-    type: 'security_alert',
-    title: 'Security vulnerability found',
-    description: 'Critical vulnerability detected in dependency: lodash',
-    repository: 'repo1',
-    full_name: 'org/repo1',
-    created_at: '2024-03-07T14:45:00Z',
+    id: "4",
+    type: "security_alert",
+    title: "Security vulnerability found",
+    description: "Critical vulnerability detected in dependency: lodash",
+    repository: "repo1",
+    full_name: "org/repo1",
+    created_at: "2024-03-07T14:45:00Z",
     read: false,
-    url: 'https://github.com/org/repo1/security/alerts/1',
+    url: "https://github.com/org/repo1/security/alerts/1",
     sender: mockSenders[0],
-    priority: 'high'
+    priority: "high",
   },
   {
-    id: '5',
-    type: 'issue_assigned',
-    title: 'Assigned to issue: Update documentation',
-    description: 'You have been assigned to issue #15',
-    repository: 'repo3',
-    full_name: 'org/repo3',
-    created_at: '2024-03-06T11:30:00Z',
+    id: "5",
+    type: "issue_assigned",
+    title: "Assigned to issue: Update documentation",
+    description: "You have been assigned to issue #15",
+    repository: "repo3",
+    full_name: "org/repo3",
+    created_at: "2024-03-06T11:30:00Z",
     read: true,
-    url: 'https://github.com/org/repo3/issues/15',
-    sender: mockSenders[1]
-  }
+    url: "https://github.com/org/repo3/issues/15",
+    sender: mockSenders[1],
+  },
 ];
 
 export const mockPullRequests: PullRequest[] = [
   {
-    url: 'https://github.com/org/repo1/pull/45',
-    title: 'Feature: Add new authentication system',
-    repository: 'repo1',
-    full_name: 'org/repo1',
-    created_at: '2024-03-10T10:30:00Z',
-    state: 'success',
-    sender: mockSenders[0]
-  },
-  {
-    url: 'https://github.com/org/repo2/pull/44',
-    title: 'Fix: Resolve memory leak in worker process',
-    repository: 'repo2',
-    full_name: 'org/repo2',
-    created_at: '2024-03-09T15:20:00Z',
-    state: 'pending',
-    sender: mockSenders[1]
-  },
-  {
-    url: 'https://github.com/org2/repo3/pull/43',
-    title: 'Docs: Update API documentation',
-    repository: 'repo3',
-    full_name: 'org2/repo3',
-    created_at: '2024-03-08T09:15:00Z',
-    state: 'failure',
-    sender: mockSenders[2]
-  }
+    url: "https://github.com/org/repo1/pull/45",
+    title: "Feature: Add new authentication system",
+    repository: "repo1",
+    full_name: "org/repo1",
+    created_at: "2024-03-10T10:30:00Z",
+    state: "success",
+    sender: mockSenders[0],
+  },
+  {
+    url: "https://github.com/org/repo2/pull/44",
+    title: "Fix: Resolve memory leak in worker process",
+    repository: "repo2",
+    full_name: "org/repo2",
+    created_at: "2024-03-09T15:20:00Z",
+    state: "pending",
+    sender: mockSenders[1],
+  },
+  {
+    url: "https://github.com/org2/repo3/pull/43",
+    title: "Docs: Update API documentation",
+    repository: "repo3",
+    full_name: "org2/repo3",
+    created_at: "2024-03-08T09:15:00Z",
+    state: "failure",
+    sender: mockSenders[2],
+  },
 ];
 
 export const mockIssues: Issue[] = [
   {
-    url: 'https://github.com/org/repo1/issues/10',
-    title: 'Bug: Server crashes under heavy load',
-    repository: 'repo1',
-    full_name: 'org/repo1',
-    created_at: '2024-03-10T08:45:00Z',
-    sender: mockSenders[0]
-  },
-  {
-    url: 'https://github.com/org/repo2/issues/11',
-    title: 'Enhancement: Add dark mode support',
-    repository: 'repo2',
-    full_name: 'org/repo2',
-    created_at: '2024-03-09T14:30:00Z',
-    sender: mockSenders[1]
-  },
-  {
-    url: 'https://github.com/org/repo3/issues/12',
-    title: 'Feature Request: Email notifications',
-    repository: 'repo3',
-    full_name: 'org/repo3',
-    created_at: '2024-03-08T11:20:00Z',
-    sender: mockSenders[2]
-  }
+    url: "https://github.com/org/repo1/issues/10",
+    title: "Bug: Server crashes under heavy load",
+    repository: "repo1",
+    full_name: "org/repo1",
+    created_at: "2024-03-10T08:45:00Z",
+    sender: mockSenders[0],
+  },
+  {
+    url: "https://github.com/org/repo2/issues/11",
+    title: "Enhancement: Add dark mode support",
+    repository: "repo2",
+    full_name: "org/repo2",
+    created_at: "2024-03-09T14:30:00Z",
+    sender: mockSenders[1],
+  },
+  {
+    url: "https://github.com/org/repo3/issues/12",
+    title: "Feature Request: Email notifications",
+    repository: "repo3",
+    full_name: "org/repo3",
+    created_at: "2024-03-08T11:20:00Z",
+    sender: mockSenders[2],
+  },
 ];
 
 export const mockActivities: Activity[] = [
   {
-    id: '1',
-    type: 'pr_created',
-    description: 'Created PR #45 in repo1',
-    repository: 'repo1',
-    timestamp: '2024-03-10T10:30:00Z',
-    sender: mockSenders[0]
-  },
-  {
-    id: '2',
-    type: 'pr_merged',
-    description: 'Merged PR #44 in repo2',
-    repository: 'repo2',
-    timestamp: '2024-03-09T15:20:00Z',
-    sender: mockSenders[1]
-  },
-  {
-    id: '3',
-    type: 'issue_closed',
-    description: 'Closed issue #10 in repo1',
-    repository: 'repo1',
-    timestamp: '2024-03-08T09:15:00Z',
-    sender: mockSenders[2]
-  },
-  {
-    id: '4',
-    type: 'commits_analyzed',
-    description: 'Analyzed commits in repo3',
-    repository: 'repo3',
-    timestamp: '2024-03-07T14:45:00Z',
-    sender: mockSenders[0]
-  },
-  {
-    id: '5',
-    type: 'pr_opened',
-    description: 'Opened PR #12 in repo2',
-    repository: 'repo2',
-    timestamp: '2024-03-06T11:30:00Z',
-    sender: mockSenders[1]
-  }
+    id: "1",
+    type: "pr_created",
+    description: "Created PR #45 in repo1",
+    repository: "repo1",
+    timestamp: "2024-03-10T10:30:00Z",
+    sender: mockSenders[0],
+  },
+  {
+    id: "2",
+    type: "pr_merged",
+    description: "Merged PR #44 in repo2",
+    repository: "repo2",
+    timestamp: "2024-03-09T15:20:00Z",
+    sender: mockSenders[1],
+  },
+  {
+    id: "3",
+    type: "issue_closed",
+    description: "Closed issue #10 in repo1",
+    repository: "repo1",
+    timestamp: "2024-03-08T09:15:00Z",
+    sender: mockSenders[2],
+  },
+  {
+    id: "4",
+    type: "commits_analyzed",
+    description: "Analyzed commits in repo3",
+    repository: "repo3",
+    timestamp: "2024-03-07T14:45:00Z",
+    sender: mockSenders[0],
+  },
+  {
+    id: "5",
+    type: "pr_opened",
+    description: "Opened PR #12 in repo2",
+    repository: "repo2",
+    timestamp: "2024-03-06T11:30:00Z",
+    sender: mockSenders[1],
+  },
 ];
 
 export const mockPendingActions: PendingAction[] = [
   {
-    id: '1',
-    type: 'review_pr',
-    description: 'Review PR #43 in repo3',
-    repository: 'repo3',
-    priority: 'high'
+    id: "1",
+    type: "review_pr",
+    description: "Review PR #43 in repo3",
+    repository: "repo3",
+    priority: "high",
   },
   {
-    id: '2',
-    type: 'close_issue',
-    description: 'Close issue #11 in repo2',
-    repository: 'repo2',
-    priority: 'medium'
+    id: "2",
+    type: "close_issue",
+    description: "Close issue #11 in repo2",
+    repository: "repo2",
+    priority: "medium",
   },
   {
-    id: '3',
-    type: 'merge_pr',
-    description: 'Merge PR #42 in repo1',
-    repository: 'repo1',
-    priority: 'high'
+    id: "3",
+    type: "merge_pr",
+    description: "Merge PR #42 in repo1",
+    repository: "repo1",
+    priority: "high",
   },
   {
-    id: '4',
-    type: 'update_readme',
-    description: 'Update README in repo2',
-    repository: 'repo2',
-    priority: 'low'
+    id: "4",
+    type: "update_readme",
+    description: "Update README in repo2",
+    repository: "repo2",
+    priority: "low",
   },
   {
-    id: '5',
-    type: 'respond_issue',
-    description: 'Respond to issue #9 in repo1',
-    repository: 'repo1',
-    priority: 'medium'
-  }
+    id: "5",
+    type: "respond_issue",
+    description: "Respond to issue #9 in repo1",
+    repository: "repo1",
+    priority: "medium",
+  },
 ];
 
 export const mockRepositories: Repository[] = [
   {
-    organization: 'facebook',
-    organization_avatar: 'https://github.com/facebook.png',
-    name: 'react',
-    url: 'https://github.com/facebook/react',
+    organization: "facebook",
+    organization_avatar: "https://github.com/facebook.png",
+    name: "react",
+    url: "https://github.com/facebook/react",
     stars: 215000,
     fork: false,
     forks: 45000,
     issues: 1200,
-    language: 'JavaScript',
-    visibility: 'public'
+    language: "JavaScript",
+    visibility: "public",
   },
   {
-    organization: 'vercel',
-    organization_avatar: 'https://github.com/vercel.png',
-    name: 'next.js',
-    url: 'https://github.com/vercel/next.js',
+    organization: "vercel",
+    organization_avatar: "https://github.com/vercel.png",
+    name: "next.js",
+    url: "https://github.com/vercel/next.js",
     stars: 115000,
     fork: false,
     forks: 24000,
     issues: 1500,
-    language: 'TypeScript',
-    visibility: 'public'
+    language: "TypeScript",
+    visibility: "public",
   },
   {
-    organization: 'tailwindlabs',
-    organization_avatar: 'https://github.com/tailwindlabs.png',
-    name: 'tailwindcss',
-    url: 'https://github.com/tailwindlabs/tailwindcss',
+    organization: "tailwindlabs",
+    organization_avatar: "https://github.com/tailwindlabs.png",
+    name: "tailwindcss",
+    url: "https://github.com/tailwindlabs/tailwindcss",
     stars: 75000,
     fork: false,
     forks: 4200,
     issues: 450,
-    language: 'JavaScript',
-    visibility: 'public'
+    language: "JavaScript",
+    visibility: "public",
   },
   {
-    organization: 'microsoft',
-    organization_avatar: 'https://github.com/microsoft.png',
-    name: 'vscode',
-    url: 'https://github.com/microsoft/vscode',
+    organization: "microsoft",
+    organization_avatar: "https://github.com/microsoft.png",
+    name: "vscode",
+    url: "https://github.com/microsoft/vscode",
     stars: 155000,
     fork: false,
     forks: 28000,
     issues: 7800,
-    language: 'TypeScript',
-    visibility: 'public'
+    language: "TypeScript",
+    visibility: "public",
   },
   {
-    organization: 'internal',
-    organization_avatar: 'https://github.com/internal.png',
-    name: 'api-service',
-    url: 'https://github.com/internal/api-service',
+    organization: "internal",
+    organization_avatar: "https://github.com/internal.png",
+    name: "api-service",
+    url: "https://github.com/internal/api-service",
     stars: 12,
     fork: true,
     forks: 3,
     issues: 25,
-    language: 'Go',
-    visibility: 'private'
-  }
+    language: "Go",
+    visibility: "private",
+  },
 ];
 
 export const mockProviders: Record<string, Provider> = {
   SonarCloud: {
-    name: 'SonarCloud',
-    logo: 'https://cdn.simpleicons.org/sonarcloud',
-    description: 'Code Quality and Security Analysis'
+    name: "SonarCloud",
+    logo: "https://cdn.simpleicons.org/sonarcloud",
+    description: "Code Quality and Security Analysis",
   },
   AppVeyor: {
-    name: 'AppVeyor',
-    logo: 'https://cdn.simpleicons.org/appveyor',
-    description: 'Continuous Integration and Deployment'
+    name: "AppVeyor",
+    logo: "https://cdn.simpleicons.org/appveyor",
+    description: "Continuous Integration and Deployment",
   },
   Codacy: {
-    name: 'Codacy',
-    logo: 'https://cdn.simpleicons.org/codacy',
-    description: 'Automated Code Reviews and Analytics'
+    name: "Codacy",
+    logo: "https://cdn.simpleicons.org/codacy",
+    description: "Automated Code Reviews and Analytics",
   },
   Codecov: {
-    name: 'Codecov',
-    logo: 'https://cdn.simpleicons.org/codecov',
-    description: 'Code Coverage Reports and Analysis'
+    name: "Codecov",
+    logo: "https://cdn.simpleicons.org/codecov",
+    description: "Code Coverage Reports and Analysis",
   },
   DeepSource: {
-    name: 'DeepSource',
-    logo: 'https://bot.straccini.com/images/Deepsource.png',
-    description: 'Static Analysis and Code Quality'
+    name: "DeepSource",
+    logo: "https://bot.straccini.com/images/Deepsource.png",
+    description: "Static Analysis and Code Quality",
   },
   CodeClimate: {
-    name: 'CodeClimate',
-    logo: 'https://cdn.simpleicons.org/codeclimate',
-    description: 'Code Quality and Technical Debt Monitoring'
+    name: "CodeClimate",
+    logo: "https://cdn.simpleicons.org/codeclimate",
+    description: "Code Quality and Technical Debt Monitoring",
   },
   Snyk: {
-    name: 'Snyk',
-    logo: 'https://cdn.simpleicons.org/snyk',
-    description: 'Security Vulnerability Scanner'
+    name: "Snyk",
+    logo: "https://cdn.simpleicons.org/snyk",
+    description: "Security Vulnerability Scanner",
   },
   OpenAI: {
-    name: 'OpenAI',
-    logo: 'https://cdn.simpleicons.org/openai',
-    description: 'AI-Powered Code Analysis and Review'
+    name: "OpenAI",
+    logo: "https://cdn.simpleicons.org/openai",
+    description: "AI-Powered Code Analysis and Review",
   },
   Llama: {
-    name: 'Llama',
-    logo: 'https://bot.straccini.com/images/Llama.png',
-    description: 'AI Language Model Integration'
+    name: "Llama",
+    logo: "https://bot.straccini.com/images/Llama.png",
+    description: "AI Language Model Integration",
   },
   CPanel: {
-    name: 'cPanel',
-    logo: 'https://cdn.simpleicons.org/cpanel',
-    description: 'Web Hosting Control Panel Integration'
+    name: "cPanel",
+    logo: "https://cdn.simpleicons.org/cpanel",
+    description: "Web Hosting Control Panel Integration",
   },
   CloudAMQP: {
-    name: 'CloudAMQP',
-    logo: 'https://bot.straccini.com/images/CloudAMQP.png',
-    description: 'Managed RabbitMQ Message Broker'
-  }
+    name: "CloudAMQP",
+    logo: "https://bot.straccini.com/images/CloudAMQP.png",
+    description: "Managed RabbitMQ Message Broker",
+  },
 };
 
 const mockUsageHistory: IntegrationUsage[] = [
   {
-    id: '1',
-    timestamp: '2024-03-15T10:30:00Z',
-    endpoint: '/api/analyze',
+    id: "1",
+    timestamp: "2024-03-15T10:30:00Z",
+    endpoint: "/api/analyze",
     status: 200,
-    duration: 1250
+    duration: 1250,
   },
   {
-    id: '2',
-    timestamp: '2024-03-15T10:25:00Z',
-    endpoint: '/api/quality-gate',
+    id: "2",
+    timestamp: "2024-03-15T10:25:00Z",
+    endpoint: "/api/quality-gate",
     status: 200,
-    duration: 850
+    duration: 850,
   },
   {
-    id: '3',
-    timestamp: '2024-03-15T10:20:00Z',
-    endpoint: '/api/coverage',
+    id: "3",
+    timestamp: "2024-03-15T10:20:00Z",
+    endpoint: "/api/coverage",
     status: 404,
-    duration: 450
+    duration: 450,
   },
   {
-    id: '4',
-    timestamp: '2024-03-15T10:15:00Z',
-    endpoint: '/api/analyze',
+    id: "4",
+    timestamp: "2024-03-15T10:15:00Z",
+    endpoint: "/api/analyze",
     status: 500,
-    duration: 2100
-  }
+    duration: 2100,
+  },
 ];
 
 export const mockIntegrations: Integration[] = [
   {
-    provider: 'SonarCloud',
-    apiKey: 'sonar_12345678901234567890',
-    status: 'Active',
-    lastUsage: '2024-03-15T10:30:00Z',
-    lastError: 'N/A',
-    usageHistory: mockUsageHistory
-  }
-];
\ No newline at end of file
+    provider: "SonarCloud",
+    apiKey: "sonar_12345678901234567890",
+    status: "Active",
+    lastUsage: "2024-03-15T10:30:00Z",
+    lastError: "N/A",
+    usageHistory: mockUsageHistory,
+  },
+];
diff --git a/src/pages/Account.tsx b/src/pages/Account.tsx
index 616121b..7c92c4e 100644
--- a/src/pages/Account.tsx
+++ b/src/pages/Account.tsx
@@ -1,60 +1,61 @@
-import { useState } from 'react';
-import { mockUser, mockInstallations } from '../mockData';
-import { ProfileSection } from '../components/account/ProfileSection';
-import { PasswordSection } from '../components/account/PasswordSection';
-import { TwoFactorSection } from '../components/account/TwoFactorSection';
-import { FIDOSection } from '../components/account/FIDOSection';
-import { InstallationsSection } from '../components/account/InstallationsSection';
-import type { Installation } from '../types';
+import { useState } from "react";
+import { mockUser, mockInstallations } from "../mockData";
+import { ProfileSection } from "../components/account/ProfileSection";
+import { PasswordSection } from "../components/account/PasswordSection";
+import { TwoFactorSection } from "../components/account/TwoFactorSection";
+import { FIDOSection } from "../components/account/FIDOSection";
+import { InstallationsSection } from "../components/account/InstallationsSection";
+import type { Installation } from "../types";
 
 export function Account() {
-  const [usedRecoveryCodes] = useState<Set<string>>(new Set(['abcd-efgh-ijkl-mnop']));
+  const [usedRecoveryCodes] = useState<Set<string>>(
+    new Set(["abcd-efgh-ijkl-mnop"]),
+  );
 
   const handleProfileSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     // Handle profile update
-    console.log('Profile updated');
+    console.log("Profile updated");
   };
 
   const handlePasswordSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     // Handle password update
-    console.log('Password updated');
+    console.log("Password updated");
   };
 
   const handleToggle2FA = () => {
     // Handle 2FA toggle
-    console.log('2FA toggled');
+    console.log("2FA toggled");
   };
 
   const handleRegenerateCodes = () => {
     // Handle recovery codes regeneration
-    console.log('Recovery codes regenerated');
+    console.log("Recovery codes regenerated");
   };
 
   const handleRegisterFIDODevice = () => {
     // Handle new FIDO device registration
-    console.log('Register new FIDO device');
+    console.log("Register new FIDO device");
   };
 
   const handleRemoveFIDODevice = (id: string) => {
     // Handle FIDO device removal
-    console.log('FIDO device removed:', id);
+    console.log("FIDO device removed:", id);
   };
 
   const handleRemoveInstallation = (installation: Installation) => {
     // Handle installation removal
-    console.log('Remove installation:', installation.id);
+    console.log("Remove installation:", installation.id);
   };
 
   return (
     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-8">Account Settings</h1>
+      <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-8">
+        Account Settings
+      </h1>
 
-      <ProfileSection
-        user={mockUser}
-        onSubmit={handleProfileSubmit}
-      />
+      <ProfileSection user={mockUser} onSubmit={handleProfileSubmit} />
 
       <PasswordSection
         hasPassword={mockUser.has_password || false}
@@ -81,4 +82,4 @@ export function Account() {
       />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Auth.tsx b/src/pages/Auth.tsx
index 315a4bd..45238c0 100644
--- a/src/pages/Auth.tsx
+++ b/src/pages/Auth.tsx
@@ -1,27 +1,35 @@
-import React, { useState } from 'react';
-import { Github, KeyRound, Mail, Fingerprint, Smartphone, ArrowRight, Bot } from 'lucide-react';
-import { useAuth } from '../context/AuthContext';
-import { useNavigate, useLocation } from 'react-router-dom';
-import LandingHeader from '../components/LandingHeader';
-import LandingFooter from '../components/LandingFooter';
+import React, { useState } from "react";
+import {
+  Github,
+  KeyRound,
+  Mail,
+  Fingerprint,
+  Smartphone,
+  ArrowRight,
+  Bot,
+} from "lucide-react";
+import { useAuth } from "../context/AuthContext";
+import { useNavigate, useLocation } from "react-router-dom";
+import LandingHeader from "../components/LandingHeader";
+import LandingFooter from "../components/LandingFooter";
 
 // Mock user data
 const MOCK_USERS = {
-  'test@example.com': {
-    password: 'password123',
-    twoFactorMethods: ['fido', 'authenticator', 'email', 'recovery']
+  "test@example.com": {
+    password: "password123",
+    twoFactorMethods: ["fido", "authenticator", "email", "recovery"],
+  },
+  "admin@example.com": {
+    password: "admin123",
+    twoFactorMethods: ["authenticator", "email"],
   },
-  'admin@example.com': {
-    password: 'admin123',
-    twoFactorMethods: ['authenticator', 'email']
-  }
 };
 
 // Mock 2FA verification codes
 const MOCK_2FA_CODES = {
-  authenticator: '123456',
-  email: '654321',
-  recovery: 'R123456789',
+  authenticator: "123456",
+  email: "654321",
+  recovery: "R123456789",
 };
 
 interface TwoFactorModalProps {
@@ -30,19 +38,23 @@ interface TwoFactorModalProps {
   onVerify: (code: string) => void;
 }
 
-const TwoFactorVerificationModal: React.FC<TwoFactorModalProps> = ({ method, onClose, onVerify }) => {
-  const [code, setCode] = useState('');
-  const [error, setError] = useState('');
+const TwoFactorVerificationModal: React.FC<TwoFactorModalProps> = ({
+  method,
+  onClose,
+  onVerify,
+}) => {
+  const [code, setCode] = useState("");
+  const [error, setError] = useState("");
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    setError('');
+    setError("");
 
     // Mock verification
     if (MOCK_2FA_CODES[method as keyof typeof MOCK_2FA_CODES] === code) {
       onVerify(code);
     } else {
-      setError('Invalid verification code');
+      setError("Invalid verification code");
     }
   };
 
@@ -52,11 +64,15 @@ const TwoFactorVerificationModal: React.FC<TwoFactorModalProps> = ({ method, onC
         <h2 className="text-2xl font-bold mb-6">Enter Verification Code</h2>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label htmlFor="code" className="block text-sm font-medium text-gray-700 mb-2">
-              {method === 'authenticator' && 'Enter 6-digit code from your authenticator app'}
-              {method === 'email' && 'Enter 6-digit code sent to your email'}
-              {method === 'recovery' && 'Enter your 10-digit recovery code'}
-              {method === 'fido' && 'Verify with your security key'}
+            <label
+              htmlFor="code"
+              className="block text-sm font-medium text-gray-700 mb-2"
+            >
+              {method === "authenticator" &&
+                "Enter 6-digit code from your authenticator app"}
+              {method === "email" && "Enter 6-digit code sent to your email"}
+              {method === "recovery" && "Enter your 10-digit recovery code"}
+              {method === "fido" && "Verify with your security key"}
             </label>
             <input
               type="text"
@@ -95,15 +111,19 @@ interface TwoFactorMethodsModalProps {
   onSelect: (method: string) => void;
 }
 
-const TwoFactorMethodsModal: React.FC<TwoFactorMethodsModalProps> = ({ methods, onClose, onSelect }) => {
+const TwoFactorMethodsModal: React.FC<TwoFactorMethodsModalProps> = ({
+  methods,
+  onClose,
+  onSelect,
+}) => {
   return (
     <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
       <div className="bg-white rounded-xl p-8 max-w-md w-full mx-4 shadow-2xl">
         <h2 className="text-2xl font-bold mb-6">Select 2FA Method</h2>
         <div className="space-y-3">
-          {methods.includes('fido') && (
+          {methods.includes("fido") && (
             <button
-              onClick={() => onSelect('fido')}
+              onClick={() => onSelect("fido")}
               className="w-full flex items-center justify-between p-4 rounded-lg border hover:border-blue-500 hover:bg-blue-50 transition-colors"
             >
               <div className="flex items-center gap-3">
@@ -113,9 +133,9 @@ const TwoFactorMethodsModal: React.FC<TwoFactorMethodsModalProps> = ({ methods,
               <ArrowRight className="h-4 w-4 text-gray-400" />
             </button>
           )}
-          {methods.includes('authenticator') && (
+          {methods.includes("authenticator") && (
             <button
-              onClick={() => onSelect('authenticator')}
+              onClick={() => onSelect("authenticator")}
               className="w-full flex items-center justify-between p-4 rounded-lg border hover:border-blue-500 hover:bg-blue-50 transition-colors"
             >
               <div className="flex items-center gap-3">
@@ -125,9 +145,9 @@ const TwoFactorMethodsModal: React.FC<TwoFactorMethodsModalProps> = ({ methods,
               <ArrowRight className="h-4 w-4 text-gray-400" />
             </button>
           )}
-          {methods.includes('email') && (
+          {methods.includes("email") && (
             <button
-              onClick={() => onSelect('email')}
+              onClick={() => onSelect("email")}
               className="w-full flex items-center justify-between p-4 rounded-lg border hover:border-blue-500 hover:bg-blue-50 transition-colors"
             >
               <div className="flex items-center gap-3">
@@ -137,9 +157,9 @@ const TwoFactorMethodsModal: React.FC<TwoFactorMethodsModalProps> = ({ methods,
               <ArrowRight className="h-4 w-4 text-gray-400" />
             </button>
           )}
-          {methods.includes('recovery') && (
+          {methods.includes("recovery") && (
             <button
-              onClick={() => onSelect('recovery')}
+              onClick={() => onSelect("recovery")}
               className="w-full flex items-center justify-between p-4 rounded-lg border hover:border-blue-500 hover:bg-blue-50 transition-colors"
             >
               <div className="flex items-center gap-3">
@@ -165,31 +185,32 @@ export default function AuthPage() {
   const { login } = useAuth();
   const navigate = useNavigate();
   const location = useLocation();
-  const [email, setEmail] = useState(location.state?.email || '');
-  const [password, setPassword] = useState('');
+  const [email, setEmail] = useState(location.state?.email || "");
+  const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
   const [showTwoFactorMethods, setShowTwoFactorMethods] = useState(false);
-  const [showTwoFactorVerification, setShowTwoFactorVerification] = useState(false);
-  const [selectedMethod, setSelectedMethod] = useState<string>('');
+  const [showTwoFactorVerification, setShowTwoFactorVerification] =
+    useState(false);
+  const [selectedMethod, setSelectedMethod] = useState<string>("");
   const [twoFactorMethods, setTwoFactorMethods] = useState<string[]>([]);
 
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
-    setError('');
+    setError("");
 
     try {
       // Mock authentication
       const user = MOCK_USERS[email as keyof typeof MOCK_USERS];
-      
+
       if (!user) {
-        setError('Invalid email or password');
+        setError("Invalid email or password");
         return;
       }
 
       if (user.password !== password) {
-        setError('Invalid email or password');
+        setError("Invalid email or password");
         return;
       }
 
@@ -197,8 +218,8 @@ export default function AuthPage() {
       setTwoFactorMethods(user.twoFactorMethods);
       setShowTwoFactorMethods(true);
     } catch (error) {
-      console.error('Login error:', error);
-      setError('An error occurred during login');
+      console.error("Login error:", error);
+      setError("An error occurred during login");
     } finally {
       setLoading(false);
     }
@@ -207,7 +228,7 @@ export default function AuthPage() {
   const handleGitHubLogin = () => {
     // Mock GitHub login
     login();
-    navigate('/dashboard');
+    navigate("/dashboard");
   };
 
   const handleTwoFactorMethodSelect = (method: string) => {
@@ -216,10 +237,10 @@ export default function AuthPage() {
     setShowTwoFactorVerification(true);
 
     // If FIDO is selected, auto-verify after a delay
-    if (method === 'fido') {
+    if (method === "fido") {
       setTimeout(() => {
         login();
-        navigate('/dashboard');
+        navigate("/dashboard");
       }, 1500);
     }
   };
@@ -228,17 +249,17 @@ export default function AuthPage() {
     // Mock verification success
     setShowTwoFactorVerification(false);
     login();
-    navigate('/dashboard');
+    navigate("/dashboard");
   };
 
   const handleForgotPassword = () => {
-    navigate('/forgot-password', { state: { email } });
+    navigate("/forgot-password", { state: { email } });
   };
 
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100">
       <LandingHeader />
-      
+
       <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
         <div className="sm:mx-auto sm:w-full sm:max-w-md">
           <div className="flex justify-center">
@@ -268,7 +289,9 @@ export default function AuthPage() {
                   <div className="w-full border-t border-gray-300" />
                 </div>
                 <div className="relative flex justify-center text-sm">
-                  <span className="px-2 bg-white text-gray-500">Or continue with email</span>
+                  <span className="px-2 bg-white text-gray-500">
+                    Or continue with email
+                  </span>
                 </div>
               </div>
             </div>
@@ -281,7 +304,10 @@ export default function AuthPage() {
               )}
 
               <div>
-                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                <label
+                  htmlFor="email"
+                  className="block text-sm font-medium text-gray-700"
+                >
                   Email address
                 </label>
                 <div className="mt-1">
@@ -300,7 +326,10 @@ export default function AuthPage() {
               </div>
 
               <div>
-                <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                <label
+                  htmlFor="password"
+                  className="block text-sm font-medium text-gray-700"
+                >
                   Password
                 </label>
                 <div className="mt-1">
@@ -336,7 +365,7 @@ export default function AuthPage() {
                   disabled={loading}
                   className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                 >
-                  {loading ? 'Signing in...' : 'Sign in'}
+                  {loading ? "Signing in..." : "Sign in"}
                 </button>
               </div>
             </form>
@@ -344,8 +373,12 @@ export default function AuthPage() {
             <div className="mt-6">
               <div className="text-center text-sm text-gray-600">
                 <p>Demo credentials:</p>
-                <p className="font-mono text-xs mt-1">test@example.com / password123</p>
-                <p className="font-mono text-xs">admin@example.com / admin123</p>
+                <p className="font-mono text-xs mt-1">
+                  test@example.com / password123
+                </p>
+                <p className="font-mono text-xs">
+                  admin@example.com / admin123
+                </p>
               </div>
             </div>
           </div>
@@ -371,4 +404,4 @@ export default function AuthPage() {
       <LandingFooter />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index a7d8209..9365c72 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -3,32 +3,32 @@ import {
   GitMerge,
   GitCommit,
   Clock,
-  Database
-} from 'lucide-react';
-import { StatCard } from '../components/StatCard';
-import { ActivityList } from '../components/ActivityList';
-import { PendingActions } from '../components/PendingActions';
-import { IssuesList } from '../components/IssuesList';
-import { PullRequestsList } from '../components/PullRequestsList';
-import { WelcomeSection } from '../components/dashboard/WelcomeSection';
-import { StatsGrid } from '../components/dashboard/StatsGrid';
-import { ContentGrid } from '../components/dashboard/ContentGrid';
+  Database,
+} from "lucide-react";
+import { StatCard } from "../components/StatCard";
+import { ActivityList } from "../components/ActivityList";
+import { PendingActions } from "../components/PendingActions";
+import { IssuesList } from "../components/IssuesList";
+import { PullRequestsList } from "../components/PullRequestsList";
+import { WelcomeSection } from "../components/dashboard/WelcomeSection";
+import { StatsGrid } from "../components/dashboard/StatsGrid";
+import { ContentGrid } from "../components/dashboard/ContentGrid";
 import {
   mockUser,
   mockPullRequests,
   mockIssues,
   mockActivities,
-  mockPendingActions
-} from '../mockData';
+  mockPendingActions,
+} from "../mockData";
 
 export function Dashboard() {
   return (
     <>
       <WelcomeSection user={mockUser} />
-      
+
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-8 pb-12">
         <StatsGrid />
-        <ContentGrid 
+        <ContentGrid
           pullRequests={mockPullRequests}
           issues={mockIssues}
           activities={mockActivities}
@@ -37,4 +37,4 @@ export function Dashboard() {
       </div>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/ForgotPassword.tsx b/src/pages/ForgotPassword.tsx
index 22a29ad..4b503b5 100644
--- a/src/pages/ForgotPassword.tsx
+++ b/src/pages/ForgotPassword.tsx
@@ -1,16 +1,16 @@
-import React, { useState, useEffect } from 'react';
-import { Mail, ArrowLeft, Bot, CheckCircle2, Clock } from 'lucide-react';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
-import LandingHeader from '../components/LandingHeader';
-import LandingFooter from '../components/LandingFooter';
+import React, { useState, useEffect } from "react";
+import { Mail, ArrowLeft, Bot, CheckCircle2, Clock } from "lucide-react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import LandingHeader from "../components/LandingHeader";
+import LandingFooter from "../components/LandingFooter";
 
 export default function ForgotPasswordPage() {
   const location = useLocation();
   const navigate = useNavigate();
-  const [email, setEmail] = useState('');
+  const [email, setEmail] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isSubmitted, setIsSubmitted] = useState(false);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
 
   // Get email from location state if coming from auth page
   useEffect(() => {
@@ -22,31 +22,31 @@ export default function ForgotPasswordPage() {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsSubmitting(true);
-    setError('');
+    setError("");
 
     try {
       // Mock API call for password reset
-      await new Promise(resolve => setTimeout(resolve, 2000));
-      
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+
       // Simulate success
       setIsSubmitted(true);
     } catch (error) {
-      console.error('Password reset error:', error);
-      setError('Failed to send reset email. Please try again.');
+      console.error("Password reset error:", error);
+      setError("Failed to send reset email. Please try again.");
     } finally {
       setIsSubmitting(false);
     }
   };
 
   const handleBackToAuth = () => {
-    navigate('/auth', { state: { email } });
+    navigate("/auth", { state: { email } });
   };
 
   if (isSubmitted) {
     return (
       <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100">
         <LandingHeader />
-        
+
         <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
           <div className="sm:mx-auto sm:w-full sm:max-w-md">
             <div className="flex justify-center">
@@ -66,13 +66,13 @@ export default function ForgotPasswordPage() {
                 <div className="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100 mb-6">
                   <CheckCircle2 className="h-8 w-8 text-green-600" />
                 </div>
-                
+
                 <h3 className="text-lg font-medium text-gray-900 mb-4">
                   Reset link sent!
                 </h3>
-                
+
                 <p className="text-sm text-gray-600 mb-6">
-                  We've sent a password reset link to <strong>{email}</strong>. 
+                  We've sent a password reset link to <strong>{email}</strong>.
                   Click the link in the email to reset your password.
                 </p>
 
@@ -80,7 +80,9 @@ export default function ForgotPasswordPage() {
                   <div className="flex items-start">
                     <Clock className="h-5 w-5 text-blue-600 mt-0.5 mr-3 flex-shrink-0" />
                     <div className="text-sm text-blue-800">
-                      <p className="font-medium mb-1">Didn't receive the email?</p>
+                      <p className="font-medium mb-1">
+                        Didn't receive the email?
+                      </p>
                       <ul className="list-disc list-inside space-y-1 text-blue-700">
                         <li>Check your spam/junk folder</li>
                         <li>Make sure the email address is correct</li>
@@ -94,13 +96,13 @@ export default function ForgotPasswordPage() {
                   <button
                     onClick={() => {
                       setIsSubmitted(false);
-                      setEmail('');
+                      setEmail("");
                     }}
                     className="w-full flex justify-center py-2 px-4 border border-blue-600 rounded-md shadow-sm text-sm font-medium text-blue-600 bg-white hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
                   >
                     Send another email
                   </button>
-                  
+
                   <button
                     onClick={handleBackToAuth}
                     className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
@@ -121,7 +123,7 @@ export default function ForgotPasswordPage() {
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100">
       <LandingHeader />
-      
+
       <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
         <div className="sm:mx-auto sm:w-full sm:max-w-md">
           <div className="flex justify-center">
@@ -145,7 +147,10 @@ export default function ForgotPasswordPage() {
               )}
 
               <div>
-                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                <label
+                  htmlFor="email"
+                  className="block text-sm font-medium text-gray-700"
+                >
                   Email address
                 </label>
                 <div className="mt-1 relative">
@@ -179,7 +184,7 @@ export default function ForgotPasswordPage() {
                       Sending reset link...
                     </div>
                   ) : (
-                    'Send reset link'
+                    "Send reset link"
                   )}
                 </button>
               </div>
@@ -191,7 +196,9 @@ export default function ForgotPasswordPage() {
                   <div className="w-full border-t border-gray-300" />
                 </div>
                 <div className="relative flex justify-center text-sm">
-                  <span className="px-2 bg-white text-gray-500">Remember your password?</span>
+                  <span className="px-2 bg-white text-gray-500">
+                    Remember your password?
+                  </span>
                 </div>
               </div>
 
@@ -208,9 +215,14 @@ export default function ForgotPasswordPage() {
 
             <div className="mt-6">
               <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
-                <h4 className="text-sm font-medium text-gray-900 mb-2">Need help?</h4>
+                <h4 className="text-sm font-medium text-gray-900 mb-2">
+                  Need help?
+                </h4>
                 <div className="text-xs text-gray-600 space-y-1">
-                  <p>• Make sure you're using the email associated with your account</p>
+                  <p>
+                    • Make sure you're using the email associated with your
+                    account
+                  </p>
                   <p>• Check your spam folder if you don't receive the email</p>
                   <p>• Contact support if you continue having issues</p>
                 </div>
@@ -231,4 +243,4 @@ export default function ForgotPasswordPage() {
       <LandingFooter />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Integrations.tsx b/src/pages/Integrations.tsx
index 9ccce8d..b1da8b4 100644
--- a/src/pages/Integrations.tsx
+++ b/src/pages/Integrations.tsx
@@ -1,75 +1,77 @@
-import { useState } from 'react';
-import { Cable } from 'lucide-react';
-import { AddIntegration } from '../components/integrations/AddIntegration';
-import { IntegrationsList } from '../components/integrations/IntegrationsList';
-import { mockProviders } from '../mockData';
-import type { Integration } from '../types';
+import { useState } from "react";
+import { Cable } from "lucide-react";
+import { AddIntegration } from "../components/integrations/AddIntegration";
+import { IntegrationsList } from "../components/integrations/IntegrationsList";
+import { mockProviders } from "../mockData";
+import type { Integration } from "../types";
 
 export function Integrations() {
   const [integrations, setIntegrations] = useState<Integration[]>([
     {
-      provider: 'SonarCloud',
-      apiKey: 'sonar_12345678901234567890',
-      status: 'Active',
-      lastUsage: '2024-03-15T10:30:00Z',
-      lastError: 'N/A'
-    }
+      provider: "SonarCloud",
+      apiKey: "sonar_12345678901234567890",
+      status: "Active",
+      lastUsage: "2024-03-15T10:30:00Z",
+      lastError: "N/A",
+    },
   ]);
   const [showApiKey, setShowApiKey] = useState<Record<string, boolean>>({});
-  const [selectedProvider, setSelectedProvider] = useState('');
-  const [apiKey, setApiKey] = useState('');
+  const [selectedProvider, setSelectedProvider] = useState("");
+  const [apiKey, setApiKey] = useState("");
   const [isValidating, setIsValidating] = useState(false);
-  const [error, setError] = useState('');
-  const [success, setSuccess] = useState('');
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState("");
 
   const availableProviders = Object.entries(mockProviders).filter(
-    ([key]) => !integrations.some(i => i.provider === key)
+    ([key]) => !integrations.some((i) => i.provider === key),
   );
 
   const handleAddIntegration = async () => {
     if (!selectedProvider || apiKey.length < 10) {
-      setError('Please select a provider and enter a valid API key (minimum 10 characters)');
+      setError(
+        "Please select a provider and enter a valid API key (minimum 10 characters)",
+      );
       return;
     }
 
     setIsValidating(true);
-    setError('');
+    setError("");
 
     try {
       // Simulate API validation
-      await new Promise(resolve => setTimeout(resolve, 1500));
+      await new Promise((resolve) => setTimeout(resolve, 1500));
 
       const newIntegration: Integration = {
         provider: selectedProvider,
         apiKey,
-        status: 'Active',
-        lastUsage: 'N/A',
-        lastError: 'N/A'
+        status: "Active",
+        lastUsage: "N/A",
+        lastError: "N/A",
       };
 
-      setIntegrations(prev => [...prev, newIntegration]);
+      setIntegrations((prev) => [...prev, newIntegration]);
       setSuccess(`Integration for ${selectedProvider} added successfully!`);
-      setSelectedProvider('');
-      setApiKey('');
+      setSelectedProvider("");
+      setApiKey("");
 
-      setTimeout(() => setSuccess(''), 3000);
+      setTimeout(() => setSuccess(""), 3000);
     } catch (err) {
-      setError('Failed to validate API key. Please try again.');
+      setError("Failed to validate API key. Please try again.");
     } finally {
       setIsValidating(false);
     }
   };
 
   const handleRemoveIntegration = (provider: string) => {
-    setIntegrations(prev => prev.filter(i => i.provider !== provider));
+    setIntegrations((prev) => prev.filter((i) => i.provider !== provider));
     setSuccess(`Integration for ${provider} removed successfully!`);
-    setTimeout(() => setSuccess(''), 3000);
+    setTimeout(() => setSuccess(""), 3000);
   };
 
   const handleToggleApiKeyVisibility = (provider: string) => {
-    setShowApiKey(prev => ({
+    setShowApiKey((prev) => ({
       ...prev,
-      [provider]: !prev[provider]
+      [provider]: !prev[provider],
     }));
   };
 
@@ -78,16 +80,23 @@ export function Integrations() {
       <div className="flex items-center space-x-4 mb-8">
         <Cable className="w-8 h-8 text-gray-400" />
         <div>
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Integrations</h1>
-          <p className="text-gray-500 dark:text-gray-400">Manage your external service integrations</p>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+            Integrations
+          </h1>
+          <p className="text-gray-500 dark:text-gray-400">
+            Manage your external service integrations
+          </p>
         </div>
       </div>
 
       {(error || success) && (
-        <div className={`mb-8 p-4 rounded-lg ${
-          error ? 'bg-red-50 dark:bg-red-900/50 text-red-800 dark:text-red-200' :
-          'bg-green-50 dark:bg-green-900/50 text-green-800 dark:text-green-200'
-        }`}>
+        <div
+          className={`mb-8 p-4 rounded-lg ${
+            error
+              ? "bg-red-50 dark:bg-red-900/50 text-red-800 dark:text-red-200"
+              : "bg-green-50 dark:bg-green-900/50 text-green-800 dark:text-green-200"
+          }`}
+        >
           {error || success}
         </div>
       )}
@@ -101,7 +110,7 @@ export function Integrations() {
         isValidating={isValidating}
         onProviderSelect={setSelectedProvider}
         onApiKeyChange={setApiKey}
-        onToggleApiKeyVisibility={() => handleToggleApiKeyVisibility('new')}
+        onToggleApiKeyVisibility={() => handleToggleApiKeyVisibility("new")}
         onSubmit={handleAddIntegration}
       />
 
@@ -116,4 +125,4 @@ export function Integrations() {
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Issues.tsx b/src/pages/Issues.tsx
index 2f2c9c8..0daf870 100644
--- a/src/pages/Issues.tsx
+++ b/src/pages/Issues.tsx
@@ -1,8 +1,8 @@
-import { useState, useEffect } from 'react';
-import { ChevronDown, CircleDot, Filter } from 'lucide-react';
-import { TokenSelect } from '../components/TokenSelect';
-import { Link } from 'react-router-dom';
-import type { Issue } from '../types';
+import { useState, useEffect } from "react";
+import { ChevronDown, CircleDot, Filter } from "lucide-react";
+import { TokenSelect } from "../components/TokenSelect";
+import { Link } from "react-router-dom";
+import type { Issue } from "../types";
 
 interface GroupedIssues {
   [owner: string]: Issue[];
@@ -16,13 +16,13 @@ interface Label {
 
 function luminance(color: string): string {
   if (!/^[0-9A-Fa-f]{6}$/.test(color)) {
-    throw new Error('Invalid color format. Expected 6-digit hex color.');
+    throw new Error("Invalid color format. Expected 6-digit hex color.");
   }
   const red = parseInt(color.slice(0, 2), 16);
   const green = parseInt(color.slice(2, 2), 16);
   const blue = parseInt(color.slice(4, 2), 16);
-  const yiq = ((red * 299) + (green * 587) + (blue * 114)) / 1000;
-  return yiq >= 128 ? '#000' : '#fff';
+  const yiq = (red * 299 + green * 587 + blue * 114) / 1000;
+  return yiq >= 128 ? "#000" : "#fff";
 }
 
 export function Issues() {
@@ -43,97 +43,130 @@ export function Issues() {
         // In a real app, this would be an API call
         const mockIssues: Issue[] = [
           {
-            url: 'https://github.com/org/repo1/issues/10',
-            title: 'Bug: Server crashes under heavy load',
-            repository: 'repo1',
-            full_name: 'org/repo1',
-            created_at: '2024-03-10T08:45:00Z',
-            owner: 'Organization 1',
+            url: "https://github.com/org/repo1/issues/10",
+            title: "Bug: Server crashes under heavy load",
+            repository: "repo1",
+            full_name: "org/repo1",
+            created_at: "2024-03-10T08:45:00Z",
+            owner: "Organization 1",
             labels: [
-              { name: 'bug', color: 'dc3545', description: 'Something is not working' },
-              { name: 'high-priority', color: 'ff9800', description: 'Needs immediate attention' }
+              {
+                name: "bug",
+                color: "dc3545",
+                description: "Something is not working",
+              },
+              {
+                name: "high-priority",
+                color: "ff9800",
+                description: "Needs immediate attention",
+              },
             ],
             sender: {
-              login: 'alice',
-              name: 'Alice Johnson',
-              avatar_url: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop',
-              html_url: 'https://github.com/alice'
-            }
+              login: "alice",
+              name: "Alice Johnson",
+              avatar_url:
+                "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop",
+              html_url: "https://github.com/alice",
+            },
           },
           {
-            url: 'https://github.com/org/repo2/issues/11',
-            title: 'Enhancement: Add dark mode support',
-            repository: 'repo2',
-            full_name: 'org/repo2',
-            created_at: '2024-03-09T14:30:00Z',
-            owner: 'Organization 1',
+            url: "https://github.com/org/repo2/issues/11",
+            title: "Enhancement: Add dark mode support",
+            repository: "repo2",
+            full_name: "org/repo2",
+            created_at: "2024-03-09T14:30:00Z",
+            owner: "Organization 1",
             labels: [
-              { name: 'enhancement', color: '28a745', description: 'New feature or request' }
+              {
+                name: "enhancement",
+                color: "28a745",
+                description: "New feature or request",
+              },
             ],
             sender: {
-              login: 'bob',
-              name: 'Bob Smith',
-              avatar_url: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=100&h=100&fit=crop',
-              html_url: 'https://github.com/bob'
-            }
+              login: "bob",
+              name: "Bob Smith",
+              avatar_url:
+                "https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=100&h=100&fit=crop",
+              html_url: "https://github.com/bob",
+            },
           },
           {
-            url: 'https://github.com/org2/repo3/issues/12',
-            title: 'Feature Request: Email notifications',
-            repository: 'repo3',
-            full_name: 'org2/repo3',
-            created_at: '2024-03-08T11:20:00Z',
-            owner: 'Organization 2',
+            url: "https://github.com/org2/repo3/issues/12",
+            title: "Feature Request: Email notifications",
+            repository: "repo3",
+            full_name: "org2/repo3",
+            created_at: "2024-03-08T11:20:00Z",
+            owner: "Organization 2",
             labels: [
-              { name: 'feature', color: '0d6efd', description: 'New feature request' },
-              { name: 'documentation', color: '6f42c1', description: 'Documentation update' }
+              {
+                name: "feature",
+                color: "0d6efd",
+                description: "New feature request",
+              },
+              {
+                name: "documentation",
+                color: "6f42c1",
+                description: "Documentation update",
+              },
             ],
             sender: {
-              login: 'carol',
-              name: 'Carol Williams',
-              avatar_url: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop',
-              html_url: 'https://github.com/carol'
-            }
-          }
+              login: "carol",
+              name: "Carol Williams",
+              avatar_url:
+                "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop",
+              html_url: "https://github.com/carol",
+            },
+          },
         ];
 
         setIssues(mockIssues);
-        
+
         // Extract unique labels
         const uniqueLabels = Array.from(
           new Set(
-            mockIssues.flatMap(issue => issue.labels || [])
-              .map(label => JSON.stringify(label))
-          )
-        ).map(str => JSON.parse(str));
+            mockIssues
+              .flatMap((issue) => issue.labels || [])
+              .map((label) => JSON.stringify(label)),
+          ),
+        ).map((str) => JSON.parse(str));
         setAllLabels(uniqueLabels);
-        
+
         // Filter issues
-        const filteredIssues = mockIssues.filter(issue => {
-          if (selectedOwners.length > 0 && !selectedOwners.includes(issue.owner || 'Unknown')) return false;
-          if (selectedSenders.length > 0 && !selectedSenders.includes(issue.sender.login)) return false;
+        const filteredIssues = mockIssues.filter((issue) => {
+          if (
+            selectedOwners.length > 0 &&
+            !selectedOwners.includes(issue.owner || "Unknown")
+          )
+            return false;
+          if (
+            selectedSenders.length > 0 &&
+            !selectedSenders.includes(issue.sender.login)
+          )
+            return false;
           if (selectedLabels.length > 0) {
-            const issueLabels = issue.labels?.map(l => l.name) || [];
-            if (!selectedLabels.some(label => issueLabels.includes(label))) return false;
+            const issueLabels = issue.labels?.map((l) => l.name) || [];
+            if (!selectedLabels.some((label) => issueLabels.includes(label)))
+              return false;
           }
           return true;
         });
 
         // Group issues by owner
         const grouped = filteredIssues.reduce((acc, issue) => {
-          const owner = issue.owner || 'Unknown';
+          const owner = issue.owner || "Unknown";
           if (!acc[owner]) {
             acc[owner] = [];
           }
           acc[owner].push(issue);
           return acc;
         }, {} as GroupedIssues);
-        
+
         setGroupedIssues(grouped);
         setExpandedGroups(new Set(Object.keys(grouped)));
         setIsLoading(false);
       } catch (error) {
-        console.error('Error fetching issues:', error);
+        console.error("Error fetching issues:", error);
         setIsLoading(false);
       }
     };
@@ -142,7 +175,7 @@ export function Issues() {
   }, [selectedOwners, selectedSenders, selectedLabels]);
 
   const toggleGroup = (owner: string) => {
-    setExpandedGroups(prev => {
+    setExpandedGroups((prev) => {
       const next = new Set(prev);
       if (next.has(owner)) {
         next.delete(owner);
@@ -153,19 +186,20 @@ export function Issues() {
     });
   };
 
-  const ownerOptions = Array.from(new Set(issues.map(issue => issue.owner || 'Unknown'))).map(owner => ({
+  const ownerOptions = Array.from(
+    new Set(issues.map((issue) => issue.owner || "Unknown")),
+  ).map((owner) => ({
     value: owner,
     label: owner,
   }));
 
   const senderOptions = Array.from(
-    new Set(issues.map(issue => issue.sender))
-      .values()
-  ).map(sender => ({
+    new Set(issues.map((issue) => issue.sender)).values(),
+  ).map((sender) => ({
     value: sender.login,
     label: sender.name || sender.login,
     avatar: sender.avatar_url,
-    description: `@${sender.login}`
+    description: `@${sender.login}`,
   }));
 
   const clearFilters = () => {
@@ -174,7 +208,10 @@ export function Issues() {
     setSelectedLabels([]);
   };
 
-  const hasActiveFilters = selectedOwners.length > 0 || selectedSenders.length > 0 || selectedLabels.length > 0;
+  const hasActiveFilters =
+    selectedOwners.length > 0 ||
+    selectedSenders.length > 0 ||
+    selectedLabels.length > 0;
 
   if (isLoading) {
     return (
@@ -192,20 +229,27 @@ export function Issues() {
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center space-x-2">
               <Filter className="w-5 h-5 text-gray-500 dark:text-gray-400" />
-              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Filters</h2>
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+                Filters
+              </h2>
             </div>
             <button
               onClick={() => setIsFiltersExpanded(!isFiltersExpanded)}
               className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
             >
-              {isFiltersExpanded ? 'Show Less' : 'Show More'}
+              {isFiltersExpanded ? "Show Less" : "Show More"}
             </button>
           </div>
 
-          <div className={`grid gap-4 ${isFiltersExpanded ? 'grid-cols-1 md:grid-cols-3' : 'grid-cols-1 md:grid-cols-2'}`}>
+          <div
+            className={`grid gap-4 ${isFiltersExpanded ? "grid-cols-1 md:grid-cols-3" : "grid-cols-1 md:grid-cols-2"}`}
+          >
             {/* Owner Filter */}
             <div>
-              <label htmlFor="owner" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+              <label
+                htmlFor="owner"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+              >
                 Owner
               </label>
               <TokenSelect
@@ -218,7 +262,10 @@ export function Issues() {
 
             {/* Sender Filter */}
             <div>
-              <label htmlFor="sender" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+              <label
+                htmlFor="sender"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+              >
                 Sender
               </label>
               <TokenSelect
@@ -230,15 +277,18 @@ export function Issues() {
             </div>
 
             {/* Labels Filter */}
-            <div className={!isFiltersExpanded ? 'hidden' : ''}>
-              <label htmlFor="labels" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+            <div className={!isFiltersExpanded ? "hidden" : ""}>
+              <label
+                htmlFor="labels"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+              >
                 Labels
               </label>
               <TokenSelect
-                options={allLabels.map(label => ({
+                options={allLabels.map((label) => ({
                   value: label.name,
                   label: label.name,
-                  color: label.color
+                  color: label.color,
                 }))}
                 selectedValues={selectedLabels}
                 onChange={setSelectedLabels}
@@ -267,12 +317,18 @@ export function Issues() {
             Assigned Issues
           </h1>
           <span className="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-100 rounded-full text-sm font-medium">
-            {Object.values(groupedIssues).reduce((acc, curr) => acc + curr.length, 0)}
+            {Object.values(groupedIssues).reduce(
+              (acc, curr) => acc + curr.length,
+              0,
+            )}
           </span>
         </div>
 
         {Object.entries(groupedIssues).map(([owner, ownerIssues]) => (
-          <div key={owner} className="border-b border-gray-200 dark:border-gray-700 last:border-0">
+          <div
+            key={owner}
+            className="border-b border-gray-200 dark:border-gray-700 last:border-0"
+          >
             <button
               className="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
               onClick={() => toggleGroup(owner)}
@@ -285,7 +341,7 @@ export function Issues() {
               </h2>
               <ChevronDown
                 className={`w-5 h-5 text-gray-500 transition-transform ${
-                  expandedGroups.has(owner) ? 'transform rotate-180' : ''
+                  expandedGroups.has(owner) ? "transform rotate-180" : ""
                 }`}
               />
             </button>
@@ -329,12 +385,15 @@ export function Issues() {
                           </Link>
                           <span className="text-gray-400 mx-2">•</span>
                           <span className="text-gray-500 dark:text-gray-400">
-                            {new Date(issue.created_at).toLocaleDateString('en-US', {
-                              month: 'short',
-                              day: 'numeric',
-                              hour: '2-digit',
-                              minute: '2-digit'
-                            })}
+                            {new Date(issue.created_at).toLocaleDateString(
+                              "en-US",
+                              {
+                                month: "short",
+                                day: "numeric",
+                                hour: "2-digit",
+                                minute: "2-digit",
+                              },
+                            )}
                           </span>
                         </div>
                         {issue.labels && issue.labels.length > 0 && (
@@ -345,7 +404,7 @@ export function Issues() {
                                 className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
                                 style={{
                                   backgroundColor: `#${label.color}`,
-                                  color: luminance(label.color)
+                                  color: luminance(label.color),
                                 }}
                                 title={label.description}
                               >
@@ -371,4 +430,4 @@ export function Issues() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
index 619d477..e7e21c6 100644
--- a/src/pages/Landing.tsx
+++ b/src/pages/Landing.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import { Bot, Github, ArrowRight } from 'lucide-react';
-import { useAuth } from '../context/AuthContext';
-import FeaturesGrid from '../components/FeaturesGrid';
-import CommandsSection from '../components/CommandsSection';
-import LandingHeader from '../components/LandingHeader';
-import LandingFooter from '../components/LandingFooter';
+import React from "react";
+import { Bot, Github, ArrowRight } from "lucide-react";
+import { useAuth } from "../context/AuthContext";
+import FeaturesGrid from "../components/FeaturesGrid";
+import CommandsSection from "../components/CommandsSection";
+import LandingHeader from "../components/LandingHeader";
+import LandingFooter from "../components/LandingFooter";
 
 export function Landing() {
   const { isAuthenticated } = useAuth();
@@ -12,7 +12,7 @@ export function Landing() {
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100">
       <LandingHeader />
-      
+
       {/* Hero Section */}
       <section className="relative overflow-hidden bg-gradient-to-r from-[#0069d9] to-[#0056b3] py-24 sm:py-32">
         <div className="relative mx-auto max-w-7xl px-6 lg:px-8">
@@ -22,7 +22,8 @@ export function Landing() {
               GStraccini Bot
             </h1>
             <p className="text-lg leading-8 text-gray-200 mb-8">
-              Supercharge your GitHub workflow with automated PR management, code quality checks, and intelligent issue handling.
+              Supercharge your GitHub workflow with automated PR management,
+              code quality checks, and intelligent issue handling.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
               <a
@@ -60,8 +61,8 @@ export function Landing() {
 
       <FeaturesGrid />
       <CommandsSection />
-      
+
       <LandingFooter />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Notifications.tsx b/src/pages/Notifications.tsx
index f05e144..935a1fe 100644
--- a/src/pages/Notifications.tsx
+++ b/src/pages/Notifications.tsx
@@ -1,36 +1,36 @@
-import { useState, useEffect } from 'react';
-import { mockNotifications } from '../mockData';
-import { NotificationFilters } from '../components/notifications/NotificationFilters';
-import { NotificationList } from '../components/notifications/NotificationList';
-import type { Notification } from '../types';
+import { useState, useEffect } from "react";
+import { mockNotifications } from "../mockData";
+import { NotificationFilters } from "../components/notifications/NotificationFilters";
+import { NotificationList } from "../components/notifications/NotificationList";
+import type { Notification } from "../types";
 
 const typeOptions = [
-  { value: 'pr_review', label: 'Pull Request Review', color: '3b82f6' },
-  { value: 'issue_mention', label: 'Issue Mention', color: 'f59e0b' },
-  { value: 'pr_merged', label: 'Pull Request Merged', color: '8b5cf6' },
-  { value: 'security_alert', label: 'Security Alert', color: 'ef4444' },
-  { value: 'issue_assigned', label: 'Issue Assigned', color: '10b981' },
-  { value: 'pr_changes', label: 'Pull Request Changes', color: 'f97316' }
+  { value: "pr_review", label: "Pull Request Review", color: "3b82f6" },
+  { value: "issue_mention", label: "Issue Mention", color: "f59e0b" },
+  { value: "pr_merged", label: "Pull Request Merged", color: "8b5cf6" },
+  { value: "security_alert", label: "Security Alert", color: "ef4444" },
+  { value: "issue_assigned", label: "Issue Assigned", color: "10b981" },
+  { value: "pr_changes", label: "Pull Request Changes", color: "f97316" },
 ];
 
 const priorityOptions = [
-  { value: 'high', label: 'High Priority', color: 'ef4444' },
-  { value: 'medium', label: 'Medium Priority', color: 'f59e0b' },
-  { value: 'low', label: 'Low Priority', color: '10b981' }
+  { value: "high", label: "High Priority", color: "ef4444" },
+  { value: "medium", label: "Medium Priority", color: "f59e0b" },
+  { value: "low", label: "Low Priority", color: "10b981" },
 ];
 
 const systemSender = {
-  value: 'system',
-  label: 'System',
-  avatar: 'https://github.com/github.png',
-  description: 'System notifications'
+  value: "system",
+  label: "System",
+  avatar: "https://github.com/github.png",
+  description: "System notifications",
 };
 
 const botSender = {
-  value: 'bot',
-  label: 'GStraccini Bot',
-  avatar: 'https://github.com/gstraccini.png',
-  description: 'Bot notifications'
+  value: "bot",
+  label: "GStraccini Bot",
+  avatar: "https://github.com/gstraccini.png",
+  description: "Bot notifications",
 };
 
 export function Notifications() {
@@ -41,12 +41,14 @@ export function Notifications() {
   const [selectedPriorities, setSelectedPriorities] = useState<string[]>([]);
   const [selectedSenders, setSelectedSenders] = useState<string[]>([]);
   const [isFiltersExpanded, setIsFiltersExpanded] = useState(false);
-  const [senderOptions, setSenderOptions] = useState<Array<{
-    value: string;
-    label: string;
-    avatar?: string;
-    description?: string;
-  }>>([systemSender, botSender]);
+  const [senderOptions, setSenderOptions] = useState<
+    Array<{
+      value: string;
+      label: string;
+      avatar?: string;
+      description?: string;
+    }>
+  >([systemSender, botSender]);
 
   useEffect(() => {
     const fetchNotifications = async () => {
@@ -56,19 +58,19 @@ export function Notifications() {
 
         // Extract unique senders from notifications
         const uniqueSenders = Array.from(
-          new Set(fetchedNotifications.map(n => n.sender))
-        ).map(sender => ({
+          new Set(fetchedNotifications.map((n) => n.sender)),
+        ).map((sender) => ({
           value: sender.login,
           label: sender.name || sender.login,
           avatar: sender.avatar_url,
-          description: `@${sender.login}`
+          description: `@${sender.login}`,
         }));
 
         // Combine system, bot, and user senders
         setSenderOptions([systemSender, botSender, ...uniqueSenders]);
         setIsLoading(false);
       } catch (error) {
-        console.error('Error fetching notifications:', error);
+        console.error("Error fetching notifications:", error);
         setIsLoading(false);
       }
     };
@@ -76,29 +78,38 @@ export function Notifications() {
     fetchNotifications();
   }, []);
 
-  const filteredNotifications = notifications.filter(notification => {
+  const filteredNotifications = notifications.filter((notification) => {
     if (showUnreadOnly && notification.read) return false;
-    if (selectedTypes.length > 0 && !selectedTypes.includes(notification.type)) return false;
-    if (selectedPriorities.length > 0 && !selectedPriorities.includes(notification.priority || '')) return false;
+    if (selectedTypes.length > 0 && !selectedTypes.includes(notification.type))
+      return false;
+    if (
+      selectedPriorities.length > 0 &&
+      !selectedPriorities.includes(notification.priority || "")
+    )
+      return false;
     if (selectedSenders.length > 0) {
-      const isSystem = notification.type === 'security_alert' && selectedSenders.includes('system');
-      const isBot = notification.sender.login.includes('[bot]') && selectedSenders.includes('bot');
+      const isSystem =
+        notification.type === "security_alert" &&
+        selectedSenders.includes("system");
+      const isBot =
+        notification.sender.login.includes("[bot]") &&
+        selectedSenders.includes("bot");
       const isUser = selectedSenders.includes(notification.sender.login);
       if (!isSystem && !isBot && !isUser) return false;
     }
     return true;
   });
 
-  const unreadCount = notifications.filter(n => !n.read).length;
+  const unreadCount = notifications.filter((n) => !n.read).length;
 
   const markAsRead = (id: string) => {
-    setNotifications(prev =>
-      prev.map(n => (n.id === id ? { ...n, read: true } : n))
+    setNotifications((prev) =>
+      prev.map((n) => (n.id === id ? { ...n, read: true } : n)),
     );
   };
 
   const markAllAsRead = () => {
-    setNotifications(prev => prev.map(n => ({ ...n, read: true })));
+    setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
   };
 
   const clearFilters = () => {
@@ -143,4 +154,4 @@ export function Notifications() {
       />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Privacy.tsx b/src/pages/Privacy.tsx
index 177e61a..e90a02e 100644
--- a/src/pages/Privacy.tsx
+++ b/src/pages/Privacy.tsx
@@ -1,22 +1,25 @@
-import React from 'react';
-import { Shield, ArrowLeft } from 'lucide-react';
-import { Link } from 'react-router-dom';
-import LandingHeader from '../components/LandingHeader';
-import LandingFooter from '../components/LandingFooter';
+import React from "react";
+import { Shield, ArrowLeft } from "lucide-react";
+import { Link } from "react-router-dom";
+import LandingHeader from "../components/LandingHeader";
+import LandingFooter from "../components/LandingFooter";
 
 export default function PrivacyPage() {
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100">
       <LandingHeader />
-      
+
       <div className="max-w-4xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
         <div className="flex items-center gap-4 mb-8">
-          <Link to="/" className="flex items-center text-gray-600 hover:text-gray-900 transition-colors">
+          <Link
+            to="/"
+            className="flex items-center text-gray-600 hover:text-gray-900 transition-colors"
+          >
             <ArrowLeft className="h-5 w-5 mr-2" />
             Back to Home
           </Link>
         </div>
-        
+
         <div className="bg-white rounded-2xl shadow-xl p-8 border border-gray-200">
           <div className="flex items-center gap-4 mb-8">
             <Shield className="h-8 w-8 text-blue-600" />
@@ -27,39 +30,60 @@ export default function PrivacyPage() {
             <p className="text-gray-600 mb-6">Last updated: March 1, 2025</p>
 
             <section className="mb-8">
-              <h2 className="text-2xl font-semibold text-gray-900 mb-4">Introduction</h2>
+              <h2 className="text-2xl font-semibold text-gray-900 mb-4">
+                Introduction
+              </h2>
               <p className="text-gray-600 mb-4">
-                GStraccini Bot ("we," "our," or "us") is committed to protecting your privacy. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our GitHub application and related services.
+                GStraccini Bot ("we," "our," or "us") is committed to protecting
+                your privacy. This Privacy Policy explains how we collect, use,
+                disclose, and safeguard your information when you use our GitHub
+                application and related services.
               </p>
               <p className="text-gray-600 mb-4">
-                By using GStraccini Bot, you agree to the collection and use of information in accordance with this policy.
+                By using GStraccini Bot, you agree to the collection and use of
+                information in accordance with this policy.
               </p>
             </section>
 
             <section className="mb-8">
-              <h2 className="text-2xl font-semibold text-gray-900 mb-4">Information We Collect</h2>
+              <h2 className="text-2xl font-semibold text-gray-900 mb-4">
+                Information We Collect
+              </h2>
               <p className="text-gray-600 mb-4">
-                When you use GStraccini Bot, we collect information that helps us provide and improve our services:
+                When you use GStraccini Bot, we collect information that helps
+                us provide and improve our services:
               </p>
-              
-              <h3 className="text-lg font-semibold text-gray-800 mb-3">GitHub Account Information</h3>
+
+              <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                GitHub Account Information
+              </h3>
               <ul className="list-disc pl-6 text-gray-600 space-y-2 mb-4">
                 <li>GitHub username and profile information</li>
                 <li>Email address associated with your GitHub account</li>
                 <li>Public profile data (name, avatar, bio)</li>
-                <li>Repository access permissions you grant to our application</li>
+                <li>
+                  Repository access permissions you grant to our application
+                </li>
               </ul>
 
-              <h3 className="text-lg font-semibold text-gray-800 mb-3">Repository Data</h3>
+              <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                Repository Data
+              </h3>
               <ul className="list-disc pl-6 text-gray-600 space-y-2 mb-4">
-                <li>Repository metadata (name, description, language, visibility)</li>
+                <li>
+                  Repository metadata (name, description, language, visibility)
+                </li>
                 <li>Pull request and issue information</li>
-                <li>Commit messages and file changes (when processing commands)</li>
+                <li>
+                  Commit messages and file changes (when processing commands)
+                </li>
                 <li>Branch and tag information</li>
                 <li>Workflow and action configurations</li>
               </ul>
 
-              <h3 className="text-lg font-semibold text-gray-800 mb-3">Usage Information</h3>
+              <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                Usage Information
+              </h3>
               <ul className="list-disc pl-6 text-gray-600 space-y-2">
                 <li>Command usage and interaction history</li>
                 <li>Bot responses and automated actions performed</li>
@@ -69,7 +93,9 @@ export default function PrivacyPage() {
             </section>
 
             <section className="mb-8">
-              <h2 className="text-2xl font-semibold text-gray-900 mb-4">How We Use Your Information</h2>
+              <h2 className="text-2xl font-semibold text-gray-900 mb-4">
+                How We Use Your Information
+              </h2>
               <p className="text-gray-600 mb-4">
                 We use the collected information to:
               </p>
@@ -77,7 +103,9 @@ export default function PrivacyPage() {
                 <li>Provide and maintain our automation services</li>
                 <li>Process commands and execute requested actions</li>
                 <li>Improve and personalize your experience</li>
-                <li>Send important notifications about service changes or updates</li>
+                <li>
+                  Send important notifications about service changes or updates
+                </li>
                 <li>Detect and prevent security incidents and abuse</li>
                 <li>Analyze usage patterns to enhance our features</li>
                 <li>Provide customer support and respond to inquiries</li>
@@ -86,19 +114,28 @@ export default function PrivacyPage() {
             </section>
 
             <section className="mb-8">
-              <h2 className="text-2xl font-semibold text-gray-900 mb-4">Data Sharing and Disclosure</h2>
+              <h2 className="text-2xl font-semibold text-gray-900 mb-4">
+                Data Sharing and Disclosure
+              </h2>
               <p className="text-gray-600 mb-4">
-                We do not sell your personal information. We may share your information in the following circumstances:
+                We do not sell your personal information. We may share your
+                information in the following circumstances:
               </p>
-              
-              <h3 className="text-lg font-semibold text-gray-800 mb-3">With Your Consent</h3>
+
+              <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                With Your Consent
+              </h3>
               <p className="text-gray-600 mb-4">
-                We may share your information when you explicitly consent to such sharing.
+                We may share your information when you explicitly consent to
+                such sharing.
               </p>
 
-              <h3 className="text-lg font-semibold text-gray-800 mb-3">Service Providers</h3>
+              <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                Service Providers
+              </h3>
               <p className="text-gray-600 mb-4">
-                We may share information with third-party service providers who assist in our operations, including:
+                We may share information with third-party service providers who
+                assist in our operations, including:
               </p>
               <ul className="list-disc pl-6 text-gray-600 space-y-2 mb-4">
                 <li>Cloud hosting and infrastructure providers</li>
@@ -107,7 +144,9 @@ export default function PrivacyPage() {
                 <li>Customer support platforms</li>
               </ul>
 
-              <h3 className="text-lg font-semibold text-gray-800 mb-3">Legal Requirements</h3>
+              <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                Legal Requirements
+              </h3>
               <ul className="list-disc pl-6 text-gray-600 space-y-2">
                 <li>To comply with applicable laws and regulations</li>
                 <li>To respond to legal process or government requests</li>
@@ -117,9 +156,12 @@ export default function PrivacyPage() {
             </section>
 
             <section className="mb-8">
-              <h2 className="text-2xl font-semibold text-gray-900 mb-4">Data Security</h2>
+              <h2 className="text-2xl font-semibold text-gray-900 mb-4">
+                Data Security
+              </h2>
               <p className="text-gray-600 mb-4">
-                We implement appropriate technical and organizational security measures to protect your information:
+                We implement appropriate technical and organizational security
+                measures to protect your information:
               </p>
               <ul className="list-disc pl-6 text-gray-600 space-y-2">
                 <li>Encryption of data in transit and at rest</li>
@@ -131,39 +173,59 @@ export default function PrivacyPage() {
             </section>
 
             <section className="mb-8">
-              <h2 className="text-2xl font-semibold text-gray-900 mb-4">Data Retention</h2>
+              <h2 className="text-2xl font-semibold text-gray-900 mb-4">
+                Data Retention
+              </h2>
               <p className="text-gray-600 mb-4">
-                We retain your information for as long as necessary to provide our services and fulfill the purposes outlined in this policy:
+                We retain your information for as long as necessary to provide
+                our services and fulfill the purposes outlined in this policy:
               </p>
               <ul className="list-disc pl-6 text-gray-600 space-y-2">
-                <li>Account information: Until you delete your account or revoke access</li>
+                <li>
+                  Account information: Until you delete your account or revoke
+                  access
+                </li>
                 <li>Command history: Up to 2 years for service improvement</li>
-                <li>System logs: Up to 1 year for security and debugging purposes</li>
-                <li>Analytics data: Aggregated and anonymized data may be retained indefinitely</li>
+                <li>
+                  System logs: Up to 1 year for security and debugging purposes
+                </li>
+                <li>
+                  Analytics data: Aggregated and anonymized data may be retained
+                  indefinitely
+                </li>
               </ul>
             </section>
 
             <section className="mb-8">
-              <h2 className="text-2xl font-semibold text-gray-900 mb-4">Your Rights and Choices</h2>
+              <h2 className="text-2xl font-semibold text-gray-900 mb-4">
+                Your Rights and Choices
+              </h2>
               <p className="text-gray-600 mb-4">
-                You have the following rights regarding your personal information:
+                You have the following rights regarding your personal
+                information:
               </p>
-              
-              <h3 className="text-lg font-semibold text-gray-800 mb-3">Access and Portability</h3>
+
+              <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                Access and Portability
+              </h3>
               <ul className="list-disc pl-6 text-gray-600 space-y-2 mb-4">
                 <li>Request access to your personal information</li>
                 <li>Receive a copy of your data in a portable format</li>
                 <li>View your command history and bot interactions</li>
               </ul>
 
-              <h3 className="text-lg font-semibold text-gray-800 mb-3">Correction and Deletion</h3>
+              <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                Correction and Deletion
+              </h3>
               <ul className="list-disc pl-6 text-gray-600 space-y-2 mb-4">
                 <li>Request correction of inaccurate information</li>
                 <li>Request deletion of your personal data</li>
                 <li>Revoke access permissions at any time through GitHub</li>
               </ul>
 
-              <h3 className="text-lg font-semibold text-gray-800 mb-3">Control and Preferences</h3>
+              <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                Control and Preferences
+              </h3>
               <ul className="list-disc pl-6 text-gray-600 space-y-2">
                 <li>Opt-out of certain data collection practices</li>
                 <li>Update your notification preferences</li>
@@ -173,9 +235,12 @@ export default function PrivacyPage() {
             </section>
 
             <section className="mb-8">
-              <h2 className="text-2xl font-semibold text-gray-900 mb-4">Third-Party Integrations</h2>
+              <h2 className="text-2xl font-semibold text-gray-900 mb-4">
+                Third-Party Integrations
+              </h2>
               <p className="text-gray-600 mb-4">
-                GStraccini Bot integrates with various third-party services to provide enhanced functionality:
+                GStraccini Bot integrates with various third-party services to
+                provide enhanced functionality:
               </p>
               <ul className="list-disc pl-6 text-gray-600 space-y-2">
                 <li>Code quality services (SonarCloud, Codacy, CodeClimate)</li>
@@ -184,33 +249,52 @@ export default function PrivacyPage() {
                 <li>AI services (OpenAI, Llama, Claude)</li>
               </ul>
               <p className="text-gray-600 mt-4">
-                These integrations are subject to their respective privacy policies. We recommend reviewing their policies to understand how they handle your data.
+                These integrations are subject to their respective privacy
+                policies. We recommend reviewing their policies to understand
+                how they handle your data.
               </p>
             </section>
 
             <section className="mb-8">
-              <h2 className="text-2xl font-semibold text-gray-900 mb-4">International Data Transfers</h2>
+              <h2 className="text-2xl font-semibold text-gray-900 mb-4">
+                International Data Transfers
+              </h2>
               <p className="text-gray-600 mb-4">
-                Your information may be transferred to and processed in countries other than your own. We ensure appropriate safeguards are in place for such transfers, including:
+                Your information may be transferred to and processed in
+                countries other than your own. We ensure appropriate safeguards
+                are in place for such transfers, including:
               </p>
               <ul className="list-disc pl-6 text-gray-600 space-y-2">
-                <li>Standard contractual clauses approved by regulatory authorities</li>
-                <li>Adequacy decisions by relevant data protection authorities</li>
+                <li>
+                  Standard contractual clauses approved by regulatory
+                  authorities
+                </li>
+                <li>
+                  Adequacy decisions by relevant data protection authorities
+                </li>
                 <li>Certification schemes and codes of conduct</li>
               </ul>
             </section>
 
             <section className="mb-8">
-              <h2 className="text-2xl font-semibold text-gray-900 mb-4">Children's Privacy</h2>
+              <h2 className="text-2xl font-semibold text-gray-900 mb-4">
+                Children's Privacy
+              </h2>
               <p className="text-gray-600 mb-4">
-                Our services are not intended for children under 13 years of age. We do not knowingly collect personal information from children under 13. If you become aware that a child has provided us with personal information, please contact us immediately.
+                Our services are not intended for children under 13 years of
+                age. We do not knowingly collect personal information from
+                children under 13. If you become aware that a child has provided
+                us with personal information, please contact us immediately.
               </p>
             </section>
 
             <section className="mb-8">
-              <h2 className="text-2xl font-semibold text-gray-900 mb-4">Changes to This Privacy Policy</h2>
+              <h2 className="text-2xl font-semibold text-gray-900 mb-4">
+                Changes to This Privacy Policy
+              </h2>
               <p className="text-gray-600 mb-4">
-                We may update this Privacy Policy from time to time. We will notify you of any changes by:
+                We may update this Privacy Policy from time to time. We will
+                notify you of any changes by:
               </p>
               <ul className="list-disc pl-6 text-gray-600 space-y-2">
                 <li>Posting the new Privacy Policy on this page</li>
@@ -221,21 +305,27 @@ export default function PrivacyPage() {
             </section>
 
             <section>
-              <h2 className="text-2xl font-semibold text-gray-900 mb-4">Contact Us</h2>
+              <h2 className="text-2xl font-semibold text-gray-900 mb-4">
+                Contact Us
+              </h2>
               <p className="text-gray-600 mb-4">
-                If you have any questions about this Privacy Policy or our data practices, please contact us:
+                If you have any questions about this Privacy Policy or our data
+                practices, please contact us:
               </p>
               <div className="bg-gray-50 p-4 rounded-lg">
                 <p className="text-gray-700 mb-2">
-                  <strong>Email:</strong>{' '}
-                  <a href="mailto:privacy@gstraccini-bot.com" className="text-blue-600 hover:text-blue-800">
+                  <strong>Email:</strong>{" "}
+                  <a
+                    href="mailto:privacy@gstraccini-bot.com"
+                    className="text-blue-600 hover:text-blue-800"
+                  >
                     privacy@gstraccini-bot.com
                   </a>
                 </p>
                 <p className="text-gray-700 mb-2">
-                  <strong>GitHub:</strong>{' '}
-                  <a 
-                    href="https://github.com/guibranco/gstraccini-bot-service/issues" 
+                  <strong>GitHub:</strong>{" "}
+                  <a
+                    href="https://github.com/guibranco/gstraccini-bot-service/issues"
                     target="_blank"
                     rel="noopener noreferrer"
                     className="text-blue-600 hover:text-blue-800"
@@ -244,9 +334,9 @@ export default function PrivacyPage() {
                   </a>
                 </p>
                 <p className="text-gray-700">
-                  <strong>Documentation:</strong>{' '}
-                  <a 
-                    href="https://docs.gstraccini.bot/privacy" 
+                  <strong>Documentation:</strong>{" "}
+                  <a
+                    href="https://docs.gstraccini.bot/privacy"
                     target="_blank"
                     rel="noopener noreferrer"
                     className="text-blue-600 hover:text-blue-800"
@@ -263,4 +353,4 @@ export default function PrivacyPage() {
       <LandingFooter />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/PullRequestDetail.tsx b/src/pages/PullRequestDetail.tsx
index c58652b..d4a63f2 100644
--- a/src/pages/PullRequestDetail.tsx
+++ b/src/pages/PullRequestDetail.tsx
@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useState } from "react";
+import { useParams } from "react-router-dom";
 import {
   GitPullRequest,
   User,
@@ -11,11 +11,11 @@ import {
   FileText,
   GitCommit,
   ArrowLeft,
-  ExternalLink
-} from 'lucide-react';
-import { Link } from 'react-router-dom';
-import { CheckRunDiagram } from '../components/pullrequest/CheckRunDiagram';
-import { WorkflowRunDiagram } from '../components/pullrequest/WorkflowRunDiagram';
+  ExternalLink,
+} from "lucide-react";
+import { Link } from "react-router-dom";
+import { CheckRunDiagram } from "../components/pullrequest/CheckRunDiagram";
+import { WorkflowRunDiagram } from "../components/pullrequest/WorkflowRunDiagram";
 
 interface PullRequestDetail {
   id: string;
@@ -39,7 +39,7 @@ interface PullRequestDetail {
       login: string;
       avatar_url: string;
     };
-    state: 'approved' | 'changes_requested' | 'commented';
+    state: "approved" | "changes_requested" | "commented";
     submitted_at: string;
   }>;
   commands: Array<{
@@ -48,7 +48,7 @@ interface PullRequestDetail {
   }>;
   files: Array<{
     name: string;
-    status: 'added' | 'modified' | 'removed';
+    status: "added" | "modified" | "removed";
   }>;
   commits: Array<{
     sha: string;
@@ -60,365 +60,385 @@ interface PullRequestDetail {
   checks: {
     general: Array<{
       name: string;
-      status: 'success' | 'failure' | 'pending';
+      status: "success" | "failure" | "pending";
     }>;
     bot: Array<{
       name: string;
-      status: 'success' | 'failure' | 'pending';
+      status: "success" | "failure" | "pending";
     }>;
   };
 }
 
 // Mock data for demonstration
 const mockPullRequest: PullRequestDetail = {
-  id: '1234',
-  title: 'Fix the issue with X',
+  id: "1234",
+  title: "Fix the issue with X",
   author: {
-    login: 'johndoe',
-    avatar_url: 'https://github.com/johndoe.png'
+    login: "johndoe",
+    avatar_url: "https://github.com/johndoe.png",
   },
-  created_at: '2024-03-15T10:30:00Z',
-  description: 'This PR fixes the issue with X, improves Y, and ensures Z.',
+  created_at: "2024-03-15T10:30:00Z",
+  description: "This PR fixes the issue with X, improves Y, and ensures Z.",
   labels: [
-    { name: 'bug', color: '3b82f6' },
-    { name: 'needs-review', color: 'eab308' }
+    { name: "bug", color: "3b82f6" },
+    { name: "needs-review", color: "eab308" },
   ],
   requested_reviewers: [
-    { login: 'alice', avatar_url: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop' },
-    { login: 'bob', avatar_url: 'https://github.com/bob.png' }
+    {
+      login: "alice",
+      avatar_url:
+        "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop",
+    },
+    { login: "bob", avatar_url: "https://github.com/bob.png" },
   ],
   reviews: [
-    { 
-      user: { login: 'alice', avatar_url: 'https://github.com/alice.png' },
-      state: 'approved',
-      submitted_at: '2024-03-15T11:30:00Z'
+    {
+      user: { login: "alice", avatar_url: "https://github.com/alice.png" },
+      state: "approved",
+      submitted_at: "2024-03-15T11:30:00Z",
     },
     {
-      user: { login: 'bob', avatar_url: 'https://github.com/bob.png' },
-      state: 'changes_requested',
-      submitted_at: '2024-03-15T12:00:00Z'
-    }
+      user: { login: "bob", avatar_url: "https://github.com/bob.png" },
+      state: "changes_requested",
+      submitted_at: "2024-03-15T12:00:00Z",
+    },
   ],
   commands: [
-    { command: '/retest', timestamp: '2024-03-15T12:30:00Z' },
-    { command: '/merge', timestamp: '2024-03-15T13:00:00Z' }
+    { command: "/retest", timestamp: "2024-03-15T12:30:00Z" },
+    { command: "/merge", timestamp: "2024-03-15T13:00:00Z" },
   ],
   files: [
-    { name: 'src/components/App.tsx', status: 'modified' },
-    { name: 'src/utils/helpers.ts', status: 'added' },
-    { name: 'README.md', status: 'modified' }
+    { name: "src/components/App.tsx", status: "modified" },
+    { name: "src/utils/helpers.ts", status: "added" },
+    { name: "README.md", status: "modified" },
   ],
   commits: [
-    { sha: 'abc123', message: 'Initial commit fixing issue X', author: { login: 'johndoe' } },
-    { sha: 'def456', message: 'Refactored file Y', author: { login: 'alice' } }
+    {
+      sha: "abc123",
+      message: "Initial commit fixing issue X",
+      author: { login: "johndoe" },
+    },
+    { sha: "def456", message: "Refactored file Y", author: { login: "alice" } },
   ],
   checks: {
     general: [
-      { name: 'CI/CD', status: 'success' },
-      { name: 'Lint', status: 'success' },
-      { name: 'Unit Tests', status: 'failure' }
+      { name: "CI/CD", status: "success" },
+      { name: "Lint", status: "success" },
+      { name: "Unit Tests", status: "failure" },
     ],
     bot: [
-      { name: 'Check Commit', status: 'success' },
-      { name: 'Check Pull Request', status: 'success' },
-      { name: 'Check Pull Request Description', status: 'success' },
-      { name: 'Check Pull Request Content', status: 'failure' },
-      { name: 'Check Pull Request Size', status: 'pending' }
-    ]
-  }
+      { name: "Check Commit", status: "success" },
+      { name: "Check Pull Request", status: "success" },
+      { name: "Check Pull Request Description", status: "success" },
+      { name: "Check Pull Request Content", status: "failure" },
+      { name: "Check Pull Request Size", status: "pending" },
+    ],
+  },
 };
 
 const mockCheckRunEvents: Event[] = [
   {
-    delivery_id: 'check1',
-    type: 'check_run',
-    action: 'created',
-    date: '2024-03-15T10:35:00Z',
+    delivery_id: "check1",
+    type: "check_run",
+    action: "created",
+    date: "2024-03-15T10:35:00Z",
     payload: {
       check_run: {
-        name: 'SonarCloud Code Analysis',
+        name: "SonarCloud Code Analysis",
         app: {
-          id: 'sonarcloud',
-          name: 'SonarCloud'
+          id: "sonarcloud",
+          name: "SonarCloud",
         },
         conclusion: null,
-        status: 'queued'
+        status: "queued",
       },
       sender: {
-        login: 'sonarcloud[bot]',
-        avatar_url: 'https://avatars.githubusercontent.com/ml/1581?s=82&v=4'
-      }
-    }
+        login: "sonarcloud[bot]",
+        avatar_url: "https://avatars.githubusercontent.com/ml/1581?s=82&v=4",
+      },
+    },
   },
   {
-    delivery_id: 'check2',
-    type: 'check_run',
-    action: 'in_progress',
-    date: '2024-03-15T10:36:00Z',
+    delivery_id: "check2",
+    type: "check_run",
+    action: "in_progress",
+    date: "2024-03-15T10:36:00Z",
     payload: {
       check_run: {
-        name: 'SonarCloud Code Analysis',
+        name: "SonarCloud Code Analysis",
         app: {
-          id: 'sonarcloud',
-          name: 'SonarCloud'
+          id: "sonarcloud",
+          name: "SonarCloud",
         },
         conclusion: null,
-        status: 'in_progress'
+        status: "in_progress",
       },
       sender: {
-        login: 'sonarcloud[bot]',
-        avatar_url: 'https://avatars.githubusercontent.com/ml/1581?s=82&v=4'
-      }
-    }
+        login: "sonarcloud[bot]",
+        avatar_url: "https://avatars.githubusercontent.com/ml/1581?s=82&v=4",
+      },
+    },
   },
   {
-    delivery_id: 'check3',
-    type: 'check_run',
-    action: 'completed',
-    date: '2024-03-15T10:40:00Z',
+    delivery_id: "check3",
+    type: "check_run",
+    action: "completed",
+    date: "2024-03-15T10:40:00Z",
     payload: {
       check_run: {
-        name: 'SonarCloud Code Analysis',
+        name: "SonarCloud Code Analysis",
         app: {
-          id: 'sonarcloud',
-          name: 'SonarCloud'
+          id: "sonarcloud",
+          name: "SonarCloud",
         },
-        conclusion: 'success',
-        status: 'completed'
+        conclusion: "success",
+        status: "completed",
       },
       sender: {
-        login: 'sonarcloud[bot]',
-        avatar_url: 'https://avatars.githubusercontent.com/ml/1581?s=82&v=4'
-      }
-    }
+        login: "sonarcloud[bot]",
+        avatar_url: "https://avatars.githubusercontent.com/ml/1581?s=82&v=4",
+      },
+    },
   },
   {
-    delivery_id: 'check4',
-    type: 'check_run',
-    action: 'created',
-    date: '2024-03-15T10:41:00Z',
+    delivery_id: "check4",
+    type: "check_run",
+    action: "created",
+    date: "2024-03-15T10:41:00Z",
     payload: {
       check_run: {
-        name: 'Snyk Security Scan',
+        name: "Snyk Security Scan",
         app: {
-          id: 'snyk',
-          name: 'Snyk'
+          id: "snyk",
+          name: "Snyk",
         },
         conclusion: null,
-        status: 'queued'
+        status: "queued",
       },
       sender: {
-        login: 'snyk[bot]',
-        avatar_url: 'https://avatars.githubusercontent.com/in/23347?s=48&u=4f40f857a88bf3c2849770799b3ff765242ecfce&v=4'
-      }
-    }
+        login: "snyk[bot]",
+        avatar_url:
+          "https://avatars.githubusercontent.com/in/23347?s=48&u=4f40f857a88bf3c2849770799b3ff765242ecfce&v=4",
+      },
+    },
   },
   {
-    delivery_id: 'check5',
-    type: 'check_run',
-    action: 'completed',
-    date: '2024-03-15T10:45:00Z',
+    delivery_id: "check5",
+    type: "check_run",
+    action: "completed",
+    date: "2024-03-15T10:45:00Z",
     payload: {
       check_run: {
-        name: 'Snyk Security Scan',
+        name: "Snyk Security Scan",
         app: {
-          id: 'snyk',
-          name: 'Snyk'
+          id: "snyk",
+          name: "Snyk",
         },
-        conclusion: 'failure',
-        status: 'completed'
+        conclusion: "failure",
+        status: "completed",
       },
       sender: {
-        login: 'snyk[bot]',
-        avatar_url: 'https://avatars.githubusercontent.com/in/23347?s=48&u=4f40f857a88bf3c2849770799b3ff765242ecfce&v=4'
-      }
-    }
+        login: "snyk[bot]",
+        avatar_url:
+          "https://avatars.githubusercontent.com/in/23347?s=48&u=4f40f857a88bf3c2849770799b3ff765242ecfce&v=4",
+      },
+    },
   },
   {
-    delivery_id: 'check6',
-    type: 'check_run',
-    action: 'created',
-    date: '2024-03-15T10:46:00Z',
+    delivery_id: "check6",
+    type: "check_run",
+    action: "created",
+    date: "2024-03-15T10:46:00Z",
     payload: {
       check_run: {
-        name: 'Codecov Coverage',
+        name: "Codecov Coverage",
         app: {
-          id: 'codecov',
-          name: 'Codecov'
+          id: "codecov",
+          name: "Codecov",
         },
         conclusion: null,
-        status: 'queued'
+        status: "queued",
       },
       sender: {
-        login: 'codecov[bot]',
-        avatar_url: 'https://avatars.githubusercontent.com/in/254?s=30&u=c392dd7c2afc51fe2347d4296afa8494ac05772e&v=4'
-      }
-    }
+        login: "codecov[bot]",
+        avatar_url:
+          "https://avatars.githubusercontent.com/in/254?s=30&u=c392dd7c2afc51fe2347d4296afa8494ac05772e&v=4",
+      },
+    },
   },
   {
-    delivery_id: 'check7',
-    type: 'check_run',
-    action: 'completed',
-    date: '2024-03-15T10:48:00Z',
+    delivery_id: "check7",
+    type: "check_run",
+    action: "completed",
+    date: "2024-03-15T10:48:00Z",
     payload: {
       check_run: {
-        name: 'Codecov Coverage',
+        name: "Codecov Coverage",
         app: {
-          id: 'codecov',
-          name: 'Codecov'
+          id: "codecov",
+          name: "Codecov",
         },
-        conclusion: 'success',
-        status: 'completed'
+        conclusion: "success",
+        status: "completed",
       },
       sender: {
-        login: 'codecov[bot]',
-        avatar_url: 'https://avatars.githubusercontent.com/in/254?s=30&u=c392dd7c2afc51fe2347d4296afa8494ac05772e&v=4'
-      }
-    }
-  }
+        login: "codecov[bot]",
+        avatar_url:
+          "https://avatars.githubusercontent.com/in/254?s=30&u=c392dd7c2afc51fe2347d4296afa8494ac05772e&v=4",
+      },
+    },
+  },
 ];
 
 const mockWorkflowEvents: Event[] = [
   {
-    delivery_id: 'workflow1',
-    type: 'workflow_run',
-    action: 'requested',
-    date: '2024-03-15T10:31:00Z',
+    delivery_id: "workflow1",
+    type: "workflow_run",
+    action: "requested",
+    date: "2024-03-15T10:31:00Z",
     payload: {
       workflow_run: {
-        name: 'CI Pipeline',
+        name: "CI Pipeline",
         app: {
-          id: 'github-actions',
-          name: 'GitHub Actions'
+          id: "github-actions",
+          name: "GitHub Actions",
         },
-        status: 'queued'
+        status: "queued",
       },
       sender: {
-        login: 'github-actions[bot]',
-        avatar_url: 'https://avatars.githubusercontent.com/in/57789?v=4'
-      }
-    }
+        login: "github-actions[bot]",
+        avatar_url: "https://avatars.githubusercontent.com/in/57789?v=4",
+      },
+    },
   },
   {
-    delivery_id: 'workflow2',
-    type: 'workflow_run',
-    action: 'in_progress',
-    date: '2024-03-15T10:32:00Z',
+    delivery_id: "workflow2",
+    type: "workflow_run",
+    action: "in_progress",
+    date: "2024-03-15T10:32:00Z",
     payload: {
       workflow_run: {
-        name: 'CI Pipeline',
+        name: "CI Pipeline",
         app: {
-          id: 'github-actions',
-          name: 'GitHub Actions'
+          id: "github-actions",
+          name: "GitHub Actions",
         },
-        status: 'in_progress'
+        status: "in_progress",
       },
       sender: {
-        login: 'github-actions[bot]',
-        avatar_url: 'https://avatars.githubusercontent.com/in/57789?v=4'
-      }
-    }
+        login: "github-actions[bot]",
+        avatar_url: "https://avatars.githubusercontent.com/in/57789?v=4",
+      },
+    },
   },
   {
-    delivery_id: 'workflow3',
-    type: 'workflow_run',
-    action: 'completed',
-    date: '2024-03-15T10:35:00Z',
+    delivery_id: "workflow3",
+    type: "workflow_run",
+    action: "completed",
+    date: "2024-03-15T10:35:00Z",
     payload: {
       workflow_run: {
-        name: 'CI Pipeline',
+        name: "CI Pipeline",
         app: {
-          id: 'github-actions',
-          name: 'GitHub Actions'
+          id: "github-actions",
+          name: "GitHub Actions",
         },
-        conclusion: 'success',
-        status: 'completed'
+        conclusion: "success",
+        status: "completed",
       },
       sender: {
-        login: 'github-actions[bot]',
-        avatar_url: 'https://avatars.githubusercontent.com/in/57789?v=4'
-      }
-    }
+        login: "github-actions[bot]",
+        avatar_url: "https://avatars.githubusercontent.com/in/57789?v=4",
+      },
+    },
   },
   {
-    delivery_id: 'workflow4',
-    type: 'workflow_run',
-    action: 'requested',
-    date: '2024-03-15T10:36:00Z',
+    delivery_id: "workflow4",
+    type: "workflow_run",
+    action: "requested",
+    date: "2024-03-15T10:36:00Z",
     payload: {
       workflow_run: {
-        name: 'Deploy Preview',
+        name: "Deploy Preview",
         app: {
-          id: 'github-actions',
-          name: 'GitHub Actions'
+          id: "github-actions",
+          name: "GitHub Actions",
         },
-        status: 'queued'
+        status: "queued",
       },
       sender: {
-        login: 'github-actions[bot]',
-        avatar_url: 'https://avatars.githubusercontent.com/in/57789?v=4'
-      }
-    }
+        login: "github-actions[bot]",
+        avatar_url: "https://avatars.githubusercontent.com/in/57789?v=4",
+      },
+    },
   },
   {
-    delivery_id: 'workflow5',
-    type: 'workflow_run',
-    action: 'in_progress',
-    date: '2024-03-15T10:37:00Z',
+    delivery_id: "workflow5",
+    type: "workflow_run",
+    action: "in_progress",
+    date: "2024-03-15T10:37:00Z",
     payload: {
       workflow_run: {
-        name: 'Deploy Preview',
+        name: "Deploy Preview",
         app: {
-          id: 'github-actions',
-          name: 'GitHub Actions'
+          id: "github-actions",
+          name: "GitHub Actions",
         },
-        status: 'in_progress'
+        status: "in_progress",
       },
       sender: {
-        login: 'github-actions[bot]',
-        avatar_url: 'https://avatars.githubusercontent.com/in/57789?v=4'
-      }
-    }
+        login: "github-actions[bot]",
+        avatar_url: "https://avatars.githubusercontent.com/in/57789?v=4",
+      },
+    },
   },
   {
-    delivery_id: 'workflow6',
-    type: 'workflow_run',
-    action: 'completed',
-    date: '2024-03-15T10:40:00Z',
+    delivery_id: "workflow6",
+    type: "workflow_run",
+    action: "completed",
+    date: "2024-03-15T10:40:00Z",
     payload: {
       workflow_run: {
-        name: 'Deploy Preview',
+        name: "Deploy Preview",
         app: {
-          id: 'github-actions',
-          name: 'GitHub Actions'
+          id: "github-actions",
+          name: "GitHub Actions",
         },
-        conclusion: 'success',
-        status: 'completed'
+        conclusion: "success",
+        status: "completed",
       },
       sender: {
-        login: 'github-actions[bot]',
-        avatar_url: 'https://avatars.githubusercontent.com/in/57789?v=4'
-      }
-    }
-  }
+        login: "github-actions[bot]",
+        avatar_url: "https://avatars.githubusercontent.com/in/57789?v=4",
+      },
+    },
+  },
 ];
 
-const StatusIcon = ({ status }: { status: 'success' | 'failure' | 'pending' }) => {
+const StatusIcon = ({
+  status,
+}: {
+  status: "success" | "failure" | "pending";
+}) => {
   switch (status) {
-    case 'success':
+    case "success":
       return <CheckCircle2 className="w-5 h-5 text-green-500" />;
-    case 'failure':
+    case "failure":
       return <XCircle className="w-5 h-5 text-red-500" />;
-    case 'pending':
+    case "pending":
       return <Clock className="w-5 h-5 text-yellow-500" />;
   }
 };
 
-const ReviewStateIcon = ({ state }: { state: 'approved' | 'changes_requested' | 'commented' }) => {
+const ReviewStateIcon = ({
+  state,
+}: {
+  state: "approved" | "changes_requested" | "commented";
+}) => {
   switch (state) {
-    case 'approved':
+    case "approved":
       return <CheckCircle2 className="w-5 h-5 text-green-500" />;
-    case 'changes_requested':
+    case "changes_requested":
       return <XCircle className="w-5 h-5 text-red-500" />;
     default:
       return <AlertTriangle className="w-5 h-5 text-yellow-500" />;
@@ -467,11 +487,11 @@ export function PullRequestDetail() {
                   className="w-6 h-6 rounded-full"
                 />
                 <span>
-                  Opened by <strong>@{pr.author.login}</strong> on{' '}
-                  {new Date(pr.created_at).toLocaleDateString('en-US', {
-                    month: 'short',
-                    day: 'numeric',
-                    year: 'numeric'
+                  Opened by <strong>@{pr.author.login}</strong> on{" "}
+                  {new Date(pr.created_at).toLocaleDateString("en-US", {
+                    month: "short",
+                    day: "numeric",
+                    year: "numeric",
                   })}
                 </span>
               </div>
@@ -479,21 +499,25 @@ export function PullRequestDetail() {
           </div>
 
           <div className="mt-6">
-            <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-2">Description</h2>
+            <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+              Description
+            </h2>
             <p className="text-gray-600 dark:text-gray-300">{pr.description}</p>
           </div>
 
           {/* Labels */}
           <div className="mt-6">
-            <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-2">Labels</h2>
+            <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+              Labels
+            </h2>
             <div className="flex flex-wrap gap-2">
-              {pr.labels.map(label => (
+              {pr.labels.map((label) => (
                 <span
                   key={label.name}
                   className="px-3 py-1 rounded-full text-sm font-medium"
                   style={{
                     backgroundColor: `#${label.color}20`,
-                    color: `#${label.color}`
+                    color: `#${label.color}`,
                   }}
                 >
                   {label.name}
@@ -508,15 +532,20 @@ export function PullRequestDetail() {
               Requested Reviewers
             </h2>
             <div className="space-y-2">
-              {pr.requested_reviewers.map(reviewer => (
-                <div key={reviewer.login} className="flex items-center space-x-2">
+              {pr.requested_reviewers.map((reviewer) => (
+                <div
+                  key={reviewer.login}
+                  className="flex items-center space-x-2"
+                >
                   <User className="w-5 h-5 text-gray-400" />
                   <img
                     src={reviewer.avatar_url}
                     alt={reviewer.login}
                     className="w-6 h-6 rounded-full"
                   />
-                  <span className="text-gray-600 dark:text-gray-300">@{reviewer.login}</span>
+                  <span className="text-gray-600 dark:text-gray-300">
+                    @{reviewer.login}
+                  </span>
                 </div>
               ))}
             </div>
@@ -524,7 +553,9 @@ export function PullRequestDetail() {
 
           {/* Reviews */}
           <div className="mt-6">
-            <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-2">Reviews</h2>
+            <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+              Reviews
+            </h2>
             <div className="space-y-2">
               {pr.reviews.map((review, index) => (
                 <div key={index} className="flex items-center space-x-2">
@@ -535,7 +566,7 @@ export function PullRequestDetail() {
                     className="w-6 h-6 rounded-full"
                   />
                   <span className="text-gray-600 dark:text-gray-300">
-                    @{review.user.login} ({review.state.replace('_', ' ')})
+                    @{review.user.login} ({review.state.replace("_", " ")})
                   </span>
                 </div>
               ))}
@@ -544,10 +575,15 @@ export function PullRequestDetail() {
 
           {/* Commands */}
           <div className="mt-6">
-            <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-2">Commands</h2>
+            <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+              Commands
+            </h2>
             <div className="space-y-2">
               {pr.commands.map((cmd, index) => (
-                <div key={index} className="flex items-center space-x-2 text-gray-600 dark:text-gray-300">
+                <div
+                  key={index}
+                  className="flex items-center space-x-2 text-gray-600 dark:text-gray-300"
+                >
                   <Terminal className="w-5 h-5" />
                   <code className="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">
                     {cmd.command}
@@ -565,17 +601,25 @@ export function PullRequestDetail() {
       {/* Files Changed */}
       <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg mb-8">
         <div className="p-6">
-          <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Files Changed</h2>
+          <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
+            Files Changed
+          </h2>
           <div className="space-y-2">
-            {pr.files.map(file => (
+            {pr.files.map((file) => (
               <div key={file.name} className="flex items-center space-x-2">
                 <FileText className="w-5 h-5 text-gray-400" />
-                <span className="text-gray-600 dark:text-gray-300">{file.name}</span>
-                <span className={`text-sm ${
-                  file.status === 'added' ? 'text-green-500' :
-                  file.status === 'removed' ? 'text-red-500' :
-                  'text-yellow-500'
-                }`}>
+                <span className="text-gray-600 dark:text-gray-300">
+                  {file.name}
+                </span>
+                <span
+                  className={`text-sm ${
+                    file.status === "added"
+                      ? "text-green-500"
+                      : file.status === "removed"
+                        ? "text-red-500"
+                        : "text-yellow-500"
+                  }`}
+                >
                   ({file.status})
                 </span>
               </div>
@@ -587,15 +631,19 @@ export function PullRequestDetail() {
       {/* Commits */}
       <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg mb-8">
         <div className="p-6">
-          <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Commits</h2>
+          <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
+            Commits
+          </h2>
           <div className="space-y-2">
-            {pr.commits.map(commit => (
+            {pr.commits.map((commit) => (
               <div key={commit.sha} className="flex items-center space-x-2">
                 <GitCommit className="w-5 h-5 text-gray-400" />
                 <code className="text-sm bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">
                   {commit.sha.substring(0, 7)}
                 </code>
-                <span className="text-gray-600 dark:text-gray-300">{commit.message}</span>
+                <span className="text-gray-600 dark:text-gray-300">
+                  {commit.message}
+                </span>
                 <span className="text-gray-400">by @{commit.author.login}</span>
               </div>
             ))}
@@ -618,10 +666,12 @@ export function PullRequestDetail() {
               Check Status (General)
             </h2>
             <div className="space-y-2">
-              {pr.checks.general.map(check => (
+              {pr.checks.general.map((check) => (
                 <div key={check.name} className="flex items-center space-x-2">
                   <StatusIcon status={check.status} />
-                  <span className="text-gray-600 dark:text-gray-300">{check.name}</span>
+                  <span className="text-gray-600 dark:text-gray-300">
+                    {check.name}
+                  </span>
                 </div>
               ))}
             </div>
@@ -635,10 +685,12 @@ export function PullRequestDetail() {
               Check Status (Bot)
             </h2>
             <div className="space-y-2">
-              {pr.checks.bot.map(check => (
+              {pr.checks.bot.map((check) => (
                 <div key={check.name} className="flex items-center space-x-2">
                   <StatusIcon status={check.status} />
-                  <span className="text-gray-600 dark:text-gray-300">{check.name}</span>
+                  <span className="text-gray-600 dark:text-gray-300">
+                    {check.name}
+                  </span>
                 </div>
               ))}
             </div>
@@ -647,4 +699,4 @@ export function PullRequestDetail() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/PullRequests.tsx b/src/pages/PullRequests.tsx
index 4300e19..9d84984 100644
--- a/src/pages/PullRequests.tsx
+++ b/src/pages/PullRequests.tsx
@@ -1,34 +1,51 @@
-import { useState, useEffect } from 'react';
-import type { PullRequest } from '../types';
-import { PullRequestFilters } from '../components/pullrequests/PullRequestFilters';
-import { PullRequestGroup } from '../components/pullrequests/PullRequestGroup';
+import { useState, useEffect } from "react";
+import type { PullRequest } from "../types";
+import { PullRequestFilters } from "../components/pullrequests/PullRequestFilters";
+import { PullRequestGroup } from "../components/pullrequests/PullRequestGroup";
 
 interface GroupedPullRequests {
   [owner: string]: PullRequest[];
 }
 
-const stateOrder = ['success', 'failure', 'pending', 'error', 'skipped', ''] as const;
+const stateOrder = [
+  "success",
+  "failure",
+  "pending",
+  "error",
+  "skipped",
+  "",
+] as const;
 
 export function PullRequests() {
   const [isLoading, setIsLoading] = useState(true);
   const [pullRequests, setPullRequests] = useState<PullRequest[]>([]);
-  const [groupedPullRequests, setGroupedPullRequests] = useState<GroupedPullRequests>({});
+  const [groupedPullRequests, setGroupedPullRequests] =
+    useState<GroupedPullRequests>({});
   const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
   const [selectedOwners, setSelectedOwners] = useState<string[]>([]);
   const [selectedSenders, setSelectedSenders] = useState<string[]>([]);
   const [selectedStates, setSelectedStates] = useState<string[]>([]);
   const [selectedLabels, setSelectedLabels] = useState<string[]>([]);
   const [isFiltersExpanded, setIsFiltersExpanded] = useState(false);
-  const [allLabels, setAllLabels] = useState<Array<{ name: string; color: string }>>([]);
+  const [allLabels, setAllLabels] = useState<
+    Array<{ name: string; color: string }>
+  >([]);
 
-  const stateOptions = stateOrder.map(state => ({
+  const stateOptions = stateOrder.map((state) => ({
     value: state,
     label: state.charAt(0).toUpperCase() + state.slice(1),
-    color: state === 'success' ? '22c55e' :
-           state === 'failure' ? 'ef4444' :
-           state === 'pending' ? 'eab308' :
-           state === 'error' ? 'ef4444' :
-           state === 'skipped' ? '6b7280' : '6b7280'
+    color:
+      state === "success"
+        ? "22c55e"
+        : state === "failure"
+          ? "ef4444"
+          : state === "pending"
+            ? "eab308"
+            : state === "error"
+              ? "ef4444"
+              : state === "skipped"
+                ? "6b7280"
+                : "6b7280",
   }));
 
   useEffect(() => {
@@ -38,60 +55,69 @@ export function PullRequests() {
         // In a real app, this would be an API call
         const mockPullRequests: PullRequest[] = [
           {
-            url: 'https://github.com/org/repo1/pull/45',
-            title: 'Feature: Add new authentication system',
-            repository: 'repo1',
-            full_name: 'org/repo1',
-            created_at: '2024-03-10T10:30:00Z',
-            state: 'success',
-            owner: 'Organization 1',
+            url: "https://github.com/org/repo1/pull/45",
+            title: "Feature: Add new authentication system",
+            repository: "repo1",
+            full_name: "org/repo1",
+            created_at: "2024-03-10T10:30:00Z",
+            state: "success",
+            owner: "Organization 1",
             labels: [
-              { name: 'feature', color: '0d6efd', description: 'New feature' },
-              { name: 'security', color: 'dc3545', description: 'Security related' }
+              { name: "feature", color: "0d6efd", description: "New feature" },
+              {
+                name: "security",
+                color: "dc3545",
+                description: "Security related",
+              },
             ],
             sender: {
-              login: 'alice',
-              name: 'Alice Johnson',
-              avatar_url: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop',
-              html_url: 'https://github.com/alice'
-            }
+              login: "alice",
+              name: "Alice Johnson",
+              avatar_url:
+                "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop",
+              html_url: "https://github.com/alice",
+            },
           },
           {
-            url: 'https://github.com/org/repo2/pull/44',
-            title: 'Fix: Resolve memory leak in worker process',
-            repository: 'repo2',
-            full_name: 'org/repo2',
-            created_at: '2024-03-09T15:20:00Z',
-            state: 'pending',
-            owner: 'Organization 1',
-            labels: [
-              { name: 'bug', color: 'dc3545', description: 'Bug fix' }
-            ],
+            url: "https://github.com/org/repo2/pull/44",
+            title: "Fix: Resolve memory leak in worker process",
+            repository: "repo2",
+            full_name: "org/repo2",
+            created_at: "2024-03-09T15:20:00Z",
+            state: "pending",
+            owner: "Organization 1",
+            labels: [{ name: "bug", color: "dc3545", description: "Bug fix" }],
             sender: {
-              login: 'bob',
-              name: 'Bob Smith',
-              avatar_url: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=100&h=100&fit=crop',
-              html_url: 'https://github.com/bob'
-            }
+              login: "bob",
+              name: "Bob Smith",
+              avatar_url:
+                "https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=100&h=100&fit=crop",
+              html_url: "https://github.com/bob",
+            },
           },
           {
-            url: 'https://github.com/org2/repo3/pull/43',
-            title: 'Docs: Update API documentation',
-            repository: 'repo3',
-            full_name: 'org2/repo3',
-            created_at: '2024-03-08T09:15:00Z',
-            state: 'failure',
-            owner: 'Organization 2',
+            url: "https://github.com/org2/repo3/pull/43",
+            title: "Docs: Update API documentation",
+            repository: "repo3",
+            full_name: "org2/repo3",
+            created_at: "2024-03-08T09:15:00Z",
+            state: "failure",
+            owner: "Organization 2",
             labels: [
-              { name: 'documentation', color: '6f42c1', description: 'Documentation update' }
+              {
+                name: "documentation",
+                color: "6f42c1",
+                description: "Documentation update",
+              },
             ],
             sender: {
-              login: 'carol',
-              name: 'Carol Williams',
-              avatar_url: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop',
-              html_url: 'https://github.com/carol'
-            }
-          }
+              login: "carol",
+              name: "Carol Williams",
+              avatar_url:
+                "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop",
+              html_url: "https://github.com/carol",
+            },
+          },
         ];
 
         // Sort pull requests by state order
@@ -104,46 +130,57 @@ export function PullRequests() {
         // Extract unique labels
         const uniqueLabels = Array.from(
           new Set(
-            mockPullRequests.flatMap(pr => pr.labels || [])
-              .map(label => JSON.stringify(label))
-          )
-        ).map(str => JSON.parse(str));
+            mockPullRequests
+              .flatMap((pr) => pr.labels || [])
+              .map((label) => JSON.stringify(label)),
+          ),
+        ).map((str) => JSON.parse(str));
         setAllLabels(uniqueLabels);
-        
+
         // Filter pull requests
-        const filteredPRs = mockPullRequests.filter(pr => {
-          if (selectedOwners.length > 0 && !selectedOwners.includes(pr.owner || 'Unknown')) return false;
-          if (selectedSenders.length > 0 && !selectedSenders.includes(pr.sender.login)) return false;
-          if (selectedStates.length > 0 && !selectedStates.includes(pr.state)) return false;
+        const filteredPRs = mockPullRequests.filter((pr) => {
+          if (
+            selectedOwners.length > 0 &&
+            !selectedOwners.includes(pr.owner || "Unknown")
+          )
+            return false;
+          if (
+            selectedSenders.length > 0 &&
+            !selectedSenders.includes(pr.sender.login)
+          )
+            return false;
+          if (selectedStates.length > 0 && !selectedStates.includes(pr.state))
+            return false;
           if (selectedLabels.length > 0) {
-            const prLabels = pr.labels?.map(l => l.name) || [];
-            if (!selectedLabels.some(label => prLabels.includes(label))) return false;
+            const prLabels = pr.labels?.map((l) => l.name) || [];
+            if (!selectedLabels.some((label) => prLabels.includes(label)))
+              return false;
           }
           return true;
         });
 
         // Group pull requests by owner
         const grouped = filteredPRs.reduce((acc, pr) => {
-          const owner = pr.owner || 'Unknown';
+          const owner = pr.owner || "Unknown";
           if (!acc[owner]) {
             acc[owner] = [];
           }
           acc[owner].push(pr);
           return acc;
         }, {} as GroupedPullRequests);
-        
+
         // Sort pull requests within each group by state
-        Object.keys(grouped).forEach(owner => {
+        Object.keys(grouped).forEach((owner) => {
           grouped[owner].sort((a, b) => {
             return stateOrder.indexOf(a.state) - stateOrder.indexOf(b.state);
           });
         });
-        
+
         setGroupedPullRequests(grouped);
         setExpandedGroups(new Set(Object.keys(grouped)));
         setIsLoading(false);
       } catch (error) {
-        console.error('Error fetching pull requests:', error);
+        console.error("Error fetching pull requests:", error);
         setIsLoading(false);
       }
     };
@@ -152,7 +189,7 @@ export function PullRequests() {
   }, [selectedOwners, selectedSenders, selectedStates, selectedLabels]);
 
   const toggleGroup = (owner: string) => {
-    setExpandedGroups(prev => {
+    setExpandedGroups((prev) => {
       const next = new Set(prev);
       if (next.has(owner)) {
         next.delete(owner);
@@ -163,19 +200,20 @@ export function PullRequests() {
     });
   };
 
-  const ownerOptions = Array.from(new Set(pullRequests.map(pr => pr.owner || 'Unknown'))).map(owner => ({
+  const ownerOptions = Array.from(
+    new Set(pullRequests.map((pr) => pr.owner || "Unknown")),
+  ).map((owner) => ({
     value: owner,
     label: owner,
   }));
 
   const senderOptions = Array.from(
-    new Set(pullRequests.map(pr => pr.sender))
-      .values()
-  ).map(sender => ({
+    new Set(pullRequests.map((pr) => pr.sender)).values(),
+  ).map((sender) => ({
     value: sender.login,
     label: sender.name || sender.login,
     avatar: sender.avatar_url,
-    description: `@${sender.login}`
+    description: `@${sender.login}`,
   }));
 
   const clearFilters = () => {
@@ -199,10 +237,10 @@ export function PullRequests() {
         ownerOptions={ownerOptions}
         senderOptions={senderOptions}
         stateOptions={stateOptions}
-        labelOptions={allLabels.map(label => ({
+        labelOptions={allLabels.map((label) => ({
           value: label.name,
           label: label.name,
-          color: label.color
+          color: label.color,
         }))}
         selectedOwners={selectedOwners}
         selectedSenders={selectedSenders}
@@ -223,19 +261,24 @@ export function PullRequests() {
             Assigned Pull Requests
           </h1>
           <span className="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-100 rounded-full text-sm font-medium">
-            {Object.values(groupedPullRequests).reduce((acc, curr) => acc + curr.length, 0)}
+            {Object.values(groupedPullRequests).reduce(
+              (acc, curr) => acc + curr.length,
+              0,
+            )}
           </span>
         </div>
 
-        {Object.entries(groupedPullRequests).map(([owner, ownerPullRequests]) => (
-          <PullRequestGroup
-            key={owner}
-            owner={owner}
-            pullRequests={ownerPullRequests}
-            isExpanded={expandedGroups.has(owner)}
-            onToggle={() => toggleGroup(owner)}
-          />
-        ))}
+        {Object.entries(groupedPullRequests).map(
+          ([owner, ownerPullRequests]) => (
+            <PullRequestGroup
+              key={owner}
+              owner={owner}
+              pullRequests={ownerPullRequests}
+              isExpanded={expandedGroups.has(owner)}
+              onToggle={() => toggleGroup(owner)}
+            />
+          ),
+        )}
 
         {Object.keys(groupedPullRequests).length === 0 && (
           <div className="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
@@ -245,4 +288,4 @@ export function PullRequests() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Repositories.tsx b/src/pages/Repositories.tsx
index eb17d16..aaf0090 100644
--- a/src/pages/Repositories.tsx
+++ b/src/pages/Repositories.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 import {
   Star,
   GitFork,
@@ -8,30 +8,34 @@ import {
   Check,
   X,
   Filter,
-  Search
-} from 'lucide-react';
-import { TokenSelect } from '../components/TokenSelect';
-import { mockRepositories } from '../mockData';
-import type { Repository } from '../types';
-import { Link } from 'react-router-dom';
+  Search,
+} from "lucide-react";
+import { TokenSelect } from "../components/TokenSelect";
+import { mockRepositories } from "../mockData";
+import type { Repository } from "../types";
+import { Link } from "react-router-dom";
 
 export function Repositories() {
   const [repositories, setRepositories] = useState<Repository[]>([]);
-  const [selectedOrganizations, setSelectedOrganizations] = useState<string[]>([]);
+  const [selectedOrganizations, setSelectedOrganizations] = useState<string[]>(
+    [],
+  );
   const [selectedLanguages, setSelectedLanguages] = useState<string[]>([]);
-  const [selectedVisibilities, setSelectedVisibilities] = useState<string[]>([]);
+  const [selectedVisibilities, setSelectedVisibilities] = useState<string[]>(
+    [],
+  );
   const [selectedTypes, setSelectedTypes] = useState<string[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [isFiltersExpanded, setIsFiltersExpanded] = useState(false);
 
   const visibilityOptions = [
-    { value: 'public', label: 'Public', color: '22c55e' },
-    { value: 'private', label: 'Private', color: 'ef4444' }
+    { value: "public", label: "Public", color: "22c55e" },
+    { value: "private", label: "Private", color: "ef4444" },
   ];
 
   const typeOptions = [
-    { value: 'source', label: 'Source', color: '3b82f6' },
-    { value: 'fork', label: 'Fork', color: '8b5cf6' }
+    { value: "source", label: "Source", color: "3b82f6" },
+    { value: "fork", label: "Fork", color: "8b5cf6" },
   ];
 
   useEffect(() => {
@@ -45,30 +49,42 @@ export function Repositories() {
   }, []);
 
   const organizationOptions = Array.from(
-    new Set(repositories.map(repo => repo.organization))
-  ).map(org => {
-    const repo = repositories.find(r => r.organization === org);
+    new Set(repositories.map((repo) => repo.organization)),
+  ).map((org) => {
+    const repo = repositories.find((r) => r.organization === org);
     return {
       value: org,
       label: org,
-      avatar: repo?.organization_avatar
+      avatar: repo?.organization_avatar,
     };
   });
 
   const languageOptions = Array.from(
-    new Set(repositories.map(repo => repo.language))
-  ).map(lang => ({
+    new Set(repositories.map((repo) => repo.language)),
+  ).map((lang) => ({
     value: lang,
     label: lang,
-    color: getLanguageColor(lang)
+    color: getLanguageColor(lang),
   }));
-  
-  const filteredRepositories = repositories.filter(repo => {
-    if (selectedOrganizations.length > 0 && !selectedOrganizations.includes(repo.organization)) return false;
-    if (selectedLanguages.length > 0 && !selectedLanguages.includes(repo.language)) return false;
-    if (selectedVisibilities.length > 0 && !selectedVisibilities.includes(repo.visibility)) return false;
+
+  const filteredRepositories = repositories.filter((repo) => {
+    if (
+      selectedOrganizations.length > 0 &&
+      !selectedOrganizations.includes(repo.organization)
+    )
+      return false;
+    if (
+      selectedLanguages.length > 0 &&
+      !selectedLanguages.includes(repo.language)
+    )
+      return false;
+    if (
+      selectedVisibilities.length > 0 &&
+      !selectedVisibilities.includes(repo.visibility)
+    )
+      return false;
     if (selectedTypes.length > 0) {
-      const type = repo.fork ? 'fork' : 'source';
+      const type = repo.fork ? "fork" : "source";
       if (!selectedTypes.includes(type)) return false;
     }
     return true;
@@ -91,9 +107,10 @@ export function Repositories() {
     setSelectedTypes([]);
   };
 
-  const hasActiveFilters = selectedOrganizations.length > 0 || 
-    selectedLanguages.length > 0 || 
-    selectedVisibilities.length > 0 || 
+  const hasActiveFilters =
+    selectedOrganizations.length > 0 ||
+    selectedLanguages.length > 0 ||
+    selectedVisibilities.length > 0 ||
     selectedTypes.length > 0;
 
   return (
@@ -104,20 +121,27 @@ export function Repositories() {
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center space-x-2">
               <Filter className="w-5 h-5 text-gray-500 dark:text-gray-400" />
-              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Filters</h2>
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+                Filters
+              </h2>
             </div>
             <button
               onClick={() => setIsFiltersExpanded(!isFiltersExpanded)}
               className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
             >
-              {isFiltersExpanded ? 'Show Less' : 'Show More'}
+              {isFiltersExpanded ? "Show Less" : "Show More"}
             </button>
           </div>
 
-          <div className={`grid gap-4 ${isFiltersExpanded ? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4' : 'grid-cols-1 md:grid-cols-2'}`}>
+          <div
+            className={`grid gap-4 ${isFiltersExpanded ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-4" : "grid-cols-1 md:grid-cols-2"}`}
+          >
             {/* Organization Filter */}
             <div>
-              <label htmlFor="organization" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+              <label
+                htmlFor="organization"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+              >
                 Organization
               </label>
               <TokenSelect
@@ -130,7 +154,10 @@ export function Repositories() {
 
             {/* Language Filter */}
             <div>
-              <label htmlFor="language" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+              <label
+                htmlFor="language"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+              >
                 Language
               </label>
               <TokenSelect
@@ -142,8 +169,11 @@ export function Repositories() {
             </div>
 
             {/* Visibility Filter */}
-            <div className={!isFiltersExpanded ? 'hidden md:block' : ''}>
-              <label htmlFor="visibility" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+            <div className={!isFiltersExpanded ? "hidden md:block" : ""}>
+              <label
+                htmlFor="visibility"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+              >
                 Visibility
               </label>
               <TokenSelect
@@ -155,8 +185,11 @@ export function Repositories() {
             </div>
 
             {/* Type Filter */}
-            <div className={!isFiltersExpanded ? 'hidden md:block' : ''}>
-              <label htmlFor="type" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+            <div className={!isFiltersExpanded ? "hidden md:block" : ""}>
+              <label
+                htmlFor="type"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
+              >
                 Repository Type
               </label>
               <TokenSelect
@@ -196,20 +229,63 @@ export function Repositories() {
           <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
             <thead className="bg-gray-50 dark:bg-gray-900">
               <tr>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Organization</th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name</th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Stars</th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Fork</th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Forks</th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Issues</th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Language</th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Visibility</th>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+                >
+                  Organization
+                </th>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+                >
+                  Name
+                </th>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+                >
+                  Stars
+                </th>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+                >
+                  Fork
+                </th>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+                >
+                  Forks
+                </th>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+                >
+                  Issues
+                </th>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+                >
+                  Language
+                </th>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+                >
+                  Visibility
+                </th>
               </tr>
             </thead>
             <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
               {isLoading ? (
                 <tr>
-                  <td colSpan={8} className="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
+                  <td
+                    colSpan={8}
+                    className="px-6 py-4 text-center text-gray-500 dark:text-gray-400"
+                  >
                     <div className="flex items-center justify-center">
                       <div className="animate-spin rounded-full h-8 w-8 border-4 border-blue-500 border-t-transparent"></div>
                     </div>
@@ -217,13 +293,19 @@ export function Repositories() {
                 </tr>
               ) : filteredRepositories.length === 0 ? (
                 <tr>
-                  <td colSpan={8} className="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
+                  <td
+                    colSpan={8}
+                    className="px-6 py-4 text-center text-gray-500 dark:text-gray-400"
+                  >
                     No repositories found
                   </td>
                 </tr>
               ) : (
                 filteredRepositories.map((repo) => (
-                  <tr key={`${repo.organization}/${repo.name}`} className="hover:bg-gray-50 dark:hover:bg-gray-700">
+                  <tr
+                    key={`${repo.organization}/${repo.name}`}
+                    className="hover:bg-gray-50 dark:hover:bg-gray-700"
+                  >
                     <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                       <div className="flex items-center space-x-2">
                         {repo.organization_avatar && (
@@ -277,12 +359,12 @@ export function Repositories() {
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-sm">
                       <span className="px-2 py-1 text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">
-                        {repo.language || '-'}
+                        {repo.language || "-"}
                       </span>
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-sm">
                       <span className="flex items-center">
-                        {repo.visibility === 'private' ? (
+                        {repo.visibility === "private" ? (
                           <span className="flex items-center text-red-600 dark:text-red-400">
                             <EyeOff className="w-4 h-4 mr-1" />
                             Private
@@ -308,19 +390,19 @@ export function Repositories() {
 
 function getLanguageColor(language: string): string {
   const colors: Record<string, string> = {
-    JavaScript: 'f7df1e',
-    TypeScript: '3178c6',
-    Go: '00add8',
-    Python: '3776ab',
-    Java: 'b07219',
-    Ruby: 'cc342d',
-    PHP: '4f5d95',
-    'C++': 'f34b7d',
-    CSS: '563d7c',
-    HTML: 'e34c26',
-    Swift: 'ffac45',
-    Kotlin: 'f18e33',
-    Rust: 'dea584',
+    JavaScript: "f7df1e",
+    TypeScript: "3178c6",
+    Go: "00add8",
+    Python: "3776ab",
+    Java: "b07219",
+    Ruby: "cc342d",
+    PHP: "4f5d95",
+    "C++": "f34b7d",
+    CSS: "563d7c",
+    HTML: "e34c26",
+    Swift: "ffac45",
+    Kotlin: "f18e33",
+    Rust: "dea584",
   };
-  return colors[language] || '6b7280';
-}
\ No newline at end of file
+  return colors[language] || "6b7280";
+}
diff --git a/src/pages/RepositoryDetail.tsx b/src/pages/RepositoryDetail.tsx
index 9ef6470..86a8f51 100644
--- a/src/pages/RepositoryDetail.tsx
+++ b/src/pages/RepositoryDetail.tsx
@@ -1,345 +1,345 @@
-import { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { ArrowLeft } from 'lucide-react';
-import { Link } from 'react-router-dom';
-import { RepositoryHeader } from '../components/repository/RepositoryHeader';
-import { BranchesSection } from '../components/repository/BranchesSection';
-import { LatestReleaseSection } from '../components/repository/LatestReleaseSection';
-import { PagesSection } from '../components/repository/PagesSection';
-import { BranchProtectionSection } from '../components/repository/BranchProtectionSection';
-import { RulesetsSection } from '../components/repository/RulesetsSection';
-import { IntegrationsSection } from '../components/repository/IntegrationsSection';
-import { WorkflowsSection } from '../components/repository/WorkflowsSection';
-import type { Repository } from '../types';
+import { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { ArrowLeft } from "lucide-react";
+import { Link } from "react-router-dom";
+import { RepositoryHeader } from "../components/repository/RepositoryHeader";
+import { BranchesSection } from "../components/repository/BranchesSection";
+import { LatestReleaseSection } from "../components/repository/LatestReleaseSection";
+import { PagesSection } from "../components/repository/PagesSection";
+import { BranchProtectionSection } from "../components/repository/BranchProtectionSection";
+import { RulesetsSection } from "../components/repository/RulesetsSection";
+import { IntegrationsSection } from "../components/repository/IntegrationsSection";
+import { WorkflowsSection } from "../components/repository/WorkflowsSection";
+import type { Repository } from "../types";
 
 const mockRepository: Repository = {
-  organization: 'facebook',
-  organization_avatar: 'https://github.com/facebook.png',
-  name: 'react',
-  url: 'https://github.com/facebook/react',
+  organization: "facebook",
+  organization_avatar: "https://github.com/facebook.png",
+  name: "react",
+  url: "https://github.com/facebook/react",
   stars: 215000,
   fork: false,
   forks: 45000,
   issues: 1200,
-  language: 'JavaScript',
-  visibility: 'public',
+  language: "JavaScript",
+  visibility: "public",
   branches: [
     {
-      name: 'main',
+      name: "main",
       protected: true,
-      last_commit: '2024-03-15T10:30:00Z'
+      last_commit: "2024-03-15T10:30:00Z",
     },
     {
-      name: 'development',
+      name: "development",
       protected: true,
-      last_commit: '2024-03-14T15:45:00Z'
+      last_commit: "2024-03-14T15:45:00Z",
     },
     {
-      name: 'feature/concurrent-mode',
+      name: "feature/concurrent-mode",
       protected: false,
-      last_commit: '2024-03-13T09:20:00Z'
-    }
+      last_commit: "2024-03-13T09:20:00Z",
+    },
   ],
-  default_branch: 'main',
+  default_branch: "main",
   latest_release: {
-    tag_name: 'v18.3.0',
-    name: 'React v18.3.0',
-    published_at: '2024-03-10T12:00:00Z',
-    body: 'This release includes several new features and improvements:\n\n- Enhanced concurrent rendering\n- Improved server components\n- Bug fixes and performance optimizations',
+    tag_name: "v18.3.0",
+    name: "React v18.3.0",
+    published_at: "2024-03-10T12:00:00Z",
+    body: "This release includes several new features and improvements:\n\n- Enhanced concurrent rendering\n- Improved server components\n- Bug fixes and performance optimizations",
     prerelease: false,
-    draft: false
+    draft: false,
   },
   pages: {
-    url: 'https://reactjs.org',
-    status: 'active',
-    environment: 'production',
+    url: "https://reactjs.org",
+    status: "active",
+    environment: "production",
     protected: true,
-    cname: 'reactjs.org',
+    cname: "reactjs.org",
     https_enforced: true,
-    custom_404: true
+    custom_404: true,
   },
   branch_protection: [
     {
-      branch: 'main',
+      branch: "main",
       required_status_checks: true,
       enforce_admins: true,
       required_pull_request_reviews: true,
       dismiss_stale_reviews: true,
-      require_code_owner_reviews: true
+      require_code_owner_reviews: true,
     },
     {
-      branch: 'development',
+      branch: "development",
       required_status_checks: true,
       enforce_admins: false,
       required_pull_request_reviews: true,
       dismiss_stale_reviews: true,
-      require_code_owner_reviews: false
-    }
+      require_code_owner_reviews: false,
+    },
   ],
   rulesets: [
     {
-      name: 'Main Branch Protection',
-      target: ['branch:main'],
-      enforcement: 'active',
-      bypass_actors: ['maintainers', 'security-managers'],
+      name: "Main Branch Protection",
+      target: ["branch:main"],
+      enforcement: "active",
+      bypass_actors: ["maintainers", "security-managers"],
       conditions: {
         ref_name: {
-          include: ['refs/heads/main'],
-          exclude: []
-        }
+          include: ["refs/heads/main"],
+          exclude: [],
+        },
       },
       rules: {
         creation: false,
         update: true,
         deletion: false,
         required_signatures: true,
-        required_status_checks: ['ci/build', 'security/scan'],
-        required_deployments: ['production']
-      }
+        required_status_checks: ["ci/build", "security/scan"],
+        required_deployments: ["production"],
+      },
     },
     {
-      name: 'Development Branch Rules',
-      target: ['branch:development'],
-      enforcement: 'active',
-      bypass_actors: ['maintainers'],
+      name: "Development Branch Rules",
+      target: ["branch:development"],
+      enforcement: "active",
+      bypass_actors: ["maintainers"],
       conditions: {
         ref_name: {
-          include: ['refs/heads/development'],
-          exclude: []
-        }
+          include: ["refs/heads/development"],
+          exclude: [],
+        },
       },
       rules: {
         creation: true,
         update: true,
         deletion: false,
         required_signatures: false,
-        required_status_checks: ['ci/build'],
-        required_deployments: ['staging']
-      }
-    }
+        required_status_checks: ["ci/build"],
+        required_deployments: ["staging"],
+      },
+    },
   ],
   integrations: [
     {
-      provider: 'SonarCloud',
-      apiKey: 'sonar_12345678901234567890',
-      status: 'Active',
+      provider: "SonarCloud",
+      apiKey: "sonar_12345678901234567890",
+      status: "Active",
       lastUsage: new Date().toISOString(),
-      lastError: 'N/A',
+      lastError: "N/A",
       last_check: new Date().toISOString(),
-      url: 'https://sonarcloud.io/project/overview?id=facebook_react',
+      url: "https://sonarcloud.io/project/overview?id=facebook_react",
       metrics: {
-        coverage: '87.5%',
-        bugs: '12',
-        code_smells: '156',
-        duplications: '2.3%',
-        maintainability: 'A',
-        reliability: 'A',
-        security: 'A+'
-      }
+        coverage: "87.5%",
+        bugs: "12",
+        code_smells: "156",
+        duplications: "2.3%",
+        maintainability: "A",
+        reliability: "A",
+        security: "A+",
+      },
     },
     {
-      provider: 'Codecov',
-      apiKey: 'codecov_12345678901234567890',
-      status: 'Active',
+      provider: "Codecov",
+      apiKey: "codecov_12345678901234567890",
+      status: "Active",
       lastUsage: new Date().toISOString(),
-      lastError: 'N/A',
+      lastError: "N/A",
       last_check: new Date().toISOString(),
-      url: 'https://codecov.io/gh/facebook/react',
+      url: "https://codecov.io/gh/facebook/react",
       metrics: {
-        coverage: '92.1%',
-        files: '1,245',
-        lines: '158,932',
-        hits: '146,376',
-        misses: '12,556',
-        patches: '98.4%',
-        changes: '95.7%'
-      }
+        coverage: "92.1%",
+        files: "1,245",
+        lines: "158,932",
+        hits: "146,376",
+        misses: "12,556",
+        patches: "98.4%",
+        changes: "95.7%",
+      },
     },
     {
-      provider: 'Codacy',
-      apiKey: 'codacy_12345678901234567890',
-      status: 'Active',
+      provider: "Codacy",
+      apiKey: "codacy_12345678901234567890",
+      status: "Active",
       lastUsage: new Date().toISOString(),
-      lastError: 'N/A',
+      lastError: "N/A",
       last_check: new Date().toISOString(),
-      url: 'https://app.codacy.com/gh/facebook/react',
+      url: "https://app.codacy.com/gh/facebook/react",
       metrics: {
-        grade: 'A',
-        issues: '89',
-        complexity: 'Low',
-        duplication: '3.2%',
-        coverage: '88.9%',
-        security_issues: '0',
-        technical_debt: '2.5d'
-      }
+        grade: "A",
+        issues: "89",
+        complexity: "Low",
+        duplication: "3.2%",
+        coverage: "88.9%",
+        security_issues: "0",
+        technical_debt: "2.5d",
+      },
     },
     {
-      provider: 'Snyk',
-      apiKey: 'snyk_12345678901234567890',
-      status: 'Active',
-      lastUsage: '2024-03-15T08:15:00Z',
-      lastError: 'N/A',
-      last_check: '2024-03-15T08:15:00Z',
-      url: 'https://app.snyk.io/org/facebook/project/react',
+      provider: "Snyk",
+      apiKey: "snyk_12345678901234567890",
+      status: "Active",
+      lastUsage: "2024-03-15T08:15:00Z",
+      lastError: "N/A",
+      last_check: "2024-03-15T08:15:00Z",
+      url: "https://app.snyk.io/org/facebook/project/react",
       metrics: {
         vulnerabilities: {
-          high: '0',
-          medium: '3',
-          low: '7'
+          high: "0",
+          medium: "3",
+          low: "7",
         },
-        dependencies: '1,234',
-        fixable: '8',
-        license_issues: '0'
-      }
-    }
+        dependencies: "1,234",
+        fixable: "8",
+        license_issues: "0",
+      },
+    },
   ],
   workflows: [
     {
-      id: '1',
-      name: 'CI',
-      path: '.github/workflows/ci.yml',
-      state: 'active',
-      created_at: '2024-01-01T00:00:00Z',
-      updated_at: '2024-03-15T10:30:00Z',
-      triggers: ['push', 'pull_request'],
+      id: "1",
+      name: "CI",
+      path: ".github/workflows/ci.yml",
+      state: "active",
+      created_at: "2024-01-01T00:00:00Z",
+      updated_at: "2024-03-15T10:30:00Z",
+      triggers: ["push", "pull_request"],
       on_pull_request: true,
       on_push: true,
       on_schedule: false,
       jobs: [
         {
-          id: 'build',
-          name: 'Build and Test',
-          runs_on: ['ubuntu-latest'],
+          id: "build",
+          name: "Build and Test",
+          runs_on: ["ubuntu-latest"],
           steps: [
-            { name: 'Checkout', uses: 'actions/checkout@v4' },
-            { name: 'Setup Node.js', uses: 'actions/setup-node@v4' },
-            { name: 'Install Dependencies', run: 'npm ci' },
-            { name: 'Run Tests', run: 'npm test' },
-            { name: 'Build', run: 'npm run build' }
-          ]
-        }
-      ]
+            { name: "Checkout", uses: "actions/checkout@v4" },
+            { name: "Setup Node.js", uses: "actions/setup-node@v4" },
+            { name: "Install Dependencies", run: "npm ci" },
+            { name: "Run Tests", run: "npm test" },
+            { name: "Build", run: "npm run build" },
+          ],
+        },
+      ],
     },
     {
-      id: '2',
-      name: 'Release',
-      path: '.github/workflows/release.yml',
-      state: 'active',
-      created_at: '2024-01-01T00:00:00Z',
-      updated_at: '2024-03-15T10:30:00Z',
-      triggers: ['workflow_dispatch', 'schedule'],
+      id: "2",
+      name: "Release",
+      path: ".github/workflows/release.yml",
+      state: "active",
+      created_at: "2024-01-01T00:00:00Z",
+      updated_at: "2024-03-15T10:30:00Z",
+      triggers: ["workflow_dispatch", "schedule"],
       on_pull_request: false,
       on_push: false,
       on_schedule: true,
-      schedule_cron: '0 0 * * 1',
+      schedule_cron: "0 0 * * 1",
       jobs: [
         {
-          id: 'release',
-          name: 'Create Release',
-          runs_on: ['ubuntu-latest'],
+          id: "release",
+          name: "Create Release",
+          runs_on: ["ubuntu-latest"],
           steps: [
-            { name: 'Checkout', uses: 'actions/checkout@v4' },
-            { name: 'Setup Node.js', uses: 'actions/setup-node@v4' },
-            { name: 'Create Release', uses: 'actions/create-release@v1' }
-          ]
-        }
-      ]
-    }
+            { name: "Checkout", uses: "actions/checkout@v4" },
+            { name: "Setup Node.js", uses: "actions/setup-node@v4" },
+            { name: "Create Release", uses: "actions/create-release@v1" },
+          ],
+        },
+      ],
+    },
   ],
   workflow_runs: [
     {
-      id: '1',
-      workflow_name: 'CI',
-      status: 'completed',
-      conclusion: 'success',
-      created_at: '2024-03-15T10:30:00Z',
-      updated_at: '2024-03-15T10:35:00Z',
-      head_branch: 'main',
-      head_sha: 'abc123def456',
-      trigger: 'push',
+      id: "1",
+      workflow_name: "CI",
+      status: "completed",
+      conclusion: "success",
+      created_at: "2024-03-15T10:30:00Z",
+      updated_at: "2024-03-15T10:35:00Z",
+      head_branch: "main",
+      head_sha: "abc123def456",
+      trigger: "push",
       actor: {
-        login: 'johndoe',
-        avatar_url: 'https://github.com/johndoe.png'
+        login: "johndoe",
+        avatar_url: "https://github.com/johndoe.png",
       },
       jobs: [
         {
-          id: 'build1',
-          name: 'Build and Test',
-          status: 'completed',
-          conclusion: 'success',
-          started_at: '2024-03-15T10:30:00Z',
-          completed_at: '2024-03-15T10:35:00Z',
+          id: "build1",
+          name: "Build and Test",
+          status: "completed",
+          conclusion: "success",
+          started_at: "2024-03-15T10:30:00Z",
+          completed_at: "2024-03-15T10:35:00Z",
           steps: [
             {
-              name: 'Set up Node.js',
-              status: 'completed',
-              conclusion: 'success',
+              name: "Set up Node.js",
+              status: "completed",
+              conclusion: "success",
               number: 1,
-              started_at: '2024-03-15T10:30:00Z',
-              completed_at: '2024-03-15T10:31:00Z'
+              started_at: "2024-03-15T10:30:00Z",
+              completed_at: "2024-03-15T10:31:00Z",
             },
             {
-              name: 'Install dependencies',
-              status: 'completed',
-              conclusion: 'success',
+              name: "Install dependencies",
+              status: "completed",
+              conclusion: "success",
               number: 2,
-              started_at: '2024-03-15T10:31:00Z',
-              completed_at: '2024-03-15T10:33:00Z'
+              started_at: "2024-03-15T10:31:00Z",
+              completed_at: "2024-03-15T10:33:00Z",
             },
             {
-              name: 'Run tests',
-              status: 'completed',
-              conclusion: 'success',
+              name: "Run tests",
+              status: "completed",
+              conclusion: "success",
               number: 3,
-              started_at: '2024-03-15T10:33:00Z',
-              completed_at: '2024-03-15T10:35:00Z'
-            }
-          ]
-        }
-      ]
+              started_at: "2024-03-15T10:33:00Z",
+              completed_at: "2024-03-15T10:35:00Z",
+            },
+          ],
+        },
+      ],
     },
     {
-      id: '2',
-      workflow_name: 'CI',
-      status: 'in_progress',
+      id: "2",
+      workflow_name: "CI",
+      status: "in_progress",
       conclusion: null,
-      created_at: '2024-03-15T11:00:00Z',
-      updated_at: '2024-03-15T11:02:00Z',
-      head_branch: 'feature/new-component',
-      head_sha: 'def456ghi789',
-      trigger: 'pull_request',
+      created_at: "2024-03-15T11:00:00Z",
+      updated_at: "2024-03-15T11:02:00Z",
+      head_branch: "feature/new-component",
+      head_sha: "def456ghi789",
+      trigger: "pull_request",
       actor: {
-        login: 'janedoe',
-        avatar_url: 'https://github.com/janedoe.png'
+        login: "janedoe",
+        avatar_url: "https://github.com/janedoe.png",
       },
       jobs: [
         {
-          id: 'build2',
-          name: 'Build and Test',
-          status: 'in_progress',
+          id: "build2",
+          name: "Build and Test",
+          status: "in_progress",
           conclusion: null,
-          started_at: '2024-03-15T11:00:00Z',
+          started_at: "2024-03-15T11:00:00Z",
           steps: [
             {
-              name: 'Set up Node.js',
-              status: 'completed',
-              conclusion: 'success',
+              name: "Set up Node.js",
+              status: "completed",
+              conclusion: "success",
               number: 1,
-              started_at: '2024-03-15T11:00:00Z',
-              completed_at: '2024-03-15T11:01:00Z'
+              started_at: "2024-03-15T11:00:00Z",
+              completed_at: "2024-03-15T11:01:00Z",
             },
             {
-              name: 'Install dependencies',
-              status: 'in_progress',
+              name: "Install dependencies",
+              status: "in_progress",
               conclusion: null,
               number: 2,
-              started_at: '2024-03-15T11:01:00Z'
-            }
-          ]
-        }
-      ]
-    }
-  ]
+              started_at: "2024-03-15T11:01:00Z",
+            },
+          ],
+        },
+      ],
+    },
+  ],
 };
 
 export function RepositoryDetail() {
@@ -351,10 +351,10 @@ export function RepositoryDetail() {
     const fetchRepository = async () => {
       try {
         // In a real app, this would be an API call
-        await new Promise(resolve => setTimeout(resolve, 1000));
+        await new Promise((resolve) => setTimeout(resolve, 1000));
         setRepository(mockRepository);
       } catch (error) {
-        console.error('Error fetching repository:', error);
+        console.error("Error fetching repository:", error);
       } finally {
         setIsLoading(false);
       }
@@ -375,9 +375,12 @@ export function RepositoryDetail() {
     return (
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="text-center">
-          <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Repository not found</h2>
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
+            Repository not found
+          </h2>
           <p className="mt-2 text-gray-600 dark:text-gray-400">
-            The repository you're looking for doesn't exist or you don't have access to it.
+            The repository you're looking for doesn't exist or you don't have
+            access to it.
           </p>
           <Link
             to="/repositories"
@@ -414,7 +417,9 @@ export function RepositoryDetail() {
 
         {repository.pages && <PagesSection pages={repository.pages} />}
 
-        <BranchProtectionSection protectionRules={repository.branch_protection} />
+        <BranchProtectionSection
+          protectionRules={repository.branch_protection}
+        />
 
         <RulesetsSection rulesets={repository.rulesets} />
 
@@ -427,4 +432,4 @@ export function RepositoryDetail() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Security.tsx b/src/pages/Security.tsx
index 56a6f6b..ccf9e39 100644
--- a/src/pages/Security.tsx
+++ b/src/pages/Security.tsx
@@ -1,22 +1,37 @@
-import React from 'react';
-import { Lock, ArrowLeft, Shield, Key, AlertCircle, Eye, Server, FileCheck, Users, Zap, Globe } from 'lucide-react';
-import { Link } from 'react-router-dom';
-import LandingHeader from '../components/LandingHeader';
-import LandingFooter from '../components/LandingFooter';
+import React from "react";
+import {
+  Lock,
+  ArrowLeft,
+  Shield,
+  Key,
+  AlertCircle,
+  Eye,
+  Server,
+  FileCheck,
+  Users,
+  Zap,
+  Globe,
+} from "lucide-react";
+import { Link } from "react-router-dom";
+import LandingHeader from "../components/LandingHeader";
+import LandingFooter from "../components/LandingFooter";
 
 export default function SecurityPage() {
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100">
       <LandingHeader />
-      
+
       <div className="max-w-4xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
         <div className="flex items-center gap-4 mb-8">
-          <Link to="/" className="flex items-center text-gray-600 hover:text-gray-900 transition-colors">
+          <Link
+            to="/"
+            className="flex items-center text-gray-600 hover:text-gray-900 transition-colors"
+          >
             <ArrowLeft className="h-5 w-5 mr-2" />
             Back to Home
           </Link>
         </div>
-        
+
         <div className="bg-white rounded-2xl shadow-xl p-8 border border-gray-200">
           <div className="flex items-center gap-4 mb-8">
             <Lock className="h-8 w-8 text-blue-600" />
@@ -25,43 +40,68 @@ export default function SecurityPage() {
 
           <div className="prose max-w-none">
             <p className="text-gray-600 mb-8">
-              Security is at the core of everything we do. GStraccini Bot is designed with multiple layers of protection to ensure your code, data, and repositories remain secure.
+              Security is at the core of everything we do. GStraccini Bot is
+              designed with multiple layers of protection to ensure your code,
+              data, and repositories remain secure.
             </p>
 
             <div className="grid gap-8">
               <section>
                 <div className="flex items-center gap-3 mb-6">
                   <Shield className="h-6 w-6 text-green-600" />
-                  <h2 className="text-2xl font-semibold text-gray-900">Data Protection</h2>
+                  <h2 className="text-2xl font-semibold text-gray-900">
+                    Data Protection
+                  </h2>
                 </div>
                 <div className="bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg p-6 border border-green-200">
                   <div className="grid gap-4">
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-green-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Encryption at Rest</h3>
-                        <p className="text-gray-600">All data is encrypted using AES-256 encryption when stored in our databases and file systems.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Encryption at Rest
+                        </h3>
+                        <p className="text-gray-600">
+                          All data is encrypted using AES-256 encryption when
+                          stored in our databases and file systems.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-green-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Encryption in Transit</h3>
-                        <p className="text-gray-600">All data transmission is protected using TLS 1.3 with perfect forward secrecy.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Encryption in Transit
+                        </h3>
+                        <p className="text-gray-600">
+                          All data transmission is protected using TLS 1.3 with
+                          perfect forward secrecy.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-green-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Regular Security Audits</h3>
-                        <p className="text-gray-600">We conduct quarterly security audits and annual penetration testing by certified security professionals.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Regular Security Audits
+                        </h3>
+                        <p className="text-gray-600">
+                          We conduct quarterly security audits and annual
+                          penetration testing by certified security
+                          professionals.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-green-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Zero-Knowledge Architecture</h3>
-                        <p className="text-gray-600">We process your code without storing sensitive content permanently on our servers.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Zero-Knowledge Architecture
+                        </h3>
+                        <p className="text-gray-600">
+                          We process your code without storing sensitive content
+                          permanently on our servers.
+                        </p>
                       </div>
                     </div>
                   </div>
@@ -71,36 +111,58 @@ export default function SecurityPage() {
               <section>
                 <div className="flex items-center gap-3 mb-6">
                   <Key className="h-6 w-6 text-blue-600" />
-                  <h2 className="text-2xl font-semibold text-gray-900">Authentication & Authorization</h2>
+                  <h2 className="text-2xl font-semibold text-gray-900">
+                    Authentication & Authorization
+                  </h2>
                 </div>
                 <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-6 border border-blue-200">
                   <div className="grid gap-4">
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-blue-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">OAuth 2.0 Integration</h3>
-                        <p className="text-gray-600">Secure authentication through GitHub's OAuth 2.0 with minimal required permissions.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          OAuth 2.0 Integration
+                        </h3>
+                        <p className="text-gray-600">
+                          Secure authentication through GitHub's OAuth 2.0 with
+                          minimal required permissions.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-blue-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Multi-Factor Authentication</h3>
-                        <p className="text-gray-600">Support for FIDO2 WebAuthn, TOTP authenticators, and backup recovery codes.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Multi-Factor Authentication
+                        </h3>
+                        <p className="text-gray-600">
+                          Support for FIDO2 WebAuthn, TOTP authenticators, and
+                          backup recovery codes.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-blue-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Granular Permissions</h3>
-                        <p className="text-gray-600">Fine-grained access control with repository-level permissions and role-based access.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Granular Permissions
+                        </h3>
+                        <p className="text-gray-600">
+                          Fine-grained access control with repository-level
+                          permissions and role-based access.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-blue-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Session Management</h3>
-                        <p className="text-gray-600">Secure session handling with automatic expiration and concurrent session limits.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Session Management
+                        </h3>
+                        <p className="text-gray-600">
+                          Secure session handling with automatic expiration and
+                          concurrent session limits.
+                        </p>
                       </div>
                     </div>
                   </div>
@@ -110,36 +172,58 @@ export default function SecurityPage() {
               <section>
                 <div className="flex items-center gap-3 mb-6">
                   <Server className="h-6 w-6 text-purple-600" />
-                  <h2 className="text-2xl font-semibold text-gray-900">Infrastructure Security</h2>
+                  <h2 className="text-2xl font-semibold text-gray-900">
+                    Infrastructure Security
+                  </h2>
                 </div>
                 <div className="bg-gradient-to-r from-purple-50 to-violet-50 rounded-lg p-6 border border-purple-200">
                   <div className="grid gap-4">
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-purple-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Cloud Security</h3>
-                        <p className="text-gray-600">Hosted on enterprise-grade cloud infrastructure with SOC 2 Type II compliance.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Cloud Security
+                        </h3>
+                        <p className="text-gray-600">
+                          Hosted on enterprise-grade cloud infrastructure with
+                          SOC 2 Type II compliance.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-purple-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Network Isolation</h3>
-                        <p className="text-gray-600">Private networks, VPCs, and firewall rules to isolate and protect our services.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Network Isolation
+                        </h3>
+                        <p className="text-gray-600">
+                          Private networks, VPCs, and firewall rules to isolate
+                          and protect our services.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-purple-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Container Security</h3>
-                        <p className="text-gray-600">Containerized applications with security scanning and runtime protection.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Container Security
+                        </h3>
+                        <p className="text-gray-600">
+                          Containerized applications with security scanning and
+                          runtime protection.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-purple-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Monitoring & Alerting</h3>
-                        <p className="text-gray-600">24/7 security monitoring with automated threat detection and incident response.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Monitoring & Alerting
+                        </h3>
+                        <p className="text-gray-600">
+                          24/7 security monitoring with automated threat
+                          detection and incident response.
+                        </p>
                       </div>
                     </div>
                   </div>
@@ -149,36 +233,58 @@ export default function SecurityPage() {
               <section>
                 <div className="flex items-center gap-3 mb-6">
                   <FileCheck className="h-6 w-6 text-indigo-600" />
-                  <h2 className="text-2xl font-semibold text-gray-900">Code Security</h2>
+                  <h2 className="text-2xl font-semibold text-gray-900">
+                    Code Security
+                  </h2>
                 </div>
                 <div className="bg-gradient-to-r from-indigo-50 to-blue-50 rounded-lg p-6 border border-indigo-200">
                   <div className="grid gap-4">
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-indigo-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Static Code Analysis</h3>
-                        <p className="text-gray-600">Automated security scanning of our codebase using industry-leading tools.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Static Code Analysis
+                        </h3>
+                        <p className="text-gray-600">
+                          Automated security scanning of our codebase using
+                          industry-leading tools.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-indigo-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Dependency Scanning</h3>
-                        <p className="text-gray-600">Regular vulnerability scanning of all dependencies with automated updates.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Dependency Scanning
+                        </h3>
+                        <p className="text-gray-600">
+                          Regular vulnerability scanning of all dependencies
+                          with automated updates.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-indigo-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Secure Development</h3>
-                        <p className="text-gray-600">Security-first development practices with mandatory code reviews and testing.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Secure Development
+                        </h3>
+                        <p className="text-gray-600">
+                          Security-first development practices with mandatory
+                          code reviews and testing.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-indigo-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Secrets Management</h3>
-                        <p className="text-gray-600">Secure storage and rotation of API keys, tokens, and other sensitive credentials.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Secrets Management
+                        </h3>
+                        <p className="text-gray-600">
+                          Secure storage and rotation of API keys, tokens, and
+                          other sensitive credentials.
+                        </p>
                       </div>
                     </div>
                   </div>
@@ -188,36 +294,58 @@ export default function SecurityPage() {
               <section>
                 <div className="flex items-center gap-3 mb-6">
                   <Eye className="h-6 w-6 text-teal-600" />
-                  <h2 className="text-2xl font-semibold text-gray-900">Privacy & Compliance</h2>
+                  <h2 className="text-2xl font-semibold text-gray-900">
+                    Privacy & Compliance
+                  </h2>
                 </div>
                 <div className="bg-gradient-to-r from-teal-50 to-cyan-50 rounded-lg p-6 border border-teal-200">
                   <div className="grid gap-4">
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-teal-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">GDPR Compliance</h3>
-                        <p className="text-gray-600">Full compliance with European data protection regulations and user rights.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          GDPR Compliance
+                        </h3>
+                        <p className="text-gray-600">
+                          Full compliance with European data protection
+                          regulations and user rights.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-teal-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Data Minimization</h3>
-                        <p className="text-gray-600">We collect only the minimum data necessary to provide our services.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Data Minimization
+                        </h3>
+                        <p className="text-gray-600">
+                          We collect only the minimum data necessary to provide
+                          our services.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-teal-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Data Retention</h3>
-                        <p className="text-gray-600">Clear data retention policies with automatic deletion of expired data.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Data Retention
+                        </h3>
+                        <p className="text-gray-600">
+                          Clear data retention policies with automatic deletion
+                          of expired data.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-teal-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Audit Logging</h3>
-                        <p className="text-gray-600">Comprehensive audit trails for all data access and processing activities.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Audit Logging
+                        </h3>
+                        <p className="text-gray-600">
+                          Comprehensive audit trails for all data access and
+                          processing activities.
+                        </p>
                       </div>
                     </div>
                   </div>
@@ -227,45 +355,65 @@ export default function SecurityPage() {
               <section>
                 <div className="flex items-center gap-3 mb-6">
                   <AlertCircle className="h-6 w-6 text-orange-600" />
-                  <h2 className="text-2xl font-semibold text-gray-900">Vulnerability Reporting</h2>
+                  <h2 className="text-2xl font-semibold text-gray-900">
+                    Vulnerability Reporting
+                  </h2>
                 </div>
                 <div className="bg-gradient-to-r from-orange-50 to-amber-50 rounded-lg p-6 border border-orange-200">
                   <p className="text-gray-600 mb-6">
-                    We take security vulnerabilities seriously and appreciate the security community's efforts to help us maintain the highest security standards. If you discover a security issue, please report it responsibly.
+                    We take security vulnerabilities seriously and appreciate
+                    the security community's efforts to help us maintain the
+                    highest security standards. If you discover a security
+                    issue, please report it responsibly.
                   </p>
-                  
+
                   <div className="grid gap-4 mb-6">
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-orange-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Responsible Disclosure</h3>
-                        <p className="text-gray-600">Please report vulnerabilities privately to allow us time to fix them before public disclosure.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Responsible Disclosure
+                        </h3>
+                        <p className="text-gray-600">
+                          Please report vulnerabilities privately to allow us
+                          time to fix them before public disclosure.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-orange-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Response Timeline</h3>
-                        <p className="text-gray-600">We aim to acknowledge reports within 24 hours and provide updates within 72 hours.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Response Timeline
+                        </h3>
+                        <p className="text-gray-600">
+                          We aim to acknowledge reports within 24 hours and
+                          provide updates within 72 hours.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-orange-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Recognition</h3>
-                        <p className="text-gray-600">We maintain a security hall of fame to recognize researchers who help improve our security.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Recognition
+                        </h3>
+                        <p className="text-gray-600">
+                          We maintain a security hall of fame to recognize
+                          researchers who help improve our security.
+                        </p>
                       </div>
                     </div>
                   </div>
 
                   <div className="flex flex-col sm:flex-row gap-4">
-                    <a 
+                    <a
                       href="mailto:security@gstraccini-bot.com"
                       className="inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 transition-colors"
                     >
                       Report Vulnerability
                     </a>
-                    <a 
+                    <a
                       href="https://github.com/guibranco/gstraccini-bot-service/security/advisories"
                       target="_blank"
                       rel="noopener noreferrer"
@@ -280,32 +428,51 @@ export default function SecurityPage() {
               <section>
                 <div className="flex items-center gap-3 mb-6">
                   <Users className="h-6 w-6 text-emerald-600" />
-                  <h2 className="text-2xl font-semibold text-gray-900">Security Team</h2>
+                  <h2 className="text-2xl font-semibold text-gray-900">
+                    Security Team
+                  </h2>
                 </div>
                 <div className="bg-gradient-to-r from-emerald-50 to-green-50 rounded-lg p-6 border border-emerald-200">
                   <p className="text-gray-600 mb-4">
-                    Our dedicated security team consists of experienced professionals who continuously monitor, assess, and improve our security posture.
+                    Our dedicated security team consists of experienced
+                    professionals who continuously monitor, assess, and improve
+                    our security posture.
                   </p>
                   <div className="grid gap-4">
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-emerald-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">24/7 Monitoring</h3>
-                        <p className="text-gray-600">Round-the-clock security monitoring and incident response capabilities.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          24/7 Monitoring
+                        </h3>
+                        <p className="text-gray-600">
+                          Round-the-clock security monitoring and incident
+                          response capabilities.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-emerald-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Continuous Training</h3>
-                        <p className="text-gray-600">Regular security training and certification programs for all team members.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Continuous Training
+                        </h3>
+                        <p className="text-gray-600">
+                          Regular security training and certification programs
+                          for all team members.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-emerald-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Industry Collaboration</h3>
-                        <p className="text-gray-600">Active participation in security communities and threat intelligence sharing.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Industry Collaboration
+                        </h3>
+                        <p className="text-gray-600">
+                          Active participation in security communities and
+                          threat intelligence sharing.
+                        </p>
                       </div>
                     </div>
                   </div>
@@ -315,32 +482,50 @@ export default function SecurityPage() {
               <section>
                 <div className="flex items-center gap-3 mb-6">
                   <Zap className="h-6 w-6 text-yellow-600" />
-                  <h2 className="text-2xl font-semibold text-gray-900">Incident Response</h2>
+                  <h2 className="text-2xl font-semibold text-gray-900">
+                    Incident Response
+                  </h2>
                 </div>
                 <div className="bg-gradient-to-r from-yellow-50 to-orange-50 rounded-lg p-6 border border-yellow-200">
                   <p className="text-gray-600 mb-4">
-                    We have a comprehensive incident response plan to quickly address and resolve security incidents.
+                    We have a comprehensive incident response plan to quickly
+                    address and resolve security incidents.
                   </p>
                   <div className="grid gap-4">
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-yellow-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Rapid Response</h3>
-                        <p className="text-gray-600">Immediate containment and mitigation procedures for security incidents.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Rapid Response
+                        </h3>
+                        <p className="text-gray-600">
+                          Immediate containment and mitigation procedures for
+                          security incidents.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-yellow-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Communication</h3>
-                        <p className="text-gray-600">Transparent communication with affected users and stakeholders during incidents.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Communication
+                        </h3>
+                        <p className="text-gray-600">
+                          Transparent communication with affected users and
+                          stakeholders during incidents.
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <span className="flex-shrink-0 w-2 h-2 rounded-full bg-yellow-600 mt-2"></span>
                       <div>
-                        <h3 className="font-semibold text-gray-900 mb-1">Post-Incident Review</h3>
-                        <p className="text-gray-600">Thorough analysis and improvement of security measures after each incident.</p>
+                        <h3 className="font-semibold text-gray-900 mb-1">
+                          Post-Incident Review
+                        </h3>
+                        <p className="text-gray-600">
+                          Thorough analysis and improvement of security measures
+                          after each incident.
+                        </p>
                       </div>
                     </div>
                   </div>
@@ -350,29 +535,36 @@ export default function SecurityPage() {
               <section className="border-t pt-8">
                 <div className="flex items-center gap-3 mb-6">
                   <Globe className="h-6 w-6 text-blue-600" />
-                  <h2 className="text-2xl font-semibold text-gray-900">Contact Security Team</h2>
+                  <h2 className="text-2xl font-semibold text-gray-900">
+                    Contact Security Team
+                  </h2>
                 </div>
                 <p className="text-gray-600 mb-6">
-                  For security-related inquiries, vulnerability reports, or urgent security matters, please contact our security team:
+                  For security-related inquiries, vulnerability reports, or
+                  urgent security matters, please contact our security team:
                 </p>
                 <div className="bg-gray-50 p-6 rounded-lg border border-gray-200">
                   <div className="grid gap-4">
                     <div>
                       <p className="text-gray-700 mb-2">
-                        <strong>Security Email:</strong>{' '}
-                        <a href="mailto:security@gstraccini-bot.com" className="text-blue-600 hover:text-blue-800 transition-colors">
+                        <strong>Security Email:</strong>{" "}
+                        <a
+                          href="mailto:security@gstraccini-bot.com"
+                          className="text-blue-600 hover:text-blue-800 transition-colors"
+                        >
                           security@gstraccini-bot.com
                         </a>
                       </p>
                       <p className="text-sm text-gray-500">
-                        For urgent security matters, please include "URGENT" in the subject line.
+                        For urgent security matters, please include "URGENT" in
+                        the subject line.
                       </p>
                     </div>
                     <div>
                       <p className="text-gray-700 mb-2">
-                        <strong>GitHub Security:</strong>{' '}
-                        <a 
-                          href="https://github.com/guibranco/gstraccini-bot-service/security" 
+                        <strong>GitHub Security:</strong>{" "}
+                        <a
+                          href="https://github.com/guibranco/gstraccini-bot-service/security"
                           target="_blank"
                           rel="noopener noreferrer"
                           className="text-blue-600 hover:text-blue-800 transition-colors"
@@ -381,14 +573,15 @@ export default function SecurityPage() {
                         </a>
                       </p>
                       <p className="text-sm text-gray-500">
-                        Use GitHub's private vulnerability reporting feature for sensitive issues.
+                        Use GitHub's private vulnerability reporting feature for
+                        sensitive issues.
                       </p>
                     </div>
                     <div>
                       <p className="text-gray-700 mb-2">
-                        <strong>Security Documentation:</strong>{' '}
-                        <a 
-                          href="https://docs.gstraccini.bot/security" 
+                        <strong>Security Documentation:</strong>{" "}
+                        <a
+                          href="https://docs.gstraccini.bot/security"
                           target="_blank"
                           rel="noopener noreferrer"
                           className="text-blue-600 hover:text-blue-800 transition-colors"
@@ -411,4 +604,4 @@ export default function SecurityPage() {
       <LandingFooter />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 051406e..d79c167 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -1,11 +1,23 @@
-import { useState, useCallback } from 'react';
-import { Settings as SettingsIcon, FolderOpen, AlertCircle, GitPullRequest, Users, Cable } from 'lucide-react';
-import { RepositorySettings } from '../components/settings/RepositorySettings';
-import { IssuesSettings } from '../components/settings/IssuesSettings';
-import { PullRequestsSettings } from '../components/settings/PullRequestsSettings';
-import { TrustedSendersSettings } from '../components/settings/TrustedSendersSettings';
-import { IntegrationsSettings } from '../components/settings/IntegrationsSettings';
-import type { Integration, TrustedSender, DependabotFrequency, RepositorySettings as RepoSettings } from '../types';
+import { useState, useCallback } from "react";
+import {
+  Settings as SettingsIcon,
+  FolderOpen,
+  AlertCircle,
+  GitPullRequest,
+  Users,
+  Cable,
+} from "lucide-react";
+import { RepositorySettings } from "../components/settings/RepositorySettings";
+import { IssuesSettings } from "../components/settings/IssuesSettings";
+import { PullRequestsSettings } from "../components/settings/PullRequestsSettings";
+import { TrustedSendersSettings } from "../components/settings/TrustedSendersSettings";
+import { IntegrationsSettings } from "../components/settings/IntegrationsSettings";
+import type {
+  Integration,
+  TrustedSender,
+  DependabotFrequency,
+  RepositorySettings as RepoSettings,
+} from "../types";
 
 interface Settings {
   repository: RepoSettings;
@@ -57,9 +69,9 @@ export function Settings() {
       rulesetRequiredReviewers: true,
       rulesetResolveConversations: true,
       createDependabotFile: true,
-      dependabotFrequency: 'weekly',
+      dependabotFrequency: "weekly",
       createSecretsWorkflow: true,
-      createLintersWorkflow: true
+      createLintersWorkflow: true,
     },
     notifyIssues: true,
     requireAcceptanceCriteriaChecklist: true,
@@ -74,146 +86,171 @@ export function Settings() {
       sonarcloud: {
         autoAnalyze: true,
         qualityGate: true,
-        blockMerge: true
+        blockMerge: true,
       },
       codacy: {
         autoAnalyze: true,
         qualityGate: true,
-        blockMerge: true
+        blockMerge: true,
       },
       codecov: {
         autoAnalyze: true,
         coverageThreshold: 80,
-        blockMerge: true
+        blockMerge: true,
       },
       snyk: {
         autoScan: true,
         blockHighVulnerabilities: true,
-        blockMerge: true
+        blockMerge: true,
       },
       openai: {
         autoReview: true,
         suggestFixes: true,
-        improveDescription: true
-      }
-    }
+        improveDescription: true,
+      },
+    },
   });
 
   const [trustedSenders, setTrustedSenders] = useState<TrustedSender[]>([
     {
-      login: 'johndoe',
-      name: 'John Doe',
-      avatar_url: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=100&h=100&fit=crop',
-      added_at: '2024-03-01T00:00:00Z'
-    }
+      login: "johndoe",
+      name: "John Doe",
+      avatar_url:
+        "https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=100&h=100&fit=crop",
+      added_at: "2024-03-01T00:00:00Z",
+    },
   ]);
 
   const [integrations] = useState<Integration[]>([
     {
-      provider: 'SonarCloud',
-      apiKey: 'sonar_12345678901234567890',
-      status: 'Active',
-      lastUsage: '2024-03-15T10:30:00Z',
-      lastError: 'N/A'
-    }
+      provider: "SonarCloud",
+      apiKey: "sonar_12345678901234567890",
+      status: "Active",
+      lastUsage: "2024-03-15T10:30:00Z",
+      lastError: "N/A",
+    },
   ]);
 
-  const [successMessage, setSuccessMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState("");
+
+  const showSuccessMessage = useCallback(
+    (message: string = "Settings updated successfully") => {
+      setSuccessMessage(message);
+      setTimeout(() => setSuccessMessage(""), 3000);
+    },
+    [],
+  );
+
+  const handleRepositorySettingChange = useCallback(
+    async (key: keyof RepoSettings, value: boolean | DependabotFrequency) => {
+      setSettings((prev) => ({
+        ...prev,
+        repository: {
+          ...prev.repository,
+          [key]: value,
+        },
+      }));
+
+      try {
+        // Simulate API call to save settings
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        showSuccessMessage();
+      } catch (error) {
+        console.error("Failed to save settings:", error);
+      }
+    },
+    [showSuccessMessage],
+  );
 
-  const showSuccessMessage = useCallback((message: string = 'Settings updated successfully') => {
-    setSuccessMessage(message);
-    setTimeout(() => setSuccessMessage(''), 3000);
-  }, []);
+  const handleSettingChange = useCallback(
+    async (key: keyof Settings, value: boolean | number) => {
+      setSettings((prev) => ({ ...prev, [key]: value }));
 
-  const handleRepositorySettingChange = useCallback(async (key: keyof RepoSettings, value: boolean | DependabotFrequency) => {
-    setSettings(prev => ({
-      ...prev,
-      repository: {
-        ...prev.repository,
-        [key]: value
+      try {
+        // Simulate API call to save settings
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        showSuccessMessage();
+      } catch (error) {
+        console.error("Failed to save settings:", error);
       }
-    }));
-    
-    try {
-      // Simulate API call to save settings
-      await new Promise(resolve => setTimeout(resolve, 500));
-      showSuccessMessage();
-    } catch (error) {
-      console.error('Failed to save settings:', error);
-    }
-  }, [showSuccessMessage]);
+    },
+    [showSuccessMessage],
+  );
 
-  const handleSettingChange = useCallback(async (key: keyof Settings, value: boolean | number) => {
-    setSettings(prev => ({ ...prev, [key]: value }));
-    
-    try {
-      // Simulate API call to save settings
-      await new Promise(resolve => setTimeout(resolve, 500));
-      showSuccessMessage();
-    } catch (error) {
-      console.error('Failed to save settings:', error);
-    }
-  }, [showSuccessMessage]);
+  const handleIntegrationSettingChange = useCallback(
+    async (integration: string, key: string, value: boolean | number) => {
+      setSettings((prev) => ({
+        ...prev,
+        integrations: {
+          ...prev.integrations,
+          [integration]: {
+            ...prev.integrations[integration as keyof Settings["integrations"]],
+            [key]: value,
+          },
+        },
+      }));
 
-  const handleIntegrationSettingChange = useCallback(async (integration: string, key: string, value: boolean | number) => {
-    setSettings(prev => ({
-      ...prev,
-      integrations: {
-        ...prev.integrations,
-        [integration]: {
-          ...prev.integrations[integration as keyof Settings['integrations']],
-          [key]: value
-        }
+      try {
+        // Simulate API call to save integration settings
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        showSuccessMessage(`${integration} settings updated`);
+      } catch (error) {
+        console.error("Failed to save integration settings:", error);
       }
-    }));
+    },
+    [showSuccessMessage],
+  );
 
-    try {
-      // Simulate API call to save integration settings
-      await new Promise(resolve => setTimeout(resolve, 500));
-      showSuccessMessage(`${integration} settings updated`);
-    } catch (error) {
-      console.error('Failed to save integration settings:', error);
-    }
-  }, [showSuccessMessage]);
+  const handleAddTrustedSender = useCallback(
+    async (login: string) => {
+      try {
+        // Simulate API call to get user info and save
+        await new Promise((resolve) => setTimeout(resolve, 1000));
 
-  const handleAddTrustedSender = useCallback(async (login: string) => {
-    try {
-      // Simulate API call to get user info and save
-      await new Promise(resolve => setTimeout(resolve, 1000));
-      
-      const newSender: TrustedSender = {
-        login,
-        name: login,
-        avatar_url: `https://github.com/${login}.png`,
-        added_at: new Date().toISOString()
-      };
-      
-      setTrustedSenders(prev => [...prev, newSender]);
-      showSuccessMessage('Trusted sender added successfully');
-    } catch (error) {
-      console.error('Failed to add trusted sender:', error);
-    }
-  }, [showSuccessMessage]);
+        const newSender: TrustedSender = {
+          login,
+          name: login,
+          avatar_url: `https://github.com/${login}.png`,
+          added_at: new Date().toISOString(),
+        };
 
-  const handleRemoveTrustedSender = useCallback(async (login: string) => {
-    try {
-      // Simulate API call to remove trusted sender
-      await new Promise(resolve => setTimeout(resolve, 500));
-      
-      setTrustedSenders(prev => prev.filter(sender => sender.login !== login));
-      showSuccessMessage('Trusted sender removed successfully');
-    } catch (error) {
-      console.error('Failed to remove trusted sender:', error);
-    }
-  }, [showSuccessMessage]);
+        setTrustedSenders((prev) => [...prev, newSender]);
+        showSuccessMessage("Trusted sender added successfully");
+      } catch (error) {
+        console.error("Failed to add trusted sender:", error);
+      }
+    },
+    [showSuccessMessage],
+  );
+
+  const handleRemoveTrustedSender = useCallback(
+    async (login: string) => {
+      try {
+        // Simulate API call to remove trusted sender
+        await new Promise((resolve) => setTimeout(resolve, 500));
+
+        setTrustedSenders((prev) =>
+          prev.filter((sender) => sender.login !== login),
+        );
+        showSuccessMessage("Trusted sender removed successfully");
+      } catch (error) {
+        console.error("Failed to remove trusted sender:", error);
+      }
+    },
+    [showSuccessMessage],
+  );
 
   return (
     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <div className="flex items-center space-x-4 mb-8">
         <SettingsIcon className="w-8 h-8 text-gray-400" />
         <div>
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Settings</h1>
-          <p className="text-gray-500 dark:text-gray-400">Manage your application settings</p>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+            Settings
+          </h1>
+          <p className="text-gray-500 dark:text-gray-400">
+            Manage your application settings
+          </p>
         </div>
       </div>
 
@@ -258,4 +295,4 @@ export function Settings() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Status.tsx b/src/pages/Status.tsx
index 782eb4e..2a876e9 100644
--- a/src/pages/Status.tsx
+++ b/src/pages/Status.tsx
@@ -1,161 +1,183 @@
-import React from 'react';
-import { Activity, ArrowLeft, CheckCircle2, AlertTriangle, XCircle, Clock, Wifi, Database, Zap, Globe, Shield, Server } from 'lucide-react';
-import { Link } from 'react-router-dom';
-import LandingHeader from '../components/LandingHeader';
-import LandingFooter from '../components/LandingFooter';
+import React from "react";
+import {
+  Activity,
+  ArrowLeft,
+  CheckCircle2,
+  AlertTriangle,
+  XCircle,
+  Clock,
+  Wifi,
+  Database,
+  Zap,
+  Globe,
+  Shield,
+  Server,
+} from "lucide-react";
+import { Link } from "react-router-dom";
+import LandingHeader from "../components/LandingHeader";
+import LandingFooter from "../components/LandingFooter";
 
 // Mock data for system status
 const systems = [
   {
-    name: 'API Gateway',
-    status: 'operational',
-    latency: '45ms',
-    uptime: '99.99%',
-    description: 'Core API endpoints and routing'
+    name: "API Gateway",
+    status: "operational",
+    latency: "45ms",
+    uptime: "99.99%",
+    description: "Core API endpoints and routing",
   },
   {
-    name: 'GitHub Integration',
-    status: 'operational',
-    latency: '120ms',
-    uptime: '99.95%',
-    description: 'GitHub API connectivity and webhooks'
+    name: "GitHub Integration",
+    status: "operational",
+    latency: "120ms",
+    uptime: "99.95%",
+    description: "GitHub API connectivity and webhooks",
   },
   {
-    name: 'Authentication Service',
-    status: 'operational',
-    latency: '89ms',
-    uptime: '99.99%',
-    description: 'OAuth and user authentication'
+    name: "Authentication Service",
+    status: "operational",
+    latency: "89ms",
+    uptime: "99.99%",
+    description: "OAuth and user authentication",
   },
   {
-    name: 'Database Cluster',
-    status: 'degraded',
-    latency: '250ms',
-    uptime: '99.90%',
-    description: 'Primary and replica databases'
+    name: "Database Cluster",
+    status: "degraded",
+    latency: "250ms",
+    uptime: "99.90%",
+    description: "Primary and replica databases",
   },
   {
-    name: 'Command Processing',
-    status: 'operational',
-    latency: '67ms',
-    uptime: '99.98%',
-    description: 'Bot command execution engine'
+    name: "Command Processing",
+    status: "operational",
+    latency: "67ms",
+    uptime: "99.98%",
+    description: "Bot command execution engine",
   },
   {
-    name: 'Webhook Delivery',
-    status: 'incident',
-    latency: '450ms',
-    uptime: '98.50%',
-    description: 'GitHub webhook processing'
+    name: "Webhook Delivery",
+    status: "incident",
+    latency: "450ms",
+    uptime: "98.50%",
+    description: "GitHub webhook processing",
   },
   {
-    name: 'Third-party Integrations',
-    status: 'operational',
-    latency: '180ms',
-    uptime: '99.85%',
-    description: 'SonarCloud, Codacy, Snyk, etc.'
+    name: "Third-party Integrations",
+    status: "operational",
+    latency: "180ms",
+    uptime: "99.85%",
+    description: "SonarCloud, Codacy, Snyk, etc.",
   },
   {
-    name: 'Notification System',
-    status: 'operational',
-    latency: '95ms',
-    uptime: '99.97%',
-    description: 'Email and in-app notifications'
-  }
+    name: "Notification System",
+    status: "operational",
+    latency: "95ms",
+    uptime: "99.97%",
+    description: "Email and in-app notifications",
+  },
 ];
 
 const incidents = [
   {
-    date: '2025-03-01 14:23 UTC',
-    title: 'Webhook Delivery Delays',
-    status: 'investigating',
-    severity: 'major',
-    description: 'We are investigating increased latency in webhook delivery systems affecting automated responses to GitHub events.',
+    date: "2025-03-01 14:23 UTC",
+    title: "Webhook Delivery Delays",
+    status: "investigating",
+    severity: "major",
+    description:
+      "We are investigating increased latency in webhook delivery systems affecting automated responses to GitHub events.",
     updates: [
       {
-        time: '14:45 UTC',
-        message: 'Engineering team has identified the root cause and is implementing a fix.'
+        time: "14:45 UTC",
+        message:
+          "Engineering team has identified the root cause and is implementing a fix.",
       },
       {
-        time: '14:23 UTC',
-        message: 'We have detected increased webhook processing times and are investigating.'
-      }
-    ]
+        time: "14:23 UTC",
+        message:
+          "We have detected increased webhook processing times and are investigating.",
+      },
+    ],
   },
   {
-    date: '2025-03-01 12:15 UTC',
-    title: 'Database Performance Degradation',
-    status: 'identified',
-    severity: 'minor',
-    description: 'Database performance is degraded due to increased load. Our team is working on scaling the infrastructure.',
+    date: "2025-03-01 12:15 UTC",
+    title: "Database Performance Degradation",
+    status: "identified",
+    severity: "minor",
+    description:
+      "Database performance is degraded due to increased load. Our team is working on scaling the infrastructure.",
     updates: [
       {
-        time: '13:30 UTC',
-        message: 'Additional database replicas have been deployed to handle the increased load.'
+        time: "13:30 UTC",
+        message:
+          "Additional database replicas have been deployed to handle the increased load.",
       },
       {
-        time: '12:15 UTC',
-        message: 'Monitoring systems detected elevated database response times.'
-      }
-    ]
+        time: "12:15 UTC",
+        message:
+          "Monitoring systems detected elevated database response times.",
+      },
+    ],
   },
   {
-    date: '2025-02-28 22:45 UTC',
-    title: 'API Rate Limiting Issues',
-    status: 'resolved',
-    severity: 'minor',
-    description: 'The rate limiting issues have been resolved by updating our configuration.',
+    date: "2025-02-28 22:45 UTC",
+    title: "API Rate Limiting Issues",
+    status: "resolved",
+    severity: "minor",
+    description:
+      "The rate limiting issues have been resolved by updating our configuration.",
     updates: [
       {
-        time: '23:15 UTC',
-        message: 'All systems are now operating normally. Rate limiting has been restored to expected levels.'
+        time: "23:15 UTC",
+        message:
+          "All systems are now operating normally. Rate limiting has been restored to expected levels.",
       },
       {
-        time: '22:45 UTC',
-        message: 'We identified an issue with our rate limiting configuration causing some requests to be incorrectly throttled.'
-      }
-    ]
-  }
+        time: "22:45 UTC",
+        message:
+          "We identified an issue with our rate limiting configuration causing some requests to be incorrectly throttled.",
+      },
+    ],
+  },
 ];
 
 const metrics = [
   {
-    name: 'Overall Uptime',
-    value: '99.95%',
-    period: 'Last 30 days',
+    name: "Overall Uptime",
+    value: "99.95%",
+    period: "Last 30 days",
     icon: <Wifi className="h-5 w-5" />,
-    color: 'text-green-600'
+    color: "text-green-600",
   },
   {
-    name: 'Average Response Time',
-    value: '125ms',
-    period: 'Last 24 hours',
+    name: "Average Response Time",
+    value: "125ms",
+    period: "Last 24 hours",
     icon: <Zap className="h-5 w-5" />,
-    color: 'text-blue-600'
+    color: "text-blue-600",
   },
   {
-    name: 'Commands Processed',
-    value: '2.4M',
-    period: 'Last 30 days',
+    name: "Commands Processed",
+    value: "2.4M",
+    period: "Last 30 days",
     icon: <Activity className="h-5 w-5" />,
-    color: 'text-purple-600'
+    color: "text-purple-600",
   },
   {
-    name: 'Active Repositories',
-    value: '15.2K',
-    period: 'Currently monitored',
+    name: "Active Repositories",
+    value: "15.2K",
+    period: "Currently monitored",
     icon: <Database className="h-5 w-5" />,
-    color: 'text-indigo-600'
-  }
+    color: "text-indigo-600",
+  },
 ];
 
 const getStatusIcon = (status: string) => {
   switch (status) {
-    case 'operational':
+    case "operational":
       return <CheckCircle2 className="h-5 w-5 text-green-500" />;
-    case 'degraded':
+    case "degraded":
       return <AlertTriangle className="h-5 w-5 text-yellow-500" />;
-    case 'incident':
+    case "incident":
       return <XCircle className="h-5 w-5 text-red-500" />;
     default:
       return <Clock className="h-5 w-5 text-gray-500" />;
@@ -164,74 +186,111 @@ const getStatusIcon = (status: string) => {
 
 const getStatusColor = (status: string) => {
   switch (status) {
-    case 'operational':
-      return 'border-green-200 bg-green-50';
-    case 'degraded':
-      return 'border-yellow-200 bg-yellow-50';
-    case 'incident':
-      return 'border-red-200 bg-red-50';
+    case "operational":
+      return "border-green-200 bg-green-50";
+    case "degraded":
+      return "border-yellow-200 bg-yellow-50";
+    case "incident":
+      return "border-red-200 bg-red-50";
     default:
-      return 'border-gray-200 bg-gray-50';
+      return "border-gray-200 bg-gray-50";
   }
 };
 
 const getIncidentStatusBadge = (status: string) => {
   const baseClasses = "px-3 py-1 text-xs font-medium rounded-full";
   switch (status) {
-    case 'investigating':
-      return <span className={`${baseClasses} bg-yellow-100 text-yellow-800`}>Investigating</span>;
-    case 'identified':
-      return <span className={`${baseClasses} bg-blue-100 text-blue-800`}>Identified</span>;
-    case 'monitoring':
-      return <span className={`${baseClasses} bg-purple-100 text-purple-800`}>Monitoring</span>;
-    case 'resolved':
-      return <span className={`${baseClasses} bg-green-100 text-green-800`}>Resolved</span>;
+    case "investigating":
+      return (
+        <span className={`${baseClasses} bg-yellow-100 text-yellow-800`}>
+          Investigating
+        </span>
+      );
+    case "identified":
+      return (
+        <span className={`${baseClasses} bg-blue-100 text-blue-800`}>
+          Identified
+        </span>
+      );
+    case "monitoring":
+      return (
+        <span className={`${baseClasses} bg-purple-100 text-purple-800`}>
+          Monitoring
+        </span>
+      );
+    case "resolved":
+      return (
+        <span className={`${baseClasses} bg-green-100 text-green-800`}>
+          Resolved
+        </span>
+      );
     default:
-      return <span className={`${baseClasses} bg-gray-100 text-gray-800`}>{status}</span>;
+      return (
+        <span className={`${baseClasses} bg-gray-100 text-gray-800`}>
+          {status}
+        </span>
+      );
   }
 };
 
 const getSeverityBadge = (severity: string) => {
   const baseClasses = "px-2 py-1 text-xs font-medium rounded";
   switch (severity) {
-    case 'critical':
-      return <span className={`${baseClasses} bg-red-100 text-red-800`}>Critical</span>;
-    case 'major':
-      return <span className={`${baseClasses} bg-orange-100 text-orange-800`}>Major</span>;
-    case 'minor':
-      return <span className={`${baseClasses} bg-yellow-100 text-yellow-800`}>Minor</span>;
+    case "critical":
+      return (
+        <span className={`${baseClasses} bg-red-100 text-red-800`}>
+          Critical
+        </span>
+      );
+    case "major":
+      return (
+        <span className={`${baseClasses} bg-orange-100 text-orange-800`}>
+          Major
+        </span>
+      );
+    case "minor":
+      return (
+        <span className={`${baseClasses} bg-yellow-100 text-yellow-800`}>
+          Minor
+        </span>
+      );
     default:
-      return <span className={`${baseClasses} bg-gray-100 text-gray-800`}>{severity}</span>;
+      return (
+        <span className={`${baseClasses} bg-gray-100 text-gray-800`}>
+          {severity}
+        </span>
+      );
   }
 };
 
 const getOverallStatus = () => {
-  const hasIncident = systems.some(s => s.status === 'incident');
-  const hasDegraded = systems.some(s => s.status === 'degraded');
-  
+  const hasIncident = systems.some((s) => s.status === "incident");
+  const hasDegraded = systems.some((s) => s.status === "degraded");
+
   if (hasIncident) {
     return {
-      status: 'incident',
-      message: 'Some Systems Experiencing Issues',
-      description: 'We are currently experiencing issues with some of our services.',
-      color: 'bg-red-50 border-red-200',
-      iconColor: 'text-red-500'
+      status: "incident",
+      message: "Some Systems Experiencing Issues",
+      description:
+        "We are currently experiencing issues with some of our services.",
+      color: "bg-red-50 border-red-200",
+      iconColor: "text-red-500",
     };
   } else if (hasDegraded) {
     return {
-      status: 'degraded',
-      message: 'Partial System Outage',
-      description: 'Some services are experiencing degraded performance.',
-      color: 'bg-yellow-50 border-yellow-200',
-      iconColor: 'text-yellow-500'
+      status: "degraded",
+      message: "Partial System Outage",
+      description: "Some services are experiencing degraded performance.",
+      color: "bg-yellow-50 border-yellow-200",
+      iconColor: "text-yellow-500",
     };
   } else {
     return {
-      status: 'operational',
-      message: 'All Systems Operational',
-      description: 'All services are running normally.',
-      color: 'bg-green-50 border-green-200',
-      iconColor: 'text-green-500'
+      status: "operational",
+      message: "All Systems Operational",
+      description: "All services are running normally.",
+      color: "bg-green-50 border-green-200",
+      iconColor: "text-green-500",
     };
   }
 };
@@ -242,21 +301,28 @@ export default function StatusPage() {
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100">
       <LandingHeader />
-      
+
       <div className="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
         <div className="flex items-center gap-4 mb-8">
-          <Link to="/" className="flex items-center text-gray-600 hover:text-gray-900 transition-colors">
+          <Link
+            to="/"
+            className="flex items-center text-gray-600 hover:text-gray-900 transition-colors"
+          >
             <ArrowLeft className="h-5 w-5 mr-2" />
             Back to Home
           </Link>
         </div>
-        
+
         <div className="bg-white rounded-2xl shadow-xl p-8 border border-gray-200">
           <div className="flex items-center gap-4 mb-8">
             <Activity className="h-8 w-8 text-blue-600" />
             <div>
-              <h1 className="text-3xl font-bold text-gray-900">System Status</h1>
-              <p className="text-gray-600">Real-time status of GStraccini Bot services</p>
+              <h1 className="text-3xl font-bold text-gray-900">
+                System Status
+              </h1>
+              <p className="text-gray-600">
+                Real-time status of GStraccini Bot services
+              </p>
             </div>
           </div>
 
@@ -264,32 +330,55 @@ export default function StatusPage() {
           <div className={`mb-12 p-6 rounded-xl border ${overallStatus.color}`}>
             <div className="flex items-center gap-4">
               <div className={`p-2 rounded-full bg-white`}>
-                {overallStatus.status === 'operational' && <CheckCircle2 className={`h-8 w-8 ${overallStatus.iconColor}`} />}
-                {overallStatus.status === 'degraded' && <AlertTriangle className={`h-8 w-8 ${overallStatus.iconColor}`} />}
-                {overallStatus.status === 'incident' && <XCircle className={`h-8 w-8 ${overallStatus.iconColor}`} />}
+                {overallStatus.status === "operational" && (
+                  <CheckCircle2
+                    className={`h-8 w-8 ${overallStatus.iconColor}`}
+                  />
+                )}
+                {overallStatus.status === "degraded" && (
+                  <AlertTriangle
+                    className={`h-8 w-8 ${overallStatus.iconColor}`}
+                  />
+                )}
+                {overallStatus.status === "incident" && (
+                  <XCircle className={`h-8 w-8 ${overallStatus.iconColor}`} />
+                )}
               </div>
               <div>
-                <h2 className="text-xl font-semibold text-gray-900">{overallStatus.message}</h2>
+                <h2 className="text-xl font-semibold text-gray-900">
+                  {overallStatus.message}
+                </h2>
                 <p className="text-gray-700">{overallStatus.description}</p>
-                <p className="text-sm text-gray-500 mt-1">Last updated: March 1, 2025 15:00 UTC</p>
+                <p className="text-sm text-gray-500 mt-1">
+                  Last updated: March 1, 2025 15:00 UTC
+                </p>
               </div>
             </div>
           </div>
 
           {/* Key Metrics */}
           <div className="mb-12">
-            <h2 className="text-xl font-semibold text-gray-900 mb-6">Key Metrics</h2>
+            <h2 className="text-xl font-semibold text-gray-900 mb-6">
+              Key Metrics
+            </h2>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
               {metrics.map((metric, index) => (
-                <div key={index} className="bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg p-6 border border-gray-200">
+                <div
+                  key={index}
+                  className="bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg p-6 border border-gray-200"
+                >
                   <div className="flex items-center justify-between mb-3">
                     <div className={`p-2 rounded-lg bg-white ${metric.color}`}>
                       {metric.icon}
                     </div>
                   </div>
                   <div>
-                    <p className="text-2xl font-bold text-gray-900">{metric.value}</p>
-                    <p className="text-sm font-medium text-gray-700">{metric.name}</p>
+                    <p className="text-2xl font-bold text-gray-900">
+                      {metric.value}
+                    </p>
+                    <p className="text-sm font-medium text-gray-700">
+                      {metric.name}
+                    </p>
                     <p className="text-xs text-gray-500">{metric.period}</p>
                   </div>
                 </div>
@@ -299,18 +388,24 @@ export default function StatusPage() {
 
           {/* System Components */}
           <div className="mb-12">
-            <h2 className="text-xl font-semibold text-gray-900 mb-6">System Components</h2>
+            <h2 className="text-xl font-semibold text-gray-900 mb-6">
+              System Components
+            </h2>
             <div className="grid gap-4">
               {systems.map((system, index) => (
-                <div 
+                <div
                   key={index}
                   className={`flex items-center justify-between p-4 rounded-lg border ${getStatusColor(system.status)}`}
                 >
                   <div className="flex items-center gap-4">
                     {getStatusIcon(system.status)}
                     <div>
-                      <span className="font-medium text-gray-900">{system.name}</span>
-                      <p className="text-sm text-gray-600">{system.description}</p>
+                      <span className="font-medium text-gray-900">
+                        {system.name}
+                      </span>
+                      <p className="text-sm text-gray-600">
+                        {system.description}
+                      </p>
                     </div>
                   </div>
                   <div className="flex items-center gap-6 text-right">
@@ -323,12 +418,17 @@ export default function StatusPage() {
                       <div>{system.uptime}</div>
                     </div>
                     <div className="text-sm">
-                      <span className={`px-3 py-1 rounded-full text-xs font-medium ${
-                        system.status === 'operational' ? 'bg-green-100 text-green-800' :
-                        system.status === 'degraded' ? 'bg-yellow-100 text-yellow-800' :
-                        'bg-red-100 text-red-800'
-                      }`}>
-                        {system.status.charAt(0).toUpperCase() + system.status.slice(1)}
+                      <span
+                        className={`px-3 py-1 rounded-full text-xs font-medium ${
+                          system.status === "operational"
+                            ? "bg-green-100 text-green-800"
+                            : system.status === "degraded"
+                              ? "bg-yellow-100 text-yellow-800"
+                              : "bg-red-100 text-red-800"
+                        }`}
+                      >
+                        {system.status.charAt(0).toUpperCase() +
+                          system.status.slice(1)}
                       </span>
                     </div>
                   </div>
@@ -339,32 +439,49 @@ export default function StatusPage() {
 
           {/* Recent Incidents */}
           <div className="mb-12">
-            <h2 className="text-xl font-semibold text-gray-900 mb-6">Recent Incidents</h2>
+            <h2 className="text-xl font-semibold text-gray-900 mb-6">
+              Recent Incidents
+            </h2>
             <div className="space-y-6">
               {incidents.map((incident, index) => (
-                <div key={index} className="border border-gray-200 rounded-lg p-6 bg-gray-50">
+                <div
+                  key={index}
+                  className="border border-gray-200 rounded-lg p-6 bg-gray-50"
+                >
                   <div className="flex items-start justify-between mb-4">
                     <div className="flex-1">
                       <div className="flex items-center gap-3 mb-2">
-                        <h3 className="text-lg font-medium text-gray-900">{incident.title}</h3>
+                        <h3 className="text-lg font-medium text-gray-900">
+                          {incident.title}
+                        </h3>
                         {getIncidentStatusBadge(incident.status)}
                         {getSeverityBadge(incident.severity)}
                       </div>
-                      <p className="text-sm text-gray-500 mb-3">{incident.date}</p>
-                      <p className="text-gray-700 mb-4">{incident.description}</p>
+                      <p className="text-sm text-gray-500 mb-3">
+                        {incident.date}
+                      </p>
+                      <p className="text-gray-700 mb-4">
+                        {incident.description}
+                      </p>
                     </div>
                   </div>
-                  
+
                   {/* Incident Updates */}
                   <div className="border-t border-gray-200 pt-4">
-                    <h4 className="text-sm font-medium text-gray-900 mb-3">Updates</h4>
+                    <h4 className="text-sm font-medium text-gray-900 mb-3">
+                      Updates
+                    </h4>
                     <div className="space-y-3">
                       {incident.updates.map((update, updateIndex) => (
                         <div key={updateIndex} className="flex gap-3">
                           <div className="flex-shrink-0 w-2 h-2 rounded-full bg-blue-500 mt-2"></div>
                           <div>
-                            <p className="text-sm text-gray-700">{update.message}</p>
-                            <p className="text-xs text-gray-500">{update.time}</p>
+                            <p className="text-sm text-gray-700">
+                              {update.message}
+                            </p>
+                            <p className="text-xs text-gray-500">
+                              {update.time}
+                            </p>
                           </div>
                         </div>
                       ))}
@@ -384,12 +501,21 @@ export default function StatusPage() {
                   Status Page Information
                 </h3>
                 <div className="space-y-3 text-sm text-gray-600">
-                  <p>This page is updated in real-time and shows the current status of all GStraccini Bot services.</p>
-                  <p>Status updates are posted automatically when incidents are detected or resolved.</p>
-                  <p>For historical data and detailed metrics, visit our monitoring dashboard.</p>
+                  <p>
+                    This page is updated in real-time and shows the current
+                    status of all GStraccini Bot services.
+                  </p>
+                  <p>
+                    Status updates are posted automatically when incidents are
+                    detected or resolved.
+                  </p>
+                  <p>
+                    For historical data and detailed metrics, visit our
+                    monitoring dashboard.
+                  </p>
                 </div>
               </div>
-              
+
               <div>
                 <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
                   <Server className="h-5 w-5 text-blue-600" />
@@ -397,15 +523,22 @@ export default function StatusPage() {
                 </h3>
                 <div className="space-y-3">
                   <div>
-                    <p className="text-sm font-medium text-gray-700">Support Email</p>
-                    <a href="mailto:support@gstraccini-bot.com" className="text-sm text-blue-600 hover:text-blue-800">
+                    <p className="text-sm font-medium text-gray-700">
+                      Support Email
+                    </p>
+                    <a
+                      href="mailto:support@gstraccini-bot.com"
+                      className="text-sm text-blue-600 hover:text-blue-800"
+                    >
                       support@gstraccini-bot.com
                     </a>
                   </div>
                   <div>
-                    <p className="text-sm font-medium text-gray-700">Documentation</p>
-                    <a 
-                      href="https://docs.bot.straccini.com" 
+                    <p className="text-sm font-medium text-gray-700">
+                      Documentation
+                    </p>
+                    <a
+                      href="https://docs.bot.straccini.com"
                       target="_blank"
                       rel="noopener noreferrer"
                       className="text-sm text-blue-600 hover:text-blue-800"
@@ -414,9 +547,11 @@ export default function StatusPage() {
                     </a>
                   </div>
                   <div>
-                    <p className="text-sm font-medium text-gray-700">GitHub Issues</p>
-                    <a 
-                      href="https://github.com/guibranco/gstraccini-bot-service/issues" 
+                    <p className="text-sm font-medium text-gray-700">
+                      GitHub Issues
+                    </p>
+                    <a
+                      href="https://github.com/guibranco/gstraccini-bot-service/issues"
                       target="_blank"
                       rel="noopener noreferrer"
                       className="text-sm text-blue-600 hover:text-blue-800"
@@ -434,4 +569,4 @@ export default function StatusPage() {
       <LandingFooter />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Terms.tsx b/src/pages/Terms.tsx
index a890124..b9d68c8 100644
--- a/src/pages/Terms.tsx
+++ b/src/pages/Terms.tsx
@@ -1,28 +1,44 @@
-import React from 'react';
-import { FileText, ArrowLeft, Scale, Users, Shield, AlertTriangle, Clock, Globe } from 'lucide-react';
-import { Link } from 'react-router-dom';
-import LandingHeader from '../components/LandingHeader';
-import LandingFooter from '../components/LandingFooter';
+import React from "react";
+import {
+  FileText,
+  ArrowLeft,
+  Scale,
+  Users,
+  Shield,
+  AlertTriangle,
+  Clock,
+  Globe,
+} from "lucide-react";
+import { Link } from "react-router-dom";
+import LandingHeader from "../components/LandingHeader";
+import LandingFooter from "../components/LandingFooter";
 
 export default function TermsPage() {
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100">
       <LandingHeader />
-      
+
       <div className="max-w-4xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
         <div className="flex items-center gap-4 mb-8">
-          <Link to="/" className="flex items-center text-gray-600 hover:text-gray-900 transition-colors">
+          <Link
+            to="/"
+            className="flex items-center text-gray-600 hover:text-gray-900 transition-colors"
+          >
             <ArrowLeft className="h-5 w-5 mr-2" />
             Back to Home
           </Link>
         </div>
-        
+
         <div className="bg-white rounded-2xl shadow-xl p-8 border border-gray-200">
           <div className="flex items-center gap-4 mb-8">
             <FileText className="h-8 w-8 text-blue-600" />
             <div>
-              <h1 className="text-3xl font-bold text-gray-900">Terms of Service</h1>
-              <p className="text-gray-600">Legal terms and conditions for using GStraccini Bot</p>
+              <h1 className="text-3xl font-bold text-gray-900">
+                Terms of Service
+              </h1>
+              <p className="text-gray-600">
+                Legal terms and conditions for using GStraccini Bot
+              </p>
             </div>
           </div>
 
@@ -32,14 +48,23 @@ export default function TermsPage() {
             <section className="mb-8">
               <div className="flex items-center gap-3 mb-4">
                 <Scale className="h-6 w-6 text-blue-600" />
-                <h2 className="text-2xl font-semibold text-gray-900">1. Acceptance of Terms</h2>
+                <h2 className="text-2xl font-semibold text-gray-900">
+                  1. Acceptance of Terms
+                </h2>
               </div>
               <div className="bg-blue-50 rounded-lg p-6 border border-blue-200">
                 <p className="text-gray-700 mb-4">
-                  By accessing or using GStraccini Bot ("the Service"), you agree to be bound by these Terms of Service ("Terms") and all applicable laws and regulations. If you do not agree with any of these terms, you are prohibited from using or accessing this service.
+                  By accessing or using GStraccini Bot ("the Service"), you
+                  agree to be bound by these Terms of Service ("Terms") and all
+                  applicable laws and regulations. If you do not agree with any
+                  of these terms, you are prohibited from using or accessing
+                  this service.
                 </p>
                 <p className="text-gray-700">
-                  These Terms constitute a legally binding agreement between you and GStraccini Bot. Your use of the Service is also governed by our Privacy Policy, which is incorporated by reference into these Terms.
+                  These Terms constitute a legally binding agreement between you
+                  and GStraccini Bot. Your use of the Service is also governed
+                  by our Privacy Policy, which is incorporated by reference into
+                  these Terms.
                 </p>
               </div>
             </section>
@@ -47,11 +72,15 @@ export default function TermsPage() {
             <section className="mb-8">
               <div className="flex items-center gap-3 mb-4">
                 <Users className="h-6 w-6 text-green-600" />
-                <h2 className="text-2xl font-semibold text-gray-900">2. Description of Service</h2>
+                <h2 className="text-2xl font-semibold text-gray-900">
+                  2. Description of Service
+                </h2>
               </div>
               <div className="bg-green-50 rounded-lg p-6 border border-green-200">
                 <p className="text-gray-700 mb-4">
-                  GStraccini Bot is a GitHub application that provides automated workflow management, code quality analysis, and repository maintenance services. The Service includes:
+                  GStraccini Bot is a GitHub application that provides automated
+                  workflow management, code quality analysis, and repository
+                  maintenance services. The Service includes:
                 </p>
                 <ul className="list-disc pl-6 text-gray-700 space-y-2">
                   <li>Automated pull request management and labeling</li>
@@ -67,27 +96,54 @@ export default function TermsPage() {
             <section className="mb-8">
               <div className="flex items-center gap-3 mb-4">
                 <Shield className="h-6 w-6 text-purple-600" />
-                <h2 className="text-2xl font-semibold text-gray-900">3. Use License and Restrictions</h2>
+                <h2 className="text-2xl font-semibold text-gray-900">
+                  3. Use License and Restrictions
+                </h2>
               </div>
               <div className="bg-purple-50 rounded-lg p-6 border border-purple-200">
-                <h3 className="text-lg font-semibold text-gray-800 mb-3">3.1 License Grant</h3>
+                <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                  3.1 License Grant
+                </h3>
                 <p className="text-gray-700 mb-4">
-                  Subject to these Terms, we grant you a limited, non-exclusive, non-transferable, revocable license to use the Service for your legitimate business or personal purposes.
-                </p>
-                
-                <h3 className="text-lg font-semibold text-gray-800 mb-3">3.2 Restrictions</h3>
-                <p className="text-gray-700 mb-4">
-                  You may not:
+                  Subject to these Terms, we grant you a limited, non-exclusive,
+                  non-transferable, revocable license to use the Service for
+                  your legitimate business or personal purposes.
                 </p>
+
+                <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                  3.2 Restrictions
+                </h3>
+                <p className="text-gray-700 mb-4">You may not:</p>
                 <ul className="list-disc pl-6 text-gray-700 space-y-2">
-                  <li>Modify, copy, or create derivative works of the Service</li>
-                  <li>Use the Service for any commercial purpose without authorization</li>
-                  <li>Attempt to decompile, reverse engineer, or extract source code</li>
-                  <li>Remove any copyright, trademark, or proprietary notices</li>
-                  <li>Use the Service to violate any applicable laws or regulations</li>
-                  <li>Interfere with or disrupt the Service or its infrastructure</li>
-                  <li>Use the Service to transmit malicious code or harmful content</li>
-                  <li>Attempt to gain unauthorized access to other users' accounts or data</li>
+                  <li>
+                    Modify, copy, or create derivative works of the Service
+                  </li>
+                  <li>
+                    Use the Service for any commercial purpose without
+                    authorization
+                  </li>
+                  <li>
+                    Attempt to decompile, reverse engineer, or extract source
+                    code
+                  </li>
+                  <li>
+                    Remove any copyright, trademark, or proprietary notices
+                  </li>
+                  <li>
+                    Use the Service to violate any applicable laws or
+                    regulations
+                  </li>
+                  <li>
+                    Interfere with or disrupt the Service or its infrastructure
+                  </li>
+                  <li>
+                    Use the Service to transmit malicious code or harmful
+                    content
+                  </li>
+                  <li>
+                    Attempt to gain unauthorized access to other users' accounts
+                    or data
+                  </li>
                 </ul>
               </div>
             </section>
@@ -95,12 +151,18 @@ export default function TermsPage() {
             <section className="mb-8">
               <div className="flex items-center gap-3 mb-4">
                 <Clock className="h-6 w-6 text-orange-600" />
-                <h2 className="text-2xl font-semibold text-gray-900">4. Service Availability and Modifications</h2>
+                <h2 className="text-2xl font-semibold text-gray-900">
+                  4. Service Availability and Modifications
+                </h2>
               </div>
               <div className="bg-orange-50 rounded-lg p-6 border border-orange-200">
-                <h3 className="text-lg font-semibold text-gray-800 mb-3">4.1 Service Availability</h3>
+                <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                  4.1 Service Availability
+                </h3>
                 <p className="text-gray-700 mb-4">
-                  We strive to provide uninterrupted service, but we do not guarantee that the Service will be available at all times. The Service may be temporarily unavailable due to:
+                  We strive to provide uninterrupted service, but we do not
+                  guarantee that the Service will be available at all times. The
+                  Service may be temporarily unavailable due to:
                 </p>
                 <ul className="list-disc pl-6 text-gray-700 space-y-2 mb-4">
                   <li>Scheduled maintenance and updates</li>
@@ -108,10 +170,15 @@ export default function TermsPage() {
                   <li>Third-party service dependencies</li>
                   <li>Force majeure events beyond our control</li>
                 </ul>
-                
-                <h3 className="text-lg font-semibold text-gray-800 mb-3">4.2 Service Modifications</h3>
+
+                <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                  4.2 Service Modifications
+                </h3>
                 <p className="text-gray-700">
-                  We reserve the right to modify, suspend, or discontinue the Service (or any part thereof) at any time, with or without notice. We may also impose limits on certain features or restrict access to parts of the Service.
+                  We reserve the right to modify, suspend, or discontinue the
+                  Service (or any part thereof) at any time, with or without
+                  notice. We may also impose limits on certain features or
+                  restrict access to parts of the Service.
                 </p>
               </div>
             </section>
@@ -119,32 +186,46 @@ export default function TermsPage() {
             <section className="mb-8">
               <div className="flex items-center gap-3 mb-4">
                 <Users className="h-6 w-6 text-indigo-600" />
-                <h2 className="text-2xl font-semibold text-gray-900">5. User Responsibilities and Conduct</h2>
+                <h2 className="text-2xl font-semibold text-gray-900">
+                  5. User Responsibilities and Conduct
+                </h2>
               </div>
               <div className="bg-indigo-50 rounded-lg p-6 border border-indigo-200">
-                <h3 className="text-lg font-semibold text-gray-800 mb-3">5.1 Account Security</h3>
-                <p className="text-gray-700 mb-4">
-                  You are responsible for:
-                </p>
+                <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                  5.1 Account Security
+                </h3>
+                <p className="text-gray-700 mb-4">You are responsible for:</p>
                 <ul className="list-disc pl-6 text-gray-700 space-y-2 mb-4">
-                  <li>Maintaining the confidentiality of your GitHub account credentials</li>
+                  <li>
+                    Maintaining the confidentiality of your GitHub account
+                    credentials
+                  </li>
                   <li>All activities that occur under your account</li>
                   <li>Notifying us immediately of any unauthorized use</li>
-                  <li>Ensuring your account information is accurate and up-to-date</li>
+                  <li>
+                    Ensuring your account information is accurate and up-to-date
+                  </li>
                 </ul>
 
-                <h3 className="text-lg font-semibold text-gray-800 mb-3">5.2 Acceptable Use</h3>
+                <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                  5.2 Acceptable Use
+                </h3>
                 <p className="text-gray-700 mb-4">
                   You agree to use the Service in compliance with:
                 </p>
                 <ul className="list-disc pl-6 text-gray-700 space-y-2 mb-4">
-                  <li>All applicable local, state, national, and international laws</li>
+                  <li>
+                    All applicable local, state, national, and international
+                    laws
+                  </li>
                   <li>GitHub's Terms of Service and Community Guidelines</li>
                   <li>These Terms and our Privacy Policy</li>
                   <li>Any additional guidelines we may publish</li>
                 </ul>
 
-                <h3 className="text-lg font-semibold text-gray-800 mb-3">5.3 Prohibited Activities</h3>
+                <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                  5.3 Prohibited Activities
+                </h3>
                 <p className="text-gray-700 mb-4">
                   You may not use the Service to:
                 </p>
@@ -163,20 +244,34 @@ export default function TermsPage() {
             <section className="mb-8">
               <div className="flex items-center gap-3 mb-4">
                 <Shield className="h-6 w-6 text-teal-600" />
-                <h2 className="text-2xl font-semibold text-gray-900">6. Privacy and Data Protection</h2>
+                <h2 className="text-2xl font-semibold text-gray-900">
+                  6. Privacy and Data Protection
+                </h2>
               </div>
               <div className="bg-teal-50 rounded-lg p-6 border border-teal-200">
                 <p className="text-gray-700 mb-4">
-                  Your privacy is important to us. Our collection, use, and protection of your personal information is governed by our Privacy Policy, which is incorporated by reference into these Terms.
+                  Your privacy is important to us. Our collection, use, and
+                  protection of your personal information is governed by our
+                  Privacy Policy, which is incorporated by reference into these
+                  Terms.
                 </p>
                 <p className="text-gray-700 mb-4">
                   By using the Service, you consent to:
                 </p>
                 <ul className="list-disc pl-6 text-gray-700 space-y-2">
-                  <li>The collection and processing of your data as described in our Privacy Policy</li>
+                  <li>
+                    The collection and processing of your data as described in
+                    our Privacy Policy
+                  </li>
                   <li>The use of cookies and similar technologies</li>
-                  <li>The transfer of your data to third-party service providers as necessary</li>
-                  <li>The retention of your data for the periods specified in our Privacy Policy</li>
+                  <li>
+                    The transfer of your data to third-party service providers
+                    as necessary
+                  </li>
+                  <li>
+                    The retention of your data for the periods specified in our
+                    Privacy Policy
+                  </li>
                 </ul>
               </div>
             </section>
@@ -184,21 +279,29 @@ export default function TermsPage() {
             <section className="mb-8">
               <div className="flex items-center gap-3 mb-4">
                 <Globe className="h-6 w-6 text-cyan-600" />
-                <h2 className="text-2xl font-semibold text-gray-900">7. Third-Party Integrations</h2>
+                <h2 className="text-2xl font-semibold text-gray-900">
+                  7. Third-Party Integrations
+                </h2>
               </div>
               <div className="bg-cyan-50 rounded-lg p-6 border border-cyan-200">
                 <p className="text-gray-700 mb-4">
-                  The Service integrates with various third-party services and platforms, including but not limited to:
+                  The Service integrates with various third-party services and
+                  platforms, including but not limited to:
                 </p>
                 <ul className="list-disc pl-6 text-gray-700 space-y-2 mb-4">
                   <li>GitHub and GitHub API</li>
-                  <li>Code quality services (SonarCloud, Codacy, CodeClimate)</li>
+                  <li>
+                    Code quality services (SonarCloud, Codacy, CodeClimate)
+                  </li>
                   <li>Security scanning tools (Snyk, DeepSource)</li>
                   <li>CI/CD platforms (AppVeyor, GitHub Actions)</li>
                   <li>AI services (OpenAI, Llama, Claude)</li>
                 </ul>
                 <p className="text-gray-700">
-                  Your use of these third-party services is subject to their respective terms of service and privacy policies. We are not responsible for the availability, content, or practices of these third-party services.
+                  Your use of these third-party services is subject to their
+                  respective terms of service and privacy policies. We are not
+                  responsible for the availability, content, or practices of
+                  these third-party services.
                 </p>
               </div>
             </section>
@@ -206,29 +309,59 @@ export default function TermsPage() {
             <section className="mb-8">
               <div className="flex items-center gap-3 mb-4">
                 <AlertTriangle className="h-6 w-6 text-red-600" />
-                <h2 className="text-2xl font-semibold text-gray-900">8. Disclaimers and Limitation of Liability</h2>
+                <h2 className="text-2xl font-semibold text-gray-900">
+                  8. Disclaimers and Limitation of Liability
+                </h2>
               </div>
               <div className="bg-red-50 rounded-lg p-6 border border-red-200">
-                <h3 className="text-lg font-semibold text-gray-800 mb-3">8.1 Service Disclaimers</h3>
+                <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                  8.1 Service Disclaimers
+                </h3>
                 <p className="text-gray-700 mb-4">
-                  THE SERVICE IS PROVIDED "AS IS" AND "AS AVAILABLE" WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO:
+                  THE SERVICE IS PROVIDED "AS IS" AND "AS AVAILABLE" WITHOUT
+                  WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING
+                  BUT NOT LIMITED TO:
                 </p>
                 <ul className="list-disc pl-6 text-gray-700 space-y-2 mb-4">
-                  <li>Warranties of merchantability, fitness for a particular purpose, or non-infringement</li>
-                  <li>Warranties that the Service will be uninterrupted, error-free, or secure</li>
-                  <li>Warranties regarding the accuracy or reliability of any content</li>
+                  <li>
+                    Warranties of merchantability, fitness for a particular
+                    purpose, or non-infringement
+                  </li>
+                  <li>
+                    Warranties that the Service will be uninterrupted,
+                    error-free, or secure
+                  </li>
+                  <li>
+                    Warranties regarding the accuracy or reliability of any
+                    content
+                  </li>
                 </ul>
 
-                <h3 className="text-lg font-semibold text-gray-800 mb-3">8.2 Limitation of Liability</h3>
+                <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                  8.2 Limitation of Liability
+                </h3>
                 <p className="text-gray-700 mb-4">
-                  TO THE MAXIMUM EXTENT PERMITTED BY LAW, WE SHALL NOT BE LIABLE FOR ANY:
+                  TO THE MAXIMUM EXTENT PERMITTED BY LAW, WE SHALL NOT BE LIABLE
+                  FOR ANY:
                 </p>
                 <ul className="list-disc pl-6 text-gray-700 space-y-2">
-                  <li>Indirect, incidental, special, consequential, or punitive damages</li>
-                  <li>Loss of profits, data, use, goodwill, or other intangible losses</li>
-                  <li>Damages resulting from unauthorized access to or alteration of your data</li>
+                  <li>
+                    Indirect, incidental, special, consequential, or punitive
+                    damages
+                  </li>
+                  <li>
+                    Loss of profits, data, use, goodwill, or other intangible
+                    losses
+                  </li>
+                  <li>
+                    Damages resulting from unauthorized access to or alteration
+                    of your data
+                  </li>
                   <li>Damages resulting from third-party conduct or content</li>
-                  <li>Damages exceeding the amount paid by you for the Service in the 12 months preceding the claim</li>
+                  <li>
+                    Damages exceeding the amount paid by you for the Service in
+                    the 12 months preceding the claim
+                  </li>
                 </ul>
               </div>
             </section>
@@ -236,18 +369,27 @@ export default function TermsPage() {
             <section className="mb-8">
               <div className="flex items-center gap-3 mb-4">
                 <Scale className="h-6 w-6 text-emerald-600" />
-                <h2 className="text-2xl font-semibold text-gray-900">9. Indemnification</h2>
+                <h2 className="text-2xl font-semibold text-gray-900">
+                  9. Indemnification
+                </h2>
               </div>
               <div className="bg-emerald-50 rounded-lg p-6 border border-emerald-200">
                 <p className="text-gray-700 mb-4">
-                  You agree to indemnify, defend, and hold harmless GStraccini Bot, its officers, directors, employees, agents, and affiliates from and against any claims, liabilities, damages, losses, costs, expenses, or fees (including reasonable attorneys' fees) arising from:
+                  You agree to indemnify, defend, and hold harmless GStraccini
+                  Bot, its officers, directors, employees, agents, and
+                  affiliates from and against any claims, liabilities, damages,
+                  losses, costs, expenses, or fees (including reasonable
+                  attorneys' fees) arising from:
                 </p>
                 <ul className="list-disc pl-6 text-gray-700 space-y-2">
                   <li>Your use or misuse of the Service</li>
                   <li>Your violation of these Terms</li>
                   <li>Your violation of any rights of another party</li>
                   <li>Your violation of any applicable laws or regulations</li>
-                  <li>Any content you submit, post, or transmit through the Service</li>
+                  <li>
+                    Any content you submit, post, or transmit through the
+                    Service
+                  </li>
                 </ul>
               </div>
             </section>
@@ -255,28 +397,44 @@ export default function TermsPage() {
             <section className="mb-8">
               <div className="flex items-center gap-3 mb-4">
                 <Clock className="h-6 w-6 text-violet-600" />
-                <h2 className="text-2xl font-semibold text-gray-900">10. Termination</h2>
+                <h2 className="text-2xl font-semibold text-gray-900">
+                  10. Termination
+                </h2>
               </div>
               <div className="bg-violet-50 rounded-lg p-6 border border-violet-200">
-                <h3 className="text-lg font-semibold text-gray-800 mb-3">10.1 Termination by You</h3>
+                <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                  10.1 Termination by You
+                </h3>
                 <p className="text-gray-700 mb-4">
-                  You may terminate your use of the Service at any time by uninstalling the GitHub application and ceasing to use our services.
+                  You may terminate your use of the Service at any time by
+                  uninstalling the GitHub application and ceasing to use our
+                  services.
                 </p>
 
-                <h3 className="text-lg font-semibold text-gray-800 mb-3">10.2 Termination by Us</h3>
+                <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                  10.2 Termination by Us
+                </h3>
                 <p className="text-gray-700 mb-4">
-                  We may terminate or suspend your access to the Service immediately, without prior notice, if you:
+                  We may terminate or suspend your access to the Service
+                  immediately, without prior notice, if you:
                 </p>
                 <ul className="list-disc pl-6 text-gray-700 space-y-2 mb-4">
                   <li>Violate these Terms</li>
                   <li>Engage in prohibited activities</li>
                   <li>Pose a security risk to the Service or other users</li>
-                  <li>Use the Service in a manner that could damage our reputation</li>
+                  <li>
+                    Use the Service in a manner that could damage our reputation
+                  </li>
                 </ul>
 
-                <h3 className="text-lg font-semibold text-gray-800 mb-3">10.3 Effect of Termination</h3>
+                <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                  10.3 Effect of Termination
+                </h3>
                 <p className="text-gray-700">
-                  Upon termination, your right to use the Service will cease immediately. We may delete your account and all associated data, though we may retain certain information as required by law or for legitimate business purposes.
+                  Upon termination, your right to use the Service will cease
+                  immediately. We may delete your account and all associated
+                  data, though we may retain certain information as required by
+                  law or for legitimate business purposes.
                 </p>
               </div>
             </section>
@@ -284,22 +442,34 @@ export default function TermsPage() {
             <section className="mb-8">
               <div className="flex items-center gap-3 mb-4">
                 <Globe className="h-6 w-6 text-blue-600" />
-                <h2 className="text-2xl font-semibold text-gray-900">11. Governing Law and Dispute Resolution</h2>
+                <h2 className="text-2xl font-semibold text-gray-900">
+                  11. Governing Law and Dispute Resolution
+                </h2>
               </div>
               <div className="bg-blue-50 rounded-lg p-6 border border-blue-200">
-                <h3 className="text-lg font-semibold text-gray-800 mb-3">11.1 Governing Law</h3>
+                <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                  11.1 Governing Law
+                </h3>
                 <p className="text-gray-700 mb-4">
-                  These Terms shall be governed by and construed in accordance with the laws of [Jurisdiction], without regard to its conflict of law provisions.
+                  These Terms shall be governed by and construed in accordance
+                  with the laws of [Jurisdiction], without regard to its
+                  conflict of law provisions.
                 </p>
 
-                <h3 className="text-lg font-semibold text-gray-800 mb-3">11.2 Dispute Resolution</h3>
+                <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                  11.2 Dispute Resolution
+                </h3>
                 <p className="text-gray-700 mb-4">
-                  Any disputes arising out of or relating to these Terms or the Service shall be resolved through:
+                  Any disputes arising out of or relating to these Terms or the
+                  Service shall be resolved through:
                 </p>
                 <ul className="list-disc pl-6 text-gray-700 space-y-2">
                   <li>Good faith negotiations between the parties</li>
                   <li>Binding arbitration if negotiations fail</li>
-                  <li>The exclusive jurisdiction of courts in [Jurisdiction] for any matters not subject to arbitration</li>
+                  <li>
+                    The exclusive jurisdiction of courts in [Jurisdiction] for
+                    any matters not subject to arbitration
+                  </li>
                 </ul>
               </div>
             </section>
@@ -307,27 +477,42 @@ export default function TermsPage() {
             <section className="mb-8">
               <div className="flex items-center gap-3 mb-4">
                 <FileText className="h-6 w-6 text-gray-600" />
-                <h2 className="text-2xl font-semibold text-gray-900">12. General Provisions</h2>
+                <h2 className="text-2xl font-semibold text-gray-900">
+                  12. General Provisions
+                </h2>
               </div>
               <div className="bg-gray-50 rounded-lg p-6 border border-gray-200">
-                <h3 className="text-lg font-semibold text-gray-800 mb-3">12.1 Entire Agreement</h3>
+                <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                  12.1 Entire Agreement
+                </h3>
                 <p className="text-gray-700 mb-4">
-                  These Terms, together with our Privacy Policy, constitute the entire agreement between you and us regarding the Service.
+                  These Terms, together with our Privacy Policy, constitute the
+                  entire agreement between you and us regarding the Service.
                 </p>
 
-                <h3 className="text-lg font-semibold text-gray-800 mb-3">12.2 Severability</h3>
+                <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                  12.2 Severability
+                </h3>
                 <p className="text-gray-700 mb-4">
-                  If any provision of these Terms is found to be unenforceable, the remaining provisions will remain in full force and effect.
+                  If any provision of these Terms is found to be unenforceable,
+                  the remaining provisions will remain in full force and effect.
                 </p>
 
-                <h3 className="text-lg font-semibold text-gray-800 mb-3">12.3 Waiver</h3>
+                <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                  12.3 Waiver
+                </h3>
                 <p className="text-gray-700 mb-4">
-                  No waiver of any term or condition shall be deemed a further or continuing waiver of such term or any other term.
+                  No waiver of any term or condition shall be deemed a further
+                  or continuing waiver of such term or any other term.
                 </p>
 
-                <h3 className="text-lg font-semibold text-gray-800 mb-3">12.4 Assignment</h3>
+                <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                  12.4 Assignment
+                </h3>
                 <p className="text-gray-700">
-                  You may not assign or transfer these Terms or your rights hereunder without our prior written consent. We may assign these Terms without restriction.
+                  You may not assign or transfer these Terms or your rights
+                  hereunder without our prior written consent. We may assign
+                  these Terms without restriction.
                 </p>
               </div>
             </section>
@@ -335,11 +520,14 @@ export default function TermsPage() {
             <section className="mb-8">
               <div className="flex items-center gap-3 mb-4">
                 <AlertTriangle className="h-6 w-6 text-yellow-600" />
-                <h2 className="text-2xl font-semibold text-gray-900">13. Changes to Terms</h2>
+                <h2 className="text-2xl font-semibold text-gray-900">
+                  13. Changes to Terms
+                </h2>
               </div>
               <div className="bg-yellow-50 rounded-lg p-6 border border-yellow-200">
                 <p className="text-gray-700 mb-4">
-                  We reserve the right to modify these Terms at any time. We will notify you of any changes by:
+                  We reserve the right to modify these Terms at any time. We
+                  will notify you of any changes by:
                 </p>
                 <ul className="list-disc pl-6 text-gray-700 space-y-2 mb-4">
                   <li>Posting the new Terms on this page</li>
@@ -348,7 +536,9 @@ export default function TermsPage() {
                   <li>Providing notice through our application interface</li>
                 </ul>
                 <p className="text-gray-700">
-                  Your continued use of the Service after any such changes constitutes your acceptance of the new Terms. If you do not agree to the modified Terms, you must stop using the Service.
+                  Your continued use of the Service after any such changes
+                  constitutes your acceptance of the new Terms. If you do not
+                  agree to the modified Terms, you must stop using the Service.
                 </p>
               </div>
             </section>
@@ -356,17 +546,23 @@ export default function TermsPage() {
             <section>
               <div className="flex items-center gap-3 mb-4">
                 <Users className="h-6 w-6 text-blue-600" />
-                <h2 className="text-2xl font-semibold text-gray-900">14. Contact Information</h2>
+                <h2 className="text-2xl font-semibold text-gray-900">
+                  14. Contact Information
+                </h2>
               </div>
               <p className="text-gray-700 mb-6">
-                If you have any questions about these Terms of Service, please contact us:
+                If you have any questions about these Terms of Service, please
+                contact us:
               </p>
               <div className="bg-gray-50 p-6 rounded-lg border border-gray-200">
                 <div className="grid gap-4">
                   <div>
                     <p className="text-gray-700 mb-2">
-                      <strong>Legal Email:</strong>{' '}
-                      <a href="mailto:legal@gstraccini-bot.com" className="text-blue-600 hover:text-blue-800 transition-colors">
+                      <strong>Legal Email:</strong>{" "}
+                      <a
+                        href="mailto:legal@gstraccini-bot.com"
+                        className="text-blue-600 hover:text-blue-800 transition-colors"
+                      >
                         legal@gstraccini-bot.com
                       </a>
                     </p>
@@ -376,8 +572,11 @@ export default function TermsPage() {
                   </div>
                   <div>
                     <p className="text-gray-700 mb-2">
-                      <strong>Support Email:</strong>{' '}
-                      <a href="mailto:support@gstraccini-bot.com" className="text-blue-600 hover:text-blue-800 transition-colors">
+                      <strong>Support Email:</strong>{" "}
+                      <a
+                        href="mailto:support@gstraccini-bot.com"
+                        className="text-blue-600 hover:text-blue-800 transition-colors"
+                      >
                         support@gstraccini-bot.com
                       </a>
                     </p>
@@ -387,9 +586,9 @@ export default function TermsPage() {
                   </div>
                   <div>
                     <p className="text-gray-700 mb-2">
-                      <strong>GitHub:</strong>{' '}
-                      <a 
-                        href="https://github.com/guibranco/gstraccini-bot-service/issues" 
+                      <strong>GitHub:</strong>{" "}
+                      <a
+                        href="https://github.com/guibranco/gstraccini-bot-service/issues"
                         target="_blank"
                         rel="noopener noreferrer"
                         className="text-blue-600 hover:text-blue-800 transition-colors"
@@ -403,9 +602,9 @@ export default function TermsPage() {
                   </div>
                   <div>
                     <p className="text-gray-700 mb-2">
-                      <strong>Documentation:</strong>{' '}
-                      <a 
-                        href="https://docs.gstraccini.bot/legal/terms" 
+                      <strong>Documentation:</strong>{" "}
+                      <a
+                        href="https://docs.gstraccini.bot/legal/terms"
                         target="_blank"
                         rel="noopener noreferrer"
                         className="text-blue-600 hover:text-blue-800 transition-colors"
@@ -427,4 +626,4 @@ export default function TermsPage() {
       <LandingFooter />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/types.ts b/src/types.ts
index a55f411..90dda86 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,4 +1,4 @@
-import { User } from './types';
+import { User } from "./types";
 
 export interface User {
   login: string;
@@ -43,7 +43,7 @@ export interface Installation {
     login: string;
     name?: string;
     avatar_url: string;
-    type: 'User' | 'Organization';
+    type: "User" | "Organization";
   };
   repositories_count: number;
   created_at: string;
@@ -66,7 +66,7 @@ export interface PullRequest {
   repository: string;
   full_name: string;
   created_at: string;
-  state: 'success' | 'failure' | 'pending' | 'error' | 'skipped' | 'empty';
+  state: "success" | "failure" | "pending" | "error" | "skipped" | "empty";
   owner?: string;
   labels?: Label[];
   sender: User;
@@ -91,7 +91,12 @@ export interface Issue {
 
 export interface Activity {
   id: string;
-  type: 'pr_created' | 'pr_merged' | 'issue_closed' | 'commits_analyzed' | 'pr_opened';
+  type:
+    | "pr_created"
+    | "pr_merged"
+    | "issue_closed"
+    | "commits_analyzed"
+    | "pr_opened";
   description: string;
   repository: string;
   timestamp: string;
@@ -100,10 +105,15 @@ export interface Activity {
 
 export interface PendingAction {
   id: string;
-  type: 'review_pr' | 'close_issue' | 'merge_pr' | 'update_readme' | 'respond_issue';
+  type:
+    | "review_pr"
+    | "close_issue"
+    | "merge_pr"
+    | "update_readme"
+    | "respond_issue";
   description: string;
   repository: string;
-  priority: 'high' | 'medium' | 'low';
+  priority: "high" | "medium" | "low";
 }
 
 export interface Repository {
@@ -116,7 +126,7 @@ export interface Repository {
   forks: number;
   issues: number;
   language: string;
-  visibility: 'public' | 'private';
+  visibility: "public" | "private";
   branches: Branch[];
   default_branch: string;
   latest_release?: Release;
@@ -165,7 +175,7 @@ export interface BranchProtection {
 export interface Ruleset {
   name: string;
   target: string[];
-  enforcement: 'active' | 'evaluate' | 'disabled';
+  enforcement: "active" | "evaluate" | "disabled";
   bypass_actors: string[];
   conditions: {
     ref_name: {
@@ -187,7 +197,7 @@ export interface Workflow {
   id: string;
   name: string;
   path: string;
-  state: 'active' | 'disabled';
+  state: "active" | "disabled";
   created_at: string;
   updated_at: string;
   triggers: string[];
@@ -215,8 +225,8 @@ export interface WorkflowStep {
 export interface WorkflowRun {
   id: string;
   workflow_name: string;
-  status: 'queued' | 'in_progress' | 'completed';
-  conclusion: 'success' | 'failure' | 'cancelled' | 'skipped' | null;
+  status: "queued" | "in_progress" | "completed";
+  conclusion: "success" | "failure" | "cancelled" | "skipped" | null;
   created_at: string;
   updated_at: string;
   head_branch: string;
@@ -232,8 +242,8 @@ export interface WorkflowRun {
 export interface WorkflowRunJob {
   id: string;
   name: string;
-  status: 'queued' | 'in_progress' | 'completed';
-  conclusion: 'success' | 'failure' | 'cancelled' | 'skipped' | null;
+  status: "queued" | "in_progress" | "completed";
+  conclusion: "success" | "failure" | "cancelled" | "skipped" | null;
   started_at: string;
   completed_at?: string;
   steps: WorkflowRunStep[];
@@ -241,8 +251,8 @@ export interface WorkflowRunJob {
 
 export interface WorkflowRunStep {
   name: string;
-  status: 'queued' | 'in_progress' | 'completed';
-  conclusion: 'success' | 'failure' | 'cancelled' | 'skipped' | null;
+  status: "queued" | "in_progress" | "completed";
+  conclusion: "success" | "failure" | "cancelled" | "skipped" | null;
   number: number;
   started_at: string;
   completed_at?: string;
@@ -250,7 +260,13 @@ export interface WorkflowRunStep {
 
 export interface Notification {
   id: string;
-  type: 'pr_review' | 'pr_merged' | 'issue_mention' | 'issue_assigned' | 'pr_changes' | 'security_alert';
+  type:
+    | "pr_review"
+    | "pr_merged"
+    | "issue_mention"
+    | "issue_assigned"
+    | "pr_changes"
+    | "security_alert";
   title: string;
   description: string;
   repository: string;
@@ -259,7 +275,7 @@ export interface Notification {
   read: boolean;
   url: string;
   sender: User;
-  priority?: 'high' | 'medium' | 'low';
+  priority?: "high" | "medium" | "low";
 }
 
 export interface IntegrationUsage {
@@ -273,7 +289,7 @@ export interface IntegrationUsage {
 export interface Integration {
   provider: string;
   apiKey: string;
-  status: 'Active' | 'Inactive' | 'Error' | 'Validating';
+  status: "Active" | "Inactive" | "Error" | "Validating";
   lastUsage: string;
   lastError: string;
   last_check: string;
@@ -289,7 +305,7 @@ export interface Provider {
   description: string;
 }
 
-export type DependabotFrequency = 'daily' | 'weekly' | 'monthly';
+export type DependabotFrequency = "daily" | "weekly" | "monthly";
 
 export interface RepositorySettings {
   createLabels: boolean;
@@ -302,4 +318,4 @@ export interface RepositorySettings {
   dependabotFrequency: DependabotFrequency;
   createSecretsWorkflow: boolean;
   createLintersWorkflow: boolean;
-}
\ No newline at end of file
+}
diff --git a/src/utils/avatar.ts b/src/utils/avatar.ts
index f57da62..628d501 100644
--- a/src/utils/avatar.ts
+++ b/src/utils/avatar.ts
@@ -1,3 +1,3 @@
 export function getAppAvatarUrl(appId: string): string {
   return `https://github.com/apps/${appId}.png`;
-}
\ No newline at end of file
+}
diff --git a/src/utils/events.ts b/src/utils/events.ts
index 9e061a3..66b1170 100644
--- a/src/utils/events.ts
+++ b/src/utils/events.ts
@@ -1,12 +1,17 @@
-import type { Event } from '../types';
+import type { Event } from "../types";
 
-export function groupEventsByPayloadId(events: Event[]): Record<string, Event[]> {
-  return events.reduce((acc, event) => {
-    const id = event.delivery_id;
-    if (!acc[id]) {
-      acc[id] = [];
-    }
-    acc[id].push(event);
-    return acc;
-  }, {} as Record<string, Event[]>);
-}
\ No newline at end of file
+export function groupEventsByPayloadId(
+  events: Event[],
+): Record<string, Event[]> {
+  return events.reduce(
+    (acc, event) => {
+      const id = event.delivery_id;
+      if (!acc[id]) {
+        acc[id] = [];
+      }
+      acc[id].push(event);
+      return acc;
+    },
+    {} as Record<string, Event[]>,
+  );
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 2906ce6..09a6017 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,9 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  darkMode: 'class',
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  darkMode: "class",
   theme: {
     extend: {},
   },
   plugins: [],
-};
\ No newline at end of file
+};
diff --git a/tests/example.test.tsx b/tests/example.test.tsx
index 5b2539a..0963fe3 100644
--- a/tests/example.test.tsx
+++ b/tests/example.test.tsx
@@ -1,20 +1,20 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { Button } from '@/components/ui/Button';
-import '@testing-library/jest-dom';
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Button } from "@/components/ui/Button";
+import "@testing-library/jest-dom";
 
-describe('Button', () => {
-  it('renders with default variant', () => {
+describe("Button", () => {
+  it("renders with default variant", () => {
     render(<Button>Click me</Button>);
-    const button = screen.getByRole('button', { name: /click me/i });
+    const button = screen.getByRole("button", { name: /click me/i });
     expect(button).toBeInTheDocument();
-    expect(button).toHaveClass('bg-blue-600');
+    expect(button).toHaveClass("bg-blue-600");
   });
 
-  it('renders with outline-solid variant', () => {
+  it("renders with outline-solid variant", () => {
     render(<Button variant="outline">Click me</Button>);
-    const button = screen.getByRole('button', { name: /click me/i });
+    const button = screen.getByRole("button", { name: /click me/i });
     expect(button).toBeInTheDocument();
-    expect(button).toHaveClass('border-gray-300');
+    expect(button).toHaveClass("border-gray-300");
   });
 });
diff --git a/tests/setup.ts b/tests/setup.ts
index 2de3614..140fe47 100644
--- a/tests/setup.ts
+++ b/tests/setup.ts
@@ -1,7 +1,7 @@
-import '@testing-library/jest-dom/vitest';
-import { expect, afterEach } from 'vitest';
-import { cleanup } from '@testing-library/react';
-import * as matchers from '@testing-library/jest-dom/matchers';
+import "@testing-library/jest-dom/vitest";
+import { expect, afterEach } from "vitest";
+import { cleanup } from "@testing-library/react";
+import * as matchers from "@testing-library/jest-dom/matchers";
 
 // Extend Vitest's expect method with methods from react-testing-library
 expect.extend(matchers);
diff --git a/vite.config.ts b/vite.config.ts
index 1dff26f..9570ffb 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,11 +1,11 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  base: '/gstraccini-bot-portal/',
+  base: "/gstraccini-bot-portal/",
   optimizeDeps: {
-    exclude: ['lucide-react'],
+    exclude: ["lucide-react"],
   },
 });