diff --git a/app/components/inbox/messageList.tsx b/app/components/inbox/messageList.tsx
index a1abcc46..9e45668f 100644
--- a/app/components/inbox/messageList.tsx
+++ b/app/components/inbox/messageList.tsx
@@ -171,7 +171,7 @@ const MessageList: React.FunctionComponent<Props> = ({
           </div>
         )}
 
-        <div style={{ height: 320, overflowY: 'auto', overflowX: 'hidden' }}>
+        <div className='mb-2' style={{ height: 320, overflowY: 'auto', overflowX: 'hidden' }}>
           {messages.length === 0 ? (
             <div className='notification is-info is-light'>There are no messages.</div>
           ) : (
diff --git a/app/components/intelligence/spiesTab.tsx b/app/components/intelligence/spiesTab.tsx
index 12ea514f..e7114a21 100644
--- a/app/components/intelligence/spiesTab.tsx
+++ b/app/components/intelligence/spiesTab.tsx
@@ -65,7 +65,7 @@ const SpiesTab: React.FunctionComponent<Props> = ({ building }) => {
         {spies.length === 0 ? (
           <div className='notification is-info is-light'>There are no spies stationed here.</div>
         ) : (
-          <div style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
+          <div className='mb-2' style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
             {spies.map((spy) => {
               const selectedAssignment = assignments[spy.id] ?? spy.assignment;
               const taskOptions =
diff --git a/app/components/map/useDraggableMap.ts b/app/components/map/useDraggableMap.ts
index 2f12bf66..a9e8a1e3 100644
--- a/app/components/map/useDraggableMap.ts
+++ b/app/components/map/useDraggableMap.ts
@@ -238,10 +238,30 @@ export const useDraggableMap = ({ kind, initialZoom = 0 }: Options): DraggableMa
   const setZoom = useCallback(
     (nextZoom: number) => {
       const clamped = clampZoom(kind, nextZoom);
+      if (clamped === zoom) return;
+
+      // Tiles are laid out at coord*tileSize from the container origin, so a zoom change resizes
+      // them about that origin - the same pan offset then points at a different game coordinate and
+      // the view appears to drift. Scale the offset about the viewport centre by the tile-size ratio
+      // so whatever was under the middle of the screen stays there.
+      const ratio = tileSizeForZoom(kind, clamped) / tileSize;
+      const rect = viewportRef.current?.getBoundingClientRect();
+      const cx = (rect?.width ?? 0) / 2;
+      const cy = (rect?.height ?? 0) / 2;
+      const current = liveOffsetRef.current;
+      const next: PixelPoint = {
+        x: cx - (cx - current.x) * ratio,
+        y: cy - (cy - current.y) * ratio,
+      };
+
+      liveOffsetRef.current = next;
+      setOffsetPx(next);
+      applyTransform(containerRef.current, viewportRef.current, next);
+
       writeStoredZoom(kind, clamped);
       setZoomState(clamped);
     },
-    [kind]
+    [kind, zoom, tileSize]
   );
 
   const panToCoord = useCallback(
diff --git a/app/components/market/availableTradesTab.tsx b/app/components/market/availableTradesTab.tsx
index 87e6c130..28b40b85 100644
--- a/app/components/market/availableTradesTab.tsx
+++ b/app/components/market/availableTradesTab.tsx
@@ -48,7 +48,7 @@ const AvailableTradesTab: React.FunctionComponent<Props> = ({
         {trades.length === 0 ? (
           <div className='notification is-info is-light'>{emptyMessage}</div>
         ) : (
-          <div style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
+          <div className='mb-2' style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
             <table className='table is-fullwidth is-narrow'>
               <thead>
                 <tr>
diff --git a/app/components/market/myTradesTab.tsx b/app/components/market/myTradesTab.tsx
index 3758b7a0..f36da60b 100644
--- a/app/components/market/myTradesTab.tsx
+++ b/app/components/market/myTradesTab.tsx
@@ -41,7 +41,7 @@ const MyTradesTab: React.FunctionComponent<Props> = ({
         {trades.length === 0 ? (
           <div className='notification is-info is-light'>{emptyMessage}</div>
         ) : (
-          <div style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
+          <div className='mb-2' style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
             <table className='table is-fullwidth is-narrow'>
               <thead>
                 <tr>
diff --git a/app/components/observatory/probesTab.tsx b/app/components/observatory/probesTab.tsx
index 5774d5ae..c0668778 100644
--- a/app/components/observatory/probesTab.tsx
+++ b/app/components/observatory/probesTab.tsx
@@ -44,6 +44,7 @@ const ProbesTab: React.FunctionComponent<Props> = ({ building }) => {
           </div>
 
           <div
+            className='mb-2'
             style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto', overflowX: 'hidden' }}
           >
             <div className='columns is-multiline'>
diff --git a/app/components/policeStation/shipsTab.tsx b/app/components/policeStation/shipsTab.tsx
index 3fc402b1..fa73e980 100644
--- a/app/components/policeStation/shipsTab.tsx
+++ b/app/components/policeStation/shipsTab.tsx
@@ -70,7 +70,7 @@ const ShipsTab: React.FunctionComponent<Props> = ({ building, kind }) => {
   let total = 0;
 
   if (kind === 'travelling') {
-    const {data} = travelling;
+    const { data } = travelling;
     total = data?.number_of_ships_travelling ?? 0;
     rows = (data?.ships_travelling ?? []).map((ship, index) => ({
       key: `${ship.id ?? index}`,
@@ -80,7 +80,7 @@ const ShipsTab: React.FunctionComponent<Props> = ({ building, kind }) => {
       where: ship.to?.name ?? '—',
     }));
   } else {
-    const {data} = (kind === 'incoming' ? incoming : orbiting);
+    const { data } = kind === 'incoming' ? incoming : orbiting;
     total = data?.number_of_ships ?? 0;
     rows = (data?.ships ?? []).map((ship, index) => {
       const empireId = ship.from?.empire?.id;
@@ -112,7 +112,7 @@ const ShipsTab: React.FunctionComponent<Props> = ({ building, kind }) => {
           <div className='notification is-info is-light'>{EMPTY[kind]}</div>
         ) : (
           <>
-            <div style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
+            <div className='mb-2' style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
               <table className='table is-fullwidth is-narrow'>
                 <thead>
                   <tr>
diff --git a/app/components/security/foreignSpiesTab.tsx b/app/components/security/foreignSpiesTab.tsx
index 6bb883f9..77bec64e 100644
--- a/app/components/security/foreignSpiesTab.tsx
+++ b/app/components/security/foreignSpiesTab.tsx
@@ -39,7 +39,7 @@ const ForeignSpiesTab: React.FunctionComponent<Props> = ({
           <div className='notification is-info is-light'>No foreign spies have been detected.</div>
         ) : (
           <>
-            <div style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
+            <div className='mb-2' style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
               <table className='table is-fullwidth is-narrow'>
                 <thead>
                   <tr>
diff --git a/app/components/security/prisonersTab.tsx b/app/components/security/prisonersTab.tsx
index 201f396e..9c83c3ef 100644
--- a/app/components/security/prisonersTab.tsx
+++ b/app/components/security/prisonersTab.tsx
@@ -45,7 +45,7 @@ const PrisonersTab: React.FunctionComponent<Props> = ({ building, endpoint }) =>
           <div className='notification is-info is-light'>There are no prisoners.</div>
         ) : (
           <>
-            <div style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
+            <div className='mb-2' style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
               <table className='table is-fullwidth is-narrow'>
                 <thead>
                   <tr>
diff --git a/app/components/shipyard/buildQueueTab.tsx b/app/components/shipyard/buildQueueTab.tsx
index 9bbdd6f5..cadf8a82 100644
--- a/app/components/shipyard/buildQueueTab.tsx
+++ b/app/components/shipyard/buildQueueTab.tsx
@@ -68,7 +68,7 @@ const BuildQueueTab: React.FunctionComponent<Props> = ({ building }) => {
               </div>
             </div>
 
-            <div style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
+            <div className='mb-2' style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
               <table className='table is-fullwidth is-narrow'>
                 <thead>
                   <tr>
diff --git a/app/components/spacePort/battleLogsTab.tsx b/app/components/spacePort/battleLogsTab.tsx
index 4bbe4a49..69f66640 100644
--- a/app/components/spacePort/battleLogsTab.tsx
+++ b/app/components/spacePort/battleLogsTab.tsx
@@ -25,7 +25,7 @@ const BattleLogsTab: React.FunctionComponent<Props> = ({ building }) => {
           <div className='notification is-info is-light'>There are no battle logs.</div>
         ) : (
           <>
-            <div style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
+            <div className='mb-2' style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
               <table className='table is-fullwidth is-narrow'>
                 <thead>
                   <tr>
diff --git a/app/components/spacePort/foreignShipsTab.tsx b/app/components/spacePort/foreignShipsTab.tsx
index 5b040e35..1c3cbe77 100644
--- a/app/components/spacePort/foreignShipsTab.tsx
+++ b/app/components/spacePort/foreignShipsTab.tsx
@@ -66,7 +66,7 @@ const ForeignShipsTab: React.FunctionComponent<Props> = ({
           <div className='notification is-info is-light'>{emptyMessage}</div>
         ) : (
           <>
-            <div style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
+            <div className='mb-2' style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
               <table className='table is-fullwidth is-narrow'>
                 <thead>
                   <tr>
diff --git a/app/components/spacePort/travellingTab.tsx b/app/components/spacePort/travellingTab.tsx
index cde7b0c1..2967900d 100644
--- a/app/components/spacePort/travellingTab.tsx
+++ b/app/components/spacePort/travellingTab.tsx
@@ -32,7 +32,7 @@ const TravellingTab: React.FunctionComponent<Props> = ({ building }) => {
           <div className='notification is-info is-light'>No ships are travelling.</div>
         ) : (
           <>
-            <div style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
+            <div className='mb-2' style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
               {ships.map((ship) => (
                 <ShipDetails
                   ship={ship}
diff --git a/app/components/spacePort/viewTab.tsx b/app/components/spacePort/viewTab.tsx
index ac457b0b..82bc17f1 100644
--- a/app/components/spacePort/viewTab.tsx
+++ b/app/components/spacePort/viewTab.tsx
@@ -118,7 +118,7 @@ const ViewTab: React.FunctionComponent<Props> = ({ building }) => {
           <div className='notification is-info is-light'>This Space Port has no ships.</div>
         ) : (
           <>
-            <div style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
+            <div className='mb-2' style={{ maxHeight: BUILDING_WINDOW_SCROLL, overflowY: 'auto' }}>
               {ships.map((ship) => (
                 <ShipDetails
                   ship={ship}
diff --git a/app/components/stats/allianceTab.tsx b/app/components/stats/allianceTab.tsx
index c6a346b1..66015b30 100644
--- a/app/components/stats/allianceTab.tsx
+++ b/app/components/stats/allianceTab.tsx
@@ -43,7 +43,7 @@ const AllianceTab: React.FunctionComponent = () => {
           </div>
         </div> */}
 
-        <div style={{ maxHeight: 320, overflowY: 'auto' }}>
+        <div className='mb-2' style={{ maxHeight: 320, overflowY: 'auto' }}>
           <table className='table is-fullwidth is-narrow'>
             <thead>
               <tr>
diff --git a/app/components/stats/empireTab.tsx b/app/components/stats/empireTab.tsx
index ea15ee47..a20dcf93 100644
--- a/app/components/stats/empireTab.tsx
+++ b/app/components/stats/empireTab.tsx
@@ -44,7 +44,7 @@ const EmpireTab: React.FunctionComponent = () => {
           </div>
         </div> */}
 
-        <div style={{ maxHeight: 320, overflowY: 'auto' }}>
+        <div className='mb-2' style={{ maxHeight: 320, overflowY: 'auto' }}>
           <table className='table is-fullwidth is-narrow'>
             <thead>
               <tr>
diff --git a/app/css/bulma.scss b/app/css/bulma.scss
index 312691c7..be1983ef 100644
--- a/app/css/bulma.scss
+++ b/app/css/bulma.scss
@@ -141,6 +141,12 @@ option {
   border-color: unset;
 }
 
+.pagination-next, .pagination-previous, .pagination-link {
+  border: none;
+  color: theme.$white;
+  background-color: theme.$primary;
+}
+
 //
 // Small globals that used to live in the now-removed bonus-styles.css
 //