diff --git a/css/activities.css b/css/activities.css
index 9e787ed8f0..dcc64e58f9 100644
--- a/css/activities.css
+++ b/css/activities.css
@@ -1769,51 +1769,35 @@ table {
     clear: both;
   }
 }
-.upper-text, .lower-text {
+.upper-text{
   margin: 0;
-  font-size: 12px;
+  font-size: 14px;
   font-style: italic;
   font-weight: 100;
 }
 .lower-text{
   text-align: right;
 }
-@keyframes rainbowAnimation {
-  0% { stop-color: red; }
-  20% { stop-color: orange; }
-  40% { stop-color: yellow; }
-  60% { stop-color: green; }
-  80% { stop-color: blue; }
-  100% { stop-color: violet; }
-}
-@keyframes dullBorderAnimation {
-  0% { stop-color: #7a7a7a; }  /* Gray */
-  25% { stop-color: #a2a2a2; } /* Light Gray */
-  50% { stop-color: #5c5c5c; } /* Dark Gray */
-  75% { stop-color: #8e8e8e; } /* Medium Gray */
-  100% { stop-color: #7a7a7a; } /* Back to Gray */
-}
 .bottom-right-logo1{
   position: absolute;
-  bottom: 30px; /* Distance from the bottom */
-  right: 125px;  /* Distance from the right */
+  bottom: 32px; /* Distance from the bottom */
+  right: 23px;  /* Distance from the right */
   padding: 10px;
   border-radius: 5px;
   cursor: pointer;
-}
-.bottom-right-logo3{
-  position: absolute;
-  bottom: 3px; /* Distance from the bottom */
-  right: 3px;  /* Distance from the right */
-  padding: 5px;
-  border-radius: 5px;
-  cursor: pointer;
+  color: black;
 }
 .logo-container{
   position: absolute;
-  bottom: 3px; /* Distance from the bottom */
-  right: 25px;  /* Distance from the right */
+  bottom: 1px; /* Distance from the bottom */
+  right: 23px;  /* Distance from the right */
   padding: 0px;
   border-radius: 5px;
   cursor: pointer;
+}
+#link-to-sugarLabs:link ,
+#link-to-sugarLabs:visited ,
+#link-to-sugarLabs:hover ,
+#link-to-sugarLabs:active  {
+  color: #000;
 }
\ No newline at end of file
diff --git a/dist/css/activity.css b/dist/css/activity.css
index 83fe671daf..149691082b 100644
--- a/dist/css/activity.css
+++ b/dist/css/activity.css
@@ -229,55 +229,30 @@ input.number {
 #canvas {
   overflow-y: visible;
 }
-.upper-text, .lower-text {
+.upper-text {
   margin: 0;
-  font-size: 23px;
+  font-size: 14px;
   font-style: italic;
   font-weight: 100;
 }
 .lower-text{
   text-align: right;
 }
-@keyframes rainbowAnimation {
-  0% { stop-color: red; }
-  20% { stop-color: orange; }
-  40% { stop-color: yellow; }
-  60% { stop-color: green; }
-  80% { stop-color: blue; }
-  100% { stop-color: violet; }
-}
-@keyframes dullBorderAnimation {
-  0% { stop-color: #7a7a7a; }  /* Gray */
-  25% { stop-color: #a2a2a2; } /* Light Gray */
-  50% { stop-color: #5c5c5c; } /* Dark Gray */
-  75% { stop-color: #8e8e8e; } /* Medium Gray */
-  100% { stop-color: #7a7a7a; } /* Back to Gray */
-}
 .bottom-right-logo1{
-  z-index: 99999;
   position: absolute;
-  bottom: 57px; /* Distance from the bottom */
-  right: 210px;  /* Distance from the right */
+  bottom: 32px; /* Distance from the bottom */
+  right: 23px;  /* Distance from the right */
   padding: 10px;
   border-radius: 5px;
   cursor: pointer;
-}
-.bottom-right-logo3{
-  z-index: 99999;
-  position: absolute;
-  bottom: 3px; /* Distance from the bottom */
-  right: 3px;  /* Distance from the right */
-  padding: 5px;
-  border-radius: 5px;
-  cursor: pointer;
+  color: black;
 }
 .logo-container{
-  z-index: 99999;
   position: absolute;
-  bottom: 0px; /* Distance from the bottom */
-  right: 20px;  /* Distance from the right */
+  bottom: 1px; /* Distance from the bottom */
+  right: 23px;  /* Distance from the right */
   padding: 0px;
-  border-radius: 0px;
+  border-radius: 5px;
   cursor: pointer;
 }
 #link-to-sugarLabs:link ,
diff --git a/index.html b/index.html
index 12dfd676fc..83a0b4e6f8 100644
--- a/index.html
+++ b/index.html
@@ -176,54 +176,21 @@
             <div class="loading-text" id="loadingText" style="margin-top:1.5rem;"></div>
             <a href="https://www.sugarlabs.org/" target="_blank" id="link-to-sugarLabs">
                 <div class= "bottom-right-logo1" id="bottom-right-logo">
-                    <h1  class="upper-text" id="this-is-a-text">This is a</h1>
+                    <h1  class="upper-text" id="this-is-a-text"></h1>
                 </div>     
                 <div class="logo-container" id="bottom-right-logo">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 501 167" height="50" width="150">
-                        <!-- Define the gradient for the rainbow animation in 'sugar'-->
-                        <defs>
-                            <linearGradient id="rainbow-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-                                <stop offset="0%" stop-color="red">
-                                    <animate attributeName="stop-color" values="red;orange;yellow;green;blue;indigo;violet;red" dur="10s" repeatCount="indefinite" />
-                                </stop>
-                                <stop offset="100%" stop-color="violet">
-                                    <animate attributeName="stop-color" values="violet;red;orange;yellow;green;blue;indigo;violet" dur="10s" repeatCount="indefinite" />
-                                </stop>
-                            </linearGradient>
-
-                            <!-- Define the gradient for the border animation in 'sugar' -->
-                            <linearGradient id="dull-colors-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-                                <stop offset="0%" stop-color="#7a7a7a">
-                                    <animate attributeName="stop-color" values="#7a7a7a;#a2a2a2;#5c5c5c;#8e8e8e;#7a7a7a" dur="5s" repeatCount="indefinite" />
-                                </stop>
-                                <stop offset="100%" stop-color="#5c5c5c">
-                                    <animate attributeName="stop-color" values="#5c5c5c;#8e8e8e;#7a7a7a;#a2a2a2;#5c5c5c" dur="5s" repeatCount="indefinite" />
-                                </stop>
-                            </linearGradient>
-                            
-                        </defs>
-
                         <!-- Logo paths -->
                         <path d="m63.05 117.52c-11.05 0-21.12-5.5-21.12-11.539 0-3.157 2.303-5.63 5.244-5.63 2.02 0 3.719 1.183 5.515 2.435 2.592 1.809 5.529 3.855 10.651 3.855 5.139 0 8.21-2.647 8.21-5.209 0-3.416-5.271-5.607-10.852-7.927-7.799-3.243-16.639-6.918-16.639-15.886 0-10.573 9.933-16.279 19.28-16.279 7.89 0 18.895 4.132 18.895 10.86 0 2.526-1.763 5.244-5.632 5.244-2.068 0-3.558-1.125-4.997-2.212-1.872-1.414-3.994-3.02-8.266-3.02-1.209 0-7.242.227-7.242 4.726 0 2.729 4.879 4.613 10.04 6.608 7.772 3 17.446 6.739 17.446 16.333.002 12.12-10.646 17.636-20.538 17.636"
-                            fill="url(#rainbow-gradient)"
-                            stroke="url(#dull-colors-gradient)"
-                            stroke-width="3" />
+                            class="color-change" />
                         <path d="m117.65 117.52c-10.726 0-22.19-5.854-22.19-22.281v-27.59c0-3.773 2.418-6.309 6.02-6.309s6.02 2.536 6.02 6.309v27.299c0 7.979 3.224 11.693 10.146 11.693 6.922 0 10.146-3.715 10.146-11.693v-27.3c0-3.773 2.418-6.309 6.02-6.309 3.6 0 6.02 2.536 6.02 6.309v27.59c0 16.428-11.46 22.282-22.18 22.282"
-                            fill="url(#rainbow-gradient)"
-                            stroke="url(#dull-colors-gradient)"
-                            stroke-width="3" />
+                            class="color-change" />
                         <path d="m175.53 137.85c-8.493 0-21.509-4.994-21.509-11.149 0-2.758 1.671-5.729 5.342-5.729 2.02 0 3.766 1.074 5.785 2.317 2.804 1.728 5.981 3.683 11.06 3.683 10.827 0 12.215-9.426 12.273-13.816-3.037 2.818-7.04 4.37-11.498 4.37-16.03 0-24.414-14.13-24.414-28.09s8.386-28.09 24.414-28.09c4.424 0 8.692 1.905 11.688 4.32.654-2.638 2.95-4.32 6.122-4.32 2.778 0 5.731 2.077 5.731 5.923v44.24c0 16-9.811 26.346-24.993 26.346m1.452-65.63c-9.132 0-12.372 9.271-12.372 17.212s3.24 17.211 12.372 17.211c9.13 0 12.371-9.271 12.371-17.211s-3.241-17.212-12.371-17.212"
-                            fill="url(#rainbow-gradient)"
-                            stroke="url(#dull-colors-gradient)"
-                            stroke-width="3" />
+                            class="color-change" />
                         <path d="m256.26 117.52c-2.625 0-5.279-1.729-5.68-5.04-3.492 3.314-7.752 5.04-12.52 5.04-16.03 0-24.411-14.13-24.411-28.09 0-13.958 8.385-28.09 24.411-28.09 4.755 0 8.745 1.484 12.563 4.743.52-3.119 3.091-4.743 5.636-4.743 2.776 0 5.727 2.076 5.727 5.923v44.33c.001 3.846-2.95 5.923-5.726 5.923m-18.199-45.3c-9.132 0-12.373 9.273-12.373 17.212 0 7.94 3.241 17.212 12.373 17.212 9.133 0 12.373-9.272 12.373-17.212 0-7.939-3.24-17.212-12.373-17.212"
-                            fill="url(#rainbow-gradient)"
-                            stroke="url(#dull-colors-gradient)"
-                            stroke-width="3" />
+                            class="color-change" />
                         <path d="m282.98 117.52c-3.601 0-6.02-2.536-6.02-6.311v-43.561c0-3.774 2.419-6.309 6.02-6.309 3.289 0 5.593 2.118 5.965 5.361 2.537-2.849 6.103-5.361 10.1-5.361 3.768 0 6.503 2.572 6.503 6.115 0 2.326-1.173 5.322-6.76 6.375-2.961.515-9.793 2.788-9.793 12.89v24.49c0 3.774-2.419 6.311-6.02 6.311"
-                            fill="url(#rainbow-gradient)"
-                            stroke="url(#dull-colors-gradient)"
-                            stroke-width="3" />
+                            class="color-change" />
                         <path d="m324.99 111.21c0 2.808-1.646 4.551-4.259 4.551-2.614 0-4.26-1.743-4.26-4.551v-66.21c0-2.808 1.646-4.55 4.26-4.55 2.613 0 4.259 1.743 4.259 4.55z"
                             fill="#969696"
                             stroke-width="0" />
@@ -237,18 +204,41 @@ <h1  class="upper-text" id="this-is-a-text">This is a</h1>
                             fill="#969696"
                             stroke-width="0" />
                     </svg>
+
+                    <script>
+                        // List of color pairs to dynamically alot.
+                        const colorPairs = [
+                            { fill: "#A00000", stroke: "#FF7800" },
+                            { fill: "#68008C", stroke: "#78E600" },
+                            { fill: "#6E008C", stroke: "#00BEFF" },
+                            { fill: "#006E00", stroke: "#00BEFF" },
+                            { fill: "#033CD2", stroke: "#00BEFF" },
+                            { fill: "#033CD2", stroke: "#FF64D2" },
+                            { fill: "#006E00", stroke: "#78E600" },
+                            { fill: "#6E008C", stroke: "#FFD732" },
+                            { fill: "#68008C", stroke: "#78E600" },
+                            { fill: "#6E008C", stroke: "#FF7800" },
+                            { fill: "#6E008C", stroke: "#FF64D2" },
+                            { fill: "#033CD2", stroke: "#FF7800" }
+                        ];
+                        const paths = document.querySelectorAll(".color-change");
+                        // Randomly select a color pair
+                        const randomColorPair = colorPairs[Math.floor(Math.random() * colorPairs.length)];
+                        // apply random pairs.
+                        paths.forEach(path => {
+                            path.setAttribute("fill", randomColorPair.fill);
+                            path.setAttribute("stroke", randomColorPair.stroke);
+                            path.setAttribute("stroke-width",3)
+                        });
+                        document.getElementById("this-is-a-text").textContent = "A proud initiative by";
+                    </script>
                     
                 </div>
-                <div class= "bottom-right-logo3" id="bottom-right-logo">
-                    <h1 class="lower-text" id="project-text">project.</h1>
-                </div>
             </a>
             <script>
                 document.addEventListener("DOMContentLoaded", function() {
                     setTimeout(function() {
                       const loadingText = document.getElementById("loadingText");
-                      document.getElementById("project-text").textContent = _("project.");
-                      document.getElementById("this-is-a-text").textContent = _("This is a");
                       const texts = ["Do, Re, Mi, Fa, Sol, La, Ti, Do", "Loading Music Blocks...", "Reading Music..."];
               
                       let index = 0;