diff --git a/newVersion/assets/doubleArrowDown.svg b/newVersion/assets/doubleArrowDown.svg
new file mode 100644
index 0000000..a990fed
--- /dev/null
+++ b/newVersion/assets/doubleArrowDown.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path fill="#FFFFFF" d="M480-200 240-440l42-42 198 198 198-198 42 42-240 240Zm0-253L240-693l42-42 198 198 198-198 42 42-240 240Z"/></svg>
\ No newline at end of file
diff --git a/newVersion/assets/radio_button_checked.svg b/newVersion/assets/radio_button_checked.svg
new file mode 100644
index 0000000..b66abee
--- /dev/null
+++ b/newVersion/assets/radio_button_checked.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path fill="#FFFFFF" d="M480-294q78 0 132-54t54-132q0-78-54-132t-132-54q-78 0-132 54t-54 132q0 78 54 132t132 54Zm0 214q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z"/></svg>
\ No newline at end of file
diff --git a/newVersion/assets/radio_button_unchecked.svg b/newVersion/assets/radio_button_unchecked.svg
new file mode 100644
index 0000000..933bab1
--- /dev/null
+++ b/newVersion/assets/radio_button_unchecked.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path fill="#FFFFFF" d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z"/></svg>
\ No newline at end of file
diff --git a/newVersion/contact/index.html b/newVersion/contact/index.html
index 457bd90..19255d8 100644
--- a/newVersion/contact/index.html
+++ b/newVersion/contact/index.html
@@ -6,7 +6,6 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         
         <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'>
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
         <link rel="stylesheet" href="/css/style.css">
         <link rel="stylesheet" href="/css/orderStyle.css">
         <link rel="stylesheet" href="/css/fancyStyle.css">
@@ -27,15 +26,15 @@
             <div class="scroll-wrapper">
                 <div class="scroll-container">
                     Scroll to discover more
-                    <span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
+                    <img class="scroll-symbol" src="/assets/doubleArrowDown.svg">
                 </div>
             </div>
         </div>
 
         <div class="progress" id="progress">
             <div class="progress-wrapper">
-                <span class="material-symbols-outlined progress-item" id="step1">radio_button_checked</span>
-                <span class="material-symbols-outlined progress-item" id="step2">radio_button_unchecked</span>
+                <img class="progress-item" id="step1" src="/assets/radio_button_checked.svg">
+                <img class="progress-item" id="step2" src="/assets/radio_button_unchecked.svg">
             </div>
         </div>
 
diff --git a/newVersion/css/fancyStyle.css b/newVersion/css/fancyStyle.css
index 0c8bd95..fc67b88 100644
--- a/newVersion/css/fancyStyle.css
+++ b/newVersion/css/fancyStyle.css
@@ -104,7 +104,9 @@
 }
 
 .progress-item {
+    color: white;
     cursor: pointer;
+    width: 1.75vw;
 }
 
 
diff --git a/newVersion/examples/index.html b/newVersion/examples/index.html
index 1034bf4..56e4cab 100644
--- a/newVersion/examples/index.html
+++ b/newVersion/examples/index.html
@@ -6,7 +6,6 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         
         <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'>
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
         <link rel="stylesheet" href="/css/style.css">
         <link rel="stylesheet" href="/css/examplesStyle.css">
         <link rel="stylesheet" href="/css/fancyStyle.css">
@@ -27,20 +26,20 @@
             <div class="scroll-wrapper">
                 <div class="scroll-container">
                     Scroll to discover more
-                    <span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
+                    <img class="scroll-symbol" src="/assets/doubleArrowDown.svg">
                 </div>
             </div>
         </div>
 
         <div class="progress" id="progress">
             <div class="progress-wrapper">
-                <span class="material-symbols-outlined progress-item" id="step1">radio_button_checked</span>
-                <span class="material-symbols-outlined progress-item" id="step2">radio_button_unchecked</span>
-                <span class="material-symbols-outlined progress-item" id="step3">radio_button_unchecked</span>
-                <span class="material-symbols-outlined progress-item" id="step4">radio_button_unchecked</span>
-                <span class="material-symbols-outlined progress-item" id="step5">radio_button_unchecked</span>
-                <span class="material-symbols-outlined progress-item" id="step6">radio_button_unchecked</span>
-                <span class="material-symbols-outlined progress-item" id="step7">radio_button_unchecked</span>
+                <img class="progress-item" id="step1" src="/assets/radio_button_checked.svg">
+                <img class="progress-item" id="step2" src="/assets/radio_button_unchecked.svg">
+                <img class="progress-item" id="step3" src="/assets/radio_button_unchecked.svg">
+                <img class="progress-item" id="step4" src="/assets/radio_button_unchecked.svg">
+                <img class="progress-item" id="step5" src="/assets/radio_button_unchecked.svg">
+                <img class="progress-item" id="step6" src="/assets/radio_button_unchecked.svg">
+                <img class="progress-item" id="step7" src="/assets/radio_button_unchecked.svg">
             </div>
         </div>
 
diff --git a/newVersion/index.html b/newVersion/index.html
index ace9094..694d924 100644
--- a/newVersion/index.html
+++ b/newVersion/index.html
@@ -6,7 +6,6 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         
         <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'>
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
         <link rel="stylesheet" href="/css/style.css">
         <link rel="stylesheet" href="/css/homeStyle.css">
         <link rel="stylesheet" href="/css/fancyStyle.css">
@@ -28,19 +27,19 @@
             <div class="scroll-wrapper">
                 <div class="scroll-container">
                     Scroll to discover more
-                    <span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
+                    <img class="scroll-symbol" src="/assets/doubleArrowDown.svg">
                 </div>
             </div>
         </div>
 
         <div class="progress" id="progress">
             <div class="progress-wrapper">
-                <span class="material-symbols-outlined progress-item" id="step1">radio_button_checked</span>
-                <span class="material-symbols-outlined progress-item" id="step2">radio_button_unchecked</span>
-                <span class="material-symbols-outlined progress-item" id="step3">radio_button_unchecked</span>
-                <span class="material-symbols-outlined progress-item" id="step4">radio_button_unchecked</span>
-                <span class="material-symbols-outlined progress-item" id="step5">radio_button_unchecked</span>
-                <span class="material-symbols-outlined progress-item" id="step6">radio_button_unchecked</span>
+                <img class="progress-item" id="step1" src="/assets/radio_button_checked.svg">
+                <img class="progress-item" id="step2" src="/assets/radio_button_unchecked.svg">
+                <img class="progress-item" id="step3" src="/assets/radio_button_unchecked.svg">
+                <img class="progress-item" id="step4" src="/assets/radio_button_unchecked.svg">
+                <img class="progress-item" id="step5" src="/assets/radio_button_unchecked.svg">
+                <img class="progress-item" id="step6" src="/assets/radio_button_unchecked.svg">
             </div>
         </div>
         
diff --git a/newVersion/info/index.html b/newVersion/info/index.html
index a5f458b..5045251 100644
--- a/newVersion/info/index.html
+++ b/newVersion/info/index.html
@@ -6,7 +6,6 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         
         <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'>
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
         <link rel="stylesheet" href="/css/style.css">
         <link rel="stylesheet" href="/css/infoStyle.css">
         <link rel="stylesheet" href="/css/fancyStyle.css">
@@ -27,21 +26,21 @@
             <div class="scroll-wrapper">
                 <div class="scroll-container">
                     Scroll to learn more
-                    <span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
+                    <img class="scroll-symbol" src="/assets/doubleArrowDown.svg">
                 </div>
             </div>
         </div>
 
         <div class="progress" id="progress">
             <div class="progress-wrapper">
-                <span class="material-symbols-outlined progress-item" id="step1">radio_button_checked</span>
-                <span class="material-symbols-outlined progress-item" id="step2">radio_button_unchecked</span>
-                <span class="material-symbols-outlined progress-item" id="step3">radio_button_unchecked</span>
-                <span class="material-symbols-outlined progress-item" id="step4">radio_button_unchecked</span>
-                <span class="material-symbols-outlined progress-item" id="step5">radio_button_unchecked</span>
-                <span class="material-symbols-outlined progress-item" id="step6">radio_button_unchecked</span>
-                <span class="material-symbols-outlined progress-item" id="step7">radio_button_unchecked</span>
-                <span class="material-symbols-outlined progress-item" id="step8">radio_button_unchecked</span>
+                <img class="progress-item" id="step1" src="/assets/radio_button_checked.svg">
+                <img class="progress-item" id="step2" src="/assets/radio_button_unchecked.svg">
+                <img class="progress-item" id="step3" src="/assets/radio_button_unchecked.svg">
+                <img class="progress-item" id="step4" src="/assets/radio_button_unchecked.svg">
+                <img class="progress-item" id="step5" src="/assets/radio_button_unchecked.svg">
+                <img class="progress-item" id="step6" src="/assets/radio_button_unchecked.svg">
+                <img class="progress-item" id="step7" src="/assets/radio_button_unchecked.svg">
+                <img class="progress-item" id="step8" src="/assets/radio_button_unchecked.svg">
             </div>
         </div>
 
diff --git a/newVersion/js/scrolling.js b/newVersion/js/scrolling.js
index 40d1518..d9d67f0 100644
--- a/newVersion/js/scrolling.js
+++ b/newVersion/js/scrolling.js
@@ -54,8 +54,8 @@ $( document ).ready( function () {
     }
 
     function trackProgress () {
-        $( '.progress-item' ).html( `radio_button_unchecked` );
-        document.getElementById( `step${currentlyShowing + 1}` ).innerHTML = `radio_button_checked`;
+        $( '.progress-item' ).attr( 'src', `/assets/radio_button_unchecked.svg` );
+        $( `#step${currentlyShowing + 1}` ).attr( 'src', `/assets/radio_button_checked.svg` );
     }
 
     $( '.progress-item' ).click( function () {