diff --git a/public/font/roboto_mono/RobotoMono-Bold.ttf b/public/font/roboto_mono/RobotoMono-Bold.ttf
new file mode 100644
index 0000000..d884128
Binary files /dev/null and b/public/font/roboto_mono/RobotoMono-Bold.ttf differ
diff --git a/public/font/roboto_mono/RobotoMono-BoldItalic.ttf b/public/font/roboto_mono/RobotoMono-BoldItalic.ttf
new file mode 100644
index 0000000..e9c4802
Binary files /dev/null and b/public/font/roboto_mono/RobotoMono-BoldItalic.ttf differ
diff --git a/public/font/roboto_mono/RobotoMono-ExtraLight.ttf b/public/font/roboto_mono/RobotoMono-ExtraLight.ttf
new file mode 100644
index 0000000..9ff7ac6
Binary files /dev/null and b/public/font/roboto_mono/RobotoMono-ExtraLight.ttf differ
diff --git a/public/font/roboto_mono/RobotoMono-ExtraLightItalic.ttf b/public/font/roboto_mono/RobotoMono-ExtraLightItalic.ttf
new file mode 100644
index 0000000..9e962d4
Binary files /dev/null and b/public/font/roboto_mono/RobotoMono-ExtraLightItalic.ttf differ
diff --git a/public/font/roboto_mono/RobotoMono-Italic.ttf b/public/font/roboto_mono/RobotoMono-Italic.ttf
new file mode 100644
index 0000000..61e5303
Binary files /dev/null and b/public/font/roboto_mono/RobotoMono-Italic.ttf differ
diff --git a/public/font/roboto_mono/RobotoMono-Light.ttf b/public/font/roboto_mono/RobotoMono-Light.ttf
new file mode 100644
index 0000000..4893662
Binary files /dev/null and b/public/font/roboto_mono/RobotoMono-Light.ttf differ
diff --git a/public/font/roboto_mono/RobotoMono-LightItalic.ttf b/public/font/roboto_mono/RobotoMono-LightItalic.ttf
new file mode 100644
index 0000000..39b7250
Binary files /dev/null and b/public/font/roboto_mono/RobotoMono-LightItalic.ttf differ
diff --git a/public/font/roboto_mono/RobotoMono-Medium.ttf b/public/font/roboto_mono/RobotoMono-Medium.ttf
new file mode 100644
index 0000000..f6c149a
Binary files /dev/null and b/public/font/roboto_mono/RobotoMono-Medium.ttf differ
diff --git a/public/font/roboto_mono/RobotoMono-MediumItalic.ttf b/public/font/roboto_mono/RobotoMono-MediumItalic.ttf
new file mode 100644
index 0000000..70a1a75
Binary files /dev/null and b/public/font/roboto_mono/RobotoMono-MediumItalic.ttf differ
diff --git a/public/font/roboto_mono/RobotoMono-Regular.ttf b/public/font/roboto_mono/RobotoMono-Regular.ttf
new file mode 100644
index 0000000..6df2b25
Binary files /dev/null and b/public/font/roboto_mono/RobotoMono-Regular.ttf differ
diff --git a/public/font/roboto_mono/RobotoMono-SemiBold.ttf b/public/font/roboto_mono/RobotoMono-SemiBold.ttf
new file mode 100644
index 0000000..82ddc82
Binary files /dev/null and b/public/font/roboto_mono/RobotoMono-SemiBold.ttf differ
diff --git a/public/font/roboto_mono/RobotoMono-SemiBoldItalic.ttf b/public/font/roboto_mono/RobotoMono-SemiBoldItalic.ttf
new file mode 100644
index 0000000..15b0846
Binary files /dev/null and b/public/font/roboto_mono/RobotoMono-SemiBoldItalic.ttf differ
diff --git a/public/font/roboto_mono/RobotoMono-Thin.ttf b/public/font/roboto_mono/RobotoMono-Thin.ttf
new file mode 100644
index 0000000..aeb997b
Binary files /dev/null and b/public/font/roboto_mono/RobotoMono-Thin.ttf differ
diff --git a/public/font/roboto_mono/RobotoMono-ThinItalic.ttf b/public/font/roboto_mono/RobotoMono-ThinItalic.ttf
new file mode 100644
index 0000000..ab99e08
Binary files /dev/null and b/public/font/roboto_mono/RobotoMono-ThinItalic.ttf differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 6f50335..e7695fe 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -22,7 +22,7 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: "Panton", sans-serif;
+  font-family: "Roboto Mono", sans-serif;
 }
 
 @font-face {
@@ -48,3 +48,39 @@ body {
   font-style: normal;
   font-display: swap;
 }
+
+@font-face {
+  font-family: "Roboto Mono";
+  src: url("/font/roboto_mono/RobotoMono-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto Mono";
+  src: url("/font/roboto_mono/RobotoMono-Italic.ttf") format("truetype");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto Mono";
+  src: url("/font/roboto_mono/RobotoMono-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto Mono";
+  src: url("/font/roboto_mono/RobotoMono-BoldItalic.ttf") format("truetype");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+::selection {
+  background: #e2bf7d;
+}
diff --git a/src/app/news/page.tsx b/src/app/news/page.tsx
index 416cc55..190a157 100644
--- a/src/app/news/page.tsx
+++ b/src/app/news/page.tsx
@@ -1,5 +1,27 @@
 import Footer from "@/components/Footer";
 import Header from "@/components/Header";
+import Image from "next/image";
+import Link from "next/link";
+
+// const newsList = [
+//   {
+//     authors: [],
+//     title: "Hello World",
+//     description: "lorem ipsum ipsum lorem",
+//     image: "/background.png",
+//     date: "2025-04-16",
+//     id: "",
+//   },
+// ];
+
+const newsList = Array(3 * 6).fill({
+  authors: [],
+  title: "Hello World",
+  description: "lorem ipsum ipsum lorem",
+  image: "/background.png",
+  date: "2025-04-16",
+  id: "",
+});
 
 export default function News() {
   return (
@@ -7,14 +29,37 @@ export default function News() {
       <div className="flex flex-col bg-[url('/background.png')] bg-center bg-no-repeat h-52">
         <Header />
 
-        <h1 className="text-5xl font-black m-auto w-max">CLIENT NEWS</h1>
+        <h1 className="text-5xl font-black m-auto w-max font-['Panton']">
+          CLIENT NEWS
+        </h1>
       </div>
 
       <div className="py-8 px-5 w-full">
         TODO: implement search and filtering
       </div>
 
-      <div className="py-8 px-5 w-full">TODO: implement thumbnail</div>
+      <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">
+        {newsList.map((news, i) => (
+          <Link
+            href={`/news/${news.id}`}
+            className="hover:scale-[1.02] transform transition duration-300"
+            key={i}
+          >
+            <div
+              style={{
+                background: `url('${news.image}')`,
+                backgroundSize: "cover",
+                backgroundRepeat: "no-repeat",
+              }}
+              className="object-cover h-48 rounded-2xl p-4"
+            >
+              <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>
 
       <Footer />
     </div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4cef5d7..6f94ef1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -23,8 +23,8 @@ export default function Home() {
 
       <div className="flex-1 flex flex-col text-2xl mt-40 items-center">
         <Image src="/logo.png" alt="Logo" width={240} height={240} />
-        <h1 className="text-5xl font-black">Saturn Client</h1>
-        <p className="text-xl text-white mix-blend-difference">
+        <h1 className="text-5xl font-black font-['Panton']">Saturn Client</h1>
+        <p className="text-xl text-white mix-blend-difference font-['Panton']">
           The best open source Minecraft client
         </p>
 
diff --git a/src/components/news/Blog.tsx b/src/components/news/Blog.tsx
new file mode 100644
index 0000000..c873761
--- /dev/null
+++ b/src/components/news/Blog.tsx
@@ -0,0 +1,3 @@
+export default function Blog() {
+  return <div>Blog</div>;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..ec4bc3e
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,7 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: [],
+  theme: {},
+  plugins: [],
+} satisfies Config;