diff --git a/src/components/App.tsx b/src/components/App.tsx
index ba384f5d..575cf1cd 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -15,7 +15,7 @@ import { ViewerState, clearUrlHash } from "@/lib/ViewerState";
 import { TrackManager, loadTrackManager } from "@/lib/TrackManager";
 import { PointSelectionMode } from "@/lib/PointSelector";
 import LeftSidebarWrapper from "./leftSidebar/LeftSidebarWrapper";
-import { TimestampOverlay } from "./overlays/TimestampOverlay";
+// import { TimestampOverlay } from "./overlays/TimestampOverlay";
 import { ColorMap } from "./overlays/ColorMap";
 import { TrackDownloadData } from "./DownloadButton";
 
@@ -29,6 +29,56 @@ const initialViewerState = ViewerState.fromUrlHash(window.location.hash);
 console.log("initial viewer state: ", initialViewerState);
 clearUrlHash();
 
+function detectDeviceType(): { isPhone: boolean; isTablet: boolean; isMobile: boolean } {
+    const ua = navigator.userAgent || navigator.vendor;
+
+    // Detect iPads, iPhones, and iPods based on the user agent string
+    const isiPad =
+        /iPad/.test(ua) || (navigator.maxTouchPoints && navigator.maxTouchPoints > 1 && /Macintosh/.test(ua));
+    const isiPhoneOrIPod = /iPhone|iPod/.test(ua);
+
+    // Detect Android phones and tablets
+    const isAndroidPhone = /Android/.test(ua) && /Mobile/.test(ua);
+    const isAndroidTablet = /Android/.test(ua) && !/Mobile/.test(ua);
+
+    // Screen size check (tablets typically have a wider screen)
+    const isSmallScreen = window.screen.width <= 768;
+    const hasTouch = navigator.maxTouchPoints > 1;
+
+    // Determine if it's a phone, tablet, or desktop
+    const isPhone = isiPhoneOrIPod || isAndroidPhone || isSmallScreen;
+    const isTablet = isiPad || isAndroidTablet || hasTouch;
+    const isDesktop = !isPhone && !isTablet; // It's a desktop if it's neither a phone nor a tablet
+
+    // manually asign labels for debugging
+    // const isPhone = false;
+    // const isTablet = true;
+    // const isDesktop = false;
+
+    return {
+        isPhone: isPhone,
+        isTablet: isTablet && !isPhone, // To avoid small phones being miscategorized as tablets
+        isMobile: !isDesktop,
+    };
+}
+
+export const detectedDevice = detectDeviceType();
+console.debug("detectDeviceType: ", detectedDevice);
+if (detectedDevice.isPhone) {
+    window.confirm("Note: for full functionality, please use a tablet or desktop device. Press 'OK' to continue ");
+}
+
+// for debugging: show the detected device type in an alert
+// window.confirm(
+//     "detected device type (desktop | tablet | phone) = (" +
+//         !detectDeviceType().isMobile +
+//         " | " +
+//         detectDeviceType().isTablet +
+//         " | " +
+//         detectDeviceType().isPhone +
+//         ")",
+// );
+
 const drawerWidth = 256;
 const playbackFPS = 16;
 const playbackIntervalMs = 1000 / playbackFPS;
@@ -298,128 +348,155 @@ export default function App() {
     };
 
     return (
-        <Box sx={{ display: "flex", width: "100%", height: "100%" }}>
+        <Box sx={{ display: "flex", flexDirection: "column", width: "100%", height: "100%", overflow: "hidden" }}>
             {/* TODO: components *could* go deeper still for organization */}
-            <Drawer
-                anchor="left"
-                variant="permanent"
-                sx={{
-                    "width": drawerWidth,
-                    "flexShrink": 0,
-                    "& .MuiDrawer-paper": { width: drawerWidth, boxSizing: "border-box" },
-                }}
-            >
-                <Box
+            {!detectedDevice.isPhone && (
+                <Drawer
+                    anchor="left"
+                    variant="permanent"
                     sx={{
-                        display: "flex",
-                        flexDirection: "column",
-                        justifyContent: "space-between",
-                        width: "100%",
-                        height: "100%",
+                        "width": drawerWidth,
+                        "flexShrink": 0,
+                        "& .MuiDrawer-paper": { width: drawerWidth, boxSizing: "border-box" },
                     }}
                 >
                     <Box
                         sx={{
-                            flexGrow: 0,
-                            padding: "1em 1.5em",
                             display: "flex",
-                            flexDirection: "row",
-                            alignItems: "center",
+                            flexDirection: "column",
                             justifyContent: "space-between",
+                            width: "100%",
+                            height: "100%",
                         }}
                     >
-                        {brandingLogoPath && <img src={brandingLogoPath} alt="" />}
-                        {brandingLogoPath && brandingName && <Divider orientation="vertical" flexItem />}
-                        {brandingName && <h2>{brandingName}</h2>}{" "}
-                    </Box>
-
-                    {/* Scrollable section for other controls */}
-                    <Box
-                        sx={{
-                            flexGrow: 1, // CHANGED: Allows the middle section to expand
-                            overflowY: "auto", // CHANGED: Makes this section scrollable
-                            padding: "2em",
-                        }}
-                    >
-                        <CellControls
-                            clearTracks={() => {
-                                dispatchCanvas({ type: ActionType.REMOVE_ALL_TRACKS });
+                        <Box
+                            sx={{
+                                flexGrow: 0,
+                                padding: "1em 1.5em",
+                                display: "flex",
+                                flexDirection: "row",
+                                alignItems: "center",
+                                justifyContent: "space-between",
                             }}
-                            getTrackDownloadData={getTrackDownloadData}
-                            numSelectedCells={numSelectedCells}
-                            numSelectedTracks={numSelectedTracks}
-                            trackManager={trackManager}
-                            pointBrightness={canvas.pointBrightness}
-                            setPointBrightness={(brightness: number) => {
-                                dispatchCanvas({ type: ActionType.POINT_BRIGHTNESS, brightness });
+                        >
+                            {brandingLogoPath && <img src={brandingLogoPath} alt="" />}
+                            {brandingLogoPath && brandingName && <Divider orientation="vertical" flexItem />}
+                            {brandingName && <h2>{brandingName}</h2>}{" "}
+                        </Box>
+                        <Box
+                            sx={{
+                                flexGrow: 1, // CHANGED: Allows the middle section to expand
+                                overflowY: "auto", // CHANGED: Makes this section scrollable
+                                padding: "2em",
                             }}
-                            pointSize={canvas.pointSize}
-                            setPointSize={(pointSize: number) => {
-                                dispatchCanvas({ type: ActionType.POINT_SIZES, pointSize });
-                            }}
-                            selectionMode={canvas.selector.selectionMode}
-                            setSelectionMode={(value: PointSelectionMode) => {
-                                dispatchCanvas({ type: ActionType.SELECTION_MODE, selectionMode: value });
-                            }}
-                        />
-                        <Divider sx={{ marginY: "1em" }} />
-                        <LeftSidebarWrapper
-                            hasTracks={numSelectedCells > 0}
-                            trackManager={trackManager}
-                            trackHighlightLength={trackHighlightLength}
-                            selectionMode={canvas.selector.selectionMode}
-                            showTracks={canvas.showTracks}
-                            setShowTracks={(show: boolean) => {
-                                dispatchCanvas({ type: ActionType.SHOW_TRACKS, showTracks: show });
-                            }}
-                            showTrackHighlights={canvas.showTrackHighlights}
-                            setShowTrackHighlights={(show: boolean) => {
-                                dispatchCanvas({ type: ActionType.SHOW_TRACK_HIGHLIGHTS, showTrackHighlights: show });
-                            }}
-                            setTrackHighlightLength={(length: number) => {
-                                dispatchCanvas({
-                                    type: ActionType.MIN_MAX_TIME,
-                                    minTime: canvas.curTime - length / 2,
-                                    maxTime: canvas.curTime + length / 2,
-                                });
-                            }}
-                        />
+                        >
+                            <CellControls
+                                clearTracks={() => {
+                                    dispatchCanvas({ type: ActionType.REMOVE_ALL_TRACKS });
+                                }}
+                                getTrackDownloadData={getTrackDownloadData}
+                                numSelectedCells={numSelectedCells}
+                                numSelectedTracks={numSelectedTracks}
+                                trackManager={trackManager}
+                                pointBrightness={canvas.pointBrightness}
+                                setPointBrightness={(brightness: number) => {
+                                    dispatchCanvas({ type: ActionType.POINT_BRIGHTNESS, brightness });
+                                }}
+                                pointSize={canvas.pointSize}
+                                setPointSize={(pointSize: number) => {
+                                    dispatchCanvas({ type: ActionType.POINT_SIZES, pointSize });
+                                }}
+                                selectionMode={canvas.selector.selectionMode}
+                                setSelectionMode={(value: PointSelectionMode) => {
+                                    dispatchCanvas({ type: ActionType.SELECTION_MODE, selectionMode: value });
+                                }}
+                                isTablet={detectedDevice.isTablet}
+                                MobileSelectCells={() => {
+                                    dispatchCanvas({ type: ActionType.MOBILE_SELECT_CELLS });
+                                }}
+                                setSelectorScale={(scale: number) => {
+                                    dispatchCanvas({ type: ActionType.SELECTOR_SCALE, scale });
+                                }}
+                                selectorScale={canvas.selector.sphereSelector.cursor.scale.x}
+                            />
+                            <Divider sx={{ marginY: "1em" }} />
+                            <LeftSidebarWrapper
+                                hasTracks={numSelectedCells > 0}
+                                trackManager={trackManager}
+                                trackHighlightLength={trackHighlightLength}
+                                selectionMode={canvas.selector.selectionMode}
+                                showTracks={canvas.showTracks}
+                                setShowTracks={(show: boolean) => {
+                                    dispatchCanvas({ type: ActionType.SHOW_TRACKS, showTracks: show });
+                                }}
+                                showTrackHighlights={canvas.showTrackHighlights}
+                                setShowTrackHighlights={(show: boolean) => {
+                                    dispatchCanvas({
+                                        type: ActionType.SHOW_TRACK_HIGHLIGHTS,
+                                        showTrackHighlights: show,
+                                    });
+                                }}
+                                setTrackHighlightLength={(length: number) => {
+                                    dispatchCanvas({
+                                        type: ActionType.MIN_MAX_TIME,
+                                        minTime: canvas.curTime - length / 2,
+                                        maxTime: canvas.curTime + length / 2,
+                                    });
+                                }}
+                                isTablet={detectedDevice.isTablet}
+                            />
+                        </Box>
+                        <Divider />
+                        <Box flexGrow={0} padding="1em">
+                            <DataControls
+                                dataUrl={dataUrl}
+                                initialDataUrl={initialViewerState.dataUrl}
+                                setDataUrl={setDataUrl}
+                                removeTracksUponNewData={removeTracksUponNewData}
+                                copyShareableUrlToClipboard={copyShareableUrlToClipboard}
+                                refreshPage={refreshPage}
+                                trackManager={trackManager}
+                            />
+                        </Box>
                     </Box>
-                    <Divider />
-                    <Box
-                        sx={{
-                            flexGrow: 0,
-                            padding: "1em",
-                            position: "sticky",
-                            bottom: 0,
-                            backgroundColor: "#fff",
-                        }}
-                    >
-                        <DataControls
-                            dataUrl={dataUrl}
-                            initialDataUrl={initialViewerState.dataUrl}
-                            setDataUrl={setDataUrl}
-                            removeTracksUponNewData={removeTracksUponNewData}
-                            copyShareableUrlToClipboard={copyShareableUrlToClipboard}
-                            refreshPage={refreshPage}
-                            trackManager={trackManager}
-                        />
-                    </Box>
-                </Box>
-            </Drawer>
+                </Drawer>
+            )}
+            {/* Box for Scene + playBackControls */}
             <Box
                 sx={{
                     display: "flex",
                     flexDirection: "column",
+                    flexGrow: 1,
                     width: "100%",
                     height: "100%",
                     overflow: "hidden",
                 }}
             >
-                <Scene ref={sceneDivRef} isLoading={isLoadingPoints || numLoadingTracks > 0} />
-                <Box flexGrow={0} padding="1em">
-                    <TimestampOverlay timestamp={canvas.curTime} />
+                {/* The canvas (Scene + colormap + timestamp) */}
+                <Box
+                    ref={sceneDivRef}
+                    sx={{
+                        flexGrow: 1,
+                        width: "100%",
+                        height: "calc(100vh - 100px)", // Ensure canvas does not fill entire screen
+                        overflow: "hidden",
+                        position: "relative", // Add this to make ColorMap and TimestampOverlay relative to the canvas
+                    }}
+                >
+                    <Scene isLoading={isLoadingPoints || numLoadingTracks > 0} />
+                    {/* <TimestampOverlay timestamp={canvas.curTime} /> */}
                     <ColorMap />
+                </Box>
+
+                {/* The playback controls */}
+                <Box
+                    sx={{
+                        flexGrow: 0,
+                        padding: ".5em",
+                        height: detectedDevice.isMobile ? "150px" : "50px", // leaving extra space for mobile
+                        paddingLeft: !detectedDevice.isPhone ? `${drawerWidth}px` : 0, // Ensure playback controls are visible
+                    }}
+                >
                     <PlaybackControls
                         enabled={true}
                         autoRotate={canvas.controls.autoRotate}
diff --git a/src/components/CellControls.tsx b/src/components/CellControls.tsx
index 4ddf30d9..1616d66c 100644
--- a/src/components/CellControls.tsx
+++ b/src/components/CellControls.tsx
@@ -1,5 +1,5 @@
 import { Box, Stack } from "@mui/material";
-import { InputSlider, SegmentedControl, SingleButtonDefinition } from "@czi-sds/components";
+import { InputSlider, SegmentedControl, SingleButtonDefinition, Button } from "@czi-sds/components";
 import { FontS, SmallCapsButton, ControlLabel } from "@/components/Styled";
 
 import { PointSelectionMode } from "@/lib/PointSelector";
@@ -16,17 +16,35 @@ interface CellControlsProps {
     setPointBrightness: (value: number) => void;
     pointSize: number;
     setPointSize: (value: number) => void;
-    selectionMode: PointSelectionMode;
+    selectionMode: PointSelectionMode | null;
     setSelectionMode: (value: PointSelectionMode) => void;
+    isTablet: boolean;
+    MobileSelectCells: () => void;
+    setSelectorScale: (value: number) => void;
+    selectorScale: number;
 }
 
 export default function CellControls(props: CellControlsProps) {
     const buttonDefinition: SingleButtonDefinition[] = [
         { icon: "Cube", tooltipText: "Box", value: PointSelectionMode.BOX },
-        { icon: "Starburst", tooltipText: "Spherical cursor", value: PointSelectionMode.SPHERICAL_CURSOR },
-        { icon: "Globe", tooltipText: "Sphere", value: PointSelectionMode.SPHERE },
+        { icon: "Starburst", tooltipText: "Sphere", value: PointSelectionMode.SPHERICAL_CURSOR },
+        { icon: "Globe", tooltipText: "Adjustable sphere", value: PointSelectionMode.SPHERE },
     ];
 
+    // Intercept onChange of selection buttons to prevent the first two buttons from being selected on mobile devices
+    const handleSegmentedControlChange = (_e: React.MouseEvent<HTMLElement>, newValue: PointSelectionMode | null) => {
+        // If isTablet is true and the selected value corresponds to the first or second button, do nothing
+        if (
+            props.isTablet &&
+            (newValue === PointSelectionMode.BOX || newValue === PointSelectionMode.SPHERICAL_CURSOR)
+        ) {
+            window.alert("This selection mode is not available on mobile devices.");
+            console.log("Mobile device detected, preventing selection of box or spherical cursor");
+            return; // Prevent selection
+        }
+        props.setSelectionMode(newValue!); // Otherwise, update the selection mode
+    };
+
     return (
         <Stack spacing="1em">
             <Box display="flex" flexDirection="row" alignItems="center" justifyContent="space-between">
@@ -49,12 +67,41 @@ export default function CellControls(props: CellControlsProps) {
                 <SegmentedControl
                     id="selection-mode-control"
                     buttonDefinition={buttonDefinition}
-                    onChange={(_e, v) => {
-                        props.setSelectionMode(v);
-                    }}
+                    onChange={handleSegmentedControlChange}
                     value={props.selectionMode}
                 />
             </Box>
+            <Box display="flex" justifyContent="center" alignItems="center">
+                {props.isTablet && props.selectionMode === PointSelectionMode.SPHERE && (
+                    <Button sdsStyle="square" sdsType="primary" onClick={props.MobileSelectCells}>
+                        Select cells
+                    </Button>
+                )}
+            </Box>
+            {(props.selectionMode === PointSelectionMode.SPHERICAL_CURSOR ||
+                props.selectionMode === PointSelectionMode.SPHERE) &&
+                props.isTablet && (
+                    <>
+                        <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+                            <label htmlFor="selector-radius-slider">
+                                <FontS id="input-selector-radius-slider">selector radius:</FontS>
+                            </label>
+                        </div>
+                        <InputSlider
+                            id="selector-radius-slider"
+                            aria-labelledby="input-selector-radius-slider"
+                            min={0.5}
+                            max={5}
+                            step={0.1}
+                            // valueLabelDisplay="on"
+                            valueLabelFormat={(value) => `${value}`}
+                            onChange={(_, value) => {
+                                props.setSelectorScale(value as number);
+                            }}
+                            value={props.selectorScale}
+                        />
+                    </>
+                )}
             {numberOfValuesPerPoint !== 4 && (
                 <>
                     <label htmlFor="points-sizes-slider">
diff --git a/src/components/leftSidebar/ControlInstructions.tsx b/src/components/leftSidebar/ControlInstructions.tsx
index 96bda5d3..4cfa37e8 100644
--- a/src/components/leftSidebar/ControlInstructions.tsx
+++ b/src/components/leftSidebar/ControlInstructions.tsx
@@ -3,7 +3,8 @@ import { Callout } from "@czi-sds/components";
 import { PointSelectionMode } from "@/lib/PointSelector";
 
 interface ControlInstructionsProps {
-    selectionMode: PointSelectionMode;
+    selectionMode: PointSelectionMode | null;
+    isTablet: boolean;
 }
 
 export default function ControlInstructions(props: ControlInstructionsProps) {
@@ -15,24 +16,54 @@ export default function ControlInstructions(props: ControlInstructionsProps) {
         case PointSelectionMode.SPHERICAL_CURSOR:
             instructionText = (
                 <>
-                    <p>Hold Shift and a sphere will follow your cursor, centering on nearby points.</p>
-                    <p>Shift-Click to select cells within the sphere.</p>
-                    <p>Additional controls:</p>
-                    <p>Ctrl+scroll: scale sphere</p>
-                    <p>s: show/hide sphere</p>
+                    <p>
+                        Hold <strong>Shift</strong> and the selector will follow your cursor.
+                    </p>
+                    <p>
+                        <strong>Shift-Click</strong> to select cells within the sphere.
+                    </p>
+                    <em>Additional controls:</em>
+                    <ul style={{ paddingLeft: "15px", marginLeft: "0" }}>
+                        <li>
+                            <strong>ctrl+scroll</strong>: scale sphere
+                        </li>
+                        <li>
+                            <strong>s</strong>: show/hide sphere
+                        </li>
+                    </ul>
                 </>
             );
             break;
         case PointSelectionMode.SPHERE:
             instructionText = (
                 <>
-                    <p>Shift-click to select cells within the sphere.</p>
-                    <p>Additional controls:</p>
-                    <p>w: position mode</p>
-                    <p>e: rotation mode</p>
-                    <p>r: scale mode</p>
-                    <p>Ctrl+scroll: scale</p>
-                    <p>s: show/hide sphere</p>
+                    {props.isTablet && (
+                        <p>
+                            If using a tablet without keyboard, use the UI controls above to select cells and scale the
+                            selector (use keyboard for full functionality)
+                        </p>
+                    )}
+                    <p>
+                        <strong>Shift-click</strong> to select cells within the selector.
+                    </p>
+                    <em>Additional controls:</em>
+                    <ul style={{ paddingLeft: "15px", marginLeft: "0" }}>
+                        <li>
+                            <strong>w</strong>: position
+                        </li>
+                        <li>
+                            <strong>e</strong>: rotation
+                        </li>
+                        <li>
+                            <strong>r</strong>: scale
+                        </li>
+                        <li>
+                            <strong>Ctrl+scroll</strong>: scale
+                        </li>
+                        <li>
+                            <strong>s</strong>: show/hide selector
+                        </li>
+                    </ul>
                 </>
             );
             break;
diff --git a/src/components/leftSidebar/LeftSidebarWrapper.tsx b/src/components/leftSidebar/LeftSidebarWrapper.tsx
index d82a6b79..d7f23c8c 100644
--- a/src/components/leftSidebar/LeftSidebarWrapper.tsx
+++ b/src/components/leftSidebar/LeftSidebarWrapper.tsx
@@ -12,7 +12,8 @@ interface LeftSidebarWrapperProps {
     showTrackHighlights: boolean;
     setShowTrackHighlights: (showTrackHighlights: boolean) => void;
     setTrackHighlightLength: (trackHighlightLength: number) => void;
-    selectionMode: PointSelectionMode;
+    selectionMode: PointSelectionMode | null;
+    isTablet: boolean;
 }
 
 export default function LeftSidebarWrapper({
@@ -25,6 +26,7 @@ export default function LeftSidebarWrapper({
     setShowTrackHighlights,
     setTrackHighlightLength,
     selectionMode,
+    isTablet,
 }: LeftSidebarWrapperProps) {
     return (
         <>
@@ -39,7 +41,7 @@ export default function LeftSidebarWrapper({
                     setTrackHighlightLength={setTrackHighlightLength}
                 />
             )}
-            <ControlInstructions selectionMode={selectionMode} />
+            {selectionMode !== null && <ControlInstructions selectionMode={selectionMode} isTablet={isTablet} />}
         </>
     );
 }
diff --git a/src/components/leftSidebar/TrackControls.tsx b/src/components/leftSidebar/TrackControls.tsx
index d11c206e..3bcf6b89 100644
--- a/src/components/leftSidebar/TrackControls.tsx
+++ b/src/components/leftSidebar/TrackControls.tsx
@@ -2,7 +2,7 @@ import { TrackManager } from "@/lib/TrackManager";
 import { InputSlider, InputToggle } from "@czi-sds/components";
 import { Box, Stack } from "@mui/material";
 
-import { ControlLabel } from "@/components/Styled";
+import { ControlLabel, FontS } from "@/components/Styled";
 
 interface TrackControlsProps {
     trackManager: TrackManager | null;
@@ -19,9 +19,10 @@ export default function TrackControls(props: TrackControlsProps) {
 
     return (
         <Stack spacing={"2em"}>
+            <ControlLabel>Visualization options</ControlLabel>
             <Box display="flex" flexDirection="row" alignItems="center" justifyContent="space-between">
                 <label htmlFor="show-tracks">
-                    <ControlLabel>Tracks</ControlLabel>
+                    <FontS>Tracks</FontS>
                 </label>
                 <InputToggle
                     id="show-tracks"
@@ -33,7 +34,7 @@ export default function TrackControls(props: TrackControlsProps) {
             </Box>
             <Box display="flex" flexDirection="row" alignItems="center" justifyContent="space-between">
                 <label htmlFor="show-track-highlights">
-                    <ControlLabel>Track Highlights</ControlLabel>
+                    <FontS>Track Highlights</FontS>
                 </label>
                 <Box>
                     <InputToggle
@@ -46,7 +47,7 @@ export default function TrackControls(props: TrackControlsProps) {
                 </Box>
             </Box>
             <label htmlFor="track-highlight-length-slider">
-                <ControlLabel>Track Highlight Length</ControlLabel>
+                <FontS>Track Highlight Length</FontS>
             </label>
             <InputSlider
                 id="track-highlight-length-slider"
diff --git a/src/components/overlays/ColorMap.tsx b/src/components/overlays/ColorMap.tsx
index 4c854e8e..8350762d 100644
--- a/src/components/overlays/ColorMap.tsx
+++ b/src/components/overlays/ColorMap.tsx
@@ -11,7 +11,7 @@ export const ColorMap = () => {
         <Box
             sx={{
                 position: "absolute",
-                bottom: "5.0rem",
+                bottom: "0.5rem",
                 right: "0.5rem",
                 width: "2.5rem",
                 height: "6.5rem",
diff --git a/src/components/overlays/TimestampOverlay.tsx b/src/components/overlays/TimestampOverlay.tsx
index fbc1da5d..5717f3e9 100644
--- a/src/components/overlays/TimestampOverlay.tsx
+++ b/src/components/overlays/TimestampOverlay.tsx
@@ -14,7 +14,7 @@ export const TimestampOverlay = (props: TimestampOverlayProps) => {
             size="small"
             sx={{
                 position: "absolute",
-                bottom: "4.75rem",
+                bottom: "0.5rem",
                 left: "16.5rem",
                 backgroundColor: "rgba(255, 255, 255, 0.6)",
                 zIndex: 100,
diff --git a/src/hooks/usePointCanvas.ts b/src/hooks/usePointCanvas.ts
index b5ef283a..9e60d686 100644
--- a/src/hooks/usePointCanvas.ts
+++ b/src/hooks/usePointCanvas.ts
@@ -23,6 +23,8 @@ enum ActionType {
     ADD_SELECTED_POINT_IDS = "ADD_SELECTED_POINT_IDS",
     SHOW_PREVIEW_POINTS = "SHOW_PREVIEW_POINTS",
     UPDATE_WITH_STATE = "UPDATE_WITH_STATE",
+    MOBILE_SELECT_CELLS = "MOBILE_SELECT_CELLS",
+    SELECTOR_SCALE = "SELECTOR_SCALE",
 }
 
 interface AutoRotate {
@@ -115,6 +117,15 @@ interface UpdateWithState {
     state: ViewerState;
 }
 
+interface MobileSelectCells {
+    type: ActionType.MOBILE_SELECT_CELLS;
+}
+
+interface SelectorScale {
+    type: ActionType.SELECTOR_SCALE;
+    scale: number;
+}
+
 // setting up a tagged union for the actions
 type PointCanvasAction =
     | AutoRotate
@@ -134,7 +145,9 @@ type PointCanvasAction =
     | MinMaxTime
     | AddSelectedPointIds
     | ShowPreviewPoints
-    | UpdateWithState;
+    | UpdateWithState
+    | MobileSelectCells
+    | SelectorScale;
 
 function reducer(canvas: PointCanvas, action: PointCanvasAction): PointCanvas {
     console.debug("usePointCanvas.reducer: ", action);
@@ -164,6 +177,7 @@ function reducer(canvas: PointCanvas, action: PointCanvasAction): PointCanvas {
             newCanvas.pointBrightness = action.brightness;
             newCanvas.resetPointColors();
             newCanvas.updateSelectedPointIndices();
+            newCanvas.updatePreviewPoints();
             break;
         case ActionType.POINT_SIZES:
             newCanvas.pointSize = action.pointSize;
@@ -188,7 +202,7 @@ function reducer(canvas: PointCanvas, action: PointCanvasAction): PointCanvas {
             newCanvas.resetPointColors();
             break;
         case ActionType.SELECTION_MODE: {
-            const modeOld: PointSelectionMode = canvas.selector.selectionMode;
+            const modeOld: PointSelectionMode | null = canvas.selector.selectionMode;
             const modeNew: PointSelectionMode = action.selectionMode;
             newCanvas.setSelectionMode(action.selectionMode);
 
@@ -197,7 +211,7 @@ function reducer(canvas: PointCanvas, action: PointCanvasAction): PointCanvas {
                 newCanvas.resetPointColors();
                 newCanvas.highlightPoints(newCanvas.selectedPointIndices);
             }
-            if (modeOld !== PointSelectionMode.BOX && modeNew == PointSelectionMode.BOX) {
+            if (modeOld !== PointSelectionMode.BOX && (modeNew == PointSelectionMode.BOX || modeNew == null)) {
                 newCanvas.resetPointColors();
                 newCanvas.highlightPoints(newCanvas.selectedPointIndices);
             }
@@ -220,12 +234,15 @@ function reducer(canvas: PointCanvas, action: PointCanvasAction): PointCanvas {
             newCanvas.updateAllTrackHighlights();
             break;
         case ActionType.ADD_SELECTED_POINT_IDS: {
-            newCanvas.pointBrightness = 0.8;
-            newCanvas.resetPointColors();
             const newSelectedPointIds = new Set(canvas.selectedPointIds);
             for (const trackId of action.selectedPointIds) {
                 newSelectedPointIds.add(trackId);
             }
+            if (action.selectedPointIds.size !== 0) {
+                // only reduce pointBrightness if there are selected points
+                newCanvas.pointBrightness = 0.8;
+            }
+            newCanvas.resetPointColors();
             newCanvas.selectedPointIds = newSelectedPointIds;
             newCanvas.updateSelectedPointIndices();
             newCanvas.highlightPoints(action.selectedPointIndices);
@@ -242,6 +259,13 @@ function reducer(canvas: PointCanvas, action: PointCanvasAction): PointCanvas {
         case ActionType.UPDATE_WITH_STATE:
             newCanvas.updateWithState(action.state);
             break;
+        case ActionType.MOBILE_SELECT_CELLS:
+            newCanvas.MobileSelectCells();
+            break;
+        case ActionType.SELECTOR_SCALE:
+            newCanvas.setSelectorScale(action.scale);
+            newCanvas.updatePreviewPoints();
+            break;
         default:
             console.warn("usePointCanvas reducer - unknown action type: %s", action);
             return canvas;
diff --git a/src/lib/PointCanvas.ts b/src/lib/PointCanvas.ts
index 0c54c68f..d34b3c09 100644
--- a/src/lib/PointCanvas.ts
+++ b/src/lib/PointCanvas.ts
@@ -25,6 +25,7 @@ import { PointSelector, PointSelectionMode } from "@/lib/PointSelector";
 import { ViewerState } from "./ViewerState";
 import { numberOfValuesPerPoint } from "./TrackManager";
 
+import { detectedDevice } from "@/components/App.tsx";
 import config from "../../CONFIG.ts";
 const initialPointSize = config.settings.point_size;
 const pointColor = config.settings.point_color;
@@ -153,7 +154,13 @@ export class PointCanvas {
 
         // Set up selection
         this.selector = new PointSelector(this.scene, this.renderer, this.camera, this.controls, this.points);
-        this.setSelectionMode(PointSelectionMode.BOX);
+        if (detectedDevice.isTablet) {
+            this.setSelectionMode(PointSelectionMode.SPHERE);
+        } else if (detectedDevice.isPhone) {
+            this.setSelectionMode(null); // no selection functionality on phone
+        } else {
+            this.setSelectionMode(PointSelectionMode.BOX);
+        }
     }
 
     shallowCopy(): PointCanvas {
@@ -191,7 +198,7 @@ export class PointCanvas {
         this.controls.target.fromArray(state.cameraTarget);
     }
 
-    setSelectionMode(mode: PointSelectionMode) {
+    setSelectionMode(mode: PointSelectionMode | null) {
         this.selector.setSelectionMode(mode);
     }
 
@@ -424,4 +431,14 @@ export class PointCanvas {
             this.points.material.dispose();
         }
     }
+
+    MobileSelectCells() {
+        // if used on tablet, this will select the cells upon button click
+        this.selector.sphereSelector.MobileFindAndSelect();
+    }
+
+    setSelectorScale(scale: number) {
+        // on tablet: this will set the size of the sphere selector upon the user using the slider
+        this.selector.sphereSelector.cursor.scale.set(scale, scale, scale);
+    }
 }
diff --git a/src/lib/PointSelector.ts b/src/lib/PointSelector.ts
index bd924e0d..3221eb1b 100644
--- a/src/lib/PointSelector.ts
+++ b/src/lib/PointSelector.ts
@@ -33,7 +33,7 @@ export class PointSelector {
     readonly boxSelector: BoxPointSelector;
     readonly sphereSelector: SpherePointSelector;
 
-    selectionMode: PointSelectionMode = PointSelectionMode.BOX;
+    selectionMode: PointSelectionMode | null = PointSelectionMode.BOX;
     // To notify external observers about changes to the current selection.
     selectionChanged: SelectionChanged = (_selection: number[]) => {};
     selectionPreviewChanged: SelectionPreviewChanged = (_selection: number[]) => {};
@@ -102,10 +102,13 @@ export class PointSelector {
         this.selectionPreviewChanged(selection);
     }
 
-    setSelectionMode(mode: PointSelectionMode) {
+    setSelectionMode(mode: PointSelectionMode | null) {
         console.debug("PointSelector.setSelectionMode: ", mode);
         this.selectionMode = mode;
-        this.sphereSelector.setVisible(mode !== PointSelectionMode.BOX, mode === PointSelectionMode.SPHERE);
+        this.sphereSelector.setVisible(
+            mode === PointSelectionMode.SPHERICAL_CURSOR || mode === PointSelectionMode.SPHERE,
+            mode === PointSelectionMode.SPHERE,
+        );
         if (mode == PointSelectionMode.SPHERICAL_CURSOR || mode == PointSelectionMode.SPHERE) {
             this.sphereSelector.findPointsWithinSelector();
         }
diff --git a/src/lib/SpherePointSelector.ts b/src/lib/SpherePointSelector.ts
index 420be64f..f0af084e 100644
--- a/src/lib/SpherePointSelector.ts
+++ b/src/lib/SpherePointSelector.ts
@@ -14,6 +14,7 @@ import {
 import { OrbitControls } from "three/addons/controls/OrbitControls.js";
 import { TransformControls } from "three/examples/jsm/Addons.js";
 import { SelectionChanged, SelectionPreviewChanged } from "@/lib/PointSelector";
+import { ViewerState } from "./ViewerState.ts";
 
 // Selecting with a sphere, with optional transform controls.
 export class SpherePointSelector {
@@ -64,6 +65,9 @@ export class SpherePointSelector {
         this.draggingChanged = this.draggingChanged.bind(this);
         this.cursorControl.addEventListener("change", this.findPointsWithinSelector.bind(this));
         this.cursorControl.addEventListener("dragging-changed", this.draggingChanged);
+
+        const cameraTarget = new ViewerState().cameraTarget;
+        this.cursor.position.set(cameraTarget[0], cameraTarget[1], cameraTarget[2]);
     }
 
     dispose() {
@@ -172,6 +176,12 @@ export class SpherePointSelector {
         normalMatrix.invert();
         const center = this.cursor.position;
         const geometry = this.points.geometry;
+
+        // Check if geometry has a valid 'position' attribute (not the case in the beginning of the app, when the eventListerer of the cursor already call this function)
+        if (!geometry || !geometry.getAttribute("position") || geometry.getAttribute("position").count === 0) {
+            return [];
+        }
+
         const positions = geometry.getAttribute("position");
         const numPoints = positions.count;
         const selected = [];
@@ -188,4 +198,28 @@ export class SpherePointSelector {
         this.selectionPreviewChanged(selected);
         return selected;
     }
+
+    MobileFindAndSelect() {
+        // if used on Mobile Device, this will select the cells upon button click
+        const radius = this.cursor.geometry.parameters.radius;
+        const normalMatrix = new Matrix3();
+        normalMatrix.setFromMatrix4(this.cursor.matrixWorld);
+        normalMatrix.invert();
+        const center = this.cursor.position;
+        const geometry = this.points.geometry;
+        const positions = geometry.getAttribute("position");
+        const numPoints = positions.count;
+        const selected = [];
+        for (let i = 0; i < numPoints; i++) {
+            const x = positions.getX(i);
+            const y = positions.getY(i);
+            const z = positions.getZ(i);
+            const vecToCenter = new Vector3(x, y, z).sub(center);
+            const scaledVecToCenter = vecToCenter.applyMatrix3(normalMatrix);
+            if (scaledVecToCenter.length() < radius) {
+                selected.push(i);
+            }
+        }
+        this.selectionChanged(selected);
+    }
 }