diff --git a/src/app/[locale]/portfolio/page.tsx b/src/app/[locale]/portfolio/page.tsx
index 96b2e3e..d122d49 100644
--- a/src/app/[locale]/portfolio/page.tsx
+++ b/src/app/[locale]/portfolio/page.tsx
@@ -1,10 +1,11 @@
 import { setRequestLocale } from 'next-intl/server';
 import type { Metadata } from 'next';
 import { getTranslations } from 'next-intl/server';
-import { PortfolioGrid } from '@/components/portfolio';
+import { PortfolioGrid, CategoryFilter } from '@/components/portfolio';
 
 type Props = {
   params: Promise<{ locale: string }>;
+  searchParams: Promise<{ category?: string }>;
 };
 
 const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'https://damjan-savic.com';
@@ -159,12 +160,20 @@ const projects = [
   },
 ];
 
-export default async function PortfolioPage({ params }: Props) {
+export default async function PortfolioPage({ params, searchParams }: Props) {
   const { locale } = await params;
   setRequestLocale(locale);
 
   const t = await getTranslations('portfolio');
 
+  // Get category filter from URL params
+  const { category } = await searchParams;
+
+  // Filter projects by category if specified
+  const filteredProjects = category
+    ? projects.filter((project) => project.category === category)
+    : projects;
+
   return (
     <div className="relative min-h-screen">
       <section className="py-24">
@@ -178,7 +187,9 @@ export default async function PortfolioPage({ params }: Props) {
             </p>
           </div>
 
-          <PortfolioGrid projects={projects} />
+          <CategoryFilter />
+
+          <PortfolioGrid projects={filteredProjects} />
         </div>
       </section>
     </div>