diff --git a/app/(dashboard)/dashboard/project-filter.tsx b/app/(dashboard)/dashboard/project-filter.tsx
index e7c6ea9..d942258 100644
--- a/app/(dashboard)/dashboard/project-filter.tsx
+++ b/app/(dashboard)/dashboard/project-filter.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import Link from 'next/link';
-import { Plus, FolderOpen, Clock, Users, Globe, Lock, UserPlus, Building2 } from 'lucide-react';
+import { Plus, FolderOpen, Clock, Users, Globe, Lock, UserPlus, Building2, ArrowUp, ArrowDown } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
@@ -57,13 +57,27 @@ function VisibilityIcon({ visibility }: { visibility: string }) {
   }
 }
 
+type SortOrder = 'desc' | 'asc';
+
 export function ProjectFilter({ projects, workspaces }: ProjectFilterProps) {
   const [selectedWorkspace, setSelectedWorkspace] = useState<string>('all');
+  const [sortOrder, setSortOrder] = useState<SortOrder>('desc');
 
-  const filtered =
-    selectedWorkspace === 'all'
-      ? projects
-      : projects.filter((p) => p.workspaceId === selectedWorkspace);
+  const filtered = useMemo(() => {
+    let result =
+      selectedWorkspace === 'all'
+        ? projects
+        : projects.filter((p) => p.workspaceId === selectedWorkspace);
+
+    // Sort by date
+    result = [...result].sort((a, b) => {
+      const dateA = new Date(a.updatedAt).getTime();
+      const dateB = new Date(b.updatedAt).getTime();
+      return sortOrder === 'desc' ? dateB - dateA : dateA - dateB;
+    });
+
+    return result;
+  }, [projects, selectedWorkspace, sortOrder]);
 
   return (
     <>
@@ -87,12 +101,32 @@ export function ProjectFilter({ projects, workspaces }: ProjectFilterProps) {
             </Select>
           )}
         </div>
-        <Button asChild>
-          <Link href="/projects/new">
-            <Plus className="h-4 w-4 mr-2" />
-            New Project
-          </Link>
-        </Button>
+        <div className="flex items-center gap-3">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setSortOrder(sortOrder === 'desc' ? 'asc' : 'desc')}
+            className="flex items-center gap-2"
+          >
+            {sortOrder === 'desc' ? (
+              <>
+                <ArrowDown className="h-4 w-4" />
+                Newest first
+              </>
+            ) : (
+              <>
+                <ArrowUp className="h-4 w-4" />
+                Oldest first
+              </>
+            )}
+          </Button>
+          <Button asChild>
+            <Link href="/projects/new">
+              <Plus className="h-4 w-4 mr-2" />
+              New Project
+            </Link>
+          </Button>
+        </div>
       </div>
 
       {/* Projects Grid */}
diff --git a/app/(dashboard)/projects/[projectId]/page.tsx b/app/(dashboard)/projects/[projectId]/page.tsx
index aa91e9f..c087536 100644
--- a/app/(dashboard)/projects/[projectId]/page.tsx
+++ b/app/(dashboard)/projects/[projectId]/page.tsx
@@ -2,23 +2,14 @@ import Link from 'next/link';
 import { notFound, redirect } from 'next/navigation';
 import {
   ArrowLeft,
-  Plus,
-  Settings,
-  Share2,
-  Play,
   Globe,
   Lock,
   UserPlus,
-  Users,
-  Building2,
 } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { VideoCard } from '@/components/video-card';
 import { GuestGate } from '@/components/guest-gate';
 import { auth } from '@/lib/auth';
 import { db } from '@/lib/db';
+import { ProjectContentClient } from './project-content-client';
 
 function VisibilityIcon({ visibility }: { visibility: string }) {
   switch (visibility) {
@@ -137,59 +128,49 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
       commentCount: activeVersion?._count.comments || 0,
       duration: formatDuration(activeVersion?.duration),
       lastUpdated: formatRelativeTime(video.updatedAt),
+      updatedAt: video.updatedAt.toISOString(),
     };
   });
 
   const canEdit = isOwner || project.members[0]?.role === 'ADMIN' || workspaceRole === 'OWNER' || workspaceRole === 'ADMIN';
   const isAuthenticated = !!session?.user?.id;
 
+  const projectData = {
+    name: project.name,
+    description: project.description,
+    visibility: project.visibility,
+    workspace: project.workspace,
+    members: project.members,
+  };
+
   // Guest name gate for unauthenticated users on public projects
   if (!isAuthenticated && isPublic) {
     return (
       <GuestGate>
-        <ProjectContent
-          project={project}
-          projectId={projectId}
-          videos={videos}
-          canEdit={false}
-          isOwner={false}
-          isPublic={isPublic}
-          workspaceRole={null}
-        />
+        <div className="px-6 lg:px-8 py-8 w-full">
+          {/* Back link */}
+          <div className="mb-6">
+            <Link
+              href="/dashboard"
+              className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <ArrowLeft className="h-4 w-4 mr-1" />
+              Back to Projects
+            </Link>
+          </div>
+          <ProjectContentClient
+            project={projectData}
+            projectId={projectId}
+            videos={videos}
+            canEdit={false}
+            isOwner={false}
+            workspaceRole={null}
+          />
+        </div>
       </GuestGate>
     );
   }
 
-  return (
-    <ProjectContent
-      project={project}
-      projectId={projectId}
-      videos={videos}
-      canEdit={canEdit}
-      isOwner={isOwner}
-      isPublic={isPublic}
-      workspaceRole={workspaceRole}
-    />
-  );
-}
-
-function ProjectContent({
-  project,
-  projectId,
-  videos,
-  canEdit,
-  isOwner,
-  isPublic,
-  workspaceRole,
-}: {
-  project: { name: string; description: string | null; visibility: string; workspace: { id: string; name: string } | null; members: { role: string }[] };
-  projectId: string;
-  videos: { id: string; title: string; thumbnailUrl: string; currentVersion: number; commentCount: number; duration: string; lastUpdated: string }[];
-  canEdit: boolean;
-  isOwner: boolean;
-  isPublic: boolean;
-  workspaceRole: string | null;
-}) {
   return (
     <div className="px-6 lg:px-8 py-8 w-full">
       {/* Back link */}
@@ -202,92 +183,14 @@ function ProjectContent({
           Back to Projects
         </Link>
       </div>
-
-      {/* Project Header */}
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
-        <div>
-          <div className="flex items-center gap-2 mb-1">
-            <h1 className="text-3xl font-bold tracking-tight">{project.name}</h1>
-            <Badge variant="outline" className="flex items-center gap-1">
-              <VisibilityIcon visibility={project.visibility} />
-              {project.visibility.toLowerCase()}
-            </Badge>
-          </div>
-          <div className="flex items-center gap-2">
-            {project.workspace && (
-              <Link href={`/workspaces/${project.workspace.id}`}>
-                <Badge variant="secondary" className="flex items-center gap-1 hover:bg-accent transition-colors">
-                  <Building2 className="h-3 w-3" />
-                  {project.workspace.name}
-                </Badge>
-              </Link>
-            )}
-            {project.description && (
-              <span className="text-muted-foreground">{project.description}</span>
-            )}
-          </div>
-        </div>
-
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm" asChild>
-            <Link href={`/projects/${projectId}/share`}>
-              <Share2 className="h-4 w-4 mr-2" />
-              Share
-            </Link>
-          </Button>
-          {(isOwner || project.members[0]?.role === 'ADMIN') && (
-            <>
-              <Button variant="outline" size="sm" asChild>
-                <Link href={`/projects/${projectId}/members`}>
-                  <Users className="h-4 w-4 mr-2" />
-                  Members
-                </Link>
-              </Button>
-              <Button variant="outline" size="sm" asChild>
-                <Link href={`/projects/${projectId}/settings`}>
-                  <Settings className="h-4 w-4 mr-2" />
-                  Settings
-                </Link>
-              </Button>
-            </>
-          )}
-          {canEdit && (
-            <Button size="sm" asChild>
-              <Link href={`/projects/${projectId}/videos/new`}>
-                <Plus className="h-4 w-4 mr-2" />
-                Add Video
-              </Link>
-            </Button>
-          )}
-        </div>
-      </div>
-
-      {/* Videos Grid */}
-      {videos.length > 0 ? (
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-          {videos.map((video) => (
-            <VideoCard key={video.id} video={video} projectId={projectId} />
-          ))}
-        </div>
-      ) : (
-        <Card className="border-dashed">
-          <CardContent className="flex flex-col items-center justify-center py-16">
-            <Play className="h-12 w-12 text-muted-foreground mb-4" />
-            <h3 className="text-lg font-medium mb-2">No videos yet</h3>
-            <p className="text-muted-foreground text-center mb-4">
-              Add your first video to start collecting feedback
-            </p>
-            {canEdit && (
-              <Button asChild>
-                <Link href={`/projects/${projectId}/videos/new`}>
-                  <Plus className="h-4 w-4 mr-2" />
-                  Add Video
-                </Link>
-              </Button>
-            )}
-          </CardContent>
-        </Card>
-      )}
+      <ProjectContentClient
+        project={projectData}
+        projectId={projectId}
+        videos={videos}
+        canEdit={canEdit}
+        isOwner={isOwner}
+        workspaceRole={workspaceRole}
+      />
     </div>
   );
 }
diff --git a/app/(dashboard)/projects/[projectId]/project-content-client.tsx b/app/(dashboard)/projects/[projectId]/project-content-client.tsx
new file mode 100644
index 0000000..e2d7b23
--- /dev/null
+++ b/app/(dashboard)/projects/[projectId]/project-content-client.tsx
@@ -0,0 +1,176 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import Link from 'next/link';
+import {
+  Plus,
+  Settings,
+  Share2,
+  Play,
+  Users,
+  Building2,
+  ArrowUp,
+  ArrowDown,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { VideoCard } from '@/components/video-card';
+
+type SortOrder = 'desc' | 'asc';
+
+interface SerializedVideo {
+  id: string;
+  title: string;
+  thumbnailUrl: string;
+  currentVersion: number;
+  commentCount: number;
+  duration: string;
+  lastUpdated: string;
+  updatedAt: string;
+}
+
+interface ProjectContentClientProps {
+  project: {
+    name: string;
+    description: string | null;
+    visibility: string;
+    workspace: { id: string; name: string } | null;
+    members: { role: string }[];
+  };
+  projectId: string;
+  videos: SerializedVideo[];
+  canEdit: boolean;
+  isOwner: boolean;
+  workspaceRole: string | null;
+}
+
+export function ProjectContentClient({
+  project,
+  projectId,
+  videos,
+  canEdit,
+  isOwner,
+  workspaceRole,
+}: ProjectContentClientProps) {
+  const [sortOrder, setSortOrder] = useState<SortOrder>('desc');
+
+  const sortedVideos = useMemo(() => {
+    return [...videos].sort((a, b) => {
+      const dateA = new Date(a.updatedAt).getTime();
+      const dateB = new Date(b.updatedAt).getTime();
+      return sortOrder === 'desc' ? dateB - dateA : dateA - dateB;
+    });
+  }, [videos, sortOrder]);
+
+  return (
+    <>
+      {/* Project Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
+        <div>
+          <div className="flex items-center gap-2 mb-1">
+            <h1 className="text-3xl font-bold tracking-tight">{project.name}</h1>
+            <Badge variant="outline" className="flex items-center gap-1">
+              {project.visibility === 'PUBLIC' && <span className="text-xs">🌐</span>}
+              {project.visibility === 'INVITE' && <span className="text-xs">📧</span>}
+              {project.visibility === 'PRIVATE' && <span className="text-xs">🔒</span>}
+              {project.visibility.toLowerCase()}
+            </Badge>
+          </div>
+          <div className="flex items-center gap-2">
+            {project.workspace && (
+              <Link href={`/workspaces/${project.workspace.id}`}>
+                <Badge variant="secondary" className="flex items-center gap-1 hover:bg-accent transition-colors">
+                  <Building2 className="h-3 w-3" />
+                  {project.workspace.name}
+                </Badge>
+              </Link>
+            )}
+            {project.description && (
+              <span className="text-muted-foreground">{project.description}</span>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {/* Sort Button - Left of Share */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setSortOrder(sortOrder === 'desc' ? 'asc' : 'desc')}
+            className="flex items-center gap-2"
+          >
+            {sortOrder === 'desc' ? (
+              <>
+                <ArrowDown className="h-4 w-4" />
+                Newest first
+              </>
+            ) : (
+              <>
+                <ArrowUp className="h-4 w-4" />
+                Oldest first
+              </>
+            )}
+          </Button>
+          <Button variant="outline" size="sm" asChild>
+            <Link href={`/projects/${projectId}/share`}>
+              <Share2 className="h-4 w-4 mr-2" />
+              Share
+            </Link>
+          </Button>
+          {(isOwner || project.members[0]?.role === 'ADMIN') && (
+            <>
+              <Button variant="outline" size="sm" asChild>
+                <Link href={`/projects/${projectId}/members`}>
+                  <Users className="h-4 w-4 mr-2" />
+                  Members
+                </Link>
+              </Button>
+              <Button variant="outline" size="sm" asChild>
+                <Link href={`/projects/${projectId}/settings`}>
+                  <Settings className="h-4 w-4 mr-2" />
+                  Settings
+                </Link>
+              </Button>
+            </>
+          )}
+          {canEdit && (
+            <Button size="sm" asChild>
+              <Link href={`/projects/${projectId}/videos/new`}>
+                <Plus className="h-4 w-4 mr-2" />
+                Add Video
+              </Link>
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Videos Grid */}
+      {videos.length > 0 ? (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {sortedVideos.map((video) => (
+            <VideoCard key={video.id} video={video} projectId={projectId} />
+          ))}
+        </div>
+      ) : (
+        <Card className="border-dashed">
+          <CardContent className="flex flex-col items-center justify-center py-16">
+            <Play className="h-12 w-12 text-muted-foreground mb-4" />
+            <h3 className="text-lg font-medium mb-2">No videos yet</h3>
+            <p className="text-muted-foreground text-center mb-4">
+              Add your first video to start collecting feedback
+            </p>
+            {canEdit && (
+              <Button asChild>
+                <Link href={`/projects/${projectId}/videos/new`}>
+                  <Plus className="h-4 w-4 mr-2" />
+                  Add Video
+                </Link>
+              </Button>
+            )}
+          </CardContent>
+        </Card>
+      )}
+    </>
+  );
+}