329 changed files with 15168 additions and 39884 deletions
--- a/.dev/DEV_GUIDELINES.md
+++ b/.dev/DEV_GUIDELINES.md
@ -1,10 +0,0 @@
-## Adding new config key
-
-1. Edit utils/init/initialConfig.json
-2. Edit client/src/interfaces/Config.ts
-3. Edit client/src/utility/templateObjects/configTemplate.ts
-
-If config value will be used in a form:
-
-4. Edit client/src/interfaces/Forms.ts
-5. Edit client/src/utility/templateObjects/settingsTemplate.ts
--- a/.dev/bookmarks_importer.py
+++ b/.dev/bookmarks_importer.py
@ -1,166 +0,0 @@
-import sqlite3
-from bs4 import BeautifulSoup
-from PIL import Image, UnidentifiedImageError
-from io import BytesIO
-import re
-import base64
-from datetime import datetime, timezone
-import os
-import argparse
-
-
-"""
-Imports html bookmarks file into Flame.
-Tested only on Firefox html exports so far.
-
-Usage:
-python3 bookmarks_importer.py --bookmarks <path to bookmarks file> --data <path to flame data dir>
-
-"""
-
-parser = argparse.ArgumentParser()
-parser.add_argument('--bookmarks', type=str, required=True)
-parser.add_argument('--data', type=str, required=True)
-args = parser.parse_args()
-
-bookmarks_path = args.bookmarks
-data_path      = args.data
-created        = datetime.now().strftime('%Y-%m-%d %H:%M:%S.%f')[:-3] + datetime.now().astimezone().strftime(" %z")
-updated        = created
-if data_path[-1] != '/':
-	data_path = data_path + '/'
-
-
-
-
-def Base64toPNG(codec, name):
-
-	"""
-	Convert base64 encoded image to png file
-	Reference: https://github.com/python-pillow/Pillow/issues/3400#issuecomment-428104239
-
-		Parameters:
-			codec (str): icon in html bookmark format.e.g. 'data:image/png;base64,<image encoding>'
-			name (str): name for export file
-
-		Returns:
-			icon_name(str): name of png output E.g. 1636473849374--mybookmark.png
-			None: if image not produced successfully
-
-	"""
-
-	try:
-		unix_t     = str(int(datetime.now(tz=timezone.utc).timestamp() * 1000))
-		icon_name  = unix_t + '--' + re.sub(r'\W+', '', name).lower() + '.png'
-		image_path = data_path + 'uploads/' + icon_name
-		if os.path.exists(image_path):
-			return image_path
-		base64_data = re.sub('^data:image/.+;base64,', '', codec)
-		byte_data   = base64.b64decode(base64_data)
-		image_data  = BytesIO(byte_data)
-		img         = Image.open(image_data)
-		img.save(image_path, "PNG")
-		return icon_name
-	except UnidentifiedImageError:
-		return None
-
-
-
-
-def FlameBookmarkParser(bookmarks_path):
-
-	"""
-	Parses HTML bookmarks file
-	Reference: https://stackoverflow.com/questions/68621107/extracting-bookmarks-and-folder-hierarchy-from-google-chrome-with-beautifulsoup
-
-		Parameters:
-			bookmarks_path (str): path to bookmarks.html
-
-		Returns:
-			None
-
-	"""
-
-	soup = BeautifulSoup()
-	with open(bookmarks_path) as f:
-        	soup = BeautifulSoup(f.read(), 'lxml')
-
-	dt = soup.find_all('dt')
-	folder_name =''
-	for i in dt:
-		n = i.find_next()
-		if n.name == 'h3':
-			folder_name = n.text
-			continue
-		else:
-			url          = n.get("href")
-			website_name = n.text
-			icon         = n.get("icon")
-			if icon != None:
-				icon_name = Base64toPNG(icon, website_name)
-			cat_id = AddFlameCategory(folder_name)
-			AddFlameBookmark(website_name, url, cat_id, icon_name)
-
-
-
-
-def AddFlameCategory(cat_name):
-	"""
-        Parses HTML bookmarks file
-
-		Parameters:
-			cat_name (str): category name
-
-		Returns:
-			cat_id (int): primary key id of cat_name
-
-        """
-
-
-
-	con       = sqlite3.connect(data_path + 'db.sqlite')
-	cur       = con.cursor()
-	count_sql = ("SELECT count(*) FROM categories WHERE name = ?;")
-	cur.execute(count_sql, [cat_name])
-	count = int(cur.fetchall()[0][0])
-	if count > 0:
-		getid_sql = ("SELECT id FROM categories WHERE name = ?;")
-		cur.execute(getid_sql, [cat_name])
-		cat_id = int(cur.fetchall()[0][0])
-		return cat_id
-
-	is_pinned = 1
-
-	insert_sql = "INSERT OR IGNORE INTO categories(name, isPinned, createdAt, updatedAt) VALUES (?, ?, ?, ?);"
-	cur.execute(insert_sql, (cat_name, is_pinned, created, updated))
-	con.commit()
-
-	getid_sql = ("SELECT id FROM categories WHERE name = ?;")
-	cur.execute(getid_sql, [cat_name])
-	cat_id = int(cur.fetchall()[0][0])
-	return cat_id
-
-
-
-
-def AddFlameBookmark(website_name, url, cat_id, icon_name):
-	con = sqlite3.connect(data_path + 'db.sqlite')
-	cur = con.cursor()
-	if icon_name == None:
-		insert_sql = "INSERT OR IGNORE INTO bookmarks(name, url, categoryId, createdAt, updatedAt) VALUES (?, ?, ?, ?, ?);"
-		cur.execute(insert_sql, (website_name, url, cat_id, created, updated))
-		con.commit()
-	else:
-		insert_sql = "INSERT OR IGNORE INTO bookmarks(name, url, categoryId, icon, createdAt, updatedAt) VALUES (?, ?, ?, ?, ?, ?);"
-		cur.execute(insert_sql, (website_name, url, cat_id, icon_name, created, updated))
-		con.commit()
-
-
-
-
-
-
-
-
-if __name__ == "__main__":
-	FlameBookmarkParser(bookmarks_path)
--- a/.dev/build_dev.sh
+++ b/.dev/build_dev.sh
@ -1 +0,0 @@
-docker build -t flame:dev -f .docker/Dockerfile .
--- a/.dev/build_latest.sh
+++ b/.dev/build_latest.sh
@ -1,2 +0,0 @@
-docker build -t pawelmalak/flame -t "pawelmalak/flame:$1" -f .docker/Dockerfile . \
-  && docker push pawelmalak/flame && docker push "pawelmalak/flame:$1"
--- a/.dev/build_multiarch.sh
+++ b/.dev/build_multiarch.sh
@ -1,6 +0,0 @@
-docker buildx build \
-  --platform linux/arm/v7,linux/arm64,linux/amd64 \
-  -f .docker/Dockerfile.multiarch \
-  -t pawelmalak/flame:multiarch \
-  -t "pawelmalak/flame:multiarch$1" \
-  --push .
--- a/.dev/getMdi.js
+++ b/.dev/getMdi.js
@ -1,9 +0,0 @@
-// Script to get all icon names from materialdesignicons.com
-const getMdi = () => {
-  const icons = document.querySelectorAll('#icons div span');
-  const names = [...icons].map((icon) => icon.textContent.replace('mdi-', ''));
-  const output = names.map((name) => ({ name }));
-  output.pop();
-  const json = JSON.stringify(output);
-  console.log(json);
-};
--- a/.docker/Dockerfile.dev
+++ b/.docker/Dockerfile.dev
@ -1,26 +0,0 @@
-FROM node:lts-alpine as build-front
-
-RUN apk add --no-cache curl
-
-WORKDIR /app
-
-COPY ./client .
-
-RUN npm install --production \
-    && npm run build
-
-FROM node:lts-alpine
-
-WORKDIR /app
-
-RUN mkdir -p ./public
-
-COPY --from=build-front /app/build/ ./public
-
-COPY package*.json ./
-
-RUN npm install
-
-COPY . .
-
-CMD ["npm", "run", "skaffold"]
--- a/.docker/Dockerfile.multiarch
+++ b/.docker/Dockerfile.multiarch
@ -1,31 +0,0 @@
-FROM node:16-alpine3.11 as builder
-
-WORKDIR /app
-
-COPY package*.json ./
-
-RUN apk --no-cache --virtual build-dependencies add python python3 make g++ \
-    && npm install --production
-
-COPY . .    
-
-RUN mkdir -p ./public ./data \
-    && cd ./client \
-    && npm install --production \
-    && npm run build \
-    && cd .. \
-    && mv ./client/build/* ./public \
-    && rm -rf ./client
-
-FROM node:16-alpine3.11
-
-COPY --from=builder /app /app
-
-WORKDIR /app
-
-EXPOSE 5005
-
-ENV NODE_ENV=production
-ENV PASSWORD=flame_password
-
-CMD ["sh", "-c", "chown -R node /app/data && node server.js"]
--- a/.docker/docker-compose.yml
+++ b/.docker/docker-compose.yml
@ -1,22 +0,0 @@
-version: '3.6'
-
-services:
-  flame:
-    image: pawelmalak/flame
-    container_name: flame
-    volumes:
-      - /path/to/host/data:/app/data
-      # - /var/run/docker.sock:/var/run/docker.sock # optional but required for Docker integration
-    ports:
-      - 5005:5005
-    # secrets:
-    #   - password # optional but required for (1)
-    environment:
-      - PASSWORD=flame_password
-      # - PASSWORD_FILE=/run/secrets/password # optional but required for (1)
-    restart: unless-stopped
-    
-# optional but required for Docker secrets (1)
-# secrets:
-#   password:
-#     file: /path/to/secrets/password
--- a/.dockerignore
+++ b/.dockerignore
@ -1,6 +1,2 @@
 node_modules
-.github
-public
-k8s
-skaffold.yaml
-data
+github
--- a/.env
+++ b/.env
@ -1,5 +1,2 @@
 PORT=5005
-NODE_ENV=development
-VERSION=2.3.1
-PASSWORD=flame_password
-SECRET=e02eb43d69953658c6d07311d6313f2d4467672cb881f96b29368ba1f3f4da4b
+NODE_ENV=development
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@ -1,27 +0,0 @@
---
-name: Bug report
-about: Create a bug report
-title: "[BUG] "
-labels: ''
-assignees: ''
-
---
-
-**Deployment details:**
- App version [e.g. v1.7.4]: 
- Platform [e.g. amd64, arm64, arm/v7]: 
- Docker image tag [e.g. latest, multiarch]: 
-
---
-
-**Bug description:**
-
-A clear and concise description of what the bug is.
-
---
-
-**Steps to reproduce:**
-
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
--- a/.github/apps.png
+++ b/.github/apps.png
--- a/.github/bookmarks.png
+++ b/.github/bookmarks.png
--- a/.github/home.png
+++ b/.github/home.png
--- a/.github/settings.png
+++ b/.github/settings.png
--- a/.github/themes.png
+++ b/.github/themes.png
--- a/.gitignore
+++ b/.gitignore
@ -1,4 +1,2 @@
-node_modules
-data
-public
-!client/public
+node_modules/
+data/
--- a/.prettierignore
+++ b/.prettierignore
@ -1,2 +0,0 @@
-*.md
-docker-compose.yml
--- a/.prettierrc
+++ b/.prettierrc
@ -1,8 +0,0 @@
-{
-  "tabWidth": 2,
-  "useTabs": false,
-  "singleQuote": true,
-  "arrowParens": "always",
-  "printWidth": 80,
-  "trailingComma": "es5"
-}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,176 +0,0 @@
-### v2.3.1 (2023-07-23)
- Fixed bug where "Open search results in the same tab" setting was not respected if "Local search" was set as primary search provider ([#270](https://github.com/pawelmalak/flame/issues/270))
- Fixed bug where search bar had rounded input field on iOS ([#394](https://github.com/pawelmalak/flame/issues/394))
- Updated link to Material Design Icons reference page ([#414](https://github.com/pawelmalak/flame/issues/414))
- Fixed bug where color inputs in theme creator/editor were too small ([#429](https://github.com/pawelmalak/flame/issues/429))
- Changed input labels in settings for more consistent naming ([#430](https://github.com/pawelmalak/flame/issues/430))
-
-### v2.3.0 (2022-03-25)
- Added custom theme editor ([#246](https://github.com/pawelmalak/flame/issues/246))
- Added option to set secondary search provider ([#295](https://github.com/pawelmalak/flame/issues/295))
- Fixed bug where pressing Enter with empty search bar would redirect to search results ([#325](https://github.com/pawelmalak/flame/issues/325))
- Fixed bug where user could create empty app or bookmark which was causing page to go blank ([#332](https://github.com/pawelmalak/flame/issues/332))
- Added new theme: Mint
-
-### v2.2.2 (2022-03-21)
- Added option to get user location directly from the app ([#287](https://github.com/pawelmalak/flame/issues/287))
- Fixed bug with local search not working when using prefix ([#289](https://github.com/pawelmalak/flame/issues/289))
- Fixed bug with app description not updating when using custom icon ([#310](https://github.com/pawelmalak/flame/issues/310))
- Changed permissions to some files and directories created by Flame
- Changed some of the settings tabs
-
-### v2.2.1 (2022-01-08)
- Local search will now include app descriptions ([#266](https://github.com/pawelmalak/flame/issues/266))
- Fixed bug with unsupported characters in local search [#279](https://github.com/pawelmalak/flame/issues/279))
- Background tasks optimization ([#283](https://github.com/pawelmalak/flame/issues/283))
-
-### v2.2.0 (2021-12-17)
- Added option to set custom description for apps ([#201](https://github.com/pawelmalak/flame/issues/201))
- Fixed fatal error while deploying Flame to cluster ([#242](https://github.com/pawelmalak/flame/issues/242))
-
-### v2.1.1 (2021-12-02)
- Added support for Docker secrets ([#189](https://github.com/pawelmalak/flame/issues/189))
- Changed some messages and buttons to make it easier to open bookmarks editor ([#239](https://github.com/pawelmalak/flame/issues/239))
-
-### v2.1.0 (2021-11-26)
- Added option to set custom order for bookmarks ([#43](https://github.com/pawelmalak/flame/issues/43)) and ([#187](https://github.com/pawelmalak/flame/issues/187))
- Added support for .ico files for custom icons ([#209](https://github.com/pawelmalak/flame/issues/209))
- Empty apps and categories sections will now be hidden from guests ([#210](https://github.com/pawelmalak/flame/issues/210))
- Fixed bug with fahrenheit degrees being displayed as float ([#221](https://github.com/pawelmalak/flame/issues/221))
- Fixed bug with alphabetical order not working for bookmarks until the page was refreshed ([#224](https://github.com/pawelmalak/flame/issues/224))
- Added option to change visibilty of apps, categories and bookmarks directly from table view
- Password input will now autofocus when visiting /settings/app
-
-### v2.0.1 (2021-11-19)
- Added option to display humidity in the weather widget ([#136](https://github.com/pawelmalak/flame/issues/136))
- Added option to set default theme for all new users ([#165](https://github.com/pawelmalak/flame/issues/165))
- Added option to hide header greetings and date separately ([#200](https://github.com/pawelmalak/flame/issues/200))
- Fixed bug with broken basic auth ([#202](https://github.com/pawelmalak/flame/issues/202))
- Fixed bug with parsing visibility value for apps and bookmarks when custom icon was used ([#203](https://github.com/pawelmalak/flame/issues/203))
- Fixed bug with custom icons not working with apps when "pin by default" was disabled
-
-### v2.0.0 (2021-11-15)
- Added authentication system:
-  - Only logged in user can access settings ([#33](https://github.com/pawelmalak/flame/issues/33))
-  - User can set which apps, categories and bookmarks should be available for guest users ([#45](https://github.com/pawelmalak/flame/issues/45))
-  - Visit [project wiki](https://github.com/pawelmalak/flame/wiki/Authentication) to read more about this feature
- Docker images will now be versioned ([#110](https://github.com/pawelmalak/flame/issues/110))
- Icons can now be set via URL ([#138](https://github.com/pawelmalak/flame/issues/138))
- Added current time to the header ([#157](https://github.com/pawelmalak/flame/issues/157))
- Fixed bug where typing certain characters in the search bar would result in a blank page ([#158](https://github.com/pawelmalak/flame/issues/158))
- Fixed bug with MDI icon name not being properly parsed if there was leading or trailing whitespace ([#164](https://github.com/pawelmalak/flame/issues/164))
- Added new shortcut to clear search bar and focus on it ([#170](https://github.com/pawelmalak/flame/issues/170))
- Added Wikipedia to search queries
- Updated project wiki
- Lots of changes and refactors under the hood to make future development easier
-
-### v1.7.4 (2021-11-08)
- Added option to set custom greetings and date ([#103](https://github.com/pawelmalak/flame/issues/103))
- Fallback to web search if local search has zero results ([#129](https://github.com/pawelmalak/flame/issues/129))
- Added iOS "Add to homescreen" icon ([#131](https://github.com/pawelmalak/flame/issues/131))
- Added experimental script to import bookmarks ([#141](https://github.com/pawelmalak/flame/issues/141))
- Added 3 new themes
-
-### v1.7.3 (2021-10-28)
- Fixed bug with custom CSS not updating
-
-### v1.7.2 (2021-10-28)
- Pressing Enter while search bar is focused will now redirect to first result of local search ([#121](https://github.com/pawelmalak/flame/issues/121))
- Use search bar shortcuts when it's not focused ([#124](https://github.com/pawelmalak/flame/issues/124))
- Fixed bug with Weather API still logging with module being disabled ([#125](https://github.com/pawelmalak/flame/issues/125))
- Added option to disable search bar autofocus ([#127](https://github.com/pawelmalak/flame/issues/127))
-
-### v1.7.1 (2021-10-22)
- Fixed search action not being triggered by Numpad Enter
- Added option to change date formatting ([#92](https://github.com/pawelmalak/flame/issues/92))
- Added shortcuts (Esc and double click) to clear search bar ([#100](https://github.com/pawelmalak/flame/issues/100))
- Added Traefik integration ([#102](https://github.com/pawelmalak/flame/issues/102))
- Fixed search bar not redirecting to valid URL if it starts with capital letter ([#118](https://github.com/pawelmalak/flame/issues/118))
- Performance improvements
-
-### v1.7.0 (2021-10-11)
- Search bar will now redirect if valid URL or IP is provided ([#67](https://github.com/pawelmalak/flame/issues/67))
- Users can now add their custom search providers ([#71](https://github.com/pawelmalak/flame/issues/71))
- Fixed bug related to creating new apps/bookmarks with custom icon ([#83](https://github.com/pawelmalak/flame/issues/83))
- URL can now be assigned to notifications. Clicking on "New version is available" popup will now redirect to changelog ([#86](https://github.com/pawelmalak/flame/issues/86))
- Added static fonts ([#94](https://github.com/pawelmalak/flame/issues/94))
- Fixed bug with overriding app icon created with docker labels
-
-### v1.6.9 (2021-10-09)
- Added option for remote docker host ([#97](https://github.com/pawelmalak/flame/issues/97))
-
-### v1.6.8 (2021-10-05)
- Implemented migration system for database
-
-### v1.6.7 (2021-10-04)
- Add multiple labels to Docker Compose ([#90](https://github.com/pawelmalak/flame/issues/90))
- Custom icons via Docker Compose labels ([#91](https://github.com/pawelmalak/flame/issues/91))
-
-### v1.6.6 (2021-09-06)
- Added local search (filter) for apps and bookmarks ([#47](https://github.com/pawelmalak/flame/issues/47))
-
-### v1.6.5 (2021-08-28)
- Added support for more URL schemes ([#74](https://github.com/pawelmalak/flame/issues/74))
-
-### v1.6.4 (2021-08-17)
- Added Kubernetes integration ([#72 continued](https://github.com/pawelmalak/flame/issues/72))
-
-### v1.6.3 (2021-08-09)
- Added support for custom SVG icons ([#73](https://github.com/pawelmalak/flame/issues/73))
- Added Deezer and Tidal to search queries
-
-### v1.6.2 (2021-08-06)
- Fixed changelog link
- Added support for Docker API ([#14](https://github.com/pawelmalak/flame/issues/14))
-
-### v1.6.1 (2021-07-28)
- Added option to upload custom icons for bookmarks ([#52](https://github.com/pawelmalak/flame/issues/52))
- Fixed custom icons not updating ([#58](https://github.com/pawelmalak/flame/issues/58))
- Added changelog file
-
-### v1.6.0 (2021-07-17)
- Added support for Steam URLs ([#62](https://github.com/pawelmalak/flame/issues/62))
- Fixed bug with custom CSS not persisting ([#64](https://github.com/pawelmalak/flame/issues/64))
- Added option to set default prefix for search bar ([#65](https://github.com/pawelmalak/flame/issues/65))
-
-### v1.5.0 (2021-06-24)
- Added ability to set custom CSS from settings ([#8](https://github.com/pawelmalak/flame/issues/8) and [#17](https://github.com/pawelmalak/flame/issues/17)) (experimental)
- Added option to upload custom icons ([#12](https://github.com/pawelmalak/flame/issues/12))
- Added option to open links in a new or the same tab ([#27](https://github.com/pawelmalak/flame/issues/27))
- Added Search bar with support for 3 search engines and 4 services ([#44](https://github.com/pawelmalak/flame/issues/44))
- Added option to hide applications and categories ([#48](https://github.com/pawelmalak/flame/issues/48))
- Improved Logger
-
-### v1.4.0 (2021-06-18)
- Added more sorting options. User can now choose to sort apps and categories by name, creation time or to use custom order ([#13](https://github.com/pawelmalak/flame/issues/13))
- Added reordering functionality. User can now set custom order for apps and categories from their 'edit tables' ([#13](https://github.com/pawelmalak/flame/issues/13))
- Changed get all controllers for applications and categories to use case-insensitive ordering ([#36](https://github.com/pawelmalak/flame/issues/36))
- New apps will be placed correctly in the array depending on used sorting settings ([#37](https://github.com/pawelmalak/flame/issues/37))
- Added app version to settings with option to check for updates manually ([#38](https://github.com/pawelmalak/flame/issues/38))
- Added update check on app start ([#38](https://github.com/pawelmalak/flame/issues/38))
- Fixed bug with decimal input values in Safari browser ([#40](https://github.com/pawelmalak/flame/issues/40))
-
-### v1.3.0 (2021-06-14)
- Added reverse proxy support ([#23](https://github.com/pawelmalak/flame/issues/23) and [#24](https://github.com/pawelmalak/flame/issues/24))
- Added support for more url formats ([#26](https://github.com/pawelmalak/flame/issues/26))
- Added ability to hide main header ([#28](https://github.com/pawelmalak/flame/issues/28))
- Fixed settings not being synchronized ([#29](https://github.com/pawelmalak/flame/issues/29))
- Added auto-refresh for greeting and date ([#34](https://github.com/pawelmalak/flame/issues/34))
-
-### v1.2.0 (2021-06-10)
- Added simple check to the weather module settings to inform user if the api key is missing ([#2](https://github.com/pawelmalak/flame/issues/2))
- Added ability to set optional icons to the bookmarks ([#7](https://github.com/pawelmalak/flame/issues/7))
- Added option to pin new applications and categories to the homescreen by default ([#11](https://github.com/pawelmalak/flame/issues/11))
- Added background highlight while hovering over application card ([#15](https://github.com/pawelmalak/flame/issues/15))
- Created CRON job to clear old weather data from the database ([#16](https://github.com/pawelmalak/flame/issues/16))
- Added proxy for websocket instead of using hard coded host ([#18](https://github.com/pawelmalak/flame/issues/18))
- Fixed bug with overwriting opened tabs ([#20](https://github.com/pawelmalak/flame/issues/20))
-
-### v1.1.0 (2021-06-09)
- Added custom favicon and changed page title ([#3](https://github.com/pawelmalak/flame/issues/3))
- Added functionality to set custom page title ([#3](https://github.com/pawelmalak/flame/issues/3))
- Changed messages on the homescreen when there are apps/bookmarks created but not pinned to the homescreen ([#4](https://github.com/pawelmalak/flame/issues/4))
- Added 'warnings' to apps and bookmarks forms about supported url formats ([#5](https://github.com/pawelmalak/flame/issues/5))
-
-### v1.0.0 (2021-06-08)
-Initial release of Flame - self-hosted startpage using Node.js on backend and React on frontend.
--- a/.docker/Dockerfile
+++ b/.docker/Dockerfile
@ -1,4 +1,4 @@
-FROM node:16 as builder
+FROM node:14-alpine

 WORKDIR /app

@ -10,21 +10,13 @@ COPY . .

 RUN mkdir -p ./public ./data \
    && cd ./client \
-    && npm install --production \
    && npm run build \
    && cd .. \
    && mv ./client/build/* ./public \
    && rm -rf ./client

-FROM node:16-alpine
-
-COPY --from=builder /app /app
-
-WORKDIR /app
-
 EXPOSE 5005

 ENV NODE_ENV=production
-ENV PASSWORD=flame_password

-CMD ["sh", "-c", "chown -R node /app/data && node server.js"]
+CMD ["node", "server.js"]
--- a/Dockerfile.multiarch
+++ b/Dockerfile.multiarch
@ -0,0 +1,24 @@
+FROM node:14-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN apk --no-cache --virtual build-dependencies add python make g++ \
+    && npm install --production
+
+COPY . .
+
+RUN mkdir -p ./public ./data \
+    && cd ./client \
+    && npm run build \
+    && cd .. \
+    && mv ./client/build/* ./public \
+    && rm -rf ./client \
+    && apk del build-dependencies
+
+EXPOSE 5005
+
+ENV NODE_ENV=production
+
+CMD ["node", "server.js"]
--- a/README.md
+++ b/README.md
@ -1,126 +1,27 @@
 # Flame

-![Homescreen screenshot](.github/home.png)
+[![JS Badge](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)](https://shields.io/)
+[![TS Badge](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)](https://shields.io/)
+[![Node Badge](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)](https://shields.io/)
+[![React Badge](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://shields.io/)
+
+![Homescreen screenshot](./github/_home.png)

 ## Description
+Flame is self-hosted startpage for your server. Its design is inspired (heavily) by [SUI](https://github.com/jeroenpardon/sui). Flame is very easy to setup and use. With built-in editors it allows you to setup your very own appliaction hub in no time - no file editing necessary.

-Flame is self-hosted startpage for your server. Its design is inspired (heavily) by [SUI](https://github.com/jeroenpardon/sui). Flame is very easy to setup and use. With built-in editors, it allows you to setup your very own application hub in no time - no file editing necessary.
-
-## Functionality
- 📝 Create, update, delete your applications and bookmarks directly from the app using built-in GUI editors
- 📌 Pin your favourite items to the homescreen for quick and easy access
- 🔍 Integrated search bar with local filtering, 11 web search providers and ability to add your own
- 🔑 Authentication system to protect your settings, apps and bookmarks
- 🔨 Dozens of options to customize Flame interface to your needs, including support for custom CSS, 15 built-in color themes and custom theme builder
- ☀️ Weather widget with current temperature, cloud coverage and animated weather status
- 🐳 Docker integration to automatically pick and add apps based on their labels
-
-## Installation
-
-### With Docker (recommended)
-
-[Docker Hub link](https://hub.docker.com/r/pawelmalak/flame)
-
-```sh
-docker pull pawelmalak/flame
-
-# for ARM architecture (e.g. RaspberryPi)
-docker pull pawelmalak/flame:multiarch
-
-# installing specific version
-docker pull pawelmalak/flame:2.0.0
-```
-
-#### Deployment
-
-```sh
-# run container
-docker run -p 5005:5005 -v /path/to/data:/app/data -e PASSWORD=flame_password pawelmalak/flame
-```
-
-#### Building images
-
-```sh
-# build image for amd64 only
-docker build -t flame -f .docker/Dockerfile .
-
-# build multiarch image for amd64, armv7 and arm64
-# building failed multiple times with 2GB memory usage limit so you might want to increase it
-docker buildx build \
-  --platform linux/arm/v7,linux/arm64,linux/amd64 \
-  -f .docker/Dockerfile.multiarch \
-  -t flame:multiarch .
-```
-
-#### Docker-Compose
-
-```yaml
-version: '3.6'
-
-services:
-  flame:
-    image: pawelmalak/flame
-    container_name: flame
-    volumes:
-      - /path/to/host/data:/app/data
-      - /var/run/docker.sock:/var/run/docker.sock # optional but required for Docker integration
-    ports:
-      - 5005:5005
-    secrets:
-      - password # optional but required for (1)
-    environment:
-      - PASSWORD=flame_password
-      - PASSWORD_FILE=/run/secrets/password # optional but required for (1)
-    restart: unless-stopped
-
-# optional but required for Docker secrets (1)
-secrets:
-  password:
-    file: /path/to/secrets/password
-```
-
-##### Docker Secrets
-
-All environment variables can be overwritten by appending `_FILE` to the variable value. For example, you can use `PASSWORD_FILE` to pass through a docker secret instead of `PASSWORD`. If both `PASSWORD` and `PASSWORD_FILE` are set, the docker secret will take precedent.
-
-```bash
-# ./secrets/flame_password
-my_custom_secret_password_123
-
-# ./docker-compose.yml
-secrets:
-  password:
-    file: ./secrets/flame_password
-```
-
-#### Skaffold
-
-```sh
-# use skaffold
-skaffold dev
-```
-
-### Without Docker
-
-Follow instructions from wiki: [Installation without Docker](https://github.com/pawelmalak/flame/wiki/Installation-without-docker)
-
-## Development
-
-### Technology
-
+## Technology
 - Backend
  - Node.js + Express
  - Sequelize ORM + SQLite
 - Frontend
-  - React
+  - React 
  - Redux
  - TypeScript
 - Deployment
  - Docker
-  - Kubernetes
-
-### Creating dev environment

+## Development
 ```sh
 # clone repository
 git clone https://github.com/pawelmalak/flame
@ -133,116 +34,59 @@ npm run dev-init
 npm run dev
 ```

-## Screenshots
+## Building Docker images
+```sh
+# build image for amd64 only
+docker build -t flame .

-![Apps screenshot](.github/apps.png)
+# build multiarch image for amd64, armv7 and arm64
+# building failed multiple times with 2GB memory usage limit so you might want to increase it
+docker buildx build \
+  --platform linux/arm/v7,linux/arm64,linux/amd64 \
+  -f Dockerfile.multiarch \
+  -t flame:multiarch .
+```

-![Bookmarks screenshot](.github/bookmarks.png)
+## Deployment with Docker
+```sh
+# run container
+docker run -p 5005:5005 -v /path/to/data:/app/data flame
+```

-![Settings screenshot](.github/settings.png)
+## Functionality
+- Applications
+  - Create, update and delete applications using GUI
+  - Pin your favourite apps to homescreen

-![Themes screenshot](.github/themes.png)
+![Homescreen screenshot](./github/_apps.png)
+
+- Bookmarks
+  - Create, update and delete bookmarks and categories using GUI
+  - Pin your favourite categories to homescreen
+
+![Homescreen screenshot](./github/_bookmarks.png)
+
+- Weather
+  - Get current temperature, cloud coverage and weather status with animated icons
+- Themes
+  - Customize your page by choosing from 12 color themes 
+
+![Homescreen screenshot](./github/_themes.png)

 ## Usage
+### Supported URL formats for applications and bookmarks
+#### Rules
+- URL starts with `http://`
+  - Format: `http://www.domain.com`, `http://domain.com`
+  - Redirect: `{dest}`
+- URL starts with `https://`
+  - Format: `https://www.domain.com`, `https://domain.com`
+  - Redirect: `https://{dest}`
+- URL without protocol
+  - Format: `www.domain.com`, `domain.com`, `sub.domain.com`, `local`, `ip`, `ip:port`
+  - Redirect: `http://{dest}`

-### Authentication
+## Support
+If you want to support development of Flame and my upcoming self-hosted and open source projects you can use the following link:

-Visit [project wiki](https://github.com/pawelmalak/flame/wiki/Authentication) to read more about authentication
-
-### Search bar
-
-#### Searching
-
-The default search setting is to search through all your apps and bookmarks. If you want to search using specific search engine, you need to type your search query with selected prefix. For example, to search for "what is docker" using google search you would type: `/g what is docker`.
-
-For list of supported search engines, shortcuts and more about searching functionality visit [project wiki](https://github.com/pawelmalak/flame/wiki/Search-bar).
-
-### Setting up weather module
-
-1. Obtain API Key from [Weather API](https://www.weatherapi.com/pricing.aspx).
-   > Free plan allows for 1M calls per month. Flame is making less then 3K API calls per month.
-2. Get lat/long for your location. You can get them from [latlong.net](https://www.latlong.net/convert-address-to-lat-long.html).
-3. Enter and save data. Weather widget will now update and should be visible on Home page.
-
-### Docker integration
-
-In order to use the Docker integration, each container must have the following labels:
-
-```yml
-labels:
-  - flame.type=application # "app" works too
-  - flame.name=My container
-  - flame.url=https://example.com
-  - flame.icon=icon-name # optional, default is "docker"
-# - flame.icon=custom to make changes in app. ie: custom icon upload
-```
-
-> "Use Docker API" option must be enabled for this to work. You can find it in Settings > Docker
-
-You can also set up different apps in the same label adding `;` between each one.
-
-```yml
-labels:
-  - flame.type=application
-  - flame.name=First App;Second App
-  - flame.url=https://example1.com;https://example2.com
-  - flame.icon=icon-name1;icon-name2
-```
-
-If you want to use a remote docker host follow this instructions in the host:
-
- Open the file `/lib/systemd/system/docker.service`, search for `ExecStart` and edit the value
-
-```text
-ExecStart=/usr/bin/dockerd -H tcp://0.0.0.0:${PORT} -H unix:///var/run/docker.sock
-```
-
->The above command will bind the docker engine server to the Unix socket as well as TCP port of your choice. “0.0.0.0” means docker-engine accepts connections from all IP addresses.
-
- Restart the daemon and Docker service
-
-```shell
-sudo systemctl daemon-reload
-sudo service docker restart
-```
-
- Test if it is working
-
-```shell
-curl http://${IP}:${PORT}/version
-```
-
-### Kubernetes integration
-
-In order to use the Kubernetes integration, each ingress must have the following annotations:
-
-```yml
-metadata:
-  annotations:
-  - flame.pawelmalak/type=application # "app" works too
-  - flame.pawelmalak/name=My container
-  - flame.pawelmalak/url=https://example.com
-  - flame.pawelmalak/icon=icon-name # optional, default is "kubernetes"
-```
-
-> "Use Kubernetes Ingress API" option must be enabled for this to work. You can find it in Settings > Docker
-
-### Import HTML Bookmarks (Experimental)
-
- Requirements
-  - python3
-  - pip packages: Pillow, beautifulsoup4
- Backup your `db.sqlite` before running script!
- Known Issues:
-  - generated icons are sometimes incorrect
-
-```bash
-pip3 install Pillow, beautifulsoup4
-
-cd flame/.dev
-python3 bookmarks_importer.py --bookmarks <path to bookmarks.html> --data <path to flame data folder>
-```
-
-### Custom CSS and themes
-
-See project wiki for [Custom CSS](https://github.com/pawelmalak/flame/wiki/Custom-CSS) and [Custom theme with CSS](https://github.com/pawelmalak/flame/wiki/Custom-theme-with-CSS).
+[![PayPal Badge](https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white)](https://www.paypal.com/paypalme/pawelmalak)
--- a/Socket.js
+++ b/Socket.js
@ -1,13 +1,11 @@
 const WebSocket = require('ws');
-const Logger = require('./utils/Logger');
-const logger = new Logger();

 class Socket {
  constructor(server) {
    this.webSocketServer = new WebSocket.Server({ server })

    this.webSocketServer.on('listening', () => {
-      logger.log('Socket: listen');
+      console.log('Socket: listen');
    })

    this.webSocketServer.on('connection', (webSocketClient) => {
--- a/api.js
+++ b/api.js
@ -1,15 +1,14 @@
-const { join } = require('path');
+const path = require('path');
 const express = require('express');
-const { errorHandler } = require('./middleware');
+const errorHandler = require('./middleware/errorHandler');

 const api = express();

 // Static files
-api.use(express.static(join(__dirname, 'public')));
-api.use('/uploads', express.static(join(__dirname, 'data/uploads')));
+api.use(express.static(path.join(__dirname, 'public')));
 api.get(/^\/(?!api)/, (req, res) => {
-  res.sendFile(join(__dirname, 'public/index.html'));
-});
+  res.sendFile(path.join(__dirname, 'public/index.html'));
+})

 // Body parser
 api.use(express.json());
@ -20,11 +19,8 @@ api.use('/api/config', require('./routes/config'));
 api.use('/api/weather', require('./routes/weather'));
 api.use('/api/categories', require('./routes/category'));
 api.use('/api/bookmarks', require('./routes/bookmark'));
-api.use('/api/queries', require('./routes/queries'));
-api.use('/api/auth', require('./routes/auth'));
-api.use('/api/themes', require('./routes/themes'));

 // Custom error handler
 api.use(errorHandler);

-module.exports = api;
+module.exports = api;
--- a/client/.env
+++ b/client/.env
@ -1 +1 @@
-REACT_APP_VERSION=2.3.1
+REACT_APP_VERSION=1.4.0
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
@ -3,34 +3,32 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
-    "@mdi/js": "^6.4.95",
+    "@mdi/js": "^5.9.55",
    "@mdi/react": "^1.5.0",
-    "@testing-library/jest-dom": "^5.15.0",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.0.2",
-    "@types/node": "^16.11.6",
-    "@types/react": "^17.0.34",
-    "@types/react-beautiful-dnd": "^13.1.2",
-    "@types/react-dom": "^17.0.11",
-    "@types/react-redux": "^7.1.20",
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/user-event": "^12.8.3",
+    "@types/jest": "^26.0.23",
+    "@types/node": "^12.20.12",
+    "@types/react": "^17.0.5",
+    "@types/react-beautiful-dnd": "^13.0.0",
+    "@types/react-dom": "^17.0.3",
+    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.7",
-    "axios": "^0.24.0",
-    "external-svg-loader": "^1.3.4",
-    "http-proxy-middleware": "^2.0.1",
-    "jwt-decode": "^3.1.2",
+    "axios": "^0.21.1",
+    "http-proxy-middleware": "^2.0.0",
    "react": "^17.0.2",
    "react-beautiful-dnd": "^13.1.0",
    "react-dom": "^17.0.2",
-    "react-redux": "^7.2.6",
+    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
-    "react-scripts": "^5.0.1",
-    "redux": "^4.1.2",
+    "react-scripts": "4.0.3",
+    "redux": "^4.1.0",
    "redux-devtools-extension": "^2.13.9",
-    "redux-thunk": "^2.4.0",
+    "redux-thunk": "^2.3.0",
    "skycons-ts": "^0.2.0",
-    "typescript": "^4.4.4",
-    "web-vitals": "^2.1.2"
+    "typescript": "^4.2.4",
+    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
@ -55,8 +53,5 @@
      "last 1 firefox version",
      "last 1 safari version"
    ]
-  },
-  "devDependencies": {
-    "prettier": "^2.4.1"
  }
 }
--- a/client/public/icons/favicon.ico
+++ b/client/public/icons/favicon.ico
--- a/client/public/flame.css
+++ b/client/public/flame.css
--- a/client/public/icons/apple-touch-icon-114x114.png
+++ b/client/public/icons/apple-touch-icon-114x114.png
--- a/client/public/icons/apple-touch-icon-120x120.png
+++ b/client/public/icons/apple-touch-icon-120x120.png
--- a/client/public/icons/apple-touch-icon-144x144.png
+++ b/client/public/icons/apple-touch-icon-144x144.png
--- a/client/public/icons/apple-touch-icon-152x152.png
+++ b/client/public/icons/apple-touch-icon-152x152.png
--- a/client/public/icons/apple-touch-icon-180x180.png
+++ b/client/public/icons/apple-touch-icon-180x180.png
--- a/client/public/icons/apple-touch-icon-57x57.png
+++ b/client/public/icons/apple-touch-icon-57x57.png
--- a/client/public/icons/apple-touch-icon-72x72.png
+++ b/client/public/icons/apple-touch-icon-72x72.png
--- a/client/public/icons/apple-touch-icon-76x76.png
+++ b/client/public/icons/apple-touch-icon-76x76.png
--- a/client/public/icons/apple-touch-icon.png
+++ b/client/public/icons/apple-touch-icon.png
--- a/client/public/index.html
+++ b/client/public/index.html
@ -2,61 +2,23 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/icons/favicon.ico" />
-    <link
-      rel="apple-touch-icon"
-      href="%PUBLIC_URL%/icons/apple-touch-icon.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="57x57"
-      href="%PUBLIC_URL%/icons/apple-touch-icon-57x57.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="72x72"
-      href="%PUBLIC_URL%/icons/apple-touch-icon-72x72.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="76x76"
-      href="%PUBLIC_URL%/icons/apple-touch-icon-76x76.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="114x114"
-      href="%PUBLIC_URL%/icons/apple-touch-icon-114x114.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="120x120"
-      href="%PUBLIC_URL%/icons/apple-touch-icon-120x120.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="144x144"
-      href="%PUBLIC_URL%/icons/apple-touch-icon-144x144.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="152x152"
-      href="%PUBLIC_URL%/icons/apple-touch-icon-152x152.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="%PUBLIC_URL%/icons/apple-touch-icon-180x180.png"
-    />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
-      content="Flame - self-hosted startpage for your server"
+      content="Web site created using create-react-app"
    />
-    <link rel="stylesheet" href="%PUBLIC_URL%/flame.css" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
    <title>Flame</title>
  </head>
  <body>
+
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
+    
  </body>
 </html>
--- a/client/public/robots.txt
+++ b/client/public/robots.txt
@ -1,2 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
 User-agent: *
-Disallow: /
+Disallow:
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@ -1,91 +1,45 @@
-import { useEffect } from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
-import 'external-svg-loader';
+import { getConfig, setTheme } from './store/actions';

 // Redux
-import { useDispatch, useSelector } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { autoLogin, getConfig } from './store/action-creators';
-import { actionCreators, store } from './store';
-import { State } from './store/reducers';
+import { store } from './store/store';
+import { Provider } from 'react-redux';

 // Utils
-import { checkVersion, decodeToken, parsePABToTheme } from './utility';
+import { checkVersion } from './utility';

 // Routes
-import { Home } from './components/Home/Home';
-import { Apps } from './components/Apps/Apps';
-import { Settings } from './components/Settings/Settings';
-import { Bookmarks } from './components/Bookmarks/Bookmarks';
-import { NotificationCenter } from './components/NotificationCenter/NotificationCenter';
+import Home from './components/Home/Home';
+import Apps from './components/Apps/Apps';
+import Settings from './components/Settings/Settings';
+import Bookmarks from './components/Bookmarks/Bookmarks';
+import NotificationCenter from './components/NotificationCenter/NotificationCenter';

-// Get config
+// Get config pairs from database
 store.dispatch<any>(getConfig());

-// Validate token
-if (localStorage.token) {
-  store.dispatch<any>(autoLogin());
+// Set theme
+if (localStorage.theme) {
+  store.dispatch<any>(setTheme(localStorage.theme));
 }

-export const App = (): JSX.Element => {
-  const { config, loading } = useSelector((state: State) => state.config);
-
-  const dispath = useDispatch();
-  const { fetchQueries, setTheme, logout, createNotification, fetchThemes } =
-    bindActionCreators(actionCreators, dispath);
-
-  useEffect(() => {
-    // check if token is valid
-    const tokenIsValid = setInterval(() => {
-      if (localStorage.token) {
-        const expiresIn = decodeToken(localStorage.token).exp * 1000;
-        const now = new Date().getTime();
-
-        if (now > expiresIn) {
-          logout();
-          createNotification({
-            title: 'Info',
-            message: 'Session expired. You have been logged out',
-          });
-        }
-      }
-    }, 1000);
-
-    // load themes
-    fetchThemes();
-
-    // set user theme if present
-    if (localStorage.theme) {
-      setTheme(parsePABToTheme(localStorage.theme));
-    }
-
-    // check for updated
-    checkVersion();
-
-    // load custom search queries
-    fetchQueries();
-
-    return () => window.clearInterval(tokenIsValid);
-  }, []);
-
-  // If there is no user theme, set the default one
-  useEffect(() => {
-    if (!loading && !localStorage.theme) {
-      setTheme(parsePABToTheme(config.defaultTheme), false);
-    }
-  }, [loading]);
+// Check for updates
+checkVersion();

+const App = (): JSX.Element => {
  return (
-    <>
+    <Provider store={store}>
      <BrowserRouter>
        <Switch>
-          <Route exact path="/" component={Home} />
-          <Route path="/settings" component={Settings} />
-          <Route path="/applications" component={Apps} />
-          <Route path="/bookmarks" component={Bookmarks} />
+          <Route exact path='/' component={Home} />
+          <Route path='/settings' component={Settings} />
+          <Route path='/applications' component={Apps} />
+          <Route path='/bookmarks' component={Bookmarks} />
        </Switch>
      </BrowserRouter>
      <NotificationCenter />
-    </>
+    </Provider>
  );
-};
+}
+
+export default App;
--- a/client/src/assets/fonts/Roboto/roboto-v29-latin-500.woff
+++ b/client/src/assets/fonts/Roboto/roboto-v29-latin-500.woff
--- a/client/src/assets/fonts/Roboto/roboto-v29-latin-500.woff2
+++ b/client/src/assets/fonts/Roboto/roboto-v29-latin-500.woff2
--- a/client/src/assets/fonts/Roboto/roboto-v29-latin-700.woff
+++ b/client/src/assets/fonts/Roboto/roboto-v29-latin-700.woff
--- a/client/src/assets/fonts/Roboto/roboto-v29-latin-700.woff2
+++ b/client/src/assets/fonts/Roboto/roboto-v29-latin-700.woff2
--- a/client/src/assets/fonts/Roboto/roboto-v29-latin-900.woff
+++ b/client/src/assets/fonts/Roboto/roboto-v29-latin-900.woff
--- a/client/src/assets/fonts/Roboto/roboto-v29-latin-900.woff2
+++ b/client/src/assets/fonts/Roboto/roboto-v29-latin-900.woff2
--- a/client/src/assets/fonts/Roboto/roboto-v29-latin-regular.woff
+++ b/client/src/assets/fonts/Roboto/roboto-v29-latin-regular.woff
--- a/client/src/assets/fonts/Roboto/roboto-v29-latin-regular.woff2
+++ b/client/src/assets/fonts/Roboto/roboto-v29-latin-regular.woff2
--- a/client/src/components/Actions/TableActions.module.css
+++ b/client/src/components/Actions/TableActions.module.css
@ -1,12 +0,0 @@
-.TableActions {
-  display: flex;
-  align-items: center;
-}
-
-.TableAction {
-  width: 22px;
-}
-
-.TableAction:hover {
-  cursor: pointer;
-}
--- a/client/src/components/Actions/TableActions.tsx
+++ b/client/src/components/Actions/TableActions.tsx
@ -1,81 +0,0 @@
-import { Icon } from '../UI';
-import classes from './TableActions.module.css';
-
-interface Entity {
-  id: number;
-  name: string;
-  isPinned?: boolean;
-  isPublic: boolean;
-}
-
-interface Props {
-  entity: Entity;
-  deleteHandler: (id: number, name: string) => void;
-  updateHandler: (id: number) => void;
-  pinHanlder?: (id: number) => void;
-  changeVisibilty: (id: number) => void;
-  showPin?: boolean;
-}
-
-export const TableActions = (props: Props): JSX.Element => {
-  const {
-    entity,
-    deleteHandler,
-    updateHandler,
-    pinHanlder,
-    changeVisibilty,
-    showPin = true,
-  } = props;
-
-  const _pinHandler = pinHanlder || function () {};
-
-  return (
-    <td className={classes.TableActions}>
-      {/* DELETE */}
-      <div
-        className={classes.TableAction}
-        onClick={() => deleteHandler(entity.id, entity.name)}
-        tabIndex={0}
-      >
-        <Icon icon="mdiDelete" />
-      </div>
-
-      {/* UPDATE */}
-      <div
-        className={classes.TableAction}
-        onClick={() => updateHandler(entity.id)}
-        tabIndex={0}
-      >
-        <Icon icon="mdiPencil" />
-      </div>
-
-      {/* PIN */}
-      {showPin && (
-        <div
-          className={classes.TableAction}
-          onClick={() => _pinHandler(entity.id)}
-          tabIndex={0}
-        >
-          {entity.isPinned ? (
-            <Icon icon="mdiPinOff" color="var(--color-accent)" />
-          ) : (
-            <Icon icon="mdiPin" />
-          )}
-        </div>
-      )}
-
-      {/* VISIBILITY */}
-      <div
-        className={classes.TableAction}
-        onClick={() => changeVisibilty(entity.id)}
-        tabIndex={0}
-      >
-        {entity.isPublic ? (
-          <Icon icon="mdiEyeOff" color="var(--color-accent)" />
-        ) : (
-          <Icon icon="mdiEye" />
-        )}
-      </div>
-    </td>
-  );
-};
--- a/client/src/components/Apps/AppCard/AppCard.module.css
+++ b/client/src/components/Apps/AppCard/AppCard.module.css
@ -33,18 +33,10 @@
  .AppCard {
    padding: 2px;
    border-radius: 4px;
-    transition: all 0.1s;
+    transition: all 0.10s;
  }

  .AppCard:hover {
-    background-color: rgba(0, 0, 0, 0.2);
+    background-color: rgba(0,0,0,0.2);
  }
-}
-
-.CustomIcon {
-  width: 90%;
-  height: 90%;
-  margin-top: 2px;
-  margin-left: 2px;
-  object-fit: contain;
-}
+}
--- a/client/src/components/Apps/AppCard/AppCard.tsx
+++ b/client/src/components/Apps/AppCard/AppCard.tsx
@ -1,61 +1,33 @@
 import classes from './AppCard.module.css';
-import { Icon } from '../../UI';
-import { iconParser, isImage, isSvg, isUrl, urlParser } from '../../../utility';
+import Icon from '../../UI/Icons/Icon/Icon';
+import { iconParser, urlParser } from '../../../utility';

 import { App } from '../../../interfaces';
-import { useSelector } from 'react-redux';
-import { State } from '../../../store/reducers';

-interface Props {
+interface ComponentProps {
  app: App;
+  pinHandler?: Function;
 }

-export const AppCard = ({ app }: Props): JSX.Element => {
-  const { config } = useSelector((state: State) => state.config);
-
-  const [displayUrl, redirectUrl] = urlParser(app.url);
-
-  let iconEl: JSX.Element;
-  const { icon } = app;
-
-  if (isImage(icon)) {
-    const source = isUrl(icon) ? icon : `/uploads/${icon}`;
-
-    iconEl = (
-      <img
-        src={source}
-        alt={`${app.name} icon`}
-        className={classes.CustomIcon}
-      />
-    );
-  } else if (isSvg(icon)) {
-    const source = isUrl(icon) ? icon : `/uploads/${icon}`;
-
-    iconEl = (
-      <div className={classes.CustomIcon}>
-        <svg
-          data-src={source}
-          fill="var(--color-primary)"
-          className={classes.CustomIcon}
-        ></svg>
-      </div>
-    );
-  } else {
-    iconEl = <Icon icon={iconParser(icon)} />;
-  }
+const AppCard = (props: ComponentProps): JSX.Element => {
+  const [displayUrl, redirectUrl] = urlParser(props.app.url);

  return (
    <a
      href={redirectUrl}
-      target={config.appsSameTab ? '' : '_blank'}
-      rel="noreferrer"
+      target='_blank'
+      rel='noreferrer'
      className={classes.AppCard}
    >
-      <div className={classes.AppCardIcon}>{iconEl}</div>
+      <div className={classes.AppCardIcon}>
+        <Icon icon={iconParser(props.app.icon)} />
+      </div>
      <div className={classes.AppCardDetails}>
-        <h5>{app.name}</h5>
-        <span>{!app.description.length ? displayUrl : app.description}</span>
+        <h5>{props.app.name}</h5>
+        <span>{displayUrl}</span>
      </div>
    </a>
-  );
-};
+  )
+}
+
+export default AppCard;
--- a/client/src/components/Apps/AppForm/AppForm.module.css
+++ b/client/src/components/Apps/AppForm/AppForm.module.css
@ -1,7 +0,0 @@
-.Switch {
-  text-decoration: underline;
-}
-
-.Switch:hover {
-  cursor: pointer;
-}
--- a/client/src/components/Apps/AppForm/AppForm.tsx
+++ b/client/src/components/Apps/AppForm/AppForm.tsx
@ -1,225 +1,139 @@
-import { useState, useEffect, ChangeEvent, SyntheticEvent } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { NewApp } from '../../../interfaces';
+import { useState, useEffect, useRef, ChangeEvent, SyntheticEvent } from 'react';
+import { connect } from 'react-redux';
+import { addApp, updateApp } from '../../../store/actions';
+import { App, NewApp } from '../../../interfaces';

-import classes from './AppForm.module.css';
+import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
+import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
+import Button from '../../UI/Buttons/Button/Button';

-import { ModalForm, InputGroup, Button } from '../../UI';
-import { inputHandler, newAppTemplate } from '../../../utility';
-import { bindActionCreators } from 'redux';
-import { actionCreators } from '../../../store';
-import { State } from '../../../store/reducers';
-
-interface Props {
+interface ComponentProps {
  modalHandler: () => void;
+  addApp: (formData: NewApp) => any;
+  updateApp: (id: number, formData: NewApp) => any;
+  app?: App;
 }

-export const AppForm = ({ modalHandler }: Props): JSX.Element => {
-  const { appInUpdate } = useSelector((state: State) => state.apps);
+const AppForm = (props: ComponentProps): JSX.Element => {
+  const [formData, setFormData] = useState<NewApp>({
+    name: '',
+    url: '',
+    icon: ''
+  });

-  const dispatch = useDispatch();
-  const { addApp, updateApp, setEditApp, createNotification } =
-    bindActionCreators(actionCreators, dispatch);
-
-  const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
-  const [customIcon, setCustomIcon] = useState<File | null>(null);
-  const [formData, setFormData] = useState<NewApp>(newAppTemplate);
+  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
-    if (appInUpdate) {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [inputRef])
+
+  useEffect(() => {
+    if (props.app) {
      setFormData({
-        ...appInUpdate,
-      });
+        name: props.app.name,
+        url: props.app.url,
+        icon: props.app.icon
+      })
    } else {
-      setFormData(newAppTemplate);
+      setFormData({
+        name: '',
+        url: '',
+        icon: ''
+      })
    }
-  }, [appInUpdate]);
+  }, [props.app])

-  const inputChangeHandler = (
-    e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
-    options?: { isNumber?: boolean; isBool?: boolean }
-  ) => {
-    inputHandler<NewApp>({
-      e,
-      options,
-      setStateHandler: setFormData,
-      state: formData,
-    });
-  };
-
-  const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
-    if (e.target.files) {
-      setCustomIcon(e.target.files[0]);
-    }
-  };
+  const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    })
+  }

  const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
    e.preventDefault();

-    for (let field of ['name', 'url', 'icon'] as const) {
-      if (/^ +$/.test(formData[field])) {
-        createNotification({
-          title: 'Error',
-          message: `Field cannot be empty: ${field}`,
-        });
-
-        return;
-      }
-    }
-
-    const createFormData = (): FormData => {
-      const data = new FormData();
-
-      if (customIcon) {
-        data.append('icon', customIcon);
-      }
-
-      data.append('name', formData.name);
-      data.append('description', formData.description);
-      data.append('url', formData.url);
-      data.append('isPublic', `${formData.isPublic ? 1 : 0}`);
-
-      return data;
-    };
-
-    if (!appInUpdate) {
-      if (customIcon) {
-        const data = createFormData();
-        addApp(data);
-      } else {
-        addApp(formData);
-      }
+    if (!props.app) {
+      props.addApp(formData);
    } else {
-      if (customIcon) {
-        const data = createFormData();
-        updateApp(appInUpdate.id, data);
-      } else {
-        updateApp(appInUpdate.id, formData);
-        modalHandler();
-      }
+      props.updateApp(props.app.id, formData);
+      props.modalHandler();
    }

-    setFormData(newAppTemplate);
-    setEditApp(null);
-  };
+    setFormData({
+      name: '',
+      url: '',
+      icon: ''
+    })
+  }

  return (
-    <ModalForm modalHandler={modalHandler} formHandler={formSubmitHandler}>
-      {/* NAME */}
+    <ModalForm
+      modalHandler={props.modalHandler}
+      formHandler={formSubmitHandler}
+    >
      <InputGroup>
-        <label htmlFor="name">App name</label>
+        <label htmlFor='name'>App Name</label>
        <input
-          type="text"
-          name="name"
-          id="name"
-          placeholder="Bookstack"
+          type='text'
+          name='name'
+          id='name'
+          placeholder='Bookstack'
          required
          value={formData.name}
          onChange={(e) => inputChangeHandler(e)}
+          ref={inputRef}
        />
      </InputGroup>
-
-      {/* URL */}
      <InputGroup>
-        <label htmlFor="url">App URL</label>
+        <label htmlFor='url'>App URL</label>
        <input
-          type="text"
-          name="url"
-          id="url"
-          placeholder="bookstack.example.com"
+          type='text'
+          name='url'
+          id='url'
+          placeholder='bookstack.example.com'
          required
          value={formData.url}
          onChange={(e) => inputChangeHandler(e)}
        />
+        <span>
+          <a
+            href='https://github.com/pawelmalak/flame#supported-url-formats-for-applications-and-bookmarks'
+            target='_blank'
+            rel='noreferrer'
+          >
+            {' '}Check supported URL formats
+          </a>
+        </span>
      </InputGroup>
-
-      {/* DESCRIPTION */}
      <InputGroup>
-        <label htmlFor="description">App description</label>
+        <label htmlFor='icon'>App Icon</label>
        <input
-          type="text"
-          name="description"
-          id="description"
-          placeholder="My self-hosted app"
-          value={formData.description}
+          type='text'
+          name='icon'
+          id='icon'
+          placeholder='book-open-outline'
+          required
+          value={formData.icon}
          onChange={(e) => inputChangeHandler(e)}
        />
        <span>
-          Optional - If description is not set, app URL will be displayed
+          Use icon name from MDI. 
+          <a
+            href='https://materialdesignicons.com/'
+            target='blank'>
+            {' '}Click here for reference
+          </a>
        </span>
      </InputGroup>
-
-      {/* ICON */}
-      {!useCustomIcon ? (
-        // use mdi icon
-        <InputGroup>
-          <label htmlFor="icon">App icon</label>
-          <input
-            type="text"
-            name="icon"
-            id="icon"
-            placeholder="book-open-outline"
-            required
-            value={formData.icon}
-            onChange={(e) => inputChangeHandler(e)}
-          />
-          <span>
-            Use icon name from MDI or pass a valid URL.
-            <a href="https://pictogrammers.com/library/mdi/" target="blank">
-              {' '}
-              Click here for reference
-            </a>
-          </span>
-          <span
-            onClick={() => toggleUseCustomIcon(!useCustomIcon)}
-            className={classes.Switch}
-          >
-            Switch to custom icon upload
-          </span>
-        </InputGroup>
-      ) : (
-        // upload custom icon
-        <InputGroup>
-          <label htmlFor="icon">App Icon</label>
-          <input
-            type="file"
-            name="icon"
-            id="icon"
-            required
-            onChange={(e) => fileChangeHandler(e)}
-            accept=".jpg,.jpeg,.png,.svg,.ico"
-          />
-          <span
-            onClick={() => {
-              setCustomIcon(null);
-              toggleUseCustomIcon(!useCustomIcon);
-            }}
-            className={classes.Switch}
-          >
-            Switch to MDI
-          </span>
-        </InputGroup>
-      )}
-
-      {/* VISIBILITY */}
-      <InputGroup>
-        <label htmlFor="isPublic">App visibility</label>
-        <select
-          id="isPublic"
-          name="isPublic"
-          value={formData.isPublic ? 1 : 0}
-          onChange={(e) => inputChangeHandler(e, { isBool: true })}
-        >
-          <option value={1}>Visible (anyone can access it)</option>
-          <option value={0}>Hidden (authentication required)</option>
-        </select>
-      </InputGroup>
-
-      {!appInUpdate ? (
-        <Button>Add new application</Button>
-      ) : (
-        <Button>Update application</Button>
-      )}
+      {!props.app
+        ? <Button>Add new application</Button>
+        : <Button>Update application</Button>
+      }
    </ModalForm>
-  );
-};
+  )
+}
+
+export default connect(null, { addApp, updateApp })(AppForm);
--- a/client/src/components/Apps/AppGrid/AppGrid.module.css
+++ b/client/src/components/Apps/AppGrid/AppGrid.module.css
@ -20,3 +20,21 @@
    grid-template-columns: repeat(4, 1fr);
  }
 }
+
+.GridMessage {
+  color: var(--color-primary);
+}
+
+.GridMessage a {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.AppsMessage {
+  color: var(--color-primary);
+}
+
+.AppsMessage a {
+  color: var(--color-accent);
+  font-weight: 600;
+}
--- a/client/src/components/Apps/AppGrid/AppGrid.tsx
+++ b/client/src/components/Apps/AppGrid/AppGrid.tsx
@ -2,47 +2,40 @@ import classes from './AppGrid.module.css';
 import { Link } from 'react-router-dom';
 import { App } from '../../../interfaces/App';

-import { AppCard } from '../AppCard/AppCard';
-import { Message } from '../../UI';
+import AppCard from '../AppCard/AppCard';

-interface Props {
+interface ComponentProps {
  apps: App[];
  totalApps?: number;
-  searching: boolean;
 }

-export const AppGrid = (props: Props): JSX.Element => {
+const AppGrid = (props: ComponentProps): JSX.Element => {
  let apps: JSX.Element;

-  if (props.searching || props.apps.length) {
-    if (!props.apps.length) {
-      apps = <Message>No apps match your search criteria</Message>;
-    } else {
-      apps = (
-        <div className={classes.AppGrid}>
-          {props.apps.map((app: App): JSX.Element => {
-            return <AppCard key={app.id} app={app} />;
-          })}
-        </div>
-      );
-    }
+  if (props.apps.length > 0) {
+    apps = (
+      <div className={classes.AppGrid}>
+        {props.apps.map((app: App): JSX.Element => {
+          return <AppCard
+            key={app.id}
+            app={app}
+          />
+        })}
+      </div>
+    )
  } else {
    if (props.totalApps) {
      apps = (
-        <Message>
-          There are no pinned applications. You can pin them from the{' '}
-          <Link to="/applications">/applications</Link> menu
-        </Message>
+        <p className={classes.AppsMessage}>There are no pinned applications. You can pin them from the <Link to='/applications'>/applications</Link> menu</p>
      );
    } else {
      apps = (
-        <Message>
-          You don't have any applications. You can add a new one from{' '}
-          <Link to="/applications">/applications</Link> menu
-        </Message>
+        <p className={classes.AppsMessage}>You don't have any applications. You can add a new one from <Link to='/applications'>/applications</Link> menu</p>
      );
    }
  }

  return apps;
-};
+}
+
+export default AppGrid;
--- a/client/src/components/UI/Text/Message/Message.module.css
+++ b/client/src/components/UI/Text/Message/Message.module.css
@ -1,13 +1,17 @@
-.message {
-  color: var(--color-primary);
+.TableActions {
+  display: flex;
+  align-items: center;
 }

-.message a {
-  color: var(--color-accent);
-  font-weight: 600;
+.TableAction {
+  width: 22px;
 }

-.messageCenter {
+.TableAction:hover {
+  cursor: pointer;
+}
+
+.Message {
  width: 100%;
  display: flex;
  justify-content: center;
@ -16,11 +20,10 @@
  margin-bottom: 20px;
 }

-.messageCenter a,
-.messageCenter span {
+.Message a {
  color: var(--color-accent);
 }

-.messageCenter a:hover {
+.Message a:hover {
  cursor: pointer;
-}
+}
--- a/client/src/components/Apps/AppTable/AppTable.tsx
+++ b/client/src/components/Apps/AppTable/AppTable.tsx
@ -1,52 +1,73 @@
-import { Fragment, useState, useEffect } from 'react';
-import {
-  DragDropContext,
-  Droppable,
-  Draggable,
-  DropResult,
-} from 'react-beautiful-dnd';
+import { Fragment, KeyboardEvent, useState, useEffect } from 'react';
+import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
 import { Link } from 'react-router-dom';

 // Redux
-import { useDispatch, useSelector } from 'react-redux';
-import { State } from '../../../store/reducers';
-import { bindActionCreators } from 'redux';
-import { actionCreators } from '../../../store';
+import { connect } from 'react-redux';
+import { pinApp, deleteApp, reorderApps, updateConfig, createNotification } from '../../../store/actions';

 // Typescript
-import { App } from '../../../interfaces';
+import { App, GlobalState, NewNotification } from '../../../interfaces';

-// Other
-import { Message, Table } from '../../UI';
-import { TableActions } from '../../Actions/TableActions';
+// CSS
+import classes from './AppTable.module.css';

-interface Props {
-  openFormForUpdating: (app: App) => void;
+// UI
+import Icon from '../../UI/Icons/Icon/Icon';
+import Table from '../../UI/Table/Table';
+
+// Utils
+import { searchConfig } from '../../../utility';
+
+interface ComponentProps {
+  apps: App[];
+  pinApp: (app: App) => void;
+  deleteApp: (id: number) => void;
+  updateAppHandler: (app: App) => void;
+  reorderApps: (apps: App[]) => void;
+  updateConfig: (formData: any) => void;
+  createNotification: (notification: NewNotification) => void;
 }

-export const AppTable = (props: Props): JSX.Element => {
-  const {
-    apps: { apps },
-    config: { config },
-  } = useSelector((state: State) => state);
-
-  const dispatch = useDispatch();
-  const { pinApp, deleteApp, reorderApps, createNotification, updateApp } =
-    bindActionCreators(actionCreators, dispatch);
-
+const AppTable = (props: ComponentProps): JSX.Element => {
  const [localApps, setLocalApps] = useState<App[]>([]);
+  const [isCustomOrder, setIsCustomOrder] = useState<boolean>(false);

  // Copy apps array
  useEffect(() => {
-    setLocalApps([...apps]);
-  }, [apps]);
+    setLocalApps([...props.apps]);
+  }, [props.apps])
+
+  // Check ordering
+  useEffect(() => {
+    const order = searchConfig('useOrdering', '');
+
+    if (order === 'orderId') {
+      setIsCustomOrder(true);
+    }
+  }, [])
+
+  const deleteAppHandler = (app: App): void => {
+    const proceed = window.confirm(`Are you sure you want to delete ${app.name} at ${app.url} ?`);
+
+    if (proceed) {
+      props.deleteApp(app.id);
+    }
+  }
+
+  // Support keyboard navigation for actions
+  const keyboardActionHandler = (e: KeyboardEvent, app: App, handler: Function) => {
+    if (e.key === 'Enter') {
+      handler(app);
+    }
+  }

  const dragEndHanlder = (result: DropResult): void => {
-    if (config.useOrdering !== 'orderId') {
-      createNotification({
+    if (!isCustomOrder) {
+      props.createNotification({
        title: 'Error',
-        message: 'Custom order is disabled',
-      });
+        message: 'Custom order is disabled'
+      })
      return;
    }

@ -59,65 +80,33 @@ export const AppTable = (props: Props): JSX.Element => {
    tmpApps.splice(result.destination.index, 0, movedApp);

    setLocalApps(tmpApps);
-    reorderApps(tmpApps);
-  };
-
-  // Action handlers
-  const deleteAppHandler = (id: number, name: string) => {
-    const proceed = window.confirm(`Are you sure you want to delete ${name}?`);
-
-    if (proceed) {
-      deleteApp(id);
-    }
-  };
-
-  const updateAppHandler = (id: number) => {
-    const app = apps.find((a) => a.id === id) as App;
-    props.openFormForUpdating(app);
-  };
-
-  const pinAppHandler = (id: number) => {
-    const app = apps.find((a) => a.id === id) as App;
-    pinApp(app);
-  };
-
-  const changeAppVisibiltyHandler = (id: number) => {
-    const app = apps.find((a) => a.id === id) as App;
-    updateApp(id, { ...app, isPublic: !app.isPublic });
-  };
+    props.reorderApps(tmpApps);
+  }

  return (
    <Fragment>
-      <Message isPrimary={false}>
-        {config.useOrdering === 'orderId' ? (
-          <p>You can drag and drop single rows to reorder application</p>
-        ) : (
-          <p>
-            Custom order is disabled. You can change it in the{' '}
-            <Link to="/settings/general">settings</Link>
-          </p>
-        )}
-      </Message>
-
+      <div className={classes.Message}>
+        {isCustomOrder
+          ? <p>You can drag and drop single rows to reorder application</p>
+          : <p>Custom order is disabled. You can change it in <Link to='/settings/other'>settings</Link></p>
+        }
+      </div>
      <DragDropContext onDragEnd={dragEndHanlder}>
-        <Droppable droppableId="apps">
+        <Droppable droppableId='apps'>
          {(provided) => (
-            <Table
-              headers={['Name', 'URL', 'Icon', 'Visibility', 'Actions']}
-              innerRef={provided.innerRef}
-            >
+            <Table headers={[
+              'Name',
+              'URL',
+              'Icon',
+              'Actions'
+            ]}
+            innerRef={provided.innerRef}>
              {localApps.map((app: App, index): JSX.Element => {
                return (
-                  <Draggable
-                    key={app.id}
-                    draggableId={app.id.toString()}
-                    index={index}
-                  >
+                  <Draggable key={app.id} draggableId={app.id.toString()} index={index}>
                    {(provided, snapshot) => {
                      const style = {
-                        border: snapshot.isDragging
-                          ? '1px solid var(--color-accent)'
-                          : 'none',
+                        border: snapshot.isDragging ? '1px solid var(--color-accent)' : 'none',
                        borderRadius: '4px',
                        ...provided.draggableProps.style,
                      };
@ -129,32 +118,63 @@ export const AppTable = (props: Props): JSX.Element => {
                          ref={provided.innerRef}
                          style={style}
                        >
-                          <td style={{ width: '200px' }}>{app.name}</td>
-                          <td style={{ width: '200px' }}>{app.url}</td>
-                          <td style={{ width: '200px' }}>{app.icon}</td>
-                          <td style={{ width: '200px' }}>
-                            {app.isPublic ? 'Visible' : 'Hidden'}
-                          </td>
-
+                          <td style={{ width:'200px' }}>{app.name}</td>
+                          <td style={{ width:'200px' }}>{app.url}</td>
+                          <td style={{ width:'200px' }}>{app.icon}</td>
                          {!snapshot.isDragging && (
-                            <TableActions
-                              entity={app}
-                              deleteHandler={deleteAppHandler}
-                              updateHandler={updateAppHandler}
-                              pinHanlder={pinAppHandler}
-                              changeVisibilty={changeAppVisibiltyHandler}
-                            />
+                            <td className={classes.TableActions}>
+                              <div
+                                className={classes.TableAction}
+                                onClick={() => deleteAppHandler(app)}
+                                onKeyDown={(e) => keyboardActionHandler(e, app, deleteAppHandler)}
+                                tabIndex={0}>
+                                <Icon icon='mdiDelete' />
+                              </div>
+                              <div
+                                className={classes.TableAction}
+                                onClick={() => props.updateAppHandler(app)}
+                                onKeyDown={(e) => keyboardActionHandler(e, app, props.updateAppHandler)}
+                                tabIndex={0}>
+                                <Icon icon='mdiPencil' />
+                              </div>
+                              <div
+                                className={classes.TableAction}
+                                onClick={() => props.pinApp(app)}
+                                onKeyDown={(e) => keyboardActionHandler(e, app, props.pinApp)}
+                                tabIndex={0}>
+                                {app.isPinned
+                                  ? <Icon icon='mdiPinOff' color='var(--color-accent)' />
+                                  : <Icon icon='mdiPin' />
+                                }
+                              </div>
+                            </td>
                          )}
                        </tr>
-                      );
+                      )
                    }}
                  </Draggable>
-                );
+                )
              })}
            </Table>
          )}
        </Droppable>
      </DragDropContext>
    </Fragment>
-  );
-};
+  )
+}
+
+const mapStateToProps = (state: GlobalState) => {
+  return {
+    apps: state.app.apps
+  }
+}
+
+const actions = {
+  pinApp,
+  deleteApp,
+  reorderApps,
+  updateConfig,
+  createNotification
+}
+
+export default connect(mapStateToProps, actions)(AppTable);
--- a/client/src/components/Apps/Apps.tsx
+++ b/client/src/components/Apps/Apps.tsx
@ -2,109 +2,120 @@ import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';

 // Redux
-import { useDispatch, useSelector } from 'react-redux';
+import { connect } from 'react-redux';
+import { getApps } from '../../store/actions';

 // Typescript
-import { App } from '../../interfaces';
+import { App, GlobalState } from '../../interfaces';

 // CSS
 import classes from './Apps.module.css';

 // UI
-import { Headline, Spinner, ActionButton, Modal, Container } from '../UI';
+import { Container } from '../UI/Layout/Layout';
+import Headline from '../UI/Headlines/Headline/Headline';
+import Spinner from '../UI/Spinner/Spinner';
+import ActionButton from '../UI/Buttons/ActionButton/ActionButton';
+import Modal from '../UI/Modal/Modal';

 // Subcomponents
-import { AppGrid } from './AppGrid/AppGrid';
-import { AppForm } from './AppForm/AppForm';
-import { AppTable } from './AppTable/AppTable';
+import AppGrid from './AppGrid/AppGrid';
+import AppForm from './AppForm/AppForm';
+import AppTable from './AppTable/AppTable';

-// Utils
-import { State } from '../../store/reducers';
-import { bindActionCreators } from 'redux';
-import { actionCreators } from '../../store';
-
-interface Props {
-  searching: boolean;
+interface ComponentProps {
+  getApps: Function;
+  apps: App[];
+  loading: boolean;
 }

-export const Apps = (props: Props): JSX.Element => {
-  // Get Redux state
+const Apps = (props: ComponentProps): JSX.Element => {
  const {
-    apps: { apps, loading },
-    auth: { isAuthenticated },
-  } = useSelector((state: State) => state);
+    getApps,
+    apps,
+    loading
+  } = props;

-  // Get Redux action creators
-  const dispatch = useDispatch();
-  const { getApps, setEditApp } = bindActionCreators(actionCreators, dispatch);
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+  const [isInEdit, setIsInEdit] = useState(false);
+  const [isInUpdate, setIsInUpdate] = useState(false);
+  const [appInUpdate, setAppInUpdate] = useState<App>({
+    name: 'string',
+    url: 'string',
+    icon: 'string',
+    isPinned: false,
+    orderId: 0,
+    id: 0,
+    createdAt: new Date(),
+    updatedAt: new Date()
+  })

-  // Load apps if array is empty
  useEffect(() => {
-    if (!apps.length) {
+    if (apps.length === 0) {
      getApps();
    }
-  }, []);
+  }, [getApps]);

-  // Form
-  const [modalIsOpen, setModalIsOpen] = useState(false);
-  const [showTable, setShowTable] = useState(false);
-
-  // Observe if user is authenticated -> set default view if not
-  useEffect(() => {
-    if (!isAuthenticated) {
-      setShowTable(false);
-      setModalIsOpen(false);
-    }
-  }, [isAuthenticated]);
-
-  // Form actions
  const toggleModal = (): void => {
    setModalIsOpen(!modalIsOpen);
-  };
+    setIsInUpdate(false);
+  }

  const toggleEdit = (): void => {
-    setShowTable(!showTable);
-  };
+    setIsInEdit(!isInEdit);
+    setIsInUpdate(false);
+  }

-  const openFormForUpdating = (app: App): void => {
-    setEditApp(app);
+  const toggleUpdate = (app: App): void => {
+    setAppInUpdate(app);
+    setIsInUpdate(true);
    setModalIsOpen(true);
-  };
+  }

  return (
    <Container>
      <Modal isOpen={modalIsOpen} setIsOpen={setModalIsOpen}>
-        <AppForm modalHandler={toggleModal} />
+        {!isInUpdate
+          ? <AppForm modalHandler={toggleModal} />
+          : <AppForm modalHandler={toggleModal} app={appInUpdate} />
+        }
      </Modal>

      <Headline
-        title="All Applications"
-        subtitle={<Link to="/">Go back</Link>}
+        title='All Applications'
+        subtitle={(<Link to='/'>Go back</Link>)}
      />
-
-      {isAuthenticated && (
-        <div className={classes.ActionsContainer}>
-          <ActionButton
-            name="Add"
-            icon="mdiPlusBox"
-            handler={() => {
-              setEditApp(null);
-              toggleModal();
-            }}
-          />
-          <ActionButton name="Edit" icon="mdiPencil" handler={toggleEdit} />
-        </div>
-      )}
+      
+      <div className={classes.ActionsContainer}>
+        <ActionButton
+          name='Add'
+          icon='mdiPlusBox'
+          handler={toggleModal}
+        />
+        <ActionButton
+          name='Edit'
+          icon='mdiPencil'
+          handler={toggleEdit}
+        />
+      </div>

      <div className={classes.Apps}>
-        {loading ? (
-          <Spinner />
-        ) : !showTable ? (
-          <AppGrid apps={apps} searching={props.searching} />
-        ) : (
-          <AppTable openFormForUpdating={openFormForUpdating} />
-        )}
+        {loading
+          ? <Spinner />
+          : (!isInEdit
+              ? <AppGrid apps={apps} />
+              : <AppTable updateAppHandler={toggleUpdate} />)
+        }
      </div>
    </Container>
-  );
-};
+  )
+}
+
+const mapStateToProps = (state: GlobalState) => {
+  return {
+    apps: state.app.apps,
+    loading: state.app.loading
+  }
+}
+
+export default connect(mapStateToProps, { getApps })(Apps);
--- a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css
+++ b/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css
@ -10,10 +10,6 @@
  text-transform: uppercase;
 }

-.BookmarkHeader:hover {
-  cursor: pointer;
-}
-
 .Bookmarks {
  display: flex;
  flex-direction: column;
@ -36,21 +32,4 @@
  display: flex;
  margin-top: 3px;
  margin-right: 2px;
-  justify-content: center;
-  align-items: center;
-}
-
-.BookmarkIconSvg {
-  width: 80%;
-  height: 80%;
-  margin-top: 2px;
-  margin-left: 2px;
-  object-fit: contain;
-}
-
-.CustomIcon {
-  width: 90%;
-  height: 90%;
-  margin-top: 2px;
-  object-fit: contain;
-}
+}
--- a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx
+++ b/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx
@ -1,105 +1,39 @@
-import { Fragment } from 'react';
-
-// Redux
-import { useDispatch, useSelector } from 'react-redux';
-import { State } from '../../../store/reducers';
-import { bindActionCreators } from 'redux';
-import { actionCreators } from '../../../store';
-
-// Typescript
 import { Bookmark, Category } from '../../../interfaces';
-
-// Other
 import classes from './BookmarkCard.module.css';
-import { Icon } from '../../UI';
-import { iconParser, isImage, isSvg, isUrl, urlParser } from '../../../utility';

-interface Props {
+import Icon from '../../UI/Icons/Icon/Icon';
+import { iconParser, urlParser } from '../../../utility';
+
+interface ComponentProps {
  category: Category;
-  fromHomepage?: boolean;
 }

-export const BookmarkCard = (props: Props): JSX.Element => {
-  const { category, fromHomepage = false } = props;
-
-  const {
-    config: { config },
-    auth: { isAuthenticated },
-  } = useSelector((state: State) => state);
-
-  const dispatch = useDispatch();
-  const { setEditCategory } = bindActionCreators(actionCreators, dispatch);
-
+const BookmarkCard = (props: ComponentProps): JSX.Element => {
  return (
    <div className={classes.BookmarkCard}>
-      <h3
-        className={
-          fromHomepage || !isAuthenticated ? '' : classes.BookmarkHeader
-        }
-        onClick={() => {
-          if (!fromHomepage && isAuthenticated) {
-            setEditCategory(category);
-          }
-        }}
-      >
-        {category.name}
-      </h3>
-
+      <h3>{props.category.name}</h3>
      <div className={classes.Bookmarks}>
-        {category.bookmarks.map((bookmark: Bookmark) => {
+        {props.category.bookmarks.map((bookmark: Bookmark) => {
          const redirectUrl = urlParser(bookmark.url)[1];

-          let iconEl: JSX.Element = <Fragment></Fragment>;
-
-          if (bookmark.icon) {
-            const { icon, name } = bookmark;
-
-            if (isImage(icon)) {
-              const source = isUrl(icon) ? icon : `/uploads/${icon}`;
-
-              iconEl = (
-                <div className={classes.BookmarkIcon}>
-                  <img
-                    src={source}
-                    alt={`${name} icon`}
-                    className={classes.CustomIcon}
-                  />
-                </div>
-              );
-            } else if (isSvg(icon)) {
-              const source = isUrl(icon) ? icon : `/uploads/${icon}`;
-
-              iconEl = (
-                <div className={classes.BookmarkIcon}>
-                  <svg
-                    data-src={source}
-                    fill="var(--color-primary)"
-                    className={classes.BookmarkIconSvg}
-                  ></svg>
-                </div>
-              );
-            } else {
-              iconEl = (
-                <div className={classes.BookmarkIcon}>
-                  <Icon icon={iconParser(icon)} />
-                </div>
-              );
-            }
-          }
-
          return (
            <a
              href={redirectUrl}
-              target={config.bookmarksSameTab ? '' : '_blank'}
-              rel="noreferrer"
-              key={`bookmark-${bookmark.id}`}
-            >
-              {bookmark.icon && iconEl}
+              target='_blank'
+              rel='noreferrer'
+              key={`bookmark-${bookmark.id}`}>
+              {bookmark.icon && (
+                <div className={classes.BookmarkIcon}>
+                  <Icon icon={iconParser(bookmark.icon)} />
+                </div>
+              )}
              {bookmark.name}
            </a>
-          );
+          )
        })}
      </div>
    </div>
-  );
-};
+  )
+}
+
+export default BookmarkCard;
--- a/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx
+++ b/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx
@ -0,0 +1,261 @@
+import { useState, SyntheticEvent, Fragment, ChangeEvent, useEffect } from 'react';
+import { connect } from 'react-redux';
+
+import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
+import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
+import { Bookmark, Category, GlobalState, NewBookmark, NewCategory, NewNotification } from '../../../interfaces';
+import { ContentType } from '../Bookmarks';
+import { getCategories, addCategory, addBookmark, updateCategory, updateBookmark, createNotification } from '../../../store/actions';
+import Button from '../../UI/Buttons/Button/Button';
+
+interface ComponentProps {
+  modalHandler: () => void;
+  contentType: ContentType;
+  categories: Category[];
+  category?: Category;
+  bookmark?: Bookmark;
+  addCategory: (formData: NewCategory) => void;
+  addBookmark: (formData: NewBookmark) => void;
+  updateCategory: (id: number, formData: NewCategory) => void;
+  updateBookmark: (id: number, formData: NewBookmark, previousCategoryId: number) => void;
+  createNotification: (notification: NewNotification) => void;
+}
+
+const BookmarkForm = (props: ComponentProps): JSX.Element => {
+  const [categoryName, setCategoryName] = useState<NewCategory>({
+    name: ''
+  })
+
+  const [formData, setFormData] = useState<NewBookmark>({
+    name: '',
+    url: '',
+    categoryId: -1,
+    icon: ''
+  })
+
+  // Load category data if provided for editing
+  useEffect(() => {
+    if (props.category) {
+      setCategoryName({ name: props.category.name });
+    } else {
+      setCategoryName({ name: '' });
+    }
+  }, [props.category])
+
+  // Load bookmark data if provided for editing
+  useEffect(() => {
+    if (props.bookmark) {
+      setFormData({
+        name: props.bookmark.name,
+        url: props.bookmark.url,
+        categoryId: props.bookmark.categoryId,
+        icon: props.bookmark.icon
+      })
+    } else {
+      setFormData({
+        name: '',
+        url: '',
+        categoryId: -1,
+        icon: ''
+      })
+    }
+  }, [props.bookmark])
+
+  const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
+    e.preventDefault();
+
+    if (!props.category && !props.bookmark) {
+      // Add new
+      if (props.contentType === ContentType.category) {
+        // Add category
+        props.addCategory(categoryName);
+        setCategoryName({ name: '' });
+      } else if (props.contentType === ContentType.bookmark) {
+        // Add bookmark
+        if (formData.categoryId === -1) {
+          props.createNotification({
+            title: 'Error',
+            message: 'Please select category'
+          })
+          return;
+        }
+  
+        props.addBookmark(formData);
+        setFormData({
+          name: '',
+          url: '',
+          categoryId: formData.categoryId,
+          icon: ''
+        })
+      }
+    } else {
+      // Update
+      if (props.contentType === ContentType.category && props.category) {
+        // Update category
+        props.updateCategory(props.category.id, categoryName);
+        setCategoryName({ name: '' });
+      } else if (props.contentType === ContentType.bookmark && props.bookmark) {
+        // Update bookmark
+        props.updateBookmark(props.bookmark.id, formData, props.bookmark.categoryId);
+        setFormData({
+          name: '',
+          url: '',
+          categoryId: -1,
+          icon: ''
+        })
+      }
+
+      props.modalHandler();
+    }
+  }
+
+  const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    })
+  }
+
+  const selectChangeHandler = (e: ChangeEvent<HTMLSelectElement>): void => {
+    setFormData({
+      ...formData,
+      categoryId: parseInt(e.target.value)
+    })
+  }
+
+  let button = <Button>Submit</Button>
+
+  if (!props.category && !props.bookmark) {
+    if (props.contentType === ContentType.category) {
+      button = <Button>Add new category</Button>;
+    } else {
+      button = <Button>Add new bookmark</Button>;
+    }
+  } else if (props.category) {
+    button = <Button>Update category</Button>
+  } else if (props.bookmark) {
+    button = <Button>Update bookmark</Button>
+  }
+
+  return (
+    <ModalForm
+      modalHandler={props.modalHandler}
+      formHandler={formSubmitHandler}
+    >
+      {props.contentType === ContentType.category
+        ? (
+          <Fragment>
+            <InputGroup>
+              <label htmlFor='categoryName'>Category Name</label>
+              <input
+                type='text'
+                name='categoryName'
+                id='categoryName'
+                placeholder='Social Media'
+                required
+                value={categoryName.name}
+                onChange={(e) => setCategoryName({ name: e.target.value })}
+              />
+            </InputGroup>
+          </Fragment>
+        )
+        : (
+          <Fragment>
+            <InputGroup>
+              <label htmlFor='name'>Bookmark Name</label>
+              <input
+                type='text'
+                name='name'
+                id='name'
+                placeholder='Reddit'
+                required
+                value={formData.name}
+                onChange={(e) => inputChangeHandler(e)}
+              />
+            </InputGroup>
+            <InputGroup>
+              <label htmlFor='url'>Bookmark URL</label>
+              <input
+                type='text'
+                name='url'
+                id='url'
+                placeholder='reddit.com'
+                required
+                value={formData.url}
+                onChange={(e) => inputChangeHandler(e)}
+              />
+              <span>
+                <a
+                  href='https://github.com/pawelmalak/flame#supported-url-formats-for-applications-and-bookmarks'
+                  target='_blank'
+                  rel='noreferrer'
+                >
+                  {' '}Check supported URL formats
+                </a>
+              </span>
+            </InputGroup>
+            <InputGroup>
+              <label htmlFor='categoryId'>Bookmark Category</label>
+              <select
+                name='categoryId'
+                id='categoryId'
+                required
+                onChange={(e) => selectChangeHandler(e)}
+                value={formData.categoryId}
+              >
+                <option value={-1}>Select category</option>
+                {props.categories.map((category: Category): JSX.Element => {
+                  return (
+                    <option
+                      key={category.id}
+                      value={category.id}
+                    >
+                      {category.name}
+                    </option>
+                  )
+                })}
+              </select>
+            </InputGroup>
+            <InputGroup>
+              <label htmlFor='icon'>Bookmark Icon (optional)</label>
+              <input
+                type='text'
+                name='icon'
+                id='icon'
+                placeholder='book-open-outline'
+                value={formData.icon}
+                onChange={(e) => inputChangeHandler(e)}
+              />
+              <span>
+                Use icon name from MDI. 
+                <a
+                  href='https://materialdesignicons.com/'
+                  target='blank'>
+                  {' '}Click here for reference
+                </a>
+              </span>
+            </InputGroup>
+          </Fragment>
+        )
+      }
+      {button}
+    </ModalForm>
+  )
+}
+
+const mapStateToProps = (state: GlobalState) => {
+  return {
+    categories: state.bookmark.categories
+  }
+}
+
+const dispatchMap = {
+  getCategories,
+  addCategory,
+  addBookmark,
+  updateCategory,
+  updateBookmark,
+  createNotification
+}
+
+export default connect(mapStateToProps, dispatchMap)(BookmarkForm);
--- a/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.module.css
+++ b/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.module.css
@ -20,3 +20,12 @@
    grid-template-columns: repeat(4, 1fr);
  }
 }
+
+.BookmarksMessage {
+  color: var(--color-primary);
+}
+
+.BookmarksMessage a {
+  color: var(--color-accent);
+  font-weight: 600;
+}
--- a/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx
+++ b/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx
@ -4,61 +4,35 @@ import classes from './BookmarkGrid.module.css';

 import { Category } from '../../../interfaces';

-import { BookmarkCard } from '../BookmarkCard/BookmarkCard';
-import { Message } from '../../UI';
+import BookmarkCard from '../BookmarkCard/BookmarkCard';

-interface Props {
+interface ComponentProps {
  categories: Category[];
  totalCategories?: number;
-  searching: boolean;
-  fromHomepage?: boolean;
 }

-export const BookmarkGrid = (props: Props): JSX.Element => {
-  const {
-    categories,
-    totalCategories,
-    searching,
-    fromHomepage = false,
-  } = props;
-
+const BookmarkGrid = (props: ComponentProps): JSX.Element => {
  let bookmarks: JSX.Element;

-  if (categories.length) {
-    if (searching && !categories[0].bookmarks.length) {
-      bookmarks = <Message>No bookmarks match your search criteria</Message>;
-    } else {
-      bookmarks = (
-        <div className={classes.BookmarkGrid}>
-          {categories.map(
-            (category: Category): JSX.Element => (
-              <BookmarkCard
-                category={category}
-                fromHomepage={fromHomepage}
-                key={category.id}
-              />
-            )
-          )}
-        </div>
-      );
-    }
+  if (props.categories.length > 0) {
+    bookmarks = (
+      <div className={classes.BookmarkGrid}>
+        {props.categories.map((category: Category): JSX.Element => <BookmarkCard category={category} key={category.id} />)}
+      </div>
+    );
  } else {
-    if (totalCategories) {
+    if (props.totalCategories) {
      bookmarks = (
-        <Message>
-          There are no pinned categories. You can pin them from the{' '}
-          <Link to="/bookmarks">/bookmarks</Link> menu
-        </Message>
+        <p className={classes.BookmarksMessage}>There are no pinned categories. You can pin them from the <Link to='/bookmarks'>/bookmarks</Link> menu</p>
      );
    } else {
      bookmarks = (
-        <Message>
-          You don't have any bookmarks. You can add a new one from{' '}
-          <Link to="/bookmarks">/bookmarks</Link> menu
-        </Message>
+        <p className={classes.BookmarksMessage}>You don't have any bookmarks. You can add a new one from <Link to='/bookmarks'>/bookmarks</Link> menu</p>
      );
    }
  }

  return bookmarks;
-};
+}
+
+export default BookmarkGrid;
--- a/client/src/components/Bookmarks/BookmarkTable/BookmarkTable.module.css
+++ b/client/src/components/Bookmarks/BookmarkTable/BookmarkTable.module.css
@ -0,0 +1,29 @@
+.TableActions {
+  display: flex;
+  align-items: center;
+}
+
+.TableAction {
+  width: 22px;
+}
+
+.TableAction:hover {
+  cursor: pointer;
+}
+
+.Message {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  color: var(--color-primary);
+  margin-bottom: 20px;
+}
+
+.Message a {
+  color: var(--color-accent);
+}
+
+.Message a:hover {
+  cursor: pointer;
+}
--- a/client/src/components/Bookmarks/BookmarkTable/BookmarkTable.tsx
+++ b/client/src/components/Bookmarks/BookmarkTable/BookmarkTable.tsx
@ -0,0 +1,225 @@
+import { KeyboardEvent, useState, useEffect, Fragment } from 'react';
+import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
+import { Link } from 'react-router-dom';
+
+// Redux
+import { connect } from 'react-redux';
+import { pinCategory, deleteCategory, deleteBookmark, createNotification, reorderCategories } from '../../../store/actions';
+
+// Typescript
+import { Bookmark, Category, NewNotification } from '../../../interfaces';
+import { ContentType } from '../Bookmarks';
+
+// CSS
+import classes from './BookmarkTable.module.css';
+
+// UI
+import Table from '../../UI/Table/Table';
+import Icon from '../../UI/Icons/Icon/Icon';
+
+// Utils
+import { searchConfig } from '../../../utility';
+
+interface ComponentProps {
+  contentType: ContentType;
+  categories: Category[];
+  pinCategory: (category: Category) => void;
+  deleteCategory: (id: number) => void;
+  updateHandler: (data: Category | Bookmark) => void;
+  deleteBookmark: (bookmarkId: number, categoryId: number) => void;
+  createNotification: (notification: NewNotification) => void;
+  reorderCategories: (categories: Category[]) => void;
+}
+
+const BookmarkTable = (props: ComponentProps): JSX.Element => {
+  const [localCategories, setLocalCategories] = useState<Category[]>([]);
+  const [isCustomOrder, setIsCustomOrder] = useState<boolean>(false);
+
+  // Copy categories array
+  useEffect(() => {
+    setLocalCategories([...props.categories]);
+  }, [props.categories])
+
+  // Check ordering
+  useEffect(() => {
+    const order = searchConfig('useOrdering', '');
+
+    if (order === 'orderId') {
+      setIsCustomOrder(true);
+    }
+  })
+
+  const deleteCategoryHandler = (category: Category): void => {
+    const proceed = window.confirm(`Are you sure you want to delete ${category.name}? It will delete ALL assigned bookmarks`);
+
+    if (proceed) {
+      props.deleteCategory(category.id);
+    }
+  }
+
+  const deleteBookmarkHandler = (bookmark: Bookmark): void => {
+    const proceed = window.confirm(`Are you sure you want to delete ${bookmark.name}?`);
+
+    if (proceed) {
+      props.deleteBookmark(bookmark.id, bookmark.categoryId);
+    }
+  }
+
+  const keyboardActionHandler = (e: KeyboardEvent, category: Category, handler: Function) => {
+    if (e.key === 'Enter') {
+      handler(category);
+    }
+  }
+
+  const dragEndHanlder = (result: DropResult): void => {
+    if (!isCustomOrder) {
+      props.createNotification({
+        title: 'Error',
+        message: 'Custom order is disabled'
+      })
+      return;
+    }
+
+    if (!result.destination) {
+      return;
+    }
+
+    const tmpCategories = [...localCategories];
+    const [movedApp] = tmpCategories.splice(result.source.index, 1);
+    tmpCategories.splice(result.destination.index, 0, movedApp);
+
+    setLocalCategories(tmpCategories);
+    props.reorderCategories(tmpCategories);
+  }
+
+  if (props.contentType === ContentType.category) {
+    return (
+      <Fragment>
+        <div className={classes.Message}>
+          {isCustomOrder
+            ? <p>You can drag and drop single rows to reorder categories</p>
+            : <p>Custom order is disabled. You can change it in <Link to='/settings/other'>settings</Link></p>
+          }
+        </div>
+        <DragDropContext onDragEnd={dragEndHanlder}>
+          <Droppable droppableId='categories'>
+            {(provided) => (
+              <Table headers={[
+                'Name',
+                'Actions'
+              ]}
+              innerRef={provided.innerRef}>
+                {localCategories.map((category: Category, index): JSX.Element => {
+                  return (
+                    <Draggable key={category.id} draggableId={category.id.toString()} index={index}>
+                      {(provided, snapshot) => {
+                        const style = {
+                          border: snapshot.isDragging ? '1px solid var(--color-accent)' : 'none',
+                          borderRadius: '4px',
+                          ...provided.draggableProps.style,
+                        };
+
+                        return (
+                          <tr
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                            ref={provided.innerRef}
+                            style={style}  
+                          >
+                            <td>{category.name}</td>
+                            {!snapshot.isDragging && (
+                              <td className={classes.TableActions}>
+                                <div
+                                  className={classes.TableAction}
+                                  onClick={() => deleteCategoryHandler(category)}
+                                  onKeyDown={(e) => keyboardActionHandler(e, category, deleteCategoryHandler)}
+                                  tabIndex={0}>
+                                  <Icon icon='mdiDelete' />
+                                </div>
+                                <div
+                                  className={classes.TableAction}
+                                  onClick={() => props.updateHandler(category)}
+                                  tabIndex={0}>
+                                  <Icon icon='mdiPencil' />
+                                </div>
+                                <div
+                                  className={classes.TableAction}
+                                  onClick={() => props.pinCategory(category)}
+                                  onKeyDown={(e) => keyboardActionHandler(e, category, props.pinCategory)}
+                                  tabIndex={0}>
+                                  {category.isPinned
+                                    ? <Icon icon='mdiPinOff' color='var(--color-accent)' />
+                                    : <Icon icon='mdiPin' />
+                                  }
+                                </div>
+                              </td>
+                            )}
+                          </tr>
+                        )
+                      }}
+                    </Draggable>
+                  )
+                })}
+              </Table>
+            )}
+          </Droppable>
+        </DragDropContext>
+      </Fragment>
+    )
+  } else {
+    const bookmarks: {bookmark: Bookmark, categoryName: string}[] = [];
+    props.categories.forEach((category: Category) => {
+      category.bookmarks.forEach((bookmark: Bookmark) => {
+        bookmarks.push({
+          bookmark,
+          categoryName: category.name
+        });
+      })
+    })
+
+    return (
+      <Table headers={[
+        'Name',
+        'URL',
+        'Icon',
+        'Category',
+        'Actions'
+      ]}>
+        {bookmarks.map((bookmark: {bookmark: Bookmark, categoryName: string}) => {
+          return (
+            <tr key={bookmark.bookmark.id}>
+              <td>{bookmark.bookmark.name}</td>
+              <td>{bookmark.bookmark.url}</td>
+              <td>{bookmark.bookmark.icon}</td>
+              <td>{bookmark.categoryName}</td>
+              <td className={classes.TableActions}>
+                <div
+                  className={classes.TableAction}
+                  onClick={() => deleteBookmarkHandler(bookmark.bookmark)}
+                  tabIndex={0}>
+                  <Icon icon='mdiDelete' />
+                </div>
+                <div
+                  className={classes.TableAction}
+                  onClick={() => props.updateHandler(bookmark.bookmark)}
+                  tabIndex={0}>
+                  <Icon icon='mdiPencil' />
+                </div>
+              </td>
+            </tr>
+          )
+        })}
+      </Table>
+    )
+  }
+}
+
+const actions = {
+  pinCategory,
+  deleteCategory,
+  deleteBookmark,
+  createNotification,
+  reorderCategories
+}
+
+export default connect(null, actions)(BookmarkTable);
--- a/client/src/components/Bookmarks/Bookmarks.tsx
+++ b/client/src/components/Bookmarks/Bookmarks.tsx
@ -1,195 +1,164 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { getCategories } from '../../store/actions';

-// Redux
-import { useDispatch, useSelector } from 'react-redux';
-import { State } from '../../store/reducers';
-import { bindActionCreators } from 'redux';
-import { actionCreators } from '../../store';
-
-// Typescript
-import { Category, Bookmark } from '../../interfaces';
-
-// CSS
 import classes from './Bookmarks.module.css';

-// UI
-import {
-  Container,
-  Headline,
-  ActionButton,
-  Spinner,
-  Modal,
-  Message,
-} from '../UI';
+import { Container } from '../UI/Layout/Layout';
+import Headline from '../UI/Headlines/Headline/Headline';
+import ActionButton from '../UI/Buttons/ActionButton/ActionButton';

-// Components
-import { BookmarkGrid } from './BookmarkGrid/BookmarkGrid';
-import { Form } from './Form/Form';
-import { Table } from './Table/Table';
+import BookmarkGrid from './BookmarkGrid/BookmarkGrid';
+import { Category, GlobalState, Bookmark } from '../../interfaces';
+import Spinner from '../UI/Spinner/Spinner';
+import Modal from '../UI/Modal/Modal';
+import BookmarkForm from './BookmarkForm/BookmarkForm';
+import BookmarkTable from './BookmarkTable/BookmarkTable';

-interface Props {
-  searching: boolean;
+interface ComponentProps {
+  loading: boolean;
+  categories: Category[];
+  getCategories: () => void;
 }

 export enum ContentType {
  category,
-  bookmark,
+  bookmark
 }

-export const Bookmarks = (props: Props): JSX.Element => {
-  // Get Redux state
+const Bookmarks = (props: ComponentProps): JSX.Element => {
  const {
-    bookmarks: { loading, categories, categoryInEdit },
-    auth: { isAuthenticated },
-  } = useSelector((state: State) => state);
+    getCategories,
+    categories,
+    loading
+  } = props;

-  // Get Redux action creators
-  const dispatch = useDispatch();
-  const { getCategories, setEditCategory, setEditBookmark } =
-    bindActionCreators(actionCreators, dispatch);
-
-  // Load categories if array is empty
-  useEffect(() => {
-    if (!categories.length) {
-      getCategories();
-    }
-  }, []);
-
-  // Form
  const [modalIsOpen, setModalIsOpen] = useState(false);
  const [formContentType, setFormContentType] = useState(ContentType.category);
+  const [isInEdit, setIsInEdit] = useState(false);
+  const [tableContentType, setTableContentType] = useState(ContentType.category);
  const [isInUpdate, setIsInUpdate] = useState(false);
+  const [categoryInUpdate, setCategoryInUpdate] = useState<Category>({
+    name: '',
+    id: -1,
+    isPinned: false,
+    orderId: 0,
+    bookmarks: [],
+    createdAt: new Date(),
+    updatedAt: new Date()
+  })
+  const [bookmarkInUpdate, setBookmarkInUpdate] = useState<Bookmark>({
+    name: '',
+    url: '',
+    categoryId: -1,
+    icon: '',
+    id: -1,
+    createdAt: new Date(),
+    updatedAt: new Date()
+  })

-  // Table
-  const [showTable, setShowTable] = useState(false);
-  const [tableContentType, setTableContentType] = useState(
-    ContentType.category
-  );
-
-  // Observe if user is authenticated -> set default view (grid) if not
  useEffect(() => {
-    if (!isAuthenticated) {
-      setShowTable(false);
-      setModalIsOpen(false);
+    if (categories.length === 0) {
+      getCategories();
    }
-  }, [isAuthenticated]);
+  }, [getCategories])

-  useEffect(() => {
-    if (categoryInEdit && !modalIsOpen) {
-      setTableContentType(ContentType.bookmark);
-      setShowTable(true);
-    }
-  }, [categoryInEdit]);
-
-  useEffect(() => {
-    setShowTable(false);
-    setEditCategory(null);
-  }, []);
-
-  // Form actions
  const toggleModal = (): void => {
    setModalIsOpen(!modalIsOpen);
-  };
+  }

-  const openFormForAdding = (contentType: ContentType) => {
+  const addActionHandler = (contentType: ContentType) => {
    setFormContentType(contentType);
    setIsInUpdate(false);
    toggleModal();
-  };
+  }

-  const openFormForUpdating = (data: Category | Bookmark): void => {
-    setIsInUpdate(true);
-
-    const instanceOfCategory = (object: any): object is Category => {
-      return 'bookmarks' in object;
-    };
-
-    if (instanceOfCategory(data)) {
-      setFormContentType(ContentType.category);
-      setEditCategory(data);
-    } else {
-      setFormContentType(ContentType.bookmark);
-      setEditBookmark(data);
-    }
-
-    toggleModal();
-  };
-
-  // Table actions
-  const showTableForEditing = (contentType: ContentType) => {
+  const editActionHandler = (contentType: ContentType) => {
    // We're in the edit mode and the same button was clicked - go back to list
-    if (showTable && contentType === tableContentType) {
-      setEditCategory(null);
-      setShowTable(false);
+    if (isInEdit && contentType === tableContentType) {
+      setIsInEdit(false);
    } else {
-      setShowTable(true);
+      setIsInEdit(true);
      setTableContentType(contentType);
    }
-  };
+  }

-  const finishEditing = () => {
-    setShowTable(false);
-    setEditCategory(null);
-  };
+  const instanceOfCategory = (object: any): object is Category => {
+    return 'bookmarks' in object;
+  }
+
+  const goToUpdateMode = (data: Category | Bookmark): void => {
+    setIsInUpdate(true);
+    if (instanceOfCategory(data)) {
+      setFormContentType(ContentType.category);
+      setCategoryInUpdate(data);
+    } else {
+      setFormContentType(ContentType.bookmark);
+      setBookmarkInUpdate(data);
+    }
+    toggleModal();
+  }

  return (
    <Container>
      <Modal isOpen={modalIsOpen} setIsOpen={toggleModal}>
-        <Form
-          modalHandler={toggleModal}
-          contentType={formContentType}
-          inUpdate={isInUpdate}
-        />
+        {!isInUpdate
+          ? <BookmarkForm modalHandler={toggleModal} contentType={formContentType} />
+          : formContentType === ContentType.category
+            ? <BookmarkForm modalHandler={toggleModal} contentType={formContentType} category={categoryInUpdate} />
+            : <BookmarkForm modalHandler={toggleModal} contentType={formContentType} bookmark={bookmarkInUpdate} />
+        }
      </Modal>

-      <Headline title="All Bookmarks" subtitle={<Link to="/">Go back</Link>} />
-
-      {isAuthenticated && (
-        <div className={classes.ActionsContainer}>
-          <ActionButton
-            name="Add Category"
-            icon="mdiPlusBox"
-            handler={() => openFormForAdding(ContentType.category)}
-          />
-          <ActionButton
-            name="Add Bookmark"
-            icon="mdiPlusBox"
-            handler={() => openFormForAdding(ContentType.bookmark)}
-          />
-          <ActionButton
-            name="Edit Categories"
-            icon="mdiPencil"
-            handler={() => showTableForEditing(ContentType.category)}
-          />
-          {showTable && tableContentType === ContentType.bookmark && (
-            <ActionButton
-              name="Finish Editing"
-              icon="mdiPencil"
-              handler={finishEditing}
-            />
-          )}
-        </div>
-      )}
-
-      {categories.length && isAuthenticated && !showTable ? (
-        <Message isPrimary={false}>
-          Click on category name to edit its bookmarks
-        </Message>
-      ) : (
-        <></>
-      )}
-
-      {loading ? (
-        <Spinner />
-      ) : !showTable ? (
-        <BookmarkGrid categories={categories} searching={props.searching} />
-      ) : (
-        <Table
-          contentType={tableContentType}
-          openFormForUpdating={openFormForUpdating}
+      <Headline
+        title='All Bookmarks'
+        subtitle={(<Link to='/'>Go back</Link>)}
+      />
+      
+      <div className={classes.ActionsContainer}>
+        <ActionButton
+          name='Add Category'
+          icon='mdiPlusBox'
+          handler={() => addActionHandler(ContentType.category)}
        />
-      )}
+        <ActionButton
+          name='Add Bookmark'
+          icon='mdiPlusBox'
+          handler={() => addActionHandler(ContentType.bookmark)}
+        />
+        <ActionButton
+          name='Edit Categories'
+          icon='mdiPencil'
+          handler={() => editActionHandler(ContentType.category)}
+        />
+        <ActionButton
+          name='Edit Bookmarks'
+          icon='mdiPencil'
+          handler={() => editActionHandler(ContentType.bookmark)}
+        />
+      </div>
+
+      {loading
+        ? <Spinner />
+        : (!isInEdit
+          ? <BookmarkGrid categories={categories} />
+          : <BookmarkTable
+              contentType={tableContentType}
+              categories={categories}
+              updateHandler={goToUpdateMode}
+            />
+          )
+      }
    </Container>
-  );
-};
+  )
+}
+
+const mapStateToProps = (state: GlobalState) => {
+  return {
+    loading: state.bookmark.loading,
+    categories: state.bookmark.categories
+  }
+}
+
+export default connect(mapStateToProps, { getCategories })(Bookmarks);
--- a/client/src/components/Bookmarks/Form/BookmarksForm.tsx
+++ b/client/src/components/Bookmarks/Form/BookmarksForm.tsx
@ -1,275 +0,0 @@
-import { useState, ChangeEvent, useEffect, FormEvent } from 'react';
-
-// Redux
-import { useDispatch, useSelector } from 'react-redux';
-import { State } from '../../../store/reducers';
-import { bindActionCreators } from 'redux';
-import { actionCreators } from '../../../store';
-
-// Typescript
-import { Bookmark, Category, NewBookmark } from '../../../interfaces';
-
-// UI
-import { ModalForm, InputGroup, Button } from '../../UI';
-
-// CSS
-import classes from './Form.module.css';
-
-// Utils
-import { inputHandler, newBookmarkTemplate } from '../../../utility';
-
-interface Props {
-  modalHandler: () => void;
-  bookmark?: Bookmark;
-}
-
-export const BookmarksForm = ({
-  bookmark,
-  modalHandler,
-}: Props): JSX.Element => {
-  const { categories } = useSelector((state: State) => state.bookmarks);
-
-  const dispatch = useDispatch();
-  const { addBookmark, updateBookmark, createNotification } =
-    bindActionCreators(actionCreators, dispatch);
-
-  const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
-  const [customIcon, setCustomIcon] = useState<File | null>(null);
-
-  const [formData, setFormData] = useState<NewBookmark>(newBookmarkTemplate);
-
-  // Load bookmark data if provided for editing
-  useEffect(() => {
-    if (bookmark) {
-      setFormData({ ...bookmark });
-    } else {
-      setFormData(newBookmarkTemplate);
-    }
-  }, [bookmark]);
-
-  const inputChangeHandler = (
-    e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
-    options?: { isNumber?: boolean; isBool?: boolean }
-  ) => {
-    inputHandler<NewBookmark>({
-      e,
-      options,
-      setStateHandler: setFormData,
-      state: formData,
-    });
-  };
-
-  const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
-    if (e.target.files) {
-      setCustomIcon(e.target.files[0]);
-    }
-  };
-
-  // Bookmarks form handler
-  const formSubmitHandler = (e: FormEvent): void => {
-    e.preventDefault();
-
-    for (let field of ['name', 'url', 'icon'] as const) {
-      if (/^ +$/.test(formData[field])) {
-        createNotification({
-          title: 'Error',
-          message: `Field cannot be empty: ${field}`,
-        });
-
-        return;
-      }
-    }
-
-    const createFormData = (): FormData => {
-      const data = new FormData();
-      if (customIcon) {
-        data.append('icon', customIcon);
-      }
-      data.append('name', formData.name);
-      data.append('url', formData.url);
-      data.append('categoryId', `${formData.categoryId}`);
-      data.append('isPublic', `${formData.isPublic ? 1 : 0}`);
-
-      return data;
-    };
-
-    const checkCategory = (): boolean => {
-      if (formData.categoryId < 0) {
-        createNotification({
-          title: 'Error',
-          message: 'Please select category',
-        });
-
-        return false;
-      }
-
-      return true;
-    };
-
-    if (!bookmark) {
-      // add new bookmark
-      if (!checkCategory()) return;
-
-      if (formData.categoryId < 0) {
-        createNotification({
-          title: 'Error',
-          message: 'Please select category',
-        });
-        return;
-      }
-
-      if (customIcon) {
-        const data = createFormData();
-        addBookmark(data);
-      } else {
-        addBookmark(formData);
-      }
-
-      setFormData({
-        ...newBookmarkTemplate,
-        categoryId: formData.categoryId,
-        isPublic: formData.isPublic,
-      });
-    } else {
-      // update
-      if (!checkCategory()) return;
-
-      if (customIcon) {
-        const data = createFormData();
-        updateBookmark(bookmark.id, data, {
-          prev: bookmark.categoryId,
-          curr: formData.categoryId,
-        });
-      } else {
-        updateBookmark(bookmark.id, formData, {
-          prev: bookmark.categoryId,
-          curr: formData.categoryId,
-        });
-      }
-
-      modalHandler();
-    }
-
-    setFormData({ ...newBookmarkTemplate, categoryId: formData.categoryId });
-    setCustomIcon(null);
-  };
-
-  return (
-    <ModalForm modalHandler={modalHandler} formHandler={formSubmitHandler}>
-      {/* NAME */}
-      <InputGroup>
-        <label htmlFor="name">Bookmark Name</label>
-        <input
-          type="text"
-          name="name"
-          id="name"
-          placeholder="Reddit"
-          required
-          value={formData.name}
-          onChange={(e) => inputChangeHandler(e)}
-        />
-      </InputGroup>
-
-      {/* URL */}
-      <InputGroup>
-        <label htmlFor="url">Bookmark URL</label>
-        <input
-          type="text"
-          name="url"
-          id="url"
-          placeholder="reddit.com"
-          required
-          value={formData.url}
-          onChange={(e) => inputChangeHandler(e)}
-        />
-      </InputGroup>
-
-      {/* CATEGORY */}
-      <InputGroup>
-        <label htmlFor="categoryId">Bookmark Category</label>
-        <select
-          name="categoryId"
-          id="categoryId"
-          required
-          onChange={(e) => inputChangeHandler(e, { isNumber: true })}
-          value={formData.categoryId}
-        >
-          <option value={-1}>Select category</option>
-          {categories.map((category: Category): JSX.Element => {
-            return (
-              <option key={category.id} value={category.id}>
-                {category.name}
-              </option>
-            );
-          })}
-        </select>
-      </InputGroup>
-
-      {/* ICON */}
-      {!useCustomIcon ? (
-        // mdi
-        <InputGroup>
-          <label htmlFor="icon">Bookmark Icon (optional)</label>
-          <input
-            type="text"
-            name="icon"
-            id="icon"
-            placeholder="book-open-outline"
-            value={formData.icon}
-            onChange={(e) => inputChangeHandler(e)}
-          />
-          <span>
-            Use icon name from MDI or pass a valid URL.
-            <a href="https://materialdesignicons.com/" target="blank">
-              {' '}
-              Click here for reference
-            </a>
-          </span>
-          <span
-            onClick={() => toggleUseCustomIcon(!useCustomIcon)}
-            className={classes.Switch}
-          >
-            Switch to custom icon upload
-          </span>
-        </InputGroup>
-      ) : (
-        // custom
-        <InputGroup>
-          <label htmlFor="icon">Bookmark Icon (optional)</label>
-          <input
-            type="file"
-            name="icon"
-            id="icon"
-            onChange={(e) => fileChangeHandler(e)}
-            accept=".jpg,.jpeg,.png,.svg,.ico"
-          />
-          <span
-            onClick={() => {
-              setCustomIcon(null);
-              toggleUseCustomIcon(!useCustomIcon);
-            }}
-            className={classes.Switch}
-          >
-            Switch to MDI
-          </span>
-        </InputGroup>
-      )}
-
-      {/* VISIBILTY */}
-      <InputGroup>
-        <label htmlFor="isPublic">Bookmark visibility</label>
-        <select
-          id="isPublic"
-          name="isPublic"
-          value={formData.isPublic ? 1 : 0}
-          onChange={(e) => inputChangeHandler(e, { isBool: true })}
-        >
-          <option value={1}>Visible (anyone can access it)</option>
-          <option value={0}>Hidden (authentication required)</option>
-        </select>
-      </InputGroup>
-
-      <Button>{bookmark ? 'Update bookmark' : 'Add new bookmark'}</Button>
-    </ModalForm>
-  );
-};
--- a/client/src/components/Bookmarks/Form/CategoryForm.tsx
+++ b/client/src/components/Bookmarks/Form/CategoryForm.tsx
@ -1,100 +0,0 @@
-import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
-
-// Redux
-import { useDispatch } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { actionCreators } from '../../../store';
-
-// Typescript
-import { Category, NewCategory } from '../../../interfaces';
-
-// UI
-import { ModalForm, InputGroup, Button } from '../../UI';
-
-// Utils
-import { inputHandler, newCategoryTemplate } from '../../../utility';
-
-interface Props {
-  modalHandler: () => void;
-  category?: Category;
-}
-
-export const CategoryForm = ({
-  category,
-  modalHandler,
-}: Props): JSX.Element => {
-  const dispatch = useDispatch();
-  const { addCategory, updateCategory } = bindActionCreators(
-    actionCreators,
-    dispatch
-  );
-
-  const [formData, setFormData] = useState<NewCategory>(newCategoryTemplate);
-
-  // Load category data if provided for editing
-  useEffect(() => {
-    if (category) {
-      setFormData({ ...category });
-    } else {
-      setFormData(newCategoryTemplate);
-    }
-  }, [category]);
-
-  const inputChangeHandler = (
-    e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
-    options?: { isNumber?: boolean; isBool?: boolean }
-  ) => {
-    inputHandler<NewCategory>({
-      e,
-      options,
-      setStateHandler: setFormData,
-      state: formData,
-    });
-  };
-
-  // Category form handler
-  const formSubmitHandler = (e: FormEvent): void => {
-    e.preventDefault();
-
-    if (!category) {
-      addCategory(formData);
-    } else {
-      updateCategory(category.id, formData);
-      modalHandler();
-    }
-
-    setFormData(newCategoryTemplate);
-  };
-
-  return (
-    <ModalForm modalHandler={modalHandler} formHandler={formSubmitHandler}>
-      <InputGroup>
-        <label htmlFor="name">Category Name</label>
-        <input
-          type="text"
-          name="name"
-          id="name"
-          placeholder="Social Media"
-          required
-          value={formData.name}
-          onChange={(e) => inputChangeHandler(e)}
-        />
-      </InputGroup>
-
-      <InputGroup>
-        <label htmlFor="isPublic">Category visibility</label>
-        <select
-          id="isPublic"
-          name="isPublic"
-          value={formData.isPublic ? 1 : 0}
-          onChange={(e) => inputChangeHandler(e, { isBool: true })}
-        >
-          <option value={1}>Visible (anyone can access it)</option>
-          <option value={0}>Hidden (authentication required)</option>
-        </select>
-      </InputGroup>
-
-      <Button>{category ? 'Update category' : 'Add new category'}</Button>
-    </ModalForm>
-  );
-};
--- a/client/src/components/Bookmarks/Form/Form.module.css
+++ b/client/src/components/Bookmarks/Form/Form.module.css
@ -1,7 +0,0 @@
-.Switch {
-  text-decoration: underline;
-}
-
-.Switch:hover {
-  cursor: pointer;
-}
--- a/client/src/components/Bookmarks/Form/Form.tsx
+++ b/client/src/components/Bookmarks/Form/Form.tsx
@ -1,54 +0,0 @@
-// Typescript
-import { ContentType } from '../Bookmarks';
-
-// Utils
-import { CategoryForm } from './CategoryForm';
-import { BookmarksForm } from './BookmarksForm';
-import { Fragment } from 'react';
-import { useSelector } from 'react-redux';
-import { State } from '../../../store/reducers';
-import { bookmarkTemplate, categoryTemplate } from '../../../utility';
-
-interface Props {
-  modalHandler: () => void;
-  contentType: ContentType;
-  inUpdate?: boolean;
-}
-
-export const Form = (props: Props): JSX.Element => {
-  const { categoryInEdit, bookmarkInEdit } = useSelector(
-    (state: State) => state.bookmarks
-  );
-
-  const { modalHandler, contentType, inUpdate } = props;
-
-  return (
-    <Fragment>
-      {!inUpdate ? (
-        // form: add new
-        <Fragment>
-          {contentType === ContentType.category ? (
-            <CategoryForm modalHandler={modalHandler} />
-          ) : (
-            <BookmarksForm modalHandler={modalHandler} />
-          )}
-        </Fragment>
-      ) : (
-        // form: update
-        <Fragment>
-          {contentType === ContentType.category ? (
-            <CategoryForm
-              modalHandler={modalHandler}
-              category={categoryInEdit || categoryTemplate}
-            />
-          ) : (
-            <BookmarksForm
-              modalHandler={modalHandler}
-              bookmark={bookmarkInEdit || bookmarkTemplate}
-            />
-          )}
-        </Fragment>
-      )}
-    </Fragment>
-  );
-};
--- a/client/src/components/Bookmarks/Table/BookmarksTable.tsx
+++ b/client/src/components/Bookmarks/Table/BookmarksTable.tsx
@ -1,188 +0,0 @@
-import { useState, useEffect, Fragment } from 'react';
-import {
-  DragDropContext,
-  Droppable,
-  Draggable,
-  DropResult,
-} from 'react-beautiful-dnd';
-
-// Redux
-import { useDispatch, useSelector } from 'react-redux';
-import { State } from '../../../store/reducers';
-import { bindActionCreators } from 'redux';
-import { actionCreators } from '../../../store';
-
-// Typescript
-import { Bookmark, Category } from '../../../interfaces';
-
-// UI
-import { Message, Table } from '../../UI';
-import { TableActions } from '../../Actions/TableActions';
-import { bookmarkTemplate } from '../../../utility';
-
-interface Props {
-  openFormForUpdating: (data: Category | Bookmark) => void;
-}
-
-export const BookmarksTable = ({ openFormForUpdating }: Props): JSX.Element => {
-  const {
-    bookmarks: { categoryInEdit },
-    config: { config },
-  } = useSelector((state: State) => state);
-
-  const dispatch = useDispatch();
-  const {
-    deleteBookmark,
-    updateBookmark,
-    createNotification,
-    reorderBookmarks,
-  } = bindActionCreators(actionCreators, dispatch);
-
-  const [localBookmarks, setLocalBookmarks] = useState<Bookmark[]>([]);
-
-  // Copy bookmarks array
-  useEffect(() => {
-    if (categoryInEdit) {
-      setLocalBookmarks([...categoryInEdit.bookmarks]);
-    }
-  }, [categoryInEdit]);
-
-  // Drag and drop handler
-  const dragEndHanlder = (result: DropResult): void => {
-    if (config.useOrdering !== 'orderId') {
-      createNotification({
-        title: 'Error',
-        message: 'Custom order is disabled',
-      });
-      return;
-    }
-
-    if (!result.destination) {
-      return;
-    }
-
-    const tmpBookmarks = [...localBookmarks];
-    const [movedBookmark] = tmpBookmarks.splice(result.source.index, 1);
-    tmpBookmarks.splice(result.destination.index, 0, movedBookmark);
-
-    setLocalBookmarks(tmpBookmarks);
-
-    const categoryId = categoryInEdit?.id || -1;
-    reorderBookmarks(tmpBookmarks, categoryId);
-  };
-
-  // Action hanlders
-  const deleteBookmarkHandler = (id: number, name: string) => {
-    const categoryId = categoryInEdit?.id || -1;
-
-    const proceed = window.confirm(`Are you sure you want to delete ${name}?`);
-    if (proceed) {
-      deleteBookmark(id, categoryId);
-    }
-  };
-
-  const updateBookmarkHandler = (id: number) => {
-    const bookmark =
-      categoryInEdit?.bookmarks.find((b) => b.id === id) || bookmarkTemplate;
-
-    openFormForUpdating(bookmark);
-  };
-
-  const changeBookmarkVisibiltyHandler = (id: number) => {
-    const bookmark =
-      categoryInEdit?.bookmarks.find((b) => b.id === id) || bookmarkTemplate;
-
-    const categoryId = categoryInEdit?.id || -1;
-    const [prev, curr] = [categoryId, categoryId];
-
-    updateBookmark(
-      id,
-      { ...bookmark, isPublic: !bookmark.isPublic },
-      { prev, curr }
-    );
-  };
-
-  return (
-    <Fragment>
-      {!categoryInEdit ? (
-        <Message isPrimary={false}>
-          Switch to grid view and click on the name of category you want to edit
-        </Message>
-      ) : (
-        <Message isPrimary={false}>
-          Editing bookmarks from&nbsp;<span>{categoryInEdit.name}</span>
-          &nbsp;category
-        </Message>
-      )}
-
-      {categoryInEdit && (
-        <DragDropContext onDragEnd={dragEndHanlder}>
-          <Droppable droppableId="bookmarks">
-            {(provided) => (
-              <Table
-                headers={[
-                  'Name',
-                  'URL',
-                  'Icon',
-                  'Visibility',
-                  'Category',
-                  'Actions',
-                ]}
-                innerRef={provided.innerRef}
-              >
-                {localBookmarks.map((bookmark, index): JSX.Element => {
-                  return (
-                    <Draggable
-                      key={bookmark.id}
-                      draggableId={bookmark.id.toString()}
-                      index={index}
-                    >
-                      {(provided, snapshot) => {
-                        const style = {
-                          border: snapshot.isDragging
-                            ? '1px solid var(--color-accent)'
-                            : 'none',
-                          borderRadius: '4px',
-                          ...provided.draggableProps.style,
-                        };
-
-                        return (
-                          <tr
-                            {...provided.draggableProps}
-                            {...provided.dragHandleProps}
-                            ref={provided.innerRef}
-                            style={style}
-                          >
-                            <td style={{ width: '200px' }}>{bookmark.name}</td>
-                            <td style={{ width: '200px' }}>{bookmark.url}</td>
-                            <td style={{ width: '200px' }}>{bookmark.icon}</td>
-                            <td style={{ width: '200px' }}>
-                              {bookmark.isPublic ? 'Visible' : 'Hidden'}
-                            </td>
-                            <td style={{ width: '200px' }}>
-                              {categoryInEdit.name}
-                            </td>
-
-                            {!snapshot.isDragging && (
-                              <TableActions
-                                entity={bookmark}
-                                deleteHandler={deleteBookmarkHandler}
-                                updateHandler={updateBookmarkHandler}
-                                changeVisibilty={changeBookmarkVisibiltyHandler}
-                                showPin={false}
-                              />
-                            )}
-                          </tr>
-                        );
-                      }}
-                    </Draggable>
-                  );
-                })}
-              </Table>
-            )}
-          </Droppable>
-        </DragDropContext>
-      )}
-    </Fragment>
-  );
-};
--- a/client/src/components/Bookmarks/Table/CategoryTable.tsx
+++ b/client/src/components/Bookmarks/Table/CategoryTable.tsx
@ -1,166 +0,0 @@
-import { useState, useEffect, Fragment } from 'react';
-import {
-  DragDropContext,
-  Droppable,
-  Draggable,
-  DropResult,
-} from 'react-beautiful-dnd';
-import { Link } from 'react-router-dom';
-
-// Redux
-import { useDispatch, useSelector } from 'react-redux';
-import { State } from '../../../store/reducers';
-import { bindActionCreators } from 'redux';
-import { actionCreators } from '../../../store';
-
-// Typescript
-import { Bookmark, Category } from '../../../interfaces';
-
-// UI
-import { Message, Table } from '../../UI';
-import { TableActions } from '../../Actions/TableActions';
-
-interface Props {
-  openFormForUpdating: (data: Category | Bookmark) => void;
-}
-
-export const CategoryTable = ({ openFormForUpdating }: Props): JSX.Element => {
-  const {
-    config: { config },
-    bookmarks: { categories },
-  } = useSelector((state: State) => state);
-
-  const dispatch = useDispatch();
-  const {
-    pinCategory,
-    deleteCategory,
-    createNotification,
-    reorderCategories,
-    updateCategory,
-  } = bindActionCreators(actionCreators, dispatch);
-
-  const [localCategories, setLocalCategories] = useState<Category[]>([]);
-
-  // Copy categories array
-  useEffect(() => {
-    setLocalCategories([...categories]);
-  }, [categories]);
-
-  // Drag and drop handler
-  const dragEndHanlder = (result: DropResult): void => {
-    if (config.useOrdering !== 'orderId') {
-      createNotification({
-        title: 'Error',
-        message: 'Custom order is disabled',
-      });
-      return;
-    }
-
-    if (!result.destination) {
-      return;
-    }
-
-    const tmpCategories = [...localCategories];
-    const [movedCategory] = tmpCategories.splice(result.source.index, 1);
-    tmpCategories.splice(result.destination.index, 0, movedCategory);
-
-    setLocalCategories(tmpCategories);
-    reorderCategories(tmpCategories);
-  };
-
-  // Action handlers
-  const deleteCategoryHandler = (id: number, name: string) => {
-    const proceed = window.confirm(
-      `Are you sure you want to delete ${name}? It will delete ALL assigned bookmarks`
-    );
-
-    if (proceed) {
-      deleteCategory(id);
-    }
-  };
-
-  const updateCategoryHandler = (id: number) => {
-    const category = categories.find((c) => c.id === id) as Category;
-    openFormForUpdating(category);
-  };
-
-  const pinCategoryHandler = (id: number) => {
-    const category = categories.find((c) => c.id === id) as Category;
-    pinCategory(category);
-  };
-
-  const changeCategoryVisibiltyHandler = (id: number) => {
-    const category = categories.find((c) => c.id === id) as Category;
-    updateCategory(id, { ...category, isPublic: !category.isPublic });
-  };
-
-  return (
-    <Fragment>
-      <Message isPrimary={false}>
-        {config.useOrdering === 'orderId' ? (
-          <p>You can drag and drop single rows to reorder categories</p>
-        ) : (
-          <p>
-            Custom order is disabled. You can change it in the{' '}
-            <Link to="/settings/general">settings</Link>
-          </p>
-        )}
-      </Message>
-
-      <DragDropContext onDragEnd={dragEndHanlder}>
-        <Droppable droppableId="categories">
-          {(provided) => (
-            <Table
-              headers={['Name', 'Visibility', 'Actions']}
-              innerRef={provided.innerRef}
-            >
-              {localCategories.map((category, index): JSX.Element => {
-                return (
-                  <Draggable
-                    key={category.id}
-                    draggableId={category.id.toString()}
-                    index={index}
-                  >
-                    {(provided, snapshot) => {
-                      const style = {
-                        border: snapshot.isDragging
-                          ? '1px solid var(--color-accent)'
-                          : 'none',
-                        borderRadius: '4px',
-                        ...provided.draggableProps.style,
-                      };
-
-                      return (
-                        <tr
-                          {...provided.draggableProps}
-                          {...provided.dragHandleProps}
-                          ref={provided.innerRef}
-                          style={style}
-                        >
-                          <td style={{ width: '300px' }}>{category.name}</td>
-                          <td style={{ width: '300px' }}>
-                            {category.isPublic ? 'Visible' : 'Hidden'}
-                          </td>
-
-                          {!snapshot.isDragging && (
-                            <TableActions
-                              entity={category}
-                              deleteHandler={deleteCategoryHandler}
-                              updateHandler={updateCategoryHandler}
-                              pinHanlder={pinCategoryHandler}
-                              changeVisibilty={changeCategoryVisibiltyHandler}
-                            />
-                          )}
-                        </tr>
-                      );
-                    }}
-                  </Draggable>
-                );
-              })}
-            </Table>
-          )}
-        </Droppable>
-      </DragDropContext>
-    </Fragment>
-  );
-};
--- a/client/src/components/Bookmarks/Table/Table.tsx
+++ b/client/src/components/Bookmarks/Table/Table.tsx
@ -1,20 +0,0 @@
-import { Category, Bookmark } from '../../../interfaces';
-import { ContentType } from '../Bookmarks';
-import { BookmarksTable } from './BookmarksTable';
-import { CategoryTable } from './CategoryTable';
-
-interface Props {
-  contentType: ContentType;
-  openFormForUpdating: (data: Category | Bookmark) => void;
-}
-
-export const Table = (props: Props): JSX.Element => {
-  const tableEl =
-    props.contentType === ContentType.category ? (
-      <CategoryTable openFormForUpdating={props.openFormForUpdating} />
-    ) : (
-      <BookmarksTable openFormForUpdating={props.openFormForUpdating} />
-    );
-
-  return tableEl;
-};
--- a/client/src/components/Home/Header/Header.module.css
+++ b/client/src/components/Home/Header/Header.module.css
@ -1,31 +0,0 @@
-.Header h1 {
-  color: var(--color-primary);
-  font-weight: 700;
-  font-size: 4em;
-  display: inline-block;
-}
-
-.Header p {
-  color: var(--color-primary);
-  font-weight: 300;
-  text-transform: uppercase;
-  height: 30px;
-}
-
-.HeaderMain {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 2.5rem;
-}
-
-.SettingsLink {
-  visibility: visible;
-  color: var(--color-accent);
-}
-
-@media (min-width: 769px) {
-  .SettingsLink {
-    visibility: hidden;
-  }
-}
--- a/client/src/components/Home/Header/Header.tsx
+++ b/client/src/components/Home/Header/Header.tsx
@ -1,53 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
-
-// Redux
-import { useSelector } from 'react-redux';
-import { State } from '../../../store/reducers';
-
-// CSS
-import classes from './Header.module.css';
-
-// Components
-import { WeatherWidget } from '../../Widgets/WeatherWidget/WeatherWidget';
-
-// Utils
-import { getDateTime } from './functions/getDateTime';
-import { greeter } from './functions/greeter';
-
-export const Header = (): JSX.Element => {
-  const { hideHeader, hideDate, showTime } = useSelector(
-    (state: State) => state.config.config
-  );
-
-  const [dateTime, setDateTime] = useState<string>(getDateTime());
-  const [greeting, setGreeting] = useState<string>(greeter());
-
-  useEffect(() => {
-    let dateTimeInterval: NodeJS.Timeout;
-
-    dateTimeInterval = setInterval(() => {
-      setDateTime(getDateTime());
-      setGreeting(greeter());
-    }, 1000);
-
-    return () => window.clearInterval(dateTimeInterval);
-  }, []);
-
-  return (
-    <header className={classes.Header}>
-      {(!hideDate || showTime) && <p>{dateTime}</p>}
-
-      <Link to="/settings" className={classes.SettingsLink}>
-        Go to Settings
-      </Link>
-
-      {!hideHeader && (
-        <span className={classes.HeaderMain}>
-          <h1>{greeting}</h1>
-          <WeatherWidget />
-        </span>
-      )}
-    </header>
-  );
-};
--- a/client/src/components/Home/Header/functions/getDateTime.ts
+++ b/client/src/components/Home/Header/functions/getDateTime.ts
@ -1,71 +0,0 @@
-import { parseTime } from '../../../../utility';
-
-export const getDateTime = (): string => {
-  const days = localStorage.getItem('daySchema')?.split(';') || [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday',
-  ];
-
-  const months = localStorage.getItem('monthSchema')?.split(';') || [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
-
-  const now = new Date();
-
-  const useAmericanDate = localStorage.useAmericanDate === 'true';
-  const showTime = localStorage.showTime === 'true';
-  const hideDate = localStorage.hideDate === 'true';
-
-  // Date
-  let dateEl = '';
-
-  if (!hideDate) {
-    if (!useAmericanDate) {
-      dateEl = `${days[now.getDay()]}, ${now.getDate()} ${
-        months[now.getMonth()]
-      } ${now.getFullYear()}`;
-    } else {
-      dateEl = `${days[now.getDay()]}, ${
-        months[now.getMonth()]
-      } ${now.getDate()} ${now.getFullYear()}`;
-    }
-  }
-
-  // Time
-  const p = parseTime;
-  let timeEl = '';
-
-  if (showTime) {
-    const time = `${p(now.getHours())}:${p(now.getMinutes())}:${p(
-      now.getSeconds()
-    )}`;
-
-    timeEl = time;
-  }
-
-  // Separator
-  let separator = '';
-
-  if (!hideDate && showTime) {
-    separator = ' - ';
-  }
-
-  // Output
-  return `${dateEl}${separator}${timeEl}`;
-};
--- a/client/src/components/Home/Header/functions/greeter.ts
+++ b/client/src/components/Home/Header/functions/greeter.ts
@ -1,17 +0,0 @@
-export const greeter = (): string => {
-  const now = new Date().getHours();
-  let msg: string;
-
-  const greetingsSchemaRaw =
-    localStorage.getItem('greetingsSchema') ||
-    'Good evening!;Good afternoon!;Good morning!;Good night!';
-  const greetingsSchema = greetingsSchemaRaw.split(';');
-
-  if (now >= 18) msg = greetingsSchema[0];
-  else if (now >= 12) msg = greetingsSchema[1];
-  else if (now >= 6) msg = greetingsSchema[2];
-  else if (now >= 0) msg = greetingsSchema[3];
-  else msg = 'Hello!';
-
-  return msg;
-};
--- a/client/src/components/Home/Home.module.css
+++ b/client/src/components/Home/Home.module.css
@ -1,3 +1,24 @@
+.Header h1 {
+  color: var(--color-primary);
+  font-weight: 700;
+  font-size: 4em;
+  display: inline-block;
+}
+
+.Header p {
+  color: var(--color-primary);
+  font-weight: 300;
+  text-transform: uppercase;
+  height: 30px;
+}
+
+.HeaderMain {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2.5rem;
+}
+
 .SettingsButton {
  width: 35px;
  height: 35px;
@ -19,12 +40,21 @@
  opacity: 1;
 }

+.SettingsLink {
+  visibility: visible;
+  color: var(--color-accent);
+}
+
@media (min-width: 769px) {
  .SettingsButton {
    visibility: visible;
  }
+
+  .SettingsLink {
+    visibility: hidden;
+  }
 }

 .HomeSpace {
  height: 20px;
-}
+}
--- a/client/src/components/Home/Home.tsx
+++ b/client/src/components/Home/Home.tsx
@ -1,169 +1,140 @@
-import { useState, useEffect, Fragment } from 'react';
+import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';

 // Redux
-import { useDispatch, useSelector } from 'react-redux';
-import { State } from '../../store/reducers';
-import { bindActionCreators } from 'redux';
-import { actionCreators } from '../../store';
+import { connect } from 'react-redux';
+import { getApps, getCategories } from '../../store/actions';

 // Typescript
+import { GlobalState } from '../../interfaces/GlobalState';
 import { App, Category } from '../../interfaces';

 // UI
-import { Icon, Container, SectionHeadline, Spinner, Message } from '../UI';
+import Icon from '../UI/Icons/Icon/Icon';
+import { Container } from '../UI/Layout/Layout';
+import SectionHeadline from '../UI/Headlines/SectionHeadline/SectionHeadline';
+import Spinner from '../UI/Spinner/Spinner';

 // CSS
 import classes from './Home.module.css';

 // Components
-import { AppGrid } from '../Apps/AppGrid/AppGrid';
-import { BookmarkGrid } from '../Bookmarks/BookmarkGrid/BookmarkGrid';
-import { SearchBar } from '../SearchBar/SearchBar';
-import { Header } from './Header/Header';
+import AppGrid from '../Apps/AppGrid/AppGrid';
+import BookmarkGrid from '../Bookmarks/BookmarkGrid/BookmarkGrid';
+import WeatherWidget from '../Widgets/WeatherWidget/WeatherWidget';
+
+// Functions
+import { greeter } from './functions/greeter';
+import { dateTime } from './functions/dateTime';

 // Utils
-import { escapeRegex } from '../../utility';
+import { searchConfig } from '../../utility';

-export const Home = (): JSX.Element => {
+interface ComponentProps {
+  getApps: Function;
+  getCategories: Function;
+  appsLoading: boolean;
+  apps: App[];
+  categoriesLoading: boolean;
+  categories: Category[];
+}
+
+const Home = (props: ComponentProps): JSX.Element => {
  const {
-    apps: { apps, loading: appsLoading },
-    bookmarks: { categories, loading: bookmarksLoading },
-    config: { config },
-    auth: { isAuthenticated },
-  } = useSelector((state: State) => state);
+    getApps,
+    apps,
+    appsLoading,
+    getCategories,
+    categories,
+    categoriesLoading
+  } = props;

-  const dispatch = useDispatch();
-  const { getApps, getCategories } = bindActionCreators(
-    actionCreators,
-    dispatch
-  );
-
-  // Local search query
-  const [localSearch, setLocalSearch] = useState<null | string>(null);
-  const [appSearchResult, setAppSearchResult] = useState<null | App[]>(null);
-  const [bookmarkSearchResult, setBookmarkSearchResult] = useState<
-    null | Category[]
-  >(null);
+  const [header, setHeader] = useState({
+    dateTime: dateTime(),
+    greeting: greeter()
+  })

  // Load applications
  useEffect(() => {
-    if (!apps.length) {
+    if (apps.length === 0) {
      getApps();
    }
-  }, []);
+  }, [getApps]);

  // Load bookmark categories
  useEffect(() => {
-    if (!categories.length) {
+    if (categories.length === 0) {
      getCategories();
    }
-  }, []);
+  }, [getCategories]);

+  // Refresh greeter and time
  useEffect(() => {
-    if (localSearch) {
-      // Search through apps
-      setAppSearchResult([
-        ...apps.filter(({ name, description }) =>
-          new RegExp(escapeRegex(localSearch), 'i').test(
-            `${name} ${description}`
-          )
-        ),
-      ]);
+    let interval: any;

-      // Search through bookmarks
-      const category = { ...categories[0] };
-
-      category.name = 'Search Results';
-      category.bookmarks = categories
-        .map(({ bookmarks }) => bookmarks)
-        .flat()
-        .filter(({ name }) =>
-          new RegExp(escapeRegex(localSearch), 'i').test(name)
-        );
-
-      setBookmarkSearchResult([category]);
-    } else {
-      setAppSearchResult(null);
-      setBookmarkSearchResult(null);
+    // Start interval only when hideHeader is false
+    if (searchConfig('hideHeader', 0) !== 1) {
+      interval = setInterval(() => {
+        setHeader({
+          dateTime: dateTime(),
+          greeting: greeter()
+        })
+      }, 1000);
    }
-  }, [localSearch]);

+    return () => clearInterval(interval);
+  }, [])
+  
  return (
    <Container>
-      {!config.hideSearch ? (
-        <SearchBar
-          setLocalSearch={setLocalSearch}
-          appSearchResult={appSearchResult}
-          bookmarkSearchResult={bookmarkSearchResult}
+      {searchConfig('hideHeader', 0) !== 1
+        ? (
+          <header className={classes.Header}>
+            <p>{header.dateTime}</p>
+            <Link to='/settings' className={classes.SettingsLink}>Go to Settings</Link>
+            <span className={classes.HeaderMain}>
+              <h1>{header.greeting}</h1>
+              <WeatherWidget />
+            </span>
+          </header>
+          )
+        : <div></div>
+      }
+      
+      <SectionHeadline title='Applications' link='/applications' />
+      {appsLoading
+        ? <Spinner />
+        : <AppGrid
+          apps={apps.filter((app: App) => app.isPinned)}
+          totalApps={apps.length}
        />
-      ) : (
-        <div></div>
-      )}
+      }

-      <Header />
+      <div className={classes.HomeSpace}></div>

-      {!isAuthenticated &&
-      !apps.some((a) => a.isPinned) &&
-      !categories.some((c) => c.isPinned) ? (
-        <Message>
-          Welcome to Flame! Go to <Link to="/settings/app">/settings</Link>,
-          login and start customizing your new homepage
-        </Message>
-      ) : (
-        <></>
-      )}
+      <SectionHeadline title='Bookmarks' link='/bookmarks' />
+      {categoriesLoading
+        ? <Spinner />
+        : <BookmarkGrid
+            categories={categories.filter((category: Category) => category.isPinned)}
+            totalCategories={categories.length}
+        />
+      }

-      {!config.hideApps && (isAuthenticated || apps.some((a) => a.isPinned)) ? (
-        <Fragment>
-          <SectionHeadline title="Applications" link="/applications" />
-          {appsLoading ? (
-            <Spinner />
-          ) : (
-            <AppGrid
-              apps={
-                !appSearchResult
-                  ? apps.filter(({ isPinned }) => isPinned)
-                  : appSearchResult
-              }
-              totalApps={apps.length}
-              searching={!!localSearch}
-            />
-          )}
-          <div className={classes.HomeSpace}></div>
-        </Fragment>
-      ) : (
-        <></>
-      )}
-
-      {!config.hideCategories &&
-      (isAuthenticated || categories.some((c) => c.isPinned)) ? (
-        <Fragment>
-          <SectionHeadline title="Bookmarks" link="/bookmarks" />
-          {bookmarksLoading ? (
-            <Spinner />
-          ) : (
-            <BookmarkGrid
-              categories={
-                !bookmarkSearchResult
-                  ? categories.filter(
-                      ({ isPinned, bookmarks }) => isPinned && bookmarks.length
-                    )
-                  : bookmarkSearchResult
-              }
-              totalCategories={categories.length}
-              searching={!!localSearch}
-              fromHomepage={true}
-            />
-          )}
-        </Fragment>
-      ) : (
-        <></>
-      )}
-
-      <Link to="/settings" className={classes.SettingsButton}>
-        <Icon icon="mdiCog" color="var(--color-background)" />
+      <Link to='/settings' className={classes.SettingsButton}>
+        <Icon icon='mdiCog' color='var(--color-background)' />
      </Link>
    </Container>
-  );
-};
+  )
+}
+
+const mapStateToProps = (state: GlobalState) => {
+  return {
+    appsLoading: state.app.loading,
+    apps: state.app.apps,
+    categoriesLoading: state.bookmark.loading,
+    categories: state.bookmark.categories
+  }
+}
+
+export default connect(mapStateToProps, { getApps, getCategories })(Home);
--- a/client/src/components/Home/functions/dateTime.ts
+++ b/client/src/components/Home/functions/dateTime.ts
@ -0,0 +1,8 @@
+export const dateTime = (): string => {
+  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+  const now = new Date();
+
+  return `${days[now.getDay()]}, ${now.getDate()} ${months[now.getMonth()]} ${now.getFullYear()}`;
+}
--- a/client/src/components/Home/functions/greeter.ts
+++ b/client/src/components/Home/functions/greeter.ts
@ -0,0 +1,12 @@
+export const greeter = (): string => {
+  const now = new Date().getHours();
+  let msg: string;
+
+  if (now >= 18) msg = 'Good evening!';
+  else if (now >= 12) msg = 'Good afternoon!';
+  else if (now >= 6) msg = 'Good morning!';
+  else if (now >= 0) msg = 'Good night!';
+  else msg = 'Hello!';
+
+  return msg;
+}
--- a/client/src/components/NotificationCenter/NotificationCenter.tsx
+++ b/client/src/components/NotificationCenter/NotificationCenter.tsx
@ -1,30 +1,38 @@
-import { useSelector } from 'react-redux';
-import { Notification as NotificationInterface } from '../../interfaces';
+import { connect } from 'react-redux';
+import { GlobalState, Notification as _Notification } from '../../interfaces';

 import classes from './NotificationCenter.module.css';

-import { Notification } from '../UI';
-import { State } from '../../store/reducers';
+import Notification from '../UI/Notification/Notification';

-export const NotificationCenter = (): JSX.Element => {
-  const { notifications } = useSelector((state: State) => state.notification);
+interface ComponentProps {
+  notifications: _Notification[];
+}

+const NotificationCenter = (props: ComponentProps): JSX.Element => {
  return (
    <div
      className={classes.NotificationCenter}
-      style={{ height: `${notifications.length * 75}px` }}
+      style={{ height: `${props.notifications.length * 75}px` }}
    >
-      {notifications.map((notification: NotificationInterface) => {
+      {props.notifications.map((notification: _Notification) => {
        return (
          <Notification
            title={notification.title}
            message={notification.message}
-            url={notification.url || null}
            id={notification.id}
            key={notification.id}
          />
-        );
+        )
      })}
    </div>
-  );
-};
+  )
+}
+
+const mapStateToProps = (state: GlobalState) => {
+  return {
+    notifications: state.notification.notifications
+  }
+}
+
+export default connect(mapStateToProps)(NotificationCenter);
--- a/client/src/components/Routing/ProtectedRoute.tsx
+++ b/client/src/components/Routing/ProtectedRoute.tsx
@ -1,13 +0,0 @@
-import { useSelector } from 'react-redux';
-import { Redirect, Route, RouteProps } from 'react-router';
-import { State } from '../../store/reducers';
-
-export const ProtectedRoute = ({ ...rest }: RouteProps) => {
-  const { isAuthenticated } = useSelector((state: State) => state.auth);
-
-  if (isAuthenticated) {
-    return <Route {...rest} />;
-  } else {
-    return <Redirect to="/settings/app" />;
-  }
-};
--- a/client/src/components/SearchBar/SearchBar.module.css
+++ b/client/src/components/SearchBar/SearchBar.module.css
@ -1,18 +0,0 @@
-.SearchBar {
-  width: 100%;
-  padding: 10px 0;
-  color: var(--color-primary);
-  /* font-size: 20px; */
-  margin-bottom: 20px;
-  background-color: transparent;
-  border: none;
-  border-bottom: 2px solid var(--color-accent);
-  opacity: 0.5;
-  transition: all 0.2s;
-  border-radius: 0px;
-}
-
-.SearchBar:focus {
-  opacity: 1;
-  outline: none;
-}
--- a/client/src/components/SearchBar/SearchBar.tsx
+++ b/client/src/components/SearchBar/SearchBar.tsx
@ -1,132 +0,0 @@
-import { useRef, useEffect, KeyboardEvent } from 'react';
-
-// Redux
-import { useDispatch, useSelector } from 'react-redux';
-
-// Typescript
-import { App, Category } from '../../interfaces';
-
-// CSS
-import classes from './SearchBar.module.css';
-
-// Utils
-import { searchParser, urlParser, redirectUrl } from '../../utility';
-import { State } from '../../store/reducers';
-import { bindActionCreators } from 'redux';
-import { actionCreators } from '../../store';
-
-interface Props {
-  setLocalSearch: (query: string) => void;
-  appSearchResult: App[] | null;
-  bookmarkSearchResult: Category[] | null;
-}
-
-export const SearchBar = (props: Props): JSX.Element => {
-  const { config, loading } = useSelector((state: State) => state.config);
-
-  const dispatch = useDispatch();
-  const { createNotification } = bindActionCreators(actionCreators, dispatch);
-
-  const { setLocalSearch, appSearchResult, bookmarkSearchResult } = props;
-
-  const inputRef = useRef<HTMLInputElement>(document.createElement('input'));
-
-  // Search bar autofocus
-  useEffect(() => {
-    if (!loading && !config.disableAutofocus) {
-      inputRef.current.focus();
-    }
-  }, [config]);
-
-  // Listen for keyboard events outside of search bar
-  useEffect(() => {
-    const keyOutsideFocus = (e: any) => {
-      const { key } = e as KeyboardEvent;
-
-      if (key === 'Escape') {
-        clearSearch();
-      } else if (document.activeElement !== inputRef.current) {
-        if (key === '`') {
-          inputRef.current.focus();
-          clearSearch();
-        }
-      }
-    };
-
-    window.addEventListener('keyup', keyOutsideFocus);
-
-    return () => window.removeEventListener('keyup', keyOutsideFocus);
-  }, []);
-
-  const clearSearch = () => {
-    inputRef.current.value = '';
-    setLocalSearch('');
-  };
-
-  const searchHandler = (e: KeyboardEvent<HTMLInputElement>) => {
-    const {
-      isLocal,
-      encodedURL,
-      primarySearch,
-      secondarySearch,
-      isURL,
-      sameTab,
-      rawQuery,
-    } = searchParser(inputRef.current.value);
-
-    if (isLocal) {
-      setLocalSearch(encodedURL);
-    }
-
-    if (e.code === 'Enter' || e.code === 'NumpadEnter') {
-      if (!primarySearch.prefix) {
-        // Prefix not found -> emit notification
-        createNotification({
-          title: 'Error',
-          message: 'Prefix not found',
-        });
-      } else if (isURL) {
-        // URL or IP passed -> redirect
-        const url = urlParser(inputRef.current.value)[1];
-        redirectUrl(url, sameTab);
-      } else if (isLocal) {
-        // Local query -> redirect if at least 1 result found
-        if (appSearchResult?.length) {
-          redirectUrl(appSearchResult[0].url, sameTab);
-        } else if (bookmarkSearchResult?.[0]?.bookmarks?.length) {
-          redirectUrl(bookmarkSearchResult[0].bookmarks[0].url, sameTab);
-        } else {
-          // no local results -> search the internet with the default search provider if query is not empty
-          if (!/^ *$/.test(rawQuery)) {
-            let template = primarySearch.template;
-
-            if (primarySearch.prefix === 'l') {
-              template = secondarySearch.template;
-            }
-
-            const url = `${template}${encodedURL}`;
-            redirectUrl(url, sameTab);
-          }
-        }
-      } else {
-        // Valid query -> redirect to search results
-        const url = `${primarySearch.template}${encodedURL}`;
-        redirectUrl(url, sameTab);
-      }
-    } else if (e.code === 'Escape') {
-      clearSearch();
-    }
-  };
-
-  return (
-    <div className={classes.SearchContainer}>
-      <input
-        ref={inputRef}
-        type="text"
-        className={classes.SearchBar}
-        onKeyUp={(e) => searchHandler(e)}
-        onDoubleClick={clearSearch}
-      />
-    </div>
-  );
-};
--- a/client/src/components/Settings/AppDetails/AppDetails.module.css
+++ b/client/src/components/Settings/AppDetails/AppDetails.module.css
@ -1,14 +1,8 @@
-.text {
+.AppVersion {
  color: var(--color-primary);
  margin-bottom: 15px;
 }

-.text a,
-.text span {
+.AppVersion a {
  color: var(--color-accent);
-}
-
-.separator {
-  margin: 30px 0;
-  border: 1px solid var(--color-primary);
-}
+}
--- a/client/src/components/Settings/AppDetails/AppDetails.tsx
+++ b/client/src/components/Settings/AppDetails/AppDetails.tsx
@ -1,57 +1,25 @@
 import { Fragment } from 'react';

-// UI
-import { Button, SettingsHeadline } from '../../UI';
-import { AuthForm } from './AuthForm/AuthForm';
 import classes from './AppDetails.module.css';
-
-// Store
-import { useSelector } from 'react-redux';
-import { State } from '../../../store/reducers';
-
-// Other
+import Button from '../../UI/Buttons/Button/Button';
 import { checkVersion } from '../../../utility';

-export const AppDetails = (): JSX.Element => {
-  const { isAuthenticated } = useSelector((state: State) => state.auth);
-
+const AppDetails = (): JSX.Element => {
  return (
    <Fragment>
-      <SettingsHeadline text="Authentication" />
-      <AuthForm />
-
-      {isAuthenticated && (
-        <Fragment>
-          <hr className={classes.separator} />
-
-          <div>
-            <SettingsHeadline text="App version" />
-            <p className={classes.text}>
-              <a
-                href="https://github.com/pawelmalak/flame"
-                target="_blank"
-                rel="noreferrer"
-              >
-                Flame
-              </a>{' '}
-              version {process.env.REACT_APP_VERSION}
-            </p>
-
-            <p className={classes.text}>
-              See changelog{' '}
-              <a
-                href="https://github.com/pawelmalak/flame/blob/master/CHANGELOG.md"
-                target="_blank"
-                rel="noreferrer"
-              >
-                here
-              </a>
-            </p>
-
-            <Button click={() => checkVersion(true)}>Check for updates</Button>
-          </div>
-        </Fragment>
-      )}
+      <p className={classes.AppVersion}>
+        <a
+          href='https://github.com/pawelmalak/flame'
+          target='_blank'
+          rel='noreferrer'>
+          Flame
+        </a>
+        {' '}
+        version {process.env.REACT_APP_VERSION}
+      </p>
+      <Button click={() => checkVersion(true)}>Check for updates</Button>
    </Fragment>
-  );
-};
+  )
+}
+
+export default AppDetails;
--- a/client/src/components/Settings/AppDetails/AuthForm/AuthForm.tsx
+++ b/client/src/components/Settings/AppDetails/AuthForm/AuthForm.tsx
@ -1,110 +0,0 @@
-import { FormEvent, Fragment, useEffect, useState, useRef } from 'react';
-
-// Redux
-import { useSelector, useDispatch } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { actionCreators } from '../../../../store';
-import { State } from '../../../../store/reducers';
-import { decodeToken, parseTokenExpire } from '../../../../utility';
-
-// Other
-import { InputGroup, Button } from '../../../UI';
-import classes from '../AppDetails.module.css';
-
-export const AuthForm = (): JSX.Element => {
-  const { isAuthenticated, token } = useSelector((state: State) => state.auth);
-
-  const dispatch = useDispatch();
-  const { login, logout } = bindActionCreators(actionCreators, dispatch);
-
-  const [tokenExpires, setTokenExpires] = useState('');
-  const [formData, setFormData] = useState({
-    password: '',
-    duration: '14d',
-  });
-
-  const passwordInputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    passwordInputRef.current?.focus();
-  }, []);
-
-  useEffect(() => {
-    if (token) {
-      const decoded = decodeToken(token);
-      const expiresIn = parseTokenExpire(decoded.exp);
-      setTokenExpires(expiresIn);
-    }
-  }, [token]);
-
-  const formHandler = (e: FormEvent) => {
-    e.preventDefault();
-    login(formData);
-    setFormData({
-      password: '',
-      duration: '14d',
-    });
-  };
-
-  return (
-    <Fragment>
-      {!isAuthenticated ? (
-        <form onSubmit={formHandler}>
-          <InputGroup>
-            <label htmlFor="password">Password</label>
-            <input
-              type="password"
-              id="password"
-              name="password"
-              placeholder="••••••"
-              autoComplete="current-password"
-              ref={passwordInputRef}
-              value={formData.password}
-              onChange={(e) =>
-                setFormData({ ...formData, password: e.target.value })
-              }
-            />
-            <span>
-              See
-              <a
-                href="https://github.com/pawelmalak/flame/wiki/Authentication"
-                target="blank"
-              >
-                {` project wiki `}
-              </a>
-              to read more about authentication
-            </span>
-          </InputGroup>
-
-          <InputGroup>
-            <label htmlFor="duration">Session duration</label>
-            <select
-              id="duration"
-              name="duration"
-              value={formData.duration}
-              onChange={(e) =>
-                setFormData({ ...formData, duration: e.target.value })
-              }
-            >
-              <option value="1h">1 hour</option>
-              <option value="1d">1 day</option>
-              <option value="14d">2 weeks</option>
-              <option value="30d">1 month</option>
-              <option value="1y">1 year</option>
-            </select>
-          </InputGroup>
-
-          <Button>Login</Button>
-        </form>
-      ) : (
-        <div>
-          <p className={classes.text}>
-            You are logged in. Your session will expire{' '}
-            <span>{tokenExpires}</span>
-          </p>
-          <Button click={logout}>Logout</Button>
-        </div>
-      )}
-    </Fragment>
-  );
-};
--- a/client/src/components/Settings/DockerSettings/DockerSettings.tsx
+++ b/client/src/components/Settings/DockerSettings/DockerSettings.tsx
@ -1,122 +0,0 @@
-import { useState, useEffect, ChangeEvent, FormEvent } from 'react';
-
-// Redux
-import { useDispatch, useSelector } from 'react-redux';
-import { State } from '../../../store/reducers';
-import { bindActionCreators } from 'redux';
-import { actionCreators } from '../../../store';
-
-// Typescript
-import { DockerSettingsForm } from '../../../interfaces';
-
-// UI
-import { InputGroup, Button, SettingsHeadline } from '../../UI';
-
-// Utils
-import { inputHandler, dockerSettingsTemplate } from '../../../utility';
-
-export const DockerSettings = (): JSX.Element => {
-  const { loading, config } = useSelector((state: State) => state.config);
-
-  const dispatch = useDispatch();
-  const { updateConfig } = bindActionCreators(actionCreators, dispatch);
-
-  // Initial state
-  const [formData, setFormData] = useState<DockerSettingsForm>(
-    dockerSettingsTemplate
-  );
-
-  // Get config
-  useEffect(() => {
-    setFormData({
-      ...config,
-    });
-  }, [loading]);
-
-  // Form handler
-  const formSubmitHandler = async (e: FormEvent) => {
-    e.preventDefault();
-
-    // Save settings
-    await updateConfig(formData);
-  };
-
-  // Input handler
-  const inputChangeHandler = (
-    e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
-    options?: { isNumber?: boolean; isBool?: boolean }
-  ) => {
-    inputHandler<DockerSettingsForm>({
-      e,
-      options,
-      setStateHandler: setFormData,
-      state: formData,
-    });
-  };
-
-  return (
-    <form onSubmit={(e) => formSubmitHandler(e)}>
-      <SettingsHeadline text="Docker" />
-      {/* CUSTOM DOCKER SOCKET HOST */}
-      <InputGroup>
-        <label htmlFor="dockerHost">Docker host</label>
-        <input
-          type="text"
-          id="dockerHost"
-          name="dockerHost"
-          placeholder="dockerHost:port"
-          value={formData.dockerHost}
-          onChange={(e) => inputChangeHandler(e)}
-        />
-      </InputGroup>
-
-      {/* USE DOCKER API */}
-      <InputGroup>
-        <label htmlFor="dockerApps">Use Docker API</label>
-        <select
-          id="dockerApps"
-          name="dockerApps"
-          value={formData.dockerApps ? 1 : 0}
-          onChange={(e) => inputChangeHandler(e, { isBool: true })}
-        >
-          <option value={1}>True</option>
-          <option value={0}>False</option>
-        </select>
-      </InputGroup>
-
-      {/* UNPIN DOCKER APPS */}
-      <InputGroup>
-        <label htmlFor="unpinStoppedApps">
-          Unpin stopped containers / other apps
-        </label>
-        <select
-          id="unpinStoppedApps"
-          name="unpinStoppedApps"
-          value={formData.unpinStoppedApps ? 1 : 0}
-          onChange={(e) => inputChangeHandler(e, { isBool: true })}
-        >
-          <option value={1}>True</option>
-          <option value={0}>False</option>
-        </select>
-      </InputGroup>
-
-      {/* KUBERNETES SETTINGS */}
-      <SettingsHeadline text="Kubernetes" />
-      {/* USE KUBERNETES */}
-      <InputGroup>
-        <label htmlFor="kubernetesApps">Use Kubernetes Ingress API</label>
-        <select
-          id="kubernetesApps"
-          name="kubernetesApps"
-          value={formData.kubernetesApps ? 1 : 0}
-          onChange={(e) => inputChangeHandler(e, { isBool: true })}
-        >
-          <option value={1}>True</option>
-          <option value={0}>False</option>
-        </select>
-      </InputGroup>
-
-      <Button>Save changes</Button>
-    </form>
-  );
-};
--- a/client/src/components/Settings/GeneralSettings/CustomQueries/CustomQueries.tsx
+++ b/client/src/components/Settings/GeneralSettings/CustomQueries/CustomQueries.tsx
@ -1,100 +0,0 @@
-import { Fragment, useState } from 'react';
-
-// Redux
-import { useDispatch, useSelector } from 'react-redux';
-import { State } from '../../../../store/reducers';
-import { bindActionCreators } from 'redux';
-import { actionCreators } from '../../../../store';
-
-// Typescript
-import { Query } from '../../../../interfaces';
-
-// UI
-import { Modal, Icon, Button, CompactTable, ActionIcons } from '../../../UI';
-
-// Components
-import { QueriesForm } from './QueriesForm';
-
-export const CustomQueries = (): JSX.Element => {
-  const { customQueries, config } = useSelector((state: State) => state.config);
-
-  const dispatch = useDispatch();
-  const { deleteQuery, createNotification } = bindActionCreators(
-    actionCreators,
-    dispatch
-  );
-
-  const [modalIsOpen, setModalIsOpen] = useState(false);
-  const [editableQuery, setEditableQuery] = useState<Query | null>(null);
-
-  const updateHandler = (query: Query) => {
-    setEditableQuery(query);
-    setModalIsOpen(true);
-  };
-
-  const deleteHandler = (query: Query) => {
-    const currentProvider = config.defaultSearchProvider;
-    const isCurrent = currentProvider === query.prefix;
-
-    if (isCurrent) {
-      createNotification({
-        title: 'Error',
-        message: 'Cannot delete active provider',
-      });
-    } else if (
-      window.confirm(`Are you sure you want to delete this provider?`)
-    ) {
-      deleteQuery(query.prefix);
-    }
-  };
-
-  return (
-    <Fragment>
-      <Modal
-        isOpen={modalIsOpen}
-        setIsOpen={() => setModalIsOpen(!modalIsOpen)}
-      >
-        {editableQuery ? (
-          <QueriesForm
-            modalHandler={() => setModalIsOpen(!modalIsOpen)}
-            query={editableQuery}
-          />
-        ) : (
-          <QueriesForm modalHandler={() => setModalIsOpen(!modalIsOpen)} />
-        )}
-      </Modal>
-
-      <section>
-        {customQueries.length ? (
-          <CompactTable headers={['Name', 'Prefix', 'Actions']}>
-            {customQueries.map((q: Query, idx) => (
-              <Fragment key={idx}>
-                <span>{q.name}</span>
-                <span>{q.prefix}</span>
-                <ActionIcons>
-                  <span onClick={() => updateHandler(q)}>
-                    <Icon icon="mdiPencil" />
-                  </span>
-                  <span onClick={() => deleteHandler(q)}>
-                    <Icon icon="mdiDelete" />
-                  </span>
-                </ActionIcons>
-              </Fragment>
-            ))}
-          </CompactTable>
-        ) : (
-          <></>
-        )}
-
-        <Button
-          click={() => {
-            setEditableQuery(null);
-            setModalIsOpen(true);
-          }}
-        >
-          Add new search provider
-        </Button>
-      </section>
-    </Fragment>
-  );
-};
--- a/client/src/components/Settings/GeneralSettings/CustomQueries/QueriesForm.tsx
+++ b/client/src/components/Settings/GeneralSettings/CustomQueries/QueriesForm.tsx
@ -1,116 +0,0 @@
-import { ChangeEvent, FormEvent, useState, useEffect } from 'react';
-
-import { useDispatch } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { actionCreators } from '../../../../store';
-
-import { Query } from '../../../../interfaces';
-
-import { Button, InputGroup, ModalForm } from '../../../UI';
-
-interface Props {
-  modalHandler: () => void;
-  query?: Query;
-}
-
-export const QueriesForm = (props: Props): JSX.Element => {
-  const dispatch = useDispatch();
-  const { addQuery, updateQuery } = bindActionCreators(
-    actionCreators,
-    dispatch
-  );
-
-  const { modalHandler, query } = props;
-
-  const [formData, setFormData] = useState<Query>({
-    name: '',
-    prefix: '',
-    template: '',
-  });
-
-  const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-
-    setFormData({
-      ...formData,
-      [name]: value,
-    });
-  };
-
-  const formHandler = (e: FormEvent) => {
-    e.preventDefault();
-
-    if (query) {
-      updateQuery(formData, query.prefix);
-    } else {
-      addQuery(formData);
-    }
-
-    // close modal
-    modalHandler();
-
-    // clear form
-    setFormData({
-      name: '',
-      prefix: '',
-      template: '',
-    });
-  };
-
-  useEffect(() => {
-    if (query) {
-      setFormData(query);
-    } else {
-      setFormData({
-        name: '',
-        prefix: '',
-        template: '',
-      });
-    }
-  }, [query]);
-
-  return (
-    <ModalForm modalHandler={modalHandler} formHandler={formHandler}>
-      <InputGroup>
-        <label htmlFor="name">Name</label>
-        <input
-          type="text"
-          name="name"
-          id="name"
-          placeholder="Google"
-          required
-          value={formData.name}
-          onChange={(e) => inputChangeHandler(e)}
-        />
-      </InputGroup>
-
-      <InputGroup>
-        <label htmlFor="name">Prefix</label>
-        <input
-          type="text"
-          name="prefix"
-          id="prefix"
-          placeholder="g"
-          required
-          value={formData.prefix}
-          onChange={(e) => inputChangeHandler(e)}
-        />
-      </InputGroup>
-
-      <InputGroup>
-        <label htmlFor="name">Query Template</label>
-        <input
-          type="text"
-          name="template"
-          id="template"
-          placeholder="https://www.google.com/search?q="
-          required
-          value={formData.template}
-          onChange={(e) => inputChangeHandler(e)}
-        />
-      </InputGroup>
-
-      {query ? <Button>Update provider</Button> : <Button>Add provider</Button>}
-    </ModalForm>
-  );
-};
--- a/client/src/components/Settings/GeneralSettings/GeneralSettings.tsx
+++ b/client/src/components/Settings/GeneralSettings/GeneralSettings.tsx
@ -1,242 +0,0 @@
-// React
-import { useState, useEffect, FormEvent, ChangeEvent, Fragment } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-
-// Typescript
-import { Query, GeneralForm } from '../../../interfaces';
-
-// Components
-import { CustomQueries } from './CustomQueries/CustomQueries';
-
-// UI
-import { Button, SettingsHeadline, InputGroup } from '../../UI';
-
-// Utils
-import { inputHandler, generalSettingsTemplate } from '../../../utility';
-
-// Data
-import searchQueries from '../../../utility/searchQueries.json';
-
-// Redux
-import { State } from '../../../store/reducers';
-import { bindActionCreators } from 'redux';
-import { actionCreators } from '../../../store';
-
-export const GeneralSettings = (): JSX.Element => {
-  const {
-    config: { loading, customQueries, config },
-    bookmarks: { categories },
-  } = useSelector((state: State) => state);
-
-  const dispatch = useDispatch();
-  const { updateConfig, sortApps, sortCategories, sortBookmarks } =
-    bindActionCreators(actionCreators, dispatch);
-
-  const queries = searchQueries.queries;
-
-  // Initial state
-  const [formData, setFormData] = useState<GeneralForm>(
-    generalSettingsTemplate
-  );
-
-  // Get config
-  useEffect(() => {
-    setFormData({
-      ...config,
-    });
-  }, [loading]);
-
-  // Form handler
-  const formSubmitHandler = async (e: FormEvent) => {
-    e.preventDefault();
-
-    // Save settings
-    await updateConfig(formData);
-
-    // Sort entities with new settings
-    if (formData.useOrdering !== config.useOrdering) {
-      sortApps();
-      sortCategories();
-
-      for (let { id } of categories) {
-        sortBookmarks(id);
-      }
-    }
-  };
-
-  // Input handler
-  const inputChangeHandler = (
-    e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
-    options?: { isNumber?: boolean; isBool?: boolean }
-  ) => {
-    inputHandler<GeneralForm>({
-      e,
-      options,
-      setStateHandler: setFormData,
-      state: formData,
-    });
-  };
-
-  return (
-    <Fragment>
-      <form
-        onSubmit={(e) => formSubmitHandler(e)}
-        style={{ marginBottom: '30px' }}
-      >
-        {/* === GENERAL OPTIONS === */}
-        <SettingsHeadline text="General" />
-        {/* SORT TYPE */}
-        <InputGroup>
-          <label htmlFor="useOrdering">Sorting type</label>
-          <select
-            id="useOrdering"
-            name="useOrdering"
-            value={formData.useOrdering}
-            onChange={(e) => inputChangeHandler(e)}
-          >
-            <option value="createdAt">By creation date</option>
-            <option value="name">Alphabetical order</option>
-            <option value="orderId">Custom order</option>
-          </select>
-        </InputGroup>
-
-        {/* === APPS OPTIONS === */}
-        <SettingsHeadline text="Apps" />
-        {/* PIN APPS */}
-        <InputGroup>
-          <label htmlFor="pinAppsByDefault">
-            Pin new applications by default
-          </label>
-          <select
-            id="pinAppsByDefault"
-            name="pinAppsByDefault"
-            value={formData.pinAppsByDefault ? 1 : 0}
-            onChange={(e) => inputChangeHandler(e, { isBool: true })}
-          >
-            <option value={1}>True</option>
-            <option value={0}>False</option>
-          </select>
-        </InputGroup>
-
-        {/* APPS OPPENING */}
-        <InputGroup>
-          <label htmlFor="appsSameTab">Open applications in the same tab</label>
-          <select
-            id="appsSameTab"
-            name="appsSameTab"
-            value={formData.appsSameTab ? 1 : 0}
-            onChange={(e) => inputChangeHandler(e, { isBool: true })}
-          >
-            <option value={1}>True</option>
-            <option value={0}>False</option>
-          </select>
-        </InputGroup>
-
-        {/* === BOOKMARKS OPTIONS === */}
-        <SettingsHeadline text="Bookmarks" />
-        {/* PIN CATEGORIES */}
-        <InputGroup>
-          <label htmlFor="pinCategoriesByDefault">
-            Pin new categories by default
-          </label>
-          <select
-            id="pinCategoriesByDefault"
-            name="pinCategoriesByDefault"
-            value={formData.pinCategoriesByDefault ? 1 : 0}
-            onChange={(e) => inputChangeHandler(e, { isBool: true })}
-          >
-            <option value={1}>True</option>
-            <option value={0}>False</option>
-          </select>
-        </InputGroup>
-
-        {/* BOOKMARKS OPPENING */}
-        <InputGroup>
-          <label htmlFor="bookmarksSameTab">
-            Open bookmarks in the same tab
-          </label>
-          <select
-            id="bookmarksSameTab"
-            name="bookmarksSameTab"
-            value={formData.bookmarksSameTab ? 1 : 0}
-            onChange={(e) => inputChangeHandler(e, { isBool: true })}
-          >
-            <option value={1}>True</option>
-            <option value={0}>False</option>
-          </select>
-        </InputGroup>
-
-        {/* === SEARCH OPTIONS === */}
-        <SettingsHeadline text="Search" />
-        <InputGroup>
-          <label htmlFor="defaultSearchProvider">Primary search provider</label>
-          <select
-            id="defaultSearchProvider"
-            name="defaultSearchProvider"
-            value={formData.defaultSearchProvider}
-            onChange={(e) => inputChangeHandler(e)}
-          >
-            {[...queries, ...customQueries].map((query: Query, idx) => {
-              const isCustom = idx >= queries.length;
-
-              return (
-                <option key={idx} value={query.prefix}>
-                  {isCustom && '+'} {query.name}
-                </option>
-              );
-            })}
-          </select>
-        </InputGroup>
-
-        {formData.defaultSearchProvider === 'l' && (
-          <InputGroup>
-            <label htmlFor="secondarySearchProvider">
-              Secondary search provider
-            </label>
-            <select
-              id="secondarySearchProvider"
-              name="secondarySearchProvider"
-              value={formData.secondarySearchProvider}
-              onChange={(e) => inputChangeHandler(e)}
-            >
-              {[...queries, ...customQueries].map((query: Query, idx) => {
-                const isCustom = idx >= queries.length;
-
-                return (
-                  <option key={idx} value={query.prefix}>
-                    {isCustom && '+'} {query.name}
-                  </option>
-                );
-              })}
-            </select>
-            <span>
-              Will be used when "Local search" is primary search provider and
-              there are not any local results
-            </span>
-          </InputGroup>
-        )}
-
-        <InputGroup>
-          <label htmlFor="searchSameTab">
-            Open search results in the same tab
-          </label>
-          <select
-            id="searchSameTab"
-            name="searchSameTab"
-            value={formData.searchSameTab ? 1 : 0}
-            onChange={(e) => inputChangeHandler(e, { isBool: true })}
-          >
-            <option value={1}>True</option>
-            <option value={0}>False</option>
-          </select>
-        </InputGroup>
-
-        <Button>Save changes</Button>
-      </form>
-
-      {/* CUSTOM QUERIES */}
-      <SettingsHeadline text="Custom search providers" />
-      <CustomQueries />
-    </Fragment>
-  );
-};
--- a/client/src/components/Settings/OtherSettings/OtherSettings.tsx
+++ b/client/src/components/Settings/OtherSettings/OtherSettings.tsx
@ -0,0 +1,155 @@
+import { useState, useEffect, ChangeEvent, FormEvent } from 'react';
+
+// Redux
+import { connect } from 'react-redux';
+import { createNotification, updateConfig, sortApps, sortCategories } from '../../../store/actions';
+
+// Typescript
+import { GlobalState, NewNotification, SettingsForm } from '../../../interfaces';
+
+// UI
+import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
+import Button from '../../UI/Buttons/Button/Button';
+
+// Utils
+import { searchConfig } from '../../../utility';
+
+interface ComponentProps {
+  createNotification: (notification: NewNotification) => void;
+  updateConfig: (formData: SettingsForm) => void;
+  sortApps: () => void;
+  sortCategories: () => void;
+  loading: boolean;
+}
+
+const OtherSettings = (props: ComponentProps): JSX.Element => {
+  // Initial state
+  const [formData, setFormData] = useState<SettingsForm>({
+    customTitle: document.title,
+    pinAppsByDefault: 1,
+    pinCategoriesByDefault: 1,
+    hideHeader: 0,
+    useOrdering: 'createdAt'
+  })
+
+  // Get config
+  useEffect(() => {
+    setFormData({
+      customTitle: searchConfig('customTitle', 'Flame'),
+      pinAppsByDefault: searchConfig('pinAppsByDefault', 1),
+      pinCategoriesByDefault: searchConfig('pinCategoriesByDefault', 1),
+      hideHeader: searchConfig('hideHeader', 0),
+      useOrdering: searchConfig('useOrdering', 'createdAt')
+    })
+  }, [props.loading]);
+
+  // Form handler
+  const formSubmitHandler = async (e: FormEvent) => {
+    e.preventDefault();
+
+    // Save settings
+    await props.updateConfig(formData);
+
+    // Update local page title
+    document.title = formData.customTitle;
+
+    // Sort apps and categories with new settings
+    props.sortApps();
+    props.sortCategories();
+  }
+
+  // Input handler
+  const inputChangeHandler = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>, isNumber?: boolean) => {
+    let value: string | number = e.target.value;
+
+    if (isNumber) {
+      value = parseFloat(value);
+    }
+
+    setFormData({
+      ...formData,
+      [e.target.name]: value
+    })
+  }
+
+  return (
+    <form onSubmit={(e) => formSubmitHandler(e)}>
+      <InputGroup>
+        <label htmlFor='customTitle'>Custom page title</label>
+        <input
+          type='text'
+          id='customTitle'
+          name='customTitle'
+          placeholder='Flame'
+          value={formData.customTitle}
+          onChange={(e) => inputChangeHandler(e)}
+        />
+      </InputGroup>
+      <InputGroup>
+        <label htmlFor='pinAppsByDefault'>Pin new applications by default</label>
+        <select
+          id='pinAppsByDefault'
+          name='pinAppsByDefault'
+          value={formData.pinAppsByDefault}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
+      <InputGroup>
+        <label htmlFor='pinCategoriesByDefault'>Pin new categories by default</label>
+        <select
+          id='pinCategoriesByDefault'
+          name='pinCategoriesByDefault'
+          value={formData.pinCategoriesByDefault}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
+      <InputGroup>
+        <label htmlFor='hideHeader'>Hide greeting and date</label>
+        <select
+          id='hideHeader'
+          name='hideHeader'
+          value={formData.hideHeader}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
+      <InputGroup>
+        <label htmlFor='useOrdering'>Sorting type</label>
+        <select
+          id='useOrdering'
+          name='useOrdering'
+          value={formData.useOrdering}
+          onChange={(e) => inputChangeHandler(e)}
+        >
+          <option value='createdAt'>By creation date</option>
+          <option value='name'>Alphabetical order</option>
+          <option value='orderId'>Custom order</option>
+        </select>
+      </InputGroup>
+    <Button>Save changes</Button>
+    </form>
+  )
+}
+
+const mapStateToProps = (state: GlobalState) => {
+  return {
+    loading: state.config.loading
+  }
+}
+
+const actions = {
+  createNotification,
+  updateConfig,
+  sortApps,
+  sortCategories
+}
+
+export default connect(mapStateToProps, actions)(OtherSettings);
--- a/client/src/components/Settings/Settings.tsx
+++ b/client/src/components/Settings/Settings.tsx
@ -1,79 +1,64 @@
 import { NavLink, Link, Switch, Route } from 'react-router-dom';

-// Redux
-import { useSelector } from 'react-redux';
-import { State } from '../../store/reducers';
-
-// Typescript
-import { Route as SettingsRoute } from '../../interfaces';
-
-// CSS
 import classes from './Settings.module.css';

-// Components
-import { Themer } from './Themer/Themer';
-import { WeatherSettings } from './WeatherSettings/WeatherSettings';
-import { UISettings } from './UISettings/UISettings';
-import { AppDetails } from './AppDetails/AppDetails';
-import { StyleSettings } from './StyleSettings/StyleSettings';
-import { GeneralSettings } from './GeneralSettings/GeneralSettings';
-import { DockerSettings } from './DockerSettings/DockerSettings';
-import { ProtectedRoute } from '../Routing/ProtectedRoute';
+import { Container } from '../UI/Layout/Layout';
+import Headline from '../UI/Headlines/Headline/Headline';

-// UI
-import { Container, Headline } from '../UI';
-
-// Data
-import clientRoutes from './settings.json';
-
-export const Settings = (): JSX.Element => {
-  const routes = clientRoutes.routes;
-
-  const { isAuthenticated } = useSelector((state: State) => state.auth);
-
-  const tabs = isAuthenticated ? routes : routes.filter((r) => !r.authRequired);
+import Themer from '../Themer/Themer';
+import WeatherSettings from './WeatherSettings/WeatherSettings';
+import OtherSettings from './OtherSettings/OtherSettings';
+import AppDetails from './AppDetails/AppDetails';

+const Settings = (): JSX.Element => {
  return (
    <Container>
-      <Headline title="Settings" subtitle={<Link to="/">Go back</Link>} />
+      <Headline
+        title='Settings'
+        subtitle={<Link to='/'>Go back</Link>}
+      />
      <div className={classes.Settings}>
-        {/* NAVIGATION MENU */}
        <nav className={classes.SettingsNav}>
-          {tabs.map(({ name, dest }: SettingsRoute, idx) => (
-            <NavLink
-              className={classes.SettingsNavLink}
-              activeClassName={classes.SettingsNavLinkActive}
-              exact
-              to={dest}
-              key={idx}
-            >
-              {name}
-            </NavLink>
-          ))}
+          <NavLink
+            className={classes.SettingsNavLink}
+            activeClassName={classes.SettingsNavLinkActive}
+            exact
+            to='/settings'>
+            Theme
+          </NavLink>
+          <NavLink
+            className={classes.SettingsNavLink}
+            activeClassName={classes.SettingsNavLinkActive}
+            exact
+            to='/settings/weather'>
+            Weather
+          </NavLink>
+          <NavLink
+            className={classes.SettingsNavLink}
+            activeClassName={classes.SettingsNavLinkActive}
+            exact
+            to='/settings/other'>
+            Other
+          </NavLink>
+          <NavLink
+            className={classes.SettingsNavLink}
+            activeClassName={classes.SettingsNavLinkActive}
+            exact
+            to='/settings/app'>
+            App
+          </NavLink>
        </nav>
-
-        {/* ROUTES */}
        <section className={classes.SettingsContent}>
          <Switch>
-            <Route exact path="/settings" component={Themer} />
-            <ProtectedRoute
-              path="/settings/weather"
-              component={WeatherSettings}
-            />
-            <ProtectedRoute
-              path="/settings/general"
-              component={GeneralSettings}
-            />
-            <ProtectedRoute path="/settings/interface" component={UISettings} />
-            <ProtectedRoute
-              path="/settings/docker"
-              component={DockerSettings}
-            />
-            <ProtectedRoute path="/settings/css" component={StyleSettings} />
-            <Route path="/settings/app" component={AppDetails} />
+            <Route exact path='/settings' component={Themer} />
+            <Route path='/settings/weather' component={WeatherSettings} />
+            <Route path='/settings/other' component={OtherSettings} />
+            <Route path='/settings/app' component={AppDetails} />
          </Switch>
        </section>
      </div>
    </Container>
-  );
-};
+  )
+}
+
+export default Settings;
--- a/client/src/components/Settings/StyleSettings/StyleSettings.tsx
+++ b/client/src/components/Settings/StyleSettings/StyleSettings.tsx
@ -1,67 +0,0 @@
-import { useState, useEffect, ChangeEvent, FormEvent } from 'react';
-import axios from 'axios';
-
-// Redux
-import { useDispatch } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { actionCreators } from '../../../store';
-
-// Typescript
-import { ApiResponse } from '../../../interfaces';
-
-// Other
-import { InputGroup, Button } from '../../UI';
-import { applyAuth } from '../../../utility';
-
-export const StyleSettings = (): JSX.Element => {
-  const dispatch = useDispatch();
-  const { createNotification } = bindActionCreators(actionCreators, dispatch);
-
-  const [customStyles, setCustomStyles] = useState<string>('');
-
-  useEffect(() => {
-    axios
-      .get<ApiResponse<string>>('/api/config/0/css')
-      .then((data) => setCustomStyles(data.data.data))
-      .catch((err) => console.log(err.response));
-  }, []);
-
-  const inputChangeHandler = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    e.preventDefault();
-    setCustomStyles(e.target.value);
-  };
-
-  const formSubmitHandler = (e: FormEvent) => {
-    e.preventDefault();
-
-    axios
-      .put<ApiResponse<{}>>(
-        '/api/config/0/css',
-        { styles: customStyles },
-        { headers: applyAuth() }
-      )
-      .then(() => {
-        createNotification({
-          title: 'Success',
-          message: 'CSS saved. Reload page to see changes',
-        });
-      })
-      .catch((err) => console.log(err.response));
-  };
-
-  return (
-    <form onSubmit={(e) => formSubmitHandler(e)}>
-      <InputGroup>
-        <label htmlFor="customStyles">Custom CSS</label>
-        <textarea
-          id="customStyles"
-          name="customStyles"
-          value={customStyles}
-          onChange={(e) => inputChangeHandler(e)}
-          spellCheck={false}
-        ></textarea>
-      </InputGroup>
-      <Button>Save CSS</Button>
-    </form>
-  );
-};
--- a/client/src/components/Settings/Themer/ThemeBuilder/ThemeBuilder.module.css
+++ b/client/src/components/Settings/Themer/ThemeBuilder/ThemeBuilder.module.css
@ -1,7 +0,0 @@
-.ThemeBuilder {
-  margin-bottom: 30px;
-}
-
-.Buttons button:not(:last-child) {
-  margin-right: 10px;
-}
--- a/Show more
+++ b/Show more
				`@ -1 +0,0 @@`
				`docker build -t flame:dev -f .docker/Dockerfile .`