diff --git a/README.md b/README.md
index 06d846c..c8612b6 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,12 @@
-# Deno KV Insights
+<br>
 
-Deno KV Insights is a tool for managing Deno KV database entries.
+<p align="left">
+  <img width="550" alt="deno kv insights logo" src="https://github.com/zemili-group/deno-kv-insights/assets/65465380/33d8606f-837d-4fc7-9ac5-79c3c92f1131">
+</p>
+
+<br>
+
+**Deno KV Insights** is a tool for managing Deno KV database entries.
 
 ## Features:
 
diff --git a/lib/entry/components/kvInsightsApp.tsx b/lib/entry/components/kvInsightsApp.tsx
index 6c75528..be91e35 100644
--- a/lib/entry/components/kvInsightsApp.tsx
+++ b/lib/entry/components/kvInsightsApp.tsx
@@ -1,220 +1,34 @@
-import { FunctionComponent } from 'preact';
-import { Head } from '$fresh/src/runtime/head.ts';
-import { HTTPStrippedEntries } from '../models.ts';
-import EntriesManagement from '../islands/entriesManagement.tsx';
+import { FunctionComponent } from "preact";
 
-const KVInsightsApp: FunctionComponent<KVInsightsAppProps> = ({ initialEntries }) => {
-  return (
-    <div class='page container'>
-      <Head>
-        <meta name='robots' content='noindex' />
-        <link
-          href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css'
-          rel='stylesheet'
-          integrity='sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM'
-          crossorigin='anonymous'
-        />
-        <style>
-          {`
-/*TODO: Move to css file when a package mechanism for Fresh is available */
-/*region common*/
-body {
-    height: 100vh;
-}
-
-.page {
-    height: 100%;
-    display: grid;
-    grid-template-rows: 100px 1fr 100px;
-    row-gap: 25px;
-}
-
-.header {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    column-gap: 5px;
-    align-items: center;
-    padding: 20px 0;
-}
-
-.header .title {
-    font-size: 24px;
-    font-weight: bold;
-}
-
-.deno-logo {
-    height: 65px;
-    width: 65px;
-}
-
-.footer {
-    margin: auto;
-}
-
-.resize-none {
-    resize: none;
-}
-/*endregion*/
-
-/*region entriesManagement*/
-.entries-management {
-    height: 100%;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    column-gap: 25px;
-}
+import { HTTPStrippedEntries } from "../models.ts";
+import EntriesManagement from "../islands/entriesManagement.tsx";
+import { Meta } from "./meta.tsx";
 
-.entries-management .panel {
-    padding: 24px 9px;
-    border: solid var(--bs-border-color) 1px;
-    border-radius: var(--bs-border-radius);
-}
-
-.entries-management .left-panel-container {
-    height: 100%;
-    display: grid;
-    grid-template-rows: auto 1fr;
-    grid-row-gap: 24px;
-}
-
-.entries-management .action-container {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    column-gap: 24px;
-    padding: 0 15px;
-}
-
-.entries-management .entries-list-container {
-    position: relative;
-}
-
-.entries-management .entries-list-container .entries-list {
-    position: absolute;
-}
-
-.entries-management .search-form-control {
-    max-width: 290px;
-}
-/*endregion*/
-
-/*region entriesList*/
-.entries-list {
-    width: 100%;
-    height: 100%;
-    overflow-y: scroll;
-    padding: 0 15px;
-}
-
-.entries-list .table {
-    table-layout: fixed;
-}
-
-.entries-list .table-header {
-    position: sticky;
-    top: 0;
-}
-
-.entries-list .empty-table {
-    display: grid;
-    height: 100%;
-}
-
-.entries-list .empty-table .info-text {
-    align-self: center;
-    justify-self: center;
-    margin-bottom: 78px;
-}
-
-.entries-list .table-row {
-    cursor: pointer;
-}
-
-.entries-list .select-col {
-    width: 35px;
-}
-
-.entries-list .type-col {
-    width: 140px;
-}
-/*endregion*/
-
-/*region createEntryModal*/
-.create-entry-modal .value-form-control {
-    min-height: 210px;
-}
-/*endregion*/
-
-/*region entryDetail*/
-.entry-detail,
-.entry-detail-empty {
-    display: grid;
-    height: 100%;
-}
-
-.entry-detail {
-    grid-template-rows: auto 1fr;
-    row-gap: 24px;
-}
-
-.entry-detail-empty .info-text {
-    align-self: center;
-    justify-self: center;
-}
-
-.entry-detail .header,
-.entry-detail .form {
-    padding: 0 15px;
-}
-
-.entry-detail .header {
-    display: grid;
-    grid-template-columns: 1fr auto;
-}
-
-.entry-detail .header .h5 {
-    margin-bottom: 0;
-}
-
-.entry-detail .remove-btn {
-    display: inline-grid;
-    align-items: center;
-    justify-items: center;
-}
-
-.entry-detail .form {
-    display: grid;
-    grid-template-rows: auto auto 1fr auto;
-}
-
-.entry-detail .value-form-control {
-    height: calc(100% - 50px);
-}
-/*endregion*/
-          `}
-        </style>
-
-        <title>Deno KV Insights</title>
-      </Head>
-
-      <header class='header'>
+const KVInsightsApp: FunctionComponent<KVInsightsAppProps> = ({
+  initialEntries,
+}) => {
+  return (
+    <div class="page container">
+      <Meta title={`Deno KV Store`} canonical="/" />
+      <header class="header">
         <img
-          class='deno-logo'
-          src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Deno.svg/240px-Deno.svg.png'
+          class="deno-logo"
+          src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Deno.svg/240px-Deno.svg.png"
         />
-        <span class='title'>Deno KV Insights</span>
+        <span class="title">Deno KV Insights</span>
       </header>
 
       <main>
         <EntriesManagement initialEntries={initialEntries} />
       </main>
 
-      <footer class='footer'>
-        <a href='https://fresh.deno.dev'>
+      <footer class="footer">
+        <a href="https://fresh.deno.dev">
           <img
-            width='197'
-            height='37'
-            src='https://fresh.deno.dev/fresh-badge.svg'
-            alt='Made with Fresh'
+            width="197"
+            height="37"
+            src="https://fresh.deno.dev/fresh-badge.svg"
+            alt="Made with Fresh"
           />
         </a>
       </footer>
diff --git a/lib/entry/components/meta.tsx b/lib/entry/components/meta.tsx
new file mode 100644
index 0000000..2900601
--- /dev/null
+++ b/lib/entry/components/meta.tsx
@@ -0,0 +1,230 @@
+import { Head } from "$fresh/src/runtime/head.ts";
+
+interface MetaProps {
+  title: string;
+  canonical: string;
+}
+
+export function Meta({ title, canonical }: MetaProps) {
+  return (
+    <Head>
+      <title>{title}</title>
+      <meta name="robots" content="noindex" />
+      <link
+        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+        rel="stylesheet"
+        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
+        crossOrigin="anonymous"
+      />
+      <link
+        rel="canonical"
+        href={`https://erictherobot-deno-app-1.deno.dev${canonical}}`}
+      />
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/apple-touch-icon.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/favicon-32x32.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/favicon-16x16.png"
+      />
+      <link rel="manifest" href="/manifest.webmanifest" />
+      {/* Currently not needed to update the PWA but left here for reference */}
+      {/* <script type="module">
+        import
+        'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate/dist/pwa-update.js';
+        const el = document.createElement('pwa-update');
+        document.body.appendChild(el);
+      </script> */}
+      <style>{cssStyles()}</style>
+    </Head>
+  );
+}
+
+function cssStyles() {
+  return `
+    /*TODO: Move to css file when a package mechanism for Fresh is available */
+    /*region common*/
+    body {
+        height: 100vh;
+    }
+    
+    .page {
+        height: 100%;
+        display: grid;
+        grid-template-rows: 100px 1fr 100px;
+        row-gap: 25px;
+    }
+    
+    .header {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        column-gap: 5px;
+        align-items: center;
+        padding: 20px 0;
+    }
+    
+    .header .title {
+        font-size: 24px;
+        font-weight: bold;
+    }
+    
+    .deno-logo {
+        height: 65px;
+        width: 65px;
+    }
+    
+    .footer {
+        margin: auto;
+    }
+    
+    .resize-none {
+        resize: none;
+    }
+    /*endregion*/
+    
+    /*region entriesManagement*/
+    .entries-management {
+        height: 100%;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        column-gap: 25px;
+    }
+    
+    .entries-management .panel {
+        padding: 24px 9px;
+        border: solid var(--bs-border-color) 1px;
+        border-radius: var(--bs-border-radius);
+    }
+    
+    .entries-management .left-panel-container {
+        height: 100%;
+        display: grid;
+        grid-template-rows: auto 1fr;
+        grid-row-gap: 24px;
+    }
+    
+    .entries-management .action-container {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        column-gap: 24px;
+        padding: 0 15px;
+    }
+    
+    .entries-management .entries-list-container {
+        position: relative;
+    }
+    
+    .entries-management .entries-list-container .entries-list {
+        position: absolute;
+    }
+    
+    .entries-management .search-form-control {
+        max-width: 290px;
+    }
+    /*endregion*/
+    
+    /*region entriesList*/
+    .entries-list {
+        width: 100%;
+        height: 100%;
+        overflow-y: scroll;
+        padding: 0 15px;
+    }
+    
+    .entries-list .table {
+        table-layout: fixed;
+    }
+    
+    .entries-list .table-header {
+        position: sticky;
+        top: 0;
+    }
+    
+    .entries-list .empty-table {
+        display: grid;
+        height: 100%;
+    }
+    
+    .entries-list .empty-table .info-text {
+        align-self: center;
+        justify-self: center;
+        margin-bottom: 78px;
+    }
+    
+    .entries-list .table-row {
+        cursor: pointer;
+    }
+    
+    .entries-list .select-col {
+        width: 35px;
+    }
+    
+    .entries-list .type-col {
+        width: 140px;
+    }
+    /*endregion*/
+    
+    /*region createEntryModal*/
+    .create-entry-modal .value-form-control {
+        min-height: 210px;
+    }
+    /*endregion*/
+    
+    /*region entryDetail*/
+    .entry-detail,
+    .entry-detail-empty {
+        display: grid;
+        height: 100%;
+    }
+    
+    .entry-detail {
+        grid-template-rows: auto 1fr;
+        row-gap: 24px;
+    }
+    
+    .entry-detail-empty .info-text {
+        align-self: center;
+        justify-self: center;
+    }
+    
+    .entry-detail .header,
+    .entry-detail .form {
+        padding: 0 15px;
+    }
+    
+    .entry-detail .header {
+        display: grid;
+        grid-template-columns: 1fr auto;
+    }
+    
+    .entry-detail .header .h5 {
+        margin-bottom: 0;
+    }
+    
+    .entry-detail .remove-btn {
+        display: inline-grid;
+        align-items: center;
+        justify-items: center;
+    }
+    
+    .entry-detail .form {
+        display: grid;
+        grid-template-rows: auto auto 1fr auto;
+    }
+    
+    .entry-detail .value-form-control {
+        height: calc(100% - 50px);
+    }
+    /*endregion*/
+              `;
+}
diff --git a/lib/entry/routes/kvInsightsRoute.tsx b/lib/entry/routes/kvInsightsRoute.tsx
index 9187401..aaf31d0 100644
--- a/lib/entry/routes/kvInsightsRoute.tsx
+++ b/lib/entry/routes/kvInsightsRoute.tsx
@@ -1,10 +1,12 @@
-import { HandlerContext, Handlers } from '$fresh/src/server/types.ts';
-import { HTTPStrippedEntries } from '../models.ts';
-import { getAllEntries } from '../services/entryService.ts';
-import { createHTTPStrippedEntries } from './entriesRoute.ts';
-import KVInsightsApp from '../components/kvInsightsApp.tsx';
+import { HandlerContext, Handlers } from "$fresh/src/server/types.ts";
+import { HTTPStrippedEntries } from "../models.ts";
+import { getAllEntries } from "../services/entryService.ts";
+import { createHTTPStrippedEntries } from "./entriesRoute.ts";
+import KVInsightsApp from "../components/kvInsightsApp.tsx";
 
-export function KVInsightsAppRoute(props: { data: { entries: HTTPStrippedEntries } }) {
+export function KVInsightsAppRoute(props: {
+  data: { entries: HTTPStrippedEntries };
+}) {
   return <KVInsightsApp initialEntries={props.data.entries} />;
 }
 
diff --git a/routes/index.tsx b/routes/index.tsx
index bbbacde..ea70054 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -1,9 +1,11 @@
-import { HandlerContext } from '$fresh/src/server/types.ts';
+import { HandlerContext } from "$fresh/src/server/types.ts";
 import {
   KVInsightsAppRoute,
   KVInsightsAppRouteHandlers,
-} from '../lib/entry/routes/kvInsightsRoute.tsx';
+} from "../lib/entry/routes/kvInsightsRoute.tsx";
 
 export default KVInsightsAppRoute;
 
-export const handler = async (request, context: HandlerContext) => KVInsightsAppRouteHandlers.GET(request, context);
+// @ts-ignore we don't need to type check this function
+export const handler = async (request, context: HandlerContext) =>
+  await KVInsightsAppRouteHandlers.GET(request, context);
diff --git a/static/android-chrome-192x192.png b/static/android-chrome-192x192.png
new file mode 100644
index 0000000..a54f3a1
Binary files /dev/null and b/static/android-chrome-192x192.png differ
diff --git a/static/android-chrome-512x512.png b/static/android-chrome-512x512.png
new file mode 100644
index 0000000..ab6fb4d
Binary files /dev/null and b/static/android-chrome-512x512.png differ
diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png
new file mode 100644
index 0000000..feaad62
Binary files /dev/null and b/static/apple-touch-icon.png differ
diff --git a/static/favicon-16x16.png b/static/favicon-16x16.png
new file mode 100644
index 0000000..d45c507
Binary files /dev/null and b/static/favicon-16x16.png differ
diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png
new file mode 100644
index 0000000..309ddcb
Binary files /dev/null and b/static/favicon-32x32.png differ
diff --git a/static/favicon.ico b/static/favicon.ico
new file mode 100644
index 0000000..8eeca01
Binary files /dev/null and b/static/favicon.ico differ
diff --git a/static/manifest.webmanifest b/static/manifest.webmanifest
new file mode 100644
index 0000000..4f1a675
--- /dev/null
+++ b/static/manifest.webmanifest
@@ -0,0 +1,47 @@
+{
+  "name": "Deno KV Insights",
+  "short_name": "DKVI",
+  "theme_color": "#218CED",
+  "background_color": "#000000",
+  "display": "standalone",
+  "scope": "/",
+  "start_url": "/",
+  "orientation": "any",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon-16x16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon.ico",
+      "sizes": "48x48",
+      "type": "image/ico"
+    },
+    {
+      "src": "/favicon-32x32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "/mstile-150x150.png",
+      "sizes": "270x270",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/static/mstile-150x150.png b/static/mstile-150x150.png
new file mode 100644
index 0000000..2cb82e2
Binary files /dev/null and b/static/mstile-150x150.png differ
diff --git a/static/pwa-sw-register.ts b/static/pwa-sw-register.ts
new file mode 100644
index 0000000..57d65d1
--- /dev/null
+++ b/static/pwa-sw-register.ts
@@ -0,0 +1,14 @@
+// This is the service worker with the Advanced caching
+
+// Add this below content to your HTML page inside a <script type="module"></script> tag, or add the js file to your page at the very top to register service worker
+// If you get an error about not being able to import, double check that you have type="module" on your <script /> tag
+
+/*
+ This code uses the pwa-update web component https://github.com/pwa-builder/pwa-update to register your service worker,
+ tell the user when there is an update available and let the user know when your PWA is ready to use offline.
+*/
+
+// import "https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate";
+
+// const el = document.createElement("pwa-update");
+// document.body.appendChild(el);
diff --git a/static/pwa-sw.js b/static/pwa-sw.js
new file mode 100644
index 0000000..b9e553c
--- /dev/null
+++ b/static/pwa-sw.js
@@ -0,0 +1,75 @@
+importScripts(
+  "https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js"
+);
+
+const HTML_CACHE = "html";
+const JS_CACHE = "javascript";
+const STYLE_CACHE = "stylesheets";
+const IMAGE_CACHE = "images";
+const FONT_CACHE = "fonts";
+
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SKIP_WAITING") {
+    self.skipWaiting();
+  }
+});
+
+workbox.routing.registerRoute(
+  ({ event }) => event.request.destination === "document",
+  new workbox.strategies.NetworkFirst({
+    cacheName: HTML_CACHE,
+    plugins: [
+      new workbox.expiration.ExpirationPlugin({
+        maxEntries: 10,
+      }),
+    ],
+  })
+);
+
+workbox.routing.registerRoute(
+  ({ event }) => event.request.destination === "script",
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: JS_CACHE,
+    plugins: [
+      new workbox.expiration.ExpirationPlugin({
+        maxEntries: 15,
+      }),
+    ],
+  })
+);
+
+workbox.routing.registerRoute(
+  ({ event }) => event.request.destination === "style",
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: STYLE_CACHE,
+    plugins: [
+      new workbox.expiration.ExpirationPlugin({
+        maxEntries: 15,
+      }),
+    ],
+  })
+);
+
+workbox.routing.registerRoute(
+  ({ event }) => event.request.destination === "image",
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: IMAGE_CACHE,
+    plugins: [
+      new workbox.expiration.ExpirationPlugin({
+        maxEntries: 15,
+      }),
+    ],
+  })
+);
+
+workbox.routing.registerRoute(
+  ({ event }) => event.request.destination === "font",
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: FONT_CACHE,
+    plugins: [
+      new workbox.expiration.ExpirationPlugin({
+        maxEntries: 15,
+      }),
+    ],
+  })
+);
