diff --git a/apps/portfolio/template-library b/apps/portfolio/template-library
index cb37b35e..507f3253 160000
--- a/apps/portfolio/template-library
+++ b/apps/portfolio/template-library
@@ -1 +1 @@
-Subproject commit cb37b35ee9a7a3ec2f093c0bd8d4dd65bbe90e49
+Subproject commit 507f32532e4e1600e3de127cc97175ad80b4af46
diff --git a/apps/studio/app/(main)/(dashboard)/components/OverviewHome.tsx b/apps/studio/app/(main)/(dashboard)/components/OverviewHome.tsx
index dcc2212d..50bf8a9d 100644
--- a/apps/studio/app/(main)/(dashboard)/components/OverviewHome.tsx
+++ b/apps/studio/app/(main)/(dashboard)/components/OverviewHome.tsx
@@ -3,17 +3,16 @@
 import type { LucideIcon } from "lucide-react";
 
 import Link from "next/link";
-import { useSyncExternalStore } from "react";
 import { BookOpen, FolderOpen, ArrowRight, BriefcaseBusiness } from "lucide-react";
 
 import { Card } from "@veriworkly/ui";
 
-import {
-  getDocumentLibrarySnapshot,
-  subscribeToDocumentLibrary,
-  DOCUMENT_LIBRARY_SERVER_SNAPSHOT,
-} from "@/features/documents/services/document-library";
+import DestructiveModal from "@/components/modals/DestructiveModal";
+import SyncDetailsModal from "@/components/modals/SyncDetailsModal";
+import ShareDocumentModal from "@/components/modals/ShareDocumentModal";
+import RenameDocumentModal from "@/components/modals/RenameDocumentModal";
 
+import { useDocumentsWorkspace } from "../documents/useDocumentsWorkspace";
 import RecentCard from "./RecentCard";
 import OverviewHomeHeader from "./OverviewHomeHeader";
 import OverviewReferenceCard from "./OverviewReferenceCard";
@@ -32,18 +31,33 @@ function MiniLink({ href, icon: Icon, label }: { href: string; icon: LucideIcon;
 }
 
 const OverviewHome = () => {
-  const snapshot = useSyncExternalStore(
-    subscribeToDocumentLibrary,
-    () => getDocumentLibrarySnapshot(),
-    () => DOCUMENT_LIBRARY_SERVER_SNAPSHOT,
-  );
-
-  const totalCount = Object.values(snapshot.counts).reduce((sum, count) => sum + count, 0);
-
-  const resumeCount = snapshot.counts.RESUME;
-  const coverLetterCount = snapshot.counts.COVER_LETTER;
-
-  const recentDocs = snapshot.docs.slice(0, 6);
+  const {
+    counts,
+    handleSyncNow,
+    handleConfirmDelete,
+    handleKeepLocalOnly,
+    handleResolveUseCloud,
+    handleResolveUseLocal,
+    isDeleting,
+    deleteTarget,
+    shareTarget,
+    renameTarget,
+    syncDetailsTarget,
+    setDeleteTarget,
+    setShareTarget,
+    setRenameTarget,
+    setSyncDetailsTargetId,
+    syncingDocumentId,
+    syncTargetTelemetry,
+    totalCount,
+    visibleDocs,
+    bump,
+  } = useDocumentsWorkspace();
+
+  const resumeCount = counts.RESUME;
+  const coverLetterCount = counts.COVER_LETTER;
+
+  const recentDocs = visibleDocs.slice(0, 6);
 
   return (
     <section className="space-y-7" aria-label="Studio overview">
@@ -71,7 +85,18 @@ const OverviewHome = () => {
 
             <div className="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
               {recentDocs.length > 0 ? (
-                recentDocs.map((doc) => <RecentCard key={`${doc.type}-${doc.id}`} doc={doc} />)
+                recentDocs.map((doc) => (
+                  <RecentCard
+                    key={`${doc.type}-${doc.id}`}
+                    doc={doc}
+                    syncing={syncingDocumentId === doc.id}
+                    onDeleteAction={setDeleteTarget}
+                    onShareAction={setShareTarget}
+                    onRenameAction={setRenameTarget}
+                    onSyncNowAction={handleSyncNow}
+                    onSyncDetailsAction={setSyncDetailsTargetId}
+                  />
+                ))
               ) : (
                 <div className="border-border bg-background/70 col-span-full rounded-xl border p-5">
                   <p className="font-bold">No files yet</p>
@@ -100,6 +125,45 @@ const OverviewHome = () => {
           </aside>
         </div>
       </Card>
+
+      <DestructiveModal
+        loading={isDeleting}
+        open={Boolean(deleteTarget)}
+        onConfirmAction={handleConfirmDelete}
+        onCloseAction={() => setDeleteTarget(null)}
+        entityName={deleteTarget?.title ?? "document"}
+      />
+
+      {syncDetailsTarget ? (
+        <SyncDetailsModal
+          document={syncDetailsTarget}
+          onSyncNow={handleSyncNow}
+          telemetry={syncTargetTelemetry}
+          syncingDocumentId={syncingDocumentId}
+          onKeepLocalOnly={handleKeepLocalOnly}
+          onResolveUseCloud={handleResolveUseCloud}
+          onResolveUseLocal={handleResolveUseLocal}
+          onClose={() => setSyncDetailsTargetId(null)}
+        />
+      ) : null}
+
+      {shareTarget ? (
+        <ShareDocumentModal
+          document={shareTarget}
+          documentId={shareTarget.id}
+          documentTitle={shareTarget.title}
+          onClose={() => setShareTarget(null)}
+        />
+      ) : null}
+
+      {renameTarget ? (
+        <RenameDocumentModal
+          open={Boolean(renameTarget)}
+          doc={renameTarget}
+          onClose={() => setRenameTarget(null)}
+          onSuccess={bump}
+        />
+      ) : null}
     </section>
   );
 };
diff --git a/apps/studio/app/(main)/(dashboard)/components/RecentCard.tsx b/apps/studio/app/(main)/(dashboard)/components/RecentCard.tsx
index 9598ad31..7aa6f058 100644
--- a/apps/studio/app/(main)/(dashboard)/components/RecentCard.tsx
+++ b/apps/studio/app/(main)/(dashboard)/components/RecentCard.tsx
@@ -9,16 +9,32 @@ import { Badge } from "@veriworkly/ui";
 import { getDocumentDefinition } from "@/features/documents/core/registry";
 import { getDocumentEditorPath } from "@/features/documents/core/routes";
 import { type DocumentLibraryItem } from "@/features/documents/services/document-library";
+import { DocumentActionsMenu } from "../documents/components/DocumentActionsMenu";
 
-const RecentCard = ({ doc }: { doc: DocumentLibraryItem }) => {
+interface RecentCardProps {
+  doc: DocumentLibraryItem;
+  syncing: boolean;
+  onDeleteAction: (doc: DocumentLibraryItem) => void;
+  onShareAction: (doc: DocumentLibraryItem) => void;
+  onRenameAction: (doc: DocumentLibraryItem) => void;
+  onSyncNowAction: (id: string) => void;
+  onSyncDetailsAction: (id: string) => void;
+}
+
+const RecentCard = ({
+  doc,
+  syncing,
+  onDeleteAction,
+  onShareAction,
+  onRenameAction,
+  onSyncNowAction,
+  onSyncDetailsAction,
+}: RecentCardProps) => {
   const definition = getDocumentDefinition(doc.type);
   const editorPath = getDocumentEditorPath(doc.type, doc.id);
 
   return (
-    <Link
-      href={editorPath}
-      className="border-border bg-background/70 group hover:border-accent/40 hover:bg-card overflow-hidden rounded-xl border transition"
-    >
+    <div className="border-border bg-background/70 group hover:border-accent/40 hover:bg-card relative overflow-hidden rounded-xl border transition">
       <div className="border-border/70 relative h-32 border-b bg-[color-mix(in_oklab,var(--card)_78%,var(--background))]">
         {doc.previewImage ? (
           <Image
@@ -44,7 +60,25 @@ const RecentCard = ({ doc }: { doc: DocumentLibraryItem }) => {
 
         <p className="text-muted mt-1 truncate text-xs">{doc.description || doc.templateName}</p>
       </div>
-    </Link>
+
+      <Link
+        href={editorPath}
+        aria-label={`Open ${doc.title}`}
+        className="focus-visible:ring-accent absolute inset-0 z-20 cursor-pointer rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+      />
+
+      <DocumentActionsMenu
+        doc={doc}
+        syncing={syncing}
+        onShareAction={onShareAction}
+        onRenameAction={onRenameAction}
+        onDeleteAction={onDeleteAction}
+        onSyncNowAction={onSyncNowAction}
+        onSyncDetailsAction={onSyncDetailsAction}
+        className="absolute top-2 right-2 z-30"
+        triggerClassName="opacity-100 pointer-events-auto md:opacity-0 md:pointer-events-none transition-opacity duration-200 md:group-hover:opacity-100 md:group-hover:pointer-events-auto md:group-focus-within:opacity-100 md:group-focus-within:pointer-events-auto"
+      />
+    </div>
   );
 };
 
diff --git a/apps/studio/features/resume/editor/EditorSettingsPanel.tsx b/apps/studio/features/resume/editor/EditorSettingsPanel.tsx
index 6c4a02af..5adf72bc 100644
--- a/apps/studio/features/resume/editor/EditorSettingsPanel.tsx
+++ b/apps/studio/features/resume/editor/EditorSettingsPanel.tsx
@@ -1,16 +1,11 @@
 "use client";
 
 import { memo, useState } from "react";
-
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  Button,
-} from "@veriworkly/ui";
+import { ChevronDown, RotateCcw } from "lucide-react";
+import { Button } from "@veriworkly/ui";
 
 import type { FontFamilyId } from "@/features/documents/constants/fonts";
+import { cn } from "@/lib/utils";
 
 import { templateCatalogByType } from "@/features/documents/core/template-catalog";
 import {
@@ -24,10 +19,42 @@ import { SettingsColor, SettingsRange, SettingsSelect } from "./settings/Setting
 import { fontOptions } from "@/features/documents/constants/fonts";
 import { useResumeStore } from "@/features/resume/store/resume-store";
 import { defaultResume } from "@/features/resume/constants/default-resume";
-import { RotateCcw } from "lucide-react";
+
+const SettingsSectionAccordion = ({
+  children,
+  isOpen,
+  label,
+  onToggle,
+}: {
+  children: React.ReactNode;
+  isOpen: boolean;
+  label: string;
+  onToggle: () => void;
+}) => {
+  return (
+    <div className="border-border bg-background/70 overflow-hidden border-b transition last:border-b-0">
+      <button
+        type="button"
+        onClick={onToggle}
+        className={cn(
+          "flex w-full cursor-pointer items-center justify-between px-3 py-3 text-left text-sm font-semibold transition",
+          isOpen ? "bg-card text-foreground" : "text-muted hover:bg-card hover:text-foreground",
+        )}
+      >
+        <span className="min-w-0 truncate">{label}</span>
+        <ChevronDown className={cn("h-4 w-4 shrink-0 transition", isOpen ? "rotate-180" : "")} />
+      </button>
+
+      {isOpen ? <div className="bg-card border-border/70 border-t p-3">{children}</div> : null}
+    </div>
+  );
+};
 
 const EditorSettingsPanel = memo(function EditorSettingsPanel() {
   const [templateModalOpen, setTemplateModalOpen] = useState(false);
+  const [openSection, setOpenSection] = useState<"typography" | "colors" | "visibility" | null>(
+    "typography",
+  );
 
   const sections = useResumeStore((state) => state.resume.sections);
   const templateId = useResumeStore((state) => state.resume.templateId);
@@ -37,11 +64,18 @@ const EditorSettingsPanel = memo(function EditorSettingsPanel() {
   const reorderSections = useResumeStore((state) => state.reorderSections);
   const updateCustomization = useResumeStore((state) => state.updateCustomization);
   const setSectionVisibility = useResumeStore((state) => state.setSectionVisibility);
+  const updateSectionColumn = useResumeStore((state) => state.updateSectionColumn);
 
   const selectedTemplate = templateCatalogByType.RESUME.find(
     (template) => template.id === templateId,
   );
 
+  const isTwoColumnTemplate = !!selectedTemplate?.tags.includes("Two columns");
+
+  const handleToggle = (section: "typography" | "colors" | "visibility") => {
+    setOpenSection((curr) => (curr === section ? null : section));
+  };
+
   return (
     <div>
       <div className="border-border/70 border-b p-3">
@@ -55,156 +89,165 @@ const EditorSettingsPanel = memo(function EditorSettingsPanel() {
         onOpen={() => setTemplateModalOpen(true)}
       />
 
-      <div className="p-3">
-        <Accordion type="multiple" defaultValue={["typography"]} className="gap-2">
-          <AccordionItem value="typography">
-            <AccordionTrigger>Typography &amp; Spacing</AccordionTrigger>
-            <AccordionContent className="text-foreground space-y-4">
-              <SettingsSelect
-                label="Font style"
-                value={customization.fontFamily}
+      <div className="flex flex-col">
+        <SettingsSectionAccordion
+          label="Typography & Spacing"
+          isOpen={openSection === "typography"}
+          onToggle={() => handleToggle("typography")}
+        >
+          <div className="text-foreground space-y-4">
+            <SettingsSelect
+              label="Font style"
+              value={customization.fontFamily}
+              onChange={(event) =>
+                updateCustomization({
+                  fontFamily: event.target.value as FontFamilyId,
+                })
+              }
+            >
+              {fontOptions.map((font) => (
+                <option key={font.value} value={font.value}>
+                  {font.label}
+                </option>
+              ))}
+            </SettingsSelect>
+
+            <SettingsRange
+              min={0}
+              max={44}
+              value={customization.sectionSpacing}
+              label={`Section gap (${customization.sectionSpacing}px)`}
+              onChange={(event) =>
+                updateCustomization({
+                  sectionSpacing: Number(event.target.value),
+                })
+              }
+            />
+
+            <SettingsRange
+              max={52}
+              min={16}
+              value={customization.pagePadding}
+              label={`Page margin (${customization.pagePadding}px)`}
+              onChange={(event) =>
+                updateCustomization({
+                  pagePadding: Number(event.target.value),
+                })
+              }
+            />
+
+            <SettingsRange
+              min={1}
+              max={2}
+              step={0.05}
+              value={customization.bodyLineHeight}
+              label={`Body line-height (${customization.bodyLineHeight.toFixed(2)})`}
+              onChange={(event) =>
+                updateCustomization({
+                  bodyLineHeight: Number(event.target.value),
+                })
+              }
+            />
+          </div>
+        </SettingsSectionAccordion>
+
+        <SettingsSectionAccordion
+          label="Color Theme"
+          isOpen={openSection === "colors"}
+          onToggle={() => handleToggle("colors")}
+        >
+          <div className="text-foreground space-y-4">
+            <div className="grid gap-3 sm:grid-cols-2">
+              <SettingsColor
+                compact
+                label="Accent color"
+                value={customization.accentColor}
                 onChange={(event) =>
                   updateCustomization({
-                    fontFamily: event.target.value as FontFamilyId,
+                    accentColor: event.target.value,
                   })
                 }
-              >
-                {fontOptions.map((font) => (
-                  <option key={font.value} value={font.value}>
-                    {font.label}
-                  </option>
-                ))}
-              </SettingsSelect>
-
-              <SettingsRange
-                min={0}
-                max={44}
-                value={customization.sectionSpacing}
-                label={`Section gap (${customization.sectionSpacing}px)`}
+              />
+
+              <SettingsColor
+                compact
+                label="Border color"
+                onChange={(event) => updateCustomization({ borderColor: event.target.value })}
+                value={customization.borderColor}
+              />
+
+              <SettingsColor
+                compact
+                label="Text color"
+                onChange={(event) => updateCustomization({ textColor: event.target.value })}
+                value={customization.textColor}
+              />
+
+              <SettingsColor
+                compact
+                label="Muted text color"
+                onChange={(event) => updateCustomization({ mutedTextColor: event.target.value })}
+                value={customization.mutedTextColor}
+              />
+
+              <SettingsColor
+                compact
+                label="Page background"
                 onChange={(event) =>
-                  updateCustomization({
-                    sectionSpacing: Number(event.target.value),
-                  })
+                  updateCustomization({ pageBackgroundColor: event.target.value })
                 }
+                value={customization.pageBackgroundColor}
               />
 
-              <SettingsRange
-                max={52}
-                min={16}
-                value={customization.pagePadding}
-                label={`Page margin (${customization.pagePadding}px)`}
+              <SettingsColor
+                compact
+                label="Section background"
                 onChange={(event) =>
                   updateCustomization({
-                    pagePadding: Number(event.target.value),
+                    sectionBackgroundColor: event.target.value,
                   })
                 }
+                value={customization.sectionBackgroundColor}
               />
 
-              <SettingsRange
-                min={1}
-                max={2}
-                step={0.05}
-                value={customization.bodyLineHeight}
-                label={`Body line-height (${customization.bodyLineHeight.toFixed(2)})`}
+              <SettingsColor
+                compact
+                label="Item heading color"
                 onChange={(event) =>
-                  updateCustomization({
-                    bodyLineHeight: Number(event.target.value),
-                  })
+                  updateCustomization({ sectionHeadingColor: event.target.value })
                 }
+                value={customization.sectionHeadingColor}
               />
-            </AccordionContent>
-          </AccordionItem>
-
-          <AccordionItem value="colors">
-            <AccordionTrigger>Color Theme</AccordionTrigger>
-            <AccordionContent className="text-foreground space-y-4">
-              <div className="grid gap-3 sm:grid-cols-2">
-                <SettingsColor
-                  compact
-                  label="Accent color"
-                  value={customization.accentColor}
-                  onChange={(event) =>
-                    updateCustomization({
-                      accentColor: event.target.value,
-                    })
-                  }
-                />
-
-                <SettingsColor
-                  compact
-                  label="Border color"
-                  onChange={(event) => updateCustomization({ borderColor: event.target.value })}
-                  value={customization.borderColor}
-                />
-
-                <SettingsColor
-                  compact
-                  label="Text color"
-                  onChange={(event) => updateCustomization({ textColor: event.target.value })}
-                  value={customization.textColor}
-                />
-
-                <SettingsColor
-                  compact
-                  label="Muted text color"
-                  onChange={(event) => updateCustomization({ mutedTextColor: event.target.value })}
-                  value={customization.mutedTextColor}
-                />
-
-                <SettingsColor
-                  compact
-                  label="Page background"
-                  onChange={(event) =>
-                    updateCustomization({ pageBackgroundColor: event.target.value })
-                  }
-                  value={customization.pageBackgroundColor}
-                />
-
-                <SettingsColor
-                  compact
-                  label="Section background"
-                  onChange={(event) =>
-                    updateCustomization({
-                      sectionBackgroundColor: event.target.value,
-                    })
-                  }
-                  value={customization.sectionBackgroundColor}
-                />
-
-                <SettingsColor
-                  compact
-                  label="Item heading color"
-                  onChange={(event) =>
-                    updateCustomization({ sectionHeadingColor: event.target.value })
-                  }
-                  value={customization.sectionHeadingColor}
-                />
-              </div>
-
-              <Button
-                className="w-full rounded-xl"
-                onClick={() => updateCustomization({ ...defaultResume.customization })}
-                size="sm"
-                variant="secondary"
-              >
-                <RotateCcw className="mr-2 h-4 w-4" />
-                Reset Theme Defaults
-              </Button>
-            </AccordionContent>
-          </AccordionItem>
-
-          <AccordionItem value="visibility">
-            <AccordionTrigger>Section Visibility</AccordionTrigger>
-            <AccordionContent className="text-foreground">
-              <SectionVisibilitySettings
-                embedded
-                sections={sections}
-                onMove={reorderSections}
-                onToggle={setSectionVisibility}
-              />
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
+            </div>
+
+            <Button
+              className="w-full rounded-xl"
+              onClick={() => updateCustomization({ ...defaultResume.customization })}
+              size="sm"
+              variant="secondary"
+            >
+              <RotateCcw className="mr-2 h-4 w-4" />
+              Reset Theme Defaults
+            </Button>
+          </div>
+        </SettingsSectionAccordion>
+
+        <SettingsSectionAccordion
+          label="Section Visibility"
+          isOpen={openSection === "visibility"}
+          onToggle={() => handleToggle("visibility")}
+        >
+          <div className="text-foreground">
+            <SectionVisibilitySettings
+              embedded
+              sections={sections}
+              onMove={reorderSections}
+              onToggle={setSectionVisibility}
+              isTwoColumn={isTwoColumnTemplate}
+              onUpdateSectionColumn={updateSectionColumn}
+            />
+          </div>
+        </SettingsSectionAccordion>
       </div>
 
       <DocumentTemplatePickerModal
diff --git a/apps/studio/features/resume/editor/settings/SectionVisibilitySettings.tsx b/apps/studio/features/resume/editor/settings/SectionVisibilitySettings.tsx
index 7aa71202..83db2e00 100644
--- a/apps/studio/features/resume/editor/settings/SectionVisibilitySettings.tsx
+++ b/apps/studio/features/resume/editor/settings/SectionVisibilitySettings.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import { useState } from "react";
 import type { ResumeSectionId, ResumeSection } from "@/types/resume";
-
-import { ArrowDown, ArrowUp } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 interface SectionVisibilitySettingsProps {
   onMove: (fromIndex: number, toIndex: number) => void;
@@ -10,6 +10,8 @@ interface SectionVisibilitySettingsProps {
   sections: ResumeSection[];
   /** When true, omit the section title (e.g. inside an accordion). */
   embedded?: boolean;
+  isTwoColumn?: boolean;
+  onUpdateSectionColumn?: (sectionId: ResumeSectionId, column: "left" | "right") => void;
 }
 
 const SectionVisibilitySettings = ({
@@ -17,8 +19,118 @@ const SectionVisibilitySettings = ({
   onToggle,
   sections,
   embedded = false,
+  isTwoColumn = false,
+  onUpdateSectionColumn,
 }: SectionVisibilitySettingsProps) => {
   const sortedSections = sections.slice().sort((left, right) => left.order - right.order);
+  const [draggedSectionId, setDraggedSectionId] = useState<ResumeSectionId | null>(null);
+
+  const handleDropOnColumn = (targetColumn: "left" | "right") => {
+    if (!draggedSectionId || !onUpdateSectionColumn) return;
+
+    const section = sections.find((s) => s.id === draggedSectionId);
+    if (!section || section.id === "basics" || section.id === "links") return;
+
+    onUpdateSectionColumn(draggedSectionId, targetColumn);
+    setDraggedSectionId(null);
+  };
+
+  const handleDropOnSection = (targetSectionId: ResumeSectionId) => {
+    if (!draggedSectionId || draggedSectionId === targetSectionId) return;
+
+    const targetSection = sections.find((s) => s.id === targetSectionId);
+    if (!targetSection) return;
+
+    const fromIndex = sortedSections.findIndex((s) => s.id === draggedSectionId);
+    const toIndex = sortedSections.findIndex((s) => s.id === targetSectionId);
+
+    if (fromIndex !== -1 && toIndex !== -1 && fromIndex >= 2 && toIndex >= 2) {
+      if (onUpdateSectionColumn) {
+        onUpdateSectionColumn(draggedSectionId, targetSection.column || "left");
+      }
+      onMove(fromIndex, toIndex);
+    }
+
+    setDraggedSectionId(null);
+  };
+
+  const renderSectionCard = (section: ResumeSection) => {
+    const index = sortedSections.findIndex((s) => s.id === section.id);
+    const isLocked = section.id === "basics" || section.id === "links";
+
+    return (
+      <div
+        key={section.id}
+        draggable={!isLocked}
+        onDragStart={() => !isLocked && setDraggedSectionId(section.id)}
+        onDragEnd={() => setDraggedSectionId(null)}
+        onDragOver={(e) => {
+          if (!isLocked) e.preventDefault();
+        }}
+        onDrop={(e) => {
+          e.stopPropagation();
+          if (!isLocked) handleDropOnSection(section.id);
+        }}
+        className={cn(
+          "border-border bg-card/85 flex items-center justify-between gap-2 rounded-xl border p-2 text-xs transition",
+          draggedSectionId === section.id ? "opacity-40" : "",
+          !isLocked ? "hover:border-accent/40 cursor-grab active:cursor-grabbing" : "",
+        )}
+      >
+        <label className="flex min-w-0 flex-1 cursor-pointer items-center gap-2.5">
+          <input
+            checked={section.visible}
+            className="accent-accent h-4 w-4 shrink-0 cursor-pointer rounded"
+            onChange={(event) => onToggle(section.id, event.target.checked)}
+            type="checkbox"
+          />
+          <span className="text-foreground/90 min-w-0 truncate font-semibold">{section.label}</span>
+        </label>
+
+        <div className="flex shrink-0 items-center gap-1.5">
+          {/* Column Select Dropdown (visible in two column template) */}
+          {isTwoColumn && !isLocked && onUpdateSectionColumn && (
+            <select
+              aria-label={`Column for ${section.label}`}
+              value={section.column || "left"}
+              onChange={(e) => {
+                onUpdateSectionColumn(section.id, e.target.value as "left" | "right");
+              }}
+              className="border-border bg-background hover:bg-card text-foreground focus:ring-accent h-7 rounded-lg border px-1.5 text-[11px] font-medium focus:ring-1 focus:outline-none"
+            >
+              <option value="left">Col 1</option>
+              <option value="right">Col 2</option>
+            </select>
+          )}
+
+          {/* Position Select Dropdown */}
+          {!isLocked && (
+            <select
+              aria-label={`Position for ${section.label}`}
+              value={index + 1}
+              onChange={(e) => {
+                const targetPos = Number(e.target.value);
+                onMove(index, targetPos - 1);
+              }}
+              className="border-border bg-background hover:bg-card text-foreground focus:ring-accent h-7 rounded-lg border px-1.5 text-[11px] font-medium focus:ring-1 focus:outline-none"
+            >
+              {sortedSections.map((_, idx) => {
+                if (idx < 2) return null; // Skip locked basics/links
+                return (
+                  <option key={idx} value={idx + 1}>
+                    {idx + 1}
+                  </option>
+                );
+              })}
+            </select>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  const leftSections = sortedSections.filter((s) => s.column !== "right");
+  const rightSections = sortedSections.filter((s) => s.column === "right");
 
   return (
     <div className={embedded ? undefined : "border-border/70 border-b p-3"}>
@@ -29,46 +141,59 @@ const SectionVisibilitySettings = ({
         </div>
       )}
 
-      <div className="grid gap-1.5">
-        {sortedSections.map((section, index) => (
-          <div
-            className="border-border bg-background/70 flex items-center gap-2 rounded-xl border px-2 py-2 text-sm transition"
-            key={section.id}
-          >
-            <div className="flex shrink-0 items-center gap-1">
-              <button
-                aria-label={`Move ${section.label} up`}
-                className="text-muted hover:bg-card hover:text-foreground grid h-7 w-7 place-items-center rounded-lg transition disabled:opacity-35"
-                disabled={index === 0}
-                onClick={() => onMove(index, index - 1)}
-                type="button"
-              >
-                <ArrowUp className="h-3.5 w-3.5" />
-              </button>
-              <button
-                aria-label={`Move ${section.label} down`}
-                className="text-muted hover:bg-card hover:text-foreground grid h-7 w-7 place-items-center rounded-lg transition disabled:opacity-35"
-                disabled={index === sortedSections.length - 1}
-                onClick={() => onMove(index, index + 1)}
-                type="button"
-              >
-                <ArrowDown className="h-3.5 w-3.5" />
-              </button>
-            </div>
+      {isTwoColumn ? (
+        <div className="space-y-3.5">
+          <p className="text-muted text-[11px] leading-relaxed font-medium">
+            Drag &amp; drop cards to reorder or move between columns. Or use dropdown selections.
+          </p>
 
-            <label className="flex min-w-0 flex-1 items-center gap-3">
-              <input
-                checked={section.visible}
-                className="accent-accent h-4 w-4"
-                onChange={(event) => onToggle(section.id, event.target.checked)}
-                type="checkbox"
-              />
+          <div className="grid grid-cols-2 gap-3.5">
+            {/* Column 1 (Left/Sidebar) */}
+            <div
+              onDragOver={(e) => e.preventDefault()}
+              onDrop={() => handleDropOnColumn("left")}
+              className={cn(
+                "border-border/60 bg-background/40 flex min-h-[220px] flex-col gap-2 rounded-2xl border p-2.5 transition-all",
+                draggedSectionId ? "bg-accent/5 border-accent/40 border-dashed" : "",
+              )}
+            >
+              <div className="border-border/40 mb-1 flex items-center justify-between border-b px-1 pb-1.5">
+                <p className="text-foreground text-[10px] font-black tracking-wider uppercase">
+                  Column 1
+                </p>
+                <span className="text-muted text-[9px] font-bold">
+                  {leftSections.length} sections
+                </span>
+              </div>
+              {leftSections.map((section) => renderSectionCard(section))}
+            </div>
 
-              <span className="min-w-0 truncate">{section.label}</span>
-            </label>
+            {/* Column 2 (Right/Main) */}
+            <div
+              onDragOver={(e) => e.preventDefault()}
+              onDrop={() => handleDropOnColumn("right")}
+              className={cn(
+                "border-border/60 bg-background/40 flex min-h-[220px] flex-col gap-2 rounded-2xl border p-2.5 transition-all",
+                draggedSectionId ? "bg-accent/5 border-accent/40 border-dashed" : "",
+              )}
+            >
+              <div className="border-border/40 mb-1 flex items-center justify-between border-b px-1 pb-1.5">
+                <p className="text-foreground text-[10px] font-black tracking-wider uppercase">
+                  Column 2
+                </p>
+                <span className="text-muted text-[9px] font-bold">
+                  {rightSections.length} sections
+                </span>
+              </div>
+              {rightSections.map((section) => renderSectionCard(section))}
+            </div>
           </div>
-        ))}
-      </div>
+        </div>
+      ) : (
+        <div className="grid gap-1.5">
+          {sortedSections.map((section) => renderSectionCard(section))}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/apps/studio/features/resume/store/resume-store.ts b/apps/studio/features/resume/store/resume-store.ts
index f6886185..d988b895 100644
--- a/apps/studio/features/resume/store/resume-store.ts
+++ b/apps/studio/features/resume/store/resume-store.ts
@@ -47,6 +47,7 @@ interface ResumeStoreState {
   selectSection: (section: ResumeSectionId) => void;
   setSectionVisibility: (section: ResumeSectionId, visible: boolean) => void;
   reorderSections: (fromIndex: number, toIndex: number) => void;
+  updateSectionColumn: (sectionId: ResumeSectionId, column: "left" | "right") => void;
   setTemplateId: (templateId: string) => void;
   updateCustomization: (values: Partial<ResumeCustomization>) => void;
   updateBasics: (values: Partial<ResumeBasics>) => void;
@@ -170,6 +171,9 @@ export const useResumeStore = create<ResumeStoreState>((set, get) => ({
 
   reorderSections: (fromIndex, toIndex) =>
     set((state) => {
+      if (fromIndex < 2 || toIndex < 2) {
+        return {};
+      }
       const reorderedSections = reorderItems(state.resume.sections, fromIndex, toIndex).map(
         (section, index) => ({
           ...section,
@@ -185,6 +189,16 @@ export const useResumeStore = create<ResumeStoreState>((set, get) => ({
       };
     }),
 
+  updateSectionColumn: (sectionId, column) =>
+    set((state) => ({
+      resume: withTimestamp({
+        ...state.resume,
+        sections: state.resume.sections.map((section) =>
+          section.id === sectionId ? { ...section, column } : section,
+        ),
+      }),
+    })),
+
   setTemplateId: (templateId) =>
     set((state) => ({
       resume: withTimestamp({
diff --git a/apps/studio/features/resume/utils/normalize-data.ts b/apps/studio/features/resume/utils/normalize-data.ts
index 1e7f20c4..7edba698 100644
--- a/apps/studio/features/resume/utils/normalize-data.ts
+++ b/apps/studio/features/resume/utils/normalize-data.ts
@@ -88,13 +88,22 @@ function normalizeSections(value: Partial<ResumeData> | null | undefined) {
     };
   });
 
-  return merged
-    .slice()
-    .sort((left, right) => left.order - right.order)
-    .map((section, index) => ({
+  const basicsSection = merged.find((s) => s.id === "basics") || defaultSections[0];
+  const linksSection = merged.find((s) => s.id === "links") || defaultSections[1];
+  const otherSections = merged
+    .filter((s) => s.id !== "basics" && s.id !== "links")
+    .sort((left, right) => left.order - right.order);
+
+  const finalSections = [
+    { ...basicsSection, order: 0 },
+    { ...linksSection, order: 1 },
+    ...otherSections.map((section, index) => ({
       ...section,
-      order: index,
-    }));
+      order: index + 2,
+    })),
+  ];
+
+  return finalSections;
 }
 
 function normalizeNumericDate(value: string | undefined, maxLength: number) {
diff --git a/apps/studio/types/resume.ts b/apps/studio/types/resume.ts
index 7fc34cb7..2d39fc98 100644
--- a/apps/studio/types/resume.ts
+++ b/apps/studio/types/resume.ts
@@ -24,6 +24,7 @@ export interface ResumeSection {
   label: string;
   visible: boolean;
   order: number;
+  column?: "left" | "right";
 }
 
 export interface ResumeBasics {