diff --git a/.gitignore b/.gitignore
index 1b02c6d..6a9332f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -195,4 +195,7 @@ cython_debug/
 .DS_Store
 
 node_modules
-package-lock.json
\ No newline at end of file
+dist
+.vscode
+package-lock.json
+
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 6ec5549..c92eaaf 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -22,6 +22,7 @@
         "@radix-ui/react-tabs": "^1.1.12",
         "@radix-ui/react-tooltip": "^1.2.7",
         "@tailwindcss/vite": "^4.1.10",
+        "@tanstack/react-query": "^5.81.5",
         "@tanstack/react-table": "^8.21.3",
         "@types/react-router-dom": "^5.3.3",
         "class-variance-authority": "^0.7.1",
@@ -2585,6 +2586,32 @@
         "vite": "^5.2.0 || ^6"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.81.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.81.5.tgz",
+      "integrity": "sha512-ZJOgCy/z2qpZXWaj/oxvodDx07XcQa9BF92c0oINjHkoqUPsmm3uG08HpTaviviZ/N9eP1f9CM7mKSEkIo7O1Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.81.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.81.5.tgz",
+      "integrity": "sha512-lOf2KqRRiYWpQT86eeeftAGnjuTR35myTP8MXyvHa81VlomoAWNEd8x5vkcAfQefu0qtYCvyqLropFZqgI2EQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.81.5"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@tanstack/react-table": {
       "version": "8.21.3",
       "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 07f6c96..d32224f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,6 +24,7 @@
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tailwindcss/vite": "^4.1.10",
+    "@tanstack/react-query": "^5.81.5",
     "@tanstack/react-table": "^8.21.3",
     "@types/react-router-dom": "^5.3.3",
     "class-variance-authority": "^0.7.1",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 2763661..06960d2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -9,17 +9,22 @@ import About from './modules/about/About';
 import Layout from "./components/Layout";
 import Dashboard from './modules/dashboard/Dashboard';
 import Search from './modules/search/Search';
+import { Upload } from './modules/upload/Upload';
+
 
 function App() {
   return (
+  //  <QueryClientProvider client={queryClient}>
+  //  </QueryClientProvider>
     <Router>
       <Layout>
-        <div className="w-full dark:bg-gray-950 bg-opacity-90 rounded-xl shadow-lg min-h-[80vh] flex flex-col">
+        <div className="w-full dark:bg-gray-950 bg-opacity-90 rounded-xl shadow-lg min-h-[90vh] flex flex-col">
           <Routes>
             <Route path="/" element={<Dashboard />} />
             <Route path="/analysis" element={<Analysis />} />
             <Route path="/about" element={<About />} />
             <Route path="/search" element={<Search />} />
+            <Route path="/upload" element={<Upload />} />
           </Routes>
         </div>
       </Layout>
diff --git a/frontend/src/components/app-sidebar.tsx b/frontend/src/components/app-sidebar.tsx
index d6c1a8c..ee7436f 100644
--- a/frontend/src/components/app-sidebar.tsx
+++ b/frontend/src/components/app-sidebar.tsx
@@ -27,30 +27,30 @@ import {
 // This is sample data.
 const data = {
   user: {
-    name: "shadcn",
-    email: "m@example.com",
+    name: "Andra Police",
+    email: "designed by Cyberark",
     avatar: "/avatars/shadcn.jpg",
   },
   teams: [
     {
-      name: "Acme Inc",
+      name: "News Analyzer",
       logo: GalleryVerticalEnd,
       plan: "Enterprise",
     },
     {
-      name: "Acme Corp.",
+      name: "News AI",
       logo: AudioWaveform,
       plan: "Startup",
     },
-    {
-      name: "Evil Corp.",
-      logo: Command,
-      plan: "Free",
-    },
+    // {
+    //   name: "Evil Corp.",
+    //   logo: Command,
+    //   plan: "Free",
+    // },
   ],
   navMain: [
     {
-      title: "Playground",
+      title: "Available Links",
       url: "#",
       icon: SquareTerminal,
       isActive: true,
@@ -71,90 +71,94 @@ const data = {
           title: "About",
           url: "/about",
         },
-      ],
-    },
-    {
-      title: "Models",
-      url: "#",
-      icon: Bot,
-      items: [
-        {
-          title: "Genesis",
-          url: "#",
-        },
-        {
-          title: "Explorer",
-          url: "#",
-        },
-        {
-          title: "Quantum",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "Documentation",
-      url: "#",
-      icon: BookOpen,
-      items: [
-        {
-          title: "Introduction",
-          url: "#",
-        },
-        {
-          title: "Get Started",
-          url: "#",
-        },
-        {
-          title: "Tutorials",
-          url: "#",
-        },
         {
-          title: "Changelog",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "Settings",
-      url: "#",
-      icon: Settings2,
-      items: [
-        {
-          title: "General",
-          url: "#",
-        },
-        {
-          title: "Team",
-          url: "#",
-        },
-        {
-          title: "Billing",
-          url: "#",
-        },
-        {
-          title: "Limits",
-          url: "#",
+          title: "Uploads",
+          url: "/upload",
         },
       ],
     },
+    // {
+    //   title: "Models",
+    //   url: "#",
+    //   icon: Bot,
+    //   items: [
+    //     {
+    //       title: "Genesis",
+    //       url: "#",
+    //     },
+    //     {
+    //       title: "Explorer",
+    //       url: "#",
+    //     },
+    //     {
+    //       title: "Quantum",
+    //       url: "#",
+    //     },
+    //   ],
+    // },
+    // {
+    //   title: "Documentation",
+    //   url: "#",
+    //   icon: BookOpen,
+    //   items: [
+    //     {
+    //       title: "Introduction",
+    //       url: "#",
+    //     },
+    //     {
+    //       title: "Get Started",
+    //       url: "#",
+    //     },
+    //     {
+    //       title: "Tutorials",
+    //       url: "#",
+    //     },
+    //     {
+    //       title: "Changelog",
+    //       url: "#",
+    //     },
+    //   ],
+    // },
+    // {
+    //   title: "Settings",
+    //   url: "#",
+    //   icon: Settings2,
+    //   items: [
+    //     {
+    //       title: "General",
+    //       url: "#",
+    //     },
+    //     {
+    //       title: "Team",
+    //       url: "#",
+    //     },
+    //     {
+    //       title: "Billing",
+    //       url: "#",
+    //     },
+    //     {
+    //       title: "Limits",
+    //       url: "#",
+    //     },
+    //   ],
+    // },
   ],
   projects: [
-    {
-      name: "Design Engineering",
-      url: "#",
-      icon: Frame,
-    },
-    {
-      name: "Sales & Marketing",
-      url: "#",
-      icon: PieChart,
-    },
-    {
-      name: "Travel",
-      url: "#",
-      icon: Map,
-    },
+    // {
+    //   name: "Design Engineering",
+    //   url: "#",
+    //   icon: Frame,
+    // },
+    // {
+    //   name: "Sales & Marketing",
+    //   url: "#",
+    //   icon: PieChart,
+    // },
+    // {
+    //   name: "Travel",
+    //   url: "#",
+    //   icon: Map,
+    // },
   ],
 }
 
diff --git a/frontend/src/modules/search/Search.tsx b/frontend/src/modules/search/Search.tsx
index 3300f4b..9cb279e 100644
--- a/frontend/src/modules/search/Search.tsx
+++ b/frontend/src/modules/search/Search.tsx
@@ -2,14 +2,12 @@
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { DataTable } from "./table/data-table";
-import { columns, type GroupedCategory } from "./table/columns";
+import { columns, type Article } from "./table/columns";
 import { useEffect, useRef, useState } from "react";
-import { GetArticles } from "./GetArticles";
 import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationLink, PaginationNext } from "@/components/ui/pagination";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { useReactToPrint } from "react-to-print";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 function renderSkeletonTable() {
     return (
@@ -41,27 +39,59 @@ function renderSkeletonTable() {
 }
 
 export default function Search() {
-    const [data, setData] = useState<GroupedCategory[]>([]);
+    const [dataState, setDataState] = useState<Article[]>([]);
     const [loading, setLoading] = useState<boolean>(false);
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
     const [total, setTotal] = useState(0);
-    const [rowSelection, setRowSelection] = useState<Record<string, unknown>>({});
+    const [, setRowSelection] = useState<Record<string, unknown>>({});
+    const API_BASE_URL = import.meta.env.VITE_API_UPLOAD_URL || "";
 
     let componentRef = useRef(null);
 
     const handlePrint = useReactToPrint({
         contentRef: componentRef,
-        documentTitle: `${'test'}-Print`,
+        documentTitle: `${new Date()}-Search Results`,
         onPrintError: () => alert("there is an error when printing"),
     });
 
-    const fetchData = async (pageNum = page, size = pageSize) => {
+    const fetchFeedList = async () => {
+        const response = await fetch(`http://localhost:3001/GetFeed`);
+        // const response = await fetch(`${API_BASE_URL}/getfeed`);
+        const data = await response.json();
+        console.log(data);
+        return data as Article[];
+    }
+
+    // const { isFetching, isError, data, error } = useQuery({
+    //     queryKey: ['feed'],
+    //     queryFn: fetchFeedList,
+    //     refetchOnWindowFocus: false,
+    //     refetchOnReconnect: false,
+    //     refetchOnMount: false, // or 'always'/'false' as needed
+    //     staleTime: 1000 * 60 * 5, // 5 minutes, adjust as needed
+    // })
+
+
+    const fetchData = async (page: any, pageSize: any) => {
+        // setLoading(true);
+        // const result = await GetArticles({ page: pageNum, pageSize: size });
+        // setDataState(result.data);
+        // setTotal(result.total);
+        // setLoading(false);
         setLoading(true);
-        const result = await GetArticles({ page: pageNum, pageSize: size });
-        setData(result.data);
-        setTotal(result.total);
+        const data = await fetchFeedList();
+        const start = (page - 1) * pageSize;
+        const end = start + pageSize;
+        const result = data?.slice(start, end) ?? [];
+        
         setLoading(false);
+        setDataState(result);
+        setTotal(data?.length ?? 0);
+        return {
+            data: result,
+            total: data?.length ?? 0
+        };
     };
 
     useEffect(() => {
@@ -73,16 +103,11 @@ export default function Search() {
 
     return (
         <div className="p-8 max-w-full overflow-x-auto gap-8" ref={componentRef}>
-            <div className="flex flex-col md:flex-row items-center gap-4 print-hidden">
-                <Textarea className="flex-[2] min-h-[56px]" />
-                <div className="flex-1 flex justify-center">
-                    <Button onClick={() => fetchData(page, pageSize)} className="w-auto px-8">Submit</Button>
-                    <button
-                        onClick={handlePrint}
-                        className="bg-cyan-500 px-6 py-2 text-white border border-cyan-500 font-bold rounded-md mb-3 w-full lg:w-fit my-6 max-w-sm"
-                    >
-                        Print Payslip
-                    </button>
+            <div className="flex flex-col md:flex-row items-center gap-4 print-hidden mb-4">
+                <Textarea className="flex-[8] min-h-[56px]" placeholder="Please type here for additional search criteria..." />
+                <div className="flex-1 flex justify-end">
+                    <Button onClick={() => fetchData(page, pageSize)} className="w-auto m-2">Submit</Button>
+                    <Button onClick={handlePrint} className="w-auto m-2">Print</Button>
                 </div>
             </div>
             <div className="grid col-span-12">
@@ -92,12 +117,12 @@ export default function Search() {
                     renderSkeletonTable()
                     :
                     <div>
-                        <DataTable columns={columns} data={data} onRowSelectionChange={setRowSelection} />
+                        <DataTable columns={columns} data={dataState} onRowSelectionChange={setRowSelection} />
                         {/* You can use rowSelection here as needed, e.g., for debugging: */}
 
                         <div className="flex items-center justify-between mt-4 print-hidden">
                             <div>
-                                <label htmlFor="page-size" className="mr-2">Page Size:</label>
+                                <label htmlFor="page-size" className="mr-2 p-2">Page Size:</label>
                                 <select
                                     id="page-size"
                                     className="border rounded px-2 py-1"
diff --git a/frontend/src/modules/search/table/columns.tsx b/frontend/src/modules/search/table/columns.tsx
index 9c357e0..e2a882f 100644
--- a/frontend/src/modules/search/table/columns.tsx
+++ b/frontend/src/modules/search/table/columns.tsx
@@ -27,7 +27,7 @@ export type Article = {
   source_url: string
 }
 
-export const columns: ColumnDef<GroupedCategory>[] = [
+export const columns: ColumnDef<Article>[] = [
   {
     accessorKey: "Details",
     header: "",
diff --git a/frontend/src/modules/search/table/data-table.tsx b/frontend/src/modules/search/table/data-table.tsx
index c74d8d9..72025d2 100644
--- a/frontend/src/modules/search/table/data-table.tsx
+++ b/frontend/src/modules/search/table/data-table.tsx
@@ -24,16 +24,18 @@ import SubDataTable from "./sub-data-table"
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
+  originalData?: TData[]
   onRowSelectionChange?: (rowSelection: Record<string, unknown>) => void
 }
 
 export function DataTable<TData, TValue>({
   columns,
   data,
+  originalData,
   onRowSelectionChange,
 }: DataTableProps<TData, TValue>) {
   const [rowSelection, setRowSelection] = React.useState({})
-
+  console.log('DataTable rowSelection', data);
   // Wrap setRowSelection to notify parent
   const handleRowSelectionChange = React.useCallback((updater: any) => {
     setRowSelection((prev) => {
@@ -54,95 +56,90 @@ export function DataTable<TData, TValue>({
       rowSelection,
     },
   })
+  
+  // Convert all rows to a JSON array
+const rowsJsonArray = table.getRowModel().rows.map(row => row.original);
+
+// If you want to log or use it:
+console.log(JSON.stringify(rowsJsonArray));
 
   return (
-  <>
-    <div className="mb-4 flex items-center gap-4">
-      <Alert variant="default" className="print-hidden">
-        <CircleCheckBig />
-        <AlertTitle> {table.getFilteredSelectedRowModel().rows.length} of{" "}
+    <>
+      <div className="mb-4 flex items-center gap-4">
+      
+        <Alert variant="default" className="print-hidden">
+          <CircleCheckBig />
+          <AlertTitle> {table.getFilteredSelectedRowModel().rows.length} of{" "}
             {table.getFilteredRowModel().rows.length} row(s) selected.</AlertTitle>
-      </Alert>
-      <button
-        className="print-hidden px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
-        onClick={() => {
-          // Hide all except selected rows for printing
-          window.requestAnimationFrame(() => {
-            document.body.classList.add('printing-selected');
-            window.print();
-            setTimeout(() => {
-              document.body.classList.remove('printing-selected');
-            }, 1000);
-          });
-        }}
-      >
-        Print
-      </button>
-    </div>
-    <div className="rounded-md border w-full max-w-screen overflow-x-auto">
-      <Table className="min-w-full table-auto whitespace-normal">
-        <TableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
+        </Alert>
+      </div>
+      <div className="rounded-md border w-full max-w-screen overflow-x-auto">
+        <Table className="min-w-full table-auto whitespace-normal">
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id} className="break-words max-w-xs">
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+          
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => {
+                console.log('DataTable row***', row);
+                const isSelected = row.getIsSelected();
+                // Print all rows if none are selected, otherwise only selected rows
+                const anySelected = table.getFilteredSelectedRowModel().rows.length > 0;
+                const printClass = typeof window !== 'undefined'
+                  ? (anySelected ? (isSelected ? 'print:block' : 'print:hidden') : 'print:block')
+                  : '';
                 return (
-                  <TableHead key={header.id} className="break-words max-w-xs">
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                  </TableHead>
+                  <Collapsible key={row.id} asChild>
+                    <>
+                      <TableRow
+                        data-state={isSelected && "selected"}
+                        className={printClass}
+                      >
+                        {row.getVisibleCells().map((cell) => (
+                          <TableCell key={cell.id} className="break-words max-w-xs">
+                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                      <CollapsibleContent asChild className={
+                        'p-0 bg-sidebar-accent text-sidebar-primary-foreground ' + printClass
+                      }>
+                        <tr className="p-0 border-b">
+                          <td colSpan={columns.length + 1} className="p-0 border-t-0">
+                            <SubDataTable row={row} originalData={originalData} />
+                          </td>
+                        </tr>
+                      </CollapsibleContent>
+                    </>
+                  </Collapsible>
                 )
-              })}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => {
-              const isSelected = row.getIsSelected();
-              return (
-                <Collapsible key={row.id} asChild>
-                  <>
-                    <TableRow
-                      data-state={isSelected && "selected"}
-                      className={
-                        typeof window !== 'undefined' ?
-                          (isSelected ? 'print:block' : 'print:hidden') : ''
-                      }
-                    >
-                      {row.getVisibleCells().map((cell) => (
-                        <TableCell key={cell.id} className="break-words max-w-xs">
-                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                        </TableCell>
-                      ))}
-                    </TableRow>
-                    <CollapsibleContent asChild className={
-                      'p-0 bg-sidebar-accent text-sidebar-primary-foreground ' +
-                      (typeof window !== 'undefined' ? (isSelected ? 'print:block' : 'print:hidden') : '')
-                    }>
-                      <tr className="p-0 border-b">
-                        <td colSpan={columns.length + 1} className="p-0 border-t-0">
-                          <SubDataTable row={row} />
-                        </td>
-                      </tr>
-                    </CollapsibleContent>
-                  </>
-                </Collapsible>
-              )
-            })
-          ) : (
-            <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
-    </div>
-  </>
+              })
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </>
   )
 }
\ No newline at end of file
diff --git a/frontend/src/modules/search/table/sub-data-table.tsx b/frontend/src/modules/search/table/sub-data-table.tsx
index 7e5fa3e..eb04185 100644
--- a/frontend/src/modules/search/table/sub-data-table.tsx
+++ b/frontend/src/modules/search/table/sub-data-table.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import type { Row } from "@tanstack/react-table";
 import {
     Table,
@@ -13,30 +14,50 @@ import {
 interface Article {
     article_id?: string;
     title?: string;
-    link?: string;
-    creator?: string[] | null;
-    description?: string;
-    pubDate?: string;
-    image_url?: string;
-    source_name?: string;
-    language?: string;
-    country?: string[];
-    category?: string[];
+    body?: string;
+    source?: string;
+    published_date?: string;
+    location_mentions?: string;
+    officials_involved?: string;
+    relevance_category?: string;
     sentiment?: string;
+    linked_id?: string;
     // ...other properties can be added as needed
 }
 
 type SubDataTableProps<TData> = {
     row: Row<TData> | null;
+    originalData?: TData[] | null; // Optional prop to pass original data
 };
 
-export default function SubDataTable<TData>({ row }: SubDataTableProps<TData>) {
-    //   const isOpen = row.getIsExpanded();
+export default function SubDataTable<TData>({ row, originalData }: SubDataTableProps<TData>) {
+    const [articles, setArticles] = useState<Article[]>([]);
+    console.log("SubDataTable rendered with row:", row);
     if (!row) return <div>No data available</div>;
 
-    // Try to get articles from the row's original data
     // @ts-ignore
-    const articles: Article[] = row.original.articles || [];
+    const rowSpecificData = row.original as Article;
+    console.log("Row specific data:", rowSpecificData);
+
+    useEffect(() => {
+        // Robustly parse linked_id and match article_id as strings
+        const linkedIds = (rowSpecificData?.linked_id ?? "")
+            .replace(/[{}\s'\"]/g, "") // remove braces, spaces, quotes
+            .split(",")
+            .map((id) => id.trim())
+            .filter((id) => id.length > 0);
+        console.log("Linked IDs (effect):", linkedIds);
+        const foundArticles: Article[] = ((originalData as Article[] | undefined) || []).filter((value) => {
+            const aid = value.article_id ? String(value.article_id).trim().toLowerCase() : "";
+            const match = linkedIds.some((id) => id.trim().toLowerCase() === aid);
+            if (!match) {
+                console.log("No match (effect): article_id=", aid, ", linkedIds=", linkedIds);
+            }
+            return match;
+        });
+        console.log("Articles found (effect):", foundArticles);
+        setArticles(foundArticles);
+    }, [row, originalData, rowSpecificData?.linked_id]);
 
     if (!articles.length) return <div>No articles found.</div>;
 
@@ -48,7 +69,7 @@ export default function SubDataTable<TData>({ row }: SubDataTableProps<TData>) {
                 </TableCaption>
                 <TableHeader className="border-b">
                     <TableRow>
-                        <TableHead>Image</TableHead>
+                        {/* <TableHead>Image</TableHead> */}
                         <TableHead>Source & Description</TableHead>
                         <TableHead>Details</TableHead>
                     </TableRow>
@@ -56,7 +77,7 @@ export default function SubDataTable<TData>({ row }: SubDataTableProps<TData>) {
                 <TableBody>
                     {articles.map((article, idx) => (
                         <TableRow key={article.article_id || idx}>
-                            <TableCell>
+                            {/* <TableCell>
                                 {article.image_url ? (
                                     <div className="aspect-video min-h-[120px] w-full max-w-[213px] flex items-center justify-center overflow-hidden bg-gray-100 rounded">
                                         <img
@@ -67,15 +88,32 @@ export default function SubDataTable<TData>({ row }: SubDataTableProps<TData>) {
                                         />
                                     </div>
                                 ) : null}
-                            </TableCell>
+                            </TableCell> */}
                             <TableCell className="align-top whitespace-pre-line break-words max-w-xs md:max-w-md lg:max-w-lg xl:max-w-xl text-gray-800 dark:text-gray-100">
-                                <div className="font-bold text-base mb-1">Source: {article.source_name}</div>
-                                <div>{article.description}</div>
+                                <div className="font-bold text-base mb-1">Source: {article.source}</div>
+                                <div>{article.body}</div>
                             </TableCell>
                             <TableCell>
-                                <table className="min-w-[200px] text-xs w-full rounded p-4">
+                                <table className="min-w-[200px] text-xs w-full rounded">
                                     <tbody>
-                                        <tr className="odd:bg-gray-100/60 dark:odd:bg-white/10">
+                                        {Object.keys(article)
+                                            .filter(
+                                                (key) =>
+                                                    !["source", "title", "article_id", "image_url", "body"].includes(key)
+                                            )
+                                            .map((key) => (
+                                                <tr key={key} className="odd:bg-gray-100/60 dark:odd:bg-white/10">
+                                                    <td className="font-semibold px-2 py-1 text-gray-800 dark:text-gray-100">
+                                                        {key.charAt(0).toUpperCase() + key.slice(1)}
+                                                    </td>
+                                                    <td className="py-1 text-gray-800 dark:text-gray-100">
+                                                        {Array.isArray((article as any)[key])
+                                                            ? (article as any)[key].join(", ")
+                                                            : (article as any)[key] ?? "-"}
+                                                    </td>
+                                                </tr>
+                                            ))}
+                                        {/* <tr className="odd:bg-gray-100/60 dark:odd:bg-white/10">
                                             <td className="font-semibold px-2 py-1 text-gray-800 dark:text-gray-100">Creator</td>
                                             <td className="py-1 text-gray-800 dark:text-gray-100">{article.creator ? article.creator.join(", ") : "-"}</td>
                                         </tr>
@@ -98,7 +136,7 @@ export default function SubDataTable<TData>({ row }: SubDataTableProps<TData>) {
                                         <tr className="odd:bg-gray-100/60 dark:odd:bg-white/10">
                                             <td className="font-semibold px-2 py-1 text-gray-800 dark:text-gray-100">Sentiment</td>
                                             <td className="py-1 text-gray-800 dark:text-gray-100">{article.sentiment}</td>
-                                        </tr>
+                                        </tr> */}
                                     </tbody>
                                 </table>
                             </TableCell>
diff --git a/frontend/src/modules/upload/Upload.tsx b/frontend/src/modules/upload/Upload.tsx
new file mode 100644
index 0000000..2be9cd9
--- /dev/null
+++ b/frontend/src/modules/upload/Upload.tsx
@@ -0,0 +1,119 @@
+import { Button } from "@/components/ui/button";
+import React, { useRef, useState, useCallback } from "react";
+
+export function Upload() {
+    const [files, setFiles] = useState<File[]>([]);
+    const [isDragging, setIsDragging] = useState(false);
+    const [uploading, setUploading] = useState(false);
+    const [message, setMessage] = useState("");
+    const inputRef = useRef<HTMLInputElement>(null);
+    const API_BASE_URL = import.meta.env.VITE_API_UPLOAD_URL || "";
+
+    const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        setIsDragging(false);
+        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            setFiles(Array.from(e.dataTransfer.files));
+        }
+    };
+
+    const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        setIsDragging(true);
+    };
+
+    const handleDragLeave = () => {
+        setIsDragging(false);
+    };
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files) {
+            setFiles(Array.from(e.target.files));
+        }
+    };
+
+    const handleClick = () => {
+        inputRef.current?.click();
+    };
+
+    const handleUpload = async () => {
+        if (files.length === 0) {
+            setMessage("No files selected.");
+            return;
+        }
+        setUploading(true);
+        setMessage("");
+        const formData = new FormData();
+        files.forEach((file) => {
+            formData.append("files", file);
+        });
+        try {
+            // Use API endpoint from env variable
+            const response = await fetch(`${API_BASE_URL}/upload`, {
+                method: "POST",
+                body: formData,
+            });
+            if (response.ok) {
+                setMessage("Files uploaded successfully!");
+                setFiles([]);
+            } else {
+                setMessage("Upload failed.");
+            }
+        } catch (error) {
+            setMessage("An error occurred during upload.");
+        } finally {
+            setUploading(false);
+        }
+    };
+
+    // Debounce upload button to prevent multiple rapid clicks
+    const uploadTimeout = useRef<NodeJS.Timeout | null>(null);
+    const handleUploadDebounced = useCallback(() => {
+        if (uploadTimeout.current) return; // Prevent if already waiting
+        handleUpload();
+        uploadTimeout.current = setTimeout(() => {
+            uploadTimeout.current = null;
+        }, 1500); // 1.5s debounce
+    }, [handleUpload]);
+
+    return (
+        <div className="w-full p-8">
+            <h1 className="text-xl font-bold mb-4">Upload Files</h1>
+            <div
+                className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${isDragging ? "border-blue-500 bg-blue-50" : "border-gray-300"}`}
+                onDrop={handleDrop}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onClick={handleClick}
+            >
+                <input
+                    type="file"
+                    multiple
+                    ref={inputRef}
+                    className="hidden"
+                    onChange={handleFileChange}
+                />
+                <p className="mb-2">Drag and drop files here, or <span className="text-blue-600 underline">browse</span></p>
+                {files.length > 0 && (
+                    <ul className="mb-2">
+                        {files.map((file, idx) => (
+                            <li key={idx} className="text-sm text-gray-700">{file.name}</li>
+                        ))}
+                    </ul>
+                )}
+            </div>
+            <div className="flex gap-2 mt-4 justify-center">
+                <Button variant="default" onClick={handleUploadDebounced}
+                    disabled={uploading || files.length === 0}> {uploading ? "Uploading..." : "Upload"}</Button>
+                <Button
+                    variant="destructive"
+                    onClick={() => {setFiles([]); setMessage("");}}
+                    disabled={files.length === 0 || uploading}
+                >
+                    Clear Selection
+                </Button>
+            </div>
+            {message && <p className="mt-4 text-center text-sm">{message}</p>}
+        </div>
+    );
+}
\ No newline at end of file