diff --git a/content/stylesheets/main.css b/content/stylesheets/main.css
index cd15237..4fe4c64 100644
--- a/content/stylesheets/main.css
+++ b/content/stylesheets/main.css
@@ -238,6 +238,10 @@ details[open] {
     margin: 0;
     width: 100%;
   }
+
+  .detail_title > h2 {
+    width: 100%;
+  }
 }
 
 /* Large screens */
@@ -657,6 +661,7 @@ h2 {
   display: flex;
   flex-direction: row;
   align-items: baseline;
+  justify-content: space-around;
   flex-wrap: wrap;
   gap: 12px;
 }
@@ -687,11 +692,13 @@ h2 {
   text-align: center;
 }
 
+.social-container {
+  margin: auto;
+}
+
 .social-container > ul {
   list-style: none;
   padding: 0;
-  /* gap: 0.5rem; */
-  margin: auto;
   justify-content: space-around;
 }
 
@@ -700,7 +707,8 @@ h2 {
   max-width: 1200px;
   padding: 2rem 10%;
 
-  position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 .social {
@@ -741,6 +749,12 @@ h2 {
   height: 3rem;
 }
 
+.detail_title_themas {
+  display: flex;
+  gap: inherit;
+
+}
+
 .footer {
   max-width: 100%;
   width: 100%;
@@ -807,14 +821,26 @@ h2 {
 
 .details-contact {
   padding: 1rem;
-  padding-left: 100px;
   margin: auto;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.contact-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  gap: 1em;
+}
+
+.contact-container > a {
+  text-align: center;
 }
 
 @media only screen and (max-width: 700px) {
   .details-contact {
     padding-bottom: 2rem;
-    padding-left: 1rem;
   }
 }
 
diff --git a/layouts/detail.erb b/layouts/detail.erb
index 96bc9dc..f39f3f4 100644
--- a/layouts/detail.erb
+++ b/layouts/detail.erb
@@ -3,29 +3,29 @@
         <a target="_blank" href="<%= item[:website] %>"><img src="<%= small_image_url(item) %>" alt="<%= item[:naam] %>" height=100></a>
         <h2><%= item[:naam] %></h2>
         <% if item[:themas] %>
-            <% for thema in item[:themas] %>
-                <div class="vereniging_thema">
-                    <a href="/themas/<%= thema %>.html">
-                        <%= @items["/assets/themas_icon/"+thema+".svg"].compiled_content %>
-                    </a>
-                </div>
-            <% end %>
+            <div class="detail_title_themas">
+                <% for thema in item[:themas] %>
+                    <div class="vereniging_thema">
+                        <a href="/themas/<%= thema %>.html">
+                            <%= @items["/assets/themas_icon/"+thema+".svg"].compiled_content %>
+                        </a>
+                    </div>
+                <% end %>
+            </div>
         <% end %>
     </div>
     <div class="details-contact">
     <%if item[:deelname_link] || item[:contact] || item[:website]%>
     <% if item[:deelname_link] %><a href="<%= item[:deelname_link] %>"><%= item[:deelname_link] %></a><% end %>
     <div class="contact-container">
-        <% if item[:contact] %><p>Email: <a href="<%= item[:contact] %>"><%= item[:contact] %></a></p><%end%>
-        <% if item[:website] %><p>Website: <a href="<%= item[:website] %>"><%= item[:website] %></a></p><%end%>
+        <% if item[:contact] %><a href="<%= item[:contact] %>"><%= item[:contact] %></a><%end%>
+        <% if item[:website] %><a href="<%= item[:website] %>"><%= item[:website] %></a><%end%>
     </div><%end%>
     <% if item[:social] %>
     <div class="social-container">
         <ul>
             <% for social in item[:social] %>
-                <a class="social" href="<%= social[:link] %>">
-                    <img src="/assets/social/<%= social[:platform].downcase %>_small.png">
-                </a>
+                <a class="social" href="<%= social[:link] %>"><img src="/assets/social/<%= social[:platform].downcase %>_small.png"></a>
             <% end %>
         </ul>
     </div>