diff --git a/src/App.tsx b/src/App.tsx
index 77147bf..a2cbda8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import Layout from "./Layout";
 import ServiceGrid from "./components/ServiceGrid";
+import { HackerNews } from "./components/HackerNews";
 import { Weather } from "./components/Weather";
 import { apps } from "./data/apps";
 import { privateApps } from "./data/privateApps";
@@ -14,6 +15,13 @@ export function App() {
           <h2 className="text-2xl font-semibold text-zinc-400 mb-4">Weather</h2>
           <Weather />
         </div>
+
+        <div>
+          <h2 className="text-2xl font-semibold text-zinc-400 mb-4">
+            Hacker News
+          </h2>
+          <HackerNews />
+        </div>
       </div>
       <h2 className="text-2xl font-semibold text-zinc-400 mt-8 mb-4">
         Websites
diff --git a/src/components/HackerNews.tsx b/src/components/HackerNews.tsx
new file mode 100644
index 0000000..5eaf7b6
--- /dev/null
+++ b/src/components/HackerNews.tsx
@@ -0,0 +1,51 @@
+import { useState, useEffect } from "react";
+
+function timeAgo(timestamp: number): string {
+  const seconds = Math.floor(Date.now() / 1000 - timestamp);
+
+  if (seconds < 60) return "1m";
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h`;
+  return `${Math.floor(seconds / 86400)}d`;
+}
+
+export function HackerNews() {
+  const [stories, setStories] = useState<any[]>([]);
+
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchHackerNews = () => {
+      fetch(`/api/hackernews`)
+        .then((response) => response.json())
+        .then((data) => setStories(data));
+    };
+
+    fetchHackerNews();
+  }, []);
+
+  if (stories.length == 0) {
+    return <div>Loading stories...</div>;
+  }
+
+  return (
+    <div className="p-4 bg-zinc-800 border border-zinc-700 rounded-lg">
+      <ul className="space-y-2">
+        {stories.map((story) => (
+          <li key={story.id} className="flex gap-3 text-sm">
+            <span className="text-zinc-500 w-8 shrink-0">{story.score}↑</span>
+
+            <a
+              href={story.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-zinc-200 hover:text-white hover:underline truncate"
+            >
+              {story.title}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/src/components/ServiceGrid.tsx b/src/components/ServiceGrid.tsx
index 02486f7..f650535 100644
--- a/src/components/ServiceGrid.tsx
+++ b/src/components/ServiceGrid.tsx
@@ -55,7 +55,7 @@ export default function ServiceGrid({
             {service.icon && (
               <img src={service.icon} alt="" className="w-6 h-6 shrink-0" />
             )}
-            <h3 className="text-lg font-semibold flex-1 truncate">
+            <h3 className="text-md font-semibold flex-1 truncate">
               {service.name}
             </h3>
             <span className="shrink-0">
diff --git a/src/components/Weather.tsx b/src/components/Weather.tsx
index 0d5f156..b526eb6 100644
--- a/src/components/Weather.tsx
+++ b/src/components/Weather.tsx
@@ -1,4 +1,37 @@
 import { useState, useEffect } from "react";
+import {
+  Sun,
+  Moon,
+  Cloud,
+  CloudRain,
+  CloudSnow,
+  CloudLightning,
+  CloudFog,
+  CloudSun,
+  CloudMoon,
+} from "lucide-react";
+
+function getWeatherIcon(forecast: string, className?: string) {
+  const f = forecast.toLowerCase();
+  if (f.includes("thunder") || f.includes("lightning"))
+    return <CloudLightning className={className} />;
+  if (f.includes("snow") || f.includes("flurr"))
+    return <CloudSnow className={className} />;
+  if (f.includes("rain") || f.includes("shower") || f.includes("drizzle"))
+    return <CloudRain className={className} />;
+  if (f.includes("fog") || f.includes("mist") || f.includes("haze"))
+    return <CloudFog className={className} />;
+  if (f.includes("partly cloudy")) return <CloudSun className={className} />;
+  if (
+    f.includes("mostly cloudy") ||
+    f.includes("cloud") ||
+    f.includes("overcast")
+  )
+    return <Cloud className={className} />;
+  if (f.includes("sunny") || f.includes("clear"))
+    return <Sun className={className} />;
+  return <Sun className={className} />;
+}
 
 export function Weather() {
   const [weather, setWeather] = useState<{
@@ -32,11 +65,17 @@ export function Weather() {
   }
 
   return (
-    <div className="block p-4 bg-zinc-800 border border-zinc-700 rounded-lg">
-      <div>
-        {weather.temperature}°{weather.temperatureUnit}
+    <div className="p-4 bg-zinc-800 border border-zinc-700 rounded-lg">
+      <div className="flex items-center gap-4">
+        {getWeatherIcon(weather.shortForecast, "w-12 h-12 text-zinc-300")}
+        <div>
+          <div className="flex items-baseline gap-2">
+            <span className="text-4xl font-light">{weather.temperature}°</span>
+            <span className="text-zinc-500">{weather.temperatureUnit}</span>
+          </div>
+          <div className="text-zinc-400">{weather.shortForecast}</div>
+        </div>
       </div>
-      <div>{weather.shortForecast}</div>
     </div>
   );
 }
diff --git a/src/index.ts b/src/index.ts
index d2a0d29..2d09aea 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,6 +3,8 @@ import index from "./index.html";
 import { privateApps } from "./data/privateApps";
 import { websites } from "./data/websites";
 
+let hnCache: { stories: any[]; fetchedAt: number } | null = null;
+
 async function checkStatuses(items: { name: string; url: string }[]) {
   const results = await Promise.all(
     items.map(async (item) => {
@@ -39,6 +41,32 @@ const server = serve({
       },
     },
 
+    "/api/hackernews": {
+      async GET(req) {
+        if (hnCache && Date.now() - hnCache.fetchedAt < 5 * 60 * 1000) {
+          return Response.json(hnCache.stories);
+        }
+
+        const ids = await fetch(
+          "https://hacker-news.firebaseio.com/v0/topstories.json",
+        ).then((res) => res.json());
+
+        const stories = await Promise.all(
+          ids
+            .slice(0, 5)
+            .map((id: number) =>
+              fetch(
+                `https://hacker-news.firebaseio.com/v0/item/${id}.json`,
+              ).then((res) => res.json()),
+            ),
+        );
+
+        hnCache = { stories, fetchedAt: Date.now() };
+
+        return Response.json(stories);
+      },
+    },
+
     "/api/weather": {
       async GET(req) {
         const url = new URL(req.url);