diff --git a/app/components/FileItem.tsx b/app/components/FileItem.tsx
index a72418d..907e335 100644
--- a/app/components/FileItem.tsx
+++ b/app/components/FileItem.tsx
@@ -3,6 +3,14 @@
 import { useState, useRef } from "react";
 import { getFileIcon, formatFileSize, formatDate, type FileType } from "../lib/helpers";
 import FileItemMenu from "./FileItemMenu";
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item";
 
 export type { FileType };
 
@@ -61,7 +69,7 @@ export default function FileItem({
     }
 
     clickCountRef.current += 1;
-    
+
     if (clickCountRef.current === 1) {
       clickTimeoutRef.current = setTimeout(() => {
         if (clickCountRef.current === 1) {
@@ -88,13 +96,13 @@ export default function FileItem({
     setTimeout(() => {
       touchHandledRef.current = false;
     }, 400);
-    
+
     const currentTime = new Date().getTime();
     const tapLength = currentTime - lastTapRef.current;
-    
+
     if (tapLength < 300 && tapLength > 0) {
       // Double tap detected
-     
+
       if (clickTimeoutRef.current) {
         clearTimeout(clickTimeoutRef.current);
         clickTimeoutRef.current = null;
@@ -112,18 +120,26 @@ export default function FileItem({
         clickTimeoutRef.current = null;
       }, 300);
     }
-    
+
     lastTapRef.current = currentTime;
   };
 
+  const secondaryLabel =
+    file.lastModified
+      ? formatDate(file.lastModified)
+      : file.type === "folder"
+        ? "Folder"
+        : file.size
+          ? formatFileSize(file.size)
+          : "File";
+
   if (view === "grid") {
     return (
-      <section
-        className={`group relative flex cursor-pointer select-none flex-col items-center justify-center rounded-lg border-2 p-2 transition-colors sm:p-4 ${isSelected
-            ? "border-primary bg-accent"
-            : "border-transparent bg-background hover:border-border hover:bg-muted"
-          }`}
-        style={{ touchAction: 'manipulation' }}
+      <Item
+        variant={isSelected ? "muted" : "outline"}
+        size="default"
+        className="relative h-full cursor-pointer select-none flex-col items-center justify-center gap-3 py-5 text-center hover:bg-muted"
+        style={{ touchAction: "manipulation" }}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         onClick={handleClick}
@@ -138,34 +154,42 @@ export default function FileItem({
         }}
       >
         {isHovered && (
-          <FileItemMenu
-            file={file}
-            position="top-right"
-            onRename={onRename}
-            onPreview={onPreview}
-            onDownload={onDownload}
-            onCopy={onCopy}
-            onMove={onMove}
-            onDelete={onDelete}
-            onShare={onShare}
-          />
+          <ItemActions className="absolute top-1.5 right-1.5 z-10">
+            <FileItemMenu
+              file={file}
+              position="top-right"
+              onRename={onRename}
+              onPreview={onPreview}
+              onDownload={onDownload}
+              onCopy={onCopy}
+              onMove={onMove}
+              onDelete={onDelete}
+              onShare={onShare}
+            />
+          </ItemActions>
         )}
-        <div className="mb-1 flex h-12 w-12 items-center justify-center sm:mb-2 sm:h-16 sm:w-16">
+        <ItemMedia className="mb-0 flex size-14 items-center justify-center rounded-2xl bg-muted sm:size-16">
           {getFileIcon(file.type, file.mimeType)}
-        </div>
-        <p className="max-w-full truncate text-center text-xs font-medium text-foreground sm:text-sm">
-          {file.name}
-        </p>
-      </section>
+        </ItemMedia>
+        <ItemContent className="w-full min-w-0 items-center gap-0.5">
+          <ItemTitle className="w-full justify-center truncate text-xs sm:text-sm">
+            {file.name}
+          </ItemTitle>
+          <ItemDescription className="line-clamp-1 w-full text-center text-xs">
+            {secondaryLabel}
+          </ItemDescription>
+        </ItemContent>
+      </Item>
     );
   }
 
   // List view
   return (
-    <section
-      className={`group flex cursor-pointer select-none items-center gap-2 border-b border-border px-2 py-2 transition-colors sm:gap-4 sm:px-4 sm:py-3 ${isSelected ? "bg-accent" : "bg-background hover:bg-muted"
-        }`}
-      style={{ touchAction: 'manipulation' }}
+    <Item
+      variant={isSelected ? "muted" : "outline"}
+      size="sm"
+      className="cursor-pointer select-none hover:bg-muted"
+      style={{ touchAction: "manipulation" }}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
       onClick={handleClick}
@@ -179,32 +203,39 @@ export default function FileItem({
         onContextMenu?.(file, event);
       }}
     >
-      <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center sm:h-10 sm:w-10">
+      <ItemMedia className="flex size-9 items-center justify-center rounded-xl bg-muted sm:size-10">
         {getFileIcon(file.type, file.mimeType)}
-      </div>
-      <div className="min-w-0 flex-1">
-        <p className="truncate text-xs font-medium text-foreground sm:text-sm">{file.name}</p>
-      </div>
-      <div className="hidden flex-shrink-0 text-xs text-muted-foreground sm:block sm:text-sm">
-        {file.lastModified && formatDate(file.lastModified)}
-      </div>
-      <div className="hidden flex-shrink-0 text-xs text-muted-foreground md:block md:text-sm">
-        {file.size && formatFileSize(file.size)}
-      </div>
+      </ItemMedia>
+
+      <ItemContent className="min-w-0 gap-0.5">
+        <ItemTitle className="w-full truncate">{file.name}</ItemTitle>
+        <ItemDescription className="line-clamp-1 text-xs">
+          {secondaryLabel}
+        </ItemDescription>
+      </ItemContent>
+
+      <ItemActions className="ml-auto hidden min-w-20 shrink-0 justify-end text-muted-foreground md:flex">
+        <span className="text-xs sm:text-sm">
+          {file.size ? formatFileSize(file.size) : file.type === "folder" ? "—" : ""}
+        </span>
+      </ItemActions>
+
       {isHovered && (
-        <FileItemMenu
-          file={file}
-          position="right"
-          onRename={onRename}
-          onPreview={onPreview}
-          onDownload={onDownload}
-          onCopy={onCopy}
-          onMove={onMove}
-          onDelete={onDelete}
-          onShare={onShare}
-        />
+        <ItemActions className="shrink-0">
+          <FileItemMenu
+            file={file}
+            position="right"
+            onRename={onRename}
+            onPreview={onPreview}
+            onDownload={onDownload}
+            onCopy={onCopy}
+            onMove={onMove}
+            onDelete={onDelete}
+            onShare={onShare}
+          />
+        </ItemActions>
       )}
-    </section>
+    </Item>
   );
 }
 
diff --git a/app/components/FileList.tsx b/app/components/FileList.tsx
index 8c58d55..014ac82 100644
--- a/app/components/FileList.tsx
+++ b/app/components/FileList.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import FileItem, { FileItemData } from "./FileItem";
 import Toolbar from "./shared/Toolbar";
 import EmptyState from "./shared/EmptyState";
+import { ItemGroup } from "@/components/ui/item";
 
 interface FileListProps {
   files: FileItemData[];
@@ -60,7 +61,7 @@ export default function FileList({
         {files.length === 0 ? (
           <EmptyState message="No files or folders" />
         ) : view === "grid" ? (
-          <div className="grid grid-cols-2 gap-2 p-2 sm:grid-cols-3 sm:gap-3 sm:p-4 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+          <ItemGroup className="grid grid-cols-2 gap-3 p-3 sm:grid-cols-3 sm:gap-3 sm:p-4 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
             {files.map((file) => (
               <FileItem
                 key={file.id}
@@ -79,9 +80,9 @@ export default function FileList({
                 onContextMenu={onFileContextMenu}
               />
             ))}
-          </div>
+          </ItemGroup>
         ) : (
-          <div className="divide-y divide-border">
+          <ItemGroup className="gap-1 p-2 sm:p-4" data-size="sm">
             {files.map((file) => (
               <FileItem
                 key={file.id}
@@ -100,7 +101,7 @@ export default function FileList({
                 onContextMenu={onFileContextMenu}
               />
             ))}
-          </div>
+          </ItemGroup>
         )}
       </section>
     </main>
diff --git a/app/components/shared/Toolbar.tsx b/app/components/shared/Toolbar.tsx
index 312e304..98c8935 100644
--- a/app/components/shared/Toolbar.tsx
+++ b/app/components/shared/Toolbar.tsx
@@ -18,8 +18,8 @@ export default function Toolbar({
   actions,
 }: ToolbarProps) {
   return (
-    <header className="flex items-center justify-between border-b border-border px-2 py-2 sm:px-4">
-      <nav className="flex items-center gap-1 sm:gap-2" aria-label="View options">
+    <header className="flex items-center justify-between border-b border-border px-3 py-2.5 sm:px-4">
+      <nav className="flex items-center gap-2" aria-label="View options">
         <ToggleGroup
           value={[view]}
           onValueChange={(groupValue) => {
@@ -33,15 +33,19 @@ export default function Toolbar({
           spacing={0}
         >
           <ToggleGroupItem value="list" aria-label="List view">
-            <List className="h-4 w-4 sm:h-5 sm:w-5" />
+            <List className="size-4" />
           </ToggleGroupItem>
           <ToggleGroupItem value="grid" aria-label="Grid view">
-            <LayoutGrid className="h-4 w-4 sm:h-5 sm:w-5" />
+            <LayoutGrid className="size-4" />
           </ToggleGroupItem>
         </ToggleGroup>
-        {actions && <div className="flex items-center gap-1 sm:gap-2">{actions}</div>}
+        {actions && <div className="flex items-center gap-2">{actions}</div>}
       </nav>
-      <div className="text-xs text-muted-foreground sm:text-sm" role="status" aria-live="polite">
+      <div
+        className="text-xs text-muted-foreground sm:text-sm"
+        role="status"
+        aria-live="polite"
+      >
         {itemCount} {itemCount === 1 ? "item" : "items"}
       </div>
     </header>
diff --git a/components/ui/item.tsx b/components/ui/item.tsx
new file mode 100644
index 0000000..0370c66
--- /dev/null
+++ b/components/ui/item.tsx
@@ -0,0 +1,201 @@
+import * as React from "react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+import { Separator } from "@/components/ui/separator"
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn(
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn("my-2", className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  "group/item flex w-full flex-wrap items-center rounded-2xl border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50",
+      },
+      size: {
+        default: "gap-3.5 px-4 py-3.5",
+        sm: "gap-3.5 px-3.5 py-3",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(itemVariants({ variant, size, className })),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "item",
+      variant,
+      size,
+    },
+  })
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 overflow-hidden rounded-xl group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-lg [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "line-clamp-2 text-left text-sm font-normal text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}