diff --git a/src/assets/Robinson.svg b/src/assets/Robinson.svg
new file mode 100644
index 000000000..d6f289ca9
--- /dev/null
+++ b/src/assets/Robinson.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="144.50848mm"
+   height="90.925735mm"
+   viewBox="0 0 144.50848 90.925735"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-33.273725,-104.80649)">
+    <rect
+       style="fill:none;fill-opacity:0.5;stroke:#000000;stroke-width:4.22701;paint-order:fill markers stroke"
+       id="rect1"
+       width="140.28149"
+       height="86.698723"
+       x="35.387234"
+       y="106.92"
+       ry="43.349361" />
+    <path
+       style="fill:none;fill-opacity:0.5;stroke:#000000;stroke-width:4.22701;paint-order:fill markers stroke"
+       d="m 136.74638,193.36596 c 0,0 22.74894,-10.69538 22.74894,-43.0966 0,-32.40122 -22.74894,-43.0966 -22.74894,-43.0966"
+       id="path1" />
+    <path
+       style="fill:none;fill-opacity:0.5;stroke:#000000;stroke-width:4.22701;paint-order:fill markers stroke"
+       d="m 122.98796,193.36596 c 0,0 11.88,-12.97027 11.88,-42.84383 0,-29.87356 -11.88,-43.34937 -11.88,-43.34937"
+       id="path2" />
+    <path
+       style="fill:none;fill-opacity:0.5;stroke:#000000;stroke-width:4.22701;paint-order:fill markers stroke"
+       d="m 105.90893,106.66723 v 87.20426"
+       id="path5" />
+    <path
+       style="fill:none;fill-opacity:0.5;stroke:#000000;stroke-width:4.22701;paint-order:fill markers stroke"
+       d="M 34.628936,150.39574 H 175.9251"
+       id="path6" />
+    <path
+       style="fill:none;fill-opacity:0.5;stroke:#000000;stroke-width:4.22701;paint-order:fill markers stroke"
+       d="M 41.959149,129.41617 H 169.35319"
+       id="path7" />
+    <path
+       style="fill:none;fill-opacity:0.5;stroke:#000000;stroke-width:4.22701;paint-order:fill markers stroke"
+       d="M 41.959149,171.37532 H 169.35319"
+       id="path8" />
+    <path
+       style="fill:none;fill-opacity:0.5;stroke:#000000;stroke-width:4.22701;paint-order:fill markers stroke"
+       d="m 75.237779,193.36596 c 0,0 -22.748942,-10.69538 -22.748942,-43.0966 0,-32.40122 22.748942,-43.0966 22.748942,-43.0966"
+       id="path9" />
+    <path
+       style="fill:none;fill-opacity:0.5;stroke:#000000;stroke-width:4.22701;paint-order:fill markers stroke"
+       d="m 88.996198,193.36596 c 0,0 -11.879999,-12.97027 -11.879999,-42.84383 0,-29.87356 11.879999,-43.34937 11.879999,-43.34937"
+       id="path10" />
+  </g>
+</svg>
diff --git a/src/components/plots/TransectMeshes.tsx b/src/components/plots/TransectMeshes.tsx
index 2f7711ab7..eb873eafa 100644
--- a/src/components/plots/TransectMeshes.tsx
+++ b/src/components/plots/TransectMeshes.tsx
@@ -3,7 +3,7 @@ import * as THREE from 'three'
 import { usePlotStore } from '@/GlobalStates/PlotStore'
 import { useGlobalStore } from '@/GlobalStates/GlobalStore'
 import { useShallow } from 'zustand/shallow'
-import { deg2rad, parseUVCoords } from '@/utils/HelperFuncs'
+import { deg2rad } from '@/utils/HelperFuncs'
 import { useCoordBounds } from '@/hooks/useCoordBounds'
 import { useAxisIndices } from '@/hooks'
 
@@ -19,26 +19,33 @@ function remapToXYZ(uv: THREE.Vector2, latBounds: number[], lonBounds: number[])
 	);
 }
 
-function normalToPos(uv: THREE.Vector2, normal:THREE.Vector3, ratios:{depthRatio:number, aspectRatio:number}): THREE.Vector3{
+function normalToPos(uv: THREE.Vector2, normal:THREE.Vector3, ratios:{depthRatio:number, aspectRatio:number}, steps:{xSteps:number, ySteps:number, zSteps:number}): THREE.Vector3{
 	let posZ, posY, posX: number;
+	const {xSteps,ySteps,zSteps} = steps;
 	const {aspectRatio, depthRatio} = ratios;
 	if (Math.abs(normal.z) == 1){
 		const flip = normal.z < 0;
-		const x = flip ? (1-uv.x)-0.5: (uv.x-0.5)
+		let x = flip ? (1-uv.x)-0.5: (uv.x-0.5)
+		x = (Math.floor(x * xSteps)+0.5)/xSteps;
 		posX = x*2;
-		posY = (uv.y-0.5)*2*aspectRatio;
+		const y = (Math.floor(uv.y * ySteps) + 0.5)/ySteps;
+		posY = (y-0.5)*2*aspectRatio;
 		posZ = 0;
 	} else if (Math.abs(normal.y) == 1){
 		const flip = normal.y > 0;
-		const y = flip ? (1-uv.y)-0.5: (uv.y-0.5)
-		posX = (uv.x-0.5)*2;
+		let y = flip ? (1-uv.y)-0.5: (uv.y-0.5)
+		y = (Math.floor(y * zSteps)+0.5)/zSteps;
+		const x = (Math.floor(uv.x * xSteps)+0.5)/xSteps;
+		posX = (x-0.5)*2;
 		posY = 0;
 		posZ = y*Math.max(depthRatio,2);
 	} else {
 		const flip = normal.x > 0;
-		const x = flip ? (1-uv.x)-0.5: (uv.x-0.5)
+		let x = flip ? (1-uv.x)-0.5: (uv.x-0.5)
+		x = (Math.floor(x * zSteps)+0.5)/zSteps;
 		posX = 0;
-		posY = (uv.y-0.5)*2*aspectRatio;
+		const y = (Math.floor(uv.y * ySteps) + 0.5)/ySteps;
+		posY = (y-0.5)*2*aspectRatio;
 		posZ = x*Math.max(depthRatio,2);
 	}
 	return new THREE.Vector3(posX, posY, posZ)
@@ -56,11 +63,11 @@ function normalToScale(normal:THREE.Vector3, ratios:{depthRatio:number, aspectRa
 	} else if (Math.abs(normal.y) == 1){
 		scaleX = 2/xSteps;
 		scaleY = 2*aspectRatio;
-		scaleZ = 2*Math.max(depthRatio,2)/zSteps;
+		scaleZ = Math.max(depthRatio,2)/zSteps;
 	} else{
 		scaleX = 2;
 		scaleY = 2*aspectRatio/ySteps;
-		scaleZ = 2*Math.max(depthRatio,2)/zSteps;
+		scaleZ = Math.max(depthRatio,2)/zSteps;
 	}
 	return new THREE.Vector3(scaleX, scaleY, scaleZ);
 }
@@ -144,10 +151,9 @@ export const ColumnMeshes = () => {
 		const zSteps = dataShape[zIdx];
 		const aspectRatio = ySteps/xSteps; // This is not aspect ratio
 		const depthRatio = zSteps/xSteps;
-
 		for (const [_tsID, tsObj] of Object.entries(timeSeries)){
 			const {normal, uv, color} = tsObj
-			const position = normalToPos(uv, normal, {aspectRatio,depthRatio})
+			const position = normalToPos(uv, normal, {aspectRatio,depthRatio}, {xSteps, ySteps, zSteps})
 			const meshScale = normalToScale(normal, {aspectRatio, depthRatio}, {xSteps, ySteps, zSteps})
 			const thisColor = color.map((c: number) => Math.pow((c/255), 2.2)) // Gamma correct the color
 			const material = new THREE.MeshBasicMaterial({color: new THREE.Color(...thisColor)})
diff --git a/src/components/plots/UVCube.tsx b/src/components/plots/UVCube.tsx
index 189e750b7..093880879 100644
--- a/src/components/plots/UVCube.tsx
+++ b/src/components/plots/UVCube.tsx
@@ -143,7 +143,6 @@ export const UVCube = ( {scale} : {scale?:THREE.Vector3} )=>{
         units:axisDimUnits[2-plotDim[0]] ?? ''
       }
     }
-    console.log(dimObj)
     updateDimCoords({[tsID] : dimObj})
   }
 
diff --git a/src/components/ui/Elements/ColorAdjuster.tsx b/src/components/ui/Elements/ColorAdjuster.tsx
index f11305119..97ce175e1 100644
--- a/src/components/ui/Elements/ColorAdjuster.tsx
+++ b/src/components/ui/Elements/ColorAdjuster.tsx
@@ -55,7 +55,7 @@ const ColorAdjuster = () => {
 					</PopoverTrigger>
 					<PopoverContent>
 						<p>Along with general arithmetic operations. The following globals can also be used:</p>
-						<ul className='grid grid-cols-2 !list-none bg-gray-100 rounded-lg border-solid border-2'>
+						<ul className='grid grid-cols-2 !list-none bg-[var(--background-modal)] rounded-lg border-solid border-2'>
 							{[
 								'abs(x)', 'sqrt(x)', 'min(x, y)', 'max(x, y)', 
 								'log(x)', 'log2(x)',  'exp(x)', 'exp2(x)', 
diff --git a/src/components/ui/Elements/Icons.tsx b/src/components/ui/Elements/Icons.tsx
index 18332c040..a3e138561 100644
--- a/src/components/ui/Elements/Icons.tsx
+++ b/src/components/ui/Elements/Icons.tsx
@@ -66,5 +66,50 @@ const Potato = ({ color = "currentColor", size = 24, ...props }: IconProps) => (
   </svg>
 );
 
+const Robinson = ({
+  color = "currentColor",
+  size = 24,
+  strokeWidth = 1.5,
+  ...props
+}: IconProps) => (
+  <svg
+    fill="none"
+    stroke={color}
+    strokeWidth={strokeWidth}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    height={size}
+    width={size}
+    viewBox="0 0 144.50848 90.925735"
+    version="1.1"
+    id="svg1"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <defs id="defs1" />
+    <g
+      id="layer1"
+      transform="translate(-33.273725,-104.80649)"
+    >
+      <rect
+        id="rect1"
+        width="140.28149"
+        height="86.698723"
+        x="35.387234"
+        y="106.92"
+        ry="43.349361"
+      />
+      <path d="m 136.74638,193.36596 c 0,0 22.74894,-10.69538 22.74894,-43.0966 0,-32.40122 -22.74894,-43.0966 -22.74894,-43.0966" id="path1" />
+      <path d="m 122.98796,193.36596 c 0,0 11.88,-12.97027 11.88,-42.84383 0,-29.87356 -11.88,-43.34937 -11.88,-43.34937" id="path2" />
+      <path d="m 105.90893,106.66723 v 87.20426" id="path5" />
+      <path d="M 34.628936,150.39574 H 175.9251" id="path6" />
+      <path d="M 41.959149,129.41617 H 169.35319" id="path7" />
+      <path d="M 41.959149,171.37532 H 169.35319" id="path8" />
+      <path d="m 75.237779,193.36596 c 0,0 -22.748942,-10.69538 -22.748942,-43.0966 0,-32.40122 22.748942,-43.0966 22.748942,-43.0966" id="path9" />
+      <path d="m 88.996198,193.36596 c 0,0 -11.879999,-12.97027 -11.879999,-42.84383 0,-29.87356 11.879999,-43.34937 11.879999,-43.34937" id="path10" />
+    </g>
+  </svg>
+);
+
 
-export { Perspective, Orthographic, Potato };
\ No newline at end of file
+export { Perspective, Orthographic, Potato, Robinson };
\ No newline at end of file
diff --git a/src/components/ui/Elements/Reprojection.tsx b/src/components/ui/Elements/Reprojection.tsx
index aebe3a630..b18450609 100644
--- a/src/components/ui/Elements/Reprojection.tsx
+++ b/src/components/ui/Elements/Reprojection.tsx
@@ -2,12 +2,15 @@ import { usePlotStore } from '@/GlobalStates/PlotStore'
 import React, { useRef, useState } from 'react'
 import { useShallow } from 'zustand/shallow'
 import { Hider } from '../Widgets/Hider'
-import { ChevronDown } from 'lucide-react'
+import { ChevronLeft } from 'lucide-react'
 import { Input } from '../input'
 import { Button } from '@/components/ui'
 import { checkProjString, reproject, resetProjection } from '@/components/textures/ProjectionTexture'
 import { TbReplace } from "react-icons/tb";
 import { RxReset } from "react-icons/rx";
+import { Robinson } from './Icons'
+import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
+
 
 export const Reprojection = () => {
     const {destCRS, nativeCRS, is360Deg} = usePlotStore(useShallow(s => s))
@@ -26,94 +29,98 @@ export const Reprojection = () => {
     }
     return (
         <div className="space-y-2">
-            <button
-                onClick={() => setShowRepro(x => !x)}
-                className="flex items-center gap-2 w-full mb-2"
-            >
-                <b>Reprojection</b>
-                <ChevronDown
-                    className={`h-4 w-4 transition-transform duration-200 ${
-                        showRepro ? '' : 'rotate-180'
-                    }`}
-                />
-            </button>
-            <Hider show={showRepro}>
-                <div className="space-y-3">
-                    { is360Deg && 
-                    <div className='warn-box'>
-                        360° coordinates may behave unexpectedly. 
+            <Popover open={showRepro} onOpenChange={setShowRepro}>
+                <PopoverTrigger asChild>
+                    <div className='flex items-center justify-between mb-2'>
+                    <ChevronLeft className={`h-4 w-4 transition-transform duration-200 ${
+                        showRepro ? '' : 'rotate-180'} z-5`} />
+                    <Button
+                        variant='secondary'
+                        className="flex items-center flex-grow justify-center gap-2 h-auto "
+                    >
+                        <b>Reprojection</b>
+                        <Robinson strokeWidth={2} className="size-8" />
+                    </Button>
                     </div>
-                    }
-                    <div className="grid grid-cols-[auto_30px] items-center gap-1">
-                        <div
-                            className="min-w-0 break-all max-h-20 overflow-scroll no-scrollbar rounded-md border border-[#333] bg-[#1e1e1e] px-1 py-2 font-mono text-sm text-[#d4d4d4] whitespace-pre-wrap"
-                        >
-                            {nativeCRS
-                                ? `Native CRS: ${nativeCRS}`
-                                : "No CRS detected"}
+                </PopoverTrigger>
+                <PopoverContent side='left'>
+                    <div className="space-y-3">
+                        { is360Deg && 
+                        <div className='warn-box'>
+                            360° coordinates may behave unexpectedly. 
                         </div>
-                        <div className="flex flex-col gap-1">
-                            <button 
-                                className="shrink-0 rounded-md p-2 hover:bg-muted cursor-pointer transition-colors"
-                                onClick={resetProjection}
-                            >
-                                <RxReset className="h-4 w-4" />
-                            </button>
-                            <button 
-                                className="shrink-0 rounded-md p-2 hover:bg-muted cursor-pointer transition-colors"
-                                onClick={()=>setChangeNativeCRS(x=>!x)}
+                        }
+                        <div className="grid grid-cols-[auto_30px] items-center gap-1">
+                            <div
+                                className="min-w-0 break-all max-h-20 overflow-scroll no-scrollbar rounded-md border border-[#333] bg-[#1e1e1e] px-1 py-2 font-mono text-sm text-[#d4d4d4] whitespace-pre-wrap"
                             >
-                                <TbReplace className="h-4 w-4" />
-                            </button>
+                                {nativeCRS
+                                    ? `Native CRS: ${nativeCRS}`
+                                    : "No CRS detected"}
+                            </div>
+                            <div className="flex flex-col gap-1">
+                                <button 
+                                    className="shrink-0 rounded-md p-2 hover:bg-muted cursor-pointer transition-colors"
+                                    onClick={resetProjection}
+                                >
+                                    <RxReset className="h-4 w-4" />
+                                </button>
+                                <button 
+                                    className="shrink-0 rounded-md p-2 hover:bg-muted cursor-pointer transition-colors"
+                                    onClick={()=>setChangeNativeCRS(x=>!x)}
+                                >
+                                    <TbReplace className="h-4 w-4" />
+                                </button>
+                            </div>
+                            
                         </div>
-                        
-                    </div>
-                    <Hider show={!nativeCRS || changeNativeCRS}>
-                        <div className="flex flex-col gap-2 rounded-md border border-dashed border-muted-foreground/30 p-3">
-                            <Input
-                                type="string"
-                                defaultValue={tempCRS.current}
-                                onChange={e => (tempCRS.current = e.target.value)}
-                                placeholder={`${nativeCRS ? "Update" : "Enter" } native CRS`}
-                            />
+                        <Hider show={!nativeCRS || changeNativeCRS}>
+                            <div className="flex flex-col gap-2 rounded-md border border-dashed border-muted-foreground/30 p-3">
+                                <Input
+                                    type="string"
+                                    defaultValue={tempCRS.current}
+                                    onChange={e => (tempCRS.current = e.target.value)}
+                                    placeholder={`${nativeCRS ? "Update" : "Enter" } native CRS`}
+                                />
+                                <Button
+                                    className="cursor-pointer w-full"
+                                    onClick={handleNativeCRS}
+                                >
+                                    Set native CRS
+                                </Button>
+                            </div>
+                        </Hider>
+                        <div className="grid grid-cols-[60%_35%] gap-2 pt-1">
+                            <div className='col-span-2 grid grid-cols-[65%_30%]'>
+                                <p>Target Projection</p>
+                                <p>Resolution</p>
+                                <Input
+                                    type="string"
+                                    defaultValue={destCRS}
+                                    onChange={e => usePlotStore.setState({ destCRS: e.target.value })}
+                                    placeholder="Target projection"
+                                />
+                                <Input
+                                    className='appearance-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none'
+                                    type="number"
+                                    defaultValue={repRes.current}
+                                    step={1}
+                                    onChange={e => { const val = parseInt(e.target.value); repRes.current = isNaN(val) ? 256 : val; }}
+                                    placeholder="Resolution"
+                                />
+                            </div>
                             <Button
-                                className="cursor-pointer w-full"
-                                onClick={handleNativeCRS}
+                                variant='pink'
+                                className="cursor-pointer col-span-2"
+                                onClick={()=>reproject(repRes.current)}
+                                disabled={!destCRS || !nativeCRS || isNaN(repRes.current)}
                             >
-                                Set native CRS
+                                Reproject
                             </Button>
                         </div>
-                    </Hider>
-                    <div className="grid grid-cols-[60%_35%] gap-2 pt-1">
-                        <div className='col-span-2 grid grid-cols-[65%_30%]'>
-                            <p>Target Projection</p>
-                            <p>Resolution</p>
-                            <Input
-                                type="string"
-                                defaultValue={destCRS}
-                                onChange={e => usePlotStore.setState({ destCRS: e.target.value })}
-                                placeholder="Target projection"
-                            />
-                            <Input
-                                className='appearance-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none'
-                                type="number"
-                                defaultValue={repRes.current}
-                                step={1}
-                                onChange={e => { const val = parseInt(e.target.value); repRes.current = isNaN(val) ? 256 : val; }}
-                                placeholder="Resolution"
-                            />
-                        </div>
-                         <Button
-                            variant='pink'
-                            className="cursor-pointer col-span-2"
-                            onClick={()=>reproject(repRes.current)}
-                            disabled={!destCRS || !nativeCRS || isNaN(repRes.current)}
-                        >
-                            Reproject
-                        </Button>
                     </div>
-                </div>
-            </Hider>
+                </PopoverContent>
+            </Popover>
         </div>
     )
 }
diff --git a/src/components/ui/MainPanel/AdjustPlot.tsx b/src/components/ui/MainPanel/AdjustPlot.tsx
index bc7656847..c6e2240d5 100644
--- a/src/components/ui/MainPanel/AdjustPlot.tsx
+++ b/src/components/ui/MainPanel/AdjustPlot.tsx
@@ -535,6 +535,7 @@ const GlobalOptions = () =>{
           </Select>
         </div>
       </Hider>
+      <Reprojection />
       {!(analysisMode && axis != 0) && // Hide if Analysismode and Axis != 0
       <>
       <QuickTip 
@@ -609,8 +610,8 @@ const AdjustPlot = () => {
     const [popoverSide, setPopoverSide] = useState<"left" | "top">("left");
     const [open, setOpen] = useState(false);
 
-    const {plotOn} = useGlobalStore(useShallow(s => s))
-    const {plotType} = usePlotStore(useShallow(s => s))
+    const {plotOn} = useGlobalStore(useShallow(s => ({plotOn: s.plotOn})))
+    const {plotType} = usePlotStore(useShallow(s => ({plotType: s.plotType})))
 
   useEffect(() => {
       const handleResize = () => {
@@ -661,22 +662,27 @@ const AdjustPlot = () => {
               <RiCloseLargeLine className="size-4" />
             </Button>
         </QuickTip>
-        <div className={`overflow-y-auto no-scrollbar -mx-4 px-4 ${popoverSide === 'top' ? 'max-h-[80vh]' : 'max-h-[70vh]'}`}>          
-          <RxReset size={25} 
+        <div className={`overflow-y-auto no-scrollbar -mx-4 px-4 pt-2 ${popoverSide === 'top' ? 'max-h-[80vh]' : 'max-h-[70vh]'}`}>    
+          <Button
+            className='size-12 !p-0'
+            variant='ghost'
             style={{
-              // position:'absolute',
-              top:"10px",
-              left:"10px",
+              padding:'0px',
+              margin:'0px',
+              position:'absolute',
+              top:"5px",
+              left:"5px",
               cursor:'pointer',
             }} 
             onClick={resetViz}
-          />
+          >
+            <RxReset className='size-6'/>
+          </Button>      
           {plotType === 'volume' && <VolumeOptions />}
           {plotType === 'point-cloud' && <PointOptions />}
           {plotType === 'sphere' && <SphereOptions/>}
           {(plotType === 'volume' || plotType === 'point-cloud') && <DimSlicer />}
           {plotType === 'flat' && <FlatOptions />}
-          <Reprojection />
           <GlobalOptions />
         </div>
       </PopoverContent>
diff --git a/src/components/ui/NavBar/ExportImageSettings.tsx b/src/components/ui/NavBar/ExportImageSettings.tsx
index 35e3072c7..d1e3dc529 100644
--- a/src/components/ui/NavBar/ExportImageSettings.tsx
+++ b/src/components/ui/NavBar/ExportImageSettings.tsx
@@ -8,7 +8,7 @@ import { useGlobalStore } from '@/GlobalStates/GlobalStore';
 import { usePlotStore } from '@/GlobalStates/PlotStore';
 import { useZarrStore } from '@/GlobalStates/ZarrStore';
 import { useShallow } from 'zustand/shallow';
-import { ChevronDown } from 'lucide-react';
+import { ChevronDown, ChevronLeft } from 'lucide-react';
 import {
   Select,
   SelectContent,
@@ -120,12 +120,13 @@ const ExportImageSettings = () => {
                 <div className='grid'>
                     <label htmlFor="main-title">Main Title</label>
                     <Input id='main-title' type='string' value={mainTitle} onChange={e=> setMainTitle(e.target.value)}/>
-
-                    <label htmlFor="cbar-title">Colorbar Label</label>
-                    <Input id='cbar-title' type='string' placeholder={variable} value={cbarLabel} onChange={e=> setCbarLabel(e.target.value)}/>
-                
-                    <label htmlFor="cbar-title">Colorbar Units</label>
-                    <Input id='cbar-title' type='string' placeholder={metadata?.units?? "undefined"} value={cbarUnits} onChange={e=> setCbarUnits(e.target.value)}/>
+                    <Hider show={includeColorbar} >
+                        <label htmlFor="cbar-title">Colorbar Label</label>
+                        <Input id='cbar-title' type='string' placeholder={variable} value={cbarLabel} onChange={e=> setCbarLabel(e.target.value)}/>
+                    
+                        <label htmlFor="cbar-title">Colorbar Units</label>
+                        <Input id='cbar-title' type='string' placeholder={metadata?.units?? "undefined"} value={cbarUnits} onChange={e=> setCbarUnits(e.target.value)}/>
+                    </Hider>
                 </div>
             </Hider>
             {/* Settings */}
@@ -209,111 +210,125 @@ const ExportImageSettings = () => {
                 </div>
             </Hider>
             {/* ANIMATION */}
-            <button 
-                onClick={() => setShowAnimation(x=>!x)}
-                className="flex items-center gap-2 w-full "
-            >
-                <b>Animations</b>
-                <ChevronDown 
-                    className={`h-4 w-4 transition-transform duration-200 ${
-                    !showAnimation ? 'rotate-180' : ''
-                    }`}
-                />
-            </button>
-            <Hider show={showAnimation} className='grid col-span-2 gap-2'>
-                <div className="grid grid-cols-[auto_60px] items-center gap-2">
-                    <label htmlFor="useAnimate">Export Animation</label>
-                    <Switch id='useAnimate' checked={animate} onCheckedChange={e => setAnimate(e)}/>
-                    {/* Animation Settings */}
-                    <Hider show={animate} className='col-span-2 '>
-                        <div className="grid grid-cols-[auto_80px] items-center gap-1 mb-2">
-                            <label htmlFor="frames">Frames</label>
-                            <Input className='h-[26px]' id="frames" type='number' step={1} value={frames} onChange={e => setFrames(parseInt(e.target.value))} />
-                            <label htmlFor="fps">FPS</label>
-                            <Input className='h-[26px]' id="fps" type='number' step={1} value={frameRate} onChange={e => setFrameRate(parseInt(e.target.value))} />
-                        </div>
-                        <div className="grid grid-cols-[auto_60px] items-center gap-2">
-                            
-                            <label htmlFor="useOrbit">Orbit</label>
-                            <Switch id="useOrbit" checked={orbit} onCheckedChange={e=> setOrbit(e)} />
-							
-							<Hider show={orbit} className='col-span-2'>
-                                <div className="grid grid-cols-[auto_80px] items-center gap-2 mb-2">
-                                    <label htmlFor="orbitDeg">Orbit Degrees</label>
-                                    <Input id="orbitDeg" type='number' step={1} value={orbitDeg} onChange={e => setOrbitDeg(parseInt(e.target.value))} />
-                                </div>
-                                <div className="grid grid-cols-[auto_60px] items-center gap-2 mb-2">
-                                    <label htmlFor="orbitDir">Direction</label>
-                                    <FaLongArrowAltRight id='orbitDir' onClick={()=>useImageExportStore.getState().flipOrbitDir()}
-                                        style={{
-                                            transform: `${orbitDir ? "rotate(180deg)" : ""}`,
-                                            transition: ".25s",
-                                            cursor:"pointer"
-                                        }}      
-                                        size={26}
-                                    />
-									<label htmlFor="useOrbit">Ping-Pong</label>
-									<Switch id="useOrbit" checked={pingpong} onCheckedChange={e=> setPingpong(e)} />
-								</div>
-
-                                <div className='border-b my-2' />
-							</Hider>
-                            
-                            <label htmlFor="useTime">Animate Time</label>
-                            <Switch id="useTime" checked={useTime} onCheckedChange={e=> setUseTime(e)} />
-                            <Hider show={useTime} className='col-span-2'>
-                                <div className="grid grid-cols-[auto_80px] items-center gap-2 mb-2">
-                                    <label htmlFor="timeRate">Time FPS</label>
-                                    <Input id="timeRate" type='number' step={1} value={timeRate} onChange={e => setTimeRate(parseInt(e.target.value))} />
-                                </div> 
-                                <div className="grid grid-cols-[auto_60px] items-center gap-2">
-                                    <label htmlFor="loopTime">Loop Time</label>
-                                    <Switch id="loopTime" checked={loopTime} onCheckedChange={e=> setLoopTime(e)} />
-                                </div>
-                                <div className='border-b my-2' />
-                            </Hider>
+            <Popover open={showAnimation} onOpenChange={setShowAnimation}>
+                <PopoverTrigger className='col-span-2' asChild>
+                    <div className='flex items-center justify-between mb-2'>
+                    
+                    <Button
+                        variant='secondary'
+                        className="flex items-center flex-grow justify-center gap-2 h-auto "
+                    >
+                        <b>Animation Settings</b>
+                    </Button>
+                    <ChevronLeft className={`h-4 w-4 transition-transform duration-200 ${
+                        showAnimation ? 'rotate-180' : '' } z-5`} />
+                    </div>
+                </PopoverTrigger>
+                <PopoverContent side='right' className='w-50'>
+                    <div className="grid grid-cols-[auto_60px] items-center gap-2">
+                        {/* Animation Settings */}
+                        <div className='col-span-2 '>
+                            <div className="grid grid-cols-[auto_80px] items-center gap-1 mb-2">
+                                <label htmlFor="frames">Frames</label>
+                                <Input className='h-[26px]' id="frames" type='number' step={1} value={frames} onChange={e => setFrames(parseInt(e.target.value))} />
+                                <label htmlFor="fps">FPS</label>
+                                <Input className='h-[26px]' id="fps" type='number' step={1} value={frameRate} onChange={e => setFrameRate(parseInt(e.target.value))} />
+                            </div>
+                            <div className="grid grid-cols-[auto_60px] items-center gap-2">
+                                
+                                <label htmlFor="useOrbit">Orbit</label>
+                                <Switch id="useOrbit" checked={orbit} onCheckedChange={e=> setOrbit(e)} />
+                                
+                                <Hider show={orbit} className='col-span-2'>
+                                    <div className="grid grid-cols-[auto_80px] items-center gap-2 mb-2">
+                                        <label htmlFor="orbitDeg">Orbit Degrees</label>
+                                        <Input id="orbitDeg" type='number' step={1} value={orbitDeg} onChange={e => setOrbitDeg(parseInt(e.target.value))} />
+                                    </div>
+                                    <div className="grid grid-cols-[auto_60px] items-center gap-2 mb-2">
+                                        <label htmlFor="orbitDir">Direction</label>
+                                        <FaLongArrowAltRight id='orbitDir' onClick={()=>useImageExportStore.getState().flipOrbitDir()}
+                                            style={{
+                                                transform: `${orbitDir ? "rotate(180deg)" : ""}`,
+                                                transition: ".25s",
+                                                cursor:"pointer"
+                                            }}      
+                                            size={26}
+                                        />
+                                        <label htmlFor="useOrbit">Ping-Pong</label>
+                                        <Switch id="useOrbit" checked={pingpong} onCheckedChange={e=> setPingpong(e)} />
+                                    </div>
 
-                            <Button
-								className='col-span-2 cursor-pointer'
-								onClick={()=>setKeyFrameEditor(true)}
-							>
-								Keyframe Editor <BsBoxArrowRight/>
-							</Button>
-							{keyFrames &&
-                            <div className='col-span-2 text-center'>
-                                <b>Export Keyframes</b>
-                                <div className='grid grid-cols-2 items-center'>
-                                    <div>
-										<QuickTip message='Copy the current keyframes to JSON for use in a coding environment'>
-											<Button
-												className='p-2'
-												variant='ghost'
-												onClick={copyToClipboard}
-											>
-												<FiCopy className='size-4'/><span className='text-xs'>Copy</span>
-											</Button>
-										</QuickTip>
+                                    <div className='border-b my-2' />
+                                </Hider>
+                                
+                                <label htmlFor="useTime">Animate Time</label>
+                                <Switch id="useTime" checked={useTime} onCheckedChange={e=> setUseTime(e)} />
+                                <Hider show={useTime} className='col-span-2'>
+                                    <div className="grid grid-cols-[auto_80px] items-center gap-2 mb-2">
+                                        <label htmlFor="timeRate">Time FPS</label>
+                                        <Input id="timeRate" type='number' step={1} value={timeRate} onChange={e => setTimeRate(parseInt(e.target.value))} />
+                                    </div> 
+                                    <div className="grid grid-cols-[auto_60px] items-center gap-2">
+                                        <label htmlFor="loopTime">Loop Time</label>
+                                        <Switch id="loopTime" checked={loopTime} onCheckedChange={e=> setLoopTime(e)} />
                                     </div>
-                                    <div>
-										<QuickTip message='Export the current keyframes to JSON for use in a coding environment'>
-											<Button
-												className='p-2'
-												variant='ghost'
-												onClick={exportToJson}
-											>
-												<BiExport className='size-4'/><span className='text-xs'>Export</span>
-											</Button>
-                                        </QuickTip>
+                                    <div className='border-b my-2' />
+                                </Hider>
+
+                                <Button
+                                    className='col-span-2 cursor-pointer'
+                                    onClick={()=>setKeyFrameEditor(true)}
+                                >
+                                    Keyframe Editor <BsBoxArrowRight/>
+                                </Button>
+                                {keyFrames &&
+                                <div className='col-span-2 text-center'>
+                                    <b>Export Keyframes</b>
+                                    <div className='grid grid-cols-2 items-center'>
+                                        <div>
+                                            <QuickTip message='Copy the current keyframes to JSON for use in a coding environment'>
+                                                <Button
+                                                    className='p-2'
+                                                    variant='ghost'
+                                                    onClick={copyToClipboard}
+                                                >
+                                                    <FiCopy className='size-4'/><span className='text-xs'>Copy</span>
+                                                </Button>
+                                            </QuickTip>
+                                        </div>
+                                        <div>
+                                            <QuickTip message='Export the current keyframes to JSON for use in a coding environment'>
+                                                <Button
+                                                    className='p-2'
+                                                    variant='ghost'
+                                                    onClick={exportToJson}
+                                                >
+                                                    <BiExport className='size-4'/><span className='text-xs'>Export</span>
+                                                </Button>
+                                            </QuickTip>
+                                        </div>
                                     </div>
                                 </div>
+                                }
                             </div>
-							}
+                            <div className='my-2'/>
+                            <QuickTip message='Chose export quality. Preview for fast test renders' asChild>
+                                <div className='col-span-2'>
+                                <Switcher leftText='Preview' rightText='Final' state={preview} onClick={()=> setPreview(!preview)} />
+                                </div>
+                            </QuickTip>
+                            
                         </div>
-                        <div className='my-2'/>
-                        <Switcher leftText='Preview' rightText='Final' state={preview} onClick={()=> setPreview(!preview)} />
-                    </Hider>
+                    </div>
+                </PopoverContent>
+            </Popover>
+            <b className='col-span-2 text-center'><u>Export As</u></b>
+            <QuickTip message='Export as an image or as an animation' asChild>
+                <div className='col-span-2'>
+                <Switcher leftText='Image' rightText='Animation' state={!animate} onClick={()=> setAnimate(!animate)} />
                 </div>
-            </Hider>
+            </QuickTip>
+            
             <Button
                 className="col-span-2"
                 variant='pink'
diff --git a/src/components/ui/NavBar/PlotLineButton.tsx b/src/components/ui/NavBar/PlotLineButton.tsx
index 2060e3e3d..574f420cd 100644
--- a/src/components/ui/NavBar/PlotLineButton.tsx
+++ b/src/components/ui/NavBar/PlotLineButton.tsx
@@ -5,54 +5,48 @@ import { VscGraphLine } from "react-icons/vsc"; //Use this if you hate the svg
 import { usePlotStore } from '@/GlobalStates/PlotStore';
 import { useShallow } from 'zustand/shallow';
 import '../css/PlotLineButton.css'
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { Button } from "@/components/ui/button-enhanced"
 import { useGlobalStore } from '@/GlobalStates/GlobalStore';
+import { QuickTip } from '../Widgets/QuickTip';
 
 const PlotLineButton = () => {
-    const {selectTS, resetAnim, displaceFaces, setSelectTS, setResetAnim} = usePlotStore(useShallow(s => s))
-    const {isFlat} = useGlobalStore(useShallow(s => s))
-    const exception = !displaceFaces || isFlat
+    const {selectTS, resetAnim, displaceFaces, plotType, setSelectTS, setResetAnim} = usePlotStore(useShallow(s => s))
+    const isFlat = useGlobalStore(s => s.isFlat)
+    const instanced = ['sphere','flatMap'].includes(plotType) && displaceFaces
+    const exception = instanced || isFlat
     useEffect(()=>{//Disable TS mode if switching to Flat mode and already enabled
       if (isFlat && selectTS){
         setSelectTS(false)
       }
     },[isFlat])
-
     const tooltipMsg = () =>{
       if (isFlat){
         return "Data is flat. No timeseries available"
-      } else if (!displaceFaces){
+      } else if (instanced){
         return "Transect select doesn't work when using instancing (Displacement of faces)"
       } else{
         return "While active, click the volume to view 1D transects through the given dimension."
       }
     }
   return (
-      <Tooltip delayDuration={500} >
-        <TooltipTrigger asChild>
-          {/* Move button into Div so that cursor events are passed to the tooltip trigger when disabled*/}
-          <div> 
-            <Button
-              variant="ghost"
-              size="icon"
-              className="size-10 cursor-pointer"
-              disabled={exception}
-              onClick={() => {setResetAnim(!resetAnim); setSelectTS(!selectTS)}}
-            >
-              <VscGraphLine
-                className="size-6"
-                style={{
-                color: selectTS ? "gold" : "var(--text-plot)",
-                filter: selectTS ? "drop-shadow(0px 0px 10px gold)" : "",
-              }}/>
-            </Button>
-          </div>
-        </TooltipTrigger>
-        <TooltipContent side="right" align="start">
-          {tooltipMsg()}
-        </TooltipContent>
-      </Tooltip>
+    <QuickTip message={tooltipMsg()} >
+      <div> 
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-10 cursor-pointer"
+          disabled={exception}
+          onClick={() => {setResetAnim(!resetAnim); setSelectTS(!selectTS)}}
+        >
+          <VscGraphLine
+            className="size-6"
+            style={{
+            color: selectTS ? "gold" : "var(--text-plot)",
+            filter: selectTS ? "drop-shadow(0px 0px 10px gold)" : "",
+          }}/>
+        </Button>
+      </div>
+    </QuickTip>
   )
 }