diff --git a/PACKABUNCHAS b/PACKABUNCHAS
new file mode 160000
index 0000000..80f5105
--- /dev/null
+++ b/PACKABUNCHAS
@@ -0,0 +1 @@
+Subproject commit 80f51050e5022be2b17afa57a6646b2205926786
diff --git a/index.html b/index.html
index 96d0663..f503b4d 100644
--- a/index.html
+++ b/index.html
@@ -67,22 +67,59 @@
             right: 10px;
             background-color: rgba(0, 0, 0, 0.4);
             padding: 10px;
-            border-radius: 8px;
+            border-radius: 30px;
             display: none;
             flex-direction: column;
-            color: whitesmoke
+            color: whitesmoke;
+            border: 5px solid #5d4d54;
+            font-family: Verdana, Geneva, Tahoma, sans-serif;
+            font-size: 15px;
         }
 
         .gradient-selector-container label,
         .gradient-selector-container select,
         .gradient-selector-container input {
             margin: 5px 0;
+            font-weight:800;
+        }
+      
+        .color_input {
+        width: 30%;
+        display: flex;
+        flex-direction: column ;
+        height: 30px;
+        border-radius: 6px;
+        background-color: #5d4d54;
+        color: #5d4d54;
+        font-size: 12px;
+        font-family: Arial, sans-serif;
+        box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.1);
+        transition: box-shadow 0.3s, background-color 0.3s;
         }
 
-        .gradient-button:focus {
-            outline: none;
+        .gradient-selector-container select {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        padding: 0.5em;
+        /* Add padding for the text */
+        padding-left: 0.5em;
+        /* Add a border for the placeholder */
+        border: 4px solid #5d4d54;
+        border-radius: 6px;  
+        font-weight:520;
+        font-family: Verdana, Geneva, Tahoma, sans-serif;
+        font-size: 15px;
+        border-radius: 10px;
+        color: #5d4d54; 
+        background-color: #dfdccfe2; 
+        }
+            
+        select:hover{
+            background-color: whitesmoke;
         }
 
+        
         .controls-container {
             position: absolute;
             top: 10px;
@@ -109,6 +146,26 @@
             font-size: 24px;
             color: whitesmoke;
         }
+        
+        .gradient-button:focus {
+            outline: none;
+        }
+        
+        #v{
+            border-radius: 0px 0px 25px 25px;
+        }
+        
+        .gradient-selector-container button {
+            font-family: Verdana, Geneva, Tahoma, sans-serif;
+        }
+
+        .gradbtn{
+            font-family: Verdana, Geneva, Tahoma, sans-serif;
+            border-radius: 10px;
+            width: 200px;
+            height: 35px;
+        }
+
         .instructions-box {
             position: absolute;
             top: 50px;
@@ -121,47 +178,46 @@
             max-width: 300px;
             z-index: 10;
         }
-        #v {
-            border-radius: 0px 0px 25px 25px;
-        }
+
     </style>
 </head>
 <body>
-    <div class="content">
-        <canvas id="v" width="1080" height="1920"></canvas>
-        <div class="controls-container">
-            <div class="instructions"><i class="fa-regular fa-lightbulb"></i></div>
-            <button class="gradient-button" onclick="toggleGradientSelector()">🎨</button>
-        </div>
-        <div class="gradient-selector-container" id="gradientSelectorContainer">
-            <label for="color1">Color 1:</label>
-            <input type="color" id="color1" name="color1" value="#FFEA7E">
-            <label for="color2">Color 2:</label>
-            <input type="color" id="color2" name="color2" value="#FFA500">
-            <label for="direction">Direction:</label>
-            <select id="direction" name="direction">
-                <option value="to bottom right">To Bottom Right</option>
-                <option value="to bottom left">To Bottom Left</option>
-                <option value="to top right">To Top Right</option>
-                <option value="to top left">To Top Left</option>
-                <option value="to bottom">To Bottom</option>
-                <option value="to top">To Top</option>
-                <option value="to left">To Left</option>
-                <option value="to right">To Right</option>
-            </select>
-            <button onclick="applyGradient()">Apply Gradient</button>
-        </div>
-        <div class="instructions-box" id="instructionsBox">
-            <h2>Game Instructions</h2>
-            <p>Welcome to the game! Here are the instructions:</p>
-            <ul>
-                <li>Drag the puzzle pieces.</li>
-                <li>You can change thier direction by double clicking on it.</li>
-                <li>Adjust the puzzle pieces to completely occupy the given space.</li>
-                <li>Have fun!</li>
-            </ul>
-        </div>
+<div class="content">
+    <canvas id="v" width="1080" height="1920"></canvas>
+    <canvas id="v" width="1080" height="1920"></canvas>
+    <div class="controls-container">
+        <div class="instructions"><i class="fa-regular fa-lightbulb"></i></div>
+        <button class="gradient-button" onclick="toggleGradientSelector()">🎨</button>
+    </div>
+    <div class="gradient-selector-container" id="gradientSelectorContainer">
+        <label for="color1" class="color">Color 1:</label>
+        <input type="color" id="color1" name="color1" value="#FFEA7E" class="color_input">
+        <label for="color2" class="color">Color 2:</label>
+        <input type="color" id="color2" name="color2" value="#FFA500" class="color_input">
+        <label for="direction" class="direction">Direction:</label>
+        <select id="direction" class="custom-select" name="direction">
+            <option disabled selected value="select direction">Select direction</option>
+            <option value="to bottom right">To Bottom Right</option>
+            <option value="to bottom left">To Bottom Left</option>
+            <option value="to top right">To Top Right</option>
+            <option value="to top left">To Top Left</option>
+            <option value="to bottom">To Bottom</option>
+            <option value="to top">To Top</option>
+            <option value="to left">To Left</option>
+            <option value="to right">To Right</option>
+        </select>
+        <button onclick="applyGradient()" class="gradbtn">Apply Gradient</button>
+    </div>
+    <div class="instructions-box" id="instructionsBox">
+        <h2>Game Instructions</h2>
+        <p>Welcome to the game! Here are the instructions:</p>
+        <ul>
+            <li>Drag the puzzle pieces.</li>
+            <li>You can change thier direction by double clicking on it.</li>
+            <li>Adjust the puzzle pieces to completely occupy the given space.</li>
+            <li>Have fun!</li>
+        </ul>
     </div>
-    <script src="game.js"></script>
+<script src="game.js"></script>
 </body>
 </html>
\ No newline at end of file
