diff --git a/src/components/KnownFacts/KnownFacts.css b/src/components/KnownFacts/KnownFacts.css
new file mode 100644
index 00000000..09eca21f
--- /dev/null
+++ b/src/components/KnownFacts/KnownFacts.css
@@ -0,0 +1,19 @@
+.memori-known-facts-modal {
+    z-index: 10000;
+}
+
+.memori-known-facts-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    margin: 1rem 0;
+}
+
+.memori-known-facts-actions .memori-button[disabled] {
+    opacity: 0.4;
+}
+
+.memori-known-facts-delete-selected {
+    margin-left: auto;
+}
\ No newline at end of file
diff --git a/src/components/KnownFacts/KnownFacts.stories.tsx b/src/components/KnownFacts/KnownFacts.stories.tsx
new file mode 100644
index 00000000..1edb7037
--- /dev/null
+++ b/src/components/KnownFacts/KnownFacts.stories.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { memori, sessionID, knownFact } from '../../mocks/data';
+import I18nWrapper from '../../I18nWrapper';
+import KnownFacts, { Props } from './KnownFacts';
+
+import './KnownFacts.css';
+
+const meta: Meta = {
+  title: 'Known Facts',
+  component: KnownFacts,
+  argTypes: {
+    visible: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <KnownFacts
+      apiURL="https://backend.memori.ai"
+      sessionID={sessionID}
+      memori={memori}
+      closeDrawer={() => {}}
+      {...args}
+    />
+  </I18nWrapper>
+);
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
+Default.args = {
+  visible: true,
+};
+
+export const WithData = Template.bind({});
+WithData.args = {
+  visible: true,
+  initialKnownFacts: [knownFact],
+};
+
+export const WithPaginatedData = Template.bind({});
+WithPaginatedData.args = {
+  visible: true,
+  initialKnownFacts: new Array(26).fill(knownFact).map((fact, index) => ({
+    ...fact,
+    knownFactID: fact.knownFactID + index,
+  })),
+};
+
+export const WithRealDataLocalhost = Template.bind({});
+WithRealDataLocalhost.args = {
+  visible: true,
+  sessionID: '5841f5f9-3315-4a5a-9b62-33b13d5a27fd',
+  apiURL: 'http://localhost:7778',
+  memori: {
+    memoriName: 'test memori',
+    ownerUserName: 'nicola',
+    memoriID: '1a9c75e8-57aa-4ce3-8ea5-256185fa79a7',
+    ownerUserID: '04a8cff9-13d6-4367-9cb2-72b9af9ee494',
+    tenantID: 'app.memorytwin.com',
+    apiURL: 'http://localhost:7778',
+    baseURL: 'http://localhost:3000',
+    uiLang: 'EN',
+    lang: 'IT',
+    layout: 'FULLPAGE',
+    showShare: 'true',
+    integrationID: '82f017cc-450b-4c47-acf5-47910d336ce9',
+  },
+};
diff --git a/src/components/KnownFacts/KnownFacts.test.tsx b/src/components/KnownFacts/KnownFacts.test.tsx
new file mode 100644
index 00000000..2ef34bae
--- /dev/null
+++ b/src/components/KnownFacts/KnownFacts.test.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import KnownFacts from './KnownFacts';
+import { knownFact, memori, sessionID } from '../../mocks/data';
+
+beforeEach(() => {
+  // @ts-ignore
+  window.IntersectionObserver = jest.fn(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+    takeRecords: jest.fn(),
+  }));
+});
+
+it('renders KnownFacts hidden unchanged', () => {
+  const { container } = render(
+    <KnownFacts
+      apiURL="https://backend.memori.ai"
+      memori={memori}
+      sessionID={sessionID}
+      visible={false}
+      closeDrawer={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders KnownFacts visible unchanged', () => {
+  const { container } = render(
+    <KnownFacts
+      apiURL="https://backend.memori.ai"
+      memori={memori}
+      sessionID={sessionID}
+      visible={true}
+      closeDrawer={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders KnownFacts with data unchanged', () => {
+  const { container } = render(
+    <KnownFacts
+      apiURL="https://backend.memori.ai"
+      memori={memori}
+      sessionID={sessionID}
+      visible={true}
+      initialKnownFacts={[knownFact]}
+      closeDrawer={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
diff --git a/src/components/KnownFacts/KnownFacts.tsx b/src/components/KnownFacts/KnownFacts.tsx
new file mode 100644
index 00000000..031c1d67
--- /dev/null
+++ b/src/components/KnownFacts/KnownFacts.tsx
@@ -0,0 +1,449 @@
+import { KnownFact, Memori } from '@memori.ai/memori-api-client/dist/types';
+import { useEffect, useState } from 'react';
+import memoriApiClient from '@memori.ai/memori-api-client';
+import Button from '../ui/Button';
+import Drawer from '../ui/Drawer';
+import Spin from '../ui/Spin';
+import Modal from '../ui/Modal';
+import toast from 'react-hot-toast';
+import { getErrori18nKey } from '../../helpers/error';
+import { useTranslation } from 'react-i18next';
+import Delete from '../icons/Delete';
+import Checkbox from '../ui/Checkbox';
+import Select from '../ui/Select';
+import ChevronLeft from '../icons/ChevronLeft';
+import ChevronRight from '../icons/ChevronRight';
+
+export interface Props {
+  apiURL: string;
+  sessionID: string;
+  memori: Memori;
+  initialKnownFacts?: KnownFact[];
+  visible?: boolean;
+  closeDrawer: () => void;
+}
+
+const KnownFacts = ({
+  apiURL,
+  sessionID,
+  memori,
+  visible = true,
+  initialKnownFacts = [],
+  closeDrawer,
+}: Props) => {
+  const { t } = useTranslation();
+
+  const client = memoriApiClient(apiURL);
+  const { getKnownFactsPaginated, deleteKnownFact } = client.knownFacts;
+
+  const [knownFacts, setKnownFacts] = useState<KnownFact[]>(initialKnownFacts);
+  const [numberOfResults, setNumberOfResults] = useState(25);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [knownFactsCount, setKnownFactsCount] = useState(
+    initialKnownFacts?.length ?? 0
+  );
+  const [loading, setLoading] = useState(false);
+
+  /**
+   * Fetch known facts
+   */
+  const fetchKnownFacts = async (
+    sessionId?: string,
+    from?: number,
+    howMany?: number
+  ) => {
+    if (!sessionID && !sessionId) return;
+    setLoading(true);
+    try {
+      const { knownFacts, count, ...response } = await getKnownFactsPaginated(
+        sessionId ?? sessionID,
+        from ?? pageIndex,
+        howMany ?? numberOfResults
+      );
+
+      setKnownFacts(knownFacts ?? []);
+      setKnownFactsCount(count ?? 0);
+
+      if (response.resultCode !== 0) {
+        console.error(response);
+        toast.error(t(getErrori18nKey(response.resultCode)));
+      }
+    } catch (err) {
+      console.error('KNOWN_FACTS/FETCH', err);
+      setKnownFacts(initialKnownFacts ?? []);
+    }
+
+    setLoading(false);
+  };
+  useEffect(() => {
+    fetchKnownFacts();
+  }, []);
+
+  /**
+   * Table selection
+   */
+  const [bulkDeleteModalVisible, setBulkDeleteModalVisible] = useState(false);
+  const [deleteModalVisibleFor, setDeleteModalVisibleFor] = useState<string>();
+  const [selectedRowKeys, setSelectedRowKeys] = useState<(string | number)[]>(
+    []
+  );
+  // const rowSelection = {
+  //   selectedRowKeys,
+  //   onChange: setSelectedRowKeys,
+  // };
+
+  // const columns = [
+  //   {
+  //     title: t('knownFacts.text'),
+  //     dataIndex: 'text',
+  //   },
+  //   {
+  //     title: t('createdAt'),
+  //     dataIndex: 'creationTimestamp',
+  //     sorter: (a: KnownFact, b: KnownFact) =>
+  //       new Date(a.creationTimestamp ?? Date.now()).getTime() -
+  //       new Date(b.creationTimestamp ?? Date.now()).getTime(),
+  //     render: (creationTimestamp: Date) => (
+  //       <div className={styles.columnCentered}>
+  //         <span className={styles.date}>
+  //           {creationTimestamp
+  //             ? new Intl.DateTimeFormat('it', {
+  //                 dateStyle: 'short',
+  //                 timeStyle: 'short',
+  //               }).format(new Date(creationTimestamp))
+  //             : '-'}
+  //         </span>
+  //       </div>
+  //     ),
+  //   },
+  //   {
+  //     title: t('actions'),
+  //     key: 'action',
+  //     render: (_value: any, kf: KnownFact) => (
+  //       <div className={styles.actionColumn}>
+  //         <Button
+  //           danger
+  //           icon={<DeleteOutlined />}
+  //           disabled={selectedRowKeys?.length > 0}
+  //           title={t('delete') || 'Delete'}
+  //           onClick={() => {
+  //             kf.knownFactID &&
+  //               Modal.confirm({
+  //                 title: t('knownFacts.deleteConfirmTitle'),
+  //                 content: t('knownFacts.deleteConfirmMessage'),
+  //                 okText: t('confirm'),
+  //                 cancelText: t('cancel'),
+  //                 centered: true,
+  //                 autoFocusButton: 'cancel',
+  //                 onOk: async () => {
+  //                   try {
+  //                     const response = await deleteKnownFact(
+  //                       sessionID,
+  //                       kf.knownFactID
+  //                     );
+  //                     if (response.resultCode === 0) {
+  //                       toast.success(t('knownFacts.deleteSuccess'));
+  //                       setSelectedRowKeys([]);
+  //                       fetchKnownFacts();
+  //                     } else {
+  //                       console.error(response);
+  //                       toast.error(
+  //                         t(getErrori18nKey(response.resultCode), {
+  //                           ns: 'common',
+  //                         })
+  //                       );
+  //                     }
+  //                   } catch (_e) {
+  //                     let error = _e as Error;
+  //                     toast.error(t('Error') + error.message);
+  //                   }
+  //                 },
+  //               });
+  //           }}
+  //         />
+  //       </div>
+  //     ),
+  //   },
+  // ];
+
+  return (
+    <Drawer
+      open={visible}
+      width="80%"
+      className="memori-known-facts-drawer"
+      onClose={() => closeDrawer()}
+      title={t('knownFacts.title')}
+    >
+      <p>
+        {t('knownFacts.description', {
+          memoriName: memori.name,
+        })}
+      </p>
+
+      <Spin spinning={loading}>
+        <div className="memori-known-facts-actions">
+          <Button
+            primary
+            danger
+            onClick={() => {
+              setBulkDeleteModalVisible(true);
+            }}
+            className="memori-known-facts-delete-selected"
+            disabled={selectedRowKeys?.length === 0}
+            icon={<Delete />}
+            loading={loading}
+          >
+            {t('selected')} ({selectedRowKeys?.length})
+          </Button>
+          <Modal
+            className="memori-known-facts-modal"
+            open={bulkDeleteModalVisible}
+            closable
+            title={
+              selectedRowKeys.length > 1
+                ? t('knownFacts.deleteSelectedConfirmTitle')
+                : t('knownFacts.deleteConfirmTitle')
+            }
+            description={
+              selectedRowKeys.length > 1
+                ? t('knownFacts.deleteSelectedConfirmMessage', {
+                    number: selectedRowKeys.length,
+                  })
+                : t('knownFacts.deleteConfirmMessage')
+            }
+            onClose={() => {
+              setBulkDeleteModalVisible(false);
+            }}
+            footer={
+              <>
+                <Button
+                  ghost
+                  onClick={() => {
+                    setBulkDeleteModalVisible(false);
+                  }}
+                >
+                  {t('cancel')}
+                </Button>
+                <Button
+                  primary
+                  danger
+                  onClick={async () => {
+                    try {
+                      const mutations = selectedRowKeys.map(key => {
+                        let knownFactID = key as string;
+                        return deleteKnownFact(sessionID, knownFactID);
+                      });
+                      Promise.all(mutations).then(responses => {
+                        if (responses.every(r => r.resultCode === 0)) {
+                          toast.success(t('knownFacts.deleteSuccess'));
+                          setSelectedRowKeys([]);
+                          fetchKnownFacts();
+                          setBulkDeleteModalVisible(false);
+                        } else {
+                          let errored = responses.find(r => r.resultCode !== 0);
+                          console.error(errored);
+                          if (errored?.resultCode !== undefined)
+                            toast.error(
+                              t(getErrori18nKey(errored?.resultCode))
+                            );
+                        }
+                      });
+                    } catch (_e) {
+                      let error = _e as Error;
+                      toast.error(t('Error') + error.message);
+                    }
+                  }}
+                >
+                  {t('confirm')}
+                </Button>
+              </>
+            }
+          />
+        </div>
+
+        {knownFactsCount > 25 && (
+          <nav className="memori--table--pagination">
+            {knownFactsCount > numberOfResults && (
+              <div className="memori--table--pagination--pages">
+                <Button
+                  shape="circle"
+                  disabled={pageIndex === 0}
+                  padded={false}
+                  title={t('previous') || 'Previous'}
+                  icon={<ChevronLeft />}
+                  onClick={() => {
+                    setPageIndex(pageIndex - 1);
+                    fetchKnownFacts(undefined, pageIndex - 1, numberOfResults);
+                  }}
+                />
+                <span className="memori--table--pagination--pages--current">
+                  {pageIndex + 1} /{' '}
+                  {Math.ceil(knownFactsCount / numberOfResults)}
+                </span>
+                <Button
+                  shape="circle"
+                  padded={false}
+                  title={t('next') || 'Next'}
+                  icon={<ChevronRight />}
+                  disabled={
+                    (pageIndex + 1) * numberOfResults >= knownFactsCount
+                  }
+                  onClick={() => {
+                    setPageIndex(pageIndex + 1);
+                    fetchKnownFacts(undefined, 1, numberOfResults);
+                  }}
+                />
+              </div>
+            )}
+
+            <Select
+              options={[
+                { label: `25 / ${t('page') || 'page'}`, value: 25 },
+                { label: `50 / ${t('page') || 'page'}`, value: 50 },
+                { label: `100 / ${t('page') || 'page'}`, value: 100 },
+              ]}
+              value={numberOfResults}
+              displayValue={`${numberOfResults} / ${t('page') || 'page'}`}
+              onChange={value => {
+                setNumberOfResults(value);
+                fetchKnownFacts(undefined, undefined, value);
+              }}
+            />
+          </nav>
+        )}
+        <table className="memori--table">
+          <thead>
+            <tr>
+              <th className="memori--table--column-centered">
+                <Checkbox
+                  checked={
+                    !!knownFacts?.length &&
+                    selectedRowKeys?.length === knownFacts.length
+                  }
+                  indeterminate={
+                    !!knownFacts?.length &&
+                    !!selectedRowKeys?.length &&
+                    selectedRowKeys?.length !== knownFacts?.length
+                  }
+                  onChange={e => {
+                    if (e.target.checked) {
+                      setSelectedRowKeys(knownFacts.map(kf => kf.knownFactID));
+                    } else {
+                      setSelectedRowKeys([]);
+                    }
+                  }}
+                />
+              </th>
+              <th>{t('knownFacts.text')}</th>
+              <th className="mobile-hidden">{t('createdAt')}</th>
+              <th className="memori--table--column-right">{t('actions')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {knownFacts.map(kf => (
+              <tr key={kf.knownFactID}>
+                <th className="memori--table--column-centered">
+                  <Checkbox
+                    checked={selectedRowKeys?.includes(kf.knownFactID)}
+                    onChange={e => {
+                      if (e.target.checked) {
+                        setSelectedRowKeys(srk => [
+                          ...new Set([...srk, kf.knownFactID]),
+                        ]);
+                      } else {
+                        setSelectedRowKeys(
+                          srk =>
+                            srk.filter(
+                              key => key !== kf.knownFactID
+                            ) as string[]
+                        );
+                      }
+                    }}
+                  />
+                </th>
+                <td>{kf.text}</td>
+                <td className="mobile-hidden">
+                  <span className="memori--table--date">
+                    {kf.creationTimestamp
+                      ? new Intl.DateTimeFormat('it', {
+                          dateStyle: 'short',
+                          timeStyle: 'short',
+                        }).format(new Date(kf.creationTimestamp))
+                      : '-'}
+                  </span>
+                </td>
+                <td className="memori--table--column-right">
+                  <div className="memori--table--action-column">
+                    <Button
+                      danger
+                      ghost
+                      shape="circle"
+                      icon={<Delete />}
+                      disabled={selectedRowKeys?.length > 0}
+                      title={t('delete') || 'Delete'}
+                      onClick={() => setDeleteModalVisibleFor(kf.knownFactID)}
+                    />
+                    <Modal
+                      className="memori-known-facts-modal"
+                      open={deleteModalVisibleFor === kf.knownFactID}
+                      closable
+                      title={t('knownFacts.deleteConfirmTitle')}
+                      description={t('knownFacts.deleteConfirmMessage')}
+                      onClose={() => {
+                        setDeleteModalVisibleFor(undefined);
+                      }}
+                      footer={
+                        <>
+                          <Button
+                            ghost
+                            onClick={() => {
+                              setDeleteModalVisibleFor(undefined);
+                            }}
+                          >
+                            {t('cancel')}
+                          </Button>
+                          <Button
+                            primary
+                            danger
+                            onClick={async () => {
+                              try {
+                                const response = await deleteKnownFact(
+                                  sessionID,
+                                  kf.knownFactID
+                                );
+                                if (response.resultCode === 0) {
+                                  toast.success(t('knownFacts.deleteSuccess'));
+                                  setSelectedRowKeys([]);
+                                  fetchKnownFacts();
+                                  setDeleteModalVisibleFor(undefined);
+                                } else {
+                                  console.error(response);
+                                  toast.error(
+                                    t(getErrori18nKey(response.resultCode), {
+                                      ns: 'common',
+                                    })
+                                  );
+                                }
+                              } catch (_e) {
+                                let error = _e as Error;
+                                toast.error(t('Error') + error.message);
+                              }
+                            }}
+                          >
+                            {t('confirm')}
+                          </Button>
+                        </>
+                      }
+                    />
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Spin>
+    </Drawer>
+  );
+};
+
+export default KnownFacts;
diff --git a/src/components/KnownFacts/__snapshots__/KnownFacts.test.tsx.snap b/src/components/KnownFacts/__snapshots__/KnownFacts.test.tsx.snap
new file mode 100644
index 00000000..9ae0914f
--- /dev/null
+++ b/src/components/KnownFacts/__snapshots__/KnownFacts.test.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders KnownFacts hidden unchanged 1`] = `<div />`;
+
+exports[`renders KnownFacts visible unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders KnownFacts with data unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
diff --git a/src/locales/en.json b/src/locales/en.json
index 66956d94..ca8fa16f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -21,6 +21,12 @@
   "day": "Day",
   "month": "Month",
   "year": "Year",
+  "createdAt": "Creation date",
+  "selected": "Selected",
+  "page": "page",
+  "actions": "Actions",
+  "next": "Next",
+  "previous": "Previous",
   "copy": "Copy",
   "copyToClipboard": "Copy to clipboard",
   "showOriginalText": "Show original",
@@ -47,6 +53,20 @@
   "deepThoughtHelper": "Allows to establish a unique relationship between the AI and the person who interrogates it, allowing the AI to remember this relationship and therefore supporting people with questions targeted to their experiences. Once people start their relationships, the creator of the AI will see their community grow with Followers and will be able to observe the known facts collected during the conversations.",
   "deepThoughtDisclaimerTitle": "Deep Thought enabled",
   "deepThoughtDisclaimer": "By continuing the conversation I authorize the processing of my personal data as specified in the information notice which I declare to have read.",
+  "knownFacts": {
+    "title": "Known facts",
+    "description": "Details of the information shared between you and {{memoriName}}",
+    "type": "Type",
+    "typeShortTerm": "Short term",
+    "typeLongTerm": "Long term",
+    "typeHelper": "Types:\n- Short Term: this Known Fact is always used during conversations\n- Long Term: this Known Fact is used during conversations only if relevant to the current question",
+    "text": "Text",
+    "deleteSuccess": "Known fact deleted",
+    "deleteConfirmTitle": "Delete known fact",
+    "deleteConfirmMessage": "Are you sure you want to delete this known fact?",
+    "deleteSelectedConfirmTitle": "Delete selected known facts",
+    "deleteSelectedConfirmMessage": "Are you sure you want to delete the selected known facts?"
+  },
   "auth": {
     "title": "Authentication",
     "useRecoveryTokens": "Use recovery tokens",
diff --git a/src/locales/it.json b/src/locales/it.json
index 99fb2151..ee347c99 100644
--- a/src/locales/it.json
+++ b/src/locales/it.json
@@ -21,6 +21,12 @@
   "day": "Giorno",
   "month": "Mese",
   "year": "Anno",
+  "createdAt": "Data creazione",
+  "selected": "Selezionati",
+  "page": "pagina",
+  "actions": "Azioni",
+  "next": "Successivo",
+  "previous": "Precedente",
   "copy": "Copia",
   "copyToClipboard": "Copia negli appunti",
   "showOriginalText": "Mostra originale",
@@ -47,6 +53,20 @@
   "deepThoughtHelper": "Permette di stabilire una relazione univoca tra l'IA e la persona che la interroga, permettendo all'IA memoria di questa relazione supportando quindi le persone con domande mirate alle loro esperienze. Una volta che le persone avvieranno le loro relazioni, il creatore delle AI vedrà la propria community crescere di Follower e potrà osservare i fatti noti raccolti durante le conversazioni.",
   "deepThoughtDisclaimerTitle": "Pensiero profondo abilitato",
   "deepThoughtDisclaimer": "Proseguendo nella conversazione autorizzo il trattamento dei miei dati personali così come specificato nell'informativa di cui dichiaro di aver preso visione.",
+  "knownFacts": {
+    "title": "Fatti noti",
+    "description": "Dettagli delle informazioni condivise tra te e {{memoriName}}",
+    "type": "Tipo",
+    "typeShortTerm": "Breve termine",
+    "typeLongTerm": "Lungo termine",
+    "typeHelper": "Tipi:\n- Breve termine: questo fatto noto è sempre utilizzato durante le conversazioni\n- Lungo termine: questo fatto noto è utilizzato durante le conversazioni solo se rilevante per la domanda corrente",
+    "text": "Testo",
+    "deleteSuccess": "Fatto noto eliminato",
+    "deleteConfirmTitle": "Elimina il fatto noto",
+    "deleteConfirmMessage": "Confermi di voler eliminare questo fatto noto?",
+    "deleteSelectedConfirmTitle": "Elimina i fatti noti selezionati",
+    "deleteSelectedConfirmMessage": "Confermi di voler eliminare i fatti noti selezionati?"
+  },
   "auth": {
     "title": "Autenticazione",
     "useRecoveryTokens": "Utilizza i token di recupero",
diff --git a/src/mocks/data.ts b/src/mocks/data.ts
index 7464b9e8..6667a318 100644
--- a/src/mocks/data.ts
+++ b/src/mocks/data.ts
@@ -5,6 +5,7 @@ import {
   Integration,
   Tenant,
   DialogState,
+  KnownFact,
 } from '@memori.ai/memori-api-client/dist/types';
 
 export const sessionID = '131165be-9d1a-42fb-a3ce-e8f86d40c88f';
@@ -290,3 +291,13 @@ export const integration: Integration = {
   creationTimestamp: '2022-06-11T14:13:45.685038Z',
   lastChangeTimestamp: '2022-06-11T14:13:45.685038Z',
 };
+
+export const knownFact: KnownFact = {
+  knownFactID: 'b0b0b0b0-b0b0-b0b0-b0b0-b0b0b0b0b0b3',
+  knownFactType: 'ShortTerm',
+  text: 'I am a known fact. Quisque in ultrices lectus. Nulla at urna diam. Proin sodales lobortis libero eu facilisis.',
+  creationTimestamp: '2023-12-01T13:40:25.235896Z',
+  creationSessionID: '0ce713c0-c8f1-4aed-a2a6-40f81c06854f',
+  lastChangeTimestamp: '2023-12-01T13:44:04.832072Z',
+  lastChangeSessionID: '0ce713c0-c8f1-4aed-a2a6-40f81c06854f',
+};
diff --git a/src/styles.css b/src/styles.css
index 7a5c3d89..3bcfd351 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -6,6 +6,7 @@
 @import url('./components/ui/Spin.css');
 @import url('./components/ui/Tooltip.css');
 @import url('./components/ui/Select.css');
+@import url('./components/ui/Table.css');
 
 @import url('./components/CompletionProviderStatus/CompletionProviderStatus.css');
 @import url('./components/PoweredBy/PoweredBy.css');
@@ -36,6 +37,7 @@
 @import url('./components/UploadMenu/UploadMenu.css');
 @import url('./components/DateSelector/DateSelector.css');
 @import url('./components/AgeVerificationModal/AgeVerificationModal.css');
+@import url('./components/KnownFacts/KnownFacts.css');
 @import url('./components/MemoriWidget/MemoriWidget.css');
 
 @import url('https://fonts.bunny.net/css?family=exo-2:200,400,700');
@@ -87,4 +89,10 @@ body.sb-show-main #root,
     --memori-modal--width--md: 80%;
     --memori-error-color: #ff4d4f;
     --memori-warning-color: #faad14;
+}
+
+@media (max-width: 768px) {
+    .mobile-hidden {
+        display: none;
+    }
 }
\ No newline at end of file