diff --git a/clipboard.svg b/clipboard.svg
new file mode 100644
index 0000000..c3e1e08
--- /dev/null
+++ b/clipboard.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>clipboard-text-multiple-outline</title><path d="M4 7V21H18V23H4C2.9 23 2 22.1 2 21V7H4M20 3C21.1 3 22 3.9 22 5V17C22 18.1 21.1 19 20 19H8C6.9 19 6 18.1 6 17V5C6 3.9 6.9 3 8 3H11.18C11.6 1.84 12.7 1 14 1C15.3 1 16.4 1.84 16.82 3H20M14 3C13.45 3 13 3.45 13 4C13 4.55 13.45 5 14 5C14.55 5 15 4.55 15 4C15 3.45 14.55 3 14 3M10 7V5H8V17H20V5H18V7M15 15H10V13H15M18 11H10V9H18V11Z" /></svg>
\ No newline at end of file
diff --git a/clipboardCheckmark.svg b/clipboardCheckmark.svg
new file mode 100644
index 0000000..0ddce46
--- /dev/null
+++ b/clipboardCheckmark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>clipboard-check-outline</title><path d="M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7M7.5,13.5L9,12L11,14L15.5,9.5L17,11L11,17L7.5,13.5Z" /></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 0945217..4984996 100644
--- a/index.html
+++ b/index.html
@@ -80,9 +80,19 @@
     .nameInput {
       text-align: center;
     }
+    .clipboard {
+       transition: opacity 0.5s ease-in-out;
+    }
+    .btn2 {
+      background-color: #fefefe;
+    }
+    .btn2:active {
+      background-color: #efefef;
+      color: gray;
+    }
   </style>
 </head>
-<body class="flx center">
+<body>
   <!-- Dialog -->
   <dialog class="nameDialog">
     <div class="flx(column) space-evenly">
@@ -107,30 +117,37 @@
       </div>
     <div>
   </dialog>
-<div class="main flx(column) middle center" style="max-width: 600px;">
-  <button id="create-room">Create Room</button>
-  <input id="join-code" placeholder="Enter room code">
-  <button id="join-room">Join Room</button>
-  <div class="room-code"></div>
+<div class="main flx(column) middle center" style="margin: 0 auto; max-width: 500px;">
+  <button class="btn btn2 div-shadow is-round" id="create-room">Create Room</button>
+  <div class="flx(wrap) center middle mt-3">
+  <input id="join-code" placeholder="Enter room code" style="line-height: 2; text-align: center; width: 100px;">
+
+  <button class="btn btn2 div-shadow is-round" id="join-room">Join Room</button>
+  </div>
+  <div class="flx(wrap) center middle mb-2 roomCodeContainer hidden">
+    <div class="room-code mr-2"></div>
+    <img class="clipboard btn btn2 div-shadow is-round" src="clipboard.svg" width="15" onclick="copyToClipboard()" />
+  </div>
   <div class="flx(wrap) mb-2 players"></div>
 
   <div id="status"></div>
-  <button id="start-game" style="display: none;">Start Game</button>
-  <button id="spin-wheel" style="display: none;">Spin Wheel</button>
-  <input id="guess-letter" placeholder="Guess a letter" style="display: none;">
-  <button id="guess-button" style="display: none;">Guess</button>
-  <button class="solve-button" style="display: none;" onclick="solvePuzzle()">Solve</button>
+  <div class="flx(wrap) middle space-between is-full mb-3">
+    <button class="btn btn2 div-shadow is-round" id="start-game" style="display: none;">Start Game</button>
+    <button class="btn btn2 div-shadow is-round" id="spin-wheel" style="display: none;">Spin Wheel</button>
 
+    <div class="flx(wrap) middle space-between">
+      <input id="guess-letter" placeholder="Guess a letter" style="display: none; line-height: 2; text-align: center;">
+      <button class="btn btn2 div-shadow is-round" id="guess-button" style="display: none;">Guess</button>
+    </div>
+  
+    <button class="solve-button btn div-shadow is-round btn2" style="display: none;" onclick="solvePuzzle()">Solve</button>
+  </div>
 
   <div class="puzzleboard mb-2"></div>
-  <div class="category mb-5 is-full"></div>
+  <div class="category mb-5 is-full div-shadow"></div>
+
+  <canvas id="wheelCanvas" width="500" height="500"></canvas>
 
-  <div style="display:relative;">
-    <span style="position: absolute; top: 0; left:50%">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-down-bold</title><path d="M9,4H15V12H19.84L12,19.84L4.16,12H9V4Z" /></svg>
-    </span>
-    <canvas id="wheelCanvas" width="500" height="500"></canvas>
-  </div>
 </div>
   <script>
 //================general Purpose functions=========================================//
@@ -211,11 +228,19 @@
       return result;
     }
     function copyToClipboard() {
-      navigator.clipboard.writeText("Your text here").then(() => {
+      console.log('click Copied');
+      let image = document.querySelector(".clipboard");
+      image.src = 'clipboardCheckmark.svg';
+
+      navigator.clipboard.writeText(window.roomCode).then(() => {
         console.log("Copied successfully!");
       }).catch(err => {
         console.error("Failed to copy:", err);
       });
+      setTimeout(() => {
+          console.log("3 second has passed!");
+          image.src = 'clipboard.svg';
+      }, 3000);
     }
 //=========================================wheel==========================================//
     const wheel = [
@@ -225,10 +250,11 @@
     ];
 
     let canvas = document.getElementById('wheelCanvas');
-    if(canvas.clientWidth < 600) {
-      canvas.width = canvas.width / 1.5;
-      canvas.height = canvas.height/1.5;
+    if(window.innerWidth < 600) {
+      canvas.width = canvas.width / 1.65;
+      canvas.height = canvas.height / 1.65;
     }
+    console.log(window.innerWidth);
     const ctx = canvas.getContext('2d');
     const radius = canvas.width / 2;
     let lowestEquivelantAngle = 23.4327090939438 % (2* Math.PI);
@@ -242,7 +268,15 @@
     let img = new Image();
     img.src = "arrow-down-bold.png";
     img.onload = function() {
-      ctx.drawImage(img, 200, -50, 100,100);
+      //another check here for mobile sizing
+      
+      if(window.innerWidth < 600) {
+        ctx.drawImage(img, 100, -70, 100,100);
+      }
+      else {
+        ctx.drawImage(img, 200, -50, 100,100);
+      }
+      
     }
     // Draw the wheel
     function drawWheel(drawResult = false) {
@@ -294,7 +328,14 @@
       });
 
       ctx.restore();
-      ctx.drawImage(img, 200, -50, 100,100);
+      //check here for mobile size
+      
+      if(window.innerWidth < 600) {
+        ctx.drawImage(img, 100, -70, 100,100);
+      }
+      else {
+        ctx.drawImage(img, 200, -50, 100,100);
+      }
     }
 
     // Start spinning
@@ -585,9 +626,10 @@
     document.getElementById("join-room").onclick = () => {
       const roomCode = document.getElementById("join-code").value;
       socket.send(JSON.stringify({ type: "join_room", roomCode }));
-      this.style.display = 'none';
+      
       document.getElementById("create-room").style.display = 'none';
       document.getElementById('join-code').style.display = 'none';
+      document.getElementById("join-room").style.display = 'none';
 
     };
 
@@ -616,7 +658,9 @@
 
       if (message.type === "room_created") {
         window.you = message.you;
+        document.querySelector(".roomCodeContainer").classList.remove('hidden');
         document.querySelector(".room-code").innerText =`Room Code: ${message.roomCode}`;
+        window.roomCode = message.roomCode;
         document.getElementById("status").innerText = `Room created!`;
         drawPlayers(message);
         if (message.isLeader) {
@@ -641,6 +685,7 @@
         // document.querySelector('.players').innerHtml += `<span>${}<span>`
 
         document.getElementById("status").innerText = `${status}`;
+        document.querySelector(".roomCodeContainer").classList.remove('hidden');
         document.querySelector(".room-code").innerText =`Room Code: ${message.roomCode}`;
         if (message.isLeader) {
           changeTurnState()
@@ -657,7 +702,7 @@
           console.log(result);
           document.getElementById("status").innerText = "The game has started!";
           document.getElementById("start-game").style.display = "none";
-
+          document.querySelector(".roomCodeContainer").classList.add('hidden');
           changeSpinGuessState(message);
       }
       if (message.type === "new_puzzle") {
diff --git a/sounds/congrats.mp3 b/sounds/congrats.mp3
new file mode 100644
index 0000000..f5a8895
Binary files /dev/null and b/sounds/congrats.mp3 differ
