diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
index d2e28482610..9871bd655cd 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
@@ -1,6 +1,15 @@
+import Link from 'next/link'
 import React, { FC, useState } from 'react'
 import { partition, isEmpty, isUndefined } from 'lodash'
-import { Alert, Button, IconEdit, IconHelpCircle, IconKey, IconTrash } from '@supabase/ui'
+import {
+  Alert,
+  Button,
+  IconEdit,
+  IconExternalLink,
+  IconHelpCircle,
+  IconKey,
+  IconTrash,
+} from '@supabase/ui'
 import {
   PostgresTable,
   PostgresColumn,
@@ -316,11 +325,17 @@ const ColumnManagement: FC<Props> = ({
               Add column
             </Button>
           )}
-          <p className='text-sm text-scale-1100'>
-            <a href="https://supabase.com/docs/guides/database/tables#data-types" target="_blank" className="underline flex items-center gap-1">
-              Learn more about data types
+          <Link href="https://supabase.com/docs/guides/database/tables#data-types">
+            <a>
+              <Button
+                type="text"
+                className="text-scale-1000 hover:text-scale-1200"
+                icon={<IconExternalLink size={12} strokeWidth={2} />}
+              >
+                Learn more about data types
+              </Button>
             </a>
-          </p>
+          </Link>
         </div>
       </div>
       <ForeignKeySelector