diff --git a/assets/_fonts.scss b/assets/_fonts.scss
new file mode 100644
index 0000000..8f01a8f
--- /dev/null
+++ b/assets/_fonts.scss
@@ -0,0 +1,4 @@
+// @font-face{
+//     font-family: FiraCode;
+//     src: url(static/fonts/FiraCode-Regular.ttf);
+// }
diff --git a/assets/_me.scss b/assets/_me.scss
index 5441875..958415f 100644
--- a/assets/_me.scss
+++ b/assets/_me.scss
@@ -3,9 +3,10 @@
 .home {
     &__content {
         text-align: justify;
+        max-width: 850px;
 
         img {
-            border-radius: 200px;
+            border-radius: 50px;
             float: left;
             margin: 0 24px 16px 0;
         }
diff --git a/assets/_services.scss b/assets/_services.scss
index a5afed7..c55fcf3 100644
--- a/assets/_services.scss
+++ b/assets/_services.scss
@@ -1,12 +1,28 @@
-@use 'variables' as vars;
+@use "variables" as vars;
 
 .services {
+    display: flex;
+    flex-direction: column;
 
-    &__list{
+    // &__title {
+    // }
+
+    &__list {
+        width: 100%;
         display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
 
         .service {
-            padding: 8px;
+            width: 45%;
+            // text-align: justify;
+
+            &__text {
+                padding: 4px 4px 4px 0;
+                line-height: 12px;
+                // background: vars.$color-bg0_h;
+                background: green ;
+            }
         }
     }
 }
diff --git a/assets/_variables.scss b/assets/_variables.scss
index 2fc8ac0..56f9b62 100644
--- a/assets/_variables.scss
+++ b/assets/_variables.scss
@@ -31,6 +31,6 @@ $color-fg3: #bdae93;
 $color-fg4: #a89984;
 
 // Layout
-$content-width-norm: 60%;
-$content-width-mid: 70%;
+$content-width-norm: 50%;
+$content-width-mid: 60%;
 $content-width-narrow: 80%;
diff --git a/assets/style.scss b/assets/style.scss
index 4daa83d..955cce3 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -4,10 +4,12 @@
 @import "me";
 @import "posts";
 @import "sidebar";
+@import "fonts";
 
 body {
     color: vars.$color-fg;
     background: vars.$color-bg;
+    // font-family: FiraCode, monospace;
 }
 
 .content-wrapper {
diff --git a/content/services/cloud.md b/content/services/cloud.md
index a8720c3..228c534 100644
--- a/content/services/cloud.md
+++ b/content/services/cloud.md
@@ -3,8 +3,7 @@ title: "cloud"
 link: "https://cloud.inkletblot.com"
 ---
 
-I host a nextcloud instance, for those curious
-[here](https://en.reddit.com/r/degoogle) is some information on why. I'm the
+I host a nextcloud instance, for those curious [here](https://en.reddit.com/r/degoogle) is some information on why. I'm the
 only one that uses and it works like a charm. Mostly I use it for file and
 contact synchronisation, and instant upload/backup of the photos I take on my
 phone.
diff --git a/layouts/services/list.html b/layouts/services/list.html
index 3926187..6440b5b 100644
--- a/layouts/services/list.html
+++ b/layouts/services/list.html
@@ -1,16 +1,16 @@
 {{ define "main" }}
-<main class="links">
+<main class="services">
     {{ if or .Title .Content }}
     <div>
         {{ with .Title }}
-        <h1>{{ . }}</h1>
+        <h1 class="services__title">{{ . }}</h1>
         {{ end }} {{ with .Content }}
-        <div>{{ . }}</div>
+        <div class="services__content">{{ . }}</div>
         {{ end }}
     </div>
     {{ end }}
 
-    <div class="links__list">
+    <div class="services__list">
         {{ range .Paginator.Pages }} {{ .Render "summary" }} {{ end }}
     </div>
 </main>
diff --git a/layouts/services/summary.html b/layouts/services/summary.html
index 9b980fd..34f8ff4 100644
--- a/layouts/services/summary.html
+++ b/layouts/services/summary.html
@@ -1,4 +1,8 @@
-<div class="link">
-    <h2><a target="_blank" href="{{ printf "%s" $.Params.link }}"> {{ .Title }}</a></h2>
-    {{ .Content }}
+<div class="service">
+    <h2><a target="_blank" href="{{ printf " %s" $.Params.link }}"> {{ .Title }}</a></h2>
+    <span class="service__text">
+        {{ $partial :=  replace .Content "<p>" "" }}
+        {{ $finalContent := replace $partial "</p>" "" | safeHTML }}
+        {{ $finalContent }}
+    </span>
 </div>
diff --git a/static/fonts/FiraCode-Bold.ttf b/static/fonts/FiraCode-Bold.ttf
new file mode 100644
index 0000000..c0aa0f5
Binary files /dev/null and b/static/fonts/FiraCode-Bold.ttf differ
diff --git a/static/fonts/FiraCode-Light.ttf b/static/fonts/FiraCode-Light.ttf
new file mode 100644
index 0000000..84801e1
Binary files /dev/null and b/static/fonts/FiraCode-Light.ttf differ
diff --git a/static/fonts/FiraCode-Medium.ttf b/static/fonts/FiraCode-Medium.ttf
new file mode 100644
index 0000000..570b4d1
Binary files /dev/null and b/static/fonts/FiraCode-Medium.ttf differ
diff --git a/static/fonts/FiraCode-Regular.ttf b/static/fonts/FiraCode-Regular.ttf
new file mode 100644
index 0000000..82baafc
Binary files /dev/null and b/static/fonts/FiraCode-Regular.ttf differ
diff --git a/static/fonts/FiraCode-SemiBold.ttf b/static/fonts/FiraCode-SemiBold.ttf
new file mode 100644
index 0000000..f3a34fa
Binary files /dev/null and b/static/fonts/FiraCode-SemiBold.ttf differ