diff --git a/src/components/Openings/OpeningSelectionModal.tsx b/src/components/Openings/OpeningSelectionModal.tsx
index 70065d5f..f8c998c6 100644
--- a/src/components/Openings/OpeningSelectionModal.tsx
+++ b/src/components/Openings/OpeningSelectionModal.tsx
@@ -347,7 +347,7 @@ const TabNavigation: React.FC<{
   const { isMobile } = useContext(WindowSizeContext)
 
   return (
-    <div className="flex w-full border-b border-glass-border md:hidden">
+    <div className="flex w-full border-b border-glass-border lg:hidden">
       <button
         {...(isMobile ? { id: 'opening-drill-browse' } : {})}
         onClick={() => setActiveTab('browse')}
@@ -580,7 +580,7 @@ const BrowsePanel: React.FC<{
     return (
       <div
         id="opening-drill-browse"
-        className={`flex w-full flex-col overflow-hidden ${activeTab !== 'browse' ? 'hidden md:flex' : 'flex'} md:w-[320px] md:flex-none md:border-r md:border-glass-border`}
+        className={`flex w-full flex-col overflow-hidden ${activeTab !== 'browse' ? 'hidden lg:flex' : 'flex'} lg:w-[320px] lg:flex-none lg:border-r lg:border-glass-border`}
       >
         {renderTabs()}
         <form
@@ -761,7 +761,7 @@ const BrowsePanel: React.FC<{
   return (
     <div
       id="opening-drill-browse"
-      className={`flex w-full flex-col overflow-hidden ${activeTab !== 'browse' ? 'hidden md:flex' : 'flex'} md:w-[320px] md:flex-none md:border-r md:border-glass-border`}
+      className={`flex w-full flex-col overflow-hidden ${activeTab !== 'browse' ? 'hidden lg:flex' : 'flex'} lg:w-[320px] lg:flex-none lg:border-r lg:border-glass-border`}
     >
       {renderTabs()}
 
@@ -1048,7 +1048,7 @@ const DrillStudioPanel: React.FC<{
   return (
     <div
       id="opening-drill-preview"
-      className="hidden w-full flex-1 flex-col overflow-hidden md:flex"
+      className="hidden w-full flex-1 flex-col overflow-hidden lg:flex"
     >
       <div className="flex h-full flex-col border-l border-glass-border">
         {/* Scrollable Content */}
@@ -1196,7 +1196,7 @@ const DrillStudioPanel: React.FC<{
             </button>
 
             {/* Queue */}
-            <div className="flex flex-col gap-3">
+            <div id="opening-drill-queue" className="flex flex-col gap-3">
               <div className="flex items-center justify-between">
                 <p className="text-[12px] font-semibold uppercase tracking-[0.12em] text-white/35">
                   Queue
@@ -1308,7 +1308,7 @@ const SelectedPanel: React.FC<{
   showTargetSlider,
 }) => (
   <div
-    id="opening-drill-selected"
+    id="opening-drill-selected-panel"
     className={`flex w-full flex-col overflow-hidden ${activeTab !== 'selected' ? 'hidden' : 'flex'}`}
   >
     <div className="flex h-16 flex-col justify-center gap-1 border-b border-glass-border p-4">
@@ -2648,7 +2648,7 @@ export const OpeningSelectionModal: React.FC<Props> = ({
         />
 
         {/* Main Content - Responsive Layout */}
-        <div className="grid w-full flex-1 grid-cols-1 overflow-hidden md:grid-cols-[320px_minmax(0,1fr)]">
+        <div className="grid w-full flex-1 grid-cols-1 overflow-hidden lg:grid-cols-[320px_minmax(0,1fr)]">
           <BrowsePanel
             activeTab={activeTab}
             filteredOpenings={filteredOpenings}
@@ -2723,7 +2723,7 @@ export const OpeningSelectionModal: React.FC<Props> = ({
         </div>
 
         {/* Mobile-only Selected Panel */}
-        <div className="w-full md:hidden">
+        <div className="w-full lg:hidden">
           <SelectedPanel
             activeTab={activeTab}
             selections={selections}
diff --git a/src/constants/tours.ts b/src/constants/tours.ts
index 8bf34aba..0228e859 100644
--- a/src/constants/tours.ts
+++ b/src/constants/tours.ts
@@ -135,40 +135,55 @@ export const handBrainTourSteps: TourStep[] = [
   },
 ]
 
-export const openingDrillTourSteps: TourStep[] = [
-  {
-    id: 'opening-drill-overview',
-    title: 'Welcome to Opening Drills',
-    description:
-      'Practice your openings by drilling specific openings against Maia. First select the openings you want to practice, configure drill settings, and practice them repeatedly until they become second nature. You can track your progress and analyze your performance after each drill.',
-    targetId: 'opening-drill-modal',
-    placement: 'bottom',
-  },
-  {
-    id: 'opening-drill-selection',
-    title: 'Select Openings',
-    description:
-      'Browse and select the openings you want to practice. You can search for specific variations and  add them using the + button.',
-    targetId: 'opening-drill-browse',
-    placement: 'right',
-  },
-  {
-    id: 'opening-drill-start',
-    title: 'Start Drilling',
-    description:
-      'Customize your drills by choosing the Maia opponent strength, how many moves in each drill, and how many drills to do. Click "Start Drilling" to start!',
-    targetId: 'opening-drill-selected',
-    placement: 'left',
-  },
-  {
-    id: 'opening-drill-gameplay',
-    title: 'Drill Experience',
-    description:
-      "During drilling, you'll play through your selected openings against Maia until reaching the target move count. After each drill, you can analyze the moves you played, see how the Maia and Stockfish evaluations changed throughout the game, and learn from your insights.",
-    targetId: 'opening-drill-modal',
-    placement: 'bottom',
-  },
-]
+const clickTab = (id: string) => () => {
+  document
+    .getElementById(id)
+    ?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+}
+
+const openingDrillTourSteps = (): TourStep[] => {
+  const isMobile = typeof window !== 'undefined' && window.innerWidth < 1024
+
+  return [
+    {
+      id: 'opening-drill-overview',
+      title: 'Welcome to Opening Drills',
+      description:
+        'Practice your openings by drilling specific openings against Maia. First select the openings you want to practice, configure drill settings, and practice them repeatedly until they become second nature. You can track your progress and analyze your performance after each drill.',
+      targetId: 'opening-drill-modal',
+      placement: 'bottom',
+    },
+    {
+      id: 'opening-drill-selection',
+      title: 'Select Openings',
+      description:
+        'Browse and select the openings you want to practice. You can search for specific variations and add them using the + button.',
+      targetId: 'opening-drill-browse',
+      placement: isMobile ? 'bottom' : 'right',
+      ...(isMobile && { beforeAction: clickTab('opening-drill-browse') }),
+    },
+    {
+      id: 'opening-drill-start',
+      title: 'Start Drilling',
+      description:
+        'Customize your drills by choosing the Maia opponent strength, how many moves in each drill, and how many drills to do. Click "Start Drilling" to start!',
+      targetId: isMobile ? 'opening-drill-selected' : 'opening-drill-preview',
+      placement: isMobile ? 'bottom' : 'left',
+      ...(isMobile && { beforeAction: clickTab('opening-drill-selected') }),
+    },
+    {
+      id: 'opening-drill-gameplay',
+      title: 'Drill Experience',
+      description:
+        "During drilling, you'll play through your selected openings against Maia until reaching the target move count. After each drill, you can analyze the moves you played, see how the Maia and Stockfish evaluations changed throughout the game, and learn from your insights.",
+      targetId: isMobile
+        ? 'opening-drill-selected-panel'
+        : 'opening-drill-queue',
+      placement: isMobile ? 'bottom' : 'left',
+      ...(isMobile && { beforeAction: clickTab('opening-drill-selected') }),
+    },
+  ]
+}
 
 export const tourConfigs = {
   analysis: {
@@ -199,6 +214,6 @@ export const tourConfigs = {
   openingDrill: {
     id: 'openingDrill',
     name: 'Opening Drill Tour',
-    steps: openingDrillTourSteps,
+    steps: openingDrillTourSteps(),
   },
 }
diff --git a/src/contexts/TourContext.tsx b/src/contexts/TourContext.tsx
index a5a32680..a5edb150 100644
--- a/src/contexts/TourContext.tsx
+++ b/src/contexts/TourContext.tsx
@@ -16,6 +16,7 @@ export interface TourStep {
   targetId: string
   placement?: 'top' | 'bottom' | 'left' | 'right'
   offset?: { x: number; y: number }
+  beforeAction?: () => void | Promise<void>
 }
 
 export interface TourState {
@@ -497,6 +498,10 @@ export const TourProvider: React.FC<TourProviderProps> = ({ children }) => {
   const handleNext = useCallback(async () => {
     if (tourState.currentStep < tourState.steps.length - 1) {
       const nextStepIndex = tourState.currentStep + 1
+      const nextStepData = tourState.steps[nextStepIndex]
+      if (nextStepData?.beforeAction) {
+        await nextStepData.beforeAction()
+      }
       await preScrollToTarget(nextStepIndex)
       nextStep()
     } else {
@@ -504,7 +509,7 @@ export const TourProvider: React.FC<TourProviderProps> = ({ children }) => {
     }
   }, [
     tourState.currentStep,
-    tourState.steps.length,
+    tourState.steps,
     nextStep,
     endTour,
     preScrollToTarget,
@@ -513,10 +518,14 @@ export const TourProvider: React.FC<TourProviderProps> = ({ children }) => {
   const handlePrevious = useCallback(async () => {
     if (tourState.currentStep > 0) {
       const prevStepIndex = tourState.currentStep - 1
+      const prevStepData = tourState.steps[prevStepIndex]
+      if (prevStepData?.beforeAction) {
+        await prevStepData.beforeAction()
+      }
       await preScrollToTarget(prevStepIndex)
       prevStep()
     }
-  }, [tourState.currentStep, prevStep, preScrollToTarget])
+  }, [tourState.currentStep, tourState.steps, prevStep, preScrollToTarget])
 
   // Update Joyride steps when tour state changes
   useEffect(() => {