diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
index 51885dd18..a002010e8 100644
--- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
+++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
@@ -1,4 +1,4 @@
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { IconCheckbox, IconSearch, IconSettings } from 'twenty-ui';
 
@@ -20,7 +20,6 @@ export const MainNavigationDrawerItems = () => {
   const { toggleCommandMenu } = useCommandMenu();
   const isTasksPage = useIsTasksPage();
   const currentUserDueTaskCount = useRecoilValue(currentUserDueTaskCountState);
-  const navigate = useNavigate();
   const location = useLocation();
   const setNavigationMemorizedUrl = useSetRecoilState(
     navigationMemorizedUrlState,
@@ -38,9 +37,9 @@ export const MainNavigationDrawerItems = () => {
           />
           <NavigationDrawerItem
             label="Settings"
+            to={'/settings/profile'}
             onClick={() => {
               setNavigationMemorizedUrl(location.pathname + location.search);
-              navigate('/settings/profile');
             }}
             Icon={IconSettings}
           />
diff --git a/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx b/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
index 69a68c2fb..61526a42e 100644
--- a/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
+++ b/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
@@ -1,4 +1,4 @@
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { useIcons } from 'twenty-ui';
 
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
@@ -10,7 +10,6 @@ import { getObjectMetadataItemViews } from '@/views/utils/getObjectMetadataItemV
 
 export const ObjectMetadataNavItems = () => {
   const { activeObjectMetadataItems } = useFilteredObjectMetadataItems();
-  const navigate = useNavigate();
   const { getIcon } = useIcons();
   const currentPath = useLocation().pathname;
 
@@ -63,9 +62,6 @@ export const ObjectMetadataNavItems = () => {
             to={navigationPath}
             active={currentPath === `/objects/${objectMetadataItem.namePlural}`}
             Icon={getIcon(objectMetadataItem.icon)}
-            onClick={() => {
-              navigate(navigationPath);
-            }}
           />
         );
       })}
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
index 699fb380b..fb6457cf1 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconComponent, IconTwentyStar } from 'twenty-ui';
@@ -7,13 +8,16 @@ import { getSettingsFieldTypeConfig } from '@/settings/data-model/utils/getSetti
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 type SettingsObjectFieldDataTypeProps = {
-  onClick?: () => void;
+  to?: string;
   Icon?: IconComponent;
   label?: string;
   value: SettingsSupportedFieldType;
 };
 
-const StyledDataType = styled.div<{ value: SettingsSupportedFieldType }>`
+const StyledDataType = styled.div<{
+  value: SettingsSupportedFieldType;
+  to?: string;
+}>`
   align-items: center;
   border: 1px solid transparent;
   border-radius: ${({ theme }) => theme.border.radius.sm};
@@ -23,9 +27,10 @@ const StyledDataType = styled.div<{ value: SettingsSupportedFieldType }>`
   height: 20px;
   overflow: hidden;
   padding: 0 ${({ theme }) => theme.spacing(2)};
+  text-decoration: none;
 
-  ${({ onClick }) =>
-    onClick
+  ${({ to }) =>
+    to
       ? css`
           cursor: pointer;
         `
@@ -47,7 +52,7 @@ const StyledLabelContainer = styled.div`
 `;
 
 export const SettingsObjectFieldDataType = ({
-  onClick,
+  to,
   value,
   Icon: IconFromProps,
   label: labelFromProps,
@@ -64,7 +69,7 @@ export const SettingsObjectFieldDataType = ({
   `;
 
   return (
-    <StyledDataType onClick={onClick} value={value}>
+    <StyledDataType as={to ? Link : 'div'} to={to} value={value}>
       <StyledIcon size={theme.icon.size.sm} />
       <StyledLabelContainer>{label}</StyledLabelContainer>
     </StyledDataType>
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
index d15615fc1..c2d5fc1ef 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
@@ -1,5 +1,4 @@
 import { ReactNode, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Nullable, useIcons } from 'twenty-ui';
@@ -22,6 +21,7 @@ type SettingsObjectFieldItemTableRowProps = {
   identifierType?: Nullable<FieldIdentifierType>;
   variant?: 'field-type' | 'identifier';
   isRemoteObjectField?: boolean;
+  to?: string;
 };
 
 export const StyledObjectFieldTableRow = styled(TableRow)`
@@ -44,11 +44,11 @@ export const SettingsObjectFieldItemTableRow = ({
   identifierType,
   variant = 'field-type',
   isRemoteObjectField,
+  to,
 }: SettingsObjectFieldItemTableRowProps) => {
   const theme = useTheme();
   const { getIcon } = useIcons();
   const Icon = getIcon(fieldMetadataItem.icon);
-  const navigate = useNavigate();
 
   const getRelationMetadata = useGetRelationMetadata();
 
@@ -68,7 +68,7 @@ export const SettingsObjectFieldItemTableRow = ({
     : undefined;
 
   return (
-    <StyledObjectFieldTableRow>
+    <StyledObjectFieldTableRow to={to}>
       <StyledNameTableCell>
         {!!Icon && (
           <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
@@ -90,15 +90,10 @@ export const SettingsObjectFieldItemTableRow = ({
         <SettingsObjectFieldDataType
           Icon={RelationIcon}
           label={relationObjectMetadataItem?.labelPlural}
-          onClick={
+          to={
             relationObjectMetadataItem?.namePlural &&
             !relationObjectMetadataItem.isSystem
-              ? () =>
-                  navigate(
-                    `/settings/objects/${getObjectSlug(
-                      relationObjectMetadataItem,
-                    )}`,
-                  )
+              ? `/settings/objects/${getObjectSlug(relationObjectMetadataItem)}`
               : undefined
           }
           value={fieldType}
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx
index 02bd504bb..ed5c71341 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx
@@ -13,7 +13,7 @@ import { TableRow } from '@/ui/layout/table/components/TableRow';
 type SettingsObjectItemTableRowProps = {
   action: ReactNode;
   objectItem: ObjectMetadataItem;
-  onClick?: () => void;
+  to?: string;
 };
 
 export const StyledObjectTableRow = styled(TableRow)`
@@ -33,7 +33,7 @@ const StyledActionTableCell = styled(TableCell)`
 export const SettingsObjectItemTableRow = ({
   action,
   objectItem,
-  onClick,
+  to,
 }: SettingsObjectItemTableRowProps) => {
   const theme = useTheme();
 
@@ -45,7 +45,7 @@ export const SettingsObjectItemTableRow = ({
   const objectTypeLabel = getObjectTypeLabel(objectItem);
 
   return (
-    <StyledObjectTableRow key={objectItem.namePlural} onClick={onClick}>
+    <StyledObjectTableRow key={objectItem.namePlural} to={to}>
       <StyledNameTableCell>
         {!!Icon && (
           <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx
index 502199e04..4d4dc8d45 100644
--- a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx
@@ -26,15 +26,15 @@ const StyledIconChevronRight = styled(IconChevronRight)`
 
 export const SettingsApiKeysFieldItemTableRow = ({
   fieldItem,
-  onClick,
+  to,
 }: {
   fieldItem: ApiFieldItem;
-  onClick: () => void;
+  to: string;
 }) => {
   const theme = useTheme();
 
   return (
-    <StyledApisFieldTableRow onClick={() => onClick()}>
+    <StyledApisFieldTableRow to={to}>
       <StyledNameTableCell>{fieldItem.name}</StyledNameTableCell>
       <TableCell
         color={
diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx
index 9e8baaa89..f5d86e6a3 100644
--- a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx
+++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx
@@ -1,4 +1,3 @@
-import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -21,8 +20,6 @@ const StyledTableRow = styled(TableRow)`
 `;
 
 export const SettingsApiKeysTable = () => {
-  const navigate = useNavigate();
-
   const { records: apiKeys } = useFindManyRecords<ApiKey>({
     objectNameSingular: CoreObjectNameSingular.ApiKey,
     filter: { revokedAt: { is: 'NULL' } },
@@ -41,9 +38,7 @@ export const SettingsApiKeysTable = () => {
             <SettingsApiKeysFieldItemTableRow
               key={fieldItem.id}
               fieldItem={fieldItem as ApiFieldItem}
-              onClick={() => {
-                navigate(`/settings/developers/api-keys/${fieldItem.id}`);
-              }}
+              to={`/settings/developers/api-keys/${fieldItem.id}`}
             />
           ))}
         </StyledTableBody>
diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx
index e6541f611..0c093d5ec 100644
--- a/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx
@@ -28,15 +28,15 @@ const StyledIconChevronRight = styled(IconChevronRight)`
 
 export const SettingsDevelopersWebhookTableRow = ({
   fieldItem,
-  onClick,
+  to,
 }: {
   fieldItem: Webhook;
-  onClick: () => void;
+  to: string;
 }) => {
   const theme = useTheme();
 
   return (
-    <StyledApisFieldTableRow onClick={onClick}>
+    <StyledApisFieldTableRow to={to}>
       <StyledUrlTableCell>{fieldItem.targetUrl}</StyledUrlTableCell>
       <StyledIconTableCell>
         <StyledIconChevronRight
diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsReadDocumentationButton.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsReadDocumentationButton.tsx
index 305266b8a..1ac2596a0 100644
--- a/packages/twenty-front/src/modules/settings/developers/components/SettingsReadDocumentationButton.tsx
+++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsReadDocumentationButton.tsx
@@ -10,9 +10,8 @@ export const SettingsReadDocumentationButton = () => {
       accent="default"
       size="small"
       Icon={IconBook2}
-      onClick={() => {
-        window.open('https://docs.twenty.com');
-      }}
+      to={'https://docs.twenty.com'}
+      target="_blank"
     ></Button>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsWebhooksTable.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsWebhooksTable.tsx
index e1e04d5d5..b10a1de71 100644
--- a/packages/twenty-front/src/modules/settings/developers/components/SettingsWebhooksTable.tsx
+++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsWebhooksTable.tsx
@@ -1,4 +1,3 @@
-import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -19,8 +18,6 @@ const StyledTableRow = styled(TableRow)`
 `;
 
 export const SettingsWebhooksTable = () => {
-  const navigate = useNavigate();
-
   const { records: webhooks } = useFindManyRecords<Webhook>({
     objectNameSingular: CoreObjectNameSingular.Webhook,
   });
@@ -37,11 +34,7 @@ export const SettingsWebhooksTable = () => {
             <SettingsDevelopersWebhookTableRow
               key={webhookFieldItem.id}
               fieldItem={webhookFieldItem}
-              onClick={() => {
-                navigate(
-                  `/settings/developers/webhooks/${webhookFieldItem.id}`,
-                );
-              }}
+              to={`/settings/developers/webhooks/${webhookFieldItem.id}`}
             />
           ))}
         </StyledTableBody>
diff --git a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx
index 7ef589cc4..2aa04d320 100644
--- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx
@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconArrowUpRight, IconBolt, IconPlus, Pill } from 'twenty-ui';
@@ -12,7 +12,7 @@ interface SettingsIntegrationComponentProps {
   integration: SettingsIntegration;
 }
 
-const StyledContainer = styled.div`
+const StyledContainer = styled.div<{ to?: string }>`
   align-items: center;
   background: ${({ theme }) => theme.background.secondary};
   border: 1px solid ${({ theme }) => theme.border.color.medium};
@@ -22,9 +22,11 @@ const StyledContainer = styled.div`
   flex-direction: row;
   justify-content: space-between;
   padding: ${({ theme }) => theme.spacing(3)};
+  text-decoration: none;
+  color: ${({ theme }) => theme.font.color.primary};
 
-  ${({ onClick }) =>
-    isDefined(onClick) &&
+  ${({ to }) =>
+    isDefined(to) &&
     css`
       cursor: pointer;
     `}
@@ -57,16 +59,10 @@ const StyledLogo = styled.img`
 export const SettingsIntegrationComponent = ({
   integration,
 }: SettingsIntegrationComponentProps) => {
-  const navigate = useNavigate();
-
-  const navigateToIntegrationPage = () => navigate(integration.link);
-  const openExternalLink = () => window.open(integration.link);
-
   return (
     <StyledContainer
-      onClick={
-        integration.type === 'Active' ? navigateToIntegrationPage : undefined
-      }
+      to={integration.type === 'Active' ? integration.link : undefined}
+      as={integration.type === 'Active' ? Link : 'div'}
     >
       <StyledSection>
         <StyledIntegrationLogo>
@@ -86,21 +82,23 @@ export const SettingsIntegrationComponent = ({
         <Status color="green" text="Active" />
       ) : integration.type === 'Add' ? (
         <Button
-          onClick={navigateToIntegrationPage}
+          to={integration.link}
           Icon={IconPlus}
           title="Add"
           size="small"
         />
       ) : integration.type === 'Use' ? (
         <Button
-          onClick={openExternalLink}
+          to={integration.link}
+          target="_blank"
           Icon={IconBolt}
           title="Use"
           size="small"
         />
       ) : (
         <Button
-          onClick={openExternalLink}
+          to={integration.link}
+          target="_blank"
           Icon={IconArrowUpRight}
           title={integration.linkText}
           size="small"
diff --git a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx
index 7dab165df..f3e20bc3b 100644
--- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx
@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import styled from '@emotion/styled';
 
 import { SettingsIntegrationComponent } from '@/settings/integrations/components/SettingsIntegrationComponent';
@@ -16,13 +17,15 @@ const StyledIntegrationGroupHeader = styled.div`
   justify-content: space-between;
 `;
 
-const StyledGroupLink = styled.div`
+const StyledGroupLink = styled(Link)`
   align-items: start;
   display: flex;
   flex-direction: row;
   font-size: ${({ theme }) => theme.font.size.md};
   gap: ${({ theme }) => theme.spacing(1)};
   cursor: pointer;
+  text-decoration: none;
+  color: ${({ theme }) => theme.font.color.primary};
 `;
 
 const StyledIntegrationsSection = styled.div`
@@ -39,7 +42,8 @@ export const SettingsIntegrationGroup = ({
       <H2Title title={integrationGroup.title} />
       {integrationGroup.hyperlink && (
         <StyledGroupLink
-          onClick={() => window.open(integrationGroup.hyperlink ?? '')}
+          target={'_blank'}
+          to={integrationGroup.hyperlink ?? ''}
         >
           <div>{integrationGroup.hyperlinkText}</div>
           <div>→</div>
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx b/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
index 71290ecc7..304eaf0bc 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
+import isPropValid from '@emotion/is-prop-valid';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconComponent, Pill } from 'twenty-ui';
@@ -22,9 +24,14 @@ export type ButtonProps = {
   disabled?: boolean;
   focus?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  to?: string;
+  target?: string;
 } & React.ComponentProps<'button'>;
 
-const StyledButton = styled.button<
+const StyledButton = styled('button', {
+  shouldForwardProp: (prop) =>
+    !['fullWidth'].includes(prop) && isPropValid(prop),
+})<
   Pick<
     ButtonProps,
     | 'fullWidth'
@@ -34,6 +41,8 @@ const StyledButton = styled.button<
     | 'accent'
     | 'focus'
     | 'justify'
+    | 'to'
+    | 'target'
   >
 >`
   align-items: center;
@@ -210,6 +219,7 @@ const StyledButton = styled.button<
     }
   }}
 
+  text-decoration: none;
   border-radius: ${({ position, theme }) => {
     switch (position) {
       case 'left':
@@ -273,6 +283,8 @@ export const Button = ({
   justify = 'flex-start',
   focus = false,
   onClick,
+  to,
+  target,
 }: ButtonProps) => {
   const theme = useTheme();
 
@@ -288,6 +300,9 @@ export const Button = ({
       accent={accent}
       className={className}
       onClick={onClick}
+      to={to}
+      as={to ? Link : 'button'}
+      target={target}
     >
       {Icon && <Icon size={theme.icon.size.sm} />}
       {title}
diff --git a/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx b/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx
index a66291a12..486dafaa0 100644
--- a/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx
@@ -1,8 +1,14 @@
+import { Link } from 'react-router-dom';
+import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
 
-const StyledTableRow = styled.div<{
+const StyledTableRow = styled('div', {
+  shouldForwardProp: (prop) =>
+    !['isSelected'].includes(prop) && isPropValid(prop),
+})<{
   isSelected?: boolean;
   onClick?: () => void;
+  to?: string;
 }>`
   background-color: ${({ isSelected, theme }) =>
     isSelected ? theme.accent.quaternary : 'transparent'};
@@ -13,12 +19,36 @@ const StyledTableRow = styled.div<{
   transition: background-color
     ${({ theme }) => theme.animation.duration.normal}s;
   width: 100%;
+  text-decoration: none;
 
   &:hover {
-    background-color: ${({ onClick, theme }) =>
-      onClick ? theme.background.transparent.light : 'transparent'};
-    cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
+    background-color: ${({ onClick, to, theme }) =>
+      onClick || to ? theme.background.transparent.light : 'transparent'};
+    cursor: ${({ onClick, to }) => (onClick || to ? 'pointer' : 'default')};
   }
 `;
 
-export { StyledTableRow as TableRow };
+type TableRowProps = {
+  isSelected?: boolean;
+  onClick?: () => void;
+  to?: string;
+  className?: string;
+};
+
+export const TableRow = ({
+  isSelected,
+  onClick,
+  to,
+  className,
+  children,
+}: React.PropsWithChildren<TableRowProps>) => (
+  <StyledTableRow
+    isSelected={isSelected}
+    onClick={onClick}
+    className={className}
+    to={to}
+    as={to ? Link : 'div'}
+  >
+    {children}
+  </StyledTableRow>
+);
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
index f1364db20..7d09a6d77 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
@@ -1,4 +1,5 @@
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import isPropValid from '@emotion/is-prop-valid';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
@@ -29,14 +30,19 @@ type StyledItemProps = {
   danger?: boolean;
   level: 1 | 2;
   soon?: boolean;
+  to?: string;
 };
 
-const StyledItem = styled.div<StyledItemProps>`
+const StyledItem = styled('div', {
+  shouldForwardProp: (prop) =>
+    !['active', 'danger', 'soon'].includes(prop) && isPropValid(prop),
+})<StyledItemProps>`
   align-items: center;
   background: ${(props) =>
     props.active ? props.theme.background.transparent.light : 'inherit'};
   border: none;
   border-radius: ${({ theme }) => theme.border.radius.sm};
+  text-decoration: none;
   color: ${(props) => {
     if (props.active === true) {
       return props.theme.font.color.primary;
@@ -153,6 +159,8 @@ export const NavigationDrawerItem = ({
       aria-selected={active}
       danger={danger}
       soon={soon}
+      as={to ? Link : 'div'}
+      to={to ? to : undefined}
     >
       {Icon && <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.md} />}
       <StyledItemLabel>{label}</StyledItemLabel>
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx
index 452e550c8..f442e4391 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx
@@ -156,6 +156,7 @@ export const SettingsObjectDetail = () => {
                       }
                       fieldMetadataItem={activeMetadataField}
                       isRemoteObjectField={activeObjectMetadataItem.isRemote}
+                      // to={`./${getFieldSlug(activeMetadataField)}`}
                       ActionIcon={
                         <SettingsObjectFieldActiveActionDropdown
                           isCustomField={!!activeMetadataField.isCustom}
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
index ddd4528e9..96ec28cc0 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
@@ -184,9 +184,7 @@ export const SettingsObjectNewFieldStep1 = () => {
             title="Add Custom Field"
             size="small"
             variant="secondary"
-            onClick={() =>
-              navigate(`/settings/objects/${objectSlug}/new-field/step-2`)
-            }
+            to={`/settings/objects/${objectSlug}/new-field/step-2`}
           />
         </StyledSection>
       </SettingsPageContainer>
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
index 450727be2..d5460ec73 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
@@ -82,13 +82,9 @@ export const SettingsObjects = () => {
                           stroke={theme.icon.stroke.sm}
                         />
                       }
-                      onClick={() =>
-                        navigate(
-                          `/settings/objects/${getObjectSlug(
-                            activeObjectMetadataItem,
-                          )}`,
-                        )
-                      }
+                      to={`/settings/objects/${getObjectSlug(
+                        activeObjectMetadataItem,
+                      )}`}
                     />
                   ))}
                 </TableSection>
diff --git a/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx b/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
index 1e8b53e70..88888a1b9 100644
--- a/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
@@ -1,4 +1,3 @@
-import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { IconPlus, IconSettings } from 'twenty-ui';
 
@@ -20,8 +19,6 @@ const StyledButtonContainer = styled.div`
 `;
 
 export const SettingsDevelopers = () => {
-  const navigate = useNavigate();
-
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
@@ -41,9 +38,7 @@ export const SettingsDevelopers = () => {
               title="Create API key"
               size="small"
               variant="secondary"
-              onClick={() => {
-                navigate('/settings/developers/api-keys/new');
-              }}
+              to={'/settings/developers/api-keys/new'}
             />
           </StyledButtonContainer>
         </Section>
@@ -59,9 +54,7 @@ export const SettingsDevelopers = () => {
               title="Create Webhook"
               size="small"
               variant="secondary"
-              onClick={() => {
-                navigate('/settings/developers/webhooks/new');
-              }}
+              to={'/settings/developers/webhooks/new'}
             />
           </StyledButtonContainer>
         </Section>
diff --git a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx
index 93a34043e..37c3e5d2f 100644
--- a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx
@@ -28,7 +28,7 @@ export const SettingsDevelopersApiKeysNew = () => {
     name: string;
     expirationDate: number | null;
   }>({
-    expirationDate: EXPIRATION_DATES[0].value,
+    expirationDate: EXPIRATION_DATES[5].value,
     name: '',
   });
 
diff --git a/packages/twenty-ui/src/display/chip/components/Chip.tsx b/packages/twenty-ui/src/display/chip/components/Chip.tsx
index 271d0ff02..e44740377 100644
--- a/packages/twenty-ui/src/display/chip/components/Chip.tsx
+++ b/packages/twenty-ui/src/display/chip/components/Chip.tsx
@@ -1,4 +1,6 @@
 import { MouseEvent, ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import isPropValid from '@emotion/is-prop-valid';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -33,17 +35,22 @@ type ChipProps = {
   rightComponent?: ReactNode;
   className?: string;
   onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+  to?: string;
 };
 
-const StyledContainer = styled.div<
+const StyledContainer = styled('div', {
+  shouldForwardProp: (prop) =>
+    !['clickable', 'maxWidth'].includes(prop) && isPropValid(prop),
+})<
   Pick<
     ChipProps,
-    'accent' | 'clickable' | 'disabled' | 'maxWidth' | 'size' | 'variant'
+    'accent' | 'clickable' | 'disabled' | 'maxWidth' | 'size' | 'variant' | 'to'
   >
 >`
   --chip-horizontal-padding: ${({ theme }) => theme.spacing(1)};
   --chip-vertical-padding: ${({ theme }) => theme.spacing(1)};
 
+  text-decoration: none;
   align-items: center;
   border-radius: ${({ theme }) => theme.border.radius.sm};
   color: ${({ theme, disabled }) =>
@@ -158,22 +165,27 @@ export const Chip = ({
   maxWidth,
   className,
   onClick,
-}: ChipProps) => (
-  <StyledContainer
-    data-testid="chip"
-    clickable={clickable}
-    variant={variant}
-    accent={accent}
-    size={size}
-    disabled={disabled}
-    className={className}
-    maxWidth={maxWidth}
-    onClick={onClick}
-  >
-    {leftComponent}
-    <StyledLabel>
-      <OverflowingTextWithTooltip text={label} />
-    </StyledLabel>
-    {rightComponent}
-  </StyledContainer>
-);
+  to,
+}: ChipProps) => {
+  return (
+    <StyledContainer
+      data-testid="chip"
+      clickable={clickable}
+      variant={variant}
+      accent={accent}
+      size={size}
+      disabled={disabled}
+      className={className}
+      maxWidth={maxWidth}
+      onClick={onClick}
+      as={to ? Link : 'div'}
+      to={to ? to : undefined}
+    >
+      {leftComponent}
+      <StyledLabel>
+        <OverflowingTextWithTooltip text={label} />
+      </StyledLabel>
+      {rightComponent}
+    </StyledContainer>
+  );
+};
diff --git a/packages/twenty-ui/src/display/chip/components/EntityChip.tsx b/packages/twenty-ui/src/display/chip/components/EntityChip.tsx
index 740875fe5..399c23a96 100644
--- a/packages/twenty-ui/src/display/chip/components/EntityChip.tsx
+++ b/packages/twenty-ui/src/display/chip/components/EntityChip.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import { isNonEmptyString } from '@sniptt/guards';
 
@@ -37,14 +36,11 @@ export const EntityChip = ({
   className,
   maxWidth,
 }: EntityChipProps) => {
-  const navigate = useNavigate();
   const theme = useTheme();
 
   const handleLinkClick = (event: React.MouseEvent<HTMLDivElement>) => {
     if (isNonEmptyString(linkToEntity)) {
-      event.preventDefault();
       event.stopPropagation();
-      navigate(linkToEntity);
     }
   };
 
@@ -75,6 +71,7 @@ export const EntityChip = ({
       onClick={handleLinkClick}
       className={className}
       maxWidth={maxWidth}
+      to={linkToEntity}
     />
   );
 };