diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
new file mode 100644
index 000000000..3e417baa2
--- /dev/null
+++ b/.github/workflows/pages.yml
@@ -0,0 +1,28 @@
+name: Build and Deploy
+on:
+  push:
+    branches:
+      - master
+  workflow_dispatch:
+permissions:
+  contents: write
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4.2.2
+        with:
+          persist-credentials: false
+
+      - name: Install and Build 🔧
+        run: |
+          npm install
+          npm run ghpages
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4.7.2
+        with:
+          TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages
+          FOLDER: gh_pages
+          CLEAN: true
diff --git a/.gitignore b/.gitignore
index d3d7b7c0e..b2655ec38 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,7 @@ demo/omero_figure/
 demo/figure.js
 demo/index.html
 node_modules/
+gh_pages/
 _site
 dist
 omero_figure.egg-info
diff --git a/README.rst b/README.rst
index d86f84a8b..70260068a 100644
--- a/README.rst
+++ b/README.rst
@@ -12,7 +12,11 @@
 OMERO.figure
 ============
 
-An OMERO.web app for creating figures from images in OMERO.
+An app for creating figures from images.
+
+The app can be used standalone with OME-Zarr images or installed within OMERO.web to work with OMERO images.
+
+The standalone app is available at `https://ome.github.io/omero-figure/ <https://ome.github.io/omero-figure/>`_.
 
 For full details see `SUPPORT.md <https://github.com/ome/omero-figure/blob/master/SUPPORT.md>`_.
 
@@ -182,55 +186,63 @@ Install Node from https://nodejs.org, then:
     $ cd omero-figure
     $ npm install
 
+You can deploy the app during development in two ways: using the vite dev server or from OMERO.web.
+
+
+Deploying with vite dev server
+******************************
+
 To serve the app at http://localhost:8080/ using the vite dev server
 (this will automatically refresh the page when changes are saved):
 
 ::
 
-    $ npm run start
+    $ npm run dev     # or npm run start
+
+The app will run as a standalone app that can load OME-Zarr images.
+A global variable `APP_SERVED_BY_OMERO` will be `false` and this is used
+to determine the behaviour of various features such as File Open/Save
+and the figure Export dialog.
 
 If you are editing the Shape-Editor code, you can view the test page at
 http://localhost:8080/shapeEditorTest.html
 
 
-CORS
-****
-
-During development, we load and save figure files to an omero-web server.
-You will need to have CORS enabled on your local omero-web server at
-http://localhost:4080/ and be logged in already.
-This URL can be edited in `src/index.html`.
+Deploying from OMERO.web
+************************
 
-You MUST access the figure app at http://localhost:8080/ (NOT http://127.0.0.1:8080/)
-for CORS to work.
-
-NB: in general, POST actions such as saving of figure files or exporting figures doesn't
-yet work with the dev server. To test these actions, build the app as described below:
+To deploy the app from OMERO.web during development, you should checkout the code
+and install from there into your OMERO.web python environment:
 
+::
 
-Build
------
+   $ cd omero-figure
+   $ pip install -e .
 
-To build the app:
+Then configure your local OMERO.web as described above and restart OMERO.web.
+You will need to build the app with:
 
 ::
 
-   $ npm run build
-
-This compiles index.html and other static assets into correct locations to be
-served by the Django `omero-web` server.
+    $ npm run build
 
-To serve this on a local omero-web, set config as above and install with:
+To build whenever changes are saved within the `src/` directory:
 
 ::
 
-   $ pip install -e .
+    $ npm run watch
 
-In order to build whenever changes are saved within the `src/` directory:
+You will need to refresh the OMERO.figure app to see changes when using this workflow.
 
-::
 
-    $ npm run watch
+Deploying the standalone app
+----------------------------
+
+The standalone app is deployed to GitHub pages at https://ome.github.io/omero-figure/ via a GitHub action defined in ``.github/workflows/pages.yml`` which acts on push to the `master` branch.
+The action then builds the app and pushes the built files to the `gh-pages` branch.
+
+To deploy the app from your own fork, you can push to your own `master` branch and set up GitHub pages to deploy from the
+root of your `gh-pages` branch.
 
 
 Release process
diff --git a/deploy_ghpages.sh b/deploy_ghpages.sh
new file mode 100755
index 000000000..79b75a458
--- /dev/null
+++ b/deploy_ghpages.sh
@@ -0,0 +1,7 @@
+
+# To ensure that the gh-pages job doesn't try to build a jekyll site
+# (and ignore files in /assets), we create a .nojekyll file in the
+# ./gh_pages/ output dir. The pages.yml workflow copies all of that dir
+#  to the gh-pages branch.
+
+touch gh_pages/.nojekyll
diff --git a/omero_figure/views.py b/omero_figure/views.py
index 04dd9d2e8..39f7b24b8 100644
--- a/omero_figure/views.py
+++ b/omero_figure/views.py
@@ -117,6 +117,8 @@ def index(request, file_id=None, conn=None, **kwargs):
     # Load the template html and replace OMEROWEB_INDEX
     template = loader.get_template("omero_figure/index.html")
     html = template.render({}, request)
+    html = html.replace('const APP_SERVED_BY_OMERO = false;',
+                        'const APP_SERVED_BY_OMERO = true;')
     omeroweb_index = reverse("index")
     figure_index = reverse("figure_index")
     ping_url = reverse("keepalive_ping")
@@ -154,8 +156,10 @@ def index(request, file_id=None, conn=None, **kwargs):
 
     # update links to static files
     static_dir = static.static('omero_figure/')
-    html = html.replace('href="/', 'href="%s' % static_dir)
-    html = html.replace('src="/', 'src="%s' % static_dir)
+    html = html.replace('href="/assets',
+                        'href="%sassets' % static_dir)
+    html = html.replace('src="/assets',
+                        'src="%sassets' % static_dir)
     html = html.replace('const STATIC_DIR = "";',
                         'const STATIC_DIR = "%s";' % static_dir[0:-1])
 
diff --git a/package.json b/package.json
index 96784287d..8c3ebae0a 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,10 @@
   "description": "OMERO figure creation app",
   "main": "index.js",
   "scripts": {
+    "dev": "vite",
     "start": "vite",
     "build": "vite build --emptyOutDir && ./deploy_build.sh",
+    "ghpages": "vite build --outDir ../gh_pages && ./deploy_ghpages.sh",
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch": "watch 'npm run build' ./src"
   },
diff --git a/src/css/figure.css b/src/css/figure.css
index da83b0358..32876e348 100644
--- a/src/css/figure.css
+++ b/src/css/figure.css
@@ -1059,7 +1059,7 @@
         text-align: left;
     }
 
-    .lutOption span {
+    .lutOption span, .lutOption img {
         width: 85px;
         display: inline-block;
     }
@@ -1074,6 +1074,7 @@
         /* NB: when updating png, consider using different name to avoid cache */
         background-size: 100% var(--pngHeight);
         background-image: var(--lutPng);
+        background-position: var(--bgPos);
         background-repeat: no-repeat;
         image-rendering: pixelated;  /* Universal support since 2021 */
     }
diff --git a/src/index.html b/src/index.html
index 11c0c824a..447d61228 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,9 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>OMERO.figure</title>
     <script>
+      window.BASE_URL = "";
       // For dev, use this server to load/save figures (needs CORS enabled)
       const dev_omeroweb_url = "http://localhost:4080/";
       // These are updated by views.py when serving this page...
+      // Flag for knowing if app is served from OMERO (or standalone)
+      const APP_SERVED_BY_OMERO = false;
       const BASE_OMEROWEB_URL = dev_omeroweb_url;
       const EXPORT_ENABLED = false;
       const SCRIPT_VERSION = "";
@@ -715,12 +718,15 @@ <h5 class="modal-title">Add Images</h5>
           </div>
           <form class="addImagesForm" role="form">
             <div class="modal-body">
-              <p>
+              <p class="omero_only_element">
                 Add images to the figure by entering their IDs, separated by
                 commas.<br />
                 Hint: You can also select images in the webclient, click the
                 link in right panel, copy the URL and paste it here:
               </p>
+              <p class="standalone_only_element">
+                Add OME-Zarr images to the figure by entering their full URL:
+              </p>
               <div
                 class="form-group"
                 style="margin-top: 15px; margin-bottom: 0px"
@@ -1017,7 +1023,7 @@ <h4>Legend</h4>
         </div>
       </div>
     </div>
-    <!-- File Open Modal -->
+    <!-- OMERO File Open Modal -->
     <div
       class="modal"
       id="openFigureModal"
@@ -1147,6 +1153,71 @@ <h5 class="modal-title">Open</h5>
         </div>
       </div>
     </div>
+    <!-- Open local File or http://url_to/figure.json -->
+    <div
+      class="modal"
+      id="openLocalFileModal"
+      tabindex="-1"
+      role="dialog"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Open File</h5>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+          <form class="openLocalFileForm" role="form">
+            <div class="modal-body">
+              <p>
+                Enter a URL to a figure JSON file:
+              </p>
+              <div
+                class="form-group"
+                style="margin-top: 15px; margin-bottom: 0px"
+              >
+                <input
+                  type="text"
+                  class="form-control figureFileUrl"
+                  placeholder="URL to a figure.json file"
+                />
+              </div>
+              <div
+                class="form-group"
+                style="margin-top: 15px; margin-bottom: 0px"
+              >
+                <p>
+                  <b>OR</b> select a local figure JSON file to open:
+                </p>
+                <input type="file" />
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button
+                type="button"
+                class="btn btn-default"
+                data-bs-dismiss="modal"
+              >
+                Close
+              </button>
+              <button
+                type="submit"
+                class="btn btn-primary"
+                data-bs-dismiss="modal"
+                disabled="disabled"
+              >
+                Open
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
     <!-- Labels from Map Annotations Modal -->
     <div
       class="modal"
@@ -1266,10 +1337,11 @@ <h5>Example Label</h5>
                 <li class="import_json">
                   <a class="dropdown-item" href="#">Import from JSON...</a>
                 </li>
-                <li class="delete_figure">
+                <!-- omero_only_element will be hidden if not APP_SERVED_BY_OMERO -->
+                <li class="delete_figure omero_only_element">
                   <a class="dropdown-item" href="#">Delete</a>
                 </li>
-                <li class="chgrp_figure">
+                <li class="chgrp_figure omero_only_element">
                   <a class="dropdown-item" href="#">Move Figure to Group...</a>
                 </li>
                 <li class="paper_setup">
diff --git a/src/js/main.js b/src/js/main.js
index 48ff23495..9d025406b 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -22,6 +22,10 @@ const figureModel = new FigureModel();
 // make this global so we can access it from the browser console
 window.figureModel = figureModel;
 
+// This will be '/' unless deployed from gh-pages, when it will be '/omero-figure/'
+console.log("import.meta.env", import.meta.env)
+window.BASE_URL = import.meta.env.BASE_URL.slice(1);  // remove leading slash
+console.log("BASE_URL", BASE_URL);
 const RELEASE_VERSION = import.meta.env.VITE_VERSION;
 console.log("RELEASE_VERSION", RELEASE_VERSION);
 document.getElementById("release_version").innerHTML = RELEASE_VERSION;
@@ -73,17 +77,32 @@ var undoManager = new UndoManager({ figureModel: figureModel }),
 // Finally, start listening for changes to panels
 undoManager.listenToCollection(figureModel.panels);
 
+// All routes based on BASE_URL, which is either '/' or '/omero-figure/' depending on deployment
+let routes = {};
+routes[`${BASE_URL}(/)`] = "index";
+routes[`${BASE_URL}new(/)`] = "newFigure";
+routes[`${BASE_URL}recover(/)`] = "recoverFigure";
+routes[`${BASE_URL}open(/)`] = "openFigure";
+routes[`${BASE_URL}file/:id(/)`] = "loadFigure";
+
 var FigureRouter = Backbone.Router.extend({
-  routes: {
-    "": "index",
-    "new(/)": "newFigure",
-    "recover(/)": "recoverFigure",
-    "open(/)": "openFigure",
-    "file/:id(/)": "loadFigure",
-  },
+  routes: routes,
 
   index: function () {
     console.log("index");
+    // Check for ?file=http://...json
+    // TODO: do we ONLY want to do this on index?
+    if (window.location.search.length > 1) {
+      const searchParams = new URLSearchParams(window.location.search.substring(1));
+      if (searchParams.has("file")) {
+        const file = searchParams.get("file");
+        var cb = function () {
+          figureModel.load_from_url(file);
+        };
+        figureModel.checkSaveAndClear(cb);
+        return;
+      }
+    }
     hideModals();
     var cb = () => {
       showModal("welcomeModal");
@@ -161,7 +180,8 @@ $(document).on("click", "a", function (ev) {
   // check that links are 'internal' to this app
   if (href.substring(0, BASE_WEBFIGURE_URL.length) === BASE_WEBFIGURE_URL) {
     ev.preventDefault();
-    href = href.replace(BASE_WEBFIGURE_URL, "/");
+    let baseUrl = APP_SERVED_BY_OMERO ? "/" : "/omero-figure/";
+    href = href.replace(BASE_WEBFIGURE_URL, baseUrl);
     app.navigate(href, { trigger: true });
   }
 });
diff --git a/src/js/models/figure_model.js b/src/js/models/figure_model.js
index 8f030a754..ed517e6a8 100644
--- a/src/js/models/figure_model.js
+++ b/src/js/models/figure_model.js
@@ -6,6 +6,7 @@
     import {PanelList, Panel} from "./panel_model";
     import { recoverFigureFromStorage,
         clearFigureFromStorage,
+        downloadAsFile,
         figureConfirmDialog,
         getJsonWithCredentials,
         saveFigureToStorage,
@@ -373,6 +374,18 @@
             return figureJSON;
         },
 
+        load_from_url: function(url) {
+            // load content from a URL
+            console.log("load_from_url...", url);
+            $.getJSON(url, function(data){
+                this.load_from_JSON(data);
+                this.set('unsaved', false);
+            }.bind(this))
+            .fail(function(){
+                alert("Failed to load figure from URL: " + url);
+            });
+        },
+
         figure_fromJSON: function(data) {
             var parsed = JSON.parse(data);
             delete parsed.fileId;
@@ -396,6 +409,18 @@
             }
         },
 
+        save_to_download: function(options) {
+            // Downloads the FigureJSON as a file
+            let figureJSON = this.figure_toJSON();
+            if (options.figureName) {
+                figureJSON.figureName = options.figureName;
+            }
+            let fileName = figureJSON.figureName || "figure";
+            let jsonText = JSON.stringify(this.figure_toJSON(), null, 2);
+            downloadAsFile(jsonText, "application/json", fileName + ".json");
+            this.set({unsaved: false});
+        },
+
         save_to_OMERO: function(options) {
 
             var self = this,
diff --git a/src/js/views/channel_slider_view.js b/src/js/views/channel_slider_view.js
index a5253b9b6..7aefeb056 100644
--- a/src/js/views/channel_slider_view.js
+++ b/src/js/views/channel_slider_view.js
@@ -401,10 +401,17 @@ var ChannelSliderView = Backbone.View.extend({
                 var active = actives.reduce(allEqualFn, actives[0]);
                 var style = {'background-position': '0 0'}
                 var lutBgPos = FigureLutPicker.getLutBackgroundPosition(color);
-                if (color.endsWith('.lut')) {
-                    style['background-position'] = lutBgPos;
+                var lutPng = FigureLutPicker.getLutPng(color);
+                console.log("lutPng", lutPng);
+                var lutBgCss = '--bgPos: 0 0;';
+                if (color.endsWith('.lut') && lutPng) {
+                    // lutPng means we have LUT from ome-zarr.js. Apply without offset
+                    lutBgCss = `--bgPos: 0 0; --lutPng: url('${lutPng}'); --pngHeight: 100%;`;
                     color = "ccc";
-                } else if (color.toUpperCase() === "FFFFFF") {
+                } else {
+                    lutBgCss = `--bgPos: ${lutBgPos};`
+                }
+                if (color.toUpperCase() === "FFFFFF") {
                     color = "ccc";  // white slider would be invisible
                 }
                 if (color == "FFFFFF") color = "ccc";  // white slider would be invisible
@@ -423,7 +430,7 @@ var ChannelSliderView = Backbone.View.extend({
                                                 'max': max,
                                                 'step': (max - min > SLIDER_INCR_CUTOFF) ? 1 : 0.01,
                                                 'active': active,
-                                                'lutBgPos': lutBgPos,
+                                                'lutBgCss': lutBgCss,
                                                 'reverse': reverse,
                                                 'color': color,
                                                 'isDark': this.isDark(color)
diff --git a/src/js/views/figure_view.js b/src/js/views/figure_view.js
index a1894f1df..bf67b36dd 100644
--- a/src/js/views/figure_view.js
+++ b/src/js/views/figure_view.js
@@ -11,6 +11,7 @@
     import {FigureFileList, FileListView} from "./files";
 
     import {AddImagesModalView, DpiModalView, PaperSetupModalView, SetIdModalView } from "./modal_views";
+    import {OpenLocalFileModalView} from "./open_local_file_modal";
 
     import {CropModalView} from "./crop_modal_view";
     import {ChgrpModalView} from "./chgrp_modal_view";
@@ -52,6 +53,7 @@
             new DpiModalView({model: this.model});
             new LegendView({model: this.model});
             new LabelFromMapsModal({model: this.model});
+            new OpenLocalFileModalView({model: this.model, app: this.app});
 
             this.figureFiles = new FigureFileList();
             this.fileListViewModal = new FileListView({model:this.figureFiles, figureModel: this.model});
@@ -90,20 +92,33 @@
                 self.model.set('curr_zoom', event.target.value);
             });
 
-            // enable export (script is available)
-            if (EXPORT_ENABLED) {
-                $("button.export_pdf").removeAttr("disabled");
-                // check script version
-                if (SCRIPT_VERSION != RELEASE_VERSION) {
+            if (APP_SERVED_BY_OMERO) {
+                // enable export (script is available)
+                if (EXPORT_ENABLED) {
+                    $("button.export_pdf").removeAttr("disabled");
+                    // check script version
+                    if (SCRIPT_VERSION != RELEASE_VERSION) {
+                        $(".script_version_warning").show()
+                        .attr("title", "Script Version Warning");
+                    }
+                } else if (IS_ADMIN) {
                     $(".script_version_warning").show()
-                    .attr("title", "Script Version Warning");
+                        .attr("title", "Script missing! Click to Upload...");
+                } else {
+                    $(".script_version_warning").show()
+                        .attr("title", "Export script not installed. Contact your OMERO administrator.");
                 }
-            } else if (IS_ADMIN) {
-                $(".script_version_warning").show()
-                    .attr("title", "Script missing! Click to Upload...");
             } else {
-                $(".script_version_warning").show()
-                    .attr("title", "Export script not installed. Contact your OMERO administrator.");
+                // enable export (no script needed in stand-alone)
+                $("button.export_pdf").removeAttr("disabled");
+            }
+
+            // if we're NOT served by OMERO, hide elements such as Delete and Chgrp menu-items
+            if (!APP_SERVED_BY_OMERO) {
+                $(".omero_only_element").hide();
+            } else {
+                // otherwise hide elements with stand-alone specific content
+                $(".standalone_only_element").hide();
             }
 
             // respond to zoom changes
@@ -287,17 +302,9 @@
             event.preventDefault();
 
             // Status is indicated by showing / hiding 3 buttons
-            var figureModel = this.model,
-                $create_figure_pdf = $(event.target),
+            var $create_figure_pdf = $(event.target),
                 export_opt = $create_figure_pdf.attr('data-export-option'),
-                $pdf_inprogress = $("#pdf_inprogress"),
-                $pdf_download = $("#pdf_download"),
-                $script_error = $("#script_error"),
                 exportOption = "PDF";
-            $create_figure_pdf.hide();
-            $pdf_download.hide();
-            $script_error.hide();
-            $pdf_inprogress.show();
 
             // Map from HTML to script options
             const opts = {"PDF": "PDF",
@@ -307,11 +314,34 @@
                 "to OMERO": "OMERO"};
             exportOption = opts[export_opt];
 
+            if (!APP_SERVED_BY_OMERO) {
+                let title = "Figure Export Options";
+                let buttons = ["OK"];
+                let message = `The standalone app doesn't support export to PDF or TIFF.
+                <p>You can download the figure via 'Save' and run the figure export script on your local machine.</p>
+                <p>For more details, see the
+                <a href="https://github.com/ome/omero-figure?tab=readme-ov-file#run-figure-export-locally" target="_blank">
+                figure export instructions</a>.
+                </p>`;
+
+                figureConfirmDialog(title, message, buttons);
+                return;
+            }
+
+            var url = MAKE_WEBFIGURE_URL;
+            this.run_export_script(url, exportOption);
+        },
+
+        run_export_script: function(url, exportOption) {
+
+            let $pdf_inprogress = $("#pdf_inprogress").show();
+            let $create_figure_pdf = $(".export_pdf").hide();
+            let $pdf_download = $("#pdf_download").hide();
+            let $script_error = $("#script_error").hide();
+
             // Get figure as json
             var figureJSON = this.model.figure_toJSON();
-
-            var url = MAKE_WEBFIGURE_URL,
-                data = {
+            var data = {
                     figureJSON: JSON.stringify(figureJSON),
                     exportOption: exportOption,
                 };
@@ -382,6 +412,10 @@
                         });
 
                 }, 1000);
+            }).fail(function(err) {
+                alert("Error starting export script", err);
+                $create_figure_pdf.show();
+                $pdf_inprogress.hide();
             });
         },
 
@@ -456,7 +490,7 @@
                 self.model.clearFigure();
                 self.addImagesModal.modal.show();
                 // navigate will be ignored if we're already on /new
-                self.app.navigate("new/", {trigger: true});
+                self.app.navigate(BASE_URL + "new/", {trigger: true});
             };
 
             if (this.model.get("unsaved")) {
@@ -492,7 +526,7 @@
                     $.post( BASE_WEBFIGURE_URL + "delete_web_figure/", { fileId: fileId})
                         .done(function(){
                             self.figureFiles.removeFile(fileId);
-                            self.app.navigate("", {trigger: true});
+                            self.app.navigate(BASE_URL, {trigger: true});
                         });
                 }
             }
@@ -512,7 +546,12 @@
             var self = this;
             var callback = function() {
                 // Opening modal will trigger fetch of files
-                self.fileListViewModal.modal.show();
+                if (APP_SERVED_BY_OMERO) {
+                    self.fileListViewModal.modal.show();
+                } else {
+                    // Open local file or URL
+                    showModal("openLocalFileModal");
+                }
             };
 
             if (this.model.get("unsaved")) {
@@ -550,7 +589,7 @@
 
             var fileId = this.model.get('fileId'),
                 canEdit = this.model.get('canEdit');
-            if (fileId && canEdit) {
+            if (fileId && canEdit && APP_SERVED_BY_OMERO) {
                 // Prevent double-click
                 this.$saveBtn.attr('disabled', 'disabled');
                 // Save
@@ -576,20 +615,26 @@
 
             var self = this;
             options = options || {};
-            var defaultName = this.model.get('figureName');
-            if (!defaultName) {
-                defaultName = this.model.getDefaultFigureName();
+            var figureName = this.model.get('figureName');
+            if (!figureName) {
+                var defaultName = this.model.getDefaultFigureName();
+                figureName = prompt("Enter Figure Name", defaultName);
             }
-            var figureName = prompt("Enter Figure Name", defaultName);
 
             var nav = function(data){
-                console.log("nav", data, self.app);
-                self.app.navigate("file/"+data);
+                // Update URL to new file (with ID)
+                self.app.navigate(`${BASE_URL}file/${data}`);
                 // in case you've Saved a copy of a file you can't edit
                 self.model.set('canEdit', true);
             };
             if (figureName) {
                 options.figureName = figureName;
+
+                if (!APP_SERVED_BY_OMERO) {
+                    this.model.set('figureName', figureName);
+                    this.model.save_to_download(options);
+                    return;
+                }
                 // On save, go to newly saved page, unless we have callback already
                 options.success = options.success || nav;
                 // Save
diff --git a/src/js/views/lutpicker.js b/src/js/views/lutpicker.js
index 304eb137e..a314377c9 100644
--- a/src/js/views/lutpicker.js
+++ b/src/js/views/lutpicker.js
@@ -21,6 +21,7 @@ import Backbone from "backbone";
 import $ from "jquery";
 import _ from 'underscore';
 import * as bootstrap from "bootstrap"
+import * as omezarr from "ome-zarr.js";
 
 import lut_picker_template from '../../templates/lut_picker.template.html?raw';
 import { showModal } from "./util";
@@ -38,6 +39,10 @@ var LutPickerView = Backbone.View.extend({
     initialize:function () {
         this.lutModal = new bootstrap.Modal('#lutpickerModal');
         this.lut_names = [];
+    
+        // These will be overwritten with LUTs from OMERO if served by OMERO
+        this.luts = omezarr.getLuts();
+
         this.loadLuts();
     },
 
@@ -58,13 +63,24 @@ var LutPickerView = Backbone.View.extend({
         this.pickedLut = lutName;
 
         // Update preview to show LUT
-        var bgPos = this.getLutBackgroundPosition(lutName);
-        $(".lutPreview", this.el).css({'background-position': bgPos, 'background-image': `url(${this.lutsPngUrl})`});
+        var lut = this.luts.find(lut => lut.name == lutName);
+        if (lut.png) {
+            $(".lutPreview", this.el).css({'background-position': '0 0', 'background-image': "url('" + lut.png + "')", 'background-size': '100% 100%'});
+        } else {
+            var bgPos = this.getLutBackgroundPosition(lutName);
+            $(".lutPreview", this.el).css({'background-position': bgPos, 'background-image': `url(${this.lutsPngUrl})`});
+        }
         // Enable OK button
         $("button[type='submit']", this.el).removeAttr('disabled');
     },
 
     loadLuts: async function(force_reload = false) {
+        if (!APP_SERVED_BY_OMERO) {
+            $(":root").css({
+                "--pngHeight": "100%"
+            });
+            return;
+        }
         var url = WEBGATEWAYINDEX + 'luts/';
         let cors_headers = { mode: 'cors', credentials: 'include' };
         if (force_reload || this.lut_names === undefined || this.lutsPngUrl === undefined || this.luts === undefined) {
@@ -100,7 +116,18 @@ var LutPickerView = Backbone.View.extend({
         return this.lutsPngUrl
     },
 
+    getLutPng(lutName) {
+        // This will return undefined if the LUTs are loaded from OMERO
+        var lut = this.luts.find(lut => lut.name == lutName);
+        if (lut && lut.png) {
+            return lut.png;
+        }
+    },
+
     getLutBackgroundPosition: function(lutName) {
+        if (!APP_SERVED_BY_OMERO) {
+            return '0px 0px';
+        }
         var lutIndex = this.lut_names.indexOf(lutName);
         if (lutIndex > -1) {
             return '0px -' + ((lutIndex * 1000) +2) + 'px';
@@ -125,8 +152,7 @@ var LutPickerView = Backbone.View.extend({
         if (options.success) {
             this.success = options.success;
         }
-
-        this.loadLuts().then(() => this.render());
+        this.render();
     },
 
     render:function() {
@@ -140,6 +166,7 @@ var LutPickerView = Backbone.View.extend({
                 // Add css background-position to each lut to offset luts_10.png
                 return {'bgPos': this.getLutBackgroundPosition(lut.name),
                         'name': lut.name,
+                        'png': lut.png,    // if LUT is from omezarr.js, we have png in hand
                         'displayName': this.formatLutName(lut.name)};
             }.bind(this));
 
@@ -151,4 +178,4 @@ var LutPickerView = Backbone.View.extend({
 
 const FigureLutPicker = new LutPickerView();
 
-export default FigureLutPicker
+export default FigureLutPicker;
diff --git a/src/js/views/modal_views.js b/src/js/views/modal_views.js
index ae760ca68..a23e183e4 100644
--- a/src/js/views/modal_views.js
+++ b/src/js/views/modal_views.js
@@ -499,10 +499,12 @@ import { hideModal } from "./util";
                 setTimeout(this.keyPressed, 50);
                 return;
             }
-            if (re.test(idInput)) {
+            if (re.test(idInput) || idInput.indexOf('zarr') > 0 || idInput.startsWith('http')) {
                 submitBtn.removeAttr("disabled");
+                submitBtn.attr("title", "Add Images to figure");
             } else {
                 submitBtn.attr("disabled", "disabled");
+                submitBtn.attr("title", "Enter a valid image ID or OME-Zarr URL");
             }
         },
 
diff --git a/src/js/views/open_local_file_modal.js b/src/js/views/open_local_file_modal.js
new file mode 100644
index 000000000..f6a119c86
--- /dev/null
+++ b/src/js/views/open_local_file_modal.js
@@ -0,0 +1,77 @@
+
+// Events, show/hide and rendering for various Modal dialogs.
+import Backbone from "backbone";
+import _ from "underscore";
+import $ from "jquery";
+
+import FigureModel from "../models/figure_model";
+import { hideModal } from "./util";
+
+export const OpenLocalFileModalView = Backbone.View.extend({
+
+    el: $("#openLocalFileModal"),
+
+    model: FigureModel,
+
+    initialize: function(options) {
+
+        this.app = options.app;
+    
+        // TEMP? show a default file to open
+        let demoUrl = "https://gist.githubusercontent.com/will-moore/75a7f0de5be0f7b4202d5f0229cadcc9/raw/edf0f16c512942eb9fe347d22707a0fbcf33c917/ngff_images_figure.json";
+        $(".figureFileUrl", this.el).val(demoUrl);
+        this.enableSubmit();
+
+        // when dialog is shown...
+        document.getElementById('openLocalFileModal').addEventListener('shown.bs.modal', () => {
+            // clear file input
+            $("input[type='file']", this.el).val("");
+        });
+    },
+
+    events: {
+        "submit .openLocalFileForm": "handleOpenFile",
+        "input .figureFileUrl": "enableSubmit",
+        "input input[type='file']": "enableSubmit",
+    },
+
+    enableSubmit: function(event) {
+        let figureFileUrl = $(".figureFileUrl", this.el).val();
+        let localFile = $("input[type='file']", this.el).val();
+
+        if (figureFileUrl || localFile) {
+            $("button[type='submit'", this.el).prop("disabled", false);
+        } else {
+            $("button[type='submit'", this.el).prop("disabled", true);
+        }
+    },
+
+    handleOpenFile: function(event) {
+        event.preventDefault();
+
+        let figureFileUrl = $(".figureFileUrl", this.el).val();
+        let localFile = $("input[type='file']", this.el).val();
+        
+        if (localFile) {
+            let file = $("input[type='file']", this.el)[0].files[0];
+            // upload JSON file and open figure
+            const reader = new FileReader();
+            reader.onload = (evt) => {
+                let figureData = JSON.parse(evt.target.result);
+                this.model.clearFigure();
+                this.model.load_from_JSON(figureData);
+                this.model.set('unsaved', false);
+            };
+            reader.readAsBinaryString(file);
+        } else if (figureFileUrl) {
+            // go to ?file=figureFileUrl
+            this.app.navigate(`${BASE_URL}?file=${figureFileUrl}`, {trigger: true});
+        }
+        hideModal("openLocalFileModal");
+        return false;
+    },
+
+    render: function() {
+        
+    }
+});
diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index 8886f8282..979e1f01f 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -416,6 +416,7 @@
             if (isLUT) {
                 lut_url = await FigureLutPicker.loadLuts();  // Ensure lut url and list are loaded
                 lutBgPos = FigureLutPicker.getLutBackgroundPosition(color);
+                lut_url = FigureLutPicker.getLutPng(color);
             }
             var inverted_pos = {  // convenience variable for the colorbar template.
                 "left": "right",
diff --git a/src/js/views/util.js b/src/js/views/util.js
index 05af24088..888da3159 100644
--- a/src/js/views/util.js
+++ b/src/js/views/util.js
@@ -356,6 +356,19 @@ export function updateRoiIds(panelsJson) {
     return updatedPanels;
 }
 
+export function downloadAsFile(text, fileType, fileName) {
+    // https://javascript.plainenglish.io/javascript-create-file-c36f8bccb3be
+    const file = new File([text], fileName, {type: fileType})
+    const link = document.createElement('a')
+    const url = URL.createObjectURL(file)
+    link.href = url
+    link.download = file.name
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    window.URL.revokeObjectURL(url)
+}
+
 // Normalize z-projection bounds to be within [0, sizeZ-1] and ensure start <= end
 // Takes z_start, z_end, z_projection values and sizeZ, returns normalized bounds
 // If sizeZ is 1, disables z_projection and resets to 0
diff --git a/src/templates/channel_slider.template.html b/src/templates/channel_slider.template.html
index 9ec01ade3..9d71d1e23 100644
--- a/src/templates/channel_slider.template.html
+++ b/src/templates/channel_slider.template.html
@@ -7,7 +7,7 @@
             title="<%= _.escape(label) %>"
                     class="btn btn-default channel-btn lutBg <% if (isDark) { print('font-white') } %>"
                     data-index="<%= idx %>"
-                    style="background-color:#<%= color %>; background-position: <%= lutBgPos %>;">
+                    style="background-color:#<%= color %>; <%= lutBgCss %>">
 
                     <%= _.escape(label) %>
                     <div class="<% if(active) { %>ch-btn-down<% } else if (typeof active == 'boolean') { %>ch-btn-up<% } else { %>ch-btn-flat<% }%>">&nbsp</div>
@@ -72,7 +72,7 @@
             min="<%= min %>" max="<%= max %>" step="<%= step %>"
             type="range" value="<%= startAvg %>"
             style="background-color:#<%=color%>;
-                --bgPos: <%= lutBgPos %>;
+                <%= lutBgCss %>
                 --scaleX: <%= reverse ? -1 : 1 %>"/>
         <!-- data-slidemin and data-slidemax used to prevent sliding start > end etc -->
         <input class="ch_end_slider" data-idx="<%=idx%>" data-slidemin="<%= startAvg %>"
diff --git a/src/templates/lut_picker.template.html b/src/templates/lut_picker.template.html
index 14787e8e2..5edd56810 100644
--- a/src/templates/lut_picker.template.html
+++ b/src/templates/lut_picker.template.html
@@ -5,7 +5,11 @@
 	<% _.each(luts, function(lut, i) { %>
 
 		<button type="button" class="btn btn-default lutOption" data-lut="<%= lut.name %>">
-			<span class="lutBg" style="background-position: <%= lut.bgPos %>;">&nbsp</span>
+			<% if (lut.png) { %>
+				<img height="24px" src="<%= lut.png %>" />
+			<% } else { %>
+				<span class="lutBg" style="background-position: <%= lut.bgPos %>;">&nbsp</span>
+			<% } %>
 			<%= lut.displayName %> </button>
 
 		<% if (i === parseInt(luts.length/2)) { %>
diff --git a/vite.config.js b/vite.config.js
index 27d0dc16b..8c2d82d8c 100755
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,8 +1,9 @@
+import { defineConfig } from "vite";
 import injectHTML from 'vite-plugin-html-inject';
 
 const path = require('path')
 
-export default {
+let config = {
   root: path.resolve(__dirname, 'src'),
   plugins: [injectHTML()],
   resolve: {
@@ -23,5 +24,12 @@ export default {
     outDir: "../omero_figure/static/omero_figure/"
   },
 
-  assetsInclude: ["**/*.template.html"]
+  assetsInclude: ["**/*.template.html"],
 }
+
+// this will be undefined when deployed from netlify, but is used by gh-pages
+if (process.env.GITHUB_REPOSITORY_OWNER) {
+  config.base = "/omero-figure/";
+}
+
+export default defineConfig(config);