diff --git a/src/app/articles/page.tsx b/src/app/articles/page.tsx
index b82fde8..fb0dc0b 100644
--- a/src/app/articles/page.tsx
+++ b/src/app/articles/page.tsx
@@ -1,6 +1,10 @@
+"use client"
+
 import { ArrowUpRight } from 'lucide-react';
 import Link from "next/link";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { CardSkeleton } from "~/components/ui/skeletons";
+import { useState, useEffect } from 'react';
 
 const articles = [
     {
@@ -28,41 +32,58 @@ const articles = [
 ];
 
 export default function ArticlesPage() {
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchArticles = async () => {
+            await new Promise(resolve => setTimeout(resolve, 0));
+            setLoading(false);
+        };
+        fetchArticles();
+    }, []);
+
     return (
         <div className="space-y-12">
-            {/* Articles Section */}
             <section className="space-y-6">
-        <div>
-          <h1 className="text-2xl font-bold">In the Media 🗞️</h1>
-          <p className="text-lg text-muted-foreground mt-2">
-            I have been lucky enough to have a few wonderful articles written about me and my work. Go check them out!
-          </p>
-        </div>
-                {articles.map((article, index) => (
-                    <Card key={index}>
-                        <CardHeader>
-                            <div className="flex items-center justify-between">
-                                <CardTitle>{article.title}</CardTitle>
-                                <Link
-                                    href={article.link}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="text-muted-foreground hover:text-primary"
-                                >
-                                    <ArrowUpRight className="h-5 w-5" />
-                                </Link>
-                            </div>
-                            <CardDescription className="text-sm text-muted-foreground">
-                                Written by {article.author}, found in {article.source}.
-                            </CardDescription>
-                        </CardHeader>
-                        <CardContent>
-                            <p className="text-sm text-muted-foreground">
-                                {article.description}
-                            </p>
-                        </CardContent>
-                    </Card>
-                ))}
+                <div>
+                    <h1 className="text-2xl font-bold">In the Media 🗞️</h1>
+                    <p className="text-lg text-muted-foreground mt-2">
+                        I have been lucky enough to have a few wonderful articles written about me and my work. Go check them out!
+                    </p>
+                </div>
+                {loading ? (
+                    <>
+                        <CardSkeleton />
+                        <CardSkeleton />
+                        <CardSkeleton />
+                    </>
+                ) : (
+                    articles.map((article, index) => (
+                        <Card key={index}>
+                            <CardHeader>
+                                <div className="flex items-center justify-between">
+                                    <CardTitle>{article.title}</CardTitle>
+                                    <Link
+                                        href={article.link}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="text-muted-foreground hover:text-primary"
+                                    >
+                                        <ArrowUpRight className="h-5 w-5" />
+                                    </Link>
+                                </div>
+                                <CardDescription className="text-sm text-muted-foreground">
+                                    Written by {article.author}, found in {article.source}.
+                                </CardDescription>
+                            </CardHeader>
+                            <CardContent>
+                                <p className="text-sm text-muted-foreground">
+                                    {article.description}
+                                </p>
+                            </CardContent>
+                        </Card>
+                    ))
+                )}
             </section>
         </div>
     );
diff --git a/src/app/cv/page.tsx b/src/app/cv/page.tsx
index f2a20ca..f962a23 100644
--- a/src/app/cv/page.tsx
+++ b/src/app/cv/page.tsx
@@ -14,7 +14,7 @@ export default function CVPage() {
     <div className="space-y-6">
       <section className="prose prose-zinc dark:prose-invert max-w-none">
         <h1 className="text-2xl font-bold">Curriculum Vitae 📄</h1>
-        <p className="text-lg text-muted-foreground">
+        <p className="text-lg text-muted-foreground mt-2">
           My academic and professional experience in computer science, robotics, and engineering.
         </p>
       </section>
@@ -30,7 +30,7 @@ export default function CVPage() {
             <object
               data="/cv.pdf"
               type="application/pdf"
-              className="w-full h-[calc(100vh-20.5rem)] lg:h-[calc(100vh-18rem)]"
+              className="w-full h-[calc(100vh-21rem)] lg:h-[calc(100vh-18rem)]"
             >
               <Card>
                 <CardHeader className="pb-2">
@@ -65,7 +65,7 @@ export default function CVPage() {
             <object
               data="/resume.pdf"
               type="application/pdf"
-              className="w-full h-[calc(100vh-20.5rem)] lg:h-[calc(100vh-18rem)]"
+              className="w-full h-[calc(100vh-21rem)] lg:h-[calc(100vh-18rem)]"
             >
 
               <Card>
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index e0dca73..5632cab 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -20,7 +20,7 @@ export default function ProjectsPage() {
     <div className="space-y-6">
       <section className="prose prose-zinc dark:prose-invert max-w-none">
         <h1 className="text-2xl font-bold">Featured Projects 🌟</h1>
-        <p className="text-lg text-muted-foreground">
+        <p className="text-lg text-muted-foreground mt-2">
           A selection of my academic and professional projects, focusing on robotics, 
           web development, and embedded systems.
         </p>
diff --git a/src/app/publications/page.tsx b/src/app/publications/page.tsx
index 52044d6..78bc0f0 100644
--- a/src/app/publications/page.tsx
+++ b/src/app/publications/page.tsx
@@ -61,7 +61,7 @@ export default function PublicationsPage() {
     <div className="space-y-6">
       <section className="prose prose-zinc dark:prose-invert max-w-none">
         <h1 className="text-2xl font-bold">Publications 📚</h1>
-        <p className="text-lg text-muted-foreground">
+        <p className="text-lg text-muted-foreground mt-2">
           My research publications in human-robot interaction and robotics.
         </p>
       </section>