diff --git a/app/routes/_blog.blog.load-more-posts.tsx b/app/routes/_blog.blog.load-more-posts.tsx
index 23dd7ab..91467ce 100644
--- a/app/routes/_blog.blog.load-more-posts.tsx
+++ b/app/routes/_blog.blog.load-more-posts.tsx
@@ -69,5 +69,5 @@ export async function action({ request }: ActionFunctionArgs) {
       }
       break;
   }
-  return json({});
-}
+  
+}
\ No newline at end of file
diff --git a/app/services/types.ts b/app/services/types.ts
index 102728c..f4b8d43 100644
--- a/app/services/types.ts
+++ b/app/services/types.ts
@@ -1,7 +1,5 @@
-import type { LoaderFunction } from "@remix-run/server-runtime";
+import type { LoaderFunction, SerializeFrom } from "@remix-run/server-runtime";
 
-export type UwrapJSONLoaderData<T extends LoaderFunction> = Awaited<
-  ReturnType<Awaited<ReturnType<T>>["json"]>
->;
+export type UwrapJSONLoaderData<T extends LoaderFunction> = SerializeFrom<T>;
 
 export type UwrapLoaderData<T extends LoaderFunction> = Awaited<ReturnType<T>>;
diff --git a/app/services/utils.ts b/app/services/utils.ts
index 7ea8c2b..f75622a 100644
--- a/app/services/utils.ts
+++ b/app/services/utils.ts
@@ -31,13 +31,11 @@ export function safeRedirect(
  * @param {string} id The route id
  * @returns {JSON|undefined} The router data or undefined if not found
  */
-export function useMatchesData(
-  id: string
-): Record<string, unknown> | undefined {
+export function useMatchesData(id: string): unknown | undefined {
   const matchingRoutes = useMatches();
   const route = useMemo(
     () => matchingRoutes.find((route) => route.id === id),
-    [matchingRoutes, id]
+    [matchingRoutes, id],
   );
   return route?.data;
 }
diff --git a/app/ui/components/alert-dialog.tsx b/app/ui/components/alert-dialog.tsx
index a80c532..0b1919f 100644
--- a/app/ui/components/alert-dialog.tsx
+++ b/app/ui/components/alert-dialog.tsx
@@ -2,35 +2,24 @@
 
 import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import { cn } from "~/ui/utils";
 
 import { buttonVariants } from "~/ui/components/button";
+import { cn } from "~/ui/utils";
 
 const AlertDialog = AlertDialogPrimitive.Root;
 
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
-const AlertDialogPortal = ({
-  className,
-  children,
-  ...props
-}: AlertDialogPrimitive.AlertDialogPortalProps) => (
-  <AlertDialogPrimitive.Portal className={cn(className)} {...props}>
-    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
-      {children}
-    </div>
-  </AlertDialogPrimitive.Portal>
-);
-AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, children, ...props }, ref) => (
+>(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-opacity animate-in fade-in",
-      className
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
     )}
     {...props}
     ref={ref}
@@ -47,8 +36,8 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed z-50 grid w-full max-w-lg scale-100 gap-4 border bg-background p-6 opacity-100 shadow-lg animate-in fade-in-90 slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0 md:w-full",
-        className
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        className,
       )}
       {...props}
     />
@@ -63,7 +52,7 @@ const AlertDialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-2 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
@@ -77,7 +66,7 @@ const AlertDialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
@@ -121,6 +110,19 @@ const AlertDialogAction = React.forwardRef<
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
+const AlertDialogDestructiveAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants({ variant: "destructive" }), className)}
+    {...props}
+  />
+));
+AlertDialogDestructiveAction.displayName =
+  AlertDialogPrimitive.Action.displayName;
+
 const AlertDialogCancel = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
@@ -130,7 +132,7 @@ const AlertDialogCancel = React.forwardRef<
     className={cn(
       buttonVariants({ variant: "outline" }),
       "mt-2 sm:mt-0",
-      className
+      className,
     )}
     {...props}
   />
@@ -139,6 +141,8 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
   AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
   AlertDialogTrigger,
   AlertDialogContent,
   AlertDialogHeader,
@@ -147,4 +151,5 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
+  AlertDialogDestructiveAction,
 };
diff --git a/app/ui/components/command-bar.tsx b/app/ui/components/command-bar.tsx
index 22227e7..17b1b44 100644
--- a/app/ui/components/command-bar.tsx
+++ b/app/ui/components/command-bar.tsx
@@ -22,12 +22,18 @@ import {
   CommandSeparator,
 } from "~/ui/components/command";
 
-export const CommandBar = () => {
+export function CommandBar<
+  TData extends {
+    tags: Tag[];
+    authors: Author[];
+    posts: Post[]
+  },
+>() {
   const [open, setOpen] = useState(false);
   const commandRef = useRef<HTMLInputElement>(null);
   const navigate = useNavigate();
   const navigation = useNavigation();
-  const command = useFetcher();
+  const command = useFetcher<TData>();
   const [pages, setPages] = useState<string[]>([]);
   const page = pages[pages.length - 1];
   const [search, setSearch] = useState("");
diff --git a/app/ui/components/dialog.tsx b/app/ui/components/dialog.tsx
index 3781b43..f1b5cc6 100644
--- a/app/ui/components/dialog.tsx
+++ b/app/ui/components/dialog.tsx
@@ -3,24 +3,16 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
+
 import { cn } from "~/ui/utils";
 
 const Dialog = DialogPrimitive.Root;
 
 const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = ({
-  className,
-  children,
-  ...props
-}: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal className={cn(className)} {...props}>
-    <div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
-      {children}
-    </div>
-  </DialogPrimitive.Portal>
-);
-DialogPortal.displayName = DialogPrimitive.Portal.displayName;
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -29,8 +21,8 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
-      className
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
     )}
     {...props}
   />
@@ -46,8 +38,8 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
-        className
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        className,
       )}
       {...props}
     >
@@ -68,7 +60,7 @@ const DialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
@@ -82,7 +74,7 @@ const DialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
@@ -97,7 +89,7 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />
@@ -118,7 +110,10 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
+  DialogPortal,
+  DialogOverlay,
   DialogTrigger,
+  DialogClose,
   DialogContent,
   DialogHeader,
   DialogFooter,
diff --git a/app/ui/components/layout/navbar.tsx b/app/ui/components/layout/navbar.tsx
index 0837b2d..bf5339f 100644
--- a/app/ui/components/layout/navbar.tsx
+++ b/app/ui/components/layout/navbar.tsx
@@ -177,7 +177,7 @@ export const Navbar = ({
               <Menu className="size-6" />
             </Button>
           </SheetTrigger>
-          <SheetContent position="right" size={"xl"}>
+          <SheetContent side="right">
             <SheetHeader>
               <SheetTitle>{settings.title}</SheetTitle>
               <SheetDescription>{settings.description}</SheetDescription>
diff --git a/app/ui/components/posts/posts-list.tsx b/app/ui/components/posts/posts-list.tsx
index 51fad6e..d1df906 100644
--- a/app/ui/components/posts/posts-list.tsx
+++ b/app/ui/components/posts/posts-list.tsx
@@ -4,7 +4,8 @@ import { useFetcher } from "@remix-run/react";
 import { AuthenticityTokenInput } from "remix-utils/csrf/react";
 import { cn } from "~/ui/utils";
 
-import { Button } from "~/ui/components";;
+import { Button } from "~/ui/components";
+import { type SerializeFrom } from "@remix-run/server-runtime";
 
 export type PostsListProps = {
   posts: TPostPreview[];
@@ -14,6 +15,11 @@ export type PostsListProps = {
   className?: string;
 };
 
+export type TT = SerializeFrom<{
+  posts: TPostPreview[];
+  pagination?: { page: number; pages: number; next: number | null }
+}>
+
 export const PostsList = ({
   posts,
   pagination = { page: 1, pages: 1, next: null },
@@ -24,13 +30,13 @@ export const PostsList = ({
   const [page, setPage] = useState<number>(pagination.page);
   const [next, setNext] = useState<number | null>(pagination.next);
   const [morePosts, setMorePosts] = useState<TPostPreview[]>([]);
-  const paginate = useFetcher();
+  const paginate = useFetcher<TT>();
 
   useEffect(() => {
     if (paginate.state === "idle" && paginate.data && paginate.data.posts) {
-      setMorePosts((prev) => [...prev, ...paginate.data.posts]);
-      setPage(paginate.data.pagination.page);
-      setNext(paginate.data.pagination.next);
+      setMorePosts((prev) => [...prev, ...paginate.data?.posts ?? []]);
+      setPage(paginate.data.pagination?.page ?? 0);
+      setNext(paginate.data.pagination?.next ?? null);
     }
   }, [paginate.state, paginate.data]);
 
diff --git a/app/ui/components/sheet.tsx b/app/ui/components/sheet.tsx
index fe22365..9a2a5a6 100644
--- a/app/ui/components/sheet.tsx
+++ b/app/ui/components/sheet.tsx
@@ -4,48 +4,25 @@ import * as React from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
+
 import { cn } from "~/ui/utils";
 
 const Sheet = SheetPrimitive.Root;
 
 const SheetTrigger = SheetPrimitive.Trigger;
 
-const portalVariants = cva("fixed inset-0 z-50 flex", {
-  variants: {
-    position: {
-      top: "items-start",
-      bottom: "items-end",
-      left: "justify-start",
-      right: "justify-end",
-    },
-  },
-  defaultVariants: { position: "right" },
-});
+const SheetClose = SheetPrimitive.Close;
 
-interface SheetPortalProps
-  extends SheetPrimitive.DialogPortalProps,
-    VariantProps<typeof portalVariants> {}
-
-const SheetPortal = ({
-  position,
-  className,
-  children,
-  ...props
-}: SheetPortalProps) => (
-  <SheetPrimitive.Portal className={cn(className)} {...props}>
-    <div className={portalVariants({ position })}>{children}</div>
-  </SheetPrimitive.Portal>
-);
-SheetPortal.displayName = SheetPrimitive.Portal.displayName;
+const SheetPortal = SheetPrimitive.Portal;
 
 const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, children, ...props }, ref) => (
+>(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
-      className
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
     )}
     {...props}
     ref={ref}
@@ -54,106 +31,37 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-50 scale-100 gap-4 border bg-background p-6 opacity-100 shadow-lg",
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
   {
     variants: {
-      position: {
-        top: "w-full duration-300 animate-in slide-in-from-top",
-        bottom: "w-full duration-300 animate-in slide-in-from-bottom",
-        left: "h-full duration-300 animate-in slide-in-from-left",
-        right: "h-full duration-300 animate-in slide-in-from-right",
-      },
-      size: {
-        content: "",
-        default: "",
-        sm: "",
-        lg: "",
-        xl: "",
-        full: "",
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
       },
     },
-    compoundVariants: [
-      {
-        position: ["top", "bottom"],
-        size: "content",
-        class: "max-h-screen",
-      },
-      {
-        position: ["top", "bottom"],
-        size: "default",
-        class: "h-1/3",
-      },
-      {
-        position: ["top", "bottom"],
-        size: "sm",
-        class: "h-1/4",
-      },
-      {
-        position: ["top", "bottom"],
-        size: "lg",
-        class: "h-1/2",
-      },
-      {
-        position: ["top", "bottom"],
-        size: "xl",
-        class: "h-5/6",
-      },
-      {
-        position: ["top", "bottom"],
-        size: "full",
-        class: "h-screen",
-      },
-      {
-        position: ["right", "left"],
-        size: "content",
-        class: "max-w-screen",
-      },
-      {
-        position: ["right", "left"],
-        size: "default",
-        class: "w-1/3",
-      },
-      {
-        position: ["right", "left"],
-        size: "sm",
-        class: "w-1/4",
-      },
-      {
-        position: ["right", "left"],
-        size: "lg",
-        class: "w-1/2",
-      },
-      {
-        position: ["right", "left"],
-        size: "xl",
-        class: "w-5/6",
-      },
-      {
-        position: ["right", "left"],
-        size: "full",
-        class: "w-screen",
-      },
-    ],
     defaultVariants: {
-      position: "right",
-      size: "default",
+      side: "right",
     },
-  }
+  },
 );
 
-export interface DialogContentProps
+interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
     VariantProps<typeof sheetVariants> {}
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
-  DialogContentProps
->(({ position, size, className, children, ...props }, ref) => (
-  <SheetPortal position={position}>
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
     <SheetOverlay />
     <SheetPrimitive.Content
       ref={ref}
-      className={cn(sheetVariants({ position, size }), className)}
+      className={cn(sheetVariants({ side }), className)}
       {...props}
     >
       {children}
@@ -173,7 +81,7 @@ const SheetHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-2 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
@@ -187,7 +95,7 @@ const SheetFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
@@ -220,7 +128,10 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
   Sheet,
+  SheetPortal,
+  SheetOverlay,
   SheetTrigger,
+  SheetClose,
   SheetContent,
   SheetHeader,
   SheetFooter,