diff --git a/src/blog/Blog.tsx b/src/blog/Blog.tsx
index 35e0df1..f04840c 100644
--- a/src/blog/Blog.tsx
+++ b/src/blog/Blog.tsx
@@ -96,14 +96,14 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
         open_editor: 'onEdit',
       },
       extraProps: ({ ui, articles }) => ({
-        article: articles.readByIndex(ui.selectedArticle),
+        article: articles.readById(ui.selectedArticle._id),
       }) satisfies Partial<ArticleViewProps>,
     },
 
     editor: {
       component: ArticleEditor,
       extraProps: ({ ui, articles }) => ({
-        article: ui.selectedArticle !== null ? articles.readByIndex(ui.selectedArticle) : null,
+        article: ui.selectedArticle !== null ? articles.readById(ui.selectedArticle._id) : null,
       }) satisfies Partial<ArticleEditorProps>,
     },
 
diff --git a/src/blog/components/ArticleCards/ArticleCardSize12.tsx b/src/blog/components/ArticleCards/ArticleCardSize12.tsx
index 6815aae..3cb4e9d 100644
--- a/src/blog/components/ArticleCards/ArticleCardSize12.tsx
+++ b/src/blog/components/ArticleCards/ArticleCardSize12.tsx
@@ -16,7 +16,7 @@ export default function ArticleCardSize12({
   return (
     <StyledCard
       variant="outlined"
-      onClick={() => onSelectArticle(index)}
+      onClick={() => onSelectArticle(article)}
       onFocus={() => onFocus(index)}
       onBlur={onBlur}
       tabIndex={0}
diff --git a/src/blog/components/ArticleCards/ArticleCardSize2.tsx b/src/blog/components/ArticleCards/ArticleCardSize2.tsx
index beba15c..b71285d 100644
--- a/src/blog/components/ArticleCards/ArticleCardSize2.tsx
+++ b/src/blog/components/ArticleCards/ArticleCardSize2.tsx
@@ -16,7 +16,7 @@ export default function ArticleCardSize2({
   return (
     <StyledCard
       variant="outlined"
-      onClick={() => onSelectArticle(index)}
+      onClick={() => onSelectArticle(article)}
       onFocus={() => onFocus(index)}
       onBlur={onBlur}
       tabIndex={0}
diff --git a/src/blog/components/ArticleCards/ArticleCardSize4.tsx b/src/blog/components/ArticleCards/ArticleCardSize4.tsx
index 6d6d12a..094ea53 100644
--- a/src/blog/components/ArticleCards/ArticleCardSize4.tsx
+++ b/src/blog/components/ArticleCards/ArticleCardSize4.tsx
@@ -16,7 +16,7 @@ export default function ArticleCardSize4({
   return (
     <StyledCard
       variant="outlined"
-      onClick={() => onSelectArticle(index)}
+      onClick={() => onSelectArticle(article)}
       onFocus={() => onFocus(index)}
       onBlur={onBlur}
       tabIndex={0}
diff --git a/src/blog/components/ArticleCards/ArticleCardSize6.tsx b/src/blog/components/ArticleCards/ArticleCardSize6.tsx
index b5c661f..436e8ef 100644
--- a/src/blog/components/ArticleCards/ArticleCardSize6.tsx
+++ b/src/blog/components/ArticleCards/ArticleCardSize6.tsx
@@ -16,7 +16,7 @@ export default function ArticleCardSize6({
   return (
     <StyledCard
       variant="outlined"
-      onClick={() => onSelectArticle(index)}
+      onClick={() => onSelectArticle(article)}
       onFocus={() => onFocus(index)}
       onBlur={onBlur}
       tabIndex={0}
diff --git a/src/blog/types/props.ts b/src/blog/types/props.ts
index f012335..4432ea4 100644
--- a/src/blog/types/props.ts
+++ b/src/blog/types/props.ts
@@ -16,7 +16,7 @@ export interface LoginProps {
 
 export interface MainContentProps {
   articles: ArticlesModel;
-  onSelectArticle: (index: number) => void;
+  onSelectArticle: (index: ArticleModel) => void;
 }
 
 export interface ProfileProps {
@@ -46,14 +46,14 @@ export interface ArticleCardProps {
   article: ArticleModel;
   index: number;
   focusedCardIndex: number | null;
-  onSelectArticle: (index: number) => void;
+  onSelectArticle: (index: ArticleModel) => void;
   onFocus: (index: number) => void;
   onBlur: () => void;
 }
 
 export interface ArticleGridProps {
   articles: ArticlesModel;
-  onSelectArticle: (index: number) => void;
+  onSelectArticle: (index: ArticleModel) => void;
   xs?: number;  // default 12 for mobile full-width
   md12?: number, // default 12 (full-width)
   md6?: number; // default 6 (half-width)