diff --git a/components/LatestScripts.tsx b/components/LatestScripts.tsx
deleted file mode 100644
index 3681c1c..0000000
--- a/components/LatestScripts.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { useMemo, useState } from "react";
-import { Category } from "@/lib/types";
-import Link from "next/link";
-import Image from "next/image";
-import { Button } from "./ui/button";
-import { extractDate } from "@/lib/time";
-
-const ITEMS_PER_PAGE = 3;
-
-function LatestScripts({ items }: { items: Category[] }) {
-  const [page, setPage] = useState(1);
-
-  const latestScripts = useMemo(() => {
-    if (!items) return [];
-    const scripts = items.flatMap((category) => category.expand.items || []);
-    return scripts.sort(
-      (a, b) => new Date(b.created).getTime() - new Date(a.created).getTime(),
-    );
-  }, [items]);
-
-  const goToNextPage = () => {
-    setPage((prevPage) => prevPage + 1);
-  };
-
-  const goToPreviousPage = () => {
-    setPage((prevPage) => prevPage - 1);
-  };
-
-  const startIndex = (page - 1) * ITEMS_PER_PAGE;
-  const endIndex = page * ITEMS_PER_PAGE;
-
-  if (!items) {
-    return null;
-  }
-
-  return (
-    <div className="">
-      {latestScripts.length > 0 && (
-        <div className="flex w-full items-center justify-between">
-          <h2 className="text-lg font-semibold">Newest Scripts</h2>
-          <div className="flex items-center justify-end gap-1">
-            {page > 1 && (
-              <div
-                className="cursor-pointer select-none p-2 text-sm font-semibold"
-                onClick={goToPreviousPage}
-              >
-                Previous
-              </div>
-            )}
-            {endIndex < latestScripts.length && (
-              <div
-                onClick={goToNextPage}
-                className=" cursor-pointer select-none p-2 text-sm font-semibold"
-              >
-                {page === 1 ? "More.." : "Next"}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-      <div className="min-w flex w-full flex-row flex-wrap gap-4">
-        {latestScripts.slice(startIndex, endIndex).map((item) => (
-          <Card
-            key={item.id}
-            className=" min-w-[250px] flex-1 flex-grow bg-accent/30"
-          >
-            <CardHeader>
-              <CardTitle className="flex items-center gap-3">
-                <div className="flex max-h-16 min-h-16 min-w-16 max-w-16 items-center justify-center rounded-lg bg-accent p-1">
-                  <Image src={item.logo} height={40} width={40} alt="" />
-                </div>
-                <h3 className="text-xl">
-                  {item.title} {item.item_type}
-                </h3>
-              </CardTitle>
-              <p className="text-sm text-muted-foreground">
-                Date added: {extractDate(item.created)}
-              </p>
-            </CardHeader>
-            <CardContent>
-              <CardDescription className="line-clamp-3 text-card-foreground">
-                {item.description}
-              </CardDescription>
-            </CardContent>
-            <CardFooter className="">
-              <Button asChild variant="secondary">
-                <Link
-                  href={{
-                    pathname: "/scripts",
-                    query: { id: item.title },
-                  }}
-                  className="text-muted-foreground"
-                >
-                  View Script
-                </Link>
-              </Button>
-            </CardFooter>
-          </Card>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export default LatestScripts;
diff --git a/components/MostViewedScripts.tsx b/components/MostViewedScripts.tsx
deleted file mode 100644
index c42f4e3..0000000
--- a/components/MostViewedScripts.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { useState, useMemo } from "react";
-import { Category } from "@/lib/types";
-import Link from "next/link";
-import Image from "next/image";
-import { Button } from "./ui/button";
-import { extractDate } from "@/lib/time";
-
-const ITEMS_PER_PAGE = 3;
-
-export default function MostViewedScripts({ items }: { items: Category[] }) {
-  const [page, setPage] = useState(1);
-
-  const mostViewedScripts = useMemo(() => {
-    if (!items) return [];
-    const scripts = items.flatMap((category) => category.expand.items || []);
-    const mostViewedScripts = scripts
-      .filter((script) => script.isMostViewed)
-      .map((script) => ({
-        ...script,
-      }))
-      .sort((a, b) => a.mostViewedPosition - b.mostViewedPosition);
-    return mostViewedScripts;
-  }, [items]);
-
-  const goToNextPage = () => {
-    setPage((prevPage) => prevPage + 1);
-  };
-
-  const goToPreviousPage = () => {
-    setPage((prevPage) => prevPage - 1);
-  };
-
-  const startIndex = (page - 1) * ITEMS_PER_PAGE;
-  const endIndex = page * ITEMS_PER_PAGE;
-
-  return (
-    <div className="">
-      {mostViewedScripts.length > 0 && (
-        <>
-          <h2 className="text-lg font-semibold">Most Viewed Scripts</h2>
-          <p className="mb-2 text-sm text-muted-foreground">
-            This data, unfortunately, is not directly influenced by interacting
-            with the website. (yet)
-          </p>
-        </>
-      )}
-      <div className="min-w flex w-full flex-row flex-wrap gap-4">
-        {mostViewedScripts.slice(startIndex, endIndex).map((item) => (
-          <Card
-            key={item.id}
-            className=" min-w-[250px] flex-1 flex-grow bg-accent/30"
-          >
-            <CardHeader>
-              <CardTitle className="flex items-center gap-3">
-                <div className="flex max-h-16 min-h-16 min-w-16 max-w-16 items-center justify-center rounded-lg bg-accent p-1">
-                  <Image src={item.logo} height={40} width={40} alt="" />
-                </div>
-                <h3 className="text-xl">
-                  {item.title} {item.item_type}
-                </h3>
-              </CardTitle>
-              <p className="text-sm text-muted-foreground">
-                Date added: {extractDate(item.created)}
-              </p>
-            </CardHeader>
-            <CardContent>
-              <CardDescription className="line-clamp-3 text-card-foreground">
-                {item.description}
-              </CardDescription>
-            </CardContent>
-            <CardFooter className="">
-              <Button asChild variant="secondary">
-                <Link
-                  href={{
-                    pathname: "/scripts",
-                    query: { id: item.title },
-                  }}
-                  className="text-muted-foreground"
-                >
-                  View Script
-                </Link>
-              </Button>
-            </CardFooter>
-          </Card>
-        ))}
-      </div>
-      <div className="flex justify-end gap-1 p-2">
-        {page > 1 && (
-          <Button onClick={goToPreviousPage} variant="outline">
-            Previous
-          </Button>
-        )}
-        {endIndex < mostViewedScripts.length && (
-          <Button onClick={goToNextPage} variant="outline">
-            {page === 1 ? "More.." : "Next"}
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/components/RecentlyUpdatedScripts.tsx b/components/RecentlyUpdatedScripts.tsx
deleted file mode 100644
index c9f687d..0000000
--- a/components/RecentlyUpdatedScripts.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { useState, useMemo } from "react";
-import { Category } from "@/lib/types";
-import Link from "next/link";
-import Image from "next/image";
-import { Button } from "./ui/button";
-
-const ITEMS_PER_PAGE = 3;
-
-export default function RecentlyUpdatedScripts({
-  items,
-}: {
-  items: Category[];
-}) {
-  const [page, setPage] = useState(1);
-
-  const updatedScripts = useMemo(() => {
-    if (!items) return [];
-    const scripts = items.flatMap((category) => category.expand.items || []);
-    const updatedScripts = scripts.map((script) => ({
-      ...script,
-      updated: new Date(script.updated),
-    }));
-    return updatedScripts.sort(
-      (a, b) => b.updated.getTime() - a.updated.getTime(),
-    );
-  }, [items]);
-
-  const goToNextPage = () => {
-    setPage((prevPage) => prevPage + 1);
-  };
-
-  const goToPreviousPage = () => {
-    setPage((prevPage) => prevPage - 1);
-  };
-
-  const startIndex = (page - 1) * ITEMS_PER_PAGE;
-  const endIndex = page * ITEMS_PER_PAGE;
-
-  return (
-    <div className="">
-      {updatedScripts.length > 0 && (
-        <div className="flex w-full items-center justify-between">
-          <h2 className="mb-2 text-lg font-semibold">
-            Recently Updated Scripts
-          </h2>
-          <div className="flex items-center justify-end gap-1">
-            {page > 1 && (
-              <div
-                className="cursor-pointer select-none p-2 text-sm font-semibold"
-                onClick={goToPreviousPage}
-              >
-                Previous
-              </div>
-            )}
-            {endIndex < updatedScripts.length && (
-              <div
-                onClick={goToNextPage}
-                className=" cursor-pointer select-none p-2 text-sm font-semibold"
-              >
-                {page === 1 ? "More.." : "Next"}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-      <div className="min-w flex w-full flex-row flex-wrap gap-4">
-        {updatedScripts.slice(startIndex, endIndex).map((item) => (
-          <Card
-            key={item.id}
-            className=" min-w-[250px] flex-1 flex-grow bg-accent/30"
-          >
-            <CardHeader>
-              <CardTitle className="flex items-center gap-3">
-                <div className="flex max-h-16 min-h-16 min-w-16 max-w-16 items-center justify-center rounded-lg bg-accent p-1">
-                  <Image src={item.logo} height={40} width={40} alt="" />
-                </div>
-                <h3 className="text-xl">
-                  {item.title} {item.item_type}
-                </h3>
-              </CardTitle>
-              <p className="text-sm text-muted-foreground">
-                Last updated: {item.updated.toISOString().split("T")[0]}
-              </p>
-            </CardHeader>
-            <CardContent>
-              <CardDescription className="line-clamp-3 text-card-foreground">
-                {item.description}
-              </CardDescription>
-            </CardContent>
-            <CardFooter className="">
-              <Button asChild variant="secondary">
-                <Link
-                  href={{
-                    pathname: "/scripts",
-                    query: { id: item.title },
-                  }}
-                  className="text-muted-foreground"
-                >
-                  View Script
-                </Link>
-              </Button>
-            </CardFooter>
-          </Card>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/components/ScriptInfoBlocks.tsx b/components/ScriptInfoBlocks.tsx
new file mode 100644
index 0000000..1a7a50a
--- /dev/null
+++ b/components/ScriptInfoBlocks.tsx
@@ -0,0 +1,299 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { useMemo, useState } from "react";
+import { Category } from "@/lib/types";
+import Link from "next/link";
+import Image from "next/image";
+import { Button } from "./ui/button";
+import { extractDate } from "@/lib/time";
+
+const ITEMS_PER_PAGE = 3;
+
+export function LatestScripts({ items }: { items: Category[] }) {
+  const [page, setPage] = useState(1);
+
+  const latestScripts = useMemo(() => {
+    if (!items) return [];
+    const scripts = items.flatMap((category) => category.expand.items || []);
+    return scripts.sort(
+      (a, b) => new Date(b.created).getTime() - new Date(a.created).getTime(),
+    );
+  }, [items]);
+
+  const goToNextPage = () => {
+    setPage((prevPage) => prevPage + 1);
+  };
+
+  const goToPreviousPage = () => {
+    setPage((prevPage) => prevPage - 1);
+  };
+
+  const startIndex = (page - 1) * ITEMS_PER_PAGE;
+  const endIndex = page * ITEMS_PER_PAGE;
+
+  if (!items) {
+    return null;
+  }
+
+  return (
+    <div className="">
+      {latestScripts.length > 0 && (
+        <div className="flex w-full items-center justify-between">
+          <h2 className="text-lg font-semibold">Newest Scripts</h2>
+          <div className="flex items-center justify-end gap-1">
+            {page > 1 && (
+              <div
+                className="cursor-pointer select-none p-2 text-sm font-semibold"
+                onClick={goToPreviousPage}
+              >
+                Previous
+              </div>
+            )}
+            {endIndex < latestScripts.length && (
+              <div
+                onClick={goToNextPage}
+                className=" cursor-pointer select-none p-2 text-sm font-semibold"
+              >
+                {page === 1 ? "More.." : "Next"}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+      <div className="min-w flex w-full flex-row flex-wrap gap-4">
+        {latestScripts.slice(startIndex, endIndex).map((item) => (
+          <Card
+            key={item.id}
+            className=" min-w-[250px] flex-1 flex-grow bg-accent/30"
+          >
+            <CardHeader>
+              <CardTitle className="flex items-center gap-3">
+                <div className="flex max-h-16 min-h-16 min-w-16 max-w-16 items-center justify-center rounded-lg bg-accent p-1">
+                  <Image src={item.logo} height={40} width={40} alt="" />
+                </div>
+                <h3 className="text-xl">
+                  {item.title} {item.item_type}
+                </h3>
+              </CardTitle>
+              <p className="text-sm text-muted-foreground">
+                Date added: {extractDate(item.created)}
+              </p>
+            </CardHeader>
+            <CardContent>
+              <CardDescription className=" line-clamp-3 text-card-foreground">{item.description}</CardDescription>
+            </CardContent>
+            <CardFooter className="">
+              <Button asChild variant="secondary">
+                <Link
+                  href={{
+                    pathname: "/scripts",
+                    query: { id: item.title },
+                  }}
+                  className="text-muted-foreground"
+                >
+                  View Script
+                </Link>
+              </Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function MostViewedScripts({ items }: { items: Category[] }) {
+  const [page, setPage] = useState(1);
+
+  const mostViewedScripts = useMemo(() => {
+    if (!items) return [];
+    const scripts = items.flatMap((category) => category.expand.items || []);
+    const mostViewedScripts = scripts
+      .filter((script) => script.isMostViewed)
+      .map((script) => ({
+        ...script,
+      }))
+      .sort((a, b) => a.mostViewedPosition - b.mostViewedPosition);
+    return mostViewedScripts;
+  }, [items]);
+
+  const goToNextPage = () => {
+    setPage((prevPage) => prevPage + 1);
+  };
+
+  const goToPreviousPage = () => {
+    setPage((prevPage) => prevPage - 1);
+  };
+
+  const startIndex = (page - 1) * ITEMS_PER_PAGE;
+  const endIndex = page * ITEMS_PER_PAGE;
+
+  return (
+    <div className="">
+      {mostViewedScripts.length > 0 && (
+        <>
+          <h2 className="text-lg font-semibold">Most Viewed Scripts</h2>
+          <p className="mb-2 text-sm text-muted-foreground">
+            This data, unfortunately, is not directly influenced by interacting
+            with the website. (yet)
+          </p>
+        </>
+      )}
+      <div className="min-w flex w-full flex-row flex-wrap gap-4">
+        {mostViewedScripts.slice(startIndex, endIndex).map((item) => (
+          <Card
+            key={item.id}
+            className=" min-w-[250px] flex-1 flex-grow bg-accent/30"
+          >
+            <CardHeader>
+              <CardTitle className="flex items-center gap-3">
+                <div className="flex max-h-16 min-h-16 min-w-16 max-w-16 items-center justify-center rounded-lg bg-accent p-1">
+                  <Image src={item.logo} height={40} width={40} alt="" />
+                </div>
+                <h3 className="text-xl">
+                  {item.title} {item.item_type}
+                </h3>
+              </CardTitle>
+              <p className="text-sm text-muted-foreground">
+                Date added: {extractDate(item.created)}
+              </p>
+            </CardHeader>
+            <CardContent>
+              <CardDescription className=" line-clamp-3 text-card-foreground">{item.description}</CardDescription>
+            </CardContent>
+            <CardFooter className="">
+              <Button asChild variant="secondary">
+                <Link
+                  href={{
+                    pathname: "/scripts",
+                    query: { id: item.title },
+                  }}
+                  className="text-muted-foreground"
+                >
+                  View Script
+                </Link>
+              </Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+      <div className="flex justify-end gap-1 p-2">
+        {page > 1 && (
+          <Button onClick={goToPreviousPage} variant="outline">
+            Previous
+          </Button>
+        )}
+        {endIndex < mostViewedScripts.length && (
+          <Button onClick={goToNextPage} variant="outline">
+            {page === 1 ? "More.." : "Next"}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function RecentlyUpdatedScripts({
+  items,
+}: {
+  items: Category[];
+}) {
+  const [page, setPage] = useState(1);
+
+  const updatedScripts = useMemo(() => {
+    if (!items) return [];
+    const scripts = items.flatMap((category) => category.expand.items || []);
+    const updatedScripts = scripts.map((script) => ({
+      ...script,
+      updated: new Date(script.updated),
+    }));
+    return updatedScripts.sort(
+      (a, b) => b.updated.getTime() - a.updated.getTime(),
+    );
+  }, [items]);
+
+  const goToNextPage = () => {
+    setPage((prevPage) => prevPage + 1);
+  };
+
+  const goToPreviousPage = () => {
+    setPage((prevPage) => prevPage - 1);
+  };
+
+  const startIndex = (page - 1) * ITEMS_PER_PAGE;
+  const endIndex = page * ITEMS_PER_PAGE;
+
+  return (
+    <div className="">
+      {updatedScripts.length > 0 && (
+        <div className="flex w-full items-center justify-between">
+          <h2 className="mb-2 text-lg font-semibold">
+            Recently Updated Scripts
+          </h2>
+          <div className="flex items-center justify-end gap-1">
+            {page > 1 && (
+              <div
+                className="cursor-pointer select-none p-2 text-sm font-semibold"
+                onClick={goToPreviousPage}
+              >
+                Previous
+              </div>
+            )}
+            {endIndex < updatedScripts.length && (
+              <div
+                onClick={goToNextPage}
+                className=" cursor-pointer select-none p-2 text-sm font-semibold"
+              >
+                {page === 1 ? "More.." : "Next"}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+      <div className="min-w flex w-full flex-row flex-wrap gap-4">
+        {updatedScripts.slice(startIndex, endIndex).map((item) => (
+          <Card
+            key={item.id}
+            className=" min-w-[250px] flex-1 flex-grow bg-accent/30"
+          >
+            <CardHeader>
+              <CardTitle className="flex items-center gap-3">
+                <div className="flex max-h-16 min-h-16 min-w-16 max-w-16 items-center justify-center rounded-lg bg-accent p-1">
+                  <Image src={item.logo} height={40} width={40} alt="" />
+                </div>
+                <h3 className="text-xl">
+                  {item.title} {item.item_type}
+                </h3>
+              </CardTitle>
+              <p className="text-sm text-muted-foreground">
+                Last updated: {item.updated.toISOString().split("T")[0]}
+              </p>
+            </CardHeader>
+            <CardContent>
+              <CardDescription className=" line-clamp-3 text-card-foreground">{item.description}</CardDescription>
+            </CardContent>
+            <CardFooter className="">
+              <Button asChild variant="secondary">
+                <Link
+                  href={{
+                    pathname: "/scripts",
+                    query: { id: item.title },
+                  }}
+                  className="text-muted-foreground"
+                >
+                  View Script
+                </Link>
+              </Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/ScriptItem.tsx b/components/ScriptItem.tsx
index 7774026..1467c1c 100644
--- a/components/ScriptItem.tsx
+++ b/components/ScriptItem.tsx
@@ -19,9 +19,7 @@ import Link from "next/link";
 import { Category, Script } from "@/lib/types";
 import { useSearchParams } from "next/navigation";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import LatestScripts from "./LatestScripts";
-import MostViewedScripts from "./MostViewedScripts";
-import RecentlyUpdatedScripts from "./RecentlyUpdatedScripts";
+import { MostViewedScripts, LatestScripts, RecentlyUpdatedScripts } from "@/components/ScriptInfoBlocks"
 
 function ScriptItem({
   items,
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index 5e2f29d..1c6bc27 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -23,7 +23,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn("flex flex-col space-y-1.5 p-4", className)}
     {...props}
   />
 ));
@@ -63,7 +63,7 @@ const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  <div ref={ref} className={cn("p-4 pt-0", className)} {...props} />
 ));
 CardContent.displayName = "CardContent";
 
@@ -73,7 +73,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("mt-auto items-center p-6 pt-0", className)}
+    className={cn("mt-auto items-center p-4 pt-0", className)}
     {...props}
   />
 ));