From a012b850dcfacc2cd6fc154c75ef3cd5c3f42426 Mon Sep 17 00:00:00 2001
From: Precious Oritsedere <rukyjacob@gmail.com>
Date: Mon, 10 Nov 2025 16:24:38 +0000
Subject: [PATCH] feat: build login flow, with oidc issuer integration,
 refactor codebase architecture

---
 .gitignore                               |   1 +
 app/components/AuthWrapper.tsx           | 107 ++++++++++++++
 app/components/Breadcrumb.tsx            |  37 +----
 app/components/FileItem.tsx              | 136 +++--------------
 app/components/FileList.tsx              |  81 ++--------
 app/components/Header.tsx                | 167 +++++++++------------
 app/components/LoginPage.tsx             | 141 ++++++++++++++++++
 app/components/PermissionsDialog.tsx     | 113 ++++----------
 app/components/Sidebar.tsx               |  43 ++----
 app/components/shared/Button.tsx         |  58 ++++++++
 app/components/shared/EmptyState.tsx     |  48 ++++++
 app/components/shared/ErrorDisplay.tsx   |  40 +++++
 app/components/shared/Input.tsx          |  85 +++++++++++
 app/components/shared/LoadingSpinner.tsx |  39 +++++
 app/components/shared/Modal.tsx          | 101 +++++++++++++
 app/components/shared/Toolbar.tsx        |  59 ++++++++
 app/globals.css                          |  10 +-
 app/lib/helpers/dateUtils.ts             |  23 +++
 app/lib/helpers/fileIcons.tsx            |  31 ++++
 app/lib/helpers/fileUtils.ts             |  17 +++
 app/lib/helpers/index.ts                 |   9 ++
 app/lib/hooks/index.ts                   |  14 ++
 app/page.tsx                             |  77 +++++-----
 package-lock.json                        | 181 +++++++++++++++++++++++
 package.json                             |  14 +-
 public/solid.svg                         |   9 ++
 26 files changed, 1158 insertions(+), 483 deletions(-)
 create mode 100644 app/components/AuthWrapper.tsx
 create mode 100644 app/components/LoginPage.tsx
 create mode 100644 app/components/shared/Button.tsx
 create mode 100644 app/components/shared/EmptyState.tsx
 create mode 100644 app/components/shared/ErrorDisplay.tsx
 create mode 100644 app/components/shared/Input.tsx
 create mode 100644 app/components/shared/LoadingSpinner.tsx
 create mode 100644 app/components/shared/Modal.tsx
 create mode 100644 app/components/shared/Toolbar.tsx
 create mode 100644 app/lib/helpers/dateUtils.ts
 create mode 100644 app/lib/helpers/fileIcons.tsx
 create mode 100644 app/lib/helpers/fileUtils.ts
 create mode 100644 app/lib/helpers/index.ts
 create mode 100644 app/lib/hooks/index.ts
 create mode 100644 public/solid.svg

diff --git a/.gitignore b/.gitignore
index 5ef6a52..cd86a91 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,3 +39,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+.history
diff --git a/app/components/AuthWrapper.tsx b/app/components/AuthWrapper.tsx
new file mode 100644
index 0000000..70856a1
--- /dev/null
+++ b/app/components/AuthWrapper.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  getDefaultSession,
+  handleIncomingRedirect,
+} from "@inrupt/solid-client-authn-browser";
+import LoginPage from "./LoginPage";
+import LoadingSpinner from "./shared/LoadingSpinner";
+import ErrorDisplay from "./shared/ErrorDisplay";
+
+interface AuthWrapperProps {
+  children: React.ReactNode;
+}
+
+export default function AuthWrapper({ children }: AuthWrapperProps) {
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
+  const [isChecking, setIsChecking] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    async function checkAuth() {
+      try {
+        setError(null);
+        await handleIncomingRedirect();
+        const session = getDefaultSession();
+        setIsAuthenticated(session.info.isLoggedIn);
+      } catch (err) {
+        console.error("Auth check failed:", err);
+        const errorMessage =
+          err instanceof Error ? err : new Error("Authentication check failed");
+        setError(errorMessage);
+        setIsAuthenticated(false);
+      } finally {
+        setIsChecking(false);
+      }
+    }
+
+    checkAuth();
+  }, []);
+
+  // Re-check authentication state periodically in case user logs in from another tab
+  useEffect(() => {
+    if (!isAuthenticated && !error) {
+      const interval = setInterval(async () => {
+        try {
+          await handleIncomingRedirect();
+          const session = getDefaultSession();
+          if (session.info.isLoggedIn) {
+            setIsAuthenticated(true);
+            setError(null);
+          }
+        } catch (err) {
+          console.error("Auth polling failed:", err);
+        }
+      }, 1000);
+
+      return () => clearInterval(interval);
+    }
+  }, [isAuthenticated, error]);
+
+  const handleRetry = () => {
+    setError(null);
+    setIsChecking(true);
+    setIsAuthenticated(null);
+    // Trigger re-check
+    handleIncomingRedirect()
+      .then(() => {
+        const session = getDefaultSession();
+        setIsAuthenticated(session.info.isLoggedIn);
+      })
+      .catch((err) => {
+        const errorMessage =
+          err instanceof Error ? err : new Error("Authentication check failed");
+        setError(errorMessage);
+        setIsAuthenticated(false);
+      })
+      .finally(() => {
+        setIsChecking(false);
+      });
+  };
+
+  if (isChecking) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-white">
+        <LoadingSpinner size="md" text="Loading..." />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <ErrorDisplay
+        title="Authentication Error"
+        message={error.message || "Failed to authenticate. Please try again."}
+        onRetry={handleRetry}
+      />
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <LoginPage />;
+  }
+
+  return <>{children}</>;
+}
+
diff --git a/app/components/Breadcrumb.tsx b/app/components/Breadcrumb.tsx
index c3d2e18..216b505 100644
--- a/app/components/Breadcrumb.tsx
+++ b/app/components/Breadcrumb.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { ChevronRightIcon } from "@heroicons/react/24/outline";
+
 interface BreadcrumbItem {
   name: string;
   path: string;
@@ -27,20 +29,7 @@ export default function Breadcrumb({ items, onNavigate }: BreadcrumbProps) {
               >
                 {items[0].name}
               </button>
-              <svg
-                className="h-4 w-4 flex-shrink-0 text-gray-400"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
+              <ChevronRightIcon className="h-4 w-4 flex-shrink-0 text-gray-400" />
             </li>
             <li className="text-sm text-gray-400">...</li>
           </>
@@ -50,29 +39,15 @@ export default function Breadcrumb({ items, onNavigate }: BreadcrumbProps) {
           return (
             <li key={item.path} className="flex items-center gap-1 sm:gap-2">
               {actualIndex > 0 && (
-                <svg
-                  className="h-4 w-4 flex-shrink-0 text-gray-400"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  aria-hidden="true"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M9 5l7 7-7 7"
-                  />
-                </svg>
+                <ChevronRightIcon className="h-4 w-4 flex-shrink-0 text-gray-400" />
               )}
               <button
                 type="button"
                 onClick={() => onNavigate(item.path)}
-                className={`cursor-pointer truncate text-sm ${
-                  actualIndex === items.length - 1
+                className={`cursor-pointer truncate text-sm ${actualIndex === items.length - 1
                     ? "font-medium text-black"
                     : "text-gray-600 hover:text-black"
-                }`}
+                  }`}
                 aria-current={actualIndex === items.length - 1 ? "page" : undefined}
               >
                 {item.name}
diff --git a/app/components/FileItem.tsx b/app/components/FileItem.tsx
index d9aba49..55e535d 100644
--- a/app/components/FileItem.tsx
+++ b/app/components/FileItem.tsx
@@ -1,8 +1,11 @@
 "use client";
 
 import { useState } from "react";
+import Button from "./shared/Button";
+import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+import { getFileIcon, formatFileSize, formatDate, type FileType } from "../lib/helpers";
 
-export type FileType = "folder" | "file" | "image" | "document" | "other";
+export type { FileType };
 
 export interface FileItemData {
   id: string;
@@ -22,95 +25,6 @@ interface FileItemProps {
   isSelected?: boolean;
 }
 
-function getFileIcon(type: FileType, mimeType?: string) {
-  switch (type) {
-    case "folder":
-      return (
-        <svg
-          className="h-6 w-6 text-yellow-500"
-          fill="currentColor"
-          viewBox="0 0 24 24"
-          aria-hidden="true"
-        >
-          <path d="M10 4H4c-1.11 0-2 .89-2 2v12c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2h-8l-2-2z" />
-        </svg>
-      );
-    case "image":
-      return (
-        <svg
-          className="h-6 w-6 text-green-500"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          aria-hidden="true"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-          />
-        </svg>
-      );
-    case "document":
-      return (
-        <svg
-          className="h-6 w-6 text-blue-500"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          aria-hidden="true"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-          />
-        </svg>
-      );
-    default:
-      return (
-        <svg
-          className="h-6 w-6 text-gray-500"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          aria-hidden="true"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-          />
-        </svg>
-      );
-  }
-}
-
-function formatFileSize(bytes?: number): string {
-  if (!bytes) return "";
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
-}
-
-function formatDate(date?: Date): string {
-  if (!date) return "";
-  const now = new Date();
-  const diff = now.getTime() - date.getTime();
-  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
-
-  if (days === 0) return "Today";
-  if (days === 1) return "Yesterday";
-  if (days < 7) return `${days} days ago`;
-  if (days < 30) return `${Math.floor(days / 7)} weeks ago`;
-
-  return date.toLocaleDateString();
-}
-
 export default function FileItem({
   file,
   view,
@@ -122,12 +36,11 @@ export default function FileItem({
 
   if (view === "grid") {
     return (
-      <div
-        className={`group relative flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 p-2 transition-colors sm:p-4 ${
-          isSelected
-            ? "border-purple-500 bg-purple-50"
+      <section
+        className={`group relative flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 p-2 transition-colors sm:p-4 ${isSelected
+            ? "border-[#7B42F6] bg-[#F9F6FF]"
             : "border-transparent bg-white hover:border-gray-300 hover:bg-gray-50"
-        }`}
+          }`}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         onClick={() => onSelect(file)}
@@ -142,16 +55,15 @@ export default function FileItem({
         <p className="max-w-full truncate text-center text-xs font-medium text-black sm:text-sm">
           {file.name}
         </p>
-      </div>
+      </section>
     );
   }
 
   // List view
   return (
-    <div
-      className={`group flex cursor-pointer items-center gap-2 border-b border-gray-100 px-2 py-2 transition-colors sm:gap-4 sm:px-4 sm:py-3 ${
-        isSelected ? "bg-purple-50" : "bg-white hover:bg-gray-50"
-      }`}
+    <section
+      className={`group flex cursor-pointer items-center gap-2 border-b border-gray-100 px-2 py-2 transition-colors sm:gap-4 sm:px-4 sm:py-3 ${isSelected ? "bg-[#F9F6FF]" : "bg-white hover:bg-gray-50"
+        }`}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
       onClick={() => onSelect(file)}
@@ -174,33 +86,19 @@ export default function FileItem({
       </div>
       {isHovered && (
         <div className="flex-shrink-0">
-          <button
-            type="button"
-            className="cursor-pointer rounded-md p-1 text-gray-600 hover:bg-gray-200"
+          <Button
+            variant="icon"
             aria-label="More options"
             onClick={(e) => {
               e.stopPropagation();
               // Handle more options
             }}
           >
-            <svg
-              className="h-4 w-4 sm:h-5 sm:w-5"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-              />
-            </svg>
-          </button>
+            <EllipsisVerticalIcon className="h-4 w-4 sm:h-5 sm:w-5" />
+          </Button>
         </div>
       )}
-    </div>
+    </section>
   );
 }
 
diff --git a/app/components/FileList.tsx b/app/components/FileList.tsx
index cabbcea..aa48da2 100644
--- a/app/components/FileList.tsx
+++ b/app/components/FileList.tsx
@@ -2,6 +2,8 @@
 
 import { useState } from "react";
 import FileItem, { FileItemData } from "./FileItem";
+import Toolbar from "./shared/Toolbar";
+import EmptyState from "./shared/EmptyState";
 
 interface FileListProps {
   files: FileItemData[];
@@ -21,76 +23,17 @@ export default function FileList({
   const [view, setView] = useState<"grid" | "list">("list");
 
   return (
-    <div className="flex h-full flex-col">
-      {/* Toolbar */}
-      <div className="flex items-center justify-between border-b border-gray-200 px-2 py-2 sm:px-4">
-        <div className="flex items-center gap-1 sm:gap-2">
-          <button
-            type="button"
-            onClick={() => setView("list")}
-            className={`cursor-pointer rounded-md p-1.5 sm:p-2 ${
-              view === "list"
-                ? "bg-purple-100 text-black"
-                : "text-gray-600 hover:bg-gray-100"
-            }`}
-            aria-label="List view"
-            aria-pressed={view === "list"}
-          >
-            <svg
-              className="h-4 w-4 sm:h-5 sm:w-5"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M4 6h16M4 10h16M4 14h16M4 18h16"
-              />
-            </svg>
-          </button>
-          <button
-            type="button"
-            onClick={() => setView("grid")}
-            className={`cursor-pointer rounded-md p-1.5 sm:p-2 ${
-              view === "grid"
-                ? "bg-purple-100 text-black"
-                : "text-gray-600 hover:bg-gray-100"
-            }`}
-            aria-label="Grid view"
-            aria-pressed={view === "grid"}
-          >
-            <svg
-              className="h-4 w-4 sm:h-5 sm:w-5"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
-              />
-            </svg>
-          </button>
-        </div>
-        <div className="text-xs text-gray-600 sm:text-sm">
-          {files.length} {files.length === 1 ? "item" : "items"}
-        </div>
-      </div>
+    <main className="flex h-full flex-col">
+      <Toolbar
+        view={view}
+        onViewChange={setView}
+        itemCount={files.length}
+      />
 
       {/* File List/Grid */}
-      <div className="flex-1 overflow-auto">
+      <section className="flex-1 overflow-auto">
         {files.length === 0 ? (
-          <div className="flex h-full items-center justify-center">
-            <div className="text-center">
-              <p className="text-gray-500">No files or folders</p>
-            </div>
-          </div>
+          <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">
             {files.map((file) => (
@@ -118,8 +61,8 @@ export default function FileList({
             ))}
           </div>
         )}
-      </div>
-    </div>
+      </section>
+    </main>
   );
 }
 
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index b2adbec..06847c7 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -1,6 +1,15 @@
 "use client";
 
 import { useState } from "react";
+import Image from "next/image";
+import Button from "./shared/Button";
+import Input from "./shared/Input";
+import {
+  Bars3Icon,
+  MagnifyingGlassIcon,
+  ShareIcon,
+  PlusIcon,
+} from "@heroicons/react/24/outline";
 
 interface HeaderProps {
   selectedFileCount?: number;
@@ -13,112 +22,72 @@ export default function Header({ selectedFileCount = 0, onShareClick, onMenuClic
 
   return (
     <header className="sticky top-0 z-10 border-b border-gray-200 bg-white">
-      <div className="flex h-14 items-center gap-2 px-2 sm:gap-4 sm:px-4">
-        {/* Menu Button (Mobile) */}
-        {onMenuClick && (
-          <button
-            type="button"
-            onClick={onMenuClick}
-            className="cursor-pointer flex h-9 w-9 items-center justify-center rounded-md text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-purple-500 lg:hidden"
-            aria-label="Toggle menu"
-          >
-            <svg
-              className="h-5 w-5"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M4 6h16M4 12h16M4 18h16"
-              />
-            </svg>
-          </button>
-        )}
-
-        {/* Logo/App Name */}
-        <div className="flex items-center gap-2 sm:gap-3">
-          <h1 className="text-sm font-medium text-black sm:text-lg">Solid File Manager</h1>
-        </div>
-
-        {/* Search Bar */}
-        <div className="flex flex-1 items-center">
-          <div className="relative w-full max-w-md">
-            <input
-              type="search"
-              placeholder="Search in files"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="h-9 w-full rounded-md border border-gray-300 bg-white px-3 pl-9 text-sm text-black placeholder:text-gray-500 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500"
-              aria-label="Search files"
-            />
-            <svg
-              className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-              />
-            </svg>
-          </div>
-        </div>
-
-        {/* Action Buttons */}
-        <div className="flex items-center gap-1 sm:gap-2">
-          {selectedFileCount > 0 && onShareClick && (
+      <div className="relative flex flex-col gap-2 px-2 py-2 sm:flex-row sm:items-center sm:gap-4 sm:px-4 sm:py-0 sm:h-14">
+        {/* Top Row: Menu, Logo, Actions */}
+        <div className="flex h-14 w-full items-center gap-2 sm:gap-4">
+          {/* Menu Button (Mobile) */}
+          {onMenuClick && (
             <button
               type="button"
-              onClick={onShareClick}
-              className="cursor-pointer flex h-9 items-center gap-1 rounded-md bg-purple-600 px-2 text-sm font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 sm:gap-2 sm:px-3"
-              aria-label="Share selected files"
+              onClick={onMenuClick}
+              className="cursor-pointer flex h-9 w-9 items-center justify-center rounded-md text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-[#7B42F6] lg:hidden"
+              aria-label="Toggle menu"
             >
-              <svg
-                className="h-4 w-4"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
-                />
-              </svg>
-              <span className="hidden sm:inline">Share</span>
+              <Bars3Icon className="h-5 w-5" />
             </button>
           )}
-          <button
-            type="button"
-            className="cursor-pointer flex h-9 items-center gap-1 rounded-md border border-gray-300 bg-white px-2 text-sm font-medium text-black hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-purple-500 sm:gap-2 sm:px-3"
-            aria-label="New"
-          >
-            <svg
-              className="h-4 w-4"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
+
+          {/* Logo/App Name */}
+          <div className="flex items-center gap-2 sm:gap-3">
+            <Image
+              src="/solid.svg"
+              alt="Solid Logo"
+              width={24}
+              height={24}
+              className="h-6 w-6 flex-shrink-0 sm:h-7 sm:w-7"
+              priority
               aria-hidden="true"
+            />
+            <h1 className="text-sm font-medium text-black sm:text-lg">Solid File Manager</h1>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="ml-auto flex items-center gap-1 sm:gap-2">
+            {selectedFileCount > 0 && onShareClick && (
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={onShareClick}
+                className="flex h-9 items-center gap-1 sm:gap-2 sm:px-3"
+                aria-label="Share selected files"
+              >
+                <ShareIcon className="h-4 w-4" />
+                <span className="hidden sm:inline">Share</span>
+              </Button>
+            )}
+            <Button
+              variant="secondary"
+              size="sm"
+              className="flex h-9 items-center gap-1 sm:gap-2 sm:px-3"
+              aria-label="New"
             >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M12 4v16m8-8H4"
-              />
-            </svg>
-            <span className="hidden sm:inline">New</span>
-          </button>
+              <PlusIcon className="h-4 w-4" />
+              <span className="hidden sm:inline">New</span>
+            </Button>
+          </div>
+        </div>
+
+        {/* Search Bar - Full width on mobile, centered on desktop */}
+        <div className="flex items-center sm:absolute sm:left-1/2 sm:top-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 sm:w-full sm:max-w-xl">
+          <Input
+            type="search"
+            placeholder="Search in files"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            leftIcon={<MagnifyingGlassIcon className="h-4 w-4" />}
+            aria-label="Search files"
+            className="w-full"
+          />
         </div>
       </div>
     </header>
diff --git a/app/components/LoginPage.tsx b/app/components/LoginPage.tsx
new file mode 100644
index 0000000..8539183
--- /dev/null
+++ b/app/components/LoginPage.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import { useState } from "react";
+import { login } from "@inrupt/solid-client-authn-browser";
+import Image from "next/image";
+import Button from "./shared/Button";
+
+const OIDC_ISSUERS = [
+  { label: "Solid Community", value: "https://solidcommunity.net/" },
+  { label: "Inrupt", value: "https://login.inrupt.com" },
+] as const;
+
+export default function LoginPage() {
+  const [selectedIssuer, setSelectedIssuer] = useState<string>(
+    process.env.NEXT_PUBLIC_OIDC_ISSUER || OIDC_ISSUERS[0].value
+  );
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleLogin = async () => {
+    setIsLoading(true);
+    try {
+      await login({
+        oidcIssuer: selectedIssuer,
+        clientName: "Solid File Manager",
+        redirectUrl: window.location.href,
+      });
+    } catch (error) {
+      console.error("Login failed:", error);
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <main className="flex min-h-screen bg-white" role="main" aria-label="Sign in page">
+      {/* Left side - Logo and branding */}
+      <section
+        className="hidden flex-1 items-center justify-center border-r border-gray-200 bg-[#F3EDFF] px-8 lg:flex"
+        aria-label="Branding section"
+      >
+        <div className="max-w-md">
+          <header className="mb-8">
+            <div className="mb-8">
+              <Image
+                src="/solid.svg"
+                alt="Solid Logo"
+                width={80}
+                height={80}
+                className="mb-6"
+                priority
+              />
+            </div>
+            <h1 className="mb-2 text-4xl font-normal text-black">Sign in</h1>
+            <p className="text-base text-gray-600">
+              to continue to Solid File Manager
+            </p>
+          </header>
+        </div>
+      </section>
+
+      {/* Right side - Login form */}
+      <section
+        className="flex w-full flex-1 items-center justify-center bg-white px-4 py-12 lg:w-auto lg:min-w-[450px]"
+        aria-label="Sign in form section"
+      >
+        <div className="w-full max-w-md">
+          {/* Mobile logo */}
+          <header className="mb-8 lg:hidden">
+            <div className="mb-6 flex justify-center">
+              <Image
+                src="/solid.svg"
+                alt="Solid Logo"
+                width={60}
+                height={60}
+                priority
+              />
+            </div>
+            <h1 className="mb-2 text-center text-3xl font-normal text-black">Sign in</h1>
+            <p className="text-center text-base text-gray-600">
+              to continue to Solid File Manager
+            </p>
+          </header>
+
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleLogin();
+            }}
+            className="space-y-6"
+            aria-label="Sign in form"
+            noValidate
+          >
+            {/* Identity Provider Selection */}
+            <div>
+              <label
+                htmlFor="oidc-issuer"
+                className="mb-2 block text-sm font-medium text-black"
+              >
+                Solid Identity Provider
+              </label>
+              <select
+                id="oidc-issuer"
+                name="oidc-issuer"
+                value={selectedIssuer}
+                onChange={(e) => setSelectedIssuer(e.target.value)}
+                className="h-12 w-full cursor-pointer rounded-md border border-gray-300 bg-white px-4 text-black focus:border-[#7B42F6] focus:outline-none focus:ring-1 focus:ring-[#7B42F6] disabled:cursor-not-allowed disabled:opacity-50"
+                disabled={isLoading}
+                required
+                aria-required="true"
+                aria-label="Select Solid Identity Provider"
+                aria-describedby="oidc-issuer-description"
+              >
+                {OIDC_ISSUERS.map((issuer) => (
+                  <option key={issuer.value} value={issuer.value}>
+                    {issuer.label}
+                  </option>
+                ))}
+              </select>
+              <p id="oidc-issuer-description" className="sr-only">
+                Choose your Solid Identity Provider to sign in
+              </p>
+            </div>
+
+            {/* Action button */}
+            <div className="flex items-center justify-end pt-4">
+              <Button
+                type="submit"
+                variant="primary"
+                disabled={isLoading}
+                isLoading={isLoading}
+                aria-label={isLoading ? "Signing in, please wait" : "Continue to sign in"}
+              >
+                {isLoading ? "Signing in..." : "Next"}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </section>
+    </main>
+  );
+}
+
diff --git a/app/components/PermissionsDialog.tsx b/app/components/PermissionsDialog.tsx
index b8ca80e..9393d39 100644
--- a/app/components/PermissionsDialog.tsx
+++ b/app/components/PermissionsDialog.tsx
@@ -1,6 +1,9 @@
 "use client";
 
 import { useState } from "react";
+import Modal from "./shared/Modal";
+import Button from "./shared/Button";
+import { XMarkIcon } from "@heroicons/react/24/outline";
 
 export interface Permission {
   id: string;
@@ -34,8 +37,6 @@ export default function PermissionsDialog({
   const [selectedRole, setSelectedRole] = useState<"viewer" | "editor">("viewer");
   const [isAdding, setIsAdding] = useState(false);
 
-  if (!isOpen) return null;
-
   const handleAddPermission = async () => {
     if (!shareInput.trim()) return;
     setIsAdding(true);
@@ -48,49 +49,18 @@ export default function PermissionsDialog({
   };
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-10 backdrop-blur-sm p-2 sm:p-4"
-      onClick={onClose}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="permissions-dialog-title"
-    >
-      <div
-        className="flex h-full max-h-[90vh] w-full max-w-2xl flex-col rounded-lg bg-white shadow-xl sm:h-auto"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div className="border-b border-gray-200 px-4 py-3 sm:px-6 sm:py-4">
-          <div className="flex items-center justify-between">
-            <h2 id="permissions-dialog-title" className="text-base font-medium text-black sm:text-lg">
-              Share "{fileName}"
-            </h2>
-            <button
-              type="button"
-              onClick={onClose}
-              className="cursor-pointer rounded-md p-1 text-gray-600 hover:bg-gray-100"
-              aria-label="Close dialog"
-            >
-              <svg
-                className="h-5 w-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            </button>
-          </div>
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={`Share "${fileName}"`}
+      footer={
+        <div className="flex justify-end gap-2">
+          <Button variant="secondary" onClick={onClose}>
+            Done
+          </Button>
         </div>
-
-        {/* Content */}
-        <div className="flex-1 overflow-y-auto px-4 py-4 sm:px-6">
+      }
+    >
           {/* Add People Section */}
           <div className="mb-6">
             <label htmlFor="share-input" className="mb-2 block text-sm font-medium text-black">
@@ -103,7 +73,7 @@ export default function PermissionsDialog({
                 value={shareInput}
                 onChange={(e) => setShareInput(e.target.value)}
                 placeholder="Enter WebID or email"
-                className="flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm text-black placeholder:text-gray-500 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500"
+                className="flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm text-black placeholder:text-gray-500 focus:border-[#7B42F6] focus:outline-none focus:ring-1 focus:ring-[#7B42F6]"
                 onKeyDown={(e) => {
                   if (e.key === "Enter") {
                     handleAddPermission();
@@ -114,20 +84,20 @@ export default function PermissionsDialog({
                 <select
                   value={selectedRole}
                   onChange={(e) => setSelectedRole(e.target.value as "viewer" | "editor")}
-                  className="cursor-pointer flex-1 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-black focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 sm:flex-initial"
+                  className="cursor-pointer flex-1 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-black focus:border-[#7B42F6] focus:outline-none focus:ring-1 focus:ring-[#7B42F6] sm:flex-initial"
                   aria-label="Permission role"
                 >
                   <option value="viewer">Viewer</option>
                   <option value="editor">Editor</option>
                 </select>
-                <button
-                  type="button"
+                <Button
+                  variant="primary"
                   onClick={handleAddPermission}
                   disabled={!shareInput.trim() || isAdding}
-                  className="cursor-pointer rounded-md bg-purple-600 px-4 py-2 text-sm font-medium text-white hover:bg-purple-700 disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500"
+                  isLoading={isAdding}
                 >
                   {isAdding ? "Adding..." : "Add"}
-                </button>
+                </Button>
               </div>
             </div>
           </div>
@@ -142,7 +112,7 @@ export default function PermissionsDialog({
                   className="flex flex-col gap-2 rounded-md border border-gray-200 p-3 sm:flex-row sm:items-center sm:justify-between"
                 >
                   <div className="flex items-center gap-3">
-                    <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-purple-100 text-sm font-medium text-black">
+                    <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-[#F3EDFF] text-sm font-medium text-black">
                       {permission.name.charAt(0).toUpperCase()}
                     </div>
                     <div className="min-w-0">
@@ -165,33 +135,19 @@ export default function PermissionsDialog({
                               e.target.value as "viewer" | "editor"
                             )
                           }
-                          className="cursor-pointer rounded-md border border-gray-300 bg-white px-2 py-1 text-sm text-black focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500"
+                          className="cursor-pointer rounded-md border border-gray-300 bg-white px-2 py-1 text-sm text-black focus:border-[#7B42F6] focus:outline-none focus:ring-1 focus:ring-[#7B42F6]"
                           aria-label={`Change permission for ${permission.name}`}
                         >
                           <option value="viewer">Viewer</option>
                           <option value="editor">Editor</option>
                         </select>
-                        <button
-                          type="button"
+                        <Button
+                          variant="icon"
                           onClick={() => onRemovePermission(permission.id)}
-                          className="cursor-pointer rounded-md p-1 text-gray-600 hover:bg-gray-100"
                           aria-label={`Remove ${permission.name}`}
                         >
-                          <svg
-                            className="h-5 w-5"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                            aria-hidden="true"
-                          >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth={2}
-                              d="M6 18L18 6M6 6l12 12"
-                            />
-                          </svg>
-                        </button>
+                          <XMarkIcon className="h-5 w-5" />
+                        </Button>
                       </>
                     )}
                   </div>
@@ -199,22 +155,7 @@ export default function PermissionsDialog({
               ))}
             </div>
           </div>
-        </div>
-
-        {/* Footer */}
-        <div className="border-t border-gray-200 px-4 py-3 sm:px-6 sm:py-4">
-          <div className="flex justify-end gap-2">
-            <button
-              type="button"
-              onClick={onClose}
-              className="cursor-pointer w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-black hover:bg-gray-50 sm:w-auto"
-            >
-              Done
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
+    </Modal>
   );
 }
 
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index 54513aa..21db9bf 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -1,5 +1,8 @@
 "use client";
 
+import Button from "./shared/Button";
+import { XMarkIcon, FolderIcon } from "@heroicons/react/24/outline";
+
 interface Drive {
   id: string;
   name: string;
@@ -39,27 +42,14 @@ export default function Sidebar({
               Drives
             </h2>
             {onClose && (
-              <button
-                type="button"
+              <Button
+                variant="icon"
                 onClick={onClose}
-                className="cursor-pointer rounded-md p-1 text-gray-600 hover:bg-gray-100 lg:hidden"
+                className="lg:hidden"
                 aria-label="Close sidebar"
               >
-                <svg
-                  className="h-5 w-5"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  aria-hidden="true"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-              </button>
+                <XMarkIcon className="h-5 w-5" />
+              </Button>
             )}
           </div>
           <ul className="space-y-1" role="list">
@@ -75,26 +65,13 @@ export default function Sidebar({
                   }}
                   className={`cursor-pointer w-full rounded-md px-3 py-2 text-left text-sm font-medium transition-colors ${
                     selectedDriveId === drive.id
-                      ? "bg-purple-100 text-black"
+                      ? "bg-[#F3EDFF] text-black"
                       : "text-gray-700 hover:bg-gray-100"
                   }`}
                   aria-current={selectedDriveId === drive.id ? "page" : undefined}
                 >
                   <div className="flex items-center gap-3">
-                    <svg
-                      className="h-5 w-5 flex-shrink-0 text-gray-600"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                      aria-hidden="true"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
-                      />
-                    </svg>
+                    <FolderIcon className="h-5 w-5 flex-shrink-0 text-gray-600" />
                     <span className="truncate">{drive.name}</span>
                   </div>
                 </button>
diff --git a/app/components/shared/Button.tsx b/app/components/shared/Button.tsx
new file mode 100644
index 0000000..867d418
--- /dev/null
+++ b/app/components/shared/Button.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { ButtonHTMLAttributes, ReactNode } from "react";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "ghost" | "icon";
+  size?: "sm" | "md" | "lg";
+  isLoading?: boolean;
+  children: ReactNode;
+}
+
+export default function Button({
+  variant = "secondary",
+  size = "md",
+  isLoading = false,
+  disabled,
+  className = "",
+  type = "button",
+  children,
+  ...props
+}: ButtonProps) {
+  const baseStyles = "cursor-pointer rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[#7B42F6] focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50";
+
+  const variantStyles = {
+    primary: "bg-[#7B42F6] text-white hover:bg-[#6B35E5] disabled:bg-gray-300 disabled:text-gray-500",
+    secondary: "border border-gray-300 bg-white text-black hover:bg-gray-50",
+    ghost: "text-gray-600 hover:bg-gray-100",
+    icon: "text-gray-600 hover:bg-gray-100 p-1",
+  };
+
+  const sizeStyles = {
+    sm: "px-2 py-1 text-xs",
+    md: "px-4 py-2 text-sm",
+    lg: "px-6 py-3 text-base",
+  };
+
+  const combinedClassName = `${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`.trim();
+
+  return (
+    <button
+      type={type}
+      disabled={disabled || isLoading}
+      className={combinedClassName}
+      aria-busy={isLoading}
+      {...props}
+    >
+      {isLoading ? (
+        <>
+          <span className="sr-only">Loading</span>
+          <span aria-hidden="true">{children}</span>
+        </>
+      ) : (
+        children
+      )}
+    </button>
+  );
+}
+
diff --git a/app/components/shared/EmptyState.tsx b/app/components/shared/EmptyState.tsx
new file mode 100644
index 0000000..63f8e0e
--- /dev/null
+++ b/app/components/shared/EmptyState.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { ReactNode } from "react";
+import { DocumentIcon } from "@heroicons/react/24/outline";
+import Button from "./Button";
+
+interface EmptyStateProps {
+    icon?: ReactNode;
+    title?: string;
+    message: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    className?: string;
+}
+
+export default function EmptyState({
+    icon,
+    title,
+    message,
+    action,
+    className = "",
+}: EmptyStateProps) {
+    return (
+        <main
+            className={`flex h-full items-center justify-center px-4 py-12 ${className}`}
+            role="status"
+            aria-live="polite"
+        >
+            <section className="text-center">
+                <div className="mb-4 flex justify-center">
+                    {icon || <DocumentIcon className="h-12 w-12 text-gray-400" />}
+                </div>
+                {title && (
+                    <h3 className="mb-2 text-lg font-medium text-black">{title}</h3>
+                )}
+                <p className="mb-6 text-gray-600">{message}</p>
+                {action && (
+                    <Button variant="primary" onClick={action.onClick}>
+                        {action.label}
+                    </Button>
+                )}
+            </section>
+        </main>
+    );
+}
+
diff --git a/app/components/shared/ErrorDisplay.tsx b/app/components/shared/ErrorDisplay.tsx
new file mode 100644
index 0000000..64108d9
--- /dev/null
+++ b/app/components/shared/ErrorDisplay.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import Button from "./Button";
+
+interface ErrorDisplayProps {
+  title?: string;
+  message: string;
+  onRetry?: () => void;
+  className?: string;
+}
+
+export default function ErrorDisplay({
+  title = "Something went wrong",
+  message,
+  onRetry,
+  className = "",
+}: ErrorDisplayProps) {
+  return (
+    <main
+      className={`flex min-h-screen flex-col items-center justify-center bg-white px-4 ${className}`}
+      role="alert"
+      aria-live="assertive"
+    >
+      <section className="max-w-md text-center">
+        <div className="mb-4 flex justify-center">
+          <ExclamationTriangleIcon className="h-12 w-12 text-red-500" />
+        </div>
+        <h2 className="mb-2 text-xl font-semibold text-black">{title}</h2>
+        <p className="mb-6 text-gray-600">{message}</p>
+        {onRetry && (
+          <Button variant="primary" onClick={onRetry}>
+            Try Again
+          </Button>
+        )}
+      </section>
+    </main>
+  );
+}
+
diff --git a/app/components/shared/Input.tsx b/app/components/shared/Input.tsx
new file mode 100644
index 0000000..c344ed3
--- /dev/null
+++ b/app/components/shared/Input.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { InputHTMLAttributes, ReactNode } from "react";
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  error?: string;
+  helperText?: string;
+}
+
+export default function Input({
+  label,
+  leftIcon,
+  rightIcon,
+  error,
+  helperText,
+  className = "",
+  id,
+  ...props
+}: InputProps) {
+  const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
+  const hasError = !!error;
+
+  const baseInputClasses =
+    "h-9 w-full rounded-md border bg-white px-3 text-sm text-black placeholder:text-gray-500 focus:outline-none focus:ring-1 transition-colors";
+  const inputClasses = hasError
+    ? `${baseInputClasses} border-red-300 focus:border-red-500 focus:ring-red-500`
+    : `${baseInputClasses} border-gray-300 focus:border-[#7B42F6] focus:ring-[#7B42F6]`;
+
+  const paddingLeft = leftIcon ? "pl-9" : "pl-3";
+  const paddingRight = rightIcon ? "pr-9" : "pr-3";
+
+  return (
+    <div className="w-full">
+      {label && (
+        <label
+          htmlFor={inputId}
+          className="mb-2 block text-sm font-medium text-black"
+        >
+          {label}
+        </label>
+      )}
+      <div className="relative">
+        {leftIcon && (
+          <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
+            {leftIcon}
+          </div>
+        )}
+        <input
+          id={inputId}
+          className={`${inputClasses} ${paddingLeft} ${paddingRight} ${className}`}
+          aria-invalid={hasError}
+          aria-describedby={
+            error || helperText
+              ? `${inputId}-${error ? "error" : "helper"}`
+              : undefined
+          }
+          {...props}
+        />
+        {rightIcon && (
+          <div className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">
+            {rightIcon}
+          </div>
+        )}
+      </div>
+      {error && (
+        <p
+          id={`${inputId}-error`}
+          className="mt-1 text-xs text-red-600"
+          role="alert"
+        >
+          {error}
+        </p>
+      )}
+      {helperText && !error && (
+        <p id={`${inputId}-helper`} className="mt-1 text-xs text-gray-600">
+          {helperText}
+        </p>
+      )}
+    </div>
+  );
+}
+
diff --git a/app/components/shared/LoadingSpinner.tsx b/app/components/shared/LoadingSpinner.tsx
new file mode 100644
index 0000000..8de61cf
--- /dev/null
+++ b/app/components/shared/LoadingSpinner.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { SVGProps } from "react";
+
+interface LoadingSpinnerProps {
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  text?: string;
+}
+
+const sizeClasses = {
+  sm: "h-4 w-4 border-2",
+  md: "h-8 w-8 border-4",
+  lg: "h-12 w-12 border-4",
+};
+
+export default function LoadingSpinner({
+  size = "md",
+  className = "",
+  text,
+}: LoadingSpinnerProps) {
+  return (
+    <main className={`flex flex-col items-center justify-center ${className}`}>
+      <div
+        className={`inline-block animate-spin rounded-full border-solid border-[#7B42F6] border-r-transparent ${sizeClasses[size]}`}
+        role="status"
+        aria-label="Loading"
+      >
+        <span className="sr-only">Loading...</span>
+      </div>
+      {text && (
+        <p className="mt-4 text-sm text-gray-600" aria-live="polite">
+          {text}
+        </p>
+      )}
+    </main>
+  );
+}
+
diff --git a/app/components/shared/Modal.tsx b/app/components/shared/Modal.tsx
new file mode 100644
index 0000000..4c3ec49
--- /dev/null
+++ b/app/components/shared/Modal.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import { ReactNode, useEffect } from "react";
+import { XMarkIcon } from "@heroicons/react/24/outline";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+  footer?: ReactNode;
+  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl";
+}
+
+const maxWidthClasses = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+};
+
+export default function Modal({
+  isOpen,
+  onClose,
+  title,
+  children,
+  footer,
+  maxWidth = "2xl",
+}: ModalProps) {
+  // Handle escape key
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, onClose]);
+
+  // Prevent body scroll when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <main
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-md p-2 sm:p-4"
+      onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modal-title"
+    >
+      <section
+        className={`flex h-full max-h-[90vh] w-full ${maxWidthClasses[maxWidth]} flex-col rounded-lg bg-white shadow-xl sm:h-auto`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <header className="border-b border-gray-200 px-4 py-3 sm:px-6 sm:py-4">
+          <div className="flex items-center justify-between">
+            <h2 id="modal-title" className="text-base font-medium text-black sm:text-lg">
+              {title}
+            </h2>
+            <button
+              type="button"
+              onClick={onClose}
+              className="cursor-pointer rounded-md p-1 text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-[#7B42F6]"
+              aria-label="Close dialog"
+            >
+              <XMarkIcon className="h-5 w-5" />
+            </button>
+          </div>
+        </header>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto px-4 py-4 sm:px-6">{children}</div>
+
+        {/* Footer */}
+        {footer && (
+          <footer className="border-t border-gray-200 px-4 py-3 sm:px-6 sm:py-4">
+            {footer}
+          </footer>
+        )}
+      </section>
+    </main>
+  );
+}
+
diff --git a/app/components/shared/Toolbar.tsx b/app/components/shared/Toolbar.tsx
new file mode 100644
index 0000000..9b16484
--- /dev/null
+++ b/app/components/shared/Toolbar.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { ReactNode } from "react";
+import Button from "./Button";
+import { ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+
+interface ToolbarProps {
+  view: "list" | "grid";
+  onViewChange: (view: "list" | "grid") => void;
+  itemCount: number;
+  actions?: ReactNode;
+}
+
+export default function Toolbar({
+  view,
+  onViewChange,
+  itemCount,
+  actions,
+}: ToolbarProps) {
+  return (
+    <header className="flex items-center justify-between border-b border-gray-200 px-2 py-2 sm:px-4">
+      <nav className="flex items-center gap-1 sm:gap-2" aria-label="View options">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => onViewChange("list")}
+          className={`p-1.5 sm:p-2 ${
+            view === "list"
+              ? "bg-[#F3EDFF] text-black"
+              : "text-gray-600 hover:bg-gray-100"
+          }`}
+          aria-label="List view"
+          aria-pressed={view === "list"}
+        >
+          <ListBulletIcon className="h-4 w-4 sm:h-5 sm:w-5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => onViewChange("grid")}
+          className={`p-1.5 sm:p-2 ${
+            view === "grid"
+              ? "bg-[#F3EDFF] text-black"
+              : "text-gray-600 hover:bg-gray-100"
+          }`}
+          aria-label="Grid view"
+          aria-pressed={view === "grid"}
+        >
+          <Squares2X2Icon className="h-4 w-4 sm:h-5 sm:w-5" />
+        </Button>
+        {actions && <div className="flex items-center gap-1 sm:gap-2">{actions}</div>}
+      </nav>
+      <div className="text-xs text-gray-600 sm:text-sm" role="status" aria-live="polite">
+        {itemCount} {itemCount === 1 ? "item" : "items"}
+      </div>
+    </header>
+  );
+}
+
diff --git a/app/globals.css b/app/globals.css
index b563a3b..7f46b5f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,8 +3,10 @@
 :root {
   --background: #ffffff;
   --foreground: #000000;
-  --purple-light: #e8d5ff;
-  --purple-accent: #9c6ade;
+  --purple-logo: #7b42f6;
+  --purple-light: #f3edff;
+  --purple-medium: #e8d5ff;
+  --purple-dark: #6b35e5;
   --border: #e0e0e0;
   --hover: #f5f5f5;
 }
@@ -12,8 +14,10 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-purple-logo: var(--purple-logo);
   --color-purple-light: var(--purple-light);
-  --color-purple-accent: var(--purple-accent);
+  --color-purple-medium: var(--purple-medium);
+  --color-purple-dark: var(--purple-dark);
   --color-border: var(--border);
   --color-hover: var(--hover);
   --font-sans: var(--font-geist-sans);
diff --git a/app/lib/helpers/dateUtils.ts b/app/lib/helpers/dateUtils.ts
new file mode 100644
index 0000000..e6b4380
--- /dev/null
+++ b/app/lib/helpers/dateUtils.ts
@@ -0,0 +1,23 @@
+/**
+ * Date utility functions for formatting and processing dates
+ */
+
+/**
+ * Formats a date to a human-readable relative time string
+ * @param date - Date object to format
+ * @returns Formatted date string (e.g., "Today", "Yesterday", "2 days ago", "12/25/2023")
+ */
+export function formatDate(date?: Date): string {
+  if (!date) return "";
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+
+  if (days === 0) return "Today";
+  if (days === 1) return "Yesterday";
+  if (days < 7) return `${days} days ago`;
+  if (days < 30) return `${Math.floor(days / 7)} weeks ago`;
+
+  return date.toLocaleDateString();
+}
+
diff --git a/app/lib/helpers/fileIcons.tsx b/app/lib/helpers/fileIcons.tsx
new file mode 100644
index 0000000..316f0bc
--- /dev/null
+++ b/app/lib/helpers/fileIcons.tsx
@@ -0,0 +1,31 @@
+/**
+ * File icon utility functions for rendering appropriate icons based on file type
+ */
+
+import {
+  FolderIcon,
+  PhotoIcon,
+  DocumentIcon,
+} from "@heroicons/react/24/outline";
+
+export type FileType = "folder" | "file" | "image" | "document" | "other";
+
+/**
+ * Returns the appropriate icon component for a given file type
+ * @param type - The type of file (folder, image, document, etc.)
+ * @param mimeType - Optional MIME type for more specific icon selection
+ * @returns React component for the file icon
+ */
+export function getFileIcon(type: FileType, mimeType?: string) {
+  switch (type) {
+    case "folder":
+      return <FolderIcon className="h-6 w-6 text-yellow-500" />;
+    case "image":
+      return <PhotoIcon className="h-6 w-6 text-green-500" />;
+    case "document":
+      return <DocumentIcon className="h-6 w-6 text-blue-500" />;
+    default:
+      return <DocumentIcon className="h-6 w-6 text-gray-500" />;
+  }
+}
+
diff --git a/app/lib/helpers/fileUtils.ts b/app/lib/helpers/fileUtils.ts
new file mode 100644
index 0000000..e09896b
--- /dev/null
+++ b/app/lib/helpers/fileUtils.ts
@@ -0,0 +1,17 @@
+/**
+ * File utility functions for formatting and processing file-related data
+ */
+
+/**
+ * Formats file size in bytes to human-readable format
+ * @param bytes - File size in bytes
+ * @returns Formatted file size string (e.g., "1.5 MB")
+ */
+export function formatFileSize(bytes?: number): string {
+  if (!bytes) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+}
+
diff --git a/app/lib/helpers/index.ts b/app/lib/helpers/index.ts
new file mode 100644
index 0000000..ae7e26b
--- /dev/null
+++ b/app/lib/helpers/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Central export point for all helper functions
+ * This allows importing multiple helpers from a single location
+ */
+
+export * from "./fileUtils";
+export * from "./dateUtils";
+export * from "./fileIcons";
+
diff --git a/app/lib/hooks/index.ts b/app/lib/hooks/index.ts
new file mode 100644
index 0000000..fd4b254
--- /dev/null
+++ b/app/lib/hooks/index.ts
@@ -0,0 +1,14 @@
+/**
+ * Custom React hooks
+ * 
+ * This folder contains reusable custom hooks that can be used throughout the application.
+ * 
+ * Example usage:
+ * ```tsx
+ * import { useCustomHook } from '@/lib/hooks';
+ * ```
+ */
+
+// Export hooks here as they are created
+// Example: export { useCustomHook } from './useCustomHook';
+
diff --git a/app/page.tsx b/app/page.tsx
index 7795b99..15295f1 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import AuthWrapper from "./components/AuthWrapper";
 import Header from "./components/Header";
 import Sidebar from "./components/Sidebar";
 import Breadcrumb from "./components/Breadcrumb";
@@ -151,45 +152,47 @@ export default function Home() {
   };
 
   return (
-    <div className="flex h-screen flex-col overflow-hidden bg-white">
-      <Header
-        selectedFileCount={selectedFileIds.length}
-        onShareClick={selectedFileIds.length > 0 ? handleShareClick : undefined}
-        onMenuClick={() => setSidebarOpen(true)}
-      />
-      <div className="flex flex-1 overflow-hidden">
-        <Sidebar
-          drives={mockDrives}
-          selectedDriveId={selectedDriveId}
-          onDriveSelect={handleDriveSelect}
-          isOpen={sidebarOpen}
-          onClose={() => setSidebarOpen(false)}
+    <AuthWrapper>
+      <div className="flex h-screen flex-col overflow-hidden bg-white">
+        <Header
+          selectedFileCount={selectedFileIds.length}
+          onShareClick={selectedFileIds.length > 0 ? handleShareClick : undefined}
+          onMenuClick={() => setSidebarOpen(true)}
         />
-        <main className="flex flex-1 flex-col overflow-hidden">
-          <Breadcrumb items={breadcrumbItems} onNavigate={handleBreadcrumbNavigate} />
-          <FileList
-            files={files}
-            currentPath={currentPath}
-            onFileSelect={handleFileSelect}
-            onFileDoubleClick={handleFileDoubleClick}
-            selectedFileIds={selectedFileIds}
+        <div className="flex flex-1 overflow-hidden">
+          <Sidebar
+            drives={mockDrives}
+            selectedDriveId={selectedDriveId}
+            onDriveSelect={handleDriveSelect}
+            isOpen={sidebarOpen}
+            onClose={() => setSidebarOpen(false)}
           />
-        </main>
+          <main className="flex flex-1 flex-col overflow-hidden">
+            <Breadcrumb items={breadcrumbItems} onNavigate={handleBreadcrumbNavigate} />
+            <FileList
+              files={files}
+              currentPath={currentPath}
+              onFileSelect={handleFileSelect}
+              onFileDoubleClick={handleFileDoubleClick}
+              selectedFileIds={selectedFileIds}
+            />
+          </main>
+        </div>
+        {selectedFileForPermissions && (
+          <PermissionsDialog
+            isOpen={permissionsDialogOpen}
+            onClose={() => {
+              setPermissionsDialogOpen(false);
+              setSelectedFileForPermissions(null);
+            }}
+            fileName={selectedFileForPermissions.name}
+            permissions={permissions}
+            onAddPermission={handleAddPermission}
+            onRemovePermission={handleRemovePermission}
+            onUpdatePermission={handleUpdatePermission}
+          />
+        )}
       </div>
-      {selectedFileForPermissions && (
-        <PermissionsDialog
-          isOpen={permissionsDialogOpen}
-          onClose={() => {
-            setPermissionsDialogOpen(false);
-            setSelectedFileForPermissions(null);
-          }}
-          fileName={selectedFileForPermissions.name}
-          permissions={permissions}
-          onAddPermission={handleAddPermission}
-          onRemovePermission={handleRemovePermission}
-          onUpdatePermission={handleUpdatePermission}
-        />
-      )}
-    </div>
+    </AuthWrapper>
   );
 }
diff --git a/package-lock.json b/package-lock.json
index 04ee917..7ab529c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "solid-file-manager",
       "version": "0.1.0",
       "dependencies": {
+        "@heroicons/react": "^2.2.0",
+        "@inrupt/solid-client-authn-browser": "^3.1.1",
         "next": "16.0.1",
         "react": "19.2.0",
         "react-dom": "19.2.0"
@@ -454,6 +456,15 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
+      "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16 || ^19.0.0-rc"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -972,6 +983,70 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/@inrupt/oidc-client": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@inrupt/oidc-client/-/oidc-client-1.11.6.tgz",
+      "integrity": "sha512-1rCTk1T6pdm/7gKozutZutk7jwmYBADlnkGGoI5ypke099NOCa5KFXjkQpbjsps0PRkKZ+0EaR70XN5+xqmViA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "acorn": "^7.4.1",
+        "base64-js": "^1.5.1",
+        "core-js": "^3.8.3",
+        "crypto-js": "^4.0.0",
+        "serialize-javascript": "^4.0.0"
+      }
+    },
+    "node_modules/@inrupt/oidc-client-ext": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@inrupt/oidc-client-ext/-/oidc-client-ext-3.1.1.tgz",
+      "integrity": "sha512-vftKD2u5nufZTFkdUDMS3Uxj5xNQwArP11OFaALFkq6/3RwCAhe3lwOv8hNzL7Scv98T+KbAErBM0TwGGrS69g==",
+      "license": "MIT",
+      "dependencies": {
+        "@inrupt/oidc-client": "^1.11.6",
+        "@inrupt/solid-client-authn-core": "^3.1.1",
+        "jose": "^5.1.3",
+        "uuid": "^11.1.0"
+      }
+    },
+    "node_modules/@inrupt/oidc-client/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/@inrupt/solid-client-authn-browser": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@inrupt/solid-client-authn-browser/-/solid-client-authn-browser-3.1.1.tgz",
+      "integrity": "sha512-Wd7TREmvdhTp+Sk88ei3hlg54sG1fNqkkPkuS+2tDBkcsXaViRQAEugVyh5pWRkd1xSFKrEzftb7UYEG4mJ0CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@inrupt/oidc-client-ext": "^3.1.1",
+        "@inrupt/solid-client-authn-core": "^3.1.1",
+        "events": "^3.3.0",
+        "jose": "^5.1.3",
+        "uuid": "^11.1.0"
+      }
+    },
+    "node_modules/@inrupt/solid-client-authn-core": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@inrupt/solid-client-authn-core/-/solid-client-authn-core-3.1.1.tgz",
+      "integrity": "sha512-1oDSQCh/pVtPlTyvLQ2uwHo+hpLJF7izg82tjB+Ge8jqGYwkQyId0BrfncpCk//uJXxgRIcfAQp2MhXYbZo80Q==",
+      "license": "MIT",
+      "dependencies": {
+        "events": "^3.3.0",
+        "jose": "^5.1.3",
+        "uuid": "^11.1.0"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -2442,6 +2517,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.8.25",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.25.tgz",
@@ -2648,6 +2743,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/core-js": {
+      "version": "3.46.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.46.0.tgz",
+      "integrity": "sha512-vDMm9B0xnqqZ8uSBpZ8sNtRtOdmfShrvT6h2TuQGLs0Is+cR0DYbj/KWP6ALVNbWPpqA/qPLoOuppJN07humpA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2663,6 +2769,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
+      "license": "MIT"
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -3484,6 +3596,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -4446,6 +4567,15 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/jose": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-5.10.0.tgz",
+      "integrity": "sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5424,6 +5554,15 @@
       ],
       "license": "MIT"
     },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
     "node_modules/react": {
       "version": "19.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
@@ -5594,6 +5733,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/safe-push-apply": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
@@ -5645,6 +5804,15 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/serialize-javascript": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+      "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -6426,6 +6594,19 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/uuid": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
+      "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/esm/bin/uuid"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 45cd722..284a855 100644
--- a/package.json
+++ b/package.json
@@ -9,18 +9,20 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@heroicons/react": "^2.2.0",
+    "@inrupt/solid-client-authn-browser": "^3.1.1",
+    "next": "16.0.1",
     "react": "19.2.0",
-    "react-dom": "19.2.0",
-    "next": "16.0.1"
+    "react-dom": "19.2.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
-    "eslint-config-next": "16.0.1"
+    "eslint-config-next": "16.0.1",
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }
diff --git a/public/solid.svg b/public/solid.svg
new file mode 100644
index 0000000..a9b20e4
--- /dev/null
+++ b/public/solid.svg
@@ -0,0 +1,9 @@
+<svg width="352" height="322" xmlns="http://www.w3.org/2000/svg">
+  <g fill-rule="nonzero" fill="none">
+    <path d="M87.97296 282.3527L27.24133 177.02207c-5.62041-9.75765-5.62041-21.77908 0-31.53674L87.97296 40.2328c5.64643-9.78367 16.08061-15.79439 27.32143-15.79439h121.3852c11.26684 0 21.72704 6.01072 27.32143 15.7944l60.75765 105.30458c5.62041 9.75766 5.62041 21.77909 0 31.53674l-60.73163 105.33061c-5.64643 9.78367-16.08061 15.79439-27.32143 15.79439H115.37245c-11.31888-.05204-21.72704-6.08878-27.3995-15.84643z" fill="#FFF"/>
+    <path d="M93.15102 275.19708l-57.1148-99.0597c-5.30816-9.1852-5.30816-20.50408 0-29.66326l57.1148-99.08572c5.33418-9.21122 15.14388-14.85765 25.73418-14.85765h114.2296c10.5903 0 20.42602 5.64643 25.73418 14.85765l57.16684 99.03368c5.30816 9.1852 5.30816 20.50408 0 29.66326L258.875 275.2231c-5.33418 9.21122-15.14388 14.85765-25.73418 14.85765H118.93724c-10.64234 0-20.45204-5.67245-25.78622-14.88367z" fill="#7C4DFF"/>
+    <path d="M118.46888 142.2328h117.53418c1.48316 0 2.65408-1.19695 2.65408-2.65409v-22.03928c0-14.6495-11.89132-26.54085-26.54081-26.54085h-70.56735c-20.5301-.026-37.15722 16.60105-37.15722 37.13115-.02594 7.83214 6.271 14.10306 14.07712 14.10306zM129.99592 239.60116H200.225c21.20663 0 38.43214-17.22551 38.43214-38.43214 0-7.07755-5.72449-12.82806-12.82806-12.82806H106.94184c-1.45715 0-2.55005 1.17091-2.55005 2.55v23.05408c-.02597 14.18112 11.47505 25.65612 25.60413 25.65612z" fill="#F7F7F7"/>
+    <path d="M109.59592 139.3185l87.66275 87.66276c5.80255 5.80255 15.19592 5.80255 20.99847 0l15.19592-15.19592c5.80255-5.80255 5.80255-15.19591 0-20.99847l-87.63673-87.66275c-5.80255-5.80255-15.19592-5.80255-20.99847 0l-15.19592 15.19592c-5.8546 5.80255-5.8546 15.22194-.02602 20.99847z" fill="#F7F7F7"/>
+    <path fill="#444" opacity=".3" d="M198.6898 228.46443l-51.4944-40.12347h11.39695zM144.35918 101.66698l40.56582 40.56581h13.7648z"/>
+  </g>
+</svg>