diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1bedb879..ccae74b9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1 +1,6 @@
-Adds support for update notifications. GitHub will be checked for updates on startup and a notification will be sent with a download link when a newer version is found.
\ No newline at end of file
+Improves handling of window state, including open tabs and selected fields. This data is preserved when opening a new log file or restarting the app. Other miscellaneous improvements include...
+
+* Tabs can now be closed in addition to opened!
+* Only numbers are allowed as fields for odometry.
+* Minor visual updates to the odometry popup button & tab bar.
+* Lots of internal cleanup.
\ No newline at end of file
diff --git a/indexPreload.js b/indexPreload.js
index 48a3e70c..84d900a4 100644
--- a/indexPreload.js
+++ b/indexPreload.js
@@ -14,6 +14,16 @@ ipcRenderer.on("set-focused", (_, isFocused) => {
   }))
 })
 
+ipcRenderer.on("restore-state", (_, state) => {
+  window.dispatchEvent(new CustomEvent("restore-state", {
+    detail: state
+  }))
+})
+
+window.addEventListener("save-state", event => {
+  ipcRenderer.send("save-state", event.detail)
+})
+
 ipcRenderer.on("open-file", (_, path) => {
   fs.open(path, "r", function (err, file) {
     if (err) throw err
diff --git a/main.js b/main.js
index 82cc0129..4dbdebbd 100644
--- a/main.js
+++ b/main.js
@@ -1,9 +1,11 @@
 const { app, BrowserWindow, Menu, MenuItem, shell, dialog, ipcMain } = require("electron")
-const windowStateKeeper = require("electron-window-state")
+const WindowStateKeeper = require("./windowState.js")
 const { setUpdateNotification } = require("electron-update-notifier")
 const path = require("path")
 const os = require("os")
 
+const stateFileName = "state-" + app.getVersion().replaceAll(".", '_') + ".json"
+
 var firstOpenPath = null
 app.whenReady().then(() => {
   setupMenu()
@@ -66,10 +68,18 @@ function createWindow() {
   }
 
   // Manage window state
-  var windowState = windowStateKeeper({
+  var window = null
+  var windowState = WindowStateKeeper({
+    file: stateFileName,
     defaultWidth: 1100,
     defaultHeight: 650,
-    fullScreen: false
+    fullScreen: false,
+    saveDataHandler: saveStateHandler,
+    restoreDataHandler: state => {
+      window.once("ready-to-show", () => {
+        window.send("restore-state", state)
+      })
+    }
   })
   if (BrowserWindow.getFocusedWindow() == null) {
     prefs.x = windowState.x
@@ -91,7 +101,7 @@ function createWindow() {
   }
 
   // Create window
-  const window = new BrowserWindow(prefs)
+  window = new BrowserWindow(prefs)
   windowState.manage(window)
 
   // Finish setup
@@ -106,6 +116,17 @@ function createWindow() {
   return window
 }
 
+// Manage state
+var states = {}
+ipcMain.on("save-state", (event, state) => {
+  states[event.sender.getOwnerBrowserWindow()] = state
+})
+
+function saveStateHandler(window) {
+  return states[window]
+}
+
+// Create app menu
 function setupMenu() {
   const isMac = process.platform === "darwin"
 
diff --git a/package.json b/package.json
index 0d8d6e88..44cbf880 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "6328-log-viewer",
   "productName": "6328 Log Viewer",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Logging tool from FRC Team 6328.",
   "main": "main.js",
   "scripts": {
diff --git a/windowState.js b/windowState.js
new file mode 100644
index 00000000..f1ecda1c
--- /dev/null
+++ b/windowState.js
@@ -0,0 +1,191 @@
+// Modified from https://github.com/mawie81/electron-window-state
+
+const path = require('path');
+const electron = require('electron');
+const jsonfile = require('jsonfile');
+const mkdirp = require('mkdirp');
+
+module.exports = function (options) {
+  const app = electron.app || electron.remote.app;
+  const screen = electron.screen || electron.remote.screen;
+  let state;
+  let winRef;
+  let stateChangeTimer;
+  const eventHandlingDelay = 100;
+  const config = Object.assign({
+    file: 'window-state.json',
+    path: app.getPath('userData'),
+    maximize: true,
+    fullScreen: true,
+    saveDataHandler: () => null,
+    restoreDataHandler: () => null
+  }, options);
+  const fullStoreFileName = path.join(config.path, config.file);
+
+  function isNormal(win) {
+    return !win.isMaximized() && !win.isMinimized() && !win.isFullScreen();
+  }
+
+  function hasBounds() {
+    return state &&
+      Number.isInteger(state.x) &&
+      Number.isInteger(state.y) &&
+      Number.isInteger(state.width) && state.width > 0 &&
+      Number.isInteger(state.height) && state.height > 0;
+  }
+
+  function resetStateToDefault() {
+    const displayBounds = screen.getPrimaryDisplay().bounds;
+
+    // Reset state to default values on the primary display
+    state = {
+      width: config.defaultWidth || 800,
+      height: config.defaultHeight || 600,
+      x: 0,
+      y: 0,
+      displayBounds,
+      data
+    };
+  }
+
+  function windowWithinBounds(bounds) {
+    return (
+      state.x >= bounds.x &&
+      state.y >= bounds.y &&
+      state.x + state.width <= bounds.x + bounds.width &&
+      state.y + state.height <= bounds.y + bounds.height
+    );
+  }
+
+  function ensureWindowVisibleOnSomeDisplay() {
+    const visible = screen.getAllDisplays().some(display => {
+      return windowWithinBounds(display.bounds);
+    });
+
+    if (!visible) {
+      // Window is partially or fully not visible now.
+      // Reset it to safe defaults.
+      return resetStateToDefault();
+    }
+  }
+
+  function validateState() {
+    const isValid = state && (hasBounds() || state.isMaximized || state.isFullScreen);
+    if (!isValid) {
+      state = null;
+      return;
+    }
+
+    if (hasBounds() && state.displayBounds) {
+      ensureWindowVisibleOnSomeDisplay();
+    }
+  }
+
+  function updateState(win) {
+    win = win || winRef;
+    if (!win) {
+      return;
+    }
+    // Don't throw an error when window was closed
+    try {
+      const winBounds = win.getBounds();
+      if (isNormal(win)) {
+        state.x = winBounds.x;
+        state.y = winBounds.y;
+        state.width = winBounds.width;
+        state.height = winBounds.height;
+      }
+      state.isMaximized = win.isMaximized();
+      state.isFullScreen = win.isFullScreen();
+      state.displayBounds = screen.getDisplayMatching(winBounds).bounds;
+      state.data = config.saveDataHandler(win);
+    } catch (err) { }
+  }
+
+  function saveState(win) {
+    // Update window state only if it was provided
+    if (win) {
+      updateState(win);
+    }
+
+    // Save state
+    try {
+      mkdirp.sync(path.dirname(fullStoreFileName));
+      jsonfile.writeFileSync(fullStoreFileName, state);
+    } catch (err) {
+      // Don't care
+    }
+  }
+
+  function stateChangeHandler() {
+    // Handles both 'resize' and 'move'
+    clearTimeout(stateChangeTimer);
+    stateChangeTimer = setTimeout(updateState, eventHandlingDelay);
+  }
+
+  function closeHandler() {
+    updateState();
+  }
+
+  function closedHandler() {
+    // Unregister listeners and save state
+    unmanage();
+    saveState();
+  }
+
+  function manage(win) {
+    if (config.maximize && state.isMaximized) {
+      win.maximize();
+    }
+    if (config.fullScreen && state.isFullScreen) {
+      win.setFullScreen(true);
+    }
+    if (state.data) config.restoreDataHandler(state.data);
+    win.on('resize', stateChangeHandler);
+    win.on('move', stateChangeHandler);
+    win.on('close', closeHandler);
+    win.on('closed', closedHandler);
+    winRef = win;
+  }
+
+  function unmanage() {
+    if (winRef) {
+      winRef.removeListener('resize', stateChangeHandler);
+      winRef.removeListener('move', stateChangeHandler);
+      clearTimeout(stateChangeTimer);
+      winRef.removeListener('close', closeHandler);
+      winRef.removeListener('closed', closedHandler);
+      winRef = null;
+    }
+  }
+
+  // Load previous state
+  try {
+    state = jsonfile.readFileSync(fullStoreFileName);
+  } catch (err) {
+    // Don't care
+  }
+
+  // Check state validity
+  validateState();
+
+  // Set state fallback values
+  state = Object.assign({
+    width: config.defaultWidth || 800,
+    height: config.defaultHeight || 600
+  }, state);
+
+  return {
+    get x() { return state.x; },
+    get y() { return state.y; },
+    get width() { return state.width; },
+    get height() { return state.height; },
+    get displayBounds() { return state.displayBounds; },
+    get isMaximized() { return state.isMaximized; },
+    get isFullScreen() { return state.isFullScreen; },
+    saveState,
+    unmanage,
+    manage,
+    resetStateToDefault
+  };
+};
\ No newline at end of file
diff --git a/www/global.css b/www/global.css
index c4387f9c..589edda2 100644
--- a/www/global.css
+++ b/www/global.css
@@ -10,11 +10,6 @@ body {
   }
 }
 
-:root {
-  --side-bar-width: 300px;
-  --tab-control-inline: 0;
-}
-
 /* Buttons */
 
 button {
diff --git a/www/index.css b/www/index.css
index 15402473..8f6c405b 100644
--- a/www/index.css
+++ b/www/index.css
@@ -1,3 +1,7 @@
+:root {
+  --tab-control-inline: 0;
+}
+
 /* Title bar layout */
 
 div.title-bar {
@@ -192,7 +196,7 @@ div.field-item-label {
 div.tab-bar {
   position: absolute;
   left: 10px;
-  right: calc(10px + var(--tab-control-inline) * 144px);
+  right: calc(10px + var(--tab-control-inline) * 172px);
   top: 0px;
   height: 50px;
 
@@ -221,7 +225,7 @@ div.tab-bar-shadow-left {
 
 div.tab-bar-shadow-right {
   opacity: 100%;
-  right: calc(10px + var(--tab-control-inline) * 144px);
+  right: calc(10px + var(--tab-control-inline) * 172px);
   background-image: linear-gradient(to left, white, rgba(255, 255, 255, 0.75), transparent);
 }
 
@@ -238,7 +242,7 @@ div.tab-bar-shadow-right {
 div.tab-bar-scroll {
   position: absolute;
   left: 10px;
-  right: calc(10px + var(--tab-control-inline) * 144px);
+  right: calc(10px + var(--tab-control-inline) * 172px);
   top: 0px;
   height: 50px;
 
@@ -310,10 +314,14 @@ button.tab-control {
 }
 
 button.play, button.pause {
-  right: 116px;
+  right: 144px;
 }
 
 button.move-left {
+  right: 106px;
+}
+
+button.close {
   right: 78px;
 }
 
@@ -765,7 +773,7 @@ button.odometry-popup-button {
   position: absolute;
   width: 25px;
   height: 25px;
-  top: 0px;
+  top: 1px;
   right: 5px;
 }
 
diff --git a/www/index.html b/www/index.html
index fd130c62..2a4046c8 100644
--- a/www/index.html
+++ b/www/index.html
@@ -36,6 +36,12 @@
       <line x1="7" y1="14" x2="13" y2="20"></line>
     </svg>
   </button>
+  <button class="tab-control close" tabindex="-1">
+    <svg height="28" width="28">
+      <line x1="8" y1="8" x2="20" y2="20"></line>
+      <line x1="20" y1="8" x2="8" y2="20"></line>
+    </svg>
+  </button>
   <button class="tab-control move-right" tabindex="-1">
     <svg height="28" width="28">
       <line x1="7" y1="14" x2="21" y2="14"></line>
diff --git a/www/index.js b/www/index.js
index 6b3e6190..720eec0a 100644
--- a/www/index.js
+++ b/www/index.js
@@ -9,9 +9,8 @@ window.isFullscreen = false
 window.isFocused = true
 
 window.log = null
-window.sideBar = new SideBar()
 window.tabs = new Tabs()
-
+window.sideBar = new SideBar()
 window.selection = new Selection()
 
 function setTitle(newTitle) {
@@ -42,14 +41,40 @@ function updateFancyWindow() {
   }
 }
 
+// STATE MANAGEMENT
+
+window.getWindowState = () => {
+  return {
+    tabs: tabs.state,
+    sideBar: sideBar.state,
+    selection: selection.state
+  }
+}
+
+window.setWindowState = newState => {
+  tabs.state = newState.tabs
+  sideBar.state = newState.sideBar
+  selection.state = newState.selection
+}
+
+window.addEventListener("restore-state", event => {
+  setWindowState(event.detail)
+})
+
+window.setInterval(() => {
+  window.dispatchEvent(new CustomEvent("save-state", {
+    detail: getWindowState()
+  }))
+}, 1000)
+
 // COMMUNICATION WITH PRELOAD
 
-window.addEventListener("set-fullscreen", function (event) {
+window.addEventListener("set-fullscreen", event => {
   window.isFullscreen = event.detail
   updateFancyWindow()
 })
 
-window.addEventListener("set-focused", function (event) {
+window.addEventListener("set-focused", event => {
   window.isFocused = event.detail
   Array.from(document.getElementsByTagName("button")).forEach(button => {
     if (window.isFocused) {
@@ -60,13 +85,13 @@ window.addEventListener("set-focused", function (event) {
   })
 })
 
-window.addEventListener("set-platform", function (event) {
+window.addEventListener("set-platform", event => {
   window.platform = event.detail.platform
   window.platformRelease = event.detail.release
   updateFancyWindow()
 })
 
-window.addEventListener("open-file", function (event) {
+window.addEventListener("open-file", event => {
   var logName = event.detail.path.split(/[\\/]+/).reverse()[0]
   if (event.detail.data.length > 1000000) sideBar.startLoading(logName)
   setTitle(logName + " \u2014 6328 Log Viewer")
@@ -76,7 +101,7 @@ window.addEventListener("open-file", function (event) {
 
   var decodeWorker = new Worker("decodeWorker.js", { type: "module" })
   decodeWorker.postMessage(event.detail.data)
-  decodeWorker.onmessage = function (event) {
+  decodeWorker.onmessage = event => {
     switch (event.data.status) {
       case "incompatible": // Failed to read log file
         window.dispatchEvent(new CustomEvent("error", {
@@ -85,17 +110,14 @@ window.addEventListener("open-file", function (event) {
         break
 
       case "newData": // New data to show, reset everything
+        var oldState = getWindowState()
         window.log = new Log()
         window.log.rawData = event.data.data
 
         var length = new Date().getTime() - startTime
         console.log("Initial log ready in " + length.toString() + "ms")
 
-        sideBar.update()
-        tabs.reset()
-        selection.pause()
-        selection.selectedTime = null
-        selection.hoveredTime = null
+        setWindowState(oldState) // Set to the same state (resets everything)
         break
 
       case "updateData": // New resolutions added, don't reset
diff --git a/www/modules/log.mjs b/www/modules/log.mjs
index 004a9bb3..9818ad23 100644
--- a/www/modules/log.mjs
+++ b/www/modules/log.mjs
@@ -70,6 +70,13 @@ export class Log {
     }
   }
 
+  // Returns the field ID based on display key
+  findFieldDisplay(displayKey) {
+    return this.#fields.findIndex(field => {
+      return field.displayKey == displayKey
+    })
+  }
+
   // Returns the field ID based on key and type
   findField(key, type) {
     return this.#fields.findIndex(field => {
diff --git a/www/modules/selection.mjs b/www/modules/selection.mjs
index 5745cfa3..167808ed 100644
--- a/www/modules/selection.mjs
+++ b/www/modules/selection.mjs
@@ -40,6 +40,21 @@ export class Selection {
     })
   }
 
+  // Standard function: retrieves current state
+  get state() {
+    return {
+      selectedTime: this.selectedTime,
+      playbackSpeed: this.#playbackSpeed
+    }
+  }
+
+  // Standard function: restores state where possible
+  set state(newState) {
+    this.pause()
+    this.#selectedTime = newState.selectedTime
+    this.#playbackSpeed = newState.playbackSpeed
+  }
+
   // Updates hovered time
   set hoveredTime(time) {
     this.#hoveredTime = time
diff --git a/www/modules/sideBar.mjs b/www/modules/sideBar.mjs
index 97972d77..ec69f1e8 100644
--- a/www/modules/sideBar.mjs
+++ b/www/modules/sideBar.mjs
@@ -9,6 +9,9 @@ export class SideBar {
   #fieldList = document.getElementById("fieldList")
 
   #sideBarHandleActive = false
+  #sideBarWidth = 300
+  #fieldControlLookup = {}
+  #expandedCache = null
 
   constructor() {
     // Set up handle for resizing
@@ -25,11 +28,11 @@ export class SideBar {
         var width = event.clientX
         if (width < 130) width = 130
         if (width > 500) width = 500
-        document.documentElement.style.setProperty("--side-bar-width", width.toString() + "px")
-        tabs.updateScrollBounds()
-        tabs.sideBarResize()
+        this.#sideBarWidth = width
+        this.#updateWidth()
       }
     })
+    this.#updateWidth()
 
     // Set up shadow when scrolling
     this.#sideBar.addEventListener("scroll", (event) => {
@@ -37,13 +40,39 @@ export class SideBar {
     })
   }
 
-  // Displays a loading message in the side bar title
-  startLoading(name) {
-    this.#sideBarTitle.innerText = "Reading " + name + " ..."
+  // Standard function: retrieves current state
+  get state() {
+    if (this.#expandedCache == null) {
+      var expanded = []
+      for (let [title, elements] of Object.entries(this.#fieldControlLookup)) {
+        if (!elements.childSpan.hidden) {
+          expanded.push(title)
+        }
+      }
+    } else {
+      var expanded = this.#expandedCache
+    }
+    return {
+      width: this.#sideBarWidth,
+      scroll: this.#sideBar.scrollTop,
+      expanded: expanded
+    }
   }
 
-  // Updates the list of fields
-  update() {
+  // Standard function: restores state where possible
+  set state(newState) {
+    // Update side bar width
+    this.#sideBarWidth = newState.width
+    this.#updateWidth()
+
+    // Exit if log not ready
+    if (log == null) {
+      this.#expandedCache = newState.expanded
+      return
+    } else {
+      this.#expandedCache = null
+    }
+
     // Remove old list
     while (this.#fieldList.firstChild) {
       this.#fieldList.removeChild(this.#fieldList.firstChild)
@@ -85,7 +114,7 @@ export class SideBar {
     }
 
     // Add fields
-    function addField(parentElement, title, field, indent) {
+    var addField = (parentElement, title, field, indent, fullTitle) => {
       var hasChildren = Object.keys(field.children).length > 0
 
       var fieldElement = document.createElement("div")
@@ -122,28 +151,54 @@ export class SideBar {
         childSpan.style.setProperty("--indent", (indent + 20).toString() + "px")
         childSpan.hidden = true
 
-        function toggle() {
-          childSpan.hidden = !childSpan.hidden
-          closedIcon.style.display = childSpan.hidden ? "initial" : "none"
-          openIcon.style.display = childSpan.hidden ? "none" : "initial"
+        closedIcon.addEventListener("click", () => this.#setExpanded(fieldElement, childSpan, true))
+        openIcon.addEventListener("click", () => this.#setExpanded(fieldElement, childSpan, false))
+        if (newState.expanded.includes(fullTitle)) this.#setExpanded(fieldElement, childSpan, true)
+        this.#fieldControlLookup[fullTitle] = {
+          fieldElement: fieldElement,
+          childSpan: childSpan
         }
-        closedIcon.addEventListener("click", toggle)
-        openIcon.addEventListener("click", toggle)
 
         var keys = Object.keys(field.children).sort(smartSort)
         for (let i in keys) {
-          addField(childSpan, keys[i], field.children[keys[i]], indent + 20)
+          addField(childSpan, keys[i], field.children[keys[i]], indent + 20, fullTitle + "/" + keys[i])
         }
       }
     }
 
+    // Start adding fields recursively
     var tree = log.getFieldTree()
     var keys = Object.keys(tree).sort(smartSort)
     for (let i in keys) {
       if (keys[i] == "RealMetadata" || keys[i] == "ReplayMetadata") {
         continue // Hide metadata b/c viewed separately
       }
-      addField(this.#fieldList, keys[i], tree[keys[i]], 0)
+      addField(this.#fieldList, keys[i], tree[keys[i]], 0, keys[i])
     }
+
+    // Restore scroll position
+    this.#sideBar.scrollTop = newState.scroll
+  }
+
+  // Updates the current side bar width
+  #updateWidth() {
+    document.documentElement.style.setProperty("--side-bar-width", this.#sideBarWidth.toString() + "px")
+    tabs.updateScrollBounds()
+    tabs.sideBarResize()
+  }
+
+  // Displays a loading message in the side bar title
+  startLoading(name) {
+    this.#sideBarTitle.innerText = "Reading " + name + " ..."
+  }
+
+  // Expand or hide field children
+  #setExpanded(fieldElement, childSpan, expanded) {
+    var closedIcon = fieldElement.children[0]
+    var openIcon = fieldElement.children[1]
+
+    childSpan.hidden = !expanded
+    closedIcon.style.display = expanded ? "none" : "initial"
+    openIcon.style.display = expanded ? "initial" : "none"
   }
 }
\ No newline at end of file
diff --git a/www/modules/tabControllers/lineGraphController.mjs b/www/modules/tabControllers/lineGraphController.mjs
index d8cdcdcb..a0e112cd 100644
--- a/www/modules/tabControllers/lineGraphController.mjs
+++ b/www/modules/tabControllers/lineGraphController.mjs
@@ -16,11 +16,12 @@ export class LineGraphController {
   #zoomExponentBaseDarwin = 1.001
   #zoomExponentBaseOther = 1.1
 
-  #resetNext = false
+  #firstReset = true
   #lastCursorX = null
   #lastScrollTop = 0
   #lastClientWidth = 0
   #lastPlatform = null
+  #resetOnNextUpdate = false
   #panActive = false
   #panStartCursorX = 0
   #panStartScrollLeft = 0
@@ -142,7 +143,92 @@ export class LineGraphController {
     })
     this.#scrollOverlay.addEventListener("contextmenu", () => window.selection.selectedTime = null)
 
-    this.reset()
+    this.#updateScroll(true)
+  }
+
+  // Standard function: retrieves current state
+  get state() {
+    var processFields = x => {
+      if (x.id == null) {
+        return {
+          displayKey: x.missingKey,
+          color: x.color,
+          show: x.show
+        }
+      } else {
+        return {
+          displayKey: log.getFieldInfo(x.id).displayKey,
+          color: x.color,
+          show: x.show
+        }
+      }
+    }
+    return {
+      range: this.#xRange,
+      legends: {
+        left: {
+          fields: this.#legends.left.fields.map(processFields),
+          locked: this.#legends.left.locked,
+          range: this.#legends.left.range,
+          scroll: this.#legends.left.element.scrollTop
+        },
+        discrete: {
+          fields: this.#legends.discrete.fields.map(processFields),
+          scroll: this.#legends.discrete.element.scrollTop
+        },
+        right: {
+          fields: this.#legends.right.fields.map(processFields),
+          locked: this.#legends.right.locked,
+          range: this.#legends.right.range,
+          scroll: this.#legends.right.element.scrollTop
+        }
+      }
+    }
+  }
+
+  // Standard function: restores state where possible
+  set state(newState) {
+    Object.keys(this.#legends).forEach(legendKey => {
+      var legend = this.#legends[legendKey]
+
+      // Update locked status & range
+      legend.locked = newState.legends[legendKey].locked
+      legend.range = newState.legends[legendKey].range
+
+      // Remove all fields
+      legend.fields = []
+      while (legend.element.children.length > 1) {
+        legend.element.removeChild(legend.element.lastChild)
+      }
+
+      // Add new fields
+      newState.legends[legendKey].fields.forEach(field => {
+        if (log != null) {
+          var id = log.findFieldDisplay(field.displayKey)
+          if (id != -1) {
+            this.addField(legendKey, id, field.color, field.show)
+            return
+          }
+        }
+
+        // Field not available, insert filler
+        this.addField(legendKey, null, field.color, field.show, field.displayKey)
+      })
+
+      // Update scroll
+      legend.element.scrollTop = newState.legends[legendKey].scroll
+    })
+
+    // Update zoom and pan
+    if (log == null) return
+    if (this.#firstReset) {
+      this.#updateScroll(true)
+      this.#firstReset = false
+    } else {
+      this.#updateScroll() // Updates limits
+      this.#scrollOverlay.scrollTop = this.#calcReverseZoom(newState.range[1] - newState.range[0]) // Update zoom
+      this.#scrollOverlay.scrollLeft = Math.round(((newState.range[0] - log.getTimestamps()[0]) / this.#calcZoom()) * this.#scrollOverlay.clientWidth) // Update pan}
+    }
   }
 
   // Handles dragging events (moving and stopping)
@@ -173,33 +259,52 @@ export class LineGraphController {
   }
 
   // Adds a new field to the specified legend
-  addField(legend, field) {
+  addField(legend, field, forcedColor, forcedShow, missingKey) {
     // Get color
-    var usedColors = []
-    Object.keys(this.#legends).forEach((key) => {
-      this.#legends[key].fields.forEach((x) => {
-        usedColors.push(x.color)
+    if (forcedColor) {
+      var color = forcedColor
+    } else {
+      var usedColors = []
+      Object.keys(this.#legends).forEach((key) => {
+        this.#legends[key].fields.forEach((x) => {
+          usedColors.push(x.color)
+        })
       })
-    })
-    var availableColors = this.#colors.filter((color) => !usedColors.includes(color))
-    if (availableColors.length == 0) {
-      var color = this.#colors[Math.floor(Math.random() * this.#colors.length)]
+      var availableColors = this.#colors.filter((color) => !usedColors.includes(color))
+      if (availableColors.length == 0) {
+        var color = this.#colors[Math.floor(Math.random() * this.#colors.length)]
+      } else {
+        var color = availableColors[0]
+      }
+    }
+
+    // Determine if showing
+    if (forcedShow == null) {
+      var show = true
     } else {
-      var color = availableColors[0]
+      var show = forcedShow
     }
 
     // Create element
     var item = this.#legendItemTemplate.cloneNode(true)
-    var text = log.getFieldInfo(field).displayKey
+    if (field != null) {
+      var text = log.getFieldInfo(field).displayKey
+    } else {
+      var text = missingKey
+    }
     item.title = text
     item.getElementsByClassName("legend-key")[0].innerText = text
+    if (field == null) item.getElementsByClassName("legend-key")[0].style.textDecoration = "line-through"
     item.getElementsByClassName("legend-splotch")[0].style.fill = color
-    item.getElementsByClassName("legend-splotch")[0].addEventListener("click", () => {
-      var index = Array.from(item.parentElement.children).indexOf(item) - 1
-      var show = !this.#legends[legend].fields[index].show
-      this.#legends[legend].fields[index].show = show
-      item.firstElementChild.style.fill = show ? color : "transparent"
-    })
+    if (field != null) {
+      item.getElementsByClassName("legend-splotch")[0].addEventListener("click", () => {
+        var index = Array.from(item.parentElement.children).indexOf(item) - 1
+        var show = !this.#legends[legend].fields[index].show
+        this.#legends[legend].fields[index].show = show
+        item.firstElementChild.style.fill = show ? color : "transparent"
+      })
+    }
+    item.getElementsByClassName("legend-splotch")[0].style.fill = show && (field != null) ? color : "transparent"
     item.getElementsByClassName("legend-edit")[0].title = ""
     item.getElementsByClassName("legend-edit")[0].addEventListener("click", () => {
       var index = Array.from(item.parentElement.children).indexOf(item) - 1
@@ -210,30 +315,13 @@ export class LineGraphController {
     // Add field
     this.#legends[legend].fields.push({
       id: field,
+      missingKey: missingKey,
       color: color,
-      show: true
+      show: show
     })
     this.#legends[legend].element.appendChild(item)
   }
 
-  // Called by tab controller when log changes
-  reset() {
-    if (this.#content.hidden) {
-      this.#resetNext = true
-      return
-    }
-
-    Object.values(this.#legends).forEach((legend) => {
-      legend.fields = []
-      while (legend.element.children.length > 1) {
-        legend.element.removeChild(legend.element.lastChild)
-      }
-    })
-
-    // Reset position to 0 seconds and zoom to 10 seconds
-    this.#updateScroll(true)
-  }
-
   // Called by tab controller when side bar size changes
   sideBarResize() {
     this.#updateScroll()
@@ -251,6 +339,12 @@ export class LineGraphController {
 
   // Updates scroll position based on overlay
   #updateScroll(reset) {
+    // Exit if not visible (cannot get element sizes)
+    if (this.#content.hidden) {
+      if (reset) this.#resetOnNextUpdate = true
+      return
+    }
+
     // Find current time range
     if (log == null) {
       var timeRange = [0, 10]
@@ -381,16 +475,17 @@ export class LineGraphController {
 
   // Called every 15ms by the tab controller
   periodic() {
+    // Reset scroll if queued
+    if (this.#resetOnNextUpdate) {
+      this.#resetOnNextUpdate = false
+      this.#updateScroll(true)
+    }
+
     // Utility function to scale value between two ranges
     function scaleValue(value, oldMin, oldMax, newMin, newMax) {
       return (((value - oldMin) / (oldMax - oldMin)) * (newMax - newMin)) + newMin
     }
 
-    if (this.#resetNext) {
-      this.reset()
-      this.#resetNext = false
-    }
-
     var context = this.#canvas.getContext("2d")
     var width = this.#canvasContainer.clientWidth
     var height = this.#canvasContainer.clientHeight
@@ -407,7 +502,7 @@ export class LineGraphController {
     var xRange = this.#xRange
 
     if (log) {
-      var secsPerPixel = (this.#xRange[1] - this.#xRange[0]) / (width * window.devicePixelRatio)
+      var secsPerPixel = (xRange[1] - xRange[0]) / (width * window.devicePixelRatio)
       var availableResolutions = log.getResolutions()
       var resolutionIndex = availableResolutions.findIndex(resolution => resolution > secsPerPixel)
       if (resolutionIndex == -1) resolutionIndex = availableResolutions.length // No resolution is low enough
@@ -422,6 +517,7 @@ export class LineGraphController {
     function getMinMax(fields) {
       var allValues = []
       fields.forEach((field) => {
+        if (field.id == null) return // Missing field
         if (field.id in dataLookup) {
           allValues.push.apply(allValues, dataLookup[field.id].values)
         } else {
@@ -477,6 +573,7 @@ export class LineGraphController {
     context.font = "12px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont"
     var visibleFieldsDiscrete = this.#legends.discrete.fields.filter((field) => field.show)
     visibleFieldsDiscrete.forEach((field, renderIndex) => {
+      if (field.id == null) return // Missing field
       if (field.id in dataLookup) {
         var data = dataLookup[field.id]
       } else {
@@ -527,7 +624,8 @@ export class LineGraphController {
 
     // Render continuous data
     function renderLegend(fields, range) {
-      fields.forEach((field) => {
+      fields.forEach(field => {
+        if (field.id == null) return // Missing field
         var data = dataLookup[field.id]
         context.lineWidth = 1
         context.strokeStyle = field.color
@@ -578,7 +676,7 @@ export class LineGraphController {
     if (this.#lastCursorX == null) {
       window.selection.hoveredTime = null
     } else {
-      window.selection.hoveredTime = ((this.#lastCursorX / this.#scrollOverlay.clientWidth) * (this.#xRange[1] - this.#xRange[0])) + this.#xRange[0]
+      window.selection.hoveredTime = ((this.#lastCursorX / this.#scrollOverlay.clientWidth) * (xRange[1] - xRange[0])) + xRange[0]
     }
     markTime(window.selection.selectedTime, 1)
     markTime(window.selection.hoveredTime, 0.35)
diff --git a/www/modules/tabControllers/metadataController.mjs b/www/modules/tabControllers/metadataController.mjs
index 081a1031..fbba3182 100644
--- a/www/modules/tabControllers/metadataController.mjs
+++ b/www/modules/tabControllers/metadataController.mjs
@@ -10,13 +10,23 @@ export class MetadataController {
     this.#tableBody = content.getElementsByClassName("metadata-table")[0].firstElementChild
   }
 
-  // Called by tab controller when log changes
-  reset() {
+  // Standard function: retrieves current state
+  get state() {
+    return {}
+  }
+
+  // Standard function: restores state where possible
+  set state(newState) {
+    // Nothing to restore, just reset everything
+
     // Remove old rows
     while (this.#tableBody.childElementCount > 1) {
       this.#tableBody.removeChild(this.#tableBody.lastChild)
     }
 
+    // Exit if log not ready
+    if (log == null) return
+
     // Get data
     var tree = log.getFieldTree()
     var data = {}
diff --git a/www/modules/tabControllers/odometryController.mjs b/www/modules/tabControllers/odometryController.mjs
index cd0468eb..4df3004d 100644
--- a/www/modules/tabControllers/odometryController.mjs
+++ b/www/modules/tabControllers/odometryController.mjs
@@ -37,9 +37,9 @@ export class OdometryController {
     var configBody = content.getElementsByClassName("odometry-config")[0].firstElementChild
     this.#config = {
       fields: {
-        rotation: { element: configBody.children[1].firstElementChild, id: null },
-        x: { element: configBody.children[2].firstElementChild, id: null },
-        y: { element: configBody.children[3].firstElementChild, id: null }
+        rotation: { element: configBody.children[1].firstElementChild, id: null, missingKey: null },
+        x: { element: configBody.children[2].firstElementChild, id: null, missingKey: null },
+        y: { element: configBody.children[3].firstElementChild, id: null, missingKey: null }
       },
       coordinates: {
         game: configBody.children[1].children[1].children[1],
@@ -86,36 +86,40 @@ export class OdometryController {
 
     // Start periodic cycle and reset (in case log is already loaded)
     window.setInterval(() => this.customPeriodic(), 15)
-    this.reset()
+    this.state = this.state
   }
 
-  // Handles dragging events (moving and stopping)
-  #handleDrag(event) {
-    if (this.#content.hidden) return
-
-    this.#dragHighlight.hidden = true
-    Object.values(this.#config.fields).forEach(field => {
-      var rect = field.element.getBoundingClientRect()
-      var active = event.detail.x > rect.left && event.detail.x < rect.right && event.detail.y > rect.top && event.detail.y < rect.bottom
-
-      if (active) {
-        if (event.type == "drag-update") {
-          var contentRect = this.#content.getBoundingClientRect()
-          this.#dragHighlight.style.left = (rect.left - contentRect.left).toString() + "px"
-          this.#dragHighlight.style.top = (rect.top - contentRect.top).toString() + "px"
-          this.#dragHighlight.style.width = rect.width.toString() + "px"
-          this.#dragHighlight.style.height = rect.height.toString() + "px"
-          this.#dragHighlight.hidden = false
-        } else {
-          field.id = event.detail.data.id
-          field.element.lastElementChild.innerText = log.getFieldInfo(field.id).displayKey
-        }
+  // Standard function: retrieves current state
+  get state() {
+    function processField(field) {
+      if (field.id == null) {
+        return field.missingKey
+      } else {
+        return log.getFieldInfo(field.id).displayKey
       }
-    })
+    }
+    return {
+      fields: {
+        rotation: processField(this.#config.fields.rotation),
+        x: processField(this.#config.fields.x),
+        y: processField(this.#config.fields.y)
+      },
+      coordinates: {
+        game: this.#config.coordinates.game.value,
+        unitDistance: this.#config.coordinates.unitDistance.value,
+        unitRotation: this.#config.coordinates.unitRotation.value,
+        origin: this.#config.coordinates.origin.value
+      },
+      robot: {
+        size: Number(this.#config.robot.size.value),
+        alliance: this.#config.robot.alliance.value,
+        orientation: this.#config.robot.orientation.value
+      }
+    }
   }
 
-  // Called by tab controller when log changes
-  reset() {
+  // Standard function: restores state where possible
+  set state(newState) {
     // Adjust timeline
     while (this.#timelineMarkerContainer.firstChild) {
       this.#timelineMarkerContainer.removeChild(this.#timelineMarkerContainer.firstChild)
@@ -130,7 +134,7 @@ export class OdometryController {
         if (data.values[i]) {
           var div = document.createElement("div")
           this.#timelineMarkerContainer.appendChild(div)
-          var leftPercent = (data.timestamps[i] / (maxTime - minTime)) * 100
+          var leftPercent = ((data.timestamps[i] - minTime) / (maxTime - minTime)) * 100
           var nextTime = i == data.values.length - 1 ? maxTime : data.timestamps[i + 1]
           var widthPercent = ((nextTime - data.timestamps[i]) / (maxTime - minTime)) * 100
           div.style.left = leftPercent.toString() + "%"
@@ -142,10 +146,65 @@ export class OdometryController {
       this.#timelineInput.max = 10
     }
 
+    // Set config data
+    this.#config.coordinates.game.value = newState.coordinates.game
+    this.#config.coordinates.unitDistance.value = newState.coordinates.unitDistance
+    this.#config.coordinates.unitRotation.value = newState.coordinates.unitRotation
+    this.#config.coordinates.origin.value = newState.coordinates.origin
+    this.#config.robot.size.value = newState.robot.size
+    this.#config.robot.alliance.value = newState.robot.alliance
+    this.#config.robot.orientation.value = newState.robot.orientation
+
     // Reset fields
     Object.keys(this.#config.fields).forEach(fieldKey => {
-      this.#config.fields[fieldKey].element.lastElementChild.innerText = "<Drag Here>"
-      this.#config.fields[fieldKey].id = null
+      var text = ""
+      var missing = false
+      if (newState.fields[fieldKey] == null) { // Field is empty
+        text = "<Drag Here>"
+        this.#config.fields[fieldKey].id = null
+        this.#config.fields[fieldKey].missingKey = null
+      } else {
+        var id = log == null ? -1 : log.findFieldDisplay(newState.fields[fieldKey])
+        if (id == -1) { // Missing field
+          text = newState.fields[fieldKey]
+          missing = true
+          this.#config.fields[fieldKey].id = null
+          this.#config.fields[fieldKey].missingKey = newState.fields[fieldKey]
+        } else { // Valid field
+          text = log.getFieldInfo(id).displayKey
+          this.#config.fields[fieldKey].id = id
+          this.#config.fields[fieldKey].missingKey = null
+        }
+      }
+      this.#config.fields[fieldKey].element.lastElementChild.innerText = text
+      this.#config.fields[fieldKey].element.lastElementChild.style.textDecoration = missing ? "line-through" : ""
+    })
+  }
+
+  // Handles dragging events (moving and stopping)
+  #handleDrag(event) {
+    if (this.#content.hidden) return
+
+    this.#dragHighlight.hidden = true
+    Object.values(this.#config.fields).forEach(field => {
+      var rect = field.element.getBoundingClientRect()
+      var active = event.detail.x > rect.left && event.detail.x < rect.right && event.detail.y > rect.top && event.detail.y < rect.bottom
+      var type = log.getFieldInfo(event.detail.data.id).type
+      var validType = type == "Double" || type == "Integer" || type == "Byte"
+
+      if (active && validType) {
+        if (event.type == "drag-update") {
+          var contentRect = this.#content.getBoundingClientRect()
+          this.#dragHighlight.style.left = (rect.left - contentRect.left).toString() + "px"
+          this.#dragHighlight.style.top = (rect.top - contentRect.top).toString() + "px"
+          this.#dragHighlight.style.width = rect.width.toString() + "px"
+          this.#dragHighlight.style.height = rect.height.toString() + "px"
+          this.#dragHighlight.hidden = false
+        } else {
+          field.id = event.detail.data.id
+          field.element.lastElementChild.innerText = log.getFieldInfo(field.id).displayKey
+        }
+      }
     })
   }
 
diff --git a/www/modules/tabControllers/tableController.mjs b/www/modules/tabControllers/tableController.mjs
index 566974c8..a9bcc462 100644
--- a/www/modules/tabControllers/tableController.mjs
+++ b/www/modules/tabControllers/tableController.mjs
@@ -8,6 +8,7 @@ export class TableController {
   #dragHighlight = null
   #input = null
 
+  #stateCache = null
   #rowHeight = 25
   #scrollMargin = 3000
   #fields = []
@@ -23,7 +24,7 @@ export class TableController {
     this.#input = content.getElementsByClassName("data-table-jump-input")[0]
     window.addEventListener("drag-update", (event) => this.#handleDrag(event))
     window.addEventListener("drag-stop", (event) => this.#handleDrag(event))
-    if (log) this.reset()
+    if (log) this.state = this.state
 
     var jump = () => {
       // Determine target time
@@ -37,26 +38,7 @@ export class TableController {
         var targetTime = Number(this.#input.value)
       }
 
-      // Find index
-      var target = log.getTimestamps().findIndex(value => Math.floor(value * 1000) / 1000 > targetTime)
-      if (target == -1) target = log.getTimestamps().length
-      if (target < 1) target = 1
-      target -= 1
-
-      // Jump to index
-      if (log.getTimestamps().length < 1000) {
-        this.#currentRange = [0, log.getTimestamps().length - 1]
-      } else {
-        this.#currentRange = [target - 500, target + 499]
-        var offset = 0
-        if (this.#currentRange[0] < 0) offset = this.#currentRange[0] * -1
-        if (this.#currentRange[1] > log.getTimestamps().length - 1) offset = log.getTimestamps().length - 1 - this.#currentRange[1]
-        this.#currentRange[0] += offset
-        this.#currentRange[1] += offset
-      }
-      this.#clearTable()
-      this.#fillRange(this.#currentRange, false)
-      this.#tableContainer.scrollTop = (target - this.#currentRange[0]) * this.#rowHeight
+      this.#jumpToTime(targetTime)
     }
     this.#input.addEventListener("keydown", event => { if (event.code == "Enter") jump() })
     content.getElementsByClassName("data-table-jump-button")[0].addEventListener("click", jump)
@@ -97,26 +79,93 @@ export class TableController {
     } else {
       this.#dragHighlight.hidden = true
       if (selected != null) {
-        this.#fields.splice(selected, 0, event.detail.data.id)
+        this.#fields.splice(selected, 0, { id: event.detail.data.id })
         this.#updateFields()
       }
     }
   }
 
-  // Called by tab controller when log changes
-  reset() {
+  // Standard function: retrieves current state
+  get state() {
+    if (this.#stateCache != null) {
+      return this.#stateCache
+    }
+
+    var fields = this.#fields.map(x => {
+      if (x.id == null) {
+        return x.missingKey
+      } else {
+        return log.getFieldInfo(x.id).displayKey
+      }
+    })
+    var time = log == null ? null : log.getTimestamps()[Math.floor(this.#tableContainer.scrollTop / this.#rowHeight) + this.#currentRange[0]]
+    var scrollVert = this.#tableContainer.scrollTop % this.#rowHeight
+    var scrollHorz = this.#tableContainer.scrollLeft
+    return {
+      fields: fields,
+      time: time,
+      scrollVert: scrollVert,
+      scrollHorz: scrollHorz
+    }
+  }
+
+  // Standard function: restores state where possible
+  set state(newState) {
+    if (log == null) {
+      this.#stateCache = newState
+      return
+    } else {
+      this.#stateCache = null
+    }
     this.#noDataAlert.hidden = true
     this.#tableContainer.hidden = false
 
     this.#currentRange = [0, log.getTimestamps().length < 1000 ? log.getTimestamps().length - 1 : 999]
-    this.#fields = []
+    this.#fields = newState.fields.map(x => {
+      var id = log.findFieldDisplay(x)
+      if (id != -1) {
+        return { id: id }
+      } else {
+        return { id: null, missingKey: x }
+      }
+    })
     this.#updateFields()
     this.#tableContainer.scrollTop = 0
+    this.#tableContainer.scrollLeft = newState.scrollHorz
+
+    if (newState.time) {
+      this.#jumpToTime(newState.time)
+      this.#tableContainer.scrollTop += newState.scrollVert
+    }
   }
 
   // Called by tab controller when side bar size changes
   sideBarResize() { }
 
+  // Jumps to the specified time
+  #jumpToTime(targetTime) {
+    // Find index
+    var target = log.getTimestamps().findIndex(value => Math.floor(value * 1000) / 1000 > targetTime)
+    if (target == -1) target = log.getTimestamps().length
+    if (target < 1) target = 1
+    target -= 1
+
+    // Jump to index
+    if (log.getTimestamps().length < 1000) {
+      this.#currentRange = [0, log.getTimestamps().length - 1]
+    } else {
+      this.#currentRange = [target - 500, target + 499]
+      var offset = 0
+      if (this.#currentRange[0] < 0) offset = this.#currentRange[0] * -1
+      if (this.#currentRange[1] > log.getTimestamps().length - 1) offset = log.getTimestamps().length - 1 - this.#currentRange[1]
+      this.#currentRange[0] += offset
+      this.#currentRange[1] += offset
+    }
+    this.#clearTable()
+    this.#fillRange(this.#currentRange, false)
+    this.#tableContainer.scrollTop = (target - this.#currentRange[0]) * this.#rowHeight
+  }
+
   // Updates the table based on the current field list
   #updateFields() {
     // Clear old header cells
@@ -132,7 +181,12 @@ export class TableController {
         cell.appendChild(element.cloneNode(true))
       })
       header.appendChild(cell)
-      var text = log.getFieldInfo(field).displayKey
+      if (field.id == null) {
+        var text = field.missingKey
+        cell.firstElementChild.firstElementChild.style.textDecoration = "line-through"
+      } else {
+        var text = log.getFieldInfo(field.id).displayKey
+      }
       cell.title = text
       cell.firstElementChild.firstElementChild.innerText = text
       cell.lastElementChild.title = ""
@@ -185,7 +239,8 @@ export class TableController {
     var dataLookup = {}
     var typeLookup = {}
     this.#fields.forEach(field => {
-      var data = log.getDataInRange(field, log.getTimestamps()[range[0]], log.getTimestamps()[range[1]], 0)
+      if (field.id == null) return
+      var data = log.getDataInRange(field.id, log.getTimestamps()[range[0]], log.getTimestamps()[range[1]], 0)
       var fullData = []
       for (let i = range[0]; i < range[1] + 1; i++) {
         var nextIndex = data.timestampIndexes.findIndex(value => value > i)
@@ -196,8 +251,8 @@ export class TableController {
           fullData.push(data.values[nextIndex - 1])
         }
       }
-      dataLookup[field] = fullData
-      typeLookup[field] = log.getFieldInfo(field).type
+      dataLookup[field.id] = fullData
+      typeLookup[field.id] = log.getFieldInfo(field.id).type
     })
 
     // Add rows
@@ -234,16 +289,20 @@ export class TableController {
       this.#fields.forEach(field => {
         var dataCell = document.createElement("td")
         row.appendChild(dataCell)
-        var value = dataLookup[field][i - range[0]]
-        if (typeLookup[field] == "Byte") {
-          var text = "0x" + (value & 0xff).toString(16).padStart(2, "0")
-        } else if (typeLookup[field] == "ByteArray") {
-          var hexArray = value.map(byte => {
-            "0x" + (byte & 0xff).toString(16).padStart(2, "0")
-          })
-          var text = "[" + hexArray.toString() + "]"
+        if (field.id == null) {
+          var text = "null"
         } else {
-          var text = JSON.stringify(value)
+          var value = dataLookup[field.id][i - range[0]]
+          if (typeLookup[field.id] == "Byte") {
+            var text = "0x" + (value & 0xff).toString(16).padStart(2, "0")
+          } else if (typeLookup[field.id] == "ByteArray") {
+            var hexArray = value.map(byte => {
+              "0x" + (byte & 0xff).toString(16).padStart(2, "0")
+            })
+            var text = "[" + hexArray.toString() + "]"
+          } else {
+            var text = JSON.stringify(value)
+          }
         }
         dataCell.innerText = text
       })
diff --git a/www/modules/tabs.mjs b/www/modules/tabs.mjs
index 10208d6b..ae5a2433 100644
--- a/www/modules/tabs.mjs
+++ b/www/modules/tabs.mjs
@@ -15,6 +15,7 @@ export class Tabs {
 
   #leftButton = document.getElementsByClassName("move-left")[0]
   #rightButton = document.getElementsByClassName("move-right")[0]
+  #closeButton = document.getElementsByClassName("close")[0]
   #addButton = document.getElementsByClassName("add-tab")[0]
 
   #tabList = []
@@ -57,6 +58,13 @@ export class Tabs {
     // Control buttons
     this.#leftButton.addEventListener("click", () => this.shiftSelected(-1))
     this.#rightButton.addEventListener("click", () => this.shiftSelected(1))
+    this.#closeButton.addEventListener("click", () => {
+      if (this.#selectedTab == 0) return // Don't close metadata tab
+      this.#viewer.removeChild(this.#tabList[this.#selectedTab].content)
+      this.#tabList.splice(this.#selectedTab, 1)
+      if (this.#selectedTab > this.#tabList.length - 1) this.#selectedTab = this.#tabList.length - 1
+      this.#updateElements()
+    })
     this.#addButton.addEventListener("click", () => window.dispatchEvent(new Event("add-tab")))
     window.addEventListener("add-tab-response", (event) => {
       this.addTab(event.detail)
@@ -70,14 +78,49 @@ export class Tabs {
     }, 15)
   }
 
-  // Resets all tabs to their default states
-  reset() {
-    this.#tabList.forEach((tab) => {
-      tab.controller.reset()
-    })
+  // Standard function: retrieves current state
+  get state() {
+    return {
+      scroll: this.#verticalScroll ? this.#scrollOverlay.scrollTop : this.#scrollOverlay.scrollLeft,
+      selected: this.#selectedTab,
+      tabs: this.#tabList.map(tab => {
+        return {
+          type: tab.type,
+          state: tab.controller.state
+        }
+      })
+    }
+  }
+
+  // Standard function: restores state where possible
+  set state(newState) {
+    var oldTabs = this.#tabList.map(tab => tab.type)
+    var newTabs = newState.tabs.map(tab => tab.type)
+    if (JSON.stringify(oldTabs) == JSON.stringify(newTabs)) { // Reset all tabs, don't recreate them
+      for (let i = 0; i < this.#tabList.length; i++) {
+        this.#tabList[i].controller.state = newState.tabs[i].state
+      }
+    } else { // Something changed, recreate all tabs
+      this.#tabList.forEach(tab => {
+        this.#viewer.removeChild(tab.content)
+      })
+      this.#tabList = []
+      newState.tabs.forEach(tab => {
+        this.addTab(tab.type, true)
+        this.#tabList[this.#tabList.length - 1].controller.state = tab.state
+      })
+      this.#selectedTab = newState.selected
+      this.#updateElements()
+    }
+
+    if (this.#verticalScroll) {
+      this.#scrollOverlay.scrollTop = newState.scroll
+    } else {
+      this.#scrollOverlay.scrollLeft = newState.scroll
+    }
   }
 
-  // Resets all tabs to their default states
+  // Passthrough to each tab controller
   sideBarResize() {
     this.#tabList.forEach((tab) => {
       tab.controller.sideBarResize()
@@ -86,7 +129,7 @@ export class Tabs {
 
   // Adds a new tab to the list
   addTab(type, skipUpdate) {
-    var tabData = {}
+    var tabData = { type: type }
     switch (type) {
       case 0:
         tabData.title = "\ud83d\udd0d"
@@ -132,6 +175,11 @@ export class Tabs {
 
   // Updates all tab elements
   #updateElements() {
+    // Remove old tabs
+    while (this.#tabBar.firstChild) {
+      this.#tabBar.removeChild(this.#tabBar.firstChild)
+    }
+
     // Update display titles
     var uniqueTitles = []
     var multipleTitles = {}