diff --git a/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/DocumentListCard/index.tsx b/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/DocumentListCard/index.tsx
new file mode 100644
index 0000000000..0faa7c81bd
--- /dev/null
+++ b/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/DocumentListCard/index.tsx
@@ -0,0 +1,82 @@
+import { useMemo } from 'react';
+
+import Container from '#components/Container';
+import Table from '#components/Table';
+import { DownloadFillIcon } from '@ifrc-go/icons';
+import { GoApiResponse } from '#utils/restRequest';
+import {
+    createLinkColumn,
+    createStringColumn,
+    createDateColumn,
+} from '#components/Table/ColumnShortcuts';
+
+import styles from './styles.module.css';
+
+type GetKeyDocumentResponse = GoApiResponse<'/api/v2/country-document/'>;
+type KeyDocumentItem = NonNullable<GetKeyDocumentResponse['results']>[number];
+
+interface Props {
+    label: string;
+    documents: KeyDocumentItem[];
+}
+
+function documentKeySelector(document: KeyDocumentItem) {
+    return document.id;
+}
+
+function DocumentListCard(props: Props) {
+    const {
+        label,
+        documents,
+    } = props;
+
+    const columns = useMemo(
+        () => ([
+            createStringColumn<KeyDocumentItem, number>(
+                'name',
+                '',
+                (item) => item.name,
+            ),
+            createDateColumn<KeyDocumentItem, number>(
+                'date',
+                '',
+                (item) => item.year,
+                {
+                    columnClassName: styles.date,
+                },
+            ),
+            createLinkColumn<KeyDocumentItem, number>(
+                'url',
+                '',
+                () => <DownloadFillIcon />,
+                (item) => ({
+                    external: true,
+                    href: item.url,
+                }),
+            ),
+        ]),
+        [
+        ],
+    );
+
+    return (
+        <Container
+            className={styles.documentListCard}
+            heading={label}
+            headingLevel={4}
+            withHeaderBorder
+            withInternalPadding
+        >
+            <Table
+                data={documents}
+                pending={false}
+                filtered={false}
+                columns={columns}
+                keySelector={documentKeySelector}
+                headersHidden
+            />
+        </Container>
+    );
+}
+
+export default DocumentListCard;
diff --git a/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/DocumentListCard/styles.module.css b/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/DocumentListCard/styles.module.css
new file mode 100644
index 0000000000..d24ff16ae2
--- /dev/null
+++ b/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/DocumentListCard/styles.module.css
@@ -0,0 +1,12 @@
+.document-list-card {
+    border-radius: var(--go-ui-border-radius-sm);
+    box-shadow: var(--go-ui-box-shadow-md);
+
+    .document {
+        .date {
+            width: 0%;
+            min-width: 9rem;
+        }
+    }
+}
+
diff --git a/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/index.tsx b/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/index.tsx
index 37fc10b6a8..e741365355 100644
--- a/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/index.tsx
+++ b/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/index.tsx
@@ -1,21 +1,36 @@
+import { useCallback } from 'react';
 import { useOutletContext } from 'react-router-dom';
-import { DownloadFillIcon, SearchLineIcon } from '@ifrc-go/icons';
-import { listToGroupList, mapToList } from '@togglecorp/fujs';
+import { SearchLineIcon } from '@ifrc-go/icons';
+import {
+    isNotDefined,
+    listToGroupList,
+    mapToList,
+    isDefined,
+} from '@togglecorp/fujs';
 
 import Container from '#components/Container';
 import DateInput from '#components/DateInput';
+import Grid from '#components/Grid';
 import TextInput from '#components/TextInput';
-import Link from '#components/Link';
-import useTranslation from '#hooks/useTranslation';
 import useFilterState from '#hooks/useFilterState';
+import useTranslation from '#hooks/useTranslation';
 import { GoApiResponse, useRequest } from '#utils/restRequest';
 import { CountryOutletContext } from '#utils/outletContext';
 
+import DocumentListCard from './DocumentListCard';
 import i18n from './i18n.json';
-import styles from './styles.module.css';
 
 type GetKeyDocumentResponse = GoApiResponse<'/api/v2/country-document/'>;
-export type KeyDocumentItem = NonNullable<GetKeyDocumentResponse['results']>[number];
+type KeyDocumentItem = NonNullable<GetKeyDocumentResponse['results']>[number];
+
+interface GroupedDocuments {
+    label: string;
+    documents: KeyDocumentItem[];
+}
+
+function groupedDocumentsListKeySelector(groupedDocuments: GroupedDocuments) {
+    return groupedDocuments.label;
+}
 
 function NationalSocietyKeyDocuments() {
     const strings = useTranslation(i18n);
@@ -24,6 +39,7 @@ function NationalSocietyKeyDocuments() {
     const {
         filter,
         rawFilter,
+        filtered,
         setFilterField,
     } = useFilterState<{
         searchText?: string,
@@ -34,35 +50,40 @@ function NationalSocietyKeyDocuments() {
     });
     const {
         response: documentResponse,
+        pending: documentResponsePending,
+        error: documentResponseError,
     } = useRequest({
         url: '/api/v2/country-document/',
+        skip: isNotDefined(countryId),
         query: {
-            country: Number(countryId),
+            country: isDefined(countryId) ? Number(countryId) : undefined,
             search: filter.searchText,
-            year__lte: filter.startDateAfter,
-            year__gte: filter.startDateBefore,
+            year__gte: filter.startDateAfter,
+            year__lte: filter.startDateBefore,
         },
         preserveResponse: true,
     });
 
-    const documents = documentResponse?.results ?? [];
-
     const groupedDocumentsByType = (
         listToGroupList(
-            documents,
+            documentResponse?.results,
             (item) => item.document_type,
             (item) => item,
-        ) ?? {}
+        )
     );
-    const documentsMapList = mapToList(
+
+    const groupedDocumentsList = mapToList(
         groupedDocumentsByType,
-        (d, k) => ({ label: k, value: d }),
+        (documents, documentType) => ({ label: documentType, documents }),
     );
 
+    const rendererParams = useCallback((label: string, groupedDocuments: GroupedDocuments) => ({
+        label,
+        documents: groupedDocuments.documents,
+    }), []);
+
     return (
         <Container
-            className={styles.nationalSocietyDocuments}
-            childrenContainerClassName={styles.nsKey}
             heading={strings.nSSocietyKeyDocumentsTitle}
             withHeaderBorder
             withGridViewInFilter
@@ -91,30 +112,16 @@ function NationalSocietyKeyDocuments() {
                 </>
             )}
         >
-            {documentsMapList.map((document) => (
-                <Container
-                    className={styles.nsKeyDocuments}
-                    childrenContainerClassName={styles.nsDocuments}
-                    key={document.label}
-                    heading={document.label}
-                    withHeaderBorder
-                >
-                    {document.value.map((doc) => (
-                        <div className={styles.document}>
-                            <div>{doc?.name}</div>
-                            <div>{doc?.year}</div>
-                            <Link
-                                className={styles.downloadLink}
-                                href={doc?.url}
-                                external
-                                variant="tertiary"
-                            >
-                                <DownloadFillIcon className={styles.icon} />
-                            </Link>
-                        </div>
-                    ))}
-                </Container>
-            ))}
+            <Grid
+                data={groupedDocumentsList}
+                pending={documentResponsePending}
+                errored={isDefined(documentResponseError)}
+                filtered={filtered}
+                keySelector={groupedDocumentsListKeySelector}
+                renderer={DocumentListCard}
+                rendererParams={rendererParams}
+                numPreferredColumns={3}
+            />
         </Container>
     );
 }
diff --git a/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/styles.module.css b/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/styles.module.css
deleted file mode 100644
index e7303e4f04..0000000000
--- a/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/styles.module.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.national-society-documents {
-    width: 100%;
-    min-height: var(--go-ui-content-min-height);
-
-    .ns-key {
-        display: grid;
-        grid-gap: var(--go-ui-spacing-lg);
-        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
-
-        .ns-key-documents {
-            border-radius: var(--go-ui-border-radius-lg);
-            box-shadow: var(--go-ui-box-shadow-md);
-            padding: var(--go-ui-spacing-lg);
-
-            .ns-documents{
-                display: flex;
-                flex-direction: column;
-                gap: var(--go-ui-spacing-sm);
-
-                .document {
-                    display: flex;
-                    flex-wrap: wrap;
-                    justify-content: space-between;
-                    gap: var(--go-ui-spacing-md);
-                }
-            }
-        }
-    }
-}