diff --git a/src/blog/components/Article.tsx b/src/blog/components/Article.tsx
index 429fd81..e9662f1 100644
--- a/src/blog/components/Article.tsx
+++ b/src/blog/components/Article.tsx
@@ -3,6 +3,7 @@ import { marked } from 'marked';
 import { Box, Typography, Avatar, Divider, IconButton, Chip } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
+import { ArticleMeta } from "./ArticleMeta";
 import { ArticleProps } from '../types/props';
 
 const ArticleContainer = styled(Box)(({ theme }) => ({
@@ -44,21 +45,7 @@ export default function Article({
         {article.title}
       </Typography>
 
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 2, mb: 1 }}>
-        <Avatar src={article.authors[0].avatar} alt={article.authors[0].name} />
-        <Box>
-          <Typography variant="subtitle2">{article.authors[0].name}</Typography>
-          <Typography variant="caption" color="text.secondary">
-            {new Date(article.created_at).toLocaleString('en-US', {
-              year: 'numeric',
-              month: 'short',
-              day: 'numeric',
-              hour: '2-digit',
-              minute: '2-digit',
-            })}
-          </Typography>
-        </Box>
-      </Box>
+      <ArticleMeta article={article} />
 
       <Divider sx={{ my: 3 }} />