diff --git a/src/components/CardGrid.js b/src/components/CardGrid.js
index 29a1e09..4f9a9d5 100644
--- a/src/components/CardGrid.js
+++ b/src/components/CardGrid.js
@@ -21,7 +21,7 @@ const CountryGrid = () => {
     setTimeout(() => {
       setCards(sortedCards);
       setInTransition(false);
-    }, 500); // Adjust the duration as needed
+    }, 50); // Adjust the duration as needed
   };
 
   const handleSortByData = () => {
diff --git a/src/components/CollapsibleTable.jsx b/src/components/CollapsibleTable.jsx
index 4b45262..a9d9f4b 100644
--- a/src/components/CollapsibleTable.jsx
+++ b/src/components/CollapsibleTable.jsx
@@ -36,7 +36,7 @@ import AnswerMe from './AnswerMe';
 // ];
 const Row = React.memo((props) => {
   const { row, open, setOpen, collapseOthers } = props;
-
+console.log(row);
   const handleClick = () => {
     if (collapseOthers) {
       if (open === row.name) {
@@ -67,12 +67,12 @@ const Row = React.memo((props) => {
         </TableCell>
         <TableCell>{row.headline}</TableCell>
         <TableCell>{row['media_org']}</TableCell>
-        <TableCell>{row.uri}</TableCell>
+        <TableCell>{row.score}</TableCell>
       </TableRow>
       <TableRow>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={3}>
           <Collapse in={isOpen} timeout="auto" unmountOnExit>
-            <Box margin={1}>
+            <Box margin={1} sx={{ display: 'flex', flexWrap: 'nowrap', flexDirection: 'row'}}>
             {/* {moredata.map((item, index) => (
         <Typography key={index} variant="body1" component="div">
           <strong>{Object.keys(item)[0]}:</strong> {Object.values(item)[0]}
@@ -80,8 +80,7 @@ const Row = React.memo((props) => {
       ))} */}
       <List >
         {
-          row['details'].map((item, index) => ([
-
+          row['q_as'].map((item, index) => ([
           <ListItem key={index} 
           // primaryAction={ 
           //   Object.values(item)[0].tag.map(who => (
@@ -97,9 +96,10 @@ const Row = React.memo((props) => {
                 <>
                 {Object.values(item)[1]}
                 {"  "}
-                { Object.values(item)[2].map(who => (
+                {/* { Object.values(item)[2].map(who => (
                   <Chip label={who} color="info" sx={{borderRadius: 1}} size="small"  variant="inset" component="span" />))
-                }
+                } */}
+                <Chip label="GPT-4" color="info" sx={{borderRadius: 1}} size="small"  variant="inset" component="span" />
                 </>
               }
             />
@@ -116,14 +116,12 @@ const Row = React.memo((props) => {
         ))}
               
       </List>
-              {/* <Paper elevation={4}>
-                <Box p={2}>
-                  <p>{row.details}</p>
-                  <Button variant="contained" color="primary">
-                    Click me
-                  </Button>
+              
+                <Box sx={{ width: 500, flexShrink: 1 }}>
+                  <h3>Summary of the Article</h3>
+                  <p>{row.summary}</p>
+                  <p><a href={row.uri}>Link</a> to the article</p>
                 </Box>
-              </Paper> */}
             </Box>
           </Collapse>
         </TableCell>
@@ -164,11 +162,16 @@ const CollapsibleTable = ({ collapseOthers = true, data }) => {
     <TableContainer component={Paper}>
       <Table>
         <TableHead>
-          <TableRow>
+          <TableRow sx={{
+      "& th": {
+        color: "rgba(96, 96, 96)",
+        backgroundColor: "lightgrey"
+      }
+    }}>
             <TableCell />
             <TableCell>Headline</TableCell>
             <TableCell>Media Org</TableCell>
-            <TableCell>Link</TableCell>
+            <TableCell>Score</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
diff --git a/src/components/CountryCommon.jsx b/src/components/CountryCommon.jsx
index a63f333..59eb7af 100644
--- a/src/components/CountryCommon.jsx
+++ b/src/components/CountryCommon.jsx
@@ -42,11 +42,15 @@ export default function CountryData({country}) {
           method: 'GET', // or 'PUT'
         });
         const json = await response.json();
-        console.log(json);
+        // console.log(json);
         setData(json);
+        // console.log(json);
         setLoading(false);
+        // console.log(JSON.parse(data["records"][0]));
+
       } catch (error) {
         setError(error);
+        console.log("ERROR"+ error);
         setLoading(false);
       }
     }
@@ -81,7 +85,7 @@ export default function CountryData({country}) {
                 (<p>No data found.</p>)
         } 
  
-    <ExportButton />
+    <ExportButton tablename={country} />
     </Container>
     <Footer2 />
     </Box>
diff --git a/src/components/Export.jsx b/src/components/Export.jsx
index a754f7f..72b9f89 100644
--- a/src/components/Export.jsx
+++ b/src/components/Export.jsx
@@ -2,13 +2,63 @@
 // it is disabled when there is no data to export
 import React from 'react';
 import { Button } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { Box, CircularProgress  } from "@mui/material";
 import FileDownloadRoundedIcon from '@mui/icons-material/FileDownloadRounded';
-export default function ExportButton({ disabled }) {
-   const exportData = () => {
+
+export default function ExportButton({ disabled, tablename }) {
+  const [loading, setLoading] = useState(false);
+
+  const exportData = async () => {
     console.log("calling mongodb export api");
-   }
+
+    try {
+      setLoading(true);
+
+      // Make the API call to the "/export" endpoint
+      const response = await fetch('https://aifuv2.eastus.azurecontainer.io/export?'+ new URLSearchParams({
+        table_name: tablename}), {
+        method: 'GET',
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch the export data.');
+      }
+
+            // Extract the filename from the response headers
+            const contentDisposition = response.headers.get('content-disposition');
+            const filenameMatch = contentDisposition && contentDisposition.match(/filename="(.+)"/);
+            const filename = filenameMatch ? filenameMatch[1] : 'exported-data.json';
+      
+            // Convert the response to a Blob
+            const blob = await response.blob();
+      
+            // Create a temporary URL for the Blob
+            const url = URL.createObjectURL(blob);
+      
+            // Create a link element to download the file
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = filename;
+      
+            // Trigger the click event on the link to download the file
+            link.click();
+      
+            setLoading(false);
+          } catch (error) {
+            console.error(error);
+            setLoading(false);
+          }
+        };
+
   
     return (
+      <div>
+      {loading ? (
+        <CircularProgress />
+      ) : (
+        
+    
       <Button
         // variant="contained"
         // color="primary"
@@ -21,5 +71,7 @@ export default function ExportButton({ disabled }) {
       >
         Export Data
       </Button>
+      )}
+    </div>
     );
   }