diff --git a/src/app.html b/src/app.html
index 117bd02..8109779 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-    <meta name="viewport" content="width=device-width" />
-    %sveltekit.head%
-  </head>
-  <body data-sveltekit-preload-data="hover">
-    <div style="display: contents">%sveltekit.body%</div>
-  </body>
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="stylesheet" href="%sveltekit.assets%/style.css" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
 </html>
diff --git a/src/lib/components/PostComponent.svelte b/src/lib/components/PostComponent.svelte
index a0c3967..5bc09d2 100644
--- a/src/lib/components/PostComponent.svelte
+++ b/src/lib/components/PostComponent.svelte
@@ -8,12 +8,15 @@
   $: dateCreated = new Date(post.created_at).toLocaleString();
 </script>
 
+
 <div class="wrapper">
   <div class="avatar"><AvatarComponent account={post.account} /></div>
   <div class="post">
-    <AccountComponent account={post.account} />
-    <small><a href={post.url} target="_blank">{dateCreated}</a></small>
-    {@html post.content}
+    <div class="meta">
+      <AccountComponent account={post.account} />
+      <small><a href={post.url} target="_blank">{dateCreated}</a></small>
+    </div>
+    <div class="content">{@html post.content}</div>
   </div>
 </div>
 
@@ -24,8 +27,17 @@
   .post {
     display: flex;
     flex-direction: column;
+    flex-grow: 2;
+  }
+  .meta {
+    display: flex;
+    justify-content: space-between;
   }
   .avatar {
     margin-right: 1em;
   }
+  .content {
+    max-width: calc(600px - 1em - 50px);
+    overflow-x: auto;
+  }
 </style>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0e3fa4a..3e9cb74 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -35,7 +35,37 @@ onMount(async () => {
   }
 })
 </script>
+<h2>Metalhead.club music list</h2>
+<div class="wrapper">
+  <div></div>
+  <div class="posts">
+  {#if data.posts.length === 0}
+    Sorry, no posts recommending music aave been found yet
+  {/if}
+  {#each data.posts as post (post.id)}
+      <div class="post"><PostComponent {post} /></div>
+  {/each}
+  </div>
+  <div></div>
+  </div>
+<style>
+  .posts {
+    display: flex;
+    flex-direction: column;
+  }
+  .post {
+    width: 100%;
+    max-width: 600px;
+    margin-bottom: 1em;
+    border-bottom: 1px solid var(--color-border);
+    padding: 1em;
+  }
+  .wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
 
-{#each data.posts as post (post.id)}
-  <PostComponent {post}></PostComponent>
-{/each}
\ No newline at end of file
+  h2 {
+    text-align: center;
+  }
+</style>
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..c4789c0
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,25 @@
+body {
+    --color-text: #2F0C7A;
+    --color-bg: white;
+    --color-border: #17063B;
+    --color-link: #563ACC;
+    --color-link-visited: #858AFA;
+
+    color: var(--color-text);
+    background-color: var(--color-bg);
+}
+
+a {
+    color: var(--color-link);
+}
+a:visited {
+    color: var(--color-link-visited);
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        --color-text: white;
+        --color-bg: #17063B;
+        --color-border: white;
+    }
+}
\ No newline at end of file
