diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 00000000..56a595fd
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,294 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+### Setup
+```bash
+yarn                    # Install dependencies (requires Node.js >=20.x)
+```
+
+### Development
+```bash
+yarn start              # Start dev server on localhost:3000
+yarn build              # Production build to ./build directory
+yarn lint               # Run ESLint
+yarn lint:styles        # Run stylelint on styled-components
+```
+
+### Notes
+- This project uses **Yarn 4.5.1** as the package manager
+- Development server runs on port 3000 (configured in vite.config.ts)
+- Build output is in `./build` directory (not `dist`)
+- No test suite is currently configured
+
+## High-Level Architecture
+
+### Tech Stack
+- **React 18** with TypeScript (strict mode)
+- **Vite** for build tooling
+- **Redux Toolkit** for state management
+- **React Router v6** for routing
+- **Ant Design v5** + styled-components for UI
+- **Axios** for HTTP with interceptors
+
+### Application Purpose
+Penify (Snorkell) Dashboard is a SaaS platform for automated code documentation generation and analysis. It integrates with multiple Git platforms (GitHub, GitLab, Bitbucket, Azure DevOps) to provide:
+- Function-level documentation coverage analysis
+- AI-powered documentation generation
+- Code quality metrics (complexity, maintainability)
+- README quality analysis
+- Security vulnerability scanning
+
+### Core Architectural Patterns
+
+#### 1. Multi-Vendor Git Platform Integration
+The app is vendor-agnostic and supports 4 Git platforms through a unified abstraction:
+
+```typescript
+// Routes follow pattern: /repositories/{vendor}/{orgName}/{repoName}
+// vendor = GITHUB | GITLAB | BITBUCKET | AZURE
+```
+
+**Integration mechanisms**:
+- **GitHub**: OAuth flow via redirect to GitHub Apps
+- **GitLab/Bitbucket/Azure**: Custom Server-Sent Events (SSE) installation flow with real-time progress streaming
+
+Key files:
+- `src/api/git.api.ts` - Git repository operations (vendor-agnostic)
+- `src/api/azure.api.ts` - Azure-specific PAT authentication
+- `src/utils/EventSourceWithAuth.ts` - Custom SSE client with Bearer token support
+
+#### 2. Long-Running Operations (LRO) Pattern
+Documentation generation is asynchronous and may take minutes. The app uses a job-based system:
+
+```typescript
+// Workflow:
+// 1. POST /v1/git/job/{genType}/start → returns lroJobId
+// 2. Poll GET /v1/git/lro/jobs/{jobId} → check LroJobState
+// 3. Stream progress via GET /v1/git/lro/jobs/{jobId}/logs (SSE)
+// 4. On COMPLETE → fetch generated results
+```
+
+States: `START | VALIDATING | QUEUED | RUNNING | COMPLETE | FAILED | CANCELLED | TIMEOUT`
+
+Key files:
+- `src/api/lro.api.ts` - Job status polling
+- `src/api/docgen.api.ts` - Documentation generation triggers
+- `src/components/dashboard/DashboardTerminal/` - Real-time progress UI
+
+#### 3. Layered Architecture
+The codebase follows strict separation of concerns:
+
+```
+┌─────────────────────────────────────┐
+│  Components & Pages (UI Layer)     │
+│  - React components                 │
+│  - styled-components                │
+│  - Ant Design integration           │
+└─────────────┬───────────────────────┘
+              ↓
+┌─────────────────────────────────────┐
+│  Redux Store (State Layer)          │
+│  - userSlice, authSlice, themeSlice │
+│  - Async thunks for API calls       │
+│  - localStorage persistence         │
+└─────────────┬───────────────────────┘
+              ↓
+┌─────────────────────────────────────┐
+│  API Layer (Data Layer)             │
+│  - src/api/*.api.ts files           │
+│  - All HTTP communication           │
+│  - Request/response transformation  │
+└─────────────────────────────────────┘
+```
+
+**Critical rule**: Components NEVER import API modules directly. All data fetching flows through Redux thunks or React hooks that encapsulate API calls.
+
+#### 4. Authentication & Request Flow
+
+```typescript
+// All HTTP requests flow through src/api/http.api.ts
+const httpApi = axios.create({ baseURL: VITE_BASE_URL })
+
+// Request interceptor: Adds Authorization header from localStorage
+httpApi.interceptors.request.use(config => {
+  const token = readToken()
+  if (token) config.headers.Authorization = `Bearer ${token}`
+  return config
+})
+
+// Response interceptor: Handles 511 (auth required) → auto-logout
+httpApi.interceptors.response.use(
+  response => response,
+  error => {
+    if (error.response?.status === 511) {
+      // Logout user, clear token, redirect to /
+    }
+    throw error
+  }
+)
+```
+
+Token persistence: `src/services/localStorage.service.ts` handles sync between Redux and localStorage.
+
+#### 5. Multi-Language Documentation Support
+The platform supports language-specific documentation styles:
+
+```typescript
+// Python: GOOGLE | EPYDOC | NUMPYDOC | REST
+// JavaScript/TypeScript: JSDoc
+// Java: JavaDoc
+// C#: XML
+// Kotlin: KDoc
+// C/C++: Doxygen | JavaDoc-Style
+```
+
+Fetched via `getLanguage(orgName, repoName, vendor)` in `src/api/docgen.api.ts`, then passed to generation API.
+
+#### 6. Routing & Code Splitting
+Routes defined in `src/components/router/AppRouter.tsx`:
+
+**Protected routes** (requires auth token):
+- `/repositories` - Repository list dashboard
+- `/repositories/{vendor}/{orgName}/{repoName}` - Repository detail
+- `/repositories/{vendor}/{orgName}/{repoName}/analyze` - Analysis view
+- `/repositories/{vendor}/{orgName}/{repoName}/docufy` - Documentation generation
+- `/repositories/{vendor}/{orgName}/{repoName}/security` - Security scan
+- `/jobs` - Job history
+- `/penify-api-keys` - API key management
+- `/profile/*` - User settings
+
+**Public routes**:
+- `/auth/login`, `/auth/sign-up` - Authentication
+- `/oauth/github`, `/oauth/google` - OAuth callbacks
+
+**Code splitting**: Most pages are lazy-loaded via `React.lazy()` + `withLoading()` HOC (except auth pages to prevent flickering).
+
+#### 7. Analytics Integration
+Dual tracking system:
+
+```typescript
+// Mixpanel: Custom event tracking with user context
+trackEvent(eventName, properties)
+trackPageView(pathname, user)
+trackClicks() // Global click listener
+
+// Google Analytics 4: Basic page view tracking
+trackGAPageView(pathname)
+```
+
+Initialized in `src/App.tsx`, configured in `src/config/mixpanel.ts` and `src/config/ga.ts`.
+
+All events include user metadata: `distinct_id`, `user_email`, `github_id`, `google_id`, etc.
+
+#### 8. Theme System
+Dual theme support (light/dark) with system preference detection:
+
+```typescript
+// src/styles/themes/themeVariables.ts defines color palettes
+// useThemeWatcher() hook detects OS dark mode preference
+// themeSlice stores user's explicit theme choice
+// styled-components ThemeProvider propagates theme to all components
+```
+
+Theme toggle available in user profile settings.
+
+### Key Directory Purposes
+
+**`src/api/`** - All backend HTTP communication
+Each file maps to a backend service domain (auth, git, docgen, payment, etc.). All functions return typed Promises.
+
+**`src/store/`** - Redux Toolkit configuration
+- `store.ts` - Store setup with error logging middleware
+- `slices/` - Feature-based reducers with async thunks
+
+**`src/components/`** - Feature-based React components
+Organized by domain (dashboard, auth, profile, common). Each complex component has its own directory with `.styles.ts` file.
+
+**`src/pages/`** - Route-level page components
+Top-level components that map to router paths. These orchestrate smaller components.
+
+**`src/domain/`** - Data models
+TypeScript interfaces representing backend entities (UserModel, etc.).
+
+**`src/hooks/`** - Custom React hooks
+`reduxHooks.ts` provides typed `useAppSelector`/`useAppDispatch`. Other hooks encapsulate common logic (language switching, responsive breakpoints).
+
+**`src/utils/`** - Utility functions
+`EventSourceWithAuth.ts` is critical - custom EventSource class that supports Authorization headers for SSE streaming.
+
+**`src/constants/`** - Enums and static config
+Plan types, Git vendors, language codes, etc.
+
+**`src/styles/`** - Global styles and theme definitions
+`GlobalStyle.tsx` applies CSS reset + base styles. `themeVariables.ts` defines color system.
+
+**`src/locales/`** - i18n translation files
+Currently supports English (en) and German (de).
+
+### Important Implementation Notes
+
+1. **Backend uses snake_case, frontend uses camelCase**
+   API transformation happens in Redux thunks or API layer. Example in `src/api/auth.api.ts`.
+
+2. **Environment variables required**:
+   ```bash
+   VITE_BASE_URL=<backend-api-url>
+   VITE_ASSETS_BUCKET=<s3-bucket-for-assets>
+   ```
+
+3. **Path alias**: `@app/*` resolves to `src/*` (configured in tsconfig + vite)
+
+4. **SVG imports**: SVGs can be imported as React components via vite-plugin-svgr
+
+5. **Vendor colors**: Each Git platform has a brand color (GitHub: purple, GitLab: orange, etc.) defined in theme variables
+
+6. **Modal/Notification controllers**: Centralized UI feedback in `src/controllers/`
+   ```typescript
+   import { notificationController } from '@app/controllers/notificationController'
+   notificationController.success({ message: 'Success!' })
+   ```
+
+7. **Subscription tiers**: FREE, PREMIUM, PRO (impacts feature availability)
+   User plan stored in `user.subscription_info.planType`
+
+8. **Security**: Never commit `.env` files. API keys/tokens only in environment variables.
+
+### Common Workflows
+
+**Adding a new API endpoint**:
+1. Define TypeScript interface for request/response in `src/@types/` or inline
+2. Add function to appropriate `src/api/*.api.ts` file
+3. Create async thunk in Redux slice if state management needed
+4. Use in component via `useAppDispatch()`
+
+**Adding a new protected route**:
+1. Create page component in `src/pages/DashboardPages/`
+2. Lazy load with `withLoading()` HOC
+3. Add route in `src/components/router/AppRouter.tsx` inside `<RequireAuth>`
+4. Add navigation link in `src/components/layouts/main/MainSider/`
+
+**Adding analytics tracking**:
+```typescript
+import { trackEvent } from '@app/config/mixpanel'
+
+// In component:
+trackEvent('Button Clicked', { buttonName: 'Generate Docs', repoName })
+```
+
+**Styling new components**:
+```typescript
+// ComponentName.tsx
+import * as S from './ComponentName.styles'
+
+export const ComponentName = () => <S.Container>...</S.Container>
+
+// ComponentName.styles.ts
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  color: ${props => props.theme.colors.main.primary};
+`
+```
diff --git a/package.json b/package.json
index 2e32981b..39589470 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "framer-motion": "^12.5.0",
     "html-react-parser": "^5.2.3",
     "i18next": "^23.15.1",
-    "mixpanel-browser": "^2.55.1",
+    "mixpanel-browser": "^2.64.0",
     "prismjs": "^1.29.0",
     "qs": "^6.13.0",
     "react": "^18.3.1",
diff --git a/src/api/docgen.api.ts b/src/api/docgen.api.ts
index 7c1d846d..76f415e3 100644
--- a/src/api/docgen.api.ts
+++ b/src/api/docgen.api.ts
@@ -108,7 +108,7 @@ export const triggerDocGen = (
   archDocConfig?: ArchDocConfig,
 ): Promise<DocGenInitialResponse> => {
   const data = buildDocGenData(orgName, repoName, vendor);
-  const url = `/v1/git/generate/${genType}/doc`;
+  const url = `/v1/git/job/${genType}/start`;
   return httpApi.post<DocGenInitialResponse>(url, { ...data, style_guide: styleGuide, arch_doc_config: archDocConfig }).then(({ data }) => data);
 };
 
@@ -119,15 +119,14 @@ export const getDocGenStatus = (
   genType: string,
   lroJobId: string,
 ): Promise<DocGenStatusReponse> => {
-  const data = buildDocGenData(orgName, repoName, vendor);
-  const url = `/v1/git/generate/${genType}/doc/status?jobId=${lroJobId}`;
-  return httpApi.post<DocGenStatusReponse>(url, { ...data }).then(({ data }) => data);
+  const url = `/v1/git/job/${lroJobId}/status`;
+  return httpApi.get<DocGenStatusReponse>(url).then(({ data }) => data);
 };
 
 export const terminateJob = (
   lroJobId: string,
 ): Promise<Record<string, string>> => {
-  const url = `/v1/git/lro/${lroJobId}/terminate`;
+  const url = `/v1/git/job/${lroJobId}/terminate`;
   return httpApi.post<Record<string, string>>(url).then(({ data }) => data);
 };
 
@@ -165,7 +164,7 @@ export const getAdvancedRepoAnalysisDetails = (
   analysisType: string,
 ): Promise<FunctionDetail[] | Record<string, string>> => {
   const data = buildDocGenData(orgName, repoName, vendor);
-  const url = `/v1/git/analyze/repo/${analysisType}/details`;
+  const url = `/v1/git/job/${analysisType}/details`;
   
   return httpApi.post<FunctionDetail[] | Record<string, string>>(url, { ...data }).then(({ data }) => data); // Extract the message 
 };
diff --git a/src/api/git.api.ts b/src/api/git.api.ts
index 633beb90..d7cd8c3b 100644
--- a/src/api/git.api.ts
+++ b/src/api/git.api.ts
@@ -49,12 +49,6 @@ export enum FunctionOutdatedStatusEnum {
   CURRENT = "CURRENT"
 }
 
-export type FunctionOutdatedResponseSchema = {
-  status: FunctionOutdatedStatusEnum;
-  explanation: string;
-  docstring?: string;
-  grammarError?: boolean;
-}
 
 export type FunctionDetail = {
   name: string;
@@ -69,10 +63,14 @@ export type FunctionDetail = {
   halsteadVolume?: number;
   halsteadDifficulty?: number;
   halsteadEffort?: number;
+  grammarError: boolean;
+  funStartLine: number;
+  funEndLine: number;
+  suggestedDocstring?: string;
   
   complexityCategory?: ComplexityCategory;
-  languageType: string;
-  outdatedStatus?: FunctionOutdatedResponseSchema;
+  plName: string;
+  outdatedDocstring?: boolean;
   urgentDocumentation?: boolean;
   
   hasDocstring: boolean;
@@ -101,6 +99,14 @@ export type TextStatistics = {
   wordCount?: number;
   readmeScore?: number;
 }
+
+export type LLMReadmeAnalysisResponse = {
+  overallEvaluation: string[];
+  strengths: string[];
+  weaknesses: string[];
+  recommendations: string[];
+  score: number; // LLM interpretation score
+}
   
 export type ReadmeAnalysis = {
   lines: number;
@@ -110,7 +116,7 @@ export type ReadmeAnalysis = {
   url: string;
   brokenLinks: string[];
   grammarError: number;
-  llmInterpretationScore: number;
+  llmInterpretation: LLMReadmeAnalysisResponse;
   calculatedQualityScore: number;
 }
 
@@ -126,6 +132,11 @@ export type GitAppMetaData = {
   analysisReport: AnalysisReport;
 };
 
+export type GitAppAdvancedMetaData = {
+  analysisReport: AnalysisReport;
+};
+
+
 export enum PlanType {
   FREE = "FREE",
   PREMIUM = "PREMIUM",
@@ -140,11 +151,11 @@ export type GitAppUsageType = {
   vendor: string;
   planType: PlanType;
   gitAppMetaData: GitAppMetaData;
+  gitAppAdvancedMeta: GitAppAdvancedMetaData;
   isActive: boolean;
   isPrivate: boolean;
   isInstalled: boolean;
   userId: number;
-  full_repo_count: number;
 };
 
 export const getGitAppUsageForRepository = (
diff --git a/src/components/common/BaseMenu/BaseMenu.styles.ts b/src/components/common/BaseMenu/BaseMenu.styles.ts
index b789bc81..984120c8 100644
--- a/src/components/common/BaseMenu/BaseMenu.styles.ts
+++ b/src/components/common/BaseMenu/BaseMenu.styles.ts
@@ -3,14 +3,14 @@ import { Menu as AntMenu } from 'antd';
 
 export const Menu = styled(AntMenu)`
   &.ant-menu .ant-menu-item-icon {
-    font-size: ${({ theme }) => theme.fontSizes.xl};
-    width: 1.25rem;
+    font-size: ${({ theme }) => theme.fontSizes.md};
+    width: 1rem;
   }
 
   .ant-menu-item,
   .ant-menu-submenu {
     font-size: ${({ theme }) => theme.fontSizes.xs};
-    border-radius: 0;
+    border-radius: 6px;
   }
 
   .ant-menu-item {
diff --git a/src/components/dashboard/DashboardHeader/OutdatedDocsModal.tsx b/src/components/dashboard/DashboardHeader/OutdatedDocsModal.tsx
index 53a21046..b72156b4 100644
--- a/src/components/dashboard/DashboardHeader/OutdatedDocsModal.tsx
+++ b/src/components/dashboard/DashboardHeader/OutdatedDocsModal.tsx
@@ -76,6 +76,27 @@ const SuggestedDocBlock = styled.pre`
   word-break: break-all;
 `;
 
+const HoverLink = styled.div`
+  display: none;
+  position: absolute;
+  background: #f0f0f0;
+  border: 1px solid #d9d9d9;
+  padding: 4px 8px;
+  border-radius: 4px;
+  z-index: 1000;
+  margin-top: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  font-size: 12px;
+  
+  .link-container:hover & {
+    display: block;
+  }
+`;
+
+const LinkContainer = styled.div`
+  position: relative;
+`;
+
 const OutdatedDocsModal: React.FC<OutdatedDocsModalProps> = ({
   visible,
   onClose,
@@ -88,7 +109,7 @@ const OutdatedDocsModal: React.FC<OutdatedDocsModalProps> = ({
   
   // Filter for outdated and urgent docs
   const outdatedFunctions = functionDetails?.filter(
-    func => func.outdatedStatus?.status === FunctionOutdatedStatusEnum.OUTDATED
+    func => func.outdatedDocstring
   ) || [];
   
   const urgentFunctions = functionDetails?.filter(
@@ -134,8 +155,9 @@ const OutdatedDocsModal: React.FC<OutdatedDocsModalProps> = ({
   // Prepare data for charts
   
   // Outdated by language chart data
+  console.log('Outdated Functions:', outdatedFunctions);
   const outdatedByLanguage = outdatedFunctions.reduce((acc, func) => {
-    const lang = func.languageType;
+    const lang = func.plName;
     acc[lang] = (acc[lang] || 0) + 1;
     return acc;
   }, {} as Record<string, number>);
@@ -236,14 +258,26 @@ const OutdatedDocsModal: React.FC<OutdatedDocsModalProps> = ({
   const outdatedColumns = [
     {
       title: 'Function Name',
-      dataIndex: 'name',
-      key: 'name',
+      dataIndex: 'methodName',
+      key: 'methodName',
       render: (text: string, record: FunctionDetail) => (
-        <Tooltip title={record.gitLocation}>
-          <Text strong>{text}</Text>
+        <LinkContainer className="link-container">
+          <a 
+            href={record.gitLocation} 
+            target="_blank" 
+            rel="noopener noreferrer"
+            title="Click to open in new tab"
+          >
+            <Text strong>{text}</Text>
+          </a>
           <br />
           <Text type="secondary">{record.fileName}</Text>
-        </Tooltip>
+          <HoverLink>
+            <a href={record.gitLocation} target="_blank" rel="noopener noreferrer">
+              {record.gitLocation}
+            </a>
+          </HoverLink>
+        </LinkContainer>
       ),
     },
     {
@@ -253,7 +287,7 @@ const OutdatedDocsModal: React.FC<OutdatedDocsModalProps> = ({
       render: (text: ComplexityCategory, record: FunctionDetail) => {
         const color = text === ComplexityCategory.HIGH ? 'red' : 
                     text === ComplexityCategory.MEDIUM ? 'orange' : 'green';
-        return <Tag color={color}>{text}</Tag>;
+        return <><Tag color={color}>{text}</Tag> </>;
       },
       sorter: (a: FunctionDetail, b: FunctionDetail) => {
         const order = { [ComplexityCategory.HIGH]: 3, [ComplexityCategory.MEDIUM]: 2, [ComplexityCategory.LOW]: 1 };
@@ -273,25 +307,40 @@ const OutdatedDocsModal: React.FC<OutdatedDocsModalProps> = ({
     },
     {
       title: 'Language',
-      dataIndex: 'languageType',
+      dataIndex: 'plName',
       key: 'language',
       render: (text: string) => <Tag>{text}</Tag>
     },
     {
       title: 'Issue',
-      dataIndex: 'outdatedStatus',
+      dataIndex: 'outdatedDocstring',
       key: 'issue',
-      render: (status: FunctionDetail['outdatedStatus']) => {
+      render: (status: FunctionDetail['outdatedDocstring'], record: FunctionDetail) => {
         if (!status) return '-';
         return (
-          <Tooltip title={status.explanation}>
+          <Tooltip title={record.suggestedDocstring || 'No suggested docstring'}>
             <Tag icon={<WarningOutlined />} color="warning">
-              {status.grammarError ? 'Grammar Error' : 'Outdated'}
+              {record.grammarError ? 'Grammar Error' : 'Outdated'}
             </Tag>
           </Tooltip>
         );
       }
     },
+    // {
+    //   title: 'CP',
+    //   dataIndex: 'cyclomaticComplexity',
+    //   key: 'cyclomaticComplexity',
+    //   render: (status: FunctionDetail['cyclomaticComplexity'], record: FunctionDetail) => {
+    //     if (!status) return '-';
+    //     return (
+    //       <Tooltip title={record.suggestedDocstring || 'No suggested docstring'}>
+    //         <Tag icon={<WarningOutlined />} >
+    //           {record.grammarError ? 'Grammar Error' : 'Outdated'}
+    //         </Tag>
+    //       </Tooltip>
+    //     );
+    //   }
+    // },
     {
       title: 'Urgent',
       dataIndex: 'urgentDocumentation',
@@ -377,24 +426,16 @@ const OutdatedDocsModal: React.FC<OutdatedDocsModalProps> = ({
                       </>
                     )}
                     
-                    {record.outdatedStatus?.docstring && (
+                    {record.suggestedDocstring && (
                       <>
                         <Text type="secondary">Suggested Docstring:</Text>
-                        <SuggestedDocBlock>{record.outdatedStatus.docstring}</SuggestedDocBlock>
+                        <SuggestedDocBlock>{record.suggestedDocstring}</SuggestedDocBlock>
                       </>
                     )}
                     
                     <Text type="secondary">Function Code:</Text>
                     <CodeBlock>{record.content}</CodeBlock>
-                    
-                    {record.outdatedStatus?.explanation && (
-                      <>
-                        <Text type="secondary">Issue Explanation:</Text>
-                        <Paragraph style={{ fontSize: 13 }}>
-                          {record.outdatedStatus.explanation}
-                        </Paragraph>
-                      </>
-                    )}
+
                   </div>
                 ),
               }}
@@ -418,18 +459,26 @@ const OutdatedDocsModal: React.FC<OutdatedDocsModalProps> = ({
                         <DocStringBlock>{record.docstring}</DocStringBlock>
                       </>
                     )}
+
+                    {record.suggestedDocstring && (
+                      <>
+                        <Text type="secondary">Suggested Docstring:</Text>
+                        <SuggestedDocBlock>{record.suggestedDocstring}</SuggestedDocBlock>
+                      </>
+                    )}
+                    
                     
                     <Text type="secondary">Function Code:</Text>
                     <CodeBlock>{record.content}</CodeBlock>
                     
-                    {record.outdatedStatus?.explanation && (
+                    {/* {record.suggestedDocstring && (
                       <>
                         <Text type="secondary">Issue Explanation:</Text>
                         <Paragraph style={{ fontSize: 13 }}>
-                          {record.outdatedStatus.explanation}
+                          {record.suggestedDocstring}
                         </Paragraph>
                       </>
-                    )}
+                    )} */}
                   </div>
                 ),
               }}
diff --git a/src/components/dashboard/DashboardHeader/ReadmeAnalysisModal.tsx b/src/components/dashboard/DashboardHeader/ReadmeAnalysisModal.tsx
index eda81307..7f64a20d 100644
--- a/src/components/dashboard/DashboardHeader/ReadmeAnalysisModal.tsx
+++ b/src/components/dashboard/DashboardHeader/ReadmeAnalysisModal.tsx
@@ -1,13 +1,10 @@
 import React, { useState } from 'react';
-import { Modal, Typography, Row, Col, Card, Table, Tag, Alert, Progress, Statistic, Divider, Tooltip, Button, Tabs } from 'antd';
-import { ReadmeAnalysis, TextStatistics } from '@app/api/git.api';
-import { BookOutlined, LinkOutlined, WarningOutlined, ClockCircleOutlined, FileTextOutlined, CheckCircleOutlined, CloseCircleOutlined, BilibiliFilled, FileWordOutlined } from '@ant-design/icons';
+import { Modal, Typography, Row, Col, Card, Alert, Progress, Tabs, Tooltip, Badge } from 'antd';
+import { ReadmeAnalysis } from '@app/api/git.api';
+import { LinkOutlined, WarningOutlined, ClockCircleOutlined, FileTextOutlined, CheckCircleOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
-import ReactECharts from 'echarts-for-react';
-import { theme } from './RepoMetricsCards.styles';
-import MarkdownRenderer from './MarkdownRenderer';
 
-const { Title, Paragraph, Text } = Typography;
+const { Text } = Typography;
 const { TabPane } = Tabs;
 
 interface ReadmeAnalysisModalProps {
@@ -16,27 +13,208 @@ interface ReadmeAnalysisModalProps {
   readmeAnalysis?: ReadmeAnalysis;
   repoName?: string;
   orgName?: string;
-  readmeSuggestion?: string;
 }
 
+// Enterprise-grade styled components
+const EnterpriseModal = styled(Modal)`
+  
+  .ant-modal-content {
+    padding: 10px 12px;
+    border-radius: 12px;
+    box-shadow: 0 20px 64px rgba(0, 0, 0, 0.15), 0 8px 32px rgba(0, 0, 0, 0.08);
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.8);
+  }
+  
+  .ant-modal-header {
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    border-bottom: 1px solid #e2e8f0;
+    padding: 12px 16px;
+    
+    .ant-modal-title {
+      font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+      font-size: 16px;
+      font-weight: 600;
+      color: #1e293b;
+      letter-spacing: -0.01em;
+      line-height: 1.3;
+    }
+  }
+  
+  .ant-modal-body {
+    background: #ffffff;
+  }
+  
+  .ant-modal-close {
+    top: 10px;
+    right: 20px;
+    
+    .ant-modal-close-x {
+      width: 46px;
+      height: 46px;
+      line-height: 46px;
+      font-size: 16px;
+      color: #64748b;
+      transition: all 0.2s ease;
+      border-radius: 8px;
+      
+      &:hover {
+        color: #1e293b;
+        background: rgba(0, 0, 0, 0.04);
+      }
+    }
+  }
+`;
+
 const StyledCard = styled(Card)`
-  border-radius: 8px;
-  margin-bottom: 16px;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+  margin-bottom: 12px;
   height: 100%;
-  box-shadow: ${theme.shadows.card};
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: #ffffff;
+  
+  .ant-card-head {
+    border-bottom: 1px solid #f1f5f9;
+    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+    border-radius: 12px 12px 0 0;
+    padding: 10px 16px;
+    min-height: 40px;
+    
+    .ant-card-head-title {
+      font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+      font-size: 14px;
+      font-weight: 600;
+      color: #1e293b;
+      letter-spacing: -0.01em;
+      padding: 0;
+    }
+  }
+  
+  .ant-card-body {
+    padding: 12px;
+  }
 `;
 
-const StatCard = styled(StyledCard)`
-  .ant-statistic-title {
-    font-size: 14px;
+const MetricRow = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 6px 0;
+  border-bottom: 1px solid #f1f5f9;
+  
+  &:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
   }
-  .ant-statistic-content {
-    font-size: 22px;
+  
+  &:first-child {
+    padding-top: 0;
   }
 `;
 
-const MetricProgress = styled(Progress)`
+const MetricLabel = styled.div`
+  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  font-size: 13px;
+  font-weight: 500;
+  color: #64748b;
+  flex: 1;
+  display: flex;
+  align-items: center;
+`;
+
+const MetricValue = styled.div`
+  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  text-align: right;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+
+const MetricGrid = styled(Row)`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 8px;
+  padding: 0 2px;
+`;
+
+const MetricGridItem = styled.div`
+  padding: 8px;
+  border-radius: 8px;
+  background: #f8fafc;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  
+  .metric-label {
+    font-size: 12px;
+    color: #64748b;
+    margin-bottom: 4px;
+    text-align: center;
+  }
+  
+  .metric-value {
+    font-size: 16px;
+    font-weight: 600;
+    color: #1e293b;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+`;
+
+const QualityAlert = styled(Alert)`
+  border-radius: 8px;
+  border: none;
   margin-bottom: 8px;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  .ant-alert-message {
+    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    font-weight: 600;
+    font-size: 15px;
+  }
+  
+  .ant-alert-description {
+    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    margin-top: 6px;
+  }
+`;
+
+const TabsContainer = styled(Tabs)`
+  .ant-tabs-nav {
+    margin-bottom: 12px;
+  }
+  
+  .ant-tabs-tab {
+    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    font-weight: 500;
+    font-size: 14px;
+    padding: 6px 12px;
+  }
+  
+  .ant-tabs-tab-active .ant-tabs-tab-btn {
+    color: #3b82f6 !important;
+    font-weight: 600;
+  }
+`;
+
+const ScoreBadge = styled(Badge)`
+  .ant-badge-count {
+    background-color: ${props => props.color || '#3b82f6'};
+    font-size: 13px;
+    font-weight: 600;
+    height: 22px;
+    line-height: 22px;
+    padding: 0 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
 `;
 
 const ReadmeAnalysisModal: React.FC<ReadmeAnalysisModalProps> = ({
@@ -44,8 +222,7 @@ const ReadmeAnalysisModal: React.FC<ReadmeAnalysisModalProps> = ({
   onClose,
   readmeAnalysis,
   repoName,
-  orgName,
-  readmeSuggestion
+  orgName
 }) => {
   const [activeTab, setActiveTab] = useState('1');
 
@@ -78,275 +255,440 @@ const ReadmeAnalysisModal: React.FC<ReadmeAnalysisModalProps> = ({
     if (score >= 50) return { text: 'Average', color: '#faad14' };
     return { text: 'Needs Improvement', color: '#f5222d' };
   };
+
+  // Get color for score values
+  const getScoreColor = (score: number, threshold1: number, threshold2: number, inverse = false) => {
+    if (!inverse) {
+      if (score >= threshold1) return '#52c41a';
+      if (score >= threshold2) return '#faad14';
+      return '#f5222d';
+    } else {
+      if (score <= threshold2) return '#52c41a';
+      if (score <= threshold1) return '#faad14';
+      return '#f5222d';
+    }
+  };
   
   const qualityLevel = getQualityLevel(qualityScore);
-  
-  // Chart options for the radar chart
-  const radarChartOption = {
-    tooltip: {
-      trigger: 'item'
-    },
-    radar: {
-      indicator: [
-        { name: 'Readability', max: 100 },
-        { name: 'Length', max: 100 },
-        { name: 'Structure', max: 100 },
-        { name: 'Grammar', max: 100 },
-        { name: 'Links', max: 100 }
-      ]
-    },
-    series: [
-      {
-        name: 'README Quality Metrics',
-        type: 'radar',
-        data: [
-          {
-            value: [
-              // Convert various metrics to a 0-100 scale
-              Math.min(100, ((textStats.fleschReadingEase || 0) / 100) * 100),
-              Math.min(100, ((readmeAnalysis.wordCount || 0) / 1000) * 100),
-              Math.min(100, ((readmeAnalysis.llmInterpretationScore || 0))),
-              Math.min(100, 100 - ((readmeAnalysis.grammarError || 0) / 10) * 100),
-              Math.min(100, 100 - ((readmeAnalysis.brokenLinks || 0) / 5) * 100)
-            ],
-            name: 'Score',
-            areaStyle: {
-              color: 'rgba(24, 144, 255, 0.3)'
-            }
-          }
-        ]
-      }
-    ]
-  };
 
   return (
-    <Modal
+    <EnterpriseModal
       title={`README Analysis - ${orgName}/${repoName}`}
       open={visible}
       onCancel={onClose}
       footer={null}
-      width={1000}
+      width={840}
     >
-      <Tabs activeKey={activeTab} onChange={setActiveTab}>
+      <TabsContainer activeKey={activeTab} onChange={setActiveTab}>
         <TabPane tab="Analysis" key="1">
-          <Row gutter={[16, 16]}>
-            <Col span={24}>
-              <Alert 
-                message={<>README Quality: <Text strong>{qualityLevel.text}</Text></>}
-                description={
-                  <div>
-                    <Progress 
-                      percent={qualityScore} 
-                      status={qualityScore < 50 ? "exception" : undefined} 
-                      strokeColor={qualityLevel.color}
-                      format={() => `${qualityScore.toFixed(1)}%`}
-                    />
-                    <Text>
-                      This score is based on readability, completeness, structure, and other factors.
-                    </Text>
+          {/* Quality Score Header */}
+          <Row gutter={[8, 8]} align="middle">
+            <Col span={18}>
+              <QualityAlert 
+                message={
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                    <span>README Quality: <Text strong>{qualityLevel.text}</Text></span>
+                    <ScoreBadge count={`${qualityScore.toFixed(1)}%`} color={qualityLevel.color} />
                   </div>
                 }
+                description={
+                  <Progress 
+                    percent={qualityScore} 
+                    status={qualityScore < 50 ? "exception" : undefined} 
+                    strokeColor={qualityLevel.color}
+                    showInfo={false}
+                    style={{ marginTop: 4 }}
+                  />
+                }
                 type={qualityScore >= 70 ? "success" : qualityScore >= 50 ? "warning" : "error"}
                 showIcon
               />
             </Col>
-
-            <Col xs={24} md={8}>
-              <StatCard>
-                <Statistic 
-                  title="Word Count" 
-                  value={readmeAnalysis.textStatistics.wordCount} 
-                  prefix={<FileTextOutlined />}
-                  suffix={`words`}
-                />
-                <Divider style={{ margin: '12px 0' }} />
-                <Statistic 
-                  title="Line Count" 
-                  value={readmeAnalysis.textStatistics.lines} 
-                  prefix={<BookOutlined />}
-                  suffix={`lines`}
-                />
-                <Divider style={{ margin: '12px 0' }} />
-                <Statistic 
-                  title="Reading Time" 
-                  value={(textStats.readingTime || 0).toFixed(0)} 
-                  prefix={<ClockCircleOutlined />}
-                  suffix={`seconds`}
-                />
-              </StatCard>
-            </Col>
-
-            <Col xs={24} md={8}>
-              <StatCard>
-                <Statistic 
-                  title="Average Sentence Length" 
-                  value={readmeAnalysis.textStatistics.avgSentenceLength || 0} 
-                  prefix={<FileWordOutlined />}
-                />
-                <Divider style={{ margin: '12px 0' }} />
-                <Statistic 
-                  title="Broken Links" 
-                  value={readmeAnalysis.brokenLinks.length} 
-                  prefix={<LinkOutlined />}
-                  valueStyle={{ color: readmeAnalysis.brokenLinks.length > 0 ? '#f5222d' : '#52c41a' }}
-                />
-                <Divider style={{ margin: '12px 0' }} />
-                <Statistic 
-                  title="Grammar Issues" 
-                  value={readmeAnalysis.grammarError || 0} 
-                  prefix={<WarningOutlined />}
-                  valueStyle={{ color: readmeAnalysis.grammarError > 0 ? '#f5222d' : '#52c41a' }}
-                />
-              </StatCard>
-            </Col>
-
-            <Col xs={24} md={8}>
-              <StatCard>
-                <div>
-                  <Text strong>LLM Interpretation Score: </Text>
-                  <Text>{(readmeAnalysis.llmInterpretationScore*10).toFixed(1)}%</Text>
-                  <Tooltip title="How well AI can understand your README">
-                    <MetricProgress 
-                      percent={readmeAnalysis.llmInterpretationScore*10} 
-                      size="small" 
-                      strokeColor={readmeAnalysis.llmInterpretationScore >= 70 ? '#52c41a' : '#faad14'} 
-                      showInfo={false}
-                    />
-                  </Tooltip>
-                </div>
-                <div>
-                  <Text strong>Flesch Reading Ease: </Text>
-                  <Text>{(readmeAnalysis.textStatistics.fleschReadingEase||0).toFixed(1)}%</Text>
-                  <Tooltip title="Higher score indicates easier reading (90-100: Very Easy, 0-30: Very Difficult)">
-                    <MetricProgress 
-                      percent={readmeAnalysis.textStatistics.fleschReadingEase||0} 
-                      size="small" 
-                      strokeColor={(readmeAnalysis.textStatistics.fleschReadingEase || 0) >= 70 ? '#52c41a' : '#faad14'} 
-                      showInfo={false}
-                    />
-                  </Tooltip>
+            <Col span={6}>
+              <div style={{ 
+                padding: '8px 12px', 
+                background: '#f8fafc', 
+                borderRadius: '8px',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                height: '100%',
+                justifyContent: 'center',
+                border: '1px solid #e2e8f0'
+              }}>
+                <div style={{ fontSize: '12px', color: '#64748b', marginBottom: '2px' }}>LLM Score</div>
+                <div style={{ 
+                  fontSize: '18px', 
+                  fontWeight: 'bold', 
+                  color: getScoreColor((readmeAnalysis.llmInterpretation?.score || 0) * 10, 70, 50)
+                }}>
+                  {((readmeAnalysis.llmInterpretation?.score || 0) * 10).toFixed(1)}/10
                 </div>
-                <div>
-                  <Text strong>Flesch-Kincaid Grade: </Text>
-                  <Text>{(readmeAnalysis.textStatistics.fleschKincaidGrade||0).toFixed(1)}%</Text>
-                  <Tooltip title="Estimated US grade level needed to understand the text">
-                    <MetricProgress 
-                      percent={readmeAnalysis.textStatistics.fleschKincaidGrade||0} 
-                      size="small" 
-                      strokeColor={(readmeAnalysis.textStatistics.fleschKincaidGrade || 0) >= 70 ? '#52c41a' : '#faad14'} 
-                      showInfo={false}
-                    />
-                  </Tooltip>
-                </div>
-                <div>
-                  <Text strong>SMOG Index: </Text>
-                  <Text>{(readmeAnalysis.textStatistics.smogIndex||0).toFixed(1)}%</Text>
-                  <Tooltip title="Years of education needed to understand the text">
-                    <MetricProgress 
-                      percent={readmeAnalysis.textStatistics.smogIndex||0} 
-                      size="small" 
-                      strokeColor={(readmeAnalysis.textStatistics.smogIndex || 0) >= 70 ? '#52c41a' : '#faad14'} 
-                      showInfo={false}
-                    />
-                  </Tooltip>
-                </div>
-              </StatCard>
+              </div>
             </Col>
-            <Col span={24}>
-              <StyledCard title="Recommendations">
-                <Row gutter={[16, 16]}>
-                  <Col span={24}>
-                    {qualityScore < 70 && (
-                      <Alert
-                        message="Improve Readability"
-                        description="Consider simplifying language and shortening sentences to improve readability scores."
-                        type="info"
-                        showIcon
-                        icon={<BookOutlined />}
-                        style={{ marginBottom: 8 }}
-                      />
+          </Row>
+
+          {/* Dashboard Layout */}
+          <Row gutter={[12, 0]} style={{ marginTop: 8 }}>
+            {/* Left Column */}
+            <Col xs={24} md={12}>
+              {/* Key Metrics */}
+              <StyledCard title="Document Metrics" bodyStyle={{ padding: '8px' }}>
+                <MetricGrid>
+                  <MetricGridItem>
+                    <div className="metric-label">Word Count</div>
+                    <div className="metric-value">
+                      <FileTextOutlined style={{ fontSize: '12px' }} />
+                      {readmeAnalysis.textStatistics?.wordCount || 0}
+                    </div>
+                  </MetricGridItem>
+                  
+                  <MetricGridItem>
+                    <div className="metric-label">Lines</div>
+                    <div className="metric-value">
+                      {textStats.lines || 0}
+                    </div>
+                  </MetricGridItem>
+                  
+                  <MetricGridItem>
+                    <div className="metric-label">Reading Time</div>
+                    <div className="metric-value">
+                      <ClockCircleOutlined style={{ fontSize: '12px' }} />
+                      {Math.round(textStats.readingTime || 0)}s
+                    </div>
+                  </MetricGridItem>
+                  
+                  <MetricGridItem>
+                    <div className="metric-label">Flesch Reading Ease</div>
+                    <div className="metric-value" style={{ 
+                      color: getScoreColor(textStats.fleschReadingEase || 0, 70, 50)
+                    }}>
+                      {Math.round(textStats.fleschReadingEase || 0)}
+                    </div>
+                  </MetricGridItem>
+                  
+                  <MetricGridItem>
+                    <div className="metric-label">Flesch Grade Level</div>
+                    <div className="metric-value" style={{ 
+                      color: getScoreColor(textStats.fleschKincaidGrade || 0, 12, 8, true)
+                    }}>
+                      {Math.round(textStats.fleschKincaidGrade || 0)}
+                    </div>
+                  </MetricGridItem>
+                  
+                  <MetricGridItem>
+                    <div className="metric-label">Issues</div>
+                    <div className="metric-value" style={{ 
+                      color: (readmeAnalysis.brokenLinks.length > 0 || readmeAnalysis.grammarError > 0) 
+                        ? '#f5222d' 
+                        : '#52c41a'
+                    }}>
+                      {readmeAnalysis.brokenLinks.length + readmeAnalysis.grammarError}
+                    </div>
+                  </MetricGridItem>
+                </MetricGrid>
+              </StyledCard>
+              
+          
+              
+              {/* Content Issues */}
+              {(readmeAnalysis.brokenLinks.length > 0 || readmeAnalysis.grammarError > 0) && (
+                <StyledCard 
+                  title="Content Issues"
+                  bodyStyle={{ padding: '8px' }}
+                >
+                  <div style={{ padding: '0 2px' }}>
+                    {readmeAnalysis.brokenLinks.length > 0 && (
+                      <MetricRow>
+                        <MetricLabel>
+                          <LinkOutlined style={{ marginRight: 5, color: '#f5222d' }} />
+                          Broken Links
+                        </MetricLabel>
+                        <MetricValue style={{ color: '#f5222d' }}>
+                          {readmeAnalysis.brokenLinks.length}
+                        </MetricValue>
+                      </MetricRow>
                     )}
                     
-                    {readmeAnalysis.brokenLinks > 0 && (
-                      <Alert
+                    {readmeAnalysis.grammarError > 0 && (
+                      <MetricRow>
+                        <MetricLabel>
+                          <WarningOutlined style={{ marginRight: 5, color: '#f5222d' }} />
+                          Grammar Issues
+                        </MetricLabel>
+                        <MetricValue style={{ color: '#f5222d' }}>
+                          {readmeAnalysis.grammarError}
+                        </MetricValue>
+                      </MetricRow>
+                    )}
+                  </div>
+                </StyledCard>
+              )}
+            </Col>
+            
+            {/* Right Column */}
+            <Col xs={24} md={12}>
+              <StyledCard 
+                title={
+                  <span>
+                    AI Assessment
+                    <Tooltip title="AI-powered suggestions to improve your README quality">
+                      <InfoCircleOutlined style={{ marginLeft: 6, color: '#94a3b8', cursor: 'help' }} />
+                    </Tooltip>
+                  </span>
+                }
+                style={{ height: '100%' }}
+              >
+                {qualityScore >= 80 ? (
+                  <QualityAlert
+                    message="Excellent README! 🎉"
+                    description="Your README is well-structured and comprehensive. Keep maintaining this quality!"
+                    type="success"
+                    showIcon
+                    icon={<CheckCircleOutlined />}
+                  />
+                ) : (
+                  <div>
+                    {readmeAnalysis.brokenLinks.length > 0 && (
+                      <QualityAlert
                         message="Fix Broken Links"
-                        description={`Your README contains ${readmeAnalysis.brokenLinks} broken links that should be fixed or removed.`}
+                        description={`${readmeAnalysis.brokenLinks.length} broken link${readmeAnalysis.brokenLinks.length > 1 ? 's' : ''} found. Update or remove them to improve reliability.`}
                         type="warning"
                         showIcon
                         icon={<LinkOutlined />}
-                        style={{ marginBottom: 8 }}
                       />
                     )}
                     
                     {readmeAnalysis.grammarError > 0 && (
-                      <Alert
-                        message="Fix Grammar Issues"
-                        description={`There are ${readmeAnalysis.grammarError} grammar issues in your README that may affect readability.`}
+                      <QualityAlert
+                        message="Grammar Issues"
+                        description={`${readmeAnalysis.grammarError} grammar issue${readmeAnalysis.grammarError > 1 ? 's' : ''} detected. Consider proofreading for better readability.`}
                         type="warning"
                         showIcon
                         icon={<WarningOutlined />}
-                        style={{ marginBottom: 8 }}
                       />
                     )}
                     
-                    {readmeAnalysis.wordCount < 300 && (
-                      <Alert
-                        message="Add More Content"
-                        description="Your README is quite short. Consider adding more details about installation, usage examples, and project features."
+                    {(readmeAnalysis.llmInterpretation?.score || 0) < 5 && (
+                      <QualityAlert
+                        message="Improve Content Quality"
+                        description="Your README does not meet the minimum quality standards."
                         type="info"
                         showIcon
-                        style={{ marginBottom: 8 }}
                       />
                     )}
                     
-                    {readmeAnalysis.llmInterpretationScore < 70 && (
-                      <Alert
-                        message="Improve Clarity"
-                        description="The README structure could be improved for better interpretation by both humans and AI tools."
+                    {(readmeAnalysis.textStatistics?.wordCount || 0) < 300 && (
+                      <QualityAlert
+                        message="Add More Content"
+                        description="Your README could benefit from more details about installation, usage, and features."
                         type="info"
                         showIcon
-                        style={{ marginBottom: 8 }}
                       />
                     )}
                     
-                    {qualityScore >= 80 && (
-                      <Alert
-                        message="Excellent README"
-                        description="Your README is well-structured and comprehensive. Keep maintaining this quality!"
-                        type="success"
+                    {(readmeAnalysis.llmInterpretation?.score || 0) < 7 && (
+                      <QualityAlert
+                        message="Improve Structure"
+                        description="Add better headings and organization to make your README clearer for humans and AI tools."
+                        type="info"
                         showIcon
-                        icon={<CheckCircleOutlined />}
                       />
                     )}
-                  </Col>
-                </Row>
+                  </div>
+                )}
+
+                {/* LLM Interpretation Section */}
+                {readmeAnalysis.llmInterpretation && (
+                  <div style={{ marginTop: 12 }}>
+                  
+                    
+                    {readmeAnalysis.llmInterpretation.overallEvaluation.length > 0 && (
+                      <div style={{ marginBottom: 8 }}>
+                        <ul style={{ fontSize: 13, margin: 0, paddingLeft: 16 }}>
+                          {readmeAnalysis.llmInterpretation.overallEvaluation.map((strength, i) => (
+                            <li key={i} style={{ marginBottom: 2 }}>{strength}</li>
+                          ))}
+                        </ul>
+                      </div>
+                    )}
+                  </div>
+                )}
               </StyledCard>
             </Col>
           </Row>
         </TabPane>
-        <TabPane tab="Suggested Improvements" key="2">
-          {readmeSuggestion ? (
+        
+        <TabPane tab="Suggestions" key="2">
+          {readmeAnalysis.llmInterpretation ? (
             <div>
-              <Alert 
-                message="README Suggestion" 
-                description="Here's an improved version of your README with enhanced structure and clarity."
+              <QualityAlert 
+                message="README Improvement Suggestions" 
+                description=""
                 type="info" 
                 showIcon
-                style={{ marginBottom: 16 }}
+                style={{ marginBottom: 12 }}
               />
-              <MarkdownRenderer markdown={readmeSuggestion} />
+              
+              {readmeAnalysis.llmInterpretation.overall_evaluation && (
+                <StyledCard 
+                  title="Overall Evaluation"
+                  bodyStyle={{ padding: '12px' }}
+                  style={{ marginBottom: '16px' }}
+                >
+                  <div style={{ 
+                    fontFamily: "'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+                    fontSize: '14px',
+                    lineHeight: '1.5',
+                    color: '#334155'
+                  }}>
+                    {readmeAnalysis.llmInterpretation.overall_evaluation}
+                  </div>
+                </StyledCard>
+              )}
+              
+              <Row gutter={[16, 16]}>
+                {readmeAnalysis.llmInterpretation.strengths && readmeAnalysis.llmInterpretation.strengths.length > 0 && (
+                  <Col xs={24} md={12}>
+                    <StyledCard 
+                      title={
+                        <span style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#16a34a' }}>
+                          <CheckCircleOutlined />
+                          Strengths
+                        </span>
+                      }
+                      bodyStyle={{ padding: '12px' }}
+                      style={{ height: '100%', borderTop: '3px solid #16a34a' }}
+                    >
+                      <ul style={{ 
+                        padding: '0 0 0 16px',
+                        margin: '0',
+                        fontFamily: "'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"
+                      }}>
+                        {Array.isArray(readmeAnalysis.llmInterpretation.strengths) ? 
+                          readmeAnalysis.llmInterpretation.strengths.map((strength, i) => (
+                            <li key={i} style={{ 
+                              marginBottom: '8px',
+                              fontSize: '14px',
+                              lineHeight: '1.5',
+                              color: '#334155'
+                            }}>
+                              {strength}
+                            </li>
+                          )) : 
+                          <li style={{ 
+                            marginBottom: '8px',
+                            fontSize: '14px',
+                            lineHeight: '1.5',
+                            color: '#334155'
+                          }}>
+                            {readmeAnalysis.llmInterpretation.strengths}
+                          </li>
+                        }
+                      </ul>
+                    </StyledCard>
+                  </Col>
+                )}
+                
+                {readmeAnalysis.llmInterpretation.weaknesses && readmeAnalysis.llmInterpretation.weaknesses.length > 0 && (
+                  <Col xs={24} md={12}>
+                    <StyledCard 
+                      title={
+                        <span style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#dc2626' }}>
+                          <WarningOutlined />
+                          Areas to Improve
+                        </span>
+                      }
+                      bodyStyle={{ padding: '12px' }}
+                      style={{ height: '100%', borderTop: '3px solid #dc2626' }}
+                    >
+                      <ul style={{ 
+                        padding: '0 0 0 16px',
+                        margin: '0',
+                        fontFamily: "'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"
+                      }}>
+                        {Array.isArray(readmeAnalysis.llmInterpretation.weaknesses) ?
+                          readmeAnalysis.llmInterpretation.weaknesses.map((weakness, i) => (
+                            <li key={i} style={{ 
+                              marginBottom: '8px',
+                              fontSize: '14px',
+                              lineHeight: '1.5',
+                              color: '#334155'
+                            }}>
+                              {weakness}
+                            </li>
+                          )) : 
+                          <li style={{ 
+                            marginBottom: '8px',
+                            fontSize: '14px',
+                            lineHeight: '1.5',
+                            color: '#334155'
+                          }}>
+                            {readmeAnalysis.llmInterpretation.weaknesses}
+                          </li>
+                        }
+                      </ul>
+                    </StyledCard>
+                  </Col>
+                )}
+              </Row>
+              
+              {readmeAnalysis.llmInterpretation.recommendations && (
+                <StyledCard 
+                  title={
+                    <span style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#0369a1' }}>
+                      <InfoCircleOutlined />
+                      Detailed Recommendations
+                    </span>
+                  }
+                  bodyStyle={{ padding: '16px' }}
+                  style={{ marginTop: '16px', borderTop: '3px solid #0369a1' }}
+                >
+                  <div style={{ 
+                    padding: '0',
+                    margin: '0',
+                    fontFamily: "'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"
+                  }}>
+                    {Array.isArray(readmeAnalysis.llmInterpretation.recommendations) ? (
+                      <ul style={{ 
+                        padding: '0 0 0 16px',
+                        margin: '0'
+                      }}>
+                        {readmeAnalysis.llmInterpretation.recommendations.map((recommendation, i) => (
+                          <li key={i} style={{ 
+                            marginBottom: '12px',
+                            fontSize: '14px',
+                            lineHeight: '1.5',
+                            color: '#334155'
+                          }}>
+                            {recommendation}
+                          </li>
+                        ))}
+                      </ul>
+                    ) : (
+                      <div style={{ 
+                        fontSize: '14px',
+                        lineHeight: '1.5',
+                        color: '#334155'
+                      }}>
+                        {readmeAnalysis.llmInterpretation.recommendations}
+                      </div>
+                    )}
+                  </div>
+                </StyledCard>
+              )}
             </div>
           ) : (
-            <Alert
+            <QualityAlert
               message="No Suggestions Available"
-              description="No README improvement suggestions are available. Try running the analysis again."
+              description="Run the analysis to get AI-powered improvement suggestions for your README."
               type="warning"
               showIcon
             />
           )}
         </TabPane>
-      </Tabs>
-    </Modal>
+      </TabsContainer>
+    </EnterpriseModal>
   );
 };
 
diff --git a/src/components/dashboard/DashboardHeader/RepoMetricsCards.tsx b/src/components/dashboard/DashboardHeader/RepoMetricsCards.tsx
index 4d442442..eea2076b 100644
--- a/src/components/dashboard/DashboardHeader/RepoMetricsCards.tsx
+++ b/src/components/dashboard/DashboardHeader/RepoMetricsCards.tsx
@@ -1,16 +1,14 @@
-import React, { useEffect, useState } from 'react';
-import { Row, Col, Typography, Tooltip, Progress, Button } from 'antd';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Row, Col, Typography, Tooltip, Progress } from 'antd';
 import { 
   FileOutlined, 
   WarningOutlined, 
   BookOutlined, 
-  ScanOutlined,
   LoadingOutlined,
-  ReloadOutlined,
   CodeOutlined
 } from '@ant-design/icons';
-import { AnalysisReport, BasicFunctionDocAnalysis, GitAppUsageType, FunctionDetail } from '@app/api/git.api';
-import { triggerAnalysisRepo, getAdvancedRepoAnalysisDetails, getAnalysisRepoStatus, terminateJob } from '@app/api/docgen.api';
+import { AnalysisReport, BasicFunctionDocAnalysis, GitAppUsageType, FunctionDetail, getGitApp } from '@app/api/git.api';
+import { triggerDocGen, getAdvancedRepoAnalysisDetails, getDocGenStatus, terminateJob } from '@app/api/docgen.api';
 import DocumentationMetricsModal from './DocumentationMetricsModal';
 import { checkAzurePAT } from '@app/api/azure.api';
 import AzurePATModal from '../AzurePATModal/AzurePATModal';
@@ -23,7 +21,6 @@ import {
   MetricCard,
   NoAnalysisContent,
   IconWrapper,
-  RefreshButton,
   MetricValue,
   MetricLabel,
   AnalysisPlaceholder,
@@ -38,13 +35,6 @@ const { Text } = Typography;
 
 interface RepoMetricsCardsProps {
   repoDetails: GitAppUsageType;
-  documentationStats: {
-    totalFunctions: number;
-    documentedFunctions: number;
-    outdatedDocs: number;
-    readmeScore: number;
-    codeCoverage: number;
-  };
   onRunFullAnalysis?: (func: () => void) => void; // Change to pass the function instead
 }
 
@@ -53,9 +43,7 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
   const [hasAdvancedRepoAnalysis, setHasAdvancedRepoAnalysis] = useState(false);
   const [hasReadMeAnalysis, setHasReadmeAnalysis] = useState(false);
 
-  const [isRepoAnalyzing, setIsRepoAnalyzing] = useState(false);
-  const [isAdvancedRepoAnalyzing, setIsAdvancedRepoAnalyzing] = useState(false);
-  const [isReadMeAnalyzing, setIsReadMeAnalyzing] = useState(false);
+  const [isDocQualityAnalyzing, setIsDocQualityAnalyzing] = useState(false);
   const [progress, setProgress] = useState(0);
   
   // State for documentation metrics modal
@@ -68,7 +56,6 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
   const [isReadmeModalVisible, setIsReadmeModalVisible] = useState(false);
   
   const [functionDetails, setFunctionDetails] = useState<FunctionDetail[]>([]);
-  const [readMeDetails, setReadMeDetails] = useState<string>("");
   const [loadingFunctionDetails, setLoadingFunctionDetails] = useState(false);
   
   // State for terminal logs modal
@@ -78,11 +65,7 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
 
   // Azure PAT modal state
   const [azurePATModalVisible, setAzurePATModalVisible] = useState(false);
-  const [pendingAnalysis, setPendingAnalysis] = useState<{
-    setIsAnalyzing: React.Dispatch<React.SetStateAction<boolean>>;
-    hasReportAnalysis: React.Dispatch<React.SetStateAction<boolean>>;
-    analysisType?: string;
-  } | null>(null);
+  const [resumeAfterPat, setResumeAfterPat] = useState(false);
 
   // Use state for metrics instead of variables
   const [totalFunctions, setTotalFunctions] = useState(-1);
@@ -93,6 +76,7 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
   const [codeCoverage, setCodeCoverage] = useState(-1);
   const { repoName, organizationName: orgName } = repoDetails;
   const [lroJobId, setLroJobId] = useState('');
+  const completionHandledRef = useRef(false);
 
   // Basic function doc analysis from repo details
   const [basicFuncDocAnalysis, setBasicFuncDocAnalysis] = useState<BasicFunctionDocAnalysis | undefined>(undefined);
@@ -101,7 +85,7 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
   const [programmingLanguages, setProgrammingLanguages] = useState<Record<string, number>>({});
 
   // Add a message to the terminal
-  const addTerminalMessage = (content: string, type: MessageType = MessageType.INFO) => {
+  const addTerminalMessage = useCallback((content: string, type: MessageType = MessageType.INFO) => {
     const newMessage: TerminalMessage = {
       content,
       type,
@@ -110,12 +94,12 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
     };
     
     setTerminalMessages(prev => [...prev, newMessage]);
-  };
+  }, []);
 
   // Clear terminal messages
-  const clearTerminalMessages = () => {
+  const clearTerminalMessages = useCallback(() => {
     setTerminalMessages([]);
-  };
+  }, []);
 
   // Function to update metrics from analysis report
   const updateMetricsFromReport = (report: AnalysisReport) => {
@@ -135,6 +119,7 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
       
       
       if(report.readmeAnalysis) {
+        console.log('Readme analysis found:', report.readmeAnalysis);
         setReadmeScore(report.readmeAnalysis.calculatedQualityScore);
       }
       
@@ -146,11 +131,14 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
   };
 
   useEffect(() => {
-    if (repoDetails?.gitAppMetaData?.analysisReport) {
-      const report = repoDetails.gitAppMetaData.analysisReport;
+    console.log('RepoMetricsCards mounted with repoDetails:', repoDetails.organizationName);
+    if (repoDetails?.gitAppAdvancedMeta?.analysisReport) {
+      console.log('Basic function doc analysis found11111:');
+      const report = repoDetails.gitAppAdvancedMeta.analysisReport;
       updateMetricsFromReport(report);
       
       if (report.basicFuncDocAnalysis?.totalFunctions > 0) {
+        console.log('Basic function doc analysis found:', report.basicFuncDocAnalysis);
         setHasRepoAnalysis(true);
       }
       
@@ -165,69 +153,83 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
     }
   }, [repoDetails]);
 
+  useEffect(() => {
+    completionHandledRef.current = false;
+  }, [lroJobId]);
+
   const documentationPercentage = Math.round((documentedFunctions / totalFunctions) * 100) || 0;
   
-  const runAnalysis = async (setIsAnalyzing: React.Dispatch<React.SetStateAction<boolean>>, hasReportAnalysis: React.Dispatch<React.SetStateAction<boolean>>, analysisType?: string) => {
-    setIsAnalyzing(true);
-    hasReportAnalysis(false);
-    const orgName = repoDetails?.organizationName;
-    const repoName = repoDetails?.repoName;
-    const vendor = repoDetails?.vendor;
-    
-    // Set current analysis type and show terminal
-    setCurrentAnalysisType(analysisType || "coverage");
+  const runDocQualityAnalysis = useCallback(async () => {
+    if (!repoDetails?.organizationName || !repoDetails?.repoName) return;
+    if (isDocQualityAnalyzing) {
+      setIsTerminalVisible(true);
+      return;
+    }
+
+    setIsDocQualityAnalyzing(true);
+    setProgress(0);
+    setLroJobId('');
+
+    setCurrentAnalysisType('docQuality');
     setIsTerminalVisible(true);
     clearTerminalMessages();
-    
-    // Add initial messages
-    addTerminalMessage(`Starting ${analysisType || "coverage"} analysis for ${orgName}/${repoName}`, MessageType.SYSTEM);
-    addTerminalMessage(`Repository: ${orgName}/${repoName}`, MessageType.INFO);
-    addTerminalMessage(`Analysis Type: ${analysisType || "coverage"}`, MessageType.INFO);
+
+    addTerminalMessage(
+      `Starting doc-quality analysis for ${repoDetails.organizationName}/${repoDetails.repoName}`,
+      MessageType.SYSTEM,
+    );
+    addTerminalMessage(
+      `Repository: ${repoDetails.organizationName}/${repoDetails.repoName}`,
+      MessageType.INFO,
+    );
+    addTerminalMessage(`Analysis Type: docQuality`, MessageType.INFO);
 
     try {
-      // Check if this is an Azure DevOps repository
-      if (vendor === 'AZURE') {
+      if (repoDetails.vendor === 'AZUREDEVOPS') {
         addTerminalMessage(`Checking Azure DevOps credentials...`, MessageType.INFO);
-        
         try {
-          // Check if the Azure DevOps PAT is valid
-          const patResponse = await checkAzurePAT();
-          
+          const patResponse = await checkAzurePAT(repoDetails.organizationName);
           if (!patResponse.isValid) {
-            // Store the current analysis request for resuming after PAT is provided
-            setPendingAnalysis({
-              setIsAnalyzing,
-              hasReportAnalysis,
-              analysisType
-            });
-            
-            // Show PAT input modal
+            setIsDocQualityAnalyzing(false);
+            setResumeAfterPat(true);
             setAzurePATModalVisible(true);
-            
-            addTerminalMessage(`Azure DevOps Personal Access Token required`, MessageType.WARNING);
+            addTerminalMessage(
+              `Azure DevOps Personal Access Token required`,
+              MessageType.WARNING,
+            );
             return;
           }
-          
           addTerminalMessage(`Azure DevOps credentials validated`, MessageType.SUCCESS);
         } catch (patError) {
           console.error('Error checking Azure PAT:', patError);
-          addTerminalMessage(`Error checking Azure credentials: ${patError}`, MessageType.ERROR);
-          setIsAnalyzing(false);
+          addTerminalMessage(
+            `Error checking Azure credentials: ${patError}`,
+            MessageType.ERROR,
+          );
+          setIsDocQualityAnalyzing(false);
           return;
         }
       }
-      
+
       addTerminalMessage(`Triggering analysis...`, MessageType.INFO);
-      const response = await triggerAnalysisRepo(orgName, repoName, vendor, analysisType);
+      const response = await triggerDocGen(
+        repoDetails.organizationName,
+        repoDetails.repoName,
+        repoDetails.vendor,
+        'docQuality',
+      );
       setLroJobId(response.lroJobId);
       addTerminalMessage(`Analysis triggered successfully`, MessageType.SUCCESS);
     } catch (error) {
       console.error('Error triggering analysis:', error);
-      setIsAnalyzing(false);
+      setIsDocQualityAnalyzing(false);
       addTerminalMessage(`Error triggering analysis: ${error}`, MessageType.ERROR);
-      return;
     }
-  };
+  }, [addTerminalMessage, clearTerminalMessages, isDocQualityAnalyzing, repoDetails]);
+
+  useEffect(() => {
+    onRunFullAnalysis?.(runDocQualityAnalysis);
+  }, [onRunFullAnalysis, runDocQualityAnalysis]);
 
   // Function to fetch function details for the outdated docs modal
   const fetchFunctionDetails = async () => {
@@ -258,48 +260,16 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
     }
   };
 
-  const fetchReadMeDetails = async () => {
-    if (!repoDetails?.organizationName || !repoDetails?.repoName || !repoDetails?.installationId) {
-      console.error('Missing repository information');
-      return;
-    }
-    try {
-      setLoadingFunctionDetails(true);
-      addTerminalMessage(`Fetching README details for ${repoDetails.organizationName}/${repoDetails.repoName}`, MessageType.INFO);
-      let details = await getAdvancedRepoAnalysisDetails(
-        repoDetails.organizationName,
-        repoDetails.repoName,
-        repoDetails.vendor,
-        'readme'
-      );
-      details = details as Record<string, string>;
-      if(details && details["content"]) {
-        setReadMeDetails(details["content"]);
-      }
-      // Add handling for suggestion
-      if(details && details["suggestion"]) {
-        setReadmeSuggestion(details["suggestion"]);
-        addTerminalMessage(`Successfully retrieved README suggestion`, MessageType.SUCCESS);
-      }
-      addTerminalMessage(`Successfully retrieved README details`, MessageType.SUCCESS);
-    } catch (error) {
-      console.error('Error fetching README details:', error);
-      addTerminalMessage(`Error fetching README details: ${error}`, MessageType.ERROR);
-    } finally {
-      setLoadingFunctionDetails(false);
-    }
-  };
-
   // Handler to open the documentation metrics modal
   const handleDocMetricsClick = () => {
-    if (hasRepoAnalysis && !isRepoAnalyzing) {
+    if (hasRepoAnalysis && !isDocQualityAnalyzing) {
       setIsDocMetricsModalVisible(true);
     }
   };
 
   // Handler to open the outdated docs modal
   const handleOutdatedDocsClick = () => {
-    if (hasAdvancedRepoAnalysis && !isAdvancedRepoAnalyzing) {
+    if (hasAdvancedRepoAnalysis && !isDocQualityAnalyzing) {
       setIsOutdatedDocsModalVisible(true);
       fetchFunctionDetails();
     }
@@ -307,9 +277,8 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
   
   // Handler to open the README analysis modal
   const handleReadmeAnalysisClick = () => {
-    if (hasReadMeAnalysis && !isReadMeAnalyzing) {
+    if (hasReadMeAnalysis && !isDocQualityAnalyzing) {
       setIsReadmeModalVisible(true);
-      fetchReadMeDetails();
     }
   };
 
@@ -328,76 +297,61 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
   };
 
   // Add a handler function for status updates from the terminal
-  const handleStatusUpdate = (percentage: number, response?: AnalysisReport ) => {
+  const handleStatusUpdate = (percentage: number, response?: AnalysisReport) => {
     setProgress(percentage);
-    if (response) {
-      // Create a clone of the current repoDetails to avoid direct mutation
-      const updatedRepoDetails = { ...repoDetails };
-      
-      // Update the analysis report with the new data
-      const newAnalysisReport = response;
-      
-      if(!updatedRepoDetails.gitAppMetaData) {
-        updatedRepoDetails.gitAppMetaData = {
-          siteUrl: '',
-          analysisReport: {} as AnalysisReport
-        };
-      }
-      updatedRepoDetails.gitAppMetaData.analysisReport = newAnalysisReport;
-      
-      // Update the local metrics based on the new report
-      updateMetricsFromReport(newAnalysisReport);
-      
-      // Update progress state
-      
-      
-      
-      // Set analysis flags based on the updated report
-      if (newAnalysisReport.basicFuncDocAnalysis?.totalFunctions > 0) {
-        setHasRepoAnalysis(true);
-        setIsRepoAnalyzing(false);
-      }
-      
-      if (newAnalysisReport.advancedFuncDocAnalysis) {
-        setHasAdvancedRepoAnalysis(true);
-        setIsAdvancedRepoAnalyzing(false);
-      }
-      
-      if (newAnalysisReport.readmeAnalysis && newAnalysisReport.readmeAnalysis.calculatedQualityScore >= 0) {
-        setHasReadmeAnalysis(true);
-        setIsReadMeAnalyzing(false);
+    if (percentage >= 100 && !completionHandledRef.current) {
+      completionHandledRef.current = true;
+      setIsDocQualityAnalyzing(false);
+
+      if (!response) {
+        void (async () => {
+          try {
+            const gitData = await getGitApp(orgName, repoName, repoDetails.vendor);
+            const latestReport = gitData?.gitAppAdvancedMeta?.analysisReport;
+            if (latestReport) {
+              updateMetricsFromReport(latestReport);
+              setHasRepoAnalysis(!!latestReport.basicFuncDocAnalysis?.totalFunctions);
+              setHasAdvancedRepoAnalysis(!!latestReport.advancedFuncDocAnalysis);
+              setHasReadmeAnalysis(
+                !!latestReport.readmeAnalysis &&
+                  latestReport.readmeAnalysis.calculatedQualityScore >= 0,
+              );
+            }
+          } catch (error) {
+            console.error('Error fetching analysis report:', error);
+          }
+        })();
       }
-    
+    }
+
+    if (response) {
+      updateMetricsFromReport(response);
+      setHasRepoAnalysis(!!response.basicFuncDocAnalysis?.totalFunctions);
+      setHasAdvancedRepoAnalysis(!!response.advancedFuncDocAnalysis);
+      setHasReadmeAnalysis(!!response.readmeAnalysis && response.readmeAnalysis.calculatedQualityScore >= 0);
+      if (percentage >= 100) setIsDocQualityAnalyzing(false);
     }
   };
 
   // Handle PAT modal submission success
   const handlePATSubmitSuccess = () => {
     setAzurePATModalVisible(false);
-    
-    // Resume the pending analysis if there is one
-    if (pendingAnalysis) {
-      runAnalysis(
-        pendingAnalysis.setIsAnalyzing,
-        pendingAnalysis.hasReportAnalysis,
-        pendingAnalysis.analysisType
-      );
-      
-      // Clear the pending analysis
-      setPendingAnalysis(null);
+    if (resumeAfterPat) {
+      setResumeAfterPat(false);
+      void runDocQualityAnalysis();
     }
   };
   
   // Handle PAT modal cancellation
   const handlePATModalCancel = () => {
     setAzurePATModalVisible(false);
-    
-    // If there was a pending analysis, mark it as not analyzing anymore
-    if (pendingAnalysis) {
-      pendingAnalysis.setIsAnalyzing(false);
-      setPendingAnalysis(null);
-      
-      addTerminalMessage(`Analysis cancelled: Azure DevOps credentials required`, MessageType.ERROR);
+    if (resumeAfterPat) {
+      setResumeAfterPat(false);
+      setIsDocQualityAnalyzing(false);
+      addTerminalMessage(
+        `Analysis cancelled: Azure DevOps credentials required`,
+        MessageType.ERROR,
+      );
     }
   };
 
@@ -407,42 +361,19 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
         <Col xs={24} sm={12} md={8} lg={6}>
           <MetricCard 
             onClick={handleDocMetricsClick}
-            style={{ cursor: hasRepoAnalysis && !isRepoAnalyzing ? 'pointer' : 'default' }}
+            style={{ cursor: hasRepoAnalysis && !isDocQualityAnalyzing ? 'pointer' : 'default' }}
           >
-            {hasRepoAnalysis && !isRepoAnalyzing && (
-              <RefreshButton 
-                type="text" 
-                size="small" 
-                icon={<ReloadOutlined />} 
-                onClick={(e) => { 
-                  e.stopPropagation(); 
-                  runAnalysis(setIsRepoAnalyzing, setHasRepoAnalysis, "basicDoc");
-                }}
-              />
-            )}
-            
-            {!hasRepoAnalysis && !isRepoAnalyzing ? (
+            {isDocQualityAnalyzing ? (
+              <NoAnalysisContent>
+                <LoadingOutlined style={{ fontSize: 24, color: '#1890ff', marginBottom: 16 }} spin />
+                <Text>Analyzing doc quality: {progress}%</Text>
+              </NoAnalysisContent>
+            ) : !hasRepoAnalysis ? (
               <NoAnalysisContent>
                 <IconWrapper style={{ color: '#d9d9d9', justifyContent: 'center' }}>
                   <FileOutlined />
                 </IconWrapper>
-                <AnalysisPlaceholder>No Repository Analysis Data</AnalysisPlaceholder>
-                <Button 
-                  type="primary" 
-                  size="small"
-                  icon={<ScanOutlined />} 
-                  onClick={(e) => { 
-                    e.stopPropagation(); // Prevent card click handler
-                    runAnalysis(setIsRepoAnalyzing, setHasRepoAnalysis, "basicDoc");
-                  }}
-                >
-                  Analyze Repository
-                </Button>
-              </NoAnalysisContent>
-            ) : isRepoAnalyzing ? (
-              <NoAnalysisContent>
-                <LoadingOutlined style={{ fontSize: 24, color: '#1890ff', marginBottom: 16 }} spin />
-                <Text>Analyzing files: {progress}%</Text>
+                <AnalysisPlaceholder>Run Doc Quality analysis to see metrics</AnalysisPlaceholder>
               </NoAnalysisContent>
             ) : (
               <>
@@ -461,37 +392,17 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
 
         <Col xs={24} sm={12} md={8} lg={6}>
           <MetricCard>
-            {hasRepoAnalysis && !isRepoAnalyzing && (
-              <RefreshButton 
-                type="text" 
-                size="small" 
-                icon={<ReloadOutlined />} 
-                onClick={(e) => { 
-                  e.stopPropagation(); 
-                  runAnalysis(setIsRepoAnalyzing, setHasRepoAnalysis, undefined);
-                }}
-              />
-            )}
-            
-            {(!hasRepoAnalysis && !isRepoAnalyzing) || Object.keys(programmingLanguages).length === 0 ? (
+            {isDocQualityAnalyzing ? (
+              <NoAnalysisContent>
+                <LoadingOutlined style={{ fontSize: 24, color: '#722ed1', marginBottom: 16 }} spin />
+                <Text>Analyzing doc quality: {progress}%</Text>
+              </NoAnalysisContent>
+            ) : Object.keys(programmingLanguages).length === 0 ? (
               <NoAnalysisContent>
                 <IconWrapper style={{ color: '#d9d9d9', justifyContent: 'center' }}>
                   <CodeOutlined />
                 </IconWrapper>
-                <AnalysisPlaceholder>Languages not analyzed</AnalysisPlaceholder>
-                <Button 
-                  type="primary" 
-                  size="small"
-                  icon={<ScanOutlined />} 
-                  onClick={() =>{ runAnalysis(setIsRepoAnalyzing, setHasRepoAnalysis, 'basicDoc')}}
-                >
-                  Analyze Languages
-                </Button>
-              </NoAnalysisContent>
-            ) : isRepoAnalyzing ? (
-              <NoAnalysisContent>
-                <LoadingOutlined style={{ fontSize: 24, color: '#722ed1', marginBottom: 16 }} spin />
-                <Text>Analyzing repository: {progress}%</Text>
+                <AnalysisPlaceholder>Run Doc Quality analysis to detect languages</AnalysisPlaceholder>
               </NoAnalysisContent>
             ) : (
               <>
@@ -541,39 +452,19 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
         <Col xs={24} sm={12} md={8} lg={6}>
           <MetricCard 
             onClick={handleOutdatedDocsClick}
-            style={{ cursor: hasAdvancedRepoAnalysis && !isAdvancedRepoAnalyzing ? 'pointer' : 'default' }}
+            style={{ cursor: hasAdvancedRepoAnalysis && !isDocQualityAnalyzing ? 'pointer' : 'default' }}
           >
-            {hasAdvancedRepoAnalysis && !isAdvancedRepoAnalyzing && (
-              <RefreshButton 
-                type="text" 
-                size="small" 
-                icon={<ReloadOutlined />} 
-                onClick={(e) => { 
-                  e.stopPropagation(); 
-                  runAnalysis(setIsAdvancedRepoAnalyzing, setHasAdvancedRepoAnalysis, "advancedDoc");
-                }}
-              />
-            )}
-            
-            {!hasAdvancedRepoAnalysis && !isAdvancedRepoAnalyzing ? (
+            {isDocQualityAnalyzing ? (
+              <NoAnalysisContent>
+                <LoadingOutlined style={{ fontSize: 24, color: '#f5222d', marginBottom: 16 }} spin />
+                <Text>Analyzing doc quality: {progress}%</Text>
+              </NoAnalysisContent>
+            ) : !hasAdvancedRepoAnalysis ? (
               <NoAnalysisContent>
                 <IconWrapper style={{ color: '#d9d9d9', justifyContent: 'center' }}>
                   <WarningOutlined />
                 </IconWrapper>
-                <AnalysisPlaceholder>No documentation issues data</AnalysisPlaceholder>
-                <Button 
-                  type="primary" 
-                  size="small"
-                  icon={<ScanOutlined />} 
-                  onClick={() =>{ runAnalysis(setIsAdvancedRepoAnalyzing, setHasAdvancedRepoAnalysis, "advancedDoc")}}
-                >
-                  Find Issues
-                </Button>
-              </NoAnalysisContent>
-            ) : isAdvancedRepoAnalyzing ? (
-              <NoAnalysisContent>
-                <LoadingOutlined style={{ fontSize: 24, color: '#f5222d', marginBottom: 16 }} spin />
-                <Text>Finding documentation issues: {progress}%</Text>
+                <AnalysisPlaceholder>Run Doc Quality analysis to detect issues</AnalysisPlaceholder>
               </NoAnalysisContent>
             ) : (
               <>
@@ -582,7 +473,7 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
                 </IconWrapper>
                 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
                   <div>
-                    <MetricValue level={3}>{outdatedDocs}/{documentedFunctions}</MetricValue>
+                    <MetricValue level={3}>{outdatedDocs+(totalFunctions-documentedFunctions)}/{totalFunctions}</MetricValue>
                     <MetricLabel>Outdated Docs</MetricLabel>
                   </div>
                   <div>
@@ -594,10 +485,10 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
                   <div style={{ marginTop: '8px' }}>
                     <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
                       <Text type="secondary">Outdated</Text>
-                      <Text>{parseFloat(((outdatedDocs / totalFunctions) * 100).toFixed(1))}%</Text>
+                      <Text>{parseFloat((((outdatedDocs+(totalFunctions-documentedFunctions)) / totalFunctions) * 100).toFixed(1))}%</Text>
                     </div>
                     <Progress 
-                      percent={parseFloat(((outdatedDocs / totalFunctions) * 100).toFixed(0))} 
+                      percent={parseFloat((((outdatedDocs+(totalFunctions-documentedFunctions)) / totalFunctions) * 100).toFixed(1))} 
                       size="small" 
                       strokeColor="#fa8c16" 
                       showInfo={false}
@@ -622,53 +513,30 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
         <Col xs={24} sm={12} md={8} lg={6}>
           <MetricCard
             onClick={handleReadmeAnalysisClick}
-            style={{ cursor: hasReadMeAnalysis && !isReadMeAnalyzing ? 'pointer' : 'default' }}
+            style={{ cursor: hasReadMeAnalysis && !isDocQualityAnalyzing ? 'pointer' : 'default' }}
           >
-            {hasReadMeAnalysis && !isReadMeAnalyzing && (
-              <RefreshButton 
-                type="text" 
-                size="small" 
-                icon={<ReloadOutlined />} 
-                onClick={(e) => { 
-                  e.stopPropagation(); 
-                  runAnalysis(setIsReadMeAnalyzing, setHasReadmeAnalysis, "readme");
-                }}
-              />
-            )}
-            
-            {!hasReadMeAnalysis && !isReadMeAnalyzing ? (
+            {isDocQualityAnalyzing ? (
+              <NoAnalysisContent>
+                <LoadingOutlined style={{ fontSize: 24, color: '#52c41a', marginBottom: 16 }} spin />
+                <Text>Analyzing doc quality: {progress}%</Text>
+              </NoAnalysisContent>
+            ) : !hasReadMeAnalysis ? (
               <NoAnalysisContent>
                 <IconWrapper style={{ color: '#d9d9d9', justifyContent: 'center' }}>
                   <BookOutlined />
                 </IconWrapper>
-                <AnalysisPlaceholder>README not analyzed</AnalysisPlaceholder>
-                <Button 
-                  type="primary" 
-                  size="small"
-                  icon={<ScanOutlined />} 
-                  onClick={(e) => { 
-                    e.stopPropagation();
-                    runAnalysis(setIsReadMeAnalyzing, setHasReadmeAnalysis, "readme")
-                  }}
-                >
-                  Score README
-                </Button>
-              </NoAnalysisContent>
-            ) : isReadMeAnalyzing ? (
-              <NoAnalysisContent>
-                <LoadingOutlined style={{ fontSize: 24, color: '#52c41a', marginBottom: 16 }} spin />
-                <Text>Analyzing README: {progress}%</Text>
+                <AnalysisPlaceholder>Run Doc Quality analysis to score README</AnalysisPlaceholder>
               </NoAnalysisContent>
             ) : (
               <>
                 <IconWrapper style={{ color: '#52c41a' }}>
                   <BookOutlined />
                 </IconWrapper>
-                <MetricValue level={3}>{readmeScore.toFixed(1)}%/100</MetricValue>
+                <MetricValue level={3}>{readmeScore?.toFixed(1)|| 0}%</MetricValue>
                 <MetricLabel>Readme Quality Score</MetricLabel>
                 <Tooltip title="Quality assessment of readme documentation">
                   <Progress 
-                    percent={readmeScore.toFixed(1)} 
+                    percent={readmeScore?.toFixed(1)|| 0} 
                     size="small" 
                     strokeColor={readmeScore > 70 ? '#52c41a' : readmeScore > 40 ? '#faad14' : '#f5222d'} 
                   />
@@ -678,9 +546,9 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
           </MetricCard>
         </Col>
         
-        {isRepoAnalyzing && (
+        {isDocQualityAnalyzing && (
           <Col span={24} style={{ textAlign: 'center', marginTop: 16 }}>
-            <Text type="secondary">Analyzing repository documentation... Please wait</Text>
+            <Text type="secondary">Analyzing documentation quality... Please wait</Text>
           </Col>
         )}
       </Row>
@@ -706,10 +574,9 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
       <ReadmeAnalysisModal
         visible={isReadmeModalVisible}
         onClose={() => setIsReadmeModalVisible(false)}
-        readmeAnalysis={repoDetails?.gitAppMetaData?.analysisReport?.readmeAnalysis}
+        readmeAnalysis={repoDetails?.gitAppAdvancedMeta?.analysisReport?.readmeAnalysis}
         repoName={repoDetails?.repoName}
         orgName={repoDetails?.organizationName}
-        readmeSuggestion={readMeDetails}
       />
 
       {/* Replace Modal with direct CustomTerminal */}
@@ -728,7 +595,7 @@ const RepoMetricsCards: React.FC<RepoMetricsCardsProps> = ({ repoDetails, onRunF
         orgName={orgName}
         repoName={repoName}
         vendor={repoDetails.vendor}
-        statusCheckFn={getAnalysisRepoStatus}
+        statusCheckFn={getDocGenStatus}
         onStatusUpdate={handleStatusUpdate} // Add the new status update handler
       />
 
diff --git a/src/components/dashboard/DashboardList/ListAllRepos/ConnectMoreVendors.tsx b/src/components/dashboard/DashboardList/ListAllRepos/ConnectMoreVendors.tsx
index 23875250..a29b0aaa 100644
--- a/src/components/dashboard/DashboardList/ListAllRepos/ConnectMoreVendors.tsx
+++ b/src/components/dashboard/DashboardList/ListAllRepos/ConnectMoreVendors.tsx
@@ -250,7 +250,7 @@ const ConnectMoreVendors: React.FC<ConnectMoreVendorsProps> = ({ existingVendors
 
   return (
     <>
-      {/* <Popover 
+      <Popover 
         content={content} 
         title="Sync Git Vendors" 
         trigger="click"
@@ -268,7 +268,7 @@ const ConnectMoreVendors: React.FC<ConnectMoreVendorsProps> = ({ existingVendors
         >
           Refresh Vendors
         </Button>
-      </Popover> */}
+      </Popover>
 
       {/* Terminal Modal - moved outside popover with proper modal styling */}
       {isModalVisible && (
diff --git a/src/components/dashboard/DashboardList/ListAllRepos/ListAllRepos.tsx b/src/components/dashboard/DashboardList/ListAllRepos/ListAllRepos.tsx
index 486da22c..3d7ad83c 100644
--- a/src/components/dashboard/DashboardList/ListAllRepos/ListAllRepos.tsx
+++ b/src/components/dashboard/DashboardList/ListAllRepos/ListAllRepos.tsx
@@ -7,9 +7,9 @@ import { VendorDropdown, VendorIconKey, vendorIcon } from '../../common/VendorDr
 import { InnerBaseCard, OuterBaseCard, TransparentCard } from './ListAllRepos.Styles';
 import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
 import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
-import { EyeOutlined, GithubOutlined, GitlabOutlined, CloudOutlined } from '@ant-design/icons';
+import { EyeOutlined, GithubOutlined, GitlabOutlined } from '@ant-design/icons';
 import { SearchDropdown } from '../../common/SearchDropdown/SearchDropdown';
-import { Button, Typography, Modal, Form, Input, Select } from 'antd';
+import { Button, Typography, Modal } from 'antd';
 import ConnectMoreVendors from './ConnectMoreVendors';
 import { v4 as uuidv4 } from 'uuid';
 import CustomTerminal, { MessageType, TerminalMessage } from '../../DashboardTerminal/CustomTerminal';
@@ -18,6 +18,7 @@ import { readToken } from '@app/services/localStorage.service';
 import { BitBucketOutlined } from '../../common/VendorDropdown/vendorIcons/VendorIcons';
 import './IntegrationButtons.css';
 import { AzureOutlined } from '../../common/VendorDropdown/vendorIcons/VendorIcons';
+import { decodeGitOrgName } from '@app/utils/gitNameEncoding';
 
 interface GroupedReposType {
   [key: string]: GitAppUsageType[];
@@ -30,7 +31,6 @@ const EmptyReposMessage: React.FC = () => {
   const [isInstallationComplete, setIsInstallationComplete] = useState<boolean>(false);
   const [isInstalling, setIsInstalling] = useState<boolean>(false);
   const [installationType, setInstallationType] = useState<'bitbucket' | 'gitlab' | 'azure'>('bitbucket');
-  const [form] = Form.useForm();
   let eventSourceWithAuth: EventSourceWithAuth | null = null;
 
   // Function to handle BitBucket App installation
@@ -320,28 +320,58 @@ export const ListAllRepos: React.FC = () => {
   const [selectedVendor, setSelectedVendor] = useState('all');
   const [vendorOptions, setVendorOptions] = useState<string[]>([]);
 
-  const fetchRepos = useCallback(() => {
-    getGitAppUsage()
-      .then((resp) => {
-        setRepos(resp);
+  const REPO_CACHE_KEY = 'penify.repoListCache.v1';
 
-        const uniqueVendors = Array.from(new Set(resp.map((item) => item.vendor)));
-        setVendorOptions(['All', ...uniqueVendors]);
-        
-        // If there's only one vendor, automatically select it
-        if (uniqueVendors.length === 1) {
-          setSelectedVendor(uniqueVendors[0].toLowerCase());
-        }
-      })
-      .catch((err) => {
-        console.error(err);
-      })
-      .finally(() => setIsLoading(false));
+  const applyRepoList = useCallback((resp: GitAppUsageType[]) => {
+    setRepos(resp);
+
+    const uniqueVendors = Array.from(new Set(resp.map((item) => item.vendor)));
+    setVendorOptions(['All', ...uniqueVendors]);
+
+    if (uniqueVendors.length === 1) {
+      setSelectedVendor(uniqueVendors[0].toLowerCase());
+    }
   }, []);
 
+  const loadCachedRepos = useCallback((): boolean => {
+    const cached = localStorage.getItem(REPO_CACHE_KEY);
+    if (!cached) return false;
+
+    try {
+      const parsed = JSON.parse(cached) as { repos: GitAppUsageType[]; updatedAt: number };
+      if (Array.isArray(parsed.repos)) {
+        applyRepoList(parsed.repos);
+        setIsLoading(false);
+        return true;
+      }
+    } catch {
+      // Ignore cache parsing errors
+    }
+
+    return false;
+  }, [applyRepoList]);
+
+  const fetchRepos = useCallback(
+    async ({ showLoader }: { showLoader: boolean }) => {
+      if (showLoader) setIsLoading(true);
+
+      try {
+        const resp = await getGitAppUsage();
+        applyRepoList(resp);
+        localStorage.setItem(REPO_CACHE_KEY, JSON.stringify({ repos: resp, updatedAt: Date.now() }));
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [applyRepoList],
+  );
+
   useEffect(() => {
-    fetchRepos();
-  }, [fetchRepos]);
+    const hadCache = loadCachedRepos();
+    fetchRepos({ showLoader: !hadCache });
+  }, [fetchRepos, loadCachedRepos]);
 
   const filteredRepos = useMemo(() => {
     if (selectedVendor === 'all') {
@@ -400,7 +430,7 @@ export const ListAllRepos: React.FC = () => {
         <Flex align="center" gap="small">
           <ConnectMoreVendors 
             existingVendors={vendorOptions.filter(v => v !== 'All')} 
-            onVendorConnected={fetchRepos} 
+            onVendorConnected={() => fetchRepos({ showLoader: true })} 
           />
           {vendorOptions.filter(v => v !== 'All').length > 1 && (
             <VendorDropdown
@@ -417,7 +447,7 @@ export const ListAllRepos: React.FC = () => {
           .sort(([a], [b]) => a.localeCompare(b))
           .map(([organization, repos]) => (
             <BaseCol key={organization} span={24}>
-              <OuterBaseCard title={organization} style={{ marginTop: '1rem', height: 'auto' }}>
+              <OuterBaseCard title={decodeGitOrgName(organization)} style={{ marginTop: '1rem', height: 'auto' }}>
                 <BaseRow gutter={[16, 16]}>
                   {repos
                     .sort((a, b) => {
diff --git a/src/components/dashboard/DashboardList/ListOrgs/ListOrgs.tsx b/src/components/dashboard/DashboardList/ListOrgs/ListOrgs.tsx
index 47d91b31..aa786476 100644
--- a/src/components/dashboard/DashboardList/ListOrgs/ListOrgs.tsx
+++ b/src/components/dashboard/DashboardList/ListOrgs/ListOrgs.tsx
@@ -9,6 +9,7 @@ import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
 import { EyeOutlined } from '@ant-design/icons';
 import { InnerBaseCard, OuterBaseCard, TransparentCard } from '../ListAllRepos/ListAllRepos.Styles';
 import { SearchDropdown } from '../../common/SearchDropdown/SearchDropdown';
+import { decodeGitOrgName } from '@app/utils/gitNameEncoding';
 
 export const ListOrgs: React.FC = () => {
   const navigate = useNavigate();
@@ -75,7 +76,7 @@ export const ListOrgs: React.FC = () => {
 
       <BaseRow gutter={[10, 10]}>
         <BaseCol key={orgName} span={24}>
-          <OuterBaseCard title={orgName} style={{ marginTop: '1rem', height: 'auto' }}>
+          <OuterBaseCard title={decodeGitOrgName(orgName || '')} style={{ marginTop: '1rem', height: 'auto' }}>
             <BaseRow gutter={[16, 16]}>
               {filteredRepos
                 .sort((a, b) => {
diff --git a/src/components/dashboard/DashboardTerminal/ArchConfigModal.tsx b/src/components/dashboard/DashboardTerminal/ArchConfigModal.tsx
index f27823fe..c5896fcd 100644
--- a/src/components/dashboard/DashboardTerminal/ArchConfigModal.tsx
+++ b/src/components/dashboard/DashboardTerminal/ArchConfigModal.tsx
@@ -95,6 +95,7 @@ interface ArchConfigModalProps {
   onCancel: () => void;
   onConfirm: (archConfig: ArchDocConfig) => void;
   loading?: boolean;
+  isPrivate?: boolean;
 }
 
 /**
@@ -112,6 +113,7 @@ const ArchConfigModal: React.FC<ArchConfigModalProps> = ({
   onCancel,
   onConfirm,
   loading = false,
+  isPrivate = false,
 }) => {
   const [form] = Form.useForm();
 
@@ -119,7 +121,8 @@ const ArchConfigModal: React.FC<ArchConfigModalProps> = ({
     // Set default values when modal becomes visible
     if (visible) {
       form.setFieldsValue({
-        hostDocumentation: true,
+        // For private repositories, hostDocumentation should be false by default
+        hostDocumentation: !isPrivate,
         generatePdf: true,
         generateMd: true,
         generateHtml: true,
@@ -130,12 +133,23 @@ const ArchConfigModal: React.FC<ArchConfigModalProps> = ({
         path: 'docs'
       });
     }
-  }, [visible, form]);
+  }, [visible, form, isPrivate]);
 
   /**
    * Handle form submission and pass the config to the parent component
    */
-  const handleFinish = (values: any) => {
+  const handleFinish = (values: {
+    hostDocumentation: boolean;
+    generatePdf: boolean;
+    generateMd: boolean;
+    generateHtml: boolean;
+    generateRst: boolean;
+    generateRtf: boolean;
+    generateXml: boolean;
+    commitToGit: boolean;
+    branch: string;
+    path: string;
+  }) => {
     const { commitToGit, branch, path, ...rest } = values;
     
     const archConfig: ArchDocConfig = {
@@ -306,8 +320,8 @@ const ArchConfigModal: React.FC<ArchConfigModalProps> = ({
                 {({ getFieldValue, setFieldsValue }) => {
                   const generateHtml = getFieldValue('generateHtml');
                   
-                  // If HTML is unchecked, also uncheck the host documentation option
-                  if (!generateHtml && getFieldValue('hostDocumentation')) {
+                  // If HTML is unchecked or it's a private repository, also uncheck the host documentation option
+                  if ((!generateHtml || isPrivate) && getFieldValue('hostDocumentation')) {
                     setFieldsValue({ hostDocumentation: false });
                   }
                   
@@ -316,13 +330,17 @@ const ArchConfigModal: React.FC<ArchConfigModalProps> = ({
                       name="hostDocumentation"
                       valuePropName="checked"
                     >
-                      <Checkbox disabled={!generateHtml}>
-                        <span style={{ marginLeft: 8, color: !generateHtml ? '#00000040' : undefined }}>
+                      <Checkbox disabled={!generateHtml || isPrivate}>
+                        <span style={{ marginLeft: 8, color: (!generateHtml || isPrivate) ? '#00000040' : undefined }}>
                           Host Documentation Online
-                          <Tooltip title={generateHtml ? 
+                          <Tooltip title={
+                            isPrivate ? 
+                            "Hosting is disabled for Private Repositories" :
+                            generateHtml ? 
                             "Host the generated documentation HTML on our servers for easy access" : 
-                            "HTML format must be selected to enable online hosting"}>
-                            <InfoCircleOutlined style={{ marginLeft: 6, color: generateHtml ? '#1677ff' : '#00000040', fontSize: 13 }} />
+                            "HTML format must be selected to enable online hosting"
+                          }>
+                            <InfoCircleOutlined style={{ marginLeft: 6, color: (generateHtml && !isPrivate) ? '#1677ff' : '#00000040', fontSize: 13 }} />
                           </Tooltip>
                         </span>
                       </Checkbox>
diff --git a/src/components/dashboard/DashboardTerminal/CustomTerminal.tsx b/src/components/dashboard/DashboardTerminal/CustomTerminal.tsx
index 3e7ff8c4..26970609 100644
--- a/src/components/dashboard/DashboardTerminal/CustomTerminal.tsx
+++ b/src/components/dashboard/DashboardTerminal/CustomTerminal.tsx
@@ -326,6 +326,8 @@ const CustomTerminal: React.FC<CustomTerminalProps> = ({
   // Use a ref to store the latest messages to avoid closure issues
   const messagesRef = useRef<TerminalMessage[]>(messages);
   const jobIdRef = useRef<string>(jobId);
+  const onStatusUpdateRef = useRef<CustomTerminalProps['onStatusUpdate']>(onStatusUpdate);
+  const statusCheckFnRef = useRef<CustomTerminalProps['statusCheckFn']>(statusCheckFn);
 
   // Update the ref when messages change
   useEffect(() => {
@@ -333,97 +335,104 @@ const CustomTerminal: React.FC<CustomTerminalProps> = ({
     setLocalMessages(messages);
   }, [messages]);
 
+  useEffect(() => {
+    onStatusUpdateRef.current = onStatusUpdate;
+  }, [onStatusUpdate]);
+
+  useEffect(() => {
+    statusCheckFnRef.current = statusCheckFn;
+  }, [statusCheckFn]);
+
 
   // Status polling logic
-  let countOfFailedStatus = 0;
+  const failedStatusCountRef = useRef(0);
   useEffect(() => {
     jobIdRef.current = jobId;
-    if(messages.length > 0) {
-      if( messages[messages.length - 1] && messages[messages.length - 1].type) {
-        const messageType = messages[messages.length - 1].type;
-        if ([MessageType.COMPLETE, MessageType.TERMINATED, MessageType.FAILED, MessageType.TIMEOUT].includes(messageType)) {
+    failedStatusCountRef.current = 0;
+
+    if (!jobId || !statusCheckFnRef.current) {
+      setLocalIsProcessing(false);
+      return;
+    }
+
+    setLocalIsProcessing(true);
+    const intervalId = setInterval(async () => {
+      const latestMessages = messagesRef.current;
+      if (latestMessages.length > 0) {
+        const lastType = latestMessages[latestMessages.length - 1]?.type;
+        if (
+          lastType &&
+          [MessageType.COMPLETE, MessageType.TERMINATED, MessageType.FAILED, MessageType.TIMEOUT].includes(lastType)
+        ) {
           setLocalIsProcessing(false);
+          clearInterval(intervalId);
           return;
         }
       }
-    }
-    if (jobId && statusCheckFn && messages) {
-      setLocalIsProcessing(true);
-      const intervalId = setInterval(async () => {
-        try {
-          const response: DocGenStatusReponse = await statusCheckFn(
-            orgName,
-            repoName,
-            vendor,
-            terminalKey,
-            jobId
-          );
-          
-          // Update percentage if provided
-          setLocalPercentage(response.percentage || 0);
-          if (onStatusUpdate && response.percentage) {
-            onStatusUpdate(response.percentage, undefined);
-          }
-          
-          // Process the messages
-          if (response.messages && Array.isArray(response.messages)) {
-            for (const message of response.messages) {
-
-              switch (message.trim()) {
-                case 'CANCELLED':
-                  addMessage('Complete!', MessageType.TERMINATED);
-                  break;
-                case 'COMPLETE':
-                  addMessage('Complete!', MessageType.COMPLETE);
-                  break;
-                case 'TIMEOUT':
-                  addMessage('Timeout', MessageType.TIMEOUT);
-                  break;
-                case 'TERMINATED':
-                  addMessage('Cancelled', MessageType.TERMINATED);
-                  break;
-                case 'FAILED':
-                  addMessage('Failed', MessageType.FAILED);
-                  break;
-                default:
-                  parseAndAddMessage(message);
-                  continue;
-              }
-              setTimeout(async () => {
-                setLocalIsProcessing(false);
-                const gitData = await getGitApp(orgName, repoName, vendor);
-                          
-                // Propagate status update to parent component
-                if (onStatusUpdate && gitData) {
-                  if(gitData.gitAppMetaData && gitData.gitAppMetaData.analysisReport) {
-                    onStatusUpdate(100, gitData.gitAppMetaData.analysisReport);
-                  } else {
-                    onStatusUpdate(100, undefined);
-                  }
-                  
-                }
-
-                clearInterval(intervalId);
-              }, 100);
+
+      try {
+        const response: DocGenStatusReponse = await statusCheckFnRef.current(
+          orgName,
+          repoName,
+          vendor,
+          terminalKey,
+          jobId,
+        );
+
+        const nextPercentage = response.percentage || 0;
+        setLocalPercentage(nextPercentage);
+        onStatusUpdateRef.current?.(nextPercentage, undefined);
+
+        if (response.messages && Array.isArray(response.messages)) {
+          for (const message of response.messages) {
+            const trimmed = message.trim();
+            const isTerminalState = ['CANCELLED', 'COMPLETE', 'TIMEOUT', 'TERMINATED', 'FAILED'].includes(trimmed);
+
+            if (!isTerminalState) {
+              parseAndAddMessage(message);
+              continue;
             }
-          }
-        } catch (error) {
-          console.error('Error checking status:', error);
-          addMessage(`Error checking status: ${error}`, MessageType.ERROR);
-          countOfFailedStatus++;
-          if (countOfFailedStatus >= 5) {
-            addMessage('Failed to check status after multiple attempts.', MessageType.FAILED);
+
+            const type =
+              trimmed === 'COMPLETE'
+                ? MessageType.COMPLETE
+                : trimmed === 'FAILED'
+                  ? MessageType.FAILED
+                  : trimmed === 'TIMEOUT'
+                    ? MessageType.TIMEOUT
+                    : MessageType.TERMINATED;
+
+            addMessage(trimmed === 'CANCELLED' ? 'Cancelled' : trimmed, type);
+
             setLocalIsProcessing(false);
             clearInterval(intervalId);
+
+            try {
+              const gitData = await getGitApp(orgName, repoName, vendor);
+              onStatusUpdateRef.current?.(100, gitData?.gitAppAdvancedMeta?.analysisReport, type);
+            } catch (err) {
+              console.error('Error fetching repo data after completion:', err);
+              onStatusUpdateRef.current?.(100, undefined, type);
+            }
+            return;
           }
         }
-      }, 3000); // Poll every 3 seconds
-      
-      return () => {
-        
-      };
-    }
-  }, [jobId, orgName, repoName]);
+      } catch (error) {
+        console.error('Error checking status:', error);
+        addMessage(`Error checking status: ${error}`, MessageType.ERROR);
+        failedStatusCountRef.current += 1;
+        if (failedStatusCountRef.current >= 5) {
+          addMessage('Failed to check status after multiple attempts.', MessageType.FAILED);
+          setLocalIsProcessing(false);
+          clearInterval(intervalId);
+        }
+      }
+    }, 3000);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [jobId, orgName, repoName, vendor, terminalKey]);
 
   // Function to format JSON with syntax highlighting
   const formatJson = (jsonString: string): string => {
@@ -440,6 +449,19 @@ const CustomTerminal: React.FC<CustomTerminalProps> = ({
     }
   };
 
+  const parseTimestamp = (timestamp: string): Date => {
+    // Attempt to parse the timestamp string directly
+    const date = new Date(timestamp);
+    
+    // If the date is invalid, return current date
+    if (isNaN(date.getTime())) {
+      console.error('Invalid timestamp format:', timestamp);
+      return new Date();
+    }
+    
+    return date;
+  }
+
   // Parse messages from the status response
   const parseAndAddMessage = (message: string) => {
     // Skip empty messages
@@ -451,62 +473,59 @@ const CustomTerminal: React.FC<CustomTerminalProps> = ({
     // If we have at least 3 parts, we have a properly formatted message
     if (parts.length >= 3) {
       const messageType = parts[0];
-      let timestamp = new Date();
-      let content = parts.slice(2).join('::'); // Join the rest back in case message itself contains ::
-      
-      // Try to parse the timestamp
-      try {
-        timestamp = new Date(parts[1]);
-      } catch (error) {
-        console.error('Error parsing timestamp:', error);
-      }
-      
-      // Determine message type
-      let type = MessageType.INFO;
+      const timestamp = parseTimestamp(parts[1]); // Parse the timestamp from the second part
+      const contentList = parts.slice(2).join('::').split('\n');
+    
+      for (let content of contentList) {
+        if( !content || content.trim() === '') continue; // Skip empty lines
       
-      switch (messageType) {
-        case 'ERROR':
-          type = MessageType.ERROR;
-          break;
-        case 'WARNING':
-          type = MessageType.WARNING;
-          break;
-        case 'INFO':
-          type = MessageType.INFO;
-          break;
-        case 'SUCCESS':
-          type = MessageType.SUCCESS;
-          break;
-        case 'DEBUG':
-          type = MessageType.DEBUG;
-          break;
-        case 'COMMAND':
-          type = MessageType.COMMAND;
-          break;
-        case 'JSON':
-          try {
-            // Parse JSON to validate and then stringify for formatting
-            const jsonContent = JSON.parse(content);
-            // Instead of just adding <pre> tags, create a message with special JSON formatting
-            addJsonMessage(jsonContent);
-            return; // Return early as we're handling this message separately
-          } catch (error) {
-            console.error('Error parsing JSON:', error);
-            content = `<pre>${content}</pre>`;
+        // Determine message type
+        let type = MessageType.INFO;
+        
+        switch (messageType) {
+          case 'ERROR':
+            type = MessageType.ERROR;
+            break;
+          case 'WARNING':
+            type = MessageType.WARNING;
+            break;
+          case 'INFO':
             type = MessageType.INFO;
-          }
-          break;
-        case 'URL':
-          // Make URLs clickable with HTML links
-          const urlRegex = /(https?:\/\/[^\s]+)/g;
-          content = content.replace(urlRegex, (url) => `<a href="${url}" target="_blank">${url}</a>`);
-          type = MessageType.URL;
-          break;
-        default:
-          type = MessageType.INFO;
+            break;
+          case 'SUCCESS':
+            type = MessageType.SUCCESS;
+            break;
+          case 'DEBUG':
+            type = MessageType.DEBUG;
+            break;
+          case 'COMMAND':
+            type = MessageType.COMMAND;
+            break;
+          case 'JSON':
+            try {
+              // Parse JSON to validate and then stringify for formatting
+              const jsonContent = JSON.parse(content);
+              // Instead of just adding <pre> tags, create a message with special JSON formatting
+              addJsonMessage(jsonContent);
+              return; // Return early as we're handling this message separately
+            } catch (error) {
+              console.error('Error parsing JSON:', error);
+              content = `<pre>${content}</pre>`;
+              type = MessageType.INFO;
+            }
+            break;
+          case 'URL':
+            // Make URLs clickable with HTML links
+            const urlRegex = /(https?:\/\/[^\s]+)/g;
+            content = content.replace(urlRegex, (url) => `<a href="${url}" target="_blank">${url}</a>`);
+            type = MessageType.URL;
+            break;
+          default:
+            type = MessageType.INFO;
+        }
+        
+        addMessage(content, type, timestamp);
       }
-      
-      addMessage(content, type, timestamp);
     } else {
       // If the message doesn't match the expected format, add it as-is
 
diff --git a/src/components/dashboard/DashboardTerminal/DashboardTerminal.tsx b/src/components/dashboard/DashboardTerminal/DashboardTerminal.tsx
index af226f25..0387ffa9 100644
--- a/src/components/dashboard/DashboardTerminal/DashboardTerminal.tsx
+++ b/src/components/dashboard/DashboardTerminal/DashboardTerminal.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useRef } from 'react';
-import { Row, Col, Typography, Space, Divider, Button } from 'antd';
+import React, { useMemo, useRef } from 'react';
+import { Divider, Button, Typography } from 'antd';
 import styled from 'styled-components';
 import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
 import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
@@ -8,19 +8,8 @@ import { useAppSelector } from '@app/hooks/reduxHooks';
 import DocumentationTools from './DocumentationTools';
 import RepoMetricsCards from '../DashboardHeader/RepoMetricsCards';
 import { ScanOutlined } from '@ant-design/icons';
-import { useTranslation } from 'react-i18next';
 import DocumentationInsights from './DocumentationInsights';
 
-const { Title } = Typography;
-
-const PageHeader = styled.div`
-  margin-bottom: 24px;
-`;
-
-const SectionTitle = styled(Title)`
-  margin-bottom: 16px !important;
-`;
-
 const DashboardContainer = styled.div`
   margin-bottom: 40px;
 `;
@@ -58,12 +47,10 @@ interface DashboardTerminalProps {
 
 export const DashboardTerminal: React.FC<DashboardTerminalProps> = ({ repoDetails }) => {
   const user = useAppSelector((state) => state.user.user);
-  const { t } = useTranslation();
-  let hasAnalysisReport = false;
-  if (repoDetails?.gitAppMetaData?.analysisReport) {
-    hasAnalysisReport = true;
-  }
-  const [hasRunAnalysis, setHasRunAnalysis] = useState(true);
+  const hasAnalysisReport = useMemo(
+    () => !!repoDetails?.gitAppAdvancedMeta?.analysisReport,
+    [repoDetails],
+  );
   
   // Create a ref to store the runFullAnalysis function from RepoMetricsCards
   const repoMetricsRef = useRef<(() => void) | null>(null);
@@ -78,34 +65,30 @@ export const DashboardTerminal: React.FC<DashboardTerminalProps> = ({ repoDetail
     if (repoMetricsRef.current) {
       repoMetricsRef.current(); // This will call runFullDocumentationAnalysis in RepoMetricsCards
     }
-    setHasRunAnalysis(true);
   };
 
   if (!user) return null;
 
-  // Get language data from repoDetails if available
-  const languageData = repoDetails?.gitAppMetaData?.analysisReport?.programmingLanguages || {};
-
   return (
     <TerminalContainer>
       <DashboardContainer>
-        {!hasRunAnalysis && (
-          <AnalysisPrompt>
-            <Typography.Text className="title">
-              Repository Documentation Analysis
-            </Typography.Text>
-            <div className="description">
-              Run an analysis to see detailed documentation metrics for your repository
-            </div>
-            <Button 
-              type="primary" 
-              icon={<ScanOutlined />}
-              onClick={runFullAnalysis}
-            >
-              Run Full Documentation Analysis
-            </Button>
-          </AnalysisPrompt>
-        )}
+        <AnalysisPrompt>
+          <Typography.Text className="title">
+            Doc Quality Analysis
+          </Typography.Text>
+          <div className="description">
+            Coverage, outdated docs, README quality, and language breakdown.
+          </div>
+          <Button
+            type="primary"
+            size="large"
+            block
+            icon={<ScanOutlined />}
+            onClick={runFullAnalysis}
+          >
+            {hasAnalysisReport ? 'Re-run Doc Quality Analysis' : 'Analyze Doc Quality of Repository'}
+          </Button>
+        </AnalysisPrompt>
       
         {/* Repository Metrics Overview */}
         <BaseRow gutter={[0, 24]}>
diff --git a/src/components/dashboard/DashboardTerminal/DocstringStyleModal.tsx b/src/components/dashboard/DashboardTerminal/DocstringStyleModal.tsx
index 3e9d0a99..a819e42f 100644
--- a/src/components/dashboard/DashboardTerminal/DocstringStyleModal.tsx
+++ b/src/components/dashboard/DashboardTerminal/DocstringStyleModal.tsx
@@ -173,27 +173,15 @@ const DocstringStyleModal: React.FC<DocstringStyleModalProps> = ({
           <div>
             <Title level={4} style={{ margin: 0, color: '#1677ff', fontWeight: 600, fontSize: 19 }}>Configure Docstring Styles</Title>
             <ModalSubtitle>
-              Personalize how your docstring is generated.
-            </ModalSubtitle>
-          </div>
-        </ModalHeader>
-        <InfoAlert style={{ margin: 5 }}
-          message={
-            <span>
-              <BlogLink
+              Personalize how your docstring is generated. <BlogLink
                 href="https://blogs.penify.dev/docs/common-docstring-format-in-python.html"
                 target="_blank"
                 rel="noopener noreferrer"
                 onClick={e => e.stopPropagation()}
-              >
-                Learn more
-              </BlogLink>
-            </span>
-          }
-          description="Configure the docstring style and max line length."
-          type="info"
-          showIcon
-        />
+              >Learn more.</BlogLink>
+            </ModalSubtitle>
+          </div>
+        </ModalHeader>
         <Form
           form={form}
           layout="vertical"
diff --git a/src/components/dashboard/DashboardTerminal/DocumentationCard.tsx b/src/components/dashboard/DashboardTerminal/DocumentationCard.tsx
index a8bb3fbe..70a0c81c 100644
--- a/src/components/dashboard/DashboardTerminal/DocumentationCard.tsx
+++ b/src/components/dashboard/DashboardTerminal/DocumentationCard.tsx
@@ -719,6 +719,7 @@ const DocumentationCard: React.FC<DocumentationCardProps> = ({
         onCancel={handleArchConfigModalCancel}
         onConfirm={handleArchConfigConfirm}
         loading={isLoading}
+        isPrivate={repoDetails.isPrivate}
       />
       
       {/* Azure DevOps PAT Modal */}
diff --git a/src/components/dashboard/DashboardTerminal/DocumentationInsights.tsx b/src/components/dashboard/DashboardTerminal/DocumentationInsights.tsx
index a19d6724..bcc79799 100644
--- a/src/components/dashboard/DashboardTerminal/DocumentationInsights.tsx
+++ b/src/components/dashboard/DashboardTerminal/DocumentationInsights.tsx
@@ -11,7 +11,6 @@ import {
 } from '@ant-design/icons';
 import styled from 'styled-components';
 import { GitAppUsageType } from '@app/api/git.api';
-import { c } from 'node_modules/vite/dist/node/types.d-aGj9QkWt';
 
 const { Text, Title } = Typography;
 
@@ -93,7 +92,7 @@ const DocumentationInsights: React.FC<DocumentationInsightsProps> = ({ repoDetai
   const [hasData, setHasData] = useState(false);
   
   // Extract data from repoDetails if available
-  const analysisReport = repoDetails?.gitAppMetaData?.analysisReport;
+  const analysisReport = repoDetails?.gitAppAdvancedMeta?.analysisReport;
   const basicFuncDocAnalysis = analysisReport?.basicFuncDocAnalysis;
   const advancedFuncDocAnalysis = analysisReport?.advancedFuncDocAnalysis;
   const readmeAnalysis = analysisReport?.readmeAnalysis;
@@ -193,7 +192,7 @@ const DocumentationInsights: React.FC<DocumentationInsightsProps> = ({ repoDetai
           icon: <WarningOutlined />,
           iconColor: '#faad14',
           title: 'README needs improvement',
-          description: `Current quality score: ${readmeAnalysis.calculatedQualityScore.toFixed(1)}%`,
+          description: `Current quality score: ${readmeAnalysis?.calculatedQualityScore?.toFixed(1)}%`,
           priority: readmeAnalysis.calculatedQualityScore < 30 ? 'high' : 'medium'
         });
       } else if (readmeAnalysis.calculatedQualityScore >= 80) {
@@ -201,7 +200,7 @@ const DocumentationInsights: React.FC<DocumentationInsightsProps> = ({ repoDetai
           icon: <CheckCircleOutlined />,
           iconColor: '#52c41a',
           title: 'README quality is excellent',
-          description: `Quality score: ${readmeAnalysis.calculatedQualityScore.toFixed(1)}%`,
+          description: `Quality score: ${readmeAnalysis?.calculatedQualityScore?.toFixed(1)}%`,
           priority: 'low'
         });
       }
diff --git a/src/components/dashboard/DashboardTerminal/DocumentationTools.tsx b/src/components/dashboard/DashboardTerminal/DocumentationTools.tsx
index ab79c83d..ce2f8d16 100644
--- a/src/components/dashboard/DashboardTerminal/DocumentationTools.tsx
+++ b/src/components/dashboard/DashboardTerminal/DocumentationTools.tsx
@@ -37,6 +37,7 @@ const StyledTabs = styled(Tabs)`
 
     .ant-tabs-tab-btn {
       font-weight: 500;
+      font-size: 13px;
       display: flex;
       align-items: center;
       gap: 8px;
@@ -100,7 +101,8 @@ const CardTitle = styled.div`
 
   h4 {
     margin: 0;
-    font-weight: 600;
+    font-weight: 500;
+    font-size: 16px;
   }
 
   .badge-container {
@@ -119,8 +121,8 @@ const TabDescription = styled(Paragraph)`
   border-left: 4px solid #1890ff;
 
   .title {
-    font-weight: 600;
-    font-size: 16px;
+    font-weight: 500;
+    font-size: 15px;
     margin-bottom: 8px;
     color: #111;
   }
@@ -128,14 +130,16 @@ const TabDescription = styled(Paragraph)`
   .description {
     margin: 0;
     color: rgba(0, 0, 0, 0.65);
+    font-size: 13px;
   }
 `;
 
 const StyledTag = styled(Tag)`
   margin-left: 8px;
-  font-weight: 500;
+  font-weight: 400;
   padding: 2px 8px;
   border-radius: 4px;
+  font-size: 12px;
 `;
 
 const ValueProposition = styled.div`
@@ -154,6 +158,7 @@ const ValuePoint = styled.div`
     color: #52c41a;
     margin-right: 10px;
     margin-top: 2px;
+    font-size: 14px;
   }
 
   .content {
@@ -163,14 +168,18 @@ const ValuePoint = styled.div`
   .title {
     font-weight: 500;
     margin-bottom: 2px;
+    font-size: 14px;
   }
 
   .description {
     color: rgba(0, 0, 0, 0.65);
-    font-size: 13px;
+    font-size: 12px;
   }
 `;
 
+// These styled components might be used in the future
+// Temporarily commented out to avoid unused component warnings
+/*
 const BeforeAfterPanel = styled.div`
   margin: 20px 0;
 `;
@@ -223,6 +232,7 @@ const GradientBadge = styled.div`
     margin-right: 4px;
   }
 `;
+*/
 
 interface DocumentationToolsProps {
   repoDetails: GitAppUsageType;
@@ -230,7 +240,8 @@ interface DocumentationToolsProps {
 
 const DocumentationTools: React.FC<DocumentationToolsProps> = ({ repoDetails }) => {
   const user = useAppSelector((state) => state.user.user);
-  const [activeTab, setActiveTab] = useState('code');
+  // Track active tab for future use
+  const [, setActiveTab] = useState('code');
 
   if (!user) return null;
 
@@ -278,7 +289,7 @@ function calculateMetrics(data) {
   const tutorialCardForDocGen = (
     <>
       <div style={{ marginTop: 24, marginBottom: 24, marginLeft: 16, marginRight: 16 }}>
-        <Typography.Title level={5} style={{ marginBottom: 16 }}>
+        <Typography.Title level={5} style={{ marginBottom: 16, fontSize: '15px', fontWeight: 500 }}>
           How it looks like?
         </Typography.Title>
         <BeforeAfterDocSlider
@@ -291,7 +302,7 @@ function calculateMetrics(data) {
       </div>
 
       <ValueProposition>
-        <Title level={5} style={{ marginTop: 0, marginBottom: 16 }}>
+        <Title level={5} style={{ marginTop: 0, marginBottom: 16, fontSize: '15px', fontWeight: 500 }}>
           Why document your code?
         </Title>
         <Row gutter={[16, 16]}>
@@ -333,7 +344,7 @@ function calculateMetrics(data) {
     <EnhancedCard
       title={
         <CardTitle>
-          <Title level={4}>Repository Documentation Tools</Title>
+          <Title level={4} style={{ fontSize: '16px', fontWeight: 500 }}>Repository Documentation Tools</Title>
           {/* <div className="badge-container">
             {user.countRepoGen > 0 && (
               <Tooltip title="Full repository documentation generations available">
@@ -365,7 +376,7 @@ function calculateMetrics(data) {
           key="code"
         >
           <div>
-            <TabDescription>
+            <TabDescription style={{ fontSize: '13px', lineHeight: '1.5' }}>
               <div className="description">
                 Create comprehensive docstrings for functions and classes throughout your codebase.
                 
@@ -397,7 +408,7 @@ function calculateMetrics(data) {
           key="architecture"
         >
           <div>
-            <TabDescription>
+            <TabDescription style={{ fontSize: '13px', lineHeight: '1.5' }}>
               <div className="title">Generate Architecture Documentation</div>
               <div className="description">
                 Create high-level architecture documentation that explains
@@ -423,7 +434,7 @@ function calculateMetrics(data) {
           key="api"
         >
           <div>
-            <TabDescription>
+            <TabDescription style={{ fontSize: '13px', lineHeight: '1.5' }}>
               <div className="title">Generate API Documentation</div>
               <div className="description">
                 Generate detailed API documentation for endpoints, request/response formats, and
diff --git a/src/components/dashboard/common/SearchDropdown/SearchDropdown.tsx b/src/components/dashboard/common/SearchDropdown/SearchDropdown.tsx
index 33c992e9..7c5e2ef0 100644
--- a/src/components/dashboard/common/SearchDropdown/SearchDropdown.tsx
+++ b/src/components/dashboard/common/SearchDropdown/SearchDropdown.tsx
@@ -5,6 +5,7 @@ import { BaseList } from '@app/components/common/BaseList/BaseList';
 import { HashLink } from 'react-router-hash-link';
 import { NotFound } from '@app/components/common/NotFound/NotFound';
 import { VendorIconKey, vendorIcon } from '../VendorDropdown/VendorDropdown';
+import { decodeGitOrgName } from '@app/utils/gitNameEncoding';
 
 type SearchDropdownProps = {
   repos: GitAppUsageType[];
@@ -42,7 +43,7 @@ export const SearchDropdown: React.FC<SearchDropdownProps> = ({ repos }) => {
                 avatar={vendorIcon[item.vendor.toLowerCase() as VendorIconKey]}
                 description={
                   <Text>
-                    {item.organizationName} / {item.repoName}
+                    {decodeGitOrgName(item.organizationName)} / {item.repoName}
                   </Text>
                 }
               />
diff --git a/src/components/jobs/AllJobsList/AllJobsList.tsx b/src/components/jobs/AllJobsList/AllJobsList.tsx
index e702d551..15d80fe9 100644
--- a/src/components/jobs/AllJobsList/AllJobsList.tsx
+++ b/src/components/jobs/AllJobsList/AllJobsList.tsx
@@ -158,10 +158,14 @@ export const AllJobsList: React.FC = () => {
 
     try {
       const { logs } = await getLroJobLogs(job.id || -1);
-      for (const log of logs.split('\n')) {
+      // this is the seperator we use to split logs in backend
+      // '\n|||' is used to separate log messages in the backend
+      // it is used to split logs into individual messages
+      for (const log of logs.split('\n|||')) { 
         if (!log.trim()) continue;
         
         const [logType, ts, msg] = log.split('::');
+        if(!msg ) continue;
         const message: TerminalMessage = {
           content: msg,
           type: MessageType[logType.toUpperCase() as keyof typeof MessageType] || MessageType.INFO,
diff --git a/src/components/layouts/main/MainNav/MainNavs.tsx b/src/components/layouts/main/MainNav/MainNavs.tsx
index 0ba9f5bc..b3a9eb68 100644
--- a/src/components/layouts/main/MainNav/MainNavs.tsx
+++ b/src/components/layouts/main/MainNav/MainNavs.tsx
@@ -8,6 +8,7 @@ import { Link, useLocation, useNavigate, useParams, useSearchParams } from 'reac
 import { MainBreadcrumb, MainBreadcrumbWrapper, RepoActionsContainer } from './MainNavs.Styles';
 import { useTranslation } from 'react-i18next';
 import { AzureOutlined, BitBucketOutlined } from '@app/components/dashboard/common/VendorDropdown/vendorIcons/VendorIcons';
+import { decodeGitOrgName } from '@app/utils/gitNameEncoding';
 
 
 const pathToBreadcrumbMap: Record<string, string> = {
@@ -23,27 +24,28 @@ const pathToBreadcrumbMap: Record<string, string> = {
 };
 
 const getVendorDetails = (vendor: string, orgName: string, repoName: string) => {
+  const decodedOrgName = decodeGitOrgName(orgName);
 
   switch (vendor) {
     case 'BITBUCKET':
       return {
-        url: `https://bitbucket.org/${orgName}/${repoName}`,
+        url: `https://bitbucket.org/${decodedOrgName}/${repoName}`,
         icon: <BitBucketOutlined className="repo-action-icon git-icon" />,
       };
     case 'GITLAB':
       return {
-        url: `https://gitlab.com/${orgName}/${repoName}`,
+        url: `https://gitlab.com/${decodedOrgName}/${repoName}`,
         icon: <GitlabOutlined className="repo-action-icon git-icon" />,
       };
     case 'AZUREDEVOPS':
       return {
-        url: `https://dev.azure.com/${orgName}/_git/${repoName}`,
+        url: `https://dev.azure.com/${decodedOrgName}/_git/${repoName}`,
         icon: <AzureOutlined className="repo-action-icon git-icon" />,
       };
     case 'GITHUB':
     default:
       return {
-        url: `https://github.com/${orgName}/${repoName}`,
+        url: `https://github.com/${decodedOrgName}/${repoName}`,
         icon: <GithubOutlined className="repo-action-icon git-icon" />,
       };
   }
diff --git a/src/components/layouts/main/sider/SiderMenu/RepoNav.styles.ts b/src/components/layouts/main/sider/SiderMenu/RepoNav.styles.ts
new file mode 100644
index 00000000..47ca5535
--- /dev/null
+++ b/src/components/layouts/main/sider/SiderMenu/RepoNav.styles.ts
@@ -0,0 +1,98 @@
+import styled, { css } from 'styled-components';
+
+export const RepoSectionContainer = styled.div`
+  margin: 0 0 8px 0;
+  padding: 0;
+`;
+
+export const RepoHeader = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 6px;
+  margin: 0 10px 8px;
+  background-color: rgba(56, 189, 248, 0.1);
+  border-left: 3px solid #38BDF8;
+  overflow: hidden;
+`;
+
+export const RepoIcon = styled.div`
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #1f2937;
+  margin-right: 12px;
+  flex-shrink: 0;
+  
+  svg {
+    font-size: 16px;
+    color: #38BDF8;
+  }
+`;
+
+export const RepoInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+`;
+
+export const RepoName = styled.div`
+  font-weight: 500;
+  font-size: 13px;
+  color: white;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export const RepoOrg = styled.div`
+  font-size: 11px;
+  color: #94a3b8;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export const RepoNavContainer = styled.div`
+  margin: 0 10px;
+`;
+
+export const RepoNavItem = styled.div<{ isActive?: boolean }>`
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  color: #e2e8f0;
+  border-radius: 6px;
+  margin-bottom: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 13px;
+  height: 36px;
+  line-height: 20px;
+  
+  ${props => props.isActive && css`
+    background-color: rgba(56, 189, 248, 0.15);
+    font-weight: 500;
+    color: white;
+    
+    svg {
+      color: #38BDF8;
+    }
+    
+    &:hover {
+      background-color: rgba(56, 189, 248, 0.2);
+    }
+  `}
+  
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+  
+  svg {
+    font-size: 16px;
+    margin-right: 8px;
+  }
+`;
diff --git a/src/components/layouts/main/sider/SiderMenu/RepoNav.tsx b/src/components/layouts/main/sider/SiderMenu/RepoNav.tsx
new file mode 100644
index 00000000..e7051a3d
--- /dev/null
+++ b/src/components/layouts/main/sider/SiderMenu/RepoNav.tsx
@@ -0,0 +1,90 @@
+import React, { useMemo } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { 
+  AreaChartOutlined, 
+  FileTextOutlined,
+  SafetyOutlined,
+  GithubOutlined 
+} from '@ant-design/icons';
+import * as S from './RepoNav.styles';
+import { Badge, Tooltip } from 'antd';
+
+interface RepoNavProps {
+  vendor: string;
+  orgName: string;
+  repoName: string;
+}
+
+const RepoNav: React.FC<RepoNavProps> = ({ vendor, orgName, repoName }) => {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const currentPath = location.pathname;
+
+  // Define navigation items
+  const navItems = useMemo(() => [
+    {
+      key: 'analyze',
+      title: t('sidebar.analyze'),
+      icon: <AreaChartOutlined />,
+      url: `/repositories/${vendor}/${orgName}/${repoName}/analyze`,
+      badge: null
+    },
+    {
+      key: 'docufy',
+      title: t('sidebar.docufy'),
+      icon: <FileTextOutlined />,
+      url: `/repositories/${vendor}/${orgName}/${repoName}/docufy`,
+      badge: null
+    },
+    {
+      key: 'security',
+      title: t('sidebar.security'),
+      icon: <SafetyOutlined />,
+      url: `/repositories/${vendor}/${orgName}/${repoName}/security`,
+      badge: null
+    }
+  ], [t, vendor, orgName, repoName]);
+
+  return (
+    <S.RepoSectionContainer>
+      <S.RepoHeader>
+        <S.RepoIcon>
+          <GithubOutlined />
+        </S.RepoIcon>
+        <S.RepoInfo>
+          <S.RepoName>{repoName}</S.RepoName>
+          <S.RepoOrg>{orgName}</S.RepoOrg>
+        </S.RepoInfo>
+      </S.RepoHeader>
+      
+      <S.RepoNavContainer>
+        {navItems.map(item => {
+          const isActive = currentPath === item.url;
+          
+          return (
+            <Link key={item.key} to={item.url} style={{ textDecoration: 'none' }}>
+              <S.RepoNavItem isActive={isActive}>
+                {item.icon}
+                <span>{item.title}</span>
+                {item.badge && (
+                  <Tooltip title={item.badge.tooltip}>
+                    <Badge 
+                      count={item.badge.count} 
+                      style={{ 
+                        marginLeft: 'auto',
+                        backgroundColor: item.badge.color || '#ff4d4f'
+                      }} 
+                    />
+                  </Tooltip>
+                )}
+              </S.RepoNavItem>
+            </Link>
+          );
+        })}
+      </S.RepoNavContainer>
+    </S.RepoSectionContainer>
+  );
+};
+
+export default RepoNav;
diff --git a/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts b/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts
index 6375c7d9..13301a94 100644
--- a/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts
+++ b/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts
@@ -4,7 +4,7 @@ import { BaseMenu } from '@app/components/common/BaseMenu/BaseMenu';
 export const MainMenuWrapper = styled.div`
   flex: 1;
   overflow-y: auto;
-  padding-top: 12px;
+  padding-top: 8px;
   
   &::-webkit-scrollbar {
     width: 4px;
@@ -42,12 +42,13 @@ export const Menu = styled(BaseMenu)`
     width: 100%;
     display: block;
     color: #E2E8F0 !important;
-    font-weight: 500;
+    font-weight: 400;
+    font-size: 13px;
   }
 
   .ant-menu-item.ant-menu-item-selected {
     background-color: rgba(56, 189, 248, 0.15);
-    font-weight: 600;
+    font-weight: 500;
     color: #ffffff !important;
     position: relative;
     box-sizing: border-box;
@@ -86,19 +87,20 @@ export const Menu = styled(BaseMenu)`
   }
 
   .ant-menu-item {
-    border-radius: 8px;
+    border-radius: 6px;
     transition: all 0.3s ease;
     margin: 4px 10px;
-    padding: 0 14px !important;
-    height: 40px;
-    line-height: 40px;
+    padding: 0 12px !important;
+    height: 36px;
+    line-height: 36px;
     color: #E2E8F0 !important;
-    letter-spacing: 0.3px;
+    letter-spacing: 0.2px;
     text-align: left;
+    font-size: 13px;
     
     .anticon {
-      font-size: 18px;
-      margin-right: 12px;
+      font-size: 16px;
+      margin-right: 8px;
       color: #94A3B8;
       transition: all 0.2s ease;
     }
@@ -120,7 +122,7 @@ export const Menu = styled(BaseMenu)`
     
     // Reset unwanted padding from ant design
     &.ant-menu-item-selected {
-      padding: 0 14px !important;
+      padding: 0 12px !important;
     }
   }
 
@@ -136,10 +138,11 @@ export const Menu = styled(BaseMenu)`
       background: rgba(15, 23, 42, 0.6);
       margin: 2px 10px;
       border-radius: 6px;
-      padding: 0 14px !important;
+      padding: 0 12px !important;
+      font-size: 13px;
       
       .anticon {
-        font-size: 15px;
+        font-size: 14px;
         color: #94A3B8;
       }
 
@@ -157,8 +160,8 @@ export const SectionDivider = styled.div`
   .ant-divider {
     color: #64748B;
     font-size: 10px;
-    font-weight: 600;
-    letter-spacing: 0.8px;
+    font-weight: 500;
+    letter-spacing: 0.6px;
     text-transform: uppercase;
     margin: 6px 0;
     
@@ -171,7 +174,7 @@ export const SectionDivider = styled.div`
 
 export const SectionFooter = styled.div`
   margin-top: 12px;
-  padding: 10px;
+  padding: 8px;
   text-align: center;
   font-size: 11px;
   color: #64748B;
@@ -183,6 +186,6 @@ export const SectionFooter = styled.div`
     margin-left: 6px;
     color: #475569;
     font-size: 10px;
-    letter-spacing: 0.5px;
+    letter-spacing: 0.4px;
   }
 `;
diff --git a/src/components/layouts/main/sider/SiderMenu/SiderMenu.tsx b/src/components/layouts/main/sider/SiderMenu/SiderMenu.tsx
index 1363e1a9..38555030 100644
--- a/src/components/layouts/main/sider/SiderMenu/SiderMenu.tsx
+++ b/src/components/layouts/main/sider/SiderMenu/SiderMenu.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation, useParams } from 'react-router-dom';
 import * as S from './SiderMenu.styles';
 import { sidebarNavigation, SidebarNavigationItem } from '../sidebarNavigation';
 import { Divider } from 'antd';
 import { useAppSelector } from '@app/hooks/reduxHooks';
+import RepoNav from './RepoNav';
 
 interface SiderContentProps {
   setCollapsed: (isCollapsed: boolean) => void;
@@ -19,6 +20,7 @@ const sidebarNavFlat = sidebarNavigation.reduce(
 const SiderMenu: React.FC<SiderContentProps> = ({ setCollapsed }) => {
   const { t } = useTranslation();
   const location = useLocation();
+  const { vendor, orgName, repoName } = useParams();
   const user = useAppSelector((state) => state.user.user);
 
   const currentMenuItem = sidebarNavFlat.find(({ url }) => url === location.pathname);
@@ -33,6 +35,9 @@ const SiderMenu: React.FC<SiderContentProps> = ({ setCollapsed }) => {
   const appItems = sidebarNavigation.filter(item => item.section === 'app');
   const userItems = sidebarNavigation.filter(item => item.section === 'user');
 
+  // Check if we're in a repository context
+  const isRepoContext = Boolean(vendor && orgName && repoName);
+
   // Function to create menu items
   const createMenuItems = (navItems: SidebarNavigationItem[]) => {
     return navItems.map((nav) => {
@@ -58,6 +63,25 @@ const SiderMenu: React.FC<SiderContentProps> = ({ setCollapsed }) => {
   return (
     <>
       <S.MainMenuWrapper>
+        {/* Repository-specific navigation when in repo context */}
+        {isRepoContext && vendor && orgName && repoName && (
+          <>
+            <RepoNav 
+              vendor={vendor} 
+              orgName={orgName} 
+              repoName={repoName} 
+            />
+            <Divider 
+              style={{ 
+                margin: '4px 10px 12px', 
+                borderColor: 'rgba(255, 255, 255, 0.06)',
+                borderWidth: '0.5px' 
+              }} 
+            />
+          </>
+        )}
+        
+        {/* Main app navigation */}
         <S.Menu
           mode="inline"
           defaultSelectedKeys={defaultSelectedKeys}
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/PaymentPricing.styles.ts b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/PaymentPricing.styles.ts
index 254729dd..180c51c1 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/PaymentPricing.styles.ts
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/PaymentPricing.styles.ts
@@ -33,6 +33,24 @@ export const PaymentSwitcher = styled.div`
 
 export const PricingCard = styled(BaseCard)`
   background: ${({ theme }) => theme.priceBg};
+  transition: all 0.3s ease;
+  cursor: pointer;
+
+  &.selected-plan {
+    border: 2px solid ${({ theme }) => theme.primary6};
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transform: translateY(-2px);
+  }
+
+  &.active-subscription {
+    border: 2px solid ${({ theme }) => theme.success};
+    background: ${({ theme }) => theme.success}10;
+  }
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transform: translateY(-1px);
+  }
 
   .ant-card-body {
     padding: 1.5rem;
@@ -117,6 +135,28 @@ export const PricingCard = styled(BaseCard)`
       border-color: ${({ theme }) => theme.pricingTitle} !important;
       color: ${({ theme }) => theme.pricingTitle};
     }
+
+    button.selected-plan {
+      background-color: ${({ theme }) => theme.primary6};
+      color: white;
+      border-color: ${({ theme }) => theme.primary6} !important;
+    }
+
+    button.selected-plan:hover {
+      background-color: ${({ theme }) => theme.primary7};
+      border-color: ${({ theme }) => theme.primary7} !important;
+    }
+
+    button:disabled {
+      cursor: default !important;
+      opacity: 1;
+    }
+
+    button.active-plan:disabled {
+      background-color: transparent;
+      color: ${({ theme }) => theme.pricingTitle};
+      border-color: ${({ theme }) => theme.pricingTitle} !important;
+    }
   }
 `;
 
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/PaymentPricing.tsx b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/PaymentPricing.tsx
index cd3e3d6f..c7d2a1f5 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/PaymentPricing.tsx
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/PaymentPricing.tsx
@@ -16,6 +16,7 @@ import { Flex } from 'antd';
 import pricingData from './payment.json';
 import { PaymentPricingContent } from './paymentPricingContent/PaymentPricingContent';
 import { getPlanPrice, PlanTypes } from '@app/api/payment.api';
+import { useAppSelector } from '@app/hooks/reduxHooks';
 
 export const PaymentPricing = () => {
   const location = useLocation();
@@ -23,9 +24,11 @@ export const PaymentPricing = () => {
 
   const { t } = useTranslation();
   const { isTablet } = useResponsive();
+  const user = useAppSelector((state) => state.user?.user);
 
   const [currency, setCurrency] = useState(searchParams.get('currency') || 'INR');
   const [switchState, setSwithState] = useState(false);
+  const [selectedPlan, setSelectedPlan] = useState<string>('freemium-plan');
 
   const [exchangeRateUSDToINR, setExchangeRateUSDToINR] = useState(83);
 
@@ -81,6 +84,22 @@ export const PaymentPricing = () => {
     }
   }, []);
 
+  // Initialize selectedPlan based on user's current plan type
+  useEffect(() => {
+    if (user?.planType) {
+      const planMapping: { [key: string]: string } = {
+        'FREE': 'freemium-plan',
+        'FREEMIUM': 'freemium-plan',
+        'PREMIUM': 'basic-plan',
+        'PRO': 'pro-plan',
+        'ELITE': 'elite-plan'
+      };
+      
+      const mappedPlan = planMapping[user.planType.toUpperCase()] || 'freemium-plan';
+      setSelectedPlan(mappedPlan);
+    }
+  }, [user?.planType]);
+
   const content = (
     <BaseRow gutter={[24, 24]}>
       <BaseCol span={24}>
@@ -115,6 +134,8 @@ export const PaymentPricing = () => {
               setSwithState={setSwithState}
               currency={currency}
               exchangeRateUSDToINR={exchangeRateUSDToINR}
+              selectedPlan={selectedPlan}
+              setSelectedPlan={setSelectedPlan}
             />
           ))}
         </BaseRow>
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/paymentContext/PaymentContext.tsx b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/paymentContext/PaymentContext.tsx
index bf1deba9..28d0f0ce 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/paymentContext/PaymentContext.tsx
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/paymentContext/PaymentContext.tsx
@@ -21,6 +21,8 @@ export interface PaymentContextProps {
   privateFeature: string[];
   publicFeature: string[];
   additionalFeature: string[];
+  selectedPlan: string;
+  setSelectedPlan: (plan: string) => void;
 }
 
 const defaultPaymentContext: PaymentContextProps = {
@@ -31,7 +33,7 @@ const defaultPaymentContext: PaymentContextProps = {
   planName: '',
   getCurrencySymbol: (prev) => prev,
   currency: '',
-  convertPrices: (prev) => 0,
+  convertPrices: () => 0,
   priceAmount: '',
   priceID: '',
   switchState: false,
@@ -44,6 +46,8 @@ const defaultPaymentContext: PaymentContextProps = {
   privateFeature: [],
   publicFeature: [],
   additionalFeature: [],
+  selectedPlan: '',
+  setSelectedPlan: () => {},
 };
 
 export const PaymentContext = createContext<PaymentContextProps>(defaultPaymentContext);
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/paymentPricingContent/PaymentPricingContent.tsx b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/paymentPricingContent/PaymentPricingContent.tsx
index 22509b85..bffbfed5 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/paymentPricingContent/PaymentPricingContent.tsx
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/paymentPricingContent/PaymentPricingContent.tsx
@@ -6,6 +6,8 @@ import { PlanPricingCard } from './planPricingCard/PlanPricingCard';
 import { PlanCheckoutModal } from './planCheckoutModal/PlanCheckoutModal';
 import { PaymentContext } from '../paymentContext/PaymentContext';
 import { getCurrencySymbol } from '@app/utils/utils';
+import { cashfreeStandardCheckout } from '@app/api/cashfree.api';
+import { paypalStandardCheckout } from '@app/api/paypal.api';
 
 type ProductPayPerMonthType = {
   planAmountPerMonth: string;
@@ -30,6 +32,8 @@ type PaymentContentProps = {
   setSwithState: (prev: boolean) => void;
   currency: string;
   exchangeRateUSDToINR: number;
+  selectedPlan: string;
+  setSelectedPlan: (plan: string) => void;
 };
 
 export const PaymentPricingContent: React.FC<PaymentContentProps> = ({
@@ -44,6 +48,8 @@ export const PaymentPricingContent: React.FC<PaymentContentProps> = ({
   setSwithState,
   currency,
   exchangeRateUSDToINR,
+  selectedPlan,
+  setSelectedPlan,
 }) => {
   const [isCheckoutModelOpen, setIsCheckoutModalOpen] = useState<boolean>(false);
   const [isSubscriptionEnabled, setIsSubscriptionEnabled] = useState<boolean>(false);
@@ -70,17 +76,34 @@ export const PaymentPricingContent: React.FC<PaymentContentProps> = ({
   const priceID = switchState ? productPaymentPerYear.price_id_yearly : productPaymentPerMonth.price_id_monthly;
 
   const handlePlanClick = () => {
-    const openCheckoutModel = ['Premium', 'Pro'].indexOf(planName) >= 0;
-    setIsCheckoutModalOpen(openCheckoutModel);
+    if (currency === "INR") {
+      cashfreeStandardCheckout(priceID, checkedItems.join(","))
+    } else {
+      paypalStandardCheckout(priceID, checkedItems.join(","))
+    }
   };
 
-  const id = useAppSelector((state) => state.user?.user?.id);
+  const user = useAppSelector((state) => state.user?.user);
 
   useEffect(() => {
-    if (id) {
+    if (user?.planType) {
+      // Map the user's planType to the corresponding className
+      const planMapping: { [key: string]: string } = {
+        'FREE': 'freemium-plan',
+        'FREEMIUM': 'freemium-plan',
+        'PREMIUM': 'basic-plan',
+        'PRO': 'pro-plan',
+        'ELITE': 'elite-plan'
+      };
+      
+      const mappedPlan = planMapping[user.planType.toUpperCase()] || 'freemium-plan';
+      console.log('User plan type:', user.planType, 'Mapped to:', mappedPlan);
+      setSubscribedPlan(mappedPlan);
+    } else {
+      console.log('No user plan type found, defaulting to freemium-plan');
       setSubscribedPlan('freemium-plan');
     }
-  }, [id]);
+  }, [user?.planType]);
 
   useEffect(() => {
     const openCheckoutModel = planNameFromUrl === planName;
@@ -110,6 +133,8 @@ export const PaymentPricingContent: React.FC<PaymentContentProps> = ({
     privateFeature,
     publicFeature,
     additionalFeature,
+    selectedPlan,
+    setSelectedPlan,
   };
 
   return (
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/paymentPricingContent/planPricingCard/PlanPricingCard.tsx b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/paymentPricingContent/planPricingCard/PlanPricingCard.tsx
index 22c7fd94..c7d577e7 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/paymentPricingContent/planPricingCard/PlanPricingCard.tsx
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/paymentPricingContent/planPricingCard/PlanPricingCard.tsx
@@ -18,11 +18,43 @@ export const PlanPricingCard: React.FC = () => {
     privateFeature,
     publicFeature,
     additionalFeature,
+    selectedPlan,
+    setSelectedPlan,
   } = useContext(PaymentContext);
 
+  const handleCardClick = () => {
+    if (!isActiveSubscription) {
+      setSelectedPlan(className);
+    }
+  };
+
+  const handleButtonClick = (e: React.MouseEvent) => {
+    e.stopPropagation(); // Prevent card click event
+    if (isActiveSubscription) {
+      // Do nothing for active plan
+      return;
+    }
+    if (isSelected) {
+      // If selected, trigger purchase
+      handlePlanClick();
+    } else {
+      // If not selected, select the plan first
+      setSelectedPlan(className);
+    }
+  };
+
+  const isSelected = selectedPlan === className;
+  const isActiveSubscription = subscribedPlan === className;
+
   return (
-    <PricingCard>
-      <Title level={5}>{planName}</Title>
+    <PricingCard 
+      onClick={handleCardClick}
+      className={`${isSelected ? 'selected-plan' : ''} ${isActiveSubscription ? 'active-subscription' : ''}`}
+      style={{ cursor: isActiveSubscription ? 'default' : 'pointer' }}
+    >
+      <Title level={5}>
+        {planName}
+      </Title>
 
       <>
         {planName !== 'Elite' ? (
@@ -42,11 +74,15 @@ export const PlanPricingCard: React.FC = () => {
       <>
         {planName !== 'Elite' ? (
           <BaseButton
-            onClick={handlePlanClick}
-            className={`${className} ${subscribedPlan === className ? 'active-plan' : ''}`}
-            style={{ marginTop: '.75rem' }}
+            onClick={handleButtonClick}
+            className={`${className} ${isActiveSubscription ? 'active-plan' : ''} ${isSelected ? 'selected-plan' : ''}`}
+            style={{ 
+              marginTop: '.75rem',
+              cursor: isActiveSubscription ? 'default' : 'pointer'
+            }}
+            disabled={isActiveSubscription}
           >
-            {subscribedPlan === className ? 'Active Plan' : 'Checkout'}
+            {isActiveSubscription ? 'Active Plan' : isSelected ? 'Buy' : 'Select Plan'}
           </BaseButton>
         ) : null}
       </>
diff --git a/src/components/router/AppRouter.tsx b/src/components/router/AppRouter.tsx
index 233359b9..87f29841 100644
--- a/src/components/router/AppRouter.tsx
+++ b/src/components/router/AppRouter.tsx
@@ -23,6 +23,9 @@ import GoogleOauthPage from '@app/pages/AuthPages/GoogleOAuthPage/GoogleOAuthPag
 import GithubOAuthPage from '@app/pages/AuthPages/GithubOAuthPage/GithubOAuthPage';
 import DocGenContentPage from '@app/pages/DashboardPages/DocGenDashboardPage/DocGenContentPage/DocGenContentPage';
 import DocGenOrgPage from '@app/pages/DashboardPages/DocGenDashboardPage/DocGenOrgPage/DocGenOrgPage';
+import AnalyzePage from '@app/pages/DashboardPages/DocGenDashboardPage/RepoPages/AnalyzePage';
+import DocufyPage from '@app/pages/DashboardPages/DocGenDashboardPage/RepoPages/DocufyPage';
+import SecurityPage from '@app/pages/DashboardPages/DocGenDashboardPage/RepoPages/SecurityPage';
 import { LocalHostLogin } from '../auth/LocalHostLogin/LocalHostLogin';
 import { trackPageView } from '@app/config/mixpanel';
 import { trackGAPageView } from '@app/config/ga';
@@ -129,6 +132,33 @@ export const AppRouter: React.FC = () => {
               }
             />
 
+            <Route
+              path={`${DOC_GEN_DASHBOARD_PATH}/:vendor/:orgName/:repoName/analyze`}
+              element={
+                <RequireAuth>
+                  <AnalyzePage />
+                </RequireAuth>
+              }
+            />
+
+            <Route
+              path={`${DOC_GEN_DASHBOARD_PATH}/:vendor/:orgName/:repoName/docufy`}
+              element={
+                <RequireAuth>
+                  <DocufyPage />
+                </RequireAuth>
+              }
+            />
+
+            <Route
+              path={`${DOC_GEN_DASHBOARD_PATH}/:vendor/:orgName/:repoName/security`}
+              element={
+                <RequireAuth>
+                  <SecurityPage />
+                </RequireAuth>
+              }
+            />
+
             <Route
               path={`${DOC_GEN_DASHBOARD_REPO_PATH}lro`}
               element={
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index edbe704d..67ef3255 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -442,7 +442,11 @@
     "profilePage": "My Profile",
     "title": "Penify",
     "upgrade": "Upgrade Plan",
-    "userSection": "My Account"
+    "userSection": "My Account",
+    "repoSection": "Repository Navigation",
+    "analyze": "Repository Analysis",
+    "docufy": "Documentation",
+    "security": "Security Insights"
   },
   "time": {
     "annually": "Annually",
diff --git a/src/pages/DashboardPages/DocGenDashboardPage/DocGenContentPage/DocGenContentPage.tsx b/src/pages/DashboardPages/DocGenDashboardPage/DocGenContentPage/DocGenContentPage.tsx
index 07747cdc..4032f1a4 100644
--- a/src/pages/DashboardPages/DocGenDashboardPage/DocGenContentPage/DocGenContentPage.tsx
+++ b/src/pages/DashboardPages/DocGenDashboardPage/DocGenContentPage/DocGenContentPage.tsx
@@ -77,7 +77,7 @@ const DocGenContentPage: React.FC = () => {
       {showAlert && user.countRepoGen > 4 && (
         <Alert
           message="Great News! 🎉"
-          description={`You have been awarded with "${user.countRepoGen}" Full Repository Documentation credits. You can continue to generate documentation for any repositories of your choice. Keep exploring and enhancing your codebase with our tools!`}
+          description={`You have been awarded with "${user.countRepoGen}" Full Repository Documentation credits. You can continue to generate documentation for any repositories of your choice.`}
           type="success"
           showIcon
           closable
diff --git a/src/pages/DashboardPages/DocGenDashboardPage/DocGenContentPage/components/RepoHeader.tsx b/src/pages/DashboardPages/DocGenDashboardPage/DocGenContentPage/components/RepoHeader.tsx
index 3bee6b29..c55e7c3f 100644
--- a/src/pages/DashboardPages/DocGenDashboardPage/DocGenContentPage/components/RepoHeader.tsx
+++ b/src/pages/DashboardPages/DocGenDashboardPage/DocGenContentPage/components/RepoHeader.tsx
@@ -15,6 +15,7 @@ import styled from 'styled-components';
 import { GitAppUsageType, PlanType } from '@app/api/git.api';
 import { useAppSelector } from '@app/hooks/reduxHooks';
 import { useTranslation } from 'react-i18next';
+import { decodeGitOrgName } from '@app/utils/gitNameEncoding';
 
 const { Header } = Layout;
 const { Title, Text } = Typography;
@@ -120,7 +121,7 @@ export const RepoHeader: React.FC<RepoHeaderProps> = ({
             
             <div>
               <RepoTitle level={3}>
-                {orgName}/{repoName}
+                {decodeGitOrgName(orgName)}/{repoName}
                 <PlanTag>{planName}</PlanTag>
                 {repoDetails?.isPrivate ? (
                   <StyledTag>Private</StyledTag>
@@ -197,14 +198,14 @@ export const RepoHeader: React.FC<RepoHeaderProps> = ({
         <Col xs={24} md={8} style={{ textAlign: 'right' }}>
           <Space direction="vertical" style={{ width: '100%' }} align="end">
             <Space wrap>
-              <ActionButton 
-                type="default"
-                icon={<GithubOutlined />}
-                href={`https://github.com/${orgName}/${repoName}`}
-                target="_blank"
-              >
-                View on GitHub
-              </ActionButton>
+                <ActionButton 
+                  type="default"
+                  icon={<GithubOutlined />}
+                  href={`https://github.com/${decodeGitOrgName(orgName)}/${repoName}`}
+                  target="_blank"
+                >
+                  View on GitHub
+                </ActionButton>
               
               {repoDetails?.gitAppMetaData?.siteUrl && (
                 <ActionButton 
@@ -220,7 +221,7 @@ export const RepoHeader: React.FC<RepoHeaderProps> = ({
             
             <Button 
               type="link" 
-              icon={<AzureOutlined />}
+              icon={<CloudDownloadOutlined />}
               style={{ marginTop: 8 }}
             >
               Export Analysis Report
diff --git a/src/pages/DashboardPages/DocGenDashboardPage/RepoPages/AnalyzePage.tsx b/src/pages/DashboardPages/DocGenDashboardPage/RepoPages/AnalyzePage.tsx
new file mode 100644
index 00000000..732ba5f5
--- /dev/null
+++ b/src/pages/DashboardPages/DocGenDashboardPage/RepoPages/AnalyzePage.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
+import { DashboardWrapper } from '@app/components/dashboard/DashboardWrapper';
+import { AreaChartOutlined, CodeOutlined, ForkOutlined, StarOutlined } from '@ant-design/icons';
+import { Card, Col, Row, Statistic, Typography } from 'antd';
+
+const { Text, Title } = Typography;
+
+const AnalyzePage: React.FC = () => {
+  const { t } = useTranslation();
+  const { orgName, repoName } = useParams();
+
+  return (
+    <>
+      <PageTitle>{t('sidebar.analyze')}</PageTitle>
+      <DashboardWrapper>
+        <Row gutter={[16, 16]}>
+          <Col xs={24}>
+            <Card bordered={false}>
+              <Title level={4} style={{ margin: 0, display: 'flex', alignItems: 'center' }}>
+                <AreaChartOutlined style={{ marginRight: 8, color: '#1890ff' }} />
+                Repository Analysis: {orgName}/{repoName}
+              </Title>
+              <Text type="secondary">
+                Comprehensive code metrics and performance insights for your repository
+              </Text>
+            </Card>
+          </Col>
+          
+          <Col xs={24} md={8}>
+            <Card bordered={false}>
+              <Statistic 
+                title="Code Quality Score" 
+                value={87} 
+                suffix="/100" 
+                valueStyle={{ color: '#3f8600' }}
+              />
+              <Text type="secondary">Based on best practices and industry standards</Text>
+            </Card>
+          </Col>
+          
+          <Col xs={24} md={8}>
+            <Card bordered={false}>
+              <Statistic 
+                title="Documentation Coverage" 
+                value={64} 
+                suffix="%" 
+                valueStyle={{ color: '#faad14' }}
+              />
+              <Text type="secondary">Percentage of code with proper documentation</Text>
+            </Card>
+          </Col>
+          
+          <Col xs={24} md={8}>
+            <Card bordered={false}>
+              <Statistic 
+                title="Code Complexity" 
+                value="Medium" 
+                valueStyle={{ color: '#1890ff' }}
+                prefix={<CodeOutlined />}
+              />
+              <Text type="secondary">Overall complexity rating of the codebase</Text>
+            </Card>
+          </Col>
+          
+          <Col xs={24}>
+            <Card 
+              title="Repository Metrics" 
+              bordered={false}
+            >
+              <Row gutter={[32, 16]}>
+                <Col xs={12} md={6}>
+                  <Statistic 
+                    title="Contributors" 
+                    value={12} 
+                    prefix={<svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" style={{ marginRight: 4 }}>
+                      <path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path>
+                    </svg>} 
+                  />
+                </Col>
+                <Col xs={12} md={6}>
+                  <Statistic 
+                    title="Files" 
+                    value={432} 
+                    prefix={<svg viewBox="64 64 896 896" data-icon="file" width="1em" height="1em" fill="currentColor" style={{ marginRight: 4 }}>
+                      <path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z"></path>
+                    </svg>} 
+                  />
+                </Col>
+                <Col xs={12} md={6}>
+                  <Statistic 
+                    title="Stars" 
+                    value={54} 
+                    prefix={<StarOutlined />} 
+                  />
+                </Col>
+                <Col xs={12} md={6}>
+                  <Statistic 
+                    title="Forks" 
+                    value={18} 
+                    prefix={<ForkOutlined />} 
+                  />
+                </Col>
+              </Row>
+            </Card>
+          </Col>
+        </Row>
+      </DashboardWrapper>
+    </>
+  );
+};
+
+export default AnalyzePage;
diff --git a/src/pages/DashboardPages/DocGenDashboardPage/RepoPages/DocufyPage.tsx b/src/pages/DashboardPages/DocGenDashboardPage/RepoPages/DocufyPage.tsx
new file mode 100644
index 00000000..04e7dc91
--- /dev/null
+++ b/src/pages/DashboardPages/DocGenDashboardPage/RepoPages/DocufyPage.tsx
@@ -0,0 +1,160 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
+import { DashboardWrapper } from '@app/components/dashboard/DashboardWrapper';
+import { 
+  BookOutlined, 
+  FileTextOutlined, 
+  FileMarkdownOutlined, 
+  ApiOutlined, 
+  SyncOutlined,
+  RocketOutlined
+} from '@ant-design/icons';
+import { Button, Card, Col, Progress, Row, Space, Tabs, Typography } from 'antd';
+
+const { Text, Title, Paragraph } = Typography;
+const { TabPane } = Tabs;
+
+const DocufyPage: React.FC = () => {
+  const { t } = useTranslation();
+  const { orgName, repoName } = useParams();
+
+  return (
+    <>
+      <PageTitle>{t('sidebar.docufy')}</PageTitle>
+      <DashboardWrapper>
+        <Row gutter={[16, 16]}>
+          <Col xs={24}>
+            <Card bordered={false}>
+              <Title level={4} style={{ margin: 0, display: 'flex', alignItems: 'center' }}>
+                <FileTextOutlined style={{ marginRight: 8, color: '#1890ff' }} />
+                Documentation Tools: {orgName}/{repoName}
+              </Title>
+              <Text type="secondary">
+                Generate comprehensive documentation and keep it in sync with your code
+              </Text>
+            </Card>
+          </Col>
+          
+          <Col xs={24}>
+            <Card bordered={false}>
+              <Tabs defaultActiveKey="overview" type="card">
+                <TabPane 
+                  tab={
+                    <span>
+                      <BookOutlined />
+                      Overview
+                    </span>
+                  } 
+                  key="overview"
+                >
+                  <Row gutter={[16, 16]}>
+                    <Col xs={24} md={16}>
+                      <Card 
+                        title={
+                          <Space>
+                            <RocketOutlined />
+                            Documentation Status
+                          </Space>
+                        }
+                        bordered={false}
+                        style={{ height: '100%' }}
+                      >
+                        <div style={{ marginBottom: 24 }}>
+                          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
+                            <Text>Overall Documentation Coverage</Text>
+                            <Text strong>62%</Text>
+                          </div>
+                          <Progress percent={62} status="active" strokeColor="#1890ff" />
+                        </div>
+                        
+                        <div style={{ marginBottom: 24 }}>
+                          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
+                            <Text>API Documentation</Text>
+                            <Text strong>78%</Text>
+                          </div>
+                          <Progress percent={78} status="active" strokeColor="#52c41a" />
+                        </div>
+                        
+                        <div style={{ marginBottom: 24 }}>
+                          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
+                            <Text>README Quality</Text>
+                            <Text strong>85%</Text>
+                          </div>
+                          <Progress percent={85} status="active" strokeColor="#722ed1" />
+                        </div>
+                        
+                        <div>
+                          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
+                            <Text>User Guides</Text>
+                            <Text strong>45%</Text>
+                          </div>
+                          <Progress percent={45} status="active" strokeColor="#faad14" />
+                        </div>
+                      </Card>
+                    </Col>
+                    
+                    <Col xs={24} md={8}>
+                      <Card 
+                        title={
+                          <Space>
+                            <SyncOutlined />
+                            Documentation Actions
+                          </Space>
+                        }
+                        bordered={false}
+                        style={{ height: '100%' }}
+                      >
+                        <Space direction="vertical" style={{ width: '100%' }}>
+                          <Button type="primary" icon={<FileTextOutlined />} block>
+                            Generate Full Documentation
+                          </Button>
+                          <Button icon={<ApiOutlined />} block>
+                            Update API Docs
+                          </Button>
+                          <Button icon={<FileMarkdownOutlined />} block>
+                            Improve README
+                          </Button>
+                          <Button icon={<SyncOutlined />} block>
+                            Sync Documentation
+                          </Button>
+                        </Space>
+                      </Card>
+                    </Col>
+                  </Row>
+                </TabPane>
+                
+                <TabPane
+                  tab={
+                    <span>
+                      <ApiOutlined />
+                      API Documentation
+                    </span>
+                  }
+                  key="api"
+                >
+                  <Paragraph>API documentation content will appear here.</Paragraph>
+                </TabPane>
+                
+                <TabPane
+                  tab={
+                    <span>
+                      <FileMarkdownOutlined />
+                      Markdown Docs
+                    </span>
+                  }
+                  key="markdown"
+                >
+                  <Paragraph>Markdown documentation content will appear here.</Paragraph>
+                </TabPane>
+              </Tabs>
+            </Card>
+          </Col>
+        </Row>
+      </DashboardWrapper>
+    </>
+  );
+};
+
+export default DocufyPage;
diff --git a/src/pages/DashboardPages/DocGenDashboardPage/RepoPages/SecurityPage.tsx b/src/pages/DashboardPages/DocGenDashboardPage/RepoPages/SecurityPage.tsx
new file mode 100644
index 00000000..2e12353c
--- /dev/null
+++ b/src/pages/DashboardPages/DocGenDashboardPage/RepoPages/SecurityPage.tsx
@@ -0,0 +1,252 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
+import { DashboardWrapper } from '@app/components/dashboard/DashboardWrapper';
+import { 
+  SafetyOutlined,
+  WarningOutlined,
+  LockOutlined,
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  ExclamationCircleOutlined,
+  InfoCircleOutlined
+} from '@ant-design/icons';
+import { Badge, Button, Card, Col, List, Row, Tag, Typography } from 'antd';
+
+const { Text, Title, Paragraph } = Typography;
+
+// Mock security vulnerabilities data
+const vulnerabilitiesData = [
+  {
+    id: 1,
+    title: 'CVE-2023-44487 in axios@0.21.1',
+    severity: 'high',
+    path: 'package.json',
+    description: 'Axios before 1.6.0 allows attackers to cause a denial of service via a crafted HTTP/2 stream cancelation.',
+    status: 'open'
+  },
+  {
+    id: 2,
+    title: 'SQL Injection Vulnerability',
+    severity: 'critical',
+    path: 'src/api/user.api.ts',
+    description: 'Potential SQL injection vulnerability in user input handling.',
+    status: 'open'
+  },
+  {
+    id: 3,
+    title: 'Cross-Site Scripting (XSS)',
+    severity: 'medium',
+    path: 'src/components/common/UserInput.tsx',
+    description: 'Unvalidated user input could lead to XSS attacks.',
+    status: 'fixed'
+  },
+  {
+    id: 4,
+    title: 'Authentication Bypass',
+    severity: 'low',
+    path: 'src/services/auth.service.ts',
+    description: 'Edge case in authentication logic could allow bypassing under specific conditions.',
+    status: 'open'
+  }
+];
+
+// Helper function for severity colors and icons
+const getSeverityProps = (severity: string) => {
+  switch (severity.toLowerCase()) {
+    case 'critical':
+      return { color: '#ff4d4f', icon: <CloseCircleOutlined /> };
+    case 'high':
+      return { color: '#fa8c16', icon: <ExclamationCircleOutlined /> };
+    case 'medium':
+      return { color: '#faad14', icon: <WarningOutlined /> };
+    case 'low':
+      return { color: '#52c41a', icon: <InfoCircleOutlined /> };
+    default:
+      return { color: '#1890ff', icon: <InfoCircleOutlined /> };
+  }
+};
+
+const SecurityPage: React.FC = () => {
+  const { t } = useTranslation();
+  const { orgName, repoName } = useParams();
+
+  return (
+    <>
+      <PageTitle>{t('sidebar.security')}</PageTitle>
+      <DashboardWrapper>
+        <Row gutter={[16, 16]}>
+          <Col xs={24}>
+            <Card bordered={false}>
+              <Title level={4} style={{ margin: 0, display: 'flex', alignItems: 'center' }}>
+                <SafetyOutlined style={{ marginRight: 8, color: '#1890ff' }} />
+                Security Insights: {orgName}/{repoName}
+              </Title>
+              <Text type="secondary">
+                Comprehensive security analysis and vulnerability detection
+              </Text>
+            </Card>
+          </Col>
+          
+          <Col xs={24} lg={8}>
+            <Card 
+              title={
+                <span>
+                  <SafetyOutlined style={{ marginRight: 8 }} />
+                  Security Score
+                </span>
+              } 
+              bordered={false}
+            >
+              <div style={{ textAlign: 'center', padding: '20px 0' }}>
+                <div 
+                  style={{ 
+                    width: 120, 
+                    height: 120, 
+                    borderRadius: 60, 
+                    background: '#f6ffed', 
+                    border: '8px solid #52c41a', 
+                    margin: '0 auto 20px', 
+                    display: 'flex', 
+                    alignItems: 'center', 
+                    justifyContent: 'center' 
+                  }}
+                >
+                  <Title level={2} style={{ margin: 0, color: '#52c41a' }}>76%</Title>
+                </div>
+                <Paragraph>
+                  Your repository has a <Text strong>good</Text> security score, 
+                  but there are some issues that should be addressed.
+                </Paragraph>
+                <Button type="primary" icon={<SafetyOutlined />}>
+                  View Security Report
+                </Button>
+              </div>
+            </Card>
+          </Col>
+          
+          <Col xs={24} lg={16}>
+            <Card
+              title={
+                <span>
+                  <WarningOutlined style={{ marginRight: 8 }} />
+                  Vulnerabilities Summary
+                </span>
+              }
+              bordered={false}
+              extra={
+                <Button type="text" icon={<LockOutlined />}>
+                  Run Security Scan
+                </Button>
+              }
+            >
+              <Row gutter={[16, 16]}>
+                <Col xs={12} sm={6}>
+                  <Card bordered={false} style={{ textAlign: 'center', background: '#fff2f0' }}>
+                    <Title level={2} style={{ color: '#ff4d4f', margin: 0 }}>1</Title>
+                    <Text type="danger">Critical</Text>
+                  </Card>
+                </Col>
+                <Col xs={12} sm={6}>
+                  <Card bordered={false} style={{ textAlign: 'center', background: '#fff7e6' }}>
+                    <Title level={2} style={{ color: '#fa8c16', margin: 0 }}>1</Title>
+                    <Text type="warning">High</Text>
+                  </Card>
+                </Col>
+                <Col xs={12} sm={6}>
+                  <Card bordered={false} style={{ textAlign: 'center', background: '#fffbe6' }}>
+                    <Title level={2} style={{ color: '#faad14', margin: 0 }}>1</Title>
+                    <Text>Medium</Text>
+                  </Card>
+                </Col>
+                <Col xs={12} sm={6}>
+                  <Card bordered={false} style={{ textAlign: 'center', background: '#f6ffed' }}>
+                    <Title level={2} style={{ color: '#52c41a', margin: 0 }}>1</Title>
+                    <Text type="success">Low</Text>
+                  </Card>
+                </Col>
+              </Row>
+            </Card>
+          </Col>
+          
+          <Col xs={24}>
+            <Card
+              title={
+                <span>
+                  <WarningOutlined style={{ marginRight: 8 }} />
+                  Security Vulnerabilities
+                </span>
+              }
+              bordered={false}
+            >
+              <List
+                itemLayout="horizontal"
+                dataSource={vulnerabilitiesData}
+                renderItem={item => {
+                  const severityProps = getSeverityProps(item.severity);
+                  
+                  return (
+                    <List.Item
+                      actions={[
+                        <Button key="view" type="link">View Details</Button>,
+                        item.status === 'open' ? 
+                          <Button key="fix" type="primary" ghost>Fix Issue</Button> :
+                          <Button key="fixed" type="text" icon={<CheckCircleOutlined />} disabled>Fixed</Button>
+                      ]}
+                    >
+                      <List.Item.Meta
+                        avatar={
+                          <Badge 
+                            count={severityProps.icon} 
+                            style={{ 
+                              backgroundColor: severityProps.color,
+                              width: 22,
+                              height: 22,
+                              borderRadius: '50%',
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                            }} 
+                          />
+                        }
+                        title={
+                          <div style={{ display: 'flex', alignItems: 'center' }}>
+                            <span>{item.title}</span>
+                            <Tag 
+                              color={severityProps.color}
+                              style={{ marginLeft: 8, textTransform: 'capitalize' }}
+                            >
+                              {item.severity}
+                            </Tag>
+                            {item.status === 'fixed' && (
+                              <Tag color="green" style={{ marginLeft: 8 }}>
+                                Fixed
+                              </Tag>
+                            )}
+                          </div>
+                        }
+                        description={
+                          <div>
+                            <Text type="secondary" style={{ marginRight: 16 }}>
+                              <code>{item.path}</code>
+                            </Text>
+                            <Paragraph ellipsis={{ rows: 2 }} style={{ marginTop: 4 }}>
+                              {item.description}
+                            </Paragraph>
+                          </div>
+                        }
+                      />
+                    </List.Item>
+                  );
+                }}
+              />
+            </Card>
+          </Col>
+        </Row>
+      </DashboardWrapper>
+    </>
+  );
+};
+
+export default SecurityPage;
diff --git a/src/pages/DashboardPages/JobsPage/JobsPage.tsx b/src/pages/DashboardPages/JobsPage/JobsPage.tsx
index a890f113..44b85619 100644
--- a/src/pages/DashboardPages/JobsPage/JobsPage.tsx
+++ b/src/pages/DashboardPages/JobsPage/JobsPage.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
+// import { useTranslation } from 'react-i18next';
 import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
 import { DashboardWrapper } from '@app/components/dashboard/DashboardWrapper';
 import { AllJobsList } from '@app/components/jobs/AllJobsList/AllJobsList';
 
 const JobsPage: React.FC = () => {
-  const { t } = useTranslation();
+  // const { t } = useTranslation();
 
   return (
     <>
diff --git a/src/utils/gitNameEncoding.ts b/src/utils/gitNameEncoding.ts
new file mode 100644
index 00000000..e42357b7
--- /dev/null
+++ b/src/utils/gitNameEncoding.ts
@@ -0,0 +1,2 @@
+export const decodeGitOrgName = (value: string): string => value.replace(/~~/g, '/');
+