diff --git a/package.json b/package.json
index 75d02e7f..c3ad5e33 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.2",
+    "@mdi/font": "^7.0.96",
     "classnames": "^2.3.2",
     "compare-versions": "^5.0.1",
     "dockerode": "^3.3.4",
diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index 870eb4f4..970c35fe 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -57,11 +57,19 @@ export default function Item({ service }) {
                 rel="noreferrer"
                 className="flex-shrink-0 flex items-center justify-center w-12 "
               >
-                <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
+                {service.icon.startsWith("mdi") ? (
+                  <span class={service.icon + " scale-150"}></span>
+                ) : (
+                  <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
+                )}
               </a>
             ) : (
               <div className="flex-shrink-0 flex items-center justify-center w-12 ">
-                <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
+                {service.icon.startsWith("mdi") ? (
+                  <span class={service.icon + " scale-150"}></span>
+                ) : (
+                  <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
+                )}
               </div>
             ))}
 
diff --git a/src/styles/globals.css b/src/styles/globals.css
index c3779283..d31bca2e 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2,6 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
+@import url("@mdi/font/css/materialdesignicons.css");
+
+
 #__next {
   width: 100%;
   height: 100%;