diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 8afcd9c..d6e9941 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -93,22 +93,22 @@ export const Header: FC<Props> = ({ client }) => {
           <IconHomeBolt size={26} />
           <p>Home</p>
         </button>
-        <p className={`text-2xl font-bold`}>{_.truncate(currentInstance?.name, { length: 20 })}</p>
+        <p className={`text-2xl font-bold`}>{_.truncate(currentInstance?.name, { length: 16 })}</p>
         <p className={`text-2xl font-bold text-bw-800/50`}>#{currentInstance.id}</p>
-        <span className={`!cursor-pointer hover:underline badge outline lg success`} onClick={onClickHost}>
+        <span className={`!cursor-pointer hover:underline badge outline cornered lg success`} onClick={onClickHost}>
           Host: {_.truncate(currentInstance?.host, { length: 40 })}
         </span>
-        <p className={`font-bold `}>Last Updated: {getTimeText(stats?.lastUpdate)}</p>
-        <span className={`badge outline lg primary`}>
-          Database Size: {_.ceil((stats?.databaseSize ?? 0) / 1048576, 2)} MB
+        <p className={`font-bold `}>Updated: {getTimeText(stats?.lastUpdate)}</p>
+        <span className={`badge outline cornered lg primary`}>
+          DB Size: {_.ceil((stats?.databaseSize ?? 0) / 1048576, 2)} MB
         </span>
-        <span className={`badge light lg ${health ? 'success' : 'warn'}`}>
+        <span className={`badge light cornered lg ${health ? 'success' : 'warn'}`}>
           Status: {health ? 'Available' : 'Unknown'}
         </span>
 
         <HoverCard withinPortal shadow="lg" radius={'lg'} transitionProps={{ transition: 'fade' }}>
           <HoverCard.Target>
-            <span className={`badge outline lg primary`}>Meili Version: {version?.pkgVersion}</span>
+            <span className={`badge outline cornered lg primary`}>Meili Version: {version?.pkgVersion}</span>
           </HoverCard.Target>
           <HoverCard.Dropdown>
             Commit Date: {version?.commitDate} <br />
diff --git a/src/pages/key/index.tsx b/src/pages/key/index.tsx
index 98396a9..5f57dad 100644
--- a/src/pages/key/index.tsx
+++ b/src/pages/key/index.tsx
@@ -135,7 +135,7 @@ function Keys() {
           <td>
             <div className={`flex gap-1 flex-wrap`}>
               {t.indexes.map((index) => (
-                <span className="badge secondary light" key={index}>
+                <span className="badge secondary light cornered" key={index}>
                   {index}
                 </span>
               ))}
@@ -144,14 +144,16 @@ function Keys() {
           <td>
             <div className={`flex gap-1 flex-wrap`}>
               {t.actions.map((action) => (
-                <span className="badge secondary light" key={action}>
+                <span className="badge secondary light cornered" key={action}>
                   {action}
                 </span>
               ))}
             </div>
           </td>
           <td>{getTimeText(t.createdAt)}</td>
-          <td>{getTimeText(t.updateAt)}</td>
+          {/* meilisearch package type typos */}
+          {/* @ts-ignore */}
+          <td>{getTimeText(t.updatedAt)}</td>
           <td>{getTimeText(t.expiresAt, { defaultText: 'Forever' })}</td>
           <td>
             <div className={`flex gap-1`}>