diff --git a/src/App.tsx b/src/App.tsx
index 77b045d..da9f677 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -94,36 +94,36 @@ function App() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-neutral-50 flex items-center justify-center">
-        <p className="text-neutral-400 text-sm">Loading...</p>
+      <div className="min-h-screen bg-[#fbf1c7] flex items-center justify-center">
+        <p className="text-[#928374] text-sm">Loading...</p>
       </div>
     )
   }
 
   if (error) {
     return (
-      <div className="min-h-screen bg-neutral-50 flex items-center justify-center">
-        <p className="text-neutral-500 text-sm">{error}</p>
+      <div className="min-h-screen bg-[#fbf1c7] flex items-center justify-center">
+        <p className="text-[#7c6f64] text-sm">{error}</p>
       </div>
     )
   }
 
   return (
-    <div className="min-h-screen bg-neutral-50 relative">
-      <div className="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-orange-200 to-transparent pointer-events-none"></div>
+    <div className="min-h-screen bg-[#fbf1c7] relative">
+      <div className="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-[#fabd2f]/20 to-transparent pointer-events-none"></div>
       <div className="max-w-3xl mx-auto px-6 py-12 relative">
         <header className="mb-8">
-          <h1 className="text-4xl font-extrabold text-slate-900 tracking-tight">
+          <h1 className="text-4xl font-extrabold text-[#3c3836] tracking-tight">
             Calm HN
           </h1>
-          <p className="text-slate-500 text-[10px] mt-2 uppercase tracking-wider">
+          <p className="text-[#7c6f64] text-[10px] mt-2 uppercase tracking-wider">
             Top stories from the last three months
           </p>
         </header>
 
         <div className="space-y-6">
           {stories.map((story, index) => (
-            <article key={story.id} className="group -mx-3 px-3 py-3 rounded-lg hover:bg-slate-100 transition-colors duration-300 relative">
+            <article key={story.id} className="group -mx-3 px-3 py-3 rounded-lg hover:bg-[#ebdbb2] transition-colors duration-300 relative">
               <a
                 href={story.url || `https://news.ycombinator.com/item?id=${story.id}`}
                 target="_blank"
@@ -132,10 +132,10 @@ function App() {
                 aria-label={story.title}
               />
               <div className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 relative z-10 pointer-events-none">
-                <span className="bg-slate-200 text-slate-500 text-[10px] leading-none font-medium px-2 py-0.5 rounded-full flex-shrink-0 self-center mt-px group-hover:bg-orange-200 group-hover:text-slate-600 transition-colors group-hover:duration-[750ms] duration-300">
+                <span className="bg-[#d5c4a1] text-[#665c54] text-[10px] leading-none font-medium px-2 py-0.5 rounded-full flex-shrink-0 self-center mt-px group-hover:bg-[#fabd2f] group-hover:text-[#3c3836] transition-colors group-hover:duration-[750ms] duration-300">
                   {index + 1}
                 </span>
-                <h2 className="text-slate-900 text-lg leading-relaxed">
+                <h2 className="text-[#282828] text-lg leading-relaxed">
                   <span className="inline-flex items-baseline gap-1.5">
                     {story.title}
                     {story.url && (
@@ -144,7 +144,7 @@ function App() {
                   </span>
                 </h2>
                 <div></div>
-                <div className="flex items-center gap-3 text-xs text-slate-400 group-hover:text-slate-500 transition-colors duration-300">
+                <div className="flex items-center gap-3 text-xs text-[#928374] group-hover:text-[#7c6f64] transition-colors duration-300">
                 <span className="flex items-center gap-1">
                   <ArrowUp size={12} weight="regular" className="opacity-60" />
                   {story.score}