diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx
index e5d0bfd7..d136b72f 100644
--- a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx
+++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx
@@ -10,7 +10,7 @@ interface MetadataProps {
 }
 
 const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
-  const filteredMetadataArray = data.metadata.filter(
+  const filteredMetadataArray = data?.metadata.filter(
     (item: any) =>
       item.metadataItem.label !== 'Source Website' &&
       item.metadataItem.label !== 'Github Repo Link' &&
@@ -31,7 +31,7 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
         )}
       </div>
       <div className="flex flex-col gap-5 align-baseline">
-        {filteredMetadataArray.map((item: any, index: any) => (
+        {filteredMetadataArray?.map((item: any, index: any) => (
           <div
             className="flex items-center gap-2 border-b-2 border-solid border-baseGraySlateSolid6 pb-2"
             key={index}
diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/PrimaryData/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/PrimaryData/index.tsx
index 95664714..016fc6f7 100644
--- a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/PrimaryData/index.tsx
+++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/PrimaryData/index.tsx
@@ -14,13 +14,13 @@ interface PrimaryDataProps {
 }
 
 const PrimaryData: React.FC<PrimaryDataProps> = ({ data, isLoading }) => {
-  const sourceMetadata = data.metadata.find(
+  const sourceMetadata = data?.metadata.find(
     (item: any) => item.metadataItem.label === 'Source'
   );
-  const sourceLink = data.metadata.find(
+  const sourceLink = data?.metadata.find(
     (item: any) => item.metadataItem.label === 'Source Website'
   );
-  const githubLink = data.metadata.find(
+  const githubLink = data?.metadata.find(
     (item: any) => item.metadataItem.label === 'Github Repo Link'
   );
 
diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Resources/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Resources/index.tsx
index 135b540c..e6fad1e5 100644
--- a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Resources/index.tsx
+++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Resources/index.tsx
@@ -5,7 +5,18 @@ import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { graphql } from '@/gql';
 import { useQuery } from '@tanstack/react-query';
-import { Button, Spinner, Tag, Text } from 'opub-ui';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  Dialog,
+  Spinner,
+  Table,
+  Tag,
+  Text,
+} from 'opub-ui';
 
 import { GraphQL } from '@/lib/api';
 import { formatDate } from '@/lib/utils';
@@ -19,7 +30,11 @@ const datasetResourceQuery: any = graphql(`
       type
       name
       description
-
+      previewData {
+        columns
+        rows
+      }
+      previewEnabled
       schema {
         fieldName
         id
@@ -28,6 +43,7 @@ const datasetResourceQuery: any = graphql(`
       }
       fileDetails {
         format
+        size
       }
     }
   }
@@ -78,6 +94,118 @@ const Resources = () => {
     });
   }, [getResourceDetails.data]);
 
+  const generateColumnData = () => {
+    return [
+      {
+        accessorKey: 'schema',
+        header: 'Columns',
+        cell: ({ row }: any) => {
+          return (
+            <Dialog>
+              <Dialog.Trigger>
+                <Button kind="tertiary">View All Columns</Button>
+              </Dialog.Trigger>
+              <Dialog.Content title={'Fields'} limitHeight>
+                <Table
+                  columns={[
+                    {
+                      accessorKey: 'name',
+                      header: 'Name of the Field',
+                    },
+                    {
+                      accessorKey: 'format',
+                      header: 'Format',
+                    },
+                  ]}
+                  rows={row.original.schema.map((item: any) => ({
+                    name: item.fieldName,
+                    format: item.format,
+                  }))}
+                />
+              </Dialog.Content>
+            </Dialog>
+          );
+        },
+      },
+      {
+        accessorKey: 'rowsLength',
+        header: 'No.of Rows',
+        cell: ({ row }: any) => {
+          return (
+            <p>
+              {row.original.rowsLength === 0
+                ? 'NA'
+                : `${row.original.rowsLength}`}
+            </p>
+          );
+        },
+      },
+      {
+        accessorKey: 'format',
+        header: 'Format',
+      },
+      {
+        accessorKey: 'size',
+        header: 'Size',
+      },
+      {
+        accessorKey: 'preview',
+        header: 'Preview',
+        cell: ({ row }: any) => {
+          const previewData = row.original.preview;
+
+          // Generate columns dynamically from previewData.columns
+          const previewColumns =
+            previewData?.columns?.map((column: string) => ({
+              accessorKey: column,
+              header: column,
+              cell: ({ cell }: any) => {
+                const value = cell.getValue();
+                return <span>{value !== null ? value.toString() : 'N/A'}</span>;
+              },
+            })) || [];
+
+          // Transform rows data to match column structure
+          const previewRows =
+            previewData?.rows?.map((row: any[]) => {
+              const rowData: Record<string, any> = {};
+              previewData.columns.forEach((column: string, index: number) => {
+                rowData[column] = row[index];
+              });
+              return rowData;
+            }) || [];
+
+          return (
+            <Dialog>
+              <Dialog.Trigger>
+                <Button kind="tertiary" disabled={!previewData}>
+                  Preview
+                </Button>
+              </Dialog.Trigger>
+              <Dialog.Content title={'Fields'} limitHeight large>
+                {previewData && (
+                  <Table columns={previewColumns} rows={previewRows} />
+                )}
+              </Dialog.Content>
+            </Dialog>
+          );
+        },
+      },
+    ];
+  };
+
+  const generateTableData = (data: any) => {
+    return [
+      {
+        schema: data?.schema,
+        rowsLength: data?.previewData?.rows?.length || 'Na',
+        format: data?.fileDetails?.format || 'Na',
+        size: Math.round(data?.fileDetails?.size / 1024).toFixed(2) + 'KB',
+        preview: data?.previewData,
+      },
+    ];
+  };
+
   return (
     <div className="w-full">
       {getResourceDetails.isLoading ? (
@@ -90,51 +218,77 @@ const Resources = () => {
           <Text variant="bodyLg" className="mx-6 lg:mx-0">
             Downloadable Resources
           </Text>
-          <div className="mx-6 mt-5 flex flex-col gap-8 bg-surfaceDefault p-6 lg:mx-0">
+          <div>
             {getResourceDetails.data?.datasetResources.map(
               (item: any, index: number) => (
                 <div
                   key={index}
-                  className="flex flex-wrap justify-between gap-4"
+                  className="mx-6 mt-5 flex flex-col gap-6 bg-surfaceDefault p-6 lg:mx-0"
                 >
-                  <div className="gap flex flex-col lg:w-4/5">
-                    <div className="item flex items-center gap-2">
-                      <Text variant="headingMd">{item.name}</Text>
-                      <Tag>{item.fileDetails.format}</Tag>
+                  <div className="flex flex-wrap justify-between gap-4">
+                    <div className="gap flex flex-col lg:w-4/5">
+                      <div className="item flex items-center gap-2">
+                        <Text variant="headingMd">{item.name}</Text>
+                        {item.fileDetails?.format && (
+                          <Tag>{item.fileDetails?.format}</Tag>
+                        )}
+                      </div>
+                      <div>
+                        <Text>Updated:</Text>
+                        <Text>{formatDate(item.modified)}</Text>
+                      </div>
                     </div>
                     <div>
-                      <Text>Updated:</Text>
-                      <Text>{formatDate(item.modified)}</Text>
-                    </div>
-                    <div className="flex flex-col">
-                      <div
-                        ref={(el) => (descriptionRefs.current[index] = el)}
-                        className={!showMore[index] ? 'line-clamp-2' : ''}
+                      <Link
+                        href={`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/download/resource/${item.id}`}
+                        target="_blank"
+                        className="flex justify-center"
                       >
-                        <Text>{item.description}</Text>
-                      </div>
-                      {isDescriptionLong[index] && (
-                        <Button
-                          className="self-start p-2"
-                          onClick={() => toggleShowMore(index)}
-                          variant="interactive"
-                          size="slim"
-                          kind="tertiary"
-                        >
-                          {showMore[index] ? 'Show less' : 'Show more'}
-                        </Button>
-                      )}
+                        <Button>Download</Button>
+                      </Link>
                     </div>
                   </div>
-                  <div>
-                    <Link
-                      href={`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/download/resource/${item.id}`}
-                      target="_blank"
-                      className="flex justify-center"
-                    >
-                      <Button>Download</Button>
-                    </Link>
-                  </div>
+                  <Accordion type="single" collapsible className="w-full">
+                    <AccordionItem value="item-1" className=" border-none">
+                      <div className="flex flex-wrap items-center justify-between gap-4">
+                        <div className="flex flex-col lg:w-3/4">
+                          <div
+                            ref={(el) => (descriptionRefs.current[index] = el)}
+                            className={!showMore[index] ? 'line-clamp-2' : ''}
+                          >
+                            <Text>{item.description}</Text>
+                          </div>
+                          {isDescriptionLong[index] && (
+                            <Button
+                              className="self-start p-2"
+                              onClick={() => toggleShowMore(index)}
+                              variant="interactive"
+                              size="slim"
+                              kind="tertiary"
+                            >
+                              {showMore[index] ? 'Show less' : 'Show more'}
+                            </Button>
+                          )}
+                        </div>
+                        <AccordionTrigger className="flex w-full flex-wrap items-center gap-2 p-0 hover:no-underline">
+                          View Details
+                        </AccordionTrigger>
+                      </div>
+                      <AccordionContent
+                        className="flex w-full flex-col py-5"
+                        style={{
+                          backgroundColor: 'var( --base-pure-white)',
+                          outline: '1px solid var( --base-pure-white)',
+                        }}
+                      >
+                        <Table
+                          columns={generateColumnData()}
+                          rows={generateTableData(item)}
+                          hideFooter
+                        />
+                      </AccordionContent>
+                    </AccordionItem>
+                  </Accordion>
                 </div>
               )
             )}
diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/EditResource.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/EditResource.tsx
index 6594a5eb..ecc3e476 100644
--- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/EditResource.tsx
+++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/EditResource.tsx
@@ -1,29 +1,20 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useParams } from 'next/navigation';
-import { graphql } from '@/gql';
 import {
   CreateFileResourceInput,
   SchemaUpdateInput,
   UpdateFileResourceInput,
 } from '@/gql/generated/graphql';
-import { IconTrash } from '@tabler/icons-react';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import {
-  parseAsBoolean,
-  parseAsString,
-  useQueryState,
-} from 'next-usequerystate';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { parseAsString, useQueryState } from 'next-usequerystate';
 import {
   Button,
-  ButtonGroup,
   Checkbox,
   Combobox,
-  DataTable,
   Dialog,
   Divider,
   DropZone,
   Icon,
-  IconButton,
   Select,
   Spinner,
   Text,
@@ -178,10 +169,24 @@ export const EditResource = ({ refetch, list }: EditProps) => {
   const [resourceDesc, setResourceDesc] = React.useState(
     getResourceObject(resourceId)?.description
   );
+  const [previewEnable, setPreviewEnable] = useState(true);
+
+  const [previewDetails, setPreviewDetails] = useState({
+    startEntry: 0,
+    endEntry: 0,
+    isAllEntries: true,
+  });
 
   React.useEffect(() => {
     setResourceName(getResourceObject(resourceId)?.label);
     setResourceDesc(getResourceObject(resourceId)?.description);
+    setPreviewEnable(getResourceObject(resourceId)?.previewEnabled ?? true);
+    setPreviewDetails({
+      startEntry: getResourceObject(resourceId)?.previewDetails.startEntry ?? 0,
+      endEntry: getResourceObject(resourceId)?.previewDetails.endEntry ?? 0,
+      isAllEntries:
+        getResourceObject(resourceId)?.previewDetails.isAllEntries ?? true,
+    });
 
     //fix this later
   }, [JSON.stringify(list), resourceId]);
@@ -230,7 +235,7 @@ export const EditResource = ({ refetch, list }: EditProps) => {
   const fileInput = (
     <div className="flex">
       <Text className="break-all">
-        {getResourceObject(resourceId)?.fileDetails.file.name.replace(
+        {getResourceObject(resourceId)?.fileDetails?.file.name.replace(
           'resources/',
           ''
         )}{' '}
@@ -242,12 +247,35 @@ export const EditResource = ({ refetch, list }: EditProps) => {
     setResourceId('');
   };
 
+  const handlePreviewDetailsChange = (
+    field: string,
+    value: string | boolean
+  ) => {
+    if (field === 'isAllEntries' && value) {
+      setPreviewDetails({
+        startEntry: 0,
+        endEntry: 0,
+        isAllEntries: true,
+      });
+    } else {
+      setPreviewDetails((prev) => ({
+        ...prev,
+        [field]: value,
+      }));
+    }
+  };
   const saveResource = () => {
     updateResourceMutation.mutate({
       fileResourceInput: {
         id: resourceId,
         description: resourceDesc || '',
         name: resourceName || '',
+        previewEnabled: previewEnable,
+        previewDetails: {
+          startEntry: +previewDetails.startEntry || 0,
+          endEntry: +previewDetails.endEntry || 0,
+          isAllEntries: previewDetails.isAllEntries,
+        },
       },
       isResetSchema: false,
     });
@@ -357,6 +385,7 @@ export const EditResource = ({ refetch, list }: EditProps) => {
             multiline={4}
           />
         </div>
+
         <div className="flex w-1/5 flex-col justify-between border-1 border-solid border-baseGraySlateSolid7 p-3 ">
           {fileInput}
 
@@ -371,71 +400,55 @@ export const EditResource = ({ refetch, list }: EditProps) => {
           </DropZone>
         </div>
       </div>
-      {/* <div className=" my-8 flex items-center gap-4 border-1 border-solid border-baseGraySlateSolid7 px-7 py-4 ">
-        <div className="flex w-1/6 items-center justify-center gap-1">
-          <Checkbox name="checkbox" onChange={() => console.log('hi')}>
-            Enabel Preview
-          </Checkbox>
-          <Icon source={Icons.info} />
-        </div>
-
-        <div className="h-[70px] w-[2px] bg-baseGraySlateSolid7"></div>
+      <div className="my-8 flex items-center gap-8 align-middle">
+        <Checkbox
+          name={'previewEnabled'}
+          checked={previewEnable}
+          onChange={() => setPreviewEnable(!previewEnable)}
+        >
+          Preview Enabled
+        </Checkbox>
 
-        <div className="flex items-center gap-5 px-8">
-          <Text>
-            Select Rows to be <br /> shown in the Preview
-          </Text>
-          <Combobox
-            name="geo_list"
-            label="From Row Number"
-            placeholder="Search Locations"
-            list={[
-              {
-                label:
-                  'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
-                value:
-                  'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
-              },
-              {
-                label:
-                  'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
-                value:
-                  'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
-              },
-            ]}
-            displaySelected
-            required
-            error="This field is required"
-          />
-          <Combobox
-            name="to_row_number"
-            label="To Row Number"  
-            placeholder="Search Locations"
-            list={[
-              {
-                label:
-                  'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
-                value:
-                  'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
-              },
-              {
-                label:
-                  'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
-                value:
-                  'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
-              },
-            ]}
-            displaySelected
-            required
-            error="This field is required"
-          />
-        </div>
-        <div className="h-[70px] w-[2px] bg-baseGraySlateSolid7"></div>
-        <div className="flex w-1/6 justify-center ">
-          <Text>See Preview</Text>
-        </div>
-      </div>*/}
-      <div className="my-8">
+        {previewEnable && (
+          <>
+            <Checkbox
+              name={'isAllEntries'}
+              checked={previewDetails.isAllEntries}
+              onChange={() =>
+                handlePreviewDetailsChange(
+                  'isAllEntries',
+                  !previewDetails.isAllEntries
+                )
+              }
+            >
+              Show all entries
+            </Checkbox>
+            {!previewDetails.isAllEntries && (
+              <>
+                <TextField
+                  value={previewDetails.startEntry.toString()}
+                  label="Start Entry"
+                  name="startEntry"
+                  onChange={(value) =>
+                    handlePreviewDetailsChange('startEntry', value)
+                  }
+                  type="number"
+                />
+                <TextField
+                  value={previewDetails.endEntry.toString()}
+                  label="End Entry"
+                  name="endEntry"
+                  onChange={(value) =>
+                    handlePreviewDetailsChange('endEntry', value)
+                  }
+                  type="number"
+                />
+              </>
+            )}
+          </>
+        )}
+      </div>
+      <div className="my-4">
         <div className="flex flex-wrap justify-between">
           <Text>Fields in the Resource</Text>
           <Button
diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/ResourceSchema.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/ResourceSchema.tsx
index ed26d145..cda3ce22 100644
--- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/ResourceSchema.tsx
+++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/ResourceSchema.tsx
@@ -1,20 +1,10 @@
-import React from 'react';
-import { useParams } from 'next/navigation';
-import { graphql } from '@/gql';
-import { SchemaUpdateInput } from '@/gql/generated/graphql';
-import { useMutation, useQuery } from '@tanstack/react-query';
 import {
-  Button,
   DataTable,
-  Icon,
   Select,
-  Spinner,
-  Text,
-  TextField,
+  TextField
 } from 'opub-ui';
+import React from 'react';
 
-import { GraphQL } from '@/lib/api';
-import { Icons } from '@/components/icons';
 
 const DescriptionCell = ({
   value,
@@ -138,7 +128,7 @@ export const ResourceSchema = ({ setSchema, data }: any) => {
           <DataTable
             columns={generateColumnData()}
             rows={generateTableData(data)}
-            hideFooter={true}
+            hideFooter={false}
             hideSelection
           />
         ):<div className="mt-8 flex justify-center">Click on Reset Fields</div>}
diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/page-layout.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/page-layout.tsx
index ef3ad7e7..e9de5e25 100644
--- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/page-layout.tsx
+++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/page-layout.tsx
@@ -17,6 +17,12 @@ export interface TListItem {
   description: string;
   dataset: any;
   fileDetails: any;
+  previewEnabled: boolean
+  previewDetails: {
+    startEntry: 0,
+    endEntry: 0,
+    isAllEntries: boolean
+  }
 }
 
 export function DistibutionPage({
@@ -48,6 +54,12 @@ export function DistibutionPage({
         description: item.description,
         dataset: item.dataset?.pk,
         fileDetails: item.fileDetails,
+        previewEnabled: item.previewEnabled,
+        previewDetails: {
+          startEntry: item.previewDetails?.startEntry,
+          endEntry: item.previewDetails?.endEntry,
+          isAllEntries: item.previewDetails?.isAllEntries
+        }
       }))) ||
     [];
 
diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/query.ts b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/query.ts
index e60ad1c6..aea8e814 100644
--- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/query.ts
+++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/query.ts
@@ -8,6 +8,16 @@ export const getReourceDoc = graphql(`
         dataset {
           pk
         }
+        previewData {
+          columns
+          rows
+        }
+        previewDetails {
+          endEntry
+          isAllEntries
+          startEntry
+        }
+        previewEnabled
         schema {
           id
           fieldName