diff --git a/readme.md b/readme.md
index 9b108d6..9e9383c 100644
--- a/readme.md
+++ b/readme.md
@@ -2,7 +2,7 @@
 
 This is a web-based toolkit for viewing and working with ATProto data.
 
-[!WARNING] This is a work in progress and clearly not ready for use.
+>[!WARNING] This is a work in progress and clearly not ready for use.
 
 ## Development
 
@@ -10,4 +10,4 @@ This is a React project using the Vite bundler.
 ```bash
 pnpm install
 pnpm run dev
-```
\ No newline at end of file
+```
diff --git a/src/components/ui/loader.tsx b/src/components/ui/loader.tsx
new file mode 100644
index 0000000..a63e15f
--- /dev/null
+++ b/src/components/ui/loader.tsx
@@ -0,0 +1,18 @@
+import React from "preact/compat";
+
+const Loader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    keys: string[];
+  }
+>(({ className, ...props }, ref) => {
+  return (
+    <div ref={ref} className={className} {...props}>
+      <div className="flex justify-center items-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-gray-200"></div>
+      </div>
+    </div>
+  );
+});
+
+export { Loader };
diff --git a/src/routes/counter.lazy.tsx b/src/routes/counter.lazy.tsx
index c3507a1..a8539f5 100644
--- a/src/routes/counter.lazy.tsx
+++ b/src/routes/counter.lazy.tsx
@@ -10,6 +10,7 @@ import { Progress } from "@/components/ui/progress";
 import { Clock, TrendingUp, TriangleAlert } from "lucide-react";
 import AnimatedCounter from "@/components/animatedCounter";
 import ParticlesComponent from "@/components/particles";
+import { useDocumentTitle } from "@/hooks/useDocumentTitle";
 
 //const UPDATE_INTERVAL = 60000;
 const UPDATE_TIME = 60000;
@@ -39,6 +40,7 @@ interface StatsState {
 }
 
 export default function RouteComponent() {
+  useDocumentTitle("Counter | atp.tools");
   const [isConfettiActive, setIsConfettiActive] = useState(false);
   const [stats, setStats] = useState<StatsState>({
     hasConfettid: false,
diff --git a/src/routes/index.lazy.tsx b/src/routes/index.lazy.tsx
index 4487d78..0345638 100644
--- a/src/routes/index.lazy.tsx
+++ b/src/routes/index.lazy.tsx
@@ -1,4 +1,5 @@
 import { SmartSearchBar } from "@/components/smartSearchBar";
+import { useDocumentTitle } from "@/hooks/useDocumentTitle";
 import { createLazyFileRoute, Link } from "@tanstack/react-router";
 import { AtSign, Star } from "lucide-react";
 
@@ -7,6 +8,7 @@ export const Route = createLazyFileRoute("/")({
 });
 
 export default function Index() {
+  useDocumentTitle("atp.tools");
   return (
     <main className="min-h-screen relative max-w-[100vw]">
       <div className="container mx-auto px-4 py-16">
@@ -26,7 +28,7 @@ export default function Index() {
             <div className="flex flex-row gap-x-1 text-muted-foreground">
               <Star /> Try:
             </div>
-            <div className="md:flex md:flex-row space-y-1 md:space-x-1 md:space-y-0">
+            <div className="flex flex-col gap-1 md:flex-row">
               <Link href="/at:/danabra.mov" className="text-blue-500">
                 <div className="bg-muted text-muted-foreground rounded-full px-2">
                   at://danabra.mov