diff --git a/Bagian menu/Ace Spade.png b/Bagian menu/Ace Spade.png
new file mode 100644
index 0000000..06e48da
Binary files /dev/null and b/Bagian menu/Ace Spade.png differ
diff --git a/Bagian menu/Bagian menu.html b/Bagian menu/Bagian menu.html
new file mode 100644
index 0000000..ad94805
--- /dev/null
+++ b/Bagian menu/Bagian menu.html	
@@ -0,0 +1,317 @@
+<!doctype html>
+<html lang="id">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Hit & Run</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Playfair+Display:wght@600&display=swap"
+      rel="stylesheet"
+    />
+
+    <style>
+      :root {
+        --bg: #071827;
+        --table: #0b2a2f;
+        --felt: #0e3b33;
+        --accent: #f6c64f;
+        --muted: #8fb3b0;
+        --glass: rgba(255, 255, 255, 0.04);
+        --card: #ffffff;
+        --shadow: 0 10px 30px rgba(2, 6, 23, 0.6);
+        --radius: 14px;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        height: 100%;
+      }
+
+      body {
+        margin: 0;
+        font-family: 'Montserrat', system-ui, sans-serif;
+        background: linear-gradient(180deg, var(--bg) 0%, #03212b 100%);
+        color: #e6f7f2;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 32px;
+      }
+
+      .menu-wrap {
+        width: 100%;
+        max-width: 1100px;
+        display: grid;
+        grid-template-columns: 1fr 420px;
+        gap: 28px;
+        align-items: center;
+      }
+
+      .table-card {
+        background: linear-gradient(
+          180deg,
+          rgba(255, 255, 255, 0.02),
+          rgba(255, 255, 255, 0.01)
+        );
+        border-radius: 18px;
+        padding: 28px;
+        box-shadow: var(--shadow);
+        border: 1px solid rgba(255, 255, 255, 0.03);
+      }
+
+      .table-stage {
+        background: var(--table);
+        border-radius: 12px;
+        padding: 28px;
+        position: relative;
+      }
+
+      .table-top {
+        background: radial-gradient(
+            circle at 30% 20%,
+            rgba(255, 255, 255, 0.02),
+            transparent 30%
+          ),
+          linear-gradient(180deg, rgba(255, 255, 255, 0.01), transparent);
+        border-radius: 10px;
+        padding: 24px;
+        display: flex;
+        flex-direction: column;
+        gap: 18px;
+        align-items: center;
+      }
+
+      .table-name {
+        font-family: 'Playfair Display';
+        font-size: 28px;
+        color: var(--accent);
+      }
+
+      .felt {
+        background: linear-gradient(180deg, var(--felt), #0b3f32);
+        width: 100%;
+        height: 180px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+      }
+
+      .card-stack {
+        position: absolute;
+        left: 28px;
+        top: 40px;
+        transform: rotate(-12deg);
+      }
+
+      .card {
+        width: 92px;
+        height: 128px;
+        border-radius: 8px;
+        background: #fff;
+        box-shadow: 0 6px 20px rgba(2, 6, 23, 0.6);
+        padding: 8px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        border: 1px solid rgba(0, 0, 0, 0.06);
+      }
+
+      .card.small {
+        width: 72px;
+        height: 96px;
+      }
+
+      .chip-stack {
+        position: absolute;
+        right: 32px;
+        bottom: 22px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+      }
+
+      .chip {
+        width: 56px;
+        height: 56px;
+        border-radius: 50%;
+        background: linear-gradient(180deg, #ffdd7a, #d4a018);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 800;
+        color: #002;
+        box-shadow: 0 6px 18px rgba(2, 6, 23, 0.5);
+      }
+
+      .menu-box {
+        background: linear-gradient(
+          180deg,
+          rgba(255, 255, 255, 0.02),
+          rgba(255, 255, 255, 0.01)
+        );
+        border-radius: 12px;
+        padding: 22px;
+        border: 1px solid rgba(255, 255, 255, 0.03);
+      }
+
+      .title {
+        font-size: 22px;
+        font-weight: 800;
+      }
+
+      .subtitle {
+        color: var(--muted);
+        font-size: 13px;
+        margin-bottom: 18px;
+      }
+
+      .btn {
+        padding: 14px 20px;
+        border-radius: 12px;
+        font-weight: 700;
+        cursor: pointer;
+        width: 100%;
+        border: none;
+        box-shadow: 0 6px 18px rgba(2, 6, 23, 0.5);
+      }
+
+      .btn-primary {
+        background: linear-gradient(180deg, var(--accent), #e3b33b);
+        color: #052426;
+      }
+
+      .btn-ghost {
+        background: transparent;
+        border: 1px solid rgba(255, 255, 255, 0.06);
+        color: var(--muted);
+      }
+
+      .info-row {
+        display: flex;
+        gap: 12px;
+        margin-top: 14px;
+      }
+
+      .stat {
+        background: var(--glass);
+        padding: 10px;
+        border-radius: 10px;
+        min-width: 120px;
+        text-align: center;
+      }
+
+      .num {
+        font-size: 18px;
+        font-weight: 800;
+      }
+
+      .modal {
+        position: fixed;
+        inset: 0;
+        background: rgba(2, 6, 23, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        pointer-events: none;
+        transition: 0.18s;
+      }
+
+      .modal.open {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .modal-card {
+        background: linear-gradient(180deg, #06222b, #0b2b2f);
+        border-radius: 12px;
+        padding: 20px;
+        width: 420px;
+      }
+
+      @media (max-width: 880px) {
+        .menu-wrap {
+          grid-template-columns: 1fr;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="menu-wrap">
+      <div class="table-card">
+        <div class="table-stage">
+          <div class="table-top">
+            <div class="table-name">Hit & Run • Hit or you Lose.</div>
+
+            <div class="felt">
+              <div class="card-stack">
+                <div class="card small"
+                    style="
+                    transform: rotate(-6deg);
+                    background-image: url('Ace\ Spade.png');
+                    background-size: cover;
+                    background-position: center;
+                    ">
+                </div>
+
+                <div class="card" 
+                    style="
+                    transform: translateY(-28px) rotate(-4deg);
+                    background-image: url('King\ Hearts.jpg');
+                    background-size: cover;
+                    background-position: center;
+                    ">
+                </div>
+              </div>
+
+              <div class="chip-stack">
+                <div class="chip">100</div>
+                <div class="chip" style="width: 46px; height: 46px; font-size: 12px">
+                  25
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <aside class="menu-box">
+        <div class="player-profile" style="display:flex; align-items:center; gap:14px; margin-bottom:20px; background:rgba(255,255,255,0.04); padding:14px; border-radius:14px; border:1px solid rgba(255,255,255,0.06); box-shadow:0 8px 24px rgba(2,6,23,0.45)">
+          <div class="avatar" style="width:58px; height:58px; border-radius:50%; background:linear-gradient(180deg,#0e3b33,#0b2a2f); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; color:var(--accent); border:2px solid rgba(246,198,79,0.4); box-shadow:0 6px 14px rgba(0,0,0,0.5)">P</div>
+          <div style="display:flex; flex-direction:column; line-height:1.25">
+            <div style="font-weight:800; font-size:17px">Pemain Utama</div>
+            <div style="font-size:13px; color:var(--muted)">Saldo: <span style="color:var(--accent); font-weight:700">1,250</span></div>
+            <div style="font-size:12px; color:var(--muted)">Status: Masih Pemula Banghh....</div>
+          </div>
+        </div>
+
+        <div class="title">Selamat Datang, Player</div>
+        <div class="subtitle">
+          Dalam permainan Hit & Run. Satu kartu bisa menyelamatkanmu... atau menjatuhkanmu Siap berjudi dengan nasib?
+        </div>
+
+        <button class="btn btn-primary" id="playBtn">▶️ MAINKAN</button>
+
+        </div>
+      </aside>
+    </div>
+
+    <script>
+      const playBtn = document.getElementById('playBtn');
+
+      playBtn.addEventListener('click', () => {
+        alert('Memulai permainan...');
+      });
+    </script>
+  </body>
+</html>
diff --git a/Bagian menu/King Hearts.jpg b/Bagian menu/King Hearts.jpg
new file mode 100644
index 0000000..c3c74ba
Binary files /dev/null and b/Bagian menu/King Hearts.jpg differ
