diff --git a/README.md b/README.md
index e215bc4..ee36585 100644
--- a/README.md
+++ b/README.md
@@ -1,36 +1,20 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# How to post news
 
-## Getting Started
+1. Create a new markdown file in the `news` directory, name it chronologically like `2025-04-16-<title>.md`
+2. Add the following frontmatter:
 
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+```markdown
+---
+authors: Kleo dev, John Doe
+title: Hello World
+description: The brown fox jumps over the lazy dog
+image: <your thumbnail url>
+date: <year>-<month>-<day>
+tags: <tag1, tag2>
+---
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+3. Add the content of the news after the frontmatter
+   Learn markdown here: https://www.markdownguide.org/getting-started/
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+4. Add the image to the `public` directory (if you're using a local image), the image will be referenced in the frontmatter like this: `image: /<image.png>`
diff --git a/news/0.md b/news/0.md
new file mode 100644
index 0000000..3b683ca
--- /dev/null
+++ b/news/0.md
@@ -0,0 +1,22 @@
+---
+authors: Kleo
+title: Refactoring
+description: The current codebase isn't practical, so we are refractoring it
+image: https://preview.redd.it/axscigvvfik71.png?auto=webp&s=ddd458f865c6f50d21a66fe76dc12a07c8b1e198
+date: 2025-04-18
+tags: development, news
+---
+Due to Minecraft's nature of refactors for the past decade (which is normal for all apps), we have decided to refactor the codebase to make it more maintainable and practical. This will also take us in other versions of Minecraft.
+
+We will be working on this in the next few weeks trying to improve both the codebase and the user experience.
+
+## Goals
+- 📖 Document every change done to the code, both in discord and in the github wiki, this is mandatory.
+- 🧩 Separate as much code from Minecraft as possible (abstractions), important for adding other versions.
+- 🎨 Make the UI as customizable as possible, good for user experience, we should keep this in mind.
+
+For updates, check out our [Discord](https://discord.gg/HFRsNxfCqT) or [GitHub issue](https://github.com/saturnclientmc/saturnclient/issues/1)
+
+---
+
+Credits to [Electronic_Sample_96](https://www.reddit.com/r/Minecraft/comments/pejvos/an_ultrawide_wallpaper_on_minecraft_2560_x_1080/) for the image
diff --git a/news/test.md b/news/test.md
deleted file mode 100644
index 46653f5..0000000
--- a/news/test.md
+++ /dev/null
@@ -1,243 +0,0 @@
----
-authors: Kleo dev, John Doe
-title: Testing
-description: Test
-image: /background.png
-date: 2025-04-16
-tags: test, testing
----
-
----
-
-**Advertisement :)**
-
-- **[pica](https://nodeca.github.io/pica/demo/)** - high quality and fast image
-  resize in browser.
-- **[babelfish](https://github.com/nodeca/babelfish/)** - developer friendly
-  i18n with plurals support and easy syntax.
-
-You will like those projects!
-
----
-
-# h1 Heading 8-)
-
-## h2 Heading
-
-### h3 Heading
-
-#### h4 Heading
-
-##### h5 Heading
-
-###### h6 Heading
-
-## Horizontal Rules
-
----
-
----
-
----
-
-## Typographic replacements
-
-Enable typographer option to see result.
-
-(c) (C) (r) (R) (tm) (TM) (p) (P) +-
-
-test.. test... test..... test?..... test!....
-
-!!!!!! ???? ,, -- ---
-
-"Smartypants, double quotes" and 'single quotes'
-
-## Emphasis
-
-**This is bold text**
-
-**This is bold text**
-
-_This is italic text_
-
-_This is italic text_
-
-~~Strikethrough~~
-
-## Blockquotes
-
-> Blockquotes can also be nested...
->
-> > ...by using additional greater-than signs right next to each other...
-> >
-> > > ...or with spaces between arrows.
-
-## Lists
-
-Unordered
-
-- Create a list by starting a line with `+`, `-`, or `*`
-- Sub-lists are made by indenting 2 spaces:
-  - Marker character change forces new list start:
-    - Ac tristique libero volutpat at
-    * Facilisis in pretium nisl aliquet
-    - Nulla volutpat aliquam velit
-- Very easy!
-
-Ordered
-
-1. Lorem ipsum dolor sit amet
-2. Consectetur adipiscing elit
-3. Integer molestie lorem at massa
-
-4. You can use sequential numbers...
-5. ...or keep all the numbers as `1.`
-
-Start numbering with offset:
-
-57. foo
-1. bar
-
-## Code
-
-Inline `code`
-
-Indented code
-
-    // Some comments
-    line 1 of code
-    line 2 of code
-    line 3 of code
-
-Block code "fences"
-
-```
-Sample text here...
-```
-
-Syntax highlighting
-
-```js
-var foo = function (bar) {
-  return bar++;
-};
-
-console.log(foo(5));
-```
-
-## Tables
-
-| Option | Description                                                               |
-| ------ | ------------------------------------------------------------------------- |
-| data   | path to data files to supply the data that will be passed into templates. |
-| engine | engine to be used for processing templates. Handlebars is the default.    |
-| ext    | extension to be used for dest files.                                      |
-
-Right aligned columns
-
-| Option |                                                               Description |
-| -----: | ------------------------------------------------------------------------: |
-|   data | path to data files to supply the data that will be passed into templates. |
-| engine |    engine to be used for processing templates. Handlebars is the default. |
-|    ext |                                      extension to be used for dest files. |
-
-## Links
-
-[link text](http://dev.nodeca.com)
-
-[link with title](http://nodeca.github.io/pica/demo/ "title text!")
-
-Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
-
-## Images
-
-![Minion](https://octodex.github.com/images/minion.png)
-![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
-
-Like links, Images also have a footnote style syntax
-
-![Alt text][id]
-
-With a reference later in the document defining the URL location:
-
-[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
-
-## Plugins
-
-The killer feature of `markdown-it` is very effective support of
-[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).
-
-### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
-
-> Classic markup: :wink: :cry: :laughing: :yum:
->
-> Shortcuts (emoticons): :-) :-( 8-) ;)
-
-see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.
-
-### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)
-
-- 19^th^
-- H~2~O
-
-### [\<ins>](https://github.com/markdown-it/markdown-it-ins)
-
-++Inserted text++
-
-### [\<mark>](https://github.com/markdown-it/markdown-it-mark)
-
-==Marked text==
-
-### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)
-
-Footnote 1 link[^first].
-
-Footnote 2 link[^second].
-
-Inline footnote^[Text of inline footnote] definition.
-
-Duplicated footnote reference[^second].
-
-[^first]: Footnote **can have markup**
-
-    and multiple paragraphs.
-
-[^second]: Footnote text.
-
-### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)
-
-Term 1
-
-: Definition 1
-with lazy continuation.
-
-Term 2 with _inline markup_
-
-: Definition 2
-
-        { some code, part of Definition 2 }
-
-    Third paragraph of definition 2.
-
-_Compact style:_
-
-Term 1
-~ Definition 1
-
-Term 2
-~ Definition 2a
-~ Definition 2b
-
-### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
-
-This is HTML abbreviation example.
-
-It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
-
-\*[HTML]: Hyper Text Markup Language
-
-### [Custom containers](https://github.com/markdown-it/markdown-it-container)
-
-::: warning
-_here be dragons_
-:::
diff --git a/public/background.png b/public/background.png
index 030d22d..6899e39 100644
Binary files a/public/background.png and b/public/background.png differ
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
index 718d6fe..dd36144 100644
Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b570ae5..f657a51 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,8 +2,8 @@ import type { Metadata } from "next";
 import "./globals.css";
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Saturn Client",
+  description: "The best open source Minecraft client",
 };
 
 export default function RootLayout({
diff --git a/src/app/news/[id]/Markdown.css b/src/app/news/[id]/Markdown.css
index 494705e..90e2d17 100644
--- a/src/app/news/[id]/Markdown.css
+++ b/src/app/news/[id]/Markdown.css
@@ -26,4 +26,9 @@ ol {
 
 img {
   border-radius: 10px;
-}
\ No newline at end of file
+}
+
+p a {
+  text-decoration: underline;
+  color: #e2bf7d;
+}
diff --git a/src/app/news/[id]/Markdown.tsx b/src/app/news/[id]/Markdown.tsx
index 081985b..7b3d4d3 100644
--- a/src/app/news/[id]/Markdown.tsx
+++ b/src/app/news/[id]/Markdown.tsx
@@ -2,5 +2,34 @@ import Markdown from "react-markdown";
 import "./Markdown.css";
 
 export default function Md({ children }: { children: string }) {
-  return <Markdown>{children}</Markdown>;
+  return (
+    <Markdown
+      components={{
+        a: ({ node, ...props }) => (
+          <a {...props} target="_blank" rel="noopener noreferrer" />
+        ),
+        h1: ({ node, ...props }) => (
+          <h1
+            {...props}
+            className="font-bold pb-3"
+          />
+        ),
+        h2: ({ node, ...props }) => (
+          <h2
+            {...props}
+            className="font-bold pb-3"
+          />
+        ),
+
+        h3: ({ node, ...props }) => (
+          <h3
+            {...props}
+            className="font-bold pb-1"
+          />
+        ),
+      }}
+    >
+      {children.replaceAll("\n\n", "\n\n &nbsp;\n\n")}
+    </Markdown>
+  );
 }
diff --git a/src/app/news/[id]/page.tsx b/src/app/news/[id]/page.tsx
index d33af57..0f28c13 100644
--- a/src/app/news/[id]/page.tsx
+++ b/src/app/news/[id]/page.tsx
@@ -18,9 +18,9 @@ export default async function News({
   );
 
   return (
-    <div className="flex-1 flex flex-col h-screen">
+    <div className="flex flex-col min-h-screen">
       <div
-        className="bg-[url('/background.png')] bg-center bg-no-repeat h-96"
+        className="bg-center bg-no-repeat h-96 flex-shrink-0"
         style={{ backgroundImage: `url(${image})` }}
       >
         <Header />
@@ -29,12 +29,8 @@ export default async function News({
           {title}
         </h1>
 
-        <p className="m-auto w-max font-['Panton'] !text-2xl mt-5">
-          {description}
-        </p>
-        <p className="m-auto w-max font-['Panton'] !text-xl">
-          written by {authors.join(", ")}
-        </p>
+        <p className="m-auto w-max !text-xl mt-5">{description}</p>
+        <p className="m-auto w-max !text-lg">written by {authors.join(", ")}</p>
       </div>
 
       <div className="w-[54rem] mx-auto mt-5">
diff --git a/src/app/news/page.tsx b/src/app/news/page.tsx
index 748bc46..f1aaa31 100644
--- a/src/app/news/page.tsx
+++ b/src/app/news/page.tsx
@@ -23,23 +23,27 @@ export default function News() {
       <div className="py-8 px-5 w-full grid grid-rows-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 fade-in-up">
         {newsList.map((news, i) => (
           <Link
-            href={`/news/${news.id}`}
-            className="hover:scale-[1.02] transform transition duration-300"
-            key={i}
-          >
+          href={`/news/${news.id}`}
+          className="block"
+          key={i}
+        >
+          <div className="h-48 rounded-2xl overflow-hidden relative group p-4">
+            {/* Zoomable background image layer */}
             <div
+              className="absolute inset-0 bg-cover bg-center transition-transform duration-300 group-hover:scale-105"
               style={{
-                background: `url('${news.image}')`,
-                backgroundSize: "cover",
-                backgroundRepeat: "no-repeat",
+                backgroundImage: `url('${news.image}')`,
               }}
-              className="object-cover h-48 rounded-2xl p-4"
-            >
+            />
+            
+            {/* Content layer, above the image */}
+            <div className="relative z-10 text-white">
               <h2 className="text-3xl font-black">{news.title}</h2>
               <p className="text-xl">{news.description}</p>
               <p className="text-md">{news.date}</p>
             </div>
-          </Link>
+          </div>
+        </Link>
         ))}
       </div>
 
diff --git a/src/app/page.tsx b/src/app/page.tsx
index b99fdf9..603e38c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,18 +1,5 @@
 import Image from "next/image";
 import Link from "next/link";
-import {
-  Book,
-  BookOpen,
-  BookOpenText,
-  Download,
-  Github,
-  House,
-  Instagram,
-  List,
-  Newspaper,
-  Text,
-  Users,
-} from "lucide-react";
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 
@@ -32,7 +19,7 @@ export default function Home() {
         <h1 className="text-5xl font-black font-['Panton'] fade-in-up">
           Saturn Client
         </h1>
-        <p className="text-xl text-white mix-blend-difference font-['Panton'] fade-in-up">
+        <p className="text-xl text-white font-['Panton'] font-bold mix-blend-difference fade-in-up">
           The best open source Minecraft client
         </p>
 
diff --git a/src/lib/news.ts b/src/lib/news.ts
index ece6a12..3121270 100644
--- a/src/lib/news.ts
+++ b/src/lib/news.ts
@@ -1,4 +1,5 @@
 import { readdirSync, readFileSync } from "fs";
+import smartSplit from "./smartSplit";
 
 export interface News {
   authors: string[];
@@ -22,7 +23,7 @@ export function parseNews(news: string, id: string): News {
   };
 
   content.split("\n").forEach((v) => {
-    const [key, value] = v.split(":").map((v) => v.trim());
+    const [key, value] = smartSplit(v, ":", 2).map((v) => v.trim());
     if (key === "authors") {
       params.authors = value.split(",").map((v) => v.trim());
     } else if (