diff --git a/public/locales/en/citationBlock.json b/public/locales/en/citationBlock.json
new file mode 100644
index 000000000..bb11901e9
--- /dev/null
+++ b/public/locales/en/citationBlock.json
@@ -0,0 +1 @@
+{ "learnAbout": "Learn About", "standards": "Data Citation Standards" }
diff --git a/public/locales/en/dataset.json b/public/locales/en/dataset.json
index b9a083d83..54dad4532 100644
--- a/public/locales/en/dataset.json
+++ b/public/locales/en/dataset.json
@@ -14,9 +14,7 @@
       "deaccessioned": {
         "description": "DEACCESSIONED VERSION has been added to the citation for this version since it is no longer available."
       }
-    },
-    "learnAbout": "Learn About",
-    "standards": "Data Citation Standards"
+    }
   },
   "datasetActionButtons": {
     "title": "Dataset Action Buttons",
diff --git a/public/locales/en/file.json b/public/locales/en/file.json
index 56ee0fdac..598725512 100644
--- a/public/locales/en/file.json
+++ b/public/locales/en/file.json
@@ -3,6 +3,8 @@
     "metadata": "Metadata"
   },
   "subtext": "This file is part of \"{{datasetTitle}}\".",
+  "datasetCitationTitle": "Dataset Citation",
+  "fileCitationTitle": "File Citation",
   "fileAccess": {
     "title": "File Access",
     "restricted": {
diff --git a/src/files/domain/models/File.ts b/src/files/domain/models/File.ts
index 6f1eb29db..6b934857d 100644
--- a/src/files/domain/models/File.ts
+++ b/src/files/domain/models/File.ts
@@ -7,6 +7,7 @@ export interface FilePermissions {
 export interface File {
   name: string
   datasetVersion: DatasetVersion
+  citation: string
   restricted: boolean
   permissions: FilePermissions
 }
diff --git a/src/sections/dataset/Dataset.module.scss b/src/sections/dataset/Dataset.module.scss
index 991d976ca..2de5469ba 100644
--- a/src/sections/dataset/Dataset.module.scss
+++ b/src/sections/dataset/Dataset.module.scss
@@ -7,7 +7,7 @@
 }
 
 .summary-container {
-  margin:1em 0;
+  margin-bottom: 1em;
 }
 
 .tab-container {
diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.module.scss b/src/sections/dataset/dataset-citation/DatasetCitation.module.scss
index 4dfa0ae50..c6c731334 100644
--- a/src/sections/dataset/dataset-citation/DatasetCitation.module.scss
+++ b/src/sections/dataset/dataset-citation/DatasetCitation.module.scss
@@ -1,16 +1,11 @@
 @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
 
 .container {
-min-height: 150px;
-    margin: 0.5rem 0;
-    padding: 10px;
+    margin: 0 0 20px;
+    padding: 10px 0;
     border: 1px solid $dv-info-border-color;
 }
 
-.citation {
-    margin-bottom: 1em;
-}
-
 .deaccessioned {
     margin: 0.5rem 0;
     padding: 10px;
diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.tsx b/src/sections/dataset/dataset-citation/DatasetCitation.tsx
index 41534f2b0..e9f05f3f2 100644
--- a/src/sections/dataset/dataset-citation/DatasetCitation.tsx
+++ b/src/sections/dataset/dataset-citation/DatasetCitation.tsx
@@ -1,56 +1,41 @@
 import { Col, Row } from '@iqss/dataverse-design-system'
 import styles from './DatasetCitation.module.scss'
-import { useTranslation } from 'react-i18next'
 import { DatasetPublishingStatus, DatasetVersion } from '../../../dataset/domain/models/Dataset'
 import { DatasetThumbnail } from '../dataset-thumbnail/DatasetThumbnail'
 import { CitationDescription } from '../../shared/citation/CitationDescription'
 import { DatasetCitationTooltip } from './DatasetCitationTooltip'
+import { CitationLearnAbout } from '../../shared/citation/CitationLearnAbout'
 
 interface DatasetCitationProps {
   thumbnail?: string
   version: DatasetVersion
+  withoutThumbnail?: boolean
 }
 
-export function DatasetCitation({ thumbnail, version }: DatasetCitationProps) {
-  const { t } = useTranslation('dataset')
+export function DatasetCitation({ thumbnail, version, withoutThumbnail }: DatasetCitationProps) {
   return (
-    <>
-      <Row
-        className={
-          version.publishingStatus === DatasetPublishingStatus.DEACCESSIONED
-            ? styles.deaccessioned
-            : styles.container
-        }>
-        <Row className={styles.row}>
-          <Col sm={2} className={styles.thumbnail}>
-            <DatasetThumbnail
-              thumbnail={thumbnail}
-              title={version.title}
-              isDeaccessioned={version.publishingStatus === DatasetPublishingStatus.DEACCESSIONED}
-            />
-          </Col>
-          <Col>
-            <Row>
-              <span className={styles.citation}>
-                <CitationDescription citation={version.citation} />
-                <DatasetCitationTooltip status={version.publishingStatus} />
-              </span>
-            </Row>
-            <Row>
-              <div>
-                {t('citation.learnAbout')}{' '}
-                <a
-                  className={styles.link}
-                  href="https://dataverse.org/best-practices/data-citation"
-                  target="_blank"
-                  rel="noopener noreferrer">
-                  {t('citation.standards')}.
-                </a>
-              </div>
-            </Row>
-          </Col>
-        </Row>
-      </Row>
-    </>
+    <Row
+      className={
+        version.publishingStatus === DatasetPublishingStatus.DEACCESSIONED
+          ? styles.deaccessioned
+          : styles.container
+      }>
+      {!withoutThumbnail && (
+        <Col sm={2} className={styles.thumbnail}>
+          <DatasetThumbnail
+            thumbnail={thumbnail}
+            title={version.title}
+            isDeaccessioned={version.publishingStatus === DatasetPublishingStatus.DEACCESSIONED}
+          />
+        </Col>
+      )}
+      <Col sm={withoutThumbnail ? 12 : 10}>
+        <CitationDescription
+          citation={version.citation}
+          tooltip={<DatasetCitationTooltip status={version.publishingStatus} />}
+        />
+        <CitationLearnAbout />
+      </Col>
+    </Row>
   )
 }
diff --git a/src/sections/dataset/dataset-citation/DatasetCitationTooltip.tsx b/src/sections/dataset/dataset-citation/DatasetCitationTooltip.tsx
index 0ae1676b1..a9e2d2b04 100644
--- a/src/sections/dataset/dataset-citation/DatasetCitationTooltip.tsx
+++ b/src/sections/dataset/dataset-citation/DatasetCitationTooltip.tsx
@@ -9,16 +9,11 @@ interface DatasetCitationTooltipProps {
 export function DatasetCitationTooltip({ status }: DatasetCitationTooltipProps) {
   const { t } = useTranslation('dataset')
 
-  if (status !== DatasetPublishingStatus.RELEASED) {
-    return (
-      <>
-        {' '}
-        <QuestionMarkTooltip
-          placement={'top'}
-          message={t(`citation.status.${status}.description`)}
-        />
-      </>
-    )
+  if (status === DatasetPublishingStatus.RELEASED) {
+    return <></>
   }
-  return <></>
+
+  return (
+    <QuestionMarkTooltip placement={'top'} message={t(`citation.status.${status}.description`)} />
+  )
 }
diff --git a/src/sections/file/File.module.scss b/src/sections/file/File.module.scss
index d05c34a83..78bb1f21c 100644
--- a/src/sections/file/File.module.scss
+++ b/src/sections/file/File.module.scss
@@ -1,4 +1,5 @@
 @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/typography.module";
 
 .header {
   margin: 0.5em 0;
@@ -6,7 +7,7 @@
 
 .subtext {
   margin-bottom: 10px;
- color: $dv-subtext-color;
+  color: $dv-subtext-color;
 }
 
 .container {
@@ -18,6 +19,10 @@
   border-bottom: 1px solid #dee2e6;
 }
 
+.citation-title {
+  font-weight: $dv-font-weight-bold;
+}
+
 .labels {
   display: flex;
   align-items: center;
diff --git a/src/sections/file/File.tsx b/src/sections/file/File.tsx
index 399431c14..0e71a0c67 100644
--- a/src/sections/file/File.tsx
+++ b/src/sections/file/File.tsx
@@ -1,12 +1,14 @@
 import { useTranslation } from 'react-i18next'
 import { PageNotFound } from '../page-not-found/PageNotFound'
 import styles from './File.module.scss'
-import { Tabs } from '@iqss/dataverse-design-system'
+import { Col, Row, Tabs } from '@iqss/dataverse-design-system'
 import { FileRepository } from '../../files/domain/repositories/FileRepository'
 import { useFile } from './useFile'
 import { useEffect } from 'react'
 import { useLoading } from '../loading/LoadingContext'
 import { FileSkeleton } from './FileSkeleton'
+import { DatasetCitation } from '../dataset/dataset-citation/DatasetCitation'
+import { FileCitation } from './file-citation/FileCitation'
 import { DatasetLabels } from '../dataset/dataset-labels/DatasetLabels'
 import { FileAccessRestrictedIcon } from './file-access/FileAccessRestrictedIcon'
 
@@ -51,6 +53,14 @@ export function File({ repository, id }: FileProps) {
             </div>
           </header>
           <div className={styles.container}>
+            <Row>
+              <Col sm={9}>
+                <span className={styles['citation-title']}>{t('fileCitationTitle')}</span>
+                <FileCitation citation={file.citation} datasetVersion={file.datasetVersion} />
+                <span className={styles['citation-title']}>{t('datasetCitationTitle')}</span>
+                <DatasetCitation version={file.datasetVersion} withoutThumbnail />
+              </Col>
+            </Row>
             <Tabs defaultActiveKey="metadata">
               <Tabs.Tab eventKey="metadata" title={t('tabs.metadata')}>
                 <span></span>
diff --git a/src/sections/file/FileSkeleton.tsx b/src/sections/file/FileSkeleton.tsx
index e2c8f30de..bc7acec1d 100644
--- a/src/sections/file/FileSkeleton.tsx
+++ b/src/sections/file/FileSkeleton.tsx
@@ -1,8 +1,10 @@
 import styles from './File.module.scss'
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
-import { Tabs } from '@iqss/dataverse-design-system'
+import { Col, Row, Tabs } from '@iqss/dataverse-design-system'
+import { useTranslation } from 'react-i18next'
 
 export function FileSkeleton() {
+  const { t } = useTranslation('file')
   return (
     <SkeletonTheme>
       <article data-testid="file-skeleton">
@@ -16,11 +18,20 @@ export function FileSkeleton() {
           <Skeleton width="10%" />
         </header>
         <div className={styles.container}>
+          <Row>
+            <Col sm={9}>
+              <span className={styles['citation-title']}>{t('fileCitationTitle')}</span>
+              <Skeleton height="80px" style={{ marginBottom: 20 }} />
+              <span className={styles['citation-title']}>{t('datasetCitationTitle')}</span>
+              <Skeleton height="80px" style={{ marginBottom: 20 }} />
+            </Col>
+          </Row>
           <Tabs defaultActiveKey="metadata">
             <Tabs.Tab eventKey="metadata" title="Metadata">
-              <Skeleton height="1000px" style={{ marginTop: 20 }} />
+              <></>
             </Tabs.Tab>
           </Tabs>
+          <div className={styles['separation-line']}></div>
         </div>
       </article>
     </SkeletonTheme>
diff --git a/src/sections/file/file-citation/FileCitation.module.scss b/src/sections/file/file-citation/FileCitation.module.scss
new file mode 100644
index 000000000..163a91410
--- /dev/null
+++ b/src/sections/file/file-citation/FileCitation.module.scss
@@ -0,0 +1,13 @@
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+
+.container {
+  margin: 0 0 20px;
+  padding: 10px 0;
+  border: 1px solid $dv-secondary-color;
+}
+
+.deaccessioned {
+  margin: 0.5rem 0;
+  padding: 10px;
+  border: 1px solid $dv-danger-color;
+}
diff --git a/src/sections/file/file-citation/FileCitation.tsx b/src/sections/file/file-citation/FileCitation.tsx
new file mode 100644
index 000000000..6beafed84
--- /dev/null
+++ b/src/sections/file/file-citation/FileCitation.tsx
@@ -0,0 +1,29 @@
+import { DatasetPublishingStatus, DatasetVersion } from '../../../dataset/domain/models/Dataset'
+import styles from './FileCitation.module.scss'
+import { CitationDescription } from '../../shared/citation/CitationDescription'
+import { DatasetCitationTooltip } from '../../dataset/dataset-citation/DatasetCitationTooltip'
+import { CitationLearnAbout } from '../../shared/citation/CitationLearnAbout'
+import { Col, Row } from '@iqss/dataverse-design-system'
+
+interface FileCitationProps {
+  citation: string
+  datasetVersion: DatasetVersion
+}
+export function FileCitation({ citation, datasetVersion }: FileCitationProps) {
+  return (
+    <Row
+      className={
+        datasetVersion.publishingStatus === DatasetPublishingStatus.DEACCESSIONED
+          ? styles.deaccessioned
+          : styles.container
+      }>
+      <Col>
+        <CitationDescription
+          citation={citation}
+          tooltip={<DatasetCitationTooltip status={datasetVersion.publishingStatus} />}
+        />
+        <CitationLearnAbout />
+      </Col>
+    </Row>
+  )
+}
diff --git a/src/sections/shared/citation/Citation.module.scss b/src/sections/shared/citation/Citation.module.scss
new file mode 100644
index 000000000..da18ce409
--- /dev/null
+++ b/src/sections/shared/citation/Citation.module.scss
@@ -0,0 +1,9 @@
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+
+.description {
+  margin-bottom: 1em;
+}
+
+.text {
+  color: $dv-subtext-color
+}
\ No newline at end of file
diff --git a/src/sections/shared/citation/CitationDescription.tsx b/src/sections/shared/citation/CitationDescription.tsx
index eb2730bd2..227ec95ba 100644
--- a/src/sections/shared/citation/CitationDescription.tsx
+++ b/src/sections/shared/citation/CitationDescription.tsx
@@ -1,11 +1,20 @@
 import parse from 'html-react-parser'
+import styles from './Citation.module.scss'
+import { ReactNode } from 'react'
 
 interface CitationDescriptionProps {
   citation: string
+  tooltip?: ReactNode
 }
 
-export function CitationDescription({ citation }: CitationDescriptionProps) {
+export function CitationDescription({ citation, tooltip }: CitationDescriptionProps) {
   const citationAsReactElement = parse(citation)
 
-  return <span>{citationAsReactElement}</span>
+  return (
+    <div className={styles.description}>
+      <span>
+        {citationAsReactElement} {tooltip}
+      </span>
+    </div>
+  )
 }
diff --git a/src/sections/shared/citation/CitationLearnAbout.tsx b/src/sections/shared/citation/CitationLearnAbout.tsx
new file mode 100644
index 000000000..68dced2c8
--- /dev/null
+++ b/src/sections/shared/citation/CitationLearnAbout.tsx
@@ -0,0 +1,17 @@
+import { useTranslation } from 'react-i18next'
+import styles from './Citation.module.scss'
+
+export function CitationLearnAbout() {
+  const { t } = useTranslation('citationBlock')
+  return (
+    <div>
+      <span className={styles.text}>{t('learnAbout')}</span>{' '}
+      <a
+        href="https://dataverse.org/best-practices/data-citation"
+        target="_blank"
+        rel="noopener noreferrer">
+        {t('standards')}.
+      </a>
+    </div>
+  )
+}
diff --git a/src/stories/dataset/Dataset.stories.tsx b/src/stories/dataset/Dataset.stories.tsx
index 85fe96332..7b1364d59 100644
--- a/src/stories/dataset/Dataset.stories.tsx
+++ b/src/stories/dataset/Dataset.stories.tsx
@@ -4,12 +4,12 @@ import { WithLayout } from '../WithLayout'
 import { Dataset } from '../../sections/dataset/Dataset'
 import { WithAnonymizedView } from './WithAnonymizedView'
 import { WithDatasetPrivateUrl } from './WithDatasetPrivateUrl'
-import { FileMockRepository } from '../files/FileMockRepository'
+import { FileMockRepository } from '../file/FileMockRepository'
 import { WithCitationMetadataBlockInfo } from './WithCitationMetadataBlockInfo'
-import { FileMockNoDataRepository } from '../files/FileMockNoDataRepository'
+import { FileMockNoDataRepository } from '../file/FileMockNoDataRepository'
 import { WithSettings } from '../WithSettings'
-import { WithFilePermissionsDenied } from '../files/file-permission/WithFilePermissionsDenied'
-import { WithFilePermissionsGranted } from '../files/file-permission/WithFilePermissionsGranted'
+import { WithFilePermissionsDenied } from '../file/file-permission/WithFilePermissionsDenied'
+import { WithFilePermissionsGranted } from '../file/file-permission/WithFilePermissionsGranted'
 import { WithDataset } from './WithDataset'
 import { WithDatasetDraftAsOwner } from './WithDatasetDraftAsOwner'
 import { WithDatasetNotFound } from './WithDatasetNotFound'
diff --git a/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx b/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx
index 4d8d201d2..e578f6d1e 100644
--- a/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx
+++ b/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx
@@ -29,7 +29,7 @@ export const Default: Story = {
   }
 }
 
-export const WithThumbnail: Story = {
+export const WithThumbnailImage: Story = {
   render: () => {
     const dataset = DatasetMother.createRealistic({ thumbnail: faker.image.imageUrl() })
     return (
@@ -91,3 +91,10 @@ export const Anonymized: Story = {
     )
   }
 }
+
+export const WithoutThumbnail: Story = {
+  render: () => {
+    const dataset = DatasetMother.createRealistic()
+    return <DatasetCitation withoutThumbnail version={dataset.version} />
+  }
+}
diff --git a/src/stories/dataset/dataset-files/DatasetFiles.stories.tsx b/src/stories/dataset/dataset-files/DatasetFiles.stories.tsx
index ab8ba15cd..fe727aa71 100644
--- a/src/stories/dataset/dataset-files/DatasetFiles.stories.tsx
+++ b/src/stories/dataset/dataset-files/DatasetFiles.stories.tsx
@@ -1,11 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react'
 import { WithI18next } from '../../WithI18next'
 import { DatasetFiles } from '../../../sections/dataset/dataset-files/DatasetFiles'
-import { FileMockRepository } from '../../files/FileMockRepository'
-import { FileMockLoadingRepository } from '../../files/FileMockLoadingRepository'
-import { FileMockNoDataRepository } from '../../files/FileMockNoDataRepository'
+import { FileMockRepository } from '../../file/FileMockRepository'
+import { FileMockLoadingRepository } from '../../file/FileMockLoadingRepository'
+import { FileMockNoDataRepository } from '../../file/FileMockNoDataRepository'
 import { WithSettings } from '../../WithSettings'
-import { FileMockNoFiltersRepository } from '../../files/FileMockNoFiltersRepository'
+import { FileMockNoFiltersRepository } from '../../file/FileMockNoFiltersRepository'
 import { DatasetMother } from '../../../../tests/component/dataset/domain/models/DatasetMother'
 
 const meta: Meta<typeof DatasetFiles> = {
diff --git a/src/stories/dataset/dataset-files/files-table/file-actions/file-action-buttons/access-file-menu/AccessFileMenu.stories.tsx b/src/stories/dataset/dataset-files/files-table/file-actions/file-action-buttons/access-file-menu/AccessFileMenu.stories.tsx
index 73bc899db..7120e4b52 100644
--- a/src/stories/dataset/dataset-files/files-table/file-actions/file-action-buttons/access-file-menu/AccessFileMenu.stories.tsx
+++ b/src/stories/dataset/dataset-files/files-table/file-actions/file-action-buttons/access-file-menu/AccessFileMenu.stories.tsx
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react'
 import { AccessFileMenu } from '../../../../../../../sections/dataset/dataset-files/files-table/file-actions/file-actions-cell/file-action-buttons/access-file-menu/AccessFileMenu'
 import { WithI18next } from '../../../../../../WithI18next'
 import { WithSettings } from '../../../../../../WithSettings'
-import { WithFilePermissionsGranted } from '../../../../../../files/file-permission/WithFilePermissionsGranted'
+import { WithFilePermissionsGranted } from '../../../../../../file/file-permission/WithFilePermissionsGranted'
 import { FilePreviewMother } from '../../../../../../../../tests/component/files/domain/models/FilePreviewMother'
 
 const meta: Meta<typeof AccessFileMenu> = {
diff --git a/src/stories/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.stories.tsx b/src/stories/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.stories.tsx
index a77f0de4a..f654d23a5 100644
--- a/src/stories/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.stories.tsx
+++ b/src/stories/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.stories.tsx
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react'
 import { FileThumbnail } from '../../../../../../../../sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail'
 import { WithI18next } from '../../../../../../../WithI18next'
 import { FilePreviewMother } from '../../../../../../../../../tests/component/files/domain/models/FilePreviewMother'
-import { WithFilePermissionsGranted } from '../../../../../../../files/file-permission/WithFilePermissionsGranted'
+import { WithFilePermissionsGranted } from '../../../../../../../file/file-permission/WithFilePermissionsGranted'
 
 const meta: Meta<typeof FileThumbnail> = {
   title: 'Sections/Dataset Page/DatasetFiles/FilesTable/FileInfoCell/FileThumbnail',
diff --git a/src/stories/files/File.stories.tsx b/src/stories/file/File.stories.tsx
similarity index 100%
rename from src/stories/files/File.stories.tsx
rename to src/stories/file/File.stories.tsx
diff --git a/src/stories/files/FileMockData.ts b/src/stories/file/FileMockData.ts
similarity index 100%
rename from src/stories/files/FileMockData.ts
rename to src/stories/file/FileMockData.ts
diff --git a/src/stories/files/FileMockLoadingRepository.ts b/src/stories/file/FileMockLoadingRepository.ts
similarity index 100%
rename from src/stories/files/FileMockLoadingRepository.ts
rename to src/stories/file/FileMockLoadingRepository.ts
diff --git a/src/stories/files/FileMockNoDataRepository.ts b/src/stories/file/FileMockNoDataRepository.ts
similarity index 100%
rename from src/stories/files/FileMockNoDataRepository.ts
rename to src/stories/file/FileMockNoDataRepository.ts
diff --git a/src/stories/files/FileMockNoFiltersRepository.ts b/src/stories/file/FileMockNoFiltersRepository.ts
similarity index 100%
rename from src/stories/files/FileMockNoFiltersRepository.ts
rename to src/stories/file/FileMockNoFiltersRepository.ts
diff --git a/src/stories/files/FileMockRepository.ts b/src/stories/file/FileMockRepository.ts
similarity index 100%
rename from src/stories/files/FileMockRepository.ts
rename to src/stories/file/FileMockRepository.ts
diff --git a/src/stories/files/FileWithDeniedPermissionsRepository.ts b/src/stories/file/FileWithDeniedPermissionsRepository.ts
similarity index 100%
rename from src/stories/files/FileWithDeniedPermissionsRepository.ts
rename to src/stories/file/FileWithDeniedPermissionsRepository.ts
diff --git a/src/stories/files/FileWithGrantedPermissionsRepository.ts b/src/stories/file/FileWithGrantedPermissionsRepository.ts
similarity index 100%
rename from src/stories/files/FileWithGrantedPermissionsRepository.ts
rename to src/stories/file/FileWithGrantedPermissionsRepository.ts
diff --git a/src/stories/file/file-citation/FileCitation.stories.tsx b/src/stories/file/file-citation/FileCitation.stories.tsx
new file mode 100644
index 000000000..3a7a84dd2
--- /dev/null
+++ b/src/stories/file/file-citation/FileCitation.stories.tsx
@@ -0,0 +1,55 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { WithI18next } from '../../WithI18next'
+import { FileCitation } from '../../../sections/file/file-citation/FileCitation'
+import { FileCitationMother } from '../../../../tests/component/files/domain/models/FileMother'
+import { DatasetVersionMother } from '../../../../tests/component/dataset/domain/models/DatasetMother'
+
+const meta: Meta<typeof FileCitation> = {
+  title: 'Sections/File Page/FileCitation',
+  component: FileCitation,
+  decorators: [WithI18next]
+}
+
+export default meta
+type Story = StoryObj<typeof FileCitation>
+
+export const Default: Story = {
+  render: () => (
+    <>
+      <br></br>
+      <br></br>
+      <FileCitation
+        citation={FileCitationMother.create('File Title')}
+        datasetVersion={DatasetVersionMother.createReleased()}
+      />
+    </>
+  )
+}
+
+export const Draft: Story = {
+  render: () => (
+    <>
+      <br></br>
+      <br></br>
+      <FileCitation
+        citation={FileCitationMother.createDraft('File Title')}
+        datasetVersion={DatasetVersionMother.createDraft()}
+      />
+    </>
+  )
+}
+
+export const Deaccessioned: Story = {
+  render: () => (
+    <>
+      <br></br>
+      <br></br>
+      <br></br>
+      <br></br>
+      <FileCitation
+        citation={FileCitationMother.createDeaccessioned('File Title')}
+        datasetVersion={DatasetVersionMother.createDeaccessioned()}
+      />
+    </>
+  )
+}
diff --git a/src/stories/files/file-permission/WithFilePermissionsDenied.tsx b/src/stories/file/file-permission/WithFilePermissionsDenied.tsx
similarity index 100%
rename from src/stories/files/file-permission/WithFilePermissionsDenied.tsx
rename to src/stories/file/file-permission/WithFilePermissionsDenied.tsx
diff --git a/src/stories/files/file-permission/WithFilePermissionsGranted.tsx b/src/stories/file/file-permission/WithFilePermissionsGranted.tsx
similarity index 100%
rename from src/stories/files/file-permission/WithFilePermissionsGranted.tsx
rename to src/stories/file/file-permission/WithFilePermissionsGranted.tsx
diff --git a/tests/component/files/domain/models/FileMother.ts b/tests/component/files/domain/models/FileMother.ts
index 8b63476fa..3a23477c7 100644
--- a/tests/component/files/domain/models/FileMother.ts
+++ b/tests/component/files/domain/models/FileMother.ts
@@ -4,9 +4,11 @@ import { DatasetVersionMother } from '../../../dataset/domain/models/DatasetMoth
 
 export class FileMother {
   static create(props?: Partial<File>): File {
+    const name = props?.name ?? faker.system.fileName()
     return {
       name: faker.system.fileName(),
       datasetVersion: DatasetVersionMother.create(),
+      citation: FileCitationMother.create(name),
       restricted: faker.datatype.boolean(),
       permissions: {
         canDownloadFile: faker.datatype.boolean()
@@ -17,8 +19,9 @@ export class FileMother {
 
   static createRealistic(props?: Partial<File>): File {
     return this.create({
-      name: 'file.csv',
+      name: 'File Title',
       datasetVersion: DatasetVersionMother.createRealistic(),
+      citation: FileCitationMother.create('File Title'),
       restricted: false,
       permissions: {
         canDownloadFile: true
@@ -46,3 +49,17 @@ export class FileMother {
     })
   }
 }
+
+export class FileCitationMother {
+  static create(fileName: string): string {
+    return `Bennet, Elizabeth; Darcy, Fitzwilliam, 2023, "Dataset Title", <a href="https://doi.org/10.5072/FK2/BUDNRV" target="_blank">https://doi.org/10.5072/FK2/BUDNRV</a>, Root, V1; ${fileName} [fileName]`
+  }
+
+  static createDraft(fileName: string): string {
+    return `Bennet, Elizabeth; Darcy, Fitzwilliam, 2023, "Dataset Title", <a href="https://doi.org/10.5072/FK2/BUDNRV" target="_blank">https://doi.org/10.5072/FK2/BUDNRV</a>, Root, DRAFT; ${fileName} [fileName]`
+  }
+
+  static createDeaccessioned(fileName: string): string {
+    return `Bennet, Elizabeth; Darcy, Fitzwilliam, 2023, "Dataset Title", <a href="https://doi.org/10.5072/FK2/BUDNRV" target="_blank">https://doi.org/10.5072/FK2/BUDNRV</a>, Root, DEACCESSIONED; ${fileName} [fileName]`
+  }
+}
diff --git a/tests/component/sections/dataset/dataset-citation/DatasetCitation.spec.tsx b/tests/component/sections/dataset/dataset-citation/DatasetCitation.spec.tsx
index d695e40cd..4f5558af3 100644
--- a/tests/component/sections/dataset/dataset-citation/DatasetCitation.spec.tsx
+++ b/tests/component/sections/dataset/dataset-citation/DatasetCitation.spec.tsx
@@ -17,6 +17,7 @@ describe('DatasetCitation', () => {
     cy.findByText(/RELEASED/).should('not.exist')
     cy.findByText(/V1/).should('exist')
     cy.findByLabelText('icon-dataset').should('exist')
+    cy.findByLabelText('icon-dataset').should('exist')
   })
 
   it('shows the draft tooltip when version is draft', () => {
@@ -38,4 +39,11 @@ describe('DatasetCitation', () => {
       /DEACCESSIONED VERSION has been added to the citation for this version since it is no longer available./
     ).should('exist')
   })
+
+  it('does not render the thumbnail when withoutThumbnail prop is true', () => {
+    const version = DatasetVersionMother.createRealistic()
+    cy.customMount(<DatasetCitation version={version} withoutThumbnail={true} />)
+
+    cy.findByLabelText('icon-dataset').should('not.exist')
+  })
 })
diff --git a/tests/component/sections/file/File.spec.tsx b/tests/component/sections/file/File.spec.tsx
index 3049c4b91..1b0868412 100644
--- a/tests/component/sections/file/File.spec.tsx
+++ b/tests/component/sections/file/File.spec.tsx
@@ -15,6 +15,12 @@ describe('File', () => {
 
     cy.findAllByText(testFile.name).should('exist')
     cy.findByText(`This file is part of "${testFile.datasetVersion.title}".`).should('exist')
+    cy.findByText('File Citation').should('exist')
+    cy.findByText(/fileName/).should('exist')
+    cy.findByText('Dataset Citation').should('exist')
+    cy.findAllByText(/Bennet, Elizabeth; Darcy, Fitzwilliam, 2023, "Dataset Title",/).should(
+      'exist'
+    )
     cy.findByText('Version 1.0').should('exist')
   })
 
diff --git a/tests/component/sections/file/file-citation/FileCitation.spec.tsx b/tests/component/sections/file/file-citation/FileCitation.spec.tsx
new file mode 100644
index 000000000..c9d0fb7fc
--- /dev/null
+++ b/tests/component/sections/file/file-citation/FileCitation.spec.tsx
@@ -0,0 +1,29 @@
+import { FileCitation } from '../../../../../src/sections/file/file-citation/FileCitation'
+import { FileCitationMother } from '../../../files/domain/models/FileMother'
+import { DatasetVersionMother } from '../../../dataset/domain/models/DatasetMother'
+
+describe('FileCitation', () => {
+  it('renders the FileCitation', () => {
+    const citation = FileCitationMother.create('File Title')
+    const datasetVersion = DatasetVersionMother.createReleased()
+
+    cy.customMount(<FileCitation citation={citation} datasetVersion={datasetVersion} />)
+    cy.findByText(/File Title/).should('exist')
+    cy.findByText(/Bennet, Elizabeth; Darcy, Fitzwilliam, 2023, "Dataset Title",/).should('exist')
+    cy.findByText(/RELEASED/).should('not.exist')
+    cy.findByText(/V1/).should('exist')
+  })
+
+  it('renders the FileCitation when the dataset is deaccessioned', () => {
+    const citation = FileCitationMother.create('File Title')
+    const datasetVersion = DatasetVersionMother.createDeaccessioned()
+
+    cy.customMount(<FileCitation citation={citation} datasetVersion={datasetVersion} />)
+    cy.findByText(/File Title/).should('exist')
+    cy.findByText(/Bennet, Elizabeth; Darcy, Fitzwilliam, 2023, "Dataset Title",/).should('exist')
+    cy.findByRole('img', { name: 'tooltip icon' }).should('exist').trigger('mouseover')
+    cy.findByText(
+      /DEACCESSIONED VERSION has been added to the citation for this version since it is no longer available./
+    ).should('exist')
+  })
+})
diff --git a/tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx b/tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx
index ad6bb084a..b6fe9d189 100644
--- a/tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx
+++ b/tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx
@@ -15,6 +15,7 @@ describe('DatasetCard', () => {
     cy.findByText(/Admin, Dataverse, 2023, "Dataset Title",/)
       .should('exist')
       .parent()
+      .parent()
       .should('have.class', styles['citation-box'])
     cy.findByText(dataset.abbreviatedDescription).should('exist')
   })
diff --git a/tests/component/sections/home/datasets-list/dataset-card/DatasetCardInfo.spec.tsx b/tests/component/sections/home/datasets-list/dataset-card/DatasetCardInfo.spec.tsx
index f44e90ced..5a843833d 100644
--- a/tests/component/sections/home/datasets-list/dataset-card/DatasetCardInfo.spec.tsx
+++ b/tests/component/sections/home/datasets-list/dataset-card/DatasetCardInfo.spec.tsx
@@ -18,6 +18,7 @@ describe('DatasetCardInfo', () => {
     cy.findByText(/Admin, Dataverse, 2023, "Dataset Title",/)
       .should('exist')
       .parent()
+      .parent()
       .should('have.class', styles['citation-box'])
     cy.findByText(dataset.abbreviatedDescription).should('exist')
   })
@@ -35,6 +36,7 @@ describe('DatasetCardInfo', () => {
     cy.findByText(/Admin, Dataverse, 2023, "Dataset Title",/)
       .should('exist')
       .parent()
+      .parent()
       .should('have.class', styles['citation-box-deaccessioned'])
   })
 })
diff --git a/tests/component/sections/shared/citation/CitationDescription.spec.tsx b/tests/component/sections/shared/citation/CitationDescription.spec.tsx
index ce5b1a57e..b40ba9aae 100644
--- a/tests/component/sections/shared/citation/CitationDescription.spec.tsx
+++ b/tests/component/sections/shared/citation/CitationDescription.spec.tsx
@@ -9,4 +9,12 @@ describe('CitationDescription', () => {
     cy.findByText(/Finch, Fiona, 2023, "Darwin's Finches",/).should('exist')
     cy.findByRole('link', { name: 'https://doi.org/10.5072/FK2/0YFWKL' }).should('exist')
   })
+
+  it('renders the tooltip', () => {
+    const citation = 'Finch, Fiona, 2023, "Darwin\'s Finches"'
+    const tooltip = <span>This is a tooltip</span>
+    cy.customMount(<CitationDescription citation={citation} tooltip={tooltip} />)
+
+    cy.findByText('This is a tooltip').should('exist')
+  })
 })
diff --git a/tests/component/sections/shared/citation/CitationLearnAbout.spec.tsx b/tests/component/sections/shared/citation/CitationLearnAbout.spec.tsx
new file mode 100644
index 000000000..8c7bbb1c1
--- /dev/null
+++ b/tests/component/sections/shared/citation/CitationLearnAbout.spec.tsx
@@ -0,0 +1,10 @@
+import { CitationLearnAbout } from '../../../../../src/sections/shared/citation/CitationLearnAbout'
+
+describe('CitationLearnAbout', () => {
+  it('renders the component', () => {
+    cy.customMount(<CitationLearnAbout />)
+
+    cy.findByText('Learn About').should('exist')
+    cy.findByRole('link', { name: 'Data Citation Standards.' }).should('exist')
+  })
+})
diff --git a/tests/e2e-integration/e2e/sections/file/File.spec.tsx b/tests/e2e-integration/e2e/sections/file/File.spec.tsx
index dac419c86..c60850e25 100644
--- a/tests/e2e-integration/e2e/sections/file/File.spec.tsx
+++ b/tests/e2e-integration/e2e/sections/file/File.spec.tsx
@@ -1,6 +1,6 @@
 describe('File', () => {
   it('successfully loads', () => {
     cy.visit('/spa/files?id=23')
-    cy.findAllByText('file.csv').should('exist')
+    cy.findAllByText('File Title').should('exist')
   })
 })