release: 0.13.1

fix: empty file can't be uploaded in chrome
release: 0.13.0
2023-03-14 20:26:04 +01:00 · 2023-03-14 20:24:21 +01:00 · 2023-03-14 16:09:20 +01:00 · 2023-03-14 16:08:57 +01:00 · 2023-03-14 15:47:42 +01:00 · 2023-03-14 15:36:35 +01:00
102 changed files with 4768 additions and 1975 deletions
--- a/.github/ISSUE_TEMPLATE/question.yml
+++ b/.github/ISSUE_TEMPLATE/question.yml
@@ -0,0 +1,17 @@
+name: ❓ Question
+description: "Submit a question"
+title: "❓ Question:"
+labels: [question]
+body:
+  - type: textarea
+    id: feature-description
+    validations:
+      required: true
+    attributes:
+      label: "🙋‍♂️ Question"
+      description: "A clear question. Please provide as much detail as possible."
+      placeholder: "How do I ...?"
+  - type: markdown
+    attributes:
+      value: |
+        Before submitting, please check if the question hasn't been asked before.
--- a/.gitignore
+++ b/.gitignore
@@ -39,4 +39,4 @@ yarn-error.log*
 /data/

 # Jetbrains specific (webstorm)
-.idea/**/**
+.idea/**/**
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,81 @@
+### [0.13.1](https://github.com/stonith404/pingvin-share/compare/v0.13.0...v0.13.1) (2023-03-14)
+
+
+### Bug Fixes
+
+* empty file can't be uploaded in chrome ([9f2097e](https://github.com/stonith404/pingvin-share/commit/9f2097e788dfb79c2f95085025934c3134a3eb38))
+
+## [0.13.0](https://github.com/stonith404/pingvin-share/compare/v0.12.1...v0.13.0) (2023-03-14)
+
+
+### Features
+
+* add preview modal ([c807d20](https://github.com/stonith404/pingvin-share/commit/c807d208d8f0518f6390f9f0f3d0eb00c12d213b))
+* sort shared files ([b25c30d](https://github.com/stonith404/pingvin-share/commit/b25c30d1ed57230096b17afaf8545c7b0ef2e4b1))
+
+
+### Bug Fixes
+
+* replace "pingvin share" with dynamic app name ([f55aa80](https://github.com/stonith404/pingvin-share/commit/f55aa805167f31864cb07e269a47533927cb533c))
+* set password manually input not shown ([8ff417a](https://github.com/stonith404/pingvin-share/commit/8ff417a013a45a777308f71c4f0d1817bfeed6be))
+* show line breaks in txt preview ([37e765d](https://github.com/stonith404/pingvin-share/commit/37e765ddc7b19554bc6fb50eb969984b58bf3cc5))
+* upload file if it is 0 bytes ([f82099f](https://github.com/stonith404/pingvin-share/commit/f82099f36eb4699385fc16dfb0e0c02e5d55b1e3))
+
+### [0.12.1](https://github.com/stonith404/pingvin-share/compare/v0.12.0...v0.12.1) (2023-03-11)
+
+
+### Bug Fixes
+
+* 48px icon does not update ([753dbe8](https://github.com/stonith404/pingvin-share/commit/753dbe83b770814115a2576c7a50e1bac9dc8ce1))
+
+## [0.12.0](https://github.com/stonith404/pingvin-share/compare/v0.11.1...v0.12.0) (2023-03-10)
+
+
+### Features
+
+* ability to change logo in frontend ([8403d7e](https://github.com/stonith404/pingvin-share/commit/8403d7e14ded801c3842a9b3fd87c3f6824c519e))
+
+
+### Bug Fixes
+
+* crypto is not defined ([8f71fd3](https://github.com/stonith404/pingvin-share/commit/8f71fd343506506532c1a24a4c66a16b1021705f))
+* home page shown even if disabled ([3ad6b03](https://github.com/stonith404/pingvin-share/commit/3ad6b03b6bd80168870049582683077b689fa548))
+
+### [0.11.1](https://github.com/stonith404/pingvin-share/compare/v0.11.0...v0.11.1) (2023-03-05)
+
+
+### Bug Fixes
+
+* old config variable prevents to create a share ([8b77e81](https://github.com/stonith404/pingvin-share/commit/8b77e81d4c1b8a2bf798595f5a66079c40734e09))
+
+## [0.11.0](https://github.com/stonith404/pingvin-share/compare/v0.10.2...v0.11.0) (2023-03-04)
+
+
+### Features
+
+* custom branding ([#112](https://github.com/stonith404/pingvin-share/issues/112)) ([fddad3e](https://github.com/stonith404/pingvin-share/commit/fddad3ef708c27052a8bf46f3076286d102f6d7e))
+* invite new user with email ([f984050](https://github.com/stonith404/pingvin-share/commit/f9840505b82fcb04364a79576f186b76cc75f5c0))
+
+
+### Bug Fixes
+
+* frontend error when user deleted ([0317f3a](https://github.com/stonith404/pingvin-share/commit/0317f3a508dc88ffe2c33413704f7df03a2372ea))
+
+### [0.10.2](https://github.com/stonith404/pingvin-share/compare/v0.10.1...v0.10.2) (2023-02-13)
+
+
+### Bug Fixes
+
+* pdf preview tries to render on server ([c3af0fe](https://github.com/stonith404/pingvin-share/commit/c3af0fe097582f69b63ed1ad18fb71bff334d32a))
+
+### [0.10.1](https://github.com/stonith404/pingvin-share/compare/v0.10.0...v0.10.1) (2023-02-12)
+
+
+### Bug Fixes
+
+* non administrator user redirection error while setup isn't finished ([dc8cf3d](https://github.com/stonith404/pingvin-share/commit/dc8cf3d5ca6b4f8a8f243b8e0b05e09738cf8b61))
+* setup wizard doesn't redirect after completion ([7cd9dff](https://github.com/stonith404/pingvin-share/commit/7cd9dff637900098c9f6e46ccade37283d47321b))
+
 ## [0.10.0](https://github.com/stonith404/pingvin-share/compare/v0.9.0...v0.10.0) (2023-02-10)


--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -8,62 +8,55 @@ You've found a bug, have suggestion or something else, just create an issue on G

 ## Submit a Pull Request

-Once you created a issue and you want to create a pull request, follow this guide.
+Before you submit the pull request for review please ensure that

-Branch naming convention is as following
+- The pull request naming follows the [Conventional Commits specification](https://www.conventionalcommits.org):

-`TYPE-ISSUE_ID-DESCRIPTION`
+  `<type>[optional scope]: <description>`

-example:
+  example:
+
+  ```
+  feat(share): add password protection
+  ```
+
+  When `TYPE` can be:
+
+  - **feat** - is a new feature
+  - **doc** - documentation only changes
+  - **fix** - a bug fix
+  - **refactor** - code change that neither fixes a bug nor adds a feature
+
+- Your pull request has a detailed description
+- You run `npm run format` to format the code
+
+<details>
+  <summary>Don't know how to create a pull request? Learn how to create a pull request</summary>
+
+1. Create a fork of the repository by clicking on the `Fork` button in the Pingvin Share repository
+
+2. Clone your fork to your machine with `git clone`

 ```
-feat-69-ability-to-set-share-expiration-to-never
-```
-
-When `TYPE` can be:
-
- **feat** - is a new feature
- **doc** - documentation only changes
- **fix** - a bug fix
- **refactor** - code change that neither fixes a bug nor adds a feature
-
-**All PRs must include a commit message with the changes description!**
-
-For the initial start, fork the project and use the `git clone` command to download the repository to your computer. A standard procedure for working on an issue would be to:
-
-1. `git pull`, before creating a new branch, pull the changes from upstream. Your master needs to be up to date.
-
-```
-$ git pull
-```
-
-2. Create new branch from `main` like: `feat-69-ability-to-set-share-expiration-to-never`<br/>
-
-```
-$ git checkout -b [name_of_your_new_branch]
+$ git clone https://github.com/[your_username]/pingvin-share
 ```

 3. Work - commit - repeat

-4. Before you push your changes, make sure you run the linter and format the code.
-
-```bash
-npm run lint
-npm run format
-```
-
-5. Push changes to GitHub
+4. Push changes to GitHub

 ```
 $ git push origin [name_of_your_new_branch]
 ```

-6. Submit your changes for review
+5. Submit your changes for review
   If you go to your repository on GitHub, you'll see a `Compare & pull request` button. Click on that button.
-7. Start a Pull Request
-   Now submit the pull request and click on `Create pull request`.
+6. Start a Pull Request
+7. Now submit the pull request and click on `Create pull request`.
 8. Get a code review approval/reject

+</details>
+
 ## Setup project

 Pingvin Share consists of a frontend and a backend.
--- a/15
+++ b/15
@@ -1,26 +1,26 @@
 # Using node slim because prisma ORM needs libc for ARM builds

 # Stage 1: on frontend dependency change
-FROM node:18-slim AS frontend-dependencies
+FROM node:19-slim AS frontend-dependencies
 WORKDIR /opt/app
 COPY frontend/package.json frontend/package-lock.json ./
 RUN npm ci

 # Stage 2: on frontend change
-FROM node:18-slim AS frontend-builder
+FROM node:19-slim AS frontend-builder
 WORKDIR /opt/app
 COPY ./frontend .
 COPY --from=frontend-dependencies /opt/app/node_modules ./node_modules
 RUN npm run build

 # Stage 3: on backend dependency change
-FROM node:18-slim AS backend-dependencies
+FROM node:19-slim AS backend-dependencies
 WORKDIR /opt/app
 COPY backend/package.json backend/package-lock.json ./
 RUN npm ci

 # Stage 4:on backend change
-FROM node:18-slim AS backend-builder
+FROM node:19-slim AS backend-builder
 RUN apt-get update && apt-get install -y openssl
 WORKDIR /opt/app
 COPY ./backend .
@@ -29,16 +29,15 @@ RUN npx prisma generate
 RUN npm run build  && npm prune --production

 # Stage 5: Final image
-FROM node:18-slim AS runner
+FROM node:19-slim AS runner
 ENV NODE_ENV=docker
 RUN apt-get update && apt-get install -y openssl

 WORKDIR /opt/app/frontend
 COPY --from=frontend-builder /opt/app/public ./public
-# Automatically leverage output traces to reduce image size
-# https://nextjs.org/docs/advanced-features/output-file-tracing
 COPY --from=frontend-builder /opt/app/.next/standalone ./
 COPY --from=frontend-builder /opt/app/.next/static ./.next/static
+COPY --from=frontend-builder /opt/app/public/img /tmp/img

 WORKDIR /opt/app/backend
 COPY --from=backend-builder /opt/app/node_modules ./node_modules
@@ -48,4 +47,4 @@ COPY --from=backend-builder /opt/app/package.json ./

 WORKDIR /opt/app
 EXPOSE 3000
-CMD node frontend/server.js & cd backend && npm run prod
+CMD cp -rn /tmp/img /opt/app/frontend/public && node frontend/server.js & cd backend && npm run prod
--- a/README.md
+++ b/README.md
@@ -4,36 +4,66 @@ Pingvin Share is self-hosted file sharing platform and an alternative for WeTran

 ## ✨ Features

- Create a share with files that you can access with a link
- No file size limit, only your disk will be your limit
- Set a share expiration
- Optionally secure your share with a visitor limit and a password
- Email recepients
- ClamAV integration
+- Share files using a link
+- Unlimited file size (restricted only by disk space)
+- Set an expiration date for shares
+- Secure shares with visitor limits and passwords
+- Email recipients
+- Integration with ClamAV for security scans

 ## 🐧 Get to know Pingvin Share

 - [Demo](https://pingvin-share.dev.eliasschneider.com)
 - [Review by DB Tech](https://www.youtube.com/watch?v=rWwNeZCOPJA)

-<img src="https://user-images.githubusercontent.com/58886915/167101708-b85032ad-f5b1-480a-b8d7-ec0096ea2a43.png" width="700"/>
+<img src="https://user-images.githubusercontent.com/58886915/225038319-b2ef742c-3a74-4eb6-9689-4207a36842a4.png" width="700"/>

 ## ⌨️ Setup

-> Pleas note that Pingvin Share is in early stage and could include some bugs
+> Note: Pingvin Share is in its early stages and may contain bugs.

-### Recommended installation
+### Installation with Docker (recommended)

 1. Download the `docker-compose.yml` file
 2. Run `docker-compose up -d`

-The website is now listening available on `http://localhost:3000`, have fun with Pingvin Share 🐧!
+The website is now listening on `http://localhost:3000`, have fun with Pingvin Share 🐧!
+
+### Stand-alone Installation
+
+Required tools:
+
+- [Node.js](https://nodejs.org/en/download/) >= 16
+- [Git](https://git-scm.com/downloads)
+- [pm2](https://pm2.keymetrics.io/) for running Pingvin Share in the background
+
+```bash
+git clone https://github.com/stonith404/pingvin-share
+cd pingvin-share
+
+# Checkout the latest version
+git fetch --tags && git checkout $(git describe --tags `git rev-list --tags --max-count=1`)
+
+# Start the backend
+cd backend
+npm install
+npm run build
+pm2 start --name="pingvin-share-backend" npm -- run prod
+
+# Start the frontend
+cd ../frontend
+npm install
+npm run build
+pm2 start --name="pingvin-share-frontend" npm -- run start
+```
+
+The website is now listening on `http://localhost:3000`, have fun with Pingvin Share 🐧!

 ### Integrations

-#### ClamAV
+#### ClamAV (Docker only)

-With ClamAV the shares get scanned for malicious files and get removed if any found.
+ClamAV is used to scan shares for malicious files and remove them if found.

 1. Add the ClamAV container to the Docker Compose stack (see `docker-compose.yml`) and start the container.
 2. Docker will wait for ClamAV to start before starting Pingvin Share. This may take a minute or two.
@@ -47,7 +77,26 @@ Please note that ClamAV needs a lot of [ressources](https://docs.clamav.net/manu

 ### Upgrade to a new version

-Run `docker compose pull && docker compose up -d` to update your docker container
+As Pingvin Share is in early stage, see the release notes for breaking changes before upgrading.
+
+#### Docker
+
+```bash
+docker compose pull
+docker compose up -d
+```
+
+#### Stand-alone
+
+1. Remove the running app
+   ```
+   pm2 delete pingvin-share-backend pingvin-share-frontend
+   ```
+2. Repeat the steps from the [installation guide](#stand-alone-installation) except the `git clone` step.
+
+### Custom branding
+
+You can change the name and the logo of the app by visiting the admin configuration page.

 ## 🖤 Contribute

--- a/backend/package-lock.json
+++ b/backend/package-lock.json
--- a/backend/package.json
+++ b/backend/package.json
@@ -1,6 +1,6 @@
 {
  "name": "pingvin-share-backend",
-  "version": "0.10.0",
+  "version": "0.13.1",
  "scripts": {
    "build": "nest build",
    "dev": "cross-env NODE_ENV=development nest start --watch",
@@ -13,65 +13,68 @@
    "seed": "ts-node prisma/seed/config.seed.ts"
  },
  "dependencies": {
-    "@nestjs/common": "^9.2.1",
-    "@nestjs/config": "^2.2.0",
-    "@nestjs/core": "^9.2.1",
-    "@nestjs/jwt": "^10.0.1",
-    "@nestjs/passport": "^9.0.0",
-    "@nestjs/platform-express": "^9.2.1",
-    "@nestjs/schedule": "^2.1.0",
+    "@nestjs/common": "^9.3.9",
+    "@nestjs/config": "^2.3.1",
+    "@nestjs/core": "^9.3.9",
+    "@nestjs/jwt": "^10.0.2",
+    "@nestjs/passport": "^9.0.3",
+    "@nestjs/platform-express": "^9.3.9",
+    "@nestjs/schedule": "^2.2.0",
    "@nestjs/swagger": "^6.2.1",
-    "@nestjs/throttler": "^3.1.0",
-    "@prisma/client": "^4.8.1",
+    "@nestjs/throttler": "^4.0.0",
+    "@prisma/client": "^4.11.0",
    "archiver": "^5.3.1",
    "argon2": "^0.30.3",
-    "body-parser": "^1.20.1",
+    "body-parser": "^1.20.2",
    "clamscan": "^2.1.2",
    "class-transformer": "^0.5.1",
-    "class-validator": "^0.13.2",
+    "class-validator": "^0.14.0",
    "content-disposition": "^0.5.4",
    "cookie-parser": "^1.4.6",
    "mime-types": "^2.1.35",
    "moment": "^2.29.4",
-    "nodemailer": "^6.9.0",
+    "nodemailer": "^6.9.1",
    "otplib": "^12.0.1",
    "passport": "^0.6.0",
    "passport-jwt": "^4.0.1",
    "passport-local": "^1.0.0",
    "qrcode-svg": "^1.1.0",
    "reflect-metadata": "^0.1.13",
-    "rimraf": "^4.0.4",
+    "rimraf": "^4.4.0",
    "rxjs": "^7.8.0",
+    "sharp": "^0.31.3",
    "ts-node": "^10.9.1"
  },
  "devDependencies": {
-    "@nestjs/cli": "^9.1.8",
+    "@nestjs/cli": "^9.2.0",
    "@nestjs/schematics": "^9.0.4",
-    "@nestjs/testing": "^9.2.1",
+    "@nestjs/testing": "^9.3.9",
    "@types/archiver": "^5.3.1",
    "@types/clamscan": "^2.0.4",
    "@types/cookie-parser": "^1.4.3",
    "@types/cron": "^2.0.0",
-    "@types/express": "^4.17.15",
+    "@types/express": "^4.17.17",
    "@types/mime-types": "^2.1.1",
-    "@types/node": "^18.11.18",
+    "@types/multer": "^1.4.7",
+    "@types/node": "^18.15.0",
    "@types/nodemailer": "^6.4.7",
    "@types/passport-jwt": "^3.0.8",
    "@types/qrcode-svg": "^1.1.1",
+    "@types/sharp": "^0.31.1",
    "@types/supertest": "^2.0.12",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.48.1",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
    "cross-env": "^7.0.3",
-    "eslint": "^8.31.0",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint": "^8.35.0",
+    "eslint-config-prettier": "^8.7.0",
    "eslint-plugin-prettier": "^4.2.1",
    "newman": "^5.3.2",
-    "prettier": "^2.8.2",
-    "prisma": "^4.9.0",
+    "prettier": "^2.8.4",
+    "prisma": "^4.11.0",
    "source-map-support": "^0.5.21",
    "ts-loader": "^9.4.2",
    "tsconfig-paths": "4.1.2",
-    "typescript": "^4.9.4",
+    "typescript": "^4.9.5",
    "wait-on": "^7.0.1"
  }
 }
--- a/backend/prisma/migrations/20230303091601_v0_11_0/migration.sql
+++ b/backend/prisma/migrations/20230303091601_v0_11_0/migration.sql
@@ -0,0 +1,94 @@
+/*
+  Warnings:
+
+  - The primary key for the `Config` table will be changed. If it partially fails, the table could be left without primary key constraint.
+  - You are about to drop the column `key` on the `Config` table. All the data in the column will be lost.
+  - Added the required column `name` to the `Config` table without a default value. This is not possible if the table is not empty.
+
+*/
+
+-- RedefineTables
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_Config" (
+    "updatedAt" DATETIME NOT NULL,
+    "name" TEXT NOT NULL,
+    "category" TEXT NOT NULL,
+    "type" TEXT NOT NULL,
+    "value" TEXT NOT NULL,
+    "description" TEXT NOT NULL,
+    "obscured" BOOLEAN NOT NULL DEFAULT false,
+    "secret" BOOLEAN NOT NULL DEFAULT true,
+    "locked" BOOLEAN NOT NULL DEFAULT false,
+    "order" INTEGER NOT NULL,
+
+    PRIMARY KEY ("name", "category")
+);
+-- INSERT INTO "new_Config" ("category", "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value") SELECT "category", "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value" FROM "Config";
+
+INSERT INTO new_Config ("category", "name" , "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value")
+SELECT 'internal', 'jwtSecret', "description", "locked", "obscured", 0, "secret", "type", "updatedAt", "value" FROM Config WHERE key = 'JWT_SECRET';
+
+INSERT INTO new_Config ("category", "name" , "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value")
+SELECT 'general', 'appUrl', "description", "locked", "obscured", 1, "secret", "type", "updatedAt", "value" FROM Config WHERE key = 'APP_URL';
+
+INSERT INTO new_Config ("category", "name" , "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value")
+SELECT 'general', 'showHomePage', "description", "locked", "obscured", 2, "secret", "type", "updatedAt", "value" FROM Config WHERE key = 'SHOW_HOME_PAGE';
+
+INSERT INTO new_Config ("category", "name" , "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value")
+SELECT 'share', 'allowRegistration', "description", "locked", "obscured", 0, "secret", "type", "updatedAt", "value" FROM Config WHERE key = 'ALLOW_REGISTRATION';
+
+INSERT INTO new_Config ("category", "name" , "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value")
+SELECT 'share', 'allowUnauthenticatedShares', "description", "locked", "obscured", 1, "secret", "type", "updatedAt", "value" FROM Config WHERE key = 'ALLOW_UNAUTHENTICATED_SHARES';
+
+INSERT INTO new_Config ("category", "name" , "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value")
+SELECT 'share', 'maxSize', "description", "locked", "obscured", 1, "secret", "type", "updatedAt", "value" FROM Config WHERE key = 'MAX_SHARE_SIZE';
+
+INSERT INTO new_Config ("category", "name" , "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value")
+SELECT 'email', 'enableShareEmailRecipients', "description", "locked", "obscured", 1, "secret", "type", "updatedAt", "value" FROM Config WHERE key = 'ENABLE_SHARE_EMAIL_RECIPIENTS';
+
+INSERT INTO new_Config ("category", "name" , "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value")
+SELECT 'email', 'shareRecipientsSubject', "description", "locked", "obscured", 2, "secret", "type", "updatedAt", "value" FROM Config WHERE key = 'SHARE_RECEPIENTS_EMAIL_SUBJECT';
+
+INSERT INTO new_Config ("category", "name" , "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value")
+SELECT 'email', 'shareRecipientsMessage', "description", "locked", "obscured", 3, "secret", "type", "updatedAt", "value" FROM Config WHERE key = 'SHARE_RECEPIENTS_EMAIL_MESSAGE';
+
+INSERT INTO new_Config ("category", "name" , "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value")
+SELECT 'email', 'reverseShareSubject', "description", "locked", "obscured", 4, "secret", "type", "updatedAt", "value" FROM Config WHERE key = 'REVERSE_SHARE_EMAIL_SUBJECT';
+
+INSERT INTO new_Config ("category", "name" , "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value")
+SELECT 'email', 'reverseShareMessage', "description", "locked", "obscured", 5, "secret", "type", "updatedAt", "value" FROM Config WHERE key = 'REVERSE_SHARE_EMAIL_MESSAGE';
+
+INSERT INTO new_Config ("category", "name" , "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value")
+SELECT 'email', 'resetPasswordSubject', "description", "locked", "obscured", 6, "secret", "type", "updatedAt", "value" FROM Config WHERE key = 'RESET_PASSWORD_EMAIL_SUBJECT';
+
+INSERT INTO new_Config ("category", "name" , "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value")
+SELECT 'email', 'resetPasswordMessage', "description", "locked", "obscured", 1, "secret", "type", "updatedAt", "value" FROM Config WHERE key = 'RESET_PASSWORD_EMAIL_MESSAGE';
+
+INSERT INTO new_Config ("category", "name" , "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value")
+SELECT 'smtp', 'enabled', "description", "locked", "obscured", 1, "secret", "type", "updatedAt", "value" FROM Config WHERE key = 'SMTP_ENABLED';
+
+
+INSERT INTO new_Config ("category", "name" , "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value")
+SELECT 'smtp', 'host', "description", "locked", "obscured", 1, "secret", "type", "updatedAt", "value" FROM Config WHERE key = 'SMTP_HOST';
+
+
+INSERT INTO new_Config ("category", "name" , "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value")
+SELECT 'smtp', 'port', "description", "locked", "obscured", 1, "secret", "type", "updatedAt", "value" FROM Config WHERE key = 'SMTP_PORT';
+
+
+INSERT INTO new_Config ("category", "name" , "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value")
+SELECT 'smtp', 'email', "description", "locked", "obscured", 1, "secret", "type", "updatedAt", "value" FROM Config WHERE key = 'SMTP_EMAIL';
+
+
+INSERT INTO new_Config ("category", "name" , "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value")
+SELECT 'smtp', 'username', "description", "locked", "obscured", 1, "secret", "type", "updatedAt", "value" FROM Config WHERE key = 'SMTP_USERNAME';
+
+
+INSERT INTO new_Config ("category", "name" , "description", "locked", "obscured", "order", "secret", "type", "updatedAt", "value")
+SELECT 'smtp', 'password', "description", "locked", "obscured", 1, "secret", "type", "updatedAt", "value" FROM Config WHERE key = 'SMTP_PASSWORD';
+
+
+DROP TABLE "Config";
+ALTER TABLE "new_Config" RENAME TO "Config";
+PRAGMA foreign_key_check;
+PRAGMA foreign_keys=ON;
--- a/backend/prisma/schema.prisma
+++ b/backend/prisma/schema.prisma
@@ -131,13 +131,15 @@ model ShareSecurity {
 model Config {
  updatedAt DateTime @updatedAt

-  key         String  @id
+  name        String
+  category    String
  type        String
  value       String
  description String
-  category    String
  obscured    Boolean @default(false)
  secret      Boolean @default(true)
  locked      Boolean @default(false)
  order       Int
+
+  @@id([name, category])
 }
--- a/backend/prisma/seed/config.seed.ts
+++ b/backend/prisma/seed/config.seed.ts
@@ -1,242 +1,244 @@
 import { Prisma, PrismaClient } from "@prisma/client";
 import * as crypto from "crypto";

-const configVariables: Prisma.ConfigCreateInput[] = [
-  {
-    order: 0,
-    key: "SETUP_STATUS",
-    description: "Status of the setup wizard",
-    type: "string",
-    value: "STARTED", // STARTED, REGISTERED, FINISHED
-    category: "internal",
-    secret: false,
-    locked: true,
+const configVariables: ConfigVariables = {
+  internal: {
+    jwtSecret: {
+      description: "Long random string used to sign JWT tokens",
+      type: "string",
+      value: crypto.randomBytes(256).toString("base64"),
+      locked: true,
+    },
  },
-  {
-    order: 0,
-    key: "JWT_SECRET",
-    description: "Long random string used to sign JWT tokens",
-    type: "string",
-    value: crypto.randomBytes(256).toString("base64"),
-    category: "internal",
-    locked: true,
-  },
-  {
-    order: 1,
-    key: "APP_URL",
-    description: "On which URL Pingvin Share is available",
-    type: "string",
-    value: "http://localhost:3000",
-    category: "general",
-    secret: false,
-  },
-  {
-    order: 2,
-    key: "SHOW_HOME_PAGE",
-    description: "Whether to show the home page",
-    type: "boolean",
-    value: "true",
-    category: "general",
-    secret: false,
-  },
-  {
-    order: 3,
-    key: "ALLOW_REGISTRATION",
-    description: "Whether registration is allowed",
-    type: "boolean",
-    value: "true",
-    category: "share",
-    secret: false,
-  },
-  {
-    order: 4,
-    key: "ALLOW_UNAUTHENTICATED_SHARES",
-    description: "Whether unauthorized users can create shares",
-    type: "boolean",
-    value: "false",
-    category: "share",
-    secret: false,
-  },
-  {
-    order: 5,
+  general: {
+    appName: {
+      description: "Name of the application",
+      type: "string",
+      value: "Pingvin Share",
+      secret: false,
+    },
+    appUrl: {
+      description: "On which URL Pingvin Share is available",
+      type: "string",
+      value: "http://localhost:3000",

-    key: "MAX_SHARE_SIZE",
-    description: "Maximum share size in bytes",
-    type: "number",
-    value: "1073741824",
-    category: "share",
-    secret: false,
+      secret: false,
+    },
+    showHomePage: {
+      description: "Whether to show the home page",
+      type: "boolean",
+      value: "true",
+      secret: false,
+    },
  },
+  share: {
+    allowRegistration: {
+      description: "Whether registration is allowed",
+      type: "boolean",
+      value: "true",

-  {
-    order: 6,
-    key: "ENABLE_SHARE_EMAIL_RECIPIENTS",
-    description:
-      "Whether to allow emails to share recipients. Only enable this if you have enabled SMTP.",
-    type: "boolean",
-    value: "false",
-    category: "email",
-    secret: false,
-  },
-  {
-    order: 7,
-    key: "SHARE_RECEPIENTS_EMAIL_SUBJECT",
-    description:
-      "Subject of the email which gets sent to the share recipients.",
-    type: "string",
-    value: "Files shared with you",
-    category: "email",
-  },
-  {
-    order: 8,
-    key: "SHARE_RECEPIENTS_EMAIL_MESSAGE",
-    description:
-      "Message which gets sent to the share recipients. {creator} and {shareUrl} will be replaced with the creator's name and the share URL.",
-    type: "text",
-    value:
-      "Hey!\n{creator} shared some files with you. View or download the files with this link: {shareUrl}\nShared securely with Pingvin Share 🐧",
-    category: "email",
-  },
-  {
-    order: 9,
-    key: "REVERSE_SHARE_EMAIL_SUBJECT",
-    description:
-      "Subject of the email which gets sent when someone created a share with your reverse share link.",
-    type: "string",
-    value: "Reverse share link used",
-    category: "email",
-  },
-  {
-    order: 10,
-    key: "REVERSE_SHARE_EMAIL_MESSAGE",
-    description:
-      "Message which gets sent when someone created a share with your reverse share link. {shareUrl} will be replaced with the creator's name and the share URL.",
-    type: "text",
-    value:
-      "Hey!\nA share was just created with your reverse share link: {shareUrl}\nShared securely with Pingvin Share 🐧",
-    category: "email",
-  },
-  {
-    order: 11,
-    key: "RESET_PASSWORD_EMAIL_SUBJECT",
-    description:
-      "Subject of the email which gets sent when a user requests a password reset.",
-    type: "string",
-    value: "Pingvin Share password reset",
-    category: "email",
-  },
-  {
-    order: 12,
-    key: "RESET_PASSWORD_EMAIL_MESSAGE",
-    description:
-      "Message which gets sent when a user requests a password reset. {url} will be replaced with the reset password URL.",
-    type: "text",
-    value:
-      "Hey!\nYou requested a password reset. Click this link to reset your password: {url}\nThe link expires in a hour.\nPingvin Share 🐧",
-    category: "email",
-  },
+      secret: false,
+    },
+    allowUnauthenticatedShares: {
+      description: "Whether unauthorized users can create shares",
+      type: "boolean",
+      value: "false",

-  {
-    order: 13,
-    key: "SMTP_ENABLED",
-    description:
-      "Whether SMTP is enabled. Only set this to true if you entered the host, port, email, user and password of your SMTP server.",
-    type: "boolean",
-    value: "false",
-    category: "smtp",
-    secret: false,
+      secret: false,
+    },
+    maxSize: {
+      description: "Maximum share size in bytes",
+      type: "number",
+      value: "1073741824",
+
+      secret: false,
+    },
  },
-  {
-    order: 14,
-    key: "SMTP_HOST",
-    description: "Host of the SMTP server",
-    type: "string",
-    value: "",
-    category: "smtp",
+  email: {
+    enableShareEmailRecipients: {
+      description:
+        "Whether to allow emails to share recipients. Only enable this if you have enabled SMTP.",
+      type: "boolean",
+      value: "false",
+
+      secret: false,
+    },
+    shareRecipientsSubject: {
+      description:
+        "Subject of the email which gets sent to the share recipients.",
+      type: "string",
+      value: "Files shared with you",
+    },
+    shareRecipientsMessage: {
+      description:
+        "Message which gets sent to the share recipients. {creator} and {shareUrl} will be replaced with the creator's name and the share URL.",
+      type: "text",
+      value:
+        "Hey!\n{creator} shared some files with you. View or download the files with this link: {shareUrl}\nShared securely with Pingvin Share 🐧",
+    },
+    reverseShareSubject: {
+      description:
+        "Subject of the email which gets sent when someone created a share with your reverse share link.",
+      type: "string",
+      value: "Reverse share link used",
+    },
+    reverseShareMessage: {
+      description:
+        "Message which gets sent when someone created a share with your reverse share link. {shareUrl} will be replaced with the creator's name and the share URL.",
+      type: "text",
+      value:
+        "Hey!\nA share was just created with your reverse share link: {shareUrl}\nShared securely with Pingvin Share 🐧",
+    },
+    resetPasswordSubject: {
+      description:
+        "Subject of the email which gets sent when a user requests a password reset.",
+      type: "string",
+      value: "Pingvin Share password reset",
+    },
+    resetPasswordMessage: {
+      description:
+        "Message which gets sent when a user requests a password reset. {url} will be replaced with the reset password URL.",
+      type: "text",
+      value:
+        "Hey!\nYou requested a password reset. Click this link to reset your password: {url}\nThe link expires in a hour.\nPingvin Share 🐧",
+    },
+    inviteSubject: {
+      description:
+        "Subject of the email which gets sent when an admin invites an user.",
+      type: "string",
+      value: "Pingvin Share invite",
+    },
+    inviteMessage: {
+      description:
+        "Message which gets sent when an admin invites an user. {url} will be replaced with the invite URL and {password} with the password.",
+      type: "text",
+      value:
+        "Hey!\nYou were invited to Pingvin Share. Click this link to accept the invite: {url}\nYour password is: {password}\nPingvin Share 🐧",
+    },
  },
-  {
-    order: 15,
-    key: "SMTP_PORT",
-    description: "Port of the SMTP server",
-    type: "number",
-    value: "0",
-    category: "smtp",
+  smtp: {
+    enabled: {
+      description:
+        "Whether SMTP is enabled. Only set this to true if you entered the host, port, email, user and password of your SMTP server.",
+      type: "boolean",
+      value: "false",
+      secret: false,
+    },
+    host: {
+      description: "Host of the SMTP server",
+      type: "string",
+      value: "",
+    },
+    port: {
+      description: "Port of the SMTP server",
+      type: "number",
+      value: "0",
+    },
+    email: {
+      description: "Email address which the emails get sent from",
+      type: "string",
+      value: "",
+    },
+    username: {
+      description: "Username of the SMTP server",
+      type: "string",
+      value: "",
+    },
+    password: {
+      description: "Password of the SMTP server",
+      type: "string",
+      value: "",
+      obscured: true,
+    },
  },
-  {
-    order: 16,
-    key: "SMTP_EMAIL",
-    description: "Email address which the emails get sent from",
-    type: "string",
-    value: "",
-    category: "smtp",
-  },
-  {
-    order: 17,
-    key: "SMTP_USERNAME",
-    description: "Username of the SMTP server",
-    type: "string",
-    value: "",
-    category: "smtp",
-  },
-  {
-    order: 18,
-    key: "SMTP_PASSWORD",
-    description: "Password of the SMTP server",
-    type: "string",
-    value: "",
-    obscured: true,
-    category: "smtp",
-  },
-];
+};
+
+type ConfigVariables = {
+  [category: string]: {
+    [variable: string]: Omit<
+      Prisma.ConfigCreateInput,
+      "name" | "category" | "order"
+    >;
+  };
+};

 const prisma = new PrismaClient();

-async function main() {
-  for (const variable of configVariables) {
-    const existingConfigVariable = await prisma.config.findUnique({
-      where: { key: variable.key },
-    });
-
-    // Create a new config variable if it doesn't exist
-    if (!existingConfigVariable) {
-      await prisma.config.create({
-        data: variable,
+async function seedConfigVariables() {
+  for (const [category, configVariablesOfCategory] of Object.entries(
+    configVariables
+  )) {
+    let order = 0;
+    for (const [name, properties] of Object.entries(
+      configVariablesOfCategory
+    )) {
+      const existingConfigVariable = await prisma.config.findUnique({
+        where: { name_category: { name, category } },
      });
+
+      // Create a new config variable if it doesn't exist
+      if (!existingConfigVariable) {
+        await prisma.config.create({
+          data: {
+            order,
+            name,
+            ...properties,
+            category,
+          },
+        });
+      }
+      order++;
    }
  }
+}

-  const configVariablesFromDatabase = await prisma.config.findMany();
+async function migrateConfigVariables() {
+  const existingConfigVariables = await prisma.config.findMany();

-  // Delete the config variable if it doesn't exist anymore
-  for (const configVariableFromDatabase of configVariablesFromDatabase) {
-    const configVariable = configVariables.find(
-      (v) => v.key == configVariableFromDatabase.key
-    );
+  for (const existingConfigVariable of existingConfigVariables) {
+    const configVariable =
+      configVariables[existingConfigVariable.category]?.[
+        existingConfigVariable.name
+      ];
    if (!configVariable) {
      await prisma.config.delete({
-        where: { key: configVariableFromDatabase.key },
+        where: {
+          name_category: {
+            name: existingConfigVariable.name,
+            category: existingConfigVariable.category,
+          },
+        },
      });

      // Update the config variable if the metadata changed
    } else if (
      JSON.stringify({
        ...configVariable,
-        key: configVariableFromDatabase.key,
-        value: configVariableFromDatabase.value,
-      }) != JSON.stringify(configVariableFromDatabase)
+        name: existingConfigVariable.name,
+        category: existingConfigVariable.category,
+        value: existingConfigVariable.value,
+      }) != JSON.stringify(existingConfigVariable)
    ) {
      await prisma.config.update({
-        where: { key: configVariableFromDatabase.key },
+        where: {
+          name_category: {
+            name: existingConfigVariable.name,
+            category: existingConfigVariable.category,
+          },
+        },
        data: {
          ...configVariable,
-          key: configVariableFromDatabase.key,
-          value: configVariableFromDatabase.value,
+          name: existingConfigVariable.name,
+          category: existingConfigVariable.category,
+          value: existingConfigVariable.value,
        },
      });
    }
  }
 }
-main()
+
+seedConfigVariables()
+  .then(() => migrateConfigVariables())
  .then(async () => {
    await prisma.$disconnect();
  })
--- a/backend/src/auth/auth.controller.ts
+++ b/backend/src/auth/auth.controller.ts
@@ -42,7 +42,7 @@ export class AuthController {
    @Body() dto: AuthRegisterDTO,
    @Res({ passthrough: true }) response: Response
  ) {
-    if (!this.config.get("ALLOW_REGISTRATION"))
+    if (!this.config.get("share.allowRegistration"))
      throw new ForbiddenException("Registration is not allowed");

    const result = await this.authService.signUp(dto);
--- a/backend/src/auth/auth.service.ts
+++ b/backend/src/auth/auth.service.ts
@@ -6,7 +6,7 @@ import {
 } from "@nestjs/common";
 import { JwtService } from "@nestjs/jwt";
 import { User } from "@prisma/client";
-import { PrismaClientKnownRequestError } from "@prisma/client/runtime";
+import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
 import * as argon from "argon2";
 import * as moment from "moment";
 import { ConfigService } from "src/config/config.service";
@@ -25,7 +25,7 @@ export class AuthService {
  ) {}

  async signUp(dto: AuthRegisterDTO) {
-    const isFirstUser = this.config.get("SETUP_STATUS") == "STARTED";
+    const isFirstUser = (await this.prisma.user.count()) == 0;

    const hash = await argon.hash(dto.password);
    try {
@@ -38,10 +38,6 @@ export class AuthService {
        },
      });

-      if (isFirstUser) {
-        await this.config.changeSetupStatus("REGISTERED");
-      }
-
      const { refreshToken, refreshTokenId } = await this.createRefreshToken(
        user.id
      );
@@ -161,7 +157,7 @@ export class AuthService {
      },
      {
        expiresIn: "15min",
-        secret: this.config.get("JWT_SECRET"),
+        secret: this.config.get("internal.jwtSecret"),
      }
    );
  }
--- a/backend/src/auth/authTotp.service.ts
+++ b/backend/src/auth/authTotp.service.ts
@@ -8,6 +8,7 @@ import { User } from "@prisma/client";
 import * as argon from "argon2";
 import { authenticator, totp } from "otplib";
 import * as qrcode from "qrcode-svg";
+import { ConfigService } from "src/config/config.service";
 import { PrismaService } from "src/prisma/prisma.service";
 import { AuthService } from "./auth.service";
 import { AuthSignInTotpDTO } from "./dto/authSignInTotp.dto";
@@ -16,7 +17,8 @@ import { AuthSignInTotpDTO } from "./dto/authSignInTotp.dto";
 export class AuthTotpService {
  constructor(
    private prisma: PrismaService,
-    private authService: AuthService
+    private authService: AuthService,
+    private config: ConfigService
  ) {}

  async signInTotp(dto: AuthSignInTotpDTO) {
@@ -42,7 +44,7 @@ export class AuthTotpService {
      throw new UnauthorizedException("Invalid login token");

    if (token.expiresAt < new Date())
-      throw new UnauthorizedException("Login token expired");
+      throw new UnauthorizedException("Login token expired", "token_expired");

    // Check the TOTP code
    const { totpSecret } = await this.prisma.user.findUnique({
@@ -95,7 +97,7 @@ export class AuthTotpService {

    const otpURL = totp.keyuri(
      user.username || user.email,
-      "pingvin-share",
+      this.config.get("general.appName"),
      secret
    );

--- a/backend/src/auth/guard/jwt.guard.ts
+++ b/backend/src/auth/guard/jwt.guard.ts
@@ -11,7 +11,7 @@ export class JwtGuard extends AuthGuard("jwt") {
    try {
      return (await super.canActivate(context)) as boolean;
    } catch {
-      return this.config.get("ALLOW_UNAUTHENTICATED_SHARES");
+      return this.config.get("share.allowUnauthenticatedShares");
    }
  }
 }
--- a/backend/src/auth/strategy/jwt.strategy.ts
+++ b/backend/src/auth/strategy/jwt.strategy.ts
@@ -9,10 +9,10 @@ import { PrismaService } from "src/prisma/prisma.service";
@Injectable()
 export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor(config: ConfigService, private prisma: PrismaService) {
-    config.get("JWT_SECRET");
+    config.get("internal.jwtSecret");
    super({
      jwtFromRequest: JwtStrategy.extractJWT,
-      secretOrKey: config.get("JWT_SECRET"),
+      secretOrKey: config.get("internal.jwtSecret"),
    });
  }

--- a/backend/src/config/config.controller.ts
+++ b/backend/src/config/config.controller.ts
@@ -1,4 +1,17 @@
-import { Body, Controller, Get, Patch, Post, UseGuards } from "@nestjs/common";
+import {
+  Body,
+  Controller,
+  FileTypeValidator,
+  Get,
+  Param,
+  ParseFilePipe,
+  Patch,
+  Post,
+  UploadedFile,
+  UseGuards,
+  UseInterceptors,
+} from "@nestjs/common";
+import { FileInterceptor } from "@nestjs/platform-express";
 import { SkipThrottle } from "@nestjs/throttler";
 import { AdministratorGuard } from "src/auth/guard/isAdmin.guard";
 import { JwtGuard } from "src/auth/guard/jwt.guard";
@@ -8,11 +21,13 @@ import { AdminConfigDTO } from "./dto/adminConfig.dto";
 import { ConfigDTO } from "./dto/config.dto";
 import { TestEmailDTO } from "./dto/testEmail.dto";
 import UpdateConfigDTO from "./dto/updateConfig.dto";
+import { LogoService } from "./logo.service";

@Controller("configs")
 export class ConfigController {
  constructor(
    private configService: ConfigService,
+    private logoService: LogoService,
    private emailService: EmailService
  ) {}

@@ -22,24 +37,20 @@ export class ConfigController {
    return new ConfigDTO().fromList(await this.configService.list());
  }

-  @Get("admin")
+  @Get("admin/:category")
  @UseGuards(JwtGuard, AdministratorGuard)
-  async listForAdmin() {
+  async getByCategory(@Param("category") category: string) {
    return new AdminConfigDTO().fromList(
-      await this.configService.listForAdmin()
+      await this.configService.getByCategory(category)
    );
  }

  @Patch("admin")
  @UseGuards(JwtGuard, AdministratorGuard)
  async updateMany(@Body() data: UpdateConfigDTO[]) {
-    await this.configService.updateMany(data);
-  }
-
-  @Post("admin/finishSetup")
-  @UseGuards(JwtGuard, AdministratorGuard)
-  async finishSetup() {
-    return await this.configService.changeSetupStatus("FINISHED");
+    return new AdminConfigDTO().fromList(
+      await this.configService.updateMany(data)
+    );
  }

  @Post("admin/testEmail")
@@ -47,4 +58,18 @@ export class ConfigController {
  async testEmail(@Body() { email }: TestEmailDTO) {
    await this.emailService.sendTestMail(email);
  }
+
+  @Post("admin/logo")
+  @UseInterceptors(FileInterceptor("file"))
+  @UseGuards(JwtGuard, AdministratorGuard)
+  async uploadLogo(
+    @UploadedFile(
+      new ParseFilePipe({
+        validators: [new FileTypeValidator({ fileType: "image/png" })],
+      })
+    )
+    file: Express.Multer.File
+  ) {
+    return await this.logoService.create(file.buffer);
+  }
 }
--- a/backend/src/config/config.module.ts
+++ b/backend/src/config/config.module.ts
@@ -3,6 +3,7 @@ import { EmailModule } from "src/email/email.module";
 import { PrismaService } from "src/prisma/prisma.service";
 import { ConfigController } from "./config.controller";
 import { ConfigService } from "./config.service";
+import { LogoService } from "./logo.service";

@Global()
@Module({
@@ -16,6 +17,7 @@ import { ConfigService } from "./config.service";
      inject: [PrismaService],
    },
    ConfigService,
+    LogoService,
  ],
  controllers: [ConfigController],
  exports: [ConfigService],
--- a/backend/src/config/config.service.ts
+++ b/backend/src/config/config.service.ts
@@ -14,9 +14,9 @@ export class ConfigService {
    private prisma: PrismaService
  ) {}

-  get(key: string): any {
+  get(key: `${string}.${string}`): any {
    const configVariable = this.configVariables.filter(
-      (variable) => variable.key == key
+      (variable) => `${variable.category}.${variable.name}` == key
    )[0];

    if (!configVariable) throw new Error(`Config variable ${key} not found`);
@@ -27,30 +27,51 @@ export class ConfigService {
      return configVariable.value;
  }

-  async listForAdmin() {
-    return await this.prisma.config.findMany({
+  async getByCategory(category: string) {
+    const configVariables = await this.prisma.config.findMany({
      orderBy: { order: "asc" },
-      where: { locked: { equals: false } },
+      where: { category, locked: { equals: false } },
+    });
+
+    return configVariables.map((variable) => {
+      return {
+        key: `${variable.category}.${variable.name}`,
+        ...variable,
+      };
    });
  }

  async list() {
-    return await this.prisma.config.findMany({
+    const configVariables = await this.prisma.config.findMany({
      where: { secret: { equals: false } },
    });
+
+    return configVariables.map((variable) => {
+      return {
+        key: `${variable.category}.${variable.name}`,
+        ...variable,
+      };
+    });
  }

  async updateMany(data: { key: string; value: string | number | boolean }[]) {
+    const response: Config[] = [];
+
    for (const variable of data) {
-      await this.update(variable.key, variable.value);
+      response.push(await this.update(variable.key, variable.value));
    }

-    return data;
+    return response;
  }

  async update(key: string, value: string | number | boolean) {
    const configVariable = await this.prisma.config.findUnique({
-      where: { key },
+      where: {
+        name_category: {
+          category: key.split(".")[0],
+          name: key.split(".")[1],
+        },
+      },
    });

    if (!configVariable || configVariable.locked)
@@ -67,7 +88,12 @@ export class ConfigService {
    }

    const updatedVariable = await this.prisma.config.update({
-      where: { key },
+      where: {
+        name_category: {
+          category: key.split(".")[0],
+          name: key.split(".")[1],
+        },
+      },
      data: { value: value.toString() },
    });

@@ -75,15 +101,4 @@ export class ConfigService {

    return updatedVariable;
  }
-
-  async changeSetupStatus(status: "STARTED" | "REGISTERED" | "FINISHED") {
-    const updatedVariable = await this.prisma.config.update({
-      where: { key: "SETUP_STATUS" },
-      data: { value: status },
-    });
-
-    this.configVariables = await this.prisma.config.findMany();
-
-    return updatedVariable;
-  }
 }
--- a/backend/src/config/dto/adminConfig.dto.ts
+++ b/backend/src/config/dto/adminConfig.dto.ts
@@ -2,6 +2,9 @@ import { Expose, plainToClass } from "class-transformer";
 import { ConfigDTO } from "./config.dto";

 export class AdminConfigDTO extends ConfigDTO {
+  @Expose()
+  name: string;
+
  @Expose()
  secret: boolean;

@@ -14,9 +17,6 @@ export class AdminConfigDTO extends ConfigDTO {
  @Expose()
  obscured: boolean;

-  @Expose()
-  category: string;
-
  from(partial: Partial<AdminConfigDTO>) {
    return plainToClass(AdminConfigDTO, partial, {
      excludeExtraneousValues: true,
--- a/backend/src/config/logo.service.ts
+++ b/backend/src/config/logo.service.ts
@@ -0,0 +1,32 @@
+import { Injectable } from "@nestjs/common";
+import * as fs from "fs";
+import * as sharp from "sharp";
+
+const IMAGES_PATH = "../frontend/public/img";
+
+@Injectable()
+export class LogoService {
+  async create(file: Buffer) {
+    fs.writeFileSync(`${IMAGES_PATH}/logo.png`, file, "binary");
+    this.createFavicon(file);
+    this.createPWAIcons(file);
+  }
+
+  async createFavicon(file: Buffer) {
+    const resized = await sharp(file).resize(16).toBuffer();
+    fs.promises.writeFile(`${IMAGES_PATH}/favicon.ico`, resized, "binary");
+  }
+
+  async createPWAIcons(file: Buffer) {
+    const sizes = [48, 72, 96, 128, 144, 152, 192, 384, 512];
+
+    for (const size of sizes) {
+      const resized = await sharp(file).resize(size).toBuffer();
+      fs.promises.writeFile(
+        `${IMAGES_PATH}/icons/icon-${size}x${size}.png`,
+        resized,
+        "binary"
+      );
+    }
+  }
+}
--- a/backend/src/email/email.service.ts
+++ b/backend/src/email/email.service.ts
@@ -1,4 +1,8 @@
-import { Injectable, InternalServerErrorException } from "@nestjs/common";
+import {
+  Injectable,
+  InternalServerErrorException,
+  Logger,
+} from "@nestjs/common";
 import { User } from "@prisma/client";
 import * as nodemailer from "nodemailer";
 import { ConfigService } from "src/config/config.service";
@@ -6,84 +10,114 @@ import { ConfigService } from "src/config/config.service";
@Injectable()
 export class EmailService {
  constructor(private config: ConfigService) {}
+  private readonly logger = new Logger(EmailService.name);

  getTransporter() {
-    if (!this.config.get("SMTP_ENABLED"))
+    if (!this.config.get("smtp.enabled"))
      throw new InternalServerErrorException("SMTP is disabled");

    return nodemailer.createTransport({
-      host: this.config.get("SMTP_HOST"),
-      port: parseInt(this.config.get("SMTP_PORT")),
-      secure: parseInt(this.config.get("SMTP_PORT")) == 465,
+      host: this.config.get("smtp.host"),
+      port: this.config.get("smtp.port"),
+      secure: this.config.get("smtp.port") == 465,
      auth: {
-        user: this.config.get("SMTP_USERNAME"),
-        pass: this.config.get("SMTP_PASSWORD"),
+        user: this.config.get("smtp.username"),
+        pass: this.config.get("smtp.password"),
      },
    });
  }

+  private async sendMail(email: string, subject: string, text: string) {
+    await this.getTransporter()
+      .sendMail({
+        from: `"${this.config.get("general.appName")}" <${this.config.get(
+          "smtp.email"
+        )}>`,
+        to: email,
+        subject,
+        text,
+      })
+      .catch((e) => {
+        this.logger.error(e);
+        throw new InternalServerErrorException("Failed to send email");
+      });
+  }
+
  async sendMailToShareRecepients(
    recipientEmail: string,
    shareId: string,
    creator?: User
  ) {
-    if (!this.config.get("ENABLE_SHARE_EMAIL_RECIPIENTS"))
+    if (!this.config.get("email.enableShareEmailRecipients"))
      throw new InternalServerErrorException("Email service disabled");

-    const shareUrl = `${this.config.get("APP_URL")}/share/${shareId}`;
+    const shareUrl = `${this.config.get("general.appUrl")}/share/${shareId}`;

-    await this.getTransporter().sendMail({
-      from: `"Pingvin Share" <${this.config.get("SMTP_EMAIL")}>`,
-      to: recipientEmail,
-      subject: this.config.get("SHARE_RECEPIENTS_EMAIL_SUBJECT"),
-      text: this.config
-        .get("SHARE_RECEPIENTS_EMAIL_MESSAGE")
+    await this.sendMail(
+      recipientEmail,
+      this.config.get("email.shareRecipientsSubject"),
+      this.config
+        .get("email.shareRecipientsMessage")
        .replaceAll("\\n", "\n")
        .replaceAll("{creator}", creator?.username ?? "Someone")
-        .replaceAll("{shareUrl}", shareUrl),
-    });
+        .replaceAll("{shareUrl}", shareUrl)
+    );
  }

  async sendMailToReverseShareCreator(recipientEmail: string, shareId: string) {
-    const shareUrl = `${this.config.get("APP_URL")}/share/${shareId}`;
+    const shareUrl = `${this.config.get("general.appUrl")}/share/${shareId}`;

-    await this.getTransporter().sendMail({
-      from: `"Pingvin Share" <${this.config.get("SMTP_EMAIL")}>`,
-      to: recipientEmail,
-      subject: this.config.get("REVERSE_SHARE_EMAIL_SUBJECT"),
-      text: this.config
-        .get("REVERSE_SHARE_EMAIL_MESSAGE")
+    await this.sendMail(
+      recipientEmail,
+      this.config.get("email.reverseShareSubject"),
+      this.config
+        .get("email.reverseShareMessage")
        .replaceAll("\\n", "\n")
-        .replaceAll("{shareUrl}", shareUrl),
-    });
+        .replaceAll("{shareUrl}", shareUrl)
+    );
  }

  async sendResetPasswordEmail(recipientEmail: string, token: string) {
    const resetPasswordUrl = `${this.config.get(
-      "APP_URL"
+      "general.appUrl"
    )}/auth/resetPassword/${token}`;

-    await this.getTransporter().sendMail({
-      from: `"Pingvin Share" <${this.config.get("SMTP_EMAIL")}>`,
-      to: recipientEmail,
-      subject: this.config.get("RESET_PASSWORD_EMAIL_SUBJECT"),
-      text: this.config
-        .get("RESET_PASSWORD_EMAIL_MESSAGE")
-        .replaceAll("{url}", resetPasswordUrl),
-    });
+    await this.sendMail(
+      recipientEmail,
+      this.config.get("email.resetPasswordSubject"),
+      this.config
+        .get("email.resetPasswordMessage")
+        .replaceAll("\\n", "\n")
+        .replaceAll("{url}", resetPasswordUrl)
+    );
+  }
+
+  async sendInviteEmail(recipientEmail: string, password: string) {
+    const loginUrl = `${this.config.get("general.appUrl")}/auth/signIn`;
+
+    await this.sendMail(
+      recipientEmail,
+      this.config.get("email.inviteSubject"),
+      this.config
+        .get("email.inviteMessage")
+        .replaceAll("{url}", loginUrl)
+        .replaceAll("{password}", password)
+    );
  }

  async sendTestMail(recipientEmail: string) {
-    try {
-      await this.getTransporter().sendMail({
-        from: `"Pingvin Share" <${this.config.get("SMTP_EMAIL")}>`,
+    await this.getTransporter()
+      .sendMail({
+        from: `"${this.config.get("general.appName")}" <${this.config.get(
+          "smtp.email"
+        )}>`,
        to: recipientEmail,
        subject: "Test email",
        text: "This is a test email",
+      })
+      .catch((e) => {
+        this.logger.error(e);
+        throw new InternalServerErrorException(e.message);
      });
-    } catch (e) {
-      console.error(e);
-      throw new InternalServerErrorException(e.message);
-    }
  }
 }
--- a/backend/src/file/file.controller.ts
+++ b/backend/src/file/file.controller.ts
@@ -32,7 +32,8 @@ export class FileController {
  ) {
    const { id, name, chunkIndex, totalChunks } = query;

-    const data = body.toString().split(",")[1];
+    // Data can be empty if the file is empty
+    const data = body.toString().split(",")[1] ?? "";

    return await this.fileService.create(
      data,
@@ -51,7 +52,7 @@ export class FileController {
    const zip = this.fileService.getZip(shareId);
    res.set({
      "Content-Type": "application/zip",
-      "Content-Disposition": contentDisposition(`pingvin-share-${shareId}.zip`),
+      "Content-Disposition": contentDisposition(`${shareId}.zip`),
    });

    return new StreamableFile(zip);
--- a/backend/src/file/file.service.ts
+++ b/backend/src/file/file.service.ts
@@ -67,7 +67,7 @@ export class FileService {
    const shareSizeSum = fileSizeSum + diskFileSize + buffer.byteLength;

    if (
-      shareSizeSum > this.config.get("MAX_SHARE_SIZE") ||
+      shareSizeSum > this.config.get("share.maxSize") ||
      (share.reverseShare?.maxShareSize &&
        shareSizeSum > parseInt(share.reverseShare.maxShareSize))
    ) {
--- a/backend/src/reverseShare/reverseShare.controller.ts
+++ b/backend/src/reverseShare/reverseShare.controller.ts
@@ -31,7 +31,7 @@ export class ReverseShareController {
  async create(@Body() body: CreateReverseShareDTO, @GetUser() user: User) {
    const token = await this.reverseShareService.create(body, user.id);

-    const link = `${this.config.get("APP_URL")}/upload/${token}`;
+    const link = `${this.config.get("general.appUrl")}/upload/${token}`;

    return { token, link };
  }
--- a/backend/src/reverseShare/reverseShare.service.ts
+++ b/backend/src/reverseShare/reverseShare.service.ts
@@ -24,7 +24,7 @@ export class ReverseShareService {
      )
      .toDate();

-    const globalMaxShareSize = this.config.get("MAX_SHARE_SIZE");
+    const globalMaxShareSize = this.config.get("share.maxSize");

    if (globalMaxShareSize < data.maxShareSize)
      throw new BadRequestException(
--- a/backend/src/share/share.service.ts
+++ b/backend/src/share/share.service.ts
@@ -153,7 +153,7 @@ export class ShareService {

    if (
      share.reverseShare &&
-      this.config.get("SMTP_ENABLED") &&
+      this.config.get("smtp.enabled") &&
      share.reverseShare.sendEmailNotification
    ) {
      await this.emailService.sendMailToReverseShareCreator(
@@ -278,7 +278,7 @@ export class ShareService {
      share?.security?.password &&
      !(await argon.verify(share.security.password, password))
    ) {
-      throw new ForbiddenException("Wrong password");
+      throw new ForbiddenException("Wrong password", "wrong_password");
    }

    if (share.security?.maxViews && share.security.maxViews <= share.views) {
@@ -303,7 +303,7 @@ export class ShareService {
      },
      {
        expiresIn: moment(expiration).diff(new Date(), "seconds") + "s",
-        secret: this.config.get("JWT_SECRET"),
+        secret: this.config.get("internal.jwtSecret"),
      }
    );
  }
@@ -315,7 +315,7 @@ export class ShareService {

    try {
      const claims = this.jwtService.verify(token, {
-        secret: this.config.get("JWT_SECRET"),
+        secret: this.config.get("internal.jwtSecret"),
        // Ignore expiration if expiration is 0
        ignoreExpiration: moment(expiration).isSame(0),
      });
--- a/backend/src/user/dto/createUser.dto.ts
+++ b/backend/src/user/dto/createUser.dto.ts
@@ -1,12 +1,15 @@
-import { Expose, plainToClass } from "class-transformer";
-import { Allow } from "class-validator";
+import { plainToClass } from "class-transformer";
+import { Allow, IsOptional, MinLength } from "class-validator";
 import { UserDTO } from "./user.dto";

 export class CreateUserDTO extends UserDTO {
-  @Expose()
  @Allow()
  isAdmin: boolean;

+  @MinLength(8)
+  @IsOptional()
+  password: string;
+
  from(partial: Partial<CreateUserDTO>) {
    return plainToClass(CreateUserDTO, partial, {
      excludeExtraneousValues: true,
--- a/backend/src/user/user.controller.ts
+++ b/backend/src/user/user.controller.ts
@@ -6,9 +6,11 @@ import {
  Param,
  Patch,
  Post,
+  Res,
  UseGuards,
 } from "@nestjs/common";
 import { User } from "@prisma/client";
+import { Response } from "express";
 import { GetUser } from "src/auth/decorator/getUser.decorator";
 import { AdministratorGuard } from "src/auth/guard/isAdmin.guard";
 import { JwtGuard } from "src/auth/guard/jwt.guard";
@@ -40,7 +42,16 @@ export class UserController {

  @Delete("me")
  @UseGuards(JwtGuard)
-  async deleteCurrentUser(@GetUser() user: User) {
+  async deleteCurrentUser(
+    @GetUser() user: User,
+    @Res({ passthrough: true }) response: Response
+  ) {
+    response.cookie("access_token", "accessToken", { maxAge: -1 });
+    response.cookie("refresh_token", "", {
+      path: "/api/auth/token",
+      httpOnly: true,
+      maxAge: -1,
+    });
    return new UserDTO().from(await this.userService.delete(user.id));
  }

--- a/backend/src/user/user.module.ts
+++ b/backend/src/user/user.module.ts
@@ -1,8 +1,10 @@
 import { Module } from "@nestjs/common";
+import { EmailModule } from "src/email/email.module";
 import { UserController } from "./user.controller";
 import { UserSevice } from "./user.service";

@Module({
+  imports: [EmailModule],
  providers: [UserSevice],
  controllers: [UserController],
 })
--- a/backend/src/user/user.service.ts
+++ b/backend/src/user/user.service.ts
@@ -1,13 +1,18 @@
 import { BadRequestException, Injectable } from "@nestjs/common";
-import { PrismaClientKnownRequestError } from "@prisma/client/runtime";
+import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
 import * as argon from "argon2";
+import * as crypto from "crypto";
+import { EmailService } from "src/email/email.service";
 import { PrismaService } from "src/prisma/prisma.service";
 import { CreateUserDTO } from "./dto/createUser.dto";
 import { UpdateUserDto } from "./dto/updateUser.dto";

@Injectable()
 export class UserSevice {
-  constructor(private prisma: PrismaService) {}
+  constructor(
+    private prisma: PrismaService,
+    private emailService: EmailService
+  ) {}

  async list() {
    return await this.prisma.user.findMany();
@@ -18,7 +23,17 @@ export class UserSevice {
  }

  async create(dto: CreateUserDTO) {
-    const hash = await argon.hash(dto.password);
+    let hash: string;
+
+    // The password can be undefined if the user is invited by an admin
+    if (!dto.password) {
+      const randomPassword = crypto.randomUUID();
+      hash = await argon.hash(randomPassword);
+      await this.emailService.sendInviteEmail(dto.email, randomPassword);
+    } else {
+      hash = await argon.hash(dto.password);
+    }
+
    try {
      return await this.prisma.user.create({
        data: {
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -7,6 +7,7 @@ services:
      - 3000:3000
    volumes:
      - "./data:/opt/app/backend/data"
+      - "./data/images:/opt/app/frontend/public/img"
 # Optional: If you add ClamAV, uncomment the following to have ClamAV start first.
 #    depends_on:
 #      clamav:
--- a/frontend/next.config.js
+++ b/frontend/next.config.js
@@ -4,7 +4,15 @@ const { version } = require('./package.json');

 const withPWA = require("next-pwa")({
  dest: "public",
-  disable: process.env.NODE_ENV == "development",
+  disable: process.env.NODE_ENV === "development",
+  reloadOnOnline: false,
+  runtimeCaching: [
+    {
+      urlPattern: /^https?.*/,
+      handler: 'NetworkOnly',
+    },
+  ],
+  reloadOnOnline: false,
 });

 module.exports = withPWA({
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
  "name": "pingvin-share-frontend",
-  "version": "0.10.0",
+  "version": "0.13.1",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
@@ -9,43 +9,44 @@
    "format": "prettier --write \"src/**/*.ts*\""
  },
  "dependencies": {
-    "@emotion/react": "^11.10.5",
+    "@emotion/react": "^11.10.6",
    "@emotion/server": "^11.10.0",
-    "@mantine/core": "^5.10.0",
-    "@mantine/dropzone": "^5.10.0",
-    "@mantine/form": "^5.10.0",
-    "@mantine/hooks": "^5.10.0",
-    "@mantine/modals": "^5.10.0",
-    "@mantine/next": "^5.10.0",
-    "@mantine/notifications": "^5.10.0",
-    "axios": "^1.2.2",
+    "@mantine/core": "^6.0.1",
+    "@mantine/dropzone": "^6.0.1",
+    "@mantine/form": "^6.0.1",
+    "@mantine/hooks": "^6.0.1",
+    "@mantine/modals": "^6.0.1",
+    "@mantine/next": "^6.0.1",
+    "@mantine/notifications": "^6.0.1",
+    "axios": "^1.3.4",
    "cookies-next": "^2.1.1",
    "file-saver": "^2.0.5",
-    "jose": "^4.11.2",
+    "jose": "^4.13.1",
    "jwt-decode": "^3.1.2",
    "mime-types": "^2.1.35",
    "moment": "^2.29.4",
-    "next": "^13.1.2",
+    "next": "^13.2.4",
    "next-cookies": "^2.0.3",
    "next-http-proxy-middleware": "^1.2.5",
    "next-pwa": "^5.6.0",
    "p-limit": "^4.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
-    "react-icons": "^4.7.1",
-    "yup": "^0.32.11"
+    "react-icons": "^4.8.0",
+    "sharp": "^0.31.3",
+    "yup": "^1.0.2"
  },
  "devDependencies": {
    "@types/mime-types": "^2.1.1",
-    "@types/node": "18.11.18",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.10",
-    "axios": "^1.2.2",
-    "eslint": "8.31.0",
-    "eslint-config-next": "^13.1.2",
-    "eslint-config-prettier": "^8.6.0",
-    "prettier": "^2.8.2",
+    "@types/node": "18.15.0",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
+    "axios": "^1.3.4",
+    "eslint": "8.35.0",
+    "eslint-config-next": "^13.2.4",
+    "eslint-config-prettier": "^8.7.0",
+    "prettier": "^2.8.4",
    "tar": "^6.1.13",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.5"
  }
 }
--- a/frontend/public/icons/icon-white-128x128.png
+++ b/frontend/public/icons/icon-white-128x128.png
--- a/frontend/public/img/favicon.ico
+++ b/frontend/public/img/favicon.ico
--- a/frontend/public/img/icons/icon-128x128.png
+++ b/frontend/public/img/icons/icon-128x128.png
--- a/frontend/public/img/icons/icon-144x144.png
+++ b/frontend/public/img/icons/icon-144x144.png
--- a/frontend/public/img/icons/icon-152x152.png
+++ b/frontend/public/img/icons/icon-152x152.png
--- a/frontend/public/img/icons/icon-192x192.png
+++ b/frontend/public/img/icons/icon-192x192.png
--- a/frontend/public/img/icons/icon-384x384.png
+++ b/frontend/public/img/icons/icon-384x384.png
--- a/frontend/public/img/icons/icon-48x48.png
+++ b/frontend/public/img/icons/icon-48x48.png
--- a/frontend/public/img/icons/icon-512x512.png
+++ b/frontend/public/img/icons/icon-512x512.png
--- a/frontend/public/img/icons/icon-72x72.png
+++ b/frontend/public/img/icons/icon-72x72.png
--- a/frontend/public/img/icons/icon-96x96.png
+++ b/frontend/public/img/icons/icon-96x96.png
--- a/frontend/public/img/logo-bg-white.png
+++ b/frontend/public/img/logo-bg-white.png
--- a/frontend/public/img/logo.png
+++ b/frontend/public/img/logo.png
--- a/frontend/public/img/logo.svg
+++ b/frontend/public/img/logo.svg
@@ -1 +0,0 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 943.11 911.62"><ellipse cx="471.56" cy="454.28" rx="471.56" ry="454.28" fill="#46509e"/><ellipse cx="471.56" cy="390.28" rx="233.66" ry="207" fill="#37474f"/><path d="M705.22,849c-36.69,21.14-123.09,64.32-240.64,62.57A469.81,469.81,0,0,1,237.89,849V394.76H705.22Z" fill="#37474f"/><path d="M658.81,397.7V873.49a478.12,478.12,0,0,1-374.19,0V397.7c0-95.55,83.78-173,187.1-173S658.81,302.15,658.81,397.7Z" fill="#fff"/><polygon points="565.02 431.68 471.56 514.49 378.09 431.68 565.02 431.68" fill="#46509e"/><ellipse cx="378.09" cy="369.58" rx="23.37" ry="20.7" fill="#37474f"/><ellipse cx="565.02" cy="369.58" rx="23.37" ry="20.7" fill="#37474f"/><path d="M658.49,400.63c0-40-36.6-72.45-81.79-72.45s-81.78,32.41-81.78,72.45a64.79,64.79,0,0,0,7.9,31.05H440.29a64.79,64.79,0,0,0,7.9-31.05c0-40-36.59-72.45-81.78-72.45s-81.79,32.41-81.79,72.45l-46.73-10.35c0-114.31,104.64-207,233.67-207s233.66,92.69,233.66,207Z" fill="#37474f"/></svg>
--- a/frontend/public/img/opengraph-default.png
+++ b/frontend/public/img/opengraph-default.png
--- a/frontend/public/manifest.json
+++ b/frontend/public/manifest.json
@@ -8,55 +8,55 @@
  "start_url": "/",
  "icons": [
    {
-      "src": "icons/icon-72x72.png",
+      "src": "img/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
-      "src": "icons/icon-96x96.png",
+      "src": "img/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
-      "src": "icons/icon-96x96.png",
+      "src": "img/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
-      "src": "icons/icon-128x128.png",
+      "src": "img/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
-      "src": "icons/icon-144x144.png",
+      "src": "img/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
-      "src": "icons/icon-152x152.png",
+      "src": "img/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
-      "src": "icons/icon-192x192.png",
+      "src": "img/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
-      "src": "icons/icon-384x384.png",
+      "src": "img/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
-      "src": "icons/icon-512x512.png",
+      "src": "img/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
--- a/frontend/src/components/Logo.tsx
+++ b/frontend/src/components/Logo.tsx
@@ -1,34 +1,6 @@
+import Image from "next/image";
+
 const Logo = ({ height, width }: { height: number; width: number }) => {
-  return (
-    <svg
-      id="Layer_1"
-      data-name="Layer 1"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 943.11 911.62"
-      height={height}
-      width={width}
-    >
-      <ellipse cx="471.56" cy="454.28" rx="471.56" ry="454.28" fill="#46509e" />
-      <ellipse cx="471.56" cy="390.28" rx="233.66" ry="207" fill="#37474f" />
-      <path
-        d="M705.22,849c-36.69,21.14-123.09,64.32-240.64,62.57A469.81,469.81,0,0,1,237.89,849V394.76H705.22Z"
-        fill="#37474f"
-      />
-      <path
-        d="M658.81,397.7V873.49a478.12,478.12,0,0,1-374.19,0V397.7c0-95.55,83.78-173,187.1-173S658.81,302.15,658.81,397.7Z"
-        fill="#fff"
-      />
-      <polygon
-        points="565.02 431.68 471.56 514.49 378.09 431.68 565.02 431.68"
-        fill="#46509e"
-      />
-      <ellipse cx="378.09" cy="369.58" rx="23.37" ry="20.7" fill="#37474f" />
-      <ellipse cx="565.02" cy="369.58" rx="23.37" ry="20.7" fill="#37474f" />
-      <path
-        d="M658.49,400.63c0-40-36.6-72.45-81.79-72.45s-81.78,32.41-81.78,72.45a64.79,64.79,0,0,0,7.9,31.05H440.29a64.79,64.79,0,0,0,7.9-31.05c0-40-36.59-72.45-81.78-72.45s-81.79,32.41-81.79,72.45l-46.73-10.35c0-114.31,104.64-207,233.67-207s233.66,92.69,233.66,207Z"
-        fill="#37474f"
-      />
-    </svg>
-  );
+  return <Image src="/img/logo.png" alt="logo" height={height} width={width} />;
 };
 export default Logo;
--- a/frontend/src/components/Meta.tsx
+++ b/frontend/src/components/Meta.tsx
@@ -1,4 +1,5 @@
 import Head from "next/head";
+import useConfig from "../hooks/config.hook";

 const Meta = ({
  title,
@@ -7,7 +8,9 @@ const Meta = ({
  title: string;
  description?: string;
 }) => {
-  const metaTitle = `${title} - Pingvin Share`;
+  const config = useConfig();
+
+  const metaTitle = `${title} - ${config.get("general.appName")}`;

  return (
    <Head>
@@ -19,7 +22,6 @@ const Meta = ({
          description ?? "An open-source and self-hosted sharing platform."
        }
      />
-      <meta property="og:image" content="/img/opengraph-default.png" />
      <meta name="twitter:title" content={metaTitle} />
      <meta name="twitter:description" content={description} />
    </Head>
--- a/frontend/src/components/account/showEnableTotpModal.tsx
+++ b/frontend/src/components/account/showEnableTotpModal.tsx
@@ -7,7 +7,6 @@ import {
  Stack,
  Text,
  TextInput,
-  Title,
  Tooltip,
 } from "@mantine/core";
 import { useForm, yupResolver } from "@mantine/form";
@@ -27,7 +26,7 @@ const showEnableTotpModal = (
  }
 ) => {
  return modals.openModal({
-    title: <Title order={4}>Enable TOTP</Title>,
+    title: "Enable TOTP",
    children: (
      <CreateEnableTotpModal options={options} refreshUser={refreshUser} />
    ),
--- a/frontend/src/components/admin/configuration/AdminConfigTable.tsx
+++ b/frontend/src/components/admin/configuration/AdminConfigTable.tsx
@@ -1,153 +0,0 @@
-import {
-  Box,
-  Button,
-  Group,
-  Paper,
-  Space,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import { useMediaQuery } from "@mantine/hooks";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import useConfig from "../../../hooks/config.hook";
-import configService from "../../../services/config.service";
-import {
-  AdminConfigGroupedByCategory,
-  UpdateConfig,
-} from "../../../types/config.type";
-import {
-  capitalizeFirstLetter,
-  configVariableToFriendlyName,
-} from "../../../utils/string.util";
-import toast from "../../../utils/toast.util";
-
-import AdminConfigInput from "./AdminConfigInput";
-import TestEmailButton from "./TestEmailButton";
-
-const AdminConfigTable = () => {
-  const config = useConfig();
-  const router = useRouter();
-  const isMobile = useMediaQuery("(max-width: 560px)");
-
-  const [updatedConfigVariables, setUpdatedConfigVariables] = useState<
-    UpdateConfig[]
-  >([]);
-
-  useEffect(() => {
-    if (config.get("SETUP_STATUS") != "FINISHED") {
-      config.refresh();
-    }
-  }, []);
-
-  const updateConfigVariable = (configVariable: UpdateConfig) => {
-    const index = updatedConfigVariables.findIndex(
-      (item) => item.key === configVariable.key
-    );
-    if (index > -1) {
-      updatedConfigVariables[index] = configVariable;
-    } else {
-      setUpdatedConfigVariables([...updatedConfigVariables, configVariable]);
-    }
-  };
-
-  const [configVariablesByCategory, setCofigVariablesByCategory] =
-    useState<AdminConfigGroupedByCategory>({});
-
-  const getConfigVariables = async () => {
-    await configService.listForAdmin().then((configVariables) => {
-      const configVariablesByCategory = configVariables.reduce(
-        (categories: any, item) => {
-          const category = categories[item.category] || [];
-          category.push(item);
-          categories[item.category] = category;
-          return categories;
-        },
-        {}
-      );
-      setCofigVariablesByCategory(configVariablesByCategory);
-    });
-  };
-
-  const saveConfigVariables = async () => {
-    if (config.get("SETUP_STATUS") == "REGISTERED") {
-      await configService
-        .updateMany(updatedConfigVariables)
-        .then(async () => {
-          await configService.finishSetup();
-          router.replace("/upload");
-        })
-        .catch(toast.axiosError);
-    } else {
-      await configService
-        .updateMany(updatedConfigVariables)
-        .then(() => {
-          setUpdatedConfigVariables([]);
-          toast.success("Configurations updated successfully");
-        })
-        .catch(toast.axiosError);
-    }
-    config.refresh();
-  };
-
-  useEffect(() => {
-    getConfigVariables();
-  }, []);
-
-  return (
-    <Box mb="lg">
-      {Object.entries(configVariablesByCategory).map(
-        ([category, configVariables]) => {
-          return (
-            <Paper key={category} withBorder p="lg" mb="xl">
-              <Title mb="xs" order={3}>
-                {capitalizeFirstLetter(category)}
-              </Title>
-              {configVariables.map((configVariable) => (
-                <>
-                  <Group position="apart">
-                    <Stack
-                      style={{ maxWidth: isMobile ? "100%" : "40%" }}
-                      spacing={0}
-                    >
-                      <Title order={6}>
-                        {configVariableToFriendlyName(configVariable.key)}
-                      </Title>
-                      <Text color="dimmed" size="sm" mb="xs">
-                        {configVariable.description}
-                      </Text>
-                    </Stack>
-                    <Stack></Stack>
-                    <Box style={{ width: isMobile ? "100%" : "50%" }}>
-                      <AdminConfigInput
-                        key={configVariable.key}
-                        updateConfigVariable={updateConfigVariable}
-                        configVariable={configVariable}
-                      />
-                    </Box>
-                  </Group>
-
-                  <Space h="lg" />
-                </>
-              ))}
-              {category == "smtp" && (
-                <Group position="right">
-                  <TestEmailButton
-                    configVariablesChanged={updatedConfigVariables.length != 0}
-                    saveConfigVariables={saveConfigVariables}
-                  />
-                </Group>
-              )}
-            </Paper>
-          );
-        }
-      )}
-      <Group position="right">
-        <Button onClick={saveConfigVariables}>Save</Button>
-      </Group>
-    </Box>
-  );
-};
-
-export default AdminConfigTable;
--- a/frontend/src/components/admin/configuration/ConfigurationHeader.tsx
+++ b/frontend/src/components/admin/configuration/ConfigurationHeader.tsx
@@ -0,0 +1,54 @@
+import {
+  Burger,
+  Button,
+  Group,
+  Header,
+  MediaQuery,
+  Text,
+  useMantineTheme,
+} from "@mantine/core";
+import Link from "next/link";
+import { Dispatch, SetStateAction } from "react";
+import useConfig from "../../../hooks/config.hook";
+import Logo from "../../Logo";
+
+const ConfigurationHeader = ({
+  isMobileNavBarOpened,
+  setIsMobileNavBarOpened,
+}: {
+  isMobileNavBarOpened: boolean;
+  setIsMobileNavBarOpened: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const config = useConfig();
+  const theme = useMantineTheme();
+  return (
+    <Header height={60} p="md">
+      <div style={{ display: "flex", alignItems: "center", height: "100%" }}>
+        <MediaQuery largerThan="sm" styles={{ display: "none" }}>
+          <Burger
+            opened={isMobileNavBarOpened}
+            onClick={() => setIsMobileNavBarOpened((o) => !o)}
+            size="sm"
+            color={theme.colors.gray[6]}
+            mr="xl"
+          />
+        </MediaQuery>
+        <Group position="apart" w="100%">
+          <Link href="/" passHref>
+            <Group>
+              <Logo height={35} width={35} />
+              <Text weight={600}>{config.get("general.appName")}</Text>
+            </Group>
+          </Link>
+          <MediaQuery smallerThan="sm" styles={{ display: "none" }}>
+            <Button variant="light" component={Link} href="/admin">
+              Go back
+            </Button>
+          </MediaQuery>
+        </Group>
+      </div>
+    </Header>
+  );
+};
+
+export default ConfigurationHeader;
--- a/frontend/src/components/admin/configuration/ConfigurationNavBar.tsx
+++ b/frontend/src/components/admin/configuration/ConfigurationNavBar.tsx
@@ -0,0 +1,97 @@
+import {
+  Box,
+  Button,
+  createStyles,
+  Group,
+  MediaQuery,
+  Navbar,
+  Stack,
+  Text,
+  ThemeIcon,
+} from "@mantine/core";
+import Link from "next/link";
+import { Dispatch, SetStateAction } from "react";
+import { TbAt, TbMail, TbShare, TbSquare } from "react-icons/tb";
+
+const categories = [
+  { name: "General", icon: <TbSquare /> },
+  { name: "Email", icon: <TbMail /> },
+  { name: "Share", icon: <TbShare /> },
+  { name: "SMTP", icon: <TbAt /> },
+];
+
+const useStyles = createStyles((theme) => ({
+  activeLink: {
+    backgroundColor: theme.fn.variant({
+      variant: "light",
+      color: theme.primaryColor,
+    }).background,
+    color: theme.fn.variant({ variant: "light", color: theme.primaryColor })
+      .color,
+
+    borderRadius: theme.radius.sm,
+    fontWeight: 600,
+  },
+}));
+
+const ConfigurationNavBar = ({
+  categoryId,
+  isMobileNavBarOpened,
+  setIsMobileNavBarOpened,
+}: {
+  categoryId: string;
+  isMobileNavBarOpened: boolean;
+  setIsMobileNavBarOpened: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const { classes } = useStyles();
+  return (
+    <Navbar
+      p="md"
+      hiddenBreakpoint="sm"
+      hidden={!isMobileNavBarOpened}
+      width={{ sm: 200, lg: 300 }}
+    >
+      <Navbar.Section>
+        <Text size="xs" color="dimmed" mb="sm">
+          Configuration
+        </Text>
+        <Stack spacing="xs">
+          {categories.map((category) => (
+            <Box
+              p="xs"
+              component={Link}
+              onClick={() => setIsMobileNavBarOpened(false)}
+              className={
+                categoryId == category.name.toLowerCase()
+                  ? classes.activeLink
+                  : undefined
+              }
+              key={category.name}
+              href={`/admin/config/${category.name.toLowerCase()}`}
+            >
+              <Group>
+                <ThemeIcon
+                  variant={
+                    categoryId == category.name.toLowerCase()
+                      ? "filled"
+                      : "light"
+                  }
+                >
+                  {category.icon}
+                </ThemeIcon>
+                <Text size="sm">{category.name}</Text>
+              </Group>
+            </Box>
+          ))}
+        </Stack>
+      </Navbar.Section>
+      <MediaQuery largerThan="sm" styles={{ display: "none" }}>
+        <Button mt="xl" variant="light" component={Link} href="/admin">
+          Go back
+        </Button>
+      </MediaQuery>
+    </Navbar>
+  );
+};
+
+export default ConfigurationNavBar;
--- a/frontend/src/components/admin/configuration/LogoConfigInput.tsx
+++ b/frontend/src/components/admin/configuration/LogoConfigInput.tsx
@@ -0,0 +1,39 @@
+import { Box, FileInput, Group, Stack, Text, Title } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import { Dispatch, SetStateAction } from "react";
+import { TbUpload } from "react-icons/tb";
+
+const LogoConfigInput = ({
+  logo,
+  setLogo,
+}: {
+  logo: File | null;
+  setLogo: Dispatch<SetStateAction<File | null>>;
+}) => {
+  const isMobile = useMediaQuery("(max-width: 560px)");
+
+  return (
+    <Group position="apart">
+      <Stack style={{ maxWidth: isMobile ? "100%" : "40%" }} spacing={0}>
+        <Title order={6}>Logo</Title>
+        <Text color="dimmed" size="sm" mb="xs">
+          Change your logo by uploading a new image. The image must be a PNG and
+          should have the format 1:1.
+        </Text>
+      </Stack>
+      <Stack></Stack>
+      <Box style={{ width: isMobile ? "100%" : "50%" }}>
+        <FileInput
+          clearable
+          icon={<TbUpload size={14} />}
+          value={logo}
+          onChange={(v) => setLogo(v)}
+          accept=".png"
+          placeholder="Pick image"
+        />
+      </Box>
+    </Group>
+  );
+};
+
+export default LogoConfigInput;
--- a/frontend/src/components/admin/users/ManageUserTable.tsx
+++ b/frontend/src/components/admin/users/ManageUserTable.tsx
@@ -1,7 +1,7 @@
 import { ActionIcon, Box, Group, Skeleton, Table } from "@mantine/core";
 import { useModals } from "@mantine/modals";
 import { TbCheck, TbEdit, TbTrash } from "react-icons/tb";
-import User from "../../types/user.type";
+import User from "../../../types/user.type";
 import showUpdateUserModal from "./showUpdateUserModal";

 const ManageUserTable = ({
--- a/frontend/src/components/admin/users/showCreateUserModal.tsx
+++ b/frontend/src/components/admin/users/showCreateUserModal.tsx
@@ -5,43 +5,48 @@ import {
  Stack,
  Switch,
  TextInput,
-  Title,
 } from "@mantine/core";
 import { useForm, yupResolver } from "@mantine/form";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import * as yup from "yup";
-import userService from "../../services/user.service";
-import toast from "../../utils/toast.util";
+import userService from "../../../services/user.service";
+import toast from "../../../utils/toast.util";

 const showCreateUserModal = (
  modals: ModalsContextProps,
+  smtpEnabled: boolean,
  getUsers: () => void
 ) => {
  return modals.openModal({
-    title: <Title order={5}>Create user</Title>,
-    children: <Body modals={modals} getUsers={getUsers} />,
+    title: "Create user",
+    children: (
+      <Body modals={modals} smtpEnabled={smtpEnabled} getUsers={getUsers} />
+    ),
  });
 };

 const Body = ({
  modals,
+  smtpEnabled,
  getUsers,
 }: {
  modals: ModalsContextProps;
+  smtpEnabled: boolean;
  getUsers: () => void;
 }) => {
  const form = useForm({
    initialValues: {
      username: "",
      email: "",
-      password: "",
+      password: undefined,
      isAdmin: false,
+      setPasswordManually: false,
    },
    validate: yupResolver(
      yup.object().shape({
        email: yup.string().email(),
        username: yup.string().min(3),
-        password: yup.string().min(8),
+        password: yup.string().min(8).optional(),
      })
    ),
  });
@@ -62,14 +67,34 @@ const Body = ({
        <Stack>
          <TextInput label="Username" {...form.getInputProps("username")} />
          <TextInput label="Email" {...form.getInputProps("email")} />
-          <PasswordInput
-            label="New password"
-            {...form.getInputProps("password")}
-          />
+          {smtpEnabled && (
+            <Switch
+              mt="xs"
+              labelPosition="left"
+              label="Set password manually"
+              description="If not checked, the user will receive an email with a link to set their password."
+              {...form.getInputProps("setPasswordManually", {
+                type: "checkbox",
+              })}
+            />
+          )}
+          {(form.values.setPasswordManually || !smtpEnabled) && (
+            <PasswordInput
+              label="Password"
+              {...form.getInputProps("password")}
+            />
+          )}
          <Switch
+            styles={{
+              body: {
+                display: "flex",
+                justifyContent: "space-between",
+              },
+            }}
            mt="xs"
            labelPosition="left"
            label="Admin privileges"
+            description="If checked, the user will be able to access the admin panel."
            {...form.getInputProps("isAdmin", { type: "checkbox" })}
          />
          <Group position="right">
--- a/frontend/src/components/admin/users/showUpdateUserModal.tsx
+++ b/frontend/src/components/admin/users/showUpdateUserModal.tsx
@@ -6,14 +6,13 @@ import {
  Stack,
  Switch,
  TextInput,
-  Title,
 } from "@mantine/core";
 import { useForm, yupResolver } from "@mantine/form";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import * as yup from "yup";
-import userService from "../../services/user.service";
-import User from "../../types/user.type";
-import toast from "../../utils/toast.util";
+import userService from "../../../services/user.service";
+import User from "../../../types/user.type";
+import toast from "../../../utils/toast.util";

 const showUpdateUserModal = (
  modals: ModalsContextProps,
@@ -21,7 +20,7 @@ const showUpdateUserModal = (
  getUsers: () => void
 ) => {
  return modals.openModal({
-    title: <Title order={5}>Update {user.username}</Title>,
+    title: `Update ${user.username}`,
    children: <Body user={user} modals={modals} getUsers={getUsers} />,
  });
 };
@@ -90,7 +89,7 @@ const Body = ({
      </form>
      <Accordion>
        <Accordion.Item sx={{ borderBottom: "none" }} value="changePassword">
-          <Accordion.Control>Change password</Accordion.Control>
+          <Accordion.Control px={0}>Change password</Accordion.Control>
          <Accordion.Panel>
            <form
              onSubmit={passwordForm.onSubmit(async (values) => {
--- a/frontend/src/components/auth/SignInForm.tsx
+++ b/frontend/src/components/auth/SignInForm.tsx
@@ -32,11 +32,6 @@ const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
  const validationSchema = yup.object().shape({
    emailOrUsername: yup.string().required(),
    password: yup.string().min(8).required(),
-    totp: yup.string().when("totpRequired", {
-      is: true,
-      then: yup.string().min(6).max(6).required(),
-      otherwise: yup.string(),
-    }),
  });

  const form = useForm({
@@ -79,8 +74,8 @@ const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
        router.replace(redirectPath);
      })
      .catch((error) => {
-        if (error?.response?.data?.message == "Login token expired") {
-          toast.error("Login token expired");
+        if (error?.response?.data?.error == "share_password_required") {
+          toast.axiosError(error);
          // Refresh the page to start over
          window.location.reload();
        }
@@ -95,7 +90,7 @@ const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
      <Title order={2} align="center" weight={900}>
        Welcome back
      </Title>
-      {config.get("ALLOW_REGISTRATION") && (
+      {config.get("share.allowRegistration") && (
        <Text color="dimmed" size="sm" align="center" mt={5}>
          You don't have an account yet?{" "}
          <Anchor component={Link} href={"signUp"} size="sm">
@@ -131,7 +126,7 @@ const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
              {...form.getInputProps("totp")}
            />
          )}
-          {config.get("SMTP_ENABLED") && (
+          {config.get("smtp.enabled") && (
            <Group position="right" mt="xs">
              <Anchor component={Link} href="/auth/resetPassword" size="xs">
                Forgot password?
--- a/frontend/src/components/auth/SignUpForm.tsx
+++ b/frontend/src/components/auth/SignUpForm.tsx
@@ -41,8 +41,12 @@ const SignUpForm = () => {
    await authService
      .signUp(email, username, password)
      .then(async () => {
-        await refreshUser();
-        router.replace("/upload");
+        const user = await refreshUser();
+        if (user?.isAdmin) {
+          router.replace("/admin/intro");
+        } else {
+          router.replace("/upload");
+        }
      })
      .catch(toast.axiosError);
  };
@@ -52,7 +56,7 @@ const SignUpForm = () => {
      <Title order={2} align="center" weight={900}>
        Sign up
      </Title>
-      {config.get("ALLOW_REGISTRATION") && (
+      {config.get("share.allowRegistration") && (
        <Text color="dimmed" size="sm" align="center" mt={5}>
          You have an account already?{" "}
          <Anchor component={Link} href={"signIn"} size="sm">
--- a/frontend/src/components/core/SortIcon.tsx
+++ b/frontend/src/components/core/SortIcon.tsx
@@ -0,0 +1,41 @@
+import { ActionIcon } from "@mantine/core";
+import { Dispatch, SetStateAction } from "react";
+import { TbChevronDown, TbChevronUp, TbSelector } from "react-icons/tb";
+
+export type TableSort = {
+  property?: string;
+  direction: "asc" | "desc";
+};
+
+const TableSortIcon = ({
+  sort,
+  setSort,
+  property,
+}: {
+  sort: TableSort;
+  setSort: Dispatch<SetStateAction<TableSort>>;
+  property: string;
+}) => {
+  if (sort.property === property) {
+    return (
+      <ActionIcon
+        onClick={() =>
+          setSort({
+            property,
+            direction: sort.direction === "asc" ? "desc" : "asc",
+          })
+        }
+      >
+        {sort.direction === "asc" ? <TbChevronDown /> : <TbChevronUp />}
+      </ActionIcon>
+    );
+  } else {
+    return (
+      <ActionIcon onClick={() => setSort({ property, direction: "asc" })}>
+        <TbSelector />
+      </ActionIcon>
+    );
+  }
+};
+
+export default TableSortIcon;
--- a/frontend/src/components/header/ActionAvatar.tsx
+++ b/frontend/src/components/header/ActionAvatar.tsx
--- a/frontend/src/components/header/Header.tsx
+++ b/frontend/src/components/header/Header.tsx
@@ -4,7 +4,7 @@ import {
  Container,
  createStyles,
  Group,
-  Header,
+  Header as MantineHeader,
  Paper,
  Stack,
  Text,
@@ -108,7 +108,7 @@ const useStyles = createStyles((theme) => ({
  },
 }));

-const NavBar = () => {
+const Header = () => {
  const { user } = useUser();
  const router = useRouter();
  const config = useConfig();
@@ -141,20 +141,20 @@ const NavBar = () => {
    },
  ];

-  if (config.get("ALLOW_UNAUTHENTICATED_SHARES")) {
+  if (config.get("share.allowUnauthenticatedShares")) {
    unauthenticatedLinks.unshift({
      link: "/upload",
      label: "Upload",
    });
  }

-  if (config.get("SHOW_HOME_PAGE"))
+  if (config.get("general.showHomePage"))
    unauthenticatedLinks.unshift({
      link: "/",
      label: "Home",
    });

-  if (config.get("ALLOW_REGISTRATION"))
+  if (config.get("share.allowRegistration"))
    unauthenticatedLinks.push({
      link: "/auth/signUp",
      label: "Sign up",
@@ -187,12 +187,12 @@ const NavBar = () => {
    </>
  );
  return (
-    <Header height={HEADER_HEIGHT} mb={40} className={classes.root}>
+    <MantineHeader height={HEADER_HEIGHT} mb={40} className={classes.root}>
      <Container className={classes.header}>
        <Link href="/" passHref>
          <Group>
            <Logo height={35} width={35} />
-            <Text weight={600}>Pingvin Share</Text>
+            <Text weight={600}>{config.get("general.appName")}</Text>
          </Group>
        </Link>
        <Group spacing={5} className={classes.links}>
@@ -212,8 +212,8 @@ const NavBar = () => {
          )}
        </Transition>
      </Container>
-    </Header>
+    </MantineHeader>
  );
 };

-export default NavBar;
+export default Header;
--- a/frontend/src/components/header/NavbarShareMenu.tsx
+++ b/frontend/src/components/header/NavbarShareMenu.tsx
--- a/frontend/src/components/share/FileList.tsx
+++ b/frontend/src/components/share/FileList.tsx
@@ -1,5 +1,6 @@
 import {
  ActionIcon,
+  Box,
  Group,
  Skeleton,
  Stack,
@@ -8,9 +9,7 @@ import {
 } from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
 import { useModals } from "@mantine/modals";
-import mime from "mime-types";
-
-import Link from "next/link";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { TbDownload, TbEye, TbLink } from "react-icons/tb";
 import useConfig from "../../hooks/config.hook";
 import shareService from "../../services/share.service";
@@ -18,13 +17,17 @@ import { FileMetaData } from "../../types/File.type";
 import { Share } from "../../types/share.type";
 import { byteToHumanSizeString } from "../../utils/fileSize.util";
 import toast from "../../utils/toast.util";
+import TableSortIcon, { TableSort } from "../core/SortIcon";
+import showFilePreviewModal from "./modals/showFilePreviewModal";

 const FileList = ({
  files,
+  setShare,
  share,
  isLoading,
 }: {
  files?: FileMetaData[];
+  setShare: Dispatch<SetStateAction<Share | undefined>>;
  share: Share;
  isLoading: boolean;
 }) => {
@@ -32,10 +35,36 @@ const FileList = ({
  const config = useConfig();
  const modals = useModals();

+  const [sort, setSort] = useState<TableSort>({
+    property: undefined,
+    direction: "desc",
+  });
+
+  const sortFiles = () => {
+    if (files && sort.property) {
+      const sortedFiles = files.sort((a: any, b: any) => {
+        if (sort.direction === "asc") {
+          return b[sort.property!].localeCompare(a[sort.property!], undefined, {
+            numeric: true,
+          });
+        } else {
+          return a[sort.property!].localeCompare(b[sort.property!], undefined, {
+            numeric: true,
+          });
+        }
+      });
+
+      setShare({
+        ...share,
+        files: sortedFiles,
+      });
+    }
+  };
+
  const copyFileLink = (file: FileMetaData) => {
-    const link = `${config.get("APP_URL")}/api/shares/${share.id}/files/${
-      file.id
-    }`;
+    const link = `${config.get("general.appUrl")}/api/shares/${
+      share.id
+    }/files/${file.id}`;

    if (window.isSecureContext) {
      clipboard.copy(link);
@@ -52,55 +81,70 @@ const FileList = ({
    }
  };

+  useEffect(sortFiles, [sort]);
+
  return (
-    <Table>
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Size</th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-        {isLoading
-          ? skeletonRows
-          : files!.map((file) => (
-              <tr key={file.name}>
-                <td>{file.name}</td>
-                <td>{byteToHumanSizeString(parseInt(file.size))}</td>
-                <td>
-                  <Group position="right">
-                    {shareService.doesFileSupportPreview(file.name) && (
+    <Box sx={{ display: "block", overflowX: "auto" }}>
+      <Table>
+        <thead>
+          <tr>
+            <th>
+              <Group spacing="xs">
+                Name
+                <TableSortIcon sort={sort} setSort={setSort} property="name" />
+              </Group>
+            </th>
+            <th>
+              <Group spacing="xs">
+                Size
+                <TableSortIcon sort={sort} setSort={setSort} property="size" />
+              </Group>
+            </th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {isLoading
+            ? skeletonRows
+            : files!.map((file) => (
+                <tr key={file.name}>
+                  <td>{file.name}</td>
+                  <td>{byteToHumanSizeString(parseInt(file.size))}</td>
+                  <td>
+                    <Group position="right">
+                      {shareService.doesFileSupportPreview(file.name) && (
+                        <ActionIcon
+                          onClick={() =>
+                            showFilePreviewModal(share.id, file, modals)
+                          }
+                          size={25}
+                        >
+                          <TbEye />
+                        </ActionIcon>
+                      )}
+                      {!share.hasPassword && (
+                        <ActionIcon
+                          size={25}
+                          onClick={() => copyFileLink(file)}
+                        >
+                          <TbLink />
+                        </ActionIcon>
+                      )}
                      <ActionIcon
-                        component={Link}
-                        href={`/share/${share.id}/preview/${
-                          file.id
-                        }?type=${mime.contentType(file.name)}`}
-                        target="_blank"
                        size={25}
+                        onClick={async () => {
+                          await shareService.downloadFile(share.id, file.id);
+                        }}
                      >
-                        <TbEye />
+                        <TbDownload />
                      </ActionIcon>
-                    )}
-                    {!share.hasPassword && (
-                      <ActionIcon size={25} onClick={() => copyFileLink(file)}>
-                        <TbLink />
-                      </ActionIcon>
-                    )}
-                    <ActionIcon
-                      size={25}
-                      onClick={async () => {
-                        await shareService.downloadFile(share.id, file.id);
-                      }}
-                    >
-                      <TbDownload />
-                    </ActionIcon>
-                  </Group>
-                </td>
-              </tr>
-            ))}
-      </tbody>
-    </Table>
+                    </Group>
+                  </td>
+                </tr>
+              ))}
+        </tbody>
+      </Table>
+    </Box>
  );
 };

--- a/frontend/src/components/share/FilePreview.tsx
+++ b/frontend/src/components/share/FilePreview.tsx
@@ -0,0 +1,158 @@
+import { Button, Center, Stack, Text, Title } from "@mantine/core";
+import { modals } from "@mantine/modals";
+import Link from "next/link";
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import api from "../../services/api.service";
+
+const FilePreviewContext = React.createContext<{
+  shareId: string;
+  fileId: string;
+  mimeType: string;
+  setIsNotSupported: Dispatch<SetStateAction<boolean>>;
+}>({
+  shareId: "",
+  fileId: "",
+  mimeType: "",
+  setIsNotSupported: () => {},
+});
+
+const FilePreview = ({
+  shareId,
+  fileId,
+  mimeType,
+}: {
+  shareId: string;
+  fileId: string;
+  mimeType: string;
+}) => {
+  const [isNotSupported, setIsNotSupported] = useState(false);
+  if (isNotSupported) return <UnSupportedFile />;
+
+  return (
+    <Stack>
+      <FilePreviewContext.Provider
+        value={{ shareId, fileId, mimeType, setIsNotSupported }}
+      >
+        <FileDecider />
+      </FilePreviewContext.Provider>
+      <Button
+        variant="subtle"
+        component={Link}
+        onClick={() => modals.closeAll()}
+        target="_blank"
+        href={`/api/shares/${shareId}/files/${fileId}?download=false`}
+      >
+        View original file
+      </Button>
+    </Stack>
+  );
+};
+
+const FileDecider = () => {
+  const { mimeType, setIsNotSupported } = React.useContext(FilePreviewContext);
+
+  if (mimeType == "application/pdf") {
+    return <PdfPreview />;
+  } else if (mimeType.startsWith("video/")) {
+    return <VideoPreview />;
+  } else if (mimeType.startsWith("image/")) {
+    return <ImagePreview />;
+  } else if (mimeType.startsWith("audio/")) {
+    return <AudioPreview />;
+  } else if (mimeType.startsWith("text/")) {
+    return <TextPreview />;
+  } else {
+    setIsNotSupported(true);
+    return null;
+  }
+};
+
+const AudioPreview = () => {
+  const { shareId, fileId, setIsNotSupported } =
+    React.useContext(FilePreviewContext);
+  return (
+    <Center style={{ minHeight: 200 }}>
+      <Stack align="center" spacing={10} style={{ width: "100%" }}>
+        <audio controls style={{ width: "100%" }}>
+          <source
+            src={`/api/shares/${shareId}/files/${fileId}?download=false`}
+            onError={() => setIsNotSupported(true)}
+          />
+        </audio>
+      </Stack>
+    </Center>
+  );
+};
+
+const VideoPreview = () => {
+  const { shareId, fileId, setIsNotSupported } =
+    React.useContext(FilePreviewContext);
+  return (
+    <video width="100%" controls>
+      <source
+        src={`/api/shares/${shareId}/files/${fileId}?download=false`}
+        onError={() => setIsNotSupported(true)}
+      />
+    </video>
+  );
+};
+
+const ImagePreview = () => {
+  const { shareId, fileId, setIsNotSupported } =
+    React.useContext(FilePreviewContext);
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={`/api/shares/${shareId}/files/${fileId}?download=false`}
+      alt={`${fileId}_preview`}
+      width="100%"
+      onError={() => setIsNotSupported(true)}
+    />
+  );
+};
+
+const TextPreview = () => {
+  const { shareId, fileId } = React.useContext(FilePreviewContext);
+  const [text, setText] = useState<string | null>(null);
+
+  useEffect(() => {
+    api.get(`/shares/${shareId}/files/${fileId}?download=false`).then((res) => {
+      console.log(res.data);
+      setText(res.data);
+    });
+  }, [shareId, fileId]);
+
+  return (
+    <Center style={{ minHeight: 200 }}>
+      <Stack align="center" spacing={10} style={{ width: "100%" }}>
+        <Text sx={{ whiteSpace: "pre-wrap" }} size="sm">
+          {text}
+        </Text>
+      </Stack>
+    </Center>
+  );
+};
+
+const PdfPreview = () => {
+  const { shareId, fileId } = React.useContext(FilePreviewContext);
+  if (typeof window !== "undefined") {
+    window.location.href = `/api/shares/${shareId}/files/${fileId}?download=false`;
+  }
+  return null;
+};
+
+const UnSupportedFile = () => {
+  return (
+    <Center style={{ minHeight: 200 }}>
+      <Stack align="center" spacing={10}>
+        <Title order={3}>Preview not supported</Title>
+        <Text>
+          A preview for thise file type is unsupported. Please download the file
+          to view it.
+        </Text>
+      </Stack>
+    </Center>
+  );
+};
+
+export default FilePreview;
--- a/frontend/src/components/share/FileSizeInput.tsx
+++ b/frontend/src/components/share/FileSizeInput.tsx
@@ -34,8 +34,10 @@ const FileSizeInput = ({
          label={label}
          value={size}
          onChange={(value) => {
-            setSize(value!);
-            onChange(unitAndSizeToByte(unit, value!));
+            if (value) {
+              setSize(value);
+              onChange(unitAndSizeToByte(unit, value));
+            }
          }}
        />
      </Col>
--- a/frontend/src/components/share/modals/showCompletedReverseShareModal.tsx
+++ b/frontend/src/components/share/modals/showCompletedReverseShareModal.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, Button, Stack, TextInput, Title } from "@mantine/core";
+import { ActionIcon, Button, Stack, TextInput } from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
@@ -14,11 +14,7 @@ const showCompletedReverseShareModal = (
    closeOnClickOutside: false,
    withCloseButton: false,
    closeOnEscape: false,
-    title: (
-      <Stack align="stretch" spacing={0}>
-        <Title order={4}>Reverse share link</Title>
-      </Stack>
-    ),
+    title: "Reverse share link",
    children: <Body link={link} getReverseShares={getReverseShares} />,
  });
 };
--- a/frontend/src/components/share/modals/showCreateReverseShareModal.tsx
+++ b/frontend/src/components/share/modals/showCreateReverseShareModal.tsx
@@ -8,7 +8,6 @@ import {
  Stack,
  Switch,
  Text,
-  Title,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { useModals } from "@mantine/modals";
@@ -25,7 +24,7 @@ const showCreateReverseShareModal = (
  getReverseShares: () => void
 ) => {
  return modals.openModal({
-    title: <Title order={4}>Create reverse share</Title>,
+    title: "Create reverse share",
    children: (
      <Body
        showSendEmailNotificationOption={showSendEmailNotificationOption}
--- a/frontend/src/components/share/modals/showFilePreviewModal.tsx
+++ b/frontend/src/components/share/modals/showFilePreviewModal.tsx
@@ -0,0 +1,21 @@
+import { ModalsContextProps } from "@mantine/modals/lib/context";
+import mime from "mime-types";
+import { FileMetaData } from "../../../types/File.type";
+import FilePreview from "../FilePreview";
+
+const showFilePreviewModal = (
+  shareId: string,
+  file: FileMetaData,
+  modals: ModalsContextProps
+) => {
+  const mimeType = (mime.contentType(file.name) || "").split(";")[0];
+  return modals.openModal({
+    size: "xl",
+    title: file.name,
+    children: (
+      <FilePreview shareId={shareId} fileId={file.id} mimeType={mimeType} />
+    ),
+  });
+};
+
+export default showFilePreviewModal;
--- a/frontend/src/components/share/showEnterPasswordModal.tsx
+++ b/frontend/src/components/share/showEnterPasswordModal.tsx
@@ -1,57 +1,52 @@
-import { Button, PasswordInput, Stack, Text, Title } from "@mantine/core";
+import { Button, PasswordInput, Stack, Text } from "@mantine/core";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import { useState } from "react";

 const showEnterPasswordModal = (
  modals: ModalsContextProps,
-  submitCallback: any
+  submitCallback: (password: string) => Promise<void>
 ) => {
  return modals.openModal({
    closeOnClickOutside: false,
    withCloseButton: false,
    closeOnEscape: false,
-    title: (
-      <>
-        <Title order={4}>Password required</Title>
-        <Text size="sm">
-          This access this share please enter the password for the share.
-        </Text>
-      </>
-    ),
+    title: "Password required",
    children: <Body submitCallback={submitCallback} />,
  });
 };

-const Body = ({ submitCallback }: { submitCallback: any }) => {
+const Body = ({
+  submitCallback,
+}: {
+  submitCallback: (password: string) => Promise<void>;
+}) => {
  const [password, setPassword] = useState("");
  const [passwordWrong, setPasswordWrong] = useState(false);
  return (
-    <>
-      <Stack align="stretch">
-        <PasswordInput
-          variant="filled"
-          placeholder="Password"
-          error={passwordWrong && "Wrong password"}
-          onFocus={() => setPasswordWrong(false)}
-          onChange={(e) => setPassword(e.target.value)}
-          value={password}
-        />
-        <Button
-          onClick={() =>
-            submitCallback(password)
-              .then((res: any) => res)
-              .catch((e: any) => {
-                const error = e.response.data.message;
-                if (error == "Wrong password") {
-                  setPasswordWrong(true);
-                }
-              })
-          }
-        >
-          Submit
-        </Button>
-      </Stack>
-    </>
+    <Stack align="stretch">
+      <Text size="sm">
+        This access this share please enter the password for the share.
+      </Text>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          submitCallback(password);
+        }}
+      >
+        <Stack>
+          <PasswordInput
+            variant="filled"
+            placeholder="Password"
+            error={passwordWrong && "Wrong password"}
+            onFocus={() => setPasswordWrong(false)}
+            onChange={(e) => setPassword(e.target.value)}
+            value={password}
+          />
+          <Button type="submit">Submit</Button>
+        </Stack>
+      </form>
+    </Stack>
  );
 };

--- a/frontend/src/components/share/showErrorModal.tsx
+++ b/frontend/src/components/share/showErrorModal.tsx
@@ -1,4 +1,4 @@
-import { Button, Stack, Text, Title } from "@mantine/core";
+import { Button, Stack, Text } from "@mantine/core";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import { useRouter } from "next/router";
@@ -12,7 +12,7 @@ const showErrorModal = (
    closeOnClickOutside: false,
    withCloseButton: false,
    closeOnEscape: false,
-    title: <Title order={4}>{title}</Title>,
+    title: title,

    children: <Body text={text} />,
  });
--- a/frontend/src/components/upload/modals/showCompletedUploadModal.tsx
+++ b/frontend/src/components/upload/modals/showCompletedUploadModal.tsx
@@ -1,11 +1,4 @@
-import {
-  ActionIcon,
-  Button,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-} from "@mantine/core";
+import { ActionIcon, Button, Stack, Text, TextInput } from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
@@ -24,11 +17,7 @@ const showCompletedUploadModal = (
    closeOnClickOutside: false,
    withCloseButton: false,
    closeOnEscape: false,
-    title: (
-      <Stack align="stretch" spacing={0}>
-        <Title order={4}>Share ready</Title>
-      </Stack>
-    ),
+    title: "Share ready",
    children: <Body share={share} appUrl={appUrl} />,
  });
 };
--- a/frontend/src/components/upload/modals/showCreateUploadModal.tsx
+++ b/frontend/src/components/upload/modals/showCreateUploadModal.tsx
@@ -37,7 +37,7 @@ const showCreateUploadModal = (
  uploadCallback: (createShare: CreateShare) => void
 ) => {
  return modals.openModal({
-    title: <Title order={4}>Share</Title>,
+    title: "Share",
    children: (
      <CreateUploadModalBody
        options={options}
--- a/frontend/src/middleware.ts
+++ b/frontend/src/middleware.ts
@@ -15,9 +15,8 @@ export async function middleware(request: NextRequest) {
  const routes = {
    unauthenticated: new Routes(["/auth/*", "/"]),
    public: new Routes(["/share/*", "/upload/*"]),
-    setupStatusRegistered: new Routes(["/auth/*", "/admin/setup"]),
    admin: new Routes(["/admin/*"]),
-    account: new Routes(["/account/*"]),
+    account: new Routes(["/account*"]),
    disabled: new Routes([]),
  };

@@ -45,15 +44,15 @@ export async function middleware(request: NextRequest) {
    user = null;
  }

-  if (!getConfig("ALLOW_REGISTRATION")) {
+  if (!getConfig("share.allowRegistration")) {
    routes.disabled.routes.push("/auth/signUp");
  }

-  if (getConfig("ALLOW_UNAUTHENTICATED_SHARES")) {
+  if (getConfig("share.allowUnauthenticatedShares")) {
    routes.public.routes = ["*"];
  }

-  if (!getConfig("SMTP_ENABLED")) {
+  if (!getConfig("smtp.enabled")) {
    routes.disabled.routes.push("/auth/resetPassword*");
  }

@@ -63,19 +62,10 @@ export async function middleware(request: NextRequest) {
    {
      condition: routes.disabled.contains(route),
      path: "/",
-    },
-    // Setup status
-    {
-      condition: getConfig("SETUP_STATUS") == "STARTED" && route != "/auth/signUp",
-      path: "/auth/signUp",
-    },
-    {
-      condition: getConfig("SETUP_STATUS") == "REGISTERED" && !routes.setupStatusRegistered.contains(route),
-      path: user ? "/admin/setup" : "/auth/signIn",
    },
     // Authenticated state
     {
-      condition: user && routes.unauthenticated.contains(route) && !getConfig("ALLOW_UNAUTHENTICATED_SHARES"),
+      condition: user && routes.unauthenticated.contains(route) && !getConfig("share.allowUnauthenticatedShares"),
      path: "/upload",
    },
    // Unauthenticated state
@@ -94,7 +84,7 @@ export async function middleware(request: NextRequest) {
    },
    // Home page
    {
-      condition: (!getConfig("SHOW_HOME_PAGE") || user) && route == "/",
+      condition: (!getConfig("general.showHomePage") || user) && route == "/",
      path: "/upload",
    },
  ];
--- a/frontend/src/pages/404.tsx
+++ b/frontend/src/pages/404.tsx
@@ -1,14 +1,13 @@
-import React from "react";
 import {
-  createStyles,
-  Title,
-  Text,
  Button,
  Container,
+  createStyles,
  Group,
+  Text,
+  Title,
 } from "@mantine/core";
-import Meta from "../components/Meta";
 import Link from "next/link";
+import Meta from "../components/Meta";

 const useStyles = createStyles((theme) => ({
  root: {
@@ -21,7 +20,7 @@ const useStyles = createStyles((theme) => ({
    fontWeight: 900,
    fontSize: 220,
    lineHeight: 1,
-    marginBottom: theme.spacing.xl * 1.5,
+    marginBottom: `calc(${theme.spacing.xl} * 100)`,
    color: theme.colors.gray[2],

    [theme.fn.smallerThan("sm")]: {
@@ -32,7 +31,7 @@ const useStyles = createStyles((theme) => ({
  description: {
    maxWidth: 500,
    margin: "auto",
-    marginBottom: theme.spacing.xl * 1.5,
+    marginBottom: `calc(${theme.spacing.xl} * 100)`,
  },
 }));

--- a/frontend/src/pages/_app.tsx
+++ b/frontend/src/pages/_app.tsx
@@ -6,13 +6,14 @@ import {
 } from "@mantine/core";
 import { useColorScheme } from "@mantine/hooks";
 import { ModalsProvider } from "@mantine/modals";
-import { NotificationsProvider } from "@mantine/notifications";
+import { Notifications } from "@mantine/notifications";
 import axios from "axios";
 import { getCookie, setCookie } from "cookies-next";
 import { GetServerSidePropsContext } from "next";
 import type { AppProps } from "next/app";
+import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import Header from "../components/navBar/NavBar";
+import Header from "../components/header/Header";
 import { ConfigContext } from "../hooks/config.hook";
 import usePreferences from "../hooks/usePreferences";
 import { UserContext } from "../hooks/user.hook";
@@ -24,17 +25,26 @@ import globalStyle from "../styles/mantine.style";
 import Config from "../types/config.type";
 import { CurrentUser } from "../types/user.type";

+const excludeDefaultLayoutRoutes = ["/admin/config/[category]"];
+
 function App({ Component, pageProps }: AppProps) {
  const systemTheme = useColorScheme(pageProps.colorScheme);
+  const router = useRouter();
+
  const [colorScheme, setColorScheme] = useState<ColorScheme>(systemTheme);
  const preferences = usePreferences();

  const [user, setUser] = useState<CurrentUser | null>(pageProps.user);
+  const [route, setRoute] = useState<string>(pageProps.route);

  const [configVariables, setConfigVariables] = useState<Config[]>(
    pageProps.configVariables
  );

+  useEffect(() => {
+    setRoute(router.pathname);
+  }, [router.pathname]);
+
  useEffect(() => {
    setInterval(async () => await authService.refreshAccessToken(), 30 * 1000);
  }, []);
@@ -66,34 +76,39 @@ function App({ Component, pageProps }: AppProps) {
        toggleColorScheme={toggleColorScheme}
      >
        <GlobalStyle />
-        <NotificationsProvider>
-          <ModalsProvider>
-            <ConfigContext.Provider
+        <Notifications />
+        <ModalsProvider>
+          <ConfigContext.Provider
+            value={{
+              configVariables,
+              refresh: async () => {
+                setConfigVariables(await configService.list());
+              },
+            }}
+          >
+            <UserContext.Provider
              value={{
-                configVariables,
-                refresh: async () => {
-                  setConfigVariables(await configService.list());
+                user,
+                refreshUser: async () => {
+                  const user = await userService.getCurrentUser();
+                  setUser(user);
+                  return user;
                },
              }}
            >
-              <UserContext.Provider
-                value={{
-                  user,
-                  refreshUser: async () => {
-                    const user = await userService.getCurrentUser();
-                    setUser(user);
-                    return user;
-                  },
-                }}
-              >
-                <Header />
-                <Container>
-                  <Component {...pageProps} />
-                </Container>
-              </UserContext.Provider>
-            </ConfigContext.Provider>
-          </ModalsProvider>
-        </NotificationsProvider>
+              {excludeDefaultLayoutRoutes.includes(route) ? (
+                <Component {...pageProps} />
+              ) : (
+                <>
+                  <Header />
+                  <Container>
+                    <Component {...pageProps} />
+                  </Container>
+                </>
+              )}
+            </UserContext.Provider>
+          </ConfigContext.Provider>
+        </ModalsProvider>
      </ColorSchemeProvider>
    </MantineProvider>
  );
@@ -105,12 +120,13 @@ App.getInitialProps = async ({ ctx }: { ctx: GetServerSidePropsContext }) => {
  let pageProps: {
    user?: CurrentUser;
    configVariables?: Config[];
+    route?: string;
    colorScheme: ColorScheme;
  } = {
+    route: ctx.resolvedUrl,
    colorScheme:
      (getCookie("mantine-color-scheme", ctx) as ColorScheme) ?? "light",
  };
-
  if (ctx.req) {
    const cookieHeader = ctx.req.headers.cookie;

@@ -123,6 +139,8 @@ App.getInitialProps = async ({ ctx }: { ctx: GetServerSidePropsContext }) => {
    pageProps.configVariables = (
      await axios(`http://localhost:8080/api/configs`)
    ).data;
+
+    pageProps.route = ctx.req.url;
  }

  return { pageProps };
--- a/frontend/src/pages/_document.tsx
+++ b/frontend/src/pages/_document.tsx
@@ -11,11 +11,9 @@ export default class _Document extends Document {
      <Html>
        <Head>
          <link rel="manifest" href="/manifest.json" />
-          <link rel="apple-touch-icon" href="/icons/icon-white-128x128.png" />
+          <link rel="icon" type="image/x-icon" href="/img/favicon.ico" />
+          <link rel="apple-touch-icon" href="/img/icons/icon-128x128.png" />

-          <meta property="og:image" content="/img/opengraph-default.png" />
-          <meta name="twitter:card" content="summary_large_image" />
-          <meta name="twitter:image" content="/img/opengraph-default.png" />
          <meta name="robots" content="noindex" />
          <meta name="theme-color" content="#46509e" />
        </Head>
--- a/frontend/src/pages/account/reverseShares.tsx
+++ b/frontend/src/pages/account/reverseShares.tsx
@@ -67,7 +67,7 @@ const MyShares = () => {
          onClick={() =>
            showCreateReverseShareModal(
              modals,
-              config.get("SMTP_ENABLED"),
+              config.get("smtp.enabled"),
              getReverseShares
            )
          }
@@ -129,9 +129,9 @@ const MyShares = () => {
                                  onClick={() => {
                                    if (window.isSecureContext) {
                                      clipboard.copy(
-                                        `${config.get("APP_URL")}/share/${
-                                          share.id
-                                        }`
+                                        `${config.get(
+                                          "general.appUrl"
+                                        )}/share/${share.id}`
                                      );
                                      toast.success(
                                        "The share link was copied to the keyboard."
@@ -140,7 +140,7 @@ const MyShares = () => {
                                      showShareLinkModal(
                                        modals,
                                        share.id,
-                                        config.get("APP_URL")
+                                        config.get("general.appUrl")
                                      );
                                    }
                                  }}
--- a/frontend/src/pages/account/shares.tsx
+++ b/frontend/src/pages/account/shares.tsx
@@ -84,7 +84,9 @@ const MyShares = () => {
                        onClick={() => {
                          if (window.isSecureContext) {
                            clipboard.copy(
-                              `${config.get("APP_URL")}/share/${share.id}`
+                              `${config.get("general.appUrl")}/share/${
+                                share.id
+                              }`
                            );
                            toast.success(
                              "Your link was copied to the keyboard."
@@ -93,7 +95,7 @@ const MyShares = () => {
                            showShareLinkModal(
                              modals,
                              share.id,
-                              config.get("APP_URL")
+                              config.get("general.appUrl")
                            );
                          }
                        }}
--- a/frontend/src/pages/admin/config.tsx
+++ b/frontend/src/pages/admin/config.tsx
@@ -1,18 +0,0 @@
-import { Space, Title } from "@mantine/core";
-import AdminConfigTable from "../../components/admin/configuration/AdminConfigTable";
-import Meta from "../../components/Meta";
-
-const AdminConfig = () => {
-  return (
-    <>
-      <Meta title="Configuration" />
-      <Title mb={30} order={3}>
-        Configuration
-      </Title>
-      <AdminConfigTable />
-      <Space h="xl" />
-    </>
-  );
-};
-
-export default AdminConfig;
--- a/frontend/src/pages/admin/config/[category].tsx
+++ b/frontend/src/pages/admin/config/[category].tsx
@@ -0,0 +1,168 @@
+import {
+  AppShell,
+  Box,
+  Button,
+  Container,
+  Group,
+  Stack,
+  Text,
+  Title,
+  useMantineTheme,
+} from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import AdminConfigInput from "../../../components/admin/configuration/AdminConfigInput";
+import ConfigurationHeader from "../../../components/admin/configuration/ConfigurationHeader";
+import ConfigurationNavBar from "../../../components/admin/configuration/ConfigurationNavBar";
+import LogoConfigInput from "../../../components/admin/configuration/LogoConfigInput";
+import TestEmailButton from "../../../components/admin/configuration/TestEmailButton";
+import CenterLoader from "../../../components/core/CenterLoader";
+import Meta from "../../../components/Meta";
+import useConfig from "../../../hooks/config.hook";
+import configService from "../../../services/config.service";
+import { AdminConfig, UpdateConfig } from "../../../types/config.type";
+import {
+  capitalizeFirstLetter,
+  configVariableToFriendlyName,
+} from "../../../utils/string.util";
+import toast from "../../../utils/toast.util";
+
+export default function AppShellDemo() {
+  const theme = useMantineTheme();
+  const router = useRouter();
+
+  const [isMobileNavBarOpened, setIsMobileNavBarOpened] = useState(false);
+  const isMobile = useMediaQuery("(max-width: 560px)");
+  const config = useConfig();
+
+  const categoryId = (router.query.category as string | undefined) ?? "general";
+
+  const [configVariables, setConfigVariables] = useState<AdminConfig[]>();
+  const [updatedConfigVariables, setUpdatedConfigVariables] = useState<
+    UpdateConfig[]
+  >([]);
+
+  const [logo, setLogo] = useState<File | null>(null);
+
+  const saveConfigVariables = async () => {
+    if (logo) {
+      configService
+        .changeLogo(logo)
+        .then(() => {
+          setLogo(null);
+          toast.success(
+            "Logo updated successfully. It may take a few minutes to update on the website."
+          );
+        })
+        .catch(toast.axiosError);
+    }
+
+    if (updatedConfigVariables.length > 0) {
+      await configService
+        .updateMany(updatedConfigVariables)
+        .then(() => {
+          setUpdatedConfigVariables([]);
+          toast.success("Configurations updated successfully");
+        })
+        .catch(toast.axiosError);
+      config.refresh();
+    }
+  };
+
+  const updateConfigVariable = (configVariable: UpdateConfig) => {
+    const index = updatedConfigVariables.findIndex(
+      (item) => item.key === configVariable.key
+    );
+    if (index > -1) {
+      updatedConfigVariables[index] = configVariable;
+    } else {
+      setUpdatedConfigVariables([...updatedConfigVariables, configVariable]);
+    }
+  };
+
+  useEffect(() => {
+    configService.getByCategory(categoryId).then((configVariables) => {
+      setConfigVariables(configVariables);
+    });
+  }, [categoryId]);
+
+  return (
+    <>
+      <Meta title="Configuration" />
+      <AppShell
+        styles={{
+          main: {
+            background:
+              theme.colorScheme === "dark"
+                ? theme.colors.dark[8]
+                : theme.colors.gray[0],
+          },
+        }}
+        navbar={
+          <ConfigurationNavBar
+            categoryId={categoryId}
+            isMobileNavBarOpened={isMobileNavBarOpened}
+            setIsMobileNavBarOpened={setIsMobileNavBarOpened}
+          />
+        }
+        header={
+          <ConfigurationHeader
+            isMobileNavBarOpened={isMobileNavBarOpened}
+            setIsMobileNavBarOpened={setIsMobileNavBarOpened}
+          />
+        }
+      >
+        <Container size="lg">
+          {!configVariables ? (
+            <CenterLoader />
+          ) : (
+            <>
+              <Stack>
+                <Title mb="md" order={3}>
+                  {capitalizeFirstLetter(categoryId)}
+                </Title>
+                {configVariables.map((configVariable) => (
+                  <Group key={configVariable.key} position="apart">
+                    <Stack
+                      style={{ maxWidth: isMobile ? "100%" : "40%" }}
+                      spacing={0}
+                    >
+                      <Title order={6}>
+                        {configVariableToFriendlyName(configVariable.name)}
+                      </Title>
+                      <Text color="dimmed" size="sm" mb="xs">
+                        {configVariable.description}
+                      </Text>
+                    </Stack>
+                    <Stack></Stack>
+                    <Box style={{ width: isMobile ? "100%" : "50%" }}>
+                      <AdminConfigInput
+                        key={configVariable.key}
+                        configVariable={configVariable}
+                        updateConfigVariable={updateConfigVariable}
+                      />
+                    </Box>
+                  </Group>
+                ))}
+                {categoryId == "general" && (
+                  <LogoConfigInput logo={logo} setLogo={setLogo} />
+                )}
+              </Stack>
+              <Group mt="lg" position="right">
+                {categoryId == "smtp" && (
+                  <TestEmailButton
+                    configVariablesChanged={updatedConfigVariables.length != 0}
+                    saveConfigVariables={saveConfigVariables}
+                  />
+                )}
+                <Button onClick={saveConfigVariables}>Save</Button>
+              </Group>
+            </>
+          )}
+        </Container>
+      </AppShell>
+    </>
+  );
+}
--- a/frontend/src/pages/admin/index.tsx
+++ b/frontend/src/pages/admin/index.tsx
@@ -41,7 +41,7 @@ const Admin = () => {
    {
      title: "Configuration",
      icon: TbSettings,
-      route: "/admin/config",
+      route: "/admin/config/general",
    },
  ]);

--- a/frontend/src/pages/admin/intro.tsx
+++ b/frontend/src/pages/admin/intro.tsx
@@ -0,0 +1,59 @@
+import {
+  Anchor,
+  Button,
+  Center,
+  Container,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import Link from "next/link";
+import Logo from "../../components/Logo";
+import Meta from "../../components/Meta";
+
+const Intro = () => {
+  return (
+    <>
+      <Meta title="Intro" />
+      <Container size="xs">
+        <Stack>
+          <Center>
+            <Logo height={80} width={80} />
+          </Center>
+          <Center>
+            <Title order={2}>Welcome to Pingvin Share</Title>
+          </Center>
+          <Text>
+            If you enjoy Pingvin Share please ⭐️ it on{" "}
+            <Anchor
+              target="_blank"
+              href="https://github.com/stonith404/pingvin-share"
+            >
+              GitHub
+            </Anchor>{" "}
+            or{" "}
+            <Anchor
+              target="_blank"
+              href="https://github.com/sponsors/stonith404"
+            >
+              buy me a coffee
+            </Anchor>{" "}
+            if you want to support my work.
+          </Text>
+          <Text>Enough talked, have fun with Pingvin Share!</Text>
+          <Text mt="lg">How to you want to continue?</Text>
+          <Stack>
+            <Button href="/admin/config/general" component={Link}>
+              Customize configuration
+            </Button>
+            <Button href="/" component={Link} variant="light">
+              Explore Pingvin Share
+            </Button>
+          </Stack>
+        </Stack>
+      </Container>
+    </>
+  );
+};
+
+export default Intro;
--- a/frontend/src/pages/admin/setup.tsx
+++ b/frontend/src/pages/admin/setup.tsx
@@ -1,23 +0,0 @@
-import { Box, Stack, Text, Title } from "@mantine/core";
-import AdminConfigTable from "../../components/admin/configuration/AdminConfigTable";
-
-import Logo from "../../components/Logo";
-import Meta from "../../components/Meta";
-
-const Setup = () => {
-  return (
-    <>
-      <Meta title="Setup" />
-      <Stack align="center">
-        <Logo height={80} width={80} />
-        <Title order={2}>Welcome to Pingvin Share</Title>
-        <Text>Let's customize Pingvin Share for you! </Text>
-        <Box style={{ width: "100%" }}>
-          <AdminConfigTable />
-        </Box>
-      </Stack>
-    </>
-  );
-};
-
-export default Setup;
--- a/frontend/src/pages/admin/users.tsx
+++ b/frontend/src/pages/admin/users.tsx
@@ -2,9 +2,10 @@ import { Button, Group, Space, Text, Title } from "@mantine/core";
 import { useModals } from "@mantine/modals";
 import { useEffect, useState } from "react";
 import { TbPlus } from "react-icons/tb";
-import ManageUserTable from "../../components/admin/ManageUserTable";
-import showCreateUserModal from "../../components/admin/showCreateUserModal";
+import ManageUserTable from "../../components/admin/users/ManageUserTable";
+import showCreateUserModal from "../../components/admin/users/showCreateUserModal";
 import Meta from "../../components/Meta";
+import useConfig from "../../hooks/config.hook";
 import userService from "../../services/user.service";
 import User from "../../types/user.type";
 import toast from "../../utils/toast.util";
@@ -12,6 +13,8 @@ import toast from "../../utils/toast.util";
 const Users = () => {
  const [users, setUsers] = useState<User[]>([]);
  const [isLoading, setIsLoading] = useState(true);
+
+  const config = useConfig();
  const modals = useModals();

  const getUsers = () => {
@@ -54,7 +57,9 @@ const Users = () => {
          User management
        </Title>
        <Button
-          onClick={() => showCreateUserModal(modals, getUsers)}
+          onClick={() =>
+            showCreateUserModal(modals, config.get("smtp.enabled"), getUsers)
+          }
          leftIcon={<TbPlus size={20} />}
        >
          Create
--- a/frontend/src/pages/api/[...all].tsx
+++ b/frontend/src/pages/api/[...all].tsx
@@ -11,7 +11,7 @@ export const config = {
 export default (req: NextApiRequest, res: NextApiResponse) => {
  return httpProxyMiddleware(req, res, {
    headers: {
-      "X-Forwarded-For": req.socket.remoteAddress ?? "",
+      "X-Forwarded-For": req.socket?.remoteAddress ?? "",
    },
    target: "http://localhost:8080",
  });
--- a/frontend/src/pages/auth/resetPassword/[resetPasswordToken].tsx
+++ b/frontend/src/pages/auth/resetPassword/[resetPasswordToken].tsx
@@ -51,7 +51,6 @@ const ResetPassword = () => {
      <Paper withBorder shadow="md" p={30} radius="md" mt="xl">
        <form
          onSubmit={form.onSubmit((values) => {
-            console.log(resetPasswordToken);
            authService
              .resetPassword(resetPasswordToken, values.password)
              .then(() => {
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -8,11 +8,11 @@ import {
  ThemeIcon,
  Title,
 } from "@mantine/core";
-import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { TbCheck } from "react-icons/tb";
+import Logo from "../components/Logo";
 import Meta from "../components/Meta";
 import useUser from "../hooks/user.hook";

@@ -20,13 +20,13 @@ const useStyles = createStyles((theme) => ({
  inner: {
    display: "flex",
    justifyContent: "space-between",
-    paddingTop: theme.spacing.xl * 4,
-    paddingBottom: theme.spacing.xl * 4,
+    paddingTop: `calc(${theme.spacing.md} * 4)`,
+    paddingBottom: `calc(${theme.spacing.md} * 4)`,
  },

  content: {
    maxWidth: 480,
-    marginRight: theme.spacing.xl * 3,
+    marginRight: `calc(${theme.spacing.md} * 3)`,

    [theme.fn.smallerThan("md")]: {
      maxWidth: "100%",
@@ -150,12 +150,7 @@ export default function Home() {
            </Group>
          </div>
          <Group className={classes.image} align="center">
-            <Image
-              src="/img/logo.svg"
-              alt="Pingvin Share Logo"
-              width={200}
-              height={200}
-            />
+            <Logo width={200} height={200} />
          </Group>
        </div>
      </Container>
--- a/frontend/src/pages/share/[shareId]/index.tsx
+++ b/frontend/src/pages/share/[shareId]/index.tsx
@@ -9,6 +9,7 @@ import showEnterPasswordModal from "../../../components/share/showEnterPasswordM
 import showErrorModal from "../../../components/share/showErrorModal";
 import shareService from "../../../services/share.service";
 import { Share as ShareType } from "../../../types/share.type";
+import toast from "../../../utils/toast.util";

 export function getServerSideProps(context: GetServerSidePropsContext) {
  return {
@@ -28,12 +29,15 @@ const Share = ({ shareId }: { shareId: string }) => {
        getFiles();
      })
      .catch((e) => {
-        if (e.response.data.error == "share_max_views_exceeded") {
+        const { error } = e.response.data;
+        if (error == "share_max_views_exceeded") {
          showErrorModal(
            modals,
            "Visitor limit exceeded",
            "The visitor limit from this share has been exceeded."
          );
+        } else {
+          toast.axiosError(e);
        }
      });
  };
@@ -85,7 +89,12 @@ const Share = ({ shareId }: { shareId: string }) => {
        {share?.files.length > 1 && <DownloadAllButton shareId={shareId} />}
      </Group>

-      <FileList files={share?.files} share={share!} isLoading={!share} />
+      <FileList
+        files={share?.files}
+        setShare={setShare}
+        share={share!}
+        isLoading={!share}
+      />
    </>
  );
 };
--- a/frontend/src/pages/share/[shareId]/preview/[fileId].tsx
+++ b/frontend/src/pages/share/[shareId]/preview/[fileId].tsx
@@ -1,92 +0,0 @@
-import { Center, Stack, Text, Title } from "@mantine/core";
-import { GetServerSidePropsContext } from "next";
-import { useState } from "react";
-
-export function getServerSideProps(context: GetServerSidePropsContext) {
-  const { shareId, fileId } = context.params!;
-
-  const mimeType = context.query.type as string;
-
-  return {
-    props: { shareId, fileId, mimeType },
-  };
-}
-
-const UnSupportedFile = () => {
-  return (
-    <Center style={{ height: "70vh" }}>
-      <Stack align="center" spacing={10}>
-        <Title order={3}>Preview not supported</Title>
-        <Text>
-          A preview for thise file type is unsupported. Please download the file
-          to view it.
-        </Text>
-      </Stack>
-    </Center>
-  );
-};
-
-const FilePreview = ({
-  shareId,
-  fileId,
-  mimeType,
-}: {
-  shareId: string;
-  fileId: string;
-  mimeType: string;
-}) => {
-  const [isNotSupported, setIsNotSupported] = useState(false);
-
-  if (isNotSupported) return <UnSupportedFile />;
-
-  if (mimeType == "application/pdf") {
-    window.location.href = `/api/shares/${shareId}/files/${fileId}?download=false`;
-    return null;
-  } else if (mimeType.startsWith("video/")) {
-    return (
-      <video
-        width="100%"
-        controls
-        onError={() => {
-          setIsNotSupported(true);
-        }}
-      >
-        <source src={`/api/shares/${shareId}/files/${fileId}?download=false`} />
-      </video>
-    );
-  } else if (mimeType.startsWith("image/")) {
-    return (
-      // eslint-disable-next-line @next/next/no-img-element
-      <img
-        onError={() => {
-          setIsNotSupported(true);
-        }}
-        src={`/api/shares/${shareId}/files/${fileId}?download=false`}
-        alt={`${fileId}_preview`}
-        width="100%"
-      />
-    );
-  } else if (mimeType.startsWith("audio/")) {
-    return (
-      <Center style={{ height: "70vh" }}>
-        <Stack align="center" spacing={10} style={{ width: "100%" }}>
-          <audio
-            controls
-            style={{ width: "100%" }}
-            onError={() => {
-              setIsNotSupported(true);
-            }}
-          >
-            <source
-              src={`/api/shares/${shareId}/files/${fileId}?download=false`}
-            />
-          </audio>
-        </Stack>
-      </Center>
-    );
-  } else {
-    return <UnSupportedFile />;
-  }
-};
-
-export default FilePreview;
--- a/frontend/src/pages/upload/index.tsx
+++ b/frontend/src/pages/upload/index.tsx
@@ -35,7 +35,7 @@ const Upload = ({
  const [files, setFiles] = useState<FileUpload[]>([]);
  const [isUploading, setisUploading] = useState(false);

-  maxShareSize ??= parseInt(config.get("MAX_SHARE_SIZE"));
+  maxShareSize ??= parseInt(config.get("share.maxSize"));

  const uploadFiles = async (share: CreateShare) => {
    setisUploading(true);
@@ -59,7 +59,10 @@ const Upload = ({

        setFileProgress(1);

-        const chunks = Math.ceil(file.size / chunkSize);
+        let chunks = Math.ceil(file.size / chunkSize);
+
+        // If the file is 0 bytes, we still need to upload 1 chunk
+        if (chunks == 0) chunks++;

        for (let chunkIndex = 0; chunkIndex < chunks; chunkIndex++) {
          const from = chunkIndex * chunkSize;
@@ -78,7 +81,7 @@ const Upload = ({
                      name: file.name,
                    },
                    chunkIndex,
-                    Math.ceil(file.size / chunkSize)
+                    chunks
                  )
                  .then((response) => {
                    fileId = response.id;
@@ -125,7 +128,7 @@ const Upload = ({
        toast.error(
          `${fileErrorCount} file(s) failed to upload. Trying again.`,
          {
-            disallowClose: true,
+            withCloseButton: false,
            autoClose: false,
          }
        );
@@ -146,7 +149,7 @@ const Upload = ({
        .completeShare(createdShare.id)
        .then((share) => {
          setisUploading(false);
-          showCompletedUploadModal(modals, share, config.get("APP_URL"));
+          showCompletedUploadModal(modals, share, config.get("general.appUrl"));
          setFiles([]);
        })
        .catch(() =>
@@ -168,12 +171,12 @@ const Upload = ({
              {
                isUserSignedIn: user ? true : false,
                isReverseShare,
-                appUrl: config.get("APP_URL"),
+                appUrl: config.get("general.appUrl"),
                allowUnauthenticatedShares: config.get(
-                  "ALLOW_UNAUTHENTICATED_SHARES"
+                  "share.allowUnauthenticatedShares"
                ),
                enableEmailRecepients: config.get(
-                  "ENABLE_SHARE_EMAIL_RECIPIENTS"
+                  "email.enableShareEmailRecipients"
                ),
              },
              uploadFiles
--- a/frontend/src/services/config.service.ts
+++ b/frontend/src/services/config.service.ts
@@ -6,8 +6,8 @@ const list = async (): Promise<Config[]> => {
  return (await api.get("/configs")).data;
 };

-const listForAdmin = async (): Promise<AdminConfig[]> => {
-  return (await api.get("/configs/admin")).data;
+const getByCategory = async (category: string): Promise<AdminConfig[]> => {
+  return (await api.get(`/configs/admin/${category}`)).data;
 };

 const updateMany = async (data: UpdateConfig[]): Promise<AdminConfig[]> => {
@@ -46,12 +46,19 @@ const isNewReleaseAvailable = async () => {
  return response.tag_name.replace("v", "") != process.env.VERSION;
 };

+const changeLogo = async (file: File) => {
+  const form = new FormData();
+  form.append("file", file);
+
+  await api.post("/configs/admin/logo", form);
+};
 export default {
  list,
-  listForAdmin,
+  getByCategory,
  updateMany,
  get,
  finishSetup,
  sendTestEmail,
  isNewReleaseAvailable,
+  changeLogo,
 };
--- a/frontend/src/services/share.service.ts
+++ b/frontend/src/services/share.service.ts
@@ -53,7 +53,7 @@ const isShareIdAvailable = async (id: string): Promise<boolean> => {
 };

 const doesFileSupportPreview = (fileName: string) => {
-  const mimeType = mime.contentType(fileName);
+  const mimeType = (mime.contentType(fileName) || "").split(";")[0];

  if (!mimeType) return false;

@@ -61,6 +61,7 @@ const doesFileSupportPreview = (fileName: string) => {
    mimeType.startsWith("video/"),
    mimeType.startsWith("image/"),
    mimeType.startsWith("audio/"),
+    mimeType.startsWith("text/"),
    mimeType == "application/pdf",
  ];

--- a/frontend/src/styles/mantine.style.ts
+++ b/frontend/src/styles/mantine.style.ts
@@ -16,4 +16,14 @@ export default <MantineThemeOverride>{
    ],
  },
  primaryColor: "victoria",
+  components: {
+    Modal: {
+      styles: (theme) => ({
+        title: {
+          fontSize: theme.fontSizes.lg,
+          fontWeight: 700,
+        },
+      }),
+    },
+  },
 };
--- a/frontend/src/types/config.type.ts
+++ b/frontend/src/types/config.type.ts
@@ -10,11 +10,11 @@ export type UpdateConfig = {
 };

 export type AdminConfig = Config & {
+  name: string;
  updatedAt: Date;
  secret: boolean;
  description: string;
  obscured: boolean;
-  category: string;
 };

 export type AdminConfigGroupedByCategory = {
@@ -29,6 +29,11 @@ export type AdminConfigGroupedByCategory = {
  ];
 };

+export type ConfigVariablesCategory = {
+  category: string;
+  count: number;
+};
+
 export type ConfigHook = {
  configVariables: Config[];
  refresh: () => void;
--- a/frontend/src/types/user.type.ts
+++ b/frontend/src/types/user.type.ts
@@ -9,7 +9,7 @@ type User = {
 export type CreateUser = {
  username: string;
  email: string;
-  password: string;
+  password?: string;
  isAdmin?: boolean;
 };

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Elias Schneider	ca73ccf629	release: 0.13.1	2023-03-14 20:26:04 +01:00
Elias Schneider	9f2097e788	fix: empty file can't be uploaded in chrome	2023-03-14 20:24:21 +01:00
Elias Schneider	2158df4228	release: 0.13.0	2023-03-14 16:09:20 +01:00
Elias Schneider	37e765ddc7	fix: show line breaks in txt preview	2023-03-14 16:08:57 +01:00
Elias Schneider	a91c531642	docs: update main screenshot	2023-03-14 15:47:42 +01:00
Elias Schneider	5a7f7ca2f6	chore: dump node js version	2023-03-14 15:36:35 +01:00
Elias Schneider	813ee4de2c	refactor: rename deprecated Prisma imports	2023-03-14 15:11:24 +01:00
Elias Schneider	b25c30d1ed	feat: sort shared files	2023-03-14 14:50:18 +01:00
Elias Schneider	c807d208d8	feat: add preview modal	2023-03-14 12:09:21 +01:00
Elias Schneider	f82099f36e	fix: upload file if it is 0 bytes	2023-03-13 08:57:56 +01:00
Elias Schneider	6345e21db9	refactor: globalize modal title style	2023-03-13 08:50:54 +01:00
Elias Schneider	f55aa80516	fix: replace "pingvin share" with dynamic app name	2023-03-12 20:13:55 +01:00
Elias Schneider	0ce8b528e1	refactor: improve error handling for failed emails	2023-03-12 19:29:39 +01:00
Elias Schneider	8ff417a013	fix: set password manually input not shown	2023-03-12 19:28:50 +01:00
Elias Schneider	cb1a0d4090	release: 0.12.1	2023-03-11 12:40:27 +01:00
Elias Schneider	753dbe83b7	fix: 48px icon does not update	2023-03-11 12:33:22 +01:00
Elias Schneider	0c2a62b0ca	release: 0.12.0	2023-03-10 09:40:19 +01:00
Elias Schneider	452c635933	chore: dump packages	2023-03-10 09:40:09 +01:00
Elias Schneider	0455ba1bc1	chore: upgrade mantine to v6	2023-03-10 09:01:33 +01:00
Elias Schneider	3ad6b03b6b	fix: home page shown even if disabled	2023-03-10 08:40:32 +01:00
Elias Schneider	91c3525b15	chore: add sharp for image optimizations	2023-03-08 17:47:36 +01:00
Elias Schneider	8403d7e14d	feat: ability to change logo in frontend	2023-03-08 14:47:41 +01:00
Elias Schneider	8f71fd3435	fix: crypto is not defined	2023-03-08 13:10:10 +01:00
Elias Schneider	155c743197	release: 0.11.1	2023-03-05 10:50:32 +01:00
Elias Schneider	8b77e81d4c	fix: old config variable prevents to create a share	2023-03-05 10:48:01 +01:00
Elias Schneider	22d81b2220	release: 0.11.0	2023-03-04 23:41:11 +01:00
Elias Schneider	0317f3a508	fix: frontend error when user deleted	2023-03-04 23:40:02 +01:00
Elias Schneider	fddad3ef70	feat: custom branding (#112 ) * add first concept * remove setup status * split config page in multiple components * add custom branding docs * add test email button * fix invalid email from header * add migration * mount images to host * update docs * remove unused endpoint * run formatter	2023-03-04 23:29:00 +01:00
Elias Schneider	f9840505b8	feat: invite new user with email	2023-02-21 08:51:04 +01:00
Elias Schneider	759c55f625	docs: fix remove app before upgrading	2023-02-13 10:09:53 +01:00
Elias Schneider	edb511252f	release: 0.10.2	2023-02-13 09:39:43 +01:00
Elias Schneider	c3af0fe097	fix: pdf preview tries to render on server	2023-02-13 09:39:27 +01:00
Elias Schneider	6419da07fb	release: 0.10.1	2023-02-12 20:00:55 +01:00
Elias Schneider	7cd9dff637	fix: setup wizard doesn't redirect after completion	2023-02-12 20:00:35 +01:00
Elias Schneider	2a826f7941	docs: stand-alone installation start backend first	2023-02-12 19:04:12 +01:00
Elias Schneider	8720232755	chore: add question issue template	2023-02-12 14:40:10 +01:00
Elias Schneider	dc8cf3d5ca	fix: non administrator user redirection error while setup isn't finished	2023-02-11 15:57:21 +01:00
Elias Schneider	979b882150	docs: add stand-alone installation guide	2023-02-10 14:59:19 +01:00
Elias Schneider	c55019f71b	docs: improve contributing guideline	2023-02-10 14:22:32 +01:00
				`@@ -1 +0,0 @@`
				<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 943.11 911.62"><ellipse cx="471.56" cy="454.28" rx="471.56" ry="454.28" fill="#46509e"/><ellipse cx="471.56" cy="390.28" rx="233.66" ry="207" fill="#37474f"/><path d="M705.22,849c-36.69,21.14-123.09,64.32-240.64,62.57A469.81,469.81,0,0,1,237.89,849V394.76H705.22Z" fill="#37474f"/><path d="M658.81,397.7V873.49a478.12,478.12,0,0,1-374.19,0V397.7c0-95.55,83.78-173,187.1-173S658.81,302.15,658.81,397.7Z" fill="#fff"/><polygon points="565.02 431.68 471.56 514.49 378.09 431.68 565.02 431.68" fill="#46509e"/><ellipse cx="378.09" cy="369.58" rx="23.37" ry="20.7" fill="#37474f"/><ellipse cx="565.02" cy="369.58" rx="23.37" ry="20.7" fill="#37474f"/><path d="M658.49,400.63c0-40-36.6-72.45-81.79-72.45s-81.78,32.41-81.78,72.45a64.79,64.79,0,0,0,7.9,31.05H440.29a64.79,64.79,0,0,0,7.9-31.05c0-40-36.59-72.45-81.78-72.45s-81.79,32.41-81.79,72.45l-46.73-10.35c0-114.31,104.64-207,233.67-207s233.66,92.69,233.66,207Z" fill="#37474f"/></svg>