diff --git a/_scss/pages/home.scss b/_scss/pages/home.scss
index 58a0995..9a74dc7 100644
--- a/_scss/pages/home.scss
+++ b/_scss/pages/home.scss
@@ -123,8 +123,8 @@ a:active {
 }
 
 .card-icon {
-  width: 32px; /* Desired width */
-  height: 32px; /* Desired height */
+  width: 60px;
+  height: 60px;
   margin-bottom: 10px;
   object-fit: cover;
 }
diff --git a/assets/images/appstore-icon.png b/assets/images/appstore-icon.png
deleted file mode 100644
index e24e203..0000000
Binary files a/assets/images/appstore-icon.png and /dev/null differ
diff --git a/assets/images/appstore-icon.svg b/assets/images/appstore-icon.svg
new file mode 100644
index 0000000..df8a694
--- /dev/null
+++ b/assets/images/appstore-icon.svg
@@ -0,0 +1,15 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M11.0003 10.4969H23.0011C24.3819 10.4969 25.5014 11.6163 25.5014 12.9971V24.998C25.5014 26.3788 24.3819 27.4983 23.0011 27.4983H11.0003C9.61944 27.4983 8.5 26.3789 8.5 24.998V12.9971C8.5 11.6163 9.61947 10.4969 11.0003 10.4969Z"
+        fill="white" stroke="black" stroke-width="3" />
+    <path
+        d="M42.7053 9.20295C42.7056 9.2032 42.7058 9.20344 42.7061 9.20368L50.7965 17.2921C50.7968 17.2924 50.7971 17.2927 50.7974 17.293C51.2482 17.7461 51.5014 18.3593 51.5014 18.9986C51.5014 19.6377 51.2483 20.2509 50.7974 20.7042C50.7971 20.7046 50.7967 20.705 50.7963 20.7053L42.7061 28.7936C42.7057 28.7939 42.7054 28.7942 42.7051 28.7946C42.2526 29.2447 41.6406 29.4973 41.0023 29.4973C40.364 29.4973 39.7519 29.2446 39.2995 28.7944C39.2992 28.7942 39.2989 28.7939 39.2986 28.7936L31.2086 20.7036C31.2083 20.7032 31.2079 20.7029 31.2075 20.7025C30.7571 20.2494 30.5042 19.6366 30.5042 18.9976C30.5042 18.3587 30.757 17.7459 31.2074 17.2929C31.2078 17.2925 31.2082 17.2921 31.2086 17.2917L39.2986 9.20368C39.2989 9.20339 39.2992 9.2031 39.2995 9.2028C39.752 8.75265 40.364 8.5 41.0023 8.5C41.6408 8.5 42.2529 8.7527 42.7053 9.20295Z"
+        fill="#FFDF3F" stroke="black" stroke-width="3" />
+    <path
+        d="M35.002 34.4986H47.0028C48.3837 34.4986 49.5031 35.618 49.5031 36.9989V48.9997C49.5031 50.3806 48.3837 51.5 47.0028 51.5H35.002C33.6211 51.5 32.5017 50.3806 32.5017 48.9997V36.9989C32.5017 35.618 33.621 34.4986 35.002 34.4986Z"
+        fill="white" stroke="black" stroke-width="3" />
+    <path
+        d="M11.0003 34.4986H23.0011C24.382 34.4986 25.5014 35.618 25.5014 36.9989V48.9997C25.5014 50.3805 24.3819 51.5 23.0011 51.5H11.0003C9.61947 51.5 8.5 50.3805 8.5 48.9997V36.9989C8.5 35.618 9.61944 34.4986 11.0003 34.4986Z"
+        fill="white" stroke="black" stroke-width="3" />
+</svg>
+    
\ No newline at end of file
diff --git a/assets/images/explore-icon.png b/assets/images/explore-icon.png
deleted file mode 100644
index e601bd0..0000000
Binary files a/assets/images/explore-icon.png and /dev/null differ
diff --git a/assets/images/explore-icon.svg b/assets/images/explore-icon.svg
new file mode 100644
index 0000000..3354fbe
--- /dev/null
+++ b/assets/images/explore-icon.svg
@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M17.0001 10.5H42C43.3807 10.5 44.5 11.6193 44.5 13V24C44.5 25.3807 43.3807 26.5 42 26.5H17.0001C15.6201 26.5 14.5001 25.38 14.5001 23.9987L14.5001 12.9961C14.5001 11.6173 15.6175 10.5 17.0001 10.5Z" fill="#FFDF3F" stroke="black" stroke-width="3"/>
+    <path d="M8.52257 19.9388V19.9375C8.52257 18.3397 9.84533 17 11.5142 17H24.4417L28.5887 21.0866L29.0266 21.5182H29.6415H47.6132C49.2716 21.5182 50.5 22.7668 50.5 24.375V46.5442C50.5 48.2031 49.2358 49.5 47.6274 49.5H11.5142C9.83565 49.5 8.50029 48.1509 8.5 46.563C8.5 46.5628 8.5 46.5627 8.5 46.5625L8.52257 19.9388Z" fill="white" stroke="black" stroke-width="3"/>
+    </svg>
+    
\ No newline at end of file
diff --git a/assets/images/maps-icon.png b/assets/images/maps-icon.png
deleted file mode 100644
index ccff574..0000000
Binary files a/assets/images/maps-icon.png and /dev/null differ
diff --git a/assets/images/maps-icon.svg b/assets/images/maps-icon.svg
new file mode 100644
index 0000000..d116a79
--- /dev/null
+++ b/assets/images/maps-icon.svg
@@ -0,0 +1,12 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M51 48.3797V22.7056C51 22.3766 50.6585 22.1588 50.3602 22.2976L39.6811 27.2646C39.5856 27.309 39.4776 27.3185 39.3758 27.2915L19.6242 22.0419C19.5224 22.0148 19.4144 22.0243 19.3189 22.0688L8.26022 27.2123C8.10151 27.2861 8 27.4453 8 27.6203V53.2944C8 53.6234 8.34149 53.8412 8.63978 53.7024L19.3189 48.7354C19.4144 48.691 19.5224 48.6815 19.6242 48.7085L39.3758 53.9581C39.4776 53.9852 39.5856 53.9757 39.6811 53.9312L50.7398 48.7877C50.8985 48.7139 51 48.5547 51 48.3797Z"
+        fill="white" stroke="black" stroke-width="3" />
+    <path d="M39.175 54V26.129" stroke="black" stroke-width="3" />
+    <path d="M19.825 48.8387V22" stroke="black" stroke-width="3" />
+    <path
+        d="M42.5 20.1274C42.5 25.2795 39.8542 29.4268 36.7802 32.5075C33.9303 35.3636 30.824 37.1858 29.5 37.8935C28.176 37.1858 25.0697 35.3636 22.2198 32.5075C19.1458 29.4268 16.5 25.2795 16.5 20.1274C16.5 12.5407 22.3795 6.5 29.5 6.5C36.6205 6.5 42.5 12.5407 42.5 20.1274Z"
+        fill="#FFDF3F" stroke="black" stroke-width="3" />
+    <circle cx="29.5" cy="19.5" r="4.07692" fill="white" stroke="black" stroke-width="3" />
+</svg>
+    
\ No newline at end of file
diff --git a/assets/images/message-icon.png b/assets/images/message-icon.png
deleted file mode 100644
index 3963f84..0000000
Binary files a/assets/images/message-icon.png and /dev/null differ
diff --git a/assets/images/message-icon.svg b/assets/images/message-icon.svg
new file mode 100644
index 0000000..cfb95ce
--- /dev/null
+++ b/assets/images/message-icon.svg
@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22.8447 39.974C24.8966 45.8135 30.4596 50 37.0004 50C39.9521 50 42.7049 49.1475 45.0254 47.675L52.0004 50L49.6754 43.025L50.0304 42.436C51.284 40.2443 52.0004 37.7058 52.0004 35C52.0004 26.7158 45.2846 20 37.0004 20L36.438 20.0103L36.1558 20.0253" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M37 25C37 33.2843 30.2843 40 22 40C19.0482 40 16.2956 39.1474 13.9749 37.675L7 40L9.32498 33.0251C7.85261 30.7044 7 27.9518 7 25C7 16.7157 13.7157 10 22 10C30.2843 10 37 16.7157 37 25Z" fill="#FFDF3F" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+    
\ No newline at end of file
diff --git a/index.html b/index.html
index 1e3f91e..357593c 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@ layout: default
     <!-- Defaults to display: none; revealed via JS depending on USB insertion. -->
     <a href="{{ site.usb_butter_url }}" id="usb-butter" style="display: none;" data-url="{{ site.usb_butter_url }}">
       <div class="card">
-          <img src="{{ site.baseurl }}/assets/images/explore-icon.png" alt="Explore Icon" class="card-icon-big">
+          <img src="{{ site.baseurl }}/assets/images/explore-icon.svg" alt="Explore Icon" class="card-icon-big">
           {% t explore %}
       </div>
     </a>
@@ -20,19 +20,19 @@ layout: default
     </div>
     <a href="/chat/#/room/%23public%3A{{site.data.deployment.chat_server}}">
       <div class="card">
-        <img src="{{ site.baseurl }}/assets/images/message-icon.png" alt="Message Icon" class="card-icon">
+        <img src="{{ site.baseurl }}/assets/images/message-icon.svg" alt="Message Icon" class="card-icon">
         {% t message_board %}
       </div>
     </a>
     <a href="{{ site.baseurl }}/apps">
       <div class="card">
-          <img src="{{ site.baseurl }}/assets/images/appstore-icon.png" alt="App Store Icon" class="card-icon">
+          <img src="{{ site.baseurl }}/assets/images/appstore-icon.svg" alt="App Store Icon" class="card-icon">
           {% t app_store %}
       </div>
     </a>
     <a href="{{ site.baseurl }}/maps">
       <div class="card">
-          <img src="{{ site.baseurl }}/assets/images/maps-icon.png" alt="Maps Icon" class="card-icon">
+          <img src="{{ site.baseurl }}/assets/images/maps-icon.svg" alt="Maps Icon" class="card-icon">
           {% t offline_maps %}
       </div>
     </a>