diff --git a/.gitignore b/.gitignore
index d43a5d9..f77c28d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -128,3 +128,4 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+.vscode/sftp.json
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..d734a73
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,24 @@
+## 0.1.0 (2023-10-07)
+
+### Feat
+
+- versioning
+- add a mamba environment
+- deploy a github page
+
+### Fix
+
+- support python<3.9, by importing typing types
+- add build-environment file
+- display the mosaics in reverse order
+- restore downloading
+- control the colors
+- load maps when mosaic is selected
+- lint to planet api
+- add AOi selector
+- move to sepal-ui 2.16.2
+- add planet to requirement
+
+### Refactor
+
+- remove useless notebooks
diff --git a/about_ui.ipynb b/about_ui.ipynb
deleted file mode 100644
index f1fa886..0000000
--- a/about_ui.ipynb
+++ /dev/null
@@ -1,86 +0,0 @@
-{
- "cells": [
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "8c8ab059",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "from sepal_ui import sepalwidgets as sw"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "68a57857",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# create the Html body of your about section\n",
-    "about_tile = sw.TileAbout(\"utils/ABOUT.md\")  # relative path to your markdown file"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "ce16c406",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# create the html body of the FAO disclaimer\n",
-    "# its mother class is sw.Tile so you can still replace it with another message if you want (discouraged)\n",
-    "disclaimer_tile = sw.TileDisclaimer()"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "e1abbd10",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "about_tile"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "0f1dc110",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "disclaimer_tile"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "5686017f",
-   "metadata": {},
-   "outputs": [],
-   "source": []
-  }
- ],
- "metadata": {
-  "kernelspec": {
-   "display_name": "Python 3",
-   "language": "python",
-   "name": "python3"
-  },
-  "language_info": {
-   "codemirror_mode": {
-    "name": "ipython",
-    "version": 3
-   },
-   "file_extension": ".py",
-   "mimetype": "text/x-python",
-   "name": "python",
-   "nbconvert_exporter": "python",
-   "pygments_lexer": "ipython3",
-   "version": "3.6.9"
-  }
- },
- "nbformat": 4,
- "nbformat_minor": 5
-}
diff --git a/aoi_selector_ui.ipynb b/aoi_selector_ui.ipynb
deleted file mode 100644
index 5e12735..0000000
--- a/aoi_selector_ui.ipynb
+++ /dev/null
@@ -1,40 +0,0 @@
-{
- "cells": [
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "from sepal_ui import aoi\n",
-    "\n",
-    "# create the tile\n",
-    "aoi_tile = aoi.AoiTile(methods=[\"-POINTS\"], gee=False)\n",
-    "\n",
-    "# this tile will only be displayed if voila is launch from this notebook\n",
-    "aoi_tile"
-   ]
-  }
- ],
- "metadata": {
-  "kernelspec": {
-   "display_name": "Python 3",
-   "language": "python",
-   "name": "python3"
-  },
-  "language_info": {
-   "codemirror_mode": {
-    "name": "ipython",
-    "version": 3
-   },
-   "file_extension": ".py",
-   "mimetype": "text/x-python",
-   "name": "python",
-   "nbconvert_exporter": "python",
-   "pygments_lexer": "ipython3",
-   "version": "3.6.9"
-  }
- },
- "nbformat": 4,
- "nbformat_minor": 4
-}
diff --git a/component/tile/down_control.py b/component/tile/down_control.py
index f175503..e62587c 100644
--- a/component/tile/down_control.py
+++ b/component/tile/down_control.py
@@ -10,7 +10,6 @@
 
 
 class DownView(sw.Tile):
-
     grid = None
     "the grod associated to the aoi"
 
@@ -20,7 +19,6 @@ def __init__(
         planet_model: PlanetModel,
         order_model: cmod.OrderModel,
     ):
-
         # save models as members
         self.aoi_model = aoi_model
         self.planet_model = planet_model
@@ -36,9 +34,8 @@ def __init__(
         self.btn.on_event("click", self.download_quads)
         self.aoi_model.observe(lambda *args: setattr(self, "grid", None), "name")
 
-    @sd.loading_button(debug=True)
+    @sd.loading_button()
     def download_quads(self, *args) -> None:
-
         if not self.aoi_model.name:
             raise Exception(cm.down_control.error.no_aoi)
 
@@ -66,7 +63,6 @@ def __init__(
         order_model: cmod.OrderModel,
         **kwargs
     ):
-
         self.view = DownView(aoi_model, planet_model, order_model)
 
         # create the control
diff --git a/explorer_ui.ipynb b/explorer_ui.ipynb
deleted file mode 100644
index 9feb6ab..0000000
--- a/explorer_ui.ipynb
+++ /dev/null
@@ -1,63 +0,0 @@
-{
- "cells": [
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "c45ed953",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "from component import tile"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "119243b3",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "explorer_tile = tile.ExplorerTile(aoi_tile.view.model)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "3bec2c91",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "explorer_tile"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "b6d81ad1",
-   "metadata": {},
-   "outputs": [],
-   "source": []
-  }
- ],
- "metadata": {
-  "kernelspec": {
-   "display_name": "Python 3",
-   "language": "python",
-   "name": "python3"
-  },
-  "language_info": {
-   "codemirror_mode": {
-    "name": "ipython",
-    "version": 3
-   },
-   "file_extension": ".py",
-   "mimetype": "text/x-python",
-   "name": "python",
-   "nbconvert_exporter": "python",
-   "pygments_lexer": "ipython3",
-   "version": "3.6.9"
-  }
- },
- "nbformat": 4,
- "nbformat_minor": 5
-}
diff --git a/no_ui.ipynb b/no_ui.ipynb
index f5a836f..55595c4 100644
--- a/no_ui.ipynb
+++ b/no_ui.ipynb
@@ -2,48 +2,293 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 1,
    "metadata": {},
    "outputs": [],
    "source": [
-    "# add all the tiles\n",
-    "%run 'aoi_selector_ui.ipynb'\n",
-    "%run 'explorer_ui.ipynb'"
+    "%load_ext autoreload\n",
+    "%autoreload 2"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "tags": []
-   },
-   "outputs": [],
+   "execution_count": 2,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<style>/*******************************************************************************\n",
+       " * Customization of the provided css from the different libs used by sepal_ui\n",
+       " */\n",
+       "\n",
+       "/* replace the map panel elements on top */\n",
+       ".leaflet-pane,\n",
+       ".leaflet-top,\n",
+       ".leaflet-bottom {\n",
+       "  z-index: 2 !important;\n",
+       "}\n",
+       "\n",
+       "/* remove the shadow from the widgets on the maps */\n",
+       ".leaflet-widgetcontrol {\n",
+       "  box-shadow: none;\n",
+       "}\n",
+       "\n",
+       "/* remove extra padding on top of the content */\n",
+       "main.v-content {\n",
+       "  padding-top: 0px !important;\n",
+       "}\n",
+       "\n",
+       "/* remove all the backgrounds from the controls and widget to be colored naturelly by the map */\n",
+       ".leaflet-control-container .vuetify-styles .v-application {\n",
+       "  background: rgb(0, 0, 0, 0);\n",
+       "}\n",
+       ".v-alert__wrapper .progress {\n",
+       "  background-color: transparent;\n",
+       "}\n",
+       "\n",
+       "/* set the bar on top of the map (800) when set to fullscreen */\n",
+       "header.v-app-bar {\n",
+       "  z-index: 800 !important;\n",
+       "}\n",
+       "\n",
+       "/* set the menu_content on top of the map when it's set to fullscreen */\n",
+       ".v-menu__content {\n",
+       "  max-width: 100% !important;\n",
+       "}\n",
+       "\n",
+       "/* make sure navigation drawers are always visible when they exist */\n",
+       "nav.v-navigation-drawer {\n",
+       "  z-index: 900 !important;\n",
+       "}\n",
+       "\n",
+       "/* create extra position for the leaflet map controls */\n",
+       ".leaflet-center {\n",
+       "  left: 50%;\n",
+       "  transform: translate(-50%, 0%);\n",
+       "}\n",
+       "\n",
+       ".leaflet-middle {\n",
+       "  top: 50%;\n",
+       "  position: absolute;\n",
+       "  z-index: 1000;\n",
+       "  pointer-events: none;\n",
+       "  transform: translate(0%, -50%);\n",
+       "}\n",
+       "\n",
+       ".leaflet-center.leaflet-middle {\n",
+       "  transform: translate(-50%, -50%);\n",
+       "}\n",
+       "\n",
+       "/* create extra classes to customize the layer_control table */\n",
+       ".v-no-hover:hover {\n",
+       "  background-color: transparent !important;\n",
+       "}\n",
+       "\n",
+       ".v-no-border tbody tr td,\n",
+       ".v-no-border tbody tr th {\n",
+       "  border: none !important;\n",
+       "}\n",
+       "\n",
+       "/* extra css rules to make the messages disappear beneath the SimpleSlider */\n",
+       ".v-no-messages .v-messages {\n",
+       "  display: none;\n",
+       "}\n",
+       "\n",
+       ".v-no-messages .v-input__slot {\n",
+       "  margin-bottom: 0;\n",
+       "}\n",
+       "\n",
+       "/* specific css for the btn placed on maps */\n",
+       ".v-btn.v-size--default.v-map-btn:not(.v-btn--round) {\n",
+       "  padding: 0px;\n",
+       "  min-width: 0px;\n",
+       "  width: 30px;\n",
+       "  height: 30px;\n",
+       "}\n",
+       "\n",
+       "/* add specific css for the zoom btn of the map */\n",
+       ".v-btn.v-zoom-plus {\n",
+       "  border-bottom-left-radius: 0;\n",
+       "  border-bottom-right-radius: 0;\n",
+       "}\n",
+       "\n",
+       ".v-btn.v-zoom-minus {\n",
+       "  margin-top: -1px;\n",
+       "  border-top-left-radius: 0;\n",
+       "  border-top-right-radius: 0;\n",
+       "}\n",
+       "\n",
+       "/* css rules for fullscreen menus */\n",
+       ".v-card.v-menu-fullscreen {\n",
+       "  width: calc(100vw - 80px);\n",
+       "  height: calc(100vh - 20px);\n",
+       "}\n",
+       "\n",
+       "/* hide the disclaimer message placed on top of the ui notebook\n",
+       " * the message will be displayed until the css is loaded */\n",
+       "#loading-app {\n",
+       "  display: none !important;\n",
+       "}\n",
+       "\n",
+       "/* Related with https://github.com/12rambau/sepal_ui/issues/893 */\n",
+       "#rendered_cells {\n",
+       "  contain: revert !important;\n",
+       "  background-color: revert !important;\n",
+       "}\n",
+       "</style>"
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "data": {
+      "text/html": [
+       "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css\"/>"
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "data": {
+      "application/javascript": [
+       "/*******************************************************************************\n",
+       " * remove any links from fontawesome 5 created by jupyter in favor of\n",
+       " * fontawesome 6. to be removed when Jupyter updates it\n",
+       " */\n",
+       "\n",
+       "function remove_fa5() {\n",
+       "  let links = document.querySelectorAll(\n",
+       "    \"link[href^='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@^5']\"\n",
+       "  );\n",
+       "\n",
+       "  links.forEach((link) => link.remove());\n",
+       "}\n",
+       "\n",
+       "if (document.readyState != \"loading\") remove_fa5();\n",
+       "else document.addEventListener(\"DOMContentLoaded\", remove_fa5);\n"
+      ],
+      "text/plain": [
+       "<IPython.core.display.Javascript object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "a6a2f3d0547b4cb3bd36a01d6811bef2",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "ResizeTrigger()"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
-    "aoi_tile"
+    "from component import tile\n",
+    "from sepal_ui import aoi"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 3,
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "019f8614e7d9445bac9e0a08b0033bb5",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "VuetifyTemplate(template='<script>{methods: {jupyter_embed(){/* set a selected map to embed mode (i.e. default…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "data": {
+      "application/javascript": [
+       "/* set a selected map to fullscreen */\n",
+       "var i = 0;\n",
+       "const wait_unitl_element_appear = setInterval(() => {\n",
+       "  var element = document.querySelector(\".vujvjc .leaflet-container\");\n",
+       "  if (element != null) {\n",
+       "    element.style.position = \"fixed\";\n",
+       "    element.style.width = \"100vw\";\n",
+       "    element.style.height = \"calc(100vh - 48px)\";\n",
+       "    element.style.zIndex = 800;\n",
+       "    element.style.bottom = 0;\n",
+       "    element.style.left = 0;\n",
+       "    window.dispatchEvent(new Event(\"resize\"));\n",
+       "    clearInterval(wait_unitl_element_appear);\n",
+       "  } else if (i > 50) {\n",
+       "    clearInterval(wait_unitl_element_appear);\n",
+       "    console.log(\"cannot find the map element\");\n",
+       "  } else {\n",
+       "    i++;\n",
+       "  }\n",
+       "}, 100);\n"
+      ],
+      "text/plain": [
+       "<IPython.core.display.Javascript object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
-    "explorer_tile"
+    "map_tile = tile.MapTile()"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 4,
    "metadata": {},
-   "outputs": [],
-   "source": []
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "986435b059b74d65976343b06894548f",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "MapTile(align_center=True, children=[Card(children=[Html(children=[''], layout=None, tag='h2'), Flex(children=…"
+      ]
+     },
+     "execution_count": 4,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "map_tile"
+   ]
   }
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "(test) test-planet-order",
    "language": "python",
-   "name": "python3"
+   "name": "test-planet-order"
   },
   "language_info": {
    "codemirror_mode": {
@@ -55,7 +300,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.8.10"
+   "version": "3.10.12"
   }
  },
  "nbformat": 4,
diff --git a/pyproject.toml b/pyproject.toml
index 345d012..6c4acd6 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -19,4 +19,17 @@ docstring-quotes = "double"
 convention = "google"
 
 [tool.ruff.per-file-ignores]
-"*/__init__.py" = ["F403"] # unable to detect undefined names | hide internal strcuture
\ No newline at end of file
+"*/__init__.py" = ["F403"] # unable to detect undefined names | hide internal strcuture
+
+
+[project]
+version = "0.1.0"
+
+[tool.commitizen]
+version = "0.1.0"
+update_changelog_on_bump = true
+changelog_file = "CHANGELOG.md"
+changelog_incremental = true
+version_files = [
+    "pyproject.toml:version",
+]
\ No newline at end of file
diff --git a/requirements.txt b/requirements.txt
index b1b18e2..6f5fc60 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,12 +1,9 @@
-# these libs are requested to build application env
-jupyter
 voila
 toml
+earthengine-api
 
-# the base lib to run any sepal_ui based app
-# don't forget to fix it to a specific version when you're app is ready
-sepal-ui
+sepal_ui==2.17
 
 # custom libs
 geopandas
-planet==2.0a6
+planet>=2.0a6
diff --git a/ui.ipynb b/ui.ipynb
index 728d2a7..7e255df 100644
--- a/ui.ipynb
+++ b/ui.ipynb
@@ -1,5 +1,12 @@
 {
  "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<center><h1 class=\"text-center h3\" id=\"loading-app\">Setting things up for you... Thanks for waiting!</h1></center>"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -27,8 +34,33 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "# Gather all the partial tiles that you created previously\n",
-    "%run 'map_ui.ipynb'\n",
+    "about_tile = sw.TileAbout(\"utils/ABOUT.md\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "disclaimer_tile = sw.TileDisclaimer()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "map_tile = tile.MapTile()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
     "app_content = [map_tile]"
    ]
   },
@@ -76,9 +108,9 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": " (venv) PlanetLab order (beta)",
    "language": "python",
-   "name": "python3"
+   "name": "venv-planet-order"
   },
   "language_info": {
    "codemirror_mode": {
@@ -90,7 +122,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.8.10"
+   "version": "3.10.12"
   },
   "voila": {
    "theme": "dark"