diff --git a/public/index.html b/public/index.html
index bf858d1cb..7f6c54a25 100644
--- a/public/index.html
+++ b/public/index.html
@@ -122,6 +122,29 @@
             var bg1_toggle = true;
             var css_mes_bg = $('<div class="mes"></div>').css('background');
             var css_send_form_display = $('<div id=send_form></div>').css('display');
+            
+            var colab_ini_step = 1;
+            setInterval(function() {
+                console.log(colab_ini_step);
+                switch(colab_ini_step){
+                    case 0:
+                        $('#colab_popup_text').html('<h3>Initialization</h3>');
+                        colab_ini_step = 1;
+                        break
+                    case 1:
+                        $('#colab_popup_text').html('<h3>Initialization.</h3>');
+                        colab_ini_step = 2;
+                        break
+                    case 2:
+                        $('#colab_popup_text').html('<h3>Initialization..</h3>');
+                        colab_ini_step = 3;
+                        break
+                    case 3:
+                        $('#colab_popup_text').html('<h3>Initialization...</h3>');
+                        colab_ini_step = 0;
+                        break
+                }
+            }, 500);
             /////////////
             
             getSettings("def");
@@ -339,6 +362,7 @@
                 if (response.ok === true) {
                     const getData = await response.json();
                     if(getData.colaburl != false){
+                        $('colab_shadow_popup').css('display', 'none');
                         is_colab = true;
                         let url = String(getData.colaburl).split("flare.com")[0] + "flare.com";
                         $('#api_url_text').val(url);
@@ -2657,6 +2681,11 @@
             <div id="dialogue_popup_cancel" class="menu_button">Cancel</div>
         </div>
     </div>
+    <div id="colab_shadow_popup">
+        <div id="colab_popup">
+            <div id="colab_popup_text" style="float: left;margin-left: 88px;"><h3>Initialization</h3></div>
+        </div>
+    </div>
     <!--<div id="shadow_character_popup">
         </div>-->
         <div id="character_popup">
diff --git a/public/style.css b/public/style.css
index 0c9a6c87b..bac8c9584 100644
--- a/public/style.css
+++ b/public/style.css
@@ -757,7 +757,24 @@ input[type=button] {
     margin-bottom: 2px;
 }
 /* Focus */
-
+#colab_popup{
+    
+    width:300px;
+    height: 150px;
+    position: absolute;
+    z-index: 2060;
+    background-color: blue;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    text-align: center;
+    margin-top: 36vh;
+    box-shadow: 0 0 2px rgba(200,200,200,0.1);
+    padding: 4px;
+    background: #191b3100;
+    border-radius: 10px;
+}
 #dialogue_popup{
     
     width:300px;
@@ -834,6 +851,15 @@ input[type=button] {
     height: 100vh;
     z-index: 2095;
 }
+#colab_shadow_popup{
+    background-color: #00000066;
+    display: none;
+    opacity: 1.0;
+    position: absolute;
+    width: 100%;
+    height: 100vh;
+    z-index: 2298;
+}
 #bgtest{
     display: none;
     width:100vw;