diff --git a/frontend/src/components/ArticleTicker.tsx b/frontend/src/components/ArticleTicker.tsx
index 17de9eb..a2f3a0c 100644
--- a/frontend/src/components/ArticleTicker.tsx
+++ b/frontend/src/components/ArticleTicker.tsx
@@ -25,7 +25,8 @@ export function ArticleTicker() {
             {articles.map((article, index) => (
               <Link
                 key={`${article.id}-${index}`}
-                to={`/articles/${article.id}`}
+                to="/articles/$id"
+                params={{ id: article.id }}
                 className="font-body text-sm uppercase tracking-wider text-background/80 hover:text-accent hover:bg-background/10 inline-block px-6 py-1 border-r border-background/20 transition-colors"
               >
                 {article.title || 'No title'}
@@ -34,7 +35,8 @@ export function ArticleTicker() {
             {articles.map((article, index) => (
               <Link
                 key={`dup-${article.id}-${index}`}
-                to={`/articles/${article.id}`}
+                to="/articles/$id"
+                params={{ id: article.id }}
                 className="font-body text-sm uppercase tracking-wider text-background/80 hover:text-accent hover:bg-background/10 inline-block px-6 py-1 border-r border-background/20 transition-colors"
               >
                 {article.title || 'No title'}
diff --git a/frontend/src/components/home/HeroArticle.tsx b/frontend/src/components/home/HeroArticle.tsx
index 8d3aa4e..5c32d21 100644
--- a/frontend/src/components/home/HeroArticle.tsx
+++ b/frontend/src/components/home/HeroArticle.tsx
@@ -122,7 +122,7 @@ export function HeroArticle() {
         )}
 
         <div className="flex items-center justify-between pt-4 border-t-2 border-foreground/10">
-          <Link to={`/articles/${article.id}`}>
+          <Link to="/articles/$id" params={{ id: article.id }}>
             <Button variant="brutalAccent" className="gap-2">
               Read Full Story
               <ArrowRight className="w-4 h-4" />
diff --git a/frontend/src/components/home/LatestArticlesGrid.tsx b/frontend/src/components/home/LatestArticlesGrid.tsx
index 8cf0d41..ef59928 100644
--- a/frontend/src/components/home/LatestArticlesGrid.tsx
+++ b/frontend/src/components/home/LatestArticlesGrid.tsx
@@ -65,7 +65,8 @@ export function LatestArticlesGrid() {
             className={`group border-brutal-sm bg-card hover:shadow-brutal transition-all duration-150 hover:-translate-y-1 animate-fade-in-up stagger-${Math.min(index + 1, 12)}`}
           >
             <Link
-              to={`/articles/${article.id}`}
+              to="/articles/$id"
+              params={{ id: article.id }}
               className="block"
             >
               {article.featuredImage ? (
@@ -107,12 +108,12 @@ export function LatestArticlesGrid() {
                 </span>
                 
                 {article.category && (
-                  <Link
-                    to={`/${article.category.slug}`}
+                  <a
+                    href={`/${article.category.slug}`}
                     className="px-2 py-0.5 border border-foreground bg-background text-foreground text-[10px] hover:bg-accent hover:border-accent transition-colors"
                   >
                     {article.category.name}
-                  </Link>
+                  </a>
                 )}
               </div>
               
@@ -121,7 +122,7 @@ export function LatestArticlesGrid() {
                   articleId={article.id}
                   title={article.title}
                   url={`${window.location.origin}/articles/${article.id}`}
-                  excerpt={article.excerpt}
+                  excerpt={article.excerpt ?? undefined}
                   image={article.featuredImage}
                   tags={article.tags}
                   variant="compact"
diff --git a/frontend/src/components/routes/ArchiveComponent.tsx b/frontend/src/components/routes/ArchiveComponent.tsx
index be98b33..d40fc40 100644
--- a/frontend/src/components/routes/ArchiveComponent.tsx
+++ b/frontend/src/components/routes/ArchiveComponent.tsx
@@ -39,9 +39,10 @@ export function ArchiveComponent() {
              className="p-6 rounded-xl border bg-card hover:shadow-lg transition-shadow"
            >
              <Link
-               to={`/articles/${article.id}`}
-               className="block mb-4"
-             >
+                to="/articles/$id"
+                params={{ id: article.id }}
+                className="block mb-4"
+              >
                <h2 className="text-xl font-semibold mb-2 line-clamp-2">
                  {article.title}
                </h2>
@@ -66,14 +67,14 @@ export function ArchiveComponent() {
                </div>
                
                 <SocialShareButtons
-                  articleId={article.id}
-                  title={article.title}
-                  url={`${window.location.origin}/articles/${article.id}`}
-                  excerpt={article.excerpt}
-                  image={article.featuredImage}
-                  tags={article.tags}
-                  variant="compact"
-                />
+                   articleId={article.id}
+                   title={article.title}
+                   url={`${window.location.origin}/articles/${article.id}`}
+                   excerpt={article.excerpt ?? undefined}
+                   image={article.featuredImage}
+                   tags={article.tags}
+                   variant="compact"
+                 />
              </div>
            </div>
          ))}
diff --git a/frontend/src/components/routes/ArticleDetailComponent.tsx b/frontend/src/components/routes/ArticleDetailComponent.tsx
index ad1b43c..1c878f0 100644
--- a/frontend/src/components/routes/ArticleDetailComponent.tsx
+++ b/frontend/src/components/routes/ArticleDetailComponent.tsx
@@ -42,7 +42,7 @@ export function ArticleDetailComponent({ id }: { id: string }) {
   return (
     <article className="max-w-3xl mx-auto">
       <Link
-        to="/articles"
+        to="/archive"
         className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground mb-8"
       >
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -74,14 +74,14 @@ export function ArticleDetailComponent({ id }: { id: string }) {
 
         {/* Social Sharing */}
         <div className="mb-8 flex flex-wrap items-center gap-4">
-          <SocialShareButtons
-            articleId={data.id}
-            title={data.title}
-            url={typeof window !== 'undefined' ? window.location.href : ''}
-            excerpt={data.excerpt}
-            image={data.featuredImage}
-            tags={data.tags}
-          />
+           <SocialShareButtons
+             articleId={data.id}
+             title={data.title}
+             url={typeof window !== 'undefined' ? window.location.href : ''}
+             excerpt={data.excerpt ?? undefined}
+             image={data.featuredImage}
+             tags={data.tags}
+           />
           <a
             href="https://www.buymeacoffee.com/placebomk"
             target="_blank"
@@ -195,14 +195,14 @@ export function ArticleDetailComponent({ id }: { id: string }) {
           <p className="text-sm text-muted-foreground mb-2">Share this article:</p>
           <div className="flex flex-wrap items-center justify-center gap-4">
             <SocialShareButtons
-              articleId={data.id}
-              title={data.title}
-              url={typeof window !== 'undefined' ? window.location.href : ''}
-              excerpt={data.excerpt}
-              image={data.featuredImage}
-              tags={data.tags}
-              variant="footer"
-            />
+               articleId={data.id}
+               title={data.title}
+               url={typeof window !== 'undefined' ? window.location.href : ''}
+               excerpt={data.excerpt ?? undefined}
+               image={data.featuredImage}
+               tags={data.tags}
+               variant="footer"
+             />
             <a
               href="https://www.buymeacoffee.com/placebomk"
               target="_blank"
diff --git a/frontend/src/components/routes/CategoryPage.tsx b/frontend/src/components/routes/CategoryPage.tsx
index 5ee462e..7ae4a70 100644
--- a/frontend/src/components/routes/CategoryPage.tsx
+++ b/frontend/src/components/routes/CategoryPage.tsx
@@ -57,7 +57,7 @@ export function CategoryPage({ categorySlug, categoryName, categoryDescription }
           {/* Hero Article - 2/3 width */}
           <div className="lg:col-span-2">
             <div className="rounded-xl border bg-card overflow-hidden group hover:shadow-lg transition-shadow">
-              <Link to={`/articles/${heroArticle.id}`} className="block">
+                <Link to="/articles/$id" params={{ id: heroArticle.id }} className="block">
                 {heroArticle.featuredImage ? (
                   <div className="relative h-64 md:h-80 overflow-hidden">
                     <img
@@ -80,7 +80,7 @@ export function CategoryPage({ categorySlug, categoryName, categoryDescription }
               </Link>
               
               <div className="p-6">
-                <Link to={`/articles/${heroArticle.id}`} className="block">
+              <Link to="/articles/$id" params={{ id: heroArticle.id }} className="block">
                   <h2 className="text-2xl font-bold mb-3 group-hover:text-primary transition-colors">
                     {heroArticle.title}
                   </h2>
@@ -105,14 +105,14 @@ export function CategoryPage({ categorySlug, categoryName, categoryDescription }
                   </div>
                   
                   <SocialShareButtons
-                    articleId={heroArticle.id}
-                    title={heroArticle.title}
-                    url={`${window.location.origin}/articles/${heroArticle.id}`}
-                    excerpt={heroArticle.excerpt}
-                    image={heroArticle.featuredImage}
-                    tags={heroArticle.tags}
-                    variant="compact"
-                  />
+                     articleId={heroArticle.id}
+                     title={heroArticle.title}
+                     url={`${window.location.origin}/articles/${heroArticle.id}`}
+                     excerpt={heroArticle.excerpt ?? undefined}
+                     image={heroArticle.featuredImage}
+                     tags={heroArticle.tags}
+                     variant="compact"
+                   />
                 </div>
               </div>
             </div>
@@ -135,8 +135,9 @@ export function CategoryPage({ categorySlug, categoryName, categoryDescription }
               className="p-6 rounded-xl border bg-card hover:shadow-lg transition-shadow group"
             >
               <Link
-                to={`/articles/${article.id}`}
-                className="block mb-4"
+                 to="/articles/$id"
+                 params={{ id: article.id }}
+                 className="block mb-4"
               >
                 <h2 className="text-xl font-semibold mb-2 line-clamp-2 group-hover:text-primary transition-colors">
                   {article.title}
@@ -162,14 +163,14 @@ export function CategoryPage({ categorySlug, categoryName, categoryDescription }
                 </div>
                 
                 <SocialShareButtons
-                  articleId={article.id}
-                  title={article.title}
-                  url={`${window.location.origin}/articles/${article.id}`}
-                  excerpt={article.excerpt}
-                  image={article.featuredImage}
-                  tags={article.tags}
-                  variant="compact"
-                />
+                   articleId={article.id}
+                   title={article.title}
+                   url={`${window.location.origin}/articles/${article.id}`}
+                   excerpt={article.excerpt ?? undefined}
+                   image={article.featuredImage}
+                   tags={article.tags}
+                   variant="compact"
+                 />
               </div>
             </div>
           ))}
diff --git a/pwa/src/components/ArticleTicker.tsx b/pwa/src/components/ArticleTicker.tsx
index 17de9eb..a2f3a0c 100644
--- a/pwa/src/components/ArticleTicker.tsx
+++ b/pwa/src/components/ArticleTicker.tsx
@@ -25,7 +25,8 @@ export function ArticleTicker() {
             {articles.map((article, index) => (
               <Link
                 key={`${article.id}-${index}`}
-                to={`/articles/${article.id}`}
+                to="/articles/$id"
+                params={{ id: article.id }}
                 className="font-body text-sm uppercase tracking-wider text-background/80 hover:text-accent hover:bg-background/10 inline-block px-6 py-1 border-r border-background/20 transition-colors"
               >
                 {article.title || 'No title'}
@@ -34,7 +35,8 @@ export function ArticleTicker() {
             {articles.map((article, index) => (
               <Link
                 key={`dup-${article.id}-${index}`}
-                to={`/articles/${article.id}`}
+                to="/articles/$id"
+                params={{ id: article.id }}
                 className="font-body text-sm uppercase tracking-wider text-background/80 hover:text-accent hover:bg-background/10 inline-block px-6 py-1 border-r border-background/20 transition-colors"
               >
                 {article.title || 'No title'}
diff --git a/pwa/src/components/home/HeroArticle.tsx b/pwa/src/components/home/HeroArticle.tsx
index 8d3aa4e..5c32d21 100644
--- a/pwa/src/components/home/HeroArticle.tsx
+++ b/pwa/src/components/home/HeroArticle.tsx
@@ -122,7 +122,7 @@ export function HeroArticle() {
         )}
 
         <div className="flex items-center justify-between pt-4 border-t-2 border-foreground/10">
-          <Link to={`/articles/${article.id}`}>
+          <Link to="/articles/$id" params={{ id: article.id }}>
             <Button variant="brutalAccent" className="gap-2">
               Read Full Story
               <ArrowRight className="w-4 h-4" />
diff --git a/pwa/src/components/home/LatestArticlesGrid.tsx b/pwa/src/components/home/LatestArticlesGrid.tsx
index 8cf0d41..ef59928 100644
--- a/pwa/src/components/home/LatestArticlesGrid.tsx
+++ b/pwa/src/components/home/LatestArticlesGrid.tsx
@@ -65,7 +65,8 @@ export function LatestArticlesGrid() {
             className={`group border-brutal-sm bg-card hover:shadow-brutal transition-all duration-150 hover:-translate-y-1 animate-fade-in-up stagger-${Math.min(index + 1, 12)}`}
           >
             <Link
-              to={`/articles/${article.id}`}
+              to="/articles/$id"
+              params={{ id: article.id }}
               className="block"
             >
               {article.featuredImage ? (
@@ -107,12 +108,12 @@ export function LatestArticlesGrid() {
                 </span>
                 
                 {article.category && (
-                  <Link
-                    to={`/${article.category.slug}`}
+                  <a
+                    href={`/${article.category.slug}`}
                     className="px-2 py-0.5 border border-foreground bg-background text-foreground text-[10px] hover:bg-accent hover:border-accent transition-colors"
                   >
                     {article.category.name}
-                  </Link>
+                  </a>
                 )}
               </div>
               
@@ -121,7 +122,7 @@ export function LatestArticlesGrid() {
                   articleId={article.id}
                   title={article.title}
                   url={`${window.location.origin}/articles/${article.id}`}
-                  excerpt={article.excerpt}
+                  excerpt={article.excerpt ?? undefined}
                   image={article.featuredImage}
                   tags={article.tags}
                   variant="compact"
diff --git a/pwa/src/components/routes/ArchiveComponent.tsx b/pwa/src/components/routes/ArchiveComponent.tsx
index be98b33..d40fc40 100644
--- a/pwa/src/components/routes/ArchiveComponent.tsx
+++ b/pwa/src/components/routes/ArchiveComponent.tsx
@@ -39,9 +39,10 @@ export function ArchiveComponent() {
              className="p-6 rounded-xl border bg-card hover:shadow-lg transition-shadow"
            >
              <Link
-               to={`/articles/${article.id}`}
-               className="block mb-4"
-             >
+                to="/articles/$id"
+                params={{ id: article.id }}
+                className="block mb-4"
+              >
                <h2 className="text-xl font-semibold mb-2 line-clamp-2">
                  {article.title}
                </h2>
@@ -66,14 +67,14 @@ export function ArchiveComponent() {
                </div>
                
                 <SocialShareButtons
-                  articleId={article.id}
-                  title={article.title}
-                  url={`${window.location.origin}/articles/${article.id}`}
-                  excerpt={article.excerpt}
-                  image={article.featuredImage}
-                  tags={article.tags}
-                  variant="compact"
-                />
+                   articleId={article.id}
+                   title={article.title}
+                   url={`${window.location.origin}/articles/${article.id}`}
+                   excerpt={article.excerpt ?? undefined}
+                   image={article.featuredImage}
+                   tags={article.tags}
+                   variant="compact"
+                 />
              </div>
            </div>
          ))}
diff --git a/pwa/src/components/routes/ArticleDetailComponent.tsx b/pwa/src/components/routes/ArticleDetailComponent.tsx
index ad1b43c..1c878f0 100644
--- a/pwa/src/components/routes/ArticleDetailComponent.tsx
+++ b/pwa/src/components/routes/ArticleDetailComponent.tsx
@@ -42,7 +42,7 @@ export function ArticleDetailComponent({ id }: { id: string }) {
   return (
     <article className="max-w-3xl mx-auto">
       <Link
-        to="/articles"
+        to="/archive"
         className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground mb-8"
       >
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -74,14 +74,14 @@ export function ArticleDetailComponent({ id }: { id: string }) {
 
         {/* Social Sharing */}
         <div className="mb-8 flex flex-wrap items-center gap-4">
-          <SocialShareButtons
-            articleId={data.id}
-            title={data.title}
-            url={typeof window !== 'undefined' ? window.location.href : ''}
-            excerpt={data.excerpt}
-            image={data.featuredImage}
-            tags={data.tags}
-          />
+           <SocialShareButtons
+             articleId={data.id}
+             title={data.title}
+             url={typeof window !== 'undefined' ? window.location.href : ''}
+             excerpt={data.excerpt ?? undefined}
+             image={data.featuredImage}
+             tags={data.tags}
+           />
           <a
             href="https://www.buymeacoffee.com/placebomk"
             target="_blank"
@@ -195,14 +195,14 @@ export function ArticleDetailComponent({ id }: { id: string }) {
           <p className="text-sm text-muted-foreground mb-2">Share this article:</p>
           <div className="flex flex-wrap items-center justify-center gap-4">
             <SocialShareButtons
-              articleId={data.id}
-              title={data.title}
-              url={typeof window !== 'undefined' ? window.location.href : ''}
-              excerpt={data.excerpt}
-              image={data.featuredImage}
-              tags={data.tags}
-              variant="footer"
-            />
+               articleId={data.id}
+               title={data.title}
+               url={typeof window !== 'undefined' ? window.location.href : ''}
+               excerpt={data.excerpt ?? undefined}
+               image={data.featuredImage}
+               tags={data.tags}
+               variant="footer"
+             />
             <a
               href="https://www.buymeacoffee.com/placebomk"
               target="_blank"
diff --git a/pwa/src/components/routes/CategoryPage.tsx b/pwa/src/components/routes/CategoryPage.tsx
index 5ee462e..7ae4a70 100644
--- a/pwa/src/components/routes/CategoryPage.tsx
+++ b/pwa/src/components/routes/CategoryPage.tsx
@@ -57,7 +57,7 @@ export function CategoryPage({ categorySlug, categoryName, categoryDescription }
           {/* Hero Article - 2/3 width */}
           <div className="lg:col-span-2">
             <div className="rounded-xl border bg-card overflow-hidden group hover:shadow-lg transition-shadow">
-              <Link to={`/articles/${heroArticle.id}`} className="block">
+                <Link to="/articles/$id" params={{ id: heroArticle.id }} className="block">
                 {heroArticle.featuredImage ? (
                   <div className="relative h-64 md:h-80 overflow-hidden">
                     <img
@@ -80,7 +80,7 @@ export function CategoryPage({ categorySlug, categoryName, categoryDescription }
               </Link>
               
               <div className="p-6">
-                <Link to={`/articles/${heroArticle.id}`} className="block">
+              <Link to="/articles/$id" params={{ id: heroArticle.id }} className="block">
                   <h2 className="text-2xl font-bold mb-3 group-hover:text-primary transition-colors">
                     {heroArticle.title}
                   </h2>
@@ -105,14 +105,14 @@ export function CategoryPage({ categorySlug, categoryName, categoryDescription }
                   </div>
                   
                   <SocialShareButtons
-                    articleId={heroArticle.id}
-                    title={heroArticle.title}
-                    url={`${window.location.origin}/articles/${heroArticle.id}`}
-                    excerpt={heroArticle.excerpt}
-                    image={heroArticle.featuredImage}
-                    tags={heroArticle.tags}
-                    variant="compact"
-                  />
+                     articleId={heroArticle.id}
+                     title={heroArticle.title}
+                     url={`${window.location.origin}/articles/${heroArticle.id}`}
+                     excerpt={heroArticle.excerpt ?? undefined}
+                     image={heroArticle.featuredImage}
+                     tags={heroArticle.tags}
+                     variant="compact"
+                   />
                 </div>
               </div>
             </div>
@@ -135,8 +135,9 @@ export function CategoryPage({ categorySlug, categoryName, categoryDescription }
               className="p-6 rounded-xl border bg-card hover:shadow-lg transition-shadow group"
             >
               <Link
-                to={`/articles/${article.id}`}
-                className="block mb-4"
+                 to="/articles/$id"
+                 params={{ id: article.id }}
+                 className="block mb-4"
               >
                 <h2 className="text-xl font-semibold mb-2 line-clamp-2 group-hover:text-primary transition-colors">
                   {article.title}
@@ -162,14 +163,14 @@ export function CategoryPage({ categorySlug, categoryName, categoryDescription }
                 </div>
                 
                 <SocialShareButtons
-                  articleId={article.id}
-                  title={article.title}
-                  url={`${window.location.origin}/articles/${article.id}`}
-                  excerpt={article.excerpt}
-                  image={article.featuredImage}
-                  tags={article.tags}
-                  variant="compact"
-                />
+                   articleId={article.id}
+                   title={article.title}
+                   url={`${window.location.origin}/articles/${article.id}`}
+                   excerpt={article.excerpt ?? undefined}
+                   image={article.featuredImage}
+                   tags={article.tags}
+                   variant="compact"
+                 />
               </div>
             </div>
           ))}
diff --git a/pwa/src/hooks/usePushNotifications.ts b/pwa/src/hooks/usePushNotifications.ts
index 0a6c4b7..4270184 100644
--- a/pwa/src/hooks/usePushNotifications.ts
+++ b/pwa/src/hooks/usePushNotifications.ts
@@ -18,8 +18,8 @@ function checkPushSupport(): boolean {
   );
 }
 
-function getInitialPermission(): NotificationPermission | 'not-supported' {
-  if (!checkPushSupport()) return 'not-supported';
+function getInitialPermission(): NotificationPermission {
+  if (!checkPushSupport()) return 'denied';
   return Notification.permission;
 }
 
@@ -27,7 +27,7 @@ export interface UsePushNotificationsReturn {
   isSupported: boolean;
   isSubscribed: boolean;
   isLoading: boolean;
-  permissionState: NotificationPermission | 'not-supported';
+  permissionState: NotificationPermission;
   subscribe: () => Promise<boolean>;
   unsubscribe: () => Promise<boolean>;
   requestPermission: () => Promise<NotificationPermission>;
@@ -54,7 +54,7 @@ export function usePushNotifications(): UsePushNotificationsReturn {
 
   const requestPermission =
     useCallback(async (): Promise<NotificationPermission> => {
-      if (!isSupported) return 'not-supported';
+      if (!isSupported) return 'denied';
 
       const permission = await Notification.requestPermission();
       setPermissionState(permission);
@@ -96,9 +96,10 @@ export function usePushNotifications(): UsePushNotificationsReturn {
       let subscription = await registration.pushManager.getSubscription();
 
       if (!subscription) {
+        const keyArray = urlBase64ToUint8Array(publicKey);
         subscription = await registration.pushManager.subscribe({
           userVisibleOnly: true,
-          applicationServerKey: urlBase64ToUint8Array(publicKey),
+          applicationServerKey: keyArray.buffer as ArrayBuffer,
         });
       }