From f2a006b3974d8602dbef21a2557191e1e1e9097f Mon Sep 17 00:00:00 2001
From: Stef <stbuwalda@gmail.com>
Date: Sun, 31 Aug 2025 13:31:15 +0200
Subject: [PATCH] Updated frontend and changed a little backend

Added svg icons to the applications. Frontend will display the icon by name of [id].[icon_filetype] which defaults to svg. Able to set to other filetypes. Changed the frontend to center the application
---
 mem/__init__.py        |  4 ++--
 static/icons/0.svg     | 12 ++++++++++++
 static/icons/1.svg     |  1 +
 static/icons/2.svg     |  5 +++++
 static/icons/3.svg     |  9 +++++++++
 static/icons/4.svg     |  5 +++++
 static/icons/5.svg     |  1 +
 static/icons/6.svg     |  1 +
 static/icons/7.svg     |  1 +
 static/icons/8.svg     |  1 +
 static/icons/9.svg     |  1 +
 static/placeholder.svg |  2 --
 templates/home.html    |  9 ++++-----
 13 files changed, 43 insertions(+), 9 deletions(-)
 create mode 100644 static/icons/0.svg
 create mode 100644 static/icons/1.svg
 create mode 100644 static/icons/2.svg
 create mode 100644 static/icons/3.svg
 create mode 100644 static/icons/4.svg
 create mode 100644 static/icons/5.svg
 create mode 100644 static/icons/6.svg
 create mode 100644 static/icons/7.svg
 create mode 100644 static/icons/8.svg
 create mode 100644 static/icons/9.svg
 delete mode 100644 static/placeholder.svg

diff --git a/mem/__init__.py b/mem/__init__.py
index ff44d4c..8af79dd 100644
--- a/mem/__init__.py
+++ b/mem/__init__.py
@@ -9,7 +9,7 @@ class service:
     public: bool
     error: Optional[str]
     ping: Optional[int]
-    icon_filetype: Optional[str]
+    icon_filetype: str
 
     def __init__(
         self,
@@ -17,7 +17,7 @@ class service:
         url: str = "",
         label: str = "",
         public: bool = True,
-        icon_filetype: Optional[str] = None,
+        icon_filetype: str = "svg",
     ):
         self.id = id
         self.url = url
diff --git a/static/icons/0.svg b/static/icons/0.svg
new file mode 100644
index 0000000..3d0c51b
--- /dev/null
+++ b/static/icons/0.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+   <style>
+      .st1{fill:#fff}
+   </style>
+   <g id="Icon">
+      <circle cx="512" cy="512" r="512" style="fill:#609926"/>
+      <path class="st1" d="M762.2 350.3c-100.9 5.3-160.7 8-212 8.5v114.1l-16-7.9-.1-106.1c-58.9 0-110.7-3.1-209.1-8.6-12.3-.1-29.5-2.4-47.9-2.5-47.1-.1-110.2 33.5-106.7 118C175.8 597.6 296 609.9 344 610.9c5.3 24.7 61.8 110.1 103.6 114.6H631c109.9-8.2 192.3-373.8 131.2-375.2zm-546 117.3c-4.7-36.6 11.8-74.8 73.2-73.2C296.1 462 307 501.5 329 561.9c-56.2-7.4-104-25.7-112.8-94.3zm415.6 83.5-51.3 105.6c-6.5 13.4-22.7 19-36.2 12.5l-105.6-51.3c-13.4-6.5-19-22.7-12.5-36.2l51.3-105.6c6.5-13.4 22.7-19 36.2-12.5l105.6 51.3c13.4 6.6 19 22.8 12.5 36.2z"/>
+      <path class="st1" d="M555 609.9c.1-.2.2-.3.2-.5 17.2-35.2 24.3-49.8 19.8-62.4-3.9-11.1-15.5-16.6-36.7-26.6-.8-.4-1.7-.8-2.5-1.2.2-2.3-.1-4.7-1-7-.8-2.3-2.1-4.3-3.7-6l13.6-27.8-11.9-5.8-13.7 28.4c-2 0-4.1.3-6.2 1-8.9 3.2-13.5 13-10.3 21.9.7 1.9 1.7 3.5 2.8 5l-23.6 48.4c-1.9 0-3.8.3-5.7 1-8.9 3.2-13.5 13-10.3 21.9 3.2 8.9 13 13.5 21.9 10.3 8.9-3.2 13.5-13 10.3-21.9-.9-2.5-2.3-4.6-4-6.3l23-47.2c2.5.2 5 0 7.5-.9 2.1-.8 3.9-1.9 5.5-3.3.9.4 1.9.9 2.7 1.3 17.4 8.2 27.9 13.2 30 19.1 2.6 7.5-5.1 23.4-19.3 52.3-.1.2-.2.5-.4.7-2.2-.1-4.4.2-6.5 1-8.9 3.2-13.5 13-10.3 21.9 3.2 8.9 13 13.5 21.9 10.3 8.9-3.2 13.5-13 10.3-21.9-.6-2-1.9-4-3.4-5.7z"/>
+   </g>
+</svg>
\ No newline at end of file
diff --git a/static/icons/1.svg b/static/icons/1.svg
new file mode 100644
index 0000000..872b135
--- /dev/null
+++ b/static/icons/1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><rect width="512" height="512" rx="15%" fill="#282a2d"/><path d="M256 70H148l108 186-108 186h108l108-186z" fill="#e5a00d"/></svg>
\ No newline at end of file
diff --git a/static/icons/2.svg b/static/icons/2.svg
new file mode 100644
index 0000000..ca47c42
--- /dev/null
+++ b/static/icons/2.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+   <circle cx="512" cy="512" r="512" style="fill:#0095d5"/>
+   <path d="M780 468.41v114.21L535.48 723.86v-114.2zM488.69 609.66v114.21L244 582.62V468.41l110.57 63.79a1.81 1.81 0 0 0 .4.24zM611 512l-98.91 57.15-99-57.15 99-57.15zm145.7-84.09-99 57.15-122.22-70.64V300.13zm-268-127.81v114.32L366.3 485l-99-57.06z" style="fill:#fff"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/3.svg b/static/icons/3.svg
new file mode 100644
index 0000000..2820b8e
--- /dev/null
+++ b/static/icons/3.svg
@@ -0,0 +1,9 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#ffffff" width="800px" height="800px" viewBox="-3.2 -3.2 38.40 38.40" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
+
<g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(0,0), scale(1)">
+
<rect x="-3.2" y="-3.2" width="38.40" height="38.40" rx="19.2" fill="#00678e" strokewidth="0"/>
+
</g>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M16.027 8.713c-3.333 0-6.136 2.287-6.991 5.355-0.744-1.641-2.391-2.808-4.301-2.808-2.609 0.016-4.724 2.131-4.735 4.74 0.011 2.609 2.125 4.724 4.735 4.74 1.911 0 3.552-1.167 4.301-2.813 0.855 3.073 3.657 5.36 6.991 5.36 3.312 0 6.099-2.26 6.973-5.308 0.755 1.615 2.375 2.761 4.26 2.761 2.615-0.016 4.729-2.131 4.74-4.74-0.011-2.609-2.125-4.724-4.74-4.74-1.885 0-3.505 1.147-4.265 2.761-0.869-3.048-3.656-5.308-6.968-5.308zM16.027 11.495c2.5 0 4.5 2 4.5 4.505s-2 4.505-4.5 4.505c-2.496 0.011-4.516-2.016-4.505-4.505 0-2.505 2-4.505 4.505-4.505zM4.735 14.041c1.099 0 1.959 0.86 1.959 1.959s-0.86 1.959-1.959 1.959c-1.084 0.011-1.969-0.876-1.953-1.959 0-1.099 0.859-1.959 1.953-1.959zM27.26 14.041c1.1 0 1.959 0.86 1.959 1.959s-0.859 1.959-1.959 1.959c-1.083 0.011-1.963-0.876-1.953-1.959 0-1.099 0.86-1.959 1.953-1.959z"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/static/icons/4.svg b/static/icons/4.svg
new file mode 100644
index 0000000..6fa8a8e
--- /dev/null
+++ b/static/icons/4.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="57.54 57.53 396.92 396.93">
+<path d="M0 0 C0.77839233 0.70552002 0.77839233 0.70552002 1.57250977 1.42529297 C20.51724698 18.95857955 35.3183542 42.25039645 45.25 65.9375 C45.75917969 67.13761719 46.26835937 68.33773437 46.79296875 69.57421875 C53.13904333 85.15591751 57.42335993 102.21306817 59.25 118.9375 C59.35957031 119.79472656 59.46914063 120.65195313 59.58203125 121.53515625 C65.30647708 174.58168758 49.01780615 227.1014046 15.875 268.5 C12.4098987 272.65198864 8.83161111 276.6927508 5.1875 280.6875 C4.48197998 281.46589233 4.48197998 281.46589233 3.76220703 282.26000977 C-13.77107955 301.20474698 -37.06289645 316.0058542 -60.75 325.9375 C-61.95011719 326.44667969 -63.15023438 326.95585937 -64.38671875 327.48046875 C-79.96841751 333.82654333 -97.02556817 338.11085993 -113.75 339.9375 C-114.60722656 340.04707031 -115.46445312 340.15664063 -116.34765625 340.26953125 C-169.39418758 345.99397708 -221.9139046 329.70530615 -263.3125 296.5625 C-267.46448864 293.0973987 -271.5052508 289.51911111 -275.5 285.875 C-276.27839233 285.16947998 -276.27839233 285.16947998 -277.07250977 284.44970703 C-296.01724698 266.91642045 -310.8183542 243.62460355 -320.75 219.9375 C-321.25917969 218.73738281 -321.76835937 217.53726562 -322.29296875 216.30078125 C-328.63904333 200.71908249 -332.92335993 183.66193183 -334.75 166.9375 C-334.85957031 166.08027344 -334.96914063 165.22304688 -335.08203125 164.33984375 C-340.80647708 111.29331242 -324.51780615 58.7735954 -291.375 17.375 C-287.9098987 13.22301136 -284.33161111 9.1822492 -280.6875 5.1875 C-280.21715332 4.66857178 -279.74680664 4.14964355 -279.26220703 3.61499023 C-261.72892045 -15.32974698 -238.43710355 -30.1308542 -214.75 -40.0625 C-213.54988281 -40.57167969 -212.34976563 -41.08085938 -211.11328125 -41.60546875 C-195.53158249 -47.95154333 -178.47443183 -52.23585993 -161.75 -54.0625 C-160.89277344 -54.17207031 -160.03554687 -54.28164063 -159.15234375 -54.39453125 C-99.82500101 -60.79676248 -43.54726444 -39.72491441 0 0 Z " fill="#A289F9" transform="translate(393.75,113.0625)"/>
+<path d="M0 0 C2.63622485 2.22708275 5.19150738 4.52921782 7.7409668 6.85546875 C8.46670898 7.49871094 9.19245117 8.14195312 9.94018555 8.8046875 C28.36748008 26.03588989 41.75155651 53.35960955 42.86425781 78.65869141 C43.70797362 112.3608808 36.58885956 142.14006064 13.7409668 167.85546875 C12.54020508 169.20705078 12.54020508 169.20705078 11.31518555 170.5859375 C-8.53153214 191.53705519 -37.09680019 204.15705607 -65.8137207 205.140625 C-77.94100422 205.37709014 -89.5422865 205.25443065 -101.2590332 201.85546875 C-103.0224707 201.37980469 -103.0224707 201.37980469 -104.8215332 200.89453125 C-121.40302939 195.94116057 -136.3527812 187.31831389 -149.2590332 175.85546875 C-150.14848633 175.0665625 -151.03793945 174.27765625 -151.9543457 173.46484375 C-167.40909083 158.83370573 -177.61511815 140.25052542 -183.2590332 119.85546875 C-183.5787207 118.70820313 -183.8984082 117.5609375 -184.2277832 116.37890625 C-188.26683057 98.91376625 -188.98196274 77.02425735 -183.2590332 59.85546875 C-182.5990332 58.86546875 -181.9390332 57.87546875 -181.2590332 56.85546875 C-180.93032227 57.46132812 -180.60161133 58.0671875 -180.26293945 58.69140625 C-172.21889547 72.86113142 -160.79177658 83.491992 -144.8840332 88.23046875 C-127.13242009 91.2910917 -110.45150547 88.72225434 -95.2590332 78.85546875 C-83.60677615 70.49132656 -75.75104634 56.9235307 -73.2590332 42.85546875 C-71.45757952 24.03946126 -74.73970981 8.78864654 -86.8762207 -6.1328125 C-90.96217608 -10.5413433 -95.77705169 -13.57401274 -100.90356445 -16.6640625 C-103.2590332 -18.14453125 -103.2590332 -18.14453125 -105.2590332 -20.14453125 C-103.57312478 -20.62926803 -101.88520775 -21.10702051 -100.1965332 -21.58203125 C-98.78694336 -21.98228516 -98.78694336 -21.98228516 -97.34887695 -22.390625 C-64.24168178 -30.4686132 -26.24452842 -21.45755623 0 0 Z " fill="#131928" transform="translate(344.259033203125,182.14453125)"/>
+<path d="M0 0 C27.51668329 -1.54459553 56.68622642 12.36261605 76.97143555 30.24731445 C100.05828616 51.22761351 116.14269665 79.83089922 118.22119141 111.35473633 C119.4842267 149.41509562 109.54536352 181.25369492 83.42504883 209.56640625 C61.20694161 232.76768274 30.18258643 245.68447023 -1.72436523 246.47045898 C-37.47694444 246.75019142 -67.91707948 234.63666274 -93.52539062 209.50195312 C-112.03605933 190.64804024 -127.24579555 162.86302866 -128.09765625 135.91015625 C-128.08605469 134.97042969 -128.07445312 134.03070313 -128.0625 133.0625 C-128.05347656 132.10472656 -128.04445312 131.14695312 -128.03515625 130.16015625 C-128.01775391 129.09087891 -128.01775391 129.09087891 -128 128 C-127.67 128 -127.34 128 -127 128 C-126.79246094 129.23492187 -126.58492187 130.46984375 -126.37109375 131.7421875 C-122.03641631 156.12747696 -112.65378734 175.70645513 -96 194 C-95.43023437 194.65226563 -94.86046875 195.30453125 -94.2734375 195.9765625 C-77.53338041 214.09016274 -49.82674725 227.04001852 -25.19677734 228.12329102 C8.55585455 228.96826963 38.21751895 221.8135893 64 199 C64.82757813 198.27296875 65.65515625 197.5459375 66.5078125 196.796875 C87.15165343 177.37583998 99.32367565 148.51732778 100.28515625 120.4453125 C100.52162139 108.31802898 100.3989619 96.7167467 97 85 C96.68289063 83.824375 96.36578125 82.64875 96.0390625 81.4375 C91.07002873 64.80357134 82.4108957 49.99996858 71 37 C70.28457031 36.18402344 69.56914062 35.36804688 68.83203125 34.52734375 C50.47303107 14.99722536 25.98974766 5.20070823 0 1 C0 0.67 0 0.34 0 0 Z " fill="#6865CD" transform="translate(286,158)"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/5.svg b/static/icons/5.svg
new file mode 100644
index 0000000..b76d638
--- /dev/null
+++ b/static/icons/5.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256"/><path d="M268.6 102.4c64.4 0 116.8 52.4 116.8 116.7 0 25.3-8 49.4-23 69.6-14.8 19.9-35 34.3-58.4 41.7l-6.5 2-15.5-76.2 4.3-2c14-6.7 23-21.1 23-36.6 0-22.4-18.2-40.6-40.6-40.6S228 195.2 228 217.6c0 15.5 9 29.8 23 36.6l4.2 2-25 153.4h-69.5V102.4z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/static/icons/6.svg b/static/icons/6.svg
new file mode 100644
index 0000000..917a2a9
--- /dev/null
+++ b/static/icons/6.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" style="fill:#292b2f"/><path d="M380.6 344.1c-14.8 0-27.5 8.6-33.5 21.1l-53.2-7.7c-.2-20.3-16.7-36.8-37.1-36.8-7.3 0-14 2.1-19.8 5.7l-75.6-85.6c4.4-6.1 6.9-13.5 6.9-21.6 0-20.5-16.6-37.1-37.1-37.1s-37.1 16.6-37.1 37.1 16.6 37.1 37.1 37.1c6.3 0 12.3-1.6 17.5-4.4l76.4 86.5c-3.4 5.6-5.4 12.2-5.4 19.3 0 20.5 16.6 37.1 37.1 37.1 14.7 0 27.4-8.5 33.4-20.9l53.3 7.7c.3 20.2 16.8 36.5 37.1 36.5 20.5 0 37.1-16.6 37.1-37.1.1-20.3-16.6-36.9-37.1-36.9" style="fill:#fff"/><path d="M380.6 93.7c-20.5 0-37.1 16.6-37.1 37.1 0 10.1 4 19.2 10.6 25.9L271.8 273c-4.6-2-9.6-3.1-15-3.1-20.5 0-37.1 16.6-37.1 37.1q0 5.55 1.5 10.5l-62.5 38.7c-6.8-7.4-16.6-12.1-27.4-12.1-20.5 0-37.1 16.6-37.1 37.1s16.6 37.1 37.1 37.1 37.1-16.6 37.1-37.1c0-3.5-.5-7-1.4-10.2l62.6-38.8c6.8 7.3 16.5 11.9 27.2 11.9 20.5 0 37.1-16.6 37.1-37.1 0-9-3.2-17.3-8.6-23.8l83-117.3c3.8 1.3 7.9 2.1 12.2 2.1 20.5 0 37.1-16.6 37.1-37.1s-16.5-37.2-37-37.2" style="fill:#e5a00d"/></svg>
\ No newline at end of file
diff --git a/static/icons/7.svg b/static/icons/7.svg
new file mode 100644
index 0000000..04560ee
--- /dev/null
+++ b/static/icons/7.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="svg5186" x="0" y="0" style="enable-background:new 0 0 512 512" version="1.1" viewBox="0 0 512 512"><style>.st18{fill:none;stroke:#fff;stroke-linecap:round}</style><filter id="filter9771" width="1.06" height="1.28" x="-.03" y="-.14"><feGaussianBlur id="feGaussianBlur9773" stdDeviation=".52"/></filter><g id="layer1"><g style="opacity:.2824;filter:url(#filter9771);enable-background:new"><path id="rect9761" d="M40.5 409h431.1c14.7 0 26.6 11.9 26.6 26.6v49.9c0 14.7-11.9 26.6-26.6 26.6H40.5c-14.7 0-26.6-11.9-26.6-26.6v-49.9c0-14.7 11.9-26.6 26.6-26.6" style="fill:#2e3436"/></g><linearGradient id="path5232_00000058576920555416522510000016935891415215423419_" x1="257.658" x2="257.658" y1="321.649" y2="64.535" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#787b76"/><stop offset=".871" style="stop-color:#babcb9"/><stop offset="1" style="stop-color:#787b76"/></linearGradient><path id="path5232" d="M94.8 150.1c-13.6-.5-27.3 11.3-28.5 25.6C56 260 40.8 344.3 33 428.5v35.4c.4 18.3 12.4 30.5 25.6 32.9h400.1c11.3-.3 23.9-8.1 23.5-23.1v-45.5l-36-245.2c-2.9-15-15.8-31-33.6-32.9z" style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#path5232_00000058576920555416522510000016935891415215423419_);stroke:#555753;stroke-width:1"/><linearGradient id="path5230_00000128454780994748310510000007092261228009905591_" x1="260.014" x2="265.792" y1="166.111" y2="271.557" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#f0f2ef"/><stop offset="1" style="stop-color:#cdd1c8"/></linearGradient><path id="path5230" d="M101.7 416.2c-13.1-1.4-22.3-10-22-25.7l22-184.8c3.4-12.3 11.4-22.2 24-22.2h253.4c12.6-.4 25.1 8.3 28.4 18.7l27.9 186.4c.7 17-6.3 26.8-18.1 26.4z" style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#path5230_00000128454780994748310510000007092261228009905591_);stroke:#555753;stroke-width:1"/><linearGradient id="path5197_00000006689332825260170750000007963860549997984920_" x1="255.848" x2="255.848" y1="201.852" y2="135.51" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#555753"/><stop offset="1" style="stop-color:#2e3436"/></linearGradient><linearGradient id="path5197_00000052802538007258154920000008719694013745319332_" x1="255.799" x2="253.526" y1="186.293" y2="277.071" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#888a85"/><stop offset="1" style="stop-color:#2e3436"/></linearGradient><path id="path5197" d="m215.8 194.5-23.8 139h-34.3l92.8 59.6 103.6-59.6h-34.3l-21.7-139z" style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#path5197_00000006689332825260170750000007963860549997984920_);stroke:url(#path5197_00000052802538007258154920000008719694013745319332_)"/><linearGradient id="rect5224_00000167378108370139695280000003496694304969247617_" x1="257.048" x2="257.048" y1="490.657" y2="451.65" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#c00"/><stop offset=".365" style="stop-color:#ef0000"/><stop offset="1" style="stop-color:#a00"/></linearGradient><path id="rect5224" d="M135.2 10.5h243.6c32 0 58 10.3 58 22.9v24.2c0 12.7-26 22.9-58 22.9H135.2c-32 0-58-10.3-58-22.9V33.4c.1-12.6 26-22.9 58-22.9" style="fill:url(#rect5224_00000167378108370139695280000003496694304969247617_);stroke:#930000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"/><linearGradient id="rect5896_00000069389731644706871400000005848080282515370678_" x1="257.039" x2="257.039" y1="491.798" y2="445.273" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#fff"/><stop offset="1" style="stop-color:#fff;stop-opacity:0"/></linearGradient><path id="rect5896" d="M110.2 22.7h293.7c11.7 0 21.2 6.6 21.2 14.8v16c0 8.2-9.5 14.8-21.2 14.8H110.2C98.5 68.2 89 61.6 89 53.5v-16c0-8.2 9.5-14.8 21.2-14.8" style="opacity:.5833;fill:none;stroke:url(#rect5896_00000069389731644706871400000005848080282515370678_);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;enable-background:new"/><linearGradient id="path5881_00000139273475127190173840000003664081353357937311_" x1="253.497" x2="244.732" y1="141.169" y2="352.838" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#f9f9f9"/><stop offset="1" style="stop-color:#eeeeec;stop-opacity:.6204"/></linearGradient><path id="path5881" d="M101.6 161.4c-12.9-.5-25.8 10.6-27 24l-32.2 232c.1 1.4.4 3 .7 4.4v33.1c.4 17.1 11.7 28.2 24.3 30.4H447c10.7-.3 22.3-7.3 21.9-21.3v-42.5c.1-.3.3-.7.3-1l-.3-2.4v-2.4h-.3L435 191.8c-2.8-14.1-15-28.7-31.8-30.4z" style="opacity:.2454;fill:none;stroke:url(#path5881_00000139273475127190173840000003664081353357937311_);stroke-width:1;enable-background:new"/><linearGradient id="path5926_00000080198606214203198090000004507462762851665313_" x1="256.964" x2="256.964" y1="315.943" y2="303.572" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#000"/><stop offset="1" style="stop-color:#000;stop-opacity:0"/></linearGradient><path id="path5926" d="m97.2 304.5 21.2-91.9 277.7.7 20.6 103.8-13.6-104.9c-2.6-11.6-8.7-22.8-19.9-22.5l-253.3-.5c-16.5-.5-19.8 10.2-23.5 23z" style="opacity:.2083;fill-rule:evenodd;clip-rule:evenodd;fill:url(#path5926_00000080198606214203198090000004507462762851665313_);enable-background:new"/><linearGradient id="rect5226_00000161598652057951830900000004632129501683187641_" x1="256.939" x2="256.939" y1="507.619" y2="330.712" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#babdb6"/><stop offset=".133" style="stop-color:#eeeeec"/><stop offset="1" style="stop-color:#babdb6"/></linearGradient><path id="rect5226" d="M228.4 0h57.1c6.9 0 12.4 5.6 12.4 12.4v275.2c0 6.9-5.6 12.4-12.4 12.4h-57.1c-6.9 0-12.4-5.6-12.4-12.4V12.4C215.9 5.6 221.5 0 228.4 0" style="fill:url(#rect5226_00000161598652057951830900000004632129501683187641_);stroke:#888a85;stroke-linecap:round;stroke-linejoin:round"/><linearGradient id="rect5244_00000025407472243848991930000000544946367935788717_" x1="257.328" x2="256.817" y1="208.343" y2="294.14" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#2e3436"/><stop offset="1" style="stop-color:#2e3436;stop-opacity:0"/></linearGradient><path id="rect5244" d="M222.5 212.7h69.1c6.9 0 12.4 5.6 12.4 12.4v68.1c0 6.9-5.6 12.4-12.4 12.4h-69.1c-6.9 0-12.4-5.6-12.4-12.4v-68.1c0-6.8 5.5-12.4 12.4-12.4" style="fill:url(#rect5244_00000025407472243848991930000000544946367935788717_)"/><path id="path5879" d="M111.2 437.8H436" style="opacity:.4352;fill:none;stroke:#fff;stroke-linecap:round;enable-background:new"/><path id="rect5892" d="M239.3 11.9H274c6.9 0 12.4 5.6 12.4 12.4V276c0 6.9-5.6 12.4-12.4 12.4h-34.7c-6.9 0-12.4-5.6-12.4-12.4V24.3c0-6.9 5.5-12.4 12.4-12.4" style="opacity:.2269;fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;enable-background:new"/><g id="g5972" style="opacity:.6204"><path id="path5831" d="M215.4 310.8H297" style="fill:none;stroke:#888a85;stroke-linecap:round"/><path id="path5833" d="M209.9 333.9h92.6" style="opacity:.6806;fill:none;stroke:#888a85;stroke-linecap:round;enable-background:new"/><path id="path5958" d="M213.5 322.4h86.1" style="fill:none;stroke:#5d5d5c;stroke-linecap:round"/><path id="path5960" d="M208.8 345.3h95.6" style="opacity:.6806;fill:none;stroke:#5d5d5c;stroke-width:1;stroke-linecap:round;enable-background:new"/></g><path id="path9791" d="M145.4 322.5h36.3" class="st18"/><path id="path9803" d="M331 321.8h36.3" class="st18"/><path id="path5119" d="M95 437.9c0 3.3-2.6 6-5.8 6s-5.8-2.7-5.8-6 2.6-6 5.8-6 5.8 2.7 5.8 6" style="opacity:.335;fill:#fff;enable-background:new"/></g></svg>
\ No newline at end of file
diff --git a/static/icons/8.svg b/static/icons/8.svg
new file mode 100644
index 0000000..4c59526
--- /dev/null
+++ b/static/icons/8.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><path d="M76.8 0h358.4C477.6 0 512 34.4 512 76.8v358.4c0 42.4-34.4 76.8-76.8 76.8H76.8C34.4 512 0 477.6 0 435.2V76.8C0 34.4 34.4 0 76.8 0" style="fill:#175ddc"/><path d="M372 297V131H256v294c47-28 115-74 116-128m49-198v198c0 106-152 181-165 181S91 403 91 297V99s0-17 17-17h296s17 0 17 17" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/static/icons/9.svg b/static/icons/9.svg
new file mode 100644
index 0000000..0b91ca6
--- /dev/null
+++ b/static/icons/9.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" version="1.1" viewBox="33.9 0 444.2 512"><style>.st0{fill:#faa42f}.st0,.st3,.st4,.st5,.st6,.st7,.st8{fill-rule:evenodd;clip-rule:evenodd}.st3{fill:#f15933}.st4{fill:#f37132}.st5{fill:#d6e042}.st6{fill:#fcea3b}.st7{fill:#e22574}.st8{fill:#ef3839}.st10{fill:#ffcf29}.st10,.st12,.st14,.st23,.st24,.st25{fill-rule:evenodd;clip-rule:evenodd}.st12{fill:#cc3192}.st14{fill:#9b3995}.st23{fill:#b263a7}.st24{fill:#6b297a}.st25{fill:#782a8f}</style><path d="m35.7 383.1-1.8-.9v1.8l1.8.9z" class="st0"/><path d="M35.7 319.1v-31.7l-1.8-.9v33.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#ddb02a"/><path d="m57.7 331.9-22-12.8-1.8 1.2v61.9l1.8.9 22-12.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#c47728"/><path d="m91 414.8 27.5 16.1v1.8L89.2 416z" class="st3"/><path d="m57.7 370.3-22 12.8v1.8L89.2 416l1.8-1.2v-25.3z" class="st4"/><path d="M35.7 223.7v-32l-1.8-.9v33.8z" class="st5"/><path d="m33.9 286.5 1.8.9 19.2-11q-1.35-10.2-1.2-20.4c0-7 .6-14.3 1.2-21.3l-19.2-11-1.8.9z" class="st6"/><path d="m35.7 319.4 22 12.5L91 313v-25.6l-16.2-9.5c.3 4.6 1.2 9.1 2.1 13.7L59.2 302c-2.2-8.4-3.6-17-4.3-25.6l-19.2 11z" class="st0"/><path d="M91 414.8v-25.3l8.9-5.2-.3-.3c4.3 5.2 8.9 10 13.4 14.6 7.7 7.7 15.9 14.7 24.7 21l-19.2 11.3zm32.9-44.5 22.3 12.8v18.6q-10.35-7.5-19.2-16.8c-3.6-3.3-7-6.9-10.1-10.7z" class="st3"/><path d="m201.5 478.5-27.8-15.8-1.5.9 29.3 17.1z" class="st7"/><path d="m172.2 463.6 1.5-.9v-22.3c-12.7-5.6-24.8-12.5-36-20.7L118.4 431v1.8z" class="st8"/><path d="M35.7 128v-.9l-1.8.9v.9z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#bbd64b"/><path d="M63.2 143.9 35.7 128l-1.8.9v61.9l1.8.9 27.5-15.9z" class="st5"/><path d="m35.7 223.7 19.2 11c2.1-19 6.8-37.7 14-55.4l-5.8-3.3-27.5 15.9v31.8zm39.1 9.1 16.2-9.1v-32l-4.9-2.8c-5.6 14.1-9.4 28.9-11.3 43.9" class="st10"/><path d="m74.8 277.9 16.2 9.5 27.5-15.9v-32L91 223.7l-16.2 9.1c-1 7.7-1.5 15.4-1.5 23.2 0 7.3.5 14.7 1.5 21.9" class="st0"/><path d="M173.7 338.6v28.3l-27.5 16.2-22.3-12.8v-38.4l19.2-11z" class="st3"/><path d="m173.7 462.7 27.8 15.8 27.8-15.8v-6.4c-19.5-2.7-38.2-7.9-55.6-15.9zm55.6-26.2V431l-27.8-16.1-16.2 9.4c14.1 6 28.9 10 44 12.2" style="fill-rule:evenodd;clip-rule:evenodd;fill:#ee438d"/><path d="M118.5 271.5 91 287.4V313l33 18.9 19.2-11v-35.3z" class="st4"/><path d="m229.3 462.6-27.8 15.8v2.1l53.4 30.8 1.8-.9v-32z" class="st12"/><path d="m185.3 424.3 16.2-9.4v-31.7L173.7 367l-27.5 16.2v18.6c12 9.1 25.1 16.7 39.1 22.5" style="fill-rule:evenodd;clip-rule:evenodd;fill:#bd2025"/><path d="m256.7 510.5-1.8.9 1.2.6 1.5-.9z" class="st14"/><path d="m91 96-.9-.3-54.3 31.4v.9l27.5 15.9L91 128z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#f1eb59"/><path d="m63.2 175.9 5.8 3.3c7-17.4 16.5-33.2 27.8-47.9L91 128l-27.8 15.9zm22.9 13 4.9 2.8 27.5-15.8v-32l-4.6-2.4c-11.6 14.3-20.9 30.3-27.8 47.4" class="st6"/><path d="M143.2 225.2v-34.1l.9-.6-25.6-14.6L91 191.7v32l27.5 15.8z" class="st0"/><path d="M256.7 414.8v-29.3l-.6.3-29.9-17.1-24.7 14.3v31.7l27.8 16.1z" class="st7"/><path d="M143.2 285.6v-60.3l-24.7 14.3v32z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#f7975f"/><path d="m229.3 462.6 27.5 15.8 27.8-15.8v-6.7c-9.4 1.2-18.9 1.8-28.4 1.8-9 0-17.9-.5-26.9-1.5zm55.2-26.5v-5.2l-27.8-16.1-27.5 16.1v5.5c8.9 1.2 17.9 1.8 26.9 1.8 9.5.1 19-.6 28.4-2.1" class="st12"/><path d="m201.5 383.1 24.7-14.3-52.5-30.2V367z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#d31f26"/><path d="m312 478.5-27.5-15.8-27.8 15.8v32l.9.6 54.3-31.4v-1.2z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#73206a"/><path d="m91 96 27.5-15.9v-.9L90.1 95.7z" class="st5"/><path d="m91 128 5.8 3.3c5.2-6.4 10.7-12.2 16.2-18 7.9-7.9 16.5-15.2 25.6-21.6l-20.2-11.6L91 96zm22.9 13.4 4.6 2.5 27.8-15.9v-17.7q-10.35 7.5-19.2 16.8c-4.7 4.6-9 9.1-13.2 14.3" class="st10"/><path d="M173.7 143.9 146.2 128l-27.8 15.9v32l25.6 14.6 29.6-17.1v-29.5z" class="st0"/><path d="M339.8 462.7 312 478.5v1.2l28.7-16.5z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#853a96"/><path d="m312 383.1-25.3-14.9-29.9 17.4v29.3l27.8 16.1 27.5-16.1z" class="st12"/><path d="m284.5 462.6 27.5 15.8 27.8-15.8v-22.9c-17.6 8-36.2 13.4-55.3 16.2zm43.1-38.7-15.6-9.1-27.5 16.1v5.2c15-2.4 29.6-6.4 43.1-12.2" class="st14"/><path d="m118.4 80.1 20.2 11.6c11-7.9 22.8-14.6 35.1-20.1V48.1l-.6-.3-54.6 31.4z" class="st10"/><path d="m146.2 128 27.5 15.9 27.8-15.9V96l-15-8.5c-14.7 5.8-28.1 13.7-40.3 22.9z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#d98a26"/><path d="m339.8 462.7.9.6 54.3-31.4v-.9l-20.2-11.6c-11 7.9-22.8 14.8-35.1 20.4z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#8f4f9f"/><path d="m201.5 128-27.8 15.9v29.6l53.4-30.8z" class="st4"/><path d="m312 383.1 27.8-16.2v-29.3l-53.1 30.5z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#d24b9b"/><path d="m312 414.8 15.6 9.1c14.2-6 27.6-13.9 39.7-23.5V383l-27.5-16.2-27.8 16.3z" class="st23"/><path d="m173.7 48.1 27.8-15.9v-.9l-28.4 16.5z" class="st10"/><path d="m186.5 87.5 15 8.5 22.3-12.5v-7l1.2-.3c-13.2 2.3-26.1 6.1-38.5 11.3m37.2-42.4-22.3-12.8-27.8 15.9v23.5c16-7 32.8-12 50-14.9z" class="st0"/><path d="m374.9 419.4 20.2 11.6 27.8-16.1v-25.3l-33.3-19.2-22.3 12.8v17.4c3.7-2.4 6.7-5.2 10.1-7.9l17.7 10.1c-6.4 5.8-13.2 11.4-20.2 16.6" class="st24"/><path d="M422.8 414.8 395 430.9v.9l28.7-16.5z" class="st25"/><path d="m256.1 126.2.6.3v-24.1l-33-18.9L201.5 96v32l25.7 14.6z" class="st4"/><path d="M389.5 370.3v-38.4L368.8 320v.9l-29 16.8V367l27.5 16.2z" class="st14"/><path d="M256.7 25.9V.6l-.6-.6-54.6 31.4v.9l22.3 12.8z" class="st0"/><path d="M256.7 102.4 290 83.5 312 96v32l-26.3 15.2-29-16.8z" class="st3"/><path d="m478.1 383.1-22.3-12.8-33 19.2v25.3l.9.6L478 384z" class="st25"/><path d="M395.1 271.6v-32l-26.3-15.2v62.2z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#a01664"/><path d="M339.8 143.9 312 128l-26.3 15.2 54 31.1v-30.4z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#c02026"/><path d="M422.8 313v-25.6L395 271.5l-26.2 14.9V320l20.7 11.9z" class="st14"/><path d="m290 45.1 22-12.8 27.8 15.9v24.1c-8.3-3.8-16.9-6.9-25.7-9.5v20.4c4.3 1.2 8.5 2.8 12.5 4.6L312 96l-22-12.5z" class="st3"/><path d="M426.5 321.2c.6-.9 1-2 1.2-3.1-.2 1.2-.6 2.2-1.2 3.1m1.8-4.2c4.4-12.3 7.3-25.1 8.9-38.1l-14.4 8.5V313l5.8 3.4zm27.5 14.9 22.3-12.8v-31.7l-20.8-11.9c-1.7 17.5-5.8 34.7-11.9 51.2l.3-.6z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#9051a0"/><path d="m367.3 128-27.5 15.9v30.5l28.7 16.8 26.6-15.2v-32z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#b01b4a"/><path d="M312 32.3 256.8.6v25.3L290 45.1z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#c54627"/><path d="M422.9 223.7v-32l-27.8-15.8-26.6 15.2h.3v33.2l26.3 15.2z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#a41768"/><path d="m312 128 27.8 15.9 27.5-15.9v-16.5c-12.4-9.8-26-17.8-40.6-23.8L312 96z" class="st8"/><path d="m395 271.5 27.8 15.9 14.3-8.5c1-7.6 1.5-15.2 1.5-22.9 0-8-.6-16.1-1.5-24.1l-14.4-8.2-27.7 15.8z" class="st14"/><path d="m457.3 275.5 20.8 11.9v-63.7L457 235.6q1.35 10.2 1.2 20.4c0 6.7-.3 13.1-.9 19.5" class="st24"/><path d="m367.2 128 27.8 15.9 3.4-1.8c-4-5.3-8.4-10.2-13.1-14.9-5.7-5.5-11.7-10.7-18-15.5V128zm48.3 4 7.3-4V96L395 80.1l-20.7 12.2c8.8 6.3 17.1 13.4 24.7 21 5.8 6 11.3 12.2 16.5 18.7" class="st7"/><path d="M478.1 287.4v32z" class="st25"/><path d="m395 175.9 27.8 15.9 3.3-1.8c-6.6-17.3-16-33.5-27.8-47.8L395 144zm48.3 3.9 7-4v-32L422.8 128l-7.3 4c11.3 14.6 20.7 30.7 27.8 47.8" class="st12"/><path d="M374.3 92.3 395 80.1l-55.3-32v24.1c12.2 5.5 23.8 12.3 34.6 20.1" class="st8"/><path d="m422.8 223.7 14.4 8.2c-2-14.4-5.7-28.5-11-42.1l-3.4 1.8zm34.2 11.9 21.1-11.9v-32l-27.8-15.9-7 4c7 17.7 11.9 36.3 13.7 55.8" class="st23"/><path d="m450.3 143.9 27.8-15.9-55.3-32v32z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#d1499a"/><path d="M450.3 143.9v32l27.8 15.9V128z" class="st14"/><path d="m478.1 319.1-22.3 12.8v38.4l22.3 12.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#85459a"/><path d="M201.5 287.4v3.1l-2.7-1.5v-3zm27.8-15.9-27.8 15.9-2.7-1.5v-60.7l2.7-1.5 27.8 15.8z" class="st3"/><path d="m256.7 319.1-2.8 1.8 2.1 1.2 2.8-1.8z" class="st7"/><path d="m229.3 271.5-27.8 15.9v3.1L254 321l2.8-1.8v-31.7z" class="st8"/><path d="m312 287.4-27.5-15.8-27.8 15.8v31.7l2.1 1.2 53.1-30.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#ee3f8a"/><path d="m284.5 239.5-27.8-15.8-27.5 15.8v32l27.5 15.9 27.8-15.9z" class="st8"/><path d="m313.2 224.3-1.2-.6-27.5 15.8v32l27.5 15.9 1.2-.6z" class="st7"/><path d="M312 287.4v2.1l1.2-.6v-2.1z" class="st12"/><path d="M201.5 223.7v-2.1l-2.7 1.5v2.1z" class="st4"/><path d="M256.7 191.7v32l-27.5 15.8-27.8-15.8v-2.1l53.4-30.8z" class="st3"/><path d="m256.8 191.7-1.8-.9 1.2-.6 1.8.9z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#f4805f"/><path d="m312 222.5-54-31.4-1.2.6v32l27.8 15.8 27.5-15.8v-1.2z" class="st8"/><path d="M313.2 224.3v-1.2l-1.2-.6v1.2z" class="st7"/><path d="m275.7 53.3-18.9-11-18.9 11v21.9l18.9 11 18.9-11z" class="st4"/><path d="m441.8 340.1-18.9-11-19.2 11V362l19.2 11 18.9-11z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#552263"/><path d="m109.9 340.1-18.9-11-18.9 11v22L91 373l18.9-11z" class="st4"/></svg>
\ No newline at end of file
diff --git a/static/placeholder.svg b/static/placeholder.svg
deleted file mode 100644
index e7d6ed8..0000000
--- a/static/placeholder.svg
+++ /dev/null
@@ -1,2 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg" aria-labelledby="placeholderIconTitle" stroke="#000000" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#000000"> <title id="placeholderIconTitle">Placeholder</title> <rect width="18" height="18" x="3" y="3"/> <path stroke-linecap="round" d="M21 21L3 3 21 21zM21 3L3 21 21 3z"/> </svg>
\ No newline at end of file
diff --git a/templates/home.html b/templates/home.html
index 4587618..4911bb5 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -11,16 +11,15 @@
         crossorigin="anonymous"></script>
 </head>
 
-<body id="main_body" class="m-2 bg-light-subtle">
+<body id="main_body" class="m-2 bg-light-subtle d-flex flex-wrap justify-content-center">
     {% for s in services %}
-    <div class="d-inline-block m-2 border {{'border-success' if s.online else 'border-danger'}} border-3"
-        style="width: 200px">
+    <div class="m-2 border {{'border-success' if s.online else 'border-danger'}} border-3" style="width: 200px">
         <div class="bg-body-tertiary d-flex flex-column align-items-center">
             <div class="bg-dark w-100">
                 <h4 class="text-center text-truncate m-0" style="font-size: 1.5rem;">{{s.label}}</h4>
             </div>
-            <div class="ratio ratio-1x1">
-                <img src="static/placeholder.svg" class="img-fluid">
+            <div class="ratio ratio-1x1 w-75">
+                <img src="static/icons/{{s.id}}.{{s.icon_filetype}}" class="img-fluid">
             </div>
         </div>
     </div>