diff --git a/assets/css/base.css b/assets/css/base.css
index 12024d9..d766dc0 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -208,4 +208,59 @@ h5 {
       display: none;
     }
   }
+}
+
+/* Dropdown Styles */
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 100%;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  text-align: left;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.dropdown-toggle-area {
+  display: inline-block;
+  cursor: pointer;
+  color: white;
+}
+
+.btn-primary:has(.dropdown-toggle-area) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.btn-primary .main-link {
+  flex-grow: 1;
+  padding: 10px;
+  text-align: center;
+  color: white;
+  text-decoration: none;
+}
+
+.btn-primary .main-link:hover {
+  text-decoration: none;
+  color: black;
 }
\ No newline at end of file
diff --git a/data/services.json b/data/services.json
index e1be581..54a5492 100644
--- a/data/services.json
+++ b/data/services.json
@@ -4,12 +4,18 @@
             "name": "Matrix",
             "url": "https://element.private.coffee",
             "short_description": "Matrix is an open network for secure, decentralized communication.",
-            "long_description": "Private.coffee runs a Matrix server. You can use it to chat with other people at Private.coffee or around the world. Use it with a client of your choice, with https://matrix.private.coffee as the homeserver, or use our web client.",
+            "long_description": "Private.coffee runs a Matrix server. You can use it to chat with other people at Private.coffee or around the world. Use it with a client of your choice, or use our Element web client.",
             "status": "OK",
             "links": [
                 {
-                    "name": "Go to Element (Web client)",
-                    "url": "https://element.private.coffee"
+                    "name": "Go to Element",
+                    "url": "https://element.private.coffee",
+                    "alternatives": [
+                        {
+                            "name": "Tor",
+                            "url": "http://element.coffee2m3bjsrrqqycx6ghkxrnejl2q6nl7pjw2j4clchjj6uk5zozad.onion"
+                        }
+                    ]
                 }
             ],
             "icon": "matrix-logo",
diff --git a/templates/index.html b/templates/index.html
index 88d133e..97c041e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -26,7 +26,13 @@
           xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
           xmlns="http://www.w3.org/2000/svg"
           xmlns:svg="http://www.w3.org/2000/svg"
-          style="max-width: 400px;filter: brightness(1.5);-webkit-filter: drop-shadow( 4px 4px 3px rgba(0, 0, 0, .7));filter: drop-shadow( 4px 4px 3px rgba(0, 0, 0, .7)) brightness(1.5);max-height: 400px;"
+          style="
+            max-width: 400px;
+            filter: brightness(1.5);
+            -webkit-filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.7));
+            filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.7)) brightness(1.5);
+            max-height: 400px;
+          "
         >
           <defs id="defs6" />
           <sodipodi:namedview
@@ -95,31 +101,47 @@
     </div>
     <div class="py-5 p-lg-5">
       <div
-        class="row row-cols-1 row-cols-md-2 mx-auto"
-        style="max-width: 900px"
+        class="row row-cols-1 row-cols-md-2 row-cols-lg-3 mx-auto"
+        style="max-width: 1200px"
       >
         {% for service in services.services %} {% if not
         service.exclude_from_index %}
         <div class="col mb-5">
           <div class="card shadow-sm">
             <div class="card-body px-4 py-5 px-md-5">
+              {% if service.icon %}
               <div
                 class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon"
                 style="top: 1rem; right: 1rem; position: absolute"
               >
-                {% if service.icon %}{{ service.icon | icon | safe }}{% endif %}
+                {{ service.icon | icon | safe }}
               </div>
+              {% endif %}
               <h5 class="fw-bold card-title">{{ service.name }}</h5>
               <p class="text-muted card-text mb-4">
                 {{ service.long_description }}
               </p>
-              {% for link in service.links %}
+              {% for link in service.links %} {% if link.alternatives %}
+              <div class="dropdown">
+                <div class="btn btn-primary shadow">
+                  <a class="main-link" href="{{ link.url }}">
+                    {{ link.name }}
+                  </a>
+                  <div class="dropdown-toggle-area">&#9660;</div>
+                </div>
+                <div class="dropdown-content">
+                  {% for alternative in link.alternatives %}
+                  <a href="{{ alternative.url }}">{{ alternative.name }}</a>
+                  {% endfor %}
+                </div>
+              </div>
+              {% else %}
               <a
                 class="btn btn-primary shadow w-100 text-center"
                 href="{{ link.url }}"
                 >{{ link.name }}</a
               >
-              {% endfor %}
+              {% endif %} {% endfor %}
             </div>
           </div>
         </div>