diff --git a/app/api/product-categories/route.ts b/app/api/product-categories/route.ts
new file mode 100644
index 0000000..4f6fcc2
--- /dev/null
+++ b/app/api/product-categories/route.ts
@@ -0,0 +1,76 @@
+import { NextResponse } from 'next/server';
+
+export async function GET(request: Request) {
+  try {
+    // Get the authorization header from the incoming request
+    const authHeader = request.headers.get('authorization');
+
+    const headers: HeadersInit = {
+      'Content-Type': 'application/json',
+    };
+
+    // Add the authorization header if it exists
+    if (authHeader) {
+      headers['Authorization'] = authHeader;
+    }
+
+    const response = await fetch(
+      process.env.NEXT_PUBLIC_API_URL + '/api/product-categories',
+      {
+        method: 'GET',
+        headers,
+      },
+    );
+
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Failed to fetch product categories' },
+      { status: 500 },
+    );
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+
+    // Get the authorization header from the incoming request
+    const authHeader = request.headers.get('authorization');
+
+    const headers: HeadersInit = {
+      'Content-Type': 'application/json',
+    };
+
+    // Add the authorization header if it exists
+    if (authHeader) {
+      headers['Authorization'] = authHeader;
+    }
+
+    const response = await fetch(
+      process.env.NEXT_PUBLIC_API_URL + '/api/product-categories',
+      {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(body),
+      },
+    );
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to create product category', details: data },
+        { status: response.status },
+      );
+    }
+
+    return NextResponse.json(data);
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Failed to create product category' },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/products/route.ts b/app/api/products/route.ts
new file mode 100644
index 0000000..3f0e1ce
--- /dev/null
+++ b/app/api/products/route.ts
@@ -0,0 +1,76 @@
+import { NextResponse } from 'next/server';
+
+export async function GET(request: Request) {
+  try {
+    // Get the authorization header from the incoming request
+    const authHeader = request.headers.get('authorization');
+
+    const headers: HeadersInit = {
+      'Content-Type': 'application/json',
+    };
+
+    // Add the authorization header if it exists
+    if (authHeader) {
+      headers['Authorization'] = authHeader;
+    }
+
+    const response = await fetch(
+      process.env.NEXT_PUBLIC_API_URL + '/api/products',
+      {
+        method: 'GET',
+        headers,
+      },
+    );
+
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Failed to fetch products' },
+      { status: 500 },
+    );
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+
+    // Get the authorization header from the incoming request
+    const authHeader = request.headers.get('authorization');
+
+    const headers: HeadersInit = {
+      'Content-Type': 'application/json',
+    };
+
+    // Add the authorization header if it exists
+    if (authHeader) {
+      headers['Authorization'] = authHeader;
+    }
+
+    const response = await fetch(
+      process.env.NEXT_PUBLIC_API_URL + '/api/products',
+      {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(body),
+      },
+    );
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to create product', details: data },
+        { status: response.status },
+      );
+    }
+
+    return NextResponse.json(data);
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Failed to create product' },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/apps/products/categories/components/NewCategoryDrawerProps.tsx b/app/apps/products/categories/components/NewCategoryDrawerProps.tsx
new file mode 100644
index 0000000..46ac493
--- /dev/null
+++ b/app/apps/products/categories/components/NewCategoryDrawerProps.tsx
@@ -0,0 +1,118 @@
+'use client';
+
+import { useState } from 'react';
+
+import {
+  Button,
+  Drawer,
+  DrawerProps,
+  LoadingOverlay,
+  Stack,
+  TextInput,
+  Textarea,
+} from '@mantine/core';
+import { isNotEmpty, useForm } from '@mantine/form';
+import { notifications } from '@mantine/notifications';
+
+import { useAuth } from '@/hooks/useAuth';
+
+type NewCategoryDrawerProps = Omit<DrawerProps, 'title' | 'children'> & {
+  onCategoryCreated?: () => void;
+};
+
+export const NewCategoryDrawer = ({
+  onCategoryCreated,
+  ...drawerProps
+}: NewCategoryDrawerProps) => {
+  const { user, accessToken } = useAuth();
+  const [loading, setLoading] = useState(false);
+
+  const form = useForm({
+    mode: 'controlled',
+    initialValues: {
+      title: '',
+      description: '',
+    },
+    validate: {
+      title: isNotEmpty('Category title cannot be empty'),
+    },
+  });
+
+  const handleSubmit = async (values: typeof form.values) => {
+    setLoading(true);
+    try {
+      const payload = {
+        ...values,
+        createdById: user?.id,
+      };
+
+      const response = await fetch('/api/product-categories', {
+        method: 'POST',
+        headers: {
+          Authorization: 'Bearer ' + accessToken,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to create category');
+      }
+
+      notifications.show({
+        title: 'Success',
+        message: 'Category created successfully',
+        color: 'green',
+      });
+
+      form.reset();
+
+      if (drawerProps.onClose) {
+        drawerProps.onClose();
+      }
+
+      if (onCategoryCreated) {
+        onCategoryCreated();
+      }
+    } catch (error) {
+      notifications.show({
+        title: 'Error',
+        message:
+          error instanceof Error ? error.message : 'Failed to create category',
+        color: 'red',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Drawer {...drawerProps} title="Create a new product category">
+      <LoadingOverlay visible={loading} />
+      <form onSubmit={form.onSubmit(handleSubmit)}>
+        <Stack>
+          <TextInput
+            label="Title"
+            placeholder="Category title"
+            key={form.key('title')}
+            {...form.getInputProps('title')}
+            required
+          />
+          <Textarea
+            label="Description"
+            placeholder="Category description"
+            key={form.key('description')}
+            {...form.getInputProps('description')}
+          />
+          <Button type="submit" mt="md" loading={loading}>
+            Create Category
+          </Button>
+        </Stack>
+      </form>
+    </Drawer>
+  );
+};
+
+export default NewCategoryDrawer;
diff --git a/app/apps/products/categories/page.tsx b/app/apps/products/categories/page.tsx
new file mode 100644
index 0000000..5fd594e
--- /dev/null
+++ b/app/apps/products/categories/page.tsx
@@ -0,0 +1,174 @@
+'use client';
+
+import { useCallback } from 'react';
+
+import {
+  Anchor,
+  Button,
+  Group,
+  Paper,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  Title,
+} from '@mantine/core';
+import { useDisclosure, useFetch } from '@mantine/hooks';
+import { IconMoodEmpty, IconPlus } from '@tabler/icons-react';
+
+import NewCategoryDrawer from '@/app/apps/products/categories/components/NewCategoryDrawerProps';
+import { ErrorAlert, PageHeader, Surface } from '@/components';
+import { useAuth } from '@/hooks/useAuth';
+import { PATH_DASHBOARD } from '@/routes';
+import { IApiResponse } from '@/types/api-response';
+import { IProductCategory } from '@/types/products';
+
+const items = [
+  { title: 'Dashboard', href: PATH_DASHBOARD.default },
+  { title: 'Apps', href: '#' },
+  { title: 'Products', href: '#' },
+  { title: 'Categories', href: '#' },
+].map((item, index) => (
+  <Anchor href={item.href} key={index}>
+    {item.title}
+  </Anchor>
+));
+
+const CategoryCard = ({ data }: { data: IProductCategory }) => (
+  <Paper p="md" shadow="md" radius="md">
+    <Title order={4} mb="xs">{data.title}</Title>
+    <Text size="sm" c="dimmed" mb="md" lineClamp={2}>
+      {data.description || 'No description'}
+    </Text>
+    <Group>
+      <Text size="sm">Products: {data.productCount}</Text>
+    </Group>
+  </Paper>
+);
+
+function Categories() {
+  const { permissions, accessToken } = useAuth();
+  const {
+    data: categoriesData,
+    loading: categoriesLoading,
+    error: categoriesError,
+    refetch: refetchCategories,
+  } = useFetch<IApiResponse<IProductCategory[]>>('/api/product-categories', {
+    headers: {
+      Authorization: 'Bearer ' + accessToken,
+      'Content-Type': 'application/json',
+    },
+  });
+
+  const canAddCategory = permissions?.includes('Permissions.Products.Create');
+
+  const [newDrawerOpened, { open: newCategoryOpen, close: newCategoryClose }] =
+    useDisclosure(false);
+
+  const handleCategoryCreated = useCallback(() => {
+    refetchCategories();
+  }, [refetchCategories]);
+
+  const categoryItems = categoriesData?.data?.map((category) => (
+    <CategoryCard key={category.id} data={category} />
+  ));
+
+  const renderContent = () => {
+    if (categoriesLoading) {
+      return (
+        <SimpleGrid
+          cols={{ base: 1, sm: 2, lg: 3, xl: 4 }}
+          spacing={{ base: 10, sm: 'xl' }}
+          verticalSpacing={{ base: 'md', sm: 'xl' }}
+        >
+          {Array.from({ length: 8 }).map((_, i) => (
+            <Skeleton
+              key={`category-loading-${i}`}
+              visible={true}
+              height={150}
+            />
+          ))}
+        </SimpleGrid>
+      );
+    }
+
+    if (categoriesError || !categoriesData?.succeeded) {
+      return (
+        <ErrorAlert
+          title="Error loading categories"
+          message={categoriesData?.errors?.join(',')}
+        />
+      );
+    }
+
+    if (!categoriesData?.data?.length) {
+      return (
+        <Surface component={Paper} p="md">
+          <Stack align="center">
+            <IconMoodEmpty size={24} />
+            <Title order={4}>No categories found</Title>
+            <Text>
+              You don&apos;t have any product categories yet. Create one to get started.
+            </Text>
+            {canAddCategory && (
+              <Button
+                leftSection={<IconPlus size={18} />}
+                onClick={newCategoryOpen}
+              >
+                New Category
+              </Button>
+            )}
+          </Stack>
+        </Surface>
+      );
+    }
+
+    return (
+      <SimpleGrid
+        cols={{ base: 1, sm: 2, lg: 3, xl: 4 }}
+        spacing={{ base: 10, sm: 'xl' }}
+        verticalSpacing={{ base: 'md', sm: 'xl' }}
+      >
+        {categoryItems}
+      </SimpleGrid>
+    );
+  };
+
+  return (
+    <>
+      <>
+        <title>Product Categories | DesignSparx</title>
+        <meta
+          name="description"
+          content="Manage product categories in your dashboard"
+        />
+      </>
+      <PageHeader
+        title="Product Categories"
+        breadcrumbItems={items}
+        actionButton={
+          canAddCategory &&
+          categoriesData?.data?.length && (
+            <Button
+              leftSection={<IconPlus size={18} />}
+              onClick={newCategoryOpen}
+            >
+              New Category
+            </Button>
+          )
+        }
+      />
+
+      {renderContent()}
+
+      <NewCategoryDrawer
+        opened={newDrawerOpened}
+        onClose={newCategoryClose}
+        position="right"
+        onCategoryCreated={handleCategoryCreated}
+      />
+    </>
+  );
+}
+
+export default Categories;
diff --git a/app/apps/products/components/NewProductDrawer.tsx b/app/apps/products/components/NewProductDrawer.tsx
new file mode 100644
index 0000000..050ec31
--- /dev/null
+++ b/app/apps/products/components/NewProductDrawer.tsx
@@ -0,0 +1,202 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import {
+  Button,
+  Drawer,
+  DrawerProps,
+  LoadingOverlay,
+  NumberInput,
+  Select,
+  Stack,
+  TextInput,
+  Textarea,
+} from '@mantine/core';
+import { DateInput } from '@mantine/dates';
+import { isNotEmpty, useForm } from '@mantine/form';
+import { notifications } from '@mantine/notifications';
+
+import { useAuth } from '@/hooks/useAuth';
+import { IProductCategory } from '@/types/products';
+
+type NewProjectDrawerProps = Omit<DrawerProps, 'title' | 'children'> & {
+  onProductCreated?: () => void;
+};
+
+export const NewProductDrawer = ({
+  onProductCreated,
+  ...drawerProps
+}: NewProjectDrawerProps) => {
+  const { user, accessToken } = useAuth();
+  const [loading, setLoading] = useState(false);
+  const [categories, setCategories] = useState<
+    { value: string; label: string }[]
+  >([]);
+  const [categoriesLoading, setCategoriesLoading] = useState(false);
+
+  // Fetch categories when drawer opens
+  useEffect(() => {
+    if (drawerProps.opened) {
+      fetchCategories();
+    }
+  }, [drawerProps.opened]);
+
+  const fetchCategories = async () => {
+    setCategoriesLoading(true);
+    try {
+      const response = await fetch('/api/product-categories', {
+        method: 'GET',
+        headers: {
+          Authorization: 'Bearer ' + accessToken,
+          'Content-Type': 'application/json',
+        },
+      });
+
+      const result = await response.json();
+
+      if (result.succeeded && result.data) {
+        const categoryOptions = result.data.map(
+          (category: IProductCategory) => ({
+            value: category.id,
+            label: category.title,
+          }),
+        );
+        setCategories(categoryOptions);
+      }
+    } catch (error) {
+      console.error('Error fetching categories:', error);
+    } finally {
+      setCategoriesLoading(false);
+    }
+  };
+
+  const form = useForm({
+    mode: 'controlled',
+    initialValues: {
+      title: '',
+      description: '',
+      price: 0,
+      quantityInStock: 0,
+      sku: '',
+      status: 1,
+      categoryId: '',
+    },
+    validate: {
+      title: isNotEmpty('Product title cannot be empty'),
+      description: isNotEmpty('Product description cannot be empty'),
+      price: isNotEmpty('Price cannot be empty'),
+      quantityInStock: isNotEmpty('Quantity in stock cannot be empty'),
+      categoryId: isNotEmpty('Category cannot be empty'),
+    },
+  });
+
+  const handleSubmit = async (values: typeof form.values) => {
+    setLoading(true);
+    try {
+      const payload = {
+        ...values,
+        createdById: user?.id,
+      };
+
+      const response = await fetch('/api/products', {
+        method: 'POST',
+        headers: {
+          Authorization: 'Bearer ' + accessToken,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to create product');
+      }
+
+      // Show success notification
+      notifications.show({
+        title: 'Success',
+        message: 'Product created successfully',
+        color: 'green',
+      });
+
+      // Reset form
+      form.reset();
+
+      // Close drawer
+      if (drawerProps.onClose) {
+        drawerProps.onClose();
+      }
+
+      // Trigger refresh of products list
+      if (onProductCreated) {
+        onProductCreated();
+      }
+    } catch (error) {
+      // Show error notification
+      notifications.show({
+        title: 'Error',
+        message:
+          error instanceof Error ? error.message : 'Failed to create product',
+        color: 'red',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Drawer {...drawerProps} title="Create a new product">
+      <LoadingOverlay visible={loading} />
+      <form onSubmit={form.onSubmit(handleSubmit)}>
+        <Stack>
+          <TextInput
+            label="Title"
+            placeholder="title"
+            key={form.key('title')}
+            {...form.getInputProps('title')}
+            required
+          />
+          <Textarea
+            label="Description"
+            placeholder="description"
+            key={form.key('description')}
+            {...form.getInputProps('description')}
+            required
+          />
+          <NumberInput
+            label="Price"
+            placeholder="price"
+            {...form.getInputProps('price')}
+            required
+          />
+          <NumberInput
+            label="Quantity in stock"
+            placeholder="quantity in stock"
+            {...form.getInputProps('quantityInStock')}
+            required
+          />
+          <TextInput
+            label="SKU"
+            placeholder="Stock Keeping Unit"
+            {...form.getInputProps('sku')}
+          />
+          <Select
+            label="Category"
+            placeholder="Select category"
+            data={categories}
+            disabled={categoriesLoading}
+            {...form.getInputProps('categoryId')}
+            required
+          />
+          <Button type="submit" mt="md" loading={loading}>
+            Create Product
+          </Button>
+        </Stack>
+      </form>
+    </Drawer>
+  );
+};
+
+export default NewProductDrawer;
diff --git a/app/apps/products/components/ProductCard/ProductsCard.module.css b/app/apps/products/components/ProductCard/ProductsCard.module.css
new file mode 100644
index 0000000..fdf3b53
--- /dev/null
+++ b/app/apps/products/components/ProductCard/ProductsCard.module.css
@@ -0,0 +1,3 @@
+.tasksCompleted {
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+}
diff --git a/app/apps/products/components/ProductCard/ProductsCard.stories.tsx b/app/apps/products/components/ProductCard/ProductsCard.stories.tsx
new file mode 100644
index 0000000..ed2f4e1
--- /dev/null
+++ b/app/apps/products/components/ProductCard/ProductsCard.stories.tsx
@@ -0,0 +1,36 @@
+import ProductsCard from './ProductsCard';
+
+import type { StoryObj } from '@storybook/react';
+
+const MOCKS = {
+  id: 'fe2c25c6-2cbc-4c73-9edc-8477af0000a8',
+  title: 'Gembucket',
+  description:
+    'Phasellus sit amet erat. Nulla tempus. Vivamus in felis eu sapien cursus vestibulum.\n\nProin eu mi. Nulla ac enim. In tempor, turpis nec euismod scelerisque, quam turpis adipiscing lorem, vitae mattis nibh ligula nec sem.\n\nDuis aliquam convallis nunc. Proin at turpis a pede posuere nonummy. Integer non velit.',
+  status: 'active',
+  image: null,
+  completion: 86,
+};
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Products/Card',
+  component: ProductsCard,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ProductsCard>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {
+  args: {
+    ...MOCKS,
+    style: { width: 500 },
+  },
+};
diff --git a/app/apps/products/components/ProductCard/ProductsCard.tsx b/app/apps/products/components/ProductCard/ProductsCard.tsx
new file mode 100644
index 0000000..8c29fee
--- /dev/null
+++ b/app/apps/products/components/ProductCard/ProductsCard.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { Badge, Group, Paper, PaperProps, Text, Title } from '@mantine/core';
+
+import { IProduct } from '@/types/products';
+
+interface ProductsCardProps extends Omit<PaperProps, 'children'> {
+  data: IProduct;
+}
+
+export function ProductsCard({ data, ...props }: ProductsCardProps) {
+  return (
+    <Paper {...props}>
+      <Group justify="space-between" mb="xs">
+        <Title order={4}>{data.title}</Title>
+        <Badge color={data.isActive ? 'green' : 'red'}>
+          {data.isActive ? 'Active' : 'Inactive'}
+        </Badge>
+      </Group>
+
+      <Text lineClamp={2} mb="md" size="sm" c="dimmed">
+        {data.description}
+      </Text>
+
+      <Group>
+        <Text fw={500}>Price: ${data.price.toFixed(2)}</Text>
+        <Text>Stock: {data.quantityInStock}</Text>
+      </Group>
+
+      <Text size="sm" mt="md">
+        Category:{' '}
+        {data.categoryName ||
+          (data.category && data.category.title) ||
+          'Uncategorized'}
+      </Text>
+
+      <Text size="xs" c="dimmed" mt="sm">
+        SKU: {data.sku || 'N/A'}
+      </Text>
+    </Paper>
+  );
+}
+
+export default ProductsCard;
diff --git a/app/apps/products/layout.tsx b/app/apps/products/layout.tsx
new file mode 100644
index 0000000..d4bff3d
--- /dev/null
+++ b/app/apps/products/layout.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+
+import { Container, Stack } from '@mantine/core';
+
+export default function DashboardLayout({ children }: PropsWithChildren) {
+  return (
+    <Container fluid>
+      <Stack gap="lg">
+        {children}
+      </Stack>
+    </Container>
+  );
+}
diff --git a/app/apps/products/page.tsx b/app/apps/products/page.tsx
new file mode 100644
index 0000000..7ba5535
--- /dev/null
+++ b/app/apps/products/page.tsx
@@ -0,0 +1,169 @@
+'use client';
+
+import { useCallback } from 'react';
+
+import {
+  Anchor,
+  Button,
+  Paper,
+  PaperProps,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  Title,
+} from '@mantine/core';
+import { useDisclosure, useFetch } from '@mantine/hooks';
+import { IconMoodEmpty, IconPlus } from '@tabler/icons-react';
+
+import NewProductDrawer from '@/app/apps/products/components/NewProductDrawer';
+import ProductsCard from '@/app/apps/products/components/ProductCard/ProductsCard';
+import { ErrorAlert, PageHeader, Surface } from '@/components';
+import { useAuth } from '@/hooks/useAuth';
+import { PATH_DASHBOARD } from '@/routes';
+import { IApiResponse } from '@/types/api-response';
+import { IProduct, IProductCategory } from '@/types/products';
+
+const items = [
+  { title: 'Dashboard', href: PATH_DASHBOARD.default },
+  { title: 'Apps', href: '#' },
+  { title: 'Products', href: '#' },
+].map((item, index) => (
+  <Anchor href={item.href} key={index}>
+    {item.title}
+  </Anchor>
+));
+
+const CARD_PROPS: Omit<PaperProps, 'children'> = {
+  p: 'md',
+  shadow: 'md',
+  radius: 'md',
+};
+
+function Products() {
+  const { permissions, accessToken } = useAuth();
+  const {
+    data: productsData,
+    loading: productsLoading,
+    error: productsError,
+    refetch: refetchProducts,
+  } = useFetch<IApiResponse<IProduct[]>>('/api/products', {
+    headers: {
+      Authorization: 'Bearer ' + accessToken,
+      'Content-Type': 'application/json',
+    },
+  });
+
+  // Check if the user has a can add project
+  const canAddProject = permissions?.includes('Permissions.Projects.Create');
+
+  const [newDrawerOpened, { open: newProjectOpen, close: newProductClose }] =
+    useDisclosure(false);
+
+  const handleProductCreated = useCallback(() => {
+    refetchProducts();
+  }, [refetchProducts]);
+
+  const projectItems = productsData?.data?.map((p: any) => (
+    <ProductsCard key={p.id} data={p} {...CARD_PROPS} />
+  ));
+
+  const renderContent = () => {
+    if (productsLoading) {
+      return (
+        <SimpleGrid
+          cols={{ base: 1, sm: 2, lg: 3, xl: 4 }}
+          spacing={{ base: 10, sm: 'xl' }}
+          verticalSpacing={{ base: 'md', sm: 'xl' }}
+        >
+          {Array.from({ length: 8 }).map((o, i) => (
+            <Skeleton
+              key={`project-loading-${i}`}
+              visible={true}
+              height={300}
+            />
+          ))}
+        </SimpleGrid>
+      );
+    }
+
+    if (productsError || !productsData?.succeeded) {
+      return (
+        <ErrorAlert
+          title="Error loading products"
+          message={productsData?.errors?.join(',')}
+        />
+      );
+    }
+
+    if (!productsData?.data?.length) {
+      return (
+        <Surface component={Paper} p="md">
+          <Stack align="center">
+            <IconMoodEmpty size={24} />
+            <Title order={4}>No products found</Title>
+            <Text>
+              You don&apos;t have any products yet. Create one to get started.
+            </Text>
+            {canAddProject && (
+              <Button
+                leftSection={<IconPlus size={18} />}
+                onClick={newProjectOpen}
+              >
+                New Product
+              </Button>
+            )}
+          </Stack>
+        </Surface>
+      );
+    }
+
+    return (
+      <SimpleGrid
+        cols={{ base: 1, sm: 2, lg: 3, xl: 4 }}
+        spacing={{ base: 10, sm: 'xl' }}
+        verticalSpacing={{ base: 'md', sm: 'xl' }}
+      >
+        {projectItems}
+      </SimpleGrid>
+    );
+  };
+
+  return (
+    <>
+      <>
+        <title>Products | DesignSparx</title>
+        <meta
+          name="description"
+          content="Explore our versatile dashboard website template featuring a stunning array of themes and meticulously crafted components. Elevate your web project with seamless integration, customizable themes, and a rich variety of components for a dynamic user experience. Effortlessly bring your data to life with our intuitive dashboard template, designed to streamline development and captivate users. Discover endless possibilities in design and functionality today!"
+        />
+      </>
+      <PageHeader
+        title="Products"
+        breadcrumbItems={items}
+        actionButton={
+          canAddProject &&
+          productsData?.data?.length && (
+            <Button
+              leftSection={<IconPlus size={18} />}
+              onClick={newProjectOpen}
+            >
+              New Product
+            </Button>
+          )
+        }
+      />
+
+      {renderContent()}
+
+      <NewProductDrawer
+        opened={newDrawerOpened}
+        onClose={newProductClose}
+        position="right"
+        onProductCreated={handleProductCreated}
+      />
+    </>
+  );
+}
+
+export default Products;
diff --git a/components/Navigation/Links/Links.module.css b/components/Navigation/Links/Links.module.css
index 57d19a5..9167a19 100644
--- a/components/Navigation/Links/Links.module.css
+++ b/components/Navigation/Links/Links.module.css
@@ -56,44 +56,26 @@
   display: block;
   text-decoration: none;
   padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
-  margin-left: var(--mantine-spacing-xl);
   font-size: var(--mantine-font-size-sm);
-  border-left: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-
-  @mixin light {
-    color: var(--mantine-color-white);
-  }
-
-  @mixin dark {
-    color: var(--mantine-color-white);
-  }
+  background: none;
+  border: none;
+  width: 100%;
+  text-align: left;
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+  cursor: pointer;
+  transition: all ease .2s;
 
   @mixin hover {
     transition: all ease .2s;
-
-    @mixin light {
-      background-color: var(--mantine-color-white);
-      color: var(--mantine-primary-color-filled);
-    }
-
-    @mixin dark {
-      background-color: var(--mantine-color-black);
-      color: var(--mantine-primary-color-light-color);
-    }
+    background-color: light-dark(var(--mantine-color-white), var(--mantine-color-black));
+    color: light-dark(var(--mantine-primary-color-filled), var(--mantine-primary-color-light-color));
   }
 
   &[data-active] {
     &,
     &:hover {
-      @mixin light {
-        background-color: var(--mantine-primary-color-filled-hover);
-        color: var(--mantine-color-white);
-      }
-
-      @mixin dark {
-        background-color: var(--mantine-primary-color-light-hover);
-        color: var(--mantine-color-black);
-      }
+      background-color: light-dark(var(--mantine-color-dark-2), var(--mantine-color-dark-9));
+      color: light-dark(var(--mantine-primary-color-filled), var(--mantine-primary-color-light-color));
     }
   }
 }
diff --git a/components/Navigation/Links/Links.tsx b/components/Navigation/Links/Links.tsx
index 7bcb5c8..162c817 100644
--- a/components/Navigation/Links/Links.tsx
+++ b/components/Navigation/Links/Links.tsx
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 
 import {
   Box,
+  Button,
   Collapse,
   Group,
   Menu,
@@ -48,7 +49,6 @@ export function LinksGroup(props: LinksGroupProps) {
   const LinkItem = ({ link }: { link: { label: string; link: string } }) => {
     return (
       <Text
-        component="button"
         className={classes.link}
         onClick={() => {
           router.push(link.link);
diff --git a/components/Navigation/Navigation.tsx b/components/Navigation/Navigation.tsx
index 676bac9..03a4acd 100644
--- a/components/Navigation/Navigation.tsx
+++ b/components/Navigation/Navigation.tsx
@@ -19,6 +19,7 @@ import {
   IconListDetails,
   IconLogin2,
   IconMessages,
+  IconPackages,
   IconReceipt2,
   IconRotateRectangle,
   IconUserCircle,
@@ -85,6 +86,14 @@ const mockdata = [
         icon: IconFiles,
         link: PATH_APPS.fileManager.root,
       },
+      {
+        label: 'Products',
+        icon: IconPackages,
+        links: [
+          { label: 'List', link: PATH_APPS.products.root },
+          { label: 'Categories', link: PATH_APPS.products.categories },
+        ],
+      },
     ],
   },
   {
diff --git a/constants/api.ts b/constants/api.ts
deleted file mode 100644
index d7d8d58..0000000
--- a/constants/api.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const BASE_API_URL = process.env.NEXT_PUBLIC_API_URL + '/api';
-
-export const PROJECTS_API_URL = BASE_API_URL + '/projects';
diff --git a/package.json b/package.json
index 2839e1b..497a377 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "@mantine/nprogress": "^7.14.3",
     "@mantine/spotlight": "^7.14.3",
     "@mantine/tiptap": "^7.14.3",
-    "@tabler/icons-react": "^2.40.0",
+    "@tabler/icons-react": "^3.33.0",
     "@tiptap/extension-highlight": "^2.1.12",
     "@tiptap/extension-link": "^2.10.3",
     "@tiptap/extension-placeholder": "^2.0.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 173a26e..3a25c0b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -87,8 +87,8 @@ importers:
         specifier: ^7.14.3
         version: 7.17.7(@mantine/core@7.17.7(@mantine/hooks@7.17.7(react@18.3.1))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.17.7(react@18.3.1))(@tiptap/extension-link@2.11.9(@tiptap/core@2.11.9(@tiptap/pm@2.11.9))(@tiptap/pm@2.11.9))(@tiptap/react@2.11.9(@tiptap/core@2.11.9(@tiptap/pm@2.11.9))(@tiptap/pm@2.11.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@tabler/icons-react':
-        specifier: ^2.40.0
-        version: 2.47.0(react@18.3.1)
+        specifier: ^3.33.0
+        version: 3.33.0(react@18.3.1)
       '@tiptap/extension-highlight':
         specifier: ^2.1.12
         version: 2.11.9(@tiptap/core@2.11.9(@tiptap/pm@2.11.9))
@@ -242,7 +242,7 @@ importers:
         version: 9.1.0
       eslint-plugin-import:
         specifier: ^2.31.0
-        version: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
+        version: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       husky:
         specifier: ^8.0.0
         version: 8.0.3
@@ -2619,13 +2619,13 @@ packages:
   '@swc/types@0.1.14':
     resolution: {integrity: sha512-PbSmTiYCN+GMrvfjrMo9bdY+f2COnwbdnoMw7rqU/PI5jXpKjxOGZ0qqZCImxnT81NkNsKnmEpvu+hRXLBeCJg==}
 
-  '@tabler/icons-react@2.47.0':
-    resolution: {integrity: sha512-iqly2FvCF/qUbgmvS8E40rVeYY7laltc5GUjRxQj59DuX0x/6CpKHTXt86YlI2whg4czvd/c8Ce8YR08uEku0g==}
+  '@tabler/icons-react@3.33.0':
+    resolution: {integrity: sha512-ay+HDecCjmFl25Lg14hcl59ffSjnOcgfrlV14shu8Qjbz+Xh4LRus93DuoyLQte8YSxE7Pe5gnEz6OF0GtwNtw==}
     peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0
+      react: '>= 16'
 
-  '@tabler/icons@2.47.0':
-    resolution: {integrity: sha512-4w5evLh+7FUUiA1GucvGj2ReX2TvOjEr4ejXdwL/bsjoSkof6r1gQmzqI+VHrE2CpJpB3al7bCTulOkFa/RcyA==}
+  '@tabler/icons@3.33.0':
+    resolution: {integrity: sha512-NZeFfzcYe7xcBHR3zKoCSrw/cFWvfj6LjenPQ48yVMTGdX854HH9nH44ZfMH8rrDzHBllfjwl4CIX6Vh2tyN0Q==}
 
   '@testing-library/dom@9.3.4':
     resolution: {integrity: sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==}
@@ -11312,13 +11312,12 @@ snapshots:
     dependencies:
       '@swc/counter': 0.1.3
 
-  '@tabler/icons-react@2.47.0(react@18.3.1)':
+  '@tabler/icons-react@3.33.0(react@18.3.1)':
     dependencies:
-      '@tabler/icons': 2.47.0
-      prop-types: 15.8.1
+      '@tabler/icons': 3.33.0
       react: 18.3.1
 
-  '@tabler/icons@2.47.0': {}
+  '@tabler/icons@3.33.0': {}
 
   '@testing-library/dom@9.3.4':
     dependencies:
@@ -13411,8 +13410,8 @@ snapshots:
       '@typescript-eslint/parser': 8.13.0(eslint@8.57.1)(typescript@5.1.6)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.2(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1)
@@ -13431,37 +13430,37 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1):
+  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.0
       enhanced-resolve: 5.17.1
       eslint: 8.57.1
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       fast-glob: 3.3.2
       get-tsconfig: 4.8.1
       is-bun-module: 1.2.1
       is-glob: 4.0.3
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
       - eslint-import-resolver-node
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.13.0(eslint@8.57.1)(typescript@5.1.6)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -13472,7 +13471,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.1.6))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3
diff --git a/routes/index.ts b/routes/index.ts
index f4efb9f..f639371 100644
--- a/routes/index.ts
+++ b/routes/index.ts
@@ -15,6 +15,7 @@ const ROOTS_ERRORS = '/error';
 const ROOTS_CHANGELOG = '/changelog';
 const ROOTS_AUTH_PROVIDERS = '/authProviders';
 const ROOTS_ABOUT = '/pages/about';
+const ROOTS_PRODUCTS = '/products';
 
 export const PATH_DASHBOARD = {
   root: ROOTS_DASHBOARD,
@@ -41,6 +42,10 @@ export const PATH_APPS = {
   fileManager: {
     root: path(ROOT_APPS, '/file-manager'),
   },
+  products: {
+    root: path(ROOT_APPS, ROOTS_PRODUCTS),
+    categories: path(ROOT_APPS, ROOTS_PRODUCTS + '/categories'),
+  },
 };
 
 export const PATH_PAGES = {
diff --git a/types/products.ts b/types/products.ts
new file mode 100644
index 0000000..a65d4a8
--- /dev/null
+++ b/types/products.ts
@@ -0,0 +1,35 @@
+import { IUser } from '@/types/user';
+
+export interface IProduct {
+  id: string;
+  title: any;
+  description: any;
+  price: number;
+  quantityInStock: number;
+  sku: any;
+  imageUrl: any;
+  isActive: boolean;
+  status: number;
+  category: IProductCategory;
+  categoryId: string;
+  categoryName: any;
+  created: string;
+  modified: string;
+  createdById: any;
+  createdBy: IUser;
+  modifiedById: any;
+  modifiedBy: IUser;
+}
+
+export interface IProductCategory {
+  id: string;
+  title: any;
+  description: any;
+  created: string;
+  modified: string;
+  createdById: any;
+  createdBy: IUser;
+  modifiedById: any;
+  modifiedBy: IUser;
+  productCount: number;
+}