diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..e663c5a
Binary files /dev/null and b/.DS_Store differ
diff --git a/HTML_boilerplate.html b/HTML_boilerplate.html
deleted file mode 100644
index 7d9fd5c..0000000
--- a/HTML_boilerplate.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>HTML5 Boilerplate</title>
-  <link rel="stylesheet" href="styles.css">
-</head>
-
-<body>
-  <h1>Page Title</h1>
-  <script src="scripts.js"></script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..41fc106
--- /dev/null
+++ b/index.html
@@ -0,0 +1,78 @@
+<!-- File: starter-template.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Professional Website - Starter Template</title>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Custom CSS -->
+    <link href="assets/css/style.css" rel="stylesheet">
+</head>
+<body>
+    <!-- Header with logo -->
+    <div class="p-2 bg-white text-center">
+        <img src="assets/image/logoproject1.png" alt="Company Logo" class="header-logo">
+    </div>
+
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-sm">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="index.html">
+                <img src="assets/image/logoproject1.png" alt="Logo" class="navbar-logo">
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarMenu">
+                <ul class="navbar-nav me-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.html">Home</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="Services.html">Services</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="contact.html">Contact</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="Aboutus.html">About Us</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main content -->
+    <div class="container mt-5">
+        <div class="row">
+            <div class="col-sm-4">
+                <h2>Page Heading</h2>
+                <p>Content for sidebar...</p>
+            </div>
+            <div class="col-sm-8">
+                <h2>Main Content</h2>
+                <div class="row">
+                    <div class="col-md-6">
+                        <h3>Section 1</h3>
+                        <p>Content for section 1...</p>
+                    </div>
+                    <div class="col-md-6">
+                        <h3>Section 2</h3>
+                        <p>Content for section 2...</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="footer">
+        <p>Footer Information<br>Contact details and address</p>
+    </div>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/pingpong.html b/pingpong.html
deleted file mode 100644
index 4c3774c..0000000
--- a/pingpong.html
+++ /dev/null
@@ -1,97 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <title>Simple Paddle Game</title>
-  <style>
-    body {
-      margin: 0;
-      background: #222;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100vh;
-      overflow: hidden;
-    }
-    #game {
-      position: relative;
-      width: 400px;
-      height: 300px;
-      border: 2px solid white;
-      background: #000;
-    }
-    #paddle {
-      position: absolute;
-      bottom: 10px;
-      left: 175px;
-      width: 50px;
-      height: 10px;
-      background: white;
-    }
-    #ball {
-      position: absolute;
-      width: 10px;
-      height: 10px;
-      background: red;
-      border-radius: 50%;
-    }
-  </style>
-</head>
-<body>
-
-<div id="game">
-  <div id="paddle"></div>
-  <div id="ball"></div>
-</div>
-
-<script>
-  const game = document.getElementById('game');
-  const paddle = document.getElementById('paddle');
-  const ball = document.getElementById('ball');
-
-  let paddleX = 175;
-  let ballX = 200, ballY = 100;
-  let ballSpeedX = 5, ballSpeedY = 5;
-
-  // Move paddle with mouse
-  game.addEventListener('mousemove', (e) => {
-    const rect = game.getBoundingClientRect();
-    paddleX = e.clientX - rect.left - 25;
-    // Keep paddle inside game area
-    if (paddleX < 0) paddleX = 0;
-    if (paddleX > 350) paddleX = 350;
-    paddle.style.left = paddleX + 'px';
-  });
-
-  // Game loop
-  setInterval(() => {
-    // Move ball
-    ballX += ballSpeedX;
-    ballY += ballSpeedY;
-
-    // Bounce off left/right walls
-    if (ballX <= 0 || ballX >= 390) ballSpeedX = -ballSpeedX;
-    // Bounce off top
-    if (ballY <= 0) ballSpeedY = -ballSpeedY;
-    // Bounce off paddle
-    if (
-      ballY >= 280 &&
-      ballX >= paddleX &&
-      ballX <= paddleX + 50
-    ) {
-      ballSpeedY = -ballSpeedY;
-    }
-    // Reset if ball falls
-    if (ballY > 300) {
-      ballX = 200;
-      ballY = 100;
-      ballSpeedY = 2;
-    }
-
-    ball.style.left = ballX + 'px';
-    ball.style.top = ballY + 'px';
-  }, 20);
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..ea3db26
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,43 @@
+/* File: starter-styles.css */
+/* Custom Styles - Starter Template */
+
+/* Header styles */
+.header-logo {
+    max-width: 300px;
+    height: auto;
+}
+
+.navbar-logo {
+    max-height: 3rem !important;
+}
+
+/* Navigation styles */
+.navbar {
+    /* TODO: Add custom navigation styling */
+}
+
+.nav-link {
+    /* TODO: Add custom link styling */
+}
+
+/* Content styles */
+.container {
+    /* TODO: Add custom container styling */
+}
+
+h1, h2, h3 {
+    /* TODO: Add custom heading styles */
+}
+
+/* Footer styles */
+.footer {
+    /* TODO: Add custom footer styling */
+    margin-top: 50px;
+    padding: 20px;
+    text-align: center;
+}
+
+/* Responsive adjustments */
+@media (max-width: 576px) {
+    /* TODO: Add mobile-specific styles */
+}
\ No newline at end of file
