diff --git a/public/locales/en/account.json b/public/locales/en/account.json
index 6ce0c6c52..b7768f780 100644
--- a/public/locales/en/account.json
+++ b/public/locales/en/account.json
@@ -7,6 +7,10 @@
     "apiToken": "API token"
   },
   "apiToken": {
-    "helperText": "Your API Token is valid for a year. Check out our <anchor>API Guide</anchor> for more information on using your API Token with the Dataverse APIs."
+    "helperText": "Your API Token is valid for a year. Check out our <anchor>API Guide</anchor> for more information on using your API Token with the Dataverse APIs.",
+    "expirationDate": "Expiration date",
+    "copyToClipboard": "Copy to Clipboard",
+    "recreateToken": "Recreate Token",
+    "revokeToken": "Revoke Token"
   }
 }
diff --git a/src/sections/account/Account.tsx b/src/sections/account/Account.tsx
index 05a0281e3..5a472dd3b 100644
--- a/src/sections/account/Account.tsx
+++ b/src/sections/account/Account.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next'
 import { useSearchParams } from 'react-router-dom'
 import { Tabs } from '@iqss/dataverse-design-system'
 import { AccountHelper } from './AccountHelper'
-import { ApiTokenSection } from './ApiTokenSection/ApiTokenSection'
+import { ApiTokenSection } from './api-token-section/ApiTokenSection'
 import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
 import { UpwardHierarchyNodeMother } from '../../../tests/component/shared/hierarchy/domain/models/UpwardHierarchyNodeMother'
 import styles from './Account.module.scss'
diff --git a/src/sections/account/ApiTokenSection/ApiTokenSection.module.scss b/src/sections/account/ApiTokenSection/ApiTokenSection.module.scss
deleted file mode 100644
index 09b71bea3..000000000
--- a/src/sections/account/ApiTokenSection/ApiTokenSection.module.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.exp-date {
-  display: flex;
-  gap: 1.5rem;
-  align-items: center;
-  padding-left: 0.5rem;
-  font-weight: bold;
-
-  time {
-    font-weight: normal;
-  }
-
-  @media (min-width: 768px) {
-    gap: 3rem;
-  }
-}
diff --git a/src/sections/account/ApiTokenSection/ApiTokenSection.tsx b/src/sections/account/ApiTokenSection/ApiTokenSection.tsx
deleted file mode 100644
index 12009927b..000000000
--- a/src/sections/account/ApiTokenSection/ApiTokenSection.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Trans, useTranslation } from 'react-i18next'
-import accountStyles from '../Account.module.scss'
-import styles from './ApiTokenSection.module.scss'
-
-export const ApiTokenSection = () => {
-  const { t } = useTranslation('account', { keyPrefix: 'apiToken' })
-
-  return (
-    <>
-      <p className={accountStyles['helper-text']}>
-        <Trans
-          t={t}
-          i18nKey="helperText"
-          components={{
-            anchor: (
-              <a
-                href="http://guides.dataverse.org/en/latest/api"
-                target="_blank"
-                rel="noreferrer"
-              />
-            )
-          }}
-        />
-      </p>
-      <p className={styles['exp-date']}>
-        Expiration Date <time dateTime="2024-05-03">2025-09-04</time>
-      </p>
-    </>
-  )
-}
diff --git a/src/sections/account/api-token-section/ApiTokenSection.module.scss b/src/sections/account/api-token-section/ApiTokenSection.module.scss
new file mode 100644
index 000000000..b6927fe53
--- /dev/null
+++ b/src/sections/account/api-token-section/ApiTokenSection.module.scss
@@ -0,0 +1,31 @@
+@import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module';
+
+.exp-date {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+  padding-left: 0.5rem;
+  font-weight: bold;
+
+  time {
+    font-weight: normal;
+  }
+
+  @media (min-width: 768px) {
+    gap: 3rem;
+  }
+}
+
+.api-token {
+  padding: 0.5rem 1rem;
+  background-color: #f7f7f9;
+  border: solid 1px $dv-border-color;
+  border-radius: 4px;
+}
+
+.btns-wrapper {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding-top: 1rem;
+}
diff --git a/src/sections/account/api-token-section/ApiTokenSection.tsx b/src/sections/account/api-token-section/ApiTokenSection.tsx
new file mode 100644
index 000000000..66fcdce0a
--- /dev/null
+++ b/src/sections/account/api-token-section/ApiTokenSection.tsx
@@ -0,0 +1,50 @@
+import { Trans, useTranslation } from 'react-i18next'
+import accountStyles from '../Account.module.scss'
+import styles from './ApiTokenSection.module.scss'
+import { Button } from '@iqss/dataverse-design-system'
+
+export const ApiTokenSection = () => {
+  const { t } = useTranslation('account', { keyPrefix: 'apiToken' })
+
+  const apiToken = '999fff-666rrr-12kfd54-123123'
+  const expirationDate = '2025-09-04'
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(apiToken).catch((error) => {
+      console.error('Failed to copy text:', error)
+    })
+  }
+
+  return (
+    <>
+      <p className={accountStyles['helper-text']}>
+        <Trans
+          t={t}
+          i18nKey="helperText"
+          components={{
+            anchor: (
+              <a
+                href="http://guides.dataverse.org/en/latest/api"
+                target="_blank"
+                rel="noreferrer"
+              />
+            )
+          }}
+        />
+      </p>
+      <p className={styles['exp-date']}>
+        {t('expirationDate')} <time dateTime={expirationDate}>{expirationDate}</time>
+      </p>
+      <div className={styles['api-token']}>
+        <code>{apiToken}</code>
+      </div>
+      <div className={styles['btns-wrapper']} role="group">
+        <Button variant="secondary" onClick={copyToClipboard}>
+          {t('copyToClipboard')}
+        </Button>
+        <Button variant="secondary">{t('recreateToken')}</Button>
+        <Button variant="secondary">{t('revokeToken')}</Button>
+      </div>
+    </>
+  )
+}