diff --git a/index.html b/index.html
index e4b78ea..53b3037 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,16 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + React + TS</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/components/video.tsx b/src/components/video.tsx
index 55e8f45..ff17eba 100644
--- a/src/components/video.tsx
+++ b/src/components/video.tsx
@@ -1,4 +1,11 @@
-import { Avatar, Card, CardBody, CardHeader, Link } from "@nextui-org/react";
+import {
+  Avatar,
+  Card,
+  CardBody,
+  CardHeader,
+  Link,
+  Skeleton,
+} from "@nextui-org/react";
 import { Video } from "piped-api/dist/types";
 import { useNavigate } from "react-router-dom";
 import { CheckCircleIcon, EyeIcon } from "@heroicons/react/24/solid";
@@ -23,7 +30,7 @@ export function VideoComponent({ video }: VideoComponentProps) {
             {video.title}
           </Link>
           <Link color="foreground" href={`#${video.uploaderUrl}`}>
-            <div className="flex flex-row items-center">
+            <div className="flex flex-row items-center break-all">
               <p className="flex-none text-md">{video.uploaderName}</p>
               {video.uploaderVerified && (
                 <CheckCircleIcon className="w-6 h-6 p-1" />
@@ -42,6 +49,19 @@ export function VideoComponent({ video }: VideoComponentProps) {
   );
 }
 
+export function SkeletonVideoComponent() {
+  return (
+    <Card isBlurred isPressable shadow="none" className="space-y-5 p-4">
+      <Skeleton className="rounded-lg">
+        <div className="rounded-lg h-56 bg-default-300 p-4"></div>
+      </Skeleton>
+      <CardBody className="flex gap-3 flex-row">
+        <Skeleton className="flex rounded-full w-12 h-12" />
+      </CardBody>
+    </Card>
+  );
+}
+
 type VideoComponentProps = {
   video: Video;
 };
diff --git a/src/index.css b/src/index.css
index b5c61c9..27ed007 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  body {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='%23f1f5f9'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
+    @apply bg-gray-200;
+  }
+}
diff --git a/src/pages/trending.tsx b/src/pages/trending.tsx
index f26443a..2e00043 100644
--- a/src/pages/trending.tsx
+++ b/src/pages/trending.tsx
@@ -1,6 +1,6 @@
 import { Video } from "piped-api/dist/types";
 import { useEffect, useState } from "react";
-import { VideoComponent } from "../components/video";
+import { SkeletonVideoComponent, VideoComponent } from "../components/video";
 
 export default function Trending() {
   const [trending, setTrending] = useState([] as Video[]);
@@ -16,6 +16,16 @@ export default function Trending() {
     }
   });
 
+  if (trending.length === 0) {
+    return (
+      <div className="grid md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 gap-2 p-4">
+        {[...Array(20).keys()].map((num) => (
+          <SkeletonVideoComponent key={num} />
+        ))}
+      </div>
+    );
+  }
+
   return (
     <div className="grid md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 gap-2 p-4">
       {trending.map((video) => (
