diff --git a/index.html b/index.html
index 220a2ecf0..c0fcc94f8 100644
--- a/index.html
+++ b/index.html
@@ -875,9 +875,18 @@
                     <li><a id="he"></a></li>
                 </ul>
 
-                <ul id="newdropdown" class="dropdown-content">
-                    <li><a id="new-project"></a></li>
-                </ul>
+                <div id="modal-container" style=" display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); justify-content: center; align-items: center; font-family: Arial, sans-serif;" >
+                    <ul id="newdropdown" class="dropdown-content" style="padding: 24px;">
+                      <div>
+                        <h2  style="color: #0066FF; font-size: 24px;text-align: left;  margin: 0;">New Project</h2>
+                      </div>
+                      <div id="confirmation-message" style="color: #666666; font-size: 16px; margin-bottom: 24px; text-align: left;">Are you sure you want to create a new project?</div>
+                      <li style=" text-align: center; width:fit-content">
+                        <a id="new-project" style="display: inline-block; background-color: #2196F3; color: white;text-decoration: none; border-radius: 4px; font-weight: bold;"></a>
+                      </li>
+                    </ul>
+                </div>
+
  
            <script>  
                 var elem = document.documentElement;