diff --git a/app/globals.css b/app/globals.css
index 36bdb30..5fa3331 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -9,9 +9,8 @@
   }
   
   body {
-    @apply bg-white text-slate-800 font-serif antialiased;
-    font-family: 'Georgia', 'Times New Roman', serif;
-    line-height: 1.75;
+    @apply bg-white text-slate-800 font-serif antialiased selection:bg-slate-900 selection:text-white;
+    line-height: 1.8;
   }
   
   /* Typography */
@@ -20,27 +19,19 @@
   }
 
   h1 {
-    @apply text-3xl md:text-4xl leading-tight mb-6;
-    font-family: 'Inter', sans-serif;
-    letter-spacing: -0.025em;
+    @apply text-4xl md:text-5xl leading-[1.1] mb-8 tracking-tight;
   }
 
   h2 {
-    @apply text-2xl md:text-3xl leading-tight mb-4 mt-8;
-    font-family: 'Inter', sans-serif;
-    letter-spacing: -0.025em;
+    @apply text-3xl md:text-4xl leading-[1.2] mb-6 mt-12 tracking-tight;
   }
 
   h3 {
-    @apply text-xl md:text-2xl leading-tight mb-3 mt-6;
-    font-family: 'Inter', sans-serif;
-    letter-spacing: -0.025em;
+    @apply text-2xl md:text-3xl leading-[1.3] mb-4 mt-8 tracking-tight;
   }
 
   h4 {
-    @apply text-lg md:text-xl leading-tight mb-2 mt-4;
-    font-family: 'Inter', sans-serif;
-    letter-spacing: -0.025em;
+    @apply text-xl md:text-2xl leading-[1.4] mb-3 mt-6 tracking-tight;
   }
 
   p {
@@ -65,19 +56,18 @@
   }
   
   code:not([class*='language-']) {
-    @apply bg-slate-100 px-1 py-0.5 rounded font-mono text-sm text-slate-700;
+    @apply bg-slate-50 px-1.5 py-0.5 rounded-md font-mono text-[0.9em] text-slate-800 border border-slate-100;
   }
   
   blockquote {
-    @apply border-l-2 border-slate-300 pl-4 italic text-slate-600 my-4;
+    @apply border-l-4 border-slate-900 pl-6 italic text-slate-700 my-8 text-xl md:text-2xl font-serif;
   }
   
   /* Focus states */
   a:focus,
   button:focus,
   input:focus {
-    outline: 2px solid #0f172a;
-    outline-offset: 2px;
+    @apply outline-none ring-2 ring-slate-900 ring-offset-2 rounded-sm;
   }
 }
 
@@ -89,26 +79,24 @@
   }
 
   .container {
-    @apply max-w-4xl mx-auto px-6 py-10;
+    @apply max-w-6xl mx-auto px-6 py-12;
   }
 
   .wide-container {
-    @apply max-w-5xl mx-auto px-6 py-12;
+    @apply max-w-7xl mx-auto px-6 py-16;
   }
 
   .narrow-container {
-    @apply max-w-3xl mx-auto px-6 py-8;
+    @apply max-w-4xl mx-auto px-6 py-10;
   }
 
   .highlighter-tag {
-    @apply inline-block text-xs font-bold px-2 py-0.5 rounded cursor-pointer transition-all duration-200;
+    @apply inline-block text-[10px] uppercase tracking-wider font-bold px-3 py-1 rounded-full cursor-pointer transition-all duration-300;
     position: relative;
-    transform: rotate(-1deg);
-    box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
   }
 
   .search-box {
-    @apply w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-slate-900 transition-colors;
+    @apply w-full px-6 py-4 border border-slate-200 rounded-2xl focus:outline-none focus:border-slate-400 transition-all duration-300;
     background: rgba(255,255,255,0.9);
     backdrop-filter: blur(10px);
   }
@@ -136,7 +124,7 @@
 
   /* Article page */
   .article-header {
-    @apply mb-8;
+    @apply mb-12;
   }
   
   .article-title {
@@ -178,15 +166,15 @@
 
   /* Buttons */
   .btn {
-    @apply inline-block px-4 py-2 bg-slate-900 text-white font-sans font-medium hover:bg-slate-700 transition-colors rounded;
+    @apply inline-block px-6 py-3 bg-slate-900 text-white font-sans font-bold text-sm uppercase tracking-widest hover:bg-slate-800 hover:scale-[1.02] active:scale-[0.98] transition-all duration-300 rounded-full shadow-sm hover:shadow-md;
   }
 
   .btn-primary {
-    @apply bg-slate-900 hover:bg-slate-800 text-white px-3 py-1.5 rounded transition-colors;
+    @apply bg-slate-900 hover:bg-slate-800 text-white px-6 py-2.5 rounded-full transition-all duration-300 font-bold text-sm uppercase tracking-widest;
   }
 
   .btn-secondary {
-    @apply bg-white text-slate-700 hover:bg-slate-100 border border-slate-300 px-3 py-1.5 rounded transition-colors;
+    @apply bg-white text-slate-900 hover:bg-slate-50 border border-slate-200 px-6 py-2.5 rounded-full transition-all duration-300 font-bold text-sm uppercase tracking-widest;
   }
 
   /* Hide scrollbars */
@@ -233,8 +221,8 @@
   /* Floating back to top button */
   .floating-back-to-top {
     position: fixed;
-    bottom: 1.5rem;
-    right: 1.5rem;
+    bottom: 2rem;
+    right: 2rem;
     width: 2.5rem;
     height: 2.5rem;
     background: white;
@@ -315,25 +303,22 @@
 
 /* Tag Styles */
 .highlighter-tag {
-  transform: rotate(-1deg) translateY(0);
-  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
-  animation: tagPopIn 0.3s ease-out both;
+  animation: tagPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
   animation-delay: calc(var(--tag-index, 0) * 0.05s);
 }
 
 .highlighter-tag:hover {
-  transform: rotate(-2deg) translateY(-2px) scale(1.05);
-  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15);
+  @apply -translate-y-0.5 scale-105 shadow-lg shadow-slate-200;
 }
 
 @keyframes tagPopIn {
   from {
     opacity: 0;
-    transform: rotate(-1deg) scale(0.8) translateY(5px);
+    transform: scale(0.8) translateY(10px);
   }
   to {
     opacity: 1;
-    transform: rotate(-1deg) scale(1) translateY(0);
+    transform: scale(1) translateY(0);
   }
 }
 
@@ -374,10 +359,7 @@
 }
 
 .highlighter-tag:focus {
-  outline: 2px solid #0f172a;
-  outline-offset: 2px;
-  transform: rotate(-1deg) translateY(-2px) scale(1.05);
-  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.1), 3px 3px 0 rgba(0, 0, 0, 0.15);
+  @apply ring-2 ring-slate-900 ring-offset-2 -translate-y-0.5 scale-105;
 }
 
 /* Marker Title Styles */
@@ -500,10 +482,10 @@
 /* Generic Embed Styles */
 .generic-embed {
   --max-width: 100%;
-  --border-radius: 8px;
+  --border-radius: 24px;
   --bg-color: #ffffff;
   --border-color: #e2e8f0;
-  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow: none;
   
   margin: 1.5rem 0;
   width: 100%;
diff --git a/app/layout.tsx b/app/layout.tsx
index cf36434..6a29f93 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
+import { Inter, Newsreader } from 'next/font/google';
 import './globals.css';
 import { Footer } from '../src/components/Footer';
 import { Header } from '../src/components/Header';
@@ -8,6 +8,12 @@ import { InteractiveElements } from '../src/components/InteractiveElements';
 import { Analytics } from '../src/components/Analytics';
 
 const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
+const newsreader = Newsreader({
+  subsets: ['latin'],
+  variable: '--font-newsreader',
+  style: 'italic',
+  display: 'swap',
+});
 
 export const metadata: Metadata = {
   title: {
@@ -24,7 +30,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className={`${inter.variable}`}>
+    <html lang="en" className={`${inter.variable} ${newsreader.variable}`}>
       <head>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
diff --git a/src/components/ArticleBlockquote.tsx b/src/components/ArticleBlockquote.tsx
index 46ea06c..3eba190 100644
--- a/src/components/ArticleBlockquote.tsx
+++ b/src/components/ArticleBlockquote.tsx
@@ -20,7 +20,7 @@ interface BlockquoteProps {
 }
 
 export const Blockquote: React.FC<BlockquoteProps> = ({ children, className = '' }) => (
-  <blockquote className={`border-l-4 border-slate-400 pl-4 italic text-slate-600 my-6 ${className}`}>
+  <blockquote className={`border-l-4 border-slate-900 pl-6 italic text-slate-700 my-8 text-xl md:text-2xl font-serif ${className}`}>
     {children}
   </blockquote>
 );
@@ -88,12 +88,12 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
        <style dangerouslySetInnerHTML={{ __html: syntaxHighlightingStyles }} />
        <div className="relative my-6">
          {language !== 'text' && (
-           <div className="absolute top-2 right-2 text-xs bg-slate-100 text-slate-700 px-2 py-1 rounded font-sans z-10 border border-slate-200">
+           <div className="absolute top-3 right-3 text-[10px] font-bold uppercase tracking-widest bg-white text-slate-500 px-2 py-1 rounded-md z-10 border border-slate-100 shadow-sm">
              {language}
            </div>
          )}
          <pre
-           className={`m-0 p-3 overflow-x-auto overflow-y-auto text-[13px] leading-[1.65] font-mono text-slate-800 hide-scrollbar border border-slate-200 rounded ${className} ${showLineNumbers ? 'pl-12' : ''}`}
+           className={`m-0 p-6 overflow-x-auto overflow-y-auto text-[13px] leading-[1.65] font-mono text-slate-800 hide-scrollbar border border-slate-200 bg-white rounded-2xl ${className} ${showLineNumbers ? 'pl-12' : ''}`}
            style={{ fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace", maxHeight: "22rem" }}
          >
            {showLineNumbers ? (
@@ -117,7 +117,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
  };
 
 export const InlineCode: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className = '' }) => (
-  <code className={`bg-slate-100 text-pink-600 px-1.5 py-0.5 rounded font-mono text-sm border border-pink-200 ${className}`}>
+  <code className={`bg-white text-slate-800 px-1.5 py-0.5 rounded-md font-mono text-[0.9em] border border-slate-200 ${className}`}>
     {children}
   </code>
 );
diff --git a/src/components/CTA.tsx b/src/components/CTA.tsx
index 996e8ff..97999da 100644
--- a/src/components/CTA.tsx
+++ b/src/components/CTA.tsx
@@ -5,16 +5,16 @@ import { Reveal } from './Reveal';
 
 export const CTA: React.FC = () => {
   return (
-    <section className="container relative py-32 md:py-48">
+    <section className="container relative py-20 md:py-32">
       <Reveal width="100%">
-        <div className="relative p-12 md:p-24 border-2 border-slate-900 bg-white">
-          <div className="absolute top-0 left-12 w-px h-24 bg-slate-900 -translate-y-12"></div>
+        <div className="relative p-12 md:p-20 border border-slate-200 rounded-[3rem] bg-white">
+          <div className="absolute top-0 left-12 w-px h-24 bg-slate-200 -translate-y-12"></div>
           <div className="absolute -right-12 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">?</div>
           
           <div className="space-y-16 relative z-10">
-            <h2 className="text-6xl md:text-8xl font-bold tracking-tighter leading-[0.8] text-slate-900">
+            <h2 className="text-6xl md:text-8xl font-bold tracking-tighter leading-[0.9] text-slate-900">
               Interesse? <br />
-              <span className="text-slate-200">Fragen kostet nichts.</span>
+              <span className="text-slate-100">Fragen kostet nichts.</span>
             </h2>
             
             <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-end">
@@ -25,7 +25,7 @@ export const CTA: React.FC = () => {
               <div className="flex flex-col items-start gap-8">
                 <Link
                   href="/contact"
-                  className="group inline-flex items-center gap-4 bg-white border border-slate-200 rounded-full px-10 py-5 text-2xl font-bold text-slate-900 hover:border-slate-900 hover:shadow-xl hover:-translate-y-1 transition-all duration-300"
+                  className="group inline-flex items-center gap-4 bg-white border border-slate-200 rounded-full px-10 py-5 text-2xl font-bold text-slate-900 hover:border-slate-400 hover:-translate-y-1 transition-all duration-300"
                 >
                   Projekt anfragen
                   <ArrowRight className="w-6 h-6 group-hover:translate-x-2 transition-transform" />
diff --git a/src/components/FileExample.tsx b/src/components/FileExample.tsx
index 6c3a2a6..056587f 100644
--- a/src/components/FileExample.tsx
+++ b/src/components/FileExample.tsx
@@ -102,12 +102,12 @@ export const FileExample: React.FC<FileExampleProps> = ({
 
   return (
     <div
-      className="file-example w-full bg-white border border-slate-200/80 rounded-lg overflow-hidden"
+      className="file-example w-full bg-white border border-slate-200 rounded-2xl overflow-hidden transition-all duration-300"
       data-file-example
       data-expanded={isExpanded}
     >
       <div
-        className="px-3 py-2 flex items-center justify-between gap-3 cursor-pointer select-none bg-white hover:bg-slate-50/60 transition-colors"
+        className="px-4 py-3 flex items-center justify-between gap-3 cursor-pointer select-none bg-white hover:bg-slate-50 transition-colors"
         onClick={toggleExpand}
         role="button"
         tabIndex={0}
@@ -175,13 +175,13 @@ export const FileExample: React.FC<FileExampleProps> = ({
 
       <div
         ref={contentRef}
-        className={`file-example__content overflow-hidden transition-[max-height,opacity] duration-200 ease-out bg-slate-50 ${isExpanded ? 'max-h-[22rem] opacity-100' : 'max-h-0 opacity-0'}`}
+        className={`file-example__content overflow-hidden transition-[max-height,opacity] duration-200 ease-out bg-white ${isExpanded ? 'max-h-[22rem] opacity-100' : 'max-h-0 opacity-0'}`}
         id={contentId}
         role="region"
         aria-labelledby={headerId}
       >
         <pre
-          className="m-0 p-3 overflow-x-auto overflow-y-auto text-[13px] leading-[1.65] font-mono text-slate-800 hide-scrollbar border border-slate-200 rounded"
+          className="m-0 p-6 overflow-x-auto overflow-y-auto text-[13px] leading-[1.65] font-mono text-slate-800 hide-scrollbar border-t border-slate-200"
           style={{ fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace", maxHeight: "22rem" }}
         >
           <code className={`language-${prismLanguage}`} dangerouslySetInnerHTML={{ __html: highlightedCode }}></code>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 03a0634..250a6eb 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -4,12 +4,12 @@ export const Footer: React.FC = () => {
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="py-24 mt-48 border-t border-slate-100">
+    <footer className="py-16 mt-24 border-t border-slate-100">
       <div className="narrow-container">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-end">
           <div className="space-y-8">
             <div className="flex items-center gap-3">
-              <div className="w-8 h-8 bg-slate-900 flex items-center justify-center">
+              <div className="w-8 h-8 bg-slate-900 rounded-lg flex items-center justify-center">
                 <span className="text-white text-sm font-bold">M</span>
               </div>
               <span className="text-xl font-bold text-slate-900 tracking-tighter">Marc Mintel</span>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index d90f737..c197008 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -10,10 +10,10 @@ export const Header: React.FC = () => {
   const isActive = (path: string) => pathname === path;
 
   return (
-    <header className="bg-white/80 backdrop-blur-md sticky top-0 z-50">
-      <div className="narrow-container py-8 flex items-center justify-between">
+    <header className="bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-50">
+      <div className="narrow-container py-4 flex items-center justify-between">
         <Link href="/" className="flex items-center gap-3 group">
-          <div className="w-10 h-10 bg-slate-900 flex items-center justify-center group-hover:bg-slate-700 transition-colors">
+          <div className="w-10 h-10 bg-slate-900 rounded-xl flex items-center justify-center group-hover:bg-slate-800 group-hover:scale-105 transition-all duration-300 shadow-sm">
             <span className="text-white text-lg font-bold">M</span>
           </div>
           <span className="text-slate-900 font-bold tracking-tighter text-2xl">Marc Mintel</span>
@@ -38,7 +38,7 @@ export const Header: React.FC = () => {
           </Link>
           <Link
             href="/contact"
-            className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 border-2 border-slate-900 px-5 py-2.5 hover:bg-slate-900 hover:text-white transition-all duration-300"
+            className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 border border-slate-200 px-5 py-2.5 rounded-full hover:border-slate-400 transition-all duration-300"
           >
             Anfrage
           </Link>
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index dc92e33..d1e227f 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 
 export const Hero: React.FC = () => {
   return (
-    <section className="relative bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white py-20 md:py-28 overflow-hidden">
+    <section className="relative bg-slate-900 text-white py-20 md:py-24 overflow-hidden">
       {/* Background pattern */}
       <div className="absolute inset-0 opacity-10">
         <div className="absolute inset-0" style={{
@@ -24,22 +24,22 @@ export const Hero: React.FC = () => {
           </p>
           
           {/* Quick stats or focus areas */}
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10 animate-fade-in">
-            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
-              <Code2 className="mx-auto mb-2 text-slate-400" size={24} />
-              <div className="text-sm font-mono text-slate-300">Code</div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12 animate-fade-in">
+            <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
+              <Code2 className="mx-auto mb-3 text-slate-400" size={28} />
+              <div className="text-xs font-bold uppercase tracking-widest text-slate-300">Code</div>
             </div>
-            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
-              <Wrench className="mx-auto mb-2 text-slate-400" size={24} />
-              <div className="text-sm font-mono text-slate-300">Tools</div>
+            <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
+              <Wrench className="mx-auto mb-3 text-slate-400" size={28} />
+              <div className="text-xs font-bold uppercase tracking-widest text-slate-300">Tools</div>
             </div>
-            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
-              <Terminal className="mx-auto mb-2 text-slate-400" size={24} />
-              <div className="text-sm font-mono text-slate-300">Automation</div>
+            <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
+              <Terminal className="mx-auto mb-3 text-slate-400" size={28} />
+              <div className="text-xs font-bold uppercase tracking-widest text-slate-300">Automation</div>
             </div>
-            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
-              <BookOpen className="mx-auto mb-2 text-slate-400" size={24} />
-              <div className="text-sm font-mono text-slate-300">Learning</div>
+            <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
+              <BookOpen className="mx-auto mb-3 text-slate-400" size={28} />
+              <div className="text-xs font-bold uppercase tracking-widest text-slate-300">Learning</div>
             </div>
           </div>
 
diff --git a/src/components/MediumCard.tsx b/src/components/MediumCard.tsx
index f8a01e3..08d32a7 100644
--- a/src/components/MediumCard.tsx
+++ b/src/components/MediumCard.tsx
@@ -24,22 +24,22 @@ export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
 
   return (
     <Link href={`/blog/${slug}`} className="group block">
-      <article className="space-y-3 py-8 border-b border-slate-50 group-hover:border-slate-900 transition-colors">
-        <time className="text-[10px] font-mono text-slate-300 uppercase tracking-widest group-hover:text-slate-900 transition-colors">
+      <article className="space-y-4 py-8 px-8 border border-slate-200 rounded-3xl group-hover:border-slate-400 transition-all duration-500 bg-white">
+        <time className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 group-hover:text-slate-900 transition-colors">
           {formattedDate}
         </time>
         
-        <h3 className="text-3xl font-bold text-slate-900 tracking-tighter group-hover:text-slate-900 transition-colors">
+        <h3 className="text-3xl md:text-4xl font-bold text-slate-900 tracking-tight group-hover:text-slate-900 transition-colors">
           {title}
         </h3>
         
-        <p className="text-xl text-slate-500 font-serif italic leading-tight line-clamp-2">
+        <p className="text-xl text-slate-500 font-serif italic leading-snug line-clamp-2">
           {description}
         </p>
         
-        <div className="pt-4 flex items-center gap-4 text-slate-900 font-bold text-sm group/link">
+        <div className="pt-4 flex items-center gap-4 text-slate-900 font-bold text-xs uppercase tracking-widest group/link">
           Lesen
-          <div className="w-8 h-px bg-slate-900 group-hover:w-12 transition-all"></div>
+          <div className="w-10 h-px bg-slate-200 group-hover:bg-slate-400 group-hover:w-16 transition-all duration-500"></div>
         </div>
       </article>
     </Link>
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index ae62273..ad85f31 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -50,10 +50,10 @@ export const SearchBar: React.FC<SearchBarProps> = ({ value: propValue, onChange
           type="text"
           placeholder="Suchen..."
           value={value}
-          className={`w-full px-0 py-2 font-bold text-slate-900 bg-transparent border-b-2 transition-all focus:outline-none placeholder:text-slate-100 ${
-            size === 'large' ? 'text-2xl md:text-4xl py-4 border-b-4' : 'text-lg'
+          className={`w-full px-8 py-4 font-bold text-slate-900 bg-white rounded-2xl border transition-all focus:outline-none placeholder:text-slate-300 ${
+            size === 'large' ? 'text-2xl md:text-4xl py-6 rounded-3xl' : 'text-lg'
           } ${
-            isFocused ? 'border-slate-900' : 'border-slate-100'
+            isFocused ? 'border-slate-400' : 'border-slate-200'
           }`}
           onChange={handleInput}
           onKeyDown={handleKeyDown}
@@ -65,7 +65,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({ value: propValue, onChange
         {value && (
           <button
             onClick={clearSearch}
-            className="absolute right-0 top-1/2 -translate-y-1/2 text-[10px] font-bold uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-colors"
+            className="absolute right-6 top-1/2 -translate-y-1/2 text-[10px] font-bold uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-colors"
             aria-label="Clear search"
             type="button"
           >
diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
index 8835d12..0a60acb 100644
--- a/src/components/Tag.tsx
+++ b/src/components/Tag.tsx
@@ -11,7 +11,7 @@ export const Tag: React.FC<TagProps> = ({ tag, className = '' }) => {
   return (
     <Link
       href={`/tags/${tag}`}
-      className={`inline-block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 border border-slate-100 px-3 py-1.5 hover:border-slate-900 hover:text-slate-900 transition-all duration-300 ${className}`}
+      className={`inline-block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 bg-white border border-slate-200 px-4 py-2 rounded-full hover:border-slate-400 hover:text-slate-900 transition-all duration-300 ${className}`}
     >
       {tag}
     </Link>
diff --git a/tailwind.config.js b/tailwind.config.js
index edfc259..d38bce8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,6 +8,12 @@ export default {
   ],
   theme: {
     extend: {
+      borderRadius: {
+        'xl': '1rem',
+        '2xl': '1.5rem',
+        '3xl': '2rem',
+        'full': '9999px',
+      },
       colors: {
         slate: {
           850: '#1e293b',
@@ -16,7 +22,8 @@ export default {
         }
       },
       fontFamily: {
-        sans: ['Inter', 'system-ui', 'sans-serif'],
+        sans: ['var(--font-inter)', 'Inter', 'system-ui', 'sans-serif'],
+        serif: ['var(--font-newsreader)', 'Georgia', 'serif'],
         mono: ['JetBrains Mono', 'monospace'],
       },
       typography: (theme) => ({