diff --git a/html/index.html b/html/index.html
index 3b975cb..80f437d 100644
--- a/html/index.html
+++ b/html/index.html
@@ -10,18 +10,11 @@
     />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-
-    <link
-      crossorigin="anonymous"
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
-      rel="stylesheet"
-    />
+    <link rel="preconnect" href="https://rsms.me/">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
 
     <style>
       body {
diff --git a/package.json b/package.json
index c87a787..ae0b148 100644
--- a/package.json
+++ b/package.json
@@ -50,4 +50,4 @@
   "browserslist": [
     "last 1 chrome versions"
   ]
-}
+}
\ No newline at end of file
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index addf587..e76331e 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@designestate/dees-catalog',
-  version: '1.0.107',
+  version: '1.0.108',
   description: 'website for lossless.com'
 }
diff --git a/ts_web/elements/dees-icon.ts b/ts_web/elements/dees-icon.ts
index a74d4fc..1472740 100644
--- a/ts_web/elements/dees-icon.ts
+++ b/ts_web/elements/dees-icon.ts
@@ -12,7 +12,6 @@ import {
   faTwitter,
   faInstagram,
   faTiktok,
-
 } from '@fortawesome/free-brands-svg-icons';
 
 import {} from '@fortawesome/free-regular-svg-icons';
@@ -94,33 +93,29 @@ export class DeesIcon extends DeesElement {
           display: inline-block;
           height: ${this.svgSize}px;
         }
-        .material-icons {
-          font-family: 'Material Icons';
+        .material-symbols-outlined {
+          font-family: 'Material Symbols Outlined';
           font-weight: normal;
           font-style: normal;
           line-height: inherit;
-          font-size: inherit;
+          font-size: inherit; /* Preferred icon size */
           display: inline-block;
-          line-height: inherit;
           text-transform: none;
           letter-spacing: normal;
           word-wrap: normal;
           white-space: nowrap;
           direction: ltr;
-          
-          /* Support for all WebKit browsers. */
-          -webkit-font-smoothing: antialiased;
-          /* Support for Safari and Chrome. */
-          text-rendering: optimizeLegibility;
-
-          /* Support for Firefox. */
-          -moz-osx-font-smoothing: grayscale;
-
-          /* Support for IE. */
-          font-feature-settings: 'liga';
         }
       </style>
-      ${this.iconName ? html`<i class="material-icons">${this.iconName}</i>` : html``}
+      ${this.iconName
+        ? html`
+          <i 
+            class="material-symbols-outlined"
+            style="font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;"
+          >
+            ${this.iconName}
+          </i>`
+        : html``}
       ${this.brandName ? html`<div id="iconContainer"></div>` : html``}
     `;
   }