diff --git a/crates/frontend/public/assets/style.css b/crates/frontend/public/assets/style.css
index b6deae5..6b84498 100644
--- a/crates/frontend/public/assets/style.css
+++ b/crates/frontend/public/assets/style.css
@@ -1,3 +1,17 @@
+:root {
+  --background-color: #FFF;
+  --background-darker: #EEE;
+  --primary-color: #2F2FE1;
+  --primary-color-dark: color-mix(in srgb, var(--primary-color), #000000 80%);
+  --text-on-primary-color: #FFF;
+  /* --color-red: #FE2060; */
+  --color-red: #EE1D59;
+}
+
+html {
+  background-color: var(--background-color);
+}
+
 body {
   font-family: sans-serif;
   margin: 0 auto;
@@ -48,20 +62,6 @@ header {
   align-items: center;
 }
 
-:root {
-  --background-color: #FFF;
-  --background-darker: #EEE;
-  --primary-color: #2F2FE1;
-  --primary-color-dark: color-mix(in srgb, var(--primary-color), #000000 80%);
-  --text-on-primary-color: #FFF;
-  /* --color-red: #FE2060; */
-  --color-red: #EE1D59;
-}
-
-html {
-  background-color: var(--background-color);
-}
-
 button,
 .button {
   border: none;
@@ -109,13 +109,13 @@ table {
   box-shadow: 4px 2px 12px -6px black;
   border-collapse: collapse;
   overflow-x: scroll;
-  display: block;
-  width: fit-content;
+  width: 100%;
 
   td,
   th {
     padding: 8px;
     border: 1px solid black;
+    width: max-content;
   }
 
   th {
diff --git a/crates/frontend/public/templates/components/addressbooks_section.html b/crates/frontend/public/templates/components/addressbooks_section.html
new file mode 100644
index 0000000..409fd2f
--- /dev/null
+++ b/crates/frontend/public/templates/components/addressbooks_section.html
@@ -0,0 +1,56 @@
+<section>
+  <h2>Addressbooks</h2>
+  <ul>
+    {% for addressbook in addressbooks %}
+    <li class="collection-list-item">
+      <a href="/frontend/user/{{ addressbook.principal }}/addressbook/{{ addressbook.id}}">
+        <span class="title">
+          {%- if addressbook.principal != user.id -%}{{ addressbook.principal }}/{%- endif -%}
+          {{ addressbook.displayname.to_owned().unwrap_or(addressbook.id.to_owned()) }}
+        </span>
+        <span class="description">
+          {% if let Some(description) = addressbook.description %}{{ description }}{% endif %}
+        </span>
+        <div class="actions">
+          <form action="/carddav/principal/{{ addressbook.principal }}/{{ addressbook.id }}" target="_blank"
+            method="GET">
+            <button type="submit">Download</button>
+          </form>
+          <delete-button trash
+            href="/carddav/principal/{{ addressbook.principal }}/{{ addressbook.id }}"></delete-button>
+        </div>
+      </a>
+    </li>
+    {% else %}
+    You do not have any addressbooks yet
+    {% endfor %}
+  </ul>
+  {%if !deleted_addressbooks.is_empty() %}
+  <h3>Deleted Addressbooks</h3>
+  <ul>
+    {% for addressbook in deleted_addressbooks %}
+    <li class="collection-list-item">
+      <a href="/frontend/user/{{ addressbook.principal }}/addressbook/{{ addressbook.id}}">
+        <span class="title">
+          {%- if addressbook.principal != user.id -%}{{ addressbook.principal }}/{%- endif -%}
+          {{ addressbook.displayname.to_owned().unwrap_or(addressbook.id.to_owned()) }}
+        </span>
+        <span class="description">
+          {% if let Some(description) = addressbook.description %}{{ description }}{% endif %}
+        </span>
+        <div class="actions">
+          <form action="/frontend/user/{{ addressbook.principal }}/addressbook/{{ addressbook.id}}/restore"
+            method="POST" class="restore-form">
+            <button type="submit">Restore</button>
+          </form>
+          <delete-button href="/carddav/principal/{{ addressbook.principal }}/{{ addressbook.id }}"></delete-button>
+        </div>
+      </a>
+    </li>
+    {% endfor %}
+  </ul>
+  {% endif %}
+
+  <create-addressbook-form user="{{ user.id }}"></create-addressbook-form>
+
+</section>
diff --git a/crates/frontend/public/templates/components/calendars_section.html b/crates/frontend/public/templates/components/calendars_section.html
new file mode 100644
index 0000000..8499d2b
--- /dev/null
+++ b/crates/frontend/public/templates/components/calendars_section.html
@@ -0,0 +1,72 @@
+<section>
+  <h2>Calendars</h2>
+  <ul>
+    {% for calendar in calendars %}
+    {% let color = calendar.color.to_owned().unwrap_or("transparent".to_owned()) %}
+    <li class="collection-list-item" style="--color: {{ color }}">
+      <a href="/frontend/user/{{ calendar.principal }}/calendar/{{ calendar.id }}">
+        <span class="title">
+          {%- if calendar.principal != user.id -%}{{ calendar.principal }}/{%- endif -%}
+          {{ calendar.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }}
+        </span>
+        <div class="comps">
+          {% for comp in calendar.components %}
+          <span>{{ comp }}</span>
+          {% endfor %}
+        </div>
+        <span class="description">
+          {% if let Some(description) = calendar.description %}{{ description }}{% endif %}
+        </span>
+        {% if let Some(subscription_url) = calendar.subscription_url %}
+        <span class="subscription-url">{{ subscription_url }}</span>
+        {% endif %}
+        <div class="actions">
+          <form action="/caldav/principal/{{ calendar.principal }}/{{ calendar.id }}" target="_blank" method="GET">
+            <button type="submit">Download</button>
+          </form>
+          {% if !calendar.id.starts_with("_birthdays_") %}
+          <delete-button trash href="/caldav/principal/{{ calendar.principal }}/{{ calendar.id }}"></delete-button>
+          {% endif %}
+        </div>
+        <div class="color-chip"></div>
+      </a>
+    </li>
+    {% else %}
+    You do not have any calendars yet
+    {% endfor %}
+  </ul>
+  {%if !deleted_calendars.is_empty() %}
+  <h3>Deleted Calendars</h3>
+  <ul>
+    {% for calendar in deleted_calendars %}
+    {% let color = calendar.color.to_owned().unwrap_or("transparent".to_owned()) %}
+    <li class="collection-list-item" style="--color: {{ color }}">
+      <a href="/frontend/user/{{ calendar.principal }}/calendar/{{ calendar.id}}">
+        <span class="title">
+          {%- if calendar.principal != user.id -%}{{ calendar.principal }}/{%- endif -%}
+          {{ calendar.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }}
+        </span>
+        <div class="comps">
+          {% for comp in calendar.components %}
+          <span>{{ comp }}</span>
+          {% endfor %}
+        </div>
+        <span class="description">
+          {% if let Some(description) = calendar.description %}{{ description }}{% endif %}
+        </span>
+        <div class="actions">
+          <form action="/frontend/user/{{ calendar.principal }}/calendar/{{ calendar.id}}/restore" method="POST"
+            class="restore-form">
+            <button type="submit">Restore</button>
+          </form>
+          <delete-button href="/caldav/principal/{{ calendar.principal }}/{{ calendar.id }}"></delete-button>
+        </div>
+        <div class="color-chip"></div>
+      </a>
+    </li>
+    {% endfor %}
+  </ul>
+  {% endif %}
+  <create-calendar-form user="{{ user.id }}"></create-calendar-form>
+
+</section>
diff --git a/crates/frontend/public/templates/components/profile_section.html b/crates/frontend/public/templates/components/profile_section.html
new file mode 100644
index 0000000..5b94c20
--- /dev/null
+++ b/crates/frontend/public/templates/components/profile_section.html
@@ -0,0 +1,58 @@
+<section>
+  <h2>Profile</h2>
+
+  {% let groups = user.memberships_without_self() %}
+  {% if groups.len() > 0 %}
+  <h3>Groups</h3>
+  <ul>
+    {% for group in groups %}
+    <li>{{ group }}</li>
+    {% endfor %}
+  </ul>
+  {% endif %}
+
+  <h3>App tokens</h3>
+  <table id="app-tokens">
+    <tr>
+      <th>Name</th>
+      <th>Created at</th>
+      <th></th>
+    </tr>
+    {% for app_token in app_tokens %}
+    <tr>
+      <td>{{ app_token.name }}</td>
+      <td>
+        {% if let Some(created_at) = app_token.created_at %}
+        {{ chrono_humanize::HumanTime::from(created_at.to_owned()) }}
+        {% endif %}
+      </td>
+      <td>
+        <form action="/frontend/user/{{ user.id }}/app_token/{{ app_token.id }}/delete" method="POST">
+          <button type="submit" class="delete">Delete</button>
+        </form>
+      </td>
+    </tr>
+    {% endfor %}
+    <tr class="generate">
+      <td>
+        <form action="/frontend/user/{{ user.id }}/app_token" method="POST" id="form_generate_app_token">
+          <label class="font_bold" for="generate_app_token_name">App name</label>
+          <input type="text" name="name" id="generate_app_token_name" />
+        </form>
+      </td>
+      <td></td>
+      <td>
+        <button type="submit" form="form_generate_app_token">Generate</button>
+        {% if is_apple %}
+        <button type="submit" form="form_generate_app_token" name="apple" value="true">Apple Configuration Profile
+          (contains token)</button>
+        {% endif %}
+      </td>
+    </tr>
+  </table>
+  {% if let Some(hostname) = davx5_hostname %}
+  <a
+    href="intent://{{ hostname | urlencode }}#Intent;action=android.intent.action.VIEW;component=at.bitfire.davdroid.ui.setup.LoginActivity;scheme=davx5;package=at.bitfire.davdroid;S.loginFlow=1;end">Configure
+    in DAVx5</a>
+  {% endif %}
+</section>
diff --git a/crates/frontend/public/templates/pages/user.html b/crates/frontend/public/templates/pages/user.html
index 7a45c1b..cb009ef 100644
--- a/crates/frontend/public/templates/pages/user.html
+++ b/crates/frontend/public/templates/pages/user.html
@@ -11,183 +11,9 @@
 
 <h1>Welcome {{ user.id }}!</h1>
 
-<section>
-  <h2>Profile</h2>
+{% include "components/profile_section.html" %}
+{% include "components/calendars_section.html" %}
+{% include "components/addressbooks_section.html" %}
 
-  <h3>Groups</h3>
-  <ul>
-    {% for group in user.memberships() %}
-      <li>{{ group }}</li>
-    {% endfor %}
-  </ul>
-
-  <h3>App tokens</h3>
-  <table id="app-tokens">
-    <tr>
-      <th>Name</th>
-      <th>Created at</th>
-      <th></th>
-    </tr>
-    {% for app_token in app_tokens %}
-    <tr>
-      <td>{{ app_token.name }}</td>
-      <td>
-        {% if let Some(created_at) = app_token.created_at %}
-          {{ chrono_humanize::HumanTime::from(created_at.to_owned()) }}
-        {% endif %}
-      </td>
-      <td>
-        <form action="/frontend/user/{{ user.id }}/app_token/{{ app_token.id }}/delete" method="POST">
-          <button type="submit" class="delete">Delete</button>
-        </form>
-      </td>
-    </tr>
-    {% endfor %}
-    <tr class="generate">
-        <td>
-          <form action="/frontend/user/{{ user.id }}/app_token" method="POST" id="form_generate_app_token">
-            <label class="font_bold" for="generate_app_token_name">App name</label>
-            <input type="text" name="name" id="generate_app_token_name" />
-          </form>
-        </td>
-        <td></td>
-        <td>
-          <button type="submit" form="form_generate_app_token">Generate</button>
-          {% if is_apple %}
-          <button type="submit" form="form_generate_app_token" name="apple" value="true">Apple Configuration Profile (contains token)</button>
-          {% endif %}
-        </td>
-    </tr>
-  </table>
-  {% if let Some(hostname) = davx5_hostname %}
-  <a href="intent://{{ hostname | urlencode }}#Intent;action=android.intent.action.VIEW;component=at.bitfire.davdroid.ui.setup.LoginActivity;scheme=davx5;package=at.bitfire.davdroid;S.loginFlow=1;end">Configure in DAVx5</a>
-  {% endif %}
-</section>
-
-<section>
-<h2>Calendars</h2>
-<ul>
-  {% for calendar in calendars %}
-  {% let color = calendar.color.to_owned().unwrap_or("transparent".to_owned()) %}
-  <li class="collection-list-item" style="--color: {{ color }}">
-    <a href="/frontend/user/{{ calendar.principal }}/calendar/{{ calendar.id }}">
-      <span class="title">
-        {%- if calendar.principal != user.id -%}{{ calendar.principal }}/{%- endif -%}
-        {{ calendar.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }}
-      </span>
-      <div class="comps">
-        {% for comp in calendar.components %}
-        <span>{{ comp }}</span>
-        {% endfor %}
-      </div>
-      <span class="description">
-      {% if let Some(description) = calendar.description %}{{ description }}{% endif %}
-      </span>
-      {% if let Some(subscription_url) = calendar.subscription_url %}
-      <span class="subscription-url">{{ subscription_url }}</span>
-      {% endif %}
-      <div class="actions">
-        <form action="/caldav/principal/{{ calendar.principal }}/{{ calendar.id }}" target="_blank" method="GET">
-          <button type="submit">Download</button>
-        </form>
-        {% if !calendar.id.starts_with("_birthdays_") %}
-        <delete-button trash href="/caldav/principal/{{ calendar.principal }}/{{ calendar.id }}"></delete-button>
-        {% endif %}
-      </div>
-      <div class="color-chip"></div>
-    </a>
-  </li>
-  {% else %}
-  You do not have any calendars yet
-  {% endfor %}
-</ul>
-{%if !deleted_calendars.is_empty() %}
-<h3>Deleted Calendars</h3>
-<ul>
-  {% for calendar in deleted_calendars %}
-  {% let color = calendar.color.to_owned().unwrap_or("transparent".to_owned()) %}
-  <li class="collection-list-item" style="--color: {{ color }}">
-    <a href="/frontend/user/{{ calendar.principal }}/calendar/{{ calendar.id}}">
-      <span class="title">
-        {%- if calendar.principal != user.id -%}{{ calendar.principal }}/{%- endif -%}
-        {{ calendar.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }}
-      </span>
-      <div class="comps">
-        {% for comp in calendar.components %}
-        <span>{{ comp }}</span>
-        {% endfor %}
-      </div>
-      <span class="description">
-      {% if let Some(description) = calendar.description %}{{ description }}{% endif %}
-      </span>
-      <div class="actions">
-        <form action="/frontend/user/{{ calendar.principal }}/calendar/{{ calendar.id}}/restore" method="POST" class="restore-form">
-          <button type="submit">Restore</button>
-        </form>
-        <delete-button href="/caldav/principal/{{ calendar.principal }}/{{ calendar.id }}"></delete-button>
-      </div>
-      <div class="color-chip"></div>
-    </a>
-  </li>
-  {% endfor %}
-</ul>
-{% endif %}
-<create-calendar-form user="{{ user.id }}"></create-calendar-form>
-
-</section>
-
-<section>
-<h2>Addressbooks</h2>
-<ul>
-  {% for addressbook in addressbooks %}
-  <li class="collection-list-item">
-    <a href="/frontend/user/{{ addressbook.principal }}/addressbook/{{ addressbook.id}}">
-      <span class="title">
-        {%- if addressbook.principal != user.id -%}{{ addressbook.principal }}/{%- endif -%}
-        {{ addressbook.displayname.to_owned().unwrap_or(addressbook.id.to_owned()) }}
-      </span>
-      <span class="description">
-      {% if let Some(description) = addressbook.description %}{{ description }}{% endif %}
-      </span>
-      <div class="actions">
-        <form action="/carddav/principal/{{ addressbook.principal }}/{{ addressbook.id }}" target="_blank" method="GET">
-          <button type="submit">Download</button>
-        </form>
-        <delete-button trash href="/carddav/principal/{{ addressbook.principal }}/{{ addressbook.id }}"></delete-button>
-      </div>
-    </a>
-  </li>
-  {% else %}
-  You do not have any addressbooks yet
-  {% endfor %}
-</ul>
-{%if !deleted_addressbooks.is_empty() %}
-<h3>Deleted Addressbooks</h3>
-<ul>
-  {% for addressbook in deleted_addressbooks %}
-  <li class="collection-list-item">
-    <a href="/frontend/user/{{ addressbook.principal }}/addressbook/{{ addressbook.id}}">
-      <span class="title">
-        {%- if addressbook.principal != user.id -%}{{ addressbook.principal }}/{%- endif -%}
-        {{ addressbook.displayname.to_owned().unwrap_or(addressbook.id.to_owned()) }}
-      </span>
-      <span class="description">
-      {% if let Some(description) = addressbook.description %}{{ description }}{% endif %}
-      </span>
-      <div class="actions">
-        <form action="/frontend/user/{{ addressbook.principal }}/addressbook/{{ addressbook.id}}/restore" method="POST" class="restore-form">
-          <button type="submit">Restore</button>
-        </form>
-        <delete-button href="/carddav/principal/{{ addressbook.principal }}/{{ addressbook.id }}"></delete-button>
-      </div>
-    </a>
-  </li>
-  {% endfor %}
-</ul>
-{% endif %}
-
-<create-addressbook-form user="{{ user.id }}"></create-addressbook-form>
-
-</section>
 {% endblock %}