diff --git a/app/[locale]/(user)/datasets/components/FIlter/Filter.tsx b/app/[locale]/(user)/datasets/components/FIlter/Filter.tsx
index 8611ac96..bcaecce3 100644
--- a/app/[locale]/(user)/datasets/components/FIlter/Filter.tsx
+++ b/app/[locale]/(user)/datasets/components/FIlter/Filter.tsx
@@ -33,7 +33,7 @@ const Filter: React.FC<FilterProps> = ({
   };
 
   return (
-    <div className="rounded-4 bg-surfaceDefault px-4 py-6">
+    <div className="rounded-4 bg-surfaceDefault px-4 py-6 shadow-card">
       <div className="mb-5 flex justify-between">
         <div className="flex w-full justify-between">
           <div>
diff --git a/app/[locale]/(user)/datasets/page.tsx b/app/[locale]/(user)/datasets/page.tsx
index b2b638a1..612377fe 100644
--- a/app/[locale]/(user)/datasets/page.tsx
+++ b/app/[locale]/(user)/datasets/page.tsx
@@ -1,9 +1,7 @@
 'use client';
 
-import React, { useEffect, useReducer, useState } from 'react';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 import { fetchDatasets } from '@/fetch';
+import { useRouter } from 'next/navigation';
 import {
   Button,
   ButtonGroup,
@@ -17,10 +15,11 @@ import {
   Text,
   Tray,
 } from 'opub-ui';
+import React, { useEffect, useReducer, useState } from 'react';
 
-import { cn } from '@/lib/utils';
 import BreadCrumbs from '@/components/BreadCrumbs';
 import { Icons } from '@/components/icons';
+import { cn } from '@/lib/utils';
 import GraphqlPagination from '../../dashboard/components/GraphqlPagination/graphqlPagination';
 import Filter from './components/FIlter/Filter';
 import Styles from './dataset.module.scss';
@@ -243,7 +242,7 @@ const DatasetsListing = () => {
   console.log(datasetDetails);
 
   return (
-    <main className=" bg-greyExtralight">
+    <main >
       <BreadCrumbs
         data={[
           { href: '/', label: 'Home' },
@@ -408,7 +407,6 @@ const DatasetsListing = () => {
                 >
                   {datasetDetails.map((item: any, index: any) => {
                     const commonProps = {
-                      key: `${item.id}-${view}`,
                       title: item.title,
                       description: item.description,
                       metadataContent: [
@@ -420,7 +418,7 @@ const DatasetsListing = () => {
                         {
                           icon: Icons.download,
                           label: 'Download',
-                          value: '500',
+                          value: item.download_count.toString(),
                         },
                         {
                           icon: Icons.globe,
@@ -443,15 +441,15 @@ const DatasetsListing = () => {
                     };
 
                     return (
-                      <Link href={`/datasets/${item.id}`} key={item.id}>
-                        <Card
-                          {...commonProps}
-                          variation={
-                            view === 'expanded' ? 'expanded' : 'collapsed'
-                          }
-                          iconColor="warning"
-                        />
-                      </Link>
+                      <Card
+                        {...commonProps}
+                        key={item.id}
+                        variation={
+                          view === 'expanded' ? 'expanded' : 'collapsed'
+                        }
+                        iconColor="warning"
+                        href={`/datasets/${item.id}`}
+                      />
                     );
                   })}
                 </GraphqlPagination>
diff --git a/package-lock.json b/package-lock.json
index b000b516..d6818246 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,7 +30,7 @@
         "next-auth": "^4.24.7",
         "next-intl": "^3.4.0",
         "next-usequerystate": "^1.17.2",
-        "opub-ui": "0.3.76",
+        "opub-ui": "0.3.77",
         "react": "^18.2.0",
         "react-aria": "3.22.0",
         "react-dom": "^18.2.0",
@@ -16423,9 +16423,9 @@
       }
     },
     "node_modules/opub-ui": {
-      "version": "0.3.76",
-      "resolved": "https://registry.npmjs.org/opub-ui/-/opub-ui-0.3.76.tgz",
-      "integrity": "sha512-gWfYK/ojNlhRRF0z6bh1EPweS8xPNlfRm61k6eUunekVzUdx84Q19Ck7XsCzpw04HNvgalrveWWRKRu9DYBDJw==",
+      "version": "0.3.77",
+      "resolved": "https://registry.npmjs.org/opub-ui/-/opub-ui-0.3.77.tgz",
+      "integrity": "sha512-mQfzqz/z2sKuerzwIrdHOeRdLtXlvKRTbhlA7AoI1Th4r+dGcuXLHk2OM41OtPboBh0R8OI/NuQuTYKvT+4SgQ==",
       "dependencies": {
         "@ariakit/react": "^0.3.14",
         "@hookform/resolvers": "^3.3.4",
diff --git a/package.json b/package.json
index e5089b9c..eaae0581 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "next-auth": "^4.24.7",
     "next-intl": "^3.4.0",
     "next-usequerystate": "^1.17.2",
-    "opub-ui": "0.3.76",
+    "opub-ui": "0.3.77",
     "react": "^18.2.0",
     "react-aria": "3.22.0",
     "react-dom": "^18.2.0",
diff --git a/styles/tokens/_variables.css b/styles/tokens/_variables.css
index e48d184f..3d2c796d 100644
--- a/styles/tokens/_variables.css
+++ b/styles/tokens/_variables.css
@@ -307,7 +307,7 @@
   --border-width-1: var(--space-025);
   --border-width-2: var(--space-05);
   --border-width-4: var(--space-1);
-
+  --shadow-element-card: 0px 0px 12px 0px rgba(0, 0, 0, 0.16);
   --shadow-modal:
     0px 26px 80px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
   --shadow-layer:
diff --git a/styles/tokens/tailwind/box-shadow.js b/styles/tokens/tailwind/box-shadow.js
index 4d5bb204..c0b0b792 100644
--- a/styles/tokens/tailwind/box-shadow.js
+++ b/styles/tokens/tailwind/box-shadow.js
@@ -18,4 +18,5 @@ module.exports = {
   elementCard: 'var(--shadow-element-card)',
   elementTopNav: 'var(--shadow-element-topnav)',
   elementFocus: 'var(--shadow-element-focus)',
+  card: 'var(--shadow-element-card)',
 };