diff --git a/index.html b/index.html
index f9b4df0..2698b03 100644
--- a/index.html
+++ b/index.html
@@ -30,30 +30,7 @@
 			<video id="vr180" poster="poster.jpg" title="Demo Video" crossOrigin="anonymous" playsinline>
 				<source src="sbs-video.mp4" type="video/mp4">
 			</video>
-			<button id="playBtn" aria-label="Play video">
-				<img src="vr180player/images/play.png" alt="Play">
-			</button>
-			<div id="panel">
-				<div id="status">
-					<p id="video-title">Title</p>
-					<div id="progress">
-						<p id="current-time">00:00:00</p>
-						<div id="bar">
-							<div id="played"></div>
-						</div>
-						<p id="total-time">00:00:00</p>
-					</div>
-				</div>
-				<div id="controls">
-					<button id="fullscreen"></button>
-					<div id="nav">
-						<button id="back"></button>
-						<button id="play2"></button>
-						<button id="forward"></button>
-					</div>
-					<button id="mute"></button>
-				</div>
-			</div>
+			<!-- UI elements will be dynamically inserted here by JavaScript -->
 		</div>
 	</main>
 	<script type="module" src="vr180player/vr180-player.js"></script>
diff --git a/vr180player/vr180-player.js b/vr180player/vr180-player.js
index d26d6c1..e7a2a72 100644
--- a/vr180player/vr180-player.js
+++ b/vr180player/vr180-player.js
@@ -104,15 +104,118 @@ const SOUND_ON_SVG_PATH = "M13.4844 0.956299C13.766 0.689292 14.2002 0.683249 14
 const SOUND_MUTED_SVG_PATH = "M6.9082 2.8985C7.71639 2.45747 8.74994 3.03437 8.75 4.00006V14.0001C8.75 15.0301 7.57405 15.6181 6.75 15.0001L3.64746 12.6729L1.10449 11.8253C0.594245 11.655 0.250012 11.1776 0.25 10.6397V7.36041C0.25005 6.82252 0.594258 6.34508 1.10449 6.17486L3.64746 5.32623L6.75 3.00006L6.9082 2.8985ZM4.51465 6.55182C4.4341 6.61218 4.34631 6.66193 4.25391 6.70123L4.16016 6.73736L1.75 7.5401V10.459L4.16016 11.2628L4.25391 11.2989C4.31551 11.3251 4.37502 11.356 4.43164 11.3917L4.51465 11.4483L7.25 13.4991V4.50006L4.51465 6.55182ZM9.60156 5.53033C9.89446 5.23755 10.3693 5.23748 10.6621 5.53033L13.1318 8.00006L15.541 5.59088C15.8339 5.29821 16.3087 5.29806 16.6016 5.59088C16.8944 5.8837 16.8942 6.35852 16.6016 6.65143L14.1924 9.06061L16.6729 11.5411C16.9654 11.834 16.9655 12.3088 16.6729 12.6016C16.38 12.8945 15.9042 12.8945 15.6113 12.6016L13.1309 10.1212L10.5908 12.6622C10.2979 12.9549 9.82313 12.955 9.53027 12.6622C9.23742 12.3693 9.23749 11.8945 9.53027 11.6016L12.0703 9.06061L9.60156 6.59088C9.30867 6.29799 9.30867 5.82323 9.60156 5.53033Z";
 
 
+// Dynamic UI Creation Functions
+function createPlayButton() {
+	const playButton = document.createElement('button');
+	playButton.id = 'playBtn';
+	playButton.setAttribute('aria-label', 'Play video');
+	
+	const playImg = document.createElement('img');
+	playImg.src = 'vr180player/images/play.png';
+	playImg.alt = 'Play';
+	
+	playButton.appendChild(playImg);
+	
+	return playButton;
+}
+
+function create2DControlPanel() {
+	const panel = document.createElement('div');
+	panel.id = 'panel';
+	
+	// Status section
+	const status = document.createElement('div');
+	status.id = 'status';
+	
+	const videoTitle = document.createElement('p');
+	videoTitle.id = 'video-title';
+	videoTitle.textContent = 'Title';
+	
+	const progress = document.createElement('div');
+	progress.id = 'progress';
+	
+	const currentTime = document.createElement('p');
+	currentTime.id = 'current-time';
+	currentTime.textContent = '00:00:00';
+	
+	const bar = document.createElement('div');
+	bar.id = 'bar';
+	
+	const played = document.createElement('div');
+	played.id = 'played';
+	bar.appendChild(played);
+	
+	const totalTime = document.createElement('p');
+	totalTime.id = 'total-time';
+	totalTime.textContent = '00:00:00';
+	
+	progress.appendChild(currentTime);
+	progress.appendChild(bar);
+	progress.appendChild(totalTime);
+	
+	status.appendChild(videoTitle);
+	status.appendChild(progress);
+	
+	// Controls section
+	const controls = document.createElement('div');
+	controls.id = 'controls';
+	
+	const fullscreenBtn = document.createElement('button');
+	fullscreenBtn.id = 'fullscreen';
+	
+	const nav = document.createElement('div');
+	nav.id = 'nav';
+	
+	const backBtn = document.createElement('button');
+	backBtn.id = 'back';
+	
+	const play2Btn = document.createElement('button');
+	play2Btn.id = 'play2';
+	
+	const forwardBtn = document.createElement('button');
+	forwardBtn.id = 'forward';
+	
+	nav.appendChild(backBtn);
+	nav.appendChild(play2Btn);
+	nav.appendChild(forwardBtn);
+	
+	const muteBtn = document.createElement('button');
+	muteBtn.id = 'mute';
+	
+	controls.appendChild(fullscreenBtn);
+	controls.appendChild(nav);
+	controls.appendChild(muteBtn);
+	
+	// Assemble panel
+	panel.appendChild(status);
+	panel.appendChild(controls);
+	
+	return panel;
+}
+
 document.addEventListener('DOMContentLoaded', () => {
 	videoElement = document.getElementById('vr180');
-	playBtn = document.getElementById('playBtn');
-
-	if (!videoElement || !playBtn) {
-		console.error("CRITICAL_ERROR_DOM: Essential HTML elements (video or VR button) not found.");
+	
+	if (!videoElement) {
+		console.error("CRITICAL_ERROR_DOM: Essential HTML element (video) not found.");
 		return;
 	}
 
+	// Create and insert UI elements dynamically
+	const container = document.getElementById('vr-container');
+	if (!container) {
+		console.error("CRITICAL_ERROR_DOM: VR container not found.");
+		return;
+	}
+
+	// Create and insert play button
+	playBtn = createPlayButton();
+	container.appendChild(playBtn);
+
+	// Create and insert 2D control panel
+	const controlPanel = create2DControlPanel();
+	container.appendChild(controlPanel);
+
 	playBtn.disabled = true;
 	
 	if (videoElement) {