diff --git a/images/logo new.jpg b/images/logo new.jpg
new file mode 100644
index 000000000..ed2963273
Binary files /dev/null and b/images/logo new.jpg differ
diff --git a/index.html b/index.html
index 5daa2330e..649fa6fd4 100644
--- a/index.html
+++ b/index.html
@@ -1,90 +1,244 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Blazer</title>
-    <link rel="stylesheet" href="/main.css">
-    <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.2.0/css/all.css">
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>LONE STAR PROXY</title>
+  <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.2.0/css/all.css">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: Arial, sans-serif;
+    }
+
+    body {
+      background: linear-gradient(to bottom right, #111827, #1f2937);
+      color: white;
+      min-height: 100vh;
+    }
+
+    nav {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 15px;
+      padding: 20px;
+      background: rgba(255,255,255,0.05);
+      backdrop-filter: blur(10px);
+      border-bottom: 1px solid rgba(255,255,255,0.1);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    nav img {
+      width: 60px;
+      height: 60px;
+      border-radius: 12px;
+      object-fit: cover;
+    }
+
+    nav h1 {
+      font-size: 2rem;
+      color: #60a5fa;
+      letter-spacing: 2px;
+    }
+
+    .featured {
+      padding: 40px 20px;
+    }
+
+    .featured h1 {
+      margin-bottom: 20px;
+      color: #93c5fd;
+    }
+
+    .featured-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 20px;
+    }
+
+    .game-card {
+      position: relative;
+      overflow: hidden;
+      border-radius: 16px;
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+    }
+
+    .game-card:hover {
+      transform: translateY(-8px);
+      box-shadow: 0 10px 25px rgba(96,165,250,0.3);
+    }
+
+    .game-card img {
+      width: 100%;
+      display: block;
+      border-radius: 16px;
+    }
+
+    .play-button {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 2rem;
+      color: white;
+      background: rgba(0,0,0,0.5);
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+
+    .game-card:hover .play-button {
+      opacity: 1;
+    }
+
+    .content {
+      padding: 30px 20px;
+    }
+
+    hr {
+      border: none;
+      height: 1px;
+      background: rgba(255,255,255,0.1);
+      margin-bottom: 30px;
+    }
+
+    .search {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 30px;
+    }
+
+    .search input {
+      width: 70%;
+      max-width: 500px;
+      padding: 14px;
+      border: none;
+      border-radius: 12px 0 0 12px;
+      outline: none;
+      font-size: 1rem;
+    }
+
+    .search button {
+      padding: 14px 20px;
+      border: none;
+      background: #3b82f6;
+      color: white;
+      font-size: 1rem;
+      border-radius: 0 12px 12px 0;
+      cursor: pointer;
+      transition: background 0.3s ease;
+    }
+
+    .search button:hover {
+      background: #2563eb;
+    }
+
+    #games {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: 20px;
+    }
+
+    #games a {
+      display: block;
+      border-radius: 14px;
+      overflow: hidden;
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+    }
+
+    #games a:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 20px rgba(96,165,250,0.25);
+    }
+
+    #games img {
+      width: 100%;
+      height: 220px;
+      object-fit: cover;
+      display: block;
+    }
+
+    @media (max-width: 768px) {
+      nav h1 {
+        font-size: 1.4rem;
+      }
+
+      .search input {
+        width: 60%;
+      }
+    }
+  </style>
 </head>
 <body>
-    <nav>
-        <img src="images/logo.png" alt="logo">
-        <h1>BLAZER</h1>
-    </nav>
-
-    <div class="featured">
-        <h1>Popular:</h1>
-        <div class="column">
-          <a href="games/bob-the-robber-2/">
-            <img src="images/bob-the-robber-2.png">
-            <div class="play-button">
-                <i class="fa-solid fa-play"></i>
-            </div>
-          </a>
-          <a href="games/vex7/">
-            <img src="images/vex7.jpeg">
-            <div class="play-button">
-                <i class="fa-solid fa-play"></i>
-            </div>
-          </a>
-        </div>
-        <div class="row">
-          <a href="games/vex6">
-            <img src="images/vex6.jpeg">
-            <div class="play-button">
-                <i class="fa-solid fa-play"></i>
-            </div>
-          </a>
-        </div>
-        <div class="row">
-          <a href="games/drive-mad/">
-            <img src="images/drive-mad.jpg">
-            <div class="play-button">
-                <i class="fa-solid fa-play"></i>
-            </div>
-            </a>
-        </div>
-        <div class="column">
-          <a href="games/moto-x3m/">
-            <img src="images/moto-x3m.jpg">
-            <div class="play-button">
-                <i class="fa-solid fa-play"></i>
-            </div>
-          </a>
-          <a href="games/retro-bowl/">
-            <img src="images/retro-bowl.jpg">
-            <div class="play-button">
-                <i class="fa-solid fa-play"></i>
-            </div>
-          </a>
-        </div>
-        </div>
-    </div>
 
-    <div class="content">
+  <nav>
+    <img src="images/logo new.jpg" alt="logo">
+    <h1>LONE STAR PROXY</h1>
+  </nav>
+
+  <section class="featured">
+    <h1>Popular Games</h1>
+    <div class="featured-grid">
+      <a class="game-card" href="games/bob-the-robber-2/">
+        <img src="images/bob-the-robber-2.png" alt="Bob The Robber 2">
+        <div class="play-button"><i class="fa-solid fa-play"></i></div>
+      </a>
+
+      <a class="game-card" href="games/vex7/">
+        <img src="images/vex7.jpeg" alt="Vex 7">
+        <div class="play-button"><i class="fa-solid fa-play"></i></div>
+      </a>
 
+      <a class="game-card" href="games/vex6/">
+        <img src="images/vex6.jpeg" alt="Vex 6">
+        <div class="play-button"><i class="fa-solid fa-play"></i></div>
+      </a>
+
+      <a class="game-card" href="games/drive-mad/">
+        <img src="images/drive-mad.jpg" alt="Drive Mad">
+        <div class="play-button"><i class="fa-solid fa-play"></i></div>
+      </a>
+
+      <a class="game-card" href="games/moto-x3m/">
+        <img src="images/moto-x3m.jpg" alt="Moto X3M">
+        <div class="play-button"><i class="fa-solid fa-play"></i></div>
+      </a>
+
+      <a class="game-card" href="games/retro-bowl/">
+        <img src="images/retro-bowl.jpg" alt="Retro Bowl">
+        <div class="play-button"><i class="fa-solid fa-play"></i></div>
+      </a>
+    </div>
+  </section>
+
+  <div class="content">
     <hr>
 
     <div class="search">
-        <input type="text" placeholder="Search..." oninput="">
-        <button><i class="fas fa-search"></i></button>
+      <input type="text" placeholder="Search games...">
+      <button><i class="fas fa-search"></i></button>
     </div>
 
     <div id="games">
-        <a href="games/bob-the-robber-2/"><img src="images/bob-the-robber-2.png" alt="bob the robber 2"></a>
-        <a href="games/vex7/"><img src="images/vex7.jpeg" alt="vex 7"></a>
-        <a href="games/vex6/"><img src="images/vex6.jpeg" alt="vex 6"></a>
-        <a href="games/"><img src="images/mc.png" alt="minecraft"></a>
-        <a href="games/moto-x3m/"><img src="images/moto-x3m.jpg" alt="moto x3m"></a>
-        <a href="games/retro-bowl/"><img src="images/retro-bowl.jpg" alt="retrobowl"></a>
-        <a href="games/drive-mad/"><img src="images/drive-mad.jpg" alt="drive mad"></a>
-        <a href="games/slope/"><img src="images/slope.jpg" alt="slope"></a>
-        <a href="games/motox3m2/"><img src="images/motox3m2.jpg" alt="moto x3m2"></a>
+      <a href="games/bob-the-robber-2/"><img src="images/bob-the-robber-2.png" alt="Bob The Robber 2"></a>
+      <a href="games/vex7/"><img src="images/vex7.jpeg" alt="Vex 7"></a>
+      <a href="games/vex6/"><img src="images/vex6.jpeg" alt="Vex 6"></a>
+      <a href="games/"><img src="images/mc.png" alt="Minecraft"></a>
+      <a href="games/moto-x3m/"><img src="images/moto-x3m.jpg" alt="Moto X3M"></a>
+      <a href="games/retro-bowl/"><img src="images/retro-bowl.jpg" alt="Retro Bowl"></a>
+      <a href="games/drive-mad/"><img src="images/drive-mad.jpg" alt="Drive Mad"></a>
+      <a href="games/slope/"><img src="images/slope.jpg" alt="Slope"></a>
+      <a href="games/motox3m2/"><img src="images/motox3m2.jpg" alt="Moto X3M 2"></a>
     </div>
-    </div>
-</body>
-</html>
+  </div>
 
-<script src="script.js"></script>
\ No newline at end of file
+  <script src="script.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000..438652d39
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,13 @@
+{
+  "name": "BlazerGames",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "BlazerGames",
+      "version": "1.0.0",
+      "license": "ISC"
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 000000000..546eb29e0
--- /dev/null
+++ b/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "BlazerGames",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "npx serve .",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}
\ No newline at end of file
