diff --git a/packages/web/app/components/board-page/header.tsx b/packages/web/app/components/board-page/header.tsx
index a456b4b0..ff25dbac 100644
--- a/packages/web/app/components/board-page/header.tsx
+++ b/packages/web/app/components/board-page/header.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React, { useState, useMemo } from 'react';
 import dynamic from 'next/dynamic';
-import { Flex, Button, Dropdown, MenuProps } from 'antd';
+import { Flex, Button, Dropdown, MenuProps, Badge } from 'antd';
 import { Header } from 'antd/es/layout/layout';
 import { useSession, signOut } from 'next-auth/react';
 import { usePathname, useSearchParams, useRouter } from 'next/navigation';
@@ -9,8 +9,10 @@ import SearchButton from '../search-drawer/search-button';
 import SearchClimbNameInput from '../search-drawer/search-climb-name-input';
 import { UISearchParamsProvider } from '../queue-control/ui-searchparams-provider';
 import { BoardDetails } from '@/app/lib/types';
-import { ExperimentOutlined } from '@ant-design/icons';
+import { ExperimentOutlined, FileTextOutlined } from '@ant-design/icons';
 import { themeTokens } from '@/app/theme/theme-config';
+import { useDrafts } from '../drafts/drafts-context';
+import { DraftsDrawer } from '../drafts/drafts-drawer';
 
 // Dynamically import bluetooth component to reduce initial bundle size
 // LED placement data (~50KB) is only loaded when bluetooth is actually used
@@ -75,11 +77,23 @@ function usePageMode(): PageMode {
 export default function BoardSeshHeader({ boardDetails, angle }: BoardSeshHeaderProps) {
   const { data: session } = useSession();
   const { currentClimb } = useQueueContext();
+  const { drafts } = useDrafts();
   const [showAuthModal, setShowAuthModal] = useState(false);
+  const [showDraftsDrawer, setShowDraftsDrawer] = useState(false);
   const pageMode = usePageMode();
   const searchParams = useSearchParams();
   const router = useRouter();
 
+  // Filter drafts count for current board configuration
+  const filteredDraftsCount = useMemo(() => {
+    return drafts.filter(
+      (draft) =>
+        draft.boardName === boardDetails.board_name &&
+        draft.layoutId === boardDetails.layout_id &&
+        draft.sizeId === boardDetails.size_id,
+    ).length;
+  }, [drafts, boardDetails]);
+
   // Build back to list URL for play/view pages
   const getBackToListUrl = () => {
     const { board_name, layout_name, size_name, size_description, set_names } = boardDetails;
@@ -226,9 +240,22 @@ export default function BoardSeshHeader({ boardDetails, angle }: BoardSeshHeader
 
           {/* Right Section */}
           <Flex gap={4} align="center">
-            {/* Create mode: Show cancel and publish buttons */}
+            {/* Create mode: Show cancel, drafts, and publish buttons */}
             {pageMode === 'create' ? (
-              <CreateModeButtons />
+              <>
+                <CreateModeButtons />
+                {/* Drafts button with badge - only shown on create page */}
+                {filteredDraftsCount > 0 && (
+                  <Badge count={filteredDraftsCount} size="small" offset={[-4, 4]}>
+                    <Button
+                      icon={<FileTextOutlined />}
+                      type="text"
+                      title="View drafts"
+                      onClick={() => setShowDraftsDrawer(true)}
+                    />
+                  </Badge>
+                )}
+              </>
             ) : (
               <>
                 {angle !== undefined && <AngleSelector boardName={boardDetails.board_name} currentAngle={angle} currentClimb={currentClimb} />}
@@ -284,6 +311,12 @@ export default function BoardSeshHeader({ boardDetails, angle }: BoardSeshHeader
         title="Sign in to Boardsesh"
         description="Sign in to access all features including saving favorites, tracking ascents, and more."
       />
+
+      <DraftsDrawer
+        open={showDraftsDrawer}
+        onClose={() => setShowDraftsDrawer(false)}
+        boardDetails={boardDetails}
+      />
     </Header>
   );
 }
diff --git a/packages/web/app/components/climbs-list/climbs-list-item.tsx b/packages/web/app/components/climbs-list/climbs-list-item.tsx
new file mode 100644
index 00000000..08f953fe
--- /dev/null
+++ b/packages/web/app/components/climbs-list/climbs-list-item.tsx
@@ -0,0 +1,283 @@
+'use client';
+
+import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import { Row, Col, Dropdown, Button, Typography } from 'antd';
+import { MoreOutlined } from '@ant-design/icons';
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
+import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { useSwipeable } from 'react-swipeable';
+import BoardRenderer from '../board-renderer/board-renderer';
+import { themeTokens } from '@/app/theme/theme-config';
+import { ClimbsListItem, ClimbsListItemProps } from './types';
+import styles from './climbs-list.module.css';
+
+const { Text } = Typography;
+
+// Threshold in pixels to trigger the swipe action
+const SWIPE_THRESHOLD = 100;
+// Maximum swipe distance
+const MAX_SWIPE = 120;
+
+// Pre-computed transition strings
+const TRANSITION_FAST = `transform ${themeTokens.transitions.fast}, opacity ${themeTokens.transitions.fast}`;
+const TRANSITION_NONE = 'none';
+
+function ClimbsListItemComponent<T extends ClimbsListItem>({
+  item,
+  index,
+  boardDetails,
+  litUpHoldsMap,
+  mirrored = false,
+  title,
+  subtitle,
+  isSelected = false,
+  isDisabled = false,
+  menuItems,
+  swipeLeftAction,
+  swipeRightAction,
+  onDoubleClick,
+  draggable: isDraggable = true,
+}: ClimbsListItemProps<T>) {
+  const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
+  const [isSwipeComplete, setIsSwipeComplete] = useState(false);
+  const isHorizontalSwipeRef = useRef<boolean | null>(null);
+  const itemRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const leftActionRef = useRef<HTMLDivElement>(null);
+  const rightActionRef = useRef<HTMLDivElement>(null);
+
+  // Update swipe visuals via DOM directly for smoother performance
+  const updateSwipeVisuals = useCallback((offset: number) => {
+    if (contentRef.current) {
+      contentRef.current.style.transform = `translateX(${offset}px)`;
+      contentRef.current.style.transition = offset === 0 ? TRANSITION_FAST : TRANSITION_NONE;
+    }
+    if (leftActionRef.current && swipeLeftAction) {
+      const opacity = Math.min(1, Math.abs(offset) / SWIPE_THRESHOLD);
+      leftActionRef.current.style.opacity = String(offset < 0 ? opacity : 0);
+      leftActionRef.current.style.visibility = offset < 0 ? 'visible' : 'hidden';
+    }
+    if (rightActionRef.current && swipeRightAction) {
+      const opacity = Math.min(1, offset / SWIPE_THRESHOLD);
+      rightActionRef.current.style.opacity = String(offset > 0 ? opacity : 0);
+      rightActionRef.current.style.visibility = offset > 0 ? 'visible' : 'hidden';
+    }
+  }, [swipeLeftAction, swipeRightAction]);
+
+  const handleSwipeLeft = useCallback(() => {
+    if (!swipeLeftAction) return;
+    setIsSwipeComplete(true);
+    setTimeout(() => {
+      swipeLeftAction.onSwipe();
+      updateSwipeVisuals(0);
+      setIsSwipeComplete(false);
+    }, 200);
+  }, [swipeLeftAction, updateSwipeVisuals]);
+
+  const handleSwipeRight = useCallback(() => {
+    if (!swipeRightAction) return;
+    updateSwipeVisuals(0);
+    swipeRightAction.onSwipe();
+  }, [swipeRightAction, updateSwipeVisuals]);
+
+  const swipeHandlers = useSwipeable({
+    onSwiping: (eventData) => {
+      const { deltaX, deltaY, event } = eventData;
+
+      // On first movement, determine if this is a horizontal or vertical swipe
+      if (isHorizontalSwipeRef.current === null) {
+        const absX = Math.abs(deltaX);
+        const absY = Math.abs(deltaY);
+        if (absX > 10 || absY > 10) {
+          isHorizontalSwipeRef.current = absX > absY;
+        }
+        return;
+      }
+
+      // If it's a vertical swipe, don't interfere
+      if (!isHorizontalSwipeRef.current) {
+        return;
+      }
+
+      // Horizontal swipe - prevent scroll and update offset
+      if ('nativeEvent' in event) {
+        event.nativeEvent.preventDefault();
+      } else {
+        event.preventDefault();
+      }
+
+      // Only allow swipe in directions that have actions
+      let clampedOffset = deltaX;
+      if (!swipeLeftAction && deltaX < 0) clampedOffset = 0;
+      if (!swipeRightAction && deltaX > 0) clampedOffset = 0;
+      clampedOffset = Math.max(-MAX_SWIPE, Math.min(MAX_SWIPE, clampedOffset));
+
+      // Update visuals via DOM for smoother performance (no re-render)
+      updateSwipeVisuals(clampedOffset);
+    },
+    onSwipedLeft: (eventData) => {
+      if (isHorizontalSwipeRef.current && swipeLeftAction && Math.abs(eventData.deltaX) >= SWIPE_THRESHOLD) {
+        handleSwipeLeft();
+      } else {
+        updateSwipeVisuals(0);
+      }
+      isHorizontalSwipeRef.current = null;
+    },
+    onSwipedRight: (eventData) => {
+      if (isHorizontalSwipeRef.current && swipeRightAction && Math.abs(eventData.deltaX) >= SWIPE_THRESHOLD) {
+        handleSwipeRight();
+      } else {
+        updateSwipeVisuals(0);
+      }
+      isHorizontalSwipeRef.current = null;
+    },
+    onTouchEndOrOnMouseUp: () => {
+      isHorizontalSwipeRef.current = null;
+    },
+    trackMouse: false,
+    trackTouch: true,
+    preventScrollOnSwipe: false,
+  });
+
+  useEffect(() => {
+    const element = itemRef.current;
+
+    if (element && isDraggable) {
+      return combine(
+        draggable({
+          element,
+          getInitialData: () => ({ index, id: item.uuid }),
+        }),
+        dropTargetForElements({
+          element,
+          getData: ({ input }) =>
+            attachClosestEdge(
+              { index, id: item.uuid },
+              {
+                element,
+                input,
+                allowedEdges: ['top', 'bottom'],
+              },
+            ),
+          onDrag({ self }) {
+            const edge = extractClosestEdge(self.data);
+            setClosestEdge(edge);
+          },
+          onDragLeave() {
+            setClosestEdge(null);
+          },
+          onDrop() {
+            setClosestEdge(null);
+          },
+        }),
+      );
+    }
+  }, [index, item.uuid, isDraggable]);
+
+  // Memoize swipe action styles (static parts only, dynamic handled via refs)
+  const rightActionStyle = useMemo(() => swipeRightAction ? ({
+    left: 0,
+    backgroundColor: swipeRightAction.color,
+    justifyContent: 'flex-start' as const,
+    paddingLeft: themeTokens.spacing[4],
+    opacity: 0,
+    visibility: 'hidden' as const,
+  }) : undefined, [swipeRightAction]);
+
+  const leftActionStyle = useMemo(() => swipeLeftAction ? ({
+    right: 0,
+    backgroundColor: swipeLeftAction.color,
+    justifyContent: 'flex-end' as const,
+    paddingRight: themeTokens.spacing[4],
+    opacity: 0,
+    visibility: 'hidden' as const,
+  }) : undefined, [swipeLeftAction]);
+
+  return (
+    <div ref={itemRef} data-testid="climbs-list-item" className={styles.itemWrapper}>
+      <div className={styles.itemContainer}>
+        {/* Left action background (revealed on swipe right) */}
+        {swipeRightAction && (
+          <div
+            ref={rightActionRef}
+            className={styles.swipeAction}
+            style={rightActionStyle}
+          >
+            {swipeRightAction.icon}
+          </div>
+        )}
+
+        {/* Right action background (revealed on swipe left) */}
+        {swipeLeftAction && (
+          <div
+            ref={leftActionRef}
+            className={styles.swipeAction}
+            style={leftActionStyle}
+          >
+            {swipeLeftAction.icon}
+          </div>
+        )}
+
+        {/* Swipeable content */}
+        <div
+          ref={contentRef}
+          {...swipeHandlers}
+          className={styles.itemContent}
+          style={useMemo(() => ({
+            backgroundColor: isSelected
+              ? themeTokens.semantic.selected
+              : isDisabled
+                ? themeTokens.neutral[100]
+                : themeTokens.semantic.surface,
+            opacity: isSwipeComplete ? 0 : isDisabled ? 0.6 : 1,
+            cursor: isDraggable ? 'grab' : 'default',
+            borderLeft: isSelected ? `3px solid ${themeTokens.colors.primary}` : undefined,
+            // transform and transition handled via ref for smoother swiping
+          }), [isSelected, isDisabled, isSwipeComplete, isDraggable])}
+          onDoubleClick={onDoubleClick}
+        >
+          <Row style={{ width: '100%' }} gutter={[8, 8]} align="middle" wrap={false}>
+            {/* Thumbnail */}
+            <Col xs={6} sm={5}>
+              <BoardRenderer
+                boardDetails={boardDetails}
+                litUpHoldsMap={litUpHoldsMap}
+                mirrored={mirrored}
+                thumbnail
+              />
+            </Col>
+
+            {/* Content */}
+            <Col xs={menuItems ? 15 : 18} sm={menuItems ? 17 : 19}>
+              <div className={styles.textContent}>
+                <Text strong className={styles.title}>
+                  {title}
+                </Text>
+                {subtitle && (
+                  <Text type="secondary" className={styles.subtitle}>
+                    {subtitle}
+                  </Text>
+                )}
+              </div>
+            </Col>
+
+            {/* Menu */}
+            {menuItems && menuItems.length > 0 && (
+              <Col xs={3} sm={2}>
+                <Dropdown menu={{ items: menuItems }} trigger={['click']} placement="bottomRight">
+                  <Button type="text" icon={<MoreOutlined />} />
+                </Dropdown>
+              </Col>
+            )}
+          </Row>
+        </div>
+        {closestEdge && <DropIndicator edge={closestEdge} gap="1px" />}
+      </div>
+    </div>
+  );
+}
+
+export default ClimbsListItemComponent;
diff --git a/packages/web/app/components/climbs-list/climbs-list.module.css b/packages/web/app/components/climbs-list/climbs-list.module.css
new file mode 100644
index 00000000..8f93c6e4
--- /dev/null
+++ b/packages/web/app/components/climbs-list/climbs-list.module.css
@@ -0,0 +1,53 @@
+.itemWrapper {
+  /* Wrapper for drag handle */
+}
+
+.itemContainer {
+  position: relative;
+  overflow: hidden;
+  border-bottom: 1px solid var(--ant-color-border);
+}
+
+.swipeAction {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 120px;
+  display: flex;
+  align-items: center;
+  color: white;
+  font-size: 20px;
+}
+
+.itemContent {
+  display: flex;
+  align-items: center;
+  padding: 12px 8px;
+  position: relative;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.textContent {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+}
+
+.title {
+  font-size: 14px;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.subtitle {
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/packages/web/app/components/climbs-list/climbs-list.tsx b/packages/web/app/components/climbs-list/climbs-list.tsx
new file mode 100644
index 00000000..5897425b
--- /dev/null
+++ b/packages/web/app/components/climbs-list/climbs-list.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { Flex, Empty, Spin, Typography } from 'antd';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { reorder } from '@atlaskit/pragmatic-drag-and-drop/reorder';
+import ClimbsListItem from './climbs-list-item';
+import { ClimbsListProps, ClimbsListItem as ClimbsListItemType } from './types';
+
+const { Paragraph } = Typography;
+
+function ClimbsList<T extends ClimbsListItemType>({
+  items,
+  boardDetails: _boardDetails,
+  loading = false,
+  emptyText = 'No items',
+  renderItem,
+  onReorder,
+}: ClimbsListProps<T>) {
+  // Monitor for drag-and-drop events
+  useEffect(() => {
+    if (!onReorder) return;
+
+    const cleanup = monitorForElements({
+      onDrop({ location, source }) {
+        const target = location.current.dropTargets[0];
+        if (!target) return;
+
+        const sourceIndex = Number(source.data.index);
+        const targetIndex = Number(target.data.index);
+
+        if (isNaN(sourceIndex) || isNaN(targetIndex)) return;
+
+        // Skip if dropping on itself
+        if (sourceIndex === targetIndex) return;
+
+        const edge = extractClosestEdge(target.data);
+        let finalIndex = edge === 'bottom' ? targetIndex + 1 : targetIndex;
+
+        // Adjust for the fact that removing the source item shifts indices
+        if (sourceIndex < finalIndex) {
+          finalIndex = finalIndex - 1;
+        }
+
+        // Skip if final position is the same
+        if (sourceIndex === finalIndex) return;
+
+        const newItems = reorder({
+          list: items,
+          startIndex: sourceIndex,
+          finishIndex: finalIndex,
+        });
+
+        onReorder(newItems);
+      },
+    });
+
+    return cleanup;
+  }, [items, onReorder]);
+
+  if (loading) {
+    return (
+      <Flex justify="center" align="center" style={{ padding: '40px 0' }}>
+        <Spin />
+      </Flex>
+    );
+  }
+
+  if (items.length === 0) {
+    return (
+      <Empty
+        description={
+          typeof emptyText === 'string' ? (
+            <Paragraph type="secondary">{emptyText}</Paragraph>
+          ) : (
+            emptyText
+          )
+        }
+      />
+    );
+  }
+
+  return (
+    <Flex vertical>
+      {items.map((item, index) => {
+        const itemProps = renderItem(item, index);
+        return <ClimbsListItem key={item.uuid} {...itemProps} />;
+      })}
+    </Flex>
+  );
+}
+
+export default ClimbsList;
diff --git a/packages/web/app/components/climbs-list/index.ts b/packages/web/app/components/climbs-list/index.ts
new file mode 100644
index 00000000..8a2feca6
--- /dev/null
+++ b/packages/web/app/components/climbs-list/index.ts
@@ -0,0 +1,8 @@
+export { default as ClimbsList } from './climbs-list';
+export { default as ClimbsListItem } from './climbs-list-item';
+export type {
+  ClimbsListItem as ClimbsListItemType,
+  ClimbsListItemProps,
+  ClimbsListProps,
+  SwipeAction,
+} from './types';
diff --git a/packages/web/app/components/climbs-list/types.ts b/packages/web/app/components/climbs-list/types.ts
new file mode 100644
index 00000000..8f97dbb5
--- /dev/null
+++ b/packages/web/app/components/climbs-list/types.ts
@@ -0,0 +1,66 @@
+import { ReactNode } from 'react';
+import { BoardDetails } from '@/app/lib/types';
+import { LitUpHoldsMap } from '../board-renderer/types';
+import { MenuProps } from 'antd';
+
+/**
+ * Base interface for items that can be displayed in a ClimbsList
+ */
+export interface ClimbsListItem {
+  uuid: string;
+}
+
+/**
+ * Swipe action configuration
+ */
+export interface SwipeAction {
+  icon: ReactNode;
+  color: string;
+  onSwipe: () => void;
+}
+
+/**
+ * Props for rendering item content
+ */
+export interface ClimbsListItemContentProps<T extends ClimbsListItem> {
+  item: T;
+  boardDetails: BoardDetails;
+}
+
+/**
+ * Props for the ClimbsListItem component
+ */
+export interface ClimbsListItemProps<T extends ClimbsListItem> {
+  item: T;
+  index: number;
+  boardDetails: BoardDetails;
+  // Content rendering
+  litUpHoldsMap: LitUpHoldsMap;
+  mirrored?: boolean;
+  title: ReactNode;
+  subtitle?: ReactNode;
+  // Styling
+  isSelected?: boolean;
+  isDisabled?: boolean;
+  // Actions
+  menuItems?: MenuProps['items'];
+  swipeLeftAction?: SwipeAction;
+  swipeRightAction?: SwipeAction;
+  onDoubleClick?: () => void;
+  // Drag and drop
+  draggable?: boolean;
+}
+
+/**
+ * Props for the ClimbsList component
+ */
+export interface ClimbsListProps<T extends ClimbsListItem> {
+  items: T[];
+  boardDetails: BoardDetails;
+  loading?: boolean;
+  emptyText?: ReactNode;
+  // Render props
+  renderItem: (item: T, index: number) => ClimbsListItemProps<T>;
+  // Reordering
+  onReorder?: (items: T[]) => void;
+}
diff --git a/packages/web/app/components/create-climb/create-climb-form.tsx b/packages/web/app/components/create-climb/create-climb-form.tsx
index 1db7c169..7a84f819 100644
--- a/packages/web/app/components/create-climb/create-climb-form.tsx
+++ b/packages/web/app/components/create-climb/create-climb-form.tsx
@@ -4,7 +4,7 @@ import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 import { Input, Switch, Button, Typography, Tag, Alert, Flex } from 'antd';
 import type { InputRef } from 'antd';
 import { SettingOutlined, EditOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { track } from '@vercel/analytics';
 import BoardRenderer from '../board-renderer/board-renderer';
 import { useBoardProvider } from '../board-provider/board-provider-context';
@@ -15,7 +15,8 @@ import { constructClimbListWithSlugs } from '@/app/lib/url-utils';
 import { convertLitUpHoldsStringToMap } from '../board-renderer/util';
 import AuthModal from '../auth/auth-modal';
 import { useCreateClimbContext } from './create-climb-context';
-import { themeTokens } from '@/app/theme/theme-config';
+import { useDrafts, DraftClimb } from '../drafts/drafts-context';
+import { getDraftClimb } from '@/app/lib/draft-climbs-db';
 import styles from './create-climb-form.module.css';
 
 const { Text } = Typography;
@@ -36,7 +37,16 @@ interface CreateClimbFormProps {
 
 export default function CreateClimbForm({ boardDetails, angle, forkFrames, forkName }: CreateClimbFormProps) {
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const draftIdFromUrl = searchParams.get('draftId');
   const { isAuthenticated, saveClimb } = useBoardProvider();
+  const { createDraft, updateDraft, deleteDraft } = useDrafts();
+
+  const [currentDraft, setCurrentDraft] = useState<DraftClimb | null>(null);
+  const [isLoadingDraft, setIsLoadingDraft] = useState(!!draftIdFromUrl);
+  const autoSaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastInitializedDraftIdRef = useRef<string | null | undefined>(undefined);
+  const isMountedRef = useRef(true);
 
   // Convert fork frames to initial holds map if provided
   const initialHoldsMap = useMemo(() => {
@@ -55,6 +65,7 @@ export default function CreateClimbForm({ boardDetails, angle, forkFrames, forkN
     totalHolds,
     isValid,
     resetHolds: originalResetHolds,
+    setLitUpHoldsMap,
   } = useCreateClimb(boardDetails.board_name, { initialHoldsMap });
 
   const { isConnected, sendFramesToBoard } = useBoardBluetooth({ boardDetails });
@@ -73,6 +84,116 @@ export default function CreateClimbForm({ boardDetails, angle, forkFrames, forkN
   const [showSettingsPanel, setShowSettingsPanel] = useState(false);
   const titleInputRef = useRef<InputRef>(null);
 
+  // Track mounted state for cleanup
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  // Load existing draft or create a new one on mount or when draftId changes
+  useEffect(() => {
+    // Skip if we've already initialized with this draftId
+    if (lastInitializedDraftIdRef.current === draftIdFromUrl) return;
+    lastInitializedDraftIdRef.current = draftIdFromUrl;
+
+    const initializeDraft = async () => {
+      setIsLoadingDraft(true);
+      try {
+        if (draftIdFromUrl) {
+          // Resuming an existing draft
+          const existingDraft = await getDraftClimb(draftIdFromUrl);
+          if (!isMountedRef.current) return;
+
+          if (existingDraft) {
+            setCurrentDraft(existingDraft);
+            // Restore form values
+            setClimbName(existingDraft.name);
+            setDescription(existingDraft.description);
+            setIsDraft(existingDraft.isDraft);
+            // Restore holds map
+            if (Object.keys(existingDraft.litUpHoldsMap).length > 0) {
+              setLitUpHoldsMap(existingDraft.litUpHoldsMap);
+            }
+          }
+          setIsLoadingDraft(false);
+        } else {
+          // Create a new draft immediately
+          const newDraft = await createDraft({
+            boardName: boardDetails.board_name,
+            layoutId: boardDetails.layout_id,
+            sizeId: boardDetails.size_id,
+            setIds: boardDetails.set_ids,
+            angle,
+            layoutName: boardDetails.layout_name,
+            sizeName: boardDetails.size_name,
+            sizeDescription: boardDetails.size_description,
+            setNames: boardDetails.set_names,
+          });
+          if (!isMountedRef.current) return;
+
+          setCurrentDraft(newDraft);
+          setIsLoadingDraft(false);
+          // Update ref to prevent re-initialization
+          lastInitializedDraftIdRef.current = newDraft.uuid;
+          // Update URL with draft ID using Next.js router (shallow to avoid re-render)
+          const newParams = new URLSearchParams(searchParams.toString());
+          newParams.set('draftId', newDraft.uuid);
+          router.replace(`?${newParams.toString()}`, { scroll: false });
+        }
+      } catch (error) {
+        console.error('Failed to initialize draft:', error);
+        if (isMountedRef.current) {
+          setIsLoadingDraft(false);
+        }
+      }
+    };
+
+    initializeDraft();
+  }, [draftIdFromUrl, boardDetails, angle, createDraft, setLitUpHoldsMap, searchParams, router]);
+
+  // Use ref for draft UUID to avoid triggering saves when currentDraft reference changes
+  const currentDraftIdRef = useRef<string | null>(null);
+  useEffect(() => {
+    currentDraftIdRef.current = currentDraft?.uuid ?? null;
+  }, [currentDraft]);
+
+  // Debounced auto-save when form data changes
+  useEffect(() => {
+    // Skip if not initialized or loading
+    if (!currentDraftIdRef.current || isLoadingDraft) return;
+
+    if (autoSaveTimerRef.current) {
+      clearTimeout(autoSaveTimerRef.current);
+    }
+
+    autoSaveTimerRef.current = setTimeout(async () => {
+      if (!currentDraftIdRef.current || !isMountedRef.current) return;
+
+      const frames = generateFramesString();
+
+      try {
+        await updateDraft(currentDraftIdRef.current, {
+          name: climbName || '',
+          description: description || '',
+          frames,
+          litUpHoldsMap,
+          isDraft,
+          angle,
+        });
+      } catch (error) {
+        console.error('Failed to auto-save draft:', error);
+      }
+    }, 500);
+
+    return () => {
+      if (autoSaveTimerRef.current) {
+        clearTimeout(autoSaveTimerRef.current);
+      }
+    };
+  }, [litUpHoldsMap, climbName, description, isDraft, isLoadingDraft, generateFramesString, updateDraft, angle]);
+
   // Send frames to board whenever litUpHoldsMap changes and we're connected
   useEffect(() => {
     if (isConnected) {
@@ -151,6 +272,15 @@ export default function CreateClimbForm({ boardDetails, angle, forkFrames, forkN
         angle,
       });
 
+      // Delete the local draft after successful save
+      if (currentDraft) {
+        try {
+          await deleteDraft(currentDraft.uuid);
+        } catch (error) {
+          console.error('Failed to delete draft after save:', error);
+        }
+      }
+
       track('Climb Created', {
         boardLayout: boardDetails.layout_name || '',
         isDraft: isDraft,
@@ -175,7 +305,7 @@ export default function CreateClimbForm({ boardDetails, angle, forkFrames, forkN
     } finally {
       setIsSaving(false);
     }
-  }, [generateFramesString, saveClimb, boardDetails, climbName, description, isDraft, angle, totalHolds, router]);
+  }, [generateFramesString, saveClimb, boardDetails, climbName, description, isDraft, angle, totalHolds, router, currentDraft, deleteDraft]);
 
   const handlePublish = useCallback(async () => {
     if (!isValid || !climbName.trim()) {
@@ -206,7 +336,16 @@ export default function CreateClimbForm({ boardDetails, angle, forkFrames, forkN
     }
   };
 
-  const handleCancel = useCallback(() => {
+  const handleCancel = useCallback(async () => {
+    // Delete the current draft when canceling
+    if (currentDraft) {
+      try {
+        await deleteDraft(currentDraft.uuid);
+      } catch (error) {
+        console.error('Failed to delete draft on cancel:', error);
+      }
+    }
+
     const listUrl = constructClimbListWithSlugs(
       boardDetails.board_name,
       boardDetails.layout_name || '',
@@ -216,7 +355,7 @@ export default function CreateClimbForm({ boardDetails, angle, forkFrames, forkN
       angle,
     );
     router.push(listUrl);
-  }, [boardDetails, angle, router]);
+  }, [boardDetails, angle, router, currentDraft, deleteDraft]);
 
   const canSave = isAuthenticated && isValid && climbName.trim().length > 0;
 
diff --git a/packages/web/app/components/create-climb/use-create-climb.ts b/packages/web/app/components/create-climb/use-create-climb.ts
index 1c9ac01b..10b8b572 100644
--- a/packages/web/app/components/create-climb/use-create-climb.ts
+++ b/packages/web/app/components/create-climb/use-create-climb.ts
@@ -134,6 +134,7 @@ export function useCreateClimb(boardName: BoardName, options?: UseCreateClimbOpt
 
   return {
     litUpHoldsMap,
+    setLitUpHoldsMap,
     handleHoldClick,
     generateFramesString,
     startingCount,
diff --git a/packages/web/app/components/drafts/drafts-context.tsx b/packages/web/app/components/drafts/drafts-context.tsx
new file mode 100644
index 00000000..139f1938
--- /dev/null
+++ b/packages/web/app/components/drafts/drafts-context.tsx
@@ -0,0 +1,138 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect, useCallback, useMemo } from 'react';
+import {
+  DraftClimb,
+  CreateDraftOptions,
+  getAllDraftClimbs,
+  createDraftClimb,
+  updateDraftClimb,
+  deleteDraftClimb,
+  getDraftClimbsCount,
+  reorderDraftClimbs,
+} from '@/app/lib/draft-climbs-db';
+import { LitUpHoldsMap } from '../board-renderer/types';
+
+interface DraftsContextType {
+  drafts: DraftClimb[];
+  draftsCount: number;
+  isLoading: boolean;
+  createDraft: (options: CreateDraftOptions) => Promise<DraftClimb>;
+  updateDraft: (
+    uuid: string,
+    updates: {
+      name?: string;
+      description?: string;
+      frames?: string;
+      litUpHoldsMap?: LitUpHoldsMap;
+      isDraft?: boolean;
+      angle?: number;
+    },
+  ) => Promise<void>;
+  deleteDraft: (uuid: string) => Promise<void>;
+  reorderDrafts: (reorderedDrafts: DraftClimb[]) => Promise<void>;
+  refreshDrafts: () => Promise<void>;
+}
+
+const DraftsContext = createContext<DraftsContextType | undefined>(undefined);
+
+export const DraftsProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [drafts, setDrafts] = useState<DraftClimb[]>([]);
+  const [draftsCount, setDraftsCount] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const loadDrafts = useCallback(async () => {
+    try {
+      const [loadedDrafts, count] = await Promise.all([getAllDraftClimbs(), getDraftClimbsCount()]);
+      setDrafts(loadedDrafts);
+      setDraftsCount(count);
+    } catch (error) {
+      console.error('Failed to load drafts:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // Load drafts on mount
+  useEffect(() => {
+    loadDrafts();
+  }, [loadDrafts]);
+
+  const createDraft = useCallback(async (options: CreateDraftOptions): Promise<DraftClimb> => {
+    const newDraft = await createDraftClimb(options);
+    setDrafts((prev) => [newDraft, ...prev]);
+    setDraftsCount((prev) => prev + 1);
+    return newDraft;
+  }, []);
+
+  const updateDraft = useCallback(
+    async (
+      uuid: string,
+      updates: {
+        name?: string;
+        description?: string;
+        frames?: string;
+        litUpHoldsMap?: LitUpHoldsMap;
+        isDraft?: boolean;
+        angle?: number;
+      },
+    ): Promise<void> => {
+      await updateDraftClimb(uuid, updates);
+      setDrafts((prev) =>
+        prev.map((draft) =>
+          draft.uuid === uuid ? { ...draft, ...updates, updatedAt: Date.now() } : draft,
+        ),
+      );
+    },
+    [],
+  );
+
+  const deleteDraftHandler = useCallback(async (uuid: string): Promise<void> => {
+    await deleteDraftClimb(uuid);
+    setDrafts((prev) => prev.filter((draft) => draft.uuid !== uuid));
+    setDraftsCount((prev) => Math.max(0, prev - 1));
+  }, []);
+
+  const reorderDrafts = useCallback(async (reorderedDrafts: DraftClimb[]) => {
+    // Update local state with new order
+    // We merge the reordered subset back into the full drafts array
+    setDrafts((prev) => {
+      const reorderedIds = new Set(reorderedDrafts.map((d) => d.uuid));
+      const otherDrafts = prev.filter((d) => !reorderedIds.has(d.uuid));
+      return [...reorderedDrafts, ...otherDrafts];
+    });
+
+    // Persist the new order to IndexedDB
+    try {
+      await reorderDraftClimbs(reorderedDrafts.map((d) => d.uuid));
+    } catch (error) {
+      console.error('Failed to persist draft order:', error);
+    }
+  }, []);
+
+  const value = useMemo<DraftsContextType>(
+    () => ({
+      drafts,
+      draftsCount,
+      isLoading,
+      createDraft,
+      updateDraft,
+      deleteDraft: deleteDraftHandler,
+      reorderDrafts,
+      refreshDrafts: loadDrafts,
+    }),
+    [drafts, draftsCount, isLoading, createDraft, updateDraft, deleteDraftHandler, reorderDrafts, loadDrafts],
+  );
+
+  return <DraftsContext.Provider value={value}>{children}</DraftsContext.Provider>;
+};
+
+export const useDrafts = (): DraftsContextType => {
+  const context = useContext(DraftsContext);
+  if (!context) {
+    throw new Error('useDrafts must be used within a DraftsProvider');
+  }
+  return context;
+};
+
+export type { DraftsContextType, DraftClimb };
diff --git a/packages/web/app/components/drafts/drafts-drawer.tsx b/packages/web/app/components/drafts/drafts-drawer.tsx
new file mode 100644
index 00000000..b5be06be
--- /dev/null
+++ b/packages/web/app/components/drafts/drafts-drawer.tsx
@@ -0,0 +1,143 @@
+'use client';
+
+import React, { useMemo, useCallback } from 'react';
+import { Drawer, Typography } from 'antd';
+import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
+import { useRouter } from 'next/navigation';
+import { useDrafts, DraftClimb } from './drafts-context';
+import { generateLayoutSlug, generateSizeSlug, generateSetSlug } from '@/app/lib/url-utils';
+import { BoardDetails } from '@/app/lib/types';
+import { ClimbsList, ClimbsListItemProps } from '../climbs-list';
+import { themeTokens } from '@/app/theme/theme-config';
+
+const { Paragraph } = Typography;
+
+interface DraftsDrawerProps {
+  open: boolean;
+  onClose: () => void;
+  boardDetails: BoardDetails;
+}
+
+function formatRelativeTime(timestamp: number): string {
+  const now = Date.now();
+  const diff = now - timestamp;
+  const minutes = Math.floor(diff / 60000);
+  const hours = Math.floor(diff / 3600000);
+  const days = Math.floor(diff / 86400000);
+
+  if (minutes < 1) return 'Just now';
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  if (days < 7) return `${days}d ago`;
+  return new Date(timestamp).toLocaleDateString();
+}
+
+export function DraftsDrawer({ open, onClose, boardDetails }: DraftsDrawerProps) {
+  const router = useRouter();
+  const { drafts, isLoading, deleteDraft, reorderDrafts } = useDrafts();
+
+  // Filter drafts to only show those matching the current board configuration
+  const filteredDrafts = useMemo(() => {
+    return drafts.filter(
+      (draft) =>
+        draft.boardName === boardDetails.board_name &&
+        draft.layoutId === boardDetails.layout_id &&
+        draft.sizeId === boardDetails.size_id,
+    );
+  }, [drafts, boardDetails]);
+
+  const handleEdit = useCallback(
+    (draft: DraftClimb) => {
+      let createUrl: string;
+
+      if (draft.layoutName && draft.sizeName && draft.setNames) {
+        createUrl = `/${draft.boardName}/${generateLayoutSlug(draft.layoutName)}/${generateSizeSlug(draft.sizeName)}/${generateSetSlug(draft.setNames)}/${draft.angle}/create?draftId=${draft.uuid}`;
+      } else {
+        createUrl = `/${draft.boardName}/${draft.layoutId}/${draft.sizeId}/${draft.setIds.join(',')}/${draft.angle}/create?draftId=${draft.uuid}`;
+      }
+
+      router.push(createUrl);
+      onClose();
+    },
+    [router, onClose],
+  );
+
+  const handleDelete = useCallback(
+    async (uuid: string) => {
+      try {
+        await deleteDraft(uuid);
+      } catch (error) {
+        console.error('Failed to delete draft:', error);
+      }
+    },
+    [deleteDraft],
+  );
+
+  const handleReorder = useCallback(
+    (reorderedDrafts: DraftClimb[]) => {
+      reorderDrafts(reorderedDrafts);
+    },
+    [reorderDrafts],
+  );
+
+  const renderItem = useCallback(
+    (draft: DraftClimb, index: number): ClimbsListItemProps<DraftClimb> => {
+      const holdCount = Object.keys(draft.litUpHoldsMap).length;
+
+      return {
+        item: draft,
+        index,
+        boardDetails,
+        litUpHoldsMap: draft.litUpHoldsMap,
+        mirrored: false,
+        title: draft.name || 'Untitled',
+        subtitle: `${holdCount} holds · ${draft.angle}° · ${formatRelativeTime(draft.updatedAt)}`,
+        draggable: true,
+        menuItems: [
+          {
+            key: 'resume',
+            label: 'Resume',
+            icon: <EditOutlined />,
+            onClick: () => handleEdit(draft),
+          },
+          {
+            key: 'delete',
+            label: 'Delete',
+            icon: <DeleteOutlined />,
+            danger: true,
+            onClick: () => handleDelete(draft.uuid),
+          },
+        ],
+        swipeLeftAction: {
+          icon: <DeleteOutlined style={{ color: 'white', fontSize: 20 }} />,
+          color: themeTokens.colors.error,
+          onSwipe: () => handleDelete(draft.uuid),
+        },
+        swipeRightAction: {
+          icon: <EditOutlined style={{ color: 'white', fontSize: 20 }} />,
+          color: themeTokens.colors.primary,
+          onSwipe: () => handleEdit(draft),
+        },
+        onDoubleClick: () => handleEdit(draft),
+      };
+    },
+    [boardDetails, handleEdit, handleDelete],
+  );
+
+  return (
+    <Drawer title="Draft Climbs" placement="right" onClose={onClose} open={open} width={420}>
+      <ClimbsList
+        items={filteredDrafts}
+        boardDetails={boardDetails}
+        loading={isLoading}
+        emptyText={
+          <Paragraph type="secondary">
+            No drafts yet. Start creating a climb and it will be automatically saved here.
+          </Paragraph>
+        }
+        renderItem={renderItem}
+        onReorder={handleReorder}
+      />
+    </Drawer>
+  );
+}
diff --git a/packages/web/app/components/providers/persistent-session-wrapper.tsx b/packages/web/app/components/providers/persistent-session-wrapper.tsx
index 0ad68774..13438df8 100644
--- a/packages/web/app/components/providers/persistent-session-wrapper.tsx
+++ b/packages/web/app/components/providers/persistent-session-wrapper.tsx
@@ -3,6 +3,7 @@
 import React from 'react';
 import { PartyProfileProvider } from '../party-manager/party-profile-context';
 import { PersistentSessionProvider, FloatingSessionThumbnail } from '../persistent-session';
+import { DraftsProvider } from '../drafts/drafts-context';
 
 interface PersistentSessionWrapperProps {
   children: React.ReactNode;
@@ -13,14 +14,17 @@ interface PersistentSessionWrapperProps {
  * 1. PartyProfileProvider - user profile from IndexedDB and NextAuth session
  * 2. PersistentSessionProvider - WebSocket connection management that persists across navigation
  * 3. FloatingSessionThumbnail - shows current session when navigated away from board
+ * 4. DraftsProvider - draft climb persistence using IndexedDB
  */
 export default function PersistentSessionWrapper({ children }: PersistentSessionWrapperProps) {
   return (
     <PartyProfileProvider>
-      <PersistentSessionProvider>
-        <FloatingSessionThumbnail />
-        {children}
-      </PersistentSessionProvider>
+      <DraftsProvider>
+        <PersistentSessionProvider>
+          <FloatingSessionThumbnail />
+          {children}
+        </PersistentSessionProvider>
+      </DraftsProvider>
     </PartyProfileProvider>
   );
 }
diff --git a/packages/web/app/lib/draft-climbs-db.ts b/packages/web/app/lib/draft-climbs-db.ts
new file mode 100644
index 00000000..bc562b73
--- /dev/null
+++ b/packages/web/app/lib/draft-climbs-db.ts
@@ -0,0 +1,249 @@
+import { openDB, IDBPDatabase } from 'idb';
+import { v4 as uuidv4 } from 'uuid';
+import { BoardName } from './types';
+import { LitUpHoldsMap } from '../components/board-renderer/types';
+
+const DB_NAME = 'boardsesh-drafts';
+const DB_VERSION = 1;
+const STORE_NAME = 'drafts';
+
+export interface DraftClimb {
+  uuid: string;
+  boardName: BoardName;
+  layoutId: number;
+  sizeId: number;
+  setIds: number[];
+  angle: number;
+  // Names for URL generation
+  layoutName?: string;
+  sizeName?: string;
+  sizeDescription?: string;
+  setNames?: string[];
+  // Form data
+  name: string;
+  description: string;
+  frames: string;
+  litUpHoldsMap: LitUpHoldsMap;
+  isDraft: boolean;
+  createdAt: number;
+  updatedAt: number;
+}
+
+let dbPromise: Promise<IDBPDatabase> | null = null;
+
+const initDB = async (): Promise<IDBPDatabase> => {
+  // Guard against SSR - IndexedDB is browser-only
+  if (typeof window === 'undefined') {
+    throw new Error('IndexedDB is not available in server-side rendering');
+  }
+
+  if (!dbPromise) {
+    const promise = openDB(DB_NAME, DB_VERSION, {
+      upgrade(db) {
+        if (!db.objectStoreNames.contains(STORE_NAME)) {
+          const store = db.createObjectStore(STORE_NAME, { keyPath: 'uuid' });
+          // Index for querying by board configuration
+          store.createIndex('by-board', ['boardName', 'layoutId', 'sizeId'], { unique: false });
+          store.createIndex('by-updated', 'updatedAt', { unique: false });
+        }
+      },
+    });
+
+    // Clear the promise on error so we can retry
+    promise.catch(() => {
+      dbPromise = null;
+    });
+
+    dbPromise = promise;
+  }
+  return dbPromise;
+};
+
+export interface CreateDraftOptions {
+  boardName: BoardName;
+  layoutId: number;
+  sizeId: number;
+  setIds: number[];
+  angle: number;
+  layoutName?: string;
+  sizeName?: string;
+  sizeDescription?: string;
+  setNames?: string[];
+}
+
+/**
+ * Create a new draft climb with a UUID
+ */
+export const createDraftClimb = async (options: CreateDraftOptions): Promise<DraftClimb> => {
+  const now = Date.now();
+  const draft: DraftClimb = {
+    uuid: uuidv4(),
+    boardName: options.boardName,
+    layoutId: options.layoutId,
+    sizeId: options.sizeId,
+    setIds: options.setIds,
+    angle: options.angle,
+    layoutName: options.layoutName,
+    sizeName: options.sizeName,
+    sizeDescription: options.sizeDescription,
+    setNames: options.setNames,
+    name: '',
+    description: '',
+    frames: '',
+    litUpHoldsMap: {},
+    isDraft: false,
+    createdAt: now,
+    updatedAt: now,
+  };
+
+  try {
+    const db = await initDB();
+    await db.put(STORE_NAME, draft);
+    return draft;
+  } catch (error) {
+    console.error('Failed to create draft climb:', error);
+    throw error;
+  }
+};
+
+/**
+ * Update a draft climb
+ */
+export const updateDraftClimb = async (
+  uuid: string,
+  updates: Partial<Omit<DraftClimb, 'uuid' | 'createdAt'>>,
+): Promise<void> => {
+  try {
+    const db = await initDB();
+    const existing = await db.get(STORE_NAME, uuid);
+    if (!existing) {
+      throw new Error(`Draft with uuid ${uuid} not found`);
+    }
+
+    const updated: DraftClimb = {
+      ...existing,
+      ...updates,
+      updatedAt: Date.now(),
+    };
+
+    await db.put(STORE_NAME, updated);
+  } catch (error) {
+    console.error('Failed to update draft climb:', error);
+    throw error;
+  }
+};
+
+/**
+ * Get a draft climb by UUID
+ */
+export const getDraftClimb = async (uuid: string): Promise<DraftClimb | null> => {
+  try {
+    const db = await initDB();
+    const draft = await db.get(STORE_NAME, uuid);
+    return draft ?? null;
+  } catch (error) {
+    console.error('Failed to get draft climb:', error);
+    return null;
+  }
+};
+
+/**
+ * Get all draft climbs, sorted by updatedAt (newest first)
+ */
+export const getAllDraftClimbs = async (): Promise<DraftClimb[]> => {
+  try {
+    const db = await initDB();
+    const drafts = await db.getAll(STORE_NAME);
+    return drafts.sort((a, b) => b.updatedAt - a.updatedAt);
+  } catch (error) {
+    console.error('Failed to get all draft climbs:', error);
+    return [];
+  }
+};
+
+/**
+ * Get draft climbs for a specific board configuration
+ */
+export const getDraftClimbsForBoard = async (
+  boardName: BoardName,
+  layoutId: number,
+  sizeId: number,
+): Promise<DraftClimb[]> => {
+  try {
+    const db = await initDB();
+    const index = db.transaction(STORE_NAME).store.index('by-board');
+    const drafts = await index.getAll([boardName, layoutId, sizeId]);
+    return drafts.sort((a, b) => b.updatedAt - a.updatedAt);
+  } catch (error) {
+    console.error('Failed to get draft climbs for board:', error);
+    return [];
+  }
+};
+
+/**
+ * Delete a draft climb
+ */
+export const deleteDraftClimb = async (uuid: string): Promise<void> => {
+  try {
+    const db = await initDB();
+    await db.delete(STORE_NAME, uuid);
+  } catch (error) {
+    console.error('Failed to delete draft climb:', error);
+    throw error;
+  }
+};
+
+/**
+ * Delete all draft climbs
+ */
+export const deleteAllDraftClimbs = async (): Promise<void> => {
+  try {
+    const db = await initDB();
+    await db.clear(STORE_NAME);
+  } catch (error) {
+    console.error('Failed to delete all draft climbs:', error);
+    throw error;
+  }
+};
+
+/**
+ * Get the count of all draft climbs
+ */
+export const getDraftClimbsCount = async (): Promise<number> => {
+  try {
+    const db = await initDB();
+    return await db.count(STORE_NAME);
+  } catch (error) {
+    console.error('Failed to count draft climbs:', error);
+    return 0;
+  }
+};
+
+/**
+ * Reorder drafts by updating their updatedAt timestamps to preserve order
+ * The first item in the array will have the newest timestamp (appears first when sorted)
+ */
+export const reorderDraftClimbs = async (orderedUuids: string[]): Promise<void> => {
+  try {
+    const db = await initDB();
+    const tx = db.transaction(STORE_NAME, 'readwrite');
+    const store = tx.objectStore(STORE_NAME);
+
+    // Update timestamps in reverse order so first item has newest timestamp
+    const now = Date.now();
+    for (let i = orderedUuids.length - 1; i >= 0; i--) {
+      const uuid = orderedUuids[i];
+      const draft = await store.get(uuid);
+      if (draft) {
+        // Give each draft a unique timestamp, with earlier items getting newer timestamps
+        draft.updatedAt = now + (orderedUuids.length - i);
+        await store.put(draft);
+      }
+    }
+
+    await tx.done;
+  } catch (error) {
+    console.error('Failed to reorder draft climbs:', error);
+    throw error;
+  }
+};