improvements: address feedback 1

frontend/src/pages/user/PersonalSettingsPage/PersonalSettingsPage.tsx

@@ -1,5 +1,11 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link } from "@tanstack/react-router";
+
+import { WishForm } from "@app/components/features/WishForm";
+import { PageHeader } from "@app/components/v2";
 
 import { PersonalTabGroup } from "./components/PersonalTabGroup";
 
@@ -7,16 +13,30 @@ export const PersonalSettingsPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full bg-bunker-800 text-white">
+    <div className="h-full bg-bunker-800 pt-10 text-white">
       <Helmet>
         <title>{t("common.head-title", { title: t("settings.personal.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
       </Helmet>
-      <div className="flex w-full justify-center bg-bunker-800 px-6 text-white">
-        <div className="w-full max-w-6xl">
-          <div className="mt-6 mb-6">
-            <p className="text-3xl font-medium text-gray-200">{t("settings.personal.title")}</p>
-          </div>
+      <div className="flex w-full justify-center px-6 text-white">
+        <div className="w-full max-w-8xl">
+          <Link
+            to="/organization/projects"
+            className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
+          >
+            <FontAwesomeIcon icon={faChevronLeft} />
+            Back to Organization
+          </Link>
+          <PageHeader
+            title="Personal Settings"
+            scope={null}
+            description="Configure settings for your account"
+          >
+            <div>
+              {window.location.origin.includes("https://app.infisical.com") ||
+                window.location.origin.includes("https://gamma.infisical.com") || <WishForm />}
+            </div>
+          </PageHeader>
           <PersonalTabGroup />
         </div>
       </div>

frontend/src/pages/user/PersonalSettingsPage/components/PersonalTabGroup/PersonalTabGroup.tsx

@@ -15,10 +15,12 @@ const tabs = [
 
 export const PersonalTabGroup = () => {
   return (
-    <Tabs defaultValue={tabs[0].key}>
+    <Tabs orientation="vertical" defaultValue={tabs[0].key}>
       <TabList>
         {tabs.map((tab) => (
-          <Tab value={tab.key}>{tab.name}</Tab>
+          <Tab value={tab.key} key={tab.key} variant="instance">
+            {tab.name}
+          </Tab>
         ))}
       </TabList>
       <TabPanel value={tabs[0].key}>