diff --git a/src/app/globals.css b/src/app/globals.css
index f9dafdd..07ec9bd 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,11 +2,11 @@
 
 @theme inline {
   --color-black: #000000;
-  --color-white: #FFFFFF;
-  --color-gray-100: #F5F5F5;
-  --color-gray-200: #E5E5E5;
-  --color-gray-300: #D4D4D4;
-  --color-gray-400: #A3A3A3;
+  --color-white: #ffffff;
+  --color-gray-100: #f5f5f5;
+  --color-gray-200: #e5e5e5;
+  --color-gray-300: #d4d4d4;
+  --color-gray-400: #a3a3a3;
   --color-gray-500: #737373;
   --color-gray-600: #525252;
   --color-gray-700: #404040;
@@ -33,12 +33,14 @@
 }
 
 html {
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   color: #000000;
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
-  font-feature-settings: "kern" 1, "liga" 1;
+  font-feature-settings:
+    "kern" 1,
+    "liga" 1;
   text-rendering: optimizeLegibility;
 }
 
@@ -46,14 +48,14 @@ body {
   font-family: var(--font-sans), system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   color: #000000;
 }
 
 /* Brutalist selection */
 ::selection {
   background-color: #000000;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 /* Brutalist focus states */
@@ -69,7 +71,7 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-  background: #FFFFFF;
+  background: #ffffff;
   border-left: 1px solid #000000;
 }
 
@@ -78,7 +80,9 @@ body {
 }
 
 /* Brutalist input reset */
-input, textarea, select {
+input,
+textarea,
+select {
   border: 1px solid #000000;
   background: transparent;
   color: #000000;
@@ -87,13 +91,18 @@ input, textarea, select {
   transition: all 0.15s ease;
 }
 
-input:focus, textarea:focus, select:focus {
-  background-color: #000000;
-  color: #FFFFFF;
+input:focus,
+textarea:focus,
+select:focus {
+  background-color: #ffffff;
+  color: #000000;
+  border-color: #000000;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
   outline: none;
 }
 
-input::placeholder, textarea::placeholder {
+input::placeholder,
+textarea::placeholder {
   color: #737373;
   text-transform: uppercase;
   font-size: 0.75rem;
@@ -123,8 +132,9 @@ textarea::-moz-selection {
   color: #000000 !important;
 }
 
-input:focus::placeholder, textarea:focus::placeholder {
-  color: #A3A3A3;
+input:focus::placeholder,
+textarea:focus::placeholder {
+  color: #a3a3a3;
 }
 
 input[type="text"]:focus::selection,
@@ -177,15 +187,17 @@ select {
   background-position:
     calc(100% - 16px) calc(50% - 2px),
     calc(100% - 10px) calc(50% - 2px);
-  background-size: 6px 6px, 6px 6px;
+  background-size:
+    6px 6px,
+    6px 6px;
   background-repeat: no-repeat;
   padding-right: 2.25rem;
 }
 
 select:focus {
   background-image:
-    linear-gradient(45deg, transparent 50%, #FFFFFF 50%),
-    linear-gradient(135deg, #FFFFFF 50%, transparent 50%);
+    linear-gradient(45deg, transparent 50%, #ffffff 50%),
+    linear-gradient(135deg, #ffffff 50%, transparent 50%);
 }
 
 /* macOS/Safari: custom checkbox styling (Safari ignores border-radius without appearance reset) */
@@ -214,7 +226,7 @@ input[type="checkbox"]:checked::after {
   top: 0px;
   width: 5px;
   height: 9px;
-  border: 2px solid #FFFFFF;
+  border: 2px solid #ffffff;
   border-top: none;
   border-left: none;
   transform: rotate(45deg);
@@ -250,7 +262,7 @@ button {
 
 button:hover {
   background-color: #000000;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 /* Monospace label utility */
diff --git a/src/components/builder/builder-form.tsx b/src/components/builder/builder-form.tsx
index 09cafc6..3f82b49 100644
--- a/src/components/builder/builder-form.tsx
+++ b/src/components/builder/builder-form.tsx
@@ -11,7 +11,7 @@ import { ProjectsForm } from "./forms/projects-form";
 import { CertificationsForm } from "./forms/certifications-form";
 import { CompetitionsForm } from "./forms/competitions-form";
 import { LanguagesForm } from "./forms/languages-form";
-import { ResumeScorePanel } from "./resume-score";
+import { ResumeScorePanel, scoreResume } from "./resume-score";
 import { AISuggestionsPanel } from "./ai-suggestions";
 import { VersionHistoryPanel } from "./version-history-panel";
 
@@ -21,7 +21,11 @@ const SECTIONS = [
   { id: "education", label: "Education", component: EducationForm },
   { id: "skills", label: "Skills", component: SkillsForm },
   { id: "projects", label: "Projects", component: ProjectsForm },
-  { id: "certifications", label: "Certifications", component: CertificationsForm },
+  {
+    id: "certifications",
+    label: "Certifications",
+    component: CertificationsForm,
+  },
   { id: "competitions", label: "Competitions", component: CompetitionsForm },
   { id: "languages", label: "Languages", component: LanguagesForm },
   { id: "versions", label: "Versions", component: VersionHistoryPanel },
@@ -31,12 +35,15 @@ const SECTIONS = [
 
 export function BuilderForm() {
   const searchParams = useSearchParams();
+  const data = useResumeStore((state) => state.data);
   const activeSection = useResumeStore((state) => state.activeSection);
   const setActiveSection = useResumeStore((state) => state.setActiveSection);
   const hiddenSections = useResumeStore((state) => state.hiddenSections);
-  const toggleSectionVisibility = useResumeStore((state) => state.toggleSectionVisibility);
+  const toggleSectionVisibility = useResumeStore(
+    (state) => state.toggleSectionVisibility,
+  );
   const [sectionOrder, setSectionOrder] = useState<string[]>(() =>
-    SECTIONS.map((s) => s.id)
+    SECTIONS.map((s) => s.id),
   );
   const tabsContainerRef = useRef<HTMLDivElement | null>(null);
   const [showSectionManager, setShowSectionManager] = useState(false);
@@ -46,7 +53,10 @@ export function BuilderForm() {
   useEffect(() => {
     if (!showSectionManager) return;
     const handleClick = (e: MouseEvent) => {
-      if (sectionManagerRef.current && !sectionManagerRef.current.contains(e.target as Node)) {
+      if (
+        sectionManagerRef.current &&
+        !sectionManagerRef.current.contains(e.target as Node)
+      ) {
         setShowSectionManager(false);
       }
     };
@@ -55,10 +65,14 @@ export function BuilderForm() {
   }, [showSectionManager]);
 
   // Sections that the user has *not* hidden
-  const visibleSectionIds = sectionOrder.filter((id) => !hiddenSections.includes(id));
+  const visibleSectionIds = sectionOrder.filter(
+    (id) => !hiddenSections.includes(id),
+  );
   const visibleSections = visibleSectionIds
     .map((id) => SECTIONS.find((s) => s.id === id))
-    .filter((section): section is (typeof SECTIONS)[number] => Boolean(section));
+    .filter((section): section is (typeof SECTIONS)[number] =>
+      Boolean(section),
+    );
 
   // If the active section gets hidden, jump to the first visible section
   useEffect(() => {
@@ -91,7 +105,7 @@ export function BuilderForm() {
   useEffect(() => {
     if (!tabsContainerRef.current) return;
     const activeTab = tabsContainerRef.current.querySelector(
-      `[data-section-id="${activeSection}"]`
+      `[data-section-id="${activeSection}"]`,
     ) as HTMLElement | null;
 
     if (!activeTab) return;
@@ -139,11 +153,14 @@ export function BuilderForm() {
     setRecentlyMovedId(movedSection.id);
     const newPosition = target + 1;
     const arrow = direction === "left" ? "←" : "→";
-    setMoveFeedback(`${arrow} Moved "${movedSection.label}" to position ${newPosition}`);
+    setMoveFeedback(
+      `${arrow} Moved "${movedSection.label}" to position ${newPosition}`,
+    );
   };
 
   const ActiveComponent =
-    visibleSections.find((s) => s.id === activeSection)?.component || PersonalInfoForm;
+    visibleSections.find((s) => s.id === activeSection)?.component ||
+    PersonalInfoForm;
 
   const hasPrev = activeIndex > 0;
   const hasNext = activeIndex >= 0 && activeIndex < visibleSections.length - 1;
@@ -158,20 +175,245 @@ export function BuilderForm() {
   const hiddenCount = hiddenSections.length;
   const activeSectionLabel = visibleSections[activeIndex]?.label ?? "Section";
 
+  const getSectionBadge = (id: string) => {
+    switch (id) {
+      case "personal":
+        const hasContact = Boolean(
+          data.personalInfo.fullName.trim() && data.personalInfo.email.trim(),
+        );
+        return hasContact ? (
+          <span className="text-[9px] font-bold px-1.5 py-0.5 uppercase tracking-wider bg-green-100 text-green-800 border border-green-200">
+            OK
+          </span>
+        ) : (
+          <span className="text-[9px] font-bold px-1.5 py-0.5 uppercase tracking-wider bg-amber-100 text-amber-800 border border-amber-200">
+            Required
+          </span>
+        );
+      case "experience":
+        return data.experience.length > 0 ? (
+          <span className="text-[10px] font-bold px-1.5 py-0.5 rounded-sm bg-gray-100 text-gray-800 border border-gray-300">
+            {data.experience.length}
+          </span>
+        ) : null;
+      case "education":
+        return data.education.length > 0 ? (
+          <span className="text-[10px] font-bold px-1.5 py-0.5 rounded-sm bg-gray-100 text-gray-800 border border-gray-300">
+            {data.education.length}
+          </span>
+        ) : null;
+      case "skills":
+        const skillCount = data.skills.reduce(
+          (acc, cat) => acc + cat.items.length,
+          0,
+        );
+        return skillCount > 0 ? (
+          <span className="text-[10px] font-bold px-1.5 py-0.5 rounded-sm bg-gray-100 text-gray-800 border border-gray-300">
+            {skillCount}
+          </span>
+        ) : null;
+      case "projects":
+        return data.projects.length > 0 ? (
+          <span className="text-[10px] font-bold px-1.5 py-0.5 rounded-sm bg-gray-100 text-gray-800 border border-gray-300">
+            {data.projects.length}
+          </span>
+        ) : null;
+      case "certifications":
+        return data.certifications.length > 0 ? (
+          <span className="text-[10px] font-bold px-1.5 py-0.5 rounded-sm bg-gray-100 text-gray-800 border border-gray-300">
+            {data.certifications.length}
+          </span>
+        ) : null;
+      case "competitions":
+        return (data.competitions ?? []).length > 0 ? (
+          <span className="text-[10px] font-bold px-1.5 py-0.5 rounded-sm bg-gray-100 text-gray-800 border border-gray-300">
+            {(data.competitions ?? []).length}
+          </span>
+        ) : null;
+      case "languages":
+        return data.languages.length > 0 ? (
+          <span className="text-[10px] font-bold px-1.5 py-0.5 rounded-sm bg-gray-100 text-gray-800 border border-gray-300">
+            {data.languages.length}
+          </span>
+        ) : null;
+      case "score":
+        const { total } = scoreResume(data);
+        const scoreColor =
+          total >= 85
+            ? "bg-green-100 text-green-800 border-green-200"
+            : total >= 50
+              ? "bg-yellow-100 text-yellow-800 border-yellow-200"
+              : "bg-red-100 text-red-800 border-red-200";
+        return (
+          <span
+            className={`text-[10px] font-bold px-1.5 py-0.5 border ${scoreColor}`}
+          >
+            {total}%
+          </span>
+        );
+      default:
+        return null;
+    }
+  };
+
   return (
-    <div className="h-full flex flex-col">
-      {/* Section tabs */}
-      <div className="border-b border-gray-300 bg-white sticky top-0 z-10">
+    <div className="h-full flex flex-col md:flex-row overflow-hidden">
+      {/* LEFT SIDEBAR - Desktop (md and up) */}
+      <div className="hidden md:flex w-60 border-r border-gray-300 bg-gray-50 flex-col h-full overflow-y-auto shrink-0 z-20">
+        <div className="p-4 border-b border-gray-300 sticky top-0 bg-gray-50 z-10">
+          <div className="flex items-center justify-between gap-2">
+            <div>
+              <p className="label-mono text-gray-500">NAVIGATION</p>
+              <p className="text-[10px] text-gray-600 mt-0.5">
+                Section {Math.max(activeIndex + 1, 1)} of{" "}
+                {visibleSections.length}
+              </p>
+            </div>
+            {/* Sections toggle */}
+            <div className="relative shrink-0" ref={sectionManagerRef}>
+              <button
+                type="button"
+                onClick={() => setShowSectionManager(!showSectionManager)}
+                className={`border px-2 py-1.5 text-[9px] font-bold uppercase tracking-wider transition-colors duration-150 ${
+                  showSectionManager
+                    ? "bg-black text-white border-black"
+                    : "border-gray-400 text-gray-600 hover:bg-black hover:text-white"
+                }`}
+                title="Show or hide sections"
+              >
+                ⚙ Adjust
+              </button>
+
+              {showSectionManager && (
+                <div className="absolute left-0 top-full mt-2 z-55 border border-black bg-white shadow-lg w-56">
+                  <div className="px-3 py-2 border-b border-gray-200 bg-gray-50">
+                    <p className="label-mono text-gray-500 text-[10px]">
+                      TOGGLE SECTIONS
+                    </p>
+                    <p className="text-[10px] text-gray-400 mt-0.5">
+                      Click to show/hide
+                    </p>
+                  </div>
+                  <div className="max-h-64 overflow-y-auto">
+                    {SECTIONS.map((section) => {
+                      const isHidden = hiddenSections.includes(section.id);
+                      const isPersonal = section.id === "personal";
+                      return (
+                        <button
+                          key={section.id}
+                          type="button"
+                          onClick={() =>
+                            !isPersonal && toggleSectionVisibility(section.id)
+                          }
+                          disabled={isPersonal}
+                          className={`w-full flex items-center gap-2 px-3 py-2 text-left text-xs font-medium transition-colors duration-100 ${
+                            isPersonal
+                              ? "text-gray-400 cursor-not-allowed bg-gray-50"
+                              : isHidden
+                                ? "text-gray-400 hover:bg-gray-100"
+                                : "text-black hover:bg-gray-100"
+                          }`}
+                        >
+                          <span
+                            className={`inline-block w-4 h-4 border text-center text-[10px] leading-4 font-bold ${
+                              isHidden
+                                ? "border-gray-300"
+                                : "border-black bg-black text-white"
+                            }`}
+                          >
+                            {isHidden ? "" : "✓"}
+                          </span>
+                          <span className={isHidden ? "line-through" : ""}>
+                            {section.label}
+                          </span>
+                          {isPersonal && (
+                            <span className="ml-auto text-[9px] text-gray-400 uppercase">
+                              Required
+                            </span>
+                          )}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex-1 p-2 space-y-1">
+          {visibleSections.map((section, index) => {
+            const isJustMoved = recentlyMovedId === section.id;
+            const isActive = activeSection === section.id;
+            return (
+              <button
+                key={section.id}
+                onClick={() => setActiveSection(section.id)}
+                className={`w-full flex items-center justify-between gap-2 px-3 py-2.5 text-left text-xs font-bold uppercase tracking-wider transition-all duration-150 border ${
+                  isJustMoved
+                    ? "bg-yellow-400 text-black border-yellow-500 ring-2 ring-yellow-300"
+                    : isActive
+                      ? "bg-black text-white border-black"
+                      : "bg-white text-gray-700 border-gray-200 hover:bg-gray-100 hover:border-gray-300"
+                }`}
+              >
+                <div className="flex items-center gap-2 truncate">
+                  <span className="opacity-70 text-[10px] font-mono">
+                    {String(index + 1).padStart(2, "0")}
+                  </span>
+                  <span className="truncate">{section.label}</span>
+                </div>
+                {getSectionBadge(section.id)}
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Sidebar Footer with reorder buttons */}
+        <div className="p-3 border-t border-gray-300 bg-gray-50 flex flex-col gap-2">
+          <div className="flex items-center justify-between gap-1 w-full">
+            <button
+              type="button"
+              onClick={() => moveActiveSection("left")}
+              disabled={activeIndex <= 0}
+              className="flex-1 border border-gray-400 px-2 py-1.5 text-[9px] font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-colors duration-150 disabled:opacity-30 flex items-center justify-center gap-1"
+              title={`Move "${activeSectionLabel}" up`}
+            >
+              <span>↑ Move Up</span>
+            </button>
+            <button
+              type="button"
+              onClick={() => moveActiveSection("right")}
+              disabled={
+                activeIndex < 0 || activeIndex >= visibleSections.length - 1
+              }
+              className="flex-1 border border-gray-400 px-2 py-1.5 text-[9px] font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-colors duration-150 disabled:opacity-30 flex items-center justify-center gap-1"
+              title={`Move "${activeSectionLabel}" down`}
+            >
+              <span>↓ Move Down</span>
+            </button>
+          </div>
+          <div className="text-[9px] text-center text-gray-400 font-bold uppercase truncate px-1">
+            Reordering: {activeSectionLabel}
+          </div>
+        </div>
+      </div>
+
+      {/* MOBILE LAYOUT TABS - Sticky at the top */}
+      <div className="md:hidden border-b border-gray-300 bg-white sticky top-0 z-10 w-full shrink-0">
         <div className="border-b border-gray-200 px-4 py-3">
           <div className="flex items-center justify-between gap-3">
             <div>
               <p className="label-mono text-gray-500">SECTION NAVIGATION</p>
               <p className="text-xs text-gray-600 mt-1">
-                Section {Math.max(activeIndex + 1, 1)} of {visibleSections.length}
-                {hiddenCount > 0 && <span className="text-gray-400"> · {hiddenCount} hidden</span>}
+                Section {Math.max(activeIndex + 1, 1)} of{" "}
+                {visibleSections.length}
+                {hiddenCount > 0 && (
+                  <span className="text-gray-400"> · {hiddenCount} hidden</span>
+                )}
               </p>
             </div>
-            <div className="hidden sm:flex items-center gap-2">
+            <div className="flex items-center gap-2">
               <button
                 type="button"
                 onClick={() => goToAdjacentSection("prev")}
@@ -179,7 +421,7 @@ export function BuilderForm() {
                 className="border border-gray-400 px-3 py-2 text-[10px] font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-colors duration-150 disabled:opacity-30"
                 title="Previous section"
               >
-                Previous
+                Prev
               </button>
               <button
                 type="button"
@@ -194,9 +436,12 @@ export function BuilderForm() {
           </div>
         </div>
 
-        <div className="flex items-center gap-2 px-0 sm:px-2 py-2">
-          <div className="flex-1 overflow-x-auto scrollbar-none" ref={tabsContainerRef}>
-            <div className="flex min-w-max gap-2 snap-x snap-mandatory px-4 sm:px-2">
+        <div className="flex items-center gap-2 px-0 py-2">
+          <div
+            className="flex-1 overflow-x-auto scrollbar-none"
+            ref={tabsContainerRef}
+          >
+            <div className="flex min-w-max gap-2 snap-x snap-mandatory px-4">
               {visibleSections.map((section, index) => {
                 const isJustMoved = recentlyMovedId === section.id;
                 return (
@@ -204,52 +449,30 @@ export function BuilderForm() {
                     key={section.id}
                     data-section-id={section.id}
                     onClick={() => setActiveSection(section.id)}
-                    className={`snap-start px-3 py-2 text-[11px] sm:text-xs font-bold uppercase tracking-wider whitespace-nowrap transition-all duration-300 border ${
+                    className={`snap-start px-3 py-2 text-[11px] sm:text-xs font-bold uppercase tracking-wider whitespace-nowrap transition-all duration-300 border flex items-center gap-1.5 ${
                       isJustMoved
                         ? "bg-yellow-400 text-black border-yellow-500 ring-2 ring-yellow-300 scale-105"
                         : activeSection === section.id
-                        ? "bg-black text-white border-black"
-                        : "bg-white text-gray-700 border-gray-300 hover:bg-gray-100"
+                          ? "bg-black text-white border-black"
+                          : "bg-white text-gray-700 border-gray-300 hover:bg-gray-100"
                     }`}
-                    aria-current={activeSection === section.id ? "page" : undefined}
+                    aria-current={
+                      activeSection === section.id ? "page" : undefined
+                    }
                   >
-                    <span className="mr-1.5 opacity-70">{String(index + 1).padStart(2, "0")}</span>
-                    {section.label}
+                    <span className="mr-1 opacity-70">
+                      {String(index + 1).padStart(2, "0")}
+                    </span>
+                    <span>{section.label}</span>
+                    {getSectionBadge(section.id)}
                   </button>
                 );
               })}
             </div>
           </div>
 
-          {/* Reorder controls — clearly labeled with the active section name */}
-          <div className="shrink-0 hidden md:flex items-center gap-1">
-            <button
-              type="button"
-              onClick={() => moveActiveSection("left")}
-              disabled={activeIndex <= 0}
-              className="border border-gray-400 px-2.5 py-1.5 text-[10px] font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-colors duration-150 disabled:opacity-30 flex items-center gap-1"
-              title={`Move "${activeSectionLabel}" to the left`}
-            >
-              <span>←</span>
-              <span>Move</span>
-            </button>
-            <span className="text-[9px] font-bold uppercase tracking-wider bg-gray-100 border border-gray-300 text-gray-700 px-2 py-1 max-w-28 truncate" title={activeSectionLabel}>
-              {activeSectionLabel}
-            </span>
-            <button
-              type="button"
-              onClick={() => moveActiveSection("right")}
-              disabled={activeIndex < 0 || activeIndex >= visibleSections.length - 1}
-              className="border border-gray-400 px-2.5 py-1.5 text-[10px] font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-colors duration-150 disabled:opacity-30 flex items-center gap-1"
-              title={`Move "${activeSectionLabel}" to the right`}
-            >
-              <span>Move</span>
-              <span>→</span>
-            </button>
-          </div>
-
-          {/* Manage Sections toggle */}
-          <div className="relative shrink-0" ref={sectionManagerRef}>
+          {/* Manage Sections toggle - Mobile */}
+          <div className="relative shrink-0 px-4" ref={sectionManagerRef}>
             <button
               type="button"
               onClick={() => setShowSectionManager(!showSectionManager)}
@@ -260,14 +483,18 @@ export function BuilderForm() {
               }`}
               title="Show or hide sections"
             >
-              ⚙ Sections{hiddenCount > 0 ? ` (${hiddenCount} hidden)` : ""}
+              ⚙ Sections
             </button>
 
             {showSectionManager && (
-              <div className="absolute right-0 top-full mt-2 z-50 border border-black bg-white shadow-lg w-56">
+              <div className="absolute right-4 top-full mt-2 z-50 border border-black bg-white shadow-lg w-56">
                 <div className="px-3 py-2 border-b border-gray-200 bg-gray-50">
-                  <p className="label-mono text-gray-500 text-[10px]">TOGGLE SECTIONS</p>
-                  <p className="text-[10px] text-gray-400 mt-0.5">Click to show/hide</p>
+                  <p className="label-mono text-gray-500 text-[10px]">
+                    TOGGLE SECTIONS
+                  </p>
+                  <p className="text-[10px] text-gray-400 mt-0.5">
+                    Click to show/hide
+                  </p>
                 </div>
                 <div className="max-h-64 overflow-y-auto">
                   {SECTIONS.map((section) => {
@@ -277,23 +504,35 @@ export function BuilderForm() {
                       <button
                         key={section.id}
                         type="button"
-                        onClick={() => !isPersonal && toggleSectionVisibility(section.id)}
+                        onClick={() =>
+                          !isPersonal && toggleSectionVisibility(section.id)
+                        }
                         disabled={isPersonal}
                         className={`w-full flex items-center gap-2 px-3 py-2 text-left text-xs font-medium transition-colors duration-100 ${
                           isPersonal
                             ? "text-gray-400 cursor-not-allowed bg-gray-50"
                             : isHidden
-                            ? "text-gray-400 hover:bg-gray-100"
-                            : "text-black hover:bg-gray-100"
+                              ? "text-gray-400 hover:bg-gray-100"
+                              : "text-black hover:bg-gray-100"
                         }`}
                       >
-                        <span className={`inline-block w-4 h-4 border text-center text-[10px] leading-4 font-bold ${
-                          isHidden ? "border-gray-300" : "border-black bg-black text-white"
-                        }`}>
+                        <span
+                          className={`inline-block w-4 h-4 border text-center text-[10px] leading-4 font-bold ${
+                            isHidden
+                              ? "border-gray-300"
+                              : "border-black bg-black text-white"
+                          }`}
+                        >
                           {isHidden ? "" : "✓"}
                         </span>
-                        <span className={isHidden ? "line-through" : ""}>{section.label}</span>
-                        {isPersonal && <span className="ml-auto text-[9px] text-gray-400 uppercase">Required</span>}
+                        <span className={isHidden ? "line-through" : ""}>
+                          {section.label}
+                        </span>
+                        {isPersonal && (
+                          <span className="ml-auto text-[9px] text-gray-400 uppercase">
+                            Required
+                          </span>
+                        )}
                       </button>
                     );
                   })}
@@ -302,43 +541,25 @@ export function BuilderForm() {
             )}
           </div>
         </div>
+      </div>
 
-        {/* Move feedback toast — appears inside the nav area */}
-        <div
-          className={`overflow-hidden transition-all duration-300 ${
-            moveFeedback ? "max-h-10 opacity-100" : "max-h-0 opacity-0"
-          }`}
-        >
-          <div className="flex items-center gap-2 px-4 py-1.5 bg-yellow-50 border-t border-yellow-200">
-            <span className="inline-block w-2 h-2 rounded-full bg-yellow-400" />
-            <span className="text-[11px] font-semibold text-yellow-800">{moveFeedback}</span>
+      {/* Main Content Area */}
+      <div className="flex-1 overflow-y-auto p-6 flex flex-col h-full bg-white relative">
+        {/* Move feedback toast — appears inside the main area top */}
+        {moveFeedback && (
+          <div className="absolute top-0 left-0 right-0 z-30 transition-all duration-300 bg-yellow-50 border-b border-yellow-200 shrink-0">
+            <div className="flex items-center gap-2 px-6 py-2">
+              <span className="inline-block w-2 h-2 rounded-full bg-yellow-400 animate-ping" />
+              <span className="text-xs font-semibold text-yellow-800">
+                {moveFeedback}
+              </span>
+            </div>
           </div>
+        )}
+        <div className="max-w-3xl w-full mx-auto md:mx-0">
+          <ActiveComponent />
         </div>
       </div>
-
-      <div className="sm:hidden grid grid-cols-2 gap-2 border-b border-gray-200 bg-white px-3 py-2">
-        <button
-          type="button"
-          onClick={() => goToAdjacentSection("prev")}
-          disabled={!hasPrev}
-          className="border border-gray-400 px-3 py-2 text-[10px] font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-colors duration-150 disabled:opacity-30"
-        >
-          Previous
-        </button>
-        <button
-          type="button"
-          onClick={() => goToAdjacentSection("next")}
-          disabled={!hasNext}
-          className="border border-gray-400 px-3 py-2 text-[10px] font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-colors duration-150 disabled:opacity-30"
-        >
-          Next
-        </button>
-      </div>
-
-      {/* Form content */}
-      <div className="flex-1 overflow-y-auto p-6">
-        <ActiveComponent />
-      </div>
     </div>
   );
 }
diff --git a/src/components/builder/builder-header.tsx b/src/components/builder/builder-header.tsx
index 02522b3..cb6f433 100644
--- a/src/components/builder/builder-header.tsx
+++ b/src/components/builder/builder-header.tsx
@@ -26,12 +26,28 @@ export function BuilderHeader({
   saveValidationError,
   isGuest = false,
 }: BuilderHeaderProps) {
-  const { title, setTitle, templateId, setTemplateId, fontFamily, setFontFamily, pdfLocale, setPdfLocale, isSaving, isDirty, lastSavedAt, data, setData } =
-    useResumeStore();
+  const {
+    title,
+    setTitle,
+    templateId,
+    setTemplateId,
+    fontFamily,
+    setFontFamily,
+    pdfLocale,
+    setPdfLocale,
+    isSaving,
+    isDirty,
+    lastSavedAt,
+    data,
+    setData,
+  } = useResumeStore();
 
   const [isExporting, setIsExporting] = useState(false);
   const [isCheckingWriting, setIsCheckingWriting] = useState(false);
-  const [writingStatus, setWritingStatus] = useState<{ type: "success" | "error"; message: string } | null>(null);
+  const [writingStatus, setWritingStatus] = useState<{
+    type: "success" | "error";
+    message: string;
+  } | null>(null);
   const [previewPdfUrl, setPreviewPdfUrl] = useState<string | null>(null);
   const [previewFilename, setPreviewFilename] = useState("resume.pdf");
   const [exportError, setExportError] = useState<string | null>(null);
@@ -47,7 +63,12 @@ export function BuilderHeader({
     ) {
       setExportError(null);
     }
-  }, [exportError, templateId, data.personalInfo.fullName, data.personalInfo.email]);
+  }, [
+    exportError,
+    templateId,
+    data.personalInfo.fullName,
+    data.personalInfo.email,
+  ]);
 
   useEffect(() => {
     if (!writingStatus) return;
@@ -80,7 +101,9 @@ export function BuilderHeader({
     setIsExporting(true);
 
     try {
-      const response = await fetch(`/api/export/${resumeId}?locale=${pdfLocale}`);
+      const response = await fetch(
+        `/api/export/${resumeId}?locale=${pdfLocale}`,
+      );
       if (!response.ok) {
         throw new Error("Export failed");
       }
@@ -130,7 +153,9 @@ export function BuilderHeader({
       console.error("Failed to check grammar/spelling:", error);
       setWritingStatus({
         type: "error",
-        message: (error as Error).message || "Failed to check writing. Please try again.",
+        message:
+          (error as Error).message ||
+          "Failed to check writing. Please try again.",
       });
     } finally {
       setIsCheckingWriting(false);
@@ -153,7 +178,10 @@ export function BuilderHeader({
     });
   };
 
-  const activeBulletSymbol = (data.personalInfo.bulletSymbol || "•").slice(0, 3);
+  const activeBulletSymbol = (data.personalInfo.bulletSymbol || "•").slice(
+    0,
+    3,
+  );
 
   return (
     <>
@@ -168,7 +196,9 @@ export function BuilderHeader({
               >
                 ← {isGuest ? "Home" : "Back"}
               </Link>
-              <span className="label-mono">{isGuest ? "GUEST_MODE" : "BUILDER_MODE"}</span>
+              <span className="label-mono">
+                {isGuest ? "GUEST_MODE" : "BUILDER_MODE"}
+              </span>
             </div>
 
             <div className="flex items-center gap-4">
@@ -177,17 +207,23 @@ export function BuilderHeader({
                 {isGuest ? (
                   <>
                     <span className="inline-block w-2 h-2 rounded-full bg-gray-400" />
-                    <span className="label-mono text-gray-500">NOT SAVED · GUEST</span>
+                    <span className="label-mono text-gray-500">
+                      NOT SAVED · GUEST
+                    </span>
                   </>
                 ) : saveValidationError ? (
                   <>
                     <span className="inline-block w-2 h-2 rounded-full bg-red-500" />
-                    <span className="label-mono text-red-500 text-[10px]">{saveValidationError}</span>
+                    <span className="label-mono text-red-500 text-[10px]">
+                      {saveValidationError}
+                    </span>
                   </>
                 ) : isSaving ? (
                   <>
                     <span className="inline-block w-2 h-2 rounded-full bg-yellow-500 animate-pulse" />
-                    <span className="label-mono text-yellow-600">SAVING...</span>
+                    <span className="label-mono text-yellow-600">
+                      SAVING...
+                    </span>
                   </>
                 ) : isDirty ? (
                   <>
@@ -216,7 +252,10 @@ export function BuilderHeader({
               <div className="flex flex-col items-end gap-1">
                 {isGuest ? (
                   <div className="flex flex-wrap justify-end items-center gap-2">
-                    <TutorialPopup isGuest triggerClassName="border border-gray-400 px-4 py-2 text-xs font-bold uppercase tracking-wider hover:border-black hover:bg-black hover:text-white transition-colors duration-150" />
+                    <TutorialPopup
+                      isGuest
+                      triggerClassName="border border-gray-400 px-4 py-2 text-xs font-bold uppercase tracking-wider hover:border-black hover:bg-black hover:text-white transition-colors duration-150"
+                    />
                     <Link
                       href="/login"
                       className="border border-black px-4 py-2 text-xs font-bold uppercase tracking-wider bg-black text-white hover:bg-white hover:text-black transition-colors duration-150"
@@ -231,28 +270,33 @@ export function BuilderHeader({
                       <button
                         onClick={handleCheckWriting}
                         disabled={isCheckingWriting}
-                        className={`border border-gray-400 px-4 py-2 text-xs font-bold uppercase tracking-wider transition-colors duration-150 ${isCheckingWriting
-                          ? "bg-gray-200 text-gray-500 cursor-not-allowed"
-                          : "hover:border-black hover:bg-black hover:text-white"
-                          }`}
+                        className={`border border-gray-400 px-4 py-2 text-xs font-bold uppercase tracking-wider transition-colors duration-150 ${
+                          isCheckingWriting
+                            ? "bg-gray-200 text-gray-500 cursor-not-allowed"
+                            : "hover:border-black hover:bg-black hover:text-white"
+                        }`}
                       >
                         {isCheckingWriting ? "CHECKING..." : "CHECK GRAMMAR"}
                       </button>
                       <button
                         onClick={handlePreviewPdf}
                         disabled={isExporting}
-                        className={`border border-black px-4 py-2 text-xs font-bold uppercase tracking-wider transition-colors duration-150 ${isExporting
-                          ? "bg-gray-200 text-gray-500 cursor-not-allowed"
-                          : "bg-black text-white hover:bg-white hover:text-black"
-                          }`}
+                        className={`border border-black px-4 py-2 text-xs font-bold uppercase tracking-wider transition-colors duration-150 ${
+                          isExporting
+                            ? "bg-gray-200 text-gray-500 cursor-not-allowed"
+                            : "bg-black text-white hover:bg-white hover:text-black"
+                        }`}
                       >
                         {isExporting ? "GENERATING..." : "EXPORT PDF"}
                       </button>
                     </div>
                     {writingStatus && (
                       <p
-                        className={`text-[10px] font-bold uppercase tracking-wider max-w-64 text-right ${writingStatus.type === "success" ? "text-green-600" : "text-red-600"
-                          }`}
+                        className={`text-[10px] font-bold uppercase tracking-wider max-w-64 text-right ${
+                          writingStatus.type === "success"
+                            ? "text-green-600"
+                            : "text-red-600"
+                        }`}
                       >
                         {writingStatus.message}
                       </p>
@@ -277,7 +321,7 @@ export function BuilderHeader({
                 value={title}
                 onChange={(e) => setTitle(e.target.value)}
                 placeholder="Resume Title"
-                className="w-full border border-gray-300 bg-transparent px-3 py-2 text-lg font-bold focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                className="w-full border border-gray-300 bg-transparent px-3 py-2 text-lg font-bold focus:border-black transition-all duration-150"
               />
             </div>
 
@@ -291,7 +335,7 @@ export function BuilderHeader({
                 title="Font family"
                 value={fontFamily}
                 onChange={(e) => setFontFamily(e.target.value)}
-                className="border border-black bg-transparent px-3 py-2 text-xs font-bold tracking-wider focus:bg-black focus:text-white transition-all duration-150"
+                className="border border-black bg-transparent px-3 py-2 text-xs font-bold tracking-wider transition-all duration-150"
               >
                 {CV_FONTS.map((font) => (
                   <option key={font.id} value={font.id}>
@@ -308,7 +352,7 @@ export function BuilderHeader({
                 title="PDF language"
                 value={pdfLocale}
                 onChange={(e) => setPdfLocale(e.target.value)}
-                className="border border-black bg-transparent px-3 py-2 text-xs font-bold tracking-wider focus:bg-black focus:text-white transition-all duration-150"
+                className="border border-black bg-transparent px-3 py-2 text-xs font-bold tracking-wider transition-all duration-150"
               >
                 {PDF_LOCALES.map((loc) => (
                   <option key={loc.code} value={loc.code}>
@@ -322,75 +366,79 @@ export function BuilderHeader({
           <div className="mt-4 border-t border-black pt-3">
             <div className="flex flex-wrap items-center gap-2">
               <span className="label-mono text-gray-500">QUICK_ACCESS</span>
-              <span className="text-[10px] text-gray-500 uppercase tracking-wider">Jump straight to key tools</span>
+              <span className="text-[10px] text-gray-500 uppercase tracking-wider">
+                Jump straight to key tools
+              </span>
             </div>
 
             <div className="mt-2 flex flex-wrap items-center gap-2">
-            <button
-              type="button"
-              onClick={() => jumpToSection("personal")}
-              className="border border-black bg-white px-3 py-1 text-[10px] font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-colors duration-150"
-            >
-              Profile Import
-            </button>
-            <button
-              type="button"
-              onClick={() => jumpToSection("versions")}
-              className="border border-black bg-white px-3 py-1 text-[10px] font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-colors duration-150"
-            >
-              Version History
-            </button>
-            <button
-              type="button"
-              onClick={() => jumpToSection("score")}
-              className="border border-black bg-white px-3 py-1 text-[10px] font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-colors duration-150"
-            >
-              Resume Score
-            </button>
-            <Link
-              href={isGuest ? "/login" : "/applications"}
-              className="border border-black bg-white px-3 py-1 text-[10px] font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-colors duration-150"
-            >
-              Applications Tracker
-            </Link>
-
-            <div className="ml-0 sm:ml-2 flex items-center gap-2 border border-gray-300 bg-white px-2 py-1">
-              <span className="label-mono text-gray-500">BULLET</span>
-              <input
-                type="text"
-                value={activeBulletSymbol}
-                onChange={(e) => setBulletSymbol(e.target.value)}
-                maxLength={3}
-                aria-label="Bullet symbol"
-                className="w-10 border border-black bg-white px-1 py-0.5 text-center text-xs font-bold focus:bg-black focus:text-white transition-colors duration-150"
-              />
               <button
                 type="button"
-                onClick={() => setBulletSymbol("•")}
-                className="border border-gray-300 px-2 py-0.5 text-[10px] font-bold hover:border-black hover:bg-black hover:text-white transition-colors duration-150"
+                onClick={() => jumpToSection("personal")}
+                className="border border-black bg-white px-3 py-1 text-[10px] font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-colors duration-150"
               >
-                •
+                Profile Import
               </button>
               <button
                 type="button"
-                onClick={() => setBulletSymbol("-")}
-                className="border border-gray-300 px-2 py-0.5 text-[10px] font-bold hover:border-black hover:bg-black hover:text-white transition-colors duration-150"
+                onClick={() => jumpToSection("versions")}
+                className="border border-black bg-white px-3 py-1 text-[10px] font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-colors duration-150"
               >
-                -
+                Version History
               </button>
               <button
                 type="button"
-                onClick={() => setBulletSymbol("→")}
-                className="border border-gray-300 px-2 py-0.5 text-[10px] font-bold hover:border-black hover:bg-black hover:text-white transition-colors duration-150"
+                onClick={() => jumpToSection("score")}
+                className="border border-black bg-white px-3 py-1 text-[10px] font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-colors duration-150"
               >
-                →
+                Resume Score
               </button>
-            </div>
+              <Link
+                href={isGuest ? "/login" : "/applications"}
+                className="border border-black bg-white px-3 py-1 text-[10px] font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-colors duration-150"
+              >
+                Applications Tracker
+              </Link>
 
-            <div className="flex items-center gap-2 border border-emerald-300 bg-emerald-50 px-2 py-1 text-[10px] font-bold uppercase tracking-wider text-emerald-800">
-              <span className="label-mono text-emerald-700">LIVE</span>
-              <span className="normal-case font-semibold">{activeBulletSymbol} Built scalable checkout flow</span>
-            </div>
+              <div className="ml-0 sm:ml-2 flex items-center gap-2 border border-gray-300 bg-white px-2 py-1">
+                <span className="label-mono text-gray-500">BULLET</span>
+                <input
+                  type="text"
+                  value={activeBulletSymbol}
+                  onChange={(e) => setBulletSymbol(e.target.value)}
+                  maxLength={3}
+                  aria-label="Bullet symbol"
+                  className="w-10 border border-black bg-white px-1 py-0.5 text-center text-xs font-bold transition-colors duration-150"
+                />
+                <button
+                  type="button"
+                  onClick={() => setBulletSymbol("•")}
+                  className="border border-gray-300 px-2 py-0.5 text-[10px] font-bold hover:border-black hover:bg-black hover:text-white transition-colors duration-150"
+                >
+                  •
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setBulletSymbol("-")}
+                  className="border border-gray-300 px-2 py-0.5 text-[10px] font-bold hover:border-black hover:bg-black hover:text-white transition-colors duration-150"
+                >
+                  -
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setBulletSymbol("→")}
+                  className="border border-gray-300 px-2 py-0.5 text-[10px] font-bold hover:border-black hover:bg-black hover:text-white transition-colors duration-150"
+                >
+                  →
+                </button>
+              </div>
+
+              <div className="flex items-center gap-2 border border-emerald-300 bg-emerald-50 px-2 py-1 text-[10px] font-bold uppercase tracking-wider text-emerald-800">
+                <span className="label-mono text-emerald-700">LIVE</span>
+                <span className="normal-case font-semibold">
+                  {activeBulletSymbol} Built scalable checkout flow
+                </span>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/components/builder/forms/certifications-form.tsx b/src/components/builder/forms/certifications-form.tsx
index bb51f91..f594bdd 100644
--- a/src/components/builder/forms/certifications-form.tsx
+++ b/src/components/builder/forms/certifications-form.tsx
@@ -27,12 +27,12 @@ export function CertificationsForm() {
 
   const updateCertification = (
     id: string,
-    updates: Partial<ResumeData["certifications"][0]>
+    updates: Partial<ResumeData["certifications"][0]>,
   ) => {
     setData({
       ...data,
       certifications: certifications.map((c) =>
-        c.id === id ? { ...c, ...updates } : c
+        c.id === id ? { ...c, ...updates } : c,
       ),
     });
   };
@@ -40,8 +40,12 @@ export function CertificationsForm() {
   return (
     <div className="max-w-3xl space-y-8">
       <div>
-        <span className="label-mono block mb-4">SECTION_06 // CERTIFICATIONS</span>
-        <h2 className="text-3xl font-black tracking-tight mb-2">Certifications</h2>
+        <span className="label-mono block mb-4">
+          SECTION_06 // CERTIFICATIONS
+        </span>
+        <h2 className="text-3xl font-black tracking-tight mb-2">
+          Certifications
+        </h2>
         <p className="text-sm text-gray-600">
           Professional certifications, licenses, and credentials
         </p>
@@ -72,7 +76,7 @@ export function CertificationsForm() {
                     updateCertification(cert.id, { name: e.target.value })
                   }
                   placeholder="AWS Solutions Architect Professional"
-                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                 />
               </div>
 
@@ -86,7 +90,7 @@ export function CertificationsForm() {
                       updateCertification(cert.id, { issuer: e.target.value })
                     }
                     placeholder="Amazon Web Services"
-                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                   />
                 </div>
                 <div>
@@ -98,7 +102,7 @@ export function CertificationsForm() {
                       updateCertification(cert.id, { date: value })
                     }
                     title="Certification date"
-                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                   />
                 </div>
               </div>
@@ -112,7 +116,7 @@ export function CertificationsForm() {
                     updateCertification(cert.id, { url: e.target.value })
                   }
                   placeholder="https://www.credly.com/badges/..."
-                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                 />
               </div>
             </div>
diff --git a/src/components/builder/forms/competitions-form.tsx b/src/components/builder/forms/competitions-form.tsx
index f443d6f..e3217a7 100644
--- a/src/components/builder/forms/competitions-form.tsx
+++ b/src/components/builder/forms/competitions-form.tsx
@@ -10,21 +10,25 @@ export function CompetitionsForm() {
   const { data, setData } = useResumeStore();
   const { competitions = [] } = data; // Default fallback for older resumes
   const [improvingBullet, setImprovingBullet] = useState<string | null>(null);
-  const [improvingDescription, setImprovingDescription] = useState<string | null>(null);
+  const [improvingDescription, setImprovingDescription] = useState<
+    string | null
+  >(null);
 
   const handleImproveBullet = async (
     compId: string,
     idx: number,
     text: string,
     compName: string,
-    role: string
+    role: string,
   ) => {
     if (!text.trim() || improvingBullet) return;
     const key = `${compId}-${idx}`;
     setImprovingBullet(key);
     try {
       const positionContext = role ? `${role} at ${compName}` : compName;
-      const { result } = await improveBullet(text, { position: positionContext });
+      const { result } = await improveBullet(text, {
+        position: positionContext,
+      });
       updateHighlight(compId, idx, result);
     } catch (err: unknown) {
       alert((err as Error).message || "AI improvement failed.");
@@ -37,14 +41,18 @@ export function CompetitionsForm() {
     compId: string,
     text: string,
     compName: string,
-    role: string
+    role: string,
   ) => {
     if (!text.trim() || improvingDescription) return;
     setImprovingDescription(compId);
     try {
       const titleContext = role ? `${role} at ${compName}` : compName;
-      const { result } = await improveDescription(text, { title: titleContext });
-      updateCompetition(compId, { description: result.slice(0, MAX_DESCRIPTION_LENGTH) });
+      const { result } = await improveDescription(text, {
+        title: titleContext,
+      });
+      updateCompetition(compId, {
+        description: result.slice(0, MAX_DESCRIPTION_LENGTH),
+      });
     } catch (err: unknown) {
       alert((err as Error).message || "AI improvement failed.");
     } finally {
@@ -89,12 +97,12 @@ export function CompetitionsForm() {
 
   const updateCompetition = (
     id: string,
-    updates: Partial<ResumeData["competitions"][0]>
+    updates: Partial<ResumeData["competitions"][0]>,
   ) => {
     setData({
       ...data,
       competitions: competitions.map((comp) =>
-        comp.id === id ? { ...comp, ...updates } : comp
+        comp.id === id ? { ...comp, ...updates } : comp,
       ),
     });
   };
@@ -127,8 +135,12 @@ export function CompetitionsForm() {
   return (
     <div className="max-w-3xl space-y-8">
       <div>
-        <span className="label-mono block mb-4">SECTION_OPT // COMPETITIONS</span>
-        <h2 className="text-3xl font-black tracking-tight mb-2">Competitions</h2>
+        <span className="label-mono block mb-4">
+          SECTION_OPT // COMPETITIONS
+        </span>
+        <h2 className="text-3xl font-black tracking-tight mb-2">
+          Competitions
+        </h2>
         <p className="text-sm text-gray-600">
           Hackathons, case studies, academic or professional competitions
         </p>
@@ -170,7 +182,9 @@ export function CompetitionsForm() {
             <div className="space-y-4">
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div>
-                  <label className="label-mono block mb-2">COMPETITION_NAME *</label>
+                  <label className="label-mono block mb-2">
+                    COMPETITION_NAME *
+                  </label>
                   <input
                     type="text"
                     value={comp.name}
@@ -178,7 +192,7 @@ export function CompetitionsForm() {
                       updateCompetition(comp.id, { name: e.target.value })
                     }
                     placeholder="Global AI Hackathon 2026"
-                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                   />
                 </div>
                 <div>
@@ -190,7 +204,7 @@ export function CompetitionsForm() {
                       updateCompetition(comp.id, { role: e.target.value })
                     }
                     placeholder="1st Place, Team Lead"
-                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                   />
                 </div>
               </div>
@@ -205,7 +219,7 @@ export function CompetitionsForm() {
                       updateCompetition(comp.id, { date: newDate });
                     }}
                     required
-                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                   />
                 </div>
                 <div>
@@ -217,7 +231,7 @@ export function CompetitionsForm() {
                       updateCompetition(comp.id, { location: e.target.value })
                     }
                     placeholder="San Francisco, CA"
-                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                   />
                 </div>
                 <div>
@@ -229,7 +243,7 @@ export function CompetitionsForm() {
                       updateCompetition(comp.id, { url: e.target.value })
                     }
                     placeholder="https://devpost.com/..."
-                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                   />
                 </div>
               </div>
@@ -239,8 +253,17 @@ export function CompetitionsForm() {
                   <label className="label-mono">DESCRIPTION *</label>
                   <button
                     type="button"
-                    onClick={() => handleImproveDescription(comp.id, comp.description, comp.name, comp.role || "")}
-                    disabled={!comp.description.trim() || !!improvingDescription}
+                    onClick={() =>
+                      handleImproveDescription(
+                        comp.id,
+                        comp.description,
+                        comp.name,
+                        comp.role || "",
+                      )
+                    }
+                    disabled={
+                      !comp.description.trim() || !!improvingDescription
+                    }
                     className="label-mono text-[10px] border border-black px-2 py-0.5 hover:bg-black hover:text-white transition-colors duration-150 disabled:opacity-30 disabled:cursor-not-allowed"
                   >
                     {improvingDescription === comp.id ? "..." : "✦"}
@@ -250,13 +273,15 @@ export function CompetitionsForm() {
                   value={comp.description}
                   onChange={(e) => {
                     if (e.target.value.length <= MAX_DESCRIPTION_LENGTH) {
-                      updateCompetition(comp.id, { description: e.target.value });
+                      updateCompetition(comp.id, {
+                        description: e.target.value,
+                      });
                     }
                   }}
                   placeholder="Built an AI-powered agent to automate tasks within 48 hours..."
                   rows={3}
                   maxLength={MAX_DESCRIPTION_LENGTH}
-                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150 resize-none"
+                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150 resize-none"
                 />
                 <span className="label-mono text-gray-400 text-[10px] block mt-1 text-right">
                   {comp.description.length}/{MAX_DESCRIPTION_LENGTH}
@@ -278,11 +303,17 @@ export function CompetitionsForm() {
                             updateHighlight(comp.id, idx, e.target.value)
                           }
                           placeholder="Awarded best technical implementation by judges..."
-                          className="flex-1 border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                          className="flex-1 border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                         />
                         <button
                           onClick={() =>
-                            handleImproveBullet(comp.id, idx, highlight, comp.name, comp.role || "")
+                            handleImproveBullet(
+                              comp.id,
+                              idx,
+                              highlight,
+                              comp.name,
+                              comp.role || "",
+                            )
                           }
                           disabled={isImproving || !highlight.trim()}
                           title="Improve with AI"
diff --git a/src/components/builder/forms/education-form.tsx b/src/components/builder/forms/education-form.tsx
index d34cc75..2473f87 100644
--- a/src/components/builder/forms/education-form.tsx
+++ b/src/components/builder/forms/education-form.tsx
@@ -8,7 +8,9 @@ import { MonthInput } from "./month-input";
 export function EducationForm() {
   const { data, setData } = useResumeStore();
   const { education } = data;
-  const [courseworkInputs, setCourseworkInputs] = useState<Record<string, string>>({});
+  const [courseworkInputs, setCourseworkInputs] = useState<
+    Record<string, string>
+  >({});
 
   const addEducation = () => {
     const newEducation: ResumeData["education"][0] = {
@@ -54,12 +56,12 @@ export function EducationForm() {
 
   const updateEducation = (
     id: string,
-    updates: Partial<ResumeData["education"][0]>
+    updates: Partial<ResumeData["education"][0]>,
   ) => {
     setData({
       ...data,
       education: education.map((edu) =>
-        edu.id === id ? { ...edu, ...updates } : edu
+        edu.id === id ? { ...edu, ...updates } : edu,
       ),
     });
   };
@@ -85,7 +87,7 @@ export function EducationForm() {
 
   const handleCourseworkKeyDown = (
     e: React.KeyboardEvent<HTMLInputElement>,
-    eduId: string
+    eduId: string,
   ) => {
     if (e.key === "Enter" || e.key === ",") {
       e.preventDefault();
@@ -153,7 +155,7 @@ export function EducationForm() {
                     updateEducation(edu.id, { institution: e.target.value })
                   }
                   placeholder="University of California"
-                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                 />
               </div>
 
@@ -167,7 +169,7 @@ export function EducationForm() {
                       updateEducation(edu.id, { degree: e.target.value })
                     }
                     placeholder="Bachelor of Science"
-                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                   />
                 </div>
                 <div>
@@ -179,7 +181,7 @@ export function EducationForm() {
                       updateEducation(edu.id, { field: e.target.value })
                     }
                     placeholder="Computer Science"
-                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                   />
                 </div>
               </div>
@@ -194,7 +196,7 @@ export function EducationForm() {
                       updateEducation(edu.id, { location: e.target.value })
                     }
                     placeholder="Berkeley, CA"
-                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                   />
                 </div>
                 <div>
@@ -206,7 +208,7 @@ export function EducationForm() {
                       updateEducation(edu.id, { gpa: e.target.value })
                     }
                     placeholder="3.8"
-                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                   />
                 </div>
               </div>
@@ -221,7 +223,7 @@ export function EducationForm() {
                       updateEducation(edu.id, { startDate: value })
                     }
                     required
-                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                   />
                 </div>
                 <div>
@@ -233,7 +235,7 @@ export function EducationForm() {
                       updateEducation(edu.id, { endDate: value })
                     }
                     disabled={edu.current}
-                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150 disabled:opacity-50"
+                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150 disabled:opacity-50"
                   />
                 </div>
               </div>
@@ -260,11 +262,15 @@ export function EducationForm() {
               </div>
 
               <div>
-                <label className="label-mono block mb-2">RELEVANT_COURSEWORK</label>
+                <label className="label-mono block mb-2">
+                  RELEVANT_COURSEWORK
+                </label>
                 <div className="border border-gray-400 bg-transparent p-2 min-h-12">
                   <div className="flex flex-wrap gap-2">
                     {(edu.coursework ?? []).length === 0 && (
-                      <span className="text-xs text-gray-500">No coursework added yet.</span>
+                      <span className="text-xs text-gray-500">
+                        No coursework added yet.
+                      </span>
                     )}
                     {(edu.coursework ?? []).map((course, idx) => (
                       <span
@@ -295,7 +301,7 @@ export function EducationForm() {
                     }
                     onKeyDown={(e) => handleCourseworkKeyDown(e, edu.id)}
                     placeholder="Add a course (e.g. Data Structures)"
-                    className="flex-1 border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                    className="flex-1 border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                   />
                   <button
                     type="button"
@@ -303,7 +309,10 @@ export function EducationForm() {
                       const value = courseworkInputs[edu.id] || "";
                       if (!value.trim()) return;
                       addCoursework(edu.id, value);
-                      setCourseworkInputs((prev) => ({ ...prev, [edu.id]: "" }));
+                      setCourseworkInputs((prev) => ({
+                        ...prev,
+                        [edu.id]: "",
+                      }));
                     }}
                     className="border border-black px-3 py-2 text-xs font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-colors duration-150"
                   >
diff --git a/src/components/builder/forms/experience-form.tsx b/src/components/builder/forms/experience-form.tsx
index a97dc74..d1f99c0 100644
--- a/src/components/builder/forms/experience-form.tsx
+++ b/src/components/builder/forms/experience-form.tsx
@@ -5,14 +5,14 @@ import { useResumeStore } from "@/store/resume-store";
 import type { ResumeData } from "@/db/schema";
 import { improveBullet, improveDescription } from "@/actions/ai";
 import { MonthInput } from "./month-input";
-import { 
-  DndContext, 
-  closestCenter, 
-  KeyboardSensor, 
-  PointerSensor, 
-  useSensor, 
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
   useSensors,
-  DragEndEvent
+  DragEndEvent,
 } from "@dnd-kit/core";
 import {
   arrayMove,
@@ -32,7 +32,9 @@ export function ExperienceForm() {
   const { experience } = data;
   const [dateErrors, setDateErrors] = useState<Record<string, string>>({});
   const [improvingBullet, setImprovingBullet] = useState<string | null>(null);
-  const [improvingDescription, setImprovingDescription] = useState<string | null>(null);
+  const [improvingDescription, setImprovingDescription] = useState<
+    string | null
+  >(null);
 
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -42,7 +44,7 @@ export function ExperienceForm() {
     }),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
-    })
+    }),
   );
 
   const handleImproveBullet = async (
@@ -50,7 +52,7 @@ export function ExperienceForm() {
     idx: number,
     text: string,
     position: string,
-    company: string
+    company: string,
   ) => {
     if (!text.trim() || improvingBullet) return;
     const key = `${expId}-${idx}`;
@@ -69,13 +71,18 @@ export function ExperienceForm() {
     expId: string,
     text: string,
     position: string,
-    company: string
+    company: string,
   ) => {
     if (!text.trim() || improvingDescription) return;
     setImprovingDescription(expId);
     try {
-      const { result } = await improveDescription(text, { title: position, company });
-      updateExperience(expId, { description: result.slice(0, MAX_DESCRIPTION_LENGTH) });
+      const { result } = await improveDescription(text, {
+        title: position,
+        company,
+      });
+      updateExperience(expId, {
+        description: result.slice(0, MAX_DESCRIPTION_LENGTH),
+      });
     } catch (err: unknown) {
       alert((err as Error).message || "AI improvement failed.");
     } finally {
@@ -121,12 +128,12 @@ export function ExperienceForm() {
 
   const updateExperience = (
     id: string,
-    updates: Partial<ResumeData["experience"][0]>
+    updates: Partial<ResumeData["experience"][0]>,
   ) => {
     setData({
       ...data,
       experience: experience.map((exp) =>
-        exp.id === id ? { ...exp, ...updates } : exp
+        exp.id === id ? { ...exp, ...updates } : exp,
       ),
     });
   };
@@ -229,7 +236,7 @@ export function ExperienceForm() {
                     updateExperience(exp.id, { position: e.target.value })
                   }
                   placeholder="Senior Software Engineer"
-                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                 />
               </div>
 
@@ -243,7 +250,7 @@ export function ExperienceForm() {
                     updateExperience(exp.id, { company: e.target.value })
                   }
                   placeholder="Tech Corp Inc."
-                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                 />
               </div>
 
@@ -257,7 +264,7 @@ export function ExperienceForm() {
                     updateExperience(exp.id, { location: e.target.value })
                   }
                   placeholder="New York, NY"
-                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                 />
               </div>
 
@@ -275,12 +282,16 @@ export function ExperienceForm() {
                           [exp.id]: "End date cannot be before start date.",
                         }));
                       } else {
-                        setDateErrors((prev) => { const next = { ...prev }; delete next[exp.id]; return next; });
+                        setDateErrors((prev) => {
+                          const next = { ...prev };
+                          delete next[exp.id];
+                          return next;
+                        });
                       }
                       updateExperience(exp.id, { startDate: newStart });
                     }}
                     required
-                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                   />
                 </div>
                 <div>
@@ -296,11 +307,15 @@ export function ExperienceForm() {
                         }));
                         return; // block storing an invalid end date
                       }
-                      setDateErrors((prev) => { const next = { ...prev }; delete next[exp.id]; return next; });
+                      setDateErrors((prev) => {
+                        const next = { ...prev };
+                        delete next[exp.id];
+                        return next;
+                      });
                       updateExperience(exp.id, { endDate: newEnd });
                     }}
                     disabled={exp.current}
-                    className={`w-full border bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150 disabled:opacity-50 ${
+                    className={`w-full border bg-transparent px-3 py-2 focus:border-black  transition-all duration-150 disabled:opacity-50 ${
                       dateErrors[exp.id] ? "border-red-500" : "border-gray-400"
                     }`}
                   />
@@ -340,7 +355,14 @@ export function ExperienceForm() {
                   <label className="label-mono">DESCRIPTION</label>
                   <button
                     type="button"
-                    onClick={() => handleImproveDescription(exp.id, exp.description, exp.position, exp.company)}
+                    onClick={() =>
+                      handleImproveDescription(
+                        exp.id,
+                        exp.description,
+                        exp.position,
+                        exp.company,
+                      )
+                    }
                     disabled={!exp.description.trim() || !!improvingDescription}
                     className="label-mono text-[10px] border border-black px-2 py-0.5 hover:bg-black hover:text-white transition-colors duration-150 disabled:opacity-30 disabled:cursor-not-allowed"
                   >
@@ -357,7 +379,7 @@ export function ExperienceForm() {
                   placeholder="Brief description of your role and responsibilities..."
                   rows={3}
                   maxLength={MAX_DESCRIPTION_LENGTH}
-                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150 resize-none"
+                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150 resize-none"
                 />
                 <span className="label-mono text-gray-400 text-[10px] block mt-1 text-right">
                   {exp.description.length}/{MAX_DESCRIPTION_LENGTH}
@@ -392,11 +414,17 @@ export function ExperienceForm() {
                                   updateHighlight(exp.id, idx, e.target.value)
                                 }
                                 placeholder="Increased revenue by 40%..."
-                                className="flex-1 border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                                className="flex-1 border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                               />
                               <button
                                 onClick={() =>
-                                  handleImproveBullet(exp.id, idx, highlight, exp.position, exp.company)
+                                  handleImproveBullet(
+                                    exp.id,
+                                    idx,
+                                    highlight,
+                                    exp.position,
+                                    exp.company,
+                                  )
                                 }
                                 disabled={isImproving || !highlight.trim()}
                                 title="Improve with AI"
diff --git a/src/components/builder/forms/languages-form.tsx b/src/components/builder/forms/languages-form.tsx
index f0132ec..f391214 100644
--- a/src/components/builder/forms/languages-form.tsx
+++ b/src/components/builder/forms/languages-form.tsx
@@ -44,13 +44,11 @@ export function LanguagesForm() {
 
   const updateLanguage = (
     id: string,
-    updates: Partial<ResumeData["languages"][0]>
+    updates: Partial<ResumeData["languages"][0]>,
   ) => {
     setData({
       ...data,
-      languages: languages.map((l) =>
-        l.id === id ? { ...l, ...updates } : l
-      ),
+      languages: languages.map((l) => (l.id === id ? { ...l, ...updates } : l)),
     });
   };
 
@@ -84,7 +82,7 @@ export function LanguagesForm() {
                     updateLanguage(lang.id, { language: e.target.value })
                   }
                   placeholder="English"
-                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                 />
               </div>
               <div>
@@ -98,7 +96,7 @@ export function LanguagesForm() {
                         .value as ResumeData["languages"][0]["proficiency"],
                     })
                   }
-                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                 >
                   {PROFICIENCY_LEVELS.map((level) => (
                     <option key={level} value={level}>
diff --git a/src/components/builder/forms/personal-info-form.tsx b/src/components/builder/forms/personal-info-form.tsx
index 03e0bb9..f500599 100644
--- a/src/components/builder/forms/personal-info-form.tsx
+++ b/src/components/builder/forms/personal-info-form.tsx
@@ -10,10 +10,7 @@ import {
   importFromGitHub,
   type SocialImportResult,
 } from "@/actions/import";
-import {
-  getForgProductOptions,
-  importFromForg,
-} from "@/actions/forg";
+import { getForgProductOptions, importFromForg } from "@/actions/forg";
 import type { ForgProductOption } from "@/actions/import";
 import { parseLinkedInZip } from "@/lib/linkedin-zip-parser";
 import type { ResumeData } from "@/db/schema";
@@ -78,10 +75,21 @@ export function PersonalInfoForm() {
   const [forgOptions, setForgOptions] = useState<ForgProductOption[]>([]);
   const [selectedForgProductId, setSelectedForgProductId] = useState("");
   const [importStatus, setImportStatus] = useState<string>("");
-  const [previewDraft, setPreviewDraft] = useState<SocialImportResult | null>(null);
-  const [previewSelection, setPreviewSelection] = useState<ImportSelection>(createEmptySelection());
+  const [previewDraft, setPreviewDraft] = useState<SocialImportResult | null>(
+    null,
+  );
+  const [previewSelection, setPreviewSelection] = useState<ImportSelection>(
+    createEmptySelection(),
+  );
 
-  const trackImport = (eventName: typeof USAGE_EVENTS.IMPORT_STARTED | typeof USAGE_EVENTS.IMPORT_PREVIEW_READY | typeof USAGE_EVENTS.IMPORT_APPLIED, source: string, extra: Record<string, unknown> = {}) => {
+  const trackImport = (
+    eventName:
+      | typeof USAGE_EVENTS.IMPORT_STARTED
+      | typeof USAGE_EVENTS.IMPORT_PREVIEW_READY
+      | typeof USAGE_EVENTS.IMPORT_APPLIED,
+    source: string,
+    extra: Record<string, unknown> = {},
+  ) => {
     void trackUsageEvent(eventName, {
       source,
       resumeId: resumeId ?? "guest",
@@ -91,7 +99,7 @@ export function PersonalInfoForm() {
 
   const mergeImportedSkills = (
     currentSkills: ResumeData["skills"],
-    importedSkills: Array<{ category: string; items: string[] }>
+    importedSkills: Array<{ category: string; items: string[] }>,
   ): ResumeData["skills"] => {
     const next = [...currentSkills];
 
@@ -99,13 +107,19 @@ export function PersonalInfoForm() {
       if (!imported.items.length) continue;
 
       const matchIndex = next.findIndex(
-        (skill) => skill.category.trim().toLowerCase() === imported.category.trim().toLowerCase()
+        (skill) =>
+          skill.category.trim().toLowerCase() ===
+          imported.category.trim().toLowerCase(),
       );
 
       if (matchIndex >= 0) {
         const mergedItems = [...next[matchIndex].items];
         for (const item of imported.items) {
-          if (!mergedItems.some((existing) => existing.toLowerCase() === item.toLowerCase())) {
+          if (
+            !mergedItems.some(
+              (existing) => existing.toLowerCase() === item.toLowerCase(),
+            )
+          ) {
             mergedItems.push(item);
           }
         }
@@ -127,7 +141,7 @@ export function PersonalInfoForm() {
   };
 
   const mapImportedSkills = (
-    importedSkills: Array<{ category: string; items: string[] }>
+    importedSkills: Array<{ category: string; items: string[] }>,
   ): ResumeData["skills"] =>
     importedSkills
       .filter((skill) => skill.items.length > 0)
@@ -147,17 +161,23 @@ export function PersonalInfoForm() {
       websiteUrl: string;
       technologies: string[];
       highlights: string[];
-    }>
+    }>,
   ): ResumeData["projects"] => {
     const existingProjectKeys = new Set(
       currentProjects
-        .map((project) => (project.githubUrl || project.url || project.name).trim().toLowerCase())
-        .filter(Boolean)
+        .map((project) =>
+          (project.githubUrl || project.url || project.name)
+            .trim()
+            .toLowerCase(),
+        )
+        .filter(Boolean),
     );
 
     const newProjects = importedProjects
       .filter((project) => {
-        const key = (project.githubUrl || project.url || project.name).trim().toLowerCase();
+        const key = (project.githubUrl || project.url || project.name)
+          .trim()
+          .toLowerCase();
         return key ? !existingProjectKeys.has(key) : true;
       })
       .map((project) => ({
@@ -183,7 +203,7 @@ export function PersonalInfoForm() {
       websiteUrl: string;
       technologies: string[];
       highlights: string[];
-    }>
+    }>,
   ): ResumeData["projects"] =>
     importedProjects.map((project) => ({
       id: crypto.randomUUID(),
@@ -198,17 +218,20 @@ export function PersonalInfoForm() {
 
   const mergeImportedExperience = (
     currentExperience: ResumeData["experience"],
-    importedExperience: SocialImportResult["experience"]
+    importedExperience: SocialImportResult["experience"],
   ): ResumeData["experience"] => {
     const existingKeys = new Set(
       currentExperience
-        .map((exp) => `${exp.company}|${exp.position}|${exp.startDate}`.toLowerCase())
-        .filter(Boolean)
+        .map((exp) =>
+          `${exp.company}|${exp.position}|${exp.startDate}`.toLowerCase(),
+        )
+        .filter(Boolean),
     );
 
     const next = [...currentExperience];
     for (const exp of importedExperience) {
-      const key = `${exp.company}|${exp.position}|${exp.startDate}`.toLowerCase();
+      const key =
+        `${exp.company}|${exp.position}|${exp.startDate}`.toLowerCase();
       if (existingKeys.has(key)) continue;
       next.push({
         id: crypto.randomUUID(),
@@ -227,7 +250,7 @@ export function PersonalInfoForm() {
   };
 
   const mapImportedExperience = (
-    importedExperience: SocialImportResult["experience"]
+    importedExperience: SocialImportResult["experience"],
   ): ResumeData["experience"] =>
     importedExperience.map((exp) => ({
       id: crypto.randomUUID(),
@@ -243,12 +266,12 @@ export function PersonalInfoForm() {
 
   const mergeImportedCertifications = (
     currentCertifications: ResumeData["certifications"],
-    importedCertifications: SocialImportResult["certifications"]
+    importedCertifications: SocialImportResult["certifications"],
   ): ResumeData["certifications"] => {
     const existingKeys = new Set(
       currentCertifications
         .map((cert) => `${cert.name}|${cert.issuer}|${cert.date}`.toLowerCase())
-        .filter(Boolean)
+        .filter(Boolean),
     );
 
     const next = [...currentCertifications];
@@ -268,7 +291,7 @@ export function PersonalInfoForm() {
   };
 
   const mapImportedCertifications = (
-    importedCertifications: SocialImportResult["certifications"]
+    importedCertifications: SocialImportResult["certifications"],
   ): ResumeData["certifications"] =>
     importedCertifications.map((cert) => ({
       id: crypto.randomUUID(),
@@ -300,11 +323,13 @@ export function PersonalInfoForm() {
     switch (field) {
       case "fullName":
         if (!value.trim()) error = "Name is required";
-        else if (value.length > MAX_NAME_LENGTH) error = `Max ${MAX_NAME_LENGTH} characters`;
+        else if (value.length > MAX_NAME_LENGTH)
+          error = `Max ${MAX_NAME_LENGTH} characters`;
         break;
       case "email":
         if (!value.trim()) error = "Email is required";
-        else if (!EMAIL_REGEX.test(value)) error = "Enter a valid email address";
+        else if (!EMAIL_REGEX.test(value))
+          error = "Enter a valid email address";
         break;
       case "phone":
         if (value && !PHONE_REGEX.test(value))
@@ -355,7 +380,9 @@ export function PersonalInfoForm() {
       const { url } = await res.json();
       updateField("avatarUrl", url);
     } catch (err: unknown) {
-      alert((err as Error).message || "Failed to upload image. Please try again.");
+      alert(
+        (err as Error).message || "Failed to upload image. Please try again.",
+      );
     } finally {
       setIsUploading(false);
       if (fileInputRef.current) fileInputRef.current.value = "";
@@ -386,7 +413,9 @@ export function PersonalInfoForm() {
     }
   };
 
-  const buildInitialSelection = (draft: SocialImportResult): ImportSelection => {
+  const buildInitialSelection = (
+    draft: SocialImportResult,
+  ): ImportSelection => {
     const next = createEmptySelection();
 
     const personalKeys = Object.keys(next.personal) as PersonalFieldKey[];
@@ -427,7 +456,9 @@ export function PersonalInfoForm() {
       trackImport(USAGE_EVENTS.IMPORT_PREVIEW_READY, "github", {
         username: imported.username,
       });
-      setImportStatus(t("previewReady", { source: "GitHub", username: imported.username }));
+      setImportStatus(
+        t("previewReady", { source: "GitHub", username: imported.username }),
+      );
     } catch (err: unknown) {
       setImportStatus((err as Error).message || t("githubFailed"));
     } finally {
@@ -435,7 +466,9 @@ export function PersonalInfoForm() {
     }
   };
 
-  const handleLinkedInZipImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleLinkedInZipImport = async (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ) => {
     const file = e.target.files?.[0];
     if (!file) return;
 
@@ -454,7 +487,9 @@ export function PersonalInfoForm() {
       trackImport(USAGE_EVENTS.IMPORT_PREVIEW_READY, "linkedin_zip", {
         username: imported.username,
       });
-      setImportStatus(t("previewReady", { source: "LinkedIn", username: imported.username }));
+      setImportStatus(
+        t("previewReady", { source: "LinkedIn", username: imported.username }),
+      );
     } catch (err: unknown) {
       setImportStatus((err as Error).message || t("linkedinZipFailed"));
     } finally {
@@ -484,7 +519,9 @@ export function PersonalInfoForm() {
       trackImport(USAGE_EVENTS.IMPORT_PREVIEW_READY, "behance", {
         username: imported.username,
       });
-      setImportStatus(t("previewReady", { source: "Behance", username: imported.username }));
+      setImportStatus(
+        t("previewReady", { source: "Behance", username: imported.username }),
+      );
     } catch (err: unknown) {
       setImportStatus((err as Error).message || t("behanceFailed"));
     } finally {
@@ -512,10 +549,15 @@ export function PersonalInfoForm() {
       if (!resOptions.success) throw new Error(resOptions.error);
       const optionsResult = resOptions.data;
 
-      if (optionsResult.target === "profile" && optionsResult.options.length > 1) {
+      if (
+        optionsResult.target === "profile" &&
+        optionsResult.options.length > 1
+      ) {
         setForgOptions(optionsResult.options);
         setSelectedForgProductId(optionsResult.options[0].id);
-        setImportStatus(t("forgMultiFound", { username: optionsResult.username }));
+        setImportStatus(
+          t("forgMultiFound", { username: optionsResult.username }),
+        );
         return;
       }
 
@@ -527,7 +569,9 @@ export function PersonalInfoForm() {
       trackImport(USAGE_EVENTS.IMPORT_PREVIEW_READY, "forg", {
         username: imported.username,
       });
-      setImportStatus(t("previewReady", { source: "Forg", username: imported.username }));
+      setImportStatus(
+        t("previewReady", { source: "Forg", username: imported.username }),
+      );
     } catch (err: unknown) {
       setImportStatus((err as Error).message || t("forgFailed"));
     } finally {
@@ -544,7 +588,10 @@ export function PersonalInfoForm() {
       selectedProductId: selectedForgProductId,
     });
     try {
-      const result = await importFromForg(forgInput.trim(), selectedForgProductId);
+      const result = await importFromForg(
+        forgInput.trim(),
+        selectedForgProductId,
+      );
       if (!result.success) throw new Error(result.error);
       const imported = result.data;
       openPreview(imported);
@@ -552,7 +599,9 @@ export function PersonalInfoForm() {
         username: imported.username,
         selectedProductId: selectedForgProductId,
       });
-      setImportStatus(t("previewReady", { source: "Forg", username: imported.username }));
+      setImportStatus(
+        t("previewReady", { source: "Forg", username: imported.username }),
+      );
       setForgOptions([]);
       setSelectedForgProductId("");
     } catch (err: unknown) {
@@ -571,7 +620,9 @@ export function PersonalInfoForm() {
       ...data.personalInfo,
     };
 
-    const selectedKeys = Object.keys(previewSelection.personal) as PersonalFieldKey[];
+    const selectedKeys = Object.keys(
+      previewSelection.personal,
+    ) as PersonalFieldKey[];
     for (const key of selectedKeys) {
       if (!previewSelection.personal[key]) continue;
       const incoming = (previewDraft.personalInfo[key] ?? "").toString().trim();
@@ -600,7 +651,10 @@ export function PersonalInfoForm() {
     const nextCertifications = previewSelection.certifications
       ? previewSelection.certificationsMode === "replace"
         ? mapImportedCertifications(previewDraft.certifications)
-        : mergeImportedCertifications(data.certifications, previewDraft.certifications)
+        : mergeImportedCertifications(
+            data.certifications,
+            previewDraft.certifications,
+          )
       : data.certifications;
 
     setData({
@@ -612,10 +666,12 @@ export function PersonalInfoForm() {
       certifications: nextCertifications,
     });
 
-    setImportStatus(t("mergedSelected", {
-      source: previewDraft.source.toUpperCase(),
-      username: previewDraft.username,
-    }));
+    setImportStatus(
+      t("mergedSelected", {
+        source: previewDraft.source.toUpperCase(),
+        username: previewDraft.username,
+      }),
+    );
     trackImport(USAGE_EVENTS.IMPORT_APPLIED, previewDraft.source, {
       username: previewDraft.username,
     });
@@ -625,9 +681,10 @@ export function PersonalInfoForm() {
 
   /** Helper: input class with error state */
   const inputClass = (field: string) =>
-    `w-full border bg-transparent px-4 py-3 transition-all duration-150 ${errors[field]
-      ? "border-red-500 focus:bg-red-50 focus:text-red-900"
-      : "border-black focus:bg-black focus:text-white"
+    `w-full border bg-transparent px-4 py-3 transition-all duration-150 ${
+      errors[field]
+        ? "border-red-500 focus:bg-red-50 focus:text-red-900"
+        : "border-black focus:border-black"
     }`;
 
   return (
@@ -643,25 +700,32 @@ export function PersonalInfoForm() {
       </div>
 
       <div className="border-t border-black pt-6 space-y-6">
-
         {/* ── Import Profile ─────────────────────────────── */}
         <div className="border border-dashed border-gray-300 p-4 space-y-4">
           <div>
-            <span className="label-mono block mb-1">{t("importSectionTitle")}</span>
+            <span className="label-mono block mb-1">
+              {t("importSectionTitle")}
+            </span>
             <p className="text-xs text-gray-500">{t("importSectionHint")}</p>
           </div>
 
           {/* LinkedIn ZIP */}
           <div className="flex items-center gap-3">
-            <span className="label-mono w-20 shrink-0 text-[11px]">LINKEDIN</span>
+            <span className="label-mono w-20 shrink-0 text-[11px]">
+              LINKEDIN
+            </span>
             <button
               onClick={() => linkedinZipRef.current?.click()}
               disabled={isParsingLinkedinZip}
               className="border border-gray-400 px-3 py-1.5 text-xs font-bold uppercase tracking-wider hover:border-black hover:bg-black hover:text-white transition-all duration-150 disabled:opacity-40"
             >
-              {isParsingLinkedinZip ? t("linkedinZipParsing") : t("linkedinZipButton")}
+              {isParsingLinkedinZip
+                ? t("linkedinZipParsing")
+                : t("linkedinZipButton")}
             </button>
-            <span className="text-[10px] text-gray-400 hidden sm:block">{t("linkedinZipHint")}</span>
+            <span className="text-[10px] text-gray-400 hidden sm:block">
+              {t("linkedinZipHint")}
+            </span>
           </div>
           <input
             ref={linkedinZipRef}
@@ -680,7 +744,7 @@ export function PersonalInfoForm() {
               value={githubInput}
               onChange={(e) => setGithubInput(e.target.value)}
               placeholder={t("githubPlaceholder")}
-              className="flex-1 min-w-0 border border-black bg-transparent px-3 py-1.5 text-sm focus:bg-black focus:text-white transition-all duration-150"
+              className="flex-1 min-w-0 border border-black bg-transparent px-3 py-1.5 text-sm focus:border-black transition-all duration-150"
             />
             <button
               onClick={handleImportGithub}
@@ -693,13 +757,15 @@ export function PersonalInfoForm() {
 
           {/* Behance */}
           <div className="flex items-center gap-3">
-            <span className="label-mono w-20 shrink-0 text-[11px]">BEHANCE</span>
+            <span className="label-mono w-20 shrink-0 text-[11px]">
+              BEHANCE
+            </span>
             <input
               type="text"
               value={behanceInput}
               onChange={(e) => setBehanceInput(e.target.value)}
               placeholder={t("behancePlaceholder")}
-              className="flex-1 min-w-0 border border-black bg-transparent px-3 py-1.5 text-sm focus:bg-black focus:text-white transition-all duration-150"
+              className="flex-1 min-w-0 border border-black bg-transparent px-3 py-1.5 text-sm focus:border-black transition-all duration-150"
             />
             <button
               onClick={handleImportBehance}
@@ -724,7 +790,7 @@ export function PersonalInfoForm() {
                 }
               }}
               placeholder={t("forgPlaceholder")}
-              className="flex-1 min-w-0 border border-black bg-transparent px-3 py-1.5 text-sm focus:bg-black focus:text-white transition-all duration-150"
+              className="flex-1 min-w-0 border border-black bg-transparent px-3 py-1.5 text-sm focus:border-black transition-all duration-150"
             />
             <button
               onClick={handleImportForg}
@@ -735,9 +801,7 @@ export function PersonalInfoForm() {
             </button>
           </div>
 
-          <p className="text-[11px] text-amber-700">
-            {t("forgDevNotice")}
-          </p>
+          <p className="text-[11px] text-amber-700">{t("forgDevNotice")}</p>
 
           {forgOptions.length > 1 && (
             <div className="flex flex-col gap-2 border border-gray-300 p-3 bg-gray-50">
@@ -765,9 +829,7 @@ export function PersonalInfoForm() {
                   {isImportingForg ? t("importing") : t("forgUseSelected")}
                 </button>
               </div>
-              <p className="text-[11px] text-gray-500">
-                {t("forgPickerHint")}
-              </p>
+              <p className="text-[11px] text-gray-500">{t("forgPickerHint")}</p>
             </div>
           )}
 
@@ -811,12 +873,17 @@ export function PersonalInfoForm() {
               <button
                 onClick={() => fileInputRef.current?.click()}
                 disabled={isUploading}
-                className={`border border-black px-4 py-2 text-xs font-bold uppercase tracking-wider transition-colors duration-150 ${isUploading
-                  ? "bg-gray-200 text-gray-500 cursor-not-allowed"
-                  : "hover:bg-black hover:text-white"
-                  }`}
+                className={`border border-black px-4 py-2 text-xs font-bold uppercase tracking-wider transition-colors duration-150 ${
+                  isUploading
+                    ? "bg-gray-200 text-gray-500 cursor-not-allowed"
+                    : "hover:bg-black hover:text-white"
+                }`}
               >
-                {isUploading ? "Uploading..." : personalInfo.avatarUrl ? "Change Photo" : "Upload Photo"}
+                {isUploading
+                  ? "Uploading..."
+                  : personalInfo.avatarUrl
+                    ? "Change Photo"
+                    : "Upload Photo"}
               </button>
               <input
                 ref={fileInputRef}
@@ -847,7 +914,9 @@ export function PersonalInfoForm() {
           />
           <div className="flex justify-between mt-1">
             {errors.fullName ? (
-              <span className="text-xs text-red-500 font-medium">{errors.fullName}</span>
+              <span className="text-xs text-red-500 font-medium">
+                {errors.fullName}
+              </span>
             ) : (
               <span />
             )}
@@ -869,7 +938,9 @@ export function PersonalInfoForm() {
             className={inputClass("email")}
           />
           {errors.email && (
-            <span className="text-xs text-red-500 font-medium mt-1 block">{errors.email}</span>
+            <span className="text-xs text-red-500 font-medium mt-1 block">
+              {errors.email}
+            </span>
           )}
         </div>
 
@@ -891,7 +962,9 @@ export function PersonalInfoForm() {
             className={inputClass("phone")}
           />
           {errors.phone ? (
-            <span className="text-xs text-red-500 font-medium mt-1 block">{errors.phone}</span>
+            <span className="text-xs text-red-500 font-medium mt-1 block">
+              {errors.phone}
+            </span>
           ) : (
             <span className="text-[10px] text-gray-400 mt-1 block">
               Digits, spaces, +, -, or parentheses
@@ -908,7 +981,7 @@ export function PersonalInfoForm() {
             onChange={(e) => updateField("location", e.target.value)}
             placeholder="San Francisco, CA"
             maxLength={100}
-            className="w-full border border-black bg-transparent px-4 py-3 focus:bg-black focus:text-white transition-all duration-150"
+            className="w-full border border-black bg-transparent px-4 py-3 focus:border-black transition-all duration-150"
           />
         </div>
 
@@ -920,21 +993,25 @@ export function PersonalInfoForm() {
             value={personalInfo.website || ""}
             onChange={(e) => updateField("website", e.target.value)}
             placeholder="https://example.com"
-            className="w-full border border-black bg-transparent px-4 py-3 focus:bg-black focus:text-white transition-all duration-150"
+            className="w-full border border-black bg-transparent px-4 py-3 focus:border-black transition-all duration-150"
           />
         </div>
 
         {/* LinkedIn */}
         {/* LinkedIn URL — shown in CV header */}
         <div>
-          <label className="label-mono block mb-1">{t("linkedinUrlLabel")}</label>
-          <p className="text-[10px] text-gray-400 mb-2">{t("linkedinUrlHint")}</p>
+          <label className="label-mono block mb-1">
+            {t("linkedinUrlLabel")}
+          </label>
+          <p className="text-[10px] text-gray-400 mb-2">
+            {t("linkedinUrlHint")}
+          </p>
           <input
             type="text"
             value={personalInfo.linkedin || ""}
             onChange={(e) => updateField("linkedin", e.target.value)}
             placeholder={t("linkedinPlaceholder")}
-            className="w-full border border-black bg-transparent px-4 py-3 focus:bg-black focus:text-white transition-all duration-150"
+            className="w-full border border-black bg-transparent px-4 py-3 focus:border-black transition-all duration-150"
           />
         </div>
 
@@ -948,7 +1025,7 @@ export function PersonalInfoForm() {
             value={personalInfo.github || ""}
             onChange={(e) => updateField("github", e.target.value)}
             placeholder={t("githubPlaceholder")}
-            className="w-full border border-black bg-transparent px-4 py-3 focus:bg-black focus:text-white transition-all duration-150"
+            className="w-full border border-black bg-transparent px-4 py-3 focus:border-black transition-all duration-150"
           />
         </div>
 
@@ -974,10 +1051,11 @@ export function PersonalInfoForm() {
             placeholder="A brief professional summary or objective statement..."
             rows={6}
             maxLength={MAX_SUMMARY_LENGTH}
-            className="w-full border border-black bg-transparent px-4 py-3 focus:bg-black focus:text-white transition-all duration-150 resize-none"
+            className="w-full border border-black bg-transparent px-4 py-3 focus:border-black transition-all duration-150 resize-none"
           />
           <span className="label-mono text-gray-500 text-xs block mt-2">
-            {personalInfo.summary?.length || 0} / {MAX_SUMMARY_LENGTH} characters
+            {personalInfo.summary?.length || 0} / {MAX_SUMMARY_LENGTH}{" "}
+            characters
           </span>
         </div>
 
@@ -986,10 +1064,12 @@ export function PersonalInfoForm() {
           <input
             type="text"
             value={personalInfo.bulletSymbol || "•"}
-            onChange={(e) => updateField("bulletSymbol", e.target.value.slice(0, 3))}
+            onChange={(e) =>
+              updateField("bulletSymbol", e.target.value.slice(0, 3))
+            }
             placeholder="•"
             maxLength={3}
-            className="w-full border border-black bg-transparent px-4 py-3 focus:bg-black focus:text-white transition-all duration-150"
+            className="w-full border border-black bg-transparent px-4 py-3 focus:border-black transition-all duration-150"
           />
           <span className="text-[10px] text-gray-500 mt-1 block">
             Use any symbol for CV bullets, for example: •, -, ▪, or →
diff --git a/src/components/builder/forms/projects-form.tsx b/src/components/builder/forms/projects-form.tsx
index c8ad330..ca78c07 100644
--- a/src/components/builder/forms/projects-form.tsx
+++ b/src/components/builder/forms/projects-form.tsx
@@ -280,7 +280,7 @@ export function ProjectsForm() {
                     updateProject(project.id, { name: e.target.value })
                   }
                   placeholder="E-Commerce Platform"
-                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                 />
               </div>
 
@@ -294,7 +294,7 @@ export function ProjectsForm() {
                       updateProject(project.id, { url: e.target.value })
                     }
                     placeholder="https://myproject.com"
-                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                   />
                 </div>
                 <div>
@@ -306,7 +306,7 @@ export function ProjectsForm() {
                       updateProject(project.id, { githubUrl: e.target.value })
                     }
                     placeholder="https://github.com/you/repo"
-                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                   />
                 </div>
                 <div>
@@ -318,7 +318,7 @@ export function ProjectsForm() {
                       updateProject(project.id, { websiteUrl: e.target.value })
                     }
                     placeholder="https://myproject.vercel.app"
-                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                    className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                   />
                 </div>
               </div>
@@ -355,7 +355,7 @@ export function ProjectsForm() {
                   placeholder="A full-stack e-commerce platform built with modern technologies..."
                   rows={3}
                   maxLength={MAX_DESCRIPTION_LENGTH}
-                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150 resize-none"
+                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150 resize-none"
                 />
                 <span className="label-mono text-gray-400 text-[10px] block mt-1 text-right">
                   {project.description.length}/{MAX_DESCRIPTION_LENGTH}
@@ -430,7 +430,7 @@ export function ProjectsForm() {
                                   )
                                 }
                                 placeholder="Built scalable microservices architecture..."
-                                className="flex-1 border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                                className="flex-1 border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                               />
                               <button
                                 onClick={() =>
diff --git a/src/components/builder/forms/skills-form.tsx b/src/components/builder/forms/skills-form.tsx
index dcce036..bedde99 100644
--- a/src/components/builder/forms/skills-form.tsx
+++ b/src/components/builder/forms/skills-form.tsx
@@ -45,11 +45,13 @@ export function SkillsForm() {
 
   const updateCategory = (
     id: string,
-    updates: Partial<ResumeData["skills"][0]>
+    updates: Partial<ResumeData["skills"][0]>,
   ) => {
     setData({
       ...data,
-      skills: skills.map((cat) => (cat.id === id ? { ...cat, ...updates } : cat)),
+      skills: skills.map((cat) =>
+        cat.id === id ? { ...cat, ...updates } : cat,
+      ),
     });
   };
 
@@ -73,7 +75,7 @@ export function SkillsForm() {
 
   const handleInputKeyDown = (
     e: React.KeyboardEvent<HTMLInputElement>,
-    categoryId: string
+    categoryId: string,
   ) => {
     if (e.key === "Enter" || e.key === ",") {
       e.preventDefault();
@@ -146,7 +148,7 @@ export function SkillsForm() {
                     updateCategory(category.id, { category: e.target.value })
                   }
                   placeholder="Programming Languages"
-                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
+                  className="w-full border border-gray-400 bg-transparent px-3 py-2 focus:border-black transition-all duration-150"
                 />
               </div>
 
diff --git a/src/components/builder/resume-score.tsx b/src/components/builder/resume-score.tsx
index 3ed2113..5dd78b1 100644
--- a/src/components/builder/resume-score.tsx
+++ b/src/components/builder/resume-score.tsx
@@ -3,20 +3,31 @@
 import { useResumeStore } from "@/store/resume-store";
 import type { ResumeData } from "@/db/schema";
 
-interface Check {
+export interface Check {
   label: string;
   passed: boolean;
   weight: number;
 }
 
-function scoreResume(data: ResumeData): { total: number; checks: Check[] } {
+export function scoreResume(data: ResumeData): {
+  total: number;
+  checks: Check[];
+} {
   const p = data.personalInfo;
 
   const checks: Check[] = [
     { label: "Full name", passed: p.fullName.trim().length > 0, weight: 10 },
     { label: "Email address", passed: p.email.trim().length > 0, weight: 10 },
-    { label: "Phone number", passed: (p.phone ?? "").trim().length > 0, weight: 5 },
-    { label: "Location", passed: (p.location ?? "").trim().length > 0, weight: 5 },
+    {
+      label: "Phone number",
+      passed: (p.phone ?? "").trim().length > 0,
+      weight: 5,
+    },
+    {
+      label: "Location",
+      passed: (p.location ?? "").trim().length > 0,
+      weight: 5,
+    },
     {
       label: "Professional summary (50+ chars)",
       passed: (p.summary ?? "").trim().length >= 50,
@@ -62,7 +73,9 @@ function scoreResume(data: ResumeData): { total: number; checks: Check[] } {
       label: "Experience highlights added",
       passed:
         data.experience.length > 0 &&
-        data.experience.some((e) => e.highlights.filter((h) => h.trim()).length > 0),
+        data.experience.some(
+          (e) => e.highlights.filter((h) => h.trim()).length > 0,
+        ),
       weight: 5,
     },
   ];
@@ -80,12 +93,23 @@ function ScoreRing({ score }: { score: number }) {
   const offset = circumference - (score / 100) * circumference;
 
   const color =
-    score >= 80 ? "text-green-600" : score >= 50 ? "text-yellow-500" : "text-red-500";
+    score >= 80
+      ? "text-green-600"
+      : score >= 50
+        ? "text-yellow-500"
+        : "text-red-500";
 
   return (
     <div className="relative w-28 h-28">
       <svg className="w-full h-full -rotate-90" viewBox="0 0 100 100">
-        <circle cx="50" cy="50" r={r} fill="none" stroke="#e5e7eb" strokeWidth="8" />
+        <circle
+          cx="50"
+          cy="50"
+          r={r}
+          fill="none"
+          stroke="#e5e7eb"
+          strokeWidth="8"
+        />
         <circle
           cx="50"
           cy="50"
@@ -123,7 +147,9 @@ export function ResumeScorePanel() {
     <div className="max-w-3xl space-y-8">
       <div>
         <span className="label-mono block mb-4">ANALYSIS // SCORE</span>
-        <h2 className="text-3xl font-black tracking-tight mb-2">Resume Score</h2>
+        <h2 className="text-3xl font-black tracking-tight mb-2">
+          Resume Score
+        </h2>
         <p className="text-sm text-gray-600">
           How complete and competitive your resume is
         </p>
@@ -137,7 +163,8 @@ export function ResumeScorePanel() {
           </p>
           <p className="text-2xl font-black">{grade}</p>
           <p className="text-sm text-gray-500 mt-1">
-            {checks.filter((c) => c.passed).length} / {checks.length} checks passed
+            {checks.filter((c) => c.passed).length} / {checks.length} checks
+            passed
           </p>
         </div>
       </div>
@@ -149,7 +176,9 @@ export function ResumeScorePanel() {
             className="flex items-center justify-between px-4 py-3"
           >
             <div className="flex items-center gap-3">
-              <span className={`text-lg ${check.passed ? "text-green-600" : "text-gray-300"}`}>
+              <span
+                className={`text-lg ${check.passed ? "text-green-600" : "text-gray-300"}`}
+              >
                 {check.passed ? "✓" : "○"}
               </span>
               <span
diff --git a/src/components/pdf/ats-pdf.tsx b/src/components/pdf/ats-pdf.tsx
index 076ad6a..3bdda0e 100644
--- a/src/components/pdf/ats-pdf.tsx
+++ b/src/components/pdf/ats-pdf.tsx
@@ -11,208 +11,525 @@ import { ensureHref } from "@/lib/url-helpers";
 import { type PdfLabels, getPdfLabels, getDateLocale } from "@/lib/pdf-labels";
 import { getResumeBulletSymbol } from "@/lib/bullet-symbol";
 
+const s = StyleSheet.create({
+  page: {
+    backgroundColor: "#FFFFFF",
+    fontFamily: "Helvetica",
+    fontSize: 8,
+    paddingHorizontal: 40,
+    paddingVertical: 40,
+  },
+  /* Header — clean centered layout for standard ATS */
+  header: {
+    alignItems: "center",
+    marginBottom: 8,
+  },
+  name: {
+    fontSize: 18,
+    fontWeight: 900,
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+    marginBottom: 4,
+  },
+  contactRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    gap: 8,
+    fontSize: 8,
+    color: "#444444",
+  },
+  contactItem: {
+    fontSize: 8,
+    color: "#444444",
+    textDecoration: "none",
+  },
+  bulletSeparator: {
+    color: "#888888",
+  },
 
+  /* Section title — standard ATS format */
+  sectionTitle: {
+    fontSize: 9,
+    fontWeight: 900,
+    textTransform: "uppercase",
+    letterSpacing: 1,
+    marginTop: 10,
+    marginBottom: 6,
+    borderBottomWidth: 0.75,
+    borderBottomColor: "#111111",
+    paddingBottom: 2,
+  },
 
-const s = StyleSheet.create({
-  page: { backgroundColor: "#FFFFFF", fontFamily: "Helvetica", fontSize: 8, padding: 28 },
-  /* Header — single dense row */
-  headerRow: { flexDirection: "row", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 2 },
-  name: { fontSize: 16, fontWeight: 900, letterSpacing: -0.5 },
-  contactRow: { flexDirection: "row", flexWrap: "wrap", gap: 10 },
-  contactText: { fontSize: 7, color: "#666666" },
-  divider: { height: 0.5, backgroundColor: "#000000", marginVertical: 6 },
-  /* Summary — compact */
-  summary: { fontSize: 8, lineHeight: 1.4, color: "#555555", marginBottom: 6 },
-  /* Two-column layout */
-  columns: { flexDirection: "row", gap: 20 },
-  mainCol: { flex: 3 },
-  sideCol: { flex: 1, borderLeftWidth: 0.5, borderLeftColor: "#DDDDDD", paddingLeft: 14 },
-  /* Section */
-  sectionTitle: { fontSize: 8, fontWeight: 900, textTransform: "uppercase", letterSpacing: 2, marginBottom: 5, borderBottomWidth: 0.5, borderBottomColor: "#DDDDDD", paddingBottom: 3 },
-  /* Experience */
-  expItem: { marginBottom: 7 },
-  expTopRow: { flexDirection: "row", justifyContent: "space-between" },
-  expPosition: { fontSize: 9, fontWeight: 700 },
-  expDate: { fontSize: 7, color: "#999999" },
-  expCompany: { fontSize: 7, color: "#888888", marginBottom: 2 },
-  expDesc: { fontSize: 7.5, lineHeight: 1.4, color: "#555555", marginBottom: 2 },
-  bulletRow: { flexDirection: "row", marginBottom: 1 },
-  bulletDot: { width: 6, fontSize: 7, color: "#000000" },
-  bulletText: { flex: 1, fontSize: 7.5, lineHeight: 1.3, color: "#555555" },
-  /* Projects */
-  projItem: { marginBottom: 6 },
-  projName: { fontSize: 8, fontWeight: 700, marginBottom: 1 },
-  projTech: { fontSize: 6.5, color: "#AAAAAA", marginBottom: 2 },
-  projDesc: { fontSize: 7.5, lineHeight: 1.3, color: "#555555" },
-  /* Side sections */
-  skillCat: { marginBottom: 5 },
-  skillCatName: { fontSize: 7, fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 2 },
-  skillItems: { fontSize: 7, color: "#666666", lineHeight: 1.3 },
-  eduItem: { marginBottom: 5 },
-  eduDegree: { fontSize: 8, fontWeight: 700, marginBottom: 1 },
-  eduSchool: { fontSize: 7, color: "#666666", marginBottom: 1 },
-  eduDate: { fontSize: 6.5, color: "#999999" },
-  sectionGap: { marginTop: 10 },
+  /* Summary */
+  summaryText: {
+    fontSize: 8,
+    lineHeight: 1.4,
+    color: "#222222",
+  },
+
+  /* Experience & standard item layout */
+  itemContainer: {
+    marginBottom: 8,
+  },
+  rowBetween: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "baseline",
+    marginBottom: 2,
+  },
+  boldText: {
+    fontSize: 8.5,
+    fontWeight: 700,
+    color: "#111111",
+  },
+  italicText: {
+    fontSize: 8,
+    fontStyle: "italic",
+    color: "#444444",
+  },
+  dateText: {
+    fontSize: 8,
+    color: "#444444",
+  },
+  descriptionText: {
+    fontSize: 8,
+    lineHeight: 1.3,
+    color: "#222222",
+    marginBottom: 3,
+  },
+  bulletRow: {
+    flexDirection: "row",
+    marginBottom: 2,
+    paddingLeft: 8,
+  },
+  bulletDot: {
+    width: 8,
+    fontSize: 8,
+    color: "#111111",
+  },
+  bulletText: {
+    flex: 1,
+    fontSize: 8,
+    lineHeight: 1.3,
+    color: "#222222",
+  },
+
+  /* Skills */
+  skillsGrid: {
+    flexDirection: "column",
+    gap: 3,
+  },
+  skillsRow: {
+    flexDirection: "row",
+    fontSize: 8,
+    lineHeight: 1.3,
+  },
+  skillCategory: {
+    fontWeight: 700,
+    width: 100,
+    color: "#111111",
+  },
+  skillList: {
+    flex: 1,
+    color: "#222222",
+  },
+
+  /* Languages */
+  languagesList: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+    fontSize: 8,
+  },
 });
 
-interface PDFTemplateProps { data: ResumeData; fontFamily?: string; labels?: PdfLabels; dateLocale?: string }
+interface PDFTemplateProps {
+  data: ResumeData;
+  fontFamily?: string;
+  labels?: PdfLabels;
+  dateLocale?: string;
+}
+
+export function AtsPDF({
+  data,
+  fontFamily,
+  labels,
+  dateLocale,
+}: PDFTemplateProps) {
+  const {
+    personalInfo,
+    experience,
+    education,
+    skills,
+    projects,
+    certifications,
+    competitions = [],
+    languages,
+  } = data;
 
-export function AtsPDF({ data, fontFamily, labels, dateLocale }: PDFTemplateProps) {
-  const { personalInfo, experience, education, skills, projects, certifications, languages } = data;
   const bulletSymbol = getResumeBulletSymbol(data, "•");
+
   const completeEducation = education.filter(
-    (edu) => edu.institution.trim() && edu.degree.trim() && edu.field.trim() && edu.startDate.trim()
+    (edu) =>
+      edu.institution.trim() &&
+      edu.degree.trim() &&
+      edu.field.trim() &&
+      edu.startDate.trim(),
   );
+
   const l = labels ?? getPdfLabels("en");
   const dl = dateLocale ?? getDateLocale("en");
 
   const fmtDate = (d: string) => {
     if (!d) return "";
-    return new Date(d + "-01").toLocaleDateString(dl, { month: "short", year: "numeric" });
+    return new Date(d + "-01").toLocaleDateString(dl, {
+      month: "short",
+      year: "numeric",
+      timeZone: "UTC",
+    });
   };
-  const fmtRange = (st: string, en: string, c: boolean) => `${fmtDate(st)} – ${c ? l.present : fmtDate(en)}`;
+
+  const fmtRange = (st: string, en: string, c: boolean) =>
+    `${fmtDate(st)} – ${c ? l.present : fmtDate(en)}`;
 
   return (
     <Document>
-      <Page size="A4" style={{ ...s.page, fontFamily: fontFamily || "Helvetica" }}>
-        {/* Header row */}
-        <View style={s.headerRow}>
+      <Page
+        size="A4"
+        style={{ ...s.page, fontFamily: fontFamily || "Helvetica" }}
+      >
+        {/* Header */}
+        <View style={s.header}>
           <Text style={s.name}>{personalInfo.fullName || l.yourName}</Text>
           <View style={s.contactRow}>
-            {personalInfo.email && <Text style={s.contactText}>{personalInfo.email}</Text>}
-            {personalInfo.phone && <Text style={s.contactText}>{personalInfo.phone}</Text>}
-            {personalInfo.location && <Text style={s.contactText}>{personalInfo.location}</Text>}
-            {personalInfo.website && <Link src={ensureHref(personalInfo.website)} style={{ ...s.contactText, color: "#666666", textDecoration: "none" }}>{l.portfolio}</Link>}
-            {personalInfo.linkedin && <Link src={ensureHref(personalInfo.linkedin)} style={{ ...s.contactText, color: "#666666", textDecoration: "none" }}>LinkedIn</Link>}
-            {personalInfo.github && <Link src={ensureHref(personalInfo.github)} style={{ ...s.contactText, color: "#666666", textDecoration: "none" }}>GitHub</Link>}
+            {personalInfo.email && (
+              <Text style={s.contactItem}>{personalInfo.email}</Text>
+            )}
+            {personalInfo.email && personalInfo.phone && (
+              <Text style={s.bulletSeparator}>•</Text>
+            )}
+            {personalInfo.phone && (
+              <Text style={s.contactItem}>{personalInfo.phone}</Text>
+            )}
+            {personalInfo.phone && personalInfo.location && (
+              <Text style={s.bulletSeparator}>•</Text>
+            )}
+            {personalInfo.location && (
+              <Text style={s.contactItem}>{personalInfo.location}</Text>
+            )}
+            {personalInfo.location && personalInfo.website && (
+              <Text style={s.bulletSeparator}>•</Text>
+            )}
+            {personalInfo.website && (
+              <Link
+                src={ensureHref(personalInfo.website)}
+                style={s.contactItem}
+              >
+                {l.portfolio}
+              </Link>
+            )}
+            {(personalInfo.website || personalInfo.location) &&
+              personalInfo.linkedin && <Text style={s.bulletSeparator}>•</Text>}
+            {personalInfo.linkedin && (
+              <Link
+                src={ensureHref(personalInfo.linkedin)}
+                style={s.contactItem}
+              >
+                LinkedIn
+              </Link>
+            )}
+            {personalInfo.linkedin && personalInfo.github && (
+              <Text style={s.bulletSeparator}>•</Text>
+            )}
+            {personalInfo.github && (
+              <Link src={ensureHref(personalInfo.github)} style={s.contactItem}>
+                GitHub
+              </Link>
+            )}
           </View>
         </View>
-        <View style={s.divider} />
 
         {/* Summary */}
-        {personalInfo.summary && <Text style={s.summary}>{personalInfo.summary}</Text>}
-
-        {/* Two columns */}
-        <View style={s.columns}>
-          {/* Main column */}
-          <View style={s.mainCol}>
-            {/* Experience */}
-            {experience.length > 0 && (
-              <View>
-                <Text style={s.sectionTitle}>{l.experience}</Text>
-                {experience.map((exp) => (
-                  <View key={exp.id} style={s.expItem}>
-                    <View style={s.expTopRow}>
-                      <Text style={s.expPosition}>{exp.position}</Text>
-                      <Text style={s.expDate}>{fmtRange(exp.startDate, exp.endDate || "", exp.current)}</Text>
-                    </View>
-                    <Text style={s.expCompany}>{exp.company}{exp.location ? ` · ${exp.location}` : ""}</Text>
-                    {exp.description ? <Text style={s.expDesc}>{exp.description}</Text> : null}
-                    {exp.highlights.map((h, i) => (
-                      <View key={i} style={s.bulletRow}>
-                        <Text style={s.bulletDot}>{bulletSymbol}</Text>
-                        <Text style={s.bulletText}>{h}</Text>
-                      </View>
-                    ))}
+        {personalInfo.summary && (
+          <View>
+            <Text style={s.sectionTitle}>{l.summary}</Text>
+            <Text style={s.summaryText}>{personalInfo.summary}</Text>
+          </View>
+        )}
+
+        {/* Skills */}
+        {skills.length > 0 && (
+          <View>
+            <Text style={s.sectionTitle}>{l.skills}</Text>
+            <View style={s.skillsGrid}>
+              {skills.map((cat) => (
+                <View key={cat.id} style={s.skillsRow}>
+                  <Text style={s.skillCategory}>{cat.category}:</Text>
+                  <Text style={s.skillList}>{cat.items.join(", ")}</Text>
+                </View>
+              ))}
+            </View>
+          </View>
+        )}
+
+        {/* Experience */}
+        {experience.length > 0 && (
+          <View>
+            <Text style={s.sectionTitle}>{l.experience}</Text>
+            {experience.map((exp) => (
+              <View key={exp.id} style={s.itemContainer}>
+                <View style={s.rowBetween}>
+                  <Text style={s.boldText}>
+                    {exp.position}{" "}
+                    <Text style={{ fontWeight: 400, color: "#444444" }}>
+                      at {exp.company}
+                    </Text>
+                  </Text>
+                  <Text style={s.dateText}>
+                    {fmtRange(exp.startDate, exp.endDate || "", exp.current)}
+                  </Text>
+                </View>
+                {exp.location ? (
+                  <View style={{ marginBottom: 2 }}>
+                    <Text style={s.italicText}>{exp.location}</Text>
+                  </View>
+                ) : null}
+                {exp.description ? (
+                  <Text style={s.descriptionText}>{exp.description}</Text>
+                ) : null}
+                {exp.highlights.map((h, i) => (
+                  <View key={i} style={s.bulletRow}>
+                    <Text style={s.bulletDot}>{bulletSymbol}</Text>
+                    <Text style={s.bulletText}>{h}</Text>
                   </View>
                 ))}
               </View>
-            )}
+            ))}
+          </View>
+        )}
 
-            {/* Projects */}
-            {projects.length > 0 && (
-              <View style={s.sectionGap}>
-                <Text style={s.sectionTitle}>{l.projects}</Text>
-                {projects.map((p) => (
-                  <View key={p.id} style={s.projItem}>
-                    <Text style={s.projName}>{p.name}</Text>
-                    {(p.url || p.githubUrl || p.websiteUrl) && (
-                      <View style={{ flexDirection: "row", gap: 4, marginBottom: 2 }}>
-                        {p.url && <Link src={p.url} style={{ fontSize: 7, color: "#666666" }}>{l.project}</Link>}
-                        {p.url && (p.githubUrl || p.websiteUrl) && <Text style={{ fontSize: 7, color: "#999999" }}>|</Text>}
-                        {p.githubUrl && <Link src={p.githubUrl} style={{ fontSize: 7, color: "#666666" }}>GitHub</Link>}
-                        {p.githubUrl && p.websiteUrl && <Text style={{ fontSize: 7, color: "#999999" }}>|</Text>}
-                        {p.websiteUrl && <Link src={p.websiteUrl} style={{ fontSize: 7, color: "#666666" }}>{l.website}</Link>}
-                      </View>
+        {/* Projects */}
+        {projects.length > 0 && (
+          <View>
+            <Text style={s.sectionTitle}>{l.projects}</Text>
+            {projects.map((p) => (
+              <View key={p.id} style={s.itemContainer}>
+                <View style={s.rowBetween}>
+                  <View
+                    style={{
+                      flexDirection: "row",
+                      alignItems: "baseline",
+                      gap: 6,
+                    }}
+                  >
+                    <Text style={s.boldText}>{p.name}</Text>
+                    {p.technologies.length > 0 && (
+                      <Text style={{ fontSize: 7, color: "#666666" }}>
+                        [{p.technologies.join(" · ")}]
+                      </Text>
                     )}
-                    {p.technologies.length > 0 && <Text style={s.projTech}>{p.technologies.join(" · ")}</Text>}
-                    {p.description ? <Text style={s.projDesc}>{p.description}</Text> : null}
-                    {p.highlights.map((h, i) => (
-                      <View key={i} style={s.bulletRow}>
-                        <Text style={s.bulletDot}>{bulletSymbol}</Text>
-                        <Text style={s.bulletText}>{h}</Text>
-                      </View>
-                    ))}
                   </View>
-                ))}
-              </View>
-            )}
-
-            {/* Certifications */}
-            {certifications.length > 0 && (
-              <View style={s.sectionGap}>
-                <Text style={s.sectionTitle}>{l.certifications}</Text>
-                {certifications.map((cert) => (
-                  <View key={cert.id} style={s.projItem}>
-                    <View style={s.expTopRow}>
-                      <Text style={s.expPosition}>{cert.name}</Text>
-                      {cert.date ? <Text style={s.expDate}>{fmtDate(cert.date)}</Text> : null}
-                    </View>
-                    {cert.issuer ? <Text style={s.expCompany}>{cert.issuer}</Text> : null}
-                    {cert.url ? <Link src={ensureHref(cert.url)} style={{ fontSize: 7, color: "#666666", textDecoration: "none" }}>{l.viewCertificate}</Link> : null}
+                  <View style={{ flexDirection: "row", gap: 6 }}>
+                    {p.url && (
+                      <Link
+                        src={p.url}
+                        style={{
+                          fontSize: 7.5,
+                          color: "#666666",
+                          textDecoration: "none",
+                        }}
+                      >
+                        {l.project}
+                      </Link>
+                    )}
+                    {p.url && (p.githubUrl || p.websiteUrl) && (
+                      <Text style={{ fontSize: 7.5, color: "#999999" }}>|</Text>
+                    )}
+                    {p.githubUrl && (
+                      <Link
+                        src={p.githubUrl}
+                        style={{
+                          fontSize: 7.5,
+                          color: "#666666",
+                          textDecoration: "none",
+                        }}
+                      >
+                        GitHub
+                      </Link>
+                    )}
+                    {p.githubUrl && p.websiteUrl && (
+                      <Text style={{ fontSize: 7.5, color: "#999999" }}>|</Text>
+                    )}
+                    {p.websiteUrl && (
+                      <Link
+                        src={p.websiteUrl}
+                        style={{
+                          fontSize: 7.5,
+                          color: "#666666",
+                          textDecoration: "none",
+                        }}
+                      >
+                        {l.website}
+                      </Link>
+                    )}
+                  </View>
+                </View>
+                {p.description ? (
+                  <Text style={s.descriptionText}>{p.description}</Text>
+                ) : null}
+                {p.highlights.map((h, i) => (
+                  <View key={i} style={s.bulletRow}>
+                    <Text style={s.bulletDot}>{bulletSymbol}</Text>
+                    <Text style={s.bulletText}>{h}</Text>
                   </View>
                 ))}
               </View>
-            )}
+            ))}
           </View>
+        )}
 
-          {/* Sidebar */}
-          <View style={s.sideCol}>
-            {/* Skills */}
-            {skills.length > 0 && (
-              <View>
-                <Text style={s.sectionTitle}>{l.skills}</Text>
-                {skills.map((cat) => (
-                  <View key={cat.id} style={s.skillCat}>
-                    <Text style={s.skillCatName}>{cat.category}</Text>
-                    <Text style={s.skillItems}>{cat.items.join(", ")}</Text>
+        {/* Competitions */}
+        {competitions.length > 0 && (
+          <View>
+            <Text style={s.sectionTitle}>{l.competitions}</Text>
+            {competitions.map((comp) => (
+              <View key={comp.id} style={s.itemContainer}>
+                <View style={s.rowBetween}>
+                  <View
+                    style={{
+                      flexDirection: "row",
+                      alignItems: "baseline",
+                      gap: 4,
+                    }}
+                  >
+                    <Text style={s.boldText}>{comp.name}</Text>
+                    {comp.role && (
+                      <Text style={{ fontSize: 7.5, color: "#555555" }}>
+                        — {comp.role}
+                      </Text>
+                    )}
+                  </View>
+                  {comp.date && (
+                    <Text style={s.dateText}>{fmtDate(comp.date)}</Text>
+                  )}
+                </View>
+                {comp.location && (
+                  <Text style={s.italicText}>{comp.location}</Text>
+                )}
+                {comp.url && (
+                  <Link
+                    src={ensureHref(comp.url)}
+                    style={{
+                      fontSize: 7.5,
+                      color: "#666666",
+                      textDecoration: "none",
+                      marginBottom: 2,
+                    }}
+                  >
+                    {l.project}
+                  </Link>
+                )}
+                {comp.description ? (
+                  <Text style={s.descriptionText}>{comp.description}</Text>
+                ) : null}
+                {comp.highlights.map((h, i) => (
+                  <View key={i} style={s.bulletRow}>
+                    <Text style={s.bulletDot}>{bulletSymbol}</Text>
+                    <Text style={s.bulletText}>{h}</Text>
                   </View>
                 ))}
               </View>
-            )}
+            ))}
+          </View>
+        )}
 
-            {/* Education */}
-            {completeEducation.length > 0 && (
-              <View style={s.sectionGap}>
-                <Text style={s.sectionTitle}>{l.education}</Text>
-                {completeEducation.map((edu) => (
-                  <View key={edu.id} style={s.eduItem}>
-                    <Text style={s.eduDegree}>{edu.degree}</Text>
-                    <Text style={s.eduSchool}>{edu.field} — {edu.institution}</Text>
-                    <Text style={s.eduDate}>{fmtRange(edu.startDate, edu.endDate || "", edu.current)}</Text>
-                    {edu.gpa ? <Text style={s.eduDate}>{l.gpa}: {edu.gpa}</Text> : null}
-                    {(edu.coursework ?? []).length > 0 ? (
-                      <Text style={s.eduDate}>Relevant Coursework: {(edu.coursework ?? []).join(", ")}</Text>
+        {/* Certifications */}
+        {certifications.length > 0 && (
+          <View>
+            <Text style={s.sectionTitle}>{l.certifications}</Text>
+            {certifications.map((cert) => (
+              <View key={cert.id} style={{ marginBottom: 5 }}>
+                <View style={s.rowBetween}>
+                  <Text style={s.boldText}>
+                    {cert.name}
+                    {cert.issuer ? (
+                      <Text style={{ fontWeight: 400, color: "#555555" }}>
+                        {" "}
+                        — {cert.issuer}
+                      </Text>
                     ) : null}
-                  </View>
-                ))}
+                  </Text>
+                  {cert.date && (
+                    <Text style={s.dateText}>{fmtDate(cert.date)}</Text>
+                  )}
+                </View>
+                {cert.url && (
+                  <Link
+                    src={ensureHref(cert.url)}
+                    style={{
+                      fontSize: 7.5,
+                      color: "#666666",
+                      textDecoration: "none",
+                    }}
+                  >
+                    {l.viewCertificate}
+                  </Link>
+                )}
               </View>
-            )}
+            ))}
+          </View>
+        )}
 
-            {/* Languages */}
-            {languages.length > 0 && (
-              <View style={s.sectionGap}>
-                <Text style={s.sectionTitle}>{l.languages}</Text>
-                {languages.map((lang) => (
-                  <View key={lang.id} style={s.skillCat}>
-                    <Text style={s.skillCatName}>{lang.language}</Text>
-                    <Text style={s.skillItems}>{lang.proficiency.charAt(0).toUpperCase() + lang.proficiency.slice(1)}</Text>
-                  </View>
-                ))}
+        {/* Education */}
+        {completeEducation.length > 0 && (
+          <View>
+            <Text style={s.sectionTitle}>{l.education}</Text>
+            {completeEducation.map((edu) => (
+              <View key={edu.id} style={s.itemContainer}>
+                <View style={s.rowBetween}>
+                  <Text style={s.boldText}>
+                    {edu.degree} in {edu.field}{" "}
+                    <Text style={{ fontWeight: 400, color: "#444444" }}>
+                      — {edu.institution}
+                    </Text>
+                  </Text>
+                  <Text style={s.dateText}>
+                    {fmtRange(edu.startDate, edu.endDate || "", edu.current)}
+                  </Text>
+                </View>
+                {edu.gpa && (
+                  <Text style={s.italicText}>
+                    {l.gpa}: {edu.gpa}
+                  </Text>
+                )}
+                {(edu.coursework ?? []).length > 0 && (
+                  <Text
+                    style={{ fontSize: 7.5, color: "#555555", marginTop: 2 }}
+                  >
+                    Relevant Coursework: {(edu.coursework ?? []).join(", ")}
+                  </Text>
+                )}
               </View>
-            )}
+            ))}
           </View>
-        </View>
+        )}
+
+        {/* Languages */}
+        {languages.length > 0 && (
+          <View>
+            <Text style={s.sectionTitle}>{l.languages}</Text>
+            <View style={s.languagesList}>
+              {languages.map((lang) => (
+                <Text key={lang.id} style={{ fontSize: 8 }}>
+                  <Text style={{ fontWeight: 700 }}>{lang.language}:</Text>{" "}
+                  {lang.proficiency.charAt(0).toUpperCase() +
+                    lang.proficiency.slice(1)}
+                </Text>
+              ))}
+            </View>
+          </View>
+        )}
       </Page>
     </Document>
   );