diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 26c742f..f017172 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -1,28 +1,49 @@
+import { PropsWithChildren, ReactNode } from 'react';
+
+export const CardImage = (props: { image: string }) => (
+  <div className="h-44 w-full">
+    <img className="max-h-44 max-w-full mx-auto" src={props.image} />
+  </div>
+);
+
+export const CardHeader = (
+  props: PropsWithChildren<{ header?: ReactNode }>
+) => (
+  <h3 className="text-md h-8 whitespace-nowrap overflow-hidden text-ellipsis">
+    {props.header ?? props.children}
+  </h3>
+);
+
+export const CardDescription = (
+  props: PropsWithChildren<{ description?: ReactNode; title?: string }>
+) => (
+  <p
+    className="text-sm whitespace-nowrap overflow-hidden text-ellipsis h-8"
+    title={props.title}
+  >
+    {props.description ?? props.children}
+  </p>
+);
+
 export const Card = (props: {
-  header: string;
-  image: string;
-  brands: string;
-  isActive?: boolean;
+  header?: string;
+  image?: string;
+  description?: string;
+  active?: boolean;
 }) => (
   <div
     className={`bg-white rounded-md shadow-2xl p-4 max-h-[40rem] h-full hover:bg-gray-100  dark:text-black center ${
-      props.isActive ? 'border-4 border-indigo-500' : ''
+      props.active ? 'border-4 border-indigo-500' : ''
     }`}
   >
-    <div className="max-h-44 w-full">
-      <img className="max-h-44 max-w-full mx-auto" src={props.image} />
-    </div>
-    <h3
-      className="text-md h-8 whitespace-nowrap overflow-hidden text-ellipsis"
-      title={props.header}
-    >
-      {props.header}
-    </h3>
-    <p
-      className="text-sm whitespace-nowrap overflow-hidden text-ellipsis h-8"
-      title={props.brands}
-    >
-      {props.brands}
-    </p>
+    {props.image && <CardImage image={props.image} />}
+    {props.header && <CardHeader header={props.header} />}
+    {props.description && <CardDescription description={props.description} />}
   </div>
 );
+
+Card.CardHeader = CardHeader;
+Card.CardDescription = CardDescription;
+Card.CardImage = CardImage;
+
+export default Card;
diff --git a/src/components/CloseButton.tsx b/src/components/CloseButton.tsx
new file mode 100644
index 0000000..7e5f292
--- /dev/null
+++ b/src/components/CloseButton.tsx
@@ -0,0 +1,35 @@
+import { PropsWithChildren } from 'react';
+
+export const CloseSVG = () => (
+  <svg
+    className="w-3 h-3"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 14 14"
+  >
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+    />
+  </svg>
+);
+
+export const CloseButton = (
+  props: PropsWithChildren<{
+    onClick: () => void;
+  }>
+) => (
+  <button
+    onClick={props.onClick}
+    type="button"
+    className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+    data-modal-hide="default-modal"
+  >
+    <CloseSVG />
+    <span className="sr-only">Close modal</span>
+  </button>
+);
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index 5fbe904..87d3934 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -1,7 +1,35 @@
 import { PropsWithChildren } from 'react';
+import { CloseButton } from './CloseButton';
 
-export const Container = (props: PropsWithChildren) => (
+export const GridContainer = (props: PropsWithChildren) => (
   <div className="w-full m-auto grid gap-4 grid-cols-auto-fit-10rem mt-4 dark:text-white">
     {props.children}
   </div>
 );
+
+export const Header = (props: PropsWithChildren) => (
+  <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
+    {props.children}
+  </h3>
+);
+
+export const FlexContainer = ({
+  header,
+  onClose,
+  children,
+}: PropsWithChildren<{
+  header?: string;
+  onClose?: () => void;
+}>) => (
+  <div className="flex-1 text-gray-900 dark:text-white">
+    <div
+      className={
+        'flex items-start justify-between p-4 border-b rounded-t dark:text-white '
+      }
+    >
+      <Header>{header}</Header>
+      {onClose && <CloseButton onClick={onClose} />}
+    </div>
+    {children}
+  </div>
+);
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index db7441e..e4a5585 100644
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@@ -62,6 +62,7 @@ export const Pagination = ({ totalPages }: { totalPages: number }) => {
         <li>
           <button
             disabled={currentPage === 1}
+            onClick={() => handlePageChange(currentPage - 1)}
             className="flex items-center justify-center px-3 h-8 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
           >
             Previous
@@ -98,7 +99,7 @@ export const Pagination = ({ totalPages }: { totalPages: number }) => {
         <li>
           <button
             disabled={currentPage === totalPages}
-            onClick={() => handlePageChange(currentPage - 1)}
+            onClick={() => handlePageChange(currentPage + 1)}
             className="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
           >
             Next
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index 54d141d..9f39a5d 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -1,52 +1,75 @@
-import { ReactNode } from 'react';
+import { PropsWithChildren } from 'react';
 
-export const Table = (props: {
-  headers?: string[];
-  data: { id: string | number; value: string | ReactNode }[][];
-}) => {
+export const TableHead = ({
+  className = '',
+  children,
+}: PropsWithChildren<{ className?: string }>) => (
+  <th scope="col" className={'px-6 py-3 ' + className}>
+    {children}
+  </th>
+);
+
+export const TableHeader = ({
+  className = '',
+  children,
+}: PropsWithChildren<{ className?: string }>) => (
+  <thead
+    className={
+      'text-xs text-gray-700 uppercase dark:text-gray-400 ' + className
+    }
+  >
+    <TableRow>{children}</TableRow>
+  </thead>
+);
+
+export const TableRow = ({
+  className = '',
+  children,
+}: PropsWithChildren<{ className?: string }>) => (
+  <tr className={'border-b border-gray-200 ' + className}>{children}</tr>
+);
+
+export const TableCell = ({
+  className = '',
+  children,
+}: PropsWithChildren<{ className?: string }>) => (
+  <td className={'px-6 py-4' + className}>{children}</td>
+);
+
+export const TableBody = ({
+  className = '',
+  children,
+}: PropsWithChildren<{ className?: string }>) => (
+  <tbody className={className}>{children}</tbody>
+);
+
+export const Table = ({
+  className = '',
+  children,
+}: PropsWithChildren<{ className?: string }>) => {
   return (
-    <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
-      <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-        <thead className="text-xs text-gray-700 uppercase dark:text-gray-400">
-          {props.headers?.length && (
-            <tr>
-              {props.headers.map((header, idx) => (
-                <>
-                  <th
-                    scope="col"
-                    className={`px-6 py-3 ${
-                      idx % 2 === 0 ? ' bg-gray-50 dark:bg-gray-800' : ''
-                    }`}
-                  >
-                    {header}
-                  </th>
-                </>
-              ))}
-            </tr>
-          )}
-        </thead>
-        <tbody>
-          {props.data.map((row) => (
-            <tr
-              key={row[0].id}
-              className="border-b border-gray-200 dark:border-gray-700"
-            >
-              {row.map((col, colIdx) => (
-                <td
-                  key={col.id}
-                  className={`px-6 py-4 ${
-                    colIdx % 2 === 0
-                      ? 'font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800'
-                      : ''
-                  }`}
-                >
-                  {col.value}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
+    <table
+      className={
+        'w-full text-sm text-left text-gray-500 dark:text-gray-400 ' + className
+      }
+    >
+      {children}
+    </table>
   );
 };
+
+Table.Header = TableHeader;
+Table.Head = TableHead;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+Table.Body = TableBody;
+Table.Table = Table;
+
+export default Table;
+// key={col.id}
+// className={`px-6 py-4 ${
+//   colIdx % 2 === 0
+//     ? 'font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800'
+//     : ''
+// }`}
+// >
diff --git a/src/pages/Products/Products.tsx b/src/pages/Products/Products.tsx
index b108e88..ac3399a 100644
--- a/src/pages/Products/Products.tsx
+++ b/src/pages/Products/Products.tsx
@@ -1,12 +1,5 @@
 import { ChangeEventHandler, useState } from 'react';
-import {
-  LoaderFunction,
-  useLoaderData,
-  Outlet,
-  useParams,
-  Link,
-  useSearchParams,
-} from 'react-router-dom';
+import { LoaderFunction, useLoaderData, Outlet } from 'react-router-dom';
 
 import { Search, Pagination } from '../../components';
 import ApiClient from '../../app/ApiClient';
@@ -17,11 +10,9 @@ import { SearchResults } from './types';
 
 export const ProductsPage = () => {
   const onLoadData = useLoaderData() as SearchResults;
-  const [searchParams] = useSearchParams();
   const [searchTerm, setSearchTerm] = useState(
     localStorage.getItem('search-term') ?? ''
   );
-  const { id } = useParams();
   const { handleSearch, data, loading } = useData({
     onLoadData,
   });
@@ -40,11 +31,6 @@ export const ProductsPage = () => {
       />
       <div className="flex gap-4">
         <div className="grow">
-          {id && (
-            <Link to={`/products?${searchParams.toString()}`}>
-              <div className="overlay active" />
-            </Link>
-          )}
           <ProductsContainer data={data?.products ?? []} loading={loading} />
         </div>
         <Outlet />
diff --git a/src/pages/Products/components/ProductData.tsx b/src/pages/Products/components/ProductData.tsx
new file mode 100644
index 0000000..cea69bb
--- /dev/null
+++ b/src/pages/Products/components/ProductData.tsx
@@ -0,0 +1,48 @@
+import { Table } from '../../../components';
+import { Product } from '../types';
+
+export const ProductTable = ({ product }: { product: Product }) => (
+  <Table>
+    <Table.Header>
+      <Table.Head className="bg-gray-50 dark:bg-gray-800 ">
+        Product Properties
+      </Table.Head>
+      <Table.Head>Property Values</Table.Head>
+    </Table.Header>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell className="font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
+          Countries
+        </Table.Cell>
+        <Table.Cell>{product.countries.split(',').join(', ')}</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell className="font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
+          Brands
+        </Table.Cell>
+        <Table.Cell>{product.brands}</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell className="font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
+          Ingredients
+        </Table.Cell>
+        <Table.Cell>
+          {product.ingredients_text_en || product.ingredients_text}
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell className="font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
+          Macro Elements
+        </Table.Cell>
+        <Table.Cell>
+          <ul>
+            <li>Prots - {product.nutriments.proteins_100g}</li>
+            <li>Carbs - {product.nutriments.carbohydrates_100g}</li>
+            <li>Fats - {product.nutriments.fat_100g}</li>
+            <li>Energy - {product.nutriments['energy-kcal_100g']}</li>
+          </ul>
+        </Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+);
diff --git a/src/pages/Products/components/ProductDetails.tsx b/src/pages/Products/components/ProductDetails.tsx
index 4d12a80..6f910d4 100644
--- a/src/pages/Products/components/ProductDetails.tsx
+++ b/src/pages/Products/components/ProductDetails.tsx
@@ -6,100 +6,28 @@ import {
   useSearchParams,
 } from 'react-router-dom';
 import ApiClient from '../../../app/ApiClient';
-import { Table } from '../../../components';
+import { FlexContainer } from '../../../components';
+import { ProductTable } from './ProductData';
 import { Product } from '../types';
-import { useMemo } from 'react';
+
 export const ProductDetails = () => {
   const { product } = useLoaderData() as { product: Product };
   const navigation = useNavigation();
+  const isLoading = navigation.state === 'loading';
   const navigator = useNavigate();
   const [searchParams] = useSearchParams();
-
-  const formattedData = useMemo(() => {
-    return [
-      [
-        { id: '1', value: 'Countries' },
-        { id: '2', value: product.countries.split(',').join(', ') },
-      ],
-      [
-        { id: 1, value: 'Brands' },
-        { id: 2, value: product.brands },
-      ],
-      [
-        { id: 1, value: 'Ingredients' },
-        {
-          id: 2,
-          value: product.ingredients_text_en || product.ingredients_text,
-        },
-      ],
-      [
-        { id: 1, value: 'Macro Elements' },
-        {
-          id: 2,
-          value: (
-            <ul>
-              <li>Prots - {product.nutriments.proteins_100g}</li>
-              <li>Carbs - {product.nutriments.carbohydrates_100g}</li>
-              <li>Fats - {product.nutriments.fat_100g}</li>
-              <li>Energy - {product.nutriments['energy-kcal_100g']}</li>
-            </ul>
-          ),
-        },
-      ],
-    ];
-  }, [product]);
-
+  if (isLoading && product) {
+    return;
+  }
   return (
-    <div className="flex-1">
-      <div className=" text-gray-900 dark:text-white">
-        {!product ? (
-          <div>Product details are not available</div>
-        ) : (
-          <>
-            <div className="flex items-start justify-between p-4 border-b rounded-t bg-gray-50 dark:bg-gray-800">
-              <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
-                {product.product_name}
-              </h3>
-              <button
-                onClick={() =>
-                  navigator(`/products?${searchParams.toString()}`)
-                }
-                type="button"
-                className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
-                data-modal-hide="default-modal"
-              >
-                <svg
-                  className="w-3 h-3"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 14 14"
-                >
-                  <path
-                    stroke="currentColor"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
-                  />
-                </svg>
-                <span className="sr-only">Close modal</span>
-              </button>
-            </div>
-            {navigation.state === 'loading' ? (
-              <span className="text-gray-900 dark:text-white">
-                Searching ...
-              </span>
-            ) : (
-              <Table
-                headers={['Product Properties', 'Property Values']}
-                data={formattedData}
-              />
-            )}
-          </>
-        )}
-      </div>
-    </div>
+    <FlexContainer
+      header={product.product_name}
+      onClose={() => navigator(`/products?${searchParams.toString()}`)}
+    >
+      {isLoading && !product && 'Loading...'}
+      {!isLoading && !product && 'Data is not available'}
+      {!isLoading && product && <ProductTable product={product} />}
+    </FlexContainer>
   );
 };
 
diff --git a/src/pages/Products/components/ProductsContainer.tsx b/src/pages/Products/components/ProductsContainer.tsx
index 1382a66..552a2ef 100644
--- a/src/pages/Products/components/ProductsContainer.tsx
+++ b/src/pages/Products/components/ProductsContainer.tsx
@@ -1,5 +1,5 @@
 import { Link, useSearchParams, useParams } from 'react-router-dom';
-import { Card, Container } from '../../../components';
+import { Card, GridContainer } from '../../../components';
 import { Product } from '../types';
 
 export const ProductsContainer = (props: {
@@ -17,31 +17,25 @@ export const ProductsContainer = (props: {
     return <div>{props.error}</div>;
   }
 
+  const getNextUrl = (productId: string) => {
+    return `${
+      productId === id ? `/products` : `/products/${productId}`
+    }?${searchParams.toString()}`;
+  };
+
   return (
-    <Container>
+    <GridContainer>
       {!props.data.length && <div className="m-8">No results</div>}
-      {props.data.map((product) =>
-        String(product.id) !== id ? (
-          <Link
-            to={`${product.id ?? product.code}?${searchParams.toString()}`}
-            key={product.id}
-          >
-            <Card
-              header={product.product_name}
-              image={product.image_front_url}
-              brands={product.brands}
-            />
-          </Link>
-        ) : (
+      {props.data.map((product) => (
+        <Link to={getNextUrl(product.id ?? product.code)} key={product.id}>
           <Card
-            key={product.id}
+            active={String(product.id ?? product.code) === id}
             header={product.product_name}
             image={product.image_front_url}
-            brands={product.brands}
-            isActive
+            description={product.brands}
           />
-        )
-      )}
-    </Container>
+        </Link>
+      ))}
+    </GridContainer>
   );
 };