diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index daaa5ee..dd9d6f9 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,6 +1,7 @@
 {
   "recommendations": [
     "arcanis.vscode-zipfs",
+    "bradlc.vscode-tailwindcss",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode"
   ]
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6278784..6cbd3e9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,10 +1,13 @@
 {
-  "search.exclude": {
-    "**/.yarn": true,
-    "**/.pnp.*": true
+  "editor.quickSuggestions": {
+    "strings": true
   },
   "eslint.nodePath": ".yarn/sdks",
   "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
-  "typescript.tsdk": ".yarn/sdks/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "search.exclude": {
+    "**/.pnp.*": true,
+    "**/.yarn": true
+  },
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "typescript.tsdk": ".yarn/sdks/typescript/lib"
 }
diff --git a/README.md b/README.md
index 291720b..68aa9b4 100644
--- a/README.md
+++ b/README.md
@@ -28,15 +28,15 @@ concept playground for yet another RAW photo library and editor made with web te
 
 ### Inspiration
 
-| Editor                                          | Notes                                                                                                 |
-| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
-| [Capture One](https://www.captureone.com/de)    | + great user interface<br>+ license without subscription available                                    |
-| [Darktable](https://www.darktable.org/)         | + powerful editing modules<br>+ xmp sidecar file <br>- steep learning curve (filmic)                  |
-| [FastRawViewer](https://www.fastrawviewer.com/) | + histogram based on RAW edits                                                                        |
-| [Lightroom CC](https://lightroom.adobe.com/)    | + great user interface<br>+ powerful editing algorithms<br>- expensive subscriptions for personal use |
-| [Luminar](https://skylum.com/luminar)           | + great user interface<br>- slow processing speed<br>- broken gallery thumbnails                      |
-| [Picturama](https://picturama.github.io/)       | + built with [Electron](https://www.electronjs.org/)<br>+ fast and easy to use                        |
-| [RawTherapee](https://rawtherapee.com/)         | - steep learning curve                                                                                |
+| Editor                                                                                       | Notes                                                                                                 |
+| -------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| [Capture One](https://www.captureone.com/de)                                                 | + great user interface<br>+ license without subscription available                                    |
+| [Darktable](https://www.darktable.org/) ([Repo](https://github.com/darktable-org/darktable)) | + powerful editing modules<br>+ xmp sidecar file <br>- steep learning curve (filmic)                  |
+| [FastRawViewer](https://www.fastrawviewer.com/)                                              | + histogram based on RAW edits                                                                        |
+| [Lightroom CC](https://lightroom.adobe.com/)                                                 | + great user interface<br>+ powerful editing algorithms<br>- expensive subscriptions for personal use |
+| [Luminar](https://skylum.com/luminar)                                                        | + great user interface<br>- slow processing speed<br>- broken gallery thumbnails                      |
+| [Picturama](https://picturama.github.io/) ([Repo](https://github.com/picturama/picturama))   | + built with [Electron](https://www.electronjs.org/)<br>+ fast and easy to use                        |
+| [RawTherapee](https://rawtherapee.com/) ([Repo](https://github.com/Beep6581/RawTherapee))    | - steep learning curve                                                                                |
 
 ## Development
 
@@ -62,8 +62,8 @@ nano packages/app/.env
 # create development database (also: https://www.prisma.io/docs/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-postgres)
 npx prisma migrate dev --name init
 
-# start up the application
-yarn start:app
+# start up the Electron application
+yarn start
 
 # create a new component
 yarn new
diff --git a/package.json b/package.json
index e9489a6..56493c9 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "lint": "eslint . --fix --format=codeframe",
     "new": "plop",
     "postinstall": "husky install",
-    "start:app": "yarn workspace app start"
+    "start": "yarn workspace app start"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.12.1",
diff --git a/packages/app/src/catalog/Catalog.ts b/packages/app/src/catalog/Catalog.ts
index 99c4c37..732798b 100644
--- a/packages/app/src/catalog/Catalog.ts
+++ b/packages/app/src/catalog/Catalog.ts
@@ -32,7 +32,7 @@ const addFiles = (files: string[] = []) => {
     });
   });
 
-  notifyFilesAdded(files?.length);
+  files?.length > 0 && notifyFilesAdded(files?.length);
 };
 
 const getFiles = async () => {
diff --git a/packages/app/src/catalog/PhotoGrid.tsx b/packages/app/src/catalog/PhotoGrid.tsx
index 0521a55..8fee511 100644
--- a/packages/app/src/catalog/PhotoGrid.tsx
+++ b/packages/app/src/catalog/PhotoGrid.tsx
@@ -2,10 +2,10 @@ import React, { FunctionComponent, useEffect, useState } from 'react';
 import Rawdicchio from '../core/Rawdicchio';
 
 export interface PhotoGridProps {
-  label?: string;
+  className?: string;
 }
 
-const PhotoGrid: FunctionComponent<PhotoGridProps> = () => {
+const PhotoGrid: FunctionComponent<PhotoGridProps> = ({ className }) => {
   const [files, setFiles] = useState<string[]>();
 
   useEffect(() => {
@@ -20,22 +20,22 @@ const PhotoGrid: FunctionComponent<PhotoGridProps> = () => {
 
   // photo grid: https://css-tricks.com/adaptive-photo-layout-with-flexbox/
   return (
-    <>
+    <div className={className}>
       <button onClick={openDialog}>Click to add images</button>
       <h1>2022-02-22</h1>
-      <ul className="flex flex-wrap gap-0.5 list-none">
+      <div className="flex flex-wrap gap-1 list-none overflow-y-auto">
         {files?.map((file, index) => (
-          <li className="flex-auto h-[33vh]" key={`${index}-${file}`}>
+          <li className="flex-auto h-72 max-w-[50%]" key={`${index}-${file}`}>
             <img
               alt={file}
-              className="align-bottom max-h-full min-w-full object-cover"
+              className="align-bottom max-h-full min-h-full min-w-full object-cover"
               src={`file://${file}`}
               title={file}
             />
           </li>
         ))}
-      </ul>
-    </>
+      </div>
+    </div>
   );
 };
 
diff --git a/packages/app/src/core/App.tsx b/packages/app/src/core/App.tsx
index 6e8934a..8bab580 100644
--- a/packages/app/src/core/App.tsx
+++ b/packages/app/src/core/App.tsx
@@ -7,11 +7,11 @@ import PhotoGrid from '../catalog/PhotoGrid';
 
 const App: FunctionComponent = () => {
   return (
-    <ul className="bg-gray-800 text-white">
-      <h1>Photo catalog</h1>
-      <hr />
-      <PhotoGrid />
-    </ul>
+    <div className="bg-gray-800 font-sans gap-2 grid grid-cols-6 h-screen text-white">
+      <div>sidebar right</div>
+      <PhotoGrid className="col-span-4" />
+      <div>sidebar right</div>
+    </div>
   );
 };
 
diff --git a/packages/app/src/core/electronMain.ts b/packages/app/src/core/electronMain.ts
index 1a7db9e..18b9051 100644
--- a/packages/app/src/core/electronMain.ts
+++ b/packages/app/src/core/electronMain.ts
@@ -1,4 +1,7 @@
 import { app, BrowserWindow, protocol } from 'electron';
+import installExtension, {
+  REACT_DEVELOPER_TOOLS,
+} from 'electron-devtools-installer';
 import path from 'path';
 
 import { registerCatalog } from '../catalog/Catalog';
@@ -12,6 +15,7 @@ const createWindow = (): BrowserWindow => {
     height: 800,
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
+      // consider fixing: https://www.electronjs.org/docs/latest/tutorial/security#6-do-not-disable-websecurity
       webSecurity: false,
     },
     width: 1200,
@@ -35,6 +39,8 @@ app
   })
   .whenReady()
   .then(() => {
+    !app.isPackaged && installExtension(REACT_DEVELOPER_TOOLS);
+
     protocol.registerFileProtocol('file', (request, callback) => {
       const pathname = decodeURIComponent(request.url.replace('file:///', ''));
       callback(pathname);
diff --git a/yarn.lock b/yarn.lock
index 3b8a547..0822007 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6906,14 +6906,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-parse@npm:^1.0.6":
-  version: 1.0.6
-  resolution: "path-parse@npm:1.0.6"
-  checksum: 962a85dd384d68d469ec5ba4010df8f8f9b7e936ce603bbe3211476c5615feb3c2b1ca61211a78445fadc833f0b1a86ea6484c861035ec4ac93011ba9aff9a11
-  languageName: node
-  linkType: hard
-
-"path-parse@npm:^1.0.7":
+"path-parse@npm:^1.0.6, path-parse@npm:^1.0.7":
   version: 1.0.7
   resolution: "path-parse@npm:1.0.7"
   checksum: 49abf3d81115642938a8700ec580da6e830dde670be21893c62f4e10bd7dd4c3742ddc603fe24f898cba7eb0c6bc1777f8d9ac14185d34540c6d4d80cd9cae8a