diff --git a/app/views/break_escape/games/show.html.erb b/app/views/break_escape/games/show.html.erb
new file mode 100644
index 0000000..7e6ddd4
--- /dev/null
+++ b/app/views/break_escape/games/show.html.erb
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title><%= @mission.display_name %> - BreakEscape</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%# Load game CSS %>
+  <%= stylesheet_link_tag '/break_escape/css/styles.css' %>
+</head>
+<body>
+  <%# Game container - Phaser will render here %>
+  <div id="break-escape-game"></div>
+
+  <%# Loading indicator %>
+  <div id="loading" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #00ff00; font-size: 24px; display: block;">
+    Loading game...
+  </div>
+
+  <%# Bootstrap configuration for client %>
+  <script nonce="<%= content_security_policy_nonce %>">
+    window.breakEscapeConfig = {
+      gameId: <%= @game.id %>,
+      apiBasePath: '<%= game_path(@game) %>',
+      assetsPath: '/break_escape/assets',
+      csrfToken: '<%= form_authenticity_token %>'
+    };
+  </script>
+
+  <%# Load game JavaScript (ES6 module) %>
+  <%= javascript_include_tag '/break_escape/js/main.js', type: 'module', nonce: content_security_policy_nonce %>
+</body>
+</html>
diff --git a/app/views/break_escape/missions/index.html.erb b/app/views/break_escape/missions/index.html.erb
new file mode 100644
index 0000000..01019dc
--- /dev/null
+++ b/app/views/break_escape/missions/index.html.erb
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>BreakEscape - Select Mission</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 20px;
+      background: #1a1a1a;
+      color: #fff;
+    }
+    h1 {
+      text-align: center;
+      color: #00ff00;
+    }
+    .missions {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: 20px;
+      margin-top: 40px;
+    }
+    .mission-card {
+      background: #2a2a2a;
+      border: 2px solid #00ff00;
+      border-radius: 8px;
+      padding: 20px;
+      text-decoration: none;
+      color: #fff;
+      transition: transform 0.2s, box-shadow 0.2s;
+    }
+    .mission-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 5px 20px rgba(0, 255, 0, 0.3);
+    }
+    .mission-title {
+      font-size: 24px;
+      font-weight: bold;
+      margin-bottom: 10px;
+      color: #00ff00;
+    }
+    .mission-description {
+      font-size: 14px;
+      line-height: 1.6;
+      margin-bottom: 15px;
+    }
+    .mission-difficulty {
+      display: inline-block;
+      background: #00ff00;
+      color: #000;
+      padding: 5px 10px;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: bold;
+    }
+  </style>
+</head>
+<body>
+  <h1>🔓 BreakEscape - Select Your Mission</h1>
+
+  <div class="missions">
+    <% @missions.each do |mission| %>
+      <%= link_to mission_path(mission), class: 'mission-card' do %>
+        <div class="mission-title"><%= mission.display_name %></div>
+        <div class="mission-description">
+          <%= mission.description || "An exciting escape room challenge awaits..." %>
+        </div>
+        <div class="mission-difficulty">
+          Difficulty: <%= "⭐" * mission.difficulty_level %>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+</body>
+</html>
