diff --git a/src/components/faq-display.tsx b/src/components/faq-display.tsx
index 47a21fd..5715f34 100644
--- a/src/components/faq-display.tsx
+++ b/src/components/faq-display.tsx
@@ -16,18 +16,13 @@ interface FaqDisplayProps {
 
 export function FaqDisplay({ faqs }: FaqDisplayProps) {
   return (
-    <div>
-      <h3 className="font-semibold text-card-foreground mb-2">
-        FAQ Structured Data
-      </h3>
-      <Accordion type="single" collapsible className="w-full">
-        {faqs.map((faq, index) => (
-          <AccordionItem value={`item-${index}`} key={index}>
-            <AccordionTrigger>{faq.question}</AccordionTrigger>
-            <AccordionContent>{faq.answer}</AccordionContent>
-          </AccordionItem>
-        ))}
-      </Accordion>
-    </div>
+    <Accordion type="single" collapsible className="w-full">
+      {faqs.map((faq, index) => (
+        <AccordionItem value={`item-${index}`} key={index}>
+          <AccordionTrigger>{faq.question}</AccordionTrigger>
+          <AccordionContent>{faq.answer}</AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
   );
 }
\ No newline at end of file
diff --git a/src/components/meta-form.tsx b/src/components/meta-form.tsx
index 8446a8b..c70402c 100644
--- a/src/components/meta-form.tsx
+++ b/src/components/meta-form.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
 import { Globe, Edit, Check, Loader2, X, ImageOff } from "lucide-react";
 import { extractMetaData, type HeadlineNode } from "@/app/actions";
 import { LengthIndicator } from "./length-indicator";
@@ -13,6 +13,7 @@ import { SerpPreview } from "./serp-preview";
 import { ResultsSkeleton } from "./results-skeleton";
 import { FaqDisplay } from "./faq-display";
 import { HeadlineTree } from "./headline-tree";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 interface MetaData {
   title: string;
@@ -121,177 +122,186 @@ export function MetaForm() {
       )}
 
       {!loading && metaData && (
-        <div className="space-y-6">
-          <Card className="w-full shadow-lg rounded-lg">
-            <CardHeader>
-              <CardTitle className="text-xl text-card-foreground">
-                Meta Analysis
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-                <div className="space-y-6">
-                  <div>
-                    <h3 className="font-semibold text-card-foreground mb-2">
-                      SERP Preview
-                    </h3>
-                    <SerpPreview
-                      title={editableTitle}
-                      description={editableDescription}
-                      url={url}
-                    />
-                  </div>
+        <Tabs defaultValue="analysis" className="w-full">
+          <TabsList className="mb-4">
+            <TabsTrigger value="analysis">Meta Analysis</TabsTrigger>
+            {metaData.headlines && metaData.headlines.length > 0 && (
+              <TabsTrigger value="headlines">Headlines</TabsTrigger>
+            )}
+            {metaData.faq && metaData.faq.length > 0 && (
+              <TabsTrigger value="faq">FAQ</TabsTrigger>
+            )}
+          </TabsList>
 
-                  {metaData.image && (
+          <TabsContent value="analysis">
+            <Card className="w-full shadow-lg rounded-lg">
+              <CardContent className="p-6">
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                  <div className="space-y-6">
                     <div>
                       <h3 className="font-semibold text-card-foreground mb-2">
-                        Preview Image
+                        SERP Preview
                       </h3>
-                      <div className="aspect-video bg-muted rounded-md overflow-hidden relative flex items-center justify-center">
-                        {!imageError ? (
-                          <img
-                            src={metaData.image}
-                            alt="Meta preview image"
-                            className="w-full h-full object-cover"
-                            onError={() => setImageError(true)}
+                      <SerpPreview
+                        title={editableTitle}
+                        description={editableDescription}
+                        url={url}
+                      />
+                    </div>
+                    {metaData.image && (
+                      <div>
+                        <h3 className="font-semibold text-card-foreground mb-2">
+                          Preview Image
+                        </h3>
+                        <div className="aspect-video bg-muted rounded-md overflow-hidden relative flex items-center justify-center">
+                          {!imageError ? (
+                            <img
+                              src={metaData.image}
+                              alt="Meta preview image"
+                              className="w-full h-full object-cover"
+                              onError={() => setImageError(true)}
+                            />
+                          ) : (
+                            <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                              <ImageOff className="h-8 w-8" />
+                              <span>Image not available</span>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                  <div className="space-y-6">
+                    <div>
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                          <h3 className="font-semibold text-card-foreground">
+                            Meta Title
+                          </h3>
+                          <LengthIndicator
+                            length={editableTitle.length}
+                            type="title"
                           />
-                        ) : (
-                          <div className="flex flex-col items-center gap-2 text-muted-foreground">
-                            <ImageOff className="h-8 w-8" />
-                            <span>Image not available</span>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  )}
-
-                  {metaData.faq && metaData.faq.length > 0 && (
-                    <FaqDisplay faqs={metaData.faq} />
-                  )}
-                </div>
-                <div className="space-y-6">
-                  <div>
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-2">
-                        <h3 className="font-semibold text-card-foreground">
-                          Meta Title
-                        </h3>
-                        <LengthIndicator
-                          length={editableTitle.length}
-                          type="title"
-                        />
-                        <span className="text-sm text-muted-foreground">
-                          {editableTitle.length} Characters
-                        </span>
-                      </div>
-                      <div className="flex items-center">
-                        <CopyButton textToCopy={editableTitle} />
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          onClick={() => setIsEditingTitle(!isEditingTitle)}
-                          className="h-8 w-8"
-                        >
-                          {isEditingTitle ? (
-                            <Check className="h-4 w-4" />
-                          ) : (
-                            <Edit className="h-4 w-4" />
-                          )}
-                          <span className="sr-only">
-                            {isEditingTitle ? "Done editing" : "Edit"}
+                          <span className="text-sm text-muted-foreground">
+                            {editableTitle.length} Characters
                           </span>
-                        </Button>
+                        </div>
+                        <div className="flex items-center">
+                          <CopyButton textToCopy={editableTitle} />
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => setIsEditingTitle(!isEditingTitle)}
+                            className="h-8 w-8"
+                          >
+                            {isEditingTitle ? (
+                              <Check className="h-4 w-4" />
+                            ) : (
+                              <Edit className="h-4 w-4" />
+                            )}
+                            <span className="sr-only">
+                              {isEditingTitle ? "Done editing" : "Edit"}
+                            </span>
+                          </Button>
+                        </div>
                       </div>
-                    </div>
-                    <p className="text-sm text-muted-foreground mt-1 mb-2">
-                      The title of the page, ideally between 30 and 60
-                      characters.
-                    </p>
-                    {isEditingTitle ? (
-                      <Input
-                        value={editableTitle}
-                        onChange={(e) => setEditableTitle(e.target.value)}
-                        className="w-full"
-                        placeholder="Meta Title"
-                      />
-                    ) : (
-                      <p className="text-muted-foreground bg-muted p-3 rounded-md min-h-[40px] break-words">
-                        {editableTitle || "Not found"}
+                      <p className="text-sm text-muted-foreground mt-1 mb-2">
+                        The title of the page, ideally between 30 and 60
+                        characters.
                       </p>
-                    )}
-                  </div>
-                  <div>
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-2">
-                        <h3 className="font-semibold text-card-foreground">
-                          Meta Description
-                        </h3>
-                        <LengthIndicator
-                          length={editableDescription.length}
-                          type="description"
+                      {isEditingTitle ? (
+                        <Input
+                          value={editableTitle}
+                          onChange={(e) => setEditableTitle(e.target.value)}
+                          className="w-full"
+                          placeholder="Meta Title"
                         />
-                        <span className="text-sm text-muted-foreground">
-                          {editableDescription.length} Characters
-                        </span>
+                      ) : (
+                        <p className="text-muted-foreground bg-muted p-3 rounded-md min-h-[40px] break-words">
+                          {editableTitle || "Not found"}
+                        </p>
+                      )}
+                    </div>
+                    <div>
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                          <h3 className="font-semibold text-card-foreground">
+                            Meta Description
+                          </h3>
+                          <LengthIndicator
+                            length={editableDescription.length}
+                            type="description"
+                          />
+                          <span className="text-sm text-muted-foreground">
+                            {editableDescription.length} Characters
+                          </span>
+                        </div>
+                        <div className="flex items-center">
+                          <CopyButton textToCopy={editableDescription} />
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() =>
+                              setIsEditingDescription(!isEditingDescription)
+                            }
+                            className="h-8 w-8"
+                          >
+                            {isEditingDescription ? (
+                              <Check className="h-4 w-4" />
+                            ) : (
+                              <Edit className="h-4 w-4" />
+                            )}
+                            <span className="sr-only">
+                              {isEditingDescription ? "Done editing" : "Edit"}
+                            </span>
+                          </Button>
+                        </div>
                       </div>
-                      <div className="flex items-center">
-                        <CopyButton textToCopy={editableDescription} />
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          onClick={() =>
-                            setIsEditingDescription(!isEditingDescription)
+                      <p className="text-sm text-muted-foreground mt-1 mb-2">
+                        A brief summary of the page's content, ideally between
+                        120 and 158 characters.
+                      </p>
+                      {isEditingDescription ? (
+                        <Textarea
+                          value={editableDescription}
+                          onChange={(e) =>
+                            setEditableDescription(e.target.value)
                           }
-                          className="h-8 w-8"
-                        >
-                          {isEditingDescription ? (
-                            <Check className="h-4 w-4" />
-                          ) : (
-                            <Edit className="h-4 w-4" />
-                          )}
-                          <span className="sr-only">
-                            {isEditingDescription ? "Done editing" : "Edit"}
-                          </span>
-                        </Button>
-                      </div>
+                          className="w-full min-h-[100px]"
+                          placeholder="Meta Description"
+                        />
+                      ) : (
+                        <p className="text-muted-foreground bg-muted p-3 rounded-md min-h-[100px] break-words">
+                          {editableDescription || "Not found"}
+                        </p>
+                      )}
                     </div>
-                    <p className="text-sm text-muted-foreground mt-1 mb-2">
-                      A brief summary of the page's content, ideally between 120
-                      and 158 characters.
-                    </p>
-                    {isEditingDescription ? (
-                      <Textarea
-                        value={editableDescription}
-                        onChange={(e) =>
-                          setEditableDescription(e.target.value)
-                        }
-                        className="w-full min-h-[100px]"
-                        placeholder="Meta Description"
-                      />
-                    ) : (
-                      <p className="text-muted-foreground bg-muted p-3 rounded-md min-h-[100px] break-words">
-                        {editableDescription || "Not found"}
-                      </p>
-                    )}
                   </div>
                 </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          {metaData.headlines && metaData.headlines.length > 0 && (
-            <Card className="w-full shadow-lg rounded-lg">
-              <CardHeader>
-                <CardTitle className="text-xl text-card-foreground">
-                  Headlines Structure
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <HeadlineTree headlines={metaData.headlines} />
               </CardContent>
             </Card>
+          </TabsContent>
+
+          {metaData.headlines && metaData.headlines.length > 0 && (
+            <TabsContent value="headlines">
+              <Card className="w-full shadow-lg rounded-lg">
+                <CardContent className="p-6">
+                  <HeadlineTree headlines={metaData.headlines} />
+                </CardContent>
+              </Card>
+            </TabsContent>
           )}
-        </div>
+
+          {metaData.faq && metaData.faq.length > 0 && (
+            <TabsContent value="faq">
+              <Card className="w-full shadow-lg rounded-lg">
+                <CardContent className="p-6">
+                  <FaqDisplay faqs={metaData.faq} />
+                </CardContent>
+              </Card>
+            </TabsContent>
+          )}
+        </Tabs>
       )}
     </div>
   );
diff --git a/src/components/results-skeleton.tsx b/src/components/results-skeleton.tsx
index be67f32..4e27ee8 100644
--- a/src/components/results-skeleton.tsx
+++ b/src/components/results-skeleton.tsx
@@ -1,16 +1,18 @@
 "use client";
 
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 
 export function ResultsSkeleton() {
   return (
-    <div className="space-y-6">
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <Skeleton className="h-10 w-28 rounded-md" />
+        <Skeleton className="h-10 w-24 rounded-md" />
+        <Skeleton className="h-10 w-20 rounded-md" />
+      </div>
       <Card className="w-full shadow-lg rounded-lg">
-        <CardHeader>
-          <Skeleton className="h-6 w-48" />
-        </CardHeader>
-        <CardContent>
+        <CardContent className="p-6">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
             <div className="space-y-6">
               <div>
@@ -32,13 +34,6 @@ export function ResultsSkeleton() {
                 <Skeleton className="h-5 w-32 mb-2" />
                 <Skeleton className="aspect-video w-full rounded-md" />
               </div>
-              <div>
-                <Skeleton className="h-5 w-40 mb-3" />
-                <div className="space-y-2">
-                  <Skeleton className="h-10 w-full" />
-                  <Skeleton className="h-10 w-full" />
-                </div>
-              </div>
             </div>
             <div className="space-y-6">
               <div>
@@ -59,23 +54,6 @@ export function ResultsSkeleton() {
           </div>
         </CardContent>
       </Card>
-      <Card>
-        <CardHeader>
-          <Skeleton className="h-6 w-40" />
-        </CardHeader>
-        <CardContent>
-          <div className="border rounded-lg p-2 space-y-2">
-            <Skeleton className="h-8 w-full" />
-            <div className="ml-6">
-              <Skeleton className="h-8 w-[90%]" />
-            </div>
-            <div className="ml-6">
-              <Skeleton className="h-8 w-[90%]" />
-            </div>
-            <Skeleton className="h-8 w-full" />
-          </div>
-        </CardContent>
-      </Card>
     </div>
   );
 }
\ No newline at end of file