API keys accessible from profile/account

frontend/src/components/Container.tsx

@@ -8,7 +8,7 @@ const Container = (props: ContainerProps) => {
   const { children } = props;
 
   return (
-    <div className="mt-20 mx-4 sm:mx-6 md:mx-12 lg:mx-20 max-w-full">
+    <div className="my-20 mx-4 sm:mx-6 md:mx-12 lg:mx-20 max-w-full">
       {children}
     </div>
   );

frontend/src/components/pages/APIKeys.tsx

@@ -80,7 +80,7 @@ const SingleKey = ({ token, permissions, onDelete }: SingleKeyProps) => {
           onClick={() => setIsKeyVisible(!isKeyVisible)}
           variant="primary"
         >
-          {isKeyVisible ? "Hide" : "Show"}
+          {isKeyVisible ? "Hide" : "Show Key"}
         </Button>
       </p>
 
@@ -182,10 +182,10 @@ const APIKeys = () => {
                   />
                   <div
                     className={cx(
-                      "relative w-11 h-6 bg-gray-3 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800",
+                      "relative w-11 h-6 bg-gray-3 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-9",
                       "rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full",
                       "peer-checked:after:border-gray-12 after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-gray-12",
-                      "after:border-gray-6 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600",
+                      "after:border-gray-6 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-9",
                     )}
                   ></div>
                 </label>

frontend/src/components/pages/Home.tsx

@@ -7,7 +7,7 @@ import NavSection from "@/components/home/NavSection";
 const Home = () => {
   return (
     <main
-      className={`flex flex-col gap-8 items-center justify-center min-h-screen bg-gray-1 mb-12`}
+      className={`flex flex-col gap-8 items-center justify-center min-h-screen bg-gray-1`}
     >
       <HeroSection />
       <KLangDemo />

frontend/src/components/pages/Profile.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 import ListingGrid from "@/components/listings/ListingGrid";
 import { Card, CardContent, CardHeader } from "@/components/ui/Card";
@@ -22,6 +22,7 @@ interface RenderProfileProps {
 }
 
 const RenderProfile = (props: RenderProfileProps) => {
+  const navigate = useNavigate();
   const { user, onUpdateProfile, canEdit, listingIds } = props;
   const [isEditing, setIsEditing] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -65,9 +66,14 @@ const RenderProfile = (props: RenderProfileProps) => {
             {user.created_at ? formatJoinDate(user.created_at) : "Unknown date"}
           </p>
           {!isEditing && canEdit && (
-            <Button onClick={() => setIsEditing(true)} variant="outline">
-              Edit Profile
-            </Button>
+            <div className="flex space-x-2">
+              <Button onClick={() => navigate("/keys")} variant="primary">
+                API Keys
+              </Button>
+              <Button onClick={() => setIsEditing(true)} variant="outline">
+                Edit Profile
+              </Button>
+            </div>
           )}
         </CardHeader>
         <CardContent>