diff --git a/src/blog/components/Latest.tsx b/src/blog/components/Latest.tsx
index c4f808e..6ed7682 100644
--- a/src/blog/components/Latest.tsx
+++ b/src/blog/components/Latest.tsx
@@ -8,6 +8,7 @@ import { styled } from '@mui/material/styles';
 import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded';
 import CircularProgress from '@mui/material/CircularProgress';
 import type { Article } from '../providers/Article'; // ✅ import type for correctness
+import Fade from '@mui/material/Fade'; // ✅ for smooth appearance
 
 
 const StyledTypography = styled(Typography)({
@@ -98,12 +99,11 @@ interface LatestProps {
 export default function Latest({ articles, onSelectArticle, onLoadMore }: LatestProps) {
   const [visibleCount, setVisibleCount] = React.useState(2);
   const [loadingMore, setLoadingMore] = React.useState(false);
+  const [animating, setAnimating] = React.useState(false);
+  const loaderRef = React.useRef<HTMLDivElement | null>(null);
 
   const displayedArticles = articles.slice(0, visibleCount);
 
-  // Intersection Observer ref
-  const loaderRef = React.useRef<HTMLDivElement | null>(null);
-
   React.useEffect(() => {
     if (!loaderRef.current) return;
 
@@ -114,17 +114,22 @@ export default function Latest({ articles, onSelectArticle, onLoadMore }: Latest
           console.log('🟡 Intersection triggered — loading more blogs...');
           setLoadingMore(true);
 
+          // simulate API load delay
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+
           if (onLoadMore) {
             console.log(`📡 Calling onLoadMore(offset=${visibleCount}, limit=2)`);
             await onLoadMore(visibleCount, 2);
           }
 
+          setAnimating(true);
           setVisibleCount((prev) => {
             const newCount = prev + 2;
             console.log(`✅ Increasing visibleCount from ${prev} → ${newCount}`);
             return newCount;
           });
 
+          setTimeout(() => setAnimating(false), 600);
           setLoadingMore(false);
         }
       },
@@ -150,42 +155,58 @@ export default function Latest({ articles, onSelectArticle, onLoadMore }: Latest
       <Grid container spacing={8} columns={12} sx={{ my: 4 }}>
         {displayedArticles.map((article, index) => (
           <Grid key={index} size={{ xs: 12, sm: 6 }}>
-            <Box
-              sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'space-between',
-                gap: 1,
-                height: '100%',
-              }}
-            >
-              <Typography gutterBottom variant="caption" component="div">
-                {article.tag}
-              </Typography>
-
-              <TitleTypography
-                gutterBottom
-                variant="h6"
-                tabIndex={0}
-                onClick={() => onSelectArticle?.(index)}
+            <Fade in timeout={animating ? 700 : 0}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'space-between',
+                  gap: 1,
+                  height: '100%',
+                  transition: 'transform 0.3s ease',
+                  '&:hover': { transform: 'translateY(-3px)' },
+                }}
               >
-                {article.title}
-                <NavigateNextRoundedIcon className="arrow" sx={{ fontSize: '1rem' }} />
-              </TitleTypography>
+                <Typography gutterBottom variant="caption" component="div">
+                  {article.tag}
+                </Typography>
 
-              <StyledTypography variant="body2" color="text.secondary" gutterBottom>
-                {article.description}
-              </StyledTypography>
+                <TitleTypography
+                  gutterBottom
+                  variant="h6"
+                  tabIndex={0}
+                  onClick={() => onSelectArticle?.(index)}
+                >
+                  {article.title}
+                  <NavigateNextRoundedIcon className="arrow" sx={{ fontSize: '1rem' }} />
+                </TitleTypography>
 
-              <Author authors={article.authors} />
-            </Box>
+                <StyledTypography variant="body2" color="text.secondary" gutterBottom>
+                  {article.description}
+                </StyledTypography>
+
+                <Author authors={article.authors} />
+              </Box>
+            </Fade>
           </Grid>
         ))}
       </Grid>
 
-      {/* Infinite scroll loader */}
-      <Box ref={loaderRef} sx={{ display: 'flex', justifyContent: 'center', py: 3 }}>
-        {loadingMore && <CircularProgress size={28} />}
+      <Box
+        ref={loaderRef}
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          py: 3,
+          opacity: loadingMore ? 1 : 0.6,
+          transition: 'opacity 0.4s ease',
+        }}
+      >
+        {loadingMore ? (
+          <CircularProgress size={32} thickness={5} />
+        ) : (
+          <Typography variant="caption">Scroll to load more...</Typography>
+        )}
       </Box>
     </Box>
   );