diff --git a/frontend/app/components/Client/Sites/ProjectKey.tsx b/frontend/app/components/Client/Sites/ProjectKey.tsx
index 67391720c..a00b32d07 100644
--- a/frontend/app/components/Client/Sites/ProjectKey.tsx
+++ b/frontend/app/components/Client/Sites/ProjectKey.tsx
@@ -1,8 +1,13 @@
 import { withCopy } from 'HOCs';
 import React from 'react';
+import { Tag } from "antd";
 
 function ProjectKey({ value }: any) {
-  return <div className="rounded border bg-gray-lightest w-fit px-2">{value}</div>;
+  return <div className="w-fit">
+    <Tag bordered={false} className='text-base font-mono'>
+    {value}
+    </Tag>
+    </div>;
 }
 
 export default withCopy(ProjectKey);
diff --git a/frontend/app/components/Client/Sites/Sites.tsx b/frontend/app/components/Client/Sites/Sites.tsx
index b9f046442..ccab226c2 100644
--- a/frontend/app/components/Client/Sites/Sites.tsx
+++ b/frontend/app/components/Client/Sites/Sites.tsx
@@ -77,7 +77,7 @@ const Sites = ({ loading, sites, user, init }: PropsFromRedux) => {
           </div>
           <span className="ml-2">{project.host}</span>
           <div className={'ml-4 flex items-center gap-2'}>
-            {project.platform === 'web' ? null : <Tag color="error">MOBILE BETA</Tag>}
+            {project.platform === 'web' ? null : <Tag bordered={false} color="green">MOBILE BETA</Tag>}
           </div>
         </div>
       </div>