diff --git a/dashboard/.gitignore b/dashboard/.gitignore
new file mode 100644
index 0000000..6810073
--- /dev/null
+++ b/dashboard/.gitignore
@@ -0,0 +1,4 @@
+assets/fira
+assets/fontawesome
+assets/pure-min.css
+assets/grids-responsive-min.css
diff --git a/dashboard/assets/dashboard.css b/dashboard/assets/dashboard.css
index dbbd256..fb030e9 100644
--- a/dashboard/assets/dashboard.css
+++ b/dashboard/assets/dashboard.css
@@ -1,3 +1,16 @@
+:root {
+  --card-bg-color: #fbfbfb;
+  --card-border-color: #dddddd;
+  --card-title-color: #000000;
+  --card-description-color: #4d4d4d;
+  --card-meta-color: #909090;
+  --background-color: #ffffff;
+  --lang-code-color: #333333;
+  --lang-code-background: white;
+  --card-border-color-rgb: rgba(221, 221, 221, 1);
+  --kiwix-orange: #f19e4b;
+}
+
 @font-face {
   font-family: 'fira_sansbold';
   src: url('./fira/FiraSans-Bold.eot');
@@ -24,8 +37,13 @@
   box-sizing: border-box;
 }
 
+html, body {
+  height: 100%;
+}
+
 body {
-  font-family: 'fira_sansregular', sans-serif;
+  font-family: 'fira_sansregular', system-ui, sans-serif;
+  background-color: var(--background-color);
 }
 
 a {
@@ -35,8 +53,6 @@ a {
 
 header {
   padding: 1em .5em;
-  background-color: #fefefe;
-  color: #333;
   border-bottom: .1rem solid #eee;
   margin-bottom: 2.5em;
 }
@@ -46,80 +62,112 @@ section.cards {
   margin: auto;
 }
 
-.align-end {
-  text-align: end;
-}
-
 .card {
-  color: #444343;
+  position: relative;
+  box-sizing: border-box;
+  box-shadow: 0 0 8px 2px var(--card-border-color-rgb);
+  color: var(--card-meta-color);
   height: 13.7em;
   margin: 1rem;
   padding: 1rem;
-  background-color: #f7f7f7;
-  border: .1rem solid #ececec;
-  border-radius: .2rem;
+  background-color: var(--card-bg-color);
+  border-radius: .1rem;
   transition: transform 0.25s;
 }
 
-.card:hover {
-  border-color: rgb(61, 146, 201);
-  transition: transform 0.25s;
+.card .package-link {
+  height: 48px;
+}
+
+.package-icon {
+  width: 48px;
+  height: 48px;
+}
+
+.package-icon img {
+  width: 100%;
+  height: 100%;
+}
+
+.card .title {
+  margin-left: 1rem;
+  color: var(--card-title-color);
+
+  font-size: 26px;
+  display: flex;
+    align-items: center;
+}
+
+.card .title:hover {
+  text-shadow: 1px 1px 4px rgba(200, 200, 200, .8);;
 }
 
 .card .description {
+  height: 5em;
   text-align: justify-all;
   font-weight: 300;
-  color: #4d4d4d;
+  color: var(--card-description-color);
   line-height: 1.25;
-  height: 3.75em;
+  font-size: .9rem;
   overflow-y: scroll;
 }
 
-.tags-line {
+.metadata {
+  margin-top: 1em;
+  height: 4em;
   font-size: .9rem;
-  height: 1.7em;
-
   line-height: normal;
   vertical-align: middle;
   user-select: none;
   box-sizing: border-box;
-  border: none transparent;
-  text-decoration: none;
-  border-radius: 2px;
+}
+
+.tags {
+  text-align: end;
+  color: #909090;
+  overflow: hidden;
+}
 
-  white-space: nowrap;
-  overflow-x: hidden;
+.tags .tag:not(:last-child):after {
+  content: " | ";
 }
 
+
 .lang {
   text-transform: uppercase;
-  background-color: white;
-  color: black;
+  background-color: var(--lang-code-background);
+  color: var(--lang-code-color);
   text-align: center;
   margin-right: .2rem;
   font-size: 70%;
-  padding: .2rem;
+  font-weight: bold;
+  padding: .5rem;
+  border-radius: 5px;
+  border: 1px solid var(--card-border-color);
+}
+
+.card .download {
+  box-sizing: border-box;
+  position: absolute;
+  bottom: 5px;
+  right: 0;
 }
 
 .download a {
   font-size: 70%;
-  padding: .2rem .8rem;
-  background-color: #0078e7;
+  padding: 6px;
+  background-color: var(--kiwix-orange);
   color: #fff;
-}
-
-.tags {
-  text-align: end;
-  color: #909090;
-  overflow: hidden;
+  border-radius: 4px 0 0 0;
 }
 
 footer {
+  position:relative;
+  bottom:0;
   padding: .5em;
-  color: #fefefe;
-  background-color: #95A5A6;
+  color: white;
+  background-color: var(--kiwix-orange);
   margin-top: 3em;
-  height: auto;
-  min-height: 4.5rem;
+  height: 4.5em;
   text-align: center;
 }
diff --git a/dashboard/gen-home.py b/dashboard/gen-home.py
index 5104889..32c6865 100755
--- a/dashboard/gen-home.py
+++ b/dashboard/gen-home.py
@@ -24,7 +24,9 @@
 except ImportError:
     from yaml import Loader
 
-templates_dir = pathlib.Path(os.getenv("SRC_DIR", "/src")).joinpath("templates")
+src_dir = pathlib.Path(os.getenv("SRC_DIR", "/src"))
+dest_dir = pathlib.Path(os.getenv("DEST_DIR", "/var/www"))
+templates_dir = src_dir.joinpath("templates")
 env = Environment(
     loader=FileSystemLoader(templates_dir), autoescape=select_autoescape()
 )
@@ -71,10 +73,18 @@ def __init__(self, *args, **kwargs):
         except KeyError:
             ...
 
+    @property
+    def tags(self) -> list[str]:
+        return [tag for tag in self.get("tags", []) if tag and not tag.startswith("_")]
+
+    @property
+    def private_tags(self) -> list[str]:
+        return [tag for tag in self.get("tags", []) if tag.startswith("_")]
+
     @staticmethod
     def normalize(url: str) -> str:
         if not url.strip():
-            return
+            return ""
         uri = urllib.parse.urlparse(url)
         if not uri.scheme and not url.startswith("//"):
             url = f"//{url}"
@@ -111,7 +121,7 @@ def gen_home(fpath: pathlib.Path):
     )
 
     try:
-        with open("/var/www/index.html", "w") as fh:
+        with open(dest_dir / "index.html", "w") as fh:
             fh.write(env.get_template("home.html").render(**context))
     except Exception as exc:
         print("[CRITICAL] unable to gen homepage, using fallback")
@@ -122,10 +132,10 @@ def gen_home(fpath: pathlib.Path):
 
 
 if __name__ == "__main__":
-    gen_home(pathlib.Path("/src/home.yaml"))
+    gen_home(src_dir / "home.yaml")
 
     if Conf.debug:
-        with open("/var/www/index.html", "r") as fh:
+        with open(dest_dir / "index.html", "r") as fh:
             print(fh.read())
 
     if len(sys.argv) < 2:
diff --git a/dashboard/templates/home.html b/dashboard/templates/home.html
index 5e54930..a51f5aa 100644
--- a/dashboard/templates/home.html
+++ b/dashboard/templates/home.html
@@ -23,34 +23,32 @@
         </header>
         <section class="cards pure-g">
           {% for package in packages %}
-          <div class="pure-u-1 pure-u-md-12-24 pure-u-lg-8-24 pure-u-xxl-1-4 pure-u-x4k-4-24">
+          <div class="card-container pure-u-1 pure-u-md-12-24 pure-u-lg-8-24 pure-u-xl-1-4 pure-u-xxl-5-24 pure-u-xxxl-4-24 pure-u-x4k-1-24">
               <div class="card">
                 <a class="package-link" href="{{ package.url }}">
-                <div class="pure-g">
-                  <div class="pure-u-3-4">
-                    <h2>{{ package.title }}</h2>
-                  </div>
-                  <div class="pure-u-1-4 align-end">
-                    {% if package.icon %}<img src="data:image/png;base64,{{ package.icon }}" />{% endif %}
-                  </div>
+                  <div class="pure-g">
+                    <div class="package-icon pure-u-1-4">
+                      {% if package.icon %}<img src="data:image/png;base64,{{ package.icon }}" />{% endif %}
+                    </div>
+                    <div class="pure-u-3-4 title">{{ package.title }}</div>
                 </div>
               </a>
-                <div class="pure-g">
-                  <p class="description pure-u-1">{{ package.description|default("-") }}</p>
+                <div class="pure-g description">
+                  <p class="pure-u-1">{{ package.description|default("-") }}</p>
                 </div>
-                <div class="pure-g tags-line">
+                <div class="pure-g metadata">
                   <div class="pure-u-1-5">
                     <div class="langs">
                       {% if package.langs %}{% for lang in package.langs %}<span class="lang">{{ lang }}</span>{% endfor %}{% endif %}
                     </div>
                   </div>
-                  <div class="pure-u-1-5 download">
-                    {% if package.download and package.download.url %}<a href="{{ package.download.url }}"><i class="fa-solid fa-download"></i>{% if package.download.size %} {{ package.download.size|fsize }}{% endif %}</a>{% endif %}
-                  </div>
-                  <div class="pure-u-3-5">
-                    {% if package.tags %}<div class="tags">{% for tag in package.tags %}<span class="tag">{{ tag }}</span>{% endfor %}</div>{% endif %}
+                  <div class="pure-u-4-5 tags">
+                    {% if package.tags %}{% for tag in package.tags %}<span class="tag">{{ tag }}</span>{% endfor %}{% endif %}
                   </div>
                 </div>
+                <div class="download">
+                  {% if package.download and package.download.url %}<a title="Download “{{ package.title }}” ZIM file" href="{{ package.download.url }}"><i class="fa-solid fa-download"></i>{% if package.download.size %} {{ package.download.size|fsize }}{% endif %}</a>{% endif %}
+                </div>
               </div>
           </div>
           {% else %}