diff --git a/frontend/__tests__/a11y/components/ContributionHeatmap.a11y.test.tsx b/frontend/__tests__/a11y/components/ContributionHeatmap.a11y.test.tsx
index 2ee9d3adec..84620e7d00 100644
--- a/frontend/__tests__/a11y/components/ContributionHeatmap.a11y.test.tsx
+++ b/frontend/__tests__/a11y/components/ContributionHeatmap.a11y.test.tsx
@@ -78,7 +78,7 @@ describe.each([
   it('should not have any accessibility violations', async () => {
     const { container } = render(<ContributionHeatmap {...defaultProps} />)
 
-    await screen.findByTestId('mock-heatmap-chart')
+    await screen.findAllByTestId('mock-heatmap-chart')
 
     const results = await axe(container)
 
diff --git a/frontend/__tests__/a11y/components/RepositoryCard.a11y.test.tsx b/frontend/__tests__/a11y/components/RepositoryCard.a11y.test.tsx
index 427e07caaa..238051e381 100644
--- a/frontend/__tests__/a11y/components/RepositoryCard.a11y.test.tsx
+++ b/frontend/__tests__/a11y/components/RepositoryCard.a11y.test.tsx
@@ -47,7 +47,7 @@ describe.each([
   })
 
   it('should not have any accessibility violations when expanded', async () => {
-    const repositories = Array.from({ length: 6 }, (_, i) => createMockRepository(i))
+    const repositories = Array.from({ length: 7 }, (_, i) => createMockRepository(i))
     const { container } = render(<RepositoryCard repositories={repositories} />)
 
     const showMoreButton = screen.getByRole('button', { name: /show more/i })
diff --git a/frontend/__tests__/unit/components/ContributionHeatmap.test.tsx b/frontend/__tests__/unit/components/ContributionHeatmap.test.tsx
index 7a55210905..8eebc45794 100644
--- a/frontend/__tests__/unit/components/ContributionHeatmap.test.tsx
+++ b/frontend/__tests__/unit/components/ContributionHeatmap.test.tsx
@@ -85,7 +85,9 @@ describe('ContributionHeatmap', () => {
   describe('Rendering & Props', () => {
     it('renders with minimal and all optional props', async () => {
       const { rerender } = renderWithTheme(<ContributionHeatmap {...defaultProps} />)
-      await waitFor(() => expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument())
+      await waitFor(() =>
+        expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
+      )
       expect(screen.queryByRole('heading')).not.toBeInTheDocument()
 
       rerender(
@@ -99,16 +101,16 @@ describe('ContributionHeatmap', () => {
     it('renders all 7 day series and correct chart type', () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} />)
       ;['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].forEach((day) =>
-        expect(screen.getByTestId(`series-${day}`)).toBeInTheDocument()
+        expect(screen.getAllByTestId(`series-${day}`)[0]).toBeInTheDocument()
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toHaveAttribute('data-type', 'heatmap')
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toHaveAttribute('data-type', 'heatmap')
     })
 
     it('applies custom unit and handles undefined title', () => {
       renderWithTheme(
         <ContributionHeatmap {...defaultProps} unit="pull request" title={undefined} />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
       expect(screen.queryByRole('heading')).not.toBeInTheDocument()
     })
   })
@@ -124,7 +126,7 @@ describe('ContributionHeatmap', () => {
         const { unmount } = renderWithTheme(
           <ContributionHeatmap {...defaultProps} contributionData={data} />
         )
-        expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+        expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
         unmount()
       })
     })
@@ -139,7 +141,7 @@ describe('ContributionHeatmap', () => {
         const { unmount } = renderWithTheme(
           <ContributionHeatmap contributionData={data} startDate={start} endDate={end} />
         )
-        expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+        expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
         unmount()
       })
     })
@@ -151,7 +153,7 @@ describe('ContributionHeatmap', () => {
         endDate: '2024-01-31',
       }
       renderWithTheme(<ContributionHeatmap {...props} />)
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles large datasets (365 days)', () => {
@@ -168,29 +170,35 @@ describe('ContributionHeatmap', () => {
           endDate="2024-12-31"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles missing startDate by using default dates', () => {
       renderWithTheme(
         <ContributionHeatmap contributionData={mockData} startDate="" endDate="2024-01-31" />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
       // Should render with default date range (1 year)
-      expect(screen.getByTestId('mock-heatmap-chart')).toHaveAttribute('data-series-length', '7')
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toHaveAttribute(
+        'data-series-length',
+        '7'
+      )
     })
 
     it('handles missing endDate by using default dates', () => {
       renderWithTheme(
         <ContributionHeatmap contributionData={mockData} startDate="2024-01-01" endDate="" />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
-      expect(screen.getByTestId('mock-heatmap-chart')).toHaveAttribute('data-series-length', '7')
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toHaveAttribute(
+        'data-series-length',
+        '7'
+      )
     })
 
     it('handles both missing startDate and endDate', () => {
       renderWithTheme(<ContributionHeatmap contributionData={mockData} startDate="" endDate="" />)
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles invalid startDate by using default dates', () => {
@@ -201,7 +209,7 @@ describe('ContributionHeatmap', () => {
           endDate="2024-01-31"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles invalid endDate by using default dates', () => {
@@ -212,7 +220,7 @@ describe('ContributionHeatmap', () => {
           endDate="not-a-date"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles both invalid startDate and endDate', () => {
@@ -223,7 +231,7 @@ describe('ContributionHeatmap', () => {
           endDate="also-garbage"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles swapped dates (startDate > endDate) by swapping them', () => {
@@ -234,8 +242,11 @@ describe('ContributionHeatmap', () => {
           endDate="2024-01-01"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
-      expect(screen.getByTestId('mock-heatmap-chart')).toHaveAttribute('data-series-length', '7')
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toHaveAttribute(
+        'data-series-length',
+        '7'
+      )
     })
 
     it('handles startDate after endDate and swaps them correctly', () => {
@@ -246,7 +257,7 @@ describe('ContributionHeatmap', () => {
       renderWithTheme(
         <ContributionHeatmap contributionData={data} startDate="2024-02-01" endDate="2024-01-01" />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
   })
 
@@ -299,7 +310,7 @@ describe('ContributionHeatmap', () => {
   describe('Chart Configuration & Performance', () => {
     it('sets correct dimensions and series count', () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} />)
-      const chart = screen.getByTestId('mock-heatmap-chart')
+      const chart = screen.getAllByTestId('mock-heatmap-chart')[0]
       expect(chart).toHaveAttribute('data-height', '195')
       expect(chart).toHaveAttribute('data-series-length', '7')
     })
@@ -316,24 +327,26 @@ describe('ContributionHeatmap', () => {
           <ContributionHeatmap {...newProps} />
         </ThemeProvider>
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles dynamic import with SSR disabled', async () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} />)
-      await waitFor(() => expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument())
+      await waitFor(() =>
+        expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
+      )
     })
   })
 
   describe('Tooltip Behavior', () => {
     it('generates correct tooltip with date formatting', () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} />)
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles singular and plural unit labels in tooltip', () => {
       const { rerender } = renderWithTheme(<ContributionHeatmap {...defaultProps} unit="commit" />)
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
 
       const singleData = { '2024-01-01': 1 }
       rerender(
@@ -346,26 +359,26 @@ describe('ContributionHeatmap', () => {
           />
         </ThemeProvider>
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('tooltip respects theme colors', () => {
       const { rerender } = renderWithTheme(<ContributionHeatmap {...defaultProps} />, 'light')
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
       ;(useTheme as jest.Mock).mockReturnValue({ theme: 'dark', setTheme: jest.fn() })
       rerender(
         <ThemeProvider attribute="class">
           <ContributionHeatmap {...defaultProps} />
         </ThemeProvider>
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles missing data in tooltip gracefully', () => {
       const { container } = renderWithTheme(
         <ContributionHeatmap contributionData={{}} startDate="2024-01-01" endDate="2024-01-31" />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
 
       const styleTag = container.querySelector('style')
       expect(styleTag).toBeInTheDocument()
@@ -381,7 +394,7 @@ describe('ContributionHeatmap', () => {
       renderWithTheme(
         <ContributionHeatmap contributionData={data} startDate="2024-01-01" endDate="2024-01-14" />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles week transitions correctly', () => {
@@ -392,7 +405,7 @@ describe('ContributionHeatmap', () => {
       renderWithTheme(
         <ContributionHeatmap contributionData={data} startDate="2024-01-07" endDate="2024-01-14" />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
   })
 
@@ -412,7 +425,7 @@ describe('ContributionHeatmap', () => {
           endDate="2024-01-31"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles boundary values in color ranges', () => {
@@ -434,7 +447,7 @@ describe('ContributionHeatmap', () => {
           endDate="2024-01-31"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
   })
 
@@ -452,7 +465,7 @@ describe('ContributionHeatmap', () => {
           endDate="2024-03-01"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles year boundaries correctly', () => {
@@ -469,7 +482,7 @@ describe('ContributionHeatmap', () => {
           endDate="2024-01-02"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles dates in reverse chronological order in data object', () => {
@@ -486,7 +499,7 @@ describe('ContributionHeatmap', () => {
           endDate="2024-01-31"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
   })
 
@@ -503,7 +516,7 @@ describe('ContributionHeatmap', () => {
           endDate="2024-01-31"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles floating point contribution values', () => {
@@ -518,7 +531,7 @@ describe('ContributionHeatmap', () => {
           endDate="2024-01-31"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles extremely large contribution counts', () => {
@@ -533,7 +546,7 @@ describe('ContributionHeatmap', () => {
           endDate="2024-01-31"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
   })
 
@@ -554,14 +567,14 @@ describe('ContributionHeatmap', () => {
         )
       }
 
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles unmounting and remounting', () => {
       const { unmount } = renderWithTheme(<ContributionHeatmap {...defaultProps} />)
       unmount()
       renderWithTheme(<ContributionHeatmap {...defaultProps} />)
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
   })
 
@@ -578,38 +591,38 @@ describe('ContributionHeatmap', () => {
           endDate="2024-01-31"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles custom unit strings with special characters', () => {
       const { unmount } = renderWithTheme(
         <ContributionHeatmap {...defaultProps} unit="pull-request" />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
       unmount()
 
       const { rerender } = renderWithTheme(<ContributionHeatmap {...defaultProps} unit="PR's" />)
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
 
       rerender(
         <ThemeProvider attribute="class">
           <ContributionHeatmap {...defaultProps} unit="contribution/day" />
         </ThemeProvider>
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
   })
 
   describe('Chart Options Validation', () => {
     it('configures chart with correct options structure', () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} />)
-      const chart = screen.getByTestId('mock-heatmap-chart')
+      const chart = screen.getAllByTestId('mock-heatmap-chart')[0]
       expect(chart).toHaveAttribute('data-type', 'heatmap')
     })
 
     it('renders heatmap chart', () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} />)
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
   })
 
@@ -654,9 +667,9 @@ describe('ContributionHeatmap', () => {
       )
 
       expect(screen.getByText('GitHub Contributions')).toBeInTheDocument()
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
       ;['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].forEach((day) =>
-        expect(screen.getByTestId(`series-${day}`)).toBeInTheDocument()
+        expect(screen.getAllByTestId(`series-${day}`)[0]).toBeInTheDocument()
       )
     })
 
@@ -671,7 +684,7 @@ describe('ContributionHeatmap', () => {
       )
 
       expect(screen.getByText('No Activity')).toBeInTheDocument()
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('renders correctly with all edge cases combined', () => {
@@ -692,62 +705,35 @@ describe('ContributionHeatmap', () => {
         />
       )
 
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
   })
 
   describe('Variants', () => {
     it('renders default variant with full dimensions', () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} variant="default" />)
-      const chart = screen.getByTestId('mock-heatmap-chart')
+      const chart = screen.getAllByTestId('mock-heatmap-chart')[0]
       // Verify full-size dimensions (195px height for default variant)
       expect(chart).toHaveAttribute('data-height', '195')
     })
 
     it('renders medium variant with medium dimensions', () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} variant="medium" />)
-      const chart = screen.getByTestId('mock-heatmap-chart')
+      const chart = screen.getAllByTestId('mock-heatmap-chart')[0]
       // Verify medium dimensions (172px height for medium variant)
       expect(chart).toHaveAttribute('data-height', '172')
     })
 
     it('renders compact variant with smaller dimensions', () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} variant="compact" />)
-      const chart = screen.getByTestId('mock-heatmap-chart')
+      const chart = screen.getAllByTestId('mock-heatmap-chart')[0]
       // Verify compact dimensions (150px height for compact variant)
       expect(chart).toHaveAttribute('data-height', '150')
     })
 
-    it('applies compact-specific container styling when variant is compact', () => {
-      const { container } = renderWithTheme(
-        <ContributionHeatmap {...defaultProps} title="Compact" variant="compact" />
-      )
-      // Verify compact variant uses inline-block class
-      const chartContainer = container.querySelector('.inline-block')
-      expect(chartContainer).toBeInTheDocument()
-    })
-
-    it('applies default variant container styling when variant is default', () => {
-      const { container } = renderWithTheme(
-        <ContributionHeatmap {...defaultProps} title="Default" variant="default" />
-      )
-      // Verify default variant uses inline-block class
-      const chartContainer = container.querySelector('.inline-block')
-      expect(chartContainer).toBeInTheDocument()
-    })
-
-    it('applies medium variant container styling', () => {
-      const { container } = renderWithTheme(
-        <ContributionHeatmap {...defaultProps} title="Medium" variant="medium" />
-      )
-      // Verify medium variant uses inline-block class
-      const chartContainer = container.querySelector('.inline-block')
-      expect(chartContainer).toBeInTheDocument()
-    })
-
     it('defaults to default variant when no variant is specified', () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} />)
-      const chart = screen.getByTestId('mock-heatmap-chart')
+      const chart = screen.getAllByTestId('mock-heatmap-chart')[0]
       // Should render with default variant dimensions
       expect(chart).toHaveAttribute('data-height', '195')
     })
diff --git a/frontend/__tests__/unit/components/InfoBlock.test.tsx b/frontend/__tests__/unit/components/InfoBlock.test.tsx
index 7186e0b326..f2baacfeac 100644
--- a/frontend/__tests__/unit/components/InfoBlock.test.tsx
+++ b/frontend/__tests__/unit/components/InfoBlock.test.tsx
@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
 import millify from 'millify'
 import React from 'react'
-import { FaUser, FaStar, FaCode } from 'react-icons/fa6'
+import { FaUser, FaStar } from 'react-icons/fa6'
 import { pluralize } from 'utils/pluralize'
 import InfoBlock from 'components/InfoBlock'
 
@@ -73,37 +73,16 @@ describe('InfoBlock Component', () => {
             unit="contributor"
             pluralizedName="contributors"
             precision={2}
-            label="Team Members"
             className="custom-class"
           />
         )
 
         expect(screen.getByTestId('icon-star')).toBeInTheDocument()
-        expect(screen.getByText('Team Members')).toBeInTheDocument()
         expect(screen.getByText('1.5k contributors')).toBeInTheDocument()
       })
     })
 
     describe('Conditional rendering logic', () => {
-      it('should show label when provided', () => {
-        mockMillify.mockReturnValue('50')
-        mockPluralize.mockReturnValue('projects')
-
-        render(<InfoBlock icon={FaCode} value={50} label="Active Projects" />)
-
-        expect(screen.getByText('Active Projects')).toBeInTheDocument()
-        expect(screen.getByText('Active Projects')).toHaveClass('text-sm', 'font-medium')
-      })
-
-      it('should not show label when not provided', () => {
-        mockMillify.mockReturnValue('50')
-        mockPluralize.mockReturnValue('projects')
-
-        render(<InfoBlock icon={FaCode} value={50} />)
-
-        expect(screen.queryByText('Active Projects')).not.toBeInTheDocument()
-      })
-
       it('should show "No" prefix when value is 0', () => {
         mockMillify.mockReturnValue('0')
         mockPluralize.mockReturnValue('items')
@@ -233,20 +212,6 @@ describe('InfoBlock Component', () => {
     })
 
     describe('Default values and fallbacks', () => {
-      it('should not render a label element when label prop is not provided', () => {
-        mockMillify.mockReturnValue('100')
-        mockPluralize.mockReturnValue('items')
-
-        render(<InfoBlock icon={FaUser} value={100} />)
-
-        // Verify only the formatted value is rendered, no label
-        expect(screen.getByText('100 items')).toBeInTheDocument()
-
-        // Verify no element with label styling exists
-        const labelElements = document.querySelectorAll('.text-sm.font-medium')
-        expect(labelElements).toHaveLength(0)
-      })
-
       it('should use empty string as default className', () => {
         mockMillify.mockReturnValue('100')
         mockPluralize.mockReturnValue('items')
@@ -286,16 +251,6 @@ describe('InfoBlock Component', () => {
         expect(screen.getByText('2.5k stars')).toBeInTheDocument()
       })
 
-      it('should render label with correct styling', () => {
-        mockMillify.mockReturnValue('100')
-        mockPluralize.mockReturnValue('repos')
-
-        render(<InfoBlock icon={FaCode} value={100} label="Repositories" />)
-
-        const label = screen.getByText('Repositories')
-        expect(label).toHaveClass('text-sm', 'font-medium')
-      })
-
       it('should render tooltip content correctly for positive values', () => {
         mockMillify.mockReturnValue('1.5k')
         mockPluralize.mockReturnValue('contributors')
@@ -379,10 +334,10 @@ describe('InfoBlock Component', () => {
         expect(wrapper).toHaveClass('flex')
 
         const icon = screen.getByTestId('icon-user')
-        expect(icon).toHaveClass('mr-3', 'mt-1', 'w-5')
+        expect(icon).toHaveClass('w-5', 'text-gray-500')
 
         const contentDiv = wrapper.children[1] as HTMLElement
-        expect(contentDiv.children[0]).toHaveClass('text-sm', 'md:text-base')
+        expect(contentDiv).toHaveClass('text-base', 'text-gray-600')
       })
 
       it('should apply custom className correctly', () => {
@@ -404,20 +359,7 @@ describe('InfoBlock Component', () => {
         render(<InfoBlock icon={FaUser} value={100} />)
 
         const icon = screen.getByTestId('icon-user')
-        expect(icon).toHaveClass('mr-3', 'mt-1', 'w-5')
-      })
-
-      it('should have correct text container styling', () => {
-        mockMillify.mockReturnValue('100')
-        mockPluralize.mockReturnValue('items')
-
-        render(<InfoBlock icon={FaUser} value={100} label="Test Label" />)
-
-        const textContainer = screen.getByText('100 items').closest('div')
-        expect(textContainer).toHaveClass('text-sm', 'md:text-base')
-
-        const label = screen.getByText('Test Label')
-        expect(label).toHaveClass('text-sm', 'font-medium')
+        expect(icon).toHaveClass('w-5', 'text-gray-500')
       })
     })
 
diff --git a/frontend/__tests__/unit/components/Milestones.test.tsx b/frontend/__tests__/unit/components/Milestones.test.tsx
index 0dfd45001e..8b3d990105 100644
--- a/frontend/__tests__/unit/components/Milestones.test.tsx
+++ b/frontend/__tests__/unit/components/Milestones.test.tsx
@@ -193,7 +193,6 @@ describe('Milestones', () => {
     render(<Milestones data={[milestone]} />)
 
     expect(screen.getByText('Jan 1, 2023')).toBeInTheDocument()
-    expect(screen.getByText('10 closed')).toBeInTheDocument()
     expect(screen.getByText('5 open')).toBeInTheDocument()
     expect(screen.getByTestId('truncated-text')).toHaveTextContent('awesome-repo')
   })
@@ -246,9 +245,6 @@ describe('Milestones', () => {
     expect(screen.getByTestId('milestone-0')).toBeInTheDocument()
     expect(screen.getByTestId('milestone-1')).toBeInTheDocument()
     expect(screen.getByTestId('milestone-2')).toBeInTheDocument()
-    expect(screen.getByText('5 closed')).toBeInTheDocument()
-    expect(screen.getByText('10 closed')).toBeInTheDocument()
-    expect(screen.getByText('15 closed')).toBeInTheDocument()
   })
 
   it('handles edge case with zero counts', () => {
@@ -256,7 +252,6 @@ describe('Milestones', () => {
       <Milestones data={[createMockMilestone({ closedIssuesCount: 0, openIssuesCount: 0 })]} />
     )
 
-    expect(screen.getByText('0 closed')).toBeInTheDocument()
     expect(screen.getByText('0 open')).toBeInTheDocument()
   })
 
@@ -265,7 +260,6 @@ describe('Milestones', () => {
       <Milestones data={[createMockMilestone({ closedIssuesCount: 999, openIssuesCount: 1000 })]} />
     )
 
-    expect(screen.getByText('999 closed')).toBeInTheDocument()
     expect(screen.getByText('1000 open')).toBeInTheDocument()
   })
 
diff --git a/frontend/__tests__/unit/components/RecentRelease.test.tsx b/frontend/__tests__/unit/components/RecentRelease.test.tsx
index a7e04d76a2..8b17abbef5 100644
--- a/frontend/__tests__/unit/components/RecentRelease.test.tsx
+++ b/frontend/__tests__/unit/components/RecentRelease.test.tsx
@@ -382,10 +382,6 @@ describe('RecentReleases Component', () => {
     })
 
     // Check for main card structure - look for the card wrapper
-    const cardElement = container.querySelector(
-      String.raw`.mb-4.w-full.rounded-lg.bg-gray-200.p-4.dark\:bg-gray-700`
-    )
-    expect(cardElement).toBeInTheDocument()
 
     // Check for proper grid layout
     const gridElement = container.querySelector('.grid')
diff --git a/frontend/__tests__/unit/components/RepositoryCard.test.tsx b/frontend/__tests__/unit/components/RepositoryCard.test.tsx
index a46b483cad..c3e943604f 100644
--- a/frontend/__tests__/unit/components/RepositoryCard.test.tsx
+++ b/frontend/__tests__/unit/components/RepositoryCard.test.tsx
@@ -82,65 +82,67 @@ describe('RepositoryCard', () => {
     expect(container.querySelector('.grid')).toBeNull()
   })
 
-  it('shows first 4 repositories initially when there are more than 4', () => {
-    const repositories = Array.from({ length: 6 }, (_, i) => createMockRepository(i))
+  it('shows first 6 repositories initially when there are more than 6', () => {
+    const repositories = Array.from({ length: 8 }, (_, i) => createMockRepository(i))
 
     render(<RepositoryCard repositories={repositories} />)
 
     expect(screen.getByText('Repository 0')).toBeInTheDocument()
-    expect(screen.getByText('Repository 3')).toBeInTheDocument()
-    expect(screen.queryByText('Repository 4')).not.toBeInTheDocument()
-    expect(screen.queryByText('Repository 5')).not.toBeInTheDocument()
+    expect(screen.getByText('Repository 5')).toBeInTheDocument()
+    expect(screen.queryByText('Repository 6')).not.toBeInTheDocument()
+    expect(screen.queryByText('Repository 7')).not.toBeInTheDocument()
   })
 
-  it('shows all repositories when there are 4 or fewer', () => {
-    const repositories = Array.from({ length: 3 }, (_, i) => createMockRepository(i))
+  it('shows all repositories when there are 6 or fewer', () => {
+    const repositories = Array.from({ length: 5 }, (_, i) => createMockRepository(i))
 
     render(<RepositoryCard repositories={repositories} />)
 
     expect(screen.getByText('Repository 0')).toBeInTheDocument()
     expect(screen.getByText('Repository 1')).toBeInTheDocument()
     expect(screen.getByText('Repository 2')).toBeInTheDocument()
+    expect(screen.getByText('Repository 3')).toBeInTheDocument()
+    expect(screen.getByText('Repository 4')).toBeInTheDocument()
   })
 
-  it('displays ShowMoreButton when there are more than 4 repositories', () => {
-    const repositories = Array.from({ length: 6 }, (_, i) => createMockRepository(i))
+  it('displays ShowMoreButton when there are more than 6 repositories', () => {
+    const repositories = Array.from({ length: 8 }, (_, i) => createMockRepository(i))
 
     render(<RepositoryCard repositories={repositories} />)
 
     expect(screen.getByRole('button', { name: /Show/ })).toBeInTheDocument()
   })
 
-  it('does not display ShowMoreButton when there are 4 or fewer repositories', () => {
-    const repositories = Array.from({ length: 4 }, (_, i) => createMockRepository(i))
+  it('does not display ShowMoreButton when there are 6 or fewer repositories', () => {
+    const repositories = Array.from({ length: 6 }, (_, i) => createMockRepository(i))
 
     render(<RepositoryCard repositories={repositories} />)
 
     expect(screen.queryByRole('button', { name: /Show/ })).not.toBeInTheDocument()
   })
 
-  it('toggles between showing 4 and all repositories when clicked', () => {
-    const repositories = Array.from({ length: 6 }, (_, i) => createMockRepository(i))
+  it('toggles between showing 6 and all repositories when clicked', () => {
+    const repositories = Array.from({ length: 8 }, (_, i) => createMockRepository(i))
 
     render(<RepositoryCard repositories={repositories} />)
 
-    // Initially shows first 4
+    // Initially shows first 6
     expect(screen.getByText('Repository 0')).toBeInTheDocument()
-    expect(screen.queryByText('Repository 4')).not.toBeInTheDocument()
+    expect(screen.queryByText('Repository 6')).not.toBeInTheDocument()
 
     // Click show more
     fireEvent.click(screen.getByRole('button', { name: /Show/ }))
 
     // Now shows all repositories
-    expect(screen.getByText('Repository 4')).toBeInTheDocument()
-    expect(screen.getByText('Repository 5')).toBeInTheDocument()
+    expect(screen.getByText('Repository 6')).toBeInTheDocument()
+    expect(screen.getByText('Repository 7')).toBeInTheDocument()
 
     // Click show less
     fireEvent.click(screen.getByRole('button', { name: /Show/ }))
 
-    // Back to showing first 4
-    expect(screen.queryByText('Repository 4')).not.toBeInTheDocument()
-    expect(screen.queryByText('Repository 5')).not.toBeInTheDocument()
+    // Back to showing first 6
+    expect(screen.queryByText('Repository 6')).not.toBeInTheDocument()
+    expect(screen.queryByText('Repository 7')).not.toBeInTheDocument()
   })
 
   it('renders repository items with correct information', () => {
@@ -311,22 +313,22 @@ describe('RepositoryCard', () => {
     })
 
     it('archived badge persists when toggling show more/less', () => {
-      const repositories = Array.from({ length: 6 }, (_, i) => ({
+      const repositories = Array.from({ length: 8 }, (_, i) => ({
         ...createMockRepository(i),
         isArchived: i % 2 === 0,
       }))
 
       render(<RepositoryCard repositories={repositories} />)
 
-      expect(screen.getAllByText('Archived')).toHaveLength(2)
+      expect(screen.getAllByText('Archived')).toHaveLength(3)
 
       fireEvent.click(screen.getByRole('button', { name: /Show/ }))
 
-      expect(screen.getAllByText('Archived')).toHaveLength(3)
+      expect(screen.getAllByText('Archived')).toHaveLength(4)
 
       fireEvent.click(screen.getByRole('button', { name: /Show/ }))
 
-      expect(screen.getAllByText('Archived')).toHaveLength(2)
+      expect(screen.getAllByText('Archived')).toHaveLength(3)
     })
 
     it('clicking archived repository still navigates correctly', () => {
diff --git a/frontend/__tests__/unit/pages/Home.test.tsx b/frontend/__tests__/unit/pages/Home.test.tsx
index 0f0d3e9232..06960c6331 100644
--- a/frontend/__tests__/unit/pages/Home.test.tsx
+++ b/frontend/__tests__/unit/pages/Home.test.tsx
@@ -213,7 +213,6 @@ describe('Home', () => {
         expect(screen.getByText(milestone.title)).toBeInTheDocument()
         expect(screen.getByText(milestone.repositoryName)).toBeInTheDocument()
         expect(screen.getByText(`${milestone.openIssuesCount} open`)).toBeInTheDocument()
-        expect(screen.getByText(`${milestone.closedIssuesCount} closed`)).toBeInTheDocument()
       }
     })
   })
diff --git a/frontend/__tests__/unit/pages/OrganizationDetails.test.tsx b/frontend/__tests__/unit/pages/OrganizationDetails.test.tsx
index 70f832992a..c851c3e850 100644
--- a/frontend/__tests__/unit/pages/OrganizationDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/OrganizationDetails.test.tsx
@@ -118,7 +118,6 @@ describe('OrganizationDetailsPage', () => {
         expect(screen.getByText(milestone.title)).toBeInTheDocument()
         expect(screen.getByText(milestone.repositoryName)).toBeInTheDocument()
         expect(screen.getByText(`${milestone.openIssuesCount} open`)).toBeInTheDocument()
-        expect(screen.getByText(`${milestone.closedIssuesCount} closed`)).toBeInTheDocument()
       }
     })
   })
diff --git a/frontend/__tests__/unit/pages/ProjectDetails.test.tsx b/frontend/__tests__/unit/pages/ProjectDetails.test.tsx
index 4afd72e511..7753332299 100644
--- a/frontend/__tests__/unit/pages/ProjectDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/ProjectDetails.test.tsx
@@ -260,7 +260,6 @@ describe('ProjectDetailsPage', () => {
         expect(screen.getByText(milestone.title)).toBeInTheDocument()
         expect(screen.getByText(milestone.repositoryName)).toBeInTheDocument()
         expect(screen.getByText(`${milestone.openIssuesCount} open`)).toBeInTheDocument()
-        expect(screen.getByText(`${milestone.closedIssuesCount} closed`)).toBeInTheDocument()
       }
     })
   })
diff --git a/frontend/__tests__/unit/pages/RepositoryDetails.test.tsx b/frontend/__tests__/unit/pages/RepositoryDetails.test.tsx
index c28c160b8f..db71bb4397 100644
--- a/frontend/__tests__/unit/pages/RepositoryDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/RepositoryDetails.test.tsx
@@ -188,7 +188,6 @@ describe('RepositoryDetailsPage', () => {
         expect(screen.getByText(milestone.title)).toBeInTheDocument()
         expect(screen.getByText(milestone.repositoryName)).toBeInTheDocument()
         expect(screen.getByText(`${milestone.openIssuesCount} open`)).toBeInTheDocument()
-        expect(screen.getByText(`${milestone.closedIssuesCount} closed`)).toBeInTheDocument()
       }
     })
   })
diff --git a/frontend/__tests__/unit/pages/UserDetails.test.tsx b/frontend/__tests__/unit/pages/UserDetails.test.tsx
index 154dbd1f77..4ce7410edf 100644
--- a/frontend/__tests__/unit/pages/UserDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/UserDetails.test.tsx
@@ -12,32 +12,6 @@ jest.mock('@apollo/client/react', () => ({
   useQuery: jest.fn(),
 }))
 
-// Mock Badges component
-jest.mock('components/Badges', () => {
-  const MockBadges = ({
-    name,
-    cssClass,
-    showTooltip,
-  }: {
-    name: string
-    cssClass: string
-    showTooltip?: boolean
-  }) => (
-    <div
-      data-testid={`badge-${name.toLowerCase().replaceAll(/\s+/g, '-')}`}
-      data-css-class={cssClass}
-      data-show-tooltip={showTooltip}
-    >
-      <span data-testid={`icon-${cssClass.replace('fa-', '')}`} />
-    </div>
-  )
-  MockBadges.displayName = 'MockBadges'
-  return {
-    __esModule: true,
-    default: MockBadges,
-  }
-})
-
 const mockRouter = {
   push: jest.fn(),
 }
@@ -72,13 +46,11 @@ describe('UserSummary', () => {
       name: 'John Doe',
       avatarUrl: 'https://example.com/avatar.png',
       url: 'https://github.com/johndoe',
+      bio: 'Bio text',
     }
     render(
       <UserSummary
-        user={user}
-        contributionData={{}}
-        dateRange={{ startDate: '', endDate: '' }}
-        hasContributionData={false}
+        user={user as Parameters<typeof UserSummary>[0]['user']}
         formattedBio={<span>Bio text</span>}
       />
     )
@@ -90,25 +62,6 @@ describe('UserSummary', () => {
     expect(screen.getByText('Bio text')).toBeInTheDocument()
   })
 
-  test('renders contribution heatmap when hasContributionData is true', () => {
-    const user = {
-      login: 'jane',
-      name: 'Jane',
-      avatarUrl: '/avatar.png',
-      url: 'https://github.com/jane',
-    }
-    render(
-      <UserSummary
-        user={user}
-        contributionData={{ '2025-01-01': 1 }}
-        dateRange={{ startDate: '2025-01-01', endDate: '2025-01-01' }}
-        hasContributionData={true}
-        formattedBio={null}
-      />
-    )
-    expect(screen.getByTestId('contribution-heatmap')).toBeInTheDocument()
-  })
-
   test('uses login as avatar alt when user has no name', () => {
     const user = {
       login: 'nologin',
@@ -117,50 +70,10 @@ describe('UserSummary', () => {
       url: 'https://github.com/nologin',
     }
     render(
-      <UserSummary
-        user={user}
-        contributionData={{}}
-        dateRange={{ startDate: '', endDate: '' }}
-        hasContributionData={false}
-        formattedBio={null}
-      />
+      <UserSummary user={user as Parameters<typeof UserSummary>[0]['user']} formattedBio={null} />
     )
     expect(screen.getByRole('img', { name: 'nologin' })).toBeInTheDocument()
   })
-
-  test('uses placeholder avatar and fallback alt when user is null', () => {
-    render(
-      <UserSummary
-        user={null}
-        contributionData={{}}
-        dateRange={{ startDate: '', endDate: '' }}
-        hasContributionData={false}
-        formattedBio={null}
-      />
-    )
-    const img = screen.getByRole('img', { name: 'User Avatar' })
-    expect(img).toHaveAttribute('src', expect.stringContaining('placeholder.svg'))
-  })
-
-  test('renders badges when user has badges', () => {
-    const user = {
-      login: 'badged',
-      name: 'Badged User',
-      avatarUrl: '/a.png',
-      url: 'https://github.com/badged',
-      badges: [{ id: 'b1', name: 'Star', cssClass: 'fa-star', description: 'Star', weight: 1 }],
-    }
-    render(
-      <UserSummary
-        user={user}
-        contributionData={{}}
-        dateRange={{ startDate: '', endDate: '' }}
-        hasContributionData={false}
-        formattedBio={null}
-      />
-    )
-    expect(screen.getByTestId('badge-star')).toBeInTheDocument()
-  })
 })
 
 describe('UserDetailsPage', () => {
@@ -176,21 +89,6 @@ describe('UserDetailsPage', () => {
     jest.clearAllMocks()
   })
 
-  // Helper functions to reduce nesting depth
-  const getBadgeElements = () => {
-    return screen.getAllByTestId(/^badge-/)
-  }
-
-  const getBadgeTestIds = () => {
-    const badgeElements = getBadgeElements()
-    return badgeElements.map((element) => element.dataset.testid)
-  }
-
-  const expectBadgesInCorrectOrder = (expectedOrder: string[]) => {
-    const badgeTestIds = getBadgeTestIds()
-    expect(badgeTestIds).toEqual(expectedOrder)
-  }
-
   test('renders loading state', async () => {
     ;(useQuery as unknown as jest.Mock).mockReturnValue({
       data: null,
@@ -222,7 +120,6 @@ describe('UserDetailsPage', () => {
       expect(screen.getByText('Test User')).toBeInTheDocument()
     })
 
-    expect(screen.getByText('Statistics')).toBeInTheDocument()
     expect(screen.getByText('Test Company')).toBeInTheDocument()
     expect(screen.getByText('Test Location')).toBeInTheDocument()
     expect(screen.getByText('10 Followers')).toBeInTheDocument()
@@ -305,7 +202,6 @@ describe('UserDetailsPage', () => {
         expect(screen.getByText(milestone.title)).toBeInTheDocument()
         expect(screen.getByText(milestone.repositoryName)).toBeInTheDocument()
         expect(screen.getByText(`${milestone.openIssuesCount} open`)).toBeInTheDocument()
-        expect(screen.getByText(`${milestone.closedIssuesCount} closed`)).toBeInTheDocument()
       }
     })
   })
@@ -344,9 +240,6 @@ describe('UserDetailsPage', () => {
     render(<UserDetailsPage />)
 
     await waitFor(() => {
-      const statisticsTitle = screen.getByText('Statistics')
-      expect(statisticsTitle).toBeInTheDocument()
-
       const followersCount = screen.getByText('10 Followers')
       expect(followersCount).toBeInTheDocument()
 
@@ -413,13 +306,11 @@ describe('UserDetailsPage', () => {
       expect(userName).toBeInTheDocument()
       const avatar = screen.getByAltText('Test User')
       expect(avatar).toHaveClass('rounded-full')
-      expect(avatar).toHaveClass('h-[200px]')
-      expect(avatar).toHaveClass('w-[200px]')
+      expect(avatar).toHaveClass('size-32')
 
       // Check for responsive classes
       const summaryContainer = avatar.closest('div.flex')
       expect(summaryContainer).toHaveClass('flex-col')
-      expect(summaryContainer).toHaveClass('lg:flex-row')
     })
   })
 
@@ -516,8 +407,7 @@ describe('UserDetailsPage', () => {
 
     render(<UserDetailsPage />)
     await waitFor(() => {
-      expect(screen.getByText('Recent Issues')).toBeInTheDocument()
-      expect(screen.getByText('No recent releases.')).toBeInTheDocument()
+      expect(screen.queryByText('Recent Issues')).not.toBeInTheDocument()
     })
   })
 
@@ -534,8 +424,7 @@ describe('UserDetailsPage', () => {
 
     render(<UserDetailsPage />)
     await waitFor(() => {
-      expect(screen.getByText('Recent Pull Requests')).toBeInTheDocument()
-      expect(screen.queryByText('Test Pull Request')).not.toBeInTheDocument()
+      expect(screen.queryByText('Recent Pull Requests')).not.toBeInTheDocument()
     })
   })
 
@@ -551,8 +440,7 @@ describe('UserDetailsPage', () => {
     })
     render(<UserDetailsPage />)
     await waitFor(() => {
-      expect(screen.getByText('Recent Releases')).toBeInTheDocument()
-      expect(screen.queryByText('Test v1.0.0')).not.toBeInTheDocument()
+      expect(screen.queryByText('Recent Releases')).not.toBeInTheDocument()
     })
   })
 
@@ -568,8 +456,7 @@ describe('UserDetailsPage', () => {
     })
     render(<UserDetailsPage />)
     await waitFor(() => {
-      expect(screen.getByText('Recent Milestones')).toBeInTheDocument()
-      expect(screen.queryByText('v2.0.0 Release')).not.toBeInTheDocument()
+      expect(screen.queryByText('Recent Milestones')).not.toBeInTheDocument()
     })
   })
 
@@ -619,8 +506,7 @@ describe('UserDetailsPage', () => {
     await waitFor(() => {
       expect(screen.getAllByText('N/A').length).toBe(3)
       const bioContainer = screen.getByText('@testuser').closest('div')
-      expect(bioContainer).toHaveClass('text-center')
-      expect(bioContainer).toHaveClass('lg:text-left')
+      expect(bioContainer).toHaveClass('text-left')
     })
   })
 
@@ -635,274 +521,6 @@ describe('UserDetailsPage', () => {
     })
   })
 
-  describe('Badge Display Tests', () => {
-    test('renders badges section when user has badges', async () => {
-      ;(useQuery as unknown as jest.Mock).mockReturnValue({
-        data: mockUserDetailsData,
-        loading: false,
-        error: null,
-      })
-
-      render(<UserDetailsPage />)
-      await waitFor(() => {
-        expect(screen.getByTestId('badge-contributor')).toBeInTheDocument()
-        expect(screen.getByTestId('badge-security-expert')).toBeInTheDocument()
-      })
-    })
-
-    test('renders badges with correct props', async () => {
-      ;(useQuery as unknown as jest.Mock).mockReturnValue({
-        data: mockUserDetailsData,
-        loading: false,
-        error: null,
-      })
-
-      render(<UserDetailsPage />)
-      await waitFor(() => {
-        const contributorBadge = screen.getByTestId('badge-contributor')
-        expect(contributorBadge).toHaveAttribute('data-css-class', 'fa-medal')
-        expect(contributorBadge).toHaveAttribute('data-show-tooltip', 'true')
-
-        const securityBadge = screen.getByTestId('badge-security-expert')
-        expect(securityBadge).toHaveAttribute('data-css-class', 'fa-shield-alt')
-        expect(securityBadge).toHaveAttribute('data-show-tooltip', 'true')
-      })
-    })
-
-    test('does not render badges section when user has no badges', async () => {
-      const dataWithoutBadges = {
-        ...mockUserDetailsData,
-        user: {
-          ...mockUserDetailsData.user,
-          badges: [],
-          badgeCount: 0,
-        },
-      }
-
-      ;(useQuery as unknown as jest.Mock).mockReturnValue({
-        data: dataWithoutBadges,
-        loading: false,
-        error: null,
-      })
-
-      render(<UserDetailsPage />)
-      await waitFor(() => {
-        expect(screen.queryByTestId(/^badge-/)).not.toBeInTheDocument()
-      })
-    })
-
-    test('does not render badges section when badges is undefined', async () => {
-      const dataWithoutBadges = {
-        ...mockUserDetailsData,
-        user: {
-          ...mockUserDetailsData.user,
-          badges: undefined,
-          badgeCount: 0,
-        },
-      }
-
-      ;(useQuery as unknown as jest.Mock).mockReturnValue({
-        data: dataWithoutBadges,
-        loading: false,
-        error: null,
-      })
-
-      render(<UserDetailsPage />)
-      await waitFor(() => {
-        expect(screen.queryByTestId(/^badge-/)).not.toBeInTheDocument()
-      })
-    })
-
-    test('renders badges with fallback cssClass when not provided', async () => {
-      const dataWithIncompleteBadges = {
-        ...mockUserDetailsData,
-        user: {
-          ...mockUserDetailsData.user,
-          badges: [
-            {
-              id: '1',
-              name: 'Test Badge',
-              cssClass: undefined,
-              description: 'Test description',
-              weight: 1,
-            },
-          ],
-        },
-      }
-
-      ;(useQuery as unknown as jest.Mock).mockReturnValue({
-        data: dataWithIncompleteBadges,
-        loading: false,
-        error: null,
-      })
-
-      render(<UserDetailsPage />)
-      await waitFor(() => {
-        const badge = screen.getByTestId('badge-test-badge')
-        expect(badge).toHaveAttribute('data-css-class', 'medal')
-      })
-    })
-
-    test('renders badges with empty cssClass fallback', async () => {
-      const dataWithEmptyCssClass = {
-        ...mockUserDetailsData,
-        user: {
-          ...mockUserDetailsData.user,
-          badges: [
-            {
-              id: '1',
-              name: 'Test Badge',
-              cssClass: '',
-              description: 'Test description',
-              weight: 1,
-            },
-          ],
-        },
-      }
-
-      ;(useQuery as unknown as jest.Mock).mockReturnValue({
-        data: dataWithEmptyCssClass,
-        loading: false,
-        error: null,
-      })
-
-      render(<UserDetailsPage />)
-      await waitFor(() => {
-        const badge = screen.getByTestId('badge-test-badge')
-        expect(badge).toHaveAttribute('data-css-class', 'medal')
-      })
-    })
-
-    test('handles badges with special characters in names', async () => {
-      const dataWithSpecialBadges = {
-        ...mockUserDetailsData,
-        user: {
-          ...mockUserDetailsData.user,
-          badges: [
-            {
-              id: '1',
-              name: 'Badge & More!',
-              cssClass: 'fa-star',
-              description: 'Special badge',
-              weight: 1,
-            },
-          ],
-        },
-      }
-      ;(useQuery as unknown as jest.Mock).mockReturnValue({
-        data: dataWithSpecialBadges,
-        loading: false,
-        error: null,
-      })
-
-      render(<UserDetailsPage />)
-      await waitFor(() => {
-        expect(screen.getByTestId('badge-badge-&-more!')).toBeInTheDocument()
-      })
-    })
-
-    test('handles badges with long names', async () => {
-      const dataWithLongNameBadge = {
-        ...mockUserDetailsData,
-        user: {
-          ...mockUserDetailsData.user,
-          badges: [
-            {
-              id: '1',
-              name: 'Very Long Badge Name That Exceeds Normal Length',
-              cssClass: 'fa-trophy',
-              description: 'Long name badge',
-              weight: 1,
-            },
-          ],
-        },
-      }
-
-      ;(useQuery as unknown as jest.Mock).mockReturnValue({
-        data: dataWithLongNameBadge,
-        loading: false,
-        error: null,
-      })
-
-      render(<UserDetailsPage />)
-      await waitFor(() => {
-        expect(
-          screen.getByTestId('badge-very-long-badge-name-that-exceeds-normal-length')
-        ).toBeInTheDocument()
-      })
-    })
-
-    // eslint-disable-next-line jest/expect-expect
-    test('renders badges in correct order as returned by backend (weight ASC then name ASC)', async () => {
-      // Backend returns badges sorted by weight ASC, then name ASC
-      // This test verifies the frontend preserves the backend ordering
-      const dataWithOrderedBadges = {
-        ...mockUserDetailsData,
-        user: {
-          ...mockUserDetailsData.user,
-          badges: [
-            // Backend returns badges in this order: weight ASC, then name ASC
-            {
-              id: '3',
-              name: 'Alpha Badge',
-              cssClass: 'fa-star',
-              description: 'Alpha badge with weight 1',
-              weight: 1,
-            },
-            {
-              id: '4',
-              name: 'Beta Badge',
-              cssClass: 'fa-trophy',
-              description: 'Beta badge with weight 1',
-              weight: 1,
-            },
-            {
-              id: '1',
-              name: 'Contributor',
-              cssClass: 'medal',
-              description: 'Active contributor',
-              weight: 1,
-            },
-            {
-              id: '2',
-              name: 'Security Expert',
-              cssClass: 'fa-shield-alt',
-              description: 'Security expertise',
-              weight: 2,
-            },
-            {
-              id: '5',
-              name: 'Top Contributor',
-              cssClass: 'fa-crown',
-              description: 'Highest weight badge',
-              weight: 3,
-            },
-          ],
-          badgeCount: 5,
-        },
-      }
-
-      ;(useQuery as unknown as jest.Mock).mockReturnValue({
-        data: dataWithOrderedBadges,
-        loading: false,
-        error: null,
-      })
-
-      render(<UserDetailsPage />)
-      await waitFor(() => {
-        // Expected order matches backend contract: weight ASC (1, 1, 1, 2, 3), then name ASC for equal weights
-        const expectedOrder = [
-          'badge-alpha-badge', // weight 1, name ASC
-          'badge-beta-badge', // weight 1, name ASC
-          'badge-contributor', // weight 1, name ASC
-          'badge-security-expert', // weight 2
-          'badge-top-contributor', // weight 3
-        ]
-        expectBadgesInCorrectOrder(expectedOrder)
-      })
-    })
-  })
-
   describe('Contribution Heatmap', () => {
     test('does not render heatmap when user has empty contribution data', async () => {
       const dataWithEmptyContributions = {
@@ -1121,7 +739,7 @@ describe('UserDetailsPage', () => {
       render(<UserDetailsPage />)
 
       await waitFor(() => {
-        expect(screen.getByText('Joined:')).toBeInTheDocument()
+        expect(screen.getByText('Joined :')).toBeInTheDocument()
         expect(screen.getByText('Not available')).toBeInTheDocument()
       })
     })
diff --git a/frontend/src/app/members/[memberKey]/page.tsx b/frontend/src/app/members/[memberKey]/page.tsx
index 15e69f3ef6..8981c9e863 100644
--- a/frontend/src/app/members/[memberKey]/page.tsx
+++ b/frontend/src/app/members/[memberKey]/page.tsx
@@ -1,89 +1,30 @@
 'use client'
 import { useQuery } from '@apollo/client/react'
-import Image from 'next/image'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import React, { useEffect, useMemo } from 'react'
-import { FaCodeMerge, FaFolderOpen, FaPersonWalkingArrowRight, FaUserPlus } from 'react-icons/fa6'
 import { handleAppError, ErrorDisplay } from 'app/global-error'
 
 import { GetUserDataDocument } from 'types/__generated__/userQueries.generated'
-import { Badge } from 'types/badge'
 import { User } from 'types/user'
-import { formatDate } from 'utils/dateFormatter'
-import Badges from 'components/Badges'
-import Contributions from 'components/cards/Contributions'
-import Contributors from 'components/cards/Contributors'
-import Header from 'components/cards/Header'
-import IssuesMilestones from 'components/cards/IssuesMilestones'
-import Metadata from 'components/cards/Metadata'
+import MemberDetailSidebar from 'components/cards/MemberDetailSidebar'
 import PageWrapper from 'components/cards/PageWrapper'
 import RepositoriesModules from 'components/cards/RepositoriesModules'
-import Summary from 'components/cards/Summary'
 import ContributionHeatmap from 'components/ContributionHeatmap'
-import MemberDetailsPageSkeleton from 'components/skeletons/MemberDetailsPageSkeleton'
+import Milestones from 'components/Milestones'
+import RecentIssues from 'components/RecentIssues'
+import RecentPullRequests from 'components/RecentPullRequests'
+import RecentReleases from 'components/RecentReleases'
 
-type DateRange = { startDate: string; endDate: string }
+import MemberDetailsPageSkeleton from 'components/skeletons/MemberDetailsPageSkeleton'
 
 interface UserSummaryProps {
-  user: User | null
-  contributionData: Record<string, number>
-  dateRange: DateRange
-  hasContributionData: boolean
+  user: User
   formattedBio: React.ReactNode
 }
 
-export const UserSummary: React.FC<UserSummaryProps> = ({
-  user,
-  contributionData,
-  dateRange,
-  hasContributionData,
-  formattedBio,
-}) => (
-  <div className="mt-4 flex flex-col items-center lg:flex-row">
-    <Image
-      width={200}
-      height={200}
-      className="mr-4 h-[200px] w-[200px] rounded-full border-2 border-white bg-white object-cover shadow-md dark:border-gray-800 dark:bg-gray-600/60"
-      src={user?.avatarUrl || '/placeholder.svg'}
-      alt={user?.name || user?.login || 'User Avatar'}
-    />
-    <div className="w-full overflow-x-auto text-center lg:text-left">
-      <div className="pl-0 lg:pl-4">
-        <div className="flex items-center justify-center gap-3 text-center text-sm text-gray-500 lg:justify-start lg:text-left dark:text-gray-400">
-          <Link href={user?.url || '#'} className="text-xl font-bold text-blue-400 hover:underline">
-            @{user?.login}
-          </Link>
-          {user?.badges && user.badges.length > 0 && (
-            <div className="flex flex-wrap gap-2">
-              {user.badges.slice().map((badge: Badge) => (
-                <React.Fragment key={badge.id}>
-                  <Badges
-                    name={badge.name}
-                    cssClass={badge.cssClass || 'medal'}
-                    showTooltip={true}
-                  />
-                </React.Fragment>
-              ))}
-            </div>
-          )}
-        </div>
-        <p className="text-gray-600 dark:text-gray-400">{formattedBio}</p>
-      </div>
-      {hasContributionData && dateRange.startDate && dateRange.endDate && (
-        <div className="w-full lg:block">
-          <div className="overflow-x-auto rounded-lg bg-gray-100 dark:bg-gray-800">
-            <ContributionHeatmap
-              contributionData={contributionData}
-              startDate={dateRange.startDate}
-              endDate={dateRange.endDate}
-              variant="medium"
-            />
-          </div>
-        </div>
-      )}
-    </div>
-  </div>
+export const UserSummary: React.FC<UserSummaryProps> = ({ user, formattedBio }) => (
+  <MemberDetailSidebar user={user} formattedBio={formattedBio} />
 )
 
 const UserDetailsPage: React.FC = () => {
@@ -181,56 +122,59 @@ const UserDetailsPage: React.FC = () => {
     )
   }
 
-  const userDetails = [
-    { label: 'Joined', value: user?.createdAt ? formatDate(user.createdAt) : 'Not available' },
-    { label: 'Email', value: user?.email || 'N/A' },
-    { label: 'Company', value: user?.company || 'N/A' },
-    { label: 'Location', value: user?.location || 'N/A' },
-  ]
-
-  const userStats = [
-    { icon: FaPersonWalkingArrowRight, value: user?.followersCount || 0, unit: 'Follower' },
-    { icon: FaUserPlus, value: user?.followingCount || 0, unit: 'Following' },
-    {
-      icon: FaFolderOpen,
-      pluralizedName: 'Repositories',
-      unit: 'Repository',
-      value: user?.publicRepositoriesCount ?? 0,
-    },
-    { icon: FaCodeMerge, value: user?.contributionsCount || 0, unit: 'Contribution' },
-  ]
-
   return (
     <PageWrapper>
-      <Header title={user?.name || user?.login} isActive={true} isArchived={false} />
-
-      <Summary
-        userSummary={
-          <UserSummary
-            user={user}
-            contributionData={contributionData}
-            dateRange={dateRange}
-            hasContributionData={hasContributionData}
-            formattedBio={formattedBio}
-          />
-        }
-      />
-
-      <Metadata details={userDetails} stats={userStats} detailsTitle="User Details" />
-
-      <Contributions hasContributions={false} />
-
-      <Contributors />
-
-      <IssuesMilestones
-        recentIssues={issues}
-        recentMilestones={milestones}
-        pullRequests={pullRequests}
-        recentReleases={releases}
-        showAvatar={false}
-      />
-
-      <RepositoriesModules repositories={topRepositories} />
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-6 xl:flex-row xl:items-start">
+          <aside className="w-full shrink-0 xl:w-[18rem]">
+            <UserSummary user={user} formattedBio={formattedBio} />
+          </aside>
+
+          <div className="flex min-w-0 flex-1 flex-col gap-6">
+            {hasContributionData && dateRange.startDate && dateRange.endDate && (
+              <div className="rounded-lg bg-gray-100 pt-0 pr-4 pb-1 pl-1 shadow-md dark:bg-gray-800">
+                <div className="overflow-x-auto">
+                  <ContributionHeatmap
+                    contributionData={contributionData}
+                    startDate={dateRange.startDate}
+                    endDate={dateRange.endDate}
+                    variant="medium"
+                  />
+                </div>
+              </div>
+            )}
+
+            {topRepositories.length > 0 && (
+              <div className="flex flex-col [&>div]:mb-0! [&>div]:grow">
+                <RepositoriesModules repositories={topRepositories} />
+              </div>
+            )}
+
+            <div className="grid grow grid-cols-1 gap-6 md:grid-cols-2">
+              {issues.length > 0 && (
+                <div className="flex flex-col [&>div]:mb-0! [&>div]:grow">
+                  <RecentIssues data={issues} showAvatar={false} />
+                </div>
+              )}
+              {pullRequests.length > 0 && (
+                <div className="flex flex-col [&>div]:mb-0! [&>div]:grow">
+                  <RecentPullRequests data={pullRequests} showAvatar={false} />
+                </div>
+              )}
+              {milestones.length > 0 && (
+                <div className="flex flex-col [&>div]:mb-0! [&>div]:grow">
+                  <Milestones data={milestones} showAvatar={false} />
+                </div>
+              )}
+              {releases.length > 0 && (
+                <div className="flex flex-col [&>div]:mb-0! [&>div]:grow">
+                  <RecentReleases data={releases} showAvatar={false} showSingleColumn={true} />
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
     </PageWrapper>
   )
 }
diff --git a/frontend/src/components/ContributionHeatmap.tsx b/frontend/src/components/ContributionHeatmap.tsx
index 95a7e2338c..9ff859d089 100644
--- a/frontend/src/components/ContributionHeatmap.tsx
+++ b/frontend/src/components/ContributionHeatmap.tsx
@@ -282,21 +282,21 @@ const ContributionHeatmap: React.FC<ContributionHeatmapProps> = ({
     const weeksCount = heatmapSeries[0]?.data?.length || 0
 
     if (variant === 'compact') {
-      const pixelPerWeek = 13.4
-      const padding = 40
+      const pixelPerWeek = 14
+      const padding = 60
       const calculatedWidth = weeksCount * pixelPerWeek + padding
       return Math.max(400, calculatedWidth)
     }
 
     if (variant === 'medium') {
-      const pixelPerWeek = 16
-      const padding = 45
+      const pixelPerWeek = 17
+      const padding = 70
       const calculatedWidth = weeksCount * pixelPerWeek + padding
       return Math.max(500, calculatedWidth)
     }
 
-    const pixelPerWeek = 19.5
-    const padding = 50
+    const pixelPerWeek = 20
+    const padding = 80
     const calculatedWidth = weeksCount * pixelPerWeek + padding
     return Math.max(600, calculatedWidth)
   }, [heatmapSeries, variant])
@@ -316,7 +316,7 @@ const ContributionHeatmap: React.FC<ContributionHeatmapProps> = ({
       )}
 
       {/* scroll wrapper for small screens */}
-      <div className="scrollbar-default w-full overflow-x-auto overflow-y-hidden">
+      <div className="scrollbar-hidden w-full overflow-x-auto overflow-y-hidden">
         <style>
           {`
             .apexcharts-tooltip {
@@ -327,14 +327,17 @@ const ContributionHeatmap: React.FC<ContributionHeatmapProps> = ({
             .apexcharts-tooltip * {
               border: none !important;
             }
-            .scrollbar-default {
-              scrollbar-width: thin;
+            .scrollbar-hidden {
+              scrollbar-width: none;
+              -ms-overflow-style: none;
+            }
+            .scrollbar-hidden::-webkit-scrollbar {
+              display: none;
             }
-
           `}
         </style>
 
-        <div className="inline-block">
+        <div className="mx-auto w-max px-2 md:hidden">
           <Chart
             height={getChartHeight()}
             options={options}
@@ -343,6 +346,18 @@ const ContributionHeatmap: React.FC<ContributionHeatmapProps> = ({
             width={chartWidth}
           />
         </div>
+        <div
+          className="hidden w-full px-2 md:block"
+          style={{ aspectRatio: `${chartWidth} / ${getChartHeight()}` }}
+        >
+          <Chart
+            height="100%"
+            options={options}
+            series={heatmapSeries}
+            type="heatmap"
+            width="100%"
+          />
+        </div>
       </div>
     </div>
   )
diff --git a/frontend/src/components/InfoBlock.tsx b/frontend/src/components/InfoBlock.tsx
index 281e9777f1..3787d7723d 100644
--- a/frontend/src/components/InfoBlock.tsx
+++ b/frontend/src/components/InfoBlock.tsx
@@ -7,14 +7,13 @@ import { pluralize } from 'utils/pluralize'
 const InfoBlock = ({
   className = '',
   icon,
-  label = '',
   pluralizedName,
   precision = 1,
   unit = '',
   value = 0,
 }: {
   className?: string
-  icon: IconType
+  icon?: IconType
   label?: string
   pluralizedName?: string
   precision?: number
@@ -26,15 +25,12 @@ const InfoBlock = ({
   const tooltipValue = value ? `${value.toLocaleString()} ${name}` : `No ${name}`
 
   return (
-    <div className={`flex ${className}`}>
-      <IconWrapper icon={icon} className="mt-1 mr-3 w-5" />
-      <div>
-        <div className="text-sm md:text-base">
-          {label && <div className="text-sm font-medium">{label}</div>}
-          <Tooltip content={tooltipValue} delay={100} closeDelay={100} showArrow placement="top">
-            {formattedValue}
-          </Tooltip>
-        </div>
+    <div className={`flex items-center gap-2 ${className}`}>
+      {icon && <IconWrapper icon={icon} className="w-5 text-gray-500" />}
+      <div className="text-base text-gray-600 dark:text-gray-300">
+        <Tooltip content={tooltipValue} delay={100} closeDelay={100} showArrow placement="top">
+          {formattedValue}
+        </Tooltip>
       </div>
     </div>
   )
diff --git a/frontend/src/components/ItemCardList.tsx b/frontend/src/components/ItemCardList.tsx
index 1bf4a997dc..93a3c58f4c 100644
--- a/frontend/src/components/ItemCardList.tsx
+++ b/frontend/src/components/ItemCardList.tsx
@@ -90,7 +90,7 @@ const ItemCardList = ({
   <SecondaryCard icon={icon} title={title}>
     {data && data.length > 0 ? (
       <div
-        className={`grid ${showSingleColumn ? 'grid-cols-1' : 'gap-4 gap-y-0 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3'}`}
+        className={`grid gap-4 ${showSingleColumn ? 'grid-cols-1' : 'sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3'}`}
       >
         {data.map((item, index) => {
           const getItemKey = (i: ItemCardData, idx: number): string => {
@@ -107,7 +107,7 @@ const ItemCardList = ({
           return (
             <div
               key={getItemKey(item, index)}
-              className="mb-4 w-full rounded-lg bg-gray-200 p-4 dark:bg-gray-700"
+              className="w-full rounded-lg bg-gray-200 p-4 dark:bg-gray-700"
             >
               <div className="flex w-full flex-col justify-between">
                 <div className="flex w-full items-center">
diff --git a/frontend/src/components/Milestones.tsx b/frontend/src/components/Milestones.tsx
index 5d708718f9..cab31f37e3 100644
--- a/frontend/src/components/Milestones.tsx
+++ b/frontend/src/components/Milestones.tsx
@@ -1,12 +1,6 @@
 import { useRouter } from 'next/navigation'
 import React from 'react'
-import {
-  FaCalendar,
-  FaFolderOpen,
-  FaSignsPost,
-  FaCircleCheck,
-  FaCircleExclamation,
-} from 'react-icons/fa6'
+import { FaCalendar, FaFolderOpen, FaSignsPost, FaCircleExclamation } from 'react-icons/fa6'
 import type { Milestone } from 'types/milestone'
 import { formatDate } from 'utils/dateFormatter'
 import AnchorTitle from 'components/AnchorTitle'
@@ -43,10 +37,6 @@ const Milestones: React.FC<ProjectMilestonesProps> = ({
             <FaCalendar className="mr-2 h-4 w-4" />
             <span>{item.createdAt ? formatDate(item.createdAt) : 'N/A'}</span>
           </div>
-          <div className="mr-4 flex items-center">
-            <FaCircleCheck className="mr-2 h-4 w-4" />
-            <span>{item.closedIssuesCount} closed</span>
-          </div>
           <div className="mr-4 flex items-center">
             <FaCircleExclamation className="mr-2 h-4 w-4" />
             <span>{item.openIssuesCount} open</span>
diff --git a/frontend/src/components/RecentReleases.tsx b/frontend/src/components/RecentReleases.tsx
index d1c02d6aff..e736b6a8e8 100644
--- a/frontend/src/components/RecentReleases.tsx
+++ b/frontend/src/components/RecentReleases.tsx
@@ -27,7 +27,7 @@ const RecentReleases: React.FC<RecentReleasesProps> = ({
     >
       {data && data.length > 0 ? (
         <div
-          className={`grid ${showSingleColumn ? 'grid-cols-1' : 'gap-4 gap-y-0 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3'}`}
+          className={`grid gap-4 ${showSingleColumn ? 'grid-cols-1' : 'sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3'}`}
         >
           {data.map((item) => (
             <Release
diff --git a/frontend/src/components/Release.tsx b/frontend/src/components/Release.tsx
index 935dfd8b50..2c0c34ec0a 100644
--- a/frontend/src/components/Release.tsx
+++ b/frontend/src/components/Release.tsx
@@ -37,7 +37,7 @@ const Release: React.FC<ReleaseProps> = ({
   }
 
   return (
-    <div className={`mb-4 w-full rounded-lg bg-gray-200 p-4 dark:bg-gray-700 ${className}`}>
+    <div className={`w-full rounded-lg bg-gray-200 p-4 dark:bg-gray-700 ${className}`}>
       <div className="flex w-full flex-col justify-between">
         <div className="flex w-full items-center">
           {showAvatar && release?.author && (
diff --git a/frontend/src/components/RepositoryCard.tsx b/frontend/src/components/RepositoryCard.tsx
index 03c0b5a661..985ec273b2 100644
--- a/frontend/src/components/RepositoryCard.tsx
+++ b/frontend/src/components/RepositoryCard.tsx
@@ -11,7 +11,7 @@ import StatusBadge from 'components/StatusBadge'
 import { TruncatedText } from 'components/TruncatedText'
 
 const RepositoryCard: React.FC<RepositoryCardListProps> = ({
-  maxInitialDisplay = 4,
+  maxInitialDisplay = 6,
   repositories,
 }) => {
   const [showAllRepositories, setShowAllRepositories] = useState(false)
@@ -25,7 +25,7 @@ const RepositoryCard: React.FC<RepositoryCardListProps> = ({
     : repositories.slice(0, maxInitialDisplay)
   return (
     <div>
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
         {displayedRepositories.map((repository) => {
           return (
             <RepositoryItem
diff --git a/frontend/src/components/cards/MemberDetailSidebar.tsx b/frontend/src/components/cards/MemberDetailSidebar.tsx
new file mode 100644
index 0000000000..f934efb588
--- /dev/null
+++ b/frontend/src/components/cards/MemberDetailSidebar.tsx
@@ -0,0 +1,102 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import React from 'react'
+import { FaCodeMerge, FaFolderOpen, FaPersonWalkingArrowRight, FaUserPlus } from 'react-icons/fa6'
+
+import { User } from 'types/user'
+import { formatDate } from 'utils/dateFormatter'
+import InfoBlock from 'components/InfoBlock'
+
+type Detail = {
+  label: string
+  value: string
+}
+
+type Stat = {
+  icon: typeof FaCodeMerge
+  pluralizedName?: string
+  unit: string
+  value: number
+}
+
+interface MemberDetailSidebarProps {
+  user: User
+  formattedBio: React.ReactNode
+}
+
+const MemberDetailSidebar = ({ user, formattedBio }: MemberDetailSidebarProps) => {
+  const details: Detail[] = [
+    { label: 'Joined', value: user.createdAt ? formatDate(user.createdAt) : 'Not available' },
+    { label: 'Email', value: user.email || 'N/A' },
+    { label: 'Company', value: user.company || 'N/A' },
+    { label: 'Location', value: user.location || 'N/A' },
+  ]
+
+  const stats: Stat[] = [
+    { icon: FaPersonWalkingArrowRight, value: user.followersCount || 0, unit: 'Follower' },
+    { icon: FaUserPlus, value: user.followingCount || 0, unit: 'Following' },
+    {
+      icon: FaFolderOpen,
+      pluralizedName: 'Repositories',
+      unit: 'Repository',
+      value: user.publicRepositoriesCount ?? 0,
+    },
+    { icon: FaCodeMerge, value: user.contributionsCount || 0, unit: 'Contribution' },
+  ]
+
+  return (
+    <div className="flex h-fit flex-col gap-6 sm:flex-row sm:gap-8 xl:flex-col xl:gap-5">
+      <div className="flex min-w-0 flex-col items-start gap-0 text-left sm:flex-1 xl:flex-col xl:items-start">
+        <Image
+          width={200}
+          height={200}
+          className="aspect-square size-32 shrink-0 rounded-full border-2 border-white bg-white object-cover sm:size-40 xl:h-auto xl:w-full dark:border-gray-800 dark:bg-gray-600/60"
+          src={user.avatarUrl || '/placeholder.svg'}
+          alt={user.name || user.login || 'User Avatar'}
+        />
+        <div className="mt-6 w-full overflow-x-auto text-left">
+          <h2 className="text-3xl font-semibold text-gray-900 dark:text-gray-100">
+            {user.name || user.login}
+          </h2>
+          <Link
+            href={user.url || '#'}
+            className="text-base text-gray-500 hover:underline dark:text-gray-400"
+          >
+            @{user.login}
+          </Link>
+          {user.bio && (
+            <div className="mt-4 text-base leading-relaxed wrap-break-word whitespace-pre-wrap text-gray-600 dark:text-gray-400">
+              {formattedBio}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-0 sm:w-72 sm:shrink-0 sm:gap-6 xl:w-full xl:gap-0">
+        <div className="space-y-4 border-t border-gray-200 py-5 text-base text-gray-600 sm:rounded-lg sm:border-t-0 sm:bg-gray-100 sm:p-6 sm:shadow-md xl:rounded-none xl:border-t xl:bg-transparent xl:px-0 xl:py-5 xl:shadow-none dark:border-gray-700 dark:text-gray-300 sm:dark:bg-gray-800 xl:dark:bg-transparent">
+          {details.map((detail) => (
+            <div key={detail.label} className="flex items-start gap-1">
+              <strong className="text-gray-800 dark:text-gray-100">{detail.label} : </strong>
+              <span>{detail.value}</span>
+            </div>
+          ))}
+        </div>
+
+        <div className="space-y-4 border-t border-gray-200 py-5 text-base text-gray-600 sm:rounded-lg sm:border-t-0 sm:bg-gray-100 sm:p-6 sm:shadow-md xl:rounded-none xl:border-t xl:bg-transparent xl:px-0 xl:py-5 xl:shadow-none dark:border-gray-700 dark:text-gray-300 sm:dark:bg-gray-800 xl:dark:bg-transparent">
+          {stats.map((stat) => (
+            <InfoBlock
+              key={`${stat.unit}-${stat.value}`}
+              icon={stat.icon}
+              label={stat.pluralizedName ?? stat.unit}
+              pluralizedName={stat.pluralizedName}
+              unit={stat.unit}
+              value={stat.value}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default MemberDetailSidebar
diff --git a/frontend/src/components/cards/RepositoriesModules.tsx b/frontend/src/components/cards/RepositoriesModules.tsx
index d93bed8d54..9a1c5b7993 100644
--- a/frontend/src/components/cards/RepositoriesModules.tsx
+++ b/frontend/src/components/cards/RepositoriesModules.tsx
@@ -25,7 +25,7 @@ const RepositoriesModules = ({
     <>
       {repositories.length > 0 && (
         <SecondaryCard icon={FaFolderOpen} title={<AnchorTitle title="Repositories" />}>
-          <RepositoryCard maxInitialDisplay={4} repositories={repositories} />
+          <RepositoryCard maxInitialDisplay={6} repositories={repositories} />
         </SecondaryCard>
       )}
       {modules &&
diff --git a/frontend/src/components/skeletons/MemberDetailsPageSkeleton.tsx b/frontend/src/components/skeletons/MemberDetailsPageSkeleton.tsx
index 387b295924..a1c6ce924f 100644
--- a/frontend/src/components/skeletons/MemberDetailsPageSkeleton.tsx
+++ b/frontend/src/components/skeletons/MemberDetailsPageSkeleton.tsx
@@ -4,158 +4,139 @@ import {
   CardSection,
   PageWrapper,
   SectionHeader,
-  TitleSection,
   TwoColumnSection,
 } from 'components/skeletons/sharedSkeletons'
 
 const MemberDetailsPageSkeleton: React.FC = () => {
   return (
     <PageWrapper>
-      <TitleSection skeletonClassName="h-10 w-64" />
-
-      {/* User Summary Card - bg-gray-100 like SecondaryCard */}
-      <div className="mt-6 mb-8 rounded-lg bg-gray-100 p-6 shadow-md dark:bg-gray-800">
-        <div className="mt-4 flex flex-col items-center lg:flex-row">
-          {/* Avatar */}
-          <Skeleton
-            className="mb-4 h-[200px] w-[200px] shrink-0 rounded-full lg:mr-6 lg:mb-0"
-            aria-hidden="true"
-          />
-
-          {/* User Info and Heatmap */}
-          <div className="w-full text-center lg:text-left">
-            <div className="pl-0 lg:pl-4">
-              {/* Username with badge */}
-              <div className="mb-1 flex items-center justify-center gap-3 text-center text-sm lg:justify-start lg:text-left">
-                <Skeleton className="h-6 w-40" aria-hidden="true" />
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-6 xl:flex-row xl:items-start">
+          {/* Sidebar */}
+          <aside className="w-full shrink-0 xl:w-[18rem]">
+            <div className="h-fit space-y-6 md:space-y-8">
+              <div className="flex flex-col items-start gap-0 text-left md:gap-6">
+                <Skeleton className="aspect-square size-32 shrink-0 rounded-full border-2 border-white bg-white sm:size-40 xl:h-auto xl:w-full dark:border-gray-800 dark:bg-gray-600/60" />
+                <div className="mt-6 mb-2 flex w-full flex-col gap-2 overflow-x-auto text-left">
+                  <Skeleton className="h-8 w-3/4 rounded-lg" />
+                  <Skeleton className="h-5 w-1/2 rounded-lg" />
+                  <div className="mt-4 space-y-2">
+                    <Skeleton className="h-4 w-full rounded-lg" />
+                    <Skeleton className="h-4 w-5/6 rounded-lg" />
+                    <Skeleton className="h-4 w-4/6 rounded-lg" />
+                  </div>
+                </div>
               </div>
-              {/* Bio */}
-              <Skeleton className="mb-1 h-4 w-full max-w-xl" aria-hidden="true" />
-            </div>
 
-            {/* Heatmap - Only on desktop */}
-            <div className="mt-4 hidden w-full lg:block">
-              <div className="overflow-hidden rounded-lg bg-white dark:bg-gray-800">
-                <Skeleton className="h-32 w-full" aria-hidden="true" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Main Grid - User Details and Statistics */}
-      <div className="grid grid-cols-1 gap-6 md:grid-cols-7">
-        {/* User Details Card */}
-        <CardSection minHeight="min-h-[210px]" className="gap-2" colSpan="md:col-span-5">
-          <SectionHeader titleSkeletonWidth="w-36" />
-          <div>
-            {[1, 2, 3, 4].map((i) => (
-              <div key={`detail-${i}`} className="pb-1">
-                <div className="flex flex-row gap-1">
-                  <Skeleton className="h-5 w-20" aria-hidden="true" />
-                  <Skeleton className="h-5 w-32" aria-hidden="true" />
+              <div className="space-y-3 border-t border-gray-200 py-5 dark:border-gray-700">
+                <div className="space-y-4">
+                  {[1, 2, 3, 4].map((i) => (
+                    <div key={`detail-${i}`} className="flex items-start gap-2">
+                      <Skeleton className="h-5 w-16 rounded-lg" />
+                      <Skeleton className="h-5 w-24 rounded-lg" />
+                    </div>
+                  ))}
                 </div>
               </div>
-            ))}
-          </div>
-        </CardSection>
 
-        {/* Statistics Card */}
-        <CardSection className="gap-2" colSpan="md:col-span-2">
-          <SectionHeader titleSkeletonWidth="w-24" />
-          <div>
-            {[1, 2, 3, 4].map((i) => (
-              <div key={`stat-${i}`}>
-                <div className="pb-1">
-                  <div className="flex items-center gap-2">
-                    <Skeleton className="h-4 w-4" aria-hidden="true" />
-                    <Skeleton className="h-4 w-16" aria-hidden="true" />
-                    <Skeleton className="h-4 w-20" aria-hidden="true" />
-                  </div>
+              <div className="space-y-3 border-t border-gray-200 py-5 dark:border-gray-700">
+                <div className="space-y-4">
+                  {[1, 2, 3, 4].map((i) => (
+                    <div key={`stat-${i}`} className="flex items-center gap-3">
+                      <Skeleton className="h-8 w-8 rounded-full" />
+                      <div className="flex w-full flex-col gap-1">
+                        <Skeleton className="h-4 w-12 rounded-lg" />
+                        <Skeleton className="h-3 w-20 rounded-lg" />
+                      </div>
+                    </div>
+                  ))}
                 </div>
               </div>
-            ))}
-          </div>
-        </CardSection>
-      </div>
-
-      {/* Two Column Layout - Issues and Milestones */}
-      <TwoColumnSection
-        sections={[
-          {
-            keyPrefix: 'issue',
-            titleWidth: 'w-32',
-            itemTitleWidth: 'w-4/5',
-            minHeight: 'min-h-[600px]',
-          },
-          {
-            keyPrefix: 'milestone',
-            titleWidth: 'w-40',
-            itemTitleWidth: 'w-4/5',
-            minHeight: 'min-h-[600px]',
-          },
-        ]}
-      />
+            </div>
+          </aside>
 
-      {/* Two Column Layout - Pull Requests and Releases */}
-      <TwoColumnSection
-        sections={[
-          {
-            keyPrefix: 'pr',
-            titleWidth: 'w-48',
-            itemTitleWidth: 'w-3/4',
-            minHeight: 'min-h-[600px]',
-          },
-          {
-            keyPrefix: 'release',
-            titleWidth: 'w-48',
-            itemTitleWidth: 'w-3/4',
-            minHeight: 'min-h-[600px]',
-          },
-        ]}
-      />
+          {/* Main content */}
+          <div className="flex min-w-0 flex-1 flex-col gap-6">
+            {/* Heatmap skeleton */}
+            <div className="overflow-hidden rounded-lg bg-gray-100 p-6 dark:bg-gray-800">
+              <Skeleton className="h-40 w-full rounded-lg" />
+            </div>
 
-      {/* Repositories Section */}
-      <CardSection>
-        <SectionHeader titleSkeletonWidth="w-32" />
-        <div>
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-            {[1, 2, 3, 4].map((i) => (
-              <div
-                key={`repo-${i}`}
-                className="flex h-48 w-full flex-col gap-3 rounded-lg border-1 border-gray-200 p-4 shadow-xs ease-in-out hover:shadow-md dark:border-gray-700 dark:bg-gray-800"
-              >
-                <Skeleton className="h-5 w-3/4" aria-hidden="true" />
-                <div className="flex flex-col gap-2 text-sm">
-                  <div className="flex items-center gap-2">
-                    <Skeleton className="h-4 w-4" aria-hidden="true" />
-                    <Skeleton className="h-4 w-10" aria-hidden="true" />
-                    <Skeleton className="h-4 w-10" aria-hidden="true" />
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <Skeleton className="h-4 w-4" aria-hidden="true" />
-                    <Skeleton className="h-4 w-10" aria-hidden="true" />
-                    <Skeleton className="h-4 w-12" aria-hidden="true" />
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <Skeleton className="h-4 w-4" aria-hidden="true" />
-                    <Skeleton className="h-4 w-16" aria-hidden="true" />
-                    <Skeleton className="h-4 w-20" aria-hidden="true" />
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <Skeleton className="h-4 w-4" aria-hidden="true" />
-                    <Skeleton className="h-4 w-10" aria-hidden="true" />
-                    <Skeleton className="h-4 w-10" aria-hidden="true" />
-                  </div>
+            {/* Repositories Section */}
+            <CardSection className="mb-0! grow">
+              <SectionHeader titleSkeletonWidth="w-32" />
+              <div>
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                  {[1, 2, 3, 4, 5, 6].map((i) => (
+                    <div
+                      key={`repo-${i}`}
+                      className="flex h-48 w-full flex-1 flex-col gap-3 rounded-lg border border-gray-200 p-4 shadow-xs dark:border-gray-700 dark:bg-gray-800"
+                    >
+                      <Skeleton className="h-5 w-3/4 rounded-lg" aria-hidden="true" />
+                      <div className="mt-2 flex flex-col gap-2 text-sm">
+                        <div className="flex items-center gap-2">
+                          <Skeleton className="h-4 w-4 rounded-full" aria-hidden="true" />
+                          <Skeleton className="h-4 w-10 rounded-lg" aria-hidden="true" />
+                          <Skeleton className="h-4 w-10 rounded-lg" aria-hidden="true" />
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Skeleton className="h-4 w-4 rounded-full" aria-hidden="true" />
+                          <Skeleton className="h-4 w-10 rounded-lg" aria-hidden="true" />
+                          <Skeleton className="h-4 w-12 rounded-lg" aria-hidden="true" />
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Skeleton className="h-4 w-4 rounded-full" aria-hidden="true" />
+                          <Skeleton className="h-4 w-16 rounded-lg" aria-hidden="true" />
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Skeleton className="h-4 w-4 rounded-full" aria-hidden="true" />
+                          <Skeleton className="h-4 w-10 rounded-lg" aria-hidden="true" />
+                        </div>
+                      </div>
+                    </div>
+                  ))}
                 </div>
               </div>
-            ))}
-          </div>
-          <div className="mt-4 flex justify-start">
-            <Skeleton className="h-10 w-24 rounded-md" aria-hidden="true" />
+            </CardSection>
+
+            {/* Two Column Layout - Issues and Pull Requests */}
+            <TwoColumnSection
+              sections={[
+                {
+                  keyPrefix: 'issue',
+                  titleWidth: 'w-32',
+                  itemTitleWidth: 'w-4/5',
+                  minHeight: 'min-h-[400px]',
+                },
+                {
+                  keyPrefix: 'pr',
+                  titleWidth: 'w-48',
+                  itemTitleWidth: 'w-3/4',
+                  minHeight: 'min-h-[400px]',
+                },
+              ]}
+            />
+
+            {/* Two Column Layout - Milestones and Releases */}
+            <TwoColumnSection
+              sections={[
+                {
+                  keyPrefix: 'milestone',
+                  titleWidth: 'w-40',
+                  itemTitleWidth: 'w-4/5',
+                  minHeight: 'min-h-[400px]',
+                },
+                {
+                  keyPrefix: 'release',
+                  titleWidth: 'w-48',
+                  itemTitleWidth: 'w-3/4',
+                  minHeight: 'min-h-[400px]',
+                },
+              ]}
+            />
           </div>
         </div>
-      </CardSection>
+      </div>
     </PageWrapper>
   )
 }