diff --git a/e2e-tests /dashboard.e2e.test.ts b/e2e-tests /dashboard.e2e.test.ts
new file mode 100644
index 0000000..4a6ca21
--- /dev/null
+++ b/e2e-tests /dashboard.e2e.test.ts	
@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('GitHub Insights Dashboard', () => {
+  test('should display the dashboard title', async ({ page }) => {
+    await page.goto('/')
+    const title = await page.title()
+    expect(title).toBe('GitHub Insights Dashboard')
+  })
+
+  test('should navigate to the Commit List page', async ({ page }) => {
+    await page.goto('/')
+    const commitListLink = page.getByRole('link', { name: 'Commit List' })
+    await commitListLink.click()
+    await expect(page).toHaveURL('/commits') // Adjust based on your routing
+    const heading = await page.getByRole('heading', { name: 'Commit List' }) // Replace with actual heading
+    await expect(heading).toBeVisible()
+  })
+})
diff --git a/jest.config.cjs b/jest.config.cjs
index ce2386c..2360c4b 100644
--- a/jest.config.cjs
+++ b/jest.config.cjs
@@ -2,11 +2,12 @@ module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
-  testMatch: ['**/*.test.ts', '**/*.test.tsx'],
+  testMatch: ['**/*.test.tsx'],
   moduleDirectories: ['node_modules', 'src'],
   testPathIgnorePatterns: [
     '/node_modules/',
     '/playwright-tests/',
+    '/e2e-tests/',
     '/cypress-tests/',
     '/dist/',
   ],
diff --git a/package.json b/package.json
index 8c3c08d..f7a5a22 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "start": "echo '🚀 Starting the app...' && webpack serve --config webpack.config.mjs && echo '🌟✨ App is up and running! Visit http://localhost:3002/github-insights-dashboard/ ✨'",
     "build": "echo '🔨 Building the app...' && webpack --config webpack.config.mjs && echo '🏗️✨ Build completed! Your app is ready! ✨'",
     "test": "echo '🧪 Running tests...' && jest --config jest.config.cjs --coverage",
+    "test:e2e": "echo '🎭 Running Playwright E2E tests...' && npx playwright test",
     "format": "echo '🖋️ Formatting code... Please wait.' && prettier --write . && echo '✅ Your code is formatted!'",
     "lint": "echo '🧹 Linting code... Please wait.' && eslint -c eslint.config.js . && echo '✅ Linting complete. Your code is clean!'",
     "lint-fix": "echo '🔧 Linting and fixing issues...' && eslint --fix . && prettier --write .",
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000..09f5b19
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig } from '@playwright/test'
+import { fileURLToPath } from 'url'
+import { resolve, dirname } from 'path'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+export default defineConfig({
+  testDir: './e2e-tests', // Adjusted to point to the root's e2e-tests folder
+  timeout: 30000, // Timeout for each test
+  retries: 2, // Retry failed tests
+  use: {
+    headless: true, // Run tests in headless mode
+    baseURL: `file://${resolve(__dirname, './dist/github-insights-dashboard/index.html')}`, // Path to your built app
+    viewport: { width: 1280, height: 720 },
+    ignoreHTTPSErrors: true,
+  },
+})
diff --git a/src/App.test.tsx b/src/App.test.tsx
deleted file mode 100644
index 3f802fb..0000000
--- a/src/App.test.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import App from './App'
-
-jest.mock('./components/Auth', () => () => <div>Auth Component</div>)
-jest.mock('./components/Dashboard', () => () => <div>Dashboard Component</div>)
-jest.mock('./components/CommitList', () => () => (
-  <div>Commit List Component</div>
-))
-
-test('renders the Auth component', () => {
-  render(<App />)
-  const authComponent = screen.getByText('Auth Component')
-  expect(authComponent).not.toBeNull()
-})
diff --git a/src/App.tsx b/src/App.tsx
index bc4f3f6..ee8ca73 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,11 +7,8 @@ import CommitList from './components/CommitList'
 const App: React.FC = () => {
   const token = localStorage.getItem('githubToken')
 
-  const isLocal = window.location.origin.includes('localhost')
-  const basename = isLocal ? '/' : '/github-insights-dashboard'
-
   return (
-    <Router basename={basename}>
+    <Router basename="/github-insights-dashboard">
       <div className="p-4">
         <nav className="mb-4">
           <Link to="/" className="mr-4">